@atlaskit/button 16.10.2 → 16.12.0

package/dist/types-ts4.5/new-button/variants/shared/xcss.d.ts

@@ -0,0 +1,31 @@
+import { xcss } from '@atlaskit/primitives';
+import { type Appearance, type Spacing } from '../types';
+export declare const heights: {
+    [key in Spacing]: string;
+};
+export type GetXCSSArgs = {
+    appearance: Appearance;
+    spacing: Spacing;
+    isDisabled: boolean;
+    isSelected: boolean;
+    isHighlighted: boolean;
+    isActiveOverSelected: boolean;
+    shouldFitContainer: boolean;
+    hasOverlay: boolean;
+    isIconButton: boolean;
+    hasIconBefore: boolean;
+    hasIconAfter: boolean;
+    /**
+     * If the button is a LinkButton
+     */
+    isLink: boolean;
+    /**
+     * If the button is a SplitButton
+     */
+    isSplit: boolean;
+    /**
+     * If the button is a PrimarySplitButton used in atlassian-navigation
+     */
+    isNavigationSplit: boolean;
+};
+export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, shouldFitContainer, isLink, isSplit, isNavigationSplit, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;

package/dist/types-ts4.5/new-button/variants/types.d.ts

@@ -0,0 +1,79 @@
+import React from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+export type Appearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
+export type Spacing = 'compact' | 'default' | 'none';
+type Combine<First, Second> = Omit<First, keyof Second> & Second;
+export type CommonButtonProps<TagName extends HTMLElement> = {
+    /**
+     * The base styling to apply to the button
+     */
+    appearance?: Appearance;
+    /**
+     * Set the button to autofocus on mount
+     */
+    autoFocus?: boolean;
+    /**
+     * Used to 'overlay' something over a button. This is commonly used to display a loading spinner
+     */
+    overlay?: React.ReactNode;
+    /**
+     * Set if the button is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Change the style to indicate the button is selected
+     */
+    isSelected?: boolean;
+    /**
+     * Handler to be called on blur
+     */
+    onBlur?: React.FocusEventHandler<TagName>;
+    /**
+     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details
+     */
+    onClick?: (e: React.MouseEvent<TagName>, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * Handler to be called on focus
+     */
+    onFocus?: React.FocusEventHandler<TagName>;
+    /**
+     * Set the amount of padding in the button
+     */
+    spacing?: Spacing;
+    /**
+     * Text content to be rendered in the button
+     */
+    children: React.ReactNode;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+     */
+    testId?: string;
+    /**
+     * An optional name used to identify this component to press listeners. E.g. interaction tracing
+     * @see https://hello.atlassian.net/wiki/spaces/UFO/pages/2010358949/UFO+Integration+into+Design+System+components
+     */
+    interactionName?: string;
+    /**
+     * Additional information to be included in the `context` of analytics events that come from button
+     */
+    analyticsContext?: Record<string, any>;
+};
+type SupportedElementAttributes = React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement>;
+export type AdditionalHTMLElementPropsExtender<Props extends SupportedElementAttributes> = Combine<Omit<Props, 'className' | 'style' | 'role' | 'disabled'>, {
+    'data-testid'?: never;
+}>;
+/**
+ * Combines common button props with additional HTML attributes.
+ */
+export type CombinedButtonProps<TagName extends HTMLElement, HTMLAttributes extends SupportedElementAttributes> = Combine<HTMLAttributes, CommonButtonProps<TagName>>;
+/**
+ * Common props for Button `<button>` variants
+ */
+export type CommonButtonVariantProps = CombinedButtonProps<HTMLButtonElement, AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>>;
+/**
+ * Common props for Link `<a>` Button variants
+ */
+export type CommonLinkVariantProps<RouterLinkConfig extends Record<string, any> = never> = {
+    href: string | RouterLinkConfig;
+} & CombinedButtonProps<HTMLAnchorElement, AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>>>;
+export {};

package/dist/types-ts4.5/old-button/button.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BaseProps } from './types';
+export interface ButtonProps extends BaseProps {
+}
+/**
+ * __Button__
+ *
+ * A button triggers an event or action. They let users know what will happen next.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>>;
+export default Button;

package/dist/types-ts4.5/old-button/custom-theme-button/custom-theme-button-types.d.ts

@@ -0,0 +1,22 @@
+import { CSSObject } from '@emotion/react';
+import { ThemeModes } from '@atlaskit/theme/types';
+import { BaseProps } from '../types';
+export type ThemeTokens = {
+    buttonStyles: CSSObject;
+    spinnerStyles: CSSObject;
+};
+export type InteractionState = 'disabled' | 'focusSelected' | 'selected' | 'active' | 'hover' | 'focus' | 'default';
+export type CustomThemeButtonOwnProps = {
+    isLoading?: boolean;
+    /**
+     * Slow + discouraged custom theme API
+     * See custom theme guide for usage details
+     */
+    theme?: (current: (props: ThemeProps) => ThemeTokens, props: ThemeProps) => ThemeTokens;
+};
+export type CustomThemeButtonProps = Omit<BaseProps, 'overlay'> & CustomThemeButtonOwnProps;
+export type ThemeProps = Partial<CustomThemeButtonProps> & {
+    state: InteractionState;
+    iconIsOnlyChild?: boolean;
+    mode?: ThemeModes;
+};

