@lobehub/ui 5.33.1 → 5.33.3

package/es/Mermaid/SyntaxMermaid/MermaidSvg.mjs

@@ -1,14 +1,24 @@
 "use client";
+import { openPreview } from "../../Image/viewer/registry.mjs";
+import PreviewOutlet from "../../Image/viewer/PreviewOutlet.mjs";
 import { toStandaloneSvgString } from "./prepareInlineSvg.mjs";
 import { prepareMermaidSvgString } from "./prepareMermaidSvg.mjs";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Image } from "antd";
 //#region src/Mermaid/SyntaxMermaid/MermaidSvg.tsx
+const anchorStyle = {
+	height: "100%",
+	insetBlockStart: 0,
+	insetInlineStart: 0,
+	pointerEvents: "none",
+	position: "absolute",
+	visibility: "hidden",
+	width: "100%"
+};
 const MermaidSvg = memo(({ className, ref, style, svg }) => {
 	const containerRef = useRef(null);
+	const anchorRef = useRef(null);
 	const [previewUrl, setPreviewUrl] = useState();
-	const [open, setOpen] = useState(false);
 	useEffect(() => {
 		return () => {
 			if (previewUrl) URL.revokeObjectURL(previewUrl);
@@ -16,33 +26,47 @@ const MermaidSvg = memo(({ className, ref, style, svg }) => {
 	}, [previewUrl]);
 	const handleOpen = useCallback(() => {
 		const element = containerRef.current?.querySelector("svg");
-		if (!element) return;
+		const anchor = anchorRef.current;
+		if (!element || !anchor) return;
 		const standalone = prepareMermaidSvgString(toStandaloneSvgString(element));
+		const url = URL.createObjectURL(new Blob([standalone], { type: "image/svg+xml" }));
 		setPreviewUrl((previous) => {
 			if (previous) URL.revokeObjectURL(previous);
-			return URL.createObjectURL(new Blob([standalone], { type: "image/svg+xml" }));
+			return url;
+		});
+		openPreview({
+			element: anchor,
+			options: {
+				autoZoomThreshold: 2,
+				defaultZoom: "auto",
+				maxScale: 8
+			},
+			src: url
 		});
-		setOpen(true);
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
 		className,
 		ref,
-		style,
-		children: [/* @__PURE__ */ jsx("div", {
-			dangerouslySetInnerHTML: { __html: svg },
-			ref: containerRef,
-			style: { cursor: "zoom-in" },
-			onClick: handleOpen
-		}), previewUrl && /* @__PURE__ */ jsx(Image, {
-			preview: {
-				onVisibleChange: setOpen,
+		style: {
+			position: "relative",
+			...style
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				dangerouslySetInnerHTML: { __html: svg },
+				ref: containerRef,
+				style: { cursor: "zoom-in" },
+				onClick: handleOpen
+			}),
+			/* @__PURE__ */ jsx("img", {
+				"aria-hidden": true,
+				alt: "",
+				ref: anchorRef,
 				src: previewUrl,
-				visible: open
-			},
-			src: previewUrl,
-			style: { display: "none" },
-			wrapperStyle: { display: "none" }
-		})]
+				style: anchorStyle
+			}),
+			/* @__PURE__ */ jsx(PreviewOutlet, { elementRef: anchorRef })
+		]
 	});
 });
 MermaidSvg.displayName = "MermaidSvg";

package/es/Mermaid/SyntaxMermaid/MermaidSvg.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MermaidSvg.mjs","names":["AntImage"],"sources":["../../../src/Mermaid/SyntaxMermaid/MermaidSvg.tsx"],"sourcesContent":["'use client';\n\nimport { Image as AntImage } from 'antd';\nimport { memo, type Ref, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { toStandaloneSvgString } from './prepareInlineSvg';\nimport { prepareMermaidSvgString } from './prepareMermaidSvg';\n\ninterface MermaidSvgProps {\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n  style?: React.CSSProperties;\n  svg: string;\n}\n\nconst MermaidSvg = memo<MermaidSvgProps>(({ className, ref, style, svg }) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [previewUrl, setPreviewUrl] = useState<string>();\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    return () => {\n      if (previewUrl) URL.revokeObjectURL(previewUrl);\n    };\n  }, [previewUrl]);\n\n  // The preview copy is only built on demand: it has to bake in the resolved\n  // CSS variables and be XML-well-formed, neither of which the inline copy needs.\n  const handleOpen = useCallback(() => {\n    const element = containerRef.current?.querySelector('svg');\n    if (!element) return;\n\n    const standalone = prepareMermaidSvgString(toStandaloneSvgString(element));\n    setPreviewUrl((previous) => {\n      if (previous) URL.revokeObjectURL(previous);\n      return URL.createObjectURL(new Blob([standalone], { type: 'image/svg+xml' }));\n    });\n    setOpen(true);\n  }, []);\n\n  return (\n    <div className={className} ref={ref} style={style}>\n      <div\n        dangerouslySetInnerHTML={{ __html: svg }}\n        ref={containerRef}\n        style={{ cursor: 'zoom-in' }}\n        onClick={handleOpen}\n      />\n      {previewUrl && (\n        <AntImage\n          preview={{ onVisibleChange: setOpen, src: previewUrl, visible: open }}\n          src={previewUrl}\n          style={{ display: 'none' }}\n          wrapperStyle={{ display: 'none' }}\n        />\n      )}\n    </div>\n  );\n});\n\nMermaidSvg.displayName = 'MermaidSvg';\n\nexport default MermaidSvg;\n"],"mappings":";;;;;;;AAeA,MAAM,aAAa,MAAuB,EAAE,WAAW,KAAK,OAAO,UAAU;CAC3E,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,YAAY,iBAAiB,SAAiB;CACrD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,gBAAgB;EACd,aAAa;GACX,IAAI,YAAY,IAAI,gBAAgB,UAAU;EAChD;CACF,GAAG,CAAC,UAAU,CAAC;CAIf,MAAM,aAAa,kBAAkB;EACnC,MAAM,UAAU,aAAa,SAAS,cAAc,KAAK;EACzD,IAAI,CAAC,SAAS;EAEd,MAAM,aAAa,wBAAwB,sBAAsB,OAAO,CAAC;EACzE,eAAe,aAAa;GAC1B,IAAI,UAAU,IAAI,gBAAgB,QAAQ;GAC1C,OAAO,IAAI,gBAAgB,IAAI,KAAK,CAAC,UAAU,GAAG,EAAE,MAAM,gBAAgB,CAAC,CAAC;EAC9E,CAAC;EACD,QAAQ,IAAI;CACd,GAAG,CAAC,CAAC;CAEL,OACE,qBAAC,OAAD;EAAgB;EAAgB;EAAY;EAA5C,UAAA,CACE,oBAAC,OAAD;GACE,yBAAyB,EAAE,QAAQ,IAAI;GACvC,KAAK;GACL,OAAO,EAAE,QAAQ,UAAU;GAC3B,SAAS;EACV,CAAA,GACA,cACC,oBAACA,OAAD;GACE,SAAS;IAAE,iBAAiB;IAAS,KAAK;IAAY,SAAS;GAAK;GACpE,KAAK;GACL,OAAO,EAAE,SAAS,OAAO;GACzB,cAAc,EAAE,SAAS,OAAO;EACjC,CAAA,CAEA;;AAET,CAAC;AAED,WAAW,cAAc"}
+{"version":3,"file":"MermaidSvg.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/MermaidSvg.tsx"],"sourcesContent":["'use client';\n\nimport { memo, type Ref, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { DEFAULT_AUTO_ZOOM_THRESHOLD, DEFAULT_MAX_SCALE } from '@/Image/viewer/geometry';\nimport PreviewOutlet from '@/Image/viewer/PreviewOutlet';\nimport { openPreview } from '@/Image/viewer/registry';\n\nimport { toStandaloneSvgString } from './prepareInlineSvg';\nimport { prepareMermaidSvgString } from './prepareMermaidSvg';\n\ninterface MermaidSvgProps {\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n  style?: React.CSSProperties;\n  svg: string;\n}\n\n// The viewer flies the image out of the element it was opened from, so the\n// diagram needs a real <img> to measure — hence a hidden anchor tracking the\n// diagram box rather than a display:none preview image.\nconst anchorStyle: React.CSSProperties = {\n  height: '100%',\n  insetBlockStart: 0,\n  insetInlineStart: 0,\n  pointerEvents: 'none',\n  position: 'absolute',\n  visibility: 'hidden',\n  width: '100%',\n};\n\nconst MermaidSvg = memo<MermaidSvgProps>(({ className, ref, style, svg }) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLImageElement>(null);\n  const [previewUrl, setPreviewUrl] = useState<string>();\n\n  useEffect(() => {\n    return () => {\n      if (previewUrl) URL.revokeObjectURL(previewUrl);\n    };\n  }, [previewUrl]);\n\n  // The preview copy is only built on demand: it has to bake in the resolved\n  // CSS variables and be XML-well-formed, neither of which the inline copy needs.\n  const handleOpen = useCallback(() => {\n    const element = containerRef.current?.querySelector('svg');\n    const anchor = anchorRef.current;\n    if (!element || !anchor) return;\n\n    const standalone = prepareMermaidSvgString(toStandaloneSvgString(element));\n    const url = URL.createObjectURL(new Blob([standalone], { type: 'image/svg+xml' }));\n    setPreviewUrl((previous) => {\n      if (previous) URL.revokeObjectURL(previous);\n      return url;\n    });\n\n    openPreview({\n      element: anchor,\n      options: {\n        autoZoomThreshold: DEFAULT_AUTO_ZOOM_THRESHOLD,\n        defaultZoom: 'auto',\n        maxScale: DEFAULT_MAX_SCALE,\n      },\n      src: url,\n    });\n  }, []);\n\n  return (\n    <div className={className} ref={ref} style={{ position: 'relative', ...style }}>\n      <div\n        dangerouslySetInnerHTML={{ __html: svg }}\n        ref={containerRef}\n        style={{ cursor: 'zoom-in' }}\n        onClick={handleOpen}\n      />\n      <img aria-hidden alt=\"\" ref={anchorRef} src={previewUrl} style={anchorStyle} />\n      <PreviewOutlet elementRef={anchorRef} />\n    </div>\n  );\n});\n\nMermaidSvg.displayName = 'MermaidSvg';\n\nexport default MermaidSvg;\n"],"mappings":";;;;;;;;AAqBA,MAAM,cAAmC;CACvC,QAAQ;CACR,iBAAiB;CACjB,kBAAkB;CAClB,eAAe;CACf,UAAU;CACV,YAAY;CACZ,OAAO;AACT;AAEA,MAAM,aAAa,MAAuB,EAAE,WAAW,KAAK,OAAO,UAAU;CAC3E,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,YAAY,OAAyB,IAAI;CAC/C,MAAM,CAAC,YAAY,iBAAiB,SAAiB;CAErD,gBAAgB;EACd,aAAa;GACX,IAAI,YAAY,IAAI,gBAAgB,UAAU;EAChD;CACF,GAAG,CAAC,UAAU,CAAC;CAIf,MAAM,aAAa,kBAAkB;EACnC,MAAM,UAAU,aAAa,SAAS,cAAc,KAAK;EACzD,MAAM,SAAS,UAAU;EACzB,IAAI,CAAC,WAAW,CAAC,QAAQ;EAEzB,MAAM,aAAa,wBAAwB,sBAAsB,OAAO,CAAC;EACzE,MAAM,MAAM,IAAI,gBAAgB,IAAI,KAAK,CAAC,UAAU,GAAG,EAAE,MAAM,gBAAgB,CAAC,CAAC;EACjF,eAAe,aAAa;GAC1B,IAAI,UAAU,IAAI,gBAAgB,QAAQ;GAC1C,OAAO;EACT,CAAC;EAED,YAAY;GACV,SAAS;GACT,SAAS;IACP,mBAAA;IACA,aAAa;IACb,UAAA;GACF;GACA,KAAK;EACP,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,OACE,qBAAC,OAAD;EAAgB;EAAgB;EAAK,OAAO;GAAE,UAAU;GAAY,GAAG;EAAM;EAA7E,UAAA;GACE,oBAAC,OAAD;IACE,yBAAyB,EAAE,QAAQ,IAAI;IACvC,KAAK;IACL,OAAO,EAAE,QAAQ,UAAU;IAC3B,SAAS;GACV,CAAA;GACD,oBAAC,OAAD;IAAK,eAAA;IAAY,KAAI;IAAG,KAAK;IAAW,KAAK;IAAY,OAAO;GAAc,CAAA;GAC9E,oBAAC,eAAD,EAAe,YAAY,UAAY,CAAA;EACpC;;AAET,CAAC;AAED,WAAW,cAAc"}

