musae 0.5.6 → 0.5.8

package/dist/components/avatar/avatar.cjs

@@ -3,7 +3,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.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.9.3/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var context = require('./context.cjs');
 var hooks = require('../theme/hooks.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
@@ -17,7 +17,7 @@ var _excluded = ["src", "alt", "shape", "size", "className", "style", "crossOrig
 var styles = {
   avatar: function avatar(props) {
     return [{
-      borderWidth: "musaex-bupo1m",
+      borderWidth: "musaex-1iyq3db",
       borderInlineWidth: null,
       borderInlineStartWidth: null,
       borderLeftWidth: null,
@@ -46,15 +46,15 @@ var styles = {
       borderBottomColor: null,
       boxSizing: "musaex-9f619",
       display: "musaex-3nfvp2",
-      backgroundColor: "musaex-q1mx2j",
-      color: "musaex-19dipnz",
+      backgroundColor: props.backgroundColor == null ? null : "musaex-r5ldyu",
+      color: props.color == null ? null : "musaex-fx01vb",
       alignItems: "musaex-6s0dn4",
       justifyContent: "musaex-l56j7k",
       userSelect: "musaex-87ps6o",
       $$css: true
     }, {
-      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
-      "--color": props.color != null ? props.color : "initial"
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : undefined,
+      "--color": props.color != null ? props.color : undefined
     }];
   },
   image: {
@@ -73,10 +73,10 @@ var styles = {
   },
   overlapping: function overlapping(props) {
     return [{
-      ":not(:first-child)_marginInlineStart": "musaex-1bx1b4w",
+      ":not(:first-child)_marginInlineStart": "musaex-k72gy",
       ":not(:first-child)_marginLeft": null,
       ":not(:first-child)_marginRight": null,
-      borderColor: "musaex-eqt46j",
+      borderColor: props.outlineColor == null ? null : "musaex-1u3gezn",
       borderInlineColor: null,
       borderInlineStartColor: null,
       borderLeftColor: null,
@@ -87,11 +87,11 @@ var styles = {
       borderBottomColor: null,
       $$css: true
     }, {
-      "--borderColor": props.outlineColor != null ? props.outlineColor : "initial"
+      "--borderColor": props.outlineColor != null ? props.outlineColor : undefined
     }];
   },
   circular: {
-    borderRadius: "musaex-z7qqyb",
+    borderRadius: "musaex-shxsqp",
     borderStartStartRadius: null,
     borderStartEndRadius: null,
     borderEndStartRadius: null,
@@ -103,7 +103,7 @@ var styles = {
     $$css: true
   },
   squared: {
-    borderRadius: "musaex-ok3b7d",
+    borderRadius: "musaex-10lp2fo",
     borderStartStartRadius: null,
     borderStartEndRadius: null,
     borderEndStartRadius: null,
@@ -115,18 +115,18 @@ var styles = {
     $$css: true
   },
   small: {
-    width: "musaex-6hukdw",
-    height: "musaex-q5eura",
+    width: "musaex-t4hhhd",
+    height: "musaex-pvxov6",
     $$css: true
   },
   medium: {
-    width: "musaex-zx3e9c",
-    height: "musaex-1dql3xx",
+    width: "musaex-1po6ib",
+    height: "musaex-1si1pn3",
     $$css: true
   },
   large: {
-    width: "musaex-1opwmbq",
-    height: "musaex-19ak84k",
+    width: "musaex-19dbm5w",
+    height: "musaex-12ez60q",
     $$css: true
   }
 };

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.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.9.3/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { Context } from './context.mjs';
 import { useTheme } from '../theme/hooks.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
@@ -15,7 +15,7 @@ var _excluded = ["src", "alt", "shape", "size", "className", "style", "crossOrig
 var styles = {
   avatar: function avatar(props) {
     return [{
-      borderWidth: "musaex-bupo1m",
+      borderWidth: "musaex-1iyq3db",
       borderInlineWidth: null,
       borderInlineStartWidth: null,
       borderLeftWidth: null,
@@ -44,15 +44,15 @@ var styles = {
       borderBottomColor: null,
       boxSizing: "musaex-9f619",
       display: "musaex-3nfvp2",
-      backgroundColor: "musaex-q1mx2j",
-      color: "musaex-19dipnz",
+      backgroundColor: props.backgroundColor == null ? null : "musaex-r5ldyu",
+      color: props.color == null ? null : "musaex-fx01vb",
       alignItems: "musaex-6s0dn4",
       justifyContent: "musaex-l56j7k",
       userSelect: "musaex-87ps6o",
       $$css: true
     }, {
-      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
-      "--color": props.color != null ? props.color : "initial"
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : undefined,
+      "--color": props.color != null ? props.color : undefined
     }];
   },
   image: {
@@ -71,10 +71,10 @@ var styles = {
   },
   overlapping: function overlapping(props) {
     return [{
-      ":not(:first-child)_marginInlineStart": "musaex-1bx1b4w",
+      ":not(:first-child)_marginInlineStart": "musaex-k72gy",
       ":not(:first-child)_marginLeft": null,
       ":not(:first-child)_marginRight": null,
-      borderColor: "musaex-eqt46j",
+      borderColor: props.outlineColor == null ? null : "musaex-1u3gezn",
       borderInlineColor: null,
       borderInlineStartColor: null,
       borderLeftColor: null,
@@ -85,11 +85,11 @@ var styles = {
       borderBottomColor: null,
       $$css: true
     }, {
-      "--borderColor": props.outlineColor != null ? props.outlineColor : "initial"
+      "--borderColor": props.outlineColor != null ? props.outlineColor : undefined
     }];
   },
   circular: {
-    borderRadius: "musaex-z7qqyb",
+    borderRadius: "musaex-shxsqp",
     borderStartStartRadius: null,
     borderStartEndRadius: null,
     borderEndStartRadius: null,
@@ -101,7 +101,7 @@ var styles = {
     $$css: true
   },
   squared: {
-    borderRadius: "musaex-ok3b7d",
+    borderRadius: "musaex-10lp2fo",
     borderStartStartRadius: null,
     borderStartEndRadius: null,
     borderEndStartRadius: null,
@@ -113,18 +113,18 @@ var styles = {
     $$css: true
   },
   small: {
-    width: "musaex-6hukdw",
-    height: "musaex-q5eura",
+    width: "musaex-t4hhhd",
+    height: "musaex-pvxov6",
     $$css: true
   },
   medium: {
-    width: "musaex-zx3e9c",
-    height: "musaex-1dql3xx",
+    width: "musaex-1po6ib",
+    height: "musaex-1si1pn3",
     $$css: true
   },
   large: {
-    width: "musaex-1opwmbq",
-    height: "musaex-19ak84k",
+    width: "musaex-19dbm5w",
+    height: "musaex-12ez60q",
     $$css: true
   }
 };

package/dist/components/badge/badge.cjs

@@ -2,14 +2,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var React = require('react');
-var useClassNames = require('../../hooks/use-class-names.cjs');
-var className$1 = require('../../utils/class-name.cjs');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var useClassNames_component = require('../../hooks/use-class-names.component.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.9.3/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var theme = require('../theme/theme.cjs');
 var tokens_stylex = require('../theme/tokens.stylex.cjs');
 var hooks = require('../theme/hooks.cjs');
 var relax = require('@aiszlab/relax');
 var className = require('@aiszlab/relax/class-name');
+var context = require('./context.cjs');
 
 var styles = {
   badge: {
@@ -23,7 +23,7 @@ var styles = {
     "default": function _default(props) {
       return [{
         position: "musaex-10l6tqk",
-        borderRadius: "musaex-z7qqyb",
+        borderRadius: "musaex-shxsqp",
         borderStartStartRadius: null,
         borderStartEndRadius: null,
         borderEndStartRadius: null,
@@ -32,22 +32,22 @@ var styles = {
         borderTopRightRadius: null,
         borderBottomLeftRadius: null,
         borderBottomRightRadius: null,
-        minWidth: "musaex-wgl7p8",
+        minWidth: "musaex-17fkqza",
         textAlign: "musaex-2b8uid",
-        boxShadow: "musaex-igitpm",
-        backgroundColor: "musaex-q1mx2j",
-        color: "musaex-19dipnz",
+        boxShadow: "0 0 0 ".concat(tokens_stylex.sizes.smallest, " ").concat(props.color) == null ? null : "musaex-10ya7sz",
+        backgroundColor: props.backgroundColor == null ? null : "musaex-r5ldyu",
+        color: props.color == null ? null : "musaex-fx01vb",
         $$css: true
       }, {
-        "--boxShadow": "0 0 0 ".concat(tokens_stylex.sizes.smallest, " ").concat(props.color) != null ? "0 0 0 ".concat(tokens_stylex.sizes.smallest, " ").concat(props.color) : "initial",
-        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
-        "--color": props.color != null ? props.color : "initial"
+        "--boxShadow": "0 0 0 ".concat(tokens_stylex.sizes.smallest, " ").concat(props.color) != null ? "0 0 0 ".concat(tokens_stylex.sizes.smallest, " ").concat(props.color) : undefined,
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : undefined,
+        "--color": props.color != null ? props.color : undefined
       }];
     },
     dot: {
       minWidth: null,
-      width: "musaex-1ankuk0",
-      height: "musaex-drj9st",
+      width: "musaex-165vr4g",
+      height: "musaex-rywi9w",
       $$css: true
     },
     invisible: {
@@ -89,7 +89,7 @@ var styles = {
   }
 };
 var Badge = function Badge(_ref) {
-  var className$2 = _ref.className,
+  var className$1 = _ref.className,
     style = _ref.style,
     children = _ref.children,
     content = _ref.content,
@@ -97,7 +97,7 @@ var Badge = function Badge(_ref) {
     invisible = _ref$invisible === void 0 ? false : _ref$invisible,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? "top-right" : _ref$placement;
-  var classNames = useClassNames.useClassNames("badge");
+  var classNames = useClassNames_component.useClassNames(context.CLASS_NAMES);
   var theme$1 = hooks.useTheme();
   var isDot = relax.isVoid(content);
   var styled = {
@@ -108,10 +108,10 @@ var Badge = function Badge(_ref) {
     }), isDot && styles.tail.dot, theme.typography.label.small, invisible && styles.tail.invisible, styles.tail[placement])
   };
   return /*#__PURE__*/React.createElement("span", {
-    className: className.stringify(classNames[className$1.BadgeClassToken.Badge], className$2, styled.badge.className),
+    className: className.stringify(classNames.badge, className$1, styled.badge.className),
     style: _objectSpread(_objectSpread({}, styled.badge.style), style)
   }, children, /*#__PURE__*/React.createElement("span", {
-    className: className.stringify(classNames[className$1.BadgeClassToken.Tail], styled.tail.className),
+    className: className.stringify(classNames.tail, styled.tail.className),
     style: styled.tail.style
   }, content));
 };

package/dist/components/badge/badge.mjs

@@ -1,13 +1,13 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
-import { useClassNames } from '../../hooks/use-class-names.mjs';
-import { BadgeClassToken } from '../../utils/class-name.mjs';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useClassNames } from '../../hooks/use-class-names.component.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.9.3/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { typography } from '../theme/theme.mjs';
 import { sizes } from '../theme/tokens.stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
 import { isVoid } from '@aiszlab/relax';
 import { stringify } from '@aiszlab/relax/class-name';
+import { CLASS_NAMES } from './context.mjs';
 
 var styles = {
   badge: {
@@ -21,7 +21,7 @@ var styles = {
     "default": function _default(props) {
       return [{
         position: "musaex-10l6tqk",
-        borderRadius: "musaex-z7qqyb",
+        borderRadius: "musaex-shxsqp",
         borderStartStartRadius: null,
         borderStartEndRadius: null,
         borderEndStartRadius: null,
@@ -30,22 +30,22 @@ var styles = {
         borderTopRightRadius: null,
         borderBottomLeftRadius: null,
         borderBottomRightRadius: null,
-        minWidth: "musaex-wgl7p8",
+        minWidth: "musaex-17fkqza",
         textAlign: "musaex-2b8uid",
-        boxShadow: "musaex-igitpm",
-        backgroundColor: "musaex-q1mx2j",
-        color: "musaex-19dipnz",
+        boxShadow: "0 0 0 ".concat(sizes.smallest, " ").concat(props.color) == null ? null : "musaex-10ya7sz",
+        backgroundColor: props.backgroundColor == null ? null : "musaex-r5ldyu",
+        color: props.color == null ? null : "musaex-fx01vb",
         $$css: true
       }, {
-        "--boxShadow": "0 0 0 ".concat(sizes.smallest, " ").concat(props.color) != null ? "0 0 0 ".concat(sizes.smallest, " ").concat(props.color) : "initial",
-        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
-        "--color": props.color != null ? props.color : "initial"
+        "--boxShadow": "0 0 0 ".concat(sizes.smallest, " ").concat(props.color) != null ? "0 0 0 ".concat(sizes.smallest, " ").concat(props.color) : undefined,
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : undefined,
+        "--color": props.color != null ? props.color : undefined
       }];
     },
     dot: {
       minWidth: null,
-      width: "musaex-1ankuk0",
-      height: "musaex-drj9st",
+      width: "musaex-165vr4g",
+      height: "musaex-rywi9w",
       $$css: true
     },
     invisible: {
@@ -95,7 +95,7 @@ var Badge = function Badge(_ref) {
     invisible = _ref$invisible === void 0 ? false : _ref$invisible,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? "top-right" : _ref$placement;
-  var classNames = useClassNames("badge");
+  var classNames = useClassNames(CLASS_NAMES);
   var theme = useTheme();
   var isDot = isVoid(content);
   var styled = {
@@ -106,10 +106,10 @@ var Badge = function Badge(_ref) {
     }), isDot && styles.tail.dot, typography.label.small, invisible && styles.tail.invisible, styles.tail[placement])
   };
   return /*#__PURE__*/React.createElement("span", {
-    className: stringify(classNames[BadgeClassToken.Badge], className, styled.badge.className),
+    className: stringify(classNames.badge, className, styled.badge.className),
     style: _objectSpread(_objectSpread({}, styled.badge.style), style)
   }, children, /*#__PURE__*/React.createElement("span", {
-    className: stringify(classNames[BadgeClassToken.Tail], styled.tail.className),
+    className: stringify(classNames.tail, styled.tail.className),
     style: styled.tail.style
   }, content));
 };

package/dist/components/badge/context.cjs

@@ -0,0 +1,10 @@
+/**
+ * @description
+ * class names
+ */
+var CLASS_NAMES = {
+  badge: "badge",
+  tail: "badge__tail"
+};
+
+exports.CLASS_NAMES = CLASS_NAMES;

package/dist/components/badge/context.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @description
+ * class names
+ */
+export declare const CLASS_NAMES: {
+    badge: string;
+    tail: string;
+};

package/dist/components/badge/context.mjs

@@ -0,0 +1,10 @@
+/**
+ * @description
+ * class names
+ */
+var CLASS_NAMES = {
+  badge: "badge",
+  tail: "badge__tail"
+};
+
+export { CLASS_NAMES };

package/dist/components/bench/bench.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var React = require('react');
 var index = require('../layout/index.cjs');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.9.3/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var tokens_stylex = require('../theme/tokens.stylex.cjs');
 var divider = require('../divider/divider.cjs');
 var hooks$1 = require('./hooks.cjs');
@@ -22,28 +22,28 @@ var styles = {
     },
     sider: function sider(props) {
       return [{
-        borderRightWidth: "musaex-1xs0jsv",
+        borderRightWidth: "musaex-a640vs",
         borderInlineStartWidth: null,
         borderInlineEndWidth: null,
         borderRightStyle: "musaex-32b0ac",
         borderInlineStartStyle: null,
         borderInlineEndStyle: null,
-        borderRightColor: "musaex-104k1kx",
+        borderRightColor: props.outlineColor == null ? null : "musaex-pm6wt3",
         borderInlineStartColor: null,
         borderInlineEndColor: null,
-        paddingInline: "musaex-1dhq86w",
+        paddingInline: "musaex-81lxrv",
         paddingStart: null,
         paddingLeft: null,
         paddingEnd: null,
         paddingRight: null,
-        paddingBottom: "musaex-z1jy5j",
+        paddingBottom: "musaex-1us5tpc",
         position: "musaex-7wzq59",
-        height: "musaex-bmf846",
-        top: "musaex-98oeat",
+        height: "musaex-1sn4ngq",
+        top: "musaex-1pvtwdj",
         overflowY: "musaex-10wlt62 musaex-r8ctv5",
         $$css: true
       }, {
-        "--borderRightColor": props.outlineColor != null ? props.outlineColor : "initial"
+        "--borderRightColor": props.outlineColor != null ? props.outlineColor : undefined
       }];
     },
     main: {
@@ -53,25 +53,25 @@ var styles = {
   header: {
     "default": function _default(props) {
       return [{
-        gap: "musaex-4ttznp",
+        gap: "musaex-1ixihd9",
         rowGap: null,
         columnGap: null,
-        boxShadow: "musaex-igitpm",
+        boxShadow: tokens_stylex.elevations[props.elevation] == null ? null : "musaex-10ya7sz",
         $$css: true
       }, {
-        "--boxShadow": tokens_stylex.elevations[props.elevation] != null ? tokens_stylex.elevations[props.elevation] : "initial"
+        "--boxShadow": tokens_stylex.elevations[props.elevation] != null ? tokens_stylex.elevations[props.elevation] : undefined
       }];
     },
     navigation: {
-      marginLeft: "musaex-9x39mp",
+      marginLeft: "musaex-ceibj9",
+      marginRight: "musaex-ack27t",
       marginInlineStart: null,
       marginInlineEnd: null,
-      marginRight: "musaex-ack27t",
-      height: "musaex-1xj1dsn",
+      height: "musaex-qg7gut",
       $$css: true
     },
     divider: {
-      height: "musaex-q5eura",
+      height: "musaex-pvxov6",
       $$css: true
     }
   }

package/dist/components/bench/bench.mjs

@@ -1,7 +1,7 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
 import { Layout } from '../layout/index.mjs';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.9.3/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { elevations } from '../theme/tokens.stylex.mjs';
 import Divider from '../divider/divider.mjs';
 import { useLogo, useNavigations } from './hooks.mjs';
@@ -20,28 +20,28 @@ var styles = {
     },
     sider: function sider(props) {
       return [{
-        borderRightWidth: "musaex-1xs0jsv",
+        borderRightWidth: "musaex-a640vs",
         borderInlineStartWidth: null,
         borderInlineEndWidth: null,
         borderRightStyle: "musaex-32b0ac",
         borderInlineStartStyle: null,
         borderInlineEndStyle: null,
-        borderRightColor: "musaex-104k1kx",
+        borderRightColor: props.outlineColor == null ? null : "musaex-pm6wt3",
         borderInlineStartColor: null,
         borderInlineEndColor: null,
-        paddingInline: "musaex-1dhq86w",
+        paddingInline: "musaex-81lxrv",
         paddingStart: null,
         paddingLeft: null,
         paddingEnd: null,
         paddingRight: null,
-        paddingBottom: "musaex-z1jy5j",
+        paddingBottom: "musaex-1us5tpc",
         position: "musaex-7wzq59",
-        height: "musaex-bmf846",
-        top: "musaex-98oeat",
+        height: "musaex-1sn4ngq",
+        top: "musaex-1pvtwdj",
         overflowY: "musaex-10wlt62 musaex-r8ctv5",
         $$css: true
       }, {
-        "--borderRightColor": props.outlineColor != null ? props.outlineColor : "initial"
+        "--borderRightColor": props.outlineColor != null ? props.outlineColor : undefined
       }];
     },
     main: {
@@ -51,25 +51,25 @@ var styles = {
   header: {
     "default": function _default(props) {
       return [{
-        gap: "musaex-4ttznp",
+        gap: "musaex-1ixihd9",
         rowGap: null,
         columnGap: null,
-        boxShadow: "musaex-igitpm",
+        boxShadow: elevations[props.elevation] == null ? null : "musaex-10ya7sz",
         $$css: true
       }, {
-        "--boxShadow": elevations[props.elevation] != null ? elevations[props.elevation] : "initial"
+        "--boxShadow": elevations[props.elevation] != null ? elevations[props.elevation] : undefined
       }];
     },
     navigation: {
-      marginLeft: "musaex-9x39mp",
+      marginLeft: "musaex-ceibj9",
+      marginRight: "musaex-ack27t",
       marginInlineStart: null,
       marginInlineEnd: null,
-      marginRight: "musaex-ack27t",
-      height: "musaex-1xj1dsn",
+      height: "musaex-qg7gut",
       $$css: true
     },
     divider: {
-      height: "musaex-q5eura",
+      height: "musaex-pvxov6",
       $$css: true
     }
   }

package/dist/components/breadcrumb/breadcrumb.cjs

@@ -2,34 +2,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var React = require('react');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.9.3/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var theme = require('../theme/theme.cjs');
 var hooks = require('../theme/hooks.cjs');
-var useClassNames = require('../../hooks/use-class-names.cjs');
-var className$1 = require('../../utils/class-name.cjs');
+var useClassNames_component = require('../../hooks/use-class-names.component.cjs');
 var className = require('@aiszlab/relax/class-name');
 var item = require('./item.cjs');
+var context = require('./context.cjs');
 
 var styles = {
   breadcrumb: function breadcrumb(props) {
     return [{
-      color: "musaex-19dipnz",
+      color: props.color == null ? null : "musaex-fx01vb",
       $$css: true
     }, {
-      "--color": props.color != null ? props.color : "initial"
+      "--color": props.color != null ? props.color : undefined
     }];
   }
 };
 var Breadcrumb = function Breadcrumb(_ref) {
   var _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items,
-    className$2 = _ref.className,
+    className$1 = _ref.className,
     _ref$separator = _ref.separator,
     separator = _ref$separator === void 0 ? "/" : _ref$separator,
     style = _ref.style;
   var theme$1 = hooks.useTheme();
-  var classNames = useClassNames.useClassNames("breadcrumb");
-  /// there is no need to render the breadcrumb when there is no items
+  var classNames = useClassNames_component.useClassNames(context.CLASS_NAMES);
+  // there is no need to render the breadcrumb when there is no items
   if (items.length === 0) {
     return null;
   }
@@ -38,11 +38,15 @@ var Breadcrumb = function Breadcrumb(_ref) {
       color: theme$1.colors["on-surface-variant"]
     })),
     navigations: {
-      className: "musaex-p8vts musaex-j8pfrn musaex-3ct3a4 musaex-78zum5 musaex-1a02dak"
+      className: "musaex-q3gua8 musaex-1n775ky musaex-3ct3a4 musaex-78zum5 musaex-1a02dak"
     }
   };
-  return /*#__PURE__*/React.createElement("nav", {
-    className: className.stringify(classNames[className$1.BreadcrumbClassToken.Breadcrumb], className$2, styled.breadcrumb.className),
+  return /*#__PURE__*/React.createElement(context.Context.Provider, {
+    value: {
+      classNames: classNames
+    }
+  }, /*#__PURE__*/React.createElement("nav", {
+    className: className.stringify(classNames.breadcrumb, className$1, styled.breadcrumb.className),
     style: _objectSpread(_objectSpread({}, styled.breadcrumb.style), style)
   }, /*#__PURE__*/React.createElement("ol", _objectSpread({}, styled.navigations), items.map(function (item$1, index) {
     return /*#__PURE__*/React.createElement(item.default, {
@@ -52,7 +56,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
       href: item$1.href,
       separator: separator
     });
-  })));
+  }))));
 };
 
 exports.default = Breadcrumb;