dune-react 0.0.19 → 0.0.20

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

@@ -0,0 +1,118 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Button } from "../../../shadcn/button.js";
+import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "../../../shadcn/carousel.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
+const TestimonialCarousel = (props) => {
+  const {
+    heading,
+    description,
+    testimonials,
+    styles
+  } = {
+    ...TestimonialCarouselDefaults,
+    ...props
+  };
+  const {
+    ratingType = "logo",
+    hasHeading = false,
+    textAlign = "center",
+    carouselColumns = 1,
+    bordered = false,
+    hasButton = false
+  } = styles ?? {};
+  const [api, setApi] = useState();
+  const [current, setCurrent] = useState(0);
+  useEffect(() => {
+    if (!api) return;
+    setCurrent(api.selectedScrollSnap() + 1);
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+  const basisClass = carouselColumns === 3 ? "md:basis-1/2 lg:basis-1/3" : carouselColumns === 2 ? "md:basis-1/2" : "md:basis-full";
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "overflow-hidden px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+    hasHeading && /* @__PURE__ */ jsxs("div", { className: `mb-12 w-full max-w-lg md:mb-18 lg:mb-20 ${textAlign === "center" ? "mx-auto text-center" : ""}`, children: [
+      /* @__PURE__ */ jsx("h1", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Carousel,
+      {
+        setApi,
+        opts: { loop: true, align: "start" },
+        className: "overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(CarouselContent, { className: "ml-0 md:mx-3", children: testimonials.map((testimonial2, index) => /* @__PURE__ */ jsx(
+              CarouselItem,
+              {
+                className: `pl-0 ${carouselColumns === 1 ? "md:px-16" : "pr-6 md:pr-8"} ${basisClass}`,
+                children: /* @__PURE__ */ jsxs("div", { className: `mx-auto flex w-full max-w-lg flex-col items-center text-center ${bordered ? "border border-border-primary p-6 md:p-8" : ""}`, children: [
+                  ratingType === "logo" && testimonial2.logo && /* @__PURE__ */ jsx("div", { className: "mb-6 md:mb-8", children: /* @__PURE__ */ jsx(CompoundImage, { src: testimonial2.logo.src, alt: testimonial2.logo.alt, className: "max-h-14" }) }),
+                  ratingType === "stars" && /* @__PURE__ */ jsx("div", { className: "mb-5 flex md:mb-6", children: Array(testimonial2.numberOfStars).fill(null).map((_, starIndex) => /* @__PURE__ */ jsx(BiSolidStar, { className: "mr-1 size-6" }, starIndex)) }),
+                  /* @__PURE__ */ jsx("blockquote", { className: `font-bold ${carouselColumns === 1 ? "text-xl md:text-2xl" : "text-md leading-[1.4] md:text-xl"}`, children: testimonial2.quote }),
+                  /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-col items-center justify-center md:mt-8", children: [
+                    /* @__PURE__ */ jsx("div", { className: "mb-3 md:mb-4", children: /* @__PURE__ */ jsx(
+                      CompoundImage,
+                      {
+                        src: testimonial2.avatar.src,
+                        alt: testimonial2.avatar.alt,
+                        className: "size-16 min-h-16 min-w-16 rounded-full object-cover"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx("p", { className: "font-semibold", children: testimonial2.name }),
+                    /* @__PURE__ */ jsx("p", { children: testimonial2.position })
+                  ] }),
+                  hasButton && testimonial2.button && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Button, { variant: testimonial2.button.variant, size: testimonial2.button.size, children: testimonial2.button.label }) })
+                ] })
+              },
+              index
+            )) }),
+            /* @__PURE__ */ jsx(CarouselPrevious, { className: "mt-8 hidden md:flex md:size-14" }),
+            /* @__PURE__ */ jsx(CarouselNext, { className: "mt-8 hidden md:flex md:size-14" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-[30px] flex items-center justify-center md:mt-[46px]", children: testimonials.map((_, index) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => api == null ? void 0 : api.scrollTo(index),
+              className: cn("relative mx-[3px] inline-block size-2 rounded-full", {
+                "bg-black": current === index + 1,
+                "bg-neutral-darker/40": current !== index + 1
+              })
+            },
+            index
+          )) })
+        ]
+      }
+    )
+  ] }) });
+};
+const testimonial = {
+  quote: '"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."',
+  logo: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo" },
+  avatar: { src: "https://picsum.photos/seed/testimonial-carousel/100/100", alt: "Testimonial avatar" },
+  name: "Name Surname",
+  position: "Position, Company name",
+  numberOfStars: 5
+};
+const TestimonialCarouselDefaults = {
+  heading: "Customer testimonials",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  testimonials: [testimonial, testimonial, testimonial],
+  styles: {
+    ratingType: "logo",
+    hasHeading: false,
+    textAlign: "center",
+    carouselColumns: 1,
+    bordered: false,
+    hasButton: false
+  }
+};
+export {
+  TestimonialCarousel,
+  TestimonialCarouselDefaults
+};