package/es/Mermaid/SyntaxMermaid/prepareInlineSvg.mjs

@@ -42,6 +42,8 @@ const toStandaloneSvgString = (element) => {
 		const value = computed.getPropertyValue(name).trim();
 		if (value) clone.style.setProperty(name, value);
 	}
+	const background = computed.getPropertyValue("--bg").trim();
+	if (background) clone.style.setProperty("background", background);
 	const fontFamily = computed.fontFamily;
 	if (fontFamily) clone.style.setProperty("font-family", fontFamily);
 	return new XMLSerializer().serializeToString(clone);

package/es/Mermaid/SyntaxMermaid/prepareInlineSvg.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"prepareInlineSvg.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/prepareInlineSvg.ts"],"sourcesContent":["/**\n * Root custom properties beautiful-mermaid reads; everything else in its\n * stylesheet is derived from these via color-mix().\n */\nexport const MERMAID_ROOT_VARS = [\n  '--bg',\n  '--fg',\n  '--line',\n  '--accent',\n  '--muted',\n  '--surface',\n  '--border',\n];\n\nconst styleBlockPattern = /<style>([\\s\\S]*?)<\\/style>/;\n\nconst scopeCssSelectors = (css: string, scope: string): string =>\n  css.replaceAll(/(^|})([^{}@]+)\\{/g, (_match, tail: string, selectors: string) => {\n    const scoped = selectors\n      .split(',')\n      .map((selector) => selector.trim())\n      .filter(Boolean)\n      // The generated sheet targets `svg` for the root itself, not a descendant\n      .map((selector) => (selector === 'svg' ? scope : `${scope} ${selector}`))\n      .join(', ');\n\n    return `${tail}\\n${scoped} {`;\n  });\n\n/**\n * A <style> element inside inline SVG applies to the whole document, so the\n * generated rules must be scoped to this diagram before being injected. The\n * font @import is dropped because inline rendering would actually issue the\n * Google Fonts request that an <img>-loaded SVG silently blocks, and the bare\n * `text` rule is dropped so page CSS can supply the theme font instead.\n */\nexport const prepareInlineMermaidSvg = (svg: string, scopeId: string): string => {\n  if (!svg) return svg;\n\n  const withId = svg.replace(/<svg\\b/, `<svg id=\"${scopeId}\"`);\n\n  return withId.replace(styleBlockPattern, (_match, css: string) => {\n    const withoutImports = css.replaceAll(/@import[^;]*;/g, '');\n    const withoutFontRule = withoutImports.replaceAll(/(^|})\\s*text\\s*\\{[^{}]*\\}/g, '$1');\n\n    return `<style>${scopeCssSelectors(withoutFontRule, `#${scopeId}`)}</style>`;\n  });\n};\n\n/**\n * Inline SVG resolves `var(--ant-*)` from the page, but a Blob-loaded copy is an\n * isolated document with no access to them, so the root variables are baked in\n * as literal values before serializing for preview or download.\n */\nexport const toStandaloneSvgString = (element: SVGElement): string => {\n  const clone = element.cloneNode(true) as SVGElement;\n  const computed = globalThis.getComputedStyle(element);\n\n  for (const name of MERMAID_ROOT_VARS) {\n    const value = computed.getPropertyValue(name).trim();\n    if (value) clone.style.setProperty(name, value);\n  }\n\n  const fontFamily = computed.fontFamily;\n  if (fontFamily) clone.style.setProperty('font-family', fontFamily);\n\n  return new XMLSerializer().serializeToString(clone);\n};\n"],"mappings":";;;;;AAIA,MAAa,oBAAoB;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,oBAAoB;AAE1B,MAAM,qBAAqB,KAAa,UACtC,IAAI,WAAW,sBAAsB,QAAQ,MAAc,cAAsB;CAS/E,OAAO,GAAG,KAAK,IARA,UACZ,MAAM,GAAG,CAAC,CACV,KAAK,aAAa,SAAS,KAAK,CAAC,CAAC,CAClC,OAAO,OAAO,CAAC,CAEf,KAAK,aAAc,aAAa,QAAQ,QAAQ,GAAG,MAAM,GAAG,UAAW,CAAC,CACxE,KAAK,IAEgB,EAAE;AAC5B,CAAC;;;;;;;;AASH,MAAa,2BAA2B,KAAa,YAA4B;CAC/E,IAAI,CAAC,KAAK,OAAO;CAIjB,OAFe,IAAI,QAAQ,UAAU,YAAY,QAAQ,EAE7C,CAAC,CAAC,QAAQ,oBAAoB,QAAQ,QAAgB;EAEhE,MAAM,kBADiB,IAAI,WAAW,kBAAkB,EACnB,CAAC,CAAC,WAAW,8BAA8B,IAAI;EAEpF,OAAO,UAAU,kBAAkB,iBAAiB,IAAI,SAAS,EAAE;CACrE,CAAC;AACH;;;;;;AAOA,MAAa,yBAAyB,YAAgC;CACpE,MAAM,QAAQ,QAAQ,UAAU,IAAI;CACpC,MAAM,WAAW,WAAW,iBAAiB,OAAO;CAEpD,KAAK,MAAM,QAAQ,mBAAmB;EACpC,MAAM,QAAQ,SAAS,iBAAiB,IAAI,CAAC,CAAC,KAAK;EACnD,IAAI,OAAO,MAAM,MAAM,YAAY,MAAM,KAAK;CAChD;CAEA,MAAM,aAAa,SAAS;CAC5B,IAAI,YAAY,MAAM,MAAM,YAAY,eAAe,UAAU;CAEjE,OAAO,IAAI,cAAc,CAAC,CAAC,kBAAkB,KAAK;AACpD"}
+{"version":3,"file":"prepareInlineSvg.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/prepareInlineSvg.ts"],"sourcesContent":["/**\n * Root custom properties beautiful-mermaid reads; everything else in its\n * stylesheet is derived from these via color-mix().\n */\nexport const MERMAID_ROOT_VARS = [\n  '--bg',\n  '--fg',\n  '--line',\n  '--accent',\n  '--muted',\n  '--surface',\n  '--border',\n];\n\nconst styleBlockPattern = /<style>([\\s\\S]*?)<\\/style>/;\n\nconst scopeCssSelectors = (css: string, scope: string): string =>\n  css.replaceAll(/(^|})([^{}@]+)\\{/g, (_match, tail: string, selectors: string) => {\n    const scoped = selectors\n      .split(',')\n      .map((selector) => selector.trim())\n      .filter(Boolean)\n      // The generated sheet targets `svg` for the root itself, not a descendant\n      .map((selector) => (selector === 'svg' ? scope : `${scope} ${selector}`))\n      .join(', ');\n\n    return `${tail}\\n${scoped} {`;\n  });\n\n/**\n * A <style> element inside inline SVG applies to the whole document, so the\n * generated rules must be scoped to this diagram before being injected. The\n * font @import is dropped because inline rendering would actually issue the\n * Google Fonts request that an <img>-loaded SVG silently blocks, and the bare\n * `text` rule is dropped so page CSS can supply the theme font instead.\n */\nexport const prepareInlineMermaidSvg = (svg: string, scopeId: string): string => {\n  if (!svg) return svg;\n\n  const withId = svg.replace(/<svg\\b/, `<svg id=\"${scopeId}\"`);\n\n  return withId.replace(styleBlockPattern, (_match, css: string) => {\n    const withoutImports = css.replaceAll(/@import[^;]*;/g, '');\n    const withoutFontRule = withoutImports.replaceAll(/(^|})\\s*text\\s*\\{[^{}]*\\}/g, '$1');\n\n    return `<style>${scopeCssSelectors(withoutFontRule, `#${scopeId}`)}</style>`;\n  });\n};\n\n/**\n * Inline SVG resolves `var(--ant-*)` from the page, but a Blob-loaded copy is an\n * isolated document with no access to them, so the root variables are baked in\n * as literal values before serializing for preview or download.\n */\nexport const toStandaloneSvgString = (element: SVGElement): string => {\n  const clone = element.cloneNode(true) as SVGElement;\n  const computed = globalThis.getComputedStyle(element);\n\n  for (const name of MERMAID_ROOT_VARS) {\n    const value = computed.getPropertyValue(name).trim();\n    if (value) clone.style.setProperty(name, value);\n  }\n\n  // The diagram is rendered transparent so it inherits the page surface, but a\n  // standalone copy has nothing behind it: without an explicit fill the viewer\n  // scrim (and whatever it lets through) shows straight through the diagram.\n  const background = computed.getPropertyValue('--bg').trim();\n  if (background) clone.style.setProperty('background', background);\n\n  const fontFamily = computed.fontFamily;\n  if (fontFamily) clone.style.setProperty('font-family', fontFamily);\n\n  return new XMLSerializer().serializeToString(clone);\n};\n"],"mappings":";;;;;AAIA,MAAa,oBAAoB;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,oBAAoB;AAE1B,MAAM,qBAAqB,KAAa,UACtC,IAAI,WAAW,sBAAsB,QAAQ,MAAc,cAAsB;CAS/E,OAAO,GAAG,KAAK,IARA,UACZ,MAAM,GAAG,CAAC,CACV,KAAK,aAAa,SAAS,KAAK,CAAC,CAAC,CAClC,OAAO,OAAO,CAAC,CAEf,KAAK,aAAc,aAAa,QAAQ,QAAQ,GAAG,MAAM,GAAG,UAAW,CAAC,CACxE,KAAK,IAEgB,EAAE;AAC5B,CAAC;;;;;;;;AASH,MAAa,2BAA2B,KAAa,YAA4B;CAC/E,IAAI,CAAC,KAAK,OAAO;CAIjB,OAFe,IAAI,QAAQ,UAAU,YAAY,QAAQ,EAE7C,CAAC,CAAC,QAAQ,oBAAoB,QAAQ,QAAgB;EAEhE,MAAM,kBADiB,IAAI,WAAW,kBAAkB,EACnB,CAAC,CAAC,WAAW,8BAA8B,IAAI;EAEpF,OAAO,UAAU,kBAAkB,iBAAiB,IAAI,SAAS,EAAE;CACrE,CAAC;AACH;;;;;;AAOA,MAAa,yBAAyB,YAAgC;CACpE,MAAM,QAAQ,QAAQ,UAAU,IAAI;CACpC,MAAM,WAAW,WAAW,iBAAiB,OAAO;CAEpD,KAAK,MAAM,QAAQ,mBAAmB;EACpC,MAAM,QAAQ,SAAS,iBAAiB,IAAI,CAAC,CAAC,KAAK;EACnD,IAAI,OAAO,MAAM,MAAM,YAAY,MAAM,KAAK;CAChD;CAKA,MAAM,aAAa,SAAS,iBAAiB,MAAM,CAAC,CAAC,KAAK;CAC1D,IAAI,YAAY,MAAM,MAAM,YAAY,cAAc,UAAU;CAEhE,MAAM,aAAa,SAAS;CAC5B,IAAI,YAAY,MAAM,MAAM,YAAY,eAAe,UAAU;CAEjE,OAAO,IAAI,cAAc,CAAC,CAAC,kBAAkB,KAAK;AACpD"}

