@lobehub/ui 4.3.2 → 4.3.3

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

@@ -1,6 +1,6 @@
 import { TypographyProps } from "../../Markdown/type.mjs";
 import "../../Markdown/index.mjs";
-import * as react5 from "react";
+import * as react36 from "react";
 import { ReactNode } from "react";
 import { Pluggable } from "unified";
 
@@ -18,7 +18,7 @@ interface MdxProps extends Omit<TypographyProps, 'children'> {
   remarkPlugins?: Pluggable[];
   variant?: 'normal' | 'chat';
 }
-declare const Mdx: react5.NamedExoticComponent<MdxProps>;
+declare const Mdx: react36.NamedExoticComponent<MdxProps>;
 //#endregion
 export { Mdx, MdxProps };
 //# sourceMappingURL=index.d.mts.map

package/es/mdx/Mdx/index.mjs

@@ -6,11 +6,12 @@ import Image_default from "../mdxComponents/Image.mjs";
 import Video_default from "../mdxComponents/Video.mjs";
 import { useMarkdownContent } from "../../hooks/useMarkdown/useMarkdownContent.mjs";
 import Typography_default from "../../Markdown/Typography.mjs";
-import { useStyles } from "../../Markdown/style.mjs";
+import { styles } from "../../Markdown/style.mjs";
 import mdxComponents_default from "../mdxComponents/index.mjs";
 import CodeBlock_default from "../mdxComponents/CodeBlock.mjs";
 import { memo, useEffect, useMemo, useState } from "react";
 import jsxRuntime, { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 import { rehypeGithubAlerts } from "rehype-github-alerts";
 import rehypeKatex from "rehype-katex";
 import remarkGfm from "remark-gfm";
@@ -21,7 +22,6 @@ import jsxDevRuntime from "react/jsx-dev-runtime";
 //#region src/mdx/Mdx/index.tsx
 const runtime = process.env.NODE_ENV === "production" ? jsxRuntime : jsxDevRuntime;
 const Mdx = memo(({ children, className, style, fullFeaturedCodeBlock = true, enableImageGallery, enableLatex = true, enableMermaid = true, rehypePlugins, remarkPlugins, components = {}, fallback = null, fontSize, headerMultiple, lineHeight, marginMultiple, variant, ...rest }) => {
-	const { cx, styles } = useStyles();
 	const escapedContent = useMarkdownContent(children);
 	const isChatMode = variant === "chat";
 	const [MDXContent, setMDXContent] = useState(() => () => null);

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["list: any","mdxComponents","Image","CodeBlock","Video","error: any","Alert","Typography","PreviewGroup"],"sources":["../../../src/mdx/Mdx/index.tsx"],"sourcesContent":["'use client';\n\nimport { evaluate } from '@mdx-js/mdx';\nimport { ReactNode, memo, 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 rehypeKatex from 'rehype-katex';\nimport remarkGfm from 'remark-gfm';\nimport remarkMath from 'remark-math';\nimport type { Pluggable } from 'unified';\n\nimport Alert from '@/Alert';\nimport { PreviewGroup } from '@/Image';\nimport { Typography, type TypographyProps } from '@/Markdown';\nimport { useStyles } from '@/Markdown/style';\nimport { useMarkdownContent } from '@/hooks/useMarkdown';\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 { cx, styles } = useStyles();\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              style={{\n                width: '100%',\n              }}\n              title={'Error compiling MDX'}\n              type=\"error\"\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":";;;;;;;;;;;;;;;;;;;;;AAuBA,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,EAAE,EACf,WAAW,MACX,UACA,gBACA,YACA,gBACA,SACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;CAClC,MAAM,iBAAiB,mBAAmB,SAAS;CAEnD,MAAM,aAAa,YAAY;CAE/B,MAAM,CAAC,YAAY,iBAAiB,qBAA0B,KAAK;CAEnE,MAAM,qBAAqB,MAAM,QAAQ,cAAc,GAAG,gBAAgB,CAAC,cAAc;CACzF,MAAM,oBAAoB,cAEtB;EAAC;EAAoB,eAAe;EAAa,GAAG;EAAmB,CAAC,OACtE,QACD,EACH,CAAC,aAAa,GAAG,mBAAmB,CACrC;CAED,MAAM,qBAAqB,MAAM,QAAQ,cAAc,GAAG,gBAAgB,CAAC,cAAc;CACzF,MAAM,oBAAoB,cAClB;EAAC;EAAW,eAAe;EAAY,GAAG;EAAmB,CAAC,OAAO,QAAQ,EACnF,CAAC,aAAa,GAAG,mBAAmB,CACrC;CAED,MAAM,iBAAiB,cAAc;EACnC,MAAMA,OAAY,EAAE;AACpB,SAAO,QAAQ;GACb,GAAGC;GACH,KAAKC;GACL,MAAM,UACJ,oBAACC;IACC,GAAI;IACW;IACf,cAAc;KACd;GAEJ,OAAOC;GACP,GAAG;GACJ,CAAC,CAAC,SAAS,CAAC,KAAK,YAAiB;AACjC,QAAK,QAAQ,UAAe,oBAAC,UAAO,GAAI,QAAS;IACjD;AACF,SAAO;IACN;EAAC;EAAY;EAAe;EAAsB,CAAC;AAEtD,iBAAgB;AACd,MAAI,CAAC,eAAgB;AACrB,GAAC,YAAY;AACX,OAAI;IACF,MAAM,EAAE,SAAS,YAAY,MAAM,SAAS,gBAAgB;KAC1D,GAAG;KACH,aAAa,QAAQ,IAAI,aAAa;KACtC,eAAe;KACf,eAAe;KAChB,CAAC;AACF,wBAAoB,QAAQ;YACrBC,OAAY;AAEnB,8BACE,oBAACC;KACC,aAAa,OAAO,OAAO,QAAkB;KAC7C,OAAO,EACL,OAAO,QACR;KACD,OAAO;KACP,MAAK;MACL,CACF;AACF,YAAQ,MAAM,wBAAwB,MAAM;;MAE5C;IACH;EAAC;EAAgB;EAAmB;EAAkB,CAAC;AAE1D,KAAI,CAAC,kBAAkB,CAAC,WAAY,QAAO;AAE3C,QACE,oBAACC;EACC,WAAW,GAAG,eAAe,OAAO,OAAO,cAAc,OAAO,MAAM,UAAU;EAChF,kBAAe;EACL;EACM;EACJ;EACI;EACT;EACP,GAAI;YAEJ,oBAACC;GAAa,QAAQ;aACpB,oBAAC,cAAW,YAAY,iBAAkB;IAC7B;GACJ;EAGlB;AAED,IAAI,cAAc;AAElB,kBAAe"}
+{"version":3,"file":"index.mjs","names":["list: any","mdxComponents","Image","CodeBlock","Video","error: any","Alert","Typography","PreviewGroup"],"sources":["../../../src/mdx/Mdx/index.tsx"],"sourcesContent":["'use client';\n\nimport { evaluate } from '@mdx-js/mdx';\nimport { cx } from 'antd-style';\nimport { ReactNode, memo, 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 rehypeKatex from 'rehype-katex';\nimport remarkGfm from 'remark-gfm';\nimport remarkMath from 'remark-math';\nimport type { Pluggable } from 'unified';\n\nimport Alert from '@/Alert';\nimport { PreviewGroup } from '@/Image';\nimport { Typography, type TypographyProps } from '@/Markdown';\nimport { styles } from '@/Markdown/style';\nimport { useMarkdownContent } from '@/hooks/useMarkdown';\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              style={{\n                width: '100%',\n              }}\n              title={'Error compiling MDX'}\n              type=\"error\"\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,EAAE,EACf,WAAW,MACX,UACA,gBACA,YACA,gBACA,SACA,GAAG,WACC;CACJ,MAAM,iBAAiB,mBAAmB,SAAS;CAEnD,MAAM,aAAa,YAAY;CAE/B,MAAM,CAAC,YAAY,iBAAiB,qBAA0B,KAAK;CAEnE,MAAM,qBAAqB,MAAM,QAAQ,cAAc,GAAG,gBAAgB,CAAC,cAAc;CACzF,MAAM,oBAAoB,cAEtB;EAAC;EAAoB,eAAe;EAAa,GAAG;EAAmB,CAAC,OACtE,QACD,EACH,CAAC,aAAa,GAAG,mBAAmB,CACrC;CAED,MAAM,qBAAqB,MAAM,QAAQ,cAAc,GAAG,gBAAgB,CAAC,cAAc;CACzF,MAAM,oBAAoB,cAClB;EAAC;EAAW,eAAe;EAAY,GAAG;EAAmB,CAAC,OAAO,QAAQ,EACnF,CAAC,aAAa,GAAG,mBAAmB,CACrC;CAED,MAAM,iBAAiB,cAAc;EACnC,MAAMA,OAAY,EAAE;AACpB,SAAO,QAAQ;GACb,GAAGC;GACH,KAAKC;GACL,MAAM,UACJ,oBAACC;IACC,GAAI;IACW;IACf,cAAc;KACd;GAEJ,OAAOC;GACP,GAAG;GACJ,CAAC,CAAC,SAAS,CAAC,KAAK,YAAiB;AACjC,QAAK,QAAQ,UAAe,oBAAC,UAAO,GAAI,QAAS;IACjD;AACF,SAAO;IACN;EAAC;EAAY;EAAe;EAAsB,CAAC;AAEtD,iBAAgB;AACd,MAAI,CAAC,eAAgB;AACrB,GAAC,YAAY;AACX,OAAI;IACF,MAAM,EAAE,SAAS,YAAY,MAAM,SAAS,gBAAgB;KAC1D,GAAG;KACH,aAAa,QAAQ,IAAI,aAAa;KACtC,eAAe;KACf,eAAe;KAChB,CAAC;AACF,wBAAoB,QAAQ;YACrBC,OAAY;AAEnB,8BACE,oBAACC;KACC,aAAa,OAAO,OAAO,QAAkB;KAC7C,OAAO,EACL,OAAO,QACR;KACD,OAAO;KACP,MAAK;MACL,CACF;AACF,YAAQ,MAAM,wBAAwB,MAAM;;MAE5C;IACH;EAAC;EAAgB;EAAmB;EAAkB,CAAC;AAE1D,KAAI,CAAC,kBAAkB,CAAC,WAAY,QAAO;AAE3C,QACE,oBAACC;EACC,WAAW,GAAG,eAAe,OAAO,OAAO,cAAc,OAAO,MAAM,UAAU;EAChF,kBAAe;EACL;EACM;EACJ;EACI;EACT;EACP,GAAI;YAEJ,oBAACC;GAAa,QAAQ;aACpB,oBAAC,cAAW,YAAY,iBAAkB;IAC7B;GACJ;EAGlB;AAED,IAAI,cAAc;AAElB,kBAAe"}

package/es/mdx/Steps/index.mjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Steps: FC<DivProps>"],"sources":["../../../src/mdx/Steps/index.tsx"],"sourcesContent":["'use client';\n\nimport { FC } from 'react';\n\nimport { DivProps } from '@/types';\n\nimport { useStyles } from './style';\n\nconst Steps: FC<DivProps> = ({ children, className, ...rest }) => {\n  const { cx, styles } = useStyles();\n\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":";;;;;;AAQA,MAAMA,SAAuB,EAAE,UAAU,WAAW,GAAG,WAAW;CAChE,MAAM,EAAE,IAAI,WAAW,WAAW;AAElC,QACE,oBAAC;EAAI,WAAW,GAAG,OAAO,WAAW,UAAU;EAAE,GAAI;EAClD;GACG;;AAIV,MAAM,cAAc;AAEpB,oBAAe"}
+{"version":3,"file":"index.mjs","names":["Steps: FC<DivProps>"],"sources":["../../../src/mdx/Steps/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { FC } from 'react';\n\nimport { 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,MAAMA,SAAuB,EAAE,UAAU,WAAW,GAAG,WAAW;AAChE,QACE,oBAAC;EAAI,WAAW,GAAG,OAAO,WAAW,UAAU;EAAE,GAAI;EAClD;GACG;;AAIV,MAAM,cAAc;AAEpB,oBAAe"}

package/es/mdx/Steps/style.mjs

@@ -1,7 +1,7 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/mdx/Steps/style.ts
-const useStyles = createStyles(({ css: css$1, token }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return { container: css$1`
       --lobe-markdown-header-multiple: 0.5;
       --lobe-markdown-margin-multiple: 1;
@@ -22,7 +22,7 @@ const useStyles = createStyles(({ css: css$1, token }) => {
         width: 1px;
         height: calc(100% - 0.5em);
 
-        background: ${token.colorBorderSecondary};
+        background: ${cssVar$1.colorBorderSecondary};
       }
 
       h3 {
@@ -40,16 +40,16 @@ const useStyles = createStyles(({ css: css$1, token }) => {
           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: ${token.colorTextSecondary};
+          color: ${cssVar$1.colorTextSecondary};
           text-align: center;
 
-          background: ${token.colorBgElevated};
-          border-radius: 9999px;
-          box-shadow: 0 0 0 2px ${token.colorBgLayout};
+          background: ${cssVar$1.colorBgElevated};
+          box-shadow: 0 0 0 2px ${cssVar$1.colorBgLayout};
         }
 
         &:not(:first-child) {
@@ -60,5 +60,5 @@ const useStyles = createStyles(({ css: css$1, token }) => {
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/Steps/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token }) => {\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: ${token.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\n          font-size: 0.8em;\n          font-weight: 500;\n          line-height: 1.8em;\n          color: ${token.colorTextSecondary};\n          text-align: center;\n\n          background: ${token.colorBgElevated};\n          border-radius: 9999px;\n          box-shadow: 0 0 0 2px ${token.colorBgLayout};\n        }\n\n        &:not(:first-child) {\n          margin-block-start: 2em;\n        }\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,YAAY;AACxD,QAAO,EACL,WAAW,KAAG;;;;;;;;;;;;;;;;;;;;sBAoBI,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;mBAsB9B,MAAM,mBAAmB;;;wBAGpB,MAAM,gBAAgB;;kCAEZ,MAAM,cAAc;;;;;;;OAQnD;EACD"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"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,YAAK,uBAAa;AAC5D,QAAO,EACL,WAAW,KAAG;;;;;;;;;;;;;;;;;;;;sBAoBIA,SAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;mBAuB/BA,SAAO,mBAAmB;;;wBAGrBA,SAAO,gBAAgB;kCACbA,SAAO,cAAc;;;;;;;OAQpD;EACD"}

package/es/mdx/Tabs/Tab.mjs

@@ -1,22 +1,13 @@
 'use client';
 
+import { styles } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
-import { createStyles } from "antd-style";
+import { cx } from "antd-style";
 
 //#region src/mdx/Tabs/Tab.tsx
-const useStyles = createStyles(({ css: css$1 }) => {
-	return { body: css$1`
-      padding-inline: 1em;
-
-      > div {
-        margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
-      }
-    ` };
-});
 const Tab = ({ children, className, ...rest }) => {
-	const { cx: cx$1, styles } = useStyles();
 	return /* @__PURE__ */ jsx("div", {
-		className: cx$1(styles.body, className),
+		className: cx(styles.body, className),
 		...rest,
 		children: /* @__PURE__ */ jsx("div", { children })
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.mjs","names":["Tab: FC<TabProps>","cx"],"sources":["../../../src/mdx/Tabs/Tab.tsx"],"sourcesContent":["'use client';\n\nimport { createStyles } from 'antd-style';\nimport { FC } from 'react';\n\nimport { DivProps } from '@/types';\n\nconst useStyles = createStyles(({ css }) => {\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  };\n});\n\nexport type TabProps = DivProps;\n\nconst Tab: FC<TabProps> = ({ children, className, ...rest }) => {\n  const { cx, styles } = useStyles();\n\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":";;;;;;AAOA,MAAM,YAAY,cAAc,EAAE,iBAAU;AAC1C,QAAO,EACL,MAAM,KAAG;;;;;;OAOV;EACD;AAIF,MAAMA,OAAqB,EAAE,UAAU,WAAW,GAAG,WAAW;CAC9D,MAAM,EAAE,UAAI,WAAW,WAAW;AAElC,QACE,oBAAC;EAAI,WAAWC,KAAG,OAAO,MAAM,UAAU;EAAE,GAAI;YAC9C,oBAAC,SAAK,WAAe;GACjB;;AAIV,IAAI,cAAc;AAElB,kBAAe"}
+{"version":3,"file":"Tab.mjs","names":["Tab: FC<TabProps>"],"sources":["../../../src/mdx/Tabs/Tab.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { FC } from 'react';\n\nimport { 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,MAAMA,OAAqB,EAAE,UAAU,WAAW,GAAG,WAAW;AAC9D,QACE,oBAAC;EAAI,WAAW,GAAG,OAAO,MAAM,UAAU;EAAE,GAAI;YAC9C,oBAAC,SAAK,WAAe;GACjB;;AAIV,IAAI,cAAc;AAElB,kBAAe"}

package/es/mdx/Tabs/index.mjs

@@ -2,15 +2,15 @@
 
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import Tabs_default$1 from "../../Tabs/Tabs.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/mdx/Tabs/index.tsx
 const Tabs = ({ defaultIndex = "0", items, children, className, tabNavProps = {}, ...rest }) => {
 	const { className: tabNavClassName, onChange, ...tabNavRest } = tabNavProps;
 	const [activeIndex, setActiveIndex] = useState(String(defaultIndex));
-	const { cx, styles } = useStyles();
 	const index = Number(activeIndex);
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		className: cx(styles.container, className),

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Tabs: FC<TabsProps>","Flexbox","LobeTabs"],"sources":["../../../src/mdx/Tabs/index.tsx"],"sourcesContent":["'use client';\n\nimport { FC, ReactNode, useState } from 'react';\n\nimport { Flexbox, FlexboxProps } from '@/Flex';\nimport { default as LobeTabs, type TabsProps as LobeTabsProps } from '@/Tabs';\n\nimport { useStyles } 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  const { cx, styles } = useStyles();\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        compact\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":";;;;;;;;;AAgBA,MAAMA,QAAuB,EAC3B,eAAe,KACf,OACA,UACA,WACA,cAAc,EAAE,EAChB,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,iBAAiB,UAAU,GAAG,eAAe;CAChE,MAAM,CAAC,aAAa,kBAAkB,SAAiB,OAAO,aAAa,CAAC;CAC5E,MAAM,EAAE,IAAI,WAAW,WAAW;CAElC,MAAM,QAAQ,OAAO,YAAY;AAEjC,QACE,qBAACC;EAAQ,WAAW,GAAG,OAAO,WAAW,UAAU;EAAE,GAAI;aACvD,oBAACC;GACC,WAAW;GACX,WAAW,GAAG,OAAO,QAAQ,gBAAgB;GAC7C;GACA,OAAO,MAAM,KAAK,MAAM,OAAO;IAC7B,KAAK,OAAO,EAAE;IACd,OAAO;IACR,EAAE;GACH,WAAW,MAAM;AACf,mBAAe,EAAE;AACjB,eAAW,EAAE;;GAEf,GAAI;IACJ,EACD,WAAW,UAAU;GACd;;AAId,mBAAe"}
+{"version":3,"file":"index.mjs","names":["Tabs: FC<TabsProps>","Flexbox","LobeTabs"],"sources":["../../../src/mdx/Tabs/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { FC, ReactNode, useState } from 'react';\n\nimport { Flexbox, FlexboxProps } from '@/Flex';\nimport { default as LobeTabs, type TabsProps as LobeTabsProps } from '@/Tabs';\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        compact\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,MAAMA,QAAuB,EAC3B,eAAe,KACf,OACA,UACA,WACA,cAAc,EAAE,EAChB,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,iBAAiB,UAAU,GAAG,eAAe;CAChE,MAAM,CAAC,aAAa,kBAAkB,SAAiB,OAAO,aAAa,CAAC;CAE5E,MAAM,QAAQ,OAAO,YAAY;AAEjC,QACE,qBAACC;EAAQ,WAAW,GAAG,OAAO,WAAW,UAAU;EAAE,GAAI;aACvD,oBAACC;GACC,WAAW;GACX,WAAW,GAAG,OAAO,QAAQ,gBAAgB;GAC7C;GACA,OAAO,MAAM,KAAK,MAAM,OAAO;IAC7B,KAAK,OAAO,EAAE;IACd,OAAO;IACR,EAAE;GACH,WAAW,MAAM;AACf,mBAAe,EAAE;AACjB,eAAW,EAAE;;GAEf,GAAI;IACJ,EACD,WAAW,UAAU;GACd;;AAId,mBAAe"}

package/es/mdx/Tabs/style.mjs

@@ -1,26 +1,24 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/mdx/Tabs/style.ts
-const useStyles = createStyles(({ css: css$1, token, prefixCls }) => {
+const styles = createStaticStyles(({ css: css$1 }) => {
 	return {
-		container: css$1`
-      --lobe-markdown-margin-multiple: 1;
+		body: css$1`
+      padding-inline: 1em;
 
-      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
-      background: ${token.colorFillQuaternary};
-      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);
-      box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);
+      > div {
+        margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
+      }
+    `,
+		container: css$1`
+      /* Container styles */
     `,
 		header: css$1`
-      border-block-end: 1px solid var(--lobe-markdown-border-color);
-      .${prefixCls}-tabs-tab-btn {
-        font-size: var(--lobe-markdown-font-size);
-        line-height: var(--lobe-markdown-line-height);
-      }
+      /* Header styles */
     `
 	};
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/Tabs/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token, prefixCls }) => {\n  return {\n    container: css`\n      --lobe-markdown-margin-multiple: 1;\n\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      background: ${token.colorFillQuaternary};\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n      box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n    `,\n\n    header: css`\n      border-block-end: 1px solid var(--lobe-markdown-border-color);\n      .${prefixCls}-tabs-tab-btn {\n        font-size: var(--lobe-markdown-font-size);\n        line-height: var(--lobe-markdown-line-height);\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,gBAAgB;AACnE,QAAO;EACL,WAAW,KAAG;;;;oBAIE,MAAM,oBAAoB;;;;EAK1C,QAAQ,KAAG;;SAEN,UAAU;;;;;EAKhB;EACD"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/Tabs/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => {\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  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,iBAAU;AACpD,QAAO;EACL,MAAM,KAAG;;;;;;;EAOT,WAAW,KAAG;;;EAGd,QAAQ,KAAG;;;EAGZ;EACD"}

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

@@ -2,35 +2,14 @@
 
 import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
 import Icon_default from "../../../Icon/Icon.mjs";
+import { styles } from "./style.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Popover } from "antd";
-import { createStyles } from "antd-style";
 import { ArrowRightIcon } from "lucide-react";
 
 //#region src/mdx/mdxComponents/Citation/PopoverPanel.tsx
-const useStyles = createStyles(({ css: css$1, token }) => ({
-	link: css$1`
-    cursor: pointer;
-    color: ${token.colorTextSecondary};
-
-    :hover {
-      color: ${token.colorText};
-    }
-  `,
-	url: css$1`
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-
-    max-width: 400px;
-
-    text-overflow: ellipsis;
-  `
-}));
 const PopoverPanel = ({ children, usePopover, title, alt, url }) => {
-	const { styles } = useStyles();
 	const [displayTitle, domain, host] = useMemo(() => {
 		try {
 			const urlObj = new URL(url);

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverPanel.mjs","names":["PopoverPanel: FC<PopoverPanelProps>","displayTitle","domain","Flexbox","Icon"],"sources":["../../../../src/mdx/mdxComponents/Citation/PopoverPanel.tsx"],"sourcesContent":["'use client';\n\nimport { Popover } from 'antd';\nimport { createStyles } from 'antd-style';\nimport { ArrowRightIcon } from 'lucide-react';\nimport { type FC, type ReactNode, useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nconst useStyles = createStyles(({ css, token }) => ({\n  link: css`\n    cursor: pointer;\n    color: ${token.colorTextSecondary};\n\n    :hover {\n      color: ${token.colorText};\n    }\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\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 { styles } = useStyles();\n\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      content={\n        <Flexbox gap={8}>\n          <Flexbox\n            className={styles.link}\n            gap={12}\n            horizontal\n            justify={'space-between'}\n            onClick={() => {\n              window.open(url, '_blank');\n            }}\n          >\n            <Flexbox align={'center'} gap={4} horizontal>\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      trigger={'hover'}\n    >\n      {children}\n    </Popover>\n  ) : (\n    children\n  );\n};\n\nPopoverPanel.displayName = 'MdxPopoverPanel';\n\nexport default PopoverPanel;\n"],"mappings":";;;;;;;;;;;AAUA,MAAM,YAAY,cAAc,EAAE,YAAK,aAAa;CAClD,MAAM,KAAG;;aAEE,MAAM,mBAAmB;;;eAGvB,MAAM,UAAU;;;CAG7B,KAAK,KAAG;;;;;;;;;;CAUT,EAAE;AAUH,MAAMA,gBAAuC,EAAE,UAAU,YAAY,OAAO,KAAK,UAAU;CACzF,MAAM,EAAE,WAAW,WAAW;CAE9B,MAAM,CAAC,cAAc,QAAQ,QAAQ,cAAc;AACjD,MAAI;GACF,MAAM,SAAS,IAAI,IAAI,IAAK;GAC5B,MAAM,aAAa,OAAO;GAE1B,IAAIC,iBAAe;AAEnB,OAAI,UAAU,IACZ,kBAAe;GAGjB,IAAIC,WAAS,OAAO,SAAS,QAAQ,QAAQ,GAAG;AAChD,OAAI,CAACD,eAAc,YAAS;AAE5B,UAAO;IAACA;IAAcC;IAAQ;IAAW;UACnC;AACN,UAAO;IAAC;IAAO;IAAK;IAAI;;IAEzB,CAAC,KAAK,MAAM,CAAC;AAEhB,QAAO,cAAc,MACnB,oBAAC;EACC,OAAO;EACP,SACE,qBAACC;GAAQ,KAAK;cACZ,qBAACA;IACC,WAAW,OAAO;IAClB,KAAK;IACL;IACA,SAAS;IACT,eAAe;AACb,YAAO,KAAK,KAAK,SAAS;;eAG5B,qBAACA;KAAQ,OAAO;KAAU,KAAK;KAAG;gBAChC,oBAAC;MACC,KAAK,OAAO,SAAS;MACrB,QAAQ;MACR,KAAK,oCAAoC,KAAK;MAC9C,OAAO,EAAE,cAAc,GAAG;MAC1B,OAAO;OACP,EACF,oBAAC;MAAK,WAAW,OAAO;gBAAM;OAAc;MACpC,EACV,oBAACC,gBAAK,MAAM,iBAAkB;KACtB,EACT;IACO;EAEZ,SAAS;EAER;GACO,GAEV;;AAIJ,aAAa,cAAc;AAE3B,2BAAe"}
+{"version":3,"file":"PopoverPanel.mjs","names":["PopoverPanel: FC<PopoverPanelProps>","displayTitle","domain","Flexbox","Icon"],"sources":["../../../../src/mdx/mdxComponents/Citation/PopoverPanel.tsx"],"sourcesContent":["'use client';\n\nimport { Popover } from 'antd';\nimport { ArrowRightIcon } from 'lucide-react';\nimport { type FC, type ReactNode, useMemo } from 'react';\n\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      content={\n        <Flexbox gap={8}>\n          <Flexbox\n            className={styles.link}\n            gap={12}\n            horizontal\n            justify={'space-between'}\n            onClick={() => {\n              window.open(url, '_blank');\n            }}\n          >\n            <Flexbox align={'center'} gap={4} horizontal>\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      trigger={'hover'}\n    >\n      {children}\n    </Popover>\n  ) : (\n    children\n  );\n};\n\nPopoverPanel.displayName = 'MdxPopoverPanel';\n\nexport default PopoverPanel;\n"],"mappings":";;;;;;;;;;;AAmBA,MAAMA,gBAAuC,EAAE,UAAU,YAAY,OAAO,KAAK,UAAU;CACzF,MAAM,CAAC,cAAc,QAAQ,QAAQ,cAAc;AACjD,MAAI;GACF,MAAM,SAAS,IAAI,IAAI,IAAK;GAC5B,MAAM,aAAa,OAAO;GAE1B,IAAIC,iBAAe;AAEnB,OAAI,UAAU,IACZ,kBAAe;GAGjB,IAAIC,WAAS,OAAO,SAAS,QAAQ,QAAQ,GAAG;AAChD,OAAI,CAACD,eAAc,YAAS;AAE5B,UAAO;IAACA;IAAcC;IAAQ;IAAW;UACnC;AACN,UAAO;IAAC;IAAO;IAAK;IAAI;;IAEzB,CAAC,KAAK,MAAM,CAAC;AAEhB,QAAO,cAAc,MACnB,oBAAC;EACC,OAAO;EACP,SACE,qBAACC;GAAQ,KAAK;cACZ,qBAACA;IACC,WAAW,OAAO;IAClB,KAAK;IACL;IACA,SAAS;IACT,eAAe;AACb,YAAO,KAAK,KAAK,SAAS;;eAG5B,qBAACA;KAAQ,OAAO;KAAU,KAAK;KAAG;gBAChC,oBAAC;MACC,KAAK,OAAO,SAAS;MACrB,QAAQ;MACR,KAAK,oCAAoC,KAAK;MAC9C,OAAO,EAAE,cAAc,GAAG;MAC1B,OAAO;OACP,EACF,oBAAC;MAAK,WAAW,OAAO;gBAAM;OAAc;MACpC,EACV,oBAACC,gBAAK,MAAM,iBAAkB;KACtB,EACT;IACO;EAEZ,SAAS;EAER;GACO,GAEV;;AAIJ,aAAa,cAAc;AAE3B,2BAAe"}

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

@@ -1,27 +1,13 @@
 'use client';
 
+import { styles } from "./style.mjs";
 import PopoverPanel_default from "./PopoverPanel.mjs";
 import { jsx } from "react/jsx-runtime";
-import { createStyles } from "antd-style";
+import { cx } from "antd-style";
 import { isEmpty } from "es-toolkit/compat";
 
 //#region src/mdx/mdxComponents/Citation/index.tsx
-const useStyles = createStyles(({ css: css$1 }) => ({
-	container: css$1`
-    display: inline-flex;
-    line-height: var(--lobe-markdown-line-height);
-    vertical-align: baseline;
-
-    a {
-      color: inherit;
-    }
-  `,
-	supContainer: css$1`
-    vertical-align: super;
-  `
-}));
 const Citation = ({ children, href, inSup, id, citationDetail }) => {
-	const { styles, cx: cx$1 } = useStyles();
 	const usePopover = !isEmpty(citationDetail);
 	const url = citationDetail?.url || href;
 	if (inSup) return /* @__PURE__ */ jsx(PopoverPanel_default, {
@@ -44,7 +30,7 @@ const Citation = ({ children, href, inSup, id, citationDetail }) => {
 		...citationDetail,
 		usePopover,
 		children: /* @__PURE__ */ jsx("sup", {
-			className: cx$1(styles.container, styles.supContainer),
+			className: cx(styles.container, styles.supContainer),
 			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":["Citation: FC<CitationProps>","PopoverPanel","cx"],"sources":["../../../../src/mdx/mdxComponents/Citation/index.tsx"],"sourcesContent":["'use client';\n\nimport { createStyles } from 'antd-style';\nimport { isEmpty } from 'es-toolkit/compat';\nimport type { FC, ReactNode } from 'react';\n\nimport PopoverPanel from '@/mdx/mdxComponents/Citation/PopoverPanel';\nimport { CitationItem } from '@/types/citation';\n\nconst useStyles = createStyles(({ css }) => ({\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  supContainer: css`\n    vertical-align: super;\n  `,\n}));\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 { styles, cx } = useStyles();\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":";;;;;;;;AASA,MAAM,YAAY,cAAc,EAAE,kBAAW;CAC3C,WAAW,KAAG;;;;;;;;;CASd,cAAc,KAAG;;;CAGlB,EAAE;AAWH,MAAMA,YAA+B,EAAE,UAAU,MAAM,OAAO,IAAI,qBAAqB;CACrF,MAAM,EAAE,QAAQ,aAAO,WAAW;CAClC,MAAM,aAAa,CAAC,QAAQ,eAAe;CAC3C,MAAM,MAAM,gBAAgB,OAAO;AAGnC,KAAI,MACF,QACE,oBAACC;EAAa,GAAI;EAA4B;YAC5C,oBAAC;GAAK,WAAW,OAAO;aACtB,oBAAC;IACC,oBAAiB;IACjB,qBAAkB;IAClB,MAAM;IACF;IACJ,KAAI;IACJ,QAAQ,gBAAgB,MAAM,WAAW;IAExC;KACC;IACC;GACM;AAInB,QACE,oBAACA;EAAa,GAAI;EAA4B;YAC5C,oBAAC;GAAI,WAAWC,KAAG,OAAO,WAAW,OAAO,aAAa;aACtD,MACC,oBAAC;IACC,oBAAiB;IACjB,qBAAmB;IACnB,MAAM;IACN,KAAI;IACJ,QAAQ;IAEP;KACC,GAEJ,oBAAC;IAAK,oBAAiB;IAAiB,qBAAmB;IACxD;KACI;IAEL;GACO;;AAInB,SAAS,cAAc;AAEvB,uBAAe"}
+{"version":3,"file":"index.mjs","names":["Citation: FC<CitationProps>","PopoverPanel"],"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 { 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,MAAMA,YAA+B,EAAE,UAAU,MAAM,OAAO,IAAI,qBAAqB;CACrF,MAAM,aAAa,CAAC,QAAQ,eAAe;CAC3C,MAAM,MAAM,gBAAgB,OAAO;AAGnC,KAAI,MACF,QACE,oBAACC;EAAa,GAAI;EAA4B;YAC5C,oBAAC;GAAK,WAAW,OAAO;aACtB,oBAAC;IACC,oBAAiB;IACjB,qBAAkB;IAClB,MAAM;IACF;IACJ,KAAI;IACJ,QAAQ,gBAAgB,MAAM,WAAW;IAExC;KACC;IACC;GACM;AAInB,QACE,oBAACA;EAAa,GAAI;EAA4B;YAC5C,oBAAC;GAAI,WAAW,GAAG,OAAO,WAAW,OAAO,aAAa;aACtD,MACC,oBAAC;IACC,oBAAiB;IACjB,qBAAmB;IACnB,MAAM;IACN,KAAI;IACJ,QAAQ;IAEP;KACC,GAEJ,oBAAC;IAAK,oBAAiB;IAAiB,qBAAmB;IACxD;KACI;IAEL;GACO;;AAInB,SAAS,cAAc;AAEvB,uBAAe"}

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

@@ -0,0 +1,39 @@
+import { createStaticStyles } from "antd-style";
+
+//#region src/mdx/mdxComponents/Citation/style.ts
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
+	container: css$1`
+    display: inline-flex;
+    line-height: var(--lobe-markdown-line-height);
+    vertical-align: baseline;
+
+    a {
+      color: inherit;
+    }
+  `,
+	link: css$1`
+    cursor: pointer;
+    color: ${cssVar$1.colorTextSecondary};
+
+    :hover {
+      color: ${cssVar$1.colorText};
+    }
+  `,
+	supContainer: css$1`
+    vertical-align: super;
+  `,
+	url: css$1`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    max-width: 400px;
+
+    text-overflow: ellipsis;
+  `
+}));
+
+//#endregion
+export { styles };
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["cssVar"],"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,YAAK,wBAAc;CAC7D,WAAW,KAAG;;;;;;;;;CASd,MAAM,KAAG;;aAEEA,SAAO,mBAAmB;;;eAGxBA,SAAO,UAAU;;;CAG9B,cAAc,KAAG;;;CAGjB,KAAK,KAAG;;;;;;;;;;CAUT,EAAE"}

package/es/mdx/mdxComponents/Pre.mjs

@@ -5,20 +5,19 @@ import Highlighter_default from "../../Highlighter/Highlighter.mjs";
 import Mermaid_default from "../../Mermaid/Mermaid.mjs";
 import Snippet_default from "../../Snippet/Snippet.mjs";
 import { jsx } from "react/jsx-runtime";
-import { createStyles } from "antd-style";
+import { createStaticStyles, cx } from "antd-style";
 
 //#region src/mdx/mdxComponents/Pre.tsx
-const useStyles = createStyles(({ css: css$1 }) => ({ container: css$1`
+const styles = createStaticStyles(({ css: css$1 }) => ({ container: css$1`
     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 }) => {
-	const { styles, cx: cx$1 } = useStyles();
 	return /* @__PURE__ */ jsx(Highlighter_default, {
 		allowChangeLanguage,
-		className: cx$1(styles.container, className),
+		className: cx(styles.container, className),
 		fileName,
 		fullFeatured,
 		icon,
@@ -31,9 +30,8 @@ const Pre = ({ fullFeatured, fileName, allowChangeLanguage, language = FALLBACK_
 	});
 };
 const PreSingleLine = ({ language = FALLBACK_LANG, children, className, style, variant = "filled", ...rest }) => {
-	const { cx: cx$1, styles } = useStyles();
 	return /* @__PURE__ */ jsx(Snippet_default, {
-		className: cx$1(styles.container, className),
+		className: cx(styles.container, className),
 		"data-code-type": "highlighter",
 		language,
 		style,
@@ -42,10 +40,10 @@ const PreSingleLine = ({ language = FALLBACK_LANG, children, className, style, v
 		children
 	});
 };
-const PreMermaid = ({ fullFeatured, children, className, style, variant = "filled", theme, ...rest }) => {
-	const { styles, cx: cx$1 } = useStyles();
+const PreMermaid = ({ animated, fullFeatured, children, className, style, variant = "filled", theme, ...rest }) => {
 	return /* @__PURE__ */ jsx(Mermaid_default, {
-		className: cx$1(styles.container, className),
+		animated,
+		className: cx(styles.container, className),
 		fullFeatured,
 		style,
 		theme,

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

@@ -1 +1 @@
-{"version":3,"file":"Pre.mjs","names":["Pre: FC<PreProps>","Highlighter","cx","PreSingleLine: FC<SnippetProps>","Snippet","PreMermaid: FC<MermaidProps>","Mermaid"],"sources":["../../../src/mdx/mdxComponents/Pre.tsx"],"sourcesContent":["'use client';\n\nimport { createStyles } from 'antd-style';\nimport type { FC } from 'react';\n\nimport Highlighter, { type HighlighterProps } from '@/Highlighter';\nimport { FALLBACK_LANG } from '@/Highlighter/const';\nimport Mermaid, { type MermaidProps } from '@/Mermaid';\nimport Snippet, { type SnippetProps } from '@/Snippet';\n\nconst useStyles = createStyles(({ 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  const { styles, cx } = useStyles();\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  const { cx, styles } = useStyles();\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  fullFeatured,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  theme,\n  ...rest\n}) => {\n  const { styles, cx } = useStyles();\n\n  return (\n    <Mermaid\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\nPre.displayName = 'MdxPre';\n\nexport default Pre;\n"],"mappings":";;;;;;;;;;AAUA,MAAM,YAAY,cAAc,EAAE,kBAAW,EAC3C,WAAW,KAAG;;;;;KAMf,EAAE;AAIH,MAAaA,OAAqB,EAChC,cACA,UACA,qBACA,WAAW,eACX,UACA,WACA,OACA,UAAU,UACV,MACA,OACA,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,aAAO,WAAW;AAElC,QACE,oBAACC;EACsB;EACrB,WAAWC,KAAG,OAAO,WAAW,UAAU;EAChC;EACI;EACR;EACI;EACH;EACA;EACE;EACT,GAAI;EAEH;GACW;;AAIlB,MAAaC,iBAAmC,EAC9C,WAAW,eACX,UACA,WACA,OACA,UAAU,UACV,GAAG,WACC;CACJ,MAAM,EAAE,UAAI,WAAW,WAAW;AAElC,QACE,oBAACC;EACC,WAAWF,KAAG,OAAO,WAAW,UAAU;EAC1C,kBAAe;EACL;EACH;EACE;EACT,GAAI;EAEH;GACO;;AAId,MAAaG,cAAgC,EAC3C,cACA,UACA,WACA,OACA,UAAU,UACV,OACA,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,aAAO,WAAW;AAElC,QACE,oBAACC;EACC,WAAWJ,KAAG,OAAO,WAAW,UAAU;EAC5B;EACP;EACA;EACE;EACT,GAAI;EAEH;GACO;;AAId,IAAI,cAAc;AAElB,kBAAe"}
+{"version":3,"file":"Pre.mjs","names":["Pre: FC<PreProps>","Highlighter","PreSingleLine: FC<SnippetProps>","Snippet","PreMermaid: FC<MermaidProps>","Mermaid"],"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 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\nPre.displayName = 'MdxPre';\n\nexport default Pre;\n"],"mappings":";;;;;;;;;;AAUA,MAAM,SAAS,oBAAoB,EAAE,kBAAW,EAC9C,WAAW,KAAG;;;;;KAMf,EAAE;AAIH,MAAaA,OAAqB,EAChC,cACA,UACA,qBACA,WAAW,eACX,UACA,WACA,OACA,UAAU,UACV,MACA,OACA,GAAG,WACC;AACJ,QACE,oBAACC;EACsB;EACrB,WAAW,GAAG,OAAO,WAAW,UAAU;EAChC;EACI;EACR;EACI;EACH;EACA;EACE;EACT,GAAI;EAEH;GACW;;AAIlB,MAAaC,iBAAmC,EAC9C,WAAW,eACX,UACA,WACA,OACA,UAAU,UACV,GAAG,WACC;AACJ,QACE,oBAACC;EACC,WAAW,GAAG,OAAO,WAAW,UAAU;EAC1C,kBAAe;EACL;EACH;EACE;EACT,GAAI;EAEH;GACO;;AAId,MAAaC,cAAgC,EAC3C,UACA,cACA,UACA,WACA,OACA,UAAU,UACV,OACA,GAAG,WACC;AACJ,QACE,oBAACC;EACW;EACV,WAAW,GAAG,OAAO,WAAW,UAAU;EAC5B;EACP;EACA;EACE;EACT,GAAI;EAEH;GACO;;AAId,IAAI,cAAc;AAElB,kBAAe"}

package/es/mobile/ChatHeader/ChatHeader.mjs

@@ -3,14 +3,14 @@
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import ActionIcon_default from "../../ActionIcon/ActionIcon.mjs";
 import SafeArea_default from "../SafeArea/SafeArea.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
 import { ChevronLeft } from "lucide-react";
 
 //#region src/mobile/ChatHeader/ChatHeader.tsx
 const ChatHeader = memo(({ ref, className, safeArea = true, style, center, left, right, gaps, classNames, onBackClick, showBackButton, styles: custmStyles, children, ...rest }) => {
-	const { styles, cx } = useStyles();
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		as: "header",
 		className: cx(styles.container, className),

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

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.mjs","names":["Flexbox","MobileSafeArea","ActionIcon"],"sources":["../../../src/mobile/ChatHeader/ChatHeader.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeft } from 'lucide-react';\nimport { memo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport MobileSafeArea from '@/mobile/SafeArea';\n\nimport { useStyles } from './style';\nimport { 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    const { styles, cx } = useStyles();\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          align={'center'}\n          className={styles.inner}\n          flex={1}\n          horizontal\n          justify={'space-between'}\n        >\n          <Flexbox\n            align={'center'}\n            className={cx(styles.left, classNames?.left)}\n            flex={1}\n            gap={gaps?.left}\n            horizontal\n            style={custmStyles?.left}\n          >\n            {showBackButton && <ActionIcon icon={ChevronLeft} onClick={() => onBackClick?.()} />}\n            {left}\n          </Flexbox>\n          <Flexbox\n            align={'center'}\n            className={cx(styles.center, classNames?.center)}\n            flex={1}\n            gap={gaps?.center}\n            horizontal\n            justify={'center'}\n            style={custmStyles?.center}\n          >\n            {children}\n            {center}\n          </Flexbox>\n          <Flexbox\n            align={'center'}\n            className={cx(styles.right, classNames?.right)}\n            flex={1}\n            gap={gaps?.right}\n            horizontal\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":";;;;;;;;;;;AAYA,MAAM,aAAa,MAChB,EACC,KACA,WACA,WAAW,MACX,OACA,QACA,MACA,OACA,MACA,YACA,aACA,gBACA,QAAQ,aACR,UACA,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,OAAO,WAAW;AAElC,QACE,qBAACA;EACC,IAAI;EACJ,WAAW,GAAG,OAAO,WAAW,UAAU;EACrC;EACE;EACP,GAAI;aAEH,YAAY,oBAACC,oBAAe,UAAU,QAAS,EAChD,qBAACD;GACC,OAAO;GACP,WAAW,OAAO;GAClB,MAAM;GACN;GACA,SAAS;;IAET,qBAACA;KACC,OAAO;KACP,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;KAC5C,MAAM;KACN,KAAK,MAAM;KACX;KACA,OAAO,aAAa;gBAEnB,kBAAkB,oBAACE;MAAW,MAAM;MAAa,eAAe,eAAe;OAAI,EACnF;MACO;IACV,qBAACF;KACC,OAAO;KACP,WAAW,GAAG,OAAO,QAAQ,YAAY,OAAO;KAChD,MAAM;KACN,KAAK,MAAM;KACX;KACA,SAAS;KACT,OAAO,aAAa;gBAEnB,UACA;MACO;IACV,oBAACA;KACC,OAAO;KACP,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;KAC9C,MAAM;KACN,KAAK,MAAM;KACX;KACA,OAAO,aAAa;eAEnB;MACO;;IACF;GACF;EAGf;AAED,WAAW,cAAc;AAEzB,yBAAe"}
+{"version":3,"file":"ChatHeader.mjs","names":["Flexbox","MobileSafeArea","ActionIcon"],"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 '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport MobileSafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport { 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          align={'center'}\n          className={styles.inner}\n          flex={1}\n          horizontal\n          justify={'space-between'}\n        >\n          <Flexbox\n            align={'center'}\n            className={cx(styles.left, classNames?.left)}\n            flex={1}\n            gap={gaps?.left}\n            horizontal\n            style={custmStyles?.left}\n          >\n            {showBackButton && <ActionIcon icon={ChevronLeft} onClick={() => onBackClick?.()} />}\n            {left}\n          </Flexbox>\n          <Flexbox\n            align={'center'}\n            className={cx(styles.center, classNames?.center)}\n            flex={1}\n            gap={gaps?.center}\n            horizontal\n            justify={'center'}\n            style={custmStyles?.center}\n          >\n            {children}\n            {center}\n          </Flexbox>\n          <Flexbox\n            align={'center'}\n            className={cx(styles.right, classNames?.right)}\n            flex={1}\n            gap={gaps?.right}\n            horizontal\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;AACJ,QACE,qBAACA;EACC,IAAI;EACJ,WAAW,GAAG,OAAO,WAAW,UAAU;EACrC;EACE;EACP,GAAI;aAEH,YAAY,oBAACC,oBAAe,UAAU,QAAS,EAChD,qBAACD;GACC,OAAO;GACP,WAAW,OAAO;GAClB,MAAM;GACN;GACA,SAAS;;IAET,qBAACA;KACC,OAAO;KACP,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;KAC5C,MAAM;KACN,KAAK,MAAM;KACX;KACA,OAAO,aAAa;gBAEnB,kBAAkB,oBAACE;MAAW,MAAM;MAAa,eAAe,eAAe;OAAI,EACnF;MACO;IACV,qBAACF;KACC,OAAO;KACP,WAAW,GAAG,OAAO,QAAQ,YAAY,OAAO;KAChD,MAAM;KACN,KAAK,MAAM;KACX;KACA,SAAS;KACT,OAAO,aAAa;gBAEnB,UACA;MACO;IACV,oBAACA;KACC,OAAO;KACP,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;KAC9C,MAAM;KACN,KAAK,MAAM;KACX;KACA,OAAO,aAAa;eAEnB;MACO;;IACF;GACF;EAGf;AAED,WAAW,cAAc;AAEzB,yBAAe"}

package/es/mobile/ChatHeader/ChatHeaderTitle.d.mts

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

package/es/mobile/ChatHeader/ChatHeaderTitle.mjs

@@ -1,13 +1,12 @@
 'use client';
 
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import { useTitleStyles } from "./style.mjs";
+import { titleStyles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/mobile/ChatHeader/ChatHeaderTitle.tsx
 const ChatHeaderTitle = memo(({ title, desc, tag }) => {
-	const { styles } = useTitleStyles();
 	if (desc) return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		align: "center",
 		flex: 1,
@@ -15,14 +14,14 @@ const ChatHeaderTitle = memo(({ title, desc, tag }) => {
 		justify: "center",
 		children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
 			align: "center",
-			className: styles.titleContainer,
+			className: titleStyles.titleContainer,
 			gap: 4,
 			horizontal: true,
 			children: [/* @__PURE__ */ jsx("div", {
-				className: styles.titleWithDesc,
+				className: titleStyles.titleWithDesc,
 				children: title
 			}), tag && /* @__PURE__ */ jsx(FlexBasic_default, {
-				className: styles.tag,
+				className: titleStyles.tag,
 				horizontal: true,
 				children: tag
 			})]
@@ -30,7 +29,7 @@ const ChatHeaderTitle = memo(({ title, desc, tag }) => {
 			align: "center",
 			horizontal: true,
 			children: /* @__PURE__ */ jsx("div", {
-				className: styles.desc,
+				className: titleStyles.desc,
 				children: desc
 			})
 		})]
@@ -42,10 +41,10 @@ const ChatHeaderTitle = memo(({ title, desc, tag }) => {
 		horizontal: true,
 		justify: "center",
 		children: [/* @__PURE__ */ jsx("div", {
-			className: styles.title,
+			className: titleStyles.title,
 			children: title
 		}), /* @__PURE__ */ jsx(FlexBasic_default, {
-			className: styles.tag,
+			className: titleStyles.tag,
 			horizontal: true,
 			children: tag
 		})]

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

@@ -1 +1 @@
-{"version":3,"file":"ChatHeaderTitle.mjs","names":["useStyles","Flexbox"],"sources":["../../../src/mobile/ChatHeader/ChatHeaderTitle.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { useTitleStyles as useStyles } from './style';\nimport { ChatHeaderTitleProps } from './type';\n\nconst ChatHeaderTitle = memo<ChatHeaderTitleProps>(({ title, desc, tag }) => {\n  const { styles } = useStyles();\n  if (desc)\n    return (\n      <Flexbox align={'center'} flex={1} gap={4} justify={'center'}>\n        <Flexbox align={'center'} className={styles.titleContainer} gap={4} horizontal>\n          <div className={styles.titleWithDesc}>{title}</div>\n          {tag && (\n            <Flexbox className={styles.tag} horizontal>\n              {tag}\n            </Flexbox>\n          )}\n        </Flexbox>\n        <Flexbox align={'center'} horizontal>\n          <div className={styles.desc}>{desc}</div>\n        </Flexbox>\n      </Flexbox>\n    );\n  return (\n    <Flexbox align={'center'} flex={1} gap={4} horizontal justify={'center'}>\n      <div className={styles.title}>{title}</div>\n      <Flexbox className={styles.tag} horizontal>\n        {tag}\n      </Flexbox>\n    </Flexbox>\n  );\n});\n\nChatHeaderTitle.displayName = 'ChatHeaderTitle';\n\nexport default ChatHeaderTitle;\n"],"mappings":";;;;;;;;AASA,MAAM,kBAAkB,MAA4B,EAAE,OAAO,MAAM,UAAU;CAC3E,MAAM,EAAE,WAAWA,gBAAW;AAC9B,KAAI,KACF,QACE,qBAACC;EAAQ,OAAO;EAAU,MAAM;EAAG,KAAK;EAAG,SAAS;aAClD,qBAACA;GAAQ,OAAO;GAAU,WAAW,OAAO;GAAgB,KAAK;GAAG;cAClE,oBAAC;IAAI,WAAW,OAAO;cAAgB;KAAY,EAClD,OACC,oBAACA;IAAQ,WAAW,OAAO;IAAK;cAC7B;KACO;IAEJ,EACV,oBAACA;GAAQ,OAAO;GAAU;aACxB,oBAAC;IAAI,WAAW,OAAO;cAAO;KAAW;IACjC;GACF;AAEd,QACE,qBAACA;EAAQ,OAAO;EAAU,MAAM;EAAG,KAAK;EAAG;EAAW,SAAS;aAC7D,oBAAC;GAAI,WAAW,OAAO;aAAQ;IAAY,EAC3C,oBAACA;GAAQ,WAAW,OAAO;GAAK;aAC7B;IACO;GACF;EAEZ;AAEF,gBAAgB,cAAc;AAE9B,8BAAe"}
+{"version":3,"file":"ChatHeaderTitle.mjs","names":["Flexbox","styles"],"sources":["../../../src/mobile/ChatHeader/ChatHeaderTitle.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { titleStyles as styles } from './style';\nimport { ChatHeaderTitleProps } from './type';\n\nconst ChatHeaderTitle = memo<ChatHeaderTitleProps>(({ title, desc, tag }) => {\n  if (desc)\n    return (\n      <Flexbox align={'center'} flex={1} gap={4} justify={'center'}>\n        <Flexbox align={'center'} className={styles.titleContainer} gap={4} horizontal>\n          <div className={styles.titleWithDesc}>{title}</div>\n          {tag && (\n            <Flexbox className={styles.tag} horizontal>\n              {tag}\n            </Flexbox>\n          )}\n        </Flexbox>\n        <Flexbox align={'center'} horizontal>\n          <div className={styles.desc}>{desc}</div>\n        </Flexbox>\n      </Flexbox>\n    );\n  return (\n    <Flexbox align={'center'} flex={1} gap={4} horizontal justify={'center'}>\n      <div className={styles.title}>{title}</div>\n      <Flexbox className={styles.tag} horizontal>\n        {tag}\n      </Flexbox>\n    </Flexbox>\n  );\n});\n\nChatHeaderTitle.displayName = 'ChatHeaderTitle';\n\nexport default ChatHeaderTitle;\n"],"mappings":";;;;;;;;AASA,MAAM,kBAAkB,MAA4B,EAAE,OAAO,MAAM,UAAU;AAC3E,KAAI,KACF,QACE,qBAACA;EAAQ,OAAO;EAAU,MAAM;EAAG,KAAK;EAAG,SAAS;aAClD,qBAACA;GAAQ,OAAO;GAAU,WAAWC,YAAO;GAAgB,KAAK;GAAG;cAClE,oBAAC;IAAI,WAAWA,YAAO;cAAgB;KAAY,EAClD,OACC,oBAACD;IAAQ,WAAWC,YAAO;IAAK;cAC7B;KACO;IAEJ,EACV,oBAACD;GAAQ,OAAO;GAAU;aACxB,oBAAC;IAAI,WAAWC,YAAO;cAAO;KAAW;IACjC;GACF;AAEd,QACE,qBAACD;EAAQ,OAAO;EAAU,MAAM;EAAG,KAAK;EAAG;EAAW,SAAS;aAC7D,oBAAC;GAAI,WAAWC,YAAO;aAAQ;IAAY,EAC3C,oBAACD;GAAQ,WAAWC,YAAO;GAAK;aAC7B;IACO;GACF;EAEZ;AAEF,gBAAgB,cAAc;AAE9B,8BAAe"}