musae 1.0.27-beta.2 → 1.0.27-beta.21

package/dist/components/icon/icons/content/index.mjs

@@ -3,3 +3,5 @@ export { default as Redo } from './redo.mjs';
 export { default as Undo } from './undo.mjs';
 export { default as LinkOff } from './link-off.mjs';
 export { default as FontDownload } from './font-download.mjs';
+export { default as Remove } from './remove.mjs';
+export { default as Add } from './add.mjs';

package/dist/components/icon/icons/content/remove.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var hoc = require('../../hoc.cjs');
+
+var Remove = hoc.withIcon(function (_ref) {
+  var size = _ref.size;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19 13H5V11H19V13Z",
+    fill: "currentColor"
+  }));
+});
+
+exports.default = Remove;

package/dist/components/icon/icons/content/remove.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Remove: (props: Omit<import("../../../../types/icon").IconProps, "as">) => React.FunctionComponentElement<import("../../../../types/icon").IconProps>;
+export default Remove;

package/dist/components/icon/icons/content/remove.mjs

@@ -0,0 +1,18 @@
+import React from 'react';
+import { withIcon } from '../../hoc.mjs';
+
+var Remove = withIcon(function (_ref) {
+  var size = _ref.size;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19 13H5V11H19V13Z",
+    fill: "currentColor"
+  }));
+});
+
+export { Remove as default };

package/dist/components/icon/icons/index.cjs

@@ -1,10 +1,12 @@
 'use strict';
 
 var accountCircle = require('./action/account-circle.cjs');
+var add = require('./content/add.cjs');
 var addAlert = require('./alert/add-alert.cjs');
 var attchFile = require('./editor/attch-file.cjs');
 var autoDelete = require('./alert/auto-delete.cjs');
 var bedtime = require('./image/bedtime.cjs');
+var calendarToday = require('./action/calendar-today.cjs');
 var cancel = require('./navigation/cancel.cjs');
 var check = require('./navigation/check.cjs');
 var checkCircle = require('./action/check-circle.cjs');
