@storybook/components 6.4.0-beta.3 → 6.4.0-beta.33

package/dist/modern/typography/typography.stories.mdx

@@ -0,0 +1,75 @@
+import { typography } from '@storybook/theming';
+import { Meta, Typeset } from '@storybook/addon-docs';
+
+export const fontSizes = ['l3', 'l2', 'l1', 'm3', 'm2', 'm1', 's3', 's2', 's1'].map(
+  (size) => `${typography.size[size]}px`
+);
+
+export const sampleText =
+  'Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.';
+
+<Meta title="Basics/Typography" />
+
+## Sans-serif
+
+```
+font-family:
+  "Nunito Sans",
+  -apple-system,
+  ".SFNSText-Regular",
+  "San Francisco",
+  BlinkMacSystemFont,
+  "Segoe UI",
+  "Helvetica Neue",
+  Helvetica,
+  Arial,
+  sans-serif;
+```
+
+<Typeset
+  fontFamily={typography.fonts.base}
+  fontSizes={fontSizes}
+  fontWeight={typography.weight.regular}
+  sampleText={sampleText}
+/>
+<Typeset
+  fontFamily={typography.fonts.base}
+  fontSizes={fontSizes}
+  fontWeight={typography.weight.bold}
+  sampleText={sampleText}
+/>
+<Typeset
+  fontFamily={typography.fonts.base}
+  fontSizes={fontSizes}
+  fontWeight={typography.weight.black}
+  sampleText={sampleText}
+/>
+
+## Monospace
+
+```
+font-family:
+  ui-monospace,
+  Menlo,
+  Monaco,
+  "Roboto Mono",
+  "Oxygen Mono",
+  "Ubuntu Monospace",
+  "Source Code Pro",
+  "Droid Sans Mono",
+  "Courier New",
+  monospace;
+```
+
+<Typeset
+  fontFamily={typography.fonts.mono}
+  fontSizes={fontSizes}
+  fontWeight={typography.weight.regular}
+  sampleText={sampleText}
+/>
+<Typeset
+  fontFamily={typography.fonts.mono}
+  fontSizes={fontSizes}
+  fontWeight={typography.weight.bold}
+  sampleText={sampleText}
+/>

package/dist/ts3.4/ScrollArea/GlobalScrollAreaStyles.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Theme, CSSObject } from '@storybook/theming';
 export declare const getScrollAreaStyles: (theme: Theme) => CSSObject;
 declare const GlobalScrollAreaStyles: () => JSX.Element;

package/dist/ts3.4/bar/button.d.ts

@@ -16,10 +16,12 @@ export declare const TabButton: import("@emotion/styled-base").StyledComponent<(
 }), TabButtonProps, import("@storybook/theming").Theme>;
 export interface IconButtonProps {
     active?: boolean;
+    disabled?: boolean;
 }
 export declare const IconButton: import("@emotion/styled-base").StyledComponent<(Pick<ButtonProps, "color" | "translate" | "hidden" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "form" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "href"> & {
     ref?: ((instance: HTMLButtonElement) => void) | React.RefObject<HTMLButtonElement>;
 }) | (Pick<LinkProps, "color" | "translate" | "hidden" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "type" | "href" | "referrerPolicy" | "media" | "target" | "download" | "hrefLang" | "ping" | "rel"> & {
     ref?: ((instance: HTMLAnchorElement) => void) | React.RefObject<HTMLAnchorElement>;
 }), IconButtonProps, import("@storybook/theming").Theme>;
+export declare const IconButtonSkeleton: () => JSX.Element;
 export {};

