diff --git a/.storybook/main.ts b/.storybook/main.ts
index b0c72e57d7..c210a93d14 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -19,7 +19,9 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
-  stories: ['../examples/**/stories.@(ts|tsx|js|jsx)'],
+  stories: [
+    '../examples/**/stories.@(ts|tsx|js|jsx)',
+  ],
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-actions',
@@ -31,12 +33,18 @@ const config: StorybookConfig = {
     options: {},
   },
   docs: {
-    autodocs: false,
+    autodocs: 'tag',
     defaultName: 'Documentation',
   },
   typescript: {
     reactDocgenTypescriptOptions: {
       shouldIncludePropTagMap: true,
+      propFilter: (prop) => {        
+        const isHTMLElementProp =
+            prop.parent?.fileName.includes("node_modules") ?? false
+
+        return !isHTMLElementProp
+      },
     },
   },
   features: {
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 59afd21644..a7d5ab0f25 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -16,8 +16,9 @@
  * limitations under the License.
  */
 
+import { Title, PRIMARY_STORY } from '@storybook/blocks';
+import { ArgsTable } from '@storybook/addon-docs';
 import type { Preview } from '@storybook/react';
-import { spacingBase } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 import '../packages/bpk-stylesheets';
 import '../packages/bpk-stylesheets/font';
@@ -35,7 +36,7 @@ const EnhancedThemeProvider = updateOnThemeChange(BpkThemeProvider);
 const preview: Preview = {
   decorators: [
     (story) => (
-      <div style={{ padding: spacingBase }}>
+      <div>
         <EnhancedThemeProvider themeAttributes={themeableAttributes}>
           {story()}
         </EnhancedThemeProvider>
@@ -48,6 +49,19 @@ const preview: Preview = {
       </div>
     ),
   ],
+  parameters: {
+    docs: {
+      source: {
+        type: 'dynamic',
+      },
+      page: () => (
+        <>
+          <Title />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      )
+    },
+  }
 };
 
 export default preview;
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 60913243df..bd66ab3647 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -34,6 +34,13 @@ module.exports = ({ config }) => {
       presets: [['@babel/preset-env']],
     },
   });
+  config.module.rules.push({
+    test: /\.(js|jsx)?$/,
+    loader: 'babel-loader',
+    options: {
+      plugins: ['babel-plugin-react-docgen'],
+    },
+  });
   config.resolve.extensions.push('.tsx');
   config.resolve.extensions.push('.ts');
   /* eslint-disable-next-line no-param-reassign */
diff --git a/examples/bpk-component-accordion/stories.js b/examples/bpk-component-accordion/stories.js
index 95a1203f12..3a2d45f03c 100644
--- a/examples/bpk-component-accordion/stories.js
+++ b/examples/bpk-component-accordion/stories.js
@@ -18,6 +18,10 @@
 
 /* @flow strict */
 
