@storybook/addon-backgrounds 6.5.7 → 7.0.0-alpha.0

package/dist/esm/components/ColorIcon.js

@@ -1,16 +1,14 @@
 import { styled } from '@storybook/theming';
-export var ColorIcon = styled.span(function (_ref) {
-  var background = _ref.background;
-  return {
-    borderRadius: '1rem',
-    display: 'block',
-    height: '1rem',
-    width: '1rem',
-    background: background
-  };
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    boxShadow: "".concat(theme.appBorderColor, " 0 0 0 1px inset")
-  };
-});
+export const ColorIcon = styled.span(({
+  background
+}) => ({
+  borderRadius: '1rem',
+  display: 'block',
+  height: '1rem',
+  width: '1rem',
+  background
+}), ({
+  theme
+}) => ({
+  boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`
+}));

package/dist/esm/constants.js

@@ -1,6 +1,6 @@
-export var ADDON_ID = 'storybook/background';
-export var PARAM_KEY = 'backgrounds';
-export var GRID_PARAM_KEY = 'grid';
-export var EVENTS = {
-  UPDATE: "".concat(ADDON_ID, "/update")
+export const ADDON_ID = 'storybook/background';
+export const PARAM_KEY = 'backgrounds';
+export const GRID_PARAM_KEY = 'grid';
+export const EVENTS = {
+  UPDATE: `${ADDON_ID}/update`
 };

package/dist/esm/containers/BackgroundSelector.js

@@ -1,39 +1,3 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.function.name.js";
-import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.array.iterator.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/web.dom-collections.iterator.js";
-import "core-js/modules/es.object.assign.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.symbol.iterator.js";
-import "core-js/modules/es.string.iterator.js";
-import "core-js/modules/es.array.from.js";
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.regexp.exec.js";
 import React, { Fragment, useCallback, useMemo, memo } from 'react';
 import memoize from 'memoizerific';
 import { useParameter, useGlobals } from '@storybook/api';
@@ -42,53 +6,43 @@ import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/comp
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import { ColorIcon } from '../components/ColorIcon';
 import { getBackgroundColorByName } from '../helpers';
-var createBackgroundSelectorItem = memoize(1000)(function (id, name, value, hasSwatch, change, active) {
-  return {
-    id: id || name,
-    title: name,
-    onClick: function onClick() {
-      change({
-        selected: value,
-        name: name
-      });
-    },
-    value: value,
-    right: hasSwatch ? /*#__PURE__*/React.createElement(ColorIcon, {
-      background: value
-    }) : undefined,
-    active: active
-  };
-});
-var getDisplayedItems = memoize(10)(function (backgrounds, selectedBackgroundColor, change) {
-  var backgroundSelectorItems = backgrounds.map(function (_ref) {
-    var name = _ref.name,
-        value = _ref.value;
-    return createBackgroundSelectorItem(null, name, value, true, change, value === selectedBackgroundColor);
-  });
+const createBackgroundSelectorItem = memoize(1000)((id, name, value, hasSwatch, change, active) => ({
+  id: id || name,
+  title: name,
+  onClick: () => {
+    change({
+      selected: value,
+      name
+    });
+  },
+  value,
+  right: hasSwatch ? /*#__PURE__*/React.createElement(ColorIcon, {
+    background: value
+  }) : undefined,
+  active
+}));
+const getDisplayedItems = memoize(10)((backgrounds, selectedBackgroundColor, change) => {
+  const backgroundSelectorItems = backgrounds.map(({
+    name,
+    value
+  }) => createBackgroundSelectorItem(null, name, value, true, change, value === selectedBackgroundColor));
 
   if (selectedBackgroundColor !== 'transparent') {
-    return [createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change, false)].concat(_toConsumableArray(backgroundSelectorItems));
+    return [createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change, false), ...backgroundSelectorItems];
   }
 
   return backgroundSelectorItems;
 });
-var DEFAULT_BACKGROUNDS_CONFIG = {
+const DEFAULT_BACKGROUNDS_CONFIG = {
   default: null,
   disable: true,
   values: []
 };
-export var BackgroundSelector = /*#__PURE__*/memo(function () {
-  var _globals$BACKGROUNDS_;
-
-  var backgroundsConfig = useParameter(BACKGROUNDS_PARAM_KEY, DEFAULT_BACKGROUNDS_CONFIG);
-
-  var _useGlobals = useGlobals(),
-      _useGlobals2 = _slicedToArray(_useGlobals, 2),
-      globals = _useGlobals2[0],
-      updateGlobals = _useGlobals2[1];
-
-  var globalsBackgroundColor = (_globals$BACKGROUNDS_ = globals[BACKGROUNDS_PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.value;
-  var selectedBackgroundColor = useMemo(function () {
+export const BackgroundSelector = /*#__PURE__*/memo(() => {
+  const backgroundsConfig = useParameter(BACKGROUNDS_PARAM_KEY, DEFAULT_BACKGROUNDS_CONFIG);
+  const [globals, updateGlobals] = useGlobals();
+  const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;
+  const selectedBackgroundColor = useMemo(() => {
     return getBackgroundColorByName(globalsBackgroundColor, backgroundsConfig.values, backgroundsConfig.default);
   }, [backgroundsConfig, globalsBackgroundColor]);
 
@@ -96,10 +50,12 @@ export var BackgroundSelector = /*#__PURE__*/memo(function () {
     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');
   }
 
-  var onBackgroundChange = useCallback(function (value) {
-    updateGlobals(_defineProperty({}, BACKGROUNDS_PARAM_KEY, Object.assign({}, globals[BACKGROUNDS_PARAM_KEY], {
-      value: value
-    })));
+  const onBackgroundChange = useCallback(value => {
+    updateGlobals({
+      [BACKGROUNDS_PARAM_KEY]: Object.assign({}, globals[BACKGROUNDS_PARAM_KEY], {
+        value
+      })
+    });
   }, [backgroundsConfig, globals, updateGlobals]);
 
   if (backgroundsConfig.disable) {
@@ -110,12 +66,13 @@ export var BackgroundSelector = /*#__PURE__*/memo(function () {
     placement: "top",
     trigger: "click",
     closeOnClick: true,
-    tooltip: function tooltip(_ref2) {
-      var onHide = _ref2.onHide;
+    tooltip: ({
+      onHide
+    }) => {
       return /*#__PURE__*/React.createElement(TooltipLinkList, {
-        links: getDisplayedItems(backgroundsConfig.values, selectedBackgroundColor, function (_ref3) {
-          var selected = _ref3.selected;
-
+        links: getDisplayedItems(backgroundsConfig.values, selectedBackgroundColor, ({
+          selected
+        }) => {
           if (selectedBackgroundColor !== selected) {
             onBackgroundChange(selected);
           }

package/dist/esm/containers/GridSelector.js

@@ -1,63 +1,31 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-import "core-js/modules/es.object.assign.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.symbol.iterator.js";
-import "core-js/modules/es.array.iterator.js";
-import "core-js/modules/es.string.iterator.js";
-import "core-js/modules/web.dom-collections.iterator.js";
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.function.name.js";
-import "core-js/modules/es.array.from.js";
-import "core-js/modules/es.regexp.exec.js";
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 import React, { memo } from 'react';
 import { useGlobals, useParameter } from '@storybook/api';
 import { Icons, IconButton } from '@storybook/components';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
-export var GridSelector = /*#__PURE__*/memo(function () {
-  var _globals$BACKGROUNDS_;
-
-  var _useGlobals = useGlobals(),
-      _useGlobals2 = _slicedToArray(_useGlobals, 2),
-      globals = _useGlobals2[0],
-      updateGlobals = _useGlobals2[1];
-
-  var _useParameter = useParameter(BACKGROUNDS_PARAM_KEY, {
+export const GridSelector = /*#__PURE__*/memo(() => {
+  const [globals, updateGlobals] = useGlobals();
+  const {
+    grid
+  } = useParameter(BACKGROUNDS_PARAM_KEY, {
     grid: {
       disable: false
     }
-  }),
-      grid = _useParameter.grid;
+  });
 
-  if (grid !== null && grid !== void 0 && grid.disable) {
+  if (grid?.disable) {
     return null;
   }
 
-  var isActive = ((_globals$BACKGROUNDS_ = globals[BACKGROUNDS_PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.grid) || false;
+  const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid || false;
   return /*#__PURE__*/React.createElement(IconButton, {
     key: "background",
     active: isActive,
     title: "Apply a grid to the preview",
-    onClick: function onClick() {
-      return updateGlobals(_defineProperty({}, BACKGROUNDS_PARAM_KEY, Object.assign({}, globals[BACKGROUNDS_PARAM_KEY], {
+    onClick: () => updateGlobals({
+      [BACKGROUNDS_PARAM_KEY]: Object.assign({}, globals[BACKGROUNDS_PARAM_KEY], {
         grid: !isActive
-      })));
-    }
+      })
+    })
   }, /*#__PURE__*/React.createElement(Icons, {
     icon: "grid"
   }));

package/dist/esm/decorators/withBackground.js

@@ -1,34 +1,33 @@
-import "core-js/modules/es.array.iterator.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/web.dom-collections.iterator.js";
-import "core-js/modules/es.array.concat.js";
 import { useMemo, useEffect } from '@storybook/addons';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import { clearStyles, addBackgroundStyle, getBackgroundColorByName, isReduceMotionEnabled } from '../helpers';
-export var withBackground = function withBackground(StoryFn, context) {
-  var _globals$BACKGROUNDS_;
-
-  var globals = context.globals,
-      parameters = context.parameters;
-  var globalsBackgroundColor = (_globals$BACKGROUNDS_ = globals[BACKGROUNDS_PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.value;
-  var backgroundsConfig = parameters[BACKGROUNDS_PARAM_KEY];
-  var selectedBackgroundColor = useMemo(function () {
+export const withBackground = (StoryFn, context) => {
+  const {
+    globals,
+    parameters
+  } = context;
+  const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;
+  const backgroundsConfig = parameters[BACKGROUNDS_PARAM_KEY];
+  const selectedBackgroundColor = useMemo(() => {
     if (backgroundsConfig.disable) {
       return 'transparent';
     }
 
     return getBackgroundColorByName(globalsBackgroundColor, backgroundsConfig.values, backgroundsConfig.default);
   }, [backgroundsConfig, globalsBackgroundColor]);
-  var isActive = useMemo(function () {
-    return selectedBackgroundColor && selectedBackgroundColor !== 'transparent';
-  }, [selectedBackgroundColor]);
-  var selector = context.viewMode === 'docs' ? "#anchor--".concat(context.id, " .docs-story") : '.sb-show-main';
-  var backgroundStyles = useMemo(function () {
-    var transitionStyle = 'transition: background-color 0.3s;';
-    return "\n      ".concat(selector, " {\n        background: ").concat(selectedBackgroundColor, " !important;\n        ").concat(isReduceMotionEnabled() ? '' : transitionStyle, "\n      }\n    ");
+  const isActive = useMemo(() => selectedBackgroundColor && selectedBackgroundColor !== 'transparent', [selectedBackgroundColor]);
+  const selector = context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
+  const backgroundStyles = useMemo(() => {
+    const transitionStyle = 'transition: background-color 0.3s;';
+    return `
+      ${selector} {
+        background: ${selectedBackgroundColor} !important;
+        ${isReduceMotionEnabled() ? '' : transitionStyle}
+      }
+    `;
   }, [selectedBackgroundColor, selector]);
-  useEffect(function () {
-    var selectorId = context.viewMode === 'docs' ? "addon-backgrounds-docs-".concat(context.id) : "addon-backgrounds-color";
+  useEffect(() => {
+    const selectorId = context.viewMode === 'docs' ? `addon-backgrounds-docs-${context.id}` : `addon-backgrounds-color`;
 
     if (!isActive) {
       clearStyles(selectorId);

package/dist/esm/decorators/withGrid.js

@@ -1,51 +1,58 @@
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.object.freeze.js";
-
-var _templateObject;
-
-import "core-js/modules/es.array.join.js";
-import "core-js/modules/es.array.concat.js";
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 import dedent from 'ts-dedent';
 import deprecate from 'util-deprecate';
 import { useMemo, useEffect } from '@storybook/addons';
 import { clearStyles, addGridStyle } from '../helpers';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
-var deprecatedCellSizeWarning = deprecate(function () {}, dedent(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    Backgrounds Addon: The cell size parameter has been changed.\n\n    - parameters.grid.cellSize should now be parameters.backgrounds.grid.cellSize\n    See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-grid-parameter\n  "]))));
-export var withGrid = function withGrid(StoryFn, context) {
-  var _globals$BACKGROUNDS_, _parameters$grid, _gridParameters$offse, _gridParameters$offse2;
+const deprecatedCellSizeWarning = deprecate(() => {}, dedent`
+    Backgrounds Addon: The cell size parameter has been changed.
 
-  var globals = context.globals,
-      parameters = context.parameters;
-  var gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid;
-  var isActive = ((_globals$BACKGROUNDS_ = globals[BACKGROUNDS_PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.grid) === true && gridParameters.disable !== true;
-  var cellAmount = gridParameters.cellAmount,
-      cellSize = gridParameters.cellSize,
-      opacity = gridParameters.opacity;
-  var isInDocs = context.viewMode === 'docs';
-  var gridSize;
+    - parameters.grid.cellSize should now be parameters.backgrounds.grid.cellSize
+    See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-grid-parameter
+  `);
+export const withGrid = (StoryFn, context) => {
+  const {
+    globals,
+    parameters
+  } = context;
+  const gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid;
+  const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid === true && gridParameters.disable !== true;
+  const {
+    cellAmount,
+    cellSize,
+    opacity
+  } = gridParameters;
+  const isInDocs = context.viewMode === 'docs';
+  let gridSize;
 
-  if ((_parameters$grid = parameters.grid) !== null && _parameters$grid !== void 0 && _parameters$grid.cellSize) {
+  if (parameters.grid?.cellSize) {
     gridSize = parameters.grid.cellSize;
     deprecatedCellSizeWarning();
   } else {
     gridSize = cellSize;
   }
 
-  var isLayoutPadded = parameters.layout === undefined || parameters.layout === 'padded'; // 16px offset in the grid to account for padded layout
+  const isLayoutPadded = parameters.layout === undefined || parameters.layout === 'padded'; // 16px offset in the grid to account for padded layout
 
-  var defaultOffset = isLayoutPadded ? 16 : 0;
-  var offsetX = (_gridParameters$offse = gridParameters.offsetX) !== null && _gridParameters$offse !== void 0 ? _gridParameters$offse : isInDocs ? 20 : defaultOffset;
-  var offsetY = (_gridParameters$offse2 = gridParameters.offsetY) !== null && _gridParameters$offse2 !== void 0 ? _gridParameters$offse2 : isInDocs ? 20 : defaultOffset;
-  var gridStyles = useMemo(function () {
-    var selector = context.viewMode === 'docs' ? "#anchor--".concat(context.id, " .docs-story") : '.sb-show-main';
-    var backgroundSize = ["".concat(gridSize * cellAmount, "px ").concat(gridSize * cellAmount, "px"), "".concat(gridSize * cellAmount, "px ").concat(gridSize * cellAmount, "px"), "".concat(gridSize, "px ").concat(gridSize, "px"), "".concat(gridSize, "px ").concat(gridSize, "px")].join(', ');
-    return "\n      ".concat(selector, " {\n        background-size: ").concat(backgroundSize, " !important;\n        background-position: ").concat(offsetX, "px ").concat(offsetY, "px, ").concat(offsetX, "px ").concat(offsetY, "px, ").concat(offsetX, "px ").concat(offsetY, "px, ").concat(offsetX, "px ").concat(offsetY, "px !important;\n        background-blend-mode: difference !important;\n        background-image: linear-gradient(rgba(130, 130, 130, ").concat(opacity, ") 1px, transparent 1px),\n         linear-gradient(90deg, rgba(130, 130, 130, ").concat(opacity, ") 1px, transparent 1px),\n         linear-gradient(rgba(130, 130, 130, ").concat(opacity / 2, ") 1px, transparent 1px),\n         linear-gradient(90deg, rgba(130, 130, 130, ").concat(opacity / 2, ") 1px, transparent 1px) !important;\n      }\n    ");
+  const defaultOffset = isLayoutPadded ? 16 : 0;
+  const offsetX = gridParameters.offsetX ?? (isInDocs ? 20 : defaultOffset);
+  const offsetY = gridParameters.offsetY ?? (isInDocs ? 20 : defaultOffset);
+  const gridStyles = useMemo(() => {
+    const selector = context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
+    const backgroundSize = [`${gridSize * cellAmount}px ${gridSize * cellAmount}px`, `${gridSize * cellAmount}px ${gridSize * cellAmount}px`, `${gridSize}px ${gridSize}px`, `${gridSize}px ${gridSize}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;
+      }
+    `;
   }, [gridSize]);
-  useEffect(function () {
-    var selectorId = context.viewMode === 'docs' ? "addon-backgrounds-grid-docs-".concat(context.id) : "addon-backgrounds-grid";
+  useEffect(() => {
+    const selectorId = context.viewMode === 'docs' ? `addon-backgrounds-grid-docs-${context.id}` : `addon-backgrounds-grid`;
 
     if (!isActive) {
       clearStyles(selectorId);

package/dist/esm/helpers/index.js

@@ -1,97 +1,81 @@
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.object.freeze.js";
-
-var _templateObject;
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-import "core-js/modules/es.array.find.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.function.name.js";
-import "core-js/modules/es.array.join.js";
-import "core-js/modules/es.array.map.js";
-import "core-js/modules/web.dom-collections.for-each.js";
 import global from 'global';
 import dedent from 'ts-dedent';
 import { logger } from '@storybook/client-logger';
-var document = global.document,
-    window = global.window;
-export var isReduceMotionEnabled = function isReduceMotionEnabled() {
-  var prefersReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+const {
+  document,
+  window
+} = global;
+export const isReduceMotionEnabled = () => {
+  const prefersReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
   return prefersReduceMotion.matches;
 };
-export var getBackgroundColorByName = function getBackgroundColorByName(currentSelectedValue) {
-  var backgrounds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  var defaultName = arguments.length > 2 ? arguments[2] : undefined;
-
+export const getBackgroundColorByName = (currentSelectedValue, backgrounds = [], defaultName) => {
   if (currentSelectedValue === 'transparent') {
     return 'transparent';
   }
 
-  if (backgrounds.find(function (background) {
-    return background.value === currentSelectedValue;
-  })) {
+  if (backgrounds.find(background => background.value === currentSelectedValue)) {
     return currentSelectedValue;
   }
 
-  var defaultBackground = backgrounds.find(function (background) {
-    return background.name === defaultName;
-  });
+  const defaultBackground = backgrounds.find(background => background.name === defaultName);
 
   if (defaultBackground) {
     return defaultBackground.value;
   }
 
   if (defaultName) {
-    var availableColors = backgrounds.map(function (background) {
-      return background.name;
-    }).join(', ');
-    logger.warn(dedent(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        Backgrounds Addon: could not find the default color \"", "\".\n        These are the available colors for your story based on your configuration:\n        ", ".\n      "])), defaultName, availableColors));
+    const 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';
 };
-export var clearStyles = function clearStyles(selector) {
-  var selectors = Array.isArray(selector) ? selector : [selector];
+export const clearStyles = selector => {
+  const selectors = Array.isArray(selector) ? selector : [selector];
   selectors.forEach(clearStyle);
 };
 
-var clearStyle = function clearStyle(selector) {
-  var element = document.getElementById(selector);
+const clearStyle = selector => {
+  const element = document.getElementById(selector);
 
   if (element) {
     element.parentElement.removeChild(element);
   }
 };
 
-export var addGridStyle = function addGridStyle(selector, css) {
-  var existingStyle = document.getElementById(selector);
+export const addGridStyle = (selector, css) => {
+  const existingStyle = document.getElementById(selector);
 
   if (existingStyle) {
     if (existingStyle.innerHTML !== css) {
       existingStyle.innerHTML = css;
     }
   } else {
-    var style = document.createElement('style');
+    const style = document.createElement('style');
     style.setAttribute('id', selector);
     style.innerHTML = css;
     document.head.appendChild(style);
   }
 };
-export var addBackgroundStyle = function addBackgroundStyle(selector, css, storyId) {
-  var existingStyle = document.getElementById(selector);
+export const addBackgroundStyle = (selector, css, storyId) => {
+  const existingStyle = document.getElementById(selector);
 
   if (existingStyle) {
     if (existingStyle.innerHTML !== css) {
       existingStyle.innerHTML = css;
     }
   } else {
-    var style = document.createElement('style');
+    const style = document.createElement('style');
     style.setAttribute('id', selector);
     style.innerHTML = css;
-    var gridStyleSelector = "addon-backgrounds-grid".concat(storyId ? "-docs-".concat(storyId) : ''); // If grids already exist, we want to add the style tag BEFORE it so the background doesn't override grid
+    const gridStyleSelector = `addon-backgrounds-grid${storyId ? `-docs-${storyId}` : ''}`; // If grids already exist, we want to add the style tag BEFORE it so the background doesn't override grid
 
-    var existingGridStyle = document.getElementById(gridStyleSelector);
+    const existingGridStyle = document.getElementById(gridStyleSelector);
 
     if (existingGridStyle) {
       existingGridStyle.parentElement.insertBefore(style, existingGridStyle);

package/dist/esm/manager.js

@@ -1,20 +1,15 @@
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.string.match.js";
 import React, { Fragment } from 'react';
 import { addons, types } from '@storybook/addons';
 import { ADDON_ID } from './constants';
 import { BackgroundSelector } from './containers/BackgroundSelector';
 import { GridSelector } from './containers/GridSelector';
-addons.register(ADDON_ID, function () {
+addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {
     title: 'Backgrounds',
     type: types.TOOL,
-    match: function match(_ref) {
-      var viewMode = _ref.viewMode;
-      return !!(viewMode && viewMode.match(/^(story|docs)$/));
-    },
-    render: function render() {
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BackgroundSelector, null), /*#__PURE__*/React.createElement(GridSelector, null));
-    }
+    match: ({
+      viewMode
+    }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: () => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BackgroundSelector, null), /*#__PURE__*/React.createElement(GridSelector, null))
   });
 });

package/dist/esm/preview.js

@@ -1,7 +1,7 @@
 import { withBackground } from './decorators/withBackground';
 import { withGrid } from './decorators/withGrid';
-export var decorators = [withGrid, withBackground];
-export var parameters = {
+export const decorators = [withGrid, withBackground];
+export const parameters = {
   backgrounds: {
     grid: {
       cellSize: 20,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "6.5.7",
+  "version": "7.0.0-alpha.0",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -27,14 +27,7 @@
   "author": "jbaxleyiii",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "types": "dist/ts3.9/index.d.ts",
-  "typesVersions": {
-    "<3.8": {
-      "dist/ts3.9/*": [
-        "dist/ts3.4/*"
-      ]
-    }
-  },
+  "types": "dist/types/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -45,13 +38,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.7",
-    "@storybook/api": "6.5.7",
-    "@storybook/client-logger": "6.5.7",
-    "@storybook/components": "6.5.7",
-    "@storybook/core-events": "6.5.7",
+    "@storybook/addons": "7.0.0-alpha.0",
+    "@storybook/api": "7.0.0-alpha.0",
+    "@storybook/client-logger": "7.0.0-alpha.0",
+    "@storybook/components": "7.0.0-alpha.0",
+    "@storybook/core-events": "7.0.0-alpha.0",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/theming": "6.5.7",
+    "@storybook/theming": "7.0.0-alpha.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
@@ -59,9 +52,6 @@
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2"
   },
-  "devDependencies": {
-    "@types/webpack-env": "^1.16.0"
-  },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -77,8 +67,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7e19d3e734efa14e7cffba146295ca0d3467a8c6",
-  "sbmodern": "dist/modern/index.js",
+  "gitHead": "c82d897ea765da8cf4fbbcc2af1f28c808a93e23",
   "storybook": {
     "displayName": "Backgrounds",
     "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",

package/dist/modern/components/ColorIcon.js

@@ -1,14 +0,0 @@
-import { styled } from '@storybook/theming';
-export const ColorIcon = styled.span(({
-  background
-}) => ({
-  borderRadius: '1rem',
-  display: 'block',
-  height: '1rem',
-  width: '1rem',
-  background
-}), ({
-  theme
-}) => ({
-  boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`
-}));

package/dist/modern/constants.js

@@ -1,6 +0,0 @@
-export const ADDON_ID = 'storybook/background';
-export const PARAM_KEY = 'backgrounds';
-export const GRID_PARAM_KEY = 'grid';
-export const EVENTS = {
-  UPDATE: `${ADDON_ID}/update`
-};

package/dist/modern/containers/BackgroundSelector.js

@@ -1,93 +0,0 @@
-import React, { Fragment, useCallback, useMemo, memo } from 'react';
-import memoize from 'memoizerific';
-import { useParameter, useGlobals } from '@storybook/api';
-import { logger } from '@storybook/client-logger';
-import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
-import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
-import { ColorIcon } from '../components/ColorIcon';
-import { getBackgroundColorByName } from '../helpers';
-const createBackgroundSelectorItem = memoize(1000)((id, name, value, hasSwatch, change, active) => ({
-  id: id || name,
-  title: name,
-  onClick: () => {
-    change({
-      selected: value,
-      name
-    });
-  },
-  value,
-  right: hasSwatch ? /*#__PURE__*/React.createElement(ColorIcon, {
-    background: value
-  }) : undefined,
-  active
-}));
-const getDisplayedItems = memoize(10)((backgrounds, selectedBackgroundColor, change) => {
-  const backgroundSelectorItems = backgrounds.map(({
-    name,
-    value
-  }) => createBackgroundSelectorItem(null, name, value, true, change, value === selectedBackgroundColor));
-
-  if (selectedBackgroundColor !== 'transparent') {
-    return [createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change, false), ...backgroundSelectorItems];
-  }
-
-  return backgroundSelectorItems;
-});
-const DEFAULT_BACKGROUNDS_CONFIG = {
-  default: null,
-  disable: true,
-  values: []
-};
-export const BackgroundSelector = /*#__PURE__*/memo(() => {
-  var _globals$BACKGROUNDS_;
-
-  const backgroundsConfig = useParameter(BACKGROUNDS_PARAM_KEY, DEFAULT_BACKGROUNDS_CONFIG);
-  const [globals, updateGlobals] = useGlobals();
-  const globalsBackgroundColor = (_globals$BACKGROUNDS_ = globals[BACKGROUNDS_PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.value;
-  const selectedBackgroundColor = useMemo(() => {
-    return getBackgroundColorByName(globalsBackgroundColor, backgroundsConfig.values, backgroundsConfig.default);
-  }, [backgroundsConfig, globalsBackgroundColor]);
-
-  if (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');
-  }
-
-  const onBackgroundChange = useCallback(value => {
-    updateGlobals({
-      [BACKGROUNDS_PARAM_KEY]: Object.assign({}, globals[BACKGROUNDS_PARAM_KEY], {
-        value
-      })
-    });
-  }, [backgroundsConfig, globals, updateGlobals]);
-
-  if (backgroundsConfig.disable) {
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(WithTooltip, {
-    placement: "top",
-    trigger: "click",
-    closeOnClick: true,
-    tooltip: ({
-      onHide
-    }) => {
-      return /*#__PURE__*/React.createElement(TooltipLinkList, {
-        links: getDisplayedItems(backgroundsConfig.values, selectedBackgroundColor, ({
-          selected
-        }) => {
-          if (selectedBackgroundColor !== selected) {
-            onBackgroundChange(selected);
-          }
-
-          onHide();
-        })
-      });
-    }
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    key: "background",
-    title: "Change the background of the preview",
-    active: selectedBackgroundColor !== 'transparent'
-  }, /*#__PURE__*/React.createElement(Icons, {
-    icon: "photo"
-  }))));
-});

package/dist/modern/containers/GridSelector.js

@@ -1,34 +0,0 @@
-import React, { memo } from 'react';
-import { useGlobals, useParameter } from '@storybook/api';
-import { Icons, IconButton } from '@storybook/components';
-import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
-export const GridSelector = /*#__PURE__*/memo(() => {
-  var _globals$BACKGROUNDS_;
-
-  const [globals, updateGlobals] = useGlobals();
-  const {
-    grid
-  } = useParameter(BACKGROUNDS_PARAM_KEY, {
-    grid: {
-      disable: false
-    }
-  });
-
-  if (grid !== null && grid !== void 0 && grid.disable) {
-    return null;
-  }
-
-  const isActive = ((_globals$BACKGROUNDS_ = globals[BACKGROUNDS_PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.grid) || false;
-  return /*#__PURE__*/React.createElement(IconButton, {
-    key: "background",
-    active: isActive,
-    title: "Apply a grid to the preview",
-    onClick: () => updateGlobals({
-      [BACKGROUNDS_PARAM_KEY]: Object.assign({}, globals[BACKGROUNDS_PARAM_KEY], {
-        grid: !isActive
-      })
-    })
-  }, /*#__PURE__*/React.createElement(Icons, {
-    icon: "grid"
-  }));
-});

package/dist/modern/decorators/withBackground.js

@@ -1,42 +0,0 @@
-import { useMemo, useEffect } from '@storybook/addons';
-import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
-import { clearStyles, addBackgroundStyle, getBackgroundColorByName, isReduceMotionEnabled } from '../helpers';
-export const withBackground = (StoryFn, context) => {
-  var _globals$BACKGROUNDS_;
-
-  const {
-    globals,
-    parameters
-  } = context;
-  const globalsBackgroundColor = (_globals$BACKGROUNDS_ = globals[BACKGROUNDS_PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.value;
-  const backgroundsConfig = parameters[BACKGROUNDS_PARAM_KEY];
-  const selectedBackgroundColor = useMemo(() => {
-    if (backgroundsConfig.disable) {
-      return 'transparent';
-    }
-
-    return getBackgroundColorByName(globalsBackgroundColor, backgroundsConfig.values, backgroundsConfig.default);
-  }, [backgroundsConfig, globalsBackgroundColor]);
-  const isActive = useMemo(() => selectedBackgroundColor && selectedBackgroundColor !== 'transparent', [selectedBackgroundColor]);
-  const selector = context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
-  const backgroundStyles = useMemo(() => {
-    const transitionStyle = 'transition: background-color 0.3s;';
-    return `
-      ${selector} {
-        background: ${selectedBackgroundColor} !important;
-        ${isReduceMotionEnabled() ? '' : transitionStyle}
-      }
-    `;
-  }, [selectedBackgroundColor, selector]);
-  useEffect(() => {
-    const 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]);
-  return StoryFn();
-};

package/dist/modern/decorators/withGrid.js

@@ -1,67 +0,0 @@
-import dedent from 'ts-dedent';
-import deprecate from 'util-deprecate';
-import { useMemo, useEffect } from '@storybook/addons';
-import { clearStyles, addGridStyle } from '../helpers';
-import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
-const deprecatedCellSizeWarning = deprecate(() => {}, dedent`
-    Backgrounds Addon: The cell size parameter has been changed.
-
-    - parameters.grid.cellSize should now be parameters.backgrounds.grid.cellSize
-    See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-grid-parameter
-  `);
-export const withGrid = (StoryFn, context) => {
-  var _globals$BACKGROUNDS_, _parameters$grid, _gridParameters$offse, _gridParameters$offse2;
-
-  const {
-    globals,
-    parameters
-  } = context;
-  const gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid;
-  const isActive = ((_globals$BACKGROUNDS_ = globals[BACKGROUNDS_PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.grid) === true && gridParameters.disable !== true;
-  const {
-    cellAmount,
-    cellSize,
-    opacity
-  } = gridParameters;
-  const isInDocs = context.viewMode === 'docs';
-  let gridSize;
-
-  if ((_parameters$grid = parameters.grid) !== null && _parameters$grid !== void 0 && _parameters$grid.cellSize) {
-    gridSize = parameters.grid.cellSize;
-    deprecatedCellSizeWarning();
-  } else {
-    gridSize = cellSize;
-  }
-
-  const isLayoutPadded = parameters.layout === undefined || parameters.layout === 'padded'; // 16px offset in the grid to account for padded layout
-
-  const defaultOffset = isLayoutPadded ? 16 : 0;
-  const offsetX = (_gridParameters$offse = gridParameters.offsetX) !== null && _gridParameters$offse !== void 0 ? _gridParameters$offse : isInDocs ? 20 : defaultOffset;
-  const offsetY = (_gridParameters$offse2 = gridParameters.offsetY) !== null && _gridParameters$offse2 !== void 0 ? _gridParameters$offse2 : isInDocs ? 20 : defaultOffset;
-  const gridStyles = useMemo(() => {
-    const selector = context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
-    const backgroundSize = [`${gridSize * cellAmount}px ${gridSize * cellAmount}px`, `${gridSize * cellAmount}px ${gridSize * cellAmount}px`, `${gridSize}px ${gridSize}px`, `${gridSize}px ${gridSize}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;
-      }
-    `;
-  }, [gridSize]);
-  useEffect(() => {
-    const selectorId = context.viewMode === 'docs' ? `addon-backgrounds-grid-docs-${context.id}` : `addon-backgrounds-grid`;
-
-    if (!isActive) {
-      clearStyles(selectorId);
-      return;
-    }
-
-    addGridStyle(selectorId, gridStyles);
-  }, [isActive, gridStyles, context]);
-  return StoryFn();
-};

package/dist/modern/helpers/index.js

@@ -1,86 +0,0 @@
-import global from 'global';
-import dedent from 'ts-dedent';
-import { logger } from '@storybook/client-logger';
-const {
-  document,
-  window
-} = global;
-export const isReduceMotionEnabled = () => {
-  const prefersReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
-  return prefersReduceMotion.matches;
-};
-export const getBackgroundColorByName = (currentSelectedValue, backgrounds = [], defaultName) => {
-  if (currentSelectedValue === 'transparent') {
-    return 'transparent';
-  }
-
-  if (backgrounds.find(background => background.value === currentSelectedValue)) {
-    return currentSelectedValue;
-  }
-
-  const defaultBackground = backgrounds.find(background => background.name === defaultName);
-
-  if (defaultBackground) {
-    return defaultBackground.value;
-  }
-
-  if (defaultName) {
-    const 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';
-};
-export const clearStyles = selector => {
-  const selectors = Array.isArray(selector) ? selector : [selector];
-  selectors.forEach(clearStyle);
-};
-
-const clearStyle = selector => {
-  const element = document.getElementById(selector);
-
-  if (element) {
-    element.parentElement.removeChild(element);
-  }
-};
-
-export const addGridStyle = (selector, css) => {
-  const existingStyle = document.getElementById(selector);
-
-  if (existingStyle) {
-    if (existingStyle.innerHTML !== css) {
-      existingStyle.innerHTML = css;
-    }
-  } else {
-    const style = document.createElement('style');
-    style.setAttribute('id', selector);
-    style.innerHTML = css;
-    document.head.appendChild(style);
-  }
-};
-export const addBackgroundStyle = (selector, css, storyId) => {
-  const existingStyle = document.getElementById(selector);
-
-  if (existingStyle) {
-    if (existingStyle.innerHTML !== css) {
-      existingStyle.innerHTML = css;
-    }
-  } else {
-    const style = document.createElement('style');
-    style.setAttribute('id', selector);
-    style.innerHTML = css;
-    const gridStyleSelector = `addon-backgrounds-grid${storyId ? `-docs-${storyId}` : ''}`; // If grids already exist, we want to add the style tag BEFORE it so the background doesn't override grid
-
-    const existingGridStyle = document.getElementById(gridStyleSelector);
-
-    if (existingGridStyle) {
-      existingGridStyle.parentElement.insertBefore(style, existingGridStyle);
-    } else {
-      document.head.appendChild(style);
-    }
-  }
-};

package/dist/modern/index.js

@@ -1,6 +0,0 @@
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-} // make it work with --isolatedModules
-
-
-export default {};

package/dist/modern/manager.js

@@ -1,15 +0,0 @@
-import React, { Fragment } from 'react';
-import { addons, types } from '@storybook/addons';
-import { ADDON_ID } from './constants';
-import { BackgroundSelector } from './containers/BackgroundSelector';
-import { GridSelector } from './containers/GridSelector';
-addons.register(ADDON_ID, () => {
-  addons.add(ADDON_ID, {
-    title: 'Backgrounds',
-    type: types.TOOL,
-    match: ({
-      viewMode
-    }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
-    render: () => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BackgroundSelector, null), /*#__PURE__*/React.createElement(GridSelector, null))
-  });
-});

package/dist/modern/preview.js

@@ -1,19 +0,0 @@
-import { withBackground } from './decorators/withBackground';
-import { withGrid } from './decorators/withGrid';
-export const decorators = [withGrid, withBackground];
-export const parameters = {
-  backgrounds: {
-    grid: {
-      cellSize: 20,
-      opacity: 0.5,
-      cellAmount: 5
-    },
-    values: [{
-      name: 'light',
-      value: '#F8F8F8'
-    }, {
-      name: 'dark',
-      value: '#333333'
-    }]
-  }
-};

package/dist/modern/types/index.js

@@ -1 +0,0 @@
-export {};

package/dist/ts3.4/components/ColorIcon.d.ts

@@ -1,3 +0,0 @@
-export declare const ColorIcon: import("@storybook/theming").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-    background: string;
-}, import("@storybook/theming").Theme>;

package/dist/ts3.4/constants.d.ts

@@ -1,6 +0,0 @@
-export declare const ADDON_ID = "storybook/background";
-export declare const PARAM_KEY = "backgrounds";
-export declare const GRID_PARAM_KEY = "grid";
-export declare const EVENTS: {
-    UPDATE: string;
-};

package/dist/ts3.4/containers/BackgroundSelector.d.ts

@@ -1,2 +0,0 @@
-import { FunctionComponent } from 'react';
-export declare const BackgroundSelector: FunctionComponent;

package/dist/ts3.4/containers/GridSelector.d.ts

@@ -1,2 +0,0 @@
-import { FunctionComponent } from 'react';
-export declare const GridSelector: FunctionComponent;

package/dist/ts3.4/decorators/withBackground.d.ts

@@ -1,2 +0,0 @@
-import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
-export declare const withBackground: (StoryFn: StoryFunction<AnyFramework>, context: StoryContext<AnyFramework>) => unknown;

package/dist/ts3.4/decorators/withGrid.d.ts

@@ -1,2 +0,0 @@
-import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
-export declare const withGrid: (StoryFn: StoryFunction<AnyFramework>, context: StoryContext<AnyFramework>) => unknown;

package/dist/ts3.4/helpers/index.d.ts

@@ -1,6 +0,0 @@
-import { Background } from '../types';
-export declare const isReduceMotionEnabled: () => any;
-export declare const getBackgroundColorByName: (currentSelectedValue: string, backgrounds: Background[], defaultName: string) => string;
-export declare const clearStyles: (selector: string | string[]) => void;
-export declare const addGridStyle: (selector: string, css: string) => void;
-export declare const addBackgroundStyle: (selector: string, css: string, storyId: string) => void;

package/dist/ts3.4/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: {};
-export default _default;

package/dist/ts3.4/manager.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/ts3.4/preview.d.ts

@@ -1,14 +0,0 @@
-export declare const decorators: ((StoryFn: import("@storybook/csf").PartialStoryFn<import("@storybook/csf").AnyFramework, import("@storybook/csf").Args>, context: import("@storybook/csf").StoryContext<import("@storybook/csf").AnyFramework, import("@storybook/csf").Args>) => unknown)[];
-export declare const parameters: {
-    backgrounds: {
-        grid: {
-            cellSize: number;
-            opacity: number;
-            cellAmount: number;
-        };
-        values: {
-            name: string;
-            value: string;
-        }[];
-    };
-};

package/dist/ts3.4/types/index.d.ts

@@ -1,28 +0,0 @@
-import { ReactElement } from 'react';
-export interface GlobalState {
-    name: string | undefined;
-    selected: string | undefined;
-}
-export interface BackgroundSelectorItem {
-    id: string;
-    title: string;
-    onClick: () => void;
-    value: string;
-    active: boolean;
-    right?: ReactElement;
-}
-export interface Background {
-    name: string;
-    value: string;
-}
-export interface BackgroundsParameter {
-    default?: string;
-    disable?: boolean;
-    values: Background[];
-}
-export interface BackgroundsConfig {
-    backgrounds: Background[] | null;
-    selectedBackgroundName: string | null;
-    defaultBackgroundName: string | null;
-    disable: boolean;
-}