@lobehub/ui 5.2.1 → 5.3.0

package/es/Image/Image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","names":["Image","usePreview","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 mergePreivew = 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 : (mergePreivew 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,cAAc;CACrC,MAAM,mBAAmB,oBAAoB,OAAO,iBAAiB,OAAO;CAC5E,MAAM,eAAeC,mBAAW,QAAQ;AAExC,KAAI,UACF,QACE,oBAAC;EAAa;YACZ,oBAAC,SAAS;GACR;GACA,OAAO;IACL,cAAc,OAAO;IACrB;IACA;IACA;IACA;IACA;IACA;IACD;IACD;GACE;AAGV,QACE,qBAACC;EAAQ,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU;EAAO;EAAY;aACxE,WACC,oBAAC;GAAI,WAAW,GAAG,kBAAkB,oBAAoB,KAAK,iBAAiB;aAC5E;IACG,EAER,oBAACC;GACC,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;GAC9C,UAAU,aAAa,gBAAgB;GAC/B;GACR,SAAS;GACT,SAAS,YAAY,QAAQ,QAAS;GAC/B;GACP,YAAY,EACV,MAAM,GAAG,OAAO,SAAS,YAAY,QAAQ,EAC9C;GACD,OAAO;IACL;IACA;IACA;IACA;IACA,WAAW,aAAa;IACxB,GAAG,cAAc;IAClB;GACD,QAAQ,EACN,MAAM,cAAc,SACrB;GACQ;GACT,GAAI;IACJ;GACM;EAGf;AAED,QAAM,cAAc;AAEpB,oBAAeH"}
+{"version":3,"file":"Image.mjs","names":["Image","usePreview","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,cAAc;CACrC,MAAM,mBAAmB,oBAAoB,OAAO,iBAAiB,OAAO;CAC5E,MAAM,eAAeC,mBAAW,QAAQ;AAExC,KAAI,UACF,QACE,oBAAC;EAAa;YACZ,oBAAC,SAAS;GACR;GACA,OAAO;IACL,cAAc,OAAO;IACrB;IACA;IACA;IACA;IACA;IACA;IACD;IACD;GACE;AAGV,QACE,qBAACC;EAAQ,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU;EAAO;EAAY;aACxE,WACC,oBAAC;GAAI,WAAW,GAAG,kBAAkB,oBAAoB,KAAK,iBAAiB;aAC5E;IACG,EAER,oBAACC;GACC,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;GAC9C,UAAU,aAAa,gBAAgB;GAC/B;GACR,SAAS;GACT,SAAS,YAAY,QAAQ,QAAS;GAC/B;GACP,YAAY,EACV,MAAM,GAAG,OAAO,SAAS,YAAY,QAAQ,EAC9C;GACD,OAAO;IACL;IACA;IACA;IACA;IACA,WAAW,aAAa;IACxB,GAAG,cAAc;IAClB;GACD,QAAQ,EACN,MAAM,cAAc,SACrB;GACQ;GACT,GAAI;IACJ;GACM;EAGf;AAED,QAAM,cAAc;AAEpB,oBAAeH"}

package/es/Image/PreviewGroup.d.mts

@@ -1,8 +1,8 @@
 import { PreviewGroupProps } from "./type.mjs";
-import * as react15 from "react";
+import * as react69 from "react";
 
 //#region src/Image/PreviewGroup.d.ts
-declare const PreviewGroup: react15.NamedExoticComponent<PreviewGroupProps>;
+declare const PreviewGroup: react69.NamedExoticComponent<PreviewGroupProps>;
 //#endregion
 export { PreviewGroup };
 //# sourceMappingURL=PreviewGroup.d.mts.map

package/es/Image/components/Toolbar.mjs

@@ -1,46 +1,126 @@
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import TooltipGroup_default from "../../Tooltip/TooltipGroup.mjs";
 import ActionIcon_default from "../../ActionIcon/ActionIcon.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { downloadBlob } from "../../utils/downloadBlob.mjs";
 import { styles } from "../style.mjs";
-import { memo } from "react";
+import image_default from "../../i18n/resources/en/image.mjs";
+import { getClipboardBlob } from "../../utils/blobToPng.mjs";
+import { memo, useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { FlipHorizontal, FlipVertical, RotateCcw, RotateCw, ZoomIn, ZoomOut } from "lucide-react";
+import { message } from "antd";
+import { Copy, Download, FlipHorizontal, FlipVertical, RotateCcw, RotateCw, ZoomIn, ZoomOut } from "lucide-react";
 
 //#region src/Image/components/Toolbar.tsx
+const getFileNameFromUrl = (url) => {
+	try {
+		const match = new URL(url).pathname.match(/\/([^/]+)$/);
+		return match ? decodeURIComponent(match[1]) : "image";
+	} catch {
+		return "image";
+	}
+};
+const getExtensionFromMimeType = (mimeType) => {
+	return {
+		"image/svg+xml": "svg",
+		"image/png": "png",
+		"image/jpeg": "jpg",
+		"image/jpg": "jpg",
+		"image/webp": "webp",
+		"image/gif": "gif"
+	}[mimeType?.toLowerCase()] || mimeType?.split("/")[1]?.split("+")[0] || "png";
+};
 const Toolbar = memo(({ children, info, minScale, maxScale }) => {
-	const { transform: { scale }, actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn } } = info;
-	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		horizontal: true,
-		className: styles.toolbar,
-		gap: 4,
-		children: [
-			/* @__PURE__ */ jsx(ActionIcon_default, {
-				icon: FlipHorizontal,
-				onClick: onFlipX
-			}),
-			/* @__PURE__ */ jsx(ActionIcon_default, {
-				icon: FlipVertical,
-				onClick: onFlipY
-			}),
-			/* @__PURE__ */ jsx(ActionIcon_default, {
-				icon: RotateCcw,
-				onClick: onRotateLeft
-			}),
-			/* @__PURE__ */ jsx(ActionIcon_default, {
-				icon: RotateCw,
-				onClick: onRotateRight
-			}),
-			/* @__PURE__ */ jsx(ActionIcon_default, {
-				disabled: scale === minScale,
-				icon: ZoomOut,
-				onClick: onZoomOut
-			}),
-			/* @__PURE__ */ jsx(ActionIcon_default, {
-				disabled: scale === maxScale,
-				icon: ZoomIn,
-				onClick: onZoomIn
-			}),
-			children
-		]
+	const { t } = useTranslation(image_default);
+	const [containerEl, setContainerEl] = useState(null);
+	const [copyLoading, setCopyLoading] = useState(false);
+	const [downloadLoading, setDownloadLoading] = useState(false);
+	const { transform: { scale }, actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn }, image: { url } } = info;
+	const handleDownload = useCallback(async () => {
+		setDownloadLoading(true);
+		try {
+			const blob = await (await fetch(url, { mode: "cors" })).blob();
+			const blobUrl = URL.createObjectURL(blob);
+			let fileName = getFileNameFromUrl(url);
+			const ext = getExtensionFromMimeType(blob.type);
+			if (!fileName.includes(".")) fileName = `${fileName}.${ext}`;
+			else if (fileName.endsWith(".svg+xml")) fileName = fileName.replace(/\.svg\+xml$/i, ".svg");
+			await downloadBlob(blobUrl, fileName);
+			URL.revokeObjectURL(blobUrl);
+			message.success(t("image.downloadSuccess"));
+		} catch {
+			message.error(t("image.downloadFailed"));
+		} finally {
+			setDownloadLoading(false);
+		}
+	}, [url, t]);
+	const handleCopy = useCallback(async () => {
+		setCopyLoading(true);
+		try {
+			const clipboardBlob = await getClipboardBlob(await (await fetch(url, { mode: "cors" })).blob());
+			await navigator.clipboard.write([new ClipboardItem(clipboardBlob)]);
+			message.success(t("image.copySuccess"));
+		} catch {
+			message.error(t("image.copyFailed"));
+		} finally {
+			setCopyLoading(false);
+		}
+	}, [url, t]);
+	return /* @__PURE__ */ jsx(TooltipGroup_default, {
+		popupContainer: containerEl ?? void 0,
+		children: /* @__PURE__ */ jsxs(FlexBasic_default, {
+			horizontal: true,
+			className: styles.toolbar,
+			gap: 4,
+			ref: setContainerEl,
+			children: [
+				/* @__PURE__ */ jsx(ActionIcon_default, {
+					icon: FlipHorizontal,
+					title: t("image.flipHorizontal"),
+					onClick: onFlipX
+				}),
+				/* @__PURE__ */ jsx(ActionIcon_default, {
+					icon: FlipVertical,
+					title: t("image.flipVertical"),
+					onClick: onFlipY
+				}),
+				/* @__PURE__ */ jsx(ActionIcon_default, {
+					icon: RotateCcw,
+					title: t("image.rotateLeft"),
+					onClick: onRotateLeft
+				}),
+				/* @__PURE__ */ jsx(ActionIcon_default, {
+					icon: RotateCw,
+					title: t("image.rotateRight"),
+					onClick: onRotateRight
+				}),
+				/* @__PURE__ */ jsx(ActionIcon_default, {
+					disabled: scale === minScale,
+					icon: ZoomOut,
+					title: t("image.zoomOut"),
+					onClick: onZoomOut
+				}),
+				/* @__PURE__ */ jsx(ActionIcon_default, {
+					disabled: scale === maxScale,
+					icon: ZoomIn,
+					title: t("image.zoomIn"),
+					onClick: onZoomIn
+				}),
+				/* @__PURE__ */ jsx(ActionIcon_default, {
+					icon: Copy,
+					loading: copyLoading,
+					title: t("image.copy"),
+					onClick: handleCopy
+				}),
+				/* @__PURE__ */ jsx(ActionIcon_default, {
+					icon: Download,
+					loading: downloadLoading,
+					title: t("image.download"),
+					onClick: handleDownload
+				}),
+				children
+			]
+		})
 	});
 });
 var Toolbar_default = Toolbar;

package/es/Image/components/Toolbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.mjs","names":["Flexbox","ActionIcon"],"sources":["../../../src/Image/components/Toolbar.tsx"],"sourcesContent":["import { FlipHorizontal, FlipVertical, RotateCcw, RotateCw, ZoomIn, ZoomOut } from 'lucide-react';\nimport { type ToolbarRenderInfoType } from 'rc-image/lib/Preview';\nimport { memo, type ReactNode } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from '../style';\n\nexport interface ToolbarProps {\n  children?: ReactNode;\n  info: Omit<ToolbarRenderInfoType, 'current' | 'total'>;\n  maxScale: number;\n  minScale: number;\n}\n\nconst Toolbar = memo<ToolbarProps>(({ children, info, minScale, maxScale }) => {\n  const {\n    transform: { scale },\n    actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn },\n  } = info;\n\n  return (\n    <Flexbox horizontal className={styles.toolbar} gap={4}>\n      <ActionIcon icon={FlipHorizontal} onClick={onFlipX} />\n      <ActionIcon icon={FlipVertical} onClick={onFlipY} />\n      <ActionIcon icon={RotateCcw} onClick={onRotateLeft} />\n      <ActionIcon icon={RotateCw} onClick={onRotateRight} />\n      <ActionIcon disabled={scale === minScale} icon={ZoomOut} onClick={onZoomOut} />\n      <ActionIcon disabled={scale === maxScale} icon={ZoomIn} onClick={onZoomIn} />\n      {children}\n    </Flexbox>\n  );\n});\n\nexport default Toolbar;\n"],"mappings":";;;;;;;;AAgBA,MAAM,UAAU,MAAoB,EAAE,UAAU,MAAM,UAAU,eAAe;CAC7E,MAAM,EACJ,WAAW,EAAE,SACb,SAAS,EAAE,SAAS,SAAS,cAAc,eAAe,WAAW,eACnE;AAEJ,QACE,qBAACA;EAAQ;EAAW,WAAW,OAAO;EAAS,KAAK;;GAClD,oBAACC;IAAW,MAAM;IAAgB,SAAS;KAAW;GACtD,oBAACA;IAAW,MAAM;IAAc,SAAS;KAAW;GACpD,oBAACA;IAAW,MAAM;IAAW,SAAS;KAAgB;GACtD,oBAACA;IAAW,MAAM;IAAU,SAAS;KAAiB;GACtD,oBAACA;IAAW,UAAU,UAAU;IAAU,MAAM;IAAS,SAAS;KAAa;GAC/E,oBAACA;IAAW,UAAU,UAAU;IAAU,MAAM;IAAQ,SAAS;KAAY;GAC5E;;GACO;EAEZ;AAEF,sBAAe"}
+{"version":3,"file":"Toolbar.mjs","names":["imageMessages","TooltipGroup","Flexbox","ActionIcon"],"sources":["../../../src/Image/components/Toolbar.tsx"],"sourcesContent":["import { message } from 'antd';\nimport {\n  Copy,\n  Download,\n  FlipHorizontal,\n  FlipVertical,\n  RotateCcw,\n  RotateCw,\n  ZoomIn,\n  ZoomOut,\n} from 'lucide-react';\nimport { type ToolbarRenderInfoType } from 'rc-image/lib/Preview';\nimport { memo, type ReactNode, useCallback, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport imageMessages from '@/i18n/resources/en/image';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { TooltipGroup } from '@/Tooltip';\nimport { getClipboardBlob } from '@/utils/blobToPng';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport { styles } from '../style';\n\nconst getFileNameFromUrl = (url: string): string => {\n  try {\n    const pathname = new URL(url).pathname;\n    const match = pathname.match(/\\/([^/]+)$/);\n    return match ? decodeURIComponent(match[1]) : 'image';\n  } catch {\n    return 'image';\n  }\n};\n\nconst getExtensionFromMimeType = (mimeType: string): string => {\n  const map: Record<string, string> = {\n    'image/svg+xml': 'svg',\n    'image/png': 'png',\n    'image/jpeg': 'jpg',\n    'image/jpg': 'jpg',\n    'image/webp': 'webp',\n    'image/gif': 'gif',\n  };\n  return map[mimeType?.toLowerCase()] || mimeType?.split('/')[1]?.split('+')[0] || 'png';\n};\n\nexport interface ToolbarProps {\n  children?: ReactNode;\n  info: Omit<ToolbarRenderInfoType, 'current' | 'total'>;\n  maxScale: number;\n  minScale: number;\n}\n\nconst Toolbar = memo<ToolbarProps>(({ children, info, minScale, maxScale }) => {\n  const { t } = useTranslation(imageMessages);\n  const [containerEl, setContainerEl] = useState<HTMLElement | null>(null);\n  const [copyLoading, setCopyLoading] = useState(false);\n  const [downloadLoading, setDownloadLoading] = useState(false);\n  const {\n    transform: { scale },\n    actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn },\n    image: { url },\n  } = info;\n\n  const handleDownload = useCallback(async () => {\n    setDownloadLoading(true);\n    try {\n      const response = await fetch(url, { mode: 'cors' });\n      const blob = await response.blob();\n      const blobUrl = URL.createObjectURL(blob);\n      let fileName = getFileNameFromUrl(url);\n      const ext = getExtensionFromMimeType(blob.type);\n      if (!fileName.includes('.')) {\n        fileName = `${fileName}.${ext}`;\n      } else if (fileName.endsWith('.svg+xml')) {\n        fileName = fileName.replace(/\\.svg\\+xml$/i, '.svg');\n      }\n      await downloadBlob(blobUrl, fileName);\n      URL.revokeObjectURL(blobUrl);\n      message.success(t('image.downloadSuccess'));\n    } catch {\n      message.error(t('image.downloadFailed'));\n    } finally {\n      setDownloadLoading(false);\n    }\n  }, [url, t]);\n\n  const handleCopy = useCallback(async () => {\n    setCopyLoading(true);\n    try {\n      const response = await fetch(url, { mode: 'cors' });\n      const blob = await response.blob();\n      const clipboardBlob = await getClipboardBlob(blob);\n      await navigator.clipboard.write([new ClipboardItem(clipboardBlob)]);\n      message.success(t('image.copySuccess'));\n    } catch {\n      message.error(t('image.copyFailed'));\n    } finally {\n      setCopyLoading(false);\n    }\n  }, [url, t]);\n\n  return (\n    <TooltipGroup popupContainer={containerEl ?? undefined}>\n      <Flexbox horizontal className={styles.toolbar} gap={4} ref={setContainerEl}>\n        <ActionIcon icon={FlipHorizontal} title={t('image.flipHorizontal')} onClick={onFlipX} />\n        <ActionIcon icon={FlipVertical} title={t('image.flipVertical')} onClick={onFlipY} />\n        <ActionIcon icon={RotateCcw} title={t('image.rotateLeft')} onClick={onRotateLeft} />\n        <ActionIcon icon={RotateCw} title={t('image.rotateRight')} onClick={onRotateRight} />\n        <ActionIcon\n          disabled={scale === minScale}\n          icon={ZoomOut}\n          title={t('image.zoomOut')}\n          onClick={onZoomOut}\n        />\n        <ActionIcon\n          disabled={scale === maxScale}\n          icon={ZoomIn}\n          title={t('image.zoomIn')}\n          onClick={onZoomIn}\n        />\n        <ActionIcon\n          icon={Copy}\n          loading={copyLoading}\n          title={t('image.copy')}\n          onClick={handleCopy}\n        />\n        <ActionIcon\n          icon={Download}\n          loading={downloadLoading}\n          title={t('image.download')}\n          onClick={handleDownload}\n        />\n        {children}\n      </Flexbox>\n    </TooltipGroup>\n  );\n});\n\nexport default Toolbar;\n"],"mappings":"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"}

