@storybook/addon-backgrounds 8.6.0-alpha.4 → 8.6.0-beta.0

package/dist/index.d.ts

@@ -1,3 +1,47 @@
-declare const _default: {};
+import * as core_dist_types from 'storybook/internal/types';
+import * as core_dist_csf from 'storybook/internal/csf';
 
-export { _default as default };
+interface Background {
+    name: string;
+    value: string;
+}
+interface GridConfig {
+    cellAmount: number;
+    cellSize: number;
+    opacity: number;
+    offsetX?: number;
+    offsetY?: number;
+}
+type GlobalState = {
+    value: string | undefined;
+    grid: boolean;
+};
+interface BackgroundsParameters {
+    /**
+     * Backgrounds configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/backgrounds#parameters
+     */
+    backgrounds: {
+        /** Default background color */
+        default?: string;
+        /** Remove the addon panel and disable the addon's behavior */
+        disable?: boolean;
+        /** Configuration for the background grid */
+        grid?: Partial<GridConfig>;
+        /** Available background colors */
+        values?: Array<Background>;
+    };
+}
+interface BackgroundsGlobals {
+    /**
+     * Backgrounds configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/backgrounds#globals
+     */
+    backgrounds: GlobalState;
+}
+
+declare const _default: () => core_dist_types.ProjectAnnotations<core_dist_csf.Renderer>;
+
+export { BackgroundsGlobals, BackgroundsParameters, _default as default };

package/dist/index.js

@@ -1,5 +1,43 @@
 'use strict';
 
