dune-react 0.0.8 → 0.0.10

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
 import { cn } from "../../../../utils/css-utils.js";
 const columnClasses = {
   2: "grid-cols-1 sm:grid-cols-2",
@@ -7,27 +8,33 @@ const columnClasses = {
   4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
 };
 const TeamGrid = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
   members = [],
   columns = 3,
-  layout = "card"
-}) => /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-12", children: [
-  (heading || description) && /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-    heading && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mx-auto mt-4 max-w-2xl text-lg", children: description })
-  ] }),
-  /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("grid gap-8", columnClasses[columns] ?? columnClasses[3]),
-      children: members.map((member, index) => /* @__PURE__ */ jsx(MemberCard, { member, layout }, index))
-    }
-  )
-] }) });
+  layout = "card",
+  styles
+}) => /* @__PURE__ */ jsx(
+  CompoundContainer,
+  {
+    padding: styles == null ? void 0 : styles.padding,
+    sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+    backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+    children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-12", children: [
+      (heading || description) && /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        heading && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mx-auto mt-4 max-w-2xl text-lg", children: description })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("grid gap-8", columnClasses[columns] ?? columnClasses[3]),
+          children: members.map((member, index) => /* @__PURE__ */ jsx(MemberCard, { member, layout }, index))
+        }
+      )
+    ] })
+  }
+);
 const MemberCard = ({
   member,
   layout
@@ -35,14 +42,7 @@ const MemberCard = ({
   var _a, _b, _c;
   if (layout === "round") {
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "bg-muted w-full aspect-square overflow-hidden rounded-full", children: ((_a = member.image) == null ? void 0 : _a.src) && /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: member.image.src,
-          alt: member.image.alt ?? member.name,
-          className: "h-full w-full object-cover"
-        }
-      ) }),
+      /* @__PURE__ */ jsx("div", { className: "bg-muted w-full aspect-square overflow-hidden rounded-full [&>span]:h-full [&>span]:w-full", children: ((_a = member.image) == null ? void 0 : _a.src) && /* @__PURE__ */ jsx(CompoundImage, { src: member.image.src, alt: member.image.alt ?? member.name, className: "h-full w-full object-cover" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: member.name }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: member.role }),
@@ -52,14 +52,7 @@ const MemberCard = ({
   }
   if (layout === "simple") {
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "bg-muted h-16 w-16 shrink-0 overflow-hidden rounded-full", children: ((_b = member.image) == null ? void 0 : _b.src) && /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: member.image.src,
-          alt: member.image.alt ?? member.name,
-          className: "h-full w-full object-cover"
-        }
-      ) }),
+      /* @__PURE__ */ jsx("div", { className: "bg-muted h-16 w-16 shrink-0 overflow-hidden rounded-full [&>span]:h-full [&>span]:w-full", children: ((_b = member.image) == null ? void 0 : _b.src) && /* @__PURE__ */ jsx(CompoundImage, { src: member.image.src, alt: member.image.alt ?? member.name, className: "h-full w-full object-cover" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold", children: member.name }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: member.role }),
@@ -68,14 +61,7 @@ const MemberCard = ({
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: "bg-card text-card-foreground border-border overflow-hidden rounded-xl border", children: [
-    /* @__PURE__ */ jsx("div", { className: "bg-muted aspect-[4/3]", children: ((_c = member.image) == null ? void 0 : _c.src) && /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: member.image.src,
-        alt: member.image.alt ?? member.name,
-        className: "h-full w-full object-cover"
-      }
-    ) }),
+    /* @__PURE__ */ jsx("div", { className: "bg-muted aspect-[4/3] [&>span]:h-full [&>span]:w-full", children: ((_c = member.image) == null ? void 0 : _c.src) && /* @__PURE__ */ jsx(CompoundImage, { src: member.image.src, alt: member.image.alt ?? member.name, className: "h-full w-full object-cover" }) }),
     /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
       /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: member.name }),
       /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: member.role }),

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

@@ -0,0 +1,5 @@
+import { ComponentConfig } from "@puckeditor/core";
+import { TeamGrid2Props } from "./team-grid-2";
+export type { TeamGrid2Props };
+export declare const conf: ComponentConfig<TeamGrid2Props>;
+export default conf;

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

@@ -0,0 +1,62 @@
+import { image1x1Placeholder, image, buttons } from "../../../puck-base/core/fields.js";
+import { TeamGrid2 } from "./team-grid-2.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const defaultMember = {
+  name: "Jane Smith",
+  role: "Founder & Head Trainer",
+  image: image1x1Placeholder,
+  description: "Builds custom training programs tailored to your goals and fitness level. Direct feedback, real progress tracking, and support every step of the way."
+};
+const conf = {
+  fields: {
+    heading: { type: "text", contentEditable: true },
+    description: { type: "textarea", contentEditable: true },
+    buttons,
+    members: {
+      type: "array",
+      max: 8,
+      getItemSummary: (item, index = 0) => item.name || `Member ${index + 1}`,
+      arrayFields: {
+        name: { type: "text", contentEditable: true },
+        role: { type: "text", contentEditable: true },
+        image,
+        description: { type: "textarea", contentEditable: true }
+      },
+      defaultItemProps: defaultMember
+    },
+    styles: createStylesField()
+  },
+  defaultProps: {
+    heading: "Your personal\nfitness partner",
+    description: "We're here to guide you toward your health goals with personalized training and real accountability. Every session is built around what works for you.",
+    buttons: [
+      {
+        label: "Get started",
+        url: "#",
+        action: { type: "external", pageUrl: "", externalUrl: "#", openInNewTab: "false", email: "", subject: "", phone: "", sectionId: "", downloadUrl: "" },
+        variant: "default",
+        size: "default",
+        icon: "none"
+      },
+      {
+        label: "Schedule a consultation",
+        url: "#",
+        action: { type: "external", pageUrl: "", externalUrl: "#", openInNewTab: "false", email: "", subject: "", phone: "", sectionId: "", downloadUrl: "" },
+        variant: "secondary",
+        size: "default",
+        icon: "none"
+      }
+    ],
+    members: [
+      { ...defaultMember, name: "Jane Smith", role: "Founder & Head Trainer" },
+      { ...defaultMember, name: "Alex Johnson", role: "Fitness Specialist" },
+      { ...defaultMember, name: "Sarah Williams", role: "Strength Coach" },
+      { ...defaultMember, name: "Michael Chen", role: "Nutrition Coach" }
+    ],
+    styles: createStylesDefaults()
+  },
+  render: TeamGrid2
+};
+export {
+  conf
+};

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

