add all frontend files

node_modules/antd/es/image/PreviewGroup.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { GroupConsumerProps } from 'rc-image/lib/PreviewGroup';
+export declare const icons: {
+    rotateLeft: React.JSX.Element;
+    rotateRight: React.JSX.Element;
+    zoomIn: React.JSX.Element;
+    zoomOut: React.JSX.Element;
+    close: React.JSX.Element;
+    left: React.JSX.Element;
+    right: React.JSX.Element;
+    flipX: React.JSX.Element;
+    flipY: React.JSX.Element;
+};
+declare const InternalPreviewGroup: React.FC<GroupConsumerProps>;
+export default InternalPreviewGroup;

node_modules/antd/es/image/PreviewGroup.js

@@ -0,0 +1,80 @@
+"use client";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import CloseOutlined from "@ant-design/icons/es/icons/CloseOutlined";
+import LeftOutlined from "@ant-design/icons/es/icons/LeftOutlined";
+import RightOutlined from "@ant-design/icons/es/icons/RightOutlined";
+import RotateLeftOutlined from "@ant-design/icons/es/icons/RotateLeftOutlined";
+import RotateRightOutlined from "@ant-design/icons/es/icons/RotateRightOutlined";
+import SwapOutlined from "@ant-design/icons/es/icons/SwapOutlined";
+import ZoomInOutlined from "@ant-design/icons/es/icons/ZoomInOutlined";
+import ZoomOutOutlined from "@ant-design/icons/es/icons/ZoomOutOutlined";
+import classNames from 'classnames';
+import RcImage from 'rc-image';
+import { useZIndex } from '../_util/hooks';
+import { getTransitionName } from '../_util/motion';
+import { ConfigContext } from '../config-provider';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
+import useStyle from './style';
+export const icons = {
+  rotateLeft: /*#__PURE__*/React.createElement(RotateLeftOutlined, null),
+  rotateRight: /*#__PURE__*/React.createElement(RotateRightOutlined, null),
+  zoomIn: /*#__PURE__*/React.createElement(ZoomInOutlined, null),
+  zoomOut: /*#__PURE__*/React.createElement(ZoomOutOutlined, null),
+  close: /*#__PURE__*/React.createElement(CloseOutlined, null),
+  left: /*#__PURE__*/React.createElement(LeftOutlined, null),
+  right: /*#__PURE__*/React.createElement(RightOutlined, null),
+  flipX: /*#__PURE__*/React.createElement(SwapOutlined, null),
+  flipY: /*#__PURE__*/React.createElement(SwapOutlined, {
+    rotate: 90
+  })
+};
+const InternalPreviewGroup = _a => {
+  var {
+      previewPrefixCls: customizePrefixCls,
+      preview
+    } = _a,
+    otherProps = __rest(_a, ["previewPrefixCls", "preview"]);
+  const {
+    getPrefixCls,
+    direction
+  } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('image', customizePrefixCls);
+  const previewPrefixCls = `${prefixCls}-preview`;
+  const rootPrefixCls = getPrefixCls();
+  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
+  const [zIndex] = useZIndex('ImagePreview', typeof preview === 'object' ? preview.zIndex : undefined);
+  const memoizedIcons = React.useMemo(() => Object.assign(Object.assign({}, icons), {
+    left: direction === 'rtl' ? /*#__PURE__*/React.createElement(RightOutlined, null) : /*#__PURE__*/React.createElement(LeftOutlined, null),
+    right: direction === 'rtl' ? /*#__PURE__*/React.createElement(LeftOutlined, null) : /*#__PURE__*/React.createElement(RightOutlined, null)
+  }), [direction]);
+  const mergedPreview = React.useMemo(() => {
+    var _a;
+    if (preview === false) {
+      return preview;
+    }
+    const _preview = typeof preview === 'object' ? preview : {};
+    const mergedRootClassName = classNames(hashId, cssVarCls, rootCls, (_a = _preview.rootClassName) !== null && _a !== void 0 ? _a : '');
+    return Object.assign(Object.assign({}, _preview), {
+      transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
+      maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
+      rootClassName: mergedRootClassName,
+      zIndex
+    });
+  }, [preview, rootPrefixCls, zIndex, hashId, cssVarCls, rootCls]);
+  return wrapCSSVar(/*#__PURE__*/React.createElement(RcImage.PreviewGroup, Object.assign({
+    preview: mergedPreview,
+    previewPrefixCls: previewPrefixCls,
+    icons: memoizedIcons
+  }, otherProps)));
+};
+export default InternalPreviewGroup;

