@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.10

package/es/List/ListRow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListRow.mjs","names":[],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { memo, type MouseEvent } from 'react';\n\nimport A from '@/A';\nimport Icon from '@/Icon';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { listItemMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { ListItemType, ListProps } from './type';\n\nexport type ListRowXstyle = (\n  item: ListItemType,\n  active: boolean,\n) => Parameters<typeof styleProps>[0];\n\ninterface ListRowProps {\n  active: boolean;\n  classNames?: ListProps['classNames'];\n  compact: boolean;\n  item: ListItemType;\n  onSelect: (item: ListItemType, event: MouseEvent<HTMLElement>) => void;\n  styles?: ListProps['styles'];\n  xstyle?: ListRowXstyle;\n}\n\nconst ListRow = memo<ListRowProps>(\n  ({ active, classNames, compact, item, onSelect, styles: customStyles, xstyle }) => {\n    const { actions, avatar, danger, description, disabled, extra, href, icon, label, showAction } =\n      item;\n\n    const handleClick = (event: MouseEvent<HTMLElement>) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n      onSelect(item, event);\n    };\n\n    const rowClassName = styleProps(\n      [\n        focusRing.info,\n        styles.row,\n        compact && styles.compactRow,\n        active && styles.active,\n        danger && styles.danger,\n        disabled && styles.disabled,\n        xstyle?.(item, active),\n      ],\n      clsx(classNames?.item, item.className),\n    ).className;\n    const rowStyle = { ...customStyles?.item, ...item.style };\n\n    const content = (\n      <>\n        {avatar ?? (icon ? <Icon icon={icon} size={16} /> : null)}\n        <span {...stylex.props(styles.body)}>\n          <span\n            {...styleProps(\n              styles.label,\n              clsx('lobe-list-label', classNames?.label),\n              customStyles?.label,\n            )}\n          >\n            {label}\n          </span>\n          {description != null && (\n            <span\n              {...styleProps(\n                styles.description,\n                classNames?.description,\n                customStyles?.description,\n              )}\n            >\n              {description}\n            </span>\n          )}\n        </span>\n        {extra != null && (\n          <span {...styleProps(styles.extra, classNames?.extra, customStyles?.extra)}>{extra}</span>\n        )}\n      </>\n    );\n\n    return (\n      <li {...stylex.props(styles.item, listItemMarker)}>\n        {href && !disabled ? (\n          <A\n            aria-current={active ? 'page' : undefined}\n            className={rowClassName}\n            href={href}\n            style={rowStyle}\n            onClick={handleClick}\n          >\n            {content}\n          </A>\n        ) : (\n          <button\n            aria-current={active ? 'true' : undefined}\n            aria-disabled={disabled || undefined}\n            className={rowClassName}\n            style={rowStyle}\n            type=\"button\"\n            onClick={handleClick}\n          >\n            {content}\n          </button>\n        )}\n        {actions != null && (\n          <span\n            {...styleProps(\n              [styles.actions, showAction && styles.showAction],\n              classNames?.actions,\n              customStyles?.actions,\n            )}\n          >\n            {actions}\n          </span>\n        )}\n      </li>\n    );\n  },\n);\n\nListRow.displayName = 'ListRow';\n\nexport default ListRow;\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAM,UAAU,MAAoB,EAClC,QACA,YACA,SACA,MACA,UACA,QAAQ,cACR,aACI;CACJ,MAAM,EACJ,SACA,QACA,QACA,aACA,UACA,OACA,MACA,MACA,OACA,eACE;CACJ,MAAM,eAAe,UAAmC;EACtD,IAAI,UAAU;GACZ,MAAM,eAAe;GACrB;EACF;EACA,SAAS,MAAM,KAAK;CACtB;CACA,MAAM,eAAe,WAAW;EAAC,UAAU;EAAM,OAAO;EAAK,WAAW,OAAO;EAAY,UAAU,OAAO;EAAQ,UAAU,OAAO;EAAQ,YAAY,OAAO;EAAU,SAAS,MAAM,MAAM;CAAC,GAAG,KAAK,YAAY,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC;CAC3O,MAAM,WAAW;EACf,GAAG,cAAc;EACjB,GAAG,KAAK;CACV;CACA,MAAM,UAAU,qBAAA,YAAA,EAAA,UAAA;EACT,WAAW,OAAO,oBAAC,MAAD;GAAY;GAAM,MAAM;EAAK,CAAA,IAAI;EACpD,qBAAC,QAAD;GAAM,GAAI,OAAO,MAAM,OAAO,IAAI;GAAlC,UAAA,CACE,oBAAC,QAAD;IAAM,GAAI,WAAW,OAAO,OAAO,KAAK,mBAAmB,YAAY,KAAK,GAAG,cAAc,KAAK;IAC/F,UAAA;GACG,CAAA,GACL,eAAe,QAAQ,oBAAC,QAAD;IAAM,GAAI,WAAW,OAAO,aAAa,YAAY,aAAa,cAAc,WAAW;IAC9G,UAAA;GACG,CAAA,CACJ;;EACL,SAAS,QAAQ,oBAAC,QAAD;GAAM,GAAI,WAAW,OAAO,OAAO,YAAY,OAAO,cAAc,KAAK;GAAI,UAAA;EAAY,CAAA;CAC3G,EAAA,CAAA;CACN,OAAO,qBAAC,MAAD;EAAI,GAAI,OAAO,MAAM,OAAO,MAAM,cAAc;EAAhD,UAAA,CACA,QAAQ,CAAC,WAAW,oBAAC,GAAD;GAAG,gBAAc,SAAS,SAAS,KAAA;GAAW,WAAW;GAAoB;GAAM,OAAO;GAAU,SAAS;GAC7H,UAAA;EACA,CAAA,IAAI,oBAAC,UAAD;GAAQ,gBAAc,SAAS,SAAS,KAAA;GAAW,iBAAe,YAAY,KAAA;GAAW,WAAW;GAAc,OAAO;GAAU,MAAK;GAAS,SAAS;GAC9J,UAAA;EACK,CAAA,GACT,WAAW,QAAQ,oBAAC,QAAD;GAAM,GAAI,WAAW,CAAC,OAAO,SAAS,cAAc,OAAO,UAAU,GAAG,YAAY,SAAS,cAAc,OAAO;GACjI,UAAA;EACG,CAAA,CACN;;AACV,CAAC;AACD,QAAQ,cAAc"}
+{"version":3,"file":"ListRow.mjs","names":["clsx"],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { memo, type MouseEvent } from 'react';\n\nimport A from '@/A';\nimport Icon from '@/Icon';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { listItemMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { ListItemType, ListProps } from './type';\n\nexport type ListRowXstyle = (\n  item: ListItemType,\n  active: boolean,\n) => Parameters<typeof styleProps>[0];\n\ninterface ListRowProps {\n  active: boolean;\n  classNames?: ListProps['classNames'];\n  compact: boolean;\n  item: ListItemType;\n  onSelect: (item: ListItemType, event: MouseEvent<HTMLElement>) => void;\n  styles?: ListProps['styles'];\n  xstyle?: ListRowXstyle;\n}\n\nconst ListRow = memo<ListRowProps>(\n  ({ active, classNames, compact, item, onSelect, styles: customStyles, xstyle }) => {\n    const { actions, avatar, danger, description, disabled, extra, href, icon, label, showAction } =\n      item;\n\n    const handleClick = (event: MouseEvent<HTMLElement>) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n      onSelect(item, event);\n    };\n\n    const rowClassName = styleProps(\n      [\n        focusRing.info,\n        styles.row,\n        compact && styles.compactRow,\n        active && styles.active,\n        danger && styles.danger,\n        disabled && styles.disabled,\n        xstyle?.(item, active),\n      ],\n      clsx(classNames?.item, item.className),\n    ).className;\n    const rowStyle = { ...customStyles?.item, ...item.style };\n\n    const content = (\n      <>\n        {avatar ?? (icon ? <Icon icon={icon} size={16} /> : null)}\n        <span {...stylex.props(styles.body)}>\n          <span\n            {...styleProps(\n              styles.label,\n              clsx('lobe-list-label', classNames?.label),\n              customStyles?.label,\n            )}\n          >\n            {label}\n          </span>\n          {description != null && (\n            <span\n              {...styleProps(\n                styles.description,\n                classNames?.description,\n                customStyles?.description,\n              )}\n            >\n              {description}\n            </span>\n          )}\n        </span>\n        {extra != null && (\n          <span {...styleProps(styles.extra, classNames?.extra, customStyles?.extra)}>{extra}</span>\n        )}\n      </>\n    );\n\n    return (\n      <li {...stylex.props(styles.item, listItemMarker)}>\n        {href && !disabled ? (\n          <A\n            aria-current={active ? 'page' : undefined}\n            className={rowClassName}\n            href={href}\n            style={rowStyle}\n            onClick={handleClick}\n          >\n            {content}\n          </A>\n        ) : (\n          <button\n            aria-current={active ? 'true' : undefined}\n            aria-disabled={disabled || undefined}\n            className={rowClassName}\n            style={rowStyle}\n            type=\"button\"\n            onClick={handleClick}\n          >\n            {content}\n          </button>\n        )}\n        {actions != null && (\n          <span\n            {...styleProps(\n              [styles.actions, showAction && styles.showAction],\n              classNames?.actions,\n              customStyles?.actions,\n            )}\n          >\n            {actions}\n          </span>\n        )}\n      </li>\n    );\n  },\n);\n\nListRow.displayName = 'ListRow';\n\nexport default ListRow;\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAM,UAAU,MAAoB,EAClC,QACA,YACA,SACA,MACA,UACA,QAAQ,cACR,aACI;CACJ,MAAM,EACJ,SACA,QACA,QACA,aACA,UACA,OACA,MACA,MACA,OACA,eACE;CACJ,MAAM,eAAe,UAAmC;EACtD,IAAI,UAAU;GACZ,MAAM,eAAe;GACrB;EACF;EACA,SAAS,MAAM,KAAK;CACtB;CACA,MAAM,eAAe,WAAW;EAAC,UAAU;EAAM,OAAO;EAAK,WAAW,OAAO;EAAY,UAAU,OAAO;EAAQ,UAAU,OAAO;EAAQ,YAAY,OAAO;EAAU,SAAS,MAAM,MAAM;CAAC,GAAGA,OAAK,YAAY,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC;CAC3O,MAAM,WAAW;EACf,GAAG,cAAc;EACjB,GAAG,KAAK;CACV;CACA,MAAM,UAAU,qBAAA,YAAA,EAAA,UAAA;EACT,WAAW,OAAO,oBAAC,MAAD;GAAY;GAAM,MAAM;EAAK,CAAA,IAAI;EACpD,qBAAC,QAAD;GAAM,GAAI,OAAO,MAAM,OAAO,IAAI;GAAlC,UAAA,CACE,oBAAC,QAAD;IAAM,GAAI,WAAW,OAAO,OAAOA,OAAK,mBAAmB,YAAY,KAAK,GAAG,cAAc,KAAK;IAC/F,UAAA;GACG,CAAA,GACL,eAAe,QAAQ,oBAAC,QAAD;IAAM,GAAI,WAAW,OAAO,aAAa,YAAY,aAAa,cAAc,WAAW;IAC9G,UAAA;GACG,CAAA,CACJ;;EACL,SAAS,QAAQ,oBAAC,QAAD;GAAM,GAAI,WAAW,OAAO,OAAO,YAAY,OAAO,cAAc,KAAK;GAAI,UAAA;EAAY,CAAA;CAC3G,EAAA,CAAA;CACN,OAAO,qBAAC,MAAD;EAAI,GAAI,OAAO,MAAM,OAAO,MAAM,cAAc;EAAhD,UAAA,CACA,QAAQ,CAAC,WAAW,oBAAC,GAAD;GAAG,gBAAc,SAAS,SAAS,KAAA;GAAW,WAAW;GAAoB;GAAM,OAAO;GAAU,SAAS;GAC7H,UAAA;EACA,CAAA,IAAI,oBAAC,UAAD;GAAQ,gBAAc,SAAS,SAAS,KAAA;GAAW,iBAAe,YAAY,KAAA;GAAW,WAAW;GAAc,OAAO;GAAU,MAAK;GAAS,SAAS;GAC9J,UAAA;EACK,CAAA,GACT,WAAW,QAAQ,oBAAC,QAAD;GAAM,GAAI,WAAW,CAAC,OAAO,SAAS,cAAc,OAAO,UAAU,GAAG,YAAY,SAAS,cAAc,OAAO;GACjI,UAAA;EACG,CAAA,CACN;;AACV,CAAC;AACD,QAAQ,cAAc"}

package/es/Markdown/Markdown.mjs

@@ -9,7 +9,7 @@ import { StreamdownRender } from "./SyntaxMarkdown/StreamdownRender.mjs";
 import { TypographyImpl } from "./Typography.mjs";
 import { memo, useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/Markdown/Markdown.tsx
 const Markdown = memo((props) => {
 	const { ref, children = "", className, style, fullFeaturedCodeBlock, onDoubleClick, animated, enableHtmlPreview = false, enableLatex = true, enableMermaid = true, enableImageGallery, enableCustomFootnotes, enableGithubAlert, enableStream = true, componentProps, rehypePluginsAhead, allowHtml, borderRadius, fontSize = props.variant === "chat" ? 14 : void 0, headerMultiple = props.variant === "chat" ? .25 : void 0, marginMultiple = props.variant === "chat" ? 1 : void 0, variant = "default", reactMarkdownProps, lineHeight = props.variant === "chat" ? 1.6 : void 0, rehypePlugins, remarkPlugins, remarkPluginsAhead, components = {}, customRender, showFootnotes = true, streamAnimationGranularity, streamSmoothingPreset, citations, ...rest } = props;
@@ -35,7 +35,7 @@ const Markdown = memo((props) => {
 			ref,
 			style,
 			xstyle: rootStyles.root,
-			className: clsx(variant === "chat" && styles.chat, enableLatex && styles.latex, styles.gfm, className),
+			className: clsx$1(variant === "chat" && styles.chat, enableLatex && styles.latex, styles.gfm, className),
 			onDoubleClick,
 			...rest,
 			children: /* @__PURE__ */ jsx(MarkdownProvider, {

package/es/Markdown/Markdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.mjs","names":["MarkdownRender"],"sources":["../../src/Markdown/Markdown.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo, useCallback } from 'react';\n\nimport { useStableValue } from '@/hooks/useStableValue';\nimport { PreviewGroup } from '@/Image';\n\nimport { MarkdownProvider } from './components/MarkdownProvider';\nimport { useDelayedAnimated } from './components/useDelayedAnimated';\nimport { rootStyles, styles } from './style';\nimport { MarkdownRender, StreamdownRender } from './SyntaxMarkdown';\nimport { type MarkdownProps } from './type';\nimport { TypographyImpl } from './Typography';\n\nconst Markdown = memo<MarkdownProps>((props) => {\n  const {\n    ref,\n    children = '',\n    className,\n    style,\n    fullFeaturedCodeBlock,\n    onDoubleClick,\n    animated,\n    enableHtmlPreview = false,\n    enableLatex = true,\n    enableMermaid = true,\n    enableImageGallery,\n    enableCustomFootnotes,\n    enableGithubAlert,\n    enableStream = true,\n    componentProps,\n    rehypePluginsAhead,\n    allowHtml,\n    borderRadius,\n    fontSize = props.variant === 'chat' ? 14 : undefined,\n    headerMultiple = props.variant === 'chat' ? 0.25 : undefined,\n    marginMultiple = props.variant === 'chat' ? 1 : undefined,\n    variant = 'default',\n    reactMarkdownProps,\n    lineHeight = props.variant === 'chat' ? 1.6 : undefined,\n    rehypePlugins,\n    remarkPlugins,\n    remarkPluginsAhead,\n    components = {},\n    customRender,\n    showFootnotes = true,\n    streamAnimationGranularity,\n    streamSmoothingPreset,\n    citations,\n    ...rest\n  } = props;\n\n  const delayedAnimated = useDelayedAnimated(animated);\n\n  // Stabilise structural props so an inline `componentProps={{ html:\n  // {...} }}` from the caller doesn't cascade through MarkdownProvider →\n  // useMarkdownComponents → react-markdown's `components` and remount the\n  // entire code-block subtree (including the HtmlPreview iframe) on\n  // every parent render. The deep-equal compare treats inline literals\n  // as the same object as long as their structure matches. Inline\n  // callbacks (`actionsRender`, custom `components`) still need\n  // `useCallback` at the call site — function bodies aren't compared.\n  const stableComponentProps = useStableValue(componentProps);\n  const stableComponents = useStableValue(components);\n\n  const Render = useCallback(\n    ({\n      enableStream,\n      children,\n      reactMarkdownProps,\n    }: Pick<MarkdownProps, 'children' | 'enableStream' | 'reactMarkdownProps'>) => {\n      const DefaultRender = enableStream ? StreamdownRender : MarkdownRender;\n      const defaultDOM = <DefaultRender {...reactMarkdownProps}>{children}</DefaultRender>;\n      return customRender ? customRender(defaultDOM, { text: children }) : defaultDOM;\n    },\n    [customRender],\n  );\n\n  return (\n    <PreviewGroup enable={enableImageGallery}>\n      <TypographyImpl\n        borderRadius={borderRadius}\n        data-code-type=\"markdown\"\n        fontSize={fontSize}\n        headerMultiple={headerMultiple}\n        lineHeight={lineHeight}\n        marginMultiple={marginMultiple}\n        ref={ref}\n        style={style}\n        xstyle={rootStyles.root}\n        className={clsx(\n          variant === 'chat' && styles.chat,\n          enableLatex && styles.latex,\n          styles.gfm,\n          className,\n        )}\n        onDoubleClick={onDoubleClick}\n        {...rest}\n      >\n        <MarkdownProvider\n          allowHtml={allowHtml}\n          animated={delayedAnimated}\n          citations={citations}\n          componentProps={stableComponentProps}\n          components={stableComponents}\n          enableCustomFootnotes={enableCustomFootnotes}\n          enableGithubAlert={enableGithubAlert}\n          enableHtmlPreview={enableHtmlPreview}\n          enableLatex={enableLatex}\n          enableMermaid={enableMermaid}\n          fullFeaturedCodeBlock={fullFeaturedCodeBlock}\n          rehypePlugins={rehypePlugins}\n          rehypePluginsAhead={rehypePluginsAhead}\n          remarkPlugins={remarkPlugins}\n          remarkPluginsAhead={remarkPluginsAhead}\n          showFootnotes={showFootnotes}\n          streamAnimationGranularity={streamAnimationGranularity}\n          streamSmoothingPreset={streamSmoothingPreset}\n          variant={variant}\n        >\n          <Render\n            enableStream={enableStream && delayedAnimated}\n            reactMarkdownProps={reactMarkdownProps}\n          >\n            {children}\n          </Render>\n        </MarkdownProvider>\n      </TypographyImpl>\n    </PreviewGroup>\n  );\n});\n\nMarkdown.displayName = 'Markdown';\n\nexport default Markdown;\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,WAAW,MAAqB,UAAU;CAC9C,MAAM,EACJ,KACA,WAAW,IACX,WACA,OACA,uBACA,eACA,UACA,oBAAoB,OACpB,cAAc,MACd,gBAAgB,MAChB,oBACA,uBACA,mBACA,eAAe,MACf,gBACA,oBACA,WACA,cACA,WAAW,MAAM,YAAY,SAAS,KAAK,KAAA,GAC3C,iBAAiB,MAAM,YAAY,SAAS,MAAO,KAAA,GACnD,iBAAiB,MAAM,YAAY,SAAS,IAAI,KAAA,GAChD,UAAU,WACV,oBACA,aAAa,MAAM,YAAY,SAAS,MAAM,KAAA,GAC9C,eACA,eACA,oBACA,aAAa,CAAC,GACd,cACA,gBAAgB,MAChB,4BACA,uBACA,WACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB,QAAQ;CAUnD,MAAM,uBAAuB,eAAe,cAAc;CAC1D,MAAM,mBAAmB,eAAe,UAAU;CAElD,MAAM,SAAS,aACZ,EACC,cACA,UACA,yBAC6E;EAE7E,MAAM,aAAa,oBADG,eAAe,mBAAmBA,kBACrC;GAAe,GAAI;GAAqB;EAAwB,CAAA;EACnF,OAAO,eAAe,aAAa,YAAY,EAAE,MAAM,SAAS,CAAC,IAAI;CACvE,GACA,CAAC,YAAY,CACf;CAEA,OACE,oBAAC,cAAD;EAAc,QAAQ;EACpB,UAAA,oBAAC,gBAAD;GACgB;GACd,kBAAe;GACL;GACM;GACJ;GACI;GACX;GACE;GACP,QAAQ,WAAW;GACnB,WAAW,KACT,YAAY,UAAU,OAAO,MAC7B,eAAe,OAAO,OACtB,OAAO,KACP,SACF;GACe;GACf,GAAI;GAEJ,UAAA,oBAAC,kBAAD;IACa;IACX,UAAU;IACC;IACX,gBAAgB;IAChB,YAAY;IACW;IACJ;IACA;IACN;IACE;IACQ;IACR;IACK;IACL;IACK;IACL;IACa;IACL;IACd;IAET,UAAA,oBAAC,QAAD;KACE,cAAc,gBAAgB;KACV;KAEnB;IACK,CAAA;GACQ,CAAA;EACJ,CAAA;CACJ,CAAA;AAElB,CAAC;AAED,SAAS,cAAc"}
+{"version":3,"file":"Markdown.mjs","names":["MarkdownRender","clsx"],"sources":["../../src/Markdown/Markdown.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo, useCallback } from 'react';\n\nimport { useStableValue } from '@/hooks/useStableValue';\nimport { PreviewGroup } from '@/Image';\n\nimport { MarkdownProvider } from './components/MarkdownProvider';\nimport { useDelayedAnimated } from './components/useDelayedAnimated';\nimport { rootStyles, styles } from './style';\nimport { MarkdownRender, StreamdownRender } from './SyntaxMarkdown';\nimport { type MarkdownProps } from './type';\nimport { TypographyImpl } from './Typography';\n\nconst Markdown = memo<MarkdownProps>((props) => {\n  const {\n    ref,\n    children = '',\n    className,\n    style,\n    fullFeaturedCodeBlock,\n    onDoubleClick,\n    animated,\n    enableHtmlPreview = false,\n    enableLatex = true,\n    enableMermaid = true,\n    enableImageGallery,\n    enableCustomFootnotes,\n    enableGithubAlert,\n    enableStream = true,\n    componentProps,\n    rehypePluginsAhead,\n    allowHtml,\n    borderRadius,\n    fontSize = props.variant === 'chat' ? 14 : undefined,\n    headerMultiple = props.variant === 'chat' ? 0.25 : undefined,\n    marginMultiple = props.variant === 'chat' ? 1 : undefined,\n    variant = 'default',\n    reactMarkdownProps,\n    lineHeight = props.variant === 'chat' ? 1.6 : undefined,\n    rehypePlugins,\n    remarkPlugins,\n    remarkPluginsAhead,\n    components = {},\n    customRender,\n    showFootnotes = true,\n    streamAnimationGranularity,\n    streamSmoothingPreset,\n    citations,\n    ...rest\n  } = props;\n\n  const delayedAnimated = useDelayedAnimated(animated);\n\n  // Stabilise structural props so an inline `componentProps={{ html:\n  // {...} }}` from the caller doesn't cascade through MarkdownProvider →\n  // useMarkdownComponents → react-markdown's `components` and remount the\n  // entire code-block subtree (including the HtmlPreview iframe) on\n  // every parent render. The deep-equal compare treats inline literals\n  // as the same object as long as their structure matches. Inline\n  // callbacks (`actionsRender`, custom `components`) still need\n  // `useCallback` at the call site — function bodies aren't compared.\n  const stableComponentProps = useStableValue(componentProps);\n  const stableComponents = useStableValue(components);\n\n  const Render = useCallback(\n    ({\n      enableStream,\n      children,\n      reactMarkdownProps,\n    }: Pick<MarkdownProps, 'children' | 'enableStream' | 'reactMarkdownProps'>) => {\n      const DefaultRender = enableStream ? StreamdownRender : MarkdownRender;\n      const defaultDOM = <DefaultRender {...reactMarkdownProps}>{children}</DefaultRender>;\n      return customRender ? customRender(defaultDOM, { text: children }) : defaultDOM;\n    },\n    [customRender],\n  );\n\n  return (\n    <PreviewGroup enable={enableImageGallery}>\n      <TypographyImpl\n        borderRadius={borderRadius}\n        data-code-type=\"markdown\"\n        fontSize={fontSize}\n        headerMultiple={headerMultiple}\n        lineHeight={lineHeight}\n        marginMultiple={marginMultiple}\n        ref={ref}\n        style={style}\n        xstyle={rootStyles.root}\n        className={clsx(\n          variant === 'chat' && styles.chat,\n          enableLatex && styles.latex,\n          styles.gfm,\n          className,\n        )}\n        onDoubleClick={onDoubleClick}\n        {...rest}\n      >\n        <MarkdownProvider\n          allowHtml={allowHtml}\n          animated={delayedAnimated}\n          citations={citations}\n          componentProps={stableComponentProps}\n          components={stableComponents}\n          enableCustomFootnotes={enableCustomFootnotes}\n          enableGithubAlert={enableGithubAlert}\n          enableHtmlPreview={enableHtmlPreview}\n          enableLatex={enableLatex}\n          enableMermaid={enableMermaid}\n          fullFeaturedCodeBlock={fullFeaturedCodeBlock}\n          rehypePlugins={rehypePlugins}\n          rehypePluginsAhead={rehypePluginsAhead}\n          remarkPlugins={remarkPlugins}\n          remarkPluginsAhead={remarkPluginsAhead}\n          showFootnotes={showFootnotes}\n          streamAnimationGranularity={streamAnimationGranularity}\n          streamSmoothingPreset={streamSmoothingPreset}\n          variant={variant}\n        >\n          <Render\n            enableStream={enableStream && delayedAnimated}\n            reactMarkdownProps={reactMarkdownProps}\n          >\n            {children}\n          </Render>\n        </MarkdownProvider>\n      </TypographyImpl>\n    </PreviewGroup>\n  );\n});\n\nMarkdown.displayName = 'Markdown';\n\nexport default Markdown;\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,WAAW,MAAqB,UAAU;CAC9C,MAAM,EACJ,KACA,WAAW,IACX,WACA,OACA,uBACA,eACA,UACA,oBAAoB,OACpB,cAAc,MACd,gBAAgB,MAChB,oBACA,uBACA,mBACA,eAAe,MACf,gBACA,oBACA,WACA,cACA,WAAW,MAAM,YAAY,SAAS,KAAK,KAAA,GAC3C,iBAAiB,MAAM,YAAY,SAAS,MAAO,KAAA,GACnD,iBAAiB,MAAM,YAAY,SAAS,IAAI,KAAA,GAChD,UAAU,WACV,oBACA,aAAa,MAAM,YAAY,SAAS,MAAM,KAAA,GAC9C,eACA,eACA,oBACA,aAAa,CAAC,GACd,cACA,gBAAgB,MAChB,4BACA,uBACA,WACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB,QAAQ;CAUnD,MAAM,uBAAuB,eAAe,cAAc;CAC1D,MAAM,mBAAmB,eAAe,UAAU;CAElD,MAAM,SAAS,aACZ,EACC,cACA,UACA,yBAC6E;EAE7E,MAAM,aAAa,oBADG,eAAe,mBAAmBA,kBACrC;GAAe,GAAI;GAAqB;EAAwB,CAAA;EACnF,OAAO,eAAe,aAAa,YAAY,EAAE,MAAM,SAAS,CAAC,IAAI;CACvE,GACA,CAAC,YAAY,CACf;CAEA,OACE,oBAAC,cAAD;EAAc,QAAQ;EACpB,UAAA,oBAAC,gBAAD;GACgB;GACd,kBAAe;GACL;GACM;GACJ;GACI;GACX;GACE;GACP,QAAQ,WAAW;GACnB,WAAWC,OACT,YAAY,UAAU,OAAO,MAC7B,eAAe,OAAO,OACtB,OAAO,KACP,SACF;GACe;GACf,GAAI;GAEJ,UAAA,oBAAC,kBAAD;IACa;IACX,UAAU;IACC;IACX,gBAAgB;IAChB,YAAY;IACW;IACJ;IACA;IACN;IACE;IACQ;IACR;IACK;IACL;IACK;IACL;IACa;IACL;IACd;IAET,UAAA,oBAAC,QAAD;KACE,cAAc,gBAAgB;KACV;KAEnB;IACK,CAAA;GACQ,CAAA;EACJ,CAAA;CACJ,CAAA;AAElB,CAAC;AAED,SAAS,cAAc"}

package/es/Markdown/Typography.mjs

@@ -2,12 +2,12 @@
 import { styleProps } from "../styles/stylex/props.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/Markdown/Typography.tsx
 const TypographyImpl = ({ ref, children, className, fontSize = 16, headerMultiple = 1, marginMultiple = 2, lineHeight = 1.8, borderRadius = 8, style, xstyle, ...rest }) => {
 	return /* @__PURE__ */ jsx("article", {
 		ref,
-		...styleProps(xstyle, clsx("lobe-markdown", className), {
+		...styleProps(xstyle, clsx$1("lobe-markdown", className), {
 			"--lobe-markdown-border-radius": borderRadius,
 			"--lobe-markdown-font-size": `${fontSize}px`,
 			"--lobe-markdown-header-multiple": headerMultiple,

package/es/Markdown/Typography.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.mjs","names":[],"sources":["../../src/Markdown/Typography.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport { type CSSProperties, memo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { TypographyProps } from './type';\n\nexport const TypographyImpl = ({\n  ref,\n  children,\n  className,\n  fontSize = 16,\n  headerMultiple = 1,\n  marginMultiple = 2,\n  lineHeight = 1.8,\n  borderRadius = 8,\n  style,\n  xstyle,\n  ...rest\n}: TypographyProps & { xstyle?: Parameters<typeof styleProps>[0] }) => {\n  return (\n    <article\n      ref={ref}\n      {...styleProps(xstyle, clsx('lobe-markdown', className), {\n        '--lobe-markdown-border-radius': borderRadius,\n        '--lobe-markdown-font-size': `${fontSize}px`,\n        '--lobe-markdown-header-multiple': headerMultiple,\n        '--lobe-markdown-line-height': lineHeight,\n        '--lobe-markdown-margin-multiple': marginMultiple,\n        ...style,\n      } as CSSProperties)}\n      {...rest}\n    >\n      {children}\n    </article>\n  );\n};\n\nconst Typography = memo<TypographyProps>((props) => <TypographyImpl {...props} />);\n\nTypography.displayName = 'Typography';\n\nexport default Typography;\n"],"mappings":";;;;;;AAWA,MAAa,kBAAkB,EAC7B,KACA,UACA,WACA,WAAW,IACX,iBAAiB,GACjB,iBAAiB,GACjB,aAAa,KACb,eAAe,GACf,OACA,QACA,GAAG,WACkE;CACrE,OACE,oBAAC,WAAD;EACO;EACL,GAAI,WAAW,QAAQ,KAAK,iBAAiB,SAAS,GAAG;GACvD,iCAAiC;GACjC,6BAA6B,GAAG,SAAS;GACzC,mCAAmC;GACnC,+BAA+B;GAC/B,mCAAmC;GACnC,GAAG;EACL,CAAkB;EAClB,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,MAAM,aAAa,MAAuB,UAAU,oBAAC,gBAAD,EAAgB,GAAI,MAAQ,CAAA,CAAC;AAEjF,WAAW,cAAc"}
+{"version":3,"file":"Typography.mjs","names":["clsx"],"sources":["../../src/Markdown/Typography.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport { type CSSProperties, memo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { TypographyProps } from './type';\n\nexport const TypographyImpl = ({\n  ref,\n  children,\n  className,\n  fontSize = 16,\n  headerMultiple = 1,\n  marginMultiple = 2,\n  lineHeight = 1.8,\n  borderRadius = 8,\n  style,\n  xstyle,\n  ...rest\n}: TypographyProps & { xstyle?: Parameters<typeof styleProps>[0] }) => {\n  return (\n    <article\n      ref={ref}\n      {...styleProps(xstyle, clsx('lobe-markdown', className), {\n        '--lobe-markdown-border-radius': borderRadius,\n        '--lobe-markdown-font-size': `${fontSize}px`,\n        '--lobe-markdown-header-multiple': headerMultiple,\n        '--lobe-markdown-line-height': lineHeight,\n        '--lobe-markdown-margin-multiple': marginMultiple,\n        ...style,\n      } as CSSProperties)}\n      {...rest}\n    >\n      {children}\n    </article>\n  );\n};\n\nconst Typography = memo<TypographyProps>((props) => <TypographyImpl {...props} />);\n\nTypography.displayName = 'Typography';\n\nexport default Typography;\n"],"mappings":";;;;;;AAWA,MAAa,kBAAkB,EAC7B,KACA,UACA,WACA,WAAW,IACX,iBAAiB,GACjB,iBAAiB,GACjB,aAAa,KACb,eAAe,GACf,OACA,QACA,GAAG,WACkE;CACrE,OACE,oBAAC,WAAD;EACO;EACL,GAAI,WAAW,QAAQA,OAAK,iBAAiB,SAAS,GAAG;GACvD,iCAAiC;GACjC,6BAA6B,GAAG,SAAS;GACzC,mCAAmC;GACnC,+BAA+B;GAC/B,mCAAmC;GACnC,GAAG;EACL,CAAkB;EAClB,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,MAAM,aAAa,MAAuB,UAAU,oBAAC,gBAAD,EAAgB,GAAI,MAAQ,CAAA,CAAC;AAEjF,WAAW,cAAc"}

package/es/Markdown/plugins/remarkColor.d.mts

@@ -16,4 +16,5 @@ interface RemarkColorOptions {
  */
 export declare const remarkColor: (options?: RemarkColorOptions) => (tree: any) => void;
 //#endregion
+export {};
 //# sourceMappingURL=remarkColor.d.mts.map

package/es/Markdown/plugins/remarkGfmPlus.d.mts

@@ -4,4 +4,5 @@ interface RemarkGfmPlusOptions {
 }
 export declare const remarkGfmPlus: (options?: RemarkGfmPlusOptions) => (tree: any) => void;
 //#endregion
+export {};
 //# sourceMappingURL=remarkGfmPlus.d.mts.map

package/es/Markdown/plugins/remarkVideo.d.mts

@@ -16,4 +16,5 @@ interface RemarkVideoOptions {
  */
 export declare const remarkVideo: (options?: RemarkVideoOptions) => (tree: any) => void;
 //#endregion
+export {};
 //# sourceMappingURL=remarkVideo.d.mts.map

package/es/Mermaid/FullFeatured.mjs

@@ -9,7 +9,7 @@ import CopyButton from "../CopyButton/CopyButton.mjs";
 import { bodyStyles, headerFlexProps, headerStyles, rootClassName, rootStyles } from "../Highlighter/style.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { ChevronDown, ChevronRight } from "lucide-react";
 //#region src/Mermaid/FullFeatured.tsx
 const MermaidHeaderLanguage = memo(({ fileName, language, showLanguage }) => {
@@ -106,7 +106,7 @@ const MermaidFullFeatured = memo(({ showLanguage, styles: customStyles, classNam
 			})]
 		}), /* @__PURE__ */ jsx(FlexBasic_default, {
 			height: expand ? void 0 : 0,
-			...styleProps(bodyStyles(expand, variant), clsx(expand && "ant-highlighter-highlighter-body-expand", classNames?.body), customStyles?.body),
+			...styleProps(bodyStyles(expand, variant), clsx$1(expand && "ant-highlighter-highlighter-body-expand", classNames?.body), customStyles?.body),
 			children
 		})]
 	});

package/es/Mermaid/FullFeatured.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FullFeatured.mjs","names":["Flexbox"],"sources":["../../src/Mermaid/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport {\n  bodyStyles,\n  expandCls,\n  headerFlexProps,\n  headerStyles,\n  rootClassName,\n  rootStyles,\n} from '@/Highlighter/style';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport { type MermaidProps } from './type';\n\nconst MermaidHeaderLanguage = memo(\n  ({\n    fileName,\n    language,\n    showLanguage,\n  }: {\n    fileName?: string;\n    language: string;\n    showLanguage?: boolean;\n  }) => {\n    if (!showLanguage) return null;\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={'language-title'}\n        flex={1}\n        gap={4}\n        justify={'flex-start'}\n        paddingInline={8}\n      >\n        <MaterialFileTypeIcon\n          fallbackUnknownType={false}\n          filename={fileName || language}\n          size={18}\n          type={'file'}\n          variant={'raw'}\n        />\n\n        <Text ellipsis fontSize={13}>\n          {fileName || 'Mermaid'}\n        </Text>\n      </Flexbox>\n    );\n  },\n  (prev, next) =>\n    prev.fileName === next.fileName &&\n    prev.language === next.language &&\n    prev.showLanguage === next.showLanguage,\n);\n\nexport interface MermaidFullFeaturedProps extends Omit<MermaidProps, 'children'> {\n  children: ReactNode;\n  content: string;\n}\n\nexport const MermaidFullFeatured = memo<MermaidFullFeaturedProps>(\n  ({\n    showLanguage,\n    styles: customStyles,\n    classNames,\n    content,\n    children,\n    className,\n    copyable,\n    actionsRender,\n    style,\n    variant,\n    shadow,\n    language = 'mermaid',\n    fileName,\n    defaultExpand = true,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const contentRef = useRef(content);\n\n    useEffect(() => {\n      contentRef.current = content;\n    }, [content]);\n\n    const getContent = useCallback(() => contentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return <CopyButton content={getContent} size={'small'} />;\n    }, [copyable, getContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize: 'small',\n        content,\n        getContent,\n        originalNode: originalActions,\n      });\n    }, [actionsRender, content, getContent, originalActions]);\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    return (\n      <Flexbox\n        data-code-type=\"mermaid\"\n        width={'100%'}\n        {...rest}\n        {...styleProps(rootStyles({ shadow, variant }), rootClassName(false, className), style)}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          justify={'space-between'}\n          onClick={handleToggleExpand}\n          {...headerFlexProps(variant)}\n          {...styleProps(headerStyles(variant), classNames?.header, customStyles?.header)}\n        >\n          <MermaidHeaderLanguage\n            fileName={fileName}\n            language={language}\n            showLanguage={showLanguage}\n          />\n          <Flexbox horizontal align={'center'} flex={'none'} gap={4} onClick={stopPropagation}>\n            <Flexbox horizontal align={'center'} className={'panel-actions'} flex={'none'} gap={4}>\n              {actions}\n            </Flexbox>\n            <ActionIcon\n              icon={expand ? ChevronDown : ChevronRight}\n              size={'small'}\n              onClick={handleToggleExpand}\n            />\n          </Flexbox>\n        </Flexbox>\n        <Flexbox\n          height={expand ? undefined : 0}\n          {...styleProps(\n            bodyStyles(expand, variant),\n            clsx(expand && expandCls, classNames?.body),\n            customStyles?.body,\n          )}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default MermaidFullFeatured;\n"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAM,wBAAwB,MAC3B,EACC,UACA,UACA,mBAKI;CACJ,IAAI,CAAC,cAAc,OAAO;CAE1B,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW;EACX,MAAM;EACN,KAAK;EACL,SAAS;EACT,eAAe;EAPjB,UAAA,CASE,oBAAC,sBAAD;GACE,qBAAqB;GACrB,UAAU,YAAY;GACtB,MAAM;GACN,MAAM;GACN,SAAS;EACV,CAAA,GAED,oBAAC,MAAD;GAAM,UAAA;GAAS,UAAU;GACtB,UAAA,YAAY;EACT,CAAA,CACC;;AAEb,IACC,MAAM,SACL,KAAK,aAAa,KAAK,YACvB,KAAK,aAAa,KAAK,YACvB,KAAK,iBAAiB,KAAK,YAC/B;AAOA,MAAa,sBAAsB,MAChC,EACC,cACA,QAAQ,cACR,YACA,SACA,UACA,WACA,UACA,eACA,OACA,SACA,QACA,WAAW,WACX,UACA,gBAAgB,MAChB,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAS,aAAa;CAClD,MAAM,aAAa,OAAO,OAAO;CAEjC,gBAAgB;EACd,WAAW,UAAU;CACvB,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,aAAa,kBAAkB,WAAW,SAAS,CAAC,CAAC;CAE3D,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,UAAU,OAAO;EACtB,OAAO,oBAAC,YAAD;GAAY,SAAS;GAAY,MAAM;EAAU,CAAA;CAC1D,GAAG,CAAC,UAAU,UAAU,CAAC;CAEzB,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB,gBAAgB;GAChB;GACA;GACA,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAe;EAAS;EAAY;CAAe,CAAC;CAExD,MAAM,qBAAqB,kBAAkB;EAC3C,WAAW,SAAS,CAAC,IAAI;CAC3B,GAAG,CAAC,CAAC;CAEL,OACE,qBAACA,mBAAD;EACE,kBAAe;EACf,OAAO;EACP,GAAI;EACJ,GAAI,WAAW,WAAW;GAAE;GAAQ;EAAQ,CAAC,GAAG,cAAc,OAAO,SAAS,GAAG,KAAK;EAJxF,UAAA,CAME,qBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,SAAS;GACT,SAAS;GACT,GAAI,gBAAgB,OAAO;GAC3B,GAAI,WAAW,aAAa,OAAO,GAAG,YAAY,QAAQ,cAAc,MAAM;GANhF,UAAA,CAQE,oBAAC,uBAAD;IACY;IACA;IACI;GACf,CAAA,GACD,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,MAAM;IAAQ,KAAK;IAAG,SAAS;IAApE,UAAA,CACE,oBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,WAAW;KAAiB,MAAM;KAAQ,KAAK;KACjF,UAAA;IACM,CAAA,GACT,oBAAC,YAAD;KACE,MAAM,SAAS,cAAc;KAC7B,MAAM;KACN,SAAS;IACV,CAAA,CACM;GACF,CAAA,CAAA;EACT,CAAA,GAAA,oBAACA,mBAAD;GACE,QAAQ,SAAS,KAAA,IAAY;GAC7B,GAAI,WACF,WAAW,QAAQ,OAAO,GAC1B,KAAK,UAAA,2CAAqB,YAAY,IAAI,GAC1C,cAAc,IAChB;GAEC;EACM,CAAA,CACF;;AAEb,CACF"}
+{"version":3,"file":"FullFeatured.mjs","names":["Flexbox","clsx"],"sources":["../../src/Mermaid/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport {\n  bodyStyles,\n  expandCls,\n  headerFlexProps,\n  headerStyles,\n  rootClassName,\n  rootStyles,\n} from '@/Highlighter/style';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport { type MermaidProps } from './type';\n\nconst MermaidHeaderLanguage = memo(\n  ({\n    fileName,\n    language,\n    showLanguage,\n  }: {\n    fileName?: string;\n    language: string;\n    showLanguage?: boolean;\n  }) => {\n    if (!showLanguage) return null;\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={'language-title'}\n        flex={1}\n        gap={4}\n        justify={'flex-start'}\n        paddingInline={8}\n      >\n        <MaterialFileTypeIcon\n          fallbackUnknownType={false}\n          filename={fileName || language}\n          size={18}\n          type={'file'}\n          variant={'raw'}\n        />\n\n        <Text ellipsis fontSize={13}>\n          {fileName || 'Mermaid'}\n        </Text>\n      </Flexbox>\n    );\n  },\n  (prev, next) =>\n    prev.fileName === next.fileName &&\n    prev.language === next.language &&\n    prev.showLanguage === next.showLanguage,\n);\n\nexport interface MermaidFullFeaturedProps extends Omit<MermaidProps, 'children'> {\n  children: ReactNode;\n  content: string;\n}\n\nexport const MermaidFullFeatured = memo<MermaidFullFeaturedProps>(\n  ({\n    showLanguage,\n    styles: customStyles,\n    classNames,\n    content,\n    children,\n    className,\n    copyable,\n    actionsRender,\n    style,\n    variant,\n    shadow,\n    language = 'mermaid',\n    fileName,\n    defaultExpand = true,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const contentRef = useRef(content);\n\n    useEffect(() => {\n      contentRef.current = content;\n    }, [content]);\n\n    const getContent = useCallback(() => contentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return <CopyButton content={getContent} size={'small'} />;\n    }, [copyable, getContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize: 'small',\n        content,\n        getContent,\n        originalNode: originalActions,\n      });\n    }, [actionsRender, content, getContent, originalActions]);\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    return (\n      <Flexbox\n        data-code-type=\"mermaid\"\n        width={'100%'}\n        {...rest}\n        {...styleProps(rootStyles({ shadow, variant }), rootClassName(false, className), style)}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          justify={'space-between'}\n          onClick={handleToggleExpand}\n          {...headerFlexProps(variant)}\n          {...styleProps(headerStyles(variant), classNames?.header, customStyles?.header)}\n        >\n          <MermaidHeaderLanguage\n            fileName={fileName}\n            language={language}\n            showLanguage={showLanguage}\n          />\n          <Flexbox horizontal align={'center'} flex={'none'} gap={4} onClick={stopPropagation}>\n            <Flexbox horizontal align={'center'} className={'panel-actions'} flex={'none'} gap={4}>\n              {actions}\n            </Flexbox>\n            <ActionIcon\n              icon={expand ? ChevronDown : ChevronRight}\n              size={'small'}\n              onClick={handleToggleExpand}\n            />\n          </Flexbox>\n        </Flexbox>\n        <Flexbox\n          height={expand ? undefined : 0}\n          {...styleProps(\n            bodyStyles(expand, variant),\n            clsx(expand && expandCls, classNames?.body),\n            customStyles?.body,\n          )}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default MermaidFullFeatured;\n"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAM,wBAAwB,MAC3B,EACC,UACA,UACA,mBAKI;CACJ,IAAI,CAAC,cAAc,OAAO;CAE1B,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW;EACX,MAAM;EACN,KAAK;EACL,SAAS;EACT,eAAe;EAPjB,UAAA,CASE,oBAAC,sBAAD;GACE,qBAAqB;GACrB,UAAU,YAAY;GACtB,MAAM;GACN,MAAM;GACN,SAAS;EACV,CAAA,GAED,oBAAC,MAAD;GAAM,UAAA;GAAS,UAAU;GACtB,UAAA,YAAY;EACT,CAAA,CACC;;AAEb,IACC,MAAM,SACL,KAAK,aAAa,KAAK,YACvB,KAAK,aAAa,KAAK,YACvB,KAAK,iBAAiB,KAAK,YAC/B;AAOA,MAAa,sBAAsB,MAChC,EACC,cACA,QAAQ,cACR,YACA,SACA,UACA,WACA,UACA,eACA,OACA,SACA,QACA,WAAW,WACX,UACA,gBAAgB,MAChB,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAS,aAAa;CAClD,MAAM,aAAa,OAAO,OAAO;CAEjC,gBAAgB;EACd,WAAW,UAAU;CACvB,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,aAAa,kBAAkB,WAAW,SAAS,CAAC,CAAC;CAE3D,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,UAAU,OAAO;EACtB,OAAO,oBAAC,YAAD;GAAY,SAAS;GAAY,MAAM;EAAU,CAAA;CAC1D,GAAG,CAAC,UAAU,UAAU,CAAC;CAEzB,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB,gBAAgB;GAChB;GACA;GACA,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAe;EAAS;EAAY;CAAe,CAAC;CAExD,MAAM,qBAAqB,kBAAkB;EAC3C,WAAW,SAAS,CAAC,IAAI;CAC3B,GAAG,CAAC,CAAC;CAEL,OACE,qBAACA,mBAAD;EACE,kBAAe;EACf,OAAO;EACP,GAAI;EACJ,GAAI,WAAW,WAAW;GAAE;GAAQ;EAAQ,CAAC,GAAG,cAAc,OAAO,SAAS,GAAG,KAAK;EAJxF,UAAA,CAME,qBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,SAAS;GACT,SAAS;GACT,GAAI,gBAAgB,OAAO;GAC3B,GAAI,WAAW,aAAa,OAAO,GAAG,YAAY,QAAQ,cAAc,MAAM;GANhF,UAAA,CAQE,oBAAC,uBAAD;IACY;IACA;IACI;GACf,CAAA,GACD,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,MAAM;IAAQ,KAAK;IAAG,SAAS;IAApE,UAAA,CACE,oBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,WAAW;KAAiB,MAAM;KAAQ,KAAK;KACjF,UAAA;IACM,CAAA,GACT,oBAAC,YAAD;KACE,MAAM,SAAS,cAAc;KAC7B,MAAM;KACN,SAAS;IACV,CAAA,CACM;GACF,CAAA,CAAA;EACT,CAAA,GAAA,oBAACA,mBAAD;GACE,QAAQ,SAAS,KAAA,IAAY;GAC7B,GAAI,WACF,WAAW,QAAQ,OAAO,GAC1BC,OAAK,UAAA,2CAAqB,YAAY,IAAI,GAC1C,cAAc,IAChB;GAEC;EACM,CAAA,CACF;;AAEb,CACF"}

package/es/Mermaid/SyntaxMermaid/index.mjs

@@ -5,20 +5,20 @@ import StreamMermaid from "./StreamMermaid.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/Mermaid/SyntaxMermaid/index.tsx
 const SyntaxMermaid = memo(({ animated, children, className, fallbackClassName, ref, style, theme: customTheme, variant = "borderless" }) => {
 	const isDefaultTheme = customTheme === "lobe-theme" || !customTheme;
 	const showBackground = !isDefaultTheme && variant === "filled";
 	const resolvedTheme = isDefaultTheme ? void 0 : customTheme;
-	const classes = clsx(!showBackground && "lobe-mermaid-transparent", animated && "lobe-mermaid-animated");
+	const classes = clsx$1(!showBackground && "lobe-mermaid-transparent", animated && "lobe-mermaid-animated");
 	const padded = variant !== "borderless" && styles.padded;
-	const mermaidClassName = styleProps([styles.root, padded], clsx("ant-mermaid-mermaid lobe-mermaid", classes, className)).className;
+	const mermaidClassName = styleProps([styles.root, padded], clsx$1("ant-mermaid-mermaid lobe-mermaid", classes, className)).className;
 	const fallback = styleProps([
 		styles.root,
 		styles.unmermaid,
 		padded
-	], clsx(classes, fallbackClassName)).className;
+	], clsx$1(classes, fallbackClassName)).className;
 	if (animated) return /* @__PURE__ */ jsx(StreamMermaid, {
 		className: mermaidClassName,
 		fallbackClassName: fallback,

package/es/Mermaid/SyntaxMermaid/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/index.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { SyntaxMermaidProps } from '../type';\nimport StaticMermaid from './StaticMermaid';\nimport StreamMermaid from './StreamMermaid';\nimport { styles } from './style';\n\nconst SyntaxMermaid = memo<SyntaxMermaidProps>(\n  ({\n    animated,\n    children,\n    className,\n    fallbackClassName,\n    ref,\n    style,\n    theme: customTheme,\n    variant = 'borderless',\n  }) => {\n    const isDefaultTheme = customTheme === 'lobe-theme' || !customTheme;\n    const showBackground = !isDefaultTheme && variant === 'filled';\n    const resolvedTheme = isDefaultTheme ? undefined : customTheme;\n\n    const classes = clsx(\n      !showBackground && 'lobe-mermaid-transparent',\n      animated && 'lobe-mermaid-animated',\n    );\n    const padded = variant !== 'borderless' && styles.padded;\n    const mermaidClassName = styleProps(\n      [styles.root, padded],\n      clsx('ant-mermaid-mermaid lobe-mermaid', classes, className),\n    ).className;\n    const fallback = styleProps(\n      [styles.root, styles.unmermaid, padded],\n      clsx(classes, fallbackClassName),\n    ).className;\n\n    if (animated) {\n      return (\n        <StreamMermaid\n          className={mermaidClassName}\n          fallbackClassName={fallback}\n          ref={ref}\n          style={style}\n          theme={resolvedTheme}\n          variant={variant}\n        >\n          {children}\n        </StreamMermaid>\n      );\n    }\n\n    return (\n      <StaticMermaid\n        className={mermaidClassName}\n        fallbackClassName={fallback}\n        ref={ref}\n        style={style}\n        theme={resolvedTheme}\n        variant={variant}\n      >\n        {children}\n      </StaticMermaid>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children && prevProps.animated === nextProps.animated,\n);\n\nSyntaxMermaid.displayName = 'SyntaxMermaid';\n\nexport default SyntaxMermaid;\n"],"mappings":";;;;;;;;;AAYA,MAAM,gBAAgB,MACnB,EACC,UACA,UACA,WACA,mBACA,KACA,OACA,OAAO,aACP,UAAU,mBACN;CACJ,MAAM,iBAAiB,gBAAgB,gBAAgB,CAAC;CACxD,MAAM,iBAAiB,CAAC,kBAAkB,YAAY;CACtD,MAAM,gBAAgB,iBAAiB,KAAA,IAAY;CAEnD,MAAM,UAAU,KACd,CAAC,kBAAkB,4BACnB,YAAY,uBACd;CACA,MAAM,SAAS,YAAY,gBAAgB,OAAO;CAClD,MAAM,mBAAmB,WACvB,CAAC,OAAO,MAAM,MAAM,GACpB,KAAK,oCAAoC,SAAS,SAAS,CAC7D,CAAC,CAAC;CACF,MAAM,WAAW,WACf;EAAC,OAAO;EAAM,OAAO;EAAW;CAAM,GACtC,KAAK,SAAS,iBAAiB,CACjC,CAAC,CAAC;CAEF,IAAI,UACF,OACE,oBAAC,eAAD;EACE,WAAW;EACX,mBAAmB;EACd;EACE;EACP,OAAO;EACE;EAER;CACY,CAAA;CAInB,OACE,oBAAC,eAAD;EACE,WAAW;EACX,mBAAmB;EACd;EACE;EACP,OAAO;EACE;EAER;CACY,CAAA;AAEnB,IACC,WAAW,cACV,UAAU,aAAa,UAAU,YAAY,UAAU,aAAa,UAAU,QAClF;AAEA,cAAc,cAAc"}
+{"version":3,"file":"index.mjs","names":["clsx"],"sources":["../../../src/Mermaid/SyntaxMermaid/index.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { SyntaxMermaidProps } from '../type';\nimport StaticMermaid from './StaticMermaid';\nimport StreamMermaid from './StreamMermaid';\nimport { styles } from './style';\n\nconst SyntaxMermaid = memo<SyntaxMermaidProps>(\n  ({\n    animated,\n    children,\n    className,\n    fallbackClassName,\n    ref,\n    style,\n    theme: customTheme,\n    variant = 'borderless',\n  }) => {\n    const isDefaultTheme = customTheme === 'lobe-theme' || !customTheme;\n    const showBackground = !isDefaultTheme && variant === 'filled';\n    const resolvedTheme = isDefaultTheme ? undefined : customTheme;\n\n    const classes = clsx(\n      !showBackground && 'lobe-mermaid-transparent',\n      animated && 'lobe-mermaid-animated',\n    );\n    const padded = variant !== 'borderless' && styles.padded;\n    const mermaidClassName = styleProps(\n      [styles.root, padded],\n      clsx('ant-mermaid-mermaid lobe-mermaid', classes, className),\n    ).className;\n    const fallback = styleProps(\n      [styles.root, styles.unmermaid, padded],\n      clsx(classes, fallbackClassName),\n    ).className;\n\n    if (animated) {\n      return (\n        <StreamMermaid\n          className={mermaidClassName}\n          fallbackClassName={fallback}\n          ref={ref}\n          style={style}\n          theme={resolvedTheme}\n          variant={variant}\n        >\n          {children}\n        </StreamMermaid>\n      );\n    }\n\n    return (\n      <StaticMermaid\n        className={mermaidClassName}\n        fallbackClassName={fallback}\n        ref={ref}\n        style={style}\n        theme={resolvedTheme}\n        variant={variant}\n      >\n        {children}\n      </StaticMermaid>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children && prevProps.animated === nextProps.animated,\n);\n\nSyntaxMermaid.displayName = 'SyntaxMermaid';\n\nexport default SyntaxMermaid;\n"],"mappings":";;;;;;;;;AAYA,MAAM,gBAAgB,MACnB,EACC,UACA,UACA,WACA,mBACA,KACA,OACA,OAAO,aACP,UAAU,mBACN;CACJ,MAAM,iBAAiB,gBAAgB,gBAAgB,CAAC;CACxD,MAAM,iBAAiB,CAAC,kBAAkB,YAAY;CACtD,MAAM,gBAAgB,iBAAiB,KAAA,IAAY;CAEnD,MAAM,UAAUA,OACd,CAAC,kBAAkB,4BACnB,YAAY,uBACd;CACA,MAAM,SAAS,YAAY,gBAAgB,OAAO;CAClD,MAAM,mBAAmB,WACvB,CAAC,OAAO,MAAM,MAAM,GACpBA,OAAK,oCAAoC,SAAS,SAAS,CAC7D,CAAC,CAAC;CACF,MAAM,WAAW,WACf;EAAC,OAAO;EAAM,OAAO;EAAW;CAAM,GACtCA,OAAK,SAAS,iBAAiB,CACjC,CAAC,CAAC;CAEF,IAAI,UACF,OACE,oBAAC,eAAD;EACE,WAAW;EACX,mBAAmB;EACd;EACE;EACP,OAAO;EACE;EAER;CACY,CAAA;CAInB,OACE,oBAAC,eAAD;EACE,WAAW;EACX,mBAAmB;EACd;EACE;EACP,OAAO;EACE;EAER;CACY,CAAA;AAEnB,IACC,WAAW,cACV,UAAU,aAAa,UAAU,YAAY,UAAU,aAAa,UAAU,QAClF;AAEA,cAAc,cAAc"}

package/es/Mermaid/const.d.mts

@@ -6,4 +6,5 @@ interface MermaidThemeItem {
 }
 export declare const mermaidThemes: MermaidThemeItem[];
 //#endregion
+export {};
 //# sourceMappingURL=const.d.mts.map

package/es/Modal/atoms.d.mts

@@ -51,4 +51,5 @@ export type ModalTriggerProps = Omit<React.ComponentPropsWithRef<typeof Dialog.T
 };
 export declare const ModalTrigger: ({ children, className, nativeButton, ref: refProp, ...rest }: ModalTriggerProps) => React.JSX.Element;
 //#endregion
+export {};
 //# sourceMappingURL=atoms.d.mts.map

package/es/Modal/atoms.mjs

@@ -4,24 +4,24 @@ import { useAppElement } from "../ConfigProvider/AppElementContext.mjs";
 import { styleProps } from "../styles/stylex/props.mjs";
 import { focusRing } from "../styles/stylex/focusRing.mjs";
 import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { mergeRefs, useMergeRefs } from "../utils/mergeRefs.mjs";
 import { useLayerZIndex } from "../internal/zIndex/useLayerZIndex.mjs";
 import { backdropTransition, modalMotionConfig } from "./constants.mjs";
 import { ModalLayerProvider, useModalLayer } from "./ModalLayerContext.mjs";
 import { styles } from "./style.mjs";
 import { cloneElement, createContext, createElement, isValidElement, use, useCallback, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { X } from "lucide-react";
 import { mergeProps } from "@base-ui/react/merge-props";
-import { mergeRefs, useMergeRefs } from "react-merge-refs";
 import { Dialog } from "@base-ui/react/dialog";
 import { AnimatePresence } from "motion/react";
 //#region src/Modal/atoms.tsx
 const mergeStateClassName = (xstyle, className) => {
 	const base = stylex.props(xstyle).className;
-	if (typeof className === "function") return (state) => clsx(base, className(state));
-	return clsx(base, className);
+	if (typeof className === "function") return (state) => clsx$1(base, className(state));
+	return clsx$1(base, className);
 };
 const ModalOpenContext = createContext(null);
 const ModalActionsContext = createContext(null);
@@ -100,7 +100,7 @@ const ModalBackdrop = ({ className, style, ...rest }) => {
 	const layerStyle = layer?.zIndex !== void 0 ? { zIndex: layer.zIndex } : void 0;
 	if (open !== null) return /* @__PURE__ */ jsx(Dialog.Backdrop, {
 		...rest,
-		className: clsx(stylex.props(styles.backdrop).className, className),
+		className: clsx$1(stylex.props(styles.backdrop).className, className),
 		style: {
 			...layerStyle,
 			...style,
@@ -130,7 +130,7 @@ const ModalPopupImpl = ({ className, children, width, style, motionProps, panelC
 	const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);
 	if (open !== null && actions) return /* @__PURE__ */ jsx(Dialog.Popup, {
 		...rest,
-		className: clsx(stylex.props(styles.popup, xstyle).className, className),
+		className: clsx$1(stylex.props(styles.popup, xstyle).className, className),
 		ref: composedRef,
 		style: {
 			...popupZIndexStyle,
@@ -141,13 +141,13 @@ const ModalPopupImpl = ({ className, children, width, style, motionProps, panelC
 			children: open ? /* @__PURE__ */ createElement(Motion.div, {
 				...modalMotionConfig,
 				...motionProps,
-				className: clsx(stylex.props(styles.popupInner, panelXstyle).className, panelClassName),
 				key: "modal-popup-panel",
 				style: {
 					maxWidth: width ?? void 0,
 					transition: "none",
 					...style
-				}
+				},
+				className: clsx$1(stylex.props(styles.popupInner, panelXstyle).className, panelClassName)
 			}, children) : null
 		})
 	});

package/es/Modal/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":[],"sources":["../../src/Modal/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n  cloneElement,\n  createContext,\n  isValidElement,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { backdropTransition, modalMotionConfig } from './constants';\nimport { ModalLayerProvider, useModalLayer } from './ModalLayerContext';\nimport { styles } from './style';\n\ntype XStyle = Parameters<typeof styleProps>[0];\n\nconst mergeStateClassName = <TState,>(\n  xstyle: XStyle,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  const base = stylex.props(xstyle).className;\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\n// --- Animation Contexts (granular to minimize re-renders) ---\n\n// State: open boolean, null = non-animated mode\nconst ModalOpenContext = createContext<boolean | null>(null);\n\n// Actions: stable callbacks, null = non-animated mode\ninterface ModalAnimationActions {\n  onExitComplete: () => void;\n}\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\n\nexport const useModalOpen = () => use(ModalOpenContext);\nexport const useModalActions = () => use(ModalActionsContext);\n\n// --- Root ---\nexport type ModalRootProps = Dialog.Root.Props & {\n  onExitComplete?: () => void;\n  zIndex?: number;\n};\n\nconst AnimatedModalRoot = ({\n  open,\n  children,\n  onExitComplete: onExitCompleteProp,\n  zIndex: explicitZIndex,\n  ...rest\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\n  const [isPresent, setIsPresent] = useState(!!open);\n\n  useEffect(() => {\n    if (open) setIsPresent(true);\n  }, [open]);\n\n  const handleExitComplete = useCallback(() => {\n    setIsPresent(false);\n    onExitCompleteProp?.();\n  }, [onExitCompleteProp]);\n\n  const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n\n  if (!isPresent) return null;\n\n  return (\n    <ModalOpenContext value={open}>\n      <ModalActionsContext value={actions}>\n        <ModalLayerProvider value={layer}>\n          <Dialog.Root modal open {...rest}>\n            {children}\n          </Dialog.Root>\n        </ModalLayerProvider>\n      </ModalActionsContext>\n    </ModalOpenContext>\n  );\n};\n\nconst NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }: ModalRootProps) => {\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n  return (\n    <ModalLayerProvider value={layer}>\n      <Dialog.Root modal {...rest}>\n        {children}\n      </Dialog.Root>\n    </ModalLayerProvider>\n  );\n};\n\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\n  if (open !== undefined) {\n    return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n  }\n  return <NonAnimatedModalRoot {...rest} />;\n};\n\n// --- Portal ---\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n  container?: HTMLElement | null;\n};\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\n  const appElement = useAppElement();\n  return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\n// --- Viewport ---\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\n  <Dialog.Viewport\n    {...rest}\n    className={mergeStateClassName(styles.viewport, className as any) as any}\n  />\n);\n\n// --- Backdrop ---\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\n  const open = useModalOpen();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n  if (open !== null) {\n    return (\n      <Dialog.Backdrop\n        {...rest}\n        className={clsx(stylex.props(styles.backdrop).className, className as string)}\n        style={{ ...layerStyle, ...style, transition: 'none' }}\n        render={\n          <Motion.div\n            animate={{ opacity: open ? 1 : 0 }}\n            initial={{ opacity: 0 }}\n            transition={backdropTransition}\n          />\n        }\n      />\n    );\n  }\n\n  return (\n    <Dialog.Backdrop\n      {...rest}\n      className={mergeStateClassName(styles.backdrop, className as any) as any}\n      style={{ ...layerStyle, ...style }}\n    />\n  );\n};\n\n// --- Popup ---\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n  motionProps?: Record<string, any>;\n  panelClassName?: string;\n  popupStyle?: React.CSSProperties;\n  width?: number | string;\n};\nexport const ModalPopupImpl = ({\n  className,\n  children,\n  width,\n  style,\n  motionProps,\n  panelClassName,\n  panelXstyle,\n  popupStyle,\n  ref: forwardedRef,\n  xstyle,\n  ...rest\n}: ModalPopupProps & { panelXstyle?: XStyle; xstyle?: XStyle }) => {\n  const open = useModalOpen();\n  const actions = useModalActions();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const popupZIndexStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex + 1 } : undefined;\n  const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n  if (open !== null && actions) {\n    return (\n      <Dialog.Popup\n        {...rest}\n        className={clsx(stylex.props(styles.popup, xstyle).className, className as string)}\n        ref={composedRef as any}\n        style={{ ...popupZIndexStyle, ...popupStyle }}\n      >\n        <AnimatePresence onExitComplete={actions.onExitComplete}>\n          {open ? (\n            <Motion.div\n              {...modalMotionConfig}\n              {...motionProps}\n              className={clsx(stylex.props(styles.popupInner, panelXstyle).className, panelClassName)}\n              key=\"modal-popup-panel\"\n              style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\n            >\n              {children}\n            </Motion.div>\n          ) : null}\n        </AnimatePresence>\n      </Dialog.Popup>\n    );\n  }\n\n  return (\n    <Dialog.Popup\n      {...rest}\n      className={mergeStateClassName([styles.popup, xstyle], className as any) as any}\n      ref={composedRef as any}\n      style={{ ...popupZIndexStyle, ...popupStyle }}\n    >\n      <div\n        {...styleProps([styles.popupInner, panelXstyle], panelClassName, {\n          maxWidth: width ?? undefined,\n          ...style,\n        })}\n      >\n        {children}\n      </div>\n    </Dialog.Popup>\n  );\n};\n\nexport const ModalPopup: React.FC<ModalPopupProps> = ModalPopupImpl;\n\n// --- Header ---\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalHeaderImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalHeaderProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.header, xstyle], className, style)} />\n);\nexport const ModalHeader: React.FC<ModalHeaderProps> = ModalHeaderImpl;\n\n// --- Title ---\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const ModalTitleImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: ModalTitleProps & { xstyle?: XStyle }) => (\n  <Dialog.Title\n    {...rest}\n    className={mergeStateClassName([styles.title, xstyle], className as any) as any}\n  />\n);\nexport const ModalTitle: React.FC<ModalTitleProps> = ModalTitleImpl;\n\n// --- Description ---\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\n\n// --- Content ---\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalContentImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalContentProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.content, xstyle], className, style)} />\n);\nexport const ModalContent: React.FC<ModalContentProps> = ModalContentImpl;\n\n// --- Footer ---\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalFooterImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalFooterProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.footer, xstyle], className, style)} />\n);\nexport const ModalFooter: React.FC<ModalFooterProps> = ModalFooterImpl;\n\n// --- Close ---\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const ModalCloseImpl = ({\n  className,\n  children,\n  xstyle,\n  ...rest\n}: ModalCloseProps & { xstyle?: XStyle }) => (\n  <Dialog.Close\n    {...rest}\n    className={\n      mergeStateClassName(\n        [styles.closeInline, styles.close, focusRing.info, xstyle],\n        className as any,\n      ) as any\n    }\n  >\n    {children ?? <X size={16} />}\n  </Dialog.Close>\n);\nexport const ModalClose: React.FC<ModalCloseProps> = ModalCloseImpl;\n\n// --- Trigger ---\nexport type ModalTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n  'children' | 'render'\n> & {\n  children?: React.ReactNode;\n  nativeButton?: boolean;\n};\n\nexport const ModalTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: ModalTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\n    const resolvedProps = (() => {\n      if (isNativeButtonTriggerElement) return props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props as any;\n      return restProps;\n    })();\n\n    const mergedProps = mergeProps((children as any).props, resolvedProps);\n    return cloneElement(children as any, {\n      ...mergedProps,\n      ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return (\n      <Dialog.Trigger\n        {...rest}\n        className={className}\n        nativeButton={resolvedNativeButton}\n        render={renderer as any}\n      />\n    );\n  }\n\n  return (\n    <Dialog.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Dialog.Trigger>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,uBAAgC,QAAgB,cAA4E;CAChI,MAAM,OAAO,OAAO,MAAM,MAAM,CAAC,CAAC;CAClC,IAAI,OAAO,cAAc,YAAY,QAAQ,UAAkB,KAAK,MAAM,UAAU,KAAK,CAAC;CAC1F,OAAO,KAAK,MAAM,SAAS;AAC7B;AAKA,MAAM,mBAAmB,cAA8B,IAAI;AAM3D,MAAM,sBAAsB,cAA4C,IAAI;AAC5E,MAAa,qBAAqB,IAAI,gBAAgB;AACtD,MAAa,wBAAwB,IAAI,mBAAmB;AAO5D,MAAM,qBAAqB,EACzB,MACA,UACA,gBAAgB,oBAChB,QAAQ,gBACR,GAAG,WAGC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC,CAAC,IAAI;CACjD,gBAAgB;EACd,IAAI,MAAM,aAAa,IAAI;CAC7B,GAAG,CAAC,IAAI,CAAC;CACT,MAAM,qBAAqB,kBAAkB;EAC3C,aAAa,KAAK;EAClB,qBAAqB;CACvB,GAAG,CAAC,kBAAkB,CAAC;CACvB,MAAM,UAAU,eAAe,EAC7B,gBAAgB,mBAClB,IAAI,CAAC,kBAAkB,CAAC;CACxB,MAAM,EACJ,QACA,KAAK,aACH,eAA+B,SAAS,cAAc;CAC1D,MAAM,QAAQ,eAAe;EACjB;EACV;CACF,IAAI,CAAC,QAAQ,QAAQ,CAAC;CACtB,IAAI,CAAC,WAAW,OAAO;CACvB,OAAO,oBAAC,kBAAD;EAAkB,OAAO;EAC5B,UAAA,oBAAC,qBAAD;GAAqB,OAAO;GAC1B,UAAA,oBAAC,oBAAD;IAAoB,OAAO;IACzB,UAAA,oBAAC,OAAO,MAAR;KAAa,OAAA;KAAM,MAAA;KAAK,GAAI;KACzB;IACU,CAAA;GACK,CAAA;EACD,CAAA;CACL,CAAA;AACtB;AACA,MAAM,wBAAwB,EAC5B,QAAQ,gBACR,UACA,GAAG,WACiB;CACpB,MAAM,EACJ,QACA,KAAK,aACH,eAA+B,SAAS,cAAc;CAC1D,MAAM,QAAQ,eAAe;EACjB;EACV;CACF,IAAI,CAAC,QAAQ,QAAQ,CAAC;CACtB,OAAO,oBAAC,oBAAD;EAAoB,OAAO;EAC9B,UAAA,oBAAC,OAAO,MAAR;GAAa,OAAA;GAAM,GAAI;GACpB;EACU,CAAA;CACK,CAAA;AACxB;AACA,MAAa,aAAa,EACxB,MACA,gBACA,GAAG,WACiB;CACpB,IAAI,SAAS,KAAA,GACX,OAAO,oBAAC,mBAAD;EAAyB;EAAsB;EAAgB,GAAI;CAAO,CAAA;CAEnF,OAAO,oBAAC,sBAAD,EAAsB,GAAI,KAAO,CAAA;AAC1C;AAMA,MAAa,eAAe,EAC1B,WACA,GAAG,WACmB;CACtB,MAAM,aAAa,cAAc;CACjC,OAAO,oBAAC,OAAO,QAAR;EAAe,WAAW,aAAa,cAAc,KAAA;EAAW,GAAI;CAAO,CAAA;AACpF;AAIA,MAAa,iBAAiB,EAC5B,WACA,GAAG,WACqB,oBAAC,OAAO,UAAR;CAAiB,GAAI;CAAM,WAAW,oBAAoB,OAAO,UAAU,SAAgB;AAAW,CAAA;AAIhI,MAAa,iBAAiB,EAC5B,WACA,OACA,GAAG,WACqB;CACxB,MAAM,OAAO,aAAa;CAC1B,MAAM,QAAQ,cAAc;CAC5B,MAAM,SAAS,mBAAmB;CAClC,MAAM,aAAa,OAAO,WAAW,KAAA,IAAY,EAC/C,QAAQ,MAAM,OAChB,IAAI,KAAA;CACJ,IAAI,SAAS,MACX,OAAO,oBAAC,OAAO,UAAR;EAAiB,GAAI;EAAM,WAAW,KAAK,OAAO,MAAM,OAAO,QAAQ,CAAC,CAAC,WAAW,SAAmB;EAAG,OAAO;GACtH,GAAG;GACH,GAAG;GACH,YAAY;EACd;EAAG,QAAQ,oBAAC,OAAO,KAAR;GAAY,SAAS,EAC9B,SAAS,OAAO,IAAI,EACtB;GAAG,SAAS,EACV,SAAS,EACX;GAAG,YAAY;EAAqB,CAAA;CAAI,CAAA;CAE1C,OAAO,oBAAC,OAAO,UAAR;EAAiB,GAAI;EAAM,WAAW,oBAAoB,OAAO,UAAU,SAAgB;EAAU,OAAO;GACjH,GAAG;GACH,GAAG;EACL;CAAI,CAAA;AACN;AASA,MAAa,kBAAkB,EAC7B,WACA,UACA,OACA,OACA,aACA,gBACA,aACA,YACA,KAAK,cACL,QACA,GAAG,WAIC;CACJ,MAAM,OAAO,aAAa;CAC1B,MAAM,UAAU,gBAAgB;CAChC,MAAM,QAAQ,cAAc;CAC5B,MAAM,SAAS,mBAAmB;CAClC,MAAM,mBAAmB,OAAO,WAAW,KAAA,IAAY,EACrD,QAAQ,MAAM,SAAS,EACzB,IAAI,KAAA;CACJ,MAAM,cAAc,aAAa,CAAC,cAAc,OAAO,QAAQ,CAAC;CAChE,IAAI,SAAS,QAAQ,SACnB,OAAO,oBAAC,OAAO,OAAR;EAAc,GAAI;EAAM,WAAW,KAAK,OAAO,MAAM,OAAO,OAAO,MAAM,CAAC,CAAC,WAAW,SAAmB;EAAG,KAAK;EAAoB,OAAO;GACjJ,GAAG;GACH,GAAG;EACL;EACI,UAAA,oBAAC,iBAAD;GAAiB,gBAAgB,QAAQ;GACtC,UAAA,OAAO,8BAAC,OAAO,KAAR;IAAY,GAAI;IAAmB,GAAI;IAAa,WAAW,KAAK,OAAO,MAAM,OAAO,YAAY,WAAW,CAAC,CAAC,WAAW,cAAc;IAAG,KAAI;IAAoB,OAAO;KACpL,UAAU,SAAS,KAAA;KACnB,YAAY;KACZ,GAAG;IACL;GAEgB,GADT,QACS,IAAI;EACH,CAAA;CACL,CAAA;CAElB,OAAO,oBAAC,OAAO,OAAR;EAAc,GAAI;EAAM,WAAW,oBAAoB,CAAC,OAAO,OAAO,MAAM,GAAG,SAAgB;EAAU,KAAK;EAAoB,OAAO;GAC9I,GAAG;GACH,GAAG;EACL;EACI,UAAA,oBAAC,OAAD;GAAK,GAAI,WAAW,CAAC,OAAO,YAAY,WAAW,GAAG,gBAAgB;IACtE,UAAU,SAAS,KAAA;IACnB,GAAG;GACL,CAAC;GACI;EACE,CAAA;CACO,CAAA;AAClB;AACA,MAAa,aAAwC;AAMrD,MAAa,mBAAmB,EAC9B,WACA,OACA,QACA,GAAG,WAGC,oBAAC,OAAD;CAAK,GAAI;CAAM,GAAI,WAAW,CAAC,OAAO,QAAQ,MAAM,GAAG,WAAW,KAAK;AAAI,CAAA;AACjF,MAAa,cAA0C;AAIvD,MAAa,kBAAkB,EAC7B,WACA,QACA,GAAG,WAGC,oBAAC,OAAO,OAAR;CAAc,GAAI;CAAM,WAAW,oBAAoB,CAAC,OAAO,OAAO,MAAM,GAAG,SAAgB;AAAW,CAAA;AAChH,MAAa,aAAwC;AAIrD,MAAa,mBAAoD,OAAO;AAMxE,MAAa,oBAAoB,EAC/B,WACA,OACA,QACA,GAAG,WAGC,oBAAC,OAAD;CAAK,GAAI;CAAM,GAAI,WAAW,CAAC,OAAO,SAAS,MAAM,GAAG,WAAW,KAAK;AAAI,CAAA;AAClF,MAAa,eAA4C;AAMzD,MAAa,mBAAmB,EAC9B,WACA,OACA,QACA,GAAG,WAGC,oBAAC,OAAD;CAAK,GAAI;CAAM,GAAI,WAAW,CAAC,OAAO,QAAQ,MAAM,GAAG,WAAW,KAAK;AAAI,CAAA;AACjF,MAAa,cAA0C;AAIvD,MAAa,kBAAkB,EAC7B,WACA,UACA,QACA,GAAG,WAGC,oBAAC,OAAO,OAAR;CAAc,GAAI;CAAM,WAAW,oBAAoB;EAAC,OAAO;EAAa,OAAO;EAAO,UAAU;EAAM;CAAM,GAAG,SAAgB;CACpI,UAAA,YAAY,oBAAC,GAAD,EAAG,MAAM,GAAK,CAAA;AACf,CAAA;AAChB,MAAa,aAAwC;AAOrD,MAAa,gBAAgB,EAC3B,UACA,WACA,cACA,KAAK,SACL,GAAG,WACoB;CACvB,MAAM,EACJ,8BACA,yBACE,gBAAgB;EAClB;EACA;CACF,CAAC;CACD,MAAM,YAAY,UAAe;EAC/B,MAAM,uBAAuB;GAC3B,IAAI,8BAA8B,OAAO;GAEzC,MAAM,EACJ,MACA,GAAG,cACD;GACJ,OAAO;EACT,EAAA,CAAG;EACH,MAAM,cAAc,WAAY,SAAiB,OAAO,aAAa;EACrE,OAAO,aAAa,UAAiB;GACnC,GAAG;GACH,KAAK,UAAU;IAAE,SAAiB;IAAM,MAAc;IAAK;GAAO,CAAC;EACrE,CAAC;CACH;CACA,IAAI,eAAe,QAAQ,GACzB,OAAO,oBAAC,OAAO,SAAR;EAAgB,GAAI;EAAiB;EAAW,cAAc;EAAsB,QAAQ;CAAkB,CAAA;CAEvH,OAAO,oBAAC,OAAO,SAAR;EAAgB,GAAI;EAAiB;EAAW,cAAc;EAAsB,KAAK;EAC3F;CACa,CAAA;AACpB"}
+{"version":3,"file":"atoms.mjs","names":["clsx"],"sources":["../../src/Modal/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n  cloneElement,\n  createContext,\n  isValidElement,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { backdropTransition, modalMotionConfig } from './constants';\nimport { ModalLayerProvider, useModalLayer } from './ModalLayerContext';\nimport { styles } from './style';\n\ntype XStyle = Parameters<typeof styleProps>[0];\n\nconst mergeStateClassName = <TState,>(\n  xstyle: XStyle,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  const base = stylex.props(xstyle).className;\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\n// --- Animation Contexts (granular to minimize re-renders) ---\n\n// State: open boolean, null = non-animated mode\nconst ModalOpenContext = createContext<boolean | null>(null);\n\n// Actions: stable callbacks, null = non-animated mode\ninterface ModalAnimationActions {\n  onExitComplete: () => void;\n}\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\n\nexport const useModalOpen = () => use(ModalOpenContext);\nexport const useModalActions = () => use(ModalActionsContext);\n\n// --- Root ---\nexport type ModalRootProps = Dialog.Root.Props & {\n  onExitComplete?: () => void;\n  zIndex?: number;\n};\n\nconst AnimatedModalRoot = ({\n  open,\n  children,\n  onExitComplete: onExitCompleteProp,\n  zIndex: explicitZIndex,\n  ...rest\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\n  const [isPresent, setIsPresent] = useState(!!open);\n\n  useEffect(() => {\n    if (open) setIsPresent(true);\n  }, [open]);\n\n  const handleExitComplete = useCallback(() => {\n    setIsPresent(false);\n    onExitCompleteProp?.();\n  }, [onExitCompleteProp]);\n\n  const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n\n  if (!isPresent) return null;\n\n  return (\n    <ModalOpenContext value={open}>\n      <ModalActionsContext value={actions}>\n        <ModalLayerProvider value={layer}>\n          <Dialog.Root modal open {...rest}>\n            {children}\n          </Dialog.Root>\n        </ModalLayerProvider>\n      </ModalActionsContext>\n    </ModalOpenContext>\n  );\n};\n\nconst NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }: ModalRootProps) => {\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n  return (\n    <ModalLayerProvider value={layer}>\n      <Dialog.Root modal {...rest}>\n        {children}\n      </Dialog.Root>\n    </ModalLayerProvider>\n  );\n};\n\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\n  if (open !== undefined) {\n    return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n  }\n  return <NonAnimatedModalRoot {...rest} />;\n};\n\n// --- Portal ---\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n  container?: HTMLElement | null;\n};\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\n  const appElement = useAppElement();\n  return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\n// --- Viewport ---\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\n  <Dialog.Viewport\n    {...rest}\n    className={mergeStateClassName(styles.viewport, className as any) as any}\n  />\n);\n\n// --- Backdrop ---\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\n  const open = useModalOpen();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n  if (open !== null) {\n    return (\n      <Dialog.Backdrop\n        {...rest}\n        className={clsx(stylex.props(styles.backdrop).className, className as string)}\n        style={{ ...layerStyle, ...style, transition: 'none' }}\n        render={\n          <Motion.div\n            animate={{ opacity: open ? 1 : 0 }}\n            initial={{ opacity: 0 }}\n            transition={backdropTransition}\n          />\n        }\n      />\n    );\n  }\n\n  return (\n    <Dialog.Backdrop\n      {...rest}\n      className={mergeStateClassName(styles.backdrop, className as any) as any}\n      style={{ ...layerStyle, ...style }}\n    />\n  );\n};\n\n// --- Popup ---\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n  motionProps?: Record<string, any>;\n  panelClassName?: string;\n  popupStyle?: React.CSSProperties;\n  width?: number | string;\n};\nexport const ModalPopupImpl = ({\n  className,\n  children,\n  width,\n  style,\n  motionProps,\n  panelClassName,\n  panelXstyle,\n  popupStyle,\n  ref: forwardedRef,\n  xstyle,\n  ...rest\n}: ModalPopupProps & { panelXstyle?: XStyle; xstyle?: XStyle }) => {\n  const open = useModalOpen();\n  const actions = useModalActions();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const popupZIndexStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex + 1 } : undefined;\n  const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n  if (open !== null && actions) {\n    return (\n      <Dialog.Popup\n        {...rest}\n        className={clsx(stylex.props(styles.popup, xstyle).className, className as string)}\n        ref={composedRef as any}\n        style={{ ...popupZIndexStyle, ...popupStyle }}\n      >\n        <AnimatePresence onExitComplete={actions.onExitComplete}>\n          {open ? (\n            <Motion.div\n              {...modalMotionConfig}\n              {...motionProps}\n              key=\"modal-popup-panel\"\n              style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\n              className={clsx(\n                stylex.props(styles.popupInner, panelXstyle).className,\n                panelClassName,\n              )}\n            >\n              {children}\n            </Motion.div>\n          ) : null}\n        </AnimatePresence>\n      </Dialog.Popup>\n    );\n  }\n\n  return (\n    <Dialog.Popup\n      {...rest}\n      className={mergeStateClassName([styles.popup, xstyle], className as any) as any}\n      ref={composedRef as any}\n      style={{ ...popupZIndexStyle, ...popupStyle }}\n    >\n      <div\n        {...styleProps([styles.popupInner, panelXstyle], panelClassName, {\n          maxWidth: width ?? undefined,\n          ...style,\n        })}\n      >\n        {children}\n      </div>\n    </Dialog.Popup>\n  );\n};\n\nexport const ModalPopup: React.FC<ModalPopupProps> = ModalPopupImpl;\n\n// --- Header ---\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalHeaderImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalHeaderProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.header, xstyle], className, style)} />\n);\nexport const ModalHeader: React.FC<ModalHeaderProps> = ModalHeaderImpl;\n\n// --- Title ---\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const ModalTitleImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: ModalTitleProps & { xstyle?: XStyle }) => (\n  <Dialog.Title\n    {...rest}\n    className={mergeStateClassName([styles.title, xstyle], className as any) as any}\n  />\n);\nexport const ModalTitle: React.FC<ModalTitleProps> = ModalTitleImpl;\n\n// --- Description ---\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\n\n// --- Content ---\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalContentImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalContentProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.content, xstyle], className, style)} />\n);\nexport const ModalContent: React.FC<ModalContentProps> = ModalContentImpl;\n\n// --- Footer ---\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalFooterImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalFooterProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.footer, xstyle], className, style)} />\n);\nexport const ModalFooter: React.FC<ModalFooterProps> = ModalFooterImpl;\n\n// --- Close ---\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const ModalCloseImpl = ({\n  className,\n  children,\n  xstyle,\n  ...rest\n}: ModalCloseProps & { xstyle?: XStyle }) => (\n  <Dialog.Close\n    {...rest}\n    className={\n      mergeStateClassName(\n        [styles.closeInline, styles.close, focusRing.info, xstyle],\n        className as any,\n      ) as any\n    }\n  >\n    {children ?? <X size={16} />}\n  </Dialog.Close>\n);\nexport const ModalClose: React.FC<ModalCloseProps> = ModalCloseImpl;\n\n// --- Trigger ---\nexport type ModalTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n  'children' | 'render'\n> & {\n  children?: React.ReactNode;\n  nativeButton?: boolean;\n};\n\nexport const ModalTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: ModalTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\n    const resolvedProps = (() => {\n      if (isNativeButtonTriggerElement) return props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props as any;\n      return restProps;\n    })();\n\n    const mergedProps = mergeProps((children as any).props, resolvedProps);\n    return cloneElement(children as any, {\n      ...mergedProps,\n      ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return (\n      <Dialog.Trigger\n        {...rest}\n        className={className}\n        nativeButton={resolvedNativeButton}\n        render={renderer as any}\n      />\n    );\n  }\n\n  return (\n    <Dialog.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Dialog.Trigger>\n  );\n};\n"],"mappings":"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"}

package/es/Modal/constants.d.mts

@@ -7,4 +7,5 @@ export declare const backdropTransition: {
   ease: CubicBezier;
 };
 //#endregion
+export {};
 //# sourceMappingURL=constants.d.mts.map

package/es/Modal/type.d.mts

@@ -104,4 +104,5 @@ export interface ModalConfirmConfig {
   width?: number | string;
 }
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map