@@ -37,6 +39,7 @@ var keyboardDoubleArrowRight = require('./hardware/keyboard-double-arrow-right.c
 var lightMode = require('./device/light-mode.cjs');
 var linkOff = require('./content/link-off.cjs');
 var loading = require('./mock/loading.cjs');
+var locationOn = require('./communication/location-on.cjs');
 var logout = require('./action/logout.cjs');
 var looksFive = require('./image/looks-five.cjs');
 var looksFour = require('./image/looks-four.cjs');
@@ -52,10 +55,12 @@ var notificationImportant = require('./alert/notification-important.cjs');
 var openInNew = require('./action/open-in-new.cjs');
 var preview = require('./action/preview.cjs');
 var redo = require('./content/redo.cjs');
+var remove = require('./content/remove.cjs');
 var rocketLaunch = require('./action/rocket-launch.cjs');
 var rotateLeft = require('./image/rotate-left.cjs');
 var rotateRight = require('./image/rotate-right.cjs');
 var schedule = require('./action/schedule.cjs');
+var share = require('./social/share.cjs');
 var smartToy = require('./home/smart-toy.cjs');
 var star = require('./toggle/star.cjs');
 var starHalf = require('./toggle/star-half.cjs');
@@ -81,10 +86,12 @@ var zoomOut = require('./action/zoom-out.cjs');
 
 
 exports.AccountCircle = accountCircle.default;
+exports.Add = add.default;
 exports.AddAlert = addAlert.default;
 exports.AttachFile = attchFile.default;
 exports.AutoDelete = autoDelete.default;
 exports.Bedtime = bedtime.default;
+exports.CalendarToday = calendarToday.default;
 exports.Cancel = cancel.default;
 exports.Check = check.default;
 exports.CheckCircle = checkCircle.default;
@@ -117,6 +124,7 @@ exports.KeyboardDoubleArrowRight = keyboardDoubleArrowRight.default;
 exports.LightMode = lightMode.default;
 exports.LinkOff = linkOff.default;
 exports.Loading = loading.default;
+exports.LocationOn = locationOn.default;
 exports.Logout = logout.default;
 exports.LooksFive = looksFive.default;
 exports.LooksFour = looksFour.default;
@@ -132,10 +140,12 @@ exports.NotificationImportant = notificationImportant.default;
 exports.OpenInNew = openInNew.default;
 exports.Preview = preview.default;
 exports.Redo = redo.default;
+exports.Remove = remove.default;
 exports.RocketLaunch = rocketLaunch.default;
 exports.RotateLeft = rotateLeft.default;
 exports.RotateRight = rotateRight.default;
 exports.Schedule = schedule.default;
+exports.Share = share.default;
 exports.SmartToy = smartToy.default;
 exports.Star = star.default;
 exports.StarHalf = starHalf.default;

package/dist/components/icon/icons/index.d.ts

@@ -10,3 +10,5 @@ export * from "./mock";
 export * from "./home";
 export * from "./device";
 export * from "./file";
+export * from "./social";
+export * from "./communication";

package/dist/components/icon/icons/index.mjs

@@ -1,8 +1,10 @@
 export { default as AccountCircle } from './action/account-circle.mjs';
+export { default as Add } from './content/add.mjs';
 export { default as AddAlert } from './alert/add-alert.mjs';
 export { default as AttachFile } from './editor/attch-file.mjs';
 export { default as AutoDelete } from './alert/auto-delete.mjs';
 export { default as Bedtime } from './image/bedtime.mjs';
+export { default as CalendarToday } from './action/calendar-today.mjs';
 export { default as Cancel } from './navigation/cancel.mjs';
 export { default as Check } from './navigation/check.mjs';
 export { default as CheckCircle } from './action/check-circle.mjs';
@@ -35,6 +37,7 @@ export { default as KeyboardDoubleArrowRight } from './hardware/keyboard-double-
 export { default as LightMode } from './device/light-mode.mjs';
 export { default as LinkOff } from './content/link-off.mjs';
 export { default as Loading } from './mock/loading.mjs';
+export { default as LocationOn } from './communication/location-on.mjs';
 export { default as Logout } from './action/logout.mjs';
 export { default as LooksFive } from './image/looks-five.mjs';
 export { default as LooksFour } from './image/looks-four.mjs';
@@ -50,10 +53,12 @@ export { default as NotificationImportant } from './alert/notification-important
 export { default as OpenInNew } from './action/open-in-new.mjs';
 export { default as Preview } from './action/preview.mjs';
 export { default as Redo } from './content/redo.mjs';
+export { default as Remove } from './content/remove.mjs';
 export { default as RocketLaunch } from './action/rocket-launch.mjs';
 export { default as RotateLeft } from './image/rotate-left.mjs';
 export { default as RotateRight } from './image/rotate-right.mjs';
 export { default as Schedule } from './action/schedule.mjs';
+export { default as Share } from './social/share.mjs';
 export { default as SmartToy } from './home/smart-toy.mjs';
 export { default as Star } from './toggle/star.mjs';
 export { default as StarHalf } from './toggle/star-half.mjs';

package/dist/components/icon/icons/social/index.d.ts

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

package/dist/components/icon/icons/social/share.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var hoc = require('../../hoc.cjs');
+
+var Share = hoc.withIcon(function (_ref) {
+  var size = _ref.size;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M18 16.12C17.24 16.12 16.56 16.42 16.04 16.89L8.91 12.74C8.96 12.51 9 12.28 9 12.04C9 11.8 8.96 11.57 8.91 11.34L15.96 7.23004C16.5 7.73004 17.21 8.04004 18 8.04004C19.66 8.04004 21 6.70004 21 5.04004C21 3.38004 19.66 2.04004 18 2.04004C16.34 2.04004 15 3.38004 15 5.04004C15 5.28004 15.04 5.51004 15.09 5.74004L8.04 9.85004C7.5 9.35004 6.79 9.04004 6 9.04004C4.34 9.04004 3 10.38 3 12.04C3 13.7 4.34 15.04 6 15.04C6.79 15.04 7.5 14.73 8.04 14.23L15.16 18.39C15.11 18.6 15.08 18.82 15.08 19.04C15.08 20.65 16.39 21.96 18 21.96C19.61 21.96 20.92 20.65 20.92 19.04C20.92 17.43 19.61 16.12 18 16.12ZM18 4.04004C18.55 4.04004 19 4.49004 19 5.04004C19 5.59004 18.55 6.04004 18 6.04004C17.45 6.04004 17 5.59004 17 5.04004C17 4.49004 17.45 4.04004 18 4.04004ZM6 13.04C5.45 13.04 5 12.59 5 12.04C5 11.49 5.45 11.04 6 11.04C6.55 11.04 7 11.49 7 12.04C7 12.59 6.55 13.04 6 13.04ZM18 20.06C17.45 20.06 17 19.61 17 19.06C17 18.51 17.45 18.06 18 18.06C18.55 18.06 19 18.51 19 19.06C19 19.61 18.55 20.06 18 20.06Z",
+    fill: "currentColor"
+  }));
+});
+
+exports.default = Share;

