@storybook/components 7.0.0-alpha.7 → 7.0.0-beta.0

package/dist/index.d.ts

@@ -1,122 +1,121 @@
 import * as react from 'react';
-import react__default, { ComponentProps, FunctionComponent, AnchorHTMLAttributes, MouseEvent, ReactNode, ReactElement, Component, RefObject, SyntheticEvent, FC, ElementType } from 'react';
+import react__default, { ComponentProps, FC, AnchorHTMLAttributes, MouseEvent, ReactNode, FunctionComponent, ReactElement, Component, RefObject, SyntheticEvent, DetailedHTMLProps, ButtonHTMLAttributes, ElementType } from 'react';
 import * as _storybook_theming from '@storybook/theming';
-import { Theme } from '@storybook/theming';
+import { Theme, CSSObject } from '@storybook/theming';
 import { BuiltInParserName } from 'prettier';
 import * as react_textarea_autosize from 'react-textarea-autosize';
-import { Conditional, Parameters } from '@storybook/csf';
 
-declare const A: _storybook_theming.StyledComponent<any, {
-    theme: _storybook_theming.Theme;
+declare const A: _storybook_theming.StyledComponent<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children?: react.ReactNode;
 } & {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
-
-declare const Blockquote: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>, {
-    theme: _storybook_theming.Theme;
-} & {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
-
-declare const DefaultCodeBlock: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLElement>, HTMLElement>, {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
+    theme?: _storybook_theming.Theme;
+}, {}, {}>;
+
+declare const Blockquote: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+
+declare const DefaultCodeBlock: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react__default.ElementType<any>;
+}, react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 declare const Code: ({ className, children, ...props }: ComponentProps<typeof DefaultCodeBlock>) => JSX.Element;
 
-declare const Div: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
-
-declare const DL: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
-
-declare const H1: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
-    theme: _storybook_theming.Theme;
-} & {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
-
-declare const H2: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
-    theme: _storybook_theming.Theme;
-} & {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
-
-declare const H3: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
-    theme: _storybook_theming.Theme;
-} & {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
-
-declare const H4: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
-    theme: _storybook_theming.Theme;
-} & {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
-
-declare const H5: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
-    theme: _storybook_theming.Theme;
-} & {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
-
-declare const H6: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
-    theme: _storybook_theming.Theme;
-} & {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
-
-declare const HR: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, Pick<react.ClassAttributes<HTMLHRElement> & react.HTMLAttributes<HTMLHRElement>, keyof react.HTMLAttributes<HTMLHRElement>>, _storybook_theming.Theme>;
-
-declare const Img: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, Pick<react.ClassAttributes<HTMLImageElement> & react.ImgHTMLAttributes<HTMLImageElement>, keyof react.ImgHTMLAttributes<HTMLImageElement>>, _storybook_theming.Theme>;
-
-declare const LI: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
-    theme: _storybook_theming.Theme;
-} & {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
-
-declare const OL: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
-
-declare const P: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
-    theme: _storybook_theming.Theme;
-} & {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
-
-declare const Pre: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLPreElement>, HTMLPreElement>, {
-    theme: _storybook_theming.Theme;
-} & {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
-
-declare const Span: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-    theme: _storybook_theming.Theme;
-} & {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
-
-declare const Table: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {
-    theme: _storybook_theming.Theme;
-} & {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
-
-declare const TT: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>, {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
-
-declare const UL: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
-    theme: _storybook_theming.Theme;
-}, _storybook_theming.Theme>;
+declare const Div: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+declare const DL: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, {}>;
+
+declare const H1: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+
+declare const H2: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+
+declare const H3: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+
+declare const H4: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+
+declare const H5: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+
+declare const H6: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+
+declare const HR: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, {}>;
+
+declare const Img: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+
+declare const LI: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+
+declare const OL: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, {}>;
+
+declare const P: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+
+declare const Pre: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLPreElement>, HTMLPreElement>, {}>;
+
+declare const Span: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+
+declare const Table: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+
+declare const TT: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>, {}>;
+
+declare const UL: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
 
 interface BadgeProps {
     status: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';
 }
-declare const Badge: FunctionComponent<BadgeProps>;
+declare const Badge: FC<BadgeProps>;
 
 interface LinkStylesProps {
     secondary?: boolean;
@@ -129,7 +128,7 @@ interface LinkInnerProps {
     withArrow?: boolean;
     containsIcon?: boolean;
 }
-declare type AProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+type AProps = AnchorHTMLAttributes<HTMLAnchorElement>;
 interface LinkProps extends LinkInnerProps, LinkStylesProps {
     cancel?: boolean;
     className?: string;
@@ -137,15 +136,19 @@ interface LinkProps extends LinkInnerProps, LinkStylesProps {
     onClick?: (e: MouseEvent) => void;
     href?: string;
 }
-declare const Link$1: FunctionComponent<LinkProps & AProps>;
+declare const Link$1: FC<LinkProps & AProps>;
 
-declare const DocumentWrapper: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}, _storybook_theming.Theme>;
+declare const DocumentWrapper: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
 interface SyntaxHighlighterRendererProps {
     rows: any[];
     stylesheet: string;
     useInlineStyles: boolean;
 }
+type SyntaxHighlighterRenderer = (props: SyntaxHighlighterRendererProps) => ReactNode;
 interface SyntaxHighlighterCustomProps {
     language: string;
     copyable?: boolean;
@@ -154,26 +157,29 @@ interface SyntaxHighlighterCustomProps {
     format?: SyntaxHighlighterFormatTypes;
     formatter?: (type: SyntaxHighlighterFormatTypes, source: string) => string;
     className?: string;
-    renderer?: (props: SyntaxHighlighterRendererProps) => ReactNode;
+    renderer?: SyntaxHighlighterRenderer;
 }
-declare type SyntaxHighlighterFormatTypes = boolean | 'dedent' | BuiltInParserName;
-declare type lineTagPropsFunction = (lineNumber: number) => React.HTMLProps<HTMLElement>;
+type SyntaxHighlighterFormatTypes = boolean | 'dedent' | BuiltInParserName;
+type LineTagPropsFunction = (lineNumber: number) => React.HTMLProps<HTMLElement>;
 interface SyntaxHighlighterBaseProps {
-    language?: string;
-    style?: any;
-    customStyle?: any;
-    lineProps?: lineTagPropsFunction | React.HTMLProps<HTMLElement>;
+    children?: React.ReactNode;
     codeTagProps?: React.HTMLProps<HTMLElement>;
-    useInlineStyles?: boolean;
+    customStyle?: any;
+    language?: string;
+    lineNumberStyle?: any;
+    lineProps?: LineTagPropsFunction | React.HTMLProps<HTMLElement>;
     showLineNumbers?: boolean;
     startingLineNumber?: number;
-    lineNumberStyle?: any;
+    style?: any;
+    useInlineStyles?: boolean;
 }
-declare type SyntaxHighlighterProps = SyntaxHighlighterBaseProps & SyntaxHighlighterCustomProps;
+type SyntaxHighlighterProps = SyntaxHighlighterBaseProps & SyntaxHighlighterCustomProps;
 
-declare const LazySyntaxHighlighter: react__default.LazyExoticComponent<react__default.FunctionComponent<SyntaxHighlighterProps>>;
+declare const LazySyntaxHighlighter: react__default.LazyExoticComponent<react__default.FC<SyntaxHighlighterProps>>;
 declare const SyntaxHighlighter: (props: ComponentProps<typeof LazySyntaxHighlighter>) => JSX.Element;
 
+declare function createCopyToClipboardFunction(): (text: string) => any;
+
 interface ActionItem {
     title: string | JSX.Element;
     className?: string;
@@ -183,31 +189,36 @@ interface ActionItem {
 interface ActionBarProps {
     actionItems: ActionItem[];
 }
-declare const ActionBar: FunctionComponent<ActionBarProps>;
+declare const ActionBar: FC<ActionBarProps>;
 
 interface SpacedProps {
+    children?: react__default.ReactNode;
     col?: number;
     row?: number;
     outer?: number | boolean;
 }
-declare const Spaced: FunctionComponent<SpacedProps>;
+declare const Spaced: FC<SpacedProps>;
 
-declare const Placeholder: FunctionComponent;
+interface PlaceholderProps {
+    children?: react__default.ReactNode;
+}
+declare const Placeholder: FunctionComponent<PlaceholderProps>;
 
 interface ScrollAreaProps {
+    children?: react__default.ReactNode;
     horizontal?: boolean;
     vertical?: boolean;
     className?: string;
 }
-declare const ScrollArea: FunctionComponent<ScrollAreaProps>;
+declare const ScrollArea: FC<ScrollAreaProps>;
 
-declare type ZoomProps = {
+type ZoomProps = {
     scale: number;
     children: ReactElement | ReactElement[];
 };
 declare function ZoomElement({ scale, children }: ZoomProps): JSX.Element;
 
-declare type IZoomIFrameProps = {
+type IZoomIFrameProps = {
     scale: number;
     children: ReactElement<HTMLIFrameElement>;
     iFrameRef: RefObject<HTMLIFrameElement>;
@@ -227,7 +238,10 @@ declare const Zoom: {
     IFrame: typeof ZoomIFrame;
 };
 
-declare const ButtonWrapper: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+declare const ButtonWrapper: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react__default.ElementType<any>;
+} & {
     isLink?: boolean;
     primary?: boolean;
     secondary?: boolean;
@@ -240,40 +254,59 @@ declare const ButtonWrapper: _storybook_theming.StyledComponent<react__default.D
     containsIcon?: boolean;
     children?: ReactNode;
     href?: string;
-}, _storybook_theming.Theme>;
-declare const Button: FunctionComponent<ComponentProps<typeof ButtonWrapper>>;
+}, react__default.DetailedHTMLProps<react__default.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+declare const Button: FC<ComponentProps<typeof ButtonWrapper>>;
+
+type Sizes = '100%' | 'flex' | 'auto';
+type Alignments = 'end' | 'center' | 'start';
+type ValidationStates = 'valid' | 'error' | 'warn';
 
 interface FieldProps {
+    children?: ReactNode;
     label?: ReactNode;
 }
 
-declare const Form: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, Pick<react.ClassAttributes<HTMLFormElement> & react.FormHTMLAttributes<HTMLFormElement>, keyof react.FormHTMLAttributes<HTMLFormElement>>, _storybook_theming.Theme> & {
-    Field: react.FunctionComponent<FieldProps>;
-    Input: _storybook_theming.StyledComponent<any, {
-        size?: "flex" | "auto" | "100%";
-        align?: "center" | "end" | "start";
-        valid?: "error" | "valid" | "warn";
+declare const Form: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}> & {
+    Field: react.FC<FieldProps>;
+    Input: _storybook_theming.StyledComponent<Pick<Omit<react.HTMLProps<HTMLInputElement>, "height" | "size" | "valid" | "align"> & {
+        size?: Sizes;
+        align?: Alignments;
+        valid?: ValidationStates;
         height?: number;
-    }, _storybook_theming.Theme> & {
+    }, "download" | "href" | "hrefLang" | "media" | "rel" | "target" | "type" | "form" | "list" | "cite" | "cellPadding" | "cellSpacing" | "summary" | "width" | "alt" | "crossOrigin" | "height" | "sizes" | "src" | "srcSet" | "useMap" | "value" | "reversed" | "start" | "data" | "label" | "slot" | "span" | "style" | "title" | "pattern" | "className" | "color" | "content" | "translate" | "default" | "hidden" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "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" | "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" | "disabled" | "wrap" | "key" | "rows" | "as" | "size" | "open" | "multiple" | "max" | "method" | "min" | "name" | "controls" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "valid" | "align" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "async" | "autoComplete" | "autoPlay" | "capture" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "coords" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "muted" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "required" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "step" | "wmode"> & react.RefAttributes<any> & {
+        theme?: _storybook_theming.Theme;
+    } & {
+        size?: Sizes;
+        align?: Alignments;
+        valid?: ValidationStates;
+        height?: number;
+    }, {}, {}> & {
         displayName: string;
     };
-    Select: _storybook_theming.StyledComponent<any, Omit<react.SelectHTMLAttributes<HTMLSelectElement>, "height" | "size" | "valid" | "align"> & {
-        size?: "flex" | "auto" | "100%";
-        align?: "center" | "end" | "start";
-        valid?: "error" | "valid" | "warn";
+    Select: _storybook_theming.StyledComponent<Omit<react.SelectHTMLAttributes<HTMLSelectElement>, "height" | "size" | "valid" | "align"> & {
+        size?: Sizes;
+        align?: Alignments;
+        valid?: ValidationStates;
         height?: number;
-    }, _storybook_theming.Theme> & {
+    } & react.RefAttributes<any> & {
+        theme?: _storybook_theming.Theme;
+    }, {}, {}> & {
         displayName: string;
     };
-    Textarea: _storybook_theming.StyledComponent<any, Omit<react_textarea_autosize.TextareaAutosizeProps, "height" | "size" | "valid" | "align"> & {
-        size?: "flex" | "auto" | "100%";
-        align?: "center" | "end" | "start";
-        valid?: "error" | "valid" | "warn";
+    Textarea: _storybook_theming.StyledComponent<Omit<react_textarea_autosize.TextareaAutosizeProps, "height" | "size" | "valid" | "align"> & {
+        size?: Sizes;
+        align?: Alignments;
+        valid?: ValidationStates;
         height?: number;
-    }, _storybook_theming.Theme> & {
+    } & react.RefAttributes<any> & {
+        theme?: _storybook_theming.Theme;
+    }, {}, {}> & {
         displayName: string;
     };
-    Button: react.FunctionComponent<any>;
+    Button: react.FC<any>;
 };
 
 declare const top: "top";
@@ -442,11 +475,11 @@ interface WithTooltipPureProps {
     onDoubleClick?: () => void;
 }
 
-declare const LazyWithTooltip: react__default.LazyExoticComponent<react__default.FunctionComponent<WithTooltipPureProps & {
+declare const LazyWithTooltip: react__default.LazyExoticComponent<react__default.FC<WithTooltipPureProps & {
     startOpen?: boolean;
 }>>;
 declare const WithTooltip: (props: ComponentProps<typeof LazyWithTooltip>) => JSX.Element;
-declare const LazyWithTooltipPure: react__default.LazyExoticComponent<react__default.FunctionComponent<WithTooltipPureProps>>;
+declare const LazyWithTooltipPure: react__default.LazyExoticComponent<react__default.FC<WithTooltipPureProps>>;
 declare const WithTooltipPure: (props: ComponentProps<typeof LazyWithTooltipPure>) => JSX.Element;
 
 interface TooltipMessageProps {
@@ -458,18 +491,21 @@ interface TooltipMessageProps {
         onClick?: () => void;
     }[];
 }
-declare const TooltipMessage: FunctionComponent<TooltipMessageProps>;
+declare const TooltipMessage: FC<TooltipMessageProps>;
 
 interface TooltipNoteProps {
     note: string;
 }
-declare const TooltipNote: FunctionComponent<TooltipNoteProps>;
+declare const TooltipNote: FC<TooltipNoteProps>;
 
 interface ItemProps {
     disabled?: boolean;
 }
-declare const Item: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, ItemProps, _storybook_theming.Theme>;
-declare type LinkWrapperType = FunctionComponent<any>;
+declare const Item: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react__default.ElementType<any>;
+} & ItemProps, react__default.DetailedHTMLProps<react__default.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+type LinkWrapperType = FC<any>;
 interface ListItemProps extends Omit<ComponentProps<typeof Item>, 'href' | 'title'> {
     loading?: boolean;
     left?: ReactNode;
@@ -491,16 +527,20 @@ interface TooltipLinkListProps {
     links: Link[];
     LinkWrapper?: LinkWrapperType;
 }
-declare const TooltipLinkList: FunctionComponent<TooltipLinkListProps>;
+declare const TooltipLinkList: FC<TooltipLinkListProps>;
 
-declare const TabBar: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<react__default.ClassAttributes<HTMLDivElement> & react__default.HTMLAttributes<HTMLDivElement>, keyof react__default.HTMLAttributes<HTMLDivElement>>, _storybook_theming.Theme>;
+declare const TabBar: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react__default.ElementType<any>;
+}, react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 interface TabWrapperProps {
     active: boolean;
     render?: () => JSX.Element;
     children?: ReactNode;
 }
-declare const TabWrapper: FunctionComponent<TabWrapperProps>;
+declare const TabWrapper: FC<TabWrapperProps>;
 interface TabsProps {
+    children?: FuncChildren[] | ReactNode;
     id?: string;
     tools?: ReactNode;
     selected?: string;
@@ -511,10 +551,12 @@ interface TabsProps {
     absolute?: boolean;
     bordered?: boolean;
 }
-declare const Tabs: FunctionComponent<TabsProps>;
-declare type FuncChildren = () => void;
+declare const Tabs: FC<TabsProps>;
+type FuncChildren = ({ active }: {
+    active: boolean;
+}) => JSX.Element;
 interface TabsStateProps {
-    children: (ReactNode | FuncChildren)[];
+    children: FuncChildren[] | ReactNode;
     initial: string;
     absolute: boolean;
     bordered: boolean;
@@ -532,30 +574,50 @@ declare class TabsState extends Component<TabsStateProps, TabsStateState> {
     render(): JSX.Element;
 }
 
+interface BarButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    href?: void;
+}
+interface BarLinkProps extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
+    href: string;
+}
 interface TabButtonProps {
     active?: boolean;
     textColor?: string;
 }
-declare const TabButton: _storybook_theming.StyledComponent<any, TabButtonProps, _storybook_theming.Theme>;
+declare const TabButton: _storybook_theming.StyledComponent<((BarButtonProps | BarLinkProps) & {
+    theme?: _storybook_theming.Theme;
+}) & TabButtonProps, {}, {}>;
 interface IconButtonProps {
     active?: boolean;
     disabled?: boolean;
 }
-declare const IconButton: _storybook_theming.StyledComponent<any, IconButtonProps, _storybook_theming.Theme>;
+declare const IconButton: _storybook_theming.StyledComponent<((BarButtonProps | BarLinkProps) & {
+    theme?: _storybook_theming.Theme;
+}) & IconButtonProps, {}, {}>;
+declare const IconButtonSkeleton: () => JSX.Element;
 
-declare const Separator: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, SeparatorProps, _storybook_theming.Theme>;
+declare const Separator: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react__default.ElementType<any>;
+} & SeparatorProps, react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 declare const interleaveSeparators: (list: any[]) => any;
 interface SeparatorProps {
     force?: boolean;
 }
 
-declare const Bar: _storybook_theming.StyledComponent<any, Pick<any, string | number | symbol>, _storybook_theming.Theme>;
+declare const Bar: _storybook_theming.StyledComponent<ScrollAreaProps & {
+    children?: react__default.ReactNode;
+} & {
+    theme?: _storybook_theming.Theme;
+} & {
+    border?: boolean;
+}, {}, {}>;
 interface FlexBarProps {
     border?: boolean;
     children?: any;
     backgroundColor?: string;
 }
-declare const FlexBar: FunctionComponent<FlexBarProps>;
+declare const FlexBar: FC<FlexBarProps>;
 
 interface AddonPanelProps {
     active: boolean;
@@ -564,533 +626,237 @@ interface AddonPanelProps {
 declare const AddonPanel: ({ active, children }: AddonPanelProps) => JSX.Element;
 
 declare const icons: {
-    mobile: string;
-    watch: string;
-    tablet: string;
-    browser: string;
-    sidebar: string;
-    sidebaralt: string;
-    bottombar: string;
-    useralt: string;
-    user: string;
-    useradd: string;
-    users: string;
-    profile: string;
-    bookmark: string;
-    bookmarkhollow: string;
-    book: string;
-    repository: string;
-    star: string;
-    starhollow: string;
-    circle: string;
-    circlehollow: string;
-    heart: string;
-    hearthollow: string;
-    facehappy: string;
-    facesad: string;
-    faceneutral: string;
-    lock: string;
-    unlock: string;
-    key: string;
-    arrowleftalt: string;
-    arrowrightalt: string;
-    sync: string;
-    reply: string;
-    undo: string;
-    transfer: string;
-    redirect: string;
-    expand: string;
-    expandalt: string;
-    collapse: string;
-    grow: string;
-    arrowleft: string;
-    arrowup: string;
-    arrowdown: string;
-    arrowright: string;
-    chevrondown: string;
-    back: string;
-    download: string;
-    upload: string;
-    proceed: string;
-    info: string;
-    question: string;
-    support: string;
-    alert: string;
-    bell: string;
-    rss: string;
-    edit: string;
-    paintbrush: string;
-    close: string;
-    closeAlt: string;
-    trash: string;
-    cross: string;
-    delete: string;
-    add: string;
-    subtract: string;
-    plus: string;
-    document: string;
-    folder: string;
-    component: string;
-    calendar: string;
-    graphline: string;
-    docchart: string;
-    doclist: string;
-    category: string;
-    grid: string;
-    copy: string;
-    certificate: string;
-    print: string;
-    listunordered: string;
-    graphbar: string;
-    menu: string;
-    filter: string;
-    ellipsis: string;
-    cog: string;
-    wrench: string;
-    nut: string;
-    camera: string;
-    eye: string;
-    eyeclose: string;
-    photo: string;
-    video: string;
-    speaker: string;
-    phone: string;
-    flag: string;
-    pin: string;
-    compass: string;
-    globe: string;
-    location: string;
-    search: string;
-    zoom: string;
-    zoomout: string;
-    zoomreset: string;
-    timer: string;
-    time: string;
-    lightning: string;
-    lightningoff: string;
-    dashboard: string;
-    hourglass: string;
-    play: string;
-    playnext: string;
-    playback: string;
-    stop: string;
-    stopalt: string;
-    rewind: string;
-    fastforward: string;
-    email: string;
-    link: string;
-    paperclip: string;
-    box: string;
-    structure: string;
-    cpu: string;
-    memory: string;
-    database: string;
-    power: string;
-    outbox: string;
-    share: string;
-    button: string;
-    form: string;
-    check: string;
-    batchaccept: string;
-    batchdeny: string;
-    home: string;
-    admin: string;
-    paragraph: string;
-    basket: string;
-    credit: string;
-    shield: string;
-    beaker: string;
-    thumbsup: string;
-    mirror: string;
-    switchalt: string;
-    commit: string;
-    branch: string;
-    merge: string;
-    pullrequest: string;
-    chromatic: string;
-    twitter: string;
-    google: string;
-    gdrive: string;
-    youtube: string;
-    facebook: string;
-    medium: string;
-    graphql: string;
-    redux: string;
-    github: string;
-    bitbucket: string;
-    gitlab: string;
-    azuredevops: string;
-    discord: string;
-    contrast: string;
-    unfold: string;
-    sharealt: string;
-    accessibility: string;
-    accessibilityalt: string;
-    markup: string;
-    outline: string;
-    verified: string;
-    comment: string;
-    commentadd: string;
-    requestchange: string;
-    comments: string;
-    ruler: string;
+    readonly user: JSX.Element;
+    readonly useralt: JSX.Element;
+    readonly useradd: JSX.Element;
+    readonly users: JSX.Element;
+    readonly profile: JSX.Element;
+    readonly facehappy: JSX.Element;
+    readonly faceneutral: JSX.Element;
+    readonly facesad: JSX.Element;
+    readonly accessibility: JSX.Element;
+    readonly accessibilityalt: JSX.Element;
+    readonly arrowup: JSX.Element;
+    readonly arrowdown: JSX.Element;
+    readonly arrowleft: JSX.Element;
+    readonly arrowright: JSX.Element;
+    readonly arrowupalt: JSX.Element;
+    readonly arrowdownalt: JSX.Element;
+    readonly arrowleftalt: JSX.Element;
+    readonly arrowrightalt: JSX.Element;
+    readonly expandalt: JSX.Element;
+    readonly collapse: JSX.Element;
+    readonly expand: JSX.Element;
+    readonly unfold: JSX.Element;
+    readonly transfer: JSX.Element;
+    readonly redirect: JSX.Element;
+    readonly undo: JSX.Element;
+    readonly reply: JSX.Element;
+    readonly sync: JSX.Element;
+    readonly upload: JSX.Element;
+    readonly download: JSX.Element;
+    readonly back: JSX.Element;
+    readonly proceed: JSX.Element;
+    readonly refresh: JSX.Element;
+    readonly globe: JSX.Element;
+    readonly compass: JSX.Element;
+    readonly location: JSX.Element;
+    readonly pin: JSX.Element;
+    readonly time: JSX.Element;
+    readonly dashboard: JSX.Element;
+    readonly timer: JSX.Element;
+    readonly home: JSX.Element;
+    readonly admin: JSX.Element;
+    readonly info: JSX.Element;
+    readonly question: JSX.Element;
+    readonly support: JSX.Element;
+    readonly alert: JSX.Element;
+    readonly email: JSX.Element;
+    readonly phone: JSX.Element;
+    readonly link: JSX.Element;
+    readonly unlink: JSX.Element;
+    readonly bell: JSX.Element;
+    readonly rss: JSX.Element;
+    readonly sharealt: JSX.Element;
+    readonly share: JSX.Element;
+    readonly circlehollow: JSX.Element;
+    readonly circle: JSX.Element;
+    readonly bookmarkhollow: JSX.Element;
+    readonly bookmark: JSX.Element;
+    readonly hearthollow: JSX.Element;
+    readonly heart: JSX.Element;
+    readonly starhollow: JSX.Element;
+    readonly star: JSX.Element;
+    readonly certificate: JSX.Element;
+    readonly verified: JSX.Element;
+    readonly thumbsup: JSX.Element;
+    readonly shield: JSX.Element;
+    readonly basket: JSX.Element;
+    readonly beaker: JSX.Element;
+    readonly hourglass: JSX.Element;
+    readonly flag: JSX.Element;
+    readonly cloudhollow: JSX.Element;
+    readonly cloud: JSX.Element;
+    readonly edit: JSX.Element;
+    readonly cog: JSX.Element;
+    readonly nut: JSX.Element;
+    readonly wrench: JSX.Element;
+    readonly ellipsis: JSX.Element;
+    readonly check: JSX.Element;
+    readonly form: JSX.Element;
+    readonly batchdeny: JSX.Element;
+    readonly batchaccept: JSX.Element;
+    readonly controls: JSX.Element;
+    readonly plus: JSX.Element;
+    readonly closeAlt: JSX.Element;
+    readonly cross: JSX.Element;
+    readonly trash: JSX.Element;
+    readonly pinalt: JSX.Element;
+    readonly unpin: JSX.Element;
+    readonly add: JSX.Element;
+    readonly subtract: JSX.Element;
+    readonly close: JSX.Element;
+    readonly delete: JSX.Element;
+    readonly passed: JSX.Element;
+    readonly changed: JSX.Element;
+    readonly failed: JSX.Element;
+    readonly clear: JSX.Element;
+    readonly comment: JSX.Element;
+    readonly commentadd: JSX.Element;
+    readonly requestchange: JSX.Element;
+    readonly comments: JSX.Element;
+    readonly lock: JSX.Element;
+    readonly unlock: JSX.Element;
+    readonly key: JSX.Element;
+    readonly outbox: JSX.Element;
+    readonly credit: JSX.Element;
+    readonly button: JSX.Element;
+    readonly type: JSX.Element;
+    readonly pointerdefault: JSX.Element;
+    readonly pointerhand: JSX.Element;
+    readonly browser: JSX.Element;
+    readonly tablet: JSX.Element;
+    readonly mobile: JSX.Element;
+    readonly watch: JSX.Element;
+    readonly sidebar: JSX.Element;
+    readonly sidebaralt: JSX.Element;
+    readonly sidebaralttoggle: JSX.Element;
+    readonly sidebartoggle: JSX.Element;
+    readonly bottombar: JSX.Element;
+    readonly bottombartoggle: JSX.Element;
+    readonly cpu: JSX.Element;
+    readonly database: JSX.Element;
+    readonly memory: JSX.Element;
+    readonly structure: JSX.Element;
+    readonly box: JSX.Element;
+    readonly power: JSX.Element;
+    readonly photo: JSX.Element;
+    readonly component: JSX.Element;
+    readonly grid: JSX.Element;
+    readonly outline: JSX.Element;
+    readonly photodrag: JSX.Element;
+    readonly search: JSX.Element;
+    readonly zoom: JSX.Element;
+    readonly zoomout: JSX.Element;
+    readonly zoomreset: JSX.Element;
+    readonly eye: JSX.Element;
+    readonly eyeclose: JSX.Element;
+    readonly lightning: JSX.Element;
+    readonly lightningoff: JSX.Element;
+    readonly contrast: JSX.Element;
+    readonly switchalt: JSX.Element;
+    readonly mirror: JSX.Element;
+    readonly grow: JSX.Element;
+    readonly paintbrush: JSX.Element;
+    readonly ruler: JSX.Element;
+    readonly stop: JSX.Element;
+    readonly camera: JSX.Element;
+    readonly video: JSX.Element;
+    readonly speaker: JSX.Element;
+    readonly play: JSX.Element;
+    readonly playback: JSX.Element;
+    readonly playnext: JSX.Element;
+    readonly rewind: JSX.Element;
+    readonly fastforward: JSX.Element;
+    readonly stopalt: JSX.Element;
+    readonly book: JSX.Element;
+    readonly document: JSX.Element;
+    readonly copy: JSX.Element;
+    readonly category: JSX.Element;
+    readonly folder: JSX.Element;
+    readonly print: JSX.Element;
+    readonly graphline: JSX.Element;
+    readonly calendar: JSX.Element;
+    readonly graphbar: JSX.Element;
+    readonly menu: JSX.Element;
+    readonly menualt: JSX.Element;
+    readonly filter: JSX.Element;
+    readonly docchart: JSX.Element;
+    readonly doclist: JSX.Element;
+    readonly markup: JSX.Element;
+    readonly bold: JSX.Element;
+    readonly italic: JSX.Element;
+    readonly paperclip: JSX.Element;
+    readonly listordered: JSX.Element;
+    readonly listunordered: JSX.Element;
+    readonly paragraph: JSX.Element;
+    readonly markdown: JSX.Element;
+    readonly repository: JSX.Element;
+    readonly commit: JSX.Element;
+    readonly branch: JSX.Element;
+    readonly pullrequest: JSX.Element;
+    readonly merge: JSX.Element;
+    readonly apple: JSX.Element;
+    readonly linux: JSX.Element;
+    readonly ubuntu: JSX.Element;
+    readonly windows: JSX.Element;
+    readonly storybook: JSX.Element;
+    readonly azuredevops: JSX.Element;
+    readonly bitbucket: JSX.Element;
+    readonly chrome: JSX.Element;
+    readonly chromatic: JSX.Element;
+    readonly componentdriven: JSX.Element;
+    readonly discord: JSX.Element;
+    readonly facebook: JSX.Element;
+    readonly figma: JSX.Element;
+    readonly gdrive: JSX.Element;
+    readonly github: JSX.Element;
+    readonly gitlab: JSX.Element;
+    readonly google: JSX.Element;
+    readonly graphql: JSX.Element;
+    readonly medium: JSX.Element;
+    readonly redux: JSX.Element;
+    readonly twitter: JSX.Element;
+    readonly youtube: JSX.Element;
+    readonly vscode: JSX.Element;
 };
+type IconKey = keyof typeof icons;
 
-declare type IconKey = keyof typeof icons;
-
-interface SvgProps {
-    inline?: boolean;
-}
-declare const Svg: _storybook_theming.StyledComponent<react.SVGProps<SVGSVGElement>, SvgProps, _storybook_theming.Theme>;
-
+declare const Svg: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react__default.ElementType<any>;
+}, react__default.SVGProps<SVGSVGElement>, {}>;
 interface IconsProps extends ComponentProps<typeof Svg> {
-    icon?: IconKey;
-    symbol?: IconKey;
+    icon: IconType;
+    useSymbol?: boolean;
 }
-declare const Icons: react__default.NamedExoticComponent<IconsProps>;
+declare const Icons: FunctionComponent<IconsProps>;
+type IconType = keyof typeof icons;
 interface SymbolsProps extends ComponentProps<typeof Svg> {
     icons?: IconKey[];
 }
 declare const Symbols: react__default.NamedExoticComponent<SymbolsProps>;
 
-declare const StorybookLogo: FunctionComponent<{
+declare const StorybookLogo: FC<{
     alt: string;
 }>;
 
-declare const StorybookIcon: FunctionComponent<{}>;
-
-interface DescriptionProps {
-    markdown: string;
-}
-/**
- * A markdown description for a component, typically used to show the
- * components docgen docs.
- */
-declare const Description: FunctionComponent<DescriptionProps>;
-
-interface DocsPageProps {
-    title: string;
-    subtitle?: string;
-}
-declare const Title: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}, Theme>;
-declare const Subtitle: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}, Theme>;
-declare const DocsContent: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<react__default.ClassAttributes<HTMLDivElement> & react__default.HTMLAttributes<HTMLDivElement>, keyof react__default.HTMLAttributes<HTMLDivElement>>, Theme>;
-declare const DocsWrapper: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}, Theme>;
-declare const DocsPageWrapper: FC;
-
-declare const StyledSyntaxHighlighter: _storybook_theming.StyledComponent<any, {}, _storybook_theming.Theme>;
-declare enum SourceError {
-    NO_STORY = "There\u2019s no story here.",
-    SOURCE_UNAVAILABLE = "Oh no! The source is not available."
-}
-interface SourceErrorProps {
-    isLoading?: boolean;
-    error?: SourceError;
-}
-interface SourceCodeProps {
-    language?: string;
-    code?: string;
-    format?: ComponentProps<typeof SyntaxHighlighter>['format'];
-    dark?: boolean;
-}
-declare type SourceProps = SourceErrorProps & SourceCodeProps;
-/**
- * Syntax-highlighted source code for a component (or anything!)
- */
-declare const Source: FunctionComponent<SourceProps>;
-
-interface PreviewProps {
-    isLoading?: true;
-    isColumn?: boolean;
-    columns?: number;
-    withSource?: SourceProps;
-    isExpanded?: boolean;
-    withToolbar?: boolean;
-    className?: string;
-    additionalActions?: ActionItem[];
-}
-/**
- * A preview component for showing one or more component `Story`
- * items. The preview also shows the source for the component
- * as a drop-down.
- */
-declare const Preview: FunctionComponent<PreviewProps>;
-declare const PreviewSkeleton: () => JSX.Element;
+declare const StorybookIcon: FC;
 
-interface JsDocParam {
-    name: string;
-    description?: string;
-}
-interface JsDocReturns {
-    description?: string;
-}
-interface JsDocTags {
-    params?: JsDocParam[];
-    returns?: JsDocReturns;
-}
-interface PropSummaryValue {
-    summary: string;
-    detail?: string;
-    required?: boolean;
-}
-declare type PropType = PropSummaryValue;
-declare type PropDefaultValue = PropSummaryValue;
-interface TableAnnotation {
-    type: PropType;
-    jsDocTags?: JsDocTags;
-    defaultValue?: PropDefaultValue;
-    category?: string;
-}
-interface ArgType {
-    name?: string;
-    description?: string;
-    defaultValue?: any;
-    if?: Conditional;
-    [key: string]: any;
-}
-interface ArgTypes {
-    [key: string]: ArgType;
-}
-interface Args {
-    [key: string]: any;
-}
-declare type Globals = {
-    [name: string]: any;
-};
-
-declare const TableWrapper: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {
-    compact?: boolean;
-    inAddonPanel?: boolean;
-    isLoading?: boolean;
-}, _storybook_theming.Theme>;
-declare enum ArgsTableError {
-    NO_COMPONENT = "No component found.",
-    ARGS_UNSUPPORTED = "Args unsupported. See Args documentation for your framework."
-}
-declare type SortType = 'alpha' | 'requiredFirst' | 'none';
-interface ArgsTableOptionProps {
-    updateArgs?: (args: Args) => void;
-    resetArgs?: (argNames?: string[]) => void;
-    compact?: boolean;
-    inAddonPanel?: boolean;
-    initialExpandedArgs?: boolean;
-    isLoading?: boolean;
-    sort?: SortType;
-}
-interface ArgsTableDataProps {
-    rows: ArgTypes;
-    args?: Args;
-    globals?: Globals;
-}
-interface ArgsTableErrorProps {
-    error: ArgsTableError;
-}
-interface ArgsTableLoadingProps {
-    isLoading: true;
-}
-declare const argsTableLoadingData: ArgsTableDataProps;
-declare type ArgsTableProps = ArgsTableOptionProps & (ArgsTableDataProps | ArgsTableErrorProps | ArgsTableLoadingProps);
-/**
- * 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.
- */
-declare const ArgsTable: FC<ArgsTableProps>;
-
-interface TabbedArgsTableProps {
-    tabs: Record<string, ArgsTableProps>;
-    sort?: SortType;
-}
-declare const TabbedArgsTable: FC<TabbedArgsTableProps>;
-
-declare const NoControlsWarning: () => JSX.Element;
-
-declare enum StoryError {
-    NO_STORY = "No component or story to display"
-}
-interface CommonProps {
-    title?: string;
-    height?: string;
-    id: string;
-}
-interface InlineStoryProps extends CommonProps {
-    parameters: Parameters;
-    storyFn: ElementType;
-}
-declare type IFrameStoryProps = CommonProps;
-declare type StoryProps = InlineStoryProps | IFrameStoryProps;
-/**
- * A story element, either rendered inline or in an iframe,
- * with configurable height.
- */
-declare const Story: FunctionComponent<StoryProps & {
-    inline?: boolean;
-    error?: StoryError;
-}>;
-declare const StorySkeleton: () => JSX.Element;
-
-interface IFrameProps {
-    id: string;
-    key?: string;
-    title: string;
-    src: string;
-    allowFullScreen: boolean;
-    scale: number;
-    style?: any;
-}
-interface BodyStyle {
-    width: string;
-    height: string;
-    transform: string;
-    transformOrigin: string;
-}
-declare class IFrame extends Component<IFrameProps> {
-    iframe: any;
-    componentDidMount(): void;
-    shouldComponentUpdate(nextProps: IFrameProps): boolean;
-    setIframeBodyStyle(style: BodyStyle): any;
-    render(): JSX.Element;
-}
-
-interface TypesetProps {
-    fontFamily?: string;
-    fontSizes: string[];
-    fontWeight?: number;
-    sampleText?: string;
-}
-/**
- * Convenient styleguide documentation showing examples of type
- * with different sizes and weights and configurable sample text.
- */
-declare const Typeset: FunctionComponent<TypesetProps>;
-
-declare type Colors = string[] | {
-    [key: string]: string;
-};
-interface ColorItemProps {
-    title: string;
-    subtitle: string;
-    colors: Colors;
-}
-/**
- * A single color row your styleguide showing title, subtitle and one or more colors, used
- * as a child of `ColorPalette`.
- */
-declare const ColorItem: FunctionComponent<ColorItemProps>;
-/**
- * Styleguide documentation for colors, including names, captions, and color swatches,
- * all specified as `ColorItem` children of this wrapper component.
- */
-declare const ColorPalette: FunctionComponent;
-
-interface IconItemProps {
-    name: string;
-}
-/**
- * An individual icon with a caption and an example (passed as `children`).
- */
-declare const IconItem: FunctionComponent<IconItemProps>;
-/**
- * Show a grid of icons, as specified by `IconItem`.
- */
-declare const IconGallery: FunctionComponent;
-
-interface ControlProps<T> {
-    name: string;
-    value?: T;
-    defaultValue?: T;
-    argType?: ArgType;
-    onChange: (value: T) => T | void;
-    onFocus?: (evt: any) => void;
-    onBlur?: (evt: any) => void;
-}
-declare type BooleanValue = boolean;
-interface BooleanConfig {
-}
-declare type ColorValue = string;
-declare type PresetColor = ColorValue | {
-    color: ColorValue;
-    title?: string;
-};
-interface ColorConfig {
-    presetColors?: PresetColor[];
-    startOpen?: boolean;
-}
-declare type DateValue = Date | number;
-interface DateConfig {
-}
-declare type NumberValue = number;
-interface NumberConfig {
-    min?: number;
-    max?: number;
-    step?: number;
-}
-declare type RangeConfig = NumberConfig;
-declare type ObjectValue = any;
-interface ObjectConfig {
-}
-declare type OptionsSingleSelection = any;
-declare type OptionsMultiSelection = any[];
-declare type OptionsSelection = OptionsSingleSelection | OptionsMultiSelection;
-declare type OptionsArray = any[];
-declare type OptionsObject = Record<string, any>;
-declare type Options = OptionsArray | OptionsObject;
-declare type OptionsControlType = 'radio' | 'inline-radio' | 'check' | 'inline-check' | 'select' | 'multi-select';
-interface OptionsConfig {
-    labels: Record<any, string>;
-    options: Options;
-    type: OptionsControlType;
-}
-interface NormalizedOptionsConfig {
-    options: OptionsObject;
-}
-declare type TextValue = string;
-interface TextConfig {
-}
-declare type ControlType = 'array' | 'boolean' | 'color' | 'date' | 'number' | 'range' | 'object' | OptionsControlType | 'text';
-declare type Control = BooleanConfig | ColorConfig | DateConfig | NumberConfig | ObjectConfig | OptionsConfig | RangeConfig | TextConfig;
-declare type Controls = Record<string, Control>;
-
-declare type ColorControlProps = ControlProps<ColorValue> & ColorConfig;
-
-declare type BooleanProps = ControlProps<BooleanValue> & BooleanConfig;
-declare const BooleanControl: FC<BooleanProps>;
-
-declare const parseDate: (value: string) => Date;
-declare const parseTime: (value: string) => Date;
-declare const formatDate: (value: Date | number) => string;
-declare const formatTime: (value: Date | number) => string;
-declare type DateProps = ControlProps<DateValue> & DateConfig;
-declare const DateControl: FC<DateProps>;
-
-declare type NumberProps = ControlProps<NumberValue | null> & NumberConfig;
-declare const parse: (value: string) => number;
-declare const format: (value: NumberValue) => string;
-declare const NumberControl: FC<NumberProps>;
-
-declare type OptionsProps = ControlProps<OptionsSelection> & OptionsConfig;
-declare const OptionsControl: FC<OptionsProps>;
-
-declare type ObjectProps = ControlProps<ObjectValue> & ObjectConfig & {
-    theme: any;
-};
-declare const ObjectControl: FC<ObjectProps>;
-
-declare type RangeProps = ControlProps<NumberValue | null> & RangeConfig;
-declare const RangeControl: FC<RangeProps>;
-
-declare type TextProps = ControlProps<TextValue | undefined> & TextConfig;
-declare const TextControl: FC<TextProps>;
-
-interface FilesControlProps extends ControlProps<string[]> {
-    accept?: string;
-}
-declare const FilesControl: FunctionComponent<FilesControlProps>;
-
-declare type ColorProps = ColorControlProps;
-declare const LazyColorControl: react__default.LazyExoticComponent<react__default.FC<ColorControlProps>>;
-declare const ColorControl: (props: ComponentProps<typeof LazyColorControl>) => JSX.Element;
-
-declare const ProgressWrapper: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<react__default.ClassAttributes<HTMLDivElement> & react__default.HTMLAttributes<HTMLDivElement>, keyof react__default.HTMLAttributes<HTMLDivElement>>, _storybook_theming.Theme>;
+declare const ProgressWrapper: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react__default.ElementType<any>;
+}, react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 interface Progress {
     value: number;
     message: string;
@@ -1104,8 +870,7 @@ interface LoaderProps {
     error?: Error;
     size?: number;
 }
-declare const PureLoader: FunctionComponent<LoaderProps & ComponentProps<typeof ProgressWrapper>>;
-declare const Loader: FunctionComponent<ComponentProps<typeof PureLoader>>;
+declare const Loader: FC<LoaderProps & ComponentProps<typeof ProgressWrapper>>;
 
 declare const getStoryHref: (baseUrl: string, storyId: string, additionalParams?: Record<string, string>) => string;
 
@@ -1115,6 +880,25 @@ declare const nameSpaceClassNames: ({ ...props }: {
     [x: string]: any;
 };
 
+/**
+ * This is a "local" reset to style subtrees with Storybook styles
+ *
+ * We can't style individual elements (e.g. h1, h2, etc.) in here
+ * because the CSS specificity is too high, so those styles can too
+ * easily override child elements that are not expecting it.
+ */
+declare const ResetWrapper: _storybook_theming.StyledComponent<{
+    theme?: _storybook_theming.Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+declare const codeCommon: ({ theme }: {
+    theme: Theme;
+}) => CSSObject;
+declare const withReset: ({ theme }: {
+    theme: Theme;
+}) => CSSObject;
+
 declare const components: {
     h1: (props: react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) => JSX.Element;
     h2: (props: react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) => JSX.Element;
@@ -1141,4 +925,4 @@ declare const components: {
 };
 declare const resetComponents: Record<string, ElementType>;
 
-export { A, ActionBar, AddonPanel, ArgType, ArgTypes, Args, ArgsTable, ArgsTableDataProps, ArgsTableError, ArgsTableErrorProps, ArgsTableLoadingProps, ArgsTableOptionProps, ArgsTableProps, Badge, Bar, Blockquote, BooleanConfig, BooleanControl, BooleanProps, BooleanValue, Button, Code, ColorConfig, ColorControl, ColorItem, ColorPalette, ColorProps, ColorValue, Control, ControlProps, ControlType, Controls, DL, DateConfig, DateControl, DateProps, DateValue, Description, DescriptionProps, Div, DocsContent, DocsPageProps, DocsPageWrapper, DocsWrapper, DocumentWrapper, FilesControl, FilesControlProps, FlexBar, Form, Globals, H1, H2, H3, H4, H5, H6, HR, IFrame, IconButton, IconGallery, IconItem, Icons, IconsProps, Img, JsDocParam, JsDocReturns, JsDocTags, LI, Link$1 as Link, Loader, NoControlsWarning, NormalizedOptionsConfig, NumberConfig, NumberControl, NumberValue, OL, ObjectConfig, ObjectControl, ObjectProps, ObjectValue, Options, OptionsArray, OptionsConfig, OptionsControl, OptionsControlType, OptionsMultiSelection, OptionsObject, OptionsProps, OptionsSelection, OptionsSingleSelection, P, Placeholder, Pre, PresetColor, Preview, PreviewProps, PreviewSkeleton, PropDefaultValue, PropSummaryValue, PropType, RangeConfig, RangeControl, ScrollArea, Separator, SortType, Source, SourceError, SourceProps, Spaced, Span, Story, StoryError, StorySkeleton, StorybookIcon, StorybookLogo, StyledSyntaxHighlighter, Subtitle, Symbols, SyntaxHighlighter, SyntaxHighlighterFormatTypes, SyntaxHighlighterProps, SyntaxHighlighterRendererProps, TT, TabBar, TabButton, TabWrapper, TabbedArgsTable, TabbedArgsTableProps, Table, TableAnnotation, TableWrapper, Tabs, TabsState, TextConfig, TextControl, TextProps, TextValue, Title, TooltipLinkList, TooltipMessage, TooltipNote, Typeset, TypesetProps, UL, WithTooltip, WithTooltipPure, Zoom, argsTableLoadingData, components, format, formatDate, formatTime, getStoryHref, interleaveSeparators, nameSpaceClassNames, parse, parseDate, parseTime, resetComponents };
+export { A, ActionBar, ActionItem, AddonPanel, Badge, Bar, Blockquote, Button, Code, DL, Div, DocumentWrapper, FlexBar, Form, H1, H2, H3, H4, H5, H6, HR, IconButton, IconButtonSkeleton, Icons, IconsProps, Img, LI, Link$1 as Link, Loader, OL, P, Placeholder, Pre, ResetWrapper, ScrollArea, Separator, Spaced, Span, StorybookIcon, StorybookLogo, Symbols, SyntaxHighlighter, SyntaxHighlighterFormatTypes, SyntaxHighlighterProps, SyntaxHighlighterRendererProps, TT, TabBar, TabButton, TabWrapper, Table, Tabs, TabsState, TooltipLinkList, TooltipMessage, TooltipNote, UL, WithTooltip, WithTooltipPure, Zoom, codeCommon, components, createCopyToClipboardFunction, getStoryHref, interleaveSeparators, nameSpaceClassNames, resetComponents, withReset };