@codecademy/styleguide 79.2.4-alpha.b2bca8.0 → 79.2.4-alpha.ee1acd.0

package/.storybook/components/Elements/DocsContainer.tsx

@@ -15,8 +15,8 @@ import {
   DocsContainer as StorybookDocsContainer,
   DocsContextProps,
   SourceContainer,
-} from '@storybook/blocks';
-import { ThemeProvider } from '@storybook/theming';
+} from '@storybook/addon-docs/blocks';
+import { ThemeProvider } from 'storybook/theming';
 import { useMemo } from 'react';
 import { HelmetProvider } from 'react-helmet-async';
 import theme from '../../theming/GamutTheme';

package/.storybook/components/Elements/StorySource.tsx

@@ -1,5 +1,5 @@
-import { Source } from '@storybook/blocks';
-import { SourceType } from '@storybook/docs-tools';
+import { Source } from '@storybook/addon-docs/blocks';
+import { SourceType } from 'storybook/internal/docs-tools';
 import { ComponentProps } from 'react';
 
 export const StorySource = ({

package/.storybook/components/Headers/ComponentHeader.tsx

@@ -6,7 +6,7 @@ import {
   Text,
 } from '@codecademy/gamut';
 import { Figma } from '@storybook/addon-designs/blocks';
-import { Title } from '@storybook/blocks';
+import { Title } from '@storybook/addon-docs/blocks';
 import * as React from 'react';
 
 import { StatusIndicator } from '../Elements/StatusIndicator';

package/.storybook/components/ImageWrapper.tsx

@@ -3,9 +3,8 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 
 interface ImageWrapperProps {
-  alt: string;
-  height: number | string;
   src: string;
+  alt: string;
 }
 
 const StyledImage = styled.img`
@@ -16,13 +15,12 @@ const StyledImage = styled.img`
 export const ImageWrapper: React.FC<ImageWrapperProps & BoxProps> = ({
   src,
   alt,
-  height = '216px',
   ...props
 }) => {
   return (
     <Box
       width={'100%'}
-      height={height}
+      height="216px"
       display="flex"
       justifyContent={'center'}
       alignItems="center"

package/.storybook/main.ts

@@ -1,5 +1,12 @@
+// This file has been automatically migrated to valid ESM format by Storybook.
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
 import type { StorybookConfig } from '@storybook/react-webpack5';
-import { resolve, dirname, join } from 'path';
+import { resolve, dirname, join } from 'node:path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const require = createRequire(import.meta.url);
 
 const config: StorybookConfig = {
   stories: [
@@ -8,9 +15,14 @@ const config: StorybookConfig = {
   ],
   staticDirs: ['../src/static'],
   addons: [
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@nx/react/plugins/storybook', ''),
+    getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
+    // the @nx/react storybook plugin is just a subdirectory of the @nx/react package
+    // so getting the absolute path of the package.json won't work. they do expose
+    // a require export though, so we can just use that directly
+    require.resolve('@nx/react/plugins/storybook'),
     getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-a11y'),
     getAbsolutePath('@storybook/addon-designs'),
     getAbsolutePath('storybook-addon-deep-controls'),
   ],
@@ -57,6 +69,11 @@ const config: StorybookConfig = {
           __dirname,
           '../../gamut-illustrations/src'
         ),
+        '@codecademy/gamut-icons$': resolve(__dirname, '../../gamut-icons/src'),
+        '@codecademy/gamut-patterns$': resolve(
+          __dirname,
+          '../../gamut-patterns/src'
+        ),
         '@codecademy/variance$': resolve(__dirname, '../../variance/src'),
       },
     };

package/.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 import theme from './theming/GamutTheme';
 
 addons.setConfig({

package/.storybook/preview.ts

@@ -4,9 +4,9 @@ import theme from './theming/GamutTheme';
 import { withEmotion } from './theming/GamutThemeProvider';
 import { breakpoints, css } from '@codecademy/gamut-styles';
 import { DocsContainer } from './components/Elements/DocsContainer';
-import { CodeOrSourceMdx, HeadersMdx } from '@storybook/blocks';
-import { components as htmlComponents } from '@storybook/components';
-import { styled } from '@storybook/theming';
+import { CodeOrSourceMdx, HeadersMdx } from '@storybook/addon-docs/blocks';
+import { components as htmlComponents } from 'storybook/internal/components';
+import { styled } from 'storybook/theming';
 import { Link } from './components/Elements/Markdown';
 
 const WrappedPre = styled(htmlComponents.pre)(
@@ -26,6 +26,9 @@ const mdxComponents = {
 
 const preview: Preview = {
   parameters: {
+    a11y: {
+      test: 'todo',
+    },
     backgrounds: {
       disable: true,
     },
@@ -85,12 +88,7 @@ const preview: Preview = {
       },
     },
     viewport: {
-      defaultViewport: 'responsive',
-      viewports: {
-        responsive: {
-          name: 'Responsive',
-          type: 'desktop',
-        },
+      options: {
         xs: {
           name: `XS - ${breakpoints.xs}`,
           styles: {
@@ -145,8 +143,8 @@ export const globalTypes = {
       icon: 'circlehollow',
       // Array of plain string values or MenuItem shape (see below)
       items: [
-        { value: 'light', icon: 'circlehollow', title: 'light' },
-        { value: 'dark', icon: 'circle', title: 'dark' },
+        { value: 'light', icon: 'circlehollow', title: 'Light' },
+        { value: 'dark', icon: 'circle', title: 'Dark' },
       ],
       // Property that specifies if the name of the item will be displayed
       showName: true,

package/.storybook/theming/GamutTheme.ts

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from 'storybook/theming';
 import {
   theme as gamutTheme,
   trueColors,

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [79.2.4-alpha.b2bca8.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.3...@codecademy/styleguide@79.2.4-alpha.b2bca8.0) (2026-03-20)
+### [79.2.4-alpha.ee1acd.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.3...@codecademy/styleguide@79.2.4-alpha.ee1acd.0) (2026-03-20)
 
-**Note:** Version bump only for package @codecademy/styleguide
+### Bug Fixes
+
+- consistent title casing ([de25bb3](https://github.com/Codecademy/gamut/commit/de25bb3700607314c18b7487e4dec39aafa8922b))
+- remove responsive viewport option ([27378f9](https://github.com/Codecademy/gamut/commit/27378f9105f184e3f79705b018c08d88ac26d9ac))
 
 ### [79.2.3](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.2...@codecademy/styleguide@79.2.3) (2026-03-19)
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.2.4-alpha.b2bca8.0",
+  "version": "79.2.4-alpha.ee1acd.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "a3ec8f08ed991f8c0da971193b88af39057ad7d1"
+  "gitHead": "5a206a23576ff13064f5d0d9bef7ef89ea3a2a9d"
 }

package/project.json

@@ -32,6 +32,15 @@
           "quiet": true
         }
       }
+    },
+    "storybook-test": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build-storybook"],
+      "options": {
+        "cwd": "{workspaceRoot}",
+        "forwardAllArgs": false,
+        "command": "start-server-and-test \"http-server dist/storybook/styleguide -p 6007 --silent\" http://127.0.0.1:6007 \"test-storybook --url http://127.0.0.1:6007 --config-dir packages/styleguide/.storybook\""
+      }
     }
   }
 }

package/src/lib/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import { AboutHeader, TableOfContents } from '~styleguide/blocks';
 

package/src/lib/Atoms/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import { AboutHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/Animations/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import {
   AboutHeader,

package/src/lib/Atoms/Animations/ExpandInCollapseOut/ExpandInCollapseOut.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/Animations/Rotation/Rotation.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/Badge/Badge.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import {
   Callout,

package/src/lib/Atoms/Buttons/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import {
   AboutHeader,

package/src/lib/Atoms/Buttons/Button/Button.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Atoms/Buttons/CTAButton/CTAButton.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/Buttons/FillButton/FillButton.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/Buttons/IconButton/IconButton.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Atoms/Buttons/StrokeButton/StrokeButton.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/Buttons/TextButton/TextButton.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/Card/Card.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Atoms/Drawer/Drawer.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Atoms/FeatureShimmer/FeatureShimmer.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Atoms/FormElements/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import {
   AboutHeader,

package/src/lib/Atoms/FormElements/Form/Form.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Atoms/FormElements/FormGroup/FormGroup.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Atoms/FormElements/FormGroupDescription/FormGroupDescription.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/FormElements/FormGroupLabel/FormGroupLabel.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/FormElements/FormRequiredText/FormRequiredText.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Atoms/FormInputs/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import {
   AboutHeader,

package/src/lib/Atoms/FormInputs/Checkbox/Checkbox.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Atoms/FormInputs/Input/Input.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Atoms/FormInputs/Radio/Radio.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Atoms/FormInputs/Select/Select.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Atoms/FormInputs/SelectDropdown/SelectDropdown.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { Callout, ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Atoms/FormInputs/TextArea/TextArea.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/Icons/About.mdx

@@ -1,5 +1,5 @@
 import { Anchor } from '@codecademy/gamut';
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import {
   AboutHeader,

package/src/lib/Atoms/Icons/Mini/Mini.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/Icons/Regular/Regular.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/Illustrations/Illustrations.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/InternalFloatingCard/InternalFloatingCard.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { Callout, ComponentHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Atoms/Loaders/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import {
   AboutHeader,

package/src/lib/Atoms/Loaders/Shimmer/Shimmer.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/Loaders/Spinner/Spinner.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/Patterns/Patterns.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/PopoverContainer/PopoverContainer.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/ProgressBar/ProgressBar.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/RadialProgress/RadialProgress.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/SkipToContent/SkipToContent.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, KeyboardKey } from '~styleguide/blocks';
 

package/src/lib/Atoms/Tag/Tag.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, ImageWrapper, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Atoms/Toggle/Toggle.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/UtilityComponents/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import {
   AboutHeader,

package/src/lib/Atoms/UtilityComponents/DelayedRenderWrapper/DelayedRenderWrapper.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Atoms/UtilityComponents/FocusTrap/FocusTrap.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

package/src/lib/Foundations/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import {
   AboutHeader,

package/src/lib/Foundations/ColorMode/ColorMode.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import { AboutHeader } from '~styleguide/blocks';
 

package/src/lib/Foundations/Layout.mdx

@@ -1,5 +1,5 @@
 import { Box } from '@codecademy/gamut/src';
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo, TokenTable } from '~styleguide/blocks';
 

package/src/lib/Foundations/System/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import {
   AboutHeader,

package/src/lib/Foundations/System/Compose.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import { AboutHeader, LinkTo } from '~styleguide/blocks';
 

package/src/lib/Foundations/System/Props/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import {
   AboutHeader,

package/src/lib/Foundations/System/Props/Background.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import { AboutHeader, TokenTable } from '~styleguide/blocks';
 

package/src/lib/Foundations/System/Props/Border.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 
 import { AboutHeader, Callout, TokenTable } from '~styleguide/blocks';