Merge pull request #1448 from openameba/feat/storybook-v9-upgrade

yanagi0602 · web-flow · commit 2db78ca43557 · 2025-10-01T13:56:42.000+09:00
chore(spindle-ui,spindle-hooks): upgrade Storybook from 8.6.14 to 9.1.9
diff --git a/packages/spindle-hooks/.storybook/main.js b/packages/spindle-hooks/.storybook/main.js
@@ -3,11 +3,8 @@ module.exports = {
 
   addons: [
     '@storybook/addon-webpack5-compiler-swc',
-    '@storybook/addon-actions',
     '@storybook/addon-a11y',
-    '@storybook/addon-backgrounds',
     '@storybook/addon-docs',
-    '@storybook/addon-viewport',
   ],
 
   framework: {
diff --git a/packages/spindle-hooks/package.json b/packages/spindle-hooks/package.json
@@ -46,14 +46,11 @@
     }
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "8.6.14",
-    "@storybook/addon-actions": "8.6.14",
-    "@storybook/addon-backgrounds": "8.6.14",
-    "@storybook/addon-docs": "8.6.14",
-    "@storybook/addon-viewport": "8.6.14",
-    "@storybook/addon-webpack5-compiler-swc": "3.0.0",
-    "@storybook/react": "8.6.14",
-    "@storybook/react-webpack5": "8.6.14",
+    "@storybook/addon-a11y": "9.1.9",
+    "@storybook/addon-docs": "9.1.9",
+    "@storybook/addon-webpack5-compiler-swc": "4.0.1",
+    "@storybook/react": "9.1.9",
+    "@storybook/react-webpack5": "9.1.9",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/react": "16.3.0",
@@ -66,7 +63,7 @@
     "jest-environment-jsdom": "29.7.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "storybook": "8.6.14",
+    "storybook": "9.1.9",
     "ts-jest": "29.4.2",
     "webpack": "5.101.3"
   }
diff --git a/packages/spindle-hooks/src/useCarousel/useCarousel.mdx b/packages/spindle-hooks/src/useCarousel/useCarousel.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as useCarouselStories from './useCarousel.stories';
 
 <Meta of={useCarouselStories} />
diff --git a/packages/spindle-hooks/src/useTimeDistance/useTimeDistance.mdx b/packages/spindle-hooks/src/useTimeDistance/useTimeDistance.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as useTimeDistanceStories from './useTimeDistance.stories';
 
 <Meta of={useTimeDistanceStories} />
