react-magma-dom 3.0.0 → 3.1.0

package/dist/components/Accordion/Accordion.d.ts

@@ -5,6 +5,9 @@ import { ThemeInterface } from '../../theme/magma';
  * @children required
  */
 interface BaseAccordionProps extends UseAccordionProps, React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * @internal
+     */
     testId?: string;
     /**
      * @internal

package/dist/components/Accordion/Accordion.stories.d.ts

@@ -28,3 +28,11 @@ export declare const NoMulti: import("@storybook/csf").AnnotatedStoryFn<import("
 export declare const Controlled: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, AccordionProps>;
 export declare const ControlledNoMulti: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, AccordionProps>;
 export declare const ExpandCollapseAll: (args: any) => JSX.Element;
+export declare const Inverse: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, AccordionProps>;
+export declare const WithDropdown: {
+    (args: any): JSX.Element;
+    args: {
+        isInverse: boolean;
+        isMulti: boolean;
+    };
+};

package/dist/components/Accordion/useAccordion.d.ts

@@ -26,6 +26,9 @@ export interface UseAccordionProps {
      * Event that fires when an accordion button is clicked
      */
     onExpandedChange?: (event: any) => void;
+    /**
+     * @internal
+     */
     testId?: string;
 }
 interface AccordionContextInterface {

package/dist/components/Accordion/useAccordionButton.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
 export interface UseAccordionButtonProps {
+    /**
+     * @internal
+     */
     testId?: string;
     isInverse?: boolean;
 }

package/dist/components/Accordion/useAccordionItem.d.ts

@@ -5,6 +5,9 @@ export interface UseAccordionItemProps {
      */
     index?: number;
     isDisabled?: boolean;
+    /**
+     * @internal
+     */
     testId?: string;
 }
 interface AccordionItemContextInterface {

package/dist/components/Alert/Alert.stories.d.ts

@@ -1,9 +1,8 @@
-import { AlertProps } from './index';
-declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import(".").AlertProps & React.RefAttributes<HTMLDivElement>>;
+};
 export default _default;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, AlertProps>;
-export declare const Dismissible: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, AlertProps>;
-export declare const Danger: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, AlertProps>;
-export declare const Success: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, AlertProps>;
-export declare const Warning: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, AlertProps>;
-export declare const Inverse: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, AlertProps>;
+export declare const Default: () => JSX.Element;
+export declare const Inverse: () => JSX.Element;

package/dist/components/Alert/index.d.ts

@@ -19,10 +19,13 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
      * Action that fires when the close button is clicked (required when isDismissible is true)
      */
     onDismiss?: () => void;
+    /**
+     * @internal
+     */
     testId?: string;
     /**
      * The variant of the alert, indicating its function in the UI
-     * @default `AlertVariant.info`
+     * @default AlertVariant.info
      */
     variant?: AlertVariant;
 }

package/dist/components/AlertBase/index.d.ts

@@ -5,7 +5,6 @@ export declare const VARIANT_ICON: {
 };
 export declare enum AlertVariant {
     info = "info",
-    muted = "muted",
     success = "success",
     warning = "warning",
     danger = "danger"
@@ -14,6 +13,7 @@ export interface AlertBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     closeAriaLabel?: string;
     forceDismiss?: () => void;
     hasTimerRing?: boolean;
+    id?: string;
     isExiting?: boolean;
     isDismissed?: boolean;
     isDismissible?: boolean;
@@ -21,10 +21,17 @@ export interface AlertBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     isPaused?: boolean;
     isToast?: boolean;
     onDismiss?: () => void;
+    /**
+     * @internal
+     */
     testId?: string;
     toastDuration?: number;
     variant?: AlertVariant;
 }
 export declare const transitionDuration = 500;
 export declare function buildAlertBackground(props: any): any;
+export declare function buildAlertBorder(props: any): any;
+export declare function buildAlertColor(props: any): any;
+export declare function buildLinkColor(props: any): any;
+export declare function buildLinkHoverColor(props: any): any;
 export declare const AlertBase: React.ForwardRefExoticComponent<AlertBaseProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Announce/index.d.ts

@@ -8,6 +8,9 @@ export interface AnnounceProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default AnnouncePoliteness.polite
      */
     politeness?: AnnouncePoliteness;