-var src_default={};
+var previewApi = require('storybook/internal/preview-api');
+var global = require('@storybook/global');
+var clientLogger = require('storybook/internal/client-logger');
+var tsDedent = require('ts-dedent');
+
+var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var preview_exports={};__export(preview_exports,{decorators:()=>decorators,initialGlobals:()=>initialGlobals,parameters:()=>parameters});var PARAM_KEY="backgrounds";var DEFAULT_BACKGROUNDS={light:{name:"light",value:"#F8F8F8"},dark:{name:"dark",value:"#333"}};var{document,window}=global.global,isReduceMotionEnabled=()=>!!window?.matchMedia("(prefers-reduced-motion: reduce)")?.matches,clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle);},clearStyle=selector=>{let element=document.getElementById(selector);element&&element.parentElement?.removeChild(element);},addGridStyle=(selector,css)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css,document.head.appendChild(style);}},addBackgroundStyle=(selector,css,storyId)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css;let gridStyleSelector=`addon-backgrounds-grid${storyId?`-docs-${storyId}`:""}`,existingGridStyle=document.getElementById(gridStyleSelector);existingGridStyle?existingGridStyle.parentElement?.insertBefore(style,existingGridStyle):document.head.appendChild(style);}};var defaultGrid={cellSize:100,cellAmount:10,opacity:.8},BG_SELECTOR_BASE="addon-backgrounds",GRID_SELECTOR_BASE="addon-backgrounds-grid",transitionStyle=isReduceMotionEnabled()?"":"transition: background-color 0.3s;",withBackgroundAndGrid=(StoryFn,context)=>{let{globals,parameters:parameters2,viewMode,id}=context,{options=DEFAULT_BACKGROUNDS,disable,grid=defaultGrid}=parameters2[PARAM_KEY]||{},data=globals[PARAM_KEY]||{},backgroundName=data.value,item=backgroundName?options[backgroundName]:void 0,value=item?.value||"transparent",showGrid=data.grid||!1,shownBackground=!!item&&!disable,backgroundSelector=viewMode==="docs"?`#anchor--${id} .docs-story`:".sb-show-main",gridSelector=viewMode==="docs"?`#anchor--${id} .docs-story`:".sb-show-main",isLayoutPadded=parameters2.layout===void 0||parameters2.layout==="padded",defaultOffset=viewMode==="docs"?20:isLayoutPadded?16:0,{cellAmount,cellSize,opacity,offsetX=defaultOffset,offsetY=defaultOffset}=grid,backgroundSelectorId=viewMode==="docs"?`${BG_SELECTOR_BASE}-docs-${id}`:`${BG_SELECTOR_BASE}-color`,backgroundTarget=viewMode==="docs"?id:null;previewApi.useEffect(()=>{let backgroundStyles=`
+    ${backgroundSelector} {
+      background: ${value} !important;
+      ${transitionStyle}
+      }`;if(!shownBackground){clearStyles(backgroundSelectorId);return}addBackgroundStyle(backgroundSelectorId,backgroundStyles,backgroundTarget);},[backgroundSelector,backgroundSelectorId,backgroundTarget,shownBackground,value]);let gridSelectorId=viewMode==="docs"?`${GRID_SELECTOR_BASE}-docs-${id}`:`${GRID_SELECTOR_BASE}`;return previewApi.useEffect(()=>{if(!showGrid){clearStyles(gridSelectorId);return}let gridSize=[`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize}px ${cellSize}px`,`${cellSize}px ${cellSize}px`].join(", "),gridStyles=`
+        ${gridSelector} {
+          background-size: ${gridSize} !important;
+          background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
+          background-blend-mode: difference !important;
+          background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+           linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+           linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
+           linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
+        }
+      `;addGridStyle(gridSelectorId,gridStyles);},[cellAmount,cellSize,gridSelector,gridSelectorId,showGrid,offsetX,offsetY,opacity]),StoryFn()};var getBackgroundColorByName=(currentSelectedValue,backgrounds=[],defaultName)=>{if(currentSelectedValue==="transparent")return "transparent";if(backgrounds.find(background=>background.value===currentSelectedValue)||currentSelectedValue)return currentSelectedValue;let defaultBackground=backgrounds.find(background=>background.name===defaultName);if(defaultBackground)return defaultBackground.value;if(defaultName){let availableColors=backgrounds.map(background=>background.name).join(", ");clientLogger.logger.warn(tsDedent.dedent`
+        Backgrounds Addon: could not find the default color "${defaultName}".
+        These are the available colors for your story based on your configuration:
+        ${availableColors}.
+      `);}return "transparent"};var withBackground=(StoryFn,context)=>{let{globals,parameters:parameters2}=context,globalsBackgroundColor=globals[PARAM_KEY]?.value,backgroundsConfig=parameters2[PARAM_KEY],selectedBackgroundColor=previewApi.useMemo(()=>backgroundsConfig.disable?"transparent":getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]),isActive=previewApi.useMemo(()=>selectedBackgroundColor&&selectedBackgroundColor!=="transparent",[selectedBackgroundColor]),selector=context.viewMode==="docs"?`#anchor--${context.id} .docs-story`:".sb-show-main",backgroundStyles=previewApi.useMemo(()=>`
+      ${selector} {
+        background: ${selectedBackgroundColor} !important;
+        ${isReduceMotionEnabled()?"":"transition: background-color 0.3s;"}
+      }
+    `,[selectedBackgroundColor,selector]);return previewApi.useEffect(()=>{let selectorId=context.viewMode==="docs"?`addon-backgrounds-docs-${context.id}`:"addon-backgrounds-color";if(!isActive){clearStyles(selectorId);return}addBackgroundStyle(selectorId,backgroundStyles,context.viewMode==="docs"?context.id:null);},[isActive,backgroundStyles,context]),StoryFn()};var withGrid=(StoryFn,context)=>{let{globals,parameters:parameters2}=context,gridParameters=parameters2[PARAM_KEY].grid,isActive=globals[PARAM_KEY]?.grid===!0&&gridParameters.disable!==!0,{cellAmount,cellSize,opacity}=gridParameters,isInDocs=context.viewMode==="docs",defaultOffset=parameters2.layout===void 0||parameters2.layout==="padded"?16:0,offsetX=gridParameters.offsetX??(isInDocs?20:defaultOffset),offsetY=gridParameters.offsetY??(isInDocs?20:defaultOffset),gridStyles=previewApi.useMemo(()=>{let selector=context.viewMode==="docs"?`#anchor--${context.id} .docs-story`:".sb-show-main",backgroundSize=[`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize}px ${cellSize}px`,`${cellSize}px ${cellSize}px`].join(", ");return `
+      ${selector} {
+        background-size: ${backgroundSize} !important;
+        background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
+        background-blend-mode: difference !important;
+        background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+         linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+         linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
+         linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
+      }
+    `},[cellSize]);return previewApi.useEffect(()=>{let selectorId=context.viewMode==="docs"?`addon-backgrounds-grid-docs-${context.id}`:"addon-backgrounds-grid";if(!isActive){clearStyles(selectorId);return}addGridStyle(selectorId,gridStyles);},[isActive,gridStyles,context]),StoryFn()};var decorators=globalThis.FEATURES?.backgroundsStoryGlobals?[withBackgroundAndGrid]:[withGrid,withBackground],parameters={[PARAM_KEY]:{grid:{cellSize:20,opacity:.5,cellAmount:5},disable:!1,...!globalThis.FEATURES?.backgroundsStoryGlobals&&{values:Object.values(DEFAULT_BACKGROUNDS)}}},modern={[PARAM_KEY]:{value:void 0,grid:!1}},initialGlobals=globalThis.FEATURES?.backgroundsStoryGlobals?modern:{[PARAM_KEY]:null};var src_default=()=>previewApi.definePreview(preview_exports);
 
 module.exports = src_default;

