@frontlit/page-builder 0.1.0-alpha.3 → 0.1.0-alpha.5

package/dist/{chunk-K4WCLHMS.js → chunk-5J6TLS5U.js}

@@ -1,12 +1,12 @@
 "use client";
 import { NavLink, VideoWithPreview, Image, TextRenderer, InlineEmbed } from './chunk-36QHCIPM.js';
-import { Button2, Section, cn, Preheader, Display, Subheader1, CodeSnippet, Caption, PageCard, PageCardContent, Header2, Header1, Header4, Text2, Badge, PageCardHeader, Text1, Link, Header3, Drawer, Input, Label } from './chunk-J7Z4UW45.js';
+import { Button2, Section, cn, Preheader, Display, Subheader1, CodeSnippet, Caption, PageCard, PageCardContent, Header2, Header1, Header4, Text2, Badge, PageCardHeader, Text1, Link, Header3, Drawer, Label, Switch2, Input } from './chunk-J7Z4UW45.js';
 import { getMediaUrl, getMediaAlt } from './chunk-XU7ALPGQ.js';
 import clsx3 from 'clsx';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React2, { useId, useState, useRef, useEffect } from 'react';
 import * as Icons from 'lucide-react';
-import { Code2, LockKeyhole, ChevronDown, MenuIcon, Plus, ImageIcon } from 'lucide-react';
+import { Github, Code2, LockKeyhole, ChevronDown, MenuIcon, Plus, ImageIcon } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React2, { useId, useState, useEffect, useRef } from 'react';
 import { ImageUploadDialog } from '@frontlit/media-uploader';
 import { Editor, emptyDoc } from '@frontlit/text-editor';
 
