3 files changed, 10 insertions, 40 deletions
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 76b1316..27b7662 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -3,7 +3,7 @@ import { RuleSetRule } from 'webpack';
 
 const config: StorybookConfig = {
   stories: [
-    '../src/**!(content)/*.mdx',
+    '../src/components/**/*.mdx',
     '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   addons: [
diff --git a/.storybook/overrides/docs-container.js b/.storybook/overrides/docs-container.js
deleted file mode 100644
index f539986..0000000
--- a/.storybook/overrides/docs-container.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { DocsContainer as BaseContainer } from '@storybook/addon-docs/blocks';
-import { useDarkMode } from 'storybook-dark-mode';
-import dark from '../themes/dark';
-import light from '../themes/light';
-
-/**
- * Custom Docs Container to support dark theme.
- *
- * @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/127#issuecomment-1070524402
- */
-export const DocsContainer = ({ children, context }) => {
-  const isDark = useDarkMode();
-
-  return (
-    <BaseContainer
-      context={{
-        ...context,
-        storyById: (id) => {
-          const storyContext = context.storyById(id);
-          return {
-            ...storyContext,
-            parameters: {
-              ...storyContext?.parameters,
-              docs: {
-                ...storyContext?.parameters?.docs,
-                theme: isDark ? dark : light,
-              },
-            },
-          };
-        },
-      }}
-    >
-      {children}
-    </BaseContainer>
-  );
-};
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index f36013c..47ea5a8 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,6 +1,6 @@
 import type { Decorator, Preview } from '@storybook/react';
 import { useDarkMode } from 'storybook-dark-mode';
-import { FC, ReactNode, useEffect } from 'react';
+import React, { FC, ReactNode, useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
 import {
   AckeeProvider,
@@ -9,10 +9,10 @@ import {
   ThemeProvider,
 } from '../src/utils/providers';
 import '../src/styles/globals.scss';
-import { DocsContainer } from './overrides/docs-container';
 import dark from './themes/dark';
 import light from './themes/light';
 import { useTheme } from '../src/utils/hooks';
+import { DocsContainer } from '@storybook/blocks';
 
 type ThemeWrapperProps = {
   children: ReactNode;
@@ -77,7 +77,13 @@ const preview: Preview = {
       stylePreview: true,
     },
     docs: {
-      container: DocsContainer,
+      container: ({ children, context }) => {
+        return (
+          <DocsContainer context={context} theme={useDarkMode() ? dark : light}>
+            {children}
+          </DocsContainer>
+        );
+      },
     },
   },
 };