package/es/base-ui/Toast/style.mjs

@@ -186,19 +186,16 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     height: var(--toast-collapsed-height);
     padding-block: 12px;
     padding-inline: 16px;
-    border-radius: ${cssVar.borderRadiusLG};
+    border-radius: var(--toast-border-radius, ${cssVar.borderRadiusLG});
 
     color: ${cssVar.colorText};
 
     background: ${cssVar.colorBgElevated};
     background-clip: padding-box;
     box-shadow:
-      0 0 0 1px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),
-      0 1px 1px -0.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),
-      0 3px 3px -1.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),
-      0 6px 6px -3px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),
-      0 12px 12px -6px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),
-      0 24px 24px -12px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent);
+      0 0 0 1px ${cssVar.colorBorderSecondary},
+      0 4px 12px rgb(0 0 0 / 10%),
+      0 16px 32px -8px rgb(0 0 0 / 12%);
 
     transition:
       transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
@@ -317,39 +314,39 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     z-index: 100000;
 
     width: 360px;
-    max-width: calc(100vw - 32px);
+    max-width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);
 
     outline: 0;
 
     @media (width <= 480px) {
-      width: calc(100vw - 32px);
+      width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);
     }
   `,
 	viewportBottom: css`
-    inset-block-end: 16px;
+    inset-block-end: var(--toast-viewport-offset-y, 16px);
     inset-inline-start: 50%;
     transform: translateX(-50%);
   `,
 	viewportBottomLeft: css`
