@lobehub/ui 4.3.2 → 4.3.3

package/es/chat/LoadingDots/LoadingDots.mjs

@@ -1,21 +1,24 @@
 'use client';
 
-import { useStyles } from "./style.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { styles } from "./style.mjs";
+import { useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/chat/LoadingDots/LoadingDots.tsx
-const LoadingDots = ({ size = 8, color, variant = "dots", className }) => {
-	const { styles, cx } = useStyles({
-		color,
-		size
-	});
+const LoadingDots = ({ size = 8, color, variant = "dots", className, style }) => {
+	const cssVariables = useMemo(() => {
+		const vars = { "--loading-dots-size": `${size}px` };
+		if (color) vars["--loading-dots-color"] = color;
+		return vars;
+	}, [color, size]);
 	const renderDots = () => {
 		switch (variant) {
 			case "pulse": return /* @__PURE__ */ jsx("div", {
 				className: styles.pulseDot,
 				style: { animationDelay: "0s" }
 			});
-			case "wave": return /* @__PURE__ */ jsxs(Fragment, { children: [
+			case "wave": return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx("div", {
 					className: styles.waveDot,
 					style: { animationDelay: "0s" }
@@ -46,7 +49,7 @@ const LoadingDots = ({ size = 8, color, variant = "dots", className }) => {
 					})
 				]
 			});
-			case "typing": return /* @__PURE__ */ jsxs(Fragment, { children: [
+			case "typing": return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx("div", {
 					className: styles.typingDot,
 					style: { animationDelay: "0s" }
@@ -60,7 +63,7 @@ const LoadingDots = ({ size = 8, color, variant = "dots", className }) => {
 					style: { animationDelay: "0.3s" }
 				})
 			] });
-			default: return /* @__PURE__ */ jsxs(Fragment, { children: [
+			default: return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx("div", {
 					className: styles.defaultDot,
 					style: { animationDelay: "0s" }
@@ -78,6 +81,10 @@ const LoadingDots = ({ size = 8, color, variant = "dots", className }) => {
 	};
 	return /* @__PURE__ */ jsx("div", {
 		className: cx(variant === "orbit" ? styles.orbitWrapper : styles.container, className),
+		style: {
+			...cssVariables,
+			...style
+		},
 		children: renderDots()
 	});
 };

package/es/chat/LoadingDots/LoadingDots.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingDots.mjs","names":["LoadingDots: FC<LoadingDotsProps>"],"sources":["../../../src/chat/LoadingDots/LoadingDots.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport { useStyles } from './style';\nimport type { LoadingDotsProps } from './type';\n\nconst LoadingDots: FC<LoadingDotsProps> = ({ size = 8, color, variant = 'dots', className }) => {\n  const { styles, cx } = useStyles({ color, size });\n\n  const renderDots = () => {\n    switch (variant) {\n      case 'pulse': {\n        return <div className={styles.pulseDot} style={{ animationDelay: '0s' }} />;\n      }\n\n      case 'wave': {\n        return (\n          <>\n            <div className={styles.waveDot} style={{ animationDelay: '0s' }} />\n            <div className={styles.waveDot} style={{ animationDelay: '0.12s' }} />\n            <div className={styles.waveDot} style={{ animationDelay: '0.24s' }} />\n          </>\n        );\n      }\n\n      case 'orbit': {\n        return (\n          <div className={styles.orbitContainer}>\n            <div className={styles.orbitDot} style={{ animationDelay: '0s' }} />\n            <div className={styles.orbitDot} style={{ animationDelay: '-0.4s' }} />\n            <div className={styles.orbitDot} style={{ animationDelay: '-0.8s' }} />\n          </div>\n        );\n      }\n\n      case 'typing': {\n        return (\n          <>\n            <div className={styles.typingDot} style={{ animationDelay: '0s' }} />\n            <div className={styles.typingDot} style={{ animationDelay: '0.15s' }} />\n            <div className={styles.typingDot} style={{ animationDelay: '0.3s' }} />\n          </>\n        );\n      }\n\n      default: {\n        return (\n          <>\n            <div className={styles.defaultDot} style={{ animationDelay: '0s' }} />\n            <div className={styles.defaultDot} style={{ animationDelay: '0.15s' }} />\n            <div className={styles.defaultDot} style={{ animationDelay: '0.3s' }} />\n          </>\n        );\n      }\n    }\n  };\n\n  return (\n    <div className={cx(variant === 'orbit' ? styles.orbitWrapper : styles.container, className)}>\n      {renderDots()}\n    </div>\n  );\n};\n\nLoadingDots.displayName = 'LoadingDots';\n\nexport default LoadingDots;\n"],"mappings":";;;;;;AAOA,MAAMA,eAAqC,EAAE,OAAO,GAAG,OAAO,UAAU,QAAQ,gBAAgB;CAC9F,MAAM,EAAE,QAAQ,OAAO,UAAU;EAAE;EAAO;EAAM,CAAC;CAEjD,MAAM,mBAAmB;AACvB,UAAQ,SAAR;GACE,KAAK,QACH,QAAO,oBAAC;IAAI,WAAW,OAAO;IAAU,OAAO,EAAE,gBAAgB,MAAM;KAAI;GAG7E,KAAK,OACH,QACE;IACE,oBAAC;KAAI,WAAW,OAAO;KAAS,OAAO,EAAE,gBAAgB,MAAM;MAAI;IACnE,oBAAC;KAAI,WAAW,OAAO;KAAS,OAAO,EAAE,gBAAgB,SAAS;MAAI;IACtE,oBAAC;KAAI,WAAW,OAAO;KAAS,OAAO,EAAE,gBAAgB,SAAS;MAAI;OACrE;GAIP,KAAK,QACH,QACE,qBAAC;IAAI,WAAW,OAAO;;KACrB,oBAAC;MAAI,WAAW,OAAO;MAAU,OAAO,EAAE,gBAAgB,MAAM;OAAI;KACpE,oBAAC;MAAI,WAAW,OAAO;MAAU,OAAO,EAAE,gBAAgB,SAAS;OAAI;KACvE,oBAAC;MAAI,WAAW,OAAO;MAAU,OAAO,EAAE,gBAAgB,SAAS;OAAI;;KACnE;GAIV,KAAK,SACH,QACE;IACE,oBAAC;KAAI,WAAW,OAAO;KAAW,OAAO,EAAE,gBAAgB,MAAM;MAAI;IACrE,oBAAC;KAAI,WAAW,OAAO;KAAW,OAAO,EAAE,gBAAgB,SAAS;MAAI;IACxE,oBAAC;KAAI,WAAW,OAAO;KAAW,OAAO,EAAE,gBAAgB,QAAQ;MAAI;OACtE;GAIP,QACE,QACE;IACE,oBAAC;KAAI,WAAW,OAAO;KAAY,OAAO,EAAE,gBAAgB,MAAM;MAAI;IACtE,oBAAC;KAAI,WAAW,OAAO;KAAY,OAAO,EAAE,gBAAgB,SAAS;MAAI;IACzE,oBAAC;KAAI,WAAW,OAAO;KAAY,OAAO,EAAE,gBAAgB,QAAQ;MAAI;OACvE;;;AAMX,QACE,oBAAC;EAAI,WAAW,GAAG,YAAY,UAAU,OAAO,eAAe,OAAO,WAAW,UAAU;YACxF,YAAY;GACT;;AAIV,YAAY,cAAc;AAE1B,0BAAe"}
+{"version":3,"file":"LoadingDots.mjs","names":["LoadingDots: FC<LoadingDotsProps>","vars: Record<string, string>"],"sources":["../../../src/chat/LoadingDots/LoadingDots.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC, useMemo } from 'react';\n\nimport { styles } from './style';\nimport type { LoadingDotsProps } from './type';\n\nconst LoadingDots: FC<LoadingDotsProps> = ({\n  size = 8,\n  color,\n  variant = 'dots',\n  className,\n  style,\n}) => {\n  // Convert props to CSS variables\n  const cssVariables = useMemo<Record<string, string>>(() => {\n    const vars: Record<string, string> = {\n      '--loading-dots-size': `${size}px`,\n    };\n    if (color) {\n      vars['--loading-dots-color'] = color;\n    }\n    return vars;\n  }, [color, size]);\n\n  const renderDots = () => {\n    switch (variant) {\n      case 'pulse': {\n        return <div className={styles.pulseDot} style={{ animationDelay: '0s' }} />;\n      }\n\n      case 'wave': {\n        return (\n          <>\n            <div className={styles.waveDot} style={{ animationDelay: '0s' }} />\n            <div className={styles.waveDot} style={{ animationDelay: '0.12s' }} />\n            <div className={styles.waveDot} style={{ animationDelay: '0.24s' }} />\n          </>\n        );\n      }\n\n      case 'orbit': {\n        return (\n          <div className={styles.orbitContainer}>\n            <div className={styles.orbitDot} style={{ animationDelay: '0s' }} />\n            <div className={styles.orbitDot} style={{ animationDelay: '-0.4s' }} />\n            <div className={styles.orbitDot} style={{ animationDelay: '-0.8s' }} />\n          </div>\n        );\n      }\n\n      case 'typing': {\n        return (\n          <>\n            <div className={styles.typingDot} style={{ animationDelay: '0s' }} />\n            <div className={styles.typingDot} style={{ animationDelay: '0.15s' }} />\n            <div className={styles.typingDot} style={{ animationDelay: '0.3s' }} />\n          </>\n        );\n      }\n\n      default: {\n        return (\n          <>\n            <div className={styles.defaultDot} style={{ animationDelay: '0s' }} />\n            <div className={styles.defaultDot} style={{ animationDelay: '0.15s' }} />\n            <div className={styles.defaultDot} style={{ animationDelay: '0.3s' }} />\n          </>\n        );\n      }\n    }\n  };\n\n  return (\n    <div\n      className={cx(variant === 'orbit' ? styles.orbitWrapper : styles.container, className)}\n      style={{\n        ...cssVariables,\n        ...style,\n      }}\n    >\n      {renderDots()}\n    </div>\n  );\n};\n\nLoadingDots.displayName = 'LoadingDots';\n\nexport default LoadingDots;\n"],"mappings":";;;;;;;;AAQA,MAAMA,eAAqC,EACzC,OAAO,GACP,OACA,UAAU,QACV,WACA,YACI;CAEJ,MAAM,eAAe,cAAsC;EACzD,MAAMC,OAA+B,EACnC,uBAAuB,GAAG,KAAK,KAChC;AACD,MAAI,MACF,MAAK,0BAA0B;AAEjC,SAAO;IACN,CAAC,OAAO,KAAK,CAAC;CAEjB,MAAM,mBAAmB;AACvB,UAAQ,SAAR;GACE,KAAK,QACH,QAAO,oBAAC;IAAI,WAAW,OAAO;IAAU,OAAO,EAAE,gBAAgB,MAAM;KAAI;GAG7E,KAAK,OACH,QACE;IACE,oBAAC;KAAI,WAAW,OAAO;KAAS,OAAO,EAAE,gBAAgB,MAAM;MAAI;IACnE,oBAAC;KAAI,WAAW,OAAO;KAAS,OAAO,EAAE,gBAAgB,SAAS;MAAI;IACtE,oBAAC;KAAI,WAAW,OAAO;KAAS,OAAO,EAAE,gBAAgB,SAAS;MAAI;OACrE;GAIP,KAAK,QACH,QACE,qBAAC;IAAI,WAAW,OAAO;;KACrB,oBAAC;MAAI,WAAW,OAAO;MAAU,OAAO,EAAE,gBAAgB,MAAM;OAAI;KACpE,oBAAC;MAAI,WAAW,OAAO;MAAU,OAAO,EAAE,gBAAgB,SAAS;OAAI;KACvE,oBAAC;MAAI,WAAW,OAAO;MAAU,OAAO,EAAE,gBAAgB,SAAS;OAAI;;KACnE;GAIV,KAAK,SACH,QACE;IACE,oBAAC;KAAI,WAAW,OAAO;KAAW,OAAO,EAAE,gBAAgB,MAAM;MAAI;IACrE,oBAAC;KAAI,WAAW,OAAO;KAAW,OAAO,EAAE,gBAAgB,SAAS;MAAI;IACxE,oBAAC;KAAI,WAAW,OAAO;KAAW,OAAO,EAAE,gBAAgB,QAAQ;MAAI;OACtE;GAIP,QACE,QACE;IACE,oBAAC;KAAI,WAAW,OAAO;KAAY,OAAO,EAAE,gBAAgB,MAAM;MAAI;IACtE,oBAAC;KAAI,WAAW,OAAO;KAAY,OAAO,EAAE,gBAAgB,SAAS;MAAI;IACzE,oBAAC;KAAI,WAAW,OAAO;KAAY,OAAO,EAAE,gBAAgB,QAAQ;MAAI;OACvE;;;AAMX,QACE,oBAAC;EACC,WAAW,GAAG,YAAY,UAAU,OAAO,eAAe,OAAO,WAAW,UAAU;EACtF,OAAO;GACL,GAAG;GACH,GAAG;GACJ;YAEA,YAAY;GACT;;AAIV,YAAY,cAAc;AAE1B,0BAAe"}

package/es/chat/LoadingDots/style.mjs

@@ -1,157 +1,158 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/chat/LoadingDots/style.ts
-const useStyles = createStyles(({ token, css: css$1 }, { size, color }) => {
-	const dotColor = color || token.colorPrimary;
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
+	const size = "var(--loading-dots-size, 8px)";
+	const dotColor = "var(--loading-dots-color, var(--ant-color-primary))";
 	return {
 		container: css$1`
-        display: flex;
-        flex-direction: row;
-        gap: 6px;
-        align-items: center;
-        justify-content: center;
-
-        padding: ${token.paddingXS}px;
-      `,
+      display: flex;
+      flex-direction: row;
+      gap: 6px;
+      align-items: center;
+      justify-content: center;
+
+      padding: ${cssVar$1.paddingXS};
+    `,
 		defaultDot: css$1`
-        width: ${size}px;
-        height: ${size}px;
-        border-radius: 50%;
+      width: ${size};
+      height: ${size};
+      border-radius: 50%;
 
-        background-color: ${dotColor};
+      background-color: ${dotColor};
 
-        animation: fade-animation 1.2s ease-in-out infinite;
+      animation: fade-animation 1.2s ease-in-out infinite;
 
-        @keyframes fade-animation {
-          0%,
-          100% {
-            opacity: 0.3;
-          }
+      @keyframes fade-animation {
+        0%,
+        100% {
+          opacity: 0.3;
+        }
 
-          50% {
-            opacity: 1;
-          }
+        50% {
+          opacity: 1;
         }
-      `,
+      }
+    `,
 		orbitContainer: css$1`
-        position: relative;
-        width: ${size * 4}px;
-        height: ${size * 4}px;
-      `,
+      position: relative;
+      width: calc(${size} * 4);
+      height: calc(${size} * 4);
+    `,
 		orbitDot: css$1`
-        position: absolute;
-        inset-block-start: 50%;
-        inset-inline-start: 50%;
-        transform-origin: ${size * 2}px 0;
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      transform-origin: calc(${size} * 2) 0;
 
-        width: ${size}px;
-        height: ${size}px;
-        margin-block-start: -${size / 2}px;
-        margin-inline-start: -${size / 2}px;
-        border-radius: 50%;
+      width: ${size};
+      height: ${size};
+      margin-block-start: calc(${size} / -2);
+      margin-inline-start: calc(${size} / -2);
+      border-radius: 50%;
 
-        background-color: ${dotColor};
+      background-color: ${dotColor};
 
-        animation: orbit-animation 1.2s linear infinite;
+      animation: orbit-animation 1.2s linear infinite;
 
-        @keyframes orbit-animation {
-          0% {
-            transform: rotate(0deg) translateX(${size * 2}px);
-          }
+      @keyframes orbit-animation {
+        0% {
+          transform: rotate(0deg) translateX(calc(${size} * 2));
+        }
 
-          100% {
-            transform: rotate(360deg) translateX(${size * 2}px);
-          }
+        100% {
+          transform: rotate(360deg) translateX(calc(${size} * 2));
         }
-      `,
+      }
+    `,
 		orbitWrapper: css$1`
-        position: relative;
+      position: relative;
 
-        display: flex;
-        align-items: center;
-        justify-content: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-        width: ${size * 5}px;
-        height: ${size * 5}px;
-        padding: ${token.paddingXS}px;
-      `,
+      width: calc(${size} * 5);
+      height: calc(${size} * 5);
+      padding: ${cssVar$1.paddingXS};
+    `,
 		pulseDot: css$1`
-        width: ${size}px;
-        height: ${size}px;
-        border-radius: 50%;
+      width: ${size};
+      height: ${size};
+      border-radius: 50%;
 
-        background-color: ${dotColor};
+      background-color: ${dotColor};
 
-        animation: pulse-animation 1.2s ease-in-out infinite;
+      animation: pulse-animation 1.2s ease-in-out infinite;
 
-        @keyframes pulse-animation {
-          0%,
-          100% {
-            transform: scale(0.8);
-            opacity: 0.3;
-          }
+      @keyframes pulse-animation {
+        0%,
+        100% {
+          transform: scale(0.8);
+          opacity: 0.3;
+        }
 
-          50% {
-            transform: scale(1.3);
-            opacity: 1;
-          }
+        50% {
+          transform: scale(1.3);
+          opacity: 1;
         }
-      `,
+      }
+    `,
 		typingDot: css$1`
-        width: ${size}px;
-        height: ${size}px;
-        border-radius: 50%;
-
-        background-color: ${dotColor};
-
-        animation: typing-animation 1.2s ease-in-out infinite;
-
-        @keyframes typing-animation {
-          0%,
-          100% {
-            transform: scale(0.6);
-            opacity: 0.2;
-          }
-
-          25% {
-            transform: scale(1);
-            opacity: 1;
-          }
-
-          50%,
-          75% {
-            transform: scale(0.6);
-            opacity: 0.2;
-          }
+      width: ${size};
+      height: ${size};
+      border-radius: 50%;
+
+      background-color: ${dotColor};
+
+      animation: typing-animation 1.2s ease-in-out infinite;
+
+      @keyframes typing-animation {
+        0%,
+        100% {
+          transform: scale(0.6);
+          opacity: 0.2;
         }
-      `,
+
+        25% {
+          transform: scale(1);
+          opacity: 1;
+        }
+
+        50%,
+        75% {
+          transform: scale(0.6);
+          opacity: 0.2;
+        }
+      }
+    `,
 		waveDot: css$1`
-        width: ${size}px;
-        height: ${size}px;
-        border-radius: 50%;
+      width: ${size};
+      height: ${size};
+      border-radius: 50%;
 
-        background-color: ${dotColor};
+      background-color: ${dotColor};
 
-        animation: wave-animation 1.24s ease-in-out infinite;
+      animation: wave-animation 1.24s ease-in-out infinite;
 
-        @keyframes wave-animation {
-          0%,
-          100% {
-            transform: translateY(0);
-          }
+      @keyframes wave-animation {
+        0%,
+        100% {
+          transform: translateY(0);
+        }
 
-          25% {
-            transform: translateY(-${size * 1.5}px);
-          }
+        25% {
+          transform: translateY(calc(${size} * -1.5));
+        }
 
-          50% {
-            transform: translateY(0);
-          }
+        50% {
+          transform: translateY(0);
         }
-      `
+      }
+    `
 	};
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/chat/LoadingDots/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/chat/LoadingDots/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(\n  ({ token, css }, { size, color }: { color?: string; size: number }) => {\n    const dotColor = color || token.colorPrimary;\n\n    return {\n      container: css`\n        display: flex;\n        flex-direction: row;\n        gap: 6px;\n        align-items: center;\n        justify-content: center;\n\n        padding: ${token.paddingXS}px;\n      `,\n\n      // Default variant (fade)\n      defaultDot: css`\n        width: ${size}px;\n        height: ${size}px;\n        border-radius: 50%;\n\n        background-color: ${dotColor};\n\n        animation: fade-animation 1.2s ease-in-out infinite;\n\n        @keyframes fade-animation {\n          0%,\n          100% {\n            opacity: 0.3;\n          }\n\n          50% {\n            opacity: 1;\n          }\n        }\n      `,\n\n      orbitContainer: css`\n        position: relative;\n        width: ${size * 4}px;\n        height: ${size * 4}px;\n      `,\n\n      orbitDot: css`\n        position: absolute;\n        inset-block-start: 50%;\n        inset-inline-start: 50%;\n        transform-origin: ${size * 2}px 0;\n\n        width: ${size}px;\n        height: ${size}px;\n        margin-block-start: -${size / 2}px;\n        margin-inline-start: -${size / 2}px;\n        border-radius: 50%;\n\n        background-color: ${dotColor};\n\n        animation: orbit-animation 1.2s linear infinite;\n\n        @keyframes orbit-animation {\n          0% {\n            transform: rotate(0deg) translateX(${size * 2}px);\n          }\n\n          100% {\n            transform: rotate(360deg) translateX(${size * 2}px);\n          }\n        }\n      `,\n\n      // Orbit variant\n      orbitWrapper: css`\n        position: relative;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: ${size * 5}px;\n        height: ${size * 5}px;\n        padding: ${token.paddingXS}px;\n      `,\n\n      // Pulse variant\n      pulseDot: css`\n        width: ${size}px;\n        height: ${size}px;\n        border-radius: 50%;\n\n        background-color: ${dotColor};\n\n        animation: pulse-animation 1.2s ease-in-out infinite;\n\n        @keyframes pulse-animation {\n          0%,\n          100% {\n            transform: scale(0.8);\n            opacity: 0.3;\n          }\n\n          50% {\n            transform: scale(1.3);\n            opacity: 1;\n          }\n        }\n      `,\n\n      // Typing variant\n      typingDot: css`\n        width: ${size}px;\n        height: ${size}px;\n        border-radius: 50%;\n\n        background-color: ${dotColor};\n\n        animation: typing-animation 1.2s ease-in-out infinite;\n\n        @keyframes typing-animation {\n          0%,\n          100% {\n            transform: scale(0.6);\n            opacity: 0.2;\n          }\n\n          25% {\n            transform: scale(1);\n            opacity: 1;\n          }\n\n          50%,\n          75% {\n            transform: scale(0.6);\n            opacity: 0.2;\n          }\n        }\n      `,\n\n      // Wave variant\n      waveDot: css`\n        width: ${size}px;\n        height: ${size}px;\n        border-radius: 50%;\n\n        background-color: ${dotColor};\n\n        animation: wave-animation 1.24s ease-in-out infinite;\n\n        @keyframes wave-animation {\n          0%,\n          100% {\n            transform: translateY(0);\n          }\n\n          25% {\n            transform: translateY(-${size * 1.5}px);\n          }\n\n          50% {\n            transform: translateY(0);\n          }\n        }\n      `,\n    };\n  },\n);\n"],"mappings":";;;AAEA,MAAa,YAAY,cACtB,EAAE,OAAO,cAAO,EAAE,MAAM,YAA8C;CACrE,MAAM,WAAW,SAAS,MAAM;AAEhC,QAAO;EACL,WAAW,KAAG;;;;;;;mBAOD,MAAM,UAAU;;EAI7B,YAAY,KAAG;iBACJ,KAAK;kBACJ,KAAK;;;4BAGK,SAAS;;;;;;;;;;;;;;;EAgB/B,gBAAgB,KAAG;;iBAER,OAAO,EAAE;kBACR,OAAO,EAAE;;EAGrB,UAAU,KAAG;;;;4BAIS,OAAO,EAAE;;iBAEpB,KAAK;kBACJ,KAAK;+BACQ,OAAO,EAAE;gCACR,OAAO,EAAE;;;4BAGb,SAAS;;;;;;iDAMY,OAAO,EAAE;;;;mDAIP,OAAO,EAAE;;;;EAMtD,cAAc,KAAG;;;;;;;iBAON,OAAO,EAAE;kBACR,OAAO,EAAE;mBACR,MAAM,UAAU;;EAI7B,UAAU,KAAG;iBACF,KAAK;kBACJ,KAAK;;;4BAGK,SAAS;;;;;;;;;;;;;;;;;EAmB/B,WAAW,KAAG;iBACH,KAAK;kBACJ,KAAK;;;4BAGK,SAAS;;;;;;;;;;;;;;;;;;;;;;;EAyB/B,SAAS,KAAG;iBACD,KAAK;kBACJ,KAAK;;;4BAGK,SAAS;;;;;;;;;;;qCAWA,OAAO,IAAI;;;;;;;;EAQ3C;EAEJ"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/chat/LoadingDots/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  const size = 'var(--loading-dots-size, 8px)';\n  const dotColor = 'var(--loading-dots-color, var(--ant-color-primary))';\n\n  return {\n    container: css`\n      display: flex;\n      flex-direction: row;\n      gap: 6px;\n      align-items: center;\n      justify-content: center;\n\n      padding: ${cssVar.paddingXS};\n    `,\n\n    // Default variant (fade)\n    defaultDot: css`\n      width: ${size};\n      height: ${size};\n      border-radius: 50%;\n\n      background-color: ${dotColor};\n\n      animation: fade-animation 1.2s ease-in-out infinite;\n\n      @keyframes fade-animation {\n        0%,\n        100% {\n          opacity: 0.3;\n        }\n\n        50% {\n          opacity: 1;\n        }\n      }\n    `,\n\n    orbitContainer: css`\n      position: relative;\n      width: calc(${size} * 4);\n      height: calc(${size} * 4);\n    `,\n\n    orbitDot: css`\n      position: absolute;\n      inset-block-start: 50%;\n      inset-inline-start: 50%;\n      transform-origin: calc(${size} * 2) 0;\n\n      width: ${size};\n      height: ${size};\n      margin-block-start: calc(${size} / -2);\n      margin-inline-start: calc(${size} / -2);\n      border-radius: 50%;\n\n      background-color: ${dotColor};\n\n      animation: orbit-animation 1.2s linear infinite;\n\n      @keyframes orbit-animation {\n        0% {\n          transform: rotate(0deg) translateX(calc(${size} * 2));\n        }\n\n        100% {\n          transform: rotate(360deg) translateX(calc(${size} * 2));\n        }\n      }\n    `,\n\n    // Orbit variant\n    orbitWrapper: css`\n      position: relative;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: calc(${size} * 5);\n      height: calc(${size} * 5);\n      padding: ${cssVar.paddingXS};\n    `,\n\n    // Pulse variant\n    pulseDot: css`\n      width: ${size};\n      height: ${size};\n      border-radius: 50%;\n\n      background-color: ${dotColor};\n\n      animation: pulse-animation 1.2s ease-in-out infinite;\n\n      @keyframes pulse-animation {\n        0%,\n        100% {\n          transform: scale(0.8);\n          opacity: 0.3;\n        }\n\n        50% {\n          transform: scale(1.3);\n          opacity: 1;\n        }\n      }\n    `,\n\n    // Typing variant\n    typingDot: css`\n      width: ${size};\n      height: ${size};\n      border-radius: 50%;\n\n      background-color: ${dotColor};\n\n      animation: typing-animation 1.2s ease-in-out infinite;\n\n      @keyframes typing-animation {\n        0%,\n        100% {\n          transform: scale(0.6);\n          opacity: 0.2;\n        }\n\n        25% {\n          transform: scale(1);\n          opacity: 1;\n        }\n\n        50%,\n        75% {\n          transform: scale(0.6);\n          opacity: 0.2;\n        }\n      }\n    `,\n\n    // Wave variant\n    waveDot: css`\n      width: ${size};\n      height: ${size};\n      border-radius: 50%;\n\n      background-color: ${dotColor};\n\n      animation: wave-animation 1.24s ease-in-out infinite;\n\n      @keyframes wave-animation {\n        0%,\n        100% {\n          transform: translateY(0);\n        }\n\n        25% {\n          transform: translateY(calc(${size} * -1.5));\n        }\n\n        50% {\n          transform: translateY(0);\n        }\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;CAC5D,MAAM,OAAO;CACb,MAAM,WAAW;AAEjB,QAAO;EACL,WAAW,KAAG;;;;;;;iBAODA,SAAO,UAAU;;EAI9B,YAAY,KAAG;eACJ,KAAK;gBACJ,KAAK;;;0BAGK,SAAS;;;;;;;;;;;;;;;EAgB/B,gBAAgB,KAAG;;oBAEH,KAAK;qBACJ,KAAK;;EAGtB,UAAU,KAAG;;;;+BAIc,KAAK;;eAErB,KAAK;gBACJ,KAAK;iCACY,KAAK;kCACJ,KAAK;;;0BAGb,SAAS;;;;;;oDAMiB,KAAK;;;;sDAIH,KAAK;;;;EAMvD,cAAc,KAAG;;;;;;;oBAOD,KAAK;qBACJ,KAAK;iBACTA,SAAO,UAAU;;EAI9B,UAAU,KAAG;eACF,KAAK;gBACJ,KAAK;;;0BAGK,SAAS;;;;;;;;;;;;;;;;;EAmB/B,WAAW,KAAG;eACH,KAAK;gBACJ,KAAK;;;0BAGK,SAAS;;;;;;;;;;;;;;;;;;;;;;;EAyB/B,SAAS,KAAG;eACD,KAAK;gBACJ,KAAK;;;0BAGK,SAAS;;;;;;;;;;;uCAWI,KAAK;;;;;;;;EAQzC;EACD"}

package/es/chat/LoadingDots/type.d.mts

@@ -1,3 +1,5 @@
+import { CSSProperties } from "react";
+
 //#region src/chat/LoadingDots/type.d.ts
 type LoadingDotsVariant = 'dots' | 'pulse' | 'wave' | 'orbit' | 'typing';
 interface LoadingDotsProps {
@@ -15,6 +17,10 @@ interface LoadingDotsProps {
    * @default 8
    */
   size?: number;
+  /**
+   * 自定义样式
+   */
+  style?: CSSProperties;
   /**
    * 动画变体
    * @default 'dots'

package/es/chat/MessageInput/MessageInput.d.mts

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

package/es/chat/MessageInput/MessageInput.mjs

@@ -7,17 +7,16 @@ import Tooltip_default from "../../Tooltip/Tooltip.mjs";
 import Button_default from "../../Button/Button.mjs";
 import CodeEditor_default from "../../CodeEditor/CodeEditor.mjs";
 import TextArea_default from "../../Input/TextArea.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useResponsive } from "antd-style";
+import { cx, useResponsive } from "antd-style";
 import { useHotkeys } from "react-hotkeys-hook";
 
 //#region src/chat/MessageInput/MessageInput.tsx
 const MessageInput = memo(({ text, variant = "borderless", onCancel, defaultValue, onConfirm, renderButtons, placeholder, styles: customStyles, style, editButtonSize = "middle", classNames, shortcut, language = "markdown", ...rest }) => {
 	const { mobile } = useResponsive();
 	const [temporaryValue, setValue] = useState(defaultValue || "");
-	const { cx: cx$1, styles } = useStyles();
 	const confirmHotkey = combineKeys([KeyMapEnum.Mod, KeyMapEnum.Enter]);
 	const confirmText = text?.confirm || "Confirm";
 	const cancelHotkey = combineKeys([KeyMapEnum.Esc]);
@@ -51,7 +50,7 @@ const MessageInput = memo(({ text, variant = "borderless", onCancel, defaultValu
 		...rest,
 		children: [mobile ? /* @__PURE__ */ jsx(TextArea_default, {
 			autoSize: true,
-			className: cx$1(styles, classNames?.editor),
+			className: cx(styles, classNames?.editor),
 			onBlur: (e) => setValue(e.target.value),
 			onChange: (e) => setValue(e.target.value),
 			placeholder,
@@ -59,7 +58,7 @@ const MessageInput = memo(({ text, variant = "borderless", onCancel, defaultValu
 			value: temporaryValue,
 			variant
 		}) : /* @__PURE__ */ jsx(CodeEditor_default, {
-			className: cx$1(styles, classNames?.editor),
+			className: cx(styles, classNames?.editor),
 			classNames,
 			language,
 			onBlur: (e) => setValue(e.target.value),

package/es/chat/MessageInput/MessageInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageInput.mjs","names":["Button","Flexbox","TextArea","cx","CodeEditor","Tooltip"],"sources":["../../../src/chat/MessageInput/MessageInput.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\n\nimport Button from '@/Button';\nimport CodeEditor from '@/CodeEditor';\nimport { Flexbox } from '@/Flex';\nimport { KeyMapEnum } from '@/Hotkey/const';\nimport { combineKeys } from '@/Hotkey/utils';\nimport TextArea from '@/Input/TextArea';\nimport Tooltip from '@/Tooltip';\n\nimport { useStyles } from './style';\nimport type { MessageInputProps } from './type';\n\nconst MessageInput = memo<MessageInputProps>(\n  ({\n    text,\n    variant = 'borderless',\n    onCancel,\n    defaultValue,\n    onConfirm,\n    renderButtons,\n    placeholder,\n    styles: customStyles,\n    style,\n    editButtonSize = 'middle',\n    classNames,\n    shortcut,\n    language = 'markdown',\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const [temporaryValue, setValue] = useState<string>(defaultValue || '');\n    const { cx, styles } = useStyles();\n    const confirmHotkey = combineKeys([KeyMapEnum.Mod, KeyMapEnum.Enter]);\n    const confirmText = text?.confirm || 'Confirm';\n    const cancelHotkey = combineKeys([KeyMapEnum.Esc]);\n    const cancelText = text?.cancel || 'Cancel';\n\n    const handleConfirm = () => onConfirm?.(temporaryValue);\n    const handleCancel = () => onCancel?.();\n\n    useHotkeys(confirmHotkey, handleConfirm, {\n      enableOnFormTags: true,\n      enabled: shortcut,\n      preventDefault: true,\n    });\n\n    const confirmButton = (\n      <Button onClick={handleConfirm} size={editButtonSize} type=\"primary\">\n        {confirmText}\n      </Button>\n    );\n\n    const cancllButton = (\n      <Button onClick={handleCancel} size={editButtonSize} variant={'filled'}>\n        {text?.cancel || 'Cancel'}\n      </Button>\n    );\n\n    return (\n      <Flexbox gap={16} style={{ flex: 1, width: '100%', ...style }} {...rest}>\n        {mobile ? (\n          <TextArea\n            autoSize\n            className={cx(styles, classNames?.editor)}\n            onBlur={(e) => setValue(e.target.value)}\n            onChange={(e) => setValue(e.target.value)}\n            placeholder={placeholder}\n            style={customStyles?.editor}\n            value={temporaryValue}\n            variant={variant}\n          />\n        ) : (\n          <CodeEditor\n            className={cx(styles, classNames?.editor)}\n            classNames={classNames}\n            language={language}\n            onBlur={(e) => setValue(e.target.value)}\n            onValueChange={(e) => setValue(e)}\n            placeholder={placeholder}\n            style={customStyles?.editor}\n            styles={customStyles}\n            value={temporaryValue}\n            variant={variant}\n          />\n        )}\n        <Flexbox direction={'horizontal-reverse'} gap={8}>\n          {renderButtons ? (\n            renderButtons(temporaryValue).map((buttonProps, index) => (\n              <Button key={index} size={editButtonSize} {...buttonProps} />\n            ))\n          ) : (\n            <>\n              {shortcut ? (\n                <Tooltip hotkey={confirmHotkey} title={confirmText}>\n                  {confirmButton}\n                </Tooltip>\n              ) : (\n                confirmButton\n              )}\n              {shortcut ? (\n                <Tooltip hotkey={cancelHotkey} title={cancelText}>\n                  {cancllButton}\n                </Tooltip>\n              ) : (\n                cancllButton\n              )}\n            </>\n          )}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default MessageInput;\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,eAAe,MAClB,EACC,MACA,UAAU,cACV,UACA,cACA,WACA,eACA,aACA,QAAQ,cACR,OACA,iBAAiB,UACjB,YACA,UACA,WAAW,YACX,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,CAAC,gBAAgB,YAAY,SAAiB,gBAAgB,GAAG;CACvE,MAAM,EAAE,UAAI,WAAW,WAAW;CAClC,MAAM,gBAAgB,YAAY,CAAC,WAAW,KAAK,WAAW,MAAM,CAAC;CACrE,MAAM,cAAc,MAAM,WAAW;CACrC,MAAM,eAAe,YAAY,CAAC,WAAW,IAAI,CAAC;CAClD,MAAM,aAAa,MAAM,UAAU;CAEnC,MAAM,sBAAsB,YAAY,eAAe;CACvD,MAAM,qBAAqB,YAAY;AAEvC,YAAW,eAAe,eAAe;EACvC,kBAAkB;EAClB,SAAS;EACT,gBAAgB;EACjB,CAAC;CAEF,MAAM,gBACJ,oBAACA;EAAO,SAAS;EAAe,MAAM;EAAgB,MAAK;YACxD;GACM;CAGX,MAAM,eACJ,oBAACA;EAAO,SAAS;EAAc,MAAM;EAAgB,SAAS;YAC3D,MAAM,UAAU;GACV;AAGX,QACE,qBAACC;EAAQ,KAAK;EAAI,OAAO;GAAE,MAAM;GAAG,OAAO;GAAQ,GAAG;GAAO;EAAE,GAAI;aAChE,SACC,oBAACC;GACC;GACA,WAAWC,KAAG,QAAQ,YAAY,OAAO;GACzC,SAAS,MAAM,SAAS,EAAE,OAAO,MAAM;GACvC,WAAW,MAAM,SAAS,EAAE,OAAO,MAAM;GAC5B;GACb,OAAO,cAAc;GACrB,OAAO;GACE;IACT,GAEF,oBAACC;GACC,WAAWD,KAAG,QAAQ,YAAY,OAAO;GAC7B;GACF;GACV,SAAS,MAAM,SAAS,EAAE,OAAO,MAAM;GACvC,gBAAgB,MAAM,SAAS,EAAE;GACpB;GACb,OAAO,cAAc;GACrB,QAAQ;GACR,OAAO;GACE;IACT,EAEJ,oBAACF;GAAQ,WAAW;GAAsB,KAAK;aAC5C,gBACC,cAAc,eAAe,CAAC,KAAK,aAAa,UAC9C,oBAACD;IAAmB,MAAM;IAAgB,GAAI;MAAjC,MAAgD,CAC7D,GAEF,8CACG,WACC,oBAACK;IAAQ,QAAQ;IAAe,OAAO;cACpC;KACO,GAEV,eAED,WACC,oBAACA;IAAQ,QAAQ;IAAc,OAAO;cACnC;KACO,GAEV,gBAED;IAEG;GACF;EAGf;AAED,2BAAe"}
+{"version":3,"file":"MessageInput.mjs","names":["Button","Flexbox","TextArea","CodeEditor","Tooltip"],"sources":["../../../src/chat/MessageInput/MessageInput.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { memo, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\n\nimport Button from '@/Button';\nimport CodeEditor from '@/CodeEditor';\nimport { Flexbox } from '@/Flex';\nimport { KeyMapEnum } from '@/Hotkey/const';\nimport { combineKeys } from '@/Hotkey/utils';\nimport TextArea from '@/Input/TextArea';\nimport Tooltip from '@/Tooltip';\n\nimport { styles } from './style';\nimport type { MessageInputProps } from './type';\n\nconst MessageInput = memo<MessageInputProps>(\n  ({\n    text,\n    variant = 'borderless',\n    onCancel,\n    defaultValue,\n    onConfirm,\n    renderButtons,\n    placeholder,\n    styles: customStyles,\n    style,\n    editButtonSize = 'middle',\n    classNames,\n    shortcut,\n    language = 'markdown',\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const [temporaryValue, setValue] = useState<string>(defaultValue || '');\n    const confirmHotkey = combineKeys([KeyMapEnum.Mod, KeyMapEnum.Enter]);\n    const confirmText = text?.confirm || 'Confirm';\n    const cancelHotkey = combineKeys([KeyMapEnum.Esc]);\n    const cancelText = text?.cancel || 'Cancel';\n\n    const handleConfirm = () => onConfirm?.(temporaryValue);\n    const handleCancel = () => onCancel?.();\n\n    useHotkeys(confirmHotkey, handleConfirm, {\n      enableOnFormTags: true,\n      enabled: shortcut,\n      preventDefault: true,\n    });\n\n    const confirmButton = (\n      <Button onClick={handleConfirm} size={editButtonSize} type=\"primary\">\n        {confirmText}\n      </Button>\n    );\n\n    const cancllButton = (\n      <Button onClick={handleCancel} size={editButtonSize} variant={'filled'}>\n        {text?.cancel || 'Cancel'}\n      </Button>\n    );\n\n    return (\n      <Flexbox gap={16} style={{ flex: 1, width: '100%', ...style }} {...rest}>\n        {mobile ? (\n          <TextArea\n            autoSize\n            className={cx(styles, classNames?.editor)}\n            onBlur={(e) => setValue(e.target.value)}\n            onChange={(e) => setValue(e.target.value)}\n            placeholder={placeholder}\n            style={customStyles?.editor}\n            value={temporaryValue}\n            variant={variant}\n          />\n        ) : (\n          <CodeEditor\n            className={cx(styles, classNames?.editor)}\n            classNames={classNames}\n            language={language}\n            onBlur={(e) => setValue(e.target.value)}\n            onValueChange={(e) => setValue(e)}\n            placeholder={placeholder}\n            style={customStyles?.editor}\n            styles={customStyles}\n            value={temporaryValue}\n            variant={variant}\n          />\n        )}\n        <Flexbox direction={'horizontal-reverse'} gap={8}>\n          {renderButtons ? (\n            renderButtons(temporaryValue).map((buttonProps, index) => (\n              <Button key={index} size={editButtonSize} {...buttonProps} />\n            ))\n          ) : (\n            <>\n              {shortcut ? (\n                <Tooltip hotkey={confirmHotkey} title={confirmText}>\n                  {confirmButton}\n                </Tooltip>\n              ) : (\n                confirmButton\n              )}\n              {shortcut ? (\n                <Tooltip hotkey={cancelHotkey} title={cancelText}>\n                  {cancllButton}\n                </Tooltip>\n              ) : (\n                cancllButton\n              )}\n            </>\n          )}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default MessageInput;\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,eAAe,MAClB,EACC,MACA,UAAU,cACV,UACA,cACA,WACA,eACA,aACA,QAAQ,cACR,OACA,iBAAiB,UACjB,YACA,UACA,WAAW,YACX,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,CAAC,gBAAgB,YAAY,SAAiB,gBAAgB,GAAG;CACvE,MAAM,gBAAgB,YAAY,CAAC,WAAW,KAAK,WAAW,MAAM,CAAC;CACrE,MAAM,cAAc,MAAM,WAAW;CACrC,MAAM,eAAe,YAAY,CAAC,WAAW,IAAI,CAAC;CAClD,MAAM,aAAa,MAAM,UAAU;CAEnC,MAAM,sBAAsB,YAAY,eAAe;CACvD,MAAM,qBAAqB,YAAY;AAEvC,YAAW,eAAe,eAAe;EACvC,kBAAkB;EAClB,SAAS;EACT,gBAAgB;EACjB,CAAC;CAEF,MAAM,gBACJ,oBAACA;EAAO,SAAS;EAAe,MAAM;EAAgB,MAAK;YACxD;GACM;CAGX,MAAM,eACJ,oBAACA;EAAO,SAAS;EAAc,MAAM;EAAgB,SAAS;YAC3D,MAAM,UAAU;GACV;AAGX,QACE,qBAACC;EAAQ,KAAK;EAAI,OAAO;GAAE,MAAM;GAAG,OAAO;GAAQ,GAAG;GAAO;EAAE,GAAI;aAChE,SACC,oBAACC;GACC;GACA,WAAW,GAAG,QAAQ,YAAY,OAAO;GACzC,SAAS,MAAM,SAAS,EAAE,OAAO,MAAM;GACvC,WAAW,MAAM,SAAS,EAAE,OAAO,MAAM;GAC5B;GACb,OAAO,cAAc;GACrB,OAAO;GACE;IACT,GAEF,oBAACC;GACC,WAAW,GAAG,QAAQ,YAAY,OAAO;GAC7B;GACF;GACV,SAAS,MAAM,SAAS,EAAE,OAAO,MAAM;GACvC,gBAAgB,MAAM,SAAS,EAAE;GACpB;GACb,OAAO,cAAc;GACrB,QAAQ;GACR,OAAO;GACE;IACT,EAEJ,oBAACF;GAAQ,WAAW;GAAsB,KAAK;aAC5C,gBACC,cAAc,eAAe,CAAC,KAAK,aAAa,UAC9C,oBAACD;IAAmB,MAAM;IAAgB,GAAI;MAAjC,MAAgD,CAC7D,GAEF,8CACG,WACC,oBAACI;IAAQ,QAAQ;IAAe,OAAO;cACpC;KACO,GAEV,eAED,WACC,oBAACA;IAAQ,QAAQ;IAAc,OAAO;cACnC;KACO,GAEV,gBAED;IAEG;GACF;EAGf;AAED,2BAAe"}

package/es/chat/MessageInput/style.mjs

@@ -1,16 +1,16 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/chat/MessageInput/style.ts
-const useStyles = createStyles(({ css: css$1, token }) => css$1`
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => css$1`
     position: relative;
 
     height: 100%;
 
-    font-family: ${token.fontFamilyCode};
+    font-family: ${cssVar$1.fontFamilyCode};
     font-size: 13px;
     line-height: 1.8;
   `);
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/chat/MessageInput/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/chat/MessageInput/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(\n  ({ css, token }) => css`\n    position: relative;\n\n    height: 100%;\n\n    font-family: ${token.fontFamilyCode};\n    font-size: 13px;\n    line-height: 1.8;\n  `,\n);\n"],"mappings":";;;AAEA,MAAa,YAAY,cACtB,EAAE,YAAK,YAAY,KAAG;;;;;mBAKN,MAAM,eAAe;;;IAIvC"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/chat/MessageInput/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(\n  ({ css, cssVar }) => css`\n    position: relative;\n\n    height: 100%;\n\n    font-family: ${cssVar.fontFamilyCode};\n    font-size: 13px;\n    line-height: 1.8;\n  `,\n);\n"],"mappings":";;;AAEA,MAAa,SAAS,oBACnB,EAAE,YAAK,uBAAa,KAAG;;;;;mBAKPA,SAAO,eAAe;;;IAIxC"}

package/es/chat/MessageModal/MessageModal.d.mts

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

package/es/chat/MessageModal/MessageModal.mjs

@@ -7,17 +7,16 @@ import TextArea_default from "../../Input/TextArea.mjs";
 import { useTranslation } from "../../i18n/useTranslation.mjs";
 import Modal_default from "../../Modal/Modal.mjs";
 import Markdown_default from "../../Markdown/Markdown.mjs";
-import { useStyles } from "../MessageInput/style.mjs";
+import { styles } from "../MessageInput/style.mjs";
 import messageModal_default from "../../i18n/resources/en/messageModal.mjs";
 import { memo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import useMergeState from "use-merge-value";
 import { useResponsive } from "antd-style";
+import useMergeState from "use-merge-value";
 
 //#region src/chat/MessageModal/MessageModal.tsx
 const MessageModal = memo(({ panelRef, editing, open, height = "75vh", onOpenChange, onEditingChange, placeholder, value, language = "markdown", onChange, text, footer, extra }) => {
 	const { mobile } = useResponsive();
-	const { styles: textStyles } = useStyles();
 	const { t } = useTranslation(messageModal_default);
 	const [isEdit, setTyping] = useMergeState(false, {
 		onChange: onEditingChange,
@@ -67,7 +66,7 @@ const MessageModal = memo(({ panelRef, editing, open, height = "75vh", onOpenCha
 		title: text?.title,
 		children: isEdit ? mobile ? /* @__PURE__ */ jsx(TextArea_default, {
 			autoSize: true,
-			className: textStyles,
+			className: styles,
 			defaultValue: temporaryValue,
 			onBlur: (e) => setMessage(e.target.value),
 			onChange: (value$1) => setMessage(value$1.target.value),
@@ -75,7 +74,7 @@ const MessageModal = memo(({ panelRef, editing, open, height = "75vh", onOpenCha
 			value: temporaryValue,
 			variant: "borderless"
 		}) : /* @__PURE__ */ jsx(CodeEditor_default, {
-			className: textStyles,
+			className: styles,
 			defaultValue: temporaryValue,
 			language,
 			onBlur: (e) => setMessage(e.target.value),

package/es/chat/MessageModal/MessageModal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageModal.mjs","names":["useTextStyles","messageModalMessages","useControlledState","Modal","Flexbox","Button","TextArea","value","CodeEditor","Markdown"],"sources":["../../../src/chat/MessageModal/MessageModal.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport Button from '@/Button';\nimport CodeEditor from '@/CodeEditor';\nimport { Flexbox } from '@/Flex';\nimport TextArea from '@/Input/TextArea';\nimport Markdown from '@/Markdown';\nimport Modal from '@/Modal';\nimport { useStyles as useTextStyles } from '@/chat/MessageInput/style';\nimport messageModalMessages from '@/i18n/resources/en/messageModal';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport type { MessageModalProps } from './type';\n\nconst MessageModal = memo<MessageModalProps>(\n  ({\n    panelRef,\n    editing,\n    open,\n    height = '75vh',\n    onOpenChange,\n    onEditingChange,\n    placeholder,\n    value,\n    language = 'markdown',\n    onChange,\n    text,\n    footer,\n    extra,\n  }) => {\n    const { mobile } = useResponsive();\n    const { styles: textStyles } = useTextStyles();\n    const { t } = useTranslation(messageModalMessages);\n    const [isEdit, setTyping] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    const [showModal, setShowModal] = useControlledState(false, {\n      onChange: onOpenChange,\n      value: open,\n    });\n\n    const [temporaryValue, setMessage] = useState(value);\n\n    const confirmText = text?.confirm ?? t('messageModal.confirm');\n    const cancelText = text?.cancel ?? t('messageModal.cancel');\n    const editText = text?.edit ?? t('messageModal.edit');\n\n    const modalFooter = isEdit ? (\n      <Flexbox direction={'horizontal-reverse'} gap={8}>\n        <Button\n          onClick={() => {\n            setTyping(false);\n            onChange?.(temporaryValue);\n            setMessage(value);\n          }}\n          type=\"primary\"\n        >\n          {confirmText}\n        </Button>\n        <Button\n          onClick={() => {\n            setTyping(false);\n            setMessage(value);\n          }}\n        >\n          {cancelText}\n        </Button>\n      </Flexbox>\n    ) : (\n      footer\n    );\n\n    return (\n      <Modal\n        allowFullscreen\n        cancelText={cancelText}\n        destroyOnHidden\n        footer={modalFooter}\n        height={height}\n        okText={editText}\n        onCancel={() => {\n          setShowModal(false);\n          setTyping(false);\n          setMessage(value);\n        }}\n        onOk={() => setTyping(true)}\n        open={showModal}\n        panelRef={panelRef}\n        title={text?.title}\n      >\n        {isEdit ? (\n          mobile ? (\n            <TextArea\n              autoSize\n              className={textStyles}\n              defaultValue={temporaryValue}\n              onBlur={(e) => setMessage(e.target.value)}\n              onChange={(value) => setMessage(value.target.value)}\n              placeholder={placeholder}\n              value={temporaryValue}\n              variant={'borderless'}\n            />\n          ) : (\n            <CodeEditor\n              className={textStyles}\n              defaultValue={temporaryValue}\n              language={language}\n              onBlur={(e) => setMessage(e.target.value)}\n              onValueChange={(value) => setMessage(value)}\n              placeholder={placeholder}\n              value={temporaryValue}\n              variant={'borderless'}\n            />\n          )\n        ) : (\n          <>\n            {extra}\n            <Markdown variant={'chat'}>{String(value || placeholder)}</Markdown>\n          </>\n        )}\n      </Modal>\n    );\n  },\n);\n\nMessageModal.displayName = 'MessageModal';\n\nexport default MessageModal;\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,eAAe,MAClB,EACC,UACA,SACA,MACA,SAAS,QACT,cACA,iBACA,aACA,OACA,WAAW,YACX,UACA,MACA,QACA,YACI;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAQ,eAAeA,WAAe;CAC9C,MAAM,EAAE,MAAM,eAAeC,qBAAqB;CAClD,MAAM,CAAC,QAAQ,aAAaC,cAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,WAAW,gBAAgBA,cAAmB,OAAO;EAC1D,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,gBAAgB,cAAc,SAAS,MAAM;CAEpD,MAAM,cAAc,MAAM,WAAW,EAAE,uBAAuB;CAC9D,MAAM,aAAa,MAAM,UAAU,EAAE,sBAAsB;CAC3D,MAAM,WAAW,MAAM,QAAQ,EAAE,oBAAoB;AA2BrD,QACE,oBAACC;EACC;EACY;EACZ;EACA,QA9BgB,SAClB,qBAACC;GAAQ,WAAW;GAAsB,KAAK;cAC7C,oBAACC;IACC,eAAe;AACb,eAAU,MAAM;AAChB,gBAAW,eAAe;AAC1B,gBAAW,MAAM;;IAEnB,MAAK;cAEJ;KACM,EACT,oBAACA;IACC,eAAe;AACb,eAAU,MAAM;AAChB,gBAAW,MAAM;;cAGlB;KACM;IACD,GAEV;EASU;EACR,QAAQ;EACR,gBAAgB;AACd,gBAAa,MAAM;AACnB,aAAU,MAAM;AAChB,cAAW,MAAM;;EAEnB,YAAY,UAAU,KAAK;EAC3B,MAAM;EACI;EACV,OAAO,MAAM;YAEZ,SACC,SACE,oBAACC;GACC;GACA,WAAW;GACX,cAAc;GACd,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,WAAW,YAAU,WAAWC,QAAM,OAAO,MAAM;GACtC;GACb,OAAO;GACP,SAAS;IACT,GAEF,oBAACC;GACC,WAAW;GACX,cAAc;GACJ;GACV,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,gBAAgB,YAAU,WAAWD,QAAM;GAC9B;GACb,OAAO;GACP,SAAS;IACT,GAGJ,8CACG,OACD,oBAACE;GAAS,SAAS;aAAS,OAAO,SAAS,YAAY;IAAY,IACnE;GAEC;EAGb;AAED,aAAa,cAAc;AAE3B,2BAAe"}
+{"version":3,"file":"MessageModal.mjs","names":["messageModalMessages","useControlledState","Modal","Flexbox","Button","TextArea","textStyles","value","CodeEditor","Markdown"],"sources":["../../../src/chat/MessageModal/MessageModal.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport Button from '@/Button';\nimport CodeEditor from '@/CodeEditor';\nimport { Flexbox } from '@/Flex';\nimport TextArea from '@/Input/TextArea';\nimport Markdown from '@/Markdown';\nimport Modal from '@/Modal';\nimport { styles as textStyles } from '@/chat/MessageInput/style';\nimport messageModalMessages from '@/i18n/resources/en/messageModal';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport type { MessageModalProps } from './type';\n\nconst MessageModal = memo<MessageModalProps>(\n  ({\n    panelRef,\n    editing,\n    open,\n    height = '75vh',\n    onOpenChange,\n    onEditingChange,\n    placeholder,\n    value,\n    language = 'markdown',\n    onChange,\n    text,\n    footer,\n    extra,\n  }) => {\n    const { mobile } = useResponsive();\n    const { t } = useTranslation(messageModalMessages);\n    const [isEdit, setTyping] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    const [showModal, setShowModal] = useControlledState(false, {\n      onChange: onOpenChange,\n      value: open,\n    });\n\n    const [temporaryValue, setMessage] = useState(value);\n\n    const confirmText = text?.confirm ?? t('messageModal.confirm');\n    const cancelText = text?.cancel ?? t('messageModal.cancel');\n    const editText = text?.edit ?? t('messageModal.edit');\n\n    const modalFooter = isEdit ? (\n      <Flexbox direction={'horizontal-reverse'} gap={8}>\n        <Button\n          onClick={() => {\n            setTyping(false);\n            onChange?.(temporaryValue);\n            setMessage(value);\n          }}\n          type=\"primary\"\n        >\n          {confirmText}\n        </Button>\n        <Button\n          onClick={() => {\n            setTyping(false);\n            setMessage(value);\n          }}\n        >\n          {cancelText}\n        </Button>\n      </Flexbox>\n    ) : (\n      footer\n    );\n\n    return (\n      <Modal\n        allowFullscreen\n        cancelText={cancelText}\n        destroyOnHidden\n        footer={modalFooter}\n        height={height}\n        okText={editText}\n        onCancel={() => {\n          setShowModal(false);\n          setTyping(false);\n          setMessage(value);\n        }}\n        onOk={() => setTyping(true)}\n        open={showModal}\n        panelRef={panelRef}\n        title={text?.title}\n      >\n        {isEdit ? (\n          mobile ? (\n            <TextArea\n              autoSize\n              className={textStyles}\n              defaultValue={temporaryValue}\n              onBlur={(e) => setMessage(e.target.value)}\n              onChange={(value) => setMessage(value.target.value)}\n              placeholder={placeholder}\n              value={temporaryValue}\n              variant={'borderless'}\n            />\n          ) : (\n            <CodeEditor\n              className={textStyles}\n              defaultValue={temporaryValue}\n              language={language}\n              onBlur={(e) => setMessage(e.target.value)}\n              onValueChange={(value) => setMessage(value)}\n              placeholder={placeholder}\n              value={temporaryValue}\n              variant={'borderless'}\n            />\n          )\n        ) : (\n          <>\n            {extra}\n            <Markdown variant={'chat'}>{String(value || placeholder)}</Markdown>\n          </>\n        )}\n      </Modal>\n    );\n  },\n);\n\nMessageModal.displayName = 'MessageModal';\n\nexport default MessageModal;\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,eAAe,MAClB,EACC,UACA,SACA,MACA,SAAS,QACT,cACA,iBACA,aACA,OACA,WAAW,YACX,UACA,MACA,QACA,YACI;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,eAAeA,qBAAqB;CAClD,MAAM,CAAC,QAAQ,aAAaC,cAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,WAAW,gBAAgBA,cAAmB,OAAO;EAC1D,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,gBAAgB,cAAc,SAAS,MAAM;CAEpD,MAAM,cAAc,MAAM,WAAW,EAAE,uBAAuB;CAC9D,MAAM,aAAa,MAAM,UAAU,EAAE,sBAAsB;CAC3D,MAAM,WAAW,MAAM,QAAQ,EAAE,oBAAoB;AA2BrD,QACE,oBAACC;EACC;EACY;EACZ;EACA,QA9BgB,SAClB,qBAACC;GAAQ,WAAW;GAAsB,KAAK;cAC7C,oBAACC;IACC,eAAe;AACb,eAAU,MAAM;AAChB,gBAAW,eAAe;AAC1B,gBAAW,MAAM;;IAEnB,MAAK;cAEJ;KACM,EACT,oBAACA;IACC,eAAe;AACb,eAAU,MAAM;AAChB,gBAAW,MAAM;;cAGlB;KACM;IACD,GAEV;EASU;EACR,QAAQ;EACR,gBAAgB;AACd,gBAAa,MAAM;AACnB,aAAU,MAAM;AAChB,cAAW,MAAM;;EAEnB,YAAY,UAAU,KAAK;EAC3B,MAAM;EACI;EACV,OAAO,MAAM;YAEZ,SACC,SACE,oBAACC;GACC;GACA,WAAWC;GACX,cAAc;GACd,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,WAAW,YAAU,WAAWC,QAAM,OAAO,MAAM;GACtC;GACb,OAAO;GACP,SAAS;IACT,GAEF,oBAACC;GACC,WAAWF;GACX,cAAc;GACJ;GACV,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,gBAAgB,YAAU,WAAWC,QAAM;GAC9B;GACb,OAAO;GACP,SAAS;IACT,GAGJ,8CACG,OACD,oBAACE;GAAS,SAAS;aAAS,OAAO,SAAS,YAAY;IAAY,IACnE;GAEC;EAGb;AAED,aAAa,cAAc;AAE3B,2BAAe"}

package/es/chat/TokenTag/TokenTag.mjs

@@ -6,13 +6,12 @@ import chat_default from "../../i18n/resources/en/chat.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Progress } from "antd";
-import { useTheme } from "antd-style";
+import { cssVar } from "antd-style";
 import numeral from "numeral";
 
 //#region src/chat/TokenTag/TokenTag.tsx
 const format = (number) => numeral(number).format("0,0");
 const TokenTag = ({ mode = "remained", maxValue, value, text, showInfo, size = 20, ...rest }) => {
-	const theme = useTheme();
 	const { t } = useTranslation(chat_default);
 	const valueLeft = maxValue - value;
 	const percent = value / maxValue;
@@ -24,19 +23,19 @@ const TokenTag = ({ mode = "remained", maxValue, value, text, showInfo, size = 2
 		let color;
 		if (percent < .7) {
 			type = "normal";
-			color = theme.colorText;
+			color = cssVar.colorText;
 		} else if (percent < .9) {
 			type = "low";
-			color = theme.colorWarning;
+			color = cssVar.colorWarning;
 		} else {
 			type = "overload";
-			color = theme.colorError;
+			color = cssVar.colorError;
 		}
 		return {
 			color,
 			type
 		};
-	}, [percent, theme]);
+	}, [percent]);
 	const title = valueLeft > 0 ? [mode === "remained" ? remainedText : usedText, mode === "remained" ? format(valueLeft) : format(value)].join(" ") : overloadText;
 	return /* @__PURE__ */ jsx(ActionIcon_default, {
 		icon: /* @__PURE__ */ jsx(Progress, {