dune-react 0.0.16 → 0.0.19

package/dist/components/puck-block/hero-sections/video-hero-1/index.js

@@ -1,4 +1,4 @@
-import { image, contentFields } from "../../../puck-base/core/fields.js";
+import { images, contentFields } from "../../../puck-base/core/fields.js";
 import { VideoHero } from "./video-hero.js";
 import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
@@ -9,14 +9,14 @@ const conf = {
       label: "Video URL",
       ai: { instructions: "Direct URL to an MP4 video" }
     },
-    posterImage: image,
+    images: { ...images, max: 1 },
     styles: createStylesField()
   },
   defaultProps: {
     heading: "See what's possible",
     description: "Watch how leading teams use our platform to ship 10x faster.",
     buttons: [{ label: "Try It Free", icon: "move-right", variant: "default" }],
-    posterImage: { src: "https://images.pexels.com/photos/6985132/pexels-photo-6985132.jpeg?auto=compress&cs=tinysrgb&w=1920", alt: "Dark gradient background for product demo preview" },
+    images: [{ src: "https://images.pexels.com/photos/6985132/pexels-photo-6985132.jpeg?auto=compress&cs=tinysrgb&w=1920", alt: "Dark gradient background for product demo preview" }],
     styles: createStylesDefaults()
   },
   render: VideoHero

package/dist/components/puck-block/hero-sections/video-hero-1/video-hero.d.ts

@@ -2,14 +2,14 @@ import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundContentProps } from "@/components/puck-base/content";
 export interface VideoHeroProps extends CompoundContentProps {
     videoUrl?: string;
-    posterImage?: {
+    images?: {
         src: string;
-        alt: string;
-    };
+        alt?: string;
+    }[];
     styles?: {
         padding?: CompoundContainerProps["padding"];
         sectionStyle?: CompoundContainerProps["sectionStyle"];
         backgroundColor?: string;
     };
 }
-export declare const VideoHero: ({ badge, heading, description, buttons, videoUrl, posterImage, styles, }: VideoHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VideoHero: ({ badge, heading, description, buttons, videoUrl, images, styles, }: VideoHeroProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/hero-sections/video-hero-1/video-hero.js

@@ -7,36 +7,39 @@ const VideoHero = ({
   description,
   buttons,
   videoUrl,
-  posterImage,
+  images,
   styles
-}) => /* @__PURE__ */ jsx(
-  CompoundContainer,
-  {
-    padding: styles == null ? void 0 : styles.padding,
-    sectionStyle: styles == null ? void 0 : styles.sectionStyle,
-    backgroundColor: styles == null ? void 0 : styles.backgroundColor,
-    children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-12 lg:grid-cols-2", children: [
-      /* @__PURE__ */ jsx(
-        CompoundContent,
-        {
-          badge,
-          heading,
-          description,
-          buttons
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "border-border/20 overflow-hidden rounded-xl border bg-black/50", children: videoUrl ? /* @__PURE__ */ jsx(
-        "video",
-        {
-          src: videoUrl,
-          poster: posterImage == null ? void 0 : posterImage.src,
-          controls: true,
-          className: "aspect-video w-full object-cover"
-        }
-      ) : /* @__PURE__ */ jsx("div", { className: "flex aspect-video w-full items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "bg-primary/20 flex h-16 w-16 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx("span", { className: "text-primary text-2xl", children: "▶" }) }) }) })
-    ] })
-  }
-);
+}) => {
+  var _a;
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
+    {
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+      children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-12 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsx(
+          CompoundContent,
+          {
+            badge,
+            heading,
+            description,
+            buttons
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "border-border/20 overflow-hidden rounded-xl border bg-black/50", children: videoUrl ? /* @__PURE__ */ jsx(
+          "video",
+          {
+            src: videoUrl,
+            poster: (_a = images == null ? void 0 : images[0]) == null ? void 0 : _a.src,
+            controls: true,
+            className: "aspect-video w-full object-cover"
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "flex aspect-video w-full items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "bg-primary/20 flex h-16 w-16 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx("span", { className: "text-primary text-2xl", children: "▶" }) }) }) })
+      ] })
+    }
+  );
+};
 export {
   VideoHero
 };

