@storybook/nextjs 7.0.0-alpha.59 → 7.0.0-alpha.61

package/README.md

@@ -14,6 +14,7 @@
     - [Remote Images](#remote-images)
     - [Optimization](#optimization)
     - [AVIF](#avif)
+  - [Next.js Navigation](#nextjs-navigation)
   - [Next.js Routing](#nextjs-routing)
     - [Overriding defaults](#overriding-defaults)
     - [Global Defaults](#global-defaults)
@@ -38,7 +39,9 @@
 
 👉 [Next.js's Image Component](#nextjss-image-component)
 
-👉 [Next.js Routing](#nextjs-routing)
+👉 [Next.js Routing (next/router)](#nextjs-routing)
+
+👉 [Next.js Navigation (next/navigation)](#nextjs-navigation)
 
 👉 [Sass/Scss](#sassscss)
 
@@ -58,7 +61,7 @@
 
 ## Requirements
 
-- [Next.js](https://nextjs.org/) >= 9.x
+- [Next.js](https://nextjs.org/) >= 12.x
 - [Storybook](https://storybook.js.org/) >= 7.x
 
 ## Getting Started
@@ -167,22 +170,176 @@ export default function Home() {
 }
 ```
 
-#### Optimization
+#### AVIF
 
-All Next.js `Image`s are automatically [unoptimized](https://nextjs.org/docs/api-reference/next/image#unoptimized) for you.
+This format is not supported by this framework yet. Feel free to [open up an issue](https://github.com/storybookjs/storybook/issues) if this is something you want to see.
 
-If [placeholder="blur"](https://nextjs.org/docs/api-reference/next/image#placeholder) is used, the [blurDataURL](https://nextjs.org/docs/api-reference/next/image#blurdataurl) used is the [src](https://nextjs.org/docs/api-reference/next/image#src) of the image (thus effectively disabling the placeholder).
+### Next.js Navigation
 
-See [this issue](https://github.com/vercel/next.js/issues/18393) for more discussion on how Next.js `Image`s are handled for Storybook.
+Please note that [next/navigation](https://beta.nextjs.org/docs/upgrade-guide#step-5-migrating-routing-hooks) can only be used in components/pages of the `app` directory of Next.js v13 or higher.
 
-#### AVIF
+#### Set `nextjs.appDirectory` to `true`
 
-This format is not supported by this framework yet. Feel free to [open up an issue](https://github.com/storybookjs/storybook/issues) if this is something you want to see.
+If your story imports components that use `next/navigation`, you need to set the parameter `nextjs.appDirectory` to `true` in your Story:
+
+```js
+// SomeComponentThatUsesTheRouter.stories.js
+import SomeComponentThatUsesTheNavigation from './SomeComponentThatUsesTheNavigation';
+
+export default {
+  component: SomeComponentThatUsesTheNavigation,
+};
+
+// if you have the actions addon
+// you can click the links and see the route change events there
+export const Example = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+},
+```
+
+If your Next.js project uses the `app` directory for every page (in other words, it does not have a `pages` directory), you can set the parameter `nextjs.appDirectory` to `true` in the [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering) file to apply it to all stories.
+
+```js
+// .storybook/preview.js
+
+export const parameters = {
+  nextjs: {
+    appDirectory: true,
+  },
+};
+```
+
+The parameter `nextjs.appDirectory` defaults to `false` if not set.
+
+#### Overriding defaults
+
+Per-story overrides can be done by adding a `nextjs.navigation` property onto the story [parameters](https://storybook.js.org/docs/react/writing-stories/parameters). The framework will shallowly merge whatever you put here into the router.
+
+```js
+// SomeComponentThatUsesTheNavigation.stories.js
+import SomeComponentThatUsesTheNavigation from './SomeComponentThatUsesTheNavigation';
+
+export default {
+  component: SomeComponentThatUsesTheNavigation,
+};
+
+// if you have the actions addon
+// you can click the links and see the route change events there
+export const Example = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: '/some-default-path',
+        query: {
+          foo: 'bar',
+        },
+      },
+    },
+  },
+};
+```
+
+#### Global Defaults
+
+Global defaults can be set in [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering) and will be shallowly merged with the default router.
+
+```js
+// .storybook/preview.js
+
+export const parameters = {
+  nextjs: {
+    appDirectory: true,
+    navigation: {
+      pathname: '/some-default-path',
+      query: {
+        foo: 'bar',
+      },
+    },
+  },
+};
+```
+
+#### Default Navigation Context
+
+The default values on the stubbed navigation context are as follows:
+
+```ts
+const defaultNavigationContext = {
+  push(...args) {
+    action('nextNavigation.push')(...args);
+  },
+  replace(...args) {
+    action('nextNavigation.replace')(...args);
+  },
+  forward(...args) {
+    action('nextNavigation.forward')(...args);
+  },
+  back(...args) {
+    action('nextNavigation.back')(...args);
+  },
+  prefetch(...args) {
+    action('nextNavigation.prefetch')(...args);
+  },
+  refresh: () => {
+    action('nextNavigation.refresh')();
+  },
+  pathname: '/',
+  query: {},
+};
+```
+
+#### Actions Integration Caveats
+
+If you override a function, you lose the automatic action tab integration and have to build it out yourself.
+
+```js
+// .storybook/preview.js
+
+export const parameters = {
+  nextjs: {
+    appDirectory: true,
+    navigation: {
+      push() {
+        // The default implementation that logs the action into the action tab is lost
+      },
+    },
+  },
+};
+```
+
+Doing this yourself looks something like this (make sure you install the `@storybook/addon-actions` package):
+
+```js
+// .storybook/preview.js
+import { action } from '@storybook/addon-actions';
+
+export const parameters = {
+  nextjs: {
+    appDirectory: true,
+    navigation: {
+      push(...args) {
+        // custom logic can go here
+        // this logs to the actions tab
+        action('nextNavigation.push')(...args);
+        // return whatever you want here
+        return Promise.resolve(true);
+      },
+    },
+  },
+};
+```
 
 ### Next.js Routing
 
 [Next.js's router](https://nextjs.org/docs/routing/introduction) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the [Storybook actions tab](https://storybook.js.org/docs/react/essentials/actions) if you have the actions addon.
 
+You should only use `next/router` in the `pages` directory of Next.js v13 or higher. In the `app` directory, it is necessary to use `next/navigation`.
+
 #### Overriding defaults
 
 Per-story overrides can be done by adding a `nextRouter` property onto the story [parameters](https://storybook.js.org/docs/react/writing-stories/parameters). The framework will shallowly merge whatever you put here into the router.
@@ -199,11 +356,13 @@ export default {
 // you can click the links and see the route change events there
 export const Example = {
   parameters: {
-    nextRouter: {
-      path: '/profile/[id]',
-      asPath: '/profile/ryanclementshax',
-      query: {
-        id: 'ryanclementshax',
+    nextjs: {
+      router: {
+        path: '/profile/[id]',
+        asPath: '/profile/ryanclementshax',
+        query: {
+          id: 'ryanclementshax',
+        },
       },
     },
   },
@@ -215,13 +374,15 @@ export const Example = {
 Global defaults can be set in [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering) and will be shallowly merged with the default router.
 
 ```js
-// .storybook/main.js
+// .storybook/preview.js
 
 export const parameters = {
-  nextRouter: {
-    path: '/some-default-path',
-    asPath: '/some-default-path',
-    query: {},
+  nextjs: {
+    router: {
+      path: '/some-default-path',
+      asPath: '/some-default-path',
+      query: {},
+    },
   },
 };
 ```
@@ -232,44 +393,52 @@ The default values on the stubbed router are as follows (see [globals](https://s
 
 ```ts
 const defaultRouter = {
-  locale: context?.globals?.locale,
-  route: '/',
-  pathname: '/',
-  query: {},
-  asPath: '/',
-  push(...args: unknown[]) {
+  push(...args) {
     action('nextRouter.push')(...args);
     return Promise.resolve(true);
   },
-  replace(...args: unknown[]) {
+  replace(...args) {
     action('nextRouter.replace')(...args);
     return Promise.resolve(true);
   },
-  reload(...args: unknown[]) {
+  reload(...args) {
     action('nextRouter.reload')(...args);
   },
-  back(...args: unknown[]) {
+  back(...args) {
     action('nextRouter.back')(...args);
   },
-  prefetch(...args: unknown[]) {
+  forward() {
+    action('nextRouter.forward')();
+  },
+  prefetch(...args) {
     action('nextRouter.prefetch')(...args);
     return Promise.resolve();
   },
-  beforePopState(...args: unknown[]) {
+  beforePopState(...args) {
     action('nextRouter.beforePopState')(...args);
   },
   events: {
-    on(...args: unknown[]) {
+    on(...args) {
       action('nextRouter.events.on')(...args);
     },
-    off(...args: unknown[]) {
+    off(...args) {
       action('nextRouter.events.off')(...args);
     },
-    emit(...args: unknown[]) {
+    emit(...args) {
       action('nextRouter.events.emit')(...args);
     },
   },
+  // The locale should be configured [globally](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#globals)
+  locale: globals?.locale,
+  asPath: '/',
+  basePath: '/',
   isFallback: false,
+  isLocaleDomain: false,
+  isReady: true,
+  isPreview: false,
+  route: '/',
+  pathname: '/',
+  query: {},
 };
 ```
 
@@ -278,12 +447,14 @@ const defaultRouter = {
 If you override a function, you lose the automatic action tab integration and have to build it out yourself.
 
 ```js
-// .storybook/main.js
+// .storybook/preview.js
 
 export const parameters = {
-  nextRouter: {
-    push() {
-      // The default implementation that logs the action into the action tab is lost
+  nextjs: {
+    router: {
+      push() {
+        // The default implementation that logs the action into the action tab is lost
+      },
     },
   },
 };
@@ -292,17 +463,19 @@ export const parameters = {
 Doing this yourself looks something like this (make sure you install the `@storybook/addon-actions` package):
 
 ```js
-// .storybook/main.js
+// .storybook/preview.js
 import { action } from '@storybook/addon-actions';
 
 export const parameters = {
-  nextRouter: {
-    push(...args) {
-      // custom logic can go here
-      // this logs to the actions tab
-      action('nextRouter.push')(...args);
-      // return whatever you want here
-      return Promise.resolve(true);
+  nextjs: {
+    router: {
+      push(...args) {
+        // custom logic can go here
+        // this logs to the actions tab
+        action('nextRouter.push')(...args);
+        // return whatever you want here
+        return Promise.resolve(true);
+      },
     },
   },
 };
@@ -404,14 +577,6 @@ You can use your own babel config too. This is an example of how you can customi
 }
 ```
 
-If you use a monorepo, you may need to add the babel config yourself to your storybook project. Just add a babel config to your storybook project with the following contents to get started.
-
-```json
-{
-  "presets": ["next/babel"]
-}
-```
-
 ### Postcss
 
 Next.js lets you [customize postcss config](https://nextjs.org/docs/advanced-features/customizing-postcss-config#default-behavior). Thus this framework will automatically handle your postcss config for you.

package/dist/app-router-provider-5WPYJFG6.mjs

@@ -0,0 +1 @@
+import"./chunk-LAHENP5R.mjs";import React from"react";import{AppRouterContext}from"next/dist/shared/lib/app-router-context";import{PathnameContext,SearchParamsContext}from"next/dist/shared/lib/hooks-client-context";var AppRouterProvider=({children,action,routeParams})=>{let{pathname,query,...restRouteParams}=routeParams;return React.createElement(AppRouterContext.Provider,{value:{push(...args){action("nextNavigation.push")(...args)},replace(...args){action("nextNavigation.replace")(...args)},forward(...args){action("nextNavigation.forward")(...args)},back(...args){action("nextNavigation.back")(...args)},prefetch(...args){action("nextNavigation.prefetch")(...args)},refresh:()=>{action("nextNavigation.refresh")()},...restRouteParams}},React.createElement(SearchParamsContext.Provider,{value:new URLSearchParams(query)},React.createElement(PathnameContext.Provider,{value:pathname},children)))},app_router_provider_default=AppRouterProvider;export{app_router_provider_default as default};

package/dist/preset.d.ts

@@ -993,10 +993,6 @@ interface StorybookConfig {
          * Enable the step debugger functionality in Addon-interactions.
          */
         interactionsDebugger?: boolean;
-        /**
-         * Use Storybook 7.0 babel config scheme
-         */
-        babelModeV7?: boolean;
         /**
          * Filter args with a "target" on the type from the render function (EXPERIMENTAL)
          */

package/dist/preset.js

@@ -1,5 +1,5 @@
-"use strict";var Z=Object.create;var u=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var te=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var se=(e,t)=>{for(var o in t)u(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of oe(t))!re.call(e,s)&&s!==o&&u(e,s,{get:()=>t[s],enumerable:!(r=ee(t,s))||r.enumerable});return e};var i=(e,t,o)=>(o=e!=null?Z(te(e)):{},h(t||!e||!e.__esModule?u(o,"default",{value:e,enumerable:!0}):o,e)),ie=e=>h(u({},"__esModule",{value:!0}),e);var ye={};se(ye,{addons:()=>me,babel:()=>de,config:()=>ue,core:()=>le,frameworkOptions:()=>ge,webpackFinal:()=>xe});module.exports=ie(ye);var c=require("path"),Q=require("@babel/core"),Y=require("@storybook/core-common");var y=i(require("semver")),A=require("webpack");var x=i(require("path")),j=require("webpack"),R=require("next/constants"),P=i(require("find-up")),S=require("fs-extra"),I=i(require("ts-dedent")),E=require("url"),O=e=>{var t;(t=e.plugins)==null||t.push(new j.DefinePlugin({"process.env.__NEXT_VERSION":JSON.stringify(f())}))},f=()=>require(d("next/package.json")).version,ne=async e=>["mjs","js"].reduce(async(o,r)=>(await o||(o=(0,P.default)(`next.config.${r}`,{cwd:e})),o),Promise.resolve(void 0)),W=async({baseConfig:e={},nextConfigPath:t,configDir:o})=>{let r=t||await ne(o);if(!r||await(0,S.pathExists)(r)===!1)throw new Error(I.default`
+"use strict";var Z=Object.create;var x=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var te=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var se=(e,t)=>{for(var o in t)x(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of oe(t))!re.call(e,s)&&s!==o&&x(e,s,{get:()=>t[s],enumerable:!(r=ee(t,s))||r.enumerable});return e};var n=(e,t,o)=>(o=e!=null?Z(te(e)):{},h(t||!e||!e.__esModule?x(o,"default",{value:e,enumerable:!0}):o,e)),ie=e=>h(x({},"__esModule",{value:!0}),e);var ye={};se(ye,{addons:()=>me,babel:()=>de,config:()=>ue,core:()=>ge,frameworkOptions:()=>le,webpackFinal:()=>xe});module.exports=ie(ye);var c=require("path"),Q=require("@babel/core"),Y=require("@storybook/core-common");var b=n(require("semver")),V=require("webpack");var k=n(require("path")),R=require("webpack"),j=require("next/constants"),P=n(require("find-up")),E=require("fs-extra"),S=n(require("ts-dedent")),I=require("url"),O=e=>{var t;(t=e.plugins)==null||t.push(new R.DefinePlugin({"process.env.__NEXT_VERSION":JSON.stringify(f())}))},f=()=>require(y("next/package.json")).version,ne=async e=>["mjs","js"].reduce(async(o,r)=>(await o||(o=(0,P.default)(`next.config.${r}`,{cwd:e})),o),Promise.resolve(void 0)),_=async({baseConfig:e={},nextConfigPath:t,configDir:o})=>{let r=t||await ne(o);if(!r||await(0,E.pathExists)(r)===!1)throw new Error(S.default`
         Could not find or resolve your Next config file. Please provide the next config file path as a framework option.
 
         More info: https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#options
-      `);let s=await import((0,E.pathToFileURL)(r).href),p=typeof s=="function"?s(R.PHASE_DEVELOPMENT_SERVER,{defaultConfig:e}):s;return p.default||p},n=(e,t,o)=>{e.resolve??={},e.resolve.alias??={};let r=e.resolve.alias,s=d(`${o??t}`);Array.isArray(r)?r.push({name:t,alias:s}):r[t]=s},d=e=>{let t=require.resolve(e,{paths:[x.default.resolve()]}),r=t.lastIndexOf(e.replace(/\//g,x.default.sep))+e.length;return t.substring(0,r)};var F=async({baseConfig:e,nextConfigPath:t,configDir:o})=>{let r=await W({baseConfig:e,nextConfigPath:t,configDir:o});return n(e,"next/config"),pe(e,r),r},_=f(),pe=(e,t)=>{var s,p;let o={"process.env.__NEXT_RUNTIME_CONFIG":JSON.stringify({serverRuntimeConfig:{},publicRuntimeConfig:t.publicRuntimeConfig})},r=(s=t.experimental)==null?void 0:s.newNextLinkBehavior;(y.default.gte(_,"13.0.0")&&r!==!1||y.default.gte(_,"12.2.0")&&r)&&(o["process.env.__NEXT_NEW_LINK_BEHAVIOR"]=!0),(p=e.plugins)==null||p.push(new A.DefinePlugin(o))};var k=require("next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent"),b=require("next/dist/build/webpack/config/blocks/css/loaders/file-resolve"),$=i(require("semver"));var D=(e,t)=>{var r,s,p;let o=(r=e.module)==null?void 0:r.rules;o==null||o.forEach((m,g)=>{typeof m!="string"&&m.test instanceof RegExp&&m.test.test("test.css")&&(o[g]={test:/\.css$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:1,...V(t),modules:{auto:!0,getLocalIdent:k.getCssModuleLocalIdent}}},"postcss-loader"]})}),o==null||o.push({test:/\.(scss|sass)$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:3,...V(t),modules:{auto:!0,getLocalIdent:k.getCssModuleLocalIdent}}},"postcss-loader","resolve-url-loader",{loader:"sass-loader",options:{sourceMap:!0,sassOptions:t.sassOptions,additionalData:((s=t.sassOptions)==null?void 0:s.prependData)||((p=t.sassOptions)==null?void 0:p.additionalData)}}]})},V=e=>ae()?{url:{filter:L(e)},import:{filter:q(e)}}:{url:L(e),import:q(e)},L=e=>(t,o)=>{var r;return(0,b.cssFileResolve)(t,o,(r=e.experimental)==null?void 0:r.urlImports)},q=e=>(t,o,r)=>{var s;return(0,b.cssFileResolve)(typeof t=="string"?t:t.url,r,(s=e.experimental)==null?void 0:s.urlImports)},ae=()=>{try{let e=require(d("css-loader/package.json")).version;return $.default.gte(e,"6.0.0")}catch{return!1}};var T=i(require("tsconfig-paths-webpack-plugin")),M=require("tsconfig-paths"),U=e=>{let t=(0,M.loadConfig)();t.resultType==="failed"||!t.baseUrl||(e.resolve??={},e.resolve.plugins??=[],e.resolve.plugins.push(new T.default({configFile:t.configFileAbsolutePath,extensions:[".js",".jsx",".ts",".tsx"]})))};var B=i(require("semver"));var J=e=>{let t=fe();n(e,t)},fe=()=>{let e=f();return B.default.gte(e,"11.1.0")?"next/dist/shared/lib/router-context":"next/dist/next-server/lib/router-context"};var X=i(require("semver"));var H=e=>{let t=f();X.default.gte(t,"12.0.0")?n(e,"styled-jsx"):(n(e,"styled-jsx/babel"),n(e,"styled-jsx/css"),n(e,"styled-jsx/macro"),n(e,"styled-jsx/server"),n(e,"styled-jsx/style"),n(e,"styled-jsx/webpack"))};var G=i(require("semver"));var K=e=>{ce(e),n(e,"next/image")},ce=e=>{var s,p,m;let t=f();if(G.default.lt(t,"11.0.0"))return;let o=(s=e.module)==null?void 0:s.rules,r=o==null?void 0:o.find(g=>typeof g!="string"&&g.test instanceof RegExp&&g.test.test("test.jpg"));!r||(r.test=/\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,o==null||o.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:{not:/\.(css|scss|sass)$/},use:[{loader:require.resolve("@storybook/nextjs/next-image-loader-stub.js"),options:{filename:(p=r.generator)==null?void 0:p.filename}}]}),o==null||o.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:/\.(css|scss|sass)$/,type:"asset/resource",generator:{filename:(m=r.generator)==null?void 0:m.filename}}))};var v=i(require("semver")),w=require("webpack");function z(e){let t=f(),o=v.default.satisfies(t,"~12"),r=v.default.satisfies(t,"~13");e.plugins=e.plugins??[],r||e.plugins.push(new w.IgnorePlugin({resourceRegExp:/next\/legacy\/image$/})),o||e.plugins.push(new w.IgnorePlugin({resourceRegExp:/next\/future\/image$/}))}var me=[(0,c.dirname)(require.resolve((0,c.join)("@storybook/preset-react-webpack","package.json"))),(0,c.dirname)(require.resolve((0,c.join)("@storybook/builder-webpack5","package.json")))],C={},ge=async(e,t)=>{let o=await t.presets.apply("framework");return typeof o=="string"?{name:o,options:C}:typeof o>"u"?{name:require.resolve("@storybook/nextjs"),options:C}:{name:o.name,options:{...C,...o.options}}},le=async(e,t)=>{let o=await t.presets.apply("framework");return{...e,builder:{name:(0,c.dirname)(require.resolve((0,c.join)("@storybook/builder-webpack5","package.json"))),options:typeof o=="string"?{}:o.options.builder||{}},renderer:(0,c.dirname)(require.resolve((0,c.join)("@storybook/react","package.json")))}},ue=(e=[])=>[...e,require.resolve("@storybook/nextjs/preview.js")],de=async e=>{var m,g,N;let t=(0,Q.loadPartialConfig)({...e,filename:`${(0,Y.getProjectRoot)()}/__fake__.js`}),o=t==null?void 0:t.options,r=a=>typeof a=="object"&&a!==null&&"file"in a;((m=o==null?void 0:o.presets)==null?void 0:m.find(a=>{var l;return Array.isArray(a)&&a[0]==="next/babel"||a==="next/babel"||r(a)&&((l=a.file)==null?void 0:l.request)==="next/babel"}))||(g=o==null?void 0:o.presets)==null||g.push("next/babel");let p=(N=o==null?void 0:o.presets)==null?void 0:N.filter(a=>{var l;return!(r(a)&&((l=a.file)==null?void 0:l.request)===require.resolve("@babel/preset-react"))});return{...o,presets:p,babelrc:!1,configFile:!1}},xe=async(e,t)=>{let o=await t.presets.apply("frameworkOptions"),{options:{nextConfigPath:r}={}}=o,s=await F({baseConfig:e,nextConfigPath:r,configDir:t.configDir});return z(e),O(e),U(e),D(e,s),K(e),J(e),H(e),e};0&&(module.exports={addons,babel,config,core,frameworkOptions,webpackFinal});
+      `);let s=await import((0,I.pathToFileURL)(r).href),i=typeof s=="function"?s(j.PHASE_DEVELOPMENT_SERVER,{defaultConfig:e}):s;return i.default||i},p=(e,t,o)=>{e.resolve??={},e.resolve.alias??={};let r=e.resolve.alias,s=y(`${o??t}`);Array.isArray(r)?r.push({name:t,alias:s}):r[t]=s},y=e=>{let t=require.resolve(e,{paths:[k.default.resolve()]}),r=t.lastIndexOf(e.replace(/\//g,k.default.sep))+e.length;return t.substring(0,r)};var A=async({baseConfig:e,nextConfigPath:t,configDir:o})=>{let r=await _({baseConfig:e,nextConfigPath:t,configDir:o});return p(e,"next/config"),pe(e,r),r},W=f(),pe=(e,t)=>{var s,i;let o={"process.env.__NEXT_RUNTIME_CONFIG":JSON.stringify({serverRuntimeConfig:{},publicRuntimeConfig:t.publicRuntimeConfig})},r=(s=t.experimental)==null?void 0:s.newNextLinkBehavior;b.default.gte(W,"13.0.0")&&b.default.lt(W,"13.0.6")&&r!==!1?o["process.env.__NEXT_NEW_LINK_BEHAVIOR"]=!0:o["process.env.__NEXT_NEW_LINK_BEHAVIOR"]=r,(i=e.plugins)==null||i.push(new V.DefinePlugin(o))};var v=require("next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent"),w=require("next/dist/build/webpack/config/blocks/css/loaders/file-resolve"),$=n(require("semver"));var q=(e,t)=>{var r,s,i;let o=(r=e.module)==null?void 0:r.rules;o==null||o.forEach((m,l)=>{typeof m!="string"&&m.test instanceof RegExp&&m.test.test("test.css")&&(o[l]={test:/\.css$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:1,...F(t),modules:{auto:!0,getLocalIdent:v.getCssModuleLocalIdent}}},"postcss-loader"]})}),o==null||o.push({test:/\.(scss|sass)$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:3,...F(t),modules:{auto:!0,getLocalIdent:v.getCssModuleLocalIdent}}},"postcss-loader","resolve-url-loader",{loader:"sass-loader",options:{sourceMap:!0,sassOptions:t.sassOptions,additionalData:((s=t.sassOptions)==null?void 0:s.prependData)||((i=t.sassOptions)==null?void 0:i.additionalData)}}]})},F=e=>ae()?{url:{filter:L(e)},import:{filter:T(e)}}:{url:L(e),import:T(e)},L=e=>(t,o)=>{var r;return(0,w.cssFileResolve)(t,o,(r=e.experimental)==null?void 0:r.urlImports)},T=e=>(t,o,r)=>{var s;return(0,w.cssFileResolve)(typeof t=="string"?t:t.url,r,(s=e.experimental)==null?void 0:s.urlImports)},ae=()=>{try{let e=require(y("css-loader/package.json")).version;return $.default.gte(e,"6.0.0")}catch{return!1}};var D=n(require("tsconfig-paths-webpack-plugin")),M=require("tsconfig-paths"),B=e=>{let t=(0,M.loadConfig)();t.resultType==="failed"||!t.baseUrl||(e.resolve??={},e.resolve.plugins??=[],e.resolve.plugins.push(new D.default({configFile:t.configFileAbsolutePath,extensions:[".js",".jsx",".ts",".tsx"]})))};var U=n(require("semver"));var J=e=>{let t=fe();p(e,t)},fe=()=>{let e=f();return U.default.gte(e,"11.1.0")?"next/dist/shared/lib/router-context":"next/dist/next-server/lib/router-context"};var X=n(require("semver"));var H=e=>{let t=f();X.default.gte(t,"12.0.0")?p(e,"styled-jsx"):(p(e,"styled-jsx/babel"),p(e,"styled-jsx/css"),p(e,"styled-jsx/macro"),p(e,"styled-jsx/server"),p(e,"styled-jsx/style"),p(e,"styled-jsx/webpack"))};var K=n(require("semver"));var G=e=>{ce(e),p(e,"next/image")},ce=e=>{var s,i,m;let t=f();if(K.default.lt(t,"11.0.0"))return;let o=(s=e.module)==null?void 0:s.rules,r=o==null?void 0:o.find(l=>typeof l!="string"&&l.test instanceof RegExp&&l.test.test("test.jpg"));!r||(r.test=/\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,o==null||o.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:{not:/\.(css|scss|sass)$/},use:[{loader:require.resolve("@storybook/nextjs/next-image-loader-stub.js"),options:{filename:(i=r.generator)==null?void 0:i.filename}}]}),o==null||o.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:/\.(css|scss|sass)$/,type:"asset/resource",generator:{filename:(m=r.generator)==null?void 0:m.filename}}))};var u=n(require("semver")),d=require("webpack");function z(e){let t=f(),o=u.default.satisfies(t,"~12"),r=u.default.satisfies(t,"~13"),s=u.default.lt(t,"13.0.0"),i=u.default.lt(t,"12.0.0");e.plugins=e.plugins??[],r||e.plugins.push(new d.IgnorePlugin({resourceRegExp:/next\/legacy\/image$/})),o||e.plugins.push(new d.IgnorePlugin({resourceRegExp:/next\/future\/image$/})),s&&e.plugins.push(new d.IgnorePlugin({resourceRegExp:/next\/dist\/shared\/lib\/hooks-client-context$/})),i&&e.plugins.push(new d.IgnorePlugin({resourceRegExp:/next\/dist\/shared\/lib\/app-router-context$/}))}var me=[(0,c.dirname)(require.resolve((0,c.join)("@storybook/preset-react-webpack","package.json"))),(0,c.dirname)(require.resolve((0,c.join)("@storybook/builder-webpack5","package.json")))],C={},le=async(e,t)=>{let o=await t.presets.apply("framework");return typeof o=="string"?{name:o,options:C}:typeof o>"u"?{name:require.resolve("@storybook/nextjs"),options:C}:{name:o.name,options:{...C,...o.options}}},ge=async(e,t)=>{let o=await t.presets.apply("framework");return{...e,builder:{name:(0,c.dirname)(require.resolve((0,c.join)("@storybook/builder-webpack5","package.json"))),options:typeof o=="string"?{}:o.options.builder||{}},renderer:(0,c.dirname)(require.resolve((0,c.join)("@storybook/react","package.json")))}},ue=(e=[])=>[...e,require.resolve("@storybook/nextjs/preview.js")],de=async e=>{var m,l,N;let t=(0,Q.loadPartialConfig)({...e,filename:`${(0,Y.getProjectRoot)()}/__fake__.js`}),o=t==null?void 0:t.options,r=a=>typeof a=="object"&&a!==null&&"file"in a;((m=o==null?void 0:o.presets)==null?void 0:m.find(a=>{var g;return Array.isArray(a)&&a[0]==="next/babel"||a==="next/babel"||r(a)&&((g=a.file)==null?void 0:g.request)==="next/babel"}))||(l=o==null?void 0:o.presets)==null||l.push("next/babel");let i=(N=o==null?void 0:o.presets)==null?void 0:N.filter(a=>{var g;return!(r(a)&&((g=a.file)==null?void 0:g.request)===require.resolve("@babel/preset-react"))});return{...o,presets:i,babelrc:!1,configFile:!1}},xe=async(e,t)=>{let o=await t.presets.apply("frameworkOptions"),{options:{nextConfigPath:r}={}}=o,s=await A({baseConfig:e,nextConfigPath:r,configDir:t.configDir});return z(e),O(e),B(e),q(e,s),G(e),J(e),H(e),e};0&&(module.exports={addons,babel,config,core,frameworkOptions,webpackFinal});

package/dist/preset.mjs

@@ -2,4 +2,4 @@ import{__require}from"./chunk-LAHENP5R.mjs";import{dirname,join}from"path";impor
         Could not find or resolve your Next config file. Please provide the next config file path as a framework option.
 
         More info: https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#options
-      `);let nextConfigExport=await import(pathToFileURL(nextConfigFile).href),nextConfig=typeof nextConfigExport=="function"?nextConfigExport(PHASE_DEVELOPMENT_SERVER,{defaultConfig:baseConfig}):nextConfigExport;return nextConfig.default||nextConfig},addScopedAlias=(baseConfig,name,alias)=>{baseConfig.resolve??={},baseConfig.resolve.alias??={};let aliasConfig=baseConfig.resolve.alias,scopedAlias=scopedResolve(`${alias??name}`);Array.isArray(aliasConfig)?aliasConfig.push({name,alias:scopedAlias}):aliasConfig[name]=scopedAlias},scopedResolve=id=>{let scopedModulePath=__require.resolve(id,{paths:[path.resolve()]}),beginningOfMainScriptPath=scopedModulePath.lastIndexOf(id.replace(/\//g,path.sep))+id.length;return scopedModulePath.substring(0,beginningOfMainScriptPath)};var configureConfig=async({baseConfig,nextConfigPath,configDir})=>{let nextConfig=await resolveNextConfig({baseConfig,nextConfigPath,configDir});return addScopedAlias(baseConfig,"next/config"),setupRuntimeConfig(baseConfig,nextConfig),nextConfig},version=getNextjsVersion(),setupRuntimeConfig=(baseConfig,nextConfig)=>{let definePluginConfig={"process.env.__NEXT_RUNTIME_CONFIG":JSON.stringify({serverRuntimeConfig:{},publicRuntimeConfig:nextConfig.publicRuntimeConfig})},newNextLinkBehavior=nextConfig.experimental?.newNextLinkBehavior;(semver.gte(version,"13.0.0")&&newNextLinkBehavior!==!1||semver.gte(version,"12.2.0")&&newNextLinkBehavior)&&(definePluginConfig["process.env.__NEXT_NEW_LINK_BEHAVIOR"]=!0),baseConfig.plugins?.push(new DefinePlugin2(definePluginConfig))};import{getCssModuleLocalIdent}from"next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent";import{cssFileResolve}from"next/dist/build/webpack/config/blocks/css/loaders/file-resolve";import semver2 from"semver";var configureCss=(baseConfig,nextConfig)=>{let rules=baseConfig.module?.rules;rules?.forEach((rule,i)=>{typeof rule!="string"&&rule.test instanceof RegExp&&rule.test.test("test.css")&&(rules[i]={test:/\.css$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:1,...getImportAndUrlCssLoaderOptions(nextConfig),modules:{auto:!0,getLocalIdent:getCssModuleLocalIdent}}},"postcss-loader"]})}),rules?.push({test:/\.(scss|sass)$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:3,...getImportAndUrlCssLoaderOptions(nextConfig),modules:{auto:!0,getLocalIdent:getCssModuleLocalIdent}}},"postcss-loader","resolve-url-loader",{loader:"sass-loader",options:{sourceMap:!0,sassOptions:nextConfig.sassOptions,additionalData:nextConfig.sassOptions?.prependData||nextConfig.sassOptions?.additionalData}}]})},getImportAndUrlCssLoaderOptions=nextConfig=>isCssLoaderV6()?{url:{filter:getUrlResolver(nextConfig)},import:{filter:getImportResolver(nextConfig)}}:{url:getUrlResolver(nextConfig),import:getImportResolver(nextConfig)},getUrlResolver=nextConfig=>(url,resourcePath)=>cssFileResolve(url,resourcePath,nextConfig.experimental?.urlImports),getImportResolver=nextConfig=>(url,_,resourcePath)=>cssFileResolve(typeof url=="string"?url:url.url,resourcePath,nextConfig.experimental?.urlImports),isCssLoaderV6=()=>{try{let cssLoaderVersion=__require(scopedResolve("css-loader/package.json")).version;return semver2.gte(cssLoaderVersion,"6.0.0")}catch{return!1}};import TsconfigPathsPlugin from"tsconfig-paths-webpack-plugin";import{loadConfig}from"tsconfig-paths";var configureImports=baseConfig=>{let configLoadResult=loadConfig();configLoadResult.resultType==="failed"||!configLoadResult.baseUrl||(baseConfig.resolve??={},baseConfig.resolve.plugins??=[],baseConfig.resolve.plugins.push(new TsconfigPathsPlugin({configFile:configLoadResult.configFileAbsolutePath,extensions:[".js",".jsx",".ts",".tsx"]})))};import semver3 from"semver";var configureRouting=baseConfig=>{let routerContextPath=getRouterContextPath();addScopedAlias(baseConfig,routerContextPath)},getRouterContextPath=()=>{let version2=getNextjsVersion();return semver3.gte(version2,"11.1.0")?"next/dist/shared/lib/router-context":"next/dist/next-server/lib/router-context"};import semver4 from"semver";var configureStyledJsx=baseConfig=>{let version2=getNextjsVersion();semver4.gte(version2,"12.0.0")?addScopedAlias(baseConfig,"styled-jsx"):(addScopedAlias(baseConfig,"styled-jsx/babel"),addScopedAlias(baseConfig,"styled-jsx/css"),addScopedAlias(baseConfig,"styled-jsx/macro"),addScopedAlias(baseConfig,"styled-jsx/server"),addScopedAlias(baseConfig,"styled-jsx/style"),addScopedAlias(baseConfig,"styled-jsx/webpack"))};import semver5 from"semver";var configureImages=baseConfig=>{configureStaticImageImport(baseConfig),addScopedAlias(baseConfig,"next/image")},configureStaticImageImport=baseConfig=>{let version2=getNextjsVersion();if(semver5.lt(version2,"11.0.0"))return;let rules=baseConfig.module?.rules,assetRule=rules?.find(rule=>typeof rule!="string"&&rule.test instanceof RegExp&&rule.test.test("test.jpg"));!assetRule||(assetRule.test=/\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,rules?.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:{not:/\.(css|scss|sass)$/},use:[{loader:__require.resolve("@storybook/nextjs/next-image-loader-stub.js"),options:{filename:assetRule.generator?.filename}}]}),rules?.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:/\.(css|scss|sass)$/,type:"asset/resource",generator:{filename:assetRule.generator?.filename}}))};import semver6 from"semver";import{IgnorePlugin}from"webpack";function configureNextImport(baseConfig){let nextJSVersion=getNextjsVersion(),isNext12=semver6.satisfies(nextJSVersion,"~12"),isNext13=semver6.satisfies(nextJSVersion,"~13");baseConfig.plugins=baseConfig.plugins??[],isNext13||baseConfig.plugins.push(new IgnorePlugin({resourceRegExp:/next\/legacy\/image$/})),isNext12||baseConfig.plugins.push(new IgnorePlugin({resourceRegExp:/next\/future\/image$/}))}var addons=[dirname(__require.resolve(join("@storybook/preset-react-webpack","package.json"))),dirname(__require.resolve(join("@storybook/builder-webpack5","package.json")))],defaultFrameworkOptions={},frameworkOptions=async(_,options)=>{let config2=await options.presets.apply("framework");return typeof config2=="string"?{name:config2,options:defaultFrameworkOptions}:typeof config2>"u"?{name:__require.resolve("@storybook/nextjs"),options:defaultFrameworkOptions}:{name:config2.name,options:{...defaultFrameworkOptions,...config2.options}}},core=async(config2,options)=>{let framework=await options.presets.apply("framework");return{...config2,builder:{name:dirname(__require.resolve(join("@storybook/builder-webpack5","package.json"))),options:typeof framework=="string"?{}:framework.options.builder||{}},renderer:dirname(__require.resolve(join("@storybook/react","package.json")))}},config=(entry=[])=>[...entry,__require.resolve("@storybook/nextjs/preview.js")],babel=async baseConfig=>{let options=loadPartialConfig({...baseConfig,filename:`${getProjectRoot()}/__fake__.js`})?.options,isPresetConfigItem=preset=>typeof preset=="object"&&preset!==null&&"file"in preset;options?.presets?.find(preset=>Array.isArray(preset)&&preset[0]==="next/babel"||preset==="next/babel"||isPresetConfigItem(preset)&&preset.file?.request==="next/babel")||options?.presets?.push("next/babel");let presets=options?.presets?.filter(preset=>!(isPresetConfigItem(preset)&&preset.file?.request===__require.resolve("@babel/preset-react")));return{...options,presets,babelrc:!1,configFile:!1}},webpackFinal=async(baseConfig,options)=>{let frameworkOptions2=await options.presets.apply("frameworkOptions"),{options:{nextConfigPath}={}}=frameworkOptions2,nextConfig=await configureConfig({baseConfig,nextConfigPath,configDir:options.configDir});return configureNextImport(baseConfig),configureRuntimeNextjsVersionResolution(baseConfig),configureImports(baseConfig),configureCss(baseConfig,nextConfig),configureImages(baseConfig),configureRouting(baseConfig),configureStyledJsx(baseConfig),baseConfig};export{addons,babel,config,core,frameworkOptions,webpackFinal};
+      `);let nextConfigExport=await import(pathToFileURL(nextConfigFile).href),nextConfig=typeof nextConfigExport=="function"?nextConfigExport(PHASE_DEVELOPMENT_SERVER,{defaultConfig:baseConfig}):nextConfigExport;return nextConfig.default||nextConfig},addScopedAlias=(baseConfig,name,alias)=>{baseConfig.resolve??={},baseConfig.resolve.alias??={};let aliasConfig=baseConfig.resolve.alias,scopedAlias=scopedResolve(`${alias??name}`);Array.isArray(aliasConfig)?aliasConfig.push({name,alias:scopedAlias}):aliasConfig[name]=scopedAlias},scopedResolve=id=>{let scopedModulePath=__require.resolve(id,{paths:[path.resolve()]}),beginningOfMainScriptPath=scopedModulePath.lastIndexOf(id.replace(/\//g,path.sep))+id.length;return scopedModulePath.substring(0,beginningOfMainScriptPath)};var configureConfig=async({baseConfig,nextConfigPath,configDir})=>{let nextConfig=await resolveNextConfig({baseConfig,nextConfigPath,configDir});return addScopedAlias(baseConfig,"next/config"),setupRuntimeConfig(baseConfig,nextConfig),nextConfig},version=getNextjsVersion(),setupRuntimeConfig=(baseConfig,nextConfig)=>{let definePluginConfig={"process.env.__NEXT_RUNTIME_CONFIG":JSON.stringify({serverRuntimeConfig:{},publicRuntimeConfig:nextConfig.publicRuntimeConfig})},newNextLinkBehavior=nextConfig.experimental?.newNextLinkBehavior;semver.gte(version,"13.0.0")&&semver.lt(version,"13.0.6")&&newNextLinkBehavior!==!1?definePluginConfig["process.env.__NEXT_NEW_LINK_BEHAVIOR"]=!0:definePluginConfig["process.env.__NEXT_NEW_LINK_BEHAVIOR"]=newNextLinkBehavior,baseConfig.plugins?.push(new DefinePlugin2(definePluginConfig))};import{getCssModuleLocalIdent}from"next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent";import{cssFileResolve}from"next/dist/build/webpack/config/blocks/css/loaders/file-resolve";import semver2 from"semver";var configureCss=(baseConfig,nextConfig)=>{let rules=baseConfig.module?.rules;rules?.forEach((rule,i)=>{typeof rule!="string"&&rule.test instanceof RegExp&&rule.test.test("test.css")&&(rules[i]={test:/\.css$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:1,...getImportAndUrlCssLoaderOptions(nextConfig),modules:{auto:!0,getLocalIdent:getCssModuleLocalIdent}}},"postcss-loader"]})}),rules?.push({test:/\.(scss|sass)$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:3,...getImportAndUrlCssLoaderOptions(nextConfig),modules:{auto:!0,getLocalIdent:getCssModuleLocalIdent}}},"postcss-loader","resolve-url-loader",{loader:"sass-loader",options:{sourceMap:!0,sassOptions:nextConfig.sassOptions,additionalData:nextConfig.sassOptions?.prependData||nextConfig.sassOptions?.additionalData}}]})},getImportAndUrlCssLoaderOptions=nextConfig=>isCssLoaderV6()?{url:{filter:getUrlResolver(nextConfig)},import:{filter:getImportResolver(nextConfig)}}:{url:getUrlResolver(nextConfig),import:getImportResolver(nextConfig)},getUrlResolver=nextConfig=>(url,resourcePath)=>cssFileResolve(url,resourcePath,nextConfig.experimental?.urlImports),getImportResolver=nextConfig=>(url,_,resourcePath)=>cssFileResolve(typeof url=="string"?url:url.url,resourcePath,nextConfig.experimental?.urlImports),isCssLoaderV6=()=>{try{let cssLoaderVersion=__require(scopedResolve("css-loader/package.json")).version;return semver2.gte(cssLoaderVersion,"6.0.0")}catch{return!1}};import TsconfigPathsPlugin from"tsconfig-paths-webpack-plugin";import{loadConfig}from"tsconfig-paths";var configureImports=baseConfig=>{let configLoadResult=loadConfig();configLoadResult.resultType==="failed"||!configLoadResult.baseUrl||(baseConfig.resolve??={},baseConfig.resolve.plugins??=[],baseConfig.resolve.plugins.push(new TsconfigPathsPlugin({configFile:configLoadResult.configFileAbsolutePath,extensions:[".js",".jsx",".ts",".tsx"]})))};import semver3 from"semver";var configureRouting=baseConfig=>{let routerContextPath=getRouterContextPath();addScopedAlias(baseConfig,routerContextPath)},getRouterContextPath=()=>{let version2=getNextjsVersion();return semver3.gte(version2,"11.1.0")?"next/dist/shared/lib/router-context":"next/dist/next-server/lib/router-context"};import semver4 from"semver";var configureStyledJsx=baseConfig=>{let version2=getNextjsVersion();semver4.gte(version2,"12.0.0")?addScopedAlias(baseConfig,"styled-jsx"):(addScopedAlias(baseConfig,"styled-jsx/babel"),addScopedAlias(baseConfig,"styled-jsx/css"),addScopedAlias(baseConfig,"styled-jsx/macro"),addScopedAlias(baseConfig,"styled-jsx/server"),addScopedAlias(baseConfig,"styled-jsx/style"),addScopedAlias(baseConfig,"styled-jsx/webpack"))};import semver5 from"semver";var configureImages=baseConfig=>{configureStaticImageImport(baseConfig),addScopedAlias(baseConfig,"next/image")},configureStaticImageImport=baseConfig=>{let version2=getNextjsVersion();if(semver5.lt(version2,"11.0.0"))return;let rules=baseConfig.module?.rules,assetRule=rules?.find(rule=>typeof rule!="string"&&rule.test instanceof RegExp&&rule.test.test("test.jpg"));!assetRule||(assetRule.test=/\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,rules?.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:{not:/\.(css|scss|sass)$/},use:[{loader:__require.resolve("@storybook/nextjs/next-image-loader-stub.js"),options:{filename:assetRule.generator?.filename}}]}),rules?.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:/\.(css|scss|sass)$/,type:"asset/resource",generator:{filename:assetRule.generator?.filename}}))};import semver6 from"semver";import{IgnorePlugin}from"webpack";function configureNextImport(baseConfig){let nextJSVersion=getNextjsVersion(),isNext12=semver6.satisfies(nextJSVersion,"~12"),isNext13=semver6.satisfies(nextJSVersion,"~13"),isNextVersionSmallerThan13=semver6.lt(nextJSVersion,"13.0.0"),isNextVersionSmallerThan12=semver6.lt(nextJSVersion,"12.0.0");baseConfig.plugins=baseConfig.plugins??[],isNext13||baseConfig.plugins.push(new IgnorePlugin({resourceRegExp:/next\/legacy\/image$/})),isNext12||baseConfig.plugins.push(new IgnorePlugin({resourceRegExp:/next\/future\/image$/})),isNextVersionSmallerThan13&&baseConfig.plugins.push(new IgnorePlugin({resourceRegExp:/next\/dist\/shared\/lib\/hooks-client-context$/})),isNextVersionSmallerThan12&&baseConfig.plugins.push(new IgnorePlugin({resourceRegExp:/next\/dist\/shared\/lib\/app-router-context$/}))}var addons=[dirname(__require.resolve(join("@storybook/preset-react-webpack","package.json"))),dirname(__require.resolve(join("@storybook/builder-webpack5","package.json")))],defaultFrameworkOptions={},frameworkOptions=async(_,options)=>{let config2=await options.presets.apply("framework");return typeof config2=="string"?{name:config2,options:defaultFrameworkOptions}:typeof config2>"u"?{name:__require.resolve("@storybook/nextjs"),options:defaultFrameworkOptions}:{name:config2.name,options:{...defaultFrameworkOptions,...config2.options}}},core=async(config2,options)=>{let framework=await options.presets.apply("framework");return{...config2,builder:{name:dirname(__require.resolve(join("@storybook/builder-webpack5","package.json"))),options:typeof framework=="string"?{}:framework.options.builder||{}},renderer:dirname(__require.resolve(join("@storybook/react","package.json")))}},config=(entry=[])=>[...entry,__require.resolve("@storybook/nextjs/preview.js")],babel=async baseConfig=>{let options=loadPartialConfig({...baseConfig,filename:`${getProjectRoot()}/__fake__.js`})?.options,isPresetConfigItem=preset=>typeof preset=="object"&&preset!==null&&"file"in preset;options?.presets?.find(preset=>Array.isArray(preset)&&preset[0]==="next/babel"||preset==="next/babel"||isPresetConfigItem(preset)&&preset.file?.request==="next/babel")||options?.presets?.push("next/babel");let presets=options?.presets?.filter(preset=>!(isPresetConfigItem(preset)&&preset.file?.request===__require.resolve("@babel/preset-react")));return{...options,presets,babelrc:!1,configFile:!1}},webpackFinal=async(baseConfig,options)=>{let frameworkOptions2=await options.presets.apply("frameworkOptions"),{options:{nextConfigPath}={}}=frameworkOptions2,nextConfig=await configureConfig({baseConfig,nextConfigPath,configDir:options.configDir});return configureNextImport(baseConfig),configureRuntimeNextjsVersionResolution(baseConfig),configureImports(baseConfig),configureCss(baseConfig,nextConfig),configureImages(baseConfig),configureRouting(baseConfig),configureStyledJsx(baseConfig),baseConfig};export{addons,babel,config,core,frameworkOptions,webpackFinal};

package/dist/preview.js

@@ -1,10 +1,10 @@
-"use strict";var G=Object.create;var _=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var w=(t,r)=>()=>(r||t((r={exports:{}}).exports,r),r.exports),Y=(t,r)=>{for(var i in r)_(t,i,{get:r[i],enumerable:!0})},j=(t,r,i,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of K(r))!W.call(t,n)&&n!==i&&_(t,n,{get:()=>r[n],enumerable:!(e=U(r,n))||e.enumerable});return t};var h=(t,r,i)=>(i=t!=null?G(Q(t)):{},j(r||!t||!t.__esModule?_(i,"default",{value:t,enumerable:!0}):i,t)),Z=t=>j(_({},"__esModule",{value:!0}),t);var E=w(()=>{});var J=w(p=>{E();var m=require("react");function te(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var v=te(m);function T(t,r){for(var i=0;i<r.length;i++){var e=r[i];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(t,e.key,e)}}function re(t,r,i){return r&&T(t.prototype,r),i&&T(t,i),t}var S=typeof process<"u"&&process.env&&process.env.NODE_ENV==="production",N=function(t){return Object.prototype.toString.call(t)==="[object String]"},ne=function(){function t(i){var e=i===void 0?{}:i,n=e.name,o=n===void 0?"stylesheet":n,s=e.optimizeForSpeed,u=s===void 0?S:s;l(N(o),"`name` must be a string"),this._name=o,this._deletedRulePlaceholder="#"+o+"-deleted-rule____{}",l(typeof u=="boolean","`optimizeForSpeed` must be a boolean"),this._optimizeForSpeed=u,this._serverSheet=void 0,this._tags=[],this._injected=!1,this._rulesCount=0;var c=typeof window<"u"&&document.querySelector('meta[property="csp-nonce"]');this._nonce=c?c.getAttribute("content"):null}var r=t.prototype;return r.setOptimizeForSpeed=function(e){l(typeof e=="boolean","`setOptimizeForSpeed` accepts a boolean"),l(this._rulesCount===0,"optimizeForSpeed cannot be when rules have already been inserted"),this.flush(),this._optimizeForSpeed=e,this.inject()},r.isOptimizeForSpeed=function(){return this._optimizeForSpeed},r.inject=function(){var e=this;if(l(!this._injected,"sheet already injected"),this._injected=!0,typeof window<"u"&&this._optimizeForSpeed){this._tags[0]=this.makeStyleTag(this._name),this._optimizeForSpeed="insertRule"in this.getSheet(),this._optimizeForSpeed||(S||console.warn("StyleSheet: optimizeForSpeed mode not supported falling back to standard mode."),this.flush(),this._injected=!0);return}this._serverSheet={cssRules:[],insertRule:function(n,o){return typeof o=="number"?e._serverSheet.cssRules[o]={cssText:n}:e._serverSheet.cssRules.push({cssText:n}),o},deleteRule:function(n){e._serverSheet.cssRules[n]=null}}},r.getSheetForTag=function(e){if(e.sheet)return e.sheet;for(var n=0;n<document.styleSheets.length;n++)if(document.styleSheets[n].ownerNode===e)return document.styleSheets[n]},r.getSheet=function(){return this.getSheetForTag(this._tags[this._tags.length-1])},r.insertRule=function(e,n){if(l(N(e),"`insertRule` accepts only strings"),typeof window>"u")return typeof n!="number"&&(n=this._serverSheet.cssRules.length),this._serverSheet.insertRule(e,n),this._rulesCount++;if(this._optimizeForSpeed){var o=this.getSheet();typeof n!="number"&&(n=o.cssRules.length);try{o.insertRule(e,n)}catch{return S||console.warn(`StyleSheet: illegal rule: 
+"use strict";var te=Object.create;var _=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty;var se=(i,e)=>()=>(i&&(e=i(i=0)),e);var w=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),A=(i,e)=>{for(var n in e)_(i,n,{get:e[n],enumerable:!0})},O=(i,e,n,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of ie(e))!oe.call(i,r)&&r!==n&&_(i,r,{get:()=>e[r],enumerable:!(t=re(e,r))||t.enumerable});return i};var d=(i,e,n)=>(n=i!=null?te(ne(i)):{},O(e||!i||!i.__esModule?_(n,"default",{value:i,enumerable:!0}):n,i)),ae=i=>O(_({},"__esModule",{value:!0}),i);var D={};A(D,{default:()=>ce});var v,L,S,le,ce,$=se(()=>{"use strict";v=d(require("react")),L=require("next/dist/shared/lib/app-router-context"),S=require("next/dist/shared/lib/hooks-client-context"),le=({children:i,action:e,routeParams:n})=>{let{pathname:t,query:r,...s}=n;return v.default.createElement(L.AppRouterContext.Provider,{value:{push(...o){e("nextNavigation.push")(...o)},replace(...o){e("nextNavigation.replace")(...o)},forward(...o){e("nextNavigation.forward")(...o)},back(...o){e("nextNavigation.back")(...o)},prefetch(...o){e("nextNavigation.prefetch")(...o)},refresh:()=>{e("nextNavigation.refresh")()},...s}},v.default.createElement(S.SearchParamsContext.Provider,{value:new URLSearchParams(r)},v.default.createElement(S.PathnameContext.Provider,{value:t},i)))},ce=le});var X=w(()=>{});var K=w(m=>{X();var p=require("react");function de(i){return i&&typeof i=="object"&&"default"in i?i:{default:i}}var P=de(p);function B(i,e){for(var n=0;n<e.length;n++){var t=e[n];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(i,t.key,t)}}function he(i,e,n){return e&&B(i.prototype,e),n&&B(i,n),i}var R=typeof process<"u"&&process.env&&process.env.NODE_ENV==="production",N=function(i){return Object.prototype.toString.call(i)==="[object String]"},pe=function(){function i(n){var t=n===void 0?{}:n,r=t.name,s=r===void 0?"stylesheet":r,o=t.optimizeForSpeed,a=o===void 0?R:o;u(N(s),"`name` must be a string"),this._name=s,this._deletedRulePlaceholder="#"+s+"-deleted-rule____{}",u(typeof a=="boolean","`optimizeForSpeed` must be a boolean"),this._optimizeForSpeed=a,this._serverSheet=void 0,this._tags=[],this._injected=!1,this._rulesCount=0;var c=typeof window<"u"&&document.querySelector('meta[property="csp-nonce"]');this._nonce=c?c.getAttribute("content"):null}var e=i.prototype;return e.setOptimizeForSpeed=function(t){u(typeof t=="boolean","`setOptimizeForSpeed` accepts a boolean"),u(this._rulesCount===0,"optimizeForSpeed cannot be when rules have already been inserted"),this.flush(),this._optimizeForSpeed=t,this.inject()},e.isOptimizeForSpeed=function(){return this._optimizeForSpeed},e.inject=function(){var t=this;if(u(!this._injected,"sheet already injected"),this._injected=!0,typeof window<"u"&&this._optimizeForSpeed){this._tags[0]=this.makeStyleTag(this._name),this._optimizeForSpeed="insertRule"in this.getSheet(),this._optimizeForSpeed||(R||console.warn("StyleSheet: optimizeForSpeed mode not supported falling back to standard mode."),this.flush(),this._injected=!0);return}this._serverSheet={cssRules:[],insertRule:function(r,s){return typeof s=="number"?t._serverSheet.cssRules[s]={cssText:r}:t._serverSheet.cssRules.push({cssText:r}),s},deleteRule:function(r){t._serverSheet.cssRules[r]=null}}},e.getSheetForTag=function(t){if(t.sheet)return t.sheet;for(var r=0;r<document.styleSheets.length;r++)if(document.styleSheets[r].ownerNode===t)return document.styleSheets[r]},e.getSheet=function(){return this.getSheetForTag(this._tags[this._tags.length-1])},e.insertRule=function(t,r){if(u(N(t),"`insertRule` accepts only strings"),typeof window>"u")return typeof r!="number"&&(r=this._serverSheet.cssRules.length),this._serverSheet.insertRule(t,r),this._rulesCount++;if(this._optimizeForSpeed){var s=this.getSheet();typeof r!="number"&&(r=s.cssRules.length);try{s.insertRule(t,r)}catch{return R||console.warn(`StyleSheet: illegal rule: 
 
-`+e+`
+`+t+`
 
-See https://stackoverflow.com/q/20007992 for more info`),-1}}else{var s=this._tags[n];this._tags.push(this.makeStyleTag(this._name,e,s))}return this._rulesCount++},r.replaceRule=function(e,n){if(this._optimizeForSpeed||typeof window>"u"){var o=typeof window<"u"?this.getSheet():this._serverSheet;if(n.trim()||(n=this._deletedRulePlaceholder),!o.cssRules[e])return e;o.deleteRule(e);try{o.insertRule(n,e)}catch{S||console.warn(`StyleSheet: illegal rule: 
+See https://stackoverflow.com/q/20007992 for more info`),-1}}else{var o=this._tags[r];this._tags.push(this.makeStyleTag(this._name,t,o))}return this._rulesCount++},e.replaceRule=function(t,r){if(this._optimizeForSpeed||typeof window>"u"){var s=typeof window<"u"?this.getSheet():this._serverSheet;if(r.trim()||(r=this._deletedRulePlaceholder),!s.cssRules[t])return t;s.deleteRule(t);try{s.insertRule(r,t)}catch{R||console.warn(`StyleSheet: illegal rule: 
 
-`+n+`
+`+r+`
 
-See https://stackoverflow.com/q/20007992 for more info`),o.insertRule(this._deletedRulePlaceholder,e)}}else{var s=this._tags[e];l(s,"old rule at index `"+e+"` not found"),s.textContent=n}return e},r.deleteRule=function(e){if(typeof window>"u"){this._serverSheet.deleteRule(e);return}if(this._optimizeForSpeed)this.replaceRule(e,"");else{var n=this._tags[e];l(n,"rule at index `"+e+"` not found"),n.parentNode.removeChild(n),this._tags[e]=null}},r.flush=function(){this._injected=!1,this._rulesCount=0,typeof window<"u"?(this._tags.forEach(function(e){return e&&e.parentNode.removeChild(e)}),this._tags=[]):this._serverSheet.cssRules=[]},r.cssRules=function(){var e=this;return typeof window>"u"?this._serverSheet.cssRules:this._tags.reduce(function(n,o){return o?n=n.concat(Array.prototype.map.call(e.getSheetForTag(o).cssRules,function(s){return s.cssText===e._deletedRulePlaceholder?null:s})):n.push(null),n},[])},r.makeStyleTag=function(e,n,o){n&&l(N(n),"makeStyleTag accepts only strings as second parameter");var s=document.createElement("style");this._nonce&&s.setAttribute("nonce",this._nonce),s.type="text/css",s.setAttribute("data-"+e,""),n&&s.appendChild(document.createTextNode(n));var u=document.head||document.getElementsByTagName("head")[0];return o?u.insertBefore(s,o):u.appendChild(s),s},re(t,[{key:"length",get:function(){return this._rulesCount}}]),t}();function l(t,r){if(!t)throw new Error("StyleSheet: "+r+".")}function ie(t){for(var r=5381,i=t.length;i;)r=r*33^t.charCodeAt(--i);return r>>>0}var oe=ie,se=function(t){return t.replace(/\/style/gi,"\\/style")},d={};function b(t,r){if(!r)return"jsx-"+t;var i=String(r),e=t+i;return d[e]||(d[e]="jsx-"+oe(t+"-"+i)),d[e]}function q(t,r){var i=/__jsx-style-dynamic-selector/g;typeof window>"u"&&(r=se(r));var e=t+r;return d[e]||(d[e]=r.replace(i,t)),d[e]}function ue(t,r){return r===void 0&&(r={}),t.map(function(i){var e=i[0],n=i[1];return v.default.createElement("style",{id:"__"+e,key:"__"+e,nonce:r.nonce?r.nonce:void 0,dangerouslySetInnerHTML:{__html:n}})})}var ae=function(){function t(i){var e=i===void 0?{}:i,n=e.styleSheet,o=n===void 0?null:n,s=e.optimizeForSpeed,u=s===void 0?!1:s;this._sheet=o||new ne({name:"styled-jsx",optimizeForSpeed:u}),this._sheet.inject(),o&&typeof u=="boolean"&&(this._sheet.setOptimizeForSpeed(u),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),this._fromServer=void 0,this._indices={},this._instancesCounts={}}var r=t.prototype;return r.add=function(e){var n=this;this._optimizeForSpeed===void 0&&(this._optimizeForSpeed=Array.isArray(e.children),this._sheet.setOptimizeForSpeed(this._optimizeForSpeed),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),typeof window<"u"&&!this._fromServer&&(this._fromServer=this.selectFromServer(),this._instancesCounts=Object.keys(this._fromServer).reduce(function(f,H){return f[H]=0,f},{}));var o=this.getIdAndRules(e),s=o.styleId,u=o.rules;if(s in this._instancesCounts){this._instancesCounts[s]+=1;return}var c=u.map(function(f){return n._sheet.insertRule(f)}).filter(function(f){return f!==-1});this._indices[s]=c,this._instancesCounts[s]=1},r.remove=function(e){var n=this,o=this.getIdAndRules(e).styleId;if(le(o in this._instancesCounts,"styleId: `"+o+"` not found"),this._instancesCounts[o]-=1,this._instancesCounts[o]<1){var s=this._fromServer&&this._fromServer[o];s?(s.parentNode.removeChild(s),delete this._fromServer[o]):(this._indices[o].forEach(function(u){return n._sheet.deleteRule(u)}),delete this._indices[o]),delete this._instancesCounts[o]}},r.update=function(e,n){this.add(n),this.remove(e)},r.flush=function(){this._sheet.flush(),this._sheet.inject(),this._fromServer=void 0,this._indices={},this._instancesCounts={}},r.cssRules=function(){var e=this,n=this._fromServer?Object.keys(this._fromServer).map(function(s){return[s,e._fromServer[s]]}):[],o=this._sheet.cssRules();return n.concat(Object.keys(this._indices).map(function(s){return[s,e._indices[s].map(function(u){return o[u].cssText}).join(e._optimizeForSpeed?"":`
-`)]}).filter(function(s){return Boolean(s[1])}))},r.styles=function(e){return ue(this.cssRules(),e)},r.getIdAndRules=function(e){var n=e.children,o=e.dynamic,s=e.id;if(o){var u=b(s,o);return{styleId:u,rules:Array.isArray(n)?n.map(function(c){return q(u,c)}):[q(u,n)]}}return{styleId:b(s),rules:Array.isArray(n)?n:[n]}},r.selectFromServer=function(){var e=Array.prototype.slice.call(document.querySelectorAll('[id^="__jsx-"]'));return e.reduce(function(n,o){var s=o.id.slice(2);return n[s]=o,n},{})},t}();function le(t,r){if(!t)throw new Error("StyleSheetRegistry: "+r+".")}var g=m.createContext(null);g.displayName="StyleSheetContext";function z(){return new ae}function ce(t){var r=t.registry,i=t.children,e=m.useContext(g),n=m.useState(function(){return e||r||z()}),o=n[0];return v.default.createElement(g.Provider,{value:o},i)}function $(){return m.useContext(g)}var fe=v.default.useInsertionEffect||v.default.useLayoutEffect,L=typeof window<"u"?z():void 0;function D(t){var r=L||$();return r?typeof window>"u"?(r.add(t),null):(fe(function(){return r.add(t),function(){r.remove(t)}},[t.id,String(t.dynamic)]),null):null}D.dynamic=function(t){return t.map(function(r){var i=r[0],e=r[1];return b(i,e)}).join(" ")};p.StyleRegistry=ce;p.createStyleRegistry=z;p.style=D;p.useStyleRegistry=$});var X=w((ge,V)=>{V.exports=J()});var me={};Y(me,{decorators:()=>he});module.exports=Z(me);var O=require("next/config");(0,O.setConfig)(process.env.__NEXT_RUNTIME_CONFIG);var F=h(require("react")),P=require("next/dist/shared/lib/router-context"),x=h(require("next/router")),a;try{a=require("@storybook/addon-actions").action}catch{a=()=>()=>{}}var ee={route:"/",pathname:"/",query:{},asPath:"/",push(...t){return a("nextRouter.push")(...t),Promise.resolve(!0)},replace(...t){return a("nextRouter.replace")(...t),Promise.resolve(!0)},reload(...t){a("nextRouter.reload")(...t)},back(...t){a("nextRouter.back")(...t)},prefetch(...t){return a("nextRouter.prefetch")(...t),Promise.resolve()},beforePopState(...t){a("nextRouter.beforePopState")(...t)},events:{on(...t){a("nextRouter.events.on")(...t)},off(...t){a("nextRouter.events.off")(...t)},emit(...t){a("nextRouter.events.emit")(...t)}},isFallback:!1},A=(t,{globals:r,parameters:i})=>{let e=i.nextRouter??{};return x.default.router={...ee,locale:r==null?void 0:r.locale,...e},F.createElement(P.RouterContext.Provider,{value:x.default.router},F.createElement(t,null))};var y=h(require("react")),C;try{C=X().StyleRegistry}catch{C=y.Fragment}var B=t=>y.createElement(C,null,y.createElement(t,null));var R=h(require("react")),I=h(require("semver")),k=({src:t,width:r,quality:i})=>{let e=[];if(t||e.push("src"),r||e.push("width"),e.length>0)throw new Error(`Next Image Optimization requires ${e.join(", ")} to be provided. Make sure you pass them as props to the \`next/image\` component. Received: ${JSON.stringify({src:t,width:r,quality:i})}`);return`${t}?w=${r}&q=${i??75}`},M=require("next/image"),de=M.default;Object.defineProperty(M,"default",{configurable:!0,value:t=>R.createElement(de,{...t,loader:t.loader??k})});if(I.default.satisfies(process.env.__NEXT_VERSION,"^13.0.0")){let r=require("next/legacy/image").default;Object.defineProperty(r,"default",{configurable:!0,value:i=>R.createElement(r,{...i,loader:i.loader??k})})}if(I.default.satisfies(process.env.__NEXT_VERSION,"^12.2.0")){let r=require("next/future/image").default;Object.defineProperty(r,"default",{configurable:!0,value:i=>R.createElement(r,{...i,loader:i.loader??k})})}var he=[B,A];0&&(module.exports={decorators});
+See https://stackoverflow.com/q/20007992 for more info`),s.insertRule(this._deletedRulePlaceholder,t)}}else{var o=this._tags[t];u(o,"old rule at index `"+t+"` not found"),o.textContent=r}return t},e.deleteRule=function(t){if(typeof window>"u"){this._serverSheet.deleteRule(t);return}if(this._optimizeForSpeed)this.replaceRule(t,"");else{var r=this._tags[t];u(r,"rule at index `"+t+"` not found"),r.parentNode.removeChild(r),this._tags[t]=null}},e.flush=function(){this._injected=!1,this._rulesCount=0,typeof window<"u"?(this._tags.forEach(function(t){return t&&t.parentNode.removeChild(t)}),this._tags=[]):this._serverSheet.cssRules=[]},e.cssRules=function(){var t=this;return typeof window>"u"?this._serverSheet.cssRules:this._tags.reduce(function(r,s){return s?r=r.concat(Array.prototype.map.call(t.getSheetForTag(s).cssRules,function(o){return o.cssText===t._deletedRulePlaceholder?null:o})):r.push(null),r},[])},e.makeStyleTag=function(t,r,s){r&&u(N(r),"makeStyleTag accepts only strings as second parameter");var o=document.createElement("style");this._nonce&&o.setAttribute("nonce",this._nonce),o.type="text/css",o.setAttribute("data-"+t,""),r&&o.appendChild(document.createTextNode(r));var a=document.head||document.getElementsByTagName("head")[0];return s?a.insertBefore(o,s):a.appendChild(o),o},he(i,[{key:"length",get:function(){return this._rulesCount}}]),i}();function u(i,e){if(!i)throw new Error("StyleSheet: "+e+".")}function me(i){for(var e=5381,n=i.length;n;)e=e*33^i.charCodeAt(--n);return e>>>0}var ye=me,_e=function(i){return i.replace(/\/style/gi,"\\/style")},h={};function C(i,e){if(!e)return"jsx-"+i;var n=String(e),t=i+n;return h[t]||(h[t]="jsx-"+ye(i+"-"+n)),h[t]}function G(i,e){var n=/__jsx-style-dynamic-selector/g;typeof window>"u"&&(e=_e(e));var t=i+e;return h[t]||(h[t]=e.replace(n,i)),h[t]}function ve(i,e){return e===void 0&&(e={}),i.map(function(n){var t=n[0],r=n[1];return P.default.createElement("style",{id:"__"+t,key:"__"+t,nonce:e.nonce?e.nonce:void 0,dangerouslySetInnerHTML:{__html:r}})})}var Se=function(){function i(n){var t=n===void 0?{}:n,r=t.styleSheet,s=r===void 0?null:r,o=t.optimizeForSpeed,a=o===void 0?!1:o;this._sheet=s||new pe({name:"styled-jsx",optimizeForSpeed:a}),this._sheet.inject(),s&&typeof a=="boolean"&&(this._sheet.setOptimizeForSpeed(a),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),this._fromServer=void 0,this._indices={},this._instancesCounts={}}var e=i.prototype;return e.add=function(t){var r=this;this._optimizeForSpeed===void 0&&(this._optimizeForSpeed=Array.isArray(t.children),this._sheet.setOptimizeForSpeed(this._optimizeForSpeed),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),typeof window<"u"&&!this._fromServer&&(this._fromServer=this.selectFromServer(),this._instancesCounts=Object.keys(this._fromServer).reduce(function(f,ee){return f[ee]=0,f},{}));var s=this.getIdAndRules(t),o=s.styleId,a=s.rules;if(o in this._instancesCounts){this._instancesCounts[o]+=1;return}var c=a.map(function(f){return r._sheet.insertRule(f)}).filter(function(f){return f!==-1});this._indices[o]=c,this._instancesCounts[o]=1},e.remove=function(t){var r=this,s=this.getIdAndRules(t).styleId;if(ge(s in this._instancesCounts,"styleId: `"+s+"` not found"),this._instancesCounts[s]-=1,this._instancesCounts[s]<1){var o=this._fromServer&&this._fromServer[s];o?(o.parentNode.removeChild(o),delete this._fromServer[s]):(this._indices[s].forEach(function(a){return r._sheet.deleteRule(a)}),delete this._indices[s]),delete this._instancesCounts[s]}},e.update=function(t,r){this.add(r),this.remove(t)},e.flush=function(){this._sheet.flush(),this._sheet.inject(),this._fromServer=void 0,this._indices={},this._instancesCounts={}},e.cssRules=function(){var t=this,r=this._fromServer?Object.keys(this._fromServer).map(function(o){return[o,t._fromServer[o]]}):[],s=this._sheet.cssRules();return r.concat(Object.keys(this._indices).map(function(o){return[o,t._indices[o].map(function(a){return s[a].cssText}).join(t._optimizeForSpeed?"":`
+`)]}).filter(function(o){return Boolean(o[1])}))},e.styles=function(t){return ve(this.cssRules(),t)},e.getIdAndRules=function(t){var r=t.children,s=t.dynamic,o=t.id;if(s){var a=C(o,s);return{styleId:a,rules:Array.isArray(r)?r.map(function(c){return G(a,c)}):[G(a,r)]}}return{styleId:C(o),rules:Array.isArray(r)?r:[r]}},e.selectFromServer=function(){var t=Array.prototype.slice.call(document.querySelectorAll('[id^="__jsx-"]'));return t.reduce(function(r,s){var o=s.id.slice(2);return r[o]=s,r},{})},i}();function ge(i,e){if(!i)throw new Error("StyleSheetRegistry: "+e+".")}var x=p.createContext(null);x.displayName="StyleSheetContext";function b(){return new Se}function Re(i){var e=i.registry,n=i.children,t=p.useContext(x),r=p.useState(function(){return t||e||b()}),s=r[0];return P.default.createElement(x.Provider,{value:s},n)}function H(){return p.useContext(x)}var Pe=P.default.useInsertionEffect||P.default.useLayoutEffect,M=typeof window<"u"?b():void 0;function U(i){var e=M||H();return e?typeof window>"u"?(e.add(i),null):(Pe(function(){return e.add(i),function(){e.remove(i)}},[i.id,String(i.dynamic)]),null):null}U.dynamic=function(i){return i.map(function(e){var n=e[0],t=e[1];return C(n,t)}).join(" ")};m.StyleRegistry=Re;m.createStyleRegistry=b;m.style=U;m.useStyleRegistry=H});var W=w((Oe,Q)=>{Q.exports=K()});var we={};A(we,{decorators:()=>Fe});module.exports=ae(we);var k=require("next/config");(0,k.setConfig)(process.env.__NEXT_RUNTIME_CONFIG);var l=d(require("react"));var E=require("next/dist/shared/lib/router-context"),T=d(require("react")),ue=({children:i,action:e,routeParams:n,globals:t})=>T.default.createElement(E.RouterContext.Provider,{value:{push(...r){return e("nextRouter.push")(...r),Promise.resolve(!0)},replace(...r){return e("nextRouter.replace")(...r),Promise.resolve(!0)},reload(...r){e("nextRouter.reload")(...r)},back(...r){e("nextRouter.back")(...r)},forward(){e("nextRouter.forward")()},prefetch(...r){return e("nextRouter.prefetch")(...r),Promise.resolve()},beforePopState(...r){e("nextRouter.beforePopState")(...r)},events:{on(...r){e("nextRouter.events.on")(...r)},off(...r){e("nextRouter.events.off")(...r)},emit(...r){e("nextRouter.events.emit")(...r)}},locale:t==null?void 0:t.locale,route:"/",asPath:"/",basePath:"/",isFallback:!1,isLocaleDomain:!1,isReady:!0,isPreview:!1,...n}},i),q=ue;var fe=l.lazy(()=>Promise.resolve().then(()=>($(),D))),g;try{g=require("@storybook/addon-actions").action}catch{g=()=>()=>{}}var J={pathname:"/",query:{}},V=(i,{globals:e,parameters:n})=>{var r,s,o;return((r=n.nextjs)==null?void 0:r.appDirectory)??!1?l.createElement(fe,{action:g,routeParams:{...J,...(s=n.nextjs)==null?void 0:s.navigation}},l.createElement(i,null)):l.createElement(q,{action:g,globals:e,routeParams:{...J,...(o=n.nextjs)==null?void 0:o.router}},l.createElement(i,null))};var y=d(require("react")),z;try{z=W().StyleRegistry}catch{z=y.Fragment}var Y=i=>y.createElement(z,null,y.createElement(i,null));var F=d(require("react")),I=d(require("semver")),j=({src:i,width:e,quality:n})=>{let t=[];if(i||t.push("src"),e||t.push("width"),t.length>0)throw new Error(`Next Image Optimization requires ${t.join(", ")} to be provided. Make sure you pass them as props to the \`next/image\` component. Received: ${JSON.stringify({src:i,width:e,quality:n})}`);return`${i}?w=${e}&q=${n??75}`},Z=require("next/image"),xe=Z.default;Object.defineProperty(Z,"default",{configurable:!0,value:i=>F.createElement(xe,{...i,loader:i.loader??j})});if(I.default.satisfies(process.env.__NEXT_VERSION,"^13.0.0")){let e=require("next/legacy/image").default;Object.defineProperty(e,"default",{configurable:!0,value:n=>F.createElement(e,{...n,loader:n.loader??j})})}if(I.default.satisfies(process.env.__NEXT_VERSION,"^12.2.0")){let e=require("next/future/image").default;Object.defineProperty(e,"default",{configurable:!0,value:n=>F.createElement(e,{...n,loader:n.loader??j})})}var Fe=[Y,V];0&&(module.exports={decorators});

package/dist/preview.mjs

@@ -1,4 +1,4 @@
-import{__commonJS,__require}from"./chunk-LAHENP5R.mjs";var require_client_only=__commonJS({"../../node_modules/client-only/index.js"(){}});var require_index=__commonJS({"../../node_modules/styled-jsx/dist/index/index.js"(exports){require_client_only();var React4=__require("react");function _interopDefaultLegacy(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var React__default=_interopDefaultLegacy(React4);function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}var isProd=typeof process<"u"&&process.env&&process.env.NODE_ENV==="production",isString=function(o){return Object.prototype.toString.call(o)==="[object String]"},StyleSheet=function(){function StyleSheet2(param){var ref=param===void 0?{}:param,_name=ref.name,name=_name===void 0?"stylesheet":_name,_optimizeForSpeed=ref.optimizeForSpeed,optimizeForSpeed=_optimizeForSpeed===void 0?isProd:_optimizeForSpeed;invariant$1(isString(name),"`name` must be a string"),this._name=name,this._deletedRulePlaceholder="#"+name+"-deleted-rule____{}",invariant$1(typeof optimizeForSpeed=="boolean","`optimizeForSpeed` must be a boolean"),this._optimizeForSpeed=optimizeForSpeed,this._serverSheet=void 0,this._tags=[],this._injected=!1,this._rulesCount=0;var node=typeof window<"u"&&document.querySelector('meta[property="csp-nonce"]');this._nonce=node?node.getAttribute("content"):null}var _proto=StyleSheet2.prototype;return _proto.setOptimizeForSpeed=function(bool){invariant$1(typeof bool=="boolean","`setOptimizeForSpeed` accepts a boolean"),invariant$1(this._rulesCount===0,"optimizeForSpeed cannot be when rules have already been inserted"),this.flush(),this._optimizeForSpeed=bool,this.inject()},_proto.isOptimizeForSpeed=function(){return this._optimizeForSpeed},_proto.inject=function(){var _this=this;if(invariant$1(!this._injected,"sheet already injected"),this._injected=!0,typeof window<"u"&&this._optimizeForSpeed){this._tags[0]=this.makeStyleTag(this._name),this._optimizeForSpeed="insertRule"in this.getSheet(),this._optimizeForSpeed||(isProd||console.warn("StyleSheet: optimizeForSpeed mode not supported falling back to standard mode."),this.flush(),this._injected=!0);return}this._serverSheet={cssRules:[],insertRule:function(rule,index){return typeof index=="number"?_this._serverSheet.cssRules[index]={cssText:rule}:_this._serverSheet.cssRules.push({cssText:rule}),index},deleteRule:function(index){_this._serverSheet.cssRules[index]=null}}},_proto.getSheetForTag=function(tag){if(tag.sheet)return tag.sheet;for(var i=0;i<document.styleSheets.length;i++)if(document.styleSheets[i].ownerNode===tag)return document.styleSheets[i]},_proto.getSheet=function(){return this.getSheetForTag(this._tags[this._tags.length-1])},_proto.insertRule=function(rule,index){if(invariant$1(isString(rule),"`insertRule` accepts only strings"),typeof window>"u")return typeof index!="number"&&(index=this._serverSheet.cssRules.length),this._serverSheet.insertRule(rule,index),this._rulesCount++;if(this._optimizeForSpeed){var sheet=this.getSheet();typeof index!="number"&&(index=sheet.cssRules.length);try{sheet.insertRule(rule,index)}catch{return isProd||console.warn(`StyleSheet: illegal rule: 
+import{__commonJS,__require}from"./chunk-LAHENP5R.mjs";var require_client_only=__commonJS({"../../node_modules/client-only/index.js"(){}});var require_index=__commonJS({"../../node_modules/styled-jsx/dist/index/index.js"(exports){require_client_only();var React5=__require("react");function _interopDefaultLegacy(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var React__default=_interopDefaultLegacy(React5);function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}var isProd=typeof process<"u"&&process.env&&process.env.NODE_ENV==="production",isString=function(o){return Object.prototype.toString.call(o)==="[object String]"},StyleSheet=function(){function StyleSheet2(param){var ref=param===void 0?{}:param,_name=ref.name,name=_name===void 0?"stylesheet":_name,_optimizeForSpeed=ref.optimizeForSpeed,optimizeForSpeed=_optimizeForSpeed===void 0?isProd:_optimizeForSpeed;invariant$1(isString(name),"`name` must be a string"),this._name=name,this._deletedRulePlaceholder="#"+name+"-deleted-rule____{}",invariant$1(typeof optimizeForSpeed=="boolean","`optimizeForSpeed` must be a boolean"),this._optimizeForSpeed=optimizeForSpeed,this._serverSheet=void 0,this._tags=[],this._injected=!1,this._rulesCount=0;var node=typeof window<"u"&&document.querySelector('meta[property="csp-nonce"]');this._nonce=node?node.getAttribute("content"):null}var _proto=StyleSheet2.prototype;return _proto.setOptimizeForSpeed=function(bool){invariant$1(typeof bool=="boolean","`setOptimizeForSpeed` accepts a boolean"),invariant$1(this._rulesCount===0,"optimizeForSpeed cannot be when rules have already been inserted"),this.flush(),this._optimizeForSpeed=bool,this.inject()},_proto.isOptimizeForSpeed=function(){return this._optimizeForSpeed},_proto.inject=function(){var _this=this;if(invariant$1(!this._injected,"sheet already injected"),this._injected=!0,typeof window<"u"&&this._optimizeForSpeed){this._tags[0]=this.makeStyleTag(this._name),this._optimizeForSpeed="insertRule"in this.getSheet(),this._optimizeForSpeed||(isProd||console.warn("StyleSheet: optimizeForSpeed mode not supported falling back to standard mode."),this.flush(),this._injected=!0);return}this._serverSheet={cssRules:[],insertRule:function(rule,index){return typeof index=="number"?_this._serverSheet.cssRules[index]={cssText:rule}:_this._serverSheet.cssRules.push({cssText:rule}),index},deleteRule:function(index){_this._serverSheet.cssRules[index]=null}}},_proto.getSheetForTag=function(tag){if(tag.sheet)return tag.sheet;for(var i=0;i<document.styleSheets.length;i++)if(document.styleSheets[i].ownerNode===tag)return document.styleSheets[i]},_proto.getSheet=function(){return this.getSheetForTag(this._tags[this._tags.length-1])},_proto.insertRule=function(rule,index){if(invariant$1(isString(rule),"`insertRule` accepts only strings"),typeof window>"u")return typeof index!="number"&&(index=this._serverSheet.cssRules.length),this._serverSheet.insertRule(rule,index),this._rulesCount++;if(this._optimizeForSpeed){var sheet=this.getSheet();typeof index!="number"&&(index=sheet.cssRules.length);try{sheet.insertRule(rule,index)}catch{return isProd||console.warn(`StyleSheet: illegal rule: 
 
 `+rule+`
 
@@ -7,4 +7,4 @@ See https://stackoverflow.com/q/20007992 for more info`),-1}}else{var insertionP
 `+rule+`
 
 See https://stackoverflow.com/q/20007992 for more info`),sheet.insertRule(this._deletedRulePlaceholder,index)}}else{var tag=this._tags[index];invariant$1(tag,"old rule at index `"+index+"` not found"),tag.textContent=rule}return index},_proto.deleteRule=function(index){if(typeof window>"u"){this._serverSheet.deleteRule(index);return}if(this._optimizeForSpeed)this.replaceRule(index,"");else{var tag=this._tags[index];invariant$1(tag,"rule at index `"+index+"` not found"),tag.parentNode.removeChild(tag),this._tags[index]=null}},_proto.flush=function(){this._injected=!1,this._rulesCount=0,typeof window<"u"?(this._tags.forEach(function(tag){return tag&&tag.parentNode.removeChild(tag)}),this._tags=[]):this._serverSheet.cssRules=[]},_proto.cssRules=function(){var _this=this;return typeof window>"u"?this._serverSheet.cssRules:this._tags.reduce(function(rules,tag){return tag?rules=rules.concat(Array.prototype.map.call(_this.getSheetForTag(tag).cssRules,function(rule){return rule.cssText===_this._deletedRulePlaceholder?null:rule})):rules.push(null),rules},[])},_proto.makeStyleTag=function(name,cssString,relativeToTag){cssString&&invariant$1(isString(cssString),"makeStyleTag accepts only strings as second parameter");var tag=document.createElement("style");this._nonce&&tag.setAttribute("nonce",this._nonce),tag.type="text/css",tag.setAttribute("data-"+name,""),cssString&&tag.appendChild(document.createTextNode(cssString));var head=document.head||document.getElementsByTagName("head")[0];return relativeToTag?head.insertBefore(tag,relativeToTag):head.appendChild(tag),tag},_createClass(StyleSheet2,[{key:"length",get:function(){return this._rulesCount}}]),StyleSheet2}();function invariant$1(condition,message){if(!condition)throw new Error("StyleSheet: "+message+".")}function hash(str){for(var _$hash=5381,i=str.length;i;)_$hash=_$hash*33^str.charCodeAt(--i);return _$hash>>>0}var stringHash=hash,sanitize=function(rule){return rule.replace(/\/style/gi,"\\/style")},cache={};function computeId(baseId,props){if(!props)return"jsx-"+baseId;var propsToString=String(props),key=baseId+propsToString;return cache[key]||(cache[key]="jsx-"+stringHash(baseId+"-"+propsToString)),cache[key]}function computeSelector(id,css){var selectoPlaceholderRegexp=/__jsx-style-dynamic-selector/g;typeof window>"u"&&(css=sanitize(css));var idcss=id+css;return cache[idcss]||(cache[idcss]=css.replace(selectoPlaceholderRegexp,id)),cache[idcss]}function mapRulesToStyle(cssRules,options){return options===void 0&&(options={}),cssRules.map(function(args){var id=args[0],css=args[1];return React__default.default.createElement("style",{id:"__"+id,key:"__"+id,nonce:options.nonce?options.nonce:void 0,dangerouslySetInnerHTML:{__html:css}})})}var StyleSheetRegistry=function(){function StyleSheetRegistry2(param){var ref=param===void 0?{}:param,_styleSheet=ref.styleSheet,styleSheet=_styleSheet===void 0?null:_styleSheet,_optimizeForSpeed=ref.optimizeForSpeed,optimizeForSpeed=_optimizeForSpeed===void 0?!1:_optimizeForSpeed;this._sheet=styleSheet||new StyleSheet({name:"styled-jsx",optimizeForSpeed}),this._sheet.inject(),styleSheet&&typeof optimizeForSpeed=="boolean"&&(this._sheet.setOptimizeForSpeed(optimizeForSpeed),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),this._fromServer=void 0,this._indices={},this._instancesCounts={}}var _proto=StyleSheetRegistry2.prototype;return _proto.add=function(props){var _this=this;this._optimizeForSpeed===void 0&&(this._optimizeForSpeed=Array.isArray(props.children),this._sheet.setOptimizeForSpeed(this._optimizeForSpeed),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),typeof window<"u"&&!this._fromServer&&(this._fromServer=this.selectFromServer(),this._instancesCounts=Object.keys(this._fromServer).reduce(function(acc,tagName){return acc[tagName]=0,acc},{}));var ref=this.getIdAndRules(props),styleId=ref.styleId,rules=ref.rules;if(styleId in this._instancesCounts){this._instancesCounts[styleId]+=1;return}var indices=rules.map(function(rule){return _this._sheet.insertRule(rule)}).filter(function(index){return index!==-1});this._indices[styleId]=indices,this._instancesCounts[styleId]=1},_proto.remove=function(props){var _this=this,styleId=this.getIdAndRules(props).styleId;if(invariant(styleId in this._instancesCounts,"styleId: `"+styleId+"` not found"),this._instancesCounts[styleId]-=1,this._instancesCounts[styleId]<1){var tagFromServer=this._fromServer&&this._fromServer[styleId];tagFromServer?(tagFromServer.parentNode.removeChild(tagFromServer),delete this._fromServer[styleId]):(this._indices[styleId].forEach(function(index){return _this._sheet.deleteRule(index)}),delete this._indices[styleId]),delete this._instancesCounts[styleId]}},_proto.update=function(props,nextProps){this.add(nextProps),this.remove(props)},_proto.flush=function(){this._sheet.flush(),this._sheet.inject(),this._fromServer=void 0,this._indices={},this._instancesCounts={}},_proto.cssRules=function(){var _this=this,fromServer=this._fromServer?Object.keys(this._fromServer).map(function(styleId){return[styleId,_this._fromServer[styleId]]}):[],cssRules2=this._sheet.cssRules();return fromServer.concat(Object.keys(this._indices).map(function(styleId){return[styleId,_this._indices[styleId].map(function(index){return cssRules2[index].cssText}).join(_this._optimizeForSpeed?"":`
-`)]}).filter(function(rule){return Boolean(rule[1])}))},_proto.styles=function(options){return mapRulesToStyle(this.cssRules(),options)},_proto.getIdAndRules=function(props){var css=props.children,dynamic=props.dynamic,id=props.id;if(dynamic){var styleId=computeId(id,dynamic);return{styleId,rules:Array.isArray(css)?css.map(function(rule){return computeSelector(styleId,rule)}):[computeSelector(styleId,css)]}}return{styleId:computeId(id),rules:Array.isArray(css)?css:[css]}},_proto.selectFromServer=function(){var elements=Array.prototype.slice.call(document.querySelectorAll('[id^="__jsx-"]'));return elements.reduce(function(acc,element){var id=element.id.slice(2);return acc[id]=element,acc},{})},StyleSheetRegistry2}();function invariant(condition,message){if(!condition)throw new Error("StyleSheetRegistry: "+message+".")}var StyleSheetContext=React4.createContext(null);StyleSheetContext.displayName="StyleSheetContext";function createStyleRegistry(){return new StyleSheetRegistry}function StyleRegistry2(param){var configuredRegistry=param.registry,children=param.children,rootRegistry=React4.useContext(StyleSheetContext),ref=React4.useState(function(){return rootRegistry||configuredRegistry||createStyleRegistry()}),registry=ref[0];return React__default.default.createElement(StyleSheetContext.Provider,{value:registry},children)}function useStyleRegistry(){return React4.useContext(StyleSheetContext)}var useInsertionEffect=React__default.default.useInsertionEffect||React__default.default.useLayoutEffect,defaultRegistry=typeof window<"u"?createStyleRegistry():void 0;function JSXStyle(props){var registry=defaultRegistry||useStyleRegistry();return registry?typeof window>"u"?(registry.add(props),null):(useInsertionEffect(function(){return registry.add(props),function(){registry.remove(props)}},[props.id,String(props.dynamic)]),null):null}JSXStyle.dynamic=function(info){return info.map(function(tagInfo){var baseId=tagInfo[0],props=tagInfo[1];return computeId(baseId,props)}).join(" ")};exports.StyleRegistry=StyleRegistry2;exports.createStyleRegistry=createStyleRegistry;exports.style=JSXStyle;exports.useStyleRegistry=useStyleRegistry}});var require_styled_jsx=__commonJS({"../../node_modules/styled-jsx/index.js"(exports,module){module.exports=require_index()}});import{setConfig}from"next/config";setConfig(process.env.__NEXT_RUNTIME_CONFIG);import*as React from"react";import{RouterContext}from"next/dist/shared/lib/router-context";import Router from"next/router";var action;try{action=__require("@storybook/addon-actions").action}catch{action=()=>()=>{}}var defaultRouter={route:"/",pathname:"/",query:{},asPath:"/",push(...args){return action("nextRouter.push")(...args),Promise.resolve(!0)},replace(...args){return action("nextRouter.replace")(...args),Promise.resolve(!0)},reload(...args){action("nextRouter.reload")(...args)},back(...args){action("nextRouter.back")(...args)},prefetch(...args){return action("nextRouter.prefetch")(...args),Promise.resolve()},beforePopState(...args){action("nextRouter.beforePopState")(...args)},events:{on(...args){action("nextRouter.events.on")(...args)},off(...args){action("nextRouter.events.off")(...args)},emit(...args){action("nextRouter.events.emit")(...args)}},isFallback:!1},RouterDecorator=(Story,{globals,parameters})=>{let nextRouterParams=parameters.nextRouter??{};return Router.router={...defaultRouter,locale:globals?.locale,...nextRouterParams},React.createElement(RouterContext.Provider,{value:Router.router},React.createElement(Story,null))};import*as React2 from"react";var StyleRegistry;try{StyleRegistry=require_styled_jsx().StyleRegistry}catch{StyleRegistry=React2.Fragment}var StyledJsxDecorator=Story=>React2.createElement(StyleRegistry,null,React2.createElement(Story,null));import*as React3 from"react";import semver from"semver";var defaultLoader=({src,width,quality})=>{let missingValues=[];if(src||missingValues.push("src"),width||missingValues.push("width"),missingValues.length>0)throw new Error(`Next Image Optimization requires ${missingValues.join(", ")} to be provided. Make sure you pass them as props to the \`next/image\` component. Received: ${JSON.stringify({src,width,quality})}`);return`${src}?w=${width}&q=${quality??75}`},NextImage=__require("next/image"),OriginalNextImage=NextImage.default;Object.defineProperty(NextImage,"default",{configurable:!0,value:props=>React3.createElement(OriginalNextImage,{...props,loader:props.loader??defaultLoader})});if(semver.satisfies(process.env.__NEXT_VERSION,"^13.0.0")){let OriginalNextLegacyImage=__require("next/legacy/image").default;Object.defineProperty(OriginalNextLegacyImage,"default",{configurable:!0,value:props=>React3.createElement(OriginalNextLegacyImage,{...props,loader:props.loader??defaultLoader})})}if(semver.satisfies(process.env.__NEXT_VERSION,"^12.2.0")){let OriginalNextFutureImage=__require("next/future/image").default;Object.defineProperty(OriginalNextFutureImage,"default",{configurable:!0,value:props=>React3.createElement(OriginalNextFutureImage,{...props,loader:props.loader??defaultLoader})})}var decorators=[StyledJsxDecorator,RouterDecorator];export{decorators};
+`)]}).filter(function(rule){return Boolean(rule[1])}))},_proto.styles=function(options){return mapRulesToStyle(this.cssRules(),options)},_proto.getIdAndRules=function(props){var css=props.children,dynamic=props.dynamic,id=props.id;if(dynamic){var styleId=computeId(id,dynamic);return{styleId,rules:Array.isArray(css)?css.map(function(rule){return computeSelector(styleId,rule)}):[computeSelector(styleId,css)]}}return{styleId:computeId(id),rules:Array.isArray(css)?css:[css]}},_proto.selectFromServer=function(){var elements=Array.prototype.slice.call(document.querySelectorAll('[id^="__jsx-"]'));return elements.reduce(function(acc,element){var id=element.id.slice(2);return acc[id]=element,acc},{})},StyleSheetRegistry2}();function invariant(condition,message){if(!condition)throw new Error("StyleSheetRegistry: "+message+".")}var StyleSheetContext=React5.createContext(null);StyleSheetContext.displayName="StyleSheetContext";function createStyleRegistry(){return new StyleSheetRegistry}function StyleRegistry2(param){var configuredRegistry=param.registry,children=param.children,rootRegistry=React5.useContext(StyleSheetContext),ref=React5.useState(function(){return rootRegistry||configuredRegistry||createStyleRegistry()}),registry=ref[0];return React__default.default.createElement(StyleSheetContext.Provider,{value:registry},children)}function useStyleRegistry(){return React5.useContext(StyleSheetContext)}var useInsertionEffect=React__default.default.useInsertionEffect||React__default.default.useLayoutEffect,defaultRegistry=typeof window<"u"?createStyleRegistry():void 0;function JSXStyle(props){var registry=defaultRegistry||useStyleRegistry();return registry?typeof window>"u"?(registry.add(props),null):(useInsertionEffect(function(){return registry.add(props),function(){registry.remove(props)}},[props.id,String(props.dynamic)]),null):null}JSXStyle.dynamic=function(info){return info.map(function(tagInfo){var baseId=tagInfo[0],props=tagInfo[1];return computeId(baseId,props)}).join(" ")};exports.StyleRegistry=StyleRegistry2;exports.createStyleRegistry=createStyleRegistry;exports.style=JSXStyle;exports.useStyleRegistry=useStyleRegistry}});var require_styled_jsx=__commonJS({"../../node_modules/styled-jsx/index.js"(exports,module){module.exports=require_index()}});import{setConfig}from"next/config";setConfig(process.env.__NEXT_RUNTIME_CONFIG);import*as React2 from"react";import{RouterContext}from"next/dist/shared/lib/router-context";import React from"react";var PageRouterProvider=({children,action:action2,routeParams,globals})=>React.createElement(RouterContext.Provider,{value:{push(...args){return action2("nextRouter.push")(...args),Promise.resolve(!0)},replace(...args){return action2("nextRouter.replace")(...args),Promise.resolve(!0)},reload(...args){action2("nextRouter.reload")(...args)},back(...args){action2("nextRouter.back")(...args)},forward(){action2("nextRouter.forward")()},prefetch(...args){return action2("nextRouter.prefetch")(...args),Promise.resolve()},beforePopState(...args){action2("nextRouter.beforePopState")(...args)},events:{on(...args){action2("nextRouter.events.on")(...args)},off(...args){action2("nextRouter.events.off")(...args)},emit(...args){action2("nextRouter.events.emit")(...args)}},locale:globals?.locale,route:"/",asPath:"/",basePath:"/",isFallback:!1,isLocaleDomain:!1,isReady:!0,isPreview:!1,...routeParams}},children),page_router_provider_default=PageRouterProvider;var AppRouterProvider=React2.lazy(()=>import("./app-router-provider-5WPYJFG6.mjs")),action;try{action=__require("@storybook/addon-actions").action}catch{action=()=>()=>{}}var defaultRouterParams={pathname:"/",query:{}},RouterDecorator=(Story,{globals,parameters})=>parameters.nextjs?.appDirectory??!1?React2.createElement(AppRouterProvider,{action,routeParams:{...defaultRouterParams,...parameters.nextjs?.navigation}},React2.createElement(Story,null)):React2.createElement(page_router_provider_default,{action,globals,routeParams:{...defaultRouterParams,...parameters.nextjs?.router}},React2.createElement(Story,null));import*as React3 from"react";var StyleRegistry;try{StyleRegistry=require_styled_jsx().StyleRegistry}catch{StyleRegistry=React3.Fragment}var StyledJsxDecorator=Story=>React3.createElement(StyleRegistry,null,React3.createElement(Story,null));import*as React4 from"react";import semver from"semver";var defaultLoader=({src,width,quality})=>{let missingValues=[];if(src||missingValues.push("src"),width||missingValues.push("width"),missingValues.length>0)throw new Error(`Next Image Optimization requires ${missingValues.join(", ")} to be provided. Make sure you pass them as props to the \`next/image\` component. Received: ${JSON.stringify({src,width,quality})}`);return`${src}?w=${width}&q=${quality??75}`},NextImage=__require("next/image"),OriginalNextImage=NextImage.default;Object.defineProperty(NextImage,"default",{configurable:!0,value:props=>React4.createElement(OriginalNextImage,{...props,loader:props.loader??defaultLoader})});if(semver.satisfies(process.env.__NEXT_VERSION,"^13.0.0")){let OriginalNextLegacyImage=__require("next/legacy/image").default;Object.defineProperty(OriginalNextLegacyImage,"default",{configurable:!0,value:props=>React4.createElement(OriginalNextLegacyImage,{...props,loader:props.loader??defaultLoader})})}if(semver.satisfies(process.env.__NEXT_VERSION,"^12.2.0")){let OriginalNextFutureImage=__require("next/future/image").default;Object.defineProperty(OriginalNextFutureImage,"default",{configurable:!0,value:props=>React4.createElement(OriginalNextFutureImage,{...props,loader:props.loader??defaultLoader})})}var decorators=[StyledJsxDecorator,RouterDecorator];export{decorators};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "7.0.0-alpha.59",
+  "version": "7.0.0-alpha.61",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",
@@ -59,12 +59,12 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.59",
-    "@storybook/core-common": "7.0.0-alpha.59",
-    "@storybook/node-logger": "7.0.0-alpha.59",
-    "@storybook/preset-react-webpack": "7.0.0-alpha.59",
-    "@storybook/preview-api": "7.0.0-alpha.59",
-    "@storybook/react": "7.0.0-alpha.59",
+    "@storybook/builder-webpack5": "7.0.0-alpha.61",
+    "@storybook/core-common": "7.0.0-alpha.61",
+    "@storybook/node-logger": "7.0.0-alpha.61",
+    "@storybook/preset-react-webpack": "7.0.0-alpha.61",
+    "@storybook/preview-api": "7.0.0-alpha.61",
+    "@storybook/react": "7.0.0-alpha.61",
     "@types/node": "^16.0.0",
     "find-up": "^5.0.0",
     "fs-extra": "^9.0.1",
@@ -80,7 +80,7 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "7.0.0-alpha.59",
+    "@storybook/addon-actions": "7.0.0-alpha.61",
     "next": "^13.0.5",
     "typescript": "^4.9.3",
     "webpack": "^5.65.0"
@@ -119,5 +119,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
+  "gitHead": "ec1df6fe1b11ad6084b9f3ea4b5f6bee3fca58be"
 }

package/template/stories/DynamicImport.stories.jsx

@@ -0,0 +1,20 @@
+import dynamic from 'next/dynamic';
+import React, { Suspense } from 'react';
+
+const DynamicComponent = dynamic(() => import('./dynamic-component'), {
+  ssr: false,
+});
+
+function Component() {
+  return (
+    <Suspense fallback="Loading...">
+      <DynamicComponent />
+    </Suspense>
+  );
+}
+
+export default {
+  component: Component,
+};
+
+export const Default = {};

package/template/stories/dynamic-component.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function DynamicComponent() {
+  return <div>I am a dynamically loaded component</div>;
+}

package/template/stories_default-js/Link.stories.jsx

@@ -0,0 +1,82 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import Link from 'next/link';
+
+import style from './Link.stories.module.css';
+
+// `onClick`, `href`, and `ref` need to be passed to the DOM element
+// for proper handling
+const MyButton = React.forwardRef(function Button({ onClick, href, children }, ref) {
+  return (
+    <a href={href} onClick={onClick} ref={ref}>
+      {children}
+    </a>
+  );
+});
+
+const Component = () => (
+  <ul>
+    <li>
+      <Link href="/">Normal Link</Link>
+    </li>
+    <li>
+      <Link
+        href={{
+          pathname: '/with-url-object',
+          query: { name: 'test' },
+        }}
+      >
+        With URL Object
+      </Link>
+    </li>
+    <li>
+      <Link href="/replace-url" replace>
+        Replace the URL instead of push
+      </Link>
+    </li>
+    <li>
+      <Link href="/legacy-behaviour" legacyBehavior>
+        <a>Legacy behavior</a>
+      </Link>
+    </li>
+    <li>
+      <Link href="/child-is-functional-component" passHref legacyBehavior>
+        <MyButton>child is a functional component</MyButton>
+      </Link>
+    </li>
+    <li>
+      <Link href="/#hashid" scroll={false}>
+        Disables scrolling to the top
+      </Link>
+    </li>
+    <li>
+      <Link href="/no-prefetch" prefetch={false}>
+        No Prefetching
+      </Link>
+    </li>
+    <li>
+      <Link style={{ color: 'red' }} href="/with-style">
+        With style
+      </Link>
+    </li>
+    <li>
+      <Link className={style.link} href="/with-classname">
+        With className
+      </Link>
+    </li>
+  </ul>
+);
+
+export default {
+  component: Component,
+};
+
+export const Default = {};
+
+export const InAppDir = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+};

package/template/stories_default-js/Link.stories.module.css

@@ -0,0 +1,3 @@
+.link {
+  color: green;
+}

package/template/stories_default-js/Navigation.stories.jsx

@@ -0,0 +1,77 @@
+import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import React from 'react';
+
+function Component() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const searchParamsList = Array.from(searchParams.entries());
+
+  const routerActions = [
+    {
+      cb: () => router.back(),
+      name: 'Go back',
+    },
+    {
+      cb: () => router.forward(),
+      name: 'Go forward',
+    },
+    {
+      cb: () => router.prefetch('/prefetched-html'),
+      name: 'Prefetch',
+    },
+    {
+      cb: () => router.push('/push-html', { forceOptimisticNavigation: true }),
+      name: 'Push HTML',
+    },
+    {
+      cb: () => router.refresh(),
+      name: 'Refresh',
+    },
+    {
+      cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }),
+      name: 'Replace',
+    },
+  ];
+
+  return (
+    <div>
+      <div>pathname: {pathname}</div>
+      <div>
+        searchparams:{' '}
+        <ul>
+          {searchParamsList.map(([key, value]) => (
+            <li key={key}>
+              {key}: {value}
+            </li>
+          ))}
+        </ul>
+      </div>
+      {routerActions.map(({ cb, name }) => (
+        <div key={name} style={{ marginBottom: '1em' }}>
+          <button type="button" onClick={cb}>
+            {name}
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default {
+  component: Component,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: '/hello',
+        query: {
+          foo: 'bar',
+        },
+      },
+    },
+  },
+};
+
+export const Default = {};

package/template/stories_default-js/Router.stories.jsx

@@ -0,0 +1,69 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+function Component() {
+  const router = useRouter();
+  const searchParams = router.query;
+
+  const routerActions = [
+    {
+      cb: () => router.back(),
+      name: 'Go back',
+    },
+    {
+      cb: () => router.forward(),
+      name: 'Go forward',
+    },
+    {
+      cb: () => router.prefetch('/prefetched-html'),
+      name: 'Prefetch',
+    },
+    {
+      cb: () => router.push('/push-html', { forceOptimisticNavigation: true }),
+      name: 'Push HTML',
+    },
+    {
+      cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }),
+      name: 'Replace',
+    },
+  ];
+
+  return (
+    <div>
+      <div>pathname: {router.pathname}</div>
+      <div>
+        searchparams:{' '}
+        <ul>
+          {Object.entries(searchParams).map(([key, value]) => (
+            <li key={key}>
+              {key}: {value}
+            </li>
+          ))}
+        </ul>
+      </div>
+      {routerActions.map(({ cb, name }) => (
+        <div key={name} style={{ marginBottom: '1em' }}>
+          <button type="button" onClick={cb}>
+            {name}
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default {
+  component: Component,
+  parameters: {
+    nextjs: {
+      router: {
+        pathname: '/hello',
+        query: {
+          foo: 'bar',
+        },
+      },
+    },
+  },
+};
+
+export const Default = {};

package/template/stories_default-ts/Link.stories.module.css

@@ -0,0 +1,3 @@
+.link {
+  color: green;
+}

package/template/stories_default-ts/Link.stories.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import Link from 'next/link';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import style from './Link.stories.module.css';
+
+// `onClick`, `href`, and `ref` need to be passed to the DOM element
+// for proper handling
+const MyButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
+>(function Button({ onClick, href, children }, ref) {
+  return (
+    <a href={href} onClick={onClick} ref={ref}>
+      {children}
+    </a>
+  );
+});
+
+const Component = () => (
+  <ul>
+    <li>
+      <Link href="/">Normal Link</Link>
+    </li>
+    <li>
+      <Link
+        href={{
+          pathname: '/with-url-object',
+          query: { name: 'test' },
+        }}
+      >
+        With URL Object
+      </Link>
+    </li>
+    <li>
+      <Link href="/replace-url" replace>
+        Replace the URL instead of push
+      </Link>
+    </li>
+    <li>
+      <Link href="/legacy-behaviour" legacyBehavior>
+        <a>Legacy behavior</a>
+      </Link>
+    </li>
+    <li>
+      <Link href="/child-is-functional-component" passHref legacyBehavior>
+        <MyButton>child is a functional component</MyButton>
+      </Link>
+    </li>
+    <li>
+      <Link href="/#hashid" scroll={false}>
+        Disables scrolling to the top
+      </Link>
+    </li>
+    <li>
+      <Link href="/no-prefetch" prefetch={false}>
+        No Prefetching
+      </Link>
+    </li>
+    <li>
+      <Link style={{ color: 'red' }} href="/with-style">
+        With style
+      </Link>
+    </li>
+    <li>
+      <Link className={style.link} href="/with-classname">
+        With className
+      </Link>
+    </li>
+  </ul>
+);
+
+export default {
+  component: Component,
+} as Meta<typeof Component>;
+
+export const Default: StoryObj<typeof Component> = {};
+
+export const InAppDir: StoryObj<typeof Component> = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+};

package/template/stories_default-ts/Navigation.stories.tsx

@@ -0,0 +1,78 @@
+import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+function Component() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const searchParamsList = Array.from(searchParams.entries());
+
+  const routerActions = [
+    {
+      cb: () => router.back(),
+      name: 'Go back',
+    },
+    {
+      cb: () => router.forward(),
+      name: 'Go forward',
+    },
+    {
+      cb: () => router.prefetch('/prefetched-html'),
+      name: 'Prefetch',
+    },
+    {
+      cb: () => router.push('/push-html', { forceOptimisticNavigation: true }),
+      name: 'Push HTML',
+    },
+    {
+      cb: () => router.refresh(),
+      name: 'Refresh',
+    },
+    {
+      cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }),
+      name: 'Replace',
+    },
+  ];
+
+  return (
+    <div>
+      <div>pathname: {pathname}</div>
+      <div>
+        searchparams:{' '}
+        <ul>
+          {searchParamsList.map(([key, value]) => (
+            <li key={key}>
+              {key}: {value}
+            </li>
+          ))}
+        </ul>
+      </div>
+      {routerActions.map(({ cb, name }) => (
+        <div key={name} style={{ marginBottom: '1em' }}>
+          <button type="button" onClick={cb}>
+            {name}
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default {
+  component: Component,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: '/hello',
+        query: {
+          foo: 'bar',
+        },
+      },
+    },
+  },
+} as Meta<typeof Component>;
+
+export const Default: StoryObj<typeof Component> = {};