node_modules/antd/es/image/index.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { ImagePreviewType, ImageProps as RcImageProps } from 'rc-image';
+import PreviewGroup from './PreviewGroup';
+export interface CompositionImage<P> extends React.FC<P> {
+    PreviewGroup: typeof PreviewGroup;
+}
+type Replace<T, K extends keyof T, V> = Partial<Omit<T, K> & {
+    [P in K]: V;
+}>;
+interface PreviewType extends Omit<ImagePreviewType, 'destroyOnClose'> {
+    /** @deprecated Please use destroyOnHidden instead */
+    destroyOnClose?: boolean;
+    /**
+     * @since 5.25.0
+     */
+    destroyOnHidden?: boolean;
+}
+type ImageProps = Replace<RcImageProps, 'preview', boolean | PreviewType>;
+declare const Image: CompositionImage<ImageProps>;
+export type { ImageProps };
+export default Image;

node_modules/antd/es/image/index.js

@@ -0,0 +1,98 @@
+"use client";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import EyeOutlined from "@ant-design/icons/es/icons/EyeOutlined";
+import classNames from 'classnames';
+import RcImage from 'rc-image';
+import { useZIndex } from '../_util/hooks';
+import { getTransitionName } from '../_util/motion';
+import { devUseWarning } from '../_util/warning';
+import { useComponentConfig } from '../config-provider/context';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
+import { useLocale } from '../locale';
+import PreviewGroup, { icons } from './PreviewGroup';
+import useStyle from './style';
+const Image = props => {
+  const {
+      prefixCls: customizePrefixCls,
+      preview,
+      className,
+      rootClassName,
+      style,
+      fallback
+    } = props,
+    otherProps = __rest(props, ["prefixCls", "preview", "className", "rootClassName", "style", "fallback"]);
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Image');
+    warning.deprecated(!(preview && typeof preview === 'object' && 'destroyOnClose' in preview), 'destroyOnClose', 'destroyOnHidden');
+  }
+  const {
+    getPrefixCls,
+    getPopupContainer: getContextPopupContainer,
+    className: contextClassName,
+    style: contextStyle,
+    preview: contextPreview,
+    fallback: contextFallback
+  } = useComponentConfig('image');
+  const [imageLocale] = useLocale('Image');
+  const prefixCls = getPrefixCls('image', customizePrefixCls);
+  const rootPrefixCls = getPrefixCls();
+  // Style
+  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
+  const mergedRootClassName = classNames(rootClassName, hashId, cssVarCls, rootCls);
+  const mergedClassName = classNames(className, hashId, contextClassName);
+  const [zIndex] = useZIndex('ImagePreview', typeof preview === 'object' ? preview.zIndex : undefined);
+  const mergedPreview = React.useMemo(() => {
+    if (preview === false) {
+      return preview;
+    }
+    const _preview = typeof preview === 'object' ? preview : {};
+    const {
+        getContainer,
+        closeIcon,
+        rootClassName,
+        destroyOnClose,
+        destroyOnHidden
+      } = _preview,
+      restPreviewProps = __rest(_preview, ["getContainer", "closeIcon", "rootClassName", "destroyOnClose", "destroyOnHidden"]);
+    return Object.assign(Object.assign({
+      mask: (/*#__PURE__*/React.createElement("div", {
+        className: `${prefixCls}-mask-info`
+      }, /*#__PURE__*/React.createElement(EyeOutlined, null), imageLocale === null || imageLocale === void 0 ? void 0 : imageLocale.preview)),
+      icons
+    }, restPreviewProps), {
+      // TODO: In the future, destroyOnClose in rc-image needs to be upgrade to destroyOnHidden
+      destroyOnClose: destroyOnHidden !== null && destroyOnHidden !== void 0 ? destroyOnHidden : destroyOnClose,
+      rootClassName: classNames(mergedRootClassName, rootClassName),
+      getContainer: getContainer !== null && getContainer !== void 0 ? getContainer : getContextPopupContainer,
+      transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
+      maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
+      zIndex,
+      closeIcon: closeIcon !== null && closeIcon !== void 0 ? closeIcon : contextPreview === null || contextPreview === void 0 ? void 0 : contextPreview.closeIcon
+    });
+  }, [preview, imageLocale, contextPreview === null || contextPreview === void 0 ? void 0 : contextPreview.closeIcon]);
+  const mergedStyle = Object.assign(Object.assign({}, contextStyle), style);
+  const mergedFallback = fallback !== null && fallback !== void 0 ? fallback : contextFallback;
+  return wrapCSSVar(/*#__PURE__*/React.createElement(RcImage, Object.assign({
+    prefixCls: prefixCls,
+    preview: mergedPreview,
+    rootClassName: mergedRootClassName,
+    className: mergedClassName,
+    style: mergedStyle,
+    fallback: mergedFallback
+  }, otherProps)));
+};
+Image.PreviewGroup = PreviewGroup;
+if (process.env.NODE_ENV !== 'production') {
+  Image.displayName = 'Image';
+}
+export default Image;

