@codecademy/styleguide 79.3.1-alpha.4ae770.0 → 79.3.1-alpha.b86be7.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/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,
     },
@@ -108,7 +105,12 @@ const preview: Preview = {
       },
     },
     viewport: {
-      options: {
+      defaultViewport: 'responsive',
+      viewports: {
+        responsive: {
+          name: 'Responsive',
+          type: 'desktop',
+        },
         xs: {
           name: `XS - ${breakpoints.xs}`,
           styles: {
@@ -163,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,9 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [79.3.1-alpha.4ae770.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.3.0...@codecademy/styleguide@79.3.1-alpha.4ae770.0) (2026-03-25)
+### [79.3.1-alpha.b86be7.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.3.0...@codecademy/styleguide@79.3.1-alpha.b86be7.0) (2026-03-26)
 
-### 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))
+**Note:** Version bump only for package @codecademy/styleguide
 
 ## [79.3.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.4...@codecademy/styleguide@79.3.0) (2026-03-25)
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.3.1-alpha.4ae770.0",
+  "version": "79.3.1-alpha.b86be7.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "1cb798004e17ff8ecc325db15e777fe6cd86c741"
+  "gitHead": "aa78e52978cd3015734650b0fca3848081cbd742"
 }

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';
 
@@ -23,6 +23,8 @@ export const parameters = {
 
 <ComponentHeader {...parameters} />
 
+<Canvas sourceState="shown" of={TextAreaStories.AutoGrow} />
+
 ## Usage
 
 Use TextArea to handle long form text entry within forms.
@@ -31,7 +33,6 @@ Use TextArea to handle long form text entry within forms.
 
 ### Disabled
 
-<Canvas of={TextAreaStories.Disabled} />
 
 ### Error
 

package/src/lib/Atoms/FormInputs/TextArea/TextArea.stories.tsx

@@ -1,5 +1,66 @@
-import { TextArea } from '@codecademy/gamut';
+import { Box, TextArea } from '@codecademy/gamut';
+import { css } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
+import {
+  type ChangeEvent,
+  type ComponentProps,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+} from 'react';
+
+/**
+ * `field-sizing: content` lets the textarea grow with its value in Chromium and Safari.
+ * Firefox does not support it yet; we mirror that behavior by syncing height to scrollHeight.
+ *
+ * Note: A single-line `<input>` cannot expand vertically—use `<textarea>` for multi-line text.
+ */
+const fieldSizingContentSupported =
+  typeof CSS !== 'undefined' && CSS.supports('field-sizing', 'content');
+
+const AutoGrowTextAreaBase = styled(TextArea)(
+  css({
+    resize: 'none',
+    overflow: 'hidden',
+    // Static CSS — not a Gamut system prop; merged by variance `css()` as passthrough.
+    fieldSizing: 'content',
+  })
+);
+
+const AutoGrowTextArea = (props: ComponentProps<typeof TextArea>) => {
+  const ref = useRef<HTMLTextAreaElement>(null);
+  const { onChange, value, ...rest } = props;
+
+  const syncHeight = useCallback(() => {
+    if (fieldSizingContentSupported) return;
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+  }, []);
+
+  useLayoutEffect(() => {
+    syncHeight();
+  }, [syncHeight, value]);
+
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    onChange?.(event);
+    requestAnimationFrame(syncHeight);
+  };
+
+  return (
+    <Box height="1000px">
+      <AutoGrowTextAreaBase
+        {...rest}
+        ref={ref}
+        rows={rest.rows ?? 1}
+        {...(value !== undefined ? { value } : {})}
+        onChange={handleChange}
+      />
+    </Box>
+  );
+};
 
 const meta: Meta<typeof TextArea> = {
   component: TextArea,
@@ -38,3 +99,15 @@ export const Placeholder: Story = {
     defaultValue: undefined,
   },
 };
+
+export const AutoGrow: Story = {
+  args: {
+    htmlFor: 'example-autogrow',
+    name: 'example-autogrow',
+    placeholder: 'Type multiple lines — the field grows vertically',
+    defaultValue:
+      'Line one\nLine two\nLine three\n\nFirefox uses scrollHeight; Chromium/Safari use field-sizing: content.',
+    rows: 1,
+  },
+  render: (args) => <AutoGrowTextArea {...args} />,
+};

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';