musae 1.0.2 → 1.0.4

package/dist/components/avatar/avatar.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.10.1/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.12.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var context = require('./context.cjs');
 var hooks = require('../theme/hooks.cjs');
 var theme = require('../theme/theme.cjs');
@@ -16,124 +16,115 @@ var useClassNames = require('../../hooks/use-class-names.cjs');
 
 var _excluded = ["src", "alt", "shape", "size", "className", "style", "crossOrigin", "referrerPolicy"];
 var styles = {
-  avatar: function avatar(props) {
-    return [{
-      borderWidth: "musaex-1iyq3db",
-      borderInlineWidth: null,
-      borderInlineStartWidth: null,
-      borderLeftWidth: null,
-      borderInlineEndWidth: null,
-      borderRightWidth: null,
-      borderBlockWidth: null,
-      borderTopWidth: null,
-      borderBottomWidth: null,
-      borderStyle: "musaex-1y0btm7",
-      borderInlineStyle: null,
-      borderInlineStartStyle: null,
-      borderLeftStyle: null,
-      borderInlineEndStyle: null,
-      borderRightStyle: null,
-      borderBlockStyle: null,
-      borderTopStyle: null,
-      borderBottomStyle: null,
-      borderColor: "musaex-9r1u3d",
-      borderInlineColor: null,
-      borderInlineStartColor: null,
-      borderLeftColor: null,
-      borderInlineEndColor: null,
-      borderRightColor: null,
-      borderBlockColor: null,
-      borderTopColor: null,
-      borderBottomColor: null,
-      boxSizing: "musaex-9f619",
-      backgroundColor: props.backgroundColor == null ? null : "musaex-r5ldyu",
-      color: props.color == null ? null : "musaex-fx01vb",
-      alignItems: "musaex-6s0dn4",
-      justifyContent: "musaex-l56j7k",
-      userSelect: "musaex-87ps6o",
-      display: "musaex-3nfvp2",
-      verticalAlign: "musaex-xymvpz",
-      $$css: true
-    }, {
-      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : undefined,
-      "--color": props.color != null ? props.color : undefined
-    }];
+  avatar: {
+    kMzoRj: "musaex-1iyq3db",
+    kjGldf: null,
+    k2ei4v: null,
+    kZ1KPB: null,
+    ke9TFa: null,
+    kWqL5O: null,
+    kLoX6v: null,
+    kEafiO: null,
+    kt9PQ7: null,
+    ksu8eU: "musaex-1y0btm7",
+    kJRH4f: null,
+    kVhnKS: null,
+    k4WBpm: null,
+    k8ry5P: null,
+    kSWEuD: null,
+    kDUl1X: null,
+    kPef9Z: null,
+    kfdmCh: null,
+    kVAM5u: "musaex-9r1u3d",
+    kzOINU: null,
+    kGJrpR: null,
+    kaZRDh: null,
+    kBCPoo: null,
+    k26BEO: null,
+    k5QoK5: null,
+    kLZC3w: null,
+    kL6WhQ: null,
+    kB7OPa: "musaex-9f619",
+    kWkggS: "musaex-1ncffr6",
+    kMwMTN: "musaex-14qql8p",
+    kGNEyG: "musaex-6s0dn4",
+    kjj79g: "musaex-l56j7k",
+    kfSwDN: "musaex-87ps6o",
+    k1xSpc: "musaex-3nfvp2",
+    kXLuUW: "musaex-xymvpz",
+    $$css: true
   },
   loading: {
-    display: "musaex-1rg5ohu",
-    verticalAlign: "musaex-xymvpz",
+    k1xSpc: "musaex-1rg5ohu",
+    kXLuUW: "musaex-xymvpz",
     $$css: true
   },
   image: {
-    objectFit: "musaex-l1xv1r",
-    objectPosition: "musaex-1s8dy9j",
-    borderRadius: "musaex-1pjcqnp",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
+    kVIFPx: "musaex-l1xv1r",
+    kYDvB4: "musaex-1s8dy9j",
+    kaIpWk: "musaex-1pjcqnp",
+    krdFHd: null,
+    kfmiAY: null,
+    kVL7Gh: null,
+    kT0f0o: null,
+    kIxVMA: null,
+    ksF3WI: null,
+    kqGeR4: null,
+    kYm2EN: null,
     $$css: true
   },
-  overlapping: function overlapping(props) {
-    return [{
-      ":not(:first-child)_marginInlineStart": "musaex-e1706l",
-      ":not(:first-child)_marginLeft": null,
-      ":not(:first-child)_marginRight": null,
-      borderColor: props.outlineColor == null ? null : "musaex-1u3gezn",
-      borderInlineColor: null,
-      borderInlineStartColor: null,
-      borderLeftColor: null,
-      borderInlineEndColor: null,
-      borderRightColor: null,
-      borderBlockColor: null,
-      borderTopColor: null,
-      borderBottomColor: null,
-      $$css: true
-    }, {
-      "--borderColor": props.outlineColor != null ? props.outlineColor : undefined
-    }];
+  overlapping: {
+    kgxsog: "musaex-e1706l",
+    k9fVmS: null,
+    kZB82w: null,
+    kVAM5u: "musaex-o3pef4",
+    kzOINU: null,
+    kGJrpR: null,
+    kaZRDh: null,
+    kBCPoo: null,
+    k26BEO: null,
+    k5QoK5: null,
+    kLZC3w: null,
+    kL6WhQ: null,
+    $$css: true
   },
   circular: {
-    borderRadius: "musaex-shxsqp",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
+    kaIpWk: "musaex-shxsqp",
+    krdFHd: null,
+    kfmiAY: null,
+    kVL7Gh: null,
+    kT0f0o: null,
+    kIxVMA: null,
+    ksF3WI: null,
+    kqGeR4: null,
+    kYm2EN: null,
     $$css: true
   },
   squared: {
-    borderRadius: "musaex-m9kfsm",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
+    kaIpWk: "musaex-m9kfsm",
+    krdFHd: null,
+    kfmiAY: null,
+    kVL7Gh: null,
+    kT0f0o: null,
+    kIxVMA: null,
+    ksF3WI: null,
+    kqGeR4: null,
+    kYm2EN: null,
     $$css: true
   },
   small: {
-    width: "musaex-t4hhhd",
-    height: "musaex-pvxov6",
+    kzqmXN: "musaex-t4hhhd",
+    kZKoxP: "musaex-pvxov6",
     $$css: true
   },
   medium: {
-    width: "musaex-1po6ib",
-    height: "musaex-1si1pn3",
+    kzqmXN: "musaex-1po6ib",
+    kZKoxP: "musaex-1si1pn3",
     $$css: true
   },
   large: {
-    width: "musaex-19dbm5w",
-    height: "musaex-12ez60q",
+    kzqmXN: "musaex-19dbm5w",
+    kZKoxP: "musaex-12ez60q",
     $$css: true
   }
 };
@@ -166,16 +157,9 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     referrerPolicy: referrerPolicy
   });
   var styled = {
-    avatar: stylex.default.props(theme.typography.label[size], styles.avatar({
-      backgroundColor: theme$1.colors["primary-container"],
-      color: theme$1.colors.primary
-    }), styles[size], styles[shape], isInGroup && styles.overlapping({
-      outlineColor: theme$1.colors["on-primary"]
-    })),
-    loading: stylex.default.props(theme.typography.label[size], styles.loading, styles[size], styles[shape], isInGroup && styles.overlapping({
-      outlineColor: theme$1.colors["on-primary"]
-    })),
-    image: stylex.default.props(styles.image, styles[size])
+    avatar: stylex.props(theme.typography.label[size], styles.avatar, styles[size], styles[shape], isInGroup && styles.overlapping),
+    loading: stylex.props(theme.typography.label[size], styles.loading, styles[size], styles[shape], isInGroup && styles.overlapping),
+    image: stylex.props(styles.image, styles[size])
   };
   if (loadStatus === "loading") {
     return /*#__PURE__*/React.createElement(skeleton.default, {
@@ -185,7 +169,12 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }
   return /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({}, props), {}, {
     className: className.stringify(classNames.avatar, className$1, styled.avatar.className),
-    style: _objectSpread(_objectSpread({}, styled.avatar.style), style),
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.avatar.style), style), {}, {
+      // @ts-expect-error style vars
+      "--color-primary": theme$1.colors.primary,
+      "--color-on-primary": theme$1.colors["on-primary"],
+      "--color-primary-container": theme$1.colors["primary-container"]
+    }),
     ref: ref
   }), loadStatus === "loaded" && (/*#__PURE__*/React.createElement("img", {
     draggable: false,

package/dist/components/avatar/avatar.mjs

@@ -1,7 +1,7 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { forwardRef, useContext } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.10.1/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.12.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import Context, { CLASS_NAMES } from './context.mjs';
 import { useTheme } from '../theme/hooks.mjs';
 import { typography } from '../theme/theme.mjs';
@@ -12,124 +12,115 @@ import { useClassNames } from '../../hooks/use-class-names.mjs';
 
 var _excluded = ["src", "alt", "shape", "size", "className", "style", "crossOrigin", "referrerPolicy"];
 var styles = {
-  avatar: function avatar(props) {
-    return [{
-      borderWidth: "musaex-1iyq3db",
-      borderInlineWidth: null,
-      borderInlineStartWidth: null,
-      borderLeftWidth: null,
-      borderInlineEndWidth: null,
-      borderRightWidth: null,
-      borderBlockWidth: null,
-      borderTopWidth: null,
-      borderBottomWidth: null,
-      borderStyle: "musaex-1y0btm7",
-      borderInlineStyle: null,
-      borderInlineStartStyle: null,
-      borderLeftStyle: null,
-      borderInlineEndStyle: null,
-      borderRightStyle: null,
-      borderBlockStyle: null,
-      borderTopStyle: null,
-      borderBottomStyle: null,
-      borderColor: "musaex-9r1u3d",
-      borderInlineColor: null,
-      borderInlineStartColor: null,
-      borderLeftColor: null,
-      borderInlineEndColor: null,
-      borderRightColor: null,
-      borderBlockColor: null,
-      borderTopColor: null,
-      borderBottomColor: null,
-      boxSizing: "musaex-9f619",
-      backgroundColor: props.backgroundColor == null ? null : "musaex-r5ldyu",
-      color: props.color == null ? null : "musaex-fx01vb",
-      alignItems: "musaex-6s0dn4",
-      justifyContent: "musaex-l56j7k",
-      userSelect: "musaex-87ps6o",
-      display: "musaex-3nfvp2",
-      verticalAlign: "musaex-xymvpz",
-      $$css: true
-    }, {
-      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : undefined,
-      "--color": props.color != null ? props.color : undefined
-    }];
+  avatar: {
+    kMzoRj: "musaex-1iyq3db",
+    kjGldf: null,
+    k2ei4v: null,
+    kZ1KPB: null,
+    ke9TFa: null,
+    kWqL5O: null,
+    kLoX6v: null,
+    kEafiO: null,
+    kt9PQ7: null,
+    ksu8eU: "musaex-1y0btm7",
+    kJRH4f: null,
+    kVhnKS: null,
+    k4WBpm: null,
+    k8ry5P: null,
+    kSWEuD: null,
+    kDUl1X: null,
+    kPef9Z: null,
+    kfdmCh: null,
+    kVAM5u: "musaex-9r1u3d",
+    kzOINU: null,
+    kGJrpR: null,
+    kaZRDh: null,
+    kBCPoo: null,
+    k26BEO: null,
+    k5QoK5: null,
+    kLZC3w: null,
+    kL6WhQ: null,
+    kB7OPa: "musaex-9f619",
+    kWkggS: "musaex-1ncffr6",
+    kMwMTN: "musaex-14qql8p",
+    kGNEyG: "musaex-6s0dn4",
+    kjj79g: "musaex-l56j7k",
+    kfSwDN: "musaex-87ps6o",
+    k1xSpc: "musaex-3nfvp2",
+    kXLuUW: "musaex-xymvpz",
+    $$css: true
   },
   loading: {
-    display: "musaex-1rg5ohu",
-    verticalAlign: "musaex-xymvpz",
+    k1xSpc: "musaex-1rg5ohu",
+    kXLuUW: "musaex-xymvpz",
     $$css: true
   },
   image: {
-    objectFit: "musaex-l1xv1r",
-    objectPosition: "musaex-1s8dy9j",
-    borderRadius: "musaex-1pjcqnp",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
+    kVIFPx: "musaex-l1xv1r",
+    kYDvB4: "musaex-1s8dy9j",
+    kaIpWk: "musaex-1pjcqnp",
+    krdFHd: null,
+    kfmiAY: null,
+    kVL7Gh: null,
+    kT0f0o: null,
+    kIxVMA: null,
+    ksF3WI: null,
+    kqGeR4: null,
+    kYm2EN: null,
     $$css: true
   },
-  overlapping: function overlapping(props) {
-    return [{
-      ":not(:first-child)_marginInlineStart": "musaex-e1706l",
-      ":not(:first-child)_marginLeft": null,
-      ":not(:first-child)_marginRight": null,
-      borderColor: props.outlineColor == null ? null : "musaex-1u3gezn",
-      borderInlineColor: null,
-      borderInlineStartColor: null,
-      borderLeftColor: null,
-      borderInlineEndColor: null,
-      borderRightColor: null,
-      borderBlockColor: null,
-      borderTopColor: null,
-      borderBottomColor: null,
-      $$css: true
-    }, {
-      "--borderColor": props.outlineColor != null ? props.outlineColor : undefined
-    }];
+  overlapping: {
+    kgxsog: "musaex-e1706l",
+    k9fVmS: null,
+    kZB82w: null,
+    kVAM5u: "musaex-o3pef4",
+    kzOINU: null,
+    kGJrpR: null,
+    kaZRDh: null,
+    kBCPoo: null,
+    k26BEO: null,
+    k5QoK5: null,
+    kLZC3w: null,
+    kL6WhQ: null,
+    $$css: true
   },
   circular: {
-    borderRadius: "musaex-shxsqp",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
+    kaIpWk: "musaex-shxsqp",
+    krdFHd: null,
+    kfmiAY: null,
+    kVL7Gh: null,
+    kT0f0o: null,
+    kIxVMA: null,
+    ksF3WI: null,
+    kqGeR4: null,
+    kYm2EN: null,
     $$css: true
   },
   squared: {
-    borderRadius: "musaex-m9kfsm",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
+    kaIpWk: "musaex-m9kfsm",
+    krdFHd: null,
+    kfmiAY: null,
+    kVL7Gh: null,
+    kT0f0o: null,
+    kIxVMA: null,
+    ksF3WI: null,
+    kqGeR4: null,
+    kYm2EN: null,
     $$css: true
   },
   small: {
-    width: "musaex-t4hhhd",
-    height: "musaex-pvxov6",
+    kzqmXN: "musaex-t4hhhd",
+    kZKoxP: "musaex-pvxov6",
     $$css: true
   },
   medium: {
-    width: "musaex-1po6ib",
-    height: "musaex-1si1pn3",
+    kzqmXN: "musaex-1po6ib",
+    kZKoxP: "musaex-1si1pn3",
     $$css: true
   },
   large: {
-    width: "musaex-19dbm5w",
-    height: "musaex-12ez60q",
+    kzqmXN: "musaex-19dbm5w",
+    kZKoxP: "musaex-12ez60q",
     $$css: true
   }
 };
@@ -149,7 +140,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style = _ref.style,
     crossOrigin = _ref.crossOrigin,
     referrerPolicy = _ref.referrerPolicy,
-    props = _objectWithoutProperties(_ref, _excluded);
+    props$1 = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
   var group = useContext(Context);
   var isInGroup = !!group;
@@ -162,16 +153,9 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     referrerPolicy: referrerPolicy
   });
   var styled = {
-    avatar: _stylex.props(typography.label[size], styles.avatar({
-      backgroundColor: theme.colors["primary-container"],
-      color: theme.colors.primary
-    }), styles[size], styles[shape], isInGroup && styles.overlapping({
-      outlineColor: theme.colors["on-primary"]
-    })),
-    loading: _stylex.props(typography.label[size], styles.loading, styles[size], styles[shape], isInGroup && styles.overlapping({
-      outlineColor: theme.colors["on-primary"]
-    })),
-    image: _stylex.props(styles.image, styles[size])
+    avatar: props(typography.label[size], styles.avatar, styles[size], styles[shape], isInGroup && styles.overlapping),
+    loading: props(typography.label[size], styles.loading, styles[size], styles[shape], isInGroup && styles.overlapping),
+    image: props(styles.image, styles[size])
   };
   if (loadStatus === "loading") {
     return /*#__PURE__*/React.createElement(Skeleton, {
@@ -179,9 +163,14 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
       style: styled.loading.style
     });
   }
-  return /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({}, props$1), {}, {
     className: stringify(classNames.avatar, className, styled.avatar.className),
-    style: _objectSpread(_objectSpread({}, styled.avatar.style), style),
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.avatar.style), style), {}, {
+      // @ts-expect-error style vars
+      "--color-primary": theme.colors.primary,
+      "--color-on-primary": theme.colors["on-primary"],
+      "--color-primary-container": theme.colors["primary-container"]
+    }),
     ref: ref
   }), loadStatus === "loaded" && (/*#__PURE__*/React.createElement("img", {
     draggable: false,