musae 0.3.3 → 0.3.5

package/dist/components/popper/hooks.mjs

@@ -1,11 +1,11 @@
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useCallback, useLayoutEffect, useRef, useMemo } from 'react';
+import { useRef, useEffect, useMemo } from 'react';
 import { useAnimate } from 'framer-motion';
 import { useEvent } from '@aiszlab/relax';
 import { useContainer } from '../../hooks/use-container.mjs';
-import { autoUpdate, computePosition, flip, offset, arrow, size } from '@floating-ui/dom';
+import { autoUpdate, computePosition, flip, shift, offset, arrow } from '@floating-ui/dom';
 
 /**
  * @description
@@ -28,132 +28,125 @@ var useOffsets = function useOffsets(_ref) {
 };
 /**
  * @description
- * use animation
+ * floating position
  */
-var useAnimation = function useAnimation(_ref2) {
+var useFloating = function useFloating(_ref2) {
   var open = _ref2.open,
-    disappearable = _ref2.disappearable,
+    _trigger = _ref2.trigger,
+    placement = _ref2.placement,
+    arrowable = _ref2.arrowable,
+    _offset = _ref2.offset,
     onEntered = _ref2.onEntered,
     onExit = _ref2.onExit,
-    onExited = _ref2.onExited;
+    onExited = _ref2.onExited,
+    disappearable = _ref2.disappearable;
   var _useAnimate = useAnimate(),
     _useAnimate2 = _slicedToArray(_useAnimate, 2),
-    animatableRef = _useAnimate2[0],
+    floatableRef = _useAnimate2[0],
     animate = _useAnimate2[1];
+  var arrowRef = useRef(null);
+  var _useContainer = useContainer({
+      container: _trigger,
+      useBody: false
+    }, [open]),
+    trigger = _useContainer.container;
+  var _isOpen = useRef(false);
+  // appear animation
+  // prevent open again when opened
+  // first remove `display: none` style
+  // then animate
   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:
-          animatableRef.current.style.display = "";
-          _context.next = 3;
-          return animate(animatableRef.current, {
-            opacity: 1,
-            transform: "scale(1, 1)"
+          if (!_isOpen.current) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return");
+        case 2:
+          _isOpen.current = true;
+          floatableRef.current.style.display = "unset";
+          _context.next = 6;
+          return animate(floatableRef.current, {
+            opacity: 1
           }, {
             duration: 0.2
           });
-        case 3:
-          _context.next = 5;
+        case 6:
+          _context.next = 8;
           return onEntered === null || onEntered === void 0 ? void 0 : onEntered();
-        case 5:
+        case 8:
         case "end":
           return _context.stop();
       }
     }, _callee);
   })));
+  // disappear animation
+  // prevent disappear again when disappeared
+  // when using force disappear, it will be forced to disappear
   var disappear = useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var force,
+      _args2 = arguments;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          _context2.next = 2;
-          return Promise.all([onExit === null || onExit === void 0 ? void 0 : onExit(), animate(animatableRef.current, {
-            opacity: 0,
-            transform: "scale(0, 0)"
+          force = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : false;
+          if (_isOpen.current) {
+            _context2.next = 3;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 3:
+          if (!(!force && !disappearable)) {
+            _context2.next = 5;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 5:
+          _isOpen.current = false;
+          _context2.next = 8;
+          return Promise.all([onExit === null || onExit === void 0 ? void 0 : onExit(), animate(floatableRef.current, {
+            opacity: 0
           }, {
             duration: 0.2
           }).then(function () {
-            if (!animatableRef.current) return;
-            animatableRef.current.style.display = "none";
+            floatableRef.current.style.display = "none";
           })]);
-        case 2:
-          _context2.next = 4;
+        case 8:
+          _context2.next = 10;
           return onExited === null || onExited === void 0 ? void 0 : onExited();
-        case 4:
+        case 10:
         case "end":
           return _context2.stop();
       }
     }, _callee2);
   })));