package/dist/types-ts4.5/old-button/custom-theme-button/custom-theme-button.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * __Custom theme button__
+ *
+ * A custom theme button. Avoid using this component. It exists for those already using custom theming, which is hard to use and has performance issues.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
+ */
+declare const CustomThemeButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("../types").BaseProps, "overlay"> & import("./custom-theme-button-types").CustomThemeButtonOwnProps & React.RefAttributes<HTMLElement>>>;
+export default CustomThemeButton;

package/dist/types-ts4.5/old-button/custom-theme-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './custom-theme-button';
+export { default as Theme } from './theme';

package/dist/types-ts4.5/old-button/custom-theme-button/theme.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { CSSObject } from '@emotion/react';
+import { InteractionState, ThemeProps, ThemeTokens } from './custom-theme-button-types';
+export declare function getCustomCss({ appearance, spacing, mode, isSelected, shouldFitContainer, iconIsOnlyChild, isLoading, state, }: ThemeProps): CSSObject;
+export declare function getSpecifiers(styles: CSSObject): CSSObject;
+export declare function defaultThemeFn(current: (values: ThemeProps) => ThemeTokens, values: ThemeProps): ThemeTokens;
+declare const Theme: {
+    Consumer: import("react").ComponentType<{
+        children: (tokens: ThemeTokens) => import("react").ReactNode;
+    } & Partial<import("./custom-theme-button-types").CustomThemeButtonProps> & {
+        state: InteractionState;
+        iconIsOnlyChild?: boolean | undefined;
+        mode?: import("@atlaskit/theme").ThemeModes | undefined;
+    }>;
+    Provider: import("react").ComponentType<{
+        children?: import("react").ReactNode;
+        value?: import("@atlaskit/theme/components").ThemeProp<ThemeTokens, ThemeProps> | undefined;
+    }>;
+    useTheme: (props: ThemeProps) => ThemeTokens;
+};
+export default Theme;

package/dist/types-ts4.5/old-button/loading-button.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BaseProps } from './types';
+export type LoadingButtonOwnProps = {
+    isLoading?: boolean;
+};
+export type LoadingButtonProps = Omit<BaseProps, 'overlay'> & LoadingButtonOwnProps;
+/**
+ * __Loading button__
+ *
+ * A small wrapper around Button that allows you to show an @atlaskit/spinner as an overlay on the button when you set an isLoading prop to true.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples#loading-button)
+ */
+declare const LoadingButton: React.ForwardRefExoticComponent<Omit<BaseProps, "overlay"> & LoadingButtonOwnProps & React.RefAttributes<HTMLElement>>;
+export default LoadingButton;

package/dist/types-ts4.5/old-button/shared/block-events.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default function blockEvents({ isInteractive, }: {
+    isInteractive: boolean;
+}): React.DOMAttributes<HTMLElement>;

