@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/cms/blocks.js

@@ -0,0 +1,400 @@
+import { useOptionalRegistry } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { useCms } from "./context.js";
+import { CmsBlockHeading, CmsImage, CmsLinkButton } from "./parts.js";
+import { CMS_FORM_KEY, cmsAspectClass, cmsBlockKey, cmsBlocks, cmsColumnsClass, cmsGridClass, cmsWidthClass } from "@alfakit/core";
+import { createContext, createElement, useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, QuoteIcon } from "lucide-react";
+//#region src/components/cms/blocks.tsx
+const SECTION = "px-4 py-12 sm:px-6 sm:py-16 lg:px-8";
+/** Block renderers given to an outer `<CmsBlocks components>`, for the blocks inside columns. */
+const ComponentsContext = createContext({});
+/** Blocks inside a columns block: the column already has the page padding. */
+const NestedContext = createContext(false);
+/** The outer padding of a block, none when it is nested in a column. */
+function useSection(extra) {
+	return useContext(NestedContext) ? "py-3" : cn(SECTION, extra);
+}
+function HeroBlock({ data }) {
+	const sectionClass = useSection("sm:py-20 lg:py-24");
+	const centered = data.alignment === "center" && !data.image;
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "cms-hero",
+		className: sectionClass,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("mx-auto grid max-w-6xl items-center gap-10", data.image && "lg:grid-cols-2", centered && "text-center"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cn("flex flex-col gap-5", centered && "items-center"),
+				children: [
+					data.eyebrow && /* @__PURE__ */ jsx("p", {
+						className: "text-primary text-sm font-semibold tracking-wide uppercase",
+						children: data.eyebrow
+					}),
+					/* @__PURE__ */ jsx("h1", {
+						className: "text-4xl font-bold tracking-tight text-balance sm:text-5xl",
+						children: data.heading
+					}),
+					data.subheading && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground max-w-2xl text-lg text-pretty sm:text-xl",
+						children: data.subheading
+					}),
+					(data.primaryAction || data.secondaryAction) && /* @__PURE__ */ jsxs("div", {
+						className: cn("flex flex-wrap gap-3 pt-2", centered && "justify-center"),
+						children: [/* @__PURE__ */ jsx(CmsLinkButton, { link: data.primaryAction }), /* @__PURE__ */ jsx(CmsLinkButton, {
+							link: data.secondaryAction,
+							variant: "outline"
+						})]
+					})
+				]
+			}), data.image && /* @__PURE__ */ jsx(CmsImage, {
+				image: data.image,
+				eager: true,
+				className: "w-full rounded-2xl object-cover shadow-sm",
+				sizes: "(min-width: 1024px) 50vw, 100vw"
+			})]
+		})
+	});
+}
+function RichTextBlock({ data }) {
+	const sectionClass = useSection("py-8 sm:py-10");
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "cms-rich-text",
+		className: sectionClass,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("alfakit-prose", cmsWidthClass(data.width)),
+			dangerouslySetInnerHTML: { __html: data.html }
+		})
+	});
+}
+function ImageBlock({ data }) {
+	const nested = useContext(NestedContext);
+	const sectionClass = useSection("py-8 sm:py-10");
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "cms-image-block",
+		className: data.width === "full" && !nested ? "py-8" : sectionClass,
+		children: /* @__PURE__ */ jsxs("figure", {
+			className: cn(cmsWidthClass(data.width), "flex flex-col gap-3"),
+			children: [/* @__PURE__ */ jsx(CmsImage, {
+				image: data.image,
+				className: cn("w-full object-cover", data.width !== "full" && "rounded-xl")
+			}), data.caption && /* @__PURE__ */ jsx("figcaption", {
+				className: "text-muted-foreground text-center text-sm",
+				children: data.caption
+			})]
+		})
+	});
+}
+function GalleryBlock({ data }) {
+	const sectionClass = useSection();
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "cms-gallery",
+		className: sectionClass,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto max-w-6xl",
+			children: [/* @__PURE__ */ jsx(CmsBlockHeading, { heading: data.heading }), /* @__PURE__ */ jsx("ul", {
+				className: cmsGridClass(data.columns),
+				role: "list",
+				children: data.images.map((image, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("figure", {
+					className: "flex flex-col gap-2",
+					children: [/* @__PURE__ */ jsx(CmsImage, {
+						image,
+						className: "aspect-[4/3] w-full rounded-xl object-cover"
+					}), image.caption && /* @__PURE__ */ jsx("figcaption", {
+						className: "text-muted-foreground text-sm",
+						children: image.caption
+					})]
+				}) }, `${image.url}-${index}`))
+			})]
+		})
+	});
+}
+function CallToActionBlock({ data }) {
+	const sectionClass = useSection();
+	const primary = data.tone === "primary";
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "cms-call-to-action",
+		className: sectionClass,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("mx-auto flex max-w-5xl flex-col items-center gap-5 rounded-2xl px-6 py-12 text-center sm:px-12", primary && "bg-primary text-primary-foreground", data.tone === "muted" && "bg-muted", data.tone === "default" && "border"),
+			children: [
+				/* @__PURE__ */ jsx("h2", {
+					className: "text-3xl font-semibold tracking-tight text-balance",
+					children: data.heading
+				}),
+				data.body && /* @__PURE__ */ jsx("p", {
+					className: cn("max-w-2xl text-lg text-pretty", primary ? "text-primary-foreground/85" : "text-muted-foreground"),
+					children: data.body
+				}),
+				(data.primaryAction || data.secondaryAction) && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap justify-center gap-3 pt-2",
+					children: [/* @__PURE__ */ jsx(CmsLinkButton, {
+						link: data.primaryAction,
+						variant: primary ? "secondary" : "default"
+					}), /* @__PURE__ */ jsx(CmsLinkButton, {
+						link: data.secondaryAction,
+						variant: "outline",
+						className: primary ? "text-primary-foreground border-primary-foreground/40 hover:bg-primary-foreground/10 bg-transparent" : void 0
+					})]
+				})
+			]
+		})
+	});
+}
+function FeaturesBlock({ data }) {
+	const sectionClass = useSection();
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "cms-features",
+		className: sectionClass,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto max-w-6xl",
+			children: [/* @__PURE__ */ jsx(CmsBlockHeading, {
+				heading: data.heading,
+				intro: data.intro
+			}), /* @__PURE__ */ jsx("ul", {
+				className: cmsGridClass(data.columns),
+				role: "list",
+				children: data.items.map((item, index) => {
+					const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						item.icon && /* @__PURE__ */ jsx("span", {
+							className: "bg-primary/10 text-primary inline-flex size-10 items-center justify-center rounded-lg",
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: item.icon,
+								className: "size-5",
+								"aria-hidden": "true"
+							})
+						}),
+						/* @__PURE__ */ jsx("h3", {
+							className: "text-lg font-semibold",
+							children: item.title
+						}),
+						item.description && /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-pretty",
+							children: item.description
+						})
+					] });
+					return /* @__PURE__ */ jsx("li", {
+						className: "bg-card flex flex-col gap-3 rounded-xl border p-6",
+						children: item.url ? /* @__PURE__ */ jsx("a", {
+							href: item.url,
+							className: "focus-visible:ring-ring/50 flex flex-col gap-3 rounded-md outline-none focus-visible:ring-[3px]",
+							children: content
+						}) : content
+					}, `${item.title}-${index}`);
+				})
+			})]
+		})
+	});
+}
+function FaqBlock({ block, data }) {
+	const sectionClass = useSection();
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "cms-faq",
+		className: sectionClass,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto max-w-3xl",
+			children: [/* @__PURE__ */ jsx(CmsBlockHeading, { heading: data.heading }), /* @__PURE__ */ jsx("div", {
+				className: "divide-y rounded-xl border",
+				children: data.items.map((item, index) => /* @__PURE__ */ jsxs("details", {
+					className: "group px-5",
+					"data-slot": "cms-faq-item",
+					children: [/* @__PURE__ */ jsxs("summary", {
+						className: "focus-visible:ring-ring/50 flex cursor-pointer list-none items-center justify-between gap-4 rounded-md py-4 text-start font-medium outline-none focus-visible:ring-[3px] [&::-webkit-details-marker]:hidden",
+						children: [item.question, /* @__PURE__ */ jsx(ChevronDownIcon, {
+							className: "text-muted-foreground size-4 shrink-0 transition-transform group-open:rotate-180",
+							"aria-hidden": "true"
+						})]
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground pb-5 whitespace-pre-line",
+						children: item.answer
+					})]
+				}, `${block.id}-${index}`))
+			})]
+		})
+	});
+}
+function TestimonialsBlock({ data }) {
+	const sectionClass = useSection();
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "cms-testimonials",
+		className: sectionClass,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto max-w-6xl",
+			children: [/* @__PURE__ */ jsx(CmsBlockHeading, { heading: data.heading }), /* @__PURE__ */ jsx("ul", {
+				className: cmsGridClass(Math.min(3, data.items.length)),
+				role: "list",
+				children: data.items.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("figure", {
+					className: "bg-card flex h-full flex-col gap-5 rounded-xl border p-6",
+					children: [
+						/* @__PURE__ */ jsx(QuoteIcon, {
+							className: "text-primary/60 size-6 rtl:-scale-x-100",
+							"aria-hidden": "true"
+						}),
+						/* @__PURE__ */ jsx("blockquote", {
+							className: "flex-1 text-pretty",
+							children: /* @__PURE__ */ jsx("p", { children: item.quote })
+						}),
+						/* @__PURE__ */ jsxs("figcaption", {
+							className: "flex items-center gap-3",
+							children: [item.avatar && /* @__PURE__ */ jsx(CmsImage, {
+								image: {
+									...item.avatar,
+									alt: ""
+								},
+								className: "size-10 rounded-full object-cover"
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "flex flex-col",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "font-medium",
+									children: item.author
+								}), item.role && /* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground text-sm",
+									children: item.role
+								})]
+							})]
+						})
+					]
+				}) }, `${item.author}-${index}`))
+			})]
+		})
+	});
+}
+function EmbedBlock({ data }) {
+	const sectionClass = useSection("py-8 sm:py-10");
+	const { embed } = data;
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "cms-embed",
+		className: sectionClass,
+		children: /* @__PURE__ */ jsxs("figure", {
+			className: "mx-auto flex max-w-4xl flex-col gap-3",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cn("bg-muted overflow-hidden rounded-xl", cmsAspectClass(data.aspectRatio)),
+				children: embed.provider === "video" ? /* @__PURE__ */ jsx("video", {
+					src: embed.src,
+					controls: true,
+					preload: "metadata",
+					className: "size-full",
+					title: embed.title
+				}) : /* @__PURE__ */ jsx("iframe", {
+					src: embed.src,
+					title: embed.title,
+					loading: "lazy",
+					className: "size-full border-0",
+					allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen",
+					allowFullScreen: true,
+					referrerPolicy: "strict-origin-when-cross-origin",
+					sandbox: embed.provider === "iframe" ? "allow-scripts allow-same-origin allow-popups allow-forms" : void 0
+				})
+			}), data.caption && /* @__PURE__ */ jsx("figcaption", {
+				className: "text-muted-foreground text-center text-sm",
+				children: data.caption
+			})]
+		})
+	});
+}
+function ColumnsBlock({ data }) {
+	const sectionClass = useSection("py-8 sm:py-10");
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "cms-columns",
+		className: sectionClass,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("mx-auto max-w-6xl", cmsColumnsClass(data.columns.length), data.align === "center" && "items-center"),
+			children: data.columns.map((column, index) => /* @__PURE__ */ jsx("div", {
+				className: "min-w-0",
+				"data-slot": "cms-column",
+				children: /* @__PURE__ */ jsx(NestedContext.Provider, {
+					value: true,
+					children: /* @__PURE__ */ jsx(CmsBlocks, { blocks: column.blocks })
+				})
+			}, index))
+		})
+	});
+}
+function FormBlock$1({ block, data }) {
+	const sectionClass = useSection();
+	const registry = useOptionalRegistry();
+	const { components, preview, t } = useCms();
+	const Form = components[CMS_FORM_KEY] ?? registry?.resolve(CMS_FORM_KEY);
+	if (!Form) return preview ? /* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground mx-auto max-w-3xl px-4 py-6 text-center text-sm",
+		role: "status",
+		children: t("cms.form_unavailable", {}, "This form isn't available.")
+	}) : null;
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "cms-form",
+		className: sectionClass,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto max-w-2xl",
+			children: [/* @__PURE__ */ jsx(CmsBlockHeading, {
+				heading: data.heading,
+				intro: data.description
+			}), createElement(Form, {
+				form: data.payload,
+				formKey: data.form,
+				block
+			})]
+		})
+	});
+}
+/** A reusable section: its blocks, at full page width. */
+function SectionBlock({ data }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "cms-section",
+		"data-section": data.name,
+		children: /* @__PURE__ */ jsx(CmsBlocks, { blocks: data.blocks })
+	});
+}
+/** The built-in block renderers, by type. */
+const CMS_BLOCK_COMPONENTS = {
+	hero: HeroBlock,
+	"rich-text": RichTextBlock,
+	image: ImageBlock,
+	gallery: GalleryBlock,
+	"call-to-action": CallToActionBlock,
+	features: FeaturesBlock,
+	faq: FaqBlock,
+	testimonials: TestimonialsBlock,
+	embed: EmbedBlock,
+	columns: ColumnsBlock,
+	form: FormBlock$1,
+	section: SectionBlock
+};
+/**
+* Renders rendered CMS blocks (`page.blocks`, `Cms::blocks()`, the JSON API). Each type
+* resolves, in order, to `components[type]`, the registry's `cms:block:{type}` and the
+* built-in renderer; unknown types render nothing.
+*
+* ```tsx
+* <CmsBlocks blocks={cms.page.blocks} components={{ pricing: PricingBlock }} />
+* ```
+*/
+function CmsBlocks({ blocks, components }) {
+	const registry = useOptionalRegistry();
+	const cms = useCms();
+	const outer = useContext(ComponentsContext);
+	const merged = components ? {
+		...outer,
+		...components
+	} : outer;
+	return /* @__PURE__ */ jsx(ComponentsContext.Provider, {
+		value: merged,
+		children: cmsBlocks(blocks).map((block) => {
+			const Component = merged[block.type] ?? cms.components[block.type] ?? registry?.resolve(cmsBlockKey(block.type)) ?? CMS_BLOCK_COMPONENTS[block.type];
+			if (!Component) return null;
+			return /* @__PURE__ */ jsx("div", {
+				id: block.id,
+				"data-slot": "cms-block",
+				"data-cms-block": block.type,
+				children: /* @__PURE__ */ jsx(Component, {
+					block,
+					data: block.data
+				})
+			}, block.id);
+		})
+	});
+}
+//#endregion
+export { CMS_BLOCK_COMPONENTS, CallToActionBlock, CmsBlocks, ColumnsBlock, EmbedBlock, FaqBlock, FeaturesBlock, FormBlock$1 as FormBlock, GalleryBlock, HeroBlock, ImageBlock, RichTextBlock, SectionBlock, TestimonialsBlock };
+
+//# sourceMappingURL=blocks.js.map