-  var _disappear = useCallback(function () {
-    if (!disappearable) return;
-    disappear();
-  }, [disappear, disappearable]);
-  useLayoutEffect(function () {
-    if (open) {
-      appear();
-      return;
-    }
-    _disappear();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
-  return {
-    animatableRef: animatableRef,
-    disappear: disappear
-  };
-};
-/**
- * @description
- * floating position
- */
-var useFloating = function useFloating(_ref5) {
-  var open = _ref5.open,
-    _trigger = _ref5.trigger,
-    placement = _ref5.placement,
-    arrowable = _ref5.arrowable,
-    _offset = _ref5.offset;
-  var floatableRef = useRef(null);
-  var _useContainer = useContainer({
-      container: _trigger,
-      useBody: false
-    }, [open]),
-    trigger = _useContainer.container;
-  var arrowRef = useRef(null);
   // memorized offsets
   var offsets = useOffsets({
     offset: _offset,
     arrowable: arrowable
   });
-  // auto update: calc trigger dom to get position
-  // if trigger changed, re-relate
-  useLayoutEffect(function () {
-    var floatable = floatableRef.current;
+  // position listener
+  var position = useEvent(function () {
     if (!trigger) return;
-    if (!floatable) return;
-    var cleanup = autoUpdate(trigger, floatable, function () {
-      computePosition(trigger, floatable, {
+    var cleanup = autoUpdate(trigger, floatableRef.current, function () {
+      computePosition(trigger, floatableRef.current, {
         placement: placement,
-        middleware: [flip(), offset(offsets), arrowable && !!arrowRef.current && arrow({
+        middleware: [flip(), shift(), offset(offsets), arrowable && !!arrowRef.current && arrow({
           element: arrowRef.current,
           padding: 16
-        }), size({
-          apply: function apply(_ref6) {
-            var availableWidth = _ref6.availableWidth,
-              availableHeight = _ref6.availableHeight,
-              floating = _ref6.elements.floating;
-            floating.style.maxWidth = "".concat(availableWidth, "px");
-            floating.style.maxHeight = "".concat(availableHeight, "px");
-          }
         })]
-      }).then(function (_ref7) {
-        var x = _ref7.x,
-          y = _ref7.y,
-          middlewareData = _ref7.middlewareData,
-          _placement = _ref7.placement;
+      }).then(function (_ref5) {
+        var x = _ref5.x,
+          y = _ref5.y,
+          middlewareData = _ref5.middlewareData,
+          _placement = _ref5.placement;
         var _placement$split = _placement.split("-"),
           _placement$split2 = _slicedToArray(_placement$split, 1),
           side = _placement$split2[0];
         // set float element styles
-        floatable.style.translate = "".concat(x, "px ").concat(y, "px");
+        floatableRef.current.style.translate = "".concat(x, "px ").concat(y, "px");
         // set arrow styles
         if (middlewareData.arrow && !!arrowRef.current) {
           var _middlewareData$arrow, _middlewareData$arrow2;
@@ -163,23 +156,30 @@ var useFloating = function useFloating(_ref5) {
           side === "top" && (arrowRef.current.style.insetBlockEnd = offsetY);
           side === "bottom" && (arrowRef.current.style.insetBlockStart = offsetY);
         }
+        // use appear animation
+        appear();
       })["catch"](function () {
         return null;
-      }).then(function () {
-        requestAnimationFrame(function () {
-          floatable.style.transitionProperty = "translate";
-          floatable.style.transitionDuration = "0.1s";
-        });
       });
     });
-    return function () {
-      cleanup();
-    };
-  }, [placement, trigger, offsets, arrowable]);
+    return cleanup;
+  });
+  // auto update: calc trigger dom to get position
+  // if trigger changed, re-relate
+  useEffect(function () {
+    if (open) {
+      var cleanup = position();
+      return function () {
+        cleanup === null || cleanup === void 0 || cleanup();
+      };
+    }
+    disappear();
+  }, [disappear, open, position]);
   return {
     floatableRef: floatableRef,
-    arrowRef: arrowRef
+    arrowRef: arrowRef,
+    disappear: disappear
   };
 };
 
-export { useAnimation, useFloating, useOffsets };
+export { useFloating, useOffsets };

package/dist/components/rich-text-editor/plugins/controlled-state/index.cjs

@@ -6,7 +6,6 @@ var relax = require('@aiszlab/relax');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var LexicalOnChangePlugin = require('@lexical/react/LexicalOnChangePlugin');
 var markdown = require('@lexical/markdown');
-var index = require('../markdown-shortcut/index.cjs');
 
 var ControlledStatePlugin = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var value = _ref.value,
@@ -36,7 +35,7 @@ var ControlledStatePlugin = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         onChange === null || onChange === void 0 || onChange(_value);
         return;
       }
-      var markdown$1 = markdown.$convertToMarkdownString(index.TRANSFORMERS, state._nodeMap.get("root"));
+      var markdown$1 = markdown.$convertToMarkdownString(markdown.TRANSFORMERS, state._nodeMap.get("root"));
       onChange === null || onChange === void 0 || onChange(markdown$1);
     });
   });

package/dist/components/rich-text-editor/plugins/controlled-state/index.mjs

@@ -3,8 +3,7 @@ import React, { forwardRef, useCallback, useImperativeHandle } from 'react';
 import { useUpdateEffect, isUndefined, useEvent } from '@aiszlab/relax';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
-import { $convertToMarkdownString } from '@lexical/markdown';
-import { TRANSFORMERS } from '../markdown-shortcut/index.mjs';
+import { $convertToMarkdownString, TRANSFORMERS } from '@lexical/markdown';
 
 var ControlledStatePlugin = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,

package/dist/components/rich-text-editor/plugins/markdown-shortcut/index.cjs

@@ -1,16 +1,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var LexicalMarkdownShortcutPlugin = require('@lexical/react/LexicalMarkdownShortcutPlugin');
 var React = require('react');
 var markdown = require('@lexical/markdown');
 
-var TRANSFORMERS = [].concat(_toConsumableArray(markdown.ELEMENT_TRANSFORMERS), _toConsumableArray(markdown.TEXT_FORMAT_TRANSFORMERS), _toConsumableArray(markdown.TEXT_MATCH_TRANSFORMERS));
 var MarkdownShortcutPlugin = function MarkdownShortcutPlugin() {
   return /*#__PURE__*/React.createElement(LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, {
-    transformers: TRANSFORMERS
+    transformers: markdown.TRANSFORMERS
   });
 };
 
-exports.TRANSFORMERS = TRANSFORMERS;
+Object.defineProperty(exports, "TRANSFORMERS", {
+    enumerable: true,
+    get: function () { return markdown.TRANSFORMERS; }
+});
 exports.default = MarkdownShortcutPlugin;

package/dist/components/rich-text-editor/plugins/markdown-shortcut/index.d.ts

@@ -1,6 +1,6 @@
-import { type Transformer } from "@lexical/markdown";
-export declare const TRANSFORMERS: Transformer[];
+import { TRANSFORMERS } from "@lexical/markdown";
 declare const MarkdownShortcutPlugin: () => import("react").FunctionComponentElement<Readonly<{
-    transformers?: Array<Transformer>;
+    transformers?: Array<import("@lexical/markdown").Transformer>;
 }>>;
 export default MarkdownShortcutPlugin;
+export { TRANSFORMERS };

package/dist/components/rich-text-editor/plugins/markdown-shortcut/index.mjs

@@ -1,13 +1,12 @@
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { MarkdownShortcutPlugin as MarkdownShortcutPlugin$1 } from '@lexical/react/LexicalMarkdownShortcutPlugin';
 import { createElement } from 'react';
-import { ELEMENT_TRANSFORMERS, TEXT_FORMAT_TRANSFORMERS, TEXT_MATCH_TRANSFORMERS } from '@lexical/markdown';
+import { TRANSFORMERS } from '@lexical/markdown';
+export { TRANSFORMERS } from '@lexical/markdown';
 
-var TRANSFORMERS = [].concat(_toConsumableArray(ELEMENT_TRANSFORMERS), _toConsumableArray(TEXT_FORMAT_TRANSFORMERS), _toConsumableArray(TEXT_MATCH_TRANSFORMERS));
 var MarkdownShortcutPlugin = function MarkdownShortcutPlugin() {
   return /*#__PURE__*/createElement(MarkdownShortcutPlugin$1, {
     transformers: TRANSFORMERS
   });
 };
 
-export { TRANSFORMERS, MarkdownShortcutPlugin as default };
+export { MarkdownShortcutPlugin as default };

package/dist/components/rich-text-editor/rich-text-editor.cjs

@@ -25,8 +25,8 @@ var list = require('@lexical/list');
 var LexicalHorizontalRuleNode = require('@lexical/react/LexicalHorizontalRuleNode');
 var code = require('@lexical/code');
 var checkableListItem = require('./nodes/checkable-list-item.cjs');
-var index$1 = require('./plugins/toolbar/index.cjs');
-var index = require('./plugins/markdown-shortcut/index.cjs');
+var index = require('./plugins/toolbar/index.cjs');
+var index$1 = require('./plugins/markdown-shortcut/index.cjs');
 var theme = require('../theme/theme.cjs');
 require('../checkbox/index.cjs');
 var markdown = require('@lexical/markdown');
@@ -178,7 +178,7 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         // different value usage, use different serialization
         switch (_use) {
           case "markdown":
-            markdown.$convertFromMarkdownString(defaultValue, index.TRANSFORMERS);
+            markdown.$convertFromMarkdownString(defaultValue, markdown.TRANSFORMERS, void 0, true);
             break;
           default:
             editor.setEditorState(editor.parseEditorState(defaultValue));
@@ -200,7 +200,7 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: relax.clsx(className, styled.shell.className),
     style: _objectSpread(_objectSpread({}, styled.shell.style), style)
-  }, !disabled && /*#__PURE__*/React.createElement(index$1.default, null), /*#__PURE__*/React.createElement(LexicalRichTextPlugin.RichTextPlugin, {
+  }, !disabled && /*#__PURE__*/React.createElement(index.default, null), /*#__PURE__*/React.createElement(LexicalRichTextPlugin.RichTextPlugin, {
     contentEditable: /*#__PURE__*/React.createElement(LexicalContentEditable.ContentEditable, {
       className: styled.editor.className,
       style: styled.editor.style,
@@ -210,7 +210,7 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       "aria-placeholder": (_props$ariaPlacehold = props["aria-placeholder"]) !== null && _props$ariaPlacehold !== void 0 ? _props$ariaPlacehold : ""
     }),
     ErrorBoundary: LexicalErrorBoundary.LexicalErrorBoundary
-  }), /*#__PURE__*/React.createElement(LexicalHistoryPlugin.HistoryPlugin, null), /*#__PURE__*/React.createElement(index.default, null), /*#__PURE__*/React.createElement(LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/React.createElement(LexicalClickableLinkPlugin.ClickableLinkPlugin, {
+  }), /*#__PURE__*/React.createElement(LexicalHistoryPlugin.HistoryPlugin, null), /*#__PURE__*/React.createElement(index$1.default, null), /*#__PURE__*/React.createElement(LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/React.createElement(LexicalClickableLinkPlugin.ClickableLinkPlugin, {
     disabled: !disabled,
     newTab: true
   }), /*#__PURE__*/React.createElement(LexicalListPlugin.ListPlugin, null), /*#__PURE__*/React.createElement(index$2.default, null), /*#__PURE__*/React.createElement(index$3.default, {

package/dist/components/rich-text-editor/rich-text-editor.mjs

@@ -24,10 +24,10 @@ import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
 import { CodeNode } from '@lexical/code';
 import { CheckableListItemNode, replacement } from './nodes/checkable-list-item.mjs';
 import ToolbarPlugin from './plugins/toolbar/index.mjs';
-import MarkdownShortcutPlugin, { TRANSFORMERS } from './plugins/markdown-shortcut/index.mjs';
+import MarkdownShortcutPlugin from './plugins/markdown-shortcut/index.mjs';
 import { typography } from '../theme/theme.mjs';
 import '../checkbox/index.mjs';
-import { $convertFromMarkdownString } from '@lexical/markdown';
+import { $convertFromMarkdownString, TRANSFORMERS } from '@lexical/markdown';
 import styles$1 from '../checkbox/styles.mjs';
 
 var _excluded = ["placeholder", "disabled", "defaultValue", "onChange", "value", "className", "style"];
@@ -176,7 +176,7 @@ var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
         // different value usage, use different serialization
         switch (_use) {
           case "markdown":
-            $convertFromMarkdownString(defaultValue, TRANSFORMERS);
+            $convertFromMarkdownString(defaultValue, TRANSFORMERS, void 0, true);
             break;
           default:
             editor.setEditorState(editor.parseEditorState(defaultValue));

package/dist/components/select/utils.cjs

@@ -11,10 +11,8 @@ var relax = require('@aiszlab/relax');
 var toValues = function toValues(valueOrValues) {
   // empty
   if (relax.isVoid(valueOrValues)) return [];
-  // already array
-  if (relax.isArray(valueOrValues)) return valueOrValues;
   // convert to array
-  return [valueOrValues];
+  return relax.toArray(valueOrValues);
 };
 /**
  * @description

package/dist/components/select/utils.d.ts

@@ -5,7 +5,7 @@ import type { MenuItem } from "musae/types/menu";
  * @description
  * convert to value array
  */
-export declare const toValues: (valueOrValues?: ValueOrValues) => Value[];
+export declare const toValues: (valueOrValues?: ValueOrValues) => (string | number | bigint | Pick<Option, "value" | "label">)[];
 /**
  * @description
  * convert to key

package/dist/components/select/utils.mjs

@@ -2,7 +2,7 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _typeof from '@babel/runtime/helpers/typeof';
-import { isVoid, isArray } from '@aiszlab/relax';
+import { isVoid, toArray } from '@aiszlab/relax';
 
 /**
  * @description
@@ -11,10 +11,8 @@ import { isVoid, isArray } from '@aiszlab/relax';
 var toValues = function toValues(valueOrValues) {
   // empty
   if (isVoid(valueOrValues)) return [];
-  // already array
-  if (isArray(valueOrValues)) return valueOrValues;
   // convert to array
-  return [valueOrValues];
+  return toArray(valueOrValues);
 };
 /**
  * @description

package/dist/components/skeleton/skeleton.cjs

@@ -9,7 +9,7 @@ var relax = require('@aiszlab/relax');
 var tokens_stylex = require('../theme/tokens.stylex.cjs');
 var componentToken = require('../../utils/component-token.cjs');
 var hooks = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.cjs');
+var color = require('@aiszlab/fuzzy/color');
 
 var styles = {
   variables: function variables(props) {
@@ -22,48 +22,6 @@ var styles = {
       "----lighter-shadow": props.lighterShadow != null ? props.lighterShadow : "initial"
     }];
   },
-  title: {
-    width: "musaex-1fvqbsf",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-ok3b7d",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
-  },
-  button: {
-    width: "musaex-1lwsb27",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-z7qqyb",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
-  },
-  avatar: {
-    width: "musaex-rdd3y",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-z7qqyb",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
-  },
   skeleton: {
     background: "musaex-uwpeme",
     backgroundAttachment: null,
@@ -99,16 +57,15 @@ var styles = {
 };
 var Skeleton = function Skeleton(_ref) {
   var _ref$animation = _ref.animation,
-    animation = _ref$animation === void 0 ? false : _ref$animation,
-    variant = _ref.variant,
+    animation = _ref$animation === void 0 ? true : _ref$animation,
     className$1 = _ref.className,
     style = _ref.style;
   var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Skeleton);
   var theme = hooks.useTheme();
   var styled = stylex.default.props(styles.variables({
-    shadow: colors.toRgba(theme.colors.shadow, tokens_stylex.OPACITY.thin),
-    lighterShadow: colors.toRgba(theme.colors.shadow, tokens_stylex.OPACITY.thick)
-  }), !!variant && styles[variant], animation && styles.animation);
+    shadow: color.hexToRgba(theme.colors.shadow, tokens_stylex.OPACITY.thin),
+    lighterShadow: color.hexToRgba(theme.colors.shadow, tokens_stylex.OPACITY.thick)
+  }), styles.skeleton, animation && styles.animation);
   return /*#__PURE__*/React.createElement("div", {
     className: relax.clsx(classNames[className.SkeletonClassToken.Skeleton], className$1, styled.className),
     style: _objectSpread(_objectSpread({}, styled.style), style)

package/dist/components/skeleton/skeleton.d.ts

@@ -1,4 +1,4 @@
 import type { SkeletonProps } from "musae/types/skeleton";
 import React from "react";
-declare const Skeleton: ({ animation, variant, className, style }: SkeletonProps) => React.JSX.Element;
+declare const Skeleton: ({ animation, className, style }: SkeletonProps) => React.JSX.Element;
 export default Skeleton;

package/dist/components/skeleton/skeleton.mjs

@@ -7,7 +7,7 @@ import { clsx } from '@aiszlab/relax';
 import { OPACITY } from '../theme/tokens.stylex.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { toRgba } from '../../utils/colors.mjs';
+import { hexToRgba } from '@aiszlab/fuzzy/color';
 
 var styles = {
   variables: function variables(props) {
@@ -20,48 +20,6 @@ var styles = {
       "----lighter-shadow": props.lighterShadow != null ? props.lighterShadow : "initial"
     }];
   },
-  title: {
-    width: "musaex-1fvqbsf",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-ok3b7d",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
-  },
-  button: {
-    width: "musaex-1lwsb27",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-z7qqyb",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
-  },
-  avatar: {
-    width: "musaex-rdd3y",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-z7qqyb",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
-  },
   skeleton: {
     background: "musaex-uwpeme",
     backgroundAttachment: null,
@@ -97,16 +55,15 @@ var styles = {
 };
 var Skeleton = function Skeleton(_ref) {
   var _ref$animation = _ref.animation,
-    animation = _ref$animation === void 0 ? false : _ref$animation,
-    variant = _ref.variant,
+    animation = _ref$animation === void 0 ? true : _ref$animation,
     className = _ref.className,
     style = _ref.style;
   var classNames = useClassNames(ComponentToken.Skeleton);
   var theme = useTheme();
   var styled = _stylex.props(styles.variables({
-    shadow: toRgba(theme.colors.shadow, OPACITY.thin),
-    lighterShadow: toRgba(theme.colors.shadow, OPACITY.thick)
-  }), !!variant && styles[variant], animation && styles.animation);
+    shadow: hexToRgba(theme.colors.shadow, OPACITY.thin),
+    lighterShadow: hexToRgba(theme.colors.shadow, OPACITY.thick)
+  }), styles.skeleton, animation && styles.animation);
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[SkeletonClassToken.Skeleton], className, styled.className),
     style: _objectSpread(_objectSpread({}, styled.style), style)

package/dist/components/steps/context.d.ts

@@ -1,2 +1,2 @@
-import type { ContextValue } from "./types";
+import type { ContextValue } from "musae/types/steps";
 export declare const Context: import("react").Context<ContextValue>;

package/dist/components/steps/item.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { StepItemProps } from "./types";
+import type { StepItemProps } from "musae/types/steps";
 declare const Item: ({ leading, title, description, value }: StepItemProps) => React.JSX.Element;
 export default Item;

package/dist/components/steps/steps.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { StepsProps } from "./types";
+import type { StepsProps } from "musae/types/steps";
 /**
  * @description
  * `Steps` component