musae 1.3.1-beta.2 → 1.3.1-beta.3

package/dist/components/action-sheet/action-sheet.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var styles = require('./styles.cjs');
 var React = require('react');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var className = require('@aiszlab/relax/class-name');
@@ -15,48 +16,6 @@ var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
 var theme = require('../theme/theme.cjs');
 var context = require('./context.cjs');
 
-/**
- * @zh ActionSheet 专用样式：面板背景、拖拽手柄、操作项和取消按钮的样式。
- * @en ActionSheet-specific styles: panel background, drag handle, action items and cancel button.
- */
-var styles = {
-  title: {
-    kg3NbH: "musaex-1v4gb6w",
-    kLKAdn: "musaex-3nylsr",
-    k9WMMc: "musaex-2b8uid",
-    $$css: true
-  },
-  description: {
-    kg3NbH: "musaex-1v4gb6w",
-    kLKAdn: "musaex-3nylsr",
-    k9WMMc: "musaex-2b8uid",
-    $$css: true
-  },
-  actionText: {
-    k9WMMc: "musaex-2b8uid",
-    $$css: true
-  },
-  actionDesc: {
-    k9WMMc: "musaex-2b8uid",
-    keoZOQ: "musaex-1khtc51",
-    $$css: true
-  },
-  cancel: {
-    k1xSpc: "musaex-78zum5",
-    kGNEyG: "musaex-6s0dn4",
-    kjj79g: "musaex-l56j7k",
-    k8WAf4: "musaex-1aur8i7",
-    kg3NbH: "musaex-1v4gb6w",
-    kkrTdU: "musaex-1ypdohk",
-    kAzted: "musaex-qi4gqz",
-    kEafiO: "musaex-2k45e9",
-    kPef9Z: "musaex-13fuv20",
-    kVAM5u: "musaex-axmpxa",
-    keoZOQ: "musaex-1eodh35",
-    kfSwDN: "musaex-87ps6o",
-    $$css: true
-  }
-};
 /**
  * @zh ActionSheet 组件。基于 Sheet 的移动端底部操作面板，
  * 支持操作列表和二次确认场景，同时提供声明式和指令式 API。
@@ -79,26 +38,16 @@ var ActionSheet = function ActionSheet(_ref) {
     locale = _useLocale2[0];
   var themeColorVars = useThemeColorVars.useThemeColorVars(["on-surface-variant", "surface-container", "outline-variant"]);
   var styled = {
-    handle: {
-      className: "musaex-1po6ib musaex-rntz3j musaex-1xa9b2s musaex-9ip8r5 musaex-1eodh35 musaex-19i5tse musaex-vueqy4 musaex-2lah0s"
-    },
-    panel: {
-      className: "musaex-17o6occ musaex-zbxit7 musaex-1ei9pc5 musaex-15q9lfd"
-    },
-    header: {
-      className: "musaex-1b38e8b musaex-7gss4w"
-    },
-    title: stylex.props(styles.title, theme.$title.medium),
-    description: stylex.props(styles.description, theme.$body.medium),
-    actions: {
-      className: "musaex-ltmd5o"
-    },
-    action: {
-      className: "musaex-78zum5 musaex-dt5ytf musaex-6s0dn4 musaex-l56j7k musaex-1aur8i7 musaex-1v4gb6w musaex-1ypdohk musaex-qi4gqz musaex-uvson1 musaex-13fuv20 musaex-axmpxa musaex-87ps6o"
-    },
-    actionText: stylex.props(styles.actionText, theme.$body.large),
-    actionDesc: stylex.props(styles.actionDesc, theme.$body.small),
-    cancel: stylex.props(styles.cancel, theme.$label.large)
+    handle: stylex.props(styles.default.handle),
+    panel: stylex.props(styles.default.panel),
+    header: stylex.props(styles.default.header),
+    title: stylex.props(styles.default.title, theme.$title.medium),
+    description: stylex.props(styles.default.description, theme.$body.medium),
+    actions: stylex.props(styles.default.actions),
+    action: stylex.props(styles.default.action),
+    actionText: stylex.props(styles.default.actionText, theme.$body.large),
+    actionDesc: stylex.props(styles.default.actionDesc, theme.$body.small),
+    cancel: stylex.props(styles.default.cancel, theme.$label.large)
   };
   /**
    * @zh 处理操作项点击：先执行回调，再关闭面板。

package/dist/components/action-sheet/action-sheet.mjs

@@ -1,5 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import styles from './styles.mjs';
 import React from 'react';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
@@ -11,48 +12,6 @@ import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
 import { $label, $body, $title } from '../theme/theme.mjs';
 import { CLASS_NAMES } from './context.mjs';
 
-/**
- * @zh ActionSheet 专用样式：面板背景、拖拽手柄、操作项和取消按钮的样式。
- * @en ActionSheet-specific styles: panel background, drag handle, action items and cancel button.
- */
-var styles = {
-  title: {
-    kg3NbH: "musaex-1v4gb6w",
-    kLKAdn: "musaex-3nylsr",
-    k9WMMc: "musaex-2b8uid",
-    $$css: true
-  },
-  description: {
-    kg3NbH: "musaex-1v4gb6w",
-    kLKAdn: "musaex-3nylsr",
-    k9WMMc: "musaex-2b8uid",
-    $$css: true
-  },
-  actionText: {
-    k9WMMc: "musaex-2b8uid",
-    $$css: true
-  },
-  actionDesc: {
-    k9WMMc: "musaex-2b8uid",
-    keoZOQ: "musaex-1khtc51",
-    $$css: true
-  },
-  cancel: {
-    k1xSpc: "musaex-78zum5",
-    kGNEyG: "musaex-6s0dn4",
-    kjj79g: "musaex-l56j7k",
-    k8WAf4: "musaex-1aur8i7",
-    kg3NbH: "musaex-1v4gb6w",
-    kkrTdU: "musaex-1ypdohk",
-    kAzted: "musaex-qi4gqz",
-    kEafiO: "musaex-2k45e9",
-    kPef9Z: "musaex-13fuv20",
-    kVAM5u: "musaex-axmpxa",
-    keoZOQ: "musaex-1eodh35",
-    kfSwDN: "musaex-87ps6o",
-    $$css: true
-  }
-};
 /**
  * @zh ActionSheet 组件。基于 Sheet 的移动端底部操作面板，
  * 支持操作列表和二次确认场景，同时提供声明式和指令式 API。
@@ -75,23 +34,13 @@ var ActionSheet = function ActionSheet(_ref) {
     locale = _useLocale2[0];
   var themeColorVars = useThemeColorVars(["on-surface-variant", "surface-container", "outline-variant"]);
   var styled = {
-    handle: {
-      className: "musaex-1po6ib musaex-rntz3j musaex-1xa9b2s musaex-9ip8r5 musaex-1eodh35 musaex-19i5tse musaex-vueqy4 musaex-2lah0s"
-    },
-    panel: {
-      className: "musaex-17o6occ musaex-zbxit7 musaex-1ei9pc5 musaex-15q9lfd"
-    },
-    header: {
-      className: "musaex-1b38e8b musaex-7gss4w"
-    },
+    handle: props(styles.handle),
+    panel: props(styles.panel),
+    header: props(styles.header),
     title: props(styles.title, $title.medium),
     description: props(styles.description, $body.medium),
-    actions: {
-      className: "musaex-ltmd5o"
-    },
-    action: {
-      className: "musaex-78zum5 musaex-dt5ytf musaex-6s0dn4 musaex-l56j7k musaex-1aur8i7 musaex-1v4gb6w musaex-1ypdohk musaex-qi4gqz musaex-uvson1 musaex-13fuv20 musaex-axmpxa musaex-87ps6o"
-    },
+    actions: props(styles.actions),
+    action: props(styles.action),
     actionText: props(styles.actionText, $body.large),
     actionDesc: props(styles.actionDesc, $body.small),
     cancel: props(styles.cancel, $label.large)

package/dist/components/action-sheet/styles.cjs

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * @zh ActionSheet 专用样式：面板背景、拖拽手柄、操作项和取消按钮的样式。
+ * @en ActionSheet-specific styles: panel background, drag handle, action items and cancel button.
+ */
+var styles = {
+  handle: {
+    kzqmXN: "musaex-1po6ib",
+    kZKoxP: "musaex-rntz3j",
+    kaIpWk: "musaex-1xa9b2s",
+    kWkggS: "musaex-9ip8r5",
+    keoZOQ: "musaex-1eodh35",
+    k1K539: "musaex-19i5tse",
+    kUOVxO: "musaex-vueqy4",
+    kmuXW: "musaex-2lah0s",
+    $$css: true
+  },
+  panel: {
+    kWkggS: "musaex-17o6occ",
+    kIxVMA: "musaex-zbxit7",
+    ksF3WI: "musaex-1ei9pc5",
+    kskxy: "musaex-15q9lfd",
+    $$css: true
+  },
+  header: {
+    kLKAdn: "musaex-1b38e8b",
+    kGO01o: "musaex-7gss4w",
+    $$css: true
+  },
+  title: {
+    kg3NbH: "musaex-1v4gb6w",
+    kLKAdn: "musaex-3nylsr",
+    k9WMMc: "musaex-2b8uid",
+    $$css: true
+  },
+  description: {
+    kg3NbH: "musaex-1v4gb6w",
+    kLKAdn: "musaex-3nylsr",
+    k9WMMc: "musaex-2b8uid",
+    $$css: true
+  },
+  actions: {
+    kLKAdn: "musaex-ltmd5o",
+    $$css: true
+  },
+  action: {
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    kGNEyG: "musaex-6s0dn4",
+    kjj79g: "musaex-l56j7k",
+    k8WAf4: "musaex-1aur8i7",
+    kg3NbH: "musaex-1v4gb6w",
+    kkrTdU: "musaex-1ypdohk",
+    kAzted: "musaex-qi4gqz",
+    kEafiO: "musaex-uvson1",
+    kPef9Z: "musaex-13fuv20",
+    kVAM5u: "musaex-axmpxa",
+    kfSwDN: "musaex-87ps6o",
+    $$css: true
+  },
+  actionText: {
+    k9WMMc: "musaex-2b8uid",
+    $$css: true
+  },
+  actionDesc: {
+    k9WMMc: "musaex-2b8uid",
+    keoZOQ: "musaex-1khtc51",
+    $$css: true
+  },
+  cancel: {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    kjj79g: "musaex-l56j7k",
+    k8WAf4: "musaex-1aur8i7",
+    kg3NbH: "musaex-1v4gb6w",
+    kkrTdU: "musaex-1ypdohk",
+    kAzted: "musaex-qi4gqz",
+    kEafiO: "musaex-2k45e9",
+    kPef9Z: "musaex-13fuv20",
+    kVAM5u: "musaex-axmpxa",
+    keoZOQ: "musaex-1eodh35",
+    kfSwDN: "musaex-87ps6o",
+    $$css: true
+  }
+};
+
+exports.default = styles;

