@canlooks/can-ui 0.0.163 → 0.0.165

package/dist/cjs/utils/dnd.js

@@ -1,38 +1,65 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDndSensors = useDndSensors;
+exports.defaultSensors = void 0;
 exports.onDndDragEnd = onDndDragEnd;
+exports.arrayMove = arrayMove;
 exports.onTreeNodeSort = onTreeNodeSort;
 exports.edgeBounce = edgeBounce;
-const core_1 = require("@dnd-kit/core");
-const sortable_1 = require("@dnd-kit/sortable");
 const utils_1 = require("./utils");
 const bezier_1 = require("./bezier");
+const react_1 = require("@dnd-kit/react");
+const dom_1 = require("@dnd-kit/dom");
 /**
- * 默认提供给@dnd-kit的sensors属性
+ * 默认提供给@dnd-kit<DragDropProvider/>的sensors属性
  */
-function useDndSensors() {
-    return (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor, {
-        activationConstraint: {
-            distance: 5
-        }
-    }));
-}
+const defaultSensors = defaults => [
+    ...defaults,
+    react_1.PointerSensor.configure({
+        activationConstraints: [
+            new dom_1.PointerActivationConstraints.Distance({ value: 5 })
+        ]
+    })
+];
+exports.defaultSensors = defaultSensors;
 /**
- * <DndContext>组件通用的onDragEnd方法
+ * <DragDropProvider>组件通用的onDragEnd方法
  * @param e 事件
- * @param prevState 传入需要排序的数组
+ * @param items 传入需要排序的数组
  * @param primaryKey 索引用的主键，默认为`id`
+ * @return 返回新的数组，但如果顺序未改变，会得到null
  */
