scoobie 21.2.0 → 22.0.0

package/lib/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1,23 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+exports.__toESM = __toESM;

package/lib/components/Blockquote.cjs

@@ -0,0 +1,25 @@
+require("../_virtual/_rolldown/runtime.cjs");
+const require_Blockquote_css = require("./Blockquote.css.cjs");
+let braid_design_system = require("braid-design-system");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Blockquote.tsx
+const Blockquote = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(braid_design_system.Box, {
+	className: require_Blockquote_css.quoteBlock,
+	padding: "medium",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(braid_design_system.Stack, {
+		space: "medium",
+		children
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(braid_design_system.Box, {
+		position: "absolute",
+		className: require_Blockquote_css.quoteMark,
+		userSelect: "none",
+		zIndex: 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(braid_design_system.Heading, {
+			component: "div",
+			level: "2",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(braid_design_system.Secondary, { children: "”" })
+		})
+	})]
+});
+//#endregion
+exports.Blockquote = Blockquote;

package/lib/components/Blockquote.css.cjs

@@ -0,0 +1,29 @@
+require("../_virtual/_rolldown/runtime.cjs");
+let _vanilla_extract_css_fileScope = require("@vanilla-extract/css/fileScope");
+let _vanilla_extract_css = require("@vanilla-extract/css");
+let braid_design_system_css = require("braid-design-system/css");
+//#region src/components/Blockquote.css.ts
+(0, _vanilla_extract_css_fileScope.setFileScope)("src/components/Blockquote.css.ts", "scoobie");
+const quoteBlock = (0, _vanilla_extract_css.style)([{
+	borderLeftStyle: "solid",
+	borderLeftWidth: braid_design_system_css.vars.space.xxsmall,
+	borderRadius: braid_design_system_css.vars.borderRadius.standard,
+	position: "relative"
+}, (0, braid_design_system_css.colorModeStyle)({
+	darkMode: {
+		backgroundColor: braid_design_system_css.vars.backgroundColor.neutral,
+		borderLeftColor: braid_design_system_css.vars.borderColor.field
+	},
+	lightMode: {
+		backgroundColor: braid_design_system_css.vars.backgroundColor.neutralLight,
+		borderLeftColor: braid_design_system_css.vars.borderColor.neutralLight
+	}
+})], "quoteBlock");
+const quoteMark = (0, _vanilla_extract_css.style)({
+	right: braid_design_system_css.vars.space.xxsmall,
+	top: braid_design_system_css.vars.space.xxsmall
+}, "quoteMark");
+(0, _vanilla_extract_css_fileScope.endFileScope)();
+//#endregion
+exports.quoteBlock = quoteBlock;
+exports.quoteMark = quoteMark;

package/lib/components/Blockquote.css.js

@@ -0,0 +1,27 @@
+import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { colorModeStyle, vars } from "braid-design-system/css";
+//#region src/components/Blockquote.css.ts
+setFileScope("src/components/Blockquote.css.ts", "scoobie");
+const quoteBlock = style([{
+	borderLeftStyle: "solid",
+	borderLeftWidth: vars.space.xxsmall,
+	borderRadius: vars.borderRadius.standard,
+	position: "relative"
+}, colorModeStyle({
+	darkMode: {
+		backgroundColor: vars.backgroundColor.neutral,
+		borderLeftColor: vars.borderColor.field
+	},
+	lightMode: {
+		backgroundColor: vars.backgroundColor.neutralLight,
+		borderLeftColor: vars.borderColor.neutralLight
+	}
+})], "quoteBlock");
+const quoteMark = style({
+	right: vars.space.xxsmall,
+	top: vars.space.xxsmall
+}, "quoteMark");
+endFileScope();
+//#endregion
+export { quoteBlock, quoteMark };

package/lib/components/Blockquote.d.cts

@@ -0,0 +1,10 @@
+import { StackChildrenProps } from "../private/types.cjs";
+import * as _$react from "react";
+
+//#region src/components/Blockquote.d.ts
+type Props = StackChildrenProps;
+declare const Blockquote: ({
+  children
+}: Props) => _$react.JSX.Element;
+//#endregion
+export { Blockquote };

package/lib/components/Blockquote.d.ts

@@ -0,0 +1,10 @@
+import { StackChildrenProps } from "../private/types.js";
+import * as _$react from "react";
+
+//#region src/components/Blockquote.d.ts
+type Props = StackChildrenProps;
+declare const Blockquote: ({
+  children
+}: Props) => _$react.JSX.Element;
+//#endregion
+export { Blockquote };

package/lib/components/Blockquote.js

@@ -0,0 +1,24 @@
+import { quoteBlock, quoteMark } from "./Blockquote.css.js";
+import { Box, Heading, Secondary, Stack } from "braid-design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Blockquote.tsx
+const Blockquote = ({ children }) => /* @__PURE__ */ jsxs(Box, {
+	className: quoteBlock,
+	padding: "medium",
+	children: [/* @__PURE__ */ jsx(Stack, {
+		space: "medium",
+		children
+	}), /* @__PURE__ */ jsx(Box, {
+		position: "absolute",
+		className: quoteMark,
+		userSelect: "none",
+		zIndex: 0,
+		children: /* @__PURE__ */ jsx(Heading, {
+			component: "div",
+			level: "2",
+			children: /* @__PURE__ */ jsx(Secondary, { children: "”" })
+		})
+	})]
+});
+//#endregion
+export { Blockquote };

package/lib/components/CodeBlock/CodeChild.cjs

@@ -0,0 +1,82 @@
+const require_prismUtils = require("../../private/prismUtils.cjs");
+//#region src/components/CodeBlock/CodeChild.tsx
+/**
+* Apply labels to the provided code nodes.
+*/
+const withLabels = (children, labels) => children.map((child, index) => ({
+	...child,
+	label: labels[index]
+}));
+/**
+* Determine a unique label for each code node.
+*
+* If an explicit label is not provided, the language field is used instead. On
+* conflicts, the label is suffixed with an incrementing integer starting at 1.
+*/
+const determineUniqueLabels = (rawChildren) => {
+	const children = withLabels(rawChildren, rawChildren.map((child) => child.label ?? require_prismUtils.displayLanguage(child.language)));
+	const originalLabelCounts = children.reduce((map, child) => {
+		map.set(child.label, (map.get(child.label) ?? 0) + 1);
+		return map;
+	}, /* @__PURE__ */ new Map());
+	const usedLabels = /* @__PURE__ */ new Set();
+	return children.map((child) => {
+		let label = child.label;
+		while (usedLabels.has(label) || (originalLabelCounts.get(label) ?? 0) > 1) {
+			const increment = label.match(/ (\d+)$/)?.[1];
+			label = increment ? label.replace(/\d+$/, String(Number(increment) + 1)) : `${label} 1`;
+		}
+		usedLabels.add(label);
+		return label;
+	});
+};
+const createLabeller = (fallback, ...matchers) => (children) => {
+	if (children.some((child) => child.label)) return fallback(children);
+	const actualLanguages = JSON.stringify(children.map((child) => child.language));
+	for (const { languages, labels } of matchers) if (JSON.stringify(languages) === actualLanguages) return labels(children);
+	return fallback(children);
+};
+/**
+* Infer the operation type from a trimmed GraphQL operation definition.
+*/
+const inferGraphQLOperationType = ({ code }) => {
+	if (code.startsWith("mutation")) return "Mutation";
+	if (code.startsWith("subscription")) return "Subscription";
+	return "Query";
+};
+const labeller = createLabeller(determineUniqueLabels, {
+	languages: [
+		"graphql",
+		"json",
+		"json"
+	],
+	labels: ([child]) => [
+		inferGraphQLOperationType(child),
+		"Variables",
+		"Result"
+	]
+}, {
+	languages: ["graphql", "json"],
+	labels: ([child]) => [inferGraphQLOperationType(child), "Variables"]
+}, {
+	languages: ["http", "http"],
+	labels: () => ["Request", "Response"]
+});
+/**
+* Normalise code nodes with the following operations:
+*
+* - Trim code whitespace
+* - Map language to Prism value
+* - Infer label based on language(s)
+* - Ensure label uniqueness
+*/
+const normaliseChildren = (rawChildren, trim) => {
+	const children = rawChildren.map((child) => ({
+		code: trim ? child.code.trim() : child.code,
+		label: child.label,
+		language: require_prismUtils.prismLanguage(child.language)
+	}));
+	return withLabels(children, labeller(children));
+};
+//#endregion
+exports.normaliseChildren = normaliseChildren;

package/lib/components/CodeBlock/CodeChild.d.cts

@@ -0,0 +1,8 @@
+//#region src/components/CodeBlock/CodeChild.d.ts
+interface CodeChildProps {
+  code: string;
+  label?: string;
+  language?: string;
+}
+//#endregion
+export { CodeChildProps };

package/lib/components/CodeBlock/CodeChild.d.ts

@@ -0,0 +1,8 @@
+//#region src/components/CodeBlock/CodeChild.d.ts
+interface CodeChildProps {
+  code: string;
+  label?: string;
+  language?: string;
+}
+//#endregion
+export { CodeChildProps };

package/lib/components/CodeBlock/CodeChild.js

@@ -0,0 +1,82 @@
+import { displayLanguage, prismLanguage } from "../../private/prismUtils.js";
+//#region src/components/CodeBlock/CodeChild.tsx
+/**
+* Apply labels to the provided code nodes.
+*/
+const withLabels = (children, labels) => children.map((child, index) => ({
+	...child,
+	label: labels[index]
+}));
+/**
+* Determine a unique label for each code node.
+*
+* If an explicit label is not provided, the language field is used instead. On
+* conflicts, the label is suffixed with an incrementing integer starting at 1.
+*/
+const determineUniqueLabels = (rawChildren) => {
+	const children = withLabels(rawChildren, rawChildren.map((child) => child.label ?? displayLanguage(child.language)));
+	const originalLabelCounts = children.reduce((map, child) => {
+		map.set(child.label, (map.get(child.label) ?? 0) + 1);
+		return map;
+	}, /* @__PURE__ */ new Map());
+	const usedLabels = /* @__PURE__ */ new Set();
+	return children.map((child) => {
+		let label = child.label;
+		while (usedLabels.has(label) || (originalLabelCounts.get(label) ?? 0) > 1) {
+			const increment = label.match(/ (\d+)$/)?.[1];
+			label = increment ? label.replace(/\d+$/, String(Number(increment) + 1)) : `${label} 1`;
+		}
+		usedLabels.add(label);
+		return label;
+	});
+};
+const createLabeller = (fallback, ...matchers) => (children) => {
+	if (children.some((child) => child.label)) return fallback(children);
+	const actualLanguages = JSON.stringify(children.map((child) => child.language));
+	for (const { languages, labels } of matchers) if (JSON.stringify(languages) === actualLanguages) return labels(children);
+	return fallback(children);
+};
+/**
+* Infer the operation type from a trimmed GraphQL operation definition.
+*/
+const inferGraphQLOperationType = ({ code }) => {
+	if (code.startsWith("mutation")) return "Mutation";
+	if (code.startsWith("subscription")) return "Subscription";
+	return "Query";
+};
+const labeller = createLabeller(determineUniqueLabels, {
+	languages: [
+		"graphql",
+		"json",
+		"json"
+	],
+	labels: ([child]) => [
+		inferGraphQLOperationType(child),
+		"Variables",
+		"Result"
+	]
+}, {
+	languages: ["graphql", "json"],
+	labels: ([child]) => [inferGraphQLOperationType(child), "Variables"]
+}, {
+	languages: ["http", "http"],
+	labels: () => ["Request", "Response"]
+});
+/**
+* Normalise code nodes with the following operations:
+*
+* - Trim code whitespace
+* - Map language to Prism value
+* - Infer label based on language(s)
+* - Ensure label uniqueness
+*/
+const normaliseChildren = (rawChildren, trim) => {
+	const children = rawChildren.map((child) => ({
+		code: trim ? child.code.trim() : child.code,
+		label: child.label,
+		language: prismLanguage(child.language)
+	}));
+	return withLabels(children, labeller(children));
+};
+//#endregion
+export { normaliseChildren };

package/lib/components/CodeBlock/GraphQLPlaygroundAction.cjs

@@ -0,0 +1,22 @@
+require("../../_virtual/_rolldown/runtime.cjs");
+let braid_design_system = require("braid-design-system");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/CodeBlock/GraphQLPlaygroundAction.tsx
+const GraphQLPlaygroundAction = ({ query, variables, graphqlPlayground }) => {
+	const playgroundUrl = new URL(graphqlPlayground);
+	playgroundUrl.searchParams.set("query", query);
+	playgroundUrl.searchParams.set("variables", variables ?? "{}");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(braid_design_system.Text, {
+		size: "small",
+		weight: "medium",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(braid_design_system.TextLink, {
+			href: playgroundUrl.toString(),
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(braid_design_system.IconVideo, { alignY: "lowercase" }),
+			rel: "noreferrer",
+			target: "_blank",
+			children: "GraphQL Explorer"
+		})
+	});
+};
+//#endregion
+exports.GraphQLPlaygroundAction = GraphQLPlaygroundAction;

package/lib/components/CodeBlock/GraphQLPlaygroundAction.js

@@ -0,0 +1,21 @@
+import { IconVideo, Text, TextLink } from "braid-design-system";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/CodeBlock/GraphQLPlaygroundAction.tsx
+const GraphQLPlaygroundAction = ({ query, variables, graphqlPlayground }) => {
+	const playgroundUrl = new URL(graphqlPlayground);
+	playgroundUrl.searchParams.set("query", query);
+	playgroundUrl.searchParams.set("variables", variables ?? "{}");
+	return /* @__PURE__ */ jsx(Text, {
+		size: "small",
+		weight: "medium",
+		children: /* @__PURE__ */ jsx(TextLink, {
+			href: playgroundUrl.toString(),
+			icon: /* @__PURE__ */ jsx(IconVideo, { alignY: "lowercase" }),
+			rel: "noreferrer",
+			target: "_blank",
+			children: "GraphQL Explorer"
+		})
+	});
+};
+//#endregion
+export { GraphQLPlaygroundAction };

package/lib/components/CodeBlock.cjs

@@ -0,0 +1,84 @@
+require("../_virtual/_rolldown/runtime.cjs");
+const require_ScrollableInline = require("../private/ScrollableInline.cjs");
+const require_CodeChild = require("./CodeBlock/CodeChild.cjs");
+const require_GraphQLPlaygroundAction = require("./CodeBlock/GraphQLPlaygroundAction.cjs");
+const require_CodeContainer = require("./CodeContainer.cjs");
+const require_CopyableText = require("./CopyableText.cjs");
+let braid_design_system = require("braid-design-system");
+let react_jsx_runtime = require("react/jsx-runtime");
+let jsonc_parser = require("jsonc-parser");
+let react = require("react");
+//#region src/components/CodeBlock.tsx
+const CodeBlock = ({ children: rawChildren, graphqlPlayground, initialIndex = 0, label: rawLabel, language: rawLanguage, trim = true, lineNumbers = true }) => {
+	const children = require_CodeChild.normaliseChildren(typeof rawChildren === "string" ? [{
+		code: rawChildren,
+		label: rawLabel,
+		language: rawLanguage
+	}] : rawChildren, trim);
+	const [index, setIndex] = (0, react.useState)({
+		dirty: false,
+		value: initialIndex
+	});
+	(0, react.useEffect)(() => setIndex((i) => i.dirty ? i : {
+		...i,
+		value: initialIndex
+	}), [initialIndex]);
+	const child = children[index.value] ?? children[0];
+	const variableIndexBlock = [index.value, 1].find((idx) => children[idx]?.language?.startsWith("json") && children[idx]?.label?.startsWith("Variables"));
+	const jsoncVariables = children[0].language === "graphql" && variableIndexBlock !== void 0 ? children[variableIndexBlock].code : void 0;
+	const variables = jsoncVariables && JSON.stringify((0, jsonc_parser.parse)(jsoncVariables), null, 2);
+	const graphqlPlaygroundButton = children[0].language === "graphql" && graphqlPlayground ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(braid_design_system.Box, {
+		component: "span",
+		paddingLeft: "small",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GraphQLPlaygroundAction.GraphQLPlaygroundAction, {
+			graphqlPlayground,
+			query: children[0].code,
+			variables
+		})
+	}) : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(braid_design_system.Stack, {
+		space: "small",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollableInline.ScrollableInline, {
+			whiteSpace: "nowrap",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(braid_design_system.Box, {
+				display: "flex",
+				justifyContent: "spaceBetween",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(braid_design_system.Box, {
+					display: "flex",
+					children: children.map(({ label }, labelIndex) => label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(braid_design_system.Box, {
+						component: "span",
+						paddingLeft: labelIndex === 0 ? void 0 : "small",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(braid_design_system.Text, {
+							size: "small",
+							tone: index.value === labelIndex ? "secondary" : void 0,
+							weight: "medium",
+							children: children.length === 1 || index.value === labelIndex ? label : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(braid_design_system.TextLinkButton, {
+								onClick: () => setIndex({
+									dirty: true,
+									value: labelIndex
+								}),
+								children: label
+							})
+						})
+					}, label) : null)
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(braid_design_system.Box, {
+					display: "flex",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(braid_design_system.Box, {
+						component: "span",
+						paddingLeft: "small",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CopyableText.CopyableText, {
+							size: "small",
+							children: child.code
+						})
+					}), graphqlPlaygroundButton]
+				})]
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CodeContainer.CodeContainer, {
+			code: child.code,
+			language: child.language,
+			lineNumbers
+		})]
+	});
+};
+//#endregion
+exports.CodeBlock = CodeBlock;

