@storybook/addon-backgrounds 7.0.0-alpha.52 → 7.0.0-alpha.54

package/dist/chunk-HZTLTKXL.mjs

@@ -0,0 +1,5 @@
+var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var EVENTS={UPDATE:`${ADDON_ID}/update`};import global from"global";import{dedent}from"ts-dedent";import{logger}from"@storybook/client-logger";var{document,window}=global,isReduceMotionEnabled=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches,getBackgroundColorByName=(currentSelectedValue,backgrounds=[],defaultName)=>{if(currentSelectedValue==="transparent")return"transparent";if(backgrounds.find(background=>background.value===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"},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)}};export{ADDON_ID,PARAM_KEY,isReduceMotionEnabled,getBackgroundColorByName,clearStyles,addGridStyle,addBackgroundStyle};

package/dist/index.mjs

@@ -1 +1 @@
-module&&module.hot&&module.hot.decline&&module.hot.decline();var e={};export{e as default};
+module&&module.hot&&module.hot.decline&&module.hot.decline();var src_default={};export{src_default as default};

package/dist/manager.js

@@ -1,5 +1,5 @@
-var _=Object.create;var A=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var K=(r,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of H(t))!O.call(r,o)&&o!==e&&A(r,o,{get:()=>t[o],enumerable:!(n=v(t,o))||n.enumerable});return r};var c=(r,t,e)=>(e=r!=null?_(F(r)):{},K(t||!r||!r.__esModule?A(e,"default",{value:r,enumerable:!0}):e,r));var d=c(require("react")),g=require("@storybook/addons");var p="storybook/background",a="backgrounds";var $={UPDATE:`${p}/update`};var i=c(require("react")),b=c(require("memoizerific")),u=require("@storybook/api"),G=require("@storybook/client-logger"),l=require("@storybook/components");var C=require("@storybook/theming"),E=C.styled.span(({background:r})=>({borderRadius:"1rem",display:"block",height:"1rem",width:"1rem",background:r}),({theme:r})=>({boxShadow:`${r.appBorderColor} 0 0 0 1px inset`}));var S=c(require("global")),M=require("ts-dedent"),I=require("@storybook/client-logger"),{document:j,window:W}=S.default;var T=(r,t=[],e)=>{if(r==="transparent")return"transparent";if(t.find(o=>o.value===r))return r;let n=t.find(o=>o.name===e);if(n)return n.value;if(e){let o=t.map(s=>s.name).join(", ");I.logger.warn(M.dedent`
+var _=Object.create;var A=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var K=(r,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of H(t))!O.call(r,o)&&o!==e&&A(r,o,{get:()=>t[o],enumerable:!(n=v(t,o))||n.enumerable});return r};var c=(r,t,e)=>(e=r!=null?_(F(r)):{},K(t||!r||!r.__esModule?A(e,"default",{value:r,enumerable:!0}):e,r));var d=c(require("react")),g=require("@storybook/manager-api");var p="storybook/background",a="backgrounds";var $={UPDATE:`${p}/update`};var i=c(require("react")),b=c(require("memoizerific")),u=require("@storybook/manager-api"),G=require("@storybook/client-logger"),l=require("@storybook/components");var C=require("@storybook/theming"),E=C.styled.span(({background:r})=>({borderRadius:"1rem",display:"block",height:"1rem",width:"1rem",background:r}),({theme:r})=>({boxShadow:`${r.appBorderColor} 0 0 0 1px inset`}));var S=c(require("global")),M=require("ts-dedent"),I=require("@storybook/client-logger"),{document:j,window:W}=S.default;var T=(r,t=[],e)=>{if(r==="transparent")return"transparent";if(t.find(o=>o.value===r))return r;let n=t.find(o=>o.name===e);if(n)return n.value;if(e){let o=t.map(s=>s.name).join(", ");I.logger.warn(M.dedent`
         Backgrounds Addon: could not find the default color "${e}".
         These are the available colors for your story based on your configuration:
         ${o}.
-      `)}return"transparent"};var x=(0,b.default)(1e3)((r,t,e,n,o,s)=>({id:r||t,title:t,onClick:()=>{o({selected:e,name:t})},value:e,right:n?i.default.createElement(E,{background:e}):void 0,active:s})),N=(0,b.default)(10)((r,t,e)=>{let n=r.map(({name:o,value:s})=>x(null,o,s,!0,e,s===t));return t!=="transparent"?[x("reset","Clear background","transparent",null,e,!1),...n]:n}),w={default:null,disable:!0,values:[]},L=(0,i.memo)(function(){var B;let t=(0,u.useParameter)(a,w),[e,n]=(0,u.useGlobals)(),o=(B=e[a])==null?void 0:B.value,s=(0,i.useMemo)(()=>T(o,t.values,t.default),[t,o]);Array.isArray(t)&&G.logger.warn("Addon Backgrounds api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md");let P=(0,i.useCallback)(y=>{n({[a]:{...e[a],value:y}})},[t,e,n]);return t.disable?null:i.default.createElement(i.Fragment,null,i.default.createElement(l.WithTooltip,{placement:"top",trigger:"click",closeOnClick:!0,tooltip:({onHide:y})=>i.default.createElement(l.TooltipLinkList,{links:N(t.values,s,({selected:h})=>{s!==h&&P(h),y()})})},i.default.createElement(l.IconButton,{key:"background",title:"Change the background of the preview",active:s!=="transparent"},i.default.createElement(l.Icons,{icon:"photo"}))))});var m=c(require("react")),f=require("@storybook/api"),k=require("@storybook/components");var D=(0,m.memo)(function(){var s;let[t,e]=(0,f.useGlobals)(),{grid:n}=(0,f.useParameter)(a,{grid:{disable:!1}});if(n!=null&&n.disable)return null;let o=((s=t[a])==null?void 0:s.grid)||!1;return m.default.createElement(k.IconButton,{key:"background",active:o,title:"Apply a grid to the preview",onClick:()=>e({[a]:{...t[a],grid:!o}})},m.default.createElement(k.Icons,{icon:"grid"}))});g.addons.register(p,()=>{g.addons.add(p,{title:"Backgrounds",type:g.types.TOOL,match:({viewMode:r})=>!!(r&&r.match(/^(story|docs)$/)),render:()=>d.default.createElement(d.Fragment,null,d.default.createElement(L,null),d.default.createElement(D,null))})});
+      `)}return"transparent"};var x=(0,b.default)(1e3)((r,t,e,n,o,s)=>({id:r||t,title:t,onClick:()=>{o({selected:e,name:t})},value:e,right:n?i.default.createElement(E,{background:e}):void 0,active:s})),N=(0,b.default)(10)((r,t,e)=>{let n=r.map(({name:o,value:s})=>x(null,o,s,!0,e,s===t));return t!=="transparent"?[x("reset","Clear background","transparent",null,e,!1),...n]:n}),w={default:null,disable:!0,values:[]},L=(0,i.memo)(function(){var B;let t=(0,u.useParameter)(a,w),[e,n]=(0,u.useGlobals)(),o=(B=e[a])==null?void 0:B.value,s=(0,i.useMemo)(()=>T(o,t.values,t.default),[t,o]);Array.isArray(t)&&G.logger.warn("Addon Backgrounds api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md");let P=(0,i.useCallback)(y=>{n({[a]:{...e[a],value:y}})},[t,e,n]);return t.disable?null:i.default.createElement(i.Fragment,null,i.default.createElement(l.WithTooltip,{placement:"top",trigger:"click",closeOnClick:!0,tooltip:({onHide:y})=>i.default.createElement(l.TooltipLinkList,{links:N(t.values,s,({selected:h})=>{s!==h&&P(h),y()})})},i.default.createElement(l.IconButton,{key:"background",title:"Change the background of the preview",active:s!=="transparent"},i.default.createElement(l.Icons,{icon:"photo"}))))});var m=c(require("react")),f=require("@storybook/manager-api"),k=require("@storybook/components");var D=(0,m.memo)(function(){var s;let[t,e]=(0,f.useGlobals)(),{grid:n}=(0,f.useParameter)(a,{grid:{disable:!1}});if(n!=null&&n.disable)return null;let o=((s=t[a])==null?void 0:s.grid)||!1;return m.default.createElement(k.IconButton,{key:"background",active:o,title:"Apply a grid to the preview",onClick:()=>e({[a]:{...t[a],grid:!o}})},m.default.createElement(k.Icons,{icon:"grid"}))});g.addons.register(p,()=>{g.addons.add(p,{title:"Backgrounds",type:g.types.TOOL,match:({viewMode:r})=>!!(r&&r.match(/^(story|docs)$/)),render:()=>d.default.createElement(d.Fragment,null,d.default.createElement(L,null),d.default.createElement(D,null))})});

package/dist/manager.mjs

@@ -1 +1 @@
-import{a as c,b as e,d as g}from"./chunk-6BSBHII6.mjs";import m,{Fragment as U}from"react";import{addons as C,types as Y}from"@storybook/addons";import s,{Fragment as A,useCallback as I,useMemo as S,memo as G}from"react";import f from"memoizerific";import{useParameter as F,useGlobals as P}from"@storybook/api";import{logger as O}from"@storybook/client-logger";import{Icons as _,IconButton as D,WithTooltip as v,TooltipLinkList as K}from"@storybook/components";import{styled as y}from"@storybook/theming";var u=y.span(({background:r})=>({borderRadius:"1rem",display:"block",height:"1rem",width:"1rem",background:r}),({theme:r})=>({boxShadow:`${r.appBorderColor} 0 0 0 1px inset`}));var p=f(1e3)((r,o,t,n,i,a)=>({id:r||o,title:o,onClick:()=>{i({selected:t,name:o})},value:t,right:n?s.createElement(u,{background:t}):void 0,active:a})),N=f(10)((r,o,t)=>{let n=r.map(({name:i,value:a})=>p(null,i,a,!0,t,a===o));return o!=="transparent"?[p("reset","Clear background","transparent",null,t,!1),...n]:n}),x={default:null,disable:!0,values:[]},k=G(function(){let o=F(e,x),[t,n]=P(),i=t[e]?.value,a=S(()=>g(i,o.values,o.default),[o,i]);Array.isArray(o)&&O.warn("Addon Backgrounds api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md");let h=I(l=>{n({[e]:{...t[e],value:l}})},[o,t,n]);return o.disable?null:s.createElement(A,null,s.createElement(v,{placement:"top",trigger:"click",closeOnClick:!0,tooltip:({onHide:l})=>s.createElement(K,{links:N(o.values,a,({selected:d})=>{a!==d&&h(d),l()})})},s.createElement(D,{key:"background",title:"Change the background of the preview",active:a!=="transparent"},s.createElement(_,{icon:"photo"}))))});import b,{memo as T}from"react";import{useGlobals as E,useParameter as M}from"@storybook/api";import{Icons as w,IconButton as L}from"@storybook/components";var B=T(function(){let[o,t]=E(),{grid:n}=M(e,{grid:{disable:!1}});if(n?.disable)return null;let i=o[e]?.grid||!1;return b.createElement(L,{key:"background",active:i,title:"Apply a grid to the preview",onClick:()=>t({[e]:{...o[e],grid:!i}})},b.createElement(w,{icon:"grid"}))});C.register(c,()=>{C.add(c,{title:"Backgrounds",type:Y.TOOL,match:({viewMode:r})=>!!(r&&r.match(/^(story|docs)$/)),render:()=>m.createElement(U,null,m.createElement(k,null),m.createElement(B,null))})});
+import{ADDON_ID,PARAM_KEY,getBackgroundColorByName}from"./chunk-HZTLTKXL.mjs";import React3,{Fragment as Fragment2}from"react";import{addons,types}from"@storybook/manager-api";import React,{Fragment,useCallback,useMemo,memo}from"react";import memoize from"memoizerific";import{useParameter,useGlobals}from"@storybook/manager-api";import{logger}from"@storybook/client-logger";import{Icons,IconButton,WithTooltip,TooltipLinkList}from"@storybook/components";import{styled}from"@storybook/theming";var ColorIcon=styled.span(({background})=>({borderRadius:"1rem",display:"block",height:"1rem",width:"1rem",background}),({theme})=>({boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`}));var createBackgroundSelectorItem=memoize(1e3)((id,name,value,hasSwatch,change,active)=>({id:id||name,title:name,onClick:()=>{change({selected:value,name})},value,right:hasSwatch?React.createElement(ColorIcon,{background:value}):void 0,active})),getDisplayedItems=memoize(10)((backgrounds,selectedBackgroundColor,change)=>{let backgroundSelectorItems=backgrounds.map(({name,value})=>createBackgroundSelectorItem(null,name,value,!0,change,value===selectedBackgroundColor));return selectedBackgroundColor!=="transparent"?[createBackgroundSelectorItem("reset","Clear background","transparent",null,change,!1),...backgroundSelectorItems]:backgroundSelectorItems}),DEFAULT_BACKGROUNDS_CONFIG={default:null,disable:!0,values:[]},BackgroundSelector=memo(function(){let backgroundsConfig=useParameter(PARAM_KEY,DEFAULT_BACKGROUNDS_CONFIG),[globals,updateGlobals]=useGlobals(),globalsBackgroundColor=globals[PARAM_KEY]?.value,selectedBackgroundColor=useMemo(()=>getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]);Array.isArray(backgroundsConfig)&&logger.warn("Addon Backgrounds api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md");let onBackgroundChange=useCallback(value=>{updateGlobals({[PARAM_KEY]:{...globals[PARAM_KEY],value}})},[backgroundsConfig,globals,updateGlobals]);return backgroundsConfig.disable?null:React.createElement(Fragment,null,React.createElement(WithTooltip,{placement:"top",trigger:"click",closeOnClick:!0,tooltip:({onHide})=>React.createElement(TooltipLinkList,{links:getDisplayedItems(backgroundsConfig.values,selectedBackgroundColor,({selected})=>{selectedBackgroundColor!==selected&&onBackgroundChange(selected),onHide()})})},React.createElement(IconButton,{key:"background",title:"Change the background of the preview",active:selectedBackgroundColor!=="transparent"},React.createElement(Icons,{icon:"photo"}))))});import React2,{memo as memo2}from"react";import{useGlobals as useGlobals2,useParameter as useParameter2}from"@storybook/manager-api";import{Icons as Icons2,IconButton as IconButton2}from"@storybook/components";var GridSelector=memo2(function(){let[globals,updateGlobals]=useGlobals2(),{grid}=useParameter2(PARAM_KEY,{grid:{disable:!1}});if(grid?.disable)return null;let isActive=globals[PARAM_KEY]?.grid||!1;return React2.createElement(IconButton2,{key:"background",active:isActive,title:"Apply a grid to the preview",onClick:()=>updateGlobals({[PARAM_KEY]:{...globals[PARAM_KEY],grid:!isActive}})},React2.createElement(Icons2,{icon:"grid"}))});addons.register(ADDON_ID,()=>{addons.add(ADDON_ID,{title:"Backgrounds",type:types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:()=>React3.createElement(Fragment2,null,React3.createElement(BackgroundSelector,null),React3.createElement(GridSelector,null))})});

package/dist/preview.js

@@ -1,4 +1,4 @@
-var H=Object.create;var b=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var D=(r,e)=>{for(var o in e)b(r,o,{get:e[o],enumerable:!0})},E=(r,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of F(e))!Y.call(r,t)&&t!==o&&b(r,t,{get:()=>e[t],enumerable:!(n=_(e,t))||n.enumerable});return r};var G=(r,e,o)=>(o=r!=null?H(K(r)):{},E(e||!r||!r.__esModule?b(o,"default",{value:r,enumerable:!0}):o,r)),I=r=>E(b({},"__esModule",{value:!0}),r);var q={};D(q,{decorators:()=>U,globals:()=>X,parameters:()=>j});module.exports=I(q);var g=require("@storybook/addons");var z="storybook/background",d="backgrounds";var Q={UPDATE:`${z}/update`};var A=G(require("global")),B=require("ts-dedent"),h=require("@storybook/client-logger"),{document:c,window:N}=A.default,R=()=>N.matchMedia("(prefers-reduced-motion: reduce)").matches,v=(r,e=[],o)=>{if(r==="transparent")return"transparent";if(e.find(t=>t.value===r))return r;let n=e.find(t=>t.name===o);if(n)return n.value;if(o){let t=e.map(i=>i.name).join(", ");h.logger.warn(B.dedent`
+var H=Object.create;var b=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var D=(r,e)=>{for(var o in e)b(r,o,{get:e[o],enumerable:!0})},E=(r,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of F(e))!Y.call(r,t)&&t!==o&&b(r,t,{get:()=>e[t],enumerable:!(n=_(e,t))||n.enumerable});return r};var G=(r,e,o)=>(o=r!=null?H(K(r)):{},E(e||!r||!r.__esModule?b(o,"default",{value:r,enumerable:!0}):o,r)),I=r=>E(b({},"__esModule",{value:!0}),r);var q={};D(q,{decorators:()=>U,globals:()=>X,parameters:()=>j});module.exports=I(q);var g=require("@storybook/preview-api");var z="storybook/background",d="backgrounds";var Q={UPDATE:`${z}/update`};var A=G(require("global")),B=require("ts-dedent"),h=require("@storybook/client-logger"),{document:c,window:N}=A.default,R=()=>N.matchMedia("(prefers-reduced-motion: reduce)").matches,v=(r,e=[],o)=>{if(r==="transparent")return"transparent";if(e.find(t=>t.value===r))return r;let n=e.find(t=>t.name===o);if(n)return n.value;if(o){let t=e.map(i=>i.name).join(", ");h.logger.warn(B.dedent`
         Backgrounds Addon: could not find the default color "${o}".
         These are the available colors for your story based on your configuration:
         ${t}.
@@ -7,7 +7,7 @@ var H=Object.create;var b=Object.defineProperty;var _=Object.getOwnPropertyDescr
         background: ${s} !important;
         ${R()?"":p}
       }
-    `},[s,l]);return(0,g.useEffect)(()=>{let p=e.viewMode==="docs"?`addon-backgrounds-docs-${e.id}`:"addon-backgrounds-color";if(!a){$(p);return}C(p,u,e.viewMode==="docs"?e.id:null)},[a,u,e]),r()};var x=require("@storybook/addons");var L=(r,e)=>{var S;let{globals:o,parameters:n}=e,t=n[d].grid,i=((S=o[d])==null?void 0:S.grid)===!0&&t.disable!==!0,{cellAmount:s,cellSize:a,opacity:l}=t,u=e.viewMode==="docs",p=n.layout===void 0||n.layout==="padded"?16:0,m=t.offsetX??(u?20:p),f=t.offsetY??(u?20:p),k=(0,x.useMemo)(()=>{let y=e.viewMode==="docs"?`#anchor--${e.id} .docs-story`:".sb-show-main",P=[`${a*s}px ${a*s}px`,`${a*s}px ${a*s}px`,`${a}px ${a}px`,`${a}px ${a}px`].join(", ");return`
+    `},[s,l]);return(0,g.useEffect)(()=>{let p=e.viewMode==="docs"?`addon-backgrounds-docs-${e.id}`:"addon-backgrounds-color";if(!a){$(p);return}C(p,u,e.viewMode==="docs"?e.id:null)},[a,u,e]),r()};var x=require("@storybook/preview-api");var L=(r,e)=>{var S;let{globals:o,parameters:n}=e,t=n[d].grid,i=((S=o[d])==null?void 0:S.grid)===!0&&t.disable!==!0,{cellAmount:s,cellSize:a,opacity:l}=t,u=e.viewMode==="docs",p=n.layout===void 0||n.layout==="padded"?16:0,m=t.offsetX??(u?20:p),f=t.offsetY??(u?20:p),k=(0,x.useMemo)(()=>{let y=e.viewMode==="docs"?`#anchor--${e.id} .docs-story`:".sb-show-main",P=[`${a*s}px ${a*s}px`,`${a*s}px ${a*s}px`,`${a}px ${a}px`,`${a}px ${a}px`].join(", ");return`
       ${y} {
         background-size: ${P} !important;
         background-position: ${m}px ${f}px, ${m}px ${f}px, ${m}px ${f}px, ${m}px ${f}px !important;

package/dist/preview.mjs

@@ -1,16 +1,16 @@
-import{b as t,c as k,d as S,e as g,f as x,g as A}from"./chunk-6BSBHII6.mjs";import{useMemo as y,useEffect as w}from"@storybook/addons";var M=(m,o)=>{let{globals:f,parameters:d}=o,n=f[t]?.value,a=d[t],e=y(()=>a.disable?"transparent":S(n,a.values,a.default),[a,n]),r=y(()=>e&&e!=="transparent",[e]),s=o.viewMode==="docs"?`#anchor--${o.id} .docs-story`:".sb-show-main",i=y(()=>{let c="transition: background-color 0.3s;";return`
-      ${s} {
-        background: ${e} !important;
-        ${k()?"":c}
+import{PARAM_KEY,addBackgroundStyle,addGridStyle,clearStyles,getBackgroundColorByName,isReduceMotionEnabled}from"./chunk-HZTLTKXL.mjs";import{useMemo,useEffect}from"@storybook/preview-api";var withBackground=(StoryFn,context)=>{let{globals:globals2,parameters:parameters2}=context,globalsBackgroundColor=globals2[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(()=>{let transitionStyle="transition: background-color 0.3s;";return`
+      ${selector} {
+        background: ${selectedBackgroundColor} !important;
+        ${isReduceMotionEnabled()?"":transitionStyle}
       }
-    `},[e,s]);return w(()=>{let c=o.viewMode==="docs"?`addon-backgrounds-docs-${o.id}`:"addon-backgrounds-color";if(!r){g(c);return}A(c,i,o.viewMode==="docs"?o.id:null)},[r,i,o]),m()};import{useMemo as C,useEffect as P}from"@storybook/addons";var R=(m,o)=>{let{globals:f,parameters:d}=o,n=d[t].grid,a=f[t]?.grid===!0&&n.disable!==!0,{cellAmount:e,cellSize:r,opacity:s}=n,i=o.viewMode==="docs",b=d.layout===void 0||d.layout==="padded"?16:0,p=n.offsetX??(i?20:b),l=n.offsetY??(i?20:b),$=C(()=>{let u=o.viewMode==="docs"?`#anchor--${o.id} .docs-story`:".sb-show-main",v=[`${r*e}px ${r*e}px`,`${r*e}px ${r*e}px`,`${r}px ${r}px`,`${r}px ${r}px`].join(", ");return`
-      ${u} {
-        background-size: ${v} !important;
-        background-position: ${p}px ${l}px, ${p}px ${l}px, ${p}px ${l}px, ${p}px ${l}px !important;
+    `},[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()};import{useMemo as useMemo2,useEffect as useEffect2}from"@storybook/preview-api";var withGrid=(StoryFn,context)=>{let{globals:globals2,parameters:parameters2}=context,gridParameters=parameters2[PARAM_KEY].grid,isActive=globals2[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=useMemo2(()=>{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, ${s}) 1px, transparent 1px),
-         linear-gradient(90deg, rgba(130, 130, 130, ${s}) 1px, transparent 1px),
-         linear-gradient(rgba(130, 130, 130, ${s/2}) 1px, transparent 1px),
-         linear-gradient(90deg, rgba(130, 130, 130, ${s/2}) 1px, transparent 1px) !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;
       }
-    `},[r]);return P(()=>{let u=o.viewMode==="docs"?`addon-backgrounds-grid-docs-${o.id}`:"addon-backgrounds-grid";if(!a){g(u);return}x(u,$)},[a,$,o]),m()};var N=[R,M],O={[t]:{grid:{cellSize:20,opacity:.5,cellAmount:5},values:[{name:"light",value:"#F8F8F8"},{name:"dark",value:"#333333"}]}},L={[t]:null};export{N as decorators,L as globals,O as parameters};
+    `},[cellSize]);return useEffect2(()=>{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=[withGrid,withBackground],parameters={[PARAM_KEY]:{grid:{cellSize:20,opacity:.5,cellAmount:5},values:[{name:"light",value:"#F8F8F8"},{name:"dark",value:"#333333"}]}},globals={[PARAM_KEY]:null};export{decorators,globals,parameters};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.0.0-alpha.52",
+  "version": "7.0.0-alpha.54",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -75,13 +75,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.52",
-    "@storybook/api": "7.0.0-alpha.52",
-    "@storybook/client-logger": "7.0.0-alpha.52",
-    "@storybook/components": "7.0.0-alpha.52",
-    "@storybook/core-events": "7.0.0-alpha.52",
-    "@storybook/theming": "7.0.0-alpha.52",
-    "@storybook/types": "7.0.0-alpha.52",
+    "@storybook/client-logger": "7.0.0-alpha.54",
+    "@storybook/components": "7.0.0-alpha.54",
+    "@storybook/core-events": "7.0.0-alpha.54",
+    "@storybook/manager-api": "7.0.0-alpha.54",
+    "@storybook/preview-api": "7.0.0-alpha.54",
+    "@storybook/theming": "7.0.0-alpha.54",
+    "@storybook/types": "7.0.0-alpha.54",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
     "ts-dedent": "^2.0.0"
@@ -111,7 +111,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "d2494e3f51ce0f55bcb1ef693a6477c669fbe666",
+  "gitHead": "91177d4e27daec556a24ae6223c3cbe17a998d9b",
   "storybook": {
     "displayName": "Backgrounds",
     "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",

package/dist/chunk-6BSBHII6.mjs

@@ -1,5 +0,0 @@
-var d="storybook/background",f="backgrounds";var y={UPDATE:`${d}/update`};import l from"global";import{dedent as c}from"ts-dedent";import{logger as g}from"@storybook/client-logger";var{document:i,window:m}=l,x=()=>m.matchMedia("(prefers-reduced-motion: reduce)").matches,B=(e,t=[],n)=>{if(e==="transparent")return"transparent";if(t.find(o=>o.value===e))return e;let r=t.find(o=>o.name===n);if(r)return r.value;if(n){let o=t.map(s=>s.name).join(", ");g.warn(c`
-        Backgrounds Addon: could not find the default color "${n}".
-        These are the available colors for your story based on your configuration:
-        ${o}.
-      `)}return"transparent"},H=e=>{(Array.isArray(e)?e:[e]).forEach(p)},p=e=>{let t=i.getElementById(e);t&&t.parentElement.removeChild(t)},L=(e,t)=>{let n=i.getElementById(e);if(n)n.innerHTML!==t&&(n.innerHTML=t);else{let r=i.createElement("style");r.setAttribute("id",e),r.innerHTML=t,i.head.appendChild(r)}},h=(e,t,n)=>{let r=i.getElementById(e);if(r)r.innerHTML!==t&&(r.innerHTML=t);else{let o=i.createElement("style");o.setAttribute("id",e),o.innerHTML=t;let s=`addon-backgrounds-grid${n?`-docs-${n}`:""}`,a=i.getElementById(s);a?a.parentElement.insertBefore(o,a):i.head.appendChild(o)}};export{d as a,f as b,x as c,B as d,H as e,L as f,h as g};