package/es/ImageSelect/ImageSelect.d.mts

@@ -1,8 +1,8 @@
 import { ImageSelectProps } from "./type.mjs";
-import * as react117 from "react";
+import * as react81 from "react";
 
 //#region src/ImageSelect/ImageSelect.d.ts
-declare const ImageSelect: react117.NamedExoticComponent<ImageSelectProps>;
+declare const ImageSelect: react81.NamedExoticComponent<ImageSelectProps>;
 //#endregion
 export { ImageSelect };
 //# sourceMappingURL=ImageSelect.d.mts.map

package/es/Input/Input.d.mts

@@ -1,8 +1,8 @@
 import { InputProps } from "./type.mjs";
-import * as react145 from "react";
+import * as react121 from "react";
 
 //#region src/Input/Input.d.ts
-declare const Input: react145.NamedExoticComponent<InputProps>;
+declare const Input: react121.NamedExoticComponent<InputProps>;
 //#endregion
 export { Input };
 //# sourceMappingURL=Input.d.mts.map

package/es/Input/InputNumber.d.mts

@@ -1,8 +1,8 @@
 import { InputNumberProps } from "./type.mjs";
-import * as react144 from "react";
+import * as react123 from "react";
 
 //#region src/Input/InputNumber.d.ts
-declare const InputNumber: react144.NamedExoticComponent<InputNumberProps>;
+declare const InputNumber: react123.NamedExoticComponent<InputNumberProps>;
 //#endregion
 export { InputNumber };
 //# sourceMappingURL=InputNumber.d.mts.map