package/dist/components/action-sheet/styles.d.ts

@@ -0,0 +1,75 @@
+/**
+ * @zh ActionSheet 专用样式：面板背景、拖拽手柄、操作项和取消按钮的样式。
+ * @en ActionSheet-specific styles: panel background, drag handle, action items and cancel button.
+ */
+declare const styles: Readonly<{
+    readonly handle: Readonly<{
+        readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
+        readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
+        readonly borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
+        readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-on-surface-variant)">;
+        readonly marginTop: import("@stylexjs/stylex").StyleXClassNameFor<"marginTop", string>;
+        readonly marginBottom: import("@stylexjs/stylex").StyleXClassNameFor<"marginBottom", string>;
+        readonly marginInline: import("@stylexjs/stylex").StyleXClassNameFor<"marginInline", "auto">;
+        readonly flexShrink: import("@stylexjs/stylex").StyleXClassNameFor<"flexShrink", 0>;
+    }>;
+    readonly panel: Readonly<{
+        readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-surface-container)">;
+        readonly borderTopLeftRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopLeftRadius", string>;
+        readonly borderTopRightRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopRightRadius", string>;
+        readonly maxHeight: import("@stylexjs/stylex").StyleXClassNameFor<"maxHeight", string>;
+    }>;
+    readonly header: Readonly<{
+        readonly paddingTop: import("@stylexjs/stylex").StyleXClassNameFor<"paddingTop", string>;
+        readonly paddingBottom: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBottom", string>;
+    }>;
+    readonly title: Readonly<{
+        readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+        readonly paddingTop: import("@stylexjs/stylex").StyleXClassNameFor<"paddingTop", string>;
+        readonly textAlign: import("@stylexjs/stylex").StyleXClassNameFor<"textAlign", "center">;
+    }>;
+    readonly description: Readonly<{
+        readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+        readonly paddingTop: import("@stylexjs/stylex").StyleXClassNameFor<"paddingTop", string>;
+        readonly textAlign: import("@stylexjs/stylex").StyleXClassNameFor<"textAlign", "center">;
+    }>;
+    readonly actions: Readonly<{
+        readonly paddingTop: import("@stylexjs/stylex").StyleXClassNameFor<"paddingTop", string>;
+    }>;
+    readonly action: Readonly<{
+        readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: import("@stylexjs/stylex").StyleXClassNameFor<"flexDirection", "column">;
+        readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("@stylexjs/stylex").StyleXClassNameFor<"justifyContent", "center">;
+        readonly paddingBlock: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+        readonly cursor: import("@stylexjs/stylex").StyleXClassNameFor<"cursor", "pointer">;
+        readonly minHeight: import("@stylexjs/stylex").StyleXClassNameFor<"minHeight", string>;
+        readonly borderTopWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopWidth", string>;
+        readonly borderTopStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopStyle", "solid">;
+        readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-outline-variant)">;
+        readonly userSelect: import("@stylexjs/stylex").StyleXClassNameFor<"userSelect", "none">;
+    }>;
+    readonly actionText: Readonly<{
+        readonly textAlign: import("@stylexjs/stylex").StyleXClassNameFor<"textAlign", "center">;
+    }>;
+    readonly actionDesc: Readonly<{
+        readonly textAlign: import("@stylexjs/stylex").StyleXClassNameFor<"textAlign", "center">;
+        readonly marginTop: import("@stylexjs/stylex").StyleXClassNameFor<"marginTop", string>;
+    }>;
+    readonly cancel: Readonly<{
+        readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("@stylexjs/stylex").StyleXClassNameFor<"justifyContent", "center">;
+        readonly paddingBlock: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+        readonly cursor: import("@stylexjs/stylex").StyleXClassNameFor<"cursor", "pointer">;
+        readonly minHeight: import("@stylexjs/stylex").StyleXClassNameFor<"minHeight", string>;
+        readonly borderTopWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopWidth", string>;
+        readonly borderTopStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopStyle", "solid">;
+        readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-outline-variant)">;
+        readonly marginTop: import("@stylexjs/stylex").StyleXClassNameFor<"marginTop", string>;
+        readonly userSelect: import("@stylexjs/stylex").StyleXClassNameFor<"userSelect", "none">;
+    }>;
+}>;
+export default styles;

