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

package/src/client/antd-token-previewer/component-panel/index.tsx

@@ -1,316 +0,0 @@
-import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
-import { Breadcrumb, Segmented, Switch } from 'antd';
-import classNames from 'classnames';
-import type { CSSProperties, FC } from 'react';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import type { FilterMode } from '../FilterPanel';
-import type { Theme, TokenName } from '../interface';
-import makeStyle from '../utils/makeStyle';
-import { getRelatedComponents } from '../utils/statistic';
-import { getComponentDemoId } from './ComponentCard';
-import ComponentDemoGroup from './ComponentDemoGroup';
-import ComponentTree from './ComponentTree';
-
-const BREADCRUMB_HEIGHT = 40;
-
-const useStyle = makeStyle('ComponentPanel', (token) => ({
-  '.component-panel': {
-    boxShadow: '0 2px 4px 0 rgba(0,0,0,0.05), 0 1px 2px 0 rgba(25,15,15,0.07), 0 0 1px 0 rgba(0,0,0,0.08)',
-    backgroundColor: '#fff',
-    display: 'flex',
-    borderRadius: 6,
-    height: '100%',
-    overflow: 'hidden',
-
-    '.component-panel-main': {
-      display: 'flex',
-      flexDirection: 'column',
-      flex: 1,
-      width: 0,
-
-      '.component-panel-head': {
-        padding: `${token.paddingSM}px ${token.paddingSM}px`,
-        flex: 'none',
-        backgroundColor: token.colorBgContainer,
-        display: 'flex',
-        alignItems: 'center',
-        borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBgContainer}`,
-
-        '> *:not(:first-child)': {
-          marginInlineStart: token.margin,
-        },
-
-        [`${token.rootCls}-segmented-item`]: {
-          minWidth: 52,
-        },
-      },
-
-      '.component-panel-toggle-side-icon': {
-        flex: 'none',
-        cursor: 'pointer',
-        marginInlineEnd: token.marginXS,
-
-        '.anticon': {
-          color: token.colorIcon,
-          transition: `color ${token.motionDurationMid}`,
-
-          '&:hover': {
-            color: token.colorIconHover,
-          },
-        },
-      },
-    },
-
-    '.component-panel-side': {
-      flex: 'none',
-      width: 200,
-      overflow: 'hidden',
-      transition: `transform ${token.motionDurationMid}, width ${token.motionDurationMid}`,
-    },
-
-    '.component-panel-side.component-panel-side-hidden': {
-      width: 0,
-      transform: 'translateX(-200px)',
-    },
-
-    '.component-demos-wrapper': {
-      display: 'flex',
-      flex: 1,
-      height: 0,
-      position: 'relative',
-
-      '.component-demos-breadcrumb-wrapper': {
-        position: 'absolute',
-        top: 0,
-        insetInlineStart: 0,
-        width: '100%',
-        height: BREADCRUMB_HEIGHT,
-        zIndex: 20,
-        backgroundColor: token.colorBgContainer,
-        padding: '8px 16px',
-        transition: 'opacity 0.3s',
-        background: 'rgba(255, 255, 255, .6)',
-        backdropFilter: 'blur(10px)',
-        borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBgContainer}`,
-      },
-    },
-
-    '.component-demos': {
-      height: '100%',
-      overflow: 'auto',
-      flex: 1,
-    },
-  },
-}));
-
-export const antdComponents = {
-  General: ['Button', 'Icon', 'Typography'],
-  Layout: ['Divider', 'Grid', 'Space'],
-  Navigation: ['Breadcrumb', 'Dropdown', 'Menu', 'Pagination', 'Steps'],
-  'Date Entry': [
-    'AutoComplete',
-    'Cascader',
-    'Checkbox',
-    'DatePicker',
-    'Form',
-    'Input',
-    'InputNumber',
-    'Mentions',
-    'Radio',
-    'Rate',
-    'Select',
-    'Slider',
-    'Switch',
-    'TimePicker',
-    'Transfer',
-    'TreeSelect',
-    'Upload',
-  ],
-  'Data Display': [
-    'Avatar',
-    'Badge',
-    'Calendar',
-    'Card',
-    'Carousel',
-    'Collapse',
-    'Descriptions',
-    'Empty',
-    'Image',
-    'List',
-    'Popover',
-    'Segmented',
-    'Statistic',
-    'Table',
-    'Tabs',
-    'Tag',
-    'Timeline',
-    'Tooltip',
-    'Tree',
-  ],
-  Feedback: [
-    'Alert',
-    'Drawer',
-    'Message',
-    'Modal',
-    'Notification',
-    'Popconfirm',
-    'Progress',
-    'Result',
-    'Skeleton',
-    'Spin',
-  ],
-  Other: ['Anchor'],
-};
-
-export type ComponentPanelProps = {
-  themes: Theme[];
-  selectedTokens?: string[];
-  filterMode?: FilterMode;
-  className?: string;
-  style?: CSSProperties;
-  onTokenClick?: (token: TokenName) => void;
-};
-
-const Index: FC<ComponentPanelProps> = ({ themes, selectedTokens, filterMode, className, onTokenClick, ...rest }) => {
-  const [wrapSSR, hashId] = useStyle();
-  const [showSide, setShowSide] = useState<boolean>(true);
-  const demosRef = useRef<HTMLDivElement>(null);
-  const [componentSize, setComponentSize] = useState<'large' | 'small' | 'middle'>('middle');
-  const [componentDisabled, setComponentDisabled] = useState<boolean>(false);
-  const [activeComponent, setActiveComponent] = useState<string | undefined>();
-  const [showBreadcrumb, setShowBreadcrumb] = useState<boolean>(false);
-
-  const relatedComponents = useMemo(() => {
-    return selectedTokens ? getRelatedComponents(selectedTokens) : [];
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedTokens]);
-
-  useEffect(() => {
-    setShowSide(true);
-  }, [selectedTokens]);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      if (demosRef.current) {
-        setShowBreadcrumb(demosRef.current.scrollTop > 10);
-        for (let i = 0; i < demosRef.current.children.length; i++) {
-          if (
-            demosRef.current.children[i].getBoundingClientRect().top +
-              demosRef.current.children[i].clientHeight -
-              demosRef.current.getBoundingClientRect().top >
-            BREADCRUMB_HEIGHT
-          ) {
-            setActiveComponent(demosRef.current.children[i]?.id.split('-').pop());
-            break;
-          }
-        }
-      }
-    };
-
-    demosRef.current?.addEventListener('scroll', handleScroll);
-    const demosWrapper = demosRef.current;
-    return () => {
-      demosWrapper?.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
-
-  const scrollToComponent = (component: string) => {
-    demosRef.current?.scrollTo({
-      top: (demosRef.current?.querySelector<HTMLElement>(`#${getComponentDemoId(component)}`)?.offsetTop || 0) - 38,
-      behavior: 'smooth',
-    });
-  };
-
-  const activeComponentCategory = useMemo(() => {
-    if (!activeComponent) {
-      return undefined;
-    }
-    const key = Object.entries(antdComponents).find(([, value]) => value.includes(activeComponent))?.[0];
-    if (key) {
-      return (antdComponents as any)[key];
-    } else {
-      return undefined;
-    }
-  }, [activeComponent]);
-
-  const demoGroup = useMemo(
-    () => (
-      <ComponentDemoGroup
-        themes={themes}
-        components={antdComponents}
-        size={componentSize}
-        disabled={componentDisabled}
-        activeComponents={filterMode === 'highlight' ? undefined : relatedComponents}
-        selectedTokens={selectedTokens}
-        onTokenClick={onTokenClick}
-      />
-    ),
-    [themes, componentSize, componentDisabled, filterMode, relatedComponents, selectedTokens, onTokenClick],
-  );
-
-  return wrapSSR(
-    <div className={classNames('component-panel', hashId, className)} {...rest}>
-      <div
-        className={classNames('component-panel-side', {
-          'component-panel-side-hidden': !showSide,
-        })}
-      >
-        <ComponentTree
-          activeComponent={activeComponent}
-          filterMode={filterMode}
-          selectedTokens={selectedTokens}
-          components={antdComponents}
-          onSelect={(component) => {
-            if (component.startsWith('type-')) {
-              scrollToComponent((antdComponents as any)[component.split('-')[1]][0]);
-            } else {
-              scrollToComponent(component);
-            }
-          }}
-        />
-      </div>
-      <div className="component-panel-main">
-        <div className="component-panel-head">
-          <div className="component-panel-toggle-side-icon" onClick={() => setShowSide((prev) => !prev)}>
-            {showSide ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />}
-          </div>
-          <div>
-            <span style={{ marginRight: 8 }}>组件尺寸：</span>
-            <Segmented
-              value={componentSize}
-              onChange={(value) => setComponentSize(value as any)}
-              options={[
-                { label: '大', value: 'large' },
-                { label: '中', value: 'middle' },
-                { label: '小', value: 'small' },
-              ]}
-            />
-          </div>
-          <div>
-            <span style={{ marginRight: 8, verticalAlign: 'middle' }}>禁用：</span>
-            <Switch checked={componentDisabled} onChange={(checked) => setComponentDisabled(checked)} />
-          </div>
-        </div>
-        <div className="component-demos-wrapper">
-          {activeComponent && (
-            <div className="component-demos-breadcrumb-wrapper" style={{ opacity: showBreadcrumb ? 1 : 0 }}>
-              <Breadcrumb>
-                <Breadcrumb.Item>
-                  <a onClick={() => activeComponentCategory && scrollToComponent(activeComponentCategory?.[0])}>
-                    {Object.entries(antdComponents).find(([, value]) => value.includes(activeComponent))?.[0]}
-                  </a>
-                </Breadcrumb.Item>
-                <Breadcrumb.Item>{activeComponent}</Breadcrumb.Item>
-              </Breadcrumb>
-            </div>
-          )}
-          <div className="component-demos" ref={demosRef}>
-            {demoGroup}
-          </div>
-        </div>
-      </div>
-    </div>,
-  );
-};
-
-export default Index;

