@codecademy/styleguide 79.2.4-alpha.ee1acd.0 → 79.2.5-alpha.38010e.0

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

@@ -15,8 +15,8 @@ import {
   DocsContainer as StorybookDocsContainer,
   DocsContextProps,
   SourceContainer,
-} from '@storybook/addon-docs/blocks';
-import { ThemeProvider } from 'storybook/theming';
+} from '@storybook/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/addon-docs/blocks';
-import { SourceType } from 'storybook/internal/docs-tools';
+import { Source } from '@storybook/blocks';
+import { SourceType } from '@storybook/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/addon-docs/blocks';
+import { Title } from '@storybook/blocks';
 import * as React from 'react';
 
 import { StatusIndicator } from '../Elements/StatusIndicator';

package/.storybook/components/ImageWrapper.tsx

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

package/.storybook/main.ts

@@ -1,12 +1,5 @@
-// 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 'node:path';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-const require = createRequire(import.meta.url);
+import { resolve, dirname, join } from 'path';
 
 const config: StorybookConfig = {
   stories: [
@@ -15,14 +8,9 @@ const config: StorybookConfig = {
   ],
   staticDirs: ['../src/static'],
   addons: [
-    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-essentials'),
+    getAbsolutePath('@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'),
   ],
@@ -69,11 +57,6 @@ 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/addon-docs/blocks';
-import { components as htmlComponents } from 'storybook/internal/components';
-import { styled } from 'storybook/theming';
+import { CodeOrSourceMdx, HeadersMdx } from '@storybook/blocks';
+import { components as htmlComponents } from '@storybook/components';
+import { styled } from '@storybook/theming';
 import { Link } from './components/Elements/Markdown';
 
 const WrappedPre = styled(htmlComponents.pre)(
@@ -26,9 +26,6 @@ const mdxComponents = {
 
 const preview: Preview = {
   parameters: {
-    a11y: {
-      test: 'todo',
-    },
     backgrounds: {
       disable: true,
     },
@@ -48,15 +45,35 @@ const preview: Preview = {
           'Meta',
           [
             'About',
-            'Best Practices',
+            'Brand',
+            'Best practices',
             'Contributing',
+            'Deep Controls add-on',
             'ESLint rules',
             'FAQs',
             'Logical and physical CSS properties',
             'Stories',
             'Brand',
             'Installation',
-            'Usage Guide',
+            'Stories',
+            'Usage guide',
+            'Gamut writing guide',
+            [
+              'About',
+              'General principles',
+              'Documentation in code',
+              'Formatting',
+              'Language and grammar',
+              'Linking',
+              'Referencing code',
+              'Stories',
+              [
+                'About',
+                'About pages',
+                'Component story documentation',
+                'Component code examples',
+              ],
+            ],
             'MCP',
           ],
           'Foundations',
@@ -88,7 +105,12 @@ const preview: Preview = {
       },
     },
     viewport: {
-      options: {
+      defaultViewport: 'responsive',
+      viewports: {
+        responsive: {
+          name: 'Responsive',
+          type: 'desktop',
+        },
         xs: {
           name: `XS - ${breakpoints.xs}`,
           styles: {
@@ -143,8 +165,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,12 +3,13 @@
 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.ee1acd.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.3...@codecademy/styleguide@79.2.4-alpha.ee1acd.0) (2026-03-20)
+### [79.2.5-alpha.38010e.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.4...@codecademy/styleguide@79.2.5-alpha.38010e.0) (2026-03-25)
 
-### Bug Fixes
+**Note:** Version bump only for package @codecademy/styleguide
 
-- 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.4](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.3...@codecademy/styleguide@79.2.4) (2026-03-23)
+
+**Note:** Version bump only for package @codecademy/styleguide
 
 ### [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.ee1acd.0",
+  "version": "79.2.5-alpha.38010e.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "5a206a23576ff13064f5d0d9bef7ef89ea3a2a9d"
+  "gitHead": "87f5f03f060c24f5423088e532843aa73c369d35"
 }

package/project.json

@@ -32,15 +32,6 @@
           "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/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import { AboutHeader, TableOfContents } from '~styleguide/blocks';
 

package/src/lib/Atoms/About.mdx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta } from '@storybook/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/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

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

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

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

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/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/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/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/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/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/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/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/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/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/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/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/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/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/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/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/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/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/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import {
   AboutHeader,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/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/addon-docs/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

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

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

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

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

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

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

package/src/lib/Foundations/About.mdx

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

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

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/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/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 import { ComponentHeader, LinkTo, TokenTable } from '~styleguide/blocks';