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

package/dist/modern/frameworks/angular/sourceDecorator.js

@@ -1,7 +1,5 @@
 import { addons, useEffect } from '@storybook/addons';
 import { computesTemplateSourceFromComponent } from '@storybook/angular/renderer';
-import prettierHtml from 'prettier/parser-html';
-import prettier from 'prettier/standalone';
 import { SNIPPET_RENDERED, SourceType } from '../../shared';
 export const skipSourceRender = context => {
   var _context$parameters$d;
@@ -16,16 +14,28 @@ export const skipSourceRender = context => {
 
   return (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.code) || (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === SourceType.CODE;
 };
+let prettyUpInternal;
 
-const prettyUp = source => {
-  return prettier.format(source, {
-    parser: 'angular',
-    plugins: [prettierHtml],
-    htmlWhitespaceSensitivity: 'ignore'
-  });
+const makePrettyUp = async () => {
+  if (prettyUpInternal) {
+    return prettyUpInternal;
+  }
+
+  const prettierHtml = await import('prettier/parser-html');
+  const prettier = await import('prettier/standalone');
+
+  prettyUpInternal = source => {
+    return prettier.format(source, {
+      parser: 'angular',
+      plugins: [prettierHtml],
+      htmlWhitespaceSensitivity: 'ignore'
+    });
+  };
+
+  return prettyUpInternal;
 };
 /**
- * Svelte source decorator.
+ * Angular source decorator.
  * @param storyFn Fn
  * @param context  StoryContext
  */
@@ -49,20 +59,23 @@ export const sourceDecorator = (storyFn, context) => {
     argTypes
   } = context;
   let toEmit;
+  const prettyUpPromise = makePrettyUp();
   useEffect(() => {
-    if (toEmit) channel.emit(SNIPPET_RENDERED, context.id, prettyUp(template));
+    prettyUpPromise.then(prettyUp => {
+      if (toEmit) channel.emit(SNIPPET_RENDERED, context.id, prettyUp(toEmit));
+    });
   });
+  prettyUpPromise.then(prettyUp => {
+    if (component && !userDefinedTemplate) {
+      const source = computesTemplateSourceFromComponent(component, props, argTypes); // We might have a story with a Directive or Service defined as the component
+      // In these cases there might exist a template, even if we aren't able to create source from component
 
-  if (component && !userDefinedTemplate) {
-    const source = computesTemplateSourceFromComponent(component, props, argTypes); // We might have a story with a Directive or Service defined as the component
-    // In these cases there might exist a template, even if we aren't able to create source from component
-
-    if (source || template) {
-      toEmit = prettyUp(source || template);
+      if (source || template) {
+        toEmit = prettyUp(source || template);
+      }
+    } else if (template) {
+      toEmit = prettyUp(template);
     }
-  } else if (template) {
-    toEmit = prettyUp(template);
-  }
-
+  });
   return story;
 };

package/dist/modern/frameworks/common/config.js

@@ -1,10 +1,9 @@
-import { DocsContainer, DocsPage } from '../../blocks';
 import { enhanceArgTypes } from './enhanceArgTypes';
 export const parameters = {
   docs: {
     inlineStories: false,
-    container: DocsContainer,
-    page: DocsPage,
+    getContainer: async () => (await import('../../blocks')).DocsContainer,
+    getPage: async () => (await import('../../blocks')).DocsPage,
     iframeHeight: 100
   }
 };

package/dist/modern/frameworks/html/sourceDecorator.js

@@ -38,8 +38,15 @@ export function sourceDecorator(storyFn, context) {
   const story = context !== null && context !== void 0 && (_context$parameters$d3 = context.parameters.docs) !== null && _context$parameters$d3 !== void 0 && (_context$parameters$d4 = _context$parameters$d3.source) !== null && _context$parameters$d4 !== void 0 && _context$parameters$d4.excludeDecorators ? context.originalStoryFn(context.args, context) : storyFn();
   let source;
 
-  if (typeof story === 'string' && !skipSourceRender(context)) {
-    source = applyTransformSource(story, context);
+  if (!skipSourceRender(context)) {
+    if (typeof story === 'string') {
+      source = story;
+    } // eslint-disable-next-line no-undef
+    else if (story instanceof Element) {
+        source = story.outerHTML;
+      }
+
+    if (source) source = applyTransformSource(source, context);
   }
 
   useEffect(() => {

package/dist/modern/frameworks/react/react-argtypes.stories.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import mapValues from 'lodash/mapValues';
 import { storiesOf } from '@storybook/react';
 import { ArgsTable } from '@storybook/components';
-import { inferControls } from '@storybook/client-api';
+import { inferControls } from '@storybook/store';
 import { extractArgTypes } from './extractArgTypes';
 
 const argsTableProps = component => {

package/dist/modern/frameworks/vue/extractArgTypes.js

@@ -1,6 +1,58 @@
 import { hasDocgen, extractComponentProps } from '../../lib/docgen';
 import { convert } from '../../lib/convert';
 const SECTIONS = ['props', 'events', 'slots'];
+/**
+ * Check if "@values" tag is defined within docgenInfo.
+ * If true, then propDef is mutated.
+ */
+
+function isEnum(propDef, docgenInfo) {
+  // cast as any, since "values" doesn't exist in DocgenInfo type
+  const {
+    type,
+    values
+  } = docgenInfo;
+  const matched = Array.isArray(values) && values.length && type.name !== 'enum';
+  if (!matched) return false;
+  const enumString = values.join(', ');
+  let {
+    summary
+  } = propDef.type;
+  summary = summary ? `${summary}: ${enumString}` : enumString;
+  Object.assign(propDef.type, Object.assign({}, propDef.type, {
+    name: 'enum',
+    value: values,
+    summary
+  }));
+  return propDef;
+}
+/**
+ * @returns {Array} result
+ * @returns {PropDef} result.def - propDef
+ * @returns {boolean} result.isChanged - flag whether propDef is mutated or not.
+ *  this is needed to prevent sbType from performing convert(docgenInfo).
+ */
+
+
+function verifyPropDef(propDef, docgenInfo) {
+  let def = propDef;
+  let isChanged = false; // another callback can be added here.
+  // callback is mutually exclusive from each other.
+
+  const callbacks = [isEnum];
+
+  for (let i = 0, len = callbacks.length; i < len; i += 1) {
+    const matched = callbacks[i](propDef, docgenInfo);
+
+    if (matched) {
+      def = matched;
+      isChanged = true;
+    }
+  }
+
+  return [def, isChanged];
+}
+
 export const extractArgTypes = component => {
   if (!hasDocgen(component)) {
     return null;
@@ -14,16 +66,24 @@ export const extractArgTypes = component => {
       docgenInfo,
       jsDocTags
     }) => {
+      const [result, isPropDefChanged] = verifyPropDef(propDef, docgenInfo);
       const {
         name,
         type,
         description,
         defaultValue: defaultSummary,
         required
-      } = propDef;
-      const sbType = section === 'props' ? convert(docgenInfo) : {
-        name: 'void'
-      };
+      } = result;
+      let sbType;
+
+      if (isPropDefChanged) {
+        sbType = type;
+      } else {
+        sbType = section === 'props' ? convert(docgenInfo) : {
+          name: 'void'
+        };
+      }
+
       results[name] = {
         name,
         description,

package/dist/modern/frameworks/vue/sourceDecorator.js

@@ -3,8 +3,6 @@ import "core-js/modules/es.array.reduce.js";
 /* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */
 import { addons } from '@storybook/addons';
 import { logger } from '@storybook/client-logger';
-import prettier from 'prettier/standalone';
-import prettierHtml from 'prettier/parser-html';
 import { SourceType, SNIPPET_RENDERED } from '../../shared';
 export const skipSourceRender = context => {
   var _context$parameters$d;
@@ -46,13 +44,20 @@ export const sourceDecorator = (storyFn, context) => {
       try {
         const storyNode = lookupStoryInstance(this, storyComponent);
         const code = vnodeToString(storyNode._vnode);
-        channel.emit(SNIPPET_RENDERED, (context || {}).id, prettier.format(`<template>${code}</template>`, {
-          parser: 'vue',
-          plugins: [prettierHtml],
-          // Because the parsed vnode missing spaces right before/after the surround tag,
-          // we always get weird wrapped code without this option.
-          htmlWhitespaceSensitivity: 'ignore'
-        }));
+
+        const emitFormattedTemplate = async () => {
+          const prettier = await import('prettier/standalone');
+          const prettierHtml = await import('prettier/parser-html');
+          channel.emit(SNIPPET_RENDERED, (context || {}).id, prettier.format(`<template>${code}</template>`, {
+            parser: 'vue',
+            plugins: [prettierHtml],
+            // Because the parsed vnode missing spaces right before/after the surround tag,
+            // we always get weird wrapped code without this option.
+            htmlWhitespaceSensitivity: 'ignore'
+          }));
+        };
+
+        emitFormattedTemplate();
       } catch (e) {
         logger.warn(`Failed to generate dynamic story source: ${e}`);
       }

package/dist/modern/frameworks/web-components/custom-elements.js

@@ -3,34 +3,66 @@ import { getCustomElements, isValidComponent, isValidMetaData } from '@storybook
 import { logger } from '@storybook/client-logger';
 
 function mapData(data, category) {
-  return data && data.filter(item => !!item).reduce((acc, item) => {
-    var _item$type, _item$type2;
-
+  return data && data.filter(item => item && item.name).reduce((acc, item) => {
     if (item.kind === 'method') return acc;
-    const type = category === 'properties' ? {
-      name: ((_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.text) || item.type
-    } : {
-      name: 'void'
-    };
-    acc[item.name] = {
-      name: item.name,
-      required: false,
-      description: item.description,
-      type,
-      table: {
-        category,
-        type: {
-          summary: ((_item$type2 = item.type) === null || _item$type2 === void 0 ? void 0 : _item$type2.text) || item.type
-        },
-        defaultValue: {
-          summary: item.default !== undefined ? item.default : item.defaultValue
-        }
-      }
-    };
+
+    switch (category) {
+      case 'events':
+        mapEvent(item).forEach(argType => {
+          acc[argType.name] = argType;
+        });
+        break;
+
+      default:
+        acc[item.name] = mapItem(item, category);
+        break;
+    }
+
     return acc;
   }, {});
 }
 
+function mapItem(item, category) {
+  var _item$type, _item$type2;
+
+  const type = category === 'properties' ? {
+    name: ((_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.text) || item.type
+  } : {
+    name: 'void'
+  };
+  return {
+    name: item.name,
+    required: false,
+    description: item.description,
+    type,
+    table: {
+      category,
+      type: {
+        summary: ((_item$type2 = item.type) === null || _item$type2 === void 0 ? void 0 : _item$type2.text) || item.type
+      },
+      defaultValue: {
+        summary: item.default !== undefined ? item.default : item.defaultValue
+      }
+    }
+  };
+}
+
+function mapEvent(item) {
+  let name = item.name.replace(/(-|_|:|\.|\s)+(.)?/g, (_match, _separator, chr) => {
+    return chr ? chr.toUpperCase() : '';
+  }).replace(/^([A-Z])/, match => match.toLowerCase());
+  name = `on${name.charAt(0).toUpperCase() + name.substr(1)}`;
+  return [{
+    name,
+    action: {
+      name: item.name
+    },
+    table: {
+      disable: true
+    }
+  }, mapItem(item, 'events')];
+}
+
 const getMetaDataExperimental = (tagName, customElements) => {
   if (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
     return null;

package/dist/ts3.4/blocks/Story.d.ts

@@ -23,6 +23,6 @@ declare type StoryImportProps = {
 export declare type StoryProps = (StoryDefProps | StoryRefProps | StoryImportProps) & CommonProps;
 export declare const lookupStoryId: (storyName: string, { mdxStoryNameToKey, mdxComponentAnnotations }: DocsContextProps) => string;
 export declare const getStoryId: (props: StoryProps, context: DocsContextProps) => StoryId;
-export declare const getStoryProps: <TFramework extends AnyFramework>({ height, inline }: StoryProps, story: StoryType<TFramework>, context: DocsContextProps<TFramework>) => PureStoryProps;
+export declare const getStoryProps: <TFramework extends AnyFramework>({ height, inline }: StoryProps, story: StoryType<TFramework>, context: DocsContextProps<TFramework>, onStoryFnCalled: () => void) => PureStoryProps;
 declare const Story: FunctionComponent<StoryProps>;
 export { Story };

package/dist/ts3.4/frameworks/angular/config.d.ts

@@ -3,7 +3,7 @@ import { SourceType } from '../../shared';
 export declare const parameters: {
     docs: {
         inlineStories: boolean;
-        prepareForInline: (storyFn: import("@storybook/csf").PartialStoryFn<import("@storybook/angular").AngularFramework, import("@storybook/csf").Args>, { id, parameters }: import("@storybook/angular").StoryContext) => import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+        prepareForInline: (storyFn: import("@storybook/csf").PartialStoryFn<import("@storybook/angular").AngularFramework, import("@storybook/csf").Args>, { id, parameters, component }: import("@storybook/angular").StoryContext) => import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<undefined>, undefined>;
         extractArgTypes: (component: import("./types").Directive) => import("@storybook/api").ArgTypes;
         extractComponentDescription: (component: import("./types").Directive) => string;
         source: {

package/dist/ts3.4/frameworks/angular/prepareForInline.d.ts

@@ -4,4 +4,4 @@ import { PartialStoryFn } from '@storybook/csf';
 /**
  * Uses the angular renderer to generate a story. Uses p-limit to run synchronously
  */
-export declare const prepareForInline: (storyFn: PartialStoryFn<AngularFramework>, { id, parameters }: StoryContext) => React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export declare const prepareForInline: (storyFn: PartialStoryFn<AngularFramework>, { id, parameters, component }: StoryContext) => React.DetailedReactHTMLElement<React.HTMLAttributes<undefined>, undefined>;

package/dist/ts3.4/frameworks/angular/sourceDecorator.d.ts

@@ -2,7 +2,7 @@ import { PartialStoryFn } from '@storybook/csf';
 import { StoryContext, AngularFramework } from '@storybook/angular';
 export declare const skipSourceRender: (context: StoryContext) => any;
 /**
- * Svelte source decorator.
+ * Angular source decorator.
  * @param storyFn Fn
  * @param context  StoryContext
  */

package/dist/ts3.4/frameworks/common/config.d.ts

@@ -2,8 +2,8 @@
 export declare const parameters: {
     docs: {
         inlineStories: boolean;
-        container: import("react").FunctionComponent<import("../../blocks").DocsContainerProps<import("@storybook/csf").AnyFramework>>;
-        page: import("react").FC<{}>;
+        getContainer: () => Promise<import("react").FunctionComponent<import("../../blocks").DocsContainerProps<import("@storybook/csf").AnyFramework>>>;
+        getPage: () => Promise<import("react").FC<{}>>;
         iframeHeight: number;
     };
 };

package/dist/ts3.4/frameworks/web-components/custom-elements.d.ts

@@ -1,7 +1,8 @@
+import { ArgType } from '@storybook/api';
 interface TagItem {
     name: string;
     type: {
-        text: string;
+        [key: string]: any;
     };
     description: string;
     default?: any;
@@ -26,10 +27,10 @@ interface CustomElements {
     ];
 }
 export declare const extractArgTypesFromElements: (tagName: string, customElements: CustomElements) => {
-    [x: string]: import("@storybook/api").ArgType;
+    [x: string]: ArgType;
 };
 export declare const extractArgTypes: (tagName: string) => {
-    [x: string]: import("@storybook/api").ArgType;
+    [x: string]: ArgType;
 };
 export declare const extractComponentDescription: (tagName: string) => string;
 export {};

package/dist/ts3.9/blocks/Story.d.ts

@@ -23,6 +23,6 @@ declare type StoryImportProps = {
 export declare type StoryProps = (StoryDefProps | StoryRefProps | StoryImportProps) & CommonProps;
 export declare const lookupStoryId: (storyName: string, { mdxStoryNameToKey, mdxComponentAnnotations }: DocsContextProps) => string;
 export declare const getStoryId: (props: StoryProps, context: DocsContextProps) => StoryId;
-export declare const getStoryProps: <TFramework extends AnyFramework>({ height, inline }: StoryProps, story: StoryType<TFramework>, context: DocsContextProps<TFramework>) => PureStoryProps;
+export declare const getStoryProps: <TFramework extends AnyFramework>({ height, inline }: StoryProps, story: StoryType<TFramework>, context: DocsContextProps<TFramework>, onStoryFnCalled: () => void) => PureStoryProps;
 declare const Story: FunctionComponent<StoryProps>;
 export { Story };

package/dist/ts3.9/frameworks/angular/config.d.ts

@@ -3,7 +3,7 @@ import { SourceType } from '../../shared';
 export declare const parameters: {
     docs: {
         inlineStories: boolean;
-        prepareForInline: (storyFn: import("@storybook/csf").PartialStoryFn<import("@storybook/angular").AngularFramework, import("@storybook/csf").Args>, { id, parameters }: import("@storybook/angular").StoryContext) => import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+        prepareForInline: (storyFn: import("@storybook/csf").PartialStoryFn<import("@storybook/angular").AngularFramework, import("@storybook/csf").Args>, { id, parameters, component }: import("@storybook/angular").StoryContext) => import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<undefined>, undefined>;
         extractArgTypes: (component: import("./types").Directive) => import("@storybook/api").ArgTypes;
         extractComponentDescription: (component: import("./types").Directive) => string;
         source: {

package/dist/ts3.9/frameworks/angular/prepareForInline.d.ts

@@ -4,4 +4,4 @@ import { PartialStoryFn } from '@storybook/csf';
 /**
  * Uses the angular renderer to generate a story. Uses p-limit to run synchronously
  */
-export declare const prepareForInline: (storyFn: PartialStoryFn<AngularFramework>, { id, parameters }: StoryContext) => React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export declare const prepareForInline: (storyFn: PartialStoryFn<AngularFramework>, { id, parameters, component }: StoryContext) => React.DetailedReactHTMLElement<React.HTMLAttributes<undefined>, undefined>;

package/dist/ts3.9/frameworks/angular/sourceDecorator.d.ts

@@ -2,7 +2,7 @@ import { PartialStoryFn } from '@storybook/csf';
 import { StoryContext, AngularFramework } from '@storybook/angular';
 export declare const skipSourceRender: (context: StoryContext) => any;
 /**
- * Svelte source decorator.
+ * Angular source decorator.
  * @param storyFn Fn
  * @param context  StoryContext
  */

package/dist/ts3.9/frameworks/common/config.d.ts

@@ -2,8 +2,8 @@
 export declare const parameters: {
     docs: {
         inlineStories: boolean;
-        container: import("react").FunctionComponent<import("../../blocks").DocsContainerProps<import("@storybook/csf").AnyFramework>>;
-        page: import("react").FC<{}>;
+        getContainer: () => Promise<import("react").FunctionComponent<import("../../blocks").DocsContainerProps<import("@storybook/csf").AnyFramework>>>;
+        getPage: () => Promise<import("react").FC<{}>>;
         iframeHeight: number;
     };
 };

package/dist/ts3.9/frameworks/web-components/custom-elements.d.ts

@@ -1,7 +1,8 @@
+import { ArgType } from '@storybook/api';
 interface TagItem {
     name: string;
     type: {
-        text: string;
+        [key: string]: any;
     };
     description: string;
     default?: any;
@@ -25,10 +26,10 @@ interface CustomElements {
     modules?: [];
 }
 export declare const extractArgTypesFromElements: (tagName: string, customElements: CustomElements) => {
-    [x: string]: import("@storybook/api").ArgType;
+    [x: string]: ArgType;
 };
 export declare const extractArgTypes: (tagName: string) => {
-    [x: string]: import("@storybook/api").ArgType;
+    [x: string]: ArgType;
 };
 export declare const extractComponentDescription: (tagName: string) => string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "6.4.0-beta.3",
+  "version": "6.4.0-beta.33",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -63,22 +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.3",
-    "@storybook/api": "6.4.0-beta.3",
-    "@storybook/builder-webpack4": "6.4.0-beta.3",
-    "@storybook/client-api": "6.4.0-beta.3",
-    "@storybook/client-logger": "6.4.0-beta.3",
-    "@storybook/components": "6.4.0-beta.3",
-    "@storybook/core": "6.4.0-beta.3",
-    "@storybook/core-events": "6.4.0-beta.3",
-    "@storybook/csf": "0.0.2--canary.6aca495.0",
-    "@storybook/csf-tools": "6.4.0-beta.3",
-    "@storybook/node-logger": "6.4.0-beta.3",
-    "@storybook/postinstall": "6.4.0-beta.3",
-    "@storybook/preview-web": "6.4.0-beta.3",
-    "@storybook/source-loader": "6.4.0-beta.3",
-    "@storybook/store": "6.4.0-beta.3",
-    "@storybook/theming": "6.4.0-beta.3",
+    "@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.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",
@@ -95,7 +94,7 @@
     "p-limit": "^3.1.0",
     "prettier": "^2.2.1",
     "prop-types": "^15.7.2",
-    "react-element-to-jsx-string": "^14.3.2",
+    "react-element-to-jsx-string": "^14.3.4",
     "regenerator-runtime": "^0.13.7",
     "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",
@@ -107,11 +106,11 @@
     "@babel/core": "^7.12.10",
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",
-    "@storybook/angular": "6.4.0-beta.3",
-    "@storybook/html": "6.4.0-beta.3",
-    "@storybook/react": "6.4.0-beta.3",
-    "@storybook/vue": "6.4.0-beta.3",
-    "@storybook/web-components": "6.4.0-beta.3",
+    "@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",
@@ -141,12 +140,12 @@
     "zone.js": "^0.11.3"
   },
   "peerDependencies": {
-    "@storybook/angular": "6.4.0-beta.3",
-    "@storybook/html": "6.4.0-beta.3",
-    "@storybook/react": "6.4.0-beta.3",
-    "@storybook/vue": "6.4.0-beta.3",
-    "@storybook/vue3": "6.4.0-beta.3",
-    "@storybook/web-components": "6.4.0-beta.3",
+    "@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",
@@ -203,7 +202,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0fc9200599c97a5797c5af886792200cd29e2046",
+  "gitHead": "c85171dc319d1d3a31eee1b762f01ba84ae45194",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Docs",