package/src/client/antd-token-previewer/hooks/useControlledTheme.tsx

@@ -1,111 +0,0 @@
-import type { DerivativeFunc } from '@ant-design/cssinjs';
-import { theme as antTheme } from 'antd';
-import type { ThemeConfig } from 'antd/es/config-provider/context';
-import { useEffect, useRef, useState } from 'react';
-import type { MutableTheme, Theme } from '../interface';
-import deepUpdateObj from '../utils/deepUpdateObj';
-import getDesignToken from '../utils/getDesignToken';
-import getValueByPath from '../utils/getValueByPath';
-
-const { darkAlgorithm: defaultDark, compactAlgorithm, defaultAlgorithm } = antTheme;
-
-export type ThemeCode = 'default' | 'dark' | 'compact';
-export const themeMap: Record<ThemeCode, DerivativeFunc<any, any>> = {
-  dark: defaultDark,
-  compact: compactAlgorithm,
-  default: defaultAlgorithm,
-};
-
-export type SetThemeState = (theme: Theme, modifiedPath: string[], updated?: boolean) => void;
-
-export type UseControlledTheme = (options: {
-  theme?: Theme;
-  defaultTheme: Theme;
-  onChange?: (theme: Theme) => void;
-  darkAlgorithm?: DerivativeFunc<any, any>;
-}) => {
-  theme: MutableTheme;
-  infoFollowPrimary: boolean;
-  onInfoFollowPrimaryChange: (value: boolean) => void;
-  updateRef: () => void;
-};
-
-const useControlledTheme: UseControlledTheme = ({ theme: customTheme, defaultTheme, onChange }) => {
-  const [theme, setTheme] = useState<Theme>(customTheme ?? defaultTheme);
-  const [infoFollowPrimary, setInfoFollowPrimary] = useState<boolean>(false);
-  const themeRef = useRef<Theme>(theme);
-  const [, setRenderHolder] = useState(0);
-
-  const forceUpdate = () => setRenderHolder((prev) => prev + 1);
-
-  const getNewTheme = (newTheme: Theme, force?: boolean): Theme => {
-    const newToken = { ...newTheme.config.token };
-    if (infoFollowPrimary || force) {
-      newToken.colorInfo = getDesignToken(newTheme.config).colorPrimary;
-    }
-    return { ...newTheme, config: { ...newTheme.config, token: newToken } };
-  };
-
-  const handleSetTheme: SetThemeState = (newTheme) => {
-    if (customTheme) {
-      onChange?.(getNewTheme(newTheme));
-    } else {
-      setTheme(getNewTheme(newTheme));
-    }
-  };
-
-  const handleResetTheme = (path: string[]) => {
-    let newConfig = { ...theme.config };
-    newConfig = deepUpdateObj(newConfig, path, getValueByPath(themeRef.current?.config, path));
-
-    if (path[1] === 'colorSettings') {
-      newConfig = deepUpdateObj(
-        newConfig,
-        ['token', 'colorBgSettingsHover'],
-        getValueByPath(themeRef.current?.config, ['token', 'colorBgSettingsHover']),
-      );
-      newConfig = deepUpdateObj(
-        newConfig,
-        ['token', 'colorBorderSettingsHover'],
-        getValueByPath(themeRef.current?.config, ['token', 'colorBorderSettingsHover']),
-      );
-    }
-
-    handleSetTheme({ ...theme, config: newConfig }, path);
-  };
-
-  const getCanReset = (origin: ThemeConfig, current: ThemeConfig) => (path: string[]) => {
-    return getValueByPath(origin, path) !== getValueByPath(current, path);
-  };
-
-  // Controlled theme change
-  useEffect(() => {
-    if (customTheme) {
-      setTheme(customTheme);
-    }
-  }, [customTheme]);
-
-  const handleInfoFollowPrimaryChange = (value: boolean) => {
-    setInfoFollowPrimary(value);
-    if (value) {
-      setTheme(getNewTheme(theme, true));
-    }
-  };
-
-  return {
-    theme: {
-      ...theme,
-      onThemeChange: (config, path) => handleSetTheme({ ...theme, config }, path),
-      onReset: handleResetTheme,
-      getCanReset: getCanReset(themeRef.current?.config, theme.config),
-    },
-    infoFollowPrimary,
-    onInfoFollowPrimaryChange: handleInfoFollowPrimaryChange,
-    updateRef: () => {
-      themeRef.current = theme;
-      forceUpdate();
-    },
-  };
-};
-
-export default useControlledTheme;

