@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/mdx/Cards/Card.mjs

@@ -1,61 +1,25 @@
 "use client";
 import A from "../../A/index.mjs";
-import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import Block from "../../Block/Block.mjs";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import Icon from "../../Icon/Icon.mjs";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import Img from "../../Img/index.mjs";
-import Tag from "../../base-ui/Tag/Tag.mjs";
+import Block from "../../Block/Block.mjs";
+import Tag from "../../Tag/Tag.mjs";
+import { cardMarker } from "./marker.stylex.mjs";
+import { styles } from "./style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createStaticStyles, cx } from "antd-style";
+import clsx$1 from "clsx";
+import * as stylex from "@stylexjs/stylex";
 //#region src/mdx/Cards/Card.tsx
-const styles = createStaticStyles(({ css, cssVar }) => {
-	return {
-		card: css`
-      --lobe-markdown-header-multiple: 0.2;
-      --lobe-markdown-margin-multiple: 1;
-
-      overflow: hidden;
-      height: 100%;
-      color: ${cssVar.colorText};
-
-      h3,
-      p {
-        margin-block: 0 !important;
-      }
-
-      p {
-        color: ${cssVar.colorTextDescription};
-        transition: color 0.2s ${cssVar.motionEaseInOut};
-      }
-
-      &:hover {
-        p {
-          color: ${cssVar.colorTextSecondary};
-        }
-
-        .mdx-card-icon {
-          opacity: 1;
-        }
-      }
-    `,
-		content: css`
-      width: 100%;
-      padding: 1.4em;
-    `,
-		icon: css`
-      margin-block: 0.1em;
-      opacity: 0.5;
-      transition: opacity 0.2s ${cssVar.motionEaseInOut};
-    `
-	};
-});
 const Card = ({ tag, tagColor = "blue", icon, title, desc, href, iconProps, className, image, variant = "filled", ...rest }) => {
 	return /* @__PURE__ */ jsx(A, {
 		href,
 		children: /* @__PURE__ */ jsxs(Block, {
 			clickable: true,
 			align: "flex-start",
-			className: cx(styles.card, className),
+			height: "100%",
+			...styleProps([styles.card, cardMarker], clsx$1("lobe-mdx-card", className)),
 			variant,
 			...rest,
 			children: [
@@ -71,11 +35,12 @@ const Card = ({ tag, tagColor = "blue", icon, title, desc, href, iconProps, clas
 				}),
 				tag && /* @__PURE__ */ jsx(FlexBasic_default, {
 					align: "flex-start",
-					className: styles.content,
+					padding: "1.4em",
 					style: {
 						paddingBottom: "0.2em",
 						paddingTop: "1.8em"
 					},
+					width: "100%",
 					children: /* @__PURE__ */ jsx(Tag, {
 						color: tagColor,
 						style: {
@@ -91,16 +56,20 @@ const Card = ({ tag, tagColor = "blue", icon, title, desc, href, iconProps, clas
 				/* @__PURE__ */ jsxs(FlexBasic_default, {
 					horizontal: true,
 					align: desc ? "flex-start" : "center",
-					className: styles.content,
 					gap: "0.75em",
+					padding: "1.4em",
+					width: "100%",
 					children: [!image && icon && /* @__PURE__ */ jsx(Icon, {
-						className: cx(styles.icon, "mdx-card-icon"),
+						...styleProps(styles.icon, "mdx-card-icon"),
 						icon,
 						size: { size: "1.5em" },
 						...iconProps
 					}), /* @__PURE__ */ jsxs(FlexBasic_default, {
 						gap: "0.2em",
-						children: [/* @__PURE__ */ jsx("h3", { children: title }), desc && /* @__PURE__ */ jsx("p", { children: desc })]
+						children: [/* @__PURE__ */ jsx("h3", { children: title }), desc && /* @__PURE__ */ jsx("p", {
+							...stylex.props(styles.desc),
+							children: desc
+						})]
 					})]
 				})
 			]

package/es/mdx/Cards/Card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","names":["Flexbox"],"sources":["../../../src/mdx/Cards/Card.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx } from 'antd-style';\nimport type { FC } from 'react';\n\nimport A from '@/A';\nimport Tag, { type TagProps } from '@/base-ui/Tag';\nimport Block, { type BlockProps } from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport Icon, { type IconProps } from '@/Icon';\nimport Img from '@/Img';\n\nconst styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    card: css`\n      --lobe-markdown-header-multiple: 0.2;\n      --lobe-markdown-margin-multiple: 1;\n\n      overflow: hidden;\n      height: 100%;\n      color: ${cssVar.colorText};\n\n      h3,\n      p {\n        margin-block: 0 !important;\n      }\n\n      p {\n        color: ${cssVar.colorTextDescription};\n        transition: color 0.2s ${cssVar.motionEaseInOut};\n      }\n\n      &:hover {\n        p {\n          color: ${cssVar.colorTextSecondary};\n        }\n\n        .mdx-card-icon {\n          opacity: 1;\n        }\n      }\n    `,\n    content: css`\n      width: 100%;\n      padding: 1.4em;\n    `,\n    icon: css`\n      margin-block: 0.1em;\n      opacity: 0.5;\n      transition: opacity 0.2s ${cssVar.motionEaseInOut};\n    `,\n  };\n});\n\nexport interface CardProps extends Omit<BlockProps, 'children'> {\n  desc?: string;\n  href?: string;\n  icon?: IconProps['icon'];\n  iconProps?: Omit<IconProps, 'icon'>;\n  image?: string;\n  tag?: string;\n  tagColor?: TagProps['color'];\n  title: string;\n}\n\nconst Card: FC<CardProps> = ({\n  tag,\n  tagColor = 'blue',\n  icon,\n  title,\n  desc,\n  href,\n  iconProps,\n  className,\n  image,\n  variant = 'filled',\n  ...rest\n}) => {\n  return (\n    <A href={href}>\n      <Block\n        clickable\n        align={'flex-start'}\n        className={cx(styles.card, className)}\n        variant={variant}\n        {...rest}\n      >\n        {image && (\n          <Img\n            alt={title}\n            height={100}\n            src={image}\n            style={{ height: 'auto', width: '100%' }}\n            width={250}\n          />\n        )}\n        {tag && (\n          <Flexbox\n            align={'flex-start'}\n            className={styles.content}\n            style={{ paddingBottom: '0.2em', paddingTop: '1.8em' }}\n          >\n            <Tag\n              color={tagColor}\n              style={{\n                borderRadius: '1em',\n                fontSize: '0.8em',\n                fontWeight: 500,\n                paddingBlock: '0.1em',\n                paddingInline: '0.6em',\n              }}\n            >\n              {tag}\n            </Tag>\n          </Flexbox>\n        )}\n        <Flexbox\n          horizontal\n          align={desc ? 'flex-start' : 'center'}\n          className={styles.content}\n          gap={'0.75em'}\n        >\n          {!image && icon && (\n            <Icon\n              className={cx(styles.icon, 'mdx-card-icon')}\n              icon={icon}\n              size={{ size: '1.5em' }}\n              {...iconProps}\n            />\n          )}\n          <Flexbox gap={'0.2em'}>\n            <h3>{title}</h3>\n            {desc && <p>{desc}</p>}\n          </Flexbox>\n        </Flexbox>\n      </Block>\n    </A>\n  );\n};\n\nCard.displayName = 'MdxCard';\n\nexport default Card;\n"],"mappings":";;;;;;;;;;AAYA,MAAM,SAAS,oBAAoB,EAAE,KAAK,aAAa;CACrD,OAAO;EACL,MAAM,GAAG;;;;;;eAME,OAAO,UAAU;;;;;;;;iBAQf,OAAO,qBAAqB;iCACZ,OAAO,gBAAgB;;;;;mBAKrC,OAAO,mBAAmB;;;;;;;;EAQzC,SAAS,GAAG;;;;EAIZ,MAAM,GAAG;;;iCAGoB,OAAO,gBAAgB;;CAEtD;AACF,CAAC;AAaD,MAAM,QAAuB,EAC3B,KACA,WAAW,QACX,MACA,OACA,MACA,MACA,WACA,WACA,OACA,UAAU,UACV,GAAG,WACC;CACJ,OACE,oBAAC,GAAD;EAAS;EACP,UAAA,qBAAC,OAAD;GACE,WAAA;GACA,OAAO;GACP,WAAW,GAAG,OAAO,MAAM,SAAS;GAC3B;GACT,GAAI;GALN,UAAA;IAOG,SACC,oBAAC,KAAD;KACE,KAAK;KACL,QAAQ;KACR,KAAK;KACL,OAAO;MAAE,QAAQ;MAAQ,OAAO;KAAO;KACvC,OAAO;IACR,CAAA;IAEF,OACC,oBAACA,mBAAD;KACE,OAAO;KACP,WAAW,OAAO;KAClB,OAAO;MAAE,eAAe;MAAS,YAAY;KAAQ;KAErD,UAAA,oBAAC,KAAD;MACE,OAAO;MACP,OAAO;OACL,cAAc;OACd,UAAU;OACV,YAAY;OACZ,cAAc;OACd,eAAe;MACjB;MAEC,UAAA;KACE,CAAA;IACE,CAAA;IAEX,qBAACA,mBAAD;KACE,YAAA;KACA,OAAO,OAAO,eAAe;KAC7B,WAAW,OAAO;KAClB,KAAK;KAJP,UAAA,CAMG,CAAC,SAAS,QACT,oBAAC,MAAD;MACE,WAAW,GAAG,OAAO,MAAM,eAAe;MACpC;MACN,MAAM,EAAE,MAAM,QAAQ;MACtB,GAAI;KACL,CAAA,GAEH,qBAACA,mBAAD;MAAS,KAAK;MAAd,UAAA,CACE,oBAAC,MAAD,EAAA,UAAK,MAAU,CAAA,GACd,QAAQ,oBAAC,KAAD,EAAA,UAAI,KAAQ,CAAA,CACd;KACF,CAAA,CAAA;;GACJ;;CACN,CAAA;AAEP;AAEA,KAAK,cAAc"}
+{"version":3,"file":"Card.mjs","names":["clsx","Flexbox"],"sources":["../../../src/mdx/Cards/Card.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport type { FC } from 'react';\n\nimport A from '@/A';\nimport Block, { type BlockProps } from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport Icon, { type IconProps } from '@/Icon';\nimport Img from '@/Img';\nimport { styleProps } from '@/styles/stylex/props';\nimport Tag, { type TagProps } from '@/Tag';\n\nimport { cardMarker } from './marker.stylex';\nimport { styles } from './style';\n\nexport interface CardProps extends Omit<BlockProps, 'children'> {\n  desc?: string;\n  href?: string;\n  icon?: IconProps['icon'];\n  iconProps?: Omit<IconProps, 'icon'>;\n  image?: string;\n  tag?: string;\n  tagColor?: TagProps['color'];\n  title: string;\n}\n\nconst Card: FC<CardProps> = ({\n  tag,\n  tagColor = 'blue',\n  icon,\n  title,\n  desc,\n  href,\n  iconProps,\n  className,\n  image,\n  variant = 'filled',\n  ...rest\n}) => {\n  return (\n    <A href={href}>\n      <Block\n        clickable\n        align={'flex-start'}\n        height={'100%'}\n        {...styleProps([styles.card, cardMarker], clsx('lobe-mdx-card', className))}\n        variant={variant}\n        {...rest}\n      >\n        {image && (\n          <Img\n            alt={title}\n            height={100}\n            src={image}\n            style={{ height: 'auto', width: '100%' }}\n            width={250}\n          />\n        )}\n        {tag && (\n          <Flexbox\n            align={'flex-start'}\n            padding={'1.4em'}\n            style={{ paddingBottom: '0.2em', paddingTop: '1.8em' }}\n            width={'100%'}\n          >\n            <Tag\n              color={tagColor}\n              style={{\n                borderRadius: '1em',\n                fontSize: '0.8em',\n                fontWeight: 500,\n                paddingBlock: '0.1em',\n                paddingInline: '0.6em',\n              }}\n            >\n              {tag}\n            </Tag>\n          </Flexbox>\n        )}\n        <Flexbox\n          horizontal\n          align={desc ? 'flex-start' : 'center'}\n          gap={'0.75em'}\n          padding={'1.4em'}\n          width={'100%'}\n        >\n          {!image && icon && (\n            <Icon\n              {...styleProps(styles.icon, 'mdx-card-icon')}\n              icon={icon}\n              size={{ size: '1.5em' }}\n              {...iconProps}\n            />\n          )}\n          <Flexbox gap={'0.2em'}>\n            <h3>{title}</h3>\n            {desc && <p {...stylex.props(styles.desc)}>{desc}</p>}\n          </Flexbox>\n        </Flexbox>\n      </Block>\n    </A>\n  );\n};\n\nCard.displayName = 'MdxCard';\n\nexport default Card;\n"],"mappings":";;;;;;;;;;;;;;AAyBA,MAAM,QAAuB,EAC3B,KACA,WAAW,QACX,MACA,OACA,MACA,MACA,WACA,WACA,OACA,UAAU,UACV,GAAG,WACC;CACJ,OAAO,oBAAC,GAAD;EAAS;EACZ,UAAA,qBAAC,OAAD;GAAO,WAAA;GAAU,OAAO;GAAc,QAAQ;GAAQ,GAAI,WAAW,CAAC,OAAO,MAAM,UAAU,GAAGA,OAAK,iBAAiB,SAAS,CAAC;GAAY;GAAS,GAAI;GAAzJ,UAAA;IACG,SAAS,oBAAC,KAAD;KAAK,KAAK;KAAO,QAAQ;KAAK,KAAK;KAAO,OAAO;MAC3D,QAAQ;MACR,OAAO;KACT;KAAG,OAAO;IAAM,CAAA;IACb,OAAO,oBAACC,mBAAD;KAAS,OAAO;KAAc,SAAS;KAAS,OAAO;MAC/D,eAAe;MACf,YAAY;KACd;KAAG,OAAO;KACJ,UAAA,oBAAC,KAAD;MAAK,OAAO;MAAU,OAAO;OAC/B,cAAc;OACd,UAAU;OACV,YAAY;OACZ,cAAc;OACd,eAAe;MACjB;MACO,UAAA;KACE,CAAA;IACE,CAAA;IACX,qBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO,OAAO,eAAe;KAAU,KAAK;KAAU,SAAS;KAAS,OAAO;KAAnG,UAAA,CACG,CAAC,SAAS,QAAQ,oBAAC,MAAD;MAAM,GAAI,WAAW,OAAO,MAAM,eAAe;MAAS;MAAM,MAAM,EACzF,MAAM,QACR;MAAG,GAAI;KAAY,CAAA,GACjB,qBAACA,mBAAD;MAAS,KAAK;MAAd,UAAA,CACE,oBAAC,MAAD,EAAA,UAAK,MAAU,CAAA,GACd,QAAQ,oBAAC,KAAD;OAAG,GAAI,OAAO,MAAM,OAAO,IAAI;OAAI,UAAA;MAAQ,CAAA,CAC7C;KACF,CAAA,CAAA;;GACJ;;CACN,CAAA;AACP;AACA,KAAK,cAAc"}

package/es/mdx/Cards/index.d.mts

@@ -2,8 +2,8 @@ import { GridProps } from "../../Grid/type.mjs";
 import "../../Grid/index.mjs";
 import { FC } from "react";
 //#region src/mdx/Cards/index.d.ts
-type CardsProps = GridProps;
+export type CardsProps = GridProps;
 declare const Cards: FC<CardsProps>;
 //#endregion
-export { CardsProps, Cards as default };
+export { Cards as default };
 //# sourceMappingURL=index.d.mts.map

package/es/mdx/Cards/index.mjs

@@ -1,12 +1,13 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import Grid from "../../Grid/Grid.mjs";
 import { styles } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import clsx$1 from "clsx";
 //#region src/mdx/Cards/index.tsx
 const Cards = ({ children, className, maxItemWidth = 250, rows = 3, ...rest }) => {
 	return /* @__PURE__ */ jsx(Grid, {
-		className: cx(styles.container, className),
+		...styleProps(styles.container, clsx$1("lobe-mdx-cards", className)),
 		maxItemWidth,
 		rows,
 		...rest,

package/es/mdx/Cards/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/mdx/Cards/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { FC } from 'react';\n\nimport Grid, { type GridProps } from '@/Grid';\n\nimport { styles } from './style';\n\nexport type CardsProps = GridProps;\n\nconst Cards: FC<CardsProps> = ({ children, className, maxItemWidth = 250, rows = 3, ...rest }) => {\n  return (\n    <Grid\n      className={cx(styles.container, className)}\n      maxItemWidth={maxItemWidth}\n      rows={rows}\n      {...rest}\n    >\n      {children}\n    </Grid>\n  );\n};\n\nCards.displayName = 'MdxCards';\n\nexport default Cards;\n"],"mappings":";;;;;;AAWA,MAAM,SAAyB,EAAE,UAAU,WAAW,eAAe,KAAK,OAAO,GAAG,GAAG,WAAW;CAChG,OACE,oBAAC,MAAD;EACE,WAAW,GAAG,OAAO,WAAW,SAAS;EAC3B;EACR;EACN,GAAI;EAEH;CACG,CAAA;AAEV;AAEA,MAAM,cAAc"}
+{"version":3,"file":"index.mjs","names":["clsx"],"sources":["../../../src/mdx/Cards/index.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport type { FC } from 'react';\n\nimport Grid, { type GridProps } from '@/Grid';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\n\nexport type CardsProps = GridProps;\n\nconst Cards: FC<CardsProps> = ({ children, className, maxItemWidth = 250, rows = 3, ...rest }) => {\n  return (\n    <Grid\n      {...styleProps(styles.container, clsx('lobe-mdx-cards', className))}\n      maxItemWidth={maxItemWidth}\n      rows={rows}\n      {...rest}\n    >\n      {children}\n    </Grid>\n  );\n};\n\nCards.displayName = 'MdxCards';\n\nexport default Cards;\n"],"mappings":";;;;;;;AAcA,MAAM,SAAyB,EAAE,UAAU,WAAW,eAAe,KAAK,OAAO,GAAG,GAAG,WAAW;CAChG,OACE,oBAAC,MAAD;EACE,GAAI,WAAW,OAAO,WAAWA,OAAK,kBAAkB,SAAS,CAAC;EACpD;EACR;EACN,GAAI;EAEH;CACG,CAAA;AAEV;AAEA,MAAM,cAAc"}

package/es/mdx/Cards/marker.stylex.mjs

@@ -0,0 +1,9 @@
+//#region src/mdx/Cards/marker.stylex.ts
+const cardMarker = {
+	lbtyc5dm: "lbtyc5dm",
+	$$css: true
+};
+//#endregion
+export { cardMarker };
+
+//# sourceMappingURL=marker.stylex.mjs.map

package/es/mdx/Cards/marker.stylex.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker.stylex.mjs","names":[],"sources":["../../../src/mdx/Cards/marker.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const cardMarker = stylex.defineMarker();\n"],"mappings":";AACA,MAAa,aAAa;CACxB,UAAU;CACV,OAAO;AACT"}

package/es/mdx/Cards/style.mjs

@@ -1,14 +1,28 @@
-import { createStaticStyles } from "antd-style";
 //#region src/mdx/Cards/style.ts
-const styles = createStaticStyles(({ css }) => {
-	return { container: css`
-      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
-
-      > div {
-        margin: 0 !important;
-      }
-    ` };
-});
+const styles = {
+	card: {
+		"--lobe-markdown-header-multiple": "lbxqwrrt",
+		"--lobe-markdown-margin-multiple": "lb3pag28",
+		kVQacm: "lbb3r6kr",
+		kMwMTN: "lb66ogz0",
+		$$css: true
+	},
+	container: {
+		kqGvvJ: "lb1ysyzoe",
+		$$css: true
+	},
+	desc: {
+		kmkexE: "lbsjt935",
+		kMwMTN: "lb19ppog9 lb19akm1k",
+		$$css: true
+	},
+	icon: {
+		kqGvvJ: "lb96m7kw",
+		kmkexE: "lb1siopqw",
+		kSiTet: "lbbyyjgo lbbneekf",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

package/es/mdx/Cards/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/Cards/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    container: css`\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n\n      > div {\n        margin: 0 !important;\n      }\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,UAAU;CACpD,OAAO,EACL,WAAW,GAAG;;;;;;MAOhB;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/Cards/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { cardMarker } from './marker.stylex';\n\nexport const styles = stylex.create({\n  card: {\n    '--lobe-markdown-header-multiple': '0.2',\n    '--lobe-markdown-margin-multiple': 1,\n    'overflow': 'hidden',\n    'color': cssVar.colorText,\n  },\n  container: {\n    marginBlock: 'calc(var(--lobe-markdown-margin-multiple) * 1em)',\n  },\n  desc: {\n    transition: `color 0.2s ${cssVar.motionEaseInOut}`,\n    color: {\n      default: cssVar.colorTextDescription,\n      [stylex.when.ancestor(':hover', cardMarker)]: cssVar.colorTextSecondary,\n    },\n  },\n  icon: {\n    marginBlock: '0.1em',\n    transition: `opacity 0.2s ${cssVar.motionEaseInOut}`,\n    opacity: {\n      default: 0.5,\n      [stylex.when.ancestor(':hover', cardMarker)]: 1,\n    },\n  },\n});\n"],"mappings":";AAKA,MAAa,SAAS;CACpB,MAAM;EACJ,mCAAmC;EACnC,mCAAmC;EACnC,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/mdx/FileTree/File.d.mts

@@ -4,11 +4,11 @@ import { IconProps } from "../../Icon/type.mjs";
 import "../../Icon/index.mjs";
 import { FC } from "react";
 //#region src/mdx/FileTree/File.d.ts
-interface FileProps extends Omit<FlexboxProps, 'children'> {
+export interface FileProps extends Omit<FlexboxProps, 'children'> {
   icon?: IconProps['icon'];
   name: string;
 }
 declare const File: FC<FileProps>;
 //#endregion
-export { FileProps, File as default };
+export { File as default };
 //# sourceMappingURL=File.d.mts.map

package/es/mdx/FileTree/File.mjs

@@ -1,6 +1,6 @@
 "use client";
-import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import Icon from "../../Icon/Icon.mjs";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { FileIcon } from "lucide-react";
 //#region src/mdx/FileTree/File.tsx

package/es/mdx/FileTree/Folder.d.mts

@@ -4,12 +4,12 @@ import { IconProps } from "../../Icon/type.mjs";
 import "../../Icon/index.mjs";
 import { FC } from "react";
 //#region src/mdx/FileTree/Folder.d.ts
-interface FolderProps extends FlexboxProps {
+export interface FolderProps extends FlexboxProps {
   defaultOpen?: boolean;
   icon?: IconProps['icon'];
   name: string;
 }
 declare const Folder: FC<FolderProps>;
 //#endregion
-export { FolderProps, Folder as default };
+export { Folder as default };
 //# sourceMappingURL=Folder.d.mts.map

package/es/mdx/FileTree/Folder.mjs

@@ -1,9 +1,10 @@
 "use client";
-import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import Icon from "../../Icon/Icon.mjs";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import { styles } from "./style.mjs";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
 import { FolderIcon, FolderOpen } from "lucide-react";
 //#region src/mdx/FileTree/Folder.tsx
 const Folder$1 = ({ name, defaultOpen, icon = FolderIcon, children, ...rest }) => {
@@ -13,12 +14,12 @@ const Folder$1 = ({ name, defaultOpen, icon = FolderIcon, children, ...rest }) =
 		children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
 			horizontal: true,
 			align: "center",
-			className: styles.folder,
+			...stylex.props(styles.folder),
 			gap: 4,
 			onClick: () => setOpen(!open),
 			children: [/* @__PURE__ */ jsx(Icon, { icon: open ? FolderOpen : icon }), /* @__PURE__ */ jsx("span", { children: name })]
 		}), open && /* @__PURE__ */ jsx(FlexBasic_default, {
-			className: styles.folderChildren,
+			paddingInline: "1em 0",
 			children
 		})]
 	});

package/es/mdx/FileTree/Folder.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Folder.mjs","names":["Folder","Flexbox"],"sources":["../../../src/mdx/FileTree/Folder.tsx"],"sourcesContent":["'use client';\n\nimport { FolderIcon, FolderOpen } from 'lucide-react';\nimport { type FC, useState } from 'react';\n\nimport { Flexbox, type FlexboxProps } from '@/Flex';\nimport Icon, { type IconProps } from '@/Icon';\n\nimport { styles } from './style';\n\nexport interface FolderProps extends FlexboxProps {\n  defaultOpen?: boolean;\n  icon?: IconProps['icon'];\n  name: string;\n}\n\nconst Folder: FC<FolderProps> = ({ name, defaultOpen, icon = FolderIcon, children, ...rest }) => {\n  const [open, setOpen] = useState(defaultOpen);\n  return (\n    <Flexbox {...rest}>\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={styles.folder}\n        gap={4}\n        onClick={() => setOpen(!open)}\n      >\n        <Icon icon={open ? FolderOpen : icon} />\n        <span>{name}</span>\n      </Flexbox>\n      {open && <Flexbox className={styles.folderChildren}>{children}</Flexbox>}\n    </Flexbox>\n  );\n};\n\nFolder.displayName = 'MdxFolder';\n\nexport default Folder;\n"],"mappings":";;;;;;;;AAgBA,MAAMA,YAA2B,EAAE,MAAM,aAAa,OAAO,YAAY,UAAU,GAAG,WAAW;CAC/F,MAAM,CAAC,MAAM,WAAW,SAAS,WAAW;CAC5C,OACE,qBAACC,mBAAD;EAAS,GAAI;EAAb,UAAA,CACE,qBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAW,OAAO;GAClB,KAAK;GACL,eAAe,QAAQ,CAAC,IAAI;GAL9B,UAAA,CAOE,oBAAC,MAAD,EAAM,MAAM,OAAO,aAAa,KAAO,CAAA,GACvC,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,CACX;EACR,CAAA,GAAA,QAAQ,oBAACA,mBAAD;GAAS,WAAW,OAAO;GAAiB;EAAkB,CAAA,CAChE;;AAEb;AAEA,SAAO,cAAc"}
+{"version":3,"file":"Folder.mjs","names":["Folder","Flexbox"],"sources":["../../../src/mdx/FileTree/Folder.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { FolderIcon, FolderOpen } from 'lucide-react';\nimport { type FC, useState } from 'react';\n\nimport { Flexbox, type FlexboxProps } from '@/Flex';\nimport Icon, { type IconProps } from '@/Icon';\n\nimport { styles } from './style';\n\nexport interface FolderProps extends FlexboxProps {\n  defaultOpen?: boolean;\n  icon?: IconProps['icon'];\n  name: string;\n}\n\nconst Folder: FC<FolderProps> = ({ name, defaultOpen, icon = FolderIcon, children, ...rest }) => {\n  const [open, setOpen] = useState(defaultOpen);\n  return (\n    <Flexbox {...rest}>\n      <Flexbox\n        horizontal\n        align={'center'}\n        {...stylex.props(styles.folder)}\n        gap={4}\n        onClick={() => setOpen(!open)}\n      >\n        <Icon icon={open ? FolderOpen : icon} />\n        <span>{name}</span>\n      </Flexbox>\n      {open && <Flexbox paddingInline={'1em 0'}>{children}</Flexbox>}\n    </Flexbox>\n  );\n};\n\nFolder.displayName = 'MdxFolder';\n\nexport default Folder;\n"],"mappings":";;;;;;;;;AAaA,MAAMA,YAA2B,EAC/B,MACA,aACA,OAAO,YACP,UACA,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,WAAW;CAC5C,OAAO,qBAACC,mBAAD;EAAS,GAAI;EAAb,UAAA,CACH,qBAACA,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,GAAI,OAAO,MAAM,OAAO,MAAM;GAAG,KAAK;GAAG,eAAe,QAAQ,CAAC,IAAI;GAA1G,UAAA,CACE,oBAAC,MAAD,EAAM,MAAM,OAAO,aAAa,KAAO,CAAA,GACvC,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,CACX;EACR,CAAA,GAAA,QAAQ,oBAACA,mBAAD;GAAS,eAAe;GAAU;EAAkB,CAAA,CACtD;;AACb;AACA,SAAO,cAAc"}

package/es/mdx/FileTree/index.d.mts

@@ -1,8 +1,8 @@
 import { DivProps } from "../../types/index.mjs";
 import { FC } from "react";
 //#region src/mdx/FileTree/index.d.ts
-type FileTreeProps = DivProps;
+export type FileTreeProps = DivProps;
 declare const FileTree: FC<FileTreeProps>;
 //#endregion
-export { FileTreeProps, FileTree as default };
+export { FileTree as default };
 //# sourceMappingURL=index.d.mts.map

package/es/mdx/FileTree/index.mjs

@@ -1,11 +1,11 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import { styles } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
 //#region src/mdx/FileTree/index.tsx
 const FileTree = ({ children, className, ...rest }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx(styles.container, className),
+		...styleProps(styles.container, className),
 		...rest,
 		children
 	});

package/es/mdx/FileTree/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/mdx/FileTree/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { FC } from 'react';\n\nimport type { DivProps } from '@/types';\n\nimport { styles } from './style';\n\nexport type FileTreeProps = DivProps;\n\nconst FileTree: FC<FileTreeProps> = ({ children, className, ...rest }) => {\n  return (\n    <div className={cx(styles.container, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nFileTree.displayName = 'MdxFileTree';\n\nexport default FileTree;\n"],"mappings":";;;;;AAWA,MAAM,YAA+B,EAAE,UAAU,WAAW,GAAG,WAAW;CACxE,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,WAAW,SAAS;EAAG,GAAI;EAClD;CACE,CAAA;AAET;AAEA,SAAS,cAAc"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/mdx/FileTree/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport type { DivProps } from '@/types';\n\nimport { styles } from './style';\n\nexport type FileTreeProps = DivProps;\n\nconst FileTree: FC<FileTreeProps> = ({ children, className, ...rest }) => {\n  return (\n    <div {...styleProps(styles.container, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nFileTree.displayName = 'MdxFileTree';\n\nexport default FileTree;\n"],"mappings":";;;;;AAWA,MAAM,YAA+B,EAAE,UAAU,WAAW,GAAG,WAAW;CACxE,OACE,oBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,WAAW,SAAS;EAAG,GAAI;EACnD;CACE,CAAA;AAET;AAEA,SAAS,cAAc"}

package/es/mdx/FileTree/style.mjs

@@ -1,29 +1,20 @@
-import { createStaticStyles } from "antd-style";
 //#region src/mdx/FileTree/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => {
-	return {
-		container: css`
-      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
-      padding-block: 0.75em;
-      padding-inline: 1em;
-      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);
-
-      color: ${cssVar.colorTextSecondary};
-
-      box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);
-    `,
-		folder: css`
-      cursor: pointer;
-
-      &:hover {
-        color: ${cssVar.colorText};
-      }
-    `,
-		folderChildren: css`
-      padding-inline-start: 1em;
-    `
-	};
-});
+const styles = {
+	container: {
+		kaIpWk: "lb1wra11o",
+		kqGvvJ: "lb1ysyzoe",
+		k8WAf4: "lb73iojl",
+		kg3NbH: "lbf1a5up",
+		kGVxlE: "lb9j0ers",
+		kMwMTN: "lbc77et8",
+		$$css: true
+	},
+	folder: {
+		kMwMTN: "lb1bxu9lh",
+		kkrTdU: "lb1ypdohk",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

package/es/mdx/FileTree/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/FileTree/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    container: css`\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      padding-block: 0.75em;\n      padding-inline: 1em;\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n\n      color: ${cssVar.colorTextSecondary};\n\n      box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n    `,\n    folder: css`\n      cursor: pointer;\n\n      &:hover {\n        color: ${cssVar.colorText};\n      }\n    `,\n    folderChildren: css`\n      padding-inline-start: 1em;\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,WAAW,GAAG;;;;;;eAMH,OAAO,mBAAmB;;;;EAIrC,QAAQ,GAAG;;;;iBAIE,OAAO,UAAU;;;EAG9B,gBAAgB,GAAG;;;CAGrB;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/FileTree/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  container: {\n    borderRadius: 'calc(var(--lobe-markdown-border-radius) * 1px)',\n    marginBlock: 'calc(var(--lobe-markdown-margin-multiple) * 1em)',\n    paddingBlock: '0.75em',\n    paddingInline: '1em',\n    boxShadow: '0 0 0 1px var(--lobe-markdown-border-color)',\n    color: cssVar.colorTextSecondary,\n  },\n  folder: {\n    color: { 'default': null, ':hover': cssVar.colorText },\n    cursor: 'pointer',\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/mdx/Mdx/index.d.mts

@@ -3,7 +3,7 @@ import "../../Markdown/index.mjs";
 import { ReactNode } from "react";
 import { Pluggable } from "unified";
 //#region src/mdx/Mdx/index.d.ts
-interface MdxProps extends Omit<TypographyProps, 'children'> {
+export interface MdxProps extends Omit<TypographyProps, 'children'> {
   children: string;
   components?: any[];
   enableImageGallery?: boolean;
@@ -18,5 +18,5 @@ interface MdxProps extends Omit<TypographyProps, 'children'> {
 }
 declare const Mdx: import("react").NamedExoticComponent<MdxProps>;
 //#endregion
-export { MdxProps, Mdx as default };
+export { Mdx as default };
 //# sourceMappingURL=index.d.mts.map

package/es/mdx/Mdx/index.mjs

@@ -1,4 +1,5 @@
 "use client";
+import Alert from "../../Alert/Alert.mjs";
 import PreviewGroup from "../../Image/PreviewGroup.mjs";
 import { styles } from "../../Markdown/style.mjs";
 import Image from "../mdxComponents/Image.mjs";
@@ -6,12 +7,11 @@ import Video from "../mdxComponents/Video.mjs";
 import { useMarkdownContent } from "../../hooks/useMarkdown/useMarkdownContent.mjs";
 import { rehypeKatex } from "../../Markdown/plugins/rehypeKatex.mjs";
 import Typography from "../../Markdown/Typography.mjs";
-import Alert from "../../base-ui/Alert/Alert.mjs";
 import mdxComponents from "../mdxComponents/index.mjs";
 import CodeBlock from "../mdxComponents/CodeBlock.mjs";
 import { memo, useEffect, useMemo, useState } from "react";
 import jsxRuntime, { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import clsx$1 from "clsx";
 import { rehypeGithubAlerts } from "rehype-github-alerts";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
@@ -84,7 +84,7 @@ const Mdx = memo(({ children, className, style, fullFeaturedCodeBlock = true, en
 	]);
 	if (!escapedContent || !MDXContent) return fallback;
 	return /* @__PURE__ */ jsx(Typography, {
-		className: cx(enableLatex && styles.latex, isChatMode && styles.chat, className),
+		className: clsx$1(enableLatex && styles.latex, isChatMode && styles.chat, className),
 		"data-code-type": "mdx",
 		fontSize,
 		headerMultiple,

package/es/mdx/Mdx/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/mdx/Mdx/index.tsx"],"sourcesContent":["'use client';\n\nimport { evaluate } from '@mdx-js/mdx';\nimport { cx } from 'antd-style';\nimport { memo, type ReactNode, useEffect, useMemo, useState } from 'react';\nimport jsxDevRuntime from 'react/jsx-dev-runtime';\nimport jsxRuntime from 'react/jsx-runtime';\nimport { rehypeGithubAlerts } from 'rehype-github-alerts';\nimport remarkGfm from 'remark-gfm';\nimport remarkMath from 'remark-math';\nimport { type Pluggable } from 'unified';\n\nimport Alert from '@/base-ui/Alert';\nimport { useMarkdownContent } from '@/hooks/useMarkdown';\nimport { PreviewGroup } from '@/Image';\nimport { Typography, type TypographyProps } from '@/Markdown';\nimport { rehypeKatex } from '@/Markdown/plugins/rehypeKatex';\nimport { styles } from '@/Markdown/style';\n\nimport mdxComponents from '../mdxComponents';\nimport CodeBlock from '../mdxComponents/CodeBlock';\nimport Image from '../mdxComponents/Image';\nimport Video from '../mdxComponents/Video';\n\nconst runtime = process.env.NODE_ENV === 'production' ? jsxRuntime : jsxDevRuntime;\n\nexport interface MdxProps extends Omit<TypographyProps, 'children'> {\n  children: string;\n  components?: any[];\n  enableImageGallery?: boolean;\n  enableLatex?: boolean;\n  enableMermaid?: boolean;\n  fallback?: ReactNode;\n  fullFeaturedCodeBlock?: boolean;\n  onDoubleClick?: () => void;\n  rehypePlugins?: Pluggable[];\n  remarkPlugins?: Pluggable[];\n  variant?: 'normal' | 'chat';\n}\n\nconst Mdx = memo<MdxProps>(\n  ({\n    children,\n    className,\n    style,\n    fullFeaturedCodeBlock = true,\n    enableImageGallery,\n    enableLatex = true,\n    enableMermaid = true,\n    rehypePlugins,\n    remarkPlugins,\n    components = {},\n    fallback = null,\n    fontSize,\n    headerMultiple,\n    lineHeight,\n    marginMultiple,\n    variant,\n    ...rest\n  }) => {\n    const escapedContent = useMarkdownContent(children);\n\n    const isChatMode = variant === 'chat';\n\n    const [MDXContent, setMDXContent] = useState<any>(() => () => null);\n\n    const innerRehypePlugins = Array.isArray(rehypePlugins) ? rehypePlugins : [rehypePlugins];\n    const memoRehypePlugins = useMemo(\n      () =>\n        [rehypeGithubAlerts, enableLatex && rehypeKatex, ...innerRehypePlugins].filter(\n          Boolean,\n        ) as any,\n      [enableLatex, ...innerRehypePlugins],\n    );\n\n    const innerRemarkPlugins = Array.isArray(remarkPlugins) ? remarkPlugins : [remarkPlugins];\n    const memoRemarkPlugins = useMemo(\n      () => [remarkGfm, enableLatex && remarkMath, ...innerRemarkPlugins].filter(Boolean) as any,\n      [enableLatex, ...innerRemarkPlugins],\n    );\n\n    const memoComponents = useMemo(() => {\n      const list: any = {};\n      Object.entries({\n        ...mdxComponents,\n        img: Image,\n        pre: (props: any) => (\n          <CodeBlock\n            {...props}\n            enableMermaid={enableMermaid}\n            fullFeatured={fullFeaturedCodeBlock}\n          />\n        ),\n        video: Video,\n        ...components,\n      }).forEach(([key, Render]: any) => {\n        list[key] = (props: any) => <Render {...props} />;\n      });\n      return list;\n    }, [components, enableMermaid, fullFeaturedCodeBlock]);\n\n    useEffect(() => {\n      if (!escapedContent) return;\n      (async () => {\n        try {\n          const { default: Content } = await evaluate(escapedContent, {\n            ...runtime,\n            development: process.env.NODE_ENV !== 'production',\n            rehypePlugins: memoRehypePlugins,\n            remarkPlugins: memoRemarkPlugins,\n          });\n          setMDXContent(() => Content);\n        } catch (error: any) {\n          // @ts-ignore\n          setMDXContent(() => () => (\n            <Alert\n              description={String(error?.message as string)}\n              title={'Error compiling MDX'}\n              type=\"error\"\n              style={{\n                width: '100%',\n              }}\n            />\n          ));\n          console.error('Error compiling MDX:', error);\n        }\n      })();\n    }, [escapedContent, memoRehypePlugins, memoRemarkPlugins]);\n\n    if (!escapedContent || !MDXContent) return fallback;\n\n    return (\n      <Typography\n        className={cx(enableLatex && styles.latex, isChatMode && styles.chat, className)}\n        data-code-type=\"mdx\"\n        fontSize={fontSize}\n        headerMultiple={headerMultiple}\n        lineHeight={lineHeight}\n        marginMultiple={marginMultiple}\n        style={style}\n        {...rest}\n      >\n        <PreviewGroup enable={enableImageGallery}>\n          <MDXContent components={memoComponents} />\n        </PreviewGroup>\n      </Typography>\n    );\n  },\n);\n\nMdx.displayName = 'Mdx';\n\nexport default Mdx;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,UAAU,QAAQ,IAAI,aAAa,eAAe,aAAa;AAgBrE,MAAM,MAAM,MACT,EACC,UACA,WACA,OACA,wBAAwB,MACxB,oBACA,cAAc,MACd,gBAAgB,MAChB,eACA,eACA,aAAa,CAAC,GACd,WAAW,MACX,UACA,gBACA,YACA,gBACA,SACA,GAAG,WACC;CACJ,MAAM,iBAAiB,mBAAmB,QAAQ;CAElD,MAAM,aAAa,YAAY;CAE/B,MAAM,CAAC,YAAY,iBAAiB,qBAA0B,IAAI;CAElE,MAAM,qBAAqB,MAAM,QAAQ,aAAa,IAAI,gBAAgB,CAAC,aAAa;CACxF,MAAM,oBAAoB,cAEtB;EAAC;EAAoB,eAAe;EAAa,GAAG;CAAkB,CAAC,CAAC,OACtE,OACF,GACF,CAAC,aAAa,GAAG,kBAAkB,CACrC;CAEA,MAAM,qBAAqB,MAAM,QAAQ,aAAa,IAAI,gBAAgB,CAAC,aAAa;CACxF,MAAM,oBAAoB,cAClB;EAAC;EAAW,eAAe;EAAY,GAAG;CAAkB,CAAC,CAAC,OAAO,OAAO,GAClF,CAAC,aAAa,GAAG,kBAAkB,CACrC;CAEA,MAAM,iBAAiB,cAAc;EACnC,MAAM,OAAY,CAAC;EACnB,OAAO,QAAQ;GACb,GAAG;GACH,KAAK;GACL,MAAM,UACJ,oBAAC,WAAD;IACE,GAAI;IACW;IACf,cAAc;GACf,CAAA;GAEH,OAAO;GACP,GAAG;EACL,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,YAAiB;GACjC,KAAK,QAAQ,UAAe,oBAAC,QAAD,EAAQ,GAAI,MAAQ,CAAA;EAClD,CAAC;EACD,OAAO;CACT,GAAG;EAAC;EAAY;EAAe;CAAqB,CAAC;CAErD,gBAAgB;EACd,IAAI,CAAC,gBAAgB;EACrB,CAAC,YAAY;GACX,IAAI;IACF,MAAM,EAAE,SAAS,YAAY,MAAM,SAAS,gBAAgB;KAC1D,GAAG;KACH,aAAa,QAAQ,IAAI,aAAa;KACtC,eAAe;KACf,eAAe;IACjB,CAAC;IACD,oBAAoB,OAAO;GAC7B,SAAS,OAAY;IAEnB,0BACE,oBAAC,OAAD;KACE,aAAa,OAAO,OAAO,OAAiB;KAC5C,OAAO;KACP,MAAK;KACL,OAAO,EACL,OAAO,OACT;IACD,CAAA,CACF;IACD,QAAQ,MAAM,wBAAwB,KAAK;GAC7C;EACF,EAAA,CAAG;CACL,GAAG;EAAC;EAAgB;EAAmB;CAAiB,CAAC;CAEzD,IAAI,CAAC,kBAAkB,CAAC,YAAY,OAAO;CAE3C,OACE,oBAAC,YAAD;EACE,WAAW,GAAG,eAAe,OAAO,OAAO,cAAc,OAAO,MAAM,SAAS;EAC/E,kBAAe;EACL;EACM;EACJ;EACI;EACT;EACP,GAAI;EAEJ,UAAA,oBAAC,cAAD;GAAc,QAAQ;GACpB,UAAA,oBAAC,YAAD,EAAY,YAAY,eAAiB,CAAA;EAC7B,CAAA;CACJ,CAAA;AAEhB,CACF;AAEA,IAAI,cAAc"}
+{"version":3,"file":"index.mjs","names":["clsx"],"sources":["../../../src/mdx/Mdx/index.tsx"],"sourcesContent":["'use client';\n\nimport { evaluate } from '@mdx-js/mdx';\nimport clsx from 'clsx';\nimport { memo, type ReactNode, useEffect, useMemo, useState } from 'react';\nimport jsxDevRuntime from 'react/jsx-dev-runtime';\nimport jsxRuntime from 'react/jsx-runtime';\nimport { rehypeGithubAlerts } from 'rehype-github-alerts';\nimport remarkGfm from 'remark-gfm';\nimport remarkMath from 'remark-math';\nimport { type Pluggable } from 'unified';\n\nimport Alert from '@/Alert';\nimport { useMarkdownContent } from '@/hooks/useMarkdown';\nimport { PreviewGroup } from '@/Image';\nimport { Typography, type TypographyProps } from '@/Markdown';\nimport { rehypeKatex } from '@/Markdown/plugins/rehypeKatex';\nimport { styles } from '@/Markdown/style';\n\nimport mdxComponents from '../mdxComponents';\nimport CodeBlock from '../mdxComponents/CodeBlock';\nimport Image from '../mdxComponents/Image';\nimport Video from '../mdxComponents/Video';\n\nconst runtime = process.env.NODE_ENV === 'production' ? jsxRuntime : jsxDevRuntime;\n\nexport interface MdxProps extends Omit<TypographyProps, 'children'> {\n  children: string;\n  components?: any[];\n  enableImageGallery?: boolean;\n  enableLatex?: boolean;\n  enableMermaid?: boolean;\n  fallback?: ReactNode;\n  fullFeaturedCodeBlock?: boolean;\n  onDoubleClick?: () => void;\n  rehypePlugins?: Pluggable[];\n  remarkPlugins?: Pluggable[];\n  variant?: 'normal' | 'chat';\n}\n\nconst Mdx = memo<MdxProps>(\n  ({\n    children,\n    className,\n    style,\n    fullFeaturedCodeBlock = true,\n    enableImageGallery,\n    enableLatex = true,\n    enableMermaid = true,\n    rehypePlugins,\n    remarkPlugins,\n    components = {},\n    fallback = null,\n    fontSize,\n    headerMultiple,\n    lineHeight,\n    marginMultiple,\n    variant,\n    ...rest\n  }) => {\n    const escapedContent = useMarkdownContent(children);\n\n    const isChatMode = variant === 'chat';\n\n    const [MDXContent, setMDXContent] = useState<any>(() => () => null);\n\n    const innerRehypePlugins = Array.isArray(rehypePlugins) ? rehypePlugins : [rehypePlugins];\n    const memoRehypePlugins = useMemo(\n      () =>\n        [rehypeGithubAlerts, enableLatex && rehypeKatex, ...innerRehypePlugins].filter(\n          Boolean,\n        ) as any,\n      [enableLatex, ...innerRehypePlugins],\n    );\n\n    const innerRemarkPlugins = Array.isArray(remarkPlugins) ? remarkPlugins : [remarkPlugins];\n    const memoRemarkPlugins = useMemo(\n      () => [remarkGfm, enableLatex && remarkMath, ...innerRemarkPlugins].filter(Boolean) as any,\n      [enableLatex, ...innerRemarkPlugins],\n    );\n\n    const memoComponents = useMemo(() => {\n      const list: any = {};\n      Object.entries({\n        ...mdxComponents,\n        img: Image,\n        pre: (props: any) => (\n          <CodeBlock\n            {...props}\n            enableMermaid={enableMermaid}\n            fullFeatured={fullFeaturedCodeBlock}\n          />\n        ),\n        video: Video,\n        ...components,\n      }).forEach(([key, Render]: any) => {\n        list[key] = (props: any) => <Render {...props} />;\n      });\n      return list;\n    }, [components, enableMermaid, fullFeaturedCodeBlock]);\n\n    useEffect(() => {\n      if (!escapedContent) return;\n      (async () => {\n        try {\n          const { default: Content } = await evaluate(escapedContent, {\n            ...runtime,\n            development: process.env.NODE_ENV !== 'production',\n            rehypePlugins: memoRehypePlugins,\n            remarkPlugins: memoRemarkPlugins,\n          });\n          setMDXContent(() => Content);\n        } catch (error: any) {\n          // @ts-ignore\n          setMDXContent(() => () => (\n            <Alert\n              description={String(error?.message as string)}\n              title={'Error compiling MDX'}\n              type=\"error\"\n              style={{\n                width: '100%',\n              }}\n            />\n          ));\n          console.error('Error compiling MDX:', error);\n        }\n      })();\n    }, [escapedContent, memoRehypePlugins, memoRemarkPlugins]);\n\n    if (!escapedContent || !MDXContent) return fallback;\n\n    return (\n      <Typography\n        className={clsx(enableLatex && styles.latex, isChatMode && styles.chat, className)}\n        data-code-type=\"mdx\"\n        fontSize={fontSize}\n        headerMultiple={headerMultiple}\n        lineHeight={lineHeight}\n        marginMultiple={marginMultiple}\n        style={style}\n        {...rest}\n      >\n        <PreviewGroup enable={enableImageGallery}>\n          <MDXContent components={memoComponents} />\n        </PreviewGroup>\n      </Typography>\n    );\n  },\n);\n\nMdx.displayName = 'Mdx';\n\nexport default Mdx;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,UAAU,QAAQ,IAAI,aAAa,eAAe,aAAa;AAgBrE,MAAM,MAAM,MACT,EACC,UACA,WACA,OACA,wBAAwB,MACxB,oBACA,cAAc,MACd,gBAAgB,MAChB,eACA,eACA,aAAa,CAAC,GACd,WAAW,MACX,UACA,gBACA,YACA,gBACA,SACA,GAAG,WACC;CACJ,MAAM,iBAAiB,mBAAmB,QAAQ;CAElD,MAAM,aAAa,YAAY;CAE/B,MAAM,CAAC,YAAY,iBAAiB,qBAA0B,IAAI;CAElE,MAAM,qBAAqB,MAAM,QAAQ,aAAa,IAAI,gBAAgB,CAAC,aAAa;CACxF,MAAM,oBAAoB,cAEtB;EAAC;EAAoB,eAAe;EAAa,GAAG;CAAkB,CAAC,CAAC,OACtE,OACF,GACF,CAAC,aAAa,GAAG,kBAAkB,CACrC;CAEA,MAAM,qBAAqB,MAAM,QAAQ,aAAa,IAAI,gBAAgB,CAAC,aAAa;CACxF,MAAM,oBAAoB,cAClB;EAAC;EAAW,eAAe;EAAY,GAAG;CAAkB,CAAC,CAAC,OAAO,OAAO,GAClF,CAAC,aAAa,GAAG,kBAAkB,CACrC;CAEA,MAAM,iBAAiB,cAAc;EACnC,MAAM,OAAY,CAAC;EACnB,OAAO,QAAQ;GACb,GAAG;GACH,KAAK;GACL,MAAM,UACJ,oBAAC,WAAD;IACE,GAAI;IACW;IACf,cAAc;GACf,CAAA;GAEH,OAAO;GACP,GAAG;EACL,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,YAAiB;GACjC,KAAK,QAAQ,UAAe,oBAAC,QAAD,EAAQ,GAAI,MAAQ,CAAA;EAClD,CAAC;EACD,OAAO;CACT,GAAG;EAAC;EAAY;EAAe;CAAqB,CAAC;CAErD,gBAAgB;EACd,IAAI,CAAC,gBAAgB;EACrB,CAAC,YAAY;GACX,IAAI;IACF,MAAM,EAAE,SAAS,YAAY,MAAM,SAAS,gBAAgB;KAC1D,GAAG;KACH,aAAa,QAAQ,IAAI,aAAa;KACtC,eAAe;KACf,eAAe;IACjB,CAAC;IACD,oBAAoB,OAAO;GAC7B,SAAS,OAAY;IAEnB,0BACE,oBAAC,OAAD;KACE,aAAa,OAAO,OAAO,OAAiB;KAC5C,OAAO;KACP,MAAK;KACL,OAAO,EACL,OAAO,OACT;IACD,CAAA,CACF;IACD,QAAQ,MAAM,wBAAwB,KAAK;GAC7C;EACF,EAAA,CAAG;CACL,GAAG;EAAC;EAAgB;EAAmB;CAAiB,CAAC;CAEzD,IAAI,CAAC,kBAAkB,CAAC,YAAY,OAAO;CAE3C,OACE,oBAAC,YAAD;EACE,WAAWA,OAAK,eAAe,OAAO,OAAO,cAAc,OAAO,MAAM,SAAS;EACjF,kBAAe;EACL;EACM;EACJ;EACI;EACT;EACP,GAAI;EAEJ,UAAA,oBAAC,cAAD;GAAc,QAAQ;GACpB,UAAA,oBAAC,YAAD,EAAY,YAAY,eAAiB,CAAA;EAC7B,CAAA;CACJ,CAAA;AAEhB,CACF;AAEA,IAAI,cAAc"}

package/es/mdx/Steps/index.mjs

@@ -1,11 +1,12 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import { styles } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import clsx$1 from "clsx";
 //#region src/mdx/Steps/index.tsx
 const Steps = ({ children, className, ...rest }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx(styles.container, className),
+		...styleProps(styles.container, clsx$1("lobe-mdx-steps", className)),
 		...rest,
 		children
 	});

package/es/mdx/Steps/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/mdx/Steps/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { FC } from 'react';\n\nimport type { DivProps } from '@/types';\n\nimport { styles } from './style';\n\nconst Steps: FC<DivProps> = ({ children, className, ...rest }) => {\n  return (\n    <div className={cx(styles.container, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nSteps.displayName = 'MdxSteps';\n\nexport default Steps;\n"],"mappings":";;;;;AASA,MAAM,SAAuB,EAAE,UAAU,WAAW,GAAG,WAAW;CAChE,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,WAAW,SAAS;EAAG,GAAI;EAClD;CACE,CAAA;AAET;AAEA,MAAM,cAAc"}
+{"version":3,"file":"index.mjs","names":["clsx"],"sources":["../../../src/mdx/Steps/index.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport type { FC } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport type { DivProps } from '@/types';\n\nimport { styles } from './style';\n\nconst Steps: FC<DivProps> = ({ children, className, ...rest }) => {\n  return (\n    <div {...styleProps(styles.container, clsx('lobe-mdx-steps', className))} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nSteps.displayName = 'MdxSteps';\n\nexport default Steps;\n"],"mappings":";;;;;;AAYA,MAAM,SAAuB,EAAE,UAAU,WAAW,GAAG,WAAW;CAChE,OACE,oBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,WAAWA,OAAK,kBAAkB,SAAS,CAAC;EAAG,GAAI;EAC3E;CACE,CAAA;AAET;AAEA,MAAM,cAAc"}

package/es/mdx/Steps/style.mjs

@@ -1,62 +1,20 @@
-import { createStaticStyles } from "antd-style";
 //#region src/mdx/Steps/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => {
-	return { container: css`
-      --lobe-markdown-header-multiple: 0.5;
-      --lobe-markdown-margin-multiple: 1;
-
-      position: relative;
-      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
-      padding-inline-start: 2.5em;
-
-      &::before {
-        content: '';
-
-        position: absolute;
-        inset-block-start: 0.25em;
-        inset-inline-start: 0.9em;
-
-        display: block;
-
-        width: 1px;
-        height: calc(100% - 0.5em);
-
-        background: ${cssVar.colorBorderSecondary};
-      }
-
-      h3 {
-        counter-increment: step;
-
-        &::before {
-          content: counter(step);
-
-          position: absolute;
-          z-index: 1;
-          inset-inline-start: 0;
-
-          display: inline-block;
-
-          width: 1.8em;
-          height: 1.8em;
-          margin-block-start: -0.05em;
-          border-radius: 9999px;
-
-          font-size: 0.8em;
-          font-weight: 500;
-          line-height: 1.8em;
-          color: ${cssVar.colorTextSecondary};
-          text-align: center;
-
-          background: ${cssVar.colorBgElevated};
-          box-shadow: 0 0 0 2px ${cssVar.colorBgLayout};
-        }
-
-        &:not(:first-child) {
-          margin-block-start: 2em;
-        }
-      }
-    ` };
-});
+const styles = { container: {
+	"--lobe-markdown-header-multiple": "lb1n5bq49",
+	"--lobe-markdown-margin-multiple": "lb3pag28",
+	kqGvvJ: "lb1ysyzoe",
+	kZCmMZ: "lb1bkqx2q",
+	kVAEAm: "lb1n2onr6",
+	kLkRvE: "lbv1378s",
+	kgeoSG: "lb1cpjm7i",
+	kP1sEF: "lb1fgarty",
+	k96MEf: "lb1s8iqwx",
+	kSJ0CW: "lb1322cx3",
+	kEoFBp: "lb1hmns74",
+	kgzTxl: "lblp2v1p",
+	kOlAkY: "lb1vgi0k",
+	$$css: true
+} };
 //#endregion
 export { styles };
 

package/es/mdx/Steps/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/Steps/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    container: css`\n      --lobe-markdown-header-multiple: 0.5;\n      --lobe-markdown-margin-multiple: 1;\n\n      position: relative;\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      padding-inline-start: 2.5em;\n\n      &::before {\n        content: '';\n\n        position: absolute;\n        inset-block-start: 0.25em;\n        inset-inline-start: 0.9em;\n\n        display: block;\n\n        width: 1px;\n        height: calc(100% - 0.5em);\n\n        background: ${cssVar.colorBorderSecondary};\n      }\n\n      h3 {\n        counter-increment: step;\n\n        &::before {\n          content: counter(step);\n\n          position: absolute;\n          z-index: 1;\n          inset-inline-start: 0;\n\n          display: inline-block;\n\n          width: 1.8em;\n          height: 1.8em;\n          margin-block-start: -0.05em;\n          border-radius: 9999px;\n\n          font-size: 0.8em;\n          font-weight: 500;\n          line-height: 1.8em;\n          color: ${cssVar.colorTextSecondary};\n          text-align: center;\n\n          background: ${cssVar.colorBgElevated};\n          box-shadow: 0 0 0 2px ${cssVar.colorBgLayout};\n        }\n\n        &:not(:first-child) {\n          margin-block-start: 2em;\n        }\n      }\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO,EACL,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;sBAoBI,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;mBAuB/B,OAAO,mBAAmB;;;wBAGrB,OAAO,gBAAgB;kCACb,OAAO,cAAc;;;;;;;MAQrD;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/Steps/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  container: {\n    '--lobe-markdown-header-multiple': '0.5',\n    '--lobe-markdown-margin-multiple': 1,\n    'marginBlock': 'calc(var(--lobe-markdown-margin-multiple) * 1em)',\n    'paddingInlineStart': '2.5em',\n    'position': 'relative',\n    '::before': {\n      backgroundColor: cssVar.colorBorderSecondary,\n      content: '\"\"',\n      display: 'block',\n      insetBlockStart: '0.25em',\n      insetInlineStart: '0.9em',\n      position: 'absolute',\n      height: 'calc(100% - 0.5em)',\n      width: 1,\n    },\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS,EACpB,WAAW;CACT,mCAAmC;CACnC,mCAAmC;CACnC,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF"}

package/es/mdx/Tabs/Tab.d.mts

@@ -1,8 +1,8 @@
 import { DivProps } from "../../types/index.mjs";
 import { FC } from "react";
 //#region src/mdx/Tabs/Tab.d.ts
-type TabProps = DivProps;
+export type TabProps = DivProps;
 declare const Tab: FC<TabProps>;
 //#endregion
-export { TabProps, Tab as default };
+export { Tab as default };
 //# sourceMappingURL=Tab.d.mts.map