@@ -0,0 +1,23 @@
+import { CompoundContainerProps } from "@/components/puck-base/container";
+import { CompoundButtonProps } from "@/components/puck-base/button";
+export interface TeamMember2 {
+    name: string;
+    role: string;
+    image?: {
+        src: string;
+        alt?: string;
+    };
+    description?: string;
+}
+export interface TeamGrid2Props {
+    heading?: string;
+    description?: string;
+    buttons?: CompoundButtonProps[];
+    members?: TeamMember2[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
+}
+export declare const TeamGrid2: ({ heading, description, buttons, members, styles, }: TeamGrid2Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const TeamGrid2 = ({
+  heading,
+  description,
+  buttons = [],
+  members = [],
+  styles
+}) => /* @__PURE__ */ jsx(
+  CompoundContainer,
+  {
+    padding: styles == null ? void 0 : styles.padding,
+    sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+    backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+    children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 md:gap-16", children: [
+      (heading || description || buttons.length > 0) && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:gap-8 lg:flex-row lg:justify-between", children: [
+        heading && /* @__PURE__ */ jsx("div", { className: "w-full lg:basis-1/2", children: /* @__PURE__ */ jsx("h2", { className: "text-foreground max-w-xl text-4xl font-bold leading-tight tracking-tight md:text-5xl whitespace-pre-line", children: heading }) }),
+        (description || buttons.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-8 lg:basis-1/2", children: [
+          description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-base leading-relaxed whitespace-pre-line", children: description }),
+          buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 sm:flex-row sm:flex-wrap", children: buttons.map((btn, i) => /* @__PURE__ */ jsx(CompoundButton, { ...btn }, i)) })
+        ] })
+      ] }) }),
+      members.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-10 md:grid-cols-2 md:gap-8 lg:grid-cols-4", children: members.map((member, index) => /* @__PURE__ */ jsx(MemberCard, { member }, index)) })
+    ] })
+  }
+);
+const MemberCard = ({ member }) => {
+  var _a;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "bg-muted relative w-full overflow-hidden rounded-3xl [&>span]:h-full [&>span]:w-full", style: { aspectRatio: "3/4" }, children: ((_a = member.image) == null ? void 0 : _a.src) && /* @__PURE__ */ jsx(CompoundImage, { src: member.image.src, alt: member.image.alt ?? member.name, className: "h-full w-full object-cover" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "border-b border-border pb-3", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: member.role }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold leading-snug", children: member.name }),
+        member.description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-base leading-relaxed whitespace-pre-line", children: member.description })
+      ] })
+    ] })
+  ] });
+};
+export {
+  TeamGrid2
+};

