dune-react 0.0.15 → 0.0.18

package/dist/components/puck-base/image.js

@@ -33,7 +33,11 @@ const getCroppedImg = async (imageSrc, pixelCrop, rotation) => {
   ctx.translate(safeArea / 2, safeArea / 2);
   ctx.rotate(rotation * Math.PI / 180);
   ctx.translate(-safeArea / 2, -safeArea / 2);
-  ctx.drawImage(image2, safeArea / 2 - image2.width * 0.5, safeArea / 2 - image2.height * 0.5);
+  ctx.drawImage(
+    image2,
+    safeArea / 2 - image2.width * 0.5,
+    safeArea / 2 - image2.height * 0.5
+  );
   const data = ctx.getImageData(0, 0, safeArea, safeArea);
   canvas.width = pixelCrop.width;
   canvas.height = pixelCrop.height;
@@ -48,7 +52,14 @@ const getCroppedImg = async (imageSrc, pixelCrop, rotation) => {
 };
 const DEFAULT_LIBRARY_IMAGES = [];
 function CompoundImageBase(props) {
-  return /* @__PURE__ */ jsx("img", { src: props.src, alt: props.alt, className: cn("block h-full w-full object-cover", props.className) });
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: props.src,
+      alt: props.alt,
+      className: cn("block h-full w-full object-cover", props.className)
+    }
+  );
 }
 function ImageEditDialog({
   open,
@@ -58,7 +69,9 @@ function ImageEditDialog({
 }) {
   const [tab, setTab] = useState("library");
   const [alt, setAlt] = useState(initialData.alt ?? "");
-  const [libraryImages, setLibraryImages] = useState(DEFAULT_LIBRARY_IMAGES);
+  const [libraryImages, setLibraryImages] = useState(
+    DEFAULT_LIBRARY_IMAGES
+  );
   const [isLoadingImages, setIsLoadingImages] = useState(false);
   const { fetchLibraryImages } = useEditorContext();
   useEffect(() => {
@@ -97,7 +110,11 @@ function ImageEditDialog({
   const handleCropSave = useCallback(async () => {
     if (!croppedAreaPixels || !initialData.src) return;
     try {
-      const croppedBlob = await getCroppedImg(initialData.src, croppedAreaPixels, rotation);
+      const croppedBlob = await getCroppedImg(
+        initialData.src,
+        croppedAreaPixels,
+        rotation
+      );
       const file = new File([croppedBlob], "cropped-image.jpg", {
         type: "image/jpeg"
       });
@@ -122,112 +139,166 @@ function ImageEditDialog({
   }, [selectedImg, alt, onSave, handleClose]);
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (o) => !o && handleClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "flex max-h-[80vh] max-w-lg flex-col gap-0 overflow-hidden p-0", children: [
     /* @__PURE__ */ jsx(DialogHeader, { className: "px-6 pt-5 pb-0", children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-base font-semibold", children: "Edit Image" }) }),
-    /* @__PURE__ */ jsxs(Tabs, { value: tab, onValueChange: (v) => setTab(v), className: "flex flex-1 flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsxs(TabsList, { className: "mx-6 mt-3 bg-transparent", children: [
-        /* @__PURE__ */ jsxs(TabsTrigger, { value: "adjust", children: [
-          /* @__PURE__ */ jsx(Pencil, {}),
-          "Crop"
-        ] }),
-        /* @__PURE__ */ jsxs(TabsTrigger, { value: "library", children: [
-          /* @__PURE__ */ jsx(Search, {}),
-          "Library"
-        ] }),
-        /* @__PURE__ */ jsxs(TabsTrigger, { value: "upload", children: [
-          /* @__PURE__ */ jsx(Upload, {}),
-          "Upload"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-3 flex-1 overflow-hidden", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", tab !== "adjust" && "hidden"), children: [
-          /* @__PURE__ */ jsx("div", { className: "bg-muted relative h-64", children: /* @__PURE__ */ jsx(
-            Cropper,
-            {
-              image: initialData.src,
-              crop,
-              zoom,
-              rotation,
-              aspect: 16 / 9,
-              onCropChange: setCrop,
-              onZoomChange: setZoom,
-              onRotationChange: setRotation,
-              onCropComplete: (_, pixels) => setCroppedAreaPixels(pixels)
-            }
-          ) }),
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 px-6 py-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Zoom" }),
-              /* @__PURE__ */ jsx(Slider, { value: [zoom], onValueChange: (vals) => setZoom(Array.isArray(vals) ? vals[0] ?? 1 : vals), min: 1, max: 3, step: 0.1 })
+    /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        value: tab,
+        onValueChange: (v) => setTab(v),
+        className: "flex flex-1 flex-col overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsxs(TabsList, { className: "mx-6 mt-3 bg-transparent", children: [
+            /* @__PURE__ */ jsxs(TabsTrigger, { value: "adjust", children: [
+              /* @__PURE__ */ jsx(Pencil, {}),
+              "Crop"
+            ] }),
+            /* @__PURE__ */ jsxs(TabsTrigger, { value: "library", children: [
+              /* @__PURE__ */ jsx(Search, {}),
+              "Library"
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Rotation" }),
-              /* @__PURE__ */ jsx(Slider, { value: [rotation], onValueChange: (vals) => setRotation(Array.isArray(vals) ? vals[0] ?? 0 : vals), min: 0, max: 360, step: 1 })
+            /* @__PURE__ */ jsxs(TabsTrigger, { value: "upload", children: [
+              /* @__PURE__ */ jsx(Upload, {}),
+              "Upload"
             ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3 px-6 py-4", tab !== "library" && "hidden"), children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-[280px]", children: isLoadingImages ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center py-20", children: /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) }) : libraryImages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center py-20 text-center", children: [
-          /* @__PURE__ */ jsx(Search, { className: "h-8 w-8 text-gray-300" }),
-          /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm font-medium text-gray-500", children: "No images available" }),
-          /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-400", children: "Try uploading an image instead" })
-        ] }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: libraryImages.map((src) => {
-          const isSelected = selectedImg === src;
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => setSelectedImg(src),
-              className: `relative aspect-4/3 overflow-hidden rounded-lg border-2 transition-all ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-transparent hover:border-gray-300"}`,
-              children: [
-                /* @__PURE__ */ jsx("img", { src, alt: "", className: "h-full w-full object-cover" }),
-                isSelected && /* @__PURE__ */ jsx("div", { className: "absolute top-1.5 right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 shadow-sm", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-white" }) })
-              ]
-            },
-            src
-          );
-        }) }) }) }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn("flex flex-col items-center justify-center gap-4 px-6 py-14", tab !== "upload" && "hidden"),
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-gray-100", children: /* @__PURE__ */ jsx(Upload, { className: "h-6 w-6 text-gray-400" }) }),
-              /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700", children: "Upload a new image to replace the current one" }),
-                /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-400", children: "Supports JPG, PNG, WebP formats" })
-              ] }),
-              /* @__PURE__ */ jsxs(
-                Button,
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 flex-1 overflow-hidden", children: [
+            /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", tab !== "adjust" && "hidden"), children: [
+              /* @__PURE__ */ jsx("div", { className: "bg-muted relative h-64", children: /* @__PURE__ */ jsx(
+                Cropper,
                 {
-                  variant: "outline",
-                  size: "sm",
-                  onClick: () => {
-                    var _a;
-                    return (_a = replaceInputRef.current) == null ? void 0 : _a.click();
-                  },
-                  disabled: isReplaceUploading,
-                  children: [
-                    isReplaceUploading ? /* @__PURE__ */ jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Upload, { className: "mr-1.5 h-3.5 w-3.5" }),
-                    "Choose File"
-                  ]
+                  image: initialData.src,
+                  crop,
+                  zoom,
+                  rotation,
+                  aspect: 16 / 9,
+                  onCropChange: setCrop,
+                  onZoomChange: setZoom,
+                  onRotationChange: setRotation,
+                  onCropComplete: (_, pixels) => setCroppedAreaPixels(pixels)
                 }
-              ),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  ref: replaceInputRef,
-                  type: "file",
-                  accept: "image/*",
-                  onChange: handleFileReplace,
-                  className: "hidden"
-                }
-              )
-            ]
-          }
-        )
-      ] })
-    ] }),
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 px-6 py-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+                  /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Zoom" }),
+                  /* @__PURE__ */ jsx(
+                    Slider,
+                    {
+                      className: "flex",
+                      value: [zoom],
+                      onValueChange: (vals) => setZoom(Array.isArray(vals) ? vals[0] ?? 1 : vals),
+                      min: 1,
+                      max: 3,
+                      step: 0.1
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+                  /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Rotation" }),
+                  /* @__PURE__ */ jsx(
+                    Slider,
+                    {
+                      className: "flex",
+                      value: [rotation],
+                      onValueChange: (vals) => setRotation(Array.isArray(vals) ? vals[0] ?? 0 : vals),
+                      min: 0,
+                      max: 360,
+                      step: 1
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col gap-3 px-6 py-4",
+                  tab !== "library" && "hidden"
+                ),
+                children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-[280px]", children: isLoadingImages ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center py-20", children: /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) }) : libraryImages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center py-20 text-center", children: [
+                  /* @__PURE__ */ jsx(Search, { className: "h-8 w-8 text-gray-300" }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm font-medium text-gray-500", children: "No images available" }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-400", children: "Try uploading an image instead" })
+                ] }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: libraryImages.map((src) => {
+                  const isSelected = selectedImg === src;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setSelectedImg(src),
+                      className: `relative aspect-4/3 overflow-hidden rounded-lg border-2 transition-all ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-transparent hover:border-gray-300"}`,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src,
+                            alt: "",
+                            className: "h-full w-full object-cover"
+                          }
+                        ),
+                        isSelected && /* @__PURE__ */ jsx("div", { className: "absolute top-1.5 right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 shadow-sm", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-white" }) })
+                      ]
+                    },
+                    src
+                  );
+                }) }) })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col items-center justify-center gap-4 px-6 py-14",
+                  tab !== "upload" && "hidden"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-gray-100", children: /* @__PURE__ */ jsx(Upload, { className: "h-6 w-6 text-gray-400" }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700", children: "Upload a new image to replace the current one" }),
+                    /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-400", children: "Supports JPG, PNG, WebP formats" })
+                  ] }),
+                  /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      onClick: () => {
+                        var _a;
+                        return (_a = replaceInputRef.current) == null ? void 0 : _a.click();
+                      },
+                      disabled: isReplaceUploading,
+                      children: [
+                        isReplaceUploading ? /* @__PURE__ */ jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Upload, { className: "mr-1.5 h-3.5 w-3.5" }),
+                        "Choose File"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: replaceInputRef,
+                      type: "file",
+                      accept: "image/*",
+                      onChange: handleFileReplace,
+                      className: "hidden"
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx("div", { className: "border-t px-6 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ jsx(Label, { className: "flex-none", children: "Alt Text" }),
-      /* @__PURE__ */ jsx(Input, { value: alt, onChange: (e) => setAlt(e.target.value), placeholder: "Image description..." })
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: alt,
+          onChange: (e) => setAlt(e.target.value),
+          placeholder: "Image description..."
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsxs(DialogFooter, { className: "border-t px-6 py-3", children: [
       /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleClose, children: "Cancel" }),

package/dist/components/puck-base/index.d.ts

@@ -8,7 +8,7 @@ export { CompoundForm, type CompoundFormProps, formMethods, type FormMethods } f
 export { CompoundImage, type CompoundImageProps } from "./image";
 export { CompoundArticleCard, type CompoundArticleCardProps } from "./article-card";
 export { ImageUploadField } from "./image-upload-field";
-export { ActionField, ACTION_TYPE_FIELD_MAP, ACTION_TYPE_OPTIONS, PageActionFields, ExternalActionFields, EmailActionFields, PhoneActionFields, SectionActionFields, DownloadActionFields, type ActionTypeFieldProps, } from "./fields/action-field";
+export { ActionField, ACTION_TYPE_FIELD_MAP, ACTION_TYPE_OPTIONS, PageActionFields, ExternalActionFields, EmailActionFields, PhoneActionFields, SectionActionFields, DownloadActionFields, type ActionTypeFieldProps, } from "./fields";
 export { ErrorBoundary } from "./error-boundary";
 export { GradientText, type GradientTextProps } from "./gradient-text";
 export { InlineEditable } from "./inline-editable";
@@ -18,6 +18,5 @@ export { usePuckDispatch, usePuckAppState, usePuckHistory, usePuckConfig, usePuc
 export { findComponentById, getRandomAdjective } from "./core/utils";
 export { icon, action, actionDefaults, button, buttons, badge, image, images, padding, paddingDefaults, paddingLevel, heading, description, features, contentFields, contentFieldsWithFeatures, card, cards, field, fieldDefaults, form, formDefaults, getPlaceholderImageUrl, image16x9Placeholder, image1x1Placeholder, image9x16Placeholder, sectionStyle, sectionOverlay, backgroundColor, backgroundImage, } from "./core/fields";
 export { EditorContextProvider, useEditorContext } from "./editor-context";
-export { AutoField } from "./fields/auto-field";
-export { type FieldDef, type AutoFieldProps, type FieldsPanelProps } from "./fields/types";
+export { AutoField, type FieldDef, type AutoFieldProps, type FieldsPanelProps } from "./fields";
 export { default as useUpload, type UploadFileItem, type UploadStatus, type UseUploadOptions } from "./use-upload";

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 {};