package/dist/components/action-sheet/styles.mjs

@@ -0,0 +1,86 @@
+/**
+ * @zh ActionSheet 专用样式：面板背景、拖拽手柄、操作项和取消按钮的样式。
+ * @en ActionSheet-specific styles: panel background, drag handle, action items and cancel button.
+ */
+var styles = {
+  handle: {
+    kzqmXN: "musaex-1po6ib",
+    kZKoxP: "musaex-rntz3j",
+    kaIpWk: "musaex-1xa9b2s",
+    kWkggS: "musaex-9ip8r5",
+    keoZOQ: "musaex-1eodh35",
+    k1K539: "musaex-19i5tse",
+    kUOVxO: "musaex-vueqy4",
+    kmuXW: "musaex-2lah0s",
+    $$css: true
+  },
+  panel: {
+    kWkggS: "musaex-17o6occ",
+    kIxVMA: "musaex-zbxit7",
+    ksF3WI: "musaex-1ei9pc5",
+    kskxy: "musaex-15q9lfd",
+    $$css: true
+  },
+  header: {
+    kLKAdn: "musaex-1b38e8b",
+    kGO01o: "musaex-7gss4w",
+    $$css: true
+  },
+  title: {
+    kg3NbH: "musaex-1v4gb6w",
+    kLKAdn: "musaex-3nylsr",
+    k9WMMc: "musaex-2b8uid",
+    $$css: true
+  },
+  description: {
+    kg3NbH: "musaex-1v4gb6w",
+    kLKAdn: "musaex-3nylsr",
+    k9WMMc: "musaex-2b8uid",
+    $$css: true
+  },
+  actions: {
+    kLKAdn: "musaex-ltmd5o",
+    $$css: true
+  },
+  action: {
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    kGNEyG: "musaex-6s0dn4",
+    kjj79g: "musaex-l56j7k",
+    k8WAf4: "musaex-1aur8i7",
+    kg3NbH: "musaex-1v4gb6w",
+    kkrTdU: "musaex-1ypdohk",
+    kAzted: "musaex-qi4gqz",
+    kEafiO: "musaex-uvson1",
+    kPef9Z: "musaex-13fuv20",
+    kVAM5u: "musaex-axmpxa",
+    kfSwDN: "musaex-87ps6o",
+    $$css: true
+  },
+  actionText: {
+    k9WMMc: "musaex-2b8uid",
+    $$css: true
+  },
+  actionDesc: {
+    k9WMMc: "musaex-2b8uid",
+    keoZOQ: "musaex-1khtc51",
+    $$css: true
+  },
+  cancel: {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    kjj79g: "musaex-l56j7k",
+    k8WAf4: "musaex-1aur8i7",
+    kg3NbH: "musaex-1v4gb6w",
+    kkrTdU: "musaex-1ypdohk",
+    kAzted: "musaex-qi4gqz",
+    kEafiO: "musaex-2k45e9",
+    kPef9Z: "musaex-13fuv20",
+    kVAM5u: "musaex-axmpxa",
+    keoZOQ: "musaex-1eodh35",
+    kfSwDN: "musaex-87ps6o",
+    $$css: true
+  }
+};
+
+export { styles as default };

