@lobehub/ui 5.57.2 → 6.0.0-beta.1

package/es/internal/zIndex/constants.mjs

@@ -0,0 +1,11 @@
+//#region src/internal/zIndex/constants.ts
+const Z_INDEX_LAYER = {
+	floating: 1100,
+	modal: 1200,
+	toast: 1e5,
+	step: 10
+};
+//#endregion
+export { Z_INDEX_LAYER };
+
+//# sourceMappingURL=constants.mjs.map

package/es/internal/zIndex/constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.mjs","names":[],"sources":["../../../src/internal/zIndex/constants.ts"],"sourcesContent":["export const Z_INDEX_LAYER = {\n  floating: 1100,\n  modal: 1200,\n  toast: 100_000,\n  step: 10,\n} as const;\n\nexport type LayerTier = 'floating' | 'modal' | 'toast';\n"],"mappings":";AAAA,MAAa,gBAAgB;CAC3B,UAAU;CACV,OAAO;CACP,OAAO;CACP,MAAM;AACR"}

package/es/internal/zIndex/manager.mjs

@@ -0,0 +1,21 @@
+import { Z_INDEX_LAYER } from "./constants.mjs";
+//#region src/internal/zIndex/manager.ts
+let mainTop = 0;
+let toastTop = 0;
+let warnedMainOverflow = false;
+function acquireLayerZIndex(tier) {
+	if (tier === "toast") {
+		toastTop = Math.max(toastTop, Z_INDEX_LAYER.toast) + Z_INDEX_LAYER.step;
+		return toastTop;
+	}
+	mainTop = Math.max(mainTop, Z_INDEX_LAYER[tier]) + Z_INDEX_LAYER.step;
+	if (process.env.NODE_ENV !== "production" && !warnedMainOverflow && mainTop >= Z_INDEX_LAYER.toast) {
+		warnedMainOverflow = true;
+		console.warn(`[lobe-ui z-index] main stack reached toast tier (${mainTop}); unexpected nesting depth`);
+	}
+	return mainTop;
+}
+//#endregion
+export { acquireLayerZIndex };
+
+//# sourceMappingURL=manager.mjs.map

package/es/internal/zIndex/manager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"manager.mjs","names":[],"sources":["../../../src/internal/zIndex/manager.ts"],"sourcesContent":["import { type LayerTier, Z_INDEX_LAYER } from './constants';\n\nlet mainTop = 0;\nlet toastTop = 0;\nlet warnedMainOverflow = false;\n\nexport function acquireLayerZIndex(tier: LayerTier): number {\n  if (tier === 'toast') {\n    toastTop = Math.max(toastTop, Z_INDEX_LAYER.toast) + Z_INDEX_LAYER.step;\n    return toastTop;\n  }\n  mainTop = Math.max(mainTop, Z_INDEX_LAYER[tier]) + Z_INDEX_LAYER.step;\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    !warnedMainOverflow &&\n    mainTop >= Z_INDEX_LAYER.toast\n  ) {\n    warnedMainOverflow = true;\n\n    console.warn(\n      `[lobe-ui z-index] main stack reached toast tier (${mainTop}); unexpected nesting depth`,\n    );\n  }\n  return mainTop;\n}\n\nexport function __resetLayerZIndexForTests(): void {\n  mainTop = 0;\n  toastTop = 0;\n  warnedMainOverflow = false;\n}\n\nexport function __seedMainTopForTests(value: number): void {\n  mainTop = value;\n}\n"],"mappings":";;AAEA,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,qBAAqB;AAEzB,SAAgB,mBAAmB,MAAyB;CAC1D,IAAI,SAAS,SAAS;EACpB,WAAW,KAAK,IAAI,UAAU,cAAc,KAAK,IAAI,cAAc;EACnE,OAAO;CACT;CACA,UAAU,KAAK,IAAI,SAAS,cAAc,KAAK,IAAI,cAAc;CACjE,IACE,QAAQ,IAAI,aAAa,gBACzB,CAAC,sBACD,WAAW,cAAc,OACzB;EACA,qBAAqB;EAErB,QAAQ,KACN,oDAAoD,QAAQ,4BAC9D;CACF;CACA,OAAO;AACT"}

package/es/internal/zIndex/useLayerZIndex.mjs

