diff --git a/.storybook/IntlWrap.css b/.storybook/IntlWrap.css
new file mode 100644
index 000000000..9fd71d9bc
--- /dev/null
+++ b/.storybook/IntlWrap.css
@@ -0,0 +1,27 @@
+.iwControls {
+  position: sticky;
+  inset: 0;
+  background-color: #fff;
+  border-bottom: 1px solid #e7e7e7;
+  z-index: 1;
+  margin-bottom: 1rem;
+  padding-bottom: .5rem;
+  display: flex;
+  gap: .5rem;
+  align-items: center;
+}
+
+.iwLabel {
+  font-weight: bold;
+  display: inline;
+}
+
+.iwLegend {
+  display: block;
+}
+
+.iwFieldSet {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: .5rem;
+}
diff --git a/.storybook/IntlWrap.js b/.storybook/IntlWrap.js
new file mode 100644
index 000000000..0e3b22a0e
--- /dev/null
+++ b/.storybook/IntlWrap.js
@@ -0,0 +1,38 @@
+// component providing both a switch for locale and a toggle switch for rtl.
+import React, { useState, useCallback } from 'react';
+import { IntlProvider } from 'react-intl';
+import css from './IntlWrap.css';
+
+function updatePageDirection(direction) {
+  document.body.dir = direction;
+  console.log('setting direction');
+}
+
+const IntlWrap = ({ messages, children }) => {
+  const [locale, updateLocale] = useState('en');
+  const [direction, updateDirection ] = useState('LTR');
+
+  const handleDirectionChange = (e) => {
+    updateDirection(e.target.value);
+    updatePageDirection(e.target.value);
+  };
+
+  return (
+    <IntlProvider locale={locale} messages={messages['en']}>
+      <div className={css.iwControls} dir="ltr"><label className={css.iwLabel}>Locale: </label><select value={locale} onChange={e => updateLocale(e.target.value)}>
+        {
+          Object.keys(messages).map(l => <option key={l}>{l}</option>)
+        }
+        </select>
+        <div className={css.iwFieldSet}>
+          <label className={`${css.iwLegend} ${css.iwLabel}`} >Direction: </label>
+          <label><input type="radio" onChange={handleDirectionChange} name="direction" value="LTR" checked={direction === 'LTR'}/> LTR</label>
+          <label><input type="radio" onChange={handleDirectionChange} name="direction" value="RTL" checked={direction === 'RTL'}/> RTL</label>
+        </div>
+      </div>
+      { children }
+    </IntlProvider>
+  )
+}
+
+export default IntlWrap;
diff --git a/.storybook/main.js b/.storybook/main.js
index aa045f8c0..93a78946b 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,12 +1,10 @@
 const customWebpack = require('./stcom-webpack.config.js');
 
-module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
+const config = {
   features: {
     postcss: false, // we use our own postcss setup
   },
+
   stories: [{
     directory: '../guides',
     titlePrefix: 'Guides',
@@ -17,12 +15,22 @@ module.exports = {
     titlePrefix: 'Components',
     files: '**/*.stories.[tj]s'
   }],
+
   addons: [
-    'storybook-readme/register',
     '@storybook/addon-essentials',
-    'storybook-addon-intl/register',
-    'storybook-addon-rtl/register',
-    'storybook-addon-designs/register',
+    '@storybook/addon-mdx-gfm'
   ],
-  webpackFinal: customWebpack
+
+  webpackFinal: customWebpack,
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: { fastRefresh: true }
+  },
+
+  docs: {
+    autodocs: false
+  },
 };
+
+export default config;
diff --git a/.storybook/manager.js b/.storybook/manager.js
index ab25b06f8..7b5053e6a 100644
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -1,15 +1,7 @@
-import { addons } from '@storybook/addons';
-import { themes } from '@storybook/theming';
-import pkg from '../package.json'
+import { addons } from '@storybook/manager-api';
+import theme from './theme';
+
 
 addons.setConfig({
-  docs: {
-    theme: Object.assign(
-      themes.light,
-      {
-        brandTitle: `Stripes-Components v${pkg.version}`,
-        brandUrl: 'https://github.com/folio-org/stripes-components'
-      }
-    )
-  }
+  theme: theme
 });
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 051eee26f..9be610f31 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,8 +1,8 @@
 import React, { Component, Fragment } from 'react';
-import { addReadme } from 'storybook-readme';
-import { initializeRTL } from 'storybook-addon-rtl';
+import { IntlProvider } from 'react-intl';
 import pkg from '../package.json';
 import { themes } from '@storybook/theming';
+import IntlWrap from './IntlWrap';
 import '../lib/global.css';
 
 /**
@@ -10,7 +10,7 @@ import '../lib/global.css';
  */
 
 // Load the locale data for all your defined locales
-import { setIntlConfig, withIntl } from 'storybook-addon-intl';
+// import { setIntlConfig, withIntl } from 'storybook-addon-intl';
 
 import arTranslations from '../translations/stripes-components/ar.json';
 import caTranslations from '../translations/stripes-components/ca.json';
@@ -51,18 +51,6 @@ const messages = {
   sv: prefixKeys(svTranslations),
 };
 
