@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/mdx/Tabs/Tab.mjs

@@ -1,13 +1,17 @@
 "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 * as stylex from "@stylexjs/stylex";
 //#region src/mdx/Tabs/Tab.tsx
 const Tab = ({ children, className, ...rest }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx(styles.body, className),
+		...styleProps(styles.body, className),
 		...rest,
-		children: /* @__PURE__ */ jsx("div", { children })
+		children: /* @__PURE__ */ jsx("div", {
+			...stylex.props(styles.inner),
+			children
+		})
 	});
 };
 Tab.displayName = "MdxTab";

package/es/mdx/Tabs/Tab.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.mjs","names":[],"sources":["../../../src/mdx/Tabs/Tab.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 TabProps = DivProps;\n\nconst Tab: FC<TabProps> = ({ children, className, ...rest }) => {\n  return (\n    <div className={cx(styles.body, className)} {...rest}>\n      <div>{children}</div>\n    </div>\n  );\n};\n\nTab.displayName = 'MdxTab';\n\nexport default Tab;\n"],"mappings":";;;;;AAWA,MAAM,OAAqB,EAAE,UAAU,WAAW,GAAG,WAAW;CAC9D,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,MAAM,SAAS;EAAG,GAAI;EAC9C,UAAA,oBAAC,OAAD,EAAM,SAAc,CAAA;CACjB,CAAA;AAET;AAEA,IAAI,cAAc"}
+{"version":3,"file":"Tab.mjs","names":[],"sources":["../../../src/mdx/Tabs/Tab.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\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 TabProps = DivProps;\n\nconst Tab: FC<TabProps> = ({ children, className, ...rest }) => {\n  return (\n    <div {...styleProps(styles.body, className)} {...rest}>\n      <div {...stylex.props(styles.inner)}>{children}</div>\n    </div>\n  );\n};\n\nTab.displayName = 'MdxTab';\n\nexport default Tab;\n"],"mappings":";;;;;;AAQA,MAAM,OAAqB,EACzB,UACA,WACA,GAAG,WACC;CACJ,OAAO,oBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,MAAM,SAAS;EAAG,GAAI;EACpD,UAAA,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,KAAK;GAAI;EAAc,CAAA;CACjD,CAAA;AACT;AACA,IAAI,cAAc"}

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

@@ -1,10 +1,10 @@
 import { FlexboxProps } from "../../Flex/type.mjs";
 import "../../Flex/index.mjs";
-import { TabsProps as TabsProps$1 } from "../../base-ui/Tabs/type.mjs";
-import "../../base-ui/Tabs/index.mjs";
+import { TabsProps as TabsProps$1 } from "../../Tabs/type.mjs";
+import "../../Tabs/index.mjs";
 import { FC, ReactNode } from "react";
 //#region src/mdx/Tabs/index.d.ts