@@ -0,0 +1,69 @@
+import { acquireLayerZIndex } from "./manager.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/internal/zIndex/useLayerZIndex.tsx
+function useLayerZIndex(tier, explicitZIndex) {
+	const [zIndex, setZIndex] = useState(void 0);
+	const stateRef = useRef({
+		tier,
+		explicit: explicitZIndex,
+		node: null,
+		observer: null,
+		prevOpen: false
+	});
+	const prevExplicitRef = useRef(explicitZIndex);
+	stateRef.current.tier = tier;
+	stateRef.current.explicit = explicitZIndex;
+	if (prevExplicitRef.current !== void 0 && explicitZIndex === void 0 && stateRef.current.node) {
+		const node = stateRef.current.node;
+		if (node.hasAttribute("data-open")) {
+			setZIndex(acquireLayerZIndex(tier));
+			stateRef.current.prevOpen = true;
+		}
+		if (!stateRef.current.observer) {
+			const handle = () => {
+				const open = node.hasAttribute("data-open");
+				if (open && !stateRef.current.prevOpen) setZIndex(acquireLayerZIndex(stateRef.current.tier));
+				stateRef.current.prevOpen = open;
+			};
+			const observer = new MutationObserver(handle);
+			observer.observe(node, {
+				attributes: true,
+				attributeFilter: ["data-open", "data-closed"]
+			});
+			stateRef.current.observer = observer;
+		}
+	}
+	prevExplicitRef.current = explicitZIndex;
+	const ref = useCallback((node) => {
+		if (node === stateRef.current.node) return;
+		stateRef.current.observer?.disconnect();
+		stateRef.current.observer = null;
+		stateRef.current.node = node;
+		stateRef.current.prevOpen = false;
+		if (!node) return;
+		if (stateRef.current.explicit !== void 0) return;
+		const handle = () => {
+			const isOpen = node.hasAttribute("data-open");
+			if (isOpen && !stateRef.current.prevOpen) setZIndex(acquireLayerZIndex(stateRef.current.tier));
+			stateRef.current.prevOpen = isOpen;
+		};
+		handle();
+		const observer = new MutationObserver(handle);
+		observer.observe(node, {
+			attributes: true,
+			attributeFilter: ["data-open", "data-closed"]
+		});
+		stateRef.current.observer = observer;
+	}, []);
+	useEffect(() => () => {
+		stateRef.current.observer?.disconnect();
+	}, []);
+	return {
+		zIndex: stateRef.current.explicit ?? zIndex,
+		ref
+	};
+}
+//#endregion
+export { useLayerZIndex };
+
+//# sourceMappingURL=useLayerZIndex.mjs.map

