@frontlit/page-builder 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/{chunk-7KIX4WAO.js → chunk-UO7XGBGM.js}

@@ -1,11 +1,13 @@
 "use client";
-import { NavLink, VideoWithPreview, Image, TextRenderer, SandboxedEmbed, ThemeModeSwitcher } from './chunk-7W6Q4WA7.js';
-import { Button2, Drawer, Section, cn, Preheader, Header1, Subheader1, PageCard, PageCardContent, Header2, Header4, Text2, Badge, PageCardHeader, Text1, Input, Label, Link, Caption, Header3 } from './chunk-RBJBODQP.js';
+import { NavLink, VideoWithPreview, Image, TextRenderer, SandboxedEmbed, ThemeModeSwitcher } from './chunk-H4P5MFJI.js';
+import { Button2, Drawer, Section, cn, Preheader, Header1, Subheader1, PageCard, PageCardContent, Header2, Header4, Text2, Badge, PageCardHeader, Text1, Input, Label, Link, Caption, Header3 } from './chunk-SGNRWWG3.js';
+import { getMediaUrl, getMediaAlt } from './chunk-XU7ALPGQ.js';
 import React7, { useState, useId, useRef, useEffect } from 'react';
 import clsx3 from 'clsx';
 import * as Icons from 'lucide-react';
-import { MenuIcon, Code2, LockKeyhole, ChevronDown, Plus } from 'lucide-react';
+import { MenuIcon, Code2, LockKeyhole, ChevronDown, ImageIcon, Plus } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { ImageUploadDialog } from '@frontlit/media-uploader';
 import { Editor, emptyDoc } from '@frontlit/text-editor';
 
 // src/blocks/header/metadata.ts
@@ -41,6 +43,8 @@ function HeaderWidget({
   settings: {
     logoText,
     logoImage,
+    logoCorners,
+    logoRadius,
     links = [],
     ctaLabel,
     ctaHref,
@@ -69,6 +73,7 @@ function HeaderWidget({
   const buttonLinks = links.filter((link) => link.isButton);
   const resolvedLogoImage = pageData.siteLogoUrl || logoImage;
   const resolvedLogoAlt = pageData.siteLogoAlt || logoText || "";
+  const effectiveLogoCorners = logoCorners ?? logoRadius ?? 2;
   const logo = /* @__PURE__ */ jsx(NavLink, { href: "/", className: "no-underline", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
     resolvedLogoImage && /* @__PURE__ */ jsx(
       Image,
@@ -77,7 +82,8 @@ function HeaderWidget({
         alt: resolvedLogoAlt,
         width: "w-8",
         height: "h-8",
-        borderRadius: 2
+        className: "aspect-square shrink-0",
+        borderRadius: effectiveLogoCorners
       }
     ),
     logoText && /* @__PURE__ */ jsx(Header4, { theme: overriddenTheme, children: logoText })
@@ -103,18 +109,10 @@ function HeaderWidget({
         setOpen: setMobileNavOpen,
         side: "right",
         theme: overriddenTheme,
-        trigger: /* @__PURE__ */ jsxs(
-          Button2,
-          {
-            variant: "outline",
-            size: "sm",
-            theme: overriddenTheme,
-            children: [
-              /* @__PURE__ */ jsx(MenuIcon, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle menu" })
-            ]
-          }
-        ),
+        trigger: /* @__PURE__ */ jsxs(Button2, { variant: "outline", size: "sm", theme: overriddenTheme, children: [
+          /* @__PURE__ */ jsx(MenuIcon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle menu" })
+        ] }),
         children: /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-col gap-4", children: [
           links.map((link) => /* @__PURE__ */ jsx(
             HeaderLink,
@@ -125,21 +123,7 @@ function HeaderWidget({
             },
             link.id
           )),
-          ctaLabel && ctaHref && /* @__PURE__ */ jsx(
-            NavLink,
-            {
-              href: ctaHref,
-              onClick: () => setMobileNavOpen(false),
-              children: /* @__PURE__ */ jsx(
-                Button2,
-                {
-                  theme: overriddenTheme,
-                  className: "w-full",
-                  children: ctaLabel
-                }
-              )
-            }
-          )
+          ctaLabel && ctaHref && /* @__PURE__ */ jsx(NavLink, { href: ctaHref, onClick: () => setMobileNavOpen(false), children: /* @__PURE__ */ jsx(Button2, { theme: overriddenTheme, className: "w-full", children: ctaLabel }) })
         ] })
       }
     ) })
@@ -150,24 +134,10 @@ function HeaderWidget({
     const leftLinks = primaryLinks.slice(0, half);
     const rightLinks = primaryLinks.slice(half);
     mainContent = /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-[1fr_auto_1fr] items-center gap-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "hidden items-center justify-end gap-6 lg:!flex", children: leftLinks.map((link) => /* @__PURE__ */ jsx(
-        HeaderLink,
-        {
-          link,
-          theme: overriddenTheme
-        },
-        link.id
-      )) }),
+      /* @__PURE__ */ jsx("div", { className: "hidden items-center justify-end gap-6 lg:!flex", children: leftLinks.map((link) => /* @__PURE__ */ jsx(HeaderLink, { link, theme: overriddenTheme }, link.id)) }),
       /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: logo }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "hidden items-center gap-6 lg:!flex", children: rightLinks.map((link) => /* @__PURE__ */ jsx(
-          HeaderLink,
-          {
-            link,
-            theme: overriddenTheme
-          },
-          link.id
-        )) }),
+        /* @__PURE__ */ jsx("div", { className: "hidden items-center gap-6 lg:!flex", children: rightLinks.map((link) => /* @__PURE__ */ jsx(HeaderLink, { link, theme: overriddenTheme }, link.id)) }),
         ctaAndMenu
       ] })
     ] });
@@ -181,14 +151,7 @@ function HeaderWidget({
             "hidden items-center gap-6 lg:!flex lg:!grow",
             linkAlignment === "right" ? "justify-end" : linkAlignment === "center" ? "justify-center" : "justify-start"
           ),
-          children: primaryLinks.map((link) => /* @__PURE__ */ jsx(
-            HeaderLink,
-            {
-              link,
-              theme: overriddenTheme
-            },
-            link.id
-          ))
+          children: primaryLinks.map((link) => /* @__PURE__ */ jsx(HeaderLink, { link, theme: overriddenTheme }, link.id))
         }
       ),
       ctaAndMenu
