storybook 10.1.0-alpha.0 → 10.1.0-alpha.10

package/dist/components/index.d.ts

@@ -1,7 +1,9 @@
 import * as React$1 from 'react';
-import React__default, { ComponentProps, AnchorHTMLAttributes, MouseEvent, ReactNode, ReactElement, ButtonHTMLAttributes, SyntheticEvent, Component, RefObject, FC, PropsWithChildren, DetailedHTMLProps, RefAttributes, ElementType } from 'react';
+import React__default, { ComponentProps, AnchorHTMLAttributes, MouseEvent as MouseEvent$1, ReactNode, ReactElement, HTMLAttributes, ButtonHTMLAttributes, SyntheticEvent, Component, RefObject, DOMAttributes, FC, PropsWithChildren, ForwardRefExoticComponent, RefAttributes, ElementType } from 'react';
+import { DecoratorFunction } from 'storybook/internal/csf';
+import { API_KeyCollection } from 'storybook/manager-api';
 import { Addon_RenderOptions } from 'storybook/internal/types';
-import { FunctionInterpolation } from 'storybook/theming';
+import { CSSObject, FunctionInterpolation } from 'storybook/theming';
 
 interface ComponentSelector {
     __emotion_styles: any;
@@ -197,10 +199,10 @@ interface LinkProps extends LinkInnerProps, LinkStylesProps, AProps {
     cancel?: boolean;
     className?: string;
     style?: object;
-    onClick?: (e: MouseEvent) => void;
+    onClick?: (e: MouseEvent$1) => void;
     href?: string;
 }
-declare const Link$1: ({ cancel, children, onClick, withArrow, containsIcon, className, style, ...rest }: LinkProps) => React__default.JSX.Element;
+declare const Link$1: React__default.ForwardRefExoticComponent<LinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
 
 declare const DocumentWrapper: StyledComponent<{
     theme?: Theme;
@@ -274,7 +276,7 @@ declare function createCopyToClipboardFunction(): typeof copyUsingClipboardAPI;
 interface ActionItem {
     title: string | ReactElement;
     className?: string;
-    onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+    onClick: (e: MouseEvent$1<HTMLButtonElement>) => void;
     disabled?: boolean;
 }
 interface ActionBarProps {
@@ -282,253 +284,164 @@ interface ActionBarProps {
 }
 declare const ActionBar: ({ actionItems, ...props }: ActionBarProps) => React__default.JSX.Element;
 
-type Scope<C = any> = {
-    [scopeName: string]: React$1.Context<C>[];
-} | undefined;
-type ScopeHook = (scope: Scope) => {
-    [__scopeProp: string]: Scope;
-};
-interface CreateScope {
-    scopeName: string;
-    (): ScopeHook;
-}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
 
-declare const NODES: readonly ["a", "button", "div", "form", "h2", "h3", "img", "input", "label", "li", "nav", "ol", "p", "select", "span", "svg", "ul"];
-type Primitives = {
-    [E in (typeof NODES)[number]]: PrimitiveForwardRefComponent<E>;
-};
-type PrimitivePropsWithRef<E extends React$1.ElementType> = React$1.ComponentPropsWithRef<E> & {
-    asChild?: boolean;
-};
-interface PrimitiveForwardRefComponent<E extends React$1.ElementType> extends React$1.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {
-}
-declare const Primitive: Primitives;
 
-type PrimitiveDivProps$3 = React$1.ComponentPropsWithoutRef<typeof Primitive.div>;
-interface DismissableLayerProps$1 extends PrimitiveDivProps$3 {
-    /**
-     * When `true`, hover/focus/click interactions will be disabled on elements outside
-     * the `DismissableLayer`. Users will need to click twice on outside elements to
-     * interact with them: once to close the `DismissableLayer`, and again to trigger the element.
-     */
-    disableOutsidePointerEvents?: boolean;
-    /**
-     * Event handler called when the escape key is down.
-     * Can be prevented.
-     */
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
-    /**
-     * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.
-     * Can be prevented.
-     */
-    onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
-    /**
-     * Event handler called when the focus moves outside of the `DismissableLayer`.
-     * Can be prevented.
-     */
-    onFocusOutside?: (event: FocusOutsideEvent) => void;
-    /**
-     * Event handler called when an interaction happens outside the `DismissableLayer`.
-     * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.
-     * Can be prevented.
-     */
-    onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;
-    /**
-     * Handler called when the `DismissableLayer` should be dismissed
-     */
-    onDismiss?: () => void;
-}
-declare const DismissableLayer: React$1.ForwardRefExoticComponent<DismissableLayerProps$1 & React$1.RefAttributes<HTMLDivElement>>;
-type PointerDownOutsideEvent = CustomEvent<{
-    originalEvent: PointerEvent;
-}>;
-type FocusOutsideEvent = CustomEvent<{
-    originalEvent: FocusEvent;
-}>;
-
-type PrimitiveDivProps$2 = React$1.ComponentPropsWithoutRef<typeof Primitive.div>;
-interface FocusScopeProps$1 extends PrimitiveDivProps$2 {
-    /**
-     * When `true`, tabbing from last item will focus first tabbable
-     * and shift+tab from first item will focus last tababble.
-     * @defaultValue false
-     */
-    loop?: boolean;
-    /**
-     * When `true`, focus cannot escape the focus scope via keyboard,
-     * pointer, or a programmatic focus.
-     * @defaultValue false
-     */
-    trapped?: boolean;
-    /**
-     * Event handler called when auto-focusing on mount.
-     * Can be prevented.
-     */
-    onMountAutoFocus?: (event: Event) => void;
-    /**
-     * Event handler called when auto-focusing on unmount.
-     * Can be prevented.
-     */
-    onUnmountAutoFocus?: (event: Event) => void;
-}
-declare const FocusScope: React$1.ForwardRefExoticComponent<FocusScopeProps$1 & React$1.RefAttributes<HTMLDivElement>>;
 
-type PrimitiveDivProps$1 = React$1.ComponentPropsWithoutRef<typeof Primitive.div>;
-interface PortalProps$1 extends PrimitiveDivProps$1 {
-    /**
-     * An optional container where the portaled content should be appended.
-     */
-    container?: Element | DocumentFragment | null;
+type Placement$1 = 'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' |
+    'top' | 'top left' | 'top right' | 'top start' | 'top end' |
+    'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' |
+    'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom';
+
+interface PositionProps {
+  /**
+   * The placement of the element with respect to its anchor element.
+   * @default 'bottom'
+   */
+  placement?: Placement$1,
+  /**
+   * The placement padding that should be applied between the element and its
+   * surrounding container.
+   * @default 12
+   */
+  containerPadding?: number,
+  /**
+   * The additional offset applied along the main axis between the element and its
+   * anchor element.
+   * @default 0
+   */
+  offset?: number,
+  /**
+   * The additional offset applied along the cross axis between the element and its
+   * anchor element.
+   * @default 0
+   */
+  crossOffset?: number,
+  /**
+   * Whether the element should flip its orientation (e.g. top to bottom or left to right) when
+   * there is insufficient room for it to render completely.
+   * @default true
+   */
+  shouldFlip?: boolean,
+  // /**
+  //  * The element that should be used as the bounding container when calculating container offset
+  //  * or whether it should flip.
+  //  */
+  // boundaryElement?: Element,
+  /** Whether the element is rendered. */
+  isOpen?: boolean
+}
+
+declare global {
+    namespace FormatjsIntl {
+        interface Message {
+        }
+        interface IntlConfig {
+        }
+        interface Formats {
+        }
+    }
 }
-declare const Portal$1: React$1.ForwardRefExoticComponent<PortalProps$1 & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const createDialogScope: CreateScope;
-interface DialogProps {
-    children?: React$1.ReactNode;
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?(open: boolean): void;
-    modal?: boolean;
+interface TextProps extends HTMLAttributes<HTMLElement> {
+    elementType?: string;
 }
-declare const Dialog: React$1.FC<DialogProps>;
-type PrimitiveButtonProps = React$1.ComponentPropsWithoutRef<typeof Primitive.button>;
-interface DialogTriggerProps extends PrimitiveButtonProps {
+interface HeadingProps extends HTMLAttributes<HTMLElement> {
+    level?: number;
 }
-declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-type PortalProps = React$1.ComponentPropsWithoutRef<typeof Portal$1>;
-interface DialogPortalProps {
-    children?: React$1.ReactNode;
-    /**
-     * Specify a container element to portal the content into.
-     */
-    container?: PortalProps['container'];
+
+type TransitionStatus =
+  | 'preEnter'
+  | 'entering'
+  | 'entered'
+  | 'preExit'
+  | 'exiting'
+  | 'exited'
+  | 'unmounted';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+    size?: 'small' | 'medium';
+    padding?: 'small' | 'medium' | 'none';
+    variant?: 'outline' | 'solid' | 'ghost';
+    onClick?: (event: SyntheticEvent) => void;
+    active?: boolean;
+    disabled?: boolean;
+    animation?: 'none' | 'rotate360' | 'glow' | 'jiggle';
     /**
-     * Used to force mounting when more control is needed. Useful when
-     * controlling animation with React animation libraries.
+     * A concise action label for the button announced by screen readers. Needed for buttons without
+     * text or with text that relies on visual cues to be understood. Pass false to indicate that the
+     * Button's content is already accessible to all. When a string is passed, it is also used as the
+     * default tooltip text.
      */
-    forceMount?: true;
-}
-declare const DialogPortal: React$1.FC<DialogPortalProps>;
-interface DialogOverlayProps extends DialogOverlayImplProps {
+    ariaLabel?: string | false;
     /**
-     * Used to force mounting when more control is needed. Useful when
-     * controlling animation with React animation libraries.
+     * An optional tooltip to display when the Button is hovered. If the Button has no text content,
+     * consider making this the same as the aria-label.
      */
-    forceMount?: true;
-}
-declare const DialogOverlay: React$1.ForwardRefExoticComponent<DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>>;
-type PrimitiveDivProps = React$1.ComponentPropsWithoutRef<typeof Primitive.div>;
-interface DialogOverlayImplProps extends PrimitiveDivProps {
-}
-interface DialogContentProps extends DialogContentTypeProps {
+    tooltip?: string;
     /**
-     * Used to force mounting when more control is needed. Useful when
-     * controlling animation with React animation libraries.
+     * Only use this flag when tooltips on button interfere with other keyboard interactions, like
+     * when building a custom select or menu button. Disables tooltips from the `tooltip`, `shortcut`
+     * and `ariaLabel` props.
      */
-    forceMount?: true;
-}
-declare const DialogContent: React$1.ForwardRefExoticComponent<DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
-interface DialogContentTypeProps extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {
-}
-type DismissableLayerProps = React$1.ComponentPropsWithoutRef<typeof DismissableLayer>;
-type FocusScopeProps = React$1.ComponentPropsWithoutRef<typeof FocusScope>;
-interface DialogContentImplProps extends Omit<DismissableLayerProps, 'onDismiss'> {
+    disableAllTooltips?: boolean;
     /**
-     * When `true`, focus cannot escape the `Content` via keyboard,
-     * pointer, or a programmatic focus.
-     * @defaultValue false
+     * A more thorough description of what the Button does, provided to non-sighted users through an
+     * aria-describedby attribute. Use sparingly for buttons that trigger complex actions.
      */
-    trapFocus?: FocusScopeProps['trapped'];
+    ariaDescription?: string;
     /**
-     * Event handler called when auto-focusing on open.
-     * Can be prevented.
+     * An optional keyboard shortcut to enable the button. Will be displayed in the tooltip and passed
+     * to aria-keyshortcuts for assistive technologies. The binding of the shortcut and action is
+     * managed globally in the manager's shortcuts module.
      */
-    onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];
-    /**
-     * Event handler called when auto-focusing on close.
-     * Can be prevented.
-     */
-    onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];
-}
-type PrimitiveHeading2Props = React$1.ComponentPropsWithoutRef<typeof Primitive.h2>;
-interface DialogTitleProps extends PrimitiveHeading2Props {
-}
-declare const DialogTitle: React$1.ForwardRefExoticComponent<DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
-type PrimitiveParagraphProps = React$1.ComponentPropsWithoutRef<typeof Primitive.p>;
-interface DialogDescriptionProps extends PrimitiveParagraphProps {
-}
-declare const DialogDescription: React$1.ForwardRefExoticComponent<DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
-interface DialogCloseProps extends PrimitiveButtonProps {
-}
-declare const DialogClose: React$1.ForwardRefExoticComponent<DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const WarningProvider: React$1.FC<{
-    contentName: string;
-    titleName: string;
-    docsSlug: string;
-} & {
-    children: React$1.ReactNode;
-}>;
-declare const Root: React$1.FC<DialogProps>;
-declare const Trigger: React$1.ForwardRefExoticComponent<DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const Portal: React$1.FC<DialogPortalProps>;
-declare const Overlay$1: React$1.ForwardRefExoticComponent<DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const Content$1: React$1.ForwardRefExoticComponent<DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const Title$1: React$1.ForwardRefExoticComponent<DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
-declare const Description$1: React$1.ForwardRefExoticComponent<DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
-declare const Close: React$1.ForwardRefExoticComponent<DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
-
-declare const Dialog$1_Close: typeof Close;
-declare const Dialog$1_Dialog: typeof Dialog;
-declare const Dialog$1_DialogClose: typeof DialogClose;
-type Dialog$1_DialogCloseProps = DialogCloseProps;
-declare const Dialog$1_DialogContent: typeof DialogContent;
-type Dialog$1_DialogContentProps = DialogContentProps;
-declare const Dialog$1_DialogDescription: typeof DialogDescription;
-type Dialog$1_DialogDescriptionProps = DialogDescriptionProps;
-declare const Dialog$1_DialogOverlay: typeof DialogOverlay;
-type Dialog$1_DialogOverlayProps = DialogOverlayProps;
-declare const Dialog$1_DialogPortal: typeof DialogPortal;
-type Dialog$1_DialogPortalProps = DialogPortalProps;
-type Dialog$1_DialogProps = DialogProps;
-declare const Dialog$1_DialogTitle: typeof DialogTitle;
-type Dialog$1_DialogTitleProps = DialogTitleProps;
-declare const Dialog$1_DialogTrigger: typeof DialogTrigger;
-type Dialog$1_DialogTriggerProps = DialogTriggerProps;
-declare const Dialog$1_Portal: typeof Portal;
-declare const Dialog$1_Root: typeof Root;
-declare const Dialog$1_Trigger: typeof Trigger;
-declare const Dialog$1_WarningProvider: typeof WarningProvider;
-declare const Dialog$1_createDialogScope: typeof createDialogScope;
-declare namespace Dialog$1 {
-  export { Dialog$1_Close as Close, Content$1 as Content, Description$1 as Description, Dialog$1_Dialog as Dialog, Dialog$1_DialogClose as DialogClose, type Dialog$1_DialogCloseProps as DialogCloseProps, Dialog$1_DialogContent as DialogContent, type Dialog$1_DialogContentProps as DialogContentProps, Dialog$1_DialogDescription as DialogDescription, type Dialog$1_DialogDescriptionProps as DialogDescriptionProps, Dialog$1_DialogOverlay as DialogOverlay, type Dialog$1_DialogOverlayProps as DialogOverlayProps, Dialog$1_DialogPortal as DialogPortal, type Dialog$1_DialogPortalProps as DialogPortalProps, type Dialog$1_DialogProps as DialogProps, Dialog$1_DialogTitle as DialogTitle, type Dialog$1_DialogTitleProps as DialogTitleProps, Dialog$1_DialogTrigger as DialogTrigger, type Dialog$1_DialogTriggerProps as DialogTriggerProps, Overlay$1 as Overlay, Dialog$1_Portal as Portal, Dialog$1_Root as Root, Title$1 as Title, Dialog$1_Trigger as Trigger, Dialog$1_WarningProvider as WarningProvider, Dialog$1_createDialogScope as createDialogScope };
-}
-
-interface ButtonProps$1 extends ButtonHTMLAttributes<HTMLButtonElement> {
-    asChild?: boolean;
-    size?: 'small' | 'medium';
-    padding?: 'small' | 'medium' | 'none';
-    variant?: 'outline' | 'solid' | 'ghost';
-    onClick?: (event: SyntheticEvent) => void;
-    disabled?: boolean;
-    active?: boolean;
-    animation?: 'none' | 'rotate360' | 'glow' | 'jiggle';
+    shortcut?: API_KeyCollection;
 }
-declare const Button: React__default.ForwardRefExoticComponent<ButtonProps$1 & React__default.RefAttributes<HTMLButtonElement>>;
-
-declare const IconButton: React__default.ForwardRefExoticComponent<ButtonProps$1 & React__default.RefAttributes<HTMLButtonElement>>;
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+declare const IconButton: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
 
 declare const Overlay: StyledComponent<{
     theme?: Theme;
     as?: React__default.ElementType;
+} & {
+    $status?: TransitionStatus;
+    $transitionDuration?: number;
 }, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const Container: StyledComponent<{
     theme?: Theme;
     as?: React__default.ElementType;
 } & {
-    width?: number;
-    height?: number;
+    $variant: "dialog" | "bottom-drawer";
+    $status?: TransitionStatus;
+    $transitionDuration?: number;
+    width?: number | string;
+    height?: number | string;
 }, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare const CloseButton: (props: React__default.ComponentProps<typeof IconButton>) => React__default.JSX.Element;
+interface CloseProps {
+    asChild?: boolean;
+    children?: React__default.ReactElement<{
+        onClick?: (event: React__default.MouseEvent) => void;
+    }, string | React__default.JSXElementConstructor<{
+        onClick?: (event: React__default.MouseEvent) => void;
+    }>>;
+    onClick?: (event: React__default.MouseEvent) => void;
+}
+declare const Close: ({ asChild, children, onClick, ...props }: CloseProps) => React__default.JSX.Element;
+declare const Dialog: {
+    Close: () => React__default.JSX.Element;
+};
+declare const CloseButton: ({ ariaLabel, ...props }: React__default.ComponentProps<typeof Button>) => React__default.JSX.Element;
 declare const Content: StyledComponent<{
     theme?: Theme;
     as?: React__default.ElementType;
@@ -541,11 +454,13 @@ declare const Col: StyledComponent<{
     theme?: Theme;
     as?: React__default.ElementType;
 }, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare const Header: (props: React__default.ComponentProps<typeof Col>) => React__default.JSX.Element;
-declare const Title: StyledComponent<DialogTitleProps & React__default.RefAttributes<HTMLHeadingElement> & {
+declare const Header: ({ hasClose, ...props }: React__default.ComponentProps<typeof Col> & {
+    hasClose?: boolean;
+}) => React__default.JSX.Element;
+declare const Title: StyledComponent<HeadingProps & React__default.RefAttributes<HTMLHeadingElement> & {
     theme?: Theme;
 }, {}, {}>;
-declare const Description: StyledComponent<DialogDescriptionProps & React__default.RefAttributes<HTMLParagraphElement> & {
+declare const Description: StyledComponent<TextProps & React__default.RefAttributes<HTMLElement> & {
     theme?: Theme;
 }, {}, {}>;
 declare const Actions: StyledComponent<{
@@ -561,35 +476,61 @@ declare const Error$1: ({ children, ...props }: {
 } & ComponentProps<typeof ErrorWrapper>) => React__default.JSX.Element;
 
 declare const Components_Actions: typeof Actions;
+declare const Components_Close: typeof Close;
 declare const Components_CloseButton: typeof CloseButton;
 declare const Components_Col: typeof Col;
 declare const Components_Container: typeof Container;
 declare const Components_Content: typeof Content;
 declare const Components_Description: typeof Description;
+declare const Components_Dialog: typeof Dialog;
 declare const Components_ErrorWrapper: typeof ErrorWrapper;
 declare const Components_Header: typeof Header;
 declare const Components_Overlay: typeof Overlay;
 declare const Components_Row: typeof Row;
 declare const Components_Title: typeof Title;
 declare namespace Components {
-  export { Components_Actions as Actions, Components_CloseButton as CloseButton, Components_Col as Col, Components_Container as Container, Components_Content as Content, Components_Description as Description, Error$1 as Error, Components_ErrorWrapper as ErrorWrapper, Components_Header as Header, Components_Overlay as Overlay, Components_Row as Row, Components_Title as Title };
+  export { Components_Actions as Actions, Components_Close as Close, Components_CloseButton as CloseButton, Components_Col as Col, Components_Container as Container, Components_Content as Content, Components_Description as Description, Components_Dialog as Dialog, Error$1 as Error, Components_ErrorWrapper as ErrorWrapper, Components_Header as Header, Components_Overlay as Overlay, Components_Row as Row, Components_Title as Title };
 }
 
-type ContentProps = React__default.ComponentProps<typeof Content$1>;
-interface ModalProps extends Omit<React__default.ComponentProps<typeof Root>, 'children'> {
-    width?: number;
-    height?: number;
-    children: React__default.ReactNode;
-    onEscapeKeyDown?: ContentProps['onEscapeKeyDown'];
-    onInteractOutside?: ContentProps['onInteractOutside'];
-    className?: string;
+interface ModalProps extends HTMLAttributes<HTMLDivElement> {
     container?: HTMLElement;
     portalSelector?: string;
-}
-declare function BaseModal({ children, width, height, onEscapeKeyDown, onInteractOutside, className, container, portalSelector, ...rootProps }: ModalProps): React__default.JSX.Element;
-declare const Modal: typeof BaseModal & typeof Components & {
-    Dialog: typeof Dialog$1;
-};
+    /** Width of the Modal. Defaults to `740`. */
+    width?: number | string;
+    /** Height of the Modal. Defaults to `auto`. */
+    height?: number | string;
+    /** Modal content. */
+    children: React__default.ReactNode;
+    /** Additional class names for the Modal. */
+    className?: string;
+    /** Controlled state: whether the Modal is currently open. */
+    open?: boolean;
+    /** Uncontrolled state: whether the Modal is initially open on the first. */
+    defaultOpen?: boolean;
+    /** @deprecated Use `dismissOnEscape` instead. */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /** @deprecated Use `dismissOnInteractOutside` instead. */
+    onInteractOutside?: (event: FocusEvent | MouseEvent | TouchEvent) => void;
+    /** Handler called when visibility of the Modal changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** The accessible name for the modal. */
+    ariaLabel?: string;
+    /** Whether the modal can be dismissed by clicking outside. Defaults to `true`. */
+    dismissOnClickOutside?: boolean;
+    /** Whether the modal can be dismissed by pressing Escape. Defaults to `true`. */
+    dismissOnEscape?: boolean;
+    /** Transition duration, so we can slow down transitions on mobile. */
+    transitionDuration?: number;
+    /** The max dimensions, initial position and animations of the Modal. Defaults to 'dialog'. */
+    variant?: 'dialog' | 'bottom-drawer';
+}
+declare function BaseModal({ container, portalSelector, children, width, height, ariaLabel, dismissOnClickOutside, dismissOnEscape, className, open, onEscapeKeyDown, onInteractOutside, onOpenChange, defaultOpen, transitionDuration, variant, ...props }: ModalProps): React__default.JSX.Element | null;
+declare const Modal: typeof BaseModal & typeof Components;
+/**
+ * Storybook decorator to help render Modals in stories with multiple theme layouts. Internal to
+ * Storybook. Use at your own risk.
+ */
+declare const ModalDecorator: DecoratorFunction;
 
 interface SpacedProps {
     children?: React__default.ReactNode;
@@ -611,6 +552,7 @@ interface ScrollAreaProps {
     className?: string;
     offset?: number;
     scrollbarSize?: number;
+    scrollPadding?: number | string;
 }
 declare const ScrollArea: React__default.ForwardRefExoticComponent<ScrollAreaProps & React__default.RefAttributes<HTMLDivElement>>;
 
@@ -646,6 +588,63 @@ interface ErrorFormatterProps {
 }
 declare const ErrorFormatter: ({ error }: ErrorFormatterProps) => React__default.JSX.Element;
 
+interface ToggleButtonProps extends ButtonProps {
+    /** Whether the ToggleButton is currently pressed or not. */
+    pressed: boolean;
+}
+declare const ToggleButton: React__default.ForwardRefExoticComponent<ToggleButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface Option {
+    /** Optional rendering of the option. */
+    children?: React__default.ReactNode;
+    title: string;
+    description?: string;
+    icon?: React__default.ReactNode;
+    value: string;
+}
+
+interface SelectProps extends Omit<ButtonProps, 'onClick' | 'onChange' | 'onSelect' | 'variant'> {
+    size?: 'small' | 'medium';
+    padding?: 'small' | 'medium' | 'none';
+    /**
+     * Whether multiple options can be selected. In single select mode, this component acts like a
+     * HTML select element where the selected option follows focus. In multi select mode, it acts like
+     * a combobox and does not autoclose on select or autoselect the focused option.
+     */
+    multiSelect?: boolean;
+    /**
+     * Mandatory label that explains what is being selected. Do not include "change", "toggle" or
+     * "select" verbs in the label. Instead, only describe the type of content with a noun.
+     */
+    ariaLabel: string;
+    /**
+     * Label for the Select component. In single-select mode, is replaced by the currently selected
+     * option's title.
+     */
+    children?: React__default.ReactNode;
+    /**
+     * Icon shown next to the Select's children, still displayed when a value is selected and Select
+     * shows that value instead of children.
+     */
+    icon?: React__default.ReactNode;
+    /** Whether the Select is currently disabled. */
+    disabled?: boolean;
+    /** Options available in the select. */
+    options: Option[];
+    /** IDs of the preselected options. */
+    defaultOptions?: string | string[];
+    /** Whether the Select should render open. */
+    defaultOpen?: boolean;
+    /** When set, a reset option is rendered in the Select listbox. */
+    onReset?: () => void;
+    /** Custom text label for the reset option when it exists. */
+    resetLabel?: string;
+    onSelect?: (option: string) => void;
+    onDeselect?: (option: string) => void;
+    onChange?: (selected: string[]) => void;
+}
+declare const Select: React__default.ForwardRefExoticComponent<SelectProps & React__default.RefAttributes<HTMLButtonElement>>;
+
 type Sizes = '100%' | 'flex' | 'auto';
 type Alignments = 'end' | 'center' | 'start';
 type ValidationStates = 'valid' | 'error' | 'warn';
@@ -716,11 +715,106 @@ declare const Form: StyledComponent<{
     } & React$1.RefAttributes<HTMLTextAreaElement>, {}, {}> & {
         displayName: string;
     };
-    Button: React$1.ForwardRefExoticComponent<ButtonProps$1 & React$1.RefAttributes<HTMLButtonElement>>;
+    Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
     Checkbox: (props: React.InputHTMLAttributes<HTMLInputElement>) => React$1.JSX.Element;
     Radio: (props: React.InputHTMLAttributes<HTMLInputElement>) => React$1.JSX.Element;
 };
 
+type BasicPlacement = 'top' | 'bottom' | 'left' | 'right';
+type PlacementWithModifier = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+type PopperPlacement = BasicPlacement | PlacementWithModifier;
+declare const convertToReactAriaPlacement: (p: PopperPlacement) => NonNullable<PositionProps["placement"]>;
+
+interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
+    /** Content of the popover. */
+    children: React__default.ReactNode;
+    /** Preset popover color taken from the theme, affecting both bathground and foreground. */
+    color?: 'default' | 'inverse' | 'positive' | 'negative' | 'warning' | 'none';
+    /** Whether the popover is rendered with a decorative window-like appearance. */
+    hasChrome: boolean;
+    /** Optional callback connected to a close button. Then button is shown only when passed. */
+    onHide?: () => void;
+    /** Optional custom label for the close button, if there is one. */
+    hideLabel?: string;
+    /** Padding between the content and popover edge. */
+    padding?: number | string;
+}
+declare const Popover: React__default.ForwardRefExoticComponent<PopoverProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface PopoverProviderProps {
+    /** Whether to display the Popover in a prestyled container. True by default. */
+    hasChrome?: boolean;
+    /**
+     * Whether to display a close button in the top right corner of the popover overlay. Can overlap
+     * with overlay content, make sure to test your use case. False by default.
+     */
+    hasCloseButton?: boolean;
+    /** Optional custom label for the close button, if there is one. */
+    closeLabel?: string;
+    /** Optional custom padding for the popover overlay. */
+    padding?: number | string;
+    /** Distance between the trigger and Popover. Customize only if you have a good reason to. */
+    offset?: number;
+    /**
+     * Placement of the Popover. Start and End variants involve additional JS dimension calculations
+     * and should be used sparingly. Left and Right get inverted in RTL.
+     */
+    placement?: PopperPlacement;
+    /**
+     * Popover content. Pass a function to receive a onHide callback to collect to your close button,
+     * or if you want to wait for the popover to be opened to call your content component.
+     */
+    popover: ReactNode | ((props: {
+        onHide: () => void;
+    }) => ReactNode);
+    /** Popover trigger, must be a single child with click/press events. Must forward refs. */
+    children: ReactElement<DOMAttributes<Element>, string>;
+    /** Uncontrolled state: whether the Popover is initially visible. */
+    defaultVisible?: boolean;
+    /** Controlled state: whether the Popover is visible. */
+    visible?: boolean;
+    /** Controlled state: fires when user interaction causes the Popover to change visibility. */
+    onVisibleChange?: (isVisible: boolean) => void;
+}
+declare const PopoverProvider: ({ placement: placementProp, hasChrome, hasCloseButton, closeLabel, offset, padding, popover, children, defaultVisible, visible, onVisibleChange, ...props }: PopoverProviderProps) => React__default.JSX.Element;
+
+type TooltipProps = Omit<PopoverProps, 'onHide' | 'hideLabel'>;
+declare const Tooltip: React__default.ForwardRefExoticComponent<TooltipProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface TooltipNoteProps {
+    note: string;
+}
+declare const TooltipNote: ({ note, ...props }: TooltipNoteProps) => React__default.JSX.Element;
+
+interface TooltipProviderProps {
+    /** Tooltips trigger on hover and focus by default. To trigger on focus only, set this to `true`. */
+    triggerOnFocusOnly?: boolean;
+    /** Distance between the trigger and tooltip. Customize only if you have a good reason to. */
+    offset?: number;
+    /**
+     * Placement of the tooltip. Start and End variants involve additional JS dimension calculations
+     * and should be used sparingly. Left and Right get inverted in RTL.
+     */
+    placement?: PopperPlacement;
+    /** Tooltip content */
+    tooltip: ReactNode;
+    /** Tooltip trigger, must be a single child that can receive focus and click/key events. */
+    children: ReactElement<DOMAttributes<Element>, string>;
+    /** Delay before showing the tooltip, defaults to 200ms. Always instant on focus. */
+    delayShow?: number;
+    /** Delay before hiding the tooltip, defaults to 400ms. */
+    delayHide?: number;
+    /** Uncontrolled state: whether the tooltip is visible by default. */
+    defaultVisible?: boolean;
+    /** Deprecated property - use defaultVisible instead. */
+    startOpen?: boolean;
+    /** Controlled state: whether the tooltip is visible. */
+    visible?: boolean;
+    /** Controlled state: fires when user interaction causes the tooltip to change visibility. */
+    onVisibleChange?: (isVisible: boolean) => void;
+}
+declare const TooltipProvider: ({ triggerOnFocusOnly, placement: placementProp, offset, tooltip, children, defaultVisible, startOpen, delayShow, delayHide, visible, onVisibleChange, ...props }: TooltipProviderProps) => React__default.JSX.Element;
+
 declare const top: "top";
 declare const bottom: "bottom";
 declare const right: "right";
@@ -984,7 +1078,7 @@ interface WithTooltipStateProps extends Omit<WithTooltipPureProps, 'onVisibleCha
 
 declare const LazyWithTooltip: React__default.LazyExoticComponent<({ startOpen, onVisibleChange: onChange, ...rest }: WithTooltipStateProps) => React__default.JSX.Element>;
 declare const WithTooltip: (props: ComponentProps<typeof LazyWithTooltip>) => React__default.JSX.Element;
-declare const LazyWithTooltipPure: React__default.LazyExoticComponent<({ svg, trigger, closeOnOutsideClick, placement, modifiers, hasChrome, defaultVisible, withArrows, offset, tooltip, children, closeOnTriggerHidden, mutationObserverOptions, delayHide, visible, interactive, delayShow, strategy, followCursor, onVisibleChange, portalContainer, ...props }: WithTooltipPureProps) => React__default.JSX.Element>;
+declare const LazyWithTooltipPure: React__default.LazyExoticComponent<React__default.FC<WithTooltipPureProps>>;
 declare const WithTooltipPure: (props: ComponentProps<typeof LazyWithTooltipPure>) => React__default.JSX.Element;
 
 interface TooltipMessageProps {
@@ -998,11 +1092,6 @@ interface TooltipMessageProps {
 }
 declare const TooltipMessage: ({ title, desc, links }: TooltipMessageProps) => React__default.JSX.Element;
 
-interface TooltipNoteProps {
-    note: string;
-}
-declare const TooltipNote: ({ note, ...props }: TooltipNoteProps) => React__default.JSX.Element;
-
 interface ItemProps {
     disabled?: boolean;
     href?: string;
@@ -1011,7 +1100,7 @@ interface ItemProps {
 declare const Item: StyledComponent<{
     theme?: Theme;
     as?: React__default.ElementType;
-} & ItemProps, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & ItemProps, React__default.DetailedHTMLProps<React__default.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
 type LinkWrapperType = (props: any) => ReactNode;
 interface ListItemProps extends Omit<ComponentProps<typeof Item>, 'title'> {
     loading?: boolean;
@@ -1026,7 +1115,7 @@ interface ListItemProps extends Omit<ComponentProps<typeof Item>, 'title'> {
     LinkWrapper?: LinkWrapperType;
     isIndented?: boolean;
 }
-declare const ListItem: (props: ListItemProps) => React__default.JSX.Element;
+declare const ListItem: React__default.ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & React__default.RefAttributes<unknown>>;
 
 declare const List: StyledComponent<{
     theme?: Theme;
@@ -1051,16 +1140,13 @@ interface TooltipLinkListProps extends ComponentProps<typeof List> {
 }
 declare const TooltipLinkList: ({ links, LinkWrapper, ...props }: TooltipLinkListProps) => React__default.JSX.Element;
 
-declare const TabBar: StyledComponent<{
-    theme?: Theme;
-    as?: React__default.ElementType;
-}, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const TabBar: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
 interface TabWrapperProps {
     active: boolean;
     render?: () => ReactElement;
     children?: ReactNode;
 }
-declare const TabWrapper: FC<TabWrapperProps>;
+declare const TabWrapper: React__default.ForwardRefExoticComponent<TabWrapperProps & React__default.RefAttributes<HTMLDivElement>>;
 interface TabsProps {
     children?: ReactElement<{
         children: FC<Addon_RenderOptions & PropsWithChildren>;
@@ -1100,24 +1186,13 @@ declare class TabsState extends Component<TabsStateProps, TabsStateState> {
     render(): React__default.JSX.Element;
 }
 
-interface Props {
-    title: React__default.ReactNode;
-    description?: React__default.ReactNode;
-    footer?: React__default.ReactNode;
-}
-declare const EmptyTabContent: ({ title, description, footer }: Props) => React__default.JSX.Element;
-
-interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
-    href?: never;
-    target?: never;
-}
-interface TabButtonProps {
+interface TabButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     active?: boolean;
+    children: ReactNode;
+    id?: string;
     textColor?: string;
 }
-declare const TabButton: StyledComponent<Omit<ButtonProps, "ref"> & RefAttributes<HTMLButtonElement> & {
-    theme?: Theme;
-} & TabButtonProps, {}, {}>;
+declare const TabButton: ForwardRefExoticComponent<TabButtonProps & RefAttributes<HTMLButtonElement>>;
 
 interface SeparatorProps {
     force?: boolean;
@@ -1128,17 +1203,16 @@ declare const Separator: StyledComponent<{
 } & SeparatorProps, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 declare const interleaveSeparators: (list: any[]) => any;
 
-interface UnstyledBarProps extends ScrollAreaProps {
-    scrollable?: boolean;
-}
-interface BarProps extends UnstyledBarProps {
+interface BarProps {
     backgroundColor?: string;
     border?: boolean;
+    className?: string;
+    children?: React__default.ReactNode;
+    scrollable?: boolean;
+    innerStyle?: CSSObject;
 }
-declare const Bar: StyledComponent<UnstyledBarProps & {
-    theme?: Theme;
-} & BarProps, {}, {}>;
-interface FlexBarProps extends ComponentProps<typeof Bar> {
+declare const Bar: React__default.ForwardRefExoticComponent<BarProps & React__default.RefAttributes<HTMLDivElement>>;
+interface FlexBarProps extends BarProps {
     border?: boolean;
     backgroundColor?: string;
 }
@@ -1147,11 +1221,129 @@ declare const FlexBar: {
     displayName: string;
 };
 
+interface Props {
+    title: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    footer?: React__default.ReactNode;
+}
+declare const EmptyTabContent: ({ title, description, footer }: Props) => React__default.JSX.Element;
+
 interface AddonPanelProps {
     active: boolean;
     children: ReactElement;
+    hasScrollbar?: boolean;
+}
+declare const AddonPanel: ({ active, children, hasScrollbar }: AddonPanelProps) => React__default.JSX.Element;
+
+interface AbstractToolbarProps {
+    className?: string;
+    children?: React__default.ReactNode;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+declare const AbstractToolbar: FC<AbstractToolbarProps>;
+interface ToolbarProps extends AbstractToolbarProps, BarProps {
+}
+declare const Toolbar: FC<ToolbarProps>;
+
+interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** The state of the tab list. Primary mechanism for using the tabpanel. */
+    state: ReturnType<typeof useTabsState>;
+    /**
+     * Whether the panel adds a vertical scrollbar. Disable if you want to use fixed or sticky
+     * positioning on part of the tab's content. True by default.
+     */
+    hasScrollbar?: boolean;
+    /**
+     * Whether to render only the active tab's content, or all tabs. When true, non-selected tabs are
+     * rendered with the hidden attribute and do not affect the accessibility object model.
+     */
+    renderAllChildren?: boolean;
+}
+declare const TabPanel: FC<TabPanelProps>;
+
+interface TabProps {
+    id: string;
+    'aria-label'?: string;
+    title: FC | ReactNode | string;
+    children?: FC | ReactNode;
+    isDisabled?: boolean;
+}
+interface useTabsStateProps {
+    defaultSelected?: string;
+    selected?: string;
+    onSelectionChange?: (key: string) => void;
+    tabs: TabProps[];
+}
+declare const useTabsState: ({ defaultSelected, onSelectionChange, selected, tabs, }: useTabsStateProps) => unknown;
+interface TabsViewProps extends HTMLAttributes<HTMLDivElement> {
+    /** List of tabs and their associated panel. */
+    tabs: TabProps[];
+    /** ID of the tab that should be selected on first render. */
+    defaultSelected?: string;
+    /** ID of the current tab if in controlled rendering mode. */
+    selected?: string;
+    /** Called when the selected tab changes, use if you want to control the component state. */
+    onSelectionChange?: (key: string) => void;
+    /**
+     * Optional tools to avoid rendering two toolbars in a layout.
+     *
+     * @warning Only use this if the tools act upon the entire layout,
+     * not upon a single tab panel. If you want to edit which tools are
+     * visible based on the current tab, then you musn't use `tools` and
+     * should handle your own toolbar inside the tabpanel instead.
+     */
+    tools?: ReactElement;
+    /** Background color for the bar containing the tabs and tools. */
+    backgroundColor?: string;
+    /** Style properties for the inner layout container in the bar containing the tabs and tools. */
+    barInnerStyle?: React__default.CSSProperties;
+    /** Show tools instead of the empty state if there are no tabs. */
+    showToolsWhenEmpty?: boolean;
+    /** Custom UI for the empty state shown when there are no tabs. */
+    emptyState?: ReactNode;
+    /** Optional ID. */
+    id?: string;
+    /** Props to pass to the TabPanel component. */
+    panelProps?: Omit<ComponentProps<typeof TabPanel>, 'state'>;
+}
+declare const TabsView: FC<TabsViewProps>;
+
+interface TabListProps extends HTMLAttributes<HTMLDivElement> {
+    state: ReturnType<typeof useTabsState>;
+}
+declare const TabList: FC<TabListProps>;
+
+interface StatelessTabListProps {
+    children?: ReactNode;
+}
+declare const StatelessTabList: FC<StatelessTabListProps>;
+
+interface StatelessTabPanelProps {
+    /** Content of the tab panel. */
+    children: ReactNode;
+    /** Unique id of the TabPanel, must match that of its corresponding Tab. */
+    name: string;
+    /**
+     * Whether the panel adds a vertical scrollbar. Disable if you want to use fixed or sticky
+     * positioning on part of the tab's content. True by default.
+     */
+    hasScrollbar?: boolean;
+}
+declare const StatelessTabPanel: FC<StatelessTabPanelProps>;
+
+interface StatelessTabsViewProps extends Omit<TabsViewProps, 'tabs'> {
+    children: ReactNode;
+}
+declare const StatelessTabsView: FC<StatelessTabsViewProps>;
+
+interface StatelessTabProps {
+    /** Unique id of the Tab, must match that of its corresponding TabPanel. */
+    name: string;
+    /** Tab button content */
+    children: React__default.ReactNode;
 }
-declare const AddonPanel: ({ active, children }: AddonPanelProps) => React__default.JSX.Element;
+declare const StatelessTab: FC<StatelessTabProps>;
 
 type StorybookLogoProps = {
     alt: string;
@@ -1243,4 +1435,4 @@ declare const components: {
 };
 declare const resetComponents: Record<string, ElementType>;
 
-export { A, ActionBar, type ActionItem, AddonPanel, Badge, Bar, Blockquote, Button, ClipboardCode, Code, DL, Div, DocumentWrapper, EmptyTabContent, ErrorFormatter, FlexBar, Form, H1, H2, H3, H4, H5, H6, HR, IconButton, Img, LI, Link$1 as Link, ListItem, Loader, Modal, OL, P, Placeholder, Pre, ProgressSpinner, ResetWrapper, ScrollArea, Separator, Spaced, Span, StorybookIcon, StorybookLogo, type SupportedLanguage, SyntaxHighlighter, type SyntaxHighlighterFormatTypes, type SyntaxHighlighterProps, type SyntaxHighlighterRendererProps, TT, TabBar, TabButton, TabWrapper, Table, Tabs, TabsState, TooltipLinkList, type Link as TooltipLinkListLink, TooltipMessage, TooltipNote, UL, WithTooltip, WithTooltipPure, Zoom, codeCommon, components, createCopyToClipboardFunction, getStoryHref, interleaveSeparators, nameSpaceClassNames, resetComponents, withReset };
+export { A, AbstractToolbar, ActionBar, type ActionItem, AddonPanel, Badge, Bar, type BarProps, Blockquote, Button, type ButtonProps, ClipboardCode, Code, DL, Div, DocumentWrapper, EmptyTabContent, ErrorFormatter, FlexBar, Form, H1, H2, H3, H4, H5, H6, HR, IconButton, Img, LI, Link$1 as Link, ListItem, Loader, Modal, ModalDecorator, OL, P, Placeholder, Popover, type PopoverProps, PopoverProvider, type PopoverProviderProps, type PopperPlacement, Pre, ProgressSpinner, ResetWrapper, ScrollArea, Select, Separator, Spaced, Span, StatelessTab, StatelessTabList, type StatelessTabListProps, StatelessTabPanel, type StatelessTabPanelProps, type StatelessTabProps, StatelessTabsView, type StatelessTabsViewProps, StorybookIcon, StorybookLogo, type SupportedLanguage, SyntaxHighlighter, type SyntaxHighlighterFormatTypes, type SyntaxHighlighterProps, type SyntaxHighlighterRendererProps, TT, TabBar, TabButton, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, TabWrapper, Table, Tabs, TabsState, TabsView, type TabsViewProps, ToggleButton, Toolbar, Tooltip, TooltipLinkList, type Link as TooltipLinkListLink, TooltipMessage, TooltipNote, type TooltipNoteProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, UL, WithTooltip, WithTooltipPure, Zoom, codeCommon, components, convertToReactAriaPlacement, createCopyToClipboardFunction, getStoryHref, interleaveSeparators, nameSpaceClassNames, resetComponents, useTabsState, withReset };