package/es/Input/InputOPT.d.mts

@@ -1,8 +1,8 @@
 import { InputOPTProps } from "./type.mjs";
-import * as react147 from "react";
+import * as react124 from "react";
 
 //#region src/Input/InputOPT.d.ts
-declare const InputOPT: react147.NamedExoticComponent<InputOPTProps>;
+declare const InputOPT: react124.NamedExoticComponent<InputOPTProps>;
 //#endregion
 export { InputOPT };
 //# sourceMappingURL=InputOPT.d.mts.map

package/es/Input/InputPassword.d.mts

@@ -1,8 +1,8 @@
 import { InputPasswordProps } from "./type.mjs";
-import * as react148 from "react";
+import * as react125 from "react";
 
 //#region src/Input/InputPassword.d.ts
-declare const InputPassword: react148.NamedExoticComponent<InputPasswordProps>;
+declare const InputPassword: react125.NamedExoticComponent<InputPasswordProps>;
 //#endregion
 export { InputPassword };
 //# sourceMappingURL=InputPassword.d.mts.map

package/es/Input/TextArea.d.mts

@@ -1,8 +1,8 @@
 import { TextAreaProps } from "./type.mjs";
-import * as react146 from "react";
+import * as react126 from "react";
 
 //#region src/Input/TextArea.d.ts