@@ -295,6 +258,66 @@ function NumberField({
     )
   ] });
 }
+function SliderField({
+  label,
+  value = 0,
+  onChange,
+  min = 0,
+  max = 8,
+  step = 1,
+  unit = "",
+  displayValue,
+  minLabel,
+  maxLabel
+}) {
+  const generatedId = useId();
+  const inputId = `field-${generatedId.replace(/:/g, "")}`;
+  const numValue = Number.isFinite(value) ? value : min;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 text-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "text-xs font-semibold text-foreground", children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        displayValue && /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-muted-foreground", children: displayValue }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: inputId,
+            type: "number",
+            inputMode: "numeric",
+            min,
+            max,
+            step,
+            value: numValue,
+            onChange: (e) => {
+              const parsed = Number(e.currentTarget.value);
+              if (Number.isNaN(parsed)) return;
+              onChange(Math.min(Math.max(parsed, min), max));
+            },
+            className: "h-7 w-12 rounded-md border border-input bg-muted/20 px-1.5 py-1 text-center text-xs font-semibold text-foreground outline-none transition-colors focus:border-ring focus:bg-background focus:ring-2 focus:ring-ring/20"
+          }
+        ),
+        unit && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground", children: unit })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        min,
+        max,
+        step,
+        value: numValue,
+        onChange: (e) => onChange(Number(e.currentTarget.value)),
+        "aria-label": label,
+        className: "h-1.5 w-full cursor-pointer accent-primary"
+      }
+    ),
+    (minLabel || maxLabel) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-[10px] font-medium text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { children: minLabel }),
+      /* @__PURE__ */ jsx("span", { children: maxLabel })
+    ] })
+  ] });
+}
 function SelectField({
   label,
   value,
@@ -401,6 +424,120 @@ function ListField({
     )
   ] });
 }
+function ImageField({
+  label,
+  value,
+  onChange,
+  placeholder = "https://..."
+}) {
+  const imageUrl = getMediaUrl(value);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 text-sm", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-foreground", children: label }),
+    imageUrl ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden rounded-lg border border-border bg-muted/40", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: imageUrl,
+          alt: "Preview",
+          className: "h-full w-full object-cover"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          ImageUploadDialog,
+          {
+            title: `Choose ${label.toLowerCase()}`,
+            description: "Upload an image or select one from your library.",
+            onSelect: (selected) => {
+              const selMedia = selected.media;
+              const mediaLitId = selMedia?.mediaLitId ?? selMedia?.mediaId ?? void 0;
+              onChange({
+                ...mediaLitId ? { mediaId: mediaLitId, mediaLitId } : {},
+                url: selected.src,
+                file: selected.src,
+                thumbnailUrl: selMedia?.thumbnailUrl ?? selected.src,
+                thumbnail: selMedia?.thumbnailUrl ?? selected.src,
+                alt: selected.alt
+              });
+            },
+            children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex h-8 items-center justify-center rounded-lg border border-input bg-background px-3 text-xs font-medium text-foreground hover:bg-muted",
+                children: [
+                  /* @__PURE__ */ jsx(ImageIcon, { className: "mr-1.5 h-3.5 w-3.5" }),
+                  "Change image"
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "inline-flex h-8 items-center justify-center rounded-lg border border-destructive/30 bg-background px-3 text-xs font-medium text-destructive hover:bg-destructive/10",
+            onClick: () => onChange(void 0),
+            children: "Remove"
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsx(
+      ImageUploadDialog,
+      {
+        title: `Choose ${label.toLowerCase()}`,
+        description: "Upload an image or select one from your library.",
+        onSelect: (selected) => {
+          const selMedia = selected.media;
+          const mediaLitId = selMedia?.mediaLitId ?? selMedia?.mediaId ?? void 0;
+          onChange({
+            ...mediaLitId ? { mediaId: mediaLitId, mediaLitId } : {},
+            url: selected.src,
+            file: selected.src,
+            thumbnailUrl: selMedia?.thumbnailUrl ?? selected.src,
+            thumbnail: selMedia?.thumbnailUrl ?? selected.src,
+            alt: selected.alt
+          });
+        },
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-border bg-muted/20 py-3 text-xs font-medium text-muted-foreground transition-colors hover:border-primary/40 hover:bg-muted/40 hover:text-foreground",
+            children: [
+              /* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4" }),
+              "Upload or choose image"
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        className: "h-9 rounded-lg border border-input bg-muted/20 px-3 py-2 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground/70 focus:border-ring focus:bg-background focus:ring-2 focus:ring-ring/20",
+        value: imageUrl ?? "",
+        placeholder,
+        onChange: (e) => onChange(
+          e.target.value ? { url: e.target.value, file: e.target.value } : void 0
+        )
+      }
+    )
+  ] });
+}
+var CORNER_LABELS = {
+  0: "Square",
+  1: "Small",
+  2: "Default",
+  3: "Medium",
+  4: "Large",
+  5: "XL",
+  6: "2XL",
+  7: "3XL",
+  8: "Full"
+};
 function HeaderEditor({
   settings,
   onChange
@@ -417,12 +554,11 @@ function HeaderEditor({
         }
       ),
       /* @__PURE__ */ jsx(
-        TextField,
+        ImageField,
         {
-          label: "Logo image URL",
-          value: settings.logoImage,
-          placeholder: "https://...",
-          onChange: (logoImage) => update({ logoImage })
+          label: "Logo image",
+          value: settings.logoImage ? typeof settings.logoImage === "string" ? { url: settings.logoImage, file: settings.logoImage } : settings.logoImage : void 0,
+          onChange: (media) => update({ logoImage: getMediaUrl(media) || void 0 })
         }
       )
     ] }),
@@ -526,10 +662,32 @@ function HeaderEditor({
     ] })
   ] });
 }