node_modules/antd/es/image/style/index.d.ts

@@ -0,0 +1,59 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
+export interface ComponentToken {
+    /**
+     * @desc 预览浮层 z-index
+     * @descEN z-index of preview popup
+     */
+    zIndexPopup: number;
+    /**
+     * @desc 预览操作图标大小
+     * @descEN Size of preview operation icon
+     */
+    previewOperationSize: number;
+    /**
+     * @desc 预览操作图标颜色
+     * @descEN Color of preview operation icon
+     */
+    previewOperationColor: string;
+    /**
+     * @desc 预览操作图标悬浮颜色
+     * @descEN Color of hovered preview operation icon
+     */
+    previewOperationHoverColor: string;
+    /**
+     * @desc 预览操作图标禁用颜色
+     * @descEN Disabled color of preview operation icon
+     */
+    previewOperationColorDisabled: string;
+}
+/**
+ * @desc Image 组件的 Token
+ * @descEN Token for Image component
+ */
+export interface ImageToken extends FullToken<'Image'> {
+    /**
+     * @desc 预览类名
+     * @descEN Preview class name
+     */
+    previewCls: string;
+    /**
+     * @desc 模态框遮罩背景色
+     * @descEN Background color of modal mask
+     */
+    modalMaskBg: string;
+    /**
+     * @desc 预览切换按钮尺寸
+     * @descEN Size of preview switch button
+     */
+    imagePreviewSwitchSize: number;
+}
+export type PositionType = 'static' | 'relative' | 'fixed' | 'absolute' | 'sticky' | undefined;
+export declare const genBoxStyle: (position?: PositionType) => CSSObject;
+export declare const genImageMaskStyle: (token: ImageToken) => CSSObject;
+export declare const genPreviewOperationsStyle: (token: ImageToken) => CSSObject;
+export declare const genPreviewSwitchStyle: (token: ImageToken) => CSSObject;
+export declare const genImagePreviewStyle: GenerateStyle<ImageToken>;
+export declare const prepareComponentToken: GetDefaultToken<'Image'>;
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
+export default _default;

node_modules/antd/es/image/style/index.js

