musae 0.3.12 → 0.3.14-beta.1

package/dist/components/avatar/{avatar.cjs → avatar.js}

@@ -3,15 +3,14 @@ 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.7.5/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');
-var className = require('../../utils/class-name.cjs');
-var theme = require('../theme/theme.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.js');
+var context = require('./context.js');
+var hooks = require('../theme/hooks.js');
+var useClassNames = require('../../hooks/use-class-names.js');
+var className = require('../../utils/class-name.js');
+var theme = require('../theme/theme.js');
 var relax = require('@aiszlab/relax');
-var componentToken = require('../../utils/component-token.cjs');
-var skeleton = require('../skeleton/skeleton.cjs');
+var skeleton = require('../skeleton/skeleton.js');
 
 var _excluded = ["src", "alt", "shape", "size", "className", "style"];
 var styles = {
@@ -150,7 +149,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var isInGroup = !!group;
   var size = (_group$size = group === null || group === void 0 ? void 0 : group.size) !== null && _group$size !== void 0 ? _group$size : _size;
   var shape = (_group$shape = group === null || group === void 0 ? void 0 : group.shape) !== null && _group$shape !== void 0 ? _group$shape : _shape;
-  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Avatar);
+  var classNames = useClassNames.useClassNames("avatar");
   var loadStatus = relax.useImageLoader({
     src: src
   });

package/dist/components/avatar/avatar.mjs

@@ -1,14 +1,13 @@
 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.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/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';
 import { AvatarClassToken } from '../../utils/class-name.mjs';
 import { typography } from '../theme/theme.mjs';
 import { useImageLoader, clsx } from '@aiszlab/relax';
-import { ComponentToken } from '../../utils/component-token.mjs';
 import Skeleton from '../skeleton/skeleton.mjs';
 
 var _excluded = ["src", "alt", "shape", "size", "className", "style"];
@@ -148,7 +147,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isInGroup = !!group;
   var size = (_group$size = group === null || group === void 0 ? void 0 : group.size) !== null && _group$size !== void 0 ? _group$size : _size;
   var shape = (_group$shape = group === null || group === void 0 ? void 0 : group.shape) !== null && _group$shape !== void 0 ? _group$shape : _shape;
-  var classNames = useClassNames(ComponentToken.Avatar);
+  var classNames = useClassNames("avatar");
   var loadStatus = useImageLoader({
     src: src
   });

package/dist/components/avatar/{group.cjs → group.js}