package/src/client/antd-token-previewer/icons/Arrow.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-
-declare const res: React.FC<React.SVGProps<SVGSVGElement>>;
-export default res;

package/src/client/antd-token-previewer/icons/Arrow.js

@@ -1,81 +0,0 @@
-import * as React from 'react';
-
-function Arrow(props) {
-  return /*#__PURE__*/ React.createElement(
-    'svg',
-    Object.assign(
-      {
-        width: '1em',
-        height: '1em',
-        viewBox: '0 0 16 16',
-        xmlns: 'http://www.w3.org/2000/svg',
-        xmlnsXlink: 'http://www.w3.org/1999/xlink',
-      },
-      props,
-      {
-        style: Object.assign(
-          {
-            verticalAlign: '-0.125em',
-          },
-          props.style,
-        ),
-        className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
-      },
-    ),
-    /*#__PURE__*/ React.createElement(
-      'g',
-      {
-        id: 'Arrow-\u9875\u9762-1',
-        stroke: 'none',
-        strokeWidth: 1,
-        fill: 'none',
-        fillRule: 'evenodd',
-      },
-      /*#__PURE__*/ React.createElement(
-        'g',
-        {
-          id: 'Arrow-\u4E3B\u9898\u9884\u89C8\u5668---\u7EC4\u4EF6\u9884\u89C8',
-          transform: 'translate(-335.000000, -153.000000)',
-          fill: 'currentColor',
-          fillRule: 'nonzero',
-        },
-        /*#__PURE__*/ React.createElement(
-          'g',
-          {
-            id: 'Arrow-\u7F16\u7EC4-18',
-            transform: 'translate(0.000000, 70.000000)',
-          },
-          /*#__PURE__*/ React.createElement(
-            'g',
-            {
-              id: 'Arrow-\u7F16\u7EC4-13',
-              transform: 'translate(331.000000, 79.000000)',
-            },
-            /*#__PURE__*/ React.createElement(
-              'g',
-              {
-                id: 'Arrow-\u6298\u53E0\u7BAD\u5934_Black@2x',
-                transform:
-                  'translate(12.000000, 12.000000) rotate(90.000000) translate(-12.000000, -12.000000) translate(4.000000, 4.000000)',
-              },
-              /*#__PURE__*/ React.createElement('rect', {
-                id: 'Arrow-\u77E9\u5F62',
-                opacity: 0,
-                x: 0,
-                y: 0,
-                width: 16,
-                height: 16,
-              }),
-              /*#__PURE__*/ React.createElement('path', {
-                d: 'M8.576,10.6224 C8.46400007,10.7357654 8.31136002,10.7997014 8.152,10.8 L7.848,10.8 C7.68897547,10.7980619 7.53693306,10.7343763 7.424,10.6224 L3.3184,6.4672 C3.16044703,6.30862179 3.16044703,6.05217821 3.3184,5.8936 L3.8864,5.3192 C3.95991079,5.24354153 4.06091047,5.20085176 4.1664,5.20085176 C4.27188953,5.20085176 4.37288921,5.24354153 4.4464,5.3192 L8,8.9168 L11.5536,5.3192 C11.6284927,5.24307539 11.7308111,5.20020394 11.8376,5.20020394 C11.9443889,5.20020394 12.0467073,5.24307539 12.1216,5.3192 L12.6816,5.8936 C12.839553,6.05217821 12.839553,6.30862179 12.6816,6.4672 L8.576,10.6224 Z',
-                id: 'Arrow-\u8DEF\u5F84',
-              }),
-            ),
-          ),
-        ),
-      ),
-    ),
-  );
-}
-
-export default Arrow;

