dune-react 0.0.43 → 0.0.45

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,6 @@
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+export {
+  getDefaultExportFromCjs
+};

package/dist/_virtual/index.js

@@ -0,0 +1,4 @@
+var classnames = { exports: {} };
+export {
+  classnames as __module
+};

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

@@ -1,3 +1,4 @@
+import "react-advanced-cropper/dist/style.css";
 export declare function detectMediaType(src: string): "image" | "video" | "embed";
 export interface CompoundMediaProps {
     src: string;

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

@@ -1,8 +1,9 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
-import Cropper from "react-easy-crop";
-import { Pencil, Film, Youtube, Search, Upload, Loader2, Check } from "lucide-react";
+import { Cropper, CircleStencil, RectangleStencil, DraggableArea as DraggableElement } from "../../node_modules/.pnpm/react-advanced-cropper@0.20.1_react@19.2.4/node_modules/react-advanced-cropper/dist/index.esm-bundler.js";
+/* empty css                                                                                                                     */
+import { Pencil, Film, Search, Upload, Square, Circle, FlipHorizontal, RotateCcw, RotateCw, FlipVertical, Loader2, Check } from "lucide-react";
 import { cn } from "../../utils/css-utils.js";
 import { withEditable } from "../puck-core/core/with-editable.js";
 import { mediaField } from "../puck-core/core/props/media.js";
@@ -11,7 +12,6 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "
 import { Input } from "../shadcn/input.js";
 import { Label } from "../shadcn/label.js";
 import { ScrollArea } from "../shadcn/scroll-area.js";
-import { Slider } from "../shadcn/slider.js";
 import { Tabs, TabsList, TabsTrigger, TabsIndicator, TabsContent } from "../shadcn/tabs.js";
 import useUpload from "../puck-core/use-upload.js";
 import { useEditorContext } from "../puck-core/core/context/editor-context.js";
@@ -31,41 +31,116 @@ function getEmbedUrl(url) {
     return `https://player.vimeo.com/video/${vimeoMatch[1]}?autoplay=1`;
   return url;
 }
-const createImage = (url) => new Promise((resolve, reject) => {
-  const image = new Image();
-  image.addEventListener("load", () => resolve(image));
-  image.addEventListener("error", (error) => reject(error));
-  image.setAttribute("crossOrigin", "anonymous");
-  image.src = url;
-});
-const getCroppedImg = async (imageSrc, pixelCrop, rotation) => {
-  const image = await createImage(imageSrc);
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
-  const maxSize = Math.max(image.width, image.height);
-  const safeArea = 2 * (maxSize / 2 * Math.sqrt(2));
-  canvas.width = safeArea;
-  canvas.height = safeArea;
-  ctx.translate(safeArea / 2, safeArea / 2);
-  ctx.rotate(rotation * Math.PI / 180);
-  ctx.translate(-safeArea / 2, -safeArea / 2);
-  ctx.drawImage(
-    image,
-    safeArea / 2 - image.width * 0.5,
-    safeArea / 2 - image.height * 0.5
-  );
-  const data = ctx.getImageData(0, 0, safeArea, safeArea);
-  canvas.width = pixelCrop.width;
-  canvas.height = pixelCrop.height;
-  ctx.putImageData(
-    data,
-    Math.round(0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x),
-    Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y)
+const ASPECT_PRESETS = [
+  { label: "Free", value: void 0 },
+  { label: "1:1", value: 1 },
+  { label: "4:3", value: 4 / 3 },
+  { label: "16:9", value: 16 / 9 }
+];
+function rangeArray(from, to, step = 1) {
+  const result = [];
+  for (let v = from; v < to; v += step) result.push(v);
+  return result;
+}
+function RotateBar({
+  value,
+  onChange,
+  onEnd,
+  from = -45,
+  to = 45,
+  step = 2.5
+}) {
+  const barsRef = useRef(null);
+  const density = 10;
+  const thickness = 2;
+  const items = useMemo(() => {
+    var _a;
+    const width = ((_a = barsRef.current) == null ? void 0 : _a.clientWidth) || 260;
+    const count = width / density;
+    const neededLeft = Math.max(
+      0,
+      Math.floor(count / 2) - Math.round((value - from) / step)
+    );
+    const neededRight = Math.max(
+      0,
+      Math.floor(count / 2) - Math.round((to - value) / step)
+    );
+    const values = [
+      ...rangeArray(from - neededLeft * step, from, step),
+      ...rangeArray(from, to + step, step),
+      ...rangeArray(to + step, to + step + neededRight * step, step)
+    ];
+    const radius = Math.abs(Math.ceil(count / 2) * step);
+    return values.map((barValue) => {
+      const sign = Math.sign(barValue - value);
+      let translate;
+      if (Math.abs(barValue - value) / step <= Math.ceil(count / 2)) {
+        const multiplier = Math.sqrt(
+          Math.pow(radius, 2) - Math.pow(value + sign * radius - barValue, 2)
+        ) / radius;
+        translate = width / 2 + sign * (width / 2) * Math.pow(multiplier, 2.5);
+      } else {
+        translate = width / 2 + sign * width / 2;
+      }
+      let opacity = 0;
+      if (count > 0 && Math.abs(barValue - value) / step <= Math.ceil(count / 2)) {
+        opacity = Math.pow(
+          Math.sqrt(Math.pow(radius, 2) - Math.pow(value - barValue, 2)) / radius,
+          4
+        );
+      }
+      return {
+        value: barValue,
+        highlighted: value < 0 && barValue >= value && barValue <= 0 || value > 0 && barValue <= value && barValue >= 0,
+        zero: barValue === 0,
+        opacity,
+        translate: translate - thickness / 2
+      };
+    });
+  }, [value, from, to, step]);
+  const onMove = useCallback(
+    (directions) => {
+      if (!barsRef.current) return;
+      const width = barsRef.current.clientWidth;
+      const count = width / density;
+      const shift = -(directions.left / width) * count * step;
+      if (value + shift > to) onChange(to - value);
+      else if (value + shift < from) onChange(from - value);
+      else onChange(shift);
+    },
+    [value, from, to, step, onChange]
   );
-  return new Promise((resolve) => {
-    canvas.toBlob((blob) => resolve(blob), "image/jpeg", 0.95);
-  });
-};
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(DraggableElement, { onMove, onMoveEnd: onEnd, useAnchor: false, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: barsRef,
+      className: "relative flex h-[15px] w-full cursor-grab select-none active:cursor-grabbing",
+      children: [
+        items.map((bar) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute left-0 top-1/2 flex-shrink-0",
+              bar.zero ? "h-[20px]" : "h-[15px]",
+              bar.highlighted ? "bg-primary" : "bg-muted-foreground/40"
+            ),
+            style: {
+              width: bar.opacity ? thickness : 0,
+              opacity: bar.opacity,
+              transform: `translate(${bar.translate}px, -50%)`
+            }
+          },
+          bar.value
+        )),
+        /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[25px] w-[3px] rounded-sm bg-primary" }),
+        /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 -top-4 -translate-x-1/2 text-[11px] font-medium text-primary tabular-nums", children: [
+          value.toFixed(1),
+          "°"
+        ] })
+      ]
+    }
+  ) }) });
+}
 const DEFAULT_LIBRARY_IMAGES = [];
 function CompoundMediaBase(props) {
   const type = detectMediaType(props.src);
@@ -112,8 +187,8 @@ function MediaEditDialog({
   onSave
 }) {
   const currentType = detectMediaType(initialData.src);
-  const [mediaTab, setMediaTab] = useState(currentType);
-  const [imageSubTab, setImageSubTab] = useState("library");
+  const [mediaTab, setMediaTab] = useState(currentType === "embed" ? "video" : currentType);
+  const [imageSubTab, setImageSubTab] = useState("adjust");
   const [alt, setAlt] = useState(initialData.alt ?? "");
   const [libraryImages, setLibraryImages] = useState(
     DEFAULT_LIBRARY_IMAGES
@@ -128,18 +203,15 @@ function MediaEditDialog({
     }).catch(() => {
     }).finally(() => setIsLoadingImages(false));
   }, [open, fetchLibraryImages]);
-  const [crop, setCrop] = useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = useState(1);
-  const [rotation, setRotation] = useState(0);
-  const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+  const cropperRef = useRef(null);
+  const [aspectRatio, setAspectRatio] = useState(void 0);
+  const [cropShape, setCropShape] = useState("rect");
+  const [adjustAngle, setAdjustAngle] = useState(0);
   const [selectedImg, setSelectedImg] = useState(null);
   const replaceInputRef = useRef(null);
   const lastUploadedFile = useRef(null);
   const [videoUrl, setVideoUrl] = useState(
-    currentType === "video" ? initialData.src : ""
-  );
-  const [embedUrl, setEmbedUrl] = useState(
-    currentType === "embed" ? initialData.src : ""
+    currentType === "video" || currentType === "embed" ? initialData.src : ""
   );
   const { brandId, domain } = useEditorContext();
   const saveToAssetLibrary = useCallback(
@@ -172,12 +244,11 @@ function MediaEditDialog({
   );
   const handleClose = useCallback(() => {
     onOpenChange(false);
-    setCrop({ x: 0, y: 0 });
-    setZoom(1);
-    setRotation(0);
     setSelectedImg(null);
     setVideoUrl("");
-    setEmbedUrl("");
+    setAspectRatio(void 0);
+    setCropShape("rect");
+    setAdjustAngle(0);
   }, [onOpenChange]);
   const { upload: uploadCrop, isUploading: isCropUploading } = useUpload({
     onSuccess: (url) => {
@@ -194,21 +265,22 @@ function MediaEditDialog({
     }
   });
   const handleCropSave = useCallback(async () => {
-    if (!croppedAreaPixels || !initialData.src) return;
+    const cropper = cropperRef.current;
+    if (!cropper) return;
     try {
-      const croppedBlob = await getCroppedImg(
-        initialData.src,
-        croppedAreaPixels,
-        rotation
+      const canvas = cropper.getCanvas();
+      if (!canvas) return;
+      const blob = await new Promise(
+        (resolve) => canvas.toBlob((b) => resolve(b), "image/jpeg", 0.95)
       );
-      const file = new File([croppedBlob], "cropped-image.jpg", {
+      const file = new File([blob], "cropped-image.jpg", {
         type: "image/jpeg"
       });
       await uploadCrop(file);
     } catch (error) {
       console.error("Crop failed:", error);
     }
-  }, [croppedAreaPixels, initialData.src, rotation, uploadCrop]);
+  }, [uploadCrop]);
   const handleFileReplace = useCallback(
     (e) => {
       var _a;
@@ -232,12 +304,6 @@ function MediaEditDialog({
     onSave({ src: url, alt });
     handleClose();
   }, [videoUrl, alt, onSave, handleClose]);
-  const handleEmbedDone = useCallback(() => {
-    const url = embedUrl.trim();
-    if (!url) return;
-    onSave({ src: url, alt });
-    handleClose();
-  }, [embedUrl, alt, onSave, handleClose]);
   const canDone = useMemo(() => {
     if (mediaTab === "image") {
       if (imageSubTab === "library") return !!selectedImg;
@@ -245,9 +311,8 @@ function MediaEditDialog({
       return true;
     }
     if (mediaTab === "video") return !!videoUrl.trim();
-    if (mediaTab === "embed") return !!embedUrl.trim();
     return false;
-  }, [mediaTab, imageSubTab, selectedImg, isCropUploading, videoUrl, embedUrl]);
+  }, [mediaTab, imageSubTab, selectedImg, isCropUploading, videoUrl]);
   const handleDone = useCallback(() => {
     if (mediaTab === "image") {
       if (imageSubTab === "library") handleLibraryDone();
@@ -258,8 +323,6 @@ function MediaEditDialog({
       }
     } else if (mediaTab === "video") {
       handleVideoDone();
-    } else if (mediaTab === "embed") {
-      handleEmbedDone();
     }
   }, [
     mediaTab,
@@ -267,7 +330,6 @@ function MediaEditDialog({
     handleLibraryDone,
     handleCropSave,
     handleVideoDone,
-    handleEmbedDone,
     onSave,
     alt,
     handleClose
@@ -290,10 +352,6 @@ function MediaEditDialog({
               /* @__PURE__ */ jsx(Film, { className: "size-3.5" }),
               "Video"
             ] }),
-            /* @__PURE__ */ jsxs(TabsTrigger, { value: "embed", children: [
-              /* @__PURE__ */ jsx(Youtube, { className: "size-3.5" }),
-              "YouTube"
-            ] }),
             /* @__PURE__ */ jsx(TabsIndicator, {})
           ] }),
           /* @__PURE__ */ jsx(
@@ -327,48 +385,154 @@ function MediaEditDialog({
                       TabsContent,
                       {
                         value: "adjust",
-                        className: "m-3 bg-muted rounded-lg animate-tabs flex flex-col",
+                        className: "m-3 animate-tabs flex flex-col overflow-hidden rounded-lg",
                         children: [
-                          /* @__PURE__ */ jsx("div", { className: "bg-muted relative h-64", children: /* @__PURE__ */ jsx(
+                          /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-t-lg bg-muted min-h-[256px]", children: /* @__PURE__ */ jsx(
                             Cropper,
                             {
-                              image: currentType === "image" ? initialData.src : "",
-                              crop,
-                              zoom,
-                              rotation,
-                              aspect: 16 / 9,
-                              onCropChange: setCrop,
-                              onZoomChange: setZoom,
-                              onRotationChange: setRotation,
-                              onCropComplete: (_, pixels) => setCroppedAreaPixels(pixels)
+                              ref: cropperRef,
+                              src: currentType === "image" ? `${initialData.src}${initialData.src.includes("?") ? "&" : "?"}_cors=1` : "",
+                              crossOrigin: "anonymous",
+                              stencilComponent: cropShape === "circle" ? CircleStencil : RectangleStencil,
+                              stencilProps: {
+                                aspectRatio,
+                                grid: true
+                              },
+                              transitions: true
                             }
                           ) }),
-                          /* @__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__ */ jsxs("div", { className: "flex flex-col gap-2 rounded-b-lg bg-muted/60 px-3 py-2", children: [
+                            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                              ASPECT_PRESETS.map((preset) => /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => setAspectRatio(preset.value),
+                                  className: cn(
+                                    "rounded px-2 py-0.5 text-xs font-medium transition-colors",
+                                    aspectRatio === preset.value ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent"
+                                  ),
+                                  children: preset.label
+                                },
+                                preset.label
+                              )),
+                              /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-px bg-border" }),
                               /* @__PURE__ */ jsx(
-                                Slider,
+                                "button",
                                 {
-                                  className: "flex",
-                                  value: [zoom],
-                                  onValueChange: (vals) => setZoom(Array.isArray(vals) ? vals[0] ?? 1 : vals),
-                                  min: 1,
-                                  max: 3,
-                                  step: 0.1
+                                  type: "button",
+                                  onClick: () => setCropShape("rect"),
+                                  className: cn(
+                                    "flex h-6 w-6 items-center justify-center rounded transition-colors",
+                                    cropShape === "rect" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent"
+                                  ),
+                                  title: "Rectangle",
+                                  children: /* @__PURE__ */ jsx(Square, { className: "size-3" })
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => {
+                                    setCropShape("circle");
+                                    setAspectRatio(1);
+                                  },
+                                  className: cn(
+                                    "flex h-6 w-6 items-center justify-center rounded transition-colors",
+                                    cropShape === "circle" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent"
+                                  ),
+                                  title: "Circle",
+                                  children: /* @__PURE__ */ jsx(Circle, { className: "size-3" })
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-                              /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Rotation" }),
+                            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 pt-1", children: [
+                              /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => {
+                                    var _a;
+                                    return (_a = cropperRef.current) == null ? void 0 : _a.flipImage(true, false);
+                                  },
+                                  className: "flex h-7 w-7 flex-none items-center justify-center rounded text-muted-foreground hover:bg-accent",
+                                  title: "Flip Horizontal",
+                                  children: /* @__PURE__ */ jsx(FlipHorizontal, { className: "size-3.5" })
+                                }
+                              ),
                               /* @__PURE__ */ jsx(
-                                Slider,
+                                "button",
                                 {
-                                  className: "flex",
-                                  value: [rotation],
-                                  onValueChange: (vals) => setRotation(Array.isArray(vals) ? vals[0] ?? 0 : vals),
-                                  min: 0,
-                                  max: 360,
-                                  step: 1
+                                  type: "button",
+                                  onClick: () => {
+                                    var _a, _b, _c;
+                                    if (adjustAngle > 0) {
+                                      (_a = cropperRef.current) == null ? void 0 : _a.rotateImage(-adjustAngle);
+                                    } else if (adjustAngle < 0) {
+                                      (_b = cropperRef.current) == null ? void 0 : _b.rotateImage(-90 - adjustAngle);
+                                    } else {
+                                      (_c = cropperRef.current) == null ? void 0 : _c.rotateImage(-90);
+                                    }
+                                    setAdjustAngle(0);
+                                  },
+                                  className: "flex h-7 w-7 flex-none items-center justify-center rounded text-muted-foreground hover:bg-accent",
+                                  title: "Rotate Left 90°",
+                                  children: /* @__PURE__ */ jsx(RotateCcw, { className: "size-3.5" })
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                RotateBar,
+                                {
+                                  value: adjustAngle,
+                                  onChange: (delta) => {
+                                    var _a;
+                                    (_a = cropperRef.current) == null ? void 0 : _a.rotateImage(delta, {
+                                      transitions: false,
+                                      interaction: true,
+                                      immediately: true
+                                    });
+                                    setAdjustAngle(
+                                      (prev) => Math.max(-45, Math.min(45, prev + delta))
+                                    );
+                                  },
+                                  onEnd: () => {
+                                    var _a, _b;
+                                    return (_b = (_a = cropperRef.current) == null ? void 0 : _a.transformImageEnd) == null ? void 0 : _b.call(_a);
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => {
+                                    var _a, _b, _c;
+                                    if (adjustAngle > 0) {
+                                      (_a = cropperRef.current) == null ? void 0 : _a.rotateImage(90 - adjustAngle);
+                                    } else if (adjustAngle < 0) {
+                                      (_b = cropperRef.current) == null ? void 0 : _b.rotateImage(-adjustAngle);
+                                    } else {
+                                      (_c = cropperRef.current) == null ? void 0 : _c.rotateImage(90);
+                                    }
+                                    setAdjustAngle(0);
+                                  },
+                                  className: "flex h-7 w-7 flex-none items-center justify-center rounded text-muted-foreground hover:bg-accent",
+                                  title: "Rotate Right 90°",
+                                  children: /* @__PURE__ */ jsx(RotateCw, { className: "size-3.5" })
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => {
+                                    var _a;
+                                    return (_a = cropperRef.current) == null ? void 0 : _a.flipImage(false, true);
+                                  },
+                                  className: "flex h-7 w-7 flex-none items-center justify-center rounded text-muted-foreground hover:bg-accent",
+                                  title: "Flip Vertical",
+                                  children: /* @__PURE__ */ jsx(FlipVertical, { className: "size-3.5" })
                                 }
                               )
                             ] })
@@ -466,12 +630,12 @@ function MediaEditDialog({
                   /* @__PURE__ */ jsx(
                     Input,
                     {
-                      placeholder: "https://example.com/video.mp4",
+                      placeholder: "https://example.com/video.mp4 or YouTube / Vimeo link",
                       value: videoUrl,
                       onChange: (e) => setVideoUrl(e.target.value)
                     }
                   ),
-                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Supports .mp4, .webm, .mov, .ogg direct links" })
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Supports .mp4, .webm, .mov, .ogg direct links and YouTube / Vimeo" })
                 ] }),
                 videoUrl.trim() && detectMediaType(videoUrl.trim()) === "video" && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border bg-muted", children: /* @__PURE__ */ jsx(
                   "video",
@@ -482,32 +646,11 @@ function MediaEditDialog({
                     playsInline: true,
                     className: "h-48 w-full object-contain"
                   }
-                ) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            TabsContent,
-            {
-              value: "embed",
-              className: "animate-tabs flex-none h-[360px] flex flex-col gap-4 px-6 py-6",
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-                  /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: "YouTube / Vimeo URL" }),
-                  /* @__PURE__ */ jsx(
-                    Input,
-                    {
-                      placeholder: "https://www.youtube.com/watch?v=...",
-                      value: embedUrl,
-                      onChange: (e) => setEmbedUrl(e.target.value)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Paste a YouTube or Vimeo link" })
-                ] }),
-                embedUrl.trim() && detectMediaType(embedUrl.trim()) === "embed" && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border bg-muted", children: /* @__PURE__ */ jsx(
+                ) }),
+                videoUrl.trim() && detectMediaType(videoUrl.trim()) === "embed" && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border bg-muted", children: /* @__PURE__ */ jsx(
                   "iframe",
                   {
-                    src: getEmbedUrl(embedUrl.trim()),
+                    src: getEmbedUrl(videoUrl.trim()),
                     className: "h-48 w-full",
                     allow: "autoplay; fullscreen",
                     allowFullScreen: true

package/dist/components/puck-block/gallery-sections/static-grid/static-grid.js

@@ -3,11 +3,11 @@ import { cn } from "../../../../utils/css-utils.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { CompoundMedia } from "../../../puck-base/media.js";
 const columnsMap = {
-  "1": "grid-cols-1",
-  "2": "grid-cols-1 md:grid-cols-2",
-  "3": "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
-  "2-lg3": "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-  "2-lg4": "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+  "1": "md:grid-cols-1",
+  "2": "md:grid-cols-2",
+  "3": "md:grid-cols-2 lg:grid-cols-3",
+  "2-lg3": "sm:grid-cols-2 lg:grid-cols-3",
+  "2-lg4": "sm:grid-cols-2 lg:grid-cols-4"
 };
 const StaticGrid = (props) => {
   const { heading, description, medias, styles } = {
@@ -25,11 +25,15 @@ const StaticGrid = (props) => {
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn("grid auto-cols-fr", gridCols, {
-          "gap-8": hasGap,
-          "gap-0": !hasGap
-        }),
-        children: medias.map((media, index) => /* @__PURE__ */ jsx("a", { href: "#", className: "size-full", children: /* @__PURE__ */ jsx("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ jsx(
+        className: cn(
+          "flex overflow-x-auto snap-x snap-mandatory scrollbar-hide md:grid md:auto-cols-fr md:overflow-visible",
+          gridCols,
+          {
+            "gap-4 md:gap-8": hasGap,
+            "gap-0": !hasGap
+          }
+        ),
+        children: medias.map((media, index) => /* @__PURE__ */ jsx("a", { href: "#", className: "w-[75vw] flex-none snap-start md:w-auto md:flex-1", children: /* @__PURE__ */ jsx("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ jsx(
           CompoundMedia,
           {
             src: media.src,

package/dist/components/puck-block/testimonial-sections/bento-testimonial/component.js

@@ -35,6 +35,7 @@ const BentoTestimonial = (props) => {
           {
             className: `grid grid-cols-1 gap-6 sm:grid-rows-6 md:grid-cols-2 md:gap-8 lg:grid-cols-4 ${gridRowsClass}`,
             children: testimonialCards.map((card, index) => {
+              var _a, _b, _c, _d, _e, _f;
               if (card.component === "background" && hasBackgroundCards) {
                 backgroundImageCardCount++;
                 return /* @__PURE__ */ jsxs(
@@ -59,9 +60,9 @@ const BentoTestimonial = (props) => {
                         /* @__PURE__ */ jsx(
                           CompoundMedia,
                           {
-                            src: card.props.media.src,
+                            src: (_a = card.props.media) == null ? void 0 : _a.src,
                             className: "size-full object-cover",
-                            alt: card.props.media.alt
+                            alt: (_b = card.props.media) == null ? void 0 : _b.alt
                           }
                         ),
                         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50" })
@@ -84,8 +85,8 @@ const BentoTestimonial = (props) => {
                     children: /* @__PURE__ */ jsx(
                       CompoundMedia,
                       {
-                        src: card.props.media.src,
-                        alt: card.props.media.alt,
+                        src: (_c = card.props.media) == null ? void 0 : _c.src,
+                        alt: (_d = card.props.media) == null ? void 0 : _d.alt,
                         className: "max-h-16"
                       }
                     )
@@ -104,8 +105,8 @@ const BentoTestimonial = (props) => {
                         /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
                           CompoundMedia,
                           {
-                            src: card.props.media.src,
-                            alt: card.props.media.alt,
+                            src: (_e = card.props.media) == null ? void 0 : _e.src,
+                            alt: (_f = card.props.media) == null ? void 0 : _f.alt,
                             className: "mb-4 size-12 min-h-12 min-w-12 rounded-full object-cover md:mb-0 md:mr-4"
                           }
                         ) }),