-declare const TextArea: react146.NamedExoticComponent<TextAreaProps>;
+declare const TextArea: react126.NamedExoticComponent<TextAreaProps>;
 //#endregion
 export { TextArea };
 //# sourceMappingURL=TextArea.d.mts.map

package/es/Layout/components/LayoutFooter.d.mts

@@ -1,9 +1,9 @@
 import { DivProps } from "../../types/index.mjs";
 import "../../index.mjs";
-import * as react23 from "react";
+import * as react62 from "react";
 
 //#region src/Layout/components/LayoutFooter.d.ts
-declare const LayoutFooter: react23.NamedExoticComponent<DivProps>;
+declare const LayoutFooter: react62.NamedExoticComponent<DivProps>;
 //#endregion
 export { LayoutFooter };
 //# sourceMappingURL=LayoutFooter.d.mts.map

package/es/Layout/components/LayoutHeader.d.mts

@@ -1,8 +1,8 @@
 import { LayoutHeaderProps } from "../type.mjs";
-import * as react24 from "react";
+import * as react64 from "react";
 
 //#region src/Layout/components/LayoutHeader.d.ts
-declare const LayoutHeader: react24.NamedExoticComponent<LayoutHeaderProps>;
+declare const LayoutHeader: react64.NamedExoticComponent<LayoutHeaderProps>;
 //#endregion
 export { LayoutHeader };
 //# sourceMappingURL=LayoutHeader.d.mts.map

