@storybook/addon-backgrounds 6.5.9 → 7.0.0-alpha.2

package/dist/cjs/components/ColorIcon.js

@@ -7,20 +7,18 @@ exports.ColorIcon = void 0;
 
 var _theming = require("@storybook/theming");
 
-var ColorIcon = _theming.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")
-  };
-});
+const ColorIcon = _theming.styled.span(({
+  background
+}) => ({
+  borderRadius: '1rem',
+  display: 'block',
+  height: '1rem',
+  width: '1rem',
+  background
+}), ({
+  theme
+}) => ({
+  boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`
+}));
 
 exports.ColorIcon = ColorIcon;

package/dist/cjs/constants.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PARAM_KEY = exports.GRID_PARAM_KEY = exports.EVENTS = exports.ADDON_ID = void 0;
-var ADDON_ID = 'storybook/background';
+const ADDON_ID = 'storybook/background';
 exports.ADDON_ID = ADDON_ID;
-var PARAM_KEY = 'backgrounds';
+const PARAM_KEY = 'backgrounds';
 exports.PARAM_KEY = PARAM_KEY;
-var GRID_PARAM_KEY = 'grid';
+const GRID_PARAM_KEY = 'grid';
 exports.GRID_PARAM_KEY = GRID_PARAM_KEY;
-var EVENTS = {
-  UPDATE: "".concat(ADDON_ID, "/update")
+const EVENTS = {
+  UPDATE: `${ADDON_ID}/update`
 };
 exports.EVENTS = EVENTS;

package/dist/cjs/containers/BackgroundSelector.js

@@ -1,44 +1,10 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-require("core-js/modules/es.symbol.js");
-
-require("core-js/modules/es.symbol.description.js");
-
-require("core-js/modules/es.symbol.iterator.js");
-
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/es.array.from.js");
-
-require("core-js/modules/es.array.slice.js");
-
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.weak-map.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BackgroundSelector = void 0;
 
-require("core-js/modules/es.array.map.js");
-
-require("core-js/modules/es.function.name.js");
-
-require("core-js/modules/es.array.concat.js");
-
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/es.object.assign.js");
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _memoizerific = _interopRequireDefault(require("memoizerific"));
@@ -57,79 +23,49 @@ var _helpers = require("../helpers");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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; }
-
-var createBackgroundSelectorItem = (0, _memoizerific.default)(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.default.createElement(_ColorIcon.ColorIcon, {
-      background: value
-    }) : undefined,
-    active: active
-  };
-});
-var getDisplayedItems = (0, _memoizerific.default)(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);
-  });
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const createBackgroundSelectorItem = (0, _memoizerific.default)(1000)((id, name, value, hasSwatch, change, active) => ({
+  id: id || name,
+  title: name,
+  onClick: () => {
+    change({
+      selected: value,
+      name
+    });
+  },
+  value,
+  right: hasSwatch ? /*#__PURE__*/_react.default.createElement(_ColorIcon.ColorIcon, {
+    background: value
+  }) : undefined,
+  active
+}));
+const getDisplayedItems = (0, _memoizerific.default)(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: []
 };
-var BackgroundSelector = /*#__PURE__*/(0, _react.memo)(function () {
+const BackgroundSelector = /*#__PURE__*/(0, _react.memo)(() => {
   var _globals$BACKGROUNDS_;
 
-  var backgroundsConfig = (0, _api.useParameter)(_constants.PARAM_KEY, DEFAULT_BACKGROUNDS_CONFIG);
-
-  var _useGlobals = (0, _api.useGlobals)(),
-      _useGlobals2 = _slicedToArray(_useGlobals, 2),
-      globals = _useGlobals2[0],
-      updateGlobals = _useGlobals2[1];
-
-  var globalsBackgroundColor = (_globals$BACKGROUNDS_ = globals[_constants.PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.value;
-  var selectedBackgroundColor = (0, _react.useMemo)(function () {
+  const backgroundsConfig = (0, _api.useParameter)(_constants.PARAM_KEY, DEFAULT_BACKGROUNDS_CONFIG);
+  const [globals, updateGlobals] = (0, _api.useGlobals)();
+  const globalsBackgroundColor = (_globals$BACKGROUNDS_ = globals[_constants.PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.value;
+  const selectedBackgroundColor = (0, _react.useMemo)(() => {
     return (0, _helpers.getBackgroundColorByName)(globalsBackgroundColor, backgroundsConfig.values, backgroundsConfig.default);
   }, [backgroundsConfig, globalsBackgroundColor]);
 
@@ -137,10 +73,12 @@ var BackgroundSelector = /*#__PURE__*/(0, _react.memo)(function () {
     _clientLogger.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 = (0, _react.useCallback)(function (value) {
-    updateGlobals(_defineProperty({}, _constants.PARAM_KEY, Object.assign({}, globals[_constants.PARAM_KEY], {
-      value: value
-    })));
+  const onBackgroundChange = (0, _react.useCallback)(value => {
+    updateGlobals({
+      [_constants.PARAM_KEY]: Object.assign({}, globals[_constants.PARAM_KEY], {
+        value
+      })
+    });
   }, [backgroundsConfig, globals, updateGlobals]);
 
   if (backgroundsConfig.disable) {
@@ -151,12 +89,13 @@ var BackgroundSelector = /*#__PURE__*/(0, _react.memo)(function () {
     placement: "top",
     trigger: "click",
     closeOnClick: true,
-    tooltip: function tooltip(_ref2) {
-      var onHide = _ref2.onHide;
+    tooltip: ({
+      onHide
+    }) => {
       return /*#__PURE__*/_react.default.createElement(_components.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/cjs/containers/GridSelector.js

@@ -1,40 +1,10 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-require("core-js/modules/es.symbol.js");
-
-require("core-js/modules/es.symbol.description.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.symbol.iterator.js");
-
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/es.array.slice.js");
-
-require("core-js/modules/es.function.name.js");
-
-require("core-js/modules/es.array.from.js");
-
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.weak-map.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridSelector = void 0;
 
-require("core-js/modules/es.object.assign.js");
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _api = require("@storybook/api");
@@ -43,53 +13,36 @@ var _components = require("@storybook/components");
 
 var _constants = require("../constants");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-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 _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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; }
-
-var GridSelector = /*#__PURE__*/(0, _react.memo)(function () {
+const GridSelector = /*#__PURE__*/(0, _react.memo)(() => {
   var _globals$BACKGROUNDS_;
 
-  var _useGlobals = (0, _api.useGlobals)(),
-      _useGlobals2 = _slicedToArray(_useGlobals, 2),
-      globals = _useGlobals2[0],
-      updateGlobals = _useGlobals2[1];
-
-  var _useParameter = (0, _api.useParameter)(_constants.PARAM_KEY, {
+  const [globals, updateGlobals] = (0, _api.useGlobals)();
+  const {
+    grid
+  } = (0, _api.useParameter)(_constants.PARAM_KEY, {
     grid: {
       disable: false
     }
-  }),
-      grid = _useParameter.grid;
+  });
 
   if (grid !== null && grid !== void 0 && grid.disable) {
     return null;
   }
 
-  var isActive = ((_globals$BACKGROUNDS_ = globals[_constants.PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.grid) || false;
+  const isActive = ((_globals$BACKGROUNDS_ = globals[_constants.PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.grid) || false;
   return /*#__PURE__*/_react.default.createElement(_components.IconButton, {
     key: "background",
     active: isActive,
     title: "Apply a grid to the preview",
-    onClick: function onClick() {
-      return updateGlobals(_defineProperty({}, _constants.PARAM_KEY, Object.assign({}, globals[_constants.PARAM_KEY], {
+    onClick: () => updateGlobals({
+      [_constants.PARAM_KEY]: Object.assign({}, globals[_constants.PARAM_KEY], {
         grid: !isActive
-      })));
-    }
+      })
+    })
   }, /*#__PURE__*/_react.default.createElement(_components.Icons, {
     icon: "grid"
   }));

package/dist/cjs/decorators/withBackground.js

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

package/dist/cjs/decorators/withGrid.js

@@ -1,18 +1,10 @@
 "use strict";
 
-require("core-js/modules/es.array.slice.js");
-
-require("core-js/modules/es.object.freeze.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.withGrid = void 0;
 
-require("core-js/modules/es.array.join.js");
-
-require("core-js/modules/es.array.concat.js");
-
 var _tsDedent = _interopRequireDefault(require("ts-dedent"));
 
 var _utilDeprecate = _interopRequireDefault(require("util-deprecate"));
@@ -23,26 +15,31 @@ var _helpers = require("../helpers");
 
 var _constants = require("../constants");
 
-var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var deprecatedCellSizeWarning = (0, _utilDeprecate.default)(function () {}, (0, _tsDedent.default)(_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  "]))));
-
-var withGrid = function withGrid(StoryFn, context) {
-  var _globals$BACKGROUNDS_, _parameters$grid, _gridParameters$offse, _gridParameters$offse2;
-
-  var globals = context.globals,
-      parameters = context.parameters;
-  var gridParameters = parameters[_constants.PARAM_KEY].grid;
-  var isActive = ((_globals$BACKGROUNDS_ = globals[_constants.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;
+const deprecatedCellSizeWarning = (0, _utilDeprecate.default)(() => {}, (0, _tsDedent.default)`
+    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
+  `);
+
+const withGrid = (StoryFn, context) => {
+  var _globals$BACKGROUNDS_, _parameters$grid;
+
+  const {
+    globals,
+    parameters
+  } = context;
+  const gridParameters = parameters[_constants.PARAM_KEY].grid;
+  const isActive = ((_globals$BACKGROUNDS_ = globals[_constants.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;
@@ -51,18 +48,28 @@ var withGrid = function withGrid(StoryFn, context) {
     gridSize = cellSize;
   }
 
-  var 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 = (0, _addons.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 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.offsetX ?? (isInDocs ? 20 : defaultOffset);
+  const offsetY = gridParameters.offsetY ?? (isInDocs ? 20 : defaultOffset);
+  const gridStyles = (0, _addons.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]);
-  (0, _addons.useEffect)(function () {
-    var selectorId = context.viewMode === 'docs' ? "addon-backgrounds-grid-docs-".concat(context.id) : "addon-backgrounds-grid";
+  (0, _addons.useEffect)(() => {
+    const selectorId = context.viewMode === 'docs' ? `addon-backgrounds-grid-docs-${context.id}` : `addon-backgrounds-grid`;
 
     if (!isActive) {
       (0, _helpers.clearStyles)(selectorId);