@canlooks/can-ui 0.0.21 → 0.0.23

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { OverlayBaseProps } from '../overlayBase';
-import { ResponsiveProp } from '../../../types';
+import { ResponsiveProp } from '../../types';
 import { TransitionBaseProps } from '../transitionBase';
 export interface DrawerProps extends Omit<OverlayBaseProps, 'title'> {
     title?: ReactNode;
@@ -8,13 +8,13 @@ export interface DrawerProps extends Omit<OverlayBaseProps, 'title'> {
     showClose?: ReactNode;
     size?: ResponsiveProp<string | number>;
     placement?: 'left' | 'right' | 'top' | 'bottom';
-    /** 是否可通过点击遮罩层关闭对话框，@default true */
+    /** 是否可通过点击遮罩层关闭对话框，默认为`true` */
     maskClosable?: boolean;
-    /** 是否可通过键盘的【ESC】键关闭对话框，@default true */
+    /** 是否可通过键盘的【ESC】键关闭对话框，默认为`true` */
     escapeClosable?: boolean;
     defaultOpen?: boolean;
     onClose?(reason: DrawerCloseReason): void;
     slideProps?: TransitionBaseProps<HTMLDivElement>;
 }
 export type DrawerCloseReason = 'escape' | 'closed' | 'maskClicked';
-export declare const Drawer: import("react").ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Drawer({ title, footer, showClose, size, placement, maskClosable, escapeClosable, defaultOpen, open, onClose, slideProps, ...props }: DrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/drawer/drawer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { classes, useStyle } from './drawer.style';
 import { classnames, useControlled } from '../../utils';
 import { OverlayBase } from '../overlayBase';
@@ -12,7 +12,7 @@ const placementToDirection = {
     top: 'down',
     bottom: 'up'
 };
-export const Drawer = forwardRef(({ title, footer, showClose = true, size = { xs: '100%', sm: '75%', md: '50%', lg: '25%' }, placement = 'right', maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, slideProps, ...props }, ref) => {
+export function Drawer({ title, footer, showClose = true, size = { xs: '100%', sm: '75%', md: '50%', lg: '25%' }, placement = 'right', maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, slideProps, ...props }) {
     const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open);
     const close = (reason) => {
         onClose?.(reason);
@@ -45,7 +45,7 @@ export const Drawer = forwardRef(({ title, footer, showClose = true, size = { xs
         }
         return;
     }, [innerOpen.current]);
-    return (_jsx(OverlayBase, { ...props, ref: ref, css: useStyle({ size: typeof size === 'object' ? size : { xs: size } }), className: classnames(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: _jsx(Slide, { direction: placementToDirection[placement], ...slideProps, in: innerOpen.current, className: classnames(classes.drawer, slideProps?.className), children: _jsxs("div", { className: classes.drawerWrap, children: [!!(title || showClose) &&
+    return (_jsx(OverlayBase, { ...props, css: useStyle({ size: typeof size === 'object' ? size : { xs: size } }), className: classnames(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: _jsx(Slide, { direction: placementToDirection[placement], ...slideProps, in: innerOpen.current, className: classnames(classes.drawer, slideProps?.className), children: _jsxs("div", { className: classes.drawerWrap, children: [!!(title || showClose) &&
                         _jsxs("div", { className: classes.titleRow, children: [_jsx("div", { className: classes.title, children: title }), showClose &&
                                     _jsx(Button, { className: classes.close, shape: "circular", variant: "text", color: "text", onClick: closeHandler, children: _jsx(DoubleRightOutlined, { rotate: {
                                                 left: 180,
@@ -53,4 +53,4 @@ export const Drawer = forwardRef(({ title, footer, showClose = true, size = { xs
                                                 top: -90,
                                                 bottom: 90
                                             }[placement] }) })] }), _jsx("div", { ref: bodyRef, className: classes.body, onScroll: onScroll, children: _jsx("div", { ref: bodyWrapRef, className: classes.bodyWrap, children: props.children }) })] }) }) }));
-});
+}

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

@@ -1,9 +1,9 @@
-import { ResponsiveValue } from '../../../types';
+import { ResponsiveValue } from '../../types';
 export declare const classes: {
     body: string;
     title: string;
-    titleRow: string;
     close: string;
+    titleRow: string;
     bodyWrap: string;
     drawer: string;
     drawerWrap: string;

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

@@ -10,19 +10,19 @@ export const classes = defineClasses('drawer', [
     'bodyWrap'
 ]);
 export function useStyle({ size }) {
-    const variables = responsiveVariables(k => {
-        let _size = size[k];
-        if (typeof _size === 'undefined') {
-            return '';
-        }
-        if (typeof _size === 'number') {
-            _size = _size + 'px';
-        }
-        return `--drawer-size: ${_size};`;
-    });
-    return useCss(({ spacing, background, boxShadow, borderRadius, divider }) => {
+    return useCss(theme => {
+        const { spacing, background, boxShadow, borderRadius, divider } = theme;
         return css `
-            ${variables}
+            ${responsiveVariables(theme, k => {
+            let _size = size[k];
+            if (typeof _size === 'undefined') {
+                return '';
+            }
+            if (typeof _size === 'number') {
+                _size = _size + 'px';
+            }
+            return `--drawer-size: ${_size};`;
+        })}
 
             .${classes.drawer} {
                 position: absolute;
@@ -66,7 +66,7 @@ export function useStyle({ size }) {
                 height: 100%;
                 display: flex;
                 flex-direction: column;
-                background-color: ${background.card};
+                background-color: ${background.content};
                 box-shadow: ${boxShadow[1]};
                 border-radius: ${borderRadius}px;
             }
@@ -116,5 +116,5 @@ export function useStyle({ size }) {
                 }
             }
         `;
-    }, [variables]);
+    });
 }

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

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

package/dist/esm/components/dropdown/dropdown.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
 import { Popper } from '../popper';
 import { classes, style } from './dropdown.style';
 import { classnames } from '../../utils';
-import { useTheme } from '../app';
-export const Dropdown = forwardRef(({ showArrow, ...props }, ref) => {
+import { useTheme } from '../theme';
+export function Dropdown({ showArrow, ...props }) {
     const { spacing } = useTheme();
     props.autoClose ??= true;
     props.trigger ??= 'click';
     props.placement ??= 'bottom';
     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/dropdown/dropdown.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('dropdown', [
     '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/flex/flex.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 import { TransportStyleProps } from '../transportStyle';
 export interface FlexProps extends TransportStyleProps {
     inline?: boolean;
-    /** 排列方式，@default "row" */
+    /** 排列方式，默认为`row` */
     direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
     /** 换行方式 */
     wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
@@ -12,4 +12,4 @@ export interface FlexProps extends TransportStyleProps {
     /** 当compact为true时，gap无效，而且会清除子元素的圆角，让他们拼接起来 */
     compact?: boolean;
 }
-export declare const Flex: import("react").ForwardRefExoticComponent<Omit<FlexProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Flex({ inline, direction, wrap, gap, columnGap, rowGap, compact, ...props }: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/flex/flex.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, cloneElement, forwardRef, isValidElement } from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
 import { classes } from './flex.style';
 import { classnames, filterProperties } from '../../utils';
 import { TransportStyle } from '../transportStyle';
-export const Flex = forwardRef(({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }, ref) => {
+export function Flex({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }) {
     const renderChildren = () => {
         if (!compact) {
             return props.children;
@@ -20,10 +20,10 @@ export const Flex = forwardRef(({ inline, direction = 'row', wrap, gap = 0, colu
             });
         });
     };
-    return (_jsx(TransportStyle, { ...props, ref: ref, className: classnames(classes.root, props.className), style: filterProperties({
+    return (_jsx(TransportStyle, { ...props, className: classnames(classes.root, props.className), style: filterProperties({
             display: inline ? 'inline-flex' : 'flex',
             flexDirection: direction,
             flexWrap: wrap, columnGap, rowGap, gap,
             ...props.style
         }), children: renderChildren() }));
-});
+}

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

@@ -1,5 +1,5 @@
-import { Dispatch, ReactElement, ReactNode, Ref, RefObject, SetStateAction } from 'react';
-import { Obj, ResponsiveProp } from '../../../types';
+import React, { Dispatch, ReactElement, ReactNode, Ref, RefObject, SetStateAction } from 'react';
+import { Obj, ResponsiveProp } from '../../types';
 import { FieldPath } from '../../utils';
 import { FieldError, FormItem, FormItemProps, FormItemRef } from './formItem';
 import { FormRelatable } from './formRelatable';
@@ -10,14 +10,14 @@ export type FormSharedProps = {
     wrapperRef?: Ref<HTMLDivElement>;
     requiredMark?: ReactNode;
 };
-export interface FormProps<V extends FormValue> extends FormSharedProps, Omit<DescriptionsBaseProps, 'items' | 'onChange'>, Omit<JSX.IntrinsicElements['form'], 'ref' | 'onChange'> {
-    ref?: Ref<FormRef<V>>;
+export interface FormProps<V extends FormValue> extends FormSharedProps, Omit<DescriptionsBaseProps, 'items' | 'onChange'>, Omit<React.JSX.IntrinsicElements['form'], 'ref' | 'onChange'> {
+    ref?: Ref<FormRef<V> | null>;
     component?: any;
     initialValue?: V;
     onChange?(field: FieldPath, value: any, formValue: V): void;
     onFinish?(value: V): void;
     items?: (FormItemProps<any> & Obj)[];
-    /** variant为"grid"或"table"时会渲染Descriptions组件，并传递variant属性，@default "grid" */
+    /** variant为"grid"或"table"时会渲染Descriptions组件，并传递variant属性，默认为`grid` */
     variant?: 'plain' | 'grid' | 'table';
     columnCount?: ResponsiveProp;
     descriptionsProps?: DescriptionsProps;
@@ -27,8 +27,9 @@ interface FormContext<V extends FormValue> extends FormSharedProps {
     formValue?: V;
     setFieldValue?(field: FieldPath, value: any, silent?: boolean): void;
     itemsContainer?: Map<string, FormItemRef>;
-    formRef?: RefObject<FormRef<V> | undefined>;
+    formRef?: RefObject<FormRef<V> | null>;
 }
+declare const FormContext: React.Context<FormContext<any>>;
 export declare function useFormContext<V extends FormValue>(): FormContext<V>;
 export type FormRef<V extends FormValue = FormValue> = {
     submit(): Promise<V | null>;

package/dist/esm/components/form/form.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { createContext, forwardRef, useContext, useImperativeHandle, useMemo, useRef } from 'react';
+import { createContext, useContext, useImperativeHandle, useMemo, useRef } from 'react';
 import { classnames, cloneDeep, mergeDeep, queryDeep, stringifyField, useSync, useSyncState } from '../../utils';
 import { classes, style } from './form.style';
 import { FormItem } from './formItem';
 import { FormRelatable } from './formRelatable';
 import { Descriptions } from '../descriptions';
-const formContext = createContext({});
+const FormContext = createContext({});
 export function useFormContext() {
-    return useContext(formContext);
+    return useContext(FormContext);
 }
-export const Form = forwardRef(({ component: Component = 'form', wrapperRef, initialValue, onChange, onFinish, requiredMark = '*', columnCount = 1, descriptionsProps, 
+export const Form = (({ ref, component: Component = 'form', wrapperRef, initialValue, onChange, onFinish, requiredMark = '*', columnCount = 1, descriptionsProps, 
 // 以下属性从DescriptionsBaseProps继承
 items, variant = 'grid', 
 // 以下属性从DescriptionsSharedProps继承
-labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePadding, ...props }, ref) => {
+labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePadding, ...props }) => {
     /**
      * ------------------------------------------------------------------------
      * 表单值
@@ -88,7 +88,7 @@ labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePa
         isFieldTouched: field => !!itemsContainer.current.get(stringifyField(field))?.isTouched
     };
     useImperativeHandle(ref, () => formRef.current);
-    return (_jsx(Component, { ...props, ref: wrapperRef, css: style, className: classnames(classes.root, props.className), onSubmit: submitHandler, children: _jsx(formContext.Provider, { value: useMemo(() => ({
+    return (_jsx(Component, { ...props, ref: wrapperRef, css: style, className: classnames(classes.root, props.className), onSubmit: submitHandler, children: _jsx(FormContext, { value: useMemo(() => ({
                 requiredMark,
                 formValue: formValue.current, setFieldValue,
                 itemsContainer: itemsContainer.current, formRef

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

@@ -7,12 +7,12 @@ export const classes = defineClasses('form', [
 ]);
 export const style = defineCss(({ colors, spacing }) => css `
     .${classes.requiredMark} {
-        color: ${colors.error};
+        color: ${colors.error.main};
         margin-right: ${spacing[1]}px;
     }
 
     .${classes.helperText} {
         font-size: ${13 / 14}em;
-        color: ${colors.error};
+        color: ${colors.error.main};
     }
 `);

package/dist/esm/components/form/formItem.d.ts

@@ -1,13 +1,13 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { FormRef, FormSharedProps, FormValue } from './form';
-import { ColorPropsValue, Size } from '../../../types';
+import { ColorPropsValue, Size } from '../../types';
 import { FieldPath } from '../../utils';
 import { DescriptionItemProps, DescriptionsSharedProps } from '../descriptions';
 export type FormItemRules<I> = {
     message?: ReactNode;
     required?: boolean;
     pattern?: RegExp;
-    validator?(fieldValue: I | undefined, formValue: any, formInstance: FormRef<FormValue> | null): any;
+    validator?(fieldValue: I | undefined, formValue: any, formInstance: FormRef | null): any;
 };
 export type FieldProps<I> = {
     checked?: boolean;

package/dist/esm/components/form/formItem.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { cloneElement, forwardRef, isValidElement, useDeferredValue, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { cloneElement, isValidElement, useDeferredValue, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { useFormContext } from './form';
 import { classnames, getValueOnChange, queryDeep, stringifyField, useDerivedState } from '../../utils';
 import { DescriptionItem } from '../descriptions';
 import { classes } from './form.style';
 import { Collapse } from '../transitionBase';
-export const FormItem = forwardRef(({ wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, ...props }, ref) => {
+export const FormItem = (({ wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, ...props }, ref) => {
     const { formValue, setFieldValue, itemsContainer, formRef, ...context } = useFormContext();
     requiredMark ??= context.requiredMark ?? '*';
     /**
@@ -33,7 +33,7 @@ export const FormItem = forwardRef(({ wrapperRef, field, initialValue, label = '
             ? queryDeep(formValue, field)
             : void 0;
         if (typeof prev !== 'undefined' && typeof value === 'undefined') {
-            console.error(`The field "${stringifyField(field)}"'s value was modified to undefined, did you forget to specify "initialValue" before calling "resetForm()" or "resetField()"`);
+            console.error(`The field "${stringifyField(field)}" value was modified to undefined, did you forget to specify "initialValue" before calling "resetForm()" or "resetField()"`);
         }
         return value;
     }, [formValue, field]);
@@ -123,7 +123,7 @@ export const FormItem = forwardRef(({ wrapperRef, field, initialValue, label = '
     /**
      * --------------------------------------------------------------------
      * 渲染部分
-    */
+     */
     const isRequired = useMemo(() => {
         return required ?? rulesArr?.some(r => r.required);
     }, [rules, required]);
@@ -145,18 +145,19 @@ export const FormItem = forwardRef(({ wrapperRef, field, initialValue, label = '
             });
         }
         if (isValidElement(children)) {
+            const { props } = children;
             return cloneElement(children, {
                 ...typeof field !== 'undefined' && {
                     ...typeof innerValue.current === 'boolean'
-                        ? { checked: children.props.checked ?? innerValue.current }
-                        : { value: children.props.value ?? innerValue.current },
+                        ? { checked: props.checked ?? innerValue.current }
+                        : { value: props.value ?? innerValue.current },
                     onChange(e) {
-                        children.props.onChange?.(e);
+                        props.onChange?.(e);
                         isTouched.current = isActiveChanging.current = true;
                         setInnerValue(o => getValueOnChange(e, o));
                     }
                 },
-                size: children.props.size ?? props.size,
+                size: props.size ?? props.size,
                 ...innerError.current && { color: 'error' }
             });
         }

package/dist/esm/components/form/formRelatable.js

@@ -3,11 +3,11 @@ import { useFormContext } from './form';
 import { cloneDeep } from '../../utils';
 export function FormRelatable(props) {
     const { formValue, formRef } = useFormContext();
-    const prevFormValue = useRef();
+    const prevFormValue = useRef(void 0);
     useEffect(() => {
         prevFormValue.current = cloneDeep(formValue);
     }, [formValue]);
-    const childrenBackup = useRef();
+    const childrenBackup = useRef(void 0);
     if (!prevFormValue.current || props.shouldUpdate(prevFormValue.current, formValue)) {
         childrenBackup.current = props.children(formValue, formRef.current);
     }

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

@@ -1,8 +1,7 @@
 import { ReactElement, ReactNode, Ref } from 'react';
 import { DialogProps } from '../dialog';
-import { FormProps, FormRef, FormValue } from '../form/form';
-import { FormItemProps } from '../form/formItem';
-import { Obj } from '../../../types';
+import { Obj } from '../../types';
+import { FormItemProps, FormProps, FormRef, FormValue } from '../form';
 interface FormDialogItemProps<I = any> extends Omit<FormItemProps<I>, 'key'>, Obj {
     key?: string | number;
 }

package/dist/esm/components/formDialog/formDialog.js

@@ -1,28 +1,25 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { useImperativeHandle, useRef, useState } from 'react';
 import { Dialog } from '../dialog';
-import { Form } from '../form/form';
-import { FormItem } from '../form/formItem';
 import { cloneRef, setDefaultColumnKey, useControlled, useLoading } from '../../utils';
-export const FormDialog = forwardRef(({ title, formProps, formRef, items, onFinish, ...props }, ref) => {
+import { Form, FormItem } from '../form';
+export const FormDialog = (({ ref, title, formProps, formRef, items, onFinish, ...props }) => {
     const dialogRef = useRef(null);
     const innerFormRef = useRef(null);
-    const resolveFn = useRef();
-    const rejectFn = useRef();
+    const resolveFn = useRef(void 0);
+    const rejectFn = useRef(void 0);
     const [innerOpen, setInnerOpen] = useControlled(props.defaultOpen, props.open);
     const onCloseHandler = (reason) => {
         if (reason === 'confirmed') {
             return;
         }
         props.onClose?.(reason);
-        if (!open) {
-            rejectFn.current?.({
-                type: 'canceled',
-                value: innerFormRef.current.getFormValue()
-            });
-            resolveFn.current = rejectFn.current = void 0;
-        }
+        rejectFn.current?.({
+            type: 'canceled',
+            value: innerFormRef.current.getFormValue()
+        });
+        resolveFn.current = rejectFn.current = void 0;
         setInnerOpen(false);
     };
     useImperativeHandle(ref, () => {
@@ -43,7 +40,7 @@ export const FormDialog = forwardRef(({ title, formProps, formRef, items, onFini
     });
     const [value, setValue] = useState();
     const confirmHandler = () => {
-        innerFormRef.current.submit();
+        innerFormRef.current.submit().then();
     };
     const [innerLoading, finishHandler] = useLoading(async (value) => {
         formProps?.onFinish?.(value);

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

@@ -1,10 +1,10 @@
 import { ReactElement } from 'react';
-import { ResponsiveProp } from '../../../types';
+import { ResponsiveProp } from '../../types';
 import { GridItem } from './gridItem';
 import { TransportStyleProps } from '../transportStyle';
 export interface GridProps extends TransportStyleProps {
     inline?: boolean;
-    /** 网格列数，@default xs: 12 */
+    /** 网格列数，默认为`{xs: 12}` */
     columnCount?: ResponsiveProp;
     gap?: ResponsiveProp;
     columnGap?: ResponsiveProp;

package/dist/esm/components/grid/grid.js

@@ -1,15 +1,14 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
-import { classes, containerStyle } from './grid.style';
+import { classes, useContainerStyle } from './grid.style';
 import { GridItem } from './gridItem';
-import { classnames, responsiveValue } from '../../utils';
+import { classnames, toResponsiveValue } from '../../utils';
 import { TransportStyle } from '../transportStyle';
-export const Grid = forwardRef(({ inline, columnCount = { xs: 12 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
-    columnCount = responsiveValue(columnCount);
-    gap = responsiveValue(gap);
-    columnGap = responsiveValue(columnGap) ?? gap;
-    rowGap = responsiveValue(rowGap) ?? gap;
-    return (_jsx(TransportStyle, { ...props, ref: ref, css: containerStyle({ columnCount, columnGap, rowGap }), className: classnames(classes.root, props.className), style: {
+export const Grid = (({ inline, columnCount = { xs: 12 }, gap = { xs: 0 }, columnGap, rowGap, ...props }) => {
+    columnCount = toResponsiveValue(columnCount);
+    gap = toResponsiveValue(gap);
+    columnGap = toResponsiveValue(columnGap) ?? gap;
+    rowGap = toResponsiveValue(rowGap) ?? gap;
+    return (_jsx(TransportStyle, { ...props, css: useContainerStyle({ columnCount, columnGap, rowGap }), className: classnames(classes.root, props.className), style: {
             display: inline ? 'inline-flex' : 'flex',
             ...props.style
         } }));

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

@@ -1,15 +1,15 @@
-import { ResponsiveValue } from '../../../types';
+import { ResponsiveValue } from '../../types';
 export declare const classes: {
     item: string;
 } & {
     root: string;
 };
-export declare function containerStyle({ columnCount, columnGap, rowGap }: {
+export declare function useContainerStyle({ columnCount, columnGap, rowGap }: {
     columnCount: ResponsiveValue;
     columnGap: ResponsiveValue;
     rowGap: ResponsiveValue;
 }): import("@emotion/react").SerializedStyles;
-export declare function itemStyle({ span, offset }: {
+export declare function useItemStyle({ span, offset }: {
     span: ResponsiveValue;
     offset: ResponsiveValue;
 }): import("@emotion/react").SerializedStyles;

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

@@ -1,11 +1,11 @@
 import { css } from '@emotion/react';
-import { defineClasses, responsiveVariables } from '../../utils';
+import { defineClasses, responsiveVariables, useCss } from '../../utils';
 export const classes = defineClasses('grid', [
     'item'
 ]);
-export function containerStyle({ columnCount, columnGap, rowGap }) {
-    return css `
-        ${responsiveVariables(k => `
+export function useContainerStyle({ columnCount, columnGap, rowGap }) {
+    return useCss(theme => css `
+        ${responsiveVariables(theme, k => `
             ${k in columnCount ? `--grid-columnCount: ${columnCount[k]}` : ''};
             ${k in columnGap ? `--grid-column-gap: ${columnGap[k]}px` : ''};
             ${k in rowGap ? `--grid-row-gap: ${rowGap[k]}px` : ''};
@@ -13,11 +13,11 @@ export function containerStyle({ columnCount, columnGap, rowGap }) {
 
         flex-wrap: wrap;
         gap: var(--grid-row-gap) var(--grid-column-gap);
-    `;
+    `);
 }
-export function itemStyle({ span, offset }) {
-    return css `
-        ${responsiveVariables(k => `
+export function useItemStyle({ span, offset }) {
+    return useCss(theme => css `
+        ${responsiveVariables(theme, k => `
             ${k in span ? `--grid-item-span: ${span[k]}` : ''};
             ${k in offset ? `--grid-item-offset: ${offset[k]}` : ''};
         `)}
@@ -26,5 +26,5 @@ export function itemStyle({ span, offset }) {
 
         width: calc(var(--grid-item-width) * var(--grid-item-span) + var(--grid-column-gap) * (var(--grid-item-span) - 1));
         margin-left: calc(var(--grid-item-width) * var(--grid-item-offset) + var(--grid-column-gap) * var(--grid-item-offset));
-    `;
+    `);
 }

package/dist/esm/components/grid/gridItem.d.ts

@@ -1,7 +1,7 @@
-import { ResponsiveProp } from '../../../types';
+import { ResponsiveProp } from '../../types';
 import { TransportStyleProps } from '../transportStyle';
 export interface GridItemProps extends TransportStyleProps {
     span?: ResponsiveProp;
     offset?: ResponsiveProp;
 }
-export declare const GridItem: import("react").ForwardRefExoticComponent<Omit<GridItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function GridItem({ span, offset, ...props }: GridItemProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/grid/gridItem.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
-import { classnames, responsiveValue } from '../../utils';
-import { classes, itemStyle } from './grid.style';
+import { classnames, toResponsiveValue } from '../../utils';
+import { classes, useItemStyle } from './grid.style';
 import { TransportStyle } from '../transportStyle';
-export const GridItem = forwardRef(({ span = { xs: 1 }, offset = { xs: 0 }, ...props }, ref) => {
-    span = responsiveValue(span);
-    offset = responsiveValue(offset);
-    return (_jsx(TransportStyle, { ...props, ref: ref, css: itemStyle({ span, offset }), className: classnames(classes.item, props.className) }));
-});
+export function GridItem({ span = { xs: 1 }, offset = { xs: 0 }, ...props }) {
+    span = toResponsiveValue(span);
+    offset = toResponsiveValue(offset);
+    return (_jsx(TransportStyle, { ...props, css: useItemStyle({ span, offset }), className: classnames(classes.item, props.className) }));
+}

package/dist/esm/components/highlight/highlight.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Fragment, memo } from 'react';
 import { Typography } from '../typography';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 export const Highlight = memo(({ keywords, highlightClassName, highlightStyle, renderHighlight, children }) => {
     const { colors } = useTheme();
     if (!children) {
@@ -31,7 +31,7 @@ export const Highlight = memo(({ keywords, highlightClassName, highlightStyle, r
         const highlightText = children.substring(start, offset = end);
         ret.push(_jsx(Fragment, { children: renderHighlight?.(highlightText) ||
                 _jsx(Typography.mark, { className: highlightClassName, style: {
-                        color: colors.error,
+                        color: colors.error.main,
                         ...highlightStyle
                     }, children: highlightText }) }, i));
     });

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

@@ -1,5 +1,5 @@
-import { CSSProperties, ReactNode } from 'react';
-import { DIVProps } from '../../../types';
+import React, { CSSProperties, ReactNode } from 'react';
+import { DIVProps } from '../../types';
 import { ImagePreviewProps } from './imagePreview';
 export interface ImageProps extends DIVProps {
     src?: string;
@@ -10,10 +10,10 @@ export interface ImageProps extends DIVProps {
     height?: string | number;
     objectFit?: CSSProperties['objectFit'];
     objectPosition?: CSSProperties['objectPosition'];
-    imgProps?: JSX.IntrinsicElements['img'];
+    imgProps?: React.JSX.IntrinsicElements['img'];
     actions?: ReactNode;
     previewable?: boolean;
     previewProps?: ImagePreviewProps;
     onPreview?(e: React.MouseEvent<HTMLDivElement>): void;
 }
-export declare const Image: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Image: React.MemoExoticComponent<({ src, fallback, onError, alt, width, height, objectFit, objectPosition, imgProps, actions, previewable, previewProps, onPreview, ...props }: ImageProps) => import("@emotion/react/jsx-runtime").JSX.Element>;