musae 0.3.10 → 0.3.12

package/README.md

@@ -1,21 +1,30 @@
-<h1 align="center">Musae</h1>
+<h1 align="center">musae</h1>
 
-## ✨ Features
+## Introduction
 
-- 🌈 Enterprise-class UI designed for web applications.
-- 📦 A set of high-quality React components out of the box.
-- 🛡 Written in TypeScript with predictable static types.
-- ⚙️ Whole package of design resources and development tools.
-- 🎨 Powerful theme customization based on CSS-in-JS.
+Next-generation UI Component suite for `React`.
 
 ## 📦 Install
 
 ```bash
+## use npm
 npm install musae
-## pnpm add musae
-## yarn add musae
+
+## use pnpm
+pnpm add musae
+
+## use yarn
+yarn add musae
 ```
 
+## Overview
+
+`musae` is a complete UI suite for `React` consisting of a rich set of UI components, icons, blocks, and application templates.
+
+## Theming
+
+`musae` has powerful theme customization based on CSS-in-JS.
+
 ## 🔨 Usage
 
 ```tsx

package/dist/components/avatar/avatar.cjs

@@ -6,7 +6,6 @@ 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 colors = require('../../utils/colors.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('../../utils/class-name.cjs');
 var theme = require('../theme/theme.cjs');
@@ -157,10 +156,10 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   });
   var styled = {
     avatar: stylex.default.props(theme.typography.label[size], styles.avatar({
-      backgroundColor: theme$1.colors[colors.ColorToken.PrimaryContainer],
-      color: theme$1.colors[colors.ColorToken.Primary]
+      backgroundColor: theme$1.colors["primary-container"],
+      color: theme$1.colors.primary
     }), styles[size], styles[shape], isInGroup && styles.overlapping({
-      outlineColor: theme$1.colors[colors.ColorToken.OnPrimary]
+      outlineColor: theme$1.colors["on-primary"]
     })),
     loading: stylex.default.props(styles[shape], styles[size]),
     image: stylex.default.props(styles.image, styles[size])

package/dist/components/avatar/avatar.mjs

@@ -4,7 +4,6 @@ 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 { Context } from './context.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { AvatarClassToken } from '../../utils/class-name.mjs';
 import { typography } from '../theme/theme.mjs';
@@ -155,10 +154,10 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
   var styled = {
     avatar: _stylex.props(typography.label[size], styles.avatar({
-      backgroundColor: theme.colors[ColorToken.PrimaryContainer],
-      color: theme.colors[ColorToken.Primary]
+      backgroundColor: theme.colors["primary-container"],
+      color: theme.colors.primary
     }), styles[size], styles[shape], isInGroup && styles.overlapping({
-      outlineColor: theme.colors[ColorToken.OnPrimary]
+      outlineColor: theme.colors["on-primary"]
     })),
     loading: _stylex.props(styles[shape], styles[size]),
     image: _stylex.props(styles.image, styles[size])

package/dist/components/badge/badge.cjs

@@ -8,7 +8,6 @@ var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modul
 var theme = require('../theme/theme.cjs');
 var tokens_stylex = require('../theme/tokens.stylex.cjs');
 var hooks = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.cjs');
 var relax = require('@aiszlab/relax');
 var componentToken = require('../../utils/component-token.cjs');
 
@@ -104,8 +103,8 @@ var Badge = function Badge(_ref) {
   var styled = {
     badge: stylex.default.props(styles.badge["default"]),
     tail: stylex.default.props(styles.tail["default"]({
-      backgroundColor: theme$1.colors[colors.ColorToken.Primary],
-      color: theme$1.colors[colors.ColorToken.OnPrimary]
+      backgroundColor: theme$1.colors.primary,
+      color: theme$1.colors["on-primary"]
     }), isDot && styles.tail.dot, theme.typography.label.small, invisible && styles.tail.invisible, styles.tail[placement])
   };
   return /*#__PURE__*/React.createElement("span", {

package/dist/components/badge/badge.mjs

@@ -6,7 +6,6 @@ import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_module
 import { typography } from '../theme/theme.mjs';
 import { sizes } from '../theme/tokens.stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { isVoid, clsx } from '@aiszlab/relax';
 import { ComponentToken } from '../../utils/component-token.mjs';
 
@@ -102,8 +101,8 @@ var Badge = function Badge(_ref) {
   var styled = {
     badge: _stylex.props(styles.badge["default"]),
     tail: _stylex.props(styles.tail["default"]({
-      backgroundColor: theme.colors[ColorToken.Primary],
-      color: theme.colors[ColorToken.OnPrimary]
+      backgroundColor: theme.colors.primary,
+      color: theme.colors["on-primary"]
     }), isDot && styles.tail.dot, typography.label.small, invisible && styles.tail.invisible, styles.tail[placement])
   };
   return /*#__PURE__*/React.createElement("span", {

package/dist/components/bench/bench.cjs

@@ -9,7 +9,6 @@ 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 colors = require('../../utils/colors.cjs');
 var theme = require('../theme/theme.cjs');
 var relax = require('@aiszlab/relax');
 
@@ -115,7 +114,7 @@ var Bench = function Bench(_ref) {
     })),
     main: stylex.default.props(styles.bench.main),
     sider: stylex.default.props(styles.bench.sider({
-      outlineColor: theme$1.colors[colors.ColorToken.OutlineVariant]
+      outlineColor: theme$1.colors["outline-variant"]
     })),
     title: stylex.default.props(theme.typography.title.large),
     divider: stylex.default.props(styles.header.divider),

package/dist/components/bench/bench.mjs

@@ -7,7 +7,6 @@ import Divider from '../divider/divider.mjs';
 import { useLogo, useNavigations } from './hooks.mjs';
 import Menu from '../menu/menu.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { typography } from '../theme/theme.mjs';
 import { clsx } from '@aiszlab/relax';
 
@@ -113,7 +112,7 @@ var Bench = function Bench(_ref) {
     })),
     main: _stylex.props(styles.bench.main),
     sider: _stylex.props(styles.bench.sider({
-      outlineColor: theme.colors[ColorToken.OutlineVariant]
+      outlineColor: theme.colors["outline-variant"]
     })),
     title: _stylex.props(typography.title.large),
     divider: _stylex.props(styles.header.divider),

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

@@ -16,7 +16,7 @@ export declare const useNavigations: ({ navigations, onNavigate, location, layou
     location?: string;
     layout: Layout;
 }) => {
-    selectedKeys: [(Key | undefined)?, (Key | undefined)?];
+    selectedKeys: [(string | undefined)?, (string | undefined)?];
     topMenuItems: MenuItem[];
     sideMenuItems: MenuItem[];
     navigate: (path: Key) => void;

package/dist/components/breadcrumb/breadcrumb.cjs

@@ -5,7 +5,6 @@ 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 colors = require('../../utils/colors.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('../../utils/class-name.cjs');
 var relax = require('@aiszlab/relax');
@@ -37,7 +36,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
   }
   var styled = {
     breadcrumb: stylex.default.props(theme.typography.label.large, styles.breadcrumb({
-      color: theme$1.colors[colors.ColorToken.OnSurfaceVariant]
+      color: theme$1.colors["on-surface-variant"]
     })),
     navigations: {
       className: "musaex-e8uvvx musaex-78zum5 musaex-1a02dak"

package/dist/components/breadcrumb/breadcrumb.mjs

@@ -3,7 +3,6 @@ import React from 'react';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { typography } from '../theme/theme.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { BreadcrumbClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
@@ -35,7 +34,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
   }
   var styled = {
     breadcrumb: _stylex.props(typography.label.large, styles.breadcrumb({
-      color: theme.colors[ColorToken.OnSurfaceVariant]
+      color: theme.colors["on-surface-variant"]
     })),
     navigations: {
       className: "musaex-e8uvvx musaex-78zum5 musaex-1a02dak"

package/dist/components/breadcrumb/item.cjs

@@ -3,7 +3,6 @@ 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 colors = require('../../utils/colors.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('../../utils/class-name.cjs');
 var relax = require('@aiszlab/relax');
@@ -67,10 +66,10 @@ var Item = function Item(_ref) {
   var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Breadcrumb);
   var styled = {
     navigation: stylex.default.props(styles.navigation["default"]({
-      color: theme.colors[colors.ColorToken.OnSurface]
+      color: theme.colors["on-surface"]
     }), isLink && styles.navigation.link({
-      hoveredBackgroundColor: theme.colors[colors.ColorToken.Surface],
-      hoveredColor: theme.colors[colors.ColorToken.OnSurface]
+      hoveredBackgroundColor: theme.colors.surface,
+      hoveredColor: theme.colors["on-surface"]
     })),
     separator: stylex.default.props(styles.separator["default"])
   };

package/dist/components/breadcrumb/item.mjs

@@ -1,7 +1,6 @@
 import React from 'react';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { BreadcrumbClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
@@ -65,10 +64,10 @@ var Item = function Item(_ref) {
   var classNames = useClassNames(ComponentToken.Breadcrumb);
   var styled = {
     navigation: _stylex.props(styles.navigation["default"]({
-      color: theme.colors[ColorToken.OnSurface]
+      color: theme.colors["on-surface"]
     }), isLink && styles.navigation.link({
-      hoveredBackgroundColor: theme.colors[ColorToken.Surface],
-      hoveredColor: theme.colors[ColorToken.OnSurface]
+      hoveredBackgroundColor: theme.colors.surface,
+      hoveredColor: theme.colors["on-surface"]
     })),
     separator: _stylex.props(styles.separator["default"])
   };

package/dist/components/button/button.cjs

@@ -11,7 +11,6 @@ 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 colors = require('../../utils/colors.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var componentToken = require('../../utils/component-token.cjs');
 var color = require('@aiszlab/fuzzy/color');
@@ -268,18 +267,18 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       color: theme$1.colors["on-".concat(color$1)]
     }), variant === "outlined" && styles.outlined({
       color: theme$1.colors[color$1],
-      hoveredBackgroundColor: color.hexToRgba(theme$1.colors[colors.ColorToken.Primary], tokens_stylex.OPACITY.thin)
+      hoveredBackgroundColor: color.hexToRgba(theme$1.colors.primary, tokens_stylex.OPACITY.thin)
     }), variant === "text" && styles.text({
       color: theme$1.colors[color$1],
-      hoveredBackgroundColor: color.hexToRgba(theme$1.colors[colors.ColorToken.Primary], tokens_stylex.OPACITY.thin)
+      hoveredBackgroundColor: color.hexToRgba(theme$1.colors.primary, tokens_stylex.OPACITY.thin)
     }),
     // shape
     styles[shape],
     // disabled
     disabled && styles.disabled({
-      backgroundColor: variant === "filled" ? color.hexToRgba(theme$1.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.medium) : "transparent",
-      color: color.hexToRgba(theme$1.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker),
-      outlineColor: variant === "outlined" ? color.hexToRgba(theme$1.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker) : null
+      backgroundColor: variant === "filled" ? color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.medium) : "transparent",
+      color: color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker),
+      outlineColor: variant === "outlined" ? color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker) : null
     }))
   };
   return /*#__PURE__*/React.createElement("button", _objectSpread({

package/dist/components/button/button.mjs

@@ -9,7 +9,6 @@ import { useTheme } from '../theme/hooks.mjs';
 import { useButton } from './hooks.mjs';
 import Ripple from '../ripple/ripple.mjs';
 import { typography } from '../theme/theme.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
 import { hexToRgba } from '@aiszlab/fuzzy/color';
@@ -266,18 +265,18 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       color: theme.colors["on-".concat(color)]
     }), variant === "outlined" && styles.outlined({
       color: theme.colors[color],
-      hoveredBackgroundColor: hexToRgba(theme.colors[ColorToken.Primary], OPACITY.thin)
+      hoveredBackgroundColor: hexToRgba(theme.colors.primary, OPACITY.thin)
     }), variant === "text" && styles.text({
       color: theme.colors[color],
-      hoveredBackgroundColor: hexToRgba(theme.colors[ColorToken.Primary], OPACITY.thin)
+      hoveredBackgroundColor: hexToRgba(theme.colors.primary, OPACITY.thin)
     }),
     // shape
     styles[shape],
     // disabled
     disabled && styles.disabled({
-      backgroundColor: variant === "filled" ? hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.medium) : "transparent",
-      color: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker),
-      outlineColor: variant === "outlined" ? hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker) : null
+      backgroundColor: variant === "filled" ? hexToRgba(theme.colors["on-surface"], OPACITY.medium) : "transparent",
+      color: hexToRgba(theme.colors["on-surface"], OPACITY.thicker),
+      outlineColor: variant === "outlined" ? hexToRgba(theme.colors["on-surface"], OPACITY.thicker) : null
     }))
   };
   return /*#__PURE__*/React.createElement("button", _objectSpread({

package/dist/components/calendar/calendar.cjs

@@ -10,7 +10,6 @@ var theme = require('../theme/theme.cjs');
 var relax = require('@aiszlab/relax');
 var button = require('../button/button.cjs');
 var hooks$1 = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.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');
@@ -68,7 +67,7 @@ var Calendar = function Calendar(_ref) {
       className: "musaex-eq5yr9"
     },
     header: stylex.default.props(theme.typography.label.large, styles.header({
-      color: theme$1.colors[colors.ColorToken.OnSurfaceVariant]
+      color: theme$1.colors["on-surface-variant"]
     })),
     heading: {
       className: "musaex-98rzlu musaex-78zum5 musaex-l56j7k"

package/dist/components/calendar/calendar.mjs

@@ -8,7 +8,6 @@ import { typography } from '../theme/theme.mjs';
 import { clsx } from '@aiszlab/relax';
 import { Button } from '../button/button.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.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';
@@ -66,7 +65,7 @@ var Calendar = function Calendar(_ref) {
       className: "musaex-eq5yr9"
     },
     header: _stylex.props(typography.label.large, styles.header({
-      color: theme.colors[ColorToken.OnSurfaceVariant]
+      color: theme.colors["on-surface-variant"]
     })),
     heading: {
       className: "musaex-98rzlu musaex-78zum5 musaex-l56j7k"

package/dist/components/calendar/hooks.cjs

@@ -10,7 +10,6 @@ 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 colors = require('../../utils/colors.cjs');
 var button = require('../button/button.cjs');
 var componentToken = require('../../utils/component-token.cjs');
 
@@ -87,7 +86,7 @@ var useHeadCells = function useHeadCells() {
   return React.useMemo(function () {
     var _dayjs$Ls$dayjs$local;
     var styled = stylex.default.props(styles.cell, styles.header({
-      color: theme$1.colors[colors.ColorToken.OnSurfaceVariant]
+      color: theme$1.colors["on-surface-variant"]
     }), theme.typography.body.large);
     return (_dayjs$Ls$dayjs$local = dayjs.Ls[dayjs.locale()].weekdays) === null || _dayjs$Ls$dayjs$local === void 0 ? void 0 : _dayjs$Ls$dayjs$local.map(function (weekday, index) {
       return /*#__PURE__*/React.createElement("th", {
@@ -125,7 +124,7 @@ var useDateCells = function useDateCells(_ref) {
       var isSelected = isFrom || isTo;
       var styled = {
         cell: stylex.default.props(styles.cell, styles.date({
-          backgroundColor: theme$1.colors[colors.ColorToken.SecondaryContainer]
+          backgroundColor: theme$1.colors["secondary-container"]
         }), isDisabled && styles.hidden, isBetween && styles.range, isFrom && timespan.isRange && styles.from, isTo && timespan.isRange && styles.to, theme.typography.body.large),
         trigger: {
           className: "musaex-gnae0u musaex-ksl8fa"

package/dist/components/calendar/hooks.mjs

@@ -10,7 +10,6 @@ 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 { typography } from '../theme/theme.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { Button } from '../button/button.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
 
@@ -87,7 +86,7 @@ var useHeadCells = function useHeadCells() {
   return useMemo(function () {
     var _dayjs$Ls$dayjs$local;
     var styled = _stylex.props(styles.cell, styles.header({
-      color: theme.colors[ColorToken.OnSurfaceVariant]
+      color: theme.colors["on-surface-variant"]
     }), typography.body.large);
     return (_dayjs$Ls$dayjs$local = dayjs.Ls[dayjs.locale()].weekdays) === null || _dayjs$Ls$dayjs$local === void 0 ? void 0 : _dayjs$Ls$dayjs$local.map(function (weekday, index) {
       return /*#__PURE__*/React.createElement("th", {
@@ -125,7 +124,7 @@ var useDateCells = function useDateCells(_ref) {
       var isSelected = isFrom || isTo;
       var styled = {
         cell: _stylex.props(styles.cell, styles.date({
-          backgroundColor: theme.colors[ColorToken.SecondaryContainer]
+          backgroundColor: theme.colors["secondary-container"]
         }), isDisabled && styles.hidden, isBetween && styles.range, isFrom && timespan.isRange && styles.from, isTo && timespan.isRange && styles.to, typography.body.large),
         trigger: {
           className: "musaex-gnae0u musaex-ksl8fa"

package/dist/components/checkbox/checkbox.cjs

@@ -9,7 +9,6 @@ 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 hooks = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.cjs');
 var theme = require('../theme/theme.cjs');
 var componentToken = require('../../utils/component-token.cjs');
 var styles = require('./styles.cjs');
@@ -57,13 +56,13 @@ var Checkbox = function Checkbox(_ref) {
   });
   var styled = {
     checkbox: stylex.default.props(styles.default.checkbox["default"], isDisabled && styles.default.checkbox.disabled, styles.default.checkbox.variables({
-      primaryColor: theme$1.colors[colors.ColorToken.Primary],
-      onPrimaryColor: theme$1.colors[colors.ColorToken.OnPrimary],
-      outlineColor: theme$1.colors[colors.ColorToken.Outline]
+      primaryColor: theme$1.colors.primary,
+      onPrimaryColor: theme$1.colors["on-primary"],
+      outlineColor: theme$1.colors.outline
     })),
     trigger: stylex.default.props(styles.default.trigger["default"], isChecked && styles.default.trigger.checked, isDisabled && styles.default.trigger.disabled({
-      backgroundColor: theme$1.colors[colors.ColorToken.OnSurface],
-      color: theme$1.colors[colors.ColorToken.OnPrimary]
+      backgroundColor: theme$1.colors["on-surface"],
+      color: theme$1.colors["on-primary"]
     }), !isChecked && styles.default.trigger.unchecked),
     label: stylex.default.props(styles.default.label["default"], theme.typography.label.small)
   };

package/dist/components/checkbox/checkbox.mjs

@@ -7,7 +7,6 @@ import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { CheckboxClassToken } 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 { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { typography } from '../theme/theme.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
 import styles from './styles.mjs';
@@ -55,13 +54,13 @@ var Checkbox = function Checkbox(_ref) {
   });
   var styled = {
     checkbox: _stylex.props(styles.checkbox["default"], isDisabled && styles.checkbox.disabled, styles.checkbox.variables({
-      primaryColor: theme.colors[ColorToken.Primary],
-      onPrimaryColor: theme.colors[ColorToken.OnPrimary],
-      outlineColor: theme.colors[ColorToken.Outline]
+      primaryColor: theme.colors.primary,
+      onPrimaryColor: theme.colors["on-primary"],
+      outlineColor: theme.colors.outline
     })),
     trigger: _stylex.props(styles.trigger["default"], isChecked && styles.trigger.checked, isDisabled && styles.trigger.disabled({
-      backgroundColor: theme.colors[ColorToken.OnSurface],
-      color: theme.colors[ColorToken.OnPrimary]
+      backgroundColor: theme.colors["on-surface"],
+      color: theme.colors["on-primary"]
     }), !isChecked && styles.trigger.unchecked),
     label: _stylex.props(styles.label["default"], typography.label.small)
   };

package/dist/components/clock/column.cjs

@@ -7,7 +7,6 @@ var className = require('../../utils/class-name.cjs');
 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 hooks = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.cjs');
 var componentToken = require('../../utils/component-token.cjs');
 
 var UNITS = {
@@ -65,8 +64,8 @@ var Column = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [value]);
   var styled = {
     menu: stylex.default.props(styles.menu({
-      scrollbarThumbColor: theme.colors[colors.ColorToken.Secondary],
-      outlineColor: theme.colors[colors.ColorToken.OutlineVariant]
+      scrollbarThumbColor: theme.colors.secondary,
+      outlineColor: theme.colors["outline-variant"]
     })),
     item: {
       className: "musaex-yueg9c musaex-78zum5 musaex-l56j7k"

package/dist/components/clock/column.mjs

@@ -5,7 +5,6 @@ import { ClockClassToken } from '../../utils/class-name.mjs';
 import { isVoid, clsx } from '@aiszlab/relax';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
 
 var UNITS = {
@@ -63,8 +62,8 @@ var Column = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [value]);
   var styled = {
     menu: _stylex.props(styles.menu({
-      scrollbarThumbColor: theme.colors[ColorToken.Secondary],
-      outlineColor: theme.colors[ColorToken.OutlineVariant]
+      scrollbarThumbColor: theme.colors.secondary,
+      outlineColor: theme.colors["outline-variant"]
     })),
     item: {
       className: "musaex-yueg9c musaex-78zum5 musaex-l56j7k"

package/dist/components/collapse/collapse.cjs

@@ -11,7 +11,6 @@ var relax = require('@aiszlab/relax');
 var hooks = require('./hooks.cjs');
 var context = require('./context.cjs');
 var hooks$1 = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.cjs');
 var componentToken = require('../../utils/component-token.cjs');
 
 var styles = {
@@ -82,7 +81,7 @@ var Collapse = function Collapse(_ref) {
   // no need to render when items is empty
   if (items.length === 0) return null;
   var styled = stylex.default.props(styles.collapse({
-    outlineColor: theme.colors[colors.ColorToken.OutlineVariant]
+    outlineColor: theme.colors["outline-variant"]
   }));
   return /*#__PURE__*/React.createElement(context.Context.Provider, {
     value: {

package/dist/components/collapse/collapse.mjs

@@ -9,7 +9,6 @@ import { clsx } from '@aiszlab/relax';
 import { useActiveKeys } from './hooks.mjs';
 import { Context } from './context.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
@@ -80,7 +79,7 @@ var Collapse = function Collapse(_ref) {
   // no need to render when items is empty
   if (items.length === 0) return null;
   var styled = _stylex.props(styles.collapse({
-    outlineColor: theme.colors[ColorToken.OutlineVariant]
+    outlineColor: theme.colors["outline-variant"]
   }));
   return /*#__PURE__*/React.createElement(Context.Provider, {
     value: {

package/dist/components/collapse/item.cjs

@@ -13,7 +13,6 @@ var framerMotion = require('framer-motion');
 var context = require('./context.cjs');
 var useExpandable = require('../../hooks/use-expandable.cjs');
 var hooks = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.cjs');
 var componentToken = require('../../utils/component-token.cjs');
 var keyboardArrowRight = require('../icon/icons/hardware/keyboard-arrow-right.cjs');
 
@@ -135,12 +134,12 @@ var CollapseItem = function CollapseItem(_ref) {
   })), [isExpanded]);
   var styled = {
     item: stylex.default.props(styles.item["default"]({
-      outlineColor: theme.colors[colors.ColorToken.OutlineVariant]
+      outlineColor: theme.colors["outline-variant"]
     })),
     header: stylex.default.props(styles.header["default"]),
     panel: stylex.default.props(styles.panel["default"], !isExpanded && styles.panel.hidden),
     content: stylex.default.props(styles.content["default"]({
-      outlineColor: theme.colors[colors.ColorToken.OutlineVariant]
+      outlineColor: theme.colors["outline-variant"]
     })),
     collapser: stylex.default.props(styles.collapser["default"], isExpanded && styles.collapser.expanded)
   };

package/dist/components/collapse/item.mjs

@@ -11,7 +11,6 @@ import { useAnimate } from 'framer-motion';
 import { Context } from './context.mjs';
 import { useExpandable } from '../../hooks/use-expandable.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
 import KeyboardArrowRight from '../icon/icons/hardware/keyboard-arrow-right.mjs';
 
@@ -133,12 +132,12 @@ var CollapseItem = function CollapseItem(_ref) {
   })), [isExpanded]);
   var styled = {
     item: _stylex.props(styles.item["default"]({
-      outlineColor: theme.colors[ColorToken.OutlineVariant]
+      outlineColor: theme.colors["outline-variant"]
     })),
     header: _stylex.props(styles.header["default"]),
     panel: _stylex.props(styles.panel["default"], !isExpanded && styles.panel.hidden),
     content: _stylex.props(styles.content["default"]({
-      outlineColor: theme.colors[ColorToken.OutlineVariant]
+      outlineColor: theme.colors["outline-variant"]
     })),
     collapser: _stylex.props(styles.collapser["default"], isExpanded && styles.collapser.expanded)
   };

package/dist/components/dialog/hooks.cjs

@@ -19,11 +19,11 @@ var useFooter = function useFooter(_ref) {
     locale = _useLocale2[0];
   return React.useMemo(function () {
     return footer !== null && footer !== void 0 ? footer : (/*#__PURE__*/React.createElement(space.default, null, /*#__PURE__*/React.createElement(button.Button, {
-      onClick: onClose,
-      color: "secondary",
+      onClick: onConfirm,
       variant: "text"
     }, locale.confirm), /*#__PURE__*/React.createElement(button.Button, {
-      onClick: onConfirm,
+      onClick: onClose,
+      color: "secondary",
       variant: "text"
     }, locale.cancel)));
   }, [footer, onConfirm, onClose, locale]);

package/dist/components/dialog/hooks.mjs

@@ -19,11 +19,11 @@ var useFooter = function useFooter(_ref) {
     locale = _useLocale2[0];
   return useMemo(function () {
     return footer !== null && footer !== void 0 ? footer : (/*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
-      onClick: onClose,
-      color: "secondary",
+      onClick: onConfirm,
       variant: "text"
     }, locale.confirm), /*#__PURE__*/React.createElement(Button, {
-      onClick: onConfirm,
+      onClick: onClose,
+      color: "secondary",
       variant: "text"
     }, locale.cancel)));
   }, [footer, onConfirm, onClose, locale]);