package/dist/components/icon/icons/social/share.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Share: (props: Omit<import("../../../../types/icon").IconProps, "as">) => React.FunctionComponentElement<import("../../../../types/icon").IconProps>;
+export default Share;

package/dist/components/icon/icons/social/share.mjs

@@ -0,0 +1,18 @@
+import React from 'react';
+import { withIcon } from '../../hoc.mjs';
+
+var Share = withIcon(function (_ref) {
+  var size = _ref.size;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M18 16.12C17.24 16.12 16.56 16.42 16.04 16.89L8.91 12.74C8.96 12.51 9 12.28 9 12.04C9 11.8 8.96 11.57 8.91 11.34L15.96 7.23004C16.5 7.73004 17.21 8.04004 18 8.04004C19.66 8.04004 21 6.70004 21 5.04004C21 3.38004 19.66 2.04004 18 2.04004C16.34 2.04004 15 3.38004 15 5.04004C15 5.28004 15.04 5.51004 15.09 5.74004L8.04 9.85004C7.5 9.35004 6.79 9.04004 6 9.04004C4.34 9.04004 3 10.38 3 12.04C3 13.7 4.34 15.04 6 15.04C6.79 15.04 7.5 14.73 8.04 14.23L15.16 18.39C15.11 18.6 15.08 18.82 15.08 19.04C15.08 20.65 16.39 21.96 18 21.96C19.61 21.96 20.92 20.65 20.92 19.04C20.92 17.43 19.61 16.12 18 16.12ZM18 4.04004C18.55 4.04004 19 4.49004 19 5.04004C19 5.59004 18.55 6.04004 18 6.04004C17.45 6.04004 17 5.59004 17 5.04004C17 4.49004 17.45 4.04004 18 4.04004ZM6 13.04C5.45 13.04 5 12.59 5 12.04C5 11.49 5.45 11.04 6 11.04C6.55 11.04 7 11.49 7 12.04C7 12.59 6.55 13.04 6 13.04ZM18 20.06C17.45 20.06 17 19.61 17 19.06C17 18.51 17.45 18.06 18 18.06C18.55 18.06 19 18.51 19 19.06C19 19.61 18.55 20.06 18 20.06Z",
+    fill: "currentColor"
+  }));
+});
+
+export { Share as default };

package/dist/components/progress/linear.cjs