+function HeaderDesignEditor({
+  settings,
+  onChange
+}) {
+  const update = (partial) => onChange({ ...settings, ...partial });
+  const logoCorners = settings.logoCorners ?? settings.logoRadius ?? 2;
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsx(FieldGroup, { title: "Logo styling", children: /* @__PURE__ */ jsx(
+    SliderField,
+    {
+      label: "Logo corners",
+      value: logoCorners,
+      min: 0,
+      max: 8,
+      step: 1,
+      minLabel: "0 (Square)",
+      maxLabel: "Full",
+      displayValue: CORNER_LABELS[logoCorners] ?? `${logoCorners}`,
+      onChange: (val) => update({ logoCorners: val })
+    }
+  ) }) });
+}
 
 // src/blocks/header/defaults.ts
 var headerDefaults = {
   logoText: "FrontLit",
+  logoCorners: 2,
   links: [
     { id: generateUniqueId(), label: "Features", href: "/#features" },
     { id: generateUniqueId(), label: "Pricing", href: "/#pricing" },
@@ -552,6 +710,7 @@ var Header = {
   metadata: headerMetadata,
   widget: HeaderWidget,
   editor: HeaderEditor,
+  designEditor: HeaderDesignEditor,
   getDefaultSettings: () => headerDefaults,
   layouts: [
     { id: "fixed", name: "Fixed" },
@@ -604,7 +763,8 @@ function HeroWidget({
   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 hasHeroGraphic = youtubeLink || media && media.mediaId;
+  const mediaUrl = getMediaUrl(media);
+  const hasHeroGraphic = Boolean(youtubeLink || mediaUrl);
   const direction = alignment === "right" ? "md:!flex-row-reverse" : "md:!flex-row";
   const isCentered = layout === "centered" || layout === "media-below";
   const graphic = hasHeroGraphic && /* @__PURE__ */ jsx(
@@ -614,15 +774,15 @@ function HeroWidget({
       children: isVideo(youtubeLink, media) ? /* @__PURE__ */ jsx(
         VideoWithPreview,
         {
-          videoUrl: youtubeLink || media?.file || "",
-          title: media?.caption || "",
-          thumbnailUrl: media?.thumbnail || ""
+          videoUrl: youtubeLink || mediaUrl || "",
+          title: getMediaAlt(media) || media?.caption || "",
+          thumbnailUrl: media?.thumbnail || media?.thumbnailUrl || ""
         }
       ) : /* @__PURE__ */ jsx(
         Image,
         {
-          src: media?.file || "",
-          alt: media?.caption || "",
+          src: mediaUrl || "",
+          alt: getMediaAlt(media),
           borderRadius: mediaRadius
         }
       )
@@ -636,14 +796,7 @@ function HeroWidget({
         isCentered || contentAlignment === "center" ? "items-center text-center" : "items-start justify-center h-full"
       ),
       children: [
-        preTitle && /* @__PURE__ */ jsx(
-          Preheader,
-          {
-            theme: overriddenTheme,
-            className: "text-muted-foreground",
-            children: preTitle
-          }
-        ),
+        preTitle && /* @__PURE__ */ jsx(Preheader, { theme: overriddenTheme, className: "text-muted-foreground", children: preTitle }),
         /* @__PURE__ */ jsx(Header1, { theme: overriddenTheme, children: title }),
         description && /* @__PURE__ */ jsx(Subheader1, { theme: overriddenTheme, component: "span", children: /* @__PURE__ */ jsx(TextRenderer, { json: description, theme: overriddenTheme }) }),
         /* @__PURE__ */ jsxs(
@@ -654,14 +807,7 @@ function HeroWidget({
               (isCentered || contentAlignment === "center") && "md:!justify-center"
             ),
             children: [
-              buttonAction && buttonCaption && /* @__PURE__ */ jsx(NavLink, { href: buttonAction, children: /* @__PURE__ */ jsx(
-                Button2,
-                {
-                  theme: overriddenTheme,
-                  className: "w-full md:min-w-[150px]",
-                  children: buttonCaption
-                }
-              ) }),
+              buttonAction && buttonCaption && /* @__PURE__ */ jsx(NavLink, { href: buttonAction, children: /* @__PURE__ */ jsx(Button2, { theme: overriddenTheme, className: "w-full md:min-w-[150px]", children: buttonCaption }) }),
               secondaryButtonAction && secondaryButtonCaption && /* @__PURE__ */ jsx(NavLink, { href: secondaryButtonAction, children: /* @__PURE__ */ jsx(
                 Button2,
                 {
@@ -702,10 +848,7 @@ function HeroWidget({
     }
   );
 }
-function HeroEditor({
-  settings,
-  onChange
-}) {
+function HeroEditor({ settings, onChange }) {
   const update = (partial) => onChange({ ...settings, ...partial });
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ jsxs(FieldGroup, { title: "Content", children: [
@@ -741,14 +884,11 @@ function HeroEditor({
     ] }),
     /* @__PURE__ */ jsxs(FieldGroup, { title: "Media", children: [
       /* @__PURE__ */ jsx(
-        TextField,
+        ImageField,
         {
-          label: "Image URL",
-          value: settings.media?.file,
-          placeholder: "https://...",
-          onChange: (file) => update({
-            media: file ? { mediaId: file, file } : void 0
-          })
+          label: "Image",
+          value: settings.media,
+          onChange: (media) => update({ media })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -889,7 +1029,9 @@ function ContentWidget({
   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 hasMedia = Boolean(media && media.file);
+  const mediaUrl = getMediaUrl(media);
+  const mediaAlt = getMediaAlt(media);
+  const hasMedia = Boolean(mediaUrl);
   const sideBySide = layout !== "stacked" && layout !== "overlay";
   const direction = alignment === "right" ? "md:!flex-row-reverse" : "md:!flex-row";
   if (layout === "overlay") {
@@ -905,8 +1047,8 @@ function ContentWidget({
           hasMedia && /* @__PURE__ */ jsx(
             Image,
             {
-              src: media?.file || "",
-              alt: media?.caption || "",
+              src: mediaUrl || "",
+              alt: mediaAlt,
               width: "w-full",
               height: "h-full",
               className: "absolute inset-0",
@@ -923,13 +1065,7 @@ function ContentWidget({
               ),
               children: /* @__PURE__ */ jsxs("div", { className: "max-w-lg text-white", children: [
                 title && /* @__PURE__ */ jsx(Header2, { theme: overriddenTheme, children: title }),
-                body && /* @__PURE__ */ jsx(
-                  TextRenderer,
-                  {
-                    json: body,
-                    theme: overriddenTheme
-                  }
-                )
+                body && /* @__PURE__ */ jsx(TextRenderer, { json: body, theme: overriddenTheme })
               ] })
             }
           )
@@ -944,59 +1080,35 @@ function ContentWidget({
       id: cssId,
       background,
       nextTheme,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: clsx3("flex flex-col gap-8", sideBySide && direction),
-          children: [
-            hasMedia && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: clsx3(
-                  "flex w-full items-center",
-                  sideBySide && "md:w-1/2"
-                ),
-                children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: `w-full overflow-hidden ${roundedMap2[mediaRadius] ?? "rounded-md"}`,
-                    children: /* @__PURE__ */ jsx(
-                      Image,
-                      {
-                        src: media?.file || "",
-                        alt: media?.caption || "",
-                        borderRadius: mediaRadius
-                      }
-                    )
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
+      children: /* @__PURE__ */ jsxs("div", { className: clsx3("flex flex-col gap-8", sideBySide && direction), children: [
+        hasMedia && /* @__PURE__ */ jsx("div", { className: clsx3("flex w-full items-center", sideBySide && "md:w-1/2"), children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `w-full overflow-hidden ${roundedMap2[mediaRadius] ?? "rounded-md"}`,
+            children: /* @__PURE__ */ jsx(
+              Image,
               {
-                className: clsx3(
-                  "w-full",
-                  hasMedia && sideBySide && "md:w-1/2"
-                ),
-                children: /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: clsx3(
-                      "flex h-full flex-col justify-center gap-4",
-                      headerAlignment === "center" ? "items-center text-center" : "items-start"
-                    ),
-                    children: [
-                      title && /* @__PURE__ */ jsx(Header2, { theme: overriddenTheme, children: title }),
-                      body && /* @__PURE__ */ jsx(TextRenderer, { json: body, theme: overriddenTheme })
-                    ]
-                  }
-                )
+                src: mediaUrl || "",
+                alt: mediaAlt,
+                borderRadius: mediaRadius
               }
             )
-          ]
-        }
-      )
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: clsx3("w-full", hasMedia && sideBySide && "md:w-1/2"), children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx3(
+              "flex h-full flex-col justify-center gap-4",
+              headerAlignment === "center" ? "items-center text-center" : "items-start"
+            ),
+            children: [
+              title && /* @__PURE__ */ jsx(Header2, { theme: overriddenTheme, children: title }),
+              body && /* @__PURE__ */ jsx(TextRenderer, { json: body, theme: overriddenTheme })
+            ]
+          }
+        ) })
+      ] })
     }
   );
 }
@@ -1029,14 +1141,11 @@ function ContentEditor({
     ] }),
     /* @__PURE__ */ jsxs(FieldGroup, { title: "Media", children: [
       /* @__PURE__ */ jsx(
-        TextField,
+        ImageField,
         {
-          label: "Image URL",
-          value: settings.media?.file,
-          placeholder: "https://...",
-          onChange: (file) => update({
-            media: file ? { mediaId: file, file } : void 0
-          })
+          label: "Image",
+          value: settings.media,
+          onChange: (media) => update({ media })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -1161,13 +1270,7 @@ function FeaturedWidget({
             ),
             children: [
               /* @__PURE__ */ jsx(Header1, { theme: overriddenTheme, children: title }),
-              description && /* @__PURE__ */ jsx(Subheader1, { theme: overriddenTheme, component: "span", children: /* @__PURE__ */ jsx(
-                TextRenderer,
-                {
-                  json: description,
-                  theme: overriddenTheme
-                }
-              ) })
+              description && /* @__PURE__ */ jsx(Subheader1, { theme: overriddenTheme, component: "span", children: /* @__PURE__ */ jsx(TextRenderer, { json: description, theme: overriddenTheme }) })
             ]
           }
         ),
@@ -1215,13 +1318,7 @@ function FeaturedWidget({
                         ),
                         children: [
                           /* @__PURE__ */ jsx(Header4, { theme: overriddenTheme, children: item.title }),
-                          item.description && layout !== "compact" && /* @__PURE__ */ jsx(
-                            Text2,
-                            {
-                              theme: overriddenTheme,
-                              children: item.description
-                            }
-                          )
+                          item.description && layout !== "compact" && /* @__PURE__ */ jsx(Text2, { theme: overriddenTheme, children: item.description })
                         ]
                       }
                     )
@@ -1430,19 +1527,10 @@ function FaqWidget({
                     {
                       type: "button",
                       className: "flex w-full items-center justify-between gap-4 text-left",
-                      onClick: () => setExpandedIndex(
-                        isOpen ? null : index
-                      ),
+                      onClick: () => setExpandedIndex(isOpen ? null : index),
                       "aria-expanded": isOpen,
                       children: [
-                        /* @__PURE__ */ jsx(
-                          Text1,
-                          {
-                            theme: overriddenTheme,
-                            className: "font-medium",
-                            children: item.question
-                          }
-                        ),
+                        /* @__PURE__ */ jsx(Text1, { theme: overriddenTheme, className: "font-medium", children: item.question }),
                         /* @__PURE__ */ jsx(
                           ChevronDown,
                           {
@@ -1455,14 +1543,7 @@ function FaqWidget({
                       ]
                     }
                   ),
-                  isOpen && /* @__PURE__ */ jsx("div", { className: "pt-3", children: /* @__PURE__ */ jsx(
-                    Text1,
-                    {
-                      theme: overriddenTheme,
-                      className: "text-muted-foreground",
-                      children: item.answer
-                    }
-                  ) })
+                  isOpen && /* @__PURE__ */ jsx("div", { className: "pt-3", children: /* @__PURE__ */ jsx(Text1, { theme: overriddenTheme, className: "text-muted-foreground", children: item.answer }) })
                 ]
               },
               item.id
@@ -1473,21 +1554,15 @@ function FaqWidget({
             const left = items.slice(0, half);
             const right = items.slice(half);
             return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-x-10 md:grid-cols-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: left.map(
-                (item, i) => renderItem(item, i)
-              ) }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: right.map(
-                (item, i) => renderItem(item, half + i)
-              ) })
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: left.map((item, i) => renderItem(item, i)) }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: right.map((item, i) => renderItem(item, half + i)) })
             ] });
           }
           return /* @__PURE__ */ jsx(
             "div",
             {
               className: layout === "cards" ? "flex flex-col gap-3" : "flex flex-col divide-y divide-border border-b border-t border-border",
-              children: items.map(
-                (item, index) => renderItem(item, index)
-              )
+              children: items.map((item, index) => renderItem(item, index))
             }
           );
         })()
@@ -1495,10 +1570,7 @@ function FaqWidget({
     }
   );
 }
-function FaqEditor({
-  settings,
-  onChange
-}) {
+function FaqEditor({ settings, onChange }) {
   const update = (partial) => onChange({ ...settings, ...partial });
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ jsxs(FieldGroup, { title: "Header", children: [
@@ -1651,13 +1723,7 @@ function PricingWidget({
             ),
             children: [
               /* @__PURE__ */ jsx(Header1, { theme: overriddenTheme, children: title }),
-              description && /* @__PURE__ */ jsx(Subheader1, { theme: overriddenTheme, component: "span", children: /* @__PURE__ */ jsx(
-                TextRenderer,
-                {
-                  json: description,
-                  theme: overriddenTheme
-                }
-              ) })
+              description && /* @__PURE__ */ jsx(Subheader1, { theme: overriddenTheme, component: "span", children: /* @__PURE__ */ jsx(TextRenderer, { json: description, theme: overriddenTheme }) })
             ]
           }
         ),
@@ -1685,32 +1751,16 @@ function PricingWidget({
                       ] }),
                       /* @__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,
+                      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,
                         {
-                          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
-                            }
-                          )
+                          theme: overriddenTheme,
+                          variant: tier.highlighted ? "default" : "secondary",
+                          className: "w-full",
+                          children: tier.buttonCaption
                         }
-                      )
+                      ) })
                     ]
                   }
                 )
@@ -1873,12 +1923,7 @@ var pricingDefaults = {
       name: "Pro",
       price: "$29/mo",
       description: "For growing businesses that need more.",
-      features: [
-        "5 websites",
-        "Custom domain",
-        "Blog + Email",
-        "Priority support"
-      ],
+      features: ["5 websites", "Custom domain", "Blog + Email", "Priority support"],
       buttonCaption: "Talk to us",
       buttonAction: "/help",
       highlighted: true
@@ -1956,14 +2001,7 @@ function BannerWidget({
         !isSplit && isCentered ? "md:!justify-center" : ""
       ),
       children: [
-        buttonAction && buttonCaption && /* @__PURE__ */ jsx(NavLink, { href: buttonAction, children: /* @__PURE__ */ jsx(
-          Button2,
-          {
-            theme: overriddenTheme,
-            className: "w-full md:min-w-[150px]",
-            children: buttonCaption
-          }
-        ) }),
+        buttonAction && buttonCaption && /* @__PURE__ */ jsx(NavLink, { href: buttonAction, children: /* @__PURE__ */ jsx(Button2, { theme: overriddenTheme, className: "w-full md:min-w-[150px]", children: buttonCaption }) }),
         secondaryButtonAction && secondaryButtonCaption && /* @__PURE__ */ jsx(NavLink, { href: secondaryButtonAction, children: /* @__PURE__ */ jsx(
           Button2,
           {
@@ -2196,20 +2234,7 @@ function EmailFormWidget({
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
                 /* @__PURE__ */ jsx(Header1, { theme: overriddenTheme, className: "text-xl", children: title }),
-                description && /* @__PURE__ */ jsx(
-                  Subheader1,
-                  {
-                    theme: overriddenTheme,
-                    component: "span",
-                    children: /* @__PURE__ */ jsx(
-                      TextRenderer,
-                      {
-                        json: description,
-                        theme: overriddenTheme
-                      }
-                    )
-                  }
-                )
+                description && /* @__PURE__ */ jsx(Subheader1, { theme: overriddenTheme, component: "span", children: /* @__PURE__ */ jsx(TextRenderer, { json: description, theme: overriddenTheme }) })
               ] }),
               success ? /* @__PURE__ */ jsx(Text2, { theme: overriddenTheme, children: successMessage }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2 sm:!flex-row md:w-auto md:shrink-0", children: [
                 /* @__PURE__ */ jsx(
@@ -2254,10 +2279,7 @@ function EmailFormWidget({
           onSubmit,
           className: clsx3(
             "flex gap-4",
-            layout === "split" ? "flex-col md:!flex-row md:items-center md:justify-between md:gap-10" : clsx3(
-              "flex-col",
-              isCentered ? "items-center text-center" : "items-start"
-            )
+            layout === "split" ? "flex-col md:!flex-row md:items-center md:justify-between md:gap-10" : clsx3("flex-col", isCentered ? "items-center text-center" : "items-start")
           ),
           children: [
             /* @__PURE__ */ jsxs(
@@ -2269,13 +2291,7 @@ function EmailFormWidget({
                 ),
                 children: [
                   /* @__PURE__ */ jsx(Header1, { theme: overriddenTheme, children: title }),
-                  description && /* @__PURE__ */ jsx(Subheader1, { theme: overriddenTheme, component: "span", children: /* @__PURE__ */ jsx(
-                    TextRenderer,
-                    {
-                      json: description,
-                      theme: overriddenTheme
-                    }
-                  ) })
+                  description && /* @__PURE__ */ jsx(Subheader1, { theme: overriddenTheme, component: "span", children: /* @__PURE__ */ jsx(TextRenderer, { json: description, theme: overriddenTheme }) })
                 ]
               }
             ),
@@ -2475,9 +2491,7 @@ function SupportFormWidget({
   const [message, setMessage] = useState("");
   const [email, setEmail] = useState("");
   const [name, setName] = useState("");
-  const [suggestions, setSuggestions] = useState(
-    []
-  );
+  const [suggestions, setSuggestions] = useState([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [success, setSuccess] = useState(false);
   const debounceRef = useRef(null);
@@ -2533,134 +2547,121 @@ function SupportFormWidget({
             ),
             children: [
               /* @__PURE__ */ jsx(Header1, { theme: overriddenTheme, children: title }),
-              description && /* @__PURE__ */ jsx(Subheader1, { theme: overriddenTheme, component: "span", children: /* @__PURE__ */ jsx(
-                TextRenderer,
-                {
-                  json: description,
-                  theme: overriddenTheme
-                }
-              ) })
+              description && /* @__PURE__ */ jsx(Subheader1, { theme: overriddenTheme, component: "span", children: /* @__PURE__ */ jsx(TextRenderer, { json: description, theme: overriddenTheme }) })
             ]
           }
         ),
-        success ? /* @__PURE__ */ jsx(Text2, { theme: overriddenTheme, className: "mt-4", children: successMessage }) : /* @__PURE__ */ jsxs(
-          "form",
-          {
-            onSubmit,
-            className: "mt-4 flex w-full max-w-lg flex-col gap-3",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 items-start", children: [
-                /* @__PURE__ */ jsx(Label, { theme: overriddenTheme, htmlFor: "subject", children: "Subject" }),
-                /* @__PURE__ */ jsx(
-                  Input,
+        success ? /* @__PURE__ */ jsx(Text2, { theme: overriddenTheme, className: "mt-4", children: successMessage }) : /* @__PURE__ */ jsxs("form", { onSubmit, className: "mt-4 flex w-full max-w-lg flex-col gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 items-start", children: [
+            /* @__PURE__ */ jsx(Label, { theme: overriddenTheme, htmlFor: "subject", children: "Subject" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                theme: overriddenTheme,
+                id: "subject",
+                value: subject,
+                onChange: (e) => setSubject(e.target.value),
+                placeholder: "What do you need help with?",
+                required: true,
+                className: "w-full"
+              }
+            )
+          ] }),
+          suggestions.length > 0 && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "rounded-lg border border-border bg-card p-3 text-sm text-card-foreground shadow-sm",
+                cardStyles.border?.width,
+                cardStyles.border?.radius,
+                cardStyles.border?.style,
+                cardStyles.shadow
+              ),
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "mb-1 font-medium", children: "This might help:" }),
+                /* @__PURE__ */ jsx("ul", { className: "list-inside list-disc", children: suggestions.map((doc) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                  "a",
                   {
-                    theme: overriddenTheme,
-                    id: "subject",
-                    value: subject,
-                    onChange: (e) => setSubject(e.target.value),
-                    placeholder: "What do you need help with?",
-                    required: true,
-                    className: "w-full"
+                    href: suggestionHref(doc),
+                    target: "_blank",
+                    rel: "noreferrer",
+                    className: "underline",
+                    children: doc.title ?? doc.slug
                   }
+                ) }, doc.documentId)) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 items-start", children: [
+            /* @__PURE__ */ jsx(Label, { theme: overriddenTheme, htmlFor: "message", children: "Message" }),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                id: "message",
+                value: message,
+                onChange: (e) => setMessage(e.target.value),
+                placeholder: "Describe the issue\u2026",
+                required: true,
+                rows: 4,
+                className: cn(
+                  "w-full border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  inputTypography.fontFamily,
+                  inputTypography.fontSize,
+                  inputTypography.fontWeight,
+                  inputTypography.lineHeight,
+                  inputTypography.letterSpacing,
+                  inputStyles.border?.width,
+                  inputStyles.border?.style,
+                  inputStyles.border?.radius,
+                  inputStyles.shadow,
+                  inputStyles.custom
                 )
-              ] }),
-              suggestions.length > 0 && /* @__PURE__ */ jsxs(
-                "div",
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:!flex-row", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-1 items-start", children: [
+              /* @__PURE__ */ jsx(Label, { theme: overriddenTheme, htmlFor: "email", children: "Email" }),
+              /* @__PURE__ */ jsx(
+                Input,
                 {
-                  className: cn(
-                    "rounded-lg border border-border bg-card p-3 text-sm text-card-foreground shadow-sm",
-                    cardStyles.border?.width,
-                    cardStyles.border?.radius,
-                    cardStyles.border?.style,
-                    cardStyles.shadow
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx("p", { className: "mb-1 font-medium", children: "This might help:" }),
-                    /* @__PURE__ */ jsx("ul", { className: "list-inside list-disc", children: suggestions.map((doc) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-                      "a",
-                      {
-                        href: suggestionHref(doc),
-                        target: "_blank",
-                        rel: "noreferrer",
-                        className: "underline",
-                        children: doc.title ?? doc.slug
-                      }
-                    ) }, doc.documentId)) })
-                  ]
+                  theme: overriddenTheme,
+                  id: "email",
+                  type: "email",
+                  value: email,
+                  onChange: (e) => setEmail(e.target.value),
+                  placeholder: "you@example.com",
+                  required: true,
+                  className: "w-full"
                 }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 items-start", children: [
-                /* @__PURE__ */ jsx(Label, { theme: overriddenTheme, htmlFor: "message", children: "Message" }),
-                /* @__PURE__ */ jsx(
-                  "textarea",
-                  {
-                    id: "message",
-                    value: message,
-                    onChange: (e) => setMessage(e.target.value),
-                    placeholder: "Describe the issue\u2026",
-                    required: true,
-                    rows: 4,
-                    className: cn(
-                      "w-full border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                      inputTypography.fontFamily,
-                      inputTypography.fontSize,
-                      inputTypography.fontWeight,
-                      inputTypography.lineHeight,
-                      inputTypography.letterSpacing,
-                      inputStyles.border?.width,
-                      inputStyles.border?.style,
-                      inputStyles.border?.radius,
-                      inputStyles.shadow,
-                      inputStyles.custom
-                    )
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:!flex-row", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-1 items-start", children: [
-                  /* @__PURE__ */ jsx(Label, { theme: overriddenTheme, htmlFor: "email", children: "Email" }),
-                  /* @__PURE__ */ jsx(
-                    Input,
-                    {
-                      theme: overriddenTheme,
-                      id: "email",
-                      type: "email",
-                      value: email,
-                      onChange: (e) => setEmail(e.target.value),
-                      placeholder: "you@example.com",
-                      required: true,
-                      className: "w-full"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-1 items-start", children: [
-                  /* @__PURE__ */ jsx(Label, { theme: overriddenTheme, htmlFor: "name", children: "Name (optional)" }),
-                  /* @__PURE__ */ jsx(
-                    Input,
-                    {
-                      theme: overriddenTheme,
-                      id: "name",
-                      value: name,
-                      onChange: (e) => setName(e.target.value),
-                      placeholder: "Your name",
-                      className: "w-full"
-                    }
-                  )
-                ] })
-              ] }),
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-1 items-start", children: [
+              /* @__PURE__ */ jsx(Label, { theme: overriddenTheme, htmlFor: "name", children: "Name (optional)" }),
               /* @__PURE__ */ jsx(
-                Button2,
+                Input,
                 {
                   theme: overriddenTheme,
-                  type: "submit",
-                  disabled: !editing && (isSubmitting || !subject || !message || !email),
-                  className: "self-start",
-                  children: buttonCaption
+                  id: "name",
+                  value: name,
+                  onChange: (e) => setName(e.target.value),
+                  placeholder: "Your name",
+                  className: "w-full"
                 }
               )
-            ]
-          }
-        )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button2,
+            {
+              theme: overriddenTheme,
+              type: "submit",
+              disabled: !editing && (isSubmitting || !subject || !message || !email),
+              className: "self-start",
+              children: buttonCaption
+            }
+          )
+        ] })
       ]
     }
   );
@@ -2787,14 +2788,7 @@ function FooterWidget({
                 {
                   href: link.href,
                   className: "no-underline",
-                  children: /* @__PURE__ */ jsx(
-                    Link,
-                    {
-                      theme: overriddenTheme,
-                      className: "text-xs",
-                      children: link.label
-                    }
-                  )
+                  children: /* @__PURE__ */ jsx(Link, { theme: overriddenTheme, className: "text-xs", children: link.label })
                 },
                 `${column.id}-${link.id}`
               ))
@@ -2812,14 +2806,7 @@ function FooterWidget({
               {
                 href: link.href,
                 className: "no-underline",
-                children: /* @__PURE__ */ jsx(
-                  Link,
-                  {
-                    theme: overriddenTheme,
-                    className: "text-xs",
-                    children: link.label
-                  }
-                )
+                children: /* @__PURE__ */ jsx(Link, { theme: overriddenTheme, className: "text-xs", children: link.label })
               },
               `${column.id}-${link.id}`
             ))
@@ -2829,39 +2816,10 @@ function FooterWidget({
             logoText && /* @__PURE__ */ jsx(Header3, { theme: overriddenTheme, children: logoText }),
             tagline && /* @__PURE__ */ jsx(Text2, { theme: overriddenTheme, children: tagline })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-wrap gap-8 lg:!flex-row", children: columns.map((column) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "flex flex-col gap-3 lg:min-w-[140px]",
-              children: [
-                /* @__PURE__ */ jsx(
-                  Header4,
-                  {
-                    theme: overriddenTheme,
-                    className: "text-sm",
-                    children: column.title
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: column.links.map((link) => /* @__PURE__ */ jsx(
-                  NavLink,
-                  {
-                    href: link.href,
-                    className: "no-underline",
-                    children: /* @__PURE__ */ jsx(
-                      Link,
-                      {
-                        theme: overriddenTheme,
-                        className: "text-xs",
-                        children: link.label
-                      }
-                    )
-                  },
-                  link.id
-                )) })
-              ]
-            },
-            column.id
-          )) })
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-wrap gap-8 lg:!flex-row", children: columns.map((column) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 lg:min-w-[140px]", children: [
+            /* @__PURE__ */ jsx(Header4, { theme: overriddenTheme, className: "text-sm", children: column.title }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: column.links.map((link) => /* @__PURE__ */ jsx(NavLink, { href: link.href, className: "no-underline", children: /* @__PURE__ */ jsx(Link, { theme: overriddenTheme, className: "text-xs", children: link.label }) }, link.id)) })
+          ] }, column.id)) })
         ] }),
         copyrightText && layout !== "minimal" && /* @__PURE__ */ jsx(
           "div",
@@ -3056,14 +3014,7 @@ var richTextMetadata = {
   compatibleWith: ["site", "landing", "blog", "post", "custom"]
 };
 function RichTextWidget({
-  settings: {
-    text,
-    alignment = "left",
-    cssId,
-    maxWidth,
-    verticalPadding,
-    background
-  },
+  settings: { text, alignment = "left", cssId, maxWidth, verticalPadding, background },
   state: { theme },
   nextTheme
 }) {
@@ -3155,7 +3106,9 @@ function resolveIcon2(name) {
 }
 function GridItemCard({ item, theme }) {
   const Icon = resolveIcon2(item.icon);
-  const hasMedia = Boolean(item.media?.file);
+  const mediaUrl = getMediaUrl(item.media);
+  const mediaAlt = getMediaAlt(item.media);
+  const hasMedia = Boolean(mediaUrl);
   const isOverlay = item.mediaAlignment === "overlay";
   const mediaFirst = item.mediaAlignment !== "bottom";
   if (isOverlay) {
@@ -3163,8 +3116,8 @@ function GridItemCard({ item, theme }) {
       hasMedia && /* @__PURE__ */ jsx(
         Image,
         {
-          src: item.media?.file || "",
-          alt: item.media?.caption || "",
+          src: mediaUrl || "",
+          alt: mediaAlt,
           className: "absolute inset-0",
           width: "w-full",
           height: "h-full",
@@ -3177,32 +3130,19 @@ function GridItemCard({ item, theme }) {
     ] }) });
     return item.buttonAction ? /* @__PURE__ */ jsx(NavLink, { href: item.buttonAction, className: "block", children: card }) : card;
   }
-  const media = hasMedia ? /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(
-    Image,
-    {
-      src: item.media?.file || "",
-      alt: item.media?.caption || ""
-    }
-  ) }) : Icon ? /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" }) }) : null;
+  const media = hasMedia ? /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(Image, { src: mediaUrl || "", alt: mediaAlt }) }) : Icon ? /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" }) }) : null;
   const text = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsx(Header4, { theme, children: item.title }),
     item.description && /* @__PURE__ */ jsx(Text2, { theme, children: item.description }),
     item.buttonAction && item.buttonCaption && /* @__PURE__ */ jsx(NavLink, { href: item.buttonAction, className: "mt-2", children: /* @__PURE__ */ jsx(Button2, { theme, variant: "secondary", size: "sm", children: item.buttonCaption }) })
   ] });
-  return /* @__PURE__ */ jsx(PageCard, { theme, children: /* @__PURE__ */ jsx(
-    PageCardContent,
-    {
-      theme,
-      className: "flex h-full flex-col gap-3",
-      children: mediaFirst ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        media,
-        text
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        text,
-        media
-      ] })
-    }
-  ) });
+  return /* @__PURE__ */ jsx(PageCard, { theme, children: /* @__PURE__ */ jsx(PageCardContent, { theme, className: "flex h-full flex-col gap-3", children: mediaFirst ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    media,
+    text
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    text,
+    media
+  ] }) }) });
 }
 function GridWidget({
   settings: {
@@ -3241,13 +3181,7 @@ function GridWidget({
             ),
             children: [
               /* @__PURE__ */ jsx(Header1, { theme: overriddenTheme, children: title }),
-              description && /* @__PURE__ */ jsx(Subheader1, { theme: overriddenTheme, component: "span", children: /* @__PURE__ */ jsx(
-                TextRenderer,
-                {
-                  json: description,
-                  theme: overriddenTheme
-                }
-              ) }),
+              description && /* @__PURE__ */ jsx(Subheader1, { theme: overriddenTheme, component: "span", children: /* @__PURE__ */ jsx(TextRenderer, { json: description, theme: overriddenTheme }) }),
               buttonAction && buttonCaption && /* @__PURE__ */ jsx(NavLink, { href: buttonAction, className: "mt-2", children: /* @__PURE__ */ jsx(Button2, { theme: overriddenTheme, children: buttonCaption }) })
             ]
           }
@@ -3259,24 +3193,14 @@ function GridWidget({
               "grid grid-cols-1 md:grid-cols-2 gap-6 items-stretch",
               columns === 3 ? "lg:grid-cols-3" : "lg:grid-cols-2"
             ),
-            children: items.map((item, index) => /* @__PURE__ */ jsx(
-              GridItemCard,
-              {
-                item,
-                theme: overriddenTheme
-              },
-              index
-            ))
+            children: items.map((item, index) => /* @__PURE__ */ jsx(GridItemCard, { item, theme: overriddenTheme }, index))
           }
         )
       ] })
     }
   );
 }