package/dist/components/cms/blocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blocks.js","names":["FormBlock"],"sources":["../../../src/components/cms/blocks.tsx"],"sourcesContent":["import {\n  CMS_FORM_KEY,\n  cmsAspectClass,\n  cmsBlockKey,\n  cmsBlocks,\n  cmsColumnsClass,\n  cmsGridClass,\n  cmsWidthClass,\n  type CmsBlockSchema,\n  type CmsBuiltInBlocks,\n  type CmsCallToActionBlockData,\n  type CmsColumnsBlockData,\n  type CmsEmbedBlockData,\n  type CmsFaqBlockData,\n  type CmsFeaturesBlockData,\n  type CmsFormBlockData,\n  type CmsGalleryBlockData,\n  type CmsHeroBlockData,\n  type CmsImageBlockData,\n  type CmsRichTextBlockData,\n  type CmsSectionBlockData,\n  type CmsTestimonialsBlockData,\n} from '@alfakit/core'\nimport { ChevronDownIcon, QuoteIcon } from 'lucide-react'\nimport { createContext, createElement, useContext, type ComponentType } from 'react'\nimport { useOptionalRegistry, type AnyComponent } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useCms } from './context'\nimport { CmsBlockHeading, CmsImage, CmsLinkButton } from './parts'\n\n/** Props of every block renderer, built-in or registered as `cms:block:{type}`. */\nexport interface CmsBlockProps<TData = Record<string, unknown>> {\n  block: CmsBlockSchema<TData>\n  data: TData\n}\n\ntype BlockComponent<K extends keyof CmsBuiltInBlocks> = ComponentType<\n  CmsBlockProps<CmsBuiltInBlocks[K]>\n>\n\nconst SECTION = 'px-4 py-12 sm:px-6 sm:py-16 lg:px-8'\n\n/** Block renderers given to an outer `<CmsBlocks components>`, for the blocks inside columns. */\nconst ComponentsContext = createContext<Record<string, AnyComponent>>({})\n\n/** Blocks inside a columns block: the column already has the page padding. */\nconst NestedContext = createContext(false)\n\n/** The outer padding of a block, none when it is nested in a column. */\nfunction useSection(extra?: string): string {\n  return useContext(NestedContext) ? 'py-3' : cn(SECTION, extra)\n}\n\nexport function HeroBlock({ data }: CmsBlockProps<CmsHeroBlockData>) {\n  const sectionClass = useSection('sm:py-20 lg:py-24')\n  const centered = data.alignment === 'center' && !data.image\n\n  return (\n    <section data-slot=\"cms-hero\" className={sectionClass}>\n      <div\n        className={cn(\n          'mx-auto grid max-w-6xl items-center gap-10',\n          data.image && 'lg:grid-cols-2',\n          centered && 'text-center',\n        )}\n      >\n        <div className={cn('flex flex-col gap-5', centered && 'items-center')}>\n          {data.eyebrow && (\n            <p className=\"text-primary text-sm font-semibold tracking-wide uppercase\">\n              {data.eyebrow}\n            </p>\n          )}\n          <h1 className=\"text-4xl font-bold tracking-tight text-balance sm:text-5xl\">\n            {data.heading}\n          </h1>\n          {data.subheading && (\n            <p className=\"text-muted-foreground max-w-2xl text-lg text-pretty sm:text-xl\">\n              {data.subheading}\n            </p>\n          )}\n          {(data.primaryAction || data.secondaryAction) && (\n            <div className={cn('flex flex-wrap gap-3 pt-2', centered && 'justify-center')}>\n              <CmsLinkButton link={data.primaryAction} />\n              <CmsLinkButton link={data.secondaryAction} variant=\"outline\" />\n            </div>\n          )}\n        </div>\n        {data.image && (\n          <CmsImage\n            image={data.image}\n            eager\n            className=\"w-full rounded-2xl object-cover shadow-sm\"\n            sizes=\"(min-width: 1024px) 50vw, 100vw\"\n          />\n        )}\n      </div>\n    </section>\n  )\n}\n\nexport function RichTextBlock({ data }: CmsBlockProps<CmsRichTextBlockData>) {\n  const sectionClass = useSection('py-8 sm:py-10')\n  return (\n    <section data-slot=\"cms-rich-text\" className={sectionClass}>\n      <div\n        className={cn('alfakit-prose', cmsWidthClass(data.width))}\n        // Sanitised on the server (`Html::sanitize()`); never raw editor input.\n        dangerouslySetInnerHTML={{ __html: data.html }}\n      />\n    </section>\n  )\n}\n\nexport function ImageBlock({ data }: CmsBlockProps<CmsImageBlockData>) {\n  const nested = useContext(NestedContext)\n  const sectionClass = useSection('py-8 sm:py-10')\n  return (\n    <section\n      data-slot=\"cms-image-block\"\n      className={data.width === 'full' && !nested ? 'py-8' : sectionClass}\n    >\n      <figure className={cn(cmsWidthClass(data.width), 'flex flex-col gap-3')}>\n        <CmsImage\n          image={data.image}\n          className={cn('w-full object-cover', data.width !== 'full' && 'rounded-xl')}\n        />\n        {data.caption && (\n          <figcaption className=\"text-muted-foreground text-center text-sm\">\n            {data.caption}\n          </figcaption>\n        )}\n      </figure>\n    </section>\n  )\n}\n\nexport function GalleryBlock({ data }: CmsBlockProps<CmsGalleryBlockData>) {\n  const sectionClass = useSection()\n  return (\n    <section data-slot=\"cms-gallery\" className={sectionClass}>\n      <div className=\"mx-auto max-w-6xl\">\n        <CmsBlockHeading heading={data.heading} />\n        <ul className={cmsGridClass(data.columns)} role=\"list\">\n          {data.images.map((image, index) => (\n            <li key={`${image.url}-${index}`}>\n              <figure className=\"flex flex-col gap-2\">\n                <CmsImage image={image} className=\"aspect-[4/3] w-full rounded-xl object-cover\" />\n                {image.caption && (\n                  <figcaption className=\"text-muted-foreground text-sm\">{image.caption}</figcaption>\n                )}\n              </figure>\n            </li>\n          ))}\n        </ul>\n      </div>\n    </section>\n  )\n}\n\nexport function CallToActionBlock({ data }: CmsBlockProps<CmsCallToActionBlockData>) {\n  const sectionClass = useSection()\n  const primary = data.tone === 'primary'\n\n  return (\n    <section data-slot=\"cms-call-to-action\" className={sectionClass}>\n      <div\n        className={cn(\n          'mx-auto flex max-w-5xl flex-col items-center gap-5 rounded-2xl px-6 py-12 text-center sm:px-12',\n          primary && 'bg-primary text-primary-foreground',\n          data.tone === 'muted' && 'bg-muted',\n          data.tone === 'default' && 'border',\n        )}\n      >\n        <h2 className=\"text-3xl font-semibold tracking-tight text-balance\">{data.heading}</h2>\n        {data.body && (\n          <p\n            className={cn(\n              'max-w-2xl text-lg text-pretty',\n              primary ? 'text-primary-foreground/85' : 'text-muted-foreground',\n            )}\n          >\n            {data.body}\n          </p>\n        )}\n        {(data.primaryAction || data.secondaryAction) && (\n          <div className=\"flex flex-wrap justify-center gap-3 pt-2\">\n            <CmsLinkButton link={data.primaryAction} variant={primary ? 'secondary' : 'default'} />\n            <CmsLinkButton\n              link={data.secondaryAction}\n              variant=\"outline\"\n              className={\n                primary\n                  ? 'text-primary-foreground border-primary-foreground/40 hover:bg-primary-foreground/10 bg-transparent'\n                  : undefined\n              }\n            />\n          </div>\n        )}\n      </div>\n    </section>\n  )\n}\n\nexport function FeaturesBlock({ data }: CmsBlockProps<CmsFeaturesBlockData>) {\n  const sectionClass = useSection()\n  return (\n    <section data-slot=\"cms-features\" className={sectionClass}>\n      <div className=\"mx-auto max-w-6xl\">\n        <CmsBlockHeading heading={data.heading} intro={data.intro} />\n        <ul className={cmsGridClass(data.columns)} role=\"list\">\n          {data.items.map((item, index) => {\n            const content = (\n              <>\n                {item.icon && (\n                  <span className=\"bg-primary/10 text-primary inline-flex size-10 items-center justify-center rounded-lg\">\n                    <Icon name={item.icon} className=\"size-5\" aria-hidden=\"true\" />\n                  </span>\n                )}\n                <h3 className=\"text-lg font-semibold\">{item.title}</h3>\n                {item.description && (\n                  <p className=\"text-muted-foreground text-pretty\">{item.description}</p>\n                )}\n              </>\n            )\n\n            return (\n              <li\n                key={`${item.title}-${index}`}\n                className=\"bg-card flex flex-col gap-3 rounded-xl border p-6\"\n              >\n                {item.url ? (\n                  <a\n                    href={item.url}\n                    className=\"focus-visible:ring-ring/50 flex flex-col gap-3 rounded-md outline-none focus-visible:ring-[3px]\"\n                  >\n                    {content}\n                  </a>\n                ) : (\n                  content\n                )}\n              </li>\n            )\n          })}\n        </ul>\n      </div>\n    </section>\n  )\n}\n\nexport function FaqBlock({ block, data }: CmsBlockProps<CmsFaqBlockData>) {\n  const sectionClass = useSection()\n  return (\n    <section data-slot=\"cms-faq\" className={sectionClass}>\n      <div className=\"mx-auto max-w-3xl\">\n        <CmsBlockHeading heading={data.heading} />\n        <div className=\"divide-y rounded-xl border\">\n          {data.items.map((item, index) => (\n            <details key={`${block.id}-${index}`} className=\"group px-5\" data-slot=\"cms-faq-item\">\n              <summary className=\"focus-visible:ring-ring/50 flex cursor-pointer list-none items-center justify-between gap-4 rounded-md py-4 text-start font-medium outline-none focus-visible:ring-[3px] [&::-webkit-details-marker]:hidden\">\n                {item.question}\n                <ChevronDownIcon\n                  className=\"text-muted-foreground size-4 shrink-0 transition-transform group-open:rotate-180\"\n                  aria-hidden=\"true\"\n                />\n              </summary>\n              <p className=\"text-muted-foreground pb-5 whitespace-pre-line\">{item.answer}</p>\n            </details>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport function TestimonialsBlock({ data }: CmsBlockProps<CmsTestimonialsBlockData>) {\n  const sectionClass = useSection()\n  return (\n    <section data-slot=\"cms-testimonials\" className={sectionClass}>\n      <div className=\"mx-auto max-w-6xl\">\n        <CmsBlockHeading heading={data.heading} />\n        <ul className={cmsGridClass(Math.min(3, data.items.length))} role=\"list\">\n          {data.items.map((item, index) => (\n            <li key={`${item.author}-${index}`}>\n              <figure className=\"bg-card flex h-full flex-col gap-5 rounded-xl border p-6\">\n                <QuoteIcon className=\"text-primary/60 size-6 rtl:-scale-x-100\" aria-hidden=\"true\" />\n                <blockquote className=\"flex-1 text-pretty\">\n                  <p>{item.quote}</p>\n                </blockquote>\n                <figcaption className=\"flex items-center gap-3\">\n                  {item.avatar && (\n                    <CmsImage\n                      image={{ ...item.avatar, alt: '' }}\n                      className=\"size-10 rounded-full object-cover\"\n                    />\n                  )}\n                  <span className=\"flex flex-col\">\n                    <span className=\"font-medium\">{item.author}</span>\n                    {item.role && (\n                      <span className=\"text-muted-foreground text-sm\">{item.role}</span>\n                    )}\n                  </span>\n                </figcaption>\n              </figure>\n            </li>\n          ))}\n        </ul>\n      </div>\n    </section>\n  )\n}\n\nexport function EmbedBlock({ data }: CmsBlockProps<CmsEmbedBlockData>) {\n  const sectionClass = useSection('py-8 sm:py-10')\n  const { embed } = data\n\n  return (\n    <section data-slot=\"cms-embed\" className={sectionClass}>\n      <figure className=\"mx-auto flex max-w-4xl flex-col gap-3\">\n        <div\n          className={cn('bg-muted overflow-hidden rounded-xl', cmsAspectClass(data.aspectRatio))}\n        >\n          {embed.provider === 'video' ? (\n            <video\n              src={embed.src}\n              controls\n              preload=\"metadata\"\n              className=\"size-full\"\n              title={embed.title}\n            />\n          ) : (\n            <iframe\n              src={embed.src}\n              title={embed.title}\n              loading=\"lazy\"\n              className=\"size-full border-0\"\n              allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen\"\n              allowFullScreen\n              referrerPolicy=\"strict-origin-when-cross-origin\"\n              sandbox={\n                embed.provider === 'iframe'\n                  ? 'allow-scripts allow-same-origin allow-popups allow-forms'\n                  : undefined\n              }\n            />\n          )}\n        </div>\n        {data.caption && (\n          <figcaption className=\"text-muted-foreground text-center text-sm\">\n            {data.caption}\n          </figcaption>\n        )}\n      </figure>\n    </section>\n  )\n}\n\nexport function ColumnsBlock({ data }: CmsBlockProps<CmsColumnsBlockData>) {\n  const sectionClass = useSection('py-8 sm:py-10')\n  return (\n    <section data-slot=\"cms-columns\" className={sectionClass}>\n      <div\n        className={cn(\n          'mx-auto max-w-6xl',\n          cmsColumnsClass(data.columns.length),\n          data.align === 'center' && 'items-center',\n        )}\n      >\n        {data.columns.map((column, index) => (\n          <div key={index} className=\"min-w-0\" data-slot=\"cms-column\">\n            <NestedContext.Provider value={true}>\n              <CmsBlocks blocks={column.blocks} />\n            </NestedContext.Provider>\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport function FormBlock({ block, data }: CmsBlockProps<CmsFormBlockData>) {\n  const sectionClass = useSection()\n  const registry = useOptionalRegistry()\n  const { components, preview, t } = useCms()\n  const Form = components[CMS_FORM_KEY] ?? registry?.resolve(CMS_FORM_KEY)\n\n  if (!Form) {\n    // Nothing renders the form: visitors see nothing, editors see why in previews.\n    return preview ? (\n      <p\n        className=\"text-muted-foreground mx-auto max-w-3xl px-4 py-6 text-center text-sm\"\n        role=\"status\"\n      >\n        {t('cms.form_unavailable', {}, \"This form isn't available.\")}\n      </p>\n    ) : null\n  }\n\n  return (\n    <section data-slot=\"cms-form\" className={sectionClass}>\n      <div className=\"mx-auto max-w-2xl\">\n        <CmsBlockHeading heading={data.heading} intro={data.description} />\n        {createElement(Form, { form: data.payload, formKey: data.form, block })}\n      </div>\n    </section>\n  )\n}\n\n/** A reusable section: its blocks, at full page width. */\nexport function SectionBlock({ data }: CmsBlockProps<CmsSectionBlockData>) {\n  return (\n    <div data-slot=\"cms-section\" data-section={data.name}>\n      <CmsBlocks blocks={data.blocks} />\n    </div>\n  )\n}\n\n/** The built-in block renderers, by type. */\nexport const CMS_BLOCK_COMPONENTS: { [K in keyof CmsBuiltInBlocks]: BlockComponent<K> } = {\n  hero: HeroBlock,\n  'rich-text': RichTextBlock,\n  image: ImageBlock,\n  gallery: GalleryBlock,\n  'call-to-action': CallToActionBlock,\n  features: FeaturesBlock,\n  faq: FaqBlock,\n  testimonials: TestimonialsBlock,\n  embed: EmbedBlock,\n  columns: ColumnsBlock,\n  form: FormBlock,\n  section: SectionBlock,\n}\n\n/**\n * Renders rendered CMS blocks (`page.blocks`, `Cms::blocks()`, the JSON API). Each type\n * resolves, in order, to `components[type]`, the registry's `cms:block:{type}` and the\n * built-in renderer; unknown types render nothing.\n *\n * ```tsx\n * <CmsBlocks blocks={cms.page.blocks} components={{ pricing: PricingBlock }} />\n * ```\n */\nexport function CmsBlocks({\n  blocks,\n  components,\n}: {\n  blocks: CmsBlockSchema[] | null | undefined\n  components?: Record<string, AnyComponent>\n}) {\n  const registry = useOptionalRegistry()\n  const cms = useCms()\n  const outer = useContext(ComponentsContext)\n  const merged = components ? { ...outer, ...components } : outer\n\n  return (\n    <ComponentsContext.Provider value={merged}>\n      {cmsBlocks(blocks).map((block) => {\n        const Component: AnyComponent | undefined =\n          merged[block.type] ??\n          cms.components[block.type] ??\n          registry?.resolve(cmsBlockKey(block.type)) ??\n          (CMS_BLOCK_COMPONENTS as Record<string, AnyComponent>)[block.type]\n\n        if (!Component) return null\n\n        return (\n          <div key={block.id} id={block.id} data-slot=\"cms-block\" data-cms-block={block.type}>\n            <Component block={block} data={block.data} />\n          </div>\n        )\n      })}\n    </ComponentsContext.Provider>\n  )\n}\n"],"mappings":"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"}

