@canlooks/can-ui 0.0.163 → 0.0.165

package/dist/cjs/components/accordion/accordion.style.d.ts

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

package/dist/cjs/components/actionSheet/actionSheet.style.d.ts

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

package/dist/cjs/components/alert/alert.style.d.ts

@@ -12,4 +12,4 @@ export declare const classes: {
 };
 export declare function useStyle({ color }: {
     color: ColorPropsValue;
-}): import("@emotion/react").SerializedStyles;
+}): import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/anchorList/anchorList.style.d.ts

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

package/dist/cjs/components/app/app.style.d.ts

@@ -2,5 +2,5 @@ import { Theme } from '../theme';
 export declare const classes: {
     root: string;
 };
-export declare const appStyleCallback: (theme: Theme) => import("@emotion/react").SerializedStyles;
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const appStyleCallback: (theme: Theme) => import("@emotion/utils").SerializedStyles;
+export declare const style: () => import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/avatar/avatar.style.d.ts

@@ -6,4 +6,4 @@ export declare const classes: {
 };
 export declare function useStyle({ color }: {
     color: ColorPropsValue;
-}): import("@emotion/react").SerializedStyles;
+}): import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/avatar/avatarGroup.style.d.ts

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

package/dist/cjs/components/backdrop/backdrop.style.d.ts

@@ -2,4 +2,4 @@ import { BackdropProps } from './backdrop';
 export declare const classes: {
     root: string;
 };
-export declare function useStyle({ variant }: Pick<BackdropProps, 'variant'>): import("@emotion/react").SerializedStyles;
+export declare function useStyle({ variant }: Pick<BackdropProps, 'variant'>): import("@emotion/utils").SerializedStyles;

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

@@ -8,4 +8,4 @@ export declare const classes: {
 };
 export declare function useStyle({ color }: {
     color: ColorPropsValue;
-}): import("@emotion/react").SerializedStyles;
+}): import("@emotion/utils").SerializedStyles;

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

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

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

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

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

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

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

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

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

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

package/dist/cjs/components/button/button.style.d.ts

@@ -8,4 +8,4 @@ export declare const classes: {
 };
 export declare function useStyle({ color }: {
     color: ColorPropsValue;
-}): import("@emotion/react").SerializedStyles[];
+}): import("@emotion/utils").SerializedStyles[];

package/dist/cjs/components/calendar/calendar.style.d.ts

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

package/dist/cjs/components/card/card.style.d.ts

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

package/dist/cjs/components/cascade/cascade.style.d.ts

@@ -11,5 +11,5 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
-export declare const cascadePopperStyle: () => import("@emotion/react").SerializedStyles[];
+export declare const style: () => import("@emotion/utils").SerializedStyles;
+export declare const cascadePopperStyle: () => import("@emotion/utils").SerializedStyles[];

package/dist/cjs/components/checkboxBase/checkboxBase.style.d.ts

@@ -10,4 +10,4 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare function useStyle({ color }: Required<Pick<CheckboxBaseProps, 'color'>>): import("@emotion/react").SerializedStyles;
+export declare function useStyle({ color }: Required<Pick<CheckboxBaseProps, 'color'>>): import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/colorPicker/colorPicker.style.d.ts

@@ -6,5 +6,5 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
-export declare const colorPickerPopperStyle: () => import("@emotion/react").SerializedStyles[];
+export declare const style: () => import("@emotion/utils").SerializedStyles;
+export declare const colorPickerPopperStyle: () => import("@emotion/utils").SerializedStyles[];

package/dist/cjs/components/counter/counter.style.d.ts

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

package/dist/cjs/components/curd/curd.js