@@ -25,13 +25,13 @@ var Linear = function Linear(_ref) {
       className: "musaex-92755x musaex-rntz3j musaex-1ncffr6 musaex-shxsqp"
     },
     segment: {
-      className: "musaex-k64pxh musaex-qg7gut musaex-shxsqp musaex-19fix8x"
+      className: "musaex-1bl4301 musaex-qg7gut musaex-shxsqp musaex-19fix8x"
     }
   };
   return /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.progress, className$1, styled.progress.className),
     style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, styled.progress.style), style), _themeColorVars), {}, {
-      "--flex": value
+      "--width": value + "%"
     })
   }, /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.segment, styled.segment.className),

package/dist/components/progress/linear.mjs

@@ -21,13 +21,13 @@ var Linear = function Linear(_ref) {
       className: "musaex-92755x musaex-rntz3j musaex-1ncffr6 musaex-shxsqp"
     },
     segment: {
-      className: "musaex-k64pxh musaex-qg7gut musaex-shxsqp musaex-19fix8x"
+      className: "musaex-1bl4301 musaex-qg7gut musaex-shxsqp musaex-19fix8x"
     }
   };
   return /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.progress, className, styled.progress.className),
     style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, styled.progress.style), style), _themeColorVars), {}, {
-      "--flex": value
+      "--width": value + "%"
     })
   }, /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.segment, styled.segment.className),

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

@@ -17,21 +17,7 @@ var ControlledStatePlugin = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  var _useControlledState = relax.useControlledState(value, {
-      /**
-       * @description
-       * 监听受控值变化
-       * 发生值变化时，更新内部状态和编辑器状态
-       */
-      onChange: function onChange(nextValue) {
-        _setEditorState(nextValue);
-      }
-    }),
-    _useControlledState2 = _slicedToArray(_useControlledState, 2),
-    _setValue = _useControlledState2[1];
-  /**
-   * @description 根据数据，设置编辑器状态
-   */
+  // 更新编辑器状态
   var _setEditorState = relax.useEvent(function (updatedValue) {
     if (use === "markdown") {
       editor.update(function () {
@@ -39,17 +25,17 @@ var ControlledStatePlugin = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       });
       return;
     }
-    try {
-      var editorState = editor.parseEditorState(updatedValue);
-      editor.setEditorState(editorState);
-    } catch (error) {
-      console.error(error);
-    }
+    var editorState = editor.parseEditorState(updatedValue);
+    editor.setEditorState(editorState);
   });
