@canlooks/can-ui 0.0.20 → 0.0.22

package/dist/esm/components/bottomNavigation/bottomNavigation.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, cloneElement, forwardRef, isValidElement, memo } from 'react';
+import { Children, cloneElement, isValidElement, memo } from 'react';
 import { classes, style } from './bottomNavigation.style';
 import { classnames, isUnset, useControlled } from '../../utils';
 import { BottomNavigationItem } from './bottomNavigationItem';
-export const BottomNavigation = memo(forwardRef(({ items, showLabelInactive, primaryKey = 'value', labelKey = 'label', defaultValue = 'children', value, onChange, ...props }, ref) => {
+export const BottomNavigation = memo(({ items, showLabelInactive, primaryKey = 'value', labelKey = 'label', defaultValue = 'children', value, onChange, ...props }) => {
     const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
     const renderItems = () => {
         if (items) {
@@ -17,17 +17,19 @@ export const BottomNavigation = memo(forwardRef(({ items, showLabelInactive, pri
         }
         showLabelInactive ??= Children.count(props.children) <= 3;
         return Children.map(props.children, c => {
-            return isValidElement(c)
-                ? cloneElement(c, {
-                    showLabelInactive: c.props.showLabelInactive ?? showLabelInactive,
-                    active: !isUnset(c.props.value) && innerValue.current === c.props.value,
+            if (isValidElement(c)) {
+                const { props } = c;
+                return cloneElement(c, {
+                    showLabelInactive: props.showLabelInactive ?? showLabelInactive,
+                    active: !isUnset(props.value) && innerValue.current === props.value,
                     onClick: e => {
-                        c.props.onClick?.(e);
-                        setInnerValue(c.props.value);
+                        props.onClick?.(e);
+                        setInnerValue(props.value);
                     },
-                })
-                : c;
+                });
+            }
+            return c;
         });
     };
-    return (_jsx("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), children: renderItems() }));
-}));
+    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), children: renderItems() }));
+});

package/dist/esm/components/bottomNavigation/bottomNavigation.style.d.ts

@@ -1,6 +1,6 @@
 export declare const classes: {
-    label: string;
     icon: string;
+    label: string;
     item: string;
 } & {
     root: string;

package/dist/esm/components/bottomNavigation/bottomNavigation.style.js

@@ -1,16 +1,16 @@
 import { css } from '@emotion/react';
 import { defineClasses, defineCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('botton-navigation', [
+export const classes = defineClasses('bottom-navigation', [
     'item',
     'icon',
     'label'
 ]);
-export const style = defineCss(({ mode, background, text, easing, colors }) => {
-    const primaryColor = Color(colors.primary);
+export const style = defineCss(({ background, text, easing, colors }) => {
+    const primaryColor = Color(colors.primary.main);
     return css `
         height: 56px;
-        background-color: ${background.card};
+        background-color: ${background.content};
         display: flex;
         position: absolute;
         inset: auto 0 0;
@@ -49,7 +49,7 @@ export const style = defineCss(({ mode, background, text, easing, colors }) => {
             }
             
             &[data-active=true] {
-                color: ${colors.primary};
+                color: ${colors.primary.main};
             }
 
             .${classes.icon} {

package/dist/esm/components/bottomNavigation/bottomNavigationItem.d.ts

@@ -7,4 +7,4 @@ export interface BottomNavigationItemProps extends DIVProps {
     showLabelInactive?: boolean;
     active?: boolean;
 }
-export declare const BottomNavigationItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<BottomNavigationItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const BottomNavigationItem: import("react").MemoExoticComponent<({ value, icon, label, showLabelInactive, active, ...props }: BottomNavigationItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/bottomNavigation/bottomNavigationItem.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classnames } from '../../utils';
 import { classes } from './bottomNavigation.style';
-export const BottomNavigationItem = memo(forwardRef(({ value, icon, label, showLabelInactive = true, active, ...props }, ref) => {
-    return (_jsxs("div", { ...props, ref: ref, className: classnames(classes.item, props.className), "data-active": active, "data-show-label-inactive": showLabelInactive, children: [!!icon &&
+export const BottomNavigationItem = memo(({ value, icon, label, showLabelInactive = true, active, ...props }) => {
+    return (_jsxs("div", { ...props, className: classnames(classes.item, props.className), "data-active": active, "data-show-label-inactive": showLabelInactive, children: [!!icon &&
                 _jsx("div", { className: classes.icon, children: icon }), !!label &&
                 _jsx("div", { className: classes.label, children: label })] }));
-}));
+});

package/dist/esm/components/boundary/boundary.d.ts

@@ -13,6 +13,7 @@ type BoundaryContext<Data = any, Params = any> = {
     data?: Data | null;
     reload?(...params: Params[]): void;
 };
+declare const BoundaryContext: import("react").Context<BoundaryContext<any, any>>;
 export declare function useBoundaryContext<Data = any, Params = any>(): BoundaryContext<Data, Params>;
 type BoundaryState<Data = any> = {
     error: any | null;
@@ -22,7 +23,7 @@ type BoundaryState<Data = any> = {
     data: Data | null;
 };
 export declare class Boundary<Data = any, Params = any, Args = any> extends Component<BoundaryProps<Data, Params, Args>, BoundaryState<Data>> {
-    static ErrorBoundary: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("./errorBoundary").ErrorBoundaryProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+    static ErrorBoundary: import("react").MemoExoticComponent<({ error, reload, ...props }: import("./errorBoundary").ErrorBoundaryProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
     static getDerivedStateFromError(error: any): {
         error: any;
     };
@@ -35,6 +36,6 @@ export declare class Boundary<Data = any, Params = any, Args = any> extends Comp
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
     private renderError;
     private renderChildren;
-    render(): string | number | boolean | Iterable<ReactNode> | import("@emotion/react/jsx-runtime").JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("@emotion/react/jsx-runtime").JSX.Element | null | undefined;
 }
 export {};

package/dist/esm/components/boundary/boundary.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Component, cloneElement, createContext, isValidElement, useContext } from 'react';
 import { ErrorBoundary } from './errorBoundary';
-const boundaryContext = createContext({});
+const BoundaryContext = createContext({});
 export function useBoundaryContext() {
-    return useContext(boundaryContext);
+    return useContext(BoundaryContext);
 }
 export class Boundary extends Component {
     static ErrorBoundary = ErrorBoundary;
@@ -89,7 +89,7 @@ export class Boundary extends Component {
             ? loadingComponent
             : error
                 ? this.renderError()
-                : _jsx(boundaryContext.Provider, { value: {
+                : _jsx(BoundaryContext, { value: {
                         data: this.state.data,
                         reload: this.reload
                     }, children: this.renderChildren() });

package/dist/esm/components/boundary/errorBoundary.d.ts

@@ -3,4 +3,4 @@ export interface ErrorBoundaryProps extends PlaceholderProps {
     error?: any | null;
     reload?(): void;
 }
-export declare const ErrorBoundary: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<ErrorBoundaryProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const ErrorBoundary: import("react").MemoExoticComponent<({ error, reload, ...props }: ErrorBoundaryProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/boundary/errorBoundary.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classnames } from '../../utils';
 import { classes, style } from './errorBoundary.style';
 import { Placeholder } from '../placeholder';
 import { Button } from '../button';
 import { ReloadOutlined } from '@ant-design/icons';
-export const ErrorBoundary = memo(forwardRef(({ error, reload, ...props }, ref) => {
+export const ErrorBoundary = memo(({ error, reload, ...props }) => {
     const renderDescriptions = () => {
         if (error instanceof Error) {
             return error.stack;
@@ -17,5 +17,5 @@ export const ErrorBoundary = memo(forwardRef(({ error, reload, ...props }, ref)
             return error.toString();
         }
     };
-    return (_jsx(Placeholder, { status: "error", description: renderDescriptions(), descriptionComponent: "pre", extra: _jsx(Button, { variant: "outlined", color: "text", prefix: _jsx(ReloadOutlined, {}), onClick: reload, children: "\u91CD\u65B0\u52A0\u8F7D" }), ...props, ref: ref, css: style, className: classnames(classes.root, props.className) }));
-}));
+    return (_jsx(Placeholder, { status: "error", description: renderDescriptions(), descriptionComponent: "pre", extra: _jsx(Button, { variant: "outlined", color: "text", prefix: _jsx(ReloadOutlined, {}), onClick: reload, children: "\u91CD\u65B0\u52A0\u8F7D" }), ...props, css: style, className: classnames(classes.root, props.className) }));
+});

package/dist/esm/components/boundary/errorBoundary.style.js

@@ -8,7 +8,7 @@ export const style = defineCss(({ spacing, background, borderRadius }) => css `
 
     .${placeholderClasses.description} {
         width: 100%;
-        background-color: ${background.card};
+        background-color: ${background.content};
         border-radius: ${borderRadius}px;
         padding: ${spacing[8]}px;
         margin-top: ${spacing[8]}px;

package/dist/esm/components/breadcrumb/breadcrumb.d.ts

@@ -2,7 +2,9 @@ import { ReactElement, ReactNode } from 'react';
 import { Button, ButtonProps } from '../button';
 import { DIVProps, Obj } from '../../../types';
 export interface BreadcrumbItemProps extends ButtonProps, Obj {
-    /** 对应button的prefix */
+    /**
+     * @alias ButtonProps.prefix
+     */
     icon?: ReactNode;
     label?: ReactNode;
 }

package/dist/esm/components/breadcrumb/breadcrumb.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, cloneElement, forwardRef, isValidElement, memo } from 'react';
+import { Children, cloneElement, isValidElement, memo } from 'react';
 import { classnames } from '../../utils';
 import { classes, style } from './breadcrumb.style';
 import { Button } from '../button';
-import { useTheme } from '../app';
-export const Breadcrumb = memo(forwardRef(({ separator = '/', readOnly, items, ...props }, ref) => {
+import { useTheme } from '../theme';
+export const Breadcrumb = memo(({ separator = '/', readOnly, items, ...props }) => {
     const { text } = useTheme();
     const renderItems = () => {
         if (items) {
@@ -21,21 +21,23 @@ export const Breadcrumb = memo(forwardRef(({ separator = '/', readOnly, items, .
         const childrenArr = Children.toArray(props.children);
         return childrenArr.flatMap((c, i) => {
             const isLast = i === childrenArr.length - 1;
-            return [
-                isValidElement(c)
-                    ? cloneElement(c, {
-                        variant: c.props.variant ?? 'plain',
-                        color: c.props.color ?? (isLast ? text.primary : text.disabled),
-                        readOnly: c.props.readOnly ?? (isLast || readOnly),
-                        prefix: c.props.prefix ?? c.props.icon,
-                    })
-                    : c,
-                ...isLast ? [] : [
-                    _jsx("span", { className: classes.separator, children: separator }, `${classes.separator}_${i}`)
-                ]
-            ];
+            const ret = [];
+            if (isValidElement(c)) {
+                const { props } = c;
+                ret.push(cloneElement(c, {
+                    variant: props.variant ?? 'plain',
+                    color: props.color ?? (isLast ? text.primary : text.disabled),
+                    readOnly: props.readOnly ?? (isLast || readOnly),
+                    prefix: props.prefix ?? props.icon,
+                }));
+            }
+            else {
+                ret.push(c);
+            }
+            !isLast && ret.push(_jsx("span", { className: classes.separator, children: separator }, `${classes.separator}_${i}`));
+            return ret;
         });
     };
-    return (_jsx("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), children: renderItems() }));
-}));
+    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), children: renderItems() }));
+});
 Breadcrumb.Item = Button;

package/dist/esm/components/bubble/bubble.d.ts

@@ -2,4 +2,4 @@ import { PopperProps } from '../popper';
 export interface BubbleProps extends PopperProps {
     showArrow?: boolean;
 }
-export declare const Bubble: import("react").ForwardRefExoticComponent<Omit<BubbleProps, "ref"> & import("react").RefAttributes<unknown>>;
+export declare function Bubble({ showArrow, ...props }: BubbleProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/bubble/bubble.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
 import { Popper } from '../popper';
 import { classes, style } from './bubble.style';
 import { classnames } from '../../utils';
-import { useTheme } from '../app';
-export const Bubble = forwardRef(({ showArrow = true, ...props }, ref) => {
+import { useTheme } from '../theme';
+export function Bubble({ showArrow = true, ...props }) {
     const { spacing } = useTheme();
     props.autoClose ??= true;
     props.offset ??= showArrow ? spacing[3] : spacing[2];
-    return (_jsx(Popper, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), content: _jsx("div", { className: classes.content, "data-show-arrow": showArrow, children: props.content }) }));
-});
+    return (_jsx(Popper, { ...props, css: style, className: classnames(classes.root, props.className), content: _jsx("div", { className: classes.content, "data-show-arrow": showArrow, children: props.content }) }));
+}

package/dist/esm/components/bubble/bubble.style.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { defineClasses, defineCss } from '../../utils';
-import { zIndex } from '../app';
 import { popperArrowStyle } from '../popper/popper.style';
+import { zIndex } from '../theme';
 export const classes = defineClasses('bubble', [
     'content'
 ]);
@@ -9,11 +9,11 @@ export const style = defineCss(({ background, boxShadow, borderRadius }) => css
     z-index: ${zIndex.dropdown};
 
     .${classes.content} {
-        background-color: ${background.card};
+        background-color: ${background.content};
         box-shadow: ${boxShadow[0]};
         border-radius: ${borderRadius}px;
         padding: 4px;
     }
 
-    ${popperArrowStyle(background.card)}
+    ${popperArrowStyle(background.content)}
 `);

package/dist/esm/components/bubbleConfirm/bubbleConfirm.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { PopperProps } from '../popper';
 export interface BubbleConfirmProps extends Omit<PopperProps, 'title'> {
     icon?: ReactNode;
@@ -8,4 +8,4 @@ export interface BubbleConfirmProps extends Omit<PopperProps, 'title'> {
     loading?: boolean;
     onConfirm?(e: React.MouseEvent<HTMLButtonElement>): any;
 }
-export declare const BubbleConfirm: import("react").ForwardRefExoticComponent<Omit<BubbleConfirmProps, "ref"> & import("react").RefAttributes<unknown>>;
+export declare function BubbleConfirm({ icon, title, footer, showArrow, offset, loading, onConfirm, defaultOpen, open, onOpenChange, ...props }: BubbleConfirmProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/bubbleConfirm/bubbleConfirm.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
 import { Popper } from '../popper';
 import { classes, style } from './bubbleConfirm.style';
 import { classnames, useControlled, useLoading } from '../../utils';
 import { QuestionCircleFilled } from '@ant-design/icons';
 import { Button } from '../button';
-import { useTheme } from '../app';
-export const BubbleConfirm = forwardRef(({ icon = _jsx(QuestionCircleFilled, {}), title, footer, showArrow = true, offset, loading = false, onConfirm, defaultOpen = false, open, onOpenChange, ...props }, ref) => {
+import { useTheme } from '../theme';
+export function BubbleConfirm({ icon = _jsx(QuestionCircleFilled, {}), title, footer, showArrow = true, offset, loading = false, onConfirm, defaultOpen = false, open, onOpenChange, ...props }) {
     const { spacing } = useTheme();
     offset ??= showArrow ? spacing[3] : spacing[2];
     const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
@@ -18,6 +17,6 @@ export const BubbleConfirm = forwardRef(({ icon = _jsx(QuestionCircleFilled, {})
         await onConfirm?.(e);
         _setInnerOpen(false);
     }, loading);
-    return (_jsx(Popper, { trigger: "click", ...props, ref: ref, css: style, className: classnames(classes.root, props.className), offset: offset, open: innerOpen.current, onOpenChange: setInnerOpen, content: _jsxs("div", { className: classes.bubble, "data-show-arrow": showArrow, children: [_jsx("div", { className: classes.icon, children: icon }), _jsxs("div", { className: classes.info, children: [_jsx("div", { className: classes.title, children: title }), _jsx("div", { className: classes.content, children: props.content }), _jsx("div", { className: classes.footer, children: footer ??
+    return (_jsx(Popper, { trigger: "click", ...props, css: style, className: classnames(classes.root, props.className), offset: offset, open: innerOpen.current, onOpenChange: setInnerOpen, content: _jsxs("div", { className: classes.bubble, "data-show-arrow": showArrow, children: [_jsx("div", { className: classes.icon, children: icon }), _jsxs("div", { className: classes.info, children: [_jsx("div", { className: classes.title, children: title }), _jsx("div", { className: classes.content, children: props.content }), _jsx("div", { className: classes.footer, children: footer ??
                                 _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", size: "small", onClick: () => setInnerOpen(false), children: "\u53D6\u6D88" }), _jsx(Button, { size: "small", loading: innerLoading.current, onClick: confirmHandler, children: "\u786E\u5B9A" })] }) })] })] }) }));
-});
+}

package/dist/esm/components/bubbleConfirm/bubbleConfirm.style.d.ts

@@ -1,9 +1,9 @@
 export declare const classes: {
     info: string;
-    title: string;
     content: string;
-    footer: string;
     icon: string;
+    title: string;
+    footer: string;
     bubble: string;
 } & {
     root: string;

package/dist/esm/components/bubbleConfirm/bubbleConfirm.style.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { defineClasses, defineCss } from '../../utils';
-import { zIndex } from '../app';
 import { popperArrowStyle } from '../popper/popper.style';
+import { zIndex } from '../theme';
 export const classes = defineClasses('bubble-confirm', [
     'bubble',
     'icon',
@@ -18,13 +18,13 @@ export const style = defineCss(({ boxShadow, borderRadius, background, spacing,
     .${classes.bubble} {
         border-radius: ${borderRadius}px;
         box-shadow: ${boxShadow[0]};
-        background-color: ${background.card};
+        background-color: ${background.content};
         display: flex;
         gap: ${spacing[4]}px;
         padding: ${spacing[5]}px;
 
         .${classes.icon} {
-            color: ${colors.warning};
+            color: ${colors.warning.main};
             font-size: 1.2em;
         }
 
@@ -54,5 +54,5 @@ export const style = defineCss(({ boxShadow, borderRadius, background, spacing,
         }
     }
 
-    ${popperArrowStyle(background.card)}
+    ${popperArrowStyle(background.content)}
 `);

package/dist/esm/components/button/button.d.ts

@@ -1,28 +1,26 @@
 import React, { ReactNode, Ref } from 'react';
 import { ColorPropsValue, Size } from '../../../types';
-export interface ButtonProps extends Omit<JSX.IntrinsicElements['button'], 'ref' | 'prefix'> {
+export interface ButtonProps extends Omit<React.JSX.IntrinsicElements['button'], 'ref' | 'prefix'> {
     ref?: Ref<HTMLButtonElement>;
     color?: ColorPropsValue;
-    /** @default "square" */
+    /** 默认为`"square"` */
     shape?: 'square' | 'circular' | 'rounded';
     size?: Size;
-    /** @default "filled" */
-    variant?: 'filled' | 'outlined' | 'dashed' | 'ghost' | 'text' | 'plain';
-    /** @default "horizontal" */
+    /** 默认为`"filled"` */
+    variant?: 'flatted' | 'filled' | 'outlined' | 'dashed' | 'ghost' | 'text' | 'plain';
+    /** 默认为`"horizontal"` */
     orientation?: 'horizontal' | 'vertical';
     prefix?: ReactNode;
     suffix?: ReactNode;
     loading?: boolean;
     readOnly?: boolean;
     /**
-     * prefix字段的别名
-     * @alias {@link prefix}
+     * @alias {@link ButtonProps.prefix}
      */
     icon?: ReactNode;
     /**
-     * children字段的别名
-     * @alias {@link children}
+     * @alias {@link ButtonProps.children}
      */
     label?: ReactNode;
 }
-export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare function Button({ color, shape, size, variant, orientation, prefix, suffix, loading, readOnly, icon, label, ...props }: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/button/button.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 import { useTouchRipple } from '../../utils';
 import { classnames } from '../../utils';
-import { LoadingIndicator } from '../loadingIndicator/loadingIndicator';
+import { LoadingIndicator } from '../loadingIndicator';
 import { classes, useStyle } from './button.style';
 import { Collapse } from '../transitionBase';
-export const Button = forwardRef(({ color = 'primary', shape = 'square', size, variant = 'filled', orientation = 'horizontal', prefix, suffix, loading = false, readOnly, icon, label, ...props }, ref) => {
+export function Button({ color = 'primary', shape = 'square', size, variant = 'filled', orientation = 'horizontal', prefix, suffix, loading = false, readOnly, icon, label, ...props }) {
     const theme = useTheme();
     size ??= theme.size;
     const showRipple = useTouchRipple(color);
@@ -15,7 +14,7 @@ export const Button = forwardRef(({ color = 'primary', shape = 'square', size, v
         if (!props.disabled
             && !loading
             && !readOnly
-            && { filled: true, outlined: true, dashed: true }[variant]) {
+            && { flatted: true, filled: true, outlined: true, dashed: true }[variant]) {
             showRipple(e.currentTarget);
         }
     };
@@ -24,11 +23,11 @@ export const Button = forwardRef(({ color = 'primary', shape = 'square', size, v
     };
     const actualPrefix = prefix ?? icon;
     const actualChildren = label ?? props.children;
-    return (_jsxs("button", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), onPointerUp: onPointerUp, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-shape": shape, "data-size": size, "data-loading": loading, "data-read-only": readOnly, children: [loading
+    return (_jsxs("button", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), onPointerUp: onPointerUp, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-shape": shape, "data-size": size, "data-loading": loading, "data-read-only": readOnly, children: [loading
                 ? actualPrefix
                     ? _jsx(LoadingIndicator, { color: variant === 'filled' ? '#ffffff' : color })
                     : _jsx(Collapse, { orientation: "horizontal", in: true, children: _jsx(LoadingIndicator, { color: variant === 'filled' ? '#ffffff' : color }) })
                 : actualPrefix, !!actualChildren &&
                 _jsx("div", { className: classes.content, children: actualChildren }), !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix })] }));
-});
+}

package/dist/esm/components/button/button.style.b.d.ts

@@ -0,0 +1,11 @@
+import { ColorPropsValue } from '../../../types';
+export declare const classes: {
+    content: string;
+    prefix: string;
+    suffix: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color }: {
+    color: ColorPropsValue;
+}): import("@emotion/react").SerializedStyles;