@lobehub/ui 5.57.2 → 6.0.0-beta.1

package/es/chat/ChatHeader/ChatHeader.mjs

@@ -1,28 +1,32 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import ActionIcon from "../../base-ui/ActionIcon/ActionIcon.mjs";
+import ActionIcon from "../../ActionIcon/ActionIcon.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
 import { ChevronLeft } from "lucide-react";
 //#region src/chat/ChatHeader/ChatHeader.tsx
 const ChatHeader = memo(({ left, right, className, styles: contentStyles, gaps, classNames, showBackButton, onBackClick, children, gap = 16, ...rest }) => {
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		horizontal: true,
 		align: "center",
-		className: cx(styles.container, className),
+		className: styleProps(styles.container, className).className,
 		distribution: "space-between",
 		gap,
+		height: 52,
 		paddingInline: 16,
+		width: "100%",
 		...rest,
 		children: [
 			/* @__PURE__ */ jsxs(FlexBasic_default, {
 				horizontal: true,
 				align: "center",
-				className: cx(styles.left, classNames?.left),
+				className: styleProps(styles.left, classNames?.left).className,
+				flex: 1,
 				gap: gaps?.left || 12,
 				justify: "flex-start",
+				paddingInline: "8px 0",
 				style: contentStyles?.left,
 				children: [showBackButton && /* @__PURE__ */ jsx(ActionIcon, {
 					icon: ChevronLeft,
@@ -33,7 +37,7 @@ const ChatHeader = memo(({ left, right, className, styles: contentStyles, gaps,
 			children && /* @__PURE__ */ jsx(FlexBasic_default, {
 				horizontal: true,
 				align: "center",
-				className: cx(styles.center, classNames?.center),
+				className: styleProps(styles.center, classNames?.center).className,
 				gap: gaps?.center || 8,
 				justify: "center",
 				style: contentStyles?.center,
@@ -42,7 +46,8 @@ const ChatHeader = memo(({ left, right, className, styles: contentStyles, gaps,
 			/* @__PURE__ */ jsx(FlexBasic_default, {
 				horizontal: true,
 				align: "center",
-				className: cx(styles.right, classNames?.right),
+				className: styleProps(styles.right, classNames?.right).className,
+				flex: "none",
 				gap: gaps?.right || 8,
 				justify: "flex-end",
 				style: contentStyles?.right,

package/es/chat/ChatHeader/ChatHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.mjs","names":["Flexbox"],"sources":["../../../src/chat/ChatHeader/ChatHeader.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft } from 'lucide-react';\nimport { memo } from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { ChatHeaderProps } from './type';\n\nconst ChatHeader = memo<ChatHeaderProps>(\n  ({\n    left,\n    right,\n    className,\n    styles: contentStyles,\n    gaps,\n    classNames,\n    showBackButton,\n    onBackClick,\n    children,\n    gap = 16,\n    ...rest\n  }) => {\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={cx(styles.container, className)}\n        distribution={'space-between'}\n        gap={gap}\n        paddingInline={16}\n        {...rest}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(styles.left, classNames?.left)}\n          gap={gaps?.left || 12}\n          justify={'flex-start'}\n          style={contentStyles?.left}\n        >\n          {showBackButton && (\n            <ActionIcon\n              icon={ChevronLeft}\n              style={{ marginRight: gaps?.left ? -gaps.left / 2 : -6 }}\n              onClick={() => onBackClick?.()}\n            />\n          )}\n          {left}\n        </Flexbox>\n        {children && (\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={cx(styles.center, classNames?.center)}\n            gap={gaps?.center || 8}\n            justify={'center'}\n            style={contentStyles?.center}\n          >\n            {children}\n          </Flexbox>\n        )}\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(styles.right, classNames?.right)}\n          gap={gaps?.right || 8}\n          justify={'flex-end'}\n          style={contentStyles?.right}\n        >\n          {right}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nChatHeader.displayName = 'ChatHeader';\n\nexport default ChatHeader;\n"],"mappings":";;;;;;;;;AAYA,MAAM,aAAa,MAChB,EACC,MACA,OACA,WACA,QAAQ,eACR,MACA,YACA,gBACA,aACA,UACA,MAAM,IACN,GAAG,WACC;CACJ,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAG,OAAO,WAAW,SAAS;EACzC,cAAc;EACT;EACL,eAAe;EACf,GAAI;EAPN,UAAA;GASE,qBAACA,mBAAD;IACE,YAAA;IACA,OAAO;IACP,WAAW,GAAG,OAAO,MAAM,YAAY,IAAI;IAC3C,KAAK,MAAM,QAAQ;IACnB,SAAS;IACT,OAAO,eAAe;IANxB,UAAA,CAQG,kBACC,oBAAC,YAAD;KACE,MAAM;KACN,OAAO,EAAE,aAAa,MAAM,OAAO,CAAC,KAAK,OAAO,IAAI,GAAG;KACvD,eAAe,cAAc;IAC9B,CAAA,GAEF,IACM;;GACR,YACC,oBAACA,mBAAD;IACE,YAAA;IACA,OAAO;IACP,WAAW,GAAG,OAAO,QAAQ,YAAY,MAAM;IAC/C,KAAK,MAAM,UAAU;IACrB,SAAS;IACT,OAAO,eAAe;IAErB;GACM,CAAA;GAEX,oBAACA,mBAAD;IACE,YAAA;IACA,OAAO;IACP,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;IAC7C,KAAK,MAAM,SAAS;IACpB,SAAS;IACT,OAAO,eAAe;IAErB,UAAA;GACM,CAAA;EACF;;AAEb,CACF;AAEA,WAAW,cAAc"}
+{"version":3,"file":"ChatHeader.mjs","names":["Flexbox"],"sources":["../../../src/chat/ChatHeader/ChatHeader.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeft } from 'lucide-react';\nimport { memo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { ChatHeaderProps } from './type';\n\nconst ChatHeader = memo<ChatHeaderProps>(\n  ({\n    left,\n    right,\n    className,\n    styles: contentStyles,\n    gaps,\n    classNames,\n    showBackButton,\n    onBackClick,\n    children,\n    gap = 16,\n    ...rest\n  }) => {\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={styleProps(styles.container, className).className}\n        distribution={'space-between'}\n        gap={gap}\n        height={52}\n        paddingInline={16}\n        width={'100%'}\n        {...rest}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={styleProps(styles.left, classNames?.left).className}\n          flex={1}\n          gap={gaps?.left || 12}\n          justify={'flex-start'}\n          paddingInline={'8px 0'}\n          style={contentStyles?.left}\n        >\n          {showBackButton && (\n            <ActionIcon\n              icon={ChevronLeft}\n              style={{ marginRight: gaps?.left ? -gaps.left / 2 : -6 }}\n              onClick={() => onBackClick?.()}\n            />\n          )}\n          {left}\n        </Flexbox>\n        {children && (\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={styleProps(styles.center, classNames?.center).className}\n            gap={gaps?.center || 8}\n            justify={'center'}\n            style={contentStyles?.center}\n          >\n            {children}\n          </Flexbox>\n        )}\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={styleProps(styles.right, classNames?.right).className}\n          flex={'none'}\n          gap={gaps?.right || 8}\n          justify={'flex-end'}\n          style={contentStyles?.right}\n        >\n          {right}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nChatHeader.displayName = 'ChatHeader';\n\nexport default ChatHeader;\n"],"mappings":";;;;;;;;;AAYA,MAAM,aAAa,MAChB,EACC,MACA,OACA,WACA,QAAQ,eACR,MACA,YACA,gBACA,aACA,UACA,MAAM,IACN,GAAG,WACC;CACJ,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,WAAW,OAAO,WAAW,SAAS,CAAC,CAAC;EACnD,cAAc;EACT;EACL,QAAQ;EACR,eAAe;EACf,OAAO;EACP,GAAI;EATN,UAAA;GAWE,qBAACA,mBAAD;IACE,YAAA;IACA,OAAO;IACP,WAAW,WAAW,OAAO,MAAM,YAAY,IAAI,CAAC,CAAC;IACrD,MAAM;IACN,KAAK,MAAM,QAAQ;IACnB,SAAS;IACT,eAAe;IACf,OAAO,eAAe;IARxB,UAAA,CAUG,kBACC,oBAAC,YAAD;KACE,MAAM;KACN,OAAO,EAAE,aAAa,MAAM,OAAO,CAAC,KAAK,OAAO,IAAI,GAAG;KACvD,eAAe,cAAc;IAC9B,CAAA,GAEF,IACM;;GACR,YACC,oBAACA,mBAAD;IACE,YAAA;IACA,OAAO;IACP,WAAW,WAAW,OAAO,QAAQ,YAAY,MAAM,CAAC,CAAC;IACzD,KAAK,MAAM,UAAU;IACrB,SAAS;IACT,OAAO,eAAe;IAErB;GACM,CAAA;GAEX,oBAACA,mBAAD;IACE,YAAA;IACA,OAAO;IACP,WAAW,WAAW,OAAO,OAAO,YAAY,KAAK,CAAC,CAAC;IACvD,MAAM;IACN,KAAK,MAAM,SAAS;IACpB,SAAS;IACT,OAAO,eAAe;IAErB,UAAA;GACM,CAAA;EACF;;AAEb,CACF;AAEA,WAAW,cAAc"}

package/es/chat/ChatHeader/ChatHeaderTitle.mjs

@@ -1,40 +1,45 @@
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import { titleStyles } from "./style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
 //#region src/chat/ChatHeader/ChatHeaderTitle.tsx
 const ChatHeaderTitle = ({ title, desc, tag }) => {
 	const tagContent = tag && /* @__PURE__ */ jsx(FlexBasic_default, {
 		horizontal: true,
-		align: "center",
-		className: titleStyles.tag,
+		align: "baseline",
+		flex: "none",
 		children: tag
 	});
 	if (desc) return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		className: titleStyles.container,
+		flex: 1,
+		...stylex.props(titleStyles.container),
 		gap: 4,
 		children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
 			horizontal: true,
 			align: "center",
-			className: titleStyles.titleContainer,
+			flex: 1,
+			...stylex.props(titleStyles.titleContainer),
 			gap: 8,
 			children: [/* @__PURE__ */ jsx("div", {
-				className: titleStyles.titleWithDesc,
+				...stylex.props(titleStyles.titleWithDesc),
 				children: title
 			}), tagContent]
 		}), /* @__PURE__ */ jsx(FlexBasic_default, {
 			horizontal: true,
 			align: "center",
-			className: titleStyles.desc,
+			width: "100%",
+			...stylex.props(titleStyles.desc),
 			children: desc
 		})]
 	});
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		horizontal: true,
 		align: "center",
-		className: titleStyles.container,
+		flex: 1,
+		...stylex.props(titleStyles.container),
 		gap: 8,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: titleStyles.title,
+			...stylex.props(titleStyles.title),
 			children: title
 		}), tagContent]
 	});

package/es/chat/ChatHeader/ChatHeaderTitle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatHeaderTitle.mjs","names":["Flexbox","styles"],"sources":["../../../src/chat/ChatHeader/ChatHeaderTitle.tsx"],"sourcesContent":["import { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { titleStyles as styles } from './style';\nimport type { ChatHeaderTitleProps } from './type';\n\nconst ChatHeaderTitle: FC<ChatHeaderTitleProps> = ({ title, desc, tag }) => {\n  const tagContent = tag && (\n    <Flexbox horizontal align={'center'} className={styles.tag}>\n      {tag}\n    </Flexbox>\n  );\n\n  if (desc)\n    return (\n      <Flexbox className={styles.container} gap={4}>\n        <Flexbox horizontal align={'center'} className={styles.titleContainer} gap={8}>\n          <div className={styles.titleWithDesc}>{title}</div>\n          {tagContent}\n        </Flexbox>\n        <Flexbox horizontal align={'center'} className={styles.desc}>\n          {desc}\n        </Flexbox>\n      </Flexbox>\n    );\n  return (\n    <Flexbox horizontal align={'center'} className={styles.container} gap={8}>\n      <div className={styles.title}>{title}</div>\n      {tagContent}\n    </Flexbox>\n  );\n};\n\nexport default ChatHeaderTitle;\n"],"mappings":";;;;AAOA,MAAM,mBAA6C,EAAE,OAAO,MAAM,UAAU;CAC1E,MAAM,aAAa,OACjB,oBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,WAAWC,YAAO;EACpD,UAAA;CACM,CAAA;CAGX,IAAI,MACF,OACE,qBAACD,mBAAD;EAAS,WAAWC,YAAO;EAAW,KAAK;EAA3C,UAAA,CACE,qBAACD,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,WAAWC,YAAO;GAAgB,KAAK;GAA5E,UAAA,CACE,oBAAC,OAAD;IAAK,WAAWA,YAAO;IAAgB,UAAA;GAAW,CAAA,GACjD,UACM;EACT,CAAA,GAAA,oBAACD,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,WAAWC,YAAO;GACpD,UAAA;EACM,CAAA,CACF;;CAEb,OACE,qBAACD,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,WAAWC,YAAO;EAAW,KAAK;EAAvE,UAAA,CACE,oBAAC,OAAD;GAAK,WAAWA,YAAO;GAAQ,UAAA;EAAW,CAAA,GACzC,UACM;;AAEb"}
+{"version":3,"file":"ChatHeaderTitle.mjs","names":["Flexbox","styles"],"sources":["../../../src/chat/ChatHeader/ChatHeaderTitle.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { titleStyles as styles } from './style';\nimport type { ChatHeaderTitleProps } from './type';\n\nconst ChatHeaderTitle: FC<ChatHeaderTitleProps> = ({ title, desc, tag }) => {\n  const tagContent = tag && (\n    <Flexbox horizontal align={'baseline'} flex={'none'}>\n      {tag}\n    </Flexbox>\n  );\n\n  if (desc)\n    return (\n      <Flexbox flex={1} {...stylex.props(styles.container)} gap={4}>\n        <Flexbox\n          horizontal\n          align={'center'}\n          flex={1}\n          {...stylex.props(styles.titleContainer)}\n          gap={8}\n        >\n          <div {...stylex.props(styles.titleWithDesc)}>{title}</div>\n          {tagContent}\n        </Flexbox>\n        <Flexbox horizontal align={'center'} width={'100%'} {...stylex.props(styles.desc)}>\n          {desc}\n        </Flexbox>\n      </Flexbox>\n    );\n  return (\n    <Flexbox horizontal align={'center'} flex={1} {...stylex.props(styles.container)} gap={8}>\n      <div {...stylex.props(styles.title)}>{title}</div>\n      {tagContent}\n    </Flexbox>\n  );\n};\n\nexport default ChatHeaderTitle;\n"],"mappings":";;;;;AAKA,MAAM,mBAA6C,EACjD,OACA,MACA,UACI;CACJ,MAAM,aAAa,OAAO,oBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAY,MAAM;EAClE,UAAA;CACM,CAAA;CACX,IAAI,MAAM,OAAO,qBAACA,mBAAD;EAAS,MAAM;EAAG,GAAI,OAAO,MAAMC,YAAO,SAAS;EAAG,KAAK;EAA3D,UAAA,CACX,qBAACD,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,MAAM;GAAG,GAAI,OAAO,MAAMC,YAAO,cAAc;GAAG,KAAK;GAA5F,UAAA,CACE,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAMA,YAAO,aAAa;IAAI,UAAA;GAAW,CAAA,GACxD,UACM;EACT,CAAA,GAAA,oBAACD,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,OAAO;GAAQ,GAAI,OAAO,MAAMC,YAAO,IAAI;GAC7E,UAAA;EACM,CAAA,CACF;;CACb,OAAO,qBAACD,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,MAAM;EAAG,GAAI,OAAO,MAAMC,YAAO,SAAS;EAAG,KAAK;EAAvF,UAAA,CACH,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAMA,YAAO,KAAK;GAAI,UAAA;EAAW,CAAA,GAChD,UACM;;AACb"}

package/es/chat/ChatHeader/style.mjs

@@ -1,82 +1,75 @@
-import { createStaticStyles } from "antd-style";
 //#region src/chat/ChatHeader/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => {
-	return {
-		center: css`
-      position: relative;
-      overflow: hidden;
-    `,
-		container: css`
-      position: absolute;
-      z-index: 10;
-
-      overflow: hidden;
-      grid-area: header;
-      align-self: stretch;
-
-      width: 100%;
-      height: 52px;
-      min-height: 52px;
-      max-height: 52px;
-      border-block-end: 1px solid ${cssVar.colorBorderSecondary};
-
-      background: ${cssVar.colorBgContainer};
-    `,
-		left: css`
-      position: relative;
-      overflow: hidden;
-      flex: 1;
-      padding-inline-start: 8px;
-    `,
-		right: css`
-      position: relative;
-      overflow: hidden;
-      flex: none;
-    `
-	};
-});
-const titleStyles = createStaticStyles(({ css, cssVar }) => ({
-	container: css`
-    position: relative;
-    overflow: hidden;
-    flex: 1;
-    max-width: 100%;
-  `,
-	desc: css`
-    overflow: hidden;
-
-    width: 100%;
-
-    font-size: 12px;
-    line-height: 1;
-    color: ${cssVar.colorTextTertiary};
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  `,
-	tag: css`
-    flex: none;
-    align-items: baseline;
-  `,
-	title: css`
-    overflow: hidden;
-
-    font-size: 16px;
-    font-weight: bold;
-    line-height: 1;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  `,
-	titleContainer: css`
-    flex: 1;
-    line-height: 1;
-  `,
-	titleWithDesc: css`
-    overflow: hidden;
-    font-weight: bold;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  `
-}));
+const styles = {
+	center: {
+		kVQacm: "lbb3r6kr",
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	},
+	container: {
+		kVQacm: "lbb3r6kr",
+		kSGwAc: "lbkh2ocl",
+		kWkggS: "lb6yijhg",
+		kL6WhQ: "lb1nkj3if",
+		kfdmCh: "lb1q0q8m5",
+		kt9PQ7: "lbso031l",
+		kWZpDQ: "lbrnd8zp",
+		kEXP64: "lb1iip7fa",
+		kpJH7q: "lb36eicd",
+		k1lYIM: "lbl2aupd",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lb1n327nk",
+		kskxy: "lbdr9t0c",
+		kAzted: "lb1wiwyrm",
+		$$css: true
+	},
+	left: {
+		kVQacm: "lbb3r6kr",
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	},
+	right: {
+		kVQacm: "lbb3r6kr",
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	}
+};
+const titleStyles = {
+	container: {
+		kVQacm: "lbb3r6kr",
+		kVAEAm: "lb1n2onr6",
+		ks0D6T: "lb193iq5w",
+		$$css: true
+	},
+	desc: {
+		kVQacm: "lbb3r6kr",
+		kMwMTN: "lb53gy9q",
+		kGuDYH: "lbfifm61",
+		kLWn49: "lbo5v014",
+		kg5iWk: "lblyipyv",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	title: {
+		kVQacm: "lbb3r6kr",
+		kGuDYH: "lb1j61zf2",
+		k63SB2: "lb117nqv4",
+		kLWn49: "lbo5v014",
+		kg5iWk: "lblyipyv",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	titleContainer: {
+		kLWn49: "lbo5v014",
+		$$css: true
+	},
+	titleWithDesc: {
+		kVQacm: "lbb3r6kr",
+		k63SB2: "lb117nqv4",
+		kg5iWk: "lblyipyv",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	}
+};
 //#endregion
 export { styles, titleStyles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/chat/ChatHeader/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    center: css`\n      position: relative;\n      overflow: hidden;\n    `,\n    container: css`\n      position: absolute;\n      z-index: 10;\n\n      overflow: hidden;\n      grid-area: header;\n      align-self: stretch;\n\n      width: 100%;\n      height: 52px;\n      min-height: 52px;\n      max-height: 52px;\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n\n      background: ${cssVar.colorBgContainer};\n    `,\n    left: css`\n      position: relative;\n      overflow: hidden;\n      flex: 1;\n      padding-inline-start: 8px;\n    `,\n    right: css`\n      position: relative;\n      overflow: hidden;\n      flex: none;\n    `,\n  };\n});\n\nexport const titleStyles = createStaticStyles(({ css, cssVar }) => ({\n  container: css`\n    position: relative;\n    overflow: hidden;\n    flex: 1;\n    max-width: 100%;\n  `,\n  desc: css`\n    overflow: hidden;\n\n    width: 100%;\n\n    font-size: 12px;\n    line-height: 1;\n    color: ${cssVar.colorTextTertiary};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  tag: css`\n    flex: none;\n    align-items: baseline;\n  `,\n  title: css`\n    overflow: hidden;\n\n    font-size: 16px;\n    font-weight: bold;\n    line-height: 1;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  titleContainer: css`\n    flex: 1;\n    line-height: 1;\n  `,\n  titleWithDesc: css`\n    overflow: hidden;\n    font-weight: bold;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,QAAQ,GAAG;;;;EAIX,WAAW,GAAG;;;;;;;;;;;;oCAYkB,OAAO,qBAAqB;;oBAE5C,OAAO,iBAAiB;;EAExC,MAAM,GAAG;;;;;;EAMT,OAAO,GAAG;;;;;CAKZ;AACF,CAAC;AAED,MAAa,cAAc,oBAAoB,EAAE,KAAK,cAAc;CAClE,WAAW,GAAG;;;;;;CAMd,MAAM,GAAG;;;;;;;aAOE,OAAO,kBAAkB;;;;CAIpC,KAAK,GAAG;;;;CAIR,OAAO,GAAG;;;;;;;;;CASV,gBAAgB,GAAG;;;;CAInB,eAAe,GAAG;;;;;;AAMpB,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/chat/ChatHeader/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  center: {\n    overflow: 'hidden',\n    position: 'relative',\n  },\n  container: {\n    overflow: 'hidden',\n    alignSelf: 'stretch',\n    backgroundColor: cssVar.colorBgContainer,\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    gridColumnEnd: 'header',\n    gridColumnStart: 'header',\n    gridRowEnd: 'header',\n    gridRowStart: 'header',\n    position: 'absolute',\n    zIndex: 10,\n    maxHeight: 52,\n    minHeight: 52,\n  },\n  left: {\n    overflow: 'hidden',\n    position: 'relative',\n  },\n  right: {\n    overflow: 'hidden',\n    position: 'relative',\n  },\n});\n\nexport const titleStyles = stylex.create({\n  container: {\n    overflow: 'hidden',\n    position: 'relative',\n    maxWidth: '100%',\n  },\n  desc: {\n    overflow: 'hidden',\n    color: cssVar.colorTextTertiary,\n    fontSize: 12,\n    lineHeight: 1,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  title: {\n    overflow: 'hidden',\n    fontSize: 16,\n    fontWeight: 'bold',\n    lineHeight: 1,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  titleContainer: {\n    lineHeight: 1,\n  },\n  titleWithDesc: {\n    overflow: 'hidden',\n    fontWeight: 'bold',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAa,cAAc;CACzB,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -2,7 +2,7 @@ import { FlexboxProps } from "../../Flex/type.mjs";
 import "../../Flex/index.mjs";
 import { CSSProperties, ReactNode } from "react";
 //#region src/chat/ChatHeader/type.d.ts
-interface ChatHeaderProps extends FlexboxProps {
+export interface ChatHeaderProps extends FlexboxProps {
   classNames?: {
     center?: string;
     left?: string;
@@ -27,11 +27,10 @@ interface ChatHeaderProps extends FlexboxProps {
     right?: CSSProperties;
   };
 }
-interface ChatHeaderTitleProps {
+export interface ChatHeaderTitleProps {
   desc?: string | ReactNode;
   tag?: ReactNode;
   title: string | ReactNode;
 }
 //#endregion
-export { ChatHeaderProps, ChatHeaderTitleProps };
 //# sourceMappingURL=type.d.mts.map

package/es/chat/ChatInputArea/ChatInputArea.mjs

@@ -1,23 +1,29 @@
 "use client";
-import DraggablePanel from "../../base-ui/DraggablePanel/DraggablePanel.mjs";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import DraggablePanel from "../../DraggablePanel/DraggablePanel.mjs";
 import ChatInputAreaInner from "./components/ChatInputAreaInner.mjs";
-import { styles } from "./style.mjs";
+import { styles, textareaClassName } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 //#region src/chat/ChatInputArea/ChatInputArea.tsx
 const ChatInputArea = memo(({ ref, className, style, classNames, expand = true, setExpand, bottomAddons, topAddons, onSizeChange, heights, onSend, ...rest }) => {
 	const content = /* @__PURE__ */ jsxs("section", {
-		className: styles.container,
+		...stylex.props(styles.container),
 		style: { minHeight: heights?.minHeight },
 		children: [
 			topAddons,
 			/* @__PURE__ */ jsx("div", {
-				className: styles.textareaContainer,
+				...stylex.props(styles.textareaContainer),
 				children: /* @__PURE__ */ jsx(ChatInputAreaInner, {
-					className: styles.textarea,
+					className: textareaClassName,
 					ref,
-					style: { paddingInline: 16 },
+					style: {
+						alignItems: "stretch",
+						lineHeight: 1.5,
+						paddingBlock: 0,
+						paddingInline: 16
+					},
 					onSend: () => {
 						onSend?.();
 						setExpand?.(false);
@@ -29,11 +35,10 @@ const ChatInputArea = memo(({ ref, className, style, classNames, expand = true,
 		]
 	});
 	if (expand) return /* @__PURE__ */ jsx("div", {
-		className: cx(styles.fullscreen, className),
-		style: {
+		...styleProps(styles.fullscreen, className, {
 			insetBlockStart: heights?.headerHeight ?? 0,
 			...style
-		},
+		}),
 		children: content
 	});
 	return /* @__PURE__ */ jsx(DraggablePanel, {

package/es/chat/ChatInputArea/ChatInputArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInputArea.mjs","names":[],"sources":["../../../src/chat/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { DraggablePanel } from '@/base-ui/DraggablePanel';\n\nimport ChatInputAreaInner from './components/ChatInputAreaInner';\nimport { styles } from './style';\nimport type { ChatInputAreaProps } from './type';\n\nconst ChatInputArea = memo<ChatInputAreaProps>(\n  ({\n    ref,\n    className,\n    style,\n    classNames,\n    expand = true,\n    setExpand,\n    bottomAddons,\n    topAddons,\n    onSizeChange,\n    heights,\n    onSend,\n    ...rest\n  }) => {\n    const content = (\n      <section className={styles.container} style={{ minHeight: heights?.minHeight }}>\n        {topAddons}\n        <div className={styles.textareaContainer}>\n          <ChatInputAreaInner\n            className={styles.textarea}\n            ref={ref}\n            style={{\n              paddingInline: 16,\n            }}\n            onSend={() => {\n              onSend?.();\n              setExpand?.(false);\n            }}\n            {...rest}\n          />\n        </div>\n        {bottomAddons}\n      </section>\n    );\n\n    if (expand)\n      return (\n        <div\n          className={cx(styles.fullscreen, className)}\n          style={{ insetBlockStart: heights?.headerHeight ?? 0, ...style }}\n        >\n          {content}\n        </div>\n      );\n\n    return (\n      <DraggablePanel\n        className={className}\n        classNames={classNames}\n        maxHeight={heights?.maxHeight}\n        minHeight={heights?.minHeight}\n        placement=\"bottom\"\n        size={{ height: heights?.inputHeight, width: '100%' }}\n        style={{ zIndex: 10, ...style }}\n        onSizeChange={onSizeChange}\n      >\n        {content}\n      </DraggablePanel>\n    );\n  },\n);\n\nexport default ChatInputArea;\n"],"mappings":";;;;;;;;AAWA,MAAM,gBAAgB,MACnB,EACC,KACA,WACA,OACA,YACA,SAAS,MACT,WACA,cACA,WACA,cACA,SACA,QACA,GAAG,WACC;CACJ,MAAM,UACJ,qBAAC,WAAD;EAAS,WAAW,OAAO;EAAW,OAAO,EAAE,WAAW,SAAS,UAAU;EAA7E,UAAA;GACG;GACD,oBAAC,OAAD;IAAK,WAAW,OAAO;IACrB,UAAA,oBAAC,oBAAD;KACE,WAAW,OAAO;KACb;KACL,OAAO,EACL,eAAe,GACjB;KACA,cAAc;MACZ,SAAS;MACT,YAAY,KAAK;KACnB;KACA,GAAI;IACL,CAAA;GACE,CAAA;GACJ;EACM;;CAGX,IAAI,QACF,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,OAAO,YAAY,SAAS;EAC1C,OAAO;GAAE,iBAAiB,SAAS,gBAAgB;GAAG,GAAG;EAAM;EAE9D,UAAA;CACE,CAAA;CAGT,OACE,oBAAC,gBAAD;EACa;EACC;EACZ,WAAW,SAAS;EACpB,WAAW,SAAS;EACpB,WAAU;EACV,MAAM;GAAE,QAAQ,SAAS;GAAa,OAAO;EAAO;EACpD,OAAO;GAAE,QAAQ;GAAI,GAAG;EAAM;EAChB;EAEb,UAAA;CACa,CAAA;AAEpB,CACF"}
+{"version":3,"file":"ChatInputArea.mjs","names":[],"sources":["../../../src/chat/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo } from 'react';\n\nimport { DraggablePanel } from '@/DraggablePanel';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport ChatInputAreaInner from './components/ChatInputAreaInner';\nimport { styles, textareaClassName } from './style';\nimport type { ChatInputAreaProps } from './type';\n\nconst ChatInputArea = memo<ChatInputAreaProps>(\n  ({\n    ref,\n    className,\n    style,\n    classNames,\n    expand = true,\n    setExpand,\n    bottomAddons,\n    topAddons,\n    onSizeChange,\n    heights,\n    onSend,\n    ...rest\n  }) => {\n    const content = (\n      <section {...stylex.props(styles.container)} style={{ minHeight: heights?.minHeight }}>\n        {topAddons}\n        <div {...stylex.props(styles.textareaContainer)}>\n          <ChatInputAreaInner\n            className={textareaClassName}\n            ref={ref}\n            style={{\n              alignItems: 'stretch',\n              lineHeight: 1.5,\n              paddingBlock: 0,\n              paddingInline: 16,\n            }}\n            onSend={() => {\n              onSend?.();\n              setExpand?.(false);\n            }}\n            {...rest}\n          />\n        </div>\n        {bottomAddons}\n      </section>\n    );\n\n    if (expand)\n      return (\n        <div\n          {...styleProps(styles.fullscreen, className, {\n            insetBlockStart: heights?.headerHeight ?? 0,\n            ...style,\n          })}\n        >\n          {content}\n        </div>\n      );\n\n    return (\n      <DraggablePanel\n        className={className}\n        classNames={classNames}\n        maxHeight={heights?.maxHeight}\n        minHeight={heights?.minHeight}\n        placement=\"bottom\"\n        size={{ height: heights?.inputHeight, width: '100%' }}\n        style={{ zIndex: 10, ...style }}\n        onSizeChange={onSizeChange}\n      >\n        {content}\n      </DraggablePanel>\n    );\n  },\n);\n\nexport default ChatInputArea;\n"],"mappings":";;;;;;;;;AASA,MAAM,gBAAgB,MAA0B,EAC9C,KACA,WACA,OACA,YACA,SAAS,MACT,WACA,cACA,WACA,cACA,SACA,QACA,GAAG,WACC;CACJ,MAAM,UAAU,qBAAC,WAAD;EAAS,GAAI,OAAO,MAAM,OAAO,SAAS;EAAG,OAAO,EAClE,WAAW,SAAS,UACtB;EAFgB,UAAA;GAGT;GACD,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,iBAAiB;IAC5C,UAAA,oBAAC,oBAAD;KAAoB,WAAW;KAAwB;KAAK,OAAO;MACrE,YAAY;MACZ,YAAY;MACZ,cAAc;MACd,eAAe;KACjB;KAAG,cAAc;MACf,SAAS;MACT,YAAY,KAAK;KACnB;KAAG,GAAI;IAAO,CAAA;GACP,CAAA;GACJ;EACM;;CACb,IAAI,QAAQ,OAAO,oBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,YAAY,WAAW;GACnE,iBAAiB,SAAS,gBAAgB;GAC1C,GAAG;EACL,CAAC;EACQ,UAAA;CACE,CAAA;CACX,OAAO,oBAAC,gBAAD;EAA2B;EAAuB;EAAY,WAAW,SAAS;EAAW,WAAW,SAAS;EAAW,WAAU;EAAS,MAAM;GAC1J,QAAQ,SAAS;GACjB,OAAO;EACT;EAAG,OAAO;GACR,QAAQ;GACR,GAAG;EACL;EAAiB;EACV,UAAA;CACa,CAAA;AACtB,CAAC"}

package/es/chat/ChatInputArea/components/ChatInputActionBar.mjs

@@ -1,15 +1,16 @@
 "use client";
 import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
+import { useResponsive } from "../../../styles/theme/scope.mjs";
 import { actionBarStyles } from "../style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useResponsive } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 //#region src/chat/ChatInputArea/components/ChatInputActionBar.tsx
 const ChatInputActionBar = ({ ref, padding = "0 16px", leftAddons, rightAddons, ...rest }) => {
 	const { mobile } = useResponsive();
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		horizontal: true,
 		align: "center",
-		className: actionBarStyles.root,
+		...stylex.props(actionBarStyles.root),
 		flex: "none",
 		justify: "space-between",
 		padding,
@@ -18,14 +19,13 @@ const ChatInputActionBar = ({ ref, padding = "0 16px", leftAddons, rightAddons,
 		children: [/* @__PURE__ */ jsx(FlexBasic_default, {
 			horizontal: true,
 			align: "center",
-			className: actionBarStyles.left,
+			...stylex.props(actionBarStyles.left),
 			flex: 1,
 			gap: mobile ? 0 : 4,
 			children: leftAddons
 		}), /* @__PURE__ */ jsx(FlexBasic_default, {
 			horizontal: true,
 			align: "center",
-			className: actionBarStyles.right,
 			flex: 0,
 			gap: mobile ? 0 : 4,
 			justify: "flex-end",

package/es/chat/ChatInputArea/components/ChatInputActionBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInputActionBar.mjs","names":["Flexbox","styles"],"sources":["../../../../src/chat/ChatInputArea/components/ChatInputActionBar.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { actionBarStyles as styles } from '../style';\nimport type { ChatInputActionBarProps } from '../type';\n\nconst ChatInputActionBar: FC<ChatInputActionBarProps> = ({\n  ref,\n  padding = '0 16px',\n  leftAddons,\n  rightAddons,\n  ...rest\n}) => {\n  const { mobile } = useResponsive();\n  return (\n    <Flexbox\n      horizontal\n      align={'center'}\n      className={styles.root}\n      flex={'none'}\n      justify={'space-between'}\n      padding={padding}\n      ref={ref}\n      {...rest}\n    >\n      <Flexbox horizontal align={'center'} className={styles.left} flex={1} gap={mobile ? 0 : 4}>\n        {leftAddons}\n      </Flexbox>\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={styles.right}\n        flex={0}\n        gap={mobile ? 0 : 4}\n        justify={'flex-end'}\n      >\n        {rightAddons}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nChatInputActionBar.displayName = 'ChatInputActionBar';\n\nexport default ChatInputActionBar;\n"],"mappings":";;;;;;AAUA,MAAM,sBAAmD,EACvD,KACA,UAAU,UACV,YACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,cAAc;CACjC,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAWC,gBAAO;EAClB,MAAM;EACN,SAAS;EACA;EACJ;EACL,GAAI;EARN,UAAA,CAUE,oBAACD,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,WAAWC,gBAAO;GAAM,MAAM;GAAG,KAAK,SAAS,IAAI;GACrF,UAAA;EACM,CAAA,GACT,oBAACD,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAWC,gBAAO;GAClB,MAAM;GACN,KAAK,SAAS,IAAI;GAClB,SAAS;GAER,UAAA;EACM,CAAA,CACF;;AAEb;AAEA,mBAAmB,cAAc"}
+{"version":3,"file":"ChatInputActionBar.mjs","names":["Flexbox","styles"],"sources":["../../../../src/chat/ChatInputArea/components/ChatInputActionBar.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport { actionBarStyles as styles } from '../style';\nimport type { ChatInputActionBarProps } from '../type';\n\nconst ChatInputActionBar: FC<ChatInputActionBarProps> = ({\n  ref,\n  padding = '0 16px',\n  leftAddons,\n  rightAddons,\n  ...rest\n}) => {\n  const { mobile } = useResponsive();\n  return (\n    <Flexbox\n      horizontal\n      align={'center'}\n      {...stylex.props(styles.root)}\n      flex={'none'}\n      justify={'space-between'}\n      padding={padding}\n      ref={ref}\n      {...rest}\n    >\n      <Flexbox\n        horizontal\n        align={'center'}\n        {...stylex.props(styles.left)}\n        flex={1}\n        gap={mobile ? 0 : 4}\n      >\n        {leftAddons}\n      </Flexbox>\n      <Flexbox horizontal align={'center'} flex={0} gap={mobile ? 0 : 4} justify={'flex-end'}>\n        {rightAddons}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nChatInputActionBar.displayName = 'ChatInputActionBar';\n\nexport default ChatInputActionBar;\n"],"mappings":";;;;;;;AAQA,MAAM,sBAAmD,EACvD,KACA,UAAU,UACV,YACA,aACA,GAAG,WACC;CACJ,MAAM,EACJ,WACE,cAAc;CAClB,OAAO,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,GAAI,OAAO,MAAMC,gBAAO,IAAI;EAAG,MAAM;EAAQ,SAAS;EAA0B;EAAc;EAAK,GAAI;EAA5I,UAAA,CACH,oBAACD,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,GAAI,OAAO,MAAMC,gBAAO,IAAI;GAAG,MAAM;GAAG,KAAK,SAAS,IAAI;GAC5F,UAAA;EACM,CAAA,GACT,oBAACD,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,MAAM;GAAG,KAAK,SAAS,IAAI;GAAG,SAAS;GACzE,UAAA;EACM,CAAA,CACF;;AACb;AACA,mBAAmB,cAAc"}

package/es/chat/ChatInputArea/components/ChatInputAreaInner.mjs

@@ -1,5 +1,5 @@
 "use client";
-import TextArea_default from "../../../base-ui/Input/TextArea.mjs";
+import TextArea_default from "../../../Input/TextArea.mjs";
 import { memo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/chat/ChatInputArea/components/ChatInputAreaInner.tsx

package/es/chat/ChatInputArea/components/ChatInputAreaInner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInputAreaInner.mjs","names":["TextArea"],"sources":["../../../../src/chat/ChatInputArea/components/ChatInputAreaInner.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useRef } from 'react';\n\nimport { TextArea } from '@/base-ui/Input';\n\nimport type { ChatInputAreaInnerProps } from '../type';\n\nconst ChatInputAreaInner = memo<ChatInputAreaInnerProps>(\n  ({\n    ref,\n    resize = false,\n    onCompositionEnd,\n    onPressEnter,\n    onCompositionStart,\n    className,\n    onInput,\n    loading,\n    onSend,\n    onBlur,\n    onChange,\n    ...rest\n  }) => {\n    const isChineseInput = useRef(false);\n\n    return (\n      <TextArea\n        className={className}\n        ref={ref}\n        resize={resize}\n        variant={'borderless'}\n        onBlur={(e) => {\n          onInput?.(e.target.value);\n          onBlur?.(e);\n        }}\n        onChange={(e) => {\n          onInput?.(e.target.value);\n          onChange?.(e);\n        }}\n        onCompositionEnd={(e) => {\n          isChineseInput.current = false;\n          onCompositionEnd?.(e);\n        }}\n        onCompositionStart={(e) => {\n          isChineseInput.current = true;\n          onCompositionStart?.(e);\n        }}\n        onPressEnter={(e) => {\n          onPressEnter?.(e);\n          const isMobile = /mobi|android|iphone/i.test(navigator.userAgent);\n          if (\n            !loading &&\n            !isChineseInput.current &&\n            ((!isMobile && !e.shiftKey) || (isMobile && e.shiftKey))\n          ) {\n            e.preventDefault();\n            onSend?.();\n          }\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default ChatInputAreaInner;\n"],"mappings":";;;;;AAQA,MAAM,qBAAqB,MACxB,EACC,KACA,SAAS,OACT,kBACA,cACA,oBACA,WACA,SACA,SACA,QACA,QACA,UACA,GAAG,WACC;CACJ,MAAM,iBAAiB,OAAO,KAAK;CAEnC,OACE,oBAACA,kBAAD;EACa;EACN;EACG;EACR,SAAS;EACT,SAAS,MAAM;GACb,UAAU,EAAE,OAAO,KAAK;GACxB,SAAS,CAAC;EACZ;EACA,WAAW,MAAM;GACf,UAAU,EAAE,OAAO,KAAK;GACxB,WAAW,CAAC;EACd;EACA,mBAAmB,MAAM;GACvB,eAAe,UAAU;GACzB,mBAAmB,CAAC;EACtB;EACA,qBAAqB,MAAM;GACzB,eAAe,UAAU;GACzB,qBAAqB,CAAC;EACxB;EACA,eAAe,MAAM;GACnB,eAAe,CAAC;GAChB,MAAM,WAAW,uBAAuB,KAAK,UAAU,SAAS;GAChE,IACE,CAAC,WACD,CAAC,eAAe,YACd,CAAC,YAAY,CAAC,EAAE,YAAc,YAAY,EAAE,WAC9C;IACA,EAAE,eAAe;IACjB,SAAS;GACX;EACF;EACA,GAAI;CACL,CAAA;AAEL,CACF"}
+{"version":3,"file":"ChatInputAreaInner.mjs","names":["TextArea"],"sources":["../../../../src/chat/ChatInputArea/components/ChatInputAreaInner.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useRef } from 'react';\n\nimport { TextArea } from '@/Input';\n\nimport type { ChatInputAreaInnerProps } from '../type';\n\nconst ChatInputAreaInner = memo<ChatInputAreaInnerProps>(\n  ({\n    ref,\n    resize = false,\n    onCompositionEnd,\n    onPressEnter,\n    onCompositionStart,\n    className,\n    onInput,\n    loading,\n    onSend,\n    onBlur,\n    onChange,\n    ...rest\n  }) => {\n    const isChineseInput = useRef(false);\n\n    return (\n      <TextArea\n        className={className}\n        ref={ref}\n        resize={resize}\n        variant={'borderless'}\n        onBlur={(e) => {\n          onInput?.(e.target.value);\n          onBlur?.(e);\n        }}\n        onChange={(e) => {\n          onInput?.(e.target.value);\n          onChange?.(e);\n        }}\n        onCompositionEnd={(e) => {\n          isChineseInput.current = false;\n          onCompositionEnd?.(e);\n        }}\n        onCompositionStart={(e) => {\n          isChineseInput.current = true;\n          onCompositionStart?.(e);\n        }}\n        onPressEnter={(e) => {\n          onPressEnter?.(e);\n          const isMobile = /mobi|android|iphone/i.test(navigator.userAgent);\n          if (\n            !loading &&\n            !isChineseInput.current &&\n            ((!isMobile && !e.shiftKey) || (isMobile && e.shiftKey))\n          ) {\n            e.preventDefault();\n            onSend?.();\n          }\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default ChatInputAreaInner;\n"],"mappings":";;;;;AAQA,MAAM,qBAAqB,MACxB,EACC,KACA,SAAS,OACT,kBACA,cACA,oBACA,WACA,SACA,SACA,QACA,QACA,UACA,GAAG,WACC;CACJ,MAAM,iBAAiB,OAAO,KAAK;CAEnC,OACE,oBAACA,kBAAD;EACa;EACN;EACG;EACR,SAAS;EACT,SAAS,MAAM;GACb,UAAU,EAAE,OAAO,KAAK;GACxB,SAAS,CAAC;EACZ;EACA,WAAW,MAAM;GACf,UAAU,EAAE,OAAO,KAAK;GACxB,WAAW,CAAC;EACd;EACA,mBAAmB,MAAM;GACvB,eAAe,UAAU;GACzB,mBAAmB,CAAC;EACtB;EACA,qBAAqB,MAAM;GACzB,eAAe,UAAU;GACzB,qBAAqB,CAAC;EACxB;EACA,eAAe,MAAM;GACnB,eAAe,CAAC;GAChB,MAAM,WAAW,uBAAuB,KAAK,UAAU,SAAS;GAChE,IACE,CAAC,WACD,CAAC,eAAe,YACd,CAAC,YAAY,CAAC,EAAE,YAAc,YAAY,EAAE,WAC9C;IACA,EAAE,eAAe;IACjB,SAAS;GACX;EACF;EACA,GAAI;CACL,CAAA;AAEL,CACF"}

package/es/chat/ChatInputArea/components/ChatSendButton.mjs

@@ -1,8 +1,8 @@
-import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
+import { cssVar } from "../../../styles/stylex/cssVar.stylex.mjs";
 import Icon from "../../../Icon/Icon.mjs";
-import Button from "../../../base-ui/Button/Button.mjs";
+import Button from "../../../Button/Button.mjs";
+import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cssVar } from "antd-style";
 import { ArrowBigUp, CornerDownLeft, Loader2 } from "lucide-react";
 //#region src/chat/ChatInputArea/components/ChatSendButton.tsx
 const ChatSendButton = ({ ref, leftAddons, rightAddons, texts, onSend, loading, onStop, ...rest }) => {

package/es/chat/ChatInputArea/components/ChatSendButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatSendButton.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatInputArea/components/ChatSendButton.tsx"],"sourcesContent":["import { cssVar } from 'antd-style';\nimport { ArrowBigUp, CornerDownLeft, Loader2 } from 'lucide-react';\nimport { type FC } from 'react';\n\nimport Button from '@/base-ui/Button';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport type { ChatSendButtonProps } from '../type';\n\nconst ChatSendButton: FC<ChatSendButtonProps> = ({\n  ref,\n  leftAddons,\n  rightAddons,\n  texts,\n  onSend,\n  loading,\n  onStop,\n  ...rest\n}) => {\n  return (\n    <Flexbox\n      horizontal\n      align={'end'}\n      distribution={'space-between'}\n      flex={'none'}\n      gap={8}\n      paddingInline={16}\n      ref={ref}\n      {...rest}\n    >\n      <Flexbox horizontal align={'center'} gap={8}>\n        {leftAddons}\n      </Flexbox>\n      <Flexbox horizontal align={'center'} gap={8}>\n        <Flexbox\n          horizontal\n          gap={4}\n          style={{ color: cssVar.colorTextDescription, fontSize: 12, marginRight: 12 }}\n        >\n          <Icon icon={CornerDownLeft} />\n          <span>{texts?.send || 'Send'}</span>\n          <span>/</span>\n          <Flexbox horizontal>\n            <Icon icon={ArrowBigUp} />\n            <Icon icon={CornerDownLeft} />\n          </Flexbox>\n          <span>{texts?.warp || 'Warp'}</span>\n        </Flexbox>\n        {rightAddons}\n        {loading ? (\n          <Button icon={loading && Loader2} onClick={onStop}>\n            {texts?.stop || 'Stop'}\n          </Button>\n        ) : (\n          <Button type={'primary'} onClick={onSend}>\n            {texts?.send || 'Send'}\n          </Button>\n        )}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nChatSendButton.displayName = 'ChatSendButton';\n\nexport default ChatSendButton;\n"],"mappings":";;;;;;;AAUA,MAAM,kBAA2C,EAC/C,KACA,YACA,aACA,OACA,QACA,SACA,QACA,GAAG,WACC;CACJ,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,cAAc;EACd,MAAM;EACN,KAAK;EACL,eAAe;EACV;EACL,GAAI;EARN,UAAA,CAUE,oBAACA,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,KAAK;GACvC,UAAA;EACM,CAAA,GACT,qBAACA,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,KAAK;GAA1C,UAAA;IACE,qBAACA,mBAAD;KACE,YAAA;KACA,KAAK;KACL,OAAO;MAAE,OAAO,OAAO;MAAsB,UAAU;MAAI,aAAa;KAAG;KAH7E,UAAA;MAKE,oBAAC,MAAD,EAAM,MAAM,eAAiB,CAAA;MAC7B,oBAAC,QAAD,EAAA,UAAO,OAAO,QAAQ,OAAa,CAAA;MACnC,oBAAC,QAAD,EAAA,UAAM,IAAO,CAAA;MACb,qBAACA,mBAAD;OAAS,YAAA;OAAT,UAAA,CACE,oBAAC,MAAD,EAAM,MAAM,WAAa,CAAA,GACzB,oBAAC,MAAD,EAAM,MAAM,eAAiB,CAAA,CACtB;;MACT,oBAAC,QAAD,EAAA,UAAO,OAAO,QAAQ,OAAa,CAAA;KAC5B;;IACR;IACA,UACC,oBAAC,QAAD;KAAQ,MAAM,WAAW;KAAS,SAAS;KACxC,UAAA,OAAO,QAAQ;IACV,CAAA,IAER,oBAAC,QAAD;KAAQ,MAAM;KAAW,SAAS;KAC/B,UAAA,OAAO,QAAQ;IACV,CAAA;GAEH;EACF,CAAA,CAAA;;AAEb;AAEA,eAAe,cAAc"}
+{"version":3,"file":"ChatSendButton.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatInputArea/components/ChatSendButton.tsx"],"sourcesContent":["import { ArrowBigUp, CornerDownLeft, Loader2 } from 'lucide-react';\nimport { type FC } from 'react';\n\nimport Button from '@/Button';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport type { ChatSendButtonProps } from '../type';\n\nconst ChatSendButton: FC<ChatSendButtonProps> = ({\n  ref,\n  leftAddons,\n  rightAddons,\n  texts,\n  onSend,\n  loading,\n  onStop,\n  ...rest\n}) => {\n  return (\n    <Flexbox\n      horizontal\n      align={'end'}\n      distribution={'space-between'}\n      flex={'none'}\n      gap={8}\n      paddingInline={16}\n      ref={ref}\n      {...rest}\n    >\n      <Flexbox horizontal align={'center'} gap={8}>\n        {leftAddons}\n      </Flexbox>\n      <Flexbox horizontal align={'center'} gap={8}>\n        <Flexbox\n          horizontal\n          gap={4}\n          style={{ color: cssVar.colorTextDescription, fontSize: 12, marginRight: 12 }}\n        >\n          <Icon icon={CornerDownLeft} />\n          <span>{texts?.send || 'Send'}</span>\n          <span>/</span>\n          <Flexbox horizontal>\n            <Icon icon={ArrowBigUp} />\n            <Icon icon={CornerDownLeft} />\n          </Flexbox>\n          <span>{texts?.warp || 'Warp'}</span>\n        </Flexbox>\n        {rightAddons}\n        {loading ? (\n          <Button icon={loading && Loader2} onClick={onStop}>\n            {texts?.stop || 'Stop'}\n          </Button>\n        ) : (\n          <Button type={'primary'} onClick={onSend}>\n            {texts?.send || 'Send'}\n          </Button>\n        )}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nChatSendButton.displayName = 'ChatSendButton';\n\nexport default ChatSendButton;\n"],"mappings":";;;;;;;AAUA,MAAM,kBAA2C,EAC/C,KACA,YACA,aACA,OACA,QACA,SACA,QACA,GAAG,WACC;CACJ,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,cAAc;EACd,MAAM;EACN,KAAK;EACL,eAAe;EACV;EACL,GAAI;EARN,UAAA,CAUE,oBAACA,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,KAAK;GACvC,UAAA;EACM,CAAA,GACT,qBAACA,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,KAAK;GAA1C,UAAA;IACE,qBAACA,mBAAD;KACE,YAAA;KACA,KAAK;KACL,OAAO;MAAE,OAAO,OAAO;MAAsB,UAAU;MAAI,aAAa;KAAG;KAH7E,UAAA;MAKE,oBAAC,MAAD,EAAM,MAAM,eAAiB,CAAA;MAC7B,oBAAC,QAAD,EAAA,UAAO,OAAO,QAAQ,OAAa,CAAA;MACnC,oBAAC,QAAD,EAAA,UAAM,IAAO,CAAA;MACb,qBAACA,mBAAD;OAAS,YAAA;OAAT,UAAA,CACE,oBAAC,MAAD,EAAM,MAAM,WAAa,CAAA,GACzB,oBAAC,MAAD,EAAM,MAAM,eAAiB,CAAA,CACtB;;MACT,oBAAC,QAAD,EAAA,UAAO,OAAO,QAAQ,OAAa,CAAA;KAC5B;;IACR;IACA,UACC,oBAAC,QAAD;KAAQ,MAAM,WAAW;KAAS,SAAS;KACxC,UAAA,OAAO,QAAQ;IACV,CAAA,IAER,oBAAC,QAAD;KAAQ,MAAM;KAAW,SAAS;KAC/B,UAAA,OAAO,QAAQ;IACV,CAAA;GAEH;EACF,CAAA,CAAA;;AAEb;AAEA,eAAe,cAAc"}

package/es/chat/ChatInputArea/style.mjs

@@ -1,54 +1,49 @@
-import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
-import { createStaticStyles, cx } from "antd-style";
 //#region src/chat/ChatInputArea/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => {
-	return {
-		container: css`
-      position: relative;
-
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-
-      height: 100%;
-      padding-block: 8px 12px;
-      padding-inline: 0;
-    `,
-		fullscreen: css`
-      position: absolute;
-      z-index: 10;
-      inset-block-end: 0;
-      inset-inline: 0;
-
-      background: ${cssVar.colorBgContainer};
-    `,
-		textarea: css`
-      align-items: stretch;
-
-      height: 100% !important;
-      padding-block: 0;
-      padding-inline: 8px;
-
-      line-height: 1.5;
-    `,
-		textareaContainer: css`
-      position: relative;
-      flex: 1;
-    `
-	};
-});
-const actionBarStyles = createStaticStyles(({ css }) => ({
-	left: cx(staticStylish.noScrollbar, css`
-      overflow: auto hidden;
-    `),
-	right: css``,
-	root: css`
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-  `
-}));
+const textareaClassName = "lobe-chat-input-area-textarea";
+const styles = {
+	container: {
+		kOIVth: "lb167g77z",
+		kg3NbH: "lbnjsko4",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		kGO01o: "lbsag5q8",
+		kLKAdn: "lb1y1aw1k",
+		kVAEAm: "lb1n2onr6",
+		kZKoxP: "lb5yr21d",
+		$$css: true
+	},
+	fullscreen: {
+		kkqhue: "lb17y0mx6",
+		kWkggS: "lb6yijhg",
+		krVfgx: "lb1ey2m1c",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lb1n327nk",
+		$$css: true
+	},
+	textareaContainer: {
+		kUk6DE: "lb98rzlu",
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	}
+};
+const actionBarStyles = {
+	left: {
+		kXHlph: "lbw2csxc",
+		kORKVm: "lb10wlt62",
+		kvPnhw: "lb1uowca5",
+		kOuLrU: "lbfk6m8",
+		kBM8BC: "lb1yqm8si",
+		kBDiHx: "lbjx87ck",
+		$$css: true
+	},
+	root: {
+		kVQacm: "lbb3r6kr",
+		kVAEAm: "lb1n2onr6",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	}
+};
 //#endregion
-export { actionBarStyles, styles };
+export { actionBarStyles, styles, textareaClassName };
 
 //# sourceMappingURL=style.mjs.map