@canlooks/can-ui 0.0.1

package/dist/esm/components/badge/badge.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { classes, useStyle } from './badge.style';
+import { classnames } from '../../utils';
+export const Badge = forwardRef(({ color = 'error', placement = 'topRight', variant = 'standard', count = 0, max = 99, showZero, offsetX = 0, offsetY = 0, ...props }, ref) => {
+    const renderedCount = typeof count === 'number'
+        ? Math.min(count, max)
+        : count;
+    const isOverflow = typeof count === 'number' && count > max;
+    const badgeStyle = useMemo(() => {
+        const [, placeA, placeB] = placement.match(/^(top|bottom|left|right)(top|bottom|left|right)?/i);
+        let top = 'auto', bottom = 'auto', left = 'auto', right = 'auto';
+        switch (placeA) {
+            case 'top':
+                top = '0';
+                left = '50%';
+                break;
+            case 'bottom':
+                bottom = '0';
+                left = '50%';
+                break;
+            case 'left':
+                top = '50%';
+                left = '0';
+                break;
+            case 'right':
+                top = '50%';
+                right = '0';
+        }
+        switch (placeB) {
+            case 'Top':
+                top = '0';
+                break;
+            case 'Bottom':
+                top = 'auto';
+                bottom = '0';
+                break;
+            case 'Left':
+                left = '0';
+                break;
+            case 'Right':
+                left = 'auto';
+                right = '0';
+        }
+        return { top, bottom, left, right };
+    }, [placement]);
+    if (typeof offsetX === 'number') {
+        offsetX += 'px';
+    }
+    if (typeof offsetY === 'number') {
+        offsetY += 'px';
+    }
+    return (_jsxs("div", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-variant": variant, "data-zero": !showZero && !renderedCount, children: [!!props.children &&
+                _jsx("div", { className: classes.children, children: props.children }), _jsx("div", { className: classes.badge, style: {
+                    ...badgeStyle,
+                    transform: `translate(${offsetX}, ${offsetY})`
+                }, children: _jsx("div", { className: classes.badgeWrap, children: variant !== 'dot' &&
+                        _jsxs(_Fragment, { children: [renderedCount, isOverflow && '+'] }) }) })] }));
+});

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

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

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

@@ -0,0 +1,66 @@
+import { css } from '@emotion/react';
+import { defineClasses, useColor, useCss } from '../../utils';
+export const classes = defineClasses('badge', [
+    'children',
+    'badge',
+    'badgeWrap'
+]);
+export function useStyle({ color }) {
+    const colorValue = useColor(color);
+    return useCss(({ easing }) => css `
+        display: inline-flex;
+        position: relative;
+
+        .${classes.badge} {
+            .${classes.badgeWrap} {
+                line-height: 1;
+                background-color: ${colorValue};
+                color: #ffffff;
+                border: 1px solid #ffffff;
+                font-size: ${13 / 14}em;
+                top: 0;
+                left: 0;
+                transition: transform .2s ${easing.swing};
+            }
+        }
+
+        &:has(.${classes.children}) {
+            .${classes.badge},
+            .${classes.badgeWrap} {
+                position: absolute;
+            }
+
+            .${classes.badgeWrap} {
+                transform: translate(-50%, -50%);
+            }
+        }
+
+        &[data-variant=standard] {
+            .${classes.badgeWrap} {
+                border-radius: 1000em;
+                padding: 2px 6px 3px;
+            }
+        }
+
+        &[data-variant=dot] {
+            .${classes.badgeWrap} {
+                width: 9px;
+                height: 9px;
+                border-radius: 50%;
+            }
+        }
+
+        &[data-zero=true] {
+            .${classes.badgeWrap} {
+                transform: scale(0);
+                transition: transform .2s ${easing.easeOut};
+            }
+
+            &:has(.${classes.children}) {
+                .${classes.badgeWrap} {
+                    transform: translate(-50%, -50%) scale(0);
+                }
+            }
+        }
+    `, [colorValue]);
+}

package/dist/esm/components/badge/index.d.ts

@@ -0,0 +1 @@
+export * from './badge';

package/dist/esm/components/badge/index.js

