@nocobase/plugin-theme-editor 0.11.1-alpha.1

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

@@ -0,0 +1,718 @@
+"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;