package/src/client/antd-token-previewer/icons/Brush.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-
-declare const res: React.FC<React.SVGProps<SVGSVGElement>>;
-export default res;

package/src/client/antd-token-previewer/icons/Brush.js

@@ -1,59 +0,0 @@
-import * as React from 'react';
-
-function Brush(props) {
-  return /*#__PURE__*/ React.createElement(
-    'svg',
-    Object.assign(
-      {
-        width: '1em',
-        height: '1em',
-        viewBox: '0 0 14 18',
-        xmlns: 'http://www.w3.org/2000/svg',
-        xmlnsXlink: 'http://www.w3.org/1999/xlink',
-      },
-      props,
-      {
-        style: Object.assign(
-          {
-            verticalAlign: '-0.125em',
-          },
-          props.style,
-        ),
-        className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
-      },
-    ),
-    /*#__PURE__*/ React.createElement(
-      'g',
-      {
-        id: 'Brush-\u9875\u9762-1',
-        stroke: 'none',
-        strokeWidth: 1,
-        fill: 'none',
-        fillRule: 'evenodd',
-        fillOpacity: 0.649999976,
-      },
-      /*#__PURE__*/ React.createElement(
-        'g',
-        {
-          id: 'Brush-\u4E3B\u9898\u7F16\u8F91\u5668---\u591A\u4E3B\u9898',
-          transform: 'translate(-17.000000, -121.000000)',
-          fill: 'currentColor',
-          fillRule: 'nonzero',
-        },
-        /*#__PURE__*/ React.createElement(
-          'g',
-          {
-            id: 'Brush-brush',
-            transform: 'translate(14.000000, 120.000000)',
-          },
-          /*#__PURE__*/ React.createElement('path', {
-            d: 'M8.20652175,3.2826087 L8.20652175,4.10326086 C8.20652175,4.55649455 7.83910325,4.92391304 7.38586957,4.92391304 C6.93263588,4.92391304 6.56521738,4.55649455 6.56521738,4.10326086 L6.56521738,3.2826087 L4.92391304,3.2826087 L4.92391304,8.20652175 L14.7717391,8.20652175 L14.7717391,3.2826087 L13.1304348,3.2826087 L13.1304348,5.74456522 C13.1304348,6.19779891 12.7630163,6.5652174 12.3097826,6.5652174 C11.8565489,6.5652174 11.4891304,6.19779891 11.4891304,5.74456522 L11.4891304,3.2826087 L8.20652175,3.2826087 Z M4.92391304,9.84782609 L4.92391304,11.4891304 L7.72233695,11.4891304 C8.08431263,11.4890155 8.42799204,11.6482243 8.66197039,11.9244136 C8.89594874,12.2006029 8.99650752,12.5657753 8.93690217,12.9228098 L8.60043479,14.9399728 C8.51784643,15.435105 8.73592476,15.9322123 9.15616576,16.2067558 C9.57640676,16.4812994 10.1192454,16.4812994 10.5394864,16.2067558 C10.9597274,15.9322123 11.1778057,15.435105 11.0952174,14.9399728 L10.75875,12.9228098 C10.6991446,12.5657753 10.7997034,12.2006029 11.0336818,11.9244136 C11.2676601,11.6482243 11.6113395,11.4890155 11.9733152,11.4891304 L14.7717391,11.4891304 L14.7717391,9.84782609 L4.92391304,9.84782609 Z M12.7143641,14.6699783 C12.9035912,15.807501 12.4022968,16.9492894 11.4368082,17.5798421 C10.4713197,18.2103948 9.2243325,18.2103948 8.25884395,17.5798421 C7.2933554,16.9492894 6.79206095,15.807501 6.98128804,14.6699783 L7.23815217,13.1304348 L4.92391304,13.1304348 C4.48861206,13.1304348 4.07113988,12.9575121 3.76333561,12.6497079 C3.45553133,12.3419036 3.2826087,11.9244314 3.2826087,11.4891304 L3.2826087,3.2826087 C3.2826087,2.84730772 3.45553133,2.42983554 3.76333561,2.12203126 C4.07113988,1.81422698 4.48861206,1.64130434 4.92391304,1.64130434 L14.7717391,1.64130434 C15.2070401,1.64130434 15.6245123,1.81422698 15.9323166,2.12203126 C16.2401208,2.42983554 16.4130435,2.84730772 16.4130435,3.2826087 L16.4130435,11.4891304 C16.4130435,11.9244314 16.2401208,12.3419036 15.9323166,12.6497079 C15.6245123,12.9575121 15.2070401,13.1304348 14.7717391,13.1304348 L12.4575,13.1304348 L12.7143641,14.6699783 L12.7143641,14.6699783 Z',
-            id: 'Brush-\u5F62\u72B6',
-          }),
-        ),
-      ),
-    ),
-  );
-}
-
-export default Brush;

