@lobehub/ui 1.26.0 → 1.26.2

package/es/ThemeProvider/index.js

@@ -4,9 +4,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { App } from 'antd';
 import { ThemeProvider as AntdThemeProvider, StyleProvider, setupStyled } from 'antd-style';
 import { memo } from 'react';
-// @ts-ignore
-import ReactFontLoader from 'react-font-loader';
 import { ThemeContext } from 'styled-components';
+import FontLoader from "../FontLoader";
 import { lobeCustomStylish, lobeCustomToken, lobeTheme } from "../styles";
 import GlobalStyle from "./GlobalStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -36,9 +35,9 @@ var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
       },
       theme: lobeTheme,
       themeMode: themeMode,
-      children: [/*#__PURE__*/_jsx(ReactFontLoader, {
+      children: [/*#__PURE__*/_jsx(FontLoader, {
         url: "https://raw.githubusercontent.com/IKKI2000/harmonyos-fonts/main/css/harmonyos_sans.css"
-      }), /*#__PURE__*/_jsx(ReactFontLoader, {
+      }), /*#__PURE__*/_jsx(FontLoader, {
         url: "https://raw.githubusercontent.com/IKKI2000/harmonyos-fonts/main/css/harmonyos_sans_sc.css"
       }), /*#__PURE__*/_jsx(GlobalStyle, {}), /*#__PURE__*/_jsx(App, {
         style: {

package/es/ThemeSwitch/index.js

@@ -10,30 +10,30 @@ import { memo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 var icons = {
   auto: Monitor,
-  light: Sun,
-  dark: Moon
+  dark: Moon,
+  light: Sun
 };
 var items = [{
-  label: 'System',
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: icons.auto,
     size: "small"
   }),
-  key: 'auto'
+  key: 'auto',
+  label: 'System'
 }, {
-  label: 'Light',
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: icons.light,
     size: "small"
   }),
-  key: 'light'
+  key: 'light',
+  label: 'Light'
 }, {
-  label: 'Dark',
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: icons.dark,
     size: "small"
   }),
-  key: 'dark'
+  key: 'dark',
+  label: 'Dark'
 }];
 var ThemeSwitch = /*#__PURE__*/memo(function (_ref) {
   var _ref$size = _ref.size,

package/es/Toc/TocMobile.d.ts

@@ -14,14 +14,14 @@ export interface TocMobileProps {
     tocWidth?: number;
 }
 export declare const mapItems: (items: AnchorItem[]) => {
-    href: string;
-    title: string;
-    key: string;
     children: {
         href: string;
-        title: string;
         key: string;
+        title: string;
     }[] | undefined;
+    href: string;
+    key: string;
+    title: string;
 }[];
 declare const TocMobile: import("react").NamedExoticComponent<TocMobileProps>;
 export default TocMobile;

package/es/Toc/TocMobile.js

@@ -10,16 +10,16 @@ export var mapItems = function mapItems(items) {
   return items.map(function (item) {
     var _item$children;
     return {
-      href: "#".concat(item.id),
-      title: item.title,
-      key: item.id,
       children: (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.map(function (child) {
         return {
           href: "#".concat(child.id),
-          title: child === null || child === void 0 ? void 0 : child.title,
-          key: child.id
+          key: child.id,
+          title: child === null || child === void 0 ? void 0 : child.title
         };
-      })
+      }),
+      href: "#".concat(item.id),
+      key: item.id,
+      title: item.title
     };
   });
 };
@@ -33,8 +33,8 @@ var TocMobile = /*#__PURE__*/memo(function (_ref) {
     _ref$tocWidth = _ref.tocWidth,
     tocWidth = _ref$tocWidth === void 0 ? 176 : _ref$tocWidth;
   var _useControlledState = useControlledState('', {
-      value: activeKey,
-      onChange: onChange
+      onChange: onChange,
+      value: activeKey
     }),
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     activeLink = _useControlledState2[0],
@@ -64,18 +64,18 @@ var TocMobile = /*#__PURE__*/memo(function (_ref) {
           return isActive ? /*#__PURE__*/_jsx(ActionIcon, {
             icon: PanelTopClose,
             size: {
-              fontSize: 16,
-              strokeWidth: 1,
               blockSize: 24,
-              borderRadius: 3
+              borderRadius: 3,
+              fontSize: 16,
+              strokeWidth: 1
             }
           }) : /*#__PURE__*/_jsx(ActionIcon, {
             icon: PanelTopOpen,
             size: {
-              fontSize: 16,
-              strokeWidth: 1,
               blockSize: 24,
-              borderRadius: 3
+              borderRadius: 3,
+              fontSize: 16,
+              strokeWidth: 1
             }
           });
         },
@@ -83,7 +83,7 @@ var TocMobile = /*#__PURE__*/memo(function (_ref) {
         ghost: true,
         children: /*#__PURE__*/_jsx(Collapse.Panel, {
           forceRender: true,
-          header: !activeAnchor ? 'TOC' : activeAnchor.title,
+          header: activeAnchor ? activeAnchor.title : 'TOC',
           children: /*#__PURE__*/_jsx(ConfigProvider, {
             theme: {
               token: {

package/es/Toc/style.d.ts

@@ -2,8 +2,8 @@ export declare const useStyles: (props?: {
     headerHeight: number;
     tocWidth: number;
 } | undefined) => import("antd-style").ReturnStyles<{
+    anchor: string;
     container: import("antd-style").SerializedStyles;
-    mobileCtn: import("antd-style").SerializedStyles;
     expand: string;
-    anchor: string;
+    mobileCtn: import("antd-style").SerializedStyles;
 }>;

package/es/Toc/style.js

@@ -12,9 +12,9 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     headerHeight = _ref2.headerHeight;
   var fixHeight = 36;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: sticky;\n        top: ", "px;\n\n        overscroll-behavior: contain;\n        grid-area: toc;\n\n        width: ", "px;\n        margin-inline-end: 24px;\n\n        border-radius: 3px;\n\n        -webkit-overflow-scrolling: touch;\n\n        ", " {\n          position: relative;\n          left: 0;\n          width: 100%;\n          margin-top: 0;\n        }\n\n        > h4 {\n          margin: 0 0 8px;\n          font-size: 12px;\n          line-height: 1;\n          color: ", ";\n        }\n      "])), headerHeight + 64, tocWidth, responsive.mobile, token.colorTextDescription),
-    mobileCtn: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        width: 100%;\n        height: ", "px;\n\n        .ant-collapse-expand-icon {\n          color: ", ";\n        }\n      "])), fixHeight, token.colorTextQuaternary),
+    anchor: cx(stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          overflow-x: hidden;\n          overflow-y: auto;\n          max-height: 60vh !important;\n        "])))),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: sticky;\n        top: ", "px;\n\n        overscroll-behavior: contain;\n        grid-area: toc;\n\n        width: ", "px;\n        margin-inline-end: 24px;\n\n        border-radius: 3px;\n\n        -webkit-overflow-scrolling: touch;\n\n        ", " {\n          position: relative;\n          left: 0;\n          width: 100%;\n          margin-top: 0;\n        }\n\n        > h4 {\n          margin: 0 0 8px;\n          font-size: 12px;\n          line-height: 1;\n          color: ", ";\n        }\n      "])), headerHeight + 64, tocWidth, responsive.mobile, token.colorTextDescription),
     expand: cx(stylish.blur, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          width: 100%;\n\n          background-color: ", ";\n          border-bottom: 1px solid ", ";\n          border-radius: 0;\n          box-shadow: ", ";\n\n          .ant-collapse-content {\n            overflow: auto;\n          }\n\n          .ant-collapse-header {\n            z-index: 10;\n            padding: 8px 16px !important;\n\n            &[aria-expanded='true'] {\n              box-shadow: ", ";\n            }\n          }\n        "])), rgba(token.colorBgLayout, 0.5), token.colorSplit, token.boxShadowSecondary, token.boxShadowSecondary)),
-    anchor: cx(stylish.blur, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          overflow-x: hidden;\n          overflow-y: auto;\n          max-height: 60vh !important;\n        "]))))
+    mobileCtn: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        width: 100%;\n        height: ", "px;\n\n        .ant-collapse-expand-icon {\n          color: ", ";\n        }\n      "])), fixHeight, token.colorTextQuaternary)
   };
 });

package/es/TokenTag/style.js

@@ -10,15 +10,20 @@ export var useStyles = createStyles(function (_ref, type) {
   var percentStyle;
   switch (type) {
     case 'normal':
-      percentStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), token.colorSuccessText);
-      break;
+      {
+        percentStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), token.colorSuccessText);
+        break;
+      }
     case 'low':
-      percentStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), token.colorWarningText);
-      break;
+      {
+        percentStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), token.colorWarningText);
+        break;
+      }
     case 'overload':
-    default:
-      percentStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), token.colorErrorText);
-      break;
+      {
+        percentStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), token.colorErrorText);
+        break;
+      }
   }
   return {
     container: cx(percentStyle, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        display: flex;\n        gap: 4px;\n        align-items: center;\n\n        height: ", "px;\n        padding: 0 ", "px 0 ", "px;\n\n        background: ", ";\n        border-radius: ", "px;\n      "])), HEIGHT, HEIGHT - ICON_SIZE, (HEIGHT - ICON_SIZE) / 2, token.colorFillSecondary, HEIGHT / 2)),

package/es/components/ControlInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { InputProps } from "../index";
+import { InputProps } from "../Input";
 export interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {
     onChange?: (value: string) => void;
     onChangeEnd?: (value: string) => void;

package/es/components/ControlInput.js

@@ -7,7 +7,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { ConfigProvider, Space } from 'antd';
 import { RotateCcw, Save } from 'lucide-react';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { ActionIcon, Input } from "./..";
+import ActionIcon from "../ActionIcon";
+import { Input } from "../Input";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var ControlInput = /*#__PURE__*/memo(function (_ref) {
@@ -15,23 +16,23 @@ export var ControlInput = /*#__PURE__*/memo(function (_ref) {
     onChange = _ref.onChange,
     onValueChanging = _ref.onValueChanging,
     onChangeEnd = _ref.onChangeEnd,
-    props = _objectWithoutProperties(_ref, _excluded);
+    properties = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(value || ''),
     _useState2 = _slicedToArray(_useState, 2),
     input = _useState2[0],
     setInput = _useState2[1];
-  var inputRef = useRef(null);
+  var inputReference = useRef();
   var isChineseInput = useRef(false);
   var isFocusing = useRef(false);
   var updateValue = useCallback(function () {
     onChange === null || onChange === void 0 ? void 0 : onChange(input);
   }, [input]);
   useEffect(function () {
-    if (typeof value !== 'undefined') setInput(value);
+    if (value !== undefined) setInput(value);
   }, [value]);
   return /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
-    ref: inputRef
-  }, props), {}, {
+    ref: inputReference
+  }, properties), {}, {
     onBlur: function onBlur() {
       isFocusing.current = false;
       onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(input);

package/es/hooks/useHighlight.js

@@ -11,6 +11,19 @@ export var languageMap = ['javascript', 'js', 'jsx', 'json', 'markdown', 'md', '
 
 export var useHighlight = create(function (set, get) {
   return {
+    codeToHtml: function codeToHtml(text, language, isDarkMode) {
+      var _get = get(),
+        highlighter = _get.highlighter;
+      if (!highlighter) return '';
+      try {
+        return highlighter === null || highlighter === void 0 ? void 0 : highlighter.codeToHtml(text, {
+          lang: language,
+          theme: isDarkMode ? 'dark' : 'light'
+        });
+      } catch (_unused) {
+        return text;
+      }
+    },
     highlighter: undefined,
     initHighlighter: function () {
       var _initHighlighter = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -42,19 +55,6 @@ export var useHighlight = create(function (set, get) {
         return _initHighlighter.apply(this, arguments);
       }
       return initHighlighter;
-    }(),
-    codeToHtml: function codeToHtml(text, language, isDarkMode) {
-      var _get = get(),
-        highlighter = _get.highlighter;
-      if (!highlighter) return '';
-      try {
-        return highlighter === null || highlighter === void 0 ? void 0 : highlighter.codeToHtml(text, {
-          lang: language,
-          theme: isDarkMode ? 'dark' : 'light'
-        });
-      } catch (e) {
-        return text;
-      }
-    }
+    }()
   };
 });

package/es/index.d.ts

@@ -14,6 +14,7 @@ export { default as EditableMessage, type EditableMessageProps } from './Editabl
 export { default as EditableMessageList, type EditableMessageListProps, } from './EditableMessageList';
 export { default as EditableText, type EditableTextProps } from './EditableText';
 export { type FeatureItem, default as Features, type FeaturesProps } from './Features';
+export { default as FontLoader, type FontLoaderProps } from './FontLoader';
 export { default as Footer, type FooterProps } from './Footer';
 export { default as GradientButton, type GradientButtonProps } from './GradientButton';
 export { default as Header, type HeaderProps } from './Header';

package/es/index.js

@@ -13,6 +13,7 @@ export { default as EditableMessage } from "./EditableMessage";
 export { default as EditableMessageList } from "./EditableMessageList";
 export { default as EditableText } from "./EditableText";
 export { default as Features } from "./Features";
+export { default as FontLoader } from "./FontLoader";
 export { default as Footer } from "./Footer";
 export { default as GradientButton } from "./GradientButton";
 export { default as Header } from "./Header";

package/es/styles/algorithms/generateColorPalette.js

@@ -12,20 +12,20 @@ export var generateColorNeutralPalette = function generateColorNeutralPalette(_r
   var scale = _ref3.scale,
     appearance = _ref3.appearance;
   return {
-    colorText: scale[appearance][12],
-    colorTextSecondary: scale[appearance][10],
-    colorTextTertiary: scale[appearance][8],
-    colorTextQuaternary: scale[appearance][6],
+    colorBgContainer: appearance === 'dark' ? scale[appearance][1] : scale[appearance][0],
+    colorBgElevated: appearance === 'dark' ? scale[appearance][2] : scale[appearance][0],
+    colorBgLayout: appearance === 'dark' ? scale[appearance][0] : scale[appearance][1],
+    colorBgMask: scale.lightA[8],
+    colorBgSpotlight: scale[appearance][5],
     colorBorder: scale[appearance][4],
     colorBorderSecondary: scale[appearance][3],
     colorFill: scale["".concat(appearance, "A")][3],
+    colorFillQuaternary: scale["".concat(appearance, "A")][0],
     colorFillSecondary: scale["".concat(appearance, "A")][2],
     colorFillTertiary: scale["".concat(appearance, "A")][1],
-    colorFillQuaternary: scale["".concat(appearance, "A")][0],
-    colorBgContainer: appearance === 'dark' ? scale[appearance][1] : scale[appearance][0],
-    colorBgElevated: appearance === 'dark' ? scale[appearance][2] : scale[appearance][0],
-    colorBgLayout: appearance === 'dark' ? scale[appearance][0] : scale[appearance][1],
-    colorBgSpotlight: scale[appearance][5],
-    colorBgMask: scale.lightA[8]
+    colorText: scale[appearance][12],
+    colorTextQuaternary: scale[appearance][6],
+    colorTextSecondary: scale[appearance][10],
+    colorTextTertiary: scale[appearance][8]
   };
 };

package/es/styles/algorithms/generateCustomStylish.js

@@ -8,10 +8,10 @@ export var generateCustomStylish = function generateCustomStylish(_ref) {
   var gradient = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% {\n      background-position: 0% 50%;\n    }\n    50% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0% 50%;\n    }\n  "])));
   return {
     blur: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      backdrop-filter: saturate(180%) blur(10px);\n    "]))),
-    gradientAnimation: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      background-image: linear-gradient(\n        -45deg,\n        ", ",\n        ", ",\n        ", ",\n        ", "\n      );\n      background-size: 400% 400%;\n      border-radius: inherit;\n      animation: 5s ", " 5s ease infinite;\n    "])), token.gold, token.magenta, token.geekblue, token.cyan, gradient),
-    noScrollbar: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        display: none;\n        width: 0;\n        height: 0;\n        background-color: transparent;\n      }\n    "]))),
-    bottomScrollbar: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        width: 0;\n        height: 4px;\n        background-color: transparent;\n\n        &-thumb {\n          background-color: ", ";\n          border-radius: 4px;\n          transition: background-color 500ms ", ";\n        }\n\n        &-corner {\n          display: none;\n          width: 0;\n          height: 0;\n        }\n      }\n    "])), token.colorFill, token.motionEaseOut),
-    resetLinkColor: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), token.colorTextSecondary, token.colorText),
-    markdown: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      pre {\n        border: none;\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0;\n        margin-inline-end: 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      li {\n        line-height: 1.8;\n\n        &::marker {\n          color: ", ";\n        }\n      }\n\n      details {\n        margin-bottom: 1em;\n        padding: 12px 16px;\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        transition: all 400ms ", ";\n      }\n\n      details[open] {\n        summary {\n          padding-bottom: 12px;\n          border-bottom: 1px solid ", ";\n        }\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder)
+    bottomScrollbar: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        width: 0;\n        height: 4px;\n        background-color: transparent;\n\n        &-thumb {\n          background-color: ", ";\n          border-radius: 4px;\n          transition: background-color 500ms ", ";\n        }\n\n        &-corner {\n          display: none;\n          width: 0;\n          height: 0;\n        }\n      }\n    "])), token.colorFill, token.motionEaseOut),
+    gradientAnimation: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      background-image: linear-gradient(\n        -45deg,\n        ", ",\n        ", ",\n        ", ",\n        ", "\n      );\n      background-size: 400% 400%;\n      border-radius: inherit;\n      animation: 5s ", " 5s ease infinite;\n    "])), token.gold, token.magenta, token.geekblue, token.cyan, gradient),
+    markdown: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      pre {\n        border: none;\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0;\n        margin-inline-end: 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      li {\n        line-height: 1.8;\n\n        &::marker {\n          color: ", ";\n        }\n      }\n\n      details {\n        margin-bottom: 1em;\n        padding: 12px 16px;\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        transition: all 400ms ", ";\n      }\n\n      details[open] {\n        summary {\n          padding-bottom: 12px;\n          border-bottom: 1px solid ", ";\n        }\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
+    noScrollbar: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        display: none;\n        width: 0;\n        height: 0;\n        background-color: transparent;\n      }\n    "]))),
+    resetLinkColor: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), token.colorTextSecondary, token.colorText)
   };
 };

package/es/styles/algorithms/generateCustomToken.js

@@ -2,6 +2,9 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import { camelCase } from 'lodash-es';
 import { colorScales } from "../colors";
 var generateColorPalette = function generateColorPalette(_ref) {
@@ -16,18 +19,40 @@ var generateCustomColorPalette = function generateCustomColorPalette(_ref3) {
     scale = _ref3.scale,
     appearance = _ref3.appearance;
   var colorStepPalette = {};
-  scale[appearance].forEach(function (color, index) {
-    if (index === 0 || index === 12) return;
-    colorStepPalette["".concat(name).concat(index)] = color;
-  });
-  scale["".concat(appearance, "A")].forEach(function (color, index) {
-    if (index === 0 || index === 12) return;
-    colorStepPalette["".concat(name).concat(index, "A")] = color;
-  });
+  var _iterator = _createForOfIteratorHelper(scale[appearance].entries()),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = _slicedToArray(_step.value, 2),
+        index = _step$value[0],
+        color = _step$value[1];
+      if (index === 0 || index === 12) continue;
+      colorStepPalette["".concat(name).concat(index)] = color;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var _iterator2 = _createForOfIteratorHelper(scale["".concat(appearance, "A")].entries()),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var _step2$value = _slicedToArray(_step2.value, 2),
+        _index = _step2$value[0],
+        _color = _step2$value[1];
+      if (_index === 0 || _index === 12) continue;
+      colorStepPalette["".concat(name).concat(_index, "A")] = _color;
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
   return _objectSpread(_objectSpread({}, colorStepPalette), generateColorPalette({
+    appearance: appearance,
     name: name,
-    scale: scale,
-    appearance: appearance
+    scale: scale
   }));
 };
 
@@ -35,15 +60,15 @@ var generateCustomColorPalette = function generateCustomColorPalette(_ref3) {
 export var generateCustomToken = function generateCustomToken(_ref4) {
   var isDarkMode = _ref4.isDarkMode;
   var colorCustomToken = {};
-  Object.entries(colorScales).forEach(function (_ref5) {
-    var _ref6 = _slicedToArray(_ref5, 2),
-      type = _ref6[0],
-      scale = _ref6[1];
+  for (var _i = 0, _Object$entries = Object.entries(colorScales); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+      type = _Object$entries$_i[0],
+      scale = _Object$entries$_i[1];
     colorCustomToken = _objectSpread(_objectSpread({}, colorCustomToken), generateCustomColorPalette({
+      appearance: isDarkMode ? 'dark' : 'light',
       name: camelCase(type),
-      scale: scale,
-      appearance: isDarkMode ? 'dark' : 'light'
+      scale: scale
     }));
-  });
+  }
   return colorCustomToken;
 };

package/es/styles/algorithms/generateTheme.js

@@ -4,16 +4,16 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import darkBaseToken from "../theme/dark";
 import lightBaseToken from "../theme/light";
 export var lightTheme = {
-  token: lightBaseToken,
   algorithm: function algorithm(seedToken, mapToken) {
     return _objectSpread(_objectSpread({}, mapToken), lightBaseToken);
-  }
+  },
+  token: lightBaseToken
 };
 export var darkTheme = {
-  token: darkBaseToken,
   algorithm: function algorithm(seedToken, mapToken) {
     return _objectSpread(_objectSpread({}, mapToken), darkBaseToken);
-  }
+  },
+  token: darkBaseToken
 };
 export var generateTheme = function generateTheme(appearance) {
   return appearance === 'dark' ? darkTheme : lightTheme;