musae 0.2.19 → 0.2.21

package/dist/components/avatar/avatar.js

@@ -7,16 +7,15 @@ import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { AvatarClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
-import { useImageLoader } from '@aiszlab/relax';
+import { useImageLoader, clsx } from '@aiszlab/relax';
 import { ComponentToken } from '../../utils/component-token.js';
 
 var _excluded = ["src", "alt", "shape", "size"];
 var styles = {
   avatar: function avatar(props) {
     return [{
-      borderWidth: "musae-1i8jmgv",
+      borderWidth: "musaex-bupo1m",
       borderInlineWidth: null,
       borderInlineStartWidth: null,
       borderLeftWidth: null,
@@ -25,7 +24,7 @@ var styles = {
       borderBlockWidth: null,
       borderTopWidth: null,
       borderBottomWidth: null,
-      borderStyle: "musae-1y0btm7",
+      borderStyle: "musaex-1y0btm7",
       borderInlineStyle: null,
       borderInlineStartStyle: null,
       borderLeftStyle: null,
@@ -34,7 +33,7 @@ var styles = {
       borderBlockStyle: null,
       borderTopStyle: null,
       borderBottomStyle: null,
-      borderColor: "musae-9r1u3d",
+      borderColor: "musaex-9r1u3d",
       borderInlineColor: null,
       borderInlineStartColor: null,
       borderLeftColor: null,
@@ -43,13 +42,13 @@ var styles = {
       borderBlockColor: null,
       borderTopColor: null,
       borderBottomColor: null,
-      boxSizing: "musae-9f619",
-      display: "musae-3nfvp2",
-      backgroundColor: "musae-q1mx2j",
-      color: "musae-19dipnz",
-      alignItems: "musae-6s0dn4",
-      justifyContent: "musae-l56j7k",
-      userSelect: "musae-87ps6o",
+      boxSizing: "musaex-9f619",
+      display: "musaex-3nfvp2",
+      backgroundColor: "musaex-q1mx2j",
+      color: "musaex-19dipnz",
+      alignItems: "musaex-6s0dn4",
+      justifyContent: "musaex-l56j7k",
+      userSelect: "musaex-87ps6o",
       $$css: true
     }, {
       "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
@@ -57,10 +56,9 @@ var styles = {
     }];
   },
   image: {
-    width: "musae-wfgd1y",
-    height: "musae-b27hse",
-    objectFit: "musae-l1xv1r",
-    borderRadius: "musae-1pjcqnp",
+    objectFit: "musaex-l1xv1r",
+    objectPosition: "musaex-1s8dy9j",
+    borderRadius: "musaex-1pjcqnp",
     borderStartStartRadius: null,
     borderStartEndRadius: null,
     borderEndStartRadius: null,
@@ -73,10 +71,10 @@ var styles = {
   },
   overlapping: function overlapping(props) {
     return [{
-      ":not(:first-child)_marginInlineStart": "musae-1i5rff9",
+      ":not(:first-child)_marginInlineStart": "musaex-3d5u6r",
       ":not(:first-child)_marginLeft": null,
       ":not(:first-child)_marginRight": null,
-      borderColor: "musae-eqt46j",
+      borderColor: "musaex-eqt46j",
       borderInlineColor: null,
       borderInlineStartColor: null,
       borderLeftColor: null,
@@ -91,7 +89,7 @@ var styles = {
     }];
   },
   circular: {
-    borderRadius: "musae-iipnba",
+    borderRadius: "musaex-z7qqyb",
     borderStartStartRadius: null,
     borderStartEndRadius: null,
     borderEndStartRadius: null,
@@ -103,7 +101,7 @@ var styles = {
     $$css: true
   },
   squared: {
-    borderRadius: "musae-7bdoj",
+    borderRadius: "musaex-ok3b7d",
     borderStartStartRadius: null,
     borderStartEndRadius: null,
     borderEndStartRadius: null,
@@ -115,18 +113,18 @@ var styles = {
     $$css: true
   },
   small: {
-    width: "musae-145rzd9",
-    height: "musae-lry4nc",
+    width: "musaex-6hukdw",
+    height: "musaex-q5eura",
     $$css: true
   },
   medium: {
-    width: "musae-15xiyow",
-    height: "musae-hfcj97",
+    width: "musaex-zx3e9c",
+    height: "musaex-1dql3xx",
     $$css: true
   },
   large: {
-    width: "musae-1sgo4cp",
-    height: "musae-7kkngq",
+    width: "musaex-1opwmbq",
+    height: "musaex-19ak84k",
     $$css: true
   }
 };
@@ -159,9 +157,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }), styles[size], styles[shape], isInGroup && styles.overlapping({
       outlineColor: theme.colors[ColorToken.OnPrimary]
     })),
-    image: {
-      className: "musae-wfgd1y musae-b27hse musae-l1xv1r musae-1pjcqnp"
-    }
+    image: props(styles.image, styles[size])
   };
   return /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({}, props$1), {}, {
     className: clsx(classNames[AvatarClassToken.Avatar], styled.avatar.className),

package/dist/components/avatar/group.js

@@ -5,8 +5,8 @@ import { useClassNames } from '../../hooks/use-class-names.js';
 import { AvatarClassToken } from '../../utils/class-name.js';
 import Popover from '../popover/popover.js';
 import Avatar from './avatar.js';
-import clsx from 'clsx';
 import { ComponentToken } from '../../utils/component-token.js';
+import { clsx } from '@aiszlab/relax';
 
 var _Group = function Group(_ref) {
   var _children = _ref.children,
@@ -18,7 +18,7 @@ var _Group = function Group(_ref) {
     max = _ref$max === void 0 ? 3 : _ref$max;
   var classNames = useClassNames(ComponentToken.Avatar);
   var styled = {
-    className: "musae-3nfvp2 musae-87ps6o"
+    className: "musaex-3nfvp2 musaex-87ps6o"
   };
   var children = useMemo(function () {
     var _Children$toArray$red = Children.toArray(_children).reduce(function (prev, child, index) {

package/dist/components/badge/badge.js

@@ -3,27 +3,26 @@ import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { BadgeClassToken } from '../../utils/class-name.js';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
 import { sizes } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
-import { isVoid } from '@aiszlab/relax';
+import { isVoid, clsx } from '@aiszlab/relax';
 import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {
   badge: {
     "default": {
-      position: "musae-1n2onr6",
-      display: "musae-3nfvp2",
+      position: "musaex-1n2onr6",
+      display: "musaex-3nfvp2",
       $$css: true
     }
   },
   tail: {
     "default": function _default(props) {
       return [{
-        position: "musae-10l6tqk",
-        borderRadius: "musae-iipnba",
+        position: "musaex-10l6tqk",
+        borderRadius: "musaex-z7qqyb",
         borderStartStartRadius: null,
         borderStartEndRadius: null,
         borderEndStartRadius: null,
@@ -32,11 +31,11 @@ var styles = {
         borderTopRightRadius: null,
         borderBottomLeftRadius: null,
         borderBottomRightRadius: null,
-        minWidth: "musae-70jws7",
-        textAlign: "musae-2b8uid",
-        boxShadow: "musae-igitpm",
-        backgroundColor: "musae-q1mx2j",
-        color: "musae-19dipnz",
+        minWidth: "musaex-wgl7p8",
+        textAlign: "musaex-2b8uid",
+        boxShadow: "musaex-igitpm",
+        backgroundColor: "musaex-q1mx2j",
+        color: "musaex-19dipnz",
         $$css: true
       }, {
         "--boxShadow": "0 0 0 ".concat(sizes.smallest, " ").concat(props.color) != null ? "0 0 0 ".concat(sizes.smallest, " ").concat(props.color) : "initial",
@@ -46,44 +45,44 @@ var styles = {
     },
     dot: {
       minWidth: null,
-      width: "musae-2jq81",
-      height: "musae-1v3ox18",
+      width: "musaex-1ankuk0",
+      height: "musaex-drj9st",
       $$css: true
     },
     invisible: {
-      display: "musae-1s85apg",
+      display: "musaex-1s85apg",
       $$css: true
     },
     "top-right": {
-      top: "musae-13vifvy",
-      right: "musae-3m8u43",
+      top: "musaex-13vifvy",
+      right: "musaex-3m8u43",
       insetInlineStart: null,
       insetInlineEnd: null,
-      transform: "musae-rycbv3",
+      transform: "musaex-rycbv3",
       $$css: true
     },
     "top-left": {
-      top: "musae-13vifvy",
-      left: "musae-u96u03",
+      top: "musaex-13vifvy",
+      left: "musaex-u96u03",
       insetInlineStart: null,
       insetInlineEnd: null,
-      transform: "musae-1i3z1r0",
+      transform: "musaex-1i3z1r0",
       $$css: true
     },
     "bottom-right": {
-      bottom: "musae-1ey2m1c",
-      right: "musae-3m8u43",
+      bottom: "musaex-1ey2m1c",
+      right: "musaex-3m8u43",
       insetInlineStart: null,
       insetInlineEnd: null,
-      transform: "musae-1vfo23u",
+      transform: "musaex-1vfo23u",
       $$css: true
     },
     "bottom-left": {
-      bottom: "musae-1ey2m1c",
-      left: "musae-u96u03",
+      bottom: "musaex-1ey2m1c",
+      left: "musaex-u96u03",
       insetInlineStart: null,
       insetInlineEnd: null,
-      transform: "musae-itovws",
+      transform: "musaex-itovws",
       $$css: true
     }
   }

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { BenchProps } from "./types";
-declare const Bench: ({ children, title, logo, navigations, className, style, trailing, onNavigate, location, defaultExpandedKeys, classNames: { main: mainClassName }, }: BenchProps) => React.JSX.Element;
+declare const Bench: ({ children, title, logo, navigations, className, style, trailing, onNavigate, location, defaultExpandedKeys, classNames: { main: mainClassName }, elevation, }: BenchProps) => React.JSX.Element;
 export default Bench;

package/dist/components/bench/bench.js

@@ -2,13 +2,14 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
 import { Layout } from '../layout/index.js';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { elevations } from '../theme/tokens.stylex.js';
 import Divider from '../divider/divider.js';
 import { useLogo, useNavigations } from './hooks.js';
 import Menu from '../menu/menu.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { typography } from '../theme/theme.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 
 var Header = Layout.Header,
   Main = Layout.Main,
@@ -20,24 +21,25 @@ var styles = {
     },
     sider: function sider(props) {
       return [{
-        borderRightWidth: "musae-1xkobc8",
+        borderRightWidth: "musaex-1xs0jsv",
         borderInlineStartWidth: null,
         borderInlineEndWidth: null,
-        borderRightStyle: "musae-32b0ac",
+        borderRightStyle: "musaex-32b0ac",
         borderInlineStartStyle: null,
         borderInlineEndStyle: null,
-        borderRightColor: "musae-104k1kx",
+        borderRightColor: "musaex-104k1kx",
         borderInlineStartColor: null,
         borderInlineEndColor: null,
-        paddingInline: "musae-gj1dgu",
+        paddingInline: "musaex-1dhq86w",
         paddingStart: null,
         paddingLeft: null,
         paddingEnd: null,
         paddingRight: null,
-        position: "musae-7wzq59",
-        height: "musae-1r05exa",
-        top: "musae-kwake1",
-        overflowY: "musae-10wlt62 musae-r8ctv5",
+        paddingBottom: "musaex-igxgg9",
+        position: "musaex-7wzq59",
+        height: "musaex-bmf846",
+        top: "musaex-98oeat",
+        overflowY: "musaex-10wlt62 musaex-r8ctv5",
         $$css: true
       }, {
         "--borderRightColor": props.outlineColor != null ? props.outlineColor : "initial"
@@ -48,23 +50,27 @@ var styles = {
     }
   },
   header: {
-    "default": {
-      gap: "musae-vbka3v",
-      rowGap: null,
-      columnGap: null,
-      boxShadow: "musae-ezd0au",
-      $$css: true
+    "default": function _default(props) {
+      return [{
+        gap: "musaex-1lsrmdg",
+        rowGap: null,
+        columnGap: null,
+        boxShadow: "musaex-igitpm",
+        $$css: true
+      }, {
+        "--boxShadow": elevations[props.elevation] != null ? elevations[props.elevation] : "initial"
+      }];
     },
     navigation: {
-      marginLeft: "musae-19i9eir",
+      marginLeft: "musaex-9x39mp",
       marginInlineStart: null,
       marginInlineEnd: null,
-      marginRight: "musae-ack27t",
-      height: "musae-b27hse",
+      marginRight: "musaex-ack27t",
+      height: "musaex-1xj1dsn",
       $$css: true
     },
     divider: {
-      height: "musae-lry4nc",
+      height: "musaex-q5eura",
       $$css: true
     }
   }
@@ -83,7 +89,9 @@ var Bench = function Bench(_ref) {
     defaultExpandedKeys = _ref.defaultExpandedKeys,
     _ref$classNames = _ref.classNames,
     _ref$classNames2 = _ref$classNames === void 0 ? {} : _ref$classNames,
-    mainClassName = _ref$classNames2.main;
+    mainClassName = _ref$classNames2.main,
+    _ref$elevation = _ref.elevation,
+    elevation = _ref$elevation === void 0 ? "xsmall" : _ref$elevation;
   var theme = useTheme();
   var _logo = useLogo(logo);
   var _useNavigations = useNavigations({
@@ -97,7 +105,9 @@ var Bench = function Bench(_ref) {
     selectedKeys = _useNavigations.selectedKeys;
   var styled = {
     bench: _stylex.props(styles.bench["default"]),
-    header: _stylex.props(styles.header["default"]),
+    header: _stylex.props(styles.header["default"]({
+      elevation: elevation
+    })),
     main: _stylex.props(styles.bench.main),
     sider: _stylex.props(styles.bench.sider({
       outlineColor: theme.colors[ColorToken.OutlineVariant]
@@ -119,7 +129,7 @@ var Bench = function Bench(_ref) {
     className: styled.divider.className,
     style: styled.divider.style
   }, /*#__PURE__*/React.createElement(Divider, {
-    type: "vertical"
+    orientation: "vertical"
   }))), /*#__PURE__*/React.createElement("span", {
     className: styled.title.className,
     style: styled.title.style

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

@@ -1,5 +1,6 @@
-import { Key, ReactNode } from "react";
-import { ComponentProps } from "../../types/element";
+import type { Key, ReactNode } from "react";
+import type { ComponentProps } from "../../types/element";
+import type { ElevationToken } from "../theme/tokens.stylex";
 export type Logo = {
     /**
      * @description
@@ -75,4 +76,9 @@ export type BenchProps = ComponentProps & {
      * class names
      */
     classNames?: Partial<Record<"main", string>>;
+    /**
+     * @description
+     * elevation
+     */
+    elevation?: ElevationToken;
 };

package/dist/components/breadcrumb/breadcrumb.js

@@ -6,14 +6,14 @@ import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { BreadcrumbClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import Item from './item.js';
 import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {
   breadcrumb: function breadcrumb(props) {
     return [{
-      color: "musae-19dipnz",
+      color: "musaex-19dipnz",
       $$css: true
     }, {
       "--color": props.color != null ? props.color : "initial"
@@ -38,7 +38,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
       color: theme.colors[ColorToken.OnSurfaceVariant]
     })),
     navigations: {
-      className: "musae-e8uvvx musae-78zum5 musae-1a02dak"
+      className: "musaex-e8uvvx musaex-78zum5 musaex-1a02dak"
     }
   };
   return /*#__PURE__*/React.createElement("nav", {

package/dist/components/breadcrumb/item.js

@@ -4,14 +4,14 @@ import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { BreadcrumbClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {
   navigation: {
     "default": function _default(props) {
       return [{
-        ":last-of-type_color": "musae-1befqep",
+        ":last-of-type_color": "musaex-1befqep",
         $$css: true
       }, {
         "--h3adkr": props.color != null ? props.color : "initial"
@@ -19,12 +19,12 @@ var styles = {
     },
     link: function link(props) {
       return [{
-        paddingInline: "musae-381k9q",
+        paddingInline: "musaex-5pwv2j",
         paddingStart: null,
         paddingLeft: null,
         paddingEnd: null,
         paddingRight: null,
-        borderRadius: "musae-7bdoj",
+        borderRadius: "musaex-ok3b7d",
         borderStartStartRadius: null,
         borderStartEndRadius: null,
         borderEndStartRadius: null,
@@ -33,10 +33,10 @@ var styles = {
         borderTopRightRadius: null,
         borderBottomLeftRadius: null,
         borderBottomRightRadius: null,
-        backgroundColor: "musae-rl4t6d",
-        color: "musae-vm0q45",
-        transitionProperty: "musae-fagghw",
-        transitionDuration: "musae-13dflua",
+        backgroundColor: "musaex-rl4t6d",
+        color: "musaex-vm0q45",
+        transitionProperty: "musaex-fagghw",
+        transitionDuration: "musaex-13dflua",
         $$css: true
       }, {
         "--1e2mv7m": props.hoveredBackgroundColor != null ? props.hoveredBackgroundColor : "initial",
@@ -46,7 +46,7 @@ var styles = {
   },
   separator: {
     "default": {
-      marginInline: "musae-19s5fsp",
+      marginInline: "musaex-1sn0kb9",
       marginInlineStart: null,
       marginLeft: null,
       marginInlineEnd: null,