package/dist/components/puck-block/testimonial-sections/testimonial-carousel/index.d.ts

@@ -0,0 +1,111 @@
+import { TestimonialCarousel, TestimonialCarouselDefaults } from "./component";
+import type { TestimonialCarouselProps } from "./component";
+export { TestimonialCarousel, TestimonialCarouselDefaults };
+export type { TestimonialCarouselProps };
+declare const conf: {
+    fields: {
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        testimonials: {
+            type: string;
+            getItemSummary: (item: {
+                name?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                quote: {
+                    type: string;
+                };
+                name: {
+                    type: string;
+                };
+                position: {
+                    type: string;
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                ratingType: {
+                    readonly type: "radio";
+                    readonly label: "Rating Type";
+                    readonly options: readonly [{
+                        readonly label: "Logo";
+                        readonly value: "logo";
+                    }, {
+                        readonly label: "Stars";
+                        readonly value: "stars";
+                    }];
+                };
+                hasHeading: {
+                    readonly type: "radio";
+                    readonly label: "Has Heading";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+                textAlign: {
+                    readonly type: "radio";
+                    readonly label: "Text Align";
+                    readonly options: readonly [{
+                        readonly label: "Left";
+                        readonly value: "left";
+                    }, {
+                        readonly label: "Center";
+                        readonly value: "center";
+                    }];
+                };
+                carouselColumns: {
+                    readonly type: "radio";
+                    readonly label: "Carousel Columns";
+                    readonly options: readonly [{
+                        readonly label: "1";
+                        readonly value: "1";
+                    }, {
+                        readonly label: "2";
+                        readonly value: "2";
+                    }, {
+                        readonly label: "3";
+                        readonly value: "3";
+                    }];
+                };
+                bordered: {
+                    readonly type: "radio";
+                    readonly label: "Bordered";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+                hasButton: {
+                    readonly type: "radio";
+                    readonly label: "Has Button";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: TestimonialCarouselProps;
+    render: (props: TestimonialCarouselProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/testimonial-sections/testimonial-carousel/index.js

@@ -0,0 +1,37 @@
+import { TestimonialCarousel, TestimonialCarouselDefaults } from "./component.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { testimonialStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    testimonials: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.name || `Testimonial ${index + 1}`,
+      arrayFields: {
+        quote: { type: "textarea" },
+        name: { type: "text" },
+        position: { type: "text" }
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        ratingType: testimonialStyleFields.ratingType,
+        hasHeading: testimonialStyleFields.hasHeading,
+        textAlign: testimonialStyleFields.textAlign,
+        carouselColumns: testimonialStyleFields.carouselColumns,
+        bordered: testimonialStyleFields.bordered,
+        hasButton: testimonialStyleFields.hasButton
+      }
+    }
+  },
+  defaultProps: TestimonialCarouselDefaults,
+  render: TestimonialCarousel
+};
+export {
+  TestimonialCarousel,
+  TestimonialCarouselDefaults,
+  conf as default
+};

package/dist/components/puck-block/text-sections/aside-nav-content/component.d.ts

@@ -0,0 +1,17 @@
+import type { TextComponentProps, TextSectionBaseProps } from "../props";
+type AsideLink = {
+    title: string;
+    href: string;
+};
+type Aside = {
+    title: string;
+    links: AsideLink[];
+};
+type AsideNavContentExtra = {
+    aside: Aside;
+    prose: string;
+};
+export type AsideNavContentProps = TextComponentProps<AsideNavContentExtra>;
+export declare const AsideNavContent: (props: AsideNavContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AsideNavContentDefaults: Partial<TextSectionBaseProps> & AsideNavContentExtra;
+export {};

package/dist/components/puck-block/text-sections/aside-nav-content/component.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { cn } from "../../../../utils/css-utils.js";
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../../../shadcn/accordion.js";
+const AsideNavContent = (props) => {
+  var _a;
+  const {
+    aside,
+    prose,
+    styles
+  } = {
+    ...AsideNavContentDefaults,
+    ...props
+  };
+  const {
+    asidePosition = "left"
+  } = styles ?? {};
+  const currentHash = (_a = aside.links[0]) == null ? void 0 : _a.href;
+  const asideContent = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-24", children: /* @__PURE__ */ jsx(Accordion, { type: "single", defaultValue: ["aside-menu"], className: "lg:block", collapsible: true, children: /* @__PURE__ */ jsxs(AccordionItem, { value: "aside-menu", className: "border-none", children: [
+    /* @__PURE__ */ jsx(AccordionTrigger, { className: "flex cursor-pointer items-center justify-between gap-3 border border-border-primary px-4 py-3 lg:pointer-events-none lg:cursor-auto lg:border-none lg:p-0 [&_svg]:size-4 [&_svg]:lg:hidden", children: /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold leading-[1.4] md:text-2xl", children: aside.title }) }),
+    /* @__PURE__ */ jsx(AccordionContent, { className: "pb-0", children: /* @__PURE__ */ jsx("div", { className: "mt-3 md:mt-4", children: aside.links.map((link, index) => /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: link.href,
+        className: cn("block px-4 py-3 md:text-md", {
+          "bg-background-secondary font-semibold": link.href === currentHash
+        }),
+        children: link.title
+      },
+      index
+    )) }) })
+  ] }) }) }) });
+  const proseContent = /* @__PURE__ */ jsx("div", { className: "max-w-lg", children: /* @__PURE__ */ jsx("div", { className: "prose md:prose-md lg:prose-lg", dangerouslySetInnerHTML: { __html: prose } }) });
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-y-8 lg:grid-cols-[20rem_1fr] lg:gap-x-16 xxl:gap-x-48", children: asidePosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    asideContent,
+    proseContent
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    proseContent,
+    asideContent
+  ] }) }) }) });
+};
+const AsideNavContentDefaults = {
+  aside: {
+    title: "Table of contents",
+    links: [
+      { title: "Heading 2", href: "#heading-2" },
+      { title: "Heading 3", href: "#heading-3" },
+      { title: "Heading 4", href: "#heading-4" },
+      { title: "Heading 5", href: "#heading-5" },
+      { title: "Heading 6", href: "#heading-6" }
+    ]
+  },
+  prose: `<h2 id="heading-2">Heading 2</h2><p>Dolor enim eu tortor urna sed duis nulla. Aliquam vestibulum, nulla odio nisl vitae. In aliquet pellentesque aenean hac vestibulum turpis mi bibendum diam.</p><h3 id="heading-3">Heading 3</h3><p>Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus velit, sed auctor. Porttitor fames arcu quis fusce augue enim.</p><h4 id="heading-4">Heading 4</h4><p>Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies.</p><h5 id="heading-5">Heading 5</h5><p>Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies.</p><h6 id="heading-6">Heading 6</h6><p>Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa.</p>`,
+  styles: {
+    asidePosition: "left"
+  }
+};
+export {
+  AsideNavContent,
+  AsideNavContentDefaults
+};