package/dist/components/puck-block/location-sections/location-1/index.js

@@ -1,4 +1,4 @@
-import { button } from "../../../puck-base/core/fields.js";
+import { locationDefaults, button, location } from "../../../puck-base/core/fields.js";
 import { LocationSection } from "./location.js";
 import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const locationButtonFields = {
@@ -40,26 +40,24 @@ const conf = {
         { label: "Map Left / Text Right", value: "right" }
       ]
     },
-    mapEmbedUrl: { type: "text", label: "Google Map Embed URL" },
-    mapTitle: { type: "text", label: "Map Title" },
-    mapFilter: { type: "text", label: "Map Filter (CSS)" },
-    mapTintMode: {
-      type: "select",
-      label: "Map Tint Mode",
+    location,
+    mapStyle: {
+      type: "radio",
+      label: "Map Style",
+      options: [
+        { label: "Default", value: "default" },
+        { label: "Grayscale", value: "grayscale" },
+        { label: "Dark", value: "dark" }
+      ]
+    },
+    mapTint: {
+      type: "radio",
+      label: "Map Tint",
       options: [
         { label: "Theme", value: "theme" },
-        { label: "Custom", value: "custom" },
         { label: "None", value: "none" }
       ]
     },
-    mapTintColor: { type: "text", label: "Map Tint Color" },
-    mapTintOpacity: {
-      type: "number",
-      label: "Map Tint Opacity",
-      min: 0,
-      max: 1,
-      step: 0.01
-    },
     buttons: {
       type: "array",
       max: 3,
@@ -74,12 +72,9 @@ const conf = {
     description: "We have offices around the globe. Visit us or get in touch with a local team near you.",
     contentAlign: "left",
     contentPosition: "left",
-    mapEmbedUrl: "https://maps.google.com/maps?q=San%20Francisco%2C%20California%2C%20United%20States&z=13&t=m&output=embed",
-    mapTitle: "Google Maps",
-    mapFilter: "grayscale(45%) contrast(1.06) brightness(0.98) saturate(0.9)",
-    mapTintMode: "theme",
-    mapTintColor: "var(--primary)",
-    mapTintOpacity: 0.21,
+    location: locationDefaults,
+    mapStyle: "grayscale",
+    mapTint: "theme",
     buttons: [
       {
         label: "Contact us",

package/dist/components/puck-block/location-sections/location-1/location.d.ts

@@ -1,5 +1,6 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundButtonProps } from "@/components/puck-base/button";
+import type { MapLocation } from "@/components/puck-base/core/fields";
 interface LocationButton extends Omit<CompoundButtonProps, "label"> {
     label?: string;
     url?: string;
@@ -12,12 +13,9 @@ export interface LocationSectionProps {
     description?: string;
     contentAlign?: "left" | "right";
     contentPosition?: "left" | "right";
-    mapEmbedUrl?: string;
-    mapTitle?: string;
-    mapFilter?: string;
-    mapTintMode?: "theme" | "custom" | "none";
-    mapTintColor?: string;
-    mapTintOpacity?: number;
+    location?: MapLocation;
+    mapStyle?: "default" | "grayscale" | "dark";
+    mapTint?: "none" | "theme";
     buttons?: LocationButton[];
     styles?: {
         padding?: CompoundContainerProps["padding"];
@@ -25,5 +23,5 @@ export interface LocationSectionProps {
         backgroundColor?: string;
     };
 }
-export declare const LocationSection: ({ heading, description, contentAlign, contentPosition, mapEmbedUrl, mapTitle, mapFilter, mapTintMode, mapTintColor, mapTintOpacity, buttons, styles, }: LocationSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LocationSection: ({ heading, description, contentAlign, contentPosition, location: loc, mapStyle, mapTint, buttons, styles, }: LocationSectionProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/puck-block/location-sections/location-1/location.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { cn } from "../../../../utils/css-utils.js";
+import { getMapEmbedUrl } from "../../../puck-base/core/fields.js";
 const LocationActionButton = ({
   label,
   url,
@@ -35,24 +36,27 @@ const LocationActionButton = ({
     }
   ) });
 };
+const MAP_STYLE_FILTERS = {
+  default: "",
+  grayscale: "grayscale(45%) contrast(1.06) brightness(0.98) saturate(0.9)",
+  dark: "grayscale(100%) invert(1) contrast(1.1) brightness(0.8)"
+};
 const LocationSection = ({
   heading,
   description,
   contentAlign = "left",
   contentPosition = "left",
-  mapEmbedUrl,
-  mapTitle = "Google Maps",
-  mapFilter,
-  mapTintMode = "theme",
-  mapTintColor,
-  mapTintOpacity = 0.2,
+  location: loc,
+  mapStyle = "default",
+  mapTint = "theme",
   buttons = [],
   styles
 }) => {
   const isTextRight = contentAlign === "right";
   const isContentRight = contentPosition === "right";
-  const showMapTint = mapTintMode !== "none" && mapTintOpacity > 0;
-  const mapTintBackgroundColor = mapTintMode === "custom" ? mapTintColor || void 0 : void 0;
+  const showMapTint = mapTint === "theme";
+  const mapEmbedUrl = loc && loc.lat !== 0 ? getMapEmbedUrl(loc) : void 0;
+  const mapFilter = MAP_STYLE_FILTERS[mapStyle] || "";
   return /* @__PURE__ */ jsx(
     CompoundContainer,
     {
@@ -105,12 +109,12 @@ const LocationSection = ({
                 "iframe",
                 {
                   src: mapEmbedUrl,
-                  title: mapTitle,
+                  title: (loc == null ? void 0 : loc.address) || "Google Maps",
                   className: "h-full w-full border-0",
                   loading: "lazy",
                   referrerPolicy: "no-referrer-when-downgrade",
                   allowFullScreen: true,
-                  style: { filter: mapFilter }
+                  style: mapFilter ? { filter: mapFilter } : void 0
                 }
               ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center bg-muted text-muted-foreground", children: "Map address not configured" }),
               showMapTint ? /* @__PURE__ */ jsx(
@@ -118,8 +122,7 @@ const LocationSection = ({
                 {
                   className: "bg-primary pointer-events-none absolute inset-0",
                   style: {
-                    backgroundColor: mapTintBackgroundColor,
-                    opacity: mapTintOpacity,
+                    opacity: 0.2,
                     mixBlendMode: "color"
                   }
                 }

package/dist/components/puck-block/location-sections/location-2/index.js

@@ -1,4 +1,4 @@
-import { button } from "../../../puck-base/core/fields.js";
+import { button, location } from "../../../puck-base/core/fields.js";
 import { Location2 } from "./location.js";
 import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const locationButtonFields = {
@@ -43,7 +43,11 @@ const conf = {
   fields: {
     heading: { type: "textarea", contentEditable: true },
     description: { type: "textarea", contentEditable: true },
-    address: { type: "textarea", label: "Address", contentEditable: true },
+    displayAddress: {
+      type: "textarea",
+      label: "Display Address",
+      contentEditable: true
+    },
     contentPosition: {
       type: "radio",
       label: "Card Position",
@@ -52,26 +56,24 @@ const conf = {
         { label: "Right", value: "right" }
       ]
     },
-    mapEmbedUrl: { type: "text", label: "Google Map Embed URL" },
-    mapTitle: { type: "text", label: "Map Title" },
-    mapFilter: { type: "text", label: "Map Filter (CSS)" },
-    mapTintMode: {
-      type: "select",
+    location,
+    mapStyle: {
+      type: "radio",
+      label: "Map Style",
+      options: [
+        { label: "Default", value: "default" },
+        { label: "Grayscale", value: "grayscale" },
+        { label: "Dark", value: "dark" }
+      ]
+    },
+    mapTint: {
+      type: "radio",
       label: "Map Tint",
       options: [
         { label: "None", value: "none" },
-        { label: "Theme", value: "theme" },
-        { label: "Custom", value: "custom" }
+        { label: "Theme", value: "theme" }
       ]
     },
-    mapTintColor: { type: "text", label: "Map Tint Color" },
-    mapTintOpacity: {
-      type: "number",
-      label: "Map Tint Opacity",
-      min: 0,
-      max: 1,
-      step: 0.01
-    },
     buttons: {
       type: "array",
       max: 3,
@@ -84,14 +86,16 @@ const conf = {
   defaultProps: {
     heading: "Our Offices",
     description: "Visit our headquarters in London or reach out to one of our regional offices worldwide.",
-    address: "10 Finsbury Square\nLondon, UK EC2A 1AF",
+    displayAddress: "10 Finsbury Square\nLondon, UK EC2A 1AF",
     contentPosition: "left",
-    mapEmbedUrl: "https://maps.google.com/maps?q=London%2C%20United%20Kingdom&z=13&t=m&output=embed",
-    mapTitle: "Google Maps",
-    mapFilter: "grayscale(40%) contrast(1.05) brightness(1.0) saturate(0.85)",
-    mapTintMode: "none",
-    mapTintColor: "var(--primary)",
-    mapTintOpacity: 0.15,
+    location: {
+      address: "London, United Kingdom",
+      lat: 51.5074,
+      lng: -0.1278,
+      zoom: 13
+    },
+    mapStyle: "grayscale",
+    mapTint: "none",
     buttons: [
       {
         label: "Get Directions",

package/dist/components/puck-block/location-sections/location-2/location.d.ts

@@ -1,5 +1,6 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundButtonProps } from "@/components/puck-base/button";
+import type { MapLocation } from "@/components/puck-base/core/fields";
 interface LocationButton extends Omit<CompoundButtonProps, "label"> {
     label?: string;
     url?: string;
@@ -10,14 +11,11 @@ interface LocationButton extends Omit<CompoundButtonProps, "label"> {
 export interface Location2Props {
     heading?: string;
     description?: string;
-    address?: string;
+    displayAddress?: string;
     contentPosition?: "left" | "right";
-    mapEmbedUrl?: string;
-    mapTitle?: string;
-    mapFilter?: string;
-    mapTintMode?: "none" | "theme" | "custom";
-    mapTintColor?: string;
-    mapTintOpacity?: number;
+    location?: MapLocation;
+    mapStyle?: "default" | "grayscale" | "dark";
+    mapTint?: "none" | "theme";
     buttons?: LocationButton[];
     styles?: {
         padding?: CompoundContainerProps["padding"];
@@ -27,5 +25,5 @@ export interface Location2Props {
         sectionHeight?: "sm" | "md" | "lg";
     };
 }
-export declare const Location2: ({ heading, description, address, contentPosition, mapEmbedUrl, mapTitle, mapFilter, mapTintMode, mapTintColor, mapTintOpacity, buttons, styles, }: Location2Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Location2: ({ heading, description, displayAddress, contentPosition, location: loc, mapStyle, mapTint, buttons, styles, }: Location2Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/puck-block/location-sections/location-2/location.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { cn } from "../../../../utils/css-utils.js";
+import { getMapEmbedUrl } from "../../../puck-base/core/fields.js";
 const ActionButton = ({
   label,
   url,
@@ -34,24 +35,27 @@ const ActionButton = ({
     }
   ) });
 };
+const MAP_STYLE_FILTERS = {
+  default: "",
+  grayscale: "grayscale(40%) contrast(1.05) brightness(1.0) saturate(0.85)",
+  dark: "grayscale(100%) invert(1) contrast(1.1) brightness(0.8)"
+};
 const Location2 = ({
   heading,
   description,
-  address,
+  displayAddress,
   contentPosition = "left",
-  mapEmbedUrl,
-  mapTitle = "Google Maps",
-  mapFilter,
-  mapTintMode = "none",
-  mapTintColor,
-  mapTintOpacity = 0.15,
+  location: loc,
+  mapStyle = "default",
+  mapTint = "none",
   buttons = [],
   styles
 }) => {
   const isRight = contentPosition === "right";
   const isGlass = (styles == null ? void 0 : styles.cardStyle) === "glass";
-  const showMapTint = mapTintMode !== "none" && mapTintOpacity > 0;
-  const tintColor = mapTintMode === "custom" ? mapTintColor || void 0 : void 0;
+  const showMapTint = mapTint === "theme";
+  const mapEmbedUrl = loc && loc.lat !== 0 ? getMapEmbedUrl(loc) : void 0;
+  const mapFilter = MAP_STYLE_FILTERS[mapStyle] || "";
   const heightClass = (styles == null ? void 0 : styles.sectionHeight) === "sm" ? "h-[480px]" : (styles == null ? void 0 : styles.sectionHeight) === "lg" ? "h-[75vh] min-h-[520px]" : "h-[600px]";
   return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full overflow-hidden", heightClass), children: [
     /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
@@ -59,12 +63,12 @@ const Location2 = ({
         "iframe",
         {
           src: mapEmbedUrl,
-          title: mapTitle,
+          title: (loc == null ? void 0 : loc.address) || "Google Maps",
           className: "h-full w-full border-0",
           loading: "lazy",
           referrerPolicy: "no-referrer-when-downgrade",
           allowFullScreen: true,
-          style: { filter: mapFilter }
+          style: mapFilter ? { filter: mapFilter } : void 0
         }
       ) : /* @__PURE__ */ jsx("div", { className: "bg-muted text-muted-foreground flex h-full w-full items-center justify-center text-sm", children: "Map address not configured" }),
       showMapTint && /* @__PURE__ */ jsx(
@@ -72,8 +76,7 @@ const Location2 = ({
         {
           className: "bg-primary pointer-events-none absolute inset-0",
           style: {
-            backgroundColor: tintColor,
-            opacity: mapTintOpacity,
+            opacity: 0.15,
             mixBlendMode: "color"
           }
         }
@@ -96,7 +99,7 @@ const Location2 = ({
             children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
               heading && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx("h2", { className: "text-foreground whitespace-pre-line font-serif text-3xl leading-tight tracking-tighter md:text-4xl", children: heading }) }),
               description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm leading-relaxed", children: description }),
-              address && /* @__PURE__ */ jsxs("div", { className: "text-foreground flex items-start gap-2 text-sm", children: [
+              displayAddress && /* @__PURE__ */ jsxs("div", { className: "text-foreground flex items-start gap-2 text-sm", children: [
                 /* @__PURE__ */ jsxs(
                   "svg",
                   {
@@ -115,7 +118,7 @@ const Location2 = ({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx("span", { className: "whitespace-pre-line", children: address })
+                /* @__PURE__ */ jsx("span", { className: "whitespace-pre-line", children: displayAddress })
               ] }),
               buttons.some((button) => button == null ? void 0 : button.label) && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3 pt-1", children: buttons.map((button, index) => /* @__PURE__ */ jsx(ActionButton, { ...button }, index)) })
             ] })

package/dist/components/puck-block/location-sections/location-3/index.js

@@ -1,11 +1,16 @@
+import { location } from "../../../puck-base/core/fields.js";
 import { Location3 } from "./location.js";
 import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
-const defaultLocation = {
+const defaultLocationEntry = {
   name: "San Francisco, CA",
-  address: "123 Market Street\nSan Francisco, CA 94105",
+  location: {
+    address: "123 Market Street, San Francisco, CA 94105",
+    lat: 37.7749,
+    lng: -122.4194,
+    zoom: 14
+  },
   phone: "+1 (415) 555-0100",
-  hours: "Mon–Fri: 9am–6pm\nSat: 10am–4pm",
-  directionsUrl: "https://maps.google.com"
+  hours: "Mon–Fri: 9am–6pm\nSat: 10am–4pm"
 };
 const location3ExtraStyleFields = {
   mapHeight: {
@@ -30,9 +35,16 @@ const conf = {
   fields: {
     heading: { type: "textarea", contentEditable: true },
     description: { type: "textarea", contentEditable: true },
-    mapEmbedUrl: { type: "text", label: "Google Map Embed URL" },
-    mapTitle: { type: "text", label: "Map Title" },
-    mapFilter: { type: "text", label: "Map Filter (CSS)" },
+    mapLocation: { ...location, label: "Map Location" },
+    mapStyle: {
+      type: "radio",
+      label: "Map Style",
+      options: [
+        { label: "Default", value: "default" },
+        { label: "Grayscale", value: "grayscale" },
+        { label: "Dark", value: "dark" }
+      ]
+    },
     locations: {
       type: "array",
       min: 1,
@@ -40,37 +52,48 @@ const conf = {
       getItemSummary: (item, index = 0) => item.name || `Location ${index + 1}`,
       arrayFields: {
         name: { type: "text", contentEditable: true },
-        address: { type: "textarea", contentEditable: true },
+        location,
         phone: { type: "text" },
         hours: { type: "textarea", label: "Business Hours" },
-        directionsUrl: { type: "text", label: "Directions URL" },
         directionsLabel: { type: "text", label: "Directions Button Label" }
       },
-      defaultItemProps: defaultLocation
+      defaultItemProps: defaultLocationEntry
     },
     styles: createStylesField(location3ExtraStyleFields)
   },
   defaultProps: {
     heading: "Our Offices",
     description: "We have teams around the world ready to help you succeed.",
-    mapEmbedUrl: "https://maps.google.com/maps?q=New%20York%2C%20NY%2C%20United%20States&z=11&t=m&output=embed",
-    mapTitle: "Google Maps",
-    mapFilter: "grayscale(35%) contrast(1.05) brightness(1.0)",
+    mapLocation: {
+      address: "New York, NY, United States",
+      lat: 40.7128,
+      lng: -74.006,
+      zoom: 11
+    },
+    mapStyle: "grayscale",
     locations: [
-      defaultLocation,
+      defaultLocationEntry,
       {
         name: "London, UK",
-        address: "10 Finsbury Square\nLondon, EC2A 1AF",
+        location: {
+          address: "10 Finsbury Square, London, EC2A 1AF",
+          lat: 51.5207,
+          lng: -0.0876,
+          zoom: 14
+        },
         phone: "+44 20 7946 0200",
-        hours: "Mon–Fri: 9am–6pm\nSat: 10am–3pm",
-        directionsUrl: "https://maps.google.com"
+        hours: "Mon–Fri: 9am–6pm\nSat: 10am–3pm"
       },
       {
         name: "Tokyo, Japan",
-        address: "1-1-2 Marunouchi\nChiyoda-ku, Tokyo 100-0005",
+        location: {
+          address: "1-1-2 Marunouchi, Chiyoda-ku, Tokyo 100-0005",
+          lat: 35.6812,
+          lng: 139.7671,
+          zoom: 14
+        },
         phone: "+81 3-1234-5678",
-        hours: "Mon–Fri: 9am–6pm",
-        directionsUrl: "https://maps.google.com"
+        hours: "Mon–Fri: 9am–6pm"
       }
     ],
     styles: createStylesDefaults({

package/dist/components/puck-block/location-sections/location-3/location.d.ts

@@ -1,20 +1,19 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import type { Action } from "@/components/puck-base/core/types";
+import type { MapLocation } from "@/components/puck-base/core/fields";
 export interface LocationEntry {
     name: string;
-    address?: string;
+    location?: MapLocation;
     phone?: string;
     hours?: string;
-    directionsUrl?: string;
     directionsLabel?: string;
     directionsAction?: Action;
 }
 export interface Location3Props {
     heading?: string;
     description?: string;
-    mapEmbedUrl?: string;
-    mapTitle?: string;
-    mapFilter?: string;
+    mapLocation?: MapLocation;
+    mapStyle?: "default" | "grayscale" | "dark";
     locations: LocationEntry[];
     styles?: {
         padding?: CompoundContainerProps["padding"];
@@ -24,4 +23,4 @@ export interface Location3Props {
         columns?: "2" | "3";
     };
 }
-export declare const Location3: ({ heading, description, mapEmbedUrl, mapTitle, mapFilter, locations, styles, }: Location3Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Location3: ({ heading, description, mapLocation, mapStyle, locations, styles, }: Location3Props) => import("react/jsx-runtime").JSX.Element;