@lobehub/ui 6.0.0-beta.7 → 6.0.0-beta.8

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox"],"sources":["../../../src/mdx/Callout/index.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { AlertOctagon, AlertTriangle, Info, Lightbulb, MessageSquareWarning } from 'lucide-react';\nimport { type FC, useMemo } from 'react';\n\nimport { Flexbox, type FlexboxProps } from '@/Flex';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useTheme } from '@/styles/theme/scope';\n\nimport { styles } from './style';\n\nexport interface CalloutProps extends FlexboxProps {\n  type?: 'tip' | 'error' | 'important' | 'info' | 'warning';\n}\n\nconst Callout: FC<CalloutProps> = ({ children, type = 'info', className, style, ...rest }) => {\n  const theme = useTheme();\n  const typeConfig = useMemo(\n    () => ({\n      error: {\n        background: theme.colorErrorFillTertiary,\n        color: cssVar.colorError,\n        icon: AlertOctagon,\n      },\n      important: {\n        background: theme.purpleFillTertiary,\n        color: cssVar.purple,\n        icon: MessageSquareWarning,\n      },\n      info: {\n        background: theme.colorInfoFillTertiary,\n        color: cssVar.colorInfo,\n        icon: Info,\n      },\n      tip: {\n        background: theme.colorSuccessFillTertiary,\n        color: cssVar.colorSuccess,\n        icon: Lightbulb,\n      },\n      warning: {\n        background: theme.colorWarningFillTertiary,\n        color: cssVar.colorWarning,\n        icon: AlertTriangle,\n      },\n    }),\n    [theme],\n  );\n\n  const selectedType = typeConfig?.[type] || typeConfig.info;\n\n  const { icon, color, background } = selectedType;\n\n  return (\n    <Flexbox\n      horizontal\n      align={'flex-start'}\n      gap={'0.75em'}\n      paddingBlock={'calc(var(--lobe-markdown-margin-multiple) * 1em)'}\n      paddingInline={'1em'}\n      {...styleProps(styles.container, className, {\n        background,\n        boxShadow: `0 0 0 1px ${background} inset`,\n        color,\n        ...style,\n      })}\n      {...rest}\n    >\n      <Icon icon={icon} size={{ size: '1.2em' }} style={{ marginBlock: '0.25em' }} />\n      <div\n        {...styleProps(\n          styles.content,\n          clsx('lobe-mdx-callout-content', type === 'info' && 'lobe-mdx-callout-underline'),\n        )}\n      >\n        <div {...stylex.props(styles.inner)}>{children}</div>\n      </div>\n    </Flexbox>\n  );\n};\n\nCallout.displayName = 'MdxCallout';\n\nexport default Callout;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,WAA6B,EACjC,UACA,OAAO,QACP,WACA,OACA,GAAG,WACC;CACJ,MAAM,QAAQ,SAAS;CACvB,MAAM,aAAa,eAAe;EAChC,OAAO;GACL,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;EACA,WAAW;GACT,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;EACA,MAAM;GACJ,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;EACA,KAAK;GACH,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;EACA,SAAS;GACP,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;CACF,IAAI,CAAC,KAAK,CAAC;CAEX,MAAM,EACJ,MACA,OACA,eAJmB,aAAa,SAAS,WAAW;CAMtD,OAAO,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAc,KAAK;EAAU,cAAc;EAAoD,eAAe;EAAO,GAAI,WAAW,OAAO,WAAW,WAAW;GACjM;GACA,WAAW,aAAa,WAAW;GACnC;GACA,GAAG;EACL,CAAC;EAAG,GAAI;EALD,UAAA,CAMH,oBAAC,MAAD;GAAY;GAAM,MAAM,EACxB,MAAM,QACR;GAAG,OAAO,EACR,aAAa,SACf;EAAI,CAAA,GACF,oBAAC,OAAD;GAAK,GAAI,WAAW,OAAO,SAAS,KAAK,4BAA4B,SAAS,UAAU,4BAA4B,CAAC;GACnH,UAAA,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,KAAK;IAAI;GAAc,CAAA;EACjD,CAAA,CACE;;AACb;AACA,QAAQ,cAAc"}
+{"version":3,"file":"index.mjs","names":["Flexbox","clsx"],"sources":["../../../src/mdx/Callout/index.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { AlertOctagon, AlertTriangle, Info, Lightbulb, MessageSquareWarning } from 'lucide-react';\nimport { type FC, useMemo } from 'react';\n\nimport { Flexbox, type FlexboxProps } from '@/Flex';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useTheme } from '@/styles/theme/scope';\n\nimport { styles } from './style';\n\nexport interface CalloutProps extends FlexboxProps {\n  type?: 'tip' | 'error' | 'important' | 'info' | 'warning';\n}\n\nconst Callout: FC<CalloutProps> = ({ children, type = 'info', className, style, ...rest }) => {\n  const theme = useTheme();\n  const typeConfig = useMemo(\n    () => ({\n      error: {\n        background: theme.colorErrorFillTertiary,\n        color: cssVar.colorError,\n        icon: AlertOctagon,\n      },\n      important: {\n        background: theme.purpleFillTertiary,\n        color: cssVar.purple,\n        icon: MessageSquareWarning,\n      },\n      info: {\n        background: theme.colorInfoFillTertiary,\n        color: cssVar.colorInfo,\n        icon: Info,\n      },\n      tip: {\n        background: theme.colorSuccessFillTertiary,\n        color: cssVar.colorSuccess,\n        icon: Lightbulb,\n      },\n      warning: {\n        background: theme.colorWarningFillTertiary,\n        color: cssVar.colorWarning,\n        icon: AlertTriangle,\n      },\n    }),\n    [theme],\n  );\n\n  const selectedType = typeConfig?.[type] || typeConfig.info;\n\n  const { icon, color, background } = selectedType;\n\n  return (\n    <Flexbox\n      horizontal\n      align={'flex-start'}\n      gap={'0.75em'}\n      paddingBlock={'calc(var(--lobe-markdown-margin-multiple) * 1em)'}\n      paddingInline={'1em'}\n      {...styleProps(styles.container, className, {\n        background,\n        boxShadow: `0 0 0 1px ${background} inset`,\n        color,\n        ...style,\n      })}\n      {...rest}\n    >\n      <Icon icon={icon} size={{ size: '1.2em' }} style={{ marginBlock: '0.25em' }} />\n      <div\n        {...styleProps(\n          styles.content,\n          clsx('lobe-mdx-callout-content', type === 'info' && 'lobe-mdx-callout-underline'),\n        )}\n      >\n        <div {...stylex.props(styles.inner)}>{children}</div>\n      </div>\n    </Flexbox>\n  );\n};\n\nCallout.displayName = 'MdxCallout';\n\nexport default Callout;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,WAA6B,EACjC,UACA,OAAO,QACP,WACA,OACA,GAAG,WACC;CACJ,MAAM,QAAQ,SAAS;CACvB,MAAM,aAAa,eAAe;EAChC,OAAO;GACL,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;EACA,WAAW;GACT,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;EACA,MAAM;GACJ,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;EACA,KAAK;GACH,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;EACA,SAAS;GACP,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;CACF,IAAI,CAAC,KAAK,CAAC;CAEX,MAAM,EACJ,MACA,OACA,eAJmB,aAAa,SAAS,WAAW;CAMtD,OAAO,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAc,KAAK;EAAU,cAAc;EAAoD,eAAe;EAAO,GAAI,WAAW,OAAO,WAAW,WAAW;GACjM;GACA,WAAW,aAAa,WAAW;GACnC;GACA,GAAG;EACL,CAAC;EAAG,GAAI;EALD,UAAA,CAMH,oBAAC,MAAD;GAAY;GAAM,MAAM,EACxB,MAAM,QACR;GAAG,OAAO,EACR,aAAa,SACf;EAAI,CAAA,GACF,oBAAC,OAAD;GAAK,GAAI,WAAW,OAAO,SAASC,OAAK,4BAA4B,SAAS,UAAU,4BAA4B,CAAC;GACnH,UAAA,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,KAAK;IAAI;GAAc,CAAA;EACjD,CAAA,CACE;;AACb;AACA,QAAQ,cAAc"}

package/es/mdx/Cards/Card.mjs

@@ -9,7 +9,7 @@ import Tag from "../../Tag/Tag.mjs";
 import { cardMarker } from "./marker.stylex.mjs";
 import { styles } from "./style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 //#region src/mdx/Cards/Card.tsx
 const Card = ({ tag, tagColor = "blue", icon, title, desc, href, iconProps, className, image, variant = "filled", ...rest }) => {
@@ -19,7 +19,7 @@ const Card = ({ tag, tagColor = "blue", icon, title, desc, href, iconProps, clas
 			clickable: true,
 			align: "flex-start",
 			height: "100%",
-			...styleProps([styles.card, cardMarker], clsx("lobe-mdx-card", className)),
+			...styleProps([styles.card, cardMarker], clsx$1("lobe-mdx-card", className)),
 			variant,
 			...rest,
 			children: [

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

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","names":["Flexbox"],"sources":["../../../src/mdx/Cards/Card.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport type { FC } from 'react';\n\nimport A from '@/A';\nimport Block, { type BlockProps } from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport Icon, { type IconProps } from '@/Icon';\nimport Img from '@/Img';\nimport { styleProps } from '@/styles/stylex/props';\nimport Tag, { type TagProps } from '@/Tag';\n\nimport { cardMarker } from './marker.stylex';\nimport { styles } from './style';\n\nexport interface CardProps extends Omit<BlockProps, 'children'> {\n  desc?: string;\n  href?: string;\n  icon?: IconProps['icon'];\n  iconProps?: Omit<IconProps, 'icon'>;\n  image?: string;\n  tag?: string;\n  tagColor?: TagProps['color'];\n  title: string;\n}\n\nconst Card: FC<CardProps> = ({\n  tag,\n  tagColor = 'blue',\n  icon,\n  title,\n  desc,\n  href,\n  iconProps,\n  className,\n  image,\n  variant = 'filled',\n  ...rest\n}) => {\n  return (\n    <A href={href}>\n      <Block\n        clickable\n        align={'flex-start'}\n        height={'100%'}\n        {...styleProps([styles.card, cardMarker], clsx('lobe-mdx-card', className))}\n        variant={variant}\n        {...rest}\n      >\n        {image && (\n          <Img\n            alt={title}\n            height={100}\n            src={image}\n            style={{ height: 'auto', width: '100%' }}\n            width={250}\n          />\n        )}\n        {tag && (\n          <Flexbox\n            align={'flex-start'}\n            padding={'1.4em'}\n            style={{ paddingBottom: '0.2em', paddingTop: '1.8em' }}\n            width={'100%'}\n          >\n            <Tag\n              color={tagColor}\n              style={{\n                borderRadius: '1em',\n                fontSize: '0.8em',\n                fontWeight: 500,\n                paddingBlock: '0.1em',\n                paddingInline: '0.6em',\n              }}\n            >\n              {tag}\n            </Tag>\n          </Flexbox>\n        )}\n        <Flexbox\n          horizontal\n          align={desc ? 'flex-start' : 'center'}\n          gap={'0.75em'}\n          padding={'1.4em'}\n          width={'100%'}\n        >\n          {!image && icon && (\n            <Icon\n              {...styleProps(styles.icon, 'mdx-card-icon')}\n              icon={icon}\n              size={{ size: '1.5em' }}\n              {...iconProps}\n            />\n          )}\n          <Flexbox gap={'0.2em'}>\n            <h3>{title}</h3>\n            {desc && <p {...stylex.props(styles.desc)}>{desc}</p>}\n          </Flexbox>\n        </Flexbox>\n      </Block>\n    </A>\n  );\n};\n\nCard.displayName = 'MdxCard';\n\nexport default Card;\n"],"mappings":";;;;;;;;;;;;;;AAyBA,MAAM,QAAuB,EAC3B,KACA,WAAW,QACX,MACA,OACA,MACA,MACA,WACA,WACA,OACA,UAAU,UACV,GAAG,WACC;CACJ,OAAO,oBAAC,GAAD;EAAS;EACZ,UAAA,qBAAC,OAAD;GAAO,WAAA;GAAU,OAAO;GAAc,QAAQ;GAAQ,GAAI,WAAW,CAAC,OAAO,MAAM,UAAU,GAAG,KAAK,iBAAiB,SAAS,CAAC;GAAY;GAAS,GAAI;GAAzJ,UAAA;IACG,SAAS,oBAAC,KAAD;KAAK,KAAK;KAAO,QAAQ;KAAK,KAAK;KAAO,OAAO;MAC3D,QAAQ;MACR,OAAO;KACT;KAAG,OAAO;IAAM,CAAA;IACb,OAAO,oBAACA,mBAAD;KAAS,OAAO;KAAc,SAAS;KAAS,OAAO;MAC/D,eAAe;MACf,YAAY;KACd;KAAG,OAAO;KACJ,UAAA,oBAAC,KAAD;MAAK,OAAO;MAAU,OAAO;OAC/B,cAAc;OACd,UAAU;OACV,YAAY;OACZ,cAAc;OACd,eAAe;MACjB;MACO,UAAA;KACE,CAAA;IACE,CAAA;IACX,qBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO,OAAO,eAAe;KAAU,KAAK;KAAU,SAAS;KAAS,OAAO;KAAnG,UAAA,CACG,CAAC,SAAS,QAAQ,oBAAC,MAAD;MAAM,GAAI,WAAW,OAAO,MAAM,eAAe;MAAS;MAAM,MAAM,EACzF,MAAM,QACR;MAAG,GAAI;KAAY,CAAA,GACjB,qBAACA,mBAAD;MAAS,KAAK;MAAd,UAAA,CACE,oBAAC,MAAD,EAAA,UAAK,MAAU,CAAA,GACd,QAAQ,oBAAC,KAAD;OAAG,GAAI,OAAO,MAAM,OAAO,IAAI;OAAI,UAAA;MAAQ,CAAA,CAC7C;KACF,CAAA,CAAA;;GACJ;;CACN,CAAA;AACP;AACA,KAAK,cAAc"}
+{"version":3,"file":"Card.mjs","names":["clsx","Flexbox"],"sources":["../../../src/mdx/Cards/Card.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport type { FC } from 'react';\n\nimport A from '@/A';\nimport Block, { type BlockProps } from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport Icon, { type IconProps } from '@/Icon';\nimport Img from '@/Img';\nimport { styleProps } from '@/styles/stylex/props';\nimport Tag, { type TagProps } from '@/Tag';\n\nimport { cardMarker } from './marker.stylex';\nimport { styles } from './style';\n\nexport interface CardProps extends Omit<BlockProps, 'children'> {\n  desc?: string;\n  href?: string;\n  icon?: IconProps['icon'];\n  iconProps?: Omit<IconProps, 'icon'>;\n  image?: string;\n  tag?: string;\n  tagColor?: TagProps['color'];\n  title: string;\n}\n\nconst Card: FC<CardProps> = ({\n  tag,\n  tagColor = 'blue',\n  icon,\n  title,\n  desc,\n  href,\n  iconProps,\n  className,\n  image,\n  variant = 'filled',\n  ...rest\n}) => {\n  return (\n    <A href={href}>\n      <Block\n        clickable\n        align={'flex-start'}\n        height={'100%'}\n        {...styleProps([styles.card, cardMarker], clsx('lobe-mdx-card', className))}\n        variant={variant}\n        {...rest}\n      >\n        {image && (\n          <Img\n            alt={title}\n            height={100}\n            src={image}\n            style={{ height: 'auto', width: '100%' }}\n            width={250}\n          />\n        )}\n        {tag && (\n          <Flexbox\n            align={'flex-start'}\n            padding={'1.4em'}\n            style={{ paddingBottom: '0.2em', paddingTop: '1.8em' }}\n            width={'100%'}\n          >\n            <Tag\n              color={tagColor}\n              style={{\n                borderRadius: '1em',\n                fontSize: '0.8em',\n                fontWeight: 500,\n                paddingBlock: '0.1em',\n                paddingInline: '0.6em',\n              }}\n            >\n              {tag}\n            </Tag>\n          </Flexbox>\n        )}\n        <Flexbox\n          horizontal\n          align={desc ? 'flex-start' : 'center'}\n          gap={'0.75em'}\n          padding={'1.4em'}\n          width={'100%'}\n        >\n          {!image && icon && (\n            <Icon\n              {...styleProps(styles.icon, 'mdx-card-icon')}\n              icon={icon}\n              size={{ size: '1.5em' }}\n              {...iconProps}\n            />\n          )}\n          <Flexbox gap={'0.2em'}>\n            <h3>{title}</h3>\n            {desc && <p {...stylex.props(styles.desc)}>{desc}</p>}\n          </Flexbox>\n        </Flexbox>\n      </Block>\n    </A>\n  );\n};\n\nCard.displayName = 'MdxCard';\n\nexport default Card;\n"],"mappings":";;;;;;;;;;;;;;AAyBA,MAAM,QAAuB,EAC3B,KACA,WAAW,QACX,MACA,OACA,MACA,MACA,WACA,WACA,OACA,UAAU,UACV,GAAG,WACC;CACJ,OAAO,oBAAC,GAAD;EAAS;EACZ,UAAA,qBAAC,OAAD;GAAO,WAAA;GAAU,OAAO;GAAc,QAAQ;GAAQ,GAAI,WAAW,CAAC,OAAO,MAAM,UAAU,GAAGA,OAAK,iBAAiB,SAAS,CAAC;GAAY;GAAS,GAAI;GAAzJ,UAAA;IACG,SAAS,oBAAC,KAAD;KAAK,KAAK;KAAO,QAAQ;KAAK,KAAK;KAAO,OAAO;MAC3D,QAAQ;MACR,OAAO;KACT;KAAG,OAAO;IAAM,CAAA;IACb,OAAO,oBAACC,mBAAD;KAAS,OAAO;KAAc,SAAS;KAAS,OAAO;MAC/D,eAAe;MACf,YAAY;KACd;KAAG,OAAO;KACJ,UAAA,oBAAC,KAAD;MAAK,OAAO;MAAU,OAAO;OAC/B,cAAc;OACd,UAAU;OACV,YAAY;OACZ,cAAc;OACd,eAAe;MACjB;MACO,UAAA;KACE,CAAA;IACE,CAAA;IACX,qBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO,OAAO,eAAe;KAAU,KAAK;KAAU,SAAS;KAAS,OAAO;KAAnG,UAAA,CACG,CAAC,SAAS,QAAQ,oBAAC,MAAD;MAAM,GAAI,WAAW,OAAO,MAAM,eAAe;MAAS;MAAM,MAAM,EACzF,MAAM,QACR;MAAG,GAAI;KAAY,CAAA,GACjB,qBAACA,mBAAD;MAAS,KAAK;MAAd,UAAA,CACE,oBAAC,MAAD,EAAA,UAAK,MAAU,CAAA,GACd,QAAQ,oBAAC,KAAD;OAAG,GAAI,OAAO,MAAM,OAAO,IAAI;OAAI,UAAA;MAAQ,CAAA,CAC7C;KACF,CAAA,CAAA;;GACJ;;CACN,CAAA;AACP;AACA,KAAK,cAAc"}

package/es/mdx/Cards/index.mjs

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

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

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

package/es/mdx/Mdx/index.mjs

@@ -11,7 +11,7 @@ import mdxComponents from "../mdxComponents/index.mjs";
 import CodeBlock from "../mdxComponents/CodeBlock.mjs";
 import { memo, useEffect, useMemo, useState } from "react";
 import jsxRuntime, { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { rehypeGithubAlerts } from "rehype-github-alerts";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
@@ -84,7 +84,7 @@ const Mdx = memo(({ children, className, style, fullFeaturedCodeBlock = true, en
 	]);
 	if (!escapedContent || !MDXContent) return fallback;
 	return /* @__PURE__ */ jsx(Typography, {
-		className: clsx(enableLatex && styles.latex, isChatMode && styles.chat, className),
+		className: clsx$1(enableLatex && styles.latex, isChatMode && styles.chat, className),
 		"data-code-type": "mdx",
 		fontSize,
 		headerMultiple,

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

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

package/es/mdx/Steps/index.mjs

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

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

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

package/es/mdx/mdxComponents/Pre.mjs

@@ -5,12 +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 clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/mdx/mdxComponents/Pre.tsx
 const Pre = ({ fullFeatured, fileName, allowChangeLanguage, language = FALLBACK_LANG, children, className, style, variant = "filled", icon, theme, ...rest }) => {
 	return /* @__PURE__ */ jsx(Highlighter, {
 		allowChangeLanguage,
-		className: clsx("lobe-mdx-pre", className),
+		className: clsx$1("lobe-mdx-pre", className),
 		fileName,
 		fullFeatured,
 		icon,
@@ -24,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: clsx("lobe-mdx-pre", className),
+		className: clsx$1("lobe-mdx-pre", className),
 		"data-code-type": "highlighter",
 		language,
 		style,
@@ -36,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: clsx("lobe-mdx-pre", className),
+		className: clsx$1("lobe-mdx-pre", className),
 		fullFeatured,
 		style,
 		theme,
@@ -48,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: clsx("lobe-mdx-pre", 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 './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,WAAW,KAAK,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,WAAW,KAAK,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,WAAW,KAAK,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,WAAW,KAAK,gBAAgB,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/storybook/StoryBook/style.mjs

@@ -2,12 +2,14 @@
 const styles = {
 	editor: {
 		kAzted: "lb1us19tq",
+		k7Eaqz: "lbeuugli",
 		kzqmXN: "lbh8yej3",
 		$$css: true
 	},
 	left: {
 		kVQacm: "lbysyzu8",
 		kVAEAm: "lb1n2onr6",
+		k7Eaqz: "lbeuugli",
 		$$css: true
 	}
 };

package/es/storybook/StoryBook/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/storybook/StoryBook/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  editor: {\n    minHeight: '100%',\n    width: '100%',\n  },\n  left: {\n    overflow: 'auto',\n    position: 'relative',\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/storybook/StoryBook/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  editor: {\n    minHeight: '100%',\n    /* A demo can be wider than the frame (tables with `scroll.x`, wide code).\n       Without this the item's min-content inflates the parent grid track and\n       the demo overflows the frame instead of scrolling inside it. */\n    minWidth: 0,\n    width: '100%',\n  },\n  left: {\n    overflow: 'auto',\n    position: 'relative',\n    minWidth: 0,\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}