diff --git a/.eslintrc b/.eslintrc
index 26a405b7745..a5c78eff7b6 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -29,7 +29,7 @@
     ],
     "babel/no-unused-expressions": "off",
     "import/named": "off",
-    "import/no-named-as-default": "off",
+    "import/no-default-export": ["error"],
     "react/button-has-type": "off",
     "react/no-array-index-key": "off",
     "react/jsx-fragments": ["error", "element"],
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 0765c4cccee..a9894a97b0e 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -49,7 +49,7 @@ Fixes #0000 <!-- link to issue if one exists -->
 import React from 'react';
 import {Page} from '../src';
 
-export default function Playground() {
+export function Playground() {
   return (
     <Page title="Playground">
       {/* Add the code you want to test in here */}
diff --git a/.storybook/stories-from-readme.js b/.storybook/stories-from-readme.js
index 6b1f5fa8f6d..7d5e9fe8dea 100644
--- a/.storybook/stories-from-readme.js
+++ b/.storybook/stories-from-readme.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {AppProvider, Heading} from '../src';
 import {withA11y} from '@storybook/addon-a11y';
 import {storiesOf} from '@storybook/react';
-import Playground from '../playground/Playground';
+import {Playground} from '../playground/Playground';
 import en from '../locales/en.json';
 
 /**
diff --git a/UNRELEASED.md b/UNRELEASED.md
index c809702eda2..6738509fde7 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -35,6 +35,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Development workflow
 
+- Update subcomponents to use named exports for components and better names props exports ([#2058](https://github.com/Shopify/polaris-react/pull/2058))
+
 ### Dependency upgrades
 
 ### Code quality
diff --git a/playground/Playground.tsx b/playground/Playground.tsx
index c62ea43d096..07040400b31 100644
--- a/playground/Playground.tsx
+++ b/playground/Playground.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Page} from '../src';
 
-export default function Playground() {
+export function Playground() {
   return (
     <Page title="Playground">
       {/* Add the code you want to test in here */}
diff --git a/sewing-kit.config.ts b/sewing-kit.config.ts
index 0bd50c4558b..890184c54c0 100644
--- a/sewing-kit.config.ts
+++ b/sewing-kit.config.ts
@@ -7,6 +7,7 @@ interface InitialOptions extends jest.InitialOptions {
   setupFilesAfterEnv: string[];
 }
 
+// eslint-disable-next-line import/no-default-export
 export default function sewingKitConfig(
   plugins: Plugins,
   env: Env,
diff --git a/src/components/AccountConnection/AccountConnection.tsx b/src/components/AccountConnection/AccountConnection.tsx
index bc2c3644d4d..cab374b3c42 100644
--- a/src/components/AccountConnection/AccountConnection.tsx
+++ b/src/components/AccountConnection/AccountConnection.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 
 import {Action} from '../../types';
-import Avatar from '../Avatar';
+import {Avatar} from '../Avatar';
 import {buttonFrom} from '../Button';
-import Card from '../Card';
-import Stack from '../Stack';
-import TextStyle from '../TextStyle';
-import SettingAction from '../SettingAction';
+import {Card} from '../Card';
+import {Stack} from '../Stack';
+import {TextStyle} from '../TextStyle';
+import {SettingAction} from '../SettingAction';
 
 import styles from './AccountConnection.scss';
 
-export interface Props {
+export interface AccountConnectionProps {
   /** Content to display as title */
   title?: React.ReactNode;
   /** Content to display as additional details */
@@ -27,7 +27,7 @@ export interface Props {
   action?: Action;
 }
 
-export default function AccountConnection({
+export function AccountConnection({
   connected = false,
   action,
   avatarUrl,
@@ -35,7 +35,7 @@ export default function AccountConnection({
   title,
   details,
   termsOfService,
-}: Props) {
+}: AccountConnectionProps) {
   const initials = accountName
     ? accountName
         .split(/\s+/)
diff --git a/src/components/AccountConnection/index.ts b/src/components/AccountConnection/index.ts
index 89414c38279..864745032b4 100644
--- a/src/components/AccountConnection/index.ts
+++ b/src/components/AccountConnection/index.ts
@@ -1,4 +1 @@
-import AccountConnection from './AccountConnection';
-
-export {Props} from './AccountConnection';
-export default AccountConnection;
+export {AccountConnection, AccountConnectionProps} from './AccountConnection';
diff --git a/src/components/AccountConnection/tests/AccountConnection.test.tsx b/src/components/AccountConnection/tests/AccountConnection.test.tsx
index 58284f347e2..1533f052508 100644
--- a/src/components/AccountConnection/tests/AccountConnection.test.tsx
+++ b/src/components/AccountConnection/tests/AccountConnection.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Avatar, buttonFrom} from 'components';
-import AccountConnection from '../AccountConnection';
+import {AccountConnection} from '../AccountConnection';
 
 describe('<AccountConnection />', () => {
   describe('title', () => {
diff --git a/src/components/ActionList/ActionList.tsx b/src/components/ActionList/ActionList.tsx
index 4dcc670d580..4e6ee61fd93 100644
--- a/src/components/ActionList/ActionList.tsx
+++ b/src/components/ActionList/ActionList.tsx
@@ -4,7 +4,7 @@ import {Section} from './components';
 
 import styles from './ActionList.scss';
 
-export interface Props {
+export interface ActionListProps {
   /** Collection of actions for list */
   items?: ActionListItemDescriptor[];
   /** Collection of sectioned action items */
@@ -15,12 +15,12 @@ export interface Props {
   onActionAnyItem?: ActionListItemDescriptor['onAction'];
 }
 
-export default function ActionList({
+export function ActionList({
   items,
   sections = [],
   actionRole,
   onActionAnyItem,
-}: Props) {
+}: ActionListProps) {
   let finalSections: ActionListSection[] = [];
 
   if (items) {
diff --git a/src/components/ActionList/components/Item/Item.tsx b/src/components/ActionList/components/Item/Item.tsx
index 5f4004b2fe5..eefd9c302b5 100644
--- a/src/components/ActionList/components/Item/Item.tsx
+++ b/src/components/ActionList/components/Item/Item.tsx
@@ -2,17 +2,17 @@ import React from 'react';
 
 import {classNames} from '../../../../utilities/css';
 import {ActionListItemDescriptor} from '../../../../types';
-import Scrollable from '../../../Scrollable';
-import Icon from '../../../Icon';
-import UnstyledLink from '../../../UnstyledLink';
-import Badge from '../../../Badge';
-import TextStyle from '../../../TextStyle';
+import {Scrollable} from '../../../Scrollable';
+import {Icon} from '../../../Icon';
+import {UnstyledLink} from '../../../UnstyledLink';
+import {Badge} from '../../../Badge';
+import {TextStyle} from '../../../TextStyle';
 
 import styles from '../../ActionList.scss';
 
-export type Props = ActionListItemDescriptor;
+export type ItemProps = ActionListItemDescriptor;
 
-export default function Item({
+export function Item({
   id,
   badge,
   content,
@@ -28,7 +28,7 @@ export default function Item({
   ellipsis,
   active,
   role,
-}: Props) {
+}: ItemProps) {
   const className = classNames(
     styles.Item,
     disabled && styles.disabled,
diff --git a/src/components/ActionList/components/Item/index.ts b/src/components/ActionList/components/Item/index.ts
index 02c0b0e1951..e158f53cc0d 100644
--- a/src/components/ActionList/components/Item/index.ts
+++ b/src/components/ActionList/components/Item/index.ts
@@ -1,4 +1 @@
-import Item from './Item';
-
-export {Props} from './Item';
-export default Item;
+export {Item, ItemProps} from './Item';
diff --git a/src/components/ActionList/components/Item/tests/Item.test.tsx b/src/components/ActionList/components/Item/tests/Item.test.tsx
index 523d917f9be..95fee1bf0f0 100644
--- a/src/components/ActionList/components/Item/tests/Item.test.tsx
+++ b/src/components/ActionList/components/Item/tests/Item.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {UnstyledLink} from 'components';
-import Item from '../Item';
-import TextStyle from '../../../../TextStyle';
+import {Item} from '../Item';
+import {TextStyle} from '../../../../TextStyle';
 
 describe('<Item />', () => {
   it('adds a style property when the image prop is present', () => {
diff --git a/src/components/ActionList/components/Section/Section.tsx b/src/components/ActionList/components/Section/Section.tsx
index ac63d75f65d..da7d401fa03 100644
--- a/src/components/ActionList/components/Section/Section.tsx
+++ b/src/components/ActionList/components/Section/Section.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import Item from '../Item';
+import {Item} from '../Item';
 import {ActionListItemDescriptor, ActionListSection} from '../../../../types';
 
 import styles from '../../ActionList.scss';
 
-export interface Props {
+export interface SectionProps {
   /** Section of action items */
   section: ActionListSection;
   /** Should there be multiple sections */
@@ -15,12 +15,12 @@ export interface Props {
   onActionAnyItem?: ActionListItemDescriptor['onAction'];
 }
 
-export default function Section({
+export function Section({
   section,
   hasMultipleSections,
   actionRole,
   onActionAnyItem,
-}: Props) {
+}: SectionProps) {
   const handleAction = (itemOnAction: ActionListItemDescriptor['onAction']) => {
     return () => {
       if (itemOnAction) {
diff --git a/src/components/ActionList/components/Section/index.ts b/src/components/ActionList/components/Section/index.ts
index b147a6e4e4b..344c319971d 100644
--- a/src/components/ActionList/components/Section/index.ts
+++ b/src/components/ActionList/components/Section/index.ts
@@ -1,4 +1 @@
-import Section from './Section';
-
-export {Props} from './Section';
-export default Section;
+export {Section, SectionProps} from './Section';
diff --git a/src/components/ActionList/components/Section/tests/Section.test.tsx b/src/components/ActionList/components/Section/tests/Section.test.tsx
index 060122fe33b..065ad046172 100644
--- a/src/components/ActionList/components/Section/tests/Section.test.tsx
+++ b/src/components/ActionList/components/Section/tests/Section.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Item from '../../Item';
-import Section from '../Section';
+import {Item} from '../../Item';
+import {Section} from '../Section';
 
 describe('<Section />', () => {
   it('renders its items', () => {
diff --git a/src/components/ActionList/components/index.ts b/src/components/ActionList/components/index.ts
index 1d5c5674eaf..029ec98e8df 100644
--- a/src/components/ActionList/components/index.ts
+++ b/src/components/ActionList/components/index.ts
@@ -1,3 +1,3 @@
-export {default as Item, Props as ItemProps} from './Item';
+export {Item, ItemProps} from './Item';
 
-export {default as Section, Props as SectionProps} from './Section';
+export {Section, SectionProps} from './Section';
diff --git a/src/components/ActionList/index.ts b/src/components/ActionList/index.ts
index 863aba5a1c5..28da31ede9b 100644
--- a/src/components/ActionList/index.ts
+++ b/src/components/ActionList/index.ts
@@ -1,4 +1 @@
-import ActionList from './ActionList';
-
-export {Props} from './ActionList';
-export default ActionList;
+export {ActionList, ActionListProps} from './ActionList';
diff --git a/src/components/ActionList/tests/ActionList.test.tsx b/src/components/ActionList/tests/ActionList.test.tsx
index 9abab68b35c..b6f39825634 100644
--- a/src/components/ActionList/tests/ActionList.test.tsx
+++ b/src/components/ActionList/tests/ActionList.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {ImportMinor, ExportMinor} from '@shopify/polaris-icons';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import ActionList from '../ActionList';
-import Badge from '../../Badge';
+import {ActionList} from '../ActionList';
+import {Badge} from '../../Badge';
 import {Item, Section} from '../components';
 
 describe('<ActionList />', () => {
diff --git a/src/components/ActionMenu/ActionMenu.tsx b/src/components/ActionMenu/ActionMenu.tsx
index 104a135a62d..8c78276f0ef 100644
--- a/src/components/ActionMenu/ActionMenu.tsx
+++ b/src/components/ActionMenu/ActionMenu.tsx
@@ -11,7 +11,7 @@ import {MenuAction, MenuGroup, RollupActions} from './components';
 
 import styles from './ActionMenu.scss';
 
-export interface Props {
+export interface ActionMenuProps {
   /** Collection of page-level secondary actions */
   actions?: ComplexAction[];
   /** Collection of page-level action groups */
@@ -24,7 +24,7 @@ interface State {
   activeMenuGroup?: string;
 }
 
-export default class ActionMenu extends React.PureComponent<Props, State> {
+export class ActionMenu extends React.PureComponent<ActionMenuProps, State> {
   state: State = {
     activeMenuGroup: undefined,
   };
@@ -100,7 +100,7 @@ export default class ActionMenu extends React.PureComponent<Props, State> {
   };
 }
 
-export function hasGroupsWithActions(groups: Props['groups'] = []) {
+export function hasGroupsWithActions(groups: ActionMenuProps['groups'] = []) {
   return groups.length === 0
     ? false
     : groups.some((group) => group.actions.length > 0);
diff --git a/src/components/ActionMenu/components/MenuAction/MenuAction.tsx b/src/components/ActionMenu/components/MenuAction/MenuAction.tsx
index b5da74f0730..fe93b06b308 100644
--- a/src/components/ActionMenu/components/MenuAction/MenuAction.tsx
+++ b/src/components/ActionMenu/components/MenuAction/MenuAction.tsx
@@ -5,17 +5,17 @@ import {classNames} from '../../../../utilities/css';
 import {handleMouseUpByBlurring} from '../../../../utilities/focus';
 import {ComplexAction} from '../../../../types';
 
-import Icon from '../../../Icon';
-import UnstyledLink from '../../../UnstyledLink';
+import {Icon} from '../../../Icon';
+import {UnstyledLink} from '../../../UnstyledLink';
 
 import styles from './MenuAction.scss';
 
-export interface Props extends ComplexAction {
+export interface MenuActionProps extends ComplexAction {
   /** Whether or not the action discloses a menu group */
   disclosure?: boolean;
 }
 
-export default function MenuAction({
+export function MenuAction({
   content,
   accessibilityLabel,
   url,
@@ -24,7 +24,7 @@ export default function MenuAction({
   disclosure,
   disabled,
   onAction,
-}: Props) {
+}: MenuActionProps) {
   const iconMarkup = icon && (
     <span className={styles.IconWrapper}>
       <Icon source={icon} />
diff --git a/src/components/ActionMenu/components/MenuAction/index.ts b/src/components/ActionMenu/components/MenuAction/index.ts
index d255ea4d504..e59101fa10c 100644
--- a/src/components/ActionMenu/components/MenuAction/index.ts
+++ b/src/components/ActionMenu/components/MenuAction/index.ts
@@ -1 +1 @@
-export {default, Props} from './MenuAction';
+export {MenuAction, MenuActionProps} from './MenuAction';
diff --git a/src/components/ActionMenu/components/MenuAction/tests/MenuAction.test.tsx b/src/components/ActionMenu/components/MenuAction/tests/MenuAction.test.tsx
index cf942d524e1..65970c0a75b 100644
--- a/src/components/ActionMenu/components/MenuAction/tests/MenuAction.test.tsx
+++ b/src/components/ActionMenu/components/MenuAction/tests/MenuAction.test.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 import {CaretDownMinor, SaveMinor} from '@shopify/polaris-icons';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 
-import Icon from '../../../../Icon';
-import UnstyledLink from '../../../../UnstyledLink';
+import {Icon} from '../../../../Icon';
+import {UnstyledLink} from '../../../../UnstyledLink';
 
-import MenuAction, {Props} from '../MenuAction';
+import {MenuAction} from '../MenuAction';
 
 describe('<MenuAction />', () => {
-  const mockProps: Props = {
+  const mockProps = {
     content: 'content',
   };
 
diff --git a/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx b/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx
index b38b500c5c9..363b0835602 100644
--- a/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx
+++ b/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 
 import {MenuGroupDescriptor} from '../../../../types';
 
-import ActionList from '../../../ActionList';
-import Popover from '../../../Popover';
-import MenuAction from '../MenuAction';
+import {ActionList} from '../../../ActionList';
+import {Popover} from '../../../Popover';
+import {MenuAction} from '../MenuAction';
 
 import styles from './MenuGroup.scss';
 
-export interface Props extends MenuGroupDescriptor {
+export interface MenuGroupProps extends MenuGroupDescriptor {
   /** Visually hidden menu description for screen readers */
   accessibilityLabel?: string;
   /** Whether or not the menu is open */
@@ -19,7 +19,7 @@ export interface Props extends MenuGroupDescriptor {
   onClose(title: string): void;
 }
 
-export default class MenuGroup extends React.Component<Props, never> {
+export class MenuGroup extends React.Component<MenuGroupProps, never> {
   render() {
     const {
       accessibilityLabel,
diff --git a/src/components/ActionMenu/components/MenuGroup/index.ts b/src/components/ActionMenu/components/MenuGroup/index.ts
index dfa7f490c2d..abe8f075c8d 100644
--- a/src/components/ActionMenu/components/MenuGroup/index.ts
+++ b/src/components/ActionMenu/components/MenuGroup/index.ts
@@ -1 +1 @@
-export {default, Props} from './MenuGroup';
+export {MenuGroup, MenuGroupProps} from './MenuGroup';
diff --git a/src/components/ActionMenu/components/MenuGroup/tests/MenuGroup.test.tsx b/src/components/ActionMenu/components/MenuGroup/tests/MenuGroup.test.tsx
index 297f3cb5790..5d19d261471 100644
--- a/src/components/ActionMenu/components/MenuGroup/tests/MenuGroup.test.tsx
+++ b/src/components/ActionMenu/components/MenuGroup/tests/MenuGroup.test.tsx
@@ -4,11 +4,11 @@ import {SaveMinor} from '@shopify/polaris-icons';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 
 import {Popover, ActionList} from 'components';
-import MenuAction from '../../MenuAction';
-import MenuGroup, {Props} from '../MenuGroup';
+import {MenuAction} from '../../MenuAction';
+import {MenuGroup} from '../MenuGroup';
 
 describe('<MenuGroup />', () => {
-  const mockProps: Props = {
+  const mockProps = {
     title: 'title',
     actions: [],
     active: undefined,
@@ -80,7 +80,7 @@ describe('<MenuGroup />', () => {
     });
 
     it('passes `actions` into the <ActionList />', () => {
-      const mockActions: Props['actions'] = [
+      const mockActions = [
         {content: 'mock content 1'},
         {content: 'mock content 2'},
       ];
diff --git a/src/components/ActionMenu/components/RollupActions/RollupActions.tsx b/src/components/ActionMenu/components/RollupActions/RollupActions.tsx
index d7332ecadfa..b56b8d2b2b4 100644
--- a/src/components/ActionMenu/components/RollupActions/RollupActions.tsx
+++ b/src/components/ActionMenu/components/RollupActions/RollupActions.tsx
@@ -7,20 +7,20 @@ import {
   withAppProvider,
   WithAppProviderProps,
 } from '../../../../utilities/with-app-provider';
-import ActionList from '../../../ActionList';
-import Button from '../../../Button';
-import Popover from '../../../Popover';
+import {ActionList} from '../../../ActionList';
+import {Button} from '../../../Button';
+import {Popover} from '../../../Popover';
 
 import styles from './RollupActions.scss';
 
-export interface Props {
+export interface RollupActionsProps {
   /** Collection of actions for the list */
   items?: ActionListItemDescriptor[];
   /** Collection of sectioned action items */
   sections?: ActionListSection[];
 }
 
-type ComposedProps = Props & WithAppProviderProps;
+type ComposedProps = RollupActionsProps & WithAppProviderProps;
 
 interface State {
   rollupOpen: boolean;
@@ -77,4 +77,6 @@ class RollupActions extends React.PureComponent<ComposedProps, State> {
   };
 }
 
-export default withAppProvider<Props>()(RollupActions);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<RollupActionsProps>()(RollupActions);
diff --git a/src/components/ActionMenu/components/RollupActions/index.ts b/src/components/ActionMenu/components/RollupActions/index.ts
index bb26a51e6f8..6d5beb40ea1 100644
--- a/src/components/ActionMenu/components/RollupActions/index.ts
+++ b/src/components/ActionMenu/components/RollupActions/index.ts
@@ -1 +1,3 @@
-export {default, Props} from './RollupActions';
+import RollupActions, {RollupActionsProps} from './RollupActions';
+
+export {RollupActions, RollupActionsProps};
diff --git a/src/components/ActionMenu/components/RollupActions/tests/RollupActions.test.tsx b/src/components/ActionMenu/components/RollupActions/tests/RollupActions.test.tsx
index 68b58bc1858..39ce26f6912 100644
--- a/src/components/ActionMenu/components/RollupActions/tests/RollupActions.test.tsx
+++ b/src/components/ActionMenu/components/RollupActions/tests/RollupActions.test.tsx
@@ -11,12 +11,12 @@ import {
   Section as ActionListSection,
 } from '../../../../ActionList/components';
 
-import RollupActions, {Props} from '../RollupActions';
+import RollupActions, {RollupActionsProps} from '../RollupActions';
 
-type Wrapper = ReactWrapper<Props, any>;
+type Wrapper = ReactWrapper<RollupActionsProps, any>;
 
 describe('<RollupActions />', () => {
-  const mockProps: Props = {
+  const mockProps = {
     items: undefined,
     sections: undefined,
   };
@@ -28,7 +28,7 @@ describe('<RollupActions />', () => {
   });
 
   describe('items', () => {
-    const mockItems: Props['items'] = [
+    const mockItems = [
       {
         content: 'mock content 1',
         url: 'https://www.google.com',
@@ -68,7 +68,7 @@ describe('<RollupActions />', () => {
   });
 
   describe('sections', () => {
-    const mockSections: Props['sections'] = [
+    const mockSections = [
       {
         title: 'mock title 1',
         items: [
diff --git a/src/components/ActionMenu/components/index.ts b/src/components/ActionMenu/components/index.ts
index f0d58cecee7..f55c125f03d 100644
--- a/src/components/ActionMenu/components/index.ts
+++ b/src/components/ActionMenu/components/index.ts
@@ -1,8 +1,5 @@
-export {default as MenuAction, Props as MenuActionProps} from './MenuAction';
+export {MenuAction, MenuActionProps} from './MenuAction';
 
-export {default as MenuGroup, Props as MenuGroupProps} from './MenuGroup';
+export {MenuGroup, MenuGroupProps} from './MenuGroup';
 
-export {
-  default as RollupActions,
-  Props as RollupActionsProps,
-} from './RollupActions';
+export {RollupActions, RollupActionsProps} from './RollupActions';
diff --git a/src/components/ActionMenu/index.ts b/src/components/ActionMenu/index.ts
index 8219331ee2b..127524de4c7 100644
--- a/src/components/ActionMenu/index.ts
+++ b/src/components/ActionMenu/index.ts
@@ -1 +1 @@
-export {default, Props, hasGroupsWithActions} from './ActionMenu';
+export {ActionMenu, ActionMenuProps, hasGroupsWithActions} from './ActionMenu';
diff --git a/src/components/ActionMenu/tests/ActionMenu.test.tsx b/src/components/ActionMenu/tests/ActionMenu.test.tsx
index bfc513b8d95..5f76d4e3321 100644
--- a/src/components/ActionMenu/tests/ActionMenu.test.tsx
+++ b/src/components/ActionMenu/tests/ActionMenu.test.tsx
@@ -3,10 +3,14 @@ import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 
 import {MenuGroupDescriptor, ActionListItemDescriptor} from '../../../types';
 import {MenuAction, MenuGroup, RollupActions} from '../components';
-import ActionMenu, {Props, convertGroupToSection} from '../ActionMenu';
+import {
+  ActionMenu,
+  ActionMenuProps,
+  convertGroupToSection,
+} from '../ActionMenu';
 
 describe('<ActionMenu />', () => {
-  const mockProps: Props = {
+  const mockProps: ActionMenuProps = {
     actions: undefined,
     groups: undefined,
     rollup: undefined,
@@ -18,7 +22,7 @@ describe('<ActionMenu />', () => {
   });
 
   describe('actions', () => {
-    const mockActions: Props['actions'] = [
+    const mockActions: ActionMenuProps['actions'] = [
       {content: 'mock content 1'},
       {content: 'mock content 2'},
     ];
@@ -43,11 +47,11 @@ describe('<ActionMenu />', () => {
   });
 
   describe('groups', () => {
-    const mockActions: Props['actions'] = [
+    const mockActions: ActionMenuProps['actions'] = [
       {content: 'mock content 1'},
       {content: 'mock content 2'},
     ];
-    const mockGroups: Props['groups'] = [
+    const mockGroups: ActionMenuProps['groups'] = [
       {
         title: 'First group',
         actions: [...mockActions],
@@ -81,7 +85,7 @@ describe('<ActionMenu />', () => {
   });
 
   describe('<MenuAction />', () => {
-    const mockActions: Props['actions'] = [
+    const mockActions: ActionMenuProps['actions'] = [
       {content: 'mock content 1'},
       {content: 'mock content 2'},
     ];
@@ -109,7 +113,7 @@ describe('<ActionMenu />', () => {
     });
 
     it('does not render when there are `groups` with no `actions`', () => {
-      const mockGroupsWithoutActions: Props['groups'] = [
+      const mockGroupsWithoutActions: ActionMenuProps['groups'] = [
         {
           title: 'First group',
           actions: [],
diff --git a/src/components/AppProvider/AppProvider.tsx b/src/components/AppProvider/AppProvider.tsx
index c4292baa094..f8d3f963f0a 100644
--- a/src/components/AppProvider/AppProvider.tsx
+++ b/src/components/AppProvider/AppProvider.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Theme} from '../../utilities/theme';
-import ThemeProvider from '../ThemeProvider';
+import {ThemeProvider} from '../ThemeProvider';
 import {I18n, I18nContext, TranslationDictionary} from '../../utilities/i18n';
 import {
   ScrollLockManager,
@@ -23,7 +23,7 @@ interface State {
   link: LinkLikeComponent | undefined;
 }
 
-export interface Props extends AppBridgeOptions {
+export interface AppProviderProps extends AppBridgeOptions {
   /** A locale object or array of locale objects that overrides default translations */
   i18n: TranslationDictionary | TranslationDictionary[];
   /** A custom component to use for all links used by Polaris components */
@@ -32,11 +32,11 @@ export interface Props extends AppBridgeOptions {
   theme?: Theme;
 }
 
-export default class AppProvider extends React.Component<Props, State> {
+export class AppProvider extends React.Component<AppProviderProps, State> {
   private stickyManager: StickyManager;
   private scrollLockManager: ScrollLockManager;
 
-  constructor(props: Props) {
+  constructor(props: AppProviderProps) {
     super(props);
     this.stickyManager = new StickyManager();
     this.scrollLockManager = new ScrollLockManager();
@@ -62,7 +62,7 @@ export default class AppProvider extends React.Component<Props, State> {
     apiKey: prevApiKey,
     shopOrigin: prevShopOrigin,
     forceRedirect: prevForceRedirect,
-  }: Props) {
+  }: AppProviderProps) {
     const {i18n, linkComponent, apiKey, shopOrigin, forceRedirect} = this.props;
 
     if (
diff --git a/src/components/AppProvider/index.ts b/src/components/AppProvider/index.ts
index 752fd25aa39..020b20af464 100644
--- a/src/components/AppProvider/index.ts
+++ b/src/components/AppProvider/index.ts
@@ -1 +1 @@
-export {default, Props} from './AppProvider';
+export {AppProvider, AppProviderProps} from './AppProvider';
diff --git a/src/components/AppProvider/tests/AppProvider.test.tsx b/src/components/AppProvider/tests/AppProvider.test.tsx
index 4ef1fffc714..028947f96c6 100644
--- a/src/components/AppProvider/tests/AppProvider.test.tsx
+++ b/src/components/AppProvider/tests/AppProvider.test.tsx
@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {LinkContext} from '../../../utilities/link';
-import AppProvider from '../AppProvider';
+import {AppProvider} from '../AppProvider';
 
 describe('<AppProvider />', () => {
   it('updates context when props change', () => {
diff --git a/src/components/Autocomplete/Autocomplete.tsx b/src/components/Autocomplete/Autocomplete.tsx
index 10a2916e1e3..fc2e1ad4c0c 100644
--- a/src/components/Autocomplete/Autocomplete.tsx
+++ b/src/components/Autocomplete/Autocomplete.tsx
@@ -7,12 +7,12 @@ import {
 } from '../../utilities/with-app-provider';
 import {PreferredPosition} from '../PositionedOverlay';
 import {OptionDescriptor} from '../OptionList';
-import Spinner from '../Spinner';
+import {Spinner} from '../Spinner';
 
 import {TextField, ComboBox} from './components';
 import styles from './Autocomplete.scss';
 
-export interface Props {
+export interface AutocompleteProps {
   /** A unique identifier for the Autocomplete */
   id?: string;
   /** Collection of options to be listed */
@@ -41,7 +41,7 @@ export interface Props {
   onLoadMoreResults?(): void;
 }
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = AutocompleteProps & WithAppProviderProps;
 
 class Autocomplete extends React.PureComponent<CombinedProps, never> {
   static TextField = TextField;
@@ -99,4 +99,6 @@ class Autocomplete extends React.PureComponent<CombinedProps, never> {
   }
 }
 
-export default withAppProvider<Props>()(Autocomplete);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<AutocompleteProps>()(Autocomplete);
diff --git a/src/components/Autocomplete/components/ComboBox/ComboBox.tsx b/src/components/Autocomplete/components/ComboBox/ComboBox.tsx
index f24d3107864..97d652b4491 100644
--- a/src/components/Autocomplete/components/ComboBox/ComboBox.tsx
+++ b/src/components/Autocomplete/components/ComboBox/ComboBox.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
-import OptionList, {OptionDescriptor} from '../../../OptionList';
-import ActionList from '../../../ActionList';
-import Popover from '../../../Popover';
+import {OptionList, OptionDescriptor} from '../../../OptionList';
+import {ActionList} from '../../../ActionList';
+import {Popover} from '../../../Popover';
 import {PreferredPosition} from '../../../PositionedOverlay';
 import {ActionListItemDescriptor, Key} from '../../../../types';
-import KeypressListener from '../../../KeypressListener';
-import EventListener from '../../../EventListener';
+import {KeypressListener} from '../../../KeypressListener';
+import {EventListener} from '../../../EventListener';
 import {ComboBoxContext} from './context';
 
 import styles from './ComboBox.scss';
@@ -23,7 +23,7 @@ interface State {
   popoverWasActive: boolean;
 }
 
-export interface Props {
+export interface ComboBoxProps {
   /** A unique identifier for the ComboBox */
   id?: string;
   /** Collection of options to be listed */
@@ -54,14 +54,14 @@ export interface Props {
   onEndReached?(): void;
 }
 
-export default class ComboBox extends React.PureComponent<Props, State> {
+export class ComboBox extends React.PureComponent<ComboBoxProps, State> {
   static getDerivedStateFromProps(
     {
       options: nextOptions,
       selected: nextSelected,
       actionsBefore: nextActionsBefore,
       actionsAfter: nextActionsAfter,
-    }: Props,
+    }: ComboBoxProps,
     {navigableOptions, selectedOptions, comboBoxId}: State,
   ) {
     const optionsChanged =
@@ -129,7 +129,7 @@ export default class ComboBox extends React.PureComponent<Props, State> {
     });
   }
 
-  componentDidUpdate(_: Props, prevState: State) {
+  componentDidUpdate(_: ComboBoxProps, prevState: State) {
     const {contentBefore, contentAfter, emptyState} = this.props;
     const {navigableOptions, popoverWasActive} = this.state;
 
diff --git a/src/components/Autocomplete/components/ComboBox/index.ts b/src/components/Autocomplete/components/ComboBox/index.ts
index 0374b3c123b..94540f37e9e 100644
--- a/src/components/Autocomplete/components/ComboBox/index.ts
+++ b/src/components/Autocomplete/components/ComboBox/index.ts
@@ -1,4 +1 @@
-import ComboBox from './ComboBox';
-
-export {Props} from './ComboBox';
-export default ComboBox;
+export {ComboBox} from './ComboBox';
diff --git a/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx b/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx
index 0a5786ebca4..de438d0da73 100644
--- a/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx
+++ b/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import {shallow} from 'enzyme';
 import {OptionList, ActionList, Popover} from 'components';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
-import TextField from '../../TextField';
+import {TextField} from '../../TextField';
 import {Key} from '../../../../../types';
-import ComboBox from '..';
+import {ComboBox} from '..';
 
 describe('<ComboBox/>', () => {
   const options = [
diff --git a/src/components/Autocomplete/components/TextField/TextField.tsx b/src/components/Autocomplete/components/TextField/TextField.tsx
index 9a5dfa87538..42cefe79299 100644
--- a/src/components/Autocomplete/components/TextField/TextField.tsx
+++ b/src/components/Autocomplete/components/TextField/TextField.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 
 // eslint-disable-next-line shopify/strict-component-boundaries
 import {ComboBoxContext} from '../ComboBox/context';
-import BaseTextField, {Props as TextFieldProps} from '../../../TextField';
+import {TextField as BaseTextField, TextFieldProps} from '../../../TextField';
 
-export default function TextField(props: TextFieldProps) {
+export function TextField(props: TextFieldProps) {
   return (
     <ComboBoxContext.Consumer>
       {({selectedOptionId, comboBoxId}) => (
diff --git a/src/components/Autocomplete/components/TextField/index.ts b/src/components/Autocomplete/components/TextField/index.ts
index 7e9c49aabd9..35e9e6ed312 100644
--- a/src/components/Autocomplete/components/TextField/index.ts
+++ b/src/components/Autocomplete/components/TextField/index.ts
@@ -1,3 +1 @@
-import TextField from './TextField';
-
-export default TextField;
+export {TextField} from './TextField';
diff --git a/src/components/Autocomplete/components/index.ts b/src/components/Autocomplete/components/index.ts
index bf0aef4ab91..8a65d0fe030 100644
--- a/src/components/Autocomplete/components/index.ts
+++ b/src/components/Autocomplete/components/index.ts
@@ -1,3 +1,3 @@
-export {default as ComboBox} from './ComboBox';
+export {ComboBox} from './ComboBox';
 
-export {default as TextField} from './TextField';
+export {TextField} from './TextField';
diff --git a/src/components/Autocomplete/index.ts b/src/components/Autocomplete/index.ts
index b882e257dbf..2b5820e2f8e 100644
--- a/src/components/Autocomplete/index.ts
+++ b/src/components/Autocomplete/index.ts
@@ -1,4 +1,3 @@
-import Autocomplete from './Autocomplete';
+import Autocomplete, {AutocompleteProps} from './Autocomplete';
 
-export {Props} from './Autocomplete';
-export default Autocomplete;
+export {Autocomplete, AutocompleteProps};
diff --git a/src/components/Autocomplete/tests/Autocomplete.test.tsx b/src/components/Autocomplete/tests/Autocomplete.test.tsx
index 650ff4f16f7..3d9a618b4e4 100644
--- a/src/components/Autocomplete/tests/Autocomplete.test.tsx
+++ b/src/components/Autocomplete/tests/Autocomplete.test.tsx
@@ -3,7 +3,7 @@ import {CirclePlusMinor} from '@shopify/polaris-icons';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 import {Spinner} from 'components';
 import {Key} from '../../../types';
-import Autocomplete from '..';
+import {Autocomplete} from '..';
 import {ComboBox} from '../components';
 
 describe('<Autocomplete/>', () => {
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index fb9269ef8a5..d7c4102bc7b 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -6,7 +6,7 @@ import {
   withAppProvider,
   WithAppProviderProps,
 } from '../../utilities/with-app-provider';
-import Image from '../Image';
+import {Image} from '../Image';
 
 import styles from './Avatar.scss';
 import * as avatars from './images';
@@ -20,7 +20,7 @@ const AVATAR_IMAGES = Object.keys(avatars).map(
   (key: keyof typeof avatars) => avatars[key],
 );
 
-export interface Props {
+export interface AvatarProps {
   /**
    * Size of avatar
    * @default 'medium'
@@ -44,10 +44,10 @@ interface State {
   prevSource?: string;
 }
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = AvatarProps & WithAppProviderProps;
 
 class Avatar extends React.PureComponent<CombinedProps, State> {
-  static getDerivedStateFromProps(props: Props, state: State) {
+  static getDerivedStateFromProps(props: AvatarProps, state: State) {
     if (props.source !== state.prevSource) {
       return {
         prevSource: props.source,
@@ -173,4 +173,6 @@ function customerPlaceholder(name?: string) {
     : AVATAR_IMAGES[0];
 }
 
-export default withAppProvider<Props>()(Avatar);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<AvatarProps>()(Avatar);
diff --git a/src/components/Avatar/images/index.ts b/src/components/Avatar/images/index.ts
index 1ab161e2bfb..c3188e8be61 100644
--- a/src/components/Avatar/images/index.ts
+++ b/src/components/Avatar/images/index.ts
@@ -1,9 +1,17 @@
 export {default as avatarOne} from './avatar-1.svg';
+
 export {default as avatarTwo} from './avatar-2.svg';
+
 export {default as avatarThree} from './avatar-3.svg';
+
 export {default as avatarFour} from './avatar-4.svg';
+
 export {default as avatarFive} from './avatar-5.svg';
+
 export {default as avatarSix} from './avatar-6.svg';
+
 export {default as avatarSeven} from './avatar-7.svg';
+
 export {default as avatarEight} from './avatar-8.svg';
+
 export {default as avatarNine} from './avatar-9.svg';
diff --git a/src/components/Avatar/index.ts b/src/components/Avatar/index.ts
index 84691244f0d..07d30c58cdf 100644
--- a/src/components/Avatar/index.ts
+++ b/src/components/Avatar/index.ts
@@ -1,4 +1,3 @@
-import Avatar from './Avatar';
+import Avatar, {AvatarProps} from './Avatar';
 
-export {Props} from './Avatar';
-export default Avatar;
+export {Avatar, AvatarProps};
diff --git a/src/components/Backdrop/Backdrop.tsx b/src/components/Backdrop/Backdrop.tsx
index b86ba81c074..d5ce7d9ab56 100644
--- a/src/components/Backdrop/Backdrop.tsx
+++ b/src/components/Backdrop/Backdrop.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
 
 import {classNames} from '../../utilities/css';
-import ScrollLock from '../ScrollLock';
+import {ScrollLock} from '../ScrollLock';
 import styles from './Backdrop.scss';
 
-export interface Props {
+export interface BackdropProps {
   belowNavigation?: boolean;
   transparent?: boolean;
   onClick?(): void;
   onTouchStart?(): void;
 }
 
-export default function Backdrop(props: Props) {
+export function Backdrop(props: BackdropProps) {
   const {onClick, onTouchStart, belowNavigation, transparent} = props;
 
   const className = classNames(
diff --git a/src/components/Backdrop/index.ts b/src/components/Backdrop/index.ts
index 0a1ad6c806c..4161d9da33f 100644
--- a/src/components/Backdrop/index.ts
+++ b/src/components/Backdrop/index.ts
@@ -1,5 +1 @@
-import Backdrop from './Backdrop';
-
-export {Props as BackdropProps} from './Backdrop';
-
-export default Backdrop;
+export {Backdrop, BackdropProps} from './Backdrop';
diff --git a/src/components/Backdrop/tests/Backdrop.test.tsx b/src/components/Backdrop/tests/Backdrop.test.tsx
index 50e07309a5f..77feb776206 100644
--- a/src/components/Backdrop/tests/Backdrop.test.tsx
+++ b/src/components/Backdrop/tests/Backdrop.test.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import {mountWithAppProvider, findByTestID} from 'test-utilities/legacy';
-import BackDrop from '..';
+import {Backdrop} from '..';
 
-describe('<BackDrop />', () => {
+describe('<Backdrop />', () => {
   describe('onDismiss()', () => {
     it('is called when the backdrop is clicked', () => {
       const spy = jest.fn();
-      const backdrop = mountWithAppProvider(<BackDrop onClick={spy} />);
+      const backdrop = mountWithAppProvider(<Backdrop onClick={spy} />);
       findByTestID(backdrop, 'Backdrop').simulate('click');
       expect(spy).toHaveBeenCalled();
     });
@@ -15,7 +15,7 @@ describe('<BackDrop />', () => {
   describe('onTouchStart()', () => {
     it('is called when the backdrop is touched', () => {
       const spy = jest.fn();
-      const backdrop = mountWithAppProvider(<BackDrop onTouchStart={spy} />);
+      const backdrop = mountWithAppProvider(<Backdrop onTouchStart={spy} />);
       findByTestID(backdrop, 'Backdrop').simulate('touchStart');
       expect(spy).toHaveBeenCalled();
     });
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index e8c6497b0ce..116ac7dd8d2 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import {classNames, variationName} from '../../utilities/css';
 import {useI18n} from '../../utilities/i18n';
-import VisuallyHidden from '../VisuallyHidden';
+import {VisuallyHidden} from '../VisuallyHidden';
 import styles from './Badge.scss';
 
 export type Status = 'success' | 'info' | 'attention' | 'warning' | 'new';
 export type Progress = 'incomplete' | 'partiallyComplete' | 'complete';
 export type Size = 'small' | 'medium';
 
-export interface Props {
+export interface BadgeProps {
   /** The content to display inside the badge. */
   children?: string;
   /** Set the color of the badge for the given status. */
@@ -38,12 +38,12 @@ export const STATUS_LABELS: {[key in Status]: Status} = {
 
 const DEFAULT_SIZE = 'medium';
 
-export default function Badge({
+export function Badge({
   children,
   status,
   progress,
   size = DEFAULT_SIZE,
-}: Props) {
+}: BadgeProps) {
   const intl = useI18n();
 
   const className = classNames(
diff --git a/src/components/Badge/index.ts b/src/components/Badge/index.ts
index 5927026d97b..3ab47e3b088 100644
--- a/src/components/Badge/index.ts
+++ b/src/components/Badge/index.ts
@@ -1,4 +1,8 @@
-import Badge from './Badge';
-
-export {Progress, Props, Status, PROGRESS_LABELS, STATUS_LABELS} from './Badge';
-export default Badge;
+export {
+  Badge,
+  Progress,
+  BadgeProps,
+  Status,
+  PROGRESS_LABELS,
+  STATUS_LABELS,
+} from './Badge';
diff --git a/src/components/Badge/tests/Badge.test.tsx b/src/components/Badge/tests/Badge.test.tsx
index 486245e195d..c38b334b511 100644
--- a/src/components/Badge/tests/Badge.test.tsx
+++ b/src/components/Badge/tests/Badge.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {VisuallyHidden} from 'components';
-import Badge, {Status, Progress, PROGRESS_LABELS, STATUS_LABELS} from '..';
+import {Badge, Status, Progress, PROGRESS_LABELS, STATUS_LABELS} from '..';
 
 describe('<Badge />', () => {
   it('renders its children', () => {
diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx
index 221830160b4..9d5eee169cd 100644
--- a/src/components/Banner/Banner.tsx
+++ b/src/components/Banner/Banner.tsx
@@ -16,25 +16,25 @@ import {
   LoadableAction,
   IconProps,
 } from '../../types';
-import Button, {buttonFrom} from '../Button';
-import Heading from '../Heading';
-import ButtonGroup from '../ButtonGroup';
-import UnstyledLink from '../UnstyledLink';
-import Icon from '../Icon';
+import {Button, buttonFrom} from '../Button';
+import {Heading} from '../Heading';
+import {ButtonGroup} from '../ButtonGroup';
+import {UnstyledLink} from '../UnstyledLink';
+import {Icon} from '../Icon';
 
 import {WithinContentContext} from '../../utilities/within-content-context';
 
 import styles from './Banner.scss';
 
-export type Status = 'success' | 'info' | 'warning' | 'critical';
+export type BannerStatus = 'success' | 'info' | 'warning' | 'critical';
 
-export interface Props {
+export interface BannerProps {
   /** Title content for the banner. */
   title?: string;
   /** Icon to display in the banner. Use only major, duotone icons */
   icon?: IconProps['source'];
   /** Sets the status of the banner. */
-  status?: Status;
+  status?: BannerStatus;
   /** The child elements to render in the banner. */
   children?: React.ReactNode;
   /** Action for banner */
@@ -47,7 +47,7 @@ export interface Props {
   stopAnnouncements?: boolean;
 }
 
-export default class Banner extends React.PureComponent<Props, never> {
+export class Banner extends React.PureComponent<BannerProps, never> {
   private wrapper = React.createRef<HTMLDivElement>();
 
   public focus() {
diff --git a/src/components/Banner/index.ts b/src/components/Banner/index.ts
index e25dd863ec0..f5404b5b4d7 100644
--- a/src/components/Banner/index.ts
+++ b/src/components/Banner/index.ts
@@ -1,4 +1 @@
-import Banner from './Banner';
-
-export {Props, Status} from './Banner';
-export default Banner;
+export {Banner, BannerProps, BannerStatus} from './Banner';
diff --git a/src/components/Banner/tests/Banner.test.tsx b/src/components/Banner/tests/Banner.test.tsx
index cc1593382d3..2e2f66f99bd 100644
--- a/src/components/Banner/tests/Banner.test.tsx
+++ b/src/components/Banner/tests/Banner.test.tsx
@@ -11,7 +11,7 @@ import {ReactWrapper} from 'enzyme';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {BannerContext} from 'utilities/banner-context';
 import {Button, Icon, UnstyledLink, Heading} from 'components';
-import Banner from '..';
+import {Banner} from '..';
 import {WithinContentContext} from '../../../utilities/within-content-context';
 
 describe('<Banner />', () => {
diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
index 1aea69047e0..f00fde49dec 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,19 +1,19 @@
 import React from 'react';
 import {ChevronLeftMinor} from '@shopify/polaris-icons';
 
-import Icon from '../Icon';
-import UnstyledLink from '../UnstyledLink';
+import {Icon} from '../Icon';
+import {UnstyledLink} from '../UnstyledLink';
 import {CallbackAction, LinkAction} from '../../types';
 import {handleMouseUpByBlurring} from '../../utilities/focus';
 
 import styles from './Breadcrumbs.scss';
 
-export interface Props {
+export interface BreadcrumbsProps {
   /** Collection of breadcrumbs */
   breadcrumbs: Array<CallbackAction | LinkAction>;
 }
 
-export default class Breadcrumbs extends React.PureComponent<Props, never> {
+export class Breadcrumbs extends React.PureComponent<BreadcrumbsProps, never> {
   render() {
     const {breadcrumbs} = this.props;
     const breadcrumb = breadcrumbs[breadcrumbs.length - 1];
diff --git a/src/components/Breadcrumbs/index.ts b/src/components/Breadcrumbs/index.ts
index bc34b58ef38..7a663c9d3d9 100644
--- a/src/components/Breadcrumbs/index.ts
+++ b/src/components/Breadcrumbs/index.ts
@@ -1,4 +1 @@
-import Breadcrumbs from './Breadcrumbs';
-
-export {Props} from './Breadcrumbs';
-export default Breadcrumbs;
+export {Breadcrumbs, BreadcrumbsProps} from './Breadcrumbs';
diff --git a/src/components/Breadcrumbs/tests/Breadcrumbs.test.tsx b/src/components/Breadcrumbs/tests/Breadcrumbs.test.tsx
index f50a5242404..4fee074cdf6 100644
--- a/src/components/Breadcrumbs/tests/Breadcrumbs.test.tsx
+++ b/src/components/Breadcrumbs/tests/Breadcrumbs.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {CallbackAction, LinkAction} from '../../../types';
-import Breadcrumbs from '../Breadcrumbs';
+import {Breadcrumbs} from '../Breadcrumbs';
 
 describe('<Breadcrumbs />', () => {
   describe('url', () => {
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index ff60cef2549..b6c4a8fae8f 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -3,10 +3,10 @@ import {CaretDownMinor} from '@shopify/polaris-icons';
 import {classNames, variationName} from '../../utilities/css';
 import {handleMouseUpByBlurring} from '../../utilities/focus';
 import {useI18n} from '../../utilities/i18n';
-import UnstyledLink from '../UnstyledLink';
-import Icon from '../Icon';
+import {UnstyledLink} from '../UnstyledLink';
+import {Icon} from '../Icon';
 import {IconProps} from '../../types';
-import Spinner from '../Spinner';
+import {Spinner} from '../Spinner';
 import styles from './Button.scss';
 
 export type Size = 'slim' | 'medium' | 'large';
@@ -15,7 +15,7 @@ export type TextAlign = 'left' | 'right' | 'center';
 
 export type IconSource = IconProps['source'];
 
-export interface Props {
+export interface ButtonProps {
   /** The content to display inside the button */
   children?: string | string[];
   /** A destination to link to, rendered in the href attribute of a link */
@@ -79,7 +79,7 @@ export interface Props {
 
 const DEFAULT_SIZE = 'medium';
 
-export default function Button({
+export function Button({
   id,
   url,
   disabled,
@@ -108,7 +108,7 @@ export default function Button({
   size = DEFAULT_SIZE,
   textAlign,
   fullWidth,
-}: Props) {
+}: ButtonProps) {
   const intl = useI18n();
 
   const isDisabled = disabled || loading;
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index e6a127b9fa9..c8cfe68b255 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1,5 +1,2 @@
-import Button from './Button';
-
 export * from './utils';
 export * from './Button';
-export default Button;
diff --git a/src/components/Button/tests/Button.test.tsx b/src/components/Button/tests/Button.test.tsx
index 6a584a97f22..aac21683bd1 100644
--- a/src/components/Button/tests/Button.test.tsx
+++ b/src/components/Button/tests/Button.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {PlusMinor} from '@shopify/polaris-icons';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 import {UnstyledLink, Icon, Spinner} from 'components';
-import Button, {IconWrapper} from '../Button';
+import {Button, IconWrapper} from '../Button';
 
 describe('<Button />', () => {
   describe('url', () => {
diff --git a/src/components/Button/utils.tsx b/src/components/Button/utils.tsx
index 64651906aff..c5909342b0a 100644
--- a/src/components/Button/utils.tsx
+++ b/src/components/Button/utils.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
 import {ComplexAction} from '../../types';
-import Button, {Props} from './Button';
+import {Button, ButtonProps} from './Button';
 
 export function buttonsFrom(
   action: ComplexAction,
-  overrides?: Partial<Props>,
-): React.ReactElement<Props>;
+  overrides?: Partial<ButtonProps>,
+): React.ReactElement<ButtonProps>;
 export function buttonsFrom(
   actions: ComplexAction[],
-  overrides?: Partial<Props>,
-): React.ReactElement<Props>[];
+  overrides?: Partial<ButtonProps>,
+): React.ReactElement<ButtonProps>[];
 export function buttonsFrom(
   actions: ComplexAction[] | ComplexAction,
-  overrides: Partial<Props> = {},
+  overrides: Partial<ButtonProps> = {},
 ) {
   if (Array.isArray(actions)) {
     return actions.map((action, index) => buttonFrom(action, overrides, index));
@@ -24,7 +24,7 @@ export function buttonsFrom(
 
 export function buttonFrom(
   {content, onAction, ...action}: ComplexAction,
-  overrides?: Partial<Props>,
+  overrides?: Partial<ButtonProps>,
   key?: any,
 ) {
   return (
diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx
index 714cf217ac5..ffdb5fc6798 100644
--- a/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.tsx
@@ -4,7 +4,7 @@ import {elementChildren} from '../../utilities/components';
 import {Item} from './components';
 import styles from './ButtonGroup.scss';
 
-export interface Props {
+export interface ButtonGroupProps {
   /** Join buttons as segmented group */
   segmented?: boolean;
   /** Buttons will stretch/shrink to occupy the full width */
@@ -15,12 +15,12 @@ export interface Props {
   children?: React.ReactNode;
 }
 
-export default function ButtonGroup({
+export function ButtonGroup({
   children,
   segmented,
   fullWidth,
   connectedTop,
-}: Props) {
+}: ButtonGroupProps) {
   const className = classNames(
     styles.ButtonGroup,
     segmented && styles.segmented,
diff --git a/src/components/ButtonGroup/components/Item/Item.tsx b/src/components/ButtonGroup/components/Item/Item.tsx
index 024d55579c2..4435ef09505 100644
--- a/src/components/ButtonGroup/components/Item/Item.tsx
+++ b/src/components/ButtonGroup/components/Item/Item.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
 import {classNames} from '../../../../utilities/css';
-import {Props as ButtonProps} from '../../../Button';
+import {ButtonProps} from '../../../Button';
 
 import styles from '../../ButtonGroup.scss';
 
-export interface Props {
+export interface ItemProps {
   button: React.ReactElement<ButtonProps>;
 }
 
@@ -13,7 +13,7 @@ interface State {
   focused: boolean;
 }
 
-export default class Item extends React.PureComponent<Props, State> {
+export class Item extends React.PureComponent<ItemProps, State> {
   state: State = {focused: false};
 
   render() {
diff --git a/src/components/ButtonGroup/components/Item/index.ts b/src/components/ButtonGroup/components/Item/index.ts
index 02c0b0e1951..e158f53cc0d 100644
--- a/src/components/ButtonGroup/components/Item/index.ts
+++ b/src/components/ButtonGroup/components/Item/index.ts
@@ -1,4 +1 @@
-import Item from './Item';
-
-export {Props} from './Item';
-export default Item;
+export {Item, ItemProps} from './Item';
diff --git a/src/components/ButtonGroup/components/Item/tests/Item.test.tsx b/src/components/ButtonGroup/components/Item/tests/Item.test.tsx
index 744b135d75e..7bc1e8c3c03 100644
--- a/src/components/ButtonGroup/components/Item/tests/Item.test.tsx
+++ b/src/components/ButtonGroup/components/Item/tests/Item.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Button} from 'components';
-import Item from '../Item';
+import {Item} from '../Item';
 
 describe('<Item />', () => {
   describe('button', () => {
diff --git a/src/components/ButtonGroup/components/index.ts b/src/components/ButtonGroup/components/index.ts
index 584c7f5e9a9..e158f53cc0d 100644
--- a/src/components/ButtonGroup/components/index.ts
+++ b/src/components/ButtonGroup/components/index.ts
@@ -1 +1 @@
-export {default as Item, Props as ItemProps} from './Item';
+export {Item, ItemProps} from './Item';
diff --git a/src/components/ButtonGroup/index.ts b/src/components/ButtonGroup/index.ts
index 364cc54337f..b4468f2197b 100644
--- a/src/components/ButtonGroup/index.ts
+++ b/src/components/ButtonGroup/index.ts
@@ -1,4 +1 @@
-import ButtonGroup from './ButtonGroup';
-
-export {Props} from './ButtonGroup';
-export default ButtonGroup;
+export {ButtonGroup, ButtonGroupProps} from './ButtonGroup';
diff --git a/src/components/ButtonGroup/tests/ButtonGroup.test.tsx b/src/components/ButtonGroup/tests/ButtonGroup.test.tsx
index 6d2034962e2..071f8a62fb6 100644
--- a/src/components/ButtonGroup/tests/ButtonGroup.test.tsx
+++ b/src/components/ButtonGroup/tests/ButtonGroup.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Button} from 'components';
 import {Item} from '../components';
-import ButtonGroup from '../ButtonGroup';
+import {ButtonGroup} from '../ButtonGroup';
 
 describe('<ButtonGroup />', () => {
   describe('children', () => {
diff --git a/src/components/CalloutCard/CalloutCard.tsx b/src/components/CalloutCard/CalloutCard.tsx
index 21b88a95ad3..e7d52bd176a 100644
--- a/src/components/CalloutCard/CalloutCard.tsx
+++ b/src/components/CalloutCard/CalloutCard.tsx
@@ -3,16 +3,16 @@ import {CancelSmallMinor} from '@shopify/polaris-icons';
 import {classNames} from '../../utilities/css';
 
 import {Action} from '../../types';
-import Card from '../Card';
-import TextContainer from '../TextContainer';
-import ButtonGroup from '../ButtonGroup';
-import Button, {buttonFrom} from '../Button';
-import Heading from '../Heading';
-import Image from '../Image';
+import {Card} from '../Card';
+import {TextContainer} from '../TextContainer';
+import {ButtonGroup} from '../ButtonGroup';
+import {Button, buttonFrom} from '../Button';
+import {Heading} from '../Heading';
+import {Image} from '../Image';
 
 import styles from './CalloutCard.scss';
 
-export interface Props {
+export interface CalloutCardProps {
   /** The content to display inside the callout card. */
   children?: React.ReactNode;
   /** The title of the card */
@@ -27,14 +27,14 @@ export interface Props {
   onDismiss?(): void;
 }
 
-export default function CalloutCard({
+export function CalloutCard({
   title,
   children,
   illustration,
   primaryAction,
   secondaryAction,
   onDismiss,
-}: Props) {
+}: CalloutCardProps) {
   const primaryActionMarkup = buttonFrom(primaryAction);
   const secondaryActionMarkup = secondaryAction
     ? buttonFrom(secondaryAction, {plain: true})
diff --git a/src/components/CalloutCard/index.ts b/src/components/CalloutCard/index.ts
index 521793ba47d..a7b7478bc7b 100644
--- a/src/components/CalloutCard/index.ts
+++ b/src/components/CalloutCard/index.ts
@@ -1,4 +1 @@
-import CalloutCard from './CalloutCard';
-
-export {Props} from './CalloutCard';
-export default CalloutCard;
+export {CalloutCard, CalloutCardProps} from './CalloutCard';
diff --git a/src/components/CalloutCard/tests/CalloutCard.test.tsx b/src/components/CalloutCard/tests/CalloutCard.test.tsx
index 4f92e0449a7..1028dd34d6c 100644
--- a/src/components/CalloutCard/tests/CalloutCard.test.tsx
+++ b/src/components/CalloutCard/tests/CalloutCard.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Button, ButtonGroup} from 'components';
-import CalloutCard from '../CalloutCard';
+import {CalloutCard} from '../CalloutCard';
 
 describe('<CalloutCard />', () => {
   const illustration =
diff --git a/src/components/Caption/Caption.tsx b/src/components/Caption/Caption.tsx
index 75af3ff6e2f..a264dc42745 100644
--- a/src/components/Caption/Caption.tsx
+++ b/src/components/Caption/Caption.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import styles from './Caption.scss';
 
-export interface Props {
+export interface CaptionProps {
   /** The content to use as a graph label or timestamp */
   children?: React.ReactNode;
 }
 
-export default function Caption({children}: Props) {
+export function Caption({children}: CaptionProps) {
   return <p className={styles.Caption}>{children}</p>;
 }
diff --git a/src/components/Caption/index.ts b/src/components/Caption/index.ts
index e0bcd66c0ed..267e08e75fd 100644
--- a/src/components/Caption/index.ts
+++ b/src/components/Caption/index.ts
@@ -1,4 +1 @@
-import Caption from './Caption';
-
-export {Props} from './Caption';
-export default Caption;
+export {Caption, CaptionProps} from './Caption';
diff --git a/src/components/Caption/tests/Caption.test.tsx b/src/components/Caption/tests/Caption.test.tsx
index 28c405b719d..12b4c1db14a 100644
--- a/src/components/Caption/tests/Caption.test.tsx
+++ b/src/components/Caption/tests/Caption.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Caption from '../Caption';
+import {Caption} from '../Caption';
 
 describe('<Caption />', () => {
   it('renders a p tag', () => {
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 5b3d572d8a4..8f32a72b971 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import {classNames} from '../../utilities/css';
 
-import ButtonGroup from '../ButtonGroup';
+import {ButtonGroup} from '../ButtonGroup';
 import {WithinContentContext} from '../../utilities/within-content-context';
 import {DisableableAction, ComplexAction} from '../../types';
-import ActionList from '../ActionList';
-import Button, {buttonFrom} from '../Button';
-import Popover from '../Popover';
+import {ActionList} from '../ActionList';
+import {Button, buttonFrom} from '../Button';
+import {Popover} from '../Popover';
 
 import {
   withAppProvider,
@@ -16,7 +16,7 @@ import {
 import {Header, Section, Subsection} from './components';
 import styles from './Card.scss';
 
-export interface Props {
+export interface CardProps {
   /** Title content for the card */
   title?: React.ReactNode;
   /** Inner content of the card */
@@ -35,7 +35,7 @@ export interface Props {
   secondaryFooterActionsDisclosureText?: string;
 }
 
-export type CombinedProps = Props & WithAppProviderProps;
+export type CombinedProps = CardProps & WithAppProviderProps;
 
 interface State {
   secondaryFooterActionsPopoverOpen: boolean;
@@ -128,4 +128,6 @@ class Card extends React.PureComponent<CombinedProps, State> {
   };
 }
 
-export default withAppProvider<Props>()(Card);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<CardProps>()(Card);
diff --git a/src/components/Card/components/Header/Header.tsx b/src/components/Card/components/Header/Header.tsx
index de908b6e7d0..0451550b2f7 100644
--- a/src/components/Card/components/Header/Header.tsx
+++ b/src/components/Card/components/Header/Header.tsx
@@ -2,19 +2,19 @@ import React from 'react';
 
 import {DisableableAction} from '../../../../types';
 import {buttonsFrom} from '../../../Button';
-import ButtonGroup from '../../../ButtonGroup';
-import Stack from '../../../Stack';
-import Heading from '../../../Heading';
+import {ButtonGroup} from '../../../ButtonGroup';
+import {Stack} from '../../../Stack';
+import {Heading} from '../../../Heading';
 
 import styles from '../../Card.scss';
 
-export interface Props {
+export interface HeaderProps {
   title?: React.ReactNode;
   actions?: DisableableAction[];
   children?: React.ReactNode;
 }
 
-export default function Header({children, title, actions}: Props) {
+export function Header({children, title, actions}: HeaderProps) {
   const actionMarkup = actions ? (
     <ButtonGroup>{buttonsFrom(actions, {plain: true})}</ButtonGroup>
   ) : null;
diff --git a/src/components/Card/components/Header/index.ts b/src/components/Card/components/Header/index.ts
index 0b0d49402de..c5990fc6821 100644
--- a/src/components/Card/components/Header/index.ts
+++ b/src/components/Card/components/Header/index.ts
@@ -1,4 +1 @@
-import Header from './Header';
-
-export {Props} from './Header';
-export default Header;
+export {Header, HeaderProps} from './Header';
diff --git a/src/components/Card/components/Header/tests/Header.test.tsx b/src/components/Card/components/Header/tests/Header.test.tsx
index 82eaa724661..26fe9125f9d 100644
--- a/src/components/Card/components/Header/tests/Header.test.tsx
+++ b/src/components/Card/components/Header/tests/Header.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {ButtonGroup, Heading, buttonsFrom} from 'components';
-import Header from '../Header';
+import {Header} from '../Header';
 
 jest.mock('../../../../Button', () => ({
   ...require.requireActual('../../../../Button'),
diff --git a/src/components/Card/components/Section/Section.tsx b/src/components/Card/components/Section/Section.tsx
index 1c4a48cdc97..87d194a947a 100644
--- a/src/components/Card/components/Section/Section.tsx
+++ b/src/components/Card/components/Section/Section.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 import {classNames} from '../../../../utilities/css';
 import {ComplexAction} from '../../../../types';
 import {buttonsFrom} from '../../../Button';
-import Stack from '../../../Stack';
-import ButtonGroup from '../../../ButtonGroup';
+import {Stack} from '../../../Stack';
+import {ButtonGroup} from '../../../ButtonGroup';
 
-import Subheading from '../../../Subheading';
+import {Subheading} from '../../../Subheading';
 
 import styles from '../../Card.scss';
 
-export interface Props {
+export interface SectionProps {
   title?: React.ReactNode;
   children?: React.ReactNode;
   subdued?: boolean;
@@ -17,13 +17,13 @@ export interface Props {
   actions?: ComplexAction[];
 }
 
-export default function Section({
+export function Section({
   children,
   title,
   subdued,
   fullWidth,
   actions,
-}: Props) {
+}: SectionProps) {
   const className = classNames(
     styles.Section,
     subdued && styles['Section-subdued'],
diff --git a/src/components/Card/components/Section/index.ts b/src/components/Card/components/Section/index.ts
index b147a6e4e4b..344c319971d 100644
--- a/src/components/Card/components/Section/index.ts
+++ b/src/components/Card/components/Section/index.ts
@@ -1,4 +1 @@
-import Section from './Section';
-
-export {Props} from './Section';
-export default Section;
+export {Section, SectionProps} from './Section';
diff --git a/src/components/Card/components/Section/tests/Section.test.tsx b/src/components/Card/components/Section/tests/Section.test.tsx
index 4f3cfb6fe5d..e84502f41df 100644
--- a/src/components/Card/components/Section/tests/Section.test.tsx
+++ b/src/components/Card/components/Section/tests/Section.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Badge, Subheading, ButtonGroup, Button} from 'components';
-import Section from '../Section';
+import {Section} from '../Section';
 
 describe('<Card.Section />', () => {
   it('can have any valid react element as the card section title', () => {
diff --git a/src/components/Card/components/Subsection/Subsection.tsx b/src/components/Card/components/Subsection/Subsection.tsx
index 284f92d8b35..80eb1ad9233 100644
--- a/src/components/Card/components/Subsection/Subsection.tsx
+++ b/src/components/Card/components/Subsection/Subsection.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 
 import styles from '../../Card.scss';
 
-export interface Props {
+export interface SubsectionProps {
   children?: React.ReactNode;
 }
 
-export default function Subsection({children}: Props) {
+export function Subsection({children}: SubsectionProps) {
   return <div className={styles.Subsection}>{children}</div>;
 }
diff --git a/src/components/Card/components/Subsection/index.ts b/src/components/Card/components/Subsection/index.ts
index 112fdc0b22a..ccc7a88753b 100644
--- a/src/components/Card/components/Subsection/index.ts
+++ b/src/components/Card/components/Subsection/index.ts
@@ -1,4 +1 @@
-import Subsection from './Subsection';
-
-export {Props} from './Subsection';
-export default Subsection;
+export {Subsection, SubsectionProps} from './Subsection';
diff --git a/src/components/Card/components/Subsection/tests/Subsection.test.tsx b/src/components/Card/components/Subsection/tests/Subsection.test.tsx
index 02c6e7ebcc4..ae5f5111c52 100644
--- a/src/components/Card/components/Subsection/tests/Subsection.test.tsx
+++ b/src/components/Card/components/Subsection/tests/Subsection.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Subsection from '../Subsection';
+import {Subsection} from '../Subsection';
 
 describe('<Card.Subsection />', () => {
   it('can have any valid react element for children', () => {
diff --git a/src/components/Card/components/index.ts b/src/components/Card/components/index.ts
index d9eb1e812e4..d9aefd51e39 100644
--- a/src/components/Card/components/index.ts
+++ b/src/components/Card/components/index.ts
@@ -1,5 +1,5 @@
-export {default as Header, Props as HeaderProps} from './Header';
+export {Header, HeaderProps} from './Header';
 
-export {default as Section, Props as SectionProps} from './Section';
+export {Section, SectionProps} from './Section';
 
-export {default as Subsection, Props as SubsectionProps} from './Subsection';
+export {Subsection, SubsectionProps} from './Subsection';
diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts
index 6e874b66a2b..ecb4afe192b 100644
--- a/src/components/Card/index.ts
+++ b/src/components/Card/index.ts
@@ -1,4 +1,3 @@
-import Card from './Card';
+import Card, {CardProps} from './Card';
 
-export {Props} from './Card';
-export default Card;
+export {Card, CardProps};
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index d1554b2009f..5ba204df09a 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -7,9 +7,9 @@ import {
   withAppProvider,
   WithAppProviderProps,
 } from '../../utilities/with-app-provider';
-import Choice, {helpTextID} from '../Choice';
+import {Choice, helpTextID} from '../Choice';
 import {errorTextID} from '../InlineError';
-import Icon from '../Icon';
+import {Icon} from '../Icon';
 import {Error, Key} from '../../types';
 
 import styles from './Checkbox.scss';
@@ -43,8 +43,8 @@ export interface BaseProps {
   onBlur?(): void;
 }
 
-export interface Props extends BaseProps {}
-type CombinedProps = Props & WithAppProviderProps;
+export interface CheckboxProps extends BaseProps {}
+type CombinedProps = CheckboxProps & WithAppProviderProps;
 
 const getUniqueID = createUniqueIDFactory('Checkbox');
 
@@ -162,4 +162,6 @@ function stopPropagation<E>(event: React.MouseEvent<E>) {
   event.stopPropagation();
 }
 
-export default withAppProvider<Props>()(Checkbox);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<CheckboxProps>()(Checkbox);
diff --git a/src/components/Checkbox/index.ts b/src/components/Checkbox/index.ts
index 6b3558cad00..768b6545936 100644
--- a/src/components/Checkbox/index.ts
+++ b/src/components/Checkbox/index.ts
@@ -1,4 +1,3 @@
-import Checkbox from './Checkbox';
+import Checkbox, {CheckboxProps} from './Checkbox';
 
-export {Props} from './Checkbox';
-export default Checkbox;
+export {Checkbox, CheckboxProps};
diff --git a/src/components/Choice/Choice.tsx b/src/components/Choice/Choice.tsx
index cc26e196595..61938cbfefc 100644
--- a/src/components/Choice/Choice.tsx
+++ b/src/components/Choice/Choice.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import {classNames} from '../../utilities/css';
 
 import {Error} from '../../types';
-import InlineError from '../InlineError';
+import {InlineError} from '../InlineError';
 
 import styles from './Choice.scss';
 
-export interface Props {
+export interface ChoiceProps {
   /** A unique identifier for the choice */
   id: string;
   /**	Label for the choice */
@@ -25,7 +25,7 @@ export interface Props {
   onClick?(): void;
 }
 
-export default function Choice({
+export function Choice({
   id,
   label,
   disabled,
@@ -34,7 +34,7 @@ export default function Choice({
   labelHidden,
   helpText,
   onClick,
-}: Props) {
+}: ChoiceProps) {
   const className = classNames(
     styles.Choice,
     labelHidden && styles.labelHidden,
diff --git a/src/components/Choice/index.ts b/src/components/Choice/index.ts
index 983d491295d..1f697a9d9dc 100644
--- a/src/components/Choice/index.ts
+++ b/src/components/Choice/index.ts
@@ -1,4 +1 @@
-import Choice from './Choice';
-
-export {Props, helpTextID} from './Choice';
-export default Choice;
+export {Choice, ChoiceProps, helpTextID} from './Choice';
diff --git a/src/components/Choice/tests/Choice.test.tsx b/src/components/Choice/tests/Choice.test.tsx
index a0eabe9cbc5..acc74861b9b 100644
--- a/src/components/Choice/tests/Choice.test.tsx
+++ b/src/components/Choice/tests/Choice.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {InlineError} from 'components';
-import Choice from '../Choice';
+import {Choice} from '../Choice';
 
 describe('<Choice />', () => {
   it('calls the provided onClick when clicked', () => {
diff --git a/src/components/ChoiceList/ChoiceList.tsx b/src/components/ChoiceList/ChoiceList.tsx
index 07ca407d4c7..1e02afce763 100644
--- a/src/components/ChoiceList/ChoiceList.tsx
+++ b/src/components/ChoiceList/ChoiceList.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 
 import {classNames} from '../../utilities/css';
-import Checkbox from '../Checkbox';
-import RadioButton from '../RadioButton';
-import InlineError, {errorTextID} from '../InlineError';
+import {Checkbox} from '../Checkbox';
+import {RadioButton} from '../RadioButton';
+import {InlineError, errorTextID} from '../InlineError';
 
 import {Error} from '../../types';
 
@@ -27,7 +27,7 @@ export interface ChoiceDescriptor {
 
 export type Choice = ChoiceDescriptor;
 
-export interface Props {
+export interface ChoiceListProps {
   /** Label for list of choices */
   title: string;
   /** Collection of choices */
@@ -50,7 +50,7 @@ export interface Props {
 
 const getUniqueID = createUniqueIDFactory('ChoiceList');
 
-export default function ChoiceList({
+export function ChoiceList({
   title,
   titleHidden,
   allowMultiple,
@@ -60,7 +60,7 @@ export default function ChoiceList({
   error,
   disabled = false,
   name = getUniqueID(),
-}: Props) {
+}: ChoiceListProps) {
   // Type asserting to any is required for TS3.2 but can be removed when we update to 3.3
   // see https://github.com/Microsoft/TypeScript/issues/28768
   const ControlComponent: any = allowMultiple ? Checkbox : RadioButton;
diff --git a/src/components/ChoiceList/index.ts b/src/components/ChoiceList/index.ts
index 2d59ba1fca3..725266330a1 100644
--- a/src/components/ChoiceList/index.ts
+++ b/src/components/ChoiceList/index.ts
@@ -1,4 +1 @@
-import ChoiceList from './ChoiceList';
-
 export * from './ChoiceList';
-export default ChoiceList;
diff --git a/src/components/ChoiceList/tests/ChoiceList.test.tsx b/src/components/ChoiceList/tests/ChoiceList.test.tsx
index 8491dcba641..17b63d876d1 100644
--- a/src/components/ChoiceList/tests/ChoiceList.test.tsx
+++ b/src/components/ChoiceList/tests/ChoiceList.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {ReactWrapper} from 'enzyme';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {RadioButton, Checkbox, InlineError, errorTextID} from 'components';
-import ChoiceList, {ChoiceDescriptor} from '../ChoiceList';
+import {ChoiceList, ChoiceDescriptor} from '../ChoiceList';
 
 describe('<ChoiceList />', () => {
   let choices: ChoiceDescriptor[];
diff --git a/src/components/Collapsible/Collapsible.tsx b/src/components/Collapsible/Collapsible.tsx
index 64545bcd9cb..8af99bf055b 100644
--- a/src/components/Collapsible/Collapsible.tsx
+++ b/src/components/Collapsible/Collapsible.tsx
@@ -9,7 +9,7 @@ import {classNames} from '../../utilities/css';
 
 import styles from './Collapsible.scss';
 
-export interface Props {
+export interface CollapsibleProps {
   /** Assign a unique ID to the collapsible. For accessibility, pass this ID as the value of the triggering component’s aria-controls prop. */
   id: string;
   /** Toggle whether the collapsible is expanded or not. */
@@ -34,11 +34,11 @@ interface State {
 
 const ParentCollapsibleExpandingContext = createContext(false);
 
-class Collapsible extends React.Component<Props, State> {
+class Collapsible extends React.Component<CollapsibleProps, State> {
   static contextType = ParentCollapsibleExpandingContext;
 
   static getDerivedStateFromProps(
-    {open: willOpen}: Props,
+    {open: willOpen}: CollapsibleProps,
     {open, animationState: prevAnimationState}: State,
   ) {
     let nextAnimationState = prevAnimationState;
@@ -64,7 +64,7 @@ class Collapsible extends React.Component<Props, State> {
   private node = createRef<HTMLDivElement>();
   private heightNode = createRef<HTMLDivElement>();
 
-  componentDidUpdate({open: wasOpen}: Props) {
+  componentDidUpdate({open: wasOpen}: CollapsibleProps) {
     const {animationState} = this.state;
     const parentCollapsibleExpanding = this.context;
 
@@ -165,4 +165,7 @@ function collapsibleHeight(
   return `${height || 0}px`;
 }
 
-export default Collapsible as ComponentClass<Props> & typeof Collapsible;
+// Use named export once we work out why not casting this breaks web
+// eslint-disable-next-line import/no-default-export
+export default Collapsible as ComponentClass<CollapsibleProps> &
+  typeof Collapsible;
diff --git a/src/components/Collapsible/index.ts b/src/components/Collapsible/index.ts
index 699d5a4ab6e..4c6c0dabffc 100644
--- a/src/components/Collapsible/index.ts
+++ b/src/components/Collapsible/index.ts
@@ -1,4 +1,3 @@
-import Collapsible from './Collapsible';
+import Collapsible, {CollapsibleProps} from './Collapsible';
 
-export {Props} from './Collapsible';
-export default Collapsible;
+export {Collapsible, CollapsibleProps};
diff --git a/src/components/ColorPicker/ColorPicker.tsx b/src/components/ColorPicker/ColorPicker.tsx
index 50bef266684..60092b2d68f 100644
--- a/src/components/ColorPicker/ColorPicker.tsx
+++ b/src/components/ColorPicker/ColorPicker.tsx
@@ -26,9 +26,9 @@ export interface BaseProps {
   onChange(color: HSBAColor): void;
 }
 
-export interface Props extends BaseProps {}
+export interface ColorPickerProps extends BaseProps {}
 
-export default class ColorPicker extends React.PureComponent<Props, State> {
+export class ColorPicker extends React.PureComponent<ColorPickerProps, State> {
   state: State = {
     pickerSize: 0,
   };
diff --git a/src/components/ColorPicker/components/AlphaPicker/AlphaPicker.tsx b/src/components/ColorPicker/components/AlphaPicker/AlphaPicker.tsx
index 817fd6f3cbf..11980f47b94 100644
--- a/src/components/ColorPicker/components/AlphaPicker/AlphaPicker.tsx
+++ b/src/components/ColorPicker/components/AlphaPicker/AlphaPicker.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Slidable, {Position} from '../Slidable';
+import {Slidable, Position} from '../Slidable';
 import {HSBColor} from '../../../../utilities/color-types';
 import {hsbToRgb} from '../../../../utilities/color-transformers';
 import styles from '../../ColorPicker.scss';
@@ -10,13 +10,13 @@ interface State {
   draggerHeight: number;
 }
 
-export interface Props {
+export interface AlphaPickerProps {
   color: HSBColor;
   alpha: number;
   onChange(hue: number): void;
 }
 
-export default class AlphaPicker extends React.PureComponent<Props, State> {
+export class AlphaPicker extends React.PureComponent<AlphaPickerProps, State> {
   state: State = {
     sliderHeight: 0,
     draggerHeight: 0,
diff --git a/src/components/ColorPicker/components/AlphaPicker/index.ts b/src/components/ColorPicker/components/AlphaPicker/index.ts
index debd7741ff3..3370e046b1d 100644
--- a/src/components/ColorPicker/components/AlphaPicker/index.ts
+++ b/src/components/ColorPicker/components/AlphaPicker/index.ts
@@ -1,4 +1 @@
-import AlphaPicker from './AlphaPicker';
-
-export {Props} from './AlphaPicker';
-export default AlphaPicker;
+export {AlphaPicker, AlphaPickerProps} from './AlphaPicker';
diff --git a/src/components/ColorPicker/components/AlphaPicker/tests/AlphaPicker.test.tsx b/src/components/ColorPicker/components/AlphaPicker/tests/AlphaPicker.test.tsx
index 6d06ba9b061..2e6eb17a6ba 100644
--- a/src/components/ColorPicker/components/AlphaPicker/tests/AlphaPicker.test.tsx
+++ b/src/components/ColorPicker/components/AlphaPicker/tests/AlphaPicker.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 import {calculateDraggerY, alphaForDraggerY} from '../utilities';
-import Slidable from '../../Slidable';
-import AlphaPicker from '../AlphaPicker';
+import {Slidable} from '../../Slidable';
+import {AlphaPicker} from '../AlphaPicker';
 
 describe('<AlphaPicker />', () => {
   const color = {
diff --git a/src/components/ColorPicker/components/HuePicker/HuePicker.tsx b/src/components/ColorPicker/components/HuePicker/HuePicker.tsx
index 4ebec764aee..d19ba759d30 100644
--- a/src/components/ColorPicker/components/HuePicker/HuePicker.tsx
+++ b/src/components/ColorPicker/components/HuePicker/HuePicker.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Slidable, {Position} from '../Slidable';
+import {Slidable, Position} from '../Slidable';
 import styles from '../../ColorPicker.scss';
 import {calculateDraggerY, hueForDraggerY} from './utilities';
 
@@ -8,12 +8,12 @@ interface State {
   draggerHeight: number;
 }
 
-export interface Props {
+export interface HuePickerProps {
   hue: number;
   onChange(hue: number): void;
 }
 
-export default class HuePicker extends React.PureComponent<Props, State> {
+export class HuePicker extends React.PureComponent<HuePickerProps, State> {
   state: State = {
     sliderHeight: 0,
     draggerHeight: 0,
diff --git a/src/components/ColorPicker/components/HuePicker/index.ts b/src/components/ColorPicker/components/HuePicker/index.ts
index 4577d6ddeaa..35e8e4e44b8 100644
--- a/src/components/ColorPicker/components/HuePicker/index.ts
+++ b/src/components/ColorPicker/components/HuePicker/index.ts
@@ -1,4 +1 @@
-import HuePicker from './HuePicker';
-
-export {Props} from './HuePicker';
-export default HuePicker;
+export {HuePicker, HuePickerProps} from './HuePicker';
diff --git a/src/components/ColorPicker/components/HuePicker/tests/HuePicker.test.tsx b/src/components/ColorPicker/components/HuePicker/tests/HuePicker.test.tsx
index bc09403cc1e..71067f4395b 100644
--- a/src/components/ColorPicker/components/HuePicker/tests/HuePicker.test.tsx
+++ b/src/components/ColorPicker/components/HuePicker/tests/HuePicker.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 import {calculateDraggerY, hueForDraggerY} from '../utilities';
-import Slidable from '../../Slidable';
-import HuePicker from '../HuePicker';
+import {Slidable} from '../../Slidable';
+import {HuePicker} from '../HuePicker';
 
 describe('<HuePicker />', () => {
   const mockProps = {
diff --git a/src/components/ColorPicker/components/Slidable/Slidable.tsx b/src/components/ColorPicker/components/Slidable/Slidable.tsx
index eba111db69a..98397b923a3 100644
--- a/src/components/ColorPicker/components/Slidable/Slidable.tsx
+++ b/src/components/ColorPicker/components/Slidable/Slidable.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {isServer} from '../../../../utilities/target';
-import EventListener from '../../../EventListener';
+import {EventListener} from '../../../EventListener';
 import styles from '../../ColorPicker.scss';
 
 export interface Position {
@@ -13,7 +13,7 @@ interface State {
   dragging: boolean;
 }
 
-export interface Props {
+export interface SlidableProps {
   draggerX?: number;
   draggerY?: number;
   onChange(position: Position): void;
@@ -41,7 +41,7 @@ if (!isServer) {
   );
 }
 
-export default class Slidable extends React.PureComponent<Props, State> {
+export class Slidable extends React.PureComponent<SlidableProps, State> {
   state: State = {
     dragging: false,
   };
diff --git a/src/components/ColorPicker/components/Slidable/index.ts b/src/components/ColorPicker/components/Slidable/index.ts
index 3fa24531f1b..0fb9f465165 100644
--- a/src/components/ColorPicker/components/Slidable/index.ts
+++ b/src/components/ColorPicker/components/Slidable/index.ts
@@ -1,4 +1 @@
-import Slidable from './Slidable';
-
-export {Props, Position} from './Slidable';
-export default Slidable;
+export {Slidable, SlidableProps, Position} from './Slidable';
diff --git a/src/components/ColorPicker/components/index.ts b/src/components/ColorPicker/components/index.ts
index 475ba12259d..1ac3f93c438 100644
--- a/src/components/ColorPicker/components/index.ts
+++ b/src/components/ColorPicker/components/index.ts
@@ -1,9 +1,5 @@
-export {default as AlphaPicker, Props as AlphaPickerProps} from './AlphaPicker';
+export {AlphaPicker, AlphaPickerProps} from './AlphaPicker';
 
-export {default as HuePicker, Props as HuePickerProps} from './HuePicker';
+export {HuePicker, HuePickerProps} from './HuePicker';
 
-export {
-  default as Slidable,
-  Props as SlidableProps,
-  Position,
-} from './Slidable';
+export {Slidable, SlidableProps, Position} from './Slidable';
diff --git a/src/components/ColorPicker/index.ts b/src/components/ColorPicker/index.ts
index 6165f4ff93c..4e94cc1d280 100644
--- a/src/components/ColorPicker/index.ts
+++ b/src/components/ColorPicker/index.ts
@@ -1,7 +1,4 @@
-import ColorPicker from './ColorPicker';
+export {ColorPicker, ColorPickerProps} from './ColorPicker';
 
 export * from '../../utilities/color-types';
 export * from '../../utilities/color-transformers';
-
-export {Props} from './ColorPicker';
-export default ColorPicker;
diff --git a/src/components/ColorPicker/tests/ColorPicker-ssr.test.tsx b/src/components/ColorPicker/tests/ColorPicker-ssr.test.tsx
index 0887a690d71..6f490755ea6 100644
--- a/src/components/ColorPicker/tests/ColorPicker-ssr.test.tsx
+++ b/src/components/ColorPicker/tests/ColorPicker-ssr.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Slidable} from '../components';
-import ColorPicker from '../ColorPicker';
+import {ColorPicker} from '../ColorPicker';
 
 const red = {
   hue: 0,
diff --git a/src/components/ColorPicker/tests/ColorPicker.test.tsx b/src/components/ColorPicker/tests/ColorPicker.test.tsx
index e041c826cfe..5e4771535c4 100644
--- a/src/components/ColorPicker/tests/ColorPicker.test.tsx
+++ b/src/components/ColorPicker/tests/ColorPicker.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import EventListener from '../../EventListener';
+import {EventListener} from '../../EventListener';
 import {Slidable, AlphaPicker} from '../components';
-import ColorPicker from '../ColorPicker';
+import {ColorPicker} from '../ColorPicker';
 
 const red = {
   hue: 0,
diff --git a/src/components/Connected/Connected.tsx b/src/components/Connected/Connected.tsx
index 7444021c20d..4dd45378cb8 100644
--- a/src/components/Connected/Connected.tsx
+++ b/src/components/Connected/Connected.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {Item, ItemPosition} from './components';
 import styles from './Connected.scss';
 
-export interface Props {
+export interface ConnectedProps {
   /** Content to display on the left */
   left?: React.ReactNode;
   /** Content to display on the right */
@@ -12,7 +12,7 @@ export interface Props {
   children?: React.ReactNode;
 }
 
-export default function Connected({children, left, right}: Props) {
+export function Connected({children, left, right}: ConnectedProps) {
   if (left == null && right == null) {
     return <React.Fragment>{children}</React.Fragment>;
   }
diff --git a/src/components/Connected/components/Item/Item.tsx b/src/components/Connected/components/Item/Item.tsx
index 333ec8ae75c..a9df3b8e68d 100644
--- a/src/components/Connected/components/Item/Item.tsx
+++ b/src/components/Connected/components/Item/Item.tsx
@@ -8,7 +8,7 @@ export enum ItemPosition {
   Right,
 }
 
-export interface Props {
+export interface ItemProps {
   /** Position of the item */
   position: ItemPosition;
   /** Item content */
@@ -19,7 +19,7 @@ interface State {
   focused: boolean;
 }
 
-export default class Item extends React.PureComponent<Props, State> {
+export class Item extends React.PureComponent<ItemProps, State> {
   state: State = {focused: false};
 
   render() {
diff --git a/src/components/Connected/components/Item/index.ts b/src/components/Connected/components/Item/index.ts
index 48b63fdc87e..a38f85e2af4 100644
--- a/src/components/Connected/components/Item/index.ts
+++ b/src/components/Connected/components/Item/index.ts
@@ -1,4 +1 @@
-import Item from './Item';
-
-export {Props, ItemPosition} from './Item';
-export default Item;
+export {Item, ItemProps, ItemPosition} from './Item';
diff --git a/src/components/Connected/components/index.ts b/src/components/Connected/components/index.ts
index 1eeec74d9d1..a38f85e2af4 100644
--- a/src/components/Connected/components/index.ts
+++ b/src/components/Connected/components/index.ts
@@ -1 +1 @@
-export {default as Item, Props as ItemProps, ItemPosition} from './Item';
+export {Item, ItemProps, ItemPosition} from './Item';
diff --git a/src/components/Connected/index.ts b/src/components/Connected/index.ts
index 32b922612ab..835824d31e3 100644
--- a/src/components/Connected/index.ts
+++ b/src/components/Connected/index.ts
@@ -1,4 +1 @@
-import Connected from './Connected';
-
-export {Props} from './Connected';
-export default Connected;
+export {Connected, ConnectedProps} from './Connected';
diff --git a/src/components/ContextualSaveBar/ContextualSaveBar.tsx b/src/components/ContextualSaveBar/ContextualSaveBar.tsx
index b881d5d7e07..bb177a1fa90 100644
--- a/src/components/ContextualSaveBar/ContextualSaveBar.tsx
+++ b/src/components/ContextualSaveBar/ContextualSaveBar.tsx
@@ -5,14 +5,17 @@ import {ContextualSaveBarProps, useFrame} from '../../utilities/frame';
 // a component's props to be found in the Props interface. This silly workaround
 // ensures that the Props Explorer table is generated correctly, instead of
 // crashing if we write `ContextualSaveBar extends React.Component<ContextualSaveBarProps>`
-export interface Props extends ContextualSaveBarProps {}
+export interface ContextualSaveBarProps extends ContextualSaveBarProps {}
 
-function ContextualSaveBar({
+// This does have a display name, but the linting has a bug in it
+// https://github.com/yannickcr/eslint-plugin-react/issues/2324
+// eslint-disable-next-line react/display-name
+export const ContextualSaveBar = React.memo(function ContextualSaveBar({
   message,
   saveAction,
   discardAction,
   alignContentFlush,
-}: Props) {
+}: ContextualSaveBarProps) {
   const {setContextualSaveBar, removeContextualSaveBar} = useFrame();
 
   React.useEffect(
@@ -41,6 +44,4 @@ function ContextualSaveBar({
   );
 
   return null;
-}
-
-export default React.memo(ContextualSaveBar);
+});
diff --git a/src/components/ContextualSaveBar/index.ts b/src/components/ContextualSaveBar/index.ts
index 8d9ba177b67..a53bc9d28d0 100644
--- a/src/components/ContextualSaveBar/index.ts
+++ b/src/components/ContextualSaveBar/index.ts
@@ -1 +1 @@
-export {default, Props} from './ContextualSaveBar';
+export {ContextualSaveBar, ContextualSaveBarProps} from './ContextualSaveBar';
diff --git a/src/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx b/src/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx
index fa10ff8a997..013783e4de6 100644
--- a/src/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx
+++ b/src/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mount} from 'enzyme';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import ContextualSaveBar from '../ContextualSaveBar';
+import {ContextualSaveBar} from '../ContextualSaveBar';
 
 describe('<ContextualSaveBar />', () => {
   const props = {
diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index 25c113f57a0..262de72cb64 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -9,20 +9,23 @@ import {
   withAppProvider,
   WithAppProviderProps,
 } from '../../utilities/with-app-provider';
-import EventListener from '../EventListener';
+import {EventListener} from '../EventListener';
 import {Cell, CellProps, Navigation} from './components';
 import {measureColumn, getPrevAndCurrentColumns} from './utilities';
 
 import {DataTableState, SortDirection, VerticalAlign} from './types';
 import styles from './DataTable.scss';
 
-type CombinedProps = Props & WithAppProviderProps;
-export type TableRow = Props['headings'] | Props['rows'] | Props['totals'];
+type CombinedProps = DataTableProps & WithAppProviderProps;
+export type TableRow =
+  | DataTableProps['headings']
+  | DataTableProps['rows']
+  | DataTableProps['totals'];
 export type TableData = string | number | React.ReactNode;
 
 export type ColumnContentType = 'text' | 'numeric';
 
-export interface Props {
+export interface DataTableProps {
   /** List of data types, which determines content alignment for each column. Data types are "text," which aligns left, or "numeric," which aligns right. */
   columnContentTypes: ColumnContentType[];
   /** List of column headings. */
@@ -105,7 +108,7 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
     }
   }
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps: DataTableProps) {
     if (isEqual(prevProps, this.props)) {
       return;
     }
@@ -387,4 +390,6 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
   };
 }
 
-export default withAppProvider<Props>()(DataTable);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<DataTableProps>()(DataTable);
diff --git a/src/components/DataTable/components/Cell/Cell.tsx b/src/components/DataTable/components/Cell/Cell.tsx
index e5e500f7ffc..b8ad7df8250 100644
--- a/src/components/DataTable/components/Cell/Cell.tsx
+++ b/src/components/DataTable/components/Cell/Cell.tsx
@@ -4,12 +4,12 @@ import {CaretUpMinor, CaretDownMinor} from '@shopify/polaris-icons';
 import {classNames, variationName} from '../../../../utilities/css';
 import {useI18n} from '../../../../utilities/i18n';
 import {headerCell} from '../../../shared';
-import Icon from '../../../Icon';
+import {Icon} from '../../../Icon';
 import {SortDirection, VerticalAlign} from '../../types';
 
 import styles from '../../DataTable.scss';
 
-export interface Props {
+export interface CellProps {
   content?: React.ReactNode;
   contentType?: string;
   firstColumn?: boolean;
@@ -24,7 +24,7 @@ export interface Props {
   onSort?(): void;
 }
 
-export default function Cell({
+export function Cell({
   content,
   contentType,
   firstColumn,
@@ -37,7 +37,7 @@ export default function Cell({
   verticalAlign = 'top',
   defaultSortDirection = 'ascending',
   onSort,
-}: Props) {
+}: CellProps) {
   const {translate} = useI18n();
   const numeric = contentType === 'numeric';
   const className = classNames(
diff --git a/src/components/DataTable/components/Cell/index.ts b/src/components/DataTable/components/Cell/index.ts
index 010bb37df68..b42c9beb4a8 100644
--- a/src/components/DataTable/components/Cell/index.ts
+++ b/src/components/DataTable/components/Cell/index.ts
@@ -1,4 +1 @@
-import Cell from './Cell';
-
-export {Props} from './Cell';
-export default Cell;
+export {Cell, CellProps} from './Cell';
diff --git a/src/components/DataTable/components/Cell/tests/Cell.test.tsx b/src/components/DataTable/components/Cell/tests/Cell.test.tsx
index 4c9b87eaada..3d04af5e7c1 100644
--- a/src/components/DataTable/components/Cell/tests/Cell.test.tsx
+++ b/src/components/DataTable/components/Cell/tests/Cell.test.tsx
@@ -3,7 +3,7 @@ import {CaretUpMinor, CaretDownMinor} from '@shopify/polaris-icons';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 
 import {Icon} from '../../../..';
-import Cell from '../Cell';
+import {Cell} from '../Cell';
 
 describe('<Cell />', () => {
   describe('content', () => {
diff --git a/src/components/DataTable/components/Navigation/Navigation.tsx b/src/components/DataTable/components/Navigation/Navigation.tsx
index 41c7ee68735..cf37b28dda5 100644
--- a/src/components/DataTable/components/Navigation/Navigation.tsx
+++ b/src/components/DataTable/components/Navigation/Navigation.tsx
@@ -3,13 +3,13 @@ import {ChevronLeftMinor, ChevronRightMinor} from '@shopify/polaris-icons';
 
 import {classNames} from '../../../../utilities/css';
 import {useI18n} from '../../../../utilities/i18n';
-import Button from '../../../Button';
+import {Button} from '../../../Button';
 
 import {ColumnVisibilityData} from '../../types';
 
 import styles from '../../DataTable.scss';
 
-export interface Props {
+export interface NavigationProps {
   columnVisibilityData: ColumnVisibilityData[];
   isScrolledFarthestLeft?: boolean;
   isScrolledFarthestRight?: boolean;
@@ -17,13 +17,13 @@ export interface Props {
   navigateTableRight?(): void;
 }
 
-export default function Navigation({
+export function Navigation({
   columnVisibilityData,
   isScrolledFarthestLeft,
   isScrolledFarthestRight,
   navigateTableLeft,
   navigateTableRight,
-}: Props) {
+}: NavigationProps) {
   const {translate} = useI18n();
 
   const pipMarkup = columnVisibilityData.map((column, index) => {
diff --git a/src/components/DataTable/components/Navigation/index.ts b/src/components/DataTable/components/Navigation/index.ts
index b88cd6e94c9..471b39990d3 100644
--- a/src/components/DataTable/components/Navigation/index.ts
+++ b/src/components/DataTable/components/Navigation/index.ts
@@ -1,4 +1 @@
-import Navigation from './Navigation';
-
-export {Props} from './Navigation';
-export default Navigation;
+export {Navigation, NavigationProps} from './Navigation';
diff --git a/src/components/DataTable/components/Navigation/tests/Navigation.test.tsx b/src/components/DataTable/components/Navigation/tests/Navigation.test.tsx
index 37cc935a3e8..ce6204d2356 100644
--- a/src/components/DataTable/components/Navigation/tests/Navigation.test.tsx
+++ b/src/components/DataTable/components/Navigation/tests/Navigation.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Button} from 'components';
-import Navigation from '../Navigation';
+import {Navigation} from '../Navigation';
 
 describe('<Navigation />', () => {
   it('renders two buttons', () => {
diff --git a/src/components/DataTable/components/index.ts b/src/components/DataTable/components/index.ts
index 733e894d313..82eb5dcb550 100644
--- a/src/components/DataTable/components/index.ts
+++ b/src/components/DataTable/components/index.ts
@@ -1,3 +1,3 @@
-export {default as Cell, Props as CellProps} from './Cell';
+export {Cell, CellProps} from './Cell';
 
-export {default as Navigation, Props as NavigationProps} from './Navigation';
+export {Navigation, NavigationProps} from './Navigation';
diff --git a/src/components/DataTable/index.ts b/src/components/DataTable/index.ts
index 4552c3815b5..6267c9725cd 100644
--- a/src/components/DataTable/index.ts
+++ b/src/components/DataTable/index.ts
@@ -1,7 +1,9 @@
-import DataTable from './DataTable';
+import DataTable, {
+  DataTableProps,
+  TableRow,
+  TableData,
+  ColumnContentType,
+} from './DataTable';
 
+export {DataTable, DataTableProps, TableRow, TableData, ColumnContentType};
 export {SortDirection} from './types';
-
-export {Props, TableRow, TableData, ColumnContentType} from './DataTable';
-
-export default DataTable;
diff --git a/src/components/DataTable/tests/DataTable.test.tsx b/src/components/DataTable/tests/DataTable.test.tsx
index e7c59e054cc..f405a5a5f42 100644
--- a/src/components/DataTable/tests/DataTable.test.tsx
+++ b/src/components/DataTable/tests/DataTable.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 import {Cell} from '../components';
-import DataTable, {Props} from '../DataTable';
+import DataTable, {DataTableProps} from '../DataTable';
 
 describe('<DataTable />', () => {
   const headings = ['Product', 'Price', 'Order Number', 'Quantity', 'Subtotal'];
@@ -17,7 +17,7 @@ describe('<DataTable />', () => {
     ['Mauve Cashmere Scarf', '$445.00', 124533, 140, '$14,240.00'],
   ];
 
-  const columnContentTypes: Props['columnContentTypes'] = [
+  const columnContentTypes: DataTableProps['columnContentTypes'] = [
     'text',
     'numeric',
     'numeric',
@@ -25,13 +25,13 @@ describe('<DataTable />', () => {
     'numeric',
   ];
 
-  const defaultProps: Props = {columnContentTypes, headings, rows};
+  const defaultProps: DataTableProps = {columnContentTypes, headings, rows};
 
   describe('columnContentTypes', () => {
     it('sets the provided contentType of Cells in each column', () => {
       const headings = ['Column 1', 'Column 2'];
       const rows = [['Cell 1', '2']];
-      const columnContentTypes: Props['columnContentTypes'] = [
+      const columnContentTypes: DataTableProps['columnContentTypes'] = [
         'text',
         'numeric',
       ];
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index 48be1e4470f..820bb730e34 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -18,7 +18,7 @@ import {
   withAppProvider,
   WithAppProviderProps,
 } from '../../utilities/with-app-provider';
-import Button from '../Button';
+import {Button} from '../Button';
 import {monthName} from './utilities';
 
 import {Month} from './components';
@@ -51,8 +51,8 @@ export interface BaseProps {
   onMonthChange?(month: Months, year: Year): void;
 }
 
-export interface Props extends BaseProps {}
-type CombinedProps = Props & WithAppProviderProps;
+export interface DatePickerProps extends BaseProps {}
+type CombinedProps = DatePickerProps & WithAppProviderProps;
 
 interface State {
   hoverDate?: Date;
@@ -65,7 +65,7 @@ class DatePicker extends React.PureComponent<CombinedProps, State> {
     focusDate: undefined,
   };
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps: DatePickerProps) {
     const selectedPropDidChange = !isSameSelectedDate(
       prevProps.selected,
       this.props.selected,
@@ -300,8 +300,8 @@ function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {
 }
 
 function isSameSelectedDate(
-  previousDate?: Props['selected'],
-  currentDate?: Props['selected'],
+  previousDate?: DatePickerProps['selected'],
+  currentDate?: DatePickerProps['selected'],
 ) {
   if (previousDate == null || currentDate == null) {
     return previousDate == null && currentDate == null;
@@ -325,4 +325,6 @@ function deriveRange(selected?: Date | Range) {
   return selected instanceof Date ? {start: selected, end: selected} : selected;
 }
 
-export default withAppProvider<Props>()(DatePicker);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<DatePickerProps>()(DatePicker);
diff --git a/src/components/DatePicker/components/Day/Day.tsx b/src/components/DatePicker/components/Day/Day.tsx
index 85b0e0c1866..7e5c2b7d490 100644
--- a/src/components/DatePicker/components/Day/Day.tsx
+++ b/src/components/DatePicker/components/Day/Day.tsx
@@ -8,7 +8,7 @@ import {
 
 import styles from '../../DatePicker.scss';
 
-export interface Props {
+export interface DayProps {
   focused?: boolean;
   day?: Date;
   selected?: boolean;
@@ -20,7 +20,7 @@ export interface Props {
   onFocus?(day: Date): void;
 }
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = DayProps & WithAppProviderProps;
 
 class Day extends React.PureComponent<CombinedProps, never> {
   private dayNode: HTMLElement | null = null;
@@ -92,6 +92,8 @@ class Day extends React.PureComponent<CombinedProps, never> {
   };
 }
 
-export default withAppProvider<Props>()(Day);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<DayProps>()(Day);
 
 function noop() {}
diff --git a/src/components/DatePicker/components/Day/index.ts b/src/components/DatePicker/components/Day/index.ts
index 411cc179763..38e5ab00475 100644
--- a/src/components/DatePicker/components/Day/index.ts
+++ b/src/components/DatePicker/components/Day/index.ts
@@ -1,4 +1,3 @@
-import Day from './Day';
+import Day, {DayProps} from './Day';
 
-export {Props} from './Day';
-export default Day;
+export {Day, DayProps};
diff --git a/src/components/DatePicker/components/Month/Month.tsx b/src/components/DatePicker/components/Month/Month.tsx
index 9719f617348..f10e50f64f6 100644
--- a/src/components/DatePicker/components/Month/Month.tsx
+++ b/src/components/DatePicker/components/Month/Month.tsx
@@ -15,11 +15,11 @@ import {
 import {classNames} from '../../../../utilities/css';
 import {useI18n} from '../../../../utilities/i18n';
 import styles from '../../DatePicker.scss';
-import Day from '../Day';
-import Weekday from '../Weekday';
+import {Day} from '../Day';
+import {Weekday} from '../Weekday';
 import {monthName, weekdayName} from '../../utilities';
 
-export interface Props {
+export interface MonthProps {
   focusedDate?: Date;
   selected?: Range;
   hoverDate?: Date;
@@ -46,7 +46,7 @@ const WEEKDAYS = [
   Weekdays.Saturday,
 ];
 
-export default function Month({
+export function Month({
   focusedDate,
   selected,
   hoverDate,
@@ -59,7 +59,7 @@ export default function Month({
   month,
   year,
   weekStartsOn,
-}: Props) {
+}: MonthProps) {
   const intl = useI18n();
 
   const isInHoveringRange = allowRange ? hoveringDateIsInRange : () => false;
diff --git a/src/components/DatePicker/components/Month/index.ts b/src/components/DatePicker/components/Month/index.ts
index fd59ee229fe..d70a44e1ad1 100644
--- a/src/components/DatePicker/components/Month/index.ts
+++ b/src/components/DatePicker/components/Month/index.ts
@@ -1,4 +1 @@
-import Month from './Month';
-
-export {Props} from './Month';
-export default Month;
+export {Month, MonthProps} from './Month';
diff --git a/src/components/DatePicker/components/Month/tests/Month.test.tsx b/src/components/DatePicker/components/Month/tests/Month.test.tsx
index dff583960d1..4f50a4f5c64 100644
--- a/src/components/DatePicker/components/Month/tests/Month.test.tsx
+++ b/src/components/DatePicker/components/Month/tests/Month.test.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import {Weekdays} from '@shopify/javascript-utilities/dates';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import {Weekday} from '../..';
-import Month from '../Month';
-import Day from '../../Day';
+import {Weekday} from '../../Weekday';
+import {Day} from '../../Day';
+import {Month} from '../Month';
 
 describe('<Month />', () => {
   describe('title', () => {
diff --git a/src/components/DatePicker/components/Weekday/Weekday.tsx b/src/components/DatePicker/components/Weekday/Weekday.tsx
index 75d1b5d4809..c5747cdd70c 100644
--- a/src/components/DatePicker/components/Weekday/Weekday.tsx
+++ b/src/components/DatePicker/components/Weekday/Weekday.tsx
@@ -3,13 +3,13 @@ import {Weekdays} from '@shopify/javascript-utilities/dates';
 import {classNames} from '../../../../utilities/css';
 import styles from '../../DatePicker.scss';
 
-export interface Props {
+export interface WeekdayProps {
   label: Weekdays;
   title: string;
   current: boolean;
 }
 
-export default function Weekday({label, title, current}: Props) {
+export function Weekday({label, title, current}: WeekdayProps) {
   const className = classNames(
     styles.Weekday,
     current && styles['Weekday-current'],
diff --git a/src/components/DatePicker/components/Weekday/index.ts b/src/components/DatePicker/components/Weekday/index.ts
index 159ba0759a1..daab9771b20 100644
--- a/src/components/DatePicker/components/Weekday/index.ts
+++ b/src/components/DatePicker/components/Weekday/index.ts
@@ -1,4 +1 @@
-import Weekday from './Weekday';
-
-export {Props} from './Weekday';
-export default Weekday;
+export {Weekday, WeekdayProps} from './Weekday';
diff --git a/src/components/DatePicker/components/Weekday/tests/Weekday.test.tsx b/src/components/DatePicker/components/Weekday/tests/Weekday.test.tsx
index fddf1e45f19..7de83f3a732 100644
--- a/src/components/DatePicker/components/Weekday/tests/Weekday.test.tsx
+++ b/src/components/DatePicker/components/Weekday/tests/Weekday.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Weekdays} from '@shopify/javascript-utilities/dates';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Weekday from '../Weekday';
+import {Weekday} from '../Weekday';
 
 describe('<Weekday />', () => {
   const mockProps = {
diff --git a/src/components/DatePicker/components/index.ts b/src/components/DatePicker/components/index.ts
index ece618b0107..15ae0a1485a 100644
--- a/src/components/DatePicker/components/index.ts
+++ b/src/components/DatePicker/components/index.ts
@@ -1,5 +1,5 @@
-export {default as Day, Props as DayProps} from './Day';
+export {Day, DayProps} from './Day';
 
-export {default as Month, Props as MonthProps} from './Month';
+export {Month, MonthProps} from './Month';
 
-export {default as Weekday, Props as WeekdayProps} from './Weekday';
+export {Weekday, WeekdayProps} from './Weekday';
diff --git a/src/components/DatePicker/index.ts b/src/components/DatePicker/index.ts
index 5468e2e9054..11960e8c0ef 100644
--- a/src/components/DatePicker/index.ts
+++ b/src/components/DatePicker/index.ts
@@ -1,4 +1,3 @@
-import DatePicker from './DatePicker';
+import DatePicker, {DatePickerProps, Range, Months, Year} from './DatePicker';
 
-export {Props, Range, Months, Year} from './DatePicker';
-export default DatePicker;
+export {DatePicker, DatePickerProps, Range, Months, Year};
diff --git a/src/components/DescriptionList/DescriptionList.tsx b/src/components/DescriptionList/DescriptionList.tsx
index ed7621a163f..e7ce4c25195 100644
--- a/src/components/DescriptionList/DescriptionList.tsx
+++ b/src/components/DescriptionList/DescriptionList.tsx
@@ -9,7 +9,7 @@ export interface Item {
   description: React.ReactNode;
 }
 
-export interface Props {
+export interface DescriptionListProps {
   /** Collection of items for list */
   items: Item[];
 }
@@ -17,7 +17,7 @@ export interface Props {
 const getUniqueTermKey = createUniqueIDFactory(`Term`);
 const getUniqueDescriptionKey = createUniqueIDFactory(`Description`);
 
-export default function DescriptionList({items}: Props) {
+export function DescriptionList({items}: DescriptionListProps) {
   const terms = items.reduce(
     (allTerms, {term, description}) => [
       ...allTerms,
diff --git a/src/components/DescriptionList/index.ts b/src/components/DescriptionList/index.ts
index 383097dc059..649af8ce4dd 100644
--- a/src/components/DescriptionList/index.ts
+++ b/src/components/DescriptionList/index.ts
@@ -1,4 +1 @@
-import DescriptionList from './DescriptionList';
-
-export {Props} from './DescriptionList';
-export default DescriptionList;
+export {DescriptionList, DescriptionListProps} from './DescriptionList';
diff --git a/src/components/DescriptionList/tests/DescriptionList.test.tsx b/src/components/DescriptionList/tests/DescriptionList.test.tsx
index 0326aeca52e..1b73a4d955f 100644
--- a/src/components/DescriptionList/tests/DescriptionList.test.tsx
+++ b/src/components/DescriptionList/tests/DescriptionList.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 
-import DescriptionList from '../DescriptionList';
+import {DescriptionList} from '../DescriptionList';
 
 describe('<DescriptionList />', () => {
   it('renders a dt element for an item term and a dd element for an item description', () => {
diff --git a/src/components/DisplayText/DisplayText.tsx b/src/components/DisplayText/DisplayText.tsx
index c6922cc7f14..0ef87e30fdd 100644
--- a/src/components/DisplayText/DisplayText.tsx
+++ b/src/components/DisplayText/DisplayText.tsx
@@ -5,7 +5,7 @@ import styles from './DisplayText.scss';
 
 export type Size = 'small' | 'medium' | 'large' | 'extraLarge';
 
-export interface Props {
+export interface DisplayTextProps {
   /**
    * Name of element to use for text
    * @default 'p'
@@ -20,11 +20,11 @@ export interface Props {
   children?: React.ReactNode;
 }
 
-export default function DisplayText({
+export function DisplayText({
   element: Element = 'p',
   children,
   size = 'medium',
-}: Props) {
+}: DisplayTextProps) {
   const className = classNames(
     styles.DisplayText,
     size && styles[variationName('size', size)],
diff --git a/src/components/DisplayText/index.ts b/src/components/DisplayText/index.ts
index de25edec96d..8a184592781 100644
--- a/src/components/DisplayText/index.ts
+++ b/src/components/DisplayText/index.ts
@@ -1,4 +1 @@
-import DisplayText from './DisplayText';
-
-export {Props} from './DisplayText';
-export default DisplayText;
+export {DisplayText, DisplayTextProps} from './DisplayText';
diff --git a/src/components/DisplayText/tests/DisplayText.test.tsx b/src/components/DisplayText/tests/DisplayText.test.tsx
index 3a57f1caa80..6cf08827dd4 100644
--- a/src/components/DisplayText/tests/DisplayText.test.tsx
+++ b/src/components/DisplayText/tests/DisplayText.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 
-import DisplayText from '../DisplayText';
+import {DisplayText} from '../DisplayText';
 
 describe('<DisplayText />', () => {
   it('renders its children', () => {
diff --git a/src/components/DropZone/DropZone.tsx b/src/components/DropZone/DropZone.tsx
index 9a91257436a..75812f0225b 100755
--- a/src/components/DropZone/DropZone.tsx
+++ b/src/components/DropZone/DropZone.tsx
@@ -12,12 +12,12 @@ import {
 
 import {classNames} from '../../utilities/css';
 import {capitalize} from '../../utilities/capitalize';
-import Icon from '../Icon';
-import Stack from '../Stack';
-import Caption from '../Caption';
-import DisplayText from '../DisplayText';
-import VisuallyHidden from '../VisuallyHidden';
-import Labelled, {Action} from '../Labelled';
+import {Icon} from '../Icon';
+import {Stack} from '../Stack';
+import {Caption} from '../Caption';
+import {DisplayText} from '../DisplayText';
+import {VisuallyHidden} from '../VisuallyHidden';
+import {Labelled, Action} from '../Labelled';
 import {
   withAppProvider,
   WithAppProviderProps,
@@ -43,7 +43,7 @@ interface State {
   numFiles: number;
 }
 
-export interface Props {
+export interface DropZoneProps {
   /** Label for the file input */
   label?: string;
   /** Adds an action to the label */
@@ -110,7 +110,7 @@ export interface Props {
   onFileDialogClose?(): void;
 }
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = DropZoneProps & WithAppProviderProps;
 
 const getUniqueID = createUniqueIDFactory('DropZone');
 
@@ -548,4 +548,6 @@ function handleDragStart(event: React.DragEvent<HTMLDivElement>) {
   event.stopPropagation();
 }
 
-export default withAppProvider<Props>()(DropZone);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<DropZoneProps>()(DropZone);
diff --git a/src/components/DropZone/components/FileUpload/FileUpload.tsx b/src/components/DropZone/components/FileUpload/FileUpload.tsx
index a06f2bc2fe6..a0f17c9a4b8 100755
--- a/src/components/DropZone/components/FileUpload/FileUpload.tsx
+++ b/src/components/DropZone/components/FileUpload/FileUpload.tsx
@@ -4,12 +4,12 @@ import {DragDropMajorMonotone} from '@shopify/polaris-icons';
 import {classNames} from '../../../../utilities/css';
 import {capitalize} from '../../../../utilities/capitalize';
 
-import Link from '../../../Link';
-import Icon from '../../../Icon';
-import Stack from '../../../Stack';
-import Button from '../../../Button';
-import Caption from '../../../Caption';
-import TextStyle from '../../../TextStyle';
+import {Link} from '../../../Link';
+import {Icon} from '../../../Icon';
+import {Stack} from '../../../Stack';
+import {Button} from '../../../Button';
+import {Caption} from '../../../Caption';
+import {TextStyle} from '../../../TextStyle';
 
 import {fileUpload, imageUpload} from '../../images';
 
@@ -18,12 +18,12 @@ import {useI18n} from '../../../../utilities/i18n';
 
 import styles from './FileUpload.scss';
 
-export interface Props {
+export interface FileUploadProps {
   actionTitle?: string;
   actionHint?: string;
 }
 
-export default function FileUpload(props: Props) {
+export function FileUpload(props: FileUploadProps) {
   const {translate} = useI18n();
   const {size, type} = useContext(DropZoneContext);
   const suffix = capitalize(type);
diff --git a/src/components/DropZone/components/FileUpload/index.ts b/src/components/DropZone/components/FileUpload/index.ts
index 4966fc0ebc6..f65ec72d0a5 100644
--- a/src/components/DropZone/components/FileUpload/index.ts
+++ b/src/components/DropZone/components/FileUpload/index.ts
@@ -1,4 +1 @@
-import FileUpload from './FileUpload';
-
-export {Props} from './FileUpload';
-export default FileUpload;
+export {FileUpload, FileUploadProps} from './FileUpload';
diff --git a/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx b/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx
index 7caa16d52df..ef67cc81bb4 100755
--- a/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx
+++ b/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {Link, Icon, Button, Caption, TextStyle} from 'components';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {DropZoneContext} from '../../../context';
-import FileUpload from '../FileUpload';
+import {FileUpload} from '../FileUpload';
 import {fileUpload as fileUploadImage, imageUpload} from '../../../images';
 
 describe('<FileUpload />', () => {
diff --git a/src/components/DropZone/components/index.ts b/src/components/DropZone/components/index.ts
index 49f44ba4ebb..f65ec72d0a5 100644
--- a/src/components/DropZone/components/index.ts
+++ b/src/components/DropZone/components/index.ts
@@ -1 +1 @@
-export {default as FileUpload, Props as FileUploadProps} from './FileUpload';
+export {FileUpload, FileUploadProps} from './FileUpload';
diff --git a/src/components/DropZone/images/index.ts b/src/components/DropZone/images/index.ts
index ce946b47918..71f492df26a 100644
--- a/src/components/DropZone/images/index.ts
+++ b/src/components/DropZone/images/index.ts
@@ -1,2 +1,3 @@
 export {default as fileUpload} from './file-upload.svg';
+
 export {default as imageUpload} from './image-upload.svg';
diff --git a/src/components/DropZone/index.ts b/src/components/DropZone/index.ts
index 32eefa55a17..11aa328496b 100755
--- a/src/components/DropZone/index.ts
+++ b/src/components/DropZone/index.ts
@@ -1,6 +1,4 @@
-import DropZone from './DropZone';
+import DropZone, {DropZoneProps} from './DropZone';
 
+export {DropZone, DropZoneProps};
 export * from './types';
-
-export {Props} from './DropZone';
-export default DropZone;
diff --git a/src/components/EmptySearchResult/EmptySearchResult.tsx b/src/components/EmptySearchResult/EmptySearchResult.tsx
index 016f7e36106..070850b4415 100644
--- a/src/components/EmptySearchResult/EmptySearchResult.tsx
+++ b/src/components/EmptySearchResult/EmptySearchResult.tsx
@@ -4,21 +4,21 @@ import {
   withAppProvider,
   WithAppProviderProps,
 } from '../../utilities/with-app-provider';
-import DisplayText from '../DisplayText';
-import TextStyle from '../TextStyle';
-import Image from '../Image';
-import Stack from '../Stack';
+import {DisplayText} from '../DisplayText';
+import {TextStyle} from '../TextStyle';
+import {Image} from '../Image';
+import {Stack} from '../Stack';
 
 import {emptySearch} from './illustrations';
 import styles from './EmptySearchResult.scss';
 
-export interface Props {
+export interface EmptySearchResultProps {
   title: string;
   description?: string;
   withIllustration?: boolean;
 }
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = EmptySearchResultProps & WithAppProviderProps;
 
 class EmptySearchResult extends React.PureComponent<CombinedProps, never> {
   render() {
@@ -52,4 +52,6 @@ class EmptySearchResult extends React.PureComponent<CombinedProps, never> {
   }
 }
 
-export default withAppProvider<Props>()(EmptySearchResult);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<EmptySearchResultProps>()(EmptySearchResult);
diff --git a/src/components/EmptySearchResult/index.ts b/src/components/EmptySearchResult/index.ts
index 2243536c613..17728ce8a7d 100644
--- a/src/components/EmptySearchResult/index.ts
+++ b/src/components/EmptySearchResult/index.ts
@@ -1,4 +1,3 @@
-import EmptySearchResult from './EmptySearchResult';
+import EmptySearchResult, {EmptySearchResultProps} from './EmptySearchResult';
 
-export {Props} from './EmptySearchResult';
-export default EmptySearchResult;
+export {EmptySearchResult, EmptySearchResultProps};
diff --git a/src/components/EmptyState/EmptyState.tsx b/src/components/EmptyState/EmptyState.tsx
index 26c1f4aab4c..08f47fb0dc0 100644
--- a/src/components/EmptyState/EmptyState.tsx
+++ b/src/components/EmptyState/EmptyState.tsx
@@ -2,15 +2,15 @@ import React from 'react';
 import {classNames} from '../../utilities/css';
 
 import {Action} from '../../types';
-import Image from '../Image';
+import {Image} from '../Image';
 import {buttonFrom} from '../Button';
-import Stack from '../Stack';
-import TextContainer from '../TextContainer';
-import DisplayText from '../DisplayText';
+import {Stack} from '../Stack';
+import {TextContainer} from '../TextContainer';
+import {DisplayText} from '../DisplayText';
 
 import styles from './EmptyState.scss';
 
-export interface Props {
+export interface EmptyStateProps {
   /** The empty state heading */
   heading?: string;
   /** The image to use for small screens */
@@ -29,7 +29,7 @@ export interface Props {
   footerContent?: React.ReactNode;
 }
 
-export default class EmptyState extends React.PureComponent<Props, never> {
+export class EmptyState extends React.PureComponent<EmptyStateProps, never> {
   render() {
     const {
       children,
diff --git a/src/components/EmptyState/index.ts b/src/components/EmptyState/index.ts
index db2ac3f1da6..cdc206e251f 100644
--- a/src/components/EmptyState/index.ts
+++ b/src/components/EmptyState/index.ts
@@ -1,4 +1 @@
-import EmptyState from './EmptyState';
-
-export {Props} from './EmptyState';
-export default EmptyState;
+export {EmptyState, EmptyStateProps} from './EmptyState';
diff --git a/src/components/EmptyState/tests/EmptyState.test.tsx b/src/components/EmptyState/tests/EmptyState.test.tsx
index 584dd6c97f3..5b6fbc137cb 100644
--- a/src/components/EmptyState/tests/EmptyState.test.tsx
+++ b/src/components/EmptyState/tests/EmptyState.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Image, DisplayText, TextContainer, UnstyledLink} from 'components';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import EmptyState from '../EmptyState';
+import {EmptyState} from '../EmptyState';
 
 describe('<EmptyState />', () => {
   let imgSrc =
diff --git a/src/components/EventListener/EventListener.tsx b/src/components/EventListener/EventListener.tsx
index 0286a199ac3..0cbefb813ae 100644
--- a/src/components/EventListener/EventListener.tsx
+++ b/src/components/EventListener/EventListener.tsx
@@ -10,17 +10,20 @@ export interface BaseEventProps {
   handler(event: Event): void;
 }
 
-export interface Props extends BaseEventProps {
+export interface EventListenerProps extends BaseEventProps {
   passive?: boolean;
 }
 
 // see https://github.com/oliviertassinari/react-event-listener/
-export default class EventListener extends React.PureComponent<Props, never> {
+export class EventListener extends React.PureComponent<
+  EventListenerProps,
+  never
+> {
   componentDidMount() {
     this.attachListener();
   }
 
-  componentDidUpdate({passive, ...detachProps}: Props) {
+  componentDidUpdate({passive, ...detachProps}: EventListenerProps) {
     this.detachListener(detachProps);
     this.attachListener();
   }
diff --git a/src/components/EventListener/index.ts b/src/components/EventListener/index.ts
index 2eef0ee06a4..41c7243b23d 100644
--- a/src/components/EventListener/index.ts
+++ b/src/components/EventListener/index.ts
@@ -1,4 +1 @@
-import EventListener from './EventListener';
-
-export {Props} from './EventListener';
-export default EventListener;
+export {EventListener, EventListenerProps} from './EventListener';
diff --git a/src/components/EventListener/tests/EventListener.test.tsx b/src/components/EventListener/tests/EventListener.test.tsx
index 4c171cdd203..9bb87cd3f54 100644
--- a/src/components/EventListener/tests/EventListener.test.tsx
+++ b/src/components/EventListener/tests/EventListener.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import EventListener from '../EventListener';
+import {EventListener} from '../EventListener';
 
 describe('<EventListener />', () => {
   it('calls handler when the resize event is fired', () => {
diff --git a/src/components/ExceptionList/ExceptionList.tsx b/src/components/ExceptionList/ExceptionList.tsx
index 6def562927d..e5890844585 100644
--- a/src/components/ExceptionList/ExceptionList.tsx
+++ b/src/components/ExceptionList/ExceptionList.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import {classNames, variationName} from '../../utilities/css';
 
-import Icon from '../Icon';
+import {Icon} from '../Icon';
 import {IconProps} from '../../types';
-import Truncate from '../Truncate';
+import {Truncate} from '../Truncate';
 
 import styles from './ExceptionList.scss';
 
@@ -25,12 +25,12 @@ export interface Item {
   truncate?: boolean;
 }
 
-export interface Props {
+export interface ExceptionListProps {
   /** Collection of items for list */
   items: Item[];
 }
 
-export default function ExceptionList({items: itemsList}: Props) {
+export function ExceptionList({items: itemsList}: ExceptionListProps) {
   const items = itemsList.map((item, index) => {
     const {status, icon, title, description, truncate = false} = item;
 
diff --git a/src/components/ExceptionList/index.ts b/src/components/ExceptionList/index.ts
index 7f0685c28f7..bef160ee34e 100644
--- a/src/components/ExceptionList/index.ts
+++ b/src/components/ExceptionList/index.ts
@@ -1,4 +1 @@
-import ExceptionList from './ExceptionList';
-
-export {Props} from './ExceptionList';
-export default ExceptionList;
+export {ExceptionList, ExceptionListProps} from './ExceptionList';
diff --git a/src/components/ExceptionList/tests/ExceptionList.test.tsx b/src/components/ExceptionList/tests/ExceptionList.test.tsx
index a089c01d731..ab0369d4c51 100644
--- a/src/components/ExceptionList/tests/ExceptionList.test.tsx
+++ b/src/components/ExceptionList/tests/ExceptionList.test.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import {CirclePlusMinor, NoteMinor} from '@shopify/polaris-icons';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Icon} from 'components';
-import ExceptionList from '../ExceptionList';
-import Truncate from '../../Truncate';
+import {ExceptionList} from '../ExceptionList';
+import {Truncate} from '../../Truncate';
 
 describe('<ExceptionList />', () => {
   it('renders its items', () => {
diff --git a/src/components/Filters/Filters.tsx b/src/components/Filters/Filters.tsx
index 77f19b1fbf5..16cc4923cd3 100644
--- a/src/components/Filters/Filters.tsx
+++ b/src/components/Filters/Filters.tsx
@@ -13,29 +13,29 @@ import {
   WithAppProviderProps,
 } from '../../utilities/with-app-provider';
 import {ResourceListContext} from '../../utilities/resource-list';
-import Button from '../Button';
-import DisplayText from '../DisplayText';
-import Collapsible from '../Collapsible';
-import Scrollable from '../Scrollable';
-import ScrollLock from '../ScrollLock';
-import Icon from '../Icon';
-import TextField from '../TextField';
-import Tag from '../Tag';
-import EventListener from '../EventListener';
-import TextStyle from '../TextStyle';
-import Badge from '../Badge';
-import Focus from '../Focus';
-import Sheet from '../Sheet';
-import Stack from '../Stack';
+import {Button} from '../Button';
+import {DisplayText} from '../DisplayText';
+import {Collapsible} from '../Collapsible';
+import {Scrollable} from '../Scrollable';
+import {ScrollLock} from '../ScrollLock';
+import {Icon} from '../Icon';
+import {TextField} from '../TextField';
+import {Tag} from '../Tag';
+import {EventListener} from '../EventListener';
+import {TextStyle} from '../TextStyle';
+import {Badge} from '../Badge';
+import {Focus} from '../Focus';
+import {Sheet} from '../Sheet';
+import {Stack} from '../Stack';
 import {Key} from '../../types';
 
 import {navigationBarCollapsed} from '../../utilities/breakpoints';
-import KeypressListener from '../KeypressListener';
+import {KeypressListener} from '../KeypressListener';
 import {ConnectedFilterControl, PopoverableAction} from './components';
 
 import styles from './Filters.scss';
 
-export interface AppliedFilter {
+export interface AppliedFilterInterface {
   /** A unique key used to identify the applied filter */
   key: string;
   /** A label for the applied filter */
@@ -44,7 +44,7 @@ export interface AppliedFilter {
   onRemove(key: string): void;
 }
 
-export interface Filter {
+export interface FilterInterface {
   /** A unique key used to identify the filter */
   key: string;
   /** The label for the filter */
@@ -55,7 +55,7 @@ export interface Filter {
   shortcut?: boolean;
 }
 
-export interface Props {
+export interface FiltersProps {
   /** Currently entered text in the query field */
   queryValue?: string;
   /** Placeholder text for the query field */
@@ -63,9 +63,9 @@ export interface Props {
   /** Whether the query field is focused */
   focused?: boolean;
   /** Available filters added to the sheet. Shortcut filters are exposed outside of the sheet. */
-  filters: Filter[];
+  filters: FilterInterface[];
   /** Applied filters which are rendered as tags. The remove callback is called with the respective key */
-  appliedFilters?: AppliedFilter[];
+  appliedFilters?: AppliedFilterInterface[];
   /** Callback when the query field is changed */
   onQueryChange(queryValue: string): void;
   /** Callback when the clear button is triggered */
@@ -80,7 +80,7 @@ export interface Props {
   children?: React.ReactNode;
 }
 
-type ComposedProps = Props & WithAppProviderProps;
+type ComposedProps = FiltersProps & WithAppProviderProps;
 
 interface State {
   open: boolean;
@@ -458,7 +458,9 @@ class Filters extends React.Component<ComposedProps, State> {
     }
   }
 
-  private transformFilters(filters: Filter[]): PopoverableAction[] | null {
+  private transformFilters(
+    filters: FilterInterface[],
+  ): PopoverableAction[] | null {
     const transformedActions: PopoverableAction[] = [];
 
     getShortcutFilters(filters).forEach((filter) => {
@@ -475,7 +477,7 @@ class Filters extends React.Component<ComposedProps, State> {
     return transformedActions;
   }
 
-  private generateFilterMarkup(filter: Filter) {
+  private generateFilterMarkup(filter: FilterInterface) {
     const intl = this.props.polaris.intl;
     const removeCallback = this.getAppliedFilterRemoveHandler(filter.key);
     const removeHandler =
@@ -508,8 +510,10 @@ function isMobile(): boolean {
   return navigationBarCollapsed().matches;
 }
 
-function getShortcutFilters(filters: Filter[]) {
+function getShortcutFilters(filters: FilterInterface[]) {
   return filters.filter((filter) => filter.shortcut === true);
 }
 
-export default withAppProvider<Props>()(Filters);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<FiltersProps>()(Filters);
diff --git a/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx b/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx
index f906058e745..438ca917100 100644
--- a/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx
+++ b/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx
@@ -3,9 +3,9 @@ import debounce from 'lodash/debounce';
 import {classNames} from '../../../../utilities/css';
 
 import {Action, BaseAction} from '../../../../types';
-import Popover from '../../../Popover';
-import Button from '../../../Button';
-import EventListener from '../../../EventListener';
+import {Popover} from '../../../Popover';
+import {Button} from '../../../Button';
+import {EventListener} from '../../../EventListener';
 import {Item} from './components';
 
 import styles from './ConnectedFilterControl.scss';
@@ -18,7 +18,7 @@ export interface PopoverableAction extends Action {
   onAction(): void;
 }
 
-export interface Props {
+export interface ConnectedFilterControlProps {
   children: React.ReactNode;
   rightPopoverableActions?: PopoverableAction[] | null;
   rightAction?: React.ReactNode;
@@ -35,10 +35,11 @@ interface State {
 }
 
 export const FILTER_FIELD_MIN_WIDTH = 150;
+
 export const FILTER_FIELD_CUSTOM_PROPERTY = '--textfield-min-width';
 
-export default class ConnectedFilterControl extends React.Component<
-  Props,
+export class ConnectedFilterControl extends React.Component<
+  ConnectedFilterControlProps,
   State
 > {
   state: State = {
diff --git a/src/components/Filters/components/ConnectedFilterControl/components/Item/Item.tsx b/src/components/Filters/components/ConnectedFilterControl/components/Item/Item.tsx
index f097cad5110..fd8b295eb37 100644
--- a/src/components/Filters/components/ConnectedFilterControl/components/Item/Item.tsx
+++ b/src/components/Filters/components/ConnectedFilterControl/components/Item/Item.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {classNames} from '../../../../../../utilities/css';
 import styles from '../../ConnectedFilterControl.scss';
 
-export interface Props {
+interface ItemProps {
   children?: React.ReactNode;
 }
 
@@ -10,7 +10,7 @@ interface State {
   focused: boolean;
 }
 
-export default class Item extends React.PureComponent<Props, State> {
+export class Item extends React.PureComponent<ItemProps, State> {
   state: State = {focused: false};
 
   render() {
diff --git a/src/components/Filters/components/ConnectedFilterControl/components/Item/index.ts b/src/components/Filters/components/ConnectedFilterControl/components/Item/index.ts
index 01ed425e2fd..374108f2e57 100644
--- a/src/components/Filters/components/ConnectedFilterControl/components/Item/index.ts
+++ b/src/components/Filters/components/ConnectedFilterControl/components/Item/index.ts
@@ -1,3 +1 @@
-import Item from './Item';
-
-export default Item;
+export {Item} from './Item';
diff --git a/src/components/Filters/components/ConnectedFilterControl/components/Item/tests/Item.test.tsx b/src/components/Filters/components/ConnectedFilterControl/components/Item/tests/Item.test.tsx
index 0fef5562262..94ec0a686d4 100644
--- a/src/components/Filters/components/ConnectedFilterControl/components/Item/tests/Item.test.tsx
+++ b/src/components/Filters/components/ConnectedFilterControl/components/Item/tests/Item.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
-import Item from '../Item';
+import {Item} from '../Item';
 
 describe('<Item />', () => {
   it('handles focus', () => {
diff --git a/src/components/Filters/components/ConnectedFilterControl/components/index.ts b/src/components/Filters/components/ConnectedFilterControl/components/index.ts
index 0b556f1ab34..374108f2e57 100644
--- a/src/components/Filters/components/ConnectedFilterControl/components/index.ts
+++ b/src/components/Filters/components/ConnectedFilterControl/components/index.ts
@@ -1 +1 @@
-export {default as Item} from './Item';
+export {Item} from './Item';
diff --git a/src/components/Filters/components/ConnectedFilterControl/index.ts b/src/components/Filters/components/ConnectedFilterControl/index.ts
index 52be243ded0..23cb57aff61 100644
--- a/src/components/Filters/components/ConnectedFilterControl/index.ts
+++ b/src/components/Filters/components/ConnectedFilterControl/index.ts
@@ -1,8 +1,5 @@
-import ConnectedFilterControl from './ConnectedFilterControl';
-
 export {
-  Props as ConnectedFilterControlProps,
+  ConnectedFilterControl,
+  ConnectedFilterControlProps,
   PopoverableAction,
 } from './ConnectedFilterControl';
-
-export default ConnectedFilterControl;
diff --git a/src/components/Filters/components/ConnectedFilterControl/tests/ConnectedFilterControl.test.tsx b/src/components/Filters/components/ConnectedFilterControl/tests/ConnectedFilterControl.test.tsx
index d8a240d59d3..ef3dbe809ba 100644
--- a/src/components/Filters/components/ConnectedFilterControl/tests/ConnectedFilterControl.test.tsx
+++ b/src/components/Filters/components/ConnectedFilterControl/tests/ConnectedFilterControl.test.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 import {Popover, Button} from 'components';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 
-import ConnectedFilterControl, {
+import {
+  ConnectedFilterControl,
   PopoverableAction,
 } from '../ConnectedFilterControl';
 
diff --git a/src/components/Filters/components/index.ts b/src/components/Filters/components/index.ts
index a81eb526575..23cb57aff61 100644
--- a/src/components/Filters/components/index.ts
+++ b/src/components/Filters/components/index.ts
@@ -1,5 +1,5 @@
 export {
-  default as ConnectedFilterControl,
+  ConnectedFilterControl,
   ConnectedFilterControlProps,
   PopoverableAction,
 } from './ConnectedFilterControl';
diff --git a/src/components/Filters/index.ts b/src/components/Filters/index.ts
index f62c845c138..6d0c7979e20 100644
--- a/src/components/Filters/index.ts
+++ b/src/components/Filters/index.ts
@@ -1,4 +1,7 @@
-import Filters from './Filters';
+import Filters, {
+  FiltersProps,
+  AppliedFilterInterface,
+  FilterInterface,
+} from './Filters';
 
-export * from './Filters';
-export default Filters;
+export {Filters, FiltersProps, AppliedFilterInterface, FilterInterface};
diff --git a/src/components/Filters/tests/Filters.test.tsx b/src/components/Filters/tests/Filters.test.tsx
index 35075bf5e52..89e5a7b4084 100644
--- a/src/components/Filters/tests/Filters.test.tsx
+++ b/src/components/Filters/tests/Filters.test.tsx
@@ -9,12 +9,12 @@ import {
   findByTestID,
 } from 'test-utilities/legacy';
 
-import Filters, {Props} from '../Filters';
+import Filters, {FiltersProps} from '../Filters';
 import {ConnectedFilterControl} from '../components';
 
 const MockFilter = (props: {id: string}) => <div id={props.id} />;
 const MockChild = () => <div />;
-const mockProps: Props = {
+const mockProps: FiltersProps = {
   onQueryChange: noop,
   onQueryClear: noop,
   onClearAll: noop,
@@ -162,7 +162,7 @@ describe('<Filters />', () => {
   });
 
   describe('<ConnectedFilterControl />', () => {
-    const mockPropsWithShortcuts: Props = {
+    const mockPropsWithShortcuts: FiltersProps = {
       onQueryChange: noop,
       onQueryClear: noop,
       onClearAll: noop,
diff --git a/src/components/Focus/Focus.tsx b/src/components/Focus/Focus.tsx
index 6d570f39013..0024e510704 100644
--- a/src/components/Focus/Focus.tsx
+++ b/src/components/Focus/Focus.tsx
@@ -2,18 +2,18 @@ import React from 'react';
 import {focusFirstFocusableNode} from '@shopify/javascript-utilities/focus';
 import isEqual from 'lodash/isEqual';
 
-export interface Props {
+export interface FocusProps {
   children?: React.ReactNode;
   disabled?: boolean;
   root: HTMLElement | null;
 }
 
-export default class Focus extends React.PureComponent<Props, never> {
+export class Focus extends React.PureComponent<FocusProps, never> {
   componentDidMount() {
     this.handleSelfFocus();
   }
 
-  componentDidUpdate({children: prevChildren, ...restPrevProps}: Props) {
+  componentDidUpdate({children: prevChildren, ...restPrevProps}: FocusProps) {
     const {children, ...restProps} = this.props;
 
     if (isEqual(restProps, restPrevProps)) {
diff --git a/src/components/Focus/index.ts b/src/components/Focus/index.ts
index 367774fc1d9..a2acf13b6fa 100644
--- a/src/components/Focus/index.ts
+++ b/src/components/Focus/index.ts
@@ -1,5 +1 @@
-import Focus from './Focus';
-
-export * from './Focus';
-export {Props} from './Focus';
-export default Focus;
+export {Focus, FocusProps} from './Focus';
diff --git a/src/components/Focus/tests/Focus.test.tsx b/src/components/Focus/tests/Focus.test.tsx
index 8c89f06e292..e966973e63f 100644
--- a/src/components/Focus/tests/Focus.test.tsx
+++ b/src/components/Focus/tests/Focus.test.tsx
@@ -1,6 +1,6 @@
 import React, {useRef, useState, useEffect} from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Focus, {Props} from '../Focus';
+import {Focus, FocusProps} from '../Focus';
 import {Discard} from '../../../types';
 
 describe('<Focus />', () => {
@@ -43,7 +43,7 @@ describe('<Focus />', () => {
   });
 });
 
-function FocusTestWrapper({children, ...props}: Discard<Props, 'root'>) {
+function FocusTestWrapper({children, ...props}: Discard<FocusProps, 'root'>) {
   const root = useRef<HTMLDivElement>(null);
   const [, setMount] = useState(false);
 
diff --git a/src/components/FooterHelp/FooterHelp.tsx b/src/components/FooterHelp/FooterHelp.tsx
index 369fdbf533d..7f1d7de7981 100644
--- a/src/components/FooterHelp/FooterHelp.tsx
+++ b/src/components/FooterHelp/FooterHelp.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import {QuestionMarkMajorTwotone} from '@shopify/polaris-icons';
-import Icon from '../Icon';
+import {Icon} from '../Icon';
 import styles from './FooterHelp.scss';
 
-export interface Props {
+export interface FooterHelpProps {
   /** The content to display inside the layout. */
   children?: React.ReactNode;
 }
 
-export default function FooterHelp({children}: Props) {
+export function FooterHelp({children}: FooterHelpProps) {
   return (
     <div className={styles.FooterHelp}>
       <div className={styles.Content}>
diff --git a/src/components/FooterHelp/index.ts b/src/components/FooterHelp/index.ts
index c70bf9eef82..dba0b23390c 100644
--- a/src/components/FooterHelp/index.ts
+++ b/src/components/FooterHelp/index.ts
@@ -1,4 +1 @@
-import FooterHelp from './FooterHelp';
-
-export {Props} from './FooterHelp';
-export default FooterHelp;
+export {FooterHelp, FooterHelpProps} from './FooterHelp';
diff --git a/src/components/FooterHelp/tests/FooterHelp.test.tsx b/src/components/FooterHelp/tests/FooterHelp.test.tsx
index 1d5aaff4de0..f498b908af7 100644
--- a/src/components/FooterHelp/tests/FooterHelp.test.tsx
+++ b/src/components/FooterHelp/tests/FooterHelp.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {QuestionMarkMajorTwotone} from '@shopify/polaris-icons';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Icon} from 'components';
-import FooterHelp from '../FooterHelp';
+import {FooterHelp} from '../FooterHelp';
 
 describe('<FooterHelp />', () => {
   let children: string;
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index ccf386e2a5d..56bab8fe2b4 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import VisuallyHidden from '../VisuallyHidden';
+import {VisuallyHidden} from '../VisuallyHidden';
 import {
   withAppProvider,
   WithAppProviderProps,
@@ -10,10 +10,12 @@ export type Enctype =
   | 'application/x-www-form-urlencoded'
   | 'multipart/form-data'
   | 'text/plain';
+
 export type Method = 'post' | 'get' | 'action';
+
 export type Target = '_blank' | '_self' | '_parent' | '_top' | string;
 
-export interface Props {
+export interface FormProps {
   /** Space separated list of character encodings */
   acceptCharset?: string;
   /** Where to send form-data on submittal */
@@ -40,7 +42,7 @@ export interface Props {
   onSubmit(event: React.FormEvent<HTMLFormElement>): void;
 }
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = FormProps & WithAppProviderProps;
 
 class Form extends React.PureComponent<CombinedProps, never> {
   render() {
@@ -105,4 +107,6 @@ function normalizeAutoComplete(autoComplete?: boolean) {
   return autoComplete ? 'on' : 'off';
 }
 
-export default withAppProvider<Props>()(Form);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<FormProps>()(Form);
diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts
index a3cb2cc467f..231b5d017d3 100644
--- a/src/components/Form/index.ts
+++ b/src/components/Form/index.ts
@@ -1,4 +1,3 @@
-import Form from './Form';
+import Form, {FormProps, Enctype, Method, Target} from './Form';
 
-export * from './Form';
-export default Form;
+export {Form, FormProps, Enctype, Method, Target};
diff --git a/src/components/FormLayout/FormLayout.tsx b/src/components/FormLayout/FormLayout.tsx
index 1c62d0b61b7..c2055764d82 100644
--- a/src/components/FormLayout/FormLayout.tsx
+++ b/src/components/FormLayout/FormLayout.tsx
@@ -4,12 +4,12 @@ import {wrapWithComponent, isElementOfType} from '../../utilities/components';
 import {Group, Item} from './components';
 import styles from './FormLayout.scss';
 
-export interface Props {
+export interface FormLayoutProps {
   /** The content to display inside the layout. */
   children?: React.ReactNode;
 }
 
-export default class FormLayout extends React.PureComponent<Props, never> {
+export class FormLayout extends React.PureComponent<FormLayoutProps, never> {
   static Group = Group;
 
   render() {
diff --git a/src/components/FormLayout/components/Group/Group.tsx b/src/components/FormLayout/components/Group/Group.tsx
index 4bb22cd31ef..232fc2a043c 100644
--- a/src/components/FormLayout/components/Group/Group.tsx
+++ b/src/components/FormLayout/components/Group/Group.tsx
@@ -4,9 +4,9 @@ import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 import {classNames} from '../../../../utilities/css';
 import {wrapWithComponent} from '../../../../utilities/components';
 import styles from '../../FormLayout.scss';
-import Item from '../Item';
+import {Item} from '../Item';
 
-export interface Props {
+export interface GroupProps {
   children?: React.ReactNode;
   condensed?: boolean;
   title?: string;
@@ -15,7 +15,7 @@ export interface Props {
 
 const getUniqueID = createUniqueIDFactory('FormLayoutGroup');
 
-export default function Group({children, condensed, title, helpText}: Props) {
+export function Group({children, condensed, title, helpText}: GroupProps) {
   const className = classNames(condensed ? styles.condensed : styles.grouped);
 
   const id = getUniqueID();
diff --git a/src/components/FormLayout/components/Group/index.ts b/src/components/FormLayout/components/Group/index.ts
index e0c6b0e1389..e367408634a 100644
--- a/src/components/FormLayout/components/Group/index.ts
+++ b/src/components/FormLayout/components/Group/index.ts
@@ -1,4 +1 @@
-import Group from './Group';
-
-export {Props} from './Group';
-export default Group;
+export {Group, GroupProps} from './Group';
diff --git a/src/components/FormLayout/components/Group/tests/Group.test.tsx b/src/components/FormLayout/components/Group/tests/Group.test.tsx
index 65e7182cfbf..1f2d68613eb 100644
--- a/src/components/FormLayout/components/Group/tests/Group.test.tsx
+++ b/src/components/FormLayout/components/Group/tests/Group.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {TextField} from 'components';
-import Group from '../Group';
+import {Group} from '../Group';
 
 describe('<Group />', () => {
   let children: React.ReactNode;
diff --git a/src/components/FormLayout/components/Item/Item.tsx b/src/components/FormLayout/components/Item/Item.tsx
index ef6b14190a8..778820bef1a 100644
--- a/src/components/FormLayout/components/Item/Item.tsx
+++ b/src/components/FormLayout/components/Item/Item.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import styles from '../../FormLayout.scss';
 
-export interface Props {
+export interface ItemProps {
   children?: React.ReactNode;
 }
 
-export default function Item(props: Props) {
+export function Item(props: ItemProps) {
   return <div className={styles.Item}>{props.children}</div>;
 }
diff --git a/src/components/FormLayout/components/Item/index.ts b/src/components/FormLayout/components/Item/index.ts
index 02c0b0e1951..e158f53cc0d 100644
--- a/src/components/FormLayout/components/Item/index.ts
+++ b/src/components/FormLayout/components/Item/index.ts
@@ -1,4 +1 @@
-import Item from './Item';
-
-export {Props} from './Item';
-export default Item;
+export {Item, ItemProps} from './Item';
diff --git a/src/components/FormLayout/components/Item/tests/Item.test.tsx b/src/components/FormLayout/components/Item/tests/Item.test.tsx
index 5b9c3561c6b..56fb409989c 100644
--- a/src/components/FormLayout/components/Item/tests/Item.test.tsx
+++ b/src/components/FormLayout/components/Item/tests/Item.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {TextField} from 'components';
-import Item from '../Item';
+import {Item} from '../Item';
 
 describe('<Item />', () => {
   it('renders its children', () => {
diff --git a/src/components/FormLayout/components/index.ts b/src/components/FormLayout/components/index.ts
index 948c6286f21..9c8af724502 100644
--- a/src/components/FormLayout/components/index.ts
+++ b/src/components/FormLayout/components/index.ts
@@ -1,3 +1,3 @@
-export {default as Group, Props as GroupProps} from './Group';
+export {Group, GroupProps} from './Group';
 
-export {default as Item, Props as ItemProps} from './Item';
+export {Item, ItemProps} from './Item';
diff --git a/src/components/FormLayout/index.ts b/src/components/FormLayout/index.ts
index 734017738a3..25aa30f8b88 100644
--- a/src/components/FormLayout/index.ts
+++ b/src/components/FormLayout/index.ts
@@ -1,4 +1 @@
-import FormLayout from './FormLayout';
-
-export {Props} from './FormLayout';
-export default FormLayout;
+export {FormLayout, FormLayoutProps} from './FormLayout';
diff --git a/src/components/FormLayout/tests/FormLayout.test.tsx b/src/components/FormLayout/tests/FormLayout.test.tsx
index c3f4111a217..3752a98069b 100644
--- a/src/components/FormLayout/tests/FormLayout.test.tsx
+++ b/src/components/FormLayout/tests/FormLayout.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {TextField} from 'components';
-import FormLayout from '../FormLayout';
+import {FormLayout} from '../FormLayout';
 
 describe('<FormLayout />', () => {
   it('renders its children', () => {
diff --git a/src/components/Frame/Frame.tsx b/src/components/Frame/Frame.tsx
index ea356fc66af..969241895b1 100644
--- a/src/components/Frame/Frame.tsx
+++ b/src/components/Frame/Frame.tsx
@@ -4,14 +4,14 @@ import {durationSlow} from '@shopify/polaris-tokens';
 import {CSSTransition} from '@material-ui/react-transition-group';
 import {classNames} from '../../utilities/css';
 import {navigationBarCollapsed} from '../../utilities/breakpoints';
-import Icon from '../Icon';
-import EventListener from '../EventListener';
+import {Icon} from '../Icon';
+import {EventListener} from '../EventListener';
 import {
   withAppProvider,
   WithAppProviderProps,
 } from '../../utilities/with-app-provider';
-import Backdrop from '../Backdrop';
-import TrapFocus from '../TrapFocus';
+import {Backdrop} from '../Backdrop';
+import {TrapFocus} from '../TrapFocus';
 import {dataPolarisTopBar, layer} from '../shared';
 import {setRootProperty} from '../../utilities/set-root-property';
 import {
@@ -30,7 +30,7 @@ import {
 
 import styles from './Frame.scss';
 
-export interface Props {
+export interface FrameProps {
   /** The content to display inside the frame. */
   children?: React.ReactNode;
   /** Accepts a top bar component that will be rendered at the top-most portion of an application frame */
@@ -57,13 +57,16 @@ interface State {
 }
 
 export const GLOBAL_RIBBON_CUSTOM_PROPERTY = '--global-ribbon-height';
+
 export const APP_FRAME_MAIN = 'AppFrameMain';
+
 export const APP_FRAME_MAIN_ANCHOR_TARGET = 'AppFrameMainContent';
+
 const APP_FRAME_NAV = 'AppFrameNav';
 const APP_FRAME_TOP_BAR = 'AppFrameTopBar';
 const APP_FRAME_LOADING_BAR = 'AppFrameLoadingBar';
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = FrameProps & WithAppProviderProps;
 
 class Frame extends React.PureComponent<CombinedProps, State> {
   state: State = {
@@ -88,7 +91,7 @@ class Frame extends React.PureComponent<CombinedProps, State> {
     this.setGlobalRibbonRootProperty();
   }
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps: FrameProps) {
     if (this.props.globalRibbon !== prevProps.globalRibbon) {
       this.setGlobalRibbonHeight();
     }
@@ -411,4 +414,6 @@ function isMobileView() {
   return navigationBarCollapsed().matches;
 }
 
-export default withAppProvider<Props>()(Frame);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<FrameProps>()(Frame);
diff --git a/src/components/Frame/components/CSSAnimation/CSSAnimation.tsx b/src/components/Frame/components/CSSAnimation/CSSAnimation.tsx
index e1e4c4364dc..f902eb49cd6 100644
--- a/src/components/Frame/components/CSSAnimation/CSSAnimation.tsx
+++ b/src/components/Frame/components/CSSAnimation/CSSAnimation.tsx
@@ -7,7 +7,7 @@ export enum AnimationType {
   Fade = 'fade',
 }
 
-export interface Props {
+export interface CSSAnimationProps {
   in: boolean;
   className: string;
   type: AnimationType;
@@ -21,12 +21,12 @@ enum TransitionStatus {
   Exited = 'exited',
 }
 
-export default function Collapsible({
+export function CSSAnimation({
   in: inProp,
   className,
   type,
   children,
-}: Props) {
+}: CSSAnimationProps) {
   const [transitionStatus, setTransitionStatus] = useState(
     inProp ? TransitionStatus.Entering : TransitionStatus.Exited,
   );
diff --git a/src/components/Frame/components/CSSAnimation/index.ts b/src/components/Frame/components/CSSAnimation/index.ts
index 942b2b02863..6d70b67eaa2 100644
--- a/src/components/Frame/components/CSSAnimation/index.ts
+++ b/src/components/Frame/components/CSSAnimation/index.ts
@@ -1 +1 @@
-export {default, AnimationType} from './CSSAnimation';
+export {CSSAnimation, AnimationType} from './CSSAnimation';
diff --git a/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx b/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx
index 09f8326b5a9..95918f65d62 100644
--- a/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx
+++ b/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx
@@ -2,20 +2,20 @@ import React from 'react';
 
 import {getWidth} from '../../../../utilities/get-width';
 
-import {ContextualSaveBarProps as Props} from '../../../../utilities/frame';
+import {ContextualSaveBarProps} from '../../../../utilities/frame';
 import {
   withAppProvider,
   WithAppProviderProps,
 } from '../../../../utilities/with-app-provider';
-import Button from '../../../Button';
-import Image from '../../../Image';
-import Stack from '../../../Stack';
+import {Button} from '../../../Button';
+import {Image} from '../../../Image';
+import {Stack} from '../../../Stack';
 
 import {DiscardConfirmationModal} from './components';
 
 import styles from './ContextualSaveBar.scss';
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = ContextualSaveBarProps & WithAppProviderProps;
 
 interface State {
   discardConfirmationModalVisible: boolean;
@@ -140,4 +140,6 @@ class ContextualSaveBar extends React.PureComponent<CombinedProps, State> {
   };
 }
 
-export default withAppProvider<Props>()(ContextualSaveBar);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<ContextualSaveBarProps>()(ContextualSaveBar);
diff --git a/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx b/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx
index c5e9169e41c..dfad0915cf8 100644
--- a/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx
+++ b/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx
@@ -1,19 +1,19 @@
 import React from 'react';
 
 import {useI18n} from '../../../../../../utilities/i18n';
-import Modal from '../../../../../Modal';
+import {Modal} from '../../../../../Modal';
 
-export interface Props {
+export interface DiscardConfirmationModalProps {
   open: boolean;
   onDiscard(): void;
   onCancel(): void;
 }
 
-export default function DiscardConfirmationModal({
+export function DiscardConfirmationModal({
   open,
   onDiscard,
   onCancel,
-}: Props) {
+}: DiscardConfirmationModalProps) {
   const intl = useI18n();
 
   return (
diff --git a/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/index.ts b/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/index.ts
index 5baa29fb195..69cc6bcc1d9 100644
--- a/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/index.ts
+++ b/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/index.ts
@@ -1,4 +1,4 @@
-import DiscardConfirmationModal from './DiscardConfirmationModal';
-
-export {Props} from './DiscardConfirmationModal';
-export default DiscardConfirmationModal;
+export {
+  DiscardConfirmationModal,
+  DiscardConfirmationModalProps,
+} from './DiscardConfirmationModal';
diff --git a/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/tests/DiscardConfirmationModal.test.tsx b/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/tests/DiscardConfirmationModal.test.tsx
index 2a61943dc65..69a395e267e 100644
--- a/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/tests/DiscardConfirmationModal.test.tsx
+++ b/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/tests/DiscardConfirmationModal.test.tsx
@@ -4,7 +4,7 @@ import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 
 import {Modal} from 'components';
 
-import DiscardConfirmationModal from '../DiscardConfirmationModal';
+import {DiscardConfirmationModal} from '../DiscardConfirmationModal';
 
 describe('<DiscardConfirmationModal />', () => {
   it('passes its open prop value to the Modal', () => {
diff --git a/src/components/Frame/components/ContextualSaveBar/components/index.ts b/src/components/Frame/components/ContextualSaveBar/components/index.ts
index de597b4aa26..69cc6bcc1d9 100644
--- a/src/components/Frame/components/ContextualSaveBar/components/index.ts
+++ b/src/components/Frame/components/ContextualSaveBar/components/index.ts
@@ -1,4 +1,4 @@
 export {
-  default as DiscardConfirmationModal,
-  Props as TDiscardConfirmationModalProps,
+  DiscardConfirmationModal,
+  DiscardConfirmationModalProps,
 } from './DiscardConfirmationModal';
diff --git a/src/components/Frame/components/ContextualSaveBar/index.ts b/src/components/Frame/components/ContextualSaveBar/index.ts
index abfd294fe06..4e105cade86 100644
--- a/src/components/Frame/components/ContextualSaveBar/index.ts
+++ b/src/components/Frame/components/ContextualSaveBar/index.ts
@@ -1,3 +1,3 @@
 import ContextualSaveBar from './ContextualSaveBar';
 
-export default ContextualSaveBar;
+export {ContextualSaveBar};
diff --git a/src/components/Frame/components/Loading/Loading.tsx b/src/components/Frame/components/Loading/Loading.tsx
index 81f38c1c946..736c33b7b0a 100644
--- a/src/components/Frame/components/Loading/Loading.tsx
+++ b/src/components/Frame/components/Loading/Loading.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import debounce from 'lodash/debounce';
 import styles from './Loading.scss';
 
-export interface Props {}
+export interface LoadingProps {}
 
 interface State {
   progress: number;
@@ -13,7 +13,7 @@ interface State {
 const INITIAL_STEP = 10;
 const STUCK_THRESHOLD = 99;
 
-export default class Loading extends React.Component<Props, State> {
+export class Loading extends React.Component<LoadingProps, State> {
   state: State = {
     progress: 0,
     step: INITIAL_STEP,
diff --git a/src/components/Frame/components/Loading/index.ts b/src/components/Frame/components/Loading/index.ts
index 88902d9c593..2d49cfe791f 100644
--- a/src/components/Frame/components/Loading/index.ts
+++ b/src/components/Frame/components/Loading/index.ts
@@ -1,7 +1 @@
-// This path comment acts as a unique ID
-// https://github.com/Shopify/sewing-kit/issues/590
-// @polaris/components/Frame/components/Loading/index.ts
-import Loading from './Loading';
-
-export {Props} from './Loading';
-export default Loading;
+export {Loading, LoadingProps} from './Loading';
diff --git a/src/components/Frame/components/Loading/tests/Loading.test.tsx b/src/components/Frame/components/Loading/tests/Loading.test.tsx
index 9a618ba4b46..a1b76e458d6 100644
--- a/src/components/Frame/components/Loading/tests/Loading.test.tsx
+++ b/src/components/Frame/components/Loading/tests/Loading.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Loading from '../Loading';
+import {Loading} from '../Loading';
 
 describe('<Loading />', () => {
   const loading = mountWithAppProvider(<Loading />);
diff --git a/src/components/Frame/components/Toast/Toast.tsx b/src/components/Frame/components/Toast/Toast.tsx
index 0add97165bd..9f1c115d30e 100644
--- a/src/components/Frame/components/Toast/Toast.tsx
+++ b/src/components/Frame/components/Toast/Toast.tsx
@@ -3,18 +3,21 @@ import {MobileCancelMajorMonotone} from '@shopify/polaris-icons';
 
 import {classNames} from '../../../../utilities/css';
 import {Key} from '../../../../types';
-import Button from '../../../Button';
+import {Button} from '../../../Button';
 
-import Icon from '../../../Icon';
-import KeypressListener from '../../../KeypressListener';
-import {ToastProps as Props} from '../../../../utilities/frame';
+import {Icon} from '../../../Icon';
+import {KeypressListener} from '../../../KeypressListener';
+import {ToastProps} from '../../../../utilities/frame';
 
 import styles from './Toast.scss';
 
+export {ToastProps};
+
 export const DEFAULT_TOAST_DURATION = 5000;
+
 export const DEFAULT_TOAST_DURATION_WITH_ACTION = 10000;
 
-export default class Toast extends React.Component<Props, never> {
+export class Toast extends React.Component<ToastProps, never> {
   private timer?: number;
 
   componentDidUpdate() {
diff --git a/src/components/Frame/components/Toast/index.ts b/src/components/Frame/components/Toast/index.ts
index 57d5c2f2b9d..ca34b50dc78 100644
--- a/src/components/Frame/components/Toast/index.ts
+++ b/src/components/Frame/components/Toast/index.ts
@@ -1,5 +1,6 @@
 export {
-  default,
+  Toast,
+  ToastProps,
   DEFAULT_TOAST_DURATION,
   DEFAULT_TOAST_DURATION_WITH_ACTION,
 } from './Toast';
diff --git a/src/components/Frame/components/Toast/tests/Toast.test.tsx b/src/components/Frame/components/Toast/tests/Toast.test.tsx
index 7f7d1a0071a..22085d3188d 100644
--- a/src/components/Frame/components/Toast/tests/Toast.test.tsx
+++ b/src/components/Frame/components/Toast/tests/Toast.test.tsx
@@ -5,9 +5,8 @@ import {
   trigger,
   findByTestID,
 } from 'test-utilities/legacy';
-import Button from '../../../../Button';
-import {ToastProps as Props} from '../../../../../utilities/frame';
-import Toast from '../Toast';
+import {Button} from '../../../../Button';
+import {Toast, ToastProps} from '../Toast';
 import {Key} from '../../../../../types';
 
 interface HandlerMap {
@@ -15,7 +14,7 @@ interface HandlerMap {
 }
 
 describe('<Toast />', () => {
-  const mockProps: Props = {
+  const mockProps: ToastProps = {
     content: 'Image uploaded',
     onDismiss: noop,
   };
diff --git a/src/components/Frame/components/ToastManager/ToastManager.tsx b/src/components/Frame/components/ToastManager/ToastManager.tsx
index 92da2a31673..02695e97c8c 100644
--- a/src/components/Frame/components/ToastManager/ToastManager.tsx
+++ b/src/components/Frame/components/ToastManager/ToastManager.tsx
@@ -4,20 +4,25 @@ import {
   CSSTransition,
 } from '@material-ui/react-transition-group';
 import {classNames} from '../../../../utilities/css';
-import EventListener from '../../../EventListener';
-import Portal from '../../../Portal';
+import {EventListener} from '../../../EventListener';
+import {Portal} from '../../../Portal';
 import {ToastPropsWithID} from '../../../../utilities/frame';
-import Toast from '../Toast';
+import {Toast} from '../Toast';
 import {useDeepEffect} from '../../../../utilities/use-deep-effect';
 import {useDeepCallback} from '../../../../utilities/use-deep-callback';
 
 import styles from './ToastManager.scss';
 
-export interface Props {
+export interface ToastManagerProps {
   toastMessages: (ToastPropsWithID)[];
 }
 
-function ToastManager({toastMessages}: Props) {
+// This does have a display name, but the linting has a bug in it
+// https://github.com/yannickcr/eslint-plugin-react/issues/2324
+// eslint-disable-next-line react/display-name
+export const ToastManager = memo(function ToastManager({
+  toastMessages,
+}: ToastManagerProps) {
   const toastNodes: React.RefObject<HTMLDivElement>[] = [];
 
   const updateToasts = useDeepCallback(
@@ -77,12 +82,10 @@ function ToastManager({toastMessages}: Props) {
   function findDOMNode(index: number) {
     return () => toastNodes[index].current;
   }
-}
+});
 
 const toastClasses = {
   enter: classNames(styles.ToastWrapper, styles['ToastWrapper-enter']),
   enterDone: classNames(styles.ToastWrapper, styles['ToastWrapper-enter-done']),
   exit: classNames(styles.ToastWrapper, styles['ToastWrapper-exit']),
 };
-
-export default memo(ToastManager);
diff --git a/src/components/Frame/components/ToastManager/index.ts b/src/components/Frame/components/ToastManager/index.ts
index 973707deb6a..47afef2b5ae 100644
--- a/src/components/Frame/components/ToastManager/index.ts
+++ b/src/components/Frame/components/ToastManager/index.ts
@@ -1,4 +1 @@
-import ToastManager from './ToastManager';
-
-export {Props} from './ToastManager';
-export default ToastManager;
+export {ToastManager, ToastManagerProps} from './ToastManager';
diff --git a/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx b/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx
index 05eff1c9647..607a528e89f 100644
--- a/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx
+++ b/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import {timer} from '@shopify/jest-dom-mocks';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Toast from '../../Toast';
+import {Toast} from '../../Toast';
 import Frame from '../../../Frame';
-import ToastManager from '..';
+import {ToastManager} from '..';
 
 window.matchMedia =
   window.matchMedia ||
diff --git a/src/components/Frame/components/index.ts b/src/components/Frame/components/index.ts
index 6b364c7170f..507163e4956 100644
--- a/src/components/Frame/components/index.ts
+++ b/src/components/Frame/components/index.ts
@@ -1,12 +1,13 @@
 export {
-  default as Toast,
+  Toast,
   DEFAULT_TOAST_DURATION,
   DEFAULT_TOAST_DURATION_WITH_ACTION,
 } from './Toast';
-export {
-  default as ToastManager,
-  Props as ToastManagerProps,
-} from './ToastManager';
-export {default as Loading, Props as LoadingProps} from './Loading';
-export {default as ContextualSaveBar} from './ContextualSaveBar';
-export {default as CSSAnimation, AnimationType} from './CSSAnimation';
+
+export {ToastManager, ToastManagerProps} from './ToastManager';
+
+export {Loading, LoadingProps} from './Loading';
+
+export {ContextualSaveBar} from './ContextualSaveBar';
+
+export {CSSAnimation, AnimationType} from './CSSAnimation';
diff --git a/src/components/Frame/index.ts b/src/components/Frame/index.ts
index e0203e1122e..5c0e5343228 100644
--- a/src/components/Frame/index.ts
+++ b/src/components/Frame/index.ts
@@ -1,10 +1,8 @@
-import Frame from './Frame';
+import Frame, {FrameProps} from './Frame';
 
-export {Props} from './Frame';
+export {Frame, FrameProps};
 
 export {
   DEFAULT_TOAST_DURATION,
   DEFAULT_TOAST_DURATION_WITH_ACTION,
 } from './components';
-
-export default Frame;
diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx
index 38d27f89ea7..ad4322cfdcd 100644
--- a/src/components/Heading/Heading.tsx
+++ b/src/components/Heading/Heading.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {HeadingTagName} from '../../types';
 import styles from './Heading.scss';
 
-export interface Props {
+export interface HeadingProps {
   /**
    * The element name to use for the heading
    * @default 'h2'
@@ -12,6 +12,6 @@ export interface Props {
   children?: React.ReactNode;
 }
 
-export default function Heading({element: Element = 'h2', children}: Props) {
+export function Heading({element: Element = 'h2', children}: HeadingProps) {
   return <Element className={styles.Heading}>{children}</Element>;
 }
diff --git a/src/components/Heading/index.ts b/src/components/Heading/index.ts
index a2d811d6546..d8af20c48af 100644
--- a/src/components/Heading/index.ts
+++ b/src/components/Heading/index.ts
@@ -1,4 +1 @@
-import Heading from './Heading';
-
-export {Props} from './Heading';
-export default Heading;
+export {Heading, HeadingProps} from './Heading';
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 122f83cd725..a051c7550f4 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -19,12 +19,7 @@ const COLORS_WITH_BACKDROPS = [
 // styleguide to generate the props explorer
 interface Props extends IconProps {}
 
-export default function Icon({
-  source,
-  color,
-  backdrop,
-  accessibilityLabel,
-}: Props) {
+export function Icon({source, color, backdrop, accessibilityLabel}: Props) {
   const intl = useI18n();
 
   if (color && backdrop && COLORS_WITH_BACKDROPS.indexOf(color) < 0) {
diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts
index 311b1a2397a..88877629b8d 100644
--- a/src/components/Icon/index.ts
+++ b/src/components/Icon/index.ts
@@ -1,3 +1 @@
-import Icon from './Icon';
-
-export default Icon;
+export {Icon} from './Icon';
diff --git a/src/components/Icon/tests/Icon.test.tsx b/src/components/Icon/tests/Icon.test.tsx
index 611edce3bc9..c3bf06296d3 100644
--- a/src/components/Icon/tests/Icon.test.tsx
+++ b/src/components/Icon/tests/Icon.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {PlusMinor} from '@shopify/polaris-icons';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Icon from '../Icon';
+import {Icon} from '../Icon';
 
 describe('<Icon />', () => {
   describe('accessibilityLabel', () => {
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
index c74bdfd50a5..ef79119fb07 100644
--- a/src/components/Image/Image.tsx
+++ b/src/components/Image/Image.tsx
@@ -7,7 +7,7 @@ export interface SourceSet {
 
 export type CrossOrigin = 'anonymous' | 'use-credentials' | '' | undefined;
 
-export interface Props extends React.HTMLProps<HTMLImageElement> {
+export interface ImageProps extends React.HTMLProps<HTMLImageElement> {
   alt: string;
   source: string;
   sourceSet?: SourceSet[];
@@ -15,12 +15,7 @@ export interface Props extends React.HTMLProps<HTMLImageElement> {
   onError?(): void;
 }
 
-export default function Image({
-  sourceSet,
-  source,
-  crossOrigin,
-  ...rest
-}: Props) {
+export function Image({sourceSet, source, crossOrigin, ...rest}: ImageProps) {
   const finalSourceSet = sourceSet
     ? sourceSet
         .map(({source: subSource, descriptor}) => `${subSource} ${descriptor}`)
diff --git a/src/components/Image/index.ts b/src/components/Image/index.ts
index d73c9de334c..7c54d3fbee5 100644
--- a/src/components/Image/index.ts
+++ b/src/components/Image/index.ts
@@ -1,4 +1 @@
-import Image from './Image';
-
-export {Props} from './Image';
-export default Image;
+export {Image, ImageProps} from './Image';
diff --git a/src/components/Image/tests/Image.test.tsx b/src/components/Image/tests/Image.test.tsx
index 7004f086382..45f3cfc3f4f 100644
--- a/src/components/Image/tests/Image.test.tsx
+++ b/src/components/Image/tests/Image.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
-import Image, {SourceSet} from '../Image';
+import {Image, SourceSet} from '../Image';
 
 describe('<Image />', () => {
   describe('img attributes', () => {
diff --git a/src/components/Indicator/Indicator.tsx b/src/components/Indicator/Indicator.tsx
index 97a62b0c6f3..bf78f466980 100644
--- a/src/components/Indicator/Indicator.tsx
+++ b/src/components/Indicator/Indicator.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import {classNames} from '../../utilities/css';
 import styles from './Indicator.scss';
 
-export interface Props {
+export interface IndicatorProps {
   pulse?: boolean;
 }
 
-export default function Indicator({pulse = true}: Props) {
+export function Indicator({pulse = true}: IndicatorProps) {
   const className = classNames(
     styles.Indicator,
     pulse && styles.pulseIndicator,
diff --git a/src/components/Indicator/index.ts b/src/components/Indicator/index.ts
index e6635df2176..21a229e25ad 100644
--- a/src/components/Indicator/index.ts
+++ b/src/components/Indicator/index.ts
@@ -1,4 +1 @@
-import Indicator from './Indicator';
-
-export {Props} from './Indicator';
-export default Indicator;
+export {Indicator, IndicatorProps} from './Indicator';
diff --git a/src/components/Indicator/tests/Indicator.test.tsx b/src/components/Indicator/tests/Indicator.test.tsx
index f2aa4b7f39e..87f5805d92c 100644
--- a/src/components/Indicator/tests/Indicator.test.tsx
+++ b/src/components/Indicator/tests/Indicator.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Indicator from '../Indicator';
+import {Indicator} from '../Indicator';
 
 describe('<Indicator />', () => {
   describe('accessibilityLabel', () => {
diff --git a/src/components/InlineError/InlineError.tsx b/src/components/InlineError/InlineError.tsx
index 90cc0167366..56c5d4eb240 100644
--- a/src/components/InlineError/InlineError.tsx
+++ b/src/components/InlineError/InlineError.tsx
@@ -1,19 +1,19 @@
 import React from 'react';
 import {AlertMinor} from '@shopify/polaris-icons';
 
-import Icon from '../Icon';
+import {Icon} from '../Icon';
 import {Error} from '../../types';
 
 import styles from './InlineError.scss';
 
-export interface Props {
+export interface InlineErrorProps {
   /** Content briefly explaining how to resolve the invalid form field input. */
   message: Error;
   /** Unique identifier of the invalid form field that the message describes */
   fieldID: string;
 }
 
-export default function InlineError({message, fieldID}: Props) {
+export function InlineError({message, fieldID}: InlineErrorProps) {
   if (!message) {
     return null;
   }
diff --git a/src/components/InlineError/index.ts b/src/components/InlineError/index.ts
index c82836073b8..d498c5d79a5 100644
--- a/src/components/InlineError/index.ts
+++ b/src/components/InlineError/index.ts
@@ -1,4 +1 @@
-import InlineError from './InlineError';
-
-export {Props, errorTextID} from './InlineError';
-export default InlineError;
+export {InlineError, InlineErrorProps, errorTextID} from './InlineError';
diff --git a/src/components/InlineError/tests/InlineError.test.tsx b/src/components/InlineError/tests/InlineError.test.tsx
index 7bc57af7b9e..b3d2778b8b8 100644
--- a/src/components/InlineError/tests/InlineError.test.tsx
+++ b/src/components/InlineError/tests/InlineError.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import InlineError, {errorTextID} from '../InlineError';
+import {InlineError, errorTextID} from '../InlineError';
 
 describe('<InlineError />', () => {
   describe('fieldID', () => {
diff --git a/src/components/KeyboardKey/KeyboardKey.tsx b/src/components/KeyboardKey/KeyboardKey.tsx
index 67470c1b485..91148b892e5 100644
--- a/src/components/KeyboardKey/KeyboardKey.tsx
+++ b/src/components/KeyboardKey/KeyboardKey.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import styles from './KeyboardKey.scss';
 
-export interface Props {
+export interface KeyboardKeyProps {
   /** The content to display inside the key */
   children?: string;
 }
 
-export default function KeyboardKey({children}: Props) {
+export function KeyboardKey({children}: KeyboardKeyProps) {
   let key = children || '';
   key = key.length > 1 ? key.toLowerCase() : key.toUpperCase();
 
diff --git a/src/components/KeyboardKey/index.ts b/src/components/KeyboardKey/index.ts
index df5411c0e29..b5202bd5747 100644
--- a/src/components/KeyboardKey/index.ts
+++ b/src/components/KeyboardKey/index.ts
@@ -1,4 +1 @@
-import KeyboardKey from './KeyboardKey';
-
-export {Props} from './KeyboardKey';
-export default KeyboardKey;
+export {KeyboardKey, KeyboardKeyProps} from './KeyboardKey';
diff --git a/src/components/KeyboardKey/tests/KeyboardKey.test.tsx b/src/components/KeyboardKey/tests/KeyboardKey.test.tsx
index c4184c306fd..6d644ddf226 100644
--- a/src/components/KeyboardKey/tests/KeyboardKey.test.tsx
+++ b/src/components/KeyboardKey/tests/KeyboardKey.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import KeyboardKey from '../KeyboardKey';
+import {KeyboardKey} from '../KeyboardKey';
 
 describe('<KeyboardKey />', () => {
   it('renders a kbd element', () => {
diff --git a/src/components/KeypressListener/KeypressListener.tsx b/src/components/KeypressListener/KeypressListener.tsx
index d84de62addd..f41002932bd 100644
--- a/src/components/KeypressListener/KeypressListener.tsx
+++ b/src/components/KeypressListener/KeypressListener.tsx
@@ -5,12 +5,15 @@ import {
 } from '@shopify/javascript-utilities/events';
 import {Key} from '../../types';
 
-export interface Props {
+export interface KeypressListenerProps {
   keyCode: Key;
   handler(event: KeyboardEvent): void;
 }
 
-export default class KeypressListener extends React.Component<Props, never> {
+export class KeypressListener extends React.Component<
+  KeypressListenerProps,
+  never
+> {
   componentDidMount() {
     addEventListener(document, 'keyup', this.handleKeyEvent);
   }
diff --git a/src/components/KeypressListener/index.ts b/src/components/KeypressListener/index.ts
index c099325a489..d2b686572a8 100644
--- a/src/components/KeypressListener/index.ts
+++ b/src/components/KeypressListener/index.ts
@@ -1,4 +1 @@
-import KeypressListener from './KeypressListener';
-
-export {Props} from './KeypressListener';
-export default KeypressListener;
+export {KeypressListener, KeypressListenerProps} from './KeypressListener';
diff --git a/src/components/KeypressListener/tests/KeypressListener.test.tsx b/src/components/KeypressListener/tests/KeypressListener.test.tsx
index b6c7d8d9403..86ae1b51771 100644
--- a/src/components/KeypressListener/tests/KeypressListener.test.tsx
+++ b/src/components/KeypressListener/tests/KeypressListener.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Key} from '../../../types';
-import KeypressListener from '../KeypressListener';
+import {KeypressListener} from '../KeypressListener';
 
 interface HandlerMap {
   [eventName: string]: any;
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 6d9e3df9419..dbadda71f53 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -3,7 +3,7 @@ import {classNames} from '../../utilities/css';
 
 import styles from './Label.scss';
 
-export interface Props {
+export interface LabelProps {
   /** Label content */
   children?: string;
   /** A unique identifier for the label */
@@ -16,7 +16,7 @@ export function labelID(id: string) {
   return `${id}Label`;
 }
 
-export default function Label({children, id, hidden}: Props) {
+export function Label({children, id, hidden}: LabelProps) {
   const className = classNames(styles.Label, hidden && styles.hidden);
 
   return (
diff --git a/src/components/Label/index.ts b/src/components/Label/index.ts
index 3babcd9d912..0003c980b33 100644
--- a/src/components/Label/index.ts
+++ b/src/components/Label/index.ts
@@ -1,4 +1 @@
-import Label from './Label';
-
-export {Props, labelID} from './Label';
-export default Label;
+export {Label, LabelProps, labelID} from './Label';
diff --git a/src/components/Label/tests/Label.test.tsx b/src/components/Label/tests/Label.test.tsx
index 4d3695d51af..92074ea2d2d 100644
--- a/src/components/Label/tests/Label.test.tsx
+++ b/src/components/Label/tests/Label.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Label, {labelID} from '../Label';
+import {Label, labelID} from '../Label';
 
 describe('<Label />', () => {
   describe('id', () => {
diff --git a/src/components/Labelled/Labelled.tsx b/src/components/Labelled/Labelled.tsx
index edcd9cdadf8..c36faadff93 100644
--- a/src/components/Labelled/Labelled.tsx
+++ b/src/components/Labelled/Labelled.tsx
@@ -4,14 +4,14 @@ import {classNames} from '../../utilities/css';
 import {Action, Error} from '../../types';
 
 import {buttonFrom} from '../Button';
-import Label, {Props as LabelProps, labelID} from '../Label';
-import InlineError from '../InlineError';
+import {Label, LabelProps, labelID} from '../Label';
+import {InlineError} from '../InlineError';
 
 import styles from './Labelled.scss';
 
 export {Action, labelID};
 
-export interface Props {
+export interface LabelledProps {
   /** A unique identifier for the label */
   id: LabelProps['id'];
   /** Text for the label */
@@ -28,7 +28,7 @@ export interface Props {
   labelHidden?: boolean;
 }
 
-export default function Labelled({
+export function Labelled({
   id,
   label,
   error,
@@ -37,7 +37,7 @@ export default function Labelled({
   children,
   labelHidden,
   ...rest
-}: Props) {
+}: LabelledProps) {
   const className = classNames(labelHidden && styles.hidden);
 
   const actionMarkup = action ? (
diff --git a/src/components/Labelled/index.ts b/src/components/Labelled/index.ts
index a1538e607d7..6117c54c70a 100644
--- a/src/components/Labelled/index.ts
+++ b/src/components/Labelled/index.ts
@@ -1,4 +1,8 @@
-import Labelled from './Labelled';
-
-export {Props, Action, labelID, errorID, helpTextID} from './Labelled';
-export default Labelled;
+export {
+  Labelled,
+  LabelledProps,
+  Action,
+  labelID,
+  errorID,
+  helpTextID,
+} from './Labelled';
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index 518bb9ce988..f86eaad6c93 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 import {AnnotatedSection, Section} from './components';
 import styles from './Layout.scss';
 
-export interface Props {
+export interface LayoutProps {
   /** Automatically adds sections to layout. */
   sectioned?: boolean;
   /** The content to display inside the layout. */
   children?: React.ReactNode;
 }
 
-export default class Layout extends React.Component<Props, never> {
+export class Layout extends React.Component<LayoutProps, never> {
   static AnnotatedSection = AnnotatedSection;
   static Section = Section;
 
diff --git a/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx b/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx
index 140a11a731c..4d791966178 100644
--- a/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx
+++ b/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import Heading from '../../../Heading';
-import TextContainer from '../../../TextContainer';
+import {Heading} from '../../../Heading';
+import {TextContainer} from '../../../TextContainer';
 import styles from '../../Layout.scss';
 
-export interface Props {
+export interface AnnotatedSectionProps {
   children?: React.ReactNode;
   title?: React.ReactNode;
   description?: React.ReactNode;
 }
 
-export default function AnnotatedSection(props: Props) {
+export function AnnotatedSection(props: AnnotatedSectionProps) {
   const {children, title, description} = props;
 
   const descriptionMarkup =
diff --git a/src/components/Layout/components/AnnotatedSection/index.ts b/src/components/Layout/components/AnnotatedSection/index.ts
index c4f33c490e3..319a27f6878 100644
--- a/src/components/Layout/components/AnnotatedSection/index.ts
+++ b/src/components/Layout/components/AnnotatedSection/index.ts
@@ -1,4 +1 @@
-import AnnotatedSection from './AnnotatedSection';
-
-export {Props} from './AnnotatedSection';
-export default AnnotatedSection;
+export {AnnotatedSection, AnnotatedSectionProps} from './AnnotatedSection';
diff --git a/src/components/Layout/components/Section/Section.tsx b/src/components/Layout/components/Section/Section.tsx
index 1139ddf28ae..5a399242322 100644
--- a/src/components/Layout/components/Section/Section.tsx
+++ b/src/components/Layout/components/Section/Section.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {classNames} from '../../../../utilities/css';
 import styles from '../../Layout.scss';
 
-export interface Props {
+export interface SectionProps {
   children?: React.ReactNode;
   secondary?: boolean;
   fullWidth?: boolean;
@@ -10,13 +10,13 @@ export interface Props {
   oneThird?: boolean;
 }
 
-export default function Section({
+export function Section({
   children,
   secondary,
   fullWidth,
   oneHalf,
   oneThird,
-}: Props) {
+}: SectionProps) {
   const className = classNames(
     styles.Section,
     secondary && styles['Section-secondary'],
diff --git a/src/components/Layout/components/Section/index.ts b/src/components/Layout/components/Section/index.ts
index b147a6e4e4b..344c319971d 100644
--- a/src/components/Layout/components/Section/index.ts
+++ b/src/components/Layout/components/Section/index.ts
@@ -1,4 +1 @@
-import Section from './Section';
-
-export {Props} from './Section';
-export default Section;
+export {Section, SectionProps} from './Section';
diff --git a/src/components/Layout/components/index.ts b/src/components/Layout/components/index.ts
index daefbf3dbca..12ea5c4efdc 100644
--- a/src/components/Layout/components/index.ts
+++ b/src/components/Layout/components/index.ts
@@ -1,6 +1,3 @@
-export {
-  default as AnnotatedSection,
-  Props as AnnotatedSectionProps,
-} from './AnnotatedSection';
+export {AnnotatedSection, AnnotatedSectionProps} from './AnnotatedSection';
 
-export {default as Section, Props as SectionProps} from './Section';
+export {Section, SectionProps} from './Section';
diff --git a/src/components/Layout/index.ts b/src/components/Layout/index.ts
index 2f8dbc91829..0983e7c8c54 100644
--- a/src/components/Layout/index.ts
+++ b/src/components/Layout/index.ts
@@ -1,4 +1 @@
-import Layout from './Layout';
-
-export {Props} from './Layout';
-export default Layout;
+export {Layout, LayoutProps} from './Layout';
diff --git a/src/components/Layout/tests/Layout.test.tsx b/src/components/Layout/tests/Layout.test.tsx
index 502b60b0d02..f288bb6ccab 100644
--- a/src/components/Layout/tests/Layout.test.tsx
+++ b/src/components/Layout/tests/Layout.test.tsx
@@ -5,7 +5,7 @@ import {
   mountWithAppProvider,
 } from 'test-utilities/legacy';
 import {Section} from '../components';
-import Layout from '../Layout';
+import {Layout} from '../Layout';
 
 describe('<Layout />', () => {
   it('renders children', () => {
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
index 3b98efc6448..e49e6f98791 100644
--- a/src/components/Link/Link.tsx
+++ b/src/components/Link/Link.tsx
@@ -4,12 +4,12 @@ import {ExternalSmallMinor} from '@shopify/polaris-icons';
 import {BannerContext} from '../../utilities/banner-context';
 import {classNames} from '../../utilities/css';
 import {useI18n} from '../../utilities/i18n';
-import UnstyledLink from '../UnstyledLink';
-import Icon from '../Icon';
+import {UnstyledLink} from '../UnstyledLink';
+import {Icon} from '../Icon';
 
 import styles from './Link.scss';
 
-export interface Props {
+export interface LinkProps {
   /** ID for the link */
   id?: string;
   /** The url to link to */
@@ -24,14 +24,14 @@ export interface Props {
   onClick?(): void;
 }
 
-export default function Link({
+export function Link({
   url,
   children,
   onClick,
   external,
   id,
   monochrome,
-}: Props) {
+}: LinkProps) {
   const intl = useI18n();
   let childrenMarkup = children;
 
diff --git a/src/components/Link/index.ts b/src/components/Link/index.ts
index 5775963f40f..88890a8968a 100644
--- a/src/components/Link/index.ts
+++ b/src/components/Link/index.ts
@@ -1,4 +1 @@
-import Link from './Link';
-
-export {Props} from './Link';
-export default Link;
+export {Link, LinkProps} from './Link';
diff --git a/src/components/Link/tests/Link.test.tsx b/src/components/Link/tests/Link.test.tsx
index 1e79eb3916e..78d8172a744 100644
--- a/src/components/Link/tests/Link.test.tsx
+++ b/src/components/Link/tests/Link.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Banner, UnstyledLink, Icon} from 'components';
 import en from '../../../../locales/en.json';
-import Link from '../Link';
+import {Link} from '../Link';
 
 describe('<Link />', () => {
   it('calls onClick when clicking', () => {
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 86aa1236de6..6373d9ad3e0 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -5,7 +5,7 @@ import styles from './List.scss';
 
 export type Type = 'bullet' | 'number';
 
-export interface Props {
+export interface ListProps {
   /**
    * Type of list to display
    * @default 'bullet'
@@ -15,7 +15,7 @@ export interface Props {
   children?: React.ReactNode;
 }
 
-export default class List extends React.PureComponent<Props, never> {
+export class List extends React.PureComponent<ListProps, never> {
   static Item = Item;
 
   render() {
diff --git a/src/components/List/components/Item/Item.tsx b/src/components/List/components/Item/Item.tsx
index 1d53261855c..5669372bb13 100644
--- a/src/components/List/components/Item/Item.tsx
+++ b/src/components/List/components/Item/Item.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import styles from '../../List.scss';
 
-export interface Props {
+export interface ItemProps {
   /** Content to display inside the item */
   children?: React.ReactNode;
 }
 
-export default function Item({children}: Props) {
+export function Item({children}: ItemProps) {
   return <li className={styles.Item}>{children}</li>;
 }
diff --git a/src/components/List/components/Item/index.ts b/src/components/List/components/Item/index.ts
index 02c0b0e1951..e158f53cc0d 100644
--- a/src/components/List/components/Item/index.ts
+++ b/src/components/List/components/Item/index.ts
@@ -1,4 +1 @@
-import Item from './Item';
-
-export {Props} from './Item';
-export default Item;
+export {Item, ItemProps} from './Item';
diff --git a/src/components/List/components/Item/tests/Item.test.tsx b/src/components/List/components/Item/tests/Item.test.tsx
index b1a2e0c7ef7..7c08a4fdfb9 100644
--- a/src/components/List/components/Item/tests/Item.test.tsx
+++ b/src/components/List/components/Item/tests/Item.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Item from '../Item';
+import {Item} from '../Item';
 
 describe('<Item />', () => {
   it('renders its children', () => {
diff --git a/src/components/List/components/index.ts b/src/components/List/components/index.ts
index 584c7f5e9a9..e158f53cc0d 100644
--- a/src/components/List/components/index.ts
+++ b/src/components/List/components/index.ts
@@ -1 +1 @@
-export {default as Item, Props as ItemProps} from './Item';
+export {Item, ItemProps} from './Item';
diff --git a/src/components/List/index.ts b/src/components/List/index.ts
index 4cd7c659b3d..066b598fc96 100644
--- a/src/components/List/index.ts
+++ b/src/components/List/index.ts
@@ -1,4 +1 @@
-import List from './List';
-
-export {Props} from './List';
-export default List;
+export {List, ListProps} from './List';
diff --git a/src/components/List/tests/List.test.tsx b/src/components/List/tests/List.test.tsx
index a8d2d03de33..2ad9c4310cb 100644
--- a/src/components/List/tests/List.test.tsx
+++ b/src/components/List/tests/List.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import List from '../List';
+import {List} from '../List';
 
 describe('<List />', () => {
   it('renders its children', () => {
diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
index cdbe6547bb0..3887581b420 100644
--- a/src/components/Loading/Loading.tsx
+++ b/src/components/Loading/Loading.tsx
@@ -3,9 +3,12 @@ import {Loading as AppBridgeLoading} from '@shopify/app-bridge/actions';
 import {useFrame} from '../../utilities/frame';
 import {useAppBridge} from '../../utilities/app-bridge';
 
-export interface Props {}
+export interface LoadingProps {}
 
-function Loading() {
+// This does have a display name, but the linting has a bug in it
+// https://github.com/yannickcr/eslint-plugin-react/issues/2324
+// eslint-disable-next-line react/display-name
+export const Loading = React.memo(function Loading() {
   const appBridgeLoading = useRef<AppBridgeLoading.Loading>();
   const appBridge = useAppBridge();
   const {startLoading, stopLoading} = useFrame();
@@ -37,6 +40,4 @@ function Loading() {
   );
 
   return null;
-}
-
-export default React.memo(Loading);
+});
diff --git a/src/components/Loading/index.ts b/src/components/Loading/index.ts
index ae92928eb97..2d49cfe791f 100644
--- a/src/components/Loading/index.ts
+++ b/src/components/Loading/index.ts
@@ -1,7 +1 @@
-// This path comment acts as a unique ID
-// https://github.com/Shopify/sewing-kit/issues/590
-// @polaris/components/Loading/index.ts
-import Loading from './Loading';
-
-export {Props} from './Loading';
-export default Loading;
+export {Loading, LoadingProps} from './Loading';
diff --git a/src/components/Loading/tests/Loading.test.tsx b/src/components/Loading/tests/Loading.test.tsx
index ceb6fde0350..e3326a75e10 100644
--- a/src/components/Loading/tests/Loading.test.tsx
+++ b/src/components/Loading/tests/Loading.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {Loading as AppBridgeLoading} from '@shopify/app-bridge/actions';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 
-import Loading from '../Loading';
+import {Loading} from '../Loading';
 
 describe('<Loading />', () => {
   beforeEach(() => {
diff --git a/src/components/MessageIndicator/MessageIndicator.tsx b/src/components/MessageIndicator/MessageIndicator.tsx
index f26b1272655..ecbdbacc596 100644
--- a/src/components/MessageIndicator/MessageIndicator.tsx
+++ b/src/components/MessageIndicator/MessageIndicator.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 
 import styles from './MessageIndicator.scss';
 
-export interface Props {
+export interface MessageIndicatorProps {
   children?: React.ReactNode;
   active?: boolean;
 }
 
-export default function MessageIndicator({children, active}: Props) {
+export function MessageIndicator({children, active}: MessageIndicatorProps) {
   const indicatorMarkup = active && (
     <div testID="indicator" className={styles.MessageIndicator} />
   );
diff --git a/src/components/MessageIndicator/index.ts b/src/components/MessageIndicator/index.ts
index f3f7b519d56..39184f2abbe 100644
--- a/src/components/MessageIndicator/index.ts
+++ b/src/components/MessageIndicator/index.ts
@@ -1,4 +1 @@
-import MessageIndicator from './MessageIndicator';
-
-export {Props} from './MessageIndicator';
-export default MessageIndicator;
+export {MessageIndicator, MessageIndicatorProps} from './MessageIndicator';
diff --git a/src/components/MessageIndicator/tests/MessageIndicator.test.tsx b/src/components/MessageIndicator/tests/MessageIndicator.test.tsx
index 5aedc24cd5e..917ebc19162 100644
--- a/src/components/MessageIndicator/tests/MessageIndicator.test.tsx
+++ b/src/components/MessageIndicator/tests/MessageIndicator.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider, findByTestID} from 'test-utilities/legacy';
-import MessageIndicator from '../MessageIndicator';
+import {MessageIndicator} from '../MessageIndicator';
 
 describe('<Indicator />', () => {
   it('mounts', () => {
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 5f6d06723ba..539420c1627 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -15,10 +15,10 @@ import {
   withAppProvider,
   WithAppProviderProps,
 } from '../../utilities/with-app-provider';
-import Backdrop from '../Backdrop';
-import Scrollable from '../Scrollable';
-import Spinner from '../Spinner';
-import Portal from '../Portal';
+import {Backdrop} from '../Backdrop';
+import {Scrollable} from '../Scrollable';
+import {Spinner} from '../Spinner';
+import {Portal} from '../Portal';
 
 import {
   CloseButton,
@@ -35,7 +35,7 @@ const DEFAULT_IFRAME_CONTENT_HEIGHT = 400;
 
 export type Size = 'Small' | 'Medium' | 'Large' | 'Full';
 
-export interface Props extends FooterProps {
+export interface ModalProps extends FooterProps {
   /** Whether the modal is open or not */
   open: boolean;
   /** The url that will be loaded as the content of the modal */
@@ -78,7 +78,7 @@ export interface Props extends FooterProps {
   /** Callback when the bottom of the modal content is reached */
   onScrolledToBottom?(): void;
 }
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = ModalProps & WithAppProviderProps;
 
 interface State {
   iframeHeight: number;
@@ -86,7 +86,7 @@ interface State {
 
 const getUniqueID = createUniqueIDFactory('modal-header');
 
-const APP_BRIDGE_PROPS: (keyof Props)[] = [
+const APP_BRIDGE_PROPS: (keyof ModalProps)[] = [
   'title',
   'size',
   'message',
@@ -407,4 +407,6 @@ function isIframeModal(
   );
 }
 
-export default withAppProvider<Props>()(Modal);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<ModalProps>()(Modal);
diff --git a/src/components/Modal/components/CloseButton/CloseButton.tsx b/src/components/Modal/components/CloseButton/CloseButton.tsx
index 1cbf47e6e2c..5641a8fdf89 100644
--- a/src/components/Modal/components/CloseButton/CloseButton.tsx
+++ b/src/components/Modal/components/CloseButton/CloseButton.tsx
@@ -3,16 +3,16 @@ import {MobileCancelMajorMonotone} from '@shopify/polaris-icons';
 import {classNames} from '../../../../utilities/css';
 import {useI18n} from '../../../../utilities/i18n';
 
-import Icon from '../../../Icon';
+import {Icon} from '../../../Icon';
 
 import styles from './CloseButton.scss';
 
-export interface Props {
+export interface CloseButtonProps {
   title?: boolean;
   onClick(): void;
 }
 
-export default function CloseButton({title = true, onClick}: Props) {
+export function CloseButton({title = true, onClick}: CloseButtonProps) {
   const intl = useI18n();
 
   const className = classNames(
diff --git a/src/components/Modal/components/CloseButton/index.ts b/src/components/Modal/components/CloseButton/index.ts
index 227eac76d8b..17c66f439fe 100644
--- a/src/components/Modal/components/CloseButton/index.ts
+++ b/src/components/Modal/components/CloseButton/index.ts
@@ -1,4 +1 @@
-import CloseButton from './CloseButton';
-
-export {Props as CloseButtonProps} from './CloseButton';
-export default CloseButton;
+export {CloseButton, CloseButtonProps} from './CloseButton';
diff --git a/src/components/Modal/components/Dialog/Dialog.tsx b/src/components/Modal/components/Dialog/Dialog.tsx
index b138923839e..0d3a5cfcff8 100644
--- a/src/components/Modal/components/Dialog/Dialog.tsx
+++ b/src/components/Modal/components/Dialog/Dialog.tsx
@@ -5,12 +5,12 @@ import {classNames} from '../../../../utilities/css';
 
 import {AnimationProps, Key} from '../../../../types';
 
-import KeypressListener from '../../../KeypressListener';
-import TrapFocus from '../../../TrapFocus';
+import {KeypressListener} from '../../../KeypressListener';
+import {TrapFocus} from '../../../TrapFocus';
 
 import styles from './Dialog.scss';
 
-export interface DialogProps {
+export interface BaseDialogProps {
   labelledBy: string;
   instant?: boolean;
   children?: React.ReactNode;
@@ -21,9 +21,9 @@ export interface DialogProps {
   onExited?(): void;
 }
 
-export type Props = DialogProps & AnimationProps;
+export type DialogProps = BaseDialogProps & AnimationProps;
 
-export default function Dialog({
+export function Dialog({
   instant,
   labelledBy,
   children,
@@ -33,7 +33,7 @@ export default function Dialog({
   large,
   limitHeight,
   ...props
-}: Props) {
+}: DialogProps) {
   const containerNode = useRef<HTMLDivElement>(null);
   const findDOMNode = useCallback(() => containerNode.current, []);
   const classes = classNames(
diff --git a/src/components/Modal/components/Dialog/index.ts b/src/components/Modal/components/Dialog/index.ts
index 3d6bec6b3ba..29a21065401 100644
--- a/src/components/Modal/components/Dialog/index.ts
+++ b/src/components/Modal/components/Dialog/index.ts
@@ -1,4 +1 @@
-import Dialog from './Dialog';
-
-export {Props as DialogProps} from './Dialog';
-export default Dialog;
+export {Dialog, DialogProps} from './Dialog';
diff --git a/src/components/Modal/components/Dialog/tests/Dialog.test.tsx b/src/components/Modal/components/Dialog/tests/Dialog.test.tsx
index d4cd5654905..75246f5f2da 100644
--- a/src/components/Modal/components/Dialog/tests/Dialog.test.tsx
+++ b/src/components/Modal/components/Dialog/tests/Dialog.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {animationFrame} from '@shopify/jest-dom-mocks';
 import {trigger, mountWithAppProvider} from 'test-utilities/legacy';
 import {KeypressListener} from 'components';
-import Dialog from '../Dialog';
+import {Dialog} from '../Dialog';
 
 describe('<Dialog>', () => {
   beforeEach(() => {
diff --git a/src/components/Modal/components/Footer/Footer.tsx b/src/components/Modal/components/Footer/Footer.tsx
index 91a84ccb4d6..28cd56ab3c2 100644
--- a/src/components/Modal/components/Footer/Footer.tsx
+++ b/src/components/Modal/components/Footer/Footer.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 
 import {ComplexAction, AppBridgeAction} from '../../../../types';
 import {buttonsFrom} from '../../../Button';
-import ButtonGroup from '../../../ButtonGroup';
-import Stack from '../../../Stack';
+import {ButtonGroup} from '../../../ButtonGroup';
+import {Stack} from '../../../Stack';
 
 import styles from './Footer.scss';
 
-export interface Props {
+export interface FooterProps {
   /** Primary action */
   primaryAction?: AppBridgeAction | ComplexAction;
   /** Collection of secondary actions */
@@ -16,11 +16,11 @@ export interface Props {
   children?: React.ReactNode;
 }
 
-export default function Footer({
+export function Footer({
   primaryAction,
   secondaryActions,
   children,
-}: Props) {
+}: FooterProps) {
   const primaryActionButton =
     (primaryAction && buttonsFrom(primaryAction, {primary: true})) || null;
   const secondaryActionButtons =
diff --git a/src/components/Modal/components/Footer/index.ts b/src/components/Modal/components/Footer/index.ts
index 9bdb2ae29aa..d570734dd6a 100644
--- a/src/components/Modal/components/Footer/index.ts
+++ b/src/components/Modal/components/Footer/index.ts
@@ -1,4 +1 @@
-import Footer from './Footer';
-
-export {Props as FooterProps} from './Footer';
-export default Footer;
+export {Footer, FooterProps} from './Footer';
diff --git a/src/components/Modal/components/Header/Header.tsx b/src/components/Modal/components/Header/Header.tsx
index 1bb445d80b3..98e95e8aa03 100644
--- a/src/components/Modal/components/Header/Header.tsx
+++ b/src/components/Modal/components/Header/Header.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
 
-import DisplayText from '../../../DisplayText';
-import CloseButton from '../CloseButton';
+import {DisplayText} from '../../../DisplayText';
+import {CloseButton} from '../CloseButton';
 
 import styles from './Header.scss';
 
-export interface Props {
+export interface HeaderProps {
   id: string;
   children?: React.ReactNode;
   onClose(): void;
 }
 
-export default function Header({id, children, onClose}: Props) {
+export function Header({id, children, onClose}: HeaderProps) {
   return (
     <div className={styles.Header}>
       <div id={id} className={styles.Title}>
diff --git a/src/components/Modal/components/Header/index.ts b/src/components/Modal/components/Header/index.ts
index 2060baca395..c5990fc6821 100644
--- a/src/components/Modal/components/Header/index.ts
+++ b/src/components/Modal/components/Header/index.ts
@@ -1,4 +1 @@
-import Header from './Header';
-
-export {Props as HeaderProps} from './Header';
-export default Header;
+export {Header, HeaderProps} from './Header';
diff --git a/src/components/Modal/components/Section/Section.tsx b/src/components/Modal/components/Section/Section.tsx
index 16fdeeb5ec7..15a15845999 100644
--- a/src/components/Modal/components/Section/Section.tsx
+++ b/src/components/Modal/components/Section/Section.tsx
@@ -2,17 +2,17 @@ import React from 'react';
 import {classNames} from '../../../../utilities/css';
 import styles from './Section.scss';
 
-export interface Props {
+export interface SectionProps {
   children?: React.ReactNode;
   flush?: boolean;
   subdued?: boolean;
 }
 
-export default function Section({
+export function Section({
   children,
   flush = false,
   subdued = false,
-}: Props) {
+}: SectionProps) {
   const className = classNames(
     styles.Section,
     flush && styles.flush,
diff --git a/src/components/Modal/components/Section/index.ts b/src/components/Modal/components/Section/index.ts
index f3e3882dfe9..344c319971d 100644
--- a/src/components/Modal/components/Section/index.ts
+++ b/src/components/Modal/components/Section/index.ts
@@ -1,4 +1 @@
-import Section from './Section';
-
-export {Props as SectionProps} from './Section';
-export default Section;
+export {Section, SectionProps} from './Section';
diff --git a/src/components/Modal/components/index.ts b/src/components/Modal/components/index.ts
index b2cf05b17c4..11c583533b1 100644
--- a/src/components/Modal/components/index.ts
+++ b/src/components/Modal/components/index.ts
@@ -1,9 +1,9 @@
-export {default as Dialog, DialogProps} from './Dialog';
+export {Dialog, DialogProps} from './Dialog';
 
-export {default as Footer, FooterProps} from './Footer';
+export {Footer, FooterProps} from './Footer';
 
-export {default as Header, HeaderProps} from './Header';
+export {Header, HeaderProps} from './Header';
 
-export {default as CloseButton} from './CloseButton';
+export {CloseButton} from './CloseButton';
 
-export {default as Section, SectionProps} from './Section';
+export {Section, SectionProps} from './Section';
diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
index 2b644d829e6..b902dc305fd 100644
--- a/src/components/Modal/index.ts
+++ b/src/components/Modal/index.ts
@@ -1,4 +1,3 @@
-import Modal from './Modal';
+import Modal, {ModalProps} from './Modal';
 
-export {Props} from './Modal';
-export default Modal;
+export {Modal, ModalProps};
diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
index 18d163c09d8..8892b5143e1 100644
--- a/src/components/Navigation/Navigation.tsx
+++ b/src/components/Navigation/Navigation.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Scrollable from '../Scrollable';
+import {Scrollable} from '../Scrollable';
 
 import {WithinContentContext} from '../../utilities/within-content-context';
 import {NavigationContext} from './context';
@@ -9,7 +9,7 @@ import {SectionType} from './types';
 
 import styles from './Navigation.scss';
 
-export interface Props {
+export interface NavigationProps {
   location: string;
   sections?: SectionType[];
   children?: React.ReactNode;
@@ -17,7 +17,7 @@ export interface Props {
   onDismiss?(): void;
 }
 
-export default class Navigation extends React.Component<Props, never> {
+export class Navigation extends React.Component<NavigationProps, never> {
   static Item = Item;
   static Section = Section;
 
diff --git a/src/components/Navigation/components/Item/Item.tsx b/src/components/Navigation/components/Item/Item.tsx
index bea79912f05..dcb67adad5c 100644
--- a/src/components/Navigation/components/Item/Item.tsx
+++ b/src/components/Navigation/components/Item/Item.tsx
@@ -12,11 +12,11 @@ import {classNames} from '../../../../utilities/css';
 import {navigationBarCollapsed} from '../../../../utilities/breakpoints';
 
 import {NavigationContext} from '../../context';
-import Badge from '../../../Badge';
-import Icon from '../../../Icon';
+import {Badge} from '../../../Badge';
+import {Icon} from '../../../Icon';
 import {IconProps} from '../../../../types';
-import Indicator from '../../../Indicator';
-import UnstyledLink from '../../../UnstyledLink';
+import {Indicator} from '../../../Indicator';
+import {UnstyledLink} from '../../../UnstyledLink';
 import {useI18n} from '../../../../utilities/i18n';
 
 import styles from '../../Navigation.scss';
@@ -45,7 +45,7 @@ interface SecondaryAction {
   icon: IconProps['source'];
 }
 
-export interface Props extends ItemURLDetails {
+export interface ItemProps extends ItemURLDetails {
   icon?: IconProps['source'];
   badge?: ReactNode;
   label: string;
@@ -67,7 +67,7 @@ enum MatchState {
   NoMatch,
 }
 
-export default function Item({
+export function Item({
   url,
   icon,
   label,
@@ -83,7 +83,7 @@ export default function Item({
   exactMatch,
   matchPaths,
   excludePaths,
-}: Props) {
+}: ItemProps) {
   const intl = useI18n();
   const {location, onNavigationDismiss} = useContext(NavigationContext);
   const [expanded, setExpanded] = useState(false);
@@ -276,7 +276,7 @@ export default function Item({
     </li>
   );
 
-  function getClickHandler(onClick: Props['onClick']) {
+  function getClickHandler(onClick: ItemProps['onClick']) {
     return (event: MouseEvent<HTMLElement>) => {
       const {currentTarget} = event;
 
@@ -307,7 +307,7 @@ export default function Item({
 }
 
 export function isNavigationItemActive(
-  navigationItem: Props,
+  navigationItem: ItemProps,
   currentPath: string,
 ) {
   const matchState = matchStateForItem(navigationItem, currentPath);
diff --git a/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx b/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx
index 70bbb0d8290..f175b851db7 100644
--- a/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx
+++ b/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 
-import Collapsible from '../../../../../Collapsible';
+import {Collapsible} from '../../../../../Collapsible';
 
 import styles from '../../../../Navigation.scss';
 
@@ -9,12 +9,12 @@ const createSecondaryNavigationId = createUniqueIDFactory(
   'SecondaryNavigation',
 );
 
-interface Props {
+interface SecondaryProps {
   expanded: boolean;
   children?: React.ReactNode;
 }
 
-export default function Secondary({children, expanded}: Props) {
+export function Secondary({children, expanded}: SecondaryProps) {
   const secondaryNavigationId = createSecondaryNavigationId();
   return (
     <Collapsible id={secondaryNavigationId} open={expanded}>
diff --git a/src/components/Navigation/components/Item/components/Secondary/index.ts b/src/components/Navigation/components/Item/components/Secondary/index.ts
index 8a27b0359e6..d8e2c28080e 100644
--- a/src/components/Navigation/components/Item/components/Secondary/index.ts
+++ b/src/components/Navigation/components/Item/components/Secondary/index.ts
@@ -1,3 +1 @@
-import Secondary from './Secondary';
-
-export default Secondary;
+export {Secondary} from './Secondary';
diff --git a/src/components/Navigation/components/Item/components/Secondary/tests/Secondary.test.tsx b/src/components/Navigation/components/Item/components/Secondary/tests/Secondary.test.tsx
index 887808a0c3b..57b925166e0 100644
--- a/src/components/Navigation/components/Item/components/Secondary/tests/Secondary.test.tsx
+++ b/src/components/Navigation/components/Item/components/Secondary/tests/Secondary.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 
-import Secondary from '../Secondary';
+import {Secondary} from '../Secondary';
 
 describe('Secondary()', () => {
   it('mounts', () => {
diff --git a/src/components/Navigation/components/Item/components/index.ts b/src/components/Navigation/components/Item/components/index.ts
index d8629dc7f80..d8e2c28080e 100644
--- a/src/components/Navigation/components/Item/components/index.ts
+++ b/src/components/Navigation/components/Item/components/index.ts
@@ -1 +1 @@
-export {default as Secondary} from './Secondary';
+export {Secondary} from './Secondary';
diff --git a/src/components/Navigation/components/Item/index.ts b/src/components/Navigation/components/Item/index.ts
index cc79224d29c..fd4f3f90bb6 100644
--- a/src/components/Navigation/components/Item/index.ts
+++ b/src/components/Navigation/components/Item/index.ts
@@ -1,4 +1,6 @@
-import Item from './Item';
-
-export {Props, SubNavigationItem, isNavigationItemActive} from './Item';
-export default Item;
+export {
+  Item,
+  ItemProps,
+  SubNavigationItem,
+  isNavigationItemActive,
+} from './Item';
diff --git a/src/components/Navigation/components/Item/tests/Item.test.tsx b/src/components/Navigation/components/Item/tests/Item.test.tsx
index fbf8eea88e3..1c6b465adc8 100644
--- a/src/components/Navigation/components/Item/tests/Item.test.tsx
+++ b/src/components/Navigation/components/Item/tests/Item.test.tsx
@@ -5,7 +5,7 @@ import {Icon, UnstyledLink, Indicator, Badge} from 'components';
 import {act, trigger, mountWithAppProvider} from 'test-utilities/legacy';
 import {NavigationContext} from '../../../context';
 
-import Item, {Props as ItemProps} from '../Item';
+import {Item, ItemProps} from '../Item';
 import {Secondary} from '../components';
 
 describe('<Nav.Item />', () => {
diff --git a/src/components/Navigation/components/Message/Message.tsx b/src/components/Navigation/components/Message/Message.tsx
index 2b6e0fbe636..fdc690ee1a0 100644
--- a/src/components/Navigation/components/Message/Message.tsx
+++ b/src/components/Navigation/components/Message/Message.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 
-import Badge, {Props as BadgeProps} from '../../../Badge';
-import Button from '../../../Button';
-import Heading from '../../../Heading';
-import Link from '../../../Link';
-import Stack from '../../../Stack';
-import TextContainer from '../../../TextContainer';
+import {Badge, BadgeProps} from '../../../Badge';
+import {Button} from '../../../Button';
+import {Heading} from '../../../Heading';
+import {Link} from '../../../Link';
+import {Stack} from '../../../Stack';
+import {TextContainer} from '../../../TextContainer';
 
 import styles from './Message.scss';
 
-export interface Props {
+export interface MessageProps {
   title: string;
   description: string;
   action: {onClick(): void; content: string};
@@ -17,13 +17,13 @@ export interface Props {
   badge?: {content: string; status: BadgeProps['status']};
 }
 
-export default function Message({
+export function Message({
   title,
   description,
   action,
   link,
   badge,
-}: Props) {
+}: MessageProps) {
   const badgeMarkup = badge && (
     <Badge status={badge.status}>{badge.content}</Badge>
   );
diff --git a/src/components/Navigation/components/Message/index.ts b/src/components/Navigation/components/Message/index.ts
index c97b9d21612..2b1800255e2 100644
--- a/src/components/Navigation/components/Message/index.ts
+++ b/src/components/Navigation/components/Message/index.ts
@@ -1,4 +1 @@
-import Message from './Message';
-
-export {Props} from './Message';
-export default Message;
+export {Message, MessageProps} from './Message';
diff --git a/src/components/Navigation/components/Message/tests/Message.test.tsx b/src/components/Navigation/components/Message/tests/Message.test.tsx
index da52ad85e17..476d66e5455 100644
--- a/src/components/Navigation/components/Message/tests/Message.test.tsx
+++ b/src/components/Navigation/components/Message/tests/Message.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Message from '../Message';
-import Badge from '../../../../Badge';
+import {Message} from '../Message';
+import {Badge} from '../../../../Badge';
 
 const messageProps = {
   title: 'Polaris',
diff --git a/src/components/Navigation/components/Section/Section.tsx b/src/components/Navigation/components/Section/Section.tsx
index b6e0b669eb1..4f450250a34 100644
--- a/src/components/Navigation/components/Section/Section.tsx
+++ b/src/components/Navigation/components/Section/Section.tsx
@@ -4,17 +4,17 @@ import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 
 import {classNames} from '../../../../utilities/css';
 import {navigationBarCollapsed} from '../../../../utilities/breakpoints';
-import Collapsible from '../../../Collapsible';
-import Icon from '../../../Icon';
+import {Collapsible} from '../../../Collapsible';
+import {Icon} from '../../../Icon';
 import {IconProps} from '../../../../types';
 
-import Item, {Props as ItemProps} from '../Item';
+import {Item, ItemProps} from '../Item';
 
 import styles from '../../Navigation.scss';
 
 const createAdditionalItemsId = createUniqueIDFactory('AdditionalItems');
 
-export interface Props {
+export interface SectionProps {
   items: ItemProps[];
   icon?: IconProps['source'];
   title?: string;
@@ -37,7 +37,7 @@ interface State {
   expanded: boolean;
 }
 
-export default class Section extends React.Component<Props, State> {
+export class Section extends React.Component<SectionProps, State> {
   state: State = {
     expanded: false,
   };
diff --git a/src/components/Navigation/components/Section/index.ts b/src/components/Navigation/components/Section/index.ts
index b147a6e4e4b..344c319971d 100644
--- a/src/components/Navigation/components/Section/index.ts
+++ b/src/components/Navigation/components/Section/index.ts
@@ -1,4 +1 @@
-import Section from './Section';
-
-export {Props} from './Section';
-export default Section;
+export {Section, SectionProps} from './Section';
diff --git a/src/components/Navigation/components/Section/tests/Section.test.tsx b/src/components/Navigation/components/Section/tests/Section.test.tsx
index f467c102217..1aa8c0514de 100644
--- a/src/components/Navigation/components/Section/tests/Section.test.tsx
+++ b/src/components/Navigation/components/Section/tests/Section.test.tsx
@@ -7,10 +7,10 @@ import {
   mountWithAppProvider,
 } from 'test-utilities/legacy';
 
-import Collapsible from '../../../../Collapsible';
+import {Collapsible} from '../../../../Collapsible';
 import {NavigationContext} from '../../../context';
-import Item from '../../Item';
-import Section from '../Section';
+import {Item} from '../../Item';
+import {Section} from '../Section';
 
 import channelResults from './fixtures/AdminNavQuery/multiple-channels.json';
 
diff --git a/src/components/Navigation/components/index.ts b/src/components/Navigation/components/index.ts
index 7257a363f51..212a759c1ee 100644
--- a/src/components/Navigation/components/index.ts
+++ b/src/components/Navigation/components/index.ts
@@ -1,3 +1,10 @@
-export {default as Section, Props as SectionProps} from './Section';
-export {default as Item, Props as ItemProps} from './Item';
-export {default as Message, Props as MessageProps} from './Message';
+export {Section, SectionProps} from './Section';
+
+export {
+  Item,
+  ItemProps,
+  SubNavigationItem,
+  isNavigationItemActive,
+} from './Item';
+
+export {Message, MessageProps} from './Message';
diff --git a/src/components/Navigation/index.ts b/src/components/Navigation/index.ts
index bc6a7eac95e..0abd94f9757 100644
--- a/src/components/Navigation/index.ts
+++ b/src/components/Navigation/index.ts
@@ -1,12 +1,8 @@
-import Navigation from './Navigation';
-
-export {Props} from './Navigation';
-export default Navigation;
+export {Navigation, NavigationProps} from './Navigation';
 
 export {
-  Props as ItemProps,
+  ItemProps as NavigationItemProps,
   SubNavigationItem,
   isNavigationItemActive,
-} from './components/Item';
-
-export {MessageProps} from './components';
+  MessageProps as NavigationMessageProps,
+} from './components';
diff --git a/src/components/Navigation/tests/Navigation.test.tsx b/src/components/Navigation/tests/Navigation.test.tsx
index c313c579096..389f8154ce7 100644
--- a/src/components/Navigation/tests/Navigation.test.tsx
+++ b/src/components/Navigation/tests/Navigation.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Navigation from '../Navigation';
+import {Navigation} from '../Navigation';
 import {NavigationContext} from '../context';
 import {WithinContentContext} from '../../../utilities/within-content-context';
 
diff --git a/src/components/OptionList/OptionList.tsx b/src/components/OptionList/OptionList.tsx
index 6ac890f8d91..d10a95b9348 100644
--- a/src/components/OptionList/OptionList.tsx
+++ b/src/components/OptionList/OptionList.tsx
@@ -3,8 +3,8 @@ import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 
 import {arraysAreEqual} from '../../utilities/arrays';
 import {IconProps} from '../../types';
-import {Props as AvatarProps} from '../Avatar';
-import {Props as ThumbnailProps} from '../Thumbnail';
+import {AvatarProps} from '../Avatar';
+import {ThumbnailProps} from '../Thumbnail';
 import {useDeepEffect} from '../../utilities/use-deep-effect';
 
 import {Option} from './components';
@@ -36,7 +36,7 @@ type Descriptor = OptionDescriptor | SectionDescriptor;
 
 const getUniqueId = createUniqueIDFactory('OptionList');
 
-export interface Props {
+export interface OptionListProps {
   /** A unique identifier for the option list */
   id?: string;
   /** List title */
@@ -57,7 +57,7 @@ export interface Props {
   onChange(selected: string[]): void;
 }
 
-export default function OptionList({
+export function OptionList({
   options,
   sections,
   title,
@@ -67,7 +67,7 @@ export default function OptionList({
   optionRole,
   onChange,
   id: propId,
-}: Props) {
+}: OptionListProps) {
   const [normalizedOptions, setNormalizedOptions] = useState(
     createNormalizedOptions(options, sections, title),
   );
diff --git a/src/components/OptionList/components/Checkbox/Checkbox.tsx b/src/components/OptionList/components/Checkbox/Checkbox.tsx
index db6e12a7369..30a6c3a413f 100644
--- a/src/components/OptionList/components/Checkbox/Checkbox.tsx
+++ b/src/components/OptionList/components/Checkbox/Checkbox.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import {TickSmallMinor} from '@shopify/polaris-icons';
 import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 import {classNames} from '../../../../utilities/css';
-import Icon from '../../../Icon';
+import {Icon} from '../../../Icon';
 
 import styles from './Checkbox.scss';
 
-export interface Props {
+export interface CheckboxProps {
   checked?: boolean;
   disabled?: boolean;
   active?: boolean;
@@ -19,7 +19,7 @@ export interface Props {
 
 const getUniqueID = createUniqueIDFactory('Checkbox');
 
-export default function Checkbox({
+export function Checkbox({
   id = getUniqueID(),
   checked = false,
   disabled,
@@ -28,7 +28,7 @@ export default function Checkbox({
   name,
   value,
   role,
-}: Props) {
+}: CheckboxProps) {
   const className = classNames(styles.Checkbox, active && styles.active);
   return (
     <div className={className}>
diff --git a/src/components/OptionList/components/Checkbox/index.ts b/src/components/OptionList/components/Checkbox/index.ts
index 6b3558cad00..71a7d3ef7c3 100644
--- a/src/components/OptionList/components/Checkbox/index.ts
+++ b/src/components/OptionList/components/Checkbox/index.ts
@@ -1,4 +1 @@
-import Checkbox from './Checkbox';
-
-export {Props} from './Checkbox';
-export default Checkbox;
+export {Checkbox, CheckboxProps} from './Checkbox';
diff --git a/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx b/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx
index ce80b6e1aae..b917172864a 100644
--- a/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx
+++ b/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Checkbox, {Props} from '../Checkbox';
+import {Checkbox, CheckboxProps} from '../Checkbox';
 
 describe('<Checkbox />', () => {
-  const defaultProps: Props = {
+  const defaultProps: CheckboxProps = {
     checked: true,
     disabled: false,
     id: 'checkboxId',
diff --git a/src/components/OptionList/components/Option/Option.tsx b/src/components/OptionList/components/Option/Option.tsx
index a98582975e6..a6a5f08370e 100644
--- a/src/components/OptionList/components/Option/Option.tsx
+++ b/src/components/OptionList/components/Option/Option.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 
 import {classNames} from '../../../../utilities/css';
 import {IconProps} from '../../../../types';
-import {Props as ThumbnailProps} from '../../../Thumbnail';
-import {Props as AvatarProps} from '../../../Avatar';
-import Scrollable from '../../../Scrollable';
-import Checkbox from '../Checkbox';
+import {ThumbnailProps} from '../../../Thumbnail';
+import {AvatarProps} from '../../../Avatar';
+import {Scrollable} from '../../../Scrollable';
+import {Checkbox} from '../Checkbox';
 
 import styles from './Option.scss';
 
-export interface Props {
+export interface OptionProps {
   id: string;
   label: React.ReactNode;
   value: string;
@@ -28,7 +28,7 @@ interface State {
   focused: boolean;
 }
 
-export default class Option extends React.Component<Props, State> {
+export class Option extends React.Component<OptionProps, State> {
   state: State = {
     focused: false,
   };
diff --git a/src/components/OptionList/components/Option/index.ts b/src/components/OptionList/components/Option/index.ts
index 27e16f58c8d..cbf67aaa1f2 100644
--- a/src/components/OptionList/components/Option/index.ts
+++ b/src/components/OptionList/components/Option/index.ts
@@ -1,4 +1 @@
-import Option, {Props} from './Option';
-
-export default Option;
-export {Props};
+export {Option, OptionProps} from './Option';
diff --git a/src/components/OptionList/components/Option/tests/Option.test.tsx b/src/components/OptionList/components/Option/tests/Option.test.tsx
index fbc626b8fd3..41c73967290 100644
--- a/src/components/OptionList/components/Option/tests/Option.test.tsx
+++ b/src/components/OptionList/components/Option/tests/Option.test.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Checkbox from '../../Checkbox';
-import Option, {Props} from '../Option';
+import {Checkbox} from '../../Checkbox';
+import {Option, OptionProps} from '../Option';
 
 describe('<Option />', () => {
-  const defaultProps: Props = {
+  const defaultProps: OptionProps = {
     id: 'itemId',
     label: 'Option Item',
     value: 'option_item',
diff --git a/src/components/OptionList/components/index.ts b/src/components/OptionList/components/index.ts
index 28b1bd614fd..9b5408eb6bc 100644
--- a/src/components/OptionList/components/index.ts
+++ b/src/components/OptionList/components/index.ts
@@ -1,2 +1,3 @@
-export {default as Option, Props as OptionProps} from './Option';
-export {default as Checkbox, Props as CheckboxProps} from './Checkbox';
+export {Option, OptionProps} from './Option';
+
+export {Checkbox, CheckboxProps} from './Checkbox';
diff --git a/src/components/OptionList/index.ts b/src/components/OptionList/index.ts
index 435af237518..407446e4126 100644
--- a/src/components/OptionList/index.ts
+++ b/src/components/OptionList/index.ts
@@ -1,5 +1,6 @@
-import OptionList from './OptionList';
-
-export {OptionDescriptor, SectionDescriptor} from './OptionList';
-export {Props} from './OptionList';
-export default OptionList;
+export {
+  OptionList,
+  OptionListProps,
+  OptionDescriptor,
+  SectionDescriptor,
+} from './OptionList';
diff --git a/src/components/OptionList/tests/OptionList.test.tsx b/src/components/OptionList/tests/OptionList.test.tsx
index 66f03aa0631..8c3c21d9d39 100644
--- a/src/components/OptionList/tests/OptionList.test.tsx
+++ b/src/components/OptionList/tests/OptionList.test.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Option} from '../components';
-import OptionList, {
-  Props,
+import {
+  OptionList,
+  OptionListProps,
   OptionDescriptor,
   SectionDescriptor,
 } from '../OptionList';
 
 describe('<OptionList />', () => {
-  const defaultProps: Props = {
+  const defaultProps: OptionListProps = {
     id: 'recommended-products',
     title: 'Recommended products',
     options: [
@@ -60,7 +61,7 @@ describe('<OptionList />', () => {
 
   it('renders options and sections', () => {
     const {options, sections} = defaultProps;
-    const optionWrappers = mountWithAppProvider<Props>(
+    const optionWrappers = mountWithAppProvider<OptionListProps>(
       <OptionList {...defaultProps} />,
     ).find(Option);
 
@@ -70,7 +71,7 @@ describe('<OptionList />', () => {
   it('renders sections', () => {
     const {sections} = defaultProps;
     const options: OptionDescriptor[] = [];
-    const optionWrappers = mountWithAppProvider<Props>(
+    const optionWrappers = mountWithAppProvider<OptionListProps>(
       <OptionList {...defaultProps} options={options} />,
     ).find(Option);
 
@@ -80,7 +81,7 @@ describe('<OptionList />', () => {
   it('renders options', () => {
     const {options} = defaultProps;
     const sections: SectionDescriptor[] = [];
-    const optionWrappers = mountWithAppProvider<Props>(
+    const optionWrappers = mountWithAppProvider<OptionListProps>(
       <OptionList {...defaultProps} sections={sections} />,
     ).find(Option);
 
@@ -89,7 +90,7 @@ describe('<OptionList />', () => {
 
   it('re-renders with new options passed in', () => {
     const {sections} = defaultProps;
-    const optionList = mountWithAppProvider<Props>(
+    const optionList = mountWithAppProvider<OptionListProps>(
       <OptionList {...defaultProps} />,
     );
 
@@ -113,7 +114,7 @@ describe('<OptionList />', () => {
 
   it('re-renders with new sections passed in', () => {
     const {options} = defaultProps;
-    const optionList = mountWithAppProvider<Props>(
+    const optionList = mountWithAppProvider<OptionListProps>(
       <OptionList {...defaultProps} />,
     );
 
@@ -140,7 +141,7 @@ describe('<OptionList />', () => {
   });
 
   it('re-renders with new options and new sections passed in', () => {
-    const optionList = mountWithAppProvider<Props>(
+    const optionList = mountWithAppProvider<OptionListProps>(
       <OptionList {...defaultProps} />,
     );
 
@@ -180,7 +181,7 @@ describe('<OptionList />', () => {
 
   it('re-renders with undefined options', () => {
     const {sections} = defaultProps;
-    const optionList = mountWithAppProvider<Props>(
+    const optionList = mountWithAppProvider<OptionListProps>(
       <OptionList {...defaultProps} />,
     );
 
@@ -192,7 +193,7 @@ describe('<OptionList />', () => {
 
   it('re-renders with undefined sections', () => {
     const {options} = defaultProps;
-    const optionList = mountWithAppProvider<Props>(
+    const optionList = mountWithAppProvider<OptionListProps>(
       <OptionList {...defaultProps} />,
     );
 
@@ -203,7 +204,7 @@ describe('<OptionList />', () => {
   });
 
   it('re-renders with undefined options and new sections', () => {
-    const optionList = mountWithAppProvider<Props>(
+    const optionList = mountWithAppProvider<OptionListProps>(
       <OptionList {...defaultProps} />,
     );
 
@@ -230,7 +231,7 @@ describe('<OptionList />', () => {
   });
 
   it('re-renders with new options and undefined sections', () => {
-    const optionList = mountWithAppProvider<Props>(
+    const optionList = mountWithAppProvider<OptionListProps>(
       <OptionList {...defaultProps} />,
     );
 
@@ -256,7 +257,7 @@ describe('<OptionList />', () => {
     const spy = jest.fn();
     const {options, sections} = defaultProps;
 
-    const buttonWrappers = mountWithAppProvider<Props>(
+    const buttonWrappers = mountWithAppProvider<OptionListProps>(
       <OptionList {...defaultProps} onChange={spy} />,
     ).find('button');
 
@@ -269,7 +270,7 @@ describe('<OptionList />', () => {
   describe('allowMultiple', () => {
     it('renders options and sections', () => {
       const {options, sections} = defaultProps;
-      const optionWrappers = mountWithAppProvider<Props>(
+      const optionWrappers = mountWithAppProvider<OptionListProps>(
         <OptionList {...defaultProps} allowMultiple />,
       ).find(Option);
 
@@ -279,7 +280,7 @@ describe('<OptionList />', () => {
     it('renders sections', () => {
       const {sections} = defaultProps;
       const options: OptionDescriptor[] = [];
-      const optionWrappers = mountWithAppProvider<Props>(
+      const optionWrappers = mountWithAppProvider<OptionListProps>(
         <OptionList {...defaultProps} options={options} allowMultiple />,
       ).find(Option);
 
@@ -289,7 +290,7 @@ describe('<OptionList />', () => {
     it('renders options', () => {
       const {options} = defaultProps;
       const sections: SectionDescriptor[] = [];
-      const optionWrappers = mountWithAppProvider<Props>(
+      const optionWrappers = mountWithAppProvider<OptionListProps>(
         <OptionList {...defaultProps} sections={sections} allowMultiple />,
       ).find(Option);
 
@@ -298,7 +299,7 @@ describe('<OptionList />', () => {
 
     it('re-renders with new options passed in', () => {
       const {sections} = defaultProps;
-      const optionList = mountWithAppProvider<Props>(
+      const optionList = mountWithAppProvider<OptionListProps>(
         <OptionList {...defaultProps} allowMultiple />,
       );
 
@@ -322,7 +323,7 @@ describe('<OptionList />', () => {
 
     it('re-renders with new sections passed in', () => {
       const {options} = defaultProps;
-      const optionList = mountWithAppProvider<Props>(
+      const optionList = mountWithAppProvider<OptionListProps>(
         <OptionList {...defaultProps} allowMultiple />,
       );
 
@@ -349,7 +350,7 @@ describe('<OptionList />', () => {
     });
 
     it('re-renders with new options and new sections passed in', () => {
-      const optionList = mountWithAppProvider<Props>(
+      const optionList = mountWithAppProvider<OptionListProps>(
         <OptionList {...defaultProps} allowMultiple />,
       );
 
@@ -391,7 +392,7 @@ describe('<OptionList />', () => {
 
     it('re-renders with undefined options', () => {
       const {sections} = defaultProps;
-      const optionList = mountWithAppProvider<Props>(
+      const optionList = mountWithAppProvider<OptionListProps>(
         <OptionList {...defaultProps} allowMultiple />,
       );
 
@@ -403,7 +404,7 @@ describe('<OptionList />', () => {
 
     it('re-renders with undefined sections', () => {
       const {options} = defaultProps;
-      const optionList = mountWithAppProvider<Props>(
+      const optionList = mountWithAppProvider<OptionListProps>(
         <OptionList {...defaultProps} allowMultiple />,
       );
 
@@ -414,7 +415,7 @@ describe('<OptionList />', () => {
     });
 
     it('re-renders with undefined options and new sections', () => {
-      const optionList = mountWithAppProvider<Props>(
+      const optionList = mountWithAppProvider<OptionListProps>(
         <OptionList {...defaultProps} allowMultiple />,
       );
 
@@ -441,7 +442,7 @@ describe('<OptionList />', () => {
     });
 
     it('re-renders with new options and undefined sections', () => {
-      const optionList = mountWithAppProvider<Props>(
+      const optionList = mountWithAppProvider<OptionListProps>(
         <OptionList {...defaultProps} allowMultiple />,
       );
 
@@ -468,7 +469,7 @@ describe('<OptionList />', () => {
         const spy = jest.fn();
         const {options, sections} = defaultProps;
 
-        const inputWrappers = mountWithAppProvider<Props>(
+        const inputWrappers = mountWithAppProvider<OptionListProps>(
           <OptionList {...defaultProps} onChange={spy} allowMultiple />,
         ).find('input');
 
@@ -483,7 +484,7 @@ describe('<OptionList />', () => {
         const {options, sections} = defaultProps;
         const selected = ['11', '8'];
 
-        const inputWrappers = mountWithAppProvider<Props>(
+        const inputWrappers = mountWithAppProvider<OptionListProps>(
           <OptionList
             {...defaultProps}
             onChange={spy}
@@ -506,7 +507,7 @@ describe('<OptionList />', () => {
         const {options, sections} = defaultProps;
         const selected = ['10', '8', '5'];
 
-        const inputWrappers = mountWithAppProvider<Props>(
+        const inputWrappers = mountWithAppProvider<OptionListProps>(
           <OptionList
             {...defaultProps}
             onChange={spy}
diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
index 3d9bc5b4d46..f19e7f05f8b 100644
--- a/src/components/Page/Page.tsx
+++ b/src/components/Page/Page.tsx
@@ -19,7 +19,7 @@ import {
 import {Header, HeaderProps} from './components';
 import styles from './Page.scss';
 
-export interface Props extends HeaderProps {
+export interface PageProps extends HeaderProps {
   /** The contents of the page */
   children?: React.ReactNode;
   /** Remove the normal max-width on the page */
@@ -42,9 +42,9 @@ export interface DeprecatedProps {
   singleColumn?: boolean;
 }
 
-export type ComposedProps = Props & DeprecatedProps & WithAppProviderProps;
+export type ComposedProps = PageProps & DeprecatedProps & WithAppProviderProps;
 
-const APP_BRIDGE_PROPS: (keyof Props)[] = [
+const APP_BRIDGE_PROPS: (keyof PageProps)[] = [
   'title',
   'breadcrumbs',
   'secondaryActions',
@@ -203,4 +203,6 @@ class Page extends React.PureComponent<ComposedProps, never> {
   }
 }
 
-export default withAppProvider<Props & DeprecatedProps>()(Page);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<PageProps & DeprecatedProps>()(Page);
diff --git a/src/components/Page/components/Header/Header.tsx b/src/components/Page/components/Header/Header.tsx
index 0a53f109733..3c72a2147c9 100644
--- a/src/components/Page/components/Header/Header.tsx
+++ b/src/components/Page/components/Header/Header.tsx
@@ -3,18 +3,18 @@ import debounce from 'lodash/debounce';
 import {classNames} from '../../../../utilities/css';
 import {buttonsFrom} from '../../../Button';
 import {navigationBarCollapsed} from '../../../../utilities/breakpoints';
-import EventListener from '../../../EventListener';
+import {EventListener} from '../../../EventListener';
 import {ComplexAction, MenuGroupDescriptor} from '../../../../types';
-import Breadcrumbs, {Props as BreadcrumbsProps} from '../../../Breadcrumbs';
+import {Breadcrumbs, BreadcrumbsProps} from '../../../Breadcrumbs';
 
-import Pagination, {PaginationDescriptor} from '../../../Pagination';
-import ActionMenu, {hasGroupsWithActions} from '../../../ActionMenu';
+import {Pagination, PaginationDescriptor} from '../../../Pagination';
+import {ActionMenu, hasGroupsWithActions} from '../../../ActionMenu';
 
 import {HeaderPrimaryAction} from '../../types';
 import {Title, TitleProps} from './components';
 import styles from './Header.scss';
 
-export interface Props extends TitleProps {
+export interface HeaderProps extends TitleProps {
   /** Visually hide the title (stand-alone app use only) */
   titleHidden?: boolean;
   /** Adds a border to the bottom of the page header (stand-alone app use only) */
@@ -35,7 +35,7 @@ interface State {
   mobileView?: boolean;
 }
 
-export default class Header extends React.PureComponent<Props, State> {
+export class Header extends React.PureComponent<HeaderProps, State> {
   state: State = {
     mobileView: isMobileView(),
   };
diff --git a/src/components/Page/components/Header/components/Title/Title.tsx b/src/components/Page/components/Header/components/Title/Title.tsx
index bf512d5573b..fdb3c33a299 100644
--- a/src/components/Page/components/Header/components/Title/Title.tsx
+++ b/src/components/Page/components/Header/components/Title/Title.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import {classNames} from '../../../../../../utilities/css';
-import {Props as AvatarProps} from '../../../../../Avatar';
-import {Props as ThumbnailProps} from '../../../../../Thumbnail';
-import DisplayText from '../../../../../DisplayText';
+import {AvatarProps} from '../../../../../Avatar';
+import {ThumbnailProps} from '../../../../../Thumbnail';
+import {DisplayText} from '../../../../../DisplayText';
 
 import styles from './Title.scss';
 
-export interface Props {
+export interface TitleProps {
   /** Page title, in large type */
   title: string;
   /** Page subtitle, in regular type*/
@@ -19,12 +19,7 @@ export interface Props {
     | React.SFC<React.SVGProps<SVGSVGElement>>;
 }
 
-export default function Title({
-  title,
-  subtitle,
-  titleMetadata,
-  thumbnail,
-}: Props) {
+export function Title({title, subtitle, titleMetadata, thumbnail}: TitleProps) {
   const titleMarkup = (
     <div className={styles.Title}>
       <DisplayText size="large" element="h1">
diff --git a/src/components/Page/components/Header/components/Title/index.ts b/src/components/Page/components/Header/components/Title/index.ts
index 7522c529bb8..61e9a39f3dd 100644
--- a/src/components/Page/components/Header/components/Title/index.ts
+++ b/src/components/Page/components/Header/components/Title/index.ts
@@ -1,4 +1 @@
-import Title from './Title';
-
-export {Props} from './Title';
-export default Title;
+export {Title, TitleProps} from './Title';
diff --git a/src/components/Page/components/Header/components/Title/tests/PageTitle.test.tsx b/src/components/Page/components/Header/components/Title/tests/Title.test.tsx
similarity index 98%
rename from src/components/Page/components/Header/components/Title/tests/PageTitle.test.tsx
rename to src/components/Page/components/Header/components/Title/tests/Title.test.tsx
index ea4db246233..40e2f15c4d0 100644
--- a/src/components/Page/components/Header/components/Title/tests/PageTitle.test.tsx
+++ b/src/components/Page/components/Header/components/Title/tests/Title.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Badge, DisplayText, Avatar} from 'components';
-import Title from '..';
+import {Title} from '../Title';
 
 describe('<Title />', () => {
   const mockProps = {
diff --git a/src/components/Page/components/Header/components/index.ts b/src/components/Page/components/Header/components/index.ts
index d9801d6a218..61e9a39f3dd 100644
--- a/src/components/Page/components/Header/components/index.ts
+++ b/src/components/Page/components/Header/components/index.ts
@@ -1 +1 @@
-export {default as Title, Props as TitleProps} from './Title';
+export {Title, TitleProps} from './Title';
diff --git a/src/components/Page/components/Header/index.ts b/src/components/Page/components/Header/index.ts
index 4794a077104..c5990fc6821 100644
--- a/src/components/Page/components/Header/index.ts
+++ b/src/components/Page/components/Header/index.ts
@@ -1 +1 @@
-export {default, Props} from './Header';
+export {Header, HeaderProps} from './Header';
diff --git a/src/components/Page/components/Header/tests/Header.test.tsx b/src/components/Page/components/Header/tests/Header.test.tsx
index 50ea7591a1e..87d8f8639b7 100644
--- a/src/components/Page/components/Header/tests/Header.test.tsx
+++ b/src/components/Page/components/Header/tests/Header.test.tsx
@@ -12,11 +12,10 @@ import {
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {LinkAction} from '../../../../../types';
 import {HeaderPrimaryAction} from '../../../types';
-import Header, {Props} from '../Header';
-import Title from '..';
+import {Header, HeaderProps} from '../Header';
 
 describe('<Header />', () => {
-  const mockProps: Props = {
+  const mockProps: HeaderProps = {
     title: 'mock title',
   };
 
@@ -37,7 +36,7 @@ describe('<Header />', () => {
     expect(resizeEventListener).toHaveLength(1);
   });
 
-  describe('Title', () => {
+  describe('Header', () => {
     const mockProps = {
       title: 'title',
       subtitle: 'subtitle',
@@ -45,24 +44,24 @@ describe('<Header />', () => {
       thumbnail: <Avatar customer />,
     };
 
-    it('sets the title on the Title', () => {
+    it('sets the title on the Header', () => {
       const header = mountWithAppProvider(<Header {...mockProps} />);
-      expect(header.find(Title).prop('title')).toBe(mockProps.title);
+      expect(header.find(Header).prop('title')).toBe(mockProps.title);
     });
 
-    it('sets the subtitle on the Title', () => {
+    it('sets the subtitle on the Header', () => {
       const header = mountWithAppProvider(<Header {...mockProps} />);
-      expect(header.find(Title).prop('subtitle')).toBe(mockProps.subtitle);
+      expect(header.find(Header).prop('subtitle')).toBe(mockProps.subtitle);
     });
 
-    it('sets the thumbnail on the Title', () => {
+    it('sets the thumbnail on the Header', () => {
       const header = mountWithAppProvider(<Header {...mockProps} />);
-      expect(header.find(Title).prop('thumbnail')).toBe(mockProps.thumbnail);
+      expect(header.find(Header).prop('thumbnail')).toBe(mockProps.thumbnail);
     });
 
-    it('sets the titleMetadata on the Title', () => {
+    it('sets the titleMetadata on the Header', () => {
       const header = mountWithAppProvider(<Header {...mockProps} />);
-      expect(header.find(Title).prop('titleMetadata')).toBe(
+      expect(header.find(Header).prop('titleMetadata')).toBe(
         mockProps.titleMetadata,
       );
     });
@@ -119,7 +118,7 @@ describe('<Header />', () => {
   });
 
   describe('secondaryActions', () => {
-    const mockSecondaryActions: Props['secondaryActions'] = [
+    const mockSecondaryActions: HeaderProps['secondaryActions'] = [
       {content: 'mock content 1'},
       {content: 'mock content 2'},
     ];
@@ -136,11 +135,11 @@ describe('<Header />', () => {
   });
 
   describe('actionGroups', () => {
-    const mockSecondaryActions: Props['secondaryActions'] = [
+    const mockSecondaryActions: HeaderProps['secondaryActions'] = [
       {content: 'mock content 1'},
       {content: 'mock content 2'},
     ];
-    const mockActionGroups: Props['actionGroups'] = [
+    const mockActionGroups: HeaderProps['actionGroups'] = [
       {
         title: 'First group',
         actions: mockSecondaryActions,
@@ -161,7 +160,7 @@ describe('<Header />', () => {
   });
 
   describe('<ActionMenu />', () => {
-    const mockSecondaryActions: Props['secondaryActions'] = [
+    const mockSecondaryActions: HeaderProps['secondaryActions'] = [
       {content: 'mock content 1'},
     ];
 
@@ -172,7 +171,7 @@ describe('<Header />', () => {
     });
 
     it('does not render if `actionGroups` has no `actions', () => {
-      const mockActionGroups: Props['actionGroups'] = [
+      const mockActionGroups: HeaderProps['actionGroups'] = [
         {
           title: 'mock title',
           actions: [],
@@ -186,7 +185,7 @@ describe('<Header />', () => {
     });
 
     it('renders with atleast valid `secondaryActions`', () => {
-      const mockSecondaryActions: Props['secondaryActions'] = [
+      const mockSecondaryActions: HeaderProps['secondaryActions'] = [
         {content: 'mock content'},
       ];
       const wrapper = mountWithAppProvider(
@@ -197,7 +196,7 @@ describe('<Header />', () => {
     });
 
     it('renders with atleast valid `actionGroups`', () => {
-      const mockActionGroups: Props['actionGroups'] = [
+      const mockActionGroups: HeaderProps['actionGroups'] = [
         {
           title: 'mock title',
           actions: [{content: 'mock content 1'}],
diff --git a/src/components/Page/components/index.ts b/src/components/Page/components/index.ts
index deaee91d94d..c5990fc6821 100644
--- a/src/components/Page/components/index.ts
+++ b/src/components/Page/components/index.ts
@@ -1 +1 @@
-export {default as Header, Props as HeaderProps} from './Header';
+export {Header, HeaderProps} from './Header';
diff --git a/src/components/Page/index.ts b/src/components/Page/index.ts
index 9c96278cd7a..d9528e3d0dd 100644
--- a/src/components/Page/index.ts
+++ b/src/components/Page/index.ts
@@ -1,2 +1,4 @@
-export {default, Props} from './Page';
+import Page, {PageProps} from './Page';
+
+export {Page, PageProps};
 export {HeaderPrimaryAction} from './types';
diff --git a/src/components/Page/tests/Page.test.tsx b/src/components/Page/tests/Page.test.tsx
index afa5b72701a..55d9049e0ba 100644
--- a/src/components/Page/tests/Page.test.tsx
+++ b/src/components/Page/tests/Page.test.tsx
@@ -5,7 +5,7 @@ import {
 } from '@shopify/app-bridge/actions';
 import {animationFrame} from '@shopify/jest-dom-mocks';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import {Page, PageProps as Props, Card, Avatar, Badge} from 'components';
+import {Page, PageProps, Card, Avatar, Badge} from 'components';
 import {Header} from '../components';
 import {LinkAction} from '../../../types';
 import {HeaderPrimaryAction} from '../types';
@@ -29,7 +29,7 @@ jest.mock('../../../utilities/app-bridge-transformers', () => ({
 }));
 
 describe('<Page />', () => {
-  const mockProps: Props = {
+  const mockProps: PageProps = {
     title: 'Test',
   };
 
@@ -330,11 +330,11 @@ describe('<Page />', () => {
         target: 'APP',
       };
 
-      const secondaryActions: Props['secondaryActions'] = [
+      const secondaryActions: PageProps['secondaryActions'] = [
         {content: 'Bar', url: '/bar', target: 'ADMIN_PATH'},
       ];
 
-      const actionGroups: Props['actionGroups'] = [
+      const actionGroups: PageProps['actionGroups'] = [
         {
           title: 'Baz',
           actions: [{content: 'Qux', url: 'https://qux.com', target: 'REMOTE'}],
diff --git a/src/components/PageActions/PageActions.tsx b/src/components/PageActions/PageActions.tsx
index 34ca0a137f0..48da15a0421 100644
--- a/src/components/PageActions/PageActions.tsx
+++ b/src/components/PageActions/PageActions.tsx
@@ -1,20 +1,23 @@
 import React from 'react';
 
 import {ComplexAction, DisableableAction, LoadableAction} from '../../types';
-import Stack from '../Stack';
-import ButtonGroup from '../ButtonGroup';
+import {Stack} from '../Stack';
+import {ButtonGroup} from '../ButtonGroup';
 import {buttonsFrom} from '../Button';
 
 import styles from './PageActions.scss';
 
-export interface Props {
+export interface PageActionsProps {
   /** The primary action for the page */
   primaryAction?: DisableableAction & LoadableAction;
   /** The secondary actions for the page */
   secondaryActions?: ComplexAction[];
 }
 
-export default function PageActions({primaryAction, secondaryActions}: Props) {
+export function PageActions({
+  primaryAction,
+  secondaryActions,
+}: PageActionsProps) {
   const primaryActionMarkup = primaryAction
     ? buttonsFrom(primaryAction, {primary: true})
     : null;
diff --git a/src/components/PageActions/index.ts b/src/components/PageActions/index.ts
index e27906e1e54..cd2e39a7592 100644
--- a/src/components/PageActions/index.ts
+++ b/src/components/PageActions/index.ts
@@ -1,4 +1 @@
-import PageActions from './PageActions';
-
-export {Props} from './PageActions';
-export default PageActions;
+export {PageActions, PageActionsProps} from './PageActions';
diff --git a/src/components/PageActions/tests/PageActions.test.tsx b/src/components/PageActions/tests/PageActions.test.tsx
index e90948ced34..58ea8cb18c6 100644
--- a/src/components/PageActions/tests/PageActions.test.tsx
+++ b/src/components/PageActions/tests/PageActions.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import PageActions from '..';
-import ButtonGroup from '../../ButtonGroup';
-import Stack from '../../Stack';
+import {PageActions} from '..';
+import {ButtonGroup} from '../../ButtonGroup';
+import {Stack} from '../../Stack';
 import {buttonsFrom} from '../../Button';
 
 jest.mock('../../Button', () => ({
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 08588611a0f..f05239e0d04 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -3,10 +3,10 @@ import {ArrowLeftMinor, ArrowRightMinor} from '@shopify/polaris-icons';
 import {classNames} from '../../utilities/css';
 import {useI18n} from '../../utilities/i18n';
 import {isInputFocused} from '../../utilities/is-input-focused';
-import Icon from '../Icon';
-import UnstyledLink from '../UnstyledLink';
-import Tooltip from '../Tooltip';
-import KeypressListener from '../KeypressListener';
+import {Icon} from '../Icon';
+import {UnstyledLink} from '../UnstyledLink';
+import {Tooltip} from '../Tooltip';
+import {KeypressListener} from '../KeypressListener';
 import {Key} from '../../types';
 import {handleMouseUpByBlurring} from '../../utilities/focus';
 
@@ -37,12 +37,12 @@ export interface PaginationDescriptor {
   onPrevious?(): void;
 }
 
-export interface Props extends PaginationDescriptor {
+export interface PaginationProps extends PaginationDescriptor {
   /** A more subdued control for use in headers */
   plain?: boolean;
 }
 
-export default function Pagination({
+export function Pagination({
   hasNext,
   hasPrevious,
   nextURL,
@@ -55,7 +55,7 @@ export default function Pagination({
   previousKeys,
   plain,
   accessibilityLabel,
-}: Props) {
+}: PaginationProps) {
   const intl = useI18n();
 
   const node: React.RefObject<HTMLElement> = React.createRef();
diff --git a/src/components/Pagination/index.ts b/src/components/Pagination/index.ts
index 345236234ac..3d5049f8e12 100644
--- a/src/components/Pagination/index.ts
+++ b/src/components/Pagination/index.ts
@@ -1,4 +1 @@
-import Pagination from './Pagination';
-
-export {Props, PaginationDescriptor} from './Pagination';
-export default Pagination;
+export {Pagination, PaginationProps, PaginationDescriptor} from './Pagination';
diff --git a/src/components/Pagination/tests/Pagination.test.tsx b/src/components/Pagination/tests/Pagination.test.tsx
index 496b9b68037..75578ed0823 100644
--- a/src/components/Pagination/tests/Pagination.test.tsx
+++ b/src/components/Pagination/tests/Pagination.test.tsx
@@ -3,7 +3,7 @@ import {ReactWrapper} from 'enzyme';
 import {mountWithAppProvider, findByTestID} from 'test-utilities/legacy';
 import {Tooltip, TextField} from 'components';
 import {Key} from '../../../types';
-import Pagination from '../Pagination';
+import {Pagination} from '../Pagination';
 
 interface HandlerMap {
   [eventName: string]: (event: any) => void;
diff --git a/src/components/PolarisTestProvider/PolarisTestProvider.tsx b/src/components/PolarisTestProvider/PolarisTestProvider.tsx
index 8e0290fd4ce..0018bedd646 100644
--- a/src/components/PolarisTestProvider/PolarisTestProvider.tsx
+++ b/src/components/PolarisTestProvider/PolarisTestProvider.tsx
@@ -30,12 +30,13 @@ export type WithPolarisTestProviderOptions = {
   frame?: Partial<FrameContextType>;
 };
 
-export interface Props extends WithPolarisTestProviderOptions {
+export interface PolarisTestProviderProps
+  extends WithPolarisTestProviderOptions {
   children: React.ReactElement;
   strict?: boolean;
 }
 
-export default function PolarisTestProvider({
+export function PolarisTestProvider({
   strict,
   children,
   i18n,
@@ -43,7 +44,7 @@ export default function PolarisTestProvider({
   link,
   theme,
   frame,
-}: Props) {
+}: PolarisTestProviderProps) {
   const Wrapper = strict ? React.StrictMode : React.Fragment;
 
   const intl = new I18n(i18n || {});
diff --git a/src/components/PolarisTestProvider/index.ts b/src/components/PolarisTestProvider/index.ts
index 39afe3b883e..d51e5bddb90 100644
--- a/src/components/PolarisTestProvider/index.ts
+++ b/src/components/PolarisTestProvider/index.ts
@@ -1,5 +1,5 @@
 export {
-  default,
-  Props,
+  PolarisTestProvider,
+  PolarisTestProviderProps,
   WithPolarisTestProviderOptions,
 } from './PolarisTestProvider';
diff --git a/src/components/PolarisTestProvider/tests/PolarisTestProvider.test.tsx b/src/components/PolarisTestProvider/tests/PolarisTestProvider.test.tsx
index 5ba66fb8c7c..c91234eefa8 100644
--- a/src/components/PolarisTestProvider/tests/PolarisTestProvider.test.tsx
+++ b/src/components/PolarisTestProvider/tests/PolarisTestProvider.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mount} from '@shopify/react-testing';
-import PolarisTestProvider from '../PolarisTestProvider';
+import {PolarisTestProvider} from '../PolarisTestProvider';
 
 describe('PolarisTestProvider', () => {
   it("doesn't render in strict mode by default", () => {
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
index 30643ec1dda..2d06a55dcb4 100644
--- a/src/components/Popover/Popover.tsx
+++ b/src/components/Popover/Popover.tsx
@@ -6,12 +6,12 @@ import {
 } from '@shopify/javascript-utilities/focus';
 
 import {PreferredPosition, PreferredAlignment} from '../PositionedOverlay';
-import Portal from '../Portal';
+import {Portal} from '../Portal';
 import {CloseSource, Pane, PopoverOverlay, Section} from './components';
 
 export {CloseSource};
 
-export interface Props {
+export interface PopoverProps {
   /** The content to display inside the popover */
   children?: React.ReactNode;
   /** The preferred direction to open the popover */
@@ -47,7 +47,7 @@ interface State {
 
 const getUniqueID = createUniqueIDFactory('Popover');
 
-export default class Popover extends React.PureComponent<Props, State> {
+export class Popover extends React.PureComponent<PopoverProps, State> {
   static Pane = Pane;
   static Section = Section;
 
diff --git a/src/components/Popover/components/Pane/Pane.tsx b/src/components/Popover/components/Pane/Pane.tsx
index a68275db028..f6c0d2cb70e 100644
--- a/src/components/Popover/components/Pane/Pane.tsx
+++ b/src/components/Popover/components/Pane/Pane.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 
 import {classNames} from '../../../../utilities/css';
 import {wrapWithComponent} from '../../../../utilities/components';
-import Scrollable from '../../../Scrollable';
-import Section from '../Section';
+import {Scrollable} from '../../../Scrollable';
+import {Section} from '../Section';
 import styles from '../../Popover.scss';
 
-export interface Props {
+export interface PaneProps {
   /** Fix the pane to the top of the popover */
   fixed?: boolean;
   /** Automatically wrap children in padded sections */
@@ -17,12 +17,12 @@ export interface Props {
   onScrolledToBottom?(): void;
 }
 
-export default function Pane({
+export function Pane({
   fixed,
   sectioned,
   children,
   onScrolledToBottom,
-}: Props) {
+}: PaneProps) {
   const className = classNames(styles.Pane, fixed && styles['Pane-fixed']);
   const content = sectioned
     ? wrapWithComponent(children, Section, {})
diff --git a/src/components/Popover/components/Pane/index.ts b/src/components/Popover/components/Pane/index.ts
index f7646d44e26..7e646866f8f 100644
--- a/src/components/Popover/components/Pane/index.ts
+++ b/src/components/Popover/components/Pane/index.ts
@@ -1,4 +1 @@
-import Pane from './Pane';
-
-export {Props} from './Pane';
-export default Pane;
+export {Pane, PaneProps} from './Pane';
diff --git a/src/components/Popover/components/Pane/tests/Pane.test.tsx b/src/components/Popover/components/Pane/tests/Pane.test.tsx
index d954acb3af9..a5795a21962 100644
--- a/src/components/Popover/components/Pane/tests/Pane.test.tsx
+++ b/src/components/Popover/components/Pane/tests/Pane.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {TextContainer, Scrollable} from 'components';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
-import Pane from '../Pane';
-import Section from '../../Section';
+import {Pane} from '../Pane';
+import {Section} from '../../Section';
 
 describe('<Pane />', () => {
   describe('fixed', () => {
diff --git a/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx b/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx
index 0d69db88b39..e2e6bf60549 100644
--- a/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx
+++ b/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx
@@ -10,15 +10,16 @@ import {
 } from '../../../../utilities/components';
 import {Key} from '../../../../types';
 import {overlay} from '../../../shared';
-import EventListener from '../../../EventListener';
-import KeypressListener from '../../../KeypressListener';
-import PositionedOverlay, {
+import {EventListener} from '../../../EventListener';
+import {KeypressListener} from '../../../KeypressListener';
+import {
+  PositionedOverlay,
   OverlayDetails,
   PreferredPosition,
   PreferredAlignment,
 } from '../../../PositionedOverlay';
 
-import Pane, {Props as PaneProps} from '../Pane';
+import {Pane, PaneProps} from '../Pane';
 import styles from '../../Popover.scss';
 
 export enum CloseSource {
@@ -35,7 +36,7 @@ enum TransitionStatus {
   Exited = 'exited',
 }
 
-export interface Props {
+export interface PopoverOverlayProps {
   children?: React.ReactNode;
   fullWidth?: boolean;
   fullHeight?: boolean;
@@ -54,7 +55,10 @@ interface State {
   transitionStatus: TransitionStatus;
 }
 
-export default class PopoverOverlay extends React.PureComponent<Props, State> {
+export class PopoverOverlay extends React.PureComponent<
+  PopoverOverlayProps,
+  State
+> {
   state: State = {
     transitionStatus: this.props.active
       ? TransitionStatus.Entering
@@ -80,7 +84,7 @@ export default class PopoverOverlay extends React.PureComponent<Props, State> {
     }
   }
 
-  componentDidUpdate(oldProps: Props) {
+  componentDidUpdate(oldProps: PopoverOverlayProps) {
     if (this.props.active && !oldProps.active) {
       this.focusContent();
       this.changeTransitionStatus(TransitionStatus.Entering, () => {
diff --git a/src/components/Popover/components/PopoverOverlay/index.ts b/src/components/Popover/components/PopoverOverlay/index.ts
index 9dffe7c7c10..b63170aad8b 100644
--- a/src/components/Popover/components/PopoverOverlay/index.ts
+++ b/src/components/Popover/components/PopoverOverlay/index.ts
@@ -1,4 +1,5 @@
-import PopoverOverlay from './PopoverOverlay';
-
-export {Props, CloseSource} from './PopoverOverlay';
-export default PopoverOverlay;
+export {
+  PopoverOverlay,
+  PopoverOverlayProps,
+  CloseSource,
+} from './PopoverOverlay';
diff --git a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx
index ad263297bbf..96c7c2db173 100644
--- a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx
+++ b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {TextContainer} from 'components';
 import {Key} from '../../../../../types';
-import PositionedOverlay from '../../../../PositionedOverlay';
-import PopoverOverlay from '../PopoverOverlay';
+import {PositionedOverlay} from '../../../../PositionedOverlay';
+import {PopoverOverlay} from '../PopoverOverlay';
 
 interface HandlerMap {
   [eventName: string]: (event: any) => void;
diff --git a/src/components/Popover/components/Section/Section.tsx b/src/components/Popover/components/Section/Section.tsx
index 2069309d46f..173ec8baa57 100644
--- a/src/components/Popover/components/Section/Section.tsx
+++ b/src/components/Popover/components/Section/Section.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import styles from '../../Popover.scss';
 
-export interface Props {
+export interface SectionProps {
   children?: React.ReactNode;
 }
 
-export default function Section({children}: Props) {
+export function Section({children}: SectionProps) {
   return <div className={styles.Section}>{children}</div>;
 }
diff --git a/src/components/Popover/components/Section/index.ts b/src/components/Popover/components/Section/index.ts
index b147a6e4e4b..344c319971d 100644
--- a/src/components/Popover/components/Section/index.ts
+++ b/src/components/Popover/components/Section/index.ts
@@ -1,4 +1 @@
-import Section from './Section';
-
-export {Props} from './Section';
-export default Section;
+export {Section, SectionProps} from './Section';
diff --git a/src/components/Popover/components/Section/tests/Section.test.tsx b/src/components/Popover/components/Section/tests/Section.test.tsx
index dc87397f774..994c548eed4 100644
--- a/src/components/Popover/components/Section/tests/Section.test.tsx
+++ b/src/components/Popover/components/Section/tests/Section.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {TextContainer} from 'components';
-import Section from '../Section';
+import {Section} from '../Section';
 
 // section: ActionListSection;
 // hasMultipleSections: boolean;
diff --git a/src/components/Popover/components/index.ts b/src/components/Popover/components/index.ts
index a695a531705..e79658cc8b1 100644
--- a/src/components/Popover/components/index.ts
+++ b/src/components/Popover/components/index.ts
@@ -1,9 +1,9 @@
-export {default as Pane, Props as PaneProps} from './Pane';
+export {Pane, PaneProps} from './Pane';
 
 export {
-  default as PopoverOverlay,
-  Props as PopoverOverlayProps,
+  PopoverOverlay,
+  PopoverOverlayProps,
   CloseSource,
 } from './PopoverOverlay';
 
-export {default as Section, Props as SectionProps} from './Section';
+export {Section, SectionProps} from './Section';
diff --git a/src/components/Popover/index.ts b/src/components/Popover/index.ts
index 99baee006f2..c485e62737e 100644
--- a/src/components/Popover/index.ts
+++ b/src/components/Popover/index.ts
@@ -1,4 +1,5 @@
-import Popover from './Popover';
-
-export {Props, CloseSource} from './Popover';
-export default Popover;
+export {
+  Popover,
+  PopoverProps,
+  CloseSource as PopoverCloseSource,
+} from './Popover';
diff --git a/src/components/Popover/tests/Popover.test.tsx b/src/components/Popover/tests/Popover.test.tsx
index bf6e7937704..980036fdf60 100644
--- a/src/components/Popover/tests/Popover.test.tsx
+++ b/src/components/Popover/tests/Popover.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider, findByTestID} from 'test-utilities/legacy';
-import Popover from '../Popover';
+import {Popover} from '../Popover';
 
 describe('<Popover />', () => {
   const spy = jest.fn();
diff --git a/src/components/Portal/Portal.tsx b/src/components/Portal/Portal.tsx
index d740ed61ad3..9ec79f9948c 100644
--- a/src/components/Portal/Portal.tsx
+++ b/src/components/Portal/Portal.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {createPortal} from 'react-dom';
 import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 
-export interface Props {
+export interface PortalProps {
   children?: React.ReactNode;
   idPrefix?: string;
   onPortalCreated?(): void;
@@ -14,7 +14,7 @@ interface State {
 
 const getUniqueID = createUniqueIDFactory('portal-');
 
-export default class Portal extends React.PureComponent<Props, State> {
+export class Portal extends React.PureComponent<PortalProps, State> {
   static defaultProps = {idPrefix: ''};
 
   state: State = {isMounted: false};
@@ -33,7 +33,7 @@ export default class Portal extends React.PureComponent<Props, State> {
     this.setState({isMounted: true});
   }
 
-  componentDidUpdate(_: Props, prevState: State) {
+  componentDidUpdate(_: PortalProps, prevState: State) {
     const {onPortalCreated = noop} = this.props;
     if (!prevState.isMounted && this.state.isMounted) {
       onPortalCreated();
diff --git a/src/components/Portal/index.ts b/src/components/Portal/index.ts
index ffbd57448d4..ef6609fb2ef 100644
--- a/src/components/Portal/index.ts
+++ b/src/components/Portal/index.ts
@@ -1,4 +1 @@
-import Portal from './Portal';
-
-export * from './Portal';
-export default Portal;
+export {Portal, PortalProps} from './Portal';
diff --git a/src/components/Portal/tests/Portal.test.tsx b/src/components/Portal/tests/Portal.test.tsx
index 6daa8eedd28..5ae84800401 100644
--- a/src/components/Portal/tests/Portal.test.tsx
+++ b/src/components/Portal/tests/Portal.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Portal from '../Portal';
+import {Portal} from '../Portal';
 
 jest.mock('react-dom', () => ({
   ...require.requireActual('react-dom'),
diff --git a/src/components/PositionedOverlay/PositionedOverlay.tsx b/src/components/PositionedOverlay/PositionedOverlay.tsx
index f74a1c4b1c6..ca250d7c79b 100644
--- a/src/components/PositionedOverlay/PositionedOverlay.tsx
+++ b/src/components/PositionedOverlay/PositionedOverlay.tsx
@@ -3,8 +3,8 @@ import {getRectForNode, Rect} from '@shopify/javascript-utilities/geometry';
 import {closest} from '@shopify/javascript-utilities/dom';
 
 import {classNames} from '../../utilities/css';
-import EventListener from '../EventListener';
-import Scrollable from '../Scrollable';
+import {EventListener} from '../EventListener';
+import {Scrollable} from '../Scrollable';
 import {layer} from '../shared';
 
 import {
@@ -18,6 +18,7 @@ import {
 import styles from './PositionedOverlay.scss';
 
 export {PreferredPosition, PreferredAlignment};
+
 export type Positioning = 'above' | 'below';
 
 export interface OverlayDetails {
@@ -28,7 +29,7 @@ export interface OverlayDetails {
   activatorRect: Rect;
 }
 
-export interface Props {
+export interface PositionedOverlayProps {
   active: boolean;
   activator: HTMLElement;
   preferredPosition?: PreferredPosition;
@@ -55,8 +56,8 @@ interface State {
 
 const OBSERVER_CONFIG = {childList: true, subtree: true};
 
-export default class PositionedOverlay extends React.PureComponent<
-  Props,
+export class PositionedOverlay extends React.PureComponent<
+  PositionedOverlayProps,
   State
 > {
   state: State = {
@@ -76,7 +77,7 @@ export default class PositionedOverlay extends React.PureComponent<
   private scrollableContainer: HTMLElement | Document | null = null;
   private observer: MutationObserver;
 
-  constructor(props: Props) {
+  constructor(props: PositionedOverlayProps) {
     super(props);
 
     this.observer = new MutationObserver(this.handleMeasurement);
diff --git a/src/components/PositionedOverlay/index.ts b/src/components/PositionedOverlay/index.ts
index 3d99a788436..3ae48a4cc6e 100644
--- a/src/components/PositionedOverlay/index.ts
+++ b/src/components/PositionedOverlay/index.ts
@@ -1,9 +1,7 @@
-import PositionedOverlay from './PositionedOverlay';
-
 export {
-  Props,
+  PositionedOverlay,
+  PositionedOverlayProps,
   PreferredPosition,
   PreferredAlignment,
   OverlayDetails,
 } from './PositionedOverlay';
-export default PositionedOverlay;
diff --git a/src/components/PositionedOverlay/tests/PositionedOverlay.test.tsx b/src/components/PositionedOverlay/tests/PositionedOverlay.test.tsx
index 03a4140c48a..2bb319a0487 100644
--- a/src/components/PositionedOverlay/tests/PositionedOverlay.test.tsx
+++ b/src/components/PositionedOverlay/tests/PositionedOverlay.test.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import {Rect} from '@shopify/javascript-utilities/geometry';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import EventListener from '../../EventListener';
-import PositionedOverlay, {
+import {EventListener} from '../../EventListener';
+import {
+  PositionedOverlay,
   intersectionWithViewport,
 } from '../PositionedOverlay';
 import * as mathModule from '../utilities/math';
diff --git a/src/components/PositionedOverlay/utilities/math.ts b/src/components/PositionedOverlay/utilities/math.ts
index bfd04e320f8..61c3be592fb 100644
--- a/src/components/PositionedOverlay/utilities/math.ts
+++ b/src/components/PositionedOverlay/utilities/math.ts
@@ -1,6 +1,7 @@
 import {Rect} from '@shopify/javascript-utilities/geometry';
 
 export type PreferredPosition = 'above' | 'below' | 'mostSpace';
+
 export type PreferredAlignment = 'left' | 'center' | 'right';
 
 export interface Margins {
diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
index 2e6d7a69a3c..fe9f6b45a68 100644
--- a/src/components/ProgressBar/ProgressBar.tsx
+++ b/src/components/ProgressBar/ProgressBar.tsx
@@ -5,7 +5,7 @@ import styles from './ProgressBar.scss';
 
 export type Size = 'small' | 'medium' | 'large';
 
-export interface Props {
+export interface ProgressBarProps {
   /**
    * The progression of certain tasks
    * @default 0
@@ -18,7 +18,7 @@ export interface Props {
   size?: Size;
 }
 
-export default function ProgressBar({progress = 0, size = 'medium'}: Props) {
+export function ProgressBar({progress = 0, size = 'medium'}: ProgressBarProps) {
   const intl = useI18n();
 
   const className = classNames(
diff --git a/src/components/ProgressBar/index.ts b/src/components/ProgressBar/index.ts
index bdbe3894a52..6010a63cf5b 100644
--- a/src/components/ProgressBar/index.ts
+++ b/src/components/ProgressBar/index.ts
@@ -1,4 +1 @@
-import ProgressBar from './ProgressBar';
-
-export {Props} from './ProgressBar';
-export default ProgressBar;
+export {ProgressBar, ProgressBarProps} from './ProgressBar';
diff --git a/src/components/ProgressBar/tests/ProgressBar.test.tsx b/src/components/ProgressBar/tests/ProgressBar.test.tsx
index d429a493f2f..14ff5d3f366 100644
--- a/src/components/ProgressBar/tests/ProgressBar.test.tsx
+++ b/src/components/ProgressBar/tests/ProgressBar.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import ProgressBar from '../ProgressBar';
+import {ProgressBar} from '../ProgressBar';
 
 describe('<ProgressBar />', () => {
   it('sets the progress element to 80 when the progress is 80', () => {
diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index 4b8bdcbd204..23686939b0d 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
-import Choice, {helpTextID} from '../Choice';
+import {Choice, helpTextID} from '../Choice';
 import styles from './RadioButton.scss';
 
 export interface BaseProps {
@@ -30,11 +30,11 @@ export interface BaseProps {
   onBlur?(): void;
 }
 
-export interface Props extends BaseProps {}
+export interface RadioButtonProps extends BaseProps {}
 
 const getUniqueID = createUniqueIDFactory('RadioButton');
 
-export default function RadioButton({
+export function RadioButton({
   ariaDescribedBy: ariaDescribedByProp,
   label,
   labelHidden,
@@ -47,7 +47,7 @@ export default function RadioButton({
   id = getUniqueID(),
   name = id,
   value,
-}: Props) {
+}: RadioButtonProps) {
   function handleChange({currentTarget}: React.ChangeEvent<HTMLInputElement>) {
     onChange && onChange(currentTarget.checked, id);
   }
diff --git a/src/components/RadioButton/index.ts b/src/components/RadioButton/index.ts
index 09e9e406d9a..2bd0a8df033 100644
--- a/src/components/RadioButton/index.ts
+++ b/src/components/RadioButton/index.ts
@@ -1,4 +1 @@
-import RadioButton from './RadioButton';
-
-export {Props} from './RadioButton';
-export default RadioButton;
+export {RadioButton, RadioButtonProps} from './RadioButton';
diff --git a/src/components/RadioButton/tests/RadioButton.test.tsx b/src/components/RadioButton/tests/RadioButton.test.tsx
index ded3bb9ecc0..df4e62039d7 100644
--- a/src/components/RadioButton/tests/RadioButton.test.tsx
+++ b/src/components/RadioButton/tests/RadioButton.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithApp} from 'test-utilities/react-testing';
-import RadioButton from '../RadioButton';
+import {RadioButton} from '../RadioButton';
 
 describe('<RadioButton />', () => {
   describe('checked', () => {
diff --git a/src/components/RangeSlider/RangeSlider.tsx b/src/components/RangeSlider/RangeSlider.tsx
index c5820f38c6a..dcad087631b 100644
--- a/src/components/RangeSlider/RangeSlider.tsx
+++ b/src/components/RangeSlider/RangeSlider.tsx
@@ -50,4 +50,6 @@ function isDualThumb(value: RangeSliderValue): value is DualValue {
   return Array.isArray(value);
 }
 
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
 export default withAppProvider<Props>()(RangeSlider);
diff --git a/src/components/RangeSlider/components/DualThumb/DualThumb.tsx b/src/components/RangeSlider/components/DualThumb/DualThumb.tsx
index e091098e19f..8b8da66bb0b 100644
--- a/src/components/RangeSlider/components/DualThumb/DualThumb.tsx
+++ b/src/components/RangeSlider/components/DualThumb/DualThumb.tsx
@@ -8,8 +8,8 @@ import isEqual from 'lodash/isEqual';
 import {classNames} from '../../../../utilities/css';
 import {CSS_VAR_PREFIX} from '../../utilities';
 import {RangeSliderProps, DualValue} from '../../types';
-import Labelled, {labelID} from '../../../Labelled';
-import EventListener from '../../../EventListener';
+import {Labelled, labelID} from '../../../Labelled';
+import {EventListener} from '../../../EventListener';
 import {Key} from '../../../../types';
 
 import styles from './DualThumb.scss';
@@ -21,7 +21,7 @@ interface State {
   prevValue?: DualValue;
 }
 
-export interface Props extends RangeSliderProps {
+export interface DualThumbProps extends RangeSliderProps {
   value: DualValue;
   id: string;
   min: number;
@@ -40,8 +40,8 @@ enum Control {
 
 const THUMB_SIZE = 24;
 
-export default class DualThumb extends React.Component<Props, State> {
-  static getDerivedStateFromProps(props: Props, state: State) {
+export class DualThumb extends React.Component<DualThumbProps, State> {
+  static getDerivedStateFromProps(props: DualThumbProps, state: State) {
     const {min, step, max, value, onChange, id} = props;
     const {prevValue} = state;
 
diff --git a/src/components/RangeSlider/components/DualThumb/index.ts b/src/components/RangeSlider/components/DualThumb/index.ts
index a39cfa44b62..0a51215c6fc 100644
--- a/src/components/RangeSlider/components/DualThumb/index.ts
+++ b/src/components/RangeSlider/components/DualThumb/index.ts
@@ -1,4 +1 @@
-import DualThumb from './DualThumb';
-
-export {Props} from './DualThumb';
-export default DualThumb;
+export {DualThumb, DualThumbProps} from './DualThumb';
diff --git a/src/components/RangeSlider/components/DualThumb/tests/DualThumb.test.tsx b/src/components/RangeSlider/components/DualThumb/tests/DualThumb.test.tsx
index fa91caa8d97..4ce3ec9e469 100644
--- a/src/components/RangeSlider/components/DualThumb/tests/DualThumb.test.tsx
+++ b/src/components/RangeSlider/components/DualThumb/tests/DualThumb.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {ReactWrapper} from 'enzyme';
 import {mountWithAppProvider, findByTestID} from 'test-utilities/legacy';
 import {Key} from 'types';
-import DualThumb, {Props as DualThumbProps} from '../DualThumb';
+import {DualThumb, DualThumbProps} from '../DualThumb';
 
 describe('<DualThumb />', () => {
   const mockProps: DualThumbProps = {
diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx b/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx
index 48d8a2bfed9..90acd470d5d 100644
--- a/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx
+++ b/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import {classNames} from '../../../../utilities/css';
 import {clamp} from '../../../../utilities/clamp';
-import Labelled, {helpTextID} from '../../../Labelled';
+import {Labelled, helpTextID} from '../../../Labelled';
 
 import {invertNumber, CSS_VAR_PREFIX} from '../../utilities';
 import {RangeSliderProps} from '../../types';
 
 import styles from './SingleThumb.scss';
 
-export interface Props extends RangeSliderProps {
+export interface SingleThumbProps extends RangeSliderProps {
   value: number;
   id: string;
   min: number;
@@ -16,7 +16,7 @@ export interface Props extends RangeSliderProps {
   step: number;
 }
 
-export default function SingleThumb(props: Props) {
+export function SingleThumb(props: SingleThumbProps) {
   const {
     id,
     error,
diff --git a/src/components/RangeSlider/components/SingleThumb/index.ts b/src/components/RangeSlider/components/SingleThumb/index.ts
index 456790b5832..bde0e6e4ff6 100644
--- a/src/components/RangeSlider/components/SingleThumb/index.ts
+++ b/src/components/RangeSlider/components/SingleThumb/index.ts
@@ -1,4 +1 @@
-import SingleThumb from './SingleThumb';
-
-export {Props} from './SingleThumb';
-export default SingleThumb;
+export {SingleThumb, SingleThumbProps} from './SingleThumb';
diff --git a/src/components/RangeSlider/components/SingleThumb/tests/SingleThumb.test.tsx b/src/components/RangeSlider/components/SingleThumb/tests/SingleThumb.test.tsx
index eda2af58f3e..350f4eac5c1 100644
--- a/src/components/RangeSlider/components/SingleThumb/tests/SingleThumb.test.tsx
+++ b/src/components/RangeSlider/components/SingleThumb/tests/SingleThumb.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import {SingleThumb} from '../..';
+import {SingleThumb} from '../SingleThumb';
 
 const mockProps = {
   id: 'MyRangeSlider',
diff --git a/src/components/RangeSlider/components/index.ts b/src/components/RangeSlider/components/index.ts
index 31727e1c1e8..5ddfcea2250 100644
--- a/src/components/RangeSlider/components/index.ts
+++ b/src/components/RangeSlider/components/index.ts
@@ -1,2 +1,3 @@
-export {default as DualThumb} from './DualThumb';
-export {default as SingleThumb} from './SingleThumb';
+export {DualThumb} from './DualThumb';
+
+export {SingleThumb} from './SingleThumb';
diff --git a/src/components/RangeSlider/index.ts b/src/components/RangeSlider/index.ts
index 3b6be61824e..edaf9b8d7df 100644
--- a/src/components/RangeSlider/index.ts
+++ b/src/components/RangeSlider/index.ts
@@ -1,4 +1,4 @@
 import RangeSlider from './RangeSlider';
 
+export {RangeSlider};
 export {RangeSliderProps, RangeSliderValue, DualValue} from './types';
-export default RangeSlider;
diff --git a/src/components/RangeSlider/types.ts b/src/components/RangeSlider/types.ts
index 73a9f640e9f..3dea39166f3 100644
--- a/src/components/RangeSlider/types.ts
+++ b/src/components/RangeSlider/types.ts
@@ -3,6 +3,7 @@ import {Action} from '../Labelled';
 import {Error} from '../../types';
 
 export type DualValue = [number, number];
+
 export type RangeSliderValue = number | DualValue;
 
 export interface RangeSliderProps {
diff --git a/src/components/RangeSlider/utilities/index.ts b/src/components/RangeSlider/utilities/index.ts
index 77a1621388b..830e2ca9e87 100644
--- a/src/components/RangeSlider/utilities/index.ts
+++ b/src/components/RangeSlider/utilities/index.ts
@@ -1,7 +1,9 @@
 export const CSS_VAR_PREFIX = '--Polaris-RangeSlider-';
+
 export enum RangeSliderDefault {
   Min = 0,
   Max = 100,
   Step = 1,
 }
+
 export {invertNumber} from './invertNumber';
diff --git a/src/components/ResourceItem/ResourceItem.tsx b/src/components/ResourceItem/ResourceItem.tsx
index 731bfa5ec8e..a57af0be6fc 100644
--- a/src/components/ResourceItem/ResourceItem.tsx
+++ b/src/components/ResourceItem/ResourceItem.tsx
@@ -4,14 +4,14 @@ import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 import isEqual from 'lodash/isEqual';
 import {classNames} from '../../utilities/css';
 import {DisableableAction} from '../../types';
-import ActionList from '../ActionList';
-import Popover from '../Popover';
-import {Props as AvatarProps} from '../Avatar';
-import UnstyledLink from '../UnstyledLink';
-import {Props as ThumbnailProps} from '../Thumbnail';
-import ButtonGroup from '../ButtonGroup';
-import Checkbox from '../Checkbox';
-import Button, {buttonsFrom} from '../Button';
+import {ActionList} from '../ActionList';
+import {Popover} from '../Popover';
+import {AvatarProps} from '../Avatar';
+import {UnstyledLink} from '../UnstyledLink';
+import {ThumbnailProps} from '../Thumbnail';
+import {ButtonGroup} from '../ButtonGroup';
+import {Checkbox} from '../Checkbox';
+import {Button, buttonsFrom} from '../Button';
 import {
   withAppProvider,
   WithAppProviderProps,
@@ -20,12 +20,14 @@ import {
 import {
   ResourceListContext,
   SELECT_ALL_ITEMS,
-  SelectedItems,
+  ResourceListSelectedItems,
 } from '../../utilities/resource-list';
 import styles from './ResourceItem.scss';
 
 export type ExceptionStatus = 'neutral' | 'warning' | 'critical';
+
 export type MediaSize = 'small' | 'medium' | 'large';
+
 export type MediaType = 'avatar' | 'thumbnail';
 
 interface WithContextTypes<IJ> {
@@ -67,7 +69,7 @@ export interface PropsWithClick extends Props {
   onClick(id?: string): void;
 }
 
-export type ConditionalProps = PropsWithUrl | PropsWithClick;
+export type ResourceItemProps = PropsWithUrl | PropsWithClick;
 
 interface State {
   actionsMenuVisible: boolean;
@@ -426,7 +428,7 @@ function stopPropagation(event: React.MouseEvent<any>) {
   event.stopPropagation();
 }
 
-function isSelected(id: string, selectedItems?: SelectedItems) {
+function isSelected(id: string, selectedItems?: ResourceListSelectedItems) {
   return Boolean(
     selectedItems &&
       ((Array.isArray(selectedItems) && selectedItems.includes(id)) ||
@@ -442,4 +444,6 @@ function ResourceItem(props: CombinedProps) {
   );
 }
 
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
 export default withAppProvider<Props>()(ResourceItem);
diff --git a/src/components/ResourceItem/index.ts b/src/components/ResourceItem/index.ts
index 0afeeb9694d..7de3e4a5ea5 100644
--- a/src/components/ResourceItem/index.ts
+++ b/src/components/ResourceItem/index.ts
@@ -1,4 +1,3 @@
-import ResourceItem from './ResourceItem';
+import ResourceItem, {ResourceItemProps} from './ResourceItem';
 
-export {ConditionalProps as Props} from './ResourceItem';
-export default ResourceItem;
+export {ResourceItem, ResourceItemProps};
diff --git a/src/components/ResourceList/ResourceList.tsx b/src/components/ResourceList/ResourceList.tsx
index 53b34df3532..bd75d7ac3f2 100644
--- a/src/components/ResourceList/ResourceList.tsx
+++ b/src/components/ResourceList/ResourceList.tsx
@@ -4,27 +4,28 @@ import debounce from 'lodash/debounce';
 import {EnableSelectionMinor} from '@shopify/polaris-icons';
 
 import {classNames} from '../../utilities/css';
-import Button from '../Button';
-import EventListener from '../EventListener';
-import Sticky from '../Sticky';
-import Spinner from '../Spinner';
+import {Button} from '../Button';
+import {EventListener} from '../EventListener';
+import {Sticky} from '../Sticky';
+import {Spinner} from '../Spinner';
 import {
   withAppProvider,
   WithAppProviderProps,
 } from '../../utilities/with-app-provider';
 import {
   ResourceListContext,
-  SelectedItems,
+  ResourceListSelectedItems,
   SELECT_ALL_ITEMS,
 } from '../../utilities/resource-list';
-import Select, {SelectOption} from '../Select';
-import EmptySearchResult from '../EmptySearchResult';
-import ResourceItem from '../ResourceItem';
+import {Select, SelectOption} from '../Select';
+import {EmptySearchResult} from '../EmptySearchResult';
+import {ResourceItem} from '../ResourceItem';
 
 import {
   BulkActions,
   BulkActionsProps,
   CheckableButton,
+  // eslint-disable-next-line import/no-deprecated
   FilterControl,
 } from './components';
 
@@ -43,7 +44,7 @@ interface State {
   smallScreen: boolean;
 }
 
-export interface Props {
+export interface ResourceListProps {
   /** Item data; each item is passed to renderItem */
   items: Items;
   filterControl?: React.ReactNode;
@@ -57,7 +58,7 @@ export interface Props {
   /** Actions available on the currently selected items */
   bulkActions?: BulkActionsProps['actions'];
   /** Collection of IDs for the currently selected items */
-  selectedItems?: SelectedItems;
+  selectedItems?: ResourceListSelectedItems;
   /** Renders a Select All button at the top of the list and checkboxes in front of each list item. For use when bulkActions aren't provided. **/
   selectable?: boolean;
   /** If there are more items than currently in the list */
@@ -75,7 +76,7 @@ export interface Props {
   /** Callback when sort option is changed */
   onSortChange?(selected: string, id: string): void;
   /** Callback when selection is changed */
-  onSelectionChange?(selectedItems: SelectedItems): void;
+  onSelectionChange?(selectedItems: ResourceListSelectedItems): void;
   /** Function to render each list item	 */
   renderItem(item: any, id: string, index: number): React.ReactNode;
   /** Function to customize the unique ID for each item */
@@ -84,10 +85,11 @@ export interface Props {
   resolveItemId?(item: any): string;
 }
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = ResourceListProps & WithAppProviderProps;
 
 class ResourceList extends React.Component<CombinedProps, State> {
   static Item = ResourceItem;
+  // eslint-disable-next-line import/no-deprecated
   static FilterControl = FilterControl;
 
   private defaultResourceName: {singular: string; plural: string};
@@ -324,7 +326,7 @@ class ResourceList extends React.Component<CombinedProps, State> {
     loading: prevLoading,
     items: prevItems,
     selectedItems: prevSelectedItems,
-  }: Props) {
+  }: ResourceListProps) {
     const {selectedItems, loading} = this.props;
 
     if (
@@ -766,4 +768,6 @@ function isSmallScreen() {
     : window.innerWidth <= SMALL_SCREEN_WIDTH;
 }
 
-export default withAppProvider<Props>()(ResourceList);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<ResourceListProps>()(ResourceList);
diff --git a/src/components/ResourceList/components/BulkActions/BulkActions.tsx b/src/components/ResourceList/components/BulkActions/BulkActions.tsx
index a0646661839..9ef5e802643 100644
--- a/src/components/ResourceList/components/BulkActions/BulkActions.tsx
+++ b/src/components/ResourceList/components/BulkActions/BulkActions.tsx
@@ -4,26 +4,27 @@ import {durationBase} from '@shopify/polaris-tokens';
 import {CSSTransition, Transition} from '@material-ui/react-transition-group';
 import {classNames} from '../../../../utilities/css';
 import {DisableableAction, Action, ActionListSection} from '../../../../types';
-import ActionList from '../../../ActionList';
-import Popover from '../../../Popover';
-import Button from '../../../Button';
-import EventListener from '../../../EventListener';
+import {ActionList} from '../../../ActionList';
+import {Popover} from '../../../Popover';
+import {Button} from '../../../Button';
+import {EventListener} from '../../../EventListener';
 import {
   withAppProvider,
   WithAppProviderProps,
 } from '../../../../utilities/with-app-provider';
-import CheckableButton from '../CheckableButton';
+import {CheckableButton} from '../CheckableButton';
 import {BulkActionButton} from './components';
 import styles from './BulkActions.scss';
 
 export type BulkAction = DisableableAction;
+
 export type BulkActionListSection = ActionListSection;
 
 export type TransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited';
 
 const MAX_PROMOTED_ACTIONS = 2;
 
-export interface Props {
+export interface BulkActionsProps {
   /** Visually hidden text for screen readers */
   accessibilityLabel?: string;
   /** Label for the bulk actions */
@@ -63,7 +64,7 @@ const slideClasses = {
   exit: classNames(styles.Slide, styles['Slide-exit']),
 };
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = BulkActionsProps & WithAppProviderProps;
 
 class BulkActions extends React.PureComponent<CombinedProps, State> {
   state: State = {
@@ -519,4 +520,6 @@ function instanceOfBulkActionArray(
   return actions.length === validList.length;
 }
 
-export default withAppProvider<Props>()(BulkActions);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<BulkActionsProps>()(BulkActions);
diff --git a/src/components/ResourceList/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx b/src/components/ResourceList/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx
index 958e526036f..df43ecaefe7 100644
--- a/src/components/ResourceList/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx
+++ b/src/components/ResourceList/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx
@@ -2,21 +2,21 @@ import React, {createRef} from 'react';
 import {CaretDownMinor} from '@shopify/polaris-icons';
 
 import {classNames} from '../../../../../../utilities/css';
-import Icon from '../../../../../Icon';
-import UnstyledLink from '../../../../../UnstyledLink';
+import {Icon} from '../../../../../Icon';
+import {UnstyledLink} from '../../../../../UnstyledLink';
 import {DisableableAction} from '../../../../../../types';
 
 import {handleMouseUpByBlurring} from '../../../../../../utilities/focus';
 
 import styles from '../../BulkActions.scss';
 
-export type Props = {
+export type BulkActionButtonProps = {
   disclosure?: boolean;
   handleMeasurement?(width: number): void;
 } & DisableableAction;
 
-export default class BulkActionButton extends React.PureComponent<
-  Props,
+export class BulkActionButton extends React.PureComponent<
+  BulkActionButtonProps,
   never
 > {
   private bulkActionButton = createRef<HTMLButtonElement>();
diff --git a/src/components/ResourceList/components/BulkActions/components/BulkActionButton/index.ts b/src/components/ResourceList/components/BulkActions/components/BulkActionButton/index.ts
index 6b97f2e5636..61bf407205c 100644
--- a/src/components/ResourceList/components/BulkActions/components/BulkActionButton/index.ts
+++ b/src/components/ResourceList/components/BulkActions/components/BulkActionButton/index.ts
@@ -1,4 +1 @@
-import BulkActionButton from './BulkActionButton';
-
-export {Props} from './BulkActionButton';
-export default BulkActionButton;
+export {BulkActionButton, BulkActionButtonProps} from './BulkActionButton';
diff --git a/src/components/ResourceList/components/BulkActions/components/index.ts b/src/components/ResourceList/components/BulkActions/components/index.ts
index ad1c9281711..61bf407205c 100644
--- a/src/components/ResourceList/components/BulkActions/components/index.ts
+++ b/src/components/ResourceList/components/BulkActions/components/index.ts
@@ -1,4 +1 @@
-export {
-  default as BulkActionButton,
-  Props as BulkActionButtonProps,
-} from './BulkActionButton';
+export {BulkActionButton, BulkActionButtonProps} from './BulkActionButton';
diff --git a/src/components/ResourceList/components/BulkActions/index.ts b/src/components/ResourceList/components/BulkActions/index.ts
index e4df8acf5ef..42718b32510 100644
--- a/src/components/ResourceList/components/BulkActions/index.ts
+++ b/src/components/ResourceList/components/BulkActions/index.ts
@@ -1,4 +1,3 @@
-import BulkActions from './BulkActions';
+import BulkActions, {BulkActionsProps} from './BulkActions';
 
-export {Props} from './BulkActions';
-export default BulkActions;
+export {BulkActions, BulkActionsProps};
diff --git a/src/components/ResourceList/components/BulkActions/tests/BulkActions.test.tsx b/src/components/ResourceList/components/BulkActions/tests/BulkActions.test.tsx
index ead38f87b68..739ee5702d1 100644
--- a/src/components/ResourceList/components/BulkActions/tests/BulkActions.test.tsx
+++ b/src/components/ResourceList/components/BulkActions/tests/BulkActions.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {Transition, CSSTransition} from '@material-ui/react-transition-group';
 import {mountWithAppProvider, findByTestID} from 'test-utilities/legacy';
 import {Popover} from 'components';
-import CheckableButton from '../../CheckableButton';
+import {CheckableButton} from '../../CheckableButton';
 import {BulkActionButton} from '../components';
 import BulkActions, {BulkAction} from '../BulkActions';
 
diff --git a/src/components/ResourceList/components/CheckableButton/CheckableButton.tsx b/src/components/ResourceList/components/CheckableButton/CheckableButton.tsx
index 76ffc006d91..d527bbf1492 100644
--- a/src/components/ResourceList/components/CheckableButton/CheckableButton.tsx
+++ b/src/components/ResourceList/components/CheckableButton/CheckableButton.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import {classNames} from '../../../../utilities/css';
-import Checkbox from '../../../Checkbox';
+import {Checkbox} from '../../../Checkbox';
 
 import styles from './CheckableButton.scss';
 
-export interface Props {
+export interface CheckableButtonProps {
   accessibilityLabel?: string;
   label?: string;
   selected?: boolean | 'indeterminate';
@@ -15,7 +15,7 @@ export interface Props {
   onToggleAll?(): void;
 }
 
-export default function CheckableButton({
+export function CheckableButton({
   accessibilityLabel,
   label = '',
   onToggleAll,
@@ -24,7 +24,7 @@ export default function CheckableButton({
   plain,
   measuring,
   disabled,
-}: Props) {
+}: CheckableButtonProps) {
   const className = plain
     ? classNames(styles.CheckableButton, styles['CheckableButton-plain'])
     : classNames(
diff --git a/src/components/ResourceList/components/CheckableButton/index.ts b/src/components/ResourceList/components/CheckableButton/index.ts
index a007b6e240d..e306e051779 100644
--- a/src/components/ResourceList/components/CheckableButton/index.ts
+++ b/src/components/ResourceList/components/CheckableButton/index.ts
@@ -1,4 +1 @@
-import CheckableButton from './CheckableButton';
-
-export {Props} from './CheckableButton';
-export default CheckableButton;
+export {CheckableButton, CheckableButtonProps} from './CheckableButton';
diff --git a/src/components/ResourceList/components/CheckableButton/tests/CheckableButton.test.tsx b/src/components/ResourceList/components/CheckableButton/tests/CheckableButton.test.tsx
index 339bdc3ac3b..d4408bfffc9 100644
--- a/src/components/ResourceList/components/CheckableButton/tests/CheckableButton.test.tsx
+++ b/src/components/ResourceList/components/CheckableButton/tests/CheckableButton.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Checkbox} from 'components';
-import CheckableButton from '../CheckableButton';
+import {CheckableButton} from '../CheckableButton';
 import {Key} from '../../../../../types';
 
 const CheckableButtonProps = {
diff --git a/src/components/ResourceList/components/FilterControl/FilterControl.tsx b/src/components/ResourceList/components/FilterControl/FilterControl.tsx
index 42c162cb267..3d76087e5cc 100644
--- a/src/components/ResourceList/components/FilterControl/FilterControl.tsx
+++ b/src/components/ResourceList/components/FilterControl/FilterControl.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import {SearchMinor} from '@shopify/polaris-icons';
 import {ComplexAction} from '../../../../types';
 import {buttonsFrom} from '../../../Button';
-import Icon from '../../../Icon';
-import FormLayout from '../../../FormLayout';
-import TextField from '../../../TextField';
-import Tag from '../../../Tag';
+import {Icon} from '../../../Icon';
+import {FormLayout} from '../../../FormLayout';
+import {TextField} from '../../../TextField';
+import {Tag} from '../../../Tag';
 import {useI18n} from '../../../../utilities/i18n';
 import {ResourceListContext} from '../../../../utilities/resource-list';
 
@@ -13,7 +13,7 @@ import {FilterCreator} from './components';
 import {AppliedFilter, Filter, FilterType, Operator} from './types';
 import styles from './FilterControl.scss';
 
-export interface Props {
+export interface FilterControlProps {
   searchValue?: string;
   appliedFilters?: AppliedFilter[];
   additionalAction?: ComplexAction;
@@ -26,7 +26,7 @@ export interface Props {
 }
 
 /** @deprecated Use <Filters /> instead. */
-export default function FilterControl({
+export function FilterControl({
   searchValue,
   appliedFilters = [],
   additionalAction,
@@ -36,7 +36,7 @@ export default function FilterControl({
   onSearchBlur,
   onSearchChange,
   onFiltersChange,
-}: Props) {
+}: FilterControlProps) {
   // eslint-disable-next-line no-console
   console.warn(
     'Deprecation: <FilterControl /> is deprecated. Use <Filters /> instead.',
diff --git a/src/components/ResourceList/components/FilterControl/components/DateSelector/DateSelector.tsx b/src/components/ResourceList/components/FilterControl/components/DateSelector/DateSelector.tsx
index 2d71844c2a4..c44026586d4 100644
--- a/src/components/ResourceList/components/FilterControl/components/DateSelector/DateSelector.tsx
+++ b/src/components/ResourceList/components/FilterControl/components/DateSelector/DateSelector.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import {CalendarMinor} from '@shopify/polaris-icons';
-import DatePicker, {Months, Year, Range} from '../../../../../DatePicker';
-import Select from '../../../../../Select';
-import TextField from '../../../../../TextField';
-import Icon from '../../../../../Icon';
+import {DatePicker, Months, Year, Range} from '../../../../../DatePicker';
+import {Select} from '../../../../../Select';
+import {TextField} from '../../../../../TextField';
+import {Icon} from '../../../../../Icon';
 import {
   withAppProvider,
   WithAppProviderProps,
@@ -15,7 +15,7 @@ const VALID_DATE_REGEX = /^\d{4}-\d{1,2}-\d{1,2}$/;
 
 type DateOptionType = 'past' | 'future' | 'full';
 
-export interface Props {
+export interface DateSelectorProps {
   dateOptionType?: DateOptionType;
   filterValue?: string;
   filterKey?: string;
@@ -34,7 +34,7 @@ interface State {
   initialConsumerFilterKey?: string;
 }
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = DateSelectorProps & WithAppProviderProps;
 
 export enum DateFilterOption {
   PastWeek = 'past_week',
@@ -433,4 +433,6 @@ function formatDateForLocalTimezone(date: Date) {
   return formattedDate.toISOString();
 }
 
-export default withAppProvider<Props>()(DateSelector);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<DateSelectorProps>()(DateSelector);
diff --git a/src/components/ResourceList/components/FilterControl/components/DateSelector/index.ts b/src/components/ResourceList/components/FilterControl/components/DateSelector/index.ts
index 25dd9b4863b..26675fde00b 100644
--- a/src/components/ResourceList/components/FilterControl/components/DateSelector/index.ts
+++ b/src/components/ResourceList/components/FilterControl/components/DateSelector/index.ts
@@ -1,4 +1,6 @@
-import DateSelector from './DateSelector';
+import DateSelector, {
+  DateSelectorProps,
+  DateFilterOption,
+} from './DateSelector';
 
-export {Props, DateFilterOption} from './DateSelector';
-export default DateSelector;
+export {DateSelector, DateSelectorProps, DateFilterOption};
diff --git a/src/components/ResourceList/components/FilterControl/components/DateSelector/tests/DateSelector.test.tsx b/src/components/ResourceList/components/FilterControl/components/DateSelector/tests/DateSelector.test.tsx
index 6e91ba04880..1f9f9072f92 100644
--- a/src/components/ResourceList/components/FilterControl/components/DateSelector/tests/DateSelector.test.tsx
+++ b/src/components/ResourceList/components/FilterControl/components/DateSelector/tests/DateSelector.test.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
 import {DatePicker, Select, TextField} from 'components';
 import {trigger, mountWithAppProvider} from 'test-utilities/legacy';
-import DateSelector, {Props, DateFilterOption} from '../DateSelector';
+import DateSelector, {
+  DateSelectorProps,
+  DateFilterOption,
+} from '../DateSelector';
 
 describe('<DateSelector />', () => {
-  const mockDefaultProps: Props = {
+  const mockDefaultProps: DateSelectorProps = {
     filterKey: 'starts',
     filterMinKey: 'starts_min',
     filterMaxKey: 'starts_max',
diff --git a/src/components/ResourceList/components/FilterControl/components/FilterCreator/FilterCreator.tsx b/src/components/ResourceList/components/FilterControl/components/FilterCreator/FilterCreator.tsx
index 71c9383bbe5..3844d5f04ff 100644
--- a/src/components/ResourceList/components/FilterControl/components/FilterCreator/FilterCreator.tsx
+++ b/src/components/ResourceList/components/FilterControl/components/FilterCreator/FilterCreator.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
-import Button from '../../../../../Button';
-import Popover from '../../../../../Popover';
-import Select from '../../../../../Select';
-import FormLayout from '../../../../../FormLayout';
-import Form from '../../../../../Form';
+import {Button} from '../../../../../Button';
+import {Popover} from '../../../../../Popover';
+import {Select} from '../../../../../Select';
+import {FormLayout} from '../../../../../FormLayout';
+import {Form} from '../../../../../Form';
 import {
   withAppProvider,
   WithAppProviderProps,
 } from '../../../../../../utilities/with-app-provider';
 
-import FilterValueSelector from '../FilterValueSelector';
+import {FilterValueSelector} from '../FilterValueSelector';
 import {AppliedFilter, Filter, Operator} from '../../types';
 
-export interface Props {
+export interface FilterCreatorProps {
   filters: Filter[];
   resourceName: {
     singular: string;
@@ -22,7 +22,7 @@ export interface Props {
   onAddFilter?(newFilter: AppliedFilter): void;
 }
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = FilterCreatorProps & WithAppProviderProps;
 
 interface State {
   popoverActive: boolean;
@@ -207,4 +207,6 @@ class FilterCreator extends React.PureComponent<CombinedProps, State> {
   };
 }
 
-export default withAppProvider<Props>()(FilterCreator);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<FilterCreatorProps>()(FilterCreator);
diff --git a/src/components/ResourceList/components/FilterControl/components/FilterCreator/index.ts b/src/components/ResourceList/components/FilterControl/components/FilterCreator/index.ts
index eeb6ac39394..0fc1e954e3f 100644
--- a/src/components/ResourceList/components/FilterControl/components/FilterCreator/index.ts
+++ b/src/components/ResourceList/components/FilterControl/components/FilterCreator/index.ts
@@ -1,4 +1,3 @@
-import FilterCreator from './FilterCreator';
+import FilterCreator, {FilterCreatorProps} from './FilterCreator';
 
-export {Props} from './FilterCreator';
-export default FilterCreator;
+export {FilterCreator, FilterCreatorProps};
diff --git a/src/components/ResourceList/components/FilterControl/components/FilterCreator/tests/FilterCreator.test.tsx b/src/components/ResourceList/components/FilterControl/components/FilterCreator/tests/FilterCreator.test.tsx
index 24d30de94f9..06ee2779375 100644
--- a/src/components/ResourceList/components/FilterControl/components/FilterCreator/tests/FilterCreator.test.tsx
+++ b/src/components/ResourceList/components/FilterControl/components/FilterCreator/tests/FilterCreator.test.tsx
@@ -6,12 +6,12 @@ import {
   mountWithAppProvider,
 } from 'test-utilities/legacy';
 import {Button, Select, Popover} from 'components';
-import FilterCreator, {Props} from '../FilterCreator';
-import FilterValueSelector from '../../FilterValueSelector';
+import FilterCreator, {FilterCreatorProps} from '../FilterCreator';
+import {FilterValueSelector} from '../../FilterValueSelector';
 import {FilterType} from '../../../types';
 
 describe('<FilterCreator />', () => {
-  const mockDefaultProps: Props = {
+  const mockDefaultProps: FilterCreatorProps = {
     filters: [
       {
         key: 'filterKey',
@@ -293,25 +293,28 @@ describe('<FilterCreator />', () => {
   });
 });
 
-function activatePopover(wrapper: ReactWrapper<Props, any>) {
+function activatePopover(wrapper: ReactWrapper<FilterCreatorProps, any>) {
   trigger(findByTestID(wrapper, 'FilterCreator-FilterActivator'), 'onClick');
 }
 
-function findFilterKeySelect(popover: ReactWrapper<Props, any>) {
+function findFilterKeySelect(popover: ReactWrapper<FilterCreatorProps, any>) {
   return popover.find(Select);
 }
 
-function selectFilterKey(wrapper: ReactWrapper<Props, any>, filterKey: string) {
+function selectFilterKey(
+  wrapper: ReactWrapper<FilterCreatorProps, any>,
+  filterKey: string,
+) {
   trigger(wrapper.find(Select), 'onChange', filterKey);
 }
 
 function selectFilterValue(
-  wrapper: ReactWrapper<Props, any>,
+  wrapper: ReactWrapper<FilterCreatorProps, any>,
   filterValue: string,
 ) {
   trigger(wrapper.find(FilterValueSelector), 'onChange', filterValue);
 }
 
-function clickAddFilter(wrapper: ReactWrapper<Props, any>) {
+function clickAddFilter(wrapper: ReactWrapper<FilterCreatorProps, any>) {
   trigger(findByTestID(wrapper, 'FilterCreator-AddFilterButton'), 'onClick');
 }
diff --git a/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/FilterValueSelector.tsx b/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/FilterValueSelector.tsx
index 265de3b19c2..db22b8a3395 100644
--- a/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/FilterValueSelector.tsx
+++ b/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/FilterValueSelector.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import Select from '../../../../../Select';
-import Stack from '../../../../../Stack';
-import TextField from '../../../../../TextField';
+import {Select} from '../../../../../Select';
+import {Stack} from '../../../../../Stack';
+import {TextField} from '../../../../../TextField';
 import {
   withAppProvider,
   WithAppProviderProps,
 } from '../../../../../../utilities/with-app-provider';
-import DateSelector from '../DateSelector';
+import {DateSelector} from '../DateSelector';
 import {Filter, AppliedFilter, FilterType, Operator} from '../../types';
 
-export interface Props {
+export interface FilterValueSelectorProps {
   filter: Filter;
   filterKey?: string;
   value?: AppliedFilter['value'];
@@ -17,7 +17,7 @@ export interface Props {
   onFilterKeyChange(filterKey: string): void;
 }
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = FilterValueSelectorProps & WithAppProviderProps;
 
 class FilterValueSelector extends React.PureComponent<CombinedProps> {
   componentDidMount() {
@@ -133,4 +133,6 @@ function buildOperatorOptions(operatorText?: string | Operator[]) {
   });
 }
 
-export default withAppProvider<Props>()(FilterValueSelector);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<FilterValueSelectorProps>()(FilterValueSelector);
diff --git a/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/index.ts b/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/index.ts
index aa6dd909d3f..97a98de79ea 100644
--- a/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/index.ts
+++ b/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/index.ts
@@ -1,4 +1,5 @@
-import FilterValueSelector from './FilterValueSelector';
+import FilterValueSelector, {
+  FilterValueSelectorProps,
+} from './FilterValueSelector';
 
-export {Props} from './FilterValueSelector';
-export default FilterValueSelector;
+export {FilterValueSelector, FilterValueSelectorProps};
diff --git a/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/tests/FilterValueSelector.test.tsx b/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/tests/FilterValueSelector.test.tsx
index 817b587dba4..f6edc9a3381 100644
--- a/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/tests/FilterValueSelector.test.tsx
+++ b/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/tests/FilterValueSelector.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {trigger, mountWithAppProvider} from 'test-utilities/legacy';
 import {Select, TextField} from 'components';
 import FilterValueSelector from '../FilterValueSelector';
-import DateSelector from '../../DateSelector';
+import {DateSelector} from '../../DateSelector';
 import {Filter, FilterType, Operator} from '../../../types';
 
 describe('<FilterValueSelector />', () => {
diff --git a/src/components/ResourceList/components/FilterControl/components/index.ts b/src/components/ResourceList/components/FilterControl/components/index.ts
index da645318665..90956c75614 100644
--- a/src/components/ResourceList/components/FilterControl/components/index.ts
+++ b/src/components/ResourceList/components/FilterControl/components/index.ts
@@ -1,15 +1,12 @@
 export {
-  default as DateSelector,
-  Props as DateSelectorProps,
+  DateSelector,
+  DateSelectorProps,
   DateFilterOption,
 } from './DateSelector';
 
-export {
-  default as FilterCreator,
-  Props as FilterCreatorProps,
-} from './FilterCreator';
+export {FilterCreator, FilterCreatorProps} from './FilterCreator';
 
 export {
-  default as FilterValueSelector,
-  Props as FilterValueSelectorProps,
+  FilterValueSelector,
+  FilterValueSelectorProps,
 } from './FilterValueSelector';
diff --git a/src/components/ResourceList/components/FilterControl/index.ts b/src/components/ResourceList/components/FilterControl/index.ts
index 7210c2f9b51..a697516d187 100644
--- a/src/components/ResourceList/components/FilterControl/index.ts
+++ b/src/components/ResourceList/components/FilterControl/index.ts
@@ -1,7 +1,3 @@
-// eslint-disable-next-line import/no-deprecated
-import FilterControl from './FilterControl';
+export {FilterControl, FilterControlProps} from './FilterControl';
 
 export * from './types';
-export {Props} from './FilterControl';
-// eslint-disable-next-line import/no-deprecated
-export default FilterControl;
diff --git a/src/components/ResourceList/components/FilterControl/tests/FilterControl.test.tsx b/src/components/ResourceList/components/FilterControl/tests/FilterControl.test.tsx
index 26efeb85296..ea479e7e622 100644
--- a/src/components/ResourceList/components/FilterControl/tests/FilterControl.test.tsx
+++ b/src/components/ResourceList/components/FilterControl/tests/FilterControl.test.tsx
@@ -10,11 +10,11 @@ import {
   FilterDateSelector,
 } from '../types';
 // eslint-disable-next-line import/no-deprecated
-import FilterControl, {Props} from '../FilterControl';
+import {FilterControl, FilterControlProps} from '../FilterControl';
 import {FilterCreator, DateFilterOption} from '../components';
 
 describe('<FilterControl />', () => {
-  const mockDefaultProps: Props = {
+  const mockDefaultProps: FilterControlProps = {
     onSearchChange: noop,
   };
 
diff --git a/src/components/ResourceList/components/index.ts b/src/components/ResourceList/components/index.ts
index 0d24fcb2ee4..aec6a8ccd80 100644
--- a/src/components/ResourceList/components/index.ts
+++ b/src/components/ResourceList/components/index.ts
@@ -1,11 +1,5 @@
-export {default as BulkActions, Props as BulkActionsProps} from './BulkActions';
+export {BulkActions, BulkActionsProps} from './BulkActions';
 
-export {
-  default as CheckableButton,
-  Props as CheckableButtonProps,
-} from './CheckableButton';
+export {CheckableButton, CheckableButtonProps} from './CheckableButton';
 
-export {
-  default as FilterControl,
-  Props as FilterControlProps,
-} from './FilterControl';
+export {FilterControl, FilterControlProps} from './FilterControl';
diff --git a/src/components/ResourceList/index.ts b/src/components/ResourceList/index.ts
index 657971de2d2..0c70cbcc9c8 100644
--- a/src/components/ResourceList/index.ts
+++ b/src/components/ResourceList/index.ts
@@ -1,7 +1,5 @@
-import ResourceList from './ResourceList';
+import ResourceList, {ResourceListProps} from './ResourceList';
 
+export {ResourceList, ResourceListProps};
 export * from './components/FilterControl/types';
-export {Props as FilterControlProps} from './components/FilterControl';
-export {Props} from './ResourceList';
-
-export default ResourceList;
+export {FilterControlProps} from './components/FilterControl';
diff --git a/src/components/ResourcePicker/ResourcePicker.tsx b/src/components/ResourcePicker/ResourcePicker.tsx
index 0e0811b16bc..08fd41c8e68 100644
--- a/src/components/ResourcePicker/ResourcePicker.tsx
+++ b/src/components/ResourcePicker/ResourcePicker.tsx
@@ -13,7 +13,7 @@ export interface SelectPayload {
   selection: AppBridgeResourcePicker.ResourceSelection[];
 }
 
-export interface Props {
+export interface ResourcePickerProps {
   /** Whether the picker is open or not */
   open: boolean;
   /** The type of resource you want to pick */
@@ -40,7 +40,7 @@ export interface Props {
   onCancel?(): void;
 }
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = ResourcePickerProps & WithAppProviderProps;
 
 /** @deprecated Use `ResourcePicker` from `@shopify/app-bridge-react` instead. */
 class ResourcePicker extends React.PureComponent<CombinedProps, never> {
@@ -197,4 +197,6 @@ class ResourcePicker extends React.PureComponent<CombinedProps, never> {
   }
 }
 
-export default withAppProvider<Props>()(ResourcePicker);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<ResourcePickerProps>()(ResourcePicker);
diff --git a/src/components/ResourcePicker/index.ts b/src/components/ResourcePicker/index.ts
index 964a709cc6b..7ff3779bbe5 100644
--- a/src/components/ResourcePicker/index.ts
+++ b/src/components/ResourcePicker/index.ts
@@ -1,4 +1,3 @@
-import ResourcePicker from './ResourcePicker';
+import ResourcePicker, {ResourcePickerProps} from './ResourcePicker';
 
-export {Props} from './ResourcePicker';
-export default ResourcePicker;
+export {ResourcePicker, ResourcePickerProps};
diff --git a/src/components/ScrollLock/ScrollLock.tsx b/src/components/ScrollLock/ScrollLock.tsx
index 68e69fa2ad1..0b81f3b6b05 100644
--- a/src/components/ScrollLock/ScrollLock.tsx
+++ b/src/components/ScrollLock/ScrollLock.tsx
@@ -5,9 +5,9 @@ import {
   withAppProvider,
 } from '../../utilities/with-app-provider';
 
-export interface Props {}
+export interface ScrollLockProps {}
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = ScrollLockProps & WithAppProviderProps;
 class ScrollLock extends React.Component<CombinedProps, never> {
   componentDidMount() {
     const {scrollLockManager} = this.props.polaris;
@@ -24,4 +24,6 @@ class ScrollLock extends React.Component<CombinedProps, never> {
   }
 }
 
-export default withAppProvider<Props>()(ScrollLock);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<ScrollLockProps>()(ScrollLock);
diff --git a/src/components/ScrollLock/index.ts b/src/components/ScrollLock/index.ts
index e269f2fe87c..98cf07eca63 100644
--- a/src/components/ScrollLock/index.ts
+++ b/src/components/ScrollLock/index.ts
@@ -1,3 +1,3 @@
 import ScrollLock from './ScrollLock';
 
-export default ScrollLock;
+export {ScrollLock};
diff --git a/src/components/Scrollable/Scrollable.tsx b/src/components/Scrollable/Scrollable.tsx
index 6e0f81f6f4c..c34fb0c2bc5 100644
--- a/src/components/Scrollable/Scrollable.tsx
+++ b/src/components/Scrollable/Scrollable.tsx
@@ -23,7 +23,7 @@ const DELTA_PERCENTAGE = 0.2;
 const EVENTS_TO_LOCK = ['scroll', 'touchmove', 'wheel'];
 const PREFERS_REDUCED_MOTION = prefersReducedMotion();
 
-export interface Props extends React.HTMLProps<HTMLDivElement> {
+export interface ScrollableProps extends React.HTMLProps<HTMLDivElement> {
   /** Content to display in scrollable area */
   children?: React.ReactNode;
   /** Scroll content vertically */
@@ -44,7 +44,7 @@ interface State {
   scrollPosition: number;
 }
 
-export default class Scrollable extends React.Component<Props, State> {
+export class Scrollable extends React.Component<ScrollableProps, State> {
   static ScrollTo = ScrollTo;
   static forNode(node: HTMLElement): HTMLElement | Document {
     return (
diff --git a/src/components/Scrollable/components/ScrollTo/ScrollTo.tsx b/src/components/Scrollable/components/ScrollTo/ScrollTo.tsx
index a102e147f72..2739eaa7940 100644
--- a/src/components/Scrollable/components/ScrollTo/ScrollTo.tsx
+++ b/src/components/Scrollable/components/ScrollTo/ScrollTo.tsx
@@ -2,7 +2,7 @@ import React, {useContext, useEffect, useRef} from 'react';
 import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 import {ScrollableContext} from '../../context';
 
-export default function ScrollTo() {
+export function ScrollTo() {
   const anchorNode = useRef<HTMLAnchorElement>(null);
   const scrollToPosition = useContext(ScrollableContext);
 
diff --git a/src/components/Scrollable/components/ScrollTo/index.ts b/src/components/Scrollable/components/ScrollTo/index.ts
index 926456cb035..f26e7bf2415 100644
--- a/src/components/Scrollable/components/ScrollTo/index.ts
+++ b/src/components/Scrollable/components/ScrollTo/index.ts
@@ -1,3 +1 @@
-import ScrollTo from './ScrollTo';
-
-export default ScrollTo;
+export {ScrollTo} from './ScrollTo';
diff --git a/src/components/Scrollable/components/ScrollTo/tests/ScrollTo.test.tsx b/src/components/Scrollable/components/ScrollTo/tests/ScrollTo.test.tsx
index 4f9159040c5..db9863e6549 100644
--- a/src/components/Scrollable/components/ScrollTo/tests/ScrollTo.test.tsx
+++ b/src/components/Scrollable/components/ScrollTo/tests/ScrollTo.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import ScrollTo from '../ScrollTo';
+import {ScrollTo} from '../ScrollTo';
 import {ScrollableContext} from '../../../context';
 
 describe('<Scrollable.ScrollTo />', () => {
diff --git a/src/components/Scrollable/components/index.ts b/src/components/Scrollable/components/index.ts
index 3ff38e22692..f26e7bf2415 100644
--- a/src/components/Scrollable/components/index.ts
+++ b/src/components/Scrollable/components/index.ts
@@ -1 +1 @@
-export {default as ScrollTo} from './ScrollTo';
+export {ScrollTo} from './ScrollTo';
diff --git a/src/components/Scrollable/index.ts b/src/components/Scrollable/index.ts
index 3801c29149a..8b35847313a 100644
--- a/src/components/Scrollable/index.ts
+++ b/src/components/Scrollable/index.ts
@@ -1,4 +1 @@
-import Scrollable from './Scrollable';
-
-export {Props} from './Scrollable';
-export default Scrollable;
+export {Scrollable, ScrollableProps} from './Scrollable';
diff --git a/src/components/Scrollable/tests/Scrollable.test.tsx b/src/components/Scrollable/tests/Scrollable.test.tsx
index d5fcea8aab7..c01ddd612d6 100644
--- a/src/components/Scrollable/tests/Scrollable.test.tsx
+++ b/src/components/Scrollable/tests/Scrollable.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Scrollable from '../Scrollable';
+import {Scrollable} from '../Scrollable';
 import {ScrollableContext} from '../context';
 
 describe('<Scrollable />', () => {
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 66a866f5cf0..c2d4d904216 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -3,8 +3,8 @@ import {ArrowUpDownMinor} from '@shopify/polaris-icons';
 import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 
 import {classNames} from '../../utilities/css';
-import Labelled, {Action, helpTextID} from '../Labelled';
-import Icon from '../Icon';
+import {Labelled, Action, helpTextID} from '../Labelled';
+import {Icon} from '../Icon';
 import {Error} from '../../types';
 
 import styles from './Select.scss';
@@ -69,12 +69,12 @@ export interface BaseProps {
   onBlur?(): void;
 }
 
-export interface Props extends BaseProps {}
+export interface SelectProps extends BaseProps {}
 
 const PLACEHOLDER_VALUE = '';
 const getUniqueID = createUniqueIDFactory('Select');
 
-export default function Select({
+export function Select({
   options: optionsProp,
   label,
   labelAction,
@@ -90,7 +90,7 @@ export default function Select({
   onChange,
   onFocus,
   onBlur,
-}: Props) {
+}: SelectProps) {
   const labelHidden = labelInline ? true : labelHiddenProp;
 
   const className = classNames(
diff --git a/src/components/Select/index.ts b/src/components/Select/index.ts
index 8548c3a6c8c..7088f4d4f38 100644
--- a/src/components/Select/index.ts
+++ b/src/components/Select/index.ts
@@ -1,4 +1 @@
-import Select from './Select';
-
-export {Props, SelectOption, SelectGroup} from './Select';
-export default Select;
+export {Select, SelectProps, SelectOption, SelectGroup} from './Select';
diff --git a/src/components/Select/tests/Select.test.tsx b/src/components/Select/tests/Select.test.tsx
index 99bb92f9356..d2c5d8b474c 100644
--- a/src/components/Select/tests/Select.test.tsx
+++ b/src/components/Select/tests/Select.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {ReactWrapper} from 'enzyme';
 import {InlineError} from 'components';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Select from '../Select';
+import {Select} from '../Select';
 
 describe('<Select />', () => {
   describe('onChange()', () => {
diff --git a/src/components/SettingAction/SettingAction.tsx b/src/components/SettingAction/SettingAction.tsx
index 43a9d6e882f..f947dbab4bb 100644
--- a/src/components/SettingAction/SettingAction.tsx
+++ b/src/components/SettingAction/SettingAction.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import styles from './SettingAction.scss';
 
-export interface Props {
+export interface SettingActionProps {
   action?: React.ReactNode;
   children?: React.ReactNode;
 }
 
-export default function SettingAction({action, children}: Props) {
+export function SettingAction({action, children}: SettingActionProps) {
   return (
     <div className={styles.SettingAction}>
       <div className={styles.Setting}>{children}</div>
diff --git a/src/components/SettingAction/index.ts b/src/components/SettingAction/index.ts
index cf39816ad0c..733434ec73c 100644
--- a/src/components/SettingAction/index.ts
+++ b/src/components/SettingAction/index.ts
@@ -1,4 +1 @@
-import SettingAction from './SettingAction';
-
-export {Props} from './SettingAction';
-export default SettingAction;
+export {SettingAction, SettingActionProps} from './SettingAction';
diff --git a/src/components/SettingToggle/SettingToggle.tsx b/src/components/SettingToggle/SettingToggle.tsx
index 6fbe4b70ae0..c7b614be2cf 100644
--- a/src/components/SettingToggle/SettingToggle.tsx
+++ b/src/components/SettingToggle/SettingToggle.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
 import {ComplexAction} from '../../types';
-import SettingAction from '../SettingAction';
+import {SettingAction} from '../SettingAction';
 import {buttonFrom} from '../Button';
-import Card from '../Card';
+import {Card} from '../Card';
 
-export interface Props {
+export interface SettingToggleProps {
   /** Inner content of the card */
   children?: React.ReactNode;
   /** Card header actions */
@@ -14,7 +14,7 @@ export interface Props {
   enabled?: boolean;
 }
 
-export default function SettingToggle({enabled, action, children}: Props) {
+export function SettingToggle({enabled, action, children}: SettingToggleProps) {
   const actionMarkup = action ? buttonFrom(action, {primary: !enabled}) : null;
 
   return (
diff --git a/src/components/SettingToggle/index.ts b/src/components/SettingToggle/index.ts
index 988594e64d9..1f63e282772 100644
--- a/src/components/SettingToggle/index.ts
+++ b/src/components/SettingToggle/index.ts
@@ -1,4 +1 @@
-import SettingToggle from './SettingToggle';
-
-export {Props} from './SettingToggle';
-export default SettingToggle;
+export {SettingToggle, SettingToggleProps} from './SettingToggle';
diff --git a/src/components/SettingToggle/tests/SettingToggle.test.tsx b/src/components/SettingToggle/tests/SettingToggle.test.tsx
index ae719a74904..013d071e0af 100644
--- a/src/components/SettingToggle/tests/SettingToggle.test.tsx
+++ b/src/components/SettingToggle/tests/SettingToggle.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import SettingAction from 'components/SettingAction';
-import SettingToggle from '../SettingToggle';
+import {SettingAction} from 'components/SettingAction';
+import {SettingToggle} from '../SettingToggle';
 
 describe('<SettingToggle />', () => {
   function getComponentProps(node: React.ReactNode) {
diff --git a/src/components/Sheet/Sheet.tsx b/src/components/Sheet/Sheet.tsx
index 38029d1f1c1..6446e7f113e 100644
--- a/src/components/Sheet/Sheet.tsx
+++ b/src/components/Sheet/Sheet.tsx
@@ -8,11 +8,11 @@ import {navigationBarCollapsed} from '../../utilities/breakpoints';
 import {Key} from '../../types';
 import {layer, overlay, Duration} from '../shared';
 
-import Backdrop from '../Backdrop';
-import TrapFocus from '../TrapFocus';
-import Portal from '../Portal';
-import KeypressListener from '../KeypressListener';
-import EventListener from '../EventListener';
+import {Backdrop} from '../Backdrop';
+import {TrapFocus} from '../TrapFocus';
+import {Portal} from '../Portal';
+import {KeypressListener} from '../KeypressListener';
+import {EventListener} from '../EventListener';
 
 import styles from './Sheet.scss';
 
@@ -30,7 +30,7 @@ export const RIGHT_CLASS_NAMES = {
   exitActive: classNames(styles.Right, styles.exitRightActive),
 };
 
-export interface Props {
+export interface SheetProps {
   /** Whether or not the sheet is open */
   open: boolean;
   /** The child elements to render in the sheet */
@@ -43,13 +43,13 @@ export interface Props {
   onExit?(): void;
 }
 
-export default function Sheet({
+export function Sheet({
   children,
   open,
   onClose,
   onEntered,
   onExit,
-}: Props) {
+}: SheetProps) {
   const container = useRef<HTMLDivElement>(null);
   const [mobile, setMobile] = useState(false);
 
diff --git a/src/components/Sheet/index.ts b/src/components/Sheet/index.ts
index 7dacb309d3b..56a19964249 100644
--- a/src/components/Sheet/index.ts
+++ b/src/components/Sheet/index.ts
@@ -1,3 +1 @@
-import Sheet from './Sheet';
-
-export default Sheet;
+export {Sheet} from './Sheet';
diff --git a/src/components/Sheet/tests/Sheet.test.tsx b/src/components/Sheet/tests/Sheet.test.tsx
index dadc84dbbb4..ca4af884e64 100644
--- a/src/components/Sheet/tests/Sheet.test.tsx
+++ b/src/components/Sheet/tests/Sheet.test.tsx
@@ -3,8 +3,8 @@ import {CSSTransition} from '@material-ui/react-transition-group';
 import {matchMedia} from '@shopify/jest-dom-mocks';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 
-import Backdrop from 'components/Backdrop';
-import Sheet, {BOTTOM_CLASS_NAMES, RIGHT_CLASS_NAMES} from '../Sheet';
+import {Backdrop} from 'components/Backdrop';
+import {Sheet, BOTTOM_CLASS_NAMES, RIGHT_CLASS_NAMES} from '../Sheet';
 
 describe('<Sheet />', () => {
   beforeEach(() => {
diff --git a/src/components/SkeletonBodyText/SkeletonBodyText.tsx b/src/components/SkeletonBodyText/SkeletonBodyText.tsx
index a56933bbd73..20176035c4e 100644
--- a/src/components/SkeletonBodyText/SkeletonBodyText.tsx
+++ b/src/components/SkeletonBodyText/SkeletonBodyText.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './SkeletonBodyText.scss';
 
-export interface Props {
+export interface SkeletonBodyTextProps {
   /**
    * Number of lines to display
    * @default 3
@@ -9,7 +9,7 @@ export interface Props {
   lines?: number;
 }
 
-export default function SkeletonBodyText({lines = 3}: Props) {
+export function SkeletonBodyText({lines = 3}: SkeletonBodyTextProps) {
   const bodyTextLines = [];
 
   for (let i = 0; i < lines; i++) {
diff --git a/src/components/SkeletonBodyText/index.ts b/src/components/SkeletonBodyText/index.ts
index f475619e36f..bcc300792f3 100644
--- a/src/components/SkeletonBodyText/index.ts
+++ b/src/components/SkeletonBodyText/index.ts
@@ -1,4 +1 @@
-import SkeletonBodyText from './SkeletonBodyText';
-
-export {Props} from './SkeletonBodyText';
-export default SkeletonBodyText;
+export {SkeletonBodyText, SkeletonBodyTextProps} from './SkeletonBodyText';
diff --git a/src/components/SkeletonBodyText/tests/SkeletonBodyText.test.tsx b/src/components/SkeletonBodyText/tests/SkeletonBodyText.test.tsx
index e3aef0bbf31..8a06a3ead24 100644
--- a/src/components/SkeletonBodyText/tests/SkeletonBodyText.test.tsx
+++ b/src/components/SkeletonBodyText/tests/SkeletonBodyText.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import SkeletonBodyText from '../SkeletonBodyText';
+import {SkeletonBodyText} from '../SkeletonBodyText';
 
 describe('<SkeletonBodyText />', () => {
   it('renders the amount of lines provided', () => {
diff --git a/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx b/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx
index 810e75f3839..d79f7a455f5 100644
--- a/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx
+++ b/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx
@@ -4,7 +4,7 @@ import styles from './SkeletonDisplayText.scss';
 
 export type Size = 'small' | 'medium' | 'large' | 'extraLarge';
 
-export interface Props {
+export interface SkeletonDisplayTextProps {
   /**
    * Size of the text
    * @default 'medium'
@@ -12,7 +12,9 @@ export interface Props {
   size?: Size;
 }
 
-export default function SkeletonDisplayText({size = 'medium'}: Props) {
+export function SkeletonDisplayText({
+  size = 'medium',
+}: SkeletonDisplayTextProps) {
   const className = classNames(
     styles.DisplayText,
     size && styles[variationName('size', size)],
diff --git a/src/components/SkeletonDisplayText/index.ts b/src/components/SkeletonDisplayText/index.ts
index b0750a8abdb..fa1554820c2 100644
--- a/src/components/SkeletonDisplayText/index.ts
+++ b/src/components/SkeletonDisplayText/index.ts
@@ -1,4 +1,4 @@
-import SkeletonDisplayText from './SkeletonDisplayText';
-
-export {Props} from './SkeletonDisplayText';
-export default SkeletonDisplayText;
+export {
+  SkeletonDisplayText,
+  SkeletonDisplayTextProps,
+} from './SkeletonDisplayText';
diff --git a/src/components/SkeletonDisplayText/tests/SkeletonDisplayText.test.tsx b/src/components/SkeletonDisplayText/tests/SkeletonDisplayText.test.tsx
index 07426c53397..5bab021b462 100644
--- a/src/components/SkeletonDisplayText/tests/SkeletonDisplayText.test.tsx
+++ b/src/components/SkeletonDisplayText/tests/SkeletonDisplayText.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import SkeletonDisplayText from '../SkeletonDisplayText';
+import {SkeletonDisplayText} from '../SkeletonDisplayText';
 
 describe('<SkeletonDisplayText />', () => {
   it('renders', () => {
diff --git a/src/components/SkeletonPage/SkeletonPage.tsx b/src/components/SkeletonPage/SkeletonPage.tsx
index 70c6ca3647f..777b0f3831b 100644
--- a/src/components/SkeletonPage/SkeletonPage.tsx
+++ b/src/components/SkeletonPage/SkeletonPage.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {classNames} from '../../utilities/css';
-import DisplayText from '../DisplayText';
-import SkeletonDisplayText from '../SkeletonDisplayText';
-import SkeletonBodyText from '../SkeletonBodyText';
+import {DisplayText} from '../DisplayText';
+import {SkeletonDisplayText} from '../SkeletonDisplayText';
+import {SkeletonBodyText} from '../SkeletonBodyText';
 
 import {
   withAppProvider,
@@ -10,7 +10,7 @@ import {
 } from '../../utilities/with-app-provider';
 import styles from './SkeletonPage.scss';
 
-export interface Props {
+export interface SkeletonPageProps {
   /** Page title, in large type */
   title?: string;
   /** Remove the normal max-width on the page */
@@ -34,7 +34,9 @@ interface DeprecatedProps {
   singleColumn?: boolean;
 }
 
-export type CombinedProps = Props & DeprecatedProps & WithAppProviderProps;
+export type CombinedProps = SkeletonPageProps &
+  DeprecatedProps &
+  WithAppProviderProps;
 
 class SkeletonPage extends React.PureComponent<CombinedProps, never> {
   render() {
@@ -136,4 +138,8 @@ function renderTitle(title: string) {
   return <div className={styles.Title}>{titleContent}</div>;
 }
 
-export default withAppProvider<Props & DeprecatedProps>()(SkeletonPage);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<SkeletonPageProps & DeprecatedProps>()(
+  SkeletonPage,
+);
diff --git a/src/components/SkeletonPage/index.ts b/src/components/SkeletonPage/index.ts
index a3921d12d75..a927fbc979c 100644
--- a/src/components/SkeletonPage/index.ts
+++ b/src/components/SkeletonPage/index.ts
@@ -1,4 +1,3 @@
-import SkeletongBodyText from './SkeletonPage';
+import SkeletonPage, {SkeletonPageProps} from './SkeletonPage';
 
-export {Props} from './SkeletonPage';
-export default SkeletongBodyText;
+export {SkeletonPage, SkeletonPageProps};
diff --git a/src/components/SkeletonThumbnail/SkeletonThumbnail.tsx b/src/components/SkeletonThumbnail/SkeletonThumbnail.tsx
index 90de58723e0..8d3253bf304 100644
--- a/src/components/SkeletonThumbnail/SkeletonThumbnail.tsx
+++ b/src/components/SkeletonThumbnail/SkeletonThumbnail.tsx
@@ -4,7 +4,7 @@ import styles from './SkeletonThumbnail.scss';
 
 export type Size = 'small' | 'medium' | 'large';
 
-export interface Props {
+export interface SkeletonThumbnailProps {
   /**
    * Size of the thumbnail
    * @default 'medium'
@@ -12,7 +12,7 @@ export interface Props {
   size?: Size;
 }
 
-export default function SkeletonThumbnail({size = 'medium'}: Props) {
+export function SkeletonThumbnail({size = 'medium'}: SkeletonThumbnailProps) {
   const className = classNames(
     styles.SkeletonThumbnail,
     size && styles[variationName('size', size)],
diff --git a/src/components/SkeletonThumbnail/index.ts b/src/components/SkeletonThumbnail/index.ts
index f638a10b69a..8c57941afbf 100644
--- a/src/components/SkeletonThumbnail/index.ts
+++ b/src/components/SkeletonThumbnail/index.ts
@@ -1,4 +1 @@
-import SkeletonThumbnail from './SkeletonThumbnail';
-
-export {Props} from './SkeletonThumbnail';
-export default SkeletonThumbnail;
+export {SkeletonThumbnail, SkeletonThumbnailProps} from './SkeletonThumbnail';
diff --git a/src/components/SkeletonThumbnail/tests/SkeletonThumbnail.test.tsx b/src/components/SkeletonThumbnail/tests/SkeletonThumbnail.test.tsx
index c8042fc012d..ec4dc0e3596 100644
--- a/src/components/SkeletonThumbnail/tests/SkeletonThumbnail.test.tsx
+++ b/src/components/SkeletonThumbnail/tests/SkeletonThumbnail.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import SkeletonThumbnail from '../SkeletonThumbnail';
+import {SkeletonThumbnail} from '../SkeletonThumbnail';
 
 describe('<SkeletonThumbnail />', () => {
   it('renders', () => {
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
index 628d133575c..3042fe8b437 100644
--- a/src/components/Spinner/Spinner.tsx
+++ b/src/components/Spinner/Spinner.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {classNames, variationName} from '../../utilities/css';
 import {useI18n} from '../../utilities/i18n';
-import Image from '../Image';
+import {Image} from '../Image';
 import styles from './Spinner.scss';
 import {spinnerLarge, spinnerSmall} from './images';
 
@@ -11,7 +11,7 @@ export type Size = 'small' | 'large';
 
 const COLORS_FOR_LARGE_SPINNER = ['teal', 'inkLightest'];
 
-export interface Props {
+export interface SpinnerProps {
   /**
    * Color of spinner
    * @default 'teal'
@@ -26,11 +26,11 @@ export interface Props {
   accessibilityLabel?: string;
 }
 
-export default function Spinner({
+export function Spinner({
   size = 'large',
   color = 'teal',
   accessibilityLabel,
-}: Props) {
+}: SpinnerProps) {
   const intl = useI18n();
 
   if (size === 'large' && COLORS_FOR_LARGE_SPINNER.indexOf(color) < 0) {
diff --git a/src/components/Spinner/images/index.ts b/src/components/Spinner/images/index.ts
index 71acb2f7973..baf5fe4c702 100644
--- a/src/components/Spinner/images/index.ts
+++ b/src/components/Spinner/images/index.ts
@@ -1,2 +1,3 @@
 export {default as spinnerLarge} from './spinner-large.svg';
+
 export {default as spinnerSmall} from './spinner-small.svg';
diff --git a/src/components/Spinner/index.ts b/src/components/Spinner/index.ts
index ac881d2a0ba..79b79fec8a8 100644
--- a/src/components/Spinner/index.ts
+++ b/src/components/Spinner/index.ts
@@ -1,4 +1 @@
-import Spinner from './Spinner';
-
-export {Props} from './Spinner';
-export default Spinner;
+export {Spinner, SpinnerProps} from './Spinner';
diff --git a/src/components/Spinner/tests/Spinner.test.tsx b/src/components/Spinner/tests/Spinner.test.tsx
index d8cdefcbcd4..38224ffb2bd 100644
--- a/src/components/Spinner/tests/Spinner.test.tsx
+++ b/src/components/Spinner/tests/Spinner.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Spinner, {Color} from '../Spinner';
-import Image from '../../Image';
+import {Spinner, Color} from '../Spinner';
+import {Image} from '../../Image';
 
 describe('<Spinner />', () => {
   describe('accessibilityLabel', () => {
diff --git a/src/components/Stack/Stack.tsx b/src/components/Stack/Stack.tsx
index 3a7361cb0eb..8287bcc4878 100644
--- a/src/components/Stack/Stack.tsx
+++ b/src/components/Stack/Stack.tsx
@@ -6,7 +6,9 @@ import {Item} from './components';
 import styles from './Stack.scss';
 
 export type Spacing = 'extraTight' | 'tight' | 'loose' | 'extraLoose' | 'none';
+
 export type Alignment = 'leading' | 'trailing' | 'center' | 'fill' | 'baseline';
+
 export type Distribution =
   | 'equalSpacing'
   | 'leading'
@@ -15,7 +17,7 @@ export type Distribution =
   | 'fill'
   | 'fillEvenly';
 
-export interface Props {
+export interface StackProps {
   /** Elements to display inside stack */
   children?: React.ReactNode;
   /** Wrap stack elements to additional rows as needed on small screens (Defaults to true) */
@@ -30,7 +32,7 @@ export interface Props {
   distribution?: Distribution;
 }
 
-export default class Stack extends React.PureComponent<Props, never> {
+export class Stack extends React.PureComponent<StackProps, never> {
   static Item = Item;
 
   render() {
diff --git a/src/components/Stack/components/Item/Item.tsx b/src/components/Stack/components/Item/Item.tsx
index c1a43ae5c1f..750adac1206 100644
--- a/src/components/Stack/components/Item/Item.tsx
+++ b/src/components/Stack/components/Item/Item.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {classNames} from '../../../../utilities/css';
 import styles from '../../Stack.scss';
 
-export interface Props {
+export interface ItemProps {
   /** Elements to display inside item */
   children?: React.ReactNode;
   /** Fill the remaining horizontal space in the stack with the item  */
@@ -12,7 +12,7 @@ export interface Props {
    */
 }
 
-export default function Item({children, fill}: Props) {
+export function Item({children, fill}: ItemProps) {
   const className = classNames(styles.Item, fill && styles['Item-fill']);
 
   return <div className={className}>{children}</div>;
diff --git a/src/components/Stack/components/Item/index.ts b/src/components/Stack/components/Item/index.ts
index 02c0b0e1951..e158f53cc0d 100644
--- a/src/components/Stack/components/Item/index.ts
+++ b/src/components/Stack/components/Item/index.ts
@@ -1,4 +1 @@
-import Item from './Item';
-
-export {Props} from './Item';
-export default Item;
+export {Item, ItemProps} from './Item';
diff --git a/src/components/Stack/components/index.ts b/src/components/Stack/components/index.ts
index 584c7f5e9a9..e158f53cc0d 100644
--- a/src/components/Stack/components/index.ts
+++ b/src/components/Stack/components/index.ts
@@ -1 +1 @@
-export {default as Item, Props as ItemProps} from './Item';
+export {Item, ItemProps} from './Item';
diff --git a/src/components/Stack/index.ts b/src/components/Stack/index.ts
index 38c9b39c116..16af572bab2 100644
--- a/src/components/Stack/index.ts
+++ b/src/components/Stack/index.ts
@@ -1,4 +1 @@
-import Stack from './Stack';
-
-export {Props, Alignment, Distribution, Spacing} from './Stack';
-export default Stack;
+export {Stack, StackProps, Alignment, Distribution, Spacing} from './Stack';
diff --git a/src/components/Sticky/Sticky.tsx b/src/components/Sticky/Sticky.tsx
index 44fa1143e43..8b9a8e7ab16 100644
--- a/src/components/Sticky/Sticky.tsx
+++ b/src/components/Sticky/Sticky.tsx
@@ -10,7 +10,7 @@ interface State {
   style: Object;
 }
 
-export type Props = {
+export type StickyProps = {
   /** Element outlining the fixed position boundaries */
   boundingElement?: HTMLElement | null;
   /** Offset vertical spacing from the top of the scrollable container */
@@ -21,7 +21,7 @@ export type Props = {
   | {children: React.ReactNode}
   | {children(isSticky: boolean): React.ReactNode});
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = StickyProps & WithAppProviderProps;
 
 class Sticky extends React.Component<CombinedProps, State> {
   state: State = {
@@ -122,4 +122,6 @@ function isFunction(arg: any): arg is Function {
   return typeof arg === 'function';
 }
 
-export default withAppProvider<Props>()(Sticky);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<StickyProps>()(Sticky);
diff --git a/src/components/Sticky/index.ts b/src/components/Sticky/index.ts
index 64d8eafa7fa..dfc18169dae 100644
--- a/src/components/Sticky/index.ts
+++ b/src/components/Sticky/index.ts
@@ -1,4 +1,3 @@
-import Sticky from './Sticky';
+import Sticky, {StickyProps} from './Sticky';
 
-export {Props} from './Sticky';
-export default Sticky;
+export {Sticky, StickyProps};
diff --git a/src/components/Subheading/Subheading.tsx b/src/components/Subheading/Subheading.tsx
index da9a1dfc58c..22d3e936a3e 100644
--- a/src/components/Subheading/Subheading.tsx
+++ b/src/components/Subheading/Subheading.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {HeadingTagName} from '../../types';
 import styles from './Subheading.scss';
 
-export interface Props {
+export interface SubheadingProps {
   /**
    * The element name to use for the subheading
    * @default 'h3'
@@ -12,7 +12,10 @@ export interface Props {
   children?: React.ReactNode;
 }
 
-export default function Subheading({element: Element = 'h3', children}: Props) {
+export function Subheading({
+  element: Element = 'h3',
+  children,
+}: SubheadingProps) {
   const ariaLabel = typeof children === 'string' ? children : undefined;
   return (
     <Element aria-label={ariaLabel} className={styles.Subheading}>
diff --git a/src/components/Subheading/index.ts b/src/components/Subheading/index.ts
index 223affe4c29..1323234d504 100644
--- a/src/components/Subheading/index.ts
+++ b/src/components/Subheading/index.ts
@@ -1,4 +1 @@
-import Subheading from './Subheading';
-
-export {Props} from './Subheading';
-export default Subheading;
+export {Subheading, SubheadingProps} from './Subheading';
diff --git a/src/components/Subheading/tests/Subheading.test.tsx b/src/components/Subheading/tests/Subheading.test.tsx
index aeaee52b7f0..03af254bd61 100644
--- a/src/components/Subheading/tests/Subheading.test.tsx
+++ b/src/components/Subheading/tests/Subheading.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Button} from 'components';
-import Subheading from '../Subheading';
+import {Subheading} from '../Subheading';
 
 describe('<Subheading />', () => {
   describe('children', () => {
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 24524ecaddd..bb0fffedfad 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import {HorizontalDotsMinor} from '@shopify/polaris-icons';
 import {classNames} from '../../utilities/css';
 
-import Icon from '../Icon';
-import Popover from '../Popover';
+import {Icon} from '../Icon';
+import {Popover} from '../Popover';
 
 import {
   withAppProvider,
@@ -16,7 +16,7 @@ import {List, Panel, Tab, TabMeasurer, TabMeasurements} from './components';
 
 import styles from './Tabs.scss';
 
-export interface Props {
+export interface TabsProps {
   /** Content to display in tabs */
   children?: React.ReactNode;
   /** Index of selected tab */
@@ -29,7 +29,7 @@ export interface Props {
   onSelect?(selectedTabIndex: number): void;
 }
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = TabsProps & WithAppProviderProps;
 
 interface State {
   disclosureWidth: number;
@@ -42,7 +42,7 @@ interface State {
 }
 
 class Tabs extends React.PureComponent<CombinedProps, State> {
-  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
+  static getDerivedStateFromProps(nextProps: TabsProps, prevState: State) {
     const {disclosureWidth, tabWidths, containerWidth} = prevState;
     const {visibleTabs, hiddenTabs} = getVisibleAndHiddenTabIndices(
       nextProps.tabs,
@@ -354,4 +354,6 @@ function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {
   }
 }
 
-export default withAppProvider<Props>()(Tabs);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<TabsProps>()(Tabs);
diff --git a/src/components/Tabs/components/Item/Item.tsx b/src/components/Tabs/components/Item/Item.tsx
index 02a86307525..df68b4299b7 100644
--- a/src/components/Tabs/components/Item/Item.tsx
+++ b/src/components/Tabs/components/Item/Item.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
 import styles from '../../Tabs.scss';
-import UnstyledLink from '../../../UnstyledLink';
+import {UnstyledLink} from '../../../UnstyledLink';
 
-export interface Props {
+export interface ItemProps {
   id: string;
   focused: boolean;
   panelID?: string;
@@ -13,7 +13,7 @@ export interface Props {
   onClick?(): void;
 }
 
-export default class Item extends React.PureComponent<Props, never> {
+export class Item extends React.PureComponent<ItemProps, never> {
   private focusedNode: HTMLElement | React.ReactElement<any> | null = null;
 
   componentDidMount() {
diff --git a/src/components/Tabs/components/Item/index.ts b/src/components/Tabs/components/Item/index.ts
index 02c0b0e1951..e158f53cc0d 100644
--- a/src/components/Tabs/components/Item/index.ts
+++ b/src/components/Tabs/components/Item/index.ts
@@ -1,4 +1 @@
-import Item from './Item';
-
-export {Props} from './Item';
-export default Item;
+export {Item, ItemProps} from './Item';
diff --git a/src/components/Tabs/components/Item/tests/Item.test.tsx b/src/components/Tabs/components/Item/tests/Item.test.tsx
index d732d2f0767..dc0dd2c04b1 100644
--- a/src/components/Tabs/components/Item/tests/Item.test.tsx
+++ b/src/components/Tabs/components/Item/tests/Item.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {UnstyledLink} from 'components';
-import Item from '../Item';
+import {Item} from '../Item';
 
 describe('<Item />', () => {
   const mockProps = {
diff --git a/src/components/Tabs/components/List/List.tsx b/src/components/Tabs/components/List/List.tsx
index 161616136aa..af50a02cb22 100644
--- a/src/components/Tabs/components/List/List.tsx
+++ b/src/components/Tabs/components/List/List.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
 
-import Item from '../Item';
+import {Item} from '../Item';
 import {TabDescriptor} from '../../types';
 import styles from '../../Tabs.scss';
 
-export interface Props {
+export interface ListProps {
   focusIndex: number;
   disclosureTabs: TabDescriptor[];
   onClick?(id: string): void;
   onKeyPress?(event: React.KeyboardEvent<HTMLElement>): void;
 }
 
-export default class List extends React.PureComponent<Props, never> {
+export class List extends React.PureComponent<ListProps, never> {
   render() {
     const {focusIndex, disclosureTabs, onClick = noop} = this.props;
     const tabs = disclosureTabs.map(({id, content, ...tabProps}, index) => {
diff --git a/src/components/Tabs/components/List/index.ts b/src/components/Tabs/components/List/index.ts
index 4cd7c659b3d..066b598fc96 100644
--- a/src/components/Tabs/components/List/index.ts
+++ b/src/components/Tabs/components/List/index.ts
@@ -1,4 +1 @@
-import List from './List';
-
-export {Props} from './List';
-export default List;
+export {List, ListProps} from './List';
diff --git a/src/components/Tabs/components/List/tests/List.test.tsx b/src/components/Tabs/components/List/tests/List.test.tsx
index a306f1c064d..c7589975652 100644
--- a/src/components/Tabs/components/List/tests/List.test.tsx
+++ b/src/components/Tabs/components/List/tests/List.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import List from '../List';
-import Item from '../../Item';
+import {List} from '../List';
+import {Item} from '../../Item';
 
 describe('<List />', () => {
   const mockProps = {
diff --git a/src/components/Tabs/components/Panel/Panel.tsx b/src/components/Tabs/components/Panel/Panel.tsx
index 3f76590dbae..a7bd113f58e 100644
--- a/src/components/Tabs/components/Panel/Panel.tsx
+++ b/src/components/Tabs/components/Panel/Panel.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 import {classNames} from '../../../../utilities/css';
 import styles from '../../Tabs.scss';
 
-export interface Props {
+export interface PanelProps {
   hidden?: boolean;
   id: string;
   tabID: string;
   children?: React.ReactNode;
 }
 
-export default function Panel({hidden, id, tabID, children}: Props) {
+export function Panel({hidden, id, tabID, children}: PanelProps) {
   const className = classNames(styles.Panel, hidden && styles['Panel-hidden']);
   return (
     <div
diff --git a/src/components/Tabs/components/Panel/index.ts b/src/components/Tabs/components/Panel/index.ts
index 1a8c781c386..f960e003de8 100644
--- a/src/components/Tabs/components/Panel/index.ts
+++ b/src/components/Tabs/components/Panel/index.ts
@@ -1,4 +1 @@
-import Panel from './Panel';
-
-export {Props} from './Panel';
-export default Panel;
+export {Panel, PanelProps} from './Panel';
diff --git a/src/components/Tabs/components/Panel/tests/Panel.test.tsx b/src/components/Tabs/components/Panel/tests/Panel.test.tsx
index 8b0e1b52b38..7c9c5d3fb9a 100644
--- a/src/components/Tabs/components/Panel/tests/Panel.test.tsx
+++ b/src/components/Tabs/components/Panel/tests/Panel.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Panel from '../Panel';
+import {Panel} from '../Panel';
 
 describe('<Panel />', () => {
   it('adds the tabpanel role', () => {
diff --git a/src/components/Tabs/components/Tab/Tab.tsx b/src/components/Tabs/components/Tab/Tab.tsx
index ca4d6e754d5..0d308d23232 100644
--- a/src/components/Tabs/components/Tab/Tab.tsx
+++ b/src/components/Tabs/components/Tab/Tab.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {focusFirstFocusableNode} from '@shopify/javascript-utilities/focus';
 
 import {classNames} from '../../../../utilities/css';
-import UnstyledLink from '../../../UnstyledLink';
+import {UnstyledLink} from '../../../UnstyledLink';
 import {
   withAppProvider,
   WithAppProviderProps,
@@ -11,7 +11,7 @@ import {handleMouseUpByBlurring} from '../../../../utilities/focus';
 
 import styles from '../../Tabs.scss';
 
-export interface Props {
+export interface TabProps {
   id: string;
   focused?: boolean;
   siblingTabHasFocus?: boolean;
@@ -24,7 +24,7 @@ export interface Props {
   onClick?(id: string): void;
 }
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = TabProps & WithAppProviderProps;
 
 class Tab extends React.PureComponent<CombinedProps, never> {
   private node: HTMLElement | null = null;
@@ -52,7 +52,7 @@ class Tab extends React.PureComponent<CombinedProps, never> {
     }
   }
 
-  componentDidUpdate(previousProps: Props) {
+  componentDidUpdate(previousProps: TabProps) {
     const {selected: wasSelected} = previousProps;
     const {focused, measuring, selected, panelID} = this.props;
 
@@ -149,4 +149,6 @@ function focusPanelID(panelID: string) {
   }
 }
 
-export default withAppProvider<Props>()(Tab);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<TabProps>()(Tab);
diff --git a/src/components/Tabs/components/Tab/index.ts b/src/components/Tabs/components/Tab/index.ts
index 1e860accf4c..8af86c598e2 100644
--- a/src/components/Tabs/components/Tab/index.ts
+++ b/src/components/Tabs/components/Tab/index.ts
@@ -1,4 +1,3 @@
-import Tab from './Tab';
+import Tab, {TabProps} from './Tab';
 
-export {Props} from './Tab';
-export default Tab;
+export {Tab, TabProps};
diff --git a/src/components/Tabs/components/TabMeasurer/TabMeasurer.tsx b/src/components/Tabs/components/TabMeasurer/TabMeasurer.tsx
index 8f6a473c120..c01dedf7c32 100644
--- a/src/components/Tabs/components/TabMeasurer/TabMeasurer.tsx
+++ b/src/components/Tabs/components/TabMeasurer/TabMeasurer.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import {classNames} from '../../../../utilities/css';
-import EventListener from '../../../EventListener';
+import {EventListener} from '../../../EventListener';
 
 import {TabDescriptor} from '../../types';
-import Tab from '../Tab';
+import {Tab} from '../Tab';
 import styles from '../../Tabs.scss';
 
 export interface TabMeasurements {
@@ -12,7 +12,7 @@ export interface TabMeasurements {
   hiddenTabWidths: number[];
 }
 
-export interface Props {
+export interface TabMeasurerProps {
   tabToFocus: number;
   siblingTabHasFocus: boolean;
   activator: React.ReactElement<{}>;
@@ -21,7 +21,7 @@ export interface Props {
   handleMeasurement(measurements: TabMeasurements): void;
 }
 
-export default class TabMeasurer extends React.PureComponent<Props, never> {
+export class TabMeasurer extends React.PureComponent<TabMeasurerProps, never> {
   private containerNode: React.RefObject<HTMLDivElement> = React.createRef();
   private animationFrame: number | null = null;
 
@@ -35,7 +35,7 @@ export default class TabMeasurer extends React.PureComponent<Props, never> {
     }
   }
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps: TabMeasurerProps) {
     if (prevProps.tabs !== this.props.tabs) {
       this.handleMeasurement();
     }
diff --git a/src/components/Tabs/components/TabMeasurer/index.ts b/src/components/Tabs/components/TabMeasurer/index.ts
index 9975072b94e..cbcb001f8da 100644
--- a/src/components/Tabs/components/TabMeasurer/index.ts
+++ b/src/components/Tabs/components/TabMeasurer/index.ts
@@ -1,4 +1 @@
-import TabMeasurer from './TabMeasurer';
-
-export {Props, TabMeasurements} from './TabMeasurer';
-export default TabMeasurer;
+export {TabMeasurer, TabMeasurerProps, TabMeasurements} from './TabMeasurer';
diff --git a/src/components/Tabs/components/TabMeasurer/tests/TabMeasurer.test.tsx b/src/components/Tabs/components/TabMeasurer/tests/TabMeasurer.test.tsx
index 278f1c08407..f777d4f15c0 100644
--- a/src/components/Tabs/components/TabMeasurer/tests/TabMeasurer.test.tsx
+++ b/src/components/Tabs/components/TabMeasurer/tests/TabMeasurer.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import TabMeasurer from '../TabMeasurer';
-import Tab from '../../Tab';
-import Item from '../../Item';
+import {TabMeasurer} from '../TabMeasurer';
+import {Tab} from '../../Tab';
+import {Item} from '../../Item';
 
 describe('<TabMeasurer />', () => {
   const mockProps = {
diff --git a/src/components/Tabs/components/index.ts b/src/components/Tabs/components/index.ts
index cf391abb539..d79275e1f98 100644
--- a/src/components/Tabs/components/index.ts
+++ b/src/components/Tabs/components/index.ts
@@ -1,13 +1,9 @@
-export {default as Item, Props as ItemProps} from './Item';
+export {Item, ItemProps} from './Item';
 
-export {default as List, Props as ListProps} from './List';
+export {List, ListProps} from './List';
 
-export {default as Panel, Props as PanelProps} from './Panel';
+export {Panel, PanelProps} from './Panel';
 
-export {default as Tab, Props as TabProps} from './Tab';
+export {Tab, TabProps} from './Tab';
 
-export {
-  default as TabMeasurer,
-  Props as TabMeasurerProps,
-  TabMeasurements,
-} from './TabMeasurer';
+export {TabMeasurer, TabMeasurerProps, TabMeasurements} from './TabMeasurer';
diff --git a/src/components/Tabs/index.ts b/src/components/Tabs/index.ts
index 13ea95b1fda..806bb9901a7 100644
--- a/src/components/Tabs/index.ts
+++ b/src/components/Tabs/index.ts
@@ -1,4 +1,3 @@
-import Tabs from './Tabs';
+import Tabs, {TabsProps} from './Tabs';
 
-export {Props} from './Tabs';
-export default Tabs;
+export {Tabs, TabsProps};
diff --git a/src/components/Tabs/tests/Tabs.test.tsx b/src/components/Tabs/tests/Tabs.test.tsx
index 79b9173bb0e..ca4e6f189c4 100644
--- a/src/components/Tabs/tests/Tabs.test.tsx
+++ b/src/components/Tabs/tests/Tabs.test.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 import {Tab, Panel, TabMeasurer} from '../components';
-import Tabs, {Props} from '../Tabs';
+import Tabs, {TabsProps} from '../Tabs';
 import {getVisibleAndHiddenTabIndices} from '../utilities';
-import Popover from '../../Popover';
+import {Popover} from '../../Popover';
 
 describe('<Tabs />', () => {
-  const tabs: Props['tabs'] = [
+  const tabs: TabsProps['tabs'] = [
     {content: 'Tab 1', id: 'tab-1'},
     {content: 'Tab 2', id: 'tab-2'},
   ];
@@ -25,7 +25,7 @@ describe('<Tabs />', () => {
 
   describe('tabs', () => {
     it('uses the IDs passed in for the tabs', () => {
-      const tabs: Props['tabs'] = [
+      const tabs: TabsProps['tabs'] = [
         {content: 'Tab 1', id: 'tab-1'},
         {content: 'Tab 2', id: 'tab-2'},
       ];
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
index 6056084a0cb..0d9e7f17c18 100644
--- a/src/components/Tag/Tag.tsx
+++ b/src/components/Tag/Tag.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import {CancelSmallMinor} from '@shopify/polaris-icons';
 import {classNames} from '../../utilities/css';
 import {useI18n} from '../../utilities/i18n';
-import Icon from '../Icon';
+import {Icon} from '../Icon';
 import {handleMouseUpByBlurring} from '../../utilities/focus';
 import styles from './Tag.scss';
 
-export interface Props {
+export interface TagProps {
   /** Content to display in the tag */
   children?: string;
   /** Disables the tag  */
@@ -15,7 +15,7 @@ export interface Props {
   onRemove?(): void;
 }
 
-export default function Tag({children, disabled = false, onRemove}: Props) {
+export function Tag({children, disabled = false, onRemove}: TagProps) {
   const intl = useI18n();
   const className = classNames(disabled && styles.disabled, styles.Tag);
   const ariaLabel = intl.translate('Polaris.Tag.ariaLabel', {children});
diff --git a/src/components/Tag/index.ts b/src/components/Tag/index.ts
index e7e64569e24..a94cd6a633c 100644
--- a/src/components/Tag/index.ts
+++ b/src/components/Tag/index.ts
@@ -1,4 +1 @@
-import Tag from './Tag';
-
-export {Props} from './Tag';
-export default Tag;
+export {Tag, TagProps} from './Tag';
diff --git a/src/components/Tag/tests/Tag.test.tsx b/src/components/Tag/tests/Tag.test.tsx
index fb2bd7b99bb..15b1de28be3 100644
--- a/src/components/Tag/tests/Tag.test.tsx
+++ b/src/components/Tag/tests/Tag.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Tag from '../Tag';
+import {Tag} from '../Tag';
 
 describe('<Tag />', () => {
   it('calls onRemove when remove button is clicked', () => {
diff --git a/src/components/TextContainer/TextContainer.tsx b/src/components/TextContainer/TextContainer.tsx
index 58159adb255..41a84b705b5 100644
--- a/src/components/TextContainer/TextContainer.tsx
+++ b/src/components/TextContainer/TextContainer.tsx
@@ -4,14 +4,15 @@ import {classNames, variationName} from '../../utilities/css';
 import styles from './TextContainer.scss';
 
 export type Spacing = 'tight' | 'loose';
-export interface Props {
+
+export interface TextContainerProps {
   /** The amount of vertical spacing children will get between them */
   spacing?: Spacing;
   /** The content to render in the text container. */
   children?: React.ReactNode;
 }
 
-export default function TextContainer({spacing, children}: Props) {
+export function TextContainer({spacing, children}: TextContainerProps) {
   const className = classNames(
     styles.TextContainer,
     spacing && styles[variationName('spacing', spacing)],
diff --git a/src/components/TextContainer/index.ts b/src/components/TextContainer/index.ts
index 192ecbc222c..901f7ebdb18 100644
--- a/src/components/TextContainer/index.ts
+++ b/src/components/TextContainer/index.ts
@@ -1,4 +1 @@
-import TextContainer from './TextContainer';
-
-export {Props} from './TextContainer';
-export default TextContainer;
+export {TextContainer, TextContainerProps} from './TextContainer';
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index 8162a9aacc3..b83142c8e58 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -2,18 +2,18 @@ import React from 'react';
 import {addEventListener} from '@shopify/javascript-utilities/events';
 import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 import {CircleCancelMinor} from '@shopify/polaris-icons';
-import VisuallyHidden from '../VisuallyHidden';
+import {VisuallyHidden} from '../VisuallyHidden';
 import {classNames, variationName} from '../../utilities/css';
 
-import Labelled, {Action, helpTextID, labelID} from '../Labelled';
-import Connected from '../Connected';
+import {Labelled, Action, helpTextID, labelID} from '../Labelled';
+import {Connected} from '../Connected';
 
 import {Error, Key} from '../../types';
 import {
   withAppProvider,
   WithAppProviderProps,
 } from '../../utilities/with-app-provider';
-import Icon from '../Icon';
+import {Icon} from '../Icon';
 import {Resizer, Spinner} from './components';
 import styles from './TextField.scss';
 
@@ -32,7 +32,7 @@ export type Type =
   | 'week'
   | 'currency';
 
-export type Alignment = 'left' | 'center' | 'right';
+type Alignment = 'left' | 'center' | 'right';
 
 interface State {
   height?: number | null;
@@ -121,15 +121,15 @@ export interface BaseProps {
   onBlur?(): void;
 }
 
-export interface NonMutuallyExclusiveProps extends BaseProps {}
+interface NonMutuallyExclusiveProps extends BaseProps {}
 
-export type Props = NonMutuallyExclusiveProps &
+export type TextFieldProps = NonMutuallyExclusiveProps &
   (
     | {readOnly: true}
     | {disabled: true}
     | {onChange(value: string, id: string): void});
 
-type CombinedProps = Props & WithAppProviderProps;
+type CombinedProps = TextFieldProps & WithAppProviderProps;
 
 const getUniqueID = createUniqueIDFactory('TextField');
 
@@ -528,4 +528,6 @@ function normalizeAutoComplete(autoComplete?: boolean | string) {
   }
 }
 
-export default withAppProvider<Props>()(TextField);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<TextFieldProps>()(TextField);
diff --git a/src/components/TextField/components/Resizer/Resizer.tsx b/src/components/TextField/components/Resizer/Resizer.tsx
index 5f43a0a1c89..7f443c15513 100644
--- a/src/components/TextField/components/Resizer/Resizer.tsx
+++ b/src/components/TextField/components/Resizer/Resizer.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import EventListener from '../../../EventListener';
+import {EventListener} from '../../../EventListener';
 import styles from '../../TextField.scss';
 
-export interface Props {
+export interface ResizerProps {
   contents?: string;
   currentHeight?: number | null;
   minimumLines?: number;
   onHeightChange(height: number): void;
 }
 
-export default class Resizer extends React.PureComponent<Props, never> {
+export class Resizer extends React.PureComponent<ResizerProps, never> {
   private contentNode = React.createRef<HTMLDivElement>();
   private minimumLinesNode = React.createRef<HTMLDivElement>();
   private animationFrame: number | null = null;
diff --git a/src/components/TextField/components/Resizer/index.ts b/src/components/TextField/components/Resizer/index.ts
index 4a92c56ac6e..6cbba167431 100644
--- a/src/components/TextField/components/Resizer/index.ts
+++ b/src/components/TextField/components/Resizer/index.ts
@@ -1,4 +1 @@
-import Resizer from './Resizer';
-
-export {Props} from './Resizer';
-export default Resizer;
+export {Resizer, ResizerProps} from './Resizer';
diff --git a/src/components/TextField/components/Resizer/tests/Resizer.test.tsx b/src/components/TextField/components/Resizer/tests/Resizer.test.tsx
index 02569aa40fd..f5bb8effa82 100644
--- a/src/components/TextField/components/Resizer/tests/Resizer.test.tsx
+++ b/src/components/TextField/components/Resizer/tests/Resizer.test.tsx
@@ -4,8 +4,8 @@ import {
   findByTestID,
   trigger,
 } from 'test-utilities/legacy';
-import Resizer from '../Resizer';
-import EventListener from '../../../../EventListener';
+import {Resizer} from '../Resizer';
+import {EventListener} from '../../../../EventListener';
 
 describe('<Resizer />', () => {
   const mockProps = {
diff --git a/src/components/TextField/components/Spinner/Spinner.tsx b/src/components/TextField/components/Spinner/Spinner.tsx
index b0c6c89758e..f2c54eafee4 100644
--- a/src/components/TextField/components/Spinner/Spinner.tsx
+++ b/src/components/TextField/components/Spinner/Spinner.tsx
@@ -1,22 +1,22 @@
 import React from 'react';
 import {CaretDownMinor, CaretUpMinor} from '@shopify/polaris-icons';
-import Icon from '../../../Icon';
+import {Icon} from '../../../Icon';
 
 import styles from '../../TextField.scss';
 
-export interface Props {
+export interface SpinnerProps {
   onChange(delta: number): void;
   onClick?(): void;
   onMouseDown(onChange: Function): void;
   onMouseUp(): void;
 }
 
-export default function Spinner({
+export function Spinner({
   onChange,
   onClick,
   onMouseDown,
   onMouseUp,
-}: Props) {
+}: SpinnerProps) {
   function handleStep(step: number) {
     return () => onChange(step);
   }
diff --git a/src/components/TextField/components/Spinner/index.ts b/src/components/TextField/components/Spinner/index.ts
index ac881d2a0ba..79b79fec8a8 100644
--- a/src/components/TextField/components/Spinner/index.ts
+++ b/src/components/TextField/components/Spinner/index.ts
@@ -1,4 +1 @@
-import Spinner from './Spinner';
-
-export {Props} from './Spinner';
-export default Spinner;
+export {Spinner, SpinnerProps} from './Spinner';
diff --git a/src/components/TextField/components/Spinner/tests/Spinner.test.tsx b/src/components/TextField/components/Spinner/tests/Spinner.test.tsx
index 09942e36033..ef896b339fb 100644
--- a/src/components/TextField/components/Spinner/tests/Spinner.test.tsx
+++ b/src/components/TextField/components/Spinner/tests/Spinner.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import Spinner from '../Spinner';
+import {Spinner} from '../Spinner';
 
 describe('<Spinner />', () => {
   describe('onChange', () => {
diff --git a/src/components/TextField/components/index.ts b/src/components/TextField/components/index.ts
index edbc5b966f2..41b2a0774da 100644
--- a/src/components/TextField/components/index.ts
+++ b/src/components/TextField/components/index.ts
@@ -1,3 +1,3 @@
-export {default as Resizer, Props as ResizerProps} from './Resizer';
+export {Resizer, ResizerProps} from './Resizer';
 
-export {default as Spinner, Props as SpinnerProps} from './Spinner';
+export {Spinner, SpinnerProps} from './Spinner';
diff --git a/src/components/TextField/index.ts b/src/components/TextField/index.ts
index 040942ec885..c5abc026ced 100644
--- a/src/components/TextField/index.ts
+++ b/src/components/TextField/index.ts
@@ -1,4 +1,3 @@
-import TextField from './TextField';
+import TextField, {TextFieldProps, Type} from './TextField';
 
-export {Props, Type} from './TextField';
-export default TextField;
+export {TextField, TextFieldProps, Type};
diff --git a/src/components/TextStyle/TextStyle.tsx b/src/components/TextStyle/TextStyle.tsx
index cf09c24b50c..9a48aafdc1b 100644
--- a/src/components/TextStyle/TextStyle.tsx
+++ b/src/components/TextStyle/TextStyle.tsx
@@ -12,14 +12,14 @@ enum VariationValue {
   Code = 'code',
 }
 
-export interface Props {
+export interface TextStyleProps {
   /** Give text additional visual meaning */
   variation?: Variation;
   /** The content that should get the intended styling */
   children?: React.ReactNode;
 }
 
-export default function TextStyle({variation, children}: Props) {
+export function TextStyle({variation, children}: TextStyleProps) {
   const className = classNames(
     variation && styles[variationName('variation', variation)],
     variation === VariationValue.Code && styles.code,
diff --git a/src/components/TextStyle/index.ts b/src/components/TextStyle/index.ts
index 1191cccb97d..19d0aea67dc 100644
--- a/src/components/TextStyle/index.ts
+++ b/src/components/TextStyle/index.ts
@@ -1,4 +1 @@
-import TextStyle from './TextStyle';
-
-export {Props} from './TextStyle';
-export default TextStyle;
+export {TextStyle, TextStyleProps} from './TextStyle';
diff --git a/src/components/TextStyle/tests/TextStyle.test.tsx b/src/components/TextStyle/tests/TextStyle.test.tsx
index b8c07221753..f59d835d222 100644
--- a/src/components/TextStyle/tests/TextStyle.test.tsx
+++ b/src/components/TextStyle/tests/TextStyle.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import TextStyle from '../TextStyle';
+import {TextStyle} from '../TextStyle';
 
 describe('<TextStyle />', () => {
   it('mounts', () => {
diff --git a/src/components/ThemeProvider/ThemeProvider.tsx b/src/components/ThemeProvider/ThemeProvider.tsx
index af137fb1717..a1a93785148 100644
--- a/src/components/ThemeProvider/ThemeProvider.tsx
+++ b/src/components/ThemeProvider/ThemeProvider.tsx
@@ -9,7 +9,7 @@ interface State {
   colors: string[][] | undefined;
 }
 
-interface Props {
+interface ThemeProviderProps {
   /** Custom logos and colors provided to select components */
   theme: Theme;
   /** The content to display */
@@ -22,13 +22,13 @@ const defaultTheme = {
   '--top-bar-background-lighter': '#1d9ba4',
 };
 
-export default class ThemeProvider extends React.Component<Props, State> {
+export class ThemeProvider extends React.Component<ThemeProviderProps, State> {
   state: State = {
     theme: setThemeContext(this.props.theme),
     colors: setColors(this.props.theme),
   };
 
-  componentDidUpdate({theme: prevTheme}: Props) {
+  componentDidUpdate({theme: prevTheme}: ThemeProviderProps) {
     const {theme} = this.props;
     if (isEqual(prevTheme, theme)) {
       return;
diff --git a/src/components/ThemeProvider/index.ts b/src/components/ThemeProvider/index.ts
index 37a0aea068e..abddf734c96 100644
--- a/src/components/ThemeProvider/index.ts
+++ b/src/components/ThemeProvider/index.ts
@@ -1 +1 @@
-export {default} from './ThemeProvider';
+export {ThemeProvider} from './ThemeProvider';
diff --git a/src/components/ThemeProvider/tests/ThemeProvider.test.tsx b/src/components/ThemeProvider/tests/ThemeProvider.test.tsx
index a701eb7a988..da1b0ace6d2 100644
--- a/src/components/ThemeProvider/tests/ThemeProvider.test.tsx
+++ b/src/components/ThemeProvider/tests/ThemeProvider.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import ThemeProvider from '../ThemeProvider';
+import {ThemeProvider} from '../ThemeProvider';
 import {ThemeContext} from '../../../utilities/theme';
 
 describe('<ThemeProvider />', () => {
diff --git a/src/components/Thumbnail/Thumbnail.tsx b/src/components/Thumbnail/Thumbnail.tsx
index 3036a7e0ccb..48dc48e11c7 100644
--- a/src/components/Thumbnail/Thumbnail.tsx
+++ b/src/components/Thumbnail/Thumbnail.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import {classNames, variationName} from '../../utilities/css';
-import Image from '../Image';
+import {Image} from '../Image';
 import styles from './Thumbnail.scss';
 
 export type Size = 'small' | 'medium' | 'large';
 
-export interface Props {
+export interface ThumbnailProps {
   /**
    * Size of thumbnail
    * @default 'medium'
@@ -17,7 +17,7 @@ export interface Props {
   alt: string;
 }
 
-export default function Thumbnail({source, alt, size = 'medium'}: Props) {
+export function Thumbnail({source, alt, size = 'medium'}: ThumbnailProps) {
   const className = classNames(
     styles.Thumbnail,
     size && styles[variationName('size', size)],
diff --git a/src/components/Thumbnail/index.ts b/src/components/Thumbnail/index.ts
index fe8e8d0ede2..1fc8db68dc5 100644
--- a/src/components/Thumbnail/index.ts
+++ b/src/components/Thumbnail/index.ts
@@ -1,4 +1 @@
-import Thumbnail from './Thumbnail';
-
-export {Props} from './Thumbnail';
-export default Thumbnail;
+export {Thumbnail, ThumbnailProps} from './Thumbnail';
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index a295abea20d..e0aed36f797 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -13,9 +13,12 @@ const createId = createUniqueIDFactory('Toast');
 // a component's props to be found in the Props interface. This silly workaround
 // ensures that the Props Explorer table is generated correctly, instead of
 // crashing if we write `ComposedProps = ToastProps & WithAppProviderProps`
-export interface Props extends ToastProps {}
+export interface ToastProps extends ToastProps {}
 
-function Toast(props: Props) {
+// This does have a display name, but the linting has a bug in it
+// https://github.com/yannickcr/eslint-plugin-react/issues/2324
+// eslint-disable-next-line react/display-name
+export const Toast = React.memo(function Toast(props: ToastProps) {
   const id = useRef(createId());
   const appBridgeToast = useRef<AppBridgeToast.Toast>();
   const {showToast, hideToast} = useFrame();
@@ -67,6 +70,4 @@ function Toast(props: Props) {
   );
 
   return null;
-}
-
-export default React.memo(Toast);
+});
diff --git a/src/components/Toast/index.ts b/src/components/Toast/index.ts
index cf694daaa52..ce19e000d73 100644
--- a/src/components/Toast/index.ts
+++ b/src/components/Toast/index.ts
@@ -1 +1 @@
-export {default, Props} from './Toast';
+export {Toast, ToastProps} from './Toast';
diff --git a/src/components/Toast/tests/Toast.test.tsx b/src/components/Toast/tests/Toast.test.tsx
index 05126ac242b..70eeeea8281 100644
--- a/src/components/Toast/tests/Toast.test.tsx
+++ b/src/components/Toast/tests/Toast.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Toast as AppBridgeToast} from '@shopify/app-bridge/actions';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Toast from '../Toast';
+import {Toast} from '../Toast';
 
 describe('<Toast />', () => {
   beforeEach(() => {
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index c74df82d42e..6104e8070af 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -3,11 +3,11 @@ import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 import {findFirstFocusableNode} from '@shopify/javascript-utilities/focus';
 
 import {PreferredPosition} from '../PositionedOverlay';
-import Portal from '../Portal';
+import {Portal} from '../Portal';
 import {TooltipOverlay} from './components';
 import styles from './Tooltip.scss';
 
-export interface Props {
+export interface TooltipProps {
   /** The element that will activate to tooltip */
   children?: React.ReactNode;
   /** The content to display within the tooltip */
@@ -35,7 +35,7 @@ interface State {
 
 const getUniqueID = createUniqueIDFactory('TooltipContent');
 
-export default class Tooltip extends React.PureComponent<Props, State> {
+export class Tooltip extends React.PureComponent<TooltipProps, State> {
   state: State = {
     active: Boolean(this.props.active),
     activatorNode: null,
diff --git a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx
index 2b368342c68..db929d33df0 100644
--- a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx
+++ b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx
@@ -2,14 +2,15 @@ import React from 'react';
 
 import {classNames} from '../../../../utilities/css';
 import {layer} from '../../../shared';
-import PositionedOverlay, {
+import {
+  PositionedOverlay,
   OverlayDetails,
   PreferredPosition,
 } from '../../../PositionedOverlay';
 
 import styles from '../../Tooltip.scss';
 
-export interface Props {
+export interface TooltipOverlayProps {
   id: string;
   active: boolean;
   light?: boolean;
@@ -19,7 +20,10 @@ export interface Props {
   onClose(): void;
 }
 
-export default class TooltipOverlay extends React.PureComponent<Props, never> {
+export class TooltipOverlay extends React.PureComponent<
+  TooltipOverlayProps,
+  never
+> {
   render() {
     const markup = this.props.active ? this.renderOverlay() : null;
 
diff --git a/src/components/Tooltip/components/TooltipOverlay/index.ts b/src/components/Tooltip/components/TooltipOverlay/index.ts
index 516464cab7c..bdf4aa4de85 100644
--- a/src/components/Tooltip/components/TooltipOverlay/index.ts
+++ b/src/components/Tooltip/components/TooltipOverlay/index.ts
@@ -1,4 +1 @@
-import TooltipOverlay from './TooltipOverlay';
-
-export {Props} from './TooltipOverlay';
-export default TooltipOverlay;
+export {TooltipOverlay, TooltipOverlayProps} from './TooltipOverlay';
diff --git a/src/components/Tooltip/components/index.ts b/src/components/Tooltip/components/index.ts
index f0443300c4c..bdf4aa4de85 100644
--- a/src/components/Tooltip/components/index.ts
+++ b/src/components/Tooltip/components/index.ts
@@ -1,4 +1 @@
-export {
-  default as TooltipOverlay,
-  Props as TooltipOverlayProps,
-} from './TooltipOverlay';
+export {TooltipOverlay, TooltipOverlayProps} from './TooltipOverlay';
diff --git a/src/components/Tooltip/index.ts b/src/components/Tooltip/index.ts
index e2db010de07..d5c73534c69 100644
--- a/src/components/Tooltip/index.ts
+++ b/src/components/Tooltip/index.ts
@@ -1,4 +1 @@
-import Tooltip from './Tooltip';
-
-export {Props} from './Tooltip';
-export default Tooltip;
+export {Tooltip, TooltipProps} from './Tooltip';
diff --git a/src/components/Tooltip/tests/Tooltip.test.tsx b/src/components/Tooltip/tests/Tooltip.test.tsx
index 668d861e7d4..117891dadb5 100644
--- a/src/components/Tooltip/tests/Tooltip.test.tsx
+++ b/src/components/Tooltip/tests/Tooltip.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {findByTestID, mountWithAppProvider} from 'test-utilities/legacy';
 import {Link} from 'components';
-import Tooltip from '../Tooltip';
+import {Tooltip} from '../Tooltip';
 
 describe('<Tooltip />', () => {
   const tooltip = mountWithAppProvider(
diff --git a/src/components/TopBar/TopBar.tsx b/src/components/TopBar/TopBar.tsx
index 1af968b412d..41c0f53d045 100644
--- a/src/components/TopBar/TopBar.tsx
+++ b/src/components/TopBar/TopBar.tsx
@@ -7,14 +7,14 @@ import {
   withAppProvider,
   WithAppProviderProps,
 } from '../../utilities/with-app-provider';
-import Icon from '../Icon';
-import Image from '../Image';
-import UnstyledLink from '../UnstyledLink';
+import {Icon} from '../Icon';
+import {Image} from '../Image';
+import {UnstyledLink} from '../UnstyledLink';
 
 import {SearchField, UserMenu, Search, SearchProps, Menu} from './components';
 import styles from './TopBar.scss';
 
-export interface Props {
+export interface TopBarProps {
   /** Toggles whether or not a navigation component has been provided. Controls the presence of the mobile nav toggle button */
   showNavigationToggle?: boolean;
   /** Accepts a user component that is made available as a static member of the top bar component and renders as the primary menu */
@@ -35,7 +35,7 @@ export interface Props {
   onNavigationToggle?(): void;
 }
 
-export type ComposedProps = Props & WithAppProviderProps;
+export type ComposedProps = TopBarProps & WithAppProviderProps;
 
 interface State {
   focused: boolean;
@@ -151,4 +151,6 @@ class TopBar extends React.PureComponent<ComposedProps, State> {
   };
 }
 
-export default withAppProvider<Props>()(TopBar);
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<TopBarProps>()(TopBar);
diff --git a/src/components/TopBar/components/Menu/Menu.tsx b/src/components/TopBar/components/Menu/Menu.tsx
index e6fa9552f70..0a36adc697b 100644
--- a/src/components/TopBar/components/Menu/Menu.tsx
+++ b/src/components/TopBar/components/Menu/Menu.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
-import ActionList, {Props as ActionListProps} from '../../../ActionList';
-import Popover from '../../../Popover';
+import {ActionList, ActionListProps} from '../../../ActionList';
+import {Popover} from '../../../Popover';
 
 import {Message, MessageProps} from './components';
 import styles from './Menu.scss';
 
-export interface Props {
+export interface MenuProps {
   /** Accepts an activator component that renders inside of a button that opens the menu */
   activatorContent: React.ReactNode;
   /** An array of action objects that are rendered inside of a popover triggered by this menu */
@@ -21,7 +21,7 @@ export interface Props {
   onClose(): void;
 }
 
-export default function Menu(props: Props) {
+export function Menu(props: MenuProps) {
   const {actions, onOpen, onClose, open, activatorContent, message} = props;
 
   const badgeProps = message &&
diff --git a/src/components/TopBar/components/Menu/components/Message/Message.tsx b/src/components/TopBar/components/Menu/components/Message/Message.tsx
index 15e63c96df1..983e993cf5b 100644
--- a/src/components/TopBar/components/Menu/components/Message/Message.tsx
+++ b/src/components/TopBar/components/Menu/components/Message/Message.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 
-import Badge, {Props as BadgeProps} from '../../../../../Badge';
-import Button from '../../../../../Button';
-import Heading from '../../../../../Heading';
-import Link from '../../../../../Link';
-import Popover from '../../../../../Popover';
-import Stack from '../../../../../Stack';
-import TextContainer from '../../../../../TextContainer';
+import {Badge, BadgeProps} from '../../../../../Badge';
+import {Button} from '../../../../../Button';
+import {Heading} from '../../../../../Heading';
+import {Link} from '../../../../../Link';
+import {Popover} from '../../../../../Popover';
+import {Stack} from '../../../../../Stack';
+import {TextContainer} from '../../../../../TextContainer';
 
 import styles from './Message.scss';
 
-export interface Props {
+export interface MessageProps {
   title: string;
   description: string;
   action: {onClick(): void; content: string};
@@ -18,13 +18,13 @@ export interface Props {
   badge?: {content: string; status: BadgeProps['status']};
 }
 
-export default function Message({
+export function Message({
   title,
   description,
   action,
   link,
   badge,
-}: Props) {
+}: MessageProps) {
   const badgeMarkup = badge && (
     <Badge status={badge.status}>{badge.content}</Badge>
   );
diff --git a/src/components/TopBar/components/Menu/components/Message/index.ts b/src/components/TopBar/components/Menu/components/Message/index.ts
index c97b9d21612..2b1800255e2 100644
--- a/src/components/TopBar/components/Menu/components/Message/index.ts
+++ b/src/components/TopBar/components/Menu/components/Message/index.ts
@@ -1,4 +1 @@
-import Message from './Message';
-
-export {Props} from './Message';
-export default Message;
+export {Message, MessageProps} from './Message';
diff --git a/src/components/TopBar/components/Menu/components/Message/tests/Message.test.tsx b/src/components/TopBar/components/Menu/components/Message/tests/Message.test.tsx
index e1627ae27b0..6d614ef9c3b 100644
--- a/src/components/TopBar/components/Menu/components/Message/tests/Message.test.tsx
+++ b/src/components/TopBar/components/Menu/components/Message/tests/Message.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Message from '../Message';
-import Badge from '../../../../../../Badge';
+import {Message} from '../Message';
+import {Badge} from '../../../../../../Badge';
 
 const messageProps = {
   title: 'Polaris',
diff --git a/src/components/TopBar/components/Menu/components/index.ts b/src/components/TopBar/components/Menu/components/index.ts
index 78dfe055e38..2b1800255e2 100644
--- a/src/components/TopBar/components/Menu/components/index.ts
+++ b/src/components/TopBar/components/Menu/components/index.ts
@@ -1 +1 @@
-export {default as Message, Props as MessageProps} from './Message';
+export {Message, MessageProps} from './Message';
diff --git a/src/components/TopBar/components/Menu/index.ts b/src/components/TopBar/components/Menu/index.ts
index bdb23063c28..89c19367947 100644
--- a/src/components/TopBar/components/Menu/index.ts
+++ b/src/components/TopBar/components/Menu/index.ts
@@ -1,5 +1 @@
-import Menu from './Menu';
-
-export {Props} from './Menu';
-export {MessageProps} from './components';
-export default Menu;
+export {Menu, MenuProps} from './Menu';
diff --git a/src/components/TopBar/components/Menu/tests/Menu.test.tsx b/src/components/TopBar/components/Menu/tests/Menu.test.tsx
index 2be0fab848a..3f237f90f01 100644
--- a/src/components/TopBar/components/Menu/tests/Menu.test.tsx
+++ b/src/components/TopBar/components/Menu/tests/Menu.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 
 import {ActionList, Popover} from 'components';
-import Menu from '../Menu';
+import {Menu} from '../Menu';
 import {Message} from '../components';
 
 describe('<Menu />', () => {
diff --git a/src/components/TopBar/components/Search/Search.tsx b/src/components/TopBar/components/Search/Search.tsx
index 91d5f50d291..260a7e66764 100644
--- a/src/components/TopBar/components/Search/Search.tsx
+++ b/src/components/TopBar/components/Search/Search.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {classNames} from '../../../../utilities/css';
 import styles from './Search.scss';
 
-export interface Props {
+export interface SearchProps {
   /** Toggles whether or not the search is visible */
   visible?: boolean;
   /** The content to display inside the search */
@@ -11,7 +11,7 @@ export interface Props {
   onDismiss?(): void;
 }
 
-export default class Search extends React.PureComponent<Props, never> {
+export class Search extends React.PureComponent<SearchProps, never> {
   private node = React.createRef<HTMLDivElement>();
 
   render() {
diff --git a/src/components/TopBar/components/Search/index.ts b/src/components/TopBar/components/Search/index.ts
index 68f823e7883..243c5455de0 100644
--- a/src/components/TopBar/components/Search/index.ts
+++ b/src/components/TopBar/components/Search/index.ts
@@ -1,4 +1 @@
-import Search from './Search';
-
-export {Props} from './Search';
-export default Search;
+export {Search, SearchProps} from './Search';
diff --git a/src/components/TopBar/components/Search/tests/Search.test.tsx b/src/components/TopBar/components/Search/tests/Search.test.tsx
index 95dd921d9ca..0ff609a3bde 100644
--- a/src/components/TopBar/components/Search/tests/Search.test.tsx
+++ b/src/components/TopBar/components/Search/tests/Search.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Search from '../Search';
+import {Search} from '../Search';
 
 describe('<Search />', () => {
   it('mounts', () => {
diff --git a/src/components/TopBar/components/SearchField/SearchField.tsx b/src/components/TopBar/components/SearchField/SearchField.tsx
index 273da3da7bc..61fcff37ac0 100644
--- a/src/components/TopBar/components/SearchField/SearchField.tsx
+++ b/src/components/TopBar/components/SearchField/SearchField.tsx
@@ -3,8 +3,8 @@ import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 import {CircleCancelMinor, SearchMinor} from '@shopify/polaris-icons';
 import {classNames} from '../../../../utilities/css';
 
-import Icon from '../../../Icon';
-import VisuallyHidden from '../../../VisuallyHidden';
+import {Icon} from '../../../Icon';
+import {VisuallyHidden} from '../../../VisuallyHidden';
 import {
   withAppProvider,
   WithAppProviderProps,
@@ -14,7 +14,7 @@ import styles from './SearchField.scss';
 
 const getUniqueId = createUniqueIDFactory('SearchField');
 
-export interface Props {
+export interface SearchFieldProps {
   /** Initial value for the input */
   value: string;
   /** Hint text to display */
@@ -33,7 +33,7 @@ export interface Props {
   onCancel?(): void;
 }
 
-export type ComposedProps = Props & WithAppProviderProps;
+export type ComposedProps = SearchFieldProps & WithAppProviderProps;
 
 export class SearchField extends React.Component<ComposedProps, never> {
   private input: React.RefObject<HTMLInputElement> = React.createRef();
@@ -50,7 +50,7 @@ export class SearchField extends React.Component<ComposedProps, never> {
     }
   }
 
-  componentDidUpdate({focused: wasFocused}: Props) {
+  componentDidUpdate({focused: wasFocused}: SearchFieldProps) {
     const {
       input: {current: input},
     } = this;
@@ -174,4 +174,7 @@ function preventDefault(event: React.KeyboardEvent<HTMLInputElement>) {
     event.preventDefault();
   }
 }
-export default withAppProvider<Props>()(SearchField);
+
+// Use named export once withAppProvider is refactored away
+// eslint-disable-next-line import/no-default-export
+export default withAppProvider<SearchFieldProps>()(SearchField);
diff --git a/src/components/TopBar/components/SearchField/index.ts b/src/components/TopBar/components/SearchField/index.ts
index 08ad3d35501..5eff482b923 100644
--- a/src/components/TopBar/components/SearchField/index.ts
+++ b/src/components/TopBar/components/SearchField/index.ts
@@ -1,4 +1,6 @@
-import TopBarSearchField from './SearchField';
+// We've got to export a named SearchField otherwise other stuff breaks
+// Fix once we stop exporting a default
+// eslint-disable-next-line import/no-named-as-default
+import SearchField, {SearchFieldProps} from './SearchField';
 
-export {Props} from './SearchField';
-export default TopBarSearchField;
+export {SearchField, SearchFieldProps};
diff --git a/src/components/TopBar/components/SearchField/tests/SearchField.test.tsx b/src/components/TopBar/components/SearchField/tests/SearchField.test.tsx
index 00c62bc9f88..c9b2316a625 100644
--- a/src/components/TopBar/components/SearchField/tests/SearchField.test.tsx
+++ b/src/components/TopBar/components/SearchField/tests/SearchField.test.tsx
@@ -2,6 +2,9 @@ import React from 'react';
 import {CircleCancelMinor} from '@shopify/polaris-icons';
 import {ReactWrapper} from 'enzyme';
 import {mountWithAppProvider} from 'test-utilities/legacy';
+// We've got to export a named SearchField otherwise other stuff breaks
+// Fix once we stop exporting a default
+// eslint-disable-next-line import/no-named-as-default
 import SearchField from '../SearchField';
 
 describe('<TextField />', () => {
diff --git a/src/components/TopBar/components/UserMenu/UserMenu.tsx b/src/components/TopBar/components/UserMenu/UserMenu.tsx
index 3e703bf6089..3dc9b602221 100644
--- a/src/components/TopBar/components/UserMenu/UserMenu.tsx
+++ b/src/components/TopBar/components/UserMenu/UserMenu.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import {IconableAction} from '../../../../types';
-import Avatar, {Props as AvatarProps} from '../../../Avatar';
-import MessageIndicator from '../../../MessageIndicator';
-import Menu, {MessageProps} from '../Menu';
+import {Avatar, AvatarProps} from '../../../Avatar';
+import {MessageIndicator} from '../../../MessageIndicator';
+import {Menu, MenuProps} from '../Menu';
 
 import styles from './UserMenu.scss';
 
-export interface Props {
+export interface UserMenuProps {
   /** An array of action objects that are rendered inside of a popover triggered by this menu */
   actions: {items: IconableAction[]}[];
   /** Accepts a message that facilitates direct, urgent communication with the merchant through the user menu */
-  message?: MessageProps;
+  message?: MenuProps['message'];
   /** A string detailing the merchant’s full name to be displayed in the user menu */
   name: string;
   /** A string allowing further details on the merchant’s name displayed in the user menu */
@@ -25,7 +25,7 @@ export interface Props {
   onToggle(): void;
 }
 
-function UserMenu({
+export function UserMenu({
   name,
   detail,
   avatar,
@@ -34,7 +34,7 @@ function UserMenu({
   message,
   onToggle,
   open,
-}: Props) {
+}: UserMenuProps) {
   const showIndicator = Boolean(message);
 
   const activatorContentMarkup = (
@@ -64,5 +64,3 @@ function UserMenu({
     />
   );
 }
-
-export default UserMenu;
diff --git a/src/components/TopBar/components/UserMenu/index.ts b/src/components/TopBar/components/UserMenu/index.ts
index a3e42e57201..f5f4cdc0a25 100644
--- a/src/components/TopBar/components/UserMenu/index.ts
+++ b/src/components/TopBar/components/UserMenu/index.ts
@@ -1,4 +1 @@
-import UserMenu from './UserMenu';
-
-export {Props} from './UserMenu';
-export default UserMenu;
+export {UserMenu, UserMenuProps} from './UserMenu';
diff --git a/src/components/TopBar/components/UserMenu/tests/UserMenu.test.tsx b/src/components/TopBar/components/UserMenu/tests/UserMenu.test.tsx
index 5ab10adabb3..9f5547f9c14 100644
--- a/src/components/TopBar/components/UserMenu/tests/UserMenu.test.tsx
+++ b/src/components/TopBar/components/UserMenu/tests/UserMenu.test.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import {ViewMinor} from '@shopify/polaris-icons';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import UserMenu, {Props} from '../UserMenu';
+import {UserMenu} from '../UserMenu';
 
 describe('<UserMenu />', () => {
-  const userMenuProps: Props = {
+  const userMenuProps = {
     actions: [{items: [{icon: ViewMinor}]}],
     name: '',
     initials: '',
diff --git a/src/components/TopBar/components/index.ts b/src/components/TopBar/components/index.ts
index 2a216484a98..59d086e56b1 100644
--- a/src/components/TopBar/components/index.ts
+++ b/src/components/TopBar/components/index.ts
@@ -1,5 +1,7 @@
-export {default as Search, Props as SearchProps} from './Search';
-export {default as SearchField, Props as SearchFieldProps} from './SearchField';
-export {default as UserMenu, Props as UserProps} from './UserMenu';
-export {default as Menu, Props as MenuProps} from './Menu';
-export {MessageProps} from './Menu/components';
+export {Search, SearchProps} from './Search';
+
+export {SearchField, SearchFieldProps} from './SearchField';
+
+export {UserMenu, UserMenuProps} from './UserMenu';
+
+export {Menu, MenuProps} from './Menu';
diff --git a/src/components/TopBar/index.ts b/src/components/TopBar/index.ts
index aca8b20bc68..83759f1eb5e 100644
--- a/src/components/TopBar/index.ts
+++ b/src/components/TopBar/index.ts
@@ -1,5 +1,4 @@
-import TopBar from './TopBar';
+import TopBar, {TopBarProps} from './TopBar';
 
-export {Props} from './TopBar';
-export {UserProps, SearchFieldProps, MessageProps} from './components';
-export default TopBar;
+export {TopBar, TopBarProps};
+export {UserMenuProps, SearchFieldProps} from './components';
diff --git a/src/components/TrapFocus/TrapFocus.tsx b/src/components/TrapFocus/TrapFocus.tsx
index ba1c6d2fd37..a2e0a085f32 100644
--- a/src/components/TrapFocus/TrapFocus.tsx
+++ b/src/components/TrapFocus/TrapFocus.tsx
@@ -6,10 +6,10 @@ import {
   focusLastFocusableNode,
 } from '@shopify/javascript-utilities/focus';
 
-import EventListener from '../EventListener';
-import Focus from '../Focus';
+import {EventListener} from '../EventListener';
+import {Focus} from '../Focus';
 
-export interface Props {
+export interface TrapFocusProps {
   trapping?: boolean;
   children?: React.ReactNode;
 }
@@ -18,7 +18,7 @@ interface State {
   shouldFocusSelf: boolean | undefined;
 }
 
-export default class TrapFocus extends React.PureComponent<Props, State> {
+export class TrapFocus extends React.PureComponent<TrapFocusProps, State> {
   state: State = {
     shouldFocusSelf: undefined,
   };
diff --git a/src/components/TrapFocus/index.ts b/src/components/TrapFocus/index.ts
index 482da632a75..351d6d991d7 100644
--- a/src/components/TrapFocus/index.ts
+++ b/src/components/TrapFocus/index.ts
@@ -1,5 +1 @@
-import TrapFocus from './TrapFocus';
-
-export * from './TrapFocus';
-export {Props} from './TrapFocus';
-export default TrapFocus;
+export {TrapFocus, TrapFocusProps} from './TrapFocus';
diff --git a/src/components/TrapFocus/tests/TrapFocus.test.tsx b/src/components/TrapFocus/tests/TrapFocus.test.tsx
index b557e71e9df..da70ad1f07d 100644
--- a/src/components/TrapFocus/tests/TrapFocus.test.tsx
+++ b/src/components/TrapFocus/tests/TrapFocus.test.tsx
@@ -7,7 +7,7 @@ import {
   TextField,
   Button,
 } from 'components';
-import TrapFocus from '../TrapFocus';
+import {TrapFocus} from '../TrapFocus';
 
 describe('<TrapFocus />', () => {
   afterEach(() => {
diff --git a/src/components/Truncate/Truncate.tsx b/src/components/Truncate/Truncate.tsx
index ce584d69fe8..389f4cfdea2 100644
--- a/src/components/Truncate/Truncate.tsx
+++ b/src/components/Truncate/Truncate.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import styles from './Truncate.scss';
 
-export interface Props {
+export interface TruncateProps {
   children: React.ReactNode;
 }
 
-export default function Truncate({children}: Props) {
+export function Truncate({children}: TruncateProps) {
   return <span className={styles.Truncate}>{children}</span>;
 }
diff --git a/src/components/Truncate/index.ts b/src/components/Truncate/index.ts
index 17df888951f..3ae870a200d 100644
--- a/src/components/Truncate/index.ts
+++ b/src/components/Truncate/index.ts
@@ -1,4 +1 @@
-import Truncate from './Truncate';
-
-export {Props} from './Truncate';
-export default Truncate;
+export {Truncate, TruncateProps} from './Truncate';
diff --git a/src/components/Truncate/tests/Truncate.test.tsx b/src/components/Truncate/tests/Truncate.test.tsx
index 11785b00cb5..3fbffae6946 100644
--- a/src/components/Truncate/tests/Truncate.test.tsx
+++ b/src/components/Truncate/tests/Truncate.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Truncate from '../Truncate';
+import {Truncate} from '../Truncate';
 
 describe('<Truncate />', () => {
   it('renders its children', () => {
diff --git a/src/components/UnstyledLink/UnstyledLink.tsx b/src/components/UnstyledLink/UnstyledLink.tsx
index 8fd8d5a8820..6a3cd5c9eb8 100644
--- a/src/components/UnstyledLink/UnstyledLink.tsx
+++ b/src/components/UnstyledLink/UnstyledLink.tsx
@@ -5,20 +5,26 @@ import {useLink, LinkLikeComponentProps} from '../../utilities/link';
 // Every component needs a `Props` interface for our styleguide to build the props explorer
 // It'd be great if we could do `type Props = React.ComponentProps<LinkLikeComponent>`
 // but the props explorer isn't smart enough to work that out
-export interface Props extends LinkLikeComponentProps {}
+export interface UnstyledLinkProps extends LinkLikeComponentProps {}
 
-function UnstyledLink(props: Props, _ref: React.RefObject<unknown>) {
-  const LinkComponent = useLink();
-  if (LinkComponent) {
-    return <LinkComponent {...unstyled.props} {...props} />;
-  }
+export const UnstyledLink = React.memo(
+  // This does have a display name, but the linting has a bug in it
+  // https://github.com/yannickcr/eslint-plugin-react/issues/2324
+  // eslint-disable-next-line react/display-name
+  React.forwardRef(function UnstyledLink(
+    props: UnstyledLinkProps,
+    _ref: React.RefObject<unknown>,
+  ) {
+    const LinkComponent = useLink();
+    if (LinkComponent) {
+      return <LinkComponent {...unstyled.props} {...props} />;
+    }
 
-  const {external, url, ...rest} = props;
-  const target = external ? '_blank' : undefined;
-  const rel = external ? 'noopener noreferrer' : undefined;
-  return (
-    <a target={target} {...rest} href={url} rel={rel} {...unstyled.props} />
-  );
-}
-
-export default React.memo(React.forwardRef(UnstyledLink));
+    const {external, url, ...rest} = props;
+    const target = external ? '_blank' : undefined;
+    const rel = external ? 'noopener noreferrer' : undefined;
+    return (
+      <a target={target} {...rest} href={url} rel={rel} {...unstyled.props} />
+    );
+  }),
+);
diff --git a/src/components/UnstyledLink/index.ts b/src/components/UnstyledLink/index.ts
index 4142ca3cdc9..dd8a6d66069 100644
--- a/src/components/UnstyledLink/index.ts
+++ b/src/components/UnstyledLink/index.ts
@@ -1,4 +1 @@
-import UnstyledLink from './UnstyledLink';
-
-export {Props} from './UnstyledLink';
-export default UnstyledLink;
+export {UnstyledLink, UnstyledLinkProps} from './UnstyledLink';
diff --git a/src/components/UnstyledLink/tests/UnstyledLink.test.tsx b/src/components/UnstyledLink/tests/UnstyledLink.test.tsx
index c11745558fc..edb6961d724 100644
--- a/src/components/UnstyledLink/tests/UnstyledLink.test.tsx
+++ b/src/components/UnstyledLink/tests/UnstyledLink.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import UnstyledLink from 'components/UnstyledLink';
+import {UnstyledLink} from 'components/UnstyledLink';
 
 describe('<UnstyledLink />', () => {
   describe('custom link component', () => {
diff --git a/src/components/VisuallyHidden/VisuallyHidden.tsx b/src/components/VisuallyHidden/VisuallyHidden.tsx
index f33a7a1b811..28f812f6745 100644
--- a/src/components/VisuallyHidden/VisuallyHidden.tsx
+++ b/src/components/VisuallyHidden/VisuallyHidden.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import styles from './VisuallyHidden.scss';
 
-export interface Props {
+export interface VisuallyHiddenProps {
   /** The content to be hidden visually */
   children?: React.ReactNode;
 }
 
-export default function VisuallyHidden({children}: Props) {
+export function VisuallyHidden({children}: VisuallyHiddenProps) {
   return <span className={styles.VisuallyHidden}>{children}</span>;
 }
diff --git a/src/components/VisuallyHidden/index.ts b/src/components/VisuallyHidden/index.ts
index 479c8df7edd..123d1933c0b 100644
--- a/src/components/VisuallyHidden/index.ts
+++ b/src/components/VisuallyHidden/index.ts
@@ -1,4 +1 @@
-import VisuallyHidden from './VisuallyHidden';
-
-export {Props} from './VisuallyHidden';
-export default VisuallyHidden;
+export {VisuallyHidden, VisuallyHiddenProps} from './VisuallyHidden';
diff --git a/src/components/index.ts b/src/components/index.ts
index 11d5d715d8b..a56168ccd9b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,57 +1,42 @@
-export {
-  default as AccountConnection,
-  Props as AccountConnectionProps,
-} from './AccountConnection';
+export {AccountConnection, AccountConnectionProps} from './AccountConnection';
 
-export {default as ActionList, Props as ActionListProps} from './ActionList';
+export {ActionList, ActionListProps} from './ActionList';
 
-export {default as ActionMenu, Props as ActionMenuProps} from './ActionMenu';
+export {ActionMenu, ActionMenuProps} from './ActionMenu';
 
-export {default as AppProvider, Props as AppProviderProps} from './AppProvider';
+export {AppProvider, AppProviderProps} from './AppProvider';
 
-export {
-  default as Autocomplete,
-  Props as AutocompleteProps,
-} from './Autocomplete';
+export {Autocomplete, AutocompleteProps} from './Autocomplete';
 
-export {default as Avatar, Props as AvatarProps} from './Avatar';
+export {Avatar, AvatarProps} from './Avatar';
 
-export {default as Backdrop, BackdropProps} from './Backdrop';
+export {Backdrop, BackdropProps} from './Backdrop';
 
-export {default as Badge, Props as BadgeProps} from './Badge';
+export {Badge, BadgeProps} from './Badge';
 
-export {
-  default as Banner,
-  Props as BannerProps,
-  Status as BannerStatus,
-} from './Banner';
+export {Banner, BannerProps, BannerStatus} from './Banner';
 
-export {default as Breadcrumbs, Props as BreadcrumbsProps} from './Breadcrumbs';
+export {Breadcrumbs, BreadcrumbsProps} from './Breadcrumbs';
 
-export {
-  default as Button,
-  Props as ButtonProps,
-  buttonFrom,
-  buttonsFrom,
-} from './Button';
+export {Button, ButtonProps, buttonFrom, buttonsFrom} from './Button';
 
-export {default as ButtonGroup, Props as ButtonGroupProps} from './ButtonGroup';
+export {ButtonGroup, ButtonGroupProps} from './ButtonGroup';
 
-export {default as CalloutCard, Props as CalloutCardProps} from './CalloutCard';
+export {CalloutCard, CalloutCardProps} from './CalloutCard';
 
-export {default as Caption, Props as CaptionProps} from './Caption';
+export {Caption, CaptionProps} from './Caption';
 
-export {default as Card, Props as CardProps} from './Card';
+export {Card, CardProps} from './Card';
 
-export {default as Checkbox, Props as CheckboxProps} from './Checkbox';
+export {Checkbox, CheckboxProps} from './Checkbox';
 
-export {default as ChoiceList, Props as ChoiceListProps} from './ChoiceList';
+export {ChoiceList, ChoiceListProps} from './ChoiceList';
 
-export {default as Collapsible, Props as CollapsibleProps} from './Collapsible';
+export {Collapsible, CollapsibleProps} from './Collapsible';
 
 export {
-  default as ColorPicker,
-  Props as ColorPickerProps,
+  ColorPicker,
+  ColorPickerProps,
   RGBColor,
   HSBColor,
   RGBAColor,
@@ -68,157 +53,122 @@ export {
   rgbaString,
 } from './ColorPicker';
 
-export {default as Connected, Props as ConnectedProps} from './Connected';
+export {Connected, ConnectedProps} from './Connected';
 
-export {
-  default as ContextualSaveBar,
-  Props as ContextualSaveBarProps,
-} from './ContextualSaveBar';
+export {ContextualSaveBar, ContextualSaveBarProps} from './ContextualSaveBar';
 
 export {
-  default as DataTable,
-  Props as DataTableProps,
+  DataTable,
+  DataTableProps,
   TableData,
   TableRow,
   SortDirection,
   ColumnContentType,
 } from './DataTable';
 
-export {
-  default as DatePicker,
-  Props as DatePickerProps,
-  Range,
-  Months,
-  Year,
-} from './DatePicker';
+export {DatePicker, DatePickerProps, Range, Months, Year} from './DatePicker';
 
-export {
-  default as DescriptionList,
-  Props as DescriptionListProps,
-} from './DescriptionList';
+export {DescriptionList, DescriptionListProps} from './DescriptionList';
 
-export {default as DisplayText, Props as DisplayTextProps} from './DisplayText';
+export {DisplayText, DisplayTextProps} from './DisplayText';
 
-export {default as DropZone, Props as DropZoneProps} from './DropZone';
+export {DropZone, DropZoneProps} from './DropZone';
 
-export {
-  default as EmptySearchResult,
-  Props as EmptySearchResultProps,
-} from './EmptySearchResult';
+export {EmptySearchResult, EmptySearchResultProps} from './EmptySearchResult';
 
-export {default as EmptyState, Props as EmptyStateProps} from './EmptyState';
+export {EmptyState, EmptyStateProps} from './EmptyState';
 
-export {
-  default as EventListener,
-  Props as EventListenerProps,
-} from './EventListener';
+export {EventListener, EventListenerProps} from './EventListener';
 
-export {
-  default as ExceptionList,
-  Props as ExceptionListProps,
-} from './ExceptionList';
+export {ExceptionList, ExceptionListProps} from './ExceptionList';
 
 export {
-  default as Filters,
-  Props as FiltersProps,
-  AppliedFilter as AppliedFilterInterface,
-  Filter as FilterInterface,
+  Filters,
+  FiltersProps,
+  AppliedFilterInterface,
+  FilterInterface,
 } from './Filters';
 
-export {default as Focus, Props as FocusProps} from './Focus';
+export {Focus, FocusProps} from './Focus';
 
-export {default as FooterHelp, Props as FooterHelpProps} from './FooterHelp';
+export {FooterHelp, FooterHelpProps} from './FooterHelp';
 
-export {default as Form, Props as FormProps} from './Form';
+export {Form, FormProps} from './Form';
 
-export {default as FormLayout, Props as FormLayoutProps} from './FormLayout';
+export {FormLayout, FormLayoutProps} from './FormLayout';
 
 export {
-  default as Frame,
-  Props as FrameProps,
+  Frame,
+  FrameProps,
   DEFAULT_TOAST_DURATION,
   DEFAULT_TOAST_DURATION_WITH_ACTION,
 } from './Frame';
 
-export {default as Heading, Props as HeadingProps} from './Heading';
+export {Heading, HeadingProps} from './Heading';
 
-export {default as Icon} from './Icon';
+export {Icon} from './Icon';
 
-export {default as Image, Props as ImageProps} from './Image';
+export {Image, ImageProps} from './Image';
 
-export {default as Indicator, Props as IndicatorProps} from './Indicator';
+export {Indicator, IndicatorProps} from './Indicator';
 
-export {
-  default as InlineError,
-  Props as InlineErrorProps,
-  errorTextID,
-} from './InlineError';
+export {InlineError, InlineErrorProps, errorTextID} from './InlineError';
 
-export {default as KeyboardKey, Props as KeyboardKeyProps} from './KeyboardKey';
+export {KeyboardKey, KeyboardKeyProps} from './KeyboardKey';
 
-export {
-  default as KeypressListener,
-  Props as KeypressListenerProps,
-} from './KeypressListener';
+export {KeypressListener, KeypressListenerProps} from './KeypressListener';
 
-export {default as Label, Props as LabelProps} from './Label';
+export {Label, LabelProps} from './Label';
 
-export {default as Labelled, Props as LabelledProps} from './Labelled';
+export {Labelled, LabelledProps} from './Labelled';
 
-export {default as Layout, Props as LayoutProps} from './Layout';
+export {Layout, LayoutProps} from './Layout';
 
-export {default as Link, Props as LinkProps} from './Link';
+export {Link, LinkProps} from './Link';
 
-export {default as List, Props as ListProps} from './List';
+export {List, ListProps} from './List';
 
-export {default as Loading, Props as LoadingProps} from './Loading';
+export {Loading, LoadingProps} from './Loading';
 
-export {default as Modal, Props as ModalProps} from './Modal';
+export {Modal, ModalProps} from './Modal';
 
 export {
-  default as Navigation,
-  Props as NavigationProps,
-  ItemProps as NavigationItemProps,
-  MessageProps as NavigationMessageProps,
+  Navigation,
+  NavigationProps,
+  NavigationItemProps,
+  NavigationMessageProps,
   SubNavigationItem,
   isNavigationItemActive,
 } from './Navigation';
 
-export {default as OptionList} from './OptionList';
+export {OptionList} from './OptionList';
 
-export {default as Page, Props as PageProps} from './Page';
+export {Page, PageProps} from './Page';
 
-export {default as PageActions, Props as PageActionsProps} from './PageActions';
+export {PageActions, PageActionsProps} from './PageActions';
 
-export {default as Pagination, Props as PaginationProps} from './Pagination';
+export {Pagination, PaginationProps} from './Pagination';
 
 export {
-  default as PolarisTestProvider,
+  PolarisTestProvider,
   WithPolarisTestProviderOptions,
 } from './PolarisTestProvider';
 
-export {
-  default as Popover,
-  Props as PopoverProps,
-  CloseSource as PopoverCloseSource,
-} from './Popover';
+export {Popover, PopoverProps, PopoverCloseSource} from './Popover';
 
-export {default as Portal, Props as PortalProps} from './Portal';
+export {Portal, PortalProps} from './Portal';
 
-export {default as ProgressBar, Props as ProgressBarProps} from './ProgressBar';
+export {ProgressBar, ProgressBarProps} from './ProgressBar';
 
-export {default as RadioButton, Props as RadioButtonProps} from './RadioButton';
+export {RadioButton, RadioButtonProps} from './RadioButton';
 
-export {default as RangeSlider, RangeSliderProps} from './RangeSlider';
+export {RangeSlider, RangeSliderProps} from './RangeSlider';
 
-export {
-  default as ResourceItem,
-  Props as ResourceItemProps,
-} from './ResourceItem';
+export {ResourceItem, ResourceItemProps} from './ResourceItem';
 
 export {
-  default as ResourceList,
-  Props as ResourceListProps,
+  ResourceList,
+  ResourceListProps,
   FilterControlProps,
   Filter,
   AppliedFilter,
@@ -227,96 +177,65 @@ export {
   FilterTextField,
 } from './ResourceList';
 
-export {
-  SelectedItems as ResourceListSelectedItems,
-} from '../utilities/resource-list';
+export {ResourceListSelectedItems} from '../utilities/resource-list';
 
-export {
-  default as ResourcePicker,
-  Props as ResourcePickerProps,
-} from './ResourcePicker';
+export {ResourcePicker, ResourcePickerProps} from './ResourcePicker';
 
-export {default as Scrollable, Props as ScrollableProps} from './Scrollable';
+export {Scrollable, ScrollableProps} from './Scrollable';
 
-export {default as ScrollLock} from './ScrollLock';
+export {ScrollLock} from './ScrollLock';
 
-export {
-  default as Select,
-  Props as SelectProps,
-  SelectOption,
-  SelectGroup,
-} from './Select';
+export {Select, SelectProps, SelectOption, SelectGroup} from './Select';
 
-export {
-  default as SettingToggle,
-  Props as SettingToggleProps,
-} from './SettingToggle';
+export {SettingToggle, SettingToggleProps} from './SettingToggle';
 
 export {DATA_ATTRIBUTE} from './shared';
 
-export {default as Sheet} from './Sheet';
+export {Sheet} from './Sheet';
 
-export {
-  default as SkeletonBodyText,
-  Props as SkeletonBodyTextProps,
-} from './SkeletonBodyText';
+export {SkeletonBodyText, SkeletonBodyTextProps} from './SkeletonBodyText';
 
 export {
-  default as SkeletonDisplayText,
-  Props as SkeletonDisplayTextProps,
+  SkeletonDisplayText,
+  SkeletonDisplayTextProps,
 } from './SkeletonDisplayText';
 
-export {
-  default as SkeletonPage,
-  Props as SkeletonPageProps,
-} from './SkeletonPage';
+export {SkeletonPage, SkeletonPageProps} from './SkeletonPage';
 
-export {
-  default as SkeletonThumbnail,
-  Props as SkeletonThumbnailProps,
-} from './SkeletonThumbnail';
+export {SkeletonThumbnail, SkeletonThumbnailProps} from './SkeletonThumbnail';
 
-export {default as Spinner, Props as SpinnerProps} from './Spinner';
+export {Spinner, SpinnerProps} from './Spinner';
 
-export {default as Stack, Props as StackProps} from './Stack';
+export {Stack, StackProps} from './Stack';
 
-export {default as Sticky, Props as StickyProps} from './Sticky';
+export {Sticky, StickyProps} from './Sticky';
 
-export {default as Subheading, Props as SubheadingProps} from './Subheading';
+export {Subheading, SubheadingProps} from './Subheading';
 
-export {default as Tabs, Props as TabsProps} from './Tabs';
+export {Tabs, TabsProps} from './Tabs';
 
-export {default as Tag, Props as TagProps} from './Tag';
+export {Tag, TagProps} from './Tag';
 
-export {
-  default as TextContainer,
-  Props as TextContainerProps,
-} from './TextContainer';
+export {TextContainer, TextContainerProps} from './TextContainer';
 
-export {default as TextField, Props as TextFieldProps} from './TextField';
+export {TextField, TextFieldProps} from './TextField';
 
-export {default as TextStyle, Props as TextStyleProps} from './TextStyle';
+export {TextStyle, TextStyleProps} from './TextStyle';
 
-export {default as ThemeProvider} from './ThemeProvider';
+export {ThemeProvider} from './ThemeProvider';
 
-export {default as Thumbnail, Props as ThumbnailProps} from './Thumbnail';
+export {Thumbnail, ThumbnailProps} from './Thumbnail';
 
-export {default as Toast, Props as ToastProps} from './Toast';
+export {Toast, ToastProps} from './Toast';
 
-export {default as Tooltip, Props as TooltipProps} from './Tooltip';
+export {Tooltip, TooltipProps} from './Tooltip';
 
-export {default as TopBar, Props as TopBarProps} from './TopBar';
+export {TopBar, TopBarProps} from './TopBar';
 
-export {default as TrapFocus, Props as TrapFocusProps} from './TrapFocus';
+export {TrapFocus, TrapFocusProps} from './TrapFocus';
 
-export {default as Truncate, Props as TruncateProps} from './Truncate';
+export {Truncate, TruncateProps} from './Truncate';
 
-export {
-  default as UnstyledLink,
-  Props as UnstyledLinkProps,
-} from './UnstyledLink';
+export {UnstyledLink, UnstyledLinkProps} from './UnstyledLink';
 
-export {
-  default as VisuallyHidden,
-  Props as VisuallyHiddenProps,
-} from './VisuallyHidden';
+export {VisuallyHidden, VisuallyHiddenProps} from './VisuallyHidden';
diff --git a/src/index.ts b/src/index.ts
index fcd48b3b1fa..b535ff8a3d6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,6 +2,7 @@ import './styles/global.scss';
 import './configure';
 
 export * from './types';
+
 export * from './components';
 
 export {
diff --git a/src/test-utilities/index.ts b/src/test-utilities/index.ts
index af4881e6aa5..b8ebf40bd0c 100644
--- a/src/test-utilities/index.ts
+++ b/src/test-utilities/index.ts
@@ -1,2 +1,3 @@
 export * from './react-testing';
+
 export {documentHasStyle} from './document-has-style';
diff --git a/src/types.ts b/src/types.ts
index 09959fba9c6..f8444e645c1 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -53,6 +53,7 @@ export interface IconProps {
 }
 
 export type HeadingTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+
 export type AppBridgeTarget = 'ADMIN_PATH' | 'REMOTE' | 'APP';
 
 export type Error =
@@ -324,5 +325,7 @@ export type DeepPartial<T> = {
 export type Discard<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
 export type EffectCallback = () => void | (() => void | undefined);
+
 export type DependencyList = ReadonlyArray<unknown>;
+
 export type Comparator = (a: DependencyList, b: DependencyList) => boolean;
diff --git a/src/utilities/app-bridge/index.ts b/src/utilities/app-bridge/index.ts
index a24d8f3d4b7..2d00f064f2b 100644
--- a/src/utilities/app-bridge/index.ts
+++ b/src/utilities/app-bridge/index.ts
@@ -1,3 +1,5 @@
 export {AppBridgeContext} from './context';
+
 export {useAppBridge} from './hooks';
+
 export {createAppBridge, AppBridgeOptions} from './app-bridge';
diff --git a/src/utilities/frame/index.ts b/src/utilities/frame/index.ts
index 5e81a1843a6..d360f2a4038 100644
--- a/src/utilities/frame/index.ts
+++ b/src/utilities/frame/index.ts
@@ -1,5 +1,7 @@
 export {useFrame} from './hooks';
+
 export {FrameContext} from './context';
+
 export {
   ContextualSaveBarProps,
   ToastProps,
diff --git a/src/utilities/i18n/index.ts b/src/utilities/i18n/index.ts
index a90e913a155..bde2b180f86 100644
--- a/src/utilities/i18n/index.ts
+++ b/src/utilities/i18n/index.ts
@@ -1,4 +1,7 @@
 export {I18nContext} from './context';
+
 export {useI18n} from './hooks';
+
 export {TranslationDictionary} from './types';
+
 export {I18n} from './I18n';
diff --git a/src/utilities/link/index.ts b/src/utilities/link/index.ts
index 5db0218bc7d..8fc6fdc641f 100644
--- a/src/utilities/link/index.ts
+++ b/src/utilities/link/index.ts
@@ -1,3 +1,5 @@
 export {LinkLikeComponentProps, LinkLikeComponent} from './types';
+
 export {useLink} from './hooks';
+
 export {LinkContext} from './context';
diff --git a/src/utilities/resource-list/context.ts b/src/utilities/resource-list/context.ts
index 26b1d3857a7..95e711f961e 100644
--- a/src/utilities/resource-list/context.ts
+++ b/src/utilities/resource-list/context.ts
@@ -1,10 +1,10 @@
 import React from 'react';
-import {SelectedItems} from './types';
+import {ResourceListSelectedItems} from './types';
 
 export interface ResourceListContextType {
   selectMode?: boolean;
   selectable?: boolean;
-  selectedItems?: SelectedItems;
+  selectedItems?: ResourceListSelectedItems;
   resourceName?: {
     singular: string;
     plural: string;
diff --git a/src/utilities/resource-list/index.ts b/src/utilities/resource-list/index.ts
index 11336f3ce7f..16decd90935 100644
--- a/src/utilities/resource-list/index.ts
+++ b/src/utilities/resource-list/index.ts
@@ -1,2 +1,3 @@
 export {ResourceListContext} from './context';
-export {SelectedItems, SELECT_ALL_ITEMS} from './types';
+
+export {ResourceListSelectedItems, SELECT_ALL_ITEMS} from './types';
diff --git a/src/utilities/resource-list/types.ts b/src/utilities/resource-list/types.ts
index 35319884bf0..96dd31ab659 100644
--- a/src/utilities/resource-list/types.ts
+++ b/src/utilities/resource-list/types.ts
@@ -1,3 +1,3 @@
-export type SelectedItems = string[] | 'All';
+export type ResourceListSelectedItems = string[] | 'All';
 
 export const SELECT_ALL_ITEMS = 'All';
diff --git a/src/utilities/scroll-lock-manager/index.ts b/src/utilities/scroll-lock-manager/index.ts
index 80928cb9a6c..326b60303ba 100644
--- a/src/utilities/scroll-lock-manager/index.ts
+++ b/src/utilities/scroll-lock-manager/index.ts
@@ -1,5 +1,7 @@
 export {ScrollLockManagerContext} from './context';
+
 export {useScrollLockManager} from './hooks';
+
 export {
   ScrollLockManager,
   SCROLL_LOCKING_ATTRIBUTE,
diff --git a/src/utilities/scroll-lock-manager/scroll-lock-manager.ts b/src/utilities/scroll-lock-manager/scroll-lock-manager.ts
index 3c045b11b98..e757f85ec08 100644
--- a/src/utilities/scroll-lock-manager/scroll-lock-manager.ts
+++ b/src/utilities/scroll-lock-manager/scroll-lock-manager.ts
@@ -1,7 +1,9 @@
 import {isServer} from '../target';
 
 export const SCROLL_LOCKING_ATTRIBUTE = 'data-lock-scrolling';
+
 export const SCROLL_LOCKING_WRAPPER_ATTRIBUTE = 'data-lock-scrolling-wrapper';
+
 export const SCROLL_LOCKING_CUSTOM_PROPERTY = '--scroll-lock-body-padding';
 
 let scrollPosition = 0;
diff --git a/src/utilities/sticky-manager/index.ts b/src/utilities/sticky-manager/index.ts
index d69a7e910a1..a7b49e81201 100644
--- a/src/utilities/sticky-manager/index.ts
+++ b/src/utilities/sticky-manager/index.ts
@@ -1,3 +1,5 @@
 export {StickyManagerContext} from './context';
+
 export {useStickyManager} from './hooks';
+
 export {StickyManager} from './sticky-manager';
diff --git a/src/utilities/theme/index.ts b/src/utilities/theme/index.ts
index 06cb16bfd70..6d247caf809 100644
--- a/src/utilities/theme/index.ts
+++ b/src/utilities/theme/index.ts
@@ -1,3 +1,5 @@
 export {ThemeContext} from './context';
+
 export {useTheme} from './hooks';
+
 export {Theme} from './types';