@nocobase/plugin-theme-editor 0.11.1-alpha.5 → 0.12.0-alpha.2

package/lib/client/antd-token-previewer/token-panel-pro/TokenContent.js

@@ -1,718 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-function _icons() {
-  const data = require("@ant-design/icons");
-  _icons = function _icons() {
-    return data;
-  };
-  return data;
-}
-function _antd() {
-  const data = require("antd");
-  _antd = function _antd() {
-    return data;
-  };
-  return data;
-}
-function _seed() {
-  const data = _interopRequireDefault(require("antd/es/theme/themes/seed"));
-  _seed = function _seed() {
-    return data;
-  };
-  return data;
-}
-function _classnames() {
-  const data = _interopRequireDefault(require("classnames"));
-  _classnames = function _classnames() {
-    return data;
-  };
-  return data;
-}
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function _react() {
-    return data;
-  };
-  return data;
-}
-function _useDebouncy() {
-  const data = require("use-debouncy");
-  _useDebouncy = function _useDebouncy() {
-    return data;
-  };
-  return data;
-}
-var _ColorPanel = _interopRequireDefault(require("../ColorPanel"));
-var _IconSwitch = _interopRequireDefault(require("../IconSwitch"));
-var _useControlledTheme = require("../hooks/useControlledTheme");
-var _icons2 = require("../icons");
-var _locale = require("../locale");
-var _getDesignToken = _interopRequireDefault(require("../utils/getDesignToken"));
-var _makeStyle = _interopRequireDefault(require("../utils/makeStyle"));
-var _InputNumberPlus = _interopRequireDefault(require("./InputNumberPlus"));
-var _TokenDetail = _interopRequireDefault(require("./TokenDetail"));
-var _TokenPreview = _interopRequireDefault(require("./TokenPreview"));
-var _calcCustomToken = _interopRequireDefault(require("./calcCustomToken"));
-var _tokenMeta = _interopRequireDefault(require("./token-meta.json"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-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; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-const Panel = _antd().Collapse.Panel;
-const useStyle = (0, _makeStyle.default)('ColorTokenContent', token => ({
-  '.token-panel-pro-color': {
-    height: '100%',
-    display: 'flex',
-    '.token-panel-pro-color-seeds': {
-      height: '100%',
-      flex: 1,
-      width: 0,
-      borderInlineEnd: `1px solid ${token.colorBorderSecondary}`,
-      display: 'flex',
-      flexDirection: 'column',
-      boxSizing: 'border-box',
-      '.token-panel-pro-color-themes': {
-        display: 'flex',
-        alignItems: 'center',
-        padding: '0 16px',
-        flex: '0 0 60px',
-        '> span': {
-          fontSize: token.fontSizeLG,
-          fontWeight: token.fontWeightStrong
-        }
-      }
-    },
-    [`.token-panel-pro-token-collapse${token.rootCls}-collapse`]: {
-      flex: 1,
-      overflow: 'auto',
-      [`> ${token.rootCls}-collapse-item-active`]: {
-        backgroundColor: '#fff',
-        boxShadow: '0 6px 16px -8px rgba(0,0,0,0.08), 0 9px 28px 0 rgba(0,0,0,0.05), 0 12px 48px -8px rgba(0,0,0,0.03), inset 0 0 0 2px #1677FF',
-        transition: 'box-shadow 0.2s ease-in-out',
-        borderRadius: 8
-      },
-      [`> ${token.rootCls}-collapse-item > ${token.rootCls}-collapse-content > ${token.rootCls}-collapse-content-box`]: {
-        paddingBlock: '0 12px'
-      },
-      '.token-panel-pro-token-collapse-description': {
-        color: token.colorTextTertiary,
-        marginBottom: 16
-      },
-      '.token-panel-pro-token-collapse-subtitle': {
-        color: token.colorTextSecondary,
-        fontSize: 12
-      },
-      '.token-panel-pro-token-collapse-seed-block': {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-end',
-        '+ .token-panel-pro-token-collapse-seed-block': {
-          marginTop: 8
-        },
-        '&-name-cn': {
-          fontWeight: token.fontWeightStrong,
-          marginInlineEnd: 4
-        },
-        '&-name': {
-          color: token.colorTextTertiary
-        },
-        '&-sample': {
-          flex: 'none',
-          '&:not(:last-child)': {
-            marginInlineEnd: 16
-          },
-          '&-theme': {
-            color: token.colorTextTertiary,
-            marginBottom: 2,
-            fontSize: 12,
-            textAlign: 'end'
-          },
-          '&-card': {
-            cursor: 'pointer',
-            border: `1px solid ${token.colorBorderSecondary}`,
-            borderRadius: 4,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            padding: '4px 8px',
-            '&-value': {
-              fontFamily: 'Monaco,'.concat(token.fontFamily)
-            }
-          }
-        }
-      },
-      [`.token-panel-pro-token-collapse-map-collapse${token.rootCls}-collapse`]: {
-        borderRadius: 4,
-        backgroundColor: '#fff',
-        [`> ${token.rootCls}-collapse-item`]: {
-          '&:not(:first-child)': {
-            [`> ${token.rootCls}-collapse-header`]: {
-              [`> ${token.rootCls}-collapse-header-text`]: {
-                '.token-panel-pro-token-collapse-map-collapse-preview': {
-                  '.token-panel-pro-token-collapse-map-collapse-preview-color': {
-                    marginTop: -1
-                  }
-                }
-              }
-            }
-          },
-          [`> ${token.rootCls}-collapse-header`]: {
-            padding: {
-              value: '0 12px 0 16px',
-              _skip_check_: true
-            },
-            [`> ${token.rootCls}-collapse-expand-icon`]: {
-              alignSelf: 'center'
-            },
-            [`> ${token.rootCls}-collapse-header-text`]: {
-              flex: 1,
-              '.token-panel-pro-token-collapse-map-collapse-token': {
-                color: token.colorTextSecondary,
-                marginInlineStart: 4,
-                marginInlineEnd: 8
-              },
-              '.token-panel-pro-token-collapse-map-collapse-preview': {
-                display: 'flex',
-                flex: 'none',
-                '.token-panel-pro-token-collapse-map-collapse-preview-color': {
-                  height: 56,
-                  width: 56,
-                  position: 'relative',
-                  borderInline: '1px solid #e8e8e8'
-                },
-                '> *': {
-                  marginInlineEnd: 8
-                }
-              }
-            }
-          },
-          [`> ${token.rootCls}-collapse-content > ${token.rootCls}-collapse-content-box`]: {
-            padding: '0'
-          }
-        }
-      }
-    },
-    '.token-panel-pro-token-collapse-map-collapse-count': {
-      color: token.colorTextSecondary,
-      // display: 'inline-block',
-      fontSize: 12,
-      lineHeight: '16px',
-      padding: '0 6px',
-      backgroundColor: token.colorFillAlter,
-      borderRadius: 999,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    },
-    '.token-panel-pro-token-pick': {
-      transition: 'color 0.3s'
-    },
-    '.token-panel-pro-token-picked': {
-      color: token.colorPrimary
-    },
-    [`.token-panel-pro-grouped-map-collapse${token.rootCls}-collapse`]: {
-      borderRadius: 4,
-      [`> ${token.rootCls}-collapse-item`]: {
-        [`> ${token.rootCls}-collapse-header`]: {
-          padding: '6px 12px',
-          color: token.colorIcon,
-          fontSize: 12,
-          lineHeight: token.lineHeightSM,
-          [`${token.rootCls}-collapse-expand-icon`]: {
-            lineHeight: '20px',
-            height: 20
-          }
-        },
-        [`> ${token.rootCls}-collapse-content > ${token.rootCls}-collapse-content-box`]: {
-          padding: 0,
-          [`.token-panel-pro-token-collapse-map-collapse${token.rootCls}-collapse`]: {
-            border: 'none',
-            [`${token.rootCls}-collapse-item:last-child`]: {
-              borderBottom: 'none'
-            }
-          }
-        }
-      }
-    }
-  }
-}));
-const getSeedValue = (config, token) => {
-  var _config$token;
-  // @ts-ignore
-  return ((_config$token = config.token) === null || _config$token === void 0 ? void 0 : _config$token[token]) || _seed().default[token] || (0, _getDesignToken.default)(config)[token];
-};
-const seedRange = {
-  borderRadius: {
-    min: 0,
-    max: 16
-  },
-  fontSize: {
-    min: 12,
-    max: 32
-  },
-  sizeStep: {
-    min: 0,
-    max: 16
-  },
-  sizeUnit: {
-    min: 0,
-    max: 16
-  }
-};
-const SeedTokenPreview = ({
-  theme,
-  tokenName,
-  disabled,
-  alpha
-}) => {
-  var _theme$getCanReset;
-  const tokenPath = ['token', tokenName];
-  const _useState = (0, _react().useState)(getSeedValue(theme.config, tokenName)),
-    _useState2 = _slicedToArray(_useState, 2),
-    tokenValue = _useState2[0],
-    setTokenValue = _useState2[1];
-  const locale = (0, _locale.useLocale)();
-  const debouncedOnChange = (0, _useDebouncy().useDebouncyFn)(newValue => {
-    var _theme$onThemeChange;
-    (_theme$onThemeChange = theme.onThemeChange) === null || _theme$onThemeChange === void 0 ? void 0 : _theme$onThemeChange.call(theme, _objectSpread(_objectSpread({}, theme.config), {}, {
-      token: _objectSpread(_objectSpread({}, theme.config.token), (0, _calcCustomToken.default)(tokenName, newValue))
-    }), ['token', tokenName]);
-  }, 500);
-  const handleChange = value => {
-    setTokenValue(value);
-    debouncedOnChange(value);
-  };
-  (0, _react().useEffect)(() => {
-    setTokenValue(getSeedValue(theme.config, tokenName));
-  }, [theme.config, tokenName]);
-  const showReset = (_theme$getCanReset = theme.getCanReset) === null || _theme$getCanReset === void 0 ? void 0 : _theme$getCanReset.call(theme, tokenPath);
-  return _react().default.createElement("div", {
-    className: "token-panel-pro-token-collapse-seed-block-sample"
-  }, _react().default.createElement("div", {
-    className: "token-panel-pro-token-collapse-seed-block-sample-theme"
-  }, _react().default.createElement(_antd().Typography.Link, {
-    style: {
-      fontSize: 12,
-      padding: 0,
-      opacity: showReset ? 1 : 0,
-      pointerEvents: showReset ? 'auto' : 'none'
-    },
-    onClick: () => {
-      var _theme$onReset;
-      return (_theme$onReset = theme.onReset) === null || _theme$onReset === void 0 ? void 0 : _theme$onReset.call(theme, tokenPath);
-    }
-  }, locale.reset)), tokenName.startsWith('color') && _react().default.createElement(_antd().Popover, {
-    trigger: "click",
-    placement: "bottomRight",
-    overlayInnerStyle: {
-      padding: 0
-    },
-    content: _react().default.createElement(_ColorPanel.default, {
-      color: tokenValue,
-      onChange: handleChange,
-      style: {
-        border: 'none'
-      },
-      alpha: alpha
-    })
-  }, _react().default.createElement("div", {
-    className: "token-panel-pro-token-collapse-seed-block-sample-card",
-    style: {
-      pointerEvents: disabled ? 'none' : 'auto'
-    }
-  }, _react().default.createElement("div", {
-    style: {
-      backgroundColor: tokenValue,
-      width: 48,
-      height: 32,
-      borderRadius: 4,
-      marginRight: 14,
-      boxShadow: '0 2px 3px -1px rgba(0,0,0,0.20), inset 0 0 0 1px rgba(0,0,0,0.09)'
-    }
-  }), _react().default.createElement("div", {
-    className: "token-panel-pro-token-collapse-seed-block-sample-card-value"
-  }, tokenValue))), ['fontSize', 'sizeUnit', 'sizeStep', 'borderRadius'].includes(tokenName) && _react().default.createElement(_InputNumberPlus.default, {
-    value: tokenValue,
-    onChange: handleChange,
-    min: seedRange[tokenName].min,
-    max: seedRange[tokenName].max
-  }), tokenName === 'wireframe' && _react().default.createElement(_antd().Switch, {
-    checked: tokenValue,
-    onChange: handleChange
-  }));
-};
-const MapTokenCollapseContent = ({
-  mapTokens,
-  theme,
-  onTokenSelect,
-  selectedTokens,
-  type
-}) => {
-  const locale = (0, _locale.useLocale)();
-  return _react().default.createElement(_antd().Collapse, {
-    className: "token-panel-pro-token-collapse-map-collapse"
-  }, mapTokens === null || mapTokens === void 0 ? void 0 : mapTokens.map(mapToken => {
-    var _tokenMeta$mapToken, _selectedTokens$map;
-    return _react().default.createElement(Panel, {
-      header: _react().default.createElement("div", {
-        style: {
-          display: 'flex',
-          alignItems: 'center'
-        }
-      }, _react().default.createElement("div", {
-        style: {
-          flex: 1,
-          whiteSpace: 'nowrap',
-          width: 0,
-          overflow: 'hidden',
-          display: 'flex',
-          alignItems: 'center',
-          marginRight: 8
-        }
-      }, locale._lang === 'zh-CN' && _react().default.createElement("span", {
-        style: {
-          fontWeight: 500,
-          flex: 'none'
-        }
-      }, (_tokenMeta$mapToken = _tokenMeta.default[mapToken]) === null || _tokenMeta$mapToken === void 0 ? void 0 : _tokenMeta$mapToken.name), _react().default.createElement("span", {
-        className: "token-panel-pro-token-collapse-map-collapse-token",
-        style: {
-          flex: 'none'
-        }
-      }, mapToken), _react().default.createElement("span", {
-        className: "token-panel-pro-token-collapse-map-collapse-count"
-      }, (0, _getDesignToken.default)(theme.config)[mapToken])), _react().default.createElement("div", {
-        className: "token-panel-pro-token-collapse-map-collapse-preview"
-      }, _react().default.createElement("div", {
-        className: "token-panel-pro-token-collapse-map-collapse-preview-color"
-      }, _react().default.createElement(_TokenPreview.default, {
-        theme: theme.config,
-        tokenName: mapToken,
-        type: type
-      }))), _react().default.createElement("div", {
-        style: {
-          flex: 'none',
-          margin: 4
-        },
-        onClick: e => {
-          e.stopPropagation();
-          onTokenSelect === null || onTokenSelect === void 0 ? void 0 : onTokenSelect(mapToken, 'map');
-        }
-      }, _react().default.createElement(_icons2.Pick, {
-        className: (0, _classnames().default)('token-panel-pro-token-pick', {
-          'token-panel-pro-token-picked': selectedTokens === null || selectedTokens === void 0 ? void 0 : (_selectedTokens$map = selectedTokens.map) === null || _selectedTokens$map === void 0 ? void 0 : _selectedTokens$map.includes(mapToken)
-        })
-      }))),
-      key: mapToken
-    }, _react().default.createElement(_TokenDetail.default, {
-      style: {
-        margin: 8
-      },
-      themes: [theme],
-      path: ['token'],
-      tokenName: mapToken
-    }));
-  }));
-};
-const MapTokenCollapse = ({
-  theme,
-  onTokenSelect,
-  selectedTokens,
-  groupFn,
-  group
-}) => {
-  var _group$mapToken2;
-  const locale = (0, _locale.useLocale)();
-  const groupedTokens = (0, _react().useMemo)(() => {
-    const grouped = {};
-    if (groupFn) {
-      var _group$mapToken;
-      (_group$mapToken = group.mapToken) === null || _group$mapToken === void 0 ? void 0 : _group$mapToken.forEach(token => {
-        var _groupFn, _grouped$key;
-        const key = (_groupFn = groupFn(token)) !== null && _groupFn !== void 0 ? _groupFn : 'default';
-        grouped[key] = [...((_grouped$key = grouped[key]) !== null && _grouped$key !== void 0 ? _grouped$key : []), token];
-      });
-    }
-    return grouped;
-  }, [group, groupFn]);
-  if (groupFn) {
-    var _group$mapTokenGroups;
-    return _react().default.createElement(_antd().Collapse, {
-      className: "token-panel-pro-grouped-map-collapse",
-      defaultActiveKey: Object.keys(groupedTokens),
-      expandIconPosition: "end",
-      expandIcon: ({
-        isActive
-      }) => _react().default.createElement(_icons().CaretRightOutlined, {
-        rotate: isActive ? 450 : 360,
-        style: {
-          fontSize: 12
-        }
-      })
-    }, ((_group$mapTokenGroups = group.mapTokenGroups) !== null && _group$mapTokenGroups !== void 0 ? _group$mapTokenGroups : Object.keys(groupedTokens)).map(key => {
-      var _locale$key;
-      return _react().default.createElement(Panel, {
-        key: key,
-        header: (_locale$key = locale[key]) !== null && _locale$key !== void 0 ? _locale$key : ''
-      }, _react().default.createElement(MapTokenCollapseContent, {
-        mapTokens: groupedTokens[key],
-        theme: theme,
-        selectedTokens: selectedTokens,
-        onTokenSelect: onTokenSelect,
-        type: group.type
-      }));
-    }));
-  }
-  if (group.groups) {
-    return _react().default.createElement(_antd().Collapse, {
-      className: "token-panel-pro-grouped-map-collapse",
-      defaultActiveKey: group.groups.map(item => item.key),
-      expandIconPosition: "end",
-      expandIcon: ({
-        isActive
-      }) => _react().default.createElement(_icons().CaretRightOutlined, {
-        rotate: isActive ? 450 : 360,
-        style: {
-          fontSize: 12
-        }
-      })
-    }, group.groups.map(item => _react().default.createElement(Panel, {
-      key: item.key,
-      header: item.name
-    }, _react().default.createElement(MapTokenCollapseContent, {
-      mapTokens: item.mapToken,
-      theme: theme,
-      selectedTokens: selectedTokens,
-      onTokenSelect: onTokenSelect,
-      type: item.type
-    }))));
-  }
-  return _react().default.createElement(MapTokenCollapseContent, {
-    mapTokens: (_group$mapToken2 = group.mapToken) !== null && _group$mapToken2 !== void 0 ? _group$mapToken2 : [],
-    theme: theme,
-    selectedTokens: selectedTokens,
-    onTokenSelect: onTokenSelect,
-    type: group.type
-  });
-};
-const groupMapToken = token => {
-  if (token.startsWith('colorFill')) {
-    return 'fill';
-  }
-  if (token.startsWith('colorBorder') || token.startsWith('colorSplit')) {
-    return 'border';
-  }
-  if (token.startsWith('colorBg')) {
-    return 'background';
-  }
-  if (token.startsWith('colorText')) {
-    return 'text';
-  }
-  return '';
-};
-const TokenContent = ({
-  category,
-  theme,
-  selectedTokens,
-  onTokenSelect,
-  infoFollowPrimary,
-  onInfoFollowPrimaryChange,
-  activeGroup,
-  onActiveGroupChange
-}) => {
-  const _useStyle = useStyle(),
-    _useStyle2 = _slicedToArray(_useStyle, 2),
-    wrapSSR = _useStyle2[0],
-    hashId = _useStyle2[1];
-  const _useState3 = (0, _react().useState)(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    grouped = _useState4[0],
-    setGrouped = _useState4[1];
-  const locale = (0, _locale.useLocale)();
-  const switchAlgorithm = themeStr => () => {
-    var _theme$onThemeChange2;
-    let newAlgorithm = theme.config.algorithm;
-    if (!newAlgorithm) {
-      newAlgorithm = _useControlledTheme.themeMap[themeStr];
-    } else if (Array.isArray(newAlgorithm)) {
-      newAlgorithm = newAlgorithm.includes(_useControlledTheme.themeMap[themeStr]) ? newAlgorithm.filter(item => item !== _useControlledTheme.themeMap[themeStr]) : [...newAlgorithm, _useControlledTheme.themeMap[themeStr]];
-    } else {
-      newAlgorithm = newAlgorithm === _useControlledTheme.themeMap[themeStr] ? undefined : [newAlgorithm, _useControlledTheme.themeMap[themeStr]];
-    }
-    (_theme$onThemeChange2 = theme.onThemeChange) === null || _theme$onThemeChange2 === void 0 ? void 0 : _theme$onThemeChange2.call(theme, _objectSpread(_objectSpread({}, theme.config), {}, {
-      algorithm: newAlgorithm
-    }), ['config', 'algorithm']);
-  };
-  const isLeftChecked = str => {
-    if (!theme.config.algorithm) {
-      return true;
-    }
-    return Array.isArray(theme.config.algorithm) ? !theme.config.algorithm.includes(_useControlledTheme.themeMap[str]) : theme.config.algorithm !== _useControlledTheme.themeMap[str];
-  };
-  return wrapSSR(_react().default.createElement("div", {
-    className: (0, _classnames().default)(hashId, 'token-panel-pro-color')
-  }, _react().default.createElement("div", {
-    className: "token-panel-pro-color-seeds"
-  }, _react().default.createElement("div", {
-    className: "token-panel-pro-color-themes"
-  }, _react().default.createElement("span", {
-    style: {
-      marginRight: 12
-    }
-  }, locale._lang === 'zh-CN' ? category.name : category.nameEn), category.nameEn === 'Color' && _react().default.createElement(_IconSwitch.default, {
-    onChange: switchAlgorithm('dark'),
-    leftChecked: isLeftChecked('dark'),
-    leftIcon: _react().default.createElement(_icons2.Light, null),
-    rightIcon: _react().default.createElement(_icons2.DarkTheme, null),
-    style: {
-      marginLeft: 'auto'
-    }
-  }), category.nameEn === 'Size' && _react().default.createElement(_IconSwitch.default, {
-    onChange: switchAlgorithm('compact'),
-    leftChecked: isLeftChecked('compact'),
-    leftIcon: _react().default.createElement(_icons().ExpandOutlined, null),
-    rightIcon: _react().default.createElement(_icons2.CompactTheme, null),
-    style: {
-      marginLeft: 'auto'
-    }
-  })), _react().default.createElement(_antd().ConfigProvider, {
-    theme: {
-      token: {
-        colorBorder: '#f0f0f0'
-      }
-    }
-  }, _react().default.createElement(_antd().Collapse, {
-    className: "token-panel-pro-token-collapse",
-    expandIconPosition: "end",
-    ghost: true,
-    accordion: true,
-    activeKey: activeGroup,
-    expandIcon: ({
-      isActive
-    }) => _react().default.createElement(_icons().CaretRightOutlined, {
-      rotate: isActive ? 450 : 360,
-      style: {
-        fontSize: 12
-      }
-    }),
-    onChange: key => {
-      onActiveGroupChange(key);
-    }
-  }, category.groups.map((group, index) => {
-    var _group$seedToken;
-    return _react().default.createElement(Panel, {
-      header: _react().default.createElement("span", {
-        style: {
-          fontWeight: 500
-        }
-      }, locale._lang === 'zh-CN' ? group.name : group.nameEn),
-      key: group.key
-    }, _react().default.createElement("div", null, _react().default.createElement("div", {
-      className: "token-panel-pro-token-collapse-description"
-    }, locale._lang === 'zh-CN' ? group.desc : group.descEn), (_group$seedToken = group.seedToken) === null || _group$seedToken === void 0 ? void 0 : _group$seedToken.map(seedToken => {
-      var _tokenMeta$seedToken, _tokenMeta$seedToken2, _tokenMeta$seedToken3, _tokenMeta$seedToken4;
-      return _react().default.createElement("div", {
-        key: seedToken,
-        className: "token-panel-pro-token-collapse-seed-block"
-      }, _react().default.createElement("div", {
-        style: {
-          marginRight: 'auto'
-        }
-      }, _react().default.createElement("div", {
-        className: "token-panel-pro-token-collapse-subtitle"
-      }, _react().default.createElement("span", {
-        style: {
-          fontSize: 12
-        }
-      }, "Seed Token"), _react().default.createElement(_antd().Tooltip, {
-        placement: "topLeft",
-        arrowPointAtCenter: true,
-        title: locale._lang === 'zh-CN' ? (_tokenMeta$seedToken = _tokenMeta.default[seedToken]) === null || _tokenMeta$seedToken === void 0 ? void 0 : _tokenMeta$seedToken.desc : (_tokenMeta$seedToken2 = _tokenMeta.default[seedToken]) === null || _tokenMeta$seedToken2 === void 0 ? void 0 : _tokenMeta$seedToken2.descEn
-      }, _react().default.createElement(_icons().QuestionCircleOutlined, {
-        style: {
-          fontSize: 14,
-          marginLeft: 8
-        }
-      }))), _react().default.createElement("div", null, _react().default.createElement("span", {
-        className: "token-panel-pro-token-collapse-seed-block-name-cn"
-      }, locale._lang === 'zh-CN' ? (_tokenMeta$seedToken3 = _tokenMeta.default[seedToken]) === null || _tokenMeta$seedToken3 === void 0 ? void 0 : _tokenMeta$seedToken3.name : (_tokenMeta$seedToken4 = _tokenMeta.default[seedToken]) === null || _tokenMeta$seedToken4 === void 0 ? void 0 : _tokenMeta$seedToken4.nameEn), seedToken === 'colorInfo' && _react().default.createElement(_antd().Checkbox, {
-        style: {
-          marginLeft: 12
-        },
-        checked: infoFollowPrimary,
-        onChange: e => onInfoFollowPrimaryChange === null || onInfoFollowPrimaryChange === void 0 ? void 0 : onInfoFollowPrimaryChange(e.target.checked)
-      }, locale.followPrimary))), _react().default.createElement(SeedTokenPreview, {
-        alpha: !!group.seedTokenAlpha,
-        theme: theme,
-        tokenName: seedToken,
-        disabled: seedToken === 'colorInfo' && infoFollowPrimary
-      }));
-    }), (group.mapToken || group.groups) && _react().default.createElement("div", {
-      style: {
-        marginTop: 16,
-        marginBottom: 24
-      }
-    }, _react().default.createElement("div", {
-      className: "token-panel-pro-token-collapse-subtitle",
-      style: {
-        marginBottom: 10,
-        display: 'flex',
-        alignItems: 'center'
-      }
-    }, _react().default.createElement("span", null, "Map Token"), _react().default.createElement(_antd().Tooltip, {
-      placement: "topLeft",
-      arrowPointAtCenter: true,
-      title: "\u68AF\u5EA6\u53D8\u91CF\uFF08Map Token\uFF09 \u662F\u57FA\u4E8E Seed \u6D3E\u751F\u7684\u68AF\u5EA6\u53D8\u91CF\uFF0C\u6211\u4EEC\u7CBE\u5FC3\u8BBE\u8BA1\u7684\u68AF\u5EA6\u53D8\u91CF\u6A21\u578B\u5177\u6709\u826F\u597D\u7684\u89C6\u89C9\u8BBE\u8BA1\u8BED\u4E49\uFF0C\u53EF\u5728\u4EAE\u6697\u8272\u6A21\u5F0F\u5207\u6362\u65F6\u4FDD\u8BC1\u89C6\u89C9\u68AF\u5EA6\u7684\u4E00\u81F4\u6027\u3002"
-    }, _react().default.createElement(_icons().QuestionCircleOutlined, {
-      style: {
-        fontSize: 14,
-        marginLeft: 8
-      }
-    })), group.mapTokenGroups && _react().default.createElement("div", {
-      style: {
-        marginLeft: 'auto',
-        display: 'flex',
-        alignItems: 'center'
-      }
-    }, _react().default.createElement("label", {
-      style: {
-        marginRight: 4
-      }
-    }, locale.groupView), _react().default.createElement(_antd().Switch, {
-      checked: grouped,
-      onChange: v => setGrouped(v),
-      size: "small"
-    }))), _react().default.createElement(MapTokenCollapse, {
-      group: group,
-      theme: theme,
-      selectedTokens: selectedTokens,
-      onTokenSelect: onTokenSelect,
-      groupFn: group.mapTokenGroups && grouped ? groupMapToken : undefined
-    })), index < category.groups.length - 1 && _react().default.createElement(_antd().Button, {
-      type: "primary",
-      style: {
-        borderRadius: 4,
-        marginBottom: 12
-      },
-      onClick: () => {
-        var _category$groups;
-        return onActiveGroupChange((_category$groups = category.groups[index + 1]) === null || _category$groups === void 0 ? void 0 : _category$groups.key);
-      }
-    }, locale.next)));
-  }))))));
-};
-var _default = TokenContent;
-exports.default = _default;