-interface TabsProps extends Omit<FlexboxProps, 'children'> {
+export interface TabsProps extends Omit<FlexboxProps, 'children'> {
   children: ReactNode[];
   defaultIndex?: number | string;
   items: string[];
@@ -12,5 +12,5 @@ interface TabsProps extends Omit<FlexboxProps, 'children'> {
 }
 declare const Tabs: FC<TabsProps>;
 //#endregion
-export { TabsProps, Tabs as default };
+export { Tabs as default };
 //# sourceMappingURL=index.d.mts.map

package/es/mdx/Tabs/index.mjs

@@ -1,27 +1,45 @@
 "use client";
+import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import Tabs$1 from "../../base-ui/Tabs/Tabs.mjs";
-import { styles } from "./style.mjs";
+import Tabs$1 from "../../Tabs/Tabs.mjs";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
 //#region src/mdx/Tabs/index.tsx
+const tabsStyles = {
+	indicator: {
+		borderStartEndRadius: 3,
+		borderStartStartRadius: 3,
+		height: 3
+	},
+	list: {
+		boxShadow: "none",
+		gap: 8,
+		padding: 4
+	},
+	tab: {
+		borderRadius: cssVar.borderRadius,
+		fontSize: 14,
+		fontWeight: 400,
+		height: "auto",
+		lineHeight: "22px",
+		paddingBlock: 8,
+		paddingInline: 12,
+		transition: "background-color 100ms ease-out"
+	}
+};
 const Tabs = ({ defaultIndex = "0", items, children, className, tabNavProps = {}, ...rest }) => {
 	const { className: tabNavClassName, onChange, ...tabNavRest } = tabNavProps;
 	const [activeIndex, setActiveIndex] = useState(String(defaultIndex));
 	const index = Number(activeIndex);
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		className: cx(styles.container, className),
+		className,
 		...rest,
 		children: [/* @__PURE__ */ jsx(Tabs$1, {
 			activeKey: activeIndex,
-			className: cx(styles.header, tabNavClassName),
+			className: tabNavClassName,
+			classNames: { tab: "lobe-mdx-tabs-tab" },
+			styles: tabsStyles,
 			variant: "square",
-			classNames: {
-				indicator: styles.indicator,
-				list: styles.list,
-				tab: styles.tab
-			},
 			items: items.map((item, i) => ({
 				key: String(i),
 				label: item

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox","LobeTabs"],"sources":["../../../src/mdx/Tabs/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC, type ReactNode, useState } from 'react';\n\nimport LobeTabs, { type TabsProps as LobeTabsProps } from '@/base-ui/Tabs';\nimport { Flexbox, type FlexboxProps } from '@/Flex';\n\nimport { styles } from './style';\n\nexport interface TabsProps extends Omit<FlexboxProps, 'children'> {\n  children: ReactNode[];\n  defaultIndex?: number | string;\n  items: string[];\n  tabNavProps?: Partial<LobeTabsProps>;\n}\n\nconst Tabs: FC<TabsProps> = ({\n  defaultIndex = '0',\n  items,\n  children,\n  className,\n  tabNavProps = {},\n  ...rest\n}) => {\n  const { className: tabNavClassName, onChange, ...tabNavRest } = tabNavProps;\n  const [activeIndex, setActiveIndex] = useState<string>(String(defaultIndex));\n\n  const index = Number(activeIndex);\n\n  return (\n    <Flexbox className={cx(styles.container, className)} {...rest}>\n      <LobeTabs\n        activeKey={activeIndex}\n        className={cx(styles.header, tabNavClassName)}\n        variant={'square'}\n        classNames={{\n          indicator: styles.indicator,\n          list: styles.list,\n          tab: styles.tab,\n        }}\n        items={items.map((item, i) => ({\n          key: String(i),\n          label: item,\n        }))}\n        onChange={(v) => {\n          setActiveIndex(v);\n          onChange?.(v);\n        }}\n        {...tabNavRest}\n      />\n      {children?.[index] || ''}\n    </Flexbox>\n  );\n};\n\nexport default Tabs;\n"],"mappings":";;;;;;;;AAiBA,MAAM,QAAuB,EAC3B,eAAe,KACf,OACA,UACA,WACA,cAAc,CAAC,GACf,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,iBAAiB,UAAU,GAAG,eAAe;CAChE,MAAM,CAAC,aAAa,kBAAkB,SAAiB,OAAO,YAAY,CAAC;CAE3E,MAAM,QAAQ,OAAO,WAAW;CAEhC,OACE,qBAACA,mBAAD;EAAS,WAAW,GAAG,OAAO,WAAW,SAAS;EAAG,GAAI;EAAzD,UAAA,CACE,oBAACC,QAAD;GACE,WAAW;GACX,WAAW,GAAG,OAAO,QAAQ,eAAe;GAC5C,SAAS;GACT,YAAY;IACV,WAAW,OAAO;IAClB,MAAM,OAAO;IACb,KAAK,OAAO;GACd;GACA,OAAO,MAAM,KAAK,MAAM,OAAO;IAC7B,KAAK,OAAO,CAAC;IACb,OAAO;GACT,EAAE;GACF,WAAW,MAAM;IACf,eAAe,CAAC;IAChB,WAAW,CAAC;GACd;GACA,GAAI;EACL,CAAA,GACA,WAAW,UAAU,EACf;;AAEb"}
+{"version":3,"file":"index.mjs","names":["Flexbox","LobeTabs"],"sources":["../../../src/mdx/Tabs/index.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { type FC, type ReactNode, useState } from 'react';\n\nimport { Flexbox, type FlexboxProps } from '@/Flex';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport LobeTabs, { type TabsProps as LobeTabsProps, type TabsStyles } from '@/Tabs';\n\nexport interface TabsProps extends Omit<FlexboxProps, 'children'> {\n  children: ReactNode[];\n  defaultIndex?: number | string;\n  items: string[];\n  tabNavProps?: Partial<LobeTabsProps>;\n}\n\nconst tabsStyles: TabsStyles = {\n  indicator: { borderStartEndRadius: 3, borderStartStartRadius: 3, height: 3 },\n  list: { boxShadow: 'none', gap: 8, padding: 4 },\n  tab: {\n    borderRadius: cssVar.borderRadius,\n    fontSize: 14,\n    fontWeight: 400,\n    height: 'auto',\n    lineHeight: '22px',\n    paddingBlock: 8,\n    paddingInline: 12,\n    transition: 'background-color 100ms ease-out',\n  },\n};\n\nconst Tabs: FC<TabsProps> = ({\n  defaultIndex = '0',\n  items,\n  children,\n  className,\n  tabNavProps = {},\n  ...rest\n}) => {\n  const { className: tabNavClassName, onChange, ...tabNavRest } = tabNavProps;\n  const [activeIndex, setActiveIndex] = useState<string>(String(defaultIndex));\n\n  const index = Number(activeIndex);\n\n  return (\n    <Flexbox className={className} {...rest}>\n      <LobeTabs\n        activeKey={activeIndex}\n        className={tabNavClassName}\n        classNames={{ tab: 'lobe-mdx-tabs-tab' }}\n        styles={tabsStyles}\n        variant={'square'}\n        items={items.map((item, i) => ({\n          key: String(i),\n          label: item,\n        }))}\n        onChange={(v) => {\n          setActiveIndex(v);\n          onChange?.(v);\n        }}\n        {...tabNavRest}\n      />\n      {children?.[index] || ''}\n    </Flexbox>\n  );\n};\n\nexport default Tabs;\n"],"mappings":";;;;;;;AAiBA,MAAM,aAAyB;CAC7B,WAAW;EAAE,sBAAsB;EAAG,wBAAwB;EAAG,QAAQ;CAAE;CAC3E,MAAM;EAAE,WAAW;EAAQ,KAAK;EAAG,SAAS;CAAE;CAC9C,KAAK;EACH,cAAc,OAAO;EACrB,UAAU;EACV,YAAY;EACZ,QAAQ;EACR,YAAY;EACZ,cAAc;EACd,eAAe;EACf,YAAY;CACd;AACF;AAEA,MAAM,QAAuB,EAC3B,eAAe,KACf,OACA,UACA,WACA,cAAc,CAAC,GACf,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,iBAAiB,UAAU,GAAG,eAAe;CAChE,MAAM,CAAC,aAAa,kBAAkB,SAAiB,OAAO,YAAY,CAAC;CAE3E,MAAM,QAAQ,OAAO,WAAW;CAEhC,OACE,qBAACA,mBAAD;EAAoB;EAAW,GAAI;EAAnC,UAAA,CACE,oBAACC,QAAD;GACE,WAAW;GACX,WAAW;GACX,YAAY,EAAE,KAAK,oBAAoB;GACvC,QAAQ;GACR,SAAS;GACT,OAAO,MAAM,KAAK,MAAM,OAAO;IAC7B,KAAK,OAAO,CAAC;IACb,OAAO;GACT,EAAE;GACF,WAAW,MAAM;IACf,eAAe,CAAC;IAChB,WAAW,CAAC;GACd;GACA,GAAI;EACL,CAAA,GACA,WAAW,UAAU,EACf;;AAEb"}

package/es/mdx/Tabs/style.mjs

@@ -1,54 +1,14 @@
-import { createStaticStyles } from "antd-style";
 //#region src/mdx/Tabs/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => {
-	return {
-		body: css`
-      padding-inline: 1em;
-
-      > div {
-        margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
-      }
-    `,
-		container: css`
-      /* Container styles */
-    `,
-		header: css`
-      /* Header styles */
-    `,
-		indicator: css`
-      && {
-        height: 3px;
-        border-start-start-radius: 3px;
-        border-start-end-radius: 3px;
-      }
-    `,
-		list: css`
-      && {
-        gap: 8px;
-        padding: 4px;
-        box-shadow: none;
-      }
-    `,
-		tab: css`
-      && {
-        height: auto;
-        padding-block: 8px;
-        padding-inline: 12px;
-        border-radius: ${cssVar.borderRadius};
-
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 22px;
-
-        transition: background-color 100ms ease-out;
-      }
-
-      &&:hover:not([data-disabled]) {
-        background: ${cssVar.colorFillTertiary};
-      }
-    `
-	};
-});
+const styles = {
+	body: {
+		kg3NbH: "lbf1a5up",
+		$$css: true
+	},
+	inner: {
+		kqGvvJ: "lb1ysyzoe",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/Tabs/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    body: css`\n      padding-inline: 1em;\n\n      > div {\n        margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      }\n    `,\n    container: css`\n      /* Container styles */\n    `,\n    header: css`\n      /* Header styles */\n    `,\n    indicator: css`\n      && {\n        height: 3px;\n        border-start-start-radius: 3px;\n        border-start-end-radius: 3px;\n      }\n    `,\n    list: css`\n      && {\n        gap: 8px;\n        padding: 4px;\n        box-shadow: none;\n      }\n    `,\n    tab: css`\n      && {\n        height: auto;\n        padding-block: 8px;\n        padding-inline: 12px;\n        border-radius: ${cssVar.borderRadius};\n\n        font-size: 14px;\n        font-weight: 400;\n        line-height: 22px;\n\n        transition: background-color 100ms ease-out;\n      }\n\n      &&:hover:not([data-disabled]) {\n        background: ${cssVar.colorFillTertiary};\n      }\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,MAAM,GAAG;;;;;;;EAOT,WAAW,GAAG;;;EAGd,QAAQ,GAAG;;;EAGX,WAAW,GAAG;;;;;;;EAOd,MAAM,GAAG;;;;;;;EAOT,KAAK,GAAG;;;;;yBAKa,OAAO,aAAa;;;;;;;;;;sBAUvB,OAAO,kBAAkB;;;CAG7C;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/Tabs/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  body: {\n    paddingInline: '1em',\n  },\n  inner: {\n    marginBlock: 'calc(var(--lobe-markdown-margin-multiple) * 1em)',\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/mdx/mdxComponents/Citation/PopoverPanel.mjs

@@ -1,10 +1,12 @@
 "use client";
-import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
+import { styleProps } from "../../../styles/stylex/props.mjs";
 import Icon from "../../../Icon/Icon.mjs";
-import Popover from "../../../base-ui/Popover/Popover.mjs";
+import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
+import Popover from "../../../Popover/Popover.mjs";
 import { styles } from "./style.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
 import { ArrowRightIcon } from "lucide-react";
 //#region src/mdx/mdxComponents/Citation/PopoverPanel.tsx
 const PopoverPanel = ({ children, usePopover, title, alt, url }) => {
@@ -36,7 +38,7 @@ const PopoverPanel = ({ children, usePopover, title, alt, url }) => {
 			gap: 8,
 			children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
 				horizontal: true,
-				className: styles.link,
+				...styleProps(styles.link, "lobe-mdx-citation-link"),
 				gap: 12,
 				justify: "space-between",
 				onClick: () => {
@@ -53,7 +55,7 @@ const PopoverPanel = ({ children, usePopover, title, alt, url }) => {
 						style: { borderRadius: 4 },
 						width: 14
 					}), /* @__PURE__ */ jsx("span", {
-						className: styles.url,
+						...stylex.props(styles.url),
 						children: domain
 					})]
 				}), /* @__PURE__ */ jsx(Icon, { icon: ArrowRightIcon })]

package/es/mdx/mdxComponents/Citation/PopoverPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverPanel.mjs","names":["Flexbox"],"sources":["../../../../src/mdx/mdxComponents/Citation/PopoverPanel.tsx"],"sourcesContent":["'use client';\n\nimport { ArrowRightIcon } from 'lucide-react';\nimport { type FC, type ReactNode, useMemo } from 'react';\n\nimport Popover from '@/base-ui/Popover';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\n\ninterface PopoverPanelProps {\n  alt?: string;\n  children?: ReactNode;\n  title?: string;\n  url?: string;\n  usePopover?: boolean;\n}\n\nconst PopoverPanel: FC<PopoverPanelProps> = ({ children, usePopover, title, alt, url }) => {\n  const [displayTitle, domain, host] = useMemo(() => {\n    try {\n      const urlObj = new URL(url!);\n      const hostForUrl = urlObj.host;\n\n      let displayTitle = title;\n\n      if (title === url) {\n        displayTitle = '';\n      }\n\n      let domain = urlObj.hostname.replace('www.', '');\n      if (!displayTitle) domain = url!;\n\n      return [displayTitle, domain, hostForUrl];\n    } catch {\n      return [title, url, url];\n    }\n  }, [url, title]);\n\n  return usePopover && url ? (\n    <Popover\n      arrow={false}\n      trigger={'hover'}\n      content={\n        <Flexbox gap={8}>\n          <Flexbox\n            horizontal\n            className={styles.link}\n            gap={12}\n            justify={'space-between'}\n            onClick={() => {\n              window.open(url, '_blank');\n            }}\n          >\n            <Flexbox horizontal align={'center'} gap={4}>\n              <img\n                alt={alt || title || url}\n                height={14}\n                src={`https://icons.duckduckgo.com/ip3/${host}.ico`}\n                style={{ borderRadius: 4 }}\n                width={14}\n              />\n              <span className={styles.url}>{domain}</span>\n            </Flexbox>\n            <Icon icon={ArrowRightIcon} />\n          </Flexbox>\n          {displayTitle}\n        </Flexbox>\n      }\n    >\n      {children}\n    </Popover>\n  ) : (\n    children\n  );\n};\n\nPopoverPanel.displayName = 'MdxPopoverPanel';\n\nexport default PopoverPanel;\n"],"mappings":";;;;;;;;;AAmBA,MAAM,gBAAuC,EAAE,UAAU,YAAY,OAAO,KAAK,UAAU;CACzF,MAAM,CAAC,cAAc,QAAQ,QAAQ,cAAc;EACjD,IAAI;GACF,MAAM,SAAS,IAAI,IAAI,GAAI;GAC3B,MAAM,aAAa,OAAO;GAE1B,IAAI,eAAe;GAEnB,IAAI,UAAU,KACZ,eAAe;GAGjB,IAAI,SAAS,OAAO,SAAS,QAAQ,QAAQ,EAAE;GAC/C,IAAI,CAAC,cAAc,SAAS;GAE5B,OAAO;IAAC;IAAc;IAAQ;GAAU;EAC1C,QAAQ;GACN,OAAO;IAAC;IAAO;IAAK;GAAG;EACzB;CACF,GAAG,CAAC,KAAK,KAAK,CAAC;CAEf,OAAO,cAAc,MACnB,oBAAC,SAAD;EACE,OAAO;EACP,SAAS;EACT,SACE,qBAACA,mBAAD;GAAS,KAAK;GAAd,UAAA,CACE,qBAACA,mBAAD;IACE,YAAA;IACA,WAAW,OAAO;IAClB,KAAK;IACL,SAAS;IACT,eAAe;KACb,OAAO,KAAK,KAAK,QAAQ;IAC3B;IAPF,UAAA,CASE,qBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,KAAK;KAA1C,UAAA,CACE,oBAAC,OAAD;MACE,KAAK,OAAO,SAAS;MACrB,QAAQ;MACR,KAAK,oCAAoC,KAAK;MAC9C,OAAO,EAAE,cAAc,EAAE;MACzB,OAAO;KACR,CAAA,GACD,oBAAC,QAAD;MAAM,WAAW,OAAO;MAAM,UAAA;KAAa,CAAA,CACpC;IACT,CAAA,GAAA,oBAAC,MAAD,EAAM,MAAM,eAAiB,CAAA,CACtB;GACR,CAAA,GAAA,YACM;;EAGV;CACM,CAAA,IAET;AAEJ;AAEA,aAAa,cAAc"}
+{"version":3,"file":"PopoverPanel.mjs","names":["Flexbox"],"sources":["../../../../src/mdx/mdxComponents/Citation/PopoverPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { ArrowRightIcon } from 'lucide-react';\nimport { type FC, type ReactNode, useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Popover from '@/Popover';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\n\ninterface PopoverPanelProps {\n  alt?: string;\n  children?: ReactNode;\n  title?: string;\n  url?: string;\n  usePopover?: boolean;\n}\n\nconst PopoverPanel: FC<PopoverPanelProps> = ({ children, usePopover, title, alt, url }) => {\n  const [displayTitle, domain, host] = useMemo(() => {\n    try {\n      const urlObj = new URL(url!);\n      const hostForUrl = urlObj.host;\n\n      let displayTitle = title;\n\n      if (title === url) {\n        displayTitle = '';\n      }\n\n      let domain = urlObj.hostname.replace('www.', '');\n      if (!displayTitle) domain = url!;\n\n      return [displayTitle, domain, hostForUrl];\n    } catch {\n      return [title, url, url];\n    }\n  }, [url, title]);\n\n  return usePopover && url ? (\n    <Popover\n      arrow={false}\n      trigger={'hover'}\n      content={\n        <Flexbox gap={8}>\n          <Flexbox\n            horizontal\n            {...styleProps(styles.link, 'lobe-mdx-citation-link')}\n            gap={12}\n            justify={'space-between'}\n            onClick={() => {\n              window.open(url, '_blank');\n            }}\n          >\n            <Flexbox horizontal align={'center'} gap={4}>\n              <img\n                alt={alt || title || url}\n                height={14}\n                src={`https://icons.duckduckgo.com/ip3/${host}.ico`}\n                style={{ borderRadius: 4 }}\n                width={14}\n              />\n              <span {...stylex.props(styles.url)}>{domain}</span>\n            </Flexbox>\n            <Icon icon={ArrowRightIcon} />\n          </Flexbox>\n          {displayTitle}\n        </Flexbox>\n      }\n    >\n      {children}\n    </Popover>\n  ) : (\n    children\n  );\n};\n\nPopoverPanel.displayName = 'MdxPopoverPanel';\n\nexport default PopoverPanel;\n"],"mappings":";;;;;;;;;;;AAiBA,MAAM,gBAAuC,EAC3C,UACA,YACA,OACA,KACA,UACI;CACJ,MAAM,CAAC,cAAc,QAAQ,QAAQ,cAAc;EACjD,IAAI;GACF,MAAM,SAAS,IAAI,IAAI,GAAI;GAC3B,MAAM,aAAa,OAAO;GAC1B,IAAI,eAAe;GACnB,IAAI,UAAU,KACZ,eAAe;GAEjB,IAAI,SAAS,OAAO,SAAS,QAAQ,QAAQ,EAAE;GAC/C,IAAI,CAAC,cAAc,SAAS;GAC5B,OAAO;IAAC;IAAc;IAAQ;GAAU;EAC1C,QAAQ;GACN,OAAO;IAAC;IAAO;IAAK;GAAG;EACzB;CACF,GAAG,CAAC,KAAK,KAAK,CAAC;CACf,OAAO,cAAc,MAAM,oBAAC,SAAD;EAAS,OAAO;EAAO,SAAS;EAAS,SAAS,qBAACA,mBAAD;GAAS,KAAK;GAAd,UAAA,CACrE,qBAACA,mBAAD;IAAS,YAAA;IAAW,GAAI,WAAW,OAAO,MAAM,wBAAwB;IAAG,KAAK;IAAI,SAAS;IAAiB,eAAe;KACjI,OAAO,KAAK,KAAK,QAAQ;IAC3B;IAFM,UAAA,CAGE,qBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,KAAK;KAA1C,UAAA,CACE,oBAAC,OAAD;MAAK,KAAK,OAAO,SAAS;MAAK,QAAQ;MAAI,KAAK,oCAAoC,KAAK;MAAO,OAAO,EAC3G,cAAc,EAChB;MAAG,OAAO;KAAK,CAAA,GACT,oBAAC,QAAD;MAAM,GAAI,OAAO,MAAM,OAAO,GAAG;MAAI,UAAA;KAAa,CAAA,CAC3C;IACT,CAAA,GAAA,oBAAC,MAAD,EAAM,MAAM,eAAiB,CAAA,CACtB;GACR,CAAA,GAAA,YACM;;EACV;CACM,CAAA,IAAI;AACjB;AACA,aAAa,cAAc"}

package/es/mdx/mdxComponents/Citation/index.mjs

@@ -1,8 +1,8 @@
 "use client";
+import { styleProps } from "../../../styles/stylex/props.mjs";
 import { styles } from "./style.mjs";
 import PopoverPanel from "./PopoverPanel.mjs";
 import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
 import { isEmpty } from "es-toolkit/compat";
 //#region src/mdx/mdxComponents/Citation/index.tsx
 const Citation = ({ children, href, inSup, id, citationDetail }) => {
@@ -12,7 +12,7 @@ const Citation = ({ children, href, inSup, id, citationDetail }) => {
 		...citationDetail,
 		usePopover,
 		children: /* @__PURE__ */ jsx("span", {
-			className: styles.container,
+			...styleProps(styles.container, "lobe-mdx-citation"),
 			children: /* @__PURE__ */ jsx("a", {
 				"aria-describedby": "footnote-label",
 				"data-footnote-ref": "true",
@@ -28,7 +28,7 @@ const Citation = ({ children, href, inSup, id, citationDetail }) => {
 		...citationDetail,
 		usePopover,
 		children: /* @__PURE__ */ jsx("sup", {
-			className: cx(styles.container, styles.supContainer),
+			...styleProps([styles.container, styles.supContainer], "lobe-mdx-citation"),
 			children: url ? /* @__PURE__ */ jsx("a", {
 				"aria-describedby": "footnote-label",
 				"data-footnote-ref": true,

package/es/mdx/mdxComponents/Citation/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/mdx/mdxComponents/Citation/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { isEmpty } from 'es-toolkit/compat';\nimport type { FC, ReactNode } from 'react';\n\nimport PopoverPanel from '@/mdx/mdxComponents/Citation/PopoverPanel';\nimport type { CitationItem } from '@/types/citation';\n\nimport { styles } from './style';\n\ninterface CitationProps {\n  children?: ReactNode;\n  citationDetail?: CitationItem;\n  citations?: string[];\n  href?: string;\n  id: string;\n  inSup?: boolean;\n}\n\nconst Citation: FC<CitationProps> = ({ children, href, inSup, id, citationDetail }) => {\n  const usePopover = !isEmpty(citationDetail);\n  const url = citationDetail?.url || href;\n\n  // [^1] 格式类型\n  if (inSup) {\n    return (\n      <PopoverPanel {...citationDetail} usePopover={usePopover}>\n        <span className={styles.container}>\n          <a\n            aria-describedby=\"footnote-label\"\n            data-footnote-ref=\"true\"\n            href={url}\n            id={id}\n            rel=\"noreferrer\"\n            target={citationDetail?.url ? '_blank' : undefined}\n          >\n            {children}\n          </a>\n        </span>\n      </PopoverPanel>\n    );\n  }\n\n  return (\n    <PopoverPanel {...citationDetail} usePopover={usePopover}>\n      <sup className={cx(styles.container, styles.supContainer)}>\n        {url ? (\n          <a\n            aria-describedby=\"footnote-label\"\n            data-footnote-ref={true}\n            href={url}\n            rel=\"noreferrer\"\n            target={'_blank'}\n          >\n            {children}\n          </a>\n        ) : (\n          <span aria-describedby=\"footnote-label\" data-footnote-ref={true}>\n            {children}\n          </span>\n        )}\n      </sup>\n    </PopoverPanel>\n  );\n};\n\nCitation.displayName = 'MdxCitation';\n\nexport default Citation;\n"],"mappings":";;;;;;;AAoBA,MAAM,YAA+B,EAAE,UAAU,MAAM,OAAO,IAAI,qBAAqB;CACrF,MAAM,aAAa,CAAC,QAAQ,cAAc;CAC1C,MAAM,MAAM,gBAAgB,OAAO;CAGnC,IAAI,OACF,OACE,oBAAC,cAAD;EAAc,GAAI;EAA4B;EAC5C,UAAA,oBAAC,QAAD;GAAM,WAAW,OAAO;GACtB,UAAA,oBAAC,KAAD;IACE,oBAAiB;IACjB,qBAAkB;IAClB,MAAM;IACF;IACJ,KAAI;IACJ,QAAQ,gBAAgB,MAAM,WAAW,KAAA;IAExC;GACA,CAAA;EACC,CAAA;CACM,CAAA;CAIlB,OACE,oBAAC,cAAD;EAAc,GAAI;EAA4B;EAC5C,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,OAAO,WAAW,OAAO,YAAY;GACrD,UAAA,MACC,oBAAC,KAAD;IACE,oBAAiB;IACjB,qBAAmB;IACnB,MAAM;IACN,KAAI;IACJ,QAAQ;IAEP;GACA,CAAA,IAEH,oBAAC,QAAD;IAAM,oBAAiB;IAAiB,qBAAmB;IACxD;GACG,CAAA;EAEL,CAAA;CACO,CAAA;AAElB;AAEA,SAAS,cAAc"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/mdx/mdxComponents/Citation/index.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { isEmpty } from 'es-toolkit/compat';\nimport type { FC, ReactNode } from 'react';\n\nimport PopoverPanel from '@/mdx/mdxComponents/Citation/PopoverPanel';\nimport { styleProps } from '@/styles/stylex/props';\nimport type { CitationItem } from '@/types/citation';\n\nimport { styles } from './style';\n\ninterface CitationProps {\n  children?: ReactNode;\n  citationDetail?: CitationItem;\n  citations?: string[];\n  href?: string;\n  id: string;\n  inSup?: boolean;\n}\n\nconst Citation: FC<CitationProps> = ({ children, href, inSup, id, citationDetail }) => {\n  const usePopover = !isEmpty(citationDetail);\n  const url = citationDetail?.url || href;\n\n  // [^1] 格式类型\n  if (inSup) {\n    return (\n      <PopoverPanel {...citationDetail} usePopover={usePopover}>\n        <span {...styleProps(styles.container, 'lobe-mdx-citation')}>\n          <a\n            aria-describedby=\"footnote-label\"\n            data-footnote-ref=\"true\"\n            href={url}\n            id={id}\n            rel=\"noreferrer\"\n            target={citationDetail?.url ? '_blank' : undefined}\n          >\n            {children}\n          </a>\n        </span>\n      </PopoverPanel>\n    );\n  }\n\n  return (\n    <PopoverPanel {...citationDetail} usePopover={usePopover}>\n      <sup {...styleProps([styles.container, styles.supContainer], 'lobe-mdx-citation')}>\n        {url ? (\n          <a\n            aria-describedby=\"footnote-label\"\n            data-footnote-ref={true}\n            href={url}\n            rel=\"noreferrer\"\n            target={'_blank'}\n          >\n            {children}\n          </a>\n        ) : (\n          <span aria-describedby=\"footnote-label\" data-footnote-ref={true}>\n            {children}\n          </span>\n        )}\n      </sup>\n    </PopoverPanel>\n  );\n};\n\nCitation.displayName = 'MdxCitation';\n\nexport default Citation;\n"],"mappings":";;;;;;;AAsBA,MAAM,YAA+B,EAAE,UAAU,MAAM,OAAO,IAAI,qBAAqB;CACrF,MAAM,aAAa,CAAC,QAAQ,cAAc;CAC1C,MAAM,MAAM,gBAAgB,OAAO;CAGnC,IAAI,OACF,OACE,oBAAC,cAAD;EAAc,GAAI;EAA4B;EAC5C,UAAA,oBAAC,QAAD;GAAM,GAAI,WAAW,OAAO,WAAW,mBAAmB;GACxD,UAAA,oBAAC,KAAD;IACE,oBAAiB;IACjB,qBAAkB;IAClB,MAAM;IACF;IACJ,KAAI;IACJ,QAAQ,gBAAgB,MAAM,WAAW,KAAA;IAExC;GACA,CAAA;EACC,CAAA;CACM,CAAA;CAIlB,OACE,oBAAC,cAAD;EAAc,GAAI;EAA4B;EAC5C,UAAA,oBAAC,OAAD;GAAK,GAAI,WAAW,CAAC,OAAO,WAAW,OAAO,YAAY,GAAG,mBAAmB;GAC7E,UAAA,MACC,oBAAC,KAAD;IACE,oBAAiB;IACjB,qBAAmB;IACnB,MAAM;IACN,KAAI;IACJ,QAAQ;IAEP;GACA,CAAA,IAEH,oBAAC,QAAD;IAAM,oBAAiB;IAAiB,qBAAmB;IACxD;GACG,CAAA;EAEL,CAAA;CACO,CAAA;AAElB;AAEA,SAAS,cAAc"}

package/es/mdx/mdxComponents/Citation/style.mjs

@@ -1,37 +1,30 @@
-import { createStaticStyles } from "antd-style";
 //#region src/mdx/mdxComponents/Citation/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => ({
-	container: css`
-    display: inline-flex;
-    line-height: var(--lobe-markdown-line-height);
-    vertical-align: baseline;
-
-    a {
-      color: inherit;
-    }
-  `,
-	link: css`
-    cursor: pointer;
-    color: ${cssVar.colorTextSecondary};
-
-    :hover {
-      color: ${cssVar.colorText};
-    }
-  `,
-	supContainer: css`
-    vertical-align: super;
-  `,
-	url: css`
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-
-    max-width: 400px;
-
-    text-overflow: ellipsis;
-  `
-}));
+const styles = {
+	container: {
+		k1xSpc: "lb3nfvp2",
+		kLWn49: "lb6lc894",
+		kXLuUW: "lb11njtxf",
+		$$css: true
+	},
+	link: {
+		kMwMTN: "lbc77et8",
+		kkrTdU: "lb1ypdohk",
+		$$css: true
+	},
+	supContainer: {
+		kXLuUW: "lb1v0h343",
+		$$css: true
+	},
+	url: {
+		kVQacm: "lbb3r6kr",
+		kgKLqz: "lb1ua5tub",
+		kJFfOR: "lbh0615m",
+		k1xSpc: "lb104kibb",
+		kg5iWk: "lblyipyv",
+		ks0D6T: "lb1j9u4d2",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

package/es/mdx/mdxComponents/Citation/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../../src/mdx/mdxComponents/Citation/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  container: css`\n    display: inline-flex;\n    line-height: var(--lobe-markdown-line-height);\n    vertical-align: baseline;\n\n    a {\n      color: inherit;\n    }\n  `,\n  link: css`\n    cursor: pointer;\n    color: ${cssVar.colorTextSecondary};\n\n    :hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n  supContainer: css`\n    vertical-align: super;\n  `,\n  url: css`\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n\n    max-width: 400px;\n\n    text-overflow: ellipsis;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;;;;CASd,MAAM,GAAG;;aAEE,OAAO,mBAAmB;;;eAGxB,OAAO,UAAU;;;CAG9B,cAAc,GAAG;;;CAGjB,KAAK,GAAG;;;;;;;;;;AAUV,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../../src/mdx/mdxComponents/Citation/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    display: 'inline-flex',\n    lineHeight: 'var(--lobe-markdown-line-height)',\n    verticalAlign: 'baseline',\n  },\n  link: {\n    color: cssVar.colorTextSecondary,\n    cursor: 'pointer',\n  },\n  supContainer: {\n    verticalAlign: 'super',\n  },\n  url: {\n    overflow: 'hidden',\n    WebkitBoxOrient: 'vertical',\n    WebkitLineClamp: 1,\n    display: '-webkit-box',\n    textOverflow: 'ellipsis',\n    maxWidth: 400,\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/mdx/mdxComponents/Image.d.mts

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

package/es/mdx/mdxComponents/Link.d.mts

@@ -2,7 +2,7 @@ import { AProps } from "../../types/index.mjs";
 import { CitationItem } from "../../types/citation.mjs";
 import { FC } from "react";
 //#region src/mdx/mdxComponents/Link.d.ts
-interface LinkProps extends AProps {
+export interface LinkProps extends AProps {
   'aria-describedby'?: string;
   'citations'?: CitationItem[];
   'data-footnote-ref'?: boolean;
@@ -12,5 +12,5 @@ interface LinkProps extends AProps {
 }
 declare const Link: FC<LinkProps>;
 //#endregion
-export { LinkProps, Link as default };
+export { Link as default };
 //# sourceMappingURL=Link.d.mts.map

package/es/mdx/mdxComponents/Pre.d.mts

@@ -6,9 +6,9 @@ import { SnippetProps } from "../../Snippet/type.mjs";
 import "../../Snippet/index.mjs";
 import { FC } from "react";
 //#region src/mdx/mdxComponents/Pre.d.ts
-type PreProps = HighlighterProps;
-declare const Pre: FC<PreProps>;
-declare const PreSingleLine: FC<SnippetProps>;
+export type PreProps = HighlighterProps;
+export declare const Pre: FC<PreProps>;
+export declare const PreSingleLine: FC<SnippetProps>;
 //#endregion
-export { Pre, Pre as default, PreProps, PreSingleLine };
+export { Pre as default };
 //# sourceMappingURL=Pre.d.mts.map

package/es/mdx/mdxComponents/Pre.mjs

@@ -5,18 +5,12 @@ import HtmlPreview from "../../HtmlPreview/HtmlPreview.mjs";
 import Mermaid from "../../Mermaid/Mermaid.mjs";
 import Snippet from "../../Snippet/Snippet.mjs";
 import { jsx } from "react/jsx-runtime";
-import { createStaticStyles, cx } from "antd-style";
+import clsx$1 from "clsx";
 //#region src/mdx/mdxComponents/Pre.tsx
-const styles = createStaticStyles(({ css }) => ({ container: css`
-    overflow: hidden;
-    margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);
-    border-radius: calc(var(--lobe-markdown-border-radius) * 1px);
-    box-shadow: 0 0 0 1px var(--lobe-markdown-border-color) inset;
-  ` }));
 const Pre = ({ fullFeatured, fileName, allowChangeLanguage, language = FALLBACK_LANG, children, className, style, variant = "filled", icon, theme, ...rest }) => {
 	return /* @__PURE__ */ jsx(Highlighter, {
 		allowChangeLanguage,
-		className: cx(styles.container, className),
+		className: clsx$1("lobe-mdx-pre", className),
 		fileName,
 		fullFeatured,
 		icon,
@@ -30,7 +24,7 @@ const Pre = ({ fullFeatured, fileName, allowChangeLanguage, language = FALLBACK_
 };
 const PreSingleLine = ({ language = FALLBACK_LANG, children, className, style, variant = "filled", ...rest }) => {
 	return /* @__PURE__ */ jsx(Snippet, {
-		className: cx(styles.container, className),
+		className: clsx$1("lobe-mdx-pre", className),
 		"data-code-type": "highlighter",
 		language,
 		style,
@@ -42,7 +36,7 @@ const PreSingleLine = ({ language = FALLBACK_LANG, children, className, style, v
 const PreMermaid = ({ animated, fullFeatured, children, className, style, variant = "filled", theme, ...rest }) => {
 	return /* @__PURE__ */ jsx(Mermaid, {
 		animated,
-		className: cx(styles.container, className),
+		className: clsx$1("lobe-mdx-pre", className),
 		fullFeatured,
 		style,
 		theme,
@@ -54,7 +48,7 @@ const PreMermaid = ({ animated, fullFeatured, children, className, style, varian
 const PreHtmlPreview = ({ animated, fullFeatured, children, className, style, variant = "filled", theme, ...rest }) => {
 	return /* @__PURE__ */ jsx(HtmlPreview, {
 		animated,
-		className: cx(styles.container, className),
+		className: clsx$1("lobe-mdx-pre", className),
 		fullFeatured,
 		style,
 		theme,

package/es/mdx/mdxComponents/Pre.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pre.mjs","names":[],"sources":["../../../src/mdx/mdxComponents/Pre.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx } from 'antd-style';\nimport type { FC } from 'react';\n\nimport Highlighter, { type HighlighterProps } from '@/Highlighter';\nimport { FALLBACK_LANG } from '@/Highlighter/const';\nimport HtmlPreview, { type HtmlPreviewProps } from '@/HtmlPreview';\nimport Mermaid, { type MermaidProps } from '@/Mermaid';\nimport Snippet, { type SnippetProps } from '@/Snippet';\n\nconst styles = createStaticStyles(({ css }) => ({\n  container: css`\n    overflow: hidden;\n    margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n    border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n    box-shadow: 0 0 0 1px var(--lobe-markdown-border-color) inset;\n  `,\n}));\n\nexport type PreProps = HighlighterProps;\n\nexport const Pre: FC<PreProps> = ({\n  fullFeatured,\n  fileName,\n  allowChangeLanguage,\n  language = FALLBACK_LANG,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  icon,\n  theme,\n  ...rest\n}) => {\n  return (\n    <Highlighter\n      allowChangeLanguage={allowChangeLanguage}\n      className={cx(styles.container, className)}\n      fileName={fileName}\n      fullFeatured={fullFeatured}\n      icon={icon}\n      language={language}\n      style={style}\n      theme={theme}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Highlighter>\n  );\n};\n\nexport const PreSingleLine: FC<SnippetProps> = ({\n  language = FALLBACK_LANG,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  ...rest\n}) => {\n  return (\n    <Snippet\n      className={cx(styles.container, className)}\n      data-code-type=\"highlighter\"\n      language={language}\n      style={style}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Snippet>\n  );\n};\n\nexport const PreMermaid: FC<MermaidProps> = ({\n  animated,\n  fullFeatured,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  theme,\n  ...rest\n}) => {\n  return (\n    <Mermaid\n      animated={animated}\n      className={cx(styles.container, className)}\n      fullFeatured={fullFeatured}\n      style={style}\n      theme={theme}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Mermaid>\n  );\n};\n\nexport const PreHtmlPreview: FC<HtmlPreviewProps> = ({\n  animated,\n  fullFeatured,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  theme,\n  ...rest\n}) => {\n  return (\n    <HtmlPreview\n      animated={animated}\n      className={cx(styles.container, className)}\n      fullFeatured={fullFeatured}\n      style={style}\n      theme={theme}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </HtmlPreview>\n  );\n};\n\nPre.displayName = 'MdxPre';\n\nexport default Pre;\n"],"mappings":";;;;;;;;;AAWA,MAAM,SAAS,oBAAoB,EAAE,WAAW,EAC9C,WAAW,GAAG;;;;;IAMhB,EAAE;AAIF,MAAa,OAAqB,EAChC,cACA,UACA,qBACA,WAAW,eACX,UACA,WACA,OACA,UAAU,UACV,MACA,OACA,GAAG,WACC;CACJ,OACE,oBAAC,aAAD;EACuB;EACrB,WAAW,GAAG,OAAO,WAAW,SAAS;EAC/B;EACI;EACR;EACI;EACH;EACA;EACE;EACT,GAAI;EAEH;CACU,CAAA;AAEjB;AAEA,MAAa,iBAAmC,EAC9C,WAAW,eACX,UACA,WACA,OACA,UAAU,UACV,GAAG,WACC;CACJ,OACE,oBAAC,SAAD;EACE,WAAW,GAAG,OAAO,WAAW,SAAS;EACzC,kBAAe;EACL;EACH;EACE;EACT,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,MAAa,cAAgC,EAC3C,UACA,cACA,UACA,WACA,OACA,UAAU,UACV,OACA,GAAG,WACC;CACJ,OACE,oBAAC,SAAD;EACY;EACV,WAAW,GAAG,OAAO,WAAW,SAAS;EAC3B;EACP;EACA;EACE;EACT,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,MAAa,kBAAwC,EACnD,UACA,cACA,UACA,WACA,OACA,UAAU,UACV,OACA,GAAG,WACC;CACJ,OACE,oBAAC,aAAD;EACY;EACV,WAAW,GAAG,OAAO,WAAW,SAAS;EAC3B;EACP;EACA;EACE;EACT,GAAI;EAEH;CACU,CAAA;AAEjB;AAEA,IAAI,cAAc"}
+{"version":3,"file":"Pre.mjs","names":["clsx"],"sources":["../../../src/mdx/mdxComponents/Pre.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport type { FC } from 'react';\n\nimport Highlighter, { type HighlighterProps } from '@/Highlighter';\nimport { FALLBACK_LANG } from '@/Highlighter/const';\nimport HtmlPreview, { type HtmlPreviewProps } from '@/HtmlPreview';\nimport Mermaid, { type MermaidProps } from '@/Mermaid';\nimport Snippet, { type SnippetProps } from '@/Snippet';\n\nexport type PreProps = HighlighterProps;\n\nexport const Pre: FC<PreProps> = ({\n  fullFeatured,\n  fileName,\n  allowChangeLanguage,\n  language = FALLBACK_LANG,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  icon,\n  theme,\n  ...rest\n}) => {\n  return (\n    <Highlighter\n      allowChangeLanguage={allowChangeLanguage}\n      className={clsx('lobe-mdx-pre', className)}\n      fileName={fileName}\n      fullFeatured={fullFeatured}\n      icon={icon}\n      language={language}\n      style={style}\n      theme={theme}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Highlighter>\n  );\n};\n\nexport const PreSingleLine: FC<SnippetProps> = ({\n  language = FALLBACK_LANG,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  ...rest\n}) => {\n  return (\n    <Snippet\n      className={clsx('lobe-mdx-pre', className)}\n      data-code-type=\"highlighter\"\n      language={language}\n      style={style}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Snippet>\n  );\n};\n\nexport const PreMermaid: FC<MermaidProps> = ({\n  animated,\n  fullFeatured,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  theme,\n  ...rest\n}) => {\n  return (\n    <Mermaid\n      animated={animated}\n      className={clsx('lobe-mdx-pre', className)}\n      fullFeatured={fullFeatured}\n      style={style}\n      theme={theme}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Mermaid>\n  );\n};\n\nexport const PreHtmlPreview: FC<HtmlPreviewProps> = ({\n  animated,\n  fullFeatured,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  theme,\n  ...rest\n}) => {\n  return (\n    <HtmlPreview\n      animated={animated}\n      className={clsx('lobe-mdx-pre', className)}\n      fullFeatured={fullFeatured}\n      style={style}\n      theme={theme}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </HtmlPreview>\n  );\n};\n\nPre.displayName = 'MdxPre';\n\nexport default Pre;\n"],"mappings":";;;;;;;;;AAeA,MAAa,OAAqB,EAChC,cACA,UACA,qBACA,WAAW,eACX,UACA,WACA,OACA,UAAU,UACV,MACA,OACA,GAAG,WACC;CACJ,OACE,oBAAC,aAAD;EACuB;EACrB,WAAWA,OAAK,gBAAgB,SAAS;EAC/B;EACI;EACR;EACI;EACH;EACA;EACE;EACT,GAAI;EAEH;CACU,CAAA;AAEjB;AAEA,MAAa,iBAAmC,EAC9C,WAAW,eACX,UACA,WACA,OACA,UAAU,UACV,GAAG,WACC;CACJ,OACE,oBAAC,SAAD;EACE,WAAWA,OAAK,gBAAgB,SAAS;EACzC,kBAAe;EACL;EACH;EACE;EACT,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,MAAa,cAAgC,EAC3C,UACA,cACA,UACA,WACA,OACA,UAAU,UACV,OACA,GAAG,WACC;CACJ,OACE,oBAAC,SAAD;EACY;EACV,WAAWA,OAAK,gBAAgB,SAAS;EAC3B;EACP;EACA;EACE;EACT,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,MAAa,kBAAwC,EACnD,UACA,cACA,UACA,WACA,OACA,UAAU,UACV,OACA,GAAG,WACC;CACJ,OACE,oBAAC,aAAD;EACY;EACV,WAAWA,OAAK,gBAAgB,SAAS;EAC3B;EACP;EACA;EACE;EACT,GAAI;EAEH;CACU,CAAA;AAEjB;AAEA,IAAI,cAAc"}

package/es/mdx/mdxComponents/Video.d.mts

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

package/es/mdx/mdxComponents/Video.mjs

@@ -2,9 +2,11 @@
 import Video$1 from "../../Video/index.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/mdx/mdxComponents/Video.tsx
-const Video = ({ style, ...rest }) => {
+const toLength = (value) => typeof value === "string" && /^\d+$/.test(value) ? Number(value) : value;
+const Video = ({ height, style, width, ...rest }) => {
 	return /* @__PURE__ */ jsx(Video$1, {
-		preview: false,
+		height: toLength(height),
+		width: toLength(width),
 		style: {
 			borderRadius: "calc(var(--lobe-markdown-border-radius) * 1px)",
 			marginBlock: "calc(var(--lobe-markdown-margin-multiple) * 1em)",
@@ -13,7 +15,7 @@ const Video = ({ style, ...rest }) => {
 		...rest
 	});
 };
-Video.displayName = "MdxVdieo";
+Video.displayName = "MdxVideo";
 //#endregion
 export { Video as default };
 

package/es/mdx/mdxComponents/Video.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Video.mjs","names":["LobeVideo"],"sources":["../../../src/mdx/mdxComponents/Video.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\n\nimport LobeVideo, { type VideoProps as LobeVideoProps } from '@/Video';\n\nexport type VideoProps = LobeVideoProps;\n\nconst Video: FC<VideoProps> = ({ style, ...rest }) => {\n  return (\n    <LobeVideo\n      preview={false}\n      style={{\n        borderRadius: 'calc(var(--lobe-markdown-border-radius) * 1px)',\n        marginBlock: 'calc(var(--lobe-markdown-margin-multiple) * 1em)',\n        ...style,\n      }}\n      {...rest}\n    />\n  );\n};\n\nVideo.displayName = 'MdxVdieo';\n\nexport default Video;\n"],"mappings":";;;;AAQA,MAAM,SAAyB,EAAE,OAAO,GAAG,WAAW;CACpD,OACE,oBAACA,SAAD;EACE,SAAS;EACT,OAAO;GACL,cAAc;GACd,aAAa;GACb,GAAG;EACL;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,cAAc"}
+{"version":3,"file":"Video.mjs","names":["LobeVideo"],"sources":["../../../src/mdx/mdxComponents/Video.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\n\nimport LobeVideo, { type VideoProps as LobeVideoProps } from '@/Video';\n\nexport type VideoProps = LobeVideoProps;\n\nconst toLength = (value?: number | string) =>\n  typeof value === 'string' && /^\\d+$/.test(value) ? Number(value) : value;\n\nconst Video: FC<VideoProps> = ({ height, style, width, ...rest }) => {\n  return (\n    <LobeVideo\n      height={toLength(height)}\n      width={toLength(width)}\n      style={{\n        borderRadius: 'calc(var(--lobe-markdown-border-radius) * 1px)',\n        marginBlock: 'calc(var(--lobe-markdown-margin-multiple) * 1em)',\n        ...style,\n      }}\n      {...rest}\n    />\n  );\n};\n\nVideo.displayName = 'MdxVideo';\n\nexport default Video;\n"],"mappings":";;;;AAQA,MAAM,YAAY,UAChB,OAAO,UAAU,YAAY,QAAQ,KAAK,KAAK,IAAI,OAAO,KAAK,IAAI;AAErE,MAAM,SAAyB,EAAE,QAAQ,OAAO,OAAO,GAAG,WAAW;CACnE,OACE,oBAACA,SAAD;EACE,QAAQ,SAAS,MAAM;EACvB,OAAO,SAAS,KAAK;EACrB,OAAO;GACL,cAAc;GACd,aAAa;GACb,GAAG;EACL;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,cAAc"}

package/es/mobile/ChatHeader/ChatHeader.mjs

@@ -1,33 +1,38 @@
 "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 SafeArea from "../SafeArea/SafeArea.mjs";
 import { styles } 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";
 import { ChevronLeft } from "lucide-react";
 //#region src/mobile/ChatHeader/ChatHeader.tsx
 const ChatHeader = memo(({ ref, className, safeArea = true, style, center, left, right, gaps, classNames, onBackClick, showBackButton, styles: custmStyles, children, ...rest }) => {
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		as: "header",
-		className: cx(styles.container, className),
+		flex: "none",
 		ref,
-		style,
+		width: "100vw",
+		...styleProps(styles.container, className, style),
 		...rest,
 		children: [safeArea && /* @__PURE__ */ jsx(SafeArea, { position: "top" }), /* @__PURE__ */ jsxs(FlexBasic_default, {
 			horizontal: true,
 			align: "center",
-			className: styles.inner,
 			flex: 1,
+			height: 44,
 			justify: "space-between",
+			paddingInline: 6,
+			...stylex.props(styles.inner),
 			children: [
 				/* @__PURE__ */ jsxs(FlexBasic_default, {
 					horizontal: true,
 					align: "center",
-					className: cx(styles.left, classNames?.left),
+					className: classNames?.left,
 					flex: 1,
 					gap: gaps?.left,
+					height: "100%",
 					style: custmStyles?.left,
 					children: [showBackButton && /* @__PURE__ */ jsx(ActionIcon, {
 						icon: ChevronLeft,
@@ -37,9 +42,10 @@ const ChatHeader = memo(({ ref, className, safeArea = true, style, center, left,
 				/* @__PURE__ */ jsxs(FlexBasic_default, {
 					horizontal: true,
 					align: "center",
-					className: cx(styles.center, classNames?.center),
+					className: classNames?.center,
 					flex: 1,
 					gap: gaps?.center,
+					height: "100%",
 					justify: "center",
 					style: custmStyles?.center,
 					children: [children, center]
@@ -47,9 +53,11 @@ const ChatHeader = memo(({ ref, className, safeArea = true, style, center, left,
 				/* @__PURE__ */ jsx(FlexBasic_default, {
 					horizontal: true,
 					align: "center",
-					className: cx(styles.right, classNames?.right),
+					className: classNames?.right,
 					flex: 1,
 					gap: gaps?.right,
+					height: "100%",
+					justify: "flex-end",
 					style: custmStyles?.right,
 					children: right
 				})

package/es/mobile/ChatHeader/ChatHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.mjs","names":["Flexbox","MobileSafeArea"],"sources":["../../../src/mobile/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';\nimport MobileSafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport type { ChatHeaderProps } from './type';\n\nconst ChatHeader = memo<ChatHeaderProps>(\n  ({\n    ref,\n    className,\n    safeArea = true,\n    style,\n    center,\n    left,\n    right,\n    gaps,\n    classNames,\n    onBackClick,\n    showBackButton,\n    styles: custmStyles,\n    children,\n    ...rest\n  }) => {\n    return (\n      <Flexbox\n        as={'header'}\n        className={cx(styles.container, className)}\n        ref={ref}\n        style={style}\n        {...rest}\n      >\n        {safeArea && <MobileSafeArea position={'top'} />}\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={styles.inner}\n          flex={1}\n          justify={'space-between'}\n        >\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={cx(styles.left, classNames?.left)}\n            flex={1}\n            gap={gaps?.left}\n            style={custmStyles?.left}\n          >\n            {showBackButton && <ActionIcon icon={ChevronLeft} onClick={() => onBackClick?.()} />}\n            {left}\n          </Flexbox>\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={cx(styles.center, classNames?.center)}\n            flex={1}\n            gap={gaps?.center}\n            justify={'center'}\n            style={custmStyles?.center}\n          >\n            {children}\n            {center}\n          </Flexbox>\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={cx(styles.right, classNames?.right)}\n            flex={1}\n            gap={gaps?.right}\n            style={custmStyles?.right}\n          >\n            {right}\n          </Flexbox>\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nChatHeader.displayName = 'ChatHeader';\n\nexport default ChatHeader;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,aAAa,MAChB,EACC,KACA,WACA,WAAW,MACX,OACA,QACA,MACA,OACA,MACA,YACA,aACA,gBACA,QAAQ,aACR,UACA,GAAG,WACC;CACJ,OACE,qBAACA,mBAAD;EACE,IAAI;EACJ,WAAW,GAAG,OAAO,WAAW,SAAS;EACpC;EACE;EACP,GAAI;EALN,UAAA,CAOG,YAAY,oBAACC,UAAD,EAAgB,UAAU,MAAQ,CAAA,GAC/C,qBAACD,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAW,OAAO;GAClB,MAAM;GACN,SAAS;GALX,UAAA;IAOE,qBAACA,mBAAD;KACE,YAAA;KACA,OAAO;KACP,WAAW,GAAG,OAAO,MAAM,YAAY,IAAI;KAC3C,MAAM;KACN,KAAK,MAAM;KACX,OAAO,aAAa;KANtB,UAAA,CAQG,kBAAkB,oBAAC,YAAD;MAAY,MAAM;MAAa,eAAe,cAAc;KAAI,CAAA,GAClF,IACM;;IACT,qBAACA,mBAAD;KACE,YAAA;KACA,OAAO;KACP,WAAW,GAAG,OAAO,QAAQ,YAAY,MAAM;KAC/C,MAAM;KACN,KAAK,MAAM;KACX,SAAS;KACT,OAAO,aAAa;KAPtB,UAAA,CASG,UACA,MACM;;IACT,oBAACA,mBAAD;KACE,YAAA;KACA,OAAO;KACP,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;KAC7C,MAAM;KACN,KAAK,MAAM;KACX,OAAO,aAAa;KAEnB,UAAA;IACM,CAAA;GACF;EACF,CAAA,CAAA;;AAEb,CACF;AAEA,WAAW,cAAc"}
+{"version":3,"file":"ChatHeader.mjs","names":["Flexbox","MobileSafeArea"],"sources":["../../../src/mobile/ChatHeader/ChatHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { ChevronLeft } from 'lucide-react';\nimport { memo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport MobileSafeArea from '@/mobile/SafeArea';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { ChatHeaderProps } from './type';\n\nconst ChatHeader = memo<ChatHeaderProps>(\n  ({\n    ref,\n    className,\n    safeArea = true,\n    style,\n    center,\n    left,\n    right,\n    gaps,\n    classNames,\n    onBackClick,\n    showBackButton,\n    styles: custmStyles,\n    children,\n    ...rest\n  }) => {\n    return (\n      <Flexbox\n        as={'header'}\n        flex={'none'}\n        ref={ref}\n        width={'100vw'}\n        {...styleProps(styles.container, className, style)}\n        {...rest}\n      >\n        {safeArea && <MobileSafeArea position={'top'} />}\n        <Flexbox\n          horizontal\n          align={'center'}\n          flex={1}\n          height={44}\n          justify={'space-between'}\n          paddingInline={6}\n          {...stylex.props(styles.inner)}\n        >\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={classNames?.left}\n            flex={1}\n            gap={gaps?.left}\n            height={'100%'}\n            style={custmStyles?.left}\n          >\n            {showBackButton && <ActionIcon icon={ChevronLeft} onClick={() => onBackClick?.()} />}\n            {left}\n          </Flexbox>\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={classNames?.center}\n            flex={1}\n            gap={gaps?.center}\n            height={'100%'}\n            justify={'center'}\n            style={custmStyles?.center}\n          >\n            {children}\n            {center}\n          </Flexbox>\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={classNames?.right}\n            flex={1}\n            gap={gaps?.right}\n            height={'100%'}\n            justify={'flex-end'}\n            style={custmStyles?.right}\n          >\n            {right}\n          </Flexbox>\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nChatHeader.displayName = 'ChatHeader';\n\nexport default ChatHeader;\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,aAAa,MAAuB,EACxC,KACA,WACA,WAAW,MACX,OACA,QACA,MACA,OACA,MACA,YACA,aACA,gBACA,QAAQ,aACR,UACA,GAAG,WACC;CACJ,OAAO,qBAACA,mBAAD;EAAS,IAAI;EAAU,MAAM;EAAa;EAAK,OAAO;EAAS,GAAI,WAAW,OAAO,WAAW,WAAW,KAAK;EAAG,GAAI;EAAvH,UAAA,CACA,YAAY,oBAACC,UAAD,EAAgB,UAAU,MAAQ,CAAA,GAC/C,qBAACD,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,MAAM;GAAG,QAAQ;GAAI,SAAS;GAAiB,eAAe;GAAG,GAAI,OAAO,MAAM,OAAO,KAAK;GAAnI,UAAA;IACE,qBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,WAAW,YAAY;KAAM,MAAM;KAAG,KAAK,MAAM;KAAM,QAAQ;KAAQ,OAAO,aAAa;KAAhI,UAAA,CACG,kBAAkB,oBAAC,YAAD;MAAY,MAAM;MAAa,eAAe,cAAc;KAAI,CAAA,GAClF,IACM;;IACT,qBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,WAAW,YAAY;KAAQ,MAAM;KAAG,KAAK,MAAM;KAAQ,QAAQ;KAAQ,SAAS;KAAU,OAAO,aAAa;KAAvJ,UAAA,CACG,UACA,MACM;;IACT,oBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,WAAW,YAAY;KAAO,MAAM;KAAG,KAAK,MAAM;KAAO,QAAQ;KAAQ,SAAS;KAAY,OAAO,aAAa;KACpJ,UAAA;IACM,CAAA;GACF;EACF,CAAA,CAAA;;AACf,CAAC;AACD,WAAW,cAAc"}