package/es/internal/zIndex/useLayerZIndex.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayerZIndex.mjs","names":[],"sources":["../../../src/internal/zIndex/useLayerZIndex.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { type LayerTier } from './constants';\nimport { acquireLayerZIndex } from './manager';\n\nexport interface LayerZIndexResult<T extends HTMLElement = HTMLElement> {\n  ref: (node: T | null) => void;\n  zIndex: number | undefined;\n}\n\nexport function useLayerZIndex<T extends HTMLElement = HTMLElement>(\n  tier: LayerTier,\n  explicitZIndex?: number,\n): LayerZIndexResult<T> {\n  const [zIndex, setZIndex] = useState<number | undefined>(undefined);\n\n  const stateRef = useRef<{\n    tier: LayerTier;\n    explicit: number | undefined;\n    node: T | null;\n    observer: MutationObserver | null;\n    prevOpen: boolean;\n  }>({\n    tier,\n    explicit: explicitZIndex,\n    node: null,\n    observer: null,\n    prevOpen: false,\n  });\n\n  const prevExplicitRef = useRef(explicitZIndex);\n\n  // Keep ref in sync with latest props so prop changes after mount are respected.\n  stateRef.current.tier = tier;\n  stateRef.current.explicit = explicitZIndex;\n\n  // When explicitZIndex changes from a value to undefined, and the node is\n  // currently open, we need to acquire a dynamic z-index and start the\n  // observer — neither was set up because the initial mount had an explicit\n  // value that short-circuited the ref callback.\n  if (\n    prevExplicitRef.current !== undefined &&\n    explicitZIndex === undefined &&\n    stateRef.current.node\n  ) {\n    const node = stateRef.current.node;\n    const isOpen = node.hasAttribute('data-open');\n    if (isOpen) {\n      setZIndex(acquireLayerZIndex(tier));\n      stateRef.current.prevOpen = true;\n    }\n    // Ensure observer is running for future open/close changes.\n    if (!stateRef.current.observer) {\n      const handle = () => {\n        const open = node.hasAttribute('data-open');\n        if (open && !stateRef.current.prevOpen) {\n          setZIndex(acquireLayerZIndex(stateRef.current.tier));\n        }\n        stateRef.current.prevOpen = open;\n      };\n      const observer = new MutationObserver(handle);\n      observer.observe(node, {\n        attributes: true,\n        attributeFilter: ['data-open', 'data-closed'],\n      });\n      stateRef.current.observer = observer;\n    }\n  }\n  prevExplicitRef.current = explicitZIndex;\n\n  const ref = useCallback((node: T | null) => {\n    if (node === stateRef.current.node) return;\n    stateRef.current.observer?.disconnect();\n    stateRef.current.observer = null;\n    stateRef.current.node = node;\n    stateRef.current.prevOpen = false;\n    if (!node) return;\n    if (stateRef.current.explicit !== undefined) return;\n    const handle = () => {\n      const isOpen = node.hasAttribute('data-open');\n      if (isOpen && !stateRef.current.prevOpen) {\n        setZIndex(acquireLayerZIndex(stateRef.current.tier));\n      }\n      stateRef.current.prevOpen = isOpen;\n    };\n    handle();\n    const observer = new MutationObserver(handle);\n    observer.observe(node, {\n      attributes: true,\n      attributeFilter: ['data-open', 'data-closed'],\n    });\n    stateRef.current.observer = observer;\n  }, []);\n\n  useEffect(\n    () => () => {\n      stateRef.current.observer?.disconnect();\n    },\n    [],\n  );\n\n  return { zIndex: stateRef.current.explicit ?? zIndex, ref };\n}\n"],"mappings":";;;AAUA,SAAgB,eACd,MACA,gBACsB;CACtB,MAAM,CAAC,QAAQ,aAAa,SAA6B,KAAA,CAAS;CAElE,MAAM,WAAW,OAMd;EACD;EACA,UAAU;EACV,MAAM;EACN,UAAU;EACV,UAAU;CACZ,CAAC;CAED,MAAM,kBAAkB,OAAO,cAAc;CAG7C,SAAS,QAAQ,OAAO;CACxB,SAAS,QAAQ,WAAW;CAM5B,IACE,gBAAgB,YAAY,KAAA,KAC5B,mBAAmB,KAAA,KACnB,SAAS,QAAQ,MACjB;EACA,MAAM,OAAO,SAAS,QAAQ;EAE9B,IADe,KAAK,aAAa,WACxB,GAAG;GACV,UAAU,mBAAmB,IAAI,CAAC;GAClC,SAAS,QAAQ,WAAW;EAC9B;EAEA,IAAI,CAAC,SAAS,QAAQ,UAAU;GAC9B,MAAM,eAAe;IACnB,MAAM,OAAO,KAAK,aAAa,WAAW;IAC1C,IAAI,QAAQ,CAAC,SAAS,QAAQ,UAC5B,UAAU,mBAAmB,SAAS,QAAQ,IAAI,CAAC;IAErD,SAAS,QAAQ,WAAW;GAC9B;GACA,MAAM,WAAW,IAAI,iBAAiB,MAAM;GAC5C,SAAS,QAAQ,MAAM;IACrB,YAAY;IACZ,iBAAiB,CAAC,aAAa,aAAa;GAC9C,CAAC;GACD,SAAS,QAAQ,WAAW;EAC9B;CACF;CACA,gBAAgB,UAAU;CAE1B,MAAM,MAAM,aAAa,SAAmB;EAC1C,IAAI,SAAS,SAAS,QAAQ,MAAM;EACpC,SAAS,QAAQ,UAAU,WAAW;EACtC,SAAS,QAAQ,WAAW;EAC5B,SAAS,QAAQ,OAAO;EACxB,SAAS,QAAQ,WAAW;EAC5B,IAAI,CAAC,MAAM;EACX,IAAI,SAAS,QAAQ,aAAa,KAAA,GAAW;EAC7C,MAAM,eAAe;GACnB,MAAM,SAAS,KAAK,aAAa,WAAW;GAC5C,IAAI,UAAU,CAAC,SAAS,QAAQ,UAC9B,UAAU,mBAAmB,SAAS,QAAQ,IAAI,CAAC;GAErD,SAAS,QAAQ,WAAW;EAC9B;EACA,OAAO;EACP,MAAM,WAAW,IAAI,iBAAiB,MAAM;EAC5C,SAAS,QAAQ,MAAM;GACrB,YAAY;GACZ,iBAAiB,CAAC,aAAa,aAAa;EAC9C,CAAC;EACD,SAAS,QAAQ,WAAW;CAC9B,GAAG,CAAC,CAAC;CAEL,sBACc;EACV,SAAS,QAAQ,UAAU,WAAW;CACxC,GACA,CAAC,CACH;CAEA,OAAO;EAAE,QAAQ,SAAS,QAAQ,YAAY;EAAQ;CAAI;AAC5D"}

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

@@ -2,10 +2,10 @@ import { FlexboxProps } from "../../Flex/type.mjs";
 import "../../Flex/index.mjs";
 import { FC } from "react";
 //#region src/mdx/Callout/index.d.ts
-interface CalloutProps extends FlexboxProps {
+export interface CalloutProps extends FlexboxProps {
   type?: 'tip' | 'error' | 'important' | 'info' | 'warning';
 }
 declare const Callout: FC<CalloutProps>;
 //#endregion
-export { CalloutProps, Callout as default };
+export { Callout as default };
 //# sourceMappingURL=index.d.mts.map

package/es/mdx/Callout/index.mjs

@@ -1,10 +1,14 @@
 "use client";
-import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
 import Icon from "../../Icon/Icon.mjs";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { useTheme } from "../../styles/theme/scope.mjs";
 import { styles } from "./style.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cssVar, cx, useTheme } from "antd-style";
+import clsx from "clsx";
+import * as stylex from "@stylexjs/stylex";
 import { AlertOctagon, AlertTriangle, Info, Lightbulb, MessageSquareWarning } from "lucide-react";
 //#region src/mdx/Callout/index.tsx
 const Callout = ({ children, type = "info", className, style, ...rest }) => {
@@ -40,21 +44,26 @@ const Callout = ({ children, type = "info", className, style, ...rest }) => {
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		horizontal: true,
 		align: "flex-start",
-		className: cx(styles.container, className),
-		style: {
+		gap: "0.75em",
+		paddingBlock: "calc(var(--lobe-markdown-margin-multiple) * 1em)",
+		paddingInline: "1em",
+		...styleProps(styles.container, className, {
 			background,
 			boxShadow: `0 0 0 1px ${background} inset`,
 			color,
 			...style
-		},
+		}),
 		...rest,
 		children: [/* @__PURE__ */ jsx(Icon, {
 			icon,
 			size: { size: "1.2em" },
 			style: { marginBlock: "0.25em" }
 		}), /* @__PURE__ */ jsx("div", {
-			className: cx(styles.content, type === "info" && styles.underlineAnchor),
-			children: /* @__PURE__ */ jsx("div", { children })
+			...styleProps(styles.content, clsx("lobe-mdx-callout-content", type === "info" && "lobe-mdx-callout-underline")),
+			children: /* @__PURE__ */ jsx("div", {
+				...stylex.props(styles.inner),
+				children
+			})
 		})]
 	});
 };

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 { cssVar, cx, useTheme } from 'antd-style';\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';\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      className={cx(styles.container, className)}\n      style={{\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 className={cx(styles.content, type === 'info' && styles.underlineAnchor)}>\n        <div>{children}</div>\n      </div>\n    </Flexbox>\n  );\n};\n\nCallout.displayName = 'MdxCallout';\n\nexport default Callout;\n"],"mappings":";;;;;;;;;AAeA,MAAM,WAA6B,EAAE,UAAU,OAAO,QAAQ,WAAW,OAAO,GAAG,WAAW;CAC5F,MAAM,QAAQ,SAAS;CACvB,MAAM,aAAa,eACV;EACL,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,IACA,CAAC,KAAK,CACR;CAIA,MAAM,EAAE,MAAM,OAAO,eAFA,aAAa,SAAS,WAAW;CAItD,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAG,OAAO,WAAW,SAAS;EACzC,OAAO;GACL;GACA,WAAW,aAAa,WAAW;GACnC;GACA,GAAG;EACL;EACA,GAAI;EAVN,UAAA,CAYE,oBAAC,MAAD;GAAY;GAAM,MAAM,EAAE,MAAM,QAAQ;GAAG,OAAO,EAAE,aAAa,SAAS;EAAI,CAAA,GAC9E,oBAAC,OAAD;GAAK,WAAW,GAAG,OAAO,SAAS,SAAS,UAAU,OAAO,eAAe;GAC1E,UAAA,oBAAC,OAAD,EAAM,SAAc,CAAA;EACjB,CAAA,CACE;;AAEb;AAEA,QAAQ,cAAc"}
+{"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"}

package/es/mdx/Callout/style.mjs

@@ -1,36 +1,21 @@
-import { createStaticStyles } from "antd-style";
 //#region src/mdx/Callout/style.ts
-const styles = createStaticStyles(({ css }) => {
-	return {
-		container: css`
-      --lobe-markdown-margin-multiple: 1;
-
-      overflow: hidden;
-      gap: 0.75em;
-
-      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
-      padding-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
-      padding-inline: 1em;
-      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);
-    `,
-		content: css`
-      margin-block: calc(var(--lobe-markdown-margin-multiple) * -1em);
-
-      > div {
-        margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
-      }
-
-      p {
-        color: inherit !important;
-      }
-    `,
-		underlineAnchor: css`
-      a {
-        text-decoration: underline;
-      }
-    `
-	};
-});
+const styles = {
+	container: {
+		"--lobe-markdown-margin-multiple": "lb3pag28",
+		kaIpWk: "lb1wra11o",
+		kqGvvJ: "lb1ysyzoe",
+		kVQacm: "lbb3r6kr",
+		$$css: true
+	},
+	content: {
+		kqGvvJ: "lb1ixfmg8",
+		$$css: true
+	},
+	inner: {
+		kqGvvJ: "lb1ysyzoe",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/Callout/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    container: css`\n      --lobe-markdown-margin-multiple: 1;\n\n      overflow: hidden;\n      gap: 0.75em;\n\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      padding-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      padding-inline: 1em;\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n    `,\n    content: css`\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * -1em);\n\n      > div {\n        margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      }\n\n      p {\n        color: inherit !important;\n      }\n    `,\n    underlineAnchor: css`\n      a {\n        text-decoration: underline;\n      }\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,UAAU;CACpD,OAAO;EACL,WAAW,GAAG;;;;;;;;;;;EAWd,SAAS,GAAG;;;;;;;;;;;EAWZ,iBAAiB,GAAG;;;;;CAKtB;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/Callout/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  container: {\n    '--lobe-markdown-margin-multiple': 1,\n    'borderRadius': 'calc(var(--lobe-markdown-border-radius) * 1px)',\n    'marginBlock': 'calc(var(--lobe-markdown-margin-multiple) * 1em)',\n    'overflow': 'hidden',\n  },\n  content: {\n    marginBlock: 'calc(var(--lobe-markdown-margin-multiple) * -1em)',\n  },\n  inner: {\n    marginBlock: 'calc(var(--lobe-markdown-margin-multiple) * 1em)',\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,WAAW;EACT,mCAAmC;EACnC,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -1,12 +1,12 @@
-import { BlockProps } from "../../Block/type.mjs";
-import "../../Block/index.mjs";
 import { IconProps } from "../../Icon/type.mjs";
 import "../../Icon/index.mjs";
-import { TagProps } from "../../base-ui/Tag/type.mjs";
-import "../../base-ui/Tag/index.mjs";
+import { BlockProps } from "../../Block/type.mjs";
+import "../../Block/index.mjs";
+import { TagProps } from "../../Tag/type.mjs";
+import "../../Tag/index.mjs";
 import { FC } from "react";
 //#region src/mdx/Cards/Card.d.ts
-interface CardProps extends Omit<BlockProps, 'children'> {
+export interface CardProps extends Omit<BlockProps, 'children'> {
   desc?: string;
   href?: string;
   icon?: IconProps['icon'];
@@ -18,5 +18,5 @@ interface CardProps extends Omit<BlockProps, 'children'> {
 }
 declare const Card: FC<CardProps>;
 //#endregion
-export { CardProps, Card as default };
+export { Card as default };
 //# sourceMappingURL=Card.d.mts.map

package/es/mdx/Cards/Card.mjs

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

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

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

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

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

package/es/mdx/Cards/index.mjs

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

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

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

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

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

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

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

package/es/mdx/Cards/style.mjs

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

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

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

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

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

package/es/mdx/FileTree/File.mjs

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

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

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

package/es/mdx/FileTree/Folder.mjs

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

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

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