@@ -0,0 +1 @@
+export * from './badge';

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

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { DIVProps, Id, Obj } from '../../../types';
+import { BottomNavigationItemProps } from './bottomNavigationItem';
+type BottomNavigationItemType = BottomNavigationItemProps & Obj;
+export interface BottomNavigationProps<I extends BottomNavigationItemType> extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
+    items?: I[];
+    /** 未激活状态下是否显示label，items数量小于等于3时默认为true，否则为false */
+    showLabelInactive?: boolean;
+    /** @default "value" */
+    primaryKey?: keyof I;
+    labelKey?: keyof I;
+    defaultValue?: Id;
+    value?: Id;
+    onChange?(value: Id): void;
+}
+export declare const BottomNavigation: <I extends BottomNavigationItemType>(props: BottomNavigationProps<I>) => ReactElement;
+export {};

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { Children, cloneElement, forwardRef, 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) => {
+    const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
+    const renderItems = () => {
+        if (items) {
+            return items.map((p, i) => {
+                const itemValue = p[primaryKey];
+                return (_jsx(BottomNavigationItem, { value: itemValue, icon: p.icon, label: p[labelKey], showLabelInactive: p.showLabelInactive ?? showLabelInactive ?? items.length <= 3, active: !isUnset(itemValue) && innerValue.current === itemValue, onClick: e => {
+                        p.onClick?.(e);
+                        setInnerValue(itemValue);
+                    } }, p.key ?? itemValue ?? i));
+            });
+        }
+        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,
+                    onClick: e => {
+                        c.props.onClick?.(e);
+                        setInnerValue(c.props.value);
+                    },
+                })
+                : c;
+        });
+    };
+    return (_jsx("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), children: renderItems() }));
+}));

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

@@ -0,0 +1,8 @@
+export declare const classes: {
+    label: string;
+    icon: string;
+    item: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,89 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import Color from 'color';
+export const classes = defineClasses('botton-navigation', [
+    'item',
+    'icon',
+    'label'
+]);
+export const style = defineCss(({ mode, background, text, easing, colors }) => {
+    const primaryColor = Color(colors.primary);
+    return css `
+        height: 56px;
+        background-color: ${background.card};
+        display: flex;
+        position: absolute;
+        inset: auto 0 0;
+
+        .${classes.item} {
+            line-height: 1;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            color: ${text.secondary};
+            transition: background-color .2s ${easing.easeOut};
+            
+            &:hover {
+                &:not([data-active=true]) {
+                    background-color: ${Color(text.primary).alpha(.03).string()};
+                }
+
+                &[data-active=true] {
+                    background-color: ${primaryColor.alpha(.03).string()};
+                }
+            }
+
+            &:active {
+                transition: background-color 0s;
+
+                &:not([data-active=true]) {
+                    background-color: rgba(0, 0, 0, .06);
+                }
+
+                &[data-active=true] {
+                    background-color: ${primaryColor.alpha(.06).string()};
+                }
+            }
+            
+            &[data-active=true] {
+                color: ${colors.primary};
+            }
+
+            .${classes.icon} {
+                display: flex;
+                font-size: ${18 / 14}em;
+            }
+
+            .${classes.label} {
+                transition-property: font-size, transform, height;
+                transition-duration: .2s;
+                transition-timing-function: ${easing.easeOut};
+            }
+
+            &[data-show-label-inactive=true]:not([data-active=true]) {
+                .${classes.label} {
+                    font-size: ${12 / 14}em;
+                }
+            }
+
+            &:not([data-show-label-inactive=true]):not([data-active=true]) {
+                .${classes.label} {
+                    height: 0;
+                    transform: scale(0);
+                }
+            }
+
+            &[data-active=true] {
+                .${classes.label} {
+                    height: 1em;
+                    font-size: 1em;
+                    transform: scale(1);
+                    transition-timing-function: ${easing.bounce};
+                }
+            }
+        }
+    `;
+});

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { DIVProps, Id } from '../../../types';
+export interface BottomNavigationItemProps extends DIVProps {
+    value?: Id;
+    icon?: ReactNode;
+    label?: ReactNode;
+    showLabelInactive?: boolean;
+    active?: boolean;
+}
+export declare const BottomNavigationItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<BottomNavigationItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, 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 &&
+                _jsx("div", { className: classes.icon, children: icon }), !!label &&
+                _jsx("div", { className: classes.label, children: label })] }));
+}));

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