-    inset-block-end: 16px;
-    inset-inline-start: 16px;
+    inset-block-end: var(--toast-viewport-offset-y, 16px);
+    inset-inline-start: var(--toast-viewport-offset-x, 16px);
   `,
 	viewportBottomRight: css`
-    inset-block-end: 16px;
-    inset-inline-end: 16px;
+    inset-block-end: var(--toast-viewport-offset-y, 16px);
+    inset-inline-end: var(--toast-viewport-offset-x, 16px);
   `,
 	viewportTop: css`
-    inset-block-start: 16px;
+    inset-block-start: var(--toast-viewport-offset-y, 16px);
     inset-inline-start: 50%;
     transform: translateX(-50%);
   `,
 	viewportTopLeft: css`
-    inset-block-start: 16px;
-    inset-inline-start: 16px;
+    inset-block-start: var(--toast-viewport-offset-y, 16px);
+    inset-inline-start: var(--toast-viewport-offset-x, 16px);
   `,
 	viewportTopRight: css`
-    inset-block-start: 16px;
-    inset-inline-end: 16px;
+    inset-block-start: var(--toast-viewport-offset-y, 16px);
+    inset-inline-end: var(--toast-viewport-offset-x, 16px);
   `
 }));
 const viewportVariants = cva(styles.viewport, {

package/es/base-ui/Toast/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Toast/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    height: 28px;\n    padding-inline: 12px;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n\n    transition:\n      background 0.2s,\n      color 0.2s;\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  actionDanger: css`\n    color: ${cssVar.colorBgLayout};\n    background: ${cssVar.colorError};\n\n    &:hover {\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorErrorActive};\n    }\n\n    &:focus-visible {\n      outline-color: ${cssVar.colorErrorBorder};\n    }\n  `,\n\n  actionGhost: css`\n    border: 1px solid ${cssVar.colorBorder};\n    color: ${cssVar.colorText};\n    background: transparent;\n\n    &:hover {\n      border-color: ${cssVar.colorPrimary};\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:active {\n      border-color: ${cssVar.colorPrimaryActive};\n      color: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionPrimary: css`\n    color: ${cssVar.colorBgLayout};\n    background: ${cssVar.colorPrimary};\n\n    &:hover {\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionSecondary: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorFillSecondary};\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  actionText: css`\n    color: ${cssVar.colorPrimary};\n    background: transparent;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  actions: css`\n    display: flex;\n    flex-grow: 1;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    align-self: flex-end;\n    justify-content: flex-end;\n\n    margin-block-start: 8px;\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 20px;\n    margin-inline-start: auto;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    transition: all 0.2s;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  content: css`\n    overflow: hidden;\n    transition: opacity 0.2s;\n\n    &[data-behind] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-expanded] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n  `,\n\n  contentArea: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  `,\n\n  description: css`\n    margin: 0;\n    font-size: 13px;\n    line-height: 1.5;\n    color: ${cssVar.colorTextSecondary};\n  `,\n\n  descriptionStandalone: css`\n    color: ${cssVar.colorText};\n  `,\n\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  root: css`\n    --toast-gap: 12px;\n    --toast-peek: 12px;\n    --toast-scale: calc(1 - var(--toast-index) * 0.05);\n    --toast-shrink: calc(1 - var(--toast-scale));\n    --toast-collapsed-height: var(--toast-frontmost-height, var(--toast-height));\n\n    cursor: default;\n    user-select: none;\n\n    position: absolute;\n    z-index: calc(1000 - var(--toast-index));\n    inset-inline: 0;\n\n    box-sizing: border-box;\n    width: 100%;\n    height: var(--toast-collapsed-height);\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    background-clip: padding-box;\n    box-shadow:\n      0 0 0 1px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 1px 1px -0.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 3px 3px -1.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 6px 6px -3px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 12px 12px -6px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 24px 24px -12px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent);\n\n    transition:\n      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 0.4s,\n      height 0.15s;\n\n    /* Fill gap between stacked toasts to prevent hover flicker */\n    &::after {\n      content: '';\n      position: absolute;\n      inset-inline: 0;\n      height: calc(var(--toast-gap) + var(--toast-peek) + 8px);\n    }\n\n    &[data-limited] {\n      opacity: 0;\n    }\n\n    &[data-swiping] {\n      transition: none;\n    }\n  `,\n\n  // Bottom positions - stack upward\n  rootBottom: css`\n    inset-block: auto 0;\n    transform-origin: bottom center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) -\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-start: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) *\n              var(--toast-gap) * -1\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(150%);\n      opacity: 0;\n    }\n  `,\n\n  // Top positions - stack downward\n  rootTop: css`\n    inset-block: 0 auto;\n    transform-origin: top center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) +\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-end: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) *\n              var(--toast-gap)\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(-150%);\n      opacity: 0;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.5;\n    color: ${cssVar.colorText};\n  `,\n\n  titleRow: css`\n    display: flex;\n    gap: 8px;\n    align-items: flex-start;\n  `,\n\n  toastBody: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  toastBodyCenter: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 100000;\n\n    width: 360px;\n    max-width: calc(100vw - 32px);\n\n    outline: 0;\n\n    @media (width <= 480px) {\n      width: calc(100vw - 32px);\n    }\n  `,\n\n  viewportBottom: css`\n    inset-block-end: 16px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportBottomLeft: css`\n    inset-block-end: 16px;\n    inset-inline-start: 16px;\n  `,\n\n  viewportBottomRight: css`\n    inset-block-end: 16px;\n    inset-inline-end: 16px;\n  `,\n\n  viewportTop: css`\n    inset-block-start: 16px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportTopLeft: css`\n    inset-block-start: 16px;\n    inset-inline-start: 16px;\n  `,\n\n  viewportTopRight: css`\n    inset-block-start: 16px;\n    inset-inline-end: 16px;\n  `,\n}));\n\nexport const viewportVariants = cva(styles.viewport, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.viewportBottom,\n      'bottom-left': styles.viewportBottomLeft,\n      'bottom-right': styles.viewportBottomRight,\n      'top': styles.viewportTop,\n      'top-left': styles.viewportTopLeft,\n      'top-right': styles.viewportTopRight,\n    },\n  },\n});\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.rootBottom,\n      'bottom-left': styles.rootBottom,\n      'bottom-right': styles.rootBottom,\n      'top': styles.rootTop,\n      'top-left': styles.rootTop,\n      'top-right': styles.rootTop,\n    },\n  },\n});\n\nexport const actionVariants = cva(styles.action, {\n  defaultVariants: {\n    variant: 'primary',\n  },\n  variants: {\n    variant: {\n      danger: styles.actionDanger,\n      ghost: styles.actionGhost,\n      primary: styles.actionPrimary,\n      secondary: styles.actionSecondary,\n      text: styles.actionText,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,eAAe;;;;;;;;;;;2BAWhB,OAAO,mBAAmB;;;;CAKnD,cAAc,GAAG;aACN,OAAO,cAAc;kBAChB,OAAO,WAAW;;;oBAGhB,OAAO,gBAAgB;;;;oBAIvB,OAAO,iBAAiB;;;;uBAIrB,OAAO,iBAAiB;;;CAI7C,aAAa,GAAG;wBACM,OAAO,YAAY;aAC9B,OAAO,UAAU;;;;sBAIR,OAAO,aAAa;eAC3B,OAAO,aAAa;;;;sBAIb,OAAO,mBAAmB;eACjC,OAAO,mBAAmB;;;CAIvC,eAAe,GAAG;aACP,OAAO,cAAc;kBAChB,OAAO,aAAa;;;oBAGlB,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,iBAAiB,GAAG;aACT,OAAO,UAAU;kBACZ,OAAO,mBAAmB;;;oBAGxB,OAAO,kBAAkB;;;;oBAIzB,OAAO,UAAU;;;CAInC,YAAY,GAAG;aACJ,OAAO,aAAa;;;;oBAIb,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;CAYZ,OAAO,GAAG;;;;;;;;;;;;;qBAaS,OAAO,eAAe;;aAE9B,OAAO,mBAAmB;;;;;;;eAOxB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;;;;CAeZ,aAAa,GAAG;;;;;;CAOhB,aAAa,GAAG;;;;aAIL,OAAO,mBAAmB;;CAGrC,uBAAuB,GAAG;aACf,OAAO,UAAU;;CAG5B,MAAM,GAAG;;;;;;CAOT,MAAM,GAAG;;;;;;;;;;;;;;;;;;;qBAmBU,OAAO,eAAe;;aAE9B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;qCAGJ,OAAO,aAAa;4CACb,OAAO,aAAa;4CACpB,OAAO,aAAa;0CACtB,OAAO,aAAa;4CAClB,OAAO,aAAa;6CACnB,OAAO,aAAa;;;;;;;;;;;;;;;;;;;;;;;CAyB/D,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCf,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCZ,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;CAG5B,UAAU,GAAG;;;;;CAMb,WAAW,GAAG;;;;;CAMd,iBAAiB,GAAG;;;;;CAMpB,UAAU,GAAG;;;;;;;;;;;;;CAcb,gBAAgB,GAAG;;;;;CAMnB,oBAAoB,GAAG;;;;CAKvB,qBAAqB,GAAG;;;;CAKxB,aAAa,GAAG;;;;;CAMhB,iBAAiB,GAAG;;;;CAKpB,kBAAkB,GAAG;;;;AAIvB,EAAE;AAEF,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,UAAU,eACZ;CACA,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;CACtB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,UAAU,eACZ;CACA,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;CACtB,EACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,WAAW,OAAO;EAClB,MAAM,OAAO;CACf,EACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Toast/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    height: 28px;\n    padding-inline: 12px;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n\n    transition:\n      background 0.2s,\n      color 0.2s;\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  actionDanger: css`\n    color: ${cssVar.colorBgLayout};\n    background: ${cssVar.colorError};\n\n    &:hover {\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorErrorActive};\n    }\n\n    &:focus-visible {\n      outline-color: ${cssVar.colorErrorBorder};\n    }\n  `,\n\n  actionGhost: css`\n    border: 1px solid ${cssVar.colorBorder};\n    color: ${cssVar.colorText};\n    background: transparent;\n\n    &:hover {\n      border-color: ${cssVar.colorPrimary};\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:active {\n      border-color: ${cssVar.colorPrimaryActive};\n      color: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionPrimary: css`\n    color: ${cssVar.colorBgLayout};\n    background: ${cssVar.colorPrimary};\n\n    &:hover {\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionSecondary: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorFillSecondary};\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  actionText: css`\n    color: ${cssVar.colorPrimary};\n    background: transparent;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  actions: css`\n    display: flex;\n    flex-grow: 1;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    align-self: flex-end;\n    justify-content: flex-end;\n\n    margin-block-start: 8px;\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 20px;\n    margin-inline-start: auto;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    transition: all 0.2s;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  content: css`\n    overflow: hidden;\n    transition: opacity 0.2s;\n\n    &[data-behind] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-expanded] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n  `,\n\n  contentArea: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  `,\n\n  description: css`\n    margin: 0;\n    font-size: 13px;\n    line-height: 1.5;\n    color: ${cssVar.colorTextSecondary};\n  `,\n\n  descriptionStandalone: css`\n    color: ${cssVar.colorText};\n  `,\n\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  root: css`\n    --toast-gap: 12px;\n    --toast-peek: 12px;\n    --toast-scale: calc(1 - var(--toast-index) * 0.05);\n    --toast-shrink: calc(1 - var(--toast-scale));\n    --toast-collapsed-height: var(--toast-frontmost-height, var(--toast-height));\n\n    cursor: default;\n    user-select: none;\n\n    position: absolute;\n    z-index: calc(1000 - var(--toast-index));\n    inset-inline: 0;\n\n    box-sizing: border-box;\n    width: 100%;\n    height: var(--toast-collapsed-height);\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-radius: var(--toast-border-radius, ${cssVar.borderRadiusLG});\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    background-clip: padding-box;\n    box-shadow:\n      0 0 0 1px ${cssVar.colorBorderSecondary},\n      0 4px 12px rgb(0 0 0 / 10%),\n      0 16px 32px -8px rgb(0 0 0 / 12%);\n\n    transition:\n      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 0.4s,\n      height 0.15s;\n\n    /* Fill gap between stacked toasts to prevent hover flicker */\n    &::after {\n      content: '';\n      position: absolute;\n      inset-inline: 0;\n      height: calc(var(--toast-gap) + var(--toast-peek) + 8px);\n    }\n\n    &[data-limited] {\n      opacity: 0;\n    }\n\n    &[data-swiping] {\n      transition: none;\n    }\n  `,\n\n  // Bottom positions - stack upward\n  rootBottom: css`\n    inset-block: auto 0;\n    transform-origin: bottom center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) -\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-start: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) *\n              var(--toast-gap) * -1\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(150%);\n      opacity: 0;\n    }\n  `,\n\n  // Top positions - stack downward\n  rootTop: css`\n    inset-block: 0 auto;\n    transform-origin: top center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) +\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-end: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) *\n              var(--toast-gap)\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(-150%);\n      opacity: 0;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.5;\n    color: ${cssVar.colorText};\n  `,\n\n  titleRow: css`\n    display: flex;\n    gap: 8px;\n    align-items: flex-start;\n  `,\n\n  toastBody: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  toastBodyCenter: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 100000;\n\n    width: 360px;\n    max-width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);\n\n    outline: 0;\n\n    @media (width <= 480px) {\n      width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);\n    }\n  `,\n\n  viewportBottom: css`\n    inset-block-end: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportBottomLeft: css`\n    inset-block-end: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: var(--toast-viewport-offset-x, 16px);\n  `,\n\n  viewportBottomRight: css`\n    inset-block-end: var(--toast-viewport-offset-y, 16px);\n    inset-inline-end: var(--toast-viewport-offset-x, 16px);\n  `,\n\n  viewportTop: css`\n    inset-block-start: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportTopLeft: css`\n    inset-block-start: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: var(--toast-viewport-offset-x, 16px);\n  `,\n\n  viewportTopRight: css`\n    inset-block-start: var(--toast-viewport-offset-y, 16px);\n    inset-inline-end: var(--toast-viewport-offset-x, 16px);\n  `,\n}));\n\nexport const viewportVariants = cva(styles.viewport, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.viewportBottom,\n      'bottom-left': styles.viewportBottomLeft,\n      'bottom-right': styles.viewportBottomRight,\n      'top': styles.viewportTop,\n      'top-left': styles.viewportTopLeft,\n      'top-right': styles.viewportTopRight,\n    },\n  },\n});\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.rootBottom,\n      'bottom-left': styles.rootBottom,\n      'bottom-right': styles.rootBottom,\n      'top': styles.rootTop,\n      'top-left': styles.rootTop,\n      'top-right': styles.rootTop,\n    },\n  },\n});\n\nexport const actionVariants = cva(styles.action, {\n  defaultVariants: {\n    variant: 'primary',\n  },\n  variants: {\n    variant: {\n      danger: styles.actionDanger,\n      ghost: styles.actionGhost,\n      primary: styles.actionPrimary,\n      secondary: styles.actionSecondary,\n      text: styles.actionText,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,eAAe;;;;;;;;;;;2BAWhB,OAAO,mBAAmB;;;;CAKnD,cAAc,GAAG;aACN,OAAO,cAAc;kBAChB,OAAO,WAAW;;;oBAGhB,OAAO,gBAAgB;;;;oBAIvB,OAAO,iBAAiB;;;;uBAIrB,OAAO,iBAAiB;;;CAI7C,aAAa,GAAG;wBACM,OAAO,YAAY;aAC9B,OAAO,UAAU;;;;sBAIR,OAAO,aAAa;eAC3B,OAAO,aAAa;;;;sBAIb,OAAO,mBAAmB;eACjC,OAAO,mBAAmB;;;CAIvC,eAAe,GAAG;aACP,OAAO,cAAc;kBAChB,OAAO,aAAa;;;oBAGlB,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,iBAAiB,GAAG;aACT,OAAO,UAAU;kBACZ,OAAO,mBAAmB;;;oBAGxB,OAAO,kBAAkB;;;;oBAIzB,OAAO,UAAU;;;CAInC,YAAY,GAAG;aACJ,OAAO,aAAa;;;;oBAIb,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;CAYZ,OAAO,GAAG;;;;;;;;;;;;;qBAaS,OAAO,eAAe;;aAE9B,OAAO,mBAAmB;;;;;;;eAOxB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;;;;CAeZ,aAAa,GAAG;;;;;;CAOhB,aAAa,GAAG;;;;aAIL,OAAO,mBAAmB;;CAGrC,uBAAuB,GAAG;aACf,OAAO,UAAU;;CAG5B,MAAM,GAAG;;;;;;CAOT,MAAM,GAAG;;;;;;;;;;;;;;;;;;;gDAmBqC,OAAO,eAAe;;aAEzD,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;kBAGvB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;CA2B5C,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCf,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCZ,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;CAG5B,UAAU,GAAG;;;;;CAMb,WAAW,GAAG;;;;;CAMd,iBAAiB,GAAG;;;;;CAMpB,UAAU,GAAG;;;;;;;;;;;;;CAcb,gBAAgB,GAAG;;;;;CAMnB,oBAAoB,GAAG;;;;CAKvB,qBAAqB,GAAG;;;;CAKxB,aAAa,GAAG;;;;;CAMhB,iBAAiB,GAAG;;;;CAKpB,kBAAkB,GAAG;;;;AAIvB,EAAE;AAEF,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,UAAU,eACZ;CACA,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;CACtB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,UAAU,eACZ;CACA,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;CACtB,EACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,WAAW,OAAO;EAClB,MAAM,OAAO;CACf,EACF;AACF,CAAC"}

package/es/eslint/index.mjs

@@ -1,7 +1,9 @@
 //#region src/eslint/index.ts
 const DEPRECATED_UI_COMPONENTS = [
+	"ActionIcon",
 	"Alert",
 	"AutoComplete",
+	"Avatar",
 	"Button",
 	"Checkbox",
 	"CheckboxGroup",
@@ -13,7 +15,9 @@ const DEPRECATED_UI_COMPONENTS = [
 	"Select",
 	"Slider",
 	"SliderWithInput",
-	"Tabs"
+	"Tabs",
+	"Tag",
+	"Text"
 ];
 const restrictedImports = { rules: { "no-restricted-imports": ["error", {
 	paths: [

package/es/eslint/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/eslint/index.ts"],"sourcesContent":["const DEPRECATED_UI_COMPONENTS = [\n  'Alert',\n  'AutoComplete',\n  'Button',\n  'Checkbox',\n  'CheckboxGroup',\n  'Drawer',\n  'Modal',\n  'Radio',\n  'RadioGroup',\n  'Segmented',\n  'Select',\n  'Slider',\n  'SliderWithInput',\n  'Tabs',\n];\n\nconst DEPRECATED_ANTD_COMPONENT_PATHS = [\n  'antd/es/alert',\n  'antd/es/alert/*',\n  'antd/es/auto-complete',\n  'antd/es/auto-complete/*',\n  'antd/es/checkbox',\n  'antd/es/checkbox/*',\n  'antd/es/radio',\n  'antd/es/radio/*',\n  'antd/es/slider',\n  'antd/es/slider/*',\n  'antd/lib/alert',\n  'antd/lib/alert/*',\n  'antd/lib/auto-complete',\n  'antd/lib/auto-complete/*',\n  'antd/lib/checkbox',\n  'antd/lib/checkbox/*',\n  'antd/lib/radio',\n  'antd/lib/radio/*',\n  'antd/lib/slider',\n  'antd/lib/slider/*',\n];\n\nexport const restrictedImports = {\n  rules: {\n    'no-restricted-imports': [\n      'error',\n      {\n        paths: [\n          {\n            importNames: DEPRECATED_UI_COMPONENTS,\n            message:\n              'The antd-based wrapper is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n            name: '@lobehub/ui',\n          },\n          {\n            importNames: ['createStyles'],\n            message:\n              '`createStyles` is banned in this project. Use `createStaticStyles` from \"antd-style\" instead.',\n            name: 'antd-style',\n          },\n          {\n            importNames: DEPRECATED_UI_COMPONENTS,\n            message: 'Direct antd import is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n            name: 'antd',\n          },\n        ],\n        patterns: [\n          {\n            group: DEPRECATED_ANTD_COMPONENT_PATHS,\n            message:\n              'Direct antd component import is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n          },\n        ],\n      },\n    ],\n  },\n};\n\nexport default [restrictedImports];\n"],"mappings":";AAAA,MAAM,2BAA2B;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAyBA,MAAa,oBAAoB,EAC/B,OAAO,EACL,yBAAyB,CACvB,SACA;CACE,OAAO;EACL;GACE,aAAa;GACb,SACE;GACF,MAAM;EACR;EACA;GACE,aAAa,CAAC,cAAc;GAC5B,SACE;GACF,MAAM;EACR;EACA;GACE,aAAa;GACb,SAAS;GACT,MAAM;EACR;CACF;CACA,UAAU,CACR;EACE,OAAO;GAhDjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EA6BiB;EACP,SACE;CACJ,CACF;AACF,CACF,EACF,EACF;AAEA,IAAA,iBAAe,CAAC,iBAAiB"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/eslint/index.ts"],"sourcesContent":["const DEPRECATED_UI_COMPONENTS = [\n  'ActionIcon',\n  'Alert',\n  'AutoComplete',\n  'Avatar',\n  'Button',\n  'Checkbox',\n  'CheckboxGroup',\n  'Drawer',\n  'Modal',\n  'Radio',\n  'RadioGroup',\n  'Segmented',\n  'Select',\n  'Slider',\n  'SliderWithInput',\n  'Tabs',\n  'Tag',\n  'Text',\n];\n\nconst DEPRECATED_ANTD_COMPONENT_PATHS = [\n  'antd/es/alert',\n  'antd/es/alert/*',\n  'antd/es/auto-complete',\n  'antd/es/auto-complete/*',\n  'antd/es/checkbox',\n  'antd/es/checkbox/*',\n  'antd/es/radio',\n  'antd/es/radio/*',\n  'antd/es/slider',\n  'antd/es/slider/*',\n  'antd/lib/alert',\n  'antd/lib/alert/*',\n  'antd/lib/auto-complete',\n  'antd/lib/auto-complete/*',\n  'antd/lib/checkbox',\n  'antd/lib/checkbox/*',\n  'antd/lib/radio',\n  'antd/lib/radio/*',\n  'antd/lib/slider',\n  'antd/lib/slider/*',\n];\n\nexport const restrictedImports = {\n  rules: {\n    'no-restricted-imports': [\n      'error',\n      {\n        paths: [\n          {\n            importNames: DEPRECATED_UI_COMPONENTS,\n            message:\n              'The antd-based wrapper is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n            name: '@lobehub/ui',\n          },\n          {\n            importNames: ['createStyles'],\n            message:\n              '`createStyles` is banned in this project. Use `createStaticStyles` from \"antd-style\" instead.',\n            name: 'antd-style',\n          },\n          {\n            importNames: DEPRECATED_UI_COMPONENTS,\n            message: 'Direct antd import is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n            name: 'antd',\n          },\n        ],\n        patterns: [\n          {\n            group: DEPRECATED_ANTD_COMPONENT_PATHS,\n            message:\n              'Direct antd component import is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n          },\n        ],\n      },\n    ],\n  },\n};\n\nexport default [restrictedImports];\n"],"mappings":";AAAA,MAAM,2BAA2B;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAyBA,MAAa,oBAAoB,EAC/B,OAAO,EACL,yBAAyB,CACvB,SACA;CACE,OAAO;EACL;GACE,aAAa;GACb,SACE;GACF,MAAM;EACR;EACA;GACE,aAAa,CAAC,cAAc;GAC5B,SACE;GACF,MAAM;EACR;EACA;GACE,aAAa;GACb,SAAS;GACT,MAAM;EACR;CACF;CACA,UAAU,CACR;EACE,OAAO;GAhDjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EA6BiB;EACP,SACE;CACJ,CACF;AACF,CACF,EACF,EACF;AAEA,IAAA,iBAAe,CAAC,iBAAiB"}

package/es/static-css/baseline.mjs

@@ -14,7 +14,6 @@ const lobeUiAntdBaseline = [
 	"dropdown",
 	"empty",
 	"form",
-	"image",
 	"input",
 	"input-number",
 	"input-textarea",

package/es/static-css/baseline.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"baseline.mjs","names":[],"sources":["../../src/static-css/baseline.ts"],"sourcesContent":["import type { AntdProbeName } from './registry';\n\n// The antd components @lobehub/ui internals can render. Kept in sync with the\n// source tree by baseline.test.ts — a failure there means this list must change.\nexport const lobeUiAntdBaseline: AntdProbeName[] = [\n  'alert',\n  'anchor',\n  'app',\n  'auto-complete',\n  'avatar',\n  'button',\n  'collapse',\n  'color-picker',\n  'date-picker',\n  'divider',\n  'drawer',\n  'dropdown',\n  'empty',\n  'form',\n  'image',\n  'input',\n  'input-number',\n  'input-textarea',\n  'menu',\n  'modal',\n  'popover',\n  'progress',\n  'segmented',\n  'select',\n  'skeleton',\n  'slider',\n  'space',\n  'tabs',\n  'tag',\n  'tag-preset',\n  'tag-status',\n  'upload',\n];\n"],"mappings":";AAIA,MAAa,qBAAsC;CACjD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}
+{"version":3,"file":"baseline.mjs","names":[],"sources":["../../src/static-css/baseline.ts"],"sourcesContent":["import type { AntdProbeName } from './registry';\n\n// The antd components @lobehub/ui internals can render. Kept in sync with the\n// source tree by baseline.test.ts — a failure there means this list must change.\nexport const lobeUiAntdBaseline: AntdProbeName[] = [\n  'alert',\n  'anchor',\n  'app',\n  'auto-complete',\n  'avatar',\n  'button',\n  'collapse',\n  'color-picker',\n  'date-picker',\n  'divider',\n  'drawer',\n  'dropdown',\n  'empty',\n  'form',\n  'input',\n  'input-number',\n  'input-textarea',\n  'menu',\n  'modal',\n  'popover',\n  'progress',\n  'segmented',\n  'select',\n  'skeleton',\n  'slider',\n  'space',\n  'tabs',\n  'tag',\n  'tag-preset',\n  'tag-status',\n  'upload',\n];\n"],"mappings":";AAIA,MAAa,qBAAsC;CACjD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.33.1",
+  "version": "5.33.3",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",