@canlooks/can-ui 0.0.164 → 0.0.166

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.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.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.d.ts

@@ -1,8 +1,10 @@
 import { ReactNode } from 'react';
 import { OverlayBaseProps } from '../overlayBase';
-import { ResponsiveProp } from '../../types';
+import { DivProps, ResponsiveProp, SlotsAndProps } from '../../types';
 import { TransitionBaseProps } from '../transitionBase';
-export interface DrawerProps extends Omit<OverlayBaseProps, 'title'> {
+export interface DrawerProps extends Omit<OverlayBaseProps, 'title'>, SlotsAndProps<{
+    scroller: DivProps;
+}> {
     title?: ReactNode;
     footer?: ReactNode;
     showClose?: ReactNode;
@@ -21,4 +23,4 @@ export interface DrawerProps extends Omit<OverlayBaseProps, 'title'> {
     onScrollToBottom?(): void;
 }
 export type DrawerCloseReason = 'escape' | 'closed' | 'maskClicked';
-export declare function Drawer({ title, footer, showClose, size, placement, maskClosable, escapeClosable, defaultOpen, open, onClose, slideProps, onScrollToTop, toBottomThreshold, onScrollToBottom, ...props }: DrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Drawer({ slots, slotProps, title, footer, showClose, size, placement, maskClosable, escapeClosable, defaultOpen, open, onClose, slideProps, onScrollToTop, toBottomThreshold, onScrollToBottom, ...props }: DrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/drawer/drawer.js

@@ -16,7 +16,7 @@ const placementToDirection = {
     top: 'down',
     bottom: 'up'
 };
-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, onScrollToTop, toBottomThreshold = 5, onScrollToBottom, ...props }) {
+function Drawer({ slots = {}, slotProps = {}, title, footer, showClose = true, size = { xs: '100%', sm: '75%', md: '50%', lg: '25%' }, placement = 'right', maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, slideProps, onScrollToTop, toBottomThreshold = 5, onScrollToBottom, ...props }) {
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open);
     const close = (reason) => {
         onClose?.(reason);
@@ -46,7 +46,7 @@ function Drawer({ title, footer, showClose = true, size = { xs: '100%', sm: '75%
         }
     };
     (0, react_1.useEffect)(() => {
-        if (innerOpen.current) {
+        if (innerOpen.current && bodyWrapRef.current) {
             const resizeObserver = new ResizeObserver(onScroll);
             resizeObserver.observe(bodyWrapRef.current);
             return () => {
@@ -55,6 +55,8 @@ function Drawer({ title, footer, showClose = true, size = { xs: '100%', sm: '75%
         }
         return;
     }, [innerOpen.current]);
+    const { scroller: Scroller = 'div' } = slots;
+    const { scroller: scrollerProps } = slotProps;
     return ((0, jsx_runtime_1.jsx)(overlayBase_1.OverlayBase, { ...props, css: (0, drawer_style_1.useStyle)({ size: typeof size === 'object' ? size : { xs: size } }), className: (0, utils_1.clsx)(drawer_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: (0, jsx_runtime_1.jsx)(transitionBase_1.Slide, { direction: placementToDirection[placement], ...slideProps, in: innerOpen.current, className: (0, utils_1.clsx)(drawer_style_1.classes.drawer, slideProps?.className), children: (0, jsx_runtime_1.jsxs)("div", { className: drawer_style_1.classes.drawerWrap, children: [!!(title || showClose) &&
                         (0, jsx_runtime_1.jsxs)("div", { className: drawer_style_1.classes.titleRow, children: [(0, jsx_runtime_1.jsx)("div", { className: drawer_style_1.classes.title, children: title }), showClose &&
                                     (0, jsx_runtime_1.jsx)(button_1.Button, { className: drawer_style_1.classes.close, shape: "circular", variant: "text", color: "text.secondary", onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAnglesRight_1.faAnglesRight, style: {
@@ -64,5 +66,9 @@ function Drawer({ title, footer, showClose = true, size = { xs: '100%', sm: '75%
                                                     top: '-90deg',
                                                     bottom: '90deg',
                                                 }[placement]
-                                            } }) })] }), (0, jsx_runtime_1.jsx)("div", { ref: bodyRef, className: drawer_style_1.classes.body, onScroll: onScroll, children: (0, jsx_runtime_1.jsx)("div", { ref: bodyWrapRef, className: drawer_style_1.classes.bodyWrap, children: props.children }) })] }) }) }));
+                                            } }) })] }), (0, jsx_runtime_1.jsx)(Scroller, { ...(0, utils_1.mergeComponentProps)(scrollerProps, {
+                            ref: bodyRef,
+                            className: drawer_style_1.classes.body,
+                            onScroll
+                        }), children: (0, jsx_runtime_1.jsx)("div", { ref: bodyWrapRef, className: drawer_style_1.classes.bodyWrap, children: props.children }) })] }) }) }));
 }

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;

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

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