package/lib/components/CodeBlock.d.cts

@@ -0,0 +1,24 @@
+import { CodeChildProps } from "./CodeBlock/CodeChild.cjs";
+import * as _$react from "react";
+
+//#region src/components/CodeBlock.d.ts
+interface Props {
+  children: readonly CodeChildProps[] | string;
+  graphqlPlayground?: string;
+  initialIndex?: number;
+  label?: string;
+  language?: string;
+  trim?: boolean;
+  lineNumbers?: boolean;
+}
+declare const CodeBlock: ({
+  children: rawChildren,
+  graphqlPlayground,
+  initialIndex,
+  label: rawLabel,
+  language: rawLanguage,
+  trim,
+  lineNumbers
+}: Props) => _$react.JSX.Element;
+//#endregion
+export { CodeBlock };

package/lib/components/CodeBlock.d.ts

@@ -0,0 +1,24 @@
+import { CodeChildProps } from "./CodeBlock/CodeChild.js";
+import * as _$react from "react";
+
+//#region src/components/CodeBlock.d.ts
+interface Props {
+  children: readonly CodeChildProps[] | string;
+  graphqlPlayground?: string;
+  initialIndex?: number;
+  label?: string;
+  language?: string;
+  trim?: boolean;
+  lineNumbers?: boolean;
+}
+declare const CodeBlock: ({
+  children: rawChildren,
+  graphqlPlayground,
+  initialIndex,
+  label: rawLabel,
+  language: rawLanguage,
+  trim,
+  lineNumbers
+}: Props) => _$react.JSX.Element;
+//#endregion
+export { CodeBlock };

