musae 1.3.1-beta.2 → 1.3.1-beta.21

package/dist/components/menu/group.cjs

@@ -6,6 +6,7 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _regenerator = require('@babel/runtime/helpers/regenerator');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var styles = require('./styles.cjs');
 var React = require('react');
 var item = require('./item.cjs');
 var hooks = require('./hooks.cjs');
@@ -16,46 +17,6 @@ var hooks$1 = require('../theme/hooks.cjs');
 var className = require('@aiszlab/relax/class-name');
 
 var _excluded = ["children", "key"];
-var styles = {
-  group: {
-    "default": {
-      kogj98: "musaex-q3gua8",
-      kmVPX3: "musaex-1n775ky",
-      kH6xsr: "musaex-3ct3a4",
-      kMwMTN: "musaex-1j14bxn",
-      kVQacm: "musaex-ysyzu8",
-      $$css: true
-    },
-    horizontal: {
-      k1xSpc: "musaex-78zum5",
-      kXwgrk: "musaex-1q0g3np",
-      kOIVth: "musaex-1wm2zkp",
-      $$css: true
-    },
-    vertical: {
-      $$css: true
-    },
-    inline: {
-      $$css: true
-    },
-    hidden: {
-      k1xSpc: "musaex-1s85apg",
-      $$css: true
-    }
-  },
-  subgroup: {
-    inline: {
-      keoZOQ: "musaex-1khtc51",
-      $$css: true
-    },
-    vertical: {
-      $$css: true
-    },
-    horizontal: {
-      $$css: true
-    }
-  }
-};
 /**
  * @author murukal
  *
@@ -103,8 +64,8 @@ var Group = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }, _callee);
   })), [expanded]);
   var styled = {
-    group: stylex.props(styles.group["default"], styles.group[mode], !expanded && styles.group.hidden),
-    subgroup: stylex.props(styles.subgroup[mode])
+    group: stylex.props(styles.default.group.base, styles.default.group[mode], !expanded && styles.default.group.hidden),
+    subgroup: stylex.props(styles.default.subgroup[mode])
   };
   return /*#__PURE__*/React.createElement("ul", {
     ref: groupRef,
@@ -124,7 +85,8 @@ var Group = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       className: item$1.className,
       style: item$1.style,
       label: item$1.label,
-      prefix: item$1.prefix,
+      leading: item$1.leading,
+      trailing: item$1.trailing,
       onClick: item$1.onClick,
       mode: mode,
       ref: function ref(_ref) {

package/dist/components/menu/group.mjs

@@ -2,6 +2,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _regenerator from '@babel/runtime/helpers/regenerator';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import styles from './styles.mjs';
 import React, { forwardRef } from 'react';
 import Item from './item.mjs';
 import { useMenuContext } from './hooks.mjs';
@@ -12,46 +13,6 @@ import { useTheme } from '../theme/hooks.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 
 var _excluded = ["children", "key"];
-var styles = {
-  group: {
-    "default": {
-      kogj98: "musaex-q3gua8",
-      kmVPX3: "musaex-1n775ky",
-      kH6xsr: "musaex-3ct3a4",
-      kMwMTN: "musaex-1j14bxn",
-      kVQacm: "musaex-ysyzu8",
-      $$css: true
-    },
-    horizontal: {
-      k1xSpc: "musaex-78zum5",
-      kXwgrk: "musaex-1q0g3np",
-      kOIVth: "musaex-1wm2zkp",
-      $$css: true
-    },
-    vertical: {
-      $$css: true
-    },
-    inline: {
-      $$css: true
-    },
-    hidden: {
-      k1xSpc: "musaex-1s85apg",
-      $$css: true
-    }
-  },
-  subgroup: {
-    inline: {
-      keoZOQ: "musaex-1khtc51",
-      $$css: true
-    },
-    vertical: {
-      $$css: true
-    },
-    horizontal: {
-      $$css: true
-    }
-  }
-};
 /**
  * @author murukal
  *
@@ -99,7 +60,7 @@ var Group = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }, _callee);
   })), [expanded]);
   var styled = {
-    group: props(styles.group["default"], styles.group[mode], !expanded && styles.group.hidden),
+    group: props(styles.group.base, styles.group[mode], !expanded && styles.group.hidden),
     subgroup: props(styles.subgroup[mode])
   };
   return /*#__PURE__*/React.createElement("ul", {
@@ -120,7 +81,8 @@ var Group = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       className: item.className,
       style: item.style,
       label: item.label,
-      prefix: item.prefix,
+      leading: item.leading,
+      trailing: item.trailing,
       onClick: item.onClick,
       mode: mode,
       ref: function ref(_ref) {

package/dist/components/menu/hooks.cjs

@@ -5,9 +5,11 @@ var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var styles = require('./styles.cjs');
 var React = require('react');
 var context = require('./context.cjs');
 var relax = require('@aiszlab/relax');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var keyboardArrowUp = require('../icon/icons/hardware/keyboard-arrow-up.cjs');
 
 var _excluded = ["onClick", "setTrigger", "size", "classNames", "onExpandedKeysChange"];
@@ -23,42 +25,31 @@ var useMenuContext = function useMenuContext() {
  * use children
  */
 var useItemChildren = function useItemChildren(_ref) {
-  var prefix = _ref.prefix,
+  var leading = _ref.leading,
     label = _ref.label,
-    suffix = _ref.suffix,
+    trailing = _ref.trailing,
     hasChildren = _ref.hasChildren,
     isExpanded = _ref.isExpanded,
     isInline = _ref.isInline;
-  // prefix
-  var _prefix = React.useMemo(function () {
-    return prefix && /*#__PURE__*/React.createElement("span", _objectSpread({}, {
-      className: "musaex-78zum5 musaex-l56j7k musaex-6s0dn4 musaex-16udq8c"
-    }), prefix);
-  }, [prefix]);
+  // leading
+  var _leading = React.useMemo(function () {
+    return relax.isVoid(leading) ? null : /*#__PURE__*/React.createElement("span", _objectSpread({}, stylex.props(styles.default.leading.base)), leading);
+  }, [leading]);
   // child
   var _label = React.useMemo(function () {
     return label && /*#__PURE__*/React.createElement("span", null, label);
   }, [label]);
-  // suffix
-  var _suffix = React.useMemo(function () {
-    if (!suffix && !hasChildren) return null;
-    var styled = {
-      0: {
-        className: "musaex-78zum5 musaex-6s0dn4 musaex-l56j7k musaex-zxq0nw musaex-11xpdln musaex-1ptezny"
-      },
-      1: {
-        className: "musaex-78zum5 musaex-6s0dn4 musaex-l56j7k musaex-11xpdln musaex-1ptezny musaex-1w7ybi4"
-      }
-    }[!!isExpanded << 0];
-    return /*#__PURE__*/React.createElement("span", _objectSpread({}, {
-      className: "musaex-3qhtz4"
-    }), suffix, hasChildren && isInline && (/*#__PURE__*/React.createElement("span", _objectSpread({}, styled), /*#__PURE__*/React.createElement(keyboardArrowUp.default, {
+  // trailing
+  var _trailing = React.useMemo(function () {
+    if (relax.isVoid(trailing) && !hasChildren) return null;
+    var styled = stylex.props(styles.default.collapser.base, isExpanded && styles.default.collapser.expanded);
+    return /*#__PURE__*/React.createElement("span", _objectSpread({}, stylex.props(styles.default.trailing.base)), trailing, hasChildren && isInline && (/*#__PURE__*/React.createElement("span", _objectSpread({}, styled), /*#__PURE__*/React.createElement(keyboardArrowUp.default, {
       size: 16
     }))));
-  }, [hasChildren, isExpanded, suffix, isInline]);
+  }, [hasChildren, isExpanded, trailing, isInline]);
   return {
-    suffix: _suffix,
-    prefix: _prefix,
+    trailing: _trailing,
+    leading: _leading,
     label: _label
   };
 };

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

@@ -12,16 +12,16 @@ export declare const useMenuContext: () => ContextValue & {
  * @description
  * use children
  */
-export declare const useItemChildren: ({ prefix, label, suffix, hasChildren, isExpanded, isInline, }: {
-    prefix: ReactNode;
+export declare const useItemChildren: ({ leading, label, trailing, hasChildren, isExpanded, isInline, }: {
+    leading: ReactNode;
     label: ReactNode;
-    suffix: ReactNode;
+    trailing: ReactNode;
     hasChildren: boolean;
     isExpanded: boolean;
     isInline: boolean;
 }) => {
-    suffix: React.ReactNode;
-    prefix: false | "" | 0 | 0n | React.JSX.Element | null | undefined;
+    trailing: React.ReactNode;
+    leading: React.JSX.Element | null;
     label: false | "" | 0 | 0n | React.JSX.Element | null | undefined;
 };
 /**

package/dist/components/menu/hooks.mjs

@@ -3,9 +3,11 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import styles from './styles.mjs';
 import React, { useMemo, useCallback, useContext } from 'react';
 import { Context } from './context.mjs';
-import { useControlledState, toArray, useEvent } from '@aiszlab/relax';
+import { useControlledState, toArray, useEvent, isVoid } from '@aiszlab/relax';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import IconKeyboardArrowUp from '../icon/icons/hardware/keyboard-arrow-up.mjs';
 
 var _excluded = ["onClick", "setTrigger", "size", "classNames", "onExpandedKeysChange"];
@@ -21,42 +23,31 @@ var useMenuContext = function useMenuContext() {
  * use children
  */
 var useItemChildren = function useItemChildren(_ref) {
-  var prefix = _ref.prefix,
+  var leading = _ref.leading,
     label = _ref.label,
-    suffix = _ref.suffix,
+    trailing = _ref.trailing,
     hasChildren = _ref.hasChildren,
     isExpanded = _ref.isExpanded,
     isInline = _ref.isInline;
-  // prefix
-  var _prefix = useMemo(function () {
-    return prefix && /*#__PURE__*/React.createElement("span", _objectSpread({}, {
-      className: "musaex-78zum5 musaex-l56j7k musaex-6s0dn4 musaex-16udq8c"
-    }), prefix);
-  }, [prefix]);
+  // leading
+  var _leading = useMemo(function () {
+    return isVoid(leading) ? null : /*#__PURE__*/React.createElement("span", _objectSpread({}, props(styles.leading.base)), leading);
+  }, [leading]);
   // child
   var _label = useMemo(function () {
     return label && /*#__PURE__*/React.createElement("span", null, label);
   }, [label]);
-  // suffix
-  var _suffix = useMemo(function () {
-    if (!suffix && !hasChildren) return null;
-    var styled = {
-      0: {
-        className: "musaex-78zum5 musaex-6s0dn4 musaex-l56j7k musaex-zxq0nw musaex-11xpdln musaex-1ptezny"
-      },
-      1: {
-        className: "musaex-78zum5 musaex-6s0dn4 musaex-l56j7k musaex-11xpdln musaex-1ptezny musaex-1w7ybi4"
-      }
-    }[!!isExpanded << 0];
-    return /*#__PURE__*/React.createElement("span", _objectSpread({}, {
-      className: "musaex-3qhtz4"
-    }), suffix, hasChildren && isInline && (/*#__PURE__*/React.createElement("span", _objectSpread({}, styled), /*#__PURE__*/React.createElement(IconKeyboardArrowUp, {
+  // trailing
+  var _trailing = useMemo(function () {
+    if (isVoid(trailing) && !hasChildren) return null;
+    var styled = props(styles.collapser.base, isExpanded && styles.collapser.expanded);
+    return /*#__PURE__*/React.createElement("span", _objectSpread({}, props(styles.trailing.base)), trailing, hasChildren && isInline && (/*#__PURE__*/React.createElement("span", _objectSpread({}, styled), /*#__PURE__*/React.createElement(IconKeyboardArrowUp, {
       size: 16
     }))));
-  }, [hasChildren, isExpanded, suffix, isInline]);
+  }, [hasChildren, isExpanded, trailing, isInline]);
   return {
-    suffix: _suffix,
-    prefix: _prefix,
+    trailing: _trailing,
+    leading: _leading,
     label: _label
   };
 };

package/dist/components/menu/item.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var styles = require('./styles.cjs');
 var React = require('react');
 var hooks = require('./hooks.cjs');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
@@ -15,103 +16,7 @@ var className = require('@aiszlab/relax/class-name');
 var theme = require('../theme/theme.cjs');
 var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
 
-var _excluded = ["level", "label", "prefix", "suffix", "value", "className", "mode", "onClick"];
-var styles = {
-  "default": {
-    item: {
-      k1xSpc: "musaex-78zum5",
-      kGNEyG: "musaex-6s0dn4",
-      kkrTdU: "musaex-1ypdohk",
-      kfSwDN: "musaex-87ps6o",
-      khDVqt: "musaex-uxw1ft",
-      k6sLGO: "musaex-1aaibe2",
-      k1ekBW: "musaex-xy01e9",
-      kIyJzY: "musaex-1ptezny",
-      kB7OPa: "musaex-9f619",
-      $$css: true
-    }
-  },
-  mode: {
-    menuitem: {
-      horizontal: {
-        $$css: true
-      },
-      vertical: {
-        keoZOQ: "musaex-1khtc51 musaex-jtwju0",
-        $$css: true
-      },
-      inline: {
-        keoZOQ: "musaex-1khtc51 musaex-jtwju0",
-        $$css: true
-      }
-    },
-    item: {
-      horizontal: {
-        kZKoxP: "musaex-qg7gut",
-        kVAEAm: "musaex-1n2onr6",
-        k5JduY: "musaex-1s928wv",
-        kwXMNM: "musaex-1j6awrg",
-        kcktkL: "musaex-b7ltuz",
-        k8Iv0R: "musaex-1xrz1ek",
-        kHSQhd: "musaex-1uq7u76",
-        kh0EW9: "musaex-1r9ni5o",
-        kWkaDd: "musaex-7h5a58",
-        kRicXK: "musaex-w91p3u",
-        kPNhGg: "musaex-mbwe65",
-        k2YfZI: "musaex-q3rc72",
-        khKx1W: "musaex-u1neyw",
-        $$css: true
-      },
-      vertical: {
-        kWkggS: "musaex-twou9u",
-        $$css: true
-      },
-      inline: {
-        kWkggS: "musaex-twou9u",
-        $$css: true
-      }
-    }
-  },
-  size: {
-    small: {
-      k8WAf4: "musaex-11owsmz",
-      kpe85a: "musaex-1npsbsp",
-      kE3dHu: "musaex-15n8epz",
-      kaIpWk: "musaex-db68te",
-      $$css: true
-    },
-    medium: {
-      k8WAf4: "musaex-a0rzc7",
-      kpe85a: "musaex-9y2cgd",
-      kE3dHu: "musaex-13k7ju",
-      kaIpWk: "musaex-m9kfsm",
-      $$css: true
-    },
-    large: {
-      k8WAf4: "musaex-s7sbuz",
-      kpe85a: "musaex-75fxct",
-      kE3dHu: "musaex-1pnnd5g",
-      kaIpWk: "musaex-qesrb1",
-      $$css: true
-    }
-  },
-  selected: {
-    inline: {
-      kWkggS: "musaex-1mu49yl",
-      kMwMTN: "musaex-14qql8p",
-      $$css: true
-    },
-    vertical: {
-      kWkggS: "musaex-1mu49yl",
-      kMwMTN: "musaex-14qql8p",
-      $$css: true
-    },
-    horizontal: {
-      kMwMTN: "musaex-14qql8p",
-      kvRJ0G: "musaex-6h69w5",
-      $$css: true
-    }
-  }};
+var _excluded = ["level", "label", "leading", "trailing", "value", "className", "mode", "onClick"];
 /**
  * @author murukal
  *
@@ -121,8 +26,8 @@ var styles = {
 var Item = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var level = _ref.level,
     label = _ref.label,
-    prefix = _ref.prefix,
-    suffix = _ref.suffix,
+    leading = _ref.leading,
+    trailing = _ref.trailing,
     value = _ref.value,
     className$1 = _ref.className,
     mode = _ref.mode,
@@ -166,22 +71,20 @@ var Item = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   });
   var _children = hooks.useItemChildren({
     label: label,
-    prefix: prefix,
-    suffix: suffix,
+    leading: leading,
+    trailing: trailing,
     hasChildren: hasChildren,
     isExpanded: isExpanded,
     isInline: isInline
   });
   var styled = {
-    menuitem: stylex.props(styles.mode.menuitem[mode]),
-    item: stylex.props(styles["default"].item,
+    menuitem: stylex.props(styles.default.item.mode.menuitem[mode]),
+    item: stylex.props(styles.default.item.base.item,
     // size
-    styles.size[size],
+    styles.default.item.size[size],
     // mode
-    styles.mode.item[mode], isSelected && styles.selected[mode], theme.$body[size]),
-    popper: {
-      className: "musaex-1nskiab"
-    }
+    styles.default.item.mode.item[mode], isSelected && styles.default.item.selected[mode], theme.$body[size]),
+    popper: stylex.props(styles.default.item.popper.base)
   };
   return /*#__PURE__*/React.createElement("li", {
     role: "menuitem",
@@ -195,7 +98,7 @@ var Item = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: className.stringify(classNames.item, className$1, styled.item.className),
     style: styled.item.style,
     onClick: click
-  }, hoverProps), _children.prefix, _children.label, _children.suffix), isInline && props.children, !isInline && !!props.children && (/*#__PURE__*/React.createElement(popper.default, _objectSpread({
+  }, hoverProps), _children.leading, _children.label, _children.trailing), isInline && props.children, !isInline && !!props.children && (/*#__PURE__*/React.createElement(popper.default, _objectSpread({
     trigger: function trigger() {
       return itemRef.current;
     },

package/dist/components/menu/item.d.ts

@@ -7,7 +7,6 @@ import React from "react";
  */
 declare const Item: React.ForwardRefExoticComponent<Omit<import("../../types/menu").MenuItem, "children" | "key"> & import("../../types/element").ComponentProps & {
     value: React.Key;
-    suffix?: React.ReactNode;
     children?: React.ReactNode;
     mode: import("../../types/menu").Mode;
     level: number;

package/dist/components/menu/item.mjs

@@ -1,6 +1,7 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import styles from './styles.mjs';
 import React, { forwardRef, useRef } from 'react';
 import { useMenuContext, useItemChildren } from './hooks.mjs';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
@@ -11,103 +12,7 @@ import { stringify } from '@aiszlab/relax/class-name';
 import { $body } from '../theme/theme.mjs';
 import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
 
-var _excluded = ["level", "label", "prefix", "suffix", "value", "className", "mode", "onClick"];
-var styles = {
-  "default": {
-    item: {
-      k1xSpc: "musaex-78zum5",
-      kGNEyG: "musaex-6s0dn4",
-      kkrTdU: "musaex-1ypdohk",
-      kfSwDN: "musaex-87ps6o",
-      khDVqt: "musaex-uxw1ft",
-      k6sLGO: "musaex-1aaibe2",
-      k1ekBW: "musaex-xy01e9",
-      kIyJzY: "musaex-1ptezny",
-      kB7OPa: "musaex-9f619",
-      $$css: true
-    }
-  },
-  mode: {
-    menuitem: {
-      horizontal: {
-        $$css: true
-      },
-      vertical: {
-        keoZOQ: "musaex-1khtc51 musaex-jtwju0",
-        $$css: true
-      },
-      inline: {
-        keoZOQ: "musaex-1khtc51 musaex-jtwju0",
-        $$css: true
-      }
-    },
-    item: {
-      horizontal: {
-        kZKoxP: "musaex-qg7gut",
-        kVAEAm: "musaex-1n2onr6",
-        k5JduY: "musaex-1s928wv",
-        kwXMNM: "musaex-1j6awrg",
-        kcktkL: "musaex-b7ltuz",
-        k8Iv0R: "musaex-1xrz1ek",
-        kHSQhd: "musaex-1uq7u76",
-        kh0EW9: "musaex-1r9ni5o",
-        kWkaDd: "musaex-7h5a58",
-        kRicXK: "musaex-w91p3u",
-        kPNhGg: "musaex-mbwe65",
-        k2YfZI: "musaex-q3rc72",
-        khKx1W: "musaex-u1neyw",
-        $$css: true
-      },
-      vertical: {
-        kWkggS: "musaex-twou9u",
-        $$css: true
-      },
-      inline: {
-        kWkggS: "musaex-twou9u",
-        $$css: true
-      }
-    }
-  },
-  size: {
-    small: {
-      k8WAf4: "musaex-11owsmz",
-      kpe85a: "musaex-1npsbsp",
-      kE3dHu: "musaex-15n8epz",
-      kaIpWk: "musaex-db68te",
-      $$css: true
-    },
-    medium: {
-      k8WAf4: "musaex-a0rzc7",
-      kpe85a: "musaex-9y2cgd",
-      kE3dHu: "musaex-13k7ju",
-      kaIpWk: "musaex-m9kfsm",
-      $$css: true
-    },
-    large: {
-      k8WAf4: "musaex-s7sbuz",
-      kpe85a: "musaex-75fxct",
-      kE3dHu: "musaex-1pnnd5g",
-      kaIpWk: "musaex-qesrb1",
-      $$css: true
-    }
-  },
-  selected: {
-    inline: {
-      kWkggS: "musaex-1mu49yl",
-      kMwMTN: "musaex-14qql8p",
-      $$css: true
-    },
-    vertical: {
-      kWkggS: "musaex-1mu49yl",
-      kMwMTN: "musaex-14qql8p",
-      $$css: true
-    },
-    horizontal: {
-      kMwMTN: "musaex-14qql8p",
-      kvRJ0G: "musaex-6h69w5",
-      $$css: true
-    }
-  }};
+var _excluded = ["level", "label", "leading", "trailing", "value", "className", "mode", "onClick"];
 /**
  * @author murukal
  *
@@ -117,8 +22,8 @@ var styles = {
 var Item = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var level = _ref.level,
     label = _ref.label,
-    prefix = _ref.prefix,
-    suffix = _ref.suffix,
+    leading = _ref.leading,
+    trailing = _ref.trailing,
     value = _ref.value,
     className = _ref.className,
     mode = _ref.mode,
@@ -162,22 +67,20 @@ var Item = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
   var _children = useItemChildren({
     label: label,
-    prefix: prefix,
-    suffix: suffix,
+    leading: leading,
+    trailing: trailing,
     hasChildren: hasChildren,
     isExpanded: isExpanded,
     isInline: isInline
   });
   var styled = {
-    menuitem: props(styles.mode.menuitem[mode]),
-    item: props(styles["default"].item,
+    menuitem: props(styles.item.mode.menuitem[mode]),
+    item: props(styles.item.base.item,
     // size
-    styles.size[size],
+    styles.item.size[size],
     // mode
-    styles.mode.item[mode], isSelected && styles.selected[mode], $body[size]),
-    popper: {
-      className: "musaex-1nskiab"
-    }
+    styles.item.mode.item[mode], isSelected && styles.item.selected[mode], $body[size]),
+    popper: props(styles.item.popper.base)
   };
   return /*#__PURE__*/React.createElement("li", {
     role: "menuitem",
@@ -191,7 +94,7 @@ var Item = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: stringify(classNames.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.leading, _children.label, _children.trailing), isInline && props$1.children, !isInline && !!props$1.children && (/*#__PURE__*/React.createElement(Popper, _objectSpread({
     trigger: function trigger() {
       return itemRef.current;
     },

package/dist/components/menu/menu.cjs

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var styles = require('./styles.cjs');
 var React = require('react');
 var context = require('./context.cjs');
 var relax = require('@aiszlab/relax');
 var hooks = require('./hooks.cjs');
 var group = require('./group.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('@aiszlab/relax/class-name');
 
@@ -59,9 +61,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     };
   });
-  var styled = {
-    className: "musaex-1n2onr6"
-  };
+  var styled = stylex.props(styles.default.menu.base);
   return /*#__PURE__*/React.createElement(context.Context.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(group.default, {