package/dist/components/puck-block/team-sections/team-profiles-1/index.d.ts

@@ -0,0 +1,5 @@
+import { ComponentConfig } from "@puckeditor/core";
+import { TeamProfilesProps } from "./team-profiles";
+export type { TeamProfilesProps };
+export declare const conf: ComponentConfig<TeamProfilesProps>;
+export default conf;

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

@@ -0,0 +1,53 @@
+import { image1x1Placeholder, image } from "../../../puck-base/core/fields.js";
+import { TeamProfiles } from "./team-profiles.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const defaultMember = {
+  name: "Jane Smith",
+  role: "CEO & Co-founder",
+  image: image1x1Placeholder,
+  description: "Leads the team with a passion for innovation and a commitment to excellence.",
+  instagramUrl: "",
+  linkedinUrl: ""
+};
+const conf = {
+  fields: {
+    heading: { type: "text", contentEditable: true },
+    description: { type: "textarea", contentEditable: true },
+    members: {
+      type: "array",
+      max: 8,
+      getItemSummary: (item, index = 0) => item.name || `Member ${index + 1}`,
+      arrayFields: {
+        name: { type: "text", contentEditable: true },
+        role: { type: "text", contentEditable: true },
+        image,
+        description: { type: "textarea", contentEditable: true },
+        instagramUrl: { type: "text", label: "Instagram URL" },
+        linkedinUrl: { type: "text", label: "LinkedIn URL" }
+      },
+      defaultItemProps: defaultMember
+    },
+    styles: createStylesField()
+  },
+  defaultProps: {
+    heading: "Your Personal\ntraining partner",
+    description: "Our team brings focused expertise and personalized coaching to help you reach your goals.",
+    members: [
+      {
+        ...defaultMember,
+        name: "Jane Smith",
+        role: "Founder & Head Coach"
+      },
+      {
+        ...defaultMember,
+        name: "Alex Johnson",
+        role: "Strength & Conditioning Coach"
+      }
+    ],
+    styles: createStylesDefaults()
+  },
+  render: TeamProfiles
+};
+export {
+  conf
+};

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

