@storybook/addon-docs 6.5.6 → 7.0.0-alpha.0

package/dist/esm/blocks/Source.js

@@ -1,7 +1,3 @@
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.array.join.js";
 import React, { useContext } from 'react';
 import { Source as PureSource, SourceError } from '@storybook/components';
 import { DocsContext } from './DocsContext';
@@ -10,7 +6,7 @@ import { CURRENT_SELECTION } from './types';
 import { SourceType } from '../shared';
 import { enhanceSource } from './enhanceSource';
 import { useStories } from './useStory';
-export var SourceState;
+export let SourceState;
 
 (function (SourceState) {
   SourceState["OPEN"] = "open";
@@ -18,40 +14,38 @@ export var SourceState;
   SourceState["NONE"] = "none";
 })(SourceState || (SourceState = {}));
 
-var getSourceState = function getSourceState(stories) {
-  var states = stories.map(function (story) {
-    var _story$parameters$doc, _story$parameters$doc2;
-
-    return (_story$parameters$doc = story.parameters.docs) === null || _story$parameters$doc === void 0 ? void 0 : (_story$parameters$doc2 = _story$parameters$doc.source) === null || _story$parameters$doc2 === void 0 ? void 0 : _story$parameters$doc2.state;
-  }).filter(Boolean);
+const getSourceState = stories => {
+  const states = stories.map(story => story.parameters.docs?.source?.state).filter(Boolean);
   if (states.length === 0) return SourceState.CLOSED; // FIXME: handling multiple stories is a pain
 
   return states[0];
 };
 
-var getStorySource = function getStorySource(storyId, sourceContext) {
-  var sources = sourceContext.sources; // source rendering is async so source is unavailable at the start of the render cycle,
+const getStorySource = (storyId, sourceContext) => {
+  const {
+    sources
+  } = sourceContext; // source rendering is async so source is unavailable at the start of the render cycle,
   // so we fail gracefully here without warning
 
-  return (sources === null || sources === void 0 ? void 0 : sources[storyId]) || {
+  return sources?.[storyId] || {
     code: '',
     format: false
   };
 };
 
-var getSnippet = function getSnippet(snippet, story) {
-  var _parameters$docs, _parameters$docs$sour, _parameters$docs2, _parameters$docs2$sou, _enhanced$docs, _enhanced$docs$source;
-
+const getSnippet = (snippet, story) => {
   if (!story) {
     return snippet;
   }
 
-  var parameters = story.parameters; // eslint-disable-next-line no-underscore-dangle
+  const {
+    parameters
+  } = story; // eslint-disable-next-line no-underscore-dangle
 
-  var isArgsStory = parameters.__isArgsStory;
-  var type = ((_parameters$docs = parameters.docs) === null || _parameters$docs === void 0 ? void 0 : (_parameters$docs$sour = _parameters$docs.source) === null || _parameters$docs$sour === void 0 ? void 0 : _parameters$docs$sour.type) || SourceType.AUTO; // if user has hard-coded the snippet, that takes precedence
+  const isArgsStory = parameters.__isArgsStory;
+  const type = parameters.docs?.source?.type || SourceType.AUTO; // if user has hard-coded the snippet, that takes precedence
 
-  var userCode = (_parameters$docs2 = parameters.docs) === null || _parameters$docs2 === void 0 ? void 0 : (_parameters$docs2$sou = _parameters$docs2.source) === null || _parameters$docs2$sou === void 0 ? void 0 : _parameters$docs2$sou.code;
+  const userCode = parameters.docs?.source?.code;
 
   if (userCode !== undefined) {
     return userCode;
@@ -59,42 +53,39 @@ var getSnippet = function getSnippet(snippet, story) {
 
 
   if (type === SourceType.DYNAMIC) {
-    var _parameters$docs3, _parameters$docs3$tra;
-
-    return ((_parameters$docs3 = parameters.docs) === null || _parameters$docs3 === void 0 ? void 0 : (_parameters$docs3$tra = _parameters$docs3.transformSource) === null || _parameters$docs3$tra === void 0 ? void 0 : _parameters$docs3$tra.call(_parameters$docs3, snippet, story)) || snippet;
+    return parameters.docs?.transformSource?.(snippet, story) || snippet;
   } // if this is an args story and there's a snippet
 
 
   if (type === SourceType.AUTO && snippet && isArgsStory) {
-    var _parameters$docs4, _parameters$docs4$tra;
-
-    return ((_parameters$docs4 = parameters.docs) === null || _parameters$docs4 === void 0 ? void 0 : (_parameters$docs4$tra = _parameters$docs4.transformSource) === null || _parameters$docs4$tra === void 0 ? void 0 : _parameters$docs4$tra.call(_parameters$docs4, snippet, story)) || snippet;
+    return parameters.docs?.transformSource?.(snippet, story) || snippet;
   } // otherwise, use the source code logic
 
 
-  var enhanced = enhanceSource(story) || parameters;
-  return (enhanced === null || enhanced === void 0 ? void 0 : (_enhanced$docs = enhanced.docs) === null || _enhanced$docs === void 0 ? void 0 : (_enhanced$docs$source = _enhanced$docs.source) === null || _enhanced$docs$source === void 0 ? void 0 : _enhanced$docs$source.code) || '';
+  const enhanced = enhanceSource(story) || parameters;
+  return enhanced?.docs?.source?.code || '';
 };
 
-export var getSourceProps = function getSourceProps(props, docsContext, sourceContext) {
-  var currentId = docsContext.id,
-      storyById = docsContext.storyById;
-
-  var _storyById = storyById(currentId),
-      parameters = _storyById.parameters;
-
-  var codeProps = props;
-  var singleProps = props;
-  var multiProps = props;
-  var source = codeProps.code; // prefer user-specified code
-
-  var format = codeProps.format; // prefer user-specified code
-
-  var targetIds = multiProps.ids || [singleProps.id || currentId];
-  var storyIds = targetIds.map(function (targetId) {
-    return targetId === CURRENT_SELECTION ? currentId : targetId;
-  });
-  var stories = useStories(storyIds, docsContext);
+export const getSourceProps = (props, docsContext, sourceContext) => {
+  const {
+    id: currentId,
+    storyById
+  } = docsContext;
+  const {
+    parameters
+  } = storyById(currentId);
+  const codeProps = props;
+  const singleProps = props;
+  const multiProps = props;
+  let source = codeProps.code; // prefer user-specified code
+
+  let {
+    format
+  } = codeProps; // prefer user-specified code
+
+  const targetIds = multiProps.ids || [singleProps.id || currentId];
+  const storyIds = targetIds.map(targetId => targetId === CURRENT_SELECTION ? currentId : targetId);
+  const stories = useStories(storyIds, docsContext);
 
   if (!stories.every(Boolean)) {
     return {
@@ -106,34 +97,37 @@ export var getSourceProps = function getSourceProps(props, docsContext, sourceCo
   if (!source) {
     // just take the format from the first story, given how they're all concatinated together...
     // TODO: we should consider sending an event with all the sources separately, instead of concatenating them here
-    var _getStorySource = getStorySource(storyIds[0], sourceContext);
-
-    format = _getStorySource.format;
-    source = storyIds.map(function (storyId, idx) {
-      var _getStorySource2 = getStorySource(storyId, sourceContext),
-          storySource = _getStorySource2.code;
-
-      var storyObj = stories[idx];
+    ({
+      format
+    } = getStorySource(storyIds[0], sourceContext));
+    source = storyIds.map((storyId, idx) => {
+      const {
+        code: storySource
+      } = getStorySource(storyId, sourceContext);
+      const storyObj = stories[idx];
       return getSnippet(storySource, storyObj);
     }).join('\n\n');
   }
 
-  var state = getSourceState(stories);
-  var _parameters$docs5 = parameters.docs,
-      docsParameters = _parameters$docs5 === void 0 ? {} : _parameters$docs5;
-  var _docsParameters$sourc = docsParameters.source,
-      sourceParameters = _docsParameters$sourc === void 0 ? {} : _docsParameters$sourc;
-  var _sourceParameters$lan = sourceParameters.language,
-      docsLanguage = _sourceParameters$lan === void 0 ? null : _sourceParameters$lan;
+  const state = getSourceState(stories);
+  const {
+    docs: docsParameters = {}
+  } = parameters;
+  const {
+    source: sourceParameters = {}
+  } = docsParameters;
+  const {
+    language: docsLanguage = null
+  } = sourceParameters;
   return source ? {
     code: source,
-    state: state,
-    format: format,
+    state,
+    format,
     language: props.language || docsLanguage || 'jsx',
     dark: props.dark || false
   } : {
     error: SourceError.SOURCE_UNAVAILABLE,
-    state: state
+    state
   };
 };
 /**
@@ -142,9 +136,9 @@ export var getSourceProps = function getSourceProps(props, docsContext, sourceCo
  * the source for the current story if nothing is provided.
  */
 
-export var Source = function Source(props) {
-  var sourceContext = useContext(SourceContext);
-  var docsContext = useContext(DocsContext);
-  var sourceProps = getSourceProps(props, docsContext, sourceContext);
+export const Source = props => {
+  const sourceContext = useContext(SourceContext);
+  const docsContext = useContext(DocsContext);
+  const sourceProps = getSourceProps(props, docsContext, sourceContext);
   return /*#__PURE__*/React.createElement(PureSource, sourceProps);
 };

package/dist/esm/blocks/SourceContainer.js

@@ -1,60 +1,29 @@
-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, { createContext, useEffect, useState } from 'react';
 import deepEqual from 'fast-deep-equal';
 import { addons } from '@storybook/addons';
 import { SNIPPET_RENDERED } from '../shared';
-export var SourceContext = /*#__PURE__*/createContext({
+export const SourceContext = /*#__PURE__*/createContext({
   sources: {}
 });
-export var SourceContainer = function SourceContainer(_ref) {
-  var children = _ref.children;
-
-  var _useState = useState({}),
-      _useState2 = _slicedToArray(_useState, 2),
-      sources = _useState2[0],
-      setSources = _useState2[1];
-
-  var channel = addons.getChannel();
-  useEffect(function () {
-    var handleSnippetRendered = function handleSnippetRendered(id, newSource) {
-      var format = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-
+export const SourceContainer = ({
+  children
+}) => {
+  const [sources, setSources] = useState({});
+  const channel = addons.getChannel();
+  useEffect(() => {
+    const handleSnippetRendered = (id, newSource, format = false) => {
       // optimization: if the source is the same, ignore the incoming event
       if (sources[id] && sources[id].code === newSource) {
         return;
       }
 
-      setSources(function (current) {
-        var newSources = Object.assign({}, current, _defineProperty({}, id, {
-          code: newSource,
-          format: format
-        }));
+      setSources(current => {
+        const newSources = Object.assign({}, current, {
+          [id]: {
+            code: newSource,
+            format
+          }
+        });
 
         if (!deepEqual(current, newSources)) {
           return newSources;
@@ -65,13 +34,11 @@ export var SourceContainer = function SourceContainer(_ref) {
     };
 
     channel.on(SNIPPET_RENDERED, handleSnippetRendered);
-    return function () {
-      return channel.off(SNIPPET_RENDERED, handleSnippetRendered);
-    };
+    return () => channel.off(SNIPPET_RENDERED, handleSnippetRendered);
   }, []);
   return /*#__PURE__*/React.createElement(SourceContext.Provider, {
     value: {
-      sources: sources
+      sources
     }
   }, children);
 };

package/dist/esm/blocks/Stories.js

@@ -1,41 +1,29 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.object.assign.js";
 import React, { useContext } from 'react';
 import { DocsContext } from './DocsContext';
 import { DocsStory } from './DocsStory';
 import { Heading } from './Heading';
-export var Stories = function Stories(_ref) {
-  var title = _ref.title,
-      _ref$includePrimary = _ref.includePrimary,
-      includePrimary = _ref$includePrimary === void 0 ? false : _ref$includePrimary;
-
-  var _useContext = useContext(DocsContext),
-      componentStories = _useContext.componentStories;
-
-  var stories = componentStories();
-  stories = stories.filter(function (story) {
-    var _story$parameters, _story$parameters$doc;
-
-    return !((_story$parameters = story.parameters) !== null && _story$parameters !== void 0 && (_story$parameters$doc = _story$parameters.docs) !== null && _story$parameters$doc !== void 0 && _story$parameters$doc.disable);
-  });
+export const Stories = ({
+  title,
+  includePrimary = false
+}) => {
+  const {
+    componentStories
+  } = useContext(DocsContext);
+  let stories = componentStories();
+  stories = stories.filter(story => !story.parameters?.docs?.disable);
   if (!includePrimary) stories = stories.slice(1);
 
   if (!stories || stories.length === 0) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, null, title), stories.map(function (story) {
-    return story && /*#__PURE__*/React.createElement(DocsStory, _extends({
-      key: story.id
-    }, story, {
-      expanded: true
-    }));
-  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, null, title), stories.map(story => story && /*#__PURE__*/React.createElement(DocsStory, _extends({
+    key: story.id
+  }, story, {
+    expanded: true
+  }))));
 };
 Stories.defaultProps = {
   title: 'Stories'

package/dist/esm/blocks/Story.js

@@ -1,29 +1,3 @@
-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 "core-js/modules/es.function.name.js";
-import "core-js/modules/es.object.assign.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.promise.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.concat.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.array.slice.js";
-import "core-js/modules/es.array.from.js";
-import "core-js/modules/es.regexp.exec.js";
 import React, { useContext, useRef, useEffect, useState } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import global from 'global';
@@ -34,48 +8,51 @@ import Events from '@storybook/core-events';
 import { CURRENT_SELECTION } from './types';
 import { DocsContext } from './DocsContext';
 import { useStory } from './useStory';
-export var storyBlockIdFromId = function storyBlockIdFromId(storyId) {
-  return "story--".concat(storyId);
-};
-export var lookupStoryId = function lookupStoryId(storyName, _ref) {
-  var mdxStoryNameToKey = _ref.mdxStoryNameToKey,
-      mdxComponentAnnotations = _ref.mdxComponentAnnotations;
-  return toId(mdxComponentAnnotations.id || mdxComponentAnnotations.title, storyNameFromExport(mdxStoryNameToKey[storyName]));
-};
-export var getStoryId = function getStoryId(props, context) {
-  var _ref2 = props,
-      id = _ref2.id;
-  var _ref3 = props,
-      name = _ref3.name;
-  var inputId = id === CURRENT_SELECTION ? context.id : id;
+export const storyBlockIdFromId = storyId => `story--${storyId}`;
+export const lookupStoryId = (storyName, {
+  mdxStoryNameToKey,
+  mdxComponentAnnotations
+}) => toId(mdxComponentAnnotations.id || mdxComponentAnnotations.title, storyNameFromExport(mdxStoryNameToKey[storyName]));
+export const getStoryId = (props, context) => {
+  const {
+    id
+  } = props;
+  const {
+    name
+  } = props;
+  const inputId = id === CURRENT_SELECTION ? context.id : id;
   return inputId || lookupStoryId(name, context);
 };
-export var getStoryProps = function getStoryProps(_ref4, story, context, onStoryFnCalled) {
-  var height = _ref4.height,
-      inline = _ref4.inline;
-  var storyName = story.name,
-      parameters = story.parameters;
-  var _parameters$docs = parameters.docs,
-      docs = _parameters$docs === void 0 ? {} : _parameters$docs;
+export const getStoryProps = ({
+  height,
+  inline
+}, story, context, onStoryFnCalled) => {
+  const {
+    name: storyName,
+    parameters
+  } = story;
+  const {
+    docs = {}
+  } = parameters;
 
   if (docs.disable) {
     return null;
   } // prefer block props, then story parameters defined by the framework-specific settings and optionally overridden by users
 
 
-  var _docs$inlineStories = docs.inlineStories,
-      inlineStories = _docs$inlineStories === void 0 ? false : _docs$inlineStories,
-      _docs$iframeHeight = docs.iframeHeight,
-      iframeHeight = _docs$iframeHeight === void 0 ? 100 : _docs$iframeHeight,
-      prepareForInline = docs.prepareForInline;
-  var storyIsInline = typeof inline === 'boolean' ? inline : inlineStories;
+  const {
+    inlineStories = false,
+    iframeHeight = 100,
+    prepareForInline
+  } = docs;
+  const storyIsInline = typeof inline === 'boolean' ? inline : inlineStories;
 
   if (storyIsInline && !prepareForInline) {
-    throw new Error("Story '".concat(storyName, "' is set to render inline, but no 'prepareForInline' function is implemented in your docs configuration!"));
+    throw new Error(`Story '${storyName}' is set to render inline, but no 'prepareForInline' function is implemented in your docs configuration!`);
   }
 
-  var boundStoryFn = function boundStoryFn() {
-    var storyResult = story.unboundStoryFn(Object.assign({}, context.getStoryContext(story), {
+  const boundStoryFn = () => {
+    const storyResult = story.unboundStoryFn(Object.assign({}, context.getStoryContext(story), {
       loaded: {},
       abortSignal: undefined,
       canvasElement: undefined
@@ -94,76 +71,56 @@ export var getStoryProps = function getStoryProps(_ref4, story, context, onStory
     height: height || (storyIsInline ? undefined : iframeHeight),
     title: storyName
   }, storyIsInline && {
-    parameters: parameters,
-    storyFn: function storyFn() {
-      return prepareForInline(boundStoryFn, context.getStoryContext(story));
-    }
+    parameters,
+    storyFn: () => prepareForInline(boundStoryFn, context.getStoryContext(story))
   });
 };
 
 function makeGate() {
-  var open;
-  var gate = new Promise(function (r) {
+  let open;
+  const gate = new Promise(r => {
     open = r;
   });
   return [gate, open];
 }
 
-var Story = function Story(props) {
-  var context = useContext(DocsContext);
-  var channel = addons.getChannel();
-  var storyRef = useRef();
-  var storyId = getStoryId(props, context);
-  var story = useStory(storyId, context);
-
-  var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      showLoader = _useState2[0],
-      setShowLoader = _useState2[1];
-
-  useEffect(function () {
-    var cleanup;
+const Story = props => {
+  const context = useContext(DocsContext);
+  const channel = addons.getChannel();
+  const storyRef = useRef();
+  const storyId = getStoryId(props, context);
+  const story = useStory(storyId, context);
+  const [showLoader, setShowLoader] = useState(true);
+  useEffect(() => {
+    let cleanup;
 
     if (story && storyRef.current) {
-      var element = storyRef.current;
+      const element = storyRef.current;
       cleanup = context.renderStoryToElement(story, element);
       setShowLoader(false);
     }
 
-    return function () {
-      return cleanup && cleanup();
-    };
+    return () => cleanup && cleanup();
   }, [story]);
-
-  var _makeGate = makeGate(),
-      _makeGate2 = _slicedToArray(_makeGate, 2),
-      storyFnRan = _makeGate2[0],
-      onStoryFnRan = _makeGate2[1];
-
-  var _makeGate3 = makeGate(),
-      _makeGate4 = _slicedToArray(_makeGate3, 2),
-      rendered = _makeGate4[0],
-      onRendered = _makeGate4[1];
-
+  const [storyFnRan, onStoryFnRan] = makeGate();
+  const [rendered, onRendered] = makeGate();
   useEffect(onRendered);
 
   if (!story) {
     return /*#__PURE__*/React.createElement(StorySkeleton, null);
   }
 
-  var storyProps = getStoryProps(props, story, context, onStoryFnRan);
+  const storyProps = getStoryProps(props, story, context, onStoryFnRan);
 
   if (!storyProps) {
     return null;
   }
 
   if (storyProps.inline) {
-    var _global$FEATURES;
-
     // If we are rendering a old-style inline Story via `PureStory` below, we want to emit
     // the `STORY_RENDERED` event when it renders. The modern mode below calls out to
     // `Preview.renderStoryToDom()` which itself emits the event.
-    if (!(global !== null && global !== void 0 && (_global$FEATURES = global.FEATURES) !== null && _global$FEATURES !== void 0 && _global$FEATURES.modernInlineRender)) {
+    if (!global?.FEATURES?.modernInlineRender) {
       // We need to wait for two things before we can consider the story rendered:
       //  (a) React's `useEffect` hook needs to fire. This is needed for React stories, as
       //      decorators of the form `<A><B/></A>` will not actually execute `B` in the first
@@ -171,19 +128,21 @@ var Story = function Story(props) {
       //  (b) The story function needs to actually have been called.
       //      Certain frameworks (i.e.angular) don't actually render the component in the very first
       //      React render cycle, so we need to wait for the framework to actually do that
-      Promise.all([storyFnRan, rendered]).then(function () {
+      Promise.all([storyFnRan, rendered]).then(() => {
         channel.emit(Events.STORY_RENDERED, storyId);
       });
     } else {
       // We do this so React doesn't complain when we replace the span in a secondary render
-      var htmlContents = "<span></span>"; // FIXME: height/style/etc. lifted from PureStory
+      const htmlContents = `<span></span>`; // FIXME: height/style/etc. lifted from PureStory
 
-      var height = storyProps.height;
+      const {
+        height
+      } = storyProps;
       return /*#__PURE__*/React.createElement("div", {
         id: storyBlockIdFromId(story.id)
       }, /*#__PURE__*/React.createElement(MDXProvider, {
         components: resetComponents
-      }, height ? /*#__PURE__*/React.createElement("style", null, "#story--".concat(story.id, " { min-height: ").concat(height, "; transform: translateZ(0); overflow: auto }")) : null, showLoader && /*#__PURE__*/React.createElement(StorySkeleton, null), /*#__PURE__*/React.createElement("div", {
+      }, height ? /*#__PURE__*/React.createElement("style", null, `#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`) : null, showLoader && /*#__PURE__*/React.createElement(StorySkeleton, null), /*#__PURE__*/React.createElement("div", {
         ref: storyRef,
         "data-name": story.name,
         dangerouslySetInnerHTML: {

package/dist/esm/blocks/Subheading.js

@@ -1,17 +1,15 @@
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.string.replace.js";
 import React from 'react';
 import { H3 } from '@storybook/components';
 import { HeaderMdx } from './mdx';
-export var Subheading = function Subheading(_ref) {
-  var children = _ref.children,
-      disableAnchor = _ref.disableAnchor;
-
+export const Subheading = ({
+  children,
+  disableAnchor
+}) => {
   if (disableAnchor || typeof children !== 'string') {
     return /*#__PURE__*/React.createElement(H3, null, children);
   }
 
-  var tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-');
+  const tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-');
   return /*#__PURE__*/React.createElement(HeaderMdx, {
     as: "h3",
     id: tagID

package/dist/esm/blocks/Subtitle.js

@@ -1,20 +1,20 @@
 import React, { useContext } from 'react';
 import { Subtitle as PureSubtitle } from '@storybook/components';
 import { DocsContext } from './DocsContext';
-export var Subtitle = function Subtitle(_ref) {
-  var children = _ref.children;
-
-  var _useContext = useContext(DocsContext),
-      id = _useContext.id,
-      storyById = _useContext.storyById;
-
-  var _storyById = storyById(id),
-      parameters = _storyById.parameters;
-
-  var text = children;
+export const Subtitle = ({
+  children
+}) => {
+  const {
+    id,
+    storyById
+  } = useContext(DocsContext);
+  const {
+    parameters
+  } = storyById(id);
+  let text = children;
 
   if (!text) {
-    text = parameters === null || parameters === void 0 ? void 0 : parameters.componentSubtitle;
+    text = parameters?.componentSubtitle;
   }
 
   return text ? /*#__PURE__*/React.createElement(PureSubtitle, {