-  /**
-   * @description
-   * 富文本组件发生数据变更时，同步更新受控数据
-   */
+  var _useControlledState = relax.useControlledState(value),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    _value = _useControlledState2[0],
+    _setValue = _useControlledState2[1];
+  relax.useUpdateEffect(function () {
+    _setEditorState(_value);
+  }, [_value]);
+  // 富文本组件发生数据变更时，同步更新受控数据
   var change = relax.useEvent(function (state, editor) {
     editor.read(function () {
       if (use === "serialized") {
@@ -65,7 +51,7 @@ var ControlledStatePlugin = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   });
   React.useImperativeHandle(ref, function () {
     return {
-      setValue: _setEditorState
+      setValue: _setValue
     };
   });
   return /*#__PURE__*/React.createElement(LexicalOnChangePlugin.OnChangePlugin, {

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

@@ -1,6 +1,6 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { forwardRef, useImperativeHandle } from 'react';
-import { useControlledState, useEvent } from '@aiszlab/relax';
+import { useEvent, useControlledState, useUpdateEffect } from '@aiszlab/relax';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { $convertFromMarkdownString, $convertToMarkdownString } from '@lexical/markdown';
@@ -13,21 +13,7 @@ var ControlledStatePlugin = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  var _useControlledState = useControlledState(value, {
-      /**
-       * @description
-       * 监听受控值变化
-       * 发生值变化时，更新内部状态和编辑器状态
-       */
-      onChange: function onChange(nextValue) {
-        _setEditorState(nextValue);
-      }
-    }),
-    _useControlledState2 = _slicedToArray(_useControlledState, 2),
-    _setValue = _useControlledState2[1];
-  /**
-   * @description 根据数据，设置编辑器状态
-   */
+  // 更新编辑器状态
   var _setEditorState = useEvent(function (updatedValue) {
     if (use === "markdown") {
       editor.update(function () {
@@ -35,17 +21,17 @@ var ControlledStatePlugin = /*#__PURE__*/forwardRef(function (_ref, ref) {
       });
       return;
     }
-    try {
-      var editorState = editor.parseEditorState(updatedValue);
-      editor.setEditorState(editorState);
-    } catch (error) {
-      console.error(error);
-    }
+    var editorState = editor.parseEditorState(updatedValue);
+    editor.setEditorState(editorState);
   });
-  /**
-   * @description
-   * 富文本组件发生数据变更时，同步更新受控数据
-   */
+  var _useControlledState = useControlledState(value),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    _value = _useControlledState2[0],
+    _setValue = _useControlledState2[1];
+  useUpdateEffect(function () {
+    _setEditorState(_value);
+  }, [_value]);
+  // 富文本组件发生数据变更时，同步更新受控数据
   var change = useEvent(function (state, editor) {
     editor.read(function () {
       if (use === "serialized") {
@@ -61,7 +47,7 @@ var ControlledStatePlugin = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
   useImperativeHandle(ref, function () {
     return {
-      setValue: _setEditorState
+      setValue: _setValue
     };
   });
   return /*#__PURE__*/React.createElement(OnChangePlugin, {

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

@@ -21,7 +21,6 @@ var relax = require('@aiszlab/relax');
 var hooks = require('../message/hooks.cjs');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.17.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var className = require('@aiszlab/relax/class-name');
-var hooks$1 = require('../theme/hooks.cjs');
 var index$1 = require('./plugins/toolbar/index.cjs');
 var index = require('./plugins/markdown-shortcut/index.cjs');
 var markdown = require('@lexical/markdown');
@@ -29,6 +28,7 @@ var context = require('./context.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var utils = require('./utils.cjs');
 var theme = require('../theme/theme.cjs');
+var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
 
 var _excluded = ["placeholder", "disabled", "defaultValue", "onChange", "value", "className", "style", "use"];
 var styles = {
@@ -62,10 +62,10 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useMessage2 = _slicedToArray(_useMessage, 2),
     messager = _useMessage2[0],
     holder = _useMessage2[1];
-  var theme$1 = hooks$1.useTheme();
   var controlledStatePluginRef = React.useRef(null);
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
   var defaultValue = value !== null && value !== void 0 ? value : _defaultValue;
+  var themeColorVars = useThemeColorVars.useThemeColorVars(["primary", "on-primary", "on-surface", "surface-container", "surface-container-highest", "outline", "outline-variant"]);
   var styled = {
     editor: stylex.props(styles.editor, disabled && styles.disabled, theme.$body.medium),
     textarea: {
@@ -115,15 +115,7 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     initialConfig: initialConfig
   }, /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames["default"], className$1, styled.editor.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.editor.style), style), {}, {
-      "--color-primary": theme$1.colors.primary,
-      "--color-on-primary": theme$1.colors["on-primary"],
-      "--color-on-surface": theme$1.colors["on-surface"],
-      "--color-surface-container": theme$1.colors["surface-container"],
-      "--color-surface-container-highest": theme$1.colors["surface-container-highest"],
-      "--color-outline": theme$1.colors.outline,
-      "--color-outline-variant": theme$1.colors["outline-variant"]
-    })
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.editor.style), style), themeColorVars)
   }, /*#__PURE__*/React.createElement(index.default, null), !disabled && /*#__PURE__*/React.createElement(index$1.default, null), /*#__PURE__*/React.createElement(LexicalRichTextPlugin.RichTextPlugin, {
     contentEditable: /*#__PURE__*/React.createElement(LexicalContentEditable.ContentEditable, {
       className: className.stringify(classNames.textarea, styled.textarea.className),

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

@@ -17,7 +17,6 @@ import { useIdentity, useDefault } from '@aiszlab/relax';
 import { useMessage } from '../message/hooks.mjs';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.17.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
-import { useTheme } from '../theme/hooks.mjs';
 import ToolbarPlugin from './plugins/toolbar/index.mjs';
 import MarkdownShortcutPlugin, { TRANSFORMERS } from './plugins/markdown-shortcut/index.mjs';
 import { $convertFromMarkdownString } from '@lexical/markdown';
@@ -25,6 +24,7 @@ import { CLASS_NAMES, Context } from './context.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { usingEditor } from './utils.mjs';
 import { $body } from '../theme/theme.mjs';
+import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
 
 var _excluded = ["placeholder", "disabled", "defaultValue", "onChange", "value", "className", "style", "use"];
 var styles = {
@@ -58,10 +58,10 @@ var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useMessage2 = _slicedToArray(_useMessage, 2),
     messager = _useMessage2[0],
     holder = _useMessage2[1];
-  var theme = useTheme();
   var controlledStatePluginRef = useRef(null);
   var classNames = useClassNames(CLASS_NAMES);
   var defaultValue = value !== null && value !== void 0 ? value : _defaultValue;
+  var themeColorVars = useThemeColorVars(["primary", "on-primary", "on-surface", "surface-container", "surface-container-highest", "outline", "outline-variant"]);
   var styled = {
     editor: props(styles.editor, disabled && styles.disabled, $body.medium),
     textarea: {
@@ -111,15 +111,7 @@ var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
     initialConfig: initialConfig
   }, /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames["default"], className, styled.editor.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.editor.style), style), {}, {
-      "--color-primary": theme.colors.primary,
-      "--color-on-primary": theme.colors["on-primary"],
-      "--color-on-surface": theme.colors["on-surface"],
-      "--color-surface-container": theme.colors["surface-container"],
-      "--color-surface-container-highest": theme.colors["surface-container-highest"],
-      "--color-outline": theme.colors.outline,
-      "--color-outline-variant": theme.colors["outline-variant"]
-    })
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.editor.style), style), themeColorVars)
   }, /*#__PURE__*/React.createElement(MarkdownShortcutPlugin, null), !disabled && /*#__PURE__*/React.createElement(ToolbarPlugin, null), /*#__PURE__*/React.createElement(RichTextPlugin, {
     contentEditable: /*#__PURE__*/React.createElement(ContentEditable, {
       className: stringify(classNames.textarea, styled.textarea.className),

package/dist/components/tabs/context.cjs

@@ -16,10 +16,7 @@ var CLASS_NAMES = {
   panels: "tabs__panels",
   panel: "tabs__panel"
 };
-var Context = /*#__PURE__*/React.createContext({
-  items: [],
-  classNames: CLASS_NAMES
-});
+var Context = /*#__PURE__*/React.createContext(null);
 
 exports.CLASS_NAMES = CLASS_NAMES;
 exports.Context = Context;

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

@@ -13,6 +13,6 @@ export declare const CLASS_NAMES: {
     readonly panels: "tabs__panels";
     readonly panel: "tabs__panel";
 };
-export declare const Context: import("react").Context<ContextValue & {
+export declare const Context: import("react").Context<(ContextValue & {
     classNames: typeof CLASS_NAMES;
-}>;
+}) | null>;

package/dist/components/tabs/context.mjs

@@ -14,9 +14,6 @@ var CLASS_NAMES = {
   panels: "tabs__panels",
   panel: "tabs__panel"
 };
-var Context = /*#__PURE__*/createContext({
-  items: [],
-  classNames: CLASS_NAMES
-});
+var Context = /*#__PURE__*/createContext(null);
 
 export { CLASS_NAMES, Context };

package/dist/components/tabs/hooks/use-navigation.cjs

@@ -0,0 +1,87 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var relax = require('@aiszlab/relax');
+var React = require('react');
+
+/**
+ * @description
+ * count dom ele size
+ */
+var useNavigation = function useNavigation() {
+  var navigatorRef = React.useRef(null);
+  var tabsRef = React.useRef(null);
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    offset = _useState2[0],
+    setOffset = _useState2[1];
+  // navigator size
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    navigatorSize = _useState4[0],
+    setNavigatorSize = _useState4[1];
+  // tabs size
+  var _useState5 = React.useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tabsSize = _useState6[0],
+    setTabsSize = _useState6[1];
+  var _useMemo = React.useMemo(function () {
+      return {
+        maxOffset: Math.max(0, tabsSize - navigatorSize),
+        minOffset: 0
+      };
+    }, [navigatorSize, tabsSize]),
+    maxOffset = _useMemo.maxOffset,
+    minOffset = _useMemo.minOffset;
+  // handle scroll
+  var scrollNavigation = relax.useEvent(function (delta) {
+    setOffset(relax.clamp(delta, minOffset, maxOffset));
+  });
+  var resize = relax.useEvent(function () {
+    var _navigatorRef$current, _navigatorRef$current2, _tabsRef$current$getB, _tabsRef$current;
+    var _navigatorSize = (_navigatorRef$current = (_navigatorRef$current2 = navigatorRef.current) === null || _navigatorRef$current2 === void 0 ? void 0 : _navigatorRef$current2.getBoundingClientRect().width) !== null && _navigatorRef$current !== void 0 ? _navigatorRef$current : 0;
+    var _tabsSize = (_tabsRef$current$getB = (_tabsRef$current = tabsRef.current) === null || _tabsRef$current === void 0 ? void 0 : _tabsRef$current.getBoundingClientRect().width) !== null && _tabsRef$current$getB !== void 0 ? _tabsRef$current$getB : 0;
+    setNavigatorSize(_navigatorSize);
+    setTabsSize(_tabsSize);
+    scrollNavigation(0);
+  });
+  var _useMemo2 = React.useMemo(function () {
+      return {
+        isLeadingOverflow: offset > minOffset,
+        isTrailingOverflow: offset < maxOffset
+      };
+    }, [minOffset, maxOffset, offset]),
+    isLeadingOverflow = _useMemo2.isLeadingOverflow,
+    isTrailingOverflow = _useMemo2.isTrailingOverflow;
+  // if window resize
+  // re-calculate offsets range
+  relax.useResize(resize);
+  // mouse wheel
+  var scrollByWheel = relax.useEvent(function (event) {
+    event.preventDefault();
+    var deltaY = event.deltaY;
+    scrollNavigation(offset + deltaY);
+  });
+  // calculate size once at mounting step
+  relax.useMount(function () {
+    resize();
+  });
+  relax.useMounted(function () {
+    var _navigatorRef$current3;
+    (_navigatorRef$current3 = navigatorRef.current) === null || _navigatorRef$current3 === void 0 || _navigatorRef$current3.addEventListener("wheel", scrollByWheel);
+    return function () {
+      var _navigatorRef$current4;
+      (_navigatorRef$current4 = navigatorRef.current) === null || _navigatorRef$current4 === void 0 || _navigatorRef$current4.removeEventListener("wheel", scrollByWheel);
+    };
+  });
+  return {
+    navigatorRef: navigatorRef,
+    tabsRef: tabsRef,
+    offset: offset,
+    isLeadingOverflow: isLeadingOverflow,
+    isTrailingOverflow: isTrailingOverflow,
+    scrollNavigation: scrollNavigation
+  };
+};
+
+exports.useNavigation = useNavigation;

package/dist/components/tabs/hooks/use-navigation.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @description
+ * count dom ele size
+ */
+export declare const useNavigation: () => {
+    navigatorRef: import("react").RefObject<HTMLDivElement | null>;
+    tabsRef: import("react").RefObject<HTMLDivElement | null>;
+    offset: number;
+    isLeadingOverflow: boolean;
+    isTrailingOverflow: boolean;
+    scrollNavigation: (delta: number) => void;
+};