diff --git a/packages/spindle-ui/.storybook/main.js b/packages/spindle-ui/.storybook/main.js
@@ -2,11 +2,8 @@ module.exports = {
   stories: ['../src/**/*.@(mdx|stories.@(ts|tsx))'],
   addons: [
     '@storybook/addon-webpack5-compiler-swc',
-    '@storybook/addon-actions',
     '@storybook/addon-a11y',
-    '@storybook/addon-backgrounds',
     '@storybook/addon-docs',
-    '@storybook/addon-viewport',
   ],
   staticDirs: ['../assets'],
   webpackFinal: async (config) => {
diff --git a/packages/spindle-ui/package.json b/packages/spindle-ui/package.json
@@ -66,15 +66,11 @@
   },
   "devDependencies": {
     "@figma/code-connect": "1.3.5",
-    "@storybook/addon-a11y": "8.6.14",
-    "@storybook/addon-actions": "8.6.14",
-    "@storybook/addon-backgrounds": "8.6.14",
-    "@storybook/addon-docs": "8.6.14",
-    "@storybook/addon-viewport": "8.6.14",
-    "@storybook/addon-webpack5-compiler-swc": "3.0.0",
-    "@storybook/blocks": "8.6.14",
-    "@storybook/react": "8.6.14",
-    "@storybook/react-webpack5": "8.6.14",
+    "@storybook/addon-a11y": "9.1.9",
+    "@storybook/addon-docs": "9.1.9",
+    "@storybook/addon-webpack5-compiler-swc": "4.0.1",
+    "@storybook/react": "9.1.9",
+    "@storybook/react-webpack5": "9.1.9",
     "@svgr/cli": "8.1.0",
     "@swc/core": "1.13.5",
     "@testing-library/dom": "10.4.1",
@@ -102,7 +98,7 @@
     "reg-publish-gcs-plugin": "0.14.4",
     "reg-suit": "0.14.5",
     "scaffdog": "4.1.0",
-    "storybook": "8.6.14",
+    "storybook": "9.1.9",
     "stylelint": "^16.0.0",
     "stylelint-config-prettier": "^9.0.0",
     "stylelint-config-standard": "^39.0.0",
diff --git a/packages/spindle-ui/src/BottomButton/BottomButton.mdx b/packages/spindle-ui/src/BottomButton/BottomButton.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as BottomButtonStories from './BottomButton.stories';
 
 <Meta of={BottomButtonStories} />
diff --git a/packages/spindle-ui/src/Breadcrumb/Breadcrumb.mdx b/packages/spindle-ui/src/Breadcrumb/Breadcrumb.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as BreadcrumbStories from './Breadcrumb.stories';
 
 <Meta of={BreadcrumbStories} />
diff --git a/packages/spindle-ui/src/Button/Button.mdx b/packages/spindle-ui/src/Button/Button.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as ButtonStories from './Button.stories';
 
 <Meta of={ButtonStories} />
diff --git a/packages/spindle-ui/src/Button/Button.stories.tsx b/packages/spindle-ui/src/Button/Button.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { Button } from './Button';
 import { PlusBold, Link, FileAdd, ChevronDownBold } from '../Icon';
 
diff --git a/packages/spindle-ui/src/ButtonGroup/ButtonGroup.mdx b/packages/spindle-ui/src/ButtonGroup/ButtonGroup.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as ButtonGroupStories from './ButtonGroup.stories';
 
 <Meta of={ButtonGroupStories} />
diff --git a/packages/spindle-ui/src/Dialog/Dialog.mdx b/packages/spindle-ui/src/Dialog/Dialog.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as DialogStories from './Dialog.stories';
 
 <Meta of={DialogStories} />
diff --git a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.mdx b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as DropdownMenuStories from './DropdownMenu.stories';
 
 <Meta of={DropdownMenuStories} />
diff --git a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.example.tsx b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.example.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef } from 'react';
-import { actions } from '@storybook/addon-actions';
+import { actions } from 'storybook/actions';
 
 import { Button } from '../Button';
 import AllFill from '../Icon/AllFill';
diff --git a/packages/spindle-ui/src/Form/ButtonSwitch/ButtonSwitch.mdx b/packages/spindle-ui/src/Form/ButtonSwitch/ButtonSwitch.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as ButtonSwitchStories from './ButtonSwitch.stories';
 
 <Meta of={ButtonSwitchStories} />
diff --git a/packages/spindle-ui/src/Form/Checkbox.mdx b/packages/spindle-ui/src/Form/Checkbox.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as CheckboxStories from './Checkbox.stories';
 
 <Meta of={CheckboxStories} />
diff --git a/packages/spindle-ui/src/Form/Checkbox.stories.tsx b/packages/spindle-ui/src/Form/Checkbox.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { Checkbox as CheckboxComponent } from './Checkbox';
 
 const meta: Meta<typeof CheckboxComponent> = {
diff --git a/packages/spindle-ui/src/Form/DropDown.mdx b/packages/spindle-ui/src/Form/DropDown.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as DropDownStories from './DropDown.stories';
 
 <Meta of={DropDownStories} />
diff --git a/packages/spindle-ui/src/Form/DropDown.stories.tsx b/packages/spindle-ui/src/Form/DropDown.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { DropDown as DropDownComponent } from './DropDown';
 
 const meta: Meta<typeof DropDownComponent> = {
diff --git a/packages/spindle-ui/src/Form/InlineDropDown.mdx b/packages/spindle-ui/src/Form/InlineDropDown.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as InlineDropDownStories from './InlineDropDown.stories';
 
 <Meta of={InlineDropDownStories} />
diff --git a/packages/spindle-ui/src/Form/InlineDropDown.stories.tsx b/packages/spindle-ui/src/Form/InlineDropDown.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { InlineDropDown } from './InlineDropDown';
 
 const meta: Meta<typeof InlineDropDown> = {
diff --git a/packages/spindle-ui/src/Form/InputLabel.mdx b/packages/spindle-ui/src/Form/InputLabel.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as InputLabelStories from './InputLabel.stories';
 
 <Meta of={InputLabelStories} />
diff --git a/packages/spindle-ui/src/Form/InvalidMessage.mdx b/packages/spindle-ui/src/Form/InvalidMessage.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as InvalidMessageStories from './InvalidMessage.stories';
 
 <Meta of={InvalidMessageStories} />
diff --git a/packages/spindle-ui/src/Form/Radio.mdx b/packages/spindle-ui/src/Form/Radio.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as RadioStories from './Radio.stories';
 
 <Meta of={RadioStories} />
diff --git a/packages/spindle-ui/src/Form/Radio.stories.tsx b/packages/spindle-ui/src/Form/Radio.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { Radio as RadioComponent } from './Radio';
 
 const meta: Meta<typeof RadioComponent> = {
diff --git a/packages/spindle-ui/src/Form/TextArea.mdx b/packages/spindle-ui/src/Form/TextArea.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as TextAreaStories from './TextArea.stories';
 
 <Meta of={TextAreaStories} />
diff --git a/packages/spindle-ui/src/Form/TextArea.stories.tsx b/packages/spindle-ui/src/Form/TextArea.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { TextArea as TextAreaComponent } from './TextArea';
 
 const meta: Meta<typeof TextAreaComponent> = {
diff --git a/packages/spindle-ui/src/Form/TextField.mdx b/packages/spindle-ui/src/Form/TextField.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as TextFieldStories from './TextField.stories';
 
 <Meta of={TextFieldStories} />
diff --git a/packages/spindle-ui/src/Form/TextField.stories.tsx b/packages/spindle-ui/src/Form/TextField.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { TextField } from './TextField';
 
 const meta: Meta<typeof TextField> = {
diff --git a/packages/spindle-ui/src/Form/ToggleSwitch.mdx b/packages/spindle-ui/src/Form/ToggleSwitch.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as ToggleSwitchStories from './ToggleSwitch.stories';
 
 <Meta of={ToggleSwitchStories} />
diff --git a/packages/spindle-ui/src/Form/ToggleSwitch.stories.tsx b/packages/spindle-ui/src/Form/ToggleSwitch.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { ToggleSwitch as ToggleSwitchComponent } from './ToggleSwitch';
 
 const meta: Meta<typeof ToggleSwitchComponent> = {
diff --git a/packages/spindle-ui/src/HeroCarousel/HeroCarousel.mdx b/packages/spindle-ui/src/HeroCarousel/HeroCarousel.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as HeroCarouselStories from './HeroCarousel.stories';
 
 <Meta of={HeroCarouselStories} />
diff --git a/packages/spindle-ui/src/Icon/index.mdx b/packages/spindle-ui/src/Icon/index.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as indexStories from './index.stories';
 
 <Meta of={indexStories} />
diff --git a/packages/spindle-ui/src/IconButton/IconButton.mdx b/packages/spindle-ui/src/IconButton/IconButton.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as IconButtonStories from './IconButton.stories';
 
 <Meta of={IconButtonStories} />
diff --git a/packages/spindle-ui/src/IconButton/IconButton.stories.tsx b/packages/spindle-ui/src/IconButton/IconButton.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { IconButton } from './IconButton';
 import { PlusBold } from '../Icon';
 
diff --git a/packages/spindle-ui/src/InlineNotification/InlineNotification.mdx b/packages/spindle-ui/src/InlineNotification/InlineNotification.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as InlineNotificationStories from './InlineNotification.stories';
 
 <Meta of={InlineNotificationStories} />
diff --git a/packages/spindle-ui/src/LinkButton/LinkButton.mdx b/packages/spindle-ui/src/LinkButton/LinkButton.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as LinkButtonStories from './LinkButton.stories';
 
 <Meta of={LinkButtonStories} />
diff --git a/packages/spindle-ui/src/LinkButton/LinkButton.stories.tsx b/packages/spindle-ui/src/LinkButton/LinkButton.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { LinkButton } from './LinkButton';
 import { GraphBar, Present, PencilAdd, ChevronDownBold } from '../Icon';
 
diff --git a/packages/spindle-ui/src/List/MoreLink.mdx b/packages/spindle-ui/src/List/MoreLink.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as MoreLinkStories from './MoreLink.stories';
 
 <Meta of={MoreLinkStories} />
diff --git a/packages/spindle-ui/src/List/MoreLink.stories.tsx b/packages/spindle-ui/src/List/MoreLink.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { MoreLink } from './MoreLink';
 
 const meta: Meta<typeof MoreLink> = {
diff --git a/packages/spindle-ui/src/Modal/AppealModal.mdx b/packages/spindle-ui/src/Modal/AppealModal.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as AppealModalStories from './AppealModal.stories';
 
 <Meta of={AppealModalStories} />
diff --git a/packages/spindle-ui/src/Modal/SemiModal.mdx b/packages/spindle-ui/src/Modal/SemiModal.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as SemiModalStories from './SemiModal.stories';
 
 <Meta of={SemiModalStories} />
diff --git a/packages/spindle-ui/src/NavigationTab/UnderlineTab/UnderlineTab.mdx b/packages/spindle-ui/src/NavigationTab/UnderlineTab/UnderlineTab.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as UnderlineTabStories from './UnderlineTab.stories';
 
 <Meta of={UnderlineTabStories} />
diff --git a/packages/spindle-ui/src/NavigationTab/UnderlineTab/UnderlineTab.stories.tsx b/packages/spindle-ui/src/NavigationTab/UnderlineTab/UnderlineTab.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { UnderlineTab } from './UnderlineTab';
 
 const meta: Meta<typeof UnderlineTab> = {
diff --git a/packages/spindle-ui/src/Pagination/Pagination.mdx b/packages/spindle-ui/src/Pagination/Pagination.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as PaginationStories from './Pagination.stories';
 
 <Meta of={PaginationStories} />
diff --git a/packages/spindle-ui/src/Pagination/Pagination.stories.tsx b/packages/spindle-ui/src/Pagination/Pagination.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { Pagination } from './Pagination';
 
 const meta: Meta<typeof Pagination> = {
diff --git a/packages/spindle-ui/src/Rating/Rating.mdx b/packages/spindle-ui/src/Rating/Rating.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as RatingStories from './Rating.stories';
 
 <Meta of={RatingStories} />
diff --git a/packages/spindle-ui/src/SegmentedControl/SegmentedControl.mdx b/packages/spindle-ui/src/SegmentedControl/SegmentedControl.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as SegmentedControlStories from './SegmentedControl.stories';
 
 <Meta of={SegmentedControlStories} />
diff --git a/packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.tsx b/packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { SegmentedControl } from './SegmentedControl';
 
 const meta: Meta<typeof SegmentedControl> = {
diff --git a/packages/spindle-ui/src/SnackBar/SnackBar.mdx b/packages/spindle-ui/src/SnackBar/SnackBar.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as SnackBarStories from './SnackBar.stories';
 
 <Meta of={SnackBarStories} />
diff --git a/packages/spindle-ui/src/SnackBar/SnackBar.stories.tsx b/packages/spindle-ui/src/SnackBar/SnackBar.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { SnackBar } from './SnackBar';
 import { Button } from '../Button';
 import {
diff --git a/packages/spindle-ui/src/StackNotificationManager/StackNotificationManager.mdx b/packages/spindle-ui/src/StackNotificationManager/StackNotificationManager.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as StackNotificationManagerStories from './StackNotificationManager.stories';
 
 <Meta of={StackNotificationManagerStories} />
diff --git a/packages/spindle-ui/src/SubtleButton/SubtleButton.mdx b/packages/spindle-ui/src/SubtleButton/SubtleButton.mdx
diff --git a/packages/spindle-ui/src/SubtleButton/SubtleButton.stories.tsx b/packages/spindle-ui/src/SubtleButton/SubtleButton.stories.tsx
diff --git a/packages/spindle-ui/src/Table/Table.mdx b/packages/spindle-ui/src/Table/Table.mdx
diff --git a/packages/spindle-ui/src/TextButton/TextButton.mdx b/packages/spindle-ui/src/TextButton/TextButton.mdx
diff --git a/packages/spindle-ui/src/TextButton/TextButton.stories.tsx b/packages/spindle-ui/src/TextButton/TextButton.stories.tsx
diff --git a/packages/spindle-ui/src/TextLink/TextLink.mdx b/packages/spindle-ui/src/TextLink/TextLink.mdx
diff --git a/packages/spindle-ui/src/TextLink/TextLink.stories.tsx b/packages/spindle-ui/src/TextLink/TextLink.stories.tsx
diff --git a/packages/spindle-ui/src/Toast/Toast.mdx b/packages/spindle-ui/src/Toast/Toast.mdx
diff --git a/yarn.lock b/yarn.lock
