@lobehub/ui 5.25.0 → 5.26.0

package/es/Image/Image.mjs

@@ -1,62 +1,163 @@
 "use client";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import SkeletonAvatar from "../Skeleton/SkeletonAvatar.mjs";
+import { usePreviewGroupContext } from "./PreviewGroup.mjs";
 import { FALLBACK_DARK, FALLBACK_LIGHT, styles, variants } from "./style.mjs";
-import usePreview from "./components/usePreview.mjs";
-import { memo } from "react";
+import { openPreview } from "./viewer/registry.mjs";
+import PreviewOutlet from "./viewer/PreviewOutlet.mjs";
+import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Image, Skeleton } from "antd";
-import { cssVar, cx, useThemeMode } from "antd-style";
+import { cx, useThemeMode } from "antd-style";
 //#region src/Image/Image.tsx
-const Image$1 = memo(({ ref, style, preview, isLoading, maxHeight = "100%", maxWidth = "100%", minHeight, minWidth, actions, className, alwaysShowActions, variant = "filled", objectFit = "cover", classNames, styles: customStyles, onClick, width, height, ...rest }) => {
+const DEFAULT_MAX_SCALE = 8;
+const resolvePreview = (groupPreview, imagePreview) => {
+	if (imagePreview === false) return false;
+	if (imagePreview === void 0 && groupPreview === false) return false;
+	const groupOptions = typeof groupPreview === "object" ? groupPreview : void 0;
+	const imageOptions = typeof imagePreview === "object" ? imagePreview : void 0;
+	return {
+		...groupOptions,
+		...imageOptions
+	};
+};
+const Image = memo(({ ref, style, preview, isLoading, maxHeight = "100%", maxWidth = "100%", minHeight, minWidth, actions, className, alwaysShowActions, variant = "filled", objectFit = "cover", classNames, styles: customStyles, onClick, onError, onPointerDown, width, height, size, src, alt, loading = "lazy", ...rest }) => {
 	const { isDarkMode } = useThemeMode();
+	const [hasError, setHasError] = useState(false);
+	const lastSrcRef = useRef(src);
+	const imgRef = useRef(null);
+	const preOpenFocusRef = useRef(null);
+	const id = useId();
+	const group = usePreviewGroupContext();
+	if (lastSrcRef.current !== src) {
+		lastSrcRef.current = src;
+		if (hasError) setHasError(false);
+	}
+	const resolvedWidth = width ?? size;
+	const resolvedHeight = height ?? size;
+	const resolvedPreview = resolvePreview(group?.preview, preview);
+	const previewEnabled = resolvedPreview !== false;
+	const resolvedOptions = useMemo(() => previewEnabled ? {
+		maxScale: DEFAULT_MAX_SCALE,
+		...resolvedPreview
+	} : void 0, [previewEnabled, resolvedPreview]);
+	const previewSrc = resolvedOptions?.src;
+	useEffect(() => {
+		if (!group) return;
+		return group.register({
+			getElement: () => imgRef.current,
+			id,
+			options: resolvedOptions,
+			previewSrc,
+			src: src ?? ""
+		});
+	}, [
+		group,
+		id,
+		src,
+		previewSrc,
+		resolvedOptions
+	]);
+	const handleError = useCallback((event) => {
+		setHasError(true);
+		onError?.(event);
+	}, [onError]);
+	const handlePointerDown = useCallback((event) => {
+		onPointerDown?.(event);
+		const active = document.activeElement;
+		preOpenFocusRef.current = active instanceof HTMLElement && active !== document.body && active !== document.documentElement ? active : null;
+	}, [onPointerDown]);
+	const handleClick = useCallback((event) => {
+		onClick?.(event);
+		if (!previewEnabled || !imgRef.current || !resolvedOptions) return;
+		const clickedEntry = {
+			element: imgRef.current,
+			options: resolvedOptions,
+			previewSrc,
+			src: imgRef.current.currentSrc || imgRef.current.src
+		};
+		const openerFocusElement = preOpenFocusRef.current;
+		if (!group) {
+			openPreview(clickedEntry, void 0, 0, openerFocusElement);
+			return;
+		}
+		const galleryEntries = [];
+		let clickedIndex = -1;
+		for (const groupEntry of group.getEntries()) {
+			const element = groupEntry.getElement();
+			if (!element || !groupEntry.options) continue;
+			if (element === imgRef.current) clickedIndex = galleryEntries.length;
+			galleryEntries.push({
+				element,
+				options: groupEntry.options,
+				previewSrc: groupEntry.previewSrc,
+				src: element.currentSrc || element.src
+			});
+		}
+		openPreview(clickedEntry, galleryEntries, clickedIndex >= 0 ? clickedIndex : 0, openerFocusElement);
+	}, [
+		onClick,
+		previewEnabled,
+		resolvedOptions,
+		previewSrc,
+		group
+	]);
 	const actionsClassName = alwaysShowActions ? styles.actionsVisible : styles.actionsHidden;
-	const mergePreview = usePreview(preview);
 	if (isLoading) return /* @__PURE__ */ jsx("div", {
 		onClick,
-		children: /* @__PURE__ */ jsx(Skeleton.Avatar, {
+		children: /* @__PURE__ */ jsx(SkeletonAvatar, {
 			active: true,
+			height: resolvedHeight,
 			style: {
-				borderRadius: cssVar.borderRadius,
-				height,
 				maxHeight,
 				maxWidth,
 				minHeight,
-				minWidth,
-				width
-			}
+				minWidth
+			},
+			width: resolvedWidth
 		})
 	});
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		className: cx(variants({ variant }), className),
 		ref,
 		style,
-		children: [actions && /* @__PURE__ */ jsx("div", {
-			className: cx(actionsClassName, alwaysShowActions ? "" : "actions-hidden"),
-			children: actions
-		}), /* @__PURE__ */ jsx(Image, {
-			className: cx(styles.image, classNames?.image),
-			fallback: isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT,
-			height,
-			loading: "lazy",
-			preview: preview === false ? false : mergePreview,
-			width,
-			classNames: { root: cx(styles.wrapper, classNames?.wrapper) },
-			style: {
-				maxHeight,
-				maxWidth,
-				minHeight,
-				minWidth,
-				objectFit: objectFit || "cover",
-				...customStyles?.image
-			},
-			styles: { root: customStyles?.wrapper },
-			onClick,
-			...rest
-		})]
+		children: [
+			actions && /* @__PURE__ */ jsx("div", {
+				className: cx(actionsClassName, alwaysShowActions ? "" : "actions-hidden"),
+				children: actions
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cx(styles.wrapper, classNames?.wrapper),
+				style: customStyles?.wrapper,
+				children: /* @__PURE__ */ jsx("img", {
+					alt,
+					className: cx(styles.image, previewEnabled && styles.previewable, classNames?.image),
+					height: resolvedHeight,
+					loading,
+					ref: imgRef,
+					src: hasError ? isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT : src,
+					width: resolvedWidth,
+					style: {
+						height: resolvedHeight,
+						maxHeight,
+						maxWidth,
+						minHeight,
+						minWidth,
+						objectFit,
+						width: resolvedWidth,
+						...customStyles?.image
+					},
+					onClick: handleClick,
+					onError: handleError,
+					onPointerDown: handlePointerDown,
+					...rest
+				})
+			}),
+			previewEnabled && /* @__PURE__ */ jsx(PreviewOutlet, { elementRef: imgRef })
+		]
 	});
 });
-Image$1.displayName = "Image";
+Image.displayName = "Image";
 //#endregion
-export { Image$1 as default };
+export { Image as default };
 
 //# sourceMappingURL=Image.mjs.map

package/es/Image/Image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","names":["Image","Flexbox","AntImage"],"sources":["../../src/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport { Image as AntImage, Skeleton } from 'antd';\nimport { cssVar, cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport usePreview from './components/usePreview';\nimport { FALLBACK_DARK, FALLBACK_LIGHT, styles, variants } from './style';\nimport type { ImageProps } from './type';\n\nconst Image = memo<ImageProps>(\n  ({\n    ref,\n    style,\n    preview,\n    isLoading,\n    maxHeight = '100%',\n    maxWidth = '100%',\n    minHeight,\n    minWidth,\n    actions,\n    className,\n    alwaysShowActions,\n    variant = 'filled',\n    objectFit = 'cover',\n    classNames,\n    styles: customStyles,\n    onClick,\n    width,\n    height,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const actionsClassName = alwaysShowActions ? styles.actionsVisible : styles.actionsHidden;\n    const mergePreview = usePreview(preview);\n\n    if (isLoading)\n      return (\n        <div onClick={onClick}>\n          <Skeleton.Avatar\n            active\n            style={{\n              borderRadius: cssVar.borderRadius,\n              height,\n              maxHeight,\n              maxWidth,\n              minHeight,\n              minWidth,\n              width,\n            }}\n          />\n        </div>\n      );\n\n    return (\n      <Flexbox className={cx(variants({ variant }), className)} ref={ref} style={style}>\n        {actions && (\n          <div className={cx(actionsClassName, alwaysShowActions ? '' : 'actions-hidden')}>\n            {actions}\n          </div>\n        )}\n        <AntImage\n          className={cx(styles.image, classNames?.image)}\n          fallback={isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT}\n          height={height}\n          loading={'lazy'}\n          preview={preview === false ? false : (mergePreview as any)}\n          width={width}\n          classNames={{\n            root: cx(styles.wrapper, classNames?.wrapper),\n          }}\n          style={{\n            maxHeight,\n            maxWidth,\n            minHeight,\n            minWidth,\n            objectFit: objectFit || 'cover',\n            ...customStyles?.image,\n          }}\n          styles={{\n            root: customStyles?.wrapper,\n          }}\n          onClick={onClick}\n          {...rest}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nImage.displayName = 'Image';\n\nexport default Image;\n"],"mappings":";;;;;;;;;AAYA,MAAMA,UAAQ,MACX,EACC,KACA,OACA,SACA,WACA,YAAY,QACZ,WAAW,QACX,WACA,UACA,SACA,WACA,mBACA,UAAU,UACV,YAAY,SACZ,YACA,QAAQ,cACR,SACA,OACA,QACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,mBAAmB,oBAAoB,OAAO,iBAAiB,OAAO;CAC5E,MAAM,eAAe,WAAW,OAAO;CAEvC,IAAI,WACF,OACE,oBAAC,OAAD;EAAc;EACZ,UAAA,oBAAC,SAAS,QAAV;GACE,QAAA;GACA,OAAO;IACL,cAAc,OAAO;IACrB;IACA;IACA;IACA;IACA;IACA;GACF;EACD,CAAA;CACE,CAAA;CAGT,OACE,qBAACC,mBAAD;EAAS,WAAW,GAAG,SAAS,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAQ;EAAY;EAA3E,UAAA,CACG,WACC,oBAAC,OAAD;GAAK,WAAW,GAAG,kBAAkB,oBAAoB,KAAK,gBAAgB;GAC3E,UAAA;EACE,CAAA,GAEP,oBAACC,OAAD;GACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;GAC7C,UAAU,aAAa,gBAAgB;GAC/B;GACR,SAAS;GACT,SAAS,YAAY,QAAQ,QAAS;GAC/B;GACP,YAAY,EACV,MAAM,GAAG,OAAO,SAAS,YAAY,OAAO,EAC9C;GACA,OAAO;IACL;IACA;IACA;IACA;IACA,WAAW,aAAa;IACxB,GAAG,cAAc;GACnB;GACA,QAAQ,EACN,MAAM,cAAc,QACtB;GACS;GACT,GAAI;EACL,CAAA,CACM;;AAEb,CACF;AAEA,QAAM,cAAc"}
+{"version":3,"file":"Image.mjs","names":["Flexbox"],"sources":["../../src/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport {\n  memo,\n  type MouseEvent,\n  type PointerEvent,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { SkeletonAvatar } from '@/Skeleton';\n\nimport { usePreviewGroupContext } from './PreviewGroup';\nimport { FALLBACK_DARK, FALLBACK_LIGHT, styles, variants } from './style';\nimport type { ImagePreviewOptions, ImageProps } from './type';\nimport PreviewOutlet from './viewer/PreviewOutlet';\nimport { openPreview, type PreviewEntry } from './viewer/registry';\n\nconst DEFAULT_MAX_SCALE = 8;\n\nconst resolvePreview = (\n  groupPreview: boolean | ImagePreviewOptions | undefined,\n  imagePreview: boolean | ImagePreviewOptions | undefined,\n): ImagePreviewOptions | false => {\n  if (imagePreview === false) return false;\n  if (imagePreview === undefined && groupPreview === false) return false;\n\n  const groupOptions = typeof groupPreview === 'object' ? groupPreview : undefined;\n  const imageOptions = typeof imagePreview === 'object' ? imagePreview : undefined;\n\n  return { ...groupOptions, ...imageOptions };\n};\n\nconst Image = memo<ImageProps>(\n  ({\n    ref,\n    style,\n    preview,\n    isLoading,\n    maxHeight = '100%',\n    maxWidth = '100%',\n    minHeight,\n    minWidth,\n    actions,\n    className,\n    alwaysShowActions,\n    variant = 'filled',\n    objectFit = 'cover',\n    classNames,\n    styles: customStyles,\n    onClick,\n    onError,\n    onPointerDown,\n    width,\n    height,\n    size,\n    src,\n    alt,\n    loading = 'lazy',\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const [hasError, setHasError] = useState(false);\n    const lastSrcRef = useRef(src);\n    const imgRef = useRef<HTMLImageElement>(null);\n    const preOpenFocusRef = useRef<HTMLElement | null>(null);\n    const id = useId();\n    const group = usePreviewGroupContext();\n\n    if (lastSrcRef.current !== src) {\n      lastSrcRef.current = src;\n      if (hasError) setHasError(false);\n    }\n\n    const resolvedWidth = width ?? size;\n    const resolvedHeight = height ?? size;\n\n    const resolvedPreview = resolvePreview(group?.preview, preview);\n    const previewEnabled = resolvedPreview !== false;\n    const resolvedOptions = useMemo(\n      () => (previewEnabled ? { maxScale: DEFAULT_MAX_SCALE, ...resolvedPreview } : undefined),\n      [previewEnabled, resolvedPreview],\n    );\n    const previewSrc = resolvedOptions?.src;\n\n    useEffect(() => {\n      if (!group) return;\n      return group.register({\n        getElement: () => imgRef.current,\n        id,\n        options: resolvedOptions,\n        previewSrc,\n        src: src ?? '',\n      });\n    }, [group, id, src, previewSrc, resolvedOptions]);\n\n    const handleError = useCallback(\n      (event: SyntheticEvent<HTMLImageElement>) => {\n        setHasError(true);\n        onError?.(event);\n      },\n      [onError],\n    );\n\n    const handlePointerDown = useCallback(\n      (event: PointerEvent<HTMLImageElement>) => {\n        onPointerDown?.(event);\n        const active = document.activeElement;\n        preOpenFocusRef.current =\n          active instanceof HTMLElement &&\n          active !== document.body &&\n          active !== document.documentElement\n            ? active\n            : null;\n      },\n      [onPointerDown],\n    );\n\n    const handleClick = useCallback(\n      (event: MouseEvent<HTMLImageElement>) => {\n        onClick?.(event);\n        if (!previewEnabled || !imgRef.current || !resolvedOptions) return;\n        const clickedEntry: PreviewEntry = {\n          element: imgRef.current,\n          options: resolvedOptions,\n          previewSrc,\n          src: imgRef.current.currentSrc || imgRef.current.src,\n        };\n        const openerFocusElement = preOpenFocusRef.current;\n\n        if (!group) {\n          openPreview(clickedEntry, undefined, 0, openerFocusElement);\n          return;\n        }\n\n        const galleryEntries: PreviewEntry[] = [];\n        let clickedIndex = -1;\n        for (const groupEntry of group.getEntries()) {\n          const element = groupEntry.getElement();\n          if (!element || !groupEntry.options) continue;\n          if (element === imgRef.current) clickedIndex = galleryEntries.length;\n          galleryEntries.push({\n            element,\n            options: groupEntry.options,\n            previewSrc: groupEntry.previewSrc,\n            src: element.currentSrc || element.src,\n          });\n        }\n        openPreview(\n          clickedEntry,\n          galleryEntries,\n          clickedIndex >= 0 ? clickedIndex : 0,\n          openerFocusElement,\n        );\n      },\n      [onClick, previewEnabled, resolvedOptions, previewSrc, group],\n    );\n\n    const actionsClassName = alwaysShowActions ? styles.actionsVisible : styles.actionsHidden;\n\n    if (isLoading)\n      return (\n        <div onClick={onClick}>\n          <SkeletonAvatar\n            active\n            height={resolvedHeight}\n            style={{ maxHeight, maxWidth, minHeight, minWidth }}\n            width={resolvedWidth}\n          />\n        </div>\n      );\n\n    return (\n      <Flexbox className={cx(variants({ variant }), className)} ref={ref} style={style}>\n        {actions && (\n          <div className={cx(actionsClassName, alwaysShowActions ? '' : 'actions-hidden')}>\n            {actions}\n          </div>\n        )}\n        <div className={cx(styles.wrapper, classNames?.wrapper)} style={customStyles?.wrapper}>\n          <img\n            alt={alt}\n            className={cx(styles.image, previewEnabled && styles.previewable, classNames?.image)}\n            height={resolvedHeight}\n            loading={loading}\n            ref={imgRef}\n            src={hasError ? (isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT) : src}\n            width={resolvedWidth}\n            style={{\n              height: resolvedHeight,\n              maxHeight,\n              maxWidth,\n              minHeight,\n              minWidth,\n              objectFit,\n              width: resolvedWidth,\n              ...customStyles?.image,\n            }}\n            onClick={handleClick}\n            onError={handleError}\n            onPointerDown={handlePointerDown}\n            {...rest}\n          />\n        </div>\n        {previewEnabled && <PreviewOutlet elementRef={imgRef} />}\n      </Flexbox>\n    );\n  },\n);\n\nImage.displayName = 'Image';\n\nexport default Image;\n"],"mappings":"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"}

package/es/Image/PreviewGroup.d.mts

@@ -1,4 +1,5 @@
 import { PreviewGroupProps } from "./type.mjs";
+import "./viewer/registry.mjs";
 //#region src/Image/PreviewGroup.d.ts
 declare const PreviewGroup: import("react").NamedExoticComponent<PreviewGroupProps>;
 //#endregion

package/es/Image/PreviewGroup.mjs

@@ -1,21 +1,44 @@
 "use client";
-import usePreview from "./components/usePreviewGroup.mjs";
-import { memo } from "react";
+import { createContext, memo, use, useCallback, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Image } from "antd";
 //#region src/Image/PreviewGroup.tsx
-const { PreviewGroup: AntdPreviewGroup } = Image;
-const PreviewGroup = memo(({ items, children, enable = true, preview }) => {
-	const mergePreview = usePreview(preview);
+const PreviewGroupContext = createContext(null);
+const usePreviewGroupContext = () => use(PreviewGroupContext);
+const compareEntries = (a, b) => {
+	const elementA = a.getElement();
+	const elementB = b.getElement();
+	if (!elementA || !elementB) return 0;
+	const position = elementA.compareDocumentPosition(elementB);
+	if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+	if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+	return 0;
+};
+const PreviewGroup = memo(({ children, enable = true, preview }) => {
+	const entriesRef = useRef(/* @__PURE__ */ new Map());
+	const register = useCallback((entry) => {
+		entriesRef.current.set(entry.id, entry);
+		return () => {
+			entriesRef.current.delete(entry.id);
+		};
+	}, []);
+	const getEntries = useCallback(() => [...entriesRef.current.values()].sort(compareEntries), []);
+	const value = useMemo(() => ({
+		getEntries,
+		preview,
+		register
+	}), [
+		getEntries,
+		preview,
+		register
+	]);
 	if (!enable) return children;
-	return /* @__PURE__ */ jsx(AntdPreviewGroup, {
-		items,
-		preview: mergePreview,
+	return /* @__PURE__ */ jsx(PreviewGroupContext, {
+		value,
 		children
 	});
 });
 PreviewGroup.displayName = "PreviewGroup";
 //#endregion
-export { PreviewGroup as default };
+export { PreviewGroup as default, usePreviewGroupContext };
 
 //# sourceMappingURL=PreviewGroup.mjs.map

package/es/Image/PreviewGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewGroup.mjs","names":["usePreviewGroup"],"sources":["../../src/Image/PreviewGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Image } from 'antd';\nimport { memo } from 'react';\n\nimport usePreviewGroup from './components/usePreviewGroup';\nimport type { PreviewGroupProps } from './type';\n\nconst { PreviewGroup: AntdPreviewGroup } = Image;\n\nconst PreviewGroup = memo<PreviewGroupProps>(({ items, children, enable = true, preview }) => {\n  const mergePreview = usePreviewGroup(preview);\n\n  if (!enable) return children;\n\n  return (\n    <AntdPreviewGroup items={items} preview={mergePreview}>\n      {children}\n    </AntdPreviewGroup>\n  );\n});\n\nPreviewGroup.displayName = 'PreviewGroup';\n\nexport default PreviewGroup;\n"],"mappings":";;;;;;AAQA,MAAM,EAAE,cAAc,qBAAqB;AAE3C,MAAM,eAAe,MAAyB,EAAE,OAAO,UAAU,SAAS,MAAM,cAAc;CAC5F,MAAM,eAAeA,WAAgB,OAAO;CAE5C,IAAI,CAAC,QAAQ,OAAO;CAEpB,OACE,oBAAC,kBAAD;EAAyB;EAAO,SAAS;EACtC;CACe,CAAA;AAEtB,CAAC;AAED,aAAa,cAAc"}
+{"version":3,"file":"PreviewGroup.mjs","names":[],"sources":["../../src/Image/PreviewGroup.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, memo, use, useCallback, useMemo, useRef } from 'react';\n\nimport type { ImagePreviewOptions, PreviewGroupProps } from './type';\nimport type { ResolvedPreviewOptions } from './viewer/registry';\n\nexport interface PreviewGroupEntry {\n  getElement: () => HTMLImageElement | null;\n  id: string;\n  options?: ResolvedPreviewOptions;\n  previewSrc?: string;\n  src: string;\n}\n\ninterface PreviewGroupContextValue {\n  getEntries: () => PreviewGroupEntry[];\n  preview?: boolean | ImagePreviewOptions;\n  register: (entry: PreviewGroupEntry) => () => void;\n}\n\nconst PreviewGroupContext = createContext<PreviewGroupContextValue | null>(null);\n\nexport const usePreviewGroupContext = () => use(PreviewGroupContext);\n\nconst compareEntries = (a: PreviewGroupEntry, b: PreviewGroupEntry) => {\n  const elementA = a.getElement();\n  const elementB = b.getElement();\n  if (!elementA || !elementB) return 0;\n  const position = elementA.compareDocumentPosition(elementB);\n  if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;\n  if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;\n  return 0;\n};\n\nconst PreviewGroup = memo<PreviewGroupProps>(({ children, enable = true, preview }) => {\n  const entriesRef = useRef(new Map<string, PreviewGroupEntry>());\n\n  const register = useCallback((entry: PreviewGroupEntry) => {\n    entriesRef.current.set(entry.id, entry);\n    return () => {\n      entriesRef.current.delete(entry.id);\n    };\n  }, []);\n\n  const getEntries = useCallback(() => [...entriesRef.current.values()].sort(compareEntries), []);\n\n  const value = useMemo<PreviewGroupContextValue>(\n    () => ({ getEntries, preview, register }),\n    [getEntries, preview, register],\n  );\n\n  if (!enable) return children;\n\n  return <PreviewGroupContext value={value}>{children}</PreviewGroupContext>;\n});\n\nPreviewGroup.displayName = 'PreviewGroup';\n\nexport default PreviewGroup;\n"],"mappings":";;;;AAqBA,MAAM,sBAAsB,cAA+C,IAAI;AAE/E,MAAa,+BAA+B,IAAI,mBAAmB;AAEnE,MAAM,kBAAkB,GAAsB,MAAyB;CACrE,MAAM,WAAW,EAAE,WAAW;CAC9B,MAAM,WAAW,EAAE,WAAW;CAC9B,IAAI,CAAC,YAAY,CAAC,UAAU,OAAO;CACnC,MAAM,WAAW,SAAS,wBAAwB,QAAQ;CAC1D,IAAI,WAAW,KAAK,6BAA6B,OAAO;CACxD,IAAI,WAAW,KAAK,6BAA6B,OAAO;CACxD,OAAO;AACT;AAEA,MAAM,eAAe,MAAyB,EAAE,UAAU,SAAS,MAAM,cAAc;CACrF,MAAM,aAAa,uBAAO,IAAI,IAA+B,CAAC;CAE9D,MAAM,WAAW,aAAa,UAA6B;EACzD,WAAW,QAAQ,IAAI,MAAM,IAAI,KAAK;EACtC,aAAa;GACX,WAAW,QAAQ,OAAO,MAAM,EAAE;EACpC;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,aAAa,kBAAkB,CAAC,GAAG,WAAW,QAAQ,OAAO,CAAC,CAAC,CAAC,KAAK,cAAc,GAAG,CAAC,CAAC;CAE9F,MAAM,QAAQ,eACL;EAAE;EAAY;EAAS;CAAS,IACvC;EAAC;EAAY;EAAS;CAAQ,CAChC;CAEA,IAAI,CAAC,QAAQ,OAAO;CAEpB,OAAO,oBAAC,qBAAD;EAA4B;EAAQ;CAA8B,CAAA;AAC3E,CAAC;AAED,aAAa,cAAc"}

package/es/Image/index.d.mts

@@ -1,4 +1,4 @@
-import { ImagePreviewOptions, ImageProps, PreviewGroupPreviewOptions, PreviewGroupProps } from "./type.mjs";
+import { ImagePreviewOptions, ImageProps, PreviewGroupProps } from "./type.mjs";
 import PreviewGroup from "./PreviewGroup.mjs";
 import { ReactNode } from "react";
 //#region src/Image/index.d.ts
@@ -8,5 +8,5 @@ interface IImage {
 }
 declare const Image: IImage;
 //#endregion
-export { IImage, type ImagePreviewOptions, type ImageProps, PreviewGroup, type PreviewGroupPreviewOptions, type PreviewGroupProps, Image as default };
+export { IImage, type ImagePreviewOptions, type ImageProps, PreviewGroup, type PreviewGroupProps, Image as default };
 //# sourceMappingURL=index.d.mts.map

package/es/Image/index.mjs

@@ -1,5 +1,5 @@
-import Image$1 from "./Image.mjs";
 import PreviewGroup from "./PreviewGroup.mjs";
+import Image$1 from "./Image.mjs";
 //#region src/Image/index.ts
 const Image = Image$1;
 Image.PreviewGroup = PreviewGroup;

package/es/Image/style.mjs

@@ -2,8 +2,8 @@ import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
 import { createStaticStyles } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/Image/style.ts
-const prefixCls = "ant";
 const styles = createStaticStyles(({ css, cssVar }) => {
+	const controlHalo = `drop-shadow(0 0 2px ${cssVar.colorBgLayout}) drop-shadow(0 1px 6px ${cssVar.colorBgLayout})`;
 	return {
 		actionsHidden: css`
       cursor: pointer;
@@ -37,104 +37,159 @@ const styles = createStaticStyles(({ css, cssVar }) => {
 
       width: auto;
       height: auto;
-    `,
-		mask: css`
-      ${staticStylish.blur};
-      backdrop-filter: blur(8px);
     `,
 		outlined: staticStylish.variantOutlinedWithoutHover,
-		preview: css`
-      .${prefixCls}-image-preview-mask {
-        background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);
-      }
+		previewable: css`
+      cursor: zoom-in;
+    `,
+		root: css`
+      cursor: pointer;
+      user-select: none;
 
-      .${prefixCls}-image-preview-close {
-        color: ${cssVar.colorTextDescription};
-        background: ${cssVar.colorBgContainer};
-        box-shadow: ${cssVar.boxShadowTertiary};
+      position: relative;
 
-        svg {
-          stroke: ${cssVar.colorTextDescription};
-        }
+      overflow: hidden;
 
-        &:hover {
-          color: ${cssVar.colorText};
-          background: ${cssVar.colorBgContainer};
+      width: fit-content;
+      border-radius: ${cssVar.borderRadius};
 
-          svg {
-            stroke: ${cssVar.colorText};
-          }
-        }
-      }
+      line-height: 1;
 
-      .${prefixCls}-image-preview-img {
-        width: 100%;
+      &:hover {
+        .actions-hidden {
+          opacity: 1;
+        }
       }
+    `,
+		toolbar: css`
+      pointer-events: auto;
 
-      .${prefixCls}-image-preview-switch {
-        display: flex;
-        align-items: center;
-        justify-content: center;
+      position: absolute;
+      inset-block-end: 16px;
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    `,
+		toolbarRow: css`
+      padding-block: 4px;
+      padding-inline: 6px;
+      border-radius: 999px;
 
-        width: 32px;
-        height: 32px;
-        padding: 0;
+      background: color-mix(in srgb, ${cssVar.colorBgLayout} 60%, transparent);
+      backdrop-filter: blur(12px);
+    `,
+		toolbarPercentage: css`
+      cursor: pointer;
+      user-select: none;
 
-        color: ${cssVar.colorTextDescription};
+      min-width: 44px;
+      height: 36px;
+      padding-inline: 8px;
+      border-radius: 999px;
 
-        background: ${cssVar.colorBgContainer};
-        box-shadow: ${cssVar.boxShadowTertiary};
+      font-size: 12px;
+      font-variant-numeric: tabular-nums;
+      color: ${cssVar.colorTextTertiary};
 
-        svg {
-          transform: scale(0.75);
-        }
+      transition:
+        color 400ms ${cssVar.motionEaseOut},
+        background 100ms ${cssVar.motionEaseOut};
 
-        &:hover {
-          color: ${cssVar.colorText};
-          background: ${cssVar.colorBgContainer};
-        }
+      &:hover {
+        color: ${cssVar.colorTextSecondary};
+        background: ${cssVar.colorFillTertiary};
       }
+    `,
+		viewerBackdrop: css`
+      position: fixed;
+      inset: 0;
 
-      .${prefixCls}-image-preview-switch-disabled {
-        display: none;
+      opacity: 0;
+      background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);
+      backdrop-filter: blur(8px);
+    `,
+		viewerChrome: css`
+      pointer-events: none;
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+    `,
+		viewerChromeIdle: css`
+      pointer-events: none;
+      position: absolute;
+      inset: 0;
+      transition:
+        opacity 200ms ${cssVar.motionEaseOut},
+        visibility 200ms;
+
+      &[data-idle-hidden] {
+        visibility: hidden;
+        opacity: 0;
       }
 
-      .ant-image-preview-progress {
-        color: ${cssVar.colorTextDescription};
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
       }
+    `,
+		viewerClose: css`
+      pointer-events: auto;
 
-      img {
-        min-width: 100%;
-      }
+      position: absolute;
+      inset-block-start: 16px;
+      inset-inline-end: 16px;
+
+      filter: ${controlHalo};
     `,
-		root: css`
-      cursor: pointer;
-      user-select: none;
+		viewerCounter: css`
+      pointer-events: none;
 
-      position: relative;
+      position: absolute;
+      inset-block-start: 16px;
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
 
-      overflow: hidden;
+      padding-block: 4px;
+      padding-inline: 12px;
+      border-radius: 999px;
 
-      width: fit-content;
-      border-radius: ${cssVar.borderRadius};
+      font-size: 12px;
+      font-variant-numeric: tabular-nums;
+      color: ${cssVar.colorTextSecondary};
 
-      line-height: 1;
+      background: color-mix(in srgb, ${cssVar.colorBgLayout} 60%, transparent);
+      backdrop-filter: blur(12px);
+    `,
+		viewerImage: css`
+      will-change: transform;
+      cursor: zoom-out;
+      user-select: none;
 
-      .${prefixCls}-image-cover {
-        display: none !important;
-      }
+      position: absolute;
+      transform-origin: center center;
 
-      &:hover {
-        .actions-hidden {
-          opacity: 1;
-        }
-      }
+      object-fit: contain;
+
+      -webkit-user-drag: none;
     `,
-		toolbar: css`
-      ${staticStylish.variantOutlinedWithoutHover};
-      padding: 4px;
-      border-color: ${cssVar.colorFillTertiary};
-      border-radius: ${cssVar.borderRadiusLG};
+		viewerNavButton: css`
+      pointer-events: auto;
+
+      position: absolute;
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+
+      filter: ${controlHalo};
+    `,
+		viewerNavNext: css`
+      inset-inline-end: 16px;
+    `,
+		viewerNavPrev: css`
+      inset-inline-start: 16px;
+    `,
+		viewerPopup: css`
+      position: fixed;
+      inset: 0;
+      overflow: hidden;
+      outline: none;
     `,
 		wrapper: css`
       position: relative;

package/es/Image/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Image/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    actionsHidden: css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: 0;\n    `,\n    actionsVisible: css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: 1;\n    `,\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n    filled: css`\n      ${lobeStaticStylish.variantOutlinedWithoutHover};\n      ${lobeStaticStylish.variantFilledWithoutHover};\n    `,\n    image: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: auto;\n      height: auto;\n    `,\n    mask: css`\n      ${lobeStaticStylish.blur};\n      backdrop-filter: blur(8px);\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    preview: css`\n      .${prefixCls}-image-preview-mask {\n        background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);\n      }\n\n      .${prefixCls}-image-preview-close {\n        color: ${cssVar.colorTextDescription};\n        background: ${cssVar.colorBgContainer};\n        box-shadow: ${cssVar.boxShadowTertiary};\n\n        svg {\n          stroke: ${cssVar.colorTextDescription};\n        }\n\n        &:hover {\n          color: ${cssVar.colorText};\n          background: ${cssVar.colorBgContainer};\n\n          svg {\n            stroke: ${cssVar.colorText};\n          }\n        }\n      }\n\n      .${prefixCls}-image-preview-img {\n        width: 100%;\n      }\n\n      .${prefixCls}-image-preview-switch {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: 32px;\n        height: 32px;\n        padding: 0;\n\n        color: ${cssVar.colorTextDescription};\n\n        background: ${cssVar.colorBgContainer};\n        box-shadow: ${cssVar.boxShadowTertiary};\n\n        svg {\n          transform: scale(0.75);\n        }\n\n        &:hover {\n          color: ${cssVar.colorText};\n          background: ${cssVar.colorBgContainer};\n        }\n      }\n\n      .${prefixCls}-image-preview-switch-disabled {\n        display: none;\n      }\n\n      .ant-image-preview-progress {\n        color: ${cssVar.colorTextDescription};\n      }\n\n      img {\n        min-width: 100%;\n      }\n    `,\n    root: css`\n      cursor: pointer;\n      user-select: none;\n\n      position: relative;\n\n      overflow: hidden;\n\n      width: fit-content;\n      border-radius: ${cssVar.borderRadius};\n\n      line-height: 1;\n\n      .${prefixCls}-image-cover {\n        display: none !important;\n      }\n\n      &:hover {\n        .actions-hidden {\n          opacity: 1;\n        }\n      }\n    `,\n    toolbar: css`\n      ${lobeStaticStylish.variantOutlinedWithoutHover};\n      padding: 4px;\n      border-color: ${cssVar.colorFillTertiary};\n      border-radius: ${cssVar.borderRadiusLG};\n    `,\n\n    wrapper: css`\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n      height: auto;\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'filled',\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n  },\n});\n\nexport const FALLBACK_DARK =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjM0IzQjNCIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\nexport const FALLBACK_LIGHT =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjRUNFQ0VDIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\n"],"mappings":";;;;AAKA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,eAAe,GAAG;;;;;;;;;;EAUlB,gBAAgB,GAAG;;;;;;;;;;EAUnB,YAAYA,cAAkB;EAC9B,QAAQ,GAAG;QACPA,cAAkB,4BAA4B;QAC9CA,cAAkB,0BAA0B;;EAEhD,OAAO,GAAG;;;;;;;;EAQV,MAAM,GAAG;QACLA,cAAkB,KAAK;;;EAG3B,UAAUA,cAAkB;EAC5B,SAAS,GAAG;SACP,UAAU;yCACsB,OAAO,cAAc;;;SAGrD,UAAU;iBACF,OAAO,qBAAqB;sBACvB,OAAO,iBAAiB;sBACxB,OAAO,kBAAkB;;;oBAG3B,OAAO,qBAAqB;;;;mBAI7B,OAAO,UAAU;wBACZ,OAAO,iBAAiB;;;sBAG1B,OAAO,UAAU;;;;;SAK9B,UAAU;;;;SAIV,UAAU;;;;;;;;;iBASF,OAAO,qBAAqB;;sBAEvB,OAAO,iBAAiB;sBACxB,OAAO,kBAAkB;;;;;;;mBAO5B,OAAO,UAAU;wBACZ,OAAO,iBAAiB;;;;SAIvC,UAAU;;;;;iBAKF,OAAO,qBAAqB;;;;;;;EAOzC,MAAM,GAAG;;;;;;;;;uBASU,OAAO,aAAa;;;;SAIlC,UAAU;;;;;;;;;;EAUf,SAAS,GAAG;QACRA,cAAkB,4BAA4B;;sBAEhC,OAAO,kBAAkB;uBACxB,OAAO,eAAe;;EAGzC,SAAS,GAAG;;;;;;CAMd;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,SAAS,SACX;CAEA,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,UAAU,OAAO;EACjB,YAAY,OAAO;CACrB,EACF;AACF,CAAC;AAED,MAAa,gBACX;AACF,MAAa,iBACX"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Image/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  // Bare viewer controls float directly over arbitrary image content; the\n  // theme-side halo (light halo around dark icons in light mode and vice\n  // versa) is what keeps them readable without a container panel.\n  const controlHalo = `drop-shadow(0 0 2px ${cssVar.colorBgLayout}) drop-shadow(0 1px 6px ${cssVar.colorBgLayout})`;\n  return {\n    actionsHidden: css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: 0;\n    `,\n    actionsVisible: css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: 1;\n    `,\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n    filled: css`\n      ${lobeStaticStylish.variantOutlinedWithoutHover};\n      ${lobeStaticStylish.variantFilledWithoutHover};\n    `,\n    image: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: auto;\n      height: auto;\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    previewable: css`\n      cursor: zoom-in;\n    `,\n    root: css`\n      cursor: pointer;\n      user-select: none;\n\n      position: relative;\n\n      overflow: hidden;\n\n      width: fit-content;\n      border-radius: ${cssVar.borderRadius};\n\n      line-height: 1;\n\n      &:hover {\n        .actions-hidden {\n          opacity: 1;\n        }\n      }\n    `,\n    toolbar: css`\n      pointer-events: auto;\n\n      position: absolute;\n      inset-block-end: 16px;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n    `,\n    // The glass lives on the icon row, not the toolbar itself: tooltips and\n    // the more-menu portal into the toolbar element, and an ancestor\n    // backdrop-filter/filter would distort those popups too.\n    toolbarRow: css`\n      padding-block: 4px;\n      padding-inline: 6px;\n      border-radius: 999px;\n\n      background: color-mix(in srgb, ${cssVar.colorBgLayout} 60%, transparent);\n      backdrop-filter: blur(12px);\n    `,\n    toolbarPercentage: css`\n      cursor: pointer;\n      user-select: none;\n\n      min-width: 44px;\n      height: 36px;\n      padding-inline: 8px;\n      border-radius: 999px;\n\n      font-size: 12px;\n      font-variant-numeric: tabular-nums;\n      color: ${cssVar.colorTextTertiary};\n\n      transition:\n        color 400ms ${cssVar.motionEaseOut},\n        background 100ms ${cssVar.motionEaseOut};\n\n      &:hover {\n        color: ${cssVar.colorTextSecondary};\n        background: ${cssVar.colorFillTertiary};\n      }\n    `,\n\n    viewerBackdrop: css`\n      position: fixed;\n      inset: 0;\n\n      opacity: 0;\n      background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);\n      backdrop-filter: blur(8px);\n    `,\n    viewerChrome: css`\n      pointer-events: none;\n      position: absolute;\n      inset: 0;\n      opacity: 0;\n    `,\n    viewerChromeIdle: css`\n      pointer-events: none;\n      position: absolute;\n      inset: 0;\n      transition:\n        opacity 200ms ${cssVar.motionEaseOut},\n        visibility 200ms;\n\n      &[data-idle-hidden] {\n        visibility: hidden;\n        opacity: 0;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    viewerClose: css`\n      pointer-events: auto;\n\n      position: absolute;\n      inset-block-start: 16px;\n      inset-inline-end: 16px;\n\n      filter: ${controlHalo};\n    `,\n    viewerCounter: css`\n      pointer-events: none;\n\n      position: absolute;\n      inset-block-start: 16px;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n\n      padding-block: 4px;\n      padding-inline: 12px;\n      border-radius: 999px;\n\n      font-size: 12px;\n      font-variant-numeric: tabular-nums;\n      color: ${cssVar.colorTextSecondary};\n\n      background: color-mix(in srgb, ${cssVar.colorBgLayout} 60%, transparent);\n      backdrop-filter: blur(12px);\n    `,\n    viewerImage: css`\n      will-change: transform;\n      cursor: zoom-out;\n      user-select: none;\n\n      position: absolute;\n      transform-origin: center center;\n\n      object-fit: contain;\n\n      -webkit-user-drag: none;\n    `,\n    viewerNavButton: css`\n      pointer-events: auto;\n\n      position: absolute;\n      inset-block-start: 50%;\n      transform: translateY(-50%);\n\n      filter: ${controlHalo};\n    `,\n    viewerNavNext: css`\n      inset-inline-end: 16px;\n    `,\n    viewerNavPrev: css`\n      inset-inline-start: 16px;\n    `,\n    viewerPopup: css`\n      position: fixed;\n      inset: 0;\n      overflow: hidden;\n      outline: none;\n    `,\n    wrapper: css`\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n      height: auto;\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'filled',\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n  },\n});\n\nexport const FALLBACK_DARK =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjM0IzQjNCIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\nexport const FALLBACK_LIGHT =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjRUNFQ0VDIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAI5D,MAAM,cAAc,uBAAuB,OAAO,cAAc,0BAA0B,OAAO,cAAc;CAC/G,OAAO;EACL,eAAe,GAAG;;;;;;;;;;EAUlB,gBAAgB,GAAG;;;;;;;;;;EAUnB,YAAYA,cAAkB;EAC9B,QAAQ,GAAG;QACPA,cAAkB,4BAA4B;QAC9CA,cAAkB,0BAA0B;;EAEhD,OAAO,GAAG;;;;;;;;EAQV,UAAUA,cAAkB;EAC5B,aAAa,GAAG;;;EAGhB,MAAM,GAAG;;;;;;;;;uBASU,OAAO,aAAa;;;;;;;;;;EAUvC,SAAS,GAAG;;;;;;;;EAWZ,YAAY,GAAG;;;;;uCAKoB,OAAO,cAAc;;;EAGxD,mBAAmB,GAAG;;;;;;;;;;;eAWX,OAAO,kBAAkB;;;sBAGlB,OAAO,cAAc;2BAChB,OAAO,cAAc;;;iBAG/B,OAAO,mBAAmB;sBACrB,OAAO,kBAAkB;;;EAI3C,gBAAgB,GAAG;;;;;uCAKgB,OAAO,cAAc;;;EAGxD,cAAc,GAAG;;;;;;EAMjB,kBAAkB,GAAG;;;;;wBAKD,OAAO,cAAc;;;;;;;;;;;;EAYzC,aAAa,GAAG;;;;;;;gBAOJ,YAAY;;EAExB,eAAe,GAAG;;;;;;;;;;;;;;eAcP,OAAO,mBAAmB;;uCAEF,OAAO,cAAc;;;EAGxD,aAAa,GAAG;;;;;;;;;;;;EAYhB,iBAAiB,GAAG;;;;;;;gBAOR,YAAY;;EAExB,eAAe,GAAG;;;EAGlB,eAAe,GAAG;;;EAGlB,aAAa,GAAG;;;;;;EAMhB,SAAS,GAAG;;;;;;CAMd;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,SAAS,SACX;CAEA,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,UAAU,OAAO;EACjB,YAAY,OAAO;CACrB,EACF;AACF,CAAC;AAED,MAAa,gBACX;AACF,MAAa,iBACX"}