package/es/Layout/components/LayoutMain.d.mts

@@ -1,9 +1,9 @@
 import { DivProps } from "../../types/index.mjs";
 import "../../index.mjs";
-import * as react25 from "react";
+import * as react63 from "react";
 
 //#region src/Layout/components/LayoutMain.d.ts
-declare const LayoutMain: react25.NamedExoticComponent<DivProps>;
+declare const LayoutMain: react63.NamedExoticComponent<DivProps>;
 //#endregion
 export { LayoutMain };
 //# sourceMappingURL=LayoutMain.d.mts.map

package/es/Layout/components/LayoutSidebar.d.mts

@@ -1,8 +1,8 @@
 import { LayoutSidebarProps } from "../type.mjs";
-import * as react26 from "react";
+import * as react66 from "react";
 
 //#region src/Layout/components/LayoutSidebar.d.ts
-declare const LayoutSidebar: react26.NamedExoticComponent<LayoutSidebarProps>;
+declare const LayoutSidebar: react66.NamedExoticComponent<LayoutSidebarProps>;
 //#endregion
 export { LayoutSidebar };
 //# sourceMappingURL=LayoutSidebar.d.mts.map

package/es/Layout/components/LayoutSidebarInner.d.mts

@@ -1,8 +1,8 @@
 import { LayoutSidebarInnerProps } from "../type.mjs";