@@ -2,12 +2,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
-var context = require('./context.cjs');
-var useClassNames = require('../../hooks/use-class-names.cjs');
-var className = require('../../utils/class-name.cjs');
-var popover = require('../popover/popover.cjs');
-var avatar = require('./avatar.cjs');
-var componentToken = require('../../utils/component-token.cjs');
+var context = require('./context.js');
+var useClassNames = require('../../hooks/use-class-names.js');
+var className = require('../../utils/class-name.js');
+var popover = require('../popover/popover.js');
+var avatar = require('./avatar.js');
 var relax = require('@aiszlab/relax');
 
 var _Group = function Group(_ref) {
@@ -18,7 +17,7 @@ var _Group = function Group(_ref) {
     size = _ref$size === void 0 ? "medium" : _ref$size,
     _ref$max = _ref.max,
     max = _ref$max === void 0 ? 3 : _ref$max;
-  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Avatar);
+  var classNames = useClassNames.useClassNames("avatar");
   var styled = {
     className: "musaex-3nfvp2 musaex-87ps6o"
   };

package/dist/components/avatar/group.mjs

@@ -5,7 +5,6 @@ import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { AvatarClassToken } from '../../utils/class-name.mjs';
 import Popover from '../popover/popover.mjs';
 import Avatar from './avatar.mjs';
-import { ComponentToken } from '../../utils/component-token.mjs';
 import { clsx } from '@aiszlab/relax';
 
 var _Group = function Group(_ref) {
@@ -16,7 +15,7 @@ var _Group = function Group(_ref) {
     size = _ref$size === void 0 ? "medium" : _ref$size,
     _ref$max = _ref.max,
     max = _ref$max === void 0 ? 3 : _ref$max;
-  var classNames = useClassNames(ComponentToken.Avatar);
+  var classNames = useClassNames("avatar");
   var styled = {
     className: "musaex-3nfvp2 musaex-87ps6o"
   };

package/dist/components/avatar/{index.cjs → index.js}

@@ -1,5 +1,5 @@
-var avatar = require('./avatar.cjs');
-var group = require('./group.cjs');
+var avatar = require('./avatar.js');
+var group = require('./group.js');
 
 var Avatar = Object.assign(avatar.default, {
   Group: group.default

package/dist/components/badge/{badge.cjs → badge.js}

@@ -2,14 +2,13 @@ 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 = require('../../utils/class-name.cjs');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/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 useClassNames = require('../../hooks/use-class-names.js');
+var className = require('../../utils/class-name.js');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.js');
+var theme = require('../theme/theme.js');
+var tokens_stylex = require('../theme/tokens.stylex.js');
+var hooks = require('../theme/hooks.js');
 var relax = require('@aiszlab/relax');
-var componentToken = require('../../utils/component-token.cjs');
 
 var styles = {
   badge: {
@@ -97,7 +96,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(componentToken.ComponentToken.Badge);
+  var classNames = useClassNames.useClassNames("badge");
   var theme$1 = hooks.useTheme();
   var isDot = relax.isVoid(content);
   var styled = {

package/dist/components/badge/badge.mjs

@@ -2,12 +2,11 @@ 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.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/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, clsx } from '@aiszlab/relax';
-import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   badge: {
@@ -95,7 +94,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(ComponentToken.Badge);
+  var classNames = useClassNames("badge");
   var theme = useTheme();
   var isDot = isVoid(content);
   var styled = {

package/dist/components/bench/{bench.cjs → bench.js}

@@ -2,14 +2,14 @@ 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.7.5/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');
-var menu = require('../menu/menu.cjs');
-var hooks = require('../theme/hooks.cjs');
-var theme = require('../theme/theme.cjs');
+var index = require('../layout/index.js');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.js');
+var tokens_stylex = require('../theme/tokens.stylex.js');
+var divider = require('../divider/divider.js');
+var hooks$1 = require('./hooks.js');
+var menu = require('../menu/menu.js');
+var hooks = require('../theme/hooks.js');
+var theme = require('../theme/theme.js');
 var relax = require('@aiszlab/relax');
 
 var Header = index.Layout.Header,

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.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/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';

package/dist/components/breadcrumb/{breadcrumb.cjs → breadcrumb.js}

@@ -2,14 +2,13 @@ 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.7.5/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 = require('../../utils/class-name.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.js');
+var theme = require('../theme/theme.js');
+var hooks = require('../theme/hooks.js');
+var useClassNames = require('../../hooks/use-class-names.js');
+var className = require('../../utils/class-name.js');
 var relax = require('@aiszlab/relax');
-var item = require('./item.cjs');
-var componentToken = require('../../utils/component-token.cjs');
+var item = require('./item.js');
 
 var styles = {
   breadcrumb: function breadcrumb(props) {
@@ -29,7 +28,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
     separator = _ref$separator === void 0 ? "/" : _ref$separator,
     style = _ref.style;
   var theme$1 = hooks.useTheme();
-  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Breadcrumb);
+  var classNames = useClassNames.useClassNames("breadcrumb");
   /// there is no need to render the breadcrumb when there is no items
   if (items.length === 0) {
     return null;

package/dist/components/breadcrumb/breadcrumb.mjs

@@ -1,13 +1,12 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { typography } from '../theme/theme.mjs';
 import { useTheme } from '../theme/hooks.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { BreadcrumbClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
 import Item from './item.mjs';
-import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   breadcrumb: function breadcrumb(props) {
@@ -27,7 +26,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
     separator = _ref$separator === void 0 ? "/" : _ref$separator,
     style = _ref.style;
   var theme = useTheme();
-  var classNames = useClassNames(ComponentToken.Breadcrumb);
+  var classNames = useClassNames("breadcrumb");
   /// there is no need to render the breadcrumb when there is no items
   if (items.length === 0) {
     return null;

package/dist/components/breadcrumb/{item.cjs → item.js}

@@ -1,12 +1,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
-var hooks = require('../theme/hooks.cjs');
-var useClassNames = require('../../hooks/use-class-names.cjs');
-var className = require('../../utils/class-name.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.js');
+var hooks = require('../theme/hooks.js');
+var useClassNames = require('../../hooks/use-class-names.js');
+var className = require('../../utils/class-name.js');
 var relax = require('@aiszlab/relax');
-var componentToken = require('../../utils/component-token.cjs');
 
 var styles = {
   navigation: {
@@ -63,7 +62,7 @@ var Item = function Item(_ref) {
     separator = _ref.separator;
   var theme = hooks.useTheme();
   var isLink = !!href;
-  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Breadcrumb);
+  var classNames = useClassNames.useClassNames("breadcrumb");
   var styled = {
     navigation: stylex.default.props(styles.navigation["default"]({
       color: theme.colors["on-surface"]

package/dist/components/breadcrumb/item.mjs

@@ -1,10 +1,9 @@
 import React from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { BreadcrumbClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   navigation: {
@@ -61,7 +60,7 @@ var Item = function Item(_ref) {
     separator = _ref.separator;
   var theme = useTheme();
   var isLink = !!href;
-  var classNames = useClassNames(ComponentToken.Breadcrumb);
+  var classNames = useClassNames("breadcrumb");
   var styled = {
     navigation: _stylex.props(styles.navigation["default"]({
       color: theme.colors["on-surface"]

package/dist/components/button/{button.cjs → button.js}

@@ -3,16 +3,15 @@ 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 className = require('../../utils/class-name.cjs');
+var className = require('../../utils/class-name.js');
 var relax = require('@aiszlab/relax');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
-var tokens_stylex = require('../theme/tokens.stylex.cjs');
-var hooks = require('../theme/hooks.cjs');
-var hooks$1 = require('./hooks.cjs');
-var ripple = require('../ripple/ripple.cjs');
-var theme = require('../theme/theme.cjs');
-var useClassNames = require('../../hooks/use-class-names.cjs');
-var componentToken = require('../../utils/component-token.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.js');
+var tokens_stylex = require('../theme/tokens.stylex.js');
+var hooks = require('../theme/hooks.js');
+var hooks$1 = require('./hooks.js');
+var ripple = require('../ripple/ripple.js');
+var theme = require('../theme/theme.js');
+var useClassNames = require('../../hooks/use-class-names.js');
 var color = require('@aiszlab/fuzzy/color');
 
 var _excluded = ["children", "className", "style", "color", "size", "variant", "shape", "disabled", "ripple", "type", "onClick", "prefix", "suffix"];
@@ -249,7 +248,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     prefix = _ref.prefix,
     suffix = _ref.suffix,
     props = _objectWithoutProperties(_ref, _excluded);
-  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Button);
+  var classNames = useClassNames.useClassNames("button");
   var theme$1 = hooks.useTheme();
   var _useButton = hooks$1.useButton({
       onClick: _onClick

package/dist/components/button/button.mjs

@@ -3,14 +3,13 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import React, { forwardRef } from 'react';
 import { ButtonClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { OPACITY } from '../theme/tokens.stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
 import { useButton } from './hooks.mjs';
 import Ripple from '../ripple/ripple.mjs';
 import { typography } from '../theme/theme.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
-import { ComponentToken } from '../../utils/component-token.mjs';
 import { hexToRgba } from '@aiszlab/fuzzy/color';
 
 var _excluded = ["children", "className", "style", "color", "size", "variant", "shape", "disabled", "ripple", "type", "onClick", "prefix", "suffix"];
@@ -247,7 +246,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     prefix = _ref.prefix,
     suffix = _ref.suffix,
     props = _objectWithoutProperties(_ref, _excluded);
-  var classNames = useClassNames(ComponentToken.Button);
+  var classNames = useClassNames("button");
   var theme = useTheme();
   var _useButton = useButton({
       onClick: _onClick

package/dist/components/button/{hooks.cjs → hooks.js}

@@ -1,6 +1,6 @@
 var React = require('react');
 var relax = require('@aiszlab/relax');
-var hooks = require('../ripple/hooks.cjs');
+var hooks = require('../ripple/hooks.js');
 
 /**
  * @description

package/dist/components/calendar/{calendar.cjs → calendar.js}

@@ -2,19 +2,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var React = require('react');
-var hooks = require('./hooks.cjs');
-var useClassNames = require('../../hooks/use-class-names.cjs');
-var className = require('../../utils/class-name.cjs');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
-var theme = require('../theme/theme.cjs');
+var hooks = require('./hooks.js');
+var useClassNames = require('../../hooks/use-class-names.js');
+var className = require('../../utils/class-name.js');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.js');
+var theme = require('../theme/theme.js');
 var relax = require('@aiszlab/relax');
-var button = require('../button/button.cjs');
-var hooks$1 = require('../theme/hooks.cjs');
-var componentToken = require('../../utils/component-token.cjs');
-var keyboardDoubleArrowLeft = require('../icon/icons/hardware/keyboard-double-arrow-left.cjs');
-var keyboardDoubleArrowRight = require('../icon/icons/hardware/keyboard-double-arrow-right.cjs');
-var keyboardArrowLeft = require('../icon/icons/hardware/keyboard-arrow-left.cjs');
-var keyboardArrowRight = require('../icon/icons/hardware/keyboard-arrow-right.cjs');
+var button = require('../button/button.js');
+var hooks$1 = require('../theme/hooks.js');
+var keyboardDoubleArrowLeft = require('../icon/icons/hardware/keyboard-double-arrow-left.js');
+var keyboardDoubleArrowRight = require('../icon/icons/hardware/keyboard-double-arrow-right.js');
+var keyboardArrowLeft = require('../icon/icons/hardware/keyboard-arrow-left.js');
+var keyboardArrowRight = require('../icon/icons/hardware/keyboard-arrow-right.js');
 
 var styles = {
   header: function header(props) {
@@ -60,7 +59,7 @@ var Calendar = function Calendar(_ref) {
     click: onClick
   });
   var headCells = hooks.useHeadCells();
-  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Calendar);
+  var classNames = useClassNames.useClassNames("calendar");
   var theme$1 = hooks$1.useTheme();
   var styled = {
     calendar: {

package/dist/components/calendar/calendar.mjs

@@ -3,12 +3,11 @@ import React from 'react';
 import { useValue, useFocusedAt, useDateCells, useHeadCells } from './hooks.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { CalendarClassToken } from '../../utils/class-name.mjs';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { typography } from '../theme/theme.mjs';
 import { clsx } from '@aiszlab/relax';
 import { Button } from '../button/button.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ComponentToken } from '../../utils/component-token.mjs';
 import KeyboardDoubleArrowLeft from '../icon/icons/hardware/keyboard-double-arrow-left.mjs';
 import KeyboardDoubleArrowRight from '../icon/icons/hardware/keyboard-double-arrow-right.mjs';
 import KeyboardArrowLeft from '../icon/icons/hardware/keyboard-arrow-left.mjs';
@@ -58,7 +57,7 @@ var Calendar = function Calendar(_ref) {
     click: onClick
   });
   var headCells = useHeadCells();
-  var classNames = useClassNames(ComponentToken.Calendar);
+  var classNames = useClassNames("calendar");
   var theme = useTheme();
   var styled = {
     calendar: {

package/dist/components/calendar/{contribution.cjs → contribution.js}

@@ -3,12 +3,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var dayjs = require('dayjs');
 var React = require('react');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
-var hooks = require('../theme/hooks.cjs');
-var theme = require('../theme/theme.cjs');
-var tooltip = require('../tooltip/tooltip.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.js');
+var hooks = require('../theme/hooks.js');
+var theme = require('../theme/theme.js');
+var tooltip = require('../tooltip/tooltip.js');
 var relax = require('@aiszlab/relax');
-var date = require('../../utils/date.cjs');
+var date = require('../../utils/date.js');
 
 var styles = {
   calendar: {

package/dist/components/calendar/contribution.mjs

@@ -1,7 +1,7 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import dayjs from 'dayjs';
 import React, { useMemo } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
 import { typography } from '../theme/theme.mjs';
 import Tooltip from '../tooltip/tooltip.mjs';

package/dist/components/calendar/{hooks.cjs → hooks.js}

@@ -3,15 +3,14 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var dayjs = require('dayjs');
 var React = require('react');
-var useClassNames = require('../../hooks/use-class-names.cjs');
-var className = require('../../utils/class-name.cjs');
+var useClassNames = require('../../hooks/use-class-names.js');
+var className = require('../../utils/class-name.js');
 var relax = require('@aiszlab/relax');
-var timespan = require('../../utils/timespan.cjs');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
-var theme = require('../theme/theme.cjs');
-var hooks = require('../theme/hooks.cjs');
-var button = require('../button/button.cjs');
-var componentToken = require('../../utils/component-token.cjs');
+var timespan = require('../../utils/timespan.js');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.js');
+var theme = require('../theme/theme.js');
+var hooks = require('../theme/hooks.js');
+var button = require('../button/button.js');
 
 var styles = {
   cell: {
@@ -81,7 +80,7 @@ var styles = {
  * head cells
  */
 var useHeadCells = function useHeadCells() {
-  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Calendar);
+  var classNames = useClassNames.useClassNames("calendar");
   var theme$1 = hooks.useTheme();
   return React.useMemo(function () {
     var _dayjs$Ls$dayjs$local;
@@ -105,7 +104,7 @@ var useDateCells = function useDateCells(_ref) {
   var timespan = _ref.timespan,
     focusedAt = _ref.focusedAt,
     click = _ref.click;
-  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Calendar);
+  var classNames = useClassNames.useClassNames("calendar");
   var theme$1 = hooks.useTheme();
   return React.useMemo(function () {
     var start = focusedAt.startOf("month");

package/dist/components/calendar/hooks.mjs

@@ -7,11 +7,10 @@ import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { CalendarClassToken } from '../../utils/class-name.mjs';
 import { clsx, toArray, useControlledState } from '@aiszlab/relax';
 import { Timespan } from '../../utils/timespan.mjs';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { typography } from '../theme/theme.mjs';
 import { useTheme } from '../theme/hooks.mjs';
 import { Button } from '../button/button.mjs';
-import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   cell: {
@@ -81,7 +80,7 @@ var styles = {
  * head cells
  */
 var useHeadCells = function useHeadCells() {
-  var classNames = useClassNames(ComponentToken.Calendar);
+  var classNames = useClassNames("calendar");
   var theme = useTheme();
   return useMemo(function () {
     var _dayjs$Ls$dayjs$local;
@@ -105,7 +104,7 @@ var useDateCells = function useDateCells(_ref) {
   var timespan = _ref.timespan,
     focusedAt = _ref.focusedAt,
     click = _ref.click;
-  var classNames = useClassNames(ComponentToken.Calendar);
+  var classNames = useClassNames("calendar");
   var theme = useTheme();
   return useMemo(function () {
     var start = focusedAt.startOf("month");

package/dist/components/cascader/{cascader.cjs → cascader.js}

@@ -4,14 +4,13 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
-var picker = require('../picker/picker.cjs');
-var tag = require('../tag/tag.cjs');
-var hooks = require('./hooks.cjs');
-var menu = require('../menu/menu.cjs');
-var useClassNames = require('../../hooks/use-class-names.cjs');
-var className = require('../../utils/class-name.cjs');
+var picker = require('../picker/picker.js');
+var tag = require('../tag/tag.js');
+var hooks = require('./hooks.js');
+var menu = require('../menu/menu.js');
+var useClassNames = require('../../hooks/use-class-names.js');
+var className = require('../../utils/class-name.js');
 var relax = require('@aiszlab/relax');
-var componentToken = require('../../utils/component-token.cjs');
 
 var _excluded = ["mode", "separator", "options", "complex"];
 var Cascader = function Cascader(_ref) {
@@ -27,7 +26,7 @@ var Cascader = function Cascader(_ref) {
     var _ref$current;
     return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.close();
   }, []);
-  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Cascader);
+  var classNames = useClassNames.useClassNames("cascader");
   var _useOptions = hooks.useOptions([options]),
     readableOptions = _useOptions.readableOptions,
     readablePaths = _useOptions.readablePaths,

package/dist/components/cascader/cascader.mjs

@@ -9,7 +9,6 @@ import Menu from '../menu/menu.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { CascaderClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import { ComponentToken } from '../../utils/component-token.mjs';
 
 var _excluded = ["mode", "separator", "options", "complex"];
 var Cascader = function Cascader(_ref) {
@@ -25,7 +24,7 @@ var Cascader = function Cascader(_ref) {
     var _ref$current;
     return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.close();
   }, []);
-  var classNames = useClassNames(ComponentToken.Cascader);
+  var classNames = useClassNames("cascader");
   var _useOptions = useOptions([options]),
     readableOptions = _useOptions.readableOptions,
     readablePaths = _useOptions.readablePaths,

package/dist/components/cascader/{hooks.cjs → hooks.js}

@@ -2,7 +2,7 @@ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var relax = require('@aiszlab/relax');
-var utils = require('./utils.cjs');
+var utils = require('./utils.js');
 
 /**
  * @description