@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/Button-QCM8ZKgR.d.ts

@@ -0,0 +1,98 @@
+import { ButtonHTMLAttributes, ComponentPropsWithoutRef } from "react";
+import { Button } from "@base-ui/react/button";
+
+//#region src/components/Button.d.ts
+/**
+ * The visual rendering style of the button.
+ *
+ * - `normal` - Filled background (default)
+ * - `outline` - Low-emphasis with border, transparent background
+ * - `ghost` - Minimal style, background appears on hover
+ * - `link` - Appears as a text link with underline on hover
+ */
+type ButtonVariant = "normal" | "outline" | "ghost" | "link";
+/**
+ * The semantic color intent of the button.
+ *
+ * - `neutral` - Medium-emphasis actions, muted background
+ * - `primary` - High-emphasis actions, uses primary brand color
+ * - `destructive` - Dangerous or irreversible actions
+ */
+type ButtonColor = "neutral" | "primary" | "destructive";
+/**
+ * Available button sizes.
+ *
+ * - `xs` - Extra small, 1.75rem height
+ * - `sm` - Small, 2rem height
+ * - `md` - Medium (default), 2.5rem height
+ * - `lg` - Large, 2.75rem height
+ * - `xl` - Extra large, 3.25rem height
+ * - `icon` - Square button for icon-only content
+ */
+type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+type ShadcnButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+type ShadcnButtonSize = "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+interface ButtonVariantsOptions {
+  variant?: ShadcnButtonVariant | ButtonVariant | null;
+  color?: ButtonColor | null;
+  size?: ShadcnButtonSize | ButtonSize | null;
+  className?: string;
+}
+declare function buttonVariants({
+  variant,
+  color,
+  size,
+  className
+}?: ButtonVariantsOptions): string;
+/**
+ * Props for the Button component.
+ */
+type BaseButtonProps = ComponentPropsWithoutRef<typeof Button>;
+interface ButtonProps extends BaseButtonProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseButtonProps | "color"> {
+  /**
+   * The visual rendering style of the button.
+   * @default 'default'
+   */
+  variant?: ShadcnButtonVariant | ButtonVariant;
+  /**
+   * The semantic color intent of the button.
+   * @default 'primary'
+   */
+  color?: ButtonColor;
+  /**
+   * The size of the button.
+   * @default 'md'
+   */
+  size?: ShadcnButtonSize | ButtonSize;
+}
+/**
+ * A button component built on Base UI with semantic styling variants.
+ *
+ * Separates visual style (`variant`) from color intent (`color`) for
+ * maximum flexibility. Supports keyboard navigation, focus management, and
+ * accessibility out of the box. Keeps shadcn-compatible variant and size
+ * aliases for migration, while styling through Sigvelo CSS tokens.
+ *
+ * @example
+ * ```tsx
+ * <Button color="primary">Save changes</Button>
+ * <Button color="destructive">Delete account</Button>
+ * <Button variant="outline">Cancel</Button>
+ * <Button variant="ghost" size="icon"><SearchIcon /></Button>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/button | Base UI Button}
+ * @see {@link https://ui.shadcn.com/docs/components/base/button | shadcn/ui Button}
+ */
+declare function Button$1({
+  variant,
+  color,
+  size,
+  className,
+  ref,
+  ...props
+}: ButtonProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): import("react").JSX.Element;
+//#endregion
+export { ButtonVariant as a, ShadcnButtonVariant as c, ButtonSize as i, buttonVariants as l, ButtonColor as n, ButtonVariantsOptions as o, ButtonProps as r, ShadcnButtonSize as s, Button$1 as t };

package/dist/CodeBlock-CttHhWcb.js