package/dist/types-ts4.5/old-button/shared/button-base.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import React from 'react';
+import { CSSObject } from '@emotion/react';
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.AllHTMLAttributes<HTMLElement>, "disabled">, "data-testid" | "data-has-overlay"> & {
+    'data-testid'?: undefined;
+    'data-has-overlay'?: undefined;
+}, keyof import("../types").BaseOwnProps> & import("../types").BaseOwnProps & {
+    buttonCss: CSSObject;
+} & React.RefAttributes<HTMLElement>>;
+export default _default;

package/dist/types-ts4.5/old-button/shared/colors.d.ts

@@ -0,0 +1,23 @@
+import { ThemeModes } from '@atlaskit/theme/types';
+import { Appearance } from '../types';
+export type ColorRule = {
+    [key in ThemeModes]: string;
+};
+export type ColorGroup = {
+    default: ColorRule;
+    hover?: ColorRule;
+    active?: ColorRule;
+    disabled?: ColorRule;
+    selected?: ColorRule;
+    focus?: ColorRule;
+    focusSelected?: ColorRule;
+};
+export type ColorPreset = {
+    [key in Appearance]: ColorGroup;
+};
+type Values = {
+    background: ColorPreset;
+    color: ColorPreset;
+};
+declare const values: Values;
+export default values;

package/dist/types-ts4.5/old-button/shared/css.d.ts

@@ -0,0 +1,22 @@
+import { CSSObject } from '@emotion/react';
+import { ThemeModes } from '@atlaskit/theme/types';
+import { Appearance, Spacing } from '../types';
+export type GetCssArgs = {
+    appearance: Appearance;
+    spacing: Spacing;
+    mode: ThemeModes;
+    isSelected: boolean;
+    shouldFitContainer: boolean;
+    isOnlySingleIcon: boolean;
+};
+export declare function getCss({ appearance, spacing, mode, isSelected, shouldFitContainer, isOnlySingleIcon, }: GetCssArgs): CSSObject;
+export declare function getIconStyle({ spacing }: {
+    spacing: Spacing;
+}): import("@emotion/react").SerializedStyles;
+export declare function getContentStyle({ spacing }: {
+    spacing: Spacing;
+}): import("@emotion/react").SerializedStyles;
+export declare function getFadingCss({ hasOverlay }: {
+    hasOverlay: boolean;
+}): import("@emotion/react").SerializedStyles;
+export declare const overlayCss: CSSObject;

package/dist/types-ts4.5/old-button/shared/get-if-visually-hidden-children.d.ts

@@ -0,0 +1,2 @@
+import { type ReactNode } from 'react';
+export declare const getIfVisuallyHiddenChildren: (children: ReactNode) => boolean | "" | 0 | null | undefined;

package/dist/types-ts4.5/old-button/shared/get-is-only-single-icon.d.ts

@@ -0,0 +1,2 @@
+import { BaseProps } from '../types';
+export default function getIsOnlySingleIcon({ children, iconBefore, iconAfter, }: Pick<BaseProps, 'children' | 'iconBefore' | 'iconAfter'>): boolean;

package/dist/types-ts4.5/old-button/shared/loading-spinner.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { BaseProps } from '../types';
+type LoadingSpinnerProps = Pick<BaseProps, 'appearance' | 'isDisabled' | 'isSelected' | 'spacing'>;
+export default function LoadingSpinner({ appearance, isDisabled, isSelected, spacing, }: LoadingSpinnerProps): JSX.Element;
+export {};

package/dist/types-ts4.5/old-button/types.d.ts