-import * as react27 from "react";
+import * as react65 from "react";
 
 //#region src/Layout/components/LayoutSidebarInner.d.ts
-declare const LayoutSidebarInner: react27.NamedExoticComponent<LayoutSidebarInnerProps>;
+declare const LayoutSidebarInner: react65.NamedExoticComponent<LayoutSidebarInnerProps>;
 //#endregion
 export { LayoutSidebarInner };
 //# sourceMappingURL=LayoutSidebarInner.d.mts.map

package/es/Layout/components/LayoutToc.d.mts

@@ -1,8 +1,8 @@
 import { LayoutTocProps } from "../type.mjs";
-import * as react28 from "react";
+import * as react67 from "react";
 
 //#region src/Layout/components/LayoutToc.d.ts
-declare const LayoutToc: react28.NamedExoticComponent<LayoutTocProps>;
+declare const LayoutToc: react67.NamedExoticComponent<LayoutTocProps>;
 //#endregion
 export { LayoutToc };
 //# sourceMappingURL=LayoutToc.d.mts.map

package/es/List/ListItem/index.d.mts

@@ -1,8 +1,8 @@
 import { ListItemProps } from "../type.mjs";
-import * as react31 from "react";
+import * as react68 from "react";
 
 //#region src/List/ListItem/index.d.ts
-declare const ListItem: react31.NamedExoticComponent<ListItemProps>;
+declare const ListItem: react68.NamedExoticComponent<ListItemProps>;
 //#endregion
 export { ListItem };
 //# sourceMappingURL=index.d.mts.map

package/es/Markdown/Markdown.d.mts

@@ -1,8 +1,8 @@
 import { MarkdownProps } from "./type.mjs";
-import * as react21 from "react";
+import * as react58 from "react";
 
 //#region src/Markdown/Markdown.d.ts
-declare const Markdown: react21.NamedExoticComponent<MarkdownProps>;
+declare const Markdown: react58.NamedExoticComponent<MarkdownProps>;
 //#endregion
 export { Markdown };
 //# sourceMappingURL=Markdown.d.mts.map

package/es/Markdown/Typography.d.mts

@@ -1,8 +1,8 @@
 import { TypographyProps } from "./type.mjs";
-import * as react20 from "react";
+import * as react57 from "react";
 
 //#region src/Markdown/Typography.d.ts
-declare const Typography: react20.NamedExoticComponent<TypographyProps>;
+declare const Typography: react57.NamedExoticComponent<TypographyProps>;
 //#endregion
 export { Typography };
 //# sourceMappingURL=Typography.d.mts.map

package/es/Markdown/components/SearchResultCards/index.d.mts

@@ -1,6 +1,6 @@
 import { FlexboxProps } from "../../../Flex/type.mjs";
 import "../../../Flex/index.mjs";
-import * as react66 from "react";
+import * as react30 from "react";
 import { Ref } from "react";
 
 //#region src/Markdown/components/SearchResultCards/index.d.ts
@@ -14,7 +14,7 @@ interface SearchResultCardsProps extends FlexboxProps {
   dataSource: string[] | SearchResultItem[];
   ref?: Ref<HTMLDivElement>;
 }
-declare const SearchResultCards: react66.NamedExoticComponent<SearchResultCardsProps>;
+declare const SearchResultCards: react30.NamedExoticComponent<SearchResultCardsProps>;
 //#endregion
 export { SearchResultCards, SearchResultCardsProps };
 //# sourceMappingURL=index.d.mts.map

package/es/MaskShadow/MaskShadow.d.mts

@@ -1,8 +1,8 @@
 import { MaskShadowProps } from "./type.mjs";
-import * as react79 from "react";
+import * as react56 from "react";
 
 //#region src/MaskShadow/MaskShadow.d.ts