@@ -0,0 +1,2 @@
+export * from './bottomNavigation';
+export * from './bottomNavigationItem';

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

@@ -0,0 +1,2 @@
+export * from './bottomNavigation';
+export * from './bottomNavigationItem';

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

@@ -0,0 +1,40 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+export type BoundaryProps<Data = any, Params = any, Args = any> = {
+    children?: ReactNode | ((data: Data | null, reload: (...params: Params[]) => void) => ReactNode);
+    onError?(error: Error, errorInfo: ErrorInfo): void;
+    renderError?: ReactNode | ((errorProps: {
+        error: any;
+        reload?(...params: Params[]): void;
+    }) => ReactNode);
+    renderLoading?: ReactNode | ((...args: Args[]) => ReactNode);
+    loadData?(passLoadingArgs: (...args: Args[]) => void, ...params: Params[]): Data | Promise<Data>;
+};
+type BoundaryContext<Data = any, Params = any> = {
+    data?: Data | null;
+    reload?(...params: Params[]): void;
+};
+export declare function useBoundaryContext<Data = any, Params = any>(): BoundaryContext<Data, Params>;
+type BoundaryState<Data = any> = {
+    error: any | null;
+    loading: boolean;
+    loadingComponent: ReactNode;
+    progress: number;
+    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 getDerivedStateFromError(error: any): {
+        error: any;
+    };
+    state: BoundaryState<Data>;
+    private passLoadingArgs;
+    private reload;
+    componentDidMount(): Promise<void>;
+    private isUnmounted;
+    componentWillUnmount(): void;
+    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;
+}
+export {};

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

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { Component, cloneElement, createContext, isValidElement, useContext } from 'react';
+import { ErrorBoundary } from './errorBoundary';
+const boundaryContext = createContext({});
+export function useBoundaryContext() {
+    return useContext(boundaryContext);
+}
+export class Boundary extends Component {
+    static ErrorBoundary = ErrorBoundary;
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    state = {
+        error: null,
+        progress: 0,
+        data: null,
+        ...this.props.loadData
+            ? {
+                loading: true,
+                loadingComponent: typeof this.props.renderLoading === 'function'
+                    ? this.props.renderLoading()
+                    : this.props.renderLoading
+            }
+            : {
+                loading: false,
+                loadingComponent: null
+            }
+    };
+    passLoadingArgs = (...args) => {
+        typeof this.props.renderLoading === 'function' && this.setState({
+            loadingComponent: this.props.renderLoading(...args)
+        });
+    };
+    reload = async (...params) => {
+        const { loadData } = this.props;
+        if (loadData) {
+            this.setState({ loading: true });
+            try {
+                const data = await loadData(this.passLoadingArgs, ...params);
+                !this.isUnmounted && this.setState({
+                    loading: false,
+                    data,
+                    error: null
+                });
+            }
+            catch (error) {
+                !this.isUnmounted && this.setState({
+                    loading: false,
+                    data: null,
+                    error
+                });
+                throw error;
+            }
+        }
+        else {
+            this.setState({ error: null });
+        }
+    };
+    async componentDidMount() {
+        await this.reload();
+    }
+    isUnmounted = false;
+    componentWillUnmount() {
+        this.isUnmounted = true;
+    }
+    componentDidCatch(error, errorInfo) {
+        this.props.onError?.(error, errorInfo);
+    }
+    renderError = () => {
+        const errorProps = {
+            error: this.state.error,
+            reload: this.reload
+        };
+        const { renderError } = this.props;
+        return typeof renderError === 'function'
+            ? renderError(errorProps)
+            : isValidElement(renderError)
+                ? cloneElement(renderError, errorProps)
+                : renderError;
+    };
+    renderChildren = () => {
+        return typeof this.props.children === 'function'
+            ? this.props.children(this.state.data, this.reload)
+            : this.props.children;
+    };
+    render() {
+        const { loading, loadingComponent, error } = this.state;
+        return loading
+            ? loadingComponent
+            : error
+                ? this.renderError()
+                : _jsx(boundaryContext.Provider, { value: {
+                        data: this.state.data,
+                        reload: this.reload
+                    }, children: this.renderChildren() });
+    }
+}

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

