diff --git a/src/common/placeholderWithCallout/PlaceholderWithCallout.tsx b/src/common/placeholderWithCallout/PlaceholderWithCallout.tsx
index 2773224f..ffad52d0 100644
--- a/src/common/placeholderWithCallout/PlaceholderWithCallout.tsx
+++ b/src/common/placeholderWithCallout/PlaceholderWithCallout.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Callout, DirectionalHint } from '@fluentui/react/lib/components/Callout';
+import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
 import { IPlaceholderWithCalloutProps, IPlaceholderWithCalloutState } from './IPlaceholderWithCallout';
 import { CalloutTriggers } from '../callout/Callout';
 import { getIconClassName } from '@fluentui/react/lib/Styling';
diff --git a/src/common/propertyFieldHeader/PropertyFieldHeader.tsx b/src/common/propertyFieldHeader/PropertyFieldHeader.tsx
index c24ef598..3731f0b3 100644
--- a/src/common/propertyFieldHeader/PropertyFieldHeader.tsx
+++ b/src/common/propertyFieldHeader/PropertyFieldHeader.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Callout, DirectionalHint } from '@fluentui/react/lib/components/Callout';
+import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
 import { IPropertyFieldHeaderProps, IPropertyFieldHeaderState, CalloutTriggers } from './IPropertyFieldHeader';
 import { getIconClassName } from '@fluentui/react/lib/Styling';
 import { css } from '@fluentui/react/lib/Utilities';
diff --git a/src/propertyFields/buttonWithCallout/IPropertyFieldButtonWithCalloutHost.ts b/src/propertyFields/buttonWithCallout/IPropertyFieldButtonWithCalloutHost.ts
index 5fd3d47b..5a79a5e5 100644
--- a/src/propertyFields/buttonWithCallout/IPropertyFieldButtonWithCalloutHost.ts
+++ b/src/propertyFields/buttonWithCallout/IPropertyFieldButtonWithCalloutHost.ts
@@ -1,5 +1,5 @@
 import { IPlaceholderWithCalloutProps } from '../../common/placeholderWithCallout/IPlaceholderWithCallout';
