@storybook/components 7.0.0-beta.5 → 7.0.0-beta.50

package/dist/index.d.ts

@@ -178,7 +178,7 @@ type SyntaxHighlighterProps = SyntaxHighlighterBaseProps & SyntaxHighlighterCust
 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;
+declare function createCopyToClipboardFunction(): (text: string) => Promise<void>;
 
 interface ActionItem {
     title: string | JSX.Element;
@@ -271,12 +271,12 @@ declare const Form: _storybook_theming.StyledComponent<{
     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"> & {
+    Input: _storybook_theming.StyledComponent<Pick<Omit<react.HTMLProps<HTMLInputElement>, "height" | "align" | "size" | "valid"> & {
         size?: Sizes;
         align?: Alignments;
         valid?: ValidationStates;
         height?: number;
-    }, "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> & {
+    }, "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" | "align" | "as" | "size" | "open" | "multiple" | "max" | "method" | "min" | "name" | "controls" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "valid" | "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;
@@ -286,7 +286,7 @@ declare const Form: _storybook_theming.StyledComponent<{
     }, {}, {}> & {
         displayName: string;
     };
-    Select: _storybook_theming.StyledComponent<Omit<react.SelectHTMLAttributes<HTMLSelectElement>, "height" | "size" | "valid" | "align"> & {
+    Select: _storybook_theming.StyledComponent<Omit<react.SelectHTMLAttributes<HTMLSelectElement>, "height" | "align" | "size" | "valid"> & {
         size?: Sizes;
         align?: Alignments;
         valid?: ValidationStates;
@@ -296,7 +296,7 @@ declare const Form: _storybook_theming.StyledComponent<{
     }, {}, {}> & {
         displayName: string;
     };
-    Textarea: _storybook_theming.StyledComponent<Omit<react_textarea_autosize.TextareaAutosizeProps, "height" | "size" | "valid" | "align"> & {
+    Textarea: _storybook_theming.StyledComponent<Omit<react_textarea_autosize.TextareaAutosizeProps, "height" | "align" | "size" | "valid"> & {
         size?: Sizes;
         align?: Alignments;
         valid?: ValidationStates;
@@ -441,6 +441,12 @@ declare type Modifier<Name, Options extends Obj> = {
     options?: Partial<Options>;
     data?: Obj;
 };
+declare type Options = {
+    placement: Placement;
+    modifiers: Array<Partial<Modifier<any, any>>>;
+    strategy: PositioningStrategy;
+    onFirstUpdate?: (arg0: Partial<State>) => void;
+};
 declare type OptionsGeneric<TModifier> = {
     placement: Placement;
     modifiers: Array<TModifier>;
@@ -458,25 +464,111 @@ declare type VirtualElement = {
     contextElement?: Element;
 };
 
+declare const createPopper: <TModifier extends Partial<Modifier<any, any>>>(reference: Element | VirtualElement, popper: HTMLElement, options?: Partial<OptionsGeneric<TModifier>>) => Instance;
+
+declare type TriggerType = 'click' | 'double-click' | 'right-click' | 'hover' | 'focus';
+declare type Config = {
+    /**
+     * Whether to close the tooltip when its trigger is out of boundary
+     * @default false
+     */
+    closeOnTriggerHidden?: boolean;
+    /**
+     * Event or events that trigger the tooltip
+     * @default hover
+     */
+    trigger?: TriggerType | TriggerType[] | null;
+    /**
+     * Delay in hiding the tooltip (ms)
+     * @default 0
+     */
+    delayHide?: number;
+    /**
+     * Delay in showing the tooltip (ms)
+     * @default 0
+     */
+    delayShow?: number;
+    /**
+     * Whether to make the tooltip spawn at cursor position
+     * @default false
+     */
+    followCursor?: boolean;
+    /**
+     * Options to MutationObserver, used internally for updating
+     * tooltip position based on its DOM changes
+     * @default  { attributes: true, childList: true, subtree: true }
+     */
+    mutationObserverOptions?: MutationObserverInit | null;
+    /**
+     * Whether tooltip is shown by default
+     * @default false
+     */
+    defaultVisible?: boolean;
+    /**
+     * Used to create controlled tooltip
+     */
+    visible?: boolean;
+    /**
+     * Called when the visibility of the tooltip changes
+     */
+    onVisibleChange?: (state: boolean) => void;
+    /**
+     * If `true`, a click outside the trigger element closes the tooltip
+     * @default true
+     */
+    closeOnOutsideClick?: boolean;
+    /**
+     * If `true`, hovering the tooltip will keep it open. Normally tooltip closes when the mouse cursor moves out of
+     * the trigger element. If it moves to the tooltip element, the tooltip stays open.
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Alias for popper.js placement, see https://popper.js.org/docs/v2/constructors/#placement
+     */
+    placement?: Placement;
+    /**
+     * Shorthand for popper.js offset modifier, see https://popper.js.org/docs/v2/modifiers/offset/
+     * @default [0, 6]
+     */
+    offset?: [number, number];
+};
+declare type PopperOptions = Partial<Options> & {
+    createPopper?: typeof createPopper;
+};
+
 interface WithHideFn {
     onHide: () => void;
 }
-interface WithTooltipPureProps {
+interface WithTooltipPureProps extends Omit<Config, 'closeOnOutsideClick'>, PopperOptions {
     svg?: boolean;
-    trigger?: 'none' | 'hover' | 'click' | 'right-click';
-    closeOnClick?: boolean;
-    placement?: Placement;
-    modifiers?: Array<Partial<Modifier<string, {}>>>;
+    withArrows?: boolean;
     hasChrome?: boolean;
     tooltip: ReactNode | ((p: WithHideFn) => ReactNode);
     children: ReactNode;
+    onDoubleClick?: () => void;
+    /**
+     * @deprecated use `defaultVisible` property instead. This property will be removed in SB 8.0
+     */
     tooltipShown?: boolean;
+    /**
+     * @deprecated use `closeOnOutsideClick` property instead. This property will be removed in SB 8.0
+     */
+    closeOnClick?: boolean;
+    /**
+     * @deprecated use `onVisibleChange` property instead. This property will be removed in SB 8.0
+     */
     onVisibilityChange?: (visibility: boolean) => void | boolean;
-    onDoubleClick?: () => void;
+    /**
+     * If `true`, a click outside the trigger element closes the tooltip
+     * @default false
+     */
+    closeOnOutsideClick?: boolean;
 }
 
-declare const LazyWithTooltip: react__default.LazyExoticComponent<react__default.FC<WithTooltipPureProps & {
+declare const LazyWithTooltip: react__default.LazyExoticComponent<react__default.FC<Omit<WithTooltipPureProps, "onVisibleChange"> & {
     startOpen?: boolean;
+    onVisibleChange?: (visible: boolean) => boolean | void;
 }>>;
 declare const WithTooltip: (props: ComponentProps<typeof LazyWithTooltip>) => JSX.Element;
 declare const LazyWithTooltipPure: react__default.LazyExoticComponent<react__default.FC<WithTooltipPureProps>>;
@@ -498,133 +590,6 @@ interface TooltipNoteProps {
 }
 declare const TooltipNote: FC<TooltipNoteProps>;
 
-interface ItemProps {
-    disabled?: boolean;
-}
-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;
-    title?: ReactNode;
-    center?: ReactNode;
-    right?: ReactNode;
-    active?: boolean;
-    disabled?: boolean;
-    href?: string;
-    LinkWrapper?: LinkWrapperType;
-}
-
-interface Link extends Omit<ListItemProps, 'onClick'> {
-    id: string;
-    isGatsby?: boolean;
-    onClick?: (event: SyntheticEvent, item: ListItemProps) => void;
-}
-interface TooltipLinkListProps {
-    links: Link[];
-    LinkWrapper?: LinkWrapperType;
-}
-declare const TooltipLinkList: FC<TooltipLinkListProps>;
-
-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: FC<TabWrapperProps>;
-interface TabsProps {
-    children?: FuncChildren[] | ReactNode;
-    id?: string;
-    tools?: ReactNode;
-    selected?: string;
-    actions?: {
-        onSelect: (id: string) => void;
-    } & Record<string, any>;
-    backgroundColor?: string;
-    absolute?: boolean;
-    bordered?: boolean;
-}
-declare const Tabs: FC<TabsProps>;
-type FuncChildren = ({ active }: {
-    active: boolean;
-}) => JSX.Element;
-interface TabsStateProps {
-    children: FuncChildren[] | ReactNode;
-    initial: string;
-    absolute: boolean;
-    bordered: boolean;
-    backgroundColor: string;
-}
-interface TabsStateState {
-    selected: string;
-}
-declare class TabsState extends Component<TabsStateProps, TabsStateState> {
-    static defaultProps: TabsStateProps;
-    constructor(props: TabsStateProps);
-    handlers: {
-        onSelect: (id: string) => void;
-    };
-    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<((BarButtonProps | BarLinkProps) & {
-    theme?: _storybook_theming.Theme;
-}) & TabButtonProps, {}, {}>;
-interface IconButtonProps {
-    active?: boolean;
-    disabled?: boolean;
-}
-declare const IconButton: _storybook_theming.StyledComponent<((BarButtonProps | BarLinkProps) & {
-    theme?: _storybook_theming.Theme;
-}) & IconButtonProps, {}, {}>;
-declare const IconButtonSkeleton: () => JSX.Element;
-
-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<ScrollAreaProps & {
-    children?: react__default.ReactNode;
-} & {
-    theme?: _storybook_theming.Theme;
-} & {
-    border?: boolean;
-}, {}, {}>;
-interface FlexBarProps {
-    border?: boolean;
-    children?: any;
-    backgroundColor?: string;
-}
-declare const FlexBar: FC<FlexBarProps>;
-
-interface AddonPanelProps {
-    active: boolean;
-    children: ReactNode;
-}
-declare const AddonPanel: ({ active, children }: AddonPanelProps) => JSX.Element;
-
 declare const icons: {
     readonly user: JSX.Element;
     readonly useralt: JSX.Element;
@@ -779,6 +744,10 @@ declare const icons: {
     readonly rewind: JSX.Element;
     readonly fastforward: JSX.Element;
     readonly stopalt: JSX.Element;
+    readonly sidebyside: JSX.Element;
+    readonly stacked: JSX.Element;
+    readonly sun: JSX.Element;
+    readonly moon: JSX.Element;
     readonly book: JSX.Element;
     readonly document: JSX.Element;
     readonly copy: JSX.Element;
@@ -832,6 +801,146 @@ declare const icons: {
 };
 type IconKey = keyof typeof icons;
 
+interface ItemProps {
+    disabled?: boolean;
+}
+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;
+    /**
+     * @deprecated This property will be removed in SB 8.0
+     * Use `icon` property instead.
+     */
+    left?: ReactNode;
+    title?: ReactNode;
+    center?: ReactNode;
+    right?: ReactNode;
+    icon?: keyof typeof icons | ReactElement;
+    active?: boolean;
+    disabled?: boolean;
+    href?: string;
+    LinkWrapper?: LinkWrapperType;
+    isIndented?: boolean;
+}
+declare const ListItem: FC<ListItemProps>;
+
+interface Link extends Omit<ListItemProps, 'onClick'> {
+    id: string;
+    isGatsby?: boolean;
+    onClick?: (event: SyntheticEvent, item: ListItemProps) => void;
+}
+interface TooltipLinkListProps {
+    links: Link[];
+    LinkWrapper?: LinkWrapperType;
+}
+declare const TooltipLinkList: FC<TooltipLinkListProps>;
+
+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: FC<TabWrapperProps>;
+interface TabsProps {
+    children?: FuncChildren[] | ReactNode;
+    id?: string;
+    tools?: ReactNode;
+    selected?: string;
+    actions?: {
+        onSelect: (id: string) => void;
+    } & Record<string, any>;
+    backgroundColor?: string;
+    absolute?: boolean;
+    bordered?: boolean;
+    menuName?: string;
+}
+declare const Tabs: FC<TabsProps>;
+type FuncChildren = ({ active }: {
+    active: boolean;
+}) => JSX.Element;
+interface TabsStateProps {
+    children: FuncChildren[] | ReactNode;
+    initial: string;
+    absolute: boolean;
+    bordered: boolean;
+    backgroundColor: string;
+    menuName: string;
+}
+interface TabsStateState {
+    selected: string;
+}
+declare class TabsState extends Component<TabsStateProps, TabsStateState> {
+    static defaultProps: TabsStateProps;
+    constructor(props: TabsStateProps);
+    handlers: {
+        onSelect: (id: string) => void;
+    };
+    render(): JSX.Element;
+}
+
+interface BarButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    href?: void;
+    target?: void;
+}
+interface BarLinkProps extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
+    disabled?: void;
+    href: string;
+}
+interface TabButtonProps {
+    active?: boolean;
+    textColor?: string;
+}
+declare const TabButton: _storybook_theming.StyledComponent<Pick<BarButtonProps | BarLinkProps, "href" | "target" | "type" | "slot" | "style" | "title" | "className" | "color" | "translate" | "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" | "key"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+    theme?: _storybook_theming.Theme;
+} & TabButtonProps, {}, {}>;
+interface IconButtonProps {
+    active?: boolean;
+    disabled?: boolean;
+}
+declare const IconButton: _storybook_theming.StyledComponent<Pick<BarButtonProps | BarLinkProps, "href" | "target" | "type" | "slot" | "style" | "title" | "className" | "color" | "translate" | "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" | "key"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+    theme?: _storybook_theming.Theme;
+} & IconButtonProps, {}, {}>;
+declare const IconButtonSkeleton: () => JSX.Element;
+
+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<ScrollAreaProps & {
+    children?: react__default.ReactNode;
+} & {
+    scrollable?: boolean;
+} & {
+    theme?: _storybook_theming.Theme;
+} & {
+    border?: boolean;
+    scrollable?: boolean;
+}, {}, {}>;
+interface FlexBarProps extends ComponentProps<typeof Bar> {
+    border?: boolean;
+    backgroundColor?: string;
+}
+declare const FlexBar: FC<FlexBarProps>;
+
+interface AddonPanelProps {
+    active: boolean;
+    children: ReactNode;
+}
+declare const AddonPanel: ({ active, children }: AddonPanelProps) => JSX.Element;
+
 declare const Svg: _storybook_theming.StyledComponent<{
     theme?: _storybook_theming.Theme;
     as?: react__default.ElementType<any>;
@@ -925,4 +1034,4 @@ declare const components: {
 };
 declare const resetComponents: Record<string, ElementType>;
 
-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 };
+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, ListItem, 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, Link as TooltipLinkListLink, TooltipMessage, TooltipNote, UL, WithTooltip, WithTooltipPure, Zoom, codeCommon, components, createCopyToClipboardFunction, getStoryHref, icons, interleaveSeparators, nameSpaceClassNames, resetComponents, withReset };