musae 1.3.1-beta.3 → 1.3.1-beta.4

package/dist/components/avatar/avatar.cjs

@@ -45,9 +45,9 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     referrerPolicy: referrerPolicy
   });
   var styled = {
-    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])
+    avatar: stylex.props(theme.$label[size], styles.default.avatar.base, styles.default.avatar[size], styles.default.avatar[shape], isInGroup && styles.default.avatar.overlapping),
+    loading: stylex.props(theme.$label[size], styles.default.loading.base, styles.default.avatar[size], styles.default.avatar[shape], isInGroup && styles.default.avatar.overlapping),
+    image: stylex.props(styles.default.image.base, styles.default.avatar[size])
   };
   if (loadStatus === "loading") {
     return /*#__PURE__*/React.createElement(skeleton.default, {

package/dist/components/avatar/avatar.mjs

@@ -41,9 +41,9 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     referrerPolicy: referrerPolicy
   });
   var styled = {
-    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])
+    avatar: props($label[size], styles.avatar.base, styles.avatar[size], styles.avatar[shape], isInGroup && styles.avatar.overlapping),
+    loading: props($label[size], styles.loading.base, styles.avatar[size], styles.avatar[shape], isInGroup && styles.avatar.overlapping),
+    image: props(styles.image.base, styles.avatar[size])
   };
   if (loadStatus === "loading") {
     return /*#__PURE__*/React.createElement(Skeleton, {

package/dist/components/avatar/group.cjs

@@ -21,7 +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 = stylex.props(styles.default.group["default"]);
+  var styled = stylex.props(styles.default.group.base);
   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

@@ -17,7 +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 = props(styles.group["default"]);
+  var styled = props(styles.group.base);
   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, {

package/dist/components/avatar/styles.cjs

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var group = {
-  "default": {
+  base: {
     k1xSpc: "musaex-3nfvp2",
     kfSwDN: "musaex-87ps6o",
     $$css: true
   }
 };
 var avatar = {
-  "default": {
+  base: {
     kMzoRj: "musaex-1iyq3db",
     ksu8eU: "musaex-1y0btm7",
     kVAM5u: "musaex-9r1u3d",
@@ -55,14 +55,14 @@ var avatar = {
   }
 };
 var loading = {
-  "default": {
+  base: {
     k1xSpc: "musaex-1rg5ohu",
     kXLuUW: "musaex-xymvpz",
     $$css: true
   }
 };
 var image = {
-  "default": {
+  base: {
     kVIFPx: "musaex-l1xv1r",
     kYDvB4: "musaex-1s8dy9j",
     kaIpWk: "musaex-1pjcqnp",

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

@@ -1,12 +1,12 @@
 declare const styles: {
     group: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "inline-flex">;
             readonly userSelect: import("@stylexjs/stylex").StyleXClassNameFor<"userSelect", "none">;
         }>;
     }>;
     avatar: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly borderWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderWidth", string>;
             readonly borderStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderStyle", "solid">;
             readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "transparent">;
@@ -46,13 +46,13 @@ declare const styles: {
         }>;
     }>;
     loading: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "inline-block">;
             readonly verticalAlign: import("@stylexjs/stylex").StyleXClassNameFor<"verticalAlign", "middle">;
         }>;
     }>;
     image: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly objectFit: import("@stylexjs/stylex").StyleXClassNameFor<"objectFit", "cover">;
             readonly objectPosition: import("@stylexjs/stylex").StyleXClassNameFor<"objectPosition", "center center">;
             readonly borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", "inherit">;

package/dist/components/avatar/styles.mjs

@@ -1,12 +1,12 @@
 var group = {
-  "default": {
+  base: {
     k1xSpc: "musaex-3nfvp2",
     kfSwDN: "musaex-87ps6o",
     $$css: true
   }
 };
 var avatar = {
-  "default": {
+  base: {
     kMzoRj: "musaex-1iyq3db",
     ksu8eU: "musaex-1y0btm7",
     kVAM5u: "musaex-9r1u3d",
@@ -51,14 +51,14 @@ var avatar = {
   }
 };
 var loading = {
-  "default": {
+  base: {
     k1xSpc: "musaex-1rg5ohu",
     kXLuUW: "musaex-xymvpz",
     $$css: true
   }
 };
 var image = {
-  "default": {
+  base: {
     kVIFPx: "musaex-l1xv1r",
     kYDvB4: "musaex-1s8dy9j",
     kaIpWk: "musaex-1pjcqnp",

package/dist/components/badge/badge.cjs

@@ -26,8 +26,8 @@ var Badge = function Badge(_ref) {
   var theme$1 = hooks.useTheme();
   var isDot = relax.isVoid(content);
   var styled = {
-    badge: stylex.props(styles.default.badge["default"]),
-    tail: stylex.props(styles.default.tail["default"], isDot && styles.default.tail.dot, theme.$label.small, invisible && styles.default.tail.invisible, styles.default.tail[placement])
+    badge: stylex.props(styles.default.badge.base),
+    tail: stylex.props(styles.default.tail.base, isDot && styles.default.tail.dot, theme.$label.small, invisible && styles.default.tail.invisible, styles.default.tail[placement])
   };
   return /*#__PURE__*/React.createElement("span", {
     className: className.stringify(classNames.badge, className$1, styled.badge.className),

package/dist/components/badge/badge.mjs

@@ -22,8 +22,8 @@ var Badge = function Badge(_ref) {
   var theme = useTheme();
   var isDot = isVoid(content);
   var styled = {
-    badge: props(styles.badge["default"]),
-    tail: props(styles.tail["default"], isDot && styles.tail.dot, $label.small, invisible && styles.tail.invisible, styles.tail[placement])
+    badge: props(styles.badge.base),
+    tail: props(styles.tail.base, isDot && styles.tail.dot, $label.small, invisible && styles.tail.invisible, styles.tail[placement])
   };
   return /*#__PURE__*/React.createElement("span", {
     className: stringify(classNames.badge, className, styled.badge.className),

package/dist/components/badge/styles.cjs

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var badge = {
-  "default": {
+  base: {
     kVAEAm: "musaex-1n2onr6",
     k1xSpc: "musaex-3nfvp2",
     $$css: true
   }
 };
 var tail = {
-  "default": {
+  base: {
     kVAEAm: "musaex-10l6tqk",
     kaIpWk: "musaex-shxsqp",
     k7Eaqz: "musaex-d9398k",

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

@@ -1,12 +1,12 @@
 declare const styles: {
     badge: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "relative">;
             readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "inline-flex">;
         }>;
     }>;
     tail: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "absolute">;
             readonly borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
             readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", string>;

package/dist/components/badge/styles.mjs

@@ -1,12 +1,12 @@
 var badge = {
-  "default": {
+  base: {
     kVAEAm: "musaex-1n2onr6",
     k1xSpc: "musaex-3nfvp2",
     $$css: true
   }
 };
 var tail = {
-  "default": {
+  base: {
     kVAEAm: "musaex-10l6tqk",
     kaIpWk: "musaex-shxsqp",
     k7Eaqz: "musaex-d9398k",

package/dist/components/bench/bench.cjs

@@ -64,15 +64,15 @@ var Bench = function Bench(_ref) {
     sidebarMenuItems = _useMenuItems.sidebar,
     hasSidebar = _useMenuItems.hasSidebar;
   var styled = {
-    bench: stylex.props(styles.default.bench["default"], isCollapsed && styles.default.bench.collapsed),
-    heading: stylex.props(theme.$title.large, styles.default.heading["default"], isCollapsed && styles.default.heading.collapsed),
-    header: stylex.props(styles.default.header["default"]),
-    sidebar: stylex.props(styles.default.sidebar["default"], isCollapsed && styles.default.sidebar.collapsed),
-    menu: stylex.props(styles.default.menu["default"], isCollapsed && styles.default.menu.collapsed),
-    trailing: stylex.props(styles.default.trailing["default"]),
-    main: stylex.props(styles.default.main["default"]),
-    collapser: stylex.props(styles.default.collapser["default"]),
-    expander: stylex.props(styles.default.expander["default"]),
+    bench: stylex.props(styles.default.bench.base, isCollapsed && styles.default.bench.collapsed),
+    heading: stylex.props(theme.$title.large, styles.default.heading.base, isCollapsed && styles.default.heading.collapsed),
+    header: stylex.props(styles.default.header.base),
+    sidebar: stylex.props(styles.default.sidebar.base, isCollapsed && styles.default.sidebar.collapsed),
+    menu: stylex.props(styles.default.menu.base, isCollapsed && styles.default.menu.collapsed),
+    trailing: stylex.props(styles.default.trailing.base),
+    main: stylex.props(styles.default.main.base),
+    collapser: stylex.props(styles.default.collapser.base),
+    expander: stylex.props(styles.default.expander.base),
     title: stylex.props(theme.$title.large)
   };
   return /*#__PURE__*/React.createElement(index.Layout, {

package/dist/components/bench/bench.mjs

@@ -60,15 +60,15 @@ var Bench = function Bench(_ref) {
     sidebarMenuItems = _useMenuItems.sidebar,
     hasSidebar = _useMenuItems.hasSidebar;
   var styled = {
-    bench: props(styles.bench["default"], isCollapsed && styles.bench.collapsed),
-    heading: props($title.large, styles.heading["default"], isCollapsed && styles.heading.collapsed),
-    header: props(styles.header["default"]),
-    sidebar: props(styles.sidebar["default"], isCollapsed && styles.sidebar.collapsed),
-    menu: props(styles.menu["default"], isCollapsed && styles.menu.collapsed),
-    trailing: props(styles.trailing["default"]),
-    main: props(styles.main["default"]),
-    collapser: props(styles.collapser["default"]),
-    expander: props(styles.expander["default"]),
+    bench: props(styles.bench.base, isCollapsed && styles.bench.collapsed),
+    heading: props($title.large, styles.heading.base, isCollapsed && styles.heading.collapsed),
+    header: props(styles.header.base),
+    sidebar: props(styles.sidebar.base, isCollapsed && styles.sidebar.collapsed),
+    menu: props(styles.menu.base, isCollapsed && styles.menu.collapsed),
+    trailing: props(styles.trailing.base),
+    main: props(styles.main.base),
+    collapser: props(styles.collapser.base),
+    expander: props(styles.expander.base),
     title: props($title.large)
   };
   return /*#__PURE__*/React.createElement(Layout, {

package/dist/components/bench/styles.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var bench = {
-  "default": {
+  base: {
     kzqmXN: "musaex-n9wirt",
     kZKoxP: "musaex-1dr59a3",
     k1xSpc: "musaex-rvj5dj",
@@ -19,7 +19,7 @@ var bench = {
   }
 };
 var heading = {
-  "default": {
+  base: {
     $$css: true
   },
   collapsed: {
@@ -29,18 +29,18 @@ var heading = {
   }
 };
 var collapser = {
-  "default": {
+  base: {
     keTefX: "musaex-vc5jky",
     $$css: true
   }
 };
 var header = {
-  "default": {
+  base: {
     $$css: true
   }
 };
 var trailing = {
-  "default": {
+  base: {
     k1xSpc: "musaex-78zum5",
     kOIVth: "musaex-1wm2zkp",
     keTefX: "musaex-3qhtz4",
@@ -48,7 +48,7 @@ var trailing = {
   }
 };
 var sidebar = {
-  "default": {
+  base: {
     $$css: true
   },
   collapsed: {
@@ -62,7 +62,7 @@ var sidebar = {
   }
 };
 var menu = {
-  "default": {
+  base: {
     kVQacm: "musaex-b3r6kr",
     $$css: true
   },
@@ -72,7 +72,7 @@ var menu = {
   }
 };
 var expander = {
-  "default": {
+  base: {
     kJuA4N: "musaex-1pultth",
     kzqmXN: "musaex-92755x",
     k1xSpc: "musaex-78zum5",
@@ -87,7 +87,7 @@ var expander = {
   }
 };
 var main = {
-  "default": {
+  base: {
     $$css: true
   }
 };

package/dist/components/bench/styles.d.ts

@@ -1,6 +1,6 @@
 declare const styles: {
     bench: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", "100vw">;
             readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", "100vh">;
             readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "grid">;
@@ -14,29 +14,29 @@ declare const styles: {
         }>;
     }>;
     heading: Readonly<{
-        readonly default: Readonly<{}>;
+        readonly base: Readonly<{}>;
         readonly collapsed: Readonly<{
             readonly justifyContent: import("@stylexjs/stylex").StyleXClassNameFor<"justifyContent", "center">;
             readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
         }>;
     }>;
     collapser: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly marginInlineStart: import("@stylexjs/stylex").StyleXClassNameFor<"marginInlineStart", "auto">;
         }>;
     }>;
     header: Readonly<{
-        readonly default: Readonly<{}>;
+        readonly base: Readonly<{}>;
     }>;
     trailing: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
             readonly gap: import("@stylexjs/stylex").StyleXClassNameFor<"gap", string>;
             readonly marginInlineStart: import("@stylexjs/stylex").StyleXClassNameFor<"marginInlineStart", string>;
         }>;
     }>;
     sidebar: Readonly<{
-        readonly default: Readonly<{}>;
+        readonly base: Readonly<{}>;
         readonly collapsed: Readonly<{
             readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
             readonly paddingBlockEnd: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlockEnd", string>;
@@ -47,7 +47,7 @@ declare const styles: {
         }>;
     }>;
     menu: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "hidden">;
         }>;
         readonly collapsed: Readonly<{
@@ -55,7 +55,7 @@ declare const styles: {
         }>;
     }>;
     expander: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly gridArea: import("@stylexjs/stylex").StyleXClassNameFor<"gridArea", "expander">;
             readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
             readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
@@ -69,7 +69,7 @@ declare const styles: {
         }>;
     }>;
     main: Readonly<{
-        readonly default: Readonly<{}>;
+        readonly base: Readonly<{}>;
     }>;
 };
 export default styles;

package/dist/components/bench/styles.mjs

@@ -1,5 +1,5 @@
 var bench = {
-  "default": {
+  base: {
     kzqmXN: "musaex-n9wirt",
     kZKoxP: "musaex-1dr59a3",
     k1xSpc: "musaex-rvj5dj",
@@ -15,7 +15,7 @@ var bench = {
   }
 };
 var heading = {
-  "default": {
+  base: {
     $$css: true
   },
   collapsed: {
@@ -25,18 +25,18 @@ var heading = {
   }
 };
 var collapser = {
-  "default": {
+  base: {
     keTefX: "musaex-vc5jky",
     $$css: true
   }
 };
 var header = {
-  "default": {
+  base: {
     $$css: true
   }
 };
 var trailing = {
-  "default": {
+  base: {
     k1xSpc: "musaex-78zum5",
     kOIVth: "musaex-1wm2zkp",
     keTefX: "musaex-3qhtz4",
@@ -44,7 +44,7 @@ var trailing = {
   }
 };
 var sidebar = {
-  "default": {
+  base: {
     $$css: true
   },
   collapsed: {
@@ -58,7 +58,7 @@ var sidebar = {
   }
 };
 var menu = {
-  "default": {
+  base: {
     kVQacm: "musaex-b3r6kr",
     $$css: true
   },
@@ -68,7 +68,7 @@ var menu = {
   }
 };
 var expander = {
-  "default": {
+  base: {
     kJuA4N: "musaex-1pultth",
     kzqmXN: "musaex-92755x",
     k1xSpc: "musaex-78zum5",
@@ -83,7 +83,7 @@ var expander = {
   }
 };
 var main = {
-  "default": {
+  base: {
     $$css: true
   }
 };

package/dist/components/breadcrumb/breadcrumb.cjs

@@ -27,7 +27,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
     return null;
   }
   var styled = {
-    breadcrumb: stylex.props(theme.$label.large, styles.default.breadcrumb["default"]),
+    breadcrumb: stylex.props(theme.$label.large, styles.default.breadcrumb.base),
     navigations: stylex.props(styles.default.breadcrumb.navigations)
   };
   return /*#__PURE__*/React.createElement(context.Context.Provider, {

package/dist/components/breadcrumb/breadcrumb.mjs

@@ -23,7 +23,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
     return null;
   }
   var styled = {
-    breadcrumb: props($label.large, styles.breadcrumb["default"]),
+    breadcrumb: props($label.large, styles.breadcrumb.base),
     navigations: props(styles.breadcrumb.navigations)
   };
   return /*#__PURE__*/React.createElement(Context.Provider, {

package/dist/components/breadcrumb/item.cjs

@@ -20,9 +20,9 @@ var Item = function Item(_ref) {
   var _useContext = React.useContext(context.Context),
     classNames = _useContext.classNames;
   var styled = {
-    navigation: stylex.props(styles.default.navigation["default"], isLink && styles.default.navigation.link),
-    separator: stylex.props(styles.default.separator["default"]),
-    anchor: stylex.props(styles.default.anchor["default"])
+    navigation: stylex.props(styles.default.navigation.base, isLink && styles.default.navigation.link),
+    separator: stylex.props(styles.default.separator.base),
+    anchor: stylex.props(styles.default.anchor.base)
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
     className: className.stringify(classNames.item, styled.navigation.className),

package/dist/components/breadcrumb/item.mjs

@@ -16,9 +16,9 @@ var Item = function Item(_ref) {
   var _useContext = useContext(Context),
     classNames = _useContext.classNames;
   var styled = {
-    navigation: props(styles.navigation["default"], isLink && styles.navigation.link),
-    separator: props(styles.separator["default"]),
-    anchor: props(styles.anchor["default"])
+    navigation: props(styles.navigation.base, isLink && styles.navigation.link),
+    separator: props(styles.separator.base),
+    anchor: props(styles.anchor.base)
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
     className: stringify(classNames.item, styled.navigation.className),

package/dist/components/breadcrumb/styles.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var navigation = {
-  "default": {
+  base: {
     kDBZe2: "musaex-tem6mo",
     $$css: true
   },
@@ -18,20 +18,20 @@ var navigation = {
   }
 };
 var anchor = {
-  "default": {
+  base: {
     kybGjl: "musaex-1hl2dhg",
     kMwMTN: "musaex-1heor9g",
     $$css: true
   }
 };
 var separator = {
-  "default": {
+  base: {
     kUOVxO: "musaex-1erkn4t",
     $$css: true
   }
 };
 var breadcrumb = {
-  "default": {
+  base: {
     kMwMTN: "musaex-bq1wot",
     $$css: true
   },

package/dist/components/breadcrumb/styles.d.ts

@@ -1,6 +1,6 @@
 declare const styles: {
     navigation: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly ":last-of-type": import("@stylexjs/stylex").StyleXClassNameFor<":last-of-type", {
                 readonly color: "var(--color-on-surface)";
             }>;
@@ -19,18 +19,18 @@ declare const styles: {
         }>;
     }>;
     anchor: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly textDecoration: import("@stylexjs/stylex").StyleXClassNameFor<"textDecoration", "none">;
             readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "inherit">;
         }>;
     }>;
     separator: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly marginInline: import("@stylexjs/stylex").StyleXClassNameFor<"marginInline", string>;
         }>;
     }>;
     breadcrumb: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-surface-variant)">;
         }>;
         readonly navigations: Readonly<{

package/dist/components/breadcrumb/styles.mjs

@@ -1,5 +1,5 @@
 var navigation = {
-  "default": {
+  base: {
     kDBZe2: "musaex-tem6mo",
     $$css: true
   },
@@ -14,20 +14,20 @@ var navigation = {
   }
 };
 var anchor = {
-  "default": {
+  base: {
     kybGjl: "musaex-1hl2dhg",
     kMwMTN: "musaex-1heor9g",
     $$css: true
   }
 };
 var separator = {
-  "default": {
+  base: {
     kUOVxO: "musaex-1erkn4t",
     $$css: true
   }
 };
 var breadcrumb = {
-  "default": {
+  base: {
     kMwMTN: "musaex-bq1wot",
     $$css: true
   },

package/dist/components/button/button.cjs

@@ -63,7 +63,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
   var themeColorVars = useThemeColorVars.useThemeColorVars([["on-surface", tokens_stylex.OPACITY.medium], ["on-surface", tokens_stylex.OPACITY.thickest]]);
   var styled = {
-    button: stylex.props(styles.default.button["default"], ripple$1 && styles.default.button.rippleable, styles.default.size[size], styles.default.variant[variant], isDisabled && [styles.default.disabled["default"], styles.default.disabled[variant]],
+    button: stylex.props(styles.default.button.base, ripple$1 && styles.default.button.rippleable, styles.default.size[size], styles.default.variant[variant], isDisabled && [styles.default.disabled.base, styles.default.disabled[variant]],
     // shape styles
     styles.default.shape[shape].medium, styles.default.shape[shape][size],
     // typography

package/dist/components/button/button.mjs

@@ -59,7 +59,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var classNames = useClassNames(CLASS_NAMES);
   var themeColorVars = useThemeColorVars([["on-surface", OPACITY.medium], ["on-surface", OPACITY.thickest]]);
   var styled = {
-    button: props(styles.button["default"], ripple && styles.button.rippleable, styles.size[size], styles.variant[variant], isDisabled && [styles.disabled["default"], styles.disabled[variant]],
+    button: props(styles.button.base, ripple && styles.button.rippleable, styles.size[size], styles.variant[variant], isDisabled && [styles.disabled.base, styles.disabled[variant]],
     // shape styles
     styles.shape[shape].medium, styles.shape[shape][size],
     // typography