package/dist/components/avatar/avatar.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var styles = require('./styles.cjs');
 var React = require('react');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var context = require('./context.cjs');
@@ -15,62 +16,6 @@ var skeleton = require('../skeleton/skeleton.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 
 var _excluded = ["src", "alt", "shape", "size", "className", "style", "crossOrigin", "referrerPolicy"];
-var styles = {
-  avatar: {
-    kMzoRj: "musaex-1iyq3db",
-    ksu8eU: "musaex-1y0btm7",
-    kVAM5u: "musaex-9r1u3d",
-    kB7OPa: "musaex-9f619",
-    kWkggS: "musaex-1ncffr6",
-    kMwMTN: "musaex-14qql8p",
-    kGNEyG: "musaex-6s0dn4",
-    kjj79g: "musaex-l56j7k",
-    kfSwDN: "musaex-87ps6o",
-    k1xSpc: "musaex-3nfvp2",
-    kXLuUW: "musaex-xymvpz",
-    kmuXW: "musaex-2lah0s",
-    $$css: true
-  },
-  loading: {
-    k1xSpc: "musaex-1rg5ohu",
-    kXLuUW: "musaex-xymvpz",
-    $$css: true
-  },
-  image: {
-    kVIFPx: "musaex-l1xv1r",
-    kYDvB4: "musaex-1s8dy9j",
-    kaIpWk: "musaex-1pjcqnp",
-    $$css: true
-  },
-  overlapping: {
-    kgxsog: "musaex-e1706l",
-    kVAM5u: "musaex-o3pef4",
-    $$css: true
-  },
-  circular: {
-    kaIpWk: "musaex-shxsqp",
-    $$css: true
-  },
-  squared: {
-    kaIpWk: "musaex-db68te",
-    $$css: true
-  },
-  small: {
-    kzqmXN: "musaex-t4hhhd",
-    kZKoxP: "musaex-pvxov6",
-    $$css: true
-  },
-  medium: {
-    kzqmXN: "musaex-1po6ib",
-    kZKoxP: "musaex-1si1pn3",
-    $$css: true
-  },
-  large: {
-    kzqmXN: "musaex-19dbm5w",
-    kZKoxP: "musaex-12ez60q",
-    $$css: true
-  }
-};
 /**
  * @description
  * `Avatar`
@@ -100,9 +45,9 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     referrerPolicy: referrerPolicy
   });
   var styled = {
-    avatar: stylex.props(theme.$label[size], styles.avatar, styles[size], styles[shape], isInGroup && styles.overlapping),
-    loading: stylex.props(theme.$label[size], styles.loading, styles[size], styles[shape], isInGroup && styles.overlapping),
-    image: stylex.props(styles.image, styles[size])
+    avatar: stylex.props(theme.$label[size], styles.default.avatar["default"], styles.default.avatar[size], styles.default.avatar[shape], isInGroup && styles.default.avatar.overlapping),
+    loading: stylex.props(theme.$label[size], styles.default.loading["default"], styles.default.avatar[size], styles.default.avatar[shape], isInGroup && styles.default.avatar.overlapping),
+    image: stylex.props(styles.default.image["default"], styles.default.avatar[size])
   };
   if (loadStatus === "loading") {
     return /*#__PURE__*/React.createElement(skeleton.default, {

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

@@ -6,7 +6,7 @@ import React from "react";
 declare const Avatar: React.ForwardRefExoticComponent<import("../../types/element").ComponentProps & Pick<import("../../types/image").ImageProps, "crossOrigin" | "referrerPolicy"> & {
     src?: string;
     alt?: string;
-    size?: "small" | "medium" | "large";
+    size?: "medium" | "small" | "large";
     shape?: "circular" | "squared";
 } & React.RefAttributes<HTMLSpanElement>>;
 export default Avatar;

package/dist/components/avatar/avatar.mjs

@@ -1,5 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import styles from './styles.mjs';
 import React, { forwardRef, useContext } from 'react';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import Context, { CLASS_NAMES } from './context.mjs';
@@ -11,62 +12,6 @@ import Skeleton from '../skeleton/skeleton.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 
 var _excluded = ["src", "alt", "shape", "size", "className", "style", "crossOrigin", "referrerPolicy"];
-var styles = {
-  avatar: {
-    kMzoRj: "musaex-1iyq3db",
-    ksu8eU: "musaex-1y0btm7",
-    kVAM5u: "musaex-9r1u3d",
-    kB7OPa: "musaex-9f619",
-    kWkggS: "musaex-1ncffr6",
-    kMwMTN: "musaex-14qql8p",
-    kGNEyG: "musaex-6s0dn4",
-    kjj79g: "musaex-l56j7k",
-    kfSwDN: "musaex-87ps6o",
-    k1xSpc: "musaex-3nfvp2",
-    kXLuUW: "musaex-xymvpz",
-    kmuXW: "musaex-2lah0s",
-    $$css: true
-  },
-  loading: {
-    k1xSpc: "musaex-1rg5ohu",
-    kXLuUW: "musaex-xymvpz",
-    $$css: true
-  },
-  image: {
-    kVIFPx: "musaex-l1xv1r",
-    kYDvB4: "musaex-1s8dy9j",
-    kaIpWk: "musaex-1pjcqnp",
-    $$css: true
-  },
-  overlapping: {
-    kgxsog: "musaex-e1706l",
-    kVAM5u: "musaex-o3pef4",
-    $$css: true
-  },
-  circular: {
-    kaIpWk: "musaex-shxsqp",
-    $$css: true
-  },
-  squared: {
-    kaIpWk: "musaex-db68te",
-    $$css: true
-  },
-  small: {
-    kzqmXN: "musaex-t4hhhd",
-    kZKoxP: "musaex-pvxov6",
-    $$css: true
-  },
-  medium: {
-    kzqmXN: "musaex-1po6ib",
-    kZKoxP: "musaex-1si1pn3",
-    $$css: true
-  },
-  large: {
-    kzqmXN: "musaex-19dbm5w",
-    kZKoxP: "musaex-12ez60q",
-    $$css: true
-  }
-};
 /**
  * @description
  * `Avatar`
@@ -96,9 +41,9 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     referrerPolicy: referrerPolicy
   });
   var styled = {
-    avatar: props($label[size], styles.avatar, styles[size], styles[shape], isInGroup && styles.overlapping),
-    loading: props($label[size], styles.loading, styles[size], styles[shape], isInGroup && styles.overlapping),
-    image: props(styles.image, styles[size])
+    avatar: props($label[size], styles.avatar["default"], styles.avatar[size], styles.avatar[shape], isInGroup && styles.avatar.overlapping),
+    loading: props($label[size], styles.loading["default"], styles.avatar[size], styles.avatar[shape], isInGroup && styles.avatar.overlapping),
+    image: props(styles.image["default"], styles.avatar[size])
   };
   if (loadStatus === "loading") {
     return /*#__PURE__*/React.createElement(Skeleton, {

package/dist/components/avatar/group.cjs

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var styles = require('./styles.cjs');
 var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var context = require('./context.cjs');
 var popover = require('../popover/popover.cjs');
 var avatar = require('./avatar.cjs');
@@ -19,9 +21,7 @@ var _Group = function Group(_ref) {
     _ref$max = _ref.max,
     max = _ref$max === void 0 ? 3 : _ref$max;
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
-  var styled = {
-    className: "musaex-3nfvp2 musaex-87ps6o"
-  };
+  var styled = stylex.props(styles.default.group["default"]);
   var children = React.useMemo(function () {
     var _Children$toArray$red = React.Children.toArray(_children).reduce(function (prev, child, index) {
         var _child = /*#__PURE__*/ /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {

package/dist/components/avatar/group.mjs

@@ -1,5 +1,7 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import styles from './styles.mjs';
 import React, { useMemo, Children, isValidElement, cloneElement } from 'react';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import Context, { CLASS_NAMES } from './context.mjs';
 import Popover from '../popover/popover.mjs';
 import Avatar from './avatar.mjs';
@@ -15,9 +17,7 @@ var _Group = function Group(_ref) {
     _ref$max = _ref.max,
     max = _ref$max === void 0 ? 3 : _ref$max;
   var classNames = useClassNames(CLASS_NAMES);
-  var styled = {
-    className: "musaex-3nfvp2 musaex-87ps6o"
-  };
+  var styled = props(styles.group["default"]);
   var children = useMemo(function () {
     var _Children$toArray$red = Children.toArray(_children).reduce(function (prev, child, index) {
         var _child = /*#__PURE__*/ /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {