@canlooks/can-ui 0.0.164 → 0.0.166

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

package/dist/esm/components/selectBase/selectBase.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/esm/components/selectedList/selectedList.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/serialInput/serialInput.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/skeleton/skeleton.style.d.ts

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

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

@@ -5,13 +5,13 @@ export declare const classes: {
     track: string;
     prefix: string;
     suffix: string;
+    handle: string;
     rail: string;
     railWrap: string;
     trackCorner: string;
-    handle: string;
 } & {
     root: string;
 };
 export declare function useStyle({ color }: {
     color: ColorPropsValue;
-}): import("@emotion/react").SerializedStyles;
+}): import("@emotion/utils").SerializedStyles;

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

@@ -1,10 +1,11 @@
 import { ElementType } from 'react';
-import { Arguments } from '@dnd-kit/sortable/dist/hooks/useSortable';
 import { Id, OverridableComponent, OverridableProps } from '../../types.js';
+import { UseSortableInput } from '@dnd-kit/react/sortable';
 export type SortableItemOwnProps = {
     id: Id;
+    index: number;
     disabled?: boolean;
-    sortableArguments?: Arguments;
+    sortableArguments?: UseSortableInput;
     noStyle?: boolean;
 };
 export type SortableItemProps<C extends ElementType = 'div'> = OverridableProps<SortableItemOwnProps, C>;

package/dist/esm/components/sortableItem/sortableItem.js