package/lib/components/CodeBlock.js

@@ -0,0 +1,83 @@
+import { ScrollableInline } from "../private/ScrollableInline.js";
+import { normaliseChildren } from "./CodeBlock/CodeChild.js";
+import { GraphQLPlaygroundAction } from "./CodeBlock/GraphQLPlaygroundAction.js";
+import { CodeContainer } from "./CodeContainer.js";
+import { CopyableText } from "./CopyableText.js";
+import { Box, Stack, Text, TextLinkButton } from "braid-design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { parse } from "jsonc-parser";
+import { useEffect, useState } from "react";
+//#region src/components/CodeBlock.tsx
+const CodeBlock = ({ children: rawChildren, graphqlPlayground, initialIndex = 0, label: rawLabel, language: rawLanguage, trim = true, lineNumbers = true }) => {
+	const children = normaliseChildren(typeof rawChildren === "string" ? [{
+		code: rawChildren,
+		label: rawLabel,
+		language: rawLanguage
+	}] : rawChildren, trim);
+	const [index, setIndex] = useState({
+		dirty: false,
+		value: initialIndex
+	});
+	useEffect(() => setIndex((i) => i.dirty ? i : {
+		...i,
+		value: initialIndex
+	}), [initialIndex]);
+	const child = children[index.value] ?? children[0];
+	const variableIndexBlock = [index.value, 1].find((idx) => children[idx]?.language?.startsWith("json") && children[idx]?.label?.startsWith("Variables"));
+	const jsoncVariables = children[0].language === "graphql" && variableIndexBlock !== void 0 ? children[variableIndexBlock].code : void 0;
+	const variables = jsoncVariables && JSON.stringify(parse(jsoncVariables), null, 2);
+	const graphqlPlaygroundButton = children[0].language === "graphql" && graphqlPlayground ? /* @__PURE__ */ jsx(Box, {
+		component: "span",
+		paddingLeft: "small",
+		children: /* @__PURE__ */ jsx(GraphQLPlaygroundAction, {
+			graphqlPlayground,
+			query: children[0].code,
+			variables
+		})
+	}) : void 0;
+	return /* @__PURE__ */ jsxs(Stack, {
+		space: "small",
+		children: [/* @__PURE__ */ jsx(ScrollableInline, {
+			whiteSpace: "nowrap",
+			children: /* @__PURE__ */ jsxs(Box, {
+				display: "flex",
+				justifyContent: "spaceBetween",
+				children: [/* @__PURE__ */ jsx(Box, {
+					display: "flex",
+					children: children.map(({ label }, labelIndex) => label ? /* @__PURE__ */ jsx(Box, {
+						component: "span",
+						paddingLeft: labelIndex === 0 ? void 0 : "small",
+						children: /* @__PURE__ */ jsx(Text, {
+							size: "small",
+							tone: index.value === labelIndex ? "secondary" : void 0,
+							weight: "medium",
+							children: children.length === 1 || index.value === labelIndex ? label : /* @__PURE__ */ jsx(TextLinkButton, {
+								onClick: () => setIndex({
+									dirty: true,
+									value: labelIndex
+								}),
+								children: label
+							})
+						})
+					}, label) : null)
+				}), /* @__PURE__ */ jsxs(Box, {
+					display: "flex",
+					children: [/* @__PURE__ */ jsx(Box, {
+						component: "span",
+						paddingLeft: "small",
+						children: /* @__PURE__ */ jsx(CopyableText, {
+							size: "small",
+							children: child.code
+						})
+					}), graphqlPlaygroundButton]
+				})]
+			})
+		}), /* @__PURE__ */ jsx(CodeContainer, {
+			code: child.code,
+			language: child.language,
+			lineNumbers
+		})]
+	});
+};
+//#endregion
+export { CodeBlock };