+
+import BpkAccordion from '../../packages/bpk-component-accordion/src/BpkAccordion';
+import BpkAccordionItem from '../../packages/bpk-component-accordion/src/BpkAccordionItem';
+
 import {
   SingleItemExample,
   SingleItemExampleInitiallyExpandedExample,
@@ -35,6 +39,11 @@ import {
 
 export default {
   title: 'bpk-component-accordion',
+  component: BpkAccordion,
+  subcomponents: {
+    BpkAccordionItem,
+  },
+  tags: ['autodocs']
 };
 
 export const SingleItemOnly = SingleItemExample;
diff --git a/examples/bpk-component-banner-alert/stories.js b/examples/bpk-component-banner-alert/stories.js
index 5389268c6c..e9ba297712 100644
--- a/examples/bpk-component-banner-alert/stories.js
+++ b/examples/bpk-component-banner-alert/stories.js
@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 /* @flow strict */
+
+import BpkBannerAlert from '../../packages/bpk-component-banner-alert/src/BpkBannerAlert';
+import BpkBannerAlertDismissable from '../../packages/bpk-component-banner-alert/src/BpkBannerAlertDismissable';
+import BpkBannerAlertExpandable from '../../packages/bpk-component-banner-alert/src/BpkBannerAlertExpandable';
+
 import {
   NeutralExample,
   PrimaryExample,
@@ -36,6 +41,12 @@ import {
 
 export default {
   title: 'bpk-component-banner-alert',
+  component: BpkBannerAlert,
+  subcomponents: {
+    BpkBannerAlertDismissable,
+    BpkBannerAlertExpandable,
+  },
+  tags: ['autodocs']
 };
 
 export const DocsDefault = DocsDefaultExample;
@@ -44,16 +55,11 @@ export const Neutral = NeutralExample;
 export const Primary = PrimaryExample;
 export const Success = SuccessExample;
 export const SuccessLongMessage = SuccessLongMessageExample;
-
 export const SuccessDismissable = DismissableExample;
-
 export const SuccessExpandable = SuccessExpandableExample;
-
 export const SuccessAnimateOnEnter = SuccessAnimateOnEnterExample;
-
 export const SuccessWithReactRenderedMessage =
   SuccessWithReactRenderedMessageExample;
-
 export const Warn = WarnExample;
 export const Error = ErrorExample;
 export const SuccessDismissableBehaviour = SuccessDismissableBehaviourExample;
@@ -62,7 +68,6 @@ export const SuccessExpandableBehaviour = SuccessExpandableBehaviourExample;
 
 export const SuccessAutomaticallyDismissedAfter5Seconds =
   SuccessAutomaticallyDismissedExample;
-
 export const SuccessWithCustomIcon = SuccessCustomIconExample;
 
 export const VisualTest = DocsDefaultExample;
diff --git a/examples/bpk-component-breadcrumb/stories.js b/examples/bpk-component-breadcrumb/stories.js
index 2c832c18ba..ad5d38e339 100644
--- a/examples/bpk-component-breadcrumb/stories.js
+++ b/examples/bpk-component-breadcrumb/stories.js
@@ -18,10 +18,18 @@
 
 /* @flow strict */
 
+import BpkBreadcrumb from '../../packages/bpk-component-breadcrumb/src/BpkBreadcrumb';
+import BpkBreadcrumbItem from '../../packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem';
+
 import { DefaultExample, ExtremeExample } from './examples';
 
 export default {
+  component: BpkBreadcrumb,
   title: 'bpk-component-breadcrumb',
+  subcomponents: {
+    BpkBreadcrumbItem
+  },
+  tags: ['autodocs']
 };
 
 export const Default = DefaultExample;
diff --git a/examples/bpk-component-calendar/stories.js b/examples/bpk-component-calendar/stories.js
index 47bef7b6da..f335100022 100644
--- a/examples/bpk-component-calendar/stories.js
+++ b/examples/bpk-component-calendar/stories.js
@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+import BpkCalendarGridHeaderComponent from '../../packages/bpk-component-calendar/src/BpkCalendarGridHeader';
+import BpkCalendarGridComponent from '../../packages/bpk-component-calendar/src/BpkCalendarGrid';
+import BpkCalendarNavComponent from '../../packages/bpk-component-calendar/src/BpkCalendarNav';
+import BpkCalendarDateComponent from '../../packages/bpk-component-calendar/src/BpkCalendarDate';
+
 import {
   DefaultExample,
   CalendarNavExample,
@@ -40,6 +45,13 @@ import {
 
 export default {
   title: 'bpk-component-calendar',
+  component: BpkCalendarGridComponent,
+  subcomponents: {
+    BpkCalendarNavComponent,
+    BpkCalendarGridHeaderComponent,
+    BpkCalendarDateComponent,
+  },
+  tags: ['autodocs']
 };
 
 export const BpkCalendarNav = CalendarNavExample;
diff --git a/examples/bpk-component-card/stories.js b/examples/bpk-component-card/stories.js
index 59535c47f8..bfa6b561c1 100644
--- a/examples/bpk-component-card/stories.js
+++ b/examples/bpk-component-card/stories.js
@@ -17,6 +17,10 @@
  */
 /* @flow strict */
 
+import BpkCard from '../../packages/bpk-component-card/src/BpkCard';
+import BpkDividedCard from '../../packages/bpk-component-card/src/BpkDividedCard';
+import BpkCardWrapper from '../../packages/bpk-component-card/src/BpkCardWrapper';
+
 import {
   DefaultExample,
   WithHrefExample,
@@ -35,6 +39,12 @@ import {
 
 export default {
   title: 'bpk-component-card',
+  component: BpkCard,
+  subcomponents: {
+    BpkDividedCard,
+    BpkCardWrapper,
+  },
+  tags: ['autodocs']
 };
 
 export const Default = DefaultExample;
diff --git a/examples/bpk-component-chip/stories.js b/examples/bpk-component-chip/stories.js
index 7a4fad9234..a189208fe7 100644
--- a/examples/bpk-component-chip/stories.js
+++ b/examples/bpk-component-chip/stories.js
@@ -18,6 +18,10 @@
 
 /* @flow strict */
 
+import BpkSelectableChip from '../../packages/bpk-component-chip/src/BpkSelectableChip';
+import BpkDismissibleChip from '../../packages/bpk-component-chip/src/BpkDismissibleChip';
+import BpkDropdownChip from '../../packages/bpk-component-chip/src/BpkDropdownChip';
+
 import {
   AllTypesExample,
   AllSelectableChipsExample,
@@ -28,6 +32,12 @@ import {
 
 export default {
   title: 'bpk-component-chip',
+  component: BpkSelectableChip,
+  subcomponents: {
+    BpkDismissibleChip,
+    BpkDropdownChip,
+  },
+  tags: ['autodocs'],
 };
 
 export const AllTypes = AllTypesExample;
diff --git a/examples/bpk-component-datatable/stories.js b/examples/bpk-component-datatable/stories.js
index 22edd81c4c..1ec6630495 100644
--- a/examples/bpk-component-datatable/stories.js
+++ b/examples/bpk-component-datatable/stories.js
@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+import BpkDataTable from '../../packages/bpk-component-datatable/src/BpkDataTable';
+import BpkDataTableColumn from '../../packages/bpk-component-datatable/src/BpkDataTableColumn';
+
 import {
   AutowidthExample,
   NonHoverRowsExample,
@@ -29,6 +32,9 @@ import {
 
 export default {
   title: 'bpk-component-datatable',
+  component: BpkDataTable,
+  subcomponents: { BpkDataTableColumn },
+  tags: ['autodocs'],
 };
 
 export const Autowidth = AutowidthExample;
diff --git a/examples/bpk-component-description-list/stories.js b/examples/bpk-component-description-list/stories.js
index 5cdfa682e6..a4fdee89d7 100644
--- a/examples/bpk-component-description-list/stories.js
+++ b/examples/bpk-component-description-list/stories.js
@@ -16,10 +16,20 @@
  * limitations under the License.
  */
 
+import BpkDescriptionList from '../../packages/bpk-component-description-list/src/BpkDescriptionList';
+import BpkDescriptionTerm from '../../packages/bpk-component-description-list/src/BpkDescriptionTerm';
+import BpkDescriptionDetails from '../../packages/bpk-component-description-list/src/BpkDescriptionDetails';
+
 import DefaultExample from './examples';
 
 export default {
   title: 'bpk-component-description-list',
+  component: BpkDescriptionList,
+  subcomponents: {
+    BpkDescriptionTerm,
+    BpkDescriptionDetails,
+  },
+  tags: ['autodocs'],
 };
 
 export const DescriptionList = DefaultExample;
diff --git a/examples/bpk-component-flare/stories.js b/examples/bpk-component-flare/stories.js
index 76dff36e97..ea8e56eb3b 100644
--- a/examples/bpk-component-flare/stories.js
+++ b/examples/bpk-component-flare/stories.js
@@ -18,6 +18,9 @@
 
 /* @flow strict */
 
+import BpkContentBubble from '../../packages/bpk-component-flare/src/BpkContentBubble';
+import BpkFlareBar from '../../packages/bpk-component-flare/src/BpkFlareBar';
+
 import {
   FlareBarExample,
   FlareBarRoundedExample,
@@ -31,6 +34,11 @@ import {
 
 export default {
   title: 'bpk-component-flare',
+  component: BpkContentBubble,
+  subcomponents: {
+    BpkFlareBar,
+  },
+  tags: ['autodocs'],
 };
 
 export const BpkFlareBarDefault = FlareBarExample;
diff --git a/examples/bpk-component-horizontal-nav/stories.js b/examples/bpk-component-horizontal-nav/stories.js
index b54aa36c91..b36ad459fc 100644
--- a/examples/bpk-component-horizontal-nav/stories.js
+++ b/examples/bpk-component-horizontal-nav/stories.js
@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+import BpkHorizontalNav from '../../packages/bpk-component-horizontal-nav/src/BpkHorizontalNav';
+import BpkHorizontalNavItem from '../../packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem';
+
 import {
   DefaultExample,
   ScrollToSelectedExample,
@@ -32,6 +35,9 @@ import {
 
 export default {
   title: 'bpk-component-horizontal-nav',
+  component: BpkHorizontalNav,
+  subcomponents: { BpkHorizontalNavItem },
+  tags: ['autodocs'],
 };
 
 export const Example = DefaultExample;
diff --git a/examples/bpk-component-image/stories.js b/examples/bpk-component-image/stories.js
index 213cf0f105..8468dedb13 100644
--- a/examples/bpk-component-image/stories.js
+++ b/examples/bpk-component-image/stories.js
@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+import BpkImage from '../../packages/bpk-component-image/src/BpkImage';
+import BpkBackgroundImage from '../../packages/bpk-component-image/src/BpkBackgroundImage';
+
 import {
   DefaultExample,
   RoundedCornersExample,
@@ -31,6 +34,9 @@ import {
 
 export default {
   title: 'bpk-component-image',
+  component: BpkImage,
+  subcomponents: { BpkBackgroundImage },
+  tags: ['autodocs'],
 };
 
 export const Default = DefaultExample;
diff --git a/examples/bpk-component-input/stories.js b/examples/bpk-component-input/stories.js
index 201aecb378..ee820596f2 100644
--- a/examples/bpk-component-input/stories.js
+++ b/examples/bpk-component-input/stories.js
@@ -17,6 +17,8 @@
  */
 /* @flow strict */
 
+import BpkInput from '../../packages/bpk-component-input/src/BpkInput';
+
 import {
   TextExample,
   PlaceholderExample,
@@ -36,6 +38,8 @@ import {
 
 export default {
   title: 'bpk-component-input',
+  component: BpkInput,
+  tags: ['autodocs'],
 };
 
 export const TextValue = TextExample;
diff --git a/examples/bpk-component-link/stories.js b/examples/bpk-component-link/stories.js
index 700b8edd97..b7272d9bac 100644
--- a/examples/bpk-component-link/stories.js
+++ b/examples/bpk-component-link/stories.js
@@ -18,6 +18,9 @@
 
 /* @flow strict */
 
+import BpkLink from '../../packages/bpk-component-link/src/BpkLink';
+import BpkButtonLink from '../../packages/bpk-component-link/src/BpkButtonLink';
+
 import {
   LinkExample,
   ButtonLinkExample,
@@ -30,6 +33,11 @@ import {
 
 export default {
   title: 'bpk-component-link',
+  component: BpkLink,
+  subcomponents: {
+    BpkButtonLink
+  },
+  tags: ['autodocs'],
 };
 
 export const Example = LinkExample;
diff --git a/examples/bpk-component-list/stories.js b/examples/bpk-component-list/stories.js
index 3fe079bc0d..2ccaef5227 100644
--- a/examples/bpk-component-list/stories.js
+++ b/examples/bpk-component-list/stories.js
@@ -18,10 +18,18 @@
 
 /* @flow strict */
 
+import BpkList from '../../packages/bpk-component-list/src/BpkList';
+import BpkListItem from '../../packages/bpk-component-list/src/BpkListItem';
+
 import { UnorderedExample, OrderedExample, NestedExample } from './examples';
 
 export default {
   title: 'bpk-component-list',
+  component: BpkList,
+  subcomponents: {
+    BpkListItem
+  },
+  tags: ['autodocs'],
 };
 
 export const Unordered = UnorderedExample;
diff --git a/examples/bpk-component-map/stories.js b/examples/bpk-component-map/stories.js
index c3e4673754..1d32bf31cf 100644
--- a/examples/bpk-component-map/stories.js
+++ b/examples/bpk-component-map/stories.js
@@ -17,6 +17,11 @@
  */
 /* @flow strict */
 
+import BpkMap from '../../packages/bpk-component-map/src/BpkMap';
+import BpkIconMarker from '../../packages/bpk-component-map/src/BpkIconMarker';
+import BpkPriceMarker from '../../packages/bpk-component-map/src/BpkPriceMarker';
+import BpkOverlayView from '../../packages/bpk-component-map/src/BpkOverlayView';
+
 import {
   SimpleExample,
   DragDisabledAndHiddenControlsExample,
@@ -35,8 +40,14 @@ import {
 
 export default {
   title: 'bpk-component-map',
+  component: BpkMap,
+  subcomponents: {
+    BpkIconMarker,
+    BpkPriceMarker,
+    BpkOverlayView,
+  },
+  tags: ['autodocs'],
 };
-
 export const Simple = SimpleExample;
 export const DragDisabledAndControlsHidden =
   DragDisabledAndHiddenControlsExample;
diff --git a/examples/bpk-component-navigation-bar/stories.js b/examples/bpk-component-navigation-bar/stories.js
index de446e1edf..cc43497503 100644
--- a/examples/bpk-component-navigation-bar/stories.js
+++ b/examples/bpk-component-navigation-bar/stories.js
@@ -18,6 +18,10 @@
 
 /* @flow strict */
 
+import BpkNavigationBar from '../../packages/bpk-component-navigation-bar/src/BpkNavigationBar';
+import BpkNavigationBarIconButton from '../../packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton';
+import BpkNavigationBarButtonLink from '../../packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink';
+
 import {
   DefaultExample,
   LeadingIconOnlyExample,
@@ -29,6 +33,12 @@ import {
 
 export default {
   title: 'bpk-component-navigation-bar',
+  component: BpkNavigationBar,
+  subcomponents: {
+    BpkNavigationBarIconButton,
+    BpkNavigationBarButtonLink,
+  },
+  tags: ['autodocs'],
 };
 
 export const Default = DefaultExample;
diff --git a/examples/bpk-component-nudger/stories.js b/examples/bpk-component-nudger/stories.js
index 5adfdfcc2b..66c2c71eae 100644
--- a/examples/bpk-component-nudger/stories.js
+++ b/examples/bpk-component-nudger/stories.js
@@ -18,6 +18,9 @@
 
 /* @flow strict */
 
+import BpkNudger from '../../packages/bpk-component-nudger/src/BpkNudger';
+import BpkConfigurableNudger from '../../packages/bpk-component-nudger/src/BpkConfigurableNudger';
+
 import {
   DefaultExample,
   WithLabelExample,
@@ -31,6 +34,9 @@ import {
 
 export default {
   title: 'bpk-component-nudger',
+  component: BpkNudger,
+  subcomponents: { BpkConfigurableNudger },
+  tags: ['autodocs'],
 };
 
 export const Default = DefaultExample;
diff --git a/examples/bpk-component-overlay/stories.tsx b/examples/bpk-component-overlay/stories.tsx
index d7391e587e..887e442d62 100644
--- a/examples/bpk-component-overlay/stories.tsx
+++ b/examples/bpk-component-overlay/stories.tsx
@@ -15,7 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
 import {
   SolidExamples,
diff --git a/examples/bpk-component-section-list/stories.js b/examples/bpk-component-section-list/stories.js
index bd7abef6e7..b9e329b3be 100644
--- a/examples/bpk-component-section-list/stories.js
+++ b/examples/bpk-component-section-list/stories.js
@@ -18,10 +18,20 @@
 
 /* @flow strict */
 
+import BpkSectionList from '../../packages/bpk-component-section-list/src/BpkSectionList';
+import BpkSectionListSection from '../../packages/bpk-component-section-list/src/BpkSectionListSection';
+import BpkSectionListItem from '../../packages/bpk-component-section-list/src/BpkSectionListItem';
+
 import DefaultExample from './examples';
 
 export default {
   title: 'bpk-component-section-list',
+  component: BpkSectionList,
+  subcomponents: {
+    BpkSectionListSection,
+    BpkSectionListItem,
+  },
+  tags: ['autodocs'],
 };
 
 export const Default = DefaultExample;
diff --git a/examples/bpk-component-spinner/stories.js b/examples/bpk-component-spinner/stories.js
index 3cc8f56129..b98f2da8ac 100644
--- a/examples/bpk-component-spinner/stories.js
+++ b/examples/bpk-component-spinner/stories.js
@@ -18,10 +18,20 @@
 
 /* @flow strict */
 
+import BpkSpinner from '../../packages/bpk-component-spinner/src/BpkSpinner';
+import BpkLargeSpinner from '../../packages/bpk-component-spinner/src/BpkLargeSpinner';
+import BpkExtraLargeSpinner from '../../packages/bpk-component-spinner/src/BpkExtraLargeSpinner';
+
 import { SmallExample, LargeExample, ExtraLargeExample } from './examples';
 
 export default {
   title: 'bpk-component-spinner',
+  component: BpkSpinner,
+  subcomponents: {
+    BpkLargeSpinner,
+    BpkExtraLargeSpinner,
+  },
+  tags: ['autodocs'],
 };
 
 export const Small = SmallExample;
diff --git a/examples/bpk-component-star-rating/stories.js b/examples/bpk-component-star-rating/stories.js
index 5d1d3bf566..1f8a91b6fb 100644
--- a/examples/bpk-component-star-rating/stories.js
+++ b/examples/bpk-component-star-rating/stories.js
@@ -18,6 +18,11 @@
 
 /* @flow strict */
 
+import BpkStarRating from '../../packages/bpk-component-star-rating/src/BpkStarRating';
+import BpkStar from '../../packages/bpk-component-star-rating/src/BpkStar';
+import BpkInteractiveStarRating from '../../packages/bpk-component-star-rating/src/BpkInteractiveStarRating';
+import BpkInteractiveStar from '../../packages/bpk-component-star-rating/src/BpkInteractiveStar';
+
 import {
   FullExample,
   FullStarsExample,
@@ -34,6 +39,13 @@ import {
 
 export default {
   title: 'bpk-component-star-rating',
+  component: BpkStarRating,
+  subcomponents: {
+    BpkStar,
+    BpkInteractiveStarRating,
+    BpkInteractiveStar,
+  },
+  tags: ['autodocs'],
 };
 
 export const BpkStarExamples = FullExample;
diff --git a/examples/bpk-component-table/stories.js b/examples/bpk-component-table/stories.js
index ed1152f85f..4ec67af76a 100644
--- a/examples/bpk-component-table/stories.js
+++ b/examples/bpk-component-table/stories.js
@@ -16,10 +16,26 @@
  * limitations under the License.
  */
 
+import BpkTable from '../../packages/bpk-component-table/src/BpkTable';
+import BpkTableHead from '../../packages/bpk-component-table/src/BpkTableHead';
+import BpkTableBody from '../../packages/bpk-component-table/src/BpkTableBody';
+import BpkTableRow from '../../packages/bpk-component-table/src/BpkTableRow';
+import BpkTableHeadCell from '../../packages/bpk-component-table/src/BpkTableHeadCell';
+import BpkTableCell from '../../packages/bpk-component-table/src/BpkTableCell';
+
 import DefaultExample from './examples';
 
 export default {
   title: 'bpk-component-table',
+  component: BpkTable,
+  subcomponents: {
+    BpkTableHead,
+    BpkTableBody,
+    BpkTableRow,
+    BpkTableHeadCell,
+    BpkTableCell,
+  },
+  tags: ['autodocs'],
 };
 
 export const Default = DefaultExample;
diff --git a/packages/bpk-component-boilerplate/src/BpkBoilerplate-test.tsx b/packages/bpk-component-boilerplate/src/BpkBoilerplate-test.tsx
index d8f91885b6..1e2172704d 100644
--- a/packages/bpk-component-boilerplate/src/BpkBoilerplate-test.tsx
+++ b/packages/bpk-component-boilerplate/src/BpkBoilerplate-test.tsx
@@ -15,7 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
 import { render } from '@testing-library/react';
 
diff --git a/packages/bpk-component-boilerplate/src/accessibility-test.tsx b/packages/bpk-component-boilerplate/src/accessibility-test.tsx
index 2d6c8425b0..2af5a28a4e 100644
--- a/packages/bpk-component-boilerplate/src/accessibility-test.tsx
+++ b/packages/bpk-component-boilerplate/src/accessibility-test.tsx
@@ -15,7 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
 import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
diff --git a/packages/bpk-component-calendar/DOCS.md b/packages/bpk-component-calendar/DOCS.md
index 3830e94678..264b89ce35 100644
--- a/packages/bpk-component-calendar/DOCS.md
+++ b/packages/bpk-component-calendar/DOCS.md
@@ -20,4 +20,4 @@ Calendar components -
 
     - `Week` - This is a container that will take the `DateComponent` to display each of the dates in the calendar
 
-  - `BpkCalendarDate` - is each date cell that would be displayed inside the calendar grid. This would be used to customise how each date cell is displayed e.g. coloured or with special pricing displayed.
\ No newline at end of file
+  - `BpkCalendarDate` - is each date cell that would be displayed inside the calendar grid. This would be used to customise how each date cell is displayed e.g. coloured or with special pricing displayed.
diff --git a/packages/bpk-component-card/src/BpkCard.tsx b/packages/bpk-component-card/src/BpkCard.tsx
index 6a0869296f..33c8669954 100644
--- a/packages/bpk-component-card/src/BpkCard.tsx
+++ b/packages/bpk-component-card/src/BpkCard.tsx
@@ -66,7 +66,6 @@ const BpkCard = ({
     }
 
     return (
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
       <a
         href={href}
         className={classNames}
@@ -88,7 +87,6 @@ const BpkCard = ({
   }
 
   return (
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
     <div className={classNames} {...rest}>
       {children}
     </div>
diff --git a/packages/bpk-component-card/src/BpkDividedCard.tsx b/packages/bpk-component-card/src/BpkDividedCard.tsx
index 0e4762e1d0..38afe47593 100644
--- a/packages/bpk-component-card/src/BpkDividedCard.tsx
+++ b/packages/bpk-component-card/src/BpkDividedCard.tsx
@@ -58,7 +58,6 @@ const BpkDividedCard = ({
   );
 
   return (
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
     <BpkCard className={classNames} href={href} padded={false} {...rest}>
       <div
         className={getClassName(
diff --git a/packages/bpk-component-dialog/src/BpkDialog.tsx b/packages/bpk-component-dialog/src/BpkDialog.tsx
index b6b6b76d97..9f1df0cc45 100644
--- a/packages/bpk-component-dialog/src/BpkDialog.tsx
+++ b/packages/bpk-component-dialog/src/BpkDialog.tsx
@@ -56,7 +56,6 @@ const BpkDialog = ({
       renderTarget={renderTarget}
       closeOnEscPressed={dismissible}
     >
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
       <BpkDialogInner
         onClose={onClose}
         closeOnScrimClick={dismissible}
diff --git a/packages/bpk-component-input/src/BpkClearButton-test.tsx b/packages/bpk-component-input/src/BpkClearButton-test.tsx
index 19d8710d72..5eb72c4e71 100644
--- a/packages/bpk-component-input/src/BpkClearButton-test.tsx
+++ b/packages/bpk-component-input/src/BpkClearButton-test.tsx
@@ -15,7 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
 import { render } from '@testing-library/react';
 
diff --git a/packages/bpk-component-input/src/BpkClearButton.tsx b/packages/bpk-component-input/src/BpkClearButton.tsx
index e21521e5af..ab2d37843d 100644
--- a/packages/bpk-component-input/src/BpkClearButton.tsx
+++ b/packages/bpk-component-input/src/BpkClearButton.tsx
@@ -41,7 +41,6 @@ const BpkClearButton = ({ className, label, onClick, ...rest }: Props) => {
   }
 
   return (
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
     <button
       type="button"
       title={label}
diff --git a/packages/bpk-component-input/src/BpkInput.tsx b/packages/bpk-component-input/src/BpkInput.tsx
index 46402aef0f..fbb24161fa 100644
--- a/packages/bpk-component-input/src/BpkInput.tsx
+++ b/packages/bpk-component-input/src/BpkInput.tsx
@@ -117,7 +117,6 @@ class BpkInput extends Component<Props, State> {
     }
 
     const renderedInput = (
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
       <input
         className={classNames.join(' ')}
         ref={(input: HTMLInputElement) => {
diff --git a/packages/bpk-component-overlay/index.d.ts b/packages/bpk-component-overlay/index.d.ts
index 4ab17e67c9..75fe172436 100644
--- a/packages/bpk-component-overlay/index.d.ts
+++ b/packages/bpk-component-overlay/index.d.ts
@@ -15,7 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
 import BpkOverlay, {
   OVERLAY_TYPES,
diff --git a/packages/bpk-component-overlay/index.ts b/packages/bpk-component-overlay/index.ts
index 4ab17e67c9..75fe172436 100644
--- a/packages/bpk-component-overlay/index.ts
+++ b/packages/bpk-component-overlay/index.ts
@@ -15,7 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
 import BpkOverlay, {
   OVERLAY_TYPES,
diff --git a/packages/bpk-component-overlay/src/accessibility-test.tsx b/packages/bpk-component-overlay/src/accessibility-test.tsx
index 12f8c1bb1e..206b6762cb 100644
--- a/packages/bpk-component-overlay/src/accessibility-test.tsx
+++ b/packages/bpk-component-overlay/src/accessibility-test.tsx
@@ -15,7 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
 import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
diff --git a/packages/bpk-component-tooltip/src/BpkTooltip.tsx b/packages/bpk-component-tooltip/src/BpkTooltip.tsx
index 396e0b3c03..0afa96a5eb 100644
--- a/packages/bpk-component-tooltip/src/BpkTooltip.tsx
+++ b/packages/bpk-component-tooltip/src/BpkTooltip.tsx
@@ -66,7 +66,6 @@ const BpkTooltip = ({
       appearActiveClassName={getClassName('bpk-tooltip--appear-active')}
       transitionTimeout={200}
     >
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
       <section
         id={id}
         tabIndex={-1}
diff --git a/packages/bpk-component-tooltip/src/BpkTooltipPortal.tsx b/packages/bpk-component-tooltip/src/BpkTooltipPortal.tsx
index d5b8dfc489..18e22b726f 100644
--- a/packages/bpk-component-tooltip/src/BpkTooltipPortal.tsx
+++ b/packages/bpk-component-tooltip/src/BpkTooltipPortal.tsx
@@ -200,7 +200,6 @@ class BpkTooltipPortal extends Component<Props, State> {
             renderTarget={renderTarget}
             className={classNames.join(' ')}
           >
-            {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
             <BpkTooltip padded={padded} {...rest}>
               {children}
             </BpkTooltip>