@@ -0,0 +1,94 @@
+import React from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+export type Appearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
+export type Spacing = 'compact' | 'default' | 'none';
+type Combine<First, Second> = Omit<First, keyof Second> & Second;
+export type BaseOwnProps = {
+    /**
+     * The base styling to apply to the button
+     */
+    appearance?: Appearance;
+    /**
+     * Set the button to autofocus on mount
+     */
+    autoFocus?: boolean;
+    /**
+     * Add a classname to the button
+     */
+    className?: string;
+    /**
+     * Used to 'overlay' something over a button. This is commonly used to display a loading spinner
+     */
+    overlay?: React.ReactNode;
+    /**
+     * Provides a url for buttons being used as a link
+     */
+    href?: string;
+    /**
+     * Places an icon within the button, after the button's text
+     */
+    iconAfter?: React.ReactChild;
+    /**
+     * Places an icon within the button, before the button's text
+     */
+    iconBefore?: React.ReactChild;
+    /**
+     * Set if the button is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Change the style to indicate the button is selected
+     */
+    isSelected?: boolean;
+    /**
+     * Handler to be called on blur
+     */
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+    /**
+     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * Handler to be called on focus
+     */
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    /**
+     * Set the amount of padding in the button
+     */
+    spacing?: Spacing;
+    /**
+     * Pass target down to a link within the button component, if a href is provided
+     */
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /**
+     * Pass type down to a button
+     */
+    type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    /**
+     * Option to fit button width to its parent width
+     */
+    shouldFitContainer?: boolean;
+    /**
+     * Text content to be rendered in the button
+     */
+    children?: React.ReactNode;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+     */
+    testId?: string;
+    component?: React.ComponentType<React.AllHTMLAttributes<HTMLElement>> | React.ElementType;
+    /**
+     * An optional name used to identify this component to press listeners. For example, interaction tracing. For more information,
+     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration)
+     */
+    interactionName?: string;
+    /**
+     * Additional information to be included in the `context` of analytics events that come from button
+     */
+    analyticsContext?: Record<string, any>;
+};
+export type BaseProps = Combine<Combine<Omit<React.AllHTMLAttributes<HTMLElement>, 'disabled'>, {
+    'data-testid'?: never;
+    'data-has-overlay'?: never;
+}>, BaseOwnProps>;
+export {};

package/dist/types-ts4.5/utils/appearances.d.ts

@@ -0,0 +1,3 @@
+import { type Appearance } from '../new-button/variants/types';
+declare const appearances: Appearance[];
+export default appearances;

package/dist/types-ts4.5/utils/spacing.d.ts

@@ -0,0 +1,3 @@
+import { type Spacing } from '../new-button/variants/types';
+declare const spacing: Spacing[];
+export default spacing;