-declare const MaskShadow: react79.NamedExoticComponent<MaskShadowProps>;
+declare const MaskShadow: react56.NamedExoticComponent<MaskShadowProps>;
 //#endregion
 export { MaskShadow };
 //# sourceMappingURL=MaskShadow.d.mts.map

package/es/Menu/Menu.d.mts

@@ -1,8 +1,8 @@
 import { MenuProps } from "./type.mjs";
-import * as react1 from "react";
+import * as react61 from "react";
 
 //#region src/Menu/Menu.d.ts
-declare const Menu: react1.NamedExoticComponent<MenuProps<unknown>>;
+declare const Menu: react61.NamedExoticComponent<MenuProps<unknown>>;
 //#endregion
 export { Menu };
 //# sourceMappingURL=Menu.d.mts.map

package/es/Modal/Modal.d.mts

@@ -1,8 +1,8 @@
 import { ModalProps } from "./type.mjs";
-import * as react52 from "react";
+import * as react49 from "react";
 
 //#region src/Modal/Modal.d.ts
-declare const Modal: react52.NamedExoticComponent<ModalProps>;
+declare const Modal: react49.NamedExoticComponent<ModalProps>;
 //#endregion
 export { Modal };
 //# sourceMappingURL=Modal.d.mts.map

package/es/Modal/ModalProvider.d.mts

@@ -1,9 +1,9 @@
 import { ModalContextValue } from "./type.mjs";
-import * as react53 from "react";
+import * as react50 from "react";
 import { ReactNode } from "react";
 
 //#region src/Modal/ModalProvider.d.ts
-declare const ModalProvider: react53.NamedExoticComponent<{
+declare const ModalProvider: react50.NamedExoticComponent<{
   children: ReactNode;
   value: ModalContextValue;
 }>;

package/es/Modal/imperative.d.mts

@@ -1,5 +1,5 @@
 import { ImperativeModalProps, ModalInstance, RawModalComponent, RawModalComponentProps, RawModalInstance, RawModalKeyOptions, RawModalOptions } from "./type.mjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/Modal/imperative.d.ts
 type ModalHostProps = {
@@ -7,7 +7,7 @@ type ModalHostProps = {
 };
 declare const ModalHost: ({
   root
-}: ModalHostProps) => react_jsx_runtime0.JSX.Element | null;
+}: ModalHostProps) => react_jsx_runtime11.JSX.Element | null;
 declare const createModal: (props: ImperativeModalProps) => ModalInstance;
 declare function createRawModal<P extends RawModalComponentProps>(component: RawModalComponent<P>, props: Omit<P, 'open' | 'onClose'>, options?: RawModalOptions): RawModalInstance<P>;
 declare function createRawModal<P, OpenKey extends keyof P, CloseKey extends keyof P>(component: RawModalComponent<P>, props: Omit<P, OpenKey | CloseKey>, options: RawModalKeyOptions<OpenKey, CloseKey>): RawModalInstance<P, OpenKey, CloseKey>;

package/es/MotionProvider/index.d.mts

@@ -1,4 +1,4 @@
-import * as react67 from "react";
+import * as react31 from "react";
 import { Context, ReactNode } from "react";
 import * as motion_react0 from "motion/react";
 import * as m from "motion/react-m";
@@ -6,7 +6,7 @@ import * as m from "motion/react-m";
 //#region src/MotionProvider/index.d.ts
 type MotionComponentType = typeof motion_react0.motion | typeof m;
 declare const MotionComponent: Context<MotionComponentType>;
