dune-react 0.0.10 → 0.0.11

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

@@ -3,11 +3,15 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, Fragment as Fragment$1 } from "react";
 import { cn } from "../../../../utils/css-utils.js";
 import { Button } from "../../../shadcn/button.js";
-import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger, NavigationMenuContent } from "../../../shadcn/navigation-menu.js";
+import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger, NavigationMenuContent } from "../../../puck-base/navigation-menu.js";
 import { MoveRight, X, Menu } from "lucide-react";
 import { registerOverlayPortal } from "@puckeditor/core";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { ErrorBoundary } from "../../../puck-base/error-boundary.js";
+import { resolveActionUrl } from "../../../puck-base/core/types.js";
+function coerceAction(action, legacyUrl) {
+  return action ?? (legacyUrl ? /^https?:\/\//i.test(legacyUrl) ? { type: "external", externalUrl: legacyUrl } : { type: "page", pageUrl: legacyUrl } : void 0);
+}
 const HEADER_SECTION_VARS = {
   dark: {
     "--background": "oklch(0.145 0 0)",
@@ -38,7 +42,9 @@ const Header = ({
   return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(
     "header",
     {
-      className: cn("bg-background text-foreground sticky top-0 left-0 z-40 w-full"),
+      className: cn(
+        "bg-background text-foreground sticky top-0 left-0 z-40 w-full"
+      ),
       style: {
         ...(styles == null ? void 0 : styles.backgroundColor) ? { backgroundColor: styles.backgroundColor } : {},
         ...sectionVars
@@ -46,11 +52,11 @@ const Header = ({
       children: /* @__PURE__ */ jsxs("div", { className: "relative container mx-auto flex min-h-20 flex-row items-center gap-4 lg:grid lg:grid-cols-[auto_1fr_auto]", children: [
         /* @__PURE__ */ jsx("div", { className: "flex lg:justify-start", children: /* @__PURE__ */ jsx("p", { className: "font-semibold whitespace-nowrap", children: companyName }) }),
         /* @__PURE__ */ jsx("div", { className: "hidden flex-row items-center justify-center gap-4 lg:flex", children: Array.isArray(navigation) && navigation.length > 0 ? /* @__PURE__ */ jsx(NavigationMenu, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(NavigationMenuList, { className: "flex flex-row justify-center gap-4", children: navigation.map((item, index) => {
-          var _a, _b;
+          var _a;
           return /* @__PURE__ */ jsx(NavigationMenuItem, { children: item.url ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsx(
             CompoundButton,
             {
-              url: item.url,
+              action: coerceAction(item.action, item.url),
               label: item.label,
               variant: "ghost"
             }
@@ -69,20 +75,22 @@ const Header = ({
                   /* @__PURE__ */ jsx("p", { className: "text-base", children: item.label }),
                   item.description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: item.description }) : null
                 ] }),
-                ((_a = item.cta) == null ? void 0 : _a.url) ? /* @__PURE__ */ jsx(
-                  CompoundButton,
-                  {
-                    label: item.cta.label,
-                    url: item.cta.url,
-                    action: item.cta.action,
-                    variant: item.cta.variant,
-                    size: item.cta.size,
-                    icon: item.cta.icon,
-                    className: "mt-10"
-                  }
-                ) : null
+                (() => {
+                  const ctaAction = item.cta && coerceAction(item.cta.action, item.cta.url);
+                  return ctaAction && resolveActionUrl(ctaAction) ? /* @__PURE__ */ jsx(
+                    CompoundButton,
+                    {
+                      label: item.cta.label,
+                      action: ctaAction,
+                      variant: item.cta.variant,
+                      size: item.cta.size,
+                      icon: item.cta.icon,
+                      className: "mt-10"
+                    }
+                  ) : null;
+                })()
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col justify-end text-sm", children: (_b = item.items) == null ? void 0 : _b.map((subItem, index2) => /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col justify-end text-sm", children: (_a = item.items) == null ? void 0 : _a.map((subItem, index2) => /* @__PURE__ */ jsxs(
                 NavigationMenuLink,
                 {
                   href: subItem.url,
@@ -105,8 +113,7 @@ const Header = ({
               variant: item.variant,
               size: item.size,
               icon: item.icon,
-              url: item.url,
-              action: item.action,
+              action: coerceAction(item.action, item.url),
               className: cn({
                 "hidden md:inline": item.isHiddenOnMobile === "true"
               })

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

@@ -77,28 +77,23 @@ const defaultNavigationItems = [
 ];
 const defaultActionItems = [
   {
-    label: "Book a demo",
-    url: "#",
-    variant: "ghost",
-    icon: "none",
-    divider: "true",
-    isHiddenOnMobile: "true"
-  },
-  {
-    label: "Sign in",
-    url: "#",
-    variant: "outline",
-    icon: "none",
-    divider: "false",
-    isHiddenOnMobile: "false"
-  },
-  {
-    label: "Get started",
+    label: "Get Start",
     url: "#",
+    action: {
+      type: "email",
+      pageUrl: "",
+      externalUrl: "#",
+      openInNewTab: "false",
+      email: "",
+      subject: "",
+      phone: "",
+      sectionId: "",
+      downloadUrl: ""
+    },
     variant: "default",
     icon: "none",
     divider: "false",
-    isHiddenOnMobile: "true"
+    isHiddenOnMobile: "false"
   }
 ];
 const conf = {

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

@@ -15,7 +15,7 @@ const FullscreenHero = ({
   backgroundImage,
   styles
 }) => {
-  const sectionStyle = (styles == null ? void 0 : styles.sectionStyle) ?? "dark";
+  const sectionStyle = styles == null ? void 0 : styles.sectionStyle;
   const overlay = (styles == null ? void 0 : styles.overlay) ?? "dark";
   const backgroundColor = styles == null ? void 0 : styles.backgroundColor;
   const padding = styles == null ? void 0 : styles.padding;
@@ -60,7 +60,20 @@ function Content({ badge, heading, description, buttons }) {
     /* @__PURE__ */ jsx("hr", { className: "w-full my-4 border-foreground/20" }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mt-4", children: [
       description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-base leading-relaxed max-w-lg", children: description }),
-      buttons && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-4", children: buttons.map((btn, i) => /* @__PURE__ */ jsx(CompoundButton, { ...btn }, i)) })
+      buttons && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-4", children: buttons.map((btn, i) => /* @__PURE__ */ jsx(
+        CompoundButton,
+        {
+          label: btn.label,
+          action: btn.action,
+          variant: btn.variant,
+          size: btn.size,
+          icon: btn.icon,
+          type: btn.type,
+          disabled: btn.disabled,
+          className: btn.className
+        },
+        i
+      )) })
     ] })
   ] });
 }

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

@@ -32,7 +32,6 @@ const conf = {
     buttons: [
       {
         label: "Get Started",
-        url: "#",
         variant: "default",
         size: "default",
         icon: "none"

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

@@ -15,7 +15,7 @@ const GradientHero = ({
     CompoundContainer,
     {
       padding: styles == null ? void 0 : styles.padding,
-      sectionStyle: (styles == null ? void 0 : styles.sectionStyle) ?? "dark",
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
       backgroundColor: styles == null ? void 0 : styles.backgroundColor,
       children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl text-center", children: [
         badge && /* @__PURE__ */ jsx("span", { className: "bg-primary/10 text-primary mb-6 inline-block rounded-full px-3 py-1 text-xs font-medium", children: badge.label }),
@@ -34,7 +34,7 @@ const GradientHero = ({
           CompoundButton,
           {
             label: btn.label,
-            url: btn.url,
+            action: btn.action,
             variant: btn.variant,
             size: btn.size,
             icon: btn.icon

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

@@ -25,6 +25,7 @@ const conf = {
       { label: "Get Started Free", icon: "move-right", variant: "default" }
     ],
     styles: createStylesDefaults({
+      sectionStyle: "dark",
       gradientFrom: "var(--primary)",
       gradientTo: "var(--chart-2)"
     })

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

@@ -73,7 +73,7 @@ const GridHero = ({
                       CompoundButton,
                       {
                         label: button.label,
-                        url: button.url,
+                        action: button.action,
                         variant: button.variant,
                         size: button.size,
                         className: button.variant === "outline" ? "border-foreground border-2" : void 0

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

@@ -127,7 +127,7 @@ const HeroContent = ({
         CompoundButton,
         {
           label: button.label,
-          url: button.url,
+          action: button.action,
           variant: button.variant,
           size: button.size,
           icon: button.icon

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

@@ -14,7 +14,6 @@ export interface ImageHeroProps {
         padding?: CompoundContainerProps["padding"];
         sectionStyle?: CompoundContainerProps["sectionStyle"];
         backgroundColor?: string;
-        backgroundImage?: string;
         overlay?: "none" | "dark" | "gradient";
         align?: "left" | "center";
         minHeight?: "medium" | "large" | "full";

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

@@ -74,7 +74,7 @@ const ImageHero = ({
                       CompoundButton,
                       {
                         label: button.label,
-                        url: button.url,
+                        action: button.action,
                         variant: button.variant,
                         size: button.size,
                         icon: button.icon

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

@@ -1,6 +1,25 @@
 import { buttons, badge } from "../../../puck-base/core/fields.js";
+import { heroStylesDefaults, createStylesField, sectionOverlay } from "../../../puck-base/core/styles.js";
 import { ImageHero } from "./image-hero.js";
-import { heroStylesDefaults, heroStylesField } from "../../../puck-base/core/styles.js";
+const imageHeroStylesField = createStylesField({
+  overlay: sectionOverlay,
+  align: {
+    type: "radio",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" }
+    ]
+  },
+  minHeight: {
+    type: "select",
+    label: "Min Height",
+    options: [
+      { label: "Medium", value: "medium" },
+      { label: "Large", value: "large" },
+      { label: "Full", value: "full" }
+    ]
+  }
+});
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -15,7 +34,7 @@ const conf = {
         stream: false
       }
     },
-    styles: heroStylesField
+    styles: imageHeroStylesField
   },
   defaultProps: {
     heading: "Your Story Starts Here",
@@ -24,14 +43,12 @@ const conf = {
     buttons: [
       {
         label: "Get Started",
-        url: "#",
         variant: "default",
         size: "lg",
         icon: "none"
       },
       {
         label: "Learn More",
-        url: "#",
         variant: "outline",
         size: "lg",
         icon: "none"

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

@@ -13,7 +13,7 @@ const VideoHero = ({
   CompoundContainer,
   {
     padding: styles == null ? void 0 : styles.padding,
-    sectionStyle: (styles == null ? void 0 : styles.sectionStyle) ?? "dark",
+    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(

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

@@ -15,7 +15,6 @@ const locationButtonFields = {
 };
 const locationButtonDefaults = {
   label: "Button",
-  url: "",
   variant: "default",
   size: "default",
   icon: "none",
@@ -84,7 +83,6 @@ const conf = {
     buttons: [
       {
         label: "Call to visit",
-        url: "tel:+12345678900",
         variant: "default",
         size: "default",
         icon: "none",
@@ -92,7 +90,6 @@ const conf = {
       },
       {
         label: "Get directions",
-        url: "mailto:email@mybusiness.com",
         variant: "secondary",
         size: "default",
         icon: "none",

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

@@ -2,6 +2,7 @@ import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundButtonProps } from "@/components/puck-base/button";
 interface LocationButton extends Omit<CompoundButtonProps, "label"> {
     label?: string;
+    url?: string;
     colorMode?: "theme" | "custom";
     backgroundColor?: string;
     textColor?: string;

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

@@ -23,8 +23,7 @@ const LocationActionButton = ({
     CompoundButton,
     {
       label,
-      url,
-      action,
+      action: action ?? (url ? /^https?:\/\//i.test(url) ? { type: "external", externalUrl: url } : { type: "page", pageUrl: url } : void 0),
       variant,
       size,
       icon,

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

@@ -15,7 +15,6 @@ const locationButtonFields = {
 };
 const locationButtonDefaults = {
   label: "Button",
-  url: "",
   variant: "default",
   size: "default",
   icon: "none",
@@ -96,7 +95,6 @@ const conf = {
     buttons: [
       {
         label: "Get Directions",
-        url: "https://maps.google.com",
         variant: "default",
         size: "default",
         icon: "none",
@@ -104,7 +102,6 @@ const conf = {
       },
       {
         label: "Call Us",
-        url: "tel:+12345678900",
         variant: "outline",
         size: "default",
         icon: "none",

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

@@ -2,6 +2,7 @@ import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundButtonProps } from "@/components/puck-base/button";
 interface LocationButton extends Omit<CompoundButtonProps, "label"> {
     label?: string;
+    url?: string;
     colorMode?: "theme" | "custom";
     backgroundColor?: string;
     textColor?: string;

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

@@ -22,8 +22,7 @@ const ActionButton = ({
     CompoundButton,
     {
       label,
-      url,
-      action,
+      action: action ?? (url ? /^https?:\/\//i.test(url) ? { type: "external", externalUrl: url } : { type: "page", pageUrl: url } : void 0),
       variant,
       size,
       icon,

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

@@ -1,10 +1,12 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
+import type { Action } from "@/components/puck-base/core/types";
 export interface LocationEntry {
     name: string;
     address?: string;
     phone?: string;
     hours?: string;
     directionsUrl?: string;
+    directionsAction?: Action;
 }
 export interface Location3Props {
     heading?: string;

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

@@ -104,11 +104,14 @@ const Location3 = ({
                 ),
                 /* @__PURE__ */ jsx("span", { className: "whitespace-pre-line", children: loc.hours })
               ] }),
-              loc.directionsUrl && /* @__PURE__ */ jsx("div", { className: "mt-auto pt-2", children: /* @__PURE__ */ jsx(
+              (loc.directionsAction || loc.directionsUrl) && /* @__PURE__ */ jsx("div", { className: "mt-auto pt-2", children: /* @__PURE__ */ jsx(
                 CompoundButton,
                 {
                   label: "Get Directions",
-                  url: loc.directionsUrl,
+                  action: loc.directionsAction ?? (loc.directionsUrl ? {
+                    type: "external",
+                    externalUrl: loc.directionsUrl
+                  } : void 0),
                   variant: "outline",
                   size: "sm",
                   icon: "map-pin"

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

@@ -49,14 +49,12 @@ const conf = {
     buttons: [
       {
         label: "Explore our programs",
-        url: "/services",
         variant: "outline",
         size: "default",
         icon: "none"
       },
       {
         label: "Schedule your first session",
-        url: "#",
         variant: "default",
         size: "default",
         icon: "none"

package/dist/components/puck-block/metrics-sections/stats-2/stats-2.js

@@ -24,7 +24,6 @@ const Stats2 = ({
               CompoundButton,
               {
                 label: btn.label,
-                url: btn.url,
                 action: btn.action,
                 variant: btn.variant,
                 size: btn.size,

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

@@ -47,14 +47,12 @@ const conf = {
     buttons: [
       {
         label: "Get started",
-        url: "#",
         variant: "default",
         size: "default",
         icon: "none"
       },
       {
         label: "Learn more",
-        url: "#",
         variant: "outline",
         size: "default",
         icon: "none"

package/dist/components/puck-block/metrics-sections/stats-3/stats-3.js

@@ -26,7 +26,20 @@ const Stats3 = ({
           /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-8 lg:basis-1/2", children: [
             description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description }),
             buttons.some((button) => button == null ? void 0 : button.label) && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 sm:flex-row", children: buttons.map(
-              (button, index) => (button == null ? void 0 : button.label) ? /* @__PURE__ */ jsx(CompoundButton, { ...button }, index) : null
+              (button, index) => (button == null ? void 0 : button.label) ? /* @__PURE__ */ jsx(
+                CompoundButton,
+                {
+                  label: button.label,
+                  action: button.action,
+                  variant: button.variant,
+                  size: button.size,
+                  icon: button.icon,
+                  type: button.type,
+                  disabled: button.disabled,
+                  className: button.className
+                },
+                index
+              ) : null
             ) })
           ] })
         ] }) }),

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

@@ -23,7 +23,6 @@ const conf = {
         features: [features.defaultItemProps],
         button: {
           label: "Choose",
-          url: "#",
           variant: "default",
           size: "default",
           icon: "arrow-right"
@@ -55,7 +54,6 @@ const conf = {
       })),
       button: {
         label: "Sign up today",
-        url: "#",
         icon: "arrow-right",
         variant: "outline",
         size: "default"

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

@@ -50,7 +50,6 @@ const conf = {
         period: "per month",
         button: {
           label: "Get started",
-          url: "#",
           variant: "outline",
           size: "default",
           icon: "none"
@@ -80,7 +79,6 @@ const conf = {
         period: "per session",
         button: {
           label: "Schedule a session",
-          url: "#",
           variant: "outline",
           size: "default",
           icon: "none"
@@ -102,7 +100,6 @@ const conf = {
         period: "per month",
         button: {
           label: "Start your program",
-          url: "#",
           variant: "default",
           size: "default",
           icon: "none"
@@ -125,7 +122,6 @@ const conf = {
         period: "per month",
         button: {
           label: "Join the intensive",
-          url: "#",
           variant: "outline",
           size: "default",
           icon: "none"

package/dist/components/puck-block/showcase-sections/before-after-1/index.js

@@ -58,7 +58,6 @@ const conf = {
     ],
     button: {
       label: "Get started free",
-      url: "#",
       action: actionDefaults,
       variant: "default",
       size: "lg",

package/dist/components/puck-block/showcase-sections/case-study-1/case-study.js

@@ -13,7 +13,7 @@ const CaseStudy = ({
   CompoundContainer,
   {
     padding: styles == null ? void 0 : styles.padding,
-    sectionStyle: (styles == null ? void 0 : styles.sectionStyle) ?? "muted",
+    sectionStyle: styles == null ? void 0 : styles.sectionStyle,
     backgroundColor: styles == null ? void 0 : styles.backgroundColor,
     children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl", children: [
       (logo == null ? void 0 : logo.src) && /* @__PURE__ */ jsx("span", { className: "mb-8 inline-block opacity-60", children: /* @__PURE__ */ jsx(CompoundImage, { src: logo.src, alt: logo.alt || "", className: "h-8 w-auto" }) }),

package/dist/components/puck-block/showcase-sections/case-study-1/index.js

@@ -27,7 +27,7 @@ const conf = {
     ],
     quote: "This product changed everything for our team. We can't imagine going back.",
     author: "Jane Doe, CEO at Acme",
-    styles: createStylesDefaults()
+    styles: createStylesDefaults({ sectionStyle: "muted" })
   },
   render: CaseStudy
 };

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

@@ -5,7 +5,7 @@ const defaultMember = {
   name: "Jane Smith",
   role: "CEO & Co-founder",
   image: {
-    src: "https://dummyimage.com/600x600/f5f4f4/101010.png&text=Team+Member",
+    src: "https://picsum.photos/seed/Team%20Member/600/600",
     alt: "Team member"
   },
   bio: "Leading the team with 10+ years of experience in the industry."

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

@@ -32,7 +32,6 @@ const conf = {
     buttons: [
       {
         label: "Get started",
-        url: "#",
         action: { type: "external", pageUrl: "", externalUrl: "#", openInNewTab: "false", email: "", subject: "", phone: "", sectionId: "", downloadUrl: "" },
         variant: "default",
         size: "default",
@@ -40,7 +39,6 @@ const conf = {
       },
       {
         label: "Schedule a consultation",
-        url: "#",
         action: { type: "external", pageUrl: "", externalUrl: "#", openInNewTab: "false", email: "", subject: "", phone: "", sectionId: "", downloadUrl: "" },
         variant: "secondary",
         size: "default",

package/dist/components/puck-block/testimonial-sections/logo-marquee-1/index.js

@@ -40,7 +40,7 @@ const conf = {
       logoPlaceholder("DataFlow"),
       logoPlaceholder("CloudNet")
     ],
-    styles: createStylesDefaults({ speed: "normal" })
+    styles: createStylesDefaults({ sectionStyle: "muted", speed: "normal" })
   },
   render: LogoMarquee
 };

package/dist/components/puck-block/testimonial-sections/logo-marquee-1/logo-marquee.js

@@ -14,7 +14,7 @@ const LogoMarquee = ({
   CompoundContainer,
   {
     padding: styles == null ? void 0 : styles.padding,
-    sectionStyle: (styles == null ? void 0 : styles.sectionStyle) ?? "muted",
+    sectionStyle: styles == null ? void 0 : styles.sectionStyle,
     backgroundColor: styles == null ? void 0 : styles.backgroundColor,
     children: [
       heading && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-8 text-center text-sm font-medium tracking-wider uppercase", children: heading }),

package/dist/components/puck-block/testimonial-sections/review-section-1/index.js

@@ -5,7 +5,7 @@ const defaultReview = {
   author: "Alex Johnson",
   role: "Verified Buyer",
   avatar: {
-    src: "https://dummyimage.com/200x200/f5f4f4/101010.png&text=AJ",
+    src: "https://picsum.photos/seed/AJ/200/200",
     alt: "Reviewer avatar"
   },
   rating: 5,