package/src/client/antd-token-previewer/icons/Compact.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-
-declare const res: React.FC<React.SVGProps<SVGSVGElement>>;
-export default res;

package/src/client/antd-token-previewer/icons/Compact.js

@@ -1,73 +0,0 @@
-import * as React from 'react';
-
-function Compact(props) {
-  return /*#__PURE__*/ React.createElement(
-    'svg',
-    Object.assign(
-      {
-        width: '1em',
-        height: '1em',
-        viewBox: '0 0 17 16',
-        xmlns: 'http://www.w3.org/2000/svg',
-        xmlnsXlink: 'http://www.w3.org/1999/xlink',
-      },
-      props,
-      {
-        style: Object.assign(
-          {
-            verticalAlign: '-0.125em',
-          },
-          props.style,
-        ),
-        className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
-      },
-    ),
-    /*#__PURE__*/ React.createElement(
-      'g',
-      {
-        id: 'Compact-\u9875\u9762-1',
-        stroke: 'none',
-        strokeWidth: 1,
-        fill: 'none',
-        fillRule: 'evenodd',
-      },
-      /*#__PURE__*/ React.createElement(
-        'g',
-        {
-          id: 'Compact-\u9ED8\u8BA4',
-          transform: 'translate(-9.000000, -82.500000)',
-          fill: 'currentColor',
-          fillRule: 'nonzero',
-        },
-        /*#__PURE__*/ React.createElement(
-          'g',
-          {
-            id: 'Compact-\u9009\u9879\u4E00',
-            transform: 'translate(9.268811, 79.500000)',
-          },
-          /*#__PURE__*/ React.createElement(
-            'g',
-            {
-              id: 'Compact-smaller',
-              transform: 'translate(0.000000, 3.000000)',
-            },
-            /*#__PURE__*/ React.createElement('rect', {
-              id: 'Compact-\u77E9\u5F62',
-              opacity: 0,
-              x: 0,
-              y: 0,
-              width: 16,
-              height: 16,
-            }),
-            /*#__PURE__*/ React.createElement('path', {
-              d: 'M10,14 L10,12 C10,10.8666667 10.8666667,10 12,10 L14,10 C14.4,10 14.6666667,10.2666667 14.6666667,10.6666667 C14.6666667,11.0666667 14.4,11.3333333 14,11.3333333 L12,11.3333333 C11.6,11.3333333 11.3333333,11.6 11.3333333,12 L11.3333333,14 C11.3333333,14.4 11.0666667,14.6666667 10.6666667,14.6666667 C10.2666667,14.6666667 10,14.4 10,14 L10,14 Z M4.66666667,14 L4.66666667,12 C4.66666667,11.6 4.4,11.3333333 4,11.3333333 L2,11.3333333 C1.6,11.3333333 1.33333333,11.0666667 1.33333333,10.6666667 C1.33333333,10.2666667 1.6,10 2,10 L4,10 C5.13333333,10 6,10.8666667 6,12 L6,14 C6,14.4 5.73333333,14.6666667 5.33333333,14.6666667 C4.93333333,14.6666667 4.66666666,14.4 4.66666667,14 L4.66666667,14 Z M12,6 C10.8666667,6 10,5.13333333 10,4 L10,2 C10,1.6 10.2666667,1.33333333 10.6666667,1.33333333 C11.0666667,1.33333333 11.3333333,1.6 11.3333333,2 L11.3333333,4 C11.3333333,4.4 11.6,4.66666667 12,4.66666667 L14,4.66666667 C14.4,4.66666667 14.6666667,4.93333334 14.6666667,5.33333333 C14.6666667,5.73333331 14.4,6 14,6 L12,6 L12,6 Z M2,6 C1.6,6 1.33333333,5.73333333 1.33333333,5.33333333 C1.33333333,4.93333333 1.6,4.66666666 2,4.66666667 L4,4.66666667 C4.4,4.66666667 4.66666667,4.4 4.66666667,4 L4.66666667,2 C4.66666667,1.6 4.93333334,1.33333333 5.33333333,1.33333333 C5.73333331,1.33333333 6,1.6 6,2 L6,4 C6,5.13333333 5.13333333,6 4,6 L2,6 Z',
-              id: 'Compact-\u5F62\u72B6',
-            }),
-          ),
-        ),
-      ),
-    ),
-  );
-}
-
-export default Compact;

package/src/client/antd-token-previewer/icons/Control.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-
-declare const res: React.FC<React.SVGProps<SVGSVGElement>>;
-export default res;