boltdocs 2.7.9 → 2.7.11

package/dist/mdx-BdWkJTeB.cjs

@@ -0,0 +1,523 @@
+/**
+ * Boltdocs - https://boltdocs.vercel.app
+ * Copyright (c) 2026 Jesus Alcala
+ * Licensed under the MIT License.
+ */
+const require_icons_dev = require('./icons-dev-3cZMyt8r.cjs');
+const require_image = require('./image-DtrI2cw3.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+
+//#region src/client/components/mdx/callout.tsx
+const variantStyles = {
+	note: {
+		container: "bg-slate-500/5 dark:bg-slate-500/10 border-slate-500/40 text-slate-800 dark:text-slate-200",
+		titleText: "text-slate-900 dark:text-slate-100",
+		iconColor: "text-slate-500",
+		icon: require_icons_dev.Info,
+		defaultTitle: "Note"
+	},
+	info: {
+		container: "bg-indigo-500/5 dark:bg-indigo-500/10 border-indigo-500/40 text-indigo-800 dark:text-indigo-200",
+		titleText: "text-indigo-900 dark:text-indigo-100",
+		iconColor: "text-indigo-500",
+		icon: require_icons_dev.Info,
+		defaultTitle: "Info"
+	},
+	tip: {
+		container: "bg-green-500/5 dark:bg-green-500/10 border-green-500/40 text-green-800 dark:text-green-200",
+		titleText: "text-green-900 dark:text-green-100",
+		iconColor: "text-green-500",
+		icon: require_icons_dev.Lightbulb,
+		defaultTitle: "Tip"
+	},
+	warning: {
+		container: "bg-amber-500/5 dark:bg-amber-500/10 border-amber-500/40 text-amber-800 dark:text-amber-200",
+		titleText: "text-amber-900 dark:text-amber-100",
+		iconColor: "text-amber-500",
+		icon: require_icons_dev.AlertTriangle,
+		defaultTitle: "Warning"
+	},
+	danger: {
+		container: "bg-rose-500/5 dark:bg-rose-500/10 border-rose-500/40 text-rose-800 dark:text-rose-200",
+		titleText: "text-rose-900 dark:text-rose-100",
+		iconColor: "text-rose-500",
+		icon: require_icons_dev.AlertCircle,
+		defaultTitle: "Danger"
+	}
+};
+function Callout({ children, className = "", variant = "note", title, ...props }) {
+	const styles = variantStyles[variant] || variantStyles.note;
+	const Icon = styles.icon;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_icons_dev.cn("my-6 flex gap-4 p-4 rounded-xl border-2", styles.container, className),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_icons_dev.cn("shrink-0 pt-0.5", styles.iconColor),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "w-5 h-5 stroke-[2]" })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex-1 text-[0.875rem] leading-[1.6]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_icons_dev.cn("font-bold text-sm mb-1", styles.titleText),
+				children: title || styles.defaultTitle
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "prose prose-neutral dark:prose-invert max-w-none [&>p]:m-0 [&>p+p]:mt-2",
+				children
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/client/components/mdx/field.tsx
+const Field = ({ children, name, type, description, required }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	className: "my-4 border border-subtle bg-surface/50 p-4 rounded-xl flex flex-col gap-1 text-sm select-none",
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "font-mono font-bold text-primary-500",
+					children: name
+				}),
+				type && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-xs text-muted font-mono bg-soft px-1.5 py-0.5 rounded-md",
+					children: type
+				}),
+				required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-xs text-rose-500 font-semibold",
+					children: "required"
+				})
+			]
+		}),
+		description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "text-muted text-xs mt-1",
+			children: description
+		}),
+		children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "mt-2",
+			children
+		})
+	]
+});
+
+//#endregion
+//#region src/client/components/mdx/typographics.tsx
+const Anchor = ({ href, children, className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_dev.Link, {
+		href: href || "",
+		className: require_icons_dev.cn("text-primary-500 hover:text-primary-400 dark:text-primary-500 hover:underline font-medium transition-colors duration-200", className),
+		...props,
+		children
+	});
+};
+const HEADING_CLASSES = {
+	1: "text-3xl sm:text-[2.5rem] font-extrabold tracking-tight text-body mb-4 leading-tight",
+	2: "text-2xl sm:text-[1.75rem] font-bold tracking-tight text-body mt-14 mb-5 pb-2 border-b border-subtle scroll-mt-24",
+	3: "text-lg sm:text-[1.4rem] font-semibold tracking-tight text-body mt-10 mb-4 scroll-mt-24",
+	4: "text-base sm:text-[1.1rem] font-semibold tracking-tight text-body mt-8 mb-3 scroll-mt-24",
+	5: "text-sm sm:text-[0.9rem] font-semibold tracking-tight text-body mt-6 mb-2 scroll-mt-24",
+	6: "text-xs sm:text-[0.75rem] font-semibold tracking-tight text-body mt-6 mb-2 scroll-mt-24"
+};
+const Heading = ({ level, className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_image.Heading, {
+		level,
+		className: require_icons_dev.cn(HEADING_CLASSES[level] || "", className),
+		...props
+	});
+};
+const Typographics = {
+	a: Anchor,
+	h1: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
+		level: 1,
+		...props
+	}),
+	h2: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
+		level: 2,
+		...props
+	}),
+	h3: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
+		level: 3,
+		...props
+	}),
+	h4: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
+		level: 4,
+		...props
+	}),
+	h5: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
+		level: 5,
+		...props
+	}),
+	h6: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
+		level: 6,
+		...props
+	}),
+	p: ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: require_icons_dev.cn("text-paragraph leading-relaxed my-5", className),
+		...props
+	}),
+	strong: ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+		className: require_icons_dev.cn("font-semibold text-body", className),
+		...props
+	}),
+	mark: ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("mark", {
+		className: require_icons_dev.cn("bg-primary-500/10 text-primary-500 font-semibold px-1.5 py-0.5 rounded-md", className),
+		...props
+	}),
+	blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("blockquote", {
+		className: require_icons_dev.cn("border-l-4 border-primary-500 bg-soft/30 pl-4 py-2 my-6 italic text-muted rounded-r-lg", className),
+		...props
+	}),
+	hr: ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {
+		className: require_icons_dev.cn("my-8 border-t border-subtle", className),
+		...props
+	}),
+	ul: ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: require_icons_dev.cn("list-disc pl-6 my-5 space-y-2 text-paragraph", className),
+		...props
+	}),
+	ol: ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+		className: require_icons_dev.cn("list-decimal pl-6 my-5 space-y-2 text-paragraph", className),
+		...props
+	}),
+	li: ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+		className: require_icons_dev.cn("pl-1", className),
+		...props
+	})
+};
+
+//#endregion
+//#region src/client/components/mdx/table.tsx
+const Table = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: "my-6 w-full overflow-x-auto rounded-xl border border-subtle bg-surface/30",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+		className: "w-full border-collapse text-left text-sm",
+		...props
+	})
+});
+const TableHead = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+	className: require_icons_dev.cn("border-b border-subtle bg-soft/50", props.className),
+	...props
+});
+const TableBody = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { ...props });
+const TableRow = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+	className: require_icons_dev.cn("border-b border-subtle last:border-0 even:bg-soft/10 hover:bg-soft/20 transition-colors", props.className),
+	...props
+});
+const TableHeader = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+	className: require_icons_dev.cn("px-4 py-3 font-semibold text-body text-xs font-mono", props.className),
+	...props
+});
+const TableCell = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+	className: require_icons_dev.cn("px-4 py-3 text-paragraph leading-relaxed", props.className),
+	...props
+});
+const TableComponents = {
+	table: Table,
+	thead: TableHead,
+	tbody: TableBody,
+	tr: TableRow,
+	th: TableHeader,
+	td: TableCell
+};
+
+//#endregion
+//#region src/client/utils/react-to-text.ts
+const reactToText = (node, resolvers) => {
+	if (node == null || typeof node === "boolean") return "";
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map((n) => reactToText(n, resolvers)).join("");
+	if ((0, react.isValidElement)(node)) {
+		const resolver = resolvers?.get(node.type);
+		if (resolver) return resolver(node.props);
+		return reactToText(node.props.children, resolvers);
+	}
+	return "";
+};
+
+//#endregion
+//#region src/client/utils/copy-clipboard.ts
+/**
+* Copy text to clipboard.
+* @param text - The text to copy.
+* @returns True if the text was copied successfully.
+*/
+const copyToClipboard = async (text) => {
+	try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {
+		const textarea = document.createElement("textarea");
+		textarea.value = text;
+		textarea.style.position = "fixed";
+		textarea.style.opacity = "0";
+		document.body.appendChild(textarea);
+		textarea.select();
+		document.execCommand("copy");
+		document.body.removeChild(textarea);
+		return true;
+	}
+};
+
+//#endregion
+//#region src/client/components/mdx/use-code-block.ts
+function useCodeBlock(props) {
+	const [copied, setCopied] = (0, react.useState)(false);
+	const [isExpanded, setIsExpanded] = (0, react.useState)(false);
+	const [isExpandable, setIsExpandable] = (0, react.useState)(false);
+	const preRef = (0, react.useRef)(null);
+	const handleCopy = (0, react.useCallback)(async () => {
+		copyToClipboard(preRef.current?.textContent ?? "");
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2e3);
+	}, []);
+	(0, react.useEffect)(() => {
+		const lines = (preRef.current?.textContent ?? "").trim().split("\n").length;
+		setIsExpandable(lines > 6);
+	}, [props.children, props.highlightedHtml]);
+	return {
+		copied,
+		isExpanded,
+		setIsExpanded,
+		isExpandable,
+		preRef,
+		handleCopy,
+		shouldTruncate: isExpandable && !isExpanded
+	};
+}
+
+//#endregion
+//#region src/client/components/mdx/code-block.tsx
+const langIconMap = {
+	ts: require_icons_dev.TypeScript,
+	tsx: require_icons_dev.React,
+	js: require_icons_dev.JavaScript,
+	jsx: require_icons_dev.React,
+	json: require_icons_dev.Json,
+	css: require_icons_dev.Css,
+	html: require_icons_dev.BracketsOrange,
+	md: require_icons_dev.Markdown,
+	mdx: require_icons_dev.Markdown,
+	bash: require_icons_dev.Shell,
+	sh: require_icons_dev.Shell,
+	yaml: require_icons_dev.Yaml,
+	yml: require_icons_dev.Yaml,
+	rs: require_icons_dev.Rust,
+	rust: require_icons_dev.Rust,
+	toml: require_icons_dev.BracketsRed,
+	csv: require_icons_dev.Csv
+};
+const CopyButton = ({ copied, handleCopy }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_image.Tooltip, {
+		content: copied ? "Copied!" : "Copy code",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+			onPress: handleCopy,
+			className: require_icons_dev.cn("grid place-items-center size-8 bg-transparent outline-none cursor-pointer transition-all duration-200 hover:scale-110 active:scale-95 [&>svg]:size-4 [&>svg]:stroke-2 z-10", copied ? "text-emerald-400" : "text-muted hover:text-body"),
+			"aria-label": "Copy code",
+			children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_dev.Check, { size: 20 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_dev.Copy, { size: 20 })
+		})
+	});
+};
+function CodeBlock(props) {
+	const { children, hideCopy = false, highlightedHtml, "data-highlighted-html": dataHighlightedHtml, title, "data-title": dataTitle, "data-lang": dataLang, plain = false, ...rest } = props;
+	const rawHighlightedHtml = highlightedHtml || dataHighlightedHtml;
+	const effectiveHighlightedHtml = typeof rawHighlightedHtml === "string" ? rawHighlightedHtml.replace(/<span class="line">\s*(?:<span[^>]*>\s*<\/span>)?\s*<\/span>\s*(<\/code>\s*<\/pre>)/g, "$1") : rawHighlightedHtml;
+	const effectiveTitle = title || dataTitle;
+	const lang = props.lang || dataLang || "";
+	const { copied, isExpanded, setIsExpanded, isExpandable, preRef, handleCopy, shouldTruncate } = useCodeBlock(props);
+	const LangIcon = langIconMap[lang];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_image.CodeBlock, {
+		plain,
+		className: props.className,
+		children: [(effectiveTitle || !hideCopy) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_image.CodeBlockHeader, {
+			className: require_icons_dev.cn({ "absolute top-2 left-0 w-full": !effectiveTitle }),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_image.CodeBlockGroup, { children: effectiveTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [LangIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LangIcon, { size: 14 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_dev.File, {
+				size: 14,
+				className: "opacity-60"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: effectiveTitle })] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex items-center gap-1",
+				children: !hideCopy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, {
+					copied,
+					handleCopy
+				})
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_image.CodeBlockContent, {
+			shouldTruncate,
+			children: [effectiveHighlightedHtml ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: preRef,
+				className: "shiki-wrapper overflow-x-auto [&>pre]:m-0! [&>pre]:rounded-none! [&>pre]:border-none! [&>pre]:bg-inherit! [&>pre>code]:grid! [&>pre>code]:p-5! [&>pre>code]:text-[0.875rem]! [&>pre>code]:leading-[1.6]! [&>.shiki.shiki-themes]:bg-transparent!",
+				dangerouslySetInnerHTML: { __html: effectiveHighlightedHtml }
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+				ref: preRef,
+				className: "m-0! p-5! rounded-none! border-none! bg-inherit! font-mono text-[0.875rem] leading-[1.6] overflow-x-auto",
+				...rest,
+				children: reactToText(children).trimEnd()
+			}), isExpandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_icons_dev.cn(shouldTruncate ? "absolute bottom-0 inset-x-0 h-24 bg-linear-to-t from-(--color-code-bg) to-transparent flex items-end justify-center pb-4 z-10" : "relative flex justify-center pb-4 pt-1 -mt-4"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+					onPress: () => setIsExpanded(!isExpanded),
+					className: "rounded-full bg-surface border border-subtle px-5 py-2 text-[0.8125rem] font-medium text-body outline-none cursor-pointer transition-all hover:bg-soft hover:-translate-y-px backdrop-blur-md",
+					children: isExpanded ? "Show less" : "Expand code"
+				})
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/client/components/mdx/image.tsx
+const Image = ({ src, alt, title, theme, className, ...props }) => {
+	const { theme: themeContext } = require_image.useTheme();
+	if (!src) return null;
+	if (theme !== themeContext) return null;
+	const caption = title || alt;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("figure", {
+		className: "my-6 sm:my-8 flex flex-col items-center justify-center group not-prose",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "relative w-full overflow-hidden rounded-lg sm:rounded-2xl border border-subtle bg-soft/30 transition-all duration-300 sm:max-w-[85%] lg:max-w-full",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_image.Image, {
+				src,
+				alt: alt || "",
+				theme,
+				loading: "lazy",
+				decoding: "async",
+				className: require_icons_dev.cn("w-full h-auto object-contain transition-transform duration-500 group-hover:scale-[1.01] my-0 rounded-md sm:rounded-xl block", className),
+				...props
+			})
+		}), caption && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("figcaption", {
+			className: "mt-2 sm:mt-3 text-center text-xs sm:text-sm text-muted font-medium select-none tracking-wide opacity-90 sm:opacity-80 group-hover:opacity-100 transition-opacity duration-300 px-2",
+			children: caption
+		})]
+	});
+};
+const ImageComponents = {
+	img: Image,
+	Image
+};
+
+//#endregion
+//#region src/client/components/mdx/card.tsx
+function Card({ className, title, icon, href, children, ...props }) {
+	const [position, setPosition] = (0, react.useState)({
+		x: 0,
+		y: 0
+	});
+	const [opacity, setOpacity] = (0, react.useState)(0);
+	const cardRef = (0, react.useRef)(null);
+	const handleMouseMove = (e) => {
+		if (!cardRef.current) return;
+		const rect = cardRef.current.getBoundingClientRect();
+		setPosition({
+			x: e.clientX - rect.left,
+			y: e.clientY - rect.top
+		});
+	};
+	const handleMouseEnter = () => setOpacity(1);
+	const handleMouseLeave = () => setOpacity(0);
+	const Wrapper = href ? "a" : "div";
+	const spotlightColor = "var(--color-primary-500, #eb5828)";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Wrapper, {
+		ref: cardRef,
+		href,
+		onMouseMove: handleMouseMove,
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		className: require_icons_dev.cn("group relative flex flex-col gap-3 rounded-2xl border p-6 overflow-hidden transition-all duration-300", "hover:shadow-lg dark:hover:shadow-none hover:-translate-y-0.5", "bg-surface border-subtle text-paragraph", href && "cursor-pointer", className),
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "pointer-events-none absolute inset-0 transition-opacity duration-300",
+				style: {
+					opacity,
+					background: `radial-gradient(600px circle at ${position.x}px ${position.y}px, color-mix(in srgb, ${spotlightColor} 8%, transparent), transparent 40%)`
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "pointer-events-none absolute inset-0 rounded-2xl transition-opacity duration-300",
+				style: {
+					opacity,
+					padding: "1px",
+					background: `radial-gradient(400px circle at ${position.x}px ${position.y}px, color-mix(in srgb, ${spotlightColor} 50%, transparent), transparent 40%)`,
+					WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+					WebkitMaskComposite: "xor",
+					maskComposite: "exclude"
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative z-10 flex items-center gap-3",
+				children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_icons_dev.cn("shrink-0 transition-transform duration-500 group-hover:rotate-[15deg] group-hover:scale-110 flex items-center justify-center text-muted group-hover:text-primary-500", "[&>svg]:w-6 [&>svg]:h-6 [&>svg]:stroke-[1.5]"),
+					children: icon
+				}), title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					className: "font-semibold text-base m-0 leading-none text-body",
+					children: title
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "relative z-10 text-[0.875rem] leading-[1.6] opacity-90 prose prose-neutral dark:prose-invert max-w-none [&>p]:m-0 [&>p+p]:mt-2",
+				children
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/client/components/mdx/cards.tsx
+function Cards({ children, className, cols = 2, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_icons_dev.cn("grid gap-4 my-6", {
+			"grid-cols-1": cols === 1,
+			"grid-cols-1 sm:grid-cols-2": cols === 2,
+			"grid-cols-1 sm:grid-cols-2 md:grid-cols-3": cols === 3,
+			"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4": cols === 4
+		}, className),
+		...props,
+		children
+	});
+}
+
+//#endregion
+//#region src/client/components/mdx/index.ts
+const mdx_components_default = {
+	...Typographics,
+	...TableComponents,
+	...ImageComponents,
+	pre: CodeBlock,
+	Field,
+	Callout,
+	Card,
+	Cards
+};
+
+//#endregion
+Object.defineProperty(exports, 'Card', {
+  enumerable: true,
+  get: function () {
+    return Card;
+  }
+});
+Object.defineProperty(exports, 'Cards', {
+  enumerable: true,
+  get: function () {
+    return Cards;
+  }
+});
+Object.defineProperty(exports, 'copyToClipboard', {
+  enumerable: true,
+  get: function () {
+    return copyToClipboard;
+  }
+});
+Object.defineProperty(exports, 'mdx_components_default', {
+  enumerable: true,
+  get: function () {
+    return mdx_components_default;
+  }
+});
+Object.defineProperty(exports, 'reactToText', {
+  enumerable: true,
+  get: function () {
+    return reactToText;
+  }
+});