-// Set intl configuration
-setIntlConfig({
-    locales: ['ar', 'ca', 'da', 'de', 'en', 'es', 'fr', 'hu', 'it', 'pt', 'ru', 'sv'],
-    defaultLocale: 'en',
-    getMessages: (locale) => messages[locale]
-});
-
-/**
- * RTL
- */
-initializeRTL();
-
 /**
  * Add OverlayContainer to all stories
  * Popovers, Modals etc. mount to this element in the real system
@@ -88,16 +76,26 @@ initializeRTL();
   }
  }
 
-const storyFnDecorator = storyFn => <AddOverlayContainer>{storyFn()}</AddOverlayContainer>
+const storyFnDecorator = storyFn => (
+  <IntlWrap messages={messages}>
+    <AddOverlayContainer>
+      {storyFn()}
+    </AddOverlayContainer>
+  </IntlWrap>
+);
 
- export const decorators = [withIntl, storyFnDecorator, addReadme]
- export const parameters = {
-   docs: {
-     theme: Object.assign({}, themes.light, {
-      brandTitle: `FOLIO Stripes-components v${pkg.version}`,
-     })
-   },
-   readme: {
-     codeTheme: 'a11y-dark',
-   }
- }
+const preview = {
+  decorators: [storyFnDecorator],
+  parameters: {
+    docs: {
+      theme: Object.assign({}, themes.light, {
+       brandTitle: `FOLIO Stripes-components v${pkg.version}`,
+      })
+    },
+    readme: {
+      codeTheme: 'a11y-dark',
+    }
+  }
+}
+
+export default preview;
diff --git a/.storybook/stcom-webpack.config.js b/.storybook/stcom-webpack.config.js
index f4a9a4298..58894b1be 100644
--- a/.storybook/stcom-webpack.config.js
+++ b/.storybook/stcom-webpack.config.js
@@ -38,8 +38,7 @@ module.exports = async (config) => {
             plugins: [
               require('postcss-import'),
               require('autoprefixer'),
-              require('postcss-custom-properties')({ preserve: false, importFrom: './lib/variables.css' }),
-              require('postcss-calc'),
+              require('postcss-custom-properties')({ preserve: false, importFrom: './lib/variables.css', disableDeprecationNotice: true }),
               require('postcss-nesting'),
               require('postcss-custom-media'),
               require('postcss-media-minmax'),
@@ -104,6 +103,6 @@ module.exports = async (config) => {
     },
   ];
 
-  config.module.rules.splice(svgRuleIndex,1, ...svgrRules);
+  config.module.rules.splice(svgRuleIndex,2, ...svgrRules);
   return config;
 }
diff --git a/.storybook/theme.js b/.storybook/theme.js
new file mode 100644
index 000000000..651cab8ae
--- /dev/null
+++ b/.storybook/theme.js
@@ -0,0 +1,10 @@
+import { create } from '@storybook/theming/create';
+import pkg from '../package.json';
+
+// Setting up this 'theme' renders the library version in the storybook UI.
+
+export default create({
+  base: 'light',
+  brandTitle: `Stripes-Components v${pkg.version}`,
+  brandUrl: 'https://github.com/folio-org/stripes-components',
+});
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ce1243d93..e063b18fd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@
 * Show action buttons in correct color. Refs STCOM-1256.
 * Accessibility | Repeatable Field Component. Refs STCOM-766.
 * Apply highest z-index to focused `<Accordion>` within `AccordionSet`. Refs STCOM-1257.
+* Upgrade storybook to v7. Refs STCOM-1176.
 
 ## [12.0.0](https://github.com/folio-org/stripes-components/tree/v12.0.0) (2023-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v11.0.0...v12.0.0)
diff --git a/guides/accessibility/AccessibilityDevPrimer.stories.mdx b/guides/accessibility/AccessibilityDevPrimer.stories.mdx
index 19fee10f0..e0778631f 100644
--- a/guides/accessibility/AccessibilityDevPrimer.stories.mdx
+++ b/guides/accessibility/AccessibilityDevPrimer.stories.mdx
@@ -86,11 +86,11 @@ Form controls require associated labels so that AT can convey the purpose of a t
 
 Typical labeling of form elements is as follows (explicit labeling) our form controls set these up under the hood:
 ```
-<!-- general html controls -->
+{/* general html controls */}
 <label for="inputid">username</label>
 <input type="text" id="inputid" />
 
-<!-- stripes-components controls -->
+{/* stripes-components controls */}
 <TextField label="username" />
 ```
 
@@ -98,20 +98,20 @@ Given this, a screen reader will announce 'username edit blank' when the user ta
 
 If visible labels are inadequate, `aria-label` can be used:
 ```
-<!-- general html controls -->
+{/* general html controls */}
 <input type="text" aria-label="username" id="inputid" />
 
-<!-- stripes-components controls -->
+{/* stripes-components controls */}
 <TextField aria-label="username" />
 ```
 If the label is visible elsewhere in the page, its element can be associated with the input via `aria-labelledby`:
 ```
-<!-- general html controls -->
+{/* general html controls */}
 <div id="columnlabel">starting date</div>
 ...
 <input type="text" aria-labelledby="columnlabel" />
 