package/dist/components/puck-block/text-sections/aside-nav-content/index.d.ts

@@ -0,0 +1,63 @@
+import { AsideNavContent, AsideNavContentDefaults } from "./component";
+import type { AsideNavContentProps } from "./component";
+export { AsideNavContent, AsideNavContentDefaults };
+export type { AsideNavContentProps };
+declare const conf: {
+    fields: {
+        aside: {
+            type: string;
+            label: string;
+            objectFields: {
+                title: {
+                    type: string;
+                };
+                links: {
+                    type: string;
+                    getItemSummary: (item: {
+                        title?: string;
+                    }, index?: number) => string;
+                    arrayFields: {
+                        title: {
+                            type: string;
+                        };
+                        href: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+        };
+        prose: {
+            type: string;
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                asidePosition: {
+                    readonly type: "radio";
+                    readonly label: "Aside Position";
+                    readonly options: readonly [{
+                        readonly label: "Left";
+                        readonly value: "left";
+                    }, {
+                        readonly label: "Right";
+                        readonly value: "right";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: Partial<import("../props").TextSectionBaseProps> & {
+        aside: {
+            title: string;
+            links: {
+                title: string;
+                href: string;
+            }[];
+        };
+        prose: string;
+    };
+    render: (props: AsideNavContentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/text-sections/aside-nav-content/index.js

@@ -0,0 +1,36 @@
+import { AsideNavContent, AsideNavContentDefaults } from "./component.js";
+import { textStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    aside: {
+      type: "object",
+      label: "Aside Navigation",
+      objectFields: {
+        title: { type: "text" },
+        links: {
+          type: "array",
+          getItemSummary: (item, index = 0) => item.title || `Link ${index + 1}`,
+          arrayFields: {
+            title: { type: "text" },
+            href: { type: "text" }
+          }
+        }
+      }
+    },
+    prose: { type: "textarea" },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        asidePosition: textStyleFields.asidePosition
+      }
+    }
+  },
+  defaultProps: AsideNavContentDefaults,
+  render: AsideNavContent
+};
+export {
+  AsideNavContent,
+  AsideNavContentDefaults,
+  conf as default
+};

package/dist/components/puck-block/text-sections/blog-article/component.d.ts

@@ -0,0 +1,30 @@
+import type { TextComponentProps, TextSectionBaseProps, BaseImage } from "../props";
+type SocialMediaLink = {
+    platform: string;
+    url: string;
+};
+type Tag = {
+    label: string;
+    url: string;
+};
+type Author = {
+    name: string;
+    titleAndCompany: string;
+    avatar: BaseImage;
+};
+type Breadcrumb = {
+    label: string;
+    url: string;
+};
+type BlogArticleExtra = {
+    prose: string;
+    socialMediaLinks: SocialMediaLink[];
+    tags: Tag[];
+    shareTitle: string;
+    author: Author;
+    breadcrumbs?: Breadcrumb[];
+};
+export type BlogArticleProps = TextComponentProps<BlogArticleExtra>;
+export declare const BlogArticle: (props: BlogArticleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BlogArticleDefaults: Partial<TextSectionBaseProps> & BlogArticleExtra;
+export {};

package/dist/components/puck-block/text-sections/blog-article/component.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CompoundImage } from "../../../puck-base/image.js";
+const BlogArticle = (props) => {
+  const {
+    prose,
+    socialMediaLinks = [],
+    tags = [],
+    shareTitle,
+    author,
+    breadcrumbs,
+    styles
+  } = {
+    ...BlogArticleDefaults,
+    ...props
+  };
+  const {
+    hasBreadcrumbs = false
+  } = styles ?? {};
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-lg", children: [
+    hasBreadcrumbs && breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx("nav", { className: "mb-6 md:mb-8", children: /* @__PURE__ */ jsx("ol", { className: "flex flex-wrap items-center gap-2 text-sm", children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+      index > 0 && /* @__PURE__ */ jsx("span", { children: "/" }),
+      /* @__PURE__ */ jsx("a", { href: crumb.url, className: "hover:underline", children: crumb.label })
+    ] }, index)) }) }),
+    /* @__PURE__ */ jsx("div", { className: "prose mb-12 md:prose-md lg:prose-lg md:mb-20", dangerouslySetInnerHTML: { __html: prose } }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 sm:flex-row sm:items-end sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sm:max-w-1/2", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-semibold md:text-md", children: shareTitle }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3 flex items-start gap-2 md:mt-4", children: socialMediaLinks.map((link, index) => /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: link.url,
+            className: "size-8 rounded-[1.25rem] bg-background-secondary p-1 flex items-center justify-center text-sm font-bold",
+            children: link.platform.charAt(0)
+          },
+          index
+        )) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "sm:max-w-1/2", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-2 sm:justify-end", children: tags.map((tag, index) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx("a", { href: tag.url, className: "bg-background-secondary px-2 py-1 text-sm font-semibold", children: tag.label }) }, index)) }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "my-8 h-px bg-border-primary md:my-12" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        CompoundImage,
+        {
+          src: author.avatar.src,
+          alt: author.avatar.alt,
+          className: "size-14 rounded-full object-cover"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "grow", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-semibold md:text-md", children: author.name }),
+        /* @__PURE__ */ jsx("p", { children: author.titleAndCompany })
+      ] })
+    ] })
+  ] }) }) });
+};
+const BlogArticleDefaults = {
+  prose: `<h3>Introduction</h3><p>Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam. Mauris posuere vulputate arcu amet, vitae nisi, tellus tincidunt.</p><p>Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus velit, sed auctor.</p><h4>Conclusion</h4><p>Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis.</p>`,
+  shareTitle: "Share this post",
+  socialMediaLinks: [
+    { platform: "Link", url: "#" },
+    { platform: "LinkedIn", url: "#" },
+    { platform: "Twitter", url: "#" },
+    { platform: "Facebook", url: "#" }
+  ],
+  tags: [
+    { label: "Tag one", url: "#" },
+    { label: "Tag two", url: "#" },
+    { label: "Tag three", url: "#" }
+  ],
+  author: {
+    name: "Full name",
+    titleAndCompany: "Job title, Company name",
+    avatar: {
+      src: "https://picsum.photos/seed/blog-author/56/56",
+      alt: "Author avatar"
+    }
+  },
+  breadcrumbs: [
+    { label: "Home", url: "/" },
+    { label: "Blog", url: "/blog" },
+    { label: "Article", url: "#" }
+  ],
+  styles: {
+    hasBreadcrumbs: false
+  }
+};
+export {
+  BlogArticle,
+  BlogArticleDefaults
+};