@@ -134,6 +134,7 @@ exports.Curd = (0, react_1.memo)((props) => {
      * -------------------------------------------------------------
      * 行数据
      */
+    const containerRef = (0, react_1.useRef)(null);
     const { setOptions } = (0, selectionContext_1.useSelectionContext)();
     const [innerRows, _setInnerRows] = (0, utils_1.useDerivedState)(props.rows);
     (0, react_1.useEffect)(() => {
@@ -142,6 +143,7 @@ exports.Curd = (0, react_1.memo)((props) => {
     const setInnerRows = (data) => {
         setOptions?.(data);
         _setInnerRows(data);
+        containerRef.current.scrollTop = 0;
     };
     const [innerTotal, setInnerTotal] = (0, utils_1.useDerivedState)(props.paginationProps?.total || 0);
     const suppressReload = (0, react_1.useRef)(false);
@@ -245,10 +247,12 @@ exports.Curd = (0, react_1.memo)((props) => {
                                             (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarRight, (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: curd_style_1.classes.divider, orientation: "vertical" })] }), reloadable &&
                                             (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u5237\u65B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faRotateRight_1.faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
                                             (0, jsx_runtime_1.jsx)(curdResizable_1.CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
-                                            (0, jsx_runtime_1.jsx)(curdColumnConfig_1.CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), (0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(dataGrid_1.DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
+                                            (0, jsx_runtime_1.jsx)(curdColumnConfig_1.CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), (0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(dataGrid_1.DataGrid, { ...dataGridProps, slotProps: {
+                                container: { ref: (0, utils_1.cloneRef)(containerRef, dataGridProps?.slotProps?.container?.ref) }
+                            }, tableProps: {
                                 ...props.tableProps,
                                 ...resizable && { size: innerSize.current }
-                            }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
+                            }, columns: actualColumns, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
                                 ? () => (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
                                 : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, _noRenderFormTag: true }) })] }), (creatable || updatable) &&
                 (0, jsx_runtime_1.jsx)(curdDialog_1.CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));

package/dist/cjs/components/curd/curd.style.d.ts

@@ -19,5 +19,5 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
-export declare const dialogStyle: () => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/utils").SerializedStyles;
+export declare const dialogStyle: () => import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/curd/curdColumnConfig.js

@@ -9,16 +9,28 @@ const curdColumnConfig_style_1 = require("./curdColumnConfig.style");
 const menuItem_1 = require("../menuItem");
 const checkbox_1 = require("../checkbox");
 const sortableItem_1 = require("../sortableItem");
-const core_1 = require("@dnd-kit/core");
-const sortable_1 = require("@dnd-kit/sortable");
 const utils_1 = require("../../utils");
 const icon_1 = require("../icon");
 const faGear_1 = require("@fortawesome/free-solid-svg-icons/faGear");
-exports.CurdColumnConfig = (0, react_1.memo)(({ columns, innerVisible, setInnerVisible, setInnerOrder }) => {
-    columns ||= [];
-    const dragEndHandler = (e) => {
-        const newColumns = (0, utils_1.onDndDragEnd)(e, columns, '_key');
-        newColumns && setInnerOrder(newColumns.flatMap(col => col._key ?? []));
+const react_2 = require("@dnd-kit/react");
+exports.CurdColumnConfig = (0, react_1.memo)((props) => {
+    const dragEndHandler = e => {
+        const newColumns = (0, utils_1.onDndDragEnd)(e, props.columns || [], '_key');
+        newColumns && props.setInnerOrder(newColumns.flatMap(col => col._key ?? []));
+    };
+    return ((0, jsx_runtime_1.jsx)(react_2.DragDropProvider, { sensors: utils_1.defaultSensors, onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(CurdColumnConfigContent, { ...props }) }));
+});
+const CurdColumnConfigContent = (0, react_1.memo)(({ columns, innerVisible, setInnerVisible }) => {
+    const isDragging = (0, react_1.useRef)(false);
+    (0, react_2.useDragDropMonitor)({
+        onDragStart: () => isDragging.current = true,
+        onDragEnd: () => isDragging.current = false
+    });
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const openChangeHandler = (open) => {
+        if (open || !isDragging.current) {
+            setOpen(open);
+        }
     };
     const visibleSet = (0, react_1.useMemo)(() => {
         return new Set(innerVisible);
@@ -28,12 +40,12 @@ exports.CurdColumnConfig = (0, react_1.memo)(({ columns, innerVisible, setInnerV
             ? [...o, key]
             : o.filter(k => k !== key));
     };
-    return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { css: curdColumnConfig_style_1.style, placement: "bottomRight", content: (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.title, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.titleText, children: "\u5217\u8BBE\u7F6E" }), (0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => {
-                            const id = col._key;
-                            const checked = !(0, utils_1.isUnset)(id) && visibleSet.has(id);
-                            return ((0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { id: id ?? i, component: menuItem_1.MenuItem, className: curdColumnConfig_style_1.classes.item, prefix: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: curdColumnConfig_style_1.classes.checkbox, checked: checked, onChange: e => {
-                                        e.stopPropagation();
-                                        toggleVisible(id, e.target.checked);
-                                    } }), onClick: () => toggleVisible(id, !checked), label: col.titleText ?? col.title, noStyle: true }, id ?? i));
-                        })] }) }) }), autoClose: false, children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faGear_1.faGear }) }) }));
+    return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { css: curdColumnConfig_style_1.style, open: open, onOpenChange: openChangeHandler, placement: "bottomRight", trigger: ['hover', 'click'], content: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.title, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.titleText, children: "\u5217\u8BBE\u7F6E" }), (0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => {
+                    const id = col._key;
+                    const checked = !(0, utils_1.isUnset)(id) && visibleSet.has(id);
+                    return ((0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { id: id ?? i, index: i, component: menuItem_1.MenuItem, className: curdColumnConfig_style_1.classes.item, prefix: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: curdColumnConfig_style_1.classes.checkbox, checked: checked, onChange: e => {
+                                e.stopPropagation();
+                                toggleVisible(id, e.target.checked);
+                            } }), onClick: () => toggleVisible(id, !checked), label: col.titleText ?? col.title, noStyle: true }, id ?? i));
+                })] }), autoClose: false, children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faGear_1.faGear }) }) }));
 });