-declare const MotionProvider: react67.NamedExoticComponent<{
+declare const MotionProvider: react31.NamedExoticComponent<{
   children: ReactNode;
   motion: MotionComponentType;
 }>;

package/es/Popover/ArrowIcon.d.mts

@@ -1,7 +1,7 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/Popover/ArrowIcon.d.ts
-declare const PopoverArrowIcon: react_jsx_runtime1.JSX.Element;
+declare const PopoverArrowIcon: react_jsx_runtime12.JSX.Element;
 //#endregion
 export { PopoverArrowIcon };
 //# sourceMappingURL=ArrowIcon.d.mts.map

package/es/Popover/atoms.d.mts

@@ -1,13 +1,13 @@
 import { PopoverPlacement } from "./type.mjs";
-import * as react55 from "react";
+import * as react54 from "react";
 import { ComponentProps, ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 import * as _base_ui_react_popover0 from "@base-ui/react/popover";
 import { Popover } from "@base-ui/react/popover";
 
 //#region src/Popover/atoms.d.ts
 declare const PopoverRoot: typeof Popover.Root;
-declare const PopoverBackdrop: react55.ForwardRefExoticComponent<_base_ui_react_popover0.PopoverBackdropProps & react55.RefAttributes<HTMLDivElement>>;
+declare const PopoverBackdrop: react54.ForwardRefExoticComponent<_base_ui_react_popover0.PopoverBackdropProps & react54.RefAttributes<HTMLDivElement>>;
 type PopoverTriggerElementProps = Omit<ComponentPropsWithRef<typeof Popover.Trigger>, 'children' | 'render'> & {
   children: ComponentProps<typeof Popover.Trigger>['children'];
 };
@@ -18,7 +18,7 @@ declare const PopoverTriggerElement: {
     nativeButton,
     ref: refProp,
     ...rest
-  }: PopoverTriggerElementProps): react_jsx_runtime2.JSX.Element;
+  }: PopoverTriggerElementProps): react_jsx_runtime13.JSX.Element;
   displayName: string;
 };
 type PopoverPortalAtomProps = Omit<ComponentProps<typeof Popover.Portal>, 'container'> & {
@@ -37,7 +37,7 @@ declare const PopoverPortal: {
     root,
     children,
     ...rest
-  }: PopoverPortalAtomProps): react_jsx_runtime2.JSX.Element | null;
+  }: PopoverPortalAtomProps): react_jsx_runtime13.JSX.Element | null;
   displayName: string;
 };
 type PopoverPositionerAtomProps = ComponentProps<typeof Popover.Positioner> & {
@@ -54,7 +54,7 @@ declare const PopoverPositioner: {
     side,
     sideOffset,
     ...rest
-  }: PopoverPositionerAtomProps): react_jsx_runtime2.JSX.Element;
+  }: PopoverPositionerAtomProps): react_jsx_runtime13.JSX.Element;
   displayName: string;
 };
 type PopoverPopupAtomProps = ComponentProps<typeof Popover.Popup>;
@@ -62,7 +62,7 @@ declare const PopoverPopup: {
   ({
     className,
     ...rest
-  }: PopoverPopupAtomProps): react_jsx_runtime2.JSX.Element;
+  }: PopoverPopupAtomProps): react_jsx_runtime13.JSX.Element;
   displayName: string;
 };
 type PopoverArrowAtomProps = ComponentProps<typeof Popover.Arrow>;
@@ -71,7 +71,7 @@ declare const PopoverArrow: {
     className,
     children,
     ...rest
-  }: PopoverArrowAtomProps): react_jsx_runtime2.JSX.Element;
+  }: PopoverArrowAtomProps): react_jsx_runtime13.JSX.Element;
   displayName: string;
 };
 type PopoverViewportAtomProps = ComponentProps<typeof Popover.Viewport>;
@@ -79,7 +79,7 @@ declare const PopoverViewport: {
   ({
     className,
     ...rest
-  }: PopoverViewportAtomProps): react_jsx_runtime2.JSX.Element;
+  }: PopoverViewportAtomProps): react_jsx_runtime13.JSX.Element;
   displayName: string;
 };
 //#endregion

package/es/Popover/context.d.mts

@@ -1,11 +1,11 @@
-import * as react57 from "react";
+import * as react52 from "react";
 import { ReactNode } from "react";
 
 //#region src/Popover/context.d.ts
 type PopoverContextValue = {
   close: () => void;
 };
-declare const PopoverProvider: react57.NamedExoticComponent<{
+declare const PopoverProvider: react52.NamedExoticComponent<{
   children: ReactNode;
   value: PopoverContextValue;
 }>;

package/es/SearchBar/SearchBar.d.mts

@@ -1,8 +1,8 @@
 import { SearchBarProps } from "./type.mjs";
-import * as react69 from "react";
+import * as react47 from "react";
 
 //#region src/SearchBar/SearchBar.d.ts
-declare const SearchBar: react69.NamedExoticComponent<SearchBarProps>;
+declare const SearchBar: react47.NamedExoticComponent<SearchBarProps>;
 //#endregion
 export { SearchBar };
 //# sourceMappingURL=SearchBar.d.mts.map

package/es/Segmented/Segmented.d.mts

@@ -1,8 +1,8 @@
 import { SegmentedProps } from "./type.mjs";
-import * as react49 from "react";
+import * as react46 from "react";
 
 //#region src/Segmented/Segmented.d.ts
-declare const Segmented: react49.NamedExoticComponent<SegmentedProps>;
+declare const Segmented: react46.NamedExoticComponent<SegmentedProps>;
 //#endregion
 export { Segmented };
 //# sourceMappingURL=Segmented.d.mts.map