@@ -0,0 +1,356 @@
+import { Select, SelectContent, SelectItem, SelectList, SelectTrigger, SelectValue } from "./components/Select.js";
+import { t as cx } from "./class-names-9UtZwb0J.js";
+import { t as CopyButton } from "./copy-button-BNgclDrO.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createHighlighter } from "shiki";
+//#region src/components/_internal/shiki.ts
+const CODE_BLOCK_LANGUAGES = [
+	"ts",
+	"tsx",
+	"js",
+	"jsx",
+	"css",
+	"html",
+	"json",
+	"bash",
+	"md"
+];
+const SHIKI_LANGS = [
+	"typescript",
+	"tsx",
+	"javascript",
+	"jsx",
+	"css",
+	"html",
+	"json",
+	"bash",
+	"markdown"
+];
+const LANG_ALIAS = {
+	ts: "typescript",
+	tsx: "tsx",
+	js: "javascript",
+	jsx: "jsx",
+	css: "css",
+	html: "html",
+	json: "json",
+	bash: "bash",
+	md: "markdown"
+};
+let highlighterPromise = null;
+/**
+* Returns a cached Shiki highlighter instance with both light and dark themes.
+* Extra languages are loaded lazily by `loadShikiLanguage`.
+*/
+function getHighlighterInstance() {
+	highlighterPromise ??= createHighlighter({
+		themes: ["github-light-high-contrast", "github-dark-high-contrast"],
+		langs: SHIKI_LANGS
+	});
+	return highlighterPromise;
+}
+/**
+* Loads a Shiki bundled language if it is not already available.
+*/
+async function loadShikiLanguage(highlighter, lang) {
+	const shikiLang = toShikiLang(lang);
+	if (!highlighter.getLoadedLanguages().includes(shikiLang)) await highlighter.loadLanguage(shikiLang);
+	return shikiLang;
+}
+function toShikiLang(lang) {
+	return LANG_ALIAS[lang] ?? lang;
+}
+//#endregion
+//#region src/components/CodeBlock.tsx
+const tokensCache = /* @__PURE__ */ new Map();
+const subscribers = /* @__PURE__ */ new Map();
+function getTokensCacheKey(code, language) {
+	return JSON.stringify([language, code]);
+}
+function createRawTokens(code) {
+	return {
+		bg: "transparent",
+		fg: "inherit",
+		tokens: code.split("\n").map((line) => line ? [{
+			content: line,
+			color: "inherit"
+		}] : [])
+	};
+}
+function resolveCodeBlockLanguage(language) {
+	return CODE_BLOCK_LANGUAGES.includes(language) ? toShikiLang(language) : language;
+}
+function highlightCode(code, language, callback) {
+	const tokensCacheKey = getTokensCacheKey(code, language);
+	const cached = tokensCache.get(tokensCacheKey);
+	if (cached) return cached;
+	if (callback) {
+		const tokenSubscribers = subscribers.get(tokensCacheKey) ?? /* @__PURE__ */ new Set();
+		tokenSubscribers.add(callback);
+		subscribers.set(tokensCacheKey, tokenSubscribers);
+	}
+	getHighlighterInstance().then(async (highlighter) => {
+		const lang = resolveCodeBlockLanguage(language);
+		let result;
+		try {
+			const loadedLang = await loadShikiLanguage(highlighter, lang);
+			result = highlighter.codeToTokens(code, {
+				lang: loadedLang,
+				themes: {
+					light: "github-light-high-contrast",
+					dark: "github-dark-high-contrast"
+				}
+			});
+		} catch {
+			const raw = createRawTokens(code);
+			tokensCache.set(tokensCacheKey, raw);
+			notifyTokenSubscribers(tokensCacheKey, raw);
+			return;
+		}
+		const tokenized = {
+			tokens: result.tokens,
+			fg: result.fg ?? "inherit",
+			bg: result.bg ?? "transparent"
+		};
+		tokensCache.set(tokensCacheKey, tokenized);
+		notifyTokenSubscribers(tokensCacheKey, tokenized);
+	}).catch(() => {
+		const raw = createRawTokens(code);
+		tokensCache.set(tokensCacheKey, raw);
+		notifyTokenSubscribers(tokensCacheKey, raw);
+	});
+	return null;
+}
+function notifyTokenSubscribers(tokensCacheKey, result) {
+	const tokenSubscribers = subscribers.get(tokensCacheKey);
+	if (!tokenSubscribers) return;
+	for (const subscriber of tokenSubscribers) subscriber(result);
+	subscribers.delete(tokensCacheKey);
+}
+const CodeBlockContext = React.createContext(null);
+function useCodeBlockContext() {
+	const ctx = React.useContext(CodeBlockContext);
+	if (!ctx) throw new Error("CodeBlock subcomponents must be used inside <CodeBlock>.");
+	return ctx;
+}
+function renderPlainCode(code, showLineNumbers) {
+	if (!showLineNumbers) return code;
+	return code.split("\n").map((line, index) => /* @__PURE__ */ jsx("span", {
+		className: "line",
+		children: line || " "
+	}, `${index}-${line}`));
+}
+function hasCustomCodeBlockContent(children) {
+	return React.Children.toArray(children).some((child) => React.isValidElement(child) && (child.type === CodeBlockContainer || child.type === CodeBlockContent));
+}
+/**
+* A syntax-highlighted code block powered by Shiki. Supports line numbers,
+* inline language switching, and a copy-to-clipboard action.
+*
+* Supports Shiki bundled language names plus the short aliases in
+* `CODE_BLOCK_LANGUAGES`. The highlighter is loaded lazily on first render and
+* cached at module scope. Adapted from Vercel AI Elements and restyled with
+* Sigvelo CSS tokens.
+*
+* @example
+* ```tsx
+* <CodeBlock code={"const x = 42;"} language="ts">
+*   <CodeBlockHeader>
+*     <CodeBlockFilename>example.ts</CodeBlockFilename>
+*     <CodeBlockActions>
+*       <CodeBlockCopyButton />
+*     </CodeBlockActions>
+*   </CodeBlockHeader>
+*   <CodeBlockContainer>
+*     <CodeBlockContent />
+*   </CodeBlockContainer>
+* </CodeBlock>
+* ```
+*
+* @see {@link https://elements.ai-sdk.dev/components/code-block | AI Elements Code Block}
+*/
+function CodeBlock({ className, code, language, showLineNumbers = false, isStreaming = false, onLanguageChange, children, ref, ...props }) {
+	const [internalLanguage, setInternalLanguage] = React.useState(language);
+	React.useEffect(() => {
+		setInternalLanguage(language);
+	}, [language]);
+	const setLanguage = React.useCallback((next) => {
+		setInternalLanguage(next);
+		onLanguageChange?.(next);
+	}, [onLanguageChange]);
+	const ctxValue = React.useMemo(() => ({
+		code,
+		language: internalLanguage,
+		setLanguage,
+		showLineNumbers,
+		isStreaming
+	}), [
+		code,
+		internalLanguage,
+		setLanguage,
+		showLineNumbers,
+		isStreaming
+	]);
+	const hasCustomContent = hasCustomCodeBlockContent(children);
+	return /* @__PURE__ */ jsx(CodeBlockContext.Provider, {
+		value: ctxValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			className: cx("code-block", className),
+			...props,
+			children: [children, !hasCustomContent && /* @__PURE__ */ jsx(CodeBlockContainer, { children: /* @__PURE__ */ jsx(CodeBlockContent, {}) })]
+		})
+	});
+}
+function CodeBlockHeader({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("code-block__header", className),
+		...props,
+		children
+	});
+}
+function CodeBlockTitle({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("code-block__title", className),
+		...props,
+		children
+	});
+}
+function CodeBlockFilename({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("code-block__filename", className),
+		...props,
+		children
+	});
+}
+function CodeBlockActions({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("code-block__actions", className),
+		...props,
+		children
+	});
+}
+function CodeBlockCopyButton({ className, label = "Copy code", timeout = 2e3, onClick, ...props }) {
+	const { code } = useCodeBlockContext();
+	return /* @__PURE__ */ jsx(CopyButton, {
+		...props,
+		text: code,
+		label,
+		timeout,
+		className: cx("code-block__copy", className),
+		onClick
+	});
+}
+function CodeBlockLanguageSelector({ children, className, languages = CODE_BLOCK_LANGUAGES, onValueChange, ref, value, ...props }) {
+	const { language, setLanguage } = useCodeBlockContext();
+	const handleValueChange = React.useCallback((next, eventDetails) => {
+		setLanguage(next);
+		onValueChange?.(next, eventDetails);
+	}, [onValueChange, setLanguage]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("code-block__language-selector", className),
+		children: /* @__PURE__ */ jsx(Select, {
+			...props,
+			value: value ?? language,
+			onValueChange: handleValueChange,
+			children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CodeBlockLanguageSelectorTrigger, {
+				"aria-label": "Code language",
+				children: /* @__PURE__ */ jsx(CodeBlockLanguageSelectorValue, {})
+			}), /* @__PURE__ */ jsx(CodeBlockLanguageSelectorContent, { children: /* @__PURE__ */ jsx(SelectList, { children: languages.map((lang) => /* @__PURE__ */ jsx(CodeBlockLanguageSelectorItem, {
+				value: lang,
+				children: lang
+			}, lang)) }) })] })
+		})
+	});
+}
+function CodeBlockLanguageSelectorTrigger({ size = "sm", ...props }) {
+	return /* @__PURE__ */ jsx(SelectTrigger, {
+		size,
+		...props
+	});
+}
+function CodeBlockLanguageSelectorValue(props) {
+	return /* @__PURE__ */ jsx(SelectValue, { ...props });
+}
+function CodeBlockLanguageSelectorContent({ align = "end", ...props }) {
+	return /* @__PURE__ */ jsx(SelectContent, {
+		align,
+		...props
+	});
+}
+function CodeBlockLanguageSelectorItem(props) {
+	return /* @__PURE__ */ jsx(SelectItem, { ...props });
+}
+function CodeBlockContainer({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("code-block__container", className),
+		...props,
+		children
+	});
+}
+function CodeBlockContent({ className, ref, ...props }) {
+	const { code, language, showLineNumbers, isStreaming } = useCodeBlockContext();
+	const [html, setHtml] = React.useState(null);
+	const [theme, setTheme] = React.useState(() => typeof document !== "undefined" && document.documentElement.dataset.theme === "dark" ? "github-dark-high-contrast" : "github-light-high-contrast");
+	React.useEffect(() => {
+		if (typeof document === "undefined") return;
+		const update = () => {
+			setTheme(document.documentElement.dataset.theme === "dark" ? "github-dark-high-contrast" : "github-light-high-contrast");
+		};
+		const observer = new MutationObserver(update);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["data-theme"]
+		});
+		return () => observer.disconnect();
+	}, []);
+	React.useEffect(() => {
+		if (isStreaming) return;
+		let cancelled = false;
+		(async () => {
+			try {
+				const highlighter = await getHighlighterInstance();
+				const loadedLang = await loadShikiLanguage(highlighter, language);
+				const out = highlighter.codeToHtml(code, {
+					lang: loadedLang,
+					theme
+				});
+				if (!cancelled) setHtml(out);
+			} catch {
+				if (!cancelled) setHtml(`<pre>${escapeHtml(code)}</pre>`);
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		code,
+		language,
+		theme,
+		isStreaming
+	]);
+	if (html === null || isStreaming) return /* @__PURE__ */ jsx("pre", {
+		ref,
+		className: cx("code-block__content", showLineNumbers && "code-block__content--numbered", className),
+		...props,
+		children: /* @__PURE__ */ jsx("code", { children: renderPlainCode(code, showLineNumbers) })
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("code-block__content code-block__content--highlighted", showLineNumbers && "code-block__content--numbered", className),
+		dangerouslySetInnerHTML: { __html: html },
+		...props
+	});
+}
+function escapeHtml(s) {
+	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+//#endregion
+export { CodeBlockCopyButton as a, CodeBlockLanguageSelector as c, CodeBlockLanguageSelectorTrigger as d, CodeBlockLanguageSelectorValue as f, CODE_BLOCK_LANGUAGES as h, CodeBlockContent as i, CodeBlockLanguageSelectorContent as l, highlightCode as m, CodeBlockActions as n, CodeBlockFilename as o, CodeBlockTitle as p, CodeBlockContainer as r, CodeBlockHeader as s, CodeBlock as t, CodeBlockLanguageSelectorItem as u };

package/dist/CodeBlock-V6pgafSS.d.ts

@@ -0,0 +1,174 @@
+import { A as SelectTriggerProps, M as SelectValueProps, S as SelectProps, r as SelectContentProps, s as SelectItemProps } from "./Select-CRsKCJ9x.js";
+import { t as CopyButtonProps } from "./copy-button-BIATcZWZ.js";
+import * as React from "react";
+import { BundledLanguage, ThemedToken } from "shiki";
+
+//#region src/components/_internal/shiki.d.ts
+/**
+ * Supported languages for CodeBlock.
+ *
+ * These are the default short aliases shown in the language selector. Full
+ * Shiki bundled language names are loaded on demand.
+ */
+type CodeBlockLanguage = BundledLanguage | "ts" | "tsx" | "js" | "jsx" | "css" | "html" | "json" | "bash" | "md";
+declare const CODE_BLOCK_LANGUAGES: ReadonlyArray<CodeBlockLanguage>;
+//#endregion
+//#region src/components/CodeBlock.d.ts
+interface TokenizedCode {
+  tokens: ThemedToken[][];
+  fg: string;
+  bg: string;
+}
+declare function highlightCode(code: string, language: CodeBlockLanguage | BundledLanguage, callback?: (result: TokenizedCode) => void): TokenizedCode | null;
+interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The source code to display. */
+  code: string;
+  /** The language to highlight as. */
+  language: CodeBlockLanguage;
+  /** Whether to render line numbers in the left gutter. */
+  showLineNumbers?: boolean;
+  /**
+   * Skip syntax highlighting while code is actively streaming in. Renders the
+   * plain monospace fallback instead. Highlighting runs once when this flips
+   * back to false.
+   */
+  isStreaming?: boolean;
+  /** Fired when the language is changed via the inline selector. */
+  onLanguageChange?: (next: CodeBlockLanguage) => void;
+}
+/**
+ * A syntax-highlighted code block powered by Shiki. Supports line numbers,
+ * inline language switching, and a copy-to-clipboard action.
+ *
+ * Supports Shiki bundled language names plus the short aliases in
+ * `CODE_BLOCK_LANGUAGES`. The highlighter is loaded lazily on first render and
+ * cached at module scope. Adapted from Vercel AI Elements and restyled with
+ * Sigvelo CSS tokens.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock code={"const x = 42;"} language="ts">
+ *   <CodeBlockHeader>
+ *     <CodeBlockFilename>example.ts</CodeBlockFilename>
+ *     <CodeBlockActions>
+ *       <CodeBlockCopyButton />
+ *     </CodeBlockActions>
+ *   </CodeBlockHeader>
+ *   <CodeBlockContainer>
+ *     <CodeBlockContent />
+ *   </CodeBlockContainer>
+ * </CodeBlock>
+ * ```
+ *
+ * @see {@link https://elements.ai-sdk.dev/components/code-block | AI Elements Code Block}
+ */
+declare function CodeBlock({
+  className,
+  code,
+  language,
+  showLineNumbers,
+  isStreaming,
+  onLanguageChange,
+  children,
+  ref,
+  ...props
+}: CodeBlockProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface CodeBlockHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function CodeBlockHeader({
+  className,
+  children,
+  ref,
+  ...props
+}: CodeBlockHeaderProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface CodeBlockTitleProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function CodeBlockTitle({
+  className,
+  children,
+  ref,
+  ...props
+}: CodeBlockTitleProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface CodeBlockFilenameProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function CodeBlockFilename({
+  className,
+  children,
+  ref,
+  ...props
+}: CodeBlockFilenameProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface CodeBlockActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function CodeBlockActions({
+  className,
+  children,
+  ref,
+  ...props
+}: CodeBlockActionsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface CodeBlockCopyButtonProps extends Omit<CopyButtonProps, "text" | "label"> {
+  label?: string;
+}
+declare function CodeBlockCopyButton({
+  className,
+  label,
+  timeout,
+  onClick,
+  ...props
+}: CodeBlockCopyButtonProps): React.JSX.Element;
+interface CodeBlockLanguageSelectorProps extends Omit<SelectProps, "children" | "onValueChange" | "value"> {
+  languages?: ReadonlyArray<CodeBlockLanguage>;
+  value?: SelectProps["value"];
+  onValueChange?: SelectProps["onValueChange"];
+  children?: React.ReactNode;
+  className?: string;
+}
+declare function CodeBlockLanguageSelector({
+  children,
+  className,
+  languages,
+  onValueChange,
+  ref,
+  value,
+  ...props
+}: CodeBlockLanguageSelectorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+type CodeBlockLanguageSelectorTriggerProps = SelectTriggerProps;
+type CodeBlockLanguageSelectorValueProps = SelectValueProps;
+type CodeBlockLanguageSelectorContentProps = SelectContentProps;
+type CodeBlockLanguageSelectorItemProps = SelectItemProps;
+declare function CodeBlockLanguageSelectorTrigger({
+  size,
+  ...props
+}: CodeBlockLanguageSelectorTriggerProps): React.JSX.Element;
+declare function CodeBlockLanguageSelectorValue(props: CodeBlockLanguageSelectorValueProps): React.JSX.Element;
+declare function CodeBlockLanguageSelectorContent({
+  align,
+  ...props
+}: CodeBlockLanguageSelectorContentProps): React.JSX.Element;
+declare function CodeBlockLanguageSelectorItem(props: CodeBlockLanguageSelectorItemProps): React.JSX.Element;
+interface CodeBlockContainerProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function CodeBlockContainer({
+  className,
+  children,
+  ref,
+  ...props
+}: CodeBlockContainerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface CodeBlockContentProps extends React.HTMLAttributes<HTMLElement> {}
+declare function CodeBlockContent({
+  className,
+  ref,
+  ...props
+}: CodeBlockContentProps & {
+  ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+//#endregion
+export { CodeBlockLanguage as A, CodeBlockLanguageSelectorValueProps as C, TokenizedCode as D, CodeBlockTitleProps as E, highlightCode as O, CodeBlockLanguageSelectorValue as S, CodeBlockTitle as T, CodeBlockLanguageSelectorItem as _, CodeBlockContainerProps as a, CodeBlockLanguageSelectorTrigger as b, CodeBlockCopyButton as c, CodeBlockFilenameProps as d, CodeBlockHeader as f, CodeBlockLanguageSelectorContentProps as g, CodeBlockLanguageSelectorContent as h, CodeBlockContainer as i, CODE_BLOCK_LANGUAGES as k, CodeBlockCopyButtonProps as l, CodeBlockLanguageSelector as m, CodeBlockActions as n, CodeBlockContent as o, CodeBlockHeaderProps as p, CodeBlockActionsProps as r, CodeBlockContentProps as s, CodeBlock as t, CodeBlockFilename as u, CodeBlockLanguageSelectorItemProps as v, CodeBlockProps as w, CodeBlockLanguageSelectorTriggerProps as x, CodeBlockLanguageSelectorProps as y };