package/dist/components/cms/context.d.ts

@@ -0,0 +1,24 @@
+import { AnyComponent } from "../../context.js";
+import { CmsPayload, Translator } from "@alfakit/core";
+import { ReactNode } from "react";
+//#region src/components/cms/context.d.ts
+export interface CmsContextValue {
+  /** `t('cms.preview', {}, 'Preview')` over the page's strings (or the panel's). */
+  t: Translator['t'];
+  /** Block renderers passed to `<CmsBlocks components>` / `<CmsPage components>`. */
+  components: Record<string, AnyComponent>;
+  direction: 'ltr' | 'rtl';
+  preview: boolean;
+}
+/**
+ * The strings, direction and block renderers of a CMS page. `CmsPage` provides it; wrap
+ * your own page in it when you render `<CmsBlocks>` outside `CmsPage`.
+ */
+export declare function CmsProvider({ payload, components, children }: {
+  payload?: Pick<CmsPayload, 'translations' | 'site' | 'preview'> | null;
+  components?: Record<string, AnyComponent>;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useCms(): CmsContextValue;
+//#endregion
+//# sourceMappingURL=context.d.ts.map

package/dist/components/cms/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/components/cms/context.tsx"],"mappings":";;;;iBAIiB;;EAEf,GAAG;;EAEH,YAAY,eAAe;EAC3B;EACA;;;;;;wBASc,cACd,SACA,YACA;EAEA,UAAU,KAAK;EACf,aAAa,eAAe;EAC5B,UAAU;oBACX,IAAA;wBA2Be,UAAU"}

package/dist/components/cms/context.js

@@ -0,0 +1,43 @@
+import { useOptionalAlfakit } from "../../context.js";
+import { createCmsTranslator } from "@alfakit/core";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/cms/context.tsx
+const CmsContext = createContext(null);
+/**
+* The strings, direction and block renderers of a CMS page. `CmsPage` provides it; wrap
+* your own page in it when you render `<CmsBlocks>` outside `CmsPage`.
+*/
+function CmsProvider({ payload, components, children }) {
+	const alfakit = useOptionalAlfakit();
+	const value = useMemo(() => {
+		const translator = payload?.translations ? createCmsTranslator(payload) : alfakit?.translator ?? createCmsTranslator(null);
+		return {
+			t: translator.t.bind(translator),
+			components: components ?? {},
+			direction: payload?.site?.direction ?? "ltr",
+			preview: payload?.preview ?? false
+		};
+	}, [
+		payload,
+		components,
+		alfakit
+	]);
+	return /* @__PURE__ */ jsx(CmsContext.Provider, {
+		value,
+		children
+	});
+}
+const FALLBACK = {
+	t: (key, replacements, fallback) => createCmsTranslator(null).t(key, replacements, fallback),
+	components: {},
+	direction: "ltr",
+	preview: false
+};
+function useCms() {
+	return useContext(CmsContext) ?? FALLBACK;
+}
+//#endregion
+export { CmsProvider, useCms };
+
+//# sourceMappingURL=context.js.map

package/dist/components/cms/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/cms/context.tsx"],"sourcesContent":["import { createCmsTranslator, type CmsPayload, type Translator } from '@alfakit/core'\nimport { createContext, useContext, useMemo, type ReactNode } from 'react'\nimport { useOptionalAlfakit, type AnyComponent } from '../../context'\n\nexport interface CmsContextValue {\n  /** `t('cms.preview', {}, 'Preview')` over the page's strings (or the panel's). */\n  t: Translator['t']\n  /** Block renderers passed to `<CmsBlocks components>` / `<CmsPage components>`. */\n  components: Record<string, AnyComponent>\n  direction: 'ltr' | 'rtl'\n  preview: boolean\n}\n\nconst CmsContext = createContext<CmsContextValue | null>(null)\n\n/**\n * The strings, direction and block renderers of a CMS page. `CmsPage` provides it; wrap\n * your own page in it when you render `<CmsBlocks>` outside `CmsPage`.\n */\nexport function CmsProvider({\n  payload,\n  components,\n  children,\n}: {\n  payload?: Pick<CmsPayload, 'translations' | 'site' | 'preview'> | null\n  components?: Record<string, AnyComponent>\n  children: ReactNode\n}) {\n  const alfakit = useOptionalAlfakit()\n\n  const value = useMemo<CmsContextValue>(() => {\n    // Inside a panel app the shared translator already has `cms.*`; a public page brings its own.\n    const translator = payload?.translations\n      ? createCmsTranslator(payload)\n      : (alfakit?.translator ?? createCmsTranslator(null))\n\n    return {\n      t: translator.t.bind(translator),\n      components: components ?? {},\n      direction: payload?.site?.direction ?? 'ltr',\n      preview: payload?.preview ?? false,\n    }\n  }, [payload, components, alfakit])\n\n  return <CmsContext.Provider value={value}>{children}</CmsContext.Provider>\n}\n\nconst FALLBACK: CmsContextValue = {\n  t: (key, replacements, fallback) => createCmsTranslator(null).t(key, replacements, fallback),\n  components: {},\n  direction: 'ltr',\n  preview: false,\n}\n\nexport function useCms(): CmsContextValue {\n  return useContext(CmsContext) ?? FALLBACK\n}\n"],"mappings":";;;;;AAaA,MAAM,aAAa,cAAsC,IAAI;;;;;AAM7D,SAAgB,YAAY,EAC1B,SACA,YACA,YAKC;CACD,MAAM,UAAU,mBAAmB;CAEnC,MAAM,QAAQ,cAA+B;EAE3C,MAAM,aAAa,SAAS,eACxB,oBAAoB,OAAO,IAC1B,SAAS,cAAc,oBAAoB,IAAI;EAEpD,OAAO;GACL,GAAG,WAAW,EAAE,KAAK,UAAU;GAC/B,YAAY,cAAc,CAAC;GAC3B,WAAW,SAAS,MAAM,aAAa;GACvC,SAAS,SAAS,WAAW;EAC/B;CACF,GAAG;EAAC;EAAS;EAAY;CAAO,CAAC;CAEjC,OAAO,oBAAC,WAAW,UAAZ;EAA4B;EAAQ;CAA8B,CAAA;AAC3E;AAEA,MAAM,WAA4B;CAChC,IAAI,KAAK,cAAc,aAAa,oBAAoB,IAAI,CAAC,CAAC,EAAE,KAAK,cAAc,QAAQ;CAC3F,YAAY,CAAC;CACb,WAAW;CACX,SAAS;AACX;AAEA,SAAgB,SAA0B;CACxC,OAAO,WAAW,UAAU,KAAK;AACnC"}

package/dist/components/cms/head.d.ts

@@ -0,0 +1,11 @@
+import { CmsSeoSchema } from "@alfakit/core";
+//#region src/components/cms/head.d.ts
+/**
+ * The page's `<title>`, meta, canonical, `hreflang` and JSON-LD tags, through Inertia's
+ * `<Head>` (server-rendered with SSR, updated on every visit).
+ */
+export declare function CmsHead({ seo }: {
+  seo: CmsSeoSchema | null | undefined;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=head.d.ts.map

package/dist/components/cms/head.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"head.d.ts","names":[],"sources":["../../../src/components/cms/head.tsx"],"mappings":";;;;;;wBAOgB,UAAU;EAAS,KAAK;oBAAiC,IAAA"}

package/dist/components/cms/head.js

@@ -0,0 +1,40 @@
+import { cmsHeadTags } from "@alfakit/core";
+import { Head } from "@inertiajs/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/cms/head.tsx
+/**
+* The page's `<title>`, meta, canonical, `hreflang` and JSON-LD tags, through Inertia's
+* `<Head>` (server-rendered with SSR, updated on every visit).
+*/
+function CmsHead({ seo }) {
+	const tags = cmsHeadTags(seo);
+	return /* @__PURE__ */ jsxs(Head, {
+		title: tags.title,
+		children: [
+			tags.meta.map((tag) => tag.property ? /* @__PURE__ */ jsx("meta", {
+				"head-key": `cms:${tag.property}`,
+				property: tag.property,
+				content: tag.content
+			}, `p:${tag.property}`) : /* @__PURE__ */ jsx("meta", {
+				"head-key": `cms:${tag.name}`,
+				name: tag.name,
+				content: tag.content
+			}, `n:${tag.name}`)),
+			tags.links.map((link) => /* @__PURE__ */ jsx("link", {
+				"head-key": `cms:${link.rel}:${link.hreflang ?? ""}`,
+				rel: link.rel,
+				href: link.href,
+				hrefLang: link.hreflang
+			}, `${link.rel}:${link.hreflang ?? ""}:${link.href}`)),
+			tags.jsonLd && /* @__PURE__ */ jsx("script", {
+				"head-key": "cms:jsonld",
+				type: "application/ld+json",
+				children: tags.jsonLd
+			})
+		]
+	});
+}
+//#endregion
+export { CmsHead };
+
+//# sourceMappingURL=head.js.map

package/dist/components/cms/head.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"head.js","names":[],"sources":["../../../src/components/cms/head.tsx"],"sourcesContent":["import { cmsHeadTags, type CmsSeoSchema } from '@alfakit/core'\nimport { Head } from '@inertiajs/react'\n\n/**\n * The page's `<title>`, meta, canonical, `hreflang` and JSON-LD tags, through Inertia's\n * `<Head>` (server-rendered with SSR, updated on every visit).\n */\nexport function CmsHead({ seo }: { seo: CmsSeoSchema | null | undefined }) {\n  const tags = cmsHeadTags(seo)\n\n  return (\n    <Head title={tags.title}>\n      {tags.meta.map((tag) =>\n        tag.property ? (\n          <meta\n            key={`p:${tag.property}`}\n            head-key={`cms:${tag.property}`}\n            property={tag.property}\n            content={tag.content}\n          />\n        ) : (\n          <meta\n            key={`n:${tag.name}`}\n            head-key={`cms:${tag.name}`}\n            name={tag.name}\n            content={tag.content}\n          />\n        ),\n      )}\n      {tags.links.map((link) => (\n        <link\n          key={`${link.rel}:${link.hreflang ?? ''}:${link.href}`}\n          head-key={`cms:${link.rel}:${link.hreflang ?? ''}`}\n          rel={link.rel}\n          href={link.href}\n          hrefLang={link.hreflang}\n        />\n      ))}\n      {/* Encoded on the server with `<` escaped, so it can't close the element. */}\n      {tags.jsonLd && (\n        <script head-key=\"cms:jsonld\" type=\"application/ld+json\">\n          {tags.jsonLd}\n        </script>\n      )}\n    </Head>\n  )\n}\n"],"mappings":";;;;;;;;AAOA,SAAgB,QAAQ,EAAE,OAAiD;CACzE,MAAM,OAAO,YAAY,GAAG;CAE5B,OACE,qBAAC,MAAD;EAAM,OAAO,KAAK;EAAlB,UAAA;GACG,KAAK,KAAK,KAAK,QACd,IAAI,WACF,oBAAC,QAAD;IAEE,YAAU,OAAO,IAAI;IACrB,UAAU,IAAI;IACd,SAAS,IAAI;GACd,GAJM,KAAK,IAAI,UAIf,IAED,oBAAC,QAAD;IAEE,YAAU,OAAO,IAAI;IACrB,MAAM,IAAI;IACV,SAAS,IAAI;GACd,GAJM,KAAK,IAAI,MAIf,CAEL;GACC,KAAK,MAAM,KAAK,SACf,oBAAC,QAAD;IAEE,YAAU,OAAO,KAAK,IAAI,GAAG,KAAK,YAAY;IAC9C,KAAK,KAAK;IACV,MAAM,KAAK;IACX,UAAU,KAAK;GAChB,GALM,GAAG,KAAK,IAAI,GAAG,KAAK,YAAY,GAAG,GAAG,KAAK,MAKjD,CACF;GAEA,KAAK,UACJ,oBAAC,UAAD;IAAQ,YAAS;IAAa,MAAK;IAChC,UAAA,KAAK;GACA,CAAA;EAEN;;AAEV"}

package/dist/components/cms/index.d.ts

@@ -0,0 +1,8 @@
+import { CMS_BLOCK_COMPONENTS, CallToActionBlock, CmsBlockProps, CmsBlocks, ColumnsBlock, EmbedBlock, FaqBlock, FeaturesBlock, FormBlock, GalleryBlock, HeroBlock, ImageBlock, RichTextBlock, SectionBlock, TestimonialsBlock } from "./blocks.js";
+import { CmsContextValue, CmsProvider, useCms } from "./context.js";
+import { CmsHead } from "./head.js";
+import { CmsLivePreview } from "./live-preview-lazy.js";
+import { CmsLanguageSwitcher, CmsMenuList, CmsNav } from "./menu.js";
+import { CmsFooter, CmsHeader, CmsPage } from "./page.js";
+import { CmsBlockHeading, CmsImage, CmsLinkButton } from "./parts.js";
+export { CMS_BLOCK_COMPONENTS, CallToActionBlock, CmsBlockHeading, type CmsBlockProps, CmsBlocks, type CmsContextValue, CmsFooter, CmsHead, CmsHeader, CmsImage, CmsLanguageSwitcher, CmsLinkButton, CmsLivePreview, CmsMenuList, CmsNav, CmsPage, CmsProvider, ColumnsBlock, EmbedBlock, FaqBlock, FeaturesBlock, FormBlock, GalleryBlock, HeroBlock, ImageBlock, RichTextBlock, SectionBlock, TestimonialsBlock, useCms };

package/dist/components/cms/index.js

@@ -0,0 +1,8 @@
+import { CmsLivePreview } from "./live-preview-lazy.js";
+import { CmsProvider, useCms } from "./context.js";
+import { CmsBlockHeading, CmsImage, CmsLinkButton } from "./parts.js";
+import { CMS_BLOCK_COMPONENTS, CallToActionBlock, CmsBlocks, ColumnsBlock, EmbedBlock, FaqBlock, FeaturesBlock, FormBlock, GalleryBlock, HeroBlock, ImageBlock, RichTextBlock, SectionBlock, TestimonialsBlock } from "./blocks.js";
+import { CmsHead } from "./head.js";
+import { CmsLanguageSwitcher, CmsMenuList, CmsNav } from "./menu.js";
+import { CmsFooter, CmsHeader, CmsPage } from "./page.js";
+export { CMS_BLOCK_COMPONENTS, CallToActionBlock, CmsBlockHeading, CmsBlocks, CmsFooter, CmsHead, CmsHeader, CmsImage, CmsLanguageSwitcher, CmsLinkButton, CmsLivePreview, CmsMenuList, CmsNav, CmsPage, CmsProvider, ColumnsBlock, EmbedBlock, FaqBlock, FeaturesBlock, FormBlock, GalleryBlock, HeroBlock, ImageBlock, RichTextBlock, SectionBlock, TestimonialsBlock, useCms };

package/dist/components/cms/live-preview-lazy.d.ts

@@ -0,0 +1,9 @@
+import { LazyComponent } from "../../lib/lazy.js";
+import { CmsLivePreviewSchema } from "@alfakit/core";
+//#region src/components/cms/live-preview-lazy.d.ts
+/** The live preview; its code loads the first time a page editor is opened. */
+export declare const CmsLivePreview: LazyComponent<{
+  component: CmsLivePreviewSchema;
+}>;
+//#endregion
+//# sourceMappingURL=live-preview-lazy.d.ts.map

package/dist/components/cms/live-preview-lazy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"live-preview-lazy.d.ts","names":["_$______lib_lazy0.LazyComponent"],"sources":["../../../src/components/cms/live-preview-lazy.tsx"],"mappings":";;;;qBAIa,gBAA4CA;EAAA,WAAA"}

package/dist/components/cms/live-preview-lazy.js

@@ -0,0 +1,13 @@
+import { lazyComponent } from "../../lib/lazy.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/cms/live-preview-lazy.tsx
+/** The live preview; its code loads the first time a page editor is opened. */
+const CmsLivePreview = lazyComponent(() => import("./live-preview.js").then((module) => module.CmsLivePreview), () => /* @__PURE__ */ jsx("div", {
+	"data-slot": "cms-live-preview",
+	className: "h-8",
+	"aria-hidden": "true"
+}));
+//#endregion
+export { CmsLivePreview };
+
+//# sourceMappingURL=live-preview-lazy.js.map