+    /**
+     * @internal
+     */
     testId?: string;
 }
 export declare enum AnnouncePoliteness {

package/dist/components/AppBar/AppBar.d.ts

@@ -10,7 +10,14 @@ export interface AppBarProps extends React.HTMLAttributes<HTMLDivElement> {
      **/
     isCompact?: boolean;
     isInverse?: boolean;
+    /**
+     * Position of the AppBar
+     * @default AppBarPosition.static
+     **/
     position?: AppBarPosition;
+    /**
+     * @internal
+     */
     testId?: string;
     /**
      * @internal

package/dist/components/Badge/index.d.ts

@@ -13,6 +13,9 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLButtonElement> {
      * Action that fires when the badge is clicked. Causes the Badge to render as a button instead of a span.
      */
     onClick?: () => void;
+    /**
+     * @internal
+     */
     testId?: string;
     /**
      * Indicates the style variant of the component
@@ -33,8 +36,6 @@ export declare enum BadgeVariant {
 }
 export declare function buildBadgeBackground(props: any): any;
 export declare function buildBadgeTextColor(props: any): any;
-export declare function buildBadgeFocusBackground(props: any): string;
-export declare function buildBadgeActiveBackground(props: any): string;
 export declare function buildBadgeBorderColor(props: any): any;
 export declare const baseBadgeStyles: (props: any) => import("@emotion/utils").SerializedStyles;
 export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Banner/Banner.stories.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+import { BannerProps } from '.';
 declare const _default: {
-    component: React.ForwardRefExoticComponent<import(".").BannerProps & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;
     title: string;
 };
 export default _default;
-export declare const Default: () => JSX.Element;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, BannerProps>;
+export declare const Inverse: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, BannerProps>;

package/dist/components/Banner/index.d.ts

@@ -17,5 +17,6 @@ export interface BannerProps extends AlertProps {
      * @default false
      */
     isDismissible?: boolean;
+    isInverse?: boolean;
 }
 export declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/BlockQuote/BlockQuoteItem.d.ts

@@ -21,6 +21,9 @@ export interface BlockQuoteItemProps extends BlockQuoteProps, React.HTMLAttribut
      */
     hasAttribution?: boolean;
     isInverse?: boolean;
+    /**
+     * @internal
+     */
     testId?: string;
     /**
      * Applies visual styles including font-size, font-weight, line-height and margins

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -4,6 +4,13 @@ import * as React from 'react';
  */
 export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
     isInverse?: boolean;
+    /**
+     * The text the screen reader will announce that describes your breadcrumb.
+     */
+    'aria-label'?: string;
+    /**
+     * @internal
+     */
     testId?: string;
 }
 export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLOListElement>>;

package/dist/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -3,6 +3,9 @@ import * as React from 'react';
  * @children required
  */
 export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    /**
+     * @internal
+     */
     testId?: string;
     /**
      * The href value of the link. If left blank, the breadcrumb item will render as a span with aria-current="page" on it.

package/dist/components/BreakpointsContainer/index.d.ts

@@ -12,7 +12,7 @@ export declare enum BreakpointScreenSize {
 export interface BreakpointsContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Object that defines the pixel size of individual breakpoints
-     * @default { xs: 0, small: 600, medium: 768, large: 1024, xl: 1200 }
+     * @default  {xs: 0, small: 600, medium: 768, large: 1024, xl: 1200}
      */
     breakpoints?: object;
 }
@@ -22,6 +22,9 @@ export interface BreakpointProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default BreakpointScreenSize.xs
      */
     screenSize?: BreakpointScreenSize;
+    /**
+     * @internal
+     */
     testId?: string;
 }
 export declare const Breakpoint: React.FunctionComponent<BreakpointProps>;

package/dist/components/Button/Button.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ButtonProps } from '.';
 declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
 export default _default;