package/dist/cjs/components/curd/curdColumnConfig.style.d.ts

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

package/dist/cjs/components/dataGrid/dataGrid.d.ts

@@ -53,6 +53,7 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentP
     _negativeRowSpan?: number;
 }
 interface DataGridSharedProps<R extends RowType = RowType> extends SlotsAndProps<{
+    container: ComponentProps<'div'>;
     tr: ComponentProps<'tr'>;
 }> {
     rowProps?(row: R, index: number, rows: R[]): ComponentProps<'tr'>;

package/dist/cjs/components/dataGrid/dataGrid.js

@@ -130,7 +130,12 @@ exports.DataGrid = (0, react_1.memo)(({ slots, slotProps, columns, rows, rowProp
         const { page, pageSize } = _paginationProps;
         return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
     }, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
-    const renderedContent = ((0, jsx_runtime_1.jsx)(columnResize_1.ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => (0, jsx_runtime_1.jsxs)(table_1.TableContainer, { ref: scrollerRef, className: dataGrid_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
+    const { container: Container = table_1.TableContainer } = slots || {};
+    const { container: containerProps } = slotProps || {};
+    const renderedContent = ((0, jsx_runtime_1.jsx)(columnResize_1.ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => (0, jsx_runtime_1.jsxs)(Container, { ...(0, utils_1.mergeComponentProps)(containerProps, {
+                ref: scrollerRef,
+                className: dataGrid_style_1.classes.container
+            }), children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
                                         slots, slotProps,
                                         rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
                                         expandedSet, flattedColumns, toggleExpanded

package/dist/cjs/components/dataGrid/dataGrid.style.d.ts

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

package/dist/cjs/components/dataGrid/filterBubbleContent.style.d.ts

@@ -1 +1 @@
-export declare const filterOptionsStyle: import("@emotion/react").SerializedStyles;
+export declare const filterOptionsStyle: import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/dateTimePicker/dateTimePicker.style.d.ts

@@ -6,5 +6,5 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
-export declare const datePickerPopperStyle: () => import("@emotion/react").SerializedStyles[];
+export declare const style: () => import("@emotion/utils").SerializedStyles;
+export declare const datePickerPopperStyle: () => import("@emotion/utils").SerializedStyles[];

package/dist/cjs/components/dateTimePicker/timer.style.d.ts

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

package/dist/cjs/components/dateTimeRangePicker/dateTimeRangePicker.style.d.ts

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

package/dist/cjs/components/descriptions/descriptions.style.d.ts

@@ -11,5 +11,5 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const tableStyle: () => import("@emotion/react").SerializedStyles;
-export declare const gridItemStyle: () => import("@emotion/react").SerializedStyles;
+export declare const tableStyle: () => import("@emotion/utils").SerializedStyles;
+export declare const gridItemStyle: () => import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/dialog/dialog.style.d.ts

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

package/dist/cjs/components/divider/divider.style.d.ts

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

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

@@ -12,4 +12,4 @@ export declare const classes: {
 };
 export declare function useStyle({ size }: {
     size: ResponsiveValue<string | number>;
-}): import("@emotion/react").SerializedStyles;
+}): import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/dropdown/dropdown.style.d.ts

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

package/dist/cjs/components/flex/flex.style.d.ts

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

package/dist/cjs/components/form/form.style.d.ts

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

package/dist/cjs/components/gallery/gallery.style.d.ts

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

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

@@ -8,8 +8,8 @@ export declare function useContainerStyle({ columnCount, columnGap, rowGap }: {
     columnCount: ResponsiveValue;
     columnGap: ResponsiveValue;
     rowGap: ResponsiveValue;
-}): import("@emotion/react").SerializedStyles;
+}): import("@emotion/utils").SerializedStyles;
 export declare function useItemStyle({ span, offset }: {
     span: ResponsiveValue;
     offset: ResponsiveValue;
-}): import("@emotion/react").SerializedStyles;
+}): import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/image/image.style.d.ts

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

package/dist/cjs/components/image/image.style.js

@@ -44,6 +44,7 @@ exports.style = (0, utils_1.defineCss)(({ background, easing, spacing }) => {
                 align-items: center;
                 justify-content: center;
                 opacity: 0;
+                z-index: -1;
                 transition: opacity .25s ${easing.easeOut};
 
                 .${exports.classes.previewButton} {
@@ -60,6 +61,7 @@ exports.style = (0, utils_1.defineCss)(({ background, easing, spacing }) => {
             &:hover {
                 .${exports.classes.mask} {
                     opacity: 1;
+                    z-index: 0;
                 }
             }
         }

package/dist/cjs/components/input/input.style.d.ts

@@ -4,5 +4,5 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const commonNativeInputStyle: import("@emotion/react").SerializedStyles;
-export declare const style: import("@emotion/react").SerializedStyles;
+export declare const commonNativeInputStyle: import("@emotion/utils").SerializedStyles;
+export declare const style: import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/inputBase/inputBase.style.d.ts

@@ -7,4 +7,4 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare function useStyle({ color }: Required<Pick<InputBaseProps<any>, 'color'>>): import("@emotion/react").SerializedStyles;
+export declare function useStyle({ color }: Required<Pick<InputBaseProps<any>, 'color'>>): import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/loading/loading.style.d.ts

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

package/dist/cjs/components/loadingIndicator/loadingIndicator.style.d.ts

@@ -4,4 +4,4 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare function useStyle({ color, borderWidth }: Required<Pick<LoadingIndicatorProps, 'color' | 'borderWidth'>>): import("@emotion/react").SerializedStyles;
+export declare function useStyle({ color, borderWidth }: Required<Pick<LoadingIndicatorProps, 'color' | 'borderWidth'>>): import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/loadingMask/loadingMask.style.d.ts

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

package/dist/cjs/components/menu/menu.style.d.ts

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

package/dist/cjs/components/menuItem/menuItem.style.d.ts

@@ -15,6 +15,6 @@ export declare const paddingHorizontal: {
     medium: number;
     large: number;
 };
-export declare function useStyle({ color }: Required<Pick<MenuItemProps, 'color'>>): import("@emotion/react").SerializedStyles;
+export declare function useStyle({ color }: Required<Pick<MenuItemProps, 'color'>>): import("@emotion/utils").SerializedStyles;
 export declare const menuListPadding = 4;
-export declare const childrenStyle: () => import("@emotion/react").SerializedStyles;
+export declare const childrenStyle: () => import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/modal/modal.style.d.ts

@@ -3,4 +3,4 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: import("@emotion/react").SerializedStyles;
+export declare const style: import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/optionsBase/optionsBase.style.d.ts

@@ -3,4 +3,4 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: import("@emotion/react").SerializedStyles;
+export declare const style: import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/overlayBase/overlayBase.style.d.ts

@@ -3,4 +3,4 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles[];
+export declare const style: () => import("@emotion/utils").SerializedStyles[];

package/dist/cjs/components/pagination/pagination.style.d.ts

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

package/dist/cjs/components/palette/palette.style.d.ts

@@ -18,4 +18,4 @@ export declare const classes: {
     root: string;
 };
 export declare const getTransparentBackground: (a: string, b: string) => string;
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/pickerDialog/pickerDialog.style.d.ts

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

package/dist/cjs/components/pinchable/pinchable.style.d.ts

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

package/dist/cjs/components/placeholder/placeholder.style.d.ts

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

package/dist/cjs/components/popper/popper.style.d.ts

@@ -4,15 +4,15 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles[];
+export declare const style: () => import("@emotion/utils").SerializedStyles[];
 /**
  *  通用弹框箭头样式
  * @param colorValue
  * @param arrowSize
  */
-export declare const popperArrowStyle: (colorValue: string, arrowSize?: number) => import("@emotion/react").SerializedStyles;
+export declare const popperArrowStyle: (colorValue: string, arrowSize?: number) => import("@emotion/utils").SerializedStyles;
 /**
  *  通用弹框样式
  */
-export declare const popperStyleCallback: ({ background, borderRadius, boxShadow }: Theme) => import("@emotion/react").SerializedStyles;
-export declare const popperStyle: () => import("@emotion/react").SerializedStyles;
+export declare const popperStyleCallback: ({ background, borderRadius, boxShadow }: Theme) => import("@emotion/utils").SerializedStyles;
+export declare const popperStyle: () => import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/progress/progress.style.d.ts

@@ -8,4 +8,4 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare function useStyle({ color, variant }: Required<Pick<ProgressProps, 'color' | 'variant'>>): import("@emotion/react").SerializedStyles;
+export declare function useStyle({ color, variant }: Required<Pick<ProgressProps, 'color' | 'variant'>>): import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/rating/rating.style.d.ts

@@ -8,4 +8,4 @@ export declare const classes: {
 };
 export declare function useStyle({ color }: {
     color: ColorPropsValue;
-}): import("@emotion/react").SerializedStyles;
+}): import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/resizable/resizable.style.d.ts

@@ -9,4 +9,4 @@ export declare const classes: {
 export declare const handleCursors: {
     [P in Handle]?: string;
 };
-export declare function useStyle({ variant, handleSize, handleColor }: Required<Pick<ResizableProps, 'variant' | 'handleSize' | 'handleColor'>>): import("@emotion/react").SerializedStyles[];
+export declare function useStyle({ variant, handleSize, handleColor }: Required<Pick<ResizableProps, 'variant' | 'handleSize' | 'handleColor'>>): import("@emotion/utils").SerializedStyles[];

package/dist/cjs/components/scrollbar/scrollbar.style.d.ts

@@ -12,4 +12,4 @@ export declare const classes: {
 };
 export declare function useStyle({ size }: {
     size: string;
-}): import("@emotion/react").SerializedStyles;
+}): import("@emotion/utils").SerializedStyles;