@@ -1,37 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useCallback, useEffect, useRef } from 'react';
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { cloneRef, clsx, useSync } from '../../utils/index.js';
-import { Global } from '@emotion/react';
-import { classes, globalGrabbingStyle, style } from './sortableItem.style.js';
-export const SortableItem = (({ component: Component = 'div', id, disabled, sortableArguments, noStyle, ...props }) => {
-    const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { cloneRef, clsx } from '../../utils/index.js';
+import { classes } from './sortableItem.style.js';
+import { useSortable } from '@dnd-kit/react/sortable';
+export const SortableItem = (({ component: Component = 'div', id, index, disabled, sortableArguments, noStyle, ...props }) => {
+    const { ref } = useSortable({
         ...sortableArguments,
-        disabled,
-        id
+        id,
+        index,
+        disabled
     });
-    const preventDefaultCallback = useRef(void 0);
-    const removeListener = () => {
-        if (preventDefaultCallback.current) {
-            removeEventListener('touchmove', preventDefaultCallback.current);
-            preventDefaultCallback.current = void 0;
-        }
-        removeEventListener('pointerup', onPointerUp);
-    };
-    const onPointerUp = useCallback(removeListener, []);
-    const syncOnTouchStart = useSync(props.onTouchStart);
-    const onTouchStart = useCallback((e) => {
-        syncOnTouchStart.current?.(e);
-        addEventListener('touchmove', preventDefaultCallback.current = e => {
-            e.cancelable && e.preventDefault();
-        }, { passive: false });
-        addEventListener('pointerup', onPointerUp);
-    }, []);
-    useEffect(() => removeListener, []);
-    return (_jsxs(_Fragment, { children: [_jsx(Component, { ...attributes, ...listeners, ...props, ref: cloneRef(setNodeRef, props.ref), css: style, className: clsx(classes.root, props.className), style: {
-                    transform: CSS.Transform.toString(transform),
-                    transition,
-                    ...props.style
-                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-no-style": noStyle, "data-dragging": isDragging, "data-draggable": !disabled }), !noStyle && isDragging && _jsx(Global, { styles: globalGrabbingStyle })] }));
+    return (_jsx(Component, { ...props, ref: cloneRef(ref, props.ref), className: clsx(classes.root, props.className), "data-no-style": noStyle, "data-draggable": !disabled }));
 });

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

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

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

@@ -1,21 +1,2 @@
-import { css } from '@emotion/react';
 import { defineInnerClasses } from '../../utils/index.js';
 export const classes = defineInnerClasses('sortable-item');
-export const style = css `
-    @layer reset {
-        &:not([data-no-style=true]) {
-            &[data-draggable=true] {
-                cursor: grab;
-
-                &:active {
-                    cursor: grabbing;
-                }
-            }
-        }
-    }
-`;
-export const globalGrabbingStyle = css `
-    * {
-        cursor: grabbing;
-    }
-`;

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

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

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

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

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

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

package/dist/esm/components/tabs/tab.d.ts

@@ -15,5 +15,7 @@ export interface TabProps extends Omit<DivProps, 'prefix'> {
     sortable?: boolean;
     /** @private 内部使用，用于表示改选项卡是否为激活状态 */
     _active?: boolean;
+    /** @private */
+    _index?: number;
 }
-export declare const Tab: React.MemoExoticComponent<({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, ...props }: TabProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Tab: React.MemoExoticComponent<({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, _index, ...props }: TabProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/tabs/tab.js

@@ -8,7 +8,7 @@ import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
 import { Icon } from '../icon/index.js';
 import { SortableItem } from '../sortableItem/index.js';
 import { Collapse } from '../transitionBase/index.js';
-export const Tab = memo(({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, ...props }) => {
+export const Tab = memo(({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, _index, ...props }) => {
     const context = useTabsContext();
     const colorValue = useColor(color ?? context.color);
     const _closable = closable ?? context.closable;
@@ -17,7 +17,7 @@ export const Tab = memo(({ prefix, suffix, color, orientation, label, value, dis
         context.onClose?.(value);
     };
     const _sortable = sortable ?? context.sortable;
-    return (_jsx(SortableItem, { ...props, className: clsx(classes.tabWrapper, props.className), component: Collapse, orientation: "horizontal", id: value, disabled: !_sortable, children: _jsxs("div", { className: classes.tab, style: {
+    return (_jsx(SortableItem, { ...props, className: clsx(classes.tabWrapper, props.className), component: Collapse, orientation: "horizontal", id: value, index: _index, disabled: !_sortable, children: _jsxs("div", { className: classes.tab, style: {
                 borderColor: context.variant === 'line' && !context.animating && _active ? colorValue : void 0,
                 color: _active ? colorValue : void 0,
                 ...props.style

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

@@ -1,7 +1,7 @@
 import { CSSProperties, ReactElement, ReactNode, SetStateAction, Dispatch } from 'react';
 import { ColorPropsValue, DivProps, Id, Obj, Size } from '../../types.js';
 import { Tab, TabProps } from './tab.js';
-import { DragEndEvent } from '@dnd-kit/core';
+import { DragDropEvents } from '@dnd-kit/abstract';
 export type TabType = TabProps & Obj;
 type TabsSharedProps = {
     variant?: 'line' | 'card';
@@ -32,7 +32,7 @@ export interface TabsProps<T extends TabType = TabType> extends TabsSharedProps,
      * @param e
      * @param tabs 仅{@link tabs}模式支持，使用children时，该参数为`undefined`
      */
-    onSort?(e: DragEndEvent, tabs?: T[]): void;
+    onSort?(e: Parameters<DragDropEvents<any, any, any>['dragend']>[0], tabs?: T[]): void;
     /** 触发change事件的事件，默认为`click` */
     changeEvent?: 'click' | 'pointerDown';
 }

package/dist/esm/components/tabs/tabs.js

@@ -2,14 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
 import { Children, cloneElement, createContext, isValidElement, memo, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { classes, useStyle } from './tabs.style.js';
-import { clsx, cloneRef, isUnset, useControlled, useDerivedState, useDndSensors, onDndDragEnd } from '../../utils/index.js';
+import { clsx, cloneRef, isUnset, useControlled, useDerivedState, defaultSensors, onDndDragEnd } from '../../utils/index.js';
 import { useTheme } from '../theme/index.js';
 import { Tab } from './tab.js';
 import { TabsEllipsis } from './tabsEllipsis.js';
 import { LineIndicator } from './lineIndicator.js';
-import { DndContext } from '@dnd-kit/core';
-import { SortableContext } from '@dnd-kit/sortable';
 import { TransitionGroup } from 'react-transition-group';
+import { DragDropProvider } from '@dnd-kit/react';
 const TabsContext = createContext({});
 export function useTabsContext() {
     return useContext(TabsContext);
@@ -45,10 +44,10 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', size
                     }, value: value, label: p[labelKey], [eventName]: (e) => {
                         p[eventName]?.(e);
                         setInnerValue(value);
-                    }, _active: active }));
+                    }, _active: active, _index: i }));
             });
         }
-        return Children.map(props.children, c => {
+        return Children.map(props.children, (c, _index) => {
             if (isValidElement(c)) {
                 const { value } = c.props;
                 const active = !isUnset(value) && value === innerValue.current;
@@ -66,7 +65,8 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', size
                             !isUnset(value) && setInnerValue(value);
                         }
                     },
-                    _active: active
+                    _active: active,
+                    _index
                 });
             }
             return c;
@@ -121,26 +121,23 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', size
      * ----------------------------------------------------------------
      * 拖拽
      */
-    const tabKeys = tabs
-        ? tabs.map(tab => tab[primaryKey])
-        : Children.map(props.children, c => isValidElement(c) ? c.props.value : c);
-    const dragEndHandler = (e) => {
+    const dragEndHandler = e => {
         if (props.onSort) {
             const newTabs = tabs
                 ? onDndDragEnd(e, tabs, primaryKey)
                 : void 0;
-            props.onSort(e, newTabs);
+            newTabs && props.onSort(e, newTabs);
         }
     };
     return (_jsxs("div", { ...props, css: useStyle({ color, variant }), className: clsx(classes.root, props.className), "data-size": size, "data-position": position, "data-animating": animating.current, "data-full-width": fullWidth, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsx("div", { className: classes.start, "data-show": shadowStart, children: !!prefix &&
-                    _jsx("div", { className: classes.prefix, children: prefix }) }), _jsx("div", { ref: scrollRef, className: classes.scroll, onScroll: setShadow, children: _jsx("div", { className: classes.scrollWrap, style: { justifyContent }, children: _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: tabKeys, disabled: !sortable, children: _jsxs(TabsContext, { value: useMemo(() => ({
-                                    color, variant, closable, onClose, sortable,
-                                    animating: animating.current, setAnimating
-                                }), [
-                                    color, variant, closable, onClose, sortable,
-                                    animating.current
-                                ]), children: [_jsx(TransitionGroup, { component: null, children: renderTabs() }), variant === 'line' &&
-                                        _jsx(LineIndicator, { value: innerValue.current, position: position, getActiveTab: getActiveTab })] }) }) }) }) }), _jsx("div", { className: classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
+                    _jsx("div", { className: classes.prefix, children: prefix }) }), _jsx("div", { ref: scrollRef, className: classes.scroll, onScroll: setShadow, children: _jsx("div", { className: classes.scrollWrap, style: { justifyContent }, children: _jsxs(TabsContext, { value: useMemo(() => ({
+                            color, variant, closable, onClose, sortable,
+                            animating: animating.current, setAnimating
+                        }), [
+                            color, variant, closable, onClose, sortable,
+                            animating.current
+                        ]), children: [_jsx(DragDropProvider, { sensors: defaultSensors, onDragEnd: dragEndHandler, children: _jsx(TransitionGroup, { component: null, children: renderTabs() }) }), variant === 'line' &&
+                                _jsx(LineIndicator, { value: innerValue.current, position: position, getActiveTab: getActiveTab })] }) }) }), _jsx("div", { className: classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
                     _jsxs("div", { className: classes.suffix, children: [(shadowStart || shadowEnd) &&
                                 _jsx(TabsEllipsis, { tabs: tabs, labelKey: labelKey, primaryKey: primaryKey, value: innerValue.current, onToggleSelected: setValueInEllipsis, children: props.children }), suffix] }) })] }));
 });

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

@@ -18,4 +18,4 @@ export declare const classes: {
     root: string;
 };
 export declare const indicatorWidth = 2;
-export declare function useStyle({ color, variant }: Required<Pick<TabsProps, 'color' | 'variant'>>): import("@emotion/react").SerializedStyles[];
+export declare function useStyle({ color, variant }: Required<Pick<TabsProps, 'color' | 'variant'>>): import("@emotion/utils").SerializedStyles[];

package/dist/esm/components/tabs/tabsEllipsis.style.d.ts

@@ -1 +1 @@
-export declare const tabsEllipsisPopperStyle: () => import("@emotion/react").SerializedStyles[];
+export declare const tabsEllipsisPopperStyle: () => import("@emotion/utils").SerializedStyles[];

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

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

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

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

package/dist/esm/components/toggleButton/toggleButton.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/tooltip/tooltip.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/touchRipple/touchRipple.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/transfer/transfer.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/transitionBase/transitionBase.style.d.ts

@@ -2,8 +2,8 @@ import { TransitionBaseProps } from './transitionBase.js';
 export declare const classes: {
     root: string;
 };
-export declare function useTransitionBaseStyle({ timeout }: Required<Pick<TransitionBaseProps<any>, 'timeout'>>): import("@emotion/react").SerializedStyles;
-export declare const fadeStyle: () => import("@emotion/react").SerializedStyles;
-export declare const sweepingStyle: () => import("@emotion/react").SerializedStyles;
-export declare function useGrowAndCollapseStyle({ orientation, _mode }: Required<Pick<TransitionBaseProps<any>, 'orientation' | '_mode'>>): import("@emotion/react").SerializedStyles;
-export declare function useSlideStyle({ direction, offset }: Required<Pick<TransitionBaseProps<any>, 'direction' | 'offset'>>): import("@emotion/react").SerializedStyles;
+export declare function useTransitionBaseStyle({ timeout }: Required<Pick<TransitionBaseProps<any>, 'timeout'>>): import("@emotion/utils").SerializedStyles;
+export declare const fadeStyle: () => import("@emotion/utils").SerializedStyles;
+export declare const sweepingStyle: () => import("@emotion/utils").SerializedStyles;
+export declare function useGrowAndCollapseStyle({ orientation, _mode }: Required<Pick<TransitionBaseProps<any>, 'orientation' | '_mode'>>): import("@emotion/utils").SerializedStyles;
+export declare function useSlideStyle({ direction, offset }: Required<Pick<TransitionBaseProps<any>, 'direction' | 'offset'>>): import("@emotion/utils").SerializedStyles;

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

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

package/dist/esm/components/tree/treeDnd.style.d.ts

@@ -12,5 +12,5 @@ export declare const treeDndClasses: {
 };
 export declare function useStyle({ indent }: {
     indent: number;
-}): import("@emotion/react").SerializedStyles;
-export declare const globalGrabbingStyle: import("@emotion/react").SerializedStyles;
+}): import("@emotion/utils").SerializedStyles;
+export declare const globalGrabbingStyle: import("@emotion/utils").SerializedStyles;

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

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

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

@@ -1,19 +1,18 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useImperativeHandle, useRef } from 'react';
 import { classes, style } from './upload.style.js';
-import { clsx, getRandomId, onDndDragEnd, useControlled, useDndSensors, mergeComponentProps } from '../../utils/index.js';
+import { clsx, getRandomId, onDndDragEnd, useControlled, mergeComponentProps, defaultSensors } from '../../utils/index.js';
 import { Button } from '../button/index.js';
 import { FileItem } from './fileItem.js';
 import { TransitionGroup } from 'react-transition-group';
 import { Collapse, Grow } from '../transitionBase/index.js';
 import { ImageItem } from './imageItem.js';
-import { DndContext } from '@dnd-kit/core';
-import { SortableContext } from '@dnd-kit/sortable';
 import { SortableItem } from '../sortableItem/index.js';
 import { DropArea } from './dropArea.js';
 import { Icon } from '../icon/index.js';
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { faUpload } from '@fortawesome/free-solid-svg-icons/faUpload';
+import { DragDropProvider } from '@dnd-kit/react';
 const markFileId = (files) => {
     if (files) {
         for (const file of files) {
@@ -87,7 +86,7 @@ export const Upload = memo(({ inputProps, type = 'file', accept = type === 'imag
     const removeHandler = (id) => {
         setInnerValue(o => o.filter(f => f.id !== id));
     };
-    const dragEndHandler = (e) => {
+    const dragEndHandler = e => {
         const newValue = onDndDragEnd(e, innerValue.current);
         newValue && setInnerValue(newValue);
     };
@@ -95,19 +94,19 @@ export const Upload = memo(({ inputProps, type = 'file', accept = type === 'imag
                     ref: innerInputRef,
                     className: classes.input,
                     onChange: inputChangeHandler
-                }), "data-hidden": "true" }), _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
-                        ? _jsxs(_Fragment, { children: [droppable
-                                    ? _jsx(DropArea, { onClick: () => innerInputRef.current.click(), onDrop: changeFn })
-                                    : showButton &&
-                                        _jsx(Button, { variant: "outlined", prefix: _jsx(Icon, { icon: faUpload }), ...buttonProps, onClick: buttonClick, children: buttonText }), _jsx(TransitionGroup, { className: classes.files, children: innerValue.current.map(file => _jsx(SortableItem, { component: Collapse, className: classes.sortable, id: file.id, children: _jsx(FileItem, { ref: r => {
-                                                r
-                                                    ? itemRefs.current.set(file.id, r)
-                                                    : itemRefs.current.delete(file.id);
-                                            }, file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }) }, file.id)) })] })
-                        : _jsxs(TransitionGroup, { className: classes.images, children: [_jsx(Grow, { children: _jsx("div", { className: classes.imageWrap, "data-clickable": "true", children: _jsx("div", { className: classes.image, onClick: () => innerInputRef.current.click(), children: _jsx(Icon, { icon: faPlus }) }) }) }), innerValue.current.map(file => _jsx(SortableItem, { component: Collapse, className: classes.sortable, id: file.id, orientation: "horizontal", children: _jsx(ImageItem, { ref: r => {
+                }), "data-hidden": "true" }), _jsx(DragDropProvider, { sensors: defaultSensors, onDragEnd: dragEndHandler, children: type === 'file'
+                    ? _jsxs(_Fragment, { children: [droppable
+                                ? _jsx(DropArea, { onClick: () => innerInputRef.current.click(), onDrop: changeFn })
+                                : showButton &&
+                                    _jsx(Button, { variant: "outlined", prefix: _jsx(Icon, { icon: faUpload }), ...buttonProps, onClick: buttonClick, children: buttonText }), _jsx(TransitionGroup, { className: classes.files, children: innerValue.current.map((file, index) => _jsx(SortableItem, { component: Collapse, className: classes.sortableItem, id: file.id, index: index, disabled: !sortable, children: _jsx(FileItem, { ref: r => {
                                             r
                                                 ? itemRefs.current.set(file.id, r)
                                                 : itemRefs.current.delete(file.id);
-                                        }, type: type, file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }, file.id) }, file.id))] }) }) })] }));
+                                        }, file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }) }, file.id)) })] })
+                    : _jsxs(TransitionGroup, { className: classes.images, children: [_jsx(Grow, { children: _jsx("div", { className: classes.imageWrap, "data-clickable": "true", children: _jsx("div", { className: classes.image, onClick: () => innerInputRef.current.click(), children: _jsx(Icon, { icon: faPlus }) }) }) }), innerValue.current.map((file, index) => _jsx(SortableItem, { component: Collapse, className: classes.sortableItem, id: file.id, index: index, disabled: !sortable, orientation: "horizontal", children: _jsx(ImageItem, { ref: r => {
+                                        r
+                                            ? itemRefs.current.set(file.id, r)
+                                            : itemRefs.current.delete(file.id);
+                                    }, type: type, file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }, file.id) }, file.id))] }) })] }));
 });
 Upload.DropArea = DropArea;