@@ -344,8 +343,7 @@ export const Legends: React.FunctionComponent
= React.forwardRef {
afterEach(sharedAfterEach);
it('renders LineChart correctly', async () => {
- let wrapper = render();
+ const wrapper = render();
expect(wrapper).toMatchSnapshot();
});
it('renders hideLegend correctly', async () => {
- let wrapper = render();
+ const wrapper = render();
expect(wrapper).toMatchSnapshot();
});
it('renders hideTooltip correctly', async () => {
- let wrapper = render();
+ const wrapper = render();
expect(wrapper).toMatchSnapshot();
});
it('renders enabledLegendsWrapLines correctly', async () => {
- let wrapper = render();
+ const wrapper = render();
expect(wrapper).toMatchSnapshot();
});
it('renders showXAxisLablesTooltip correctly', async () => {
- let wrapper = render();
+ const wrapper = render();
expect(wrapper).toMatchSnapshot();
});
@@ -778,12 +779,12 @@ describe('LineChart snapShot testing', () => {
},
);
- let wrapper = render();
+ const wrapper = render();
expect(wrapper).toMatchSnapshot();
});
it('renders yAxisTickFormat correctly', async () => {
- let wrapper = render();
+ const wrapper = render();
expect(wrapper).toMatchSnapshot();
});
@@ -800,7 +801,7 @@ describe('LineChart snapShot testing', () => {
];
delete points[0].color;
- let wrapper = render();
+ const wrapper = render();
expect(wrapper).toMatchSnapshot();
});
});
@@ -810,25 +811,25 @@ describe('LineChart - basic props', () => {
afterEach(sharedAfterEach);
it('Should not mount legend when hideLegend true ', () => {
- let wrapper = render();
+ const wrapper = render();
const hideLegendDOM = wrapper!.container.querySelectorAll('[class^="legendContainer"]');
expect(hideLegendDOM.length).toBe(0);
});
it('Should mount legend when hideLegend false ', () => {
- let wrapper = render();
+ const wrapper = render();
const hideLegendDOM = wrapper!.container.querySelectorAll('[class^="legendContainer"]');
expect(hideLegendDOM).toBeDefined();
});
it('Should mount callout when hideTootip false ', () => {
- let wrapper = render();
+ const wrapper = render();
const hideLegendDOM = wrapper!.container.querySelectorAll('[class^="ms-Layer"]');
expect(hideLegendDOM).toBeDefined();
});
it('Should not mount callout when hideTootip true ', () => {
- let wrapper = render();
+ const wrapper = render();
const hideLegendDOM = wrapper!.container.querySelectorAll('[class^="ms-Layer"]');
expect(hideLegendDOM.length).toBe(0);
});
@@ -872,7 +873,7 @@ describe('Render empty chart aria label div when chart is empty', () => {
afterEach(sharedAfterEach);
it('No empty chart aria label div rendered', () => {
- let wrapper = render();
+ const wrapper = render();
const renderedDOM = wrapper!.container.querySelectorAll('[aria-label="Graph has no data to display"]');
expect(renderedDOM!.length).toBe(0);
});
@@ -882,7 +883,7 @@ describe('Render empty chart aria label div when chart is empty', () => {
chartTitle: 'EmptyLineChart',
lineChartData: [],
};
- let wrapper = render();
+ const wrapper = render();
const renderedDOM = wrapper!.container.querySelectorAll('[aria-label="Graph has no data to display"]');
expect(renderedDOM!.length).toBe(1);
});
diff --git a/packages/charts/react-charts/library/src/components/LineChart/LineChart.tsx b/packages/charts/react-charts/library/src/components/LineChart/LineChart.tsx
index 9c0d0fbac4cd1..adcca4a23c71e 100644
--- a/packages/charts/react-charts/library/src/components/LineChart/LineChart.tsx
+++ b/packages/charts/react-charts/library/src/components/LineChart/LineChart.tsx
@@ -1,20 +1,21 @@
'use client';
import * as React from 'react';
-import { LineChartProps } from './LineChart.types';
+import type { LineChartProps } from './LineChart.types';
import { useLineChartStyles } from './useLineChartStyles.styles';
-import { Axis as D3Axis } from 'd3-axis';
+import type { Axis as D3Axis } from 'd3-axis';
import { select as d3Select, pointer } from 'd3-selection';
import { bisector } from 'd3-array';
-import { Legend, Legends } from '../Legends/index';
+import type { Legend } from '../Legends/index';
+import { Legends } from '../Legends/index';
import { line as d3Line } from 'd3-shape';
import { max as d3Max } from 'd3-array';
import { useId } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { find, findCalloutPoints, YAxisType } from '../../utilities/index';
-import {
+import type { YAxisType } from '../../utilities/index';
+import { find, findCalloutPoints } from '../../utilities/index';
+import type {
AccessibilityProps,
- CartesianChart,
ChildProps,
LineChartPoints,
CustomizedCalloutData,
@@ -26,8 +27,10 @@ import {
LineChartDataPoint,
YValueHover,
} from '../../index';
+import { CartesianChart } from '../../index';
import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
import { tokens } from '@fluentui/react-theme';
+import type { IDomainNRange } from '../../utilities/index';
import {
calloutData,
ChartTypes,
@@ -40,7 +43,6 @@ import {
getColorFromToken,
findNumericMinMaxOfY,
createNumericYAxis,
- IDomainNRange,
domainRangeOfDateForAreaLineScatterVerticalBarCharts,
domainRangeOfNumericForAreaLineScatterCharts,
createStringYAxis,
@@ -52,7 +54,7 @@ import {
getRangeForScatterMarkerSize,
calculateMarkerRadius,
} from '../../utilities/index';
-import { ScaleLinear } from 'd3-scale';
+import type { ScaleLinear } from 'd3-scale';
import { renderScatterPolarCategoryLabels } from '../../utilities/scatterpolar-utils';
import { formatDateToLocaleString } from '@fluentui/chart-utilities';
import { useImageExport } from '../../utilities/hooks';
@@ -152,25 +154,25 @@ export const LineChart: React.FunctionComponent = React.forwardR
let _xAxisScale: any = '';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let _yScalePrimary: any = '';
- let _circleId: string = useId('circle');
- let _lineId: string = useId('lineID');
- let _borderId: string = useId('borderID');
- let _verticalLine: string = useId('verticalLine');
- let _colorFillBarPatternId: string = useId('colorFillBarPattern');
+ const _circleId: string = useId('circle');
+ const _lineId: string = useId('lineID');
+ const _borderId: string = useId('borderID');
+ const _verticalLine: string = useId('verticalLine');
+ const _colorFillBarPatternId: string = useId('colorFillBarPattern');
let _uniqueCallOutID: string | null = '';
- let _refArray: RefArrayData[] = [];
+ const _refArray: RefArrayData[] = [];
let margins: Margins;
let eventLabelHeight: number = 36;
let lines: JSXElement[];
let _renderedColorFillBars: JSXElement[];
const _colorFillBars = React.useRef([]);
- let _rectId: string = useId('containerRectLD');
- let _staticHighlightCircle: string = useId('staticHighlightCircle');
- let _firstRenderOptimization = true;
- let _emptyChartId: string = useId('_LineChart_empty');
+ const _rectId: string = useId('containerRectLD');
+ const _staticHighlightCircle: string = useId('staticHighlightCircle');
+ const _firstRenderOptimization = true;
+ const _emptyChartId: string = useId('_LineChart_empty');
const _colorFillBarId = useId('_colorFillBarId');
const _isRTL: boolean = useRtl();
- let xAxisCalloutAccessibilityData: AccessibilityProps = {};
+ const xAxisCalloutAccessibilityData: AccessibilityProps = {};
const { cartesianChartRef, legendsRef: _legendsRef } = useImageExport(props.componentRef, props.hideLegend);
let _yScaleSecondary: ScaleLinear | undefined;
@@ -1871,8 +1873,8 @@ export const LineChart: React.FunctionComponent = React.forwardR
}
const calloutProps = {
YValueHover: yValueHover,
- hoverXValue: hoverXValue,
- YValue: YValue,
+ hoverXValue,
+ YValue,
legend: legendVal,
color: lineColor,
XValue: hoverXValue! as string,
@@ -1881,10 +1883,10 @@ export const LineChart: React.FunctionComponent = React.forwardR
? props.getCalloutDescriptionMessage(stackCalloutProps)
: undefined,
tabIndex: 0,
- xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
+ xAxisCalloutAccessibilityData,
...props.calloutProps,
- isPopoverOpen: isPopoverOpen,
- clickPosition: clickPosition,
+ isPopoverOpen,
+ clickPosition,
positioning: {
target: refSelected,
},
diff --git a/packages/charts/react-charts/library/src/components/LineChart/LineChart.types.ts b/packages/charts/react-charts/library/src/components/LineChart/LineChart.types.ts
index 14e2ba5598f3f..089a5d2653d36 100644
--- a/packages/charts/react-charts/library/src/components/LineChart/LineChart.types.ts
+++ b/packages/charts/react-charts/library/src/components/LineChart/LineChart.types.ts
@@ -1,5 +1,5 @@
-import { RenderFunction } from '../../utilities/index';
-import {
+import type { RenderFunction } from '../../utilities/index';
+import type {
ChartProps,
LineChartPoints,
Margins,
@@ -7,8 +7,8 @@ import {
RefArrayData,
CustomizedCalloutData,
} from '../../types/index';
-import { EventAnnotation } from '../../types/EventAnnotation';
-import {
+import type { EventAnnotation } from '../../types/EventAnnotation';
+import type {
CartesianChartProps,
CartesianChartStyleProps,
CartesianChartStyles,
diff --git a/packages/charts/react-charts/library/src/components/LineChart/eventAnnotation/EventAnnotation.tsx b/packages/charts/react-charts/library/src/components/LineChart/eventAnnotation/EventAnnotation.tsx
index 745ab22c62041..a96035b2c390e 100644
--- a/packages/charts/react-charts/library/src/components/LineChart/eventAnnotation/EventAnnotation.tsx
+++ b/packages/charts/react-charts/library/src/components/LineChart/eventAnnotation/EventAnnotation.tsx
@@ -1,9 +1,10 @@
import * as React from 'react';
-import { ScaleTime } from 'd3-scale';
+import type { ScaleTime } from 'd3-scale';
import { tokens } from '@fluentui/react-theme';
import { findIndex } from '../../../utilities/index';
-import { LineDef, LabelLink, LabelDef } from './LabelLink';
-import { EventsAnnotationProps } from '../LineChart.types';
+import type { LineDef, LabelDef } from './LabelLink';
+import { LabelLink } from './LabelLink';
+import type { EventsAnnotationProps } from '../LineChart.types';
import { getColorFromToken } from '../../../utilities/colors';
interface IEventsAnnotationExtendProps extends EventsAnnotationProps {
diff --git a/packages/charts/react-charts/library/src/components/LineChart/eventAnnotation/LabelLink.tsx b/packages/charts/react-charts/library/src/components/LineChart/eventAnnotation/LabelLink.tsx
index 076eb836d12d6..022e7b3f02629 100644
--- a/packages/charts/react-charts/library/src/components/LineChart/eventAnnotation/LabelLink.tsx
+++ b/packages/charts/react-charts/library/src/components/LineChart/eventAnnotation/LabelLink.tsx
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { EventAnnotation } from '../../../types/EventAnnotation';
+import type { EventAnnotation } from '../../../types/EventAnnotation';
import { Textbox } from './Textbox';
import { getColorFromToken } from '../../../utilities/colors';
import { tokens } from '@fluentui/react-theme';
diff --git a/packages/charts/react-charts/library/src/components/LineChart/useLineChartStyles.styles.ts b/packages/charts/react-charts/library/src/components/LineChart/useLineChartStyles.styles.ts
index 808e09b640f43..3fb093710d092 100644
--- a/packages/charts/react-charts/library/src/components/LineChart/useLineChartStyles.styles.ts
+++ b/packages/charts/react-charts/library/src/components/LineChart/useLineChartStyles.styles.ts
@@ -1,9 +1,10 @@
'use client';
-import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';
+import type { GriffelStyle } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
-import { LineChartProps, LineChartStyles } from './LineChart.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src/index';
+import type { LineChartProps, LineChartStyles } from './LineChart.types';
+import type { SlotClassNames } from '@fluentui/react-utilities/src/index';
import { HighContrastSelector } from '../../utilities/index';
import { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';
diff --git a/packages/charts/react-charts/library/src/components/PolarChart/PolarChart.tsx b/packages/charts/react-charts/library/src/components/PolarChart/PolarChart.tsx
index 93c7b64650ee2..c2106487ea9b5 100644
--- a/packages/charts/react-charts/library/src/components/PolarChart/PolarChart.tsx
+++ b/packages/charts/react-charts/library/src/components/PolarChart/PolarChart.tsx
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { PolarChartProps } from './PolarChart.types';
+import type { PolarChartProps } from './PolarChart.types';
import { usePolarChartStyles } from './usePolarChartStyles.styles';
import { useImageExport } from '../../utilities/hooks';
import {
@@ -10,9 +10,10 @@ import {
lineRadial as d3LineRadial,
curveLinearClosed as d3CurveLinearClosed,
} from 'd3-shape';
-import { AreaPolarSeries, LinePolarSeries, PolarDataPoint, ScatterPolarSeries } from '../../types/DataPoint';
+import type { AreaPolarSeries, LinePolarSeries, PolarDataPoint, ScatterPolarSeries } from '../../types/DataPoint';
import { tokens } from '@fluentui/react-theme';
-import { Legend, Legends } from '../Legends/index';
+import type { Legend } from '../Legends/index';
+import { Legends } from '../Legends/index';
import {
createRadialScale,
getContinuousScaleDomain,
diff --git a/packages/charts/react-charts/library/src/components/PolarChart/PolarChart.types.ts b/packages/charts/react-charts/library/src/components/PolarChart/PolarChart.types.ts
index a433559d2be01..0895cc1b84583 100644
--- a/packages/charts/react-charts/library/src/components/PolarChart/PolarChart.types.ts
+++ b/packages/charts/react-charts/library/src/components/PolarChart/PolarChart.types.ts
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {
+import type * as React from 'react';
+import type {
AreaPolarSeries,
AxisCategoryOrder,
AxisProps,
@@ -9,7 +9,7 @@ import {
Margins,
ScatterPolarSeries,
} from '../../types/DataPoint';
-import { LegendsProps } from '../Legends/Legends.types';
+import type { LegendsProps } from '../Legends/Legends.types';
/**
* Configuration options for a polar axis.
diff --git a/packages/charts/react-charts/library/src/components/PolarChart/PolarChart.utils.ts b/packages/charts/react-charts/library/src/components/PolarChart/PolarChart.utils.ts
index 73d5cc5a1eca2..2438d5ec70d63 100644
--- a/packages/charts/react-charts/library/src/components/PolarChart/PolarChart.utils.ts
+++ b/packages/charts/react-charts/library/src/components/PolarChart/PolarChart.utils.ts
@@ -1,17 +1,14 @@
+import type { NumberValue, ScaleBand, ScaleContinuousNumeric, ScaleTime } from 'd3-scale';
import {
scaleBand as d3ScaleBand,
scaleLinear as d3ScaleLinear,
scaleLog as d3ScaleLog,
scaleTime as d3ScaleTime,
scaleUtc as d3ScaleUtc,
- NumberValue,
- ScaleBand,
- ScaleContinuousNumeric,
- ScaleTime,
} from 'd3-scale';
import { extent as d3Extent, range as d3Range } from 'd3-array';
import { format as d3Format } from 'd3-format';
-import { AxisScaleType } from '../../types/DataPoint';
+import type { AxisScaleType } from '../../types/DataPoint';
import {
generateDateTicks,
generateNumericTicks,
@@ -26,7 +23,7 @@ import {
formatDateToLocaleString,
} from '@fluentui/chart-utilities';
import { timeFormat as d3TimeFormat, utcFormat as d3UtcFormat } from 'd3-time-format';
-import { PolarChartProps } from './PolarChart.types';
+import type { PolarChartProps } from './PolarChart.types';
export const EPSILON = 1e-6;
diff --git a/packages/charts/react-charts/library/src/components/PolarChart/usePolarChartStyles.styles.ts b/packages/charts/react-charts/library/src/components/PolarChart/usePolarChartStyles.styles.ts
index a05319080edb0..2658a2f6c8a74 100644
--- a/packages/charts/react-charts/library/src/components/PolarChart/usePolarChartStyles.styles.ts
+++ b/packages/charts/react-charts/library/src/components/PolarChart/usePolarChartStyles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
-import { PolarChartStyles, PolarChartProps } from './PolarChart.types';
+import type { PolarChartStyles, PolarChartProps } from './PolarChart.types';
import type { SlotClassNames } from '@fluentui/react-utilities';
import { tokens, typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/charts/react-charts/library/src/components/ResponsiveContainer/ResponsiveContainer.tsx b/packages/charts/react-charts/library/src/components/ResponsiveContainer/ResponsiveContainer.tsx
index a42bcafc570d5..f2a2c1f616b53 100644
--- a/packages/charts/react-charts/library/src/components/ResponsiveContainer/ResponsiveContainer.tsx
+++ b/packages/charts/react-charts/library/src/components/ResponsiveContainer/ResponsiveContainer.tsx
@@ -2,7 +2,7 @@
import * as React from 'react';
import { getWindow } from '../../utilities/getWindow';
-import { ResponsiveChildProps, ResponsiveContainerProps } from './ResponsiveContainer.types';
+import type { ResponsiveChildProps, ResponsiveContainerProps } from './ResponsiveContainer.types';
import { useResponsiveChildStyles } from './useResponsiveChildStyles.styles';
import { mergeClasses } from '@griffel/react';
diff --git a/packages/charts/react-charts/library/src/components/ResponsiveContainer/ResponsiveContainer.types.ts b/packages/charts/react-charts/library/src/components/ResponsiveContainer/ResponsiveContainer.types.ts
index ae8e74d223b5a..73e33d5cf5cf5 100644
--- a/packages/charts/react-charts/library/src/components/ResponsiveContainer/ResponsiveContainer.types.ts
+++ b/packages/charts/react-charts/library/src/components/ResponsiveContainer/ResponsiveContainer.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
/**
* Responsive Child styles
diff --git a/packages/charts/react-charts/library/src/components/ResponsiveContainer/useResponsiveChildStyles.styles.ts b/packages/charts/react-charts/library/src/components/ResponsiveContainer/useResponsiveChildStyles.styles.ts
index 8b782c6d0f2eb..28aad3969a49b 100644
--- a/packages/charts/react-charts/library/src/components/ResponsiveContainer/useResponsiveChildStyles.styles.ts
+++ b/packages/charts/react-charts/library/src/components/ResponsiveContainer/useResponsiveChildStyles.styles.ts
@@ -1,8 +1,8 @@
'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
-import { ResponsiveChildStyles } from './ResponsiveContainer.types';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { ResponsiveChildStyles } from './ResponsiveContainer.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
export const responsiveChildClassNames: SlotClassNames = {
root: 'fui-charts-resp-child__root',
diff --git a/packages/charts/react-charts/library/src/components/ResponsiveContainer/withResponsiveContainer.tsx b/packages/charts/react-charts/library/src/components/ResponsiveContainer/withResponsiveContainer.tsx
index 2d3df94332ac7..c19064c6931ca 100644
--- a/packages/charts/react-charts/library/src/components/ResponsiveContainer/withResponsiveContainer.tsx
+++ b/packages/charts/react-charts/library/src/components/ResponsiveContainer/withResponsiveContainer.tsx
@@ -3,7 +3,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import * as React from 'react';
import { ResponsiveContainer } from './ResponsiveContainer';
-import { ResponsiveContainerProps } from './ResponsiveContainer.types';
+import type { ResponsiveContainerProps } from './ResponsiveContainer.types';
/**
* An HOC to update wrapped component on container resize.
diff --git a/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.test.tsx b/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.test.tsx
index 5a553dfcca735..429819483414b 100644
--- a/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.test.tsx
+++ b/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.test.tsx
@@ -5,9 +5,9 @@ import { axe, toHaveNoViolations } from 'jest-axe';
import * as React from 'react';
import { getByClass, getById, testWithWait, testWithoutWait } from '../../utilities/TestUtility.test';
import { SankeyChart } from './SankeyChart';
-import { ChartProps } from './index';
+import type { ChartProps } from './index';
import { resetIdsForTests } from '@fluentui/react-utilities';
-import { SankeyChartAccessibilityProps, SankeyChartProps, SankeyChartStrings } from './index';
+import type { SankeyChartAccessibilityProps, SankeyChartProps, SankeyChartStrings } from './index';
expect.extend(toHaveNoViolations);
@@ -457,7 +457,7 @@ describe('SankeyChart - mouse events', () => {
}
beforeEach(sharedBeforeEach);
it('Should render correctly on node mouseover', () => {
- let wrapper = render();
+ const wrapper = render();
const rects = wrapper.container.querySelectorAll('rect');
fireEvent.mouseOver(rects[1]);
expect(wrapper).toMatchSnapshot();
@@ -479,7 +479,7 @@ describe('SankeyChart - mouse events', () => {
it('Should not add elements to the diagram when moving inside a "link" element and then back out', () => {
// ARRANGE
- let wrapper = render();
+ const wrapper = render();
let addedCount = 0;
let removedCount = 0;
const observer = new MutationObserver(mutations => {
@@ -511,7 +511,7 @@ describe('SankeyChart - mouse events', () => {
it.skip('Should not add elements to the diagram when moving inside a "node" element and then back out', () => {
// ARRANGE
- let wrapper = render();
+ const wrapper = render();
let addedCount = 0;
let removedCount = 0;
const observer = new MutationObserver(mutations => {
diff --git a/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.tsx b/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.tsx
index a54c84b642e60..d25130c18dfe5 100644
--- a/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.tsx
+++ b/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.tsx
@@ -5,13 +5,16 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
import { tokens } from '@fluentui/react-theme';
import { useId } from '@fluentui/react-utilities';
import { sum as d3Sum } from 'd3-array';
-import { SankeyGraph, SankeyLayout, sankey as d3Sankey, sankeyJustify, sankeyRight } from 'd3-sankey';
-import { Selection as D3Selection, select, selectAll } from 'd3-selection';
+import type { SankeyGraph, SankeyLayout } from 'd3-sankey';
+import { sankey as d3Sankey, sankeyJustify, sankeyRight } from 'd3-sankey';
+import type { Selection as D3Selection } from 'd3-selection';
+import { select, selectAll } from 'd3-selection';
import { area as d3Area, curveBumpX as d3CurveBasis } from 'd3-shape';
-import { Margins, SLink, SNode } from '../../types/DataPoint';
-import { SankeyChartData, SankeyChartProps } from './SankeyChart.types';
+import type { Margins, SLink, SNode } from '../../types/DataPoint';
+import type { SankeyChartData, SankeyChartProps } from './SankeyChart.types';
import { useSankeyChartStyles } from './useSankeyChartStyles.styles';
-import { ChartPopover, ChartPopoverProps } from '../CommonComponents/index';
+import type { ChartPopoverProps } from '../CommonComponents/index';
+import { ChartPopover } from '../CommonComponents/index';
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
import { format } from '../../utilities/string';
import { useImageExport } from '../../utilities/hooks';
@@ -72,7 +75,7 @@ function getSelectedNodes(selectedLinks: Set): any[] {
}
function getSelectedLinks(singleNode: SNode): Set {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-array-constructor
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
const q: any = new Array();
const finalLinks: Set = new Set();
@@ -117,7 +120,7 @@ function getSelectedLinksforStreamHover(singleLink: SLink): {
selectedLinks: Set;
selectedNodes: Set;
} {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-array-constructor
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
const q: any = new Array();
const finalLinks: Set = new Set();
const finalNodes: Set = new Set();
diff --git a/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.types.ts b/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.types.ts
index c4853780d405c..3e53d8a3adf98 100644
--- a/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.types.ts
+++ b/packages/charts/react-charts/library/src/components/SankeyChart/SankeyChart.types.ts
@@ -1,7 +1,7 @@
-import { Ref } from 'react';
+import type { Ref } from 'react';
import type { TitleStyles } from '../../utilities/Common.styles';
-import { ChartPopoverProps } from '../CommonComponents/ChartPopover.types';
-import { Chart, ChartProps } from '../../types/DataPoint';
+import type { ChartPopoverProps } from '../CommonComponents/ChartPopover.types';
+import type { Chart, ChartProps } from '../../types/DataPoint';
export type { ChartProps, DataPoint, SankeyChartData } from '../../types/DataPoint';
diff --git a/packages/charts/react-charts/library/src/components/SankeyChart/useSankeyChartStyles.styles.ts b/packages/charts/react-charts/library/src/components/SankeyChart/useSankeyChartStyles.styles.ts
index 7b81433c20d4a..00bcf5a4b42a7 100644
--- a/packages/charts/react-charts/library/src/components/SankeyChart/useSankeyChartStyles.styles.ts
+++ b/packages/charts/react-charts/library/src/components/SankeyChart/useSankeyChartStyles.styles.ts
@@ -1,6 +1,7 @@
'use client';
-import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';
+import type { GriffelStyle } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
import type { SankeyChartProps, SankeyChartStyles } from './SankeyChart.types';
import type { SlotClassNames } from '@fluentui/react-utilities';
import { tokens, typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.test.tsx b/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.test.tsx
index 2610c702c46e0..eeb8a897cc0ac 100644
--- a/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.test.tsx
+++ b/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.test.tsx
@@ -2,7 +2,7 @@ import { screen, fireEvent } from '@testing-library/react';
import { getByClass, testWithWait, testWithoutWait } from '../../utilities/TestUtility.test';
import { ScatterChart } from './ScatterChart';
import { toHaveNoViolations } from 'jest-axe';
-import { ChartProps } from '../../ScatterChart';
+import type { ChartProps } from '../../ScatterChart';
expect.extend(toHaveNoViolations);
const chartData: ChartProps = {
diff --git a/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.tsx b/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.tsx
index 7210615526f8d..c454c1318a03a 100644
--- a/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.tsx
+++ b/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.tsx
@@ -1,14 +1,16 @@
'use client';
import * as React from 'react';
-import { ScatterChartProps } from './ScatterChart.types';
+import type { ScatterChartProps } from './ScatterChart.types';
import { useScatterChartStyles } from './useScatterChartStyles.styles';
-import { Axis as D3Axis } from 'd3-axis';
+import type { Axis as D3Axis } from 'd3-axis';
import { select as d3Select } from 'd3-selection';
-import { Legend, Legends } from '../Legends/index';
+import type { Legend } from '../Legends/index';
+import { Legends } from '../Legends/index';
import { max as d3Max, min as d3Min } from 'd3-array';
import { useId } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
+import type { IDomainNRange } from '../../utilities/index';
import {
areArraysEqual,
createNumericYAxis,
@@ -16,7 +18,6 @@ import {
getDomainPaddingForMarkers,
domainRangeOfXStringAxis,
findNumericMinMaxOfY,
- IDomainNRange,
YAxisType,
isTextMode,
isScatterPolarSeries,
@@ -28,9 +29,8 @@ import {
sortAxisCategories,
findCalloutPoints,
} from '../../utilities/index';
-import {
+import type {
AccessibilityProps,
- CartesianChart,
ChildProps,
CustomizedCalloutData,
Margins,
@@ -39,6 +39,7 @@ import {
ScatterChartPoints,
YValueHover,
} from '../../index';
+import { CartesianChart } from '../../index';
import { tokens } from '@fluentui/react-theme';
import {
calloutData,
@@ -48,7 +49,7 @@ import {
getNextColor,
getColorFromToken,
} from '../../utilities/index';
-import { LineChartPoints } from '../../types/DataPoint';
+import type { LineChartPoints } from '../../types/DataPoint';
import { renderScatterPolarCategoryLabels } from '../../utilities/scatterpolar-utils';
import { formatDateToLocaleString } from '@fluentui/chart-utilities';
import { useImageExport } from '../../utilities/hooks';
@@ -77,11 +78,11 @@ export const ScatterChart: React.FunctionComponent = React.fo
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let _yAxisScale: any = '';
let _uniqueCallOutID: string | null = '';
- let _refArray: RefArrayData[] = [];
+ const _refArray: RefArrayData[] = [];
let margins: Margins;
let renderSeries: JSXElement[];
let _xAxisLabels: string[] = [];
- let xAxisCalloutAccessibilityData: AccessibilityProps = {};
+ const xAxisCalloutAccessibilityData: AccessibilityProps = {};
let _xBandwidth = 0;
const { cartesianChartRef, legendsRef: _legendsRef } = useImageExport(props.componentRef, props.hideLegend);
const classes = useScatterChartStyles(props);
@@ -741,7 +742,7 @@ export const ScatterChart: React.FunctionComponent = React.fo
componentRef={cartesianChartRef}
{...(_isScatterPolarRef.current ? { yMaxValue: 1, yMinValue: -1 } : {})}
/* eslint-disable react/jsx-no-bind */
- // eslint-disable-next-line react/no-children-prop
+
children={(props: ChildProps) => {
_xAxisScale = props.xScale!;
_yAxisScale = props.yScalePrimary!;
diff --git a/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.types.ts b/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.types.ts
index 3c814982b0946..dc7c6499f4318 100644
--- a/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.types.ts
+++ b/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.types.ts
@@ -1,6 +1,5 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import { RenderFunction } from '../../utilities/index';
-import {
+import type { RenderFunction } from '../../utilities/index';
+import type {
ChartProps,
LineChartPoints,
Margins,
@@ -8,7 +7,7 @@ import {
RefArrayData,
CustomizedCalloutData,
} from '../../types/index';
-import {
+import type {
CartesianChartProps,
CartesianChartStyleProps,
CartesianChartStyles,
diff --git a/packages/charts/react-charts/library/src/components/ScatterChart/useScatterChartStyles.styles.ts b/packages/charts/react-charts/library/src/components/ScatterChart/useScatterChartStyles.styles.ts
index 5d354994fe4d6..e8df8fe04b7fa 100644
--- a/packages/charts/react-charts/library/src/components/ScatterChart/useScatterChartStyles.styles.ts
+++ b/packages/charts/react-charts/library/src/components/ScatterChart/useScatterChartStyles.styles.ts
@@ -1,8 +1,9 @@
'use client';
-import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';
-import { ScatterChartProps, ScatterChartStyles } from './ScatterChart.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src/index';
+import type { GriffelStyle } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import type { ScatterChartProps, ScatterChartStyles } from './ScatterChart.types';
+import type { SlotClassNames } from '@fluentui/react-utilities/src/index';
import { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';
/**
diff --git a/packages/charts/react-charts/library/src/components/Sparkline/Sparkline.test.tsx b/packages/charts/react-charts/library/src/components/Sparkline/Sparkline.test.tsx
index 6dd1d9808256e..76db7c8bcf782 100644
--- a/packages/charts/react-charts/library/src/components/Sparkline/Sparkline.test.tsx
+++ b/packages/charts/react-charts/library/src/components/Sparkline/Sparkline.test.tsx
@@ -1,7 +1,8 @@
import { act, queryAllByAttribute, render, waitFor } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';
import * as React from 'react';
-import { ChartProps, Sparkline } from './index';
+import type { ChartProps } from './index';
+import { Sparkline } from './index';
expect.extend(toHaveNoViolations);
@@ -139,13 +140,13 @@ describe('Sparkline snapShot testing', () => {
describe('Render empty chart aria label div when chart is empty', () => {
it('No empty chart aria label div rendered', () => {
- let wrapper = render();
+ const wrapper = render();
const renderedDOM = wrapper!.container.querySelectorAll('[aria-label="Graph has no data to display"]');
expect(renderedDOM!.length).toBe(0);
});
it('Empty chart aria label div rendered', () => {
- let wrapper = render();
+ const wrapper = render();
const renderedDOM = wrapper!.container.querySelectorAll('[aria-label="Graph has no data to display"]');
expect(renderedDOM!.length).toBe(1);
});
diff --git a/packages/charts/react-charts/library/src/components/Sparkline/Sparkline.tsx b/packages/charts/react-charts/library/src/components/Sparkline/Sparkline.tsx
index f010a3eb93699..ede1beb02617e 100644
--- a/packages/charts/react-charts/library/src/components/Sparkline/Sparkline.tsx
+++ b/packages/charts/react-charts/library/src/components/Sparkline/Sparkline.tsx
@@ -5,8 +5,8 @@ import { extent as d3Extent, max as d3Max } from 'd3-array';
import { scaleLinear as d3ScaleLinear } from 'd3-scale';
import { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';
import * as React from 'react';
-import { SparklineProps } from '../../index';
-import { LineChartDataPoint } from '../../types/DataPoint';
+import type { SparklineProps } from '../../index';
+import type { LineChartDataPoint } from '../../types/DataPoint';
import { useRtl } from '../../utilities/index';
import { useSparklineStyles } from './useSparklineStyles.styles';
@@ -18,7 +18,7 @@ import { useSparklineStyles } from './useSparklineStyles.styles';
*/
export const Sparkline: React.FunctionComponent = React.forwardRef(
(props, forwardedRef) => {
- let margin = {
+ const margin = {
top: 2,
right: 0,
bottom: 0,
@@ -26,8 +26,8 @@ export const Sparkline: React.FunctionComponent = React.forwardR
};
let x: any;
let y: any;
- let _emptyChartId: string = '_SparklineChart_empty';
- let _isRTL: boolean = useRtl();
+ const _emptyChartId: string = '_SparklineChart_empty';
+ const _isRTL: boolean = useRtl();
const [points, setPoints] = React.useState([]);
// Use props with default fallbacks instead of hardcoded values
@@ -52,7 +52,6 @@ export const Sparkline: React.FunctionComponent = React.forwardR
React.useEffect(() => {
if (!_isChartEmpty()) {
- // eslint-disable-next-line @typescript-eslint/no-shadow
const _points = props.data!.lineChartData![0].data;
/* eslint-disable @typescript-eslint/no-explicit-any */
diff --git a/packages/charts/react-charts/library/src/components/Sparkline/Sparkline.types.ts b/packages/charts/react-charts/library/src/components/Sparkline/Sparkline.types.ts
index cb88ebedf377a..1591314939f40 100644
--- a/packages/charts/react-charts/library/src/components/Sparkline/Sparkline.types.ts
+++ b/packages/charts/react-charts/library/src/components/Sparkline/Sparkline.types.ts
@@ -1,5 +1,5 @@
-import { ChartProps } from './index';
-import { CartesianChartStyleProps } from '../CommonComponents/index';
+import type { ChartProps } from './index';
+import type { CartesianChartStyleProps } from '../CommonComponents/index';
export interface SparklineStyleProps extends CartesianChartStyleProps {}
diff --git a/packages/charts/react-charts/library/src/components/Sparkline/SparklineChartUT.test.tsx b/packages/charts/react-charts/library/src/components/Sparkline/SparklineChartUT.test.tsx
index dd20535a529f3..d5597b46f297b 100644
--- a/packages/charts/react-charts/library/src/components/Sparkline/SparklineChartUT.test.tsx
+++ b/packages/charts/react-charts/library/src/components/Sparkline/SparklineChartUT.test.tsx
@@ -1,6 +1,6 @@
import { getByClass, testWithWait } from '../../utilities/TestUtility.test';
import { Sparkline } from './Sparkline';
-import { ChartProps } from './index';
+import type { ChartProps } from './index';
import { emptySparklinePoints } from './Sparkline.test';
import { getByRole, queryAllByAttribute, render } from '@testing-library/react';
import * as React from 'react';
diff --git a/packages/charts/react-charts/library/src/components/Sparkline/useSparklineStyles.styles.ts b/packages/charts/react-charts/library/src/components/Sparkline/useSparklineStyles.styles.ts
index 4b88241352e19..923395cb422bb 100644
--- a/packages/charts/react-charts/library/src/components/Sparkline/useSparklineStyles.styles.ts
+++ b/packages/charts/react-charts/library/src/components/Sparkline/useSparklineStyles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
-import { SparklineProps, SparklineStyles } from './Sparkline.types';
+import type { SparklineProps, SparklineStyles } from './Sparkline.types';
import type { SlotClassNames } from '@fluentui/react-utilities';
import { tokens, typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChartHooks.ts b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChartHooks.ts
index 2af70cef83a04..459060a0bc146 100644
--- a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChartHooks.ts
+++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChartHooks.ts
@@ -2,7 +2,8 @@
import * as React from 'react';
import { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';
-import { Theme, webLightTheme } from '@fluentui/tokens';
+import type { Theme } from '@fluentui/tokens';
+import { webLightTheme } from '@fluentui/tokens';
import { hsl as d3Hsl } from 'd3-color';
/**
diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaLiteSchemaAdapter.ts b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaLiteSchemaAdapter.ts
index ca2bdc89c04af..56630dedd9722 100644
--- a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaLiteSchemaAdapter.ts
+++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaLiteSchemaAdapter.ts
@@ -2660,7 +2660,7 @@ export function transformVegaLiteToVerticalStackedBarChartProps(
const hasSecondaryYAxis = chartData.some(point => point.lineData?.some(line => line.useSecondaryYScale));
// Extract secondary Y-axis properties from line layers
- let secondaryYAxisProps: Record = {};
+ const secondaryYAxisProps: Record = {};
if (hasSecondaryYAxis && lineSpecs.length > 0) {
const lineSpec = lineSpecs[0];
const lineEncoding = lineSpec.encoding || {};
diff --git a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.test.tsx b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.test.tsx
index ad4cd87087fa2..1dbe92bfa7013 100644
--- a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.test.tsx
+++ b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.test.tsx
@@ -13,15 +13,15 @@ import {
testWithWait,
testWithoutWait,
} from '../../utilities/TestUtility.test';
-import { VerticalBarChartProps } from './VerticalBarChart.types';
-import { VerticalBarChartDataPoint } from '../../index';
+import type { VerticalBarChartProps } from './VerticalBarChart.types';
+import type { VerticalBarChartDataPoint } from '../../index';
import { allNegativeChartPointsVBC, chartPointsVBC, negativeChartPointsVBC } from '../../utilities/test-data';
import { axe, toHaveNoViolations } from 'jest-axe';
const { Timezone } = require('../../../scripts/constants');
const env = require('../../../config/tests');
expect.extend(toHaveNoViolations);
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
declare const global: any;
beforeAll(() => {
@@ -945,44 +945,43 @@ describe('VerticalBarChart snapShot testing', () => {
expect(container.firstChild).toMatchSnapshot();
});
});
-/* eslint-enable @typescript-eslint/no-deprecated */
describe('VerticalBarChart - basic props', () => {
beforeEach(sharedBeforeEach);
afterEach(sharedAfterEach);
it('Should not mount legend when hideLegend true ', () => {
- let wrapper = render();
+ const wrapper = render();
const hideLegendDOM = wrapper!.container.querySelectorAll('[class^="legendContainer"]');
expect(hideLegendDOM!.length).toBe(0);
});
it('Should mount legend when hideLegend false ', () => {
- let wrapper = render();
+ const wrapper = render();
const hideLegendDOM = wrapper!.container.querySelectorAll('[class^="legendContainer"]');
expect(hideLegendDOM).toBeDefined();
});
it('Should mount callout when hideTootip false ', () => {
- let wrapper = render();
+ const wrapper = render();
const hideLegendDOM = wrapper!.container.querySelectorAll('[class^="ms-Layer"]');
expect(hideLegendDOM).toBeDefined();
});
it('Should not mount callout when hideTootip true ', () => {
- let wrapper = render();
+ const wrapper = render();
const hideLegendDOM = wrapper!.container.querySelectorAll('[class^="ms-Layer"]');
expect(hideLegendDOM!.length).toBe(0);
});
it('Should not render onRenderCalloutPerStack ', () => {
- let wrapper = render();
+ const wrapper = render();
const renderedDOM = wrapper!.container.getElementsByClassName('.onRenderCalloutPerStack');
expect(renderedDOM!.length).toBe(0);
});
it('Should render onRenderCalloutPerDataPoint ', () => {
- let wrapper = render(
+ const wrapper = render(
@@ -999,7 +998,7 @@ describe('VerticalBarChart - basic props', () => {
});
it('Should not render onRenderCalloutPerDataPoint ', () => {
- let wrapper = render();
+ const wrapper = render();
const renderedDOM = wrapper!.container.getElementsByClassName('.onRenderCalloutPerDataPoint');
expect(renderedDOM!.length).toBe(0);
});
@@ -1040,13 +1039,13 @@ describe('Render empty chart aria label div when chart is empty', () => {
beforeEach(sharedBeforeEach);
afterEach(sharedAfterEach);
it('No empty chart aria label div rendered', () => {
- let wrapper = render();
+ const wrapper = render();
const renderedDOM = wrapper!.container.querySelectorAll('[aria-label="Graph has no data to display"]');
expect(renderedDOM!.length).toBe(0);
});
it('Empty chart aria label div rendered', () => {
- let wrapper = render();
+ const wrapper = render();
const renderedDOM = wrapper!.container.querySelectorAll('[aria-label="Graph has no data to display"]');
expect(renderedDOM!.length).toBe(1);
});
diff --git a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx
index 6555625852dd6..5db23b0112632 100644
--- a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx
+++ b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx
@@ -4,35 +4,28 @@ import * as React from 'react';
import { useVerticalBarChartStyles } from './useVerticalBarChartStyles.styles';
import { max as d3Max, min as d3Min } from 'd3-array';
import { line as d3Line } from 'd3-shape';
-import {
- scaleLinear as d3ScaleLinear,
- ScaleLinear as D3ScaleLinear,
- scaleBand as d3ScaleBand,
- scaleUtc as d3ScaleUtc,
-} from 'd3-scale';
+import type { ScaleLinear as D3ScaleLinear } from 'd3-scale';
+import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3ScaleUtc } from 'd3-scale';
import { useId } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import { tokens } from '@fluentui/react-theme';
-import {
+import type {
AccessibilityProps,
- CartesianChart,
Margins,
Legend,
RefArrayData,
VerticalBarChartProps,
VerticalBarChartDataPoint,
- Legends,
ChildProps,
YValueHover,
- ChartPopover,
DataPoint,
} from '../../index';
+import { CartesianChart, Legends, ChartPopover } from '../../index';
+import type { IAxisData, NumericAxis, IDomainNRange } from '../../utilities/index';
import {
ChartTypes,
- IAxisData,
getAccessibleDataObject,
XAxisTypes,
- NumericAxis,
getTypeOfAxis,
formatScientificLimitWidth,
getBarWidth,
@@ -44,7 +37,6 @@ import {
calculateLongestLabelWidth,
findVerticalNumericMinMaxOfY,
createNumericYAxis,
- IDomainNRange,
domainRangeOfVerticalNumeric,
domainRangeOfDateForAreaLineScatterVerticalBarCharts,
domainRangeOfXStringAxis,
@@ -428,7 +420,6 @@ export const VerticalBarChart: React.FunctionComponent =
YValueHover: YValueHover[];
hoverXValue: string | number | undefined;
} {
- // eslint-disable-next-line @typescript-eslint/no-shadow
const YValueHover: YValueHover[] = [];
const { useSingleColor = false } = props;
const { data, lineLegendText, lineLegendColor = tokens.colorPaletteYellowBackground1 } = props;
@@ -514,7 +505,6 @@ export const VerticalBarChart: React.FunctionComponent =
setHoverXValue('');
}
- // eslint-disable-next-line @typescript-eslint/no-shadow
function _onBarFocus(
event: React.FocusEvent,
point: VerticalBarChartDataPoint,
@@ -1129,16 +1119,16 @@ export const VerticalBarChart: React.FunctionComponent =
const calloutProps = {
...(_isHavingLine && {
YValueHover: hoveredYValues,
- hoverXValue: hoverXValue,
+ hoverXValue,
}),
- color: color,
+ color,
legend: calloutLegend,
XValue: xCalloutValue,
YValue: yCalloutValue ? yCalloutValue : dataForHoverCard,
...props.calloutProps,
...getAccessibleDataObject(callOutAccessibilityData),
- clickPosition: clickPosition,
- isPopoverOpen: isPopoverOpen,
+ clickPosition,
+ isPopoverOpen,
isCalloutForStack: _isHavingLine && (_noLegendHighlighted() || _getHighlightedLegend().length > 1),
culture: props.culture,
isCartesian: true,
@@ -1185,7 +1175,7 @@ export const VerticalBarChart: React.FunctionComponent =
!isScalePaddingDefined(props.xAxisInnerPadding, props.xAxisPadding) && props.mode !== 'histogram'
}
/* eslint-disable react/jsx-no-bind */
- // eslint-disable-next-line react/no-children-prop
+
children={(props: ChildProps) => {
return (
<>
diff --git a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.types.ts b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.types.ts
index f2eb3af39ebb0..85ef79010f4bc 100644
--- a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.types.ts
+++ b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.types.ts
@@ -1,11 +1,11 @@
-import { RenderFunction } from '../../utilities/index';
-import {
+import type { RenderFunction } from '../../utilities/index';
+import type {
CartesianChartProps,
CartesianChartStyleProps,
CartesianChartStyles,
VerticalBarChartDataPoint,
} from '../../index';
-import { LineChartLineOptions } from '../../types/index';
+import type { LineChartLineOptions } from '../../types/index';
/**
* Vertical Bar Chart properties
diff --git a/packages/charts/react-charts/library/src/components/VerticalBarChart/useVerticalBarChartStyles.styles.ts b/packages/charts/react-charts/library/src/components/VerticalBarChart/useVerticalBarChartStyles.styles.ts
index aa51a11ba4f73..e9e19d850647a 100644
--- a/packages/charts/react-charts/library/src/components/VerticalBarChart/useVerticalBarChartStyles.styles.ts
+++ b/packages/charts/react-charts/library/src/components/VerticalBarChart/useVerticalBarChartStyles.styles.ts
@@ -1,8 +1,9 @@
'use client';
-import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';
-import { VerticalBarChartProps, VerticalBarChartStyles } from '../../index';
-import { SlotClassNames } from '@fluentui/react-utilities/src/index';
+import type { GriffelStyle } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import type { VerticalBarChartProps, VerticalBarChartStyles } from '../../index';
+import type { SlotClassNames } from '@fluentui/react-utilities/src/index';
import { tokens } from '@fluentui/react-theme';
import { HighContrastSelector } from '../../utilities/utilities';
import { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';
diff --git a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
index 8443c94c4dfb0..7932b1479cd20 100644
--- a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
+++ b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
@@ -1,6 +1,6 @@
import { render, screen, fireEvent, act } from '@testing-library/react';
import * as React from 'react';
-import { VSChartDataPoint, VerticalStackedChartProps } from '../../index';
+import type { VSChartDataPoint, VerticalStackedChartProps } from '../../index';
import { forEachTimezone, getByClass, getById, testWithWait, testWithoutWait } from '../../utilities/TestUtility.test';
import { VerticalStackedBarChart } from './VerticalStackedBarChart';
import { chartPoints2VSBC, chartPointsVSBC } from '../../utilities/test-data';
@@ -891,38 +891,37 @@ describe('VerticalStackedBarChart snapShot testing', () => {
expect(container.firstChild).toMatchSnapshot();
});
});
-/* eslint-enable @typescript-eslint/no-deprecated */
describe('VerticalStackedBarChart - basic props', () => {
beforeEach(sharedBeforeEach);
afterEach(sharedAfterEach);
it('Should not mount legend when hideLegend true ', () => {
- let wrapper = render();
+ const wrapper = render();
const hideLegendDOM = wrapper.container.querySelectorAll('[class^="legendContainer"]');
expect(hideLegendDOM.length).toBe(0);
});
it('Should mount legend when hideLegend false ', () => {
- let wrapper = render();
+ const wrapper = render();
const hideLegendDOM = wrapper.container.querySelectorAll('[class^="legendContainer"]');
expect(hideLegendDOM).toBeDefined();
});
it('Should mount callout when hideTootip false ', () => {
- let wrapper = render();
+ const wrapper = render();
const hideTooltipDom = wrapper.container.querySelectorAll('[class^="ms-Layer"]');
expect(hideTooltipDom).toBeDefined();
});
it('Should not mount callout when hideTootip true ', () => {
- let wrapper = render();
+ const wrapper = render();
const hideTooltipDom = wrapper!.container.querySelectorAll('[class^="ms-Layer"]');
expect(hideTooltipDom.length).toBe(0);
});
it('Should render onRenderCalloutPerStack ', () => {
- let wrapper = render(
+ const wrapper = render(
@@ -940,13 +939,13 @@ describe('VerticalStackedBarChart - basic props', () => {
});
it('Should not render onRenderCalloutPerStack ', () => {
- let wrapper = render();
+ const wrapper = render();
const renderedDOM = wrapper!.container.getElementsByClassName('.onRenderCalloutPerStack');
expect(renderedDOM!.length).toBe(0);
});
it('Should render onRenderCalloutPerDataPoint ', () => {
- let wrapper = render(
+ const wrapper = render(
@@ -963,7 +962,7 @@ describe('VerticalStackedBarChart - basic props', () => {
});
it('Should not render onRenderCalloutPerDataPoint ', () => {
- let wrapper = render();
+ const wrapper = render();
const renderedDOM = wrapper!.container.getElementsByClassName('.onRenderCalloutPerDataPoint');
expect(renderedDOM!.length).toBe(0);
});
@@ -1004,19 +1003,19 @@ describe('Render empty chart aria label div when chart is empty', () => {
beforeEach(sharedBeforeEach);
afterEach(sharedAfterEach);
it('No empty chart aria label div rendered', () => {
- let wrapper = render();
+ const wrapper = render();
const renderedDOM = wrapper!.container.querySelectorAll('[aria-label="Graph has no data to display"]');
expect(renderedDOM.length).toBe(0);
});
it('Empty chart aria label div rendered', () => {
- let wrapper = render();
+ const wrapper = render();
const renderedDOM = wrapper!.container.querySelectorAll('[aria-label="Graph has no data to display"]');
expect(renderedDOM!.length).toBe(1);
});
test('should render empty chart div when data array is empty', () => {
- let wrapper = render();
+ const wrapper = render();
const renderedDOM = wrapper!.container.querySelectorAll('[aria-label="Graph has no data to display"]');
expect(renderedDOM!.length).toBe(1);
});
diff --git a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx
index 36451e0d14596..9d5f46b1b693d 100644
--- a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx
+++ b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx
@@ -3,21 +3,19 @@
import * as React from 'react';
import { max as d3Max, min as d3Min } from 'd3-array';
import { useVerticalStackedBarChartStyles } from './useVerticalStackedBarChartStyles.styles';
+import type { ScaleLinear as D3ScaleLinear, ScaleBand } from 'd3-scale';
import {
scaleLinear as d3ScaleLinear,
- ScaleLinear as D3ScaleLinear,
scaleBand as d3ScaleBand,
scaleUtc as d3ScaleUtc,
scaleTime as d3ScaleTime,
- ScaleBand,
} from 'd3-scale';
import { useId } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import { tokens } from '@fluentui/react-theme';
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-import {
+import type {
AccessibilityProps,
- CartesianChart,
ChildProps,
VerticalStackedBarDataPoint,
Margins,
@@ -27,13 +25,12 @@ import {
LineDataInVerticalStackedBarChart,
ModifiedCartesianChartProps,
Legend,
- ChartPopover,
- Legends,
DataPoint,
} from '../../index';
+import { CartesianChart, ChartPopover, Legends } from '../../index';
+import type { IAxisData, IDomainNRange } from '../../utilities/index';
import {
ChartTypes,
- IAxisData,
getAccessibleDataObject,
XAxisTypes,
getTypeOfAxis,
@@ -50,7 +47,6 @@ import {
findVSBCNumericMinMaxOfY,
YAxisType,
createNumericYAxis,
- IDomainNRange,
domainRangeOfDateForAreaLineScatterVerticalBarCharts,
domainRangeOfVSBCNumeric,
domainRangeOfXStringAxis,
@@ -1344,16 +1340,16 @@ export const VerticalStackedBarChart: React.FunctionComponent = {
diff --git a/packages/charts/react-charts/library/src/types/ChartAnnotation.ts b/packages/charts/react-charts/library/src/types/ChartAnnotation.ts
index e70cf8e42575f..4f0c691717b6e 100644
--- a/packages/charts/react-charts/library/src/types/ChartAnnotation.ts
+++ b/packages/charts/react-charts/library/src/types/ChartAnnotation.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
export type ChartAnnotationCoordinate =
| {
diff --git a/packages/charts/react-charts/library/src/types/DataPoint.ts b/packages/charts/react-charts/library/src/types/DataPoint.ts
index 004fb8bcfb5ba..d982e18761133 100644
--- a/packages/charts/react-charts/library/src/types/DataPoint.ts
+++ b/packages/charts/react-charts/library/src/types/DataPoint.ts
@@ -1,7 +1,7 @@
-import { SVGProps } from 'react';
-import { LegendShape } from '../components/Legends/Legends.types';
-import { CurveFactory } from 'd3-shape';
-import { SankeyLink, SankeyNode } from 'd3-sankey';
+import type { SVGProps } from 'react';
+import type { LegendShape } from '../components/Legends/Legends.types';
+import type { CurveFactory } from 'd3-shape';
+import type { SankeyLink, SankeyNode } from 'd3-sankey';
export interface Basestate {
_width?: number;
diff --git a/packages/charts/react-charts/library/src/types/EventAnnotation.ts b/packages/charts/react-charts/library/src/types/EventAnnotation.ts
index a0e0848cb805e..c67ca163d7161 100644
--- a/packages/charts/react-charts/library/src/types/EventAnnotation.ts
+++ b/packages/charts/react-charts/library/src/types/EventAnnotation.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
export interface EventAnnotation {
date: Date;
diff --git a/packages/charts/react-charts/library/src/utilities/ChartTitle.tsx b/packages/charts/react-charts/library/src/utilities/ChartTitle.tsx
index e4965838115ef..41458f867c2cf 100644
--- a/packages/charts/react-charts/library/src/utilities/ChartTitle.tsx
+++ b/packages/charts/react-charts/library/src/utilities/ChartTitle.tsx
@@ -1,6 +1,8 @@
import * as React from 'react';
-import { SVGTooltipText, SVGTooltipTextProps } from './SVGTooltipText';
-import { CHART_TITLE_PADDING, getChartTitleInlineStyles, TitleStyles } from './Common.styles';
+import type { SVGTooltipTextProps } from './SVGTooltipText';
+import { SVGTooltipText } from './SVGTooltipText';
+import type { TitleStyles } from './Common.styles';
+import { CHART_TITLE_PADDING, getChartTitleInlineStyles } from './Common.styles';
import { wrapContent } from './utilities';
const AXIS_TITLE_PADDING = 8;
diff --git a/packages/charts/react-charts/library/src/utilities/FocusableTooltipText.tsx b/packages/charts/react-charts/library/src/utilities/FocusableTooltipText.tsx
index eddd907b321eb..c536ebf0c77e1 100644
--- a/packages/charts/react-charts/library/src/utilities/FocusableTooltipText.tsx
+++ b/packages/charts/react-charts/library/src/utilities/FocusableTooltipText.tsx
@@ -6,7 +6,7 @@ import { Tooltip } from '@fluentui/react-tooltip';
import type { JSXElement } from '@fluentui/react-utilities';
import { hasOverflow } from './overflow-utils';
import { getAccessibleDataObject } from './index';
-import { AccessibilityProps } from '../types/index';
+import type { AccessibilityProps } from '../types/index';
import { Async } from './async-utils';
interface IFocusableTooltipTextProps {
diff --git a/packages/charts/react-charts/library/src/utilities/UtilityUnitTests.test.ts b/packages/charts/react-charts/library/src/utilities/UtilityUnitTests.test.ts
index ea6e1ef929135..2237bf1189014 100644
--- a/packages/charts/react-charts/library/src/utilities/UtilityUnitTests.test.ts
+++ b/packages/charts/react-charts/library/src/utilities/UtilityUnitTests.test.ts
@@ -1,14 +1,14 @@
import * as utils from './utilities';
import * as colors from './colors';
-import { TimeLocaleDefinition as d3TimeLocaleDefinition } from 'd3-time-format';
+import type { TimeLocaleDefinition as d3TimeLocaleDefinition } from 'd3-time-format';
import { format as d3Format } from 'd3-format';
-import {
+import type {
DataPoint,
HorizontalBarChartWithAxisDataPoint,
LineChartPoints,
VerticalBarChartDataPoint,
} from '../types/DataPoint';
-import { ScaleBand } from 'd3-scale';
+import type { ScaleBand } from 'd3-scale';
import { select as d3Select } from 'd3-selection';
import { conditionalDescribe, isTimezoneSet } from './TestUtility.test';
import * as vbcUtils from './vbc-utils';
diff --git a/packages/charts/react-charts/library/src/utilities/async-utils.ts b/packages/charts/react-charts/library/src/utilities/async-utils.ts
index e4e7aeb715f8a..8ec4531be51c4 100644
--- a/packages/charts/react-charts/library/src/utilities/async-utils.ts
+++ b/packages/charts/react-charts/library/src/utilities/async-utils.ts
@@ -145,7 +145,7 @@ export class Async {
this._immediateIds = {};
}
- let setImmediateCallback = () => {
+ const setImmediateCallback = () => {
// Time to execute the timeout, enqueue it as a foreground task to be executed.
try {
@@ -248,7 +248,7 @@ export class Async {
return this._noop as T;
}
- let waitMS = wait || 0;
+ const waitMS = wait || 0;
let leading = true;
let trailing = true;
let lastExecuteTime = 0;
@@ -265,10 +265,10 @@ export class Async {
trailing = options.trailing;
}
- let callback = (userCall?: boolean) => {
- let now = Date.now();
- let delta = now - lastExecuteTime;
- let waitLength = leading ? waitMS - delta : waitMS;
+ const callback = (userCall?: boolean) => {
+ const now = Date.now();
+ const delta = now - lastExecuteTime;
+ const waitLength = leading ? waitMS - delta : waitMS;
if (delta >= waitMS && (!userCall || leading)) {
lastExecuteTime = now;
if (timeoutId) {
@@ -284,7 +284,7 @@ export class Async {
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- let resultFunction = ((...args: any[]): any => {
+ const resultFunction = ((...args: any[]): any => {
lastArgs = args;
return callback(true);
}) as T;
@@ -318,7 +318,7 @@ export class Async {
},
): ICancelable & T {
if (this._isDisposed) {
- let noOpFunction = (() => {
+ const noOpFunction = (() => {
/** Do nothing */
}) as ICancelable & T;
@@ -331,7 +331,7 @@ export class Async {
return noOpFunction;
}
- let waitMS = wait || 0;
+ const waitMS = wait || 0;
let leading = false;
let trailing = true;
let maxWait: number | null = null;
@@ -354,7 +354,7 @@ export class Async {
maxWait = options.maxWait;
}
- let markExecuted = (time: number) => {
+ const markExecuted = (time: number) => {
if (timeoutId) {
this.clearTimeout(timeoutId);
timeoutId = null;
@@ -362,13 +362,13 @@ export class Async {
lastExecuteTime = time;
};
- let invokeFunction = (time: number) => {
+ const invokeFunction = (time: number) => {
markExecuted(time);
lastResult = func.apply(this._parent, lastArgs);
};
- let callback = (userCall?: boolean) => {
- let now = Date.now();
+ const callback = (userCall?: boolean) => {
+ const now = Date.now();
let executeImmediately = false;
if (userCall) {
if (leading && now - lastCallTime >= waitMS) {
@@ -376,9 +376,9 @@ export class Async {
}
lastCallTime = now;
}
- let delta = now - lastCallTime;
+ const delta = now - lastCallTime;
let waitLength = waitMS - delta;
- let maxWaitDelta = now - lastExecuteTime;
+ const maxWaitDelta = now - lastExecuteTime;
let maxWaitExpired = false;
if (maxWait !== null) {
@@ -399,18 +399,18 @@ export class Async {
return lastResult;
};
- let pending = (): boolean => {
+ const pending = (): boolean => {
return !!timeoutId;
};
- let cancel = (): void => {
+ const cancel = (): void => {
if (pending()) {
// Mark the debounced function as having executed
markExecuted(Date.now());
}
};
- let flush = () => {
+ const flush = () => {
if (pending()) {
invokeFunction(Date.now());
}
@@ -419,7 +419,7 @@ export class Async {
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- let resultFunction = ((...args: any[]) => {
+ const resultFunction = ((...args: any[]) => {
lastArgs = args;
return callback(true);
}) as ICancelable & T;
@@ -440,7 +440,7 @@ export class Async {
this._animationFrameIds = {};
}
- let animationFrameCallback = () => {
+ const animationFrameCallback = () => {
try {
// Now delete the record and call the callback.
if (this._animationFrameIds) {
diff --git a/packages/charts/react-charts/library/src/utilities/hooks.ts b/packages/charts/react-charts/library/src/utilities/hooks.ts
index aa6ac06f52368..969d530d45119 100644
--- a/packages/charts/react-charts/library/src/utilities/hooks.ts
+++ b/packages/charts/react-charts/library/src/utilities/hooks.ts
@@ -1,8 +1,8 @@
'use client';
import * as React from 'react';
-import { Chart, ImageExportOptions } from '../types/index';
-import { LegendContainer } from '../Legends';
+import type { Chart, ImageExportOptions } from '../types/index';
+import type { LegendContainer } from '../Legends';
import { exportChartsAsImage } from './image-export-utils';
import { useRtl } from './utilities';
diff --git a/packages/charts/react-charts/library/src/utilities/image-export-utils.ts b/packages/charts/react-charts/library/src/utilities/image-export-utils.ts
index f473307fb30fa..3eacaa7d3b1c3 100644
--- a/packages/charts/react-charts/library/src/utilities/image-export-utils.ts
+++ b/packages/charts/react-charts/library/src/utilities/image-export-utils.ts
@@ -1,10 +1,11 @@
'use client';
-import { create as d3Create, select as d3Select, Selection } from 'd3-selection';
+import type { Selection } from 'd3-selection';
+import { create as d3Create, select as d3Select } from 'd3-selection';
import { isHTMLElement } from '@fluentui/react-utilities';
import { copyStyle, measureTextWithDOM } from './index';
-import { ImageExportOptions } from '../types/index';
-import { Legend, LegendContainer } from '../Legends';
+import type { ImageExportOptions } from '../types/index';
+import type { Legend, LegendContainer } from '../Legends';
import {
LEGEND_CONTAINER_MARGIN_TOP,
LEGEND_CONTAINER_MARGIN_START,
diff --git a/packages/charts/react-charts/library/src/utilities/scatterpolar-utils.tsx b/packages/charts/react-charts/library/src/utilities/scatterpolar-utils.tsx
index 1fe527d9ece90..c3bbad4501487 100644
--- a/packages/charts/react-charts/library/src/utilities/scatterpolar-utils.tsx
+++ b/packages/charts/react-charts/library/src/utilities/scatterpolar-utils.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import { ScaleLinear } from 'd3-scale';
-import { JSXElement } from '@fluentui/react-utilities';
+import type { ScaleLinear } from 'd3-scale';
+import type { JSXElement } from '@fluentui/react-utilities';
/**
* Helper to render categorical labels for scatterpolar charts with improved overlap logic across all series
diff --git a/packages/charts/react-charts/library/src/utilities/test-data.ts b/packages/charts/react-charts/library/src/utilities/test-data.ts
index fed42385f92ac..543989d7f1fc8 100644
--- a/packages/charts/react-charts/library/src/utilities/test-data.ts
+++ b/packages/charts/react-charts/library/src/utilities/test-data.ts
@@ -1,4 +1,4 @@
-import {
+import type {
ChartDataPoint,
ChartProps,
HorizontalBarChartWithAxisDataPoint,
@@ -6,8 +6,8 @@ import {
GanttChartDataPoint,
VerticalStackedChartProps,
VerticalBarChartDataPoint,
- DataVizPalette,
} from '../index';
+import { DataVizPalette } from '../index';
export const chartPointsVBC = [
{
diff --git a/packages/charts/react-charts/library/src/utilities/utilities.ts b/packages/charts/react-charts/library/src/utilities/utilities.ts
index 60bb13df9bf15..4d2249185fcad 100644
--- a/packages/charts/react-charts/library/src/utilities/utilities.ts
+++ b/packages/charts/react-charts/library/src/utilities/utilities.ts
@@ -1,6 +1,7 @@
'use client';
-import { axisRight as d3AxisRight, axisBottom as d3AxisBottom, axisLeft as d3AxisLeft, Axis as D3Axis } from 'd3-axis';
+import type { Axis as D3Axis } from 'd3-axis';
+import { axisRight as d3AxisRight, axisBottom as d3AxisBottom, axisLeft as d3AxisLeft } from 'd3-axis';
import {
max as d3Max,
min as d3Min,
@@ -10,26 +11,29 @@ import {
mean as d3Mean,
median as d3Median,
} from 'd3-array';
+import type { NumberValue } from 'd3-scale';
import {
scaleLinear as d3ScaleLinear,
scaleBand as d3ScaleBand,
scaleUtc as d3ScaleUtc,
scaleTime as d3ScaleTime,
scaleLog as d3ScaleLog,
- NumberValue,
type ScaleContinuousNumeric,
type ScaleLinear,
type ScaleBand,
type ScaleTime,
} from 'd3-scale';
-import { select as d3Select, selectAll as d3SelectAll, Selection } from 'd3-selection';
+import type { Selection } from 'd3-selection';
+import { select as d3Select, selectAll as d3SelectAll } from 'd3-selection';
import { format as d3Format } from 'd3-format';
import type { JSXElement } from '@fluentui/react-utilities';
-import {
+import type {
TimeLocaleObject as d3TimeLocaleObject,
+ TimeLocaleDefinition as d3TimeLocaleDefinition,
+} from 'd3-time-format';
+import {
timeFormat as d3TimeFormat,
timeFormatLocale as d3TimeFormatLocale,
- TimeLocaleDefinition as d3TimeLocaleDefinition,
utcFormat as d3UtcFormat,
} from 'd3-time-format';
import {
@@ -48,16 +52,16 @@ import {
utcWeek as d3UtcWeek,
utcYear as d3UtcYear,
} from 'd3-time';
+import type { CurveFactory } from 'd3-shape';
import {
- CurveFactory,
curveLinear as d3CurveLinear,
curveNatural as d3CurveNatural,
curveStep as d3CurveStep,
curveStepAfter as d3CurveStepAfter,
curveStepBefore as d3CurveStepBefore,
} from 'd3-shape';
-import { AxisProps, AxisScaleType, ScatterChartPoints } from '../types/DataPoint';
-import {
+import type { AxisProps, AxisScaleType, ScatterChartPoints } from '../types/DataPoint';
+import type {
AccessibilityProps,
EventsAnnotationProps,
LineChartPoints,
@@ -998,7 +1002,7 @@ export const createStringYAxis = (
*/
// changing the type to any as it is used by multiple charts with different data types
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
export function calloutData(
values: ((LineChartPoints | ScatterChartPoints) & { index?: number })[],
): Record {
@@ -1188,7 +1192,7 @@ export function createWrapOfXLabels(wrapLabelProps: IWrapLabelProps): number | u
/**
* This method used for wrapping of y axis labels (tick values).
*/
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
export function createYAxisLabels(
node: SVGElement | null,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1276,7 +1280,7 @@ export const calculateLongestLabelWidth = (labels: (string | number)[], query: s
* when prop 'showXAxisLablesTooltip' enables to the respected chart.
* On hover of the truncated word(at x axis labels tick), a tooltip will be appeared.
*/
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
export function tooltipOfAxislabels(axistooltipProps: {
tooltipCls: string;
axis: Selection | null;
@@ -1946,7 +1950,7 @@ export function findIndex(array: T[], cb: (item: T, index: number) => boolean
* @param cb - Callback which returns true on matches
*/
export function find(array: T[], cb: (item: T, index: number) => boolean): T | undefined {
- let index = findIndex(array, cb);
+ const index = findIndex(array, cb);
if (index < 0) {
return undefined;
diff --git a/packages/charts/react-charts/library/src/utilities/vbc-utils.ts b/packages/charts/react-charts/library/src/utilities/vbc-utils.ts
index 24a7b7cf7f842..23468b81d16d7 100644
--- a/packages/charts/react-charts/library/src/utilities/vbc-utils.ts
+++ b/packages/charts/react-charts/library/src/utilities/vbc-utils.ts
@@ -1,4 +1,4 @@
-import { Margins } from '../index';
+import type { Margins } from '../index';
export const getClosestPairDiffAndRange = (data: number[] | Date[]): [number, number] | undefined => {
if (data.length < 2) {
diff --git a/packages/charts/react-charts/stories/src/AreaChart/AreaChartNegative..stories.tsx b/packages/charts/react-charts/stories/src/AreaChart/AreaChartNegative..stories.tsx
index 54171bc978420..67801368aeecd 100644
--- a/packages/charts/react-charts/stories/src/AreaChart/AreaChartNegative..stories.tsx
+++ b/packages/charts/react-charts/stories/src/AreaChart/AreaChartNegative..stories.tsx
@@ -1,15 +1,7 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, RadioGroupOnChangeData } from '@fluentui/react-components';
import { AreaChart } from '@fluentui/react-charts';
-import {
- Switch,
- Field,
- Radio,
- RadioGroup,
- RadioGroupOnChangeData,
- makeStyles,
- tokens,
-} from '@fluentui/react-components';
+import { Switch, Field, Radio, RadioGroup, makeStyles, tokens } from '@fluentui/react-components';
const useStyles = makeStyles({
svgTooltip: {
diff --git a/packages/charts/react-charts/stories/src/AreaChart/AreaChartSecondaryYAxis.stories.tsx b/packages/charts/react-charts/stories/src/AreaChart/AreaChartSecondaryYAxis.stories.tsx
index 0783a0026833d..62797ac8cd8f3 100644
--- a/packages/charts/react-charts/stories/src/AreaChart/AreaChartSecondaryYAxis.stories.tsx
+++ b/packages/charts/react-charts/stories/src/AreaChart/AreaChartSecondaryYAxis.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { AreaChart, ChartProps, LineChartDataPoint, LineChartPoints } from '@fluentui/react-charts';
+import type { ChartProps, LineChartDataPoint, LineChartPoints } from '@fluentui/react-charts';
+import { AreaChart } from '@fluentui/react-charts';
import { makeStyles, tokens, useId } from '@fluentui/react-components';
const useStyles = makeStyles({
diff --git a/packages/charts/react-charts/stories/src/DeclarativeChart/DeclarativeChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/DeclarativeChart/DeclarativeChartDefault.stories.tsx
index a9351c312cf04..95333c7a8fae8 100644
--- a/packages/charts/react-charts/stories/src/DeclarativeChart/DeclarativeChartDefault.stories.tsx
+++ b/packages/charts/react-charts/stories/src/DeclarativeChart/DeclarativeChartDefault.stories.tsx
@@ -1,19 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { DeclarativeChart, IDeclarativeChart, Schema } from '@fluentui/react-charts';
-import {
- Button,
- Dropdown,
- Field,
- Input,
- InputOnChangeData,
- Option,
- OptionOnSelectData,
- SelectionEvents,
- Spinner,
- Switch,
- useFluent,
-} from '@fluentui/react-components';
+import type { JSXElement, InputOnChangeData, OptionOnSelectData, SelectionEvents } from '@fluentui/react-components';
+import type { IDeclarativeChart, Schema } from '@fluentui/react-charts';
+import { DeclarativeChart } from '@fluentui/react-charts';
+import { Button, Dropdown, Field, Input, Option, Spinner, Switch, useFluent } from '@fluentui/react-components';
interface ErrorBoundaryProps {
children: React.ReactNode;
diff --git a/packages/charts/react-charts/stories/src/DonutChart/DonutChartCustomAccessibility.stories.tsx b/packages/charts/react-charts/stories/src/DonutChart/DonutChartCustomAccessibility.stories.tsx
index 457b67bb3c5a2..d9e7e9d255e95 100644
--- a/packages/charts/react-charts/stories/src/DonutChart/DonutChartCustomAccessibility.stories.tsx
+++ b/packages/charts/react-charts/stories/src/DonutChart/DonutChartCustomAccessibility.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { DonutChart, ChartProps, ChartDataPoint, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import type { ChartProps, ChartDataPoint } from '@fluentui/react-charts';
+import { DonutChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
export const DonutChartCustomAccessibility = (): JSXElement => {
const points: ChartDataPoint[] = [
diff --git a/packages/charts/react-charts/stories/src/DonutChart/DonutChartCustomCallout.stories.tsx b/packages/charts/react-charts/stories/src/DonutChart/DonutChartCustomCallout.stories.tsx
index d44c48625b97f..55babff2da523 100644
--- a/packages/charts/react-charts/stories/src/DonutChart/DonutChartCustomCallout.stories.tsx
+++ b/packages/charts/react-charts/stories/src/DonutChart/DonutChartCustomCallout.stories.tsx
@@ -1,13 +1,7 @@
import * as React from 'react';
-import {
- DonutChart,
- ChartProps,
- ChartDataPoint,
- DataVizPalette,
- getColorFromToken,
- ChartPopoverProps,
-} from '@fluentui/react-charts';
+import type { ChartProps, ChartDataPoint, ChartPopoverProps } from '@fluentui/react-charts';
+import { DonutChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
import { Switch, tokens } from '@fluentui/react-components';
import type { JSXElement } from '@fluentui/react-components';
diff --git a/packages/charts/react-charts/stories/src/DonutChart/DonutChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/DonutChart/DonutChartDefault.stories.tsx
index 1a40b1f348629..8ed5e7a7d06b2 100644
--- a/packages/charts/react-charts/stories/src/DonutChart/DonutChartDefault.stories.tsx
+++ b/packages/charts/react-charts/stories/src/DonutChart/DonutChartDefault.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { DonutChart, ChartProps, getColorFromToken, DataVizPalette } from '@fluentui/react-charts';
+import type { ChartProps } from '@fluentui/react-charts';
+import { DonutChart, getColorFromToken, DataVizPalette } from '@fluentui/react-charts';
export const DonutChartBasic = (): JSXElement => {
const points = [
diff --git a/packages/charts/react-charts/stories/src/DonutChart/DonutChartDynamic.stories.tsx b/packages/charts/react-charts/stories/src/DonutChart/DonutChartDynamic.stories.tsx
index 9833d939041fb..f9ef0877815fd 100644
--- a/packages/charts/react-charts/stories/src/DonutChart/DonutChartDynamic.stories.tsx
+++ b/packages/charts/react-charts/stories/src/DonutChart/DonutChartDynamic.stories.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { DonutChart, ChartProps, ChartDataPoint, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import type { JSXElement, CheckboxOnChangeData } from '@fluentui/react-components';
+import type { ChartProps, ChartDataPoint } from '@fluentui/react-charts';
+import { DonutChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
-import { Button, Checkbox, CheckboxOnChangeData } from '@fluentui/react-components';
+import { Button, Checkbox } from '@fluentui/react-components';
/** This style is commonly used to visually hide text that is still available for the screen reader to announce. */
const screenReaderOnlyStyle: React.CSSProperties = {
diff --git a/packages/charts/react-charts/stories/src/DonutChart/DonutChartResponsive.stories.tsx b/packages/charts/react-charts/stories/src/DonutChart/DonutChartResponsive.stories.tsx
index a3eac7bc29548..9e4a039ab3124 100644
--- a/packages/charts/react-charts/stories/src/DonutChart/DonutChartResponsive.stories.tsx
+++ b/packages/charts/react-charts/stories/src/DonutChart/DonutChartResponsive.stories.tsx
@@ -1,13 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import {
- DonutChart,
- ChartProps,
- ChartDataPoint,
- DataVizPalette,
- getColorFromToken,
- ResponsiveContainer,
-} from '@fluentui/react-charts';
+import type { ChartProps, ChartDataPoint } from '@fluentui/react-charts';
+import { DonutChart, DataVizPalette, getColorFromToken, ResponsiveContainer } from '@fluentui/react-charts';
export const DonutChartResponsive = (): JSXElement => {
const points: ChartDataPoint[] = [
diff --git a/packages/charts/react-charts/stories/src/DonutChart/DonutChartStyled.stories.tsx b/packages/charts/react-charts/stories/src/DonutChart/DonutChartStyled.stories.tsx
index bfb3af1ab963c..dc6208a5317ad 100644
--- a/packages/charts/react-charts/stories/src/DonutChart/DonutChartStyled.stories.tsx
+++ b/packages/charts/react-charts/stories/src/DonutChart/DonutChartStyled.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { DonutChart, ChartProps, getColorFromToken, DataVizPalette } from '@fluentui/react-charts';
+import type { ChartProps } from '@fluentui/react-charts';
+import { DonutChart, getColorFromToken, DataVizPalette } from '@fluentui/react-charts';
import { makeStyles, mergeClasses } from '@fluentui/react-components';
const useStyles = makeStyles({
diff --git a/packages/charts/react-charts/stories/src/GanttChart/GanttChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/GanttChart/GanttChartDefault.stories.tsx
index 721228a9f202b..d72b821d52cf8 100644
--- a/packages/charts/react-charts/stories/src/GanttChart/GanttChartDefault.stories.tsx
+++ b/packages/charts/react-charts/stories/src/GanttChart/GanttChartDefault.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { DataVizPalette, GanttChart, GanttChartDataPoint } from '@fluentui/react-charts';
+import type { GanttChartDataPoint } from '@fluentui/react-charts';
+import { DataVizPalette, GanttChart } from '@fluentui/react-charts';
import { Switch } from '@fluentui/react-components';
const data: GanttChartDataPoint[] = [
diff --git a/packages/charts/react-charts/stories/src/GanttChart/GanttChartGrouped.stories.tsx b/packages/charts/react-charts/stories/src/GanttChart/GanttChartGrouped.stories.tsx
index 48017c0c2b37c..4ee94514501a6 100644
--- a/packages/charts/react-charts/stories/src/GanttChart/GanttChartGrouped.stories.tsx
+++ b/packages/charts/react-charts/stories/src/GanttChart/GanttChartGrouped.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { DataVizPalette, GanttChart, GanttChartDataPoint } from '@fluentui/react-charts';
+import type { GanttChartDataPoint } from '@fluentui/react-charts';
+import { DataVizPalette, GanttChart } from '@fluentui/react-charts';
import { Switch, makeStyles } from '@fluentui/react-components';
const data: GanttChartDataPoint[] = [
diff --git a/packages/charts/react-charts/stories/src/GaugeChart/GaugeChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/GaugeChart/GaugeChartDefault.stories.tsx
index 3c9fffda49f1c..ea78706e67ccb 100644
--- a/packages/charts/react-charts/stories/src/GaugeChart/GaugeChartDefault.stories.tsx
+++ b/packages/charts/react-charts/stories/src/GaugeChart/GaugeChartDefault.stories.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData } from '@fluentui/react-components';
import { DataVizPalette, GaugeChart, getColorFromToken } from '@fluentui/react-charts';
-import { Checkbox, CheckboxOnChangeData, Switch } from '@fluentui/react-components';
+import { Checkbox, Switch } from '@fluentui/react-components';
export const GaugeChartBasic = (): JSXElement => {
const [width, setWidth] = React.useState(252);
diff --git a/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.stories.tsx
index 64b7f18c69840..734d912d62d75 100644
--- a/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.stories.tsx
+++ b/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.stories.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData } from '@fluentui/react-components';
import { GroupedVerticalBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
-import { Checkbox, CheckboxOnChangeData } from '@fluentui/react-components';
+import { Checkbox } from '@fluentui/react-components';
export const GroupedVerticalBarDefault = (): JSXElement => {
const [width, setWidth] = React.useState(650);
diff --git a/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartLine.stories.tsx b/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartLine.stories.tsx
index 09d43953ee028..14cc32af85828 100644
--- a/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartLine.stories.tsx
+++ b/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartLine.stories.tsx
@@ -1,11 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import {
- GroupedVerticalBarChart,
- GroupedVerticalBarChartProps,
- DataVizPalette,
- getColorFromToken,
-} from '@fluentui/react-charts';
+import type { GroupedVerticalBarChartProps } from '@fluentui/react-charts';
+import { GroupedVerticalBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
import { Field, Label, Radio, RadioGroup, Slider, Switch, useId } from '@fluentui/react-components';
const chartData: GroupedVerticalBarChartProps['dataV2'] = [
diff --git a/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartNegative.stories.tsx b/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartNegative.stories.tsx
index e0bfc24d69506..4438823a15001 100644
--- a/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartNegative.stories.tsx
+++ b/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartNegative.stories.tsx
@@ -1,15 +1,7 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData, RadioGroupOnChangeData } from '@fluentui/react-components';
import { GroupedVerticalBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
-import {
- Switch,
- Checkbox,
- CheckboxOnChangeData,
- Field,
- Radio,
- RadioGroup,
- RadioGroupOnChangeData,
-} from '@fluentui/react-components';
+import { Switch, Checkbox, Field, Radio, RadioGroup } from '@fluentui/react-components';
export const GroupedVerticalBarNegative = (): JSXElement => {
const [width, setWidth] = React.useState(700);
diff --git a/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartSecondaryYAxis.stories.tsx b/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartSecondaryYAxis.stories.tsx
index 106832ee1904f..cf8490f18a792 100644
--- a/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartSecondaryYAxis.stories.tsx
+++ b/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartSecondaryYAxis.stories.tsx
@@ -1,11 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import {
- GroupedVerticalBarChart,
- DataVizPalette,
- getColorFromToken,
- GroupedVerticalBarChartData,
-} from '@fluentui/react-charts';
+import type { GroupedVerticalBarChartData } from '@fluentui/react-charts';
+import { GroupedVerticalBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
import { useId } from '@fluentui/react-components';
export const GroupedVerticalBarSecondaryYAxis = (): JSXElement => {
diff --git a/packages/charts/react-charts/stories/src/HeatMapChart/HeatMapChartBasic.stories.tsx b/packages/charts/react-charts/stories/src/HeatMapChart/HeatMapChartBasic.stories.tsx
index e060a45ae4b9d..dc7b65fa8732c 100644
--- a/packages/charts/react-charts/stories/src/HeatMapChart/HeatMapChartBasic.stories.tsx
+++ b/packages/charts/react-charts/stories/src/HeatMapChart/HeatMapChartBasic.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { HeatMapChart, HeatMapChartProps, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import type { HeatMapChartProps } from '@fluentui/react-charts';
+import { HeatMapChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
export const HeatMapChartBasic: React.FunctionComponent<{}> = (): JSXElement => {
const [width, setWidth] = React.useState(450);
diff --git a/packages/charts/react-charts/stories/src/HeatMapChart/HeatMapChartCustomAccessibility.stories.tsx b/packages/charts/react-charts/stories/src/HeatMapChart/HeatMapChartCustomAccessibility.stories.tsx
index eba7d77df9779..e064f837386de 100644
--- a/packages/charts/react-charts/stories/src/HeatMapChart/HeatMapChartCustomAccessibility.stories.tsx
+++ b/packages/charts/react-charts/stories/src/HeatMapChart/HeatMapChartCustomAccessibility.stories.tsx
@@ -1,12 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import {
- HeatMapChart,
- HeatMapChartDataPoint,
- HeatMapChartProps,
- DataVizPalette,
- getColorFromToken,
-} from '@fluentui/react-charts';
+import type { HeatMapChartDataPoint, HeatMapChartProps } from '@fluentui/react-charts';
+import { HeatMapChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
import { formatPrefix as d3FormatPrefix } from 'd3-format';
const yPoint: string[] = ['CHN', 'IND', 'USA', 'IDN', 'PAK'];
diff --git a/packages/charts/react-charts/stories/src/HorizontalBarChart/HorizontalBarChartBenchmark.stories.tsx b/packages/charts/react-charts/stories/src/HorizontalBarChart/HorizontalBarChartBenchmark.stories.tsx
index bc247d19d587c..32830f78158db 100644
--- a/packages/charts/react-charts/stories/src/HorizontalBarChart/HorizontalBarChartBenchmark.stories.tsx
+++ b/packages/charts/react-charts/stories/src/HorizontalBarChart/HorizontalBarChartBenchmark.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { HorizontalBarChart, ChartProps, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import type { ChartProps } from '@fluentui/react-charts';
+import { HorizontalBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
export const HorizontalBarBenchmark = (): JSXElement => {
const hideRatio: boolean[] = [true, false];
diff --git a/packages/charts/react-charts/stories/src/HorizontalBarChart/HorizontalBarChartCustomAccessibility.stories.tsx b/packages/charts/react-charts/stories/src/HorizontalBarChart/HorizontalBarChartCustomAccessibility.stories.tsx
index 7a1c3727ec9ac..19cba004a58c9 100644
--- a/packages/charts/react-charts/stories/src/HorizontalBarChart/HorizontalBarChartCustomAccessibility.stories.tsx
+++ b/packages/charts/react-charts/stories/src/HorizontalBarChart/HorizontalBarChartCustomAccessibility.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { HorizontalBarChart, ChartProps, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import type { ChartProps } from '@fluentui/react-charts';
+import { HorizontalBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
export const HorizontalBarCustomAccessibility = (): JSXElement => {
const data: ChartProps[] = [
diff --git a/packages/charts/react-charts/stories/src/HorizontalBarChart/HorizontalBarChartCustomCallout.stories.tsx b/packages/charts/react-charts/stories/src/HorizontalBarChart/HorizontalBarChartCustomCallout.stories.tsx
index 88257ea1d5371..31190c62a01c9 100644
--- a/packages/charts/react-charts/stories/src/HorizontalBarChart/HorizontalBarChartCustomCallout.stories.tsx
+++ b/packages/charts/react-charts/stories/src/HorizontalBarChart/HorizontalBarChartCustomCallout.stories.tsx
@@ -1,12 +1,6 @@
import * as React from 'react';
-import {
- HorizontalBarChart,
- ChartProps,
- ChartDataPoint,
- DataVizPalette,
- getColorFromToken,
- ChartPopoverProps,
-} from '@fluentui/react-charts';
+import type { ChartProps, ChartDataPoint, ChartPopoverProps } from '@fluentui/react-charts';
+import { HorizontalBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
// import * as d3 from 'd3-format';
import { Switch, tokens } from '@fluentui/react-components';
import type { JSXElement } from '@fluentui/react-components';
diff --git a/packages/charts/react-charts/stories/src/HorizontalBarChart/HorizontalBarChartVariant.stories.tsx b/packages/charts/react-charts/stories/src/HorizontalBarChart/HorizontalBarChartVariant.stories.tsx
index 735e3bf1b7ad0..90c5e1c6b67b7 100644
--- a/packages/charts/react-charts/stories/src/HorizontalBarChart/HorizontalBarChartVariant.stories.tsx
+++ b/packages/charts/react-charts/stories/src/HorizontalBarChart/HorizontalBarChartVariant.stories.tsx
@@ -1,13 +1,13 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData } from '@fluentui/react-components';
+import type { ChartProps } from '@fluentui/react-charts';
import {
HorizontalBarChart,
HorizontalBarChartVariant,
- ChartProps,
DataVizPalette,
getColorFromToken,
} from '@fluentui/react-charts';
-import { Checkbox, CheckboxOnChangeData } from '@fluentui/react-components';
+import { Checkbox } from '@fluentui/react-components';
export const HorizontalBarAbsoluteScale = (): JSXElement => {
const [hideLabels, setHideLabels] = React.useState(false);
diff --git a/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisCategoryOrder.stories.tsx b/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisCategoryOrder.stories.tsx
index 6c7835305551e..3aabad7013d41 100644
--- a/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisCategoryOrder.stories.tsx
+++ b/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisCategoryOrder.stories.tsx
@@ -1,12 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import {
- HorizontalBarChartWithAxis,
- HorizontalBarChartWithAxisDataPoint,
- AxisCategoryOrder,
- DataVizPalette,
- getColorFromToken,
-} from '@fluentui/react-charts';
+import type { HorizontalBarChartWithAxisDataPoint, AxisCategoryOrder } from '@fluentui/react-charts';
+import { HorizontalBarChartWithAxis, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
import { Button, Dropdown, Option, Field } from '@fluentui/react-components';
/** This style is commonly used to visually hide text that is still available for the screen reader to announce. */
diff --git a/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisDefault.stories.tsx b/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisDefault.stories.tsx
index b6d3d6e0bdf03..8a5c3c6998e9a 100644
--- a/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisDefault.stories.tsx
+++ b/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisDefault.stories.tsx
@@ -1,20 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import {
- HorizontalBarChartWithAxisDataPoint,
- HorizontalBarChartWithAxis,
- getColorFromToken,
- DataVizPalette,
-} from '@fluentui/react-charts';
-import {
- Checkbox,
- CheckboxOnChangeData,
- Switch,
- Field,
- Radio,
- RadioGroup,
- RadioGroupOnChangeData,
-} from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData, RadioGroupOnChangeData } from '@fluentui/react-components';
+import type { HorizontalBarChartWithAxisDataPoint } from '@fluentui/react-charts';
+import { HorizontalBarChartWithAxis, getColorFromToken, DataVizPalette } from '@fluentui/react-charts';
+import { Checkbox, Switch, Field, Radio, RadioGroup } from '@fluentui/react-components';
export const HorizontalBarWithAxisBasic = (): JSXElement => {
const [width, setWidth] = React.useState(650);
diff --git a/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisDynamic.stories.tsx b/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisDynamic.stories.tsx
index dfebf1809a976..9f60dab3eb2c2 100644
--- a/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisDynamic.stories.tsx
+++ b/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisDynamic.stories.tsx
@@ -1,21 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import {
- DataVizPalette,
- getColorFromToken,
- HorizontalBarChartWithAxis,
- HorizontalBarChartWithAxisDataPoint,
-} from '@fluentui/react-charts';
-import {
- Checkbox,
- CheckboxOnChangeData,
- Switch,
- Field,
- Radio,
- RadioGroup,
- RadioGroupOnChangeData,
- Button,
-} from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData, RadioGroupOnChangeData } from '@fluentui/react-components';
+import type { HorizontalBarChartWithAxisDataPoint } from '@fluentui/react-charts';
+import { DataVizPalette, getColorFromToken, HorizontalBarChartWithAxis } from '@fluentui/react-charts';
+import { Checkbox, Switch, Field, Radio, RadioGroup, Button } from '@fluentui/react-components';
/** This style is commonly used to visually hide text that is still available for the screen reader to announce. */
const screenReaderOnlyStyle: React.CSSProperties = {
diff --git a/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisNegative.stories.tsx b/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisNegative.stories.tsx
index 6b2a9c0b412cd..e15c1206538d6 100644
--- a/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisNegative.stories.tsx
+++ b/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisNegative.stories.tsx
@@ -1,12 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import {
- HorizontalBarChartWithAxis,
- HorizontalBarChartWithAxisDataPoint,
- DataVizPalette,
- getColorFromToken,
-} from '@fluentui/react-charts';
-import { Field, Radio, RadioGroup, RadioGroupOnChangeData, Switch } from '@fluentui/react-components';
+import type { JSXElement, RadioGroupOnChangeData } from '@fluentui/react-components';
+import type { HorizontalBarChartWithAxisDataPoint } from '@fluentui/react-charts';
+import { HorizontalBarChartWithAxis, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import { Field, Radio, RadioGroup, Switch } from '@fluentui/react-components';
export const HorizontalBarWithAxisNegative = (): JSXElement => {
const [selectedCallout, setSelectedCallout] = React.useState('showTooltip');
diff --git a/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisStringAxisTooltip.stories.tsx b/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisStringAxisTooltip.stories.tsx
index 002a179430682..13e4a714ef577 100644
--- a/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisStringAxisTooltip.stories.tsx
+++ b/packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisStringAxisTooltip.stories.tsx
@@ -1,11 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import {
- HorizontalBarChartWithAxis,
- HorizontalBarChartWithAxisDataPoint,
- DataVizPalette,
- getColorFromToken,
-} from '@fluentui/react-charts';
+import type { HorizontalBarChartWithAxisDataPoint } from '@fluentui/react-charts';
+import { HorizontalBarChartWithAxis, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
import { Switch, Field, Radio, RadioGroup } from '@fluentui/react-components';
export const HorizontalBarWithAxisStringAxisTooltip = (): JSXElement => {
diff --git a/packages/charts/react-charts/stories/src/Legends/Legends.Controlled.stories.tsx b/packages/charts/react-charts/stories/src/Legends/Legends.Controlled.stories.tsx
index 4b0fb33f6e405..da08836d752f0 100644
--- a/packages/charts/react-charts/stories/src/Legends/Legends.Controlled.stories.tsx
+++ b/packages/charts/react-charts/stories/src/Legends/Legends.Controlled.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { Legends, Legend, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import type { Legend } from '@fluentui/react-charts';
+import { Legends, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
import { Button } from '@fluentui/react-components';
const legends: Legend[] = [
diff --git a/packages/charts/react-charts/stories/src/Legends/Legends.Overflow.stories.tsx b/packages/charts/react-charts/stories/src/Legends/Legends.Overflow.stories.tsx
index 380a744784261..8329a2aea7f09 100644
--- a/packages/charts/react-charts/stories/src/Legends/Legends.Overflow.stories.tsx
+++ b/packages/charts/react-charts/stories/src/Legends/Legends.Overflow.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { Legend, Legends, getColorFromToken, DataVizPalette } from '@fluentui/react-charts';
+import type { Legend } from '@fluentui/react-charts';
+import { Legends, getColorFromToken, DataVizPalette } from '@fluentui/react-charts';
export const LegendsOverflow = (): JSXElement => {
const legends: Legend[] = [
diff --git a/packages/charts/react-charts/stories/src/Legends/Legends.Styled.stories.tsx b/packages/charts/react-charts/stories/src/Legends/Legends.Styled.stories.tsx
index e60cd3f6324dd..860f4dd989c41 100644
--- a/packages/charts/react-charts/stories/src/Legends/Legends.Styled.stories.tsx
+++ b/packages/charts/react-charts/stories/src/Legends/Legends.Styled.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { Legend, Legends, getColorFromToken, DataVizPalette } from '@fluentui/react-charts';
+import type { Legend } from '@fluentui/react-charts';
+import { Legends, getColorFromToken, DataVizPalette } from '@fluentui/react-charts';
export const LegendsStyled = (): JSXElement => {
const legends: Legend[] = [
diff --git a/packages/charts/react-charts/stories/src/Legends/Legends.WrapLines.stories.tsx b/packages/charts/react-charts/stories/src/Legends/Legends.WrapLines.stories.tsx
index 4787ace3dd870..de4fd88ef432a 100644
--- a/packages/charts/react-charts/stories/src/Legends/Legends.WrapLines.stories.tsx
+++ b/packages/charts/react-charts/stories/src/Legends/Legends.WrapLines.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { Legend, Legends, getColorFromToken, DataVizPalette } from '@fluentui/react-charts';
+import type { Legend } from '@fluentui/react-charts';
+import { Legends, getColorFromToken, DataVizPalette } from '@fluentui/react-charts';
export const LegendsWrapLines = (): JSXElement => {
const legends: Legend[] = [
diff --git a/packages/charts/react-charts/stories/src/Legends/LegendsDefault.stories.tsx b/packages/charts/react-charts/stories/src/Legends/LegendsDefault.stories.tsx
index ac0ebaf19b39d..5069f19938542 100644
--- a/packages/charts/react-charts/stories/src/Legends/LegendsDefault.stories.tsx
+++ b/packages/charts/react-charts/stories/src/Legends/LegendsDefault.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { Legend, Legends, getColorFromToken, DataVizPalette } from '@fluentui/react-charts';
+import type { Legend } from '@fluentui/react-charts';
+import { Legends, getColorFromToken, DataVizPalette } from '@fluentui/react-charts';
export const LegendsBasic = (): JSXElement => {
const legends: Legend[] = [
diff --git a/packages/charts/react-charts/stories/src/LineChart/LineChartAllNegative.stories.tsx b/packages/charts/react-charts/stories/src/LineChart/LineChartAllNegative.stories.tsx
index 6eaa9cbc371b1..38674650f6128 100644
--- a/packages/charts/react-charts/stories/src/LineChart/LineChartAllNegative.stories.tsx
+++ b/packages/charts/react-charts/stories/src/LineChart/LineChartAllNegative.stories.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { ChartProps, LineChart, DataVizPalette } from '@fluentui/react-charts';
-import { Switch, Checkbox, CheckboxOnChangeData, makeStyles, tokens } from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData } from '@fluentui/react-components';
+import type { ChartProps } from '@fluentui/react-charts';
+import { LineChart, DataVizPalette } from '@fluentui/react-charts';
+import { Switch, Checkbox, makeStyles, tokens } from '@fluentui/react-components';
const useStyles = makeStyles({
svgTooltip: {
diff --git a/packages/charts/react-charts/stories/src/LineChart/LineChartAnnotations.stories.tsx b/packages/charts/react-charts/stories/src/LineChart/LineChartAnnotations.stories.tsx
index 497898c171b59..772887f40deab 100644
--- a/packages/charts/react-charts/stories/src/LineChart/LineChartAnnotations.stories.tsx
+++ b/packages/charts/react-charts/stories/src/LineChart/LineChartAnnotations.stories.tsx
@@ -1,13 +1,8 @@
import * as React from 'react';
-import {
- ChartProps,
- LineChartProps,
- LineChart,
- DataVizPalette,
- getColorFromToken,
- ChartAnnotation,
-} from '@fluentui/react-charts';
-import { JSXElement, makeStyles, tokens } from '@fluentui/react-components';
+import type { ChartProps, LineChartProps, ChartAnnotation } from '@fluentui/react-charts';
+import { LineChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import type { JSXElement } from '@fluentui/react-components';
+import { makeStyles, tokens } from '@fluentui/react-components';
const useStyles = makeStyles({
svgTooltip: {
diff --git a/packages/charts/react-charts/stories/src/LineChart/LineChartCustomAccessibility.stories.tsx b/packages/charts/react-charts/stories/src/LineChart/LineChartCustomAccessibility.stories.tsx
index c1f8a3f720237..951bee78d1a75 100644
--- a/packages/charts/react-charts/stories/src/LineChart/LineChartCustomAccessibility.stories.tsx
+++ b/packages/charts/react-charts/stories/src/LineChart/LineChartCustomAccessibility.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { LineChartProps, LineChart, getColorFromToken, DataVizPalette } from '@fluentui/react-charts';
+import type { LineChartProps } from '@fluentui/react-charts';
+import { LineChart, getColorFromToken, DataVizPalette } from '@fluentui/react-charts';
import { Switch } from '@fluentui/react-components';
export const LineChartCustomAccessibility = (props: LineChartProps): JSXElement => {
diff --git a/packages/charts/react-charts/stories/src/LineChart/LineChartCustomLocaleDateAxis.stories.tsx b/packages/charts/react-charts/stories/src/LineChart/LineChartCustomLocaleDateAxis.stories.tsx
index 592983370aa1b..bac667fdde850 100644
--- a/packages/charts/react-charts/stories/src/LineChart/LineChartCustomLocaleDateAxis.stories.tsx
+++ b/packages/charts/react-charts/stories/src/LineChart/LineChartCustomLocaleDateAxis.stories.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { LineChartProps, ChartProps, LineChart, DataVizPalette } from '@fluentui/react-charts';
+import type { LineChartProps, ChartProps } from '@fluentui/react-charts';
+import { LineChart, DataVizPalette } from '@fluentui/react-charts';
import { Switch } from '@fluentui/react-components';
-import { TimeLocaleDefinition } from 'd3-time-format';
+import type { TimeLocaleDefinition } from 'd3-time-format';
import itITLocale from 'd3-time-format/locale/it-IT.json';
export const LineChartCustomLocaleDateAxis = (props: LineChartProps): JSXElement => {
diff --git a/packages/charts/react-charts/stories/src/LineChart/LineChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/LineChart/LineChartDefault.stories.tsx
index d7cf92e13f33c..60cad0f6040ae 100644
--- a/packages/charts/react-charts/stories/src/LineChart/LineChartDefault.stories.tsx
+++ b/packages/charts/react-charts/stories/src/LineChart/LineChartDefault.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { LineChartProps, LineChart, ChartProps, DataVizPalette } from '@fluentui/react-charts';
+import type { LineChartProps, ChartProps } from '@fluentui/react-charts';
+import { LineChart, DataVizPalette } from '@fluentui/react-charts';
import { Switch, Checkbox, makeStyles, tokens, Field, Radio, RadioGroup } from '@fluentui/react-components';
import type { CheckboxOnChangeData, CheckboxProps } from '@fluentui/react-components';
diff --git a/packages/charts/react-charts/stories/src/LineChart/LineChartEvents.stories.tsx b/packages/charts/react-charts/stories/src/LineChart/LineChartEvents.stories.tsx
index 018973c175843..f293ef0b8cf44 100644
--- a/packages/charts/react-charts/stories/src/LineChart/LineChartEvents.stories.tsx
+++ b/packages/charts/react-charts/stories/src/LineChart/LineChartEvents.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { LineChartProps, LineChart, ChartProps, DataVizPalette } from '@fluentui/react-charts';
+import type { LineChartProps, ChartProps } from '@fluentui/react-charts';
+import { LineChart, DataVizPalette } from '@fluentui/react-charts';
import * as d3 from 'd3-format';
import { Label, Switch } from '@fluentui/react-components';
diff --git a/packages/charts/react-charts/stories/src/LineChart/LineChartGaps.stories.tsx b/packages/charts/react-charts/stories/src/LineChart/LineChartGaps.stories.tsx
index 4e4864266995d..7996777f45734 100644
--- a/packages/charts/react-charts/stories/src/LineChart/LineChartGaps.stories.tsx
+++ b/packages/charts/react-charts/stories/src/LineChart/LineChartGaps.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { LineChartProps, LineChart, ChartProps, CustomizedCalloutData, DataVizPalette } from '@fluentui/react-charts';
+import type { LineChartProps, ChartProps, CustomizedCalloutData } from '@fluentui/react-charts';
+import { LineChart, DataVizPalette } from '@fluentui/react-charts';
export const LineChartGaps = (props: LineChartProps): JSXElement => {
const [width, setWidth] = React.useState(700);
diff --git a/packages/charts/react-charts/stories/src/LineChart/LineChartLargeData.stories.tsx b/packages/charts/react-charts/stories/src/LineChart/LineChartLargeData.stories.tsx
index 1841b37b06e56..1ffaaa63b435a 100644
--- a/packages/charts/react-charts/stories/src/LineChart/LineChartLargeData.stories.tsx
+++ b/packages/charts/react-charts/stories/src/LineChart/LineChartLargeData.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { LineChartProps, LineChart, ChartProps, LineChartDataPoint, DataVizPalette } from '@fluentui/react-charts';
+import type { LineChartProps, ChartProps, LineChartDataPoint } from '@fluentui/react-charts';
+import { LineChart, DataVizPalette } from '@fluentui/react-charts';
import { Switch } from '@fluentui/react-components';
export const LineChartLargeData = (props: LineChartProps): JSXElement => {
diff --git a/packages/charts/react-charts/stories/src/LineChart/LineChartLogAxis.stories.tsx b/packages/charts/react-charts/stories/src/LineChart/LineChartLogAxis.stories.tsx
index 370d04f4bbf7f..8d7b8820a5378 100644
--- a/packages/charts/react-charts/stories/src/LineChart/LineChartLogAxis.stories.tsx
+++ b/packages/charts/react-charts/stories/src/LineChart/LineChartLogAxis.stories.tsx
@@ -1,6 +1,8 @@
import * as React from 'react';
-import { ChartProps, LineChartProps, LineChart, DataVizPalette, AxisScaleType } from '@fluentui/react-charts';
-import { RadioGroup, Radio, Field, JSXElement } from '@fluentui/react-components';
+import type { ChartProps, LineChartProps, AxisScaleType } from '@fluentui/react-charts';
+import { LineChart, DataVizPalette } from '@fluentui/react-charts';
+import type { JSXElement } from '@fluentui/react-components';
+import { RadioGroup, Radio, Field } from '@fluentui/react-components';
const data: ChartProps = {
chartTitle: 'Line Chart',
diff --git a/packages/charts/react-charts/stories/src/LineChart/LineChartMultiple.stories.tsx b/packages/charts/react-charts/stories/src/LineChart/LineChartMultiple.stories.tsx
index 59464ff8d634b..cccb2d59799c7 100644
--- a/packages/charts/react-charts/stories/src/LineChart/LineChartMultiple.stories.tsx
+++ b/packages/charts/react-charts/stories/src/LineChart/LineChartMultiple.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { LineChartProps, LineChart, DataVizPalette } from '@fluentui/react-charts';
+import type { LineChartProps } from '@fluentui/react-charts';
+import { LineChart, DataVizPalette } from '@fluentui/react-charts';
import { Switch } from '@fluentui/react-components';
diff --git a/packages/charts/react-charts/stories/src/LineChart/LineChartNegative.stories.tsx b/packages/charts/react-charts/stories/src/LineChart/LineChartNegative.stories.tsx
index 80c50445278ed..8a2faff3d47f6 100644
--- a/packages/charts/react-charts/stories/src/LineChart/LineChartNegative.stories.tsx
+++ b/packages/charts/react-charts/stories/src/LineChart/LineChartNegative.stories.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { ChartProps, LineChart, DataVizPalette } from '@fluentui/react-charts';
-import { Switch, Checkbox, CheckboxOnChangeData, makeStyles, tokens } from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData } from '@fluentui/react-components';
+import type { ChartProps } from '@fluentui/react-charts';
+import { LineChart, DataVizPalette } from '@fluentui/react-charts';
+import { Switch, Checkbox, makeStyles, tokens } from '@fluentui/react-components';
const useStyles = makeStyles({
svgTooltip: {
diff --git a/packages/charts/react-charts/stories/src/LineChart/LineChartSecondaryYAxis.stories.tsx b/packages/charts/react-charts/stories/src/LineChart/LineChartSecondaryYAxis.stories.tsx
index efda23b7e2163..305afa5601832 100644
--- a/packages/charts/react-charts/stories/src/LineChart/LineChartSecondaryYAxis.stories.tsx
+++ b/packages/charts/react-charts/stories/src/LineChart/LineChartSecondaryYAxis.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { ChartProps, LineChart, DataVizPalette } from '@fluentui/react-charts';
+import type { ChartProps } from '@fluentui/react-charts';
+import { LineChart, DataVizPalette } from '@fluentui/react-charts';
import { useId } from '@fluentui/react-components';
export const LineChartSecondaryYAxis = (): JSXElement => {
diff --git a/packages/charts/react-charts/stories/src/LineChart/LineChartStyled.stories.tsx b/packages/charts/react-charts/stories/src/LineChart/LineChartStyled.stories.tsx
index 5af277128b636..1be4c4e19504b 100644
--- a/packages/charts/react-charts/stories/src/LineChart/LineChartStyled.stories.tsx
+++ b/packages/charts/react-charts/stories/src/LineChart/LineChartStyled.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { LineChartProps, LineChart, DataVizPalette } from '@fluentui/react-charts';
+import type { LineChartProps } from '@fluentui/react-charts';
+import { LineChart, DataVizPalette } from '@fluentui/react-charts';
export const LineChartStyled = (props: LineChartProps): JSXElement => {
const [width, setWidth] = React.useState(700);
diff --git a/packages/charts/react-charts/stories/src/PolarChart/PolarChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/PolarChart/PolarChartDefault.stories.tsx
index 11aec6dbfdbfe..684080b9a851a 100644
--- a/packages/charts/react-charts/stories/src/PolarChart/PolarChartDefault.stories.tsx
+++ b/packages/charts/react-charts/stories/src/PolarChart/PolarChartDefault.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { PolarChart, PolarChartProps } from '@fluentui/react-charts';
+import type { PolarChartProps } from '@fluentui/react-charts';
+import { PolarChart } from '@fluentui/react-charts';
const data: PolarChartProps['data'] = [
{
diff --git a/packages/charts/react-charts/stories/src/SankeyChart/SankeyChartBasic.stories.tsx b/packages/charts/react-charts/stories/src/SankeyChart/SankeyChartBasic.stories.tsx
index a038fb6560b2d..9918c12586d86 100644
--- a/packages/charts/react-charts/stories/src/SankeyChart/SankeyChartBasic.stories.tsx
+++ b/packages/charts/react-charts/stories/src/SankeyChart/SankeyChartBasic.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { ChartProps, SankeyChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import type { ChartProps } from '@fluentui/react-charts';
+import { SankeyChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
const data: ChartProps = {
chartTitle: 'Sankey Chart',
diff --git a/packages/charts/react-charts/stories/src/SankeyChart/SankeyChartInbox.stories.tsx b/packages/charts/react-charts/stories/src/SankeyChart/SankeyChartInbox.stories.tsx
index 5f916af0d249c..97012556933f3 100644
--- a/packages/charts/react-charts/stories/src/SankeyChart/SankeyChartInbox.stories.tsx
+++ b/packages/charts/react-charts/stories/src/SankeyChart/SankeyChartInbox.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { ChartProps, SankeyChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import type { ChartProps } from '@fluentui/react-charts';
+import { SankeyChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
const data: ChartProps = {
chartTitle: 'Sankey Chart',
diff --git a/packages/charts/react-charts/stories/src/SankeyChart/SankeyChartRebalance.stories.tsx b/packages/charts/react-charts/stories/src/SankeyChart/SankeyChartRebalance.stories.tsx
index e2abce1e1f05a..4d61ec29116af 100644
--- a/packages/charts/react-charts/stories/src/SankeyChart/SankeyChartRebalance.stories.tsx
+++ b/packages/charts/react-charts/stories/src/SankeyChart/SankeyChartRebalance.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { ChartProps, SankeyChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import type { ChartProps } from '@fluentui/react-charts';
+import { SankeyChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
import { Switch } from '@fluentui/react-components';
const enum DataSouce {
diff --git a/packages/charts/react-charts/stories/src/SankeyChart/SankeyChartResponsive.stories.tsx b/packages/charts/react-charts/stories/src/SankeyChart/SankeyChartResponsive.stories.tsx
index f70d55ccd1fdf..0610e2e2a966e 100644
--- a/packages/charts/react-charts/stories/src/SankeyChart/SankeyChartResponsive.stories.tsx
+++ b/packages/charts/react-charts/stories/src/SankeyChart/SankeyChartResponsive.stories.tsx
@@ -1,12 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import {
- ChartProps,
- DataVizPalette,
- getColorFromToken,
- ResponsiveContainer,
- SankeyChart,
-} from '@fluentui/react-charts';
+import type { ChartProps } from '@fluentui/react-charts';
+import { DataVizPalette, getColorFromToken, ResponsiveContainer, SankeyChart } from '@fluentui/react-charts';
export const SankeyChartResponsive = (): JSXElement => {
const data: ChartProps = {
diff --git a/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartDate.stories.tsx b/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartDate.stories.tsx
index 502f58950205a..6d7773591325d 100644
--- a/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartDate.stories.tsx
+++ b/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartDate.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { ScatterChart, DataVizPalette, ChartProps } from '@fluentui/react-charts';
+import type { ChartProps } from '@fluentui/react-charts';
+import { ScatterChart, DataVizPalette } from '@fluentui/react-charts';
import { makeStyles, tokens } from '@fluentui/react-components';
const useStyles = makeStyles({
diff --git a/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartDefault.stories.tsx
index ae978d241e7f0..b31e1f1c6ce08 100644
--- a/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartDefault.stories.tsx
+++ b/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartDefault.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { ScatterChart, DataVizPalette, ChartProps } from '@fluentui/react-charts';
+import type { ChartProps } from '@fluentui/react-charts';
+import { ScatterChart, DataVizPalette } from '@fluentui/react-charts';
import { makeStyles, Switch, tokens } from '@fluentui/react-components';
const useStyles = makeStyles({
diff --git a/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartLogAxis.stories.tsx b/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartLogAxis.stories.tsx
index bf7a2567a9928..d13d40c961b54 100644
--- a/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartLogAxis.stories.tsx
+++ b/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartLogAxis.stories.tsx
@@ -1,6 +1,8 @@
import * as React from 'react';
-import { ChartProps, DataVizPalette, ScatterChartProps, ScatterChart, AxisScaleType } from '@fluentui/react-charts';
-import { RadioGroup, Radio, Field, JSXElement } from '@fluentui/react-components';
+import type { ChartProps, ScatterChartProps, AxisScaleType } from '@fluentui/react-charts';
+import { DataVizPalette, ScatterChart } from '@fluentui/react-charts';
+import type { JSXElement } from '@fluentui/react-components';
+import { RadioGroup, Radio, Field } from '@fluentui/react-components';
const data: ChartProps = {
chartTitle: 'Scatter Chart',
diff --git a/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartString.stories.tsx b/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartString.stories.tsx
index bb96b6915a288..acbe475cfabf1 100644
--- a/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartString.stories.tsx
+++ b/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartString.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { ScatterChart, DataVizPalette, ChartProps } from '@fluentui/react-charts';
+import type { ChartProps } from '@fluentui/react-charts';
+import { ScatterChart, DataVizPalette } from '@fluentui/react-charts';
import { makeStyles, tokens } from '@fluentui/react-components';
const useStyles = makeStyles({
diff --git a/packages/charts/react-charts/stories/src/VegaDeclarativeChart/VegaDeclarativeChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/VegaDeclarativeChart/VegaDeclarativeChartDefault.stories.tsx
index 7a52338bd7c3b..d26633fb19854 100644
--- a/packages/charts/react-charts/stories/src/VegaDeclarativeChart/VegaDeclarativeChartDefault.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VegaDeclarativeChart/VegaDeclarativeChartDefault.stories.tsx
@@ -1,17 +1,7 @@
import * as React from 'react';
import { VegaDeclarativeChart } from '@fluentui/react-charts';
-import {
- Button,
- Dropdown,
- Field,
- Input,
- InputOnChangeData,
- Option,
- OptionOnSelectData,
- SelectionEvents,
- Spinner,
- Switch,
-} from '@fluentui/react-components';
+import type { InputOnChangeData, OptionOnSelectData, SelectionEvents } from '@fluentui/react-components';
+import { Button, Dropdown, Field, Input, Option, Spinner, Switch } from '@fluentui/react-components';
// Inline schemas (25 total covering various chart types)
// These are the default schemas shown in "show few" mode
diff --git a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartAllNegative.stories.tsx b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartAllNegative.stories.tsx
index e71ec64698c0f..e3e21f8725b6f 100644
--- a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartAllNegative.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartAllNegative.stories.tsx
@@ -1,23 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import {
- VerticalBarChart,
- VerticalBarChartDataPoint,
- LineChartLineOptions,
- DataVizPalette,
- getColorFromToken,
-} from '@fluentui/react-charts';
-import {
- Switch,
- Checkbox,
- CheckboxOnChangeData,
- Field,
- Radio,
- RadioGroup,
- RadioGroupOnChangeData,
- makeStyles,
- tokens,
-} from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData, RadioGroupOnChangeData } from '@fluentui/react-components';
+import type { VerticalBarChartDataPoint, LineChartLineOptions } from '@fluentui/react-charts';
+import { VerticalBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import { Switch, Checkbox, Field, Radio, RadioGroup, makeStyles, tokens } from '@fluentui/react-components';
const useStyles = makeStyles({
svgTooltip: {
diff --git a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartAxisTooltip.stories.tsx b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartAxisTooltip.stories.tsx
index 04b3d51443006..27bbdf8a7c2fd 100644
--- a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartAxisTooltip.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartAxisTooltip.stories.tsx
@@ -1,17 +1,14 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { VerticalBarChart, VerticalBarChartDataPoint } from '@fluentui/react-charts';
-import {
- Checkbox,
- Field,
- Radio,
- RadioGroup,
+import type {
+ JSXElement,
CheckboxOnChangeData,
CheckboxProps,
- Input,
InputProps,
InputOnChangeData,
} from '@fluentui/react-components';
+import type { VerticalBarChartDataPoint } from '@fluentui/react-charts';
+import { VerticalBarChart } from '@fluentui/react-charts';
+import { Checkbox, Field, Radio, RadioGroup, Input } from '@fluentui/react-components';
export const VerticalBarAxisTooltip = (): JSXElement => {
const [selectedCallout, setSelectedCallout] = React.useState('showTooltip');
diff --git a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartCustomAccessibility.stories.tsx b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartCustomAccessibility.stories.tsx
index ad12bfa0b9ea1..fdf97cc2015b9 100644
--- a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartCustomAccessibility.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartCustomAccessibility.stories.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { VerticalBarChart, VerticalBarChartDataPoint } from '@fluentui/react-charts';
-import { Checkbox, CheckboxOnChangeData, CheckboxProps } from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData, CheckboxProps } from '@fluentui/react-components';
+import type { VerticalBarChartDataPoint } from '@fluentui/react-charts';
+import { VerticalBarChart } from '@fluentui/react-charts';
+import { Checkbox } from '@fluentui/react-components';
export const VerticalBarCustomAccessibility = (): JSXElement => {
const [isChecked, setIsChecked] = React.useState(true);
diff --git a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartDateAxis.stories.tsx b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartDateAxis.stories.tsx
index 17b6e6a0f3d02..19986bb6da55b 100644
--- a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartDateAxis.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartDateAxis.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { VerticalBarChart, VerticalBarChartDataPoint } from '@fluentui/react-charts';
+import type { VerticalBarChartDataPoint } from '@fluentui/react-charts';
+import { VerticalBarChart } from '@fluentui/react-charts';
export const VerticalBarDateAxis = (): JSXElement => {
const points: VerticalBarChartDataPoint[] = [
diff --git a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartDefault.stories.tsx
index 03ea49e155fe9..c4d5af2b0a3ef 100644
--- a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartDefault.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartDefault.stories.tsx
@@ -1,17 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { VerticalBarChart, VerticalBarChartDataPoint, LineChartLineOptions } from '@fluentui/react-charts';
-import {
- Switch,
- Checkbox,
- CheckboxOnChangeData,
- Field,
- Radio,
- RadioGroup,
- RadioGroupOnChangeData,
- makeStyles,
- tokens,
-} from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData, RadioGroupOnChangeData } from '@fluentui/react-components';
+import type { VerticalBarChartDataPoint, LineChartLineOptions } from '@fluentui/react-charts';
+import { VerticalBarChart } from '@fluentui/react-charts';
+import { Switch, Checkbox, Field, Radio, RadioGroup, makeStyles, tokens } from '@fluentui/react-components';
const useStyles = makeStyles({
svgTooltip: {
diff --git a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartDynamic.stories.tsx b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartDynamic.stories.tsx
index 70ca28938dd51..8a05a343a74d2 100644
--- a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartDynamic.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartDynamic.stories.tsx
@@ -1,19 +1,16 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { VerticalBarChart, VerticalBarChartDataPoint, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
-import { Button } from '@fluentui/react-components';
-import {
- Checkbox,
+import type {
+ JSXElement,
CheckboxOnChangeData,
CheckboxProps,
- Field,
- Radio,
- RadioGroup,
RadioGroupOnChangeData,
- Input,
InputProps,
InputOnChangeData,
} from '@fluentui/react-components';
+import type { VerticalBarChartDataPoint } from '@fluentui/react-charts';
+import { VerticalBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import { Button } from '@fluentui/react-components';
+import { Checkbox, Field, Radio, RadioGroup, Input } from '@fluentui/react-components';
export const VerticalBarDynamic = (): JSXElement => {
/** This style is commonly used to visually hide text that is still available for the screen reader to announce. */
diff --git a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartNegative.stories.tsx b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartNegative.stories.tsx
index f50ec955b3d08..11db356bc5f24 100644
--- a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartNegative.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartNegative.stories.tsx
@@ -1,23 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import {
- VerticalBarChart,
- VerticalBarChartDataPoint,
- LineChartLineOptions,
- DataVizPalette,
- getColorFromToken,
-} from '@fluentui/react-charts';
-import {
- Switch,
- Checkbox,
- CheckboxOnChangeData,
- Field,
- Radio,
- RadioGroup,
- RadioGroupOnChangeData,
- makeStyles,
- tokens,
-} from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData, RadioGroupOnChangeData } from '@fluentui/react-components';
+import type { VerticalBarChartDataPoint, LineChartLineOptions } from '@fluentui/react-charts';
+import { VerticalBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import { Switch, Checkbox, Field, Radio, RadioGroup, makeStyles, tokens } from '@fluentui/react-components';
const useStyles = makeStyles({
svgTooltip: {
diff --git a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartResponsive.stories.tsx b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartResponsive.stories.tsx
index d033eba1a75fe..41198ae4c942a 100644
--- a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartResponsive.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartResponsive.stories.tsx
@@ -1,13 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import {
- VerticalBarChart,
- VerticalBarChartDataPoint,
- DataVizPalette,
- getColorFromToken,
- LineChartLineOptions,
- ResponsiveContainer,
-} from '@fluentui/react-charts';
+import type { VerticalBarChartDataPoint, LineChartLineOptions } from '@fluentui/react-charts';
+import { VerticalBarChart, DataVizPalette, getColorFromToken, ResponsiveContainer } from '@fluentui/react-charts';
export const VerticalBarChartResponsive = (): JSXElement => {
const points: VerticalBarChartDataPoint[] = [
diff --git a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartRotateLabels.stories.tsx b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartRotateLabels.stories.tsx
index 2971bc84ad3aa..118cf2b5f7c60 100644
--- a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartRotateLabels.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartRotateLabels.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { VerticalBarChart, VerticalBarChartDataPoint } from '@fluentui/react-charts';
+import type { VerticalBarChartDataPoint } from '@fluentui/react-charts';
+import { VerticalBarChart } from '@fluentui/react-charts';
export const VerticalBarRotateLabels = (): JSXElement => {
const points: VerticalBarChartDataPoint[] = [
diff --git a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartSecondaryYAxis.stories.tsx b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartSecondaryYAxis.stories.tsx
index c02bc7b7d0a40..227978445e6a7 100644
--- a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartSecondaryYAxis.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartSecondaryYAxis.stories.tsx
@@ -1,12 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import {
- VerticalBarChart,
- VerticalBarChartDataPoint,
- LineChartLineOptions,
- DataVizPalette,
- getColorFromToken,
-} from '@fluentui/react-charts';
+import type { VerticalBarChartDataPoint, LineChartLineOptions } from '@fluentui/react-charts';
+import { VerticalBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
import { useId, tokens, makeStyles } from '@fluentui/react-components';
const useStyles = makeStyles({
diff --git a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartStyled.stories.tsx b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartStyled.stories.tsx
index 462bd40a0a33d..2c4cc8f188f91 100644
--- a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartStyled.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartStyled.stories.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { VerticalBarChart, VerticalBarChartDataPoint } from '@fluentui/react-charts';
-import { Checkbox, CheckboxOnChangeData, CheckboxProps } from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData, CheckboxProps } from '@fluentui/react-components';
+import type { VerticalBarChartDataPoint } from '@fluentui/react-charts';
+import { VerticalBarChart } from '@fluentui/react-charts';
+import { Checkbox } from '@fluentui/react-components';
export const VerticalBarStyled = (): JSXElement => {
const [isChecked, setIsChecked] = React.useState(true);
diff --git a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartAxisCategoryOrder.stories.tsx b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartAxisCategoryOrder.stories.tsx
index 92ad9b91e176a..c4a320a0d1182 100644
--- a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartAxisCategoryOrder.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartAxisCategoryOrder.stories.tsx
@@ -1,11 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import {
- VerticalStackedChartProps,
- VerticalStackedBarChart,
- AxisCategoryOrder,
- getNextColor,
-} from '@fluentui/react-charts';
+import type { VerticalStackedChartProps, AxisCategoryOrder } from '@fluentui/react-charts';
+import { VerticalStackedBarChart, getNextColor } from '@fluentui/react-charts';
import { Button, Dropdown, Option, Field } from '@fluentui/react-components';
/** This style is commonly used to visually hide text that is still available for the screen reader to announce. */
diff --git a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartAxisTooltip.stories.tsx b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartAxisTooltip.stories.tsx
index 7a1ee18d260ba..50f21d5fb3188 100644
--- a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartAxisTooltip.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartAxisTooltip.stories.tsx
@@ -1,24 +1,14 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import {
- VSChartDataPoint,
- VerticalStackedChartProps,
- VerticalStackedBarChart,
- DataVizPalette,
- getColorFromToken,
-} from '@fluentui/react-charts';
-import {
- Checkbox,
- Switch,
- Field,
- Radio,
- RadioGroup,
+import type {
+ JSXElement,
CheckboxOnChangeData,
CheckboxProps,
- Input,
InputProps,
InputOnChangeData,
} from '@fluentui/react-components';
+import type { VSChartDataPoint, VerticalStackedChartProps } from '@fluentui/react-charts';
+import { VerticalStackedBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import { Checkbox, Switch, Field, Radio, RadioGroup, Input } from '@fluentui/react-components';
export const VerticalStackedBarAxisTooltip = (): JSXElement => {
const [selectedCallout, setSelectedCallout] = React.useState('showTooltip');
diff --git a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartCallout.stories.tsx b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartCallout.stories.tsx
index 06c6fedd0ec76..10c2243da210d 100644
--- a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartCallout.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartCallout.stories.tsx
@@ -1,14 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import {
- VerticalStackedBarChart,
- VSChartDataPoint,
- VerticalStackedChartProps,
- LineChartLineOptions,
- DataVizPalette,
- getColorFromToken,
-} from '@fluentui/react-charts';
-import { Field, Checkbox, CheckboxOnChangeData, Radio, RadioGroup } from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData } from '@fluentui/react-components';
+import type { VSChartDataPoint, VerticalStackedChartProps, LineChartLineOptions } from '@fluentui/react-charts';
+import { VerticalStackedBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import { Field, Checkbox, Radio, RadioGroup } from '@fluentui/react-components';
export const VerticalStackedBarCallout = (): JSXElement => {
const [width, setWidth] = React.useState(650);
diff --git a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartCustomAccessibility.stories.tsx b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartCustomAccessibility.stories.tsx
index a643898691a53..5c6ffba89270a 100644
--- a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartCustomAccessibility.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartCustomAccessibility.stories.tsx
@@ -1,14 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import {
- VSChartDataPoint,
- VerticalStackedChartProps,
- VerticalStackedBarChart,
- LineChartLineOptions,
- DataVizPalette,
- getColorFromToken,
-} from '@fluentui/react-charts';
-import { Checkbox, CheckboxOnChangeData } from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData } from '@fluentui/react-components';
+import type { VSChartDataPoint, VerticalStackedChartProps, LineChartLineOptions } from '@fluentui/react-charts';
+import { VerticalStackedBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import { Checkbox } from '@fluentui/react-components';
export const VerticalStackedBarCustomAccessibility = (): JSXElement => {
const [width, setWidth] = React.useState(650);
diff --git a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDateAxis.stories.tsx b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDateAxis.stories.tsx
index 810ca74fbe31e..fb17cfc8fefaf 100644
--- a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDateAxis.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDateAxis.stories.tsx
@@ -1,12 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import {
- VerticalStackedBarChart,
- VSChartDataPoint,
- VerticalStackedChartProps,
- DataVizPalette,
- getColorFromToken,
-} from '@fluentui/react-charts';
+import type { VSChartDataPoint, VerticalStackedChartProps } from '@fluentui/react-charts';
+import { VerticalStackedBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
import { Field, Radio, RadioGroup } from '@fluentui/react-components';
export const VerticalStackedBarDateAxis = (): JSXElement => {
diff --git a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDefault.stories.tsx
index 99dbf506739b5..bf9a11e6321e5 100644
--- a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDefault.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDefault.stories.tsx
@@ -1,14 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import {
- VSChartDataPoint,
- VerticalStackedChartProps,
- VerticalStackedBarChart,
- LineChartLineOptions,
- DataVizPalette,
- getColorFromToken,
-} from '@fluentui/react-charts';
-import { Checkbox, CheckboxOnChangeData, Switch, tokens, makeStyles } from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData } from '@fluentui/react-components';
+import type { VSChartDataPoint, VerticalStackedChartProps, LineChartLineOptions } from '@fluentui/react-charts';
+import { VerticalStackedBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import { Checkbox, Switch, tokens, makeStyles } from '@fluentui/react-components';
const useStyles = makeStyles({
svgTooltip: {
diff --git a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartNegative.stories.tsx b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartNegative.stories.tsx
index 7e7eaed532046..c024fd6f1bc49 100644
--- a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartNegative.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartNegative.stories.tsx
@@ -1,14 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import {
- VSChartDataPoint,
- VerticalStackedChartProps,
- VerticalStackedBarChart,
- LineChartLineOptions,
- DataVizPalette,
- getColorFromToken,
-} from '@fluentui/react-charts';
-import { Checkbox, CheckboxOnChangeData, Switch, makeStyles, tokens } from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData } from '@fluentui/react-components';
+import type { VSChartDataPoint, VerticalStackedChartProps, LineChartLineOptions } from '@fluentui/react-charts';
+import { VerticalStackedBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
+import { Checkbox, Switch, makeStyles, tokens } from '@fluentui/react-components';
const useStyles = makeStyles({
svgTooltip: {
diff --git a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartSecondaryYAxis.stories.tsx b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartSecondaryYAxis.stories.tsx
index 52b69c99090bd..9445c13a42ec1 100644
--- a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartSecondaryYAxis.stories.tsx
+++ b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartSecondaryYAxis.stories.tsx
@@ -1,13 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import {
- VSChartDataPoint,
- VerticalStackedChartProps,
- VerticalStackedBarChart,
- LineChartLineOptions,
- DataVizPalette,
- getColorFromToken,
-} from '@fluentui/react-charts';
+import type { VSChartDataPoint, VerticalStackedChartProps, LineChartLineOptions } from '@fluentui/react-charts';
+import { VerticalStackedBarChart, DataVizPalette, getColorFromToken } from '@fluentui/react-charts';
import { useId, makeStyles, tokens } from '@fluentui/react-components';
const useStyles = makeStyles({
diff --git a/packages/eslint-plugin/src/configs/react/index.js b/packages/eslint-plugin/src/configs/react/index.js
index 27dcaacef18e8..7e07c4461b765 100644
--- a/packages/eslint-plugin/src/configs/react/index.js
+++ b/packages/eslint-plugin/src/configs/react/index.js
@@ -51,6 +51,10 @@ module.exports = defineConfig(
imports: ['react', '@fluentui/react-context-selector', '@fluentui/global-context'],
},
],
+ '@typescript-eslint/consistent-type-imports': [
+ 'error',
+ { prefer: 'type-imports', disallowTypeAnnotations: false },
+ ],
'react-compiler/react-compiler': ['error'],
...createReactCrossVersionRules({
crossCompatTypePackage: '@fluentui/react-utilities',
diff --git a/packages/react-components/deprecated/react-alert/etc/react-alert.api.md b/packages/react-components/deprecated/react-alert/etc/react-alert.api.md
index 0406f38018a0f..92f8c6c224b21 100644
--- a/packages/react-components/deprecated/react-alert/etc/react-alert.api.md
+++ b/packages/react-components/deprecated/react-alert/etc/react-alert.api.md
@@ -4,8 +4,8 @@
```ts
-import { Avatar } from '@fluentui/react-avatar';
-import { Button } from '@fluentui/react-button';
+import type { Avatar } from '@fluentui/react-avatar';
+import type { Button } from '@fluentui/react-button';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/deprecated/react-alert/src/components/Alert/Alert.types.ts b/packages/react-components/deprecated/react-alert/src/components/Alert/Alert.types.ts
index 32e12bf1704f7..8c457abbd165a 100644
--- a/packages/react-components/deprecated/react-alert/src/components/Alert/Alert.types.ts
+++ b/packages/react-components/deprecated/react-alert/src/components/Alert/Alert.types.ts
@@ -1,5 +1,5 @@
-import { Avatar } from '@fluentui/react-avatar';
-import { Button } from '@fluentui/react-button';
+import type { Avatar } from '@fluentui/react-avatar';
+import type { Button } from '@fluentui/react-button';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
diff --git a/packages/react-components/deprecated/react-infobutton/etc/react-infobutton.api.md b/packages/react-components/deprecated/react-infobutton/etc/react-infobutton.api.md
index 871a15f79823e..6f4fedc7fa5e6 100644
--- a/packages/react-components/deprecated/react-infobutton/etc/react-infobutton.api.md
+++ b/packages/react-components/deprecated/react-infobutton/etc/react-infobutton.api.md
@@ -6,8 +6,8 @@
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
-import { ForwardRefComponent } from '@fluentui/react-utilities';
-import { Label } from '@fluentui/react-label';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { Label } from '@fluentui/react-label';
import type { PopoverProps } from '@fluentui/react-popover';
import type { PopoverSurface } from '@fluentui/react-popover';
import * as React_2 from 'react';
diff --git a/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/InfoButton.tsx b/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/InfoButton.tsx
index 315ff56b5eef2..312797926c53a 100644
--- a/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/InfoButton.tsx
+++ b/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/InfoButton.tsx
@@ -3,7 +3,7 @@
'use client';
import * as React from 'react';
-import { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
import { renderInfoButton_unstable } from './renderInfoButton';
import { useInfoButton_unstable } from './useInfoButton';
import { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';
diff --git a/packages/react-components/deprecated/react-infobutton/src/components/InfoLabel/InfoLabel.types.ts b/packages/react-components/deprecated/react-infobutton/src/components/InfoLabel/InfoLabel.types.ts
index bd57076f2bd7c..c5916f0decbf2 100644
--- a/packages/react-components/deprecated/react-infobutton/src/components/InfoLabel/InfoLabel.types.ts
+++ b/packages/react-components/deprecated/react-infobutton/src/components/InfoLabel/InfoLabel.types.ts
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-deprecated */
-import { Label } from '@fluentui/react-label';
-import { InfoButton } from '../InfoButton';
+import type { Label } from '@fluentui/react-label';
+import type { InfoButton } from '../InfoButton';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type { InfoButtonProps } from '../InfoButton';
diff --git a/packages/react-components/deprecated/react-virtualizer/src/components/Virtualizer/Virtualizer.ts b/packages/react-components/deprecated/react-virtualizer/src/components/Virtualizer/Virtualizer.ts
index fa721bdd77431..73a47a0f2ce0f 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/components/Virtualizer/Virtualizer.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/components/Virtualizer/Virtualizer.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import type { VirtualizerProps } from './Virtualizer.types';
import { useVirtualizerStyles_unstable } from './useVirtualizerStyles.styles';
import { useVirtualizer_unstable } from './useVirtualizer';
diff --git a/packages/react-components/deprecated/react-virtualizer/src/components/Virtualizer/Virtualizer.types.ts b/packages/react-components/deprecated/react-virtualizer/src/components/Virtualizer/Virtualizer.types.ts
index c81b504c9870d..b903f61a2ed41 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/components/Virtualizer/Virtualizer.types.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/components/Virtualizer/Virtualizer.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type { VirtualizerContextProps } from '../../Utilities';
@@ -70,12 +70,12 @@ export type VirtualizerConfigState = {
/**
* Ref for access to internal size knowledge, can be used to measure updates
*/
- // eslint-disable-next-line @typescript-eslint/no-deprecated
+
childSizes: React.MutableRefObject;
/**
* Ref for access to internal progressive size knowledge, can be used to measure updates
*/
- // eslint-disable-next-line @typescript-eslint/no-deprecated
+
childProgressiveSizes: React.MutableRefObject;
};
@@ -159,7 +159,7 @@ export type VirtualizerConfigProps = {
* Enables users to override the intersectionObserverRoot.
* We recommend passing this in for accurate distance assessment in IO
*/
- // eslint-disable-next-line @typescript-eslint/no-deprecated
+
scrollViewRef?: React.MutableRefObject;
/**
@@ -200,7 +200,7 @@ export type VirtualizerConfigProps = {
/*
* Callback for notifying when a flagged index has been rendered
*/
- // eslint-disable-next-line @typescript-eslint/no-deprecated
+
flaggedIndex?: React.MutableRefObject;
/**
diff --git a/packages/react-components/deprecated/react-virtualizer/src/components/Virtualizer/useVirtualizerStyles.styles.ts b/packages/react-components/deprecated/react-virtualizer/src/components/Virtualizer/useVirtualizerStyles.styles.ts
index 3726affed1b3f..2afe35aeb9b92 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/components/Virtualizer/useVirtualizerStyles.styles.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/components/Virtualizer/useVirtualizerStyles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
-import { VirtualizerSlots, VirtualizerState } from './Virtualizer.types';
+import type { VirtualizerSlots, VirtualizerState } from './Virtualizer.types';
import type { SlotClassNames } from '@fluentui/react-utilities';
const virtualizerClassName = 'fui-Virtualizer';
diff --git a/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollView/VirtualizerScrollView.ts b/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollView/VirtualizerScrollView.ts
index cf252104ae502..1ceb8b670282b 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollView/VirtualizerScrollView.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollView/VirtualizerScrollView.ts
@@ -4,7 +4,7 @@ import type { VirtualizerScrollViewProps } from './VirtualizerScrollView.types';
import { useVirtualizerScrollView_unstable } from './useVirtualizerScrollView';
import { renderVirtualizerScrollView_unstable } from './renderVirtualizerScrollView';
import { useVirtualizerScrollViewStyles_unstable } from './useVirtualizerScrollViewStyles.styles';
-import * as React from 'react';
+import type * as React from 'react';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
diff --git a/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollView/VirtualizerScrollView.types.ts b/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollView/VirtualizerScrollView.types.ts
index 80296eb99e2e1..939876846b3c9 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollView/VirtualizerScrollView.types.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollView/VirtualizerScrollView.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type {
VirtualizerSlots,
diff --git a/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.ts b/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.ts
index 5909fbda07137..fc04ee5f6960c 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.ts
@@ -4,7 +4,7 @@ import type { VirtualizerScrollViewDynamicProps } from './VirtualizerScrollViewD
import { useVirtualizerScrollViewDynamic_unstable } from './useVirtualizerScrollViewDynamic';
import { renderVirtualizerScrollViewDynamic_unstable } from './renderVirtualizerScrollViewDynamic';
import { useVirtualizerScrollViewDynamicStyles_unstable } from './useVirtualizerScrollViewDynamicStyles.styles';
-import * as React from 'react';
+import type * as React from 'react';
import type { VirtualizerContextProps } from '../../Utilities';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.ts b/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.ts
index e16aa3d278c98..ac55872f3d195 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
import type {
VirtualizerConfigProps,
diff --git a/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.tsx b/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.tsx
index f32abec4a5fc3..13ec5f2b320b0 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.tsx
+++ b/packages/react-components/deprecated/react-virtualizer/src/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.tsx
@@ -2,7 +2,7 @@
/** @jsxImportSource @fluentui/react-jsx-runtime */
import type * as React from 'react';
import { assertSlots } from '@fluentui/react-utilities';
-import {
+import type {
VirtualizerScrollViewDynamicSlots,
VirtualizerScrollViewDynamicState,
} from './VirtualizerScrollViewDynamic.types';
diff --git a/packages/react-components/deprecated/react-virtualizer/src/hooks/hooks.types.ts b/packages/react-components/deprecated/react-virtualizer/src/hooks/hooks.types.ts
index 1c489c41c9027..a7e2a29691c60 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/hooks/hooks.types.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/hooks/hooks.types.ts
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { DynamicVirtualizerContextProps } from '../Utilities';
+import type * as React from 'react';
+import type { DynamicVirtualizerContextProps } from '../Utilities';
/**
* @deprecated migrated to \@fluentui\-contrib/react\-virtualizer for stable release.
@@ -83,7 +83,7 @@ export interface ResizeCallbackWithRef {
// TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
observer: ResizeObserver,
- // eslint-disable-next-line @typescript-eslint/no-deprecated
+
scrollRef?: React.MutableRefObject,
): void;
}
diff --git a/packages/react-components/deprecated/react-virtualizer/src/hooks/useDynamicPagination.ts b/packages/react-components/deprecated/react-virtualizer/src/hooks/useDynamicPagination.ts
index fa8c2fbf596e3..cfa00ce453215 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/hooks/useDynamicPagination.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/hooks/useDynamicPagination.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { VirtualizerDynamicPaginationProps } from './hooks.types';
+import type { VirtualizerDynamicPaginationProps } from './hooks.types';
import { useTimeout } from '@fluentui/react-utilities';
/**
diff --git a/packages/react-components/deprecated/react-virtualizer/src/hooks/useDynamicVirtualizerMeasure.ts b/packages/react-components/deprecated/react-virtualizer/src/hooks/useDynamicVirtualizerMeasure.ts
index 653f0f2c74088..3dd1319801936 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/hooks/useDynamicVirtualizerMeasure.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/hooks/useDynamicVirtualizerMeasure.ts
@@ -2,7 +2,7 @@
import { useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
import * as React from 'react';
-import { VirtualizerMeasureDynamicProps } from './hooks.types';
+import type { VirtualizerMeasureDynamicProps } from './hooks.types';
import { useResizeObserverRef_unstable } from './useResizeObserverRef';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
@@ -43,7 +43,6 @@ export const useDynamicVirtualizerMeasure = (
const { targetDocument } = useFluent();
const container = React.useRef(null);
const handleScrollResize = React.useCallback(
- // eslint-disable-next-line @typescript-eslint/no-deprecated
(scrollRef: React.MutableRefObject) => {
if (!scrollRef?.current) {
// Error? ignore?
@@ -138,7 +137,7 @@ export const useDynamicVirtualizerMeasure = (
// TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
_observer: ResizeObserver,
- // eslint-disable-next-line @typescript-eslint/no-deprecated
+
scrollRef?: React.MutableRefObject,
) => {
if (scrollRef) {
diff --git a/packages/react-components/deprecated/react-virtualizer/src/hooks/useIntersectionObserver.ts b/packages/react-components/deprecated/react-virtualizer/src/hooks/useIntersectionObserver.ts
index b7251191d8291..c332ceb41bdf4 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/hooks/useIntersectionObserver.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/hooks/useIntersectionObserver.ts
@@ -60,7 +60,6 @@ export const useIntersectionObserver = (
setObserverInit: (newInit: IntersectionObserverInit | undefined) => void;
// TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
- // eslint-disable-next-line @typescript-eslint/no-deprecated
observer: React.MutableRefObject;
} => {
'use no memo';
diff --git a/packages/react-components/deprecated/react-virtualizer/src/hooks/useMeasureList.ts b/packages/react-components/deprecated/react-virtualizer/src/hooks/useMeasureList.ts
index f40b94def5254..a202654a05b87 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/hooks/useMeasureList.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/hooks/useMeasureList.ts
@@ -25,12 +25,11 @@ export function useMeasureList<
totalLength: number,
defaultItemSize: number,
): {
- // eslint-disable-next-line @typescript-eslint/no-deprecated
widthArray: React.MutableRefObject;
- // eslint-disable-next-line @typescript-eslint/no-deprecated
+
heightArray: React.MutableRefObject;
createIndexedRef: (index: number) => (el: TElement | null) => void;
- // eslint-disable-next-line @typescript-eslint/no-deprecated
+
refArray: React.MutableRefObject>;
sizeUpdateCount: number;
} {
diff --git a/packages/react-components/deprecated/react-virtualizer/src/hooks/useMutationObserver.ts b/packages/react-components/deprecated/react-virtualizer/src/hooks/useMutationObserver.ts
index a0b37480e35b7..23986744fd686 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/hooks/useMutationObserver.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/hooks/useMutationObserver.ts
@@ -13,7 +13,6 @@ export const useMutationObserver = (
callback: MutationCallback,
options?: MutationObserverInit,
): {
- // eslint-disable-next-line @typescript-eslint/no-deprecated
observer: React.MutableRefObject;
} => {
'use no memo';
diff --git a/packages/react-components/deprecated/react-virtualizer/src/hooks/useResizeObserverRef.ts b/packages/react-components/deprecated/react-virtualizer/src/hooks/useResizeObserverRef.ts
index 03f3d15367613..8b3cb3fdfc5f1 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/hooks/useResizeObserverRef.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/hooks/useResizeObserverRef.ts
@@ -4,7 +4,7 @@ import * as React from 'react';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { debounce } from '../utilities/debounce';
import { createResizeObserverFromDocument } from '../utilities/createResizeObserverFromDocument';
-import { ResizeCallbackWithRef } from './hooks.types';
+import type { ResizeCallbackWithRef } from './hooks.types';
/**
* useResizeObserverRef_unstable simplifies resize observer connection and ensures debounce/cleanup
diff --git a/packages/react-components/deprecated/react-virtualizer/src/hooks/useStaticPagination.ts b/packages/react-components/deprecated/react-virtualizer/src/hooks/useStaticPagination.ts
index b3fcd2bd681a7..9fa667d42b1f6 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/hooks/useStaticPagination.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/hooks/useStaticPagination.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { VirtualizerStaticPaginationProps } from './hooks.types';
+import type { VirtualizerStaticPaginationProps } from './hooks.types';
import { useTimeout } from '@fluentui/react-utilities';
/**
diff --git a/packages/react-components/deprecated/react-virtualizer/src/hooks/useVirtualizerMeasure.ts b/packages/react-components/deprecated/react-virtualizer/src/hooks/useVirtualizerMeasure.ts
index 1a93e793f5e24..909b449a6b2ec 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/hooks/useVirtualizerMeasure.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/hooks/useVirtualizerMeasure.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { VirtualizerMeasureProps } from './hooks.types';
+import type { VirtualizerMeasureProps } from './hooks.types';
import { useResizeObserverRef_unstable } from './useResizeObserverRef';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
@@ -16,7 +16,7 @@ export const useStaticVirtualizerMeasure = (
bufferItems: number;
bufferSize: number;
scrollRef: (instance: TElement | null) => void;
- // eslint-disable-next-line @typescript-eslint/no-deprecated
+
containerSizeRef: React.MutableRefObject;
} => {
const { defaultItemSize, direction = 'vertical', bufferItems, bufferSize } = virtualizerProps;
@@ -38,7 +38,7 @@ export const useStaticVirtualizerMeasure = (
// TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
_observer: ResizeObserver,
- // eslint-disable-next-line @typescript-eslint/no-deprecated
+
scrollRef?: React.MutableRefObject,
) => {
if (!scrollRef?.current) {
diff --git a/packages/react-components/deprecated/react-virtualizer/src/utilities/ImperativeScrolling/imperativeScrolling.ts b/packages/react-components/deprecated/react-virtualizer/src/utilities/ImperativeScrolling/imperativeScrolling.ts
index c686aaf761ff2..5b450889884f9 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/utilities/ImperativeScrolling/imperativeScrolling.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/utilities/ImperativeScrolling/imperativeScrolling.ts
@@ -1,4 +1,4 @@
-import { ScrollToItemStaticParams } from './imperativeScrolling.types';
+import type { ScrollToItemStaticParams } from './imperativeScrolling.types';
export const scrollToItemStatic = (params: ScrollToItemStaticParams): void => {
const { index, itemSize, totalItems, scrollViewRef, axis = 'vertical', reversed = false, behavior = 'auto' } = params;
diff --git a/packages/react-components/deprecated/react-virtualizer/src/utilities/ImperativeScrolling/imperativeScrolling.types.ts b/packages/react-components/deprecated/react-virtualizer/src/utilities/ImperativeScrolling/imperativeScrolling.types.ts
index c44bce35cd4b3..77165e03748ce 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/utilities/ImperativeScrolling/imperativeScrolling.types.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/utilities/ImperativeScrolling/imperativeScrolling.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
export type ScrollToItemStaticParams = {
index: number;
diff --git a/packages/react-components/deprecated/react-virtualizer/src/utilities/ImperativeScrolling/imperativeScrollingDynamic.ts b/packages/react-components/deprecated/react-virtualizer/src/utilities/ImperativeScrolling/imperativeScrollingDynamic.ts
index 0a8073cceb6bc..11c46e6d074cf 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/utilities/ImperativeScrolling/imperativeScrollingDynamic.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/utilities/ImperativeScrolling/imperativeScrollingDynamic.ts
@@ -1,4 +1,4 @@
-import { ScrollToItemDynamicParams } from './imperativeScrolling.types';
+import type { ScrollToItemDynamicParams } from './imperativeScrolling.types';
export const scrollToItemDynamic = (params: ScrollToItemDynamicParams): void => {
const { index, itemSizes, totalSize, scrollViewRef, axis = 'vertical', reversed = false, behavior = 'auto' } = params;
diff --git a/packages/react-components/deprecated/react-virtualizer/src/utilities/VirtualizerContext/types.ts b/packages/react-components/deprecated/react-virtualizer/src/utilities/VirtualizerContext/types.ts
index 7635509a385c5..35793b35777dd 100644
--- a/packages/react-components/deprecated/react-virtualizer/src/utilities/VirtualizerContext/types.ts
+++ b/packages/react-components/deprecated/react-virtualizer/src/utilities/VirtualizerContext/types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
/**
* {@docCategory Virtualizer}
* @deprecated migrated to \@fluentui\-contrib/react\-virtualizer for stable release.
@@ -9,7 +9,7 @@ export type VirtualizerContextProps = {
/*
* These optional props are used in dynamic virtualizer
*/
- // eslint-disable-next-line @typescript-eslint/no-deprecated
+
childProgressiveSizes?: React.MutableRefObject;
};
diff --git a/packages/react-components/global-context/src/global-context-selector.ts b/packages/react-components/global-context/src/global-context-selector.ts
index 25800a9341676..387e22978a692 100644
--- a/packages/react-components/global-context/src/global-context-selector.ts
+++ b/packages/react-components/global-context/src/global-context-selector.ts
@@ -1,10 +1,10 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createContext as baseCreateContext } from '@fluentui/react-context-selector';
import { canUseDOM } from '@fluentui/react-utilities';
import { getMajorVersion } from './utils';
-import { GlobalObject } from './types';
+import type { GlobalObject } from './types';
const isBrowser = canUseDOM();
const globalObject: GlobalObject = isBrowser
diff --git a/packages/react-components/global-context/src/global-context.ts b/packages/react-components/global-context/src/global-context.ts
index 3241c82aaa0d6..e004be60e52a8 100644
--- a/packages/react-components/global-context/src/global-context.ts
+++ b/packages/react-components/global-context/src/global-context.ts
@@ -2,7 +2,7 @@
import * as React from 'react';
import { canUseDOM } from '@fluentui/react-utilities';
-import { GlobalObject } from './types';
+import type { GlobalObject } from './types';
import { getMajorVersion } from './utils';
const isBrowser = canUseDOM();
diff --git a/packages/react-components/global-context/src/types.ts b/packages/react-components/global-context/src/types.ts
index 79a9007e8228b..aff01dadabf1c 100644
--- a/packages/react-components/global-context/src/types.ts
+++ b/packages/react-components/global-context/src/types.ts
@@ -1,3 +1,3 @@
-import * as React from 'react';
+import type * as React from 'react';
export type GlobalObject = typeof globalThis & Record>;
diff --git a/packages/react-components/priority-overflow/src/overflowManager.ts b/packages/react-components/priority-overflow/src/overflowManager.ts
index de7dcd51c5d52..babf1954e60bd 100644
--- a/packages/react-components/priority-overflow/src/overflowManager.ts
+++ b/packages/react-components/priority-overflow/src/overflowManager.ts
@@ -1,7 +1,8 @@
import { DATA_OVERFLOWING, DATA_OVERFLOW_GROUP } from './consts';
import { observeResize } from './createResizeObserver';
import { debounce } from './debounce';
-import { createPriorityQueue, PriorityQueue } from './priorityQueue';
+import type { PriorityQueue } from './priorityQueue';
+import { createPriorityQueue } from './priorityQueue';
import type {
OverflowGroupState,
OverflowItemEntry,
diff --git a/packages/react-components/react-accordion/library/etc/react-accordion.api.md b/packages/react-components/react-accordion/library/etc/react-accordion.api.md
index 8240ddcb5e5a6..3860de668b12c 100644
--- a/packages/react-components/react-accordion/library/etc/react-accordion.api.md
+++ b/packages/react-components/react-accordion/library/etc/react-accordion.api.md
@@ -7,7 +7,7 @@
import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
-import { ContextSelector } from '@fluentui/react-context-selector';
+import type { ContextSelector } from '@fluentui/react-context-selector';
import { FC } from 'react';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-accordion/library/src/components/Accordion/Accordion.types.ts b/packages/react-components/react-accordion/library/src/components/Accordion/Accordion.types.ts
index 91ff104662daa..19340d7f4d17f 100644
--- a/packages/react-components/react-accordion/library/src/components/Accordion/Accordion.types.ts
+++ b/packages/react-components/react-accordion/library/src/components/Accordion/Accordion.types.ts
@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { AccordionContextValue } from '../../contexts/accordion';
+import type { AccordionContextValue } from '../../contexts/accordion';
import type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';
export type AccordionIndex = number | number[];
diff --git a/packages/react-components/react-accordion/library/src/components/Accordion/useAccordion.ts b/packages/react-components/react-accordion/library/src/components/Accordion/useAccordion.ts
index ce6ebf7e6b0bc..4c4fa4a959a10 100644
--- a/packages/react-components/react-accordion/library/src/components/Accordion/useAccordion.ts
+++ b/packages/react-components/react-accordion/library/src/components/Accordion/useAccordion.ts
@@ -5,7 +5,7 @@ import { useControllableState, useEventCallback, slot } from '@fluentui/react-ut
import type { AccordionBaseProps, AccordionBaseState, AccordionProps, AccordionState } from './Accordion.types';
import type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-import { AccordionRequestToggleData } from '../../contexts/accordion';
+import type { AccordionRequestToggleData } from '../../contexts/accordion';
/**
* Returns the props and state required to render the component
diff --git a/packages/react-components/react-accordion/library/src/components/AccordionHeader/AccordionHeader.test.tsx b/packages/react-components/react-accordion/library/src/components/AccordionHeader/AccordionHeader.test.tsx
index eb50d9fb2e6a6..f40560233e879 100644
--- a/packages/react-components/react-accordion/library/src/components/AccordionHeader/AccordionHeader.test.tsx
+++ b/packages/react-components/react-accordion/library/src/components/AccordionHeader/AccordionHeader.test.tsx
@@ -1,7 +1,7 @@
import { resetIdsForTests } from '@fluentui/react-utilities';
import * as React from 'react';
import { AccordionHeader } from './AccordionHeader';
-import { AccordionHeaderProps } from './AccordionHeader.types';
+import type { AccordionHeaderProps } from './AccordionHeader.types';
import { render, fireEvent, screen } from '@testing-library/react';
import { isConformant } from '../../testing/isConformant';
import { Accordion } from '../Accordion/Accordion';
diff --git a/packages/react-components/react-accordion/library/src/components/AccordionItem/AccordionItem.types.ts b/packages/react-components/react-accordion/library/src/components/AccordionItem/AccordionItem.types.ts
index b995fcc1afd40..8349c06841ea2 100644
--- a/packages/react-components/react-accordion/library/src/components/AccordionItem/AccordionItem.types.ts
+++ b/packages/react-components/react-accordion/library/src/components/AccordionItem/AccordionItem.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { AccordionItemContextValue } from '../../contexts/accordionItem';
+import type { AccordionItemContextValue } from '../../contexts/accordionItem';
export type AccordionItemContextValues = {
accordionItem: AccordionItemContextValue;
diff --git a/packages/react-components/react-accordion/library/src/components/AccordionItem/useAccordionItem.ts b/packages/react-components/react-accordion/library/src/components/AccordionItem/useAccordionItem.ts
index 93aa3c16d2f21..d6c58abd09aba 100644
--- a/packages/react-components/react-accordion/library/src/components/AccordionItem/useAccordionItem.ts
+++ b/packages/react-components/react-accordion/library/src/components/AccordionItem/useAccordionItem.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { slot, useEventCallback } from '@fluentui/react-utilities';
import type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';
import type { AccordionToggleEvent } from '../Accordion/Accordion.types';
diff --git a/packages/react-components/react-accordion/library/src/components/AccordionItem/useAccordionItemContextValues.ts b/packages/react-components/react-accordion/library/src/components/AccordionItem/useAccordionItemContextValues.ts
index c2f2be9ca1c1c..6158b4d457fff 100644
--- a/packages/react-components/react-accordion/library/src/components/AccordionItem/useAccordionItemContextValues.ts
+++ b/packages/react-components/react-accordion/library/src/components/AccordionItem/useAccordionItemContextValues.ts
@@ -2,7 +2,7 @@
import * as React from 'react';
import type { AccordionItemContextValues, AccordionItemState } from './AccordionItem.types';
-import { AccordionItemContextValue } from '../../contexts/accordionItem';
+import type { AccordionItemContextValue } from '../../contexts/accordionItem';
export function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues {
// eslint-disable-next-line @typescript-eslint/no-deprecated
diff --git a/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts b/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts
index fffcb8fab0b15..9eb3cd7bff7b1 100644
--- a/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts
+++ b/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { slot } from '@fluentui/react-utilities';
import { useTabsterAttributes } from '@fluentui/react-tabster';
import { presenceMotionSlot } from '@fluentui/react-motion';
diff --git a/packages/react-components/react-accordion/library/src/contexts/accordion.ts b/packages/react-components/react-accordion/library/src/contexts/accordion.ts
index 4be3ae8e28b28..7a300c24086b8 100644
--- a/packages/react-components/react-accordion/library/src/contexts/accordion.ts
+++ b/packages/react-components/react-accordion/library/src/contexts/accordion.ts
@@ -1,9 +1,9 @@
'use client';
-import { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';
-import type { Context } from '@fluentui/react-context-selector';
-import { AccordionItemValue } from '../AccordionItem';
-import { AccordionToggleData, AccordionToggleEvent } from '../Accordion';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+import type { Context, ContextSelector } from '@fluentui/react-context-selector';
+import type { AccordionItemValue } from '../AccordionItem';
+import type { AccordionToggleData, AccordionToggleEvent } from '../Accordion';
export type AccordionRequestToggleData = { event: AccordionToggleEvent } & Pick<
AccordionToggleData,
diff --git a/packages/react-components/react-accordion/library/src/contexts/accordionItem.ts b/packages/react-components/react-accordion/library/src/contexts/accordionItem.ts
index fb2ee3aef765a..e404df971d973 100644
--- a/packages/react-components/react-accordion/library/src/contexts/accordionItem.ts
+++ b/packages/react-components/react-accordion/library/src/contexts/accordionItem.ts
@@ -1,8 +1,8 @@
'use client';
import * as React from 'react';
-import { AccordionItemValue } from '../AccordionItem';
-import { AccordionToggleEvent } from '../Accordion';
+import type { AccordionItemValue } from '../AccordionItem';
+import type { AccordionToggleEvent } from '../Accordion';
export type AccordionItemContextValue = {
open: boolean;
diff --git a/packages/react-components/react-accordion/stories/src/Accordion/AccordionControlled.stories.tsx b/packages/react-components/react-accordion/stories/src/Accordion/AccordionControlled.stories.tsx
index ff0c877c92e6b..c3755410eae1a 100644
--- a/packages/react-components/react-accordion/stories/src/Accordion/AccordionControlled.stories.tsx
+++ b/packages/react-components/react-accordion/stories/src/Accordion/AccordionControlled.stories.tsx
@@ -1,12 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import {
- Accordion,
- AccordionHeader,
- AccordionItem,
- AccordionPanel,
- AccordionToggleEventHandler,
-} from '@fluentui/react-components';
+import type { JSXElement, AccordionToggleEventHandler } from '@fluentui/react-components';
+import { Accordion, AccordionHeader, AccordionItem, AccordionPanel } from '@fluentui/react-components';
export const Controlled = (): JSXElement => {
const [openItems, setOpenItems] = React.useState(['1']);
diff --git a/packages/react-components/react-accordion/stories/src/Accordion/AccordionExpandIcon.stories.tsx b/packages/react-components/react-accordion/stories/src/Accordion/AccordionExpandIcon.stories.tsx
index f75f3d12fafcb..5709059a39b03 100644
--- a/packages/react-components/react-accordion/stories/src/Accordion/AccordionExpandIcon.stories.tsx
+++ b/packages/react-components/react-accordion/stories/src/Accordion/AccordionExpandIcon.stories.tsx
@@ -1,13 +1,7 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, AccordionToggleEventHandler } from '@fluentui/react-components';
import { Add20Filled, Subtract20Filled } from '@fluentui/react-icons';
-import {
- Accordion,
- AccordionHeader,
- AccordionItem,
- AccordionPanel,
- AccordionToggleEventHandler,
-} from '@fluentui/react-components';
+import { Accordion, AccordionHeader, AccordionItem, AccordionPanel } from '@fluentui/react-components';
export const ExpandIcon = (): JSXElement => {
const [openItem, setOpenItems] = React.useState(0);
diff --git a/packages/react-components/react-aria/library/src/AriaLiveAnnouncer/AriaLiveAnnouncer.tsx b/packages/react-components/react-aria/library/src/AriaLiveAnnouncer/AriaLiveAnnouncer.tsx
index cb6c461a0520d..d55ee6005e491 100644
--- a/packages/react-components/react-aria/library/src/AriaLiveAnnouncer/AriaLiveAnnouncer.tsx
+++ b/packages/react-components/react-aria/library/src/AriaLiveAnnouncer/AriaLiveAnnouncer.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import type { AriaLiveAnnouncerProps } from './AriaLiveAnnouncer.types';
import { renderAriaLiveAnnouncer_unstable } from './renderAriaLiveAnnouncer';
diff --git a/packages/react-components/react-aria/library/src/AriaLiveAnnouncer/AriaLiveAnnouncer.types.ts b/packages/react-components/react-aria/library/src/AriaLiveAnnouncer/AriaLiveAnnouncer.types.ts
index cfcf0c9c3e4a1..c16d48bdb99af 100644
--- a/packages/react-components/react-aria/library/src/AriaLiveAnnouncer/AriaLiveAnnouncer.types.ts
+++ b/packages/react-components/react-aria/library/src/AriaLiveAnnouncer/AriaLiveAnnouncer.types.ts
@@ -1,5 +1,5 @@
import type { AnnounceContextValue } from '@fluentui/react-shared-contexts';
-import * as React from 'react';
+import type * as React from 'react';
export type AriaLiveAnnounceFn = AnnounceContextValue['announce'];
diff --git a/packages/react-components/react-aria/library/src/activedescendant/ActiveDescendantContext.ts b/packages/react-components/react-aria/library/src/activedescendant/ActiveDescendantContext.ts
index e9c1db189220f..4412b422ff64f 100644
--- a/packages/react-components/react-aria/library/src/activedescendant/ActiveDescendantContext.ts
+++ b/packages/react-components/react-aria/library/src/activedescendant/ActiveDescendantContext.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { ActiveDescendantImperativeRef } from './types';
+import type { ActiveDescendantImperativeRef } from './types';
export type ActiveDescendantContextValue = {
controller: ActiveDescendantImperativeRef;
diff --git a/packages/react-components/react-aria/library/src/activedescendant/types.ts b/packages/react-components/react-aria/library/src/activedescendant/types.ts
index 0bee17371d2a9..6522df9151837 100644
--- a/packages/react-components/react-aria/library/src/activedescendant/types.ts
+++ b/packages/react-components/react-aria/library/src/activedescendant/types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
export interface ActiveDescendantImperativeRef {
first: (options?: IteratorOptions) => string | undefined;
diff --git a/packages/react-components/react-aria/library/src/activedescendant/useActivedescendant.test.tsx b/packages/react-components/react-aria/library/src/activedescendant/useActivedescendant.test.tsx
index 6beedc562ef1b..370f5d91136c2 100644
--- a/packages/react-components/react-aria/library/src/activedescendant/useActivedescendant.test.tsx
+++ b/packages/react-components/react-aria/library/src/activedescendant/useActivedescendant.test.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { useActiveDescendant } from './useActiveDescendant';
-import { ActiveDescendantImperativeRef } from './types';
+import type { ActiveDescendantImperativeRef } from './types';
import { render } from '@testing-library/react';
import { ACTIVEDESCENDANT_ATTRIBUTE } from './constants';
diff --git a/packages/react-components/react-aria/library/src/button/types.ts b/packages/react-components/react-aria/library/src/button/types.ts
index e91db0a7eafa6..bea093d8934c1 100644
--- a/packages/react-components/react-aria/library/src/button/types.ts
+++ b/packages/react-components/react-aria/library/src/button/types.ts
@@ -5,7 +5,7 @@ import type {
UnionToIntersection,
JSXIntrinsicElement,
} from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
export type ARIAButtonType = 'button' | 'a' | 'div';
diff --git a/packages/react-components/react-aria/library/src/button/useARIAButtonProps.test.tsx b/packages/react-components/react-aria/library/src/button/useARIAButtonProps.test.tsx
index be5cc2fc9ac2f..6d379ebe4357b 100644
--- a/packages/react-components/react-aria/library/src/button/useARIAButtonProps.test.tsx
+++ b/packages/react-components/react-aria/library/src/button/useARIAButtonProps.test.tsx
@@ -4,8 +4,9 @@
import { useARIAButtonProps } from './useARIAButtonProps';
import { renderHook } from '@testing-library/react-hooks';
import { fireEvent, render } from '@testing-library/react';
-import { Slot, ComponentProps, assertSlots, ComponentState, slot } from '@fluentui/react-utilities';
-import { ARIAButtonProps, ARIAButtonSlotProps } from './types';
+import type { Slot, ComponentProps, ComponentState } from '@fluentui/react-utilities';
+import { assertSlots, slot } from '@fluentui/react-utilities';
+import type { ARIAButtonProps, ARIAButtonSlotProps } from './types';
type TestButtonSlots = { root: Slot };
diff --git a/packages/react-components/react-aria/library/src/button/useARIAButtonProps.ts b/packages/react-components/react-aria/library/src/button/useARIAButtonProps.ts
index c88e521531f18..01ea8d173f474 100644
--- a/packages/react-components/react-aria/library/src/button/useARIAButtonProps.ts
+++ b/packages/react-components/react-aria/library/src/button/useARIAButtonProps.ts
@@ -2,7 +2,7 @@
import { Enter, Space } from '@fluentui/keyboard-keys';
import { useEventCallback } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
import type { ARIAButtonElementIntersection, ARIAButtonProps, ARIAButtonResultProps, ARIAButtonType } from './types';
/**
diff --git a/packages/react-components/react-aria/library/src/useTypingAnnounce/useTypingAnnounce.ts b/packages/react-components/react-aria/library/src/useTypingAnnounce/useTypingAnnounce.ts
index a36f8738b0609..a2d9fe5d14cd9 100644
--- a/packages/react-components/react-aria/library/src/useTypingAnnounce/useTypingAnnounce.ts
+++ b/packages/react-components/react-aria/library/src/useTypingAnnounce/useTypingAnnounce.ts
@@ -4,7 +4,7 @@ import * as React from 'react';
import { useTimeout } from '@fluentui/react-utilities';
import { useAnnounce, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import type { AnnounceOptions } from '@fluentui/react-shared-contexts';
-import { AriaLiveAnnounceFn } from '../AriaLiveAnnouncer/AriaLiveAnnouncer.types';
+import type { AriaLiveAnnounceFn } from '../AriaLiveAnnouncer/AriaLiveAnnouncer.types';
type Message = {
message: string;
diff --git a/packages/react-components/react-aria/stories/src/UseTypingAnnounce/UseTypingAnnounceContentEditable.stories.tsx b/packages/react-components/react-aria/stories/src/UseTypingAnnounce/UseTypingAnnounceContentEditable.stories.tsx
index b31682c29d187..35cc48d9bdf93 100644
--- a/packages/react-components/react-aria/stories/src/UseTypingAnnounce/UseTypingAnnounceContentEditable.stories.tsx
+++ b/packages/react-components/react-aria/stories/src/UseTypingAnnounce/UseTypingAnnounceContentEditable.stories.tsx
@@ -1,13 +1,6 @@
import * as React from 'react';
-import {
- AriaLiveAnnouncer,
- Field,
- JSXElement,
- makeStyles,
- tokens,
- useId,
- useTypingAnnounce,
-} from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
+import { AriaLiveAnnouncer, Field, makeStyles, tokens, useId, useTypingAnnounce } from '@fluentui/react-components';
const useStyles = makeStyles({
contentEditable: {
diff --git a/packages/react-components/react-avatar/library/etc/react-avatar.api.md b/packages/react-components/react-avatar/library/etc/react-avatar.api.md
index 1bc90f6b36f92..7376bfa5b60ee 100644
--- a/packages/react-components/react-avatar/library/etc/react-avatar.api.md
+++ b/packages/react-components/react-avatar/library/etc/react-avatar.api.md
@@ -6,13 +6,13 @@
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
-import { ContextSelector } from '@fluentui/react-context-selector';
+import type { ContextSelector } from '@fluentui/react-context-selector';
import { FC } from 'react';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import type { PopoverProps } from '@fluentui/react-popover';
import type { PopoverSurface } from '@fluentui/react-popover';
-import { PresenceBadge } from '@fluentui/react-badge';
+import type { PresenceBadge } from '@fluentui/react-badge';
import { Provider } from 'react';
import { ProviderProps } from 'react';
import * as React_2 from 'react';
diff --git a/packages/react-components/react-avatar/library/src/components/Avatar/Avatar.types.ts b/packages/react-components/react-avatar/library/src/components/Avatar/Avatar.types.ts
index e7abd99e17b17..7fc91f0f97c71 100644
--- a/packages/react-components/react-avatar/library/src/components/Avatar/Avatar.types.ts
+++ b/packages/react-components/react-avatar/library/src/components/Avatar/Avatar.types.ts
@@ -1,4 +1,4 @@
-import { PresenceBadge } from '@fluentui/react-badge';
+import type { PresenceBadge } from '@fluentui/react-badge';
import type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';
/**
diff --git a/packages/react-components/react-avatar/library/src/components/AvatarGroup/useAvatarGroup.tsx b/packages/react-components/react-avatar/library/src/components/AvatarGroup/useAvatarGroup.tsx
index 562e2750d76cf..72a2819daa05d 100644
--- a/packages/react-components/react-avatar/library/src/components/AvatarGroup/useAvatarGroup.tsx
+++ b/packages/react-components/react-avatar/library/src/components/AvatarGroup/useAvatarGroup.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type {
AvatarGroupBaseProps,
diff --git a/packages/react-components/react-avatar/library/src/components/AvatarGroup/useAvatarGroupContextValues.ts b/packages/react-components/react-avatar/library/src/components/AvatarGroup/useAvatarGroupContextValues.ts
index 21b6ada8a0886..62f19043ed27f 100644
--- a/packages/react-components/react-avatar/library/src/components/AvatarGroup/useAvatarGroupContextValues.ts
+++ b/packages/react-components/react-avatar/library/src/components/AvatarGroup/useAvatarGroupContextValues.ts
@@ -1,4 +1,4 @@
-import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';
+import type { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';
export const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {
const { layout, size } = state;
diff --git a/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/AvatarGroupItem.types.ts b/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/AvatarGroupItem.types.ts
index 119a04ac733e3..9dc05705d4965 100644
--- a/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/AvatarGroupItem.types.ts
+++ b/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/AvatarGroupItem.types.ts
@@ -1,4 +1,4 @@
-import { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';
+import type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';
import type { Avatar, AvatarSize } from '../../Avatar';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/useAvatarGroupItem.ts b/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/useAvatarGroupItem.ts
index 51a8fa40da5bc..62a829ce7b679 100644
--- a/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/useAvatarGroupItem.ts
+++ b/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/useAvatarGroupItem.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { Avatar } from '../Avatar/Avatar';
import { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';
import { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';
diff --git a/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.test.tsx b/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.test.tsx
index 62b97cb95dedc..d318f7f812089 100644
--- a/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.test.tsx
+++ b/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.test.tsx
@@ -3,7 +3,8 @@ import { AvatarGroupItem } from '../AvatarGroupItem/AvatarGroupItem';
import { AvatarGroupPopover } from './AvatarGroupPopover';
import { avatarGroupPopoverClassNames } from './useAvatarGroupPopoverStyles.styles';
import { isConformant } from '../../testing/isConformant';
-import { render, RenderResult, screen, fireEvent } from '@testing-library/react';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
// testing-library's queryByRole function doesn't look inside portals
function queryByRoleDialog(result: RenderResult) {
diff --git a/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx b/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx
index 464f755e4da72..926e2463ae468 100644
--- a/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx
+++ b/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';
import { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts b/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts
index 4e7763bee432a..02685c62b6f2e 100644
--- a/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts
+++ b/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { AvatarSize } from '../Avatar/Avatar.types';
import type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx b/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx
index 39556e459e210..a3bd5209683d1 100644
--- a/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx
+++ b/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx
@@ -1,7 +1,7 @@
/** @jsxRuntime automatic */
/** @jsxImportSource @fluentui/react-jsx-runtime */
import { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';
-import { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';
+import type { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx b/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx
index f8fa23c34d4c4..ee89c3aedb432 100644
--- a/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx
+++ b/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx
@@ -5,13 +5,8 @@ import { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContex
import { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';
import { useControllableState, slot } from '@fluentui/react-utilities';
import { MoreHorizontalRegular } from '@fluentui/react-icons';
-import {
- OnOpenChangeData,
- OpenPopoverEvents,
- Popover,
- type PopoverProps,
- PopoverSurface,
-} from '@fluentui/react-popover';
+import type { OnOpenChangeData, OpenPopoverEvents } from '@fluentui/react-popover';
+import { Popover, type PopoverProps, PopoverSurface } from '@fluentui/react-popover';
import type {
AvatarGroupPopoverBaseProps,
AvatarGroupPopoverBaseState,
diff --git a/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts b/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts
index 9c0f95360031b..b7003638ed2c3 100644
--- a/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts
+++ b/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts
@@ -1,5 +1,5 @@
-import { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';
-import { AvatarGroupPopoverState } from './AvatarGroupPopover.types';
+import type { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';
+import type { AvatarGroupPopoverState } from './AvatarGroupPopover.types';
export const useAvatarGroupPopoverContextValues_unstable = (
state: AvatarGroupPopoverState,
diff --git a/packages/react-components/react-avatar/library/src/contexts/AvatarGroupContext.ts b/packages/react-components/react-avatar/library/src/contexts/AvatarGroupContext.ts
index 19574140e7972..311a4d19224c2 100644
--- a/packages/react-components/react-avatar/library/src/contexts/AvatarGroupContext.ts
+++ b/packages/react-components/react-avatar/library/src/contexts/AvatarGroupContext.ts
@@ -1,7 +1,7 @@
'use client';
-import { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';
-import type { Context } from '@fluentui/react-context-selector';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+import type { Context, ContextSelector } from '@fluentui/react-context-selector';
import type { AvatarGroupContextValue } from '../AvatarGroup';
/**
diff --git a/packages/react-components/react-avatar/stories/src/Avatar/index.stories.tsx b/packages/react-components/react-avatar/stories/src/Avatar/index.stories.tsx
index c9a6896b11ad8..7ae48ea4e6565 100644
--- a/packages/react-components/react-avatar/stories/src/Avatar/index.stories.tsx
+++ b/packages/react-components/react-avatar/stories/src/Avatar/index.stories.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { Avatar } from '@fluentui/react-components';
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
export { Default } from './AvatarDefault.stories';
export { Name } from './AvatarName.stories';
diff --git a/packages/react-components/react-badge/library/src/components/Badge/useBadge.ts b/packages/react-components/react-badge/library/src/components/Badge/useBadge.ts
index 53727729a233b..962456097cbce 100644
--- a/packages/react-components/react-badge/library/src/components/Badge/useBadge.ts
+++ b/packages/react-components/react-badge/library/src/components/Badge/useBadge.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { BadgeBaseProps, BadgeBaseState, BadgeProps, BadgeState } from './Badge.types';
diff --git a/packages/react-components/react-badge/library/src/components/CounterBadge/useCounterBadge.ts b/packages/react-components/react-badge/library/src/components/CounterBadge/useCounterBadge.ts
index bd2dc2180ed14..9289a3f153dd3 100644
--- a/packages/react-components/react-badge/library/src/components/CounterBadge/useCounterBadge.ts
+++ b/packages/react-components/react-badge/library/src/components/CounterBadge/useCounterBadge.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useBadgeBase_unstable } from '../Badge/index';
import type {
CounterBadgeBaseProps,
diff --git a/packages/react-components/react-badge/library/src/components/PresenceBadge/presenceIcons.ts b/packages/react-components/react-badge/library/src/components/PresenceBadge/presenceIcons.ts
index b6f7ce912cbf2..f1a37817b7578 100644
--- a/packages/react-components/react-badge/library/src/components/PresenceBadge/presenceIcons.ts
+++ b/packages/react-components/react-badge/library/src/components/PresenceBadge/presenceIcons.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import {
PresenceAvailable10Regular,
PresenceAvailable12Regular,
diff --git a/packages/react-components/react-badge/stories/src/Badge/BadgeColorVsAppearance.stories.tsx b/packages/react-components/react-badge/stories/src/Badge/BadgeColorVsAppearance.stories.tsx
index 9f6d4b69cca96..146a637b8ca8b 100644
--- a/packages/react-components/react-badge/stories/src/Badge/BadgeColorVsAppearance.stories.tsx
+++ b/packages/react-components/react-badge/stories/src/Badge/BadgeColorVsAppearance.stories.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, BadgeProps } from '@fluentui/react-components';
-import { Badge, makeStyles, tokens, BadgeProps } from '@fluentui/react-components';
+import { Badge, makeStyles, tokens } from '@fluentui/react-components';
import { ClipboardPasteRegular as PasteIcon } from '@fluentui/react-icons';
const useStyles = makeStyles({
diff --git a/packages/react-components/react-badge/stories/src/Badge/index.stories.tsx b/packages/react-components/react-badge/stories/src/Badge/index.stories.tsx
index 24b18b099d0d4..05c86e9aba2b5 100644
--- a/packages/react-components/react-badge/stories/src/Badge/index.stories.tsx
+++ b/packages/react-components/react-badge/stories/src/Badge/index.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { Badge } from '@fluentui/react-components';
import descriptionMd from './BadgeDescription.md';
import bestPracticesMd from './BadgeBestPractices.md';
diff --git a/packages/react-components/react-badge/stories/src/CounterBadge/index.stories.tsx b/packages/react-components/react-badge/stories/src/CounterBadge/index.stories.tsx
index 98bcd70efc068..aa7479ac64643 100644
--- a/packages/react-components/react-badge/stories/src/CounterBadge/index.stories.tsx
+++ b/packages/react-components/react-badge/stories/src/CounterBadge/index.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { CounterBadge } from '@fluentui/react-components';
import descriptionMd from './CounterBadgeDescription.md';
import bestPracticesMd from './CounterBadgeBestPractices.md';
diff --git a/packages/react-components/react-badge/stories/src/PresenceBadge/index.stories.tsx b/packages/react-components/react-badge/stories/src/PresenceBadge/index.stories.tsx
index 80a4fe33a7acd..402f43fddfc83 100644
--- a/packages/react-components/react-badge/stories/src/PresenceBadge/index.stories.tsx
+++ b/packages/react-components/react-badge/stories/src/PresenceBadge/index.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { PresenceBadge } from '@fluentui/react-components';
import descriptionMd from './PresenceBadgeDescription.md';
import bestPracticesMd from './PresenceBadgeBestPractices.md';
diff --git a/packages/react-components/react-breadcrumb/library/etc/react-breadcrumb.api.md b/packages/react-components/react-breadcrumb/library/etc/react-breadcrumb.api.md
index db7fefeeca654..21b597d5eb78d 100644
--- a/packages/react-components/react-breadcrumb/library/etc/react-breadcrumb.api.md
+++ b/packages/react-components/react-breadcrumb/library/etc/react-breadcrumb.api.md
@@ -4,9 +4,9 @@
```ts
-import { ButtonProps } from '@fluentui/react-button';
-import { ButtonSlots } from '@fluentui/react-button';
-import { ButtonState } from '@fluentui/react-button';
+import type { ButtonProps } from '@fluentui/react-button';
+import type { ButtonSlots } from '@fluentui/react-button';
+import type { ButtonState } from '@fluentui/react-button';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -14,7 +14,7 @@ import type { JSXElement } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
-import { TabsterDOMAttribute } from '@fluentui/react-tabster';
+import type { TabsterDOMAttribute } from '@fluentui/react-tabster';
// @public
export const Breadcrumb: ForwardRefComponent;
diff --git a/packages/react-components/react-breadcrumb/library/src/components/Breadcrumb/BreadcrumbContext.ts b/packages/react-components/react-breadcrumb/library/src/components/Breadcrumb/BreadcrumbContext.ts
index b6c5f85409ae6..ea1b23456afca 100644
--- a/packages/react-components/react-breadcrumb/library/src/components/Breadcrumb/BreadcrumbContext.ts
+++ b/packages/react-components/react-breadcrumb/library/src/components/Breadcrumb/BreadcrumbContext.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { BreadcrumbContextValues } from './Breadcrumb.types';
+import type { BreadcrumbContextValues } from './Breadcrumb.types';
const BreadcrumbContext = React.createContext(undefined);
diff --git a/packages/react-components/react-breadcrumb/library/src/components/Breadcrumb/useBreadcrumb.ts b/packages/react-components/react-breadcrumb/library/src/components/Breadcrumb/useBreadcrumb.ts
index ecfce4fcfaf86..922db8eac7782 100644
--- a/packages/react-components/react-breadcrumb/library/src/components/Breadcrumb/useBreadcrumb.ts
+++ b/packages/react-components/react-breadcrumb/library/src/components/Breadcrumb/useBreadcrumb.ts
@@ -1,9 +1,10 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { BreadcrumbBaseProps, BreadcrumbBaseState, BreadcrumbProps, BreadcrumbState } from './Breadcrumb.types';
-import { TabsterDOMAttribute, useArrowNavigationGroup } from '@fluentui/react-tabster';
+import type { TabsterDOMAttribute } from '@fluentui/react-tabster';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
/**
* Create the state required to render Breadcrumb.
diff --git a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx
index 214368e3368ca..6e39e8274ceac 100644
--- a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx
+++ b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { render } from '@testing-library/react';
import { BreadcrumbButton } from './BreadcrumbButton';
-import { BreadcrumbButtonProps } from './BreadcrumbButton.types';
+import type { BreadcrumbButtonProps } from './BreadcrumbButton.types';
import { isConformant } from '../../testing/isConformant';
import { breadcrumbButtonClassNames } from './useBreadcrumbButtonStyles.styles';
import { ArrowRight16Filled } from '@fluentui/react-icons';
diff --git a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.types.ts b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.types.ts
index c9024e4d5fcfd..a9220b965983e 100644
--- a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.types.ts
+++ b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.types.ts
@@ -1,6 +1,6 @@
import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
-import { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';
-import { BreadcrumbProps } from '../Breadcrumb/Breadcrumb.types';
+import type { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';
+import type { BreadcrumbProps } from '../Breadcrumb/Breadcrumb.types';
export type BreadcrumbButtonSlots = ButtonSlots;
diff --git a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/useBreadcrumbButton.ts b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/useBreadcrumbButton.ts
index 4c76507b87593..5935f389ded72 100644
--- a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/useBreadcrumbButton.ts
+++ b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/useBreadcrumbButton.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import type { ARIAButtonProps } from '@fluentui/react-aria';
import { useButtonBase_unstable } from '@fluentui/react-button';
import type { ButtonBaseProps } from '@fluentui/react-button';
diff --git a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx
index 64e55a1b116b9..aba461e228307 100644
--- a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx
+++ b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { render } from '@testing-library/react';
import { BreadcrumbItem } from './BreadcrumbItem';
-import { BreadcrumbItemProps } from './BreadcrumbItem.types';
+import type { BreadcrumbItemProps } from './BreadcrumbItem.types';
import { isConformant } from '../../testing/isConformant';
import { breadcrumbItemClassNames } from './useBreadcrumbItemStyles.styles';
diff --git a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbItem/useBreadcrumbItem.ts b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbItem/useBreadcrumbItem.ts
index 420d94b803d9a..d1ce15d2659de 100644
--- a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbItem/useBreadcrumbItem.ts
+++ b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbItem/useBreadcrumbItem.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type {
BreadcrumbItemBaseProps,
diff --git a/packages/react-components/react-breadcrumb/library/src/utils/partitionBreadcrumbItems.test.ts b/packages/react-components/react-breadcrumb/library/src/utils/partitionBreadcrumbItems.test.ts
index 9f7d5dfc480b3..bd9712eb1af6c 100644
--- a/packages/react-components/react-breadcrumb/library/src/utils/partitionBreadcrumbItems.test.ts
+++ b/packages/react-components/react-breadcrumb/library/src/utils/partitionBreadcrumbItems.test.ts
@@ -1,4 +1,5 @@
-import { partitionBreadcrumbItems, PartitionBreadcrumbItemsOptions } from './partitionBreadcrumbItems';
+import type { PartitionBreadcrumbItemsOptions } from './partitionBreadcrumbItems';
+import { partitionBreadcrumbItems } from './partitionBreadcrumbItems';
type TestData = [PartitionBreadcrumbItemsOptions, ReturnType][];
diff --git a/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbWithOverflow.stories.tsx b/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbWithOverflow.stories.tsx
index bd1ad130eadc4..adb61a2a42fd9 100644
--- a/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbWithOverflow.stories.tsx
+++ b/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbWithOverflow.stories.tsx
@@ -1,12 +1,11 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, ButtonProps } from '@fluentui/react-components';
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbButton,
BreadcrumbDivider,
partitionBreadcrumbItems,
- ButtonProps,
makeStyles,
tokens,
Button,
diff --git a/packages/react-components/react-button/library/etc/react-button.api.md b/packages/react-components/react-button/library/etc/react-button.api.md
index f19f122c6c2f9..3b714a045f72a 100644
--- a/packages/react-components/react-button/library/etc/react-button.api.md
+++ b/packages/react-components/react-button/library/etc/react-button.api.md
@@ -8,7 +8,7 @@ import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { DistributiveOmit } from '@fluentui/react-utilities';
-import { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-button/library/src/components/Button/Button.test.tsx b/packages/react-components/react-button/library/src/components/Button/Button.test.tsx
index 09d3043343d4c..cb61c038c8e24 100644
--- a/packages/react-components/react-button/library/src/components/Button/Button.test.tsx
+++ b/packages/react-components/react-button/library/src/components/Button/Button.test.tsx
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
import { buttonAccessibilityBehaviorDefinition, validateBehavior, ComponentTestFacade } from '@fluentui/a11y-testing';
import { isConformant } from '../../testing/isConformant';
import { Button } from './Button';
-import { ButtonProps } from './Button.types';
+import type { ButtonProps } from './Button.types';
describe('Button', () => {
isConformant({
diff --git a/packages/react-components/react-button/library/src/components/Button/useButton.ts b/packages/react-components/react-button/library/src/components/Button/useButton.ts
index 2ead0d7ea4d39..aef8e86c14e6c 100644
--- a/packages/react-components/react-button/library/src/components/Button/useButton.ts
+++ b/packages/react-components/react-button/library/src/components/Button/useButton.ts
@@ -1,8 +1,9 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useButtonContext } from '../../contexts/ButtonContext';
-import { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import { useARIAButtonProps } from '@fluentui/react-aria';
import { slot } from '@fluentui/react-utilities';
import type { ButtonBaseProps, ButtonBaseState, ButtonProps, ButtonState } from './Button.types';
diff --git a/packages/react-components/react-button/library/src/components/CompoundButton/CompoundButton.test.tsx b/packages/react-components/react-button/library/src/components/CompoundButton/CompoundButton.test.tsx
index f5eb8d6075e08..caf7e70824336 100644
--- a/packages/react-components/react-button/library/src/components/CompoundButton/CompoundButton.test.tsx
+++ b/packages/react-components/react-button/library/src/components/CompoundButton/CompoundButton.test.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { isConformant } from '../../testing/isConformant';
import { CompoundButton } from './CompoundButton';
-import { CompoundButtonProps } from './CompoundButton.types';
+import type { CompoundButtonProps } from './CompoundButton.types';
describe('CompoundButton', () => {
isConformant({
diff --git a/packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButton.ts b/packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButton.ts
index 624710b7a7ea4..f6e8827671c57 100644
--- a/packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButton.ts
+++ b/packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButton.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { slot } from '@fluentui/react-utilities';
import { useButton_unstable } from '../Button/index';
import type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';
diff --git a/packages/react-components/react-button/library/src/components/MenuButton/MenuButton.test.tsx b/packages/react-components/react-button/library/src/components/MenuButton/MenuButton.test.tsx
index abbf2801526fe..b79392348101f 100644
--- a/packages/react-components/react-button/library/src/components/MenuButton/MenuButton.test.tsx
+++ b/packages/react-components/react-button/library/src/components/MenuButton/MenuButton.test.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { isConformant } from '../../testing/isConformant';
import { MenuButton } from './MenuButton';
-import { MenuButtonProps } from './MenuButton.types';
+import type { MenuButtonProps } from './MenuButton.types';
import { menuButtonClassNames } from './useMenuButtonStyles.styles';
describe('MenuButton', () => {
diff --git a/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.test.tsx b/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.test.tsx
index a825cb7ea3b7c..0b0401b59ef0d 100644
--- a/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.test.tsx
+++ b/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.test.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { isConformant } from '../../testing/isConformant';
import { SplitButton } from './SplitButton';
-import { SplitButtonProps } from './SplitButton.types';
+import type { SplitButtonProps } from './SplitButton.types';
describe('SplitButton', () => {
isConformant({
diff --git a/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.tsx b/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.tsx
index eef8aecfc60de..6f9824b58e345 100644
--- a/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.tsx
+++ b/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.tsx
@@ -5,7 +5,7 @@ import { renderSplitButton_unstable } from './renderSplitButton';
import { useSplitButton_unstable } from './useSplitButton';
import { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';
import type { SplitButtonProps } from './SplitButton.types';
-import { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
diff --git a/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.types.ts b/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.types.ts
index 6d67668ddef3b..3211fc28a4b02 100644
--- a/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.types.ts
+++ b/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.types.ts
@@ -1,5 +1,5 @@
-import { Button } from '../Button/Button';
-import { MenuButton } from '../MenuButton/MenuButton';
+import type { Button } from '../Button/Button';
+import type { MenuButton } from '../MenuButton/MenuButton';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type { ButtonProps, ButtonState } from '../Button/Button.types';
import type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';
diff --git a/packages/react-components/react-button/library/src/components/SplitButton/useSplitButton.ts b/packages/react-components/react-button/library/src/components/SplitButton/useSplitButton.ts
index cea7ceaf33492..0f626da9ec231 100644
--- a/packages/react-components/react-button/library/src/components/SplitButton/useSplitButton.ts
+++ b/packages/react-components/react-button/library/src/components/SplitButton/useSplitButton.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { useId, slot } from '@fluentui/react-utilities';
import { Button } from '../Button/Button';
import { MenuButton } from '../MenuButton/MenuButton';
diff --git a/packages/react-components/react-button/library/src/components/ToggleButton/ToggleButton.test.tsx b/packages/react-components/react-button/library/src/components/ToggleButton/ToggleButton.test.tsx
index 99a1921f97d46..88ba5d19f6d48 100644
--- a/packages/react-components/react-button/library/src/components/ToggleButton/ToggleButton.test.tsx
+++ b/packages/react-components/react-button/library/src/components/ToggleButton/ToggleButton.test.tsx
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
import { validateBehavior, ComponentTestFacade, toggleButtonBehaviorDefinition } from '@fluentui/a11y-testing';
import { isConformant } from '../../testing/isConformant';
import { ToggleButton } from './ToggleButton';
-import { ToggleButtonProps } from './ToggleButton.types';
+import type { ToggleButtonProps } from './ToggleButton.types';
describe('ToggleButton', () => {
beforeAll(() => {
diff --git a/packages/react-components/react-button/library/src/components/ToggleButton/useToggleButton.ts b/packages/react-components/react-button/library/src/components/ToggleButton/useToggleButton.ts
index c9e718974631f..900ea1cbcab2a 100644
--- a/packages/react-components/react-button/library/src/components/ToggleButton/useToggleButton.ts
+++ b/packages/react-components/react-button/library/src/components/ToggleButton/useToggleButton.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useToggleState } from '../../utils/useToggleState';
import { useButton_unstable, useButtonBase_unstable } from '../Button/useButton';
import type { ToggleButtonBaseState, ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';
diff --git a/packages/react-components/react-button/library/src/contexts/ButtonContext.ts b/packages/react-components/react-button/library/src/contexts/ButtonContext.ts
index 64717d02f663e..bb12024ad00ee 100644
--- a/packages/react-components/react-button/library/src/contexts/ButtonContext.ts
+++ b/packages/react-components/react-button/library/src/contexts/ButtonContext.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { ButtonSize } from '../components/Button/Button.types';
+import type { ButtonSize } from '../components/Button/Button.types';
const buttonContext = React.createContext(undefined);
diff --git a/packages/react-components/react-button/library/src/utils/useToggleState.test.ts b/packages/react-components/react-button/library/src/utils/useToggleState.test.ts
index 3bfb0b18fbbf7..a5e98dab27f66 100644
--- a/packages/react-components/react-button/library/src/utils/useToggleState.test.ts
+++ b/packages/react-components/react-button/library/src/utils/useToggleState.test.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { act, renderHook } from '@testing-library/react-hooks';
import { useToggleState } from './useToggleState';
diff --git a/packages/react-components/react-button/stories/src/Button/index.stories.tsx b/packages/react-components/react-button/stories/src/Button/index.stories.tsx
index f8e20a443950b..3775fba30cedc 100644
--- a/packages/react-components/react-button/stories/src/Button/index.stories.tsx
+++ b/packages/react-components/react-button/stories/src/Button/index.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { Button } from '@fluentui/react-components';
import descriptionMd from './ButtonDescription.md';
import bestPracticesMd from './ButtonBestPractices.md';
diff --git a/packages/react-components/react-button/stories/src/CompoundButton/index.stories.tsx b/packages/react-components/react-button/stories/src/CompoundButton/index.stories.tsx
index 150d9b9098d08..ac477265bd43a 100644
--- a/packages/react-components/react-button/stories/src/CompoundButton/index.stories.tsx
+++ b/packages/react-components/react-button/stories/src/CompoundButton/index.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { CompoundButton } from '@fluentui/react-components';
import descriptionMd from './CompoundButtonDescription.md';
import bestPracticesMd from '../Button/ButtonBestPractices.md';
diff --git a/packages/react-components/react-button/stories/src/MenuButton/index.stories.tsx b/packages/react-components/react-button/stories/src/MenuButton/index.stories.tsx
index 22ddc9977ff3f..d2a97f5f52913 100644
--- a/packages/react-components/react-button/stories/src/MenuButton/index.stories.tsx
+++ b/packages/react-components/react-button/stories/src/MenuButton/index.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { MenuButton } from '@fluentui/react-components';
import descriptionMd from './MenuButtonDescription.md';
import bestPracticesMd from '../Button/ButtonBestPractices.md';
diff --git a/packages/react-components/react-button/stories/src/SplitButton/index.stories.tsx b/packages/react-components/react-button/stories/src/SplitButton/index.stories.tsx
index 35ae2e9bfc76f..19f2076507a6c 100644
--- a/packages/react-components/react-button/stories/src/SplitButton/index.stories.tsx
+++ b/packages/react-components/react-button/stories/src/SplitButton/index.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { SplitButton } from '@fluentui/react-components';
import descriptionMd from './SplitButtonDescription.md';
import bestPracticesMd from '../Button/ButtonBestPractices.md';
diff --git a/packages/react-components/react-button/stories/src/ToggleButton/index.stories.tsx b/packages/react-components/react-button/stories/src/ToggleButton/index.stories.tsx
index d04c701a2368d..3dd3a89368416 100644
--- a/packages/react-components/react-button/stories/src/ToggleButton/index.stories.tsx
+++ b/packages/react-components/react-button/stories/src/ToggleButton/index.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { ToggleButton } from '@fluentui/react-components';
import descriptionMd from './ToggleButtonDescription.md';
import bestPracticesMd from '../Button/ButtonBestPractices.md';
diff --git a/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.types.ts b/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.types.ts
index 5a4b96dba3a19..d9f3e02e44bd5 100644
--- a/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.types.ts
+++ b/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { CalendarStrings, DateFormatting, DateRangeType, DayOfWeek, FirstWeekOfYear } from '../../utils';
import type { CalendarDayProps } from '../CalendarDay/CalendarDay.types';
import type { CalendarMonthProps } from '../CalendarMonth/CalendarMonth.types';
diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarDay/CalendarDay.types.ts b/packages/react-components/react-calendar-compat/library/src/components/CalendarDay/CalendarDay.types.ts
index 04047be5e5a31..07337fe38d311 100644
--- a/packages/react-components/react-calendar-compat/library/src/components/CalendarDay/CalendarDay.types.ts
+++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarDay/CalendarDay.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { CalendarStrings, DateFormatting } from '../../utils';
import type { CalendarDayGridProps, CalendarDayGridStyleProps } from '../CalendarDayGrid/CalendarDayGrid.types';
import type { CalendarNavigationIcons } from '../Calendar/calendarNavigationIcons';
diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.tsx b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.tsx
index 9fe504b3cedff..93207942ecccc 100644
--- a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.tsx
+++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.tsx
@@ -3,14 +3,15 @@
import * as React from 'react';
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
import { useId } from '@fluentui/react-utilities';
-import { getBoundedDateRange, getDateRangeArray, isRestrictedDate, DateRangeType, DayOfWeek } from '../../utils';
+import { getBoundedDateRange, getDateRangeArray, isRestrictedDate, DateRangeType } from '../../utils';
import { useCalendarDayGridStyles_unstable } from './useCalendarDayGridStyles.styles';
import { CalendarMonthHeaderRow } from './CalendarMonthHeaderRow';
import { CalendarGridRow } from './CalendarGridRow';
import { useWeeks } from './useWeeks';
-import { useWeekCornerStyles, WeekCorners } from './useWeekCornerStyles.styles';
+import type { WeekCorners } from './useWeekCornerStyles.styles';
+import { useWeekCornerStyles } from './useWeekCornerStyles.styles';
import { mergeClasses } from '@griffel/react';
-import type { Day } from '../../utils';
+import type { Day, DayOfWeek } from '../../utils';
import type { CalendarDayGridProps } from './CalendarDayGrid.types';
export interface DayInfo extends Day {
diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.types.ts b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.types.ts
index 1ed85dea3c039..6caa1bf2e45d7 100644
--- a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.types.ts
+++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.types.ts
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { AnimationDirection } from '../Calendar/Calendar.types';
-import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utils';
+import type * as React from 'react';
+import type { AnimationDirection } from '../Calendar/Calendar.types';
+import type { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utils';
import type { CalendarStrings, DateFormatting, DayGridOptions } from '../../utils';
/**
diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/useWeekCornerStyles.styles.ts b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/useWeekCornerStyles.styles.ts
index bbb109ebedf01..1460db4452404 100644
--- a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/useWeekCornerStyles.styles.ts
+++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/useWeekCornerStyles.styles.ts
@@ -4,8 +4,8 @@ import { useFluent_unstable } from '@fluentui/react-shared-contexts';
import { mergeClasses } from '@griffel/react';
import { DateRangeType } from '../../utils/constants';
import { getDateRangeArray } from '../../utils/index';
-import { DayInfo } from './CalendarDayGrid';
-import { CalendarDayGridProps } from './CalendarDayGrid.types';
+import type { DayInfo } from './CalendarDayGrid';
+import type { CalendarDayGridProps } from './CalendarDayGrid.types';
/**
* @internal
diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/useWeeks.ts b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/useWeeks.ts
index 6424178b4394b..24b6763fc52de 100644
--- a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/useWeeks.ts
+++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/useWeeks.ts
@@ -2,8 +2,8 @@
import * as React from 'react';
import { compareDates, DAYS_IN_WEEK, getDayGrid } from '../../utils/index';
-import { DayInfo } from './CalendarDayGrid';
-import { CalendarDayGridProps } from './CalendarDayGrid.types';
+import type { DayInfo } from './CalendarDayGrid';
+import type { CalendarDayGridProps } from './CalendarDayGrid.types';
/**
* @internal
diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarMonth/CalendarMonth.types.ts b/packages/react-components/react-calendar-compat/library/src/components/CalendarMonth/CalendarMonth.types.ts
index 65f2c77428704..f8730d5577974 100644
--- a/packages/react-components/react-calendar-compat/library/src/components/CalendarMonth/CalendarMonth.types.ts
+++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarMonth/CalendarMonth.types.ts
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { AnimationDirection } from '../Calendar/Calendar.types';
+import type * as React from 'react';
+import type { AnimationDirection } from '../Calendar/Calendar.types';
import type { CalendarNavigationIcons } from '../Calendar/calendarNavigationIcons';
import type { CalendarStrings, DateFormatting } from '../../utils';
import type { CalendarPickerStyleProps, CalendarPickerStyles } from '../CalendarPicker/CalendarPicker.types';
diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarPicker/CalendarPicker.types.ts b/packages/react-components/react-calendar-compat/library/src/components/CalendarPicker/CalendarPicker.types.ts
index de35513ce8763..e2fb82b6deccb 100644
--- a/packages/react-components/react-calendar-compat/library/src/components/CalendarPicker/CalendarPicker.types.ts
+++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarPicker/CalendarPicker.types.ts
@@ -1,4 +1,4 @@
-import { AnimationDirection } from '../Calendar/Calendar.types';
+import type { AnimationDirection } from '../Calendar/Calendar.types';
/**
* @internal
diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarYear/CalendarYear.types.ts b/packages/react-components/react-calendar-compat/library/src/components/CalendarYear/CalendarYear.types.ts
index 52f2a7a4fee8e..f4f1a9f636fc3 100644
--- a/packages/react-components/react-calendar-compat/library/src/components/CalendarYear/CalendarYear.types.ts
+++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarYear/CalendarYear.types.ts
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { AnimationDirection } from '../Calendar/Calendar.types';
+import type * as React from 'react';
+import type { AnimationDirection } from '../Calendar/Calendar.types';
import type { CalendarNavigationIcons } from '../Calendar/calendarNavigationIcons';
import type { CalendarPickerStyleProps, CalendarPickerStyles } from '../CalendarPicker/CalendarPicker.types';
diff --git a/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/dateGrid.types.ts b/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/dateGrid.types.ts
index 69db4d4672c2a..4f9993313aa83 100644
--- a/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/dateGrid.types.ts
+++ b/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/dateGrid.types.ts
@@ -1,4 +1,4 @@
-import { DayOfWeek, DateRangeType, FirstWeekOfYear } from '../constants';
+import type { DayOfWeek, DateRangeType, FirstWeekOfYear } from '../constants';
export interface Day {
/** `Date.toString()` value of current date */
diff --git a/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/findAvailableDate.ts b/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/findAvailableDate.ts
index 291826faec642..7a3fc77afc071 100644
--- a/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/findAvailableDate.ts
+++ b/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/findAvailableDate.ts
@@ -1,4 +1,4 @@
-import { AvailableDateOptions } from './dateGrid.types';
+import type { AvailableDateOptions } from './dateGrid.types';
import { isRestrictedDate } from './isRestrictedDate';
diff --git a/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/getDateRangeTypeToUse.ts b/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/getDateRangeTypeToUse.ts
index f01e9759b3ca5..9902b94f58f82 100644
--- a/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/getDateRangeTypeToUse.ts
+++ b/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/getDateRangeTypeToUse.ts
@@ -1,4 +1,5 @@
-import { DateRangeType, DayOfWeek } from '../constants';
+import type { DayOfWeek } from '../constants';
+import { DateRangeType } from '../constants';
import { isContiguous } from './isContiguous';
/**
* Return corrected date range type, given `dateRangeType` and list of working days.
diff --git a/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/getDayGrid.ts b/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/getDayGrid.ts
index 100b8a672596c..e207a6dcffb02 100644
--- a/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/getDayGrid.ts
+++ b/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/getDayGrid.ts
@@ -1,6 +1,6 @@
import { addDays, compareDates, getDateRangeArray, isInDateRangeArray } from '../dateMath/dateMath';
import { DAYS_IN_WEEK } from '../constants';
-import { Day, DayGridOptions } from './dateGrid.types';
+import type { Day, DayGridOptions } from './dateGrid.types';
import { getDateRangeTypeToUse } from './getDateRangeTypeToUse';
import { getBoundedDateRange } from './getBoundedDateRange';
import { isRestrictedDate } from './isRestrictedDate';
diff --git a/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/isAfterMaxDate.ts b/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/isAfterMaxDate.ts
index 8c3bcab9e6e12..137db83201aec 100644
--- a/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/isAfterMaxDate.ts
+++ b/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/isAfterMaxDate.ts
@@ -1,4 +1,4 @@
-import { RestrictedDatesOptions } from './dateGrid.types';
+import type { RestrictedDatesOptions } from './dateGrid.types';
import { compareDatePart } from '../dateMath/dateMath';
/**
diff --git a/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/isBeforeMinDate.ts b/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/isBeforeMinDate.ts
index 74be1f648da7b..1a066d9fe773a 100644
--- a/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/isBeforeMinDate.ts
+++ b/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/isBeforeMinDate.ts
@@ -1,4 +1,4 @@
-import { RestrictedDatesOptions } from './dateGrid.types';
+import type { RestrictedDatesOptions } from './dateGrid.types';
import { compareDatePart } from '../dateMath/dateMath';
/**
diff --git a/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/isContiguous.ts b/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/isContiguous.ts
index a69a0a286af2c..01d9cbca9816c 100644
--- a/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/isContiguous.ts
+++ b/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/isContiguous.ts
@@ -1,4 +1,4 @@
-import { DayOfWeek } from '../constants';
+import type { DayOfWeek } from '../constants';
/**
* Returns whether provided week days are contiguous.
diff --git a/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/isRestrictedDate.ts b/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/isRestrictedDate.ts
index 611344dd4d062..57e10b1d35607 100644
--- a/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/isRestrictedDate.ts
+++ b/packages/react-components/react-calendar-compat/library/src/utils/dateGrid/isRestrictedDate.ts
@@ -1,4 +1,4 @@
-import { RestrictedDatesOptions } from './dateGrid.types';
+import type { RestrictedDatesOptions } from './dateGrid.types';
import { compareDates } from '../dateMath/dateMath';
import { isBeforeMinDate } from './isBeforeMinDate';
import { isAfterMaxDate } from './isAfterMaxDate';
diff --git a/packages/react-components/react-card/library/src/components/Card/Card.test.tsx b/packages/react-components/react-card/library/src/components/Card/Card.test.tsx
index 48916afa1f010..a3ad001fce272 100644
--- a/packages/react-components/react-card/library/src/components/Card/Card.test.tsx
+++ b/packages/react-components/react-card/library/src/components/Card/Card.test.tsx
@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
import { isConformant } from '../../testing/isConformant';
import { Card } from './Card';
-import { CardProps } from './Card.types';
+import type { CardProps } from './Card.types';
import { cardClassNames } from './useCardStyles.styles';
describe('Card', () => {
diff --git a/packages/react-components/react-card/library/src/components/Card/Card.types.ts b/packages/react-components/react-card/library/src/components/Card/Card.types.ts
index e12eeb43ff4a6..15008489ee127 100644
--- a/packages/react-components/react-card/library/src/components/Card/Card.types.ts
+++ b/packages/react-components/react-card/library/src/components/Card/Card.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
/**
diff --git a/packages/react-components/react-card/library/src/components/Card/CardContext.ts b/packages/react-components/react-card/library/src/components/Card/CardContext.ts
index 1f346288f7d76..1c5f048b74d91 100644
--- a/packages/react-components/react-card/library/src/components/Card/CardContext.ts
+++ b/packages/react-components/react-card/library/src/components/Card/CardContext.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { CardContextValue } from './Card.types';
+import type { CardContextValue } from './Card.types';
const cardContext = React.createContext(undefined);
diff --git a/packages/react-components/react-card/library/src/components/Card/useCardStyles.styles.ts b/packages/react-components/react-card/library/src/components/Card/useCardStyles.styles.ts
index 160a34d6a0e9e..4b9a425cd69e6 100644
--- a/packages/react-components/react-card/library/src/components/Card/useCardStyles.styles.ts
+++ b/packages/react-components/react-card/library/src/components/Card/useCardStyles.styles.ts
@@ -1,11 +1,13 @@
'use client';
import * as React from 'react';
-import { shorthands, makeStyles, mergeClasses, makeResetStyles, GriffelStyle } from '@griffel/react';
+import type { GriffelStyle } from '@griffel/react';
+import { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import type { SlotClassNames } from '@fluentui/react-utilities';
import { textClassNames } from '@fluentui/react-text';
-import { FocusOutlineStyleOptions, createFocusOutlineStyle } from '@fluentui/react-tabster';
+import type { FocusOutlineStyleOptions } from '@fluentui/react-tabster';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';
import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';
diff --git a/packages/react-components/react-card/library/src/components/CardFooter/useCardFooter.ts b/packages/react-components/react-card/library/src/components/CardFooter/useCardFooter.ts
index 940320ab25ffd..337189200967e 100644
--- a/packages/react-components/react-card/library/src/components/CardFooter/useCardFooter.ts
+++ b/packages/react-components/react-card/library/src/components/CardFooter/useCardFooter.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { CardFooterBaseProps, CardFooterBaseState, CardFooterProps, CardFooterState } from './CardFooter.types';
diff --git a/packages/react-components/react-card/stories/src/Card/CardAppearance.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardAppearance.stories.tsx
index cdf93f2e131be..6707579212ef1 100644
--- a/packages/react-components/react-card/stories/src/Card/CardAppearance.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardAppearance.stories.tsx
@@ -1,8 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CardProps } from '@fluentui/react-components';
import { makeStyles, tokens, Button, Text, Caption1, Subtitle1, Body1, mergeClasses } from '@fluentui/react-components';
import { MoreHorizontal20Regular } from '@fluentui/react-icons';
-import { Card, CardHeader, CardProps } from '@fluentui/react-components';
+import { Card, CardHeader } from '@fluentui/react-components';
const resolveAsset = (asset: string) => {
const ASSET_URL =
diff --git a/packages/react-components/react-card/stories/src/Card/CardDisabled.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardDisabled.stories.tsx
index 9a8967c998c94..39274d98a0f71 100644
--- a/packages/react-components/react-card/stories/src/Card/CardDisabled.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardDisabled.stories.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { Body1, Caption1, Checkbox, JSXElement, makeStyles } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
+import { Body1, Caption1, Checkbox, makeStyles } from '@fluentui/react-components';
import { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components';
import { Button } from '@fluentui/react-components';
import { ArrowReplyRegular, ShareRegular } from '@fluentui/react-icons';
diff --git a/packages/react-components/react-card/stories/src/Card/CardFocusMode.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardFocusMode.stories.tsx
index 728e1d67daef9..f7610028748ea 100644
--- a/packages/react-components/react-card/stories/src/Card/CardFocusMode.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardFocusMode.stories.tsx
@@ -1,8 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CardProps } from '@fluentui/react-components';
import { makeStyles, Button, Caption1, Body1, Subtitle1 } from '@fluentui/react-components';
import { MoreHorizontal20Regular, Open16Regular, Share16Regular } from '@fluentui/react-icons';
-import { Card, CardHeader, CardFooter, CardPreview, CardProps } from '@fluentui/react-components';
+import { Card, CardHeader, CardFooter, CardPreview } from '@fluentui/react-components';
const resolveAsset = (asset: string) => {
const ASSET_URL =
diff --git a/packages/react-components/react-card/stories/src/Card/CardSelectable.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardSelectable.stories.tsx
index 263176b05a5eb..3492eadcac6c7 100644
--- a/packages/react-components/react-card/stories/src/Card/CardSelectable.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardSelectable.stories.tsx
@@ -1,8 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CardProps } from '@fluentui/react-components';
import { makeStyles, Button, Caption1, tokens, Text } from '@fluentui/react-components';
import { MoreHorizontal20Regular } from '@fluentui/react-icons';
-import { Card, CardHeader, CardPreview, CardProps } from '@fluentui/react-components';
+import { Card, CardHeader, CardPreview } from '@fluentui/react-components';
const resolveAsset = (asset: string) => {
const ASSET_URL =
diff --git a/packages/react-components/react-card/stories/src/Card/CardSize.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardSize.stories.tsx
index b034fb7780b70..fa1f619f82323 100644
--- a/packages/react-components/react-card/stories/src/Card/CardSize.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardSize.stories.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CardProps } from '@fluentui/react-components';
import { makeStyles, tokens, Caption1, Subtitle1, mergeClasses, Text } from '@fluentui/react-components';
-import { Card, CardHeader, CardProps } from '@fluentui/react-components';
+import { Card, CardHeader } from '@fluentui/react-components';
const resolveAsset = (asset: string) => {
const ASSET_URL =
diff --git a/packages/react-components/react-carousel/library/etc/react-carousel.api.md b/packages/react-components/react-carousel/library/etc/react-carousel.api.md
index 51cf4e7203173..8b9a125cf8c07 100644
--- a/packages/react-components/react-carousel/library/etc/react-carousel.api.md
+++ b/packages/react-components/react-carousel/library/etc/react-carousel.api.md
@@ -5,13 +5,13 @@
```ts
import { ARIAButtonElement } from '@fluentui/react-aria';
-import { ARIAButtonSlotProps } from '@fluentui/react-aria';
-import { ButtonProps } from '@fluentui/react-button';
-import { ButtonSlots } from '@fluentui/react-button';
-import { ButtonState } from '@fluentui/react-button';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import type { ButtonProps } from '@fluentui/react-button';
+import type { ButtonSlots } from '@fluentui/react-button';
+import type { ButtonState } from '@fluentui/react-button';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
-import { ContextSelector } from '@fluentui/react-context-selector';
+import type { ContextSelector } from '@fluentui/react-context-selector';
import type { EventData } from '@fluentui/react-utilities';
import type { EventHandler } from '@fluentui/react-utilities';
import { FC } from 'react';
@@ -22,9 +22,9 @@ import { ProviderProps } from 'react';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
-import { ToggleButtonProps } from '@fluentui/react-button';
-import { ToggleButtonState } from '@fluentui/react-button';
-import { TooltipProps } from '@fluentui/react-tooltip';
+import type { ToggleButtonProps } from '@fluentui/react-button';
+import type { ToggleButtonState } from '@fluentui/react-button';
+import type { TooltipProps } from '@fluentui/react-tooltip';
// @public
export const Carousel: ForwardRefComponent;
diff --git a/packages/react-components/react-carousel/library/src/components/Carousel/Carousel.cy.tsx b/packages/react-components/react-carousel/library/src/components/Carousel/Carousel.cy.tsx
index 14efa709f62e2..2043aa07c9aca 100644
--- a/packages/react-components/react-carousel/library/src/components/Carousel/Carousel.cy.tsx
+++ b/packages/react-components/react-carousel/library/src/components/Carousel/Carousel.cy.tsx
@@ -11,7 +11,7 @@ import { CarouselSlider } from '../CarouselSlider/CarouselSlider';
import { CarouselViewport } from '../CarouselViewport/CarouselViewport';
import { Carousel } from './Carousel';
import { CarouselCard, carouselCardClassNames } from '../CarouselCard/index';
-import { CarouselIndexChangeData } from '../CarouselContext.types';
+import type { CarouselIndexChangeData } from '../CarouselContext.types';
import type { EventHandler, JSXElement } from '@fluentui/react-utilities';
const mount = (element: JSXElement) => {
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.test.tsx b/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.test.tsx
index 55794035f82a8..4e8f4746ac366 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.test.tsx
+++ b/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.test.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
import { isConformant } from '../../testing/isConformant';
import { CarouselAutoplayButton } from './CarouselAutoplayButton';
-import { CarouselAutoplayButtonProps } from './CarouselAutoplayButton.types';
+import type { CarouselAutoplayButtonProps } from './CarouselAutoplayButton.types';
describe('CarouselAutoplayButton', () => {
isConformant({
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts b/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts
index ae975afd3d075..1a3483134adbb 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts
@@ -1,7 +1,7 @@
-import { ARIAButtonSlotProps } from '@fluentui/react-aria';
-import { ButtonSlots, ToggleButtonProps, ToggleButtonState } from '@fluentui/react-button';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import type { ButtonSlots, ToggleButtonProps, ToggleButtonState } from '@fluentui/react-button';
import type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
export type CarouselAutoplayButtonSlots = ButtonSlots & {
root: NonNullable>;
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselButton/CarouselButton.test.tsx b/packages/react-components/react-carousel/library/src/components/CarouselButton/CarouselButton.test.tsx
index 28f111875153e..cce5e58fb8796 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselButton/CarouselButton.test.tsx
+++ b/packages/react-components/react-carousel/library/src/components/CarouselButton/CarouselButton.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { isConformant } from '../../testing/isConformant';
import { CarouselButton } from './CarouselButton';
-import { CarouselButtonProps } from './CarouselButton.types';
+import type { CarouselButtonProps } from './CarouselButton.types';
describe('CarouselButton', () => {
isConformant({
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselButton/CarouselButton.types.ts b/packages/react-components/react-carousel/library/src/components/CarouselButton/CarouselButton.types.ts
index 651ac38f27d5a..13519bcc1edf8 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselButton/CarouselButton.types.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselButton/CarouselButton.types.ts
@@ -1,6 +1,6 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { ARIAButtonSlotProps } from '@fluentui/react-aria';
-import { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import type { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';
export type CarouselButtonSlots = ButtonSlots & {
root: NonNullable>;
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselContext.ts b/packages/react-components/react-carousel/library/src/components/CarouselContext.ts
index a8e6bd78e2a57..e3795f2506d8f 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselContext.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselContext.ts
@@ -1,6 +1,7 @@
'use client';
-import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';
+import type { ContextSelector } from '@fluentui/react-context-selector';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
import type { CarouselContextValue } from './CarouselContext.types';
export const carouselContextDefaultValue: CarouselContextValue = {
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselContext.types.ts b/packages/react-components/react-carousel/library/src/components/CarouselContext.types.ts
index 98cd5a87b6788..2988ae042ce94 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselContext.types.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselContext.types.ts
@@ -1,5 +1,5 @@
import type { EventData } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
import type { CarouselUpdateData } from '../Carousel';
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselNav/CarouselNav.types.ts b/packages/react-components/react-carousel/library/src/components/CarouselNav/CarouselNav.types.ts
index 53717fcb2a8d6..591d692969b77 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselNav/CarouselNav.types.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselNav/CarouselNav.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
export type CarouselNavSlots = {
/**
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselNav/useCarouselNav.ts b/packages/react-components/react-carousel/library/src/components/CarouselNav/useCarouselNav.ts
index 32a6c64f4bc78..133a6aaa31c45 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselNav/useCarouselNav.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselNav/useCarouselNav.ts
@@ -2,7 +2,7 @@
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
import { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
import type { CarouselNavProps, CarouselNavState } from './CarouselNav.types';
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselNavButton/CarouselNavButton.test.tsx b/packages/react-components/react-carousel/library/src/components/CarouselNavButton/CarouselNavButton.test.tsx
index 6f780c2403e88..8c5d7057e5a2b 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselNavButton/CarouselNavButton.test.tsx
+++ b/packages/react-components/react-carousel/library/src/components/CarouselNavButton/CarouselNavButton.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { isConformant } from '../../testing/isConformant';
import { CarouselNavButton } from './CarouselNavButton';
-import { CarouselNavButtonProps } from './CarouselNavButton.types';
+import type { CarouselNavButtonProps } from './CarouselNavButton.types';
describe('CarouselNavButton', () => {
isConformant({
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselNavButton/CarouselNavButton.types.ts b/packages/react-components/react-carousel/library/src/components/CarouselNavButton/CarouselNavButton.types.ts
index d2f1d8781e4a1..424f7466757b5 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselNavButton/CarouselNavButton.types.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselNavButton/CarouselNavButton.types.ts
@@ -1,6 +1,6 @@
-import { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { CarouselNavState } from '../CarouselNav/CarouselNav.types';
+import type { CarouselNavState } from '../CarouselNav/CarouselNav.types';
export type CarouselNavButtonSlots = {
/**
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselNavContainer/CarouselNavContainer.types.ts b/packages/react-components/react-carousel/library/src/components/CarouselNavContainer/CarouselNavContainer.types.ts
index dea6429b3998b..cd3384d81954d 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselNavContainer/CarouselNavContainer.types.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselNavContainer/CarouselNavContainer.types.ts
@@ -1,7 +1,7 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';
-import { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';
-import { TooltipProps } from '@fluentui/react-tooltip';
+import type { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';
+import type { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';
+import type { TooltipProps } from '@fluentui/react-tooltip';
export type CarouselNavContainerSlots = {
root: Slot<'div'>;
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselNavContainer/useCarouselNavContainer.ts b/packages/react-components/react-carousel/library/src/components/CarouselNavContainer/useCarouselNavContainer.ts
index 1d58f5cb48dc2..3df791cdd3814 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselNavContainer/useCarouselNavContainer.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselNavContainer/useCarouselNavContainer.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';
import { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/CarouselNavImageButton.test.tsx b/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/CarouselNavImageButton.test.tsx
index a9771b06de350..f834937467509 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/CarouselNavImageButton.test.tsx
+++ b/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/CarouselNavImageButton.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { isConformant } from '../../testing/isConformant';
import { CarouselNavImageButton } from './CarouselNavImageButton';
-import { CarouselNavImageButtonProps } from './CarouselNavImageButton.types';
+import type { CarouselNavImageButtonProps } from './CarouselNavImageButton.types';
describe('CarouselNavImageButton', () => {
isConformant({
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/CarouselNavImageButton.types.ts b/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/CarouselNavImageButton.types.ts
index 3ccb6f172b045..34f177b6350d9 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/CarouselNavImageButton.types.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/CarouselNavImageButton.types.ts
@@ -1,4 +1,4 @@
-import { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
export type CarouselNavImageButtonSlots = {
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselSlider/CarouselSliderContext.ts b/packages/react-components/react-carousel/library/src/components/CarouselSlider/CarouselSliderContext.ts
index 260d5143f986c..b920876e8121a 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselSlider/CarouselSliderContext.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselSlider/CarouselSliderContext.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { CarouselSliderContextValue, CarouselSliderState } from './CarouselSlider.types';
+import type { CarouselSliderContextValue, CarouselSliderState } from './CarouselSlider.types';
const carouselSliderContext = React.createContext(undefined);
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselSlider/renderCarouselSlider.tsx b/packages/react-components/react-carousel/library/src/components/CarouselSlider/renderCarouselSlider.tsx
index fc695be267ea9..2562dc23c085d 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselSlider/renderCarouselSlider.tsx
+++ b/packages/react-components/react-carousel/library/src/components/CarouselSlider/renderCarouselSlider.tsx
@@ -4,7 +4,8 @@
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import type { CarouselSliderState, CarouselSliderSlots } from './CarouselSlider.types';
-import { CarouselSliderContextProvider, CarouselSliderContextValues } from './CarouselSliderContext';
+import type { CarouselSliderContextValues } from './CarouselSliderContext';
+import { CarouselSliderContextProvider } from './CarouselSliderContext';
/**
* Render the final JSX of CarouselSlider
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselSlider/useCarouselSlider.ts b/packages/react-components/react-carousel/library/src/components/CarouselSlider/useCarouselSlider.ts
index c5fcb003ff0a6..5843a916afc4d 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselSlider/useCarouselSlider.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselSlider/useCarouselSlider.ts
@@ -1,7 +1,7 @@
'use client';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
import type { CarouselSliderProps, CarouselSliderState } from './CarouselSlider.types';
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselViewport/CarouselViewport.types.ts b/packages/react-components/react-carousel/library/src/components/CarouselViewport/CarouselViewport.types.ts
index 5f1091dbcfbb4..ffe1583a9a0f4 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselViewport/CarouselViewport.types.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselViewport/CarouselViewport.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { CarouselSliderContextValue } from '../CarouselSlider/CarouselSlider.types';
+import type { CarouselSliderContextValue } from '../CarouselSlider/CarouselSlider.types';
export type CarouselViewportSlots = {
/**
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselViewport/renderCarouselViewport.tsx b/packages/react-components/react-carousel/library/src/components/CarouselViewport/renderCarouselViewport.tsx
index f545f613da69e..ff0088f458390 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselViewport/renderCarouselViewport.tsx
+++ b/packages/react-components/react-carousel/library/src/components/CarouselViewport/renderCarouselViewport.tsx
@@ -4,7 +4,8 @@
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import type { CarouselViewportState, CarouselViewportSlots } from './CarouselViewport.types';
-import { CarouselSliderContextValues, CarouselSliderContextProvider } from '../CarouselSlider/CarouselSliderContext';
+import type { CarouselSliderContextValues } from '../CarouselSlider/CarouselSliderContext';
+import { CarouselSliderContextProvider } from '../CarouselSlider/CarouselSliderContext';
/**
* Render the final JSX of CarouselViewport
diff --git a/packages/react-components/react-carousel/library/src/components/useEmblaCarousel.ts b/packages/react-components/react-carousel/library/src/components/useEmblaCarousel.ts
index 2a706dbf4a1a5..84392e3cedf14 100644
--- a/packages/react-components/react-carousel/library/src/components/useEmblaCarousel.ts
+++ b/packages/react-components/react-carousel/library/src/components/useEmblaCarousel.ts
@@ -1,12 +1,13 @@
'use client';
import { type EventHandler, useControllableState, useEventCallback } from '@fluentui/react-utilities';
-import EmblaCarousel, { EmblaPluginType, type EmblaCarouselType, type EmblaOptionsType } from 'embla-carousel';
+import type { EmblaPluginType } from 'embla-carousel';
+import EmblaCarousel, { type EmblaCarouselType, type EmblaOptionsType } from 'embla-carousel';
import * as React from 'react';
import { carouselCardClassNames } from './CarouselCard/useCarouselCardStyles.styles';
import { carouselSliderClassNames } from './CarouselSlider/useCarouselSliderStyles.styles';
-import { CarouselMotion, CarouselUpdateData, CarouselVisibilityEventDetail } from '../Carousel';
+import type { CarouselMotion, CarouselUpdateData, CarouselVisibilityEventDetail } from '../Carousel';
import Autoplay from 'embla-carousel-autoplay';
import Fade from 'embla-carousel-fade';
import { pointerEventPlugin } from './pointerEvents';
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.stories.tsx
index cd66855786171..bda553d57a580 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.stories.tsx
@@ -13,16 +13,14 @@ import {
import { MoreHorizontalRegular, DocumentLinkRegular } from '@fluentui/react-icons';
import {
Carousel,
- CarouselAnnouncerFunction,
CarouselCard,
CarouselNav,
CarouselNavButton,
CarouselNavContainer,
- CarouselProps,
CarouselViewport,
} from '@fluentui/react-components';
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CarouselAnnouncerFunction, CarouselProps } from '@fluentui/react-components';
const useClasses = makeStyles({
container: {
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselAppearance.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselAppearance.stories.tsx
index 239db78c9e950..a44bb303171d6 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselAppearance.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselAppearance.stories.tsx
@@ -1,9 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CarouselAnnouncerFunction } from '@fluentui/react-components';
import {
Button,
Carousel,
- CarouselAnnouncerFunction,
CarouselCard,
CarouselNav,
CarouselNavButton,
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.stories.tsx
index 4e520f7825d9b..e1483fe232782 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.stories.tsx
@@ -11,8 +11,6 @@ import {
} from '@fluentui/react-components';
import {
Carousel,
- CarouselAnnouncerFunction,
- CarouselAutoplayButtonProps,
CarouselCard,
CarouselNav,
CarouselNavButton,
@@ -20,7 +18,7 @@ import {
CarouselViewport,
} from '@fluentui/react-components';
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CarouselAnnouncerFunction, CarouselAutoplayButtonProps } from '@fluentui/react-components';
const useClasses = makeStyles({
bannerCard: {
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx
index f54d2b757e87b..96aed03b4c5f6 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx
@@ -11,15 +11,9 @@ import {
CarouselSlider,
CarouselAutoplayButton,
} from '@fluentui/react-components';
-import {
- Carousel,
- CarouselAnnouncerFunction,
- CarouselButton,
- CarouselCard,
- CarouselViewport,
-} from '@fluentui/react-components';
+import { Carousel, CarouselButton, CarouselCard, CarouselViewport } from '@fluentui/react-components';
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CarouselAnnouncerFunction } from '@fluentui/react-components';
const useClasses = makeStyles({
carousel: {
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselDefault.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselDefault.stories.tsx
index dde8aa6df82ff..f89ab351cadfb 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselDefault.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselDefault.stories.tsx
@@ -6,11 +6,10 @@ import {
CarouselNavButton,
CarouselNavContainer,
CarouselViewport,
- CarouselAnnouncerFunction,
CarouselSlider,
} from '@fluentui/react-components';
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CarouselAnnouncerFunction } from '@fluentui/react-components';
const useClasses = makeStyles({
bannerCard: {
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.stories.tsx
index 3f39d347be6b8..6b0112c34cadd 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.stories.tsx
@@ -11,7 +11,6 @@ import {
} from '@fluentui/react-components';
import {
Carousel,
- CarouselAnnouncerFunction,
CarouselCard,
CarouselNav,
CarouselNavButton,
@@ -20,7 +19,7 @@ import {
Text,
} from '@fluentui/react-components';
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CarouselAnnouncerFunction } from '@fluentui/react-components';
const useClasses = makeStyles({
container: {
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.stories.tsx
index 454f42c3399d5..405e7c1d93350 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.stories.tsx
@@ -1,9 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CarouselAnnouncerFunction } from '@fluentui/react-components';
import {
Button,
Carousel,
- CarouselAnnouncerFunction,
CarouselCard,
CarouselNav,
CarouselNavButton,
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselImageBox.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselImageBox.stories.tsx
index 8d00a0cd12e85..8660ca95df107 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselImageBox.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselImageBox.stories.tsx
@@ -1,7 +1,6 @@
import { makeStyles, Image, CarouselSlider } from '@fluentui/react-components';
import {
Carousel,
- CarouselAnnouncerFunction,
CarouselCard,
CarouselNav,
CarouselNavContainer,
@@ -9,7 +8,7 @@ import {
CarouselViewport,
} from '@fluentui/react-components';
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CarouselAnnouncerFunction } from '@fluentui/react-components';
const useClasses = makeStyles({
viewport: {
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.stories.tsx
index 57903217b6e72..b9ee21a4e96cc 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.stories.tsx
@@ -10,7 +10,6 @@ import {
} from '@fluentui/react-components';
import {
Carousel,
- CarouselAnnouncerFunction,
CarouselCard,
CarouselNav,
CarouselNavButton,
@@ -18,7 +17,7 @@ import {
CarouselViewport,
} from '@fluentui/react-components';
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CarouselAnnouncerFunction } from '@fluentui/react-components';
const useClasses = makeStyles({
slider: {
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselTopNavigation.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselTopNavigation.stories.tsx
index 33ea5cdb382be..302dea9c23b32 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselTopNavigation.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselTopNavigation.stories.tsx
@@ -1,7 +1,7 @@
import { Button, CarouselSlider, Image, makeStyles, tokens, typographyStyles } from '@fluentui/react-components';
+import type { CarouselAnnouncerFunction } from '@fluentui/react-components';
import {
Carousel,
- CarouselAnnouncerFunction,
CarouselCard,
CarouselNav,
CarouselNavButton,
diff --git a/packages/react-components/react-checkbox/library/etc/react-checkbox.api.md b/packages/react-components/react-checkbox/library/etc/react-checkbox.api.md
index d230c5def9b68..0105fb031c40c 100644
--- a/packages/react-components/react-checkbox/library/etc/react-checkbox.api.md
+++ b/packages/react-components/react-checkbox/library/etc/react-checkbox.api.md
@@ -4,13 +4,13 @@
```ts
-import { ComponentProps } from '@fluentui/react-utilities';
-import { ComponentState } from '@fluentui/react-utilities';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { Label } from '@fluentui/react-label';
+import type { Label } from '@fluentui/react-label';
import * as React_2 from 'react';
-import { Slot } from '@fluentui/react-utilities';
+import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
// @public
diff --git a/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.test.tsx b/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.test.tsx
index ec0738b2a6ba2..a4a69463a6be9 100644
--- a/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.test.tsx
+++ b/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.test.tsx
@@ -4,7 +4,7 @@ import { Field } from '@fluentui/react-field';
import { Checkbox } from './Checkbox';
import { isConformant } from '../../testing/isConformant';
import { resetIdsForTests } from '@fluentui/react-utilities';
-import { CheckboxOnChangeData } from './Checkbox.types';
+import type { CheckboxOnChangeData } from './Checkbox.types';
// TODO: add more tests here, and create visual regression tests in /apps/vr-tests
diff --git a/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.types.ts b/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.types.ts
index 3d05277e0fbf8..70966b54f1bb4 100644
--- a/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.types.ts
+++ b/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.types.ts
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { Label } from '@fluentui/react-label';
-import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type * as React from 'react';
+import type { Label } from '@fluentui/react-label';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
export type CheckboxSlots = {
/**
diff --git a/packages/react-components/react-checkbox/library/src/components/Checkbox/renderCheckbox.tsx b/packages/react-components/react-checkbox/library/src/components/Checkbox/renderCheckbox.tsx
index 3e6d25dbaacfd..5fc9660193b72 100644
--- a/packages/react-components/react-checkbox/library/src/components/Checkbox/renderCheckbox.tsx
+++ b/packages/react-components/react-checkbox/library/src/components/Checkbox/renderCheckbox.tsx
@@ -3,7 +3,7 @@
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { CheckboxBaseState, CheckboxSlots } from './Checkbox.types';
+import type { CheckboxBaseState, CheckboxSlots } from './Checkbox.types';
export const renderCheckbox_unstable = (state: CheckboxBaseState): JSXElement => {
assertSlots(state);
diff --git a/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckbox.tsx b/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckbox.tsx
index 1244b9a87d72d..7a89ae277ab07 100644
--- a/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckbox.tsx
+++ b/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckbox.tsx
@@ -11,7 +11,7 @@ import {
useMergedRefs,
slot,
} from '@fluentui/react-utilities';
-import { CheckboxBaseProps, CheckboxBaseState, CheckboxProps, CheckboxState } from './Checkbox.types';
+import type { CheckboxBaseProps, CheckboxBaseState, CheckboxProps, CheckboxState } from './Checkbox.types';
import {
Checkmark12Filled,
Checkmark16Filled,
diff --git a/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckboxStyles.styles.ts b/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckboxStyles.styles.ts
index 5979d4621fe0d..b7b1d0592f5c3 100644
--- a/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckboxStyles.styles.ts
+++ b/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckboxStyles.styles.ts
@@ -3,7 +3,7 @@
import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
import { tokens } from '@fluentui/react-theme';
-import { CheckboxSlots, CheckboxState } from './Checkbox.types';
+import type { CheckboxSlots, CheckboxState } from './Checkbox.types';
import type { SlotClassNames } from '@fluentui/react-utilities';
export const checkboxClassNames: SlotClassNames = {
diff --git a/packages/react-components/react-checkbox/library/src/testing/isConformant.ts b/packages/react-components/react-checkbox/library/src/testing/isConformant.ts
index 53c3fc00e02c7..c8f15c9e45d1b 100644
--- a/packages/react-components/react-checkbox/library/src/testing/isConformant.ts
+++ b/packages/react-components/react-checkbox/library/src/testing/isConformant.ts
@@ -1,4 +1,5 @@
-import { isConformant as baseIsConformant, IsConformantOptions, TestObject } from '@fluentui/react-conformance';
+import type { IsConformantOptions, TestObject } from '@fluentui/react-conformance';
+import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
import griffelTests from '@fluentui/react-conformance-griffel';
export function isConformant(
diff --git a/packages/react-components/react-checkbox/stories/src/Checkbox/index.stories.tsx b/packages/react-components/react-checkbox/stories/src/Checkbox/index.stories.tsx
index a10b674f366e2..a20d8a55a58d4 100644
--- a/packages/react-components/react-checkbox/stories/src/Checkbox/index.stories.tsx
+++ b/packages/react-components/react-checkbox/stories/src/Checkbox/index.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { tokens, Checkbox } from '@fluentui/react-components';
export { Default } from './CheckboxDefault.stories';
diff --git a/packages/react-components/react-color-picker/library/src/components/AlphaSlider/useAlphaSlider.ts b/packages/react-components/react-color-picker/library/src/components/AlphaSlider/useAlphaSlider.ts
index 78eeb9389d243..468fc36d0687c 100644
--- a/packages/react-components/react-color-picker/library/src/components/AlphaSlider/useAlphaSlider.ts
+++ b/packages/react-components/react-color-picker/library/src/components/AlphaSlider/useAlphaSlider.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getPartitionedNativeProps, useId, slot } from '@fluentui/react-utilities';
import type { AlphaSliderProps, AlphaSliderState } from './AlphaSlider.types';
import { useAlphaSliderState_unstable } from './useAlphaSliderState';
diff --git a/packages/react-components/react-color-picker/library/src/components/AlphaSlider/useAlphaSliderState.ts b/packages/react-components/react-color-picker/library/src/components/AlphaSlider/useAlphaSliderState.ts
index 164903ff0d81b..47b3cb0a60b4e 100644
--- a/packages/react-components/react-color-picker/library/src/components/AlphaSlider/useAlphaSliderState.ts
+++ b/packages/react-components/react-color-picker/library/src/components/AlphaSlider/useAlphaSliderState.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { tinycolor } from '@ctrl/tinycolor';
import { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-color-picker/library/src/components/ColorArea/ColorArea.types.ts b/packages/react-components/react-color-picker/library/src/components/ColorArea/ColorArea.types.ts
index d332c1085eed2..922f1782bcec1 100644
--- a/packages/react-components/react-color-picker/library/src/components/ColorArea/ColorArea.types.ts
+++ b/packages/react-components/react-color-picker/library/src/components/ColorArea/ColorArea.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentState, Slot, EventHandler, EventData, ComponentProps } from '@fluentui/react-utilities';
import type { HsvColor } from '../../types/color';
import type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';
diff --git a/packages/react-components/react-color-picker/library/src/components/ColorPicker/ColorPicker.types.ts b/packages/react-components/react-color-picker/library/src/components/ColorPicker/ColorPicker.types.ts
index 5c47504a7feca..88db0e86242cc 100644
--- a/packages/react-components/react-color-picker/library/src/components/ColorPicker/ColorPicker.types.ts
+++ b/packages/react-components/react-color-picker/library/src/components/ColorPicker/ColorPicker.types.ts
@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';
-import { ColorPickerContextValue } from '../../contexts/colorPicker';
+import type { ColorPickerContextValue } from '../../contexts/colorPicker';
import type { HsvColor } from '../../types/color';
export type ColorPickerOnChangeData = EventData<'change', React.ChangeEvent> & {
diff --git a/packages/react-components/react-color-picker/library/src/components/ColorPicker/useColorPicker.ts b/packages/react-components/react-color-picker/library/src/components/ColorPicker/useColorPicker.ts
index bc8904ebacf9b..ed7816a8f308b 100644
--- a/packages/react-components/react-color-picker/library/src/components/ColorPicker/useColorPicker.ts
+++ b/packages/react-components/react-color-picker/library/src/components/ColorPicker/useColorPicker.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot, useEventCallback } from '@fluentui/react-utilities';
import type { ColorPickerProps, ColorPickerState } from './ColorPicker.types';
/**
diff --git a/packages/react-components/react-color-picker/library/src/components/ColorSlider/ColorSlider.types.ts b/packages/react-components/react-color-picker/library/src/components/ColorSlider/ColorSlider.types.ts
index 71386680bdf9a..5c40e90d4f719 100644
--- a/packages/react-components/react-color-picker/library/src/components/ColorSlider/ColorSlider.types.ts
+++ b/packages/react-components/react-color-picker/library/src/components/ColorSlider/ColorSlider.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';
import type { HsvColor } from '../../types/color';
import type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';
diff --git a/packages/react-components/react-color-picker/library/src/components/ColorSlider/useColorSlider.ts b/packages/react-components/react-color-picker/library/src/components/ColorSlider/useColorSlider.ts
index ce38e05011a8f..5740fa9ee4bf7 100644
--- a/packages/react-components/react-color-picker/library/src/components/ColorSlider/useColorSlider.ts
+++ b/packages/react-components/react-color-picker/library/src/components/ColorSlider/useColorSlider.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { tinycolor } from '@ctrl/tinycolor';
import {
getPartitionedNativeProps,
@@ -17,7 +17,7 @@ import { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';
import { getPercent } from '../../utils/getPercent';
import { createHsvColor } from '../../utils/createHsvColor';
import { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';
-import { HsvColor } from '../../types/color';
+import type { HsvColor } from '../../types/color';
import { INITIAL_COLOR_HSV } from '../../utils/constants';
/**
diff --git a/packages/react-components/react-color-picker/library/src/contexts/colorPicker.ts b/packages/react-components/react-color-picker/library/src/contexts/colorPicker.ts
index e14b419c484bc..92607a29460ed 100644
--- a/packages/react-components/react-color-picker/library/src/contexts/colorPicker.ts
+++ b/packages/react-components/react-color-picker/library/src/contexts/colorPicker.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
import type { ContextSelector, Context } from '@fluentui/react-context-selector';
import type { ColorPickerState, ColorPickerProps } from '../components/ColorPicker/ColorPicker.types';
diff --git a/packages/react-components/react-color-picker/library/src/utils/adjustChannel.test.ts b/packages/react-components/react-color-picker/library/src/utils/adjustChannel.test.ts
index 6cfdd93c7b35d..22f357d92c8cc 100644
--- a/packages/react-components/react-color-picker/library/src/utils/adjustChannel.test.ts
+++ b/packages/react-components/react-color-picker/library/src/utils/adjustChannel.test.ts
@@ -1,4 +1,5 @@
-import { clampValue, adjustChannel, ChannelActions } from './adjustChannel';
+import type { ChannelActions } from './adjustChannel';
+import { clampValue, adjustChannel } from './adjustChannel';
import { MIN, HUE_MAX, MAX as COLOR_MAX } from './constants';
describe('clampValue', () => {
diff --git a/packages/react-components/react-color-picker/library/src/utils/createHsvColor.test.ts b/packages/react-components/react-color-picker/library/src/utils/createHsvColor.test.ts
index 60e352b86212b..fde671c1f50ca 100644
--- a/packages/react-components/react-color-picker/library/src/utils/createHsvColor.test.ts
+++ b/packages/react-components/react-color-picker/library/src/utils/createHsvColor.test.ts
@@ -1,5 +1,5 @@
import { createHsvColor } from './createHsvColor';
-import { HsvColor } from '../types/color';
+import type { HsvColor } from '../types/color';
describe('createHsvColor', () => {
it('should create an HSV color with default values', () => {
diff --git a/packages/react-components/react-color-picker/library/src/utils/createHsvColor.ts b/packages/react-components/react-color-picker/library/src/utils/createHsvColor.ts
index 6b775d26407be..c324588db769c 100644
--- a/packages/react-components/react-color-picker/library/src/utils/createHsvColor.ts
+++ b/packages/react-components/react-color-picker/library/src/utils/createHsvColor.ts
@@ -1,4 +1,4 @@
-import { HsvColor } from '../types/color';
+import type { HsvColor } from '../types/color';
/**
* Creates an HSV color object with optional hue, saturation, value, and alpha components.
diff --git a/packages/react-components/react-color-picker/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx b/packages/react-components/react-color-picker/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx
index d1693c744e57a..1e0af47927922 100644
--- a/packages/react-components/react-color-picker/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx
+++ b/packages/react-components/react-color-picker/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, AlphaSliderProps } from '@fluentui/react-components';
import { tinycolor } from '@ctrl/tinycolor';
-import { Button, makeStyles, AlphaSlider, AlphaSliderProps } from '@fluentui/react-components';
+import { Button, makeStyles, AlphaSlider } from '@fluentui/react-components';
const useStyles = makeStyles({
example: {
diff --git a/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorAndSwatchPicker.stories.tsx b/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorAndSwatchPicker.stories.tsx
index 364eaedb723f3..68d656c78b546 100644
--- a/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorAndSwatchPicker.stories.tsx
+++ b/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorAndSwatchPicker.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, ColorPickerProps } from '@fluentui/react-components';
import { tinycolor } from '@ctrl/tinycolor';
import {
makeStyles,
@@ -12,7 +12,6 @@ import {
ColorPicker,
ColorSlider,
AlphaSlider,
- ColorPickerProps,
ColorArea,
} from '@fluentui/react-components';
import type { SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';
diff --git a/packages/react-components/react-combobox/library/etc/react-combobox.api.md b/packages/react-components/react-combobox/library/etc/react-combobox.api.md
index a82995d553725..b91c710ade0b8 100644
--- a/packages/react-components/react-combobox/library/etc/react-combobox.api.md
+++ b/packages/react-components/react-combobox/library/etc/react-combobox.api.md
@@ -4,26 +4,26 @@
```ts
-import { ActiveDescendantChangeEvent } from '@fluentui/react-aria';
+import type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';
import type { ActiveDescendantContextValue } from '@fluentui/react-aria';
-import { ActiveDescendantImperativeRef } from '@fluentui/react-aria';
+import type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
-import { ContextSelector } from '@fluentui/react-context-selector';
+import type { ContextSelector } from '@fluentui/react-context-selector';
import type { DistributiveOmit } from '@fluentui/react-utilities';
-import { EventData } from '@fluentui/react-utilities';
-import { EventHandler } from '@fluentui/react-utilities';
+import type { EventData } from '@fluentui/react-utilities';
+import type { EventHandler } from '@fluentui/react-utilities';
import type { ExtractSlotProps } from '@fluentui/react-utilities';
import { FC } from 'react';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { PortalProps } from '@fluentui/react-portal';
+import type { PortalProps } from '@fluentui/react-portal';
import type { PositioningShorthand } from '@fluentui/react-positioning';
import { Provider } from 'react';
import { ProviderProps } from 'react';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { SlotComponentType } from '@fluentui/react-utilities';
// @public
diff --git a/packages/react-components/react-combobox/library/src/components/Combobox/Combobox.test.tsx b/packages/react-components/react-combobox/library/src/components/Combobox/Combobox.test.tsx
index 76390c007825e..bb9054a841c8a 100644
--- a/packages/react-components/react-combobox/library/src/components/Combobox/Combobox.test.tsx
+++ b/packages/react-components/react-combobox/library/src/components/Combobox/Combobox.test.tsx
@@ -7,7 +7,7 @@ import { Option } from '../Option/index';
import { isConformant } from '../../testing/isConformant';
import { resetIdsForTests } from '@fluentui/react-utilities';
import { comboboxClassNames } from './useComboboxStyles.styles';
-import { ComboboxProps } from '@fluentui/react-combobox';
+import type { ComboboxProps } from '@fluentui/react-combobox';
describe('Combobox', () => {
beforeEach(() => {
diff --git a/packages/react-components/react-combobox/library/src/components/Combobox/Combobox.types.ts b/packages/react-components/react-combobox/library/src/components/Combobox/Combobox.types.ts
index b9a1904d9403c..baf79acb55371 100644
--- a/packages/react-components/react-combobox/library/src/components/Combobox/Combobox.types.ts
+++ b/packages/react-components/react-combobox/library/src/components/Combobox/Combobox.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';
import type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';
import type {
@@ -9,7 +9,7 @@ import type {
ComboboxBaseProps,
ComboboxBaseState,
} from '../../utils/ComboboxBase.types';
-import { Listbox } from '../Listbox/Listbox';
+import type { Listbox } from '../Listbox/Listbox';
export type ComboboxSlots = {
/** The root combobox slot */
diff --git a/packages/react-components/react-combobox/library/src/components/Combobox/useComboboxStyles.styles.ts b/packages/react-components/react-combobox/library/src/components/Combobox/useComboboxStyles.styles.ts
index 8c39a2af3f589..27cd7a1b901ff 100644
--- a/packages/react-components/react-combobox/library/src/components/Combobox/useComboboxStyles.styles.ts
+++ b/packages/react-components/react-combobox/library/src/components/Combobox/useComboboxStyles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
import { iconSizes } from '../../utils/internalTokens';
import type { ComboboxSlots, ComboboxState } from './Combobox.types';
diff --git a/packages/react-components/react-combobox/library/src/components/Combobox/useInputTriggerSlot.ts b/packages/react-components/react-combobox/library/src/components/Combobox/useInputTriggerSlot.ts
index d297d154b506a..748f2a08474ef 100644
--- a/packages/react-components/react-combobox/library/src/components/Combobox/useInputTriggerSlot.ts
+++ b/packages/react-components/react-combobox/library/src/components/Combobox/useInputTriggerSlot.ts
@@ -5,10 +5,11 @@ import type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';
import { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';
import type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';
import { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';
-import { ComboboxProps } from '../Combobox/Combobox.types';
-import { UseTriggerSlotState, useTriggerSlot } from '../../utils/useTriggerSlot';
-import { ComboboxBaseState } from '../../utils/ComboboxBase.types';
-import { OptionValue } from '../../utils/OptionCollection.types';
+import type { ComboboxProps } from '../Combobox/Combobox.types';
+import type { UseTriggerSlotState } from '../../utils/useTriggerSlot';
+import { useTriggerSlot } from '../../utils/useTriggerSlot';
+import type { ComboboxBaseState } from '../../utils/ComboboxBase.types';
+import type { OptionValue } from '../../utils/OptionCollection.types';
import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
type UsedComboboxState = UseTriggerSlotState &
diff --git a/packages/react-components/react-combobox/library/src/components/Dropdown/Dropdown.test.tsx b/packages/react-components/react-combobox/library/src/components/Dropdown/Dropdown.test.tsx
index b89133fce4582..3897440821022 100644
--- a/packages/react-components/react-combobox/library/src/components/Dropdown/Dropdown.test.tsx
+++ b/packages/react-components/react-combobox/library/src/components/Dropdown/Dropdown.test.tsx
@@ -7,7 +7,7 @@ import { Option } from '../Option/index';
import { isConformant } from '../../testing/isConformant';
import { resetIdsForTests } from '@fluentui/react-utilities';
import { dropdownClassNames } from './useDropdownStyles.styles';
-import { DropdownProps } from '@fluentui/react-combobox';
+import type { DropdownProps } from '@fluentui/react-combobox';
describe('Dropdown', () => {
beforeEach(() => {
diff --git a/packages/react-components/react-combobox/library/src/components/Dropdown/Dropdown.types.ts b/packages/react-components/react-combobox/library/src/components/Dropdown/Dropdown.types.ts
index a13b89796fa9c..e59552d89f38a 100644
--- a/packages/react-components/react-combobox/library/src/components/Dropdown/Dropdown.types.ts
+++ b/packages/react-components/react-combobox/library/src/components/Dropdown/Dropdown.types.ts
@@ -8,7 +8,7 @@ import type {
ComboboxBaseProps,
ComboboxBaseState,
} from '../../utils/ComboboxBase.types';
-import { Listbox } from '../Listbox/Listbox';
+import type { Listbox } from '../Listbox/Listbox';
export type DropdownSlots = {
/** The root dropdown slot */
diff --git a/packages/react-components/react-combobox/library/src/components/Dropdown/useButtonTriggerSlot.ts b/packages/react-components/react-combobox/library/src/components/Dropdown/useButtonTriggerSlot.ts
index 3e75cea46e024..68c4d861abeb9 100644
--- a/packages/react-components/react-combobox/library/src/components/Dropdown/useButtonTriggerSlot.ts
+++ b/packages/react-components/react-combobox/library/src/components/Dropdown/useButtonTriggerSlot.ts
@@ -4,7 +4,8 @@ import * as React from 'react';
import { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';
import type { Slot, ExtractSlotProps, SlotComponentType } from '@fluentui/react-utilities';
import type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';
-import { useTriggerSlot, UseTriggerSlotState } from '../../utils/useTriggerSlot';
+import type { UseTriggerSlotState } from '../../utils/useTriggerSlot';
+import { useTriggerSlot } from '../../utils/useTriggerSlot';
import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
type UseButtonTriggerSlotOptions = {
diff --git a/packages/react-components/react-combobox/library/src/components/Dropdown/useDropdownStyles.styles.ts b/packages/react-components/react-combobox/library/src/components/Dropdown/useDropdownStyles.styles.ts
index 6101d94e671e3..833355e973d94 100644
--- a/packages/react-components/react-combobox/library/src/components/Dropdown/useDropdownStyles.styles.ts
+++ b/packages/react-components/react-combobox/library/src/components/Dropdown/useDropdownStyles.styles.ts
@@ -2,7 +2,7 @@
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
import { iconSizes } from '../../utils/internalTokens';
import type { DropdownSlots, DropdownState } from './Dropdown.types';
diff --git a/packages/react-components/react-combobox/library/src/components/Listbox/Listbox.types.ts b/packages/react-components/react-combobox/library/src/components/Listbox/Listbox.types.ts
index b92bc0cecaa33..db505cbd6a0ec 100644
--- a/packages/react-components/react-combobox/library/src/components/Listbox/Listbox.types.ts
+++ b/packages/react-components/react-combobox/library/src/components/Listbox/Listbox.types.ts
@@ -4,8 +4,8 @@ import type {
ActiveDescendantContextValue,
ActiveDescendantImperativeRef,
} from '@fluentui/react-aria';
-import { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';
-import { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';
+import type { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';
+import type { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';
import type { ListboxContextValue } from '../../contexts/ListboxContext';
export type ListboxSlots = {
diff --git a/packages/react-components/react-combobox/library/src/components/Listbox/useListbox.ts b/packages/react-components/react-combobox/library/src/components/Listbox/useListbox.ts
index fce621ffd29f6..10404a22f7082 100644
--- a/packages/react-components/react-combobox/library/src/components/Listbox/useListbox.ts
+++ b/packages/react-components/react-combobox/library/src/components/Listbox/useListbox.ts
@@ -9,8 +9,8 @@ import {
useMergedRefs,
} from '@fluentui/react-utilities';
import { useHasParentContext } from '@fluentui/react-context-selector';
+import type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';
import {
- ActiveDescendantChangeEvent,
useActiveDescendant,
useActiveDescendantContext,
useHasParentActiveDescendantContext,
diff --git a/packages/react-components/react-combobox/library/src/components/Listbox/useListboxStyles.styles.ts b/packages/react-components/react-combobox/library/src/components/Listbox/useListboxStyles.styles.ts
index 8af7bfcdae338..5e7463b93a18f 100644
--- a/packages/react-components/react-combobox/library/src/components/Listbox/useListboxStyles.styles.ts
+++ b/packages/react-components/react-combobox/library/src/components/Listbox/useListboxStyles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { tokens } from '@fluentui/react-theme';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import { makeStyles, mergeClasses } from '@griffel/react';
import type { ListboxSlots, ListboxState } from './Listbox.types';
diff --git a/packages/react-components/react-combobox/library/src/components/Option/Option.types.ts b/packages/react-components/react-combobox/library/src/components/Option/Option.types.ts
index 4a108241b9818..abaf826a23c77 100644
--- a/packages/react-components/react-combobox/library/src/components/Option/Option.types.ts
+++ b/packages/react-components/react-combobox/library/src/components/Option/Option.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
export type OptionSlots = {
/** The root option slot, with role="option" */
diff --git a/packages/react-components/react-combobox/library/src/components/Option/useOptionStyles.styles.ts b/packages/react-components/react-combobox/library/src/components/Option/useOptionStyles.styles.ts
index e0e758d590570..e5ff5e84b662f 100644
--- a/packages/react-components/react-combobox/library/src/components/Option/useOptionStyles.styles.ts
+++ b/packages/react-components/react-combobox/library/src/components/Option/useOptionStyles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { tokens } from '@fluentui/react-theme';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
import type { OptionSlots, OptionState } from './Option.types';
diff --git a/packages/react-components/react-combobox/library/src/components/OptionGroup/useOptionGroup.ts b/packages/react-components/react-combobox/library/src/components/OptionGroup/useOptionGroup.ts
index 675228c96aadf..0f972367551b2 100644
--- a/packages/react-components/react-combobox/library/src/components/OptionGroup/useOptionGroup.ts
+++ b/packages/react-components/react-combobox/library/src/components/OptionGroup/useOptionGroup.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
import type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';
diff --git a/packages/react-components/react-combobox/library/src/components/OptionGroup/useOptionGroupStyles.styles.ts b/packages/react-components/react-combobox/library/src/components/OptionGroup/useOptionGroupStyles.styles.ts
index ead2b6752f38a..21d68f1cdcfaa 100644
--- a/packages/react-components/react-combobox/library/src/components/OptionGroup/useOptionGroupStyles.styles.ts
+++ b/packages/react-components/react-combobox/library/src/components/OptionGroup/useOptionGroupStyles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { tokens } from '@fluentui/react-theme';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import { makeStyles, mergeClasses } from '@griffel/react';
import type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';
diff --git a/packages/react-components/react-combobox/library/src/contexts/ComboboxContext.ts b/packages/react-components/react-combobox/library/src/contexts/ComboboxContext.ts
index b2b8535856046..5ac9b1b1a413d 100644
--- a/packages/react-components/react-combobox/library/src/contexts/ComboboxContext.ts
+++ b/packages/react-components/react-combobox/library/src/contexts/ComboboxContext.ts
@@ -1,7 +1,7 @@
'use client';
import { createContext } from '@fluentui/react-context-selector';
-import { ComboboxState } from '../components/Combobox/Combobox.types';
+import type { ComboboxState } from '../components/Combobox/Combobox.types';
/**
* Context shared with Combobox, Listbox, & Options
diff --git a/packages/react-components/react-combobox/library/src/contexts/ListboxContext.ts b/packages/react-components/react-combobox/library/src/contexts/ListboxContext.ts
index 64d089ae59ab9..1f019f9f87796 100644
--- a/packages/react-components/react-combobox/library/src/contexts/ListboxContext.ts
+++ b/packages/react-components/react-combobox/library/src/contexts/ListboxContext.ts
@@ -1,9 +1,10 @@
'use client';
-import * as React from 'react';
-import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';
-import { ActiveDescendantChangeEvent } from '@fluentui/react-aria';
-import { ListboxState } from '../components/Listbox/Listbox.types';
+import type * as React from 'react';
+import type { ContextSelector } from '@fluentui/react-context-selector';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+import type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';
+import type { ListboxState } from '../components/Listbox/Listbox.types';
/**
* Context shared with all Listbox Options
diff --git a/packages/react-components/react-combobox/library/src/contexts/useComboboxContextValues.ts b/packages/react-components/react-combobox/library/src/contexts/useComboboxContextValues.ts
index 84d9972930646..f0307add9cee4 100644
--- a/packages/react-components/react-combobox/library/src/contexts/useComboboxContextValues.ts
+++ b/packages/react-components/react-combobox/library/src/contexts/useComboboxContextValues.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { ComboboxState } from '../Combobox';
+import type { ComboboxState } from '../Combobox';
import type { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';
export function useComboboxContextValues(
diff --git a/packages/react-components/react-combobox/library/src/contexts/useListboxContextValues.ts b/packages/react-components/react-combobox/library/src/contexts/useListboxContextValues.ts
index 36d9bffa5a723..a789a9d4e60d7 100644
--- a/packages/react-components/react-combobox/library/src/contexts/useListboxContextValues.ts
+++ b/packages/react-components/react-combobox/library/src/contexts/useListboxContextValues.ts
@@ -2,7 +2,7 @@
import * as React from 'react';
import { useHasParentContext } from '@fluentui/react-context-selector';
-import { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';
+import type { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';
import { ListboxContext, useListboxContext_unstable } from './ListboxContext';
export function useListboxContextValues(state: ListboxState): ListboxContextValues {
diff --git a/packages/react-components/react-combobox/library/src/utils/ComboboxBase.types.ts b/packages/react-components/react-combobox/library/src/utils/ComboboxBase.types.ts
index 21bf23beec7dc..d700c6100a9d4 100644
--- a/packages/react-components/react-combobox/library/src/utils/ComboboxBase.types.ts
+++ b/packages/react-components/react-combobox/library/src/utils/ComboboxBase.types.ts
@@ -1,12 +1,12 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ActiveDescendantChangeEvent, ActiveDescendantContextValue } from '@fluentui/react-aria';
import type { PositioningShorthand } from '@fluentui/react-positioning';
-import { EventData, EventHandler } from '@fluentui/react-utilities';
+import type { EventData, EventHandler } from '@fluentui/react-utilities';
import type { ComboboxContextValue } from '../contexts/ComboboxContext';
import type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';
-import { SelectionProps, SelectionState } from '../utils/Selection.types';
-import { PortalProps } from '@fluentui/react-portal';
-import { ListboxContextValue } from '../contexts/ListboxContext';
+import type { SelectionProps, SelectionState } from '../utils/Selection.types';
+import type { PortalProps } from '@fluentui/react-portal';
+import type { ListboxContextValue } from '../contexts/ListboxContext';
/**
* ComboboxBase Props
diff --git a/packages/react-components/react-combobox/library/src/utils/Selection.types.ts b/packages/react-components/react-combobox/library/src/utils/Selection.types.ts
index 34390e131d24f..b9904985ba149 100644
--- a/packages/react-components/react-combobox/library/src/utils/Selection.types.ts
+++ b/packages/react-components/react-combobox/library/src/utils/Selection.types.ts
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { OptionValue } from './OptionCollection.types';
+import type * as React from 'react';
+import type { OptionValue } from './OptionCollection.types';
export type SelectionProps = {
/**
diff --git a/packages/react-components/react-combobox/library/src/utils/dropdownKeyActions.ts b/packages/react-components/react-combobox/library/src/utils/dropdownKeyActions.ts
index d6642476bccff..72a93b8c5db5f 100644
--- a/packages/react-components/react-combobox/library/src/utils/dropdownKeyActions.ts
+++ b/packages/react-components/react-combobox/library/src/utils/dropdownKeyActions.ts
@@ -1,5 +1,5 @@
import * as keys from '@fluentui/keyboard-keys';
-import * as React from 'react';
+import type * as React from 'react';
/**
* enum of actions available in any type of managed dropdown control
diff --git a/packages/react-components/react-combobox/library/src/utils/useComboboxBaseState.ts b/packages/react-components/react-combobox/library/src/utils/useComboboxBaseState.ts
index b132da251a404..7a129b8933de0 100644
--- a/packages/react-components/react-combobox/library/src/utils/useComboboxBaseState.ts
+++ b/packages/react-components/react-combobox/library/src/utils/useComboboxBaseState.ts
@@ -3,12 +3,12 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';
-import { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';
+import type { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';
import { useOptionCollection } from '../utils/useOptionCollection';
-import { OptionValue } from '../utils/OptionCollection.types';
+import type { OptionValue } from '../utils/OptionCollection.types';
import { useSelection } from '../utils/useSelection';
import type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';
-import { SelectionEvents } from './Selection.types';
+import type { SelectionEvents } from './Selection.types';
/**
* State shared between Combobox and Dropdown components
diff --git a/packages/react-components/react-combobox/library/src/utils/useComboboxPositioning.ts b/packages/react-components/react-combobox/library/src/utils/useComboboxPositioning.ts
index 3f481ad72ef4f..c19ae5f1ec72a 100644
--- a/packages/react-components/react-combobox/library/src/utils/useComboboxPositioning.ts
+++ b/packages/react-components/react-combobox/library/src/utils/useComboboxPositioning.ts
@@ -1,8 +1,9 @@
'use client';
-import { PositioningShorthandValue, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
+import type { PositioningShorthandValue } from '@fluentui/react-positioning';
+import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
import type { ComboboxBaseProps } from './ComboboxBase.types';
-import * as React from 'react';
+import type * as React from 'react';
export function useComboboxPositioning(props: ComboboxBaseProps): [
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-deprecated
diff --git a/packages/react-components/react-combobox/library/src/utils/useListboxSlot.ts b/packages/react-components/react-combobox/library/src/utils/useListboxSlot.ts
index 23568ee5fd766..3c664efb550fe 100644
--- a/packages/react-components/react-combobox/library/src/utils/useListboxSlot.ts
+++ b/packages/react-components/react-combobox/library/src/utils/useListboxSlot.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { type FieldControlProps, useFieldControlProps_unstable } from '@fluentui/react-field';
import {
mergeCallbacks,
@@ -13,7 +13,7 @@ import {
import type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';
import type { ComboboxBaseState } from './ComboboxBase.types';
import { Listbox } from '../Listbox';
-import { ListboxProps } from '../Listbox';
+import type { ListboxProps } from '../Listbox';
export type UseListboxSlotState = Pick;
diff --git a/packages/react-components/react-combobox/library/src/utils/useSelection.ts b/packages/react-components/react-combobox/library/src/utils/useSelection.ts
index 4c78641afbd2a..bfb950c95b15d 100644
--- a/packages/react-components/react-combobox/library/src/utils/useSelection.ts
+++ b/packages/react-components/react-combobox/library/src/utils/useSelection.ts
@@ -2,8 +2,8 @@
import * as React from 'react';
import { useControllableState } from '@fluentui/react-utilities';
-import { OptionValue } from './OptionCollection.types';
-import { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';
+import type { OptionValue } from './OptionCollection.types';
+import type { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';
export const useSelection = (props: SelectionProps): SelectionState => {
const { defaultSelectedOptions, multiselect, onOptionSelect } = props;
diff --git a/packages/react-components/react-combobox/library/src/utils/useTriggerSlot.ts b/packages/react-components/react-combobox/library/src/utils/useTriggerSlot.ts
index 1c42459591142..b7b1dfd0a2d9a 100644
--- a/packages/react-components/react-combobox/library/src/utils/useTriggerSlot.ts
+++ b/packages/react-components/react-combobox/library/src/utils/useTriggerSlot.ts
@@ -7,7 +7,7 @@ import { mergeCallbacks, slot, useEventCallback, useMergedRefs } from '@fluentui
import type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';
import { getDropdownActionFromKey } from '../utils/dropdownKeyActions';
import type { ComboboxBaseState } from './ComboboxBase.types';
-import { OptionValue } from './OptionCollection.types';
+import type { OptionValue } from './OptionCollection.types';
export type UseTriggerSlotState = Pick<
ComboboxBaseState,
diff --git a/packages/react-components/react-combobox/stories/src/Combobox/ComboboxFiltering.stories.tsx b/packages/react-components/react-combobox/stories/src/Combobox/ComboboxFiltering.stories.tsx
index 843bffc85b649..df1ea934e59d7 100644
--- a/packages/react-components/react-combobox/stories/src/Combobox/ComboboxFiltering.stories.tsx
+++ b/packages/react-components/react-combobox/stories/src/Combobox/ComboboxFiltering.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { Combobox, ComboboxProps, makeStyles, useComboboxFilter, useId } from '@fluentui/react-components';
+import type { JSXElement, ComboboxProps } from '@fluentui/react-components';
+import { Combobox, makeStyles, useComboboxFilter, useId } from '@fluentui/react-components';
const useStyles = makeStyles({
root: {
diff --git a/packages/react-components/react-combobox/stories/src/Combobox/index.stories.tsx b/packages/react-components/react-combobox/stories/src/Combobox/index.stories.tsx
index 33f3ab85abc03..b19334204b993 100644
--- a/packages/react-components/react-combobox/stories/src/Combobox/index.stories.tsx
+++ b/packages/react-components/react-combobox/stories/src/Combobox/index.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { Combobox, Listbox, Option } from '@fluentui/react-components';
import descriptionMd from './ComboboxDescription.md';
diff --git a/packages/react-components/react-combobox/stories/src/Dropdown/index.stories.tsx b/packages/react-components/react-combobox/stories/src/Dropdown/index.stories.tsx
index c11fa224469ec..0e8a10a9aaab1 100644
--- a/packages/react-components/react-combobox/stories/src/Dropdown/index.stories.tsx
+++ b/packages/react-components/react-combobox/stories/src/Dropdown/index.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { Dropdown, Listbox, Option } from '@fluentui/react-components';
import descriptionMd from './DropdownDescription.md';
diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts
index a37fc73e1e2e3..ce2a87fd18461 100644
--- a/packages/react-components/react-components/src/unstable/index.ts
+++ b/packages/react-components/react-components/src/unstable/index.ts
@@ -37,7 +37,7 @@ export type {
InfoLabelSlots,
InfoLabelState,
} from '@fluentui/react-infobutton';
-/* eslint-enable @typescript-eslint/no-deprecated */
+/* eslint-disable @typescript-eslint/no-deprecated */
export {
/** @deprecated migrated to \@fluentui\-contrib/react\-virtualizer for stable release.*/
diff --git a/packages/react-components/react-conformance-griffel/src/overridesWin.ts b/packages/react-components/react-conformance-griffel/src/overridesWin.ts
index 5e9662d1c4cee..e627a128e03d8 100644
--- a/packages/react-components/react-conformance-griffel/src/overridesWin.ts
+++ b/packages/react-components/react-conformance-griffel/src/overridesWin.ts
@@ -122,10 +122,9 @@ async function render(element: React.ReactElement, container: HTMLElement) {
} else {
// augment legacy react-dom APIs when using React 18 types
const ReactDOM = (await import('react-dom')) as unknown as ReactDOMLegacy;
- /* eslint-disable @typescript-eslint/no-deprecated -- This is expect to support React 17 */
+
ReactDOM.render(element, container);
unmount = () => ReactDOM.unmountComponentAtNode(container);
- /* eslint-enable @typescript-eslint/no-deprecated */
}
return { container, unmount };
diff --git a/packages/react-components/react-context-selector/etc/react-context-selector.api.md b/packages/react-components/react-context-selector/etc/react-context-selector.api.md
index 781ff6f659b93..de10516c8addb 100644
--- a/packages/react-components/react-context-selector/etc/react-context-selector.api.md
+++ b/packages/react-components/react-context-selector/etc/react-context-selector.api.md
@@ -4,7 +4,7 @@
```ts
-import * as React_2 from 'react';
+import type * as React_2 from 'react';
// @internal (undocumented)
export type Context = React_2.Context & {
diff --git a/packages/react-components/react-context-selector/src/createContext.ts b/packages/react-components/react-context-selector/src/createContext.ts
index 767760c2ee848..b8d0b2d3bf2ba 100644
--- a/packages/react-components/react-context-selector/src/createContext.ts
+++ b/packages/react-components/react-context-selector/src/createContext.ts
@@ -4,7 +4,7 @@ import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
import * as React from 'react';
import { unstable_NormalPriority as NormalPriority, unstable_runWithPriority as runWithPriority } from 'scheduler';
-import { Context, ContextValue } from './types';
+import type { Context, ContextValue } from './types';
const createProvider = (Original: React.Provider>) => {
const Provider: React.FC> = props => {
diff --git a/packages/react-components/react-context-selector/src/types.ts b/packages/react-components/react-context-selector/src/types.ts
index 21830cee6d2f1..d01f4d65e897d 100644
--- a/packages/react-components/react-context-selector/src/types.ts
+++ b/packages/react-components/react-context-selector/src/types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
/**
* @internal
diff --git a/packages/react-components/react-context-selector/src/useContextSelector.ts b/packages/react-components/react-context-selector/src/useContextSelector.ts
index f7253de683bf6..bbd90e44a8c51 100644
--- a/packages/react-components/react-context-selector/src/useContextSelector.ts
+++ b/packages/react-components/react-context-selector/src/useContextSelector.ts
@@ -3,7 +3,7 @@
import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
import * as React from 'react';
-import { Context, ContextSelector, ContextValue, ContextVersion } from './types';
+import type { Context, ContextSelector, ContextValue, ContextVersion } from './types';
/**
* This hook returns context selected value by selector.
diff --git a/packages/react-components/react-context-selector/src/useHasParentContext.ts b/packages/react-components/react-context-selector/src/useHasParentContext.ts
index 866d8e9f7cc9d..bc78fbfb4f8a7 100644
--- a/packages/react-components/react-context-selector/src/useHasParentContext.ts
+++ b/packages/react-components/react-context-selector/src/useHasParentContext.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { Context, ContextValue } from './types';
+import type { Context, ContextValue } from './types';
/**
* Utility hook for contexts created by react-context-selector to determine if a parent context exists
diff --git a/packages/react-components/react-datepicker-compat/library/etc/react-datepicker-compat.api.md b/packages/react-components/react-datepicker-compat/library/etc/react-datepicker-compat.api.md
index 2290c8b010f3d..110fb952d86b2 100644
--- a/packages/react-components/react-datepicker-compat/library/etc/react-datepicker-compat.api.md
+++ b/packages/react-components/react-datepicker-compat/library/etc/react-datepicker-compat.api.md
@@ -9,10 +9,10 @@ import { CalendarStrings } from '@fluentui/react-calendar-compat';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { DateFormatting } from '@fluentui/react-calendar-compat';
-import { DayOfWeek } from '@fluentui/react-calendar-compat';
-import { FirstWeekOfYear } from '@fluentui/react-calendar-compat';
+import type { DayOfWeek } from '@fluentui/react-calendar-compat';
+import type { FirstWeekOfYear } from '@fluentui/react-calendar-compat';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { Input } from '@fluentui/react-input';
+import type { Input } from '@fluentui/react-input';
import type { JSXElement } from '@fluentui/react-utilities';
import type { PortalProps } from '@fluentui/react-portal';
import type { PositioningProps } from '@fluentui/react-positioning';
diff --git a/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/DatePicker.test.tsx b/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/DatePicker.test.tsx
index 79b30802f1941..9f77e37bf4b13 100644
--- a/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/DatePicker.test.tsx
+++ b/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/DatePicker.test.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { fireEvent, render, RenderResult } from '@testing-library/react';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
import { DatePicker } from './DatePicker';
import { isConformant } from '../../testing/isConformant';
import { datePickerClassNames } from './useDatePickerStyles.styles';
diff --git a/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/DatePicker.types.ts b/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/DatePicker.types.ts
index 2b6b11b75ee20..e53da931bf333 100644
--- a/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/DatePicker.types.ts
+++ b/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/DatePicker.types.ts
@@ -1,5 +1,5 @@
-import { DayOfWeek, FirstWeekOfYear } from '@fluentui/react-calendar-compat';
-import { Input } from '@fluentui/react-input';
+import type { DayOfWeek, FirstWeekOfYear } from '@fluentui/react-calendar-compat';
+import type { Input } from '@fluentui/react-input';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type { CalendarProps, CalendarStrings, DateFormatting } from '@fluentui/react-calendar-compat';
import type { PortalProps } from '@fluentui/react-portal';
diff --git a/packages/react-components/react-datepicker-compat/library/src/utils/usePopupPositioning.ts b/packages/react-components/react-datepicker-compat/library/src/utils/usePopupPositioning.ts
index beac98a83de2e..744d7789aa0ea 100644
--- a/packages/react-components/react-datepicker-compat/library/src/utils/usePopupPositioning.ts
+++ b/packages/react-components/react-datepicker-compat/library/src/utils/usePopupPositioning.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
import type { DatePickerProps } from '../DatePicker';
diff --git a/packages/react-components/react-dialog/library/etc/react-dialog.api.md b/packages/react-components/react-dialog/library/etc/react-dialog.api.md
index 9f06b1188b3f1..cc7f627e67936 100644
--- a/packages/react-components/react-dialog/library/etc/react-dialog.api.md
+++ b/packages/react-components/react-dialog/library/etc/react-dialog.api.md
@@ -4,11 +4,11 @@
```ts
-import { ARIAButtonResultProps } from '@fluentui/react-aria';
-import { ARIAButtonType } from '@fluentui/react-aria';
+import type { ARIAButtonResultProps } from '@fluentui/react-aria';
+import type { ARIAButtonType } from '@fluentui/react-aria';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
-import { ContextSelector } from '@fluentui/react-context-selector';
+import type { ContextSelector } from '@fluentui/react-context-selector';
import type { ExtractSlotProps } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
@@ -18,7 +18,7 @@ import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TriggerProps } from '@fluentui/react-utilities';
-import { useModalAttributes } from '@fluentui/react-tabster';
+import type { useModalAttributes } from '@fluentui/react-tabster';
// @public
export const Dialog: React_2.FC;
diff --git a/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.test.tsx b/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.test.tsx
index 58c1850fe910f..0701b0962e20b 100644
--- a/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.test.tsx
+++ b/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.test.tsx
@@ -1,11 +1,12 @@
import * as React from 'react';
import { fireEvent, render } from '@testing-library/react';
import { Dialog } from './Dialog';
-import { DialogProps } from './Dialog.types';
+import type { DialogProps } from './Dialog.types';
import { isConformant } from '../../testing/isConformant';
import { DialogTrigger } from '../DialogTrigger/DialogTrigger';
import { makeStyles, mergeClasses } from '@griffel/react';
-import { DialogSurface, DialogSurfaceProps } from '../../DialogSurface';
+import type { DialogSurfaceProps } from '../../DialogSurface';
+import { DialogSurface } from '../../DialogSurface';
describe('Dialog', () => {
isConformant({
diff --git a/packages/react-components/react-dialog/library/src/components/Dialog/useDialog.test.ts b/packages/react-components/react-dialog/library/src/components/Dialog/useDialog.test.ts
index 998bbfd87edad..5ee69dafaf2d3 100644
--- a/packages/react-components/react-dialog/library/src/components/Dialog/useDialog.test.ts
+++ b/packages/react-components/react-dialog/library/src/components/Dialog/useDialog.test.ts
@@ -1,5 +1,5 @@
import { act, renderHook } from '@testing-library/react-hooks';
-import { DialogOpenChangeData } from './Dialog.types';
+import type { DialogOpenChangeData } from './Dialog.types';
import * as React from 'react';
import { useDialog_unstable } from './useDialog';
diff --git a/packages/react-components/react-dialog/library/src/components/DialogActions/DialogActions.test.tsx b/packages/react-components/react-dialog/library/src/components/DialogActions/DialogActions.test.tsx
index d9ea91db679c2..d13b48ba28448 100644
--- a/packages/react-components/react-dialog/library/src/components/DialogActions/DialogActions.test.tsx
+++ b/packages/react-components/react-dialog/library/src/components/DialogActions/DialogActions.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { DialogActions } from './DialogActions';
import { isConformant } from '../../testing/isConformant';
-import { DialogActionsProps } from './DialogActions.types';
+import type { DialogActionsProps } from './DialogActions.types';
describe('DialogActions', () => {
isConformant({
diff --git a/packages/react-components/react-dialog/library/src/components/DialogActions/useDialogActions.ts b/packages/react-components/react-dialog/library/src/components/DialogActions/useDialogActions.ts
index 8433dbc709164..7d0992a19f470 100644
--- a/packages/react-components/react-dialog/library/src/components/DialogActions/useDialogActions.ts
+++ b/packages/react-components/react-dialog/library/src/components/DialogActions/useDialogActions.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { DialogActionsProps, DialogActionsState } from './DialogActions.types';
diff --git a/packages/react-components/react-dialog/library/src/components/DialogBody/useDialogBody.ts b/packages/react-components/react-dialog/library/src/components/DialogBody/useDialogBody.ts
index b2ff6ffdfa43d..f611e2e34893e 100644
--- a/packages/react-components/react-dialog/library/src/components/DialogBody/useDialogBody.ts
+++ b/packages/react-components/react-dialog/library/src/components/DialogBody/useDialogBody.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { DialogBodyProps, DialogBodyState } from './DialogBody.types';
diff --git a/packages/react-components/react-dialog/library/src/components/DialogContent/useDialogContent.ts b/packages/react-components/react-dialog/library/src/components/DialogContent/useDialogContent.ts
index 99539325727fc..b60a16af4dd93 100644
--- a/packages/react-components/react-dialog/library/src/components/DialogContent/useDialogContent.ts
+++ b/packages/react-components/react-dialog/library/src/components/DialogContent/useDialogContent.ts
@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import { DialogContentProps, DialogContentState } from './DialogContent.types';
+import type { DialogContentProps, DialogContentState } from './DialogContent.types';
/**
* Create the state required to render DialogBody.
diff --git a/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.types.ts b/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.types.ts
index 5dd62ad898d46..2d435cb50dd5f 100644
--- a/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.types.ts
+++ b/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.types.ts
@@ -2,7 +2,7 @@ import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
import type { PortalProps } from '@fluentui/react-portal';
import type { ComponentProps, ComponentState, Slot, ExtractSlotProps } from '@fluentui/react-utilities';
-import { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';
+import type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';
/**
* Custom slot props for the backdrop slot.
diff --git a/packages/react-components/react-dialog/library/src/components/DialogSurface/useDialogSurface.ts b/packages/react-components/react-dialog/library/src/components/DialogSurface/useDialogSurface.ts
index 6fa8e83d27d66..82cede368b5a4 100644
--- a/packages/react-components/react-dialog/library/src/components/DialogSurface/useDialogSurface.ts
+++ b/packages/react-components/react-dialog/library/src/components/DialogSurface/useDialogSurface.ts
@@ -10,7 +10,7 @@ import {
getIntrinsicElementProps,
useIsomorphicLayoutEffect,
} from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
import { useDialogContext_unstable, useDialogBackdropContext_unstable } from '../../contexts';
import { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';
diff --git a/packages/react-components/react-dialog/library/src/components/DialogTrigger/DialogTrigger.test.tsx b/packages/react-components/react-dialog/library/src/components/DialogTrigger/DialogTrigger.test.tsx
index 528ac35fa459f..8c453108ec5bc 100644
--- a/packages/react-components/react-dialog/library/src/components/DialogTrigger/DialogTrigger.test.tsx
+++ b/packages/react-components/react-dialog/library/src/components/DialogTrigger/DialogTrigger.test.tsx
@@ -4,7 +4,7 @@ import { createEvent, fireEvent, render } from '@testing-library/react';
import { isConformant } from '../../testing/isConformant';
import { mockUseDialogContext } from '../../testing/mockUseDialogContext';
import { Enter } from '@fluentui/keyboard-keys';
-import { DialogTriggerProps } from './DialogTrigger.types';
+import type { DialogTriggerProps } from './DialogTrigger.types';
jest.mock('../../contexts/dialogContext.ts');
diff --git a/packages/react-components/react-dialog/library/src/components/DialogTrigger/DialogTrigger.tsx b/packages/react-components/react-dialog/library/src/components/DialogTrigger/DialogTrigger.tsx
index db87d15ce3b7d..6266bff69cd82 100644
--- a/packages/react-components/react-dialog/library/src/components/DialogTrigger/DialogTrigger.tsx
+++ b/packages/react-components/react-dialog/library/src/components/DialogTrigger/DialogTrigger.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useDialogTrigger_unstable } from './useDialogTrigger';
import { renderDialogTrigger_unstable } from './renderDialogTrigger';
import type { DialogTriggerProps } from './DialogTrigger.types';
diff --git a/packages/react-components/react-dialog/library/src/components/DialogTrigger/DialogTrigger.types.ts b/packages/react-components/react-dialog/library/src/components/DialogTrigger/DialogTrigger.types.ts
index 8b7d1254bdc41..f8ac47f202ba4 100644
--- a/packages/react-components/react-dialog/library/src/components/DialogTrigger/DialogTrigger.types.ts
+++ b/packages/react-components/react-dialog/library/src/components/DialogTrigger/DialogTrigger.types.ts
@@ -1,6 +1,6 @@
-import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';
+import type { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';
import type { TriggerProps } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
export type DialogTriggerAction = 'open' | 'close';
diff --git a/packages/react-components/react-dialog/library/src/components/DialogTrigger/useDialogTrigger.ts b/packages/react-components/react-dialog/library/src/components/DialogTrigger/useDialogTrigger.ts
index 9e842fe103926..569e622b3682d 100644
--- a/packages/react-components/react-dialog/library/src/components/DialogTrigger/useDialogTrigger.ts
+++ b/packages/react-components/react-dialog/library/src/components/DialogTrigger/useDialogTrigger.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import {
applyTriggerPropsToChildren,
getTriggerChild,
diff --git a/packages/react-components/react-dialog/library/src/contexts/dialogContext.ts b/packages/react-components/react-dialog/library/src/contexts/dialogContext.ts
index 56d794d8e9980..f8056b12ea72c 100644
--- a/packages/react-components/react-dialog/library/src/contexts/dialogContext.ts
+++ b/packages/react-components/react-dialog/library/src/contexts/dialogContext.ts
@@ -1,11 +1,11 @@
'use client';
-import * as React from 'react';
-import { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';
-import { DialogSurfaceElement } from '../DialogSurface';
-import type { Context } from '@fluentui/react-context-selector';
+import type * as React from 'react';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+import type { DialogSurfaceElement } from '../DialogSurface';
+import type { Context, ContextSelector } from '@fluentui/react-context-selector';
import type { DialogModalType, DialogOpenChangeData } from '../Dialog';
-import { useModalAttributes } from '@fluentui/react-tabster';
+import type { useModalAttributes } from '@fluentui/react-tabster';
export type DialogContextValue = {
open: boolean;
diff --git a/packages/react-components/react-dialog/stories/src/Dialog/DialogActions.stories.tsx b/packages/react-components/react-dialog/stories/src/Dialog/DialogActions.stories.tsx
index 3c4ab44a6df31..498331911fd5e 100644
--- a/packages/react-components/react-dialog/stories/src/Dialog/DialogActions.stories.tsx
+++ b/packages/react-components/react-dialog/stories/src/Dialog/DialogActions.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, CheckboxOnChangeData } from '@fluentui/react-components';
import {
Dialog,
DialogTrigger,
@@ -10,7 +10,6 @@ import {
DialogActions,
Button,
Checkbox,
- CheckboxOnChangeData,
} from '@fluentui/react-components';
import story from './DialogActions.md';
diff --git a/packages/react-components/react-divider/library/etc/react-divider.api.md b/packages/react-components/react-divider/library/etc/react-divider.api.md
index 3057e9deed95b..2d3177eaa3ab1 100644
--- a/packages/react-components/react-divider/library/etc/react-divider.api.md
+++ b/packages/react-components/react-divider/library/etc/react-divider.api.md
@@ -8,7 +8,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import * as React_2 from 'react';
+import type * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-divider/library/src/components/Divider/renderDivider.tsx b/packages/react-components/react-divider/library/src/components/Divider/renderDivider.tsx
index 88f3b146ccf98..11d2ccd361181 100644
--- a/packages/react-components/react-divider/library/src/components/Divider/renderDivider.tsx
+++ b/packages/react-components/react-divider/library/src/components/Divider/renderDivider.tsx
@@ -3,7 +3,7 @@
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { DividerSlots, DividerBaseState } from './Divider.types';
+import type { DividerSlots, DividerBaseState } from './Divider.types';
/**
* Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.
diff --git a/packages/react-components/react-divider/library/src/components/Divider/useDivider.ts b/packages/react-components/react-divider/library/src/components/Divider/useDivider.ts
index dd24f2ce227fd..53264edb21e89 100644
--- a/packages/react-components/react-divider/library/src/components/Divider/useDivider.ts
+++ b/packages/react-components/react-divider/library/src/components/Divider/useDivider.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useId, slot } from '@fluentui/react-utilities';
import type { DividerBaseProps, DividerBaseState, DividerProps, DividerState } from './Divider.types';
diff --git a/packages/react-components/react-divider/library/src/components/Divider/useDividerStyles.styles.ts b/packages/react-components/react-divider/library/src/components/Divider/useDividerStyles.styles.ts
index 3ce2fd7a93f35..1108bc1a8c2e4 100644
--- a/packages/react-components/react-divider/library/src/components/Divider/useDividerStyles.styles.ts
+++ b/packages/react-components/react-divider/library/src/components/Divider/useDividerStyles.styles.ts
@@ -2,7 +2,7 @@
import { mergeClasses, shorthands, makeStyles } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
-import { DividerSlots, DividerState } from './Divider.types';
+import type { DividerSlots, DividerState } from './Divider.types';
import type { SlotClassNames } from '@fluentui/react-utilities';
export const dividerClassNames: SlotClassNames = {
diff --git a/packages/react-components/react-divider/library/src/testing/isConformant.ts b/packages/react-components/react-divider/library/src/testing/isConformant.ts
index 53c3fc00e02c7..c8f15c9e45d1b 100644
--- a/packages/react-components/react-divider/library/src/testing/isConformant.ts
+++ b/packages/react-components/react-divider/library/src/testing/isConformant.ts
@@ -1,4 +1,5 @@
-import { isConformant as baseIsConformant, IsConformantOptions, TestObject } from '@fluentui/react-conformance';
+import type { IsConformantOptions, TestObject } from '@fluentui/react-conformance';
+import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
import griffelTests from '@fluentui/react-conformance-griffel';
export function isConformant(
diff --git a/packages/react-components/react-divider/stories/src/Divider/index.stories.tsx b/packages/react-components/react-divider/stories/src/Divider/index.stories.tsx
index ca56722e9254f..064fc149f1b2e 100644
--- a/packages/react-components/react-divider/stories/src/Divider/index.stories.tsx
+++ b/packages/react-components/react-divider/stories/src/Divider/index.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { Divider } from '@fluentui/react-components';
import descriptionMd from './DividerDescription.md';
export { Default } from './DividerDefault.stories';
diff --git a/packages/react-components/react-drawer/library/etc/react-drawer.api.md b/packages/react-components/react-drawer/library/etc/react-drawer.api.md
index 77844fffd3b46..f597694682446 100644
--- a/packages/react-components/react-drawer/library/etc/react-drawer.api.md
+++ b/packages/react-components/react-drawer/library/etc/react-drawer.api.md
@@ -13,7 +13,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import type { PresenceDirection } from '@fluentui/react-motion';
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
-import { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
+import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-drawer/library/src/components/Drawer/renderDrawer.tsx b/packages/react-components/react-drawer/library/src/components/Drawer/renderDrawer.tsx
index 025b424c46ecc..b32ffd55c9dcd 100644
--- a/packages/react-components/react-drawer/library/src/components/Drawer/renderDrawer.tsx
+++ b/packages/react-components/react-drawer/library/src/components/Drawer/renderDrawer.tsx
@@ -3,7 +3,8 @@
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';
+import type { DrawerContextValue } from '../../contexts/drawerContext';
+import { DrawerProvider } from '../../contexts/drawerContext';
import type { DrawerState, DrawerSlots } from './Drawer.types';
diff --git a/packages/react-components/react-drawer/library/src/components/Drawer/useDrawer.ts b/packages/react-components/react-drawer/library/src/components/Drawer/useDrawer.ts
index 2c7ec693a71dc..1ae0b180b8ed8 100644
--- a/packages/react-components/react-drawer/library/src/components/Drawer/useDrawer.ts
+++ b/packages/react-components/react-drawer/library/src/components/Drawer/useDrawer.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { slot } from '@fluentui/react-utilities';
import type { DrawerProps, DrawerState } from './Drawer.types';
diff --git a/packages/react-components/react-drawer/library/src/components/DrawerBody/useDrawerBody.ts b/packages/react-components/react-drawer/library/src/components/DrawerBody/useDrawerBody.ts
index ad3537411efbc..451eaf458c43e 100644
--- a/packages/react-components/react-drawer/library/src/components/DrawerBody/useDrawerBody.ts
+++ b/packages/react-components/react-drawer/library/src/components/DrawerBody/useDrawerBody.ts
@@ -11,7 +11,7 @@ import {
} from '@fluentui/react-utilities';
import { useDrawerContext_unstable } from '../../contexts/drawerContext';
-import { DrawerScrollState } from '../../shared/DrawerBase.types';
+import type { DrawerScrollState } from '../../shared/DrawerBase.types';
import type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-drawer/library/src/components/DrawerFooter/DrawerFooter.types.ts b/packages/react-components/react-drawer/library/src/components/DrawerFooter/DrawerFooter.types.ts
index a904d16405d5c..3c671a2e9ac94 100644
--- a/packages/react-components/react-drawer/library/src/components/DrawerFooter/DrawerFooter.types.ts
+++ b/packages/react-components/react-drawer/library/src/components/DrawerFooter/DrawerFooter.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { DrawerScrollState } from '../../shared/DrawerBase.types';
+import type { DrawerScrollState } from '../../shared/DrawerBase.types';
export type DrawerFooterSlots = {
root: Slot<'footer'>;
diff --git a/packages/react-components/react-drawer/library/src/components/DrawerFooter/useDrawerFooter.ts b/packages/react-components/react-drawer/library/src/components/DrawerFooter/useDrawerFooter.ts
index 0638b448366ef..e915e3e446792 100644
--- a/packages/react-components/react-drawer/library/src/components/DrawerFooter/useDrawerFooter.ts
+++ b/packages/react-components/react-drawer/library/src/components/DrawerFooter/useDrawerFooter.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types';
diff --git a/packages/react-components/react-drawer/library/src/components/DrawerHeader/DrawerHeader.types.ts b/packages/react-components/react-drawer/library/src/components/DrawerHeader/DrawerHeader.types.ts
index 2b1188cb57723..b511ab60577f1 100644
--- a/packages/react-components/react-drawer/library/src/components/DrawerHeader/DrawerHeader.types.ts
+++ b/packages/react-components/react-drawer/library/src/components/DrawerHeader/DrawerHeader.types.ts
@@ -1,6 +1,6 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { DrawerScrollState } from '../../shared/DrawerBase.types';
+import type { DrawerScrollState } from '../../shared/DrawerBase.types';
export type DrawerHeaderSlots = {
/**
diff --git a/packages/react-components/react-drawer/library/src/components/DrawerHeader/useDrawerHeader.ts b/packages/react-components/react-drawer/library/src/components/DrawerHeader/useDrawerHeader.ts
index abb2fe747c13c..e65c197151a83 100644
--- a/packages/react-components/react-drawer/library/src/components/DrawerHeader/useDrawerHeader.ts
+++ b/packages/react-components/react-drawer/library/src/components/DrawerHeader/useDrawerHeader.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import { useDrawerContext_unstable } from '../../contexts/drawerContext';
diff --git a/packages/react-components/react-drawer/library/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.ts b/packages/react-components/react-drawer/library/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.ts
index 2ae339f39eeef..65188ce706e32 100644
--- a/packages/react-components/react-drawer/library/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.ts
+++ b/packages/react-components/react-drawer/library/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { DrawerHeaderNavigationProps, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';
diff --git a/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/DrawerHeaderTitle.test.tsx b/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/DrawerHeaderTitle.test.tsx
index f5ab2d4db55bc..6a18bda8df0cb 100644
--- a/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/DrawerHeaderTitle.test.tsx
+++ b/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/DrawerHeaderTitle.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { DrawerHeaderTitle } from './DrawerHeaderTitle';
import { isConformant } from '../../testing/isConformant';
-import { DrawerHeaderTitleProps } from './DrawerHeaderTitle.types';
+import type { DrawerHeaderTitleProps } from './DrawerHeaderTitle.types';
import { drawerHeaderTitleClassNames } from './useDrawerHeaderTitleStyles.styles';
describe('DrawerHeaderTitle', () => {
diff --git a/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts b/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts
index 2969a22bd24a1..70bbaa9351416 100644
--- a/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts
+++ b/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import { useDialogContext_unstable } from '@fluentui/react-dialog';
diff --git a/packages/react-components/react-drawer/library/src/components/InlineDrawer/InlineDrawer.test.tsx b/packages/react-components/react-drawer/library/src/components/InlineDrawer/InlineDrawer.test.tsx
index c63c8428de7cd..7ab96113d0572 100644
--- a/packages/react-components/react-drawer/library/src/components/InlineDrawer/InlineDrawer.test.tsx
+++ b/packages/react-components/react-drawer/library/src/components/InlineDrawer/InlineDrawer.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { InlineDrawer } from './InlineDrawer';
import { isConformant } from '../../testing/isConformant';
-import { InlineDrawerProps } from './InlineDrawer.types';
+import type { InlineDrawerProps } from './InlineDrawer.types';
describe('InlineDrawer', () => {
isConformant({
diff --git a/packages/react-components/react-drawer/library/src/components/InlineDrawer/renderInlineDrawer.tsx b/packages/react-components/react-drawer/library/src/components/InlineDrawer/renderInlineDrawer.tsx
index 930ad25fa2ca9..7d23c12fe8f26 100644
--- a/packages/react-components/react-drawer/library/src/components/InlineDrawer/renderInlineDrawer.tsx
+++ b/packages/react-components/react-drawer/library/src/components/InlineDrawer/renderInlineDrawer.tsx
@@ -2,7 +2,8 @@
/** @jsxImportSource @fluentui/react-jsx-runtime */
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';
+import type { DrawerContextValue } from '../../contexts/drawerContext';
+import { DrawerProvider } from '../../contexts/drawerContext';
import type { InlineDrawerState, InlineDrawerSlots } from './InlineDrawer.types';
diff --git a/packages/react-components/react-drawer/library/src/components/InlineDrawer/useInlineDrawer.ts b/packages/react-components/react-drawer/library/src/components/InlineDrawer/useInlineDrawer.ts
index 4dd0d2845fd2e..ef6564018c514 100644
--- a/packages/react-components/react-drawer/library/src/components/InlineDrawer/useInlineDrawer.ts
+++ b/packages/react-components/react-drawer/library/src/components/InlineDrawer/useInlineDrawer.ts
@@ -1,7 +1,8 @@
'use client';
import * as React from 'react';
-import { PresenceDirection, presenceMotionSlot } from '@fluentui/react-motion';
+import type { PresenceDirection } from '@fluentui/react-motion';
+import { presenceMotionSlot } from '@fluentui/react-motion';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.cy.tsx b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.cy.tsx
index 298a090b1ecb7..b9eab9343bce3 100644
--- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.cy.tsx
+++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.cy.tsx
@@ -5,7 +5,7 @@ import { webLightTheme } from '@fluentui/react-theme';
import { testDrawerBaseScenarios } from '../../e2e/DrawerShared';
import { OverlayDrawer } from './OverlayDrawer';
-import { OverlayDrawerProps } from './OverlayDrawer.types';
+import type { OverlayDrawerProps } from './OverlayDrawer.types';
import { overlayDrawerClassNames } from './useOverlayDrawerStyles.styles';
import type { JSXElement } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts
index b2434d690ea5a..98a94cfaeeab3 100644
--- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts
+++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts
@@ -2,7 +2,7 @@
import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
-import { DialogSurfaceState } from '@fluentui/react-dialog';
+import type { DialogSurfaceState } from '@fluentui/react-dialog';
/**
* Styles for the backdrop slot
diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/renderOverlayDrawer.tsx b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/renderOverlayDrawer.tsx
index e7389bb00baa5..49426c99cb7c1 100644
--- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/renderOverlayDrawer.tsx
+++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/renderOverlayDrawer.tsx
@@ -2,7 +2,8 @@
/** @jsxImportSource @fluentui/react-jsx-runtime */
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';
+import type { DrawerContextValue } from '../../contexts/drawerContext';
+import { DrawerProvider } from '../../contexts/drawerContext';
import { DialogBackdropProvider } from '@fluentui/react-dialog';
import type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';
diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts
index 02668650ceff2..13c3221f63de2 100644
--- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts
+++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts
@@ -1,12 +1,12 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
import type { SlotClassNames } from '@fluentui/react-utilities';
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
import type { OverlayDrawerState } from './OverlayDrawer.types';
-import { OverlayDrawerSurfaceSlots } from './OverlayDrawerSurface/OverlayDrawerSurface.types';
+import type { OverlayDrawerSurfaceSlots } from './OverlayDrawerSurface/OverlayDrawerSurface.types';
import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
export const overlayDrawerClassNames: SlotClassNames> = {
diff --git a/packages/react-components/react-drawer/library/src/contexts/drawerContext.ts b/packages/react-components/react-drawer/library/src/contexts/drawerContext.ts
index a2a9f50067e46..e43d0b80db815 100644
--- a/packages/react-components/react-drawer/library/src/contexts/drawerContext.ts
+++ b/packages/react-components/react-drawer/library/src/contexts/drawerContext.ts
@@ -2,7 +2,7 @@
import * as React from 'react';
-import { DrawerScrollState } from '../shared/DrawerBase.types';
+import type { DrawerScrollState } from '../shared/DrawerBase.types';
export type DrawerContextValue = {
scrollState: DrawerScrollState;
diff --git a/packages/react-components/react-drawer/library/src/e2e/DrawerShared.tsx b/packages/react-components/react-drawer/library/src/e2e/DrawerShared.tsx
index b8a1e0ce53847..7ea288cb4ed76 100644
--- a/packages/react-components/react-drawer/library/src/e2e/DrawerShared.tsx
+++ b/packages/react-components/react-drawer/library/src/e2e/DrawerShared.tsx
@@ -6,9 +6,9 @@ import { FluentProvider } from '@fluentui/react-provider';
import { webLightTheme } from '@fluentui/react-theme';
import type { JSXElement } from '@fluentui/react-utilities';
-import { InlineDrawer } from '../components/InlineDrawer';
-import { OverlayDrawer } from '../components/OverlayDrawer';
-import { Drawer, DrawerProps } from '../Drawer';
+import type { InlineDrawer } from '../components/InlineDrawer';
+import type { OverlayDrawer } from '../components/OverlayDrawer';
+import type { Drawer, DrawerProps } from '../Drawer';
const mountFluent = (element: JSXElement) => {
mount({element});
diff --git a/packages/react-components/react-drawer/library/src/shared/DrawerBase.types.ts b/packages/react-components/react-drawer/library/src/shared/DrawerBase.types.ts
index 9b015bc100b4c..2c70d474b9f10 100644
--- a/packages/react-components/react-drawer/library/src/shared/DrawerBase.types.ts
+++ b/packages/react-components/react-drawer/library/src/shared/DrawerBase.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
type MotionType = 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';
diff --git a/packages/react-components/react-drawer/library/src/shared/drawerMotionUtils.test.tsx b/packages/react-components/react-drawer/library/src/shared/drawerMotionUtils.test.tsx
index 7bba885d4eea0..7f45de35e3a33 100644
--- a/packages/react-components/react-drawer/library/src/shared/drawerMotionUtils.test.tsx
+++ b/packages/react-components/react-drawer/library/src/shared/drawerMotionUtils.test.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
-import { DrawerMotionParams, InlineDrawerMotion } from './drawerMotions';
+import type { DrawerMotionParams } from './drawerMotions';
+import { InlineDrawerMotion } from './drawerMotions';
import { mergePresenceSlots } from './drawerMotionUtils';
const TestComponent = InlineDrawerMotion;
diff --git a/packages/react-components/react-drawer/library/src/shared/drawerMotions.ts b/packages/react-components/react-drawer/library/src/shared/drawerMotions.ts
index 6331c06d9f78d..f1d16e8af0310 100644
--- a/packages/react-components/react-drawer/library/src/shared/drawerMotions.ts
+++ b/packages/react-components/react-drawer/library/src/shared/drawerMotions.ts
@@ -1,6 +1,6 @@
import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';
import { tokens } from '@fluentui/react-theme';
-import { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';
+import type { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';
import type { DrawerBaseProps } from './DrawerBase.types';
import { drawerCSSVars } from './useDrawerBaseStyles.styles';
diff --git a/packages/react-components/react-drawer/library/src/shared/drawerSeparatorStyles.ts b/packages/react-components/react-drawer/library/src/shared/drawerSeparatorStyles.ts
index cc2928cd0d338..4ef903cff1daf 100644
--- a/packages/react-components/react-drawer/library/src/shared/drawerSeparatorStyles.ts
+++ b/packages/react-components/react-drawer/library/src/shared/drawerSeparatorStyles.ts
@@ -1,5 +1,5 @@
import { tokens } from '@fluentui/react-theme';
-import { GriffelStyle } from '@griffel/react';
+import type { GriffelStyle } from '@griffel/react';
export const drawerSeparatorStyles: GriffelStyle = {
height: '1px',
diff --git a/packages/react-components/react-drawer/library/src/shared/useDrawerBaseStyles.styles.ts b/packages/react-components/react-drawer/library/src/shared/useDrawerBaseStyles.styles.ts
index ff491380ed4c0..797ee6f18f05e 100644
--- a/packages/react-components/react-drawer/library/src/shared/useDrawerBaseStyles.styles.ts
+++ b/packages/react-components/react-drawer/library/src/shared/useDrawerBaseStyles.styles.ts
@@ -3,7 +3,7 @@
import { type GriffelResetStyle, makeStyles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
-import { DrawerBaseState } from './DrawerBase.types';
+import type { DrawerBaseState } from './DrawerBase.types';
/**
* CSS variable names used internally for uniform styling in Drawer.
diff --git a/packages/react-components/react-drawer/library/src/shared/useDrawerDefaultProps.ts b/packages/react-components/react-drawer/library/src/shared/useDrawerDefaultProps.ts
index 2a2ffb00e1cd9..02c02e7c96bc9 100644
--- a/packages/react-components/react-drawer/library/src/shared/useDrawerDefaultProps.ts
+++ b/packages/react-components/react-drawer/library/src/shared/useDrawerDefaultProps.ts
@@ -1,4 +1,4 @@
-import { DrawerBaseProps } from './DrawerBase.types';
+import type { DrawerBaseProps } from './DrawerBase.types';
export function useDrawerDefaultProps(props: DrawerBaseProps): {
size: NonNullable;
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerDefault.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerDefault.stories.tsx
index 04028ceee33c1..e4bff1aebf1f9 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerDefault.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerDefault.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, DrawerProps } from '@fluentui/react-components';
import {
DrawerBody,
DrawerHeader,
DrawerHeaderTitle,
Drawer,
- DrawerProps,
Button,
Label,
Radio,
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerKeepRenderedInTheDOM.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerKeepRenderedInTheDOM.stories.tsx
index 6db6cd306aa9e..d979884be2297 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerKeepRenderedInTheDOM.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerKeepRenderedInTheDOM.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, DrawerProps } from '@fluentui/react-components';
import {
DrawerBody,
DrawerHeader,
DrawerHeaderTitle,
Drawer,
- DrawerProps,
Button,
Label,
Radio,
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionDisabled.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionDisabled.stories.tsx
index 8d2df6ac43f99..1c0525673ddec 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionDisabled.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionDisabled.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, DrawerProps } from '@fluentui/react-components';
import {
DrawerBody,
DrawerHeader,
DrawerHeaderTitle,
Drawer,
- DrawerProps,
Button,
Label,
Radio,
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerPosition.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerPosition.stories.tsx
index 78863eae60175..f6785ca300625 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerPosition.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerPosition.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, DrawerProps } from '@fluentui/react-components';
import {
DrawerBody,
DrawerHeader,
DrawerHeaderTitle,
OverlayDrawer,
- DrawerProps,
Button,
makeStyles,
tokens,
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.stories.tsx
index dc6ce9b4a150f..c3964b8ba776d 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, InputProps } from '@fluentui/react-components';
import {
DrawerBody,
DrawerHeader,
@@ -10,7 +10,6 @@ import {
tokens,
Button,
Input,
- InputProps,
Label,
useId,
Dialog,
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerResponsive.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerResponsive.stories.tsx
index d839f18f02679..500ffe3a48ece 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerResponsive.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerResponsive.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, DrawerProps } from '@fluentui/react-components';
import {
DrawerBody,
DrawerHeader,
DrawerHeaderTitle,
Drawer,
- DrawerProps,
Button,
makeStyles,
tokens,
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerSeparator.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerSeparator.stories.tsx
index d53e3905d9454..9f598a07f6b2d 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerSeparator.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerSeparator.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, DrawerProps } from '@fluentui/react-components';
import {
DrawerBody,
DrawerHeader,
@@ -8,7 +8,6 @@ import {
Button,
makeStyles,
tokens,
- DrawerProps,
mergeClasses,
} from '@fluentui/react-components';
import { Dismiss24Regular } from '@fluentui/react-icons';
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerSize.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerSize.stories.tsx
index f3f09e39e5f8e..bdea618ebfeac 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerSize.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerSize.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, DrawerProps } from '@fluentui/react-components';
import {
OverlayDrawer,
DrawerBody,
DrawerHeader,
DrawerHeaderTitle,
- DrawerProps,
Button,
Label,
RadioGroup,
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.stories.tsx
index 437333ee65967..3ad34d7b0fccc 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, InlineDrawerProps } from '@fluentui/react-components';
import {
DrawerBody,
DrawerHeader,
@@ -8,7 +8,6 @@ import {
Button,
makeStyles,
tokens,
- InlineDrawerProps,
mergeClasses,
useRestoreFocusSource,
useRestoreFocusTarget,
diff --git a/packages/react-components/react-field/library/etc/react-field.api.md b/packages/react-components/react-field/library/etc/react-field.api.md
index ebdaced16d5a2..db74981ff3ff0 100644
--- a/packages/react-components/react-field/library/etc/react-field.api.md
+++ b/packages/react-components/react-field/library/etc/react-field.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
import type { DistributiveOmit } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { Label } from '@fluentui/react-label';
+import type { Label } from '@fluentui/react-label';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-field/library/src/components/Field/Field.types.ts b/packages/react-components/react-field/library/src/components/Field/Field.types.ts
index 8b808900402ef..3568de1598e52 100644
--- a/packages/react-components/react-field/library/src/components/Field/Field.types.ts
+++ b/packages/react-components/react-field/library/src/components/Field/Field.types.ts
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { Label } from '@fluentui/react-label';
+import type * as React from 'react';
+import type { Label } from '@fluentui/react-label';
import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';
/**
diff --git a/packages/react-components/react-field/library/src/testing/isConformant.ts b/packages/react-components/react-field/library/src/testing/isConformant.ts
index 53c3fc00e02c7..c8f15c9e45d1b 100644
--- a/packages/react-components/react-field/library/src/testing/isConformant.ts
+++ b/packages/react-components/react-field/library/src/testing/isConformant.ts
@@ -1,4 +1,5 @@
-import { isConformant as baseIsConformant, IsConformantOptions, TestObject } from '@fluentui/react-conformance';
+import type { IsConformantOptions, TestObject } from '@fluentui/react-conformance';
+import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
import griffelTests from '@fluentui/react-conformance-griffel';
export function isConformant(
diff --git a/packages/react-components/react-field/stories/src/Field/FieldInfo.stories.tsx b/packages/react-components/react-field/stories/src/Field/FieldInfo.stories.tsx
index 41d9a022a25d1..8a8ce921ad176 100644
--- a/packages/react-components/react-field/stories/src/Field/FieldInfo.stories.tsx
+++ b/packages/react-components/react-field/stories/src/Field/FieldInfo.stories.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, LabelProps } from '@fluentui/react-components';
-import { Field, Input, LabelProps } from '@fluentui/react-components';
+import { Field, Input } from '@fluentui/react-components';
import { InfoLabel } from '@fluentui/react-components';
export const Info = (): JSXElement => (
diff --git a/packages/react-components/react-field/stories/src/Field/index.stories.tsx b/packages/react-components/react-field/stories/src/Field/index.stories.tsx
index 7f45fbdade806..8fcaa91fd4d00 100644
--- a/packages/react-components/react-field/stories/src/Field/index.stories.tsx
+++ b/packages/react-components/react-field/stories/src/Field/index.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { Field } from '@fluentui/react-components';
export { Default } from './FieldDefault.stories';
diff --git a/packages/react-components/react-icons-compat/library/src/icon.ts b/packages/react-components/react-icons-compat/library/src/icon.ts
index ff3451ba4b6b4..1c9daf8caf7f5 100644
--- a/packages/react-components/react-icons-compat/library/src/icon.ts
+++ b/packages/react-components/react-icons-compat/library/src/icon.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { GlobalSettings } from './GlobalSettings';
import type { JSXElement } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-image/library/etc/react-image.api.md b/packages/react-components/react-image/library/etc/react-image.api.md
index 4cfdb31527013..2926faeaf34b2 100644
--- a/packages/react-components/react-image/library/etc/react-image.api.md
+++ b/packages/react-components/react-image/library/etc/react-image.api.md
@@ -8,7 +8,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import * as React_2 from 'react';
+import type * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-image/library/src/components/Image/renderImage.tsx b/packages/react-components/react-image/library/src/components/Image/renderImage.tsx
index e44c51d6c2b37..9600747639cf7 100644
--- a/packages/react-components/react-image/library/src/components/Image/renderImage.tsx
+++ b/packages/react-components/react-image/library/src/components/Image/renderImage.tsx
@@ -3,7 +3,7 @@
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { ImageSlots, ImageBaseState } from './Image.types';
+import type { ImageSlots, ImageBaseState } from './Image.types';
/**
* Define the render function.
diff --git a/packages/react-components/react-image/library/src/components/Image/useImage.ts b/packages/react-components/react-image/library/src/components/Image/useImage.ts
index f96b4d4bd295b..b0b07157a79a0 100644
--- a/packages/react-components/react-image/library/src/components/Image/useImage.ts
+++ b/packages/react-components/react-image/library/src/components/Image/useImage.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { ImageBaseProps, ImageBaseState, ImageProps, ImageState } from './Image.types';
diff --git a/packages/react-components/react-infolabel/library/etc/react-infolabel.api.md b/packages/react-components/react-infolabel/library/etc/react-infolabel.api.md
index 892c39dd94a2f..0e1044d433212 100644
--- a/packages/react-components/react-infolabel/library/etc/react-infolabel.api.md
+++ b/packages/react-components/react-infolabel/library/etc/react-infolabel.api.md
@@ -6,9 +6,9 @@
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
-import { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { Label } from '@fluentui/react-label';
+import type { Label } from '@fluentui/react-label';
import type { PopoverProps } from '@fluentui/react-popover';
import type { PopoverSurface } from '@fluentui/react-popover';
import * as React_2 from 'react';
diff --git a/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.tsx b/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.tsx
index 3c998263a7814..6bd0b519f5e11 100644
--- a/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.tsx
+++ b/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.tsx
@@ -2,7 +2,7 @@
import * as React from 'react';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
-import { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
import { renderInfoButton_unstable } from './renderInfoButton';
import { useInfoButton_unstable } from './useInfoButton';
import { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';
diff --git a/packages/react-components/react-infolabel/library/src/components/InfoLabel/InfoLabel.types.ts b/packages/react-components/react-infolabel/library/src/components/InfoLabel/InfoLabel.types.ts
index f35a9f99533df..72ce0eb17b64a 100644
--- a/packages/react-components/react-infolabel/library/src/components/InfoLabel/InfoLabel.types.ts
+++ b/packages/react-components/react-infolabel/library/src/components/InfoLabel/InfoLabel.types.ts
@@ -1,6 +1,6 @@
-import { Label } from '@fluentui/react-label';
+import type { Label } from '@fluentui/react-label';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { InfoButton } from '../InfoButton';
+import type { InfoButton } from '../InfoButton';
import type { InfoButtonProps } from '../InfoButton';
export type InfoLabelSlots = {
diff --git a/packages/react-components/react-infolabel/stories/src/InfoLabel/InfoLabelDefault.stories.tsx b/packages/react-components/react-infolabel/stories/src/InfoLabel/InfoLabelDefault.stories.tsx
index efe44798835fb..2d8b7409b322b 100644
--- a/packages/react-components/react-infolabel/stories/src/InfoLabel/InfoLabelDefault.stories.tsx
+++ b/packages/react-components/react-infolabel/stories/src/InfoLabel/InfoLabelDefault.stories.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, InfoLabelProps } from '@fluentui/react-components';
-import { InfoLabel, InfoLabelProps, Link } from '@fluentui/react-components';
+import { InfoLabel, Link } from '@fluentui/react-components';
export const Default = (props: Partial): JSXElement => (
(
{
diff --git a/packages/react-components/react-link/library/src/components/Link/Link.types.ts b/packages/react-components/react-link/library/src/components/Link/Link.types.ts
index ad557b7e89c62..915a86c312535 100644
--- a/packages/react-components/react-link/library/src/components/Link/Link.types.ts
+++ b/packages/react-components/react-link/library/src/components/Link/Link.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';
-import { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
+import type { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
export type LinkSlots = {
/**
diff --git a/packages/react-components/react-link/library/src/components/Link/useLink.ts b/packages/react-components/react-link/library/src/components/Link/useLink.ts
index 569892513c687..03c5e2b72264d 100644
--- a/packages/react-components/react-link/library/src/components/Link/useLink.ts
+++ b/packages/react-components/react-link/library/src/components/Link/useLink.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
import { useLinkState_unstable } from './useLinkState';
diff --git a/packages/react-components/react-link/library/src/components/Link/useLinkState.ts b/packages/react-components/react-link/library/src/components/Link/useLinkState.ts
index f184cf6b82766..ab7702a3137f9 100644
--- a/packages/react-components/react-link/library/src/components/Link/useLinkState.ts
+++ b/packages/react-components/react-link/library/src/components/Link/useLinkState.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { Enter, Space } from '@fluentui/keyboard-keys';
import type { LinkBaseState } from './Link.types';
diff --git a/packages/react-components/react-list/library/etc/react-list.api.md b/packages/react-components/react-list/library/etc/react-list.api.md
index 012ed066412a7..5750d085cb386 100644
--- a/packages/react-components/react-list/library/etc/react-list.api.md
+++ b/packages/react-components/react-list/library/etc/react-list.api.md
@@ -4,7 +4,7 @@
```ts
-import { Checkbox } from '@fluentui/react-checkbox';
+import type { Checkbox } from '@fluentui/react-checkbox';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { EventData } from '@fluentui/react-utilities';
@@ -12,7 +12,7 @@ import type { EventHandler } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import * as React_2 from 'react';
-import { SelectionItemId } from '@fluentui/react-utilities';
+import type { SelectionItemId } from '@fluentui/react-utilities';
import type { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-list/library/src/components/List/List.test.tsx b/packages/react-components/react-list/library/src/components/List/List.test.tsx
index 779eb6a333c8b..c2ce695263169 100644
--- a/packages/react-components/react-list/library/src/components/List/List.test.tsx
+++ b/packages/react-components/react-list/library/src/components/List/List.test.tsx
@@ -2,10 +2,10 @@ import * as React from 'react';
import { act, fireEvent, render, within } from '@testing-library/react';
import { isConformant } from '../../testing/isConformant';
import { List } from './List';
-import { ListProps } from './List.types';
+import type { ListProps } from './List.types';
import { ListItem } from '../ListItem/ListItem';
-import { ListItemActionEventData } from '../ListItem/ListItem.types';
-import { EventHandler } from '@fluentui/react-utilities';
+import type { ListItemActionEventData } from '../ListItem/ListItem.types';
+import type { EventHandler } from '@fluentui/react-utilities';
import { resetIdsForTests } from '@fluentui/react-utilities';
function expectListboxItemSelected(item: HTMLElement, selected: boolean) {
diff --git a/packages/react-components/react-list/library/src/components/List/List.types.ts b/packages/react-components/react-list/library/src/components/List/List.types.ts
index e6d367cb659f5..ef637d5fbba4a 100644
--- a/packages/react-components/react-list/library/src/components/List/List.types.ts
+++ b/packages/react-components/react-list/library/src/components/List/List.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type {
ComponentProps,
diff --git a/packages/react-components/react-list/library/src/components/List/listContext.ts b/packages/react-components/react-list/library/src/components/List/listContext.ts
index e276594b46819..87d60bb3bd40d 100644
--- a/packages/react-components/react-list/library/src/components/List/listContext.ts
+++ b/packages/react-components/react-list/library/src/components/List/listContext.ts
@@ -2,7 +2,7 @@
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
import type { ContextSelector } from '@fluentui/react-context-selector';
-import { ListSynchronousContextValue, ListContextValue } from './List.types';
+import type { ListSynchronousContextValue, ListContextValue } from './List.types';
import * as React from 'react';
export const listContextDefaultValue: ListContextValue = {
diff --git a/packages/react-components/react-list/library/src/components/List/useList.ts b/packages/react-components/react-list/library/src/components/List/useList.ts
index 11d483513545c..7b6bdc7833ddd 100644
--- a/packages/react-components/react-list/library/src/components/List/useList.ts
+++ b/packages/react-components/react-list/library/src/components/List/useList.ts
@@ -1,15 +1,10 @@
'use client';
-import * as React from 'react';
-import {
- getIntrinsicElementProps,
- OnSelectionChangeData,
- slot,
- useControllableState,
- useEventCallback,
-} from '@fluentui/react-utilities';
+import type * as React from 'react';
+import type { OnSelectionChangeData } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';
import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
-import { ListProps, ListState } from './List.types';
+import type { ListProps, ListState } from './List.types';
import { useListSelection } from '../../hooks/useListSelection';
import {
calculateListItemRoleForListRole,
diff --git a/packages/react-components/react-list/library/src/components/List/useListContextValues.ts b/packages/react-components/react-list/library/src/components/List/useListContextValues.ts
index cfffe271d08db..85188f494cfbf 100644
--- a/packages/react-components/react-list/library/src/components/List/useListContextValues.ts
+++ b/packages/react-components/react-list/library/src/components/List/useListContextValues.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { ListContextValues, ListState } from './List.types';
+import type { ListContextValues, ListState } from './List.types';
export function useListContextValues_unstable(state: ListState): ListContextValues {
const { selection, navigationMode, listItemRole, validateListItem } = state;
diff --git a/packages/react-components/react-list/library/src/components/ListItem/ListItem.test.tsx b/packages/react-components/react-list/library/src/components/ListItem/ListItem.test.tsx
index 28096802579b4..b33e81d4df13d 100644
--- a/packages/react-components/react-list/library/src/components/ListItem/ListItem.test.tsx
+++ b/packages/react-components/react-list/library/src/components/ListItem/ListItem.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { isConformant } from '../../testing/isConformant';
import { ListItem } from './ListItem';
-import { ListItemProps } from './ListItem.types';
+import type { ListItemProps } from './ListItem.types';
describe('ListItem', () => {
isConformant({
diff --git a/packages/react-components/react-list/library/src/components/ListItem/ListItem.types.ts b/packages/react-components/react-list/library/src/components/ListItem/ListItem.types.ts
index b1e779079c490..2679c29cd33e5 100644
--- a/packages/react-components/react-list/library/src/components/ListItem/ListItem.types.ts
+++ b/packages/react-components/react-list/library/src/components/ListItem/ListItem.types.ts
@@ -1,6 +1,6 @@
-import { Checkbox } from '@fluentui/react-checkbox';
+import type { Checkbox } from '@fluentui/react-checkbox';
import type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';
-import { ListItemActionEvent, ListItemActionEventName } from '../../events/ListItemActionEvent';
+import type { ListItemActionEvent, ListItemActionEventName } from '../../events/ListItemActionEvent';
export type ListItemSlots = {
root: NonNullable>;
diff --git a/packages/react-components/react-list/library/src/components/ListItem/useListItem.tsx b/packages/react-components/react-list/library/src/components/ListItem/useListItem.tsx
index 86bb27e1e5e96..d14a4c547fd35 100644
--- a/packages/react-components/react-list/library/src/components/ListItem/useListItem.tsx
+++ b/packages/react-components/react-list/library/src/components/ListItem/useListItem.tsx
@@ -23,12 +23,10 @@ import {
import type { ListItemProps, ListItemState } from './ListItem.types';
import { useListSynchronousContext, useListContext_unstable } from '../List/listContext';
import { Enter, Space, ArrowUp, ArrowDown, ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';
-import { Checkbox, CheckboxOnChangeData } from '@fluentui/react-checkbox';
-import {
- createListItemActionEvent,
- ListItemActionEvent,
- ListItemActionEventName,
-} from '../../events/ListItemActionEvent';
+import type { CheckboxOnChangeData } from '@fluentui/react-checkbox';
+import { Checkbox } from '@fluentui/react-checkbox';
+import type { ListItemActionEvent } from '../../events/ListItemActionEvent';
+import { createListItemActionEvent, ListItemActionEventName } from '../../events/ListItemActionEvent';
const DEFAULT_ROOT_EL_TYPE = 'li';
diff --git a/packages/react-components/react-list/library/src/events/ListItemActionEvent.ts b/packages/react-components/react-list/library/src/events/ListItemActionEvent.ts
index d588d5d09d18e..af7bfb32d2faf 100644
--- a/packages/react-components/react-list/library/src/events/ListItemActionEvent.ts
+++ b/packages/react-components/react-list/library/src/events/ListItemActionEvent.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
export const ListItemActionEventName = 'ListItemAction';
diff --git a/packages/react-components/react-list/library/src/hooks/types.ts b/packages/react-components/react-list/library/src/hooks/types.ts
index da45dd1723fc7..04583c36c118b 100644
--- a/packages/react-components/react-list/library/src/hooks/types.ts
+++ b/packages/react-components/react-list/library/src/hooks/types.ts
@@ -1,5 +1,5 @@
-import { SelectionItemId } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type { SelectionItemId } from '@fluentui/react-utilities';
+import type * as React from 'react';
export type ListSelectionState = {
isSelected: (item: string | number) => boolean;
diff --git a/packages/react-components/react-list/library/src/hooks/useListSelection.tsx b/packages/react-components/react-list/library/src/hooks/useListSelection.tsx
index c84cbdd50c8ea..56fd8e7553f01 100644
--- a/packages/react-components/react-list/library/src/hooks/useListSelection.tsx
+++ b/packages/react-components/react-list/library/src/hooks/useListSelection.tsx
@@ -1,6 +1,7 @@
'use client';
-import { SelectionHookParams, useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';
+import type { SelectionHookParams } from '@fluentui/react-utilities';
+import { useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';
import * as React from 'react';
import type { ListSelectionState } from './types';
diff --git a/packages/react-components/react-list/library/src/utils/calculateListRole.ts b/packages/react-components/react-list/library/src/utils/calculateListRole.ts
index cfdb9c7d829cb..e7806a926f6f2 100644
--- a/packages/react-components/react-list/library/src/utils/calculateListRole.ts
+++ b/packages/react-components/react-list/library/src/utils/calculateListRole.ts
@@ -1,4 +1,4 @@
-import { ListNavigationMode } from '../List';
+import type { ListNavigationMode } from '../List';
/**
* Calculate the role for the list based on the navigation mode and selectable state
diff --git a/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx b/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx
index 8e419cfae2eba..2d98dbf10c0e1 100644
--- a/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx
+++ b/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx
@@ -1,8 +1,8 @@
-import { Button, makeStyles, Persona, mergeClasses, Text, tokens, SelectionItemId } from '@fluentui/react-components';
+import { Button, makeStyles, Persona, mergeClasses, Text, tokens } from '@fluentui/react-components';
import { Mic16Regular } from '@fluentui/react-icons';
import { List, ListItem } from '@fluentui/react-components';
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, SelectionItemId } from '@fluentui/react-components';
type Item = {
name: string;
diff --git a/packages/react-components/react-list/stories/src/List/SingleActionSelectionControlled.stories.tsx b/packages/react-components/react-list/stories/src/List/SingleActionSelectionControlled.stories.tsx
index d9a1bc388abdf..4217099fc8d71 100644
--- a/packages/react-components/react-list/stories/src/List/SingleActionSelectionControlled.stories.tsx
+++ b/packages/react-components/react-list/stories/src/List/SingleActionSelectionControlled.stories.tsx
@@ -1,8 +1,8 @@
-import { Button, makeStyles, Persona, SelectionItemId } from '@fluentui/react-components';
+import { Button, makeStyles, Persona } from '@fluentui/react-components';
import { List, ListItem } from '@fluentui/react-components';
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, SelectionItemId } from '@fluentui/react-components';
type Item = {
name: string;
diff --git a/packages/react-components/react-list/stories/src/List/SingleActionSelectionDifferentPrimary.stories.tsx b/packages/react-components/react-list/stories/src/List/SingleActionSelectionDifferentPrimary.stories.tsx
index 28b1e848e241d..4224d262f96fa 100644
--- a/packages/react-components/react-list/stories/src/List/SingleActionSelectionDifferentPrimary.stories.tsx
+++ b/packages/react-components/react-list/stories/src/List/SingleActionSelectionDifferentPrimary.stories.tsx
@@ -1,6 +1,6 @@
-import { Persona, SelectionItemId } from '@fluentui/react-components';
+import { Persona } from '@fluentui/react-components';
import { List, ListItem } from '@fluentui/react-components';
-import type { ListItemProps } from '@fluentui/react-components';
+import type { ListItemProps, SelectionItemId } from '@fluentui/react-components';
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
diff --git a/packages/react-components/react-menu-grid-preview/library/etc/react-menu-grid-preview.api.md b/packages/react-components/react-menu-grid-preview/library/etc/react-menu-grid-preview.api.md
index 5259ffbd826e5..aa46a8b410796 100644
--- a/packages/react-components/react-menu-grid-preview/library/etc/react-menu-grid-preview.api.md
+++ b/packages/react-components/react-menu-grid-preview/library/etc/react-menu-grid-preview.api.md
@@ -12,7 +12,7 @@ import type { MenuListContextValue } from '@fluentui/react-menu';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
-import { TabsterDOMAttribute } from '@fluentui/react-tabster';
+import type { TabsterDOMAttribute } from '@fluentui/react-tabster';
// @public
export const MenuGrid: ForwardRefComponent;
diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGrid/MenuGrid.types.ts b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGrid/MenuGrid.types.ts
index b35ae0c6e7b9b..b80a1fdb80c97 100644
--- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGrid/MenuGrid.types.ts
+++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGrid/MenuGrid.types.ts
@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { TabsterDOMAttribute } from '@fluentui/react-tabster';
+import type { TabsterDOMAttribute } from '@fluentui/react-tabster';
import type { MenuListContextValue } from '@fluentui/react-menu';
import type { MenuGridContextValue } from '../../contexts/menuGridContext';
diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGrid/renderMenuGrid.tsx b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGrid/renderMenuGrid.tsx
index 9821fbf8e087b..3b2ca9e574b90 100644
--- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGrid/renderMenuGrid.tsx
+++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGrid/renderMenuGrid.tsx
@@ -3,7 +3,7 @@
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import { MenuListProvider } from '@fluentui/react-menu';
-import { MenuGridContextValues, MenuGridSlots, MenuGridState } from './MenuGrid.types';
+import type { MenuGridContextValues, MenuGridSlots, MenuGridState } from './MenuGrid.types';
import { MenuGridContextProvider } from '../../contexts/menuGridContext';
/**
diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridCell/renderMenuGridCell.tsx b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridCell/renderMenuGridCell.tsx
index 9d6cb5c1bdcc1..45b6a11bfc7b9 100644
--- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridCell/renderMenuGridCell.tsx
+++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridCell/renderMenuGridCell.tsx
@@ -2,7 +2,7 @@
/** @jsxImportSource @fluentui/react-jsx-runtime */
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { MenuGridCellSlots, MenuGridCellState } from './MenuGridCell.types';
+import type { MenuGridCellSlots, MenuGridCellState } from './MenuGridCell.types';
/**
* Function that renders the final JSX of the component
diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridCell/useMenuGridCell.ts b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridCell/useMenuGridCell.ts
index 9cd642b7a2f31..9153f45545d9e 100644
--- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridCell/useMenuGridCell.ts
+++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridCell/useMenuGridCell.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';
import {
@@ -10,7 +10,7 @@ import {
getIntrinsicElementProps,
slot,
} from '@fluentui/react-utilities';
-import { MenuGridCellProps, MenuGridCellState } from './MenuGridCell.types';
+import type { MenuGridCellProps, MenuGridCellState } from './MenuGridCell.types';
import { useValidateNesting } from '../../utils/useValidateNesting';
/**
diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroup/renderMenuGridGroup.tsx b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroup/renderMenuGridGroup.tsx
index 107434a5bf6c0..b22f6df2f7af7 100644
--- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroup/renderMenuGridGroup.tsx
+++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroup/renderMenuGridGroup.tsx
@@ -2,7 +2,7 @@
/** @jsxImportSource @fluentui/react-jsx-runtime */
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { MenuGridGroupContextValues, MenuGridGroupSlots, MenuGridGroupState } from './MenuGridGroup.types';
+import type { MenuGridGroupContextValues, MenuGridGroupSlots, MenuGridGroupState } from './MenuGridGroup.types';
import { MenuGridGroupContextProvider } from '../../contexts/menuGridGroupContext';
/**
diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroup/useMenuGridGroup.ts b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroup/useMenuGridGroup.ts
index 0e8d0833db4ae..330b7896bf7fe 100644
--- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroup/useMenuGridGroup.ts
+++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroup/useMenuGridGroup.ts
@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
-import { MenuGridGroupProps, MenuGridGroupState } from './MenuGridGroup.types';
+import type { MenuGridGroupProps, MenuGridGroupState } from './MenuGridGroup.types';
/**
* Given user props, returns state and render function for a MenuGridGroup.
diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroupHeader/renderMenuGridGroupHeader.tsx b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroupHeader/renderMenuGridGroupHeader.tsx
index fe5329b19614a..97a3ccb269bd5 100644
--- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroupHeader/renderMenuGridGroupHeader.tsx
+++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroupHeader/renderMenuGridGroupHeader.tsx
@@ -2,7 +2,7 @@
/** @jsxImportSource @fluentui/react-jsx-runtime */
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { MenuGridGroupHeaderSlots, MenuGridGroupHeaderState } from './MenuGridGroupHeader.types';
+import type { MenuGridGroupHeaderSlots, MenuGridGroupHeaderState } from './MenuGridGroupHeader.types';
/**
* Function that renders the final JSX of the component
diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroupHeader/useMenuGridGroupHeader.ts b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroupHeader/useMenuGridGroupHeader.ts
index f13674262112c..440f5ef323f93 100644
--- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroupHeader/useMenuGridGroupHeader.ts
+++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroupHeader/useMenuGridGroupHeader.ts
@@ -1,10 +1,10 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import { useMenuGridGroupContext_unstable } from '../../contexts/menuGridGroupContext';
-import { MenuGridGroupHeaderProps, MenuGridGroupHeaderState } from './MenuGridGroupHeader.types';
+import type { MenuGridGroupHeaderProps, MenuGridGroupHeaderState } from './MenuGridGroupHeader.types';
/**
* Given user props, returns state and render function for a MenuGridGroupHeader.
diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridItem/MenuGridItem.types.ts b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridItem/MenuGridItem.types.ts
index 4e6bcc9bbba16..23819613e9c69 100644
--- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridItem/MenuGridItem.types.ts
+++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridItem/MenuGridItem.types.ts
@@ -1,6 +1,6 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { MenuGridCellProps } from './../MenuGridCell/MenuGridCell.types';
-import { MenuGridRowProps } from './../MenuGridRow/MenuGridRow.types';
+import type { MenuGridCellProps } from './../MenuGridCell/MenuGridCell.types';
+import type { MenuGridRowProps } from './../MenuGridRow/MenuGridRow.types';
export type MenuGridItemSlots = {
root: Slot;
diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridItem/renderMenuGridItem.tsx b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridItem/renderMenuGridItem.tsx
index 8a9708ac2bc8b..94956e415cb1c 100644
--- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridItem/renderMenuGridItem.tsx
+++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridItem/renderMenuGridItem.tsx
@@ -2,7 +2,7 @@
/** @jsxImportSource @fluentui/react-jsx-runtime */
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { MenuGridItemSlots, MenuGridItemState } from './MenuGridItem.types';
+import type { MenuGridItemSlots, MenuGridItemState } from './MenuGridItem.types';
/**
* Function that renders the final JSX of the component
diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridItem/useMenuGridItem.ts b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridItem/useMenuGridItem.ts
index f1cd6bc289bf6..c2b0e12466930 100644
--- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridItem/useMenuGridItem.ts
+++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridItem/useMenuGridItem.ts
@@ -1,9 +1,9 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useMergedRefs, slot } from '@fluentui/react-utilities';
-import { MenuGridItemProps, MenuGridItemState } from './MenuGridItem.types';
+import type { MenuGridItemProps, MenuGridItemState } from './MenuGridItem.types';
import { MenuGridCell } from './../MenuGridCell/MenuGridCell';
import { MenuGridRow } from './../MenuGridRow/MenuGridRow';
import { useValidateNesting } from '../../utils/useValidateNesting';
diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridRow/renderMenuGridRow.tsx b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridRow/renderMenuGridRow.tsx
index af2b79d163bbf..2d30b1f465f1f 100644
--- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridRow/renderMenuGridRow.tsx
+++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridRow/renderMenuGridRow.tsx
@@ -2,7 +2,7 @@
/** @jsxImportSource @fluentui/react-jsx-runtime */
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { MenuGridRowSlots, MenuGridRowState } from './MenuGridRow.types';
+import type { MenuGridRowSlots, MenuGridRowState } from './MenuGridRow.types';
/**
* Function that renders the final JSX of the component
diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridRow/useMenuGridRow.ts b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridRow/useMenuGridRow.ts
index 6768d30fb9835..682d11cca1f14 100644
--- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridRow/useMenuGridRow.ts
+++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridRow/useMenuGridRow.ts
@@ -11,7 +11,7 @@ import {
} from '@fluentui/react-utilities';
import { useMenuGridContext_unstable } from '../../contexts/menuGridContext';
-import { MenuGridRowProps, MenuGridRowState } from './MenuGridRow.types';
+import type { MenuGridRowProps, MenuGridRowState } from './MenuGridRow.types';
import { useValidateNesting } from '../../utils/useValidateNesting';
import { useCharacterSearch } from './useCharacterSearch';
diff --git a/packages/react-components/react-menu-grid-preview/library/src/contexts/menuGridContext.ts b/packages/react-components/react-menu-grid-preview/library/src/contexts/menuGridContext.ts
index 7ab1b2536275b..37c0c9001acee 100644
--- a/packages/react-components/react-menu-grid-preview/library/src/contexts/menuGridContext.ts
+++ b/packages/react-components/react-menu-grid-preview/library/src/contexts/menuGridContext.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { TabsterDOMAttribute } from '@fluentui/react-tabster';
+import type { TabsterDOMAttribute } from '@fluentui/react-tabster';
export const MenuGridContext = React.createContext(
undefined,
diff --git a/packages/react-components/react-menu/library/etc/react-menu.api.md b/packages/react-components/react-menu/library/etc/react-menu.api.md
index 3cfd08cfe69df..9814f2ee71551 100644
--- a/packages/react-components/react-menu/library/etc/react-menu.api.md
+++ b/packages/react-components/react-menu/library/etc/react-menu.api.md
@@ -4,9 +4,9 @@
```ts
-import { ARIAButtonElement } from '@fluentui/react-aria';
-import { ARIAButtonResultProps } from '@fluentui/react-aria';
-import { ARIAButtonType } from '@fluentui/react-aria';
+import type { ARIAButtonElement } from '@fluentui/react-aria';
+import type { ARIAButtonResultProps } from '@fluentui/react-aria';
+import type { ARIAButtonType } from '@fluentui/react-aria';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ContextSelector } from '@fluentui/react-context-selector';
@@ -14,10 +14,10 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import type { PortalProps } from '@fluentui/react-portal';
import type { PositioningShorthand } from '@fluentui/react-positioning';
-import { PositioningVirtualElement } from '@fluentui/react-positioning';
+import type { PositioningVirtualElement } from '@fluentui/react-positioning';
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
import * as React_2 from 'react';
-import { SetVirtualMouseTarget } from '@fluentui/react-positioning';
+import type { SetVirtualMouseTarget } from '@fluentui/react-positioning';
import type { Slot } from '@fluentui/react-utilities';
import { SlotClassNames } from '@fluentui/react-utilities';
import type { TriggerProps } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-menu/library/src/components/Menu/Menu.test.tsx b/packages/react-components/react-menu/library/src/components/Menu/Menu.test.tsx
index 58d3fe512e16d..e116ccb8dc5d5 100644
--- a/packages/react-components/react-menu/library/src/components/Menu/Menu.test.tsx
+++ b/packages/react-components/react-menu/library/src/components/Menu/Menu.test.tsx
@@ -9,7 +9,7 @@ import { MenuItem } from '../MenuItem/index';
import { MenuItemCheckbox } from '../MenuItemCheckbox/index';
import { MenuItemRadio } from '../MenuItemRadio/index';
import { MenuPopover } from '../MenuPopover/index';
-import { MenuOpenChangeData } from './Menu.types';
+import type { MenuOpenChangeData } from './Menu.types';
describe('Menu', () => {
isConformant({
diff --git a/packages/react-components/react-menu/library/src/components/Menu/Menu.tsx b/packages/react-components/react-menu/library/src/components/Menu/Menu.tsx
index 9c38e8a90ebe7..83254f9dde881 100644
--- a/packages/react-components/react-menu/library/src/components/Menu/Menu.tsx
+++ b/packages/react-components/react-menu/library/src/components/Menu/Menu.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useMenu_unstable } from './useMenu';
import { useMenuContextValues_unstable } from './useMenuContextValues';
import { renderMenu_unstable } from './renderMenu';
diff --git a/packages/react-components/react-menu/library/src/components/Menu/Menu.types.ts b/packages/react-components/react-menu/library/src/components/Menu/Menu.types.ts
index ccd3929c2e8ca..6cdb0b25a438e 100644
--- a/packages/react-components/react-menu/library/src/components/Menu/Menu.types.ts
+++ b/packages/react-components/react-menu/library/src/components/Menu/Menu.types.ts
@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
-import { PositioningVirtualElement, SetVirtualMouseTarget } from '@fluentui/react-positioning';
+import type { PositioningVirtualElement, SetVirtualMouseTarget } from '@fluentui/react-positioning';
import type { PositioningShorthand } from '@fluentui/react-positioning';
import type { PortalProps } from '@fluentui/react-portal';
import type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-menu/library/src/components/MenuDivider/renderMenuDivider.tsx b/packages/react-components/react-menu/library/src/components/MenuDivider/renderMenuDivider.tsx
index 5acaef12deb74..328b63b950f9f 100644
--- a/packages/react-components/react-menu/library/src/components/MenuDivider/renderMenuDivider.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuDivider/renderMenuDivider.tsx
@@ -2,7 +2,7 @@
/** @jsxImportSource @fluentui/react-jsx-runtime */
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';
+import type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';
/**
* Redefine the render function to add slots. Reuse the menudivider structure but add
diff --git a/packages/react-components/react-menu/library/src/components/MenuDivider/useMenuDivider.ts b/packages/react-components/react-menu/library/src/components/MenuDivider/useMenuDivider.ts
index 557d0b049e322..469fd89b43d23 100644
--- a/packages/react-components/react-menu/library/src/components/MenuDivider/useMenuDivider.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuDivider/useMenuDivider.ts
@@ -1,5 +1,5 @@
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
import type { MenuDividerProps, MenuDividerState } from './MenuDivider.types';
/**
diff --git a/packages/react-components/react-menu/library/src/components/MenuGroup/renderMenuGroup.tsx b/packages/react-components/react-menu/library/src/components/MenuGroup/renderMenuGroup.tsx
index 2f72f8426ac31..4ba67b0634aa8 100644
--- a/packages/react-components/react-menu/library/src/components/MenuGroup/renderMenuGroup.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuGroup/renderMenuGroup.tsx
@@ -2,7 +2,7 @@
/** @jsxImportSource @fluentui/react-jsx-runtime */
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { MenuGroupContextValues, MenuGroupSlots, MenuGroupState } from './MenuGroup.types';
+import type { MenuGroupContextValues, MenuGroupSlots, MenuGroupState } from './MenuGroup.types';
import { MenuGroupContextProvider } from '../../contexts/menuGroupContext';
/**
diff --git a/packages/react-components/react-menu/library/src/components/MenuGroup/useMenuGroup.ts b/packages/react-components/react-menu/library/src/components/MenuGroup/useMenuGroup.ts
index 2283dd76545bd..c0ab2723c23e0 100644
--- a/packages/react-components/react-menu/library/src/components/MenuGroup/useMenuGroup.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuGroup/useMenuGroup.ts
@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
-import { MenuGroupProps, MenuGroupState } from './MenuGroup.types';
+import type { MenuGroupProps, MenuGroupState } from './MenuGroup.types';
/**
* Given user props, returns state and render function for a MenuGroup.
diff --git a/packages/react-components/react-menu/library/src/components/MenuGroupHeader/renderMenuGroupHeader.tsx b/packages/react-components/react-menu/library/src/components/MenuGroupHeader/renderMenuGroupHeader.tsx
index c632575e85597..9c18411b0cda8 100644
--- a/packages/react-components/react-menu/library/src/components/MenuGroupHeader/renderMenuGroupHeader.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuGroupHeader/renderMenuGroupHeader.tsx
@@ -2,7 +2,7 @@
/** @jsxImportSource @fluentui/react-jsx-runtime */
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';
+import type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';
/**
* Redefine the render function to add slots. Reuse the menugroupheader structure but add
diff --git a/packages/react-components/react-menu/library/src/components/MenuGroupHeader/useMenuGroupHeader.ts b/packages/react-components/react-menu/library/src/components/MenuGroupHeader/useMenuGroupHeader.ts
index c22ed22b7a54c..708ef4064f8b0 100644
--- a/packages/react-components/react-menu/library/src/components/MenuGroupHeader/useMenuGroupHeader.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuGroupHeader/useMenuGroupHeader.ts
@@ -1,9 +1,9 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import { MenuGroupHeaderProps, MenuGroupHeaderState } from './MenuGroupHeader.types';
+import type { MenuGroupHeaderProps, MenuGroupHeaderState } from './MenuGroupHeader.types';
/**
* Given user props, returns state and render function for a MenuGroupHeader.
diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/useCharacterSearch.ts b/packages/react-components/react-menu/library/src/components/MenuItem/useCharacterSearch.ts
index 2dc37479cc29f..45eaedbcfec4a 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItem/useCharacterSearch.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuItem/useCharacterSearch.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useMenuListContext_unstable } from '../../contexts/menuListContext';
import type { MenuItemState } from '../../components/index';
import type { ARIAButtonElementIntersection } from '@fluentui/react-aria';
diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx
index 3646314937aad..0b4a63b7180ec 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx
@@ -21,12 +21,8 @@ import {
import { useMenuListContext_unstable } from '../../contexts/menuListContext';
import { useMenuContext_unstable } from '../../contexts/menuContext';
import type { MenuItemProps, MenuItemState } from './MenuItem.types';
-import {
- ARIAButtonElement,
- ARIAButtonElementIntersection,
- ARIAButtonProps,
- useARIAButtonProps,
-} from '@fluentui/react-aria';
+import type { ARIAButtonElement, ARIAButtonElementIntersection, ARIAButtonProps } from '@fluentui/react-aria';
+import { useARIAButtonProps } from '@fluentui/react-aria';
import { Enter, Space } from '@fluentui/keyboard-keys';
import { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';
import { useValidateNesting } from '../../utils/useValidateNesting';
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemLink/MenuItemLink.types.ts b/packages/react-components/react-menu/library/src/components/MenuItemLink/MenuItemLink.types.ts
index fce8969cdd227..055b0bbf2bb21 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItemLink/MenuItemLink.types.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuItemLink/MenuItemLink.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { MenuItemProps, MenuItemSlots } from '../MenuItem/MenuItem.types';
+import type { MenuItemProps, MenuItemSlots } from '../MenuItem/MenuItem.types';
export type MenuItemLinkSlots = {
root: Slot<'a'>;
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemLink/useMenuItemLink.ts b/packages/react-components/react-menu/library/src/components/MenuItemLink/useMenuItemLink.ts
index 3cc85e2c1e5ec..7eb9152a2abe4 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItemLink/useMenuItemLink.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuItemLink/useMenuItemLink.ts
@@ -1,10 +1,11 @@
'use client';
-import * as React from 'react';
-import { ExtractSlotProps, Slot, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import type * as React from 'react';
+import type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';
import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
-import { MenuItemProps } from '../MenuItem/MenuItem.types';
+import type { MenuItemProps } from '../MenuItem/MenuItem.types';
/**
* Create the state required to render MenuItemLink.
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemLink/useMenuItemLinkStyles.styles.ts b/packages/react-components/react-menu/library/src/components/MenuItemLink/useMenuItemLinkStyles.styles.ts
index 11e6bcfc480aa..9ba56218a5b85 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItemLink/useMenuItemLinkStyles.styles.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuItemLink/useMenuItemLinkStyles.styles.ts
@@ -4,7 +4,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
import type { MenuItemLinkSlots, MenuItemLinkState } from './MenuItemLink.types';
import type { SlotClassNames } from '@fluentui/react-utilities';
import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';
-import { MenuItemState } from '../MenuItem/MenuItem.types';
+import type { MenuItemState } from '../MenuItem/MenuItem.types';
export const menuItemLinkClassNames: SlotClassNames = {
root: 'fui-MenuItemLink',
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemSwitch/MenuItemSwitch.test.tsx b/packages/react-components/react-menu/library/src/components/MenuItemSwitch/MenuItemSwitch.test.tsx
index 9e9e462737b08..04eaf6c17657e 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItemSwitch/MenuItemSwitch.test.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuItemSwitch/MenuItemSwitch.test.tsx
@@ -3,8 +3,9 @@ import { fireEvent, render } from '@testing-library/react';
import { Enter, Space } from '@fluentui/keyboard-keys';
import { isConformant } from '../../testing/isConformant';
import { MenuItemSwitch } from './MenuItemSwitch';
-import { MenuItemSwitchProps } from './MenuItemSwitch.types';
-import { MenuListContextValue, MenuListProvider } from '../../contexts/menuListContext';
+import type { MenuItemSwitchProps } from './MenuItemSwitch.types';
+import type { MenuListContextValue } from '../../contexts/menuListContext';
+import { MenuListProvider } from '../../contexts/menuListContext';
import { mockUseMenuContext } from '../../testing/mockUseMenuContext';
jest.mock('../../contexts/menuContext');
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemSwitch/MenuItemSwitch.types.ts b/packages/react-components/react-menu/library/src/components/MenuItemSwitch/MenuItemSwitch.types.ts
index 499871031020f..3d8d01da63ed4 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItemSwitch/MenuItemSwitch.types.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuItemSwitch/MenuItemSwitch.types.ts
@@ -1,7 +1,7 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { MenuItemSlots } from '../MenuItem/MenuItem.types';
-import { MenuItemSelectableState } from '../../selectable/types';
-import { MenuItemCheckboxProps } from '../MenuItemCheckbox/MenuItemCheckbox.types';
+import type { MenuItemSlots } from '../MenuItem/MenuItem.types';
+import type { MenuItemSelectableState } from '../../selectable/types';
+import type { MenuItemCheckboxProps } from '../MenuItemCheckbox/MenuItemCheckbox.types';
export type MenuItemSwitchSlots = Pick & {
switchIndicator?: Slot<'span'>;
diff --git a/packages/react-components/react-menu/library/src/components/MenuList/MenuList.types.ts b/packages/react-components/react-menu/library/src/components/MenuList/MenuList.types.ts
index 3aaa37a127550..a37ad52335a7f 100644
--- a/packages/react-components/react-menu/library/src/components/MenuList/MenuList.types.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuList/MenuList.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type { MenuListContextValue } from '../../contexts/menuListContext';
import type { SelectableHandler } from '../../selectable/index';
diff --git a/packages/react-components/react-menu/library/src/components/MenuList/renderMenuList.tsx b/packages/react-components/react-menu/library/src/components/MenuList/renderMenuList.tsx
index 96e00874436e6..9019d4ce57c03 100644
--- a/packages/react-components/react-menu/library/src/components/MenuList/renderMenuList.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuList/renderMenuList.tsx
@@ -2,7 +2,7 @@
/** @jsxImportSource @fluentui/react-jsx-runtime */
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { MenuListContextValues, MenuListSlots, MenuListState } from './MenuList.types';
+import type { MenuListContextValues, MenuListSlots, MenuListState } from './MenuList.types';
import { MenuListProvider } from '../../contexts/menuListContext';
/**
diff --git a/packages/react-components/react-menu/library/src/components/MenuList/useMenuList.test.ts b/packages/react-components/react-menu/library/src/components/MenuList/useMenuList.test.ts
index 0122bb5c6cd79..fb8d0422846f2 100644
--- a/packages/react-components/react-menu/library/src/components/MenuList/useMenuList.test.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuList/useMenuList.test.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { renderHook, act } from '@testing-library/react-hooks';
import { useFocusFinders } from '@fluentui/react-tabster';
import { useMenuList_unstable } from './useMenuList';
diff --git a/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.test.tsx b/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.test.tsx
index e05988bb9f436..7373e0ba2fc52 100644
--- a/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.test.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { fireEvent, render } from '@testing-library/react';
import { MenuPopover } from './MenuPopover';
import { isConformant } from '../../testing/isConformant';
-import { MenuPopoverProps } from './MenuPopover.types';
+import type { MenuPopoverProps } from './MenuPopover.types';
describe('MenuPopover', () => {
const testid = 'test';
diff --git a/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.types.ts b/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.types.ts
index d7e2cd0b6eb72..443ec43faf9f4 100644
--- a/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.types.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.types.ts
@@ -1,6 +1,6 @@
import type { PortalProps } from '@fluentui/react-portal';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
export type MenuPopoverSlots = {
root: Slot<'div'>;
diff --git a/packages/react-components/react-menu/library/src/components/MenuPopover/renderMenuPopover.tsx b/packages/react-components/react-menu/library/src/components/MenuPopover/renderMenuPopover.tsx
index a89d4e3f32e58..59ab4b977aec4 100644
--- a/packages/react-components/react-menu/library/src/components/MenuPopover/renderMenuPopover.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuPopover/renderMenuPopover.tsx
@@ -2,7 +2,7 @@
/** @jsxImportSource @fluentui/react-jsx-runtime */
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';
+import type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';
import { Portal } from '@fluentui/react-portal';
/**
diff --git a/packages/react-components/react-menu/library/src/components/MenuPopover/useMenuPopover.ts b/packages/react-components/react-menu/library/src/components/MenuPopover/useMenuPopover.ts
index bd1a12031efc5..7b690b64123dc 100644
--- a/packages/react-components/react-menu/library/src/components/MenuPopover/useMenuPopover.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuPopover/useMenuPopover.ts
@@ -10,7 +10,7 @@ import * as React from 'react';
import { useMenuContext_unstable } from '../../contexts/menuContext';
import { useMenuListContext_unstable } from '../../contexts/menuListContext';
import { dispatchMenuEnterEvent, useIsSubmenu } from '../../utils/index';
-import { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';
+import type { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';
/**
* Create the state required to render MenuPopover.
diff --git a/packages/react-components/react-menu/library/src/components/MenuSplitGroup/MenuSplitGroup.types.ts b/packages/react-components/react-menu/library/src/components/MenuSplitGroup/MenuSplitGroup.types.ts
index 0dbb0f0f9b5aa..514bc82aad2b8 100644
--- a/packages/react-components/react-menu/library/src/components/MenuSplitGroup/MenuSplitGroup.types.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuSplitGroup/MenuSplitGroup.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { MenuSplitGroupContextValue } from '../../contexts/menuSplitGroupContext';
+import type { MenuSplitGroupContextValue } from '../../contexts/menuSplitGroupContext';
export type MenuSplitGroupSlots = {
root: Slot<'div'>;
diff --git a/packages/react-components/react-menu/library/src/components/MenuSplitGroup/useMenuSplitGroupContextValues.ts b/packages/react-components/react-menu/library/src/components/MenuSplitGroup/useMenuSplitGroupContextValues.ts
index 53996aa7da186..f9c7b33a73c73 100644
--- a/packages/react-components/react-menu/library/src/components/MenuSplitGroup/useMenuSplitGroupContextValues.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuSplitGroup/useMenuSplitGroupContextValues.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { MenuSplitGroupContextValues, MenuSplitGroupState } from './MenuSplitGroup.types';
+import type { MenuSplitGroupContextValues, MenuSplitGroupState } from './MenuSplitGroup.types';
export const useMenuSplitGroupContextValues = (state: MenuSplitGroupState): MenuSplitGroupContextValues => {
'use no memo';
diff --git a/packages/react-components/react-menu/library/src/components/MenuTrigger/MenuTrigger.tsx b/packages/react-components/react-menu/library/src/components/MenuTrigger/MenuTrigger.tsx
index a647225663d7f..90ca8c222b08b 100644
--- a/packages/react-components/react-menu/library/src/components/MenuTrigger/MenuTrigger.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuTrigger/MenuTrigger.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useMenuTrigger_unstable } from './useMenuTrigger';
import { renderMenuTrigger_unstable } from './renderMenuTrigger';
import type { MenuTriggerProps } from './MenuTrigger.types';
diff --git a/packages/react-components/react-menu/library/src/components/MenuTrigger/MenuTrigger.types.ts b/packages/react-components/react-menu/library/src/components/MenuTrigger/MenuTrigger.types.ts
index b27b82d0a238e..8f2d8a02e8f42 100644
--- a/packages/react-components/react-menu/library/src/components/MenuTrigger/MenuTrigger.types.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuTrigger/MenuTrigger.types.ts
@@ -1,6 +1,6 @@
-import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';
+import type { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';
import type { TriggerProps } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
export type MenuTriggerProps = TriggerProps & {
/**
diff --git a/packages/react-components/react-menu/library/src/contexts/menuContext.ts b/packages/react-components/react-menu/library/src/contexts/menuContext.ts
index ffac734863514..d573bef920c2c 100644
--- a/packages/react-components/react-menu/library/src/contexts/menuContext.ts
+++ b/packages/react-components/react-menu/library/src/contexts/menuContext.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
import type { ContextSelector, Context } from '@fluentui/react-context-selector';
import type { MenuState } from '../components/Menu/index';
diff --git a/packages/react-components/react-menu/library/src/contexts/menuListContext.tsx b/packages/react-components/react-menu/library/src/contexts/menuListContext.tsx
index 8d1e6020fccba..79db90da46ff5 100644
--- a/packages/react-components/react-menu/library/src/contexts/menuListContext.tsx
+++ b/packages/react-components/react-menu/library/src/contexts/menuListContext.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
import type { ContextSelector, Context } from '@fluentui/react-context-selector';
import type { SelectableHandler } from '../selectable/index';
diff --git a/packages/react-components/react-menu/library/src/selectable/types.ts b/packages/react-components/react-menu/library/src/selectable/types.ts
index a4ba3cd381b49..c3b841965b59a 100644
--- a/packages/react-components/react-menu/library/src/selectable/types.ts
+++ b/packages/react-components/react-menu/library/src/selectable/types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
export type SelectableHandler = (
e: React.MouseEvent | React.KeyboardEvent,
diff --git a/packages/react-components/react-menu/library/src/testing/mockUseMenuContext.ts b/packages/react-components/react-menu/library/src/testing/mockUseMenuContext.ts
index 4b5aaac379b9f..ee09ea88f78e5 100644
--- a/packages/react-components/react-menu/library/src/testing/mockUseMenuContext.ts
+++ b/packages/react-components/react-menu/library/src/testing/mockUseMenuContext.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { useMenuContext_unstable } from '../contexts/menuContext';
import type { MenuContextValue } from '../contexts/menuContext';
diff --git a/packages/react-components/react-menu/stories/src/Menu/NestedSubmenusResponsiveness.stories.tsx b/packages/react-components/react-menu/stories/src/Menu/NestedSubmenusResponsiveness.stories.tsx
index 4ef6c1fe31843..3b0a2ee3e9285 100644
--- a/packages/react-components/react-menu/stories/src/Menu/NestedSubmenusResponsiveness.stories.tsx
+++ b/packages/react-components/react-menu/stories/src/Menu/NestedSubmenusResponsiveness.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PositioningImperativeRef, MenuProps } from '@fluentui/react-components';
import {
Button,
@@ -8,11 +8,9 @@ import {
MenuList,
MenuItem,
MenuPopover,
- PositioningImperativeRef,
makeStyles,
tokens,
mergeClasses,
- MenuProps,
} from '@fluentui/react-components';
const useStyles = makeStyles({
diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.test.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.test.tsx
index 7e62a7e95b18a..1fac6cac4f381 100644
--- a/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.test.tsx
+++ b/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.test.tsx
@@ -7,7 +7,7 @@ import { MessageBarBody } from '../MessageBarBody/MessageBarBody';
import { MessageBarTitle } from '../MessageBarTitle/MessageBarTitle';
import { MessageBarActions } from '../MessageBarActions/MessageBarActions';
import { resetIdsForTests } from '@fluentui/react-utilities';
-import { MessageBarProps } from './MessageBar.types';
+import type { MessageBarProps } from './MessageBar.types';
describe('MessageBar', () => {
beforeAll(() => {
diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBar/getIntentIcon.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBar/getIntentIcon.tsx
index c7e182a7e2fe9..4795c8eab9dbb 100644
--- a/packages/react-components/react-message-bar/library/src/components/MessageBar/getIntentIcon.tsx
+++ b/packages/react-components/react-message-bar/library/src/components/MessageBar/getIntentIcon.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { MessageBarProps } from './MessageBar.types';
+import type { MessageBarProps } from './MessageBar.types';
import { CheckmarkCircleFilled, InfoFilled, WarningFilled, DiamondDismissFilled } from '@fluentui/react-icons';
import type { JSXElement } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBarContextValues.ts b/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBarContextValues.ts
index 1dcff419fbb24..a0d0af5d2197a 100644
--- a/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBarContextValues.ts
+++ b/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBarContextValues.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { MessageBarContextValues, MessageBarState } from './MessageBar.types';
+import type { MessageBarContextValues, MessageBarState } from './MessageBar.types';
export function useMessageBarContextValue_unstable(state: MessageBarState): MessageBarContextValues {
const { layout, actionsRef, bodyRef, titleId } = state;
diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarActions/MessageBarActions.test.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBarActions/MessageBarActions.test.tsx
index d62960938f7ba..4f4052ad28d3c 100644
--- a/packages/react-components/react-message-bar/library/src/components/MessageBarActions/MessageBarActions.test.tsx
+++ b/packages/react-components/react-message-bar/library/src/components/MessageBarActions/MessageBarActions.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { isConformant } from '../../testing/isConformant';
import { MessageBarActions } from './MessageBarActions';
-import { MessageBarActionsProps } from './MessageBarActions.types';
+import type { MessageBarActionsProps } from './MessageBarActions.types';
describe('MessageBarActions', () => {
isConformant({
diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarActions/useMessageBarActions.ts b/packages/react-components/react-message-bar/library/src/components/MessageBarActions/useMessageBarActions.ts
index a96a197ac77e1..c9c7d691cb497 100644
--- a/packages/react-components/react-message-bar/library/src/components/MessageBarActions/useMessageBarActions.ts
+++ b/packages/react-components/react-message-bar/library/src/components/MessageBarActions/useMessageBarActions.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
import type { MessageBarActionsProps, MessageBarActionsState } from './MessageBarActions.types';
import { useMessageBarContext } from '../../contexts/messageBarContext';
diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarActions/useMessageBarActionsContextValues.ts b/packages/react-components/react-message-bar/library/src/components/MessageBarActions/useMessageBarActionsContextValues.ts
index 2e4557a1021ef..c9694d0d3445a 100644
--- a/packages/react-components/react-message-bar/library/src/components/MessageBarActions/useMessageBarActionsContextValues.ts
+++ b/packages/react-components/react-message-bar/library/src/components/MessageBarActions/useMessageBarActionsContextValues.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { MessageBarActionsContextValues } from './MessageBarActions.types';
+import type { MessageBarActionsContextValues } from './MessageBarActions.types';
export function useMessageBarActionsContextValue_unstable(): MessageBarActionsContextValues {
const buttonContext = React.useMemo(
diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarBody/useMessageBarBody.ts b/packages/react-components/react-message-bar/library/src/components/MessageBarBody/useMessageBarBody.ts
index 7d69fb2aa71a2..c1b6b39e361c9 100644
--- a/packages/react-components/react-message-bar/library/src/components/MessageBarBody/useMessageBarBody.ts
+++ b/packages/react-components/react-message-bar/library/src/components/MessageBarBody/useMessageBarBody.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
import type { MessageBarBodyProps, MessageBarBodyState } from './MessageBarBody.types';
import { useMessageBarContext } from '../../contexts/messageBarContext';
diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx
index f02ce02cffd8e..68f0ce51be499 100644
--- a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx
+++ b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx
@@ -1,6 +1,6 @@
import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
import { fadeAtom, slideAtom } from '@fluentui/react-motion-components-preview';
-import { MessageBarGroupProps } from './MessageBarGroup.types';
+import type { MessageBarGroupProps } from './MessageBarGroup.types';
/**
* A presence component for a MessageBar to enter and exit from a MessageBarGroup.
diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.types.ts b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.types.ts
index 3892ffb59ac5c..b4412afda05af 100644
--- a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.types.ts
+++ b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
export type MessageBarGroupSlots = {
root: Slot<'div'>;
diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/useMessageBarTitle.ts b/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/useMessageBarTitle.ts
index 8a9d4f000c14c..ad691de840304 100644
--- a/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/useMessageBarTitle.ts
+++ b/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/useMessageBarTitle.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { MessageBarTitleProps, MessageBarTitleState } from './MessageBarTitle.types';
import { useMessageBarContext } from '../../contexts/messageBarContext';
diff --git a/packages/react-components/react-message-bar/stories/src/MessageBar/Animation.stories.tsx b/packages/react-components/react-message-bar/stories/src/MessageBar/Animation.stories.tsx
index a4e720f6ea733..403445a7260a5 100644
--- a/packages/react-components/react-message-bar/stories/src/MessageBar/Animation.stories.tsx
+++ b/packages/react-components/react-message-bar/stories/src/MessageBar/Animation.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, MessageBarGroupProps, MessageBarIntent } from '@fluentui/react-components';
import { DismissRegular } from '@fluentui/react-icons';
import {
MessageBar,
@@ -7,8 +7,6 @@ import {
MessageBarTitle,
MessageBarBody,
MessageBarGroup,
- MessageBarGroupProps,
- MessageBarIntent,
Button,
Link,
makeStyles,
diff --git a/packages/react-components/react-message-bar/stories/src/MessageBar/Dismiss.stories.tsx b/packages/react-components/react-message-bar/stories/src/MessageBar/Dismiss.stories.tsx
index 57e0cd8da7f20..c7fc133e629b8 100644
--- a/packages/react-components/react-message-bar/stories/src/MessageBar/Dismiss.stories.tsx
+++ b/packages/react-components/react-message-bar/stories/src/MessageBar/Dismiss.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, MessageBarIntent } from '@fluentui/react-components';
import { DismissRegular } from '@fluentui/react-icons';
import {
MessageBar,
@@ -7,7 +7,6 @@ import {
MessageBarTitle,
MessageBarBody,
MessageBarGroup,
- MessageBarIntent,
Button,
Link,
makeStyles,
diff --git a/packages/react-components/react-message-bar/stories/src/MessageBar/Intent.stories.tsx b/packages/react-components/react-message-bar/stories/src/MessageBar/Intent.stories.tsx
index d550850ea645d..918c42d39e21a 100644
--- a/packages/react-components/react-message-bar/stories/src/MessageBar/Intent.stories.tsx
+++ b/packages/react-components/react-message-bar/stories/src/MessageBar/Intent.stories.tsx
@@ -1,13 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import {
- MessageBar,
- MessageBarTitle,
- MessageBarBody,
- MessageBarIntent,
- Link,
- makeStyles,
-} from '@fluentui/react-components';
+import type { JSXElement, MessageBarIntent } from '@fluentui/react-components';
+import { MessageBar, MessageBarTitle, MessageBarBody, Link, makeStyles } from '@fluentui/react-components';
const useClasses = makeStyles({
container: {
diff --git a/packages/react-components/react-migration-v0-v9/library/etc/react-migration-v0-v9.api.md b/packages/react-components/react-migration-v0-v9/library/etc/react-migration-v0-v9.api.md
index abc384b6bf636..e3588ec34f365 100644
--- a/packages/react-components/react-migration-v0-v9/library/etc/react-migration-v0-v9.api.md
+++ b/packages/react-components/react-migration-v0-v9/library/etc/react-migration-v0-v9.api.md
@@ -4,22 +4,22 @@
```ts
-import { ButtonProps } from '@fluentui/react-components';
-import { ComponentProps } from '@fluentui/react-components';
+import type { ButtonProps } from '@fluentui/react-components';
+import type { ComponentProps } from '@fluentui/react-components';
import type { ComponentProps as ComponentProps_2 } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { GriffelStyle } from '@fluentui/react-components';
+import type { GriffelStyle } from '@fluentui/react-components';
import type { JSXElement } from '@fluentui/react-utilities';
import type { JSXIntrinsicElement } from '@fluentui/react-utilities';
import type { JSXIntrinsicElementKeys } from '@fluentui/react-utilities';
import type { ObjectShorthandValue } from '@fluentui/react-northstar';
import * as React_2 from 'react';
-import { SelectionHookParams } from '@fluentui/react-utilities';
-import { SelectionItemId } from '@fluentui/react-utilities';
+import type { SelectionHookParams } from '@fluentui/react-utilities';
+import type { SelectionItemId } from '@fluentui/react-utilities';
import type { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
-import { Slot } from '@fluentui/react-components';
-import { Slot as Slot_2 } from '@fluentui/react-utilities';
+import type { Slot } from '@fluentui/react-components';
+import type { Slot as Slot_2 } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
// @public (undocumented)
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/AttachmentAction.tsx b/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/AttachmentAction.tsx
index eda535ffb8719..da2667655cfaf 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/AttachmentAction.tsx
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/AttachmentAction.tsx
@@ -1,6 +1,7 @@
'use client';
-import { Button, ButtonProps, mergeClasses } from '@fluentui/react-components';
+import type { ButtonProps } from '@fluentui/react-components';
+import { Button, mergeClasses } from '@fluentui/react-components';
import * as React from 'react';
import { useAttachmentActionStyles } from './AttachmentAction.styles';
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Button/ButtonMigration.mixins.ts b/packages/react-components/react-migration-v0-v9/library/src/components/Button/ButtonMigration.mixins.ts
index 694425616cda3..f077825d0a4a6 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/Button/ButtonMigration.mixins.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/Button/ButtonMigration.mixins.ts
@@ -1,4 +1,4 @@
-import { GriffelStyle } from '@fluentui/react-components';
+import type { GriffelStyle } from '@fluentui/react-components';
import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
// class names from v0 - not imported as we do not want to keep depending on v0.
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Flex/FlexItem.mixins.test.ts b/packages/react-components/react-migration-v0-v9/library/src/components/Flex/FlexItem.mixins.test.ts
index 558264a4efa5d..25d5674ed2f2d 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/Flex/FlexItem.mixins.test.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/Flex/FlexItem.mixins.test.ts
@@ -1,4 +1,4 @@
-import { GriffelStyle } from '@fluentui/react-components';
+import type { GriffelStyle } from '@fluentui/react-components';
import { flexItem } from './FlexItem.mixins';
const testMixin = (mixin: GriffelStyle | undefined, expectedStyle: GriffelStyle | undefined) => {
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Flex/FlexItem.mixins.ts b/packages/react-components/react-migration-v0-v9/library/src/components/Flex/FlexItem.mixins.ts
index 7d5270f226b4a..26c722a4fe136 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/Flex/FlexItem.mixins.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/Flex/FlexItem.mixins.ts
@@ -1,4 +1,4 @@
-import { GriffelStyle } from '@fluentui/react-components';
+import type { GriffelStyle } from '@fluentui/react-components';
const ALIGN = {
auto: { alignSelf: 'auto' },
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/FormField/FormFieldShim.tsx b/packages/react-components/react-migration-v0-v9/library/src/components/FormField/FormFieldShim.tsx
index 66ad3b13c117f..d0f6faeda1083 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/FormField/FormFieldShim.tsx
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/FormField/FormFieldShim.tsx
@@ -1,7 +1,7 @@
'use client';
+import type { FieldProps } from '@fluentui/react-components';
import {
- FieldProps,
renderField_unstable,
useFieldContextValues_unstable,
useFieldStyles_unstable,
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Grid/Grid.mixins.test.ts b/packages/react-components/react-migration-v0-v9/library/src/components/Grid/Grid.mixins.test.ts
index b8498c8dd44af..765fa94c5928e 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/Grid/Grid.mixins.test.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/Grid/Grid.mixins.test.ts
@@ -1,4 +1,4 @@
-import { GriffelStyle } from '@fluentui/react-components';
+import type { GriffelStyle } from '@fluentui/react-components';
import { grid } from './Grid.mixins';
const testMixin = (mixin: GriffelStyle | undefined, expectedStyle: GriffelStyle) => {
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Grid/Grid.mixins.ts b/packages/react-components/react-migration-v0-v9/library/src/components/Grid/Grid.mixins.ts
index 6d621f5adc50c..ced4f8a0df57a 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/Grid/Grid.mixins.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/Grid/Grid.mixins.ts
@@ -1,4 +1,4 @@
-import { GriffelStyle } from '@fluentui/react-components';
+import type { GriffelStyle } from '@fluentui/react-components';
const getCSSTemplateValue = (template: string | number): string => {
const templateAsNumber = Number(template);
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Input/Input.mixins.test.ts b/packages/react-components/react-migration-v0-v9/library/src/components/Input/Input.mixins.test.ts
index 8b12d14d56d77..ab83f98cce984 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/Input/Input.mixins.test.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/Input/Input.mixins.test.ts
@@ -1,4 +1,5 @@
-import { GriffelStyle, tokens } from '@fluentui/react-components';
+import type { GriffelStyle } from '@fluentui/react-components';
+import { tokens } from '@fluentui/react-components';
import { input } from './Input.mixins';
const testMixin = (mixin: GriffelStyle | undefined, expectedStyle: GriffelStyle | undefined) => {
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Input/Input.mixins.ts b/packages/react-components/react-migration-v0-v9/library/src/components/Input/Input.mixins.ts
index eb18305b41305..fa65efaa4045b 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/Input/Input.mixins.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/Input/Input.mixins.ts
@@ -1,4 +1,5 @@
-import { GriffelStyle, tokens } from '@fluentui/react-components';
+import type { GriffelStyle } from '@fluentui/react-components';
+import { tokens } from '@fluentui/react-components';
const fluid = (): GriffelStyle => ({ width: '100%' });
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/ItemLayout/ItemLayout.tsx b/packages/react-components/react-migration-v0-v9/library/src/components/ItemLayout/ItemLayout.tsx
index 80952fbfa4a28..80c59536cb06b 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/ItemLayout/ItemLayout.tsx
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/ItemLayout/ItemLayout.tsx
@@ -5,14 +5,8 @@
import * as React from 'react';
import { mergeClasses } from '@fluentui/react-components';
-import {
- ComponentProps,
- ComponentState,
- getIntrinsicElementProps,
- Slot,
- slot,
- assertSlots,
-} from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot, assertSlots } from '@fluentui/react-utilities';
import { useItemLayoutStyles } from './ItemLayout.styles';
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/List/List/List.test.tsx b/packages/react-components/react-migration-v0-v9/library/src/components/List/List/List.test.tsx
index 51b18e80259b4..03d535ba9fe12 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/List/List/List.test.tsx
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/List/List/List.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { isConformant } from '@fluentui/react-conformance';
import { List } from './List';
-import { ListProps } from './List.types';
+import type { ListProps } from './List.types';
describe('List', () => {
isConformant({
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/List/List/List.types.ts b/packages/react-components/react-migration-v0-v9/library/src/components/List/List/List.types.ts
index dea80cc588af8..1911677ee3075 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/List/List/List.types.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/List/List/List.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot, SelectionMode, SelectionItemId } from '@fluentui/react-utilities';
import type { ListSelectionState } from '../hooks/types';
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/List/List/listContext.ts b/packages/react-components/react-migration-v0-v9/library/src/components/List/List/listContext.ts
index d7e7ad87656e7..9d2ff084acbd0 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/List/List/listContext.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/List/List/listContext.ts
@@ -2,7 +2,7 @@
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
import type { ContextSelector } from '@fluentui/react-context-selector';
-import { ListContextValue } from './List.types';
+import type { ListContextValue } from './List.types';
export const listContextDefaultValue: ListContextValue = {
navigable: false,
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/List/List/useList.ts b/packages/react-components/react-migration-v0-v9/library/src/components/List/List/useList.ts
index fb04c92eff011..e86793ce3d65a 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/List/List/useList.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/List/List/useList.ts
@@ -1,15 +1,10 @@
'use client';
-import * as React from 'react';
-import {
- getIntrinsicElementProps,
- OnSelectionChangeData,
- slot,
- useControllableState,
- useEventCallback,
-} from '@fluentui/react-utilities';
+import type * as React from 'react';
+import type { OnSelectionChangeData } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-import { ListProps, ListState } from './List.types';
+import type { ListProps, ListState } from './List.types';
import { useListSelection } from '../hooks/useListSelection';
const DEFAULT_ROOT_EL_TYPE = 'ul';
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/List/List/useListContextValues.ts b/packages/react-components/react-migration-v0-v9/library/src/components/List/List/useListContextValues.ts
index be31e486c2802..64c0eb11cd8e8 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/List/List/useListContextValues.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/List/List/useListContextValues.ts
@@ -1,4 +1,4 @@
-import { ListContextValues, ListState } from './List.types';
+import type { ListContextValues, ListState } from './List.types';
export function useListContextValues_unstable(state: ListState): ListContextValues {
const { navigable, selection, as, truncateContent, truncateHeader } = state;
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/ListItem.test.tsx b/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/ListItem.test.tsx
index c0edcc386baf8..d018c6467f66e 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/ListItem.test.tsx
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/ListItem.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { isConformant } from '@fluentui/react-conformance';
import { ListItem } from './ListItem';
-import { ListItemProps } from './ListItem.types';
+import type { ListItemProps } from './ListItem.types';
describe('ListItem', () => {
isConformant({
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/ListItem.types.ts b/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/ListItem.types.ts
index 39be1735f155f..668fe465e3421 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/ListItem.types.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/ListItem.types.ts
@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { ItemLayout } from '../../ItemLayout';
+import type { ItemLayout } from '../../ItemLayout';
export type ListItemSlots = {
root: NonNullable>;
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/useListItem.tsx b/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/useListItem.tsx
index 9ab6c12756aa0..844339fd47655 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/useListItem.tsx
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/useListItem.tsx
@@ -2,7 +2,7 @@
import { useARIAButtonProps } from '@fluentui/react-aria';
import { getIntrinsicElementProps, slot, useEventCallback, useId } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
import { useListContext_unstable } from '../List/listContext';
import type { ListItemProps, ListItemState } from './ListItem.types';
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/List/hooks/types.ts b/packages/react-components/react-migration-v0-v9/library/src/components/List/hooks/types.ts
index da45dd1723fc7..04583c36c118b 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/List/hooks/types.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/List/hooks/types.ts
@@ -1,5 +1,5 @@
-import { SelectionItemId } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type { SelectionItemId } from '@fluentui/react-utilities';
+import type * as React from 'react';
export type ListSelectionState = {
isSelected: (item: string | number) => boolean;
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/List/hooks/useListSelection.tsx b/packages/react-components/react-migration-v0-v9/library/src/components/List/hooks/useListSelection.tsx
index c84cbdd50c8ea..56fd8e7553f01 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/List/hooks/useListSelection.tsx
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/List/hooks/useListSelection.tsx
@@ -1,6 +1,7 @@
'use client';
-import { SelectionHookParams, useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';
+import type { SelectionHookParams } from '@fluentui/react-utilities';
+import { useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';
import * as React from 'react';
import type { ListSelectionState } from './types';
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Slider/Slider.mixins.test.ts b/packages/react-components/react-migration-v0-v9/library/src/components/Slider/Slider.mixins.test.ts
index 2d3c99231385b..0ccd3301a4014 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/Slider/Slider.mixins.test.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/Slider/Slider.mixins.test.ts
@@ -1,4 +1,4 @@
-import { GriffelStyle } from '@fluentui/react-components';
+import type { GriffelStyle } from '@fluentui/react-components';
import { slider } from './Slider.mixins';
const testMixin = (mixin: GriffelStyle | undefined, expectedStyle: GriffelStyle | undefined) => {
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Slider/Slider.mixins.ts b/packages/react-components/react-migration-v0-v9/library/src/components/Slider/Slider.mixins.ts
index 65ec56a801717..5f32f3ca8c8e0 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/Slider/Slider.mixins.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/Slider/Slider.mixins.ts
@@ -1,4 +1,4 @@
-import { GriffelStyle } from '@fluentui/react-components';
+import type { GriffelStyle } from '@fluentui/react-components';
const fluid = (): GriffelStyle => ({ width: '100%' });
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Spinner/SpinnerMigration.mixins.test.ts b/packages/react-components/react-migration-v0-v9/library/src/components/Spinner/SpinnerMigration.mixins.test.ts
index be7f1c9cb2eab..796fe4a18b288 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/Spinner/SpinnerMigration.mixins.test.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/Spinner/SpinnerMigration.mixins.test.ts
@@ -1,4 +1,5 @@
-import { GriffelStyle, tokens } from '@fluentui/react-components';
+import type { GriffelStyle } from '@fluentui/react-components';
+import { tokens } from '@fluentui/react-components';
import { spinner } from './SpinnerMigration.mixins';
const testMixin = (mixin: GriffelStyle | undefined, expectedStyle: GriffelStyle | undefined) => {
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Spinner/SpinnerMigration.mixins.ts b/packages/react-components/react-migration-v0-v9/library/src/components/Spinner/SpinnerMigration.mixins.ts
index 8d266ef82d5d9..9319e78494b75 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/Spinner/SpinnerMigration.mixins.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/Spinner/SpinnerMigration.mixins.ts
@@ -1,4 +1,5 @@
-import { GriffelStyle, tokens, labelClassNames } from '@fluentui/react-components';
+import type { GriffelStyle } from '@fluentui/react-components';
+import { tokens, labelClassNames } from '@fluentui/react-components';
const v0Inline = (): GriffelStyle => ({ display: 'inline-flex' });
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/StyledText/StyledText.test.tsx b/packages/react-components/react-migration-v0-v9/library/src/components/StyledText/StyledText.test.tsx
index 1d13f6cad18dc..beccfc63a065a 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/StyledText/StyledText.test.tsx
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/StyledText/StyledText.test.tsx
@@ -4,7 +4,8 @@ import { isConformant } from '@fluentui/react-conformance';
import { render } from '@testing-library/react';
import * as React from 'react';
-import { StyledText, StyledTextProps } from './StyledText';
+import type { StyledTextProps } from './StyledText';
+import { StyledText } from './StyledText';
describe('StyledText', () => {
isConformant({
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/StyledText/StyledText.tsx b/packages/react-components/react-migration-v0-v9/library/src/components/StyledText/StyledText.tsx
index 497d551ee5964..3249b737222dc 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/StyledText/StyledText.tsx
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/StyledText/StyledText.tsx
@@ -4,7 +4,8 @@
'use client';
import * as React from 'react';
-import { getIntrinsicElementProps, mergeClasses, Slot, ComponentProps, slot } from '@fluentui/react-components';
+import type { Slot, ComponentProps } from '@fluentui/react-components';
+import { getIntrinsicElementProps, mergeClasses, slot } from '@fluentui/react-components';
import { useSizeStyles, useStyles, useWeightStyles } from './StyledText.styles';
export type StyledTextSlots = {
diff --git a/packages/react-components/react-migration-v8-v9/library/etc/react-migration-v8-v9.api.md b/packages/react-components/react-migration-v8-v9/library/etc/react-migration-v8-v9.api.md
index d2ac8560724d3..2f6576ef5773f 100644
--- a/packages/react-components/react-migration-v8-v9/library/etc/react-migration-v8-v9.api.md
+++ b/packages/react-components/react-migration-v8-v9/library/etc/react-migration-v8-v9.api.md
@@ -4,11 +4,11 @@
```ts
-import { BrandVariants } from '@fluentui/react-components';
+import type { BrandVariants } from '@fluentui/react-components';
import type { ButtonProps } from '@fluentui/react-components';
import type { IBaseButtonProps } from '@fluentui/react';
import type { IButtonProps } from '@fluentui/react';
-import { ICheckboxProps } from '@fluentui/react';
+import type { ICheckboxProps } from '@fluentui/react';
import type { IContextualMenuItem } from '@fluentui/react';
import type { IContextualMenuProps } from '@fluentui/react';
import type { IPalette } from '@fluentui/react';
@@ -17,8 +17,8 @@ import type { IStackProps } from '@fluentui/react';
import type { JSXElement } from '@fluentui/react-utilities';
import type { MenuProps } from '@fluentui/react-components';
import * as React_2 from 'react';
-import { Theme } from '@fluentui/react-components';
-import { Theme as Theme_2 } from '@fluentui/react';
+import type { Theme } from '@fluentui/react-components';
+import type { Theme as Theme_2 } from '@fluentui/react';
// @public
const ActionButtonShim: React_2.ForwardRefExoticComponent>;
diff --git a/packages/react-components/react-migration-v8-v9/library/src/components/Checkbox/CheckboxShim.tsx b/packages/react-components/react-migration-v8-v9/library/src/components/Checkbox/CheckboxShim.tsx
index ec4ce90abb507..74b157fb3e641 100644
--- a/packages/react-components/react-migration-v8-v9/library/src/components/Checkbox/CheckboxShim.tsx
+++ b/packages/react-components/react-migration-v8-v9/library/src/components/Checkbox/CheckboxShim.tsx
@@ -2,7 +2,8 @@
import * as React from 'react';
-import { classNamesFunction, ICheckboxProps, ICheckboxStyles, ICheckboxStyleProps } from '@fluentui/react';
+import type { ICheckboxProps, ICheckboxStyles, ICheckboxStyleProps } from '@fluentui/react';
+import { classNamesFunction } from '@fluentui/react';
import { Checkbox, mergeClasses } from '@fluentui/react-components';
import { useCheckboxProps } from './shimCheckboxProps';
import { useCheckboxStyles } from './Checkbox.styles';
diff --git a/packages/react-components/react-migration-v8-v9/library/src/components/Checkbox/shimCheckboxProps.ts b/packages/react-components/react-migration-v8-v9/library/src/components/Checkbox/shimCheckboxProps.ts
index 552cce81478e3..97ed3749fe218 100644
--- a/packages/react-components/react-migration-v8-v9/library/src/components/Checkbox/shimCheckboxProps.ts
+++ b/packages/react-components/react-migration-v8-v9/library/src/components/Checkbox/shimCheckboxProps.ts
@@ -2,8 +2,8 @@
import * as React from 'react';
-import { ICheckboxProps } from '@fluentui/react';
-import { CheckboxProps, CheckboxOnChangeData } from '@fluentui/react-components';
+import type { ICheckboxProps } from '@fluentui/react';
+import type { CheckboxProps, CheckboxOnChangeData } from '@fluentui/react-components';
import { useControllableValue } from '@fluentui/react-hooks';
import { getHTMLAttributes } from '../utils';
diff --git a/packages/react-components/react-migration-v8-v9/library/src/components/Menu/MenuShim.tsx b/packages/react-components/react-migration-v8-v9/library/src/components/Menu/MenuShim.tsx
index 0f3929ec6ccc3..764b5ff6a3e5c 100644
--- a/packages/react-components/react-migration-v8-v9/library/src/components/Menu/MenuShim.tsx
+++ b/packages/react-components/react-migration-v8-v9/library/src/components/Menu/MenuShim.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
import { ContextualMenuItemType } from '@fluentui/react';
import type { IContextualMenuItem } from '@fluentui/react';
import type { JSXElement } from '@fluentui/react-utilities';
+import type { MenuDividerProps } from '@fluentui/react-components';
import {
MenuItem,
MenuDivider,
@@ -13,7 +14,6 @@ import {
MenuList,
MenuPopover,
MenuItemCheckbox,
- MenuDividerProps,
} from '@fluentui/react-components';
import { shimMenuHeaderProps, shimMenuItemCheckboxProps, shimMenuItemProps, shimMenuProps } from './shimMenuProps';
diff --git a/packages/react-components/react-migration-v8-v9/library/src/components/Stack/stackUtils.ts b/packages/react-components/react-migration-v8-v9/library/src/components/Stack/stackUtils.ts
index ccdcdad5ac6ef..a650898608569 100644
--- a/packages/react-components/react-migration-v8-v9/library/src/components/Stack/stackUtils.ts
+++ b/packages/react-components/react-migration-v8-v9/library/src/components/Stack/stackUtils.ts
@@ -1,4 +1,5 @@
-import { getTheme, IStackProps, IStackTokens, IStyle, ITheme } from '@fluentui/react';
+import type { IStackProps, IStackTokens, IStyle, ITheme } from '@fluentui/react';
+import { getTheme } from '@fluentui/react';
// Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value.
const getThemedSpacing = (space: string, theme: ITheme): string => {
diff --git a/packages/react-components/react-migration-v8-v9/library/src/components/Theme/v8ThemeShim.ts b/packages/react-components/react-migration-v8-v9/library/src/components/Theme/v8ThemeShim.ts
index a9879ab02da76..54ed92f7342ab 100644
--- a/packages/react-components/react-migration-v8-v9/library/src/components/Theme/v8ThemeShim.ts
+++ b/packages/react-components/react-migration-v8-v9/library/src/components/Theme/v8ThemeShim.ts
@@ -2,7 +2,7 @@ import type { IPalette, ISemanticColors, IFontStyles, IFontWeight, IEffects, The
import { createTheme, DefaultPalette } from '@fluentui/react';
import { fluent2ComponentStyles } from '@fluentui/fluent2-theme';
-import { BrandVariants, Theme as ThemeV9 } from '@fluentui/react-components';
+import type { BrandVariants, Theme as ThemeV9 } from '@fluentui/react-components';
import { black, blackAlpha, grey, sharedColors, white, whiteAlpha } from './themeDuplicates';
diff --git a/packages/react-components/react-migration-v8-v9/library/src/components/Theme/v9ThemeShim.ts b/packages/react-components/react-migration-v8-v9/library/src/components/Theme/v9ThemeShim.ts
index e6583fb199a02..557bea7c75463 100644
--- a/packages/react-components/react-migration-v8-v9/library/src/components/Theme/v9ThemeShim.ts
+++ b/packages/react-components/react-migration-v8-v9/library/src/components/Theme/v9ThemeShim.ts
@@ -1,7 +1,7 @@
-import { Theme as ThemeV8 } from '@fluentui/react';
+import type { Theme as ThemeV8 } from '@fluentui/react';
import type { IEffects, IPalette } from '@fluentui/react';
-import { Theme as ThemeV9, webLightTheme } from '@fluentui/react-components';
-import type { BorderRadiusTokens, ColorTokens, ShadowTokens } from '@fluentui/react-components';
+import { webLightTheme } from '@fluentui/react-components';
+import type { BorderRadiusTokens, ColorTokens, ShadowTokens, Theme as ThemeV9 } from '@fluentui/react-components';
import { blackAlpha, whiteAlpha, grey, grey10Alpha, grey12Alpha } from './themeDuplicates';
/**
diff --git a/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/ThemePreviewV8.stories.tsx b/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/ThemePreviewV8.stories.tsx
index 503f6e9b9e470..b3f636e8bad8b 100644
--- a/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/ThemePreviewV8.stories.tsx
+++ b/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/ThemePreviewV8.stories.tsx
@@ -12,7 +12,8 @@ import { mergeStyles } from '@fluentui/react';
import { Persona, PersonaPresence } from '@fluentui/react/lib/Persona';
import { Pivot, PivotItem } from '@fluentui/react/lib/Pivot';
import { Slider } from '@fluentui/react/lib/Slider';
-import { IStackTokens, Stack } from '@fluentui/react/lib/Stack';
+import type { IStackTokens } from '@fluentui/react/lib/Stack';
+import { Stack } from '@fluentui/react/lib/Stack';
import { Text } from '@fluentui/react/lib/Text';
import { TextField } from '@fluentui/react/lib/TextField';
import { Toggle } from '@fluentui/react/lib/Toggle';
diff --git a/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createBrandVariants/index.stories.tsx b/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createBrandVariants/index.stories.tsx
index c43f3554aedf0..895c66ddb7b11 100644
--- a/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createBrandVariants/index.stories.tsx
+++ b/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createBrandVariants/index.stories.tsx
@@ -1,12 +1,12 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TextareaProps } from '@fluentui/react-components';
import { DefaultPalette } from '@fluentui/react';
-import { Button, makeStyles, Textarea, TextareaProps, RadioGroup, Radio } from '@fluentui/react-components';
+import { Button, makeStyles, Textarea, RadioGroup, Radio } from '@fluentui/react-components';
import { createBrandVariants } from '@fluentui/react-migration-v8-v9';
import descriptionMd from './Description.md';
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
const useStyles = makeStyles({
root: {
diff --git a/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createV8Theme/index.stories.tsx b/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createV8Theme/index.stories.tsx
index d1a92701340d4..9f154f973b461 100644
--- a/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createV8Theme/index.stories.tsx
+++ b/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createV8Theme/index.stories.tsx
@@ -1,16 +1,14 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TextareaProps, BrandVariants, Theme as ThemeV9 } from '@fluentui/react-components';
import type { Meta } from '@storybook/react-webpack5';
-import { createTheme, Theme as ThemeV8, ThemeProvider, initializeIcons } from '@fluentui/react';
+import type { Theme as ThemeV8 } from '@fluentui/react';
+import { createTheme, ThemeProvider, initializeIcons } from '@fluentui/react';
import {
Button,
makeStyles,
Textarea,
- TextareaProps,
webLightTheme,
- BrandVariants,
- Theme as ThemeV9,
createLightTheme,
createDarkTheme,
tokens,
diff --git a/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createV9Theme/index.stories.tsx b/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createV9Theme/index.stories.tsx
index 0981d3e2b5126..527350aa89a36 100644
--- a/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createV9Theme/index.stories.tsx
+++ b/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createV9Theme/index.stories.tsx
@@ -1,18 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TextareaProps, Theme as ThemeV9 } from '@fluentui/react-components';
import type { Meta } from '@storybook/react-webpack5';
-import { createTheme, ThemeProvider, Theme as ThemeV8, DefaultPalette } from '@fluentui/react';
-import {
- Button,
- makeStyles,
- Textarea,
- TextareaProps,
- tokens,
- Theme as ThemeV9,
- webLightTheme,
- FluentProvider,
-} from '@fluentui/react-components';
+import type { Theme as ThemeV8 } from '@fluentui/react';
+import { createTheme, ThemeProvider, DefaultPalette } from '@fluentui/react';
+import { Button, makeStyles, Textarea, tokens, webLightTheme, FluentProvider } from '@fluentui/react-components';
import { createV9Theme } from '@fluentui/react-migration-v8-v9';
import descriptionMd from './Description.md';
diff --git a/packages/react-components/react-motion-components-preview/library/etc/react-motion-components-preview.api.md b/packages/react-components/react-motion-components-preview/library/etc/react-motion-components-preview.api.md
index 8c685c4a8c5b1..a51eb39937e66 100644
--- a/packages/react-components/react-motion-components-preview/library/etc/react-motion-components-preview.api.md
+++ b/packages/react-components/react-motion-components-preview/library/etc/react-motion-components-preview.api.md
@@ -4,9 +4,9 @@
```ts
-import { AtomMotion } from '@fluentui/react-motion';
+import type { AtomMotion } from '@fluentui/react-motion';
import { PresenceComponent } from '@fluentui/react-motion';
-import { PresenceComponentProps } from '@fluentui/react-motion';
+import type { PresenceComponentProps } from '@fluentui/react-motion';
import type { PresenceDirection } from '@fluentui/react-motion';
import * as React_2 from 'react';
diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/blur-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/blur-atom.ts
index e079375af5a28..8678a9e7533d5 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/blur-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/blur-atom.ts
@@ -1,5 +1,6 @@
-import { AtomMotion, motionTokens } from '@fluentui/react-motion';
-import { BaseAtomParams } from '../types';
+import type { AtomMotion } from '@fluentui/react-motion';
+import { motionTokens } from '@fluentui/react-motion';
+import type { BaseAtomParams } from '../types';
interface BlurAtomParams extends BaseAtomParams {
/** Blur radius for the out state (exited). Defaults to '10px'. */
diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts
index 371c59fd257f6..9fe886270c261 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts
@@ -1,5 +1,6 @@
-import { AtomMotion, motionTokens } from '@fluentui/react-motion';
-import { BaseAtomParams } from '../types';
+import type { AtomMotion } from '@fluentui/react-motion';
+import { motionTokens } from '@fluentui/react-motion';
+import type { BaseAtomParams } from '../types';
interface FadeAtomParams extends BaseAtomParams {
/** Defines how values are applied before and after execution. Defaults to 'both'. */
diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/rotate-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/rotate-atom.ts
index d3f35e218d608..7ad45ae91ce9a 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/rotate-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/rotate-atom.ts
@@ -1,6 +1,7 @@
-import { AtomMotion, motionTokens } from '@fluentui/react-motion';
+import type { AtomMotion } from '@fluentui/react-motion';
+import { motionTokens } from '@fluentui/react-motion';
import type { RotateParams } from '../components/Rotate/rotate-types';
-import { BaseAtomParams } from '../types';
+import type { BaseAtomParams } from '../types';
type Axis3D = NonNullable;
diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.ts
index c2e8ee8bf6948..72c46bb2d6a9e 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.ts
@@ -1,5 +1,6 @@
-import { AtomMotion, motionTokens } from '@fluentui/react-motion';
-import { BaseAtomParams } from '../types';
+import type { AtomMotion } from '@fluentui/react-motion';
+import { motionTokens } from '@fluentui/react-motion';
+import type { BaseAtomParams } from '../types';
interface ScaleAtomParams extends BaseAtomParams {
/** Scale for the out state (exited). Defaults to 0.9. */
diff --git a/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.ts b/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.ts
index 928e02fd67260..d9ae7d5a7ab33 100644
--- a/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/atoms/slide-atom.ts
@@ -1,5 +1,6 @@
-import { AtomMotion, motionTokens } from '@fluentui/react-motion';
-import { BaseAtomParams } from '../types';
+import type { AtomMotion } from '@fluentui/react-motion';
+import { motionTokens } from '@fluentui/react-motion';
+import type { BaseAtomParams } from '../types';
interface SlideAtomParams extends BaseAtomParams {
/** X translate for the out state (exited). Defaults to '0px'. */
diff --git a/packages/react-components/react-motion-components-preview/library/src/choreography/Stagger/Stagger.tsx b/packages/react-components/react-motion-components-preview/library/src/choreography/Stagger/Stagger.tsx
index 44888686d04db..7c2d3afa7200c 100644
--- a/packages/react-components/react-motion-components-preview/library/src/choreography/Stagger/Stagger.tsx
+++ b/packages/react-components/react-motion-components-preview/library/src/choreography/Stagger/Stagger.tsx
@@ -9,7 +9,8 @@ import {
acceptsDelayProps,
getStaggerChildMapping,
} from './utils';
-import { StaggerOneWayProps, StaggerProps, type StaggerHideMode, type StaggerDelayMode } from './stagger-types';
+import type { StaggerOneWayProps, StaggerProps } from './stagger-types';
+import { type StaggerHideMode, type StaggerDelayMode } from './stagger-types';
/**
* Shared utility to detect optimal stagger modes based on children components.
diff --git a/packages/react-components/react-motion-components-preview/library/src/choreography/Stagger/stagger-types.ts b/packages/react-components/react-motion-components-preview/library/src/choreography/Stagger/stagger-types.ts
index 43b92da125d3e..6491bf72341a3 100644
--- a/packages/react-components/react-motion-components-preview/library/src/choreography/Stagger/stagger-types.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/choreography/Stagger/stagger-types.ts
@@ -1,5 +1,5 @@
-import { PresenceComponentProps, PresenceDirection } from '@fluentui/react-motion';
-import * as React from 'react';
+import type { PresenceComponentProps, PresenceDirection } from '@fluentui/react-motion';
+import type * as React from 'react';
/**
* Defines how Stagger manages its children's visibility/mounting.
diff --git a/packages/react-components/react-motion-components-preview/library/src/choreography/Stagger/utils/motionComponentDetection.ts b/packages/react-components/react-motion-components-preview/library/src/choreography/Stagger/utils/motionComponentDetection.ts
index 43aae15130b94..818243506969a 100644
--- a/packages/react-components/react-motion-components-preview/library/src/choreography/Stagger/utils/motionComponentDetection.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/choreography/Stagger/utils/motionComponentDetection.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
/**
* Checks if a React element has all of the specified props explicitly provided.
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Blur/Blur.ts b/packages/react-components/react-motion-components-preview/library/src/components/Blur/Blur.ts
index 93311e8a63041..953d503628a10 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Blur/Blur.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Blur/Blur.ts
@@ -1,7 +1,8 @@
-import { motionTokens, createPresenceComponent, PresenceMotionFn } from '@fluentui/react-motion';
+import type { PresenceMotionFn } from '@fluentui/react-motion';
+import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
import { fadeAtom } from '../../atoms/fade-atom';
import { blurAtom } from '../../atoms/blur-atom';
-import { BlurParams } from './blur-types';
+import type { BlurParams } from './blur-types';
/**
* Define a presence motion for blur in/out
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts
index 9ab2bbcc71e5c..8435f0133f866 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts
@@ -1,10 +1,5 @@
-import {
- motionTokens,
- createPresenceComponent,
- PresenceMotionFn,
- createPresenceComponentVariant,
- AtomMotion,
-} from '@fluentui/react-motion';
+import type { PresenceMotionFn, AtomMotion } from '@fluentui/react-motion';
+import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
import type { CollapseParams } from './collapse-types';
import { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';
import { fadeAtom } from '../../atoms/fade-atom';
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.ts b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.ts
index ac037bf720bc8..665ff9081d763 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.ts
@@ -1,5 +1,5 @@
-import { AtomMotion, PresenceDirection } from '@fluentui/react-motion';
-import { CollapseOrientation } from './collapse-types';
+import type { AtomMotion, PresenceDirection } from '@fluentui/react-motion';
+import type { CollapseOrientation } from './collapse-types';
// ----- SIZE -----
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts b/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts
index b7d205a20d41b..be9a02de0a1cb 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts
@@ -1,11 +1,7 @@
-import {
- motionTokens,
- createPresenceComponent,
- PresenceMotionFn,
- createPresenceComponentVariant,
-} from '@fluentui/react-motion';
+import type { PresenceMotionFn } from '@fluentui/react-motion';
+import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
import { fadeAtom } from '../../atoms/fade-atom';
-import { FadeParams } from './fade-types';
+import type { FadeParams } from './fade-types';
/**
* Define a presence motion for fade in/out
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Rotate/Rotate.ts b/packages/react-components/react-motion-components-preview/library/src/components/Rotate/Rotate.ts
index b6b75f56364b8..a835ac659e2fb 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Rotate/Rotate.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Rotate/Rotate.ts
@@ -1,7 +1,8 @@
-import { AtomMotion, createPresenceComponent, motionTokens, PresenceMotionFn } from '@fluentui/react-motion';
+import type { AtomMotion, PresenceMotionFn } from '@fluentui/react-motion';
+import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';
import { fadeAtom } from '../../atoms/fade-atom';
import { rotateAtom } from '../../atoms/rotate-atom';
-import { RotateParams } from './rotate-types';
+import type { RotateParams } from './rotate-types';
/**
* Define a presence motion for rotate in/out
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts b/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts
index a87e3357632fb..2d8239d76991b 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts
@@ -1,12 +1,8 @@
-import {
- motionTokens,
- createPresenceComponent,
- PresenceMotionFn,
- createPresenceComponentVariant,
-} from '@fluentui/react-motion';
+import type { PresenceMotionFn } from '@fluentui/react-motion';
+import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
import { fadeAtom } from '../../atoms/fade-atom';
import { scaleAtom } from '../../atoms/scale-atom';
-import { ScaleParams } from './scale-types';
+import type { ScaleParams } from './scale-types';
/**
* Define a presence motion for scale in/out
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Slide/Slide.ts b/packages/react-components/react-motion-components-preview/library/src/components/Slide/Slide.ts
index 24a77c0e0ca81..d73cca6dbea3c 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Slide/Slide.ts
+++ b/packages/react-components/react-motion-components-preview/library/src/components/Slide/Slide.ts
@@ -1,12 +1,8 @@
-import {
- motionTokens,
- createPresenceComponent,
- PresenceMotionFn,
- createPresenceComponentVariant,
-} from '@fluentui/react-motion';
+import type { PresenceMotionFn } from '@fluentui/react-motion';
+import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
import { fadeAtom } from '../../atoms/fade-atom';
import { slideAtom } from '../../atoms/slide-atom';
-import { SlideParams } from './slide-types';
+import type { SlideParams } from './slide-types';
/**
* Define a presence motion for slide in/out
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/Collapse.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Collapse/Collapse.stories.tsx
index 469478f5e62f3..8eb76bbea872e 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/Collapse.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/Collapse.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { PresenceComponentProps } from '@fluentui/react-components';
+import type { PresenceComponentProps } from '@fluentui/react-components';
import { Collapse } from '@fluentui/react-motion-components-preview';
const LoremIpsum = React.forwardRef>((props, ref) => (
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDefault.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDefault.stories.tsx
index ab8ef2c2749c5..e695e74c716cf 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDefault.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDefault.stories.tsx
@@ -1,7 +1,7 @@
-import { Field, makeStyles, tokens, Switch, PresenceComponentProps } from '@fluentui/react-components';
+import { Field, makeStyles, tokens, Switch } from '@fluentui/react-components';
import { Collapse } from '@fluentui/react-motion-components-preview';
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceComponentProps } from '@fluentui/react-components';
const useClasses = makeStyles({
container: {
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Fade/Fade.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Fade/Fade.stories.tsx
index 9fb7fcd31fcb3..e06c8a38a68cc 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Fade/Fade.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Fade/Fade.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { PresenceComponentProps } from '@fluentui/react-components';
+import type { PresenceComponentProps } from '@fluentui/react-components';
import { Fade } from '@fluentui/react-motion-components-preview';
const LoremIpsum = React.forwardRef>((props, ref) => (
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Scale/Scale.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Scale/Scale.stories.tsx
index c9011f4cdbdcd..aefa860afeadc 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Scale/Scale.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Scale/Scale.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
-import { PresenceComponentProps } from '@fluentui/react-components';
+import type { PresenceComponentProps } from '@fluentui/react-components';
import { Scale } from '@fluentui/react-motion-components-preview';
const LoremIpsum = React.forwardRef>((props, ref) => (
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.stories.tsx
index e24a7c69d1746..7df9a8f03dcfc 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.stories.tsx
@@ -3,6 +3,7 @@ import type { JSXElement } from '@fluentui/react-components';
import { makeStyles, tokens, Button } from '@fluentui/react-components';
import { Slide } from '@fluentui/react-motion-components-preview';
import SlideDirectionsDescription from './SlideDirections.stories.md';
+import type { FluentIcon } from '@fluentui/react-icons';
import {
ArrowUpFilled,
ArrowDownFilled,
@@ -12,7 +13,6 @@ import {
ArrowUpRightFilled,
ArrowDownLeftFilled,
ArrowDownRightFilled,
- FluentIcon,
} from '@fluentui/react-icons';
const useClasses = makeStyles({
diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerBouncingDots.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerBouncingDots.stories.tsx
index 241a24fd476ee..e7299fac23b4b 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerBouncingDots.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerBouncingDots.stories.tsx
@@ -1,14 +1,7 @@
import * as React from 'react';
import StaggerBouncingDotsDescription from './StaggerBouncingDots.stories.md';
-import {
- makeStyles,
- tokens,
- motionTokens,
- createMotionComponent,
- Slider,
- Label,
- JSXElement,
-} from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
+import { makeStyles, tokens, motionTokens, createMotionComponent, Slider, Label } from '@fluentui/react-components';
import { Stagger } from '@fluentui/react-motion-components-preview';
const useClasses = makeStyles({
diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerDelayMode.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerDelayMode.stories.tsx
index 4df4e6fec6f1b..521badfd0c574 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerDelayMode.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerDelayMode.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import StaggerDelayModeDescription from './StaggerDelayMode.stories.md';
-import { makeStyles, tokens, Button, Avatar, Checkbox, motionTokens, JSXElement } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
+import { makeStyles, tokens, Button, Avatar, Checkbox, motionTokens } from '@fluentui/react-components';
import { Scale, Stagger } from '@fluentui/react-motion-components-preview';
const avatarData = [
diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerExpandableContainer.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerExpandableContainer.stories.tsx
index e5d12854548ed..2c84f35ad9623 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerExpandableContainer.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerExpandableContainer.stories.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
import StaggerExpandableContainerDescription from './StaggerExpandableContainer.stories.md';
+import type { JSXElement } from '@fluentui/react-components';
import {
makeStyles,
tokens,
@@ -8,7 +9,6 @@ import {
Persona,
Slider,
Label,
- JSXElement,
type PersonaProps,
} from '@fluentui/react-components';
import { Stagger, Slide, Collapse } from '@fluentui/react-motion-components-preview';
diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerHideMode.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerHideMode.stories.tsx
index e1b0f51517d90..093ece7ad92ed 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerHideMode.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerHideMode.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import StaggerHideModeDescription from './StaggerHideMode.stories.md';
-import { makeStyles, tokens, Button, Avatar, Checkbox, motionTokens, JSXElement } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
+import { makeStyles, tokens, Button, Avatar, Checkbox, motionTokens } from '@fluentui/react-components';
import { Scale, Stagger } from '@fluentui/react-motion-components-preview';
const avatarData = [
diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerItemDelay.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerItemDelay.stories.tsx
index 02354882094dd..68d9cbec69ada 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerItemDelay.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerItemDelay.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import StaggerItemDelayDescription from './StaggerItemDelay.stories.md';
-import { Field, makeStyles, tokens, Button, Label, Slider, JSXElement } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
+import { Field, makeStyles, tokens, Button, Label, Slider } from '@fluentui/react-components';
import { Stagger, Slide } from '@fluentui/react-motion-components-preview';
const useClasses = makeStyles({
diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPlainElements.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPlainElements.stories.tsx
index 876203df79416..a305a6b0cc6d9 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPlainElements.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPlainElements.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import StaggerPlainElementsDescription from './StaggerPlainElements.stories.md';
-import { Field, makeStyles, tokens, Button, JSXElement } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
+import { Field, makeStyles, tokens, Button } from '@fluentui/react-components';
import { Stagger } from '@fluentui/react-motion-components-preview';
const useClasses = makeStyles({
diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPresence.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPresence.stories.tsx
index 7e7d06f7ad357..592aed69f7d70 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPresence.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPresence.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import StaggerPresenceDescription from './StaggerPresence.stories.md';
-import { Field, makeStyles, tokens, Button, JSXElement } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
+import { Field, makeStyles, tokens, Button } from '@fluentui/react-components';
import { Stagger, Slide } from '@fluentui/react-motion-components-preview';
const useClasses = makeStyles({
diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerReversed.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerReversed.stories.tsx
index 661e42148980e..e349b1e9b1344 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerReversed.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerReversed.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import StaggerReversedDescription from './StaggerReversed.stories.md';
-import { Field, makeStyles, tokens, Button, JSXElement } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
+import { Field, makeStyles, tokens, Button } from '@fluentui/react-components';
import { Stagger, Slide } from '@fluentui/react-motion-components-preview';
const useClasses = makeStyles({
diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerSpinners.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerSpinners.stories.tsx
index cf1e717eb761b..28ea65d2d2fe5 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerSpinners.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerSpinners.stories.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { makeStyles, tokens, motionTokens, createMotionComponent, JSXElement } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
+import { makeStyles, tokens, motionTokens, createMotionComponent } from '@fluentui/react-components';
import { Stagger } from '@fluentui/react-motion-components-preview';
const useClasses = makeStyles({
diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerIn.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerIn.stories.tsx
index e742b23995c63..f23fd00d20e4f 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerIn.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerIn.stories.tsx
@@ -1,17 +1,7 @@
import * as React from 'react';
import StaggerStaggerInDescription from './StaggerStaggerIn.stories.md';
-import {
- Avatar,
- Button,
- Card,
- CardHeader,
- PresenceBadgeStatus,
- Text,
- makeStyles,
- motionTokens,
- tokens,
- JSXElement,
-} from '@fluentui/react-components';
+import type { PresenceBadgeStatus, JSXElement } from '@fluentui/react-components';
+import { Avatar, Button, Card, CardHeader, Text, makeStyles, motionTokens, tokens } from '@fluentui/react-components';
import { Stagger, CollapseRelaxed } from '@fluentui/react-motion-components-preview';
import { MoreHorizontal20Regular } from '@fluentui/react-icons';
diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerOut.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerOut.stories.tsx
index ca3d25d3cdd8a..1b7604fe60dfb 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerOut.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerOut.stories.tsx
@@ -1,16 +1,6 @@
import * as React from 'react';
-import {
- Avatar,
- Button,
- Card,
- CardHeader,
- PresenceBadgeStatus,
- Text,
- makeStyles,
- motionTokens,
- tokens,
- JSXElement,
-} from '@fluentui/react-components';
+import type { PresenceBadgeStatus, JSXElement } from '@fluentui/react-components';
+import { Avatar, Button, Card, CardHeader, Text, makeStyles, motionTokens, tokens } from '@fluentui/react-components';
import { Stagger, Collapse } from '@fluentui/react-motion-components-preview';
import { MoreHorizontal20Regular } from '@fluentui/react-icons';
import StaggerStaggerOutDescription from './StaggerStaggerOut.stories.md';
diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerText.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerText.stories.tsx
index dcfc3522a1de3..46a30c9723f77 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerText.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerText.stories.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import StaggerTextDescription from './StaggerText.stories.md';
-import { Field, makeStyles, tokens, Button, motionTokens, JSXElement } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
+import { Field, makeStyles, tokens, Button, motionTokens } from '@fluentui/react-components';
import { Stagger, Scale } from '@fluentui/react-motion-components-preview';
const useClasses = makeStyles({
diff --git a/packages/react-components/react-motion/library/src/components/PresenceGroup.test.tsx b/packages/react-components/react-motion/library/src/components/PresenceGroup.test.tsx
index 7a77d95ea4f2d..bf77235115505 100644
--- a/packages/react-components/react-motion/library/src/components/PresenceGroup.test.tsx
+++ b/packages/react-components/react-motion/library/src/components/PresenceGroup.test.tsx
@@ -1,7 +1,8 @@
import { render } from '@testing-library/react';
import * as React from 'react';
-import { PresenceGroupChildContext, PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';
+import type { PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';
+import { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';
import { PresenceGroup } from './PresenceGroup';
const TestComponent: React.FC<{
diff --git a/packages/react-components/react-motion/library/src/factories/createMotionComponentVariant.ts b/packages/react-components/react-motion/library/src/factories/createMotionComponentVariant.ts
index 3228689771f5c..2c5e44c2a43c5 100644
--- a/packages/react-components/react-motion/library/src/factories/createMotionComponentVariant.ts
+++ b/packages/react-components/react-motion/library/src/factories/createMotionComponentVariant.ts
@@ -1,5 +1,6 @@
import type { MotionParam, AtomMotionFn } from '../types';
-import { MOTION_DEFINITION, createMotionComponent, MotionComponent } from './createMotionComponent';
+import type { MotionComponent } from './createMotionComponent';
+import { MOTION_DEFINITION, createMotionComponent } from './createMotionComponent';
/**
* Create a variant function that wraps a motion function to customize it.
diff --git a/packages/react-components/react-motion/library/src/factories/createPresenceComponent.ts b/packages/react-components/react-motion/library/src/factories/createPresenceComponent.ts
index cd5ae7fbb67d9..fd299387b24a5 100644
--- a/packages/react-components/react-motion/library/src/factories/createPresenceComponent.ts
+++ b/packages/react-components/react-motion/library/src/factories/createPresenceComponent.ts
@@ -19,7 +19,8 @@ import type {
AnimationHandle,
} from '../types';
import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
-import { createMotionComponent, MotionComponent } from './createMotionComponent';
+import type { MotionComponent } from './createMotionComponent';
+import { createMotionComponent } from './createMotionComponent';
/**
* A private symbol to store the motion definition on the component for variants.
diff --git a/packages/react-components/react-motion/library/src/factories/createPresenceComponentVariant.ts b/packages/react-components/react-motion/library/src/factories/createPresenceComponentVariant.ts
index 045caf74fcea9..72cd36e24a38e 100644
--- a/packages/react-components/react-motion/library/src/factories/createPresenceComponentVariant.ts
+++ b/packages/react-components/react-motion/library/src/factories/createPresenceComponentVariant.ts
@@ -1,5 +1,6 @@
import type { MotionParam, PresenceMotionFn } from '../types';
-import { PRESENCE_MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';
+import type { PresenceComponent } from './createPresenceComponent';
+import { PRESENCE_MOTION_DEFINITION, createPresenceComponent } from './createPresenceComponent';
/**
* Create a variant function that wraps a presence function to customize it.
diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentDefault.stories.tsx b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentDefault.stories.tsx
index e302317abcd36..dd02e5d62d2b9 100644
--- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentDefault.stories.tsx
+++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentDefault.stories.tsx
@@ -1,14 +1,6 @@
-import {
- createPresenceComponent,
- Field,
- makeStyles,
- motionTokens,
- tokens,
- Switch,
- PresenceComponentProps,
-} from '@fluentui/react-components';
+import { createPresenceComponent, Field, makeStyles, motionTokens, tokens, Switch } from '@fluentui/react-components';
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceComponentProps } from '@fluentui/react-components';
const useClasses = makeStyles({
container: {
diff --git a/packages/react-components/react-nav/library/etc/react-nav.api.md b/packages/react-components/react-nav/library/etc/react-nav.api.md
index f85a1104160e7..1d447ac812a18 100644
--- a/packages/react-components/react-nav/library/etc/react-nav.api.md
+++ b/packages/react-components/react-nav/library/etc/react-nav.api.md
@@ -4,11 +4,11 @@
```ts
-import { ARIAButtonSlotProps } from '@fluentui/react-aria';
-import { ButtonProps } from '@fluentui/react-button';
-import { ButtonSlots } from '@fluentui/react-button';
-import { ButtonState } from '@fluentui/react-button';
-import { ComponentProps } from '@fluentui/react-utilities';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import type { ButtonProps } from '@fluentui/react-button';
+import type { ButtonSlots } from '@fluentui/react-button';
+import type { ButtonState } from '@fluentui/react-button';
+import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { DividerProps } from '@fluentui/react-divider';
import { DividerSlots } from '@fluentui/react-divider';
@@ -22,20 +22,20 @@ import type { DrawerFooterState } from '@fluentui/react-drawer';
import type { DrawerHeaderProps } from '@fluentui/react-drawer';
import type { DrawerHeaderSlots } from '@fluentui/react-drawer';
import type { DrawerHeaderState } from '@fluentui/react-drawer';
-import { DrawerProps } from '@fluentui/react-drawer';
-import { DrawerSlots } from '@fluentui/react-drawer';
-import { DrawerState } from '@fluentui/react-drawer';
+import type { DrawerProps } from '@fluentui/react-drawer';
+import type { DrawerSlots } from '@fluentui/react-drawer';
+import type { DrawerState } from '@fluentui/react-drawer';
import type { EventData } from '@fluentui/react-utilities';
-import { EventHandler } from '@fluentui/react-utilities';
+import type { EventHandler } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { InlineDrawerSlots } from '@fluentui/react-drawer';
import type { JSXElement } from '@fluentui/react-utilities';
-import { MenuButtonProps } from '@fluentui/react-button';
+import type { MenuButtonProps } from '@fluentui/react-button';
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities';
-import { ToggleButtonProps } from '@fluentui/react-button';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { ToggleButtonProps } from '@fluentui/react-button';
import type { TooltipProps } from '@fluentui/react-tooltip';
// @public
diff --git a/packages/react-components/react-nav/library/src/components/AppItem/AppItem.test.tsx b/packages/react-components/react-nav/library/src/components/AppItem/AppItem.test.tsx
index 12f86825b82bd..7352923d4a26b 100644
--- a/packages/react-components/react-nav/library/src/components/AppItem/AppItem.test.tsx
+++ b/packages/react-components/react-nav/library/src/components/AppItem/AppItem.test.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { isConformant } from '../../testing/isConformant';
import { AppItem } from './AppItem';
import type { AppItemProps } from './AppItem.types';
diff --git a/packages/react-components/react-nav/library/src/components/AppItem/AppItem.types.ts b/packages/react-components/react-nav/library/src/components/AppItem/AppItem.types.ts
index 6f3266ef22cfa..2923b769c3abb 100644
--- a/packages/react-components/react-nav/library/src/components/AppItem/AppItem.types.ts
+++ b/packages/react-components/react-nav/library/src/components/AppItem/AppItem.types.ts
@@ -1,6 +1,6 @@
-import { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { NavDensity } from '../Nav/Nav.types';
+import type { NavDensity } from '../Nav/Nav.types';
export type AppItemSlots = {
/**
diff --git a/packages/react-components/react-nav/library/src/components/AppItem/useAppItem.ts b/packages/react-components/react-nav/library/src/components/AppItem/useAppItem.ts
index 7fda9cda36c84..7ff105002ae5b 100644
--- a/packages/react-components/react-nav/library/src/components/AppItem/useAppItem.ts
+++ b/packages/react-components/react-nav/library/src/components/AppItem/useAppItem.ts
@@ -1,9 +1,10 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { AppItemProps, AppItemState } from './AppItem.types';
-import { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import { useARIAButtonProps } from '@fluentui/react-aria';
import { useNavContext_unstable } from '../NavContext';
/**
diff --git a/packages/react-components/react-nav/library/src/components/AppItemStatic/AppItemStatic.test.tsx b/packages/react-components/react-nav/library/src/components/AppItemStatic/AppItemStatic.test.tsx
index 510c3ba419f06..7658831adea38 100644
--- a/packages/react-components/react-nav/library/src/components/AppItemStatic/AppItemStatic.test.tsx
+++ b/packages/react-components/react-nav/library/src/components/AppItemStatic/AppItemStatic.test.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
+import type * as React from 'react';
import { isConformant } from '../../testing/isConformant';
import { AppItemStatic } from './AppItemStatic';
import { appItemStaticClassNames } from './useAppItemStaticStyles.styles';
-import { AppItemStaticProps } from './AppItemStatic.types';
+import type { AppItemStaticProps } from './AppItemStatic.types';
describe('AppItemStatic', () => {
isConformant({
diff --git a/packages/react-components/react-nav/library/src/components/AppItemStatic/AppItemStatic.types.ts b/packages/react-components/react-nav/library/src/components/AppItemStatic/AppItemStatic.types.ts
index de605b7700b71..6a8814c27b6d8 100644
--- a/packages/react-components/react-nav/library/src/components/AppItemStatic/AppItemStatic.types.ts
+++ b/packages/react-components/react-nav/library/src/components/AppItemStatic/AppItemStatic.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { NavDensity } from '../Nav/Nav.types';
+import type { NavDensity } from '../Nav/Nav.types';
export type AppItemStaticSlots = {
/**
diff --git a/packages/react-components/react-nav/library/src/components/AppItemStatic/useAppItemStatic.ts b/packages/react-components/react-nav/library/src/components/AppItemStatic/useAppItemStatic.ts
index 2a0367fe3b25d..9ac05fe156432 100644
--- a/packages/react-components/react-nav/library/src/components/AppItemStatic/useAppItemStatic.ts
+++ b/packages/react-components/react-nav/library/src/components/AppItemStatic/useAppItemStatic.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { AppItemStaticProps, AppItemStaticState } from './AppItemStatic.types';
import { useNavContext_unstable } from '../NavContext';
diff --git a/packages/react-components/react-nav/library/src/components/Hamburger/Hamburger.test.tsx b/packages/react-components/react-nav/library/src/components/Hamburger/Hamburger.test.tsx
index 644bcd445862e..b04adf806c23c 100644
--- a/packages/react-components/react-nav/library/src/components/Hamburger/Hamburger.test.tsx
+++ b/packages/react-components/react-nav/library/src/components/Hamburger/Hamburger.test.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
import { isConformant } from '../../testing/isConformant';
import { Hamburger } from './Hamburger';
-import { HamburgerProps } from './Hamburger.types';
+import type { HamburgerProps } from './Hamburger.types';
describe('Hamburger', () => {
isConformant({
diff --git a/packages/react-components/react-nav/library/src/components/Hamburger/Hamburger.types.ts b/packages/react-components/react-nav/library/src/components/Hamburger/Hamburger.types.ts
index 9f3394db7c74d..04dc98cc24d62 100644
--- a/packages/react-components/react-nav/library/src/components/Hamburger/Hamburger.types.ts
+++ b/packages/react-components/react-nav/library/src/components/Hamburger/Hamburger.types.ts
@@ -1,4 +1,4 @@
-import { ButtonProps, ButtonState } from '@fluentui/react-button';
+import type { ButtonProps, ButtonState } from '@fluentui/react-button';
/**
* Hamburger Props
diff --git a/packages/react-components/react-nav/library/src/components/Hamburger/useHamburgerStyles.styles.ts b/packages/react-components/react-nav/library/src/components/Hamburger/useHamburgerStyles.styles.ts
index 203a6708c9d93..91b24903a8c9e 100644
--- a/packages/react-components/react-nav/library/src/components/Hamburger/useHamburgerStyles.styles.ts
+++ b/packages/react-components/react-nav/library/src/components/Hamburger/useHamburgerStyles.styles.ts
@@ -1,7 +1,8 @@
'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
-import { ButtonSlots, useButtonStyles_unstable } from '@fluentui/react-button';
+import type { ButtonSlots } from '@fluentui/react-button';
+import { useButtonStyles_unstable } from '@fluentui/react-button';
import type { SlotClassNames } from '@fluentui/react-utilities';
import type { HamburgerState } from './Hamburger.types';
import { navItemTokens } from '../sharedNavStyles.styles';
diff --git a/packages/react-components/react-nav/library/src/components/Nav/Nav.types.ts b/packages/react-components/react-nav/library/src/components/Nav/Nav.types.ts
index 1a5a9d8a23551..d274e89fbc45c 100644
--- a/packages/react-components/react-nav/library/src/components/Nav/Nav.types.ts
+++ b/packages/react-components/react-nav/library/src/components/Nav/Nav.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';
import type { NavContextValue, NavItemValue } from '../NavContext.types';
diff --git a/packages/react-components/react-nav/library/src/components/Nav/useNav.ts b/packages/react-components/react-nav/library/src/components/Nav/useNav.ts
index 9a93a28c78e4c..3250aab02abbd 100644
--- a/packages/react-components/react-nav/library/src/components/Nav/useNav.ts
+++ b/packages/react-components/react-nav/library/src/components/Nav/useNav.ts
@@ -1,13 +1,13 @@
'use client';
import * as React from 'react';
+import type { EventHandler } from '@fluentui/react-utilities';
import {
useControllableState,
useEventCallback,
useMergedRefs,
slot,
getIntrinsicElementProps,
- EventHandler,
} from '@fluentui/react-utilities';
import type { NavProps, NavState, OnNavItemSelectData } from './Nav.types';
diff --git a/packages/react-components/react-nav/library/src/components/NavCategory/NavCategory.types.ts b/packages/react-components/react-nav/library/src/components/NavCategory/NavCategory.types.ts
index c89e9a6633d49..7ef088a79b48e 100644
--- a/packages/react-components/react-nav/library/src/components/NavCategory/NavCategory.types.ts
+++ b/packages/react-components/react-nav/library/src/components/NavCategory/NavCategory.types.ts
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { NavItemValue } from '../NavContext.types';
-import { NavCategoryContextValue } from '../NavCategoryContext';
+import type * as React from 'react';
+import type { NavItemValue } from '../NavContext.types';
+import type { NavCategoryContextValue } from '../NavCategoryContext';
/**
* NavCategory Props
diff --git a/packages/react-components/react-nav/library/src/components/NavCategory/renderNavCategory.tsx b/packages/react-components/react-nav/library/src/components/NavCategory/renderNavCategory.tsx
index 996cfb1f58d70..d17cd41aa668f 100644
--- a/packages/react-components/react-nav/library/src/components/NavCategory/renderNavCategory.tsx
+++ b/packages/react-components/react-nav/library/src/components/NavCategory/renderNavCategory.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-utilities';
-import { NavCategoryContextValues, NavCategoryProvider } from '../NavCategoryContext';
+import type { NavCategoryContextValues } from '../NavCategoryContext';
+import { NavCategoryProvider } from '../NavCategoryContext';
import type { NavCategoryState } from './NavCategory.types';
diff --git a/packages/react-components/react-nav/library/src/components/NavCategory/useNavCategory.ts b/packages/react-components/react-nav/library/src/components/NavCategory/useNavCategory.ts
index 3d53794ce9465..ce6d19aba3991 100644
--- a/packages/react-components/react-nav/library/src/components/NavCategory/useNavCategory.ts
+++ b/packages/react-components/react-nav/library/src/components/NavCategory/useNavCategory.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useNavContext_unstable } from '../NavContext';
import type { NavCategoryProps, NavCategoryState } from './NavCategory.types';
diff --git a/packages/react-components/react-nav/library/src/components/NavCategoryContext.ts b/packages/react-components/react-nav/library/src/components/NavCategoryContext.ts
index 085c15a1922a7..28daf118e2a16 100644
--- a/packages/react-components/react-nav/library/src/components/NavCategoryContext.ts
+++ b/packages/react-components/react-nav/library/src/components/NavCategoryContext.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { NavItemValue } from './NavContext.types';
+import type { NavItemValue } from './NavContext.types';
// This context is analogous to AccordionItemContext
diff --git a/packages/react-components/react-nav/library/src/components/NavCategoryItem/useNavCategoryItem.styles.ts b/packages/react-components/react-nav/library/src/components/NavCategoryItem/useNavCategoryItem.styles.ts
index 855e6b2ab8810..9b24bb3db71fd 100644
--- a/packages/react-components/react-nav/library/src/components/NavCategoryItem/useNavCategoryItem.styles.ts
+++ b/packages/react-components/react-nav/library/src/components/NavCategoryItem/useNavCategoryItem.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import { typographyStyles } from '@fluentui/react-theme';
import {
useContentStyles,
diff --git a/packages/react-components/react-nav/library/src/components/NavCategoryItemContext.ts b/packages/react-components/react-nav/library/src/components/NavCategoryItemContext.ts
index 95787a4c87b97..dbf30daa9d6f8 100644
--- a/packages/react-components/react-nav/library/src/components/NavCategoryItemContext.ts
+++ b/packages/react-components/react-nav/library/src/components/NavCategoryItemContext.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { NavItemValue } from './NavContext.types';
+import type { NavItemValue } from './NavContext.types';
// This context is analogous to AccordionHeaderContext
diff --git a/packages/react-components/react-nav/library/src/components/NavContext.ts b/packages/react-components/react-nav/library/src/components/NavContext.ts
index 39184edb620c5..d9452f647e8b4 100644
--- a/packages/react-components/react-nav/library/src/components/NavContext.ts
+++ b/packages/react-components/react-nav/library/src/components/NavContext.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { NavContextValue } from './NavContext.types';
+import type { NavContextValue } from './NavContext.types';
const navContextDefaultValue: NavContextValue = {
selectedValue: undefined,
diff --git a/packages/react-components/react-nav/library/src/components/NavContext.types.ts b/packages/react-components/react-nav/library/src/components/NavContext.types.ts
index 4350a1a20e020..93639b9ca7b91 100644
--- a/packages/react-components/react-nav/library/src/components/NavContext.types.ts
+++ b/packages/react-components/react-nav/library/src/components/NavContext.types.ts
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { EventHandler } from '@fluentui/react-utilities';
+import type * as React from 'react';
+import type { EventHandler } from '@fluentui/react-utilities';
import type { NavProps, OnNavItemSelectData } from './Nav/Nav.types';
diff --git a/packages/react-components/react-nav/library/src/components/NavDivider/useNavDivider.ts b/packages/react-components/react-nav/library/src/components/NavDivider/useNavDivider.ts
index 41c55a7482f94..59690a28456bf 100644
--- a/packages/react-components/react-nav/library/src/components/NavDivider/useNavDivider.ts
+++ b/packages/react-components/react-nav/library/src/components/NavDivider/useNavDivider.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import type { NavDividerProps, NavDividerState } from './NavDivider.types';
import { useDivider_unstable } from '@fluentui/react-divider';
diff --git a/packages/react-components/react-nav/library/src/components/NavDrawer/NavDrawer.tsx b/packages/react-components/react-nav/library/src/components/NavDrawer/NavDrawer.tsx
index a6a566862d53b..3b8d082dcc102 100644
--- a/packages/react-components/react-nav/library/src/components/NavDrawer/NavDrawer.tsx
+++ b/packages/react-components/react-nav/library/src/components/NavDrawer/NavDrawer.tsx
@@ -8,7 +8,7 @@ import { useNavDrawer_unstable } from './useNavDrawer';
import { renderNavDrawer_unstable } from './renderNavDrawer';
import { useNavDrawerStyles_unstable } from './useNavDrawerStyles.styles';
import { useNavContextValues_unstable } from '../useNavContextValues';
-import { NavState } from '../Nav/Nav.types';
+import type { NavState } from '../Nav/Nav.types';
import type { NavDrawerProps } from './NavDrawer.types';
/**
diff --git a/packages/react-components/react-nav/library/src/components/NavDrawer/NavDrawer.types.ts b/packages/react-components/react-nav/library/src/components/NavDrawer/NavDrawer.types.ts
index fd6092408c6e5..fde743ebc5487 100644
--- a/packages/react-components/react-nav/library/src/components/NavDrawer/NavDrawer.types.ts
+++ b/packages/react-components/react-nav/library/src/components/NavDrawer/NavDrawer.types.ts
@@ -1,7 +1,7 @@
-import { DrawerProps, DrawerSlots, DrawerState } from '@fluentui/react-drawer';
-import { ComponentProps } from '@fluentui/react-utilities';
-import { NavProps } from '../Nav/Nav.types';
-import { NavContextValue } from '../NavContext.types';
+import type { DrawerProps, DrawerSlots, DrawerState } from '@fluentui/react-drawer';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { NavProps } from '../Nav/Nav.types';
+import type { NavContextValue } from '../NavContext.types';
/**
* NavDrawer slots
diff --git a/packages/react-components/react-nav/library/src/components/NavDrawer/useNavDrawer.ts b/packages/react-components/react-nav/library/src/components/NavDrawer/useNavDrawer.ts
index af8db0e9c8853..7a9985b915812 100644
--- a/packages/react-components/react-nav/library/src/components/NavDrawer/useNavDrawer.ts
+++ b/packages/react-components/react-nav/library/src/components/NavDrawer/useNavDrawer.ts
@@ -1,8 +1,10 @@
'use client';
-import * as React from 'react';
-import { Drawer, DrawerProps } from '@fluentui/react-drawer';
-import { RefAttributes, slot } from '@fluentui/react-utilities';
+import type * as React from 'react';
+import type { DrawerProps } from '@fluentui/react-drawer';
+import { Drawer } from '@fluentui/react-drawer';
+import type { RefAttributes } from '@fluentui/react-utilities';
+import { slot } from '@fluentui/react-utilities';
import { useNav_unstable } from '../Nav/useNav';
import type { NavDrawerProps, NavDrawerState } from './NavDrawer.types';
diff --git a/packages/react-components/react-nav/library/src/components/NavDrawerBody/useNavDrawerBody.ts b/packages/react-components/react-nav/library/src/components/NavDrawerBody/useNavDrawerBody.ts
index 9ac8934a9ad78..93c5128900631 100644
--- a/packages/react-components/react-nav/library/src/components/NavDrawerBody/useNavDrawerBody.ts
+++ b/packages/react-components/react-nav/library/src/components/NavDrawerBody/useNavDrawerBody.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
import { useDrawerBody_unstable } from '@fluentui/react-drawer';
diff --git a/packages/react-components/react-nav/library/src/components/NavDrawerFooter/useNavDrawerFooter.ts b/packages/react-components/react-nav/library/src/components/NavDrawerFooter/useNavDrawerFooter.ts
index 1e8e3e6b2ce82..5ea38ae8a92a0 100644
--- a/packages/react-components/react-nav/library/src/components/NavDrawerFooter/useNavDrawerFooter.ts
+++ b/packages/react-components/react-nav/library/src/components/NavDrawerFooter/useNavDrawerFooter.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useDrawerFooter_unstable } from '@fluentui/react-drawer';
import type { NavDrawerFooterProps, NavDrawerFooterState } from './NavDrawerFooter.types';
diff --git a/packages/react-components/react-nav/library/src/components/NavDrawerHeader/useNavDrawerHeader.ts b/packages/react-components/react-nav/library/src/components/NavDrawerHeader/useNavDrawerHeader.ts
index 7a7991d9c85c7..3302b2e912075 100644
--- a/packages/react-components/react-nav/library/src/components/NavDrawerHeader/useNavDrawerHeader.ts
+++ b/packages/react-components/react-nav/library/src/components/NavDrawerHeader/useNavDrawerHeader.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useDrawerHeader_unstable } from '@fluentui/react-drawer';
import type { NavDrawerHeaderProps, NavDrawerHeaderState } from './NavDrawerHeader.types';
diff --git a/packages/react-components/react-nav/library/src/components/NavItem/NavItem.test.tsx b/packages/react-components/react-nav/library/src/components/NavItem/NavItem.test.tsx
index 6ca1e50fc18e1..5e6ea05ef3e20 100644
--- a/packages/react-components/react-nav/library/src/components/NavItem/NavItem.test.tsx
+++ b/packages/react-components/react-nav/library/src/components/NavItem/NavItem.test.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { isConformant } from '../../testing/isConformant';
import { NavItem } from './NavItem';
import { navItemClassNames } from './useNavItemStyles.styles';
diff --git a/packages/react-components/react-nav/library/src/components/NavItem/NavItem.types.ts b/packages/react-components/react-nav/library/src/components/NavItem/NavItem.types.ts
index 97e39d7fe62a1..5e74d38fe6f1e 100644
--- a/packages/react-components/react-nav/library/src/components/NavItem/NavItem.types.ts
+++ b/packages/react-components/react-nav/library/src/components/NavItem/NavItem.types.ts
@@ -1,5 +1,5 @@
-import { NavItemValue } from '../NavContext.types';
-import { NavDensity } from '../Nav/Nav.types';
+import type { NavItemValue } from '../NavContext.types';
+import type { NavDensity } from '../Nav/Nav.types';
import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-nav/library/src/components/NavSectionHeader/NavSectionHeader.test.tsx b/packages/react-components/react-nav/library/src/components/NavSectionHeader/NavSectionHeader.test.tsx
index f8cad46c0df1f..b11f3a59fc2d3 100644
--- a/packages/react-components/react-nav/library/src/components/NavSectionHeader/NavSectionHeader.test.tsx
+++ b/packages/react-components/react-nav/library/src/components/NavSectionHeader/NavSectionHeader.test.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
import { isConformant } from '../../testing/isConformant';
import { NavSectionHeader } from './NavSectionHeader';
-import { NavSectionHeaderProps } from './NavSectionHeader.types';
+import type { NavSectionHeaderProps } from './NavSectionHeader.types';
describe('NavSectionHeader', () => {
isConformant({
diff --git a/packages/react-components/react-nav/library/src/components/NavSectionHeader/useNavSectionHeader.ts b/packages/react-components/react-nav/library/src/components/NavSectionHeader/useNavSectionHeader.ts
index c2969f858115a..1acdc0c894921 100644
--- a/packages/react-components/react-nav/library/src/components/NavSectionHeader/useNavSectionHeader.ts
+++ b/packages/react-components/react-nav/library/src/components/NavSectionHeader/useNavSectionHeader.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { NavSectionHeaderProps, NavSectionHeaderState } from './NavSectionHeader.types';
diff --git a/packages/react-components/react-nav/library/src/components/NavSubItem/NavSubItem.test.tsx b/packages/react-components/react-nav/library/src/components/NavSubItem/NavSubItem.test.tsx
index f2cd50148f9bf..9455510e6d2eb 100644
--- a/packages/react-components/react-nav/library/src/components/NavSubItem/NavSubItem.test.tsx
+++ b/packages/react-components/react-nav/library/src/components/NavSubItem/NavSubItem.test.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { isConformant } from '../../testing/isConformant';
import { NavSubItem } from './NavSubItem';
import type { NavSubItemProps } from './NavSubItem.types';
diff --git a/packages/react-components/react-nav/library/src/components/NavSubItem/NavSubItem.types.ts b/packages/react-components/react-nav/library/src/components/NavSubItem/NavSubItem.types.ts
index 519bb8222227a..41348174aa99f 100644
--- a/packages/react-components/react-nav/library/src/components/NavSubItem/NavSubItem.types.ts
+++ b/packages/react-components/react-nav/library/src/components/NavSubItem/NavSubItem.types.ts
@@ -1,8 +1,8 @@
-import { NavItemValue } from '../NavContext.types';
+import type { NavItemValue } from '../NavContext.types';
import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { NavDensity } from '../Nav/Nav.types';
+import type { NavDensity } from '../Nav/Nav.types';
export type NavSubItemSlots = {
root: NonNullable>>;
diff --git a/packages/react-components/react-nav/library/src/components/NavSubItemContext.ts b/packages/react-components/react-nav/library/src/components/NavSubItemContext.ts
index 996122bf2dc42..e258f56ca7427 100644
--- a/packages/react-components/react-nav/library/src/components/NavSubItemContext.ts
+++ b/packages/react-components/react-nav/library/src/components/NavSubItemContext.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { NavItemValue } from './NavContext.types';
+import type { NavItemValue } from './NavContext.types';
// This context is analogous to AccordionItemContext
diff --git a/packages/react-components/react-nav/library/src/components/NavSubItemGroup/NavSubItemGroup.test.tsx b/packages/react-components/react-nav/library/src/components/NavSubItemGroup/NavSubItemGroup.test.tsx
index 3448a06d90c68..2df9e6404b3a5 100644
--- a/packages/react-components/react-nav/library/src/components/NavSubItemGroup/NavSubItemGroup.test.tsx
+++ b/packages/react-components/react-nav/library/src/components/NavSubItemGroup/NavSubItemGroup.test.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
import { isConformant } from '../../testing/isConformant';
import { NavSubItemGroup } from './NavSubItemGroup';
-import { NavCategoryContextValue, NavCategoryProvider } from '../NavCategoryContext';
+import type { NavCategoryContextValue } from '../NavCategoryContext';
+import { NavCategoryProvider } from '../NavCategoryContext';
export function mockNavCategoryContextValue(partialValue?: Partial): NavCategoryContextValue {
return {
diff --git a/packages/react-components/react-nav/library/src/components/NavSubItemGroup/NavSubItemGroup.types.ts b/packages/react-components/react-nav/library/src/components/NavSubItemGroup/NavSubItemGroup.types.ts
index e264468d47e6d..ecb887367c1f1 100644
--- a/packages/react-components/react-nav/library/src/components/NavSubItemGroup/NavSubItemGroup.types.ts
+++ b/packages/react-components/react-nav/library/src/components/NavSubItemGroup/NavSubItemGroup.types.ts
@@ -1,6 +1,6 @@
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { NavDensity } from '../Nav/Nav.types';
+import type { NavDensity } from '../Nav/Nav.types';
/**
* Context value for NavSubItemGroup
diff --git a/packages/react-components/react-nav/library/src/components/NavSubItemGroup/useNavSubItemGroup.ts b/packages/react-components/react-nav/library/src/components/NavSubItemGroup/useNavSubItemGroup.ts
index c6c4bf5e1db81..ed4ce64c49260 100644
--- a/packages/react-components/react-nav/library/src/components/NavSubItemGroup/useNavSubItemGroup.ts
+++ b/packages/react-components/react-nav/library/src/components/NavSubItemGroup/useNavSubItemGroup.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import { presenceMotionSlot } from '@fluentui/react-motion';
import { Collapse } from '@fluentui/react-motion-components-preview';
diff --git a/packages/react-components/react-nav/library/src/components/SplitNavItem/SplitNavItem.types.ts b/packages/react-components/react-nav/library/src/components/SplitNavItem/SplitNavItem.types.ts
index 148971b40f943..396489026f55a 100644
--- a/packages/react-components/react-nav/library/src/components/SplitNavItem/SplitNavItem.types.ts
+++ b/packages/react-components/react-nav/library/src/components/SplitNavItem/SplitNavItem.types.ts
@@ -1,9 +1,9 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { NavItemProps } from '../NavItem/NavItem.types';
-import { ButtonProps, MenuButtonProps, ToggleButtonProps } from '@fluentui/react-button';
+import type { NavItemProps } from '../NavItem/NavItem.types';
+import type { ButtonProps, MenuButtonProps, ToggleButtonProps } from '@fluentui/react-button';
import type { TooltipProps } from '@fluentui/react-tooltip';
-import { NavDensity } from '../Nav/Nav.types';
-import { NavSubItemProps } from '../NavSubItem/NavSubItem.types';
+import type { NavDensity } from '../Nav/Nav.types';
+import type { NavSubItemProps } from '../NavSubItem/NavSubItem.types';
export type SplitNavItemSlots = {
/**
diff --git a/packages/react-components/react-nav/library/src/components/useNavCategoryContextValues_unstable.ts b/packages/react-components/react-nav/library/src/components/useNavCategoryContextValues_unstable.ts
index 9f9b2c186dbf3..c600fde7c82e3 100644
--- a/packages/react-components/react-nav/library/src/components/useNavCategoryContextValues_unstable.ts
+++ b/packages/react-components/react-nav/library/src/components/useNavCategoryContextValues_unstable.ts
@@ -1,8 +1,8 @@
'use client';
import * as React from 'react';
-import { NavCategoryState } from '../NavCategory';
-import { NavCategoryContextValue, NavCategoryContextValues } from './NavCategoryContext';
+import type { NavCategoryState } from '../NavCategory';
+import type { NavCategoryContextValue, NavCategoryContextValues } from './NavCategoryContext';
export function useNavCategoryContextValues_unstable(state: NavCategoryState): NavCategoryContextValues {
const { open, value } = state;
diff --git a/packages/react-components/react-nav/library/src/components/useNavCategoryItemContextValues_unstable.ts b/packages/react-components/react-nav/library/src/components/useNavCategoryItemContextValues_unstable.ts
index 650cca7911bd7..b0e989e80c669 100644
--- a/packages/react-components/react-nav/library/src/components/useNavCategoryItemContextValues_unstable.ts
+++ b/packages/react-components/react-nav/library/src/components/useNavCategoryItemContextValues_unstable.ts
@@ -1,8 +1,8 @@
'use client';
import * as React from 'react';
-import { NavCategoryItemContextValue } from './NavCategoryItemContext';
-import { NavCategoryItemContextValues, NavCategoryItemState } from './NavCategoryItem/NavCategoryItem.types';
+import type { NavCategoryItemContextValue } from './NavCategoryItemContext';
+import type { NavCategoryItemContextValues, NavCategoryItemState } from './NavCategoryItem/NavCategoryItem.types';
export function useNavCategoryItemContextValues_unstable(state: NavCategoryItemState): NavCategoryItemContextValues {
const { open, value } = state;
diff --git a/packages/react-components/react-nav/library/src/components/useNavContextValues.tsx b/packages/react-components/react-nav/library/src/components/useNavContextValues.tsx
index 876d3d955c280..9b35fe7fbeb7c 100644
--- a/packages/react-components/react-nav/library/src/components/useNavContextValues.tsx
+++ b/packages/react-components/react-nav/library/src/components/useNavContextValues.tsx
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { NavContextValue, NavContextValues, NavState } from '../Nav';
+import type { NavContextValue, NavContextValues, NavState } from '../Nav';
export function useNavContextValues_unstable(state: NavState): NavContextValues {
const {
diff --git a/packages/react-components/react-nav/stories/src/Nav/Basic.stories.tsx b/packages/react-components/react-nav/stories/src/Nav/Basic.stories.tsx
index 5fb4f8dadcfae..15d80cabf75d6 100644
--- a/packages/react-components/react-nav/stories/src/Nav/Basic.stories.tsx
+++ b/packages/react-components/react-nav/stories/src/Nav/Basic.stories.tsx
@@ -14,7 +14,7 @@ import {
NavSubItem,
NavSubItemGroup,
} from '@fluentui/react-components';
-import { DrawerProps } from '@fluentui/react-drawer';
+import type { DrawerProps } from '@fluentui/react-drawer';
import {
Label,
Radio,
diff --git a/packages/react-components/react-nav/stories/src/Nav/Controlled.stories.tsx b/packages/react-components/react-nav/stories/src/Nav/Controlled.stories.tsx
index 65931d816c5e0..e7008c5d35d1c 100644
--- a/packages/react-components/react-nav/stories/src/Nav/Controlled.stories.tsx
+++ b/packages/react-components/react-nav/stories/src/Nav/Controlled.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, NavItemValue, OnNavItemSelectData } from '@fluentui/react-components';
import {
AppItem,
Hamburger,
@@ -10,11 +10,9 @@ import {
NavDrawerBody,
NavDrawerHeader,
NavItem,
- NavItemValue,
NavSectionHeader,
NavSubItem,
NavSubItemGroup,
- OnNavItemSelectData,
} from '@fluentui/react-components';
import { Button, Label, Switch, Tooltip, makeStyles, tokens, useId } from '@fluentui/react-components';
import {
diff --git a/packages/react-components/react-nav/stories/src/Nav/CustomMotion.stories.tsx b/packages/react-components/react-nav/stories/src/Nav/CustomMotion.stories.tsx
index 7539203fcee90..e848296d31f0b 100644
--- a/packages/react-components/react-nav/stories/src/Nav/CustomMotion.stories.tsx
+++ b/packages/react-components/react-nav/stories/src/Nav/CustomMotion.stories.tsx
@@ -13,7 +13,7 @@ import {
NavSubItem,
NavSubItemGroup,
} from '@fluentui/react-components';
-import { DrawerProps } from '@fluentui/react-drawer';
+import type { DrawerProps } from '@fluentui/react-drawer';
import {
Label,
Radio,
diff --git a/packages/react-components/react-nav/stories/src/Nav/SplitNavItems.stories.tsx b/packages/react-components/react-nav/stories/src/Nav/SplitNavItems.stories.tsx
index 18bb826af9657..01373eebdf951 100644
--- a/packages/react-components/react-nav/stories/src/Nav/SplitNavItems.stories.tsx
+++ b/packages/react-components/react-nav/stories/src/Nav/SplitNavItems.stories.tsx
@@ -1,5 +1,14 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type {
+ JSXElement,
+ NavDensity,
+ SplitNavItemProps,
+ NavItemProps,
+ NavCategoryItemProps,
+ NavCategoryProps,
+ MenuButtonProps,
+ TooltipProps,
+} from '@fluentui/react-components';
import {
NavCategory,
NavCategoryItem,
@@ -7,21 +16,15 @@ import {
NavDrawer,
NavDrawerBody,
NavDrawerHeader,
- NavDensity,
AppItem,
AppItemStatic,
SplitNavItem,
- SplitNavItemProps,
- NavItemProps,
- NavCategoryItemProps,
- NavCategoryProps,
NavSubItemGroup,
NavDivider,
} from '@fluentui/react-components';
import {
Label,
Menu,
- MenuButtonProps,
MenuItem,
MenuList,
MenuPopover,
@@ -30,7 +33,6 @@ import {
RadioGroup,
Switch,
Tooltip,
- TooltipProps,
makeStyles,
tokens,
useId,
diff --git a/packages/react-components/react-nav/stories/src/Nav/VariableDensityItems.stories.tsx b/packages/react-components/react-nav/stories/src/Nav/VariableDensityItems.stories.tsx
index 74d406206edbc..f3f97096215cc 100644
--- a/packages/react-components/react-nav/stories/src/Nav/VariableDensityItems.stories.tsx
+++ b/packages/react-components/react-nav/stories/src/Nav/VariableDensityItems.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, NavDrawerProps, NavDensity } from '@fluentui/react-components';
import {
Hamburger,
NavCategory,
@@ -7,12 +7,10 @@ import {
NavDrawer,
NavDrawerBody,
NavDrawerHeader,
- NavDrawerProps,
NavItem,
NavSectionHeader,
NavSubItem,
NavSubItemGroup,
- NavDensity,
NavDivider,
AppItem,
AppItemStatic,
diff --git a/packages/react-components/react-overflow/library/etc/react-overflow.api.md b/packages/react-components/react-overflow/library/etc/react-overflow.api.md
index 6bfb063f295da..6ec6afd8de8f6 100644
--- a/packages/react-components/react-overflow/library/etc/react-overflow.api.md
+++ b/packages/react-components/react-overflow/library/etc/react-overflow.api.md
@@ -4,7 +4,7 @@
```ts
-import { ContextSelector } from '@fluentui/react-context-selector';
+import type { ContextSelector } from '@fluentui/react-context-selector';
import type { ObserveOptions } from '@fluentui/priority-overflow';
import type { OnUpdateOverflow } from '@fluentui/priority-overflow';
import type { OverflowDividerEntry } from '@fluentui/priority-overflow';
diff --git a/packages/react-components/react-overflow/library/src/Overflow.cy.tsx b/packages/react-components/react-overflow/library/src/Overflow.cy.tsx
index 20f01d85dd9fb..56416ffabd1d6 100644
--- a/packages/react-components/react-overflow/library/src/Overflow.cy.tsx
+++ b/packages/react-components/react-overflow/library/src/Overflow.cy.tsx
@@ -12,8 +12,8 @@ import {
type OnOverflowChangeData,
} from '@fluentui/react-overflow';
import { Portal } from '@fluentui/react-portal';
-import { OverflowAxis } from '@fluentui/priority-overflow';
-import { DistributiveOmit } from '@fluentui/react-utilities';
+import type { OverflowAxis } from '@fluentui/priority-overflow';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
const selectors = {
container: 'data-test-container',
diff --git a/packages/react-components/react-overflow/library/src/components/OverflowDivider/OverflowDivider.tsx b/packages/react-components/react-overflow/library/src/components/OverflowDivider/OverflowDivider.tsx
index 91d9f472a203d..5b648aa121d49 100644
--- a/packages/react-components/react-overflow/library/src/components/OverflowDivider/OverflowDivider.tsx
+++ b/packages/react-components/react-overflow/library/src/components/OverflowDivider/OverflowDivider.tsx
@@ -3,7 +3,7 @@
import * as React from 'react';
import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';
import { useOverflowDivider } from '../../useOverflowDivider';
-import { OverflowDividerProps } from './OverflowDivider.types';
+import type { OverflowDividerProps } from './OverflowDivider.types';
/**
* Attaches overflow item behavior to its child registered with the OverflowContext.
diff --git a/packages/react-components/react-overflow/library/src/components/OverflowDivider/OverflowDivider.types.ts b/packages/react-components/react-overflow/library/src/components/OverflowDivider/OverflowDivider.types.ts
index c7aecfdfc4985..2204a99539cfd 100644
--- a/packages/react-components/react-overflow/library/src/components/OverflowDivider/OverflowDivider.types.ts
+++ b/packages/react-components/react-overflow/library/src/components/OverflowDivider/OverflowDivider.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
/**
* OverflowDividerProps
diff --git a/packages/react-components/react-overflow/library/src/components/OverflowItem/OverflowItem.tsx b/packages/react-components/react-overflow/library/src/components/OverflowItem/OverflowItem.tsx
index 20397d57358db..dba22871d0ca0 100644
--- a/packages/react-components/react-overflow/library/src/components/OverflowItem/OverflowItem.tsx
+++ b/packages/react-components/react-overflow/library/src/components/OverflowItem/OverflowItem.tsx
@@ -9,7 +9,7 @@ import {
useMergedRefs,
} from '@fluentui/react-utilities';
import { useOverflowItem } from '../../useOverflowItem';
-import { OverflowItemProps } from './OverflowItem.types';
+import type { OverflowItemProps } from './OverflowItem.types';
/**
* Attaches overflow item behavior to its child registered with the OverflowContext.
diff --git a/packages/react-components/react-overflow/library/src/components/OverflowItem/OverflowItem.types.ts b/packages/react-components/react-overflow/library/src/components/OverflowItem/OverflowItem.types.ts
index 0771937289a5f..652261167757e 100644
--- a/packages/react-components/react-overflow/library/src/components/OverflowItem/OverflowItem.types.ts
+++ b/packages/react-components/react-overflow/library/src/components/OverflowItem/OverflowItem.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
/**
* OverflowItemProps
diff --git a/packages/react-components/react-overflow/library/src/overflowContext.ts b/packages/react-components/react-overflow/library/src/overflowContext.ts
index 39cc527329ae7..d25d4f2b8edd8 100644
--- a/packages/react-components/react-overflow/library/src/overflowContext.ts
+++ b/packages/react-components/react-overflow/library/src/overflowContext.ts
@@ -1,7 +1,8 @@
'use client';
import type { OverflowGroupState, OverflowItemEntry, OverflowDividerEntry } from '@fluentui/priority-overflow';
-import { ContextSelector, createContext, useContextSelector, Context } from '@fluentui/react-context-selector';
+import type { ContextSelector, Context } from '@fluentui/react-context-selector';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
/**
* @internal
diff --git a/packages/react-components/react-overflow/library/src/types.ts b/packages/react-components/react-overflow/library/src/types.ts
index df45f3b406bdb..22a2bccd3292f 100644
--- a/packages/react-components/react-overflow/library/src/types.ts
+++ b/packages/react-components/react-overflow/library/src/types.ts
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { OverflowContextValue } from './overflowContext';
+import type * as React from 'react';
+import type { OverflowContextValue } from './overflowContext';
/**
* @internal
diff --git a/packages/react-components/react-overflow/library/src/useIsOverflowGroupVisible.ts b/packages/react-components/react-overflow/library/src/useIsOverflowGroupVisible.ts
index 4d22837a71072..a389d36fc4622 100644
--- a/packages/react-components/react-overflow/library/src/useIsOverflowGroupVisible.ts
+++ b/packages/react-components/react-overflow/library/src/useIsOverflowGroupVisible.ts
@@ -1,6 +1,6 @@
'use client';
-import { OverflowGroupState } from '@fluentui/priority-overflow';
+import type { OverflowGroupState } from '@fluentui/priority-overflow';
import { useOverflowContext } from './overflowContext';
/**
diff --git a/packages/react-components/react-overflow/library/src/useOverflowContainer.test.ts b/packages/react-components/react-overflow/library/src/useOverflowContainer.test.ts
index eb2a947c289a2..fdb02fb571166 100644
--- a/packages/react-components/react-overflow/library/src/useOverflowContainer.test.ts
+++ b/packages/react-components/react-overflow/library/src/useOverflowContainer.test.ts
@@ -1,5 +1,6 @@
-import * as React from 'react';
-import { createOverflowManager, OverflowAxis, OverflowManager } from '@fluentui/priority-overflow';
+import type * as React from 'react';
+import type { OverflowAxis, OverflowManager } from '@fluentui/priority-overflow';
+import { createOverflowManager } from '@fluentui/priority-overflow';
import { useOverflowContainer } from './useOverflowContainer';
import { renderHook } from '@testing-library/react-hooks';
diff --git a/packages/react-components/react-overflow/library/src/useOverflowContainer.ts b/packages/react-components/react-overflow/library/src/useOverflowContainer.ts
index fdec10edf8406..071f51d2e7a4c 100644
--- a/packages/react-components/react-overflow/library/src/useOverflowContainer.ts
+++ b/packages/react-components/react-overflow/library/src/useOverflowContainer.ts
@@ -15,7 +15,7 @@ import type {
ObserveOptions,
} from '@fluentui/priority-overflow';
import { canUseDOM, useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
-import { UseOverflowContainerReturn } from './types';
+import type { UseOverflowContainerReturn } from './types';
import { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';
const noop = () => null;
diff --git a/packages/react-components/react-overflow/library/src/useOverflowItem.test.tsx b/packages/react-components/react-overflow/library/src/useOverflowItem.test.tsx
index 2777d8cc317db..435ecdd1c4eaa 100644
--- a/packages/react-components/react-overflow/library/src/useOverflowItem.test.tsx
+++ b/packages/react-components/react-overflow/library/src/useOverflowItem.test.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import { useOverflowItem } from './useOverflowItem';
-import { OverflowContext, OverflowContextValue } from './overflowContext';
+import type { OverflowContextValue } from './overflowContext';
+import { OverflowContext } from './overflowContext';
import { renderHook } from '@testing-library/react-hooks';
const mockContextValue = (options: Partial = {}) =>
diff --git a/packages/react-components/react-overflow/library/src/useOverflowVisibility.test.tsx b/packages/react-components/react-overflow/library/src/useOverflowVisibility.test.tsx
index b0a0c219da0e9..508d0d1e8f338 100644
--- a/packages/react-components/react-overflow/library/src/useOverflowVisibility.test.tsx
+++ b/packages/react-components/react-overflow/library/src/useOverflowVisibility.test.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
import { renderHook } from '@testing-library/react-hooks';
import { useOverflowVisibility } from './useOverflowVisibility';
-import { OverflowContext, OverflowContextValue } from './overflowContext';
+import type { OverflowContextValue } from './overflowContext';
+import { OverflowContext } from './overflowContext';
describe('useOverflowVisibility', () => {
it('should return item and group visiblity', () => {
diff --git a/packages/react-components/react-overflow/stories/src/Overflow/CustomComponent.stories.tsx b/packages/react-components/react-overflow/stories/src/Overflow/CustomComponent.stories.tsx
index 6913510ee5129..9d4d46dfc7670 100644
--- a/packages/react-components/react-overflow/stories/src/Overflow/CustomComponent.stories.tsx
+++ b/packages/react-components/react-overflow/stories/src/Overflow/CustomComponent.stories.tsx
@@ -1,6 +1,5 @@
import {
Button,
- ForwardRefComponent,
makeStyles,
mergeClasses,
Overflow,
@@ -9,7 +8,7 @@ import {
useIsOverflowItemVisible,
} from '@fluentui/react-components';
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, ForwardRefComponent } from '@fluentui/react-components';
const useStyles = makeStyles({
container: {
diff --git a/packages/react-components/react-overflow/stories/src/Overflow/Default.stories.tsx b/packages/react-components/react-overflow/stories/src/Overflow/Default.stories.tsx
index a29293037cffb..57850ee872137 100644
--- a/packages/react-components/react-overflow/stories/src/Overflow/Default.stories.tsx
+++ b/packages/react-components/react-overflow/stories/src/Overflow/Default.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, OverflowItemProps } from '@fluentui/react-components';
import {
makeStyles,
Button,
@@ -13,7 +13,6 @@ import {
mergeClasses,
Overflow,
OverflowItem,
- OverflowItemProps,
useIsOverflowItemVisible,
useOverflowMenu,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-overflow/stories/src/Overflow/ListenToChanges.stories.tsx b/packages/react-components/react-overflow/stories/src/Overflow/ListenToChanges.stories.tsx
index 3733690d94872..e652446e75583 100644
--- a/packages/react-components/react-overflow/stories/src/Overflow/ListenToChanges.stories.tsx
+++ b/packages/react-components/react-overflow/stories/src/Overflow/ListenToChanges.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, OverflowItemProps } from '@fluentui/react-components';
import {
makeStyles,
Button,
@@ -13,7 +13,6 @@ import {
mergeClasses,
Overflow,
OverflowItem,
- OverflowItemProps,
useIsOverflowItemVisible,
useOverflowMenu,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-overflow/stories/src/Overflow/MinimumVisible.stories.tsx b/packages/react-components/react-overflow/stories/src/Overflow/MinimumVisible.stories.tsx
index b56ddd13b4d2d..700ccb0721f4e 100644
--- a/packages/react-components/react-overflow/stories/src/Overflow/MinimumVisible.stories.tsx
+++ b/packages/react-components/react-overflow/stories/src/Overflow/MinimumVisible.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, OverflowItemProps } from '@fluentui/react-components';
import {
makeStyles,
Button,
@@ -13,7 +13,6 @@ import {
mergeClasses,
Overflow,
OverflowItem,
- OverflowItemProps,
useIsOverflowItemVisible,
useOverflowMenu,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-overflow/stories/src/Overflow/OverflowByPriority.stories.tsx b/packages/react-components/react-overflow/stories/src/Overflow/OverflowByPriority.stories.tsx
index 61e60259554d3..c396b63d77b0c 100644
--- a/packages/react-components/react-overflow/stories/src/Overflow/OverflowByPriority.stories.tsx
+++ b/packages/react-components/react-overflow/stories/src/Overflow/OverflowByPriority.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, OverflowItemProps } from '@fluentui/react-components';
import {
makeStyles,
Button,
@@ -13,7 +13,6 @@ import {
mergeClasses,
Overflow,
OverflowItem,
- OverflowItemProps,
useIsOverflowItemVisible,
useOverflowMenu,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-overflow/stories/src/Overflow/Pinned.stories.tsx b/packages/react-components/react-overflow/stories/src/Overflow/Pinned.stories.tsx
index 231d5d2ec2621..d71b849f51137 100644
--- a/packages/react-components/react-overflow/stories/src/Overflow/Pinned.stories.tsx
+++ b/packages/react-components/react-overflow/stories/src/Overflow/Pinned.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, OverflowItemProps } from '@fluentui/react-components';
import {
makeStyles,
Button,
@@ -13,7 +13,6 @@ import {
tokens,
Overflow,
OverflowItem,
- OverflowItemProps,
useIsOverflowItemVisible,
useOverflowMenu,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-overflow/stories/src/Overflow/ReverseDomOrder.stories.tsx b/packages/react-components/react-overflow/stories/src/Overflow/ReverseDomOrder.stories.tsx
index 3be86915a514a..c1a14984703f0 100644
--- a/packages/react-components/react-overflow/stories/src/Overflow/ReverseDomOrder.stories.tsx
+++ b/packages/react-components/react-overflow/stories/src/Overflow/ReverseDomOrder.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, OverflowItemProps } from '@fluentui/react-components';
import {
makeStyles,
Button,
@@ -13,7 +13,6 @@ import {
mergeClasses,
Overflow,
OverflowItem,
- OverflowItemProps,
useIsOverflowItemVisible,
useOverflowMenu,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-overflow/stories/src/Overflow/Vertical.stories.tsx b/packages/react-components/react-overflow/stories/src/Overflow/Vertical.stories.tsx
index c4254c1f6381e..efd36db8c932a 100644
--- a/packages/react-components/react-overflow/stories/src/Overflow/Vertical.stories.tsx
+++ b/packages/react-components/react-overflow/stories/src/Overflow/Vertical.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, OverflowItemProps } from '@fluentui/react-components';
import {
makeStyles,
Button,
@@ -13,7 +13,6 @@ import {
mergeClasses,
Overflow,
OverflowItem,
- OverflowItemProps,
useIsOverflowItemVisible,
useOverflowMenu,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-overflow/stories/src/Overflow/Wrapped.stories.tsx b/packages/react-components/react-overflow/stories/src/Overflow/Wrapped.stories.tsx
index e811796ebc63d..d25ded8a34fc7 100644
--- a/packages/react-components/react-overflow/stories/src/Overflow/Wrapped.stories.tsx
+++ b/packages/react-components/react-overflow/stories/src/Overflow/Wrapped.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, OverflowItemProps } from '@fluentui/react-components';
import {
makeStyles,
Button,
@@ -12,7 +12,6 @@ import {
tokens,
Overflow,
OverflowItem,
- OverflowItemProps,
useIsOverflowItemVisible,
useOverflowMenu,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-persona/library/etc/react-persona.api.md b/packages/react-components/react-persona/library/etc/react-persona.api.md
index c8162f8d6770a..ce96213e08a7c 100644
--- a/packages/react-components/react-persona/library/etc/react-persona.api.md
+++ b/packages/react-components/react-persona/library/etc/react-persona.api.md
@@ -4,13 +4,13 @@
```ts
-import { Avatar } from '@fluentui/react-avatar';
+import type { Avatar } from '@fluentui/react-avatar';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { PresenceBadge } from '@fluentui/react-badge';
-import * as React_2 from 'react';
+import type { PresenceBadge } from '@fluentui/react-badge';
+import type * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-persona/library/src/components/Persona/Persona.types.ts b/packages/react-components/react-persona/library/src/components/Persona/Persona.types.ts
index b1fdb9b0f8959..b5829861204d5 100644
--- a/packages/react-components/react-persona/library/src/components/Persona/Persona.types.ts
+++ b/packages/react-components/react-persona/library/src/components/Persona/Persona.types.ts
@@ -1,5 +1,5 @@
-import { Avatar } from '@fluentui/react-avatar';
-import { PresenceBadge } from '@fluentui/react-badge';
+import type { Avatar } from '@fluentui/react-avatar';
+import type { PresenceBadge } from '@fluentui/react-badge';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
export type PersonaSlots = {
diff --git a/packages/react-components/react-persona/library/src/components/Persona/usePersona.ts b/packages/react-components/react-persona/library/src/components/Persona/usePersona.ts
index 71cb06f4299fd..f816f365d63ac 100644
--- a/packages/react-components/react-persona/library/src/components/Persona/usePersona.ts
+++ b/packages/react-components/react-persona/library/src/components/Persona/usePersona.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { Avatar } from '@fluentui/react-avatar';
import { slot } from '@fluentui/react-utilities';
import { PresenceBadge } from '@fluentui/react-badge';
diff --git a/packages/react-components/react-popover/library/etc/react-popover.api.md b/packages/react-components/react-popover/library/etc/react-popover.api.md
index 03c439682bb15..239f1482b6e14 100644
--- a/packages/react-components/react-popover/library/etc/react-popover.api.md
+++ b/packages/react-components/react-popover/library/etc/react-popover.api.md
@@ -4,8 +4,8 @@
```ts
-import { ARIAButtonResultProps } from '@fluentui/react-aria';
-import { ARIAButtonType } from '@fluentui/react-aria';
+import type { ARIAButtonResultProps } from '@fluentui/react-aria';
+import type { ARIAButtonType } from '@fluentui/react-aria';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ContextSelector } from '@fluentui/react-context-selector';
@@ -18,7 +18,7 @@ import type { PositioningVirtualElement } from '@fluentui/react-positioning';
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
import { Provider } from 'react';
import { ProviderProps } from 'react';
-import * as React_2 from 'react';
+import type * as React_2 from 'react';
import type { SetVirtualMouseTarget } from '@fluentui/react-positioning';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-popover/library/src/components/Popover/Popover.tsx b/packages/react-components/react-popover/library/src/components/Popover/Popover.tsx
index 80d1a5d22fd4f..3d06ac2d51da5 100644
--- a/packages/react-components/react-popover/library/src/components/Popover/Popover.tsx
+++ b/packages/react-components/react-popover/library/src/components/Popover/Popover.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { usePopover_unstable } from './usePopover';
import { renderPopover_unstable } from './renderPopover';
import type { PopoverProps } from './Popover.types';
diff --git a/packages/react-components/react-popover/library/src/components/Popover/Popover.types.ts b/packages/react-components/react-popover/library/src/components/Popover/Popover.types.ts
index 39452d0d55dd5..251eff842d04d 100644
--- a/packages/react-components/react-popover/library/src/components/Popover/Popover.types.ts
+++ b/packages/react-components/react-popover/library/src/components/Popover/Popover.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
import type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';
import type {
diff --git a/packages/react-components/react-popover/library/src/components/PopoverSurface/PopoverSurface.test.tsx b/packages/react-components/react-popover/library/src/components/PopoverSurface/PopoverSurface.test.tsx
index 275eba39f9e16..7e8ee590ba7ac 100644
--- a/packages/react-components/react-popover/library/src/components/PopoverSurface/PopoverSurface.test.tsx
+++ b/packages/react-components/react-popover/library/src/components/PopoverSurface/PopoverSurface.test.tsx
@@ -4,7 +4,7 @@ import { PopoverSurface } from './PopoverSurface';
import { render, fireEvent } from '@testing-library/react';
import { isConformant } from '../../testing/isConformant';
import { mockPopoverContext } from '../../testing/mockUsePopoverContext';
-import { PopoverSurfaceProps } from './PopoverSurface.types';
+import type { PopoverSurfaceProps } from './PopoverSurface.types';
jest.mock('../../popoverContext');
diff --git a/packages/react-components/react-popover/library/src/components/PopoverSurface/usePopoverSurface.ts b/packages/react-components/react-popover/library/src/components/PopoverSurface/usePopoverSurface.ts
index bec7ea9c48652..e805ffecd9304 100644
--- a/packages/react-components/react-popover/library/src/components/PopoverSurface/usePopoverSurface.ts
+++ b/packages/react-components/react-popover/library/src/components/PopoverSurface/usePopoverSurface.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useMergedRefs, slot } from '@fluentui/react-utilities';
import { useModalAttributes } from '@fluentui/react-tabster';
import { usePopoverContext_unstable } from '../../popoverContext';
diff --git a/packages/react-components/react-popover/library/src/components/PopoverTrigger/PopoverTrigger.tsx b/packages/react-components/react-popover/library/src/components/PopoverTrigger/PopoverTrigger.tsx
index c76c10ecee8f3..c7a02d8f1fc9c 100644
--- a/packages/react-components/react-popover/library/src/components/PopoverTrigger/PopoverTrigger.tsx
+++ b/packages/react-components/react-popover/library/src/components/PopoverTrigger/PopoverTrigger.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { usePopoverTrigger_unstable } from './usePopoverTrigger';
import { renderPopoverTrigger_unstable } from './renderPopoverTrigger';
import type { FluentTriggerComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-popover/library/src/components/PopoverTrigger/PopoverTrigger.types.ts b/packages/react-components/react-popover/library/src/components/PopoverTrigger/PopoverTrigger.types.ts
index 8f41c82e703ff..a90cee3b2bda4 100644
--- a/packages/react-components/react-popover/library/src/components/PopoverTrigger/PopoverTrigger.types.ts
+++ b/packages/react-components/react-popover/library/src/components/PopoverTrigger/PopoverTrigger.types.ts
@@ -1,6 +1,6 @@
-import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';
+import type { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';
import type { TriggerProps } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
/**
* PopoverTrigger Props
diff --git a/packages/react-components/react-popover/library/src/components/PopoverTrigger/usePopoverTrigger.ts b/packages/react-components/react-popover/library/src/components/PopoverTrigger/usePopoverTrigger.ts
index f23f6fab2b21e..2476f396e2deb 100644
--- a/packages/react-components/react-popover/library/src/components/PopoverTrigger/usePopoverTrigger.ts
+++ b/packages/react-components/react-popover/library/src/components/PopoverTrigger/usePopoverTrigger.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import {
applyTriggerPropsToChildren,
getTriggerChild,
diff --git a/packages/react-components/react-popover/stories/src/Popover/index.stories.tsx b/packages/react-components/react-popover/stories/src/Popover/index.stories.tsx
index 78f93aadeaebe..f04d815155c40 100644
--- a/packages/react-components/react-popover/stories/src/Popover/index.stories.tsx
+++ b/packages/react-components/react-popover/stories/src/Popover/index.stories.tsx
@@ -1,5 +1,5 @@
import { Popover, PopoverProvider, PopoverSurface, PopoverTrigger } from '@fluentui/react-components';
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import descriptionMd from './PopoverDescription.md';
import bestPracticesMd from './PopoverBestPractices.md';
diff --git a/packages/react-components/react-portal/library/src/components/Portal/Portal.tsx b/packages/react-components/react-portal/library/src/components/Portal/Portal.tsx
index 7ef2853d01f5e..48e332eae7ef5 100644
--- a/packages/react-components/react-portal/library/src/components/Portal/Portal.tsx
+++ b/packages/react-components/react-portal/library/src/components/Portal/Portal.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { usePortal_unstable } from './usePortal';
import { renderPortal_unstable } from './renderPortal';
diff --git a/packages/react-components/react-portal/library/src/components/Portal/Portal.types.ts b/packages/react-components/react-portal/library/src/components/Portal/Portal.types.ts
index eccf708ce1bfb..8b8d20cb1a9f8 100644
--- a/packages/react-components/react-portal/library/src/components/Portal/Portal.types.ts
+++ b/packages/react-components/react-portal/library/src/components/Portal/Portal.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
export type PortalProps = {
/**
diff --git a/packages/react-components/react-portal/stories/src/Portal/index.stories.tsx b/packages/react-components/react-portal/stories/src/Portal/index.stories.tsx
index 7e1712d84a0bc..2f6fc2c2f1ee5 100644
--- a/packages/react-components/react-portal/stories/src/Portal/index.stories.tsx
+++ b/packages/react-components/react-portal/stories/src/Portal/index.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { Portal } from '@fluentui/react-components';
import descriptionMd from './PortalDescription.md';
export { Default } from './PortalDefault.stories';
diff --git a/packages/react-components/react-positioning/library/src/middleware/flip.ts b/packages/react-components/react-positioning/library/src/middleware/flip.ts
index 02c5601592785..4b59eb16939e6 100644
--- a/packages/react-components/react-positioning/library/src/middleware/flip.ts
+++ b/packages/react-components/react-positioning/library/src/middleware/flip.ts
@@ -1,4 +1,5 @@
-import { flip as baseFlip, Placement, Middleware } from '@floating-ui/dom';
+import type { Placement, Middleware } from '@floating-ui/dom';
+import { flip as baseFlip } from '@floating-ui/dom';
import type { PositioningOptions } from '../types';
import { getBoundary, resolvePositioningShorthand, toFloatingUIPlacement } from '../utils/index';
diff --git a/packages/react-components/react-positioning/library/src/middleware/matchTargetSize.test.ts b/packages/react-components/react-positioning/library/src/middleware/matchTargetSize.test.ts
index dcc335cf4cb54..d55803336c8e9 100644
--- a/packages/react-components/react-positioning/library/src/middleware/matchTargetSize.test.ts
+++ b/packages/react-components/react-positioning/library/src/middleware/matchTargetSize.test.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { MiddlewareState } from '@floating-ui/dom';
import { matchTargetSize, matchTargetSizeCssVar } from './matchTargetSize';
diff --git a/packages/react-components/react-positioning/library/src/middleware/maxSize.test.ts b/packages/react-components/react-positioning/library/src/middleware/maxSize.test.ts
index f58d086bcc49b..219632dea6655 100644
--- a/packages/react-components/react-positioning/library/src/middleware/maxSize.test.ts
+++ b/packages/react-components/react-positioning/library/src/middleware/maxSize.test.ts
@@ -1,4 +1,5 @@
-import { Platform, computePosition } from '@floating-ui/dom';
+import type { Platform } from '@floating-ui/dom';
+import { computePosition } from '@floating-ui/dom';
import { resetMaxSize } from './maxSize';
const referenceRect: Partial = { x: 0, y: 0, width: 100, height: 100 };
diff --git a/packages/react-components/react-positioning/library/src/middleware/offset.ts b/packages/react-components/react-positioning/library/src/middleware/offset.ts
index 46167556e070a..b5e33fafc7cd2 100644
--- a/packages/react-components/react-positioning/library/src/middleware/offset.ts
+++ b/packages/react-components/react-positioning/library/src/middleware/offset.ts
@@ -1,4 +1,5 @@
-import { offset as baseOffset, Middleware } from '@floating-ui/dom';
+import type { Middleware } from '@floating-ui/dom';
+import { offset as baseOffset } from '@floating-ui/dom';
import type { PositioningOptions } from '../types';
import { getFloatingUIOffset } from '../utils/getFloatingUIOffset';
diff --git a/packages/react-components/react-positioning/library/src/middleware/shift.ts b/packages/react-components/react-positioning/library/src/middleware/shift.ts
index 0ba8b9f2c2626..df068a870ff7a 100644
--- a/packages/react-components/react-positioning/library/src/middleware/shift.ts
+++ b/packages/react-components/react-positioning/library/src/middleware/shift.ts
@@ -1,4 +1,5 @@
-import { shift as baseShift, limitShift, Middleware } from '@floating-ui/dom';
+import type { Middleware } from '@floating-ui/dom';
+import { shift as baseShift, limitShift } from '@floating-ui/dom';
import type { PositioningOptions } from '../types';
import { getBoundary, toFloatingUIPadding } from '../utils/index';
diff --git a/packages/react-components/react-positioning/library/src/types.test.ts b/packages/react-components/react-positioning/library/src/types.test.ts
index f620d76dc61d1..d947da1d047c6 100644
--- a/packages/react-components/react-positioning/library/src/types.test.ts
+++ b/packages/react-components/react-positioning/library/src/types.test.ts
@@ -1,6 +1,6 @@
import * as React from 'react';
import type { OnPositioningEndEvent } from './types';
-import { PositioningProps } from './types';
+import type { PositioningProps } from './types';
describe('PositioningProps', () => {
it('should not break API', () => {
diff --git a/packages/react-components/react-positioning/library/src/types.ts b/packages/react-components/react-positioning/library/src/types.ts
index 1dcc5722246a2..a0e81a2370e62 100644
--- a/packages/react-components/react-positioning/library/src/types.ts
+++ b/packages/react-components/react-positioning/library/src/types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
/**
* Physical placement of a positioned element relative to its target, as computed by Floating UI.
diff --git a/packages/react-components/react-positioning/library/src/usePositioningMouseTarget.ts b/packages/react-components/react-positioning/library/src/usePositioningMouseTarget.ts
index 2271fab8d4993..e83432995de7f 100644
--- a/packages/react-components/react-positioning/library/src/usePositioningMouseTarget.ts
+++ b/packages/react-components/react-positioning/library/src/usePositioningMouseTarget.ts
@@ -2,7 +2,7 @@
import * as React from 'react';
import { createVirtualElementFromClick } from './createVirtualElementFromClick';
-import { PositioningVirtualElement, SetVirtualMouseTarget } from './types';
+import type { PositioningVirtualElement, SetVirtualMouseTarget } from './types';
/**
* A state hook that manages a popper virtual element from mouseevents.
diff --git a/packages/react-components/react-positioning/library/src/utils/getFloatingUIOffset.test.ts b/packages/react-components/react-positioning/library/src/utils/getFloatingUIOffset.test.ts
index 4c81d9004bf1e..e7602445bd314 100644
--- a/packages/react-components/react-positioning/library/src/utils/getFloatingUIOffset.test.ts
+++ b/packages/react-components/react-positioning/library/src/utils/getFloatingUIOffset.test.ts
@@ -1,6 +1,7 @@
-import { MiddlewareState } from '@floating-ui/dom';
-import { OffsetFunction } from '../types';
-import { FloatingUIOffsetFunction, getFloatingUIOffset } from './getFloatingUIOffset';
+import type { MiddlewareState } from '@floating-ui/dom';
+import type { OffsetFunction } from '../types';
+import type { FloatingUIOffsetFunction } from './getFloatingUIOffset';
+import { getFloatingUIOffset } from './getFloatingUIOffset';
describe('getFloatingUIOffset', () => {
const testMiddlewareArgs: MiddlewareState = {
diff --git a/packages/react-components/react-positioning/library/src/utils/getReactFiberFromNode.ts b/packages/react-components/react-positioning/library/src/utils/getReactFiberFromNode.ts
index a21fa0e0893d9..cd2aeede5efea 100644
--- a/packages/react-components/react-positioning/library/src/utils/getReactFiberFromNode.ts
+++ b/packages/react-components/react-positioning/library/src/utils/getReactFiberFromNode.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
// ========================================================
// react/packages/shared/ReactTypes.js
diff --git a/packages/react-components/react-positioning/library/src/utils/parseFloatingUIPlacement.test.ts b/packages/react-components/react-positioning/library/src/utils/parseFloatingUIPlacement.test.ts
index b86da90cc33b0..00c41266622f0 100644
--- a/packages/react-components/react-positioning/library/src/utils/parseFloatingUIPlacement.test.ts
+++ b/packages/react-components/react-positioning/library/src/utils/parseFloatingUIPlacement.test.ts
@@ -1,4 +1,4 @@
-import * as FloatingUI from '@floating-ui/dom';
+import type * as FloatingUI from '@floating-ui/dom';
import { parseFloatingUIPlacement } from './parseFloatingUIPlacement';
describe('getSide', () => {
diff --git a/packages/react-components/react-positioning/library/src/utils/toFloatingUIPadding.ts b/packages/react-components/react-positioning/library/src/utils/toFloatingUIPadding.ts
index 65871c63e2178..0797ecc355db2 100644
--- a/packages/react-components/react-positioning/library/src/utils/toFloatingUIPadding.ts
+++ b/packages/react-components/react-positioning/library/src/utils/toFloatingUIPadding.ts
@@ -1,5 +1,5 @@
import type { SideObject } from '@floating-ui/dom';
-import { PositioningOptions } from '../types';
+import type { PositioningOptions } from '../types';
export function toFloatingUIPadding(
padding: NonNullable,
diff --git a/packages/react-components/react-positioning/library/src/utils/writeArrowUpdates.ts b/packages/react-components/react-positioning/library/src/utils/writeArrowUpdates.ts
index d23c389bbba52..37e6c843b2f31 100644
--- a/packages/react-components/react-positioning/library/src/utils/writeArrowUpdates.ts
+++ b/packages/react-components/react-positioning/library/src/utils/writeArrowUpdates.ts
@@ -1,4 +1,4 @@
-import { MiddlewareData } from '@floating-ui/dom';
+import type { MiddlewareData } from '@floating-ui/dom';
/**
* Writes all DOM element updates after position is computed
diff --git a/packages/react-components/react-progress/library/etc/react-progress.api.md b/packages/react-components/react-progress/library/etc/react-progress.api.md
index 9cce87abed791..af81a4b15e127 100644
--- a/packages/react-components/react-progress/library/etc/react-progress.api.md
+++ b/packages/react-components/react-progress/library/etc/react-progress.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import type { MotionSlotProps } from '@fluentui/react-motion';
-import * as React_2 from 'react';
+import type * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBar.tsx b/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBar.tsx
index 8711b249f91c6..3d653a22cfeed 100644
--- a/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBar.tsx
+++ b/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBar.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useFieldContext_unstable } from '@fluentui/react-field';
import { motionSlot } from '@fluentui/react-motion';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-progress/stories/src/ProgressBar/ProgressBarDefault.stories.tsx b/packages/react-components/react-progress/stories/src/ProgressBar/ProgressBarDefault.stories.tsx
index e20b1886f3d00..4752702e15b7e 100644
--- a/packages/react-components/react-progress/stories/src/ProgressBar/ProgressBarDefault.stories.tsx
+++ b/packages/react-components/react-progress/stories/src/ProgressBar/ProgressBarDefault.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { Field, ProgressBar, ProgressBarProps } from '@fluentui/react-components';
+import type { JSXElement, ProgressBarProps } from '@fluentui/react-components';
+import { Field, ProgressBar } from '@fluentui/react-components';
export const Default = (props: Partial): JSXElement => {
return (
diff --git a/packages/react-components/react-provider/library/etc/react-provider.api.md b/packages/react-components/react-provider/library/etc/react-provider.api.md
index aec50c7f5c072..66293f710bbaa 100644
--- a/packages/react-components/react-provider/library/etc/react-provider.api.md
+++ b/packages/react-components/react-provider/library/etc/react-provider.api.md
@@ -15,7 +15,7 @@ import type { PartialTheme } from '@fluentui/react-theme';
import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { ThemeClassNameContextValue_unstable } from '@fluentui/react-shared-contexts';
import type { ThemeContextValue_unstable } from '@fluentui/react-shared-contexts';
import type { TooltipVisibilityContextValue_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-node.test.tsx b/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-node.test.tsx
index f34208bdf3696..3bca12bf969f9 100644
--- a/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-node.test.tsx
+++ b/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-node.test.tsx
@@ -11,7 +11,7 @@ import { FluentProvider } from './FluentProvider';
import * as prettier from 'prettier';
import { createDOMRenderer } from '@griffel/core';
import { RendererProvider } from '@griffel/react';
-import { PartialTheme } from '@fluentui/react-theme';
+import type { PartialTheme } from '@fluentui/react-theme';
jest.mock('@fluentui/react-utilities', () => ({
...jest.requireActual('@fluentui/react-utilities'),
diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/renderFluentProvider.tsx b/packages/react-components/react-provider/library/src/components/FluentProvider/renderFluentProvider.tsx
index 978ef6547734d..accfcc7beb7a1 100644
--- a/packages/react-components/react-provider/library/src/components/FluentProvider/renderFluentProvider.tsx
+++ b/packages/react-components/react-provider/library/src/components/FluentProvider/renderFluentProvider.tsx
@@ -6,6 +6,7 @@
import { canUseDOM, assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import { TextDirectionProvider } from '@griffel/react';
+import type { CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue } from '@fluentui/react-shared-contexts';
import {
OverridesProvider_unstable as OverridesProvider,
Provider_unstable as Provider,
@@ -13,7 +14,6 @@ import {
ThemeProvider_unstable as ThemeProvider,
ThemeClassNameProvider_unstable as ThemeClassNameProvider,
CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,
- CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,
} from '@fluentui/react-shared-contexts';
import type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types';
import { IconDirectionContextProvider } from '@fluentui/react-icons/lib/providers';
diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProvider.test.tsx b/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProvider.test.tsx
index a8a539b8cf155..a9f7f3000a5dd 100644
--- a/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProvider.test.tsx
+++ b/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProvider.test.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
import { FluentProvider } from './FluentProvider';
import { useFluentProvider_unstable } from './useFluentProvider';
-import { FluentProviderCustomStyleHooks } from './FluentProvider.types';
+import type { FluentProviderCustomStyleHooks } from './FluentProvider.types';
describe('useFluentProvider_unstable', () => {
// eslint-disable-next-line @typescript-eslint/no-empty-function
diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProviderStyles.styles.ts b/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProviderStyles.styles.ts
index 72f408ea51618..156a129bc664f 100644
--- a/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProviderStyles.styles.ts
+++ b/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProviderStyles.styles.ts
@@ -4,7 +4,7 @@ import { makeStyles, mergeClasses } from '@griffel/core';
import { useRenderer_unstable } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
export const fluentProviderClassNames: SlotClassNames = {
root: 'fui-FluentProvider',
diff --git a/packages/react-components/react-provider/stories/src/Provider/index.stories.tsx b/packages/react-components/react-provider/stories/src/Provider/index.stories.tsx
index 380d6521e163b..0cb704edac504 100644
--- a/packages/react-components/react-provider/stories/src/Provider/index.stories.tsx
+++ b/packages/react-components/react-provider/stories/src/Provider/index.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { FluentProvider } from '@fluentui/react-components';
import descriptionMd from './FluentProviderDescription.md';
diff --git a/packages/react-components/react-radio/library/etc/react-radio.api.md b/packages/react-components/react-radio/library/etc/react-radio.api.md
index bf9a8ab3a2e6b..3f0df295440f5 100644
--- a/packages/react-components/react-radio/library/etc/react-radio.api.md
+++ b/packages/react-components/react-radio/library/etc/react-radio.api.md
@@ -8,7 +8,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { Label } from '@fluentui/react-label';
+import type { Label } from '@fluentui/react-label';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-radio/library/src/components/Radio/Radio.types.ts b/packages/react-components/react-radio/library/src/components/Radio/Radio.types.ts
index ad4f83f22250e..bf6e2d93644fa 100644
--- a/packages/react-components/react-radio/library/src/components/Radio/Radio.types.ts
+++ b/packages/react-components/react-radio/library/src/components/Radio/Radio.types.ts
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { Label } from '@fluentui/react-label';
+import type * as React from 'react';
+import type { Label } from '@fluentui/react-label';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
export type RadioSlots = {
diff --git a/packages/react-components/react-radio/library/src/components/Radio/useRadio.tsx b/packages/react-components/react-radio/library/src/components/Radio/useRadio.tsx
index abc69c7932041..e8d8cda21c01c 100644
--- a/packages/react-components/react-radio/library/src/components/Radio/useRadio.tsx
+++ b/packages/react-components/react-radio/library/src/components/Radio/useRadio.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { Label } from '@fluentui/react-label';
import { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
import { useRadioGroupContextValue_unstable } from '../../contexts/RadioGroupContext';
diff --git a/packages/react-components/react-radio/library/src/components/RadioGroup/RadioGroup.tsx b/packages/react-components/react-radio/library/src/components/RadioGroup/RadioGroup.tsx
index 524fe18f1672c..f70547ae425f1 100644
--- a/packages/react-components/react-radio/library/src/components/RadioGroup/RadioGroup.tsx
+++ b/packages/react-components/react-radio/library/src/components/RadioGroup/RadioGroup.tsx
@@ -2,7 +2,7 @@
import * as React from 'react';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { RadioGroupProps } from './RadioGroup.types';
+import type { RadioGroupProps } from './RadioGroup.types';
import { renderRadioGroup_unstable } from './renderRadioGroup';
import { useRadioGroup_unstable } from './useRadioGroup';
import { useRadioGroupStyles_unstable } from './useRadioGroupStyles.styles';
diff --git a/packages/react-components/react-radio/library/src/components/RadioGroup/RadioGroup.types.ts b/packages/react-components/react-radio/library/src/components/RadioGroup/RadioGroup.types.ts
index 3693043d41406..5809ad02eccbe 100644
--- a/packages/react-components/react-radio/library/src/components/RadioGroup/RadioGroup.types.ts
+++ b/packages/react-components/react-radio/library/src/components/RadioGroup/RadioGroup.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
export type RadioGroupSlots = {
diff --git a/packages/react-components/react-radio/library/src/components/RadioGroup/renderRadioGroup.tsx b/packages/react-components/react-radio/library/src/components/RadioGroup/renderRadioGroup.tsx
index 3d51280d05073..4a4482dd88331 100644
--- a/packages/react-components/react-radio/library/src/components/RadioGroup/renderRadioGroup.tsx
+++ b/packages/react-components/react-radio/library/src/components/RadioGroup/renderRadioGroup.tsx
@@ -4,7 +4,7 @@
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import { RadioGroupContext } from '../../contexts/RadioGroupContext';
-import { RadioGroupContextValues, RadioGroupSlots, RadioGroupBaseState } from './RadioGroup.types';
+import type { RadioGroupContextValues, RadioGroupSlots, RadioGroupBaseState } from './RadioGroup.types';
/**
* Render the final JSX of RadioGroup
diff --git a/packages/react-components/react-radio/library/src/components/RadioGroup/useRadioGroup.ts b/packages/react-components/react-radio/library/src/components/RadioGroup/useRadioGroup.ts
index 01354e088a36e..9fd401870680c 100644
--- a/packages/react-components/react-radio/library/src/components/RadioGroup/useRadioGroup.ts
+++ b/packages/react-components/react-radio/library/src/components/RadioGroup/useRadioGroup.ts
@@ -1,9 +1,9 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useFieldControlProps_unstable } from '@fluentui/react-field';
import { getIntrinsicElementProps, isHTMLElement, useEventCallback, useId, slot } from '@fluentui/react-utilities';
-import { RadioGroupBaseProps, RadioGroupBaseState, RadioGroupProps, RadioGroupState } from './RadioGroup.types';
+import type { RadioGroupBaseProps, RadioGroupBaseState, RadioGroupProps, RadioGroupState } from './RadioGroup.types';
/**
* Create the state required to render RadioGroup.
diff --git a/packages/react-components/react-radio/library/src/components/RadioGroup/useRadioGroupStyles.styles.ts b/packages/react-components/react-radio/library/src/components/RadioGroup/useRadioGroupStyles.styles.ts
index 5eb690c7dfebb..08276fdf5d1da 100644
--- a/packages/react-components/react-radio/library/src/components/RadioGroup/useRadioGroupStyles.styles.ts
+++ b/packages/react-components/react-radio/library/src/components/RadioGroup/useRadioGroupStyles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
-import { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';
+import type { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';
import type { SlotClassNames } from '@fluentui/react-utilities';
export const radioGroupClassNames: SlotClassNames = {
diff --git a/packages/react-components/react-rating/library/src/components/Rating/Rating.types.ts b/packages/react-components/react-rating/library/src/components/Rating/Rating.types.ts
index bc6d6a5a9e64f..628d1abcfd33c 100644
--- a/packages/react-components/react-rating/library/src/components/Rating/Rating.types.ts
+++ b/packages/react-components/react-rating/library/src/components/Rating/Rating.types.ts
@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';
-import { RatingItemContextValue } from '../RatingItem/RatingItem.types';
+import type { RatingItemContextValue } from '../RatingItem/RatingItem.types';
export type RatingSlots = {
root: NonNullable>;
diff --git a/packages/react-components/react-rating/library/src/components/Rating/useRatingContextValues.ts b/packages/react-components/react-rating/library/src/components/Rating/useRatingContextValues.ts
index 903f5f2c4b215..028257122ce6e 100644
--- a/packages/react-components/react-rating/library/src/components/Rating/useRatingContextValues.ts
+++ b/packages/react-components/react-rating/library/src/components/Rating/useRatingContextValues.ts
@@ -1,8 +1,8 @@
'use client';
import * as React from 'react';
-import { RatingContextValues, RatingState } from './Rating.types';
-import { RatingItemContextValue } from '../RatingItem/RatingItem.types';
+import type { RatingContextValues, RatingState } from './Rating.types';
+import type { RatingItemContextValue } from '../RatingItem/RatingItem.types';
export const useRatingContextValues = (ratingState: RatingState): RatingContextValues => {
const { color, hoveredValue, iconFilled, iconOutline, itemLabel, name, step, size, value } = ratingState;
diff --git a/packages/react-components/react-rating/library/src/components/RatingDisplay/RatingDisplay.types.ts b/packages/react-components/react-rating/library/src/components/RatingDisplay/RatingDisplay.types.ts
index d770b6f93cb40..09c057924be10 100644
--- a/packages/react-components/react-rating/library/src/components/RatingDisplay/RatingDisplay.types.ts
+++ b/packages/react-components/react-rating/library/src/components/RatingDisplay/RatingDisplay.types.ts
@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { RatingItemContextValue } from '../RatingItem/RatingItem.types';
+import type { RatingItemContextValue } from '../RatingItem/RatingItem.types';
export type RatingDisplaySlots = {
root: NonNullable>;
diff --git a/packages/react-components/react-rating/library/src/components/RatingDisplay/useRatingDisplayContextValues.ts b/packages/react-components/react-rating/library/src/components/RatingDisplay/useRatingDisplayContextValues.ts
index 397308dc19ca3..fa6b95973896f 100644
--- a/packages/react-components/react-rating/library/src/components/RatingDisplay/useRatingDisplayContextValues.ts
+++ b/packages/react-components/react-rating/library/src/components/RatingDisplay/useRatingDisplayContextValues.ts
@@ -1,8 +1,8 @@
'use client';
import * as React from 'react';
-import { RatingDisplayContextValues, RatingDisplayState } from './RatingDisplay.types';
-import { RatingItemContextValue } from '../RatingItem/RatingItem.types';
+import type { RatingDisplayContextValues, RatingDisplayState } from './RatingDisplay.types';
+import type { RatingItemContextValue } from '../RatingItem/RatingItem.types';
export const useRatingDisplayContextValues = (state: RatingDisplayState): RatingDisplayContextValues => {
const { color, compact, icon, size, value } = state;
diff --git a/packages/react-components/react-rating/library/src/components/RatingItem/RatingItem.test.tsx b/packages/react-components/react-rating/library/src/components/RatingItem/RatingItem.test.tsx
index 06fc857494197..0d83900871a59 100644
--- a/packages/react-components/react-rating/library/src/components/RatingItem/RatingItem.test.tsx
+++ b/packages/react-components/react-rating/library/src/components/RatingItem/RatingItem.test.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
import { isConformant } from '../../testing/isConformant';
import { RatingItem } from './RatingItem';
import { RatingItemProvider } from '../../contexts/RatingItemContext';
-import { RatingItemContextValue } from './RatingItem.types';
+import type { RatingItemContextValue } from './RatingItem.types';
import { StarFilled, StarRegular } from '@fluentui/react-icons';
describe('RatingItem', () => {
diff --git a/packages/react-components/react-rating/library/src/components/RatingItem/RatingItem.types.ts b/packages/react-components/react-rating/library/src/components/RatingItem/RatingItem.types.ts
index 668dd2b1df100..b3185aa9dfb5b 100644
--- a/packages/react-components/react-rating/library/src/components/RatingItem/RatingItem.types.ts
+++ b/packages/react-components/react-rating/library/src/components/RatingItem/RatingItem.types.ts
@@ -1,6 +1,6 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { RatingState } from '../Rating/Rating.types';
-import { RatingDisplayState } from '../RatingDisplay/RatingDisplay.types';
+import type { RatingState } from '../Rating/Rating.types';
+import type { RatingDisplayState } from '../RatingDisplay/RatingDisplay.types';
export type RatingItemSlots = {
/**
diff --git a/packages/react-components/react-rating/stories/src/Rating/RatingDefault.stories.tsx b/packages/react-components/react-rating/stories/src/Rating/RatingDefault.stories.tsx
index 401086c5ab378..5ec0c2589919a 100644
--- a/packages/react-components/react-rating/stories/src/Rating/RatingDefault.stories.tsx
+++ b/packages/react-components/react-rating/stories/src/Rating/RatingDefault.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { Rating, RatingProps } from '@fluentui/react-components';
+import type { JSXElement, RatingProps } from '@fluentui/react-components';
+import { Rating } from '@fluentui/react-components';
export const Default = (props: Partial): JSXElement => {
return ;
diff --git a/packages/react-components/react-search/library/src/components/SearchBox/SearchBox.test.tsx b/packages/react-components/react-search/library/src/components/SearchBox/SearchBox.test.tsx
index 4965620ef30b2..58005505d0b2c 100644
--- a/packages/react-components/react-search/library/src/components/SearchBox/SearchBox.test.tsx
+++ b/packages/react-components/react-search/library/src/components/SearchBox/SearchBox.test.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import userEvent from '@testing-library/user-event';
-import { render, RenderResult, fireEvent, screen } from '@testing-library/react';
+import type { RenderResult } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
import { SearchBox } from './SearchBox';
import { isConformant } from '../../testing/isConformant';
import { resetIdsForTests } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-search/library/src/components/SearchBox/SearchBox.types.ts b/packages/react-components/react-search/library/src/components/SearchBox/SearchBox.types.ts
index 2f99bc01cae1f..94088cd78dc2a 100644
--- a/packages/react-components/react-search/library/src/components/SearchBox/SearchBox.types.ts
+++ b/packages/react-components/react-search/library/src/components/SearchBox/SearchBox.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type { InputOnChangeData, InputProps, InputSlots, InputState } from '@fluentui/react-input';
diff --git a/packages/react-components/react-search/stories/src/SearchBox/SearchBoxContentBeforeAfter.stories.tsx b/packages/react-components/react-search/stories/src/SearchBox/SearchBoxContentBeforeAfter.stories.tsx
index a8e4e379bb8bf..f1665c7f83c3b 100644
--- a/packages/react-components/react-search/stories/src/SearchBox/SearchBoxContentBeforeAfter.stories.tsx
+++ b/packages/react-components/react-search/stories/src/SearchBox/SearchBoxContentBeforeAfter.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { Button, ButtonProps, Field, makeStyles, SearchBox, Text, tokens } from '@fluentui/react-components';
+import type { JSXElement, ButtonProps } from '@fluentui/react-components';
+import { Button, Field, makeStyles, SearchBox, Text, tokens } from '@fluentui/react-components';
import { PersonRegular, MicRegular } from '@fluentui/react-icons';
const useStyles = makeStyles({
diff --git a/packages/react-components/react-search/stories/src/SearchBox/SearchBoxControlled.stories.tsx b/packages/react-components/react-search/stories/src/SearchBox/SearchBoxControlled.stories.tsx
index 0a84651bd467b..7efabf042863e 100644
--- a/packages/react-components/react-search/stories/src/SearchBox/SearchBoxControlled.stories.tsx
+++ b/packages/react-components/react-search/stories/src/SearchBox/SearchBoxControlled.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { Field, InputOnChangeData, SearchBox } from '@fluentui/react-components';
+import type { JSXElement, InputOnChangeData } from '@fluentui/react-components';
+import { Field, SearchBox } from '@fluentui/react-components';
import type { SearchBoxChangeEvent } from '@fluentui/react-components';
export const Controlled = (): JSXElement => {
diff --git a/packages/react-components/react-select/library/etc/react-select.api.md b/packages/react-components/react-select/library/etc/react-select.api.md
index a09bf1c69fdb2..0168e616f78d3 100644
--- a/packages/react-components/react-select/library/etc/react-select.api.md
+++ b/packages/react-components/react-select/library/etc/react-select.api.md
@@ -11,7 +11,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
// @public
export const renderSelect_unstable: (state: SelectBaseState) => JSXElement;
diff --git a/packages/react-components/react-select/library/src/components/Select/Select.types.ts b/packages/react-components/react-select/library/src/components/Select/Select.types.ts
index c8244a056125f..47cba405b0365 100644
--- a/packages/react-components/react-select/library/src/components/Select/Select.types.ts
+++ b/packages/react-components/react-select/library/src/components/Select/Select.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';
export type SelectSlots = {
diff --git a/packages/react-components/react-select/library/src/components/Select/useSelectStyles.styles.ts b/packages/react-components/react-select/library/src/components/Select/useSelectStyles.styles.ts
index 23f783c7324e2..8e2f4f9e306a2 100644
--- a/packages/react-components/react-select/library/src/components/Select/useSelectStyles.styles.ts
+++ b/packages/react-components/react-select/library/src/components/Select/useSelectStyles.styles.ts
@@ -2,7 +2,7 @@
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { SelectSlots, SelectState } from './Select.types';
export const selectClassNames: SlotClassNames = {
diff --git a/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.types.ts b/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.types.ts
index 846953f2150e5..27d28280b07b8 100644
--- a/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.types.ts
+++ b/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { SkeletonContextValue } from '../../contexts/index';
+import type { SkeletonContextValue } from '../../contexts/index';
export type SkeletonSlots = {
/**
diff --git a/packages/react-components/react-skeleton/library/src/components/Skeleton/useSkeleton.ts b/packages/react-components/react-skeleton/library/src/components/Skeleton/useSkeleton.ts
index db517cd7e4ce4..454c02dc4f375 100644
--- a/packages/react-components/react-skeleton/library/src/components/Skeleton/useSkeleton.ts
+++ b/packages/react-components/react-skeleton/library/src/components/Skeleton/useSkeleton.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { SkeletonBaseProps, SkeletonBaseState, SkeletonProps, SkeletonState } from './Skeleton.types';
import { useSkeletonContext } from '../../contexts/SkeletonContext';
diff --git a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/useSkeletonItem.tsx b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/useSkeletonItem.tsx
index 36415fd41b480..e8a709e76cb46 100644
--- a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/useSkeletonItem.tsx
+++ b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/useSkeletonItem.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import { useSkeletonContext } from '../../contexts/SkeletonContext';
import type {
diff --git a/packages/react-components/react-slider/library/etc/react-slider.api.md b/packages/react-components/react-slider/library/etc/react-slider.api.md
index d13e07c714327..16f69192aef60 100644
--- a/packages/react-components/react-slider/library/etc/react-slider.api.md
+++ b/packages/react-components/react-slider/library/etc/react-slider.api.md
@@ -8,7 +8,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import * as React_2 from 'react';
+import type * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-slider/library/src/components/Slider/Slider.types.ts b/packages/react-components/react-slider/library/src/components/Slider/Slider.types.ts
index b196ce88261e5..b0ab1244d2385 100644
--- a/packages/react-components/react-slider/library/src/components/Slider/Slider.types.ts
+++ b/packages/react-components/react-slider/library/src/components/Slider/Slider.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';
export type SliderSlots = {
diff --git a/packages/react-components/react-slider/library/src/components/Slider/useSlider.ts b/packages/react-components/react-slider/library/src/components/Slider/useSlider.ts
index 84b2c9a30f436..bdd105f21762c 100644
--- a/packages/react-components/react-slider/library/src/components/Slider/useSlider.ts
+++ b/packages/react-components/react-slider/library/src/components/Slider/useSlider.ts
@@ -1,10 +1,10 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useFieldControlProps_unstable } from '@fluentui/react-field';
import { getPartitionedNativeProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
import { useSliderState_unstable } from './useSliderState';
-import { SliderBaseProps, SliderBaseState, SliderProps, SliderState } from './Slider.types';
+import type { SliderBaseProps, SliderBaseState, SliderProps, SliderState } from './Slider.types';
import { useFocusWithin } from '@fluentui/react-tabster';
export const useSlider_unstable = (props: SliderProps, ref: React.Ref): SliderState => {
diff --git a/packages/react-components/react-slider/library/src/components/Slider/useSliderState.tsx b/packages/react-components/react-slider/library/src/components/Slider/useSliderState.tsx
index e0f5299056698..0cf845c72314b 100644
--- a/packages/react-components/react-slider/library/src/components/Slider/useSliderState.tsx
+++ b/packages/react-components/react-slider/library/src/components/Slider/useSliderState.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { sliderCSSVars } from './Slider.constants';
diff --git a/packages/react-components/react-spinbutton/library/etc/react-spinbutton.api.md b/packages/react-components/react-spinbutton/library/etc/react-spinbutton.api.md
index d528da198b5a1..fb2e4eb07512c 100644
--- a/packages/react-components/react-spinbutton/library/etc/react-spinbutton.api.md
+++ b/packages/react-components/react-spinbutton/library/etc/react-spinbutton.api.md
@@ -11,7 +11,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
// @public
export const renderSpinButton_unstable: (state: SpinButtonBaseState) => JSXElement;
diff --git a/packages/react-components/react-spinbutton/library/src/components/SpinButton/SpinButton.types.ts b/packages/react-components/react-spinbutton/library/src/components/SpinButton/SpinButton.types.ts
index b33aeb670b007..9dd4d3f6965af 100644
--- a/packages/react-components/react-spinbutton/library/src/components/SpinButton/SpinButton.types.ts
+++ b/packages/react-components/react-spinbutton/library/src/components/SpinButton/SpinButton.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
export type SpinButtonSlots = {
/**
diff --git a/packages/react-components/react-spinbutton/library/src/components/SpinButton/useSpinButton.tsx b/packages/react-components/react-spinbutton/library/src/components/SpinButton/useSpinButton.tsx
index 0e6e30fb8407c..aad6189e52a79 100644
--- a/packages/react-components/react-spinbutton/library/src/components/SpinButton/useSpinButton.tsx
+++ b/packages/react-components/react-spinbutton/library/src/components/SpinButton/useSpinButton.tsx
@@ -11,7 +11,7 @@ import {
useMergedRefs,
} from '@fluentui/react-utilities';
import { ArrowUp, ArrowDown, End, Enter, Escape, Home, PageDown, PageUp } from '@fluentui/keyboard-keys';
-import {
+import type {
SpinButtonBaseProps,
SpinButtonBaseState,
SpinButtonProps,
diff --git a/packages/react-components/react-spinbutton/library/src/components/SpinButton/useSpinButtonStyles.styles.ts b/packages/react-components/react-spinbutton/library/src/components/SpinButton/useSpinButtonStyles.styles.ts
index 44eee39a6418a..ad2eccdc1032b 100644
--- a/packages/react-components/react-spinbutton/library/src/components/SpinButton/useSpinButtonStyles.styles.ts
+++ b/packages/react-components/react-spinbutton/library/src/components/SpinButton/useSpinButtonStyles.styles.ts
@@ -1,6 +1,6 @@
'use client';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
import type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';
import { tokens, typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-spinbutton/stories/src/SpinButton/index.stories.tsx b/packages/react-components/react-spinbutton/stories/src/SpinButton/index.stories.tsx
index 4ec63b48ea64d..6071688ec586d 100644
--- a/packages/react-components/react-spinbutton/stories/src/SpinButton/index.stories.tsx
+++ b/packages/react-components/react-spinbutton/stories/src/SpinButton/index.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { SpinButton } from '@fluentui/react-components';
import descriptionMd from './SpinButtonDescription.md';
diff --git a/packages/react-components/react-spinner/library/etc/react-spinner.api.md b/packages/react-components/react-spinner/library/etc/react-spinner.api.md
index ecf8c445f0357..a0e505db9202b 100644
--- a/packages/react-components/react-spinner/library/etc/react-spinner.api.md
+++ b/packages/react-components/react-spinner/library/etc/react-spinner.api.md
@@ -8,7 +8,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { Label } from '@fluentui/react-label';
+import type { Label } from '@fluentui/react-label';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-spinner/library/src/components/Spinner/Spinner.types.ts b/packages/react-components/react-spinner/library/src/components/Spinner/Spinner.types.ts
index d082f8d9dc3d3..68dc11e07bd6e 100644
--- a/packages/react-components/react-spinner/library/src/components/Spinner/Spinner.types.ts
+++ b/packages/react-components/react-spinner/library/src/components/Spinner/Spinner.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { Label } from '@fluentui/react-label';
+import type { Label } from '@fluentui/react-label';
export type SpinnerSlots = {
/**
diff --git a/packages/react-components/react-spinner/library/src/contexts/SpinnerContext.ts b/packages/react-components/react-spinner/library/src/contexts/SpinnerContext.ts
index 0ccf150f990e2..70f6065cf0f59 100644
--- a/packages/react-components/react-spinner/library/src/contexts/SpinnerContext.ts
+++ b/packages/react-components/react-spinner/library/src/contexts/SpinnerContext.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { SpinnerProps } from '../components/Spinner/Spinner.types';
+import type { SpinnerProps } from '../components/Spinner/Spinner.types';
const SpinnerContext = React.createContext(undefined);
diff --git a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md
index 2e87644734328..a878249615a68 100644
--- a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md
+++ b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md
@@ -4,11 +4,11 @@
```ts
-import { Args } from '@storybook/react-webpack5';
+import type { Args } from '@storybook/react-webpack5';
import type { JSXElement } from '@fluentui/react-utilities';
-import { Parameters as Parameters_2 } from '@storybook/react-webpack5';
+import type { Parameters as Parameters_2 } from '@storybook/react-webpack5';
import * as React_2 from 'react';
-import { StoryContext } from '@storybook/react-webpack5';
+import type { StoryContext } from '@storybook/react-webpack5';
// @public (undocumented)
export const DIR_ID: "storybook_fluentui-react-addon_dir";
diff --git a/packages/react-components/react-storybook-addon/src/components/DirectionSwitch.tsx b/packages/react-components/react-storybook-addon/src/components/DirectionSwitch.tsx
index 5314b639b0a5c..57cad65df1d54 100644
--- a/packages/react-components/react-storybook-addon/src/components/DirectionSwitch.tsx
+++ b/packages/react-components/react-storybook-addon/src/components/DirectionSwitch.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { IconButton } from 'storybook/internal/components';
import { styled } from 'storybook/theming';
-import { JSXElement } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
import { DIR_ID } from '../constants';
import { useGlobals } from '../hooks';
diff --git a/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx b/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx
index 86745337e3f28..e842554172b41 100644
--- a/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx
+++ b/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx
@@ -4,9 +4,11 @@ import { ArrowDownIcon } from '@storybook/icons';
import { useParameter } from 'storybook/manager-api';
import type { JSXElement } from '@fluentui/react-utilities';
-import { ThemeIds, themes, defaultTheme } from '../theme';
+import type { ThemeIds } from '../theme';
+import { themes, defaultTheme } from '../theme';
import { THEME_ID } from '../constants';
-import { useGlobals, FluentParameters } from '../hooks';
+import type { FluentParameters } from '../hooks';
+import { useGlobals } from '../hooks';
export interface ThemeSelectorItem {
id: string;
diff --git a/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx b/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx
index 353d28b178bee..48a6d647f5cb1 100644
--- a/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx
+++ b/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
import { FluentProvider } from '@fluentui/react-provider';
import type { JSXElement } from '@fluentui/react-utilities';
+import type { Theme } from '@fluentui/react-theme';
import {
- Theme,
teamsDarkTheme,
teamsDarkV21Theme,
teamsHighContrastTheme,
@@ -12,9 +12,10 @@ import {
webDarkTheme,
webLightTheme,
} from '@fluentui/react-theme';
-import { defaultTheme, ThemeIds } from '../theme';
+import type { ThemeIds } from '../theme';
+import { defaultTheme } from '../theme';
import { DIR_ID, THEME_ID } from '../constants';
-import { FluentStoryContext } from '../hooks';
+import type { FluentStoryContext } from '../hooks';
import { isDecoratorDisabled } from '../utils/isDecoratorDisabled';
const themes: Record = {
diff --git a/packages/react-components/react-storybook-addon/src/decorators/withReactStrictMode.tsx b/packages/react-components/react-storybook-addon/src/decorators/withReactStrictMode.tsx
index b3dd08edac93c..0165b819a8397 100644
--- a/packages/react-components/react-storybook-addon/src/decorators/withReactStrictMode.tsx
+++ b/packages/react-components/react-storybook-addon/src/decorators/withReactStrictMode.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import type { JSXElement } from '@fluentui/react-utilities';
import { STRICT_MODE_ID } from '../constants';
-import { FluentStoryContext } from '../hooks';
+import type { FluentStoryContext } from '../hooks';
import { isDecoratorDisabled } from '../utils/isDecoratorDisabled';
export const withReactStrictMode = (StoryFn: () => JSXElement, context: FluentStoryContext): JSXElement => {
diff --git a/packages/react-components/react-storybook-addon/src/docs/ThemePicker.tsx b/packages/react-components/react-storybook-addon/src/docs/ThemePicker.tsx
index 91e7635a9ddc3..30b500cd73b54 100644
--- a/packages/react-components/react-storybook-addon/src/docs/ThemePicker.tsx
+++ b/packages/react-components/react-storybook-addon/src/docs/ThemePicker.tsx
@@ -6,7 +6,8 @@ import type { MenuProps } from '@fluentui/react-menu';
import { MenuButton } from '@fluentui/react-button';
import { makeStyles } from '@griffel/react';
-import { themes, ThemeIds, THEME_ID } from '..';
+import type { ThemeIds } from '..';
+import { themes, THEME_ID } from '..';
const useStyles = makeStyles({
menuButton: {
diff --git a/packages/react-components/react-storybook-addon/src/hooks.ts b/packages/react-components/react-storybook-addon/src/hooks.ts
index fbb0bb4191ca5..c054b4bda33f2 100644
--- a/packages/react-components/react-storybook-addon/src/hooks.ts
+++ b/packages/react-components/react-storybook-addon/src/hooks.ts
@@ -1,7 +1,7 @@
import { useGlobals as useStorybookGlobals } from 'storybook/manager-api';
-import { Args as StorybookArgs, StoryContext as StorybookContext, Parameters } from '@storybook/react-webpack5';
+import type { Args as StorybookArgs, StoryContext as StorybookContext, Parameters } from '@storybook/react-webpack5';
-import { DIR_ID, STRICT_MODE_ID, THEME_ID } from './constants';
+import type { DIR_ID, STRICT_MODE_ID, THEME_ID } from './constants';
import type { ThemeIds } from './theme';
export interface FluentStoryContext extends StorybookContext {
diff --git a/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/ColorSwatch.types.ts b/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/ColorSwatch.types.ts
index a8b20f49413bb..af41ad9d8b8e4 100644
--- a/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/ColorSwatch.types.ts
+++ b/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/ColorSwatch.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';
+import type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';
export type ColorSwatchSlots = {
root: NonNullable>;
diff --git a/packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/EmptySwatch.types.ts b/packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/EmptySwatch.types.ts
index 27de5de8d7d2e..f3f1ccace6d40 100644
--- a/packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/EmptySwatch.types.ts
+++ b/packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/EmptySwatch.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';
+import type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';
export type EmptySwatchSlots = {
root: Slot<'button'>;
diff --git a/packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/useEmptySwatch.ts b/packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/useEmptySwatch.ts
index 34ba88e56f562..830969f5f35e8 100644
--- a/packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/useEmptySwatch.ts
+++ b/packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/useEmptySwatch.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { EmptySwatchProps, EmptySwatchState } from './EmptySwatch.types';
import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
diff --git a/packages/react-components/react-swatch-picker/library/src/components/ImageSwatch/ImageSwatch.types.ts b/packages/react-components/react-swatch-picker/library/src/components/ImageSwatch/ImageSwatch.types.ts
index e04752e9c2a14..5ed9117013589 100644
--- a/packages/react-components/react-swatch-picker/library/src/components/ImageSwatch/ImageSwatch.types.ts
+++ b/packages/react-components/react-swatch-picker/library/src/components/ImageSwatch/ImageSwatch.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';
+import type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';
export type ImageSwatchSlots = {
root: Slot<'button'>;
diff --git a/packages/react-components/react-swatch-picker/library/src/components/ImageSwatch/useImageSwatch.ts b/packages/react-components/react-swatch-picker/library/src/components/ImageSwatch/useImageSwatch.ts
index edf0b12361253..4030a53f5a8e6 100644
--- a/packages/react-components/react-swatch-picker/library/src/components/ImageSwatch/useImageSwatch.ts
+++ b/packages/react-components/react-swatch-picker/library/src/components/ImageSwatch/useImageSwatch.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from '@fluentui/react-utilities';
import type { ImageSwatchProps, ImageSwatchState } from './ImageSwatch.types';
import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
diff --git a/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.types.ts b/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.types.ts
index df5830218348f..5e25a408535d4 100644
--- a/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.types.ts
+++ b/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.types.ts
@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';
-import { SwatchPickerContextValue } from '../../contexts/swatchPicker';
+import type { SwatchPickerContextValue } from '../../contexts/swatchPicker';
export type SwatchPickerSlots = {
root: Slot<'div'>;
diff --git a/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/useSwatchPicker.ts b/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/useSwatchPicker.ts
index 413fc0a6d509f..accf01d22a880 100644
--- a/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/useSwatchPicker.ts
+++ b/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/useSwatchPicker.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useFieldControlProps_unstable } from '@fluentui/react-field';
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
diff --git a/packages/react-components/react-swatch-picker/library/src/components/SwatchPickerRow/useSwatchPickerRow.ts b/packages/react-components/react-swatch-picker/library/src/components/SwatchPickerRow/useSwatchPickerRow.ts
index 53854544db20c..5f13568814b49 100644
--- a/packages/react-components/react-swatch-picker/library/src/components/SwatchPickerRow/useSwatchPickerRow.ts
+++ b/packages/react-components/react-swatch-picker/library/src/components/SwatchPickerRow/useSwatchPickerRow.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { SwatchPickerRowProps, SwatchPickerRowState } from './SwatchPickerRow.types';
import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
diff --git a/packages/react-components/react-swatch-picker/library/src/contexts/swatchPicker.ts b/packages/react-components/react-swatch-picker/library/src/contexts/swatchPicker.ts
index 84ee9bf188a05..ccaebc1d663b4 100644
--- a/packages/react-components/react-swatch-picker/library/src/contexts/swatchPicker.ts
+++ b/packages/react-components/react-swatch-picker/library/src/contexts/swatchPicker.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
import type { ContextSelector, Context } from '@fluentui/react-context-selector';
import type { SwatchPickerProps, SwatchPickerState } from '../components/SwatchPicker/SwatchPicker.types';
diff --git a/packages/react-components/react-swatch-picker/library/src/utils/renderUtils.test.tsx b/packages/react-components/react-swatch-picker/library/src/utils/renderUtils.test.tsx
index dbf134b19daf7..7486a5dcc4cc1 100644
--- a/packages/react-components/react-swatch-picker/library/src/utils/renderUtils.test.tsx
+++ b/packages/react-components/react-swatch-picker/library/src/utils/renderUtils.test.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { SwatchPicker } from '..';
import { SwatchPickerRow, ColorSwatch } from '..';
-import { renderSwatchPickerGrid, SwatchProps } from './renderUtils';
+import type { SwatchProps } from './renderUtils';
+import { renderSwatchPickerGrid } from './renderUtils';
const colors: SwatchProps[] = [
{ color: '#FF1921', value: 'FF1921', 'aria-label': 'red' },
diff --git a/packages/react-components/react-switch/library/etc/react-switch.api.md b/packages/react-components/react-switch/library/etc/react-switch.api.md
index 0826b4392fa40..91438acde0833 100644
--- a/packages/react-components/react-switch/library/etc/react-switch.api.md
+++ b/packages/react-components/react-switch/library/etc/react-switch.api.md
@@ -8,7 +8,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { Label } from '@fluentui/react-label';
+import type { Label } from '@fluentui/react-label';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-switch/library/src/components/Switch/Switch.types.ts b/packages/react-components/react-switch/library/src/components/Switch/Switch.types.ts
index fdb43e94a79ff..ce57e097d15ea 100644
--- a/packages/react-components/react-switch/library/src/components/Switch/Switch.types.ts
+++ b/packages/react-components/react-switch/library/src/components/Switch/Switch.types.ts
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { Label } from '@fluentui/react-label';
+import type * as React from 'react';
+import type { Label } from '@fluentui/react-label';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
export type SwitchSlots = {
diff --git a/packages/react-components/react-table/library/etc/react-table.api.md b/packages/react-components/react-table/library/etc/react-table.api.md
index 2e8dc2def8671..c17af07451e9a 100644
--- a/packages/react-components/react-table/library/etc/react-table.api.md
+++ b/packages/react-components/react-table/library/etc/react-table.api.md
@@ -4,7 +4,7 @@
```ts
-import { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
import type { AvatarSize } from '@fluentui/react-avatar';
import type { Checkbox } from '@fluentui/react-checkbox';
import type { CheckboxProps } from '@fluentui/react-checkbox';
@@ -18,11 +18,11 @@ import { Provider } from 'react';
import { ProviderProps } from 'react';
import type { Radio } from '@fluentui/react-radio';
import * as React_2 from 'react';
-import { SelectionHookParams } from '@fluentui/react-utilities';
-import { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
+import type { SelectionHookParams } from '@fluentui/react-utilities';
+import type { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
-import { TabsterDOMAttribute } from '@fluentui/react-tabster';
+import type { TabsterDOMAttribute } from '@fluentui/react-tabster';
// @public (undocumented)
export type CellRenderFunction = (column: TableColumnDefinition, dataGridContextValue: DataGridContextValue) => React_2.ReactNode;
diff --git a/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.cy.tsx b/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.cy.tsx
index 2aa7ac0c1f6f2..c2ea8fd19dd7f 100644
--- a/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.cy.tsx
+++ b/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.cy.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-utilities';
+import type { TableColumnDefinition } from '@fluentui/react-table';
import {
- TableColumnDefinition,
DataGrid,
DataGridHeader,
DataGridRow,
diff --git a/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.test.tsx b/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.test.tsx
index 3e06055b48bfd..3a8dfe8f5ca20 100644
--- a/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.test.tsx
+++ b/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.test.tsx
@@ -2,8 +2,9 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { DataGrid } from './DataGrid';
import { isConformant } from '../../testing/isConformant';
-import { DataGridProps } from './DataGrid.types';
-import { TableColumnDefinition, createTableColumn, TableRowData } from '../../hooks';
+import type { DataGridProps } from './DataGrid.types';
+import type { TableColumnDefinition, TableRowData } from '../../hooks';
+import { createTableColumn } from '../../hooks';
import { DataGridBody } from '../DataGridBody/DataGridBody';
import { DataGridRow } from '../DataGridRow/DataGridRow';
import { DataGridCell } from '../DataGridCell/DataGridCell';
diff --git a/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.types.ts b/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.types.ts
index e53142ad0eb54..c566c97aac908 100644
--- a/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.types.ts
+++ b/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.types.ts
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { SelectionHookParams, SelectionMode } from '@fluentui/react-utilities';
-import { TabsterDOMAttribute } from '@fluentui/react-tabster';
+import type * as React from 'react';
+import type { SelectionHookParams, SelectionMode } from '@fluentui/react-utilities';
+import type { TabsterDOMAttribute } from '@fluentui/react-tabster';
import type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';
import type {
SortState,
@@ -10,7 +10,7 @@ import type {
TableColumnSizingOptions,
TableColumnId,
} from '../../hooks';
-import { TableRowProps } from '../TableRow/TableRow.types';
+import type { TableRowProps } from '../TableRow/TableRow.types';
export type DataGridSlots = TableSlots;
diff --git a/packages/react-components/react-table/library/src/components/DataGrid/useDataGridContextValues.ts b/packages/react-components/react-table/library/src/components/DataGrid/useDataGridContextValues.ts
index 309c4c2482942..8e62c68e4e0cf 100644
--- a/packages/react-components/react-table/library/src/components/DataGrid/useDataGridContextValues.ts
+++ b/packages/react-components/react-table/library/src/components/DataGrid/useDataGridContextValues.ts
@@ -1,7 +1,7 @@
'use client';
import { useTableContextValues_unstable } from '../Table/useTableContextValues';
-import { DataGridContextValues, DataGridState } from './DataGrid.types';
+import type { DataGridContextValues, DataGridState } from './DataGrid.types';
export function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues {
const tableContextValues = useTableContextValues_unstable(state);
diff --git a/packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.test.tsx b/packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.test.tsx
index 63f9b701f6835..9da1d07d1963c 100644
--- a/packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.test.tsx
+++ b/packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.test.tsx
@@ -2,12 +2,12 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { DataGridBody } from './DataGridBody';
import { isConformant } from '../../testing/isConformant';
-import { DataGridBodyProps } from './DataGridBody.types';
+import type { DataGridBodyProps } from './DataGridBody.types';
import { mockDataGridContext } from '../../testing/mockDataGridContext';
import { TableContextProvider } from '../../contexts/tableContext';
import { DataGridContextProvider } from '../../contexts/dataGridContext';
import { useTableRowIdContext } from '../../contexts/rowIdContext';
-import { TableFeaturesState, TableRowData } from '../../hooks/types';
+import type { TableFeaturesState, TableRowData } from '../../hooks/types';
describe('DataGridBody', () => {
isConformant({
diff --git a/packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.types.ts b/packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.types.ts
index abd37ed9bbadf..573a2b5fb4bd5 100644
--- a/packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.types.ts
+++ b/packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { TableRowData } from '../../hooks';
import type { TableBodySlots, TableBodyProps, TableBodyState } from '../TableBody/TableBody.types';
diff --git a/packages/react-components/react-table/library/src/components/DataGridBody/useDataGridBody.tsx b/packages/react-components/react-table/library/src/components/DataGridBody/useDataGridBody.tsx
index 132fbe71c17e2..29fd706b65912 100644
--- a/packages/react-components/react-table/library/src/components/DataGridBody/useDataGridBody.tsx
+++ b/packages/react-components/react-table/library/src/components/DataGridBody/useDataGridBody.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import type { DataGridBodyProps, DataGridBodyState } from './DataGridBody.types';
import { useTableBody_unstable } from '../TableBody/useTableBody';
import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
diff --git a/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.test.tsx b/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.test.tsx
index c23ab6932d69a..0645cc1221cb4 100644
--- a/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.test.tsx
+++ b/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { DataGridCell } from './DataGridCell';
import { isConformant } from '../../testing/isConformant';
-import { DataGridCellProps } from './DataGridCell.types';
+import type { DataGridCellProps } from './DataGridCell.types';
import { DataGridContextProvider } from '../../contexts/dataGridContext';
import { mockDataGridContext } from '../../testing/mockDataGridContext';
diff --git a/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.types.ts b/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.types.ts
index 7af4ccc28cc07..48e8bab148357 100644
--- a/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.types.ts
+++ b/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.types.ts
@@ -1,4 +1,4 @@
-import { TableCellProps, TableCellSlots, TableCellState } from '../TableCell/TableCell.types';
+import type { TableCellProps, TableCellSlots, TableCellState } from '../TableCell/TableCell.types';
export type DataGridCellSlots = TableCellSlots;
diff --git a/packages/react-components/react-table/library/src/components/DataGridCell/useDataGridCell.ts b/packages/react-components/react-table/library/src/components/DataGridCell/useDataGridCell.ts
index 6dfbfe2d4be7d..edb3386399351 100644
--- a/packages/react-components/react-table/library/src/components/DataGridCell/useDataGridCell.ts
+++ b/packages/react-components/react-table/library/src/components/DataGridCell/useDataGridCell.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useFocusableGroup } from '@fluentui/react-tabster';
import type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';
import { useTableCell_unstable } from '../TableCell/useTableCell';
diff --git a/packages/react-components/react-table/library/src/components/DataGridHeader/DataGridHeader.test.tsx b/packages/react-components/react-table/library/src/components/DataGridHeader/DataGridHeader.test.tsx
index c1fec0697321a..b9573da9ecf43 100644
--- a/packages/react-components/react-table/library/src/components/DataGridHeader/DataGridHeader.test.tsx
+++ b/packages/react-components/react-table/library/src/components/DataGridHeader/DataGridHeader.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { DataGridHeader } from './DataGridHeader';
import { isConformant } from '../../testing/isConformant';
-import { DataGridHeaderProps } from './DataGridHeader.types';
+import type { DataGridHeaderProps } from './DataGridHeader.types';
describe('DataGridHeader', () => {
isConformant({
diff --git a/packages/react-components/react-table/library/src/components/DataGridHeader/DataGridHeader.types.ts b/packages/react-components/react-table/library/src/components/DataGridHeader/DataGridHeader.types.ts
index cca9fd6ea9444..f4babd189ba1b 100644
--- a/packages/react-components/react-table/library/src/components/DataGridHeader/DataGridHeader.types.ts
+++ b/packages/react-components/react-table/library/src/components/DataGridHeader/DataGridHeader.types.ts
@@ -1,4 +1,4 @@
-import { TableHeaderProps, TableHeaderSlots, TableHeaderState } from '../TableHeader/TableHeader.types';
+import type { TableHeaderProps, TableHeaderSlots, TableHeaderState } from '../TableHeader/TableHeader.types';
export type DataGridHeaderSlots = TableHeaderSlots;
diff --git a/packages/react-components/react-table/library/src/components/DataGridHeader/useDataGridHeader.ts b/packages/react-components/react-table/library/src/components/DataGridHeader/useDataGridHeader.ts
index 2253cdde590c9..a5dbec5919325 100644
--- a/packages/react-components/react-table/library/src/components/DataGridHeader/useDataGridHeader.ts
+++ b/packages/react-components/react-table/library/src/components/DataGridHeader/useDataGridHeader.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import type { DataGridHeaderProps, DataGridHeaderState } from './DataGridHeader.types';
import { useTableHeader_unstable } from '../TableHeader/useTableHeader';
diff --git a/packages/react-components/react-table/library/src/components/DataGridHeaderCell/DataGridHeaderCell.test.tsx b/packages/react-components/react-table/library/src/components/DataGridHeaderCell/DataGridHeaderCell.test.tsx
index 140c37d3a22b1..5c822b005de6c 100644
--- a/packages/react-components/react-table/library/src/components/DataGridHeaderCell/DataGridHeaderCell.test.tsx
+++ b/packages/react-components/react-table/library/src/components/DataGridHeaderCell/DataGridHeaderCell.test.tsx
@@ -2,13 +2,13 @@ import * as React from 'react';
import { fireEvent, render } from '@testing-library/react';
import { DataGridHeaderCell } from './DataGridHeaderCell';
import { isConformant } from '../../testing/isConformant';
-import { DataGridHeaderCellProps } from './DataGridHeaderCell.types';
+import type { DataGridHeaderCellProps } from './DataGridHeaderCell.types';
import { DataGridContextProvider } from '../../contexts/dataGridContext';
import { mockDataGridContext } from '../../testing/mockDataGridContext';
import { TableContextProvider } from '../../contexts/tableContext';
import { ColumnIdContextProvider } from '../../contexts/columnIdContext';
-import { DataGridContextValue } from '../DataGrid/DataGrid.types';
-import { TableSelectionState, TableSortState } from '../../hooks/types';
+import type { DataGridContextValue } from '../DataGrid/DataGrid.types';
+import type { TableSelectionState, TableSortState } from '../../hooks/types';
describe('DataGridHeaderCell', () => {
isConformant({
diff --git a/packages/react-components/react-table/library/src/components/DataGridHeaderCell/DataGridHeaderCell.types.ts b/packages/react-components/react-table/library/src/components/DataGridHeaderCell/DataGridHeaderCell.types.ts
index 64b4ac7ed8485..b9fbbc39ddb10 100644
--- a/packages/react-components/react-table/library/src/components/DataGridHeaderCell/DataGridHeaderCell.types.ts
+++ b/packages/react-components/react-table/library/src/components/DataGridHeaderCell/DataGridHeaderCell.types.ts
@@ -1,10 +1,10 @@
-import {
+import type {
TableHeaderCellProps,
TableHeaderCellSlots,
TableHeaderCellState,
} from '../TableHeaderCell/TableHeaderCell.types';
-import { DataGridCellProps } from '../DataGridCell/DataGridCell.types';
+import type { DataGridCellProps } from '../DataGridCell/DataGridCell.types';
export type DataGridHeaderCellSlots = TableHeaderCellSlots;
diff --git a/packages/react-components/react-table/library/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts b/packages/react-components/react-table/library/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts
index 9dda915a5e85d..bdc5c8eccdb5b 100644
--- a/packages/react-components/react-table/library/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts
+++ b/packages/react-components/react-table/library/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useFocusableGroup } from '@fluentui/react-tabster';
import { useEventCallback } from '@fluentui/react-utilities';
import type { DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGridHeaderCell.types';
diff --git a/packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.test.tsx b/packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.test.tsx
index 2bff17eac9a8b..2e3b414f5ae9f 100644
--- a/packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.test.tsx
+++ b/packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { fireEvent, render, createEvent } from '@testing-library/react';
import { DataGridRow } from './DataGridRow';
import { isConformant } from '../../testing/isConformant';
-import { DataGridRowProps } from './DataGridRow.types';
+import type { DataGridRowProps } from './DataGridRow.types';
import { mockDataGridContext } from '../../testing/mockDataGridContext';
import { DataGridContextProvider } from '../../contexts/dataGridContext';
import { useColumnIdContext } from '../../contexts/columnIdContext';
diff --git a/packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.types.ts b/packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.types.ts
index 0e41270ef47de..c637bf550e5f2 100644
--- a/packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.types.ts
+++ b/packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.types.ts
@@ -1,7 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type { TableColumnDefinition } from '../../hooks';
-import { DataGridContextValue } from '../DataGrid/DataGrid.types';
+import type { DataGridContextValue } from '../DataGrid/DataGrid.types';
import type { TableRowProps, TableRowSlots, TableRowState } from '../TableRow/TableRow.types';
import type { TableSelectionCell } from '../TableSelectionCell/TableSelectionCell';
diff --git a/packages/react-components/react-table/library/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx b/packages/react-components/react-table/library/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx
index ce3d95306d068..2cc3727c88860 100644
--- a/packages/react-components/react-table/library/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx
+++ b/packages/react-components/react-table/library/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { fireEvent, render } from '@testing-library/react';
import { DataGridSelectionCell } from './DataGridSelectionCell';
import { isConformant } from '../../testing/isConformant';
-import { DataGridSelectionCellProps } from '../../../dist/index';
+import type { DataGridSelectionCellProps } from '../../../dist/index';
import { dataGridSelectionCellClassNames } from './useDataGridSelectionCellStyles.styles';
import { mockDataGridContext } from '../../testing/mockDataGridContext';
import { DataGridContextProvider } from '../../contexts/dataGridContext';
diff --git a/packages/react-components/react-table/library/src/components/DataGridSelectionCell/DataGridSelectionCell.types.ts b/packages/react-components/react-table/library/src/components/DataGridSelectionCell/DataGridSelectionCell.types.ts
index 95f9fa2703c9e..e7f75641d9f97 100644
--- a/packages/react-components/react-table/library/src/components/DataGridSelectionCell/DataGridSelectionCell.types.ts
+++ b/packages/react-components/react-table/library/src/components/DataGridSelectionCell/DataGridSelectionCell.types.ts
@@ -1,4 +1,4 @@
-import {
+import type {
TableSelectionCellProps,
TableSelectionCellSlots,
TableSelectionCellState,
diff --git a/packages/react-components/react-table/library/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts b/packages/react-components/react-table/library/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts
index 8a3bbc84b9af6..4b53268bf5eab 100644
--- a/packages/react-components/react-table/library/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts
+++ b/packages/react-components/react-table/library/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useEventCallback } from '@fluentui/react-utilities';
import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
import { useTableRowIdContext } from '../../contexts/rowIdContext';
diff --git a/packages/react-components/react-table/library/src/components/Table/Table.test.tsx b/packages/react-components/react-table/library/src/components/Table/Table.test.tsx
index 24331f7f7c531..10e32a5f39fae 100644
--- a/packages/react-components/react-table/library/src/components/Table/Table.test.tsx
+++ b/packages/react-components/react-table/library/src/components/Table/Table.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { Table } from './Table';
import { isConformant } from '../../testing/isConformant';
-import { TableProps } from './Table.types';
+import type { TableProps } from './Table.types';
import { TableRow } from '../TableRow/TableRow';
import { TableCell } from '../TableCell/TableCell';
import { TableBody } from '../TableBody/TableBody';
diff --git a/packages/react-components/react-table/library/src/components/Table/useTable.ts b/packages/react-components/react-table/library/src/components/Table/useTable.ts
index 9fe0d006f738a..309828ca7f66d 100644
--- a/packages/react-components/react-table/library/src/components/Table/useTable.ts
+++ b/packages/react-components/react-table/library/src/components/Table/useTable.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { TableProps, TableState } from './Table.types';
diff --git a/packages/react-components/react-table/library/src/components/Table/useTableContextValues.ts b/packages/react-components/react-table/library/src/components/Table/useTableContextValues.ts
index 2ff50a949c096..4a11e2563230b 100644
--- a/packages/react-components/react-table/library/src/components/Table/useTableContextValues.ts
+++ b/packages/react-components/react-table/library/src/components/Table/useTableContextValues.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { TableContextValues, TableState } from './Table.types';
+import type { TableContextValues, TableState } from './Table.types';
export function useTableContextValues_unstable(state: TableState): TableContextValues {
const { size, noNativeElements, sortable } = state;
diff --git a/packages/react-components/react-table/library/src/components/TableBody/TableBody.test.tsx b/packages/react-components/react-table/library/src/components/TableBody/TableBody.test.tsx
index b94ea85251060..bab574dd87b04 100644
--- a/packages/react-components/react-table/library/src/components/TableBody/TableBody.test.tsx
+++ b/packages/react-components/react-table/library/src/components/TableBody/TableBody.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { TableBody } from './TableBody';
import { isConformant } from '../../testing/isConformant';
-import { TableBodyProps } from './TableBody.types';
+import type { TableBodyProps } from './TableBody.types';
import { tableContextDefaultValue, TableContextProvider } from '../../contexts/tableContext';
const table = document.createElement('table');
diff --git a/packages/react-components/react-table/library/src/components/TableBody/TableBody.types.ts b/packages/react-components/react-table/library/src/components/TableBody/TableBody.types.ts
index 4befd3991eff8..263c0ba2ca8fb 100644
--- a/packages/react-components/react-table/library/src/components/TableBody/TableBody.types.ts
+++ b/packages/react-components/react-table/library/src/components/TableBody/TableBody.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { TableContextValue } from '../Table/Table.types';
+import type { TableContextValue } from '../Table/Table.types';
export type TableBodySlots = {
root: Slot<'tbody', 'div'>;
diff --git a/packages/react-components/react-table/library/src/components/TableBody/useTableBody.ts b/packages/react-components/react-table/library/src/components/TableBody/useTableBody.ts
index 5f8d886ad2551..22370272cdf31 100644
--- a/packages/react-components/react-table/library/src/components/TableBody/useTableBody.ts
+++ b/packages/react-components/react-table/library/src/components/TableBody/useTableBody.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { TableBodyProps, TableBodyState } from './TableBody.types';
import { useTableContext } from '../../contexts/tableContext';
diff --git a/packages/react-components/react-table/library/src/components/TableCell/TableCell.test.tsx b/packages/react-components/react-table/library/src/components/TableCell/TableCell.test.tsx
index 181b27748ac5a..e8e8e9069a184 100644
--- a/packages/react-components/react-table/library/src/components/TableCell/TableCell.test.tsx
+++ b/packages/react-components/react-table/library/src/components/TableCell/TableCell.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { TableCell } from './TableCell';
import { isConformant } from '../../testing/isConformant';
-import { TableCellProps } from './TableCell.types';
+import type { TableCellProps } from './TableCell.types';
import { TableContextProvider, tableContextDefaultValue } from '../../contexts/tableContext';
const tr = document.createElement('tr');
diff --git a/packages/react-components/react-table/library/src/components/TableCell/TableCell.types.ts b/packages/react-components/react-table/library/src/components/TableCell/TableCell.types.ts
index 4357f96f4c9b6..9806fbcba50ad 100644
--- a/packages/react-components/react-table/library/src/components/TableCell/TableCell.types.ts
+++ b/packages/react-components/react-table/library/src/components/TableCell/TableCell.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { TableContextValue } from '../Table/Table.types';
+import type { TableContextValue } from '../Table/Table.types';
export type TableCellSlots = {
root: Slot<'td', 'div'>;
diff --git a/packages/react-components/react-table/library/src/components/TableCell/useTableCell.ts b/packages/react-components/react-table/library/src/components/TableCell/useTableCell.ts
index bf16f9aa11519..57b3b8636faa3 100644
--- a/packages/react-components/react-table/library/src/components/TableCell/useTableCell.ts
+++ b/packages/react-components/react-table/library/src/components/TableCell/useTableCell.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { TableCellProps, TableCellState } from './TableCell.types';
import { useTableContext } from '../../contexts/tableContext';
diff --git a/packages/react-components/react-table/library/src/components/TableCellActions/useTableCellActions.ts b/packages/react-components/react-table/library/src/components/TableCellActions/useTableCellActions.ts
index 059b010435dc6..de79abc5de6d8 100644
--- a/packages/react-components/react-table/library/src/components/TableCellActions/useTableCellActions.ts
+++ b/packages/react-components/react-table/library/src/components/TableCellActions/useTableCellActions.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { TableCellActionsProps, TableCellActionsState } from './TableCellActions.types';
diff --git a/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.test.tsx b/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.test.tsx
index 5484e17c49fa9..a79fccd4a8ecf 100644
--- a/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.test.tsx
+++ b/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { TableCellLayout } from './TableCellLayout';
import { isConformant } from '../../testing/isConformant';
-import { TableCellLayoutProps } from './TableCellLayout.types';
+import type { TableCellLayoutProps } from './TableCellLayout.types';
describe('TableCellLayout', () => {
isConformant({
diff --git a/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.types.ts b/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.types.ts
index 067c5ec8d81ce..0c401e0708a65 100644
--- a/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.types.ts
+++ b/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.types.ts
@@ -1,6 +1,6 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type { AvatarSize } from '@fluentui/react-avatar';
-import { TableContextValue } from '../Table/Table.types';
+import type { TableContextValue } from '../Table/Table.types';
export type TableCellLayoutContextValues = {
avatar: {
diff --git a/packages/react-components/react-table/library/src/components/TableCellLayout/useTableCellLayout.ts b/packages/react-components/react-table/library/src/components/TableCellLayout/useTableCellLayout.ts
index c27819097bea3..c876001951711 100644
--- a/packages/react-components/react-table/library/src/components/TableCellLayout/useTableCellLayout.ts
+++ b/packages/react-components/react-table/library/src/components/TableCellLayout/useTableCellLayout.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { TableCellLayoutProps, TableCellLayoutState } from './TableCellLayout.types';
import { useTableContext } from '../../contexts/tableContext';
diff --git a/packages/react-components/react-table/library/src/components/TableHeader/TableHeader.test.tsx b/packages/react-components/react-table/library/src/components/TableHeader/TableHeader.test.tsx
index 18ec788b39814..40c8ba48ed222 100644
--- a/packages/react-components/react-table/library/src/components/TableHeader/TableHeader.test.tsx
+++ b/packages/react-components/react-table/library/src/components/TableHeader/TableHeader.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { TableHeader } from './TableHeader';
import { isConformant } from '../../testing/isConformant';
-import { TableHeaderProps } from './TableHeader.types';
+import type { TableHeaderProps } from './TableHeader.types';
import { TableContextProvider, tableContextDefaultValue } from '../../contexts/tableContext';
describe('TableHeader', () => {
diff --git a/packages/react-components/react-table/library/src/components/TableHeader/TableHeader.types.ts b/packages/react-components/react-table/library/src/components/TableHeader/TableHeader.types.ts
index fec5d88011fea..4ceaacfcc7779 100644
--- a/packages/react-components/react-table/library/src/components/TableHeader/TableHeader.types.ts
+++ b/packages/react-components/react-table/library/src/components/TableHeader/TableHeader.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { TableContextValue } from '../Table/Table.types';
+import type { TableContextValue } from '../Table/Table.types';
export type TableHeaderSlots = {
root: Slot<'thead', 'div'>;
diff --git a/packages/react-components/react-table/library/src/components/TableHeader/useTableHeader.ts b/packages/react-components/react-table/library/src/components/TableHeader/useTableHeader.ts
index 68638ad149897..32fecaf4e6cc3 100644
--- a/packages/react-components/react-table/library/src/components/TableHeader/useTableHeader.ts
+++ b/packages/react-components/react-table/library/src/components/TableHeader/useTableHeader.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { TableHeaderProps, TableHeaderState } from './TableHeader.types';
import { useTableContext } from '../../contexts/tableContext';
diff --git a/packages/react-components/react-table/library/src/components/TableHeaderCell/TableHeaderCell.test.tsx b/packages/react-components/react-table/library/src/components/TableHeaderCell/TableHeaderCell.test.tsx
index 8dd02d432f961..9ce4847f53d40 100644
--- a/packages/react-components/react-table/library/src/components/TableHeaderCell/TableHeaderCell.test.tsx
+++ b/packages/react-components/react-table/library/src/components/TableHeaderCell/TableHeaderCell.test.tsx
@@ -2,9 +2,9 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { TableHeaderCell } from './TableHeaderCell';
import { isConformant } from '../../testing/isConformant';
-import { TableHeaderCellProps } from './TableHeaderCell.types';
+import type { TableHeaderCellProps } from './TableHeaderCell.types';
import { TableContextProvider, tableContextDefaultValue } from '../../contexts/tableContext';
-import { SortDirection } from '../Table/Table.types';
+import type { SortDirection } from '../Table/Table.types';
describe('TableHeaderCell', () => {
const tr = document.createElement('tr');
diff --git a/packages/react-components/react-table/library/src/components/TableHeaderCell/TableHeaderCell.types.ts b/packages/react-components/react-table/library/src/components/TableHeaderCell/TableHeaderCell.types.ts
index f421d5abdc06e..265e814291abb 100644
--- a/packages/react-components/react-table/library/src/components/TableHeaderCell/TableHeaderCell.types.ts
+++ b/packages/react-components/react-table/library/src/components/TableHeaderCell/TableHeaderCell.types.ts
@@ -1,6 +1,6 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { ARIAButtonSlotProps } from '@fluentui/react-aria';
-import { SortDirection, TableContextValue } from '../Table/Table.types';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import type { SortDirection, TableContextValue } from '../Table/Table.types';
export type TableHeaderCellSlots = {
root: Slot<'th', 'div'>;
diff --git a/packages/react-components/react-table/library/src/components/TableHeaderCell/useTableHeaderCell.tsx b/packages/react-components/react-table/library/src/components/TableHeaderCell/useTableHeaderCell.tsx
index 77bb9724cb956..1e4ffa7eacbdc 100644
--- a/packages/react-components/react-table/library/src/components/TableHeaderCell/useTableHeaderCell.tsx
+++ b/packages/react-components/react-table/library/src/components/TableHeaderCell/useTableHeaderCell.tsx
@@ -4,7 +4,8 @@ import * as React from 'react';
import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
import { useFocusWithin } from '@fluentui/react-tabster';
import { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';
-import { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import { useARIAButtonProps } from '@fluentui/react-aria';
import type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';
import { useTableContext } from '../../contexts/tableContext';
diff --git a/packages/react-components/react-table/library/src/components/TableResizeHandle/useTableResizeHandle.ts b/packages/react-components/react-table/library/src/components/TableResizeHandle/useTableResizeHandle.ts
index 003a9abd7be16..db9f7214b50d7 100644
--- a/packages/react-components/react-table/library/src/components/TableResizeHandle/useTableResizeHandle.ts
+++ b/packages/react-components/react-table/library/src/components/TableResizeHandle/useTableResizeHandle.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';
import type { TableResizeHandleProps, TableResizeHandleState } from './TableResizeHandle.types';
diff --git a/packages/react-components/react-table/library/src/components/TableRow/TableRow.test.tsx b/packages/react-components/react-table/library/src/components/TableRow/TableRow.test.tsx
index 2e82a0a45242e..c8905aef94dae 100644
--- a/packages/react-components/react-table/library/src/components/TableRow/TableRow.test.tsx
+++ b/packages/react-components/react-table/library/src/components/TableRow/TableRow.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { TableRow } from './TableRow';
import { isConformant } from '../../testing/isConformant';
-import { TableRowProps } from './TableRow.types';
+import type { TableRowProps } from './TableRow.types';
import { TableContextProvider, tableContextDefaultValue } from '../../contexts/tableContext';
const tbody = document.createElement('tbody');
diff --git a/packages/react-components/react-table/library/src/components/TableRow/TableRow.types.ts b/packages/react-components/react-table/library/src/components/TableRow/TableRow.types.ts
index 83373b933e5e2..8c57a55604c72 100644
--- a/packages/react-components/react-table/library/src/components/TableRow/TableRow.types.ts
+++ b/packages/react-components/react-table/library/src/components/TableRow/TableRow.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { TableContextValue } from '../Table/Table.types';
+import type { TableContextValue } from '../Table/Table.types';
export type TableRowSlots = {
root: Slot<'tr', 'div'>;
diff --git a/packages/react-components/react-table/library/src/components/TableRow/useTableRow.ts b/packages/react-components/react-table/library/src/components/TableRow/useTableRow.ts
index d9feebfde3cca..573f5ece9d991 100644
--- a/packages/react-components/react-table/library/src/components/TableRow/useTableRow.ts
+++ b/packages/react-components/react-table/library/src/components/TableRow/useTableRow.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
import { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';
import type { TableRowProps, TableRowState } from './TableRow.types';
diff --git a/packages/react-components/react-table/library/src/components/TableSelectionCell/TableSelectionCell.test.tsx b/packages/react-components/react-table/library/src/components/TableSelectionCell/TableSelectionCell.test.tsx
index 9f118a3dcdd4b..c966e5c2b0581 100644
--- a/packages/react-components/react-table/library/src/components/TableSelectionCell/TableSelectionCell.test.tsx
+++ b/packages/react-components/react-table/library/src/components/TableSelectionCell/TableSelectionCell.test.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
import { resetIdsForTests } from '@fluentui/react-utilities';
import { TableSelectionCell } from './TableSelectionCell';
import { isConformant } from '../../testing/isConformant';
-import { TableSelectionCellProps } from './TableSelectionCell.types';
+import type { TableSelectionCellProps } from './TableSelectionCell.types';
import { tableContextDefaultValue, TableContextProvider } from '../../contexts/tableContext';
import { tableSelectionCellClassNames } from './useTableSelectionCellStyles.styles';
diff --git a/packages/react-components/react-table/library/src/components/TableSelectionCell/TableSelectionCell.types.ts b/packages/react-components/react-table/library/src/components/TableSelectionCell/TableSelectionCell.types.ts
index 1acfdb7dea084..4dfe130a1605d 100644
--- a/packages/react-components/react-table/library/src/components/TableSelectionCell/TableSelectionCell.types.ts
+++ b/packages/react-components/react-table/library/src/components/TableSelectionCell/TableSelectionCell.types.ts
@@ -1,8 +1,8 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';
import type { Radio } from '@fluentui/react-radio';
-import { TableCellSlots } from '../TableCell/TableCell.types';
-import { TableContextValue } from '../Table/Table.types';
+import type { TableCellSlots } from '../TableCell/TableCell.types';
+import type { TableContextValue } from '../Table/Table.types';
export type TableSelectionCellSlots = {
/**
diff --git a/packages/react-components/react-table/library/src/components/TableSelectionCell/useTableSelectionCell.tsx b/packages/react-components/react-table/library/src/components/TableSelectionCell/useTableSelectionCell.tsx
index 85a4c583f0570..40aa3c68e6125 100644
--- a/packages/react-components/react-table/library/src/components/TableSelectionCell/useTableSelectionCell.tsx
+++ b/packages/react-components/react-table/library/src/components/TableSelectionCell/useTableSelectionCell.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useId, slot, useMergedRefs } from '@fluentui/react-utilities';
import { Checkbox } from '@fluentui/react-checkbox';
import { Radio } from '@fluentui/react-radio';
diff --git a/packages/react-components/react-table/library/src/contexts/dataGridContext.ts b/packages/react-components/react-table/library/src/contexts/dataGridContext.ts
index 69d1092fcac0d..7c9cdbaf6ddc5 100644
--- a/packages/react-components/react-table/library/src/contexts/dataGridContext.ts
+++ b/packages/react-components/react-table/library/src/contexts/dataGridContext.ts
@@ -2,8 +2,8 @@
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
import type { ContextSelector } from '@fluentui/react-context-selector';
-import { TabsterDOMAttribute } from '@fluentui/react-tabster';
-import { DataGridContextValue } from '../components/DataGrid/DataGrid.types';
+import type { TabsterDOMAttribute } from '@fluentui/react-tabster';
+import type { DataGridContextValue } from '../components/DataGrid/DataGrid.types';
import { defaultTableState } from '../hooks';
const dataGridContext = createContext(undefined);
diff --git a/packages/react-components/react-table/library/src/contexts/tableContext.ts b/packages/react-components/react-table/library/src/contexts/tableContext.ts
index 4d6371c923650..1d5703844294f 100644
--- a/packages/react-components/react-table/library/src/contexts/tableContext.ts
+++ b/packages/react-components/react-table/library/src/contexts/tableContext.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { TableContextValue } from '../components/Table/Table.types';
+import type { TableContextValue } from '../components/Table/Table.types';
const tableContext = React.createContext(undefined);
diff --git a/packages/react-components/react-table/library/src/hooks/createColumn.ts b/packages/react-components/react-table/library/src/hooks/createColumn.ts
index 6af5c77f5edcc..da1ee6c90716e 100644
--- a/packages/react-components/react-table/library/src/hooks/createColumn.ts
+++ b/packages/react-components/react-table/library/src/hooks/createColumn.ts
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { CreateTableColumnOptions, TableColumnId } from './types';
+import type * as React from 'react';
+import type { CreateTableColumnOptions, TableColumnId } from './types';
const defaultCompare = () => 0;
diff --git a/packages/react-components/react-table/library/src/hooks/types.ts b/packages/react-components/react-table/library/src/hooks/types.ts
index b1c1e1ba15d61..bebb822f3de23 100644
--- a/packages/react-components/react-table/library/src/hooks/types.ts
+++ b/packages/react-components/react-table/library/src/hooks/types.ts
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { SortDirection, TableProps } from '../components/Table/Table.types';
-import { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';
-import { SelectionMode } from '@fluentui/react-utilities';
+import type * as React from 'react';
+import type { SortDirection, TableProps } from '../components/Table/Table.types';
+import type { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';
+import type { SelectionMode } from '@fluentui/react-utilities';
export type TableRowId = string | number;
export type TableColumnId = string | number;
diff --git a/packages/react-components/react-table/library/src/hooks/useKeyboardResizing.ts b/packages/react-components/react-table/library/src/hooks/useKeyboardResizing.ts
index d2719cc3cbcca..31bc14bfe9fce 100644
--- a/packages/react-components/react-table/library/src/hooks/useKeyboardResizing.ts
+++ b/packages/react-components/react-table/library/src/hooks/useKeyboardResizing.ts
@@ -3,7 +3,7 @@
import * as React from 'react';
import { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';
import { useEventCallback } from '@fluentui/react-utilities';
-import { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';
+import type { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';
import { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';
const STEP = 20;
diff --git a/packages/react-components/react-table/library/src/hooks/useTableColumnResizeMouseHandler.ts b/packages/react-components/react-table/library/src/hooks/useTableColumnResizeMouseHandler.ts
index d64dcec4c0168..58d0a4ee7ac5e 100644
--- a/packages/react-components/react-table/library/src/hooks/useTableColumnResizeMouseHandler.ts
+++ b/packages/react-components/react-table/library/src/hooks/useTableColumnResizeMouseHandler.ts
@@ -1,16 +1,10 @@
'use client';
import * as React from 'react';
-import { TableColumnId, ColumnResizeState } from './types';
+import type { TableColumnId, ColumnResizeState } from './types';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import {
- NativeTouchOrMouseEvent,
- ReactTouchOrMouseEvent,
- getEventClientCoords,
- isMouseEvent,
- isTouchEvent,
- useAnimationFrame,
-} from '@fluentui/react-utilities';
+import type { NativeTouchOrMouseEvent, ReactTouchOrMouseEvent } from '@fluentui/react-utilities';
+import { getEventClientCoords, isMouseEvent, isTouchEvent, useAnimationFrame } from '@fluentui/react-utilities';
export function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState): {
getOnMouseDown: (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => void;
diff --git a/packages/react-components/react-table/library/src/hooks/useTableColumnResizeState.test.ts b/packages/react-components/react-table/library/src/hooks/useTableColumnResizeState.test.ts
index 493a91305f420..34f4ededd6c87 100644
--- a/packages/react-components/react-table/library/src/hooks/useTableColumnResizeState.test.ts
+++ b/packages/react-components/react-table/library/src/hooks/useTableColumnResizeState.test.ts
@@ -1,7 +1,8 @@
-import { RenderResult, act, renderHook } from '@testing-library/react-hooks';
+import type { RenderResult } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react-hooks';
import { createTableColumn } from './createColumn';
import { useTableColumnResizeState } from './useTableColumnResizeState';
-import { ColumnResizeState, TableColumnSizingOptions } from './types';
+import type { ColumnResizeState, TableColumnSizingOptions } from './types';
describe('useTableColumnResizeState', () => {
describe('default options', () => {
diff --git a/packages/react-components/react-table/library/src/hooks/useTableColumnResizeState.ts b/packages/react-components/react-table/library/src/hooks/useTableColumnResizeState.ts
index b4bbb457d4ba5..a50d665c02047 100644
--- a/packages/react-components/react-table/library/src/hooks/useTableColumnResizeState.ts
+++ b/packages/react-components/react-table/library/src/hooks/useTableColumnResizeState.ts
@@ -2,7 +2,7 @@
import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
import * as React from 'react';
-import {
+import type {
TableColumnDefinition,
TableColumnId,
ColumnResizeState,
diff --git a/packages/react-components/react-table/library/src/hooks/useTableColumnSizing.test.ts b/packages/react-components/react-table/library/src/hooks/useTableColumnSizing.test.ts
index 7934e2d488c9f..55cc18aa861ca 100644
--- a/packages/react-components/react-table/library/src/hooks/useTableColumnSizing.test.ts
+++ b/packages/react-components/react-table/library/src/hooks/useTableColumnSizing.test.ts
@@ -1,8 +1,9 @@
-import { RenderHookResult, renderHook } from '@testing-library/react-hooks';
+import type { RenderHookResult } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-hooks';
import { useTableColumnSizing_unstable as useTableColumnSizing } from './useTableColumnSizing';
import { createTableColumn } from './createColumn';
import { mockTableState } from '../testing/mockTableState';
-import { TableFeaturesState } from './types';
+import type { TableFeaturesState } from './types';
const mockColumnResizeState = {
getColumnWidth: jest.fn(),
diff --git a/packages/react-components/react-table/library/src/hooks/useTableColumnSizing.tsx b/packages/react-components/react-table/library/src/hooks/useTableColumnSizing.tsx
index ac1df89a913c4..b6e2a6978ce17 100644
--- a/packages/react-components/react-table/library/src/hooks/useTableColumnSizing.tsx
+++ b/packages/react-components/react-table/library/src/hooks/useTableColumnSizing.tsx
@@ -2,7 +2,7 @@
import * as React from 'react';
import { TableResizeHandle } from '../TableResizeHandle';
-import {
+import type {
ColumnWidthState,
EnableKeyboardModeOnChangeCallback,
TableColumnId,
diff --git a/packages/react-components/react-table/library/src/hooks/useTableCompositeNavigation.ts b/packages/react-components/react-table/library/src/hooks/useTableCompositeNavigation.ts
index 94105fca2f5e6..e0558ab97d2ea 100644
--- a/packages/react-components/react-table/library/src/hooks/useTableCompositeNavigation.ts
+++ b/packages/react-components/react-table/library/src/hooks/useTableCompositeNavigation.ts
@@ -3,11 +3,11 @@
import * as React from 'react';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { ArrowDown, ArrowRight, ArrowUp, ArrowLeft } from '@fluentui/keyboard-keys';
+import type { TabsterDOMAttribute } from '@fluentui/react-tabster';
import {
useArrowNavigationGroup,
useFocusableGroup,
useMergedTabsterAttributes_unstable,
- TabsterDOMAttribute,
useFocusFinders,
GroupperMoveFocusEvent,
MoverMoveFocusEvent,
diff --git a/packages/react-components/react-table/library/src/hooks/useTableSelection.ts b/packages/react-components/react-table/library/src/hooks/useTableSelection.ts
index 531f532e1cffe..6b086c0d19cd8 100644
--- a/packages/react-components/react-table/library/src/hooks/useTableSelection.ts
+++ b/packages/react-components/react-table/library/src/hooks/useTableSelection.ts
@@ -1,7 +1,8 @@
'use client';
import * as React from 'react';
-import { SelectionHookParams, useEventCallback, useSelection } from '@fluentui/react-utilities';
+import type { SelectionHookParams } from '@fluentui/react-utilities';
+import { useEventCallback, useSelection } from '@fluentui/react-utilities';
import type { TableRowId, TableSelectionState, TableFeaturesState } from './types';
const noop = (): void => undefined;
diff --git a/packages/react-components/react-table/library/src/hooks/useTableSort.test.ts b/packages/react-components/react-table/library/src/hooks/useTableSort.test.ts
index 8c50cc7de48c2..e981569207101 100644
--- a/packages/react-components/react-table/library/src/hooks/useTableSort.test.ts
+++ b/packages/react-components/react-table/library/src/hooks/useTableSort.test.ts
@@ -1,5 +1,5 @@
import { renderHook, act } from '@testing-library/react-hooks';
-import { TableColumnDefinition } from './types';
+import type { TableColumnDefinition } from './types';
import { useTableSortState } from './useTableSort';
import { mockTableState } from '../testing/mockTableState';
import { createTableColumn } from './createColumn';
diff --git a/packages/react-components/react-table/library/src/testing/mockDataGridContext.ts b/packages/react-components/react-table/library/src/testing/mockDataGridContext.ts
index 5f1d90655ec8d..2c43a744ccfe6 100644
--- a/packages/react-components/react-table/library/src/testing/mockDataGridContext.ts
+++ b/packages/react-components/react-table/library/src/testing/mockDataGridContext.ts
@@ -1,15 +1,13 @@
import * as React from 'react';
-import { DataGridContextValue } from '../components/DataGrid/DataGrid.types';
+import type { DataGridContextValue } from '../components/DataGrid/DataGrid.types';
+import type { TableColumnDefinition, TableSelectionState, TableSortState } from '../hooks';
import {
- TableColumnDefinition,
createTableColumn,
defaultTableSelectionState,
defaultTableSortState,
- TableSelectionState,
- TableSortState,
defaultColumnSizingState,
} from '../hooks';
-import { TabsterDOMAttribute } from '@fluentui/react-tabster';
+import type { TabsterDOMAttribute } from '@fluentui/react-tabster';
interface Item {
first: string;
diff --git a/packages/react-components/react-table/library/src/testing/mockSyntheticEvent.ts b/packages/react-components/react-table/library/src/testing/mockSyntheticEvent.ts
index b728fb1a2a55e..afc5f996d672d 100644
--- a/packages/react-components/react-table/library/src/testing/mockSyntheticEvent.ts
+++ b/packages/react-components/react-table/library/src/testing/mockSyntheticEvent.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
export function mockSyntheticEvent(): React.SyntheticEvent {
return {} as unknown as React.SyntheticEvent;
diff --git a/packages/react-components/react-table/library/src/testing/mockTableState.ts b/packages/react-components/react-table/library/src/testing/mockTableState.ts
index 38498d3c79d52..e7edbe89ddc94 100644
--- a/packages/react-components/react-table/library/src/testing/mockTableState.ts
+++ b/packages/react-components/react-table/library/src/testing/mockTableState.ts
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { TableFeaturesState, TableSortState, defaultColumnSizingState } from '../hooks';
+import type { TableFeaturesState, TableSortState } from '../hooks';
+import { defaultColumnSizingState } from '../hooks';
import { defaultTableSelectionState, defaultTableSortState } from '../hooks';
export const mockTableState = (
diff --git a/packages/react-components/react-table/library/src/utils/columnResizeUtils.test.ts b/packages/react-components/react-table/library/src/utils/columnResizeUtils.test.ts
index 04d90fe9ba26f..88563c5a970aa 100644
--- a/packages/react-components/react-table/library/src/utils/columnResizeUtils.test.ts
+++ b/packages/react-components/react-table/library/src/utils/columnResizeUtils.test.ts
@@ -1,5 +1,5 @@
import { createTableColumn } from '../hooks/createColumn';
-import { ColumnWidthState } from '../hooks/types';
+import type { ColumnWidthState } from '../hooks/types';
import {
adjustColumnWidthsToFitContainer,
columnDefinitionsToState,
diff --git a/packages/react-components/react-table/library/src/utils/columnResizeUtils.ts b/packages/react-components/react-table/library/src/utils/columnResizeUtils.ts
index 0757218c0c2bd..4a0b31e1beff1 100644
--- a/packages/react-components/react-table/library/src/utils/columnResizeUtils.ts
+++ b/packages/react-components/react-table/library/src/utils/columnResizeUtils.ts
@@ -1,4 +1,4 @@
-import { TableColumnDefinition, ColumnWidthState, TableColumnId, TableColumnSizingOptions } from '../hooks';
+import type { TableColumnDefinition, ColumnWidthState, TableColumnId, TableColumnSizingOptions } from '../hooks';
const DEFAULT_WIDTH = 150;
const DEFAULT_MIN_WIDTH = 100;
diff --git a/packages/react-components/react-table/library/src/utils/isColumnSortable.ts b/packages/react-components/react-table/library/src/utils/isColumnSortable.ts
index 03474255ca10d..43a27284f873f 100644
--- a/packages/react-components/react-table/library/src/utils/isColumnSortable.ts
+++ b/packages/react-components/react-table/library/src/utils/isColumnSortable.ts
@@ -1,4 +1,4 @@
-import { TableColumnDefinition } from '../hooks/types';
+import type { TableColumnDefinition } from '../hooks/types';
export function isColumnSortable(column: TableColumnDefinition): boolean {
return column.compare.length > 0;
diff --git a/packages/react-components/react-table/stories/src/DataGrid/CompositeNavigation.stories.tsx b/packages/react-components/react-table/stories/src/DataGrid/CompositeNavigation.stories.tsx
index 2e89a5a2e3482..f4c0725236703 100644
--- a/packages/react-components/react-table/stories/src/DataGrid/CompositeNavigation.stories.tsx
+++ b/packages/react-components/react-table/stories/src/DataGrid/CompositeNavigation.stories.tsx
@@ -9,7 +9,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
DataGridBody,
DataGridRow,
@@ -18,10 +17,9 @@ import {
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
- TableColumnDefinition,
createTableColumn,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableColumnDefinition } from '@fluentui/react-components';
type FileCell = {
label: string;
diff --git a/packages/react-components/react-table/stories/src/DataGrid/CustomRowId.stories.tsx b/packages/react-components/react-table/stories/src/DataGrid/CustomRowId.stories.tsx
index 893859cf36bf8..dde863a4431b6 100644
--- a/packages/react-components/react-table/stories/src/DataGrid/CustomRowId.stories.tsx
+++ b/packages/react-components/react-table/stories/src/DataGrid/CustomRowId.stories.tsx
@@ -9,7 +9,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
Checkbox,
DataGridBody,
@@ -19,13 +18,16 @@ import {
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
+ createTableColumn,
+} from '@fluentui/react-components';
+import type {
+ JSXElement,
+ PresenceBadgeStatus,
TableColumnDefinition,
TableRowData,
- createTableColumn,
TableRowId,
DataGridProps,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
type FileCell = {
label: string;
diff --git a/packages/react-components/react-table/stories/src/DataGrid/Default.stories.tsx b/packages/react-components/react-table/stories/src/DataGrid/Default.stories.tsx
index 887b618d6f2af..99a75782ab50f 100644
--- a/packages/react-components/react-table/stories/src/DataGrid/Default.stories.tsx
+++ b/packages/react-components/react-table/stories/src/DataGrid/Default.stories.tsx
@@ -10,7 +10,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
DataGridBody,
DataGridRow,
@@ -19,10 +18,9 @@ import {
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
- TableColumnDefinition,
createTableColumn,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableColumnDefinition } from '@fluentui/react-components';
type FileCell = {
label: string;
diff --git a/packages/react-components/react-table/stories/src/DataGrid/FocusableElementsInCells.stories.tsx b/packages/react-components/react-table/stories/src/DataGrid/FocusableElementsInCells.stories.tsx
index 31929407d5e20..d65d1da0fe736 100644
--- a/packages/react-components/react-table/stories/src/DataGrid/FocusableElementsInCells.stories.tsx
+++ b/packages/react-components/react-table/stories/src/DataGrid/FocusableElementsInCells.stories.tsx
@@ -11,7 +11,6 @@ import {
DeleteRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
DataGridBody,
DataGridRow,
@@ -20,7 +19,6 @@ import {
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
- TableColumnDefinition,
createTableColumn,
Button,
Menu,
@@ -28,12 +26,16 @@ import {
MenuList,
MenuItem,
MenuPopover,
+} from '@fluentui/react-components';
+
+import type {
+ JSXElement,
+ PresenceBadgeStatus,
+ TableColumnDefinition,
TableColumnId,
DataGridCellFocusMode,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
-
type FileCell = {
label: string;
icon: JSXElement;
diff --git a/packages/react-components/react-table/stories/src/DataGrid/MultipleSelect.stories.tsx b/packages/react-components/react-table/stories/src/DataGrid/MultipleSelect.stories.tsx
index bd79c9166c3ee..159426c7eb60e 100644
--- a/packages/react-components/react-table/stories/src/DataGrid/MultipleSelect.stories.tsx
+++ b/packages/react-components/react-table/stories/src/DataGrid/MultipleSelect.stories.tsx
@@ -10,7 +10,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
DataGridBody,
DataGridRow,
@@ -19,11 +18,10 @@ import {
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
- TableColumnDefinition,
createTableColumn,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableColumnDefinition } from '@fluentui/react-components';
type FileCell = {
label: string;
diff --git a/packages/react-components/react-table/stories/src/DataGrid/MultipleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/src/DataGrid/MultipleSelectControlled.stories.tsx
index efd27d31ed232..dd92978a1add7 100644
--- a/packages/react-components/react-table/stories/src/DataGrid/MultipleSelectControlled.stories.tsx
+++ b/packages/react-components/react-table/stories/src/DataGrid/MultipleSelectControlled.stories.tsx
@@ -10,7 +10,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
DataGridBody,
DataGridRow,
@@ -19,14 +18,17 @@ import {
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
- TableColumnDefinition,
createTableColumn,
+} from '@fluentui/react-components';
+
+import type {
+ JSXElement,
+ PresenceBadgeStatus,
+ TableColumnDefinition,
TableRowId,
DataGridProps,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
-
type FileCell = {
label: string;
icon: JSXElement;
diff --git a/packages/react-components/react-table/stories/src/DataGrid/ResizableColumns.stories.tsx b/packages/react-components/react-table/stories/src/DataGrid/ResizableColumns.stories.tsx
index 491bdf647c9b2..c07aef3d6a855 100644
--- a/packages/react-components/react-table/stories/src/DataGrid/ResizableColumns.stories.tsx
+++ b/packages/react-components/react-table/stories/src/DataGrid/ResizableColumns.stories.tsx
@@ -10,7 +10,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
DataGrid,
DataGridBody,
@@ -19,7 +18,6 @@ import {
DataGridHeaderCell,
DataGridRow,
TableCellLayout,
- TableColumnDefinition,
createTableColumn,
Menu,
MenuList,
@@ -28,7 +26,7 @@ import {
MenuItem,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableColumnDefinition } from '@fluentui/react-components';
type FileCell = {
label: string;
diff --git a/packages/react-components/react-table/stories/src/DataGrid/ResizableColumnsDisableAutoFit.stories.tsx b/packages/react-components/react-table/stories/src/DataGrid/ResizableColumnsDisableAutoFit.stories.tsx
index 738db490d174a..f7da56d2dbc35 100644
--- a/packages/react-components/react-table/stories/src/DataGrid/ResizableColumnsDisableAutoFit.stories.tsx
+++ b/packages/react-components/react-table/stories/src/DataGrid/ResizableColumnsDisableAutoFit.stories.tsx
@@ -10,7 +10,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
DataGrid,
DataGridBody,
@@ -19,7 +18,6 @@ import {
DataGridHeaderCell,
DataGridRow,
TableCellLayout,
- TableColumnDefinition,
createTableColumn,
Menu,
MenuList,
@@ -28,7 +26,7 @@ import {
MenuItem,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableColumnDefinition } from '@fluentui/react-components';
type FileCell = {
label: string;
diff --git a/packages/react-components/react-table/stories/src/DataGrid/SelectionAppearance.stories.tsx b/packages/react-components/react-table/stories/src/DataGrid/SelectionAppearance.stories.tsx
index ab1675a6c4a11..5e17d8103992a 100644
--- a/packages/react-components/react-table/stories/src/DataGrid/SelectionAppearance.stories.tsx
+++ b/packages/react-components/react-table/stories/src/DataGrid/SelectionAppearance.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableColumnDefinition } from '@fluentui/react-components';
import {
FolderRegular,
EditRegular,
@@ -11,7 +11,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
DataGridBody,
DataGridRow,
@@ -20,7 +19,6 @@ import {
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
- TableColumnDefinition,
createTableColumn,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-table/stories/src/DataGrid/SingleSelect.stories.tsx b/packages/react-components/react-table/stories/src/DataGrid/SingleSelect.stories.tsx
index 641b09242fa12..3070bd8a0d9ac 100644
--- a/packages/react-components/react-table/stories/src/DataGrid/SingleSelect.stories.tsx
+++ b/packages/react-components/react-table/stories/src/DataGrid/SingleSelect.stories.tsx
@@ -10,7 +10,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
DataGridBody,
DataGridRow,
@@ -19,11 +18,10 @@ import {
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
- TableColumnDefinition,
createTableColumn,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableColumnDefinition } from '@fluentui/react-components';
type FileCell = {
label: string;
diff --git a/packages/react-components/react-table/stories/src/DataGrid/SingleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/src/DataGrid/SingleSelectControlled.stories.tsx
index a0ff114d27b4e..06ed059a4a777 100644
--- a/packages/react-components/react-table/stories/src/DataGrid/SingleSelectControlled.stories.tsx
+++ b/packages/react-components/react-table/stories/src/DataGrid/SingleSelectControlled.stories.tsx
@@ -10,7 +10,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
DataGridBody,
DataGridRow,
@@ -19,14 +18,17 @@ import {
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
- TableColumnDefinition,
createTableColumn,
+} from '@fluentui/react-components';
+
+import type {
+ JSXElement,
+ PresenceBadgeStatus,
+ TableColumnDefinition,
TableRowId,
DataGridProps,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
-
type FileCell = {
label: string;
icon: JSXElement;
diff --git a/packages/react-components/react-table/stories/src/DataGrid/Sort.stories.tsx b/packages/react-components/react-table/stories/src/DataGrid/Sort.stories.tsx
index 167fa27a5b14a..1b9cc9f3da1b0 100644
--- a/packages/react-components/react-table/stories/src/DataGrid/Sort.stories.tsx
+++ b/packages/react-components/react-table/stories/src/DataGrid/Sort.stories.tsx
@@ -10,21 +10,18 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
DataGridBody,
DataGridRow,
DataGrid,
- DataGridProps,
DataGridHeader,
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
- TableColumnDefinition,
createTableColumn,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, DataGridProps, TableColumnDefinition } from '@fluentui/react-components';
type FileCell = {
label: string;
diff --git a/packages/react-components/react-table/stories/src/DataGrid/SortControlled.stories.tsx b/packages/react-components/react-table/stories/src/DataGrid/SortControlled.stories.tsx
index 49e91f19755d5..ab093846d3299 100644
--- a/packages/react-components/react-table/stories/src/DataGrid/SortControlled.stories.tsx
+++ b/packages/react-components/react-table/stories/src/DataGrid/SortControlled.stories.tsx
@@ -10,7 +10,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
DataGridBody,
DataGridRow,
@@ -19,12 +18,10 @@ import {
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
- TableColumnDefinition,
createTableColumn,
- DataGridProps,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableColumnDefinition, DataGridProps } from '@fluentui/react-components';
type FileCell = {
label: string;
diff --git a/packages/react-components/react-table/stories/src/DataGrid/SubtleSelection.stories.tsx b/packages/react-components/react-table/stories/src/DataGrid/SubtleSelection.stories.tsx
index 50adc6b50cd26..6866c397e4a50 100644
--- a/packages/react-components/react-table/stories/src/DataGrid/SubtleSelection.stories.tsx
+++ b/packages/react-components/react-table/stories/src/DataGrid/SubtleSelection.stories.tsx
@@ -10,7 +10,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
DataGridBody,
DataGridRow,
@@ -19,11 +18,10 @@ import {
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
- TableColumnDefinition,
createTableColumn,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableColumnDefinition } from '@fluentui/react-components';
type FileCell = {
label: string;
diff --git a/packages/react-components/react-table/stories/src/Table/CellActions.stories.tsx b/packages/react-components/react-table/stories/src/Table/CellActions.stories.tsx
index 74694e3948071..fa53d54b2ac70 100644
--- a/packages/react-components/react-table/stories/src/Table/CellActions.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/CellActions.stories.tsx
@@ -22,11 +22,10 @@ import {
TableHeaderCell,
TableCellActions,
TableCellLayout,
- PresenceBadgeStatus,
Avatar,
Button,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus } from '@fluentui/react-components';
const EditIcon = bundleIcon(EditFilled, EditRegular);
const MoreHorizontalIcon = bundleIcon(MoreHorizontalFilled, MoreHorizontalRegular);
diff --git a/packages/react-components/react-table/stories/src/Table/CellNavigation.stories.tsx b/packages/react-components/react-table/stories/src/Table/CellNavigation.stories.tsx
index 32dcee3f971a3..acbe4261646a8 100644
--- a/packages/react-components/react-table/stories/src/Table/CellNavigation.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/CellNavigation.stories.tsx
@@ -17,12 +17,11 @@ import {
TableHeader,
TableHeaderCell,
TableCellLayout,
- PresenceBadgeStatus,
Avatar,
Button,
useArrowNavigationGroup,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus } from '@fluentui/react-components';
const items = [
{
diff --git a/packages/react-components/react-table/stories/src/Table/CompositeNavigation.stories.tsx b/packages/react-components/react-table/stories/src/Table/CompositeNavigation.stories.tsx
index c23411a5a4bc7..c1b712b718cda 100644
--- a/packages/react-components/react-table/stories/src/Table/CompositeNavigation.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/CompositeNavigation.stories.tsx
@@ -10,7 +10,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
TableBody,
TableCell,
@@ -21,7 +20,7 @@ import {
TableCellLayout,
useTableCompositeNavigation,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus } from '@fluentui/react-components';
const items = [
{
diff --git a/packages/react-components/react-table/stories/src/Table/DataGrid.stories.tsx b/packages/react-components/react-table/stories/src/Table/DataGrid.stories.tsx
index c7eba6f9c3f5b..cb43053626bd0 100644
--- a/packages/react-components/react-table/stories/src/Table/DataGrid.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/DataGrid.stories.tsx
@@ -19,17 +19,14 @@ import {
TableSelectionCell,
TableCellLayout,
useTableFeatures,
- TableColumnDefinition,
useTableSelection,
useTableSort,
createTableColumn,
- TableColumnId,
- PresenceBadgeStatus,
Avatar,
useArrowNavigationGroup,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TableColumnDefinition, TableColumnId, PresenceBadgeStatus } from '@fluentui/react-components';
type FileCell = {
label: string;
diff --git a/packages/react-components/react-table/stories/src/Table/Default.stories.tsx b/packages/react-components/react-table/stories/src/Table/Default.stories.tsx
index 29867480b4919..b0f720823e715 100644
--- a/packages/react-components/react-table/stories/src/Table/Default.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/Default.stories.tsx
@@ -17,10 +17,9 @@ import {
TableHeader,
TableHeaderCell,
TableCellLayout,
- PresenceBadgeStatus,
Avatar,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus } from '@fluentui/react-components';
const items = [
{
diff --git a/packages/react-components/react-table/stories/src/Table/FocusableElements.Cells.stories.tsx b/packages/react-components/react-table/stories/src/Table/FocusableElements.Cells.stories.tsx
index 1eda7be3755f3..7a7c7374a2428 100644
--- a/packages/react-components/react-table/stories/src/Table/FocusableElements.Cells.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/FocusableElements.Cells.stories.tsx
@@ -18,13 +18,12 @@ import {
TableHeader,
TableHeaderCell,
TableCellLayout,
- PresenceBadgeStatus,
Avatar,
Button,
useArrowNavigationGroup,
useFocusableGroup,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus } from '@fluentui/react-components';
const items = [
{
diff --git a/packages/react-components/react-table/stories/src/Table/Memoization.stories.tsx b/packages/react-components/react-table/stories/src/Table/Memoization.stories.tsx
index 28e6f68fa8cd7..f2becb0084d88 100644
--- a/packages/react-components/react-table/stories/src/Table/Memoization.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/Memoization.stories.tsx
@@ -1,6 +1,14 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type {
+ JSXElement,
+ PresenceBadgeStatus,
+ TableColumnDefinition,
+ TableColumnId,
+ TableRowId,
+ TableRowProps,
+ TableSelectionState,
+} from '@fluentui/react-components';
import {
FolderRegular,
EditRegular,
@@ -11,7 +19,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
useArrowNavigationGroup,
TableBody,
@@ -23,14 +30,9 @@ import {
TableSelectionCell,
TableCellLayout,
useTableFeatures,
- TableColumnDefinition,
useTableSelection,
useTableSort,
createTableColumn,
- TableColumnId,
- TableRowId,
- TableRowProps,
- TableSelectionState,
} from '@fluentui/react-components';
type FileCell = {
diff --git a/packages/react-components/react-table/stories/src/Table/MultipleSelect.stories.tsx b/packages/react-components/react-table/stories/src/Table/MultipleSelect.stories.tsx
index 9353b11b1b78e..b4b4cd9ad3f79 100644
--- a/packages/react-components/react-table/stories/src/Table/MultipleSelect.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/MultipleSelect.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableColumnDefinition } from '@fluentui/react-components';
import {
FolderRegular,
EditRegular,
@@ -11,7 +11,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
TableBody,
TableCell,
@@ -22,7 +21,6 @@ import {
TableSelectionCell,
TableCellLayout,
useTableFeatures,
- TableColumnDefinition,
useTableSelection,
createTableColumn,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-table/stories/src/Table/MultipleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/src/Table/MultipleSelectControlled.stories.tsx
index 500401ff2a259..10803da022e71 100644
--- a/packages/react-components/react-table/stories/src/Table/MultipleSelectControlled.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/MultipleSelectControlled.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableColumnDefinition, TableRowId } from '@fluentui/react-components';
import {
FolderRegular,
EditRegular,
@@ -11,7 +11,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
TableBody,
TableCell,
@@ -22,8 +21,6 @@ import {
TableSelectionCell,
TableCellLayout,
useTableFeatures,
- TableColumnDefinition,
- TableRowId,
useTableSelection,
createTableColumn,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-table/stories/src/Table/NonNativeElements.stories.tsx b/packages/react-components/react-table/stories/src/Table/NonNativeElements.stories.tsx
index 6105c158b6f5f..a3ece47d25fe1 100644
--- a/packages/react-components/react-table/stories/src/Table/NonNativeElements.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/NonNativeElements.stories.tsx
@@ -10,7 +10,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
TableBody,
TableCell,
@@ -20,7 +19,7 @@ import {
TableHeaderCell,
TableCellLayout,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus } from '@fluentui/react-components';
const items = [
{
diff --git a/packages/react-components/react-table/stories/src/Table/PrimaryCell.stories.tsx b/packages/react-components/react-table/stories/src/Table/PrimaryCell.stories.tsx
index ff53a7d2126ab..20dcb428790e2 100644
--- a/packages/react-components/react-table/stories/src/Table/PrimaryCell.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/PrimaryCell.stories.tsx
@@ -14,7 +14,6 @@ import {
bundleIcon,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
Button,
TableBody,
@@ -26,7 +25,7 @@ import {
TableCellActions,
TableCellLayout,
} from '@fluentui/react-components';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus } from '@fluentui/react-components';
const EditIcon = bundleIcon(EditFilled, EditRegular);
const MoreHorizontalIcon = bundleIcon(MoreHorizontalFilled, MoreHorizontalRegular);
diff --git a/packages/react-components/react-table/stories/src/Table/ResizableColumnsControlled.stories.tsx b/packages/react-components/react-table/stories/src/Table/ResizableColumnsControlled.stories.tsx
index 4f344ab665821..9ae6df6b0ce31 100644
--- a/packages/react-components/react-table/stories/src/Table/ResizableColumnsControlled.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/ResizableColumnsControlled.stories.tsx
@@ -1,7 +1,11 @@
-import type { JSXElement } from '@fluentui/react-components';
-import {
+import type {
+ JSXElement,
TableColumnDefinition,
TableColumnId,
+ TableColumnSizingOptions,
+ PresenceBadgeStatus,
+} from '@fluentui/react-components';
+import {
Table,
TableBody,
TableCell,
@@ -14,8 +18,6 @@ import {
useTableColumnSizing_unstable,
useTableFeatures,
useTableSort,
- TableColumnSizingOptions,
- PresenceBadgeStatus,
Avatar,
Button,
Input,
diff --git a/packages/react-components/react-table/stories/src/Table/ResizableColumnsDisableAutoFit.stories.tsx b/packages/react-components/react-table/stories/src/Table/ResizableColumnsDisableAutoFit.stories.tsx
index b428b5bea862a..c57531ec13ab3 100644
--- a/packages/react-components/react-table/stories/src/Table/ResizableColumnsDisableAutoFit.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/ResizableColumnsDisableAutoFit.stories.tsx
@@ -1,19 +1,17 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TableColumnDefinition, PresenceBadgeStatus } from '@fluentui/react-components';
import {
Table,
TableBody,
TableCell,
TableCellLayout,
- TableColumnDefinition,
TableHeader,
TableHeaderCell,
TableRow,
createTableColumn,
useTableColumnSizing_unstable,
useTableFeatures,
- PresenceBadgeStatus,
Avatar,
Menu,
MenuItem,
diff --git a/packages/react-components/react-table/stories/src/Table/ResizableColumnsUncontrolled.stories.tsx b/packages/react-components/react-table/stories/src/Table/ResizableColumnsUncontrolled.stories.tsx
index 693c5419dfaa2..4d1d431dd1def 100644
--- a/packages/react-components/react-table/stories/src/Table/ResizableColumnsUncontrolled.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/ResizableColumnsUncontrolled.stories.tsx
@@ -1,20 +1,22 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type {
+ JSXElement,
+ TableColumnDefinition,
+ TableColumnSizingOptions,
+ PresenceBadgeStatus,
+} from '@fluentui/react-components';
import {
Table,
TableBody,
TableCell,
TableCellLayout,
- TableColumnDefinition,
- TableColumnSizingOptions,
TableHeader,
TableHeaderCell,
TableRow,
createTableColumn,
useTableColumnSizing_unstable,
useTableFeatures,
- PresenceBadgeStatus,
Avatar,
Input,
useId,
diff --git a/packages/react-components/react-table/stories/src/Table/SelectionWithCellActions.stories.tsx b/packages/react-components/react-table/stories/src/Table/SelectionWithCellActions.stories.tsx
index 89e3077d7e437..5bf0f794b47aa 100644
--- a/packages/react-components/react-table/stories/src/Table/SelectionWithCellActions.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/SelectionWithCellActions.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableColumnDefinition } from '@fluentui/react-components';
import {
FolderRegular,
EditRegular,
@@ -15,7 +15,6 @@ import {
bundleIcon,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
Button,
TableBody,
@@ -27,7 +26,6 @@ import {
TableSelectionCell,
TableCellLayout,
useTableFeatures,
- TableColumnDefinition,
useTableSelection,
createTableColumn,
TableCellActions,
diff --git a/packages/react-components/react-table/stories/src/Table/SingleSelect.stories.tsx b/packages/react-components/react-table/stories/src/Table/SingleSelect.stories.tsx
index 54a6d8f902a41..929b582e3e16a 100644
--- a/packages/react-components/react-table/stories/src/Table/SingleSelect.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/SingleSelect.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableColumnDefinition } from '@fluentui/react-components';
import {
FolderRegular,
EditRegular,
@@ -11,7 +11,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
TableBody,
TableCell,
@@ -21,7 +20,6 @@ import {
TableHeaderCell,
TableSelectionCell,
useTableFeatures,
- TableColumnDefinition,
useTableSelection,
TableCellLayout,
createTableColumn,
diff --git a/packages/react-components/react-table/stories/src/Table/SingleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/src/Table/SingleSelectControlled.stories.tsx
index 0ed7b00858fb8..42a44bed676be 100644
--- a/packages/react-components/react-table/stories/src/Table/SingleSelectControlled.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/SingleSelectControlled.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableColumnDefinition, TableRowId } from '@fluentui/react-components';
import {
FolderRegular,
EditRegular,
@@ -11,7 +11,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
TableBody,
TableCell,
@@ -21,8 +20,6 @@ import {
TableHeaderCell,
TableSelectionCell,
useTableFeatures,
- TableColumnDefinition,
- TableRowId,
useTableSelection,
TableCellLayout,
createTableColumn,
diff --git a/packages/react-components/react-table/stories/src/Table/Sort.stories.tsx b/packages/react-components/react-table/stories/src/Table/Sort.stories.tsx
index bdf46d92d563a..61417f00ba887 100644
--- a/packages/react-components/react-table/stories/src/Table/Sort.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/Sort.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableColumnDefinition, TableColumnId } from '@fluentui/react-components';
import {
FolderRegular,
EditRegular,
@@ -11,7 +11,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
TableBody,
TableCell,
@@ -20,8 +19,6 @@ import {
TableHeader,
TableHeaderCell,
useTableFeatures,
- TableColumnDefinition,
- TableColumnId,
useTableSort,
TableCellLayout,
createTableColumn,
diff --git a/packages/react-components/react-table/stories/src/Table/SortControlled.stories.tsx b/packages/react-components/react-table/stories/src/Table/SortControlled.stories.tsx
index 7878a2e4420ec..906148607b79a 100644
--- a/packages/react-components/react-table/stories/src/Table/SortControlled.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/SortControlled.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableColumnDefinition, TableColumnId } from '@fluentui/react-components';
import {
FolderRegular,
EditRegular,
@@ -11,7 +11,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
TableBody,
TableCell,
@@ -20,8 +19,6 @@ import {
TableHeader,
TableHeaderCell,
useTableFeatures,
- TableColumnDefinition,
- TableColumnId,
useTableSort,
TableCellLayout,
createTableColumn,
diff --git a/packages/react-components/react-table/stories/src/Table/SubtleSelection.stories.tsx b/packages/react-components/react-table/stories/src/Table/SubtleSelection.stories.tsx
index 282555d398190..c9c9eb4bac13e 100644
--- a/packages/react-components/react-table/stories/src/Table/SubtleSelection.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/SubtleSelection.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableColumnDefinition } from '@fluentui/react-components';
import {
FolderRegular,
EditRegular,
@@ -11,7 +11,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
TableBody,
TableCell,
@@ -22,7 +21,6 @@ import {
TableSelectionCell,
TableCellLayout,
useTableFeatures,
- TableColumnDefinition,
useTableSelection,
createTableColumn,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-table/stories/src/Table/Virtualization.stories.tsx b/packages/react-components/react-table/stories/src/Table/Virtualization.stories.tsx
index 0896fa1a60f57..e5cb44a08f746 100644
--- a/packages/react-components/react-table/stories/src/Table/Virtualization.stories.tsx
+++ b/packages/react-components/react-table/stories/src/Table/Virtualization.stories.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
-import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
+import type { ListChildComponentProps } from 'react-window';
+import { FixedSizeList as List } from 'react-window';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, PresenceBadgeStatus, TableRowData as RowStateBase } from '@fluentui/react-components';
import {
FolderRegular,
EditRegular,
@@ -12,7 +13,6 @@ import {
VideoRegular,
} from '@fluentui/react-icons';
import {
- PresenceBadgeStatus,
Avatar,
useApplyScrollbarWidth,
TableBody,
@@ -26,7 +26,6 @@ import {
createTableColumn,
useTableFeatures,
useTableSelection,
- TableRowData as RowStateBase,
} from '@fluentui/react-components';
type Item = {
diff --git a/packages/react-components/react-tabs/library/etc/react-tabs.api.md b/packages/react-components/react-tabs/library/etc/react-tabs.api.md
index 51dd4d94ae42d..7cec0cad86090 100644
--- a/packages/react-components/react-tabs/library/etc/react-tabs.api.md
+++ b/packages/react-components/react-tabs/library/etc/react-tabs.api.md
@@ -14,7 +14,7 @@ import { Provider } from 'react';
import { ProviderProps } from 'react';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import { TabsterDOMAttribute } from '@fluentui/react-tabster';
// @public (undocumented)
diff --git a/packages/react-components/react-tabs/library/src/components/Tab/Tab.test.tsx b/packages/react-components/react-tabs/library/src/components/Tab/Tab.test.tsx
index fc55b4ca0ac23..ef58eb4b3e60e 100644
--- a/packages/react-components/react-tabs/library/src/components/Tab/Tab.test.tsx
+++ b/packages/react-components/react-tabs/library/src/components/Tab/Tab.test.tsx
@@ -4,7 +4,7 @@ import { useTabsterAttributes } from '@fluentui/react-tabster';
import { Tab } from './Tab';
import { isConformant } from '../../testing/isConformant';
import { TabListContext } from '../TabList/TabListContext';
-import { TabListContextValue } from '../TabList/TabList.types';
+import type { TabListContextValue } from '../TabList/TabList.types';
import { CalendarMonthRegular } from '@fluentui/react-icons';
describe('Tab', () => {
diff --git a/packages/react-components/react-tabs/library/src/components/Tab/useTabAnimatedIndicator.styles.ts b/packages/react-components/react-tabs/library/src/components/Tab/useTabAnimatedIndicator.styles.ts
index b3f30a03ad25c..06ec60cb074c5 100644
--- a/packages/react-components/react-tabs/library/src/components/Tab/useTabAnimatedIndicator.styles.ts
+++ b/packages/react-components/react-tabs/library/src/components/Tab/useTabAnimatedIndicator.styles.ts
@@ -5,7 +5,7 @@ import type { TabState, TabValue } from './Tab.types';
import { makeStyles, mergeClasses } from '@griffel/react';
import { useTabListContext_unstable } from '../TabList/TabListContext';
-import { TabRegisterData } from '../TabList/TabList.types';
+import type { TabRegisterData } from '../TabList/TabList.types';
import { tokens } from '@fluentui/react-theme';
import { useAnimationFrame } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts b/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts
index c6611f4aaba25..391d3fb6153c7 100644
--- a/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts
+++ b/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts
@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { TabValue } from '../Tab/Tab.types';
+import type { TabValue } from '../Tab/Tab.types';
export type TabRegisterData = {
/**
diff --git a/packages/react-components/react-tabs/library/src/components/TabList/TabListContext.ts b/packages/react-components/react-tabs/library/src/components/TabList/TabListContext.ts
index f17e755abba88..a753cbcc54587 100644
--- a/packages/react-components/react-tabs/library/src/components/TabList/TabListContext.ts
+++ b/packages/react-components/react-tabs/library/src/components/TabList/TabListContext.ts
@@ -2,7 +2,7 @@
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
import type { Context, ContextSelector } from '@fluentui/react-context-selector';
-import { TabListContextValue } from './TabList.types';
+import type { TabListContextValue } from './TabList.types';
const tabListContextDefaultValue: TabListContextValue = {
appearance: 'transparent',
diff --git a/packages/react-components/react-tabs/library/src/components/TabList/useTabList.test.tsx b/packages/react-components/react-tabs/library/src/components/TabList/useTabList.test.tsx
index e62fd01f6d583..051bd5c2bcbd1 100644
--- a/packages/react-components/react-tabs/library/src/components/TabList/useTabList.test.tsx
+++ b/packages/react-components/react-tabs/library/src/components/TabList/useTabList.test.tsx
@@ -5,11 +5,12 @@ import '@testing-library/jest-dom';
import { useTabListBase_unstable } from './useTabList';
import { renderTabList_unstable } from './renderTabList';
-import { renderTab_unstable, TabState, useTabBase_unstable } from '../Tab';
+import type { TabState } from '../Tab';
+import { renderTab_unstable, useTabBase_unstable } from '../Tab';
import { useTabListContextValues_unstable } from './useTabListContextValues';
import { mergeClasses } from '@griffel/react';
import { useTabListContext_unstable } from './TabListContext';
-import { TabListState } from './TabList.types';
+import type { TabListState } from './TabList.types';
describe('useTabListBase', () => {
type CustomTabAppearance = 'filled' | 'outline';
diff --git a/packages/react-components/react-tabs/library/src/components/TabList/useTabListContextValues.tsx b/packages/react-components/react-tabs/library/src/components/TabList/useTabListContextValues.tsx
index ea6f3c4703e07..22a463f621c05 100644
--- a/packages/react-components/react-tabs/library/src/components/TabList/useTabListContextValues.tsx
+++ b/packages/react-components/react-tabs/library/src/components/TabList/useTabListContextValues.tsx
@@ -1,4 +1,4 @@
-import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';
+import type { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';
export function useTabListContextValues_unstable(state: TabListState): TabListContextValues {
const {
diff --git a/packages/react-components/react-tabs/library/src/components/TabList/useTabListStyles.styles.ts b/packages/react-components/react-tabs/library/src/components/TabList/useTabListStyles.styles.ts
index 56a699032411b..ff3d466f67252 100644
--- a/packages/react-components/react-tabs/library/src/components/TabList/useTabListStyles.styles.ts
+++ b/packages/react-components/react-tabs/library/src/components/TabList/useTabListStyles.styles.ts
@@ -1,6 +1,6 @@
'use client';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import { makeStyles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import type { TabListSlots, TabListState } from './TabList.types';
diff --git a/packages/react-components/react-tabs/stories/src/Tabs/TabListWithOverflow.stories.tsx b/packages/react-components/react-tabs/stories/src/Tabs/TabListWithOverflow.stories.tsx
index b0c83b8f2445d..1116679e57c4c 100644
--- a/packages/react-components/react-tabs/stories/src/Tabs/TabListWithOverflow.stories.tsx
+++ b/packages/react-components/react-tabs/stories/src/Tabs/TabListWithOverflow.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, MenuItemProps } from '@fluentui/react-components';
import {
makeStyles,
mergeClasses,
@@ -7,7 +7,6 @@ import {
Button,
Menu,
MenuItem,
- MenuItemProps,
MenuList,
MenuPopover,
MenuTrigger,
diff --git a/packages/react-components/react-tabster/etc/react-tabster.api.md b/packages/react-components/react-tabster/etc/react-tabster.api.md
index c1f5998ebf578..4f3d2d4ec13bc 100644
--- a/packages/react-components/react-tabster/etc/react-tabster.api.md
+++ b/packages/react-components/react-tabster/etc/react-tabster.api.md
@@ -13,7 +13,7 @@ import { GroupperMoveFocusEvent } from 'tabster';
import { GroupperMoveFocusEventName } from 'tabster';
import { KEYBORG_FOCUSIN } from 'keyborg';
import { KeyborgFocusInEvent } from 'keyborg';
-import { makeResetStyles } from '@griffel/react';
+import type { makeResetStyles } from '@griffel/react';
import { MoverKeys } from 'tabster';
import { MoverMemorizedElementEvent } from 'tabster';
import { MoverMemorizedElementEventName } from 'tabster';
diff --git a/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts b/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts
index f7ba6aa5762f7..b448fe8e6c4a5 100644
--- a/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts
+++ b/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts
@@ -1,5 +1,5 @@
import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';
-import { makeResetStyles } from '@griffel/react';
+import type { makeResetStyles } from '@griffel/react';
import type { GriffelStyle } from '@griffel/react';
// TODO: Use the type directly from @griffel/react
diff --git a/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts b/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts
index 96c61bbda737c..29172b0d405fd 100644
--- a/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts
+++ b/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts
@@ -1,10 +1,8 @@
import { tokens } from '@fluentui/react-theme';
import { shorthands } from '@griffel/react';
import type { GriffelStyle } from '@griffel/react';
-import {
- createCustomFocusIndicatorStyle,
- CreateCustomFocusIndicatorStyleOptions,
-} from './createCustomFocusIndicatorStyle';
+import type { CreateCustomFocusIndicatorStyleOptions } from './createCustomFocusIndicatorStyle';
+import { createCustomFocusIndicatorStyle } from './createCustomFocusIndicatorStyle';
import { defaultOptions } from './constants';
export type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;
diff --git a/packages/react-components/react-tabster/src/focus/focusVisiblePolyfill.test.ts b/packages/react-components/react-tabster/src/focus/focusVisiblePolyfill.test.ts
index 7ad52651f5fb1..218284c29b42d 100644
--- a/packages/react-components/react-tabster/src/focus/focusVisiblePolyfill.test.ts
+++ b/packages/react-components/react-tabster/src/focus/focusVisiblePolyfill.test.ts
@@ -1,4 +1,5 @@
-import { createKeyborg, disposeKeyborg, Keyborg } from 'keyborg';
+import type { Keyborg } from 'keyborg';
+import { createKeyborg, disposeKeyborg } from 'keyborg';
import { FOCUS_VISIBLE_ATTR } from './constants';
import { applyFocusVisiblePolyfill } from './focusVisiblePolyfill';
import { fireEvent } from '@testing-library/dom';
diff --git a/packages/react-components/react-tabster/src/focus/focusVisiblePolyfill.ts b/packages/react-components/react-tabster/src/focus/focusVisiblePolyfill.ts
index 15cb9548ac099..df6cceccdca73 100644
--- a/packages/react-components/react-tabster/src/focus/focusVisiblePolyfill.ts
+++ b/packages/react-components/react-tabster/src/focus/focusVisiblePolyfill.ts
@@ -1,5 +1,6 @@
import { isHTMLElement } from '@fluentui/react-utilities';
-import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';
+import type { KeyborgFocusInEvent } from 'keyborg';
+import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';
import { FOCUS_VISIBLE_ATTR } from './constants';
diff --git a/packages/react-components/react-tabster/src/focus/focusWithinPolyfill.ts b/packages/react-components/react-tabster/src/focus/focusWithinPolyfill.ts
index 40f1259fb165f..61571690ef1b6 100644
--- a/packages/react-components/react-tabster/src/focus/focusWithinPolyfill.ts
+++ b/packages/react-components/react-tabster/src/focus/focusWithinPolyfill.ts
@@ -1,4 +1,5 @@
-import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';
+import type { KeyborgFocusInEvent } from 'keyborg';
+import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';
import { FOCUS_WITHIN_ATTR } from './constants';
/**
diff --git a/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts b/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts
index ff3207df91b60..5c2598e551eaf 100644
--- a/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts
+++ b/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts
@@ -1,6 +1,7 @@
'use client';
-import { Types, getMover, MoverDirections } from 'tabster';
+import type { Types } from 'tabster';
+import { getMover, MoverDirections } from 'tabster';
import { useTabsterAttributes } from './useTabsterAttributes';
import { useTabster } from './useTabster';
diff --git a/packages/react-components/react-tabster/src/hooks/useFocusFinders.ts b/packages/react-components/react-tabster/src/hooks/useFocusFinders.ts
index 07f1d0285c481..10e6ddd14a87b 100644
--- a/packages/react-components/react-tabster/src/hooks/useFocusFinders.ts
+++ b/packages/react-components/react-tabster/src/hooks/useFocusFinders.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { Types as TabsterTypes } from 'tabster';
+import type { Types as TabsterTypes } from 'tabster';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { useTabster } from './useTabster';
diff --git a/packages/react-components/react-tabster/src/hooks/useFocusObserved.ts b/packages/react-components/react-tabster/src/hooks/useFocusObserved.ts
index 32ef97c57ccb9..4bfb2d5f43f3d 100644
--- a/packages/react-components/react-tabster/src/hooks/useFocusObserved.ts
+++ b/packages/react-components/react-tabster/src/hooks/useFocusObserved.ts
@@ -1,7 +1,8 @@
'use client';
import * as React from 'react';
-import { getObservedElement, Types as TabsterTypes } from 'tabster';
+import type { Types as TabsterTypes } from 'tabster';
+import { getObservedElement } from 'tabster';
import { useTabster } from './useTabster';
interface UseFocusObservedOptions {
diff --git a/packages/react-components/react-tabster/src/hooks/useFocusableGroup.ts b/packages/react-components/react-tabster/src/hooks/useFocusableGroup.ts
index 7c8845ad0d390..4481e8ca74dd3 100644
--- a/packages/react-components/react-tabster/src/hooks/useFocusableGroup.ts
+++ b/packages/react-components/react-tabster/src/hooks/useFocusableGroup.ts
@@ -1,6 +1,7 @@
'use client';
-import { Types, getGroupper, GroupperTabbabilities } from 'tabster';
+import type { Types } from 'tabster';
+import { getGroupper, GroupperTabbabilities } from 'tabster';
import { useTabsterAttributes } from './useTabsterAttributes';
import { useTabster } from './useTabster';
diff --git a/packages/react-components/react-tabster/src/hooks/useMergeTabsterAttributes.ts b/packages/react-components/react-tabster/src/hooks/useMergeTabsterAttributes.ts
index 0f72f794ad344..a087b67f900d0 100644
--- a/packages/react-components/react-tabster/src/hooks/useMergeTabsterAttributes.ts
+++ b/packages/react-components/react-tabster/src/hooks/useMergeTabsterAttributes.ts
@@ -1,7 +1,8 @@
'use client';
import * as React from 'react';
-import { Types, TABSTER_ATTRIBUTE_NAME } from 'tabster';
+import type { Types } from 'tabster';
+import { TABSTER_ATTRIBUTE_NAME } from 'tabster';
/**
* Merges a collection of tabster attributes.
diff --git a/packages/react-components/react-tabster/src/hooks/useObservedElement.ts b/packages/react-components/react-tabster/src/hooks/useObservedElement.ts
index b75e8259726cc..87c4b53cfe9c0 100644
--- a/packages/react-components/react-tabster/src/hooks/useObservedElement.ts
+++ b/packages/react-components/react-tabster/src/hooks/useObservedElement.ts
@@ -1,6 +1,7 @@
'use client';
-import { getObservedElement, Types as TabsterTypes } from 'tabster';
+import type { Types as TabsterTypes } from 'tabster';
+import { getObservedElement } from 'tabster';
import { useTabster } from './useTabster';
import { useTabsterAttributes } from './useTabsterAttributes';
diff --git a/packages/react-components/react-tabster/src/hooks/useRestoreFocus.ts b/packages/react-components/react-tabster/src/hooks/useRestoreFocus.ts
index faea61beb1864..242369bcc1d74 100644
--- a/packages/react-components/react-tabster/src/hooks/useRestoreFocus.ts
+++ b/packages/react-components/react-tabster/src/hooks/useRestoreFocus.ts
@@ -1,6 +1,7 @@
'use client';
-import { getRestorer, getTabsterAttribute, Types as TabsterTypes, RestorerTypes } from 'tabster';
+import type { Types as TabsterTypes } from 'tabster';
+import { getRestorer, getTabsterAttribute, RestorerTypes } from 'tabster';
import { useTabster } from './useTabster';
/**
diff --git a/packages/react-components/react-tabster/src/hooks/useTabster.ts b/packages/react-components/react-tabster/src/hooks/useTabster.ts
index c6773c764faa0..5f9314c4cde62 100644
--- a/packages/react-components/react-tabster/src/hooks/useTabster.ts
+++ b/packages/react-components/react-tabster/src/hooks/useTabster.ts
@@ -1,7 +1,8 @@
'use client';
import * as React from 'react';
-import { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';
+import type { Types as TabsterTypes } from 'tabster';
+import { createTabster, disposeTabster } from 'tabster';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { getParent, useIsomorphicLayoutEffect, usePrevious } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-tabster/src/hooks/useTabsterAttributes.ts b/packages/react-components/react-tabster/src/hooks/useTabsterAttributes.ts
index b6a778e267a1d..3fa355d8b93d0 100644
--- a/packages/react-components/react-tabster/src/hooks/useTabsterAttributes.ts
+++ b/packages/react-components/react-tabster/src/hooks/useTabsterAttributes.ts
@@ -1,6 +1,7 @@
'use client';
-import { getTabsterAttribute, Types as TabsterTypes, TABSTER_ATTRIBUTE_NAME } from 'tabster';
+import type { Types as TabsterTypes } from 'tabster';
+import { getTabsterAttribute, TABSTER_ATTRIBUTE_NAME } from 'tabster';
import { useTabster } from './useTabster';
import * as React from 'react';
diff --git a/packages/react-components/react-tabster/src/hooks/useUncontrolledFocus.ts b/packages/react-components/react-tabster/src/hooks/useUncontrolledFocus.ts
index 4ece32a0ea9e6..1f53c3bb72d56 100644
--- a/packages/react-components/react-tabster/src/hooks/useUncontrolledFocus.ts
+++ b/packages/react-components/react-tabster/src/hooks/useUncontrolledFocus.ts
@@ -1,6 +1,7 @@
'use client';
-import { getTabsterAttribute, Types as TabsterTypes } from 'tabster';
+import type { Types as TabsterTypes } from 'tabster';
+import { getTabsterAttribute } from 'tabster';
import { useTabster } from './useTabster';
/**
diff --git a/packages/react-components/react-tag-picker/library/etc/react-tag-picker.api.md b/packages/react-components/react-tag-picker/library/etc/react-tag-picker.api.md
index 881255216a01f..a9b49a26131de 100644
--- a/packages/react-components/react-tag-picker/library/etc/react-tag-picker.api.md
+++ b/packages/react-components/react-tag-picker/library/etc/react-tag-picker.api.md
@@ -5,14 +5,14 @@
```ts
import type { ActiveDescendantContextValue } from '@fluentui/react-aria';
-import { ComboboxBaseState } from '@fluentui/react-combobox';
-import { ComboboxProps } from '@fluentui/react-combobox';
-import { ComboboxSlots } from '@fluentui/react-combobox';
+import type { ComboboxBaseState } from '@fluentui/react-combobox';
+import type { ComboboxProps } from '@fluentui/react-combobox';
+import type { ComboboxSlots } from '@fluentui/react-combobox';
import type { ComboboxState } from '@fluentui/react-combobox';
-import { ComponentProps } from '@fluentui/react-utilities';
-import { ComponentState } from '@fluentui/react-utilities';
-import { ContextSelector } from '@fluentui/react-context-selector';
-import { DropdownProps } from '@fluentui/react-combobox';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ContextSelector } from '@fluentui/react-context-selector';
+import type { DropdownProps } from '@fluentui/react-combobox';
import type { EventData } from '@fluentui/react-utilities';
import type { EventHandler } from '@fluentui/react-utilities';
import type { ExtractSlotProps } from '@fluentui/react-utilities';
@@ -20,13 +20,13 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import type { Listbox } from '@fluentui/react-combobox';
import type { ListboxContextValue } from '@fluentui/react-combobox';
-import { OptionGroupProps } from '@fluentui/react-combobox';
-import { OptionGroupSlots } from '@fluentui/react-combobox';
-import { OptionGroupState } from '@fluentui/react-combobox';
-import { OptionSlots } from '@fluentui/react-combobox';
-import { OptionState } from '@fluentui/react-combobox';
+import type { OptionGroupProps } from '@fluentui/react-combobox';
+import type { OptionGroupSlots } from '@fluentui/react-combobox';
+import type { OptionGroupState } from '@fluentui/react-combobox';
+import type { OptionSlots } from '@fluentui/react-combobox';
+import type { OptionState } from '@fluentui/react-combobox';
import * as React_2 from 'react';
-import { Slot } from '@fluentui/react-utilities';
+import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
import { TagGroupContextValues } from '@fluentui/react-tags';
import type { TagGroupSlots } from '@fluentui/react-tags';
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPicker/TagPicker.cy.tsx b/packages/react-components/react-tag-picker/library/src/components/TagPicker/TagPicker.cy.tsx
index 827f849559958..1306696f3c2ac 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPicker/TagPicker.cy.tsx
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPicker/TagPicker.cy.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { mount as mountBase } from '@fluentui/scripts-cypress';
import { FluentProvider } from '@fluentui/react-provider';
import { teamsLightTheme } from '@fluentui/react-theme';
-import { TagPickerProps } from './TagPicker.types';
+import type { TagPickerProps } from './TagPicker.types';
import { TagPicker } from './TagPicker';
import { TagPickerControl } from '../TagPickerControl/TagPickerControl';
import { TagPickerGroup } from '../TagPickerGroup/TagPickerGroup';
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPicker/useTagPicker.ts b/packages/react-components/react-tag-picker/library/src/components/TagPicker/useTagPicker.ts
index a4469cf77fda6..5b75c47b9ff01 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPicker/useTagPicker.ts
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPicker/useTagPicker.ts
@@ -9,7 +9,8 @@ import type {
TagPickerState,
} from './TagPicker.types';
import { optionClassNames } from '@fluentui/react-combobox';
-import { PositioningShorthandValue, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
+import type { PositioningShorthandValue } from '@fluentui/react-positioning';
+import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
import { useActiveDescendant } from '@fluentui/react-aria';
import { useComboboxBaseState } from '@fluentui/react-combobox';
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPicker/useTagPickerContextValues.ts b/packages/react-components/react-tag-picker/library/src/components/TagPicker/useTagPickerContextValues.ts
index 077cb00141d92..a358ea5fd1f17 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPicker/useTagPickerContextValues.ts
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPicker/useTagPickerContextValues.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { TagPickerContextValues, TagPickerState } from './TagPicker.types';
+import type { TagPickerContextValues, TagPickerState } from './TagPicker.types';
export function useTagPickerContextValues(state: TagPickerState): TagPickerContextValues {
const {
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerButton/TagPickerButton.types.ts b/packages/react-components/react-tag-picker/library/src/components/TagPickerButton/TagPickerButton.types.ts
index 12dc5d0b7a5e2..bec0324ff8b1f 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerButton/TagPickerButton.types.ts
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerButton/TagPickerButton.types.ts
@@ -1,6 +1,6 @@
-import { DropdownProps } from '@fluentui/react-combobox';
+import type { DropdownProps } from '@fluentui/react-combobox';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { TagPickerContextValue } from '../../contexts/TagPickerContext';
+import type { TagPickerContextValue } from '../../contexts/TagPickerContext';
export type TagPickerButtonSlots = {
root: Slot<'button'>;
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerButton/useTagPickerButton.tsx b/packages/react-components/react-tag-picker/library/src/components/TagPickerButton/useTagPickerButton.tsx
index 83fea872073d8..e277314f1172a 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerButton/useTagPickerButton.tsx
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerButton/useTagPickerButton.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useActiveDescendantContext } from '@fluentui/react-aria';
import type { TagPickerButtonProps, TagPickerButtonState } from './TagPickerButton.types';
import { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/TagPickerControl.types.ts b/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/TagPickerControl.types.ts
index a53f92449a1eb..69ba28eec487e 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/TagPickerControl.types.ts
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/TagPickerControl.types.ts
@@ -1,7 +1,7 @@
import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';
-import { TagPickerContextValue } from '../../contexts/TagPickerContext';
-import { ComboboxSlots } from '@fluentui/react-combobox';
-import * as React from 'react';
+import type { TagPickerContextValue } from '../../contexts/TagPickerContext';
+import type { ComboboxSlots } from '@fluentui/react-combobox';
+import type * as React from 'react';
export type TagPickerControlSlots = {
root: Slot & { style?: TagPickerControlCSSProperties }>>;
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/useTagPickerControl.tsx b/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/useTagPickerControl.tsx
index 5f74969d674ad..9c488c1cfed1a 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/useTagPickerControl.tsx
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/useTagPickerControl.tsx
@@ -1,9 +1,8 @@
'use client';
import * as React from 'react';
+import type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';
import {
- ExtractSlotProps,
- Slot,
elementContains,
getIntrinsicElementProps,
slot,
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerGroup/renderTagPickerGroup.ts b/packages/react-components/react-tag-picker/library/src/components/TagPickerGroup/renderTagPickerGroup.ts
index f66ada6b309e5..d7b78e0579749 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerGroup/renderTagPickerGroup.ts
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerGroup/renderTagPickerGroup.ts
@@ -1,5 +1,5 @@
import type { JSXElement } from '@fluentui/react-utilities';
-import { TagPickerGroupState } from './TagPickerGroup.types';
+import type { TagPickerGroupState } from './TagPickerGroup.types';
import { renderTagGroup_unstable, type TagGroupContextValues } from '@fluentui/react-tags';
export function renderTagPickerGroup_unstable(
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerGroup/useTagPickerGroup.ts b/packages/react-components/react-tag-picker/library/src/components/TagPickerGroup/useTagPickerGroup.ts
index 29601b0aa3da8..3fa521c4898ef 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerGroup/useTagPickerGroup.ts
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerGroup/useTagPickerGroup.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import type { TagPickerGroupProps, TagPickerGroupState } from './TagPickerGroup.types';
import { useTagGroup_unstable } from '@fluentui/react-tags';
import { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerInput/TagPickerInput.types.ts b/packages/react-components/react-tag-picker/library/src/components/TagPickerInput/TagPickerInput.types.ts
index a94a810f0372b..7e0e881ca577f 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerInput/TagPickerInput.types.ts
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerInput/TagPickerInput.types.ts
@@ -1,6 +1,6 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { ComboboxProps } from '@fluentui/react-combobox';
-import { TagPickerContextValue } from '../../contexts/TagPickerContext';
+import type { ComboboxProps } from '@fluentui/react-combobox';
+import type { TagPickerContextValue } from '../../contexts/TagPickerContext';
export type TagPickerInputSlots = {
root: NonNullable>;
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerList/TagPickerList.types.ts b/packages/react-components/react-tag-picker/library/src/components/TagPickerList/TagPickerList.types.ts
index c1e8ad1dc8944..fa20f2ae7491e 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerList/TagPickerList.types.ts
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerList/TagPickerList.types.ts
@@ -1,6 +1,6 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type { Listbox } from '@fluentui/react-combobox';
-import { TagPickerContextValue } from '../../contexts/TagPickerContext';
+import type { TagPickerContextValue } from '../../contexts/TagPickerContext';
export type TagPickerListSlots = {
root: Slot;
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerList/useTagPickerList.ts b/packages/react-components/react-tag-picker/library/src/components/TagPickerList/useTagPickerList.ts
index e273b594f3233..045f6117bc646 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerList/useTagPickerList.ts
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerList/useTagPickerList.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import type { TagPickerListProps, TagPickerListState } from './TagPickerList.types';
import { Listbox } from '@fluentui/react-combobox';
import { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/TagPickerOption.test.tsx b/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/TagPickerOption.test.tsx
index cab6435c24e9b..adffe644ecf1d 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/TagPickerOption.test.tsx
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/TagPickerOption.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { isConformant } from '../../testing/isConformant';
import { TagPickerOption } from './TagPickerOption';
-import { TagPickerOptionProps } from './TagPickerOption.types';
+import type { TagPickerOptionProps } from './TagPickerOption.types';
describe('TagPickerOption', () => {
isConformant({
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/TagPickerOption.types.ts b/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/TagPickerOption.types.ts
index 247b4a1bc713e..b06dcda703970 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/TagPickerOption.types.ts
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/TagPickerOption.types.ts
@@ -1,6 +1,6 @@
-import { OptionSlots, OptionState } from '@fluentui/react-combobox';
-import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type { OptionSlots, OptionState } from '@fluentui/react-combobox';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type * as React from 'react';
export type TagPickerOptionSlots = Pick & {
media?: Slot<'div'>;
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/useTagPickerOption.ts b/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/useTagPickerOption.ts
index bf487cd9112d0..ccaddef827a5f 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/useTagPickerOption.ts
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/useTagPickerOption.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { slot } from '@fluentui/react-utilities';
import { useOption_unstable } from '@fluentui/react-combobox';
import type { TagPickerOptionProps, TagPickerOptionState } from './TagPickerOption.types';
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerOptionGroup/TagPickerOptionGroup.types.ts b/packages/react-components/react-tag-picker/library/src/components/TagPickerOptionGroup/TagPickerOptionGroup.types.ts
index 822a5370fae09..519bec17515f7 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerOptionGroup/TagPickerOptionGroup.types.ts
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerOptionGroup/TagPickerOptionGroup.types.ts
@@ -1,4 +1,4 @@
-import { OptionGroupProps, OptionGroupSlots, OptionGroupState } from '@fluentui/react-combobox';
+import type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from '@fluentui/react-combobox';
export type TagPickerOptionGroupSlots = OptionGroupSlots;
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerOptionGroup/useTagPickerOptionGroup.ts b/packages/react-components/react-tag-picker/library/src/components/TagPickerOptionGroup/useTagPickerOptionGroup.ts
index 3d86dba8e6820..56ed3093e8429 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerOptionGroup/useTagPickerOptionGroup.ts
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerOptionGroup/useTagPickerOptionGroup.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import type { TagPickerOptionGroupProps, TagPickerOptionGroupState } from './TagPickerOptionGroup.types';
import { useOptionGroup_unstable } from '@fluentui/react-combobox';
diff --git a/packages/react-components/react-tag-picker/library/src/contexts/TagPickerContext.ts b/packages/react-components/react-tag-picker/library/src/contexts/TagPickerContext.ts
index 7d8f4bcf9cf32..7e5b58f4b4ab0 100644
--- a/packages/react-components/react-tag-picker/library/src/contexts/TagPickerContext.ts
+++ b/packages/react-components/react-tag-picker/library/src/contexts/TagPickerContext.ts
@@ -1,9 +1,10 @@
'use client';
import * as React from 'react';
-import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';
+import type { ContextSelector } from '@fluentui/react-context-selector';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
import type { TagPickerSize } from '../components/TagPicker/TagPicker.types';
-import { ComboboxBaseState } from '@fluentui/react-combobox';
+import type { ComboboxBaseState } from '@fluentui/react-combobox';
export interface TagPickerContextValue
extends Pick<
diff --git a/packages/react-components/react-tag-picker/library/src/utils/tagPicker2Tag.ts b/packages/react-components/react-tag-picker/library/src/utils/tagPicker2Tag.ts
index 8f63200cfb5f1..a2a9baa776dff 100644
--- a/packages/react-components/react-tag-picker/library/src/utils/tagPicker2Tag.ts
+++ b/packages/react-components/react-tag-picker/library/src/utils/tagPicker2Tag.ts
@@ -1,6 +1,6 @@
import type { TagAppearance, TagSize } from '@fluentui/react-tags/src/index';
import type { TagPickerSize } from '../TagPicker';
-import { ComboboxBaseProps } from '@fluentui/react-combobox';
+import type { ComboboxBaseProps } from '@fluentui/react-combobox';
export function tagPickerSizeToTagSize(size: TagPickerSize): TagSize {
switch (size) {
diff --git a/packages/react-components/react-tag-picker/library/src/utils/useExpandLabel.ts b/packages/react-components/react-tag-picker/library/src/utils/useExpandLabel.ts
index 9a156caabfd00..1219982caa141 100644
--- a/packages/react-components/react-tag-picker/library/src/utils/useExpandLabel.ts
+++ b/packages/react-components/react-tag-picker/library/src/utils/useExpandLabel.ts
@@ -3,7 +3,7 @@
import * as React from 'react';
import { useTagPickerContext_unstable } from '../contexts/TagPickerContext';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { TagPickerControlState } from '../TagPickerControl';
+import type { TagPickerControlState } from '../TagPickerControl';
export function useExpandLabel(options: {
tagPickerId: string;
diff --git a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerAppearance.stories.tsx b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerAppearance.stories.tsx
index 82bf167f214ee..037e378723103 100644
--- a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerAppearance.stories.tsx
+++ b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerAppearance.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TagPickerProps } from '@fluentui/react-components';
import {
TagPicker,
TagPickerList,
TagPickerInput,
TagPickerControl,
- TagPickerProps,
TagPickerOption,
TagPickerGroup,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerButton.stories.tsx b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerButton.stories.tsx
index bda6ac867d67f..3f6142d98ff61 100644
--- a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerButton.stories.tsx
+++ b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerButton.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TagPickerProps } from '@fluentui/react-components';
import {
TagPicker,
TagPickerList,
TagPickerButton,
TagPickerControl,
- TagPickerProps,
TagPickerOption,
TagPickerGroup,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDefault.stories.tsx b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDefault.stories.tsx
index c8f3a0ec49f6f..72af4c278b57f 100644
--- a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDefault.stories.tsx
+++ b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDefault.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TagPickerProps } from '@fluentui/react-components';
import {
TagPicker,
TagPickerList,
TagPickerInput,
TagPickerControl,
- TagPickerProps,
TagPickerOption,
TagPickerGroup,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDisabled.stories.tsx b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDisabled.stories.tsx
index 2b9a79dd3864d..fa46892f5f1cf 100644
--- a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDisabled.stories.tsx
+++ b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDisabled.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TagPickerProps } from '@fluentui/react-components';
import {
TagPicker,
TagPickerList,
TagPickerInput,
TagPickerControl,
- TagPickerProps,
TagPickerOption,
TagPickerGroup,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerExpandIcon.stories.tsx b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerExpandIcon.stories.tsx
index 53c03a572352f..a9a93cb849fed 100644
--- a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerExpandIcon.stories.tsx
+++ b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerExpandIcon.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TagPickerProps } from '@fluentui/react-components';
import {
TagPicker,
TagPickerList,
TagPickerInput,
TagPickerControl,
- TagPickerProps,
TagPickerOption,
TagPickerGroup,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerFiltering.stories.tsx b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerFiltering.stories.tsx
index 7a31f68009047..11ab6222d6566 100644
--- a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerFiltering.stories.tsx
+++ b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerFiltering.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TagPickerProps } from '@fluentui/react-components';
import {
TagPicker,
TagPickerList,
TagPickerInput,
TagPickerControl,
- TagPickerProps,
TagPickerOption,
TagPickerGroup,
useTagPickerFilter,
diff --git a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerGrouped.stories.tsx b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerGrouped.stories.tsx
index 62fa2e4b76f09..d3a8c1edac3cb 100644
--- a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerGrouped.stories.tsx
+++ b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerGrouped.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TagPickerProps } from '@fluentui/react-components';
import {
TagPicker,
TagPickerList,
TagPickerInput,
TagPickerControl,
- TagPickerProps,
TagPickerOption,
TagPickerGroup,
TagPickerOptionGroup,
diff --git a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerNoPopover.stories.tsx b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerNoPopover.stories.tsx
index f76450e46e5cf..1720a2af929fa 100644
--- a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerNoPopover.stories.tsx
+++ b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerNoPopover.stories.tsx
@@ -1,12 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import {
- TagPicker,
- TagPickerInput,
- TagPickerControl,
- TagPickerProps,
- TagPickerGroup,
-} from '@fluentui/react-components';
+import type { JSXElement, TagPickerProps } from '@fluentui/react-components';
+import { TagPicker, TagPickerInput, TagPickerControl, TagPickerGroup } from '@fluentui/react-components';
import { Tag, Avatar, Field } from '@fluentui/react-components';
export const NoPopover = (): JSXElement => {
diff --git a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSecondaryAction.stories.tsx b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSecondaryAction.stories.tsx
index bad933e6a9914..b675d95e28065 100644
--- a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSecondaryAction.stories.tsx
+++ b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSecondaryAction.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TagPickerProps } from '@fluentui/react-components';
import {
TagPicker,
TagPickerList,
TagPickerInput,
TagPickerControl,
- TagPickerProps,
TagPickerOption,
TagPickerGroup,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSingleLine.stories.tsx b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSingleLine.stories.tsx
index 9524cca014bf4..0a753d0178518 100644
--- a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSingleLine.stories.tsx
+++ b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSingleLine.stories.tsx
@@ -1,19 +1,16 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TagPickerProps, TagPickerInputProps, TagProps } from '@fluentui/react-components';
import {
TagPicker,
TagPickerList,
TagPickerInput,
TagPickerControl,
- TagPickerProps,
TagPickerOption,
TagPickerGroup,
makeStyles,
tagPickerGroupClassNames,
useOverflowCount,
- TagPickerInputProps,
useTagPickerContext_unstable,
- TagProps,
Tag,
Avatar,
Overflow,
diff --git a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSingleSelect.stories.tsx b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSingleSelect.stories.tsx
index 990898ef1b57e..c91fbfe7fd21c 100644
--- a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSingleSelect.stories.tsx
+++ b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSingleSelect.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TagPickerProps } from '@fluentui/react-components';
import {
TagPicker,
TagPickerList,
TagPickerInput,
TagPickerControl,
- TagPickerProps,
TagPickerOption,
TagPickerGroup,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSize.stories.tsx b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSize.stories.tsx
index 9598f7b11743c..ebc5af158d1ae 100644
--- a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSize.stories.tsx
+++ b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSize.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TagPickerProps } from '@fluentui/react-components';
import {
TagPicker,
TagPickerList,
TagPickerInput,
TagPickerControl,
- TagPickerProps,
TagPickerOption,
TagPickerGroup,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerTruncatedText.stories.tsx b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerTruncatedText.stories.tsx
index 0d327819cc647..50fe101a11538 100644
--- a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerTruncatedText.stories.tsx
+++ b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerTruncatedText.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TagPickerProps } from '@fluentui/react-components';
import {
TagPicker,
TagPickerList,
TagPickerInput,
TagPickerControl,
- TagPickerProps,
TagPickerOption,
TagPickerGroup,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-tags/library/etc/react-tags.api.md b/packages/react-components/react-tags/library/etc/react-tags.api.md
index 3aed6220e25ef..c857f87c6e18a 100644
--- a/packages/react-components/react-tags/library/etc/react-tags.api.md
+++ b/packages/react-components/react-tags/library/etc/react-tags.api.md
@@ -4,17 +4,17 @@
```ts
-import { AvatarShape } from '@fluentui/react-avatar';
-import { AvatarSize } from '@fluentui/react-avatar';
-import { ComponentProps } from '@fluentui/react-utilities';
-import { ComponentState } from '@fluentui/react-utilities';
+import type { AvatarShape } from '@fluentui/react-avatar';
+import type { AvatarSize } from '@fluentui/react-avatar';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
import type { DistributiveOmit } from '@fluentui/react-utilities';
import type { EventData } from '@fluentui/react-utilities';
import type { EventHandler } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import * as React_2 from 'react';
-import { Slot } from '@fluentui/react-utilities';
+import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
// @public
diff --git a/packages/react-components/react-tags/library/src/components/InteractionTag/InteractionTag.types.ts b/packages/react-components/react-tags/library/src/components/InteractionTag/InteractionTag.types.ts
index ef0cacf49f423..88799ea5893f5 100644
--- a/packages/react-components/react-tags/library/src/components/InteractionTag/InteractionTag.types.ts
+++ b/packages/react-components/react-tags/library/src/components/InteractionTag/InteractionTag.types.ts
@@ -1,6 +1,13 @@
-import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { InteractionTagContextValue } from '../../contexts/interactionTagContext';
-import { TagAppearance, TagShape, TagSize, TagValue, TagDismissHandler, TagSelectHandler } from '../../utils/types';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { InteractionTagContextValue } from '../../contexts/interactionTagContext';
+import type {
+ TagAppearance,
+ TagShape,
+ TagSize,
+ TagValue,
+ TagDismissHandler,
+ TagSelectHandler,
+} from '../../utils/types';
export type InteractionTagContextValues = {
interactionTag: InteractionTagContextValue;
diff --git a/packages/react-components/react-tags/library/src/components/InteractionTag/useInteractionTag.tsx b/packages/react-components/react-tags/library/src/components/InteractionTag/useInteractionTag.tsx
index 2070cde49847b..a0f19573ca7a1 100644
--- a/packages/react-components/react-tags/library/src/components/InteractionTag/useInteractionTag.tsx
+++ b/packages/react-components/react-tags/library/src/components/InteractionTag/useInteractionTag.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
import type {
InteractionTagBaseProps,
diff --git a/packages/react-components/react-tags/library/src/components/InteractionTag/useInteractionTagContextValues.ts b/packages/react-components/react-tags/library/src/components/InteractionTag/useInteractionTagContextValues.ts
index a83db4a505b77..fbe5cdb8b1bad 100644
--- a/packages/react-components/react-tags/library/src/components/InteractionTag/useInteractionTagContextValues.ts
+++ b/packages/react-components/react-tags/library/src/components/InteractionTag/useInteractionTagContextValues.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { InteractionTagState, InteractionTagContextValues } from './InteractionTag.types';
+import type { InteractionTagState, InteractionTagContextValues } from './InteractionTag.types';
export function useInteractionTagContextValues_unstable(state: InteractionTagState): InteractionTagContextValues {
const {
diff --git a/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/InteractionTagPrimary.types.ts b/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/InteractionTagPrimary.types.ts
index 23c3059cf8679..7567b7ae81c53 100644
--- a/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/InteractionTagPrimary.types.ts
+++ b/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/InteractionTagPrimary.types.ts
@@ -1,6 +1,6 @@
-import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { InteractionTagContextValue } from '../../contexts/interactionTagContext';
-import { TagAvatarContextValues, UseTagAvatarContextValuesOptions } from '../../utils/useTagAvatarContextValues';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { InteractionTagContextValue } from '../../contexts/interactionTagContext';
+import type { TagAvatarContextValues, UseTagAvatarContextValuesOptions } from '../../utils/useTagAvatarContextValues';
export type InteractionTagPrimaryContextValues = TagAvatarContextValues;
diff --git a/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/useInteractionTagPrimary.ts b/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/useInteractionTagPrimary.ts
index df9ace2c7752f..329fc56da86fe 100644
--- a/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/useInteractionTagPrimary.ts
+++ b/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/useInteractionTagPrimary.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';
import type {
InteractionTagPrimaryBaseProps,
diff --git a/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts b/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts
index f4ce4bfd3844f..f403268d4feee 100644
--- a/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts
+++ b/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts
@@ -1,6 +1,7 @@
'use client';
-import { GriffelResetStyle, makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import type { GriffelResetStyle } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
import type { InteractionTagPrimarySlots, InteractionTagPrimaryState } from './InteractionTagPrimary.types';
import type { SlotClassNames } from '@fluentui/react-utilities';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
diff --git a/packages/react-components/react-tags/library/src/components/InteractionTagSecondary/InteractionTagSecondary.types.ts b/packages/react-components/react-tags/library/src/components/InteractionTagSecondary/InteractionTagSecondary.types.ts
index 0424e7a8392ee..1953bca4c64d9 100644
--- a/packages/react-components/react-tags/library/src/components/InteractionTagSecondary/InteractionTagSecondary.types.ts
+++ b/packages/react-components/react-tags/library/src/components/InteractionTagSecondary/InteractionTagSecondary.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { InteractionTagContextValue } from '../../contexts/interactionTagContext';
+import type { InteractionTagContextValue } from '../../contexts/interactionTagContext';
export type InteractionTagSecondarySlots = {
root: NonNullable>;
diff --git a/packages/react-components/react-tags/library/src/components/Tag/Tag.test.tsx b/packages/react-components/react-tags/library/src/components/Tag/Tag.test.tsx
index 3d3a0d34c2de4..0445d0c37a170 100644
--- a/packages/react-components/react-tags/library/src/components/Tag/Tag.test.tsx
+++ b/packages/react-components/react-tags/library/src/components/Tag/Tag.test.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { Tag } from './Tag';
import { isConformant } from '../../testing/isConformant';
-import { TagProps } from './Tag.types';
+import type { TagProps } from './Tag.types';
import { render } from '@testing-library/react';
const requiredProps: TagProps = {
diff --git a/packages/react-components/react-tags/library/src/components/Tag/Tag.types.ts b/packages/react-components/react-tags/library/src/components/Tag/Tag.types.ts
index f8a8dfd24e75f..42773aed7a762 100644
--- a/packages/react-components/react-tags/library/src/components/Tag/Tag.types.ts
+++ b/packages/react-components/react-tags/library/src/components/Tag/Tag.types.ts
@@ -1,6 +1,6 @@
import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';
-import { TagAppearance, TagShape, TagSize } from '../../utils/types';
-import { TagAvatarContextValues, UseTagAvatarContextValuesOptions } from '../../utils/useTagAvatarContextValues';
+import type { TagAppearance, TagShape, TagSize } from '../../utils/types';
+import type { TagAvatarContextValues, UseTagAvatarContextValuesOptions } from '../../utils/useTagAvatarContextValues';
export type TagContextValues = TagAvatarContextValues;
diff --git a/packages/react-components/react-tags/library/src/components/Tag/useTagStyles.styles.ts b/packages/react-components/react-tags/library/src/components/Tag/useTagStyles.styles.ts
index 6fbbfbb7c7a27..5951973b929b0 100644
--- a/packages/react-components/react-tags/library/src/components/Tag/useTagStyles.styles.ts
+++ b/packages/react-components/react-tags/library/src/components/Tag/useTagStyles.styles.ts
@@ -1,6 +1,7 @@
'use client';
-import { GriffelResetStyle, makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import type { GriffelResetStyle } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
import type { TagSlots, TagState } from './Tag.types';
import type { SlotClassNames } from '@fluentui/react-utilities';
import { tokens, typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-tags/library/src/components/TagGroup/TagGroup.cy.tsx b/packages/react-components/react-tags/library/src/components/TagGroup/TagGroup.cy.tsx
index b322884ec2163..a21f826d04381 100644
--- a/packages/react-components/react-tags/library/src/components/TagGroup/TagGroup.cy.tsx
+++ b/packages/react-components/react-tags/library/src/components/TagGroup/TagGroup.cy.tsx
@@ -6,7 +6,7 @@ import { InteractionTag } from '../InteractionTag/InteractionTag';
import { InteractionTagPrimary } from '../InteractionTagPrimary/InteractionTagPrimary';
import { InteractionTagSecondary } from '../InteractionTagSecondary/InteractionTagSecondary';
import { TagGroup } from './TagGroup';
-import { TagGroupProps } from './TagGroup.types';
+import type { TagGroupProps } from './TagGroup.types';
import { Tag } from '../Tag/Tag';
import type { JSXElement } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-tags/library/src/components/TagGroup/TagGroup.types.ts b/packages/react-components/react-tags/library/src/components/TagGroup/TagGroup.types.ts
index ed831161ecccc..7179cffbf29cd 100644
--- a/packages/react-components/react-tags/library/src/components/TagGroup/TagGroup.types.ts
+++ b/packages/react-components/react-tags/library/src/components/TagGroup/TagGroup.types.ts
@@ -7,8 +7,8 @@ import type {
TagSelectHandler,
TagSelectData,
} from '../../utils/types';
-import { TagGroupContextValue } from '../../contexts/tagGroupContext';
-import * as React from 'react';
+import type { TagGroupContextValue } from '../../contexts/tagGroupContext';
+import type * as React from 'react';
export type TagGroupContextValues = {
tagGroup: TagGroupContextValue;
diff --git a/packages/react-components/react-tags/library/src/contexts/tagGroupContext.tsx b/packages/react-components/react-tags/library/src/contexts/tagGroupContext.tsx
index 7168e7a2cb56d..253c8d33c5730 100644
--- a/packages/react-components/react-tags/library/src/contexts/tagGroupContext.tsx
+++ b/packages/react-components/react-tags/library/src/contexts/tagGroupContext.tsx
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { TagGroupState } from '../components/TagGroup/index';
+import type { TagGroupState } from '../components/TagGroup/index';
export const TagGroupContext = React.createContext(undefined);
diff --git a/packages/react-components/react-tags/library/src/utils/types.ts b/packages/react-components/react-tags/library/src/utils/types.ts
index c1d030fcc579e..21500ef964104 100644
--- a/packages/react-components/react-tags/library/src/utils/types.ts
+++ b/packages/react-components/react-tags/library/src/utils/types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { EventData, EventHandler } from '@fluentui/react-utilities';
export type TagAppearance = 'filled' | 'outline' | 'brand';
diff --git a/packages/react-components/react-tags/library/src/utils/useTagAvatarContextValues.ts b/packages/react-components/react-tags/library/src/utils/useTagAvatarContextValues.ts
index c92ebf27f9e28..62c371ea6a0ef 100644
--- a/packages/react-components/react-tags/library/src/utils/useTagAvatarContextValues.ts
+++ b/packages/react-components/react-tags/library/src/utils/useTagAvatarContextValues.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { AvatarSize, AvatarShape } from '@fluentui/react-avatar';
+import type { AvatarSize, AvatarShape } from '@fluentui/react-avatar';
export type UseTagAvatarContextValuesOptions = {
avatarSize: AvatarSize;
diff --git a/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagDefault.stories.tsx b/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagDefault.stories.tsx
index 8ad425abc5f0c..3e034393ac7a2 100644
--- a/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagDefault.stories.tsx
+++ b/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagDefault.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { InteractionTag, InteractionTagProps, InteractionTagPrimary } from '@fluentui/react-components';
+import type { JSXElement, InteractionTagProps } from '@fluentui/react-components';
+import { InteractionTag, InteractionTagPrimary } from '@fluentui/react-components';
export const Default = (props: Partial): JSXElement => (
diff --git a/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagDismiss.stories.tsx b/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagDismiss.stories.tsx
index 93e98283f5ded..919955a31d58c 100644
--- a/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagDismiss.stories.tsx
+++ b/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagDismiss.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TagGroupProps } from '@fluentui/react-components';
import {
InteractionTag,
InteractionTagPrimary,
InteractionTagSecondary,
TagGroup,
- TagGroupProps,
Button,
makeStyles,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-tags/stories/src/Tag/TagDefault.stories.tsx b/packages/react-components/react-tags/stories/src/Tag/TagDefault.stories.tsx
index bcb6843d24bef..1a3b8e338fb11 100644
--- a/packages/react-components/react-tags/stories/src/Tag/TagDefault.stories.tsx
+++ b/packages/react-components/react-tags/stories/src/Tag/TagDefault.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { Tag, TagProps } from '@fluentui/react-components';
+import type { JSXElement, TagProps } from '@fluentui/react-components';
+import { Tag } from '@fluentui/react-components';
export const Default = (props: Partial): JSXElement => Primary text;
diff --git a/packages/react-components/react-tags/stories/src/Tag/TagDismiss.stories.tsx b/packages/react-components/react-tags/stories/src/Tag/TagDismiss.stories.tsx
index b944d63f03650..f1cb59a2f8487 100644
--- a/packages/react-components/react-tags/stories/src/Tag/TagDismiss.stories.tsx
+++ b/packages/react-components/react-tags/stories/src/Tag/TagDismiss.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { Tag, TagGroup, TagGroupProps, Button, makeStyles } from '@fluentui/react-components';
+import type { JSXElement, TagGroupProps } from '@fluentui/react-components';
+import { Tag, TagGroup, Button, makeStyles } from '@fluentui/react-components';
const useStyles = makeStyles({
container: {
diff --git a/packages/react-components/react-tags/stories/src/TagGroup/TagGroupDismiss.stories.tsx b/packages/react-components/react-tags/stories/src/TagGroup/TagGroupDismiss.stories.tsx
index f0056b6402aea..061da0409d5af 100644
--- a/packages/react-components/react-tags/stories/src/TagGroup/TagGroupDismiss.stories.tsx
+++ b/packages/react-components/react-tags/stories/src/TagGroup/TagGroupDismiss.stories.tsx
@@ -1,10 +1,9 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TagGroupProps } from '@fluentui/react-components';
import {
TagGroup,
Tag,
InteractionTag,
- TagGroupProps,
InteractionTagPrimary,
InteractionTagSecondary,
Button,
diff --git a/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.stories.tsx b/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.stories.tsx
index 300d9e4919abd..4cb858493d432 100644
--- a/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.stories.tsx
+++ b/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.stories.tsx
@@ -1,13 +1,11 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TagProps, InteractionTagPrimaryProps } from '@fluentui/react-components';
import {
TagGroup,
Tag,
- TagProps,
tagClassNames,
InteractionTag,
InteractionTagPrimary,
- InteractionTagPrimaryProps,
makeStyles,
shorthands,
Menu,
diff --git a/packages/react-components/react-tags/stories/src/TagGroup/TagGroupSelect.stories.tsx b/packages/react-components/react-tags/stories/src/TagGroup/TagGroupSelect.stories.tsx
index 3b0771740a822..c48fe1f02306d 100644
--- a/packages/react-components/react-tags/stories/src/TagGroup/TagGroupSelect.stories.tsx
+++ b/packages/react-components/react-tags/stories/src/TagGroup/TagGroupSelect.stories.tsx
@@ -1,9 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TagGroupProps } from '@fluentui/react-components';
import {
TagGroup,
InteractionTag,
- TagGroupProps,
InteractionTagPrimary,
InteractionTagSecondary,
Button,
diff --git a/packages/react-components/react-tags/stories/src/TagGroup/TagGroupSizes.stories.tsx b/packages/react-components/react-tags/stories/src/TagGroup/TagGroupSizes.stories.tsx
index ab8f22934efcf..0f4e8c4f1439a 100644
--- a/packages/react-components/react-tags/stories/src/TagGroup/TagGroupSizes.stories.tsx
+++ b/packages/react-components/react-tags/stories/src/TagGroup/TagGroupSizes.stories.tsx
@@ -1,11 +1,10 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, TagSize } from '@fluentui/react-components';
import {
TagGroup,
InteractionTag,
InteractionTagPrimary,
InteractionTagSecondary,
- TagSize,
Avatar,
makeStyles,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-teaching-popover/library/etc/react-teaching-popover.api.md b/packages/react-components/react-teaching-popover/library/etc/react-teaching-popover.api.md
index 91725e5926bc0..2a80440f86a17 100644
--- a/packages/react-components/react-teaching-popover/library/etc/react-teaching-popover.api.md
+++ b/packages/react-components/react-teaching-popover/library/etc/react-teaching-popover.api.md
@@ -4,26 +4,26 @@
```ts
-import { ARIAButtonSlotProps } from '@fluentui/react-aria';
-import { Button } from '@fluentui/react-button';
-import { ButtonProps } from '@fluentui/react-button';
-import { ButtonState } from '@fluentui/react-button';
-import { ComponentProps } from '@fluentui/react-utilities';
-import { ComponentState } from '@fluentui/react-utilities';
-import { EventData } from '@fluentui/react-utilities';
-import { EventHandler } from '@fluentui/react-utilities';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import type { Button } from '@fluentui/react-button';
+import type { ButtonProps } from '@fluentui/react-button';
+import type { ButtonState } from '@fluentui/react-button';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { EventData } from '@fluentui/react-utilities';
+import type { EventHandler } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import { JSXElement } from '@fluentui/react-utilities';
import { PopoverContextValue } from '@fluentui/react-popover';
import type { PopoverProps } from '@fluentui/react-popover';
import { PopoverState } from '@fluentui/react-popover';
-import { PopoverSurfaceSlots } from '@fluentui/react-popover';
-import { PopoverSurfaceState } from '@fluentui/react-popover';
-import { PopoverTriggerChildProps } from '@fluentui/react-popover';
-import { PopoverTriggerProps } from '@fluentui/react-popover';
-import { PopoverTriggerState } from '@fluentui/react-popover';
+import type { PopoverSurfaceSlots } from '@fluentui/react-popover';
+import type { PopoverSurfaceState } from '@fluentui/react-popover';
+import type { PopoverTriggerChildProps } from '@fluentui/react-popover';
+import type { PopoverTriggerProps } from '@fluentui/react-popover';
+import type { PopoverTriggerState } from '@fluentui/react-popover';
import * as React_2 from 'react';
-import { Slot } from '@fluentui/react-utilities';
+import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
// @public
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopover/TeachingPopover.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopover/TeachingPopover.tsx
index 6553c5f4c9896..2d94ae547b3d8 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopover/TeachingPopover.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopover/TeachingPopover.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useTeachingPopover_unstable } from './useTeachingPopover';
import { renderTeachingPopover_unstable } from './renderTeachingPopover';
import type { TeachingPopoverProps } from './TeachingPopover.types';
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverBody/TeachingPopoverBody.types.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverBody/TeachingPopoverBody.types.ts
index 97b83c181722d..2efb457182c3a 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverBody/TeachingPopoverBody.types.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverBody/TeachingPopoverBody.types.ts
@@ -1,4 +1,4 @@
-import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
export type TeachingPopoverBodySlots = {
/**
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverBody/renderTeachingPopoverBody.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverBody/renderTeachingPopoverBody.tsx
index a435844a37815..9313025c2ed93 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverBody/renderTeachingPopoverBody.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverBody/renderTeachingPopoverBody.tsx
@@ -1,7 +1,7 @@
/** @jsxRuntime automatic */
/** @jsxImportSource @fluentui/react-jsx-runtime */
import type { TeachingPopoverBodyState } from './TeachingPopoverBody.types';
-import { TeachingPopoverBodySlots } from './TeachingPopoverBody.types';
+import type { TeachingPopoverBodySlots } from './TeachingPopoverBody.types';
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverBody/useTeachingPopoverBody.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverBody/useTeachingPopoverBody.ts
index 7724e89344fd4..fff043c11f3ed 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverBody/useTeachingPopoverBody.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverBody/useTeachingPopoverBody.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { TeachingPopoverBodyProps, TeachingPopoverBodyState } from './TeachingPopoverBody.types';
/**
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/Carousel.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/Carousel.tsx
index 78089d38000b8..cc58effbbd7da 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/Carousel.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/Carousel.tsx
@@ -8,7 +8,7 @@ import { CAROUSEL_ITEM } from './constants';
import { useCarouselWalker_unstable } from './useCarouselWalker';
import { createCarouselStore } from './createCarouselStore';
import type { CarouselStore, UseCarouselOptions } from './Carousel.types';
-import { CarouselContextValue } from './CarouselContext';
+import type { CarouselContextValue } from './CarouselContext';
// TODO: Migrate this into an external @fluentui/carousel component
// For now, we won't export this publicly, is only for internal TeachingPopover use until stabilized.
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/Carousel.types.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/Carousel.types.ts
index f49a7c4a1198d..f119bbadd8af5 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/Carousel.types.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/Carousel.types.ts
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { EventData, EventHandler } from '@fluentui/react-utilities';
+import type * as React from 'react';
+import type { EventData, EventHandler } from '@fluentui/react-utilities';
export type CarouselStore = {
clear: () => void;
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/CarouselContext.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/CarouselContext.ts
index 546f0dd5ad416..d901922de331d 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/CarouselContext.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/CarouselContext.ts
@@ -1,7 +1,8 @@
'use client';
-import { type Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';
-import * as React from 'react';
+import type { ContextSelector } from '@fluentui/react-context-selector';
+import { type Context, createContext, useContextSelector } from '@fluentui/react-context-selector';
+import type * as React from 'react';
import type { CarouselStore } from './Carousel.types';
import { createCarouselStore } from './createCarouselStore';
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/CarouselItem/CarouselItem.types.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/CarouselItem/CarouselItem.types.ts
index 5c840b7976c46..f955c27c2130c 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/CarouselItem/CarouselItem.types.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/CarouselItem/CarouselItem.types.ts
@@ -1,4 +1,4 @@
-import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
export type CarouselItemSlots = {
/**
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/CarouselItem/Carouseltem.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/CarouselItem/Carouseltem.tsx
index 097b218a0afb3..c4215f04e286e 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/CarouselItem/Carouseltem.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/CarouselItem/Carouseltem.tsx
@@ -3,7 +3,7 @@
import * as React from 'react';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { CarouselItemProps } from './CarouselItem.types';
+import type { CarouselItemProps } from './CarouselItem.types';
import { useCarouselItem_unstable } from './useCarouselItem';
import { renderCarouselItem_unstable } from './renderCarouselItem';
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/CarouselItem/useCarouselItem.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/CarouselItem/useCarouselItem.ts
index 4fed6532471a4..5d24c6567ae94 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/CarouselItem/useCarouselItem.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/CarouselItem/useCarouselItem.ts
@@ -1,8 +1,8 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import { CarouselItemProps, CarouselItemState } from './CarouselItem.types';
+import type { CarouselItemProps, CarouselItemState } from './CarouselItem.types';
import { useCarouselContext_unstable } from '../CarouselContext';
import { CAROUSEL_ACTIVE_ITEM, CAROUSEL_ITEM } from '../constants';
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts
index 597056f18b264..49a15345e528c 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
import type { TeachingPopoverCarouselProps, TeachingPopoverCarouselState } from './TeachingPopoverCarousel.types';
import { usePopoverContext_unstable } from '@fluentui/react-popover';
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.types.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.types.ts
index 37ed889af532b..c164184104c83 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.types.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.types.ts
@@ -1,5 +1,5 @@
-import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { CarouselItemProps } from '../TeachingPopoverCarousel/Carousel/CarouselItem/CarouselItem.types';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { CarouselItemProps } from '../TeachingPopoverCarousel/Carousel/CarouselItem/CarouselItem.types';
export type TeachingPopoverCarouselCardSlots = {
/**
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselCard/renderTeachingPopoverCarouselCard.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselCard/renderTeachingPopoverCarouselCard.tsx
index 37681c68181be..a0dd5132ef097 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselCard/renderTeachingPopoverCarouselCard.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselCard/renderTeachingPopoverCarouselCard.tsx
@@ -1,7 +1,7 @@
/** @jsxRuntime automatic */
/** @jsxImportSource @fluentui/react-jsx-runtime */
import type { TeachingPopoverCarouselCardState } from './TeachingPopoverCarouselCard.types';
-import { TeachingPopoverCarouselCardSlots } from './TeachingPopoverCarouselCard.types';
+import type { TeachingPopoverCarouselCardSlots } from './TeachingPopoverCarouselCard.types';
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCard.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCard.ts
index b4431b0ba3d6b..c72187742e278 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCard.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCard.ts
@@ -1,5 +1,5 @@
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
import type {
TeachingPopoverCarouselCardProps,
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.types.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.types.ts
index 965a1b01aa7fe..fb99e91c9dc93 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.types.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type { TeachingPopoverCarouselFooterButtonProps } from '../TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.types';
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooter/renderTeachingPopoverCarouselFooter.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooter/renderTeachingPopoverCarouselFooter.tsx
index 752aafcabbf9b..9b1762e8ce519 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooter/renderTeachingPopoverCarouselFooter.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooter/renderTeachingPopoverCarouselFooter.tsx
@@ -1,7 +1,7 @@
/** @jsxRuntime automatic */
/** @jsxImportSource @fluentui/react-jsx-runtime */
import type { TeachingPopoverCarouselFooterState } from './TeachingPopoverCarouselFooter.types';
-import { TeachingPopoverCarouselFooterSlots } from './TeachingPopoverCarouselFooter.types';
+import type { TeachingPopoverCarouselFooterSlots } from './TeachingPopoverCarouselFooter.types';
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooter.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooter.ts
index 8415a20ab1a73..27c09dd5eb1d1 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooter.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooter.ts
@@ -1,5 +1,5 @@
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
import type {
TeachingPopoverCarouselFooterProps,
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.test.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.test.tsx
index 262d510fb8a67..43c05e046df4a 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.test.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { isConformant } from '../../testing/isConformant';
import { TeachingPopoverCarouselFooterButton } from './TeachingPopoverCarouselFooterButton';
-import { TeachingPopoverCarouselFooterButtonProps } from './TeachingPopoverCarouselFooterButton.types';
+import type { TeachingPopoverCarouselFooterButtonProps } from './TeachingPopoverCarouselFooterButton.types';
describe('TeachingPopoverCarouselFooterButton', () => {
isConformant({
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.types.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.types.ts
index afa2757723475..1d8ebe1d2ad47 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.types.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.types.ts
@@ -1,8 +1,8 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { PopoverContextValue } from '@fluentui/react-popover';
-import { ButtonProps, ButtonState } from '@fluentui/react-button';
-import { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import type { PopoverContextValue } from '@fluentui/react-popover';
+import type { ButtonProps, ButtonState } from '@fluentui/react-button';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
export type TeachingPopoverCarouselFooterButtonSlots = {
root: NonNullable>>;
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.ts
index d2d86f1a6cedd..caa1bcca08f34 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.ts
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type * as React from 'react';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
export type TeachingPopoverCarouselNavSlots = {
/**
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/renderTeachingPopoverCarouselNav.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/renderTeachingPopoverCarouselNav.tsx
index 556eb8d2b86b0..ab1fae3cfec77 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/renderTeachingPopoverCarouselNav.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/renderTeachingPopoverCarouselNav.tsx
@@ -3,7 +3,7 @@
import type { TeachingPopoverCarouselNavState } from './TeachingPopoverCarouselNav.types';
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { TeachingPopoverCarouselNavSlots } from './TeachingPopoverCarouselNav.types';
+import type { TeachingPopoverCarouselNavSlots } from './TeachingPopoverCarouselNav.types';
import { ValueIdContextProvider } from './valueIdContext';
/**
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNav.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNav.tsx
index 6fb21717da50e..9ca93e34f8c1d 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNav.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNav.tsx
@@ -2,7 +2,7 @@
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
import type {
TeachingPopoverCarouselNavProps,
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.types.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.types.ts
index c715957b1bc3d..b743019dae7ea 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.types.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.types.ts
@@ -1,5 +1,5 @@
-import { ARIAButtonSlotProps } from '@fluentui/react-aria';
-import { PopoverContextValue } from '@fluentui/react-popover';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import type { PopoverContextValue } from '@fluentui/react-popover';
import type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';
export type TeachingPopoverCarouselNavButtonSlots = {
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.tsx
index bd68823063b03..b167b1079c69f 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.tsx
@@ -1,7 +1,8 @@
'use client';
-import * as React from 'react';
-import { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';
+import type * as React from 'react';
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import { useARIAButtonProps } from '@fluentui/react-aria';
import { usePopoverContext_unstable } from '@fluentui/react-popover';
import { useTabsterAttributes } from '@fluentui/react-tabster';
import { getIntrinsicElementProps, isHTMLElement, slot, useEventCallback } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.types.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.types.ts
index 6e74ec192bf37..abb03458398df 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.types.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
export type TeachingPopoverCarouselPageCountSlots = {
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCount.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCount.ts
index 7971d26ddf2bb..0549d05d383af 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCount.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCount.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type {
TeachingPopoverCarouselPageCountProps,
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/TeachingPopoverFooter.types.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/TeachingPopoverFooter.types.ts
index f7f3c09ad7138..a9bb5e44849dd 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/TeachingPopoverFooter.types.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/TeachingPopoverFooter.types.ts
@@ -1,6 +1,6 @@
-import { Button } from '@fluentui/react-button';
-import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { PopoverContextValue } from '@fluentui/react-popover';
+import type { Button } from '@fluentui/react-button';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { PopoverContextValue } from '@fluentui/react-popover';
export type TeachingPopoverFooterSlots = {
/**
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/renderTeachingPopoverFooter.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/renderTeachingPopoverFooter.tsx
index e0c0d180c5f1f..ed3b11855f8b5 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/renderTeachingPopoverFooter.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/renderTeachingPopoverFooter.tsx
@@ -1,7 +1,7 @@
/** @jsxRuntime automatic */
/** @jsxImportSource @fluentui/react-jsx-runtime */
import type { TeachingPopoverFooterState } from './TeachingPopoverFooter.types';
-import { TeachingPopoverFooterSlots } from './TeachingPopoverFooter.types';
+import type { TeachingPopoverFooterSlots } from './TeachingPopoverFooter.types';
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/useTeachingPopoverFooter.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/useTeachingPopoverFooter.ts
index 879bcceee7211..34d4b74bcecad 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/useTeachingPopoverFooter.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/useTeachingPopoverFooter.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';
import type { TeachingPopoverFooterProps, TeachingPopoverFooterState } from './TeachingPopoverFooter.types';
import { Button } from '@fluentui/react-button';
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/TeachingPopoverHeader.test.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/TeachingPopoverHeader.test.tsx
index 28e8fd6cd791c..7a4d67fd0e771 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/TeachingPopoverHeader.test.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/TeachingPopoverHeader.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { isConformant } from '../../testing/isConformant';
import { TeachingPopoverHeader } from './TeachingPopoverHeader';
-import { TeachingPopoverHeaderProps } from './TeachingPopoverHeader.types';
+import type { TeachingPopoverHeaderProps } from './TeachingPopoverHeader.types';
describe('TeachingPopoverHeader', () => {
isConformant({
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/TeachingPopoverHeader.types.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/TeachingPopoverHeader.types.ts
index fb9780a46fddf..f36d614a6ec61 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/TeachingPopoverHeader.types.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/TeachingPopoverHeader.types.ts
@@ -1,5 +1,5 @@
-import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { PopoverContextValue } from '@fluentui/react-popover';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { PopoverContextValue } from '@fluentui/react-popover';
export type TeachingPopoverHeaderSlots = {
/**
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/renderTeachingPopoverHeader.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/renderTeachingPopoverHeader.tsx
index fb67c0d9710cd..2a4d5b3575a87 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/renderTeachingPopoverHeader.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/renderTeachingPopoverHeader.tsx
@@ -1,7 +1,7 @@
/** @jsxRuntime automatic */
/** @jsxImportSource @fluentui/react-jsx-runtime */
import type { TeachingPopoverHeaderState } from './TeachingPopoverHeader.types';
-import { TeachingPopoverHeaderSlots } from './TeachingPopoverHeader.types';
+import type { TeachingPopoverHeaderSlots } from './TeachingPopoverHeader.types';
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.tsx
index 169ce72a2f31c..cff0114181646 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.tsx
@@ -3,7 +3,7 @@
import * as React from 'react';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
-import { TeachingPopoverSurfaceProps } from './TeachingPopoverSurface.types';
+import type { TeachingPopoverSurfaceProps } from './TeachingPopoverSurface.types';
import { useTeachingPopoverSurface_unstable } from './useTeachingPopoverSurface';
import { useTeachingPopoverSurfaceStyles_unstable } from './useTeachingPopoverSurfaceStyles.styles';
import { renderTeachingPopoverSurface_unstable } from './renderTeachingPopoverSurface';
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.types.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.types.ts
index 94df341d3082c..2aac058d5a708 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.types.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.types.ts
@@ -1,6 +1,6 @@
import type { ComponentProps } from '@fluentui/react-utilities';
-import { PopoverSurfaceState } from '@fluentui/react-popover';
-import { PopoverSurfaceSlots } from '@fluentui/react-popover';
+import type { PopoverSurfaceState } from '@fluentui/react-popover';
+import type { PopoverSurfaceSlots } from '@fluentui/react-popover';
/**
* TeachingPopoverSurface Props
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/useTeachingPopoverSurface.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/useTeachingPopoverSurface.ts
index c37b8d1819cf6..9c046e39e8f67 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/useTeachingPopoverSurface.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/useTeachingPopoverSurface.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import type { TeachingPopoverSurfaceProps, TeachingPopoverSurfaceState } from './TeachingPopoverSurface.types';
import { usePopoverSurface_unstable } from '@fluentui/react-popover';
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts
index f78933d906bc2..54accc9a7fafa 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts
@@ -2,7 +2,7 @@
import { makeStyles, mergeClasses } from '@griffel/react';
import type { SlotClassNames } from '@fluentui/react-utilities';
-import { TeachingPopoverSurfaceSlots, TeachingPopoverSurfaceState } from './TeachingPopoverSurface.types';
+import type { TeachingPopoverSurfaceSlots, TeachingPopoverSurfaceState } from './TeachingPopoverSurface.types';
import { usePopoverSurfaceStyles_unstable } from '@fluentui/react-popover';
import { tokens } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/TeachingPopoverTitle.test.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/TeachingPopoverTitle.test.tsx
index dcdacc925ae0c..45b89c83d3bde 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/TeachingPopoverTitle.test.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/TeachingPopoverTitle.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { isConformant } from '../../testing/isConformant';
import { TeachingPopoverTitle } from './TeachingPopoverTitle';
-import { TeachingPopoverTitleProps } from './TeachingPopoverTitle.types';
+import type { TeachingPopoverTitleProps } from './TeachingPopoverTitle.types';
describe('TeachingPopoverTitle', () => {
isConformant({
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/TeachingPopoverTitle.types.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/TeachingPopoverTitle.types.ts
index c98f709d3737f..afa10cb02e0fc 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/TeachingPopoverTitle.types.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/TeachingPopoverTitle.types.ts
@@ -1,4 +1,4 @@
-import { PopoverContextValue } from '@fluentui/react-popover';
+import type { PopoverContextValue } from '@fluentui/react-popover';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
export type TeachingPopoverTitleSlots = {
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/renderTeachingPopoverTitle.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/renderTeachingPopoverTitle.tsx
index 5b4a2b32ac9d2..f8d3511ff1baa 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/renderTeachingPopoverTitle.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/renderTeachingPopoverTitle.tsx
@@ -3,7 +3,7 @@
import type { TeachingPopoverTitleState } from './TeachingPopoverTitle.types';
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import { TeachingPopoverTitleSlots } from './TeachingPopoverTitle.types';
+import type { TeachingPopoverTitleSlots } from './TeachingPopoverTitle.types';
/**
* Render the final JSX of TeachingPopoverTitle
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/TeachingPopoverTrigger.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/TeachingPopoverTrigger.tsx
index 0977a5b862c2d..c1ee777fcbbca 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/TeachingPopoverTrigger.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/TeachingPopoverTrigger.tsx
@@ -1,8 +1,8 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import type { FluentTriggerComponent } from '@fluentui/react-utilities';
-import { TeachingPopoverTriggerProps } from './TeachingPopoverTrigger.types';
+import type { TeachingPopoverTriggerProps } from './TeachingPopoverTrigger.types';
import { renderTeachingPopoverTrigger_unstable } from './renderTeachingPopoverTrigger';
import { useTeachingPopoverTrigger_unstable } from './useTeachingPopoverTrigger';
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/TeachingPopoverTrigger.types.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/TeachingPopoverTrigger.types.ts
index 54895f47311d7..1b635119fabaa 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/TeachingPopoverTrigger.types.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/TeachingPopoverTrigger.types.ts
@@ -1,4 +1,4 @@
-import { PopoverTriggerChildProps, PopoverTriggerProps, PopoverTriggerState } from '@fluentui/react-popover';
+import type { PopoverTriggerChildProps, PopoverTriggerProps, PopoverTriggerState } from '@fluentui/react-popover';
/**
* TeachingPopoverTrigger Props
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/renderTeachingPopoverTrigger.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/renderTeachingPopoverTrigger.tsx
index 1020027204c0c..799c8444ec078 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/renderTeachingPopoverTrigger.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/renderTeachingPopoverTrigger.tsx
@@ -1,5 +1,5 @@
import type { JSXElement } from '@fluentui/react-utilities';
-import { TeachingPopoverTriggerState } from './TeachingPopoverTrigger.types';
+import type { TeachingPopoverTriggerState } from './TeachingPopoverTrigger.types';
/**
* Render the final JSX of TeachingPopoverTrigger
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/useTeachingPopoverTrigger.ts b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/useTeachingPopoverTrigger.ts
index 7416c74deaf0b..fce8b31a76a62 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/useTeachingPopoverTrigger.ts
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/useTeachingPopoverTrigger.ts
@@ -1,6 +1,6 @@
'use client';
-import { TeachingPopoverTriggerProps, TeachingPopoverTriggerState } from './TeachingPopoverTrigger.types';
+import type { TeachingPopoverTriggerProps, TeachingPopoverTriggerState } from './TeachingPopoverTrigger.types';
import { usePopoverTrigger_unstable } from '@fluentui/react-popover';
/**
diff --git a/packages/react-components/react-teaching-popover/library/src/testing/mockTeachingPopoverCarouselContext.ts b/packages/react-components/react-teaching-popover/library/src/testing/mockTeachingPopoverCarouselContext.ts
index 97b423cef21d2..ee4d5a05dc003 100644
--- a/packages/react-components/react-teaching-popover/library/src/testing/mockTeachingPopoverCarouselContext.ts
+++ b/packages/react-components/react-teaching-popover/library/src/testing/mockTeachingPopoverCarouselContext.ts
@@ -1,7 +1,7 @@
'use client';
+import type { CarouselContextValue } from '../components/TeachingPopoverCarousel/Carousel/CarouselContext';
import {
- CarouselContextValue,
carouselContextDefaultValue,
useCarouselContext_unstable,
} from '../components/TeachingPopoverCarousel/Carousel/CarouselContext';
diff --git a/packages/react-components/react-text/library/etc/react-text.api.md b/packages/react-components/react-text/library/etc/react-text.api.md
index 783c0287bc491..150f5bb3cefd1 100644
--- a/packages/react-components/react-text/library/etc/react-text.api.md
+++ b/packages/react-components/react-text/library/etc/react-text.api.md
@@ -8,9 +8,9 @@ import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import * as React_2 from 'react';
+import type * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
// @public
export const Body1: React_2.FunctionComponent;
diff --git a/packages/react-components/react-text/library/src/components/Text/Text.test.tsx b/packages/react-components/react-text/library/src/components/Text/Text.test.tsx
index b5ebefe48c1aa..91ceb279c7a3f 100644
--- a/packages/react-components/react-text/library/src/components/Text/Text.test.tsx
+++ b/packages/react-components/react-text/library/src/components/Text/Text.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { Text } from './Text';
import { isConformant } from '../../testing/isConformant';
-import { TextProps } from './Text.types';
+import type { TextProps } from './Text.types';
describe('Text', () => {
isConformant({
diff --git a/packages/react-components/react-text/library/src/components/Text/useText.ts b/packages/react-components/react-text/library/src/components/Text/useText.ts
index ef98ea37224d7..d860077b3d181 100644
--- a/packages/react-components/react-text/library/src/components/Text/useText.ts
+++ b/packages/react-components/react-text/library/src/components/Text/useText.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { TextProps, TextState } from './Text.types';
diff --git a/packages/react-components/react-text/library/src/components/Text/useTextStyles.styles.ts b/packages/react-components/react-text/library/src/components/Text/useTextStyles.styles.ts
index f89a396cffb18..c83a0edbcf35a 100644
--- a/packages/react-components/react-text/library/src/components/Text/useTextStyles.styles.ts
+++ b/packages/react-components/react-text/library/src/components/Text/useTextStyles.styles.ts
@@ -3,7 +3,7 @@
import { makeStyles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import type { TextSlots, TextState } from './Text.types';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
export const textClassNames: SlotClassNames = {
root: 'fui-Text',
diff --git a/packages/react-components/react-text/library/src/components/presets/Body1/Body1.tsx b/packages/react-components/react-text/library/src/components/presets/Body1/Body1.tsx
index f189bcf8a3553..2689944f502c1 100644
--- a/packages/react-components/react-text/library/src/components/presets/Body1/Body1.tsx
+++ b/packages/react-components/react-text/library/src/components/presets/Body1/Body1.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createPreset } from '../createPreset';
import type { TextPresetProps } from '../../Text/Text.types';
import { body1ClassNames, useBody1Styles } from './useBody1Styles.styles';
diff --git a/packages/react-components/react-text/library/src/components/presets/Body1/useBody1Styles.styles.ts b/packages/react-components/react-text/library/src/components/presets/Body1/useBody1Styles.styles.ts
index 277990ca0fc50..76ff19470f960 100644
--- a/packages/react-components/react-text/library/src/components/presets/Body1/useBody1Styles.styles.ts
+++ b/packages/react-components/react-text/library/src/components/presets/Body1/useBody1Styles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextSlots } from '../../Text/Text.types';
import { typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-text/library/src/components/presets/Body1Strong/Body1Strong.tsx b/packages/react-components/react-text/library/src/components/presets/Body1Strong/Body1Strong.tsx
index 8e1f68e8272fd..07893cf2c8cf5 100644
--- a/packages/react-components/react-text/library/src/components/presets/Body1Strong/Body1Strong.tsx
+++ b/packages/react-components/react-text/library/src/components/presets/Body1Strong/Body1Strong.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createPreset } from '../createPreset';
import type { TextPresetProps } from '../../Text/Text.types';
import { body1StrongClassNames, useBody1StrongStyles } from './useBody1StrongStyles.styles';
diff --git a/packages/react-components/react-text/library/src/components/presets/Body1Strong/useBody1StrongStyles.styles.ts b/packages/react-components/react-text/library/src/components/presets/Body1Strong/useBody1StrongStyles.styles.ts
index a8810e9a85add..af4a2c1b8c237 100644
--- a/packages/react-components/react-text/library/src/components/presets/Body1Strong/useBody1StrongStyles.styles.ts
+++ b/packages/react-components/react-text/library/src/components/presets/Body1Strong/useBody1StrongStyles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextSlots } from '../../Text/Text.types';
import { typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-text/library/src/components/presets/Body1Stronger/Body1Stronger.tsx b/packages/react-components/react-text/library/src/components/presets/Body1Stronger/Body1Stronger.tsx
index a47e91626b53f..8855e7d5f7cca 100644
--- a/packages/react-components/react-text/library/src/components/presets/Body1Stronger/Body1Stronger.tsx
+++ b/packages/react-components/react-text/library/src/components/presets/Body1Stronger/Body1Stronger.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createPreset } from '../createPreset';
import type { TextPresetProps } from '../../Text/Text.types';
import { body1StrongerClassNames, useBody1StrongerStyles } from './useBody1StrongerStyles.styles';
diff --git a/packages/react-components/react-text/library/src/components/presets/Body1Stronger/useBody1StrongerStyles.styles.ts b/packages/react-components/react-text/library/src/components/presets/Body1Stronger/useBody1StrongerStyles.styles.ts
index 247e2242639a8..2733de79920eb 100644
--- a/packages/react-components/react-text/library/src/components/presets/Body1Stronger/useBody1StrongerStyles.styles.ts
+++ b/packages/react-components/react-text/library/src/components/presets/Body1Stronger/useBody1StrongerStyles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextSlots } from '../../Text/Text.types';
import { typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-text/library/src/components/presets/Body2/Body2.tsx b/packages/react-components/react-text/library/src/components/presets/Body2/Body2.tsx
index 9f08b8928fb8d..30be2faf7c99d 100644
--- a/packages/react-components/react-text/library/src/components/presets/Body2/Body2.tsx
+++ b/packages/react-components/react-text/library/src/components/presets/Body2/Body2.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createPreset } from '../createPreset';
import type { TextPresetProps } from '../../Text/Text.types';
import { body2ClassNames, useBody2Styles } from './useBody2Styles.styles';
diff --git a/packages/react-components/react-text/library/src/components/presets/Body2/useBody2Styles.styles.ts b/packages/react-components/react-text/library/src/components/presets/Body2/useBody2Styles.styles.ts
index 1c4b97e59dab2..3fe2168c572a1 100644
--- a/packages/react-components/react-text/library/src/components/presets/Body2/useBody2Styles.styles.ts
+++ b/packages/react-components/react-text/library/src/components/presets/Body2/useBody2Styles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextSlots } from '../../Text/Text.types';
import { typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-text/library/src/components/presets/Caption1/Caption1.tsx b/packages/react-components/react-text/library/src/components/presets/Caption1/Caption1.tsx
index 6c9418ccf5f73..a9c4da53b7a95 100644
--- a/packages/react-components/react-text/library/src/components/presets/Caption1/Caption1.tsx
+++ b/packages/react-components/react-text/library/src/components/presets/Caption1/Caption1.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createPreset } from '../createPreset';
import type { TextPresetProps } from '../../Text/Text.types';
import { caption1ClassNames, useCaption1Styles } from './useCaption1Styles.styles';
diff --git a/packages/react-components/react-text/library/src/components/presets/Caption1/useCaption1Styles.styles.ts b/packages/react-components/react-text/library/src/components/presets/Caption1/useCaption1Styles.styles.ts
index a74ed8c0e2da4..5b80546215caf 100644
--- a/packages/react-components/react-text/library/src/components/presets/Caption1/useCaption1Styles.styles.ts
+++ b/packages/react-components/react-text/library/src/components/presets/Caption1/useCaption1Styles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextSlots } from '../../Text/Text.types';
import { typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-text/library/src/components/presets/Caption1Strong/Caption1Strong.tsx b/packages/react-components/react-text/library/src/components/presets/Caption1Strong/Caption1Strong.tsx
index 8160e7f627350..657302397c202 100644
--- a/packages/react-components/react-text/library/src/components/presets/Caption1Strong/Caption1Strong.tsx
+++ b/packages/react-components/react-text/library/src/components/presets/Caption1Strong/Caption1Strong.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createPreset } from '../createPreset';
import type { TextPresetProps } from '../../Text/Text.types';
import { caption1StrongClassNames, useCaption1StrongStyles } from './useCaption1StrongStyles.styles';
diff --git a/packages/react-components/react-text/library/src/components/presets/Caption1Strong/useCaption1StrongStyles.styles.ts b/packages/react-components/react-text/library/src/components/presets/Caption1Strong/useCaption1StrongStyles.styles.ts
index a0386ab769e51..f807f92ce9a3e 100644
--- a/packages/react-components/react-text/library/src/components/presets/Caption1Strong/useCaption1StrongStyles.styles.ts
+++ b/packages/react-components/react-text/library/src/components/presets/Caption1Strong/useCaption1StrongStyles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextSlots } from '../../Text/Text.types';
import { typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-text/library/src/components/presets/Caption1Stronger/Caption1Stronger.tsx b/packages/react-components/react-text/library/src/components/presets/Caption1Stronger/Caption1Stronger.tsx
index 11619929e4196..86a692a7a3c72 100644
--- a/packages/react-components/react-text/library/src/components/presets/Caption1Stronger/Caption1Stronger.tsx
+++ b/packages/react-components/react-text/library/src/components/presets/Caption1Stronger/Caption1Stronger.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createPreset } from '../createPreset';
import type { TextPresetProps } from '../../Text/Text.types';
import { caption1StrongerClassNames, useCaption1StrongerStyles } from './useCaption1Stronger.styles';
diff --git a/packages/react-components/react-text/library/src/components/presets/Caption1Stronger/useCaption1Stronger.styles.ts b/packages/react-components/react-text/library/src/components/presets/Caption1Stronger/useCaption1Stronger.styles.ts
index 226582248385e..6f443937f9a57 100644
--- a/packages/react-components/react-text/library/src/components/presets/Caption1Stronger/useCaption1Stronger.styles.ts
+++ b/packages/react-components/react-text/library/src/components/presets/Caption1Stronger/useCaption1Stronger.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextSlots } from '../../Text/Text.types';
import { typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-text/library/src/components/presets/Caption2/Caption2.tsx b/packages/react-components/react-text/library/src/components/presets/Caption2/Caption2.tsx
index 7007bf238e235..28d6c52fd05db 100644
--- a/packages/react-components/react-text/library/src/components/presets/Caption2/Caption2.tsx
+++ b/packages/react-components/react-text/library/src/components/presets/Caption2/Caption2.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createPreset } from '../createPreset';
import type { TextPresetProps } from '../../Text/Text.types';
import { caption2ClassNames, useCaption2Styles } from './useCaption2Styles.styles';
diff --git a/packages/react-components/react-text/library/src/components/presets/Caption2/useCaption2Styles.styles.ts b/packages/react-components/react-text/library/src/components/presets/Caption2/useCaption2Styles.styles.ts
index aec9348a203c3..d1ae4a3dbb564 100644
--- a/packages/react-components/react-text/library/src/components/presets/Caption2/useCaption2Styles.styles.ts
+++ b/packages/react-components/react-text/library/src/components/presets/Caption2/useCaption2Styles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextSlots } from '../../Text/Text.types';
import { typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-text/library/src/components/presets/Caption2Strong/Caption2Strong.tsx b/packages/react-components/react-text/library/src/components/presets/Caption2Strong/Caption2Strong.tsx
index 435eb255c3d66..2462f5c0a66fe 100644
--- a/packages/react-components/react-text/library/src/components/presets/Caption2Strong/Caption2Strong.tsx
+++ b/packages/react-components/react-text/library/src/components/presets/Caption2Strong/Caption2Strong.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createPreset } from '../createPreset';
import type { TextPresetProps } from '../../Text/Text.types';
diff --git a/packages/react-components/react-text/library/src/components/presets/Caption2Strong/useCaption2StrongStyles.styles.ts b/packages/react-components/react-text/library/src/components/presets/Caption2Strong/useCaption2StrongStyles.styles.ts
index 3aee3e8e3af5c..90135e4c4e1bd 100644
--- a/packages/react-components/react-text/library/src/components/presets/Caption2Strong/useCaption2StrongStyles.styles.ts
+++ b/packages/react-components/react-text/library/src/components/presets/Caption2Strong/useCaption2StrongStyles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextSlots } from '../../Text/Text.types';
import { typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-text/library/src/components/presets/Display/Display.tsx b/packages/react-components/react-text/library/src/components/presets/Display/Display.tsx
index 528145be68c6e..dc6366f7f83fa 100644
--- a/packages/react-components/react-text/library/src/components/presets/Display/Display.tsx
+++ b/packages/react-components/react-text/library/src/components/presets/Display/Display.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createPreset } from '../createPreset';
import type { TextPresetProps } from '../../Text/Text.types';
import { displayClassNames, useDisplayStyles } from './useDisplayStyles.styles';
diff --git a/packages/react-components/react-text/library/src/components/presets/Display/useDisplayStyles.styles.ts b/packages/react-components/react-text/library/src/components/presets/Display/useDisplayStyles.styles.ts
index 2089657570565..ddca44daee5ed 100644
--- a/packages/react-components/react-text/library/src/components/presets/Display/useDisplayStyles.styles.ts
+++ b/packages/react-components/react-text/library/src/components/presets/Display/useDisplayStyles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextSlots } from '../../Text/Text.types';
import { typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-text/library/src/components/presets/LargeTitle/LargeTitle.tsx b/packages/react-components/react-text/library/src/components/presets/LargeTitle/LargeTitle.tsx
index 2b7585cf43adb..b43157f24d5af 100644
--- a/packages/react-components/react-text/library/src/components/presets/LargeTitle/LargeTitle.tsx
+++ b/packages/react-components/react-text/library/src/components/presets/LargeTitle/LargeTitle.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createPreset } from '../createPreset';
import type { TextPresetProps } from '../../Text/Text.types';
import { largeTitleClassNames, useLargeTitleStyles } from './useLargeTitleStyles.styles';
diff --git a/packages/react-components/react-text/library/src/components/presets/LargeTitle/useLargeTitleStyles.styles.ts b/packages/react-components/react-text/library/src/components/presets/LargeTitle/useLargeTitleStyles.styles.ts
index 8a8e00ebd4338..fd97860312b57 100644
--- a/packages/react-components/react-text/library/src/components/presets/LargeTitle/useLargeTitleStyles.styles.ts
+++ b/packages/react-components/react-text/library/src/components/presets/LargeTitle/useLargeTitleStyles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextSlots } from '../../Text/Text.types';
import { typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-text/library/src/components/presets/Subtitle1/Subtitle1.tsx b/packages/react-components/react-text/library/src/components/presets/Subtitle1/Subtitle1.tsx
index b4d785dfe7853..e6ab97c4086bf 100644
--- a/packages/react-components/react-text/library/src/components/presets/Subtitle1/Subtitle1.tsx
+++ b/packages/react-components/react-text/library/src/components/presets/Subtitle1/Subtitle1.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createPreset } from '../createPreset';
import type { TextPresetProps } from '../../Text/Text.types';
import { subtitle1ClassNames, useSubtitle1Styles } from './useSubtitle1Styles.styles';
diff --git a/packages/react-components/react-text/library/src/components/presets/Subtitle1/useSubtitle1Styles.styles.ts b/packages/react-components/react-text/library/src/components/presets/Subtitle1/useSubtitle1Styles.styles.ts
index 5f0be2615bd4e..9b2df31eecf24 100644
--- a/packages/react-components/react-text/library/src/components/presets/Subtitle1/useSubtitle1Styles.styles.ts
+++ b/packages/react-components/react-text/library/src/components/presets/Subtitle1/useSubtitle1Styles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextSlots } from '../../Text/Text.types';
import { typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-text/library/src/components/presets/Subtitle2/Subtitle2.tsx b/packages/react-components/react-text/library/src/components/presets/Subtitle2/Subtitle2.tsx
index a1ac96038c022..a8dac2fbea9c3 100644
--- a/packages/react-components/react-text/library/src/components/presets/Subtitle2/Subtitle2.tsx
+++ b/packages/react-components/react-text/library/src/components/presets/Subtitle2/Subtitle2.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createPreset } from '../createPreset';
import type { TextPresetProps } from '../../Text/Text.types';
import { subtitle2ClassNames, useSubtitle2Styles } from './useSubtitle2Styles.styles';
diff --git a/packages/react-components/react-text/library/src/components/presets/Subtitle2/useSubtitle2Styles.styles.ts b/packages/react-components/react-text/library/src/components/presets/Subtitle2/useSubtitle2Styles.styles.ts
index 790b1c3f95b81..0e95f6b4db808 100644
--- a/packages/react-components/react-text/library/src/components/presets/Subtitle2/useSubtitle2Styles.styles.ts
+++ b/packages/react-components/react-text/library/src/components/presets/Subtitle2/useSubtitle2Styles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextSlots } from '../../Text/Text.types';
import { typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-text/library/src/components/presets/Subtitle2Stronger/Subtitle2Stronger.tsx b/packages/react-components/react-text/library/src/components/presets/Subtitle2Stronger/Subtitle2Stronger.tsx
index aea8dc7db02d3..b70c0c3421cb1 100644
--- a/packages/react-components/react-text/library/src/components/presets/Subtitle2Stronger/Subtitle2Stronger.tsx
+++ b/packages/react-components/react-text/library/src/components/presets/Subtitle2Stronger/Subtitle2Stronger.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createPreset } from '../createPreset';
import type { TextPresetProps } from '../../Text/Text.types';
import { subtitle2StrongerClassNames, useSubtitle2StrongerStyles } from './useSubtitle2Stronger.styles';
diff --git a/packages/react-components/react-text/library/src/components/presets/Subtitle2Stronger/useSubtitle2Stronger.styles.ts b/packages/react-components/react-text/library/src/components/presets/Subtitle2Stronger/useSubtitle2Stronger.styles.ts
index 1ead2f1b7b258..7156b8eefba72 100644
--- a/packages/react-components/react-text/library/src/components/presets/Subtitle2Stronger/useSubtitle2Stronger.styles.ts
+++ b/packages/react-components/react-text/library/src/components/presets/Subtitle2Stronger/useSubtitle2Stronger.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextSlots } from '../../Text/Text.types';
import { typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-text/library/src/components/presets/Title1/Title1.tsx b/packages/react-components/react-text/library/src/components/presets/Title1/Title1.tsx
index b4d7acc9e064a..d7954698cc75f 100644
--- a/packages/react-components/react-text/library/src/components/presets/Title1/Title1.tsx
+++ b/packages/react-components/react-text/library/src/components/presets/Title1/Title1.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createPreset } from '../createPreset';
import type { TextPresetProps } from '../../Text/Text.types';
import { title1ClassNames, useTitle1Styles } from './useTitle1Styles.styles';
diff --git a/packages/react-components/react-text/library/src/components/presets/Title1/useTitle1Styles.styles.ts b/packages/react-components/react-text/library/src/components/presets/Title1/useTitle1Styles.styles.ts
index 312451d6ab92b..d2b75041e35bc 100644
--- a/packages/react-components/react-text/library/src/components/presets/Title1/useTitle1Styles.styles.ts
+++ b/packages/react-components/react-text/library/src/components/presets/Title1/useTitle1Styles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextSlots } from '../../Text/Text.types';
import { typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-text/library/src/components/presets/Title2/Title2.tsx b/packages/react-components/react-text/library/src/components/presets/Title2/Title2.tsx
index f327a6488ec6d..4cba133f7f9f8 100644
--- a/packages/react-components/react-text/library/src/components/presets/Title2/Title2.tsx
+++ b/packages/react-components/react-text/library/src/components/presets/Title2/Title2.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createPreset } from '../createPreset';
import type { TextPresetProps } from '../../Text/Text.types';
import { title2ClassNames, useTitle2Styles } from './useTitle2Styles.styles';
diff --git a/packages/react-components/react-text/library/src/components/presets/Title2/useTitle2Styles.styles.ts b/packages/react-components/react-text/library/src/components/presets/Title2/useTitle2Styles.styles.ts
index 1f079a61269be..2359b0c3a8345 100644
--- a/packages/react-components/react-text/library/src/components/presets/Title2/useTitle2Styles.styles.ts
+++ b/packages/react-components/react-text/library/src/components/presets/Title2/useTitle2Styles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextSlots } from '../../Text/Text.types';
import { typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-text/library/src/components/presets/Title3/Title3.tsx b/packages/react-components/react-text/library/src/components/presets/Title3/Title3.tsx
index 243acfba81b68..5cdb52a577dac 100644
--- a/packages/react-components/react-text/library/src/components/presets/Title3/Title3.tsx
+++ b/packages/react-components/react-text/library/src/components/presets/Title3/Title3.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { createPreset } from '../createPreset';
import type { TextPresetProps } from '../../Text/Text.types';
import { title3ClassNames, useTitle3Styles } from './useTitle3Styles.styles';
diff --git a/packages/react-components/react-text/library/src/components/presets/Title3/useTitle3Styles.styles.ts b/packages/react-components/react-text/library/src/components/presets/Title3/useTitle3Styles.styles.ts
index 850ab97471517..f2aa4d20d090c 100644
--- a/packages/react-components/react-text/library/src/components/presets/Title3/useTitle3Styles.styles.ts
+++ b/packages/react-components/react-text/library/src/components/presets/Title3/useTitle3Styles.styles.ts
@@ -1,7 +1,7 @@
'use client';
import { makeStyles } from '@griffel/react';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextSlots } from '../../Text/Text.types';
import { typographyStyles } from '@fluentui/react-theme';
diff --git a/packages/react-components/react-text/stories/src/Text/index.stories.tsx b/packages/react-components/react-text/stories/src/Text/index.stories.tsx
index 819f66bb2d977..47901c51f6968 100644
--- a/packages/react-components/react-text/stories/src/Text/index.stories.tsx
+++ b/packages/react-components/react-text/stories/src/Text/index.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { Text, Display } from '@fluentui/react-components';
import textDescriptionMd from './TextDescription.md';
import textBestPracticesMd from './TextBestPractices.md';
diff --git a/packages/react-components/react-textarea/library/etc/react-textarea.api.md b/packages/react-components/react-textarea/library/etc/react-textarea.api.md
index 3460cf4a392fd..2d72a20f768fb 100644
--- a/packages/react-components/react-textarea/library/etc/react-textarea.api.md
+++ b/packages/react-components/react-textarea/library/etc/react-textarea.api.md
@@ -8,9 +8,9 @@ import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import * as React_2 from 'react';
+import type * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
// @public
export const renderTextarea_unstable: (state: TextareaBaseState) => JSXElement;
diff --git a/packages/react-components/react-textarea/library/src/components/Textarea/Textarea.test.tsx b/packages/react-components/react-textarea/library/src/components/Textarea/Textarea.test.tsx
index 222cd1e6d6d64..7bc688cfb027f 100644
--- a/packages/react-components/react-textarea/library/src/components/Textarea/Textarea.test.tsx
+++ b/packages/react-components/react-textarea/library/src/components/Textarea/Textarea.test.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { fireEvent, render, RenderResult, screen } from '@testing-library/react';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
import { Field } from '@fluentui/react-field';
import { Textarea } from './Textarea';
import { isConformant } from '../../testing/isConformant';
diff --git a/packages/react-components/react-textarea/library/src/components/Textarea/Textarea.types.ts b/packages/react-components/react-textarea/library/src/components/Textarea/Textarea.types.ts
index a855735c7824e..a2ca3864d3fd8 100644
--- a/packages/react-components/react-textarea/library/src/components/Textarea/Textarea.types.ts
+++ b/packages/react-components/react-textarea/library/src/components/Textarea/Textarea.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
export type TextareaSlots = {
diff --git a/packages/react-components/react-textarea/library/src/components/Textarea/useTextarea.ts b/packages/react-components/react-textarea/library/src/components/Textarea/useTextarea.ts
index 210dfffd66c74..9ebf0f25ef6b2 100644
--- a/packages/react-components/react-textarea/library/src/components/Textarea/useTextarea.ts
+++ b/packages/react-components/react-textarea/library/src/components/Textarea/useTextarea.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useFieldControlProps_unstable } from '@fluentui/react-field';
import { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
import type { TextareaBaseProps, TextareaBaseState, TextareaProps, TextareaState } from './Textarea.types';
diff --git a/packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts b/packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts
index 19ab9a4d8d199..0bb84bafeff3c 100644
--- a/packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts
+++ b/packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts
@@ -2,7 +2,7 @@
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TextareaSlots, TextareaState } from './Textarea.types';
export const textareaClassNames: SlotClassNames = {
diff --git a/packages/react-components/react-theme/stories/src/Theme/colors/FilterButton.stories.tsx b/packages/react-components/react-theme/stories/src/Theme/colors/FilterButton.stories.tsx
index e174f4cd814b2..ab7594eb53a01 100644
--- a/packages/react-components/react-theme/stories/src/Theme/colors/FilterButton.stories.tsx
+++ b/packages/react-components/react-theme/stories/src/Theme/colors/FilterButton.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, MenuCheckedValueChangeEvent, MenuCheckedValueChangeData } from '@fluentui/react-components';
import {
Menu,
MenuTrigger,
@@ -8,8 +8,6 @@ import {
MenuList,
MenuItemRadio,
MenuGroupHeader,
- MenuCheckedValueChangeEvent,
- MenuCheckedValueChangeData,
} from '@fluentui/react-components';
import { FilterRegular } from '@fluentui/react-icons';
diff --git a/packages/react-components/react-theme/stories/src/Theme/colors/ThemeColors.stories.tsx b/packages/react-components/react-theme/stories/src/Theme/colors/ThemeColors.stories.tsx
index f0b106bba320b..bce709b11aba5 100644
--- a/packages/react-components/react-theme/stories/src/Theme/colors/ThemeColors.stories.tsx
+++ b/packages/react-components/react-theme/stories/src/Theme/colors/ThemeColors.stories.tsx
@@ -1,15 +1,13 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, Theme, MenuCheckedValueChangeData } from '@fluentui/react-components';
import {
teamsDarkTheme,
teamsHighContrastTheme,
teamsLightTheme,
webLightTheme,
webDarkTheme,
- Theme,
Input,
makeStyles,
- MenuCheckedValueChangeData,
} from '@fluentui/react-components';
import { ColorRampItem } from './ColorRamp.stories';
diff --git a/packages/react-components/react-theme/stories/src/Theme/typography/ThemeTypography.stories.tsx b/packages/react-components/react-theme/stories/src/Theme/typography/ThemeTypography.stories.tsx
index 7b8eb1308aee9..edee0ade818e4 100644
--- a/packages/react-components/react-theme/stories/src/Theme/typography/ThemeTypography.stories.tsx
+++ b/packages/react-components/react-theme/stories/src/Theme/typography/ThemeTypography.stories.tsx
@@ -1,13 +1,6 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import {
- makeStyles,
- Subtitle2Stronger,
- Text,
- Theme,
- typographyStyles,
- webLightTheme,
-} from '@fluentui/react-components';
+import type { JSXElement, Theme } from '@fluentui/react-components';
+import { makeStyles, Subtitle2Stronger, Text, typographyStyles, webLightTheme } from '@fluentui/react-components';
import type { TypographyStyles } from '@fluentui/react-components';
type TypographyTokens = [token: keyof TypographyStyles, tokenName: string, entries: [string, string][]][];
diff --git a/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/TimePicker.cy.tsx b/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/TimePicker.cy.tsx
index e6b9a6f5d5149..35ad4df08c94b 100644
--- a/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/TimePicker.cy.tsx
+++ b/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/TimePicker.cy.tsx
@@ -3,7 +3,8 @@ import { mount as mountBase } from '@fluentui/scripts-cypress';
import { FluentProvider } from '@fluentui/react-provider';
import { teamsLightTheme } from '@fluentui/react-theme';
-import { TimePicker, TimePickerProps } from '@fluentui/react-timepicker-compat';
+import type { TimePickerProps } from '@fluentui/react-timepicker-compat';
+import { TimePicker } from '@fluentui/react-timepicker-compat';
import type { JSXElement } from '@fluentui/react-utilities';
const mount = (element: JSXElement) => {
diff --git a/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/TimePicker.test.tsx b/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/TimePicker.test.tsx
index 39ba662d74bca..9d13028279ef5 100644
--- a/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/TimePicker.test.tsx
+++ b/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/TimePicker.test.tsx
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
import { Field } from '@fluentui/react-components';
import { isConformant } from '../../testing/isConformant';
import { TimePicker } from './TimePicker';
-import { TimePickerProps } from './TimePicker.types';
+import type { TimePickerProps } from './TimePicker.types';
const dateAnchor = new Date('November 25, 2021 01:00:00');
diff --git a/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/TimePicker.types.ts b/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/TimePicker.types.ts
index edade9fa2ad8a..31235b9a1fba5 100644
--- a/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/TimePicker.types.ts
+++ b/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/TimePicker.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComboboxSlots, ComboboxState, ComboboxProps, SelectionEvents } from '@fluentui/react-combobox';
import type { ComponentProps } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/useTimePicker.tsx b/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/useTimePicker.tsx
index 96879bb7499df..d9dd965dea7ea 100644
--- a/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/useTimePicker.tsx
+++ b/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/useTimePicker.tsx
@@ -11,7 +11,8 @@ import {
} from '@fluentui/react-utilities';
import { Enter } from '@fluentui/keyboard-keys';
import type { Hour, TimePickerOption, TimePickerProps, TimePickerState, TimeSelectionData } from './TimePicker.types';
-import { ComboboxProps, useCombobox_unstable, Option } from '@fluentui/react-combobox';
+import type { ComboboxProps } from '@fluentui/react-combobox';
+import { useCombobox_unstable, Option } from '@fluentui/react-combobox';
import { useFieldContext_unstable as useFieldContext } from '@fluentui/react-field';
import {
dateToKey,
diff --git a/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerControlled.stories.tsx b/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerControlled.stories.tsx
index 5d9978f304b3b..c9a3cc0390221 100644
--- a/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerControlled.stories.tsx
+++ b/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerControlled.stories.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
import { Field, makeStyles } from '@fluentui/react-components';
-import { TimePicker, TimePickerProps, formatDateToTimeString } from '@fluentui/react-timepicker-compat';
+import type { TimePickerProps } from '@fluentui/react-timepicker-compat';
+import { TimePicker, formatDateToTimeString } from '@fluentui/react-timepicker-compat';
import story from './TimePickerControlled.md';
const useStyles = makeStyles({
diff --git a/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerDefault.stories.tsx b/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerDefault.stories.tsx
index 853356d69927a..6880af475e622 100644
--- a/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerDefault.stories.tsx
+++ b/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerDefault.stories.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
import { Field, makeStyles } from '@fluentui/react-components';
-import { TimePicker, TimePickerProps } from '@fluentui/react-timepicker-compat';
+import type { TimePickerProps } from '@fluentui/react-timepicker-compat';
+import { TimePicker } from '@fluentui/react-timepicker-compat';
const useStyles = makeStyles({
root: {
diff --git a/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerFreeformCustomParsing.stories.tsx b/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerFreeformCustomParsing.stories.tsx
index 011707a3b840c..763f0cf82a879 100644
--- a/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerFreeformCustomParsing.stories.tsx
+++ b/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerFreeformCustomParsing.stories.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
import { Field, makeStyles } from '@fluentui/react-components';
-import { TimePicker, TimePickerProps } from '@fluentui/react-timepicker-compat';
+import type { TimePickerProps } from '@fluentui/react-timepicker-compat';
+import { TimePicker } from '@fluentui/react-timepicker-compat';
import story from './TimePickerFreeformCustomParsing.md';
const useStyles = makeStyles({
diff --git a/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerFreeformWithErrorHandling.stories.tsx b/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerFreeformWithErrorHandling.stories.tsx
index f5c84b3ddf2fc..af881df87bad8 100644
--- a/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerFreeformWithErrorHandling.stories.tsx
+++ b/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerFreeformWithErrorHandling.stories.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
-import { Field, FieldProps, makeStyles } from '@fluentui/react-components';
-import { TimePicker, TimePickerErrorType, TimePickerProps } from '@fluentui/react-timepicker-compat';
+import type { JSXElement, FieldProps } from '@fluentui/react-components';
+import { Field, makeStyles } from '@fluentui/react-components';
+import type { TimePickerErrorType, TimePickerProps } from '@fluentui/react-timepicker-compat';
+import { TimePicker } from '@fluentui/react-timepicker-compat';
import story from './TimePickerFreeformWithErrorHandling.md';
const useStyles = makeStyles({
diff --git a/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerWithDatePicker.stories.tsx b/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerWithDatePicker.stories.tsx
index 9c7cefbad780b..c09362858b578 100644
--- a/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerWithDatePicker.stories.tsx
+++ b/packages/react-components/react-timepicker-compat/stories/src/TimePicker/TimePickerWithDatePicker.stories.tsx
@@ -1,8 +1,10 @@
import * as React from 'react';
import type { JSXElement } from '@fluentui/react-components';
import { Field, makeStyles } from '@fluentui/react-components';
-import { DatePicker, DatePickerProps } from '@fluentui/react-datepicker-compat';
-import { TimePicker, TimePickerProps, formatDateToTimeString } from '@fluentui/react-timepicker-compat';
+import type { DatePickerProps } from '@fluentui/react-datepicker-compat';
+import { DatePicker } from '@fluentui/react-datepicker-compat';
+import type { TimePickerProps } from '@fluentui/react-timepicker-compat';
+import { TimePicker, formatDateToTimeString } from '@fluentui/react-timepicker-compat';
const useStyles = makeStyles({
root: {
diff --git a/packages/react-components/react-toast/library/etc/react-toast.api.md b/packages/react-components/react-toast/library/etc/react-toast.api.md
index 206e52e983db9..f791dbd4d1e2e 100644
--- a/packages/react-components/react-toast/library/etc/react-toast.api.md
+++ b/packages/react-components/react-toast/library/etc/react-toast.api.md
@@ -4,9 +4,9 @@
```ts
-import { ARIAButtonResultProps } from '@fluentui/react-aria';
-import { ARIAButtonType } from '@fluentui/react-aria';
-import { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
+import type { ARIAButtonResultProps } from '@fluentui/react-aria';
+import type { ARIAButtonType } from '@fluentui/react-aria';
+import type { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.test.tsx b/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.test.tsx
index 8cefd312d9e69..5b707e5e188d5 100644
--- a/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.test.tsx
+++ b/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { act, render } from '@testing-library/react';
import { AriaLive } from './AriaLive';
import { isConformant } from '../../testing/isConformant';
-import { Announce, AriaLivePoliteness } from './AriaLive.types';
+import type { Announce, AriaLivePoliteness } from './AriaLive.types';
describe('AriaLive', () => {
isConformant({
diff --git a/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.tsx b/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.tsx
index 1c456b3d8c9fd..25144a4c14c9e 100644
--- a/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.tsx
+++ b/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useAriaLive_unstable } from './useAriaLive';
import { renderAriaLive_unstable } from './renderAriaLive';
import { useAriaLiveStyles_unstable } from './useAriaLiveStyles.styles';
diff --git a/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.types.ts b/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.types.ts
index 0a97611219350..0322222278187 100644
--- a/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.types.ts
+++ b/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
export type AriaLiveSlots = {
diff --git a/packages/react-components/react-toast/library/src/components/Toast/Toast.types.ts b/packages/react-components/react-toast/library/src/components/Toast/Toast.types.ts
index 5e418eb9f1771..a68ab5e0b230b 100644
--- a/packages/react-components/react-toast/library/src/components/Toast/Toast.types.ts
+++ b/packages/react-components/react-toast/library/src/components/Toast/Toast.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
+import type { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
import type { ToastIntent } from '../../state/types';
export type ToastSlots = {
diff --git a/packages/react-components/react-toast/library/src/components/Toast/useToast.ts b/packages/react-components/react-toast/library/src/components/Toast/useToast.ts
index 4f5c05f3f319f..d65fafb1808cf 100644
--- a/packages/react-components/react-toast/library/src/components/Toast/useToast.ts
+++ b/packages/react-components/react-toast/library/src/components/Toast/useToast.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { ToastProps, ToastState } from './Toast.types';
import { useToastContainerContext } from '../../contexts/toastContainerContext';
diff --git a/packages/react-components/react-toast/library/src/components/Toast/useToastContextValues.ts b/packages/react-components/react-toast/library/src/components/Toast/useToastContextValues.ts
index ebf0f9dec5aa2..2639b1734068a 100644
--- a/packages/react-components/react-toast/library/src/components/Toast/useToastContextValues.ts
+++ b/packages/react-components/react-toast/library/src/components/Toast/useToastContextValues.ts
@@ -1,4 +1,4 @@
-import { ToastContextValues, ToastState } from './Toast.types';
+import type { ToastContextValues, ToastState } from './Toast.types';
export function useToastContextValues_unstable(state: ToastState): ToastContextValues {
const { backgroundAppearance } = state;
diff --git a/packages/react-components/react-toast/library/src/components/ToastBody/ToastBody.test.tsx b/packages/react-components/react-toast/library/src/components/ToastBody/ToastBody.test.tsx
index 4364402cf9d69..7ba80133dc029 100644
--- a/packages/react-components/react-toast/library/src/components/ToastBody/ToastBody.test.tsx
+++ b/packages/react-components/react-toast/library/src/components/ToastBody/ToastBody.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { ToastBody } from './ToastBody';
import { isConformant } from '../../testing/isConformant';
-import { ToastBodyProps } from './ToastBody.types';
+import type { ToastBodyProps } from './ToastBody.types';
describe('ToastBody', () => {
isConformant({
diff --git a/packages/react-components/react-toast/library/src/components/ToastBody/ToastBody.types.ts b/packages/react-components/react-toast/library/src/components/ToastBody/ToastBody.types.ts
index 570330970d2e7..ab7d81036c115 100644
--- a/packages/react-components/react-toast/library/src/components/ToastBody/ToastBody.types.ts
+++ b/packages/react-components/react-toast/library/src/components/ToastBody/ToastBody.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
+import type { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
export type ToastBodySlots = {
root: Slot<'div'>;
diff --git a/packages/react-components/react-toast/library/src/components/ToastBody/useToastBody.ts b/packages/react-components/react-toast/library/src/components/ToastBody/useToastBody.ts
index 08466d824d9f8..bc53de89a00ff 100644
--- a/packages/react-components/react-toast/library/src/components/ToastBody/useToastBody.ts
+++ b/packages/react-components/react-toast/library/src/components/ToastBody/useToastBody.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { ToastBodyProps, ToastBodyState } from './ToastBody.types';
import { useToastContainerContext } from '../../contexts/toastContainerContext';
diff --git a/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.test.tsx b/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.test.tsx
index 6358a47de9553..0afcd24c82273 100644
--- a/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.test.tsx
+++ b/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render, act, fireEvent } from '@testing-library/react';
import { ToastContainer } from './ToastContainer';
import { isConformant } from '../../testing/isConformant';
-import { ToastContainerProps } from './ToastContainer.types';
+import type { ToastContainerProps } from './ToastContainer.types';
import { toastContainerClassNames } from './useToastContainerStyles.styles';
import { resetIdsForTests } from '@fluentui/react-utilities';
import { type PresenceComponentProps } from '@fluentui/react-motion';
diff --git a/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.types.ts b/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.types.ts
index f05e84d8be0f2..75edc0f4213d7 100644
--- a/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.types.ts
+++ b/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.types.ts
@@ -1,9 +1,9 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { Announce } from '../AriaLive/AriaLive.types';
-import { Toast, ToastIntent } from '../../state';
-import { ToastContainerContextValue } from '../../contexts/toastContainerContext';
-import { TimerProps } from '../Timer/Timer';
+import type { Announce } from '../AriaLive/AriaLive.types';
+import type { Toast, ToastIntent } from '../../state';
+import type { ToastContainerContextValue } from '../../contexts/toastContainerContext';
+import type { TimerProps } from '../Timer/Timer';
export type ToastContainerContextValues = {
toast: ToastContainerContextValue;
diff --git a/packages/react-components/react-toast/library/src/components/ToastContainer/useToastContainer.ts b/packages/react-components/react-toast/library/src/components/ToastContainer/useToastContainer.ts
index 51bd3ae636403..0d384e4d44f9d 100644
--- a/packages/react-components/react-toast/library/src/components/ToastContainer/useToastContainer.ts
+++ b/packages/react-components/react-toast/library/src/components/ToastContainer/useToastContainer.ts
@@ -1,21 +1,15 @@
'use client';
import * as React from 'react';
-import {
- getIntrinsicElementProps,
- useMergedRefs,
- ExtractSlotProps,
- Slot,
- useEventCallback,
- useId,
- slot,
-} from '@fluentui/react-utilities';
+import type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useMergedRefs, useEventCallback, useId, slot } from '@fluentui/react-utilities';
import { useFluent_unstable } from '@fluentui/react-shared-contexts';
import { Delete, Tab } from '@fluentui/keyboard-keys';
import { useFocusableGroup, useFocusFinders } from '@fluentui/react-tabster';
-import { ToastStatus } from '../../state';
+import type { ToastStatus } from '../../state';
import type { ToastContainerProps, ToastContainerState } from './ToastContainer.types';
-import { Timer, TimerProps } from '../Timer/Timer';
+import type { TimerProps } from '../Timer/Timer';
+import { Timer } from '../Timer/Timer';
const intentPolitenessMap = {
success: 'assertive',
diff --git a/packages/react-components/react-toast/library/src/components/ToastContainer/useToastContainerContextValues.ts b/packages/react-components/react-toast/library/src/components/ToastContainer/useToastContainerContextValues.ts
index 440551079df14..e8da65e5a333b 100644
--- a/packages/react-components/react-toast/library/src/components/ToastContainer/useToastContainerContextValues.ts
+++ b/packages/react-components/react-toast/library/src/components/ToastContainer/useToastContainerContextValues.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { ToastContainerContextValues, ToastContainerState } from './ToastContainer.types';
+import type { ToastContainerContextValues, ToastContainerState } from './ToastContainer.types';
export function useToastContainerContextValues_unstable(state: ToastContainerState): ToastContainerContextValues {
const { close, intent, titleId, bodyId } = state;
diff --git a/packages/react-components/react-toast/library/src/components/ToastFooter/useToastFooter.ts b/packages/react-components/react-toast/library/src/components/ToastFooter/useToastFooter.ts
index f7866ff7c96a8..9c3b1356b42d5 100644
--- a/packages/react-components/react-toast/library/src/components/ToastFooter/useToastFooter.ts
+++ b/packages/react-components/react-toast/library/src/components/ToastFooter/useToastFooter.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type { ToastFooterProps, ToastFooterState } from './ToastFooter.types';
diff --git a/packages/react-components/react-toast/library/src/components/ToastTitle/ToastTitle.test.tsx b/packages/react-components/react-toast/library/src/components/ToastTitle/ToastTitle.test.tsx
index b40ce5e663ac1..31cbb13cb8049 100644
--- a/packages/react-components/react-toast/library/src/components/ToastTitle/ToastTitle.test.tsx
+++ b/packages/react-components/react-toast/library/src/components/ToastTitle/ToastTitle.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { ToastTitle } from './ToastTitle';
import { isConformant } from '../../testing/isConformant';
-import { ToastTitleProps } from './ToastTitle.types';
+import type { ToastTitleProps } from './ToastTitle.types';
import { toastTitleClassNames } from './useToastTitleStyles.styles';
describe('ToastTitle', () => {
diff --git a/packages/react-components/react-toast/library/src/components/ToastTitle/ToastTitle.types.ts b/packages/react-components/react-toast/library/src/components/ToastTitle/ToastTitle.types.ts
index 6b4676098291e..04f8f030350f0 100644
--- a/packages/react-components/react-toast/library/src/components/ToastTitle/ToastTitle.types.ts
+++ b/packages/react-components/react-toast/library/src/components/ToastTitle/ToastTitle.types.ts
@@ -1,6 +1,6 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
-import { ToastContainerContextValue } from '../../contexts/toastContainerContext';
+import type { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
+import type { ToastContainerContextValue } from '../../contexts/toastContainerContext';
export type ToastTitleSlots = {
root: NonNullable>;
diff --git a/packages/react-components/react-toast/library/src/components/ToastTrigger/ToastTrigger.test.tsx b/packages/react-components/react-toast/library/src/components/ToastTrigger/ToastTrigger.test.tsx
index 17ff79b79b161..e5a8e9d5c2807 100644
--- a/packages/react-components/react-toast/library/src/components/ToastTrigger/ToastTrigger.test.tsx
+++ b/packages/react-components/react-toast/library/src/components/ToastTrigger/ToastTrigger.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { ToastTrigger } from './ToastTrigger';
import { isConformant } from '../../testing/isConformant';
-import { ToastTriggerProps } from './ToastTrigger.types';
+import type { ToastTriggerProps } from './ToastTrigger.types';
describe('ToastTrigger', () => {
isConformant({
diff --git a/packages/react-components/react-toast/library/src/components/ToastTrigger/ToastTrigger.tsx b/packages/react-components/react-toast/library/src/components/ToastTrigger/ToastTrigger.tsx
index 91a7086a154a9..78b0e3659c22c 100644
--- a/packages/react-components/react-toast/library/src/components/ToastTrigger/ToastTrigger.tsx
+++ b/packages/react-components/react-toast/library/src/components/ToastTrigger/ToastTrigger.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useToastTrigger_unstable } from './useToastTrigger';
import { renderToastTrigger_unstable } from './renderToastTrigger';
import type { ToastTriggerProps } from './ToastTrigger.types';
diff --git a/packages/react-components/react-toast/library/src/components/ToastTrigger/ToastTrigger.types.ts b/packages/react-components/react-toast/library/src/components/ToastTrigger/ToastTrigger.types.ts
index 1ed9c19dc0f0e..9fc460750bcde 100644
--- a/packages/react-components/react-toast/library/src/components/ToastTrigger/ToastTrigger.types.ts
+++ b/packages/react-components/react-toast/library/src/components/ToastTrigger/ToastTrigger.types.ts
@@ -1,6 +1,6 @@
-import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';
+import type { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';
import type { TriggerProps } from '@fluentui/react-utilities';
-import * as React from 'react';
+import type * as React from 'react';
export type ToastTriggerProps = TriggerProps & {
/**
diff --git a/packages/react-components/react-toast/library/src/components/ToastTrigger/useToastTrigger.ts b/packages/react-components/react-toast/library/src/components/ToastTrigger/useToastTrigger.ts
index e56c24491b784..c685e36484c7d 100644
--- a/packages/react-components/react-toast/library/src/components/ToastTrigger/useToastTrigger.ts
+++ b/packages/react-components/react-toast/library/src/components/ToastTrigger/useToastTrigger.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import {
applyTriggerPropsToChildren,
getTriggerChild,
diff --git a/packages/react-components/react-toast/library/src/components/Toaster/Toaster.test.tsx b/packages/react-components/react-toast/library/src/components/Toaster/Toaster.test.tsx
index 65aa336deeb07..8e7f52218bb0c 100644
--- a/packages/react-components/react-toast/library/src/components/Toaster/Toaster.test.tsx
+++ b/packages/react-components/react-toast/library/src/components/Toaster/Toaster.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { Toaster } from './Toaster';
import { isConformant } from '../../testing/isConformant';
-import { ToasterProps } from './Toaster.types';
+import type { ToasterProps } from './Toaster.types';
describe('Toaster', () => {
const testid = 'test';
diff --git a/packages/react-components/react-toast/library/src/components/Toaster/Toaster.tsx b/packages/react-components/react-toast/library/src/components/Toaster/Toaster.tsx
index 2dcbaa59f8e44..4a07e2b96333e 100644
--- a/packages/react-components/react-toast/library/src/components/Toaster/Toaster.tsx
+++ b/packages/react-components/react-toast/library/src/components/Toaster/Toaster.tsx
@@ -1,7 +1,7 @@
'use client';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
-import * as React from 'react';
+import type * as React from 'react';
import { useToaster_unstable } from './useToaster';
import { renderToaster_unstable } from './renderToaster';
diff --git a/packages/react-components/react-toast/library/src/components/Toaster/Toaster.types.ts b/packages/react-components/react-toast/library/src/components/Toaster/Toaster.types.ts
index 9033e6d57cb11..a29b78bce6f52 100644
--- a/packages/react-components/react-toast/library/src/components/Toaster/Toaster.types.ts
+++ b/packages/react-components/react-toast/library/src/components/Toaster/Toaster.types.ts
@@ -1,7 +1,7 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type { PortalProps } from '@fluentui/react-portal';
-import { ToasterOptions } from '../../state/types';
-import { Announce, AriaLiveProps } from '../AriaLive';
+import type { ToasterOptions } from '../../state/types';
+import type { Announce, AriaLiveProps } from '../AriaLive';
export type ToasterSlots = {
/**
diff --git a/packages/react-components/react-toast/library/src/components/Toaster/useToastAnnounce.ts b/packages/react-components/react-toast/library/src/components/Toaster/useToastAnnounce.ts
index 9f1fa23b35fd1..055462d835ddb 100644
--- a/packages/react-components/react-toast/library/src/components/Toaster/useToastAnnounce.ts
+++ b/packages/react-components/react-toast/library/src/components/Toaster/useToastAnnounce.ts
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { Announce } from '../AriaLive';
+import type { Announce } from '../AriaLive';
import { isHTMLElement } from '@fluentui/react-utilities';
/**
diff --git a/packages/react-components/react-toast/library/src/components/Toaster/useToaster.tsx b/packages/react-components/react-toast/library/src/components/Toaster/useToaster.tsx
index e7f892b2b6ad9..9e6a7c01f68c7 100644
--- a/packages/react-components/react-toast/library/src/components/Toaster/useToaster.tsx
+++ b/packages/react-components/react-toast/library/src/components/Toaster/useToaster.tsx
@@ -1,20 +1,15 @@
'use client';
import * as React from 'react';
-import {
- ExtractSlotProps,
- Slot,
- getIntrinsicElementProps,
- useEventCallback,
- useMergedRefs,
- slot,
-} from '@fluentui/react-utilities';
+import type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { useFocusableGroup } from '@fluentui/react-tabster';
import { Escape } from '@fluentui/keyboard-keys';
import type { ToasterProps, ToasterState } from './Toaster.types';
-import { TOAST_POSITIONS, ToastPosition, useToaster } from '../../state';
-import { Announce } from '../AriaLive';
+import type { ToastPosition } from '../../state';
+import { TOAST_POSITIONS, useToaster } from '../../state';
+import type { Announce } from '../AriaLive';
import { ToastContainer } from '../ToastContainer';
import { useToasterFocusManagement_unstable } from './useToasterFocusManagement';
import { useToastAnnounce } from './useToastAnnounce';
diff --git a/packages/react-components/react-toast/library/src/contexts/toastContainerContext.tsx b/packages/react-components/react-toast/library/src/contexts/toastContainerContext.tsx
index 892ab1e0b5bd8..e69fad4b60211 100644
--- a/packages/react-components/react-toast/library/src/contexts/toastContainerContext.tsx
+++ b/packages/react-components/react-toast/library/src/contexts/toastContainerContext.tsx
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { ToastIntent } from '../state/types';
+import type { ToastIntent } from '../state/types';
export type ToastContainerContextValue = {
close: () => void;
diff --git a/packages/react-components/react-toast/library/src/state/types.ts b/packages/react-components/react-toast/library/src/state/types.ts
index 68b2ce6089194..a9776248fa963 100644
--- a/packages/react-components/react-toast/library/src/state/types.ts
+++ b/packages/react-components/react-toast/library/src/state/types.ts
@@ -1,6 +1,6 @@
import type { Slot } from '@fluentui/react-utilities';
-import { EVENTS } from './constants';
-import * as React from 'react';
+import type { EVENTS } from './constants';
+import type * as React from 'react';
export type ToastId = string;
export type ToasterId = string;
diff --git a/packages/react-components/react-toast/library/src/state/useToastController.ts b/packages/react-components/react-toast/library/src/state/useToastController.ts
index cd6413dc2861d..2e20b461f0e0d 100644
--- a/packages/react-components/react-toast/library/src/state/useToastController.ts
+++ b/packages/react-components/react-toast/library/src/state/useToastController.ts
@@ -10,7 +10,7 @@ import {
playToast as playToastVanilla,
pauseToast as pauseToastVanilla,
} from './vanilla';
-import { DispatchToastOptions, ToastId, ToasterId, UpdateToastOptions } from './types';
+import type { DispatchToastOptions, ToastId, ToasterId, UpdateToastOptions } from './types';
const noop = () => undefined;
diff --git a/packages/react-components/react-toast/library/src/state/useToaster.test.ts b/packages/react-components/react-toast/library/src/state/useToaster.test.ts
index a1520afd603c9..a1ee2777bd576 100644
--- a/packages/react-components/react-toast/library/src/state/useToaster.test.ts
+++ b/packages/react-components/react-toast/library/src/state/useToaster.test.ts
@@ -1,5 +1,5 @@
import { EVENTS } from './constants';
-import { Toast, ToastId } from './types';
+import type { Toast, ToastId } from './types';
import { useToaster } from './useToaster';
import { createToaster } from './vanilla/createToaster';
import { renderHook, act } from '@testing-library/react-hooks';
diff --git a/packages/react-components/react-toast/library/src/state/vanilla/createToaster.test.ts b/packages/react-components/react-toast/library/src/state/vanilla/createToaster.test.ts
index 95fea9201cad8..60ecf2e686fc0 100644
--- a/packages/react-components/react-toast/library/src/state/vanilla/createToaster.test.ts
+++ b/packages/react-components/react-toast/library/src/state/vanilla/createToaster.test.ts
@@ -1,4 +1,4 @@
-import { Toast } from '../types';
+import type { Toast } from '../types';
import { createToaster } from './createToaster';
describe('createToaster', () => {
diff --git a/packages/react-components/react-toast/library/src/state/vanilla/createToaster.ts b/packages/react-components/react-toast/library/src/state/vanilla/createToaster.ts
index 304abff3000fa..f856e81ceecd5 100644
--- a/packages/react-components/react-toast/library/src/state/vanilla/createToaster.ts
+++ b/packages/react-components/react-toast/library/src/state/vanilla/createToaster.ts
@@ -1,6 +1,13 @@
import * as React from 'react';
import { createPriorityQueue } from '@fluentui/react-utilities';
-import { Toast, ToasterOptions, ToastId, ToastImperativeRef, ToastOptions, UpdateToastEventDetail } from '../types';
+import type {
+ Toast,
+ ToasterOptions,
+ ToastId,
+ ToastImperativeRef,
+ ToastOptions,
+ UpdateToastEventDetail,
+} from '../types';
function assignDefined(a: Partial, b: Partial) {
// This cast is required, as Object.entries will return string as key which is not indexable
diff --git a/packages/react-components/react-toast/library/src/state/vanilla/dismissAllToasts.ts b/packages/react-components/react-toast/library/src/state/vanilla/dismissAllToasts.ts
index 5cb79228167e6..4ebd03114b516 100644
--- a/packages/react-components/react-toast/library/src/state/vanilla/dismissAllToasts.ts
+++ b/packages/react-components/react-toast/library/src/state/vanilla/dismissAllToasts.ts
@@ -1,5 +1,5 @@
import { EVENTS } from '../constants';
-import { DismissAllToastsEventDetail, ToasterId } from '../types';
+import type { DismissAllToastsEventDetail, ToasterId } from '../types';
export function dismissAllToasts(toasterId: ToasterId | undefined = undefined, targetDocument: Document): void {
const event = new CustomEvent(EVENTS.dismissAll, {
diff --git a/packages/react-components/react-toast/library/src/state/vanilla/dismissToast.ts b/packages/react-components/react-toast/library/src/state/vanilla/dismissToast.ts
index 75237c9356364..9e750a54d59d9 100644
--- a/packages/react-components/react-toast/library/src/state/vanilla/dismissToast.ts
+++ b/packages/react-components/react-toast/library/src/state/vanilla/dismissToast.ts
@@ -1,5 +1,5 @@
import { EVENTS } from '../constants';
-import { DismissToastEventDetail, ToastId, ToasterId } from '../types';
+import type { DismissToastEventDetail, ToastId, ToasterId } from '../types';
export function dismissToast(
toastId: ToastId,
diff --git a/packages/react-components/react-toast/library/src/state/vanilla/dispatchToast.ts b/packages/react-components/react-toast/library/src/state/vanilla/dispatchToast.ts
index 7aa0ede7ad501..c5c3897735468 100644
--- a/packages/react-components/react-toast/library/src/state/vanilla/dispatchToast.ts
+++ b/packages/react-components/react-toast/library/src/state/vanilla/dispatchToast.ts
@@ -1,4 +1,4 @@
-import { ShowToastEventDetail, ToastOptions } from '../types';
+import type { ShowToastEventDetail, ToastOptions } from '../types';
import { EVENTS } from '../constants';
let counter = 0;
diff --git a/packages/react-components/react-toast/library/src/state/vanilla/getPositionStyles.ts b/packages/react-components/react-toast/library/src/state/vanilla/getPositionStyles.ts
index 8cfe89f76ce91..e920d9a71ae5c 100644
--- a/packages/react-components/react-toast/library/src/state/vanilla/getPositionStyles.ts
+++ b/packages/react-components/react-toast/library/src/state/vanilla/getPositionStyles.ts
@@ -1,4 +1,4 @@
-import { ToastOffsetObject, ToastOffset, ToastPosition } from '../types';
+import type { ToastOffsetObject, ToastOffset, ToastPosition } from '../types';
interface PositionStyles {
top?: number;
diff --git a/packages/react-components/react-toast/library/src/state/vanilla/pauseToast.ts b/packages/react-components/react-toast/library/src/state/vanilla/pauseToast.ts
index 773855aebe0ba..2a248db125e52 100644
--- a/packages/react-components/react-toast/library/src/state/vanilla/pauseToast.ts
+++ b/packages/react-components/react-toast/library/src/state/vanilla/pauseToast.ts
@@ -1,5 +1,5 @@
import { EVENTS } from '../constants';
-import { PauseToastEventDetail, ToastId, ToasterId } from '../types';
+import type { PauseToastEventDetail, ToastId, ToasterId } from '../types';
export function pauseToast(
toastId: ToastId,
diff --git a/packages/react-components/react-toast/library/src/state/vanilla/playToast.ts b/packages/react-components/react-toast/library/src/state/vanilla/playToast.ts
index 865371848c938..a4d7bc9f6fa2e 100644
--- a/packages/react-components/react-toast/library/src/state/vanilla/playToast.ts
+++ b/packages/react-components/react-toast/library/src/state/vanilla/playToast.ts
@@ -1,5 +1,5 @@
import { EVENTS } from '../constants';
-import { PlayToastEventDetail, ToastId, ToasterId } from '../types';
+import type { PlayToastEventDetail, ToastId, ToasterId } from '../types';
export function playToast(
toastId: ToastId,
diff --git a/packages/react-components/react-toast/library/src/state/vanilla/updateToast.ts b/packages/react-components/react-toast/library/src/state/vanilla/updateToast.ts
index 72e70b776267c..36478770169bf 100644
--- a/packages/react-components/react-toast/library/src/state/vanilla/updateToast.ts
+++ b/packages/react-components/react-toast/library/src/state/vanilla/updateToast.ts
@@ -1,4 +1,4 @@
-import { UpdateToastEventDetail } from '../types';
+import type { UpdateToastEventDetail } from '../types';
import { EVENTS } from '../constants';
export function updateToast(options: UpdateToastEventDetail, targetDocument: Document): void {
diff --git a/packages/react-components/react-toast/stories/src/Toast/Intent.stories.tsx b/packages/react-components/react-toast/stories/src/Toast/Intent.stories.tsx
index f1d649c28be8b..83a567336b02f 100644
--- a/packages/react-components/react-toast/stories/src/Toast/Intent.stories.tsx
+++ b/packages/react-components/react-toast/stories/src/Toast/Intent.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, ToastIntent } from '@fluentui/react-components';
import {
useId,
Button,
@@ -12,7 +12,6 @@ import {
useToastController,
ToastTitle,
Toast,
- ToastIntent,
} from '@fluentui/react-components';
export const Intent = (): JSXElement => {
diff --git a/packages/react-components/react-toast/stories/src/Toast/Offset.stories.tsx b/packages/react-components/react-toast/stories/src/Toast/Offset.stories.tsx
index e3ec028168a13..51fd77f67a0bd 100644
--- a/packages/react-components/react-toast/stories/src/Toast/Offset.stories.tsx
+++ b/packages/react-components/react-toast/stories/src/Toast/Offset.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, ToastPosition } from '@fluentui/react-components';
import {
useId,
Button,
@@ -8,7 +8,6 @@ import {
RadioGroup,
Radio,
makeStyles,
- ToastPosition,
Toaster,
useToastController,
ToastTitle,
diff --git a/packages/react-components/react-toast/stories/src/Toast/ToastLifecycle.stories.tsx b/packages/react-components/react-toast/stories/src/Toast/ToastLifecycle.stories.tsx
index e778fa353d1c0..be08d1b6ee7cc 100644
--- a/packages/react-components/react-toast/stories/src/Toast/ToastLifecycle.stories.tsx
+++ b/packages/react-components/react-toast/stories/src/Toast/ToastLifecycle.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, ToastStatus } from '@fluentui/react-components';
import {
useId,
Link,
@@ -13,7 +13,6 @@ import {
ToastTitle,
ToastBody,
ToastFooter,
- ToastStatus,
} from '@fluentui/react-components';
const useStyles = makeStyles({
diff --git a/packages/react-components/react-toast/stories/src/Toast/ToastPositions.stories.tsx b/packages/react-components/react-toast/stories/src/Toast/ToastPositions.stories.tsx
index 41c20c5e49b19..ac3bd4dadbcf6 100644
--- a/packages/react-components/react-toast/stories/src/Toast/ToastPositions.stories.tsx
+++ b/packages/react-components/react-toast/stories/src/Toast/ToastPositions.stories.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, ToastPosition } from '@fluentui/react-components';
import {
useId,
Button,
@@ -8,7 +8,6 @@ import {
Radio,
Toaster,
useToastController,
- ToastPosition,
ToastTitle,
Toast,
} from '@fluentui/react-components';
diff --git a/packages/react-components/react-toolbar/library/etc/react-toolbar.api.md b/packages/react-components/react-toolbar/library/etc/react-toolbar.api.md
index a8d7f7674856f..6642011e9621a 100644
--- a/packages/react-components/react-toolbar/library/etc/react-toolbar.api.md
+++ b/packages/react-components/react-toolbar/library/etc/react-toolbar.api.md
@@ -4,19 +4,19 @@
```ts
-import { ButtonProps } from '@fluentui/react-button';
-import { ButtonSlots } from '@fluentui/react-button';
-import { ButtonState } from '@fluentui/react-button';
+import type { ButtonProps } from '@fluentui/react-button';
+import type { ButtonSlots } from '@fluentui/react-button';
+import type { ButtonState } from '@fluentui/react-button';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
-import { ContextSelector } from '@fluentui/react-context-selector';
+import type { ContextSelector } from '@fluentui/react-context-selector';
import type { DividerSlots } from '@fluentui/react-divider';
import type { DividerState } from '@fluentui/react-divider';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
-import * as React_2 from 'react';
+import type * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import type { ToggleButtonProps } from '@fluentui/react-button';
import type { ToggleButtonState } from '@fluentui/react-button';
diff --git a/packages/react-components/react-toolbar/library/src/components/Toolbar/Toolbar.types.ts b/packages/react-components/react-toolbar/library/src/components/Toolbar/Toolbar.types.ts
index 006de41a8662d..c948a19ac98f9 100644
--- a/packages/react-components/react-toolbar/library/src/components/Toolbar/Toolbar.types.ts
+++ b/packages/react-components/react-toolbar/library/src/components/Toolbar/Toolbar.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
export type ToolbarSlots = {
diff --git a/packages/react-components/react-toolbar/library/src/components/Toolbar/ToolbarContext.ts b/packages/react-components/react-toolbar/library/src/components/Toolbar/ToolbarContext.ts
index ed916cb24429b..012498b99b928 100644
--- a/packages/react-components/react-toolbar/library/src/components/Toolbar/ToolbarContext.ts
+++ b/packages/react-components/react-toolbar/library/src/components/Toolbar/ToolbarContext.ts
@@ -1,7 +1,7 @@
'use client';
-import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';
-import type { Context } from '@fluentui/react-context-selector';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+import type { Context, ContextSelector } from '@fluentui/react-context-selector';
import type { ToolbarContextValue } from './Toolbar.types';
export const ToolbarContext = createContext(undefined) as Context;
diff --git a/packages/react-components/react-toolbar/library/src/components/Toolbar/useToolbar.ts b/packages/react-components/react-toolbar/library/src/components/Toolbar/useToolbar.ts
index b022a1a3287c7..714cfe69bf2a5 100644
--- a/packages/react-components/react-toolbar/library/src/components/Toolbar/useToolbar.ts
+++ b/packages/react-components/react-toolbar/library/src/components/Toolbar/useToolbar.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useEventCallback, useControllableState, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import type {
ToggableHandler,
@@ -10,7 +10,8 @@ import type {
ToolbarState,
UninitializedToolbarState,
} from './Toolbar.types';
-import { TabsterDOMAttribute, useArrowNavigationGroup } from '@fluentui/react-tabster';
+import type { TabsterDOMAttribute } from '@fluentui/react-tabster';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
/**
* Create the state required to render Toolbar.
diff --git a/packages/react-components/react-toolbar/library/src/components/Toolbar/useToolbarStyles.styles.ts b/packages/react-components/react-toolbar/library/src/components/Toolbar/useToolbarStyles.styles.ts
index 0c4eb67bc2d05..e64fedb8fa1a5 100644
--- a/packages/react-components/react-toolbar/library/src/components/Toolbar/useToolbarStyles.styles.ts
+++ b/packages/react-components/react-toolbar/library/src/components/Toolbar/useToolbarStyles.styles.ts
@@ -1,6 +1,6 @@
'use client';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import { makeStyles, mergeClasses } from '@griffel/react';
import type { ToolbarSlots, ToolbarState } from './Toolbar.types';
diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarButton/ToolbarButton.test.tsx b/packages/react-components/react-toolbar/library/src/components/ToolbarButton/ToolbarButton.test.tsx
index 3fc321bbf36ec..f8d4605989767 100644
--- a/packages/react-components/react-toolbar/library/src/components/ToolbarButton/ToolbarButton.test.tsx
+++ b/packages/react-components/react-toolbar/library/src/components/ToolbarButton/ToolbarButton.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { ToolbarButton } from './ToolbarButton';
import { isConformant } from '../../testing/isConformant';
-import { ButtonProps } from '@fluentui/react-button';
+import type { ButtonProps } from '@fluentui/react-button';
describe('ToolbarButton', () => {
isConformant({
diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarButton/ToolbarButton.types.ts b/packages/react-components/react-toolbar/library/src/components/ToolbarButton/ToolbarButton.types.ts
index 5ab8d37096239..6e0f984b1626b 100644
--- a/packages/react-components/react-toolbar/library/src/components/ToolbarButton/ToolbarButton.types.ts
+++ b/packages/react-components/react-toolbar/library/src/components/ToolbarButton/ToolbarButton.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';
-import { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';
+import type { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';
/**
* ToolbarButton Props
diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarButton/useToolbarButton.ts b/packages/react-components/react-toolbar/library/src/components/ToolbarButton/useToolbarButton.ts
index f99b55e4c0d23..e9eb101f7a212 100644
--- a/packages/react-components/react-toolbar/library/src/components/ToolbarButton/useToolbarButton.ts
+++ b/packages/react-components/react-toolbar/library/src/components/ToolbarButton/useToolbarButton.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useButton_unstable } from '@fluentui/react-button';
import type {
ToolbarButtonBaseProps,
diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts b/packages/react-components/react-toolbar/library/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts
index 6befb8f924601..74391cd43464f 100644
--- a/packages/react-components/react-toolbar/library/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts
+++ b/packages/react-components/react-toolbar/library/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts
@@ -2,7 +2,7 @@
import { makeStyles, mergeClasses } from '@griffel/react';
import { useButtonStyles_unstable } from '@fluentui/react-button';
-import { ToolbarButtonState } from './ToolbarButton.types';
+import type { ToolbarButtonState } from './ToolbarButton.types';
const useBaseStyles = makeStyles({
vertical: {
diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarDivider/useToolbarDivider.ts b/packages/react-components/react-toolbar/library/src/components/ToolbarDivider/useToolbarDivider.ts
index 4f51cfd855e6d..0eb9bdf02512f 100644
--- a/packages/react-components/react-toolbar/library/src/components/ToolbarDivider/useToolbarDivider.ts
+++ b/packages/react-components/react-toolbar/library/src/components/ToolbarDivider/useToolbarDivider.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import type {
ToolbarDividerBaseProps,
ToolbarDividerBaseState,
diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/ToolbarGroup.test.tsx b/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/ToolbarGroup.test.tsx
index ca544fa863b12..edee7391cfcb2 100644
--- a/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/ToolbarGroup.test.tsx
+++ b/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/ToolbarGroup.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { ToolbarGroup } from './ToolbarGroup';
import { isConformant } from '../../testing/isConformant';
-import { ButtonProps } from '@fluentui/react-button';
+import type { ButtonProps } from '@fluentui/react-button';
describe('ToolbarGroup', () => {
isConformant({
diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/useToolbarGroup.ts b/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/useToolbarGroup.ts
index b18f88581a73e..992ea650c369c 100644
--- a/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/useToolbarGroup.ts
+++ b/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/useToolbarGroup.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts b/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts
index a0b1b53520ef6..f3f78bb2a9897 100644
--- a/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts
+++ b/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts
@@ -1,6 +1,6 @@
'use client';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
import { makeStyles, mergeClasses } from '@griffel/react';
import type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';
diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/ToolbarRadioButton.test.tsx b/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/ToolbarRadioButton.test.tsx
index e000b82692376..14a983b8bfffd 100644
--- a/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/ToolbarRadioButton.test.tsx
+++ b/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/ToolbarRadioButton.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { ToolbarRadioButton } from './ToolbarRadioButton';
import { isConformant } from '../../testing/isConformant';
-import { ToggleButtonProps } from '@fluentui/react-button';
+import type { ToggleButtonProps } from '@fluentui/react-button';
import userEvent from '@testing-library/user-event';
import { Toolbar } from '../Toolbar/Toolbar';
diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/useToolbarRadioButton.ts b/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/useToolbarRadioButton.ts
index 9dd91727f65b2..6834c906dc1cf 100644
--- a/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/useToolbarRadioButton.ts
+++ b/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/useToolbarRadioButton.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useEventCallback } from '@fluentui/react-utilities';
import { useToggleButton_unstable } from '@fluentui/react-button';
import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts b/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts
index 6cd5ca307ae73..d5995fcc208a4 100644
--- a/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts
+++ b/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts
@@ -3,7 +3,7 @@
import { tokens } from '@fluentui/react-theme';
import { makeStyles, mergeClasses } from '@griffel/react';
import { useToggleButtonStyles_unstable } from '@fluentui/react-button';
-import { ToolbarRadioButtonState } from './ToolbarRadioButton.types';
+import type { ToolbarRadioButtonState } from './ToolbarRadioButton.types';
const useBaseStyles = makeStyles({
/* use subtle ToggleButton selected styles for Toolbar Radio selected state */
diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarRadioGroup/ToolbarRadioGroup.test.tsx b/packages/react-components/react-toolbar/library/src/components/ToolbarRadioGroup/ToolbarRadioGroup.test.tsx
index d60852b11ba34..c4b644189a4e5 100644
--- a/packages/react-components/react-toolbar/library/src/components/ToolbarRadioGroup/ToolbarRadioGroup.test.tsx
+++ b/packages/react-components/react-toolbar/library/src/components/ToolbarRadioGroup/ToolbarRadioGroup.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { ToolbarRadioGroup } from './ToolbarRadioGroup';
import { isConformant } from '../../testing/isConformant';
-import { ButtonProps } from '@fluentui/react-button';
+import type { ButtonProps } from '@fluentui/react-button';
describe('ToolbarRadioGroup', () => {
isConformant({
diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/ToolbarToggleButton.test.tsx b/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/ToolbarToggleButton.test.tsx
index 3c92428d2759b..ece6d443b7c33 100644
--- a/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/ToolbarToggleButton.test.tsx
+++ b/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/ToolbarToggleButton.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { ToolbarToggleButton } from './ToolbarToggleButton';
import { isConformant } from '../../testing/isConformant';
-import { ToggleButtonProps } from '@fluentui/react-button';
+import type { ToggleButtonProps } from '@fluentui/react-button';
describe('ToolbarToggleButton', () => {
isConformant({
diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/useToolbarToggleButton.ts b/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/useToolbarToggleButton.ts
index 3edc4fe38bf83..9e7db7de4bc52 100644
--- a/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/useToolbarToggleButton.ts
+++ b/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/useToolbarToggleButton.ts
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useToggleButton_unstable } from '@fluentui/react-button';
import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
import type {
diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts b/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts
index b3f91ecb90f3a..d9cab9efdc837 100644
--- a/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts
+++ b/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts
@@ -3,7 +3,7 @@
import { tokens } from '@fluentui/react-theme';
import { makeStyles, mergeClasses } from '@griffel/react';
import { useToggleButtonStyles_unstable } from '@fluentui/react-button';
-import { ToolbarToggleButtonState } from './ToolbarToggleButton.types';
+import type { ToolbarToggleButtonState } from './ToolbarToggleButton.types';
const useBaseStyles = makeStyles({
/* use subtle ToggleButton selected styles for Toolbar Radio selected state */
diff --git a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarControlledToggleButton.stories.tsx b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarControlledToggleButton.stories.tsx
index 34389e9ab8be8..08b6435d28a90 100644
--- a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarControlledToggleButton.stories.tsx
+++ b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarControlledToggleButton.stories.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
-import type { JSXElement } from '@fluentui/react-components';
+import type { JSXElement, ToolbarProps } from '@fluentui/react-components';
import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
-import { Toolbar, ToolbarToggleButton, ToolbarProps } from '@fluentui/react-components';
+import { Toolbar, ToolbarToggleButton } from '@fluentui/react-components';
export const ControlledToggleButton = (): JSXElement => {
const [checkedValues, setCheckedValues] = React.useState>({
diff --git a/packages/react-components/react-tooltip/library/etc/react-tooltip.api.md b/packages/react-components/react-tooltip/library/etc/react-tooltip.api.md
index 29f3571b5bf64..329cf87994509 100644
--- a/packages/react-components/react-tooltip/library/etc/react-tooltip.api.md
+++ b/packages/react-components/react-tooltip/library/etc/react-tooltip.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import type { PortalProps } from '@fluentui/react-portal';
import type { PositioningShorthand } from '@fluentui/react-positioning';
-import * as React_2 from 'react';
+import type * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TriggerProps } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.test.tsx b/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.test.tsx
index 024765a0623e4..02007c7eed00a 100644
--- a/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.test.tsx
+++ b/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.test.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
import { Tooltip } from './Tooltip';
import { isConformant } from '../../testing/isConformant';
import type { IsConformantOptions } from '@fluentui/react-conformance';
-import { render, RenderResult } from '@testing-library/react';
+import type { RenderResult } from '@testing-library/react';
+import { render } from '@testing-library/react';
import { resetIdsForTests } from '@fluentui/react-utilities';
// testing-library's queryByRole function doesn't look inside portals
diff --git a/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.tsx b/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.tsx
index f41f98c52dd4b..8276811a57386 100644
--- a/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.tsx
+++ b/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as React from 'react';
+import type * as React from 'react';
import { useTooltip_unstable } from './useTooltip';
import { renderTooltip_unstable } from './renderTooltip';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
diff --git a/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts b/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts
index 979f8ce01c675..c396726a15361 100644
--- a/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts
+++ b/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
import type { PositioningShorthand } from '@fluentui/react-positioning';
import type { ComponentProps, ComponentState, JSXElement, Slot, TriggerProps } from '@fluentui/react-utilities';
import type { PortalProps } from '@fluentui/react-portal';
diff --git a/packages/react-components/react-tooltip/stories/src/Tooltip/index.stories.tsx b/packages/react-components/react-tooltip/stories/src/Tooltip/index.stories.tsx
index 60b4048b98d5b..a97707568a678 100644
--- a/packages/react-components/react-tooltip/stories/src/Tooltip/index.stories.tsx
+++ b/packages/react-components/react-tooltip/stories/src/Tooltip/index.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-webpack5';
import { Tooltip } from '@fluentui/react-components';
import descriptionMd from './TooltipDescription.md';
import accessibilityMd from './TooltipAccessibility.md';
diff --git a/packages/react-components/react-tree/library/etc/react-tree.api.md b/packages/react-components/react-tree/library/etc/react-tree.api.md
index aba01485f6943..f39adbc3ebdd0 100644
--- a/packages/react-components/react-tree/library/etc/react-tree.api.md
+++ b/packages/react-components/react-tree/library/etc/react-tree.api.md
@@ -10,24 +10,24 @@ import type { ArrowRight } from '@fluentui/keyboard-keys';
import type { ArrowUp } from '@fluentui/keyboard-keys';
import type { AvatarContextValue } from '@fluentui/react-avatar';
import type { AvatarSize } from '@fluentui/react-avatar';
-import { ButtonContextValue } from '@fluentui/react-button';
-import { Checkbox } from '@fluentui/react-checkbox';
-import { CheckboxProps } from '@fluentui/react-checkbox';
+import type { ButtonContextValue } from '@fluentui/react-button';
+import type { Checkbox } from '@fluentui/react-checkbox';
+import type { CheckboxProps } from '@fluentui/react-checkbox';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
-import { ContextSelector } from '@fluentui/react-context-selector';
+import type { ContextSelector } from '@fluentui/react-context-selector';
import type { DistributiveOmit } from '@fluentui/react-utilities';
import type { End } from '@fluentui/keyboard-keys';
import type { Enter } from '@fluentui/keyboard-keys';
import type { EventData } from '@fluentui/react-utilities';
import type { EventHandler } from '@fluentui/react-utilities';
import type { ExtractSlotProps } from '@fluentui/react-utilities';
-import { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { Home } from '@fluentui/keyboard-keys';
import type { JSXElement } from '@fluentui/react-utilities';
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
-import { Radio } from '@fluentui/react-radio';
-import { RadioProps } from '@fluentui/react-radio';
+import type { Radio } from '@fluentui/react-radio';
+import type { RadioProps } from '@fluentui/react-radio';
import * as React_2 from 'react';
import type { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
import type { Slot } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-tree/library/src/components/FlatTree/FlatTree.cy.tsx b/packages/react-components/react-tree/library/src/components/FlatTree/FlatTree.cy.tsx
index be77c20a2f13d..d5681d6ec1c27 100644
--- a/packages/react-components/react-tree/library/src/components/FlatTree/FlatTree.cy.tsx
+++ b/packages/react-components/react-tree/library/src/components/FlatTree/FlatTree.cy.tsx
@@ -3,15 +3,13 @@ import { mount as mountBase } from '@fluentui/scripts-cypress';
import { FluentProvider } from '@fluentui/react-provider';
import { teamsLightTheme } from '@fluentui/react-theme';
import type { JSXElement } from '@fluentui/react-utilities';
+import type { TreeItemValue, FlatTreeProps, HeadlessFlatTreeOptions } from '@fluentui/react-tree';
import {
Tree,
TreeItem,
TreeItemLayout,
TreeItemPersonaLayout,
treeItemLayoutClassNames,
- TreeItemValue,
- FlatTreeProps,
- HeadlessFlatTreeOptions,
useHeadlessFlatTree_unstable,
FlatTree,
FlatTreeItem,
diff --git a/packages/react-components/react-tree/library/src/components/FlatTree/useFlatControllableCheckedItems.ts b/packages/react-components/react-tree/library/src/components/FlatTree/useFlatControllableCheckedItems.ts
index 678e8f95e626d..fe209a9301978 100644
--- a/packages/react-components/react-tree/library/src/components/FlatTree/useFlatControllableCheckedItems.ts
+++ b/packages/react-components/react-tree/library/src/components/FlatTree/useFlatControllableCheckedItems.ts
@@ -1,13 +1,13 @@
'use client';
import { useControllableState } from '@fluentui/react-utilities';
-import { TreeItemValue } from '../../TreeItem';
+import type { TreeItemValue } from '../../TreeItem';
import { ImmutableMap } from '../../utils/ImmutableMap';
import * as React from 'react';
import type { HeadlessTree, HeadlessTreeItemProps } from '../../utils/createHeadlessTree';
import { createCheckedItems } from '../../utils/createCheckedItems';
import type { TreeCheckedChangeData, TreeSelectionValue } from '../Tree/Tree.types';
-import { HeadlessFlatTreeOptions } from './useHeadlessFlatTree';
+import type { HeadlessFlatTreeOptions } from './useHeadlessFlatTree';
export function useFlatControllableCheckedItems(
props: Pick,
diff --git a/packages/react-components/react-tree/library/src/components/FlatTree/useFlatTree.ts b/packages/react-components/react-tree/library/src/components/FlatTree/useFlatTree.ts
index c6250bfd8a38c..c5ce5874d6cdb 100644
--- a/packages/react-components/react-tree/library/src/components/FlatTree/useFlatTree.ts
+++ b/packages/react-components/react-tree/library/src/components/FlatTree/useFlatTree.ts
@@ -2,7 +2,7 @@
import * as React from 'react';
import { useRootTree } from '../../hooks/useRootTree';
-import { FlatTreeProps, FlatTreeState } from './FlatTree.types';
+import type { FlatTreeProps, FlatTreeState } from './FlatTree.types';
import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
import { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';
import { useSubtree } from '../../hooks/useSubtree';
diff --git a/packages/react-components/react-tree/library/src/components/FlatTree/useFlatTreeStyles.styles.ts b/packages/react-components/react-tree/library/src/components/FlatTree/useFlatTreeStyles.styles.ts
index f04720d7250b9..505bcc17117cc 100644
--- a/packages/react-components/react-tree/library/src/components/FlatTree/useFlatTreeStyles.styles.ts
+++ b/packages/react-components/react-tree/library/src/components/FlatTree/useFlatTreeStyles.styles.ts
@@ -3,7 +3,7 @@
import { makeResetStyles, mergeClasses } from '@griffel/react';
import type { SlotClassNames } from '@fluentui/react-utilities';
import { tokens } from '@fluentui/react-theme';
-import { FlatTreeSlots, FlatTreeState } from './FlatTree.types';
+import type { FlatTreeSlots, FlatTreeState } from './FlatTree.types';
export const flatTreeClassNames: SlotClassNames