@storybook/addon-docs 6.4.0-beta.32 → 6.4.0-beta.33

package/dist/cjs/blocks/ArgsTable.js

@@ -233,10 +233,9 @@ var StoryTable = function StoryTable(props) {
         updateArgs = _useArgs2[1],
         resetArgs = _useArgs2[2];
 
-    if (!story) {
-      return /*#__PURE__*/_react.default.createElement("div", null, "Loading...");
-    }
-
+    if (!story) return /*#__PURE__*/_react.default.createElement(_components.ArgsTable, {
+      isLoading: true
+    });
     var argTypes = (0, _store.filterArgTypes)(story.argTypes, include, exclude);
     var mainLabel = (0, _utils.getComponentName)(component) || 'Story';
 

package/dist/cjs/blocks/Canvas.js

@@ -128,7 +128,8 @@ var Canvas = function Canvas(props) {
       previewProps = _getPreviewProps.previewProps;
 
   var children = props.children;
-  return isLoading ? null : /*#__PURE__*/_react.default.createElement(_react2.MDXProvider, {
+  if (isLoading) return /*#__PURE__*/_react.default.createElement(_components.PreviewSkeleton, null);
+  return /*#__PURE__*/_react.default.createElement(_react2.MDXProvider, {
     components: _components.resetComponents
   }, /*#__PURE__*/_react.default.createElement(_components.Preview, previewProps, children));
 };

package/dist/cjs/blocks/Story.js

@@ -2,23 +2,27 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-require("core-js/modules/es.weak-map.js");
+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.string.iterator.js");
 
 require("core-js/modules/es.array.iterator.js");
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
-require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.array.slice.js");
 
-require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.from.js");
 
-require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.weak-map.js");
 
-require("core-js/modules/es.symbol.iterator.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -57,6 +61,18 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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 storyBlockIdFromId = function storyBlockIdFromId(storyId) {
   return "story--".concat(storyId);
 };
@@ -142,13 +158,19 @@ var Story = function Story(props) {
 
   var channel = _addons.addons.getChannel();
 
-  var ref = (0, _react.useRef)();
+  var storyRef = (0, _react.useRef)();
   var storyId = getStoryId(props, context);
   var story = (0, _useStory.useStory)(storyId, context);
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      showLoader = _useState2[0],
+      setShowLoader = _useState2[1];
+
   (0, _react.useEffect)(function () {
     var cleanup;
 
-    if (story && ref.current) {
+    if (story && storyRef.current) {
       var componentId = story.componentId,
           id = story.id,
           title = story.title,
@@ -168,8 +190,9 @@ var Story = function Story(props) {
       cleanup = context.renderStoryToElement({
         story: story,
         renderContext: renderContext,
-        element: ref.current
+        element: storyRef.current
       });
+      setShowLoader(false);
     }
 
     return function () {
@@ -178,7 +201,7 @@ var Story = function Story(props) {
   }, [story]);
 
   if (!story) {
-    return /*#__PURE__*/_react.default.createElement("div", null, "Loading...");
+    return /*#__PURE__*/_react.default.createElement(_components.StorySkeleton, null);
   } // 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.
@@ -194,15 +217,15 @@ var Story = function Story(props) {
 
   if (_global.default !== null && _global.default !== void 0 && (_global$FEATURES = _global.default.FEATURES) !== null && _global$FEATURES !== void 0 && _global$FEATURES.modernInlineRender) {
     // We do this so React doesn't complain when we replace the span in a secondary render
-    var htmlContents = "<span data-is-loading-indicator=\"true\">loading story...</span>"; // FIXME: height/style/etc. lifted from PureStory
+    var htmlContents = "<span></span>"; // FIXME: height/style/etc. lifted from PureStory
 
     var height = storyProps.height;
     return /*#__PURE__*/_react.default.createElement("div", {
       id: storyBlockIdFromId(story.id)
     }, /*#__PURE__*/_react.default.createElement(_react2.MDXProvider, {
       components: _components.resetComponents
-    }, height ? /*#__PURE__*/_react.default.createElement("style", null, "#story--".concat(story.id, " { min-height: ").concat(height, "; transform: translateZ(0); overflow: auto }")) : null, /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref,
+    }, height ? /*#__PURE__*/_react.default.createElement("style", null, "#story--".concat(story.id, " { min-height: ").concat(height, "; transform: translateZ(0); overflow: auto }")) : null, showLoader && /*#__PURE__*/_react.default.createElement(_components.StorySkeleton, null), /*#__PURE__*/_react.default.createElement("div", {
+      ref: storyRef,
       "data-name": story.name,
       dangerouslySetInnerHTML: {
         __html: htmlContents

package/dist/cjs/blocks/useStory.js

@@ -60,7 +60,12 @@ function useStory(storyId, context) {
 }
 
 function useStories(storyIds, context) {
-  var _useState = (0, _react.useState)({}),
+  var initialStoriesById = context.componentStories().reduce(function (acc, story) {
+    acc[story.id] = story;
+    return acc;
+  }, {});
+
+  var _useState = (0, _react.useState)(initialStoriesById),
       _useState2 = _slicedToArray(_useState, 2),
       storiesById = _useState2[0],
       setStories = _useState2[1];

package/dist/esm/blocks/ArgsTable.js

@@ -185,10 +185,9 @@ export var StoryTable = function StoryTable(props) {
         updateArgs = _useArgs2[1],
         resetArgs = _useArgs2[2];
 
-    if (!story) {
-      return /*#__PURE__*/React.createElement("div", null, "Loading...");
-    }
-
+    if (!story) return /*#__PURE__*/React.createElement(PureArgsTable, {
+      isLoading: true
+    });
     var argTypes = filterArgTypes(story.argTypes, include, exclude);
     var mainLabel = getComponentName(component) || 'Story';
 

package/dist/esm/blocks/Canvas.js

@@ -12,7 +12,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useContext } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import { toId, storyNameFromExport } from '@storybook/csf';
-import { resetComponents, Preview as PurePreview } from '@storybook/components';
+import { resetComponents, Preview as PurePreview, PreviewSkeleton } from '@storybook/components';
 import { DocsContext } from './DocsContext';
 import { SourceContext } from './SourceContainer';
 import { getSourceProps, SourceState } from './Source';
@@ -82,7 +82,8 @@ export var Canvas = function Canvas(props) {
       previewProps = _getPreviewProps.previewProps;
 
   var children = props.children;
-  return isLoading ? null : /*#__PURE__*/React.createElement(MDXProvider, {
+  if (isLoading) return /*#__PURE__*/React.createElement(PreviewSkeleton, null);
+  return /*#__PURE__*/React.createElement(MDXProvider, {
     components: resetComponents
   }, /*#__PURE__*/React.createElement(PurePreview, previewProps, children));
 };

package/dist/esm/blocks/Story.js

@@ -1,10 +1,31 @@
+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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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.array.concat.js";
-import React, { useContext, useRef, useEffect } from 'react';
+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.string.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.array.from.js";
+import React, { useContext, useRef, useEffect, useState } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import global from 'global';
-import { resetComponents, Story as PureStory } from '@storybook/components';
+import { resetComponents, Story as PureStory, StorySkeleton } from '@storybook/components';
 import { toId, storyNameFromExport } from '@storybook/csf';
 import { addons } from '@storybook/addons';
 import Events from '@storybook/core-events';
@@ -83,13 +104,19 @@ var Story = function Story(props) {
 
   var context = useContext(DocsContext);
   var channel = addons.getChannel();
-  var ref = useRef();
+  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;
 
-    if (story && ref.current) {
+    if (story && storyRef.current) {
       var componentId = story.componentId,
           id = story.id,
           title = story.title,
@@ -109,8 +136,9 @@ var Story = function Story(props) {
       cleanup = context.renderStoryToElement({
         story: story,
         renderContext: renderContext,
-        element: ref.current
+        element: storyRef.current
       });
+      setShowLoader(false);
     }
 
     return function () {
@@ -119,7 +147,7 @@ var Story = function Story(props) {
   }, [story]);
 
   if (!story) {
-    return /*#__PURE__*/React.createElement("div", null, "Loading...");
+    return /*#__PURE__*/React.createElement(StorySkeleton, null);
   } // 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.
@@ -135,15 +163,15 @@ var Story = function Story(props) {
 
   if (global !== null && global !== void 0 && (_global$FEATURES = global.FEATURES) !== null && _global$FEATURES !== void 0 && _global$FEATURES.modernInlineRender) {
     // We do this so React doesn't complain when we replace the span in a secondary render
-    var htmlContents = "<span data-is-loading-indicator=\"true\">loading story...</span>"; // FIXME: height/style/etc. lifted from PureStory
+    var htmlContents = "<span></span>"; // FIXME: height/style/etc. lifted from PureStory
 
     var height = storyProps.height;
     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, /*#__PURE__*/React.createElement("div", {
-      ref: ref,
+    }, 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", {
+      ref: storyRef,
       "data-name": story.name,
       dangerouslySetInnerHTML: {
         __html: htmlContents

package/dist/esm/blocks/useStory.js

@@ -38,7 +38,12 @@ export function useStory(storyId, context) {
   return stories && stories[0];
 }
 export function useStories(storyIds, context) {
-  var _useState = useState({}),
+  var initialStoriesById = context.componentStories().reduce(function (acc, story) {
+    acc[story.id] = story;
+    return acc;
+  }, {});
+
+  var _useState = useState(initialStoriesById),
       _useState2 = _slicedToArray(_useState, 2),
       storiesById = _useState2[0],
       setStories = _useState2[1];

package/dist/modern/blocks/ArgsTable.js

@@ -139,11 +139,9 @@ export const StoryTable = props => {
     const story = useStory(storyId, context); // eslint-disable-next-line prefer-const
 
     let [args, updateArgs, resetArgs] = useArgs(storyId, context);
-
-    if (!story) {
-      return /*#__PURE__*/React.createElement("div", null, "Loading...");
-    }
-
+    if (!story) return /*#__PURE__*/React.createElement(PureArgsTable, {
+      isLoading: true
+    });
     const argTypes = filterArgTypes(story.argTypes, include, exclude);
     const mainLabel = getComponentName(component) || 'Story';
     let tabs = {

package/dist/modern/blocks/Canvas.js

@@ -3,7 +3,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useContext } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import { toId, storyNameFromExport } from '@storybook/csf';
-import { resetComponents, Preview as PurePreview } from '@storybook/components';
+import { resetComponents, Preview as PurePreview, PreviewSkeleton } from '@storybook/components';
 import { DocsContext } from './DocsContext';
 import { SourceContext } from './SourceContainer';
 import { getSourceProps, SourceState } from './Source';
@@ -72,7 +72,8 @@ export const Canvas = props => {
   const {
     children
   } = props;
-  return isLoading ? null : /*#__PURE__*/React.createElement(MDXProvider, {
+  if (isLoading) return /*#__PURE__*/React.createElement(PreviewSkeleton, null);
+  return /*#__PURE__*/React.createElement(MDXProvider, {
     components: resetComponents
   }, /*#__PURE__*/React.createElement(PurePreview, previewProps, children));
 };

package/dist/modern/blocks/Story.js

@@ -1,7 +1,7 @@
-import React, { useContext, useRef, useEffect } from 'react';
+import React, { useContext, useRef, useEffect, useState } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import global from 'global';
-import { resetComponents, Story as PureStory } from '@storybook/components';
+import { resetComponents, Story as PureStory, StorySkeleton } from '@storybook/components';
 import { toId, storyNameFromExport } from '@storybook/csf';
 import { addons } from '@storybook/addons';
 import Events from '@storybook/core-events';
@@ -81,13 +81,14 @@ const Story = props => {
 
   const context = useContext(DocsContext);
   const channel = addons.getChannel();
-  const ref = useRef();
+  const storyRef = useRef();
   const storyId = getStoryId(props, context);
   const story = useStory(storyId, context);
+  const [showLoader, setShowLoader] = useState(true);
   useEffect(() => {
     let cleanup;
 
-    if (story && ref.current) {
+    if (story && storyRef.current) {
       const {
         componentId,
         id,
@@ -109,15 +110,16 @@ const Story = props => {
       cleanup = context.renderStoryToElement({
         story,
         renderContext,
-        element: ref.current
+        element: storyRef.current
       });
+      setShowLoader(false);
     }
 
     return () => cleanup && cleanup();
   }, [story]);
 
   if (!story) {
-    return /*#__PURE__*/React.createElement("div", null, "Loading...");
+    return /*#__PURE__*/React.createElement(StorySkeleton, null);
   } // 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.
@@ -131,7 +133,7 @@ const Story = props => {
 
   if (global !== null && global !== void 0 && (_global$FEATURES = global.FEATURES) !== null && _global$FEATURES !== void 0 && _global$FEATURES.modernInlineRender) {
     // We do this so React doesn't complain when we replace the span in a secondary render
-    const htmlContents = `<span data-is-loading-indicator="true">loading story...</span>`; // FIXME: height/style/etc. lifted from PureStory
+    const htmlContents = `<span></span>`; // FIXME: height/style/etc. lifted from PureStory
 
     const {
       height
@@ -140,8 +142,8 @@ const Story = props => {
       id: storyBlockIdFromId(story.id)
     }, /*#__PURE__*/React.createElement(MDXProvider, {
       components: resetComponents
-    }, height ? /*#__PURE__*/React.createElement("style", null, `#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`) : null, /*#__PURE__*/React.createElement("div", {
-      ref: ref,
+    }, 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: {
         __html: htmlContents

package/dist/modern/blocks/useStory.js

@@ -1,10 +1,15 @@
+import "core-js/modules/es.array.reduce.js";
 import { useState, useEffect } from 'react';
 export function useStory(storyId, context) {
   const stories = useStories([storyId], context);
   return stories && stories[0];
 }
 export function useStories(storyIds, context) {
-  const [storiesById, setStories] = useState({});
+  const initialStoriesById = context.componentStories().reduce((acc, story) => {
+    acc[story.id] = story;
+    return acc;
+  }, {});
+  const [storiesById, setStories] = useState(initialStoriesById);
   useEffect(() => {
     Promise.all(storyIds.map(async storyId => {
       // loadStory will be called every single time useStory is called

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "6.4.0-beta.32",
+  "version": "6.4.0-beta.33",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -63,21 +63,21 @@
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "6.4.0-beta.32",
-    "@storybook/api": "6.4.0-beta.32",
-    "@storybook/builder-webpack4": "6.4.0-beta.32",
-    "@storybook/client-logger": "6.4.0-beta.32",
-    "@storybook/components": "6.4.0-beta.32",
-    "@storybook/core": "6.4.0-beta.32",
-    "@storybook/core-events": "6.4.0-beta.32",
+    "@storybook/addons": "6.4.0-beta.33",
+    "@storybook/api": "6.4.0-beta.33",
+    "@storybook/builder-webpack4": "6.4.0-beta.33",
+    "@storybook/client-logger": "6.4.0-beta.33",
+    "@storybook/components": "6.4.0-beta.33",
+    "@storybook/core": "6.4.0-beta.33",
+    "@storybook/core-events": "6.4.0-beta.33",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/csf-tools": "6.4.0-beta.32",
-    "@storybook/node-logger": "6.4.0-beta.32",
-    "@storybook/postinstall": "6.4.0-beta.32",
-    "@storybook/preview-web": "6.4.0-beta.32",
-    "@storybook/source-loader": "6.4.0-beta.32",
-    "@storybook/store": "6.4.0-beta.32",
-    "@storybook/theming": "6.4.0-beta.32",
+    "@storybook/csf-tools": "6.4.0-beta.33",
+    "@storybook/node-logger": "6.4.0-beta.33",
+    "@storybook/postinstall": "6.4.0-beta.33",
+    "@storybook/preview-web": "6.4.0-beta.33",
+    "@storybook/source-loader": "6.4.0-beta.33",
+    "@storybook/store": "6.4.0-beta.33",
+    "@storybook/theming": "6.4.0-beta.33",
     "acorn": "^7.4.1",
     "acorn-jsx": "^5.3.1",
     "acorn-walk": "^7.2.0",
@@ -106,11 +106,11 @@
     "@babel/core": "^7.12.10",
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",
-    "@storybook/angular": "6.4.0-beta.32",
-    "@storybook/html": "6.4.0-beta.32",
-    "@storybook/react": "6.4.0-beta.32",
-    "@storybook/vue": "6.4.0-beta.32",
-    "@storybook/web-components": "6.4.0-beta.32",
+    "@storybook/angular": "6.4.0-beta.33",
+    "@storybook/html": "6.4.0-beta.33",
+    "@storybook/react": "6.4.0-beta.33",
+    "@storybook/vue": "6.4.0-beta.33",
+    "@storybook/web-components": "6.4.0-beta.33",
     "@types/cross-spawn": "^6.0.2",
     "@types/doctrine": "^0.0.3",
     "@types/enzyme": "^3.10.8",
@@ -140,12 +140,12 @@
     "zone.js": "^0.11.3"
   },
   "peerDependencies": {
-    "@storybook/angular": "6.4.0-beta.32",
-    "@storybook/html": "6.4.0-beta.32",
-    "@storybook/react": "6.4.0-beta.32",
-    "@storybook/vue": "6.4.0-beta.32",
-    "@storybook/vue3": "6.4.0-beta.32",
-    "@storybook/web-components": "6.4.0-beta.32",
+    "@storybook/angular": "6.4.0-beta.33",
+    "@storybook/html": "6.4.0-beta.33",
+    "@storybook/react": "6.4.0-beta.33",
+    "@storybook/vue": "6.4.0-beta.33",
+    "@storybook/vue3": "6.4.0-beta.33",
+    "@storybook/web-components": "6.4.0-beta.33",
     "lit": "^2.0.0-rc.1",
     "lit-html": "^1.4.1 || ^2.0.0-rc.3",
     "react": "^16.8.0 || ^17.0.0",
@@ -202,7 +202,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0f99f609b55928e48cca7c57f6e343d079bb94dd",
+  "gitHead": "c85171dc319d1d3a31eee1b762f01ba84ae45194",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Docs",