@@ -0,0 +1,23 @@
+import { CompoundContainerProps } from "@/components/puck-base/container";
+export interface TeamMemberProfile {
+    name: string;
+    role: string;
+    image?: {
+        src: string;
+        alt?: string;
+    };
+    description?: string;
+    instagramUrl?: string;
+    linkedinUrl?: string;
+}
+export interface TeamProfilesProps {
+    heading?: string;
+    description?: string;
+    members?: TeamMemberProfile[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
+}
+export declare const TeamProfiles: ({ heading, description, members, styles, }: TeamProfilesProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,105 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const InstagramIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    width: "20",
+    height: "20",
+    className: "size-5",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2m0 3.75c-1.697 0-1.91.007-2.577.038-.665.03-1.12.136-1.517.29-.411.16-.76.374-1.107.721a3.1 3.1 0 0 0-.72 1.107c-.155.398-.261.852-.291 1.517-.03.667-.038.88-.038 2.577s.007 1.91.038 2.577c.03.665.136 1.12.29 1.517.16.411.374.76.721 1.107.347.348.696.561 1.107.72.398.155.852.261 1.517.291.667.03.88.038 2.577.038s1.91-.007 2.577-.038c.665-.03 1.12-.136 1.517-.29.411-.16.76-.373 1.107-.721.348-.348.561-.696.72-1.107.155-.398.261-.852.291-1.517.03-.667.038-.88.038-2.577s-.007-1.91-.038-2.577c-.03-.665-.136-1.12-.29-1.517a3.1 3.1 0 0 0-.721-1.107 3.1 3.1 0 0 0-1.107-.72c-.398-.155-.852-.261-1.517-.291-.667-.03-.88-.038-2.577-.038m0 1.126c1.669 0 1.867.006 2.525.037.61.027.94.13 1.161.215.292.113.5.249.719.467s.354.427.467.719c.086.22.188.551.215 1.16.03.66.037.857.037 2.526s-.006 1.867-.037 2.525c-.027.61-.13.94-.215 1.161-.113.292-.249.5-.467.719a1.9 1.9 0 0 1-.719.467c-.22.086-.551.188-1.16.215-.66.03-.857.037-2.526.037s-1.867-.006-2.526-.037c-.609-.027-.94-.13-1.16-.215a1.9 1.9 0 0 1-.719-.467 1.9 1.9 0 0 1-.467-.719c-.086-.22-.188-.551-.215-1.16-.03-.66-.037-.857-.037-2.526s.006-1.867.037-2.526c.027-.609.13-.94.215-1.16.113-.292.249-.5.467-.719s.427-.354.719-.467c.22-.086.551-.188 1.16-.215.66-.03.857-.037 2.526-.037m0 1.915a3.21 3.21 0 1 0 0 6.419 3.21 3.21 0 0 0 0-6.42m0 5.292a2.083 2.083 0 1 1 0-4.166 2.083 2.083 0 0 1 0 4.166m4.086-5.42a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+const LinkedInIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    width: "20",
+    height: "20",
+    className: "size-5",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M19.557 2A2.445 2.445 0 0 1 22 4.444v15.113A2.445 2.445 0 0 1 19.557 22H4.444A2.445 2.445 0 0 1 2 19.557V4.444A2.445 2.445 0 0 1 4.444 2zM8.268 18.534V9.717H5.337v8.817zm10.568 0v-5.056c0-2.708-1.446-3.968-3.374-3.968-1.555 0-2.252.855-2.642 1.456V9.717H9.89c.039.828 0 8.817 0 8.817h2.93V13.61c0-.263.02-.527.097-.715.212-.527.694-1.072 1.504-1.072 1.06 0 1.484.809 1.484 1.994v4.717zM6.822 5.466c-1.003 0-1.658.659-1.658 1.523 0 .846.635 1.524 1.62 1.524 1.021 0 1.677-.678 1.677-1.524-.02-.863-.635-1.521-1.639-1.523",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+const TeamProfiles = ({
+  heading,
+  description,
+  members = [],
+  styles
+}) => /* @__PURE__ */ jsx(
+  CompoundContainer,
+  {
+    padding: styles == null ? void 0 : styles.padding,
+    sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+    backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+    children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 md:gap-16", children: [
+      (heading || description) && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:gap-8 lg:flex-row lg:justify-between", children: [
+        heading && /* @__PURE__ */ jsx("div", { className: "w-full lg:basis-1/2", children: /* @__PURE__ */ jsx("h2", { className: "text-foreground max-w-xl text-4xl font-bold leading-tight tracking-tight md:text-5xl", children: heading }) }),
+        description && /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-8 lg:basis-1/2", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-xl text-base leading-relaxed", children: description }) })
+      ] }) }),
+      members.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-10 md:gap-8 lg:grid-cols-2", children: members.map((member, index) => /* @__PURE__ */ jsx(MemberProfileCard, { member }, index)) })
+    ] })
+  }
+);
+const MemberProfileCard = ({ member }) => {
+  var _a;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 md:flex-row md:gap-8", children: [
+    /* @__PURE__ */ jsx("div", { className: "shrink-0 md:w-48", children: /* @__PURE__ */ jsx("div", { className: "bg-muted relative h-72 w-full overflow-hidden rounded-3xl md:h-48 md:w-48 [&>span]:h-full [&>span]:w-full", children: ((_a = member.image) == null ? void 0 : _a.src) && /* @__PURE__ */ jsx(CompoundImage, { src: member.image.src, alt: member.image.alt ?? member.name, className: "h-full w-full object-cover" }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold leading-snug", children: member.name }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: member.role })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "border-border flex flex-col gap-2 border-t pt-4", children: [
+        member.description && /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm leading-relaxed whitespace-pre-line", children: member.description }),
+        (member.instagramUrl || member.linkedinUrl) && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-3", children: [
+          member.instagramUrl && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: member.instagramUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-foreground hover:text-muted-foreground transition-colors",
+              "aria-label": `${member.name} on Instagram`,
+              children: /* @__PURE__ */ jsx(InstagramIcon, {})
+            }
+          ),
+          member.linkedinUrl && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: member.linkedinUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-foreground hover:text-muted-foreground transition-colors",
+              "aria-label": `${member.name} on LinkedIn`,
+              children: /* @__PURE__ */ jsx(LinkedInIcon, {})
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+};
+export {
+  TeamProfiles
+};

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

@@ -1,15 +1,17 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundImageProps } from "@/components/puck-base/image";
 export interface CustomersProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
-    layout?: "section" | "inline";
     heading: string;
-    customers: {
-        name: string;
+    items: {
+        name?: string;
         image?: CompoundImageProps;
         url?: string;
     }[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        layout?: "section" | "inline";
+    };
 }
-export declare const Customers: ({ padding, sectionStyle, backgroundColor, layout, heading, customers, }: CustomersProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Customers: ({ heading, items, styles, }: CustomersProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -7,19 +7,16 @@ import { Carousel, CarouselContent, CarouselItem } from "../../../shadcn/carouse
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const Customers = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
-  layout = "section",
   heading,
-  customers
+  items,
+  styles
 }) => {
   const [api, setApi] = useState();
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isPaused, setIsPaused] = useState(false);
   const prefersReducedMotion = usePrefersReducedMotion();
-  const isSectionLayout = layout === "section";
-  const isInlineLayout = layout === "inline";
+  const isSectionLayout = ((styles == null ? void 0 : styles.layout) ?? "section") === "section";
+  const isInlineLayout = (styles == null ? void 0 : styles.layout) === "inline";
   useEffect(() => {
     if (!api || prefersReducedMotion || isPaused) {
       return;
@@ -38,9 +35,9 @@ const Customers = ({
   return /* @__PURE__ */ jsx(
     CompoundContainer,
     {
-      padding,
-      sectionStyle,
-      backgroundColor,
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -80,7 +77,7 @@ const Customers = ({
                       onMouseOut: () => {
                         setIsPaused(false);
                       },
-                      children: /* @__PURE__ */ jsx(CarouselContent, { children: customers.map((customer, index) => {
+                      children: /* @__PURE__ */ jsx(CarouselContent, { children: items.map((customer, index) => {
                         var _a;
                         return /* @__PURE__ */ jsx(CarouselItem, { className: "basis-1/4 lg:basis-1/6", children: /* @__PURE__ */ jsx("div", { className: "bg-muted flex aspect-square items-center justify-center rounded-md p-6", children: ((_a = customer.image) == null ? void 0 : _a.src) ? /* @__PURE__ */ jsx(
                           CompoundImage,

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

@@ -1,9 +1,20 @@
-import { paddingDefaults, padding, image1x1Placeholder, image, heading, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
+import { image1x1Placeholder, image, heading, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
 import { Customers } from "./customers.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const customersStylesField = createStylesField({
+  layout: {
+    type: "radio",
+    label: "Layout",
+    options: [
+      { label: "Section", value: "section" },
+      { label: "Inline", value: "inline" }
+    ]
+  }
+});
 const conf = {
   fields: {
     heading,
-    customers: {
+    items: {
       type: "array",
       max: 15,
       getItemSummary: (item, index = 0) => item.name || `Customer ${index + 1}`,
@@ -16,29 +27,18 @@ const conf = {
         image: image1x1Placeholder
       }
     },
-    layout: {
-      type: "radio",
-      options: [
-        {
-          label: "section",
-          value: "section"
-        },
-        { label: "inline", value: "inline" }
-      ]
-    },
-    padding
+    styles: customersStylesField
   },
   defaultProps: {
-    padding: paddingDefaults,
-    layout: "section",
     heading: "Trusted by hundreds of businesses worldwide",
-    customers: Array.from({ length: 10 }).map((_, index) => ({
+    items: Array.from({ length: 10 }).map((_, index) => ({
       name: `Customer ${index + 1}`,
       image: {
         src: getPlaceholderImageUrl("1000x1000", `Customer ${index + 1}`),
         alt: ""
       }
-    }))
+    })),
+    styles: createStylesDefaults({ layout: "section" })
   },
   render: Customers
 };

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

@@ -1,9 +1,21 @@
-import { paddingDefaults, padding, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
+import { getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
 import { LogoMarquee } from "./logo-marquee.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const logoPlaceholder = (name) => ({
   src: getPlaceholderImageUrl("200x60", name),
   alt: name
 });
+const marqueeStylesField = createStylesField({
+  speed: {
+    type: "radio",
+    label: "Speed",
+    options: [
+      { label: "Slow", value: "slow" },
+      { label: "Normal", value: "normal" },
+      { label: "Fast", value: "fast" }
+    ]
+  }
+});
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -17,15 +29,7 @@ const conf = {
       },
       defaultItemProps: logoPlaceholder("Brand")
     },
-    speed: {
-      type: "radio",
-      options: [
-        { label: "Slow", value: "slow" },
-        { label: "Normal", value: "normal" },
-        { label: "Fast", value: "fast" }
-      ]
-    },
-    padding
+    styles: marqueeStylesField
   },
   defaultProps: {
     heading: "Trusted by industry leaders",
@@ -36,8 +40,7 @@ const conf = {
       logoPlaceholder("DataFlow"),
       logoPlaceholder("CloudNet")
     ],
-    speed: "normal",
-    padding: paddingDefaults
+    styles: createStylesDefaults({ speed: "normal" })
   },
   render: LogoMarquee
 };

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

@@ -1,11 +1,15 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface LogoMarqueeProps {
-    padding?: CompoundContainerProps["padding"];
     heading?: string;
     logos?: Array<{
         src: string;
         alt: string;
     }>;
-    speed?: "slow" | "normal" | "fast";
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        speed?: "slow" | "normal" | "fast";
+    };
 }
-export declare const LogoMarquee: ({ padding, heading, logos, speed, }: LogoMarqueeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LogoMarquee: ({ heading, logos, styles, }: LogoMarqueeProps) => import("react/jsx-runtime").JSX.Element;