-<!-- stripes-components controls -->
+{/* stripes-components controls */}
 <TextField aria-labelledby="columnlabel" />
 ```
 
diff --git a/lib/Accordion/stories/Accordion.stories.js b/lib/Accordion/stories/Accordion.stories.js
index d0dc20151..6ddb9f3a3 100644
--- a/lib/Accordion/stories/Accordion.stories.js
+++ b/lib/Accordion/stories/Accordion.stories.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
 import Readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 import Accordion from '../Accordion';
@@ -17,14 +16,11 @@ const as = {
 
 export default {
   title: 'Accordion',
-  decorators: [withReadme(Readme)],
 };
 
 export const WithDefaults = () => <BasicUsage />;
 
-WithDefaults.story = {
-  name: 'With defaults',
-};
+WithDefaults.storyName = 'With defaults';
 
 export const AccordionStatus = () => <Status />;
 
@@ -58,15 +54,11 @@ export const DisplayWhenProps = () => (
   </>
 );
 
-DisplayWhenProps.story = {
-  name: 'DisplayWhen',
-};
+DisplayWhenProps.storyName = 'DisplayWhen';
 
 export const Separator = () => <Accordion separator={false}>Separator set to false.</Accordion>;
 
-Separator.story = {
-  name: 'Separator',
-};
+Separator.storyName = 'Separator';
 
 export const Header = () => {
   const header = ({
@@ -94,12 +86,8 @@ export const Header = () => {
   );
 };
 
-Header.story = {
-  name: 'Header',
-};
+Header.storyName = 'Header';
 
 export const ExpandAllWithinSet = () => <ExpandAllWithin />;
 
-ExpandAllWithinSet.story = {
-  name: 'ExpandAll within set',
-};
+ExpandAllWithinSet.storyName = 'ExpandAll within set';
diff --git a/lib/AdvancedSearch/stories/AdvancedSearch.stories.js b/lib/AdvancedSearch/stories/AdvancedSearch.stories.js
index 64767c96f..caa49eac2 100644
--- a/lib/AdvancedSearch/stories/AdvancedSearch.stories.js
+++ b/lib/AdvancedSearch/stories/AdvancedSearch.stories.js
@@ -1,22 +1,15 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import Readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 import WithQueryBuilder from './WithQueryBuilder';
 
 export default {
   title: 'AdvancedSearch',
-  decorators: [withReadme(Readme)],
 };
 
 export const WithDefaults = () => <BasicUsage />;
 
-WithDefaults.story = {
-  name: 'with defaults',
-};
+WithDefaults.storyName = 'with defaults';
 
 export const WithCustomQueryBuilder = () => <WithQueryBuilder />;
 
-WithCustomQueryBuilder.story = {
-  name: 'with custom queryBuilder',
-};
+WithCustomQueryBuilder.storyName = 'with custom queryBuilder';
diff --git a/lib/AutoSuggest/stories/AutoSuggest.stories.js b/lib/AutoSuggest/stories/AutoSuggest.stories.js
index 577655ddc..dfb14982d 100644
--- a/lib/AutoSuggest/stories/AutoSuggest.stories.js
+++ b/lib/AutoSuggest/stories/AutoSuggest.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'AutoSuggest',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Avatar/stories/Avatar.stories.js b/lib/Avatar/stories/Avatar.stories.js
index 7b655a5e3..bb2d6eaf0 100644
--- a/lib/Avatar/stories/Avatar.stories.js
+++ b/lib/Avatar/stories/Avatar.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'Avatar',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Badge/stories/Badge.stories.js b/lib/Badge/stories/Badge.stories.js
index 2c3f7d244..c8ccd1056 100644
--- a/lib/Badge/stories/Badge.stories.js
+++ b/lib/Badge/stories/Badge.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'Badge',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/ButtonGroup/stories/ButtonGroup.stories.js b/lib/ButtonGroup/stories/ButtonGroup.stories.js
index b607da83e..34830b1aa 100644
--- a/lib/ButtonGroup/stories/ButtonGroup.stories.js
+++ b/lib/ButtonGroup/stories/ButtonGroup.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import Readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'ButtonGroup',
-  decorators: [withReadme(Readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Callout/stories/BasicUsage.js b/lib/Callout/stories/BasicUsage.js
index 9710c3152..b96e1348a 100644
--- a/lib/Callout/stories/BasicUsage.js
+++ b/lib/Callout/stories/BasicUsage.js
@@ -8,7 +8,7 @@ import Button from '../../Button';
 import TextField from '../../TextField';
 import Select from '../../Select';
 
-export default class extends Component {
+class BasicUsage extends Component {
   constructor(props) {
     super(props);
     this.callout = createRef();
@@ -31,7 +31,7 @@ export default class extends Component {
     });
   }
 
-  onChange = name => e => {
+  onChange = (name, e) => {
     this.setState({
       [name]: e.target.value,
     });
@@ -45,7 +45,7 @@ export default class extends Component {
         <Select
           label="Type"
           value={type}
-          onChange={this.onChange('type')}
+          onChange={(e)=>this.onChange('type', e)}
         >
           <option value="success">Success</option>
           <option value="error">Error</option>
@@ -54,12 +54,12 @@ export default class extends Component {
         </Select>
         <TextField
           label="Message"
-          onChange={this.onChange('message')}
+          onChange={(e)=>this.onChange('message', e)}
           value={message}
         />
         <TextField
           label="Timeout"
-          onChange={this.onChange('timeout')}
+          onChange={(e)=>this.onChange('timeout', e)}
           value={timeout}
           type="number"
         />
@@ -70,3 +70,4 @@ export default class extends Component {
     );
   }
 }
+export default BasicUsage;
diff --git a/lib/Callout/stories/Callout.stories.js b/lib/Callout/stories/Callout.stories.js
index b9375a6b4..7b5650398 100644
--- a/lib/Callout/stories/Callout.stories.js
+++ b/lib/Callout/stories/Callout.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'Callout',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Card/stories/Card.stories.js b/lib/Card/stories/Card.stories.js
index 9b2bf359d..8120fd222 100644
--- a/lib/Card/stories/Card.stories.js
+++ b/lib/Card/stories/Card.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import { withReadme } from 'storybook-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'Card',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Checkbox/stories/Checkbox.stories.js b/lib/Checkbox/stories/Checkbox.stories.js
index c69dd72f0..d82603ec8 100644
--- a/lib/Checkbox/stories/Checkbox.stories.js
+++ b/lib/Checkbox/stories/Checkbox.stories.js
@@ -1,12 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'Checkbox',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Datepicker/stories/Calendar.stories.js b/lib/Datepicker/stories/Calendar.stories.js
index 7e9cb98ba..d2d56bb4e 100644
--- a/lib/Datepicker/stories/Calendar.stories.js
+++ b/lib/Datepicker/stories/Calendar.stories.js
@@ -1,12 +1,9 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
 
 import BasicUsage from './CalendarBasicUsage';
-import readme from '../calendar-readme.md';
 
 export default {
   title: 'Calendar',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Datepicker/stories/Datepicker.stories.js b/lib/Datepicker/stories/Datepicker.stories.js
index a328089cf..2af3b11e2 100644
--- a/lib/Datepicker/stories/Datepicker.stories.js
+++ b/lib/Datepicker/stories/Datepicker.stories.js
@@ -1,12 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-
 import BasicUsage from './BasicUsage';
-import readme from '../readme.md';
 
 export default {
   title: 'Datepicker',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Dropdown/Dropdown.stories.js b/lib/Dropdown/Dropdown.stories.js
index 18a1d6031..2a2e0248e 100644
--- a/lib/Dropdown/Dropdown.stories.js
+++ b/lib/Dropdown/Dropdown.stories.js
@@ -1,7 +1,5 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import withReadme from 'storybook-readme/with-readme';
-import readme from './readme.md';
 import stories from './stories';
 import Dropdown from './Dropdown';
 import Button from '../Button/Button';
@@ -9,10 +7,9 @@ import DropdownMenu from '../DropdownMenu/DropdownMenu';
 
 export default {
   title: 'Dropdown',
-  decorators: [withReadme(readme)],
 };
 
-export const Default = withReadme(readme, () => <stories.defaultButton />);
+export const Default = () => <stories.defaultButton />;
 
 export const Open = () => (
   <Dropdown
@@ -54,13 +51,11 @@ export const Closed = () => (
   />
 );
 
-export const Controlled = withReadme(readme, () => <stories.controlled />);
-export const Toggleable = withReadme(readme, () => <stories.toggleable />);
-export const ObjectRenderFncSyntax = withReadme(readme, () => <stories.objectSyntax />);
+export const Controlled = () => <stories.controlled />;
+export const Toggleable = () => <stories.toggleable />;
+export const ObjectRenderFncSyntax = () => <stories.objectSyntax />;
 
-ObjectRenderFncSyntax.story = {
-  name: 'Object/render fnc syntax',
-};
+ObjectRenderFncSyntax.storyName = 'Object/render fnc syntax';
 
-export const Controls = withReadme(readme, () => <stories.layout />);
-export const UsePortal = withReadme(readme, () => <stories.usePortal />);
+export const Controls = () => <stories.layout />;
+export const UsePortal = () => <stories.usePortal />;
diff --git a/lib/DropdownButton/DropdownButton.stories.js b/lib/DropdownButton/DropdownButton.stories.js
index 73884a3e0..7aefa1b2d 100644
--- a/lib/DropdownButton/DropdownButton.stories.js
+++ b/lib/DropdownButton/DropdownButton.stories.js
@@ -1,15 +1,10 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
 import stories from './stories';
-import readme from './readme.md';
 
 export default {
   title: 'DropdownButton',
-  decorators: [withReadme(readme)],
 };
 
 export const BasicUsage = () => <stories.basicUsage />;
 
-BasicUsage.story = {
-  name: 'Basic usage',
-};
+BasicUsage.storyName = 'Basic usage';
diff --git a/lib/Editor/stories/Editor.stories.js b/lib/Editor/stories/Editor.stories.js
index a80807b1a..5ba59ca0b 100644
--- a/lib/Editor/stories/Editor.stories.js
+++ b/lib/Editor/stories/Editor.stories.js
@@ -1,10 +1,7 @@
-import withReadme from 'storybook-readme/with-readme';
 import BasicUsage from './BasicUsage';
-import Readme from '../readme.md';
 
 export default {
   title: 'Editor',
-  decorators: [withReadme(Readme)],
 };
 
 export const _BasicUsage = BasicUsage;
diff --git a/lib/EmptyMessage/stories/EmptyMessage.stories.js b/lib/EmptyMessage/stories/EmptyMessage.stories.js
index 04f092c02..33bcb23b3 100644
--- a/lib/EmptyMessage/stories/EmptyMessage.stories.js
+++ b/lib/EmptyMessage/stories/EmptyMessage.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'EmptyMessage',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/ErrorBoundary/stories/ErrorBoundary.stories.js b/lib/ErrorBoundary/stories/ErrorBoundary.stories.js
index 780de4469..b0a9715ac 100644
--- a/lib/ErrorBoundary/stories/ErrorBoundary.stories.js
+++ b/lib/ErrorBoundary/stories/ErrorBoundary.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'ErrorBoundary',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/FilterGroups/FilterGroups.stories.js b/lib/FilterGroups/FilterGroups.stories.js
index 2f428b3de..a69eb46c0 100644
--- a/lib/FilterGroups/FilterGroups.stories.js
+++ b/lib/FilterGroups/FilterGroups.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from './readme.md';
 import stories from './stories';
 
 export default {
   title: 'FilterGroups',
-  decorators: [withReadme(readme)],
 };
 
 export const Basic = () => <stories.basic />;
diff --git a/lib/FocusLink/stories/FocusLink.stories.js b/lib/FocusLink/stories/FocusLink.stories.js
index 516977f94..bf81b1816 100644
--- a/lib/FocusLink/stories/FocusLink.stories.js
+++ b/lib/FocusLink/stories/FocusLink.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'FocusLink',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Headline/stories/Headline.stories.js b/lib/Headline/stories/Headline.stories.js
index 7edf583e6..173b7cc80 100644
--- a/lib/Headline/stories/Headline.stories.js
+++ b/lib/Headline/stories/Headline.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'Headline',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Highlighter/stories/Highlighter.stories.js b/lib/Highlighter/stories/Highlighter.stories.js
index e09dfdd2b..9984d73ac 100644
--- a/lib/Highlighter/stories/Highlighter.stories.js
+++ b/lib/Highlighter/stories/Highlighter.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'Highlighter',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/HotKeys/stories/HotKeys.stories.js b/lib/HotKeys/stories/HotKeys.stories.js
index fdf93a4b6..0a81f73d8 100644
--- a/lib/HotKeys/stories/HotKeys.stories.js
+++ b/lib/HotKeys/stories/HotKeys.stories.js
@@ -1,17 +1,12 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 import CommandListUsage from './CommandList';
 
 export default {
   title: 'HotKeys',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
 export const CommandList = () => <CommandListUsage />;
 
-CommandList.story = {
-  name: 'CommandList',
-};
+CommandList.storyName = 'CommandList';
diff --git a/lib/Icon/stories/Icon.stories.js b/lib/Icon/stories/Icon.stories.js
index 1acbc1e8e..1a05772db 100644
--- a/lib/Icon/stories/Icon.stories.js
+++ b/lib/Icon/stories/Icon.stories.js
@@ -1,6 +1,4 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import AvailableIcons from './AvailableIcons';
 import Contexts from './Contexts';
 import CustomIcon from './CustomIcon';
@@ -10,15 +8,12 @@ import Icon from '../Icon';
 
 export default {
   title: 'Icon',
-  decorators: [withReadme(readme)],
 };
 
 export const _AvailableIcons = () => <AvailableIcons />;
 export const _CustomIcon = () => <CustomIcon />;
 
-_CustomIcon.story = {
-  name: 'Custom icon',
-};
+_CustomIcon.storyName = 'Custom icon';
 
 export const _Contexts = () => <Contexts />;
 export const Label = () => <IconWithLabel />;
diff --git a/lib/IconButton/stories/IconButton.stories.js b/lib/IconButton/stories/IconButton.stories.js
index eae78115a..5b99bb15c 100644
--- a/lib/IconButton/stories/IconButton.stories.js
+++ b/lib/IconButton/stories/IconButton.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'IconButton',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/InfoPopover/stories/InfoPopover.stories.js b/lib/InfoPopover/stories/InfoPopover.stories.js
index ed0fc239b..fc58492b4 100644
--- a/lib/InfoPopover/stories/InfoPopover.stories.js
+++ b/lib/InfoPopover/stories/InfoPopover.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'InfoPopover',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/KeyValue/stories/KeyValue.stories.js b/lib/KeyValue/stories/KeyValue.stories.js
index c9a7ae0d4..049d18c90 100644
--- a/lib/KeyValue/stories/KeyValue.stories.js
+++ b/lib/KeyValue/stories/KeyValue.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'KeyValue',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Label/stories/Label.stories.js b/lib/Label/stories/Label.stories.js
index d207118ce..7906c1fc9 100644
--- a/lib/Label/stories/Label.stories.js
+++ b/lib/Label/stories/Label.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'Label',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Layer/stories/Layer.stories.js b/lib/Layer/stories/Layer.stories.js
index d2a186149..80173b254 100644
--- a/lib/Layer/stories/Layer.stories.js
+++ b/lib/Layer/stories/Layer.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'Layer',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Layout/stories/Layout.stories.js b/lib/Layout/stories/Layout.stories.js
index e863d0b22..4c7beada1 100644
--- a/lib/Layout/stories/Layout.stories.js
+++ b/lib/Layout/stories/Layout.stories.js
@@ -1,15 +1,10 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'Layout',
-  decorators: [withReadme(readme)],
 };
 
 export const AvailableClasses = () => <BasicUsage />;
 
-AvailableClasses.story = {
-  name: 'Available classes',
-};
+AvailableClasses.storyName = 'Available classes';
diff --git a/lib/LayoutGrid/stories/LayoutGrid.stories.js b/lib/LayoutGrid/stories/LayoutGrid.stories.js
index d1e5ed5f9..7c6ab3a3f 100644
--- a/lib/LayoutGrid/stories/LayoutGrid.stories.js
+++ b/lib/LayoutGrid/stories/LayoutGrid.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'LayoutGrid',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/List/stories/List.stories.js b/lib/List/stories/List.stories.js
index 510b681fb..7b8583676 100644
--- a/lib/List/stories/List.stories.js
+++ b/lib/List/stories/List.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'List',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Loading/stories/Loading.stories.js b/lib/Loading/stories/Loading.stories.js
index 0b39540db..518c3d9ca 100644
--- a/lib/Loading/stories/Loading.stories.js
+++ b/lib/Loading/stories/Loading.stories.js
@@ -1,13 +1,10 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import Readme from '../readme.md';
 import Loading from '../Loading';
 import LoadingView from '../LoadingView';
 import LoadingPane from './LoadingPane.story';
 
 export default {
   title: 'Loading',
-  decorators: [withReadme(Readme)],
 };
 
 export const LoadingSpinner = () => <Loading />;
diff --git a/lib/MenuSection/stories/MenuSection.stories.js b/lib/MenuSection/stories/MenuSection.stories.js
index 60b6e5ce2..c49539199 100644
--- a/lib/MenuSection/stories/MenuSection.stories.js
+++ b/lib/MenuSection/stories/MenuSection.stories.js
@@ -1,12 +1,9 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 import DropdownExample from './DropdownExample';
 
 export default {
   title: 'MenuSection',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = BasicUsage;
diff --git a/lib/MessageBanner/stories/MessageBanner.stories.js b/lib/MessageBanner/stories/MessageBanner.stories.js
index 3f423ee27..313cf846f 100644
--- a/lib/MessageBanner/stories/MessageBanner.stories.js
+++ b/lib/MessageBanner/stories/MessageBanner.stories.js
@@ -1,20 +1,15 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
 import BasicUsage from './BasicUsage';
 import Dismissible from './Dismissible';
 import ShowHide from './ShowHide';
-import readme from '../readme.md';
 
 export default {
   title: 'MessageBanner',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = BasicUsage;
 export const _ShowHide = () => <ShowHide />;
 
-_ShowHide.story = {
-  name: 'Show/hide',
-};
+_ShowHide.storyName = 'Show/hide';
 
 export const _Dismissible = Dismissible;
diff --git a/lib/MetaSection/stories/MetaSection.stories.js b/lib/MetaSection/stories/MetaSection.stories.js
index 82d7bc3f7..5a25034fb 100644
--- a/lib/MetaSection/stories/MetaSection.stories.js
+++ b/lib/MetaSection/stories/MetaSection.stories.js
@@ -1,10 +1,7 @@
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'MetaSection',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = BasicUsage;
diff --git a/lib/Modal/stories/Modal.stories.js b/lib/Modal/stories/Modal.stories.js
index ecf152ba2..fe0431923 100644
--- a/lib/Modal/stories/Modal.stories.js
+++ b/lib/Modal/stories/Modal.stories.js
@@ -1,36 +1,24 @@
-import withReadme from 'storybook-readme/with-readme';
-
-import Readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 import WithModalFooter from '../../ModalFooter/stories/ModalFooterExample';
-import WithModalFooterReadme from '../../ModalFooter/readme.md';
 
 import ConfirmationModalExample from '../../ConfirmationModal/stories/ConfirmationModalExample';
-import ConfirmationModalReadme from '../../ConfirmationModal/readme.md';
 
 import ErrorModalExample from '../../ErrorModal/stories/ErrorModalExample';
-import ErrorModalReadme from '../../ErrorModal/readme.md';
 
 export default {
   title: 'Modal',
 };
 
-export const _BasicUsage = withReadme(Readme, BasicUsage);
-export const ConfirmationModal = withReadme(ConfirmationModalReadme, ConfirmationModalExample);
+export const _BasicUsage = BasicUsage;
+export const ConfirmationModal = ConfirmationModalExample;
 
-ConfirmationModal.story = {
-  name: 'ConfirmationModal',
-};
+ConfirmationModal.storyName = 'ConfirmationModal';
 
-export const ErrorModal = withReadme(ErrorModalReadme, ErrorModalExample);
+export const ErrorModal = ErrorModalExample;
 
-ErrorModal.story = {
-  name: 'ErrorModal',
-};
+ErrorModal.storyName = 'ErrorModal';
 
-export const ModalFooter = withReadme(WithModalFooterReadme, WithModalFooter);
+export const ModalFooter = WithModalFooter;
 
-ModalFooter.story = {
-  name: 'ModalFooter',
-};
+ModalFooter.storyName = 'ModalFooter';
diff --git a/lib/MultiColumnList/MCLRenderer.js b/lib/MultiColumnList/MCLRenderer.js
index 55d3224a5..7f0424a30 100644
--- a/lib/MultiColumnList/MCLRenderer.js
+++ b/lib/MultiColumnList/MCLRenderer.js
@@ -1,15 +1,3 @@
-/*
-
-** MultiColumnList
-  - For displaying tabular data.
-
-  How DOM measuring works within the list:
-      Cell-widths are measured first via a CellMeasurer component. These are calculated and compared with
-      the width of the headers, greatest one prevailing.
-      Next, row heights are measured, and stored in the height cache using the RowMeasurer component.
-      Last, rows are positioned absolutely, positions also cached using the RowPositioner component.
-*/
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, injectIntl } from 'react-intl';
@@ -49,6 +37,16 @@ import CenteredContainer from './CenteredContainer';
 import LoadMorePaginationRow from './LoadMorePaginationRow';
 import PrevNextPaginationRow from './PrevNextPaginationRow';
 
+/* MultiColumnList
+  - For displaying tabular data.
+
+  How DOM measuring works within the list:
+      Cell-widths are measured first via a CellMeasurer component. These are calculated and compared with
+      the width of the headers, greatest one prevailing.
+      Next, row heights are measured, and stored in the height cache using the RowMeasurer component.
+      Last, rows are positioned absolutely, positions also cached using the RowPositioner component.
+*/
+
 // used in all margin calculations... static based on CSS value of 15px (gutter-static). (15px * 2 = 30px)
 const ROWMARGIN = 30;
 const CHANGE_NEWDATA = 'new data';
diff --git a/lib/MultiColumnList/stories/MultiColumnList.stories.js b/lib/MultiColumnList/stories/MultiColumnList.stories.js
index d18ac145a..b8c754428 100644
--- a/lib/MultiColumnList/stories/MultiColumnList.stories.js
+++ b/lib/MultiColumnList/stories/MultiColumnList.stories.js
@@ -1,6 +1,4 @@
 import React from 'react';
-import { withReadme } from 'storybook-readme';
-import readme from '../readme.md';
 import BasicMCL from './BasicMCL';
 import Autosize from './Autosize';
 import MaxHeightVirtualized from './MaxHeightVirtualized';
@@ -24,7 +22,6 @@ import WithInputs from './WithInputs';
 
 export default {
   title: 'MultiColumnList',
-  decorators: [withReadme(readme)],
 };
 
 export const BasicUsage = () => <BasicMCL />;
@@ -32,81 +29,55 @@ export const _Autosize = () => <Autosize />;
 export const _Formatter = () => <Formatter />;
 export const _ItemToView = () => <ItemToView />;
 
-_ItemToView.story = {
-  name: 'Item-To-View',
-};
+_ItemToView.storyName = 'Item-To-View';
 
 export const _MaxHeightVirtualized = () => <MaxHeightVirtualized />;
 
-_MaxHeightVirtualized.story = {
-  name: 'Max height, virtualized',
-};
+_MaxHeightVirtualized.storyName = 'Max height, virtualized';
 
 export const _EndOfListMarker = () => <EndOfListMarker />;
 
-_EndOfListMarker.story = {
-  name: 'End of list marker',
-};
+_EndOfListMarker.storyName = 'End of list marker';
 
 export const _ColumnWidths = () => <ColumnWidths />;
 
-_ColumnWidths.story = {
-  name: 'Column widths',
-};
+_ColumnWidths.storyName = 'Column widths';
 
 export const _VariableWidthHints = () => <VariableWidthHints />;
 
-_VariableWidthHints.story = {
-  name: 'Variable Column Hints',
-};
+_VariableWidthHints.storyName = 'Variable Column Hints';
 
 export const _ColumnWidthHints = () => <ColumnWidthHints />;
 
-_ColumnWidthHints.story = {
-  name: 'Column width hints',
-};
+_ColumnWidthHints.storyName = 'Column width hints';
 
 export const StaticHeight = () => <Static />;
 
-StaticHeight.story = {
-  name: 'Static height',
-};
+StaticHeight.storyName = 'Static height';
 
 export const AddItems = () => <AddItem />;
 export const _CheckboxSelect = () => <CheckboxSelect />;
 
-_CheckboxSelect.story = {
-  name: 'CheckboxSelect',
-};
+_CheckboxSelect.storyName = 'CheckboxSelect';
 
 export const _ColumnChooser = () => <ColumnChooser />;
 
-_ColumnChooser.story = {
-  name: 'Column chooser',
-};
+_ColumnChooser.storyName = 'Column chooser';
 
 export const LoadMorePaging = () => <PagingType />;
 export const _PrevNextPaging = () => <PrevNextPaging />;
 
-_PrevNextPaging.story = {
-  name: 'Prev/Next Paging',
-};
+_PrevNextPaging.storyName = 'Prev/Next Paging';
 
 export const _Resizing = () => <Resizing />;
 export const _ClickableRows = () => <ClickableRows />;
 
-_ClickableRows.story = {
-  name: 'Clickable rows',
-};
+_ClickableRows.storyName = 'Clickable rows';
 
 export const _StickyColumns = () => <StickyColumns />;
 export const _WithInputs = () => <WithInputs />;
 
-_WithInputs.story = {
-  name: 'With Inputs'
-};
+_WithInputs.storyName = 'With Inputs';
 
 export const _PrevNextOffsetPaging = () => <PrevNextOffsetPaging />;
-_PrevNextOffsetPaging.story = {
-  name: 'Prev/Next Offset'
-}
+_PrevNextOffsetPaging.storyName = 'Prev/Next Offset';
diff --git a/lib/MultiSelection/stories/MultiSelection.stories.js b/lib/MultiSelection/stories/MultiSelection.stories.js
index 245221046..944904cb6 100644
--- a/lib/MultiSelection/stories/MultiSelection.stories.js
+++ b/lib/MultiSelection/stories/MultiSelection.stories.js
@@ -1,7 +1,5 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import MultiSelection from '../MultiSelection';
 import { OptionSegment } from '../../Selection';
 import BasicUsage from './BasicUsage';
@@ -44,7 +42,6 @@ const actionsList = [
 
 export default {
   title: 'MultiSelect',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
@@ -149,9 +146,7 @@ export const DisabledState = () => (
   </div>
 );
 
-DisabledState.story = {
-  name: 'Disabled state',
-};
+DisabledState.storyName = 'Disabled state';
 
 export const _Required = () => <Required />;
 export const CustomAriaLabel = () => <CustomAriaLabelledBy />;
diff --git a/lib/NavList/stories/NavList.stories.js b/lib/NavList/stories/NavList.stories.js
index 71e406f50..724ee20c8 100644
--- a/lib/NavList/stories/NavList.stories.js
+++ b/lib/NavList/stories/NavList.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'NavList',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Pane/stories/Pane.stories.js b/lib/Pane/stories/Pane.stories.js
index 4e3dd1f27..5c12177d7 100644
--- a/lib/Pane/stories/Pane.stories.js
+++ b/lib/Pane/stories/Pane.stories.js
@@ -1,7 +1,5 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
 
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 import UsingCenterContent from './UsingCenterContent';
 
@@ -34,69 +32,47 @@ export default {
 
 export const _3PanesLayer = () => <AddRemovePane />;
 
-_3PanesLayer.story = {
-  name: '3 Panes + Layer',
-};
+_3PanesLayer.storyName = '3 Panes + Layer';
 
 export const _InitialLayouts = () => <InitialLayouts />;
 
-_InitialLayouts.story = {
-  name: 'Initial layouts',
-};
+_InitialLayouts.storyName = 'Initial layouts';
 
 export const _OnLayout = () => <OnLayout />;
 
-_OnLayout.story = {
-  name: 'OnLayout',
-};
+_OnLayout.storyName = 'OnLayout';
 
-export const _BasicUsage = withReadme(readme, () => <BasicUsage />);
-export const _UsingCenterContent = withReadme(readme, () => <UsingCenterContent />);
+export const _BasicUsage = () => <BasicUsage />;
+export const _UsingCenterContent = () => <UsingCenterContent />;
 
-_UsingCenterContent.story = {
-  name: 'Using centerContent',
-};
+_UsingCenterContent.storyName = 'Using centerContent';
 
-export const PaneHeader = withReadme(PaneHeaderReadme, () => <PaneHeaderBasicUsage />);
+export const PaneHeader = () => <PaneHeaderBasicUsage />;
 
-PaneHeader.story = {
-  name: 'PaneHeader',
-};
+PaneHeader.storyName = 'PaneHeader';
 
-export const PaneMenu = withReadme(PaneMenuReadme, () => <PaneHeaderBasicUsage />);
+export const PaneMenu = () => <PaneHeaderBasicUsage />;
 
-PaneMenu.story = {
-  name: 'PaneMenu',
-};
+PaneMenu.storyName = 'PaneMenu';
 
-export const PaneHeaderIconButton = withReadme(PaneHeaderIconButtonReadme, () => (
+export const PaneHeaderIconButton = () => (
   <PaneHeaderIconButtonBasicUsage />
-));
+);
 
-PaneHeaderIconButton.story = {
-  name: 'PaneHeaderIconButton',
-};
+PaneHeaderIconButton.storyName = 'PaneHeaderIconButton';
 
-export const PaneBackLink = withReadme(PaneBackLinkReadme, () => <PaneBackLinkBasicUsage />);
+export const PaneBackLink = () => <PaneBackLinkBasicUsage />;
 
-PaneBackLink.story = {
-  name: 'PaneBackLink',
-};
+PaneBackLink.storyName = 'PaneBackLink';
 
-export const PaneCloseLink = withReadme(PaneCloseLinkReadme, () => <PaneCloseLinkBasicUsage />);
+export const PaneCloseLink = () => <PaneCloseLinkBasicUsage />;
 
-PaneCloseLink.story = {
-  name: 'PaneCloseLink',
-};
+PaneCloseLink.storyName = 'PaneCloseLink';
 
-export const PaneFooter = withReadme(WithPaneFooterReadme, () => <WithPaneFooter />);
+export const PaneFooter = () => <WithPaneFooter />;
 
-PaneFooter.story = {
-  name: 'PaneFooter',
-};
+PaneFooter.storyName = 'PaneFooter';
 
 export const PaneSubHeader = () => <PaneSubheaderExample />;
 
-PaneSubHeader.story = {
-  name: 'PaneSubHeader',
-};
+PaneSubHeader.storyName = 'PaneSubHeader';
diff --git a/lib/Popover/stories/Popover.stories.js b/lib/Popover/stories/Popover.stories.js
index c0781bdcd..e0525b93f 100644
--- a/lib/Popover/stories/Popover.stories.js
+++ b/lib/Popover/stories/Popover.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'Popover',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Popper/stories/Popper.stories.js b/lib/Popper/stories/Popper.stories.js
index 495f0d5ad..03e7f3bab 100644
--- a/lib/Popper/stories/Popper.stories.js
+++ b/lib/Popper/stories/Popper.stories.js
@@ -1,6 +1,4 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import PopperDemo from './PopperDemo';
 
 const withScroll = (component) => {
@@ -34,16 +32,13 @@ const withScroll = (component) => {
 
 export default {
   title: 'Popper',
-  decorators: [withReadme(readme)],
 };
 
 export const BasicUsage = () => {
   return <PopperDemo />;
 };
 
-BasicUsage.story = {
-  name: 'Basic usage',
-};
+BasicUsage.storyName = 'Basic usage';
 
 export const ParentWithHiddenOverflow = () => {
   return (
@@ -59,17 +54,13 @@ export const ParentWithHiddenOverflow = () => {
   );
 };
 
-ParentWithHiddenOverflow.story = {
-  name: 'Parent with hidden overflow',
-};
+ParentWithHiddenOverflow.storyName = 'Parent with hidden overflow';
 
 export const ParentWithScrollOverflow = () => {
   return withScroll(<PopperDemo />);
 };
 
-ParentWithScrollOverflow.story = {
-  name: 'Parent with scroll overflow',
-};
+ParentWithScrollOverflow.storyName = 'Parent with scroll overflow';
 
 export const RenderingOverlayInAPortal = () => {
   return (
@@ -79,6 +70,4 @@ export const RenderingOverlayInAPortal = () => {
   );
 };
 
-RenderingOverlayInAPortal.story = {
-  name: 'Rendering overlay in a portal',
-};
+RenderingOverlayInAPortal.storyName = 'Rendering overlay in a portal';
diff --git a/lib/RadioButton/stories/RadioButton.stories.js b/lib/RadioButton/stories/RadioButton.stories.js
index 33bf53120..9277d77bf 100644
--- a/lib/RadioButton/stories/RadioButton.stories.js
+++ b/lib/RadioButton/stories/RadioButton.stories.js
@@ -1,12 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-
 import BasicUsage from './BasicUsage';
-import readme from '../readme.md';
 
 export default {
   title: 'RadioButton',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/RepeatableField/stories/RepeatableField.stories.js b/lib/RepeatableField/stories/RepeatableField.stories.js
index 2fbc28463..ad46066ab 100644
--- a/lib/RepeatableField/stories/RepeatableField.stories.js
+++ b/lib/RepeatableField/stories/RepeatableField.stories.js
@@ -1,24 +1,17 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 import MultipleColumns from './MultipleColumns';
 import CustomRemoveButton from './CustomRemoveButton';
 
 export default {
   title: 'RepeatableField',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
 export const _CustomRemoveButton = () => <CustomRemoveButton />;
 
-_CustomRemoveButton.story = {
-  name: 'Custom remove button',
-};
+_CustomRemoveButton.storyName = 'Custom remove button';
 
 export const _MultipleColumns = () => <MultipleColumns />;
 
-_MultipleColumns.story = {
-  name: 'Multiple columns',
-};
+_MultipleColumns.storyName = 'Multiple columns';
diff --git a/lib/SRStatus/stories/SRStatus.stories.js b/lib/SRStatus/stories/SRStatus.stories.js
index 240349cf8..7d633a0c8 100644
--- a/lib/SRStatus/stories/SRStatus.stories.js
+++ b/lib/SRStatus/stories/SRStatus.stories.js
@@ -1,10 +1,7 @@
-import withReadme from 'storybook-readme/with-readme';
 import BasicUsage from './BasicUsage';
-import readme from '../readme.md';
 
 export default {
   title: 'SRStatus',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = BasicUsage;
diff --git a/lib/SearchField/stories/SearchField.stories.js b/lib/SearchField/stories/SearchField.stories.js
index eeca14865..567a4f730 100644
--- a/lib/SearchField/stories/SearchField.stories.js
+++ b/lib/SearchField/stories/SearchField.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'SearchField',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Select/stories/Select.stories.js b/lib/Select/stories/Select.stories.js
index 1ba3ba454..5a5a6e902 100644
--- a/lib/Select/stories/Select.stories.js
+++ b/lib/Select/stories/Select.stories.js
@@ -1,12 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'Select',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Selection/stories/Selection.stories.js b/lib/Selection/stories/Selection.stories.js
index 2c04ac565..5de507b9d 100644
--- a/lib/Selection/stories/Selection.stories.js
+++ b/lib/Selection/stories/Selection.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'Selection',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/TextArea/stories/TextArea.stories.js b/lib/TextArea/stories/TextArea.stories.js
index 409c6d9e2..53e163930 100644
--- a/lib/TextArea/stories/TextArea.stories.js
+++ b/lib/TextArea/stories/TextArea.stories.js
@@ -1,11 +1,7 @@
-import withReadme from 'storybook-readme/with-readme';
-
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'TextArea',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = BasicUsage;
diff --git a/lib/TextField/stories/TextField.stories.js b/lib/TextField/stories/TextField.stories.js
index d971e65dc..b4d0b3a3c 100644
--- a/lib/TextField/stories/TextField.stories.js
+++ b/lib/TextField/stories/TextField.stories.js
@@ -1,10 +1,7 @@
-import withReadme from 'storybook-readme/with-readme';
 import BasicUsage from './BasicUsage';
-import readme from '../Readme.md';
 
 export default {
   title: 'TextField',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = BasicUsage;
diff --git a/lib/TextLink/stories/TextLink.stories.js b/lib/TextLink/stories/TextLink.stories.js
index c9f056251..b5aaec428 100644
--- a/lib/TextLink/stories/TextLink.stories.js
+++ b/lib/TextLink/stories/TextLink.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'TextLink',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Timepicker/stories/Timepicker.stories.js b/lib/Timepicker/stories/Timepicker.stories.js
index c6d25beb9..c2e056076 100644
--- a/lib/Timepicker/stories/Timepicker.stories.js
+++ b/lib/Timepicker/stories/Timepicker.stories.js
@@ -1,12 +1,8 @@
 import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'Timepicker',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/lib/Tooltip/stories/Tooltip.stories.js b/lib/Tooltip/stories/Tooltip.stories.js
index db470e2da..9c2bab240 100644
--- a/lib/Tooltip/stories/Tooltip.stories.js
+++ b/lib/Tooltip/stories/Tooltip.stories.js
@@ -1,11 +1,7 @@
-import React from 'react';
-import withReadme from 'storybook-readme/with-readme';
-import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'Tooltip',
-  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = () => <BasicUsage />;
diff --git a/package.json b/package.json
index 307b67fc7..a6c136159 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,8 @@
     "eslint": "eslint ./",
     "formatjs-compile": "formatjs compile-folder --ast --format simple ./translations/stripes-components ./translations/stripes-components/compiled",
     "lint": "eslint ./ && stylelint \"lib/**/*.css\"",
-    "storybook": "start-storybook -p 9001 -c .storybook",
-    "storybook-build": "build-storybook -c .storybook -o .out",
+    "storybook": "storybook dev -p 9001 -c .storybook",
+    "storybook-build": "storybook build -c .storybook -o .out",
     "stylelint": "stylelint \"lib/**/*.css\"",
     "test": "stripes test karma",
     "test-dev": "stripes test karma --watch"
@@ -57,12 +57,13 @@
     "@folio/stripes-testing": "^4.7.0",
     "@formatjs/cli": "^6.1.3",
     "@mdx-js/loader": "^1.6.22",
-    "@storybook/addon-actions": "^6.3.6",
-    "@storybook/addon-essentials": "^6.3.6",
-    "@storybook/addons": "^6.3.6",
-    "@storybook/builder-webpack5": "^6.3.12",
-    "@storybook/manager-webpack5": "^6.3.12",
-    "@storybook/react": "^6.3.6",
+    "@storybook/addon-actions": "^7.6.12",
+    "@storybook/addon-essentials": "^7.6.12",
+    "@storybook/addon-mdx-gfm": "7.6.12",
+    "@storybook/addons": "^7.6.12",
+    "@storybook/manager-api": "^7.6.12",
+    "@storybook/react": "^7.6.12",
+    "@storybook/react-webpack5": "7.6.12",
     "@svgr/webpack": "^8.1.0",
     "autoprefixer": "^10.4.13",
     "babel-loader": "^9.1.3",
@@ -95,10 +96,7 @@
     "redux-form": "^8.3.0",
     "regenerator-runtime": "^0.14.0",
     "sinon": "^17.0.0",
-    "storybook-addon-designs": "^6.0.1",
-    "storybook-addon-intl": "^2.4.1",
-    "storybook-addon-rtl": "^0.3.0",
-    "storybook-readme": "^5.0.9",
+    "storybook": "7.6.12",
     "stylelint": "^16.2.0",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-junit-formatter": "^0.2.2"