Upgrade to Storybook v9

.storybook/main.ts

@@ -4,21 +4,29 @@ import tsConfigPaths from 'vite-tsconfig-paths';
 
 const config: StorybookConfig = {
   stories: ['../stories/**/*.stories.@(ts|tsx)', '../stories/**/*.mdx'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
-  docs: {
-    autodocs: true,
-  },
+
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },
+
   viteFinal(config) {
     return mergeConfig(config, {
       plugins: [tsConfigPaths()],
+      css: {
+        preprocessorOptions: {
+          scss: {
+            quietDeps: true,
+            loadPaths: ['node_modules'],
+          },
+        },
+      },
     });
   },
 };
+
 export default config;

.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 import nhsTheme from './theme';
 import { startCase, upperFirst } from 'lodash';
 

.storybook/preview.ts

@@ -1,5 +1,5 @@
 import './storybook.scss';
-import { type Preview } from '@storybook/react';
+import { type Preview } from '@storybook/react-vite';
 
 const preview: Preview = {
   parameters: {
@@ -18,6 +18,8 @@ const preview: Preview = {
       },
     },
   },
+
+  tags: ['autodocs'],
 };
 
 export default preview;

.storybook/storybook.scss

@@ -1,5 +1,4 @@
-// Allow current nhsuk styles to override legacy
-@import 'nhsuk-frontend/dist/nhsuk';
+@forward 'nhsuk-frontend/dist/nhsuk';
 
 .tag-wrapper {
   display: flex;

.storybook/theme.ts

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming/create';
+import { create } from 'storybook/theming/create';
 import packageJson from '../package.json' with { type: 'json' };
 
 export default create({

.yarnrc.yml

@@ -8,15 +8,10 @@ packageExtensions:
       "@types/react": "*"
       "@types/react-dom": "*"
 
-  "@storybook/addon-essentials@*":
-    peerDependencies:
-      "@types/react": "*"
-      "@types/react-dom": "*"
-
-  "@storybook/core@*":
-    peerDependencies:
-      storybook: "*"
-
   "@storybook/react-vite@*":
     peerDependencies:
       typescript: "*"
+
+  "storybook@*":
+    peerDependencies:
+      "@testing-library/dom": "*"

package.json

@@ -1,13 +1,10 @@
 {
   "name": "nhsuk-react-components",
   "version": "6.0.0-beta.0",
+  "license": "MIT",
   "author": {
     "name": "NHS England"
   },
-  "files": [
-    "src",
-    "dist"
-  ],
   "sideEffects": false,
   "type": "module",
   "imports": {
@@ -49,10 +46,15 @@
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
   "scripts": {
-    "cleanup": "rm -rf dist/ > /dev/null && rm -rf lib/ > /dev/null",
-    "storybook": "NODE_ENV=development storybook dev -p 6006",
+    "cleanup": "rm -rf dist/ > /dev/null",
     "build": "yarn cleanup && rollup -c",
+    "storybook": "NODE_ENV=development storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "test": "jest",
     "test:watch": "jest --watch",
     "lint": "yarn lint:types && yarn lint:js && yarn lint:prettier",
@@ -62,10 +64,8 @@
     "lint:js": "eslint . --max-warnings 0",
     "lint:js:fix": "yarn lint:js --fix",
     "lint:types": "tsc --build tsconfig.json --pretty",
-    "build-storybook": "storybook build",
     "prepublishOnly": "yarn lint && yarn test && yarn storybook --smoke-test"
   },
-  "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.28.4",
     "@babel/preset-env": "^7.28.3",
@@ -77,13 +77,9 @@
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.4",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/theming": "^8.6.14",
+    "@storybook/addon-docs": "9.1.10",
+    "@storybook/addon-links": "^9.1.10",
+    "@storybook/react-vite": "^9.1.10",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
@@ -97,7 +93,6 @@
     "babel-jest": "^30.2.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-replace-import-extension": "^1.1.5",
-    "chromatic": "^6.17.3",
     "classnames": "^2.5.1",
     "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
@@ -118,13 +113,13 @@
     "react-dom": "^19.2.0",
     "rollup": "^4.52.4",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "sass": "^1.53.0",
-    "storybook": "^8.6.14",
+    "sass-embedded": "^1.93.2",
+    "storybook": "^9.1.10",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.45.0",
-    "vite": "^4.5.3",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite": "^7.1.9",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
     "classnames": ">=2.5.0",

stories/Content Presentation/Details.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Details } from '#components';
 
 /**

stories/Content Presentation/DoAndDontList.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { DoAndDontList } from '#components';
 
 /**

stories/Content Presentation/Hero.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Hero } from '#components';
 
 const meta: Meta<typeof Hero> = {

stories/Content Presentation/Icons.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import {
   ArrowLeftIcon,
   ArrowRightCircleIcon,

stories/Content Presentation/Images.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Images } from '#components';
 
 const meta: Meta<typeof Images> = {

stories/Content Presentation/InsetText.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { InsetText } from '#components';
 
 const meta: Meta<typeof InsetText> = {

stories/Content Presentation/SummaryList.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { BodyText, SummaryList } from '#components';
 
 /**

stories/Content Presentation/Table.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Col, HintText, Row, Table } from '#components';
 
 const meta: Meta<typeof Table> = {

stories/Content Presentation/Tabs.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Tabs } from '#components';
 
 /**

stories/Content Presentation/Tag.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Tag } from '#components';
 
 const meta: Meta<typeof Tag> = {

stories/Content Presentation/WarningCallout.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { WarningCallout } from '#components';
 
 const meta: Meta<typeof WarningCallout> = {

stories/Form Elements/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Button } from '#components';
 
 /**

stories/Form Elements/CharacterCount.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { CharacterCount } from '#components';
 
 /**

stories/Form Elements/Checkboxes.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useEffect, useRef, useState, type SyntheticEvent } from 'react';
 import { Checkboxes, TextInput } from '#components';
 

stories/Form Elements/DateInput.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { DateInput, type DateInputValue } from '#components';
 

stories/Form Elements/ErrorMessage.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { ErrorMessage } from '#components';
 
 /**

stories/Form Elements/ErrorSummary.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { ErrorSummary } from '#components';
 
 /**

stories/Form Elements/Fieldset.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Fieldset, TextInput } from '#components';
 
 /**

stories/Form Elements/HintText.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { HintText } from '#components';
 
 const meta: Meta<typeof HintText> = {

stories/Form Elements/Label.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Label } from '#components';
 
 const meta: Meta<typeof Label> = {

stories/Form Elements/Radios.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { Checkboxes, Radios, TextInput } from '#components';
 

stories/Form Elements/Select.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { Select, TextInput } from '#components';
 

stories/Form Elements/TextInput.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { TextInput } from '#components';
 
 const meta: Meta<typeof TextInput> = {

stories/Form Elements/Textarea.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { TextInput, Textarea } from '#components';
 

stories/Layout/Grid.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Card, Col, Container, Row } from '#components';
 
 const meta: Meta = {

stories/Migration Guides/UpgradeTov1.mdx

@@ -1,5 +1,5 @@
 import Docs from '../../docs/upgrade-to-1.0.md?raw';
-import { Markdown, Meta } from '@storybook/blocks';
+import { Markdown, Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Migration Guides/Upgrade to 1.0" />
 

stories/Migration Guides/UpgradeTov2.mdx

@@ -1,5 +1,5 @@
 import Docs from '../../docs/upgrade-to-2.0.md?raw';
-import { Markdown, Meta } from '@storybook/blocks';
+import { Markdown, Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Migration Guides/Upgrade to 2.0" />
 

stories/Migration Guides/UpgradeTov3.mdx

@@ -1,5 +1,5 @@
 import Docs from '../../docs/upgrade-to-3.0.md?raw';
-import { Markdown, Meta } from '@storybook/blocks';
+import { Markdown, Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Migration Guides/Upgrade to 3.0" />
 

stories/Migration Guides/UpgradeTov4.mdx

@@ -1,5 +1,5 @@
 import Docs from '../../docs/upgrade-to-4.0.md?raw';
-import { Markdown, Meta } from '@storybook/blocks';
+import { Markdown, Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Migration Guides/Upgrade to 4.0" />
 

stories/Migration Guides/UpgradeTov5.mdx

@@ -1,5 +1,5 @@
 import Docs from '../../docs/upgrade-to-5.0.md?raw';
-import { Markdown, Meta } from '@storybook/blocks';
+import { Markdown, Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Migration Guides/Upgrade to 5.0" />
 

stories/Migration Guides/UpgradeTov6.mdx

@@ -1,5 +1,5 @@
 import Docs from '../../docs/upgrade-to-6.0.md?raw';
-import { Markdown, Meta } from '@storybook/blocks';
+import { Markdown, Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Migration Guides/Upgrade to 6.0" />
 

stories/Navigation/ActionLink.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { ActionLink } from '#components';
 
 const meta: Meta<typeof ActionLink> = {

stories/Navigation/BackLink.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { BackLink } from '#components';
 
 const meta: Meta<typeof BackLink> = {

stories/Navigation/Breadcrumb.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Breadcrumb, Container } from '#components';
 
 /**

stories/Navigation/Card.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Card, ChevronRightCircleIcon } from '#components';
 
 const meta: Meta<typeof Card> = {

stories/Navigation/ContentsList.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { ContentsList } from '#components';
 
 /**