@@ -15,7 +15,8 @@ var headerMetadata = {
   name: "header",
   displayName: "Header",
   description: "The site navigation bar, pinned to the top of every page.",
-  compatibleWith: ["site", "landing", "blog", "post", "custom"]
+  compatibleWith: ["site", "landing", "blog", "post", "custom"],
+  icon: "PanelTop"
 };
 function HeaderLink({
   link,
@@ -70,6 +71,29 @@ function HeaderMobileMenu({
     }
   );
 }
+
+// src/blocks/header/github.ts
+function parseGithubRepo(value) {
+  const match = value?.trim().match(/^(?:https?:\/\/(?:www\.)?github\.com\/)?([\w.-]+\/[\w.-]+?)(?:\.git)?\/?$/);
+  return match?.[1];
+}
+function formatStars(count) {
+  return new Intl.NumberFormat("en", {
+    notation: "compact",
+    maximumFractionDigits: 1
+  }).format(count).toLowerCase();
+}
+function GithubStars({ repo }) {
+  const [stars, setStars] = useState();
+  useEffect(() => {
+    const controller = new AbortController();
+    fetch(`https://api.github.com/repos/${repo}`, { signal: controller.signal }).then((response) => response.ok ? response.json() : void 0).then((data) => setStars(data?.stargazers_count)).catch(() => {
+    });
+    return () => controller.abort();
+  }, [repo]);
+  if (!stars) return null;
+  return /* @__PURE__ */ jsx("span", { children: formatStars(stars) });
+}
 function HeaderWidget({
   settings: {
     logoCorners,
@@ -79,6 +103,8 @@ function HeaderWidget({
     linkAlignment = "left",
     layout = "fixed",
     backdropBlur = false,
+    githubRepo,
+    showGithubStars,
     cssId,
     maxWidth,
     verticalPadding,
@@ -99,6 +125,8 @@ function HeaderWidget({
   const resolvedLogoText = pageData.siteTitle;
   const resolvedLogoAlt = pageData.siteLogoAlt || resolvedLogoText || "";
   const effectiveLogoCorners = logoCorners ?? 2;
+  const hasCta = Boolean(ctaLabel && ctaHref);
+  const repo = parseGithubRepo(githubRepo);
   const logo = /* @__PURE__ */ jsx(NavLink, { href: "/", className: "no-underline", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
     resolvedLogoImage && /* @__PURE__ */ jsx(
       Image,
@@ -115,9 +143,22 @@ function HeaderWidget({
     resolvedLogoText && /* @__PURE__ */ jsx(Header4, { theme: overriddenTheme, as: "span", children: resolvedLogoText })
   ] }) });
   const ctaAndMenu = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    repo && /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: `https://github.com/${repo}`,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: /* @__PURE__ */ jsxs(Button2, { theme: overriddenTheme, variant: "ghost", size: "sm", className: "gap-1.5", children: [
+          /* @__PURE__ */ jsx(Github, { className: "h-4 w-4", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "GitHub repository" }),
+          showGithubStars && /* @__PURE__ */ jsx(GithubStars, { repo })
+        ] })
+      }
+    ),
     buttonLinks.map((link) => /* @__PURE__ */ jsx("div", { className: "hidden lg:!block", children: /* @__PURE__ */ jsx(HeaderLink, { link, theme: overriddenTheme }) }, link.id)),
-    ctaLabel && ctaHref && /* @__PURE__ */ jsx("div", { className: "hidden lg:!block", children: /* @__PURE__ */ jsx(NavLink, { href: ctaHref, children: /* @__PURE__ */ jsx(Button2, { theme: overriddenTheme, size: "sm", children: ctaLabel }) }) }),
-    /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
+    hasCta && /* @__PURE__ */ jsx("div", { className: "hidden lg:!block", children: /* @__PURE__ */ jsx(NavLink, { href: ctaHref, children: /* @__PURE__ */ jsx(Button2, { theme: overriddenTheme, size: "sm", children: ctaLabel }) }) }),
+    (links.length > 0 || hasCta) && /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
       HeaderMobileMenu,
       {
         links,
@@ -701,6 +742,26 @@ function HeaderEditor({
         }
       )
     ] }),
+    /* @__PURE__ */ jsxs(FieldGroup, { title: "GitHub", children: [
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: "Repository",
+          value: settings.githubRepo,
+          placeholder: "owner/repo",
+          hint: "Shows a GitHub icon linking to the repository.",
+          onChange: (githubRepo) => update({ githubRepo })
+        }
+      ),
+      settings.githubRepo && /* @__PURE__ */ jsx(
+        ToggleField,
+        {
+          label: "Show star count",
+          value: settings.showGithubStars,
+          onChange: (showGithubStars) => update({ showGithubStars })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxs(FieldGroup, { title: "Layout", children: [
       /* @__PURE__ */ jsx(
         SelectField,
@@ -786,7 +847,8 @@ var heroMetadata = {
   name: "hero",
   displayName: "Hero",
   description: "A large introductory section with a title, copy and CTAs.",
-  compatibleWith: ["site", "landing", "blog", "post", "custom"]
+  compatibleWith: ["site", "landing", "blog", "post", "custom"],
+  icon: "Sparkles"
 };
 function titleProps({
   titleLevel,
@@ -1114,7 +1176,8 @@ var contentMetadata = {
   name: "content",
   displayName: "Content",
   description: "A rich-text section with an optional image, for things like an about-us or feature explainer.",
-  compatibleWith: ["site", "landing", "blog", "post", "custom"]
+  compatibleWith: ["site", "landing", "blog", "post", "custom"],
+  icon: "Newspaper"
 };
 var roundedMap2 = {
   0: "rounded-none",
@@ -1337,7 +1400,8 @@ var featuredMetadata = {
   name: "featured",
   displayName: "Feature grid",
   description: "A grid of feature highlights, each with an icon, title and description.",
-  compatibleWith: ["site", "landing", "custom"]
+  compatibleWith: ["site", "landing", "custom"],
+  icon: "LayoutGrid"
 };
 function resolveIcon(name) {
   if (!name) return Icons.Sparkles;
@@ -1576,7 +1640,8 @@ var faqMetadata = {
   name: "faq",
   displayName: "FAQs",
   description: "A list of frequently asked questions, rendered as an accordion.",
-  compatibleWith: ["site", "landing", "blog", "post", "custom"]
+  compatibleWith: ["site", "landing", "blog", "post", "custom"],
+  icon: "CircleHelp"
 };
 function FaqWidget({
   settings: {
@@ -1766,8 +1831,64 @@ var pricingMetadata = {
   name: "pricing",
   displayName: "Pricing",
   description: "A grid of pricing tiers with features and calls to action.",
-  compatibleWith: ["site", "landing", "custom"]
+  compatibleWith: ["site", "landing", "custom"],
+  icon: "BadgeDollarSign"
 };
+function PricingPeriodSwitch({
+  defaultPeriod,
+  monthlyCaption,
+  yearlyCaption,
+  theme,
+  children
+}) {
+  const [period, setPeriod] = useState(defaultPeriod);
+  const id = useId();
+  const monthlyId = `${id}-monthly`;
+  const yearlyId = `${id}-yearly`;
+  return /* @__PURE__ */ jsxs("div", { "data-period": period, className: "group/pricing flex flex-col gap-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Label,
+        {
+          id: monthlyId,
+          theme,
+          className: "cursor-pointer",
+          onClick: () => setPeriod("monthly"),
+          children: monthlyCaption
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Switch2,
+        {
+          theme,
+          checked: period === "yearly",
+          onCheckedChange: (checked) => setPeriod(checked ? "yearly" : "monthly"),
+          "aria-labelledby": yearlyId,
+          "aria-describedby": monthlyId
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Label,
+        {
+          id: yearlyId,
+          theme,
+          className: "cursor-pointer",
+          onClick: () => setPeriod("yearly"),
+          children: yearlyCaption
+        }
+      )
+    ] }),
+    children
+  ] });
+}
+var lgColumns = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4"
+};
+var monthlyOnly = "group-data-[period=yearly]/pricing:hidden";
+var yearlyOnly = "hidden group-data-[period=yearly]/pricing:block";
 function PricingWidget({
   settings: {
     title,
@@ -1777,6 +1898,10 @@ function PricingWidget({
     headerAlignment = "center",
     tiers,
     layout = "grid",
+    pricingSwitcher,
+    monthlyPriceCaption,
+    yearlyPriceCaption,
+    defaultPeriod = "yearly",
     cssId,
     maxWidth,
     verticalPadding,
@@ -1787,6 +1912,76 @@ function PricingWidget({
   const overriddenTheme = JSON.parse(JSON.stringify(theme.theme));
   overriddenTheme.structure.page.width = maxWidth || theme.theme.structure.page.width;
   overriddenTheme.structure.section.padding.y = verticalPadding || theme.theme.structure.section.padding.y;
+  const plans = tiers && tiers.length > 0 && /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx3(
+        layout === "stacked" ? "mx-auto flex w-full max-w-xl flex-col gap-6" : [
+          "grid grid-cols-1 gap-6 items-stretch",
+          tiers.length === 1 && "mx-auto w-full max-w-xl",
+          tiers.length >= 2 && "md:grid-cols-2",
+          lgColumns[Math.min(tiers.length, 4)]
+        ]
+      ),
+      children: tiers.map((tier, index) => /* @__PURE__ */ jsx(
+        PageCard,
+        {
+          theme: overriddenTheme,
+          className: clsx3(
+            tier.highlighted && "ring-2 ring-primary",
+            layout === "highlight" && tier.highlighted && "relative z-10 shadow-xl md:-translate-y-3"
+          ),
+          children: /* @__PURE__ */ jsxs(
+            PageCardContent,
+            {
+              theme: overriddenTheme,
+              className: "h-full flex flex-col gap-4",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx(Preheader, { theme: overriddenTheme, children: tier.name }),
+                  tier.highlighted && /* @__PURE__ */ jsx(Badge, { theme: overriddenTheme, children: "Most popular" })
+                ] }),
+                /* @__PURE__ */ jsx(PageCardHeader, { theme: overriddenTheme, children: pricingSwitcher ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { className: monthlyOnly, children: tier.price }),
+                  /* @__PURE__ */ jsx("span", { className: yearlyOnly, children: tier.priceYearly || tier.price })
+                ] }) : tier.price }),
+                tier.description && /* @__PURE__ */ jsx(Text1, { theme: overriddenTheme, children: tier.description }),
+                tier.features && tier.features.length > 0 && /* @__PURE__ */ jsx("div", { className: "grow flex flex-col gap-2", children: tier.features.map((feature, i) => /* @__PURE__ */ jsx(Text2, { theme: overriddenTheme, children: feature }, i)) }),
+                pricingSwitcher && tier.buttonActionYearly && tier.buttonActionYearly !== tier.buttonAction ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    TierButton,
+                    {
+                      tier,
+                      href: tier.buttonAction,
+                      className: monthlyOnly,
+                      theme: overriddenTheme
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TierButton,
+                    {
+                      tier,
+                      href: tier.buttonActionYearly,
+                      className: yearlyOnly,
+                      theme: overriddenTheme
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsx(
+                  TierButton,
+                  {
+                    tier,
+                    href: tier.buttonAction,
+                    theme: overriddenTheme
+                  }
+                )
+              ]
+            }
+          )
+        },
+        index
+      ))
+    }
+  );
   return /* @__PURE__ */ jsx(Section, { theme: overriddenTheme, id: cssId, background, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -1801,50 +1996,35 @@ function PricingWidget({
         ]
       }
     ),
-    tiers && tiers.length > 0 && /* @__PURE__ */ jsx(
-      "div",
+    tiers && tiers.length > 0 && (pricingSwitcher ? /* @__PURE__ */ jsx(
+      PricingPeriodSwitch,
       {
-        className: layout === "stacked" ? "mx-auto flex w-full max-w-xl flex-col gap-6" : "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-stretch",
-        children: tiers.map((tier, index) => /* @__PURE__ */ jsx(
-          PageCard,
-          {
-            theme: overriddenTheme,
-            className: clsx3(
-              tier.highlighted && "ring-2 ring-primary",
-              layout === "highlight" && tier.highlighted && "relative z-10 shadow-xl md:-translate-y-3"
-            ),
-            children: /* @__PURE__ */ jsxs(
-              PageCardContent,
-              {
-                theme: overriddenTheme,
-                className: "h-full flex flex-col gap-4",
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                    /* @__PURE__ */ jsx(Preheader, { theme: overriddenTheme, children: tier.name }),
-                    tier.highlighted && /* @__PURE__ */ jsx(Badge, { theme: overriddenTheme, children: "Most popular" })
-                  ] }),
-                  /* @__PURE__ */ jsx(PageCardHeader, { theme: overriddenTheme, children: tier.price }),
-                  tier.description && /* @__PURE__ */ jsx(Text1, { theme: overriddenTheme, children: tier.description }),
-                  tier.features && tier.features.length > 0 && /* @__PURE__ */ jsx("div", { className: "grow flex flex-col gap-2", children: tier.features.map((feature, i) => /* @__PURE__ */ jsx(Text2, { theme: overriddenTheme, children: feature }, i)) }),
-                  tier.buttonAction && tier.buttonCaption && /* @__PURE__ */ jsx(NavLink, { href: tier.buttonAction, className: "w-full mt-auto", children: /* @__PURE__ */ jsx(
-                    Button2,
-                    {
-                      theme: overriddenTheme,
-                      variant: tier.highlighted ? "default" : "secondary",
-                      className: "w-full",
-                      children: tier.buttonCaption
-                    }
-                  ) })
-                ]
-              }
-            )
-          },
-          index
-        ))
+        defaultPeriod,
+        monthlyCaption: monthlyPriceCaption || "Monthly",
+        yearlyCaption: yearlyPriceCaption || "Yearly",
+        theme: overriddenTheme,
+        children: plans
       }
-    )
+    ) : plans)
   ] }) });
 }
+function TierButton({
+  tier,
+  href,
+  className,
+  theme
+}) {
+  if (!href || !tier.buttonCaption) return null;
+  return /* @__PURE__ */ jsx(NavLink, { href, className: clsx3("w-full mt-auto", className), children: /* @__PURE__ */ jsx(
+    Button2,
+    {
+      theme,
+      variant: tier.highlighted ? "default" : "secondary",
+      className: "w-full",
+      children: tier.buttonCaption
+    }
+  ) });
+}
 var createTier = () => ({
   name: "New plan",
   price: "$0/mo",
@@ -1893,6 +2073,48 @@ function PricingEditor({
         }
       )
     ] }),
+    /* @__PURE__ */ jsxs(FieldGroup, { title: "Billing period", children: [
+      /* @__PURE__ */ jsx(
+        ToggleField,
+        {
+          label: "Monthly/Yearly switch",
+          value: settings.pricingSwitcher,
+          onChange: (pricingSwitcher) => update({ pricingSwitcher })
+        }
+      ),
+      settings.pricingSwitcher && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Monthly caption",
+            value: settings.monthlyPriceCaption,
+            placeholder: "Monthly",
+            onChange: (monthlyPriceCaption) => update({ monthlyPriceCaption })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Yearly caption",
+            value: settings.yearlyPriceCaption,
+            placeholder: "Yearly (2 months free)",
+            onChange: (yearlyPriceCaption) => update({ yearlyPriceCaption })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SelectField,
+          {
+            label: "Selected by default",
+            value: settings.defaultPeriod ?? "yearly",
+            onChange: (defaultPeriod) => update({ defaultPeriod }),
+            options: [
+              { label: "Monthly", value: "monthly" },
+              { label: "Yearly", value: "yearly" }
+            ]
+          }
+        )
+      ] })
+    ] }),
     /* @__PURE__ */ jsx(FieldGroup, { title: "Pricing tiers", children: /* @__PURE__ */ jsx(
       ListField,
       {
@@ -1913,12 +2135,22 @@ function PricingEditor({
           /* @__PURE__ */ jsx(
             TextField,
             {
-              label: "Price",
+              label: settings.pricingSwitcher ? "Monthly price" : "Price",
               value: tier.price,
               placeholder: "$29/mo",
               onChange: (price) => updateTier({ price })
             }
           ),
+          settings.pricingSwitcher && /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: "Yearly price",
+              value: tier.priceYearly,
+              placeholder: "$290/year",
+              hint: "Leave empty to show the monthly price.",
+              onChange: (priceYearly) => updateTier({ priceYearly })
+            }
+          ),
           /* @__PURE__ */ jsx(
             TextField,
             {
@@ -1955,6 +2187,15 @@ function PricingEditor({
               onChange: (buttonAction) => updateTier({ buttonAction })
             }
           ),
+          settings.pricingSwitcher && /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: "Yearly button link",
+              value: tier.buttonActionYearly,
+              hint: "Leave empty to use the button link.",
+              onChange: (buttonActionYearly) => updateTier({ buttonActionYearly })
+            }
+          ),
           /* @__PURE__ */ jsx(
             ToggleField,
             {
@@ -2035,7 +2276,8 @@ var bannerMetadata = {
   name: "banner",
   displayName: "Banner",
   description: "A strong, punchy call-to-action strip.",
-  compatibleWith: ["site", "landing", "blog", "post", "custom"]
+  compatibleWith: ["site", "landing", "blog", "post", "custom"],
+  icon: "Megaphone"
 };
 function BannerWidget({
   settings: {
@@ -2219,7 +2461,8 @@ var emailFormMetadata = {
   name: "email-form",
   displayName: "Email signup",
   description: "An email signup form with a title, description and email input.",
-  compatibleWith: ["site", "landing", "blog", "post", "custom"]
+  compatibleWith: ["site", "landing", "blog", "post", "custom"],
+  icon: "Mail"
 };
 async function subscribeEmail(email, pageData) {
   if (!pageData.teamId || !pageData.publicApiBaseUrl) {
@@ -2507,7 +2750,8 @@ var supportFormMetadata = {
   name: "support-form",
   displayName: "Support form",
   description: "Raises a support ticket, suggesting matching help articles before the visitor submits.",
-  compatibleWith: ["site", "landing", "custom"]
+  compatibleWith: ["site", "landing", "custom"],
+  icon: "LifeBuoy"
 };
 function suggestionHref(item) {
   if (item.kind === "blog") return `/blog/${item.slug}`;
@@ -2843,7 +3087,8 @@ var footerMetadata = {
   name: "footer",
   displayName: "Footer",
   description: "The site footer, pinned to the bottom of every page.",
-  compatibleWith: ["site", "landing", "blog", "post", "custom"]
+  compatibleWith: ["site", "landing", "blog", "post", "custom"],
+  icon: "PanelBottom"
 };
 function FooterWidget({
   settings: {
@@ -3112,7 +3357,8 @@ var richTextMetadata = {
   name: "rich-text",
   displayName: "Rich text",
   description: "A block of formatted text \u2014 paragraphs, headings, lists and links \u2014 with no title or media.",
-  compatibleWith: ["site", "landing", "blog", "post", "custom"]
+  compatibleWith: ["site", "landing", "blog", "post", "custom"],
+  icon: "Type"
 };
 function RichTextWidget({
   settings: { text, alignment = "left", cssId, maxWidth, verticalPadding, background },
@@ -3187,7 +3433,8 @@ var gridMetadata = {
   name: "grid",
   displayName: "Grid",
   description: "A header with a page-level call to action, plus a responsive grid of cards \u2014 each with its own icon or image, title, description and link.",
-  compatibleWith: ["site", "landing", "blog", "post", "custom"]
+  compatibleWith: ["site", "landing", "blog", "post", "custom"],
+  icon: "Grid2x2"
 };
 function resolveIcon2(name) {
   if (!name) return null;
@@ -3489,7 +3736,8 @@ var mediaMetadata = {
   name: "media",
   displayName: "Media",
   description: "A single image or video \u2014 YouTube, Vimeo or self-hosted \u2014 with an optional click-to-play preview.",
-  compatibleWith: ["site", "landing", "blog", "post", "custom"]
+  compatibleWith: ["site", "landing", "blog", "post", "custom"],
+  icon: "Image"
 };
 var roundedMap3 = {
   0: "rounded-none",
@@ -3657,7 +3905,8 @@ var marqueeMetadata = {
   name: "marquee",
   displayName: "Marquee",
   description: "An infinite horizontally-scrolling row of text or icons \u2014 useful for logo clouds or highlight tickers.",
-  compatibleWith: ["site", "landing", "blog", "post", "custom"]
+  compatibleWith: ["site", "landing", "blog", "post", "custom"],
+  icon: "GalleryHorizontalEnd"
 };
 function MarqueeTrack({
   children,
@@ -3979,7 +4228,8 @@ var embedMetadata = {
   name: "embed",
   displayName: "Embed",
   description: "Embed a URL in an iframe, or paste a script/iframe snippet from a third-party tool.",
-  compatibleWith: ["site", "landing", "blog", "post", "custom"]
+  compatibleWith: ["site", "landing", "blog", "post", "custom"],
+  icon: "AppWindow"
 };
 var aspectRatioMap = {
   "16:9": 16 / 9,
@@ -4233,7 +4483,8 @@ var dataSlotMetadata = {
   name: "data-slot",
   displayName: "Data slot",
   description: "A host-resolved data region. Its data source and presentation belong to the embedding application.",
-  compatibleWith: ["site", "blog", "landing", "post", "custom"]
+  compatibleWith: ["site", "blog", "landing", "post", "custom"],
+  icon: "Database"
 };
 function DataSlotWidget({
   data,
@@ -4278,5 +4529,5 @@ var DataSlot = {
 };
 
 export { Banner, CodeSnippetBlock, Content, DataSlot, EmailForm2 as EmailForm, Embed, Faq, Featured, FieldGroup, Footer, Grid, Header, Hero, Marquee, MediaBlock, Pricing, RichText, SupportForm2 as SupportForm, TextField, TitleSizeField, ToggleField, generateUniqueId };
-//# sourceMappingURL=chunk-K4WCLHMS.js.map
-//# sourceMappingURL=chunk-K4WCLHMS.js.map
+//# sourceMappingURL=chunk-5J6TLS5U.js.map
+//# sourceMappingURL=chunk-5J6TLS5U.js.map