@@ -5,3 +6,4 @@ export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("
 export declare const Disabled: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, ButtonProps>;
 export declare const Inverse: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, ButtonProps>;
 export declare const InverseDisabled: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, ButtonProps>;
+export declare const All: () => JSX.Element;

package/dist/components/Button/index.d.ts

@@ -36,7 +36,7 @@ export interface ButtonStyles {
      */
     color?: ButtonColor;
     /**
-     *  Set the button to display full-width.
+     * Set the button to display full-width.
      * @default false
      */
     isFullWidth?: boolean;
@@ -71,6 +71,9 @@ export interface ButtonStyles {
  * @children required
  */
 interface BaseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * @internal
+     */
     testId?: string;
     /**
      * @internal

package/dist/components/ButtonGroup/ButtonGroup.stories.d.ts

@@ -0,0 +1,330 @@
+import React from 'react';
+import { ButtonGroupOrientation, ButtonGroupAlignment, ButtonGroupProps } from '.';
+import { ButtonColor, ButtonVariant, ButtonSize, ButtonTextTransform } from '../Button';
+declare const _default: {
+    component: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+    title: string;
+    argTypes: {
+        noSpace: {
+            control: {
+                type: string;
+            };
+        };
+        alignment: {
+            control: {
+                type: string;
+                options: typeof ButtonGroupAlignment;
+            };
+        };
+        orientation: {
+            control: {
+                type: string;
+                options: typeof ButtonGroupOrientation;
+            };
+        };
+        color: {
+            control: {
+                type: string;
+                options: typeof ButtonColor;
+            };
+        };
+        size: {
+            control: {
+                type: string;
+                options: typeof ButtonSize;
+            };
+        };
+        variant: {
+            control: {
+                type: string;
+                options: typeof ButtonVariant;
+            };
+        };
+        textTransform: {
+            control: {
+                type: string;
+                options: typeof ButtonTextTransform;
+            };
+        };
+        isInverse: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, ButtonGroupProps>;
+export declare const SmallBreakpoint: {
+    (args: any): JSX.Element;
+    args: {
+        orientation: ButtonGroupOrientation;
+        alignment: ButtonGroupAlignment;
+        color?: ButtonColor;
+        variant?: ButtonVariant;
+        size?: ButtonSize;
+        noSpace?: boolean;
+        isInverse?: boolean;
+        testId?: string;
+        textTransform?: ButtonTextTransform;
+        theme?: import("../..").ThemeInterface;
+        defaultChecked?: boolean;
+        defaultValue?: string | number | readonly string[];
+        suppressContentEditableWarning?: boolean;
+        suppressHydrationWarning?: boolean;
+        accessKey?: string;
+        className?: string;
+        contentEditable?: boolean | "inherit" | "true" | "false";
+        contextMenu?: string;
+        dir?: string;
+        draggable?: boolean | "true" | "false";
+        hidden?: boolean;
+        id?: string;
+        lang?: string;
+        placeholder?: string;
+        slot?: string;
+        spellCheck?: boolean | "true" | "false";
+        style?: React.CSSProperties;
+        tabIndex?: number;
+        title?: string;
+        translate?: "yes" | "no";
+        radioGroup?: string;
+        role?: React.AriaRole;
+        about?: string;
+        datatype?: string;
+        inlist?: any;
+        prefix?: string;
+        property?: string;
+        resource?: string;
+        typeof?: string;
+        vocab?: string;
+        autoCapitalize?: string;
+        autoCorrect?: string;
+        autoSave?: string;
+        itemProp?: string;
+        itemScope?: boolean;
+        itemType?: string;
+        itemID?: string;
+        itemRef?: string;
+        results?: number;
+        security?: string;
+        unselectable?: "on" | "off";
+        inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal";
+        is?: string;
+        'aria-activedescendant'?: string;
+        'aria-atomic'?: boolean | "true" | "false";
+        'aria-autocomplete'?: "none" | "list" | "inline" | "both";
+        'aria-busy'?: boolean | "true" | "false";
+        'aria-checked'?: boolean | "true" | "false" | "mixed";
+        'aria-colcount'?: number;
+        'aria-colindex'?: number;
+        'aria-colspan'?: number;
+        'aria-controls'?: string;
+        'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date";
+        'aria-describedby'?: string;
+        'aria-details'?: string;
+        'aria-disabled'?: boolean | "true" | "false";
+        'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup";
+        'aria-errormessage'?: string;
+        'aria-expanded'?: boolean | "true" | "false";
+        'aria-flowto'?: string;
+        'aria-grabbed'?: boolean | "true" | "false";
+        'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "true" | "false" | "listbox" | "tree";
+        'aria-hidden'?: boolean | "true" | "false";
+        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
+        'aria-keyshortcuts'?: string;
+        'aria-label'?: string;
+        'aria-labelledby'?: string;
+        'aria-level'?: number;
+        'aria-live'?: "off" | "assertive" | "polite";
+        'aria-modal'?: boolean | "true" | "false";
+        'aria-multiline'?: boolean | "true" | "false";
+        'aria-multiselectable'?: boolean | "true" | "false";
+        'aria-orientation'?: "horizontal" | "vertical";
+        'aria-owns'?: string;
+        'aria-placeholder'?: string;
+        'aria-posinset'?: number;
+        'aria-pressed'?: boolean | "true" | "false" | "mixed";
+        'aria-readonly'?: boolean | "true" | "false";
+        'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+        'aria-required'?: boolean | "true" | "false";
+        'aria-roledescription'?: string;
+        'aria-rowcount'?: number;
+        'aria-rowindex'?: number;
+        'aria-rowspan'?: number;
+        'aria-selected'?: boolean | "true" | "false";
+        'aria-setsize'?: number;
+        'aria-sort'?: "none" | "other" | "ascending" | "descending";
+        'aria-valuemax'?: number;
+        'aria-valuemin'?: number;
+        'aria-valuenow'?: number;
+        'aria-valuetext'?: string;
+        children?: React.ReactNode;
+        dangerouslySetInnerHTML?: {
+            __html: string;
+        };
+        onCopy?: (event: React.ClipboardEvent<HTMLDivElement>) => void;
+        onCopyCapture?: (event: React.ClipboardEvent<HTMLDivElement>) => void;
+        onCut?: (event: React.ClipboardEvent<HTMLDivElement>) => void;
+        onCutCapture?: (event: React.ClipboardEvent<HTMLDivElement>) => void;
+        onPaste?: (event: React.ClipboardEvent<HTMLDivElement>) => void;
+        onPasteCapture?: (event: React.ClipboardEvent<HTMLDivElement>) => void;
+        onCompositionEnd?: (event: React.CompositionEvent<HTMLDivElement>) => void;
+        onCompositionEndCapture?: (event: React.CompositionEvent<HTMLDivElement>) => void;
+        onCompositionStart?: (event: React.CompositionEvent<HTMLDivElement>) => void;
+        onCompositionStartCapture?: (event: React.CompositionEvent<HTMLDivElement>) => void;
+        onCompositionUpdate?: (event: React.CompositionEvent<HTMLDivElement>) => void;
+        onCompositionUpdateCapture?: (event: React.CompositionEvent<HTMLDivElement>) => void;
+        onFocus?: (event: React.FocusEvent<HTMLDivElement, Element>) => void;
+        onFocusCapture?: (event: React.FocusEvent<HTMLDivElement, Element>) => void;
+        onBlur?: (event: React.FocusEvent<HTMLDivElement, Element>) => void;
+        onBlurCapture?: (event: React.FocusEvent<HTMLDivElement, Element>) => void;
+        onChange?: (event: React.FormEvent<HTMLDivElement>) => void;
+        onChangeCapture?: (event: React.FormEvent<HTMLDivElement>) => void;
+        onBeforeInput?: (event: React.FormEvent<HTMLDivElement>) => void;
+        onBeforeInputCapture?: (event: React.FormEvent<HTMLDivElement>) => void;
+        onInput?: (event: React.FormEvent<HTMLDivElement>) => void;
+        onInputCapture?: (event: React.FormEvent<HTMLDivElement>) => void;
+        onReset?: (event: React.FormEvent<HTMLDivElement>) => void;
+        onResetCapture?: (event: React.FormEvent<HTMLDivElement>) => void;
+        onSubmit?: (event: React.FormEvent<HTMLDivElement>) => void;
+        onSubmitCapture?: (event: React.FormEvent<HTMLDivElement>) => void;
+        onInvalid?: (event: React.FormEvent<HTMLDivElement>) => void;
+        onInvalidCapture?: (event: React.FormEvent<HTMLDivElement>) => void;
+        onLoad?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onLoadCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onError?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onErrorCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+        onKeyDownCapture?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+        onKeyPress?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+        onKeyPressCapture?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+        onKeyUp?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+        onKeyUpCapture?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+        onAbort?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onAbortCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onCanPlay?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onCanPlayCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onCanPlayThrough?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onCanPlayThroughCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onDurationChange?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onDurationChangeCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onEmptied?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onEmptiedCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onEncrypted?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onEncryptedCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onEnded?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onEndedCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onLoadedData?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onLoadedDataCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onLoadedMetadata?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onLoadedMetadataCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onLoadStart?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onLoadStartCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onPause?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onPauseCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onPlay?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onPlayCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onPlaying?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onPlayingCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onProgress?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onProgressCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onRateChange?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onRateChangeCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onSeeked?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onSeekedCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onSeeking?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onSeekingCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onStalled?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onStalledCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onSuspend?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onSuspendCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onTimeUpdate?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onTimeUpdateCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onVolumeChange?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onVolumeChangeCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onWaiting?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onWaitingCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onAuxClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onAuxClickCapture?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onClickCapture?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onContextMenu?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onContextMenuCapture?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onDoubleClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onDoubleClickCapture?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onDrag?: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDragCapture?: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDragEnd?: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDragEndCapture?: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDragEnter?: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDragEnterCapture?: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDragExit?: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDragExitCapture?: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDragLeave?: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDragLeaveCapture?: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDragOver?: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDragOverCapture?: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDragStart?: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDragStartCapture?: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
+        onDropCapture?: (event: React.DragEvent<HTMLDivElement>) => void;
+        onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onMouseDownCapture?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onMouseMove?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onMouseMoveCapture?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onMouseOut?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onMouseOutCapture?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onMouseOver?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onMouseOverCapture?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onMouseUp?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onMouseUpCapture?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        onSelect?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onSelectCapture?: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        onTouchCancel?: (event: React.TouchEvent<HTMLDivElement>) => void;
+        onTouchCancelCapture?: (event: React.TouchEvent<HTMLDivElement>) => void;
+        onTouchEnd?: (event: React.TouchEvent<HTMLDivElement>) => void;
+        onTouchEndCapture?: (event: React.TouchEvent<HTMLDivElement>) => void;
+        onTouchMove?: (event: React.TouchEvent<HTMLDivElement>) => void;
+        onTouchMoveCapture?: (event: React.TouchEvent<HTMLDivElement>) => void;
+        onTouchStart?: (event: React.TouchEvent<HTMLDivElement>) => void;
+        onTouchStartCapture?: (event: React.TouchEvent<HTMLDivElement>) => void;
+        onPointerDown?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerDownCapture?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerMove?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerMoveCapture?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerUp?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerUpCapture?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerCancel?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerCancelCapture?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerEnter?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerEnterCapture?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerLeave?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerLeaveCapture?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerOver?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerOverCapture?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerOut?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerOutCapture?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onGotPointerCapture?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onGotPointerCaptureCapture?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onLostPointerCapture?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onLostPointerCaptureCapture?: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onScroll?: (event: React.UIEvent<HTMLDivElement, UIEvent>) => void;
+        onScrollCapture?: (event: React.UIEvent<HTMLDivElement, UIEvent>) => void;
+        onWheel?: (event: React.WheelEvent<HTMLDivElement>) => void;
+        onWheelCapture?: (event: React.WheelEvent<HTMLDivElement>) => void;
+        onAnimationStart?: (event: React.AnimationEvent<HTMLDivElement>) => void;
+        onAnimationStartCapture?: (event: React.AnimationEvent<HTMLDivElement>) => void;
+        onAnimationEnd?: (event: React.AnimationEvent<HTMLDivElement>) => void;
+        onAnimationEndCapture?: (event: React.AnimationEvent<HTMLDivElement>) => void;
+        onAnimationIteration?: (event: React.AnimationEvent<HTMLDivElement>) => void;
+        onAnimationIterationCapture?: (event: React.AnimationEvent<HTMLDivElement>) => void;
+        onTransitionEnd?: (event: React.TransitionEvent<HTMLDivElement>) => void;
+        onTransitionEndCapture?: (event: React.TransitionEvent<HTMLDivElement>) => void;
+        css?: import("@emotion/core").InterpolationWithTheme<any>;
+    };
+};
+export declare const WithDropdowns: (args: any) => JSX.Element;
+export declare const WithSplitButton: (args: any) => JSX.Element;