diff --git a/.storybook/main.js b/.storybook/main.ts
similarity index 82%
rename from .storybook/main.js
rename to .storybook/main.ts
index bfd34362..72cf78ea 100644
--- a/.storybook/main.js
+++ b/.storybook/main.ts
@@ -1,4 +1,6 @@
-module.exports = {
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
 	stories: ["../src/**/*.mdx", "../src/**/*.stories.tsx"],
 
 	addons: [
@@ -7,22 +9,21 @@ module.exports = {
 		"@storybook/addon-a11y",
 		{
 			name: "@storybook/addon-styling-webpack",
-
 			options: {
 				rules: [
 					{
 						test: /\.css$/,
 						sideEffects: true,
 						use: [
-							require.resolve("style-loader"),
+							"style-loader",
 							{
-								loader: require.resolve("css-loader"),
+								loader: "css-loader",
 								options: {
 									importLoaders: 1,
 								},
 							},
 							{
-								loader: require.resolve("postcss-loader"),
+								loader: "postcss-loader",
 								options: {
 									implementation: require.resolve("postcss"),
 								},
@@ -57,3 +58,5 @@ module.exports = {
 
 	staticDirs: [{ from: "../src/assets", to: "/assets" }],
 };
+
+export default config;
diff --git a/.storybook/manager.js b/.storybook/manager.ts
similarity index 100%
rename from .storybook/manager.js
rename to .storybook/manager.ts
diff --git a/.storybook/preview.js b/.storybook/preview.tsx
similarity index 100%
rename from .storybook/preview.js
rename to .storybook/preview.tsx
diff --git a/.storybook/theme.js b/.storybook/theme.ts
similarity index 100%
rename from .storybook/theme.js
rename to .storybook/theme.ts