@@ -0,0 +1,6 @@
+import { PlaceholderProps } from '../placeholder';
+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>>>;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, 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) => {
+    const renderDescriptions = () => {
+        if (error instanceof Error) {
+            return error.stack;
+        }
+        const errorType = typeof error;
+        if (errorType === 'string'
+            || errorType === 'number'
+            || errorType === 'boolean') {
+            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) }));
+}));

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

@@ -0,0 +1,4 @@
+export declare const classes: {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,17 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { classes as placeholderClasses } from '../placeholder/placeholder.style';
+export const classes = defineClasses('error-boundary');
+export const style = defineCss(({ spacing, background, borderRadius }) => css `
+    justify-content: flex-start;
+    padding: ${spacing[8]}px;
+
+    .${placeholderClasses.description} {
+        width: 100%;
+        background-color: ${background.card};
+        border-radius: ${borderRadius}px;
+        padding: ${spacing[8]}px;
+        margin-top: ${spacing[8]}px;
+        overflow: auto;
+    }
+`);

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

@@ -0,0 +1,2 @@
+export * from './errorBoundary';
+export * from './boundary';

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

@@ -0,0 +1,2 @@
+export * from './errorBoundary';
+export * from './boundary';

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

@@ -0,0 +1,17 @@
+import { ReactElement, ReactNode } from 'react';
+import { Button, ButtonProps } from '../button';
+import { DIVProps, Obj } from '../../../types';
+export interface BreadcrumbItemProps extends ButtonProps, Obj {
+    /** 对应button的prefix */
+    icon?: ReactNode;
+    label?: ReactNode;
+}
+export interface BreadcrumbProps extends DIVProps {
+    separator?: ReactNode;
+    readOnly?: boolean;
+    items?: BreadcrumbItemProps[];
+}
+export declare const Breadcrumb: {
+    (props: BreadcrumbProps): ReactElement;
+    Item: typeof Button;
+};

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { Children, cloneElement, forwardRef, 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) => {
+    const { text } = useTheme();
+    const renderItems = () => {
+        if (items) {
+            return items.flatMap(({ icon, label, ...p }, i) => {
+                const isLast = i === items.length - 1;
+                return [
+                    _jsx(Button, { ref: p.ref, shape: p.shape, size: p.size, suffix: p.suffix, loading: p.loading, label: p.label, variant: p.variant ?? 'plain', color: p.color ?? (isLast ? text.primary : text.disabled), readOnly: p.readOnly ?? (isLast || readOnly), prefix: p.prefix ?? icon, children: p.children }, p.key ?? i),
+                    ...isLast ? [] : [
+                        _jsx("span", { className: classes.separator, children: separator }, `${classes.separator}_${i}`)
+                    ]
+                ];
+            });
+        }
+        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}`)
+                ]
+            ];
+        });
+    };
+    return (_jsx("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), children: renderItems() }));
+}));
+Breadcrumb.Item = Button;

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

@@ -0,0 +1,6 @@
+export declare const classes: {
+    separator: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,14 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+export const classes = defineClasses('breadcrumb', [
+    'separator'
+]);
+export const style = defineCss(({ spacing, text }) => css `
+    display: flex;
+    align-items: center;
+    gap: ${spacing[3]}px;
+    
+    .${classes.separator} {
+        color: ${text.disabled};
+    }
+`);

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

@@ -0,0 +1 @@
+export * from './breadcrumb';

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

@@ -0,0 +1 @@
+export * from './breadcrumb';

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

@@ -0,0 +1,5 @@
+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>>;

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

@@ -0,0 +1,12 @@
+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) => {
+    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 }) }));
+});

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

@@ -0,0 +1,6 @@
+export declare const classes: {
+    content: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;