package/dist/types-ts4.5/utils/variants.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import Button from '../new-button/variants/default/button';
+import { LinkButtonProps } from '../new-button/variants/default/link';
+import { LinkIconButtonProps } from '../new-button/variants/icon/link';
+export type Variant = {
+    name: string;
+    Component: typeof Button | typeof LinkButtonRender;
+    /**
+     * Expected element rendered as underlying button
+     */
+    elementType: typeof HTMLButtonElement | typeof HTMLAnchorElement;
+};
+declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
+    href?: string | undefined;
+} & React.RefAttributes<HTMLAnchorElement>>;
+export declare const variants: Variant[];
+export default variants;
+export declare const linkButtonVariants: ({
+    name: string;
+    Component: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
+        href?: string | undefined;
+    } & React.RefAttributes<HTMLAnchorElement>>;
+    elementType: {
+        new (): HTMLAnchorElement;
+        prototype: HTMLAnchorElement;
+    };
+} | {
+    name: string;
+    Component: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps<never>, "href" | "icon"> & {
+        href?: string | undefined;
+        icon?: React.ReactChild | undefined;
+    } & React.RefAttributes<HTMLAnchorElement>>;
+    elementType: {
+        new (): HTMLAnchorElement;
+        prototype: HTMLAnchorElement;
+    };
+})[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.10.2",
+  "version": "16.12.0",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -50,10 +50,10 @@
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/interaction-context": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^1.6.0",
+    "@atlaskit/primitives": "^1.8.0",
     "@atlaskit/spinner": "^15.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.25.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@atlaskit/visually-hidden": "^1.2.4",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
@@ -65,6 +65,7 @@
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
+    "@atlaskit/app-provider": "^0.4.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,133 @@
+## API Report File for "@atlaskit/button"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+/// <reference types="react" />
+
+import { ComponentType } from 'react';
+import { CSSObject } from '@emotion/react';
+import { jsx } from '@emotion/react';
+import { default as React_2 } from 'react';
+import { ReactNode } from 'react';
+import { ThemeModes } from '@atlaskit/theme/types';
+import { ThemeModes as ThemeModes_2 } from '@atlaskit/theme';
+import { ThemeProp } from '@atlaskit/theme/components';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+
+// @public (undocumented)
+export type Appearance = 'danger' | 'default' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
+
+// @public (undocumented)
+export type BaseOwnProps = {
+    appearance?: Appearance;
+    autoFocus?: boolean;
+    className?: string;
+    overlay?: React_2.ReactNode;
+    href?: string;
+    iconAfter?: React_2.ReactChild;
+    iconBefore?: React_2.ReactChild;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    onBlur?: React_2.FocusEventHandler<HTMLElement>;
+    onClick?: (e: React_2.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    onFocus?: React_2.FocusEventHandler<HTMLElement>;
+    spacing?: Spacing;
+    target?: React_2.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    type?: React_2.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    shouldFitContainer?: boolean;
+    children?: React_2.ReactNode;
+    testId?: string;
+    component?: React_2.ComponentType<React_2.AllHTMLAttributes<HTMLElement>> | React_2.ElementType;
+    interactionName?: string;
+    analyticsContext?: Record<string, any>;
+};
+
+// @public (undocumented)
+export type BaseProps = Combine<Combine<Omit<React_2.AllHTMLAttributes<HTMLElement>, 'disabled'>, {
+    'data-testid'?: never;
+    'data-has-overlay'?: never;
+}>, BaseOwnProps>;
+
+// @public
+const Button: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLElement>>>;
+export default Button;
+
+// @public (undocumented)
+export function ButtonGroup({ appearance, children, }: ButtonGroupProps): jsx.JSX.Element;
+
+// @public (undocumented)
+type ButtonGroupProps = {
+    appearance?: Appearance;
+    children?: React_2.ReactNode;
+};
+
+// @public (undocumented)
+export interface ButtonProps extends BaseProps {
+}
+
+// @public (undocumented)
+type Combine<First, Second> = Omit<First, keyof Second> & Second;
+
+// @public
+export const CustomThemeButton: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<Omit<BaseProps, "overlay"> & CustomThemeButtonOwnProps & React_2.RefAttributes<HTMLElement>>>;
+
+// @public (undocumented)
+export type CustomThemeButtonOwnProps = {
+    isLoading?: boolean;
+    theme?: (current: (props: ThemeProps) => ThemeTokens, props: ThemeProps) => ThemeTokens;
+};
+
+// @public (undocumented)
+export type CustomThemeButtonProps = Omit<BaseProps, 'overlay'> & CustomThemeButtonOwnProps;
+
+// @public (undocumented)
+export type InteractionState = 'active' | 'default' | 'disabled' | 'focus' | 'focusSelected' | 'hover' | 'selected';
+
+// @public
+export const LoadingButton: React_2.ForwardRefExoticComponent<Omit<BaseProps, "overlay"> & LoadingButtonOwnProps & React_2.RefAttributes<HTMLElement>>;
+
+// @public (undocumented)
+export type LoadingButtonOwnProps = {
+    isLoading?: boolean;
+};
+
+// @public (undocumented)
+export type LoadingButtonProps = Omit<BaseProps, 'overlay'> & LoadingButtonOwnProps;
+
+// @public (undocumented)
+export type Spacing = 'compact' | 'default' | 'none';
+
+// @public (undocumented)
+export const Theme: {
+    Consumer: ComponentType<    {
+    children: (tokens: ThemeTokens) => ReactNode;
+    } & Partial<CustomThemeButtonProps> & {
+    state: InteractionState;
+    iconIsOnlyChild?: boolean | undefined;
+    mode?: ThemeModes_2 | undefined;
+    }>;
+    Provider: ComponentType<    {
+    children?: ReactNode;
+    value?: ThemeProp<ThemeTokens, ThemeProps> | undefined;
+    }>;
+    useTheme: (props: ThemeProps) => ThemeTokens;
+};
+
+// @public (undocumented)
+export type ThemeProps = Partial<CustomThemeButtonProps> & {
+    state: InteractionState;
+    iconIsOnlyChild?: boolean;
+    mode?: ThemeModes;
+};
+
+// @public (undocumented)
+export type ThemeTokens = {
+    buttonStyles: CSSObject;
+    spinnerStyles: CSSObject;
+};
+
+// (No @packageDocumentation comment for this package)
+
+```