-import { IButtonProps } from '@fluentui/react/lib/components/Button';
+import { IButtonProps } from '@fluentui/react/lib/Button';
 
 /**
  * PropertyFieldButtonWithCalloutHost properties interface
diff --git a/src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCallout.ts b/src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCallout.ts
index 44b1e8e1..f9856e25 100644
--- a/src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCallout.ts
+++ b/src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCallout.ts
@@ -8,7 +8,7 @@ import {
 import PropertyFieldButtonHost from './PropertyFieldButtonWithCalloutHost';
 
 import { IPropertyFieldButtonWithCalloutPropsInternal, IPropertyFieldButtonWithCalloutProps } from './IPropertyFieldButtonWithCallout';
-import { ButtonType } from '@fluentui/react/lib/components/Button';
+import { ButtonType } from '@fluentui/react/lib/Button';
 
 import omit from 'lodash/omit';
 
diff --git a/src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCalloutHost.tsx b/src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCalloutHost.tsx
index a1bc3a8c..070efe25 100644
--- a/src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCalloutHost.tsx
+++ b/src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCalloutHost.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from '@fluentui/react/lib/components/Button';
+import { Button } from '@fluentui/react/lib/Button';
 
 import PlaceholderWithCallout from '../../common/placeholderWithCallout/PlaceholderWithCallout';
 
diff --git a/src/propertyFields/checkboxWithCallout/IPropertyFieldCheckboxWithCalloutHost.ts b/src/propertyFields/checkboxWithCallout/IPropertyFieldCheckboxWithCalloutHost.ts
index f86e4211..161a2e2f 100644
--- a/src/propertyFields/checkboxWithCallout/IPropertyFieldCheckboxWithCalloutHost.ts
+++ b/src/propertyFields/checkboxWithCallout/IPropertyFieldCheckboxWithCalloutHost.ts
@@ -1,5 +1,5 @@
 import { IPlaceholderWithCalloutProps } from '../../common/placeholderWithCallout/IPlaceholderWithCallout';
-import { ICheckboxProps } from '@fluentui/react/lib/components/Checkbox';
+import { ICheckboxProps } from '@fluentui/react/lib/Checkbox';
 
 /**
  * PropertyFieldCheckboxWithCalloutHost properties interface
diff --git a/src/propertyFields/checkboxWithCallout/PropertyFieldCheckboxWithCalloutHost.tsx b/src/propertyFields/checkboxWithCallout/PropertyFieldCheckboxWithCalloutHost.tsx
index e62f3dd8..cf51da52 100644
--- a/src/propertyFields/checkboxWithCallout/PropertyFieldCheckboxWithCalloutHost.tsx
+++ b/src/propertyFields/checkboxWithCallout/PropertyFieldCheckboxWithCalloutHost.tsx
@@ -5,7 +5,7 @@ import type { IPlaceholderWithCalloutProps } from '../../common/placeholderWithC
 
 import { IPropertyFieldCheckboxWithCalloutHostProps } from './IPropertyFieldCheckboxWithCalloutHost';
 import * as telemetry from '../../common/telemetry';
-import { Checkbox } from '@fluentui/react/lib/components/Checkbox';
+import { Checkbox } from '@fluentui/react/lib/Checkbox';
 
 /**
  * Renders the control for PropertyFieldCheckboxWithCallout component
diff --git a/src/propertyFields/choiceGroupWithCallout/IPropertyFieldChoiceGroupWithCalloutHost.ts b/src/propertyFields/choiceGroupWithCallout/IPropertyFieldChoiceGroupWithCalloutHost.ts
index 32e5ccdf..cb877b35 100644
--- a/src/propertyFields/choiceGroupWithCallout/IPropertyFieldChoiceGroupWithCalloutHost.ts
+++ b/src/propertyFields/choiceGroupWithCallout/IPropertyFieldChoiceGroupWithCalloutHost.ts
@@ -1,5 +1,5 @@
 import { IPropertyFieldHeaderCalloutProps } from '../../common/propertyFieldHeader/IPropertyFieldHeader';
-import { IChoiceGroupProps } from '@fluentui/react/lib/components/ChoiceGroup';
+import { IChoiceGroupProps } from '@fluentui/react/lib/ChoiceGroup';
 
 /**
  * PropertyFieldChoiceGroupWithCalloutHost properties interface
diff --git a/src/propertyFields/choiceGroupWithCallout/PropertyFieldChoiceGroupWithCallout.ts b/src/propertyFields/choiceGroupWithCallout/PropertyFieldChoiceGroupWithCallout.ts
index a6f96e15..827ca8f0 100644
--- a/src/propertyFields/choiceGroupWithCallout/PropertyFieldChoiceGroupWithCallout.ts
+++ b/src/propertyFields/choiceGroupWithCallout/PropertyFieldChoiceGroupWithCallout.ts
@@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom';
 
 import omit from 'lodash/omit';
 
-import { IChoiceGroupOption } from '@fluentui/react/lib/components/ChoiceGroup';
+import { IChoiceGroupOption } from '@fluentui/react/lib/ChoiceGroup';
 import {
   IPropertyPaneField,
   PropertyPaneFieldType,
diff --git a/src/propertyFields/choiceGroupWithCallout/PropertyFieldChoiceGroupWithCalloutHost.tsx b/src/propertyFields/choiceGroupWithCallout/PropertyFieldChoiceGroupWithCalloutHost.tsx
index 5e98e015..27e54a59 100644
--- a/src/propertyFields/choiceGroupWithCallout/PropertyFieldChoiceGroupWithCalloutHost.tsx
+++ b/src/propertyFields/choiceGroupWithCallout/PropertyFieldChoiceGroupWithCalloutHost.tsx
@@ -6,7 +6,7 @@ import type { IPlaceholderWithCalloutProps } from '../../common/placeholderWithC
 
 import { IPropertyFieldChoiceGroupWithCalloutHostProps } from './IPropertyFieldChoiceGroupWithCalloutHost';
 import * as telemetry from '../../common/telemetry';
-import { ChoiceGroup } from '@fluentui/react/lib/components/ChoiceGroup';
+import { ChoiceGroup } from '@fluentui/react/lib/ChoiceGroup';
 
 export default class PropertyFieldToggleWithCalloutHost extends React.Component<
   IPropertyFieldChoiceGroupWithCalloutHostProps,
diff --git a/src/propertyFields/collectionData/ICustomCollectionField.ts b/src/propertyFields/collectionData/ICustomCollectionField.ts
index 978228b9..9f889421 100644
--- a/src/propertyFields/collectionData/ICustomCollectionField.ts
+++ b/src/propertyFields/collectionData/ICustomCollectionField.ts
@@ -1,5 +1,5 @@
 import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
-import { ISelectableOption } from '@fluentui/react/lib/utilities/selectableOption/SelectableOption.types';
+import { ISelectableOption } from '@fluentui/react/lib/SelectableOption';
 import { IRenderFunction } from '@fluentui/react/lib/Utilities';
 import { CollectionIconFieldRenderMode } from './collectionIconField';
 
diff --git a/src/propertyFields/collectionData/PropertyFieldCollectionDataHost.tsx b/src/propertyFields/collectionData/PropertyFieldCollectionDataHost.tsx
index 4dcb4b48..60c1797d 100644
--- a/src/propertyFields/collectionData/PropertyFieldCollectionDataHost.tsx
+++ b/src/propertyFields/collectionData/PropertyFieldCollectionDataHost.tsx
@@ -4,9 +4,9 @@ import {
   IPropertyFieldCollectionDataHostProps,
   IPropertyFieldCollectionDataHostState,
 } from "./IPropertyFieldCollectionDataHost";
-import { DefaultButton } from "@fluentui/react/lib/components/Button";
-import { Panel, PanelType } from "@fluentui/react/lib/components/Panel";
-import { Label } from "@fluentui/react/lib/components/Label";
+import { DefaultButton } from "@fluentui/react/lib/Button";
+import { Panel, PanelType } from "@fluentui/react/lib/Panel";
+import { Label } from "@fluentui/react/lib/Label";
 import { CollectionDataViewer } from "./collectionDataViewer";
 import FieldErrorMessage from "../errorMessage/FieldErrorMessage";
 import * as strings from "PropertyControlStrings";
diff --git a/src/propertyFields/collectionData/collectionCheckboxField/CollectionCheckboxField.tsx b/src/propertyFields/collectionData/collectionCheckboxField/CollectionCheckboxField.tsx
index 66ec9cf6..112890eb 100644
--- a/src/propertyFields/collectionData/collectionCheckboxField/CollectionCheckboxField.tsx
+++ b/src/propertyFields/collectionData/collectionCheckboxField/CollectionCheckboxField.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styles from '../PropertyFieldCollectionDataHost.module.scss';
-import { Checkbox } from '@fluentui/react/lib/components/Checkbox';
+import { Checkbox } from '@fluentui/react/lib/Checkbox';
 import { IBaseCollectionFieldProps } from '../IBaseCollectionFIeldsProps';
 
 export interface ICollectionCheckboxFieldProps extends IBaseCollectionFieldProps { }
diff --git a/src/propertyFields/collectionData/collectionDataItem/CollectionDataItem.tsx b/src/propertyFields/collectionData/collectionDataItem/CollectionDataItem.tsx
index 0a9900e8..c822b29a 100644
--- a/src/propertyFields/collectionData/collectionDataItem/CollectionDataItem.tsx
+++ b/src/propertyFields/collectionData/collectionDataItem/CollectionDataItem.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import styles from '../PropertyFieldCollectionDataHost.module.scss';
 import { ICollectionDataItemProps, ICollectionDataItemState } from '.';
-import { TextField } from '@fluentui/react/lib/components/TextField';
-import { Icon } from '@fluentui/react/lib/components/Icon';
-import { Link } from '@fluentui/react/lib/components/Link';
+import { TextField } from '@fluentui/react/lib/TextField';
+import { Icon } from '@fluentui/react/lib/Icon';
+import { Link } from '@fluentui/react/lib/Link';
 import * as strings from 'PropertyControlStrings';
 import { ICustomCollectionField, CustomCollectionFieldType } from '../ICustomCollectionField';
 import { FieldValidator } from '../FieldValidator';
-import { Dropdown, IDropdownOption } from '@fluentui/react/lib/components/Dropdown';
-import { Callout, DirectionalHint } from '@fluentui/react/lib/components/Callout';
+import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
+import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
 import { CollectionIconField } from '../collectionIconField';
 import { clone, findIndex, sortBy } from '@microsoft/sp-lodash-subset';
 import { CollectionNumberField } from '../collectionNumberField';
@@ -124,7 +124,7 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
    */
   private async checkAnyFieldCustomErrorMessage(item: any): Promise<boolean> { // eslint-disable-line @typescript-eslint/no-explicit-any
     const { fields, index } = this.props;
-    
+
     const validations = await Promise.all(fields.filter(f => f.onGetErrorMessage).map(async f => {
       const validation = await f.onGetErrorMessage(item[f.id], index, item);
       return this.storeFieldValidation(f.id, validation);
@@ -137,9 +137,9 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
    * Check if row is ready for save
    */
   private async checkRowIsValidForSave(item: any): Promise<boolean> { // eslint-disable-line @typescript-eslint/no-explicit-any
-    return this.checkAllRequiredFieldsValid(item) && 
+    return this.checkAllRequiredFieldsValid(item) &&
       this.checkAnyFieldContainsValue(item) &&
-      await this.checkAnyFieldCustomErrorMessage(item) && 
+      await this.checkAnyFieldCustomErrorMessage(item) &&
       this.checkAllFieldsAreValid();
   }
 
@@ -373,7 +373,7 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
         return <CollectionNumberField field={field} item={item} disableEdit={disableFieldOnEdit} fOnValueChange={this.onValueChanged} fValidation={this.fieldValidation} />;
       case CustomCollectionFieldType.fabricIcon:
         return <CollectionIconField renderMode={field.iconFieldRenderMode} field={field} item={item} disableEdit={disableFieldOnEdit} fOnValueChange={this.onValueChanged} fValidation={this.fieldValidation} />;
-      case CustomCollectionFieldType.color:    
+      case CustomCollectionFieldType.color:
         return <CollectionColorField field={field} item={item} disableEdit={disableFieldOnEdit} fOnValueChange={this.onValueChanged} fValidation={this.fieldValidation} />;
       case CustomCollectionFieldType.url:
         return <TextField placeholder={field.placeholder || field.title}
diff --git a/src/propertyFields/collectionData/collectionDataViewer/CollectionDataViewer.tsx b/src/propertyFields/collectionData/collectionDataViewer/CollectionDataViewer.tsx
index 91f73bb6..79e758a8 100644
--- a/src/propertyFields/collectionData/collectionDataViewer/CollectionDataViewer.tsx
+++ b/src/propertyFields/collectionData/collectionDataViewer/CollectionDataViewer.tsx
@@ -3,8 +3,8 @@ import styles from '../PropertyFieldCollectionDataHost.module.scss';
 import { ICollectionDataViewerProps } from './ICollectionDataViewerProps';
 import { ICollectionDataViewerState } from './ICollectionDataViewerState';
 import { CollectionDataItem } from '../collectionDataItem';
-import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/components/Button';
-import { Icon } from '@fluentui/react/lib/components/Icon';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
+import { Icon } from '@fluentui/react/lib/Icon';
 import * as strings from 'PropertyControlStrings';
 import { cloneDeep, sortBy } from '@microsoft/sp-lodash-subset';
 
diff --git a/src/propertyFields/collectionData/collectionIconField/CollectionIconField.tsx b/src/propertyFields/collectionData/collectionIconField/CollectionIconField.tsx
index ce6f2fef..654034ec 100644
--- a/src/propertyFields/collectionData/collectionIconField/CollectionIconField.tsx
+++ b/src/propertyFields/collectionData/collectionIconField/CollectionIconField.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import styles from '../PropertyFieldCollectionDataHost.module.scss';
 import { ICollectionIconFieldProps } from '.';
-import { TextField } from '@fluentui/react/lib/components/TextField';
-import { Icon } from '@fluentui/react/lib/components/Icon';
+import { TextField } from '@fluentui/react/lib/TextField';
+import { Icon } from '@fluentui/react/lib/Icon';
 import { ActionButton } from '@fluentui/react/lib/Button';
 import { IconSelector } from '../../../common/iconSelector/IconSelector';
 
diff --git a/src/propertyFields/dateTimePicker/HoursComponent.tsx b/src/propertyFields/dateTimePicker/HoursComponent.tsx
index b8800706..9eef3be7 100644
--- a/src/propertyFields/dateTimePicker/HoursComponent.tsx
+++ b/src/propertyFields/dateTimePicker/HoursComponent.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IHoursComponentProps } from './IPropertyFieldDateTimePickerHost';
 import { TimeConvention } from './IPropertyFieldDateTimePicker';
-import { Dropdown, IDropdownOption } from '@fluentui/react/lib/components/Dropdown';
+import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
 
 /**
  * Hours component, this renders the hours dropdown
diff --git a/src/propertyFields/dateTimePicker/IPropertyFieldDateTimePickerHost.ts b/src/propertyFields/dateTimePicker/IPropertyFieldDateTimePickerHost.ts
index 7a5cd898..41c2582e 100644
--- a/src/propertyFields/dateTimePicker/IPropertyFieldDateTimePickerHost.ts
+++ b/src/propertyFields/dateTimePicker/IPropertyFieldDateTimePickerHost.ts
@@ -1,5 +1,5 @@
 import { IPropertyFieldDateTimePickerPropsInternal, TimeConvention } from './IPropertyFieldDateTimePicker';
-import { IDropdownOption } from '@fluentui/react/lib/components/Dropdown';
+import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
 
 /**
  * PropertyFieldDateTimePickerHost properties interface
diff --git a/src/propertyFields/dateTimePicker/MinutesComponent.tsx b/src/propertyFields/dateTimePicker/MinutesComponent.tsx
index bcd3fe38..b0a22d79 100644
--- a/src/propertyFields/dateTimePicker/MinutesComponent.tsx
+++ b/src/propertyFields/dateTimePicker/MinutesComponent.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ITimeComponentProps } from './IPropertyFieldDateTimePickerHost';
-import { Dropdown, IDropdownOption } from '@fluentui/react/lib/components/Dropdown';
+import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
 
 /**
  * Minutes component, renders the minutes dropdown
diff --git a/src/propertyFields/dateTimePicker/SecondsComponent.tsx b/src/propertyFields/dateTimePicker/SecondsComponent.tsx
index c0d8b4eb..c950e631 100644
--- a/src/propertyFields/dateTimePicker/SecondsComponent.tsx
+++ b/src/propertyFields/dateTimePicker/SecondsComponent.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ITimeComponentProps } from './IPropertyFieldDateTimePickerHost';
-import { Dropdown, IDropdownOption } from '@fluentui/react/lib/components/Dropdown';
+import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
 
 /**
  * Seconds component, renders the seconds dropdown
diff --git a/src/propertyFields/dropdownWithCallout/IPropertyFieldDropdownWithCalloutHost.ts b/src/propertyFields/dropdownWithCallout/IPropertyFieldDropdownWithCalloutHost.ts
index dd810bb5..d542ad5f 100644
--- a/src/propertyFields/dropdownWithCallout/IPropertyFieldDropdownWithCalloutHost.ts
+++ b/src/propertyFields/dropdownWithCallout/IPropertyFieldDropdownWithCalloutHost.ts
@@ -1,5 +1,5 @@
 import { IPropertyFieldHeaderCalloutProps } from '../../common/propertyFieldHeader/IPropertyFieldHeader';
-import { IDropdownProps } from '@fluentui/react/lib/components/Dropdown';
+import { IDropdownProps } from '@fluentui/react/lib/Dropdown';
 
 /**
  * PropertyFieldDropdownWithCalloutHost properties interface
diff --git a/src/propertyFields/dropdownWithCallout/PropertyFieldDropdownWithCallout.ts b/src/propertyFields/dropdownWithCallout/PropertyFieldDropdownWithCallout.ts
index eda6bc2b..31b32eb1 100644
--- a/src/propertyFields/dropdownWithCallout/PropertyFieldDropdownWithCallout.ts
+++ b/src/propertyFields/dropdownWithCallout/PropertyFieldDropdownWithCallout.ts
@@ -9,7 +9,7 @@ import {
 import PropertyFieldDropdownHost from './PropertyFieldDropdownWithCalloutHost';
 import omit from 'lodash/omit';
 import { IPropertyFieldDropdownWithCalloutPropsInternal, IPropertyFieldDropdownWithCalloutProps } from './IPropertyFieldDropdownWithCallout';
-import { IDropdownOption } from '@fluentui/react/lib/components/Dropdown';
+import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
 
 class PropertyFieldDropdownWithCalloutBuilder implements IPropertyPaneField<IPropertyFieldDropdownWithCalloutPropsInternal> {
   public targetProperty: string;
diff --git a/src/propertyFields/dropdownWithCallout/PropertyFieldDropdownWithCalloutHost.tsx b/src/propertyFields/dropdownWithCallout/PropertyFieldDropdownWithCalloutHost.tsx
index b3c57f8d..7d21238c 100644
--- a/src/propertyFields/dropdownWithCallout/PropertyFieldDropdownWithCalloutHost.tsx
+++ b/src/propertyFields/dropdownWithCallout/PropertyFieldDropdownWithCalloutHost.tsx
@@ -4,9 +4,9 @@ import type { IPropertyFieldHeaderProps } from '../../common/propertyFieldHeader
 
 import { IPropertyFieldDropdownWithCalloutHostProps } from './IPropertyFieldDropdownWithCalloutHost';
 import * as telemetry from '../../common/telemetry';
-import { Dropdown, IDropdownProps, IDropdownOption } from '@fluentui/react/lib/components/Dropdown';
+import { Dropdown, IDropdownProps, IDropdownOption } from '@fluentui/react/lib/Dropdown';
 import { IPropertyPaneDropdownOption } from '@microsoft/sp-property-pane';
-import { SelectableOptionMenuItemType } from '@fluentui/react/lib/utilities/selectableOption/SelectableOption.types';
+import { SelectableOptionMenuItemType } from '@fluentui/react/lib/SelectableOption';
 import omit from 'lodash/omit';
 
 export default class PropertyFieldDropdownHost extends React.Component<IPropertyFieldDropdownWithCalloutHostProps, null> {
diff --git a/src/propertyFields/filePicker/PropertyFieldFilePickerHost.tsx b/src/propertyFields/filePicker/PropertyFieldFilePickerHost.tsx
index 50afbe27..6a288e24 100644
--- a/src/propertyFields/filePicker/PropertyFieldFilePickerHost.tsx
+++ b/src/propertyFields/filePicker/PropertyFieldFilePickerHost.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { IconButton } from "@fluentui/react/lib/components/Button";
+import { IconButton } from "@fluentui/react/lib/Button";
 import * as strings from 'PropertyControlStrings';
 
 import { FilePicker, IFilePickerResult } from './filePickerControls';
diff --git a/src/propertyFields/filePicker/filePickerControls/FilePicker.tsx b/src/propertyFields/filePicker/filePickerControls/FilePicker.tsx
index 596bbd70..2e0a2422 100644
--- a/src/propertyFields/filePicker/filePickerControls/FilePicker.tsx
+++ b/src/propertyFields/filePicker/filePickerControls/FilePicker.tsx
@@ -2,9 +2,9 @@ import * as React from 'react';
 import { IFilePickerProps } from './IFilePickerProps';
 import { IFilePickerState } from './IFilePickerState';
 
-import { PrimaryButton, ActionButton } from '@fluentui/react/lib/components/Button';
-import { Panel, PanelType } from '@fluentui/react/lib/components/Panel';
-import { Label } from '@fluentui/react/lib/components/Label';
+import { PrimaryButton, ActionButton } from '@fluentui/react/lib/Button';
+import { Panel, PanelType } from '@fluentui/react/lib/Panel';
+import { Label } from '@fluentui/react/lib/Label';
 import { Nav, INavLink, INavLinkGroup } from '@fluentui/react/lib/Nav';
 import { css } from '@fluentui/react/lib/Utilities';
 
diff --git a/src/propertyFields/filePicker/filePickerControls/LinkFilePickerTab/LinkFilePickerTab.tsx b/src/propertyFields/filePicker/filePickerControls/LinkFilePickerTab/LinkFilePickerTab.tsx
index 8811b935..ece13084 100644
--- a/src/propertyFields/filePicker/filePickerControls/LinkFilePickerTab/LinkFilePickerTab.tsx
+++ b/src/propertyFields/filePicker/filePickerControls/LinkFilePickerTab/LinkFilePickerTab.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { ILinkFilePickerTabProps, ILinkFilePickerTabState } from '.';
 import { GeneralHelper } from '../../../../helpers/GeneralHelper';
 import { IFilePickerResult } from '../FilePicker.types';
-import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/components/Button';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
 import { TextField } from '@fluentui/react/lib/TextField';
 import { css } from '@fluentui/react/lib/Utilities';
 
diff --git a/src/propertyFields/filePicker/filePickerControls/OneDriveFilesTab/OneDriveFilesTab.types.ts b/src/propertyFields/filePicker/filePickerControls/OneDriveFilesTab/OneDriveFilesTab.types.ts
index d63589d3..9c3c42f3 100644
--- a/src/propertyFields/filePicker/filePickerControls/OneDriveFilesTab/OneDriveFilesTab.types.ts
+++ b/src/propertyFields/filePicker/filePickerControls/OneDriveFilesTab/OneDriveFilesTab.types.ts
@@ -1,4 +1,4 @@
-import { IBreadcrumbItem } from "@fluentui/react/lib/components/Breadcrumb";
+import { IBreadcrumbItem } from "@fluentui/react/lib/Breadcrumb";
 import { IFile } from "../../../../services/FileBrowserService.types";
 
 export interface OneDriveFilesBreadcrumbItem extends IBreadcrumbItem {
diff --git a/src/propertyFields/filePicker/filePickerControls/RecentFilesTab/RecentFilesTab.tsx b/src/propertyFields/filePicker/filePickerControls/RecentFilesTab/RecentFilesTab.tsx
index f00b13c7..6845b97c 100644
--- a/src/propertyFields/filePicker/filePickerControls/RecentFilesTab/RecentFilesTab.tsx
+++ b/src/propertyFields/filePicker/filePickerControls/RecentFilesTab/RecentFilesTab.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/components/Button';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
 import { Spinner } from '@fluentui/react/lib/Spinner';
 import { FocusZone } from '@fluentui/react/lib/FocusZone';
 import { List } from '@fluentui/react/lib/List';
diff --git a/src/propertyFields/filePicker/filePickerControls/SiteFilePickerTab/SiteFilePickerTab.tsx b/src/propertyFields/filePicker/filePickerControls/SiteFilePickerTab/SiteFilePickerTab.tsx
index cf1385a0..4de1e17f 100644
--- a/src/propertyFields/filePicker/filePickerControls/SiteFilePickerTab/SiteFilePickerTab.tsx
+++ b/src/propertyFields/filePicker/filePickerControls/SiteFilePickerTab/SiteFilePickerTab.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { findIndex } from '@microsoft/sp-lodash-subset';
 import { ISiteFilePickerTabProps, ISiteFilePickerTabState } from '.';
 import { DocumentLibraryBrowser, FileBrowser } from '../controls';
-import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/components/Button';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
 import { Breadcrumb, IBreadcrumbItem } from '@fluentui/react/lib/Breadcrumb';
 import { ScrollablePane } from '@fluentui/react/lib/ScrollablePane';
 import { IFile, ILibrary } from '../../../../services/FileBrowserService.types';
diff --git a/src/propertyFields/filePicker/filePickerControls/UploadFilePickerTab/UploadFilePickerTab.tsx b/src/propertyFields/filePicker/filePickerControls/UploadFilePickerTab/UploadFilePickerTab.tsx
index 858ee667..6442c00a 100644
--- a/src/propertyFields/filePicker/filePickerControls/UploadFilePickerTab/UploadFilePickerTab.tsx
+++ b/src/propertyFields/filePicker/filePickerControls/UploadFilePickerTab/UploadFilePickerTab.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { IUploadFilePickerTabProps, IUploadFilePickerTabState } from '.';
 import { IFilePickerResult } from '../FilePicker.types';
 import { GeneralHelper } from '../../../../helpers/GeneralHelper';
-import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/components/Button';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
 import { css } from '@fluentui/react/lib/Utilities';
 import * as strings from 'PropertyControlStrings';
 import styles from './UploadFilePickerTab.module.scss';
diff --git a/src/propertyFields/filePicker/filePickerControls/WebSearchTab/WebSearchTab.tsx b/src/propertyFields/filePicker/filePickerControls/WebSearchTab/WebSearchTab.tsx
index 276c9ac1..e905f4f7 100644
--- a/src/propertyFields/filePicker/filePickerControls/WebSearchTab/WebSearchTab.tsx
+++ b/src/propertyFields/filePicker/filePickerControls/WebSearchTab/WebSearchTab.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { IWebSearchTabProps } from './IWebSearchTabProps';
 import { IWebSearchTabState } from './IWebSearchTabState';
 import { ISearchSuggestion, ImageSize, ImageAspect, ImageLicense, DEFAULT_SUGGESTIONS, MAX_ROW_HEIGHT, ROWS_PER_PAGE } from './WebSearchTab.types';
-import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/components/Button';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
 import { Label } from '@fluentui/react/lib/Label';
 import { SearchBox } from '@fluentui/react/lib/SearchBox';
 import { Check } from '@fluentui/react/lib/Check';
diff --git a/src/propertyFields/filePicker/placeHolderControl/PlaceholderComponent.tsx b/src/propertyFields/filePicker/placeHolderControl/PlaceholderComponent.tsx
index fdf7052d..16152c4c 100644
--- a/src/propertyFields/filePicker/placeHolderControl/PlaceholderComponent.tsx
+++ b/src/propertyFields/filePicker/placeHolderControl/PlaceholderComponent.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { IPlaceholderProps, IPlaceholderState } from './IPlaceholderComponent';
 import { PrimaryButton } from '@fluentui/react/lib/Button';
 import styles from './PlaceholderComponent.module.scss';
-import { Icon } from '@fluentui/react/lib/components/Icon';
+import { Icon } from '@fluentui/react/lib/Icon';
 
 /**
  * Placeholder component
diff --git a/src/propertyFields/labelWithCallout/IPropertyFieldLabelWithCalloutHost.ts b/src/propertyFields/labelWithCallout/IPropertyFieldLabelWithCalloutHost.ts
index 5f075ee9..7324d59f 100644
--- a/src/propertyFields/labelWithCallout/IPropertyFieldLabelWithCalloutHost.ts
+++ b/src/propertyFields/labelWithCallout/IPropertyFieldLabelWithCalloutHost.ts
@@ -1,5 +1,5 @@
 import { IPlaceholderWithCalloutProps } from '../../common/placeholderWithCallout/IPlaceholderWithCallout';
-import { ILabelProps } from '@fluentui/react/lib/components/Label';
+import { ILabelProps } from '@fluentui/react/lib/Label';
 
 /**
  * PropertyFieldLabelWithCalloutHost properties interface
diff --git a/src/propertyFields/labelWithCallout/PropertyFieldLabelWithCalloutHost.tsx b/src/propertyFields/labelWithCallout/PropertyFieldLabelWithCalloutHost.tsx
index 525fd6d2..459a08a2 100644
--- a/src/propertyFields/labelWithCallout/PropertyFieldLabelWithCalloutHost.tsx
+++ b/src/propertyFields/labelWithCallout/PropertyFieldLabelWithCalloutHost.tsx
@@ -4,7 +4,7 @@ import PlaceholderWithCallout from '../../common/placeholderWithCallout/Placehol
 
 import { IPropertyFieldLabelWithCalloutHostProps } from './IPropertyFieldLabelWithCalloutHost';
 import * as telemetry from '../../common/telemetry';
-import { Label } from '@fluentui/react/lib/components/Label';
+import { Label } from '@fluentui/react/lib/Label';
 
 /**
 * Renders the control for PropertyFieldLabelWithCallout component
diff --git a/src/propertyFields/linkWithCallout/IPropertyFieldLinkWithCalloutHost.ts b/src/propertyFields/linkWithCallout/IPropertyFieldLinkWithCalloutHost.ts
index 77fa198c..686e3341 100644
--- a/src/propertyFields/linkWithCallout/IPropertyFieldLinkWithCalloutHost.ts
+++ b/src/propertyFields/linkWithCallout/IPropertyFieldLinkWithCalloutHost.ts
@@ -1,6 +1,6 @@
 import { IPlaceholderWithCalloutProps } from '../../common/placeholderWithCallout/IPlaceholderWithCallout';
 import { IPopupWindowProps } from '@microsoft/sp-property-pane';
-import { ILinkProps } from '@fluentui/react/lib/components/Link';
+import { ILinkProps } from '@fluentui/react/lib/Link';
 
 /**
  * PropertyFieldLinkWithCalloutHost properties interface
diff --git a/src/propertyFields/linkWithCallout/PropertyFieldLinkWithCalloutHost.tsx b/src/propertyFields/linkWithCallout/PropertyFieldLinkWithCalloutHost.tsx
index af3e59e4..c958a8c4 100644
--- a/src/propertyFields/linkWithCallout/PropertyFieldLinkWithCalloutHost.tsx
+++ b/src/propertyFields/linkWithCallout/PropertyFieldLinkWithCalloutHost.tsx
@@ -5,7 +5,7 @@ import type { IPlaceholderWithCalloutProps } from '../../common/placeholderWithC
 
 import { IPropertyFieldLinkWithCalloutHostProps } from './IPropertyFieldLinkWithCalloutHost';
 import * as telemetry from '../../common/telemetry';
-import { Link } from '@fluentui/react/lib/components/Link';
+import { Link } from '@fluentui/react/lib/Link';
 
 /**
 * Renders the control for PropertyFieldLinkWithCallout component
diff --git a/src/propertyFields/monacoEditor/monacoEditorControl/Error.tsx b/src/propertyFields/monacoEditor/monacoEditorControl/Error.tsx
index 411ff906..70b0bbbd 100644
--- a/src/propertyFields/monacoEditor/monacoEditorControl/Error.tsx
+++ b/src/propertyFields/monacoEditor/monacoEditorControl/Error.tsx
@@ -1,5 +1,5 @@
 
-import { Stack } from "@fluentui/react/lib/components/Stack";
+import { Stack } from "@fluentui/react/lib/Stack";
 import { MessageBarType , MessageBar} from "@fluentui/react/lib/MessageBar";
 import * as React from "react";
 
diff --git a/src/propertyFields/multiSelect/IPropertyFieldMultiSelectHost.ts b/src/propertyFields/multiSelect/IPropertyFieldMultiSelectHost.ts
index 8b5771cf..aa634260 100644
--- a/src/propertyFields/multiSelect/IPropertyFieldMultiSelectHost.ts
+++ b/src/propertyFields/multiSelect/IPropertyFieldMultiSelectHost.ts
@@ -1,4 +1,4 @@
-import { IDropdownProps } from '@fluentui/react/lib/components/Dropdown';
+import { IDropdownProps } from '@fluentui/react/lib/Dropdown';
 
 /**
 * PropertyFieldMultiSelectHost properties interface
diff --git a/src/propertyFields/multiSelect/PropertyFieldMultiSelect.ts b/src/propertyFields/multiSelect/PropertyFieldMultiSelect.ts
index ba3b466f..9c9fa39f 100644
--- a/src/propertyFields/multiSelect/PropertyFieldMultiSelect.ts
+++ b/src/propertyFields/multiSelect/PropertyFieldMultiSelect.ts
@@ -1,4 +1,4 @@
-import { IDropdownOption } from '@fluentui/react/lib/components/Dropdown';
+import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import {
diff --git a/src/propertyFields/multiSelect/PropertyFieldMultiSelectHost.tsx b/src/propertyFields/multiSelect/PropertyFieldMultiSelectHost.tsx
index d4fc7676..0c840780 100644
--- a/src/propertyFields/multiSelect/PropertyFieldMultiSelectHost.tsx
+++ b/src/propertyFields/multiSelect/PropertyFieldMultiSelectHost.tsx
@@ -1,6 +1,6 @@
 import * as strings from 'PropertyControlStrings';
 import * as React from 'react';
-import { Dropdown } from '@fluentui/react/lib/components/Dropdown';
+import { Dropdown } from '@fluentui/react/lib/Dropdown';
 import { IPropertyFieldMultiSelectHostProps } from './IPropertyFieldMultiSelectHost';
 import * as telemetry from '../../common/telemetry';
 
diff --git a/src/propertyFields/peoplePicker/IPropertyFieldPeoplePickerHost.ts b/src/propertyFields/peoplePicker/IPropertyFieldPeoplePickerHost.ts
index 0c1cfd41..a17bdaee 100644
--- a/src/propertyFields/peoplePicker/IPropertyFieldPeoplePickerHost.ts
+++ b/src/propertyFields/peoplePicker/IPropertyFieldPeoplePickerHost.ts
@@ -1,5 +1,5 @@
 import { IPropertyFieldGroupOrPerson, IPropertyFieldPeoplePickerPropsInternal } from './IPropertyFieldPeoplePicker';
-import { IPersonaProps } from '@fluentui/react/lib/components/Persona';
+import { IPersonaProps } from '@fluentui/react/lib/Persona';
 
 /**
  * PropertyFieldPeoplePickerHost properties interface
diff --git a/src/propertyFields/search/IPropertyFieldSearch.ts b/src/propertyFields/search/IPropertyFieldSearch.ts
index f14886ba..da2e8655 100644
--- a/src/propertyFields/search/IPropertyFieldSearch.ts
+++ b/src/propertyFields/search/IPropertyFieldSearch.ts
@@ -1,7 +1,7 @@
 import {
   IPropertyPaneCustomFieldProps,
 } from '@microsoft/sp-property-pane';
-import { ISearchBoxStyles } from '@fluentui/react/lib/components/SearchBox';
+import { ISearchBoxStyles } from '@fluentui/react/lib/SearchBox';
 
 export interface IPropertyFieldSearchProps {
   key: string;
diff --git a/src/propertyFields/search/IPropertyFieldSearchHost.ts b/src/propertyFields/search/IPropertyFieldSearchHost.ts
index c9d0cce6..056ed461 100644
--- a/src/propertyFields/search/IPropertyFieldSearchHost.ts
+++ b/src/propertyFields/search/IPropertyFieldSearchHost.ts
@@ -1,4 +1,4 @@
-import { ISearchBoxStyles } from "@fluentui/react/lib/components/SearchBox";
+import { ISearchBoxStyles } from "@fluentui/react/lib/SearchBox";
 
 export interface IPropertyFieldSearchHostProps {
   key: string;
diff --git a/src/propertyFields/sliderWithCallout/IPropertyFieldSliderWithCalloutHost.ts b/src/propertyFields/sliderWithCallout/IPropertyFieldSliderWithCalloutHost.ts
index 05b611c8..4776c5ae 100644
--- a/src/propertyFields/sliderWithCallout/IPropertyFieldSliderWithCalloutHost.ts
+++ b/src/propertyFields/sliderWithCallout/IPropertyFieldSliderWithCalloutHost.ts
@@ -1,5 +1,5 @@
 import { IPropertyFieldHeaderCalloutProps } from '../../common/propertyFieldHeader/IPropertyFieldHeader';
-import { ISliderProps } from '@fluentui/react/lib/components/Slider';
+import { ISliderProps } from '@fluentui/react/lib/Slider';
 
 /**
  * PropertyFieldSliderWithCalloutHost properties interface
diff --git a/src/propertyFields/sliderWithCallout/PropertyFieldSliderWithCalloutHost.tsx b/src/propertyFields/sliderWithCallout/PropertyFieldSliderWithCalloutHost.tsx
index 485c0ed1..0afb6b42 100644
--- a/src/propertyFields/sliderWithCallout/PropertyFieldSliderWithCalloutHost.tsx
+++ b/src/propertyFields/sliderWithCallout/PropertyFieldSliderWithCalloutHost.tsx
@@ -4,7 +4,7 @@ import PropertyFieldHeader from '../../common/propertyFieldHeader/PropertyFieldH
 
 import { IPropertyFieldSliderWithCalloutHostProps } from './IPropertyFieldSliderWithCalloutHost';
 import * as telemetry from '../../common/telemetry';
-import { Slider } from '@fluentui/react/lib/components/Slider';
+import { Slider } from '@fluentui/react/lib/Slider';
 
 import omit from 'lodash/omit';
 
diff --git a/src/propertyFields/spinner/IPropertyFieldSpinner.ts b/src/propertyFields/spinner/IPropertyFieldSpinner.ts
index dd804e91..825071ed 100644
--- a/src/propertyFields/spinner/IPropertyFieldSpinner.ts
+++ b/src/propertyFields/spinner/IPropertyFieldSpinner.ts
@@ -1,7 +1,7 @@
 import {
   IPropertyPaneCustomFieldProps,
 } from '@microsoft/sp-property-pane';
-import { SpinnerSize } from '@fluentui/react/lib/components/Spinner';
+import { SpinnerSize } from '@fluentui/react/lib/Spinner';
 
 
 
diff --git a/src/propertyFields/spinner/PropertyFieldSpinnerHost.tsx b/src/propertyFields/spinner/PropertyFieldSpinnerHost.tsx
index e980821e..6b159181 100644
--- a/src/propertyFields/spinner/PropertyFieldSpinnerHost.tsx
+++ b/src/propertyFields/spinner/PropertyFieldSpinnerHost.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Spinner } from "@fluentui/react/lib/components/Spinner";
+import { Spinner } from "@fluentui/react/lib/Spinner";
 //import styles from './Component.module.scss';
 
 import {
diff --git a/src/propertyFields/textWithCallout/IPropertyFieldTextWithCalloutHost.ts b/src/propertyFields/textWithCallout/IPropertyFieldTextWithCalloutHost.ts
index 0ee1cac8..85462f13 100644
--- a/src/propertyFields/textWithCallout/IPropertyFieldTextWithCalloutHost.ts
+++ b/src/propertyFields/textWithCallout/IPropertyFieldTextWithCalloutHost.ts
@@ -1,5 +1,5 @@
 import { IPropertyFieldHeaderCalloutProps } from '../../common/propertyFieldHeader/IPropertyFieldHeader';
-import { ITextFieldProps } from '@fluentui/react/lib/components/TextField';
+import { ITextFieldProps } from '@fluentui/react/lib/TextField';
 
 /**
  * PropertyFieldTextWithCalloutHost properties interface
diff --git a/src/propertyFields/textWithCallout/PropertyFieldTextWithCalloutHost.tsx b/src/propertyFields/textWithCallout/PropertyFieldTextWithCalloutHost.tsx
index af238397..dc8f4a31 100644
--- a/src/propertyFields/textWithCallout/PropertyFieldTextWithCalloutHost.tsx
+++ b/src/propertyFields/textWithCallout/PropertyFieldTextWithCalloutHost.tsx
@@ -4,7 +4,7 @@ import PropertyFieldHeader from '../../common/propertyFieldHeader/PropertyFieldH
 
 import { IPropertyFieldTextWithCalloutHostProps } from './IPropertyFieldTextWithCalloutHost';
 import * as telemetry from '../../common/telemetry';
-import { TextField } from '@fluentui/react/lib/components/TextField';
+import { TextField } from '@fluentui/react/lib/TextField';
 import omit from 'lodash/omit';
 
 export default class PropertyFieldTextWithCalloutHost extends React.Component<IPropertyFieldTextWithCalloutHostProps, null> {
diff --git a/src/propertyFields/toggleWithCallout/IPropertyFieldToggleWithCalloutHost.ts b/src/propertyFields/toggleWithCallout/IPropertyFieldToggleWithCalloutHost.ts
index 05161b35..0607b8ec 100644
--- a/src/propertyFields/toggleWithCallout/IPropertyFieldToggleWithCalloutHost.ts
+++ b/src/propertyFields/toggleWithCallout/IPropertyFieldToggleWithCalloutHost.ts
@@ -1,5 +1,5 @@
 import { IPropertyFieldHeaderCalloutProps } from '../../common/propertyFieldHeader/IPropertyFieldHeader';
-import { IToggleProps } from '@fluentui/react/lib/components/Toggle';
+import { IToggleProps } from '@fluentui/react/lib/Toggle';
 
 /**
  * PropertyFieldToggleWithCalloutHost properties interface
diff --git a/src/propertyFields/toggleWithCallout/PropertyFieldToggleWithCalloutHost.tsx b/src/propertyFields/toggleWithCallout/PropertyFieldToggleWithCalloutHost.tsx
index a9fa496a..29ee4c82 100644
--- a/src/propertyFields/toggleWithCallout/PropertyFieldToggleWithCalloutHost.tsx
+++ b/src/propertyFields/toggleWithCallout/PropertyFieldToggleWithCalloutHost.tsx
@@ -5,7 +5,7 @@ import type { IPropertyFieldHeaderProps } from '../../common/propertyFieldHeader
 
 import { IPropertyFieldToggleWithCalloutHostProps } from './IPropertyFieldToggleWithCalloutHost';
 import * as telemetry from '../../common/telemetry';
-import { Toggle } from '@fluentui/react/lib/components/Toggle';
+import { Toggle } from '@fluentui/react/lib/Toggle';
 
 import omit from 'lodash/omit';