-function GridEditor({
-  settings,
-  onChange
-}) {
+function GridEditor({ settings, onChange }) {
   const update = (partial) => onChange({ ...settings, ...partial });
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ jsxs(FieldGroup, { title: "Header", children: [
@@ -3381,14 +3305,11 @@ function GridEditor({
               }
             ),
             /* @__PURE__ */ jsx(
-              TextField,
+              ImageField,
               {
-                label: "Image URL (overrides icon)",
-                value: item.media?.file,
-                placeholder: "https://...",
-                onChange: (file) => updateItem({
-                  media: file ? { mediaId: file, file } : void 0
-                })
+                label: "Image (overrides icon)",
+                value: item.media,
+                onChange: (media) => updateItem({ media })
               }
             ),
             /* @__PURE__ */ jsx(
@@ -3538,17 +3459,17 @@ function MediaWidget({
           children: isVideoContent ? /* @__PURE__ */ jsx(
             VideoWithPreview,
             {
-              videoUrl: youtubeLink || media?.file || "",
-              title: media?.caption || "",
-              thumbnailUrl: media?.thumbnail || "",
+              videoUrl: youtubeLink || getMediaUrl(media) || "",
+              title: getMediaAlt(media) || media?.caption || "",
+              thumbnailUrl: media?.thumbnail || media?.thumbnailUrl || "",
               aspectRatio,
               modal: playVideoInModal
             }
           ) : /* @__PURE__ */ jsx(
             Image,
             {
-              src: media?.file || "",
-              alt: media?.caption || "",
+              src: getMediaUrl(media) || "",
+              alt: getMediaAlt(media),
               objectFit,
               borderRadius: mediaRadius
             }
@@ -3558,23 +3479,17 @@ function MediaWidget({
     }
   );
 }
-function MediaEditor({
-  settings,
-  onChange
-}) {
+function MediaEditor({ settings, onChange }) {
   const update = (partial) => onChange({ ...settings, ...partial });
   const isVideoContent = isVideo(settings.youtubeLink, settings.media);
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ jsxs(FieldGroup, { title: "Media", children: [
       /* @__PURE__ */ jsx(
-        TextField,
+        ImageField,
         {
-          label: "Image URL",
-          value: settings.media?.file,
-          placeholder: "https://...",
-          onChange: (file) => update({
-            media: file ? { mediaId: file, file } : void 0
-          })
+          label: "Image / poster",
+          value: settings.media,
+          onChange: (media) => update({ media })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -3777,15 +3692,7 @@ function MarqueeWidget({
       background,
       nextTheme,
       children: /* @__PURE__ */ jsxs("div", { className: "relative", "aria-hidden": "true", children: [
-        /* @__PURE__ */ jsx(
-          MarqueeTrack,
-          {
-            speed,
-            direction,
-            pauseOnHover,
-            children: items.map(renderItem)
-          }
-        ),
+        /* @__PURE__ */ jsx(MarqueeTrack, { speed, direction, pauseOnHover, children: items.map(renderItem) }),
         fadeWidth > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -4078,10 +3985,7 @@ function EmbedWidget({
     }
   );
 }
-function EmbedEditor({
-  settings,
-  onChange
-}) {
+function EmbedEditor({ settings, onChange }) {
   const update = (partial) => onChange({ ...settings, ...partial });
   const contentType = settings.contentType ?? "url";
   const aspectRatio = settings.aspectRatio ?? "default";
@@ -4207,10 +4111,10 @@ function DataSlotWidget({
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("p", { className: "font-semibold text-foreground", children: "Data slot" }),
           /* @__PURE__ */ jsxs("p", { className: "mt-1 text-sm text-muted-foreground", children: [
-            "The embedding application resolves data for",
-            " ",
+            "The embedding application resolves data for ",
             String(slot || "this slot"),
-            " here."
+            " ",
+            "here."
           ] })
         ] })
       ] })
@@ -4225,5 +4129,5 @@ var DataSlot = {
 };
 
 export { Banner, Content, DataSlot, EmailForm, Embed, Faq, Featured, FieldGroup, Footer, Grid, Header, Hero, Marquee, MediaBlock, Pricing, RichText, SupportForm, TextField, ToggleField, generateUniqueId };
-//# sourceMappingURL=chunk-7KIX4WAO.js.map
-//# sourceMappingURL=chunk-7KIX4WAO.js.map
+//# sourceMappingURL=chunk-UO7XGBGM.js.map
+//# sourceMappingURL=chunk-UO7XGBGM.js.map