musae 0.2.13 → 0.2.14

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { CalendarProps } from "./types";
-declare const Calendar: ({ className, style, value, onClick: _onClick, focusedAt: _focusedAt }: CalendarProps) => React.JSX.Element;
+declare const Calendar: ({ className, style, value, onClick: _onClick, focusedAt: _focusedAt, }: CalendarProps) => React.JSX.Element;
 export default Calendar;

package/dist/components/calendar/calendar.js

@@ -52,7 +52,11 @@ var Calendar = function Calendar(_ref) {
     toPrevMonth = _useFocusedAt.toPrevMonth,
     toNextYear = _useFocusedAt.toNextYear,
     toNextMonth = _useFocusedAt.toNextMonth;
-  var dateCells = useDateCells([timespan, focusedAt, onClick]);
+  var dateCells = useDateCells({
+    timespan: timespan,
+    focusedAt: focusedAt,
+    click: onClick
+  });
   var headCells = useHeadCells();
   var classNames = useClassNames(ComponentToken.Calendar);
   var theme = useTheme();

package/dist/components/calendar/hooks.d.ts

@@ -11,7 +11,11 @@ export declare const useHeadCells: () => React.JSX.Element[] | undefined;
  * @description
  * dates
  */
-export declare const useDateCells: ([timespan, focusedAt, click]: [Timespan, Dayjs, Required<CalendarProps>["onClick"]]) => React.JSX.Element[];
+export declare const useDateCells: ({ timespan, focusedAt, click, }: {
+    timespan: Timespan;
+    focusedAt: Dayjs;
+    click: Required<CalendarProps>["onClick"];
+}) => React.JSX.Element[];
 /**
  * @description
  * time span
@@ -27,7 +31,7 @@ export declare const useValue: ({ onClick: _click, value, }: {
  * @description
  * point at
  */
-export declare const useFocusedAt: ({ focusedAt: _focusedAt }: {
+export declare const useFocusedAt: ({ focusedAt: _focusedAt, }: {
     focusedAt: CalendarProps["focusedAt"];
 }) => {
     focusedAt: dayjs.Dayjs;

package/dist/components/calendar/hooks.js

@@ -1,6 +1,6 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import dayjs from 'dayjs';
 import React, { useMemo, useCallback } from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
@@ -103,10 +103,9 @@ var useHeadCells = function useHeadCells() {
  * dates
  */
 var useDateCells = function useDateCells(_ref) {
-  var _ref2 = _slicedToArray(_ref, 3),
-    timespan = _ref2[0],
-    focusedAt = _ref2[1],
-    click = _ref2[2];
+  var timespan = _ref.timespan,
+    focusedAt = _ref.focusedAt,
+    click = _ref.click;
   var classNames = useClassNames(ComponentToken.Calendar);
   var theme = useTheme();
   return useMemo(function () {
@@ -127,9 +126,9 @@ var useDateCells = function useDateCells(_ref) {
       var styled = {
         cell: props(styles.cell, styles.date({
           backgroundColor: theme.colors[ColorToken.SecondaryContainer]
-        }), typography.body.large, isDisabled && styles.hidden, isBetween && [styles.range, isFrom && styles.from, isTo && styles.to]),
+        }), isDisabled && styles.hidden, isBetween && styles.range, isFrom && timespan.isRange && styles.from, isTo && timespan.isRange && styles.to, typography.body.large),
         trigger: {
-          className: "musae-1eddoca"
+          className: "musae-1eddoca musae-1lhwzte"
         }
       };
       prev.at(prev.length - 1).push( /*#__PURE__*/React.createElement("td", {
@@ -162,9 +161,9 @@ var useDateCells = function useDateCells(_ref) {
  * @description
  * time span
  */
-var useValue = function useValue(_ref4) {
-  var _click = _ref4.onClick,
-    value = _ref4.value;
+var useValue = function useValue(_ref3) {
+  var _click = _ref3.onClick,
+    value = _ref3.value;
   /// change handler
   var onClick = useCallback(function (_value) {
     _click === null || _click === void 0 || _click(_value);
@@ -189,8 +188,8 @@ var useValue = function useValue(_ref4) {
  * @description
  * point at
  */
-var useFocusedAt = function useFocusedAt(_ref5) {
-  var _focusedAt = _ref5.focusedAt;
+var useFocusedAt = function useFocusedAt(_ref4) {
+  var _focusedAt = _ref4.focusedAt;
   var _useControlledState = useControlledState(_focusedAt, {
       defaultState: dayjs()
     }),
@@ -199,26 +198,26 @@ var useFocusedAt = function useFocusedAt(_ref5) {
     setFocusedAt = _useControlledState2[1];
   /// next year
   var toNextYear = useCallback(function () {
-    setFocusedAt(function (__focusedAt) {
-      return __focusedAt.add(1, "year");
+    setFocusedAt(function (prev) {
+      return prev.add(1, "year");
     });
   }, [setFocusedAt]);
   /// prev year
   var toPrevYear = useCallback(function () {
-    setFocusedAt(function (__focusedAt) {
-      return __focusedAt.subtract(1, "year");
+    setFocusedAt(function (prev) {
+      return prev.subtract(1, "year");
     });
   }, [setFocusedAt]);
   /// next month
   var toNextMonth = useCallback(function () {
-    setFocusedAt(function (__focusedAt) {
-      return __focusedAt.add(1, "month");
+    setFocusedAt(function (prev) {
+      return prev.add(1, "month");
     });
   }, [setFocusedAt]);
   /// prev month
   var toPrevMonth = useCallback(function () {
-    setFocusedAt(function (__focusedAt) {
-      return __focusedAt.subtract(1, "month");
+    setFocusedAt(function (prev) {
+      return prev.subtract(1, "month");
     });
   }, [setFocusedAt]);
   return {

package/dist/components/cascader/hooks.d.ts

@@ -6,7 +6,7 @@ import type { Option } from "../../types/option";
  * @description
  * cascader value
  */
-export declare const useValue: ([valueInProps, readableOptions, readablePaths, mode, close, setAdditionalMenusItems]: [CascaderProps["value"], ReadableOptions, ReadablePaths, CascaderProps["mode"], close: VoidFunction, Dispatch<SetStateAction<MenuItem[][]>>]) => {
+export declare const useValue: ([valueInProps, readableOptions, readablePaths, mode, close, setAdditionalMenusItems,]: [CascaderProps["value"], ReadableOptions, ReadablePaths, CascaderProps["mode"], close: VoidFunction, Dispatch<SetStateAction<MenuItem[][]>>]) => {
     values: Map<number, Required<Pick<Option, "value" | "label">>[]>;
     onChange: (id: number) => void;
 };

package/dist/components/cascader/hooks.js

@@ -20,7 +20,7 @@ var useValue = function useValue(_ref) {
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     _value = _useControlledState2[0],
     setValue = _useControlledState2[1];
-  /// convert value
+  // convert value
   var values = useMemo(function () {
     return toValues(_value).reduce(function (prev, keysOrOptions) {
       /// read item id for menu
@@ -40,11 +40,11 @@ var useValue = function useValue(_ref) {
         _keysOrOptions$reduce2 = _slicedToArray(_keysOrOptions$reduce, 2),
         id = _keysOrOptions$reduce2[0],
         options = _keysOrOptions$reduce2[1];
-      /// set item
+      // set item
       return id ? prev.set(id, options) : prev;
     }, new Map());
   }, [_value, readableOptions]);
-  /// change handler
+  // change handler
   var onChange = useCallback(function (id) {
     // on menu click, when menu has children, add submenu
     // when menu has no children, just change value and close dropdown
@@ -79,9 +79,9 @@ var useValue = function useValue(_ref) {
       close();
       return;
     }
-    /// in multiple mode
-    /// click menu item twice mean cancel it
-    /// else add current values
+    // in multiple mode
+    // click menu item twice mean cancel it
+    // else add current values
     var isRemoved = values.has(id) && values["delete"](id);
     setValue([].concat(_toConsumableArray(_toConsumableArray(values.values()).map(toKeys)), _toConsumableArray(isRemoved ? [] : [_values])));
   }, [readablePaths, readableOptions, mode, values, setValue, setAdditionalMenusItems, close]);

package/dist/components/checkbox/checkbox.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { CheckboxProps } from "./types";
-declare const Checkbox: ({ value, className, style, children, onChange, disabled, checked }: CheckboxProps) => React.JSX.Element;
+declare const Checkbox: ({ value, className, style, children, onChange, disabled, checked, }: CheckboxProps) => React.JSX.Element;
 export default Checkbox;

package/dist/components/checkbox/group.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { CheckboxGroupProps } from "./types";
-declare const Group: ({ value: controlledValue, children, onChange, disabled }: CheckboxGroupProps) => React.JSX.Element;
+declare const Group: ({ value: controlledValue, children, onChange, disabled, }: CheckboxGroupProps) => React.JSX.Element;
 export default Group;

package/dist/components/checkbox/index.d.ts

@@ -1,3 +1,3 @@
-export declare const Checkbox: (({ value, className, style, children, onChange, disabled, checked }: import("./types").CheckboxProps) => import("react").JSX.Element) & {
-    Group: ({ value: controlledValue, children, onChange, disabled }: import("./types").CheckboxGroupProps) => import("react").JSX.Element;
+export declare const Checkbox: (({ value, className, style, children, onChange, disabled, checked, }: import("./types").CheckboxProps) => import("react").JSX.Element) & {
+    Group: ({ value: controlledValue, children, onChange, disabled, }: import("./types").CheckboxGroupProps) => import("react").JSX.Element;
 };

package/dist/components/date-picker/hooks.d.ts

@@ -1,6 +1,6 @@
-import { DatePickerProps } from "./types";
-import { RefObject } from "react";
-import { PickerRef } from "../picker";
+import type { DatePickerProps } from "./types";
+import { type RefObject } from "react";
+import { type PickerRef } from "../picker";
 /**
  * @description
  * value

package/dist/components/date-range-picker/date-range-picker.js

@@ -14,7 +14,7 @@ var DateRangePicker = function DateRangePicker(props) {
     onChange = _useValue.onChange,
     value = _useValue.value;
   var classNames = useClassNames(ComponentToken.DateRangePicker);
-  /// picked date
+  // picked date
   var picked = useMemo(function () {
     var _value = _slicedToArray(value, 2),
       from = _value[0],
@@ -24,7 +24,7 @@ var DateRangePicker = function DateRangePicker(props) {
         className: "musae-98rzlu musae-78zum5 musae-18jba3g musae-6s0dn4"
       },
       trigger: {
-        className: "musae-98rzlu"
+        className: "musae-1iyjqo2 musae-s83m0k musae-4y2jaj musae-uxw1ft musae-b3r6kr musae-lyipyv musae-1a7a393"
       }
     };
     return /*#__PURE__*/React.createElement("div", {

package/dist/components/date-range-picker/hooks.d.ts

@@ -1,13 +1,12 @@
-import { DateRangePickerProps } from "./types";
-import { RefObject } from "react";
+import type { DateRangePickerProps } from "./types";
+import { type RefObject } from "react";
 import { Dayjs } from "dayjs";
-import { Partialable } from "@aiszlab/relax/types";
-import { PickerRef } from "../picker";
+import { type PickerRef } from "../picker";
 /**
  * @description
  * value
  */
 export declare const useValue: ([_value, _change, ref]: [DateRangePickerProps["value"], DateRangePickerProps["onChange"], RefObject<PickerRef>]) => {
-    value: [Partialable<Dayjs>, Partialable<Dayjs>];
+    value: [import("@aiszlab/relax/types").Partialable<Dayjs>, import("@aiszlab/relax/types").Partialable<Dayjs>];
     onChange: (_value: Dayjs) => void;
 };

package/dist/components/date-range-picker/hooks.js

@@ -20,7 +20,7 @@ var useValue = function useValue(_ref) {
   var onChange = useCallback(function (_value) {
     var _value$filter$length, _value$filter, _ref$current;
     // click first time
-    if ([0, 2].includes((_value$filter$length = (_value$filter = value.filter(function (_value) {
+    if (new Set([0, 2]).has((_value$filter$length = (_value$filter = value.filter(function (_value) {
       return !!_value;
     })) === null || _value$filter === void 0 ? void 0 : _value$filter.length) !== null && _value$filter$length !== void 0 ? _value$filter$length : 0)) {
       setValue([_value, void 0]);

package/dist/components/dialog/popup.js

@@ -14,7 +14,7 @@ import { ColorToken } from '../../utils/colors.js';
 import { typography } from '../theme/theme.js';
 import clsx from 'clsx';
 import { useClosable } from '../../hooks/use-closable.js';
-import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.69_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
+import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.71_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
 
 var _excluded = ["onClose", "open", "closable", "onClosed"];
 var styles = {

package/dist/components/drawer/popup.js

@@ -14,7 +14,7 @@ import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
 import { useClosable } from '../../hooks/use-closable.js';
-import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.69_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
+import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.71_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
 
 var _excluded = ["open", "onClose", "placement", "closable", "onClosed", "size"];
 var styles = {

package/dist/components/input/input.js

@@ -134,7 +134,7 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     invalid = _ref$invalid === void 0 ? false : _ref$invalid,
     readOnly = _ref.readOnly,
     maxLength = _ref.maxLength,
-    __value = _ref.value,
+    valueInProps = _ref.value,
     onBlur = _ref.onBlur,
     onChange = _ref.onChange,
     onClick = _ref.onClick,
@@ -160,7 +160,7 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   }, []);
   /// controlled value
-  var _useControlledState = useControlledState(__value, {
+  var _useControlledState = useControlledState(valueInProps, {
       defaultState: ""
     }),
     _useControlledState2 = _slicedToArray(_useControlledState, 2),

package/dist/components/number-input/hooks.js

@@ -1,6 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useControlledState, useEvent, isUndefined } from '@aiszlab/relax';
-import { useMemo } from 'react';
 
 /**
  * @description
@@ -12,9 +11,6 @@ var useValue = function useValue(_ref) {
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     value = _useControlledState2[0],
     setValue = _useControlledState2[1];
-  var __value = useMemo(function () {
-    return value;
-  }, [value]);
   var change = useEvent(function (___value) {
     // ignore invalid character
     if (!/^-?(?:\d+)?(\.)?\d*$/.test(___value) && ___value !== "") {
@@ -27,7 +23,7 @@ var useValue = function useValue(_ref) {
     }
   });
   return {
-    value: __value,
+    value: value,
     change: change
   };
 };

package/dist/components/radio/group.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { RadioGroupProps } from "./types";
+import type { RadioGroupProps } from "./types";
 declare const Group: ({ disabled, children, ...props }: RadioGroupProps) => React.JSX.Element;
 export default Group;

package/dist/components/radio/group.js

@@ -10,16 +10,16 @@ var Group = function Group(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
-  /// controlled value
+  // controlled value
   var _useControlledState = useControlledState(props.value),
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     value = _useControlledState2[0],
     setValue = _useControlledState2[1];
-  /// value change handler
+  // value change handler
   var change = useCallback(function (value) {
     setValue(value);
   }, [setValue]);
-  /// context value
+  // context value
   var contextValue = useMemo(function () {
     return {
       value: value,

package/dist/components/radio/radio.js

@@ -185,18 +185,18 @@ var Radio = function Radio(_ref) {
     var _contextValue$isDisab;
     return (_contextValue$isDisab = contextValue === null || contextValue === void 0 ? void 0 : contextValue.isDisabled) !== null && _contextValue$isDisab !== void 0 ? _contextValue$isDisab : disabled;
   }, [contextValue === null || contextValue === void 0 ? void 0 : contextValue.isDisabled, disabled]);
-  /// check current radio is checked
-  /// if current radio is in provider, use provider context value first
-  /// or not, use isChecked property
-  /// otherwise, it control itself
+  // check current radio is checked
+  // if current radio is in provider, use provider context value first
+  // or not, use isChecked property
+  // otherwise, it control itself
   var isChecked = useMemo(function () {
     if (contextValue) {
       return value === contextValue.value;
     }
     return !!_isChecked;
   }, [contextValue, _isChecked, value]);
-  /// change handler for radio
-  /// radio do not support cancel checked
+  // change handler for radio
+  // radio do not support cancel checked
   var change = useCallback(function () {
     // if chekced, ignore
     if (isChecked) return;

package/dist/components/rate/hooks.d.ts

@@ -1,4 +1,4 @@
-import { RateProps } from "./types";
+import type { RateProps } from "./types";
 /**
  * @description
  * value hooks

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

@@ -1,5 +1,6 @@
 import { type Key, type RefObject } from "react";
 import type { TabItem } from "./types";
+import type { Partialable } from "@aiszlab/relax/types";
 /**
  * @description
  * use tab context
@@ -14,7 +15,7 @@ export declare const useTabs: ({ activeKey: _activeKey, items, defaultActiveKey,
     items: TabItem[];
     defaultActiveKey?: Key;
 }) => {
-    activeKey: string | number | bigint | undefined;
+    activeKey: Partialable<Key>;
     activatedKeys: Set<Key>;
     changeActiveKey: (key: Key) => void;
 };

package/dist/components/time-picker/hooks.d.ts

@@ -1,7 +1,7 @@
 import type { TimePickerProps } from "./types";
 import dayjs from "dayjs";
-import { RefObject } from "react";
-import { PickerRef } from "../picker";
+import { type RefObject } from "react";
+import type { PickerRef } from "../picker";
 /**
  * @description
  * value

package/dist/components/transfer/hooks.js

@@ -46,7 +46,7 @@ var useTransfer = function useTransfer(props) {
       return [].concat(_toConsumableArray(prev), _toConsumableArray(transferKeys));
     });
     setTransferKeys([]);
-  }, [transferKeys]);
+  }, [transferKeys, setValue]);
   var untransfer = useCallback(function () {
     setValue(function () {
       var prev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -56,7 +56,7 @@ var useTransfer = function useTransfer(props) {
       }, new Set(prev)));
     });
     setUntransferKeys([]);
-  }, [untransferKeys]);
+  }, [untransferKeys, setValue]);
   return {
     transferred: transferred,
     untransferred: untransferred,

package/dist/stylex.css

@@ -140,9 +140,12 @@
 .musae-3nfvp2:not(#\#):not(#\#):not(#\#){display:inline-flex}
 .musae-1s85apg:not(#\#):not(#\#):not(#\#){display:none}
 .musae-bh8q5q:not(#\#):not(#\#):not(#\#){fill:none}
+.musae-4y2jaj:not(#\#):not(#\#):not(#\#){flex-basis:fit-content}
 .musae-dt5ytf:not(#\#):not(#\#):not(#\#){flex-direction:column}
 .musae-1q0g3np:not(#\#):not(#\#):not(#\#){flex-direction:row}
+.musae-1iyjqo2:not(#\#):not(#\#):not(#\#){flex-grow:1}
 .musae-2lah0s:not(#\#):not(#\#):not(#\#){flex-shrink:0}
+.musae-s83m0k:not(#\#):not(#\#):not(#\#){flex-shrink:1}
 .musae-1a02dak:not(#\#):not(#\#):not(#\#){flex-wrap:wrap}
 .musae-1j6dyjg:not(#\#):not(#\#):not(#\#){font-size:11px}
 .musae-fifm61:not(#\#):not(#\#):not(#\#){font-size:12px}
@@ -234,6 +237,7 @@ html:not([dir='rtl']) .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:left}
 html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 html:not([dir='rtl']) .musae-p4054r:not(#\#):not(#\#):not(#\#){text-align:right}
 html[dir='rtl'] .musae-p4054r:not(#\#):not(#\#):not(#\#){text-align:left}
+.musae-lyipyv:not(#\#):not(#\#):not(#\#){text-overflow:ellipsis}
 .musae-1bndym7:not(#\#):not(#\#):not(#\#){transform-origin:50% 50%}
 .musae-1g0ag68:not(#\#):not(#\#):not(#\#){transform-origin:center}
 .musae-9tu13d:not(#\#):not(#\#):not(#\#){transform:rotate(-90deg)}
@@ -275,6 +279,7 @@ html[dir='rtl'] .musae-p4054r:not(#\#):not(#\#):not(#\#){text-align:left}
 .musae-mn8nw1:not(#\#):not(#\#):not(#\#){z-index:var(--musae-80rspi)}
 .musae-1tv1kli:not(#\#):not(#\#):not(#\#){z-index:var(--musae-9gpkaf)}
 .musae-1q93749:not(#\#):not(#\#):not(#\#){z-index:var(--musae-ah5ngi)}
+.musae-1lhwzte:not(#\#):not(#\#):not(#\#){z-index:var(--musae-dlxqgz)}
 .musae-aefx0h:not(#\#):not(#\#):not(#\#){z-index:var(--musae-if0yew)}
 .musae-1axsr4t:not(#\#):not(#\#):not(#\#){z-index:var(--musae-oqacdq)}
 .musae-5w6sei:not(#\#):not(#\#):not(#\#){z-index:var(--musae-ymrixl)}
@@ -347,6 +352,7 @@ html[dir='rtl'] .musae-p4054r:not(#\#):not(#\#):not(#\#){text-align:left}
 .musae-1jzhcrs:not(#\#):not(#\#):not(#\#):not(#\#){min-width:200px}
 .musae-15cq3s0:not(#\#):not(#\#):not(#\#):not(#\#){min-width:480px}
 .musae-13to73x:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--minWidth,revert)}
+.musae-1a7a393:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--musae-16n5srz)}
 .musae-yumy05:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--musae-1aj7t22)}
 .musae-70jws7:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--musae-1l9c3uf)}
 .musae-h2iun8:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--musae-1spnrok)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "pnpm": ">=9"
   },
   "dependencies": {
-    "@aiszlab/relax": "^1.2.69",
+    "@aiszlab/relax": "^1.2.71",
     "@babel/runtime": "^7.25.0",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",