-function onDndDragEnd(e, prevState, primaryKey = 'id') {
-    const { active, over } = e;
-    if (!over || active.id === over.id) {
-        // 并未产生顺序的改变，返回undefined
-        return;
+function onDndDragEnd({ operation }, items, primaryKey = 'id') {
+    const { source, target, canceled } = operation;
+    if (!source || !target || canceled) {
+        return null;
+    }
+    const sourceIndex = items.findIndex(item => item[primaryKey] === source.id);
+    const targetIndex = items.findIndex(item => item[primaryKey] === target.id);
+    if (sourceIndex === -1 || targetIndex === -1) {
+        if (typeof source.initialIndex === 'number' && typeof source.index === 'number') {
+            const from = source.initialIndex;
+            const to = source.index;
+            if (from === to || from < 0 || from >= items.length) {
+                return null;
+            }
+            return arrayMove(items, from, to);
+        }
+        return null;
+    }
+    if (typeof source.index === 'number') {
+        if (source.index !== sourceIndex) {
+            return arrayMove(items, sourceIndex, source.index);
+        }
+    }
+    return arrayMove(items, sourceIndex, targetIndex);
+}
+function arrayMove(array, from, to) {
+    if (from === to) {
+        return array;
     }
-    const oldIndex = prevState.findIndex(v => v[primaryKey] === active.id);
-    const newIndex = prevState.findIndex(v => v[primaryKey] === over.id);
-    return (0, sortable_1.arrayMove)(prevState, oldIndex, newIndex);
+    const newArray = [...array];
+    newArray.splice(to, 0, newArray.splice(from, 1)[0]);
+    return newArray;
 }
 /**
  * <Tree>组件通用的onSort方法，注意：该方法会原地修改{@link treeNodes}

package/dist/esm/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/esm/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/esm/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/esm/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/esm/components/app/app.style.d.ts

@@ -2,5 +2,5 @@ import { Theme } from '../theme/index.js';
 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/esm/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/esm/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/esm/components/backdrop/backdrop.style.d.ts

@@ -2,4 +2,4 @@ import { BackdropProps } from './backdrop.js';
 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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/components/curd/curd.js

@@ -4,7 +4,7 @@ import { DataGrid } from '../dataGrid/index.js';
 import { Form } from '../form/index.js';
 import { CurdFilterable } from './curdFilterable.js';
 import { classes, style } from './curd.style.js';
-import { clsx, useControlled, useCurdColumns, useDerivedState, useLoading, useSync, mergeComponentProps, CONTROL_COLUMN_KEY, useStrictEffect } from '../../utils/index.js';
+import { clsx, useControlled, useCurdColumns, useDerivedState, useLoading, useSync, mergeComponentProps, CONTROL_COLUMN_KEY, useStrictEffect, cloneRef } from '../../utils/index.js';
 import { Button } from '../button/index.js';
 import { Tooltip } from '../tooltip/index.js';
 import { CurdColumnConfig } from './curdColumnConfig.js';
@@ -131,6 +131,7 @@ export const Curd = memo((props) => {
      * -------------------------------------------------------------
      * 行数据
      */
+    const containerRef = useRef(null);
     const { setOptions } = useSelectionContext();
     const [innerRows, _setInnerRows] = useDerivedState(props.rows);
     useEffect(() => {
@@ -139,6 +140,7 @@ export const Curd = memo((props) => {
     const setInnerRows = (data) => {
         setOptions?.(data);
         _setInnerRows(data);
+        containerRef.current.scrollTop = 0;
     };
     const [innerTotal, setInnerTotal] = useDerivedState(props.paginationProps?.total || 0);
     const suppressReload = useRef(false);
@@ -242,10 +244,12 @@ export const Curd = memo((props) => {
                                             _jsxs(_Fragment, { children: [toolbarRight, _jsx(Divider, { className: classes.divider, orientation: "vertical" })] }), reloadable &&
                                             _jsx(Tooltip, { title: "\u5237\u65B0", children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: _jsx(Icon, { icon: faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
                                             _jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
-                                            _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
+                                            _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, slotProps: {
+                                container: { ref: 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
                                 ? () => _jsx(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) &&
                 _jsx(CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));

package/dist/esm/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/esm/components/curd/curdColumnConfig.js

@@ -1,21 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { memo, useMemo } from 'react';
+import { memo, useMemo, useState, useRef } from 'react';
 import { Button } from '../button/index.js';
 import { Bubble } from '../bubble/index.js';
 import { classes, style } from './curdColumnConfig.style.js';
 import { MenuItem } from '../menuItem/index.js';
 import { Checkbox } from '../checkbox/index.js';
 import { SortableItem } from '../sortableItem/index.js';
-import { DndContext } from '@dnd-kit/core';
-import { SortableContext } from '@dnd-kit/sortable';
-import { isUnset, onDndDragEnd, useDndSensors } from '../../utils/index.js';
+import { defaultSensors, isUnset, onDndDragEnd } from '../../utils/index.js';
 import { Icon } from '../icon/index.js';
 import { faGear } from '@fortawesome/free-solid-svg-icons/faGear';
-export const CurdColumnConfig = memo(({ columns, innerVisible, setInnerVisible, setInnerOrder }) => {
-    columns ||= [];
-    const dragEndHandler = (e) => {
-        const newColumns = onDndDragEnd(e, columns, '_key');
-        newColumns && setInnerOrder(newColumns.flatMap(col => col._key ?? []));
+import { DragDropProvider, useDragDropMonitor } from '@dnd-kit/react';
+export const CurdColumnConfig = memo((props) => {
+    const dragEndHandler = e => {
+        const newColumns = onDndDragEnd(e, props.columns || [], '_key');
+        newColumns && props.setInnerOrder(newColumns.flatMap(col => col._key ?? []));
+    };
+    return (_jsx(DragDropProvider, { sensors: defaultSensors, onDragEnd: dragEndHandler, children: _jsx(CurdColumnConfigContent, { ...props }) }));
+});
+const CurdColumnConfigContent = memo(({ columns, innerVisible, setInnerVisible }) => {
+    const isDragging = useRef(false);
+    useDragDropMonitor({
+        onDragStart: () => isDragging.current = true,
+        onDragEnd: () => isDragging.current = false
+    });
+    const [open, setOpen] = useState(false);
+    const openChangeHandler = (open) => {
+        if (open || !isDragging.current) {
+            setOpen(open);
+        }
     };
     const visibleSet = useMemo(() => {
         return new Set(innerVisible);
@@ -25,12 +37,12 @@ export const CurdColumnConfig = memo(({ columns, innerVisible, setInnerVisible,
             ? [...o, key]
             : o.filter(k => k !== key));
     };
-    return (_jsx(Bubble, { css: style, placement: "bottomRight", content: _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: _jsxs("div", { className: classes.content, children: [_jsxs("div", { className: classes.title, children: [_jsx("div", { className: classes.titleText, children: "\u5217\u8BBE\u7F6E" }), _jsx("div", { className: classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => {
-                            const id = col._key;
-                            const checked = !isUnset(id) && visibleSet.has(id);
-                            return (_jsx(SortableItem, { id: id ?? i, component: MenuItem, className: classes.item, prefix: _jsx(Checkbox, { className: 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: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", children: _jsx(Icon, { icon: faGear }) }) }));
+    return (_jsx(Bubble, { css: style, open: open, onOpenChange: openChangeHandler, placement: "bottomRight", trigger: ['hover', 'click'], content: _jsxs("div", { className: classes.content, children: [_jsxs("div", { className: classes.title, children: [_jsx("div", { className: classes.titleText, children: "\u5217\u8BBE\u7F6E" }), _jsx("div", { className: classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => {
+                    const id = col._key;
+                    const checked = !isUnset(id) && visibleSet.has(id);
+                    return (_jsx(SortableItem, { id: id ?? i, index: i, component: MenuItem, className: classes.item, prefix: _jsx(Checkbox, { className: 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: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", children: _jsx(Icon, { icon: faGear }) }) }));
 });

package/dist/esm/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/esm/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/esm/components/dataGrid/dataGrid.js

@@ -126,7 +126,12 @@ export const DataGrid = memo(({ slots, slotProps, columns, rows, rowProps, prima
         const { page, pageSize } = _paginationProps;
         return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
     }, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
-    const renderedContent = (_jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(TableContainer, { ref: scrollerRef, className: classes.container, children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(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: [_jsx(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 }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
+    const { container: Container = TableContainer } = slots || {};
+    const { container: containerProps } = slotProps || {};
+    const renderedContent = (_jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(Container, { ...mergeComponentProps(containerProps, {
+                ref: scrollerRef,
+                className: classes.container
+            }), children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(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: [_jsx(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 }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
                                         slots, slotProps,
                                         rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
                                         expandedSet, flattedColumns, toggleExpanded

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/components/image/image.style.js

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

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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[];