@@ -0,0 +1,310 @@
+import { unit } from '@ant-design/cssinjs';
+import { FastColor } from '@ant-design/fast-color';
+import { genModalMaskStyle } from '../../modal/style';
+import { textEllipsis } from '../../style';
+import { initFadeMotion, initZoomMotion } from '../../style/motion';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
+export const genBoxStyle = position => ({
+  position: position || 'absolute',
+  inset: 0
+});
+export const genImageMaskStyle = token => {
+  const {
+    iconCls,
+    motionDurationSlow,
+    paddingXXS,
+    marginXXS,
+    prefixCls,
+    colorTextLightSolid
+  } = token;
+  return {
+    position: 'absolute',
+    inset: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: colorTextLightSolid,
+    background: new FastColor('#000').setA(0.5).toRgbString(),
+    cursor: 'pointer',
+    opacity: 0,
+    transition: `opacity ${motionDurationSlow}`,
+    [`.${prefixCls}-mask-info`]: Object.assign(Object.assign({}, textEllipsis), {
+      padding: `0 ${unit(paddingXXS)}`,
+      [iconCls]: {
+        marginInlineEnd: marginXXS,
+        svg: {
+          verticalAlign: 'baseline'
+        }
+      }
+    })
+  };
+};
+export const genPreviewOperationsStyle = token => {
+  const {
+    previewCls,
+    modalMaskBg,
+    paddingSM,
+    marginXL,
+    margin,
+    paddingLG,
+    previewOperationColorDisabled,
+    previewOperationHoverColor,
+    motionDurationSlow,
+    iconCls,
+    colorTextLightSolid
+  } = token;
+  const operationBg = new FastColor(modalMaskBg).setA(0.1);
+  const operationBgHover = operationBg.clone().setA(0.2);
+  return {
+    [`${previewCls}-footer`]: {
+      position: 'fixed',
+      bottom: marginXL,
+      left: {
+        _skip_check_: true,
+        value: '50%'
+      },
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      color: token.previewOperationColor,
+      transform: 'translateX(-50%)'
+    },
+    [`${previewCls}-progress`]: {
+      marginBottom: margin
+    },
+    [`${previewCls}-close`]: {
+      position: 'fixed',
+      top: marginXL,
+      right: {
+        _skip_check_: true,
+        value: marginXL
+      },
+      display: 'flex',
+      color: colorTextLightSolid,
+      backgroundColor: operationBg.toRgbString(),
+      borderRadius: '50%',
+      padding: paddingSM,
+      outline: 0,
+      border: 0,
+      cursor: 'pointer',
+      transition: `all ${motionDurationSlow}`,
+      '&:hover': {
+        backgroundColor: operationBgHover.toRgbString()
+      },
+      [`& > ${iconCls}`]: {
+        fontSize: token.previewOperationSize
+      }
+    },
+    [`${previewCls}-operations`]: {
+      display: 'flex',
+      alignItems: 'center',
+      padding: `0 ${unit(paddingLG)}`,
+      backgroundColor: operationBg.toRgbString(),
+      borderRadius: 100,
+      '&-operation': {
+        marginInlineStart: paddingSM,
+        padding: paddingSM,
+        cursor: 'pointer',
+        transition: `all ${motionDurationSlow}`,
+        userSelect: 'none',
+        [`&:not(${previewCls}-operations-operation-disabled):hover > ${iconCls}`]: {
+          color: previewOperationHoverColor
+        },
+        '&-disabled': {
+          color: previewOperationColorDisabled,
+          cursor: 'not-allowed'
+        },
+        '&:first-of-type': {
+          marginInlineStart: 0
+        },
+        [`& > ${iconCls}`]: {
+          fontSize: token.previewOperationSize
+        }
+      }
+    }
+  };
+};
+export const genPreviewSwitchStyle = token => {
+  const {
+    modalMaskBg,
+    iconCls,
+    previewOperationColorDisabled,
+    previewCls,
+    zIndexPopup,
+    motionDurationSlow
+  } = token;
+  const operationBg = new FastColor(modalMaskBg).setA(0.1);
+  const operationBgHover = operationBg.clone().setA(0.2);
+  return {
+    [`${previewCls}-switch-left, ${previewCls}-switch-right`]: {
+      position: 'fixed',
+      insetBlockStart: '50%',
+      zIndex: token.calc(zIndexPopup).add(1).equal(),
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: token.imagePreviewSwitchSize,
+      height: token.imagePreviewSwitchSize,
+      marginTop: token.calc(token.imagePreviewSwitchSize).mul(-1).div(2).equal(),
+      color: token.previewOperationColor,
+      background: operationBg.toRgbString(),
+      borderRadius: '50%',
+      transform: `translateY(-50%)`,
+      cursor: 'pointer',
+      transition: `all ${motionDurationSlow}`,
+      userSelect: 'none',
+      '&:hover': {
+        background: operationBgHover.toRgbString()
+      },
+      '&-disabled': {
+        '&, &:hover': {
+          color: previewOperationColorDisabled,
+          background: 'transparent',
+          cursor: 'not-allowed',
+          [`> ${iconCls}`]: {
+            cursor: 'not-allowed'
+          }
+        }
+      },
+      [`> ${iconCls}`]: {
+        fontSize: token.previewOperationSize
+      }
+    },
+    [`${previewCls}-switch-left`]: {
+      insetInlineStart: token.marginSM
+    },
+    [`${previewCls}-switch-right`]: {
+      insetInlineEnd: token.marginSM
+    }
+  };
+};
+export const genImagePreviewStyle = token => {
+  const {
+    motionEaseOut,
+    previewCls,
+    motionDurationSlow,
+    componentCls
+  } = token;
+  return [{
+    [`${componentCls}-preview-root`]: {
+      [previewCls]: {
+        height: '100%',
+        textAlign: 'center',
+        pointerEvents: 'none'
+      },
+      [`${previewCls}-body`]: Object.assign(Object.assign({}, genBoxStyle()), {
+        overflow: 'hidden'
+      }),
+      [`${previewCls}-img`]: {
+        maxWidth: '100%',
+        maxHeight: '70%',
+        verticalAlign: 'middle',
+        transform: 'scale3d(1, 1, 1)',
+        cursor: 'grab',
+        transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
+        userSelect: 'none',
+        '&-wrapper': Object.assign(Object.assign({}, genBoxStyle()), {
+          transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
+          // https://github.com/ant-design/ant-design/issues/39913
+          // TailwindCSS will reset img default style.
+          // Let's set back.
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          '& > *': {
+            pointerEvents: 'auto'
+          },
+          '&::before': {
+            display: 'inline-block',
+            width: 1,
+            height: '50%',
+            marginInlineEnd: -1,
+            content: '""'
+          }
+        })
+      },
+      [`${previewCls}-moving`]: {
+        [`${previewCls}-preview-img`]: {
+          cursor: 'grabbing',
+          '&-wrapper': {
+            transitionDuration: '0s'
+          }
+        }
+      }
+    }
+  },
+  // Override
+  {
+    [`${componentCls}-preview-root`]: {
+      [`${previewCls}-wrap`]: {
+        zIndex: token.zIndexPopup
+      }
+    }
+  },
+  // Preview operations & switch
+  {
+    [`${componentCls}-preview-operations-wrapper`]: {
+      position: 'fixed',
+      zIndex: token.calc(token.zIndexPopup).add(1).equal()
+    },
+    '&': [genPreviewOperationsStyle(token), genPreviewSwitchStyle(token)]
+  }];
+};
+const genImageStyle = token => {
+  const {
+    componentCls
+  } = token;
+  return {
+    // ============================== image ==============================
+    [componentCls]: {
+      position: 'relative',
+      display: 'inline-block',
+      [`${componentCls}-img`]: {
+        width: '100%',
+        height: 'auto',
+        verticalAlign: 'middle'
+      },
+      [`${componentCls}-img-placeholder`]: {
+        backgroundColor: token.colorBgContainerDisabled,
+        backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center center',
+        backgroundSize: '30%'
+      },
+      [`${componentCls}-mask`]: Object.assign({}, genImageMaskStyle(token)),
+      [`${componentCls}-mask:hover`]: {
+        opacity: 1
+      },
+      [`${componentCls}-placeholder`]: Object.assign({}, genBoxStyle())
+    }
+  };
+};
+const genPreviewMotion = token => {
+  const {
+    previewCls
+  } = token;
+  return {
+    [`${previewCls}-root`]: initZoomMotion(token, 'zoom'),
+    '&': initFadeMotion(token, true)
+  };
+};
+// ============================== Export ==============================
+export const prepareComponentToken = token => ({
+  zIndexPopup: token.zIndexPopupBase + 80,
+  previewOperationColor: new FastColor(token.colorTextLightSolid).setA(0.65).toRgbString(),
+  previewOperationHoverColor: new FastColor(token.colorTextLightSolid).setA(0.85).toRgbString(),
+  previewOperationColorDisabled: new FastColor(token.colorTextLightSolid).setA(0.25).toRgbString(),
+  previewOperationSize: token.fontSizeIcon * 1.5 // FIXME: fontSizeIconLG
+});
+export default genStyleHooks('Image', token => {
+  const previewCls = `${token.componentCls}-preview`;
+  const imageToken = mergeToken(token, {
+    previewCls,
+    modalMaskBg: new FastColor('#000').setA(0.45).toRgbString(),
+    // FIXME: Shared Token
+    imagePreviewSwitchSize: token.controlHeightLG
+  });
+  return [genImageStyle(imageToken), genImagePreviewStyle(imageToken), genModalMaskStyle(mergeToken(imageToken, {
+    componentCls: previewCls
+  })), genPreviewMotion(imageToken)];
+}, prepareComponentToken);