musae 0.2.20 → 0.2.22

package/dist/components/form/field/layout.js

@@ -6,7 +6,7 @@ import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_m
 import { typography } from '../../theme/theme.js';
 import { useTheme } from '../../theme/hooks.js';
 import { ColorToken } from '../../../utils/colors.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 
 var _excluded = ["required", "space"];
 var Row = Grid.Row,
@@ -52,7 +52,7 @@ var Layout = function Layout(_ref) {
     gutter: [0, 8],
     className: styled.item.className,
     style: styled.item.style
-  }, !!labelCol && props$1.label && ( /*#__PURE__*/React.createElement(Col, {
+  }, !!labelCol && props$1.label && (/*#__PURE__*/React.createElement(Col, {
     span: labelCol
   }, /*#__PURE__*/React.createElement("span", {
     className: clsx(styled.label.className),

package/dist/components/grid/col.js

@@ -2,7 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { GridClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { ComponentToken } from '../../utils/component-token.js';
 

package/dist/components/grid/row.js

@@ -3,7 +3,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { GridClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useGutters } from '../../hooks/use-gutters.js';
 import { ComponentToken } from '../../utils/component-token.js';

package/dist/components/highlight/highlight.js

@@ -5,7 +5,7 @@ import { HighlightClassToken } 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 { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { ComponentToken } from '../../utils/component-token.js';
 
 var styles = {
@@ -32,7 +32,7 @@ var Highlight = function Highlight(_ref) {
     // 2. replace with custom node
     var _Array$from$reduce = Array.from(children.matchAll(new RegExp(capture, "g"))).reduce(function (prev, item) {
         prev[0].push(children.slice(prev[1], item.index));
-        prev[0].push( /*#__PURE__*/React.createElement("span", {
+        prev[0].push(/*#__PURE__*/React.createElement("span", {
           className: clsx(classNames[HighlightClassToken.Capture], styled.className),
           style: styled.style,
           key: item.index

package/dist/components/i18n-button/hooks.js

@@ -19,7 +19,7 @@ var useLocales = function useLocales() {
     _useState2 = _slicedToArray(_useState, 2),
     locales = _useState2[0],
     setLocales = _useState2[1];
-  useMounted( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  useMounted(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     var _yield$import$catch;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {

package/dist/components/i18n-button/i18n-button.js

@@ -16,8 +16,8 @@ var I18nButton = function I18nButton(_ref) {
     locales = _useLocales.locales,
     localeCode = _useLocales.localeCode;
   var popoverRef = useRef(null);
-  var change = useEvent( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(value) {
+  var change = useEvent(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(value) {
       var _popoverRef$current;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {

package/dist/components/icon/icon.js

@@ -1,9 +1,8 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { useMemo, createElement } from 'react';
-import { isFunction } from '@aiszlab/relax';
+import { isFunction, clsx } from '@aiszlab/relax';
 import { IconClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken } from '../../utils/component-token.js';

package/dist/components/image/preview/operations.js

@@ -117,7 +117,7 @@ var Operations = function Operations(_ref) {
     shape: "circular"
   }, /*#__PURE__*/React.createElement(Close, {
     size: 32
-  })), isMultiple && ( /*#__PURE__*/React.createElement("div", {
+  })), isMultiple && (/*#__PURE__*/React.createElement("div", {
     className: styled.navigations.className,
     style: styled.navigations.style
   }, /*#__PURE__*/React.createElement(Button, {

package/dist/components/input/input.js

@@ -4,13 +4,12 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useInputEvents, useWrapperEvents } from './hooks.js';
-import { useControlledState, useFocus } from '@aiszlab/relax';
+import { useControlledState, useFocus, clsx } from '@aiszlab/relax';
 import { InputClassToken } from '../../utils/class-name.js';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { sizes } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
-import clsx from 'clsx';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { typography } from '../theme/theme.js';
 import { ComponentToken } from '../../utils/component-token.js';

package/dist/components/layout/header.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { useTheme } from '../theme/hooks.js';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { ColorToken } from '../../utils/colors.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 
 var styles = {
   header: function header(props) {

package/dist/components/layout/layout.js

@@ -6,7 +6,7 @@ import { useChildren, ChildToken } from './hooks.js';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 
 var _excluded = ["className", "style"];
 var styles = {
@@ -40,11 +40,11 @@ var Layout = function Layout(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(className, styled.className),
     style: _objectSpread(_objectSpread({}, styled.style), style)
-  }, children.get(ChildToken.Header), hasSider ? ( /*#__PURE__*/React.createElement(Grid.Row, {
+  }, children.get(ChildToken.Header), hasSider ? (/*#__PURE__*/React.createElement(Grid.Row, {
     as: "main"
   }, sider, /*#__PURE__*/React.createElement(Grid.Col, _objectSpread(_objectSpread({}, mainProps), {}, {
     span: 19
-  }), children.get(ChildToken.Main), children.get(ChildToken.Footer)))) : ( /*#__PURE__*/React.createElement("main", _objectSpread({}, mainProps), children.get(ChildToken.Main), children.get(ChildToken.Footer))));
+  }), children.get(ChildToken.Main), children.get(ChildToken.Footer)))) : (/*#__PURE__*/React.createElement("main", _objectSpread({}, mainProps), children.get(ChildToken.Main), children.get(ChildToken.Footer))));
 };
 
 export { Layout as default };

package/dist/components/loading/loading.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { LoadingClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { ComponentToken } from '../../utils/component-token.js';

package/dist/components/menu/group.js

@@ -8,10 +8,9 @@ import React, { forwardRef } from 'react';
 import { useAnimate } from 'framer-motion';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { MenuClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
 import Item from './item.js';
 import { useMenuContext } from './hooks.js';
-import { useRefs, useUpdateEffect } from '@aiszlab/relax';
+import { useRefs, useUpdateEffect, clsx } from '@aiszlab/relax';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useExpandable } from '../../hooks/use-expandable.js';
 import { useTheme } from '../theme/hooks.js';
@@ -127,7 +126,7 @@ var Group = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _useExpandable = useExpandable(),
     expand = _useExpandable.expand,
     collapse = _useExpandable.collapse;
-  useUpdateEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  useUpdateEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -175,7 +174,7 @@ var Group = /*#__PURE__*/forwardRef(function (_ref2, ref) {
         if (!_ref) return;
         collect(item.key, _ref);
       }
-    }, children.length > 0 && ( /*#__PURE__*/React.createElement(Group, {
+    }, children.length > 0 && (/*#__PURE__*/React.createElement(Group, {
       items: children,
       expanded: !isInline || expandedKeys.has(item.key),
       level: !isInline ? 0 : level + 1,

package/dist/components/menu/hooks.js

@@ -65,7 +65,7 @@ var useItemChildren = function useItemChildren(_ref) {
     }));
     return /*#__PURE__*/React.createElement("span", _objectSpread({}, {
       className: "musaex-igfled"
-    }), suffix, hasChildren && isInline && ( /*#__PURE__*/React.createElement("span", _objectSpread({}, styled), /*#__PURE__*/React.createElement(KeyboardArrowUp, {
+    }), suffix, hasChildren && isInline && (/*#__PURE__*/React.createElement("span", _objectSpread({}, styled), /*#__PURE__*/React.createElement(KeyboardArrowUp, {
       size: 16
     }))));
   }, [hasChildren, isExpanded, suffix, isInline]);
@@ -104,8 +104,8 @@ var useContextValue = function useContextValue(_ref2) {
     return new Set(_expandedKeys);
   }, [_expandedKeys]);
   /// click handler
-  var click = useCallback( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(key) {
+  var click = useCallback(/*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(key) {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:

package/dist/components/menu/item.js

@@ -9,9 +9,8 @@ import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modu
 import { spacing } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
-import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
-import { useHover, useEvent } from '@aiszlab/relax';
+import { useHover, useEvent, clsx } from '@aiszlab/relax';
 import Popper from '../popper/popper.js';
 import { useLazyBoolean } from '../../hooks/use-lazy-boolean.js';
 import { ComponentToken } from '../../utils/component-token.js';
@@ -280,7 +279,7 @@ var Item = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: clsx(classNames[MenuClassToken.Item], className, styled.item.className),
     style: styled.item.style,
     onClick: click
-  }, hoverProps), _children.prefix, _children.label, _children.suffix), isInline && props$1.children, !isInline && !!props$1.children && ( /*#__PURE__*/React.createElement(Popper, _objectSpread({
+  }, hoverProps), _children.prefix, _children.label, _children.suffix), isInline && props$1.children, !isInline && !!props$1.children && (/*#__PURE__*/React.createElement(Popper, _objectSpread({
     trigger: itemRef.current,
     open: isOpen,
     placement: mode === "vertical" ? "top-start" : "bottom-start"

package/dist/components/menu/menu.js

@@ -2,12 +2,11 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React, { forwardRef, useImperativeHandle } from 'react';
 import Context from './context.js';
-import { useScrollable } from '@aiszlab/relax';
+import { useScrollable, clsx } from '@aiszlab/relax';
 import { useScrollOrientation, useContextValue } from './hooks.js';
 import Group from './group.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { MenuClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
 import { ComponentToken } from '../../utils/component-token.js';
 
 /**

package/dist/components/notification/hooks.js

@@ -25,8 +25,8 @@ var useNotification = function useNotification() {
       ref: ref
     });
   }, [notifier]);
-  var open = useEvent( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(config) {
+  var open = useEvent(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(config) {
       var _notifier$current, _config$key, _config$placement;
       var _notifier, key;
       return _regeneratorRuntime().wrap(function _callee$(_context) {

package/dist/components/notification/notification.js

@@ -6,10 +6,9 @@ import React, { forwardRef, useEffect, createElement } from 'react';
 import { usePresence, useAnimate } from 'framer-motion';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
-import { useRefs, useTimeout } from '@aiszlab/relax';
+import { useRefs, useTimeout, clsx } from '@aiszlab/relax';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { NotificationClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
 import Button from '../button/button.js';
 import { typography } from '../theme/theme.js';
 import { ComponentToken } from '../../utils/component-token.js';
@@ -195,7 +194,7 @@ var Notification = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var classNames = useClassNames(ComponentToken.Notification);
   var notificationRef = useRefs(scope, ref);
   // after duration, `Notification` will auto destroy
-  useTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  useTimeout(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -255,16 +254,16 @@ var Notification = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: clsx(classNames[NotificationClassToken.Notification], styled.notification.className),
     style: styled.notification.style,
     ref: notificationRef
-  }, LEADINGS.has(type) && ( /*#__PURE__*/React.createElement("div", {
+  }, LEADINGS.has(type) && (/*#__PURE__*/React.createElement("div", {
     className: styled.leading.className,
     style: styled.leading.style
-  }, /*#__PURE__*/createElement(LEADINGS.get(type)))), !!title && ( /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/createElement(LEADINGS.get(type)))), !!title && (/*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[NotificationClassToken.Title], styled.title.className),
     style: styled.title.style
   }, title)), /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[NotificationClassToken.Description], styled.description.className),
     style: styled.description.style
-  }, description), closable && ( /*#__PURE__*/React.createElement(Button, {
+  }, description), closable && (/*#__PURE__*/React.createElement(Button, {
     className: clsx(classNames[NotificationClassToken.Closer], styled.closer.className),
     shape: "circular",
     variant: "text",

package/dist/components/notification/notifier.js

@@ -26,7 +26,7 @@ var Notifier = /*#__PURE__*/function () {
     value: function open(notification) {
       var _this = this;
       if (!_classPrivateFieldGet(_holder, this)) {
-        createRoot(document.createDocumentFragment()).render( /*#__PURE__*/React.createElement(Holder, {
+        createRoot(document.createDocumentFragment()).render(/*#__PURE__*/React.createElement(Holder, {
           ref: function ref(holder) {
             _classPrivateFieldSet(_holder, _this, holder);
           },
@@ -48,7 +48,7 @@ var Notification = Object.assign.apply(Object, [{
   }
 }].concat(_toConsumableArray(METHODS.map(function (type) {
   return _defineProperty({}, type, function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(notification) {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(notification) {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:

package/dist/components/pagination/pagination.js

@@ -5,10 +5,9 @@ import Item from './item.js';
 import Select from '../select/select.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { PaginationClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
 import { ComponentToken } from '../../utils/component-token.js';
 import { useLocale } from '../../locale/use-locale.js';
-import { toFunction } from '@aiszlab/relax';
+import { toFunction, clsx } from '@aiszlab/relax';
 
 var Pagination = function Pagination(_ref) {
   var _ref$total = _ref.total,

package/dist/components/picker/picker.js

@@ -3,13 +3,12 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { forwardRef, useRef, useCallback, useImperativeHandle } from 'react';
 import Popper from '../popper/popper.js';
-import { useBoolean, useEvent, useFocus } from '@aiszlab/relax';
+import { useBoolean, useEvent, useFocus, clsx } from '@aiszlab/relax';
 import { PickerClassToken } from '../../utils/class-name.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
-import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
 import { styles as styles$1 } from '../input/input.js';
 import { Context } from './context.js';

package/dist/components/popconfirm/popconfirm.js

@@ -4,10 +4,9 @@ import React, { useRef, cloneElement } from 'react';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { PopconfirmClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
 import Space from '../space/space.js';
 import Button from '../button/button.js';
-import { useBoolean, useRefs, useEvent, useClickAway } from '@aiszlab/relax';
+import { useBoolean, useRefs, useEvent, useClickAway, clsx } from '@aiszlab/relax';
 import Popper from '../popper/popper.js';
 import { typography } from '../theme/theme.js';
 import { useTheme } from '../theme/hooks.js';

package/dist/components/popover/hooks.js

@@ -17,7 +17,7 @@ var useIsOpen = function useIsOpen(popperRef) {
     turnOn = _useLazyBoolean2$.turnOn,
     _turnOff = _useLazyBoolean2$.turnOff,
     _disappear = _useLazyBoolean2$.disappear;
-  var turnOff = useEvent( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  var turnOff = useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     var _popperRef$current;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -38,7 +38,7 @@ var useIsOpen = function useIsOpen(popperRef) {
     }
     turnOn();
   }, [isOpen, turnOff, turnOn]);
-  var disappear = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+  var disappear = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
     var _popperRef$current2;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {

package/dist/components/popover/popover.js

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { toArray, useRefs, useEvent, useHover, chain, useFocus, useClickAway } from '@aiszlab/relax';
+import { toArray, useRefs, useEvent, useHover, chain, useFocus, useClickAway, clsx } from '@aiszlab/relax';
 import React, { forwardRef, useRef, useMemo, cloneElement, useCallback, useImperativeHandle } from 'react';
 import Popper from '../popper/popper.js';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
@@ -8,7 +8,6 @@ import { spacing } from '../theme/tokens.stylex.js';
 import { typography } from '../theme/theme.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { PopoverClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
 import { ComponentToken } from '../../utils/component-token.js';
 import { useIsOpen } from './hooks.js';
 
@@ -141,7 +140,7 @@ var Popover = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[PopoverClassToken.Popover], className, styled.popover.className),
     style: _objectSpread(_objectSpread({}, styled.popover.style), style)
-  }, !!title && ( /*#__PURE__*/React.createElement("div", {
+  }, !!title && (/*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[PopoverClassToken.Title], styled.title.className),
     style: styled.title.style
   }, title)), /*#__PURE__*/React.createElement("div", {

package/dist/components/popper/dropdown.js

@@ -4,8 +4,7 @@ import React, { forwardRef, useImperativeHandle } from 'react';
 import { PopperClassToken } from '../../utils/class-name.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import clsx from 'clsx';
-import { useRefs } from '@aiszlab/relax';
+import { useRefs, clsx } from '@aiszlab/relax';
 import { useFloating, useAnimation } from './hooks.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
@@ -124,7 +123,7 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, props$1), {}, {
     className: clsx(classNames[PopperClassToken.Dropdown], className, styled.dropdown.className),
     style: _objectSpread(_objectSpread({}, styled.dropdown.style), style)
-  }), children, arrowable && ( /*#__PURE__*/React.createElement("div", {
+  }), children, arrowable && (/*#__PURE__*/React.createElement("div", {
     ref: arrowRef,
     className: styled.arrow.className,
     style: styled.arrow.style

package/dist/components/popper/hooks.js

@@ -40,7 +40,7 @@ var useAnimation = function useAnimation(_ref2) {
     _useAnimate2 = _slicedToArray(_useAnimate, 2),
     animatableRef = _useAnimate2[0],
     animate = _useAnimate2[1];
-  var appear = useEvent( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  var appear = useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -61,7 +61,7 @@ var useAnimation = function useAnimation(_ref2) {
       }
     }, _callee);
   })));
-  var disappear = useEvent( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+  var disappear = useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:

package/dist/components/progress/linear.js

@@ -3,7 +3,7 @@ import React from 'react';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ProgressClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { useValue } from './hooks.js';

package/dist/components/quote/index.d.ts

@@ -0,0 +1,2 @@
+import Quote from "./quote";
+export { Quote };

package/dist/components/quote/quote.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { QuoteProps } from "./types";
+declare const Quote: ({ className, children, style }: QuoteProps) => React.JSX.Element;
+export default Quote;

package/dist/components/quote/quote.js

@@ -0,0 +1,29 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import React from 'react';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken } from '../../utils/component-token.js';
+import { clsx } from '@aiszlab/relax';
+import { QuoteClassToken } from '../../utils/class-name.js';
+import styles from './styles.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
+import { typography } from '../theme/theme.js';
+
+var Quote = function Quote(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    style = _ref.style;
+  var classNames = useClassNames(ComponentToken.Quote);
+  var theme = useTheme();
+  var styled = _stylex.props(styles.variables({
+    outlineColor: theme.colors[ColorToken.Outline]
+  }), styles.quote, typography.body.small);
+  return /*#__PURE__*/React.createElement("blockquote", {
+    className: clsx(classNames[QuoteClassToken.Quote], className, styled.className),
+    style: _objectSpread(_objectSpread({}, styled.style), style)
+  }, /*#__PURE__*/React.createElement("span", null, children));
+};
+var Quote$1 = Quote;
+
+export { Quote$1 as default };

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

@@ -0,0 +1,20 @@
+declare const styles: Readonly<{
+    readonly variables: (props: {
+        outlineColor: string;
+    }) => readonly [Readonly<{
+        "--outline-color": import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"--outline-color", string>;
+    }>, typeof import("@stylexjs/stylex/lib/StyleXTypes").StyleXInlineStylesTag];
+    readonly quote: Readonly<{
+        readonly position: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"position", "relative">;
+        readonly paddingInlineStart: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"paddingInlineStart", string>;
+        readonly "::before": import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"::before", {
+            readonly content: "\"\"";
+            readonly position: "absolute";
+            readonly insetBlock: 0;
+            readonly insetInlineStart: 0;
+            readonly width: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+            readonly backgroundColor: "var(--outline-color)";
+        }>;
+    }>;
+}>;
+export default styles;

package/dist/components/quote/styles.js

@@ -0,0 +1,29 @@
+var styles = {
+  variables: function variables(props) {
+    return [{
+      "--outline-color": "musaex-1x71zss",
+      $$css: true
+    }, {
+      "----outline-color": props.outlineColor != null ? props.outlineColor : "initial"
+    }];
+  },
+  quote: {
+    position: "musaex-1n2onr6",
+    paddingInlineStart: "musaex-7t49h1",
+    paddingLeft: null,
+    paddingRight: null,
+    "::before_content": "musaex-1cpjm7i",
+    "::before_position": "musaex-1hmns74",
+    "::before_insetBlock": "musaex-1nc033x",
+    "::before_top": null,
+    "::before_bottom": null,
+    "::before_insetInlineStart": "musaex-1682cnc",
+    "::before_left": null,
+    "::before_right": null,
+    "::before_width": "musaex-bv6p2w",
+    "::before_backgroundColor": "musaex-1xmraew",
+    $$css: true
+  }
+};
+
+export { styles as default };

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

@@ -0,0 +1,12 @@
+import { ComponentProps } from "../../types/element";
+/**
+ * @description
+ * quote props
+ */
+export type QuoteProps = ComponentProps & {
+    /**
+     * @description
+     * children
+     */
+    children?: string;
+};

package/dist/components/radio/radio.js

@@ -2,14 +2,13 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { useContext, useMemo, useCallback } from 'react';
 import Context from './context.js';
-import { useControlledState } from '@aiszlab/relax';
+import { useControlledState, clsx } from '@aiszlab/relax';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { RadioClassToken } from '../../utils/class-name.js';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { typography } from '../theme/theme.js';
-import clsx from 'clsx';
 import { ComponentToken } from '../../utils/component-token.js';
 
 var _excluded = ["children", "value", "checked", "disabled"];
@@ -231,7 +230,7 @@ var Radio = function Radio(_ref) {
     disabled: isDisabled,
     className: styled.trigger.className,
     style: styled.trigger.style
-  }), children && ( /*#__PURE__*/React.createElement("span", {
+  }), children && (/*#__PURE__*/React.createElement("span", {
     className: styled.label.className,
     style: styled.label.style
   }, children)));

package/dist/components/rate/rate.js

@@ -4,7 +4,7 @@ import React from 'react';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { RateClassToken } from '../../utils/class-name.js';
-import clsx from 'clsx';
+import { clsx } from '@aiszlab/relax';
 import { useValue, useHover } from './hooks.js';
 import Star from './star.js';
 import { ComponentToken } from '../../utils/component-token.js';

package/dist/components/rate/star.js

@@ -1,9 +1,8 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { createElement } from 'react';
-import { useEvent, useHover } from '@aiszlab/relax';
+import { useEvent, useHover, clsx } from '@aiszlab/relax';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import clsx from 'clsx';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { RateClassToken } from '../../utils/class-name.js';
 import { useTheme } from '../theme/hooks.js';