package/dist/index.mjs

@@ -1,3 +1,41 @@
-var src_default={};
+import { useEffect, useMemo, definePreview } from 'storybook/internal/preview-api';
+import { global } from '@storybook/global';
+import { logger } from 'storybook/internal/client-logger';
+import { dedent } from 'ts-dedent';
+
+var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var preview_exports={};__export(preview_exports,{decorators:()=>decorators,initialGlobals:()=>initialGlobals,parameters:()=>parameters});var PARAM_KEY="backgrounds";var DEFAULT_BACKGROUNDS={light:{name:"light",value:"#F8F8F8"},dark:{name:"dark",value:"#333"}};var{document,window}=global,isReduceMotionEnabled=()=>!!window?.matchMedia("(prefers-reduced-motion: reduce)")?.matches,clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle);},clearStyle=selector=>{let element=document.getElementById(selector);element&&element.parentElement?.removeChild(element);},addGridStyle=(selector,css)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css,document.head.appendChild(style);}},addBackgroundStyle=(selector,css,storyId)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css;let gridStyleSelector=`addon-backgrounds-grid${storyId?`-docs-${storyId}`:""}`,existingGridStyle=document.getElementById(gridStyleSelector);existingGridStyle?existingGridStyle.parentElement?.insertBefore(style,existingGridStyle):document.head.appendChild(style);}};var defaultGrid={cellSize:100,cellAmount:10,opacity:.8},BG_SELECTOR_BASE="addon-backgrounds",GRID_SELECTOR_BASE="addon-backgrounds-grid",transitionStyle=isReduceMotionEnabled()?"":"transition: background-color 0.3s;",withBackgroundAndGrid=(StoryFn,context)=>{let{globals,parameters:parameters2,viewMode,id}=context,{options=DEFAULT_BACKGROUNDS,disable,grid=defaultGrid}=parameters2[PARAM_KEY]||{},data=globals[PARAM_KEY]||{},backgroundName=data.value,item=backgroundName?options[backgroundName]:void 0,value=item?.value||"transparent",showGrid=data.grid||!1,shownBackground=!!item&&!disable,backgroundSelector=viewMode==="docs"?`#anchor--${id} .docs-story`:".sb-show-main",gridSelector=viewMode==="docs"?`#anchor--${id} .docs-story`:".sb-show-main",isLayoutPadded=parameters2.layout===void 0||parameters2.layout==="padded",defaultOffset=viewMode==="docs"?20:isLayoutPadded?16:0,{cellAmount,cellSize,opacity,offsetX=defaultOffset,offsetY=defaultOffset}=grid,backgroundSelectorId=viewMode==="docs"?`${BG_SELECTOR_BASE}-docs-${id}`:`${BG_SELECTOR_BASE}-color`,backgroundTarget=viewMode==="docs"?id:null;useEffect(()=>{let backgroundStyles=`
+    ${backgroundSelector} {
+      background: ${value} !important;
+      ${transitionStyle}
+      }`;if(!shownBackground){clearStyles(backgroundSelectorId);return}addBackgroundStyle(backgroundSelectorId,backgroundStyles,backgroundTarget);},[backgroundSelector,backgroundSelectorId,backgroundTarget,shownBackground,value]);let gridSelectorId=viewMode==="docs"?`${GRID_SELECTOR_BASE}-docs-${id}`:`${GRID_SELECTOR_BASE}`;return useEffect(()=>{if(!showGrid){clearStyles(gridSelectorId);return}let gridSize=[`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize}px ${cellSize}px`,`${cellSize}px ${cellSize}px`].join(", "),gridStyles=`
+        ${gridSelector} {
+          background-size: ${gridSize} !important;
+          background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
+          background-blend-mode: difference !important;
+          background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+           linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+           linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
+           linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
+        }
+      `;addGridStyle(gridSelectorId,gridStyles);},[cellAmount,cellSize,gridSelector,gridSelectorId,showGrid,offsetX,offsetY,opacity]),StoryFn()};var getBackgroundColorByName=(currentSelectedValue,backgrounds=[],defaultName)=>{if(currentSelectedValue==="transparent")return "transparent";if(backgrounds.find(background=>background.value===currentSelectedValue)||currentSelectedValue)return currentSelectedValue;let defaultBackground=backgrounds.find(background=>background.name===defaultName);if(defaultBackground)return defaultBackground.value;if(defaultName){let availableColors=backgrounds.map(background=>background.name).join(", ");logger.warn(dedent`
+        Backgrounds Addon: could not find the default color "${defaultName}".
+        These are the available colors for your story based on your configuration:
+        ${availableColors}.
+      `);}return "transparent"};var withBackground=(StoryFn,context)=>{let{globals,parameters:parameters2}=context,globalsBackgroundColor=globals[PARAM_KEY]?.value,backgroundsConfig=parameters2[PARAM_KEY],selectedBackgroundColor=useMemo(()=>backgroundsConfig.disable?"transparent":getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]),isActive=useMemo(()=>selectedBackgroundColor&&selectedBackgroundColor!=="transparent",[selectedBackgroundColor]),selector=context.viewMode==="docs"?`#anchor--${context.id} .docs-story`:".sb-show-main",backgroundStyles=useMemo(()=>`
+      ${selector} {
+        background: ${selectedBackgroundColor} !important;
+        ${isReduceMotionEnabled()?"":"transition: background-color 0.3s;"}
+      }
+    `,[selectedBackgroundColor,selector]);return useEffect(()=>{let selectorId=context.viewMode==="docs"?`addon-backgrounds-docs-${context.id}`:"addon-backgrounds-color";if(!isActive){clearStyles(selectorId);return}addBackgroundStyle(selectorId,backgroundStyles,context.viewMode==="docs"?context.id:null);},[isActive,backgroundStyles,context]),StoryFn()};var withGrid=(StoryFn,context)=>{let{globals,parameters:parameters2}=context,gridParameters=parameters2[PARAM_KEY].grid,isActive=globals[PARAM_KEY]?.grid===!0&&gridParameters.disable!==!0,{cellAmount,cellSize,opacity}=gridParameters,isInDocs=context.viewMode==="docs",defaultOffset=parameters2.layout===void 0||parameters2.layout==="padded"?16:0,offsetX=gridParameters.offsetX??(isInDocs?20:defaultOffset),offsetY=gridParameters.offsetY??(isInDocs?20:defaultOffset),gridStyles=useMemo(()=>{let selector=context.viewMode==="docs"?`#anchor--${context.id} .docs-story`:".sb-show-main",backgroundSize=[`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize}px ${cellSize}px`,`${cellSize}px ${cellSize}px`].join(", ");return `
+      ${selector} {
+        background-size: ${backgroundSize} !important;
+        background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
+        background-blend-mode: difference !important;
+        background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+         linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+         linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
+         linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
+      }
+    `},[cellSize]);return useEffect(()=>{let selectorId=context.viewMode==="docs"?`addon-backgrounds-grid-docs-${context.id}`:"addon-backgrounds-grid";if(!isActive){clearStyles(selectorId);return}addGridStyle(selectorId,gridStyles);},[isActive,gridStyles,context]),StoryFn()};var decorators=globalThis.FEATURES?.backgroundsStoryGlobals?[withBackgroundAndGrid]:[withGrid,withBackground],parameters={[PARAM_KEY]:{grid:{cellSize:20,opacity:.5,cellAmount:5},disable:!1,...!globalThis.FEATURES?.backgroundsStoryGlobals&&{values:Object.values(DEFAULT_BACKGROUNDS)}}},modern={[PARAM_KEY]:{value:void 0,grid:!1}},initialGlobals=globalThis.FEATURES?.backgroundsStoryGlobals?modern:{[PARAM_KEY]:null};var src_default=()=>definePreview(preview_exports);
 
 export { src_default as default };