package/dist/ts3.4/blocks/ArgsTable/ArgRow.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { ArgType, Args } from './types';
-export interface ArgRowProps {
+interface ArgRowData {
     row: ArgType;
     arg: any;
     updateArgs?: (args: Args) => void;
@@ -8,4 +8,10 @@ export interface ArgRowProps {
     expandable?: boolean;
     initialExpandedArgs?: boolean;
 }
+interface ArgRowLoading {
+    isLoading: true;
+}
+export declare const argRowLoadingData: ArgRowData;
+export declare type ArgRowProps = ArgRowData | ArgRowLoading;
 export declare const ArgRow: FC<ArgRowProps>;
+export {};

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

@@ -9,7 +9,7 @@ export declare enum ArgsTableError {
     ARGS_UNSUPPORTED = "Args unsupported. See Args documentation for your framework."
 }
 export declare type SortType = 'alpha' | 'requiredFirst' | 'none';
-export interface ArgsTableRowProps {
+export interface ArgsTableData {
     rows: ArgTypes;
     args?: Args;
     updateArgs?: (args: Args) => void;
@@ -17,14 +17,20 @@ export interface ArgsTableRowProps {
     compact?: boolean;
     inAddonPanel?: boolean;
     initialExpandedArgs?: boolean;
+    isLoading?: boolean;
     sort?: SortType;
 }
 export interface ArgsTableErrorProps {
     error: ArgsTableError;
 }
-export declare type ArgsTableProps = ArgsTableRowProps | ArgsTableErrorProps;
+interface ArgTableLoading {
+    isLoading: true;
+}
+export declare const argTableLoadingData: ArgsTableData;
+export declare type ArgsTableProps = ArgsTableData | ArgsTableErrorProps | ArgTableLoading;
 /**
  * Display the props for a component as a props table. Each row is a collection of
  * ArgDefs, usually derived from docgen info for the component.
  */
 export declare const ArgsTable: FC<ArgsTableProps>;
+export {};

package/dist/ts3.4/blocks/ArgsTable/NoControlsWarning.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const NoControlsWarning: () => JSX.Element;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const EmptyBlock: (props: any) => JSX.Element;

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

@@ -15,5 +15,5 @@ export interface PreviewProps {
  * items. The preview also shows the source for the component
  * as a drop-down.
  */
-declare const Preview: FunctionComponent<PreviewProps>;
-export { Preview };
+export declare const Preview: FunctionComponent<PreviewProps>;
+export declare const PreviewSkeleton: () => JSX.Element;

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

@@ -5,6 +5,7 @@ export declare enum SourceError {
     SOURCE_UNAVAILABLE = "Oh no! The source is not available."
 }
 interface SourceErrorProps {
+    isLoading?: boolean;
     error?: SourceError;
 }
 interface SourceCodeProps {

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

@@ -4,7 +4,7 @@ export declare enum StoryError {
     NO_STORY = "No component or story to display"
 }
 interface CommonProps {
-    title: string;
+    title?: string;
     height?: string;
     id: string;
 }
@@ -19,7 +19,8 @@ declare type StoryProps = InlineStoryProps | IFrameStoryProps;
  * with configurable height.
  */
 declare const Story: FunctionComponent<StoryProps & {
-    inline: boolean;
+    inline?: boolean;
     error?: StoryError;
 }>;
-export { Story };
+declare const StorySkeleton: () => JSX.Element;
+export { Story, StorySkeleton };

package/dist/ts3.4/icon/icons.d.ts

@@ -110,6 +110,8 @@ export declare const icons: {
     playback: string;
     stop: string;
     stopalt: string;
+    rewind: string;
+    fastforward: string;
     email: string;
     link: string;
     paperclip: string;

package/dist/ts3.9/ScrollArea/GlobalScrollAreaStyles.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Theme, CSSObject } from '@storybook/theming';
 export declare const getScrollAreaStyles: (theme: Theme) => CSSObject;
 declare const GlobalScrollAreaStyles: () => JSX.Element;

package/dist/ts3.9/bar/button.d.ts

@@ -16,10 +16,12 @@ export declare const TabButton: import("@emotion/styled-base").StyledComponent<(
 }), TabButtonProps, import("@storybook/theming").Theme>;
 export interface IconButtonProps {
     active?: boolean;
+    disabled?: boolean;
 }
 export declare const IconButton: import("@emotion/styled-base").StyledComponent<(Pick<ButtonProps, "color" | "translate" | "hidden" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "form" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "href"> & {
     ref?: ((instance: HTMLButtonElement) => void) | React.RefObject<HTMLButtonElement>;
 }) | (Pick<LinkProps, "color" | "translate" | "hidden" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "type" | "href" | "referrerPolicy" | "media" | "target" | "download" | "hrefLang" | "ping" | "rel"> & {
     ref?: ((instance: HTMLAnchorElement) => void) | React.RefObject<HTMLAnchorElement>;
 }), IconButtonProps, import("@storybook/theming").Theme>;
+export declare const IconButtonSkeleton: () => JSX.Element;
 export {};

package/dist/ts3.9/blocks/ArgsTable/ArgRow.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { ArgType, Args } from './types';
-export interface ArgRowProps {
+interface ArgRowData {
     row: ArgType;
     arg: any;
     updateArgs?: (args: Args) => void;
@@ -8,4 +8,10 @@ export interface ArgRowProps {
     expandable?: boolean;
     initialExpandedArgs?: boolean;
 }
+interface ArgRowLoading {
+    isLoading: true;
+}
+export declare const argRowLoadingData: ArgRowData;
+export declare type ArgRowProps = ArgRowData | ArgRowLoading;
 export declare const ArgRow: FC<ArgRowProps>;
+export {};

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

@@ -9,7 +9,7 @@ export declare enum ArgsTableError {
     ARGS_UNSUPPORTED = "Args unsupported. See Args documentation for your framework."
 }
 export declare type SortType = 'alpha' | 'requiredFirst' | 'none';
-export interface ArgsTableRowProps {
+export interface ArgsTableData {
     rows: ArgTypes;
     args?: Args;
     updateArgs?: (args: Args) => void;
@@ -17,14 +17,20 @@ export interface ArgsTableRowProps {
     compact?: boolean;
     inAddonPanel?: boolean;
     initialExpandedArgs?: boolean;
+    isLoading?: boolean;
     sort?: SortType;
 }
 export interface ArgsTableErrorProps {
     error: ArgsTableError;
 }
-export declare type ArgsTableProps = ArgsTableRowProps | ArgsTableErrorProps;
+interface ArgTableLoading {
+    isLoading: true;
+}
+export declare const argTableLoadingData: ArgsTableData;
+export declare type ArgsTableProps = ArgsTableData | ArgsTableErrorProps | ArgTableLoading;
 /**
  * Display the props for a component as a props table. Each row is a collection of
  * ArgDefs, usually derived from docgen info for the component.
  */
 export declare const ArgsTable: FC<ArgsTableProps>;
+export {};

package/dist/ts3.9/blocks/ArgsTable/NoControlsWarning.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const NoControlsWarning: () => JSX.Element;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const EmptyBlock: (props: any) => JSX.Element;

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

@@ -15,5 +15,5 @@ export interface PreviewProps {
  * items. The preview also shows the source for the component
  * as a drop-down.
  */
-declare const Preview: FunctionComponent<PreviewProps>;
-export { Preview };
+export declare const Preview: FunctionComponent<PreviewProps>;
+export declare const PreviewSkeleton: () => JSX.Element;

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

@@ -5,6 +5,7 @@ export declare enum SourceError {
     SOURCE_UNAVAILABLE = "Oh no! The source is not available."
 }
 interface SourceErrorProps {
+    isLoading?: boolean;
     error?: SourceError;
 }
 interface SourceCodeProps {

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

@@ -4,7 +4,7 @@ export declare enum StoryError {
     NO_STORY = "No component or story to display"
 }
 interface CommonProps {
-    title: string;
+    title?: string;
     height?: string;
     id: string;
 }
@@ -19,7 +19,8 @@ declare type StoryProps = InlineStoryProps | IFrameStoryProps;
  * with configurable height.
  */
 declare const Story: FunctionComponent<StoryProps & {
-    inline: boolean;
+    inline?: boolean;
     error?: StoryError;
 }>;
-export { Story };
+declare const StorySkeleton: () => JSX.Element;
+export { Story, StorySkeleton };

package/dist/ts3.9/icon/icons.d.ts

@@ -110,6 +110,8 @@ export declare const icons: {
     playback: string;
     stop: string;
     stopalt: string;
+    rewind: string;
+    fastforward: string;
     email: string;
     link: string;
     paperclip: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "6.4.0-beta.3",
+  "version": "6.4.0-beta.33",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -41,9 +41,9 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.6.0",
-    "@storybook/client-logger": "6.4.0-beta.3",
-    "@storybook/csf": "0.0.2--canary.6aca495.0",
-    "@storybook/theming": "6.4.0-beta.3",
+    "@storybook/client-logger": "6.4.0-beta.33",
+    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/theming": "6.4.0-beta.33",
     "@types/color-convert": "^2.0.0",
     "@types/overlayscrollbars": "^1.12.0",
     "@types/react-syntax-highlighter": "11.0.5",
@@ -76,6 +76,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0fc9200599c97a5797c5af886792200cd29e2046",
+  "gitHead": "c85171dc319d1d3a31eee1b762f01ba84ae45194",
   "sbmodern": "dist/modern/index.js"
 }

package/dist/cjs/typography/typography.stories.js

@@ -1,130 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _theming = require("@storybook/theming");
-
-var _react2 = require("@storybook/react");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Info = _theming.styled.div({
-  marginBottom: '3rem'
-});
-
-var Heading1 = _theming.styled.div(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    fontSize: theme.typography.size.l3
-  };
-});
-
-var Heading2 = _theming.styled.div(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    fontSize: theme.typography.size.l2
-  };
-});
-
-var Heading3 = _theming.styled.div(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    fontSize: theme.typography.size.l1
-  };
-});
-
-var Heading4 = _theming.styled.div(function (_ref4) {
-  var theme = _ref4.theme;
-  return {
-    fontSize: theme.typography.size.m3
-  };
-});
-
-var Heading5 = _theming.styled.div(function (_ref5) {
-  var theme = _ref5.theme;
-  return {
-    fontSize: theme.typography.size.m3
-  };
-});
-
-var Heading6 = _theming.styled.div(function (_ref6) {
-  var theme = _ref6.theme;
-  return {
-    fontSize: theme.typography.size.m1
-  };
-});
-
-var Heading7 = _theming.styled.div(function (_ref7) {
-  var theme = _ref7.theme;
-  return {
-    fontSize: theme.typography.size.s3
-  };
-});
-
-var Heading8 = _theming.styled.div(function (_ref8) {
-  var theme = _ref8.theme;
-  return {
-    fontSize: theme.typography.size.s2
-  };
-});
-
-var Heading9 = _theming.styled.div(function (_ref9) {
-  var theme = _ref9.theme;
-  return {
-    fontSize: theme.typography.size.s1
-  };
-});
-
-var HeadingWrapper = _theming.styled.div(function (_ref10) {
-  var theme = _ref10.theme;
-  return {
-    fontWeight: theme.typography.weight.black,
-    '> *': {
-      marginBottom: '1rem'
-    }
-  };
-});
-
-var Type1 = _theming.styled.div(function (_ref11) {
-  var theme = _ref11.theme;
-  return {
-    fontSize: theme.typography.size.s3
-  };
-});
-
-var Type2 = _theming.styled.div(function (_ref12) {
-  var theme = _ref12.theme;
-  return {
-    fontSize: theme.typography.size.s2
-  };
-});
-
-var Type3 = _theming.styled.div(function (_ref13) {
-  var theme = _ref13.theme;
-  return {
-    fontSize: theme.typography.size.s1
-  };
-});
-
-var TypeWrapper = _theming.styled.div({
-  '> *': {
-    marginBottom: '1rem'
-  }
-});
-
-var Wrapper = _theming.styled.div({
-  display: 'flex',
-  flexDirection: 'row',
-  '> *': {
-    flex: 1,
-    paddingRight: 40
-  }
-});
-
-var Page = _theming.styled.div({
-  padding: '3rem'
-});
-
-(0, _react2.storiesOf)('Basics/typography', module).add('all', function () {
-  return /*#__PURE__*/_react.default.createElement(Page, null, /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, "Font-family:"), " \"Nunito sans\", Apple system font ... sans-serif"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, "UI text size:"), " 13px"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, "Document/Markdown text size:"), " 14px"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, "Code font:"), " ", /*#__PURE__*/_react.default.createElement("code", null, "Operator Mono, Fira Code, Consolas ... monospace")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, "Weights:"), " 400(normal), 600(bold), 900(black)")), /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(HeadingWrapper, null, /*#__PURE__*/_react.default.createElement(Heading1, null, "48 heading"), /*#__PURE__*/_react.default.createElement(Heading2, null, "40 heading"), /*#__PURE__*/_react.default.createElement(Heading3, null, "32 heading"), /*#__PURE__*/_react.default.createElement(Heading4, null, "28 heading"), /*#__PURE__*/_react.default.createElement(Heading5, null, "24 heading"), /*#__PURE__*/_react.default.createElement(Heading6, null, "20 heading"), /*#__PURE__*/_react.default.createElement(Heading7, null, "16 heading"), /*#__PURE__*/_react.default.createElement(Heading8, null, "14 heading"), /*#__PURE__*/_react.default.createElement(Heading9, null, "12 heading")), /*#__PURE__*/_react.default.createElement(TypeWrapper, null, /*#__PURE__*/_react.default.createElement(Type1, null, "16 The quick brown fox jumps over the lazy dog"), /*#__PURE__*/_react.default.createElement(Type2, null, "14 The quick brown fox jumps over the lazy dog"), /*#__PURE__*/_react.default.createElement(Type3, null, "12 The quick brown fox jumps over the lazy dog"))));
-});