musae 0.2.21 → 0.2.24

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

@@ -1,8 +1,12 @@
 import React from "react";
-import type { AvatarProps } from "./types";
 /**
  * @description
  * `Avatar`
  */
-declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+declare const Avatar: React.ForwardRefExoticComponent<import("../../types/element").ComponentProps & {
+    src?: string;
+    alt?: string;
+    size?: "small" | "medium" | "large";
+    shape?: "circular" | "squared";
+} & React.RefAttributes<HTMLSpanElement>>;
 export default Avatar;

package/dist/components/avatar/avatar.js

@@ -11,7 +11,7 @@ import { typography } from '../theme/theme.js';
 import { useImageLoader, clsx } from '@aiszlab/relax';
 import { ComponentToken } from '../../utils/component-token.js';
 
-var _excluded = ["src", "alt", "shape", "size"];
+var _excluded = ["src", "alt", "shape", "size", "className", "style"];
 var styles = {
   avatar: function avatar(props) {
     return [{
@@ -140,6 +140,8 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _shape = _ref$shape === void 0 ? "circular" : _ref$shape,
     _ref$size = _ref.size,
     _size = _ref$size === void 0 ? "medium" : _ref$size,
+    className = _ref.className,
+    style = _ref.style,
     props$1 = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
   var group = useContext(Context);
@@ -160,10 +162,10 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     image: props(styles.image, styles[size])
   };
   return /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({}, props$1), {}, {
-    className: clsx(classNames[AvatarClassToken.Avatar], styled.avatar.className),
-    style: styled.avatar.style,
+    className: clsx(classNames[AvatarClassToken.Avatar], className, styled.avatar.className),
+    style: _objectSpread(_objectSpread({}, styled.avatar.style), style),
     ref: ref
-  }), loadStatus === "loaded" ? ( /*#__PURE__*/React.createElement("img", {
+  }), loadStatus === "loaded" ? (/*#__PURE__*/React.createElement("img", {
     draggable: false,
     src: src,
     alt: alt,

package/dist/components/avatar/group.js

@@ -39,7 +39,7 @@ var _Group = function Group(_ref) {
       hidden = _Children$toArray$red2[1];
     // got hidden nodes, show ellipse node
     if (hidden.length > 0) {
-      visible.push( /*#__PURE__*/React.createElement(Popover, {
+      visible.push(/*#__PURE__*/React.createElement(Popover, {
         content: /*#__PURE__*/React.createElement(_Group, {
           max: Infinity
         }, hidden),

package/dist/components/avatar/types.d.ts

@@ -1,11 +1,12 @@
 import type { ReactNode, RefAttributes } from "react";
+import { ComponentProps } from "../../types/element";
 type Size = "small" | "medium" | "large";
 type Shape = "circular" | "squared";
 /**
  * @description
  * avatar props
  */
-export type AvatarProps = {
+export type AvatarProps = ComponentProps & {
     /**
      * @description
      * src

package/dist/components/bench/bench.js

@@ -125,7 +125,7 @@ var Bench = function Bench(_ref) {
   }, !!_logo && /*#__PURE__*/React.createElement("img", {
     src: _logo === null || _logo === void 0 ? void 0 : _logo.url,
     alt: "logo"
-  }), !!_logo && ( /*#__PURE__*/React.createElement("div", {
+  }), !!_logo && (/*#__PURE__*/React.createElement("div", {
     className: styled.divider.className,
     style: styled.divider.style
   }, /*#__PURE__*/React.createElement(Divider, {
@@ -141,7 +141,7 @@ var Bench = function Bench(_ref) {
     style: styled.headerNavigation.style
   }, !!selectedKeys[0] && {
     selectedKeys: [selectedKeys[0]]
-  })), trailing), sideMenuItems.length > 0 && ( /*#__PURE__*/React.createElement(Sider, {
+  })), trailing), sideMenuItems.length > 0 && (/*#__PURE__*/React.createElement(Sider, {
     className: styled.sider.className,
     style: styled.sider.style
   }, /*#__PURE__*/React.createElement(Menu, _objectSpread({

package/dist/components/breadcrumb/item.js

@@ -76,7 +76,7 @@ var Item = function Item(_ref) {
     className: classNames[BreadcrumbClassToken.Item]
   }, isLink && /*#__PURE__*/React.createElement("a", {
     href: href
-  }, label), !isLink && label), !max && ( /*#__PURE__*/React.createElement("li", {
+  }, label), !isLink && label), !max && (/*#__PURE__*/React.createElement("li", {
     role: "separator",
     className: clsx(classNames[BreadcrumbClassToken.Separator], styled.separator.className),
     style: styled.separator.style

package/dist/components/calendar/hooks.js

@@ -131,7 +131,7 @@ var useDateCells = function useDateCells(_ref) {
           className: "musaex-gnae0u musaex-ksl8fa"
         }
       };
-      prev.at(prev.length - 1).push( /*#__PURE__*/React.createElement("td", {
+      prev.at(prev.length - 1).push(/*#__PURE__*/React.createElement("td", {
         title: formatted,
         key: formatted,
         className: clsx(classNames[CalendarClassToken.DateCell], _objectSpread(_defineProperty({}, classNames[CalendarClassToken.DateCellSelected], isSelected), timespan.isRange && _defineProperty(_defineProperty(_defineProperty({}, classNames[CalendarClassToken.DateCellInRange], isBetween), classNames[CalendarClassToken.DateCellRangeFrom], isFrom), classNames[CalendarClassToken.DateCellRangeTo], isTo)), styled.cell.className),

package/dist/components/checkbox/checkbox.js

@@ -76,7 +76,7 @@ var Checkbox = function Checkbox(_ref) {
     "aria-checked": isChecked,
     disabled: isDisabled,
     onChange: change
-  }), children && ( /*#__PURE__*/React.createElement("span", {
+  }), children && (/*#__PURE__*/React.createElement("span", {
     className: styled.label.className,
     style: styled.label.style
   }, children)));

package/dist/components/clock/clock.js

@@ -28,7 +28,7 @@ var Clock = function Clock(_ref) {
       onChange: function onChange(_value) {
         _onChange === null || _onChange === void 0 || _onChange(Object.values(_objectSpread(_objectSpread(_objectSpread({}, [0, 0, 0]), value), {}, _defineProperty({}, index, _value))));
       }
-    }), index === columns.length - 1 ? null : ( /*#__PURE__*/React.createElement(Divider, {
+    }), index === columns.length - 1 ? null : (/*#__PURE__*/React.createElement(Divider, {
       orientation: "vertical",
       key: "".concat(unit, "-divider")
     }))];

package/dist/components/collapse/item.js

@@ -110,7 +110,7 @@ var CollapseItem = function CollapseItem(_ref) {
   var _useExpandable = useExpandable(),
     expand = _useExpandable.expand,
     collapse = _useExpandable.collapse;
-  useUpdateEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  useUpdateEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:

package/dist/components/dialog/hooks.js

@@ -18,7 +18,7 @@ var useFooter = function useFooter(_ref) {
     _useLocale2 = _slicedToArray(_useLocale, 1),
     locale = _useLocale2[0];
   return useMemo(function () {
-    return footer !== null && footer !== void 0 ? footer : ( /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
+    return footer !== null && footer !== void 0 ? footer : (/*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
       onClick: onClose,
       color: "secondary",
       variant: "text"

package/dist/components/dialog/popup.js

@@ -126,7 +126,7 @@ var Popup = function Popup(_ref) {
     onKeyDown = _useClosable.onKeyDown,
     onOverlayClick = _useClosable.onOverlayClick;
   useEffect(function () {
-    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -199,13 +199,13 @@ var Popup = function Popup(_ref) {
     className: clsx(classNames[DialogClassToken.Panel], styled.panel.className),
     style: _objectSpread(_objectSpread({}, styled.panel.style), (_props$styles = props$1.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.panel),
     ref: panelRef
-  }, closer, !!props$1.title && ( /*#__PURE__*/React.createElement("div", {
+  }, closer, !!props$1.title && (/*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[DialogClassToken.Header], styled.header.className),
     style: styled.header.style
   }, props$1.title)), /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[DialogClassToken.Body], styled.body.className),
     style: _objectSpread(_objectSpread({}, styled.body.style), (_props$styles2 = props$1.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.body)
-  }, props$1.children), !!footer && ( /*#__PURE__*/React.createElement("div", {
+  }, props$1.children), !!footer && (/*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[DialogClassToken.Footer], styled.footer.className),
     style: styled.footer.style
   }, footer))));

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

@@ -1,4 +1,4 @@
 import { type DividerProps } from "./types";
 import React from "react";
-declare const Divider: ({ align, children, orientation, className, style, }: DividerProps) => React.JSX.Element;
+declare const Divider: ({ align, children, orientation, className, style, margin, }: DividerProps) => React.JSX.Element;
 export default Divider;

package/dist/components/divider/divider.js

@@ -9,16 +9,41 @@ import { ColorToken } from '../../utils/colors.js';
 import { typography } from '../theme/theme.js';
 import { clsx } from '@aiszlab/relax';
 import { ComponentToken } from '../../utils/component-token.js';
+import { useGutters } from '../../hooks/use-gutters.js';
 
 var styles = {
   divider: {
-    horizontal: {
-      width: "musaex-1k094eu",
-      $$css: true
+    horizontal: function horizontal(props) {
+      return [{
+        width: "musaex-1k094eu",
+        marginTop: "musaex-fdd01f",
+        marginBottom: "musaex-19qvvsl",
+        $$css: true
+      }, {
+        "--marginBlockStart": function (val) {
+          return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+        }(props.margins[0]),
+        "--marginBlockEnd": function (val) {
+          return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+        }(props.margins[1])
+      }];
     },
-    vertical: {
-      height: "musaex-1xj1dsn",
-      $$css: true
+    vertical: function vertical(props) {
+      return [{
+        height: "musaex-1xj1dsn",
+        marginInlineStart: "musaex-1f2nheo",
+        marginLeft: null,
+        marginRight: null,
+        marginInlineEnd: "musaex-1uoloo9",
+        $$css: true
+      }, {
+        "--marginInlineStart": function (val) {
+          return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+        }(props.margins[0]),
+        "--marginInlineEnd": function (val) {
+          return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+        }(props.margins[1])
+      }];
     }
   },
   simple: {
@@ -119,15 +144,22 @@ var Divider = function Divider(_ref) {
     _ref$orientation = _ref.orientation,
     orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation,
     className = _ref.className,
-    style = _ref.style;
+    style = _ref.style,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? 0 : _ref$margin;
   var classNames = useClassNames(ComponentToken.Divider);
   var offset = useOffset({
     align: align
   });
   var theme = useTheme();
   var isLabeled = !!children;
+  var margins = useGutters({
+    gutter: margin
+  });
   var styled = {
-    divider: props(styles.divider[orientation], !isLabeled && styles.simple[orientation]({
+    divider: props(styles.divider[orientation]({
+      margins: margins
+    }), !isLabeled && styles.simple[orientation]({
       backgroundColor: theme.colors[ColorToken.OutlineVariant]
     }), isLabeled && styles.labeled[orientation]({
       backgroundColor: theme.colors[ColorToken.OutlineVariant],
@@ -138,7 +170,7 @@ var Divider = function Divider(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[DividerClassToken.Divider], className, styled.divider.className),
     style: _objectSpread(_objectSpread({}, styled.divider.style), style)
-  }, !!children && ( /*#__PURE__*/React.createElement("span", {
+  }, !!children && (/*#__PURE__*/React.createElement("span", {
     className: clsx(classNames[DividerClassToken.Label], styled.label.className),
     style: styled.label.style
   }, children)));

package/dist/components/divider/types.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
-import { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "../../types/element";
+import type { Gutter } from "../../hooks/use-gutters";
 export type Align = "center" | "left" | "right";
 export type Orientation = "horizontal" | "vertical";
 /**
@@ -25,4 +26,9 @@ export interface DividerProps extends ComponentProps {
      * @default "horizontal"
      */
     orientation?: Orientation;
+    /**
+     * @description
+     * margin
+     */
+    margin?: Gutter;
 }

package/dist/components/drawer/popup.js

@@ -187,7 +187,7 @@ var Popup = function Popup(_ref) {
     onKeyDown = _useClosable.onKeyDown,
     onOverlayClick = _useClosable.onOverlayClick;
   useEffect(function () {
-    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:

package/dist/components/form/field/layout.js

@@ -52,7 +52,7 @@ var Layout = function Layout(_ref) {
     gutter: [0, 8],
     className: styled.item.className,
     style: styled.item.style
-  }, !!labelCol && props$1.label && ( /*#__PURE__*/React.createElement(Col, {
+  }, !!labelCol && props$1.label && (/*#__PURE__*/React.createElement(Col, {
     span: labelCol
   }, /*#__PURE__*/React.createElement("span", {
     className: clsx(styled.label.className),

package/dist/components/highlight/highlight.js

@@ -32,7 +32,7 @@ var Highlight = function Highlight(_ref) {
     // 2. replace with custom node
     var _Array$from$reduce = Array.from(children.matchAll(new RegExp(capture, "g"))).reduce(function (prev, item) {
         prev[0].push(children.slice(prev[1], item.index));
-        prev[0].push( /*#__PURE__*/React.createElement("span", {
+        prev[0].push(/*#__PURE__*/React.createElement("span", {
           className: clsx(classNames[HighlightClassToken.Capture], styled.className),
           style: styled.style,
           key: item.index

package/dist/components/i18n-button/hooks.js

@@ -19,7 +19,7 @@ var useLocales = function useLocales() {
     _useState2 = _slicedToArray(_useState, 2),
     locales = _useState2[0],
     setLocales = _useState2[1];
-  useMounted( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  useMounted(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     var _yield$import$catch;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {

package/dist/components/i18n-button/i18n-button.js

@@ -16,8 +16,8 @@ var I18nButton = function I18nButton(_ref) {
     locales = _useLocales.locales,
     localeCode = _useLocales.localeCode;
   var popoverRef = useRef(null);
-  var change = useEvent( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(value) {
+  var change = useEvent(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(value) {
       var _popoverRef$current;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {

package/dist/components/image/preview/operations.js

@@ -117,7 +117,7 @@ var Operations = function Operations(_ref) {
     shape: "circular"
   }, /*#__PURE__*/React.createElement(Close, {
     size: 32
-  })), isMultiple && ( /*#__PURE__*/React.createElement("div", {
+  })), isMultiple && (/*#__PURE__*/React.createElement("div", {
     className: styled.navigations.className,
     style: styled.navigations.style
   }, /*#__PURE__*/React.createElement(Button, {

package/dist/components/layout/layout.js

@@ -40,11 +40,11 @@ var Layout = function Layout(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(className, styled.className),
     style: _objectSpread(_objectSpread({}, styled.style), style)
-  }, children.get(ChildToken.Header), hasSider ? ( /*#__PURE__*/React.createElement(Grid.Row, {
+  }, children.get(ChildToken.Header), hasSider ? (/*#__PURE__*/React.createElement(Grid.Row, {
     as: "main"
   }, sider, /*#__PURE__*/React.createElement(Grid.Col, _objectSpread(_objectSpread({}, mainProps), {}, {
     span: 19
-  }), children.get(ChildToken.Main), children.get(ChildToken.Footer)))) : ( /*#__PURE__*/React.createElement("main", _objectSpread({}, mainProps), children.get(ChildToken.Main), children.get(ChildToken.Footer))));
+  }), children.get(ChildToken.Main), children.get(ChildToken.Footer)))) : (/*#__PURE__*/React.createElement("main", _objectSpread({}, mainProps), children.get(ChildToken.Main), children.get(ChildToken.Footer))));
 };
 
 export { Layout as default };

package/dist/components/menu/group.js

@@ -126,7 +126,7 @@ var Group = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _useExpandable = useExpandable(),
     expand = _useExpandable.expand,
     collapse = _useExpandable.collapse;
-  useUpdateEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  useUpdateEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -174,7 +174,7 @@ var Group = /*#__PURE__*/forwardRef(function (_ref2, ref) {
         if (!_ref) return;
         collect(item.key, _ref);
       }
-    }, children.length > 0 && ( /*#__PURE__*/React.createElement(Group, {
+    }, children.length > 0 && (/*#__PURE__*/React.createElement(Group, {
       items: children,
       expanded: !isInline || expandedKeys.has(item.key),
       level: !isInline ? 0 : level + 1,

package/dist/components/menu/hooks.js

@@ -65,7 +65,7 @@ var useItemChildren = function useItemChildren(_ref) {
     }));
     return /*#__PURE__*/React.createElement("span", _objectSpread({}, {
       className: "musaex-igfled"
-    }), suffix, hasChildren && isInline && ( /*#__PURE__*/React.createElement("span", _objectSpread({}, styled), /*#__PURE__*/React.createElement(KeyboardArrowUp, {
+    }), suffix, hasChildren && isInline && (/*#__PURE__*/React.createElement("span", _objectSpread({}, styled), /*#__PURE__*/React.createElement(KeyboardArrowUp, {
       size: 16
     }))));
   }, [hasChildren, isExpanded, suffix, isInline]);
@@ -104,8 +104,8 @@ var useContextValue = function useContextValue(_ref2) {
     return new Set(_expandedKeys);
   }, [_expandedKeys]);
   /// click handler
-  var click = useCallback( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(key) {
+  var click = useCallback(/*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(key) {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:

package/dist/components/menu/item.js

@@ -279,7 +279,7 @@ var Item = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: clsx(classNames[MenuClassToken.Item], className, styled.item.className),
     style: styled.item.style,
     onClick: click
-  }, hoverProps), _children.prefix, _children.label, _children.suffix), isInline && props$1.children, !isInline && !!props$1.children && ( /*#__PURE__*/React.createElement(Popper, _objectSpread({
+  }, hoverProps), _children.prefix, _children.label, _children.suffix), isInline && props$1.children, !isInline && !!props$1.children && (/*#__PURE__*/React.createElement(Popper, _objectSpread({
     trigger: itemRef.current,
     open: isOpen,
     placement: mode === "vertical" ? "top-start" : "bottom-start"

package/dist/components/notification/hooks.js

@@ -25,8 +25,8 @@ var useNotification = function useNotification() {
       ref: ref
     });
   }, [notifier]);
-  var open = useEvent( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(config) {
+  var open = useEvent(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(config) {
       var _notifier$current, _config$key, _config$placement;
       var _notifier, key;
       return _regeneratorRuntime().wrap(function _callee$(_context) {

package/dist/components/notification/notification.js

@@ -194,7 +194,7 @@ var Notification = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var classNames = useClassNames(ComponentToken.Notification);
   var notificationRef = useRefs(scope, ref);
   // after duration, `Notification` will auto destroy
-  useTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  useTimeout(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -254,16 +254,16 @@ var Notification = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: clsx(classNames[NotificationClassToken.Notification], styled.notification.className),
     style: styled.notification.style,
     ref: notificationRef
-  }, LEADINGS.has(type) && ( /*#__PURE__*/React.createElement("div", {
+  }, LEADINGS.has(type) && (/*#__PURE__*/React.createElement("div", {
     className: styled.leading.className,
     style: styled.leading.style
-  }, /*#__PURE__*/createElement(LEADINGS.get(type)))), !!title && ( /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/createElement(LEADINGS.get(type)))), !!title && (/*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[NotificationClassToken.Title], styled.title.className),
     style: styled.title.style
   }, title)), /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[NotificationClassToken.Description], styled.description.className),
     style: styled.description.style
-  }, description), closable && ( /*#__PURE__*/React.createElement(Button, {
+  }, description), closable && (/*#__PURE__*/React.createElement(Button, {
     className: clsx(classNames[NotificationClassToken.Closer], styled.closer.className),
     shape: "circular",
     variant: "text",

package/dist/components/notification/notifier.js

@@ -26,7 +26,7 @@ var Notifier = /*#__PURE__*/function () {
     value: function open(notification) {
       var _this = this;
       if (!_classPrivateFieldGet(_holder, this)) {
-        createRoot(document.createDocumentFragment()).render( /*#__PURE__*/React.createElement(Holder, {
+        createRoot(document.createDocumentFragment()).render(/*#__PURE__*/React.createElement(Holder, {
           ref: function ref(holder) {
             _classPrivateFieldSet(_holder, _this, holder);
           },
@@ -48,7 +48,7 @@ var Notification = Object.assign.apply(Object, [{
   }
 }].concat(_toConsumableArray(METHODS.map(function (type) {
   return _defineProperty({}, type, function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(notification) {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(notification) {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:

package/dist/components/popover/hooks.js

@@ -17,7 +17,7 @@ var useIsOpen = function useIsOpen(popperRef) {
     turnOn = _useLazyBoolean2$.turnOn,
     _turnOff = _useLazyBoolean2$.turnOff,
     _disappear = _useLazyBoolean2$.disappear;
-  var turnOff = useEvent( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  var turnOff = useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     var _popperRef$current;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -38,7 +38,7 @@ var useIsOpen = function useIsOpen(popperRef) {
     }
     turnOn();
   }, [isOpen, turnOff, turnOn]);
-  var disappear = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+  var disappear = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
     var _popperRef$current2;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {

package/dist/components/popover/popover.js

@@ -140,7 +140,7 @@ var Popover = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[PopoverClassToken.Popover], className, styled.popover.className),
     style: _objectSpread(_objectSpread({}, styled.popover.style), style)
-  }, !!title && ( /*#__PURE__*/React.createElement("div", {
+  }, !!title && (/*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[PopoverClassToken.Title], styled.title.className),
     style: styled.title.style
   }, title)), /*#__PURE__*/React.createElement("div", {

package/dist/components/popper/dropdown.js

@@ -123,7 +123,7 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, props$1), {}, {
     className: clsx(classNames[PopperClassToken.Dropdown], className, styled.dropdown.className),
     style: _objectSpread(_objectSpread({}, styled.dropdown.style), style)
-  }), children, arrowable && ( /*#__PURE__*/React.createElement("div", {
+  }), children, arrowable && (/*#__PURE__*/React.createElement("div", {
     ref: arrowRef,
     className: styled.arrow.className,
     style: styled.arrow.style

package/dist/components/popper/hooks.js

@@ -40,7 +40,7 @@ var useAnimation = function useAnimation(_ref2) {
     _useAnimate2 = _slicedToArray(_useAnimate, 2),
     animatableRef = _useAnimate2[0],
     animate = _useAnimate2[1];
-  var appear = useEvent( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  var appear = useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -61,7 +61,7 @@ var useAnimation = function useAnimation(_ref2) {
       }
     }, _callee);
   })));
-  var disappear = useEvent( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+  var disappear = useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:

package/dist/components/radio/radio.js

@@ -230,7 +230,7 @@ var Radio = function Radio(_ref) {
     disabled: isDisabled,
     className: styled.trigger.className,
     style: styled.trigger.style
-  }), children && ( /*#__PURE__*/React.createElement("span", {
+  }), children && (/*#__PURE__*/React.createElement("span", {
     className: styled.label.className,
     style: styled.label.style
   }, children)));

package/dist/components/rich-text-editor/dropdown.js

@@ -17,8 +17,8 @@ var Dropdown = function Dropdown(_ref) {
     onChange = _ref.onChange,
     children = _ref.children;
   var popoverRef = useRef(null);
-  var onClick = useEvent( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(key) {
+  var onClick = useEvent(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(key) {
       var _popoverRef$current;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {

package/dist/components/rich-text-editor/plugins/floating-link-editor/index.js

@@ -35,7 +35,7 @@ var FloatingLinkEditorPlugin = function FloatingLinkEditorPlugin(_ref) {
   var styled = {
     className: "musaex-1fap3ks"
   };
-  var updateLink = useEvent( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  var updateLink = useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     var isValid, _form$getValues, href, title;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -88,7 +88,7 @@ var FloatingLinkEditorPlugin = function FloatingLinkEditorPlugin(_ref) {
     className: styled.className,
     style: styled.style,
     onExited: turnOff
-  }, !isEditable && ( /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
+  }, !isEditable && (/*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
     variant: "text",
     shape: "circular",
     size: "small",
@@ -103,7 +103,7 @@ var FloatingLinkEditorPlugin = function FloatingLinkEditorPlugin(_ref) {
     shape: "circular",
     size: "small",
     onClick: linkOff
-  }, /*#__PURE__*/React.createElement(LinkOff, null)))), isEditable && ( /*#__PURE__*/React.createElement(Form, {
+  }, /*#__PURE__*/React.createElement(LinkOff, null)))), isEditable && (/*#__PURE__*/React.createElement(Form, {
     form: form
   }, /*#__PURE__*/React.createElement(Form.Item, {
     name: "title",

package/dist/components/table/header/cell.js

@@ -122,7 +122,7 @@ var Cell = function Cell(_ref) {
     style: styled.fullSort.style
   }, /*#__PURE__*/React.createElement(UnfoldMore, {
     size: "medium"
-  })), !!sort && ( /*#__PURE__*/React.createElement("div", {
+  })), !!sort && (/*#__PURE__*/React.createElement("div", {
     className: styled.halfSort.className,
     style: styled.halfSort.style
   }, /*#__PURE__*/React.createElement(UnfoldMore, {

package/dist/components/time-picker/time-picker.js

@@ -34,7 +34,7 @@ var TimePicker = function TimePicker(_ref) {
       readOnly: true
     });
   }, [value, classNames]);
-  var popperEntered = useEvent( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  var popperEntered = useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     var _panelRef$current;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {

package/dist/components/timeline/item.js

@@ -197,7 +197,7 @@ var Item = function Item(_ref) {
   return /*#__PURE__*/React.createElement("li", {
     className: clsx(classNames[TimelineClassToken.Item], styled.item.className),
     style: styled.item.style
-  }, isLabeled && ( /*#__PURE__*/React.createElement("div", {
+  }, isLabeled && (/*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[TimelineClassToken.Label], styled.label.className),
     style: styled.label.style
   }, label)), /*#__PURE__*/React.createElement("div", {
@@ -206,7 +206,7 @@ var Item = function Item(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[TimelineClassToken.Sign], styled.sign.className),
     style: styled.sign.style
-  }, dot !== null && dot !== void 0 ? dot : ( /*#__PURE__*/React.createElement("span", {
+  }, dot !== null && dot !== void 0 ? dot : (/*#__PURE__*/React.createElement("span", {
     className: clsx(classNames[TimelineClassToken.Dot], styled.dot.className),
     style: styled.dot.style
   })))), /*#__PURE__*/React.createElement("div", {

package/dist/components/tour/tour.js

@@ -154,13 +154,13 @@ var Tour = function Tour(_ref) {
     gutter: 6,
     className: clsx(classNames[TourClassToken.Footer], styled.footer.className),
     style: styled.footer.style
-  }, hasPrev && ( /*#__PURE__*/React.createElement(Button, {
+  }, hasPrev && (/*#__PURE__*/React.createElement(Button, {
     onClick: prev,
     size: "small"
-  }, locale.prev)), hasNext && ( /*#__PURE__*/React.createElement(Button, {
+  }, locale.prev)), hasNext && (/*#__PURE__*/React.createElement(Button, {
     onClick: next,
     size: "small"
-  }, locale.next)), !hasNext && ( /*#__PURE__*/React.createElement(Button, {
+  }, locale.next)), !hasNext && (/*#__PURE__*/React.createElement(Button, {
     onClick: close,
     size: "small"
   }, locale.finish)))));

package/dist/components/tree/list.js

@@ -48,7 +48,7 @@ var _List = function List(_ref) {
   var _useExpandable = useExpandable(),
     expand = _useExpandable.expand,
     collapse = _useExpandable.collapse;
-  useUpdateEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  useUpdateEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -84,7 +84,7 @@ var _List = function List(_ref) {
       onExpand: onExpand,
       title: node.title,
       level: level
-    }, children.length > 0 && ( /*#__PURE__*/React.createElement(_List, {
+    }, children.length > 0 && (/*#__PURE__*/React.createElement(_List, {
       nodes: children,
       expanded: expandedKeys.has(node.key),
       level: level + 1

package/dist/components/upload/uploadeds.js

@@ -28,7 +28,7 @@ var Uploadeds = /*#__PURE__*/forwardRef(function (_ref, ref) {
   useImperativeHandle(ref, function () {
     return {
       add: function () {
-        var _add = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
+        var _add = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
           var hasUploader, status, id, url;
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {

package/dist/hooks/use-expandable.js

@@ -8,8 +8,8 @@ import { useEvent } from '@aiszlab/relax';
  * expand handler
  */
 var useExpandable = function useExpandable() {
-  var expand = useEvent( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
+  var expand = useEvent(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
       var _ref3, element, animate;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -37,8 +37,8 @@ var useExpandable = function useExpandable() {
       return _ref2.apply(this, arguments);
     };
   }());
-  var collapse = useEvent( /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref4) {
+  var collapse = useEvent(/*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref4) {
       var _ref6, element, animate;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {

package/dist/index.js

@@ -1,4 +1,4 @@
-import "./stylex.css";
+import "musae/styles.css";
 export { Avatar } from './components/avatar/index.js';
 export { Radio } from './components/radio/index.js';
 export { Checkbox } from './components/checkbox/index.js';

package/dist/{stylex.css → styles.css}

@@ -213,9 +213,11 @@
 .musaex-14z9mp:not(#\#):not(#\#):not(#\#){margin-inline-end:0}
 .musaex-1rjh17g:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(-100% - var(--musaex-rlgvtq) - var(--musaex-jdzqnm) * 4 - var(--musaex-jdzqnm))}
 .musaex-1kwx3ox:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(100% + var(--musaex-rlgvtq) + var(--musaex-jdzqnm) * 4 + var(--musaex-jdzqnm))}
+.musaex-1uoloo9:not(#\#):not(#\#):not(#\#){margin-inline-end:var(--marginInlineEnd,revert)}
 .musaex-1lziwak:not(#\#):not(#\#):not(#\#){margin-inline-start:0}
 .musaex-xsxsn7:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-100% - var(--musaex-rlgvtq) - var(--musaex-jdzqnm) * 4 - var(--musaex-jdzqnm))}
 .musaex-1bec1b4:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(100% + var(--musaex-rlgvtq) + var(--musaex-jdzqnm) * 4 + var(--musaex-jdzqnm))}
+.musaex-1f2nheo:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--marginInlineStart,revert)}
 .musaex-igfled:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--musaex-68a8pz)}
 .musaex-1dzd4em:not(#\#):not(#\#):not(#\#){mix-blend-mode:hard-light}
 .musaex-l1xv1r:not(#\#):not(#\#):not(#\#){object-fit:cover}
@@ -350,12 +352,14 @@ html[dir='rtl'] .musaex-p4054r:not(#\#):not(#\#):not(#\#){text-align:left}
 .musaex-xtgfc8:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--musaex-xrqq76)}
 .musaex-u96u03:not(#\#):not(#\#):not(#\#):not(#\#){left:0}
 .musaex-101gtxs:not(#\#):not(#\#):not(#\#):not(#\#){left:var(--left,revert)}
+.musaex-19qvvsl:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--marginBlockEnd,revert)}
 .musaex-uaxuc:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--musaex-15cw4i4)}
 .musaex-1w7ha7z:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--musaex-1tzp6vk)}
 .musaex-9x39mp:not(#\#):not(#\#):not(#\#):not(#\#){margin-left:var(--musaex-1ncxh3n)}
 .musaex-ack27t:not(#\#):not(#\#):not(#\#):not(#\#){margin-right:auto}
 .musaex-1a1twg2:not(#\#):not(#\#):not(#\#):not(#\#){margin-right:var(--musaex-qk2ac7)}
 .musaex-185trme:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(-1 * var(--musaex-1qsoxbc))}
+.musaex-fdd01f:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--marginBlockStart,revert)}
 .musaex-xhh4n9:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--musaex-1ncxh3n)}
 .musaex-gqr9ew:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--musaex-1wblvyz)}
 .musaex-19h4m1:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--musaex-qk2ac7)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.2.21",
+  "version": "0.2.24",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -20,6 +20,7 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./styles.css": "./dist/styles.css",
     "./locales": {
       "types": "./dist/locale/locales/index.d.ts",
       "default": "./dist/locale/locales/index.js"
@@ -71,31 +72,31 @@
   },
   "dependencies": {
     "@aiszlab/relax": "^1.3.8",
-    "@babel/runtime": "^7.25.0",
+    "@babel/runtime": "^7.25.6",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@floating-ui/dom": "^1.6.10",
-    "@lexical/code": "^0.17.0",
-    "@lexical/link": "^0.17.0",
-    "@lexical/list": "^0.17.0",
-    "@lexical/markdown": "^0.17.0",
-    "@lexical/react": "^0.17.0",
-    "@lexical/rich-text": "^0.17.0",
-    "@lexical/selection": "^0.17.0",
-    "@lexical/utils": "^0.17.0",
-    "@tanstack/react-table": "^8.20.1",
-    "dayjs": "^1.11.12",
+    "@lexical/code": "^0.17.1",
+    "@lexical/link": "^0.17.1",
+    "@lexical/list": "^0.17.1",
+    "@lexical/markdown": "^0.17.1",
+    "@lexical/react": "^0.17.1",
+    "@lexical/rich-text": "^0.17.1",
+    "@lexical/selection": "^0.17.1",
+    "@lexical/utils": "^0.17.1",
+    "@tanstack/react-table": "^8.20.5",
+    "dayjs": "^1.11.13",
     "deepmerge": "^4.3.1",
-    "framer-motion": "^11.3.28",
-    "lexical": "^0.17.0",
-    "react-hook-form": "^7.52.2",
+    "framer-motion": "^11.5.4",
+    "lexical": "^0.17.1",
+    "react-hook-form": "^7.53.0",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@aiszlab/jarvis": "^1.0.2",
     "@babel/core": "^7.25.2",
-    "@babel/plugin-transform-runtime": "^7.24.7",
-    "@babel/preset-env": "^7.25.3",
+    "@babel/plugin-transform-runtime": "^7.25.4",
+    "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@rollup/plugin-babel": "^6.0.4",
@@ -105,13 +106,13 @@
     "@stylexjs/babel-plugin": "^0.7.5",
     "@stylexjs/rollup-plugin": "^0.7.5",
     "@stylexjs/stylex": "^0.7.5",
-    "@testing-library/jest-dom": "^6.4.8",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/dom-view-transitions": "^1.0.5",
     "@types/jest": "^29.5.12",
-    "@types/node": "^22.4.1",
-    "@types/react": "^18.3.3",
+    "@types/node": "^22.5.4",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "babel-jest": "^29.7.0",
     "babel-preset-react-app": "^10.0.1",
@@ -121,9 +122,9 @@
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rollup": "^4.21.0",
+    "rollup": "^4.21.2",
     "typescript": "^5.5.4",
-    "zx": "^8.1.4"
+    "zx": "^8.1.5"
   },
   "peerDependencies": {
     "react": "^18",