package/dist/preview.d.ts

@@ -1,4 +1,4 @@
-import { Addon_DecoratorFunction } from 'storybook/internal/types';
+import * as core_dist_csf from 'storybook/internal/csf';
 
 interface Background {
     name: string;
@@ -9,7 +9,7 @@ type GlobalState = {
     grid: boolean;
 };
 
-declare const decorators: Addon_DecoratorFunction[];
+declare const decorators: core_dist_csf.DecoratorFunction[];
 declare const parameters: {
     backgrounds: {
         values?: Background[] | undefined;

package/dist/preview.js

@@ -38,7 +38,7 @@ var PARAM_KEY="backgrounds";var DEFAULT_BACKGROUNDS={light:{name:"light",value:"
          linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
          linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
       }
-    `},[cellSize]);return previewApi.useEffect(()=>{let selectorId=context.viewMode==="docs"?`addon-backgrounds-grid-docs-${context.id}`:"addon-backgrounds-grid";if(!isActive){clearStyles(selectorId);return}addGridStyle(selectorId,gridStyles);},[isActive,gridStyles,context]),StoryFn()};var decorators=FEATURES?.backgroundsStoryGlobals?[withBackgroundAndGrid]:[withGrid,withBackground],parameters={[PARAM_KEY]:{grid:{cellSize:20,opacity:.5,cellAmount:5},disable:!1,...!FEATURES?.backgroundsStoryGlobals&&{values:Object.values(DEFAULT_BACKGROUNDS)}}},modern={[PARAM_KEY]:{value:void 0,grid:!1}},initialGlobals=FEATURES?.backgroundsStoryGlobals?modern:{[PARAM_KEY]:null};
+    `},[cellSize]);return previewApi.useEffect(()=>{let selectorId=context.viewMode==="docs"?`addon-backgrounds-grid-docs-${context.id}`:"addon-backgrounds-grid";if(!isActive){clearStyles(selectorId);return}addGridStyle(selectorId,gridStyles);},[isActive,gridStyles,context]),StoryFn()};var decorators=globalThis.FEATURES?.backgroundsStoryGlobals?[withBackgroundAndGrid]:[withGrid,withBackground],parameters={[PARAM_KEY]:{grid:{cellSize:20,opacity:.5,cellAmount:5},disable:!1,...!globalThis.FEATURES?.backgroundsStoryGlobals&&{values:Object.values(DEFAULT_BACKGROUNDS)}}},modern={[PARAM_KEY]:{value:void 0,grid:!1}},initialGlobals=globalThis.FEATURES?.backgroundsStoryGlobals?modern:{[PARAM_KEY]:null};
 
 exports.decorators = decorators;
 exports.initialGlobals = initialGlobals;

package/dist/preview.mjs

@@ -36,6 +36,6 @@ var PARAM_KEY="backgrounds";var DEFAULT_BACKGROUNDS={light:{name:"light",value:"
          linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
          linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
       }
-    `},[cellSize]);return useEffect(()=>{let selectorId=context.viewMode==="docs"?`addon-backgrounds-grid-docs-${context.id}`:"addon-backgrounds-grid";if(!isActive){clearStyles(selectorId);return}addGridStyle(selectorId,gridStyles);},[isActive,gridStyles,context]),StoryFn()};var decorators=FEATURES?.backgroundsStoryGlobals?[withBackgroundAndGrid]:[withGrid,withBackground],parameters={[PARAM_KEY]:{grid:{cellSize:20,opacity:.5,cellAmount:5},disable:!1,...!FEATURES?.backgroundsStoryGlobals&&{values:Object.values(DEFAULT_BACKGROUNDS)}}},modern={[PARAM_KEY]:{value:void 0,grid:!1}},initialGlobals=FEATURES?.backgroundsStoryGlobals?modern:{[PARAM_KEY]:null};
+    `},[cellSize]);return useEffect(()=>{let selectorId=context.viewMode==="docs"?`addon-backgrounds-grid-docs-${context.id}`:"addon-backgrounds-grid";if(!isActive){clearStyles(selectorId);return}addGridStyle(selectorId,gridStyles);},[isActive,gridStyles,context]),StoryFn()};var decorators=globalThis.FEATURES?.backgroundsStoryGlobals?[withBackgroundAndGrid]:[withGrid,withBackground],parameters={[PARAM_KEY]:{grid:{cellSize:20,opacity:.5,cellAmount:5},disable:!1,...!globalThis.FEATURES?.backgroundsStoryGlobals&&{values:Object.values(DEFAULT_BACKGROUNDS)}}},modern={[PARAM_KEY]:{value:void 0,grid:!1}},initialGlobals=globalThis.FEATURES?.backgroundsStoryGlobals?modern:{[PARAM_KEY]:null};
 
 export { decorators, initialGlobals, parameters };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.6.0-alpha.4",
+  "version": "8.6.0-beta.0",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -43,6 +43,16 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -66,7 +76,7 @@
     "typescript": "^5.7.3"
   },
   "peerDependencies": {
-    "storybook": "^8.6.0-alpha.4"
+    "storybook": "^8.6.0-beta.0"
   },
   "publishConfig": {
     "access": "public"