dune-react 0.0.18 → 0.0.20

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

@@ -0,0 +1,102 @@
+"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";
+const TeamCarousel = (props) => {
+  const { tagline, heading, description, teamMembers, footer, styles } = {
+    ...TeamCarouselDefaults,
+    ...props
+  };
+  const { imageShape = "circle" } = 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 imageClass = imageShape === "circle" ? "size-20 min-h-20 min-w-20 rounded-full object-cover" : "aspect-[3/2] w-full object-cover";
+  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: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-12 max-w-lg md:mb-18 lg:mb-20", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+      /* @__PURE__ */ jsx("h2", { 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" },
+        children: [
+          /* @__PURE__ */ jsx(CarouselContent, { className: "ml-0", children: teamMembers.map((member, index) => /* @__PURE__ */ jsx(
+            CarouselItem,
+            {
+              className: "basis-[95%] pl-0 pr-6 sm:basis-4/5 md:basis-1/2 md:pr-12 lg:basis-1/3",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-start", children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-5 md:mb-6", children: /* @__PURE__ */ jsx(CompoundImage, { src: member.image.src, alt: member.image.alt, className: imageClass }) }),
+                /* @__PURE__ */ jsxs("div", { className: "mb-3 md:mb-4", children: [
+                  /* @__PURE__ */ jsx("h5", { className: "text-md font-semibold md:text-lg", children: member.name }),
+                  /* @__PURE__ */ jsx("h6", { className: "md:text-md", children: member.jobTitle })
+                ] }),
+                /* @__PURE__ */ jsx("p", { children: member.description }),
+                /* @__PURE__ */ jsx("div", { className: "mt-6 flex gap-3.5", children: member.socialLinks.map((link, linkIndex) => /* @__PURE__ */ jsx("a", { href: link.href, children: link.icon }, linkIndex)) })
+              ] })
+            },
+            index
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-12 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("div", { className: "mt-5 flex w-full items-start justify-start", children: teamMembers.map((_, index) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => api == null ? void 0 : api.scrollTo(index),
+                className: cn("mx-[3px] inline-block size-2 rounded-full", {
+                  "bg-neutral-black": current === index + 1,
+                  "bg-neutral-light": current !== index + 1
+                })
+              },
+              index
+            )) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-end gap-2 md:gap-4", children: [
+              /* @__PURE__ */ jsx(CarouselPrevious, { className: "static right-0 top-0 size-12 -translate-y-0" }),
+              /* @__PURE__ */ jsx(CarouselNext, { className: "static right-0 top-0 size-12 -translate-y-0" })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    footer && /* @__PURE__ */ jsxs("div", { className: "mt-14 w-full max-w-md md:mt-20 lg:mt-24", children: [
+      /* @__PURE__ */ jsx("h4", { className: "mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl", children: footer.heading }),
+      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: footer.description }),
+      /* @__PURE__ */ jsx("div", { className: "mt-6 md:mt-8", children: /* @__PURE__ */ jsx(Button, { variant: footer.button.variant, size: footer.button.size, children: footer.button.label }) })
+    ] })
+  ] }) });
+};
+const TeamCarouselDefaults = {
+  tagline: "Tagline",
+  heading: "Our team",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  teamMembers: Array(6).fill(null).map((_, i) => ({
+    image: { src: `https://picsum.photos/seed/team-carousel-${i + 1}/200/200`, alt: `Team member ${i + 1}` },
+    name: "Full name",
+    jobTitle: "Job title",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+    socialLinks: []
+  })),
+  footer: {
+    heading: "We're hiring!",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    button: { label: "Open positions", variant: "secondary" }
+  },
+  styles: {
+    imageShape: "circle"
+  }
+};
+export {
+  TeamCarousel,
+  TeamCarouselDefaults
+};

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

@@ -0,0 +1,125 @@
+import { TeamCarousel, TeamCarouselDefaults } from "./component";
+import type { TeamCarouselProps } from "./component";
+export { TeamCarousel, TeamCarouselDefaults };
+export type { TeamCarouselProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        teamMembers: {
+            type: string;
+            getItemSummary: (item: {
+                name?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                name: {
+                    type: string;
+                };
+                jobTitle: {
+                    type: string;
+                };
+                description: {
+                    type: string;
+                };
+            };
+        };
+        footer: {
+            type: string;
+            label: string;
+            objectFields: {
+                heading: {
+                    readonly type: "text";
+                    readonly contentEditable: true;
+                };
+                description: {
+                    readonly type: "textarea";
+                    readonly contentEditable: true;
+                };
+                button: {
+                    readonly type: "object";
+                    readonly objectFields: {
+                        readonly label: {
+                            readonly type: "text";
+                        };
+                        readonly action: {
+                            type: "custom";
+                            label: string;
+                            render: typeof import("../../../puck-core").ActionField;
+                        };
+                        readonly variant: {
+                            readonly type: "select";
+                            readonly options: readonly [{
+                                readonly label: "primary";
+                                readonly value: "default";
+                            }, {
+                                readonly label: "secondary";
+                                readonly value: "secondary";
+                            }, {
+                                readonly label: "outline";
+                                readonly value: "outline";
+                            }, {
+                                readonly label: "ghost";
+                                readonly value: "ghost";
+                            }, {
+                                readonly label: "link";
+                                readonly value: "link";
+                            }, {
+                                readonly label: "destructive";
+                                readonly value: "destructive";
+                            }];
+                        };
+                        readonly size: {
+                            readonly type: "select";
+                            readonly options: readonly [{
+                                readonly label: "default";
+                                readonly value: "default";
+                            }, {
+                                readonly label: "sm";
+                                readonly value: "sm";
+                            }, {
+                                readonly label: "lg";
+                                readonly value: "lg";
+                            }, {
+                                readonly label: "icon";
+                                readonly value: "icon";
+                            }];
+                        };
+                        readonly icon: {
+                            type: "custom";
+                            render: typeof import("../../../puck-core/fields/icon-picker-field").IconPickerField;
+                        };
+                    };
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                imageShape: {
+                    readonly type: "radio";
+                    readonly label: "Image Shape";
+                    readonly options: readonly [{
+                        readonly label: "Circle";
+                        readonly value: "circle";
+                    }, {
+                        readonly label: "Square";
+                        readonly value: "square";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: TeamCarouselProps;
+    render: (props: TeamCarouselProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,43 @@
+import { TeamCarousel, TeamCarouselDefaults } from "./component.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { buttonField } from "../../../puck-core/core/props/interactive.js";
+import { teamStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    tagline: { type: "text" },
+    heading: headingField,
+    description: descriptionField,
+    teamMembers: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.name || `Member ${index + 1}`,
+      arrayFields: {
+        name: { type: "text" },
+        jobTitle: { type: "text" },
+        description: { type: "textarea" }
+      }
+    },
+    footer: {
+      type: "object",
+      label: "Footer",
+      objectFields: {
+        heading: headingField,
+        description: descriptionField,
+        button: buttonField
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        imageShape: teamStyleFields.imageShape
+      }
+    }
+  },
+  defaultProps: TeamCarouselDefaults,
+  render: TeamCarousel
+};
+export {
+  TeamCarousel,
+  TeamCarouselDefaults,
+  conf as default
+};

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

@@ -0,0 +1,25 @@
+import type { TeamComponentProps, BaseImage, BaseButton } from "../props";
+type SocialLink = {
+    href: string;
+    icon: React.ReactNode;
+};
+type TeamMember = {
+    image: BaseImage;
+    name: string;
+    jobTitle: string;
+    description: string;
+    socialLinks: SocialLink[];
+};
+type Footer = {
+    heading: string;
+    description: string;
+    button: BaseButton;
+};
+type TeamGridExtra = {
+    teamMembers: TeamMember[];
+    footer: Footer;
+};
+export type TeamGridProps = TeamComponentProps<TeamGridExtra>;
+export declare const TeamGrid: (props: TeamGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TeamGridDefaults: TeamGridProps;
+export {};

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

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../../../shadcn/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const TeamGrid = (props) => {
+  const { tagline, heading, description, teamMembers, footer, styles } = {
+    ...TeamGridDefaults,
+    ...props
+  };
+  const {
+    textAlign = "center",
+    imageShape = "circle",
+    gridColumns = 4,
+    hasFooter = true
+  } = styles ?? {};
+  const gridColsClass = gridColumns === 2 ? "md:grid-cols-2" : gridColumns === 3 ? "md:grid-cols-2 lg:grid-cols-3" : "md:grid-cols-2 lg:grid-cols-4";
+  const imageClass = imageShape === "circle" ? "size-20 min-h-20 min-w-20 rounded-full object-cover" : "aspect-[3/2] w-full object-cover";
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+    /* @__PURE__ */ jsxs("div", { className: `mx-auto mb-12 max-w-lg md:mb-18 lg:mb-20 ${textAlign === "center" ? "text-center" : "text-left"}`, children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+      /* @__PURE__ */ jsx("h2", { className: "rb-5 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__ */ jsx("div", { className: `grid grid-cols-1 items-start justify-center gap-x-8 gap-y-12 md:gap-y-16 ${gridColsClass}`, children: teamMembers.map((member, index) => /* @__PURE__ */ jsxs("div", { className: `flex flex-col ${textAlign === "center" ? "text-center" : ""}`, children: [
+      /* @__PURE__ */ jsx("div", { className: `rb-5 mb-5 ${textAlign === "center" ? "flex w-full items-center justify-center" : ""} md:mb-6`, children: /* @__PURE__ */ jsx(CompoundImage, { src: member.image.src, alt: member.image.alt, className: imageClass }) }),
+      /* @__PURE__ */ jsxs("div", { className: "mb-3 md:mb-4", children: [
+        /* @__PURE__ */ jsx("h5", { className: "text-md font-semibold md:text-lg", children: member.name }),
+        /* @__PURE__ */ jsx("h6", { className: "md:text-md", children: member.jobTitle })
+      ] }),
+      /* @__PURE__ */ jsx("p", { children: member.description }),
+      /* @__PURE__ */ jsx("div", { className: `mt-6 grid grid-flow-col grid-cols-[max-content] gap-3.5 ${textAlign === "center" ? "self-center" : "self-start"}`, children: member.socialLinks.map((link, linkIndex) => /* @__PURE__ */ jsx("a", { href: link.href, children: link.icon }, linkIndex)) })
+    ] }, index)) }),
+    hasFooter && footer && /* @__PURE__ */ jsxs("div", { className: `mx-auto mt-14 w-full max-w-md md:mt-20 lg:mt-24 ${textAlign === "center" ? "text-center" : ""}`, children: [
+      /* @__PURE__ */ jsx("h4", { className: "mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl", children: footer.heading }),
+      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: footer.description }),
+      /* @__PURE__ */ jsx("div", { className: `mt-6 flex items-center gap-x-4 md:mt-8 ${textAlign === "center" ? "justify-center" : ""}`, children: /* @__PURE__ */ jsx(Button, { variant: footer.button.variant, size: footer.button.size, children: footer.button.label }) })
+    ] })
+  ] }) });
+};
+const TeamGridDefaults = {
+  tagline: "Tagline",
+  heading: "Our team",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  teamMembers: Array(8).fill(null).map((_, i) => ({
+    image: { src: `https://picsum.photos/seed/team-${i + 1}/200/200`, alt: `Team member ${i + 1}` },
+    name: "Full name",
+    jobTitle: "Job title",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+    socialLinks: []
+  })),
+  footer: {
+    heading: "We're hiring!",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    button: { label: "Open positions", variant: "secondary" }
+  },
+  styles: {
+    textAlign: "center",
+    imageShape: "circle",
+    gridColumns: 4,
+    hasFooter: true
+  }
+};
+export {
+  TeamGrid,
+  TeamGridDefaults
+};

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

@@ -0,0 +1,161 @@
+import { TeamGrid, TeamGridDefaults } from "./component";
+import type { TeamGridProps } from "./component";
+export { TeamGrid, TeamGridDefaults };
+export type { TeamGridProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        teamMembers: {
+            type: string;
+            getItemSummary: (item: {
+                name?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                name: {
+                    type: string;
+                };
+                jobTitle: {
+                    type: string;
+                };
+                description: {
+                    type: string;
+                };
+            };
+        };
+        footer: {
+            type: string;
+            label: string;
+            objectFields: {
+                heading: {
+                    readonly type: "text";
+                    readonly contentEditable: true;
+                };
+                description: {
+                    readonly type: "textarea";
+                    readonly contentEditable: true;
+                };
+                button: {
+                    readonly type: "object";
+                    readonly objectFields: {
+                        readonly label: {
+                            readonly type: "text";
+                        };
+                        readonly action: {
+                            type: "custom";
+                            label: string;
+                            render: typeof import("../../../puck-core").ActionField;
+                        };
+                        readonly variant: {
+                            readonly type: "select";
+                            readonly options: readonly [{
+                                readonly label: "primary";
+                                readonly value: "default";
+                            }, {
+                                readonly label: "secondary";
+                                readonly value: "secondary";
+                            }, {
+                                readonly label: "outline";
+                                readonly value: "outline";
+                            }, {
+                                readonly label: "ghost";
+                                readonly value: "ghost";
+                            }, {
+                                readonly label: "link";
+                                readonly value: "link";
+                            }, {
+                                readonly label: "destructive";
+                                readonly value: "destructive";
+                            }];
+                        };
+                        readonly size: {
+                            readonly type: "select";
+                            readonly options: readonly [{
+                                readonly label: "default";
+                                readonly value: "default";
+                            }, {
+                                readonly label: "sm";
+                                readonly value: "sm";
+                            }, {
+                                readonly label: "lg";
+                                readonly value: "lg";
+                            }, {
+                                readonly label: "icon";
+                                readonly value: "icon";
+                            }];
+                        };
+                        readonly icon: {
+                            type: "custom";
+                            render: typeof import("../../../puck-core/fields/icon-picker-field").IconPickerField;
+                        };
+                    };
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                textAlign: {
+                    readonly type: "radio";
+                    readonly label: "Text Align";
+                    readonly options: readonly [{
+                        readonly label: "Left";
+                        readonly value: "left";
+                    }, {
+                        readonly label: "Center";
+                        readonly value: "center";
+                    }];
+                };
+                imageShape: {
+                    readonly type: "radio";
+                    readonly label: "Image Shape";
+                    readonly options: readonly [{
+                        readonly label: "Circle";
+                        readonly value: "circle";
+                    }, {
+                        readonly label: "Square";
+                        readonly value: "square";
+                    }];
+                };
+                gridColumns: {
+                    readonly type: "radio";
+                    readonly label: "Grid Columns";
+                    readonly options: readonly [{
+                        readonly label: "2";
+                        readonly value: "2";
+                    }, {
+                        readonly label: "3";
+                        readonly value: "3";
+                    }, {
+                        readonly label: "4";
+                        readonly value: "4";
+                    }];
+                };
+                hasFooter: {
+                    readonly type: "radio";
+                    readonly label: "Has Footer";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: TeamGridProps;
+    render: (props: TeamGridProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,46 @@
+import { TeamGrid, TeamGridDefaults } from "./component.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { buttonField } from "../../../puck-core/core/props/interactive.js";
+import { teamStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    tagline: { type: "text" },
+    heading: headingField,
+    description: descriptionField,
+    teamMembers: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.name || `Member ${index + 1}`,
+      arrayFields: {
+        name: { type: "text" },
+        jobTitle: { type: "text" },
+        description: { type: "textarea" }
+      }
+    },
+    footer: {
+      type: "object",
+      label: "Footer",
+      objectFields: {
+        heading: headingField,
+        description: descriptionField,
+        button: buttonField
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        textAlign: teamStyleFields.textAlign,
+        imageShape: teamStyleFields.imageShape,
+        gridColumns: teamStyleFields.gridColumns,
+        hasFooter: teamStyleFields.hasFooter
+      }
+    }
+  },
+  defaultProps: TeamGridDefaults,
+  render: TeamGrid
+};
+export {
+  TeamGrid,
+  TeamGridDefaults,
+  conf as default
+};

package/dist/components/puck-block/team-sections/team-inline-card/component.d.ts

@@ -0,0 +1,25 @@
+import type { TeamComponentProps, BaseImage, BaseButton } from "../props";
+type SocialLink = {
+    href: string;
+    icon: React.ReactNode;
+};
+type TeamMember = {
+    image: BaseImage;
+    name: string;
+    jobTitle: string;
+    description: string;
+    socialLinks: SocialLink[];
+};
+type Footer = {
+    heading: string;
+    description: string;
+    button: BaseButton;
+};
+type TeamInlineCardExtra = {
+    teamMembers: TeamMember[];
+    footer: Footer;
+};
+export type TeamInlineCardProps = TeamComponentProps<TeamInlineCardExtra>;
+export declare const TeamInlineCard: (props: TeamInlineCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TeamInlineCardDefaults: TeamInlineCardProps;
+export {};

package/dist/components/puck-block/team-sections/team-inline-card/component.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../../../shadcn/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const TeamInlineCard = (props) => {
+  const { tagline, heading, description, teamMembers, footer, styles } = {
+    ...TeamInlineCardDefaults,
+    ...props
+  };
+  const { imageShape = "circle", cardLayout = "horizontal" } = styles ?? {};
+  const imageClass = imageShape === "circle" ? "size-20 min-h-20 min-w-20 rounded-full object-cover" : "aspect-[3/2] w-full object-cover";
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container grid grid-cols-1 items-start md:grid-flow-row md:gap-x-12 lg:gap-x-20", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rb-12 mb-12 max-w-lg md:mb-18 lg:mb-20", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+      /* @__PURE__ */ jsx("h2", { className: "rb-5 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__ */ jsx("div", { className: "grid grid-cols-1 gap-y-12 md:gap-x-8 md:gap-y-16 lg:grid-cols-2 lg:gap-x-16", children: teamMembers.map((member, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cardLayout === "horizontal" ? "grid auto-cols-fr grid-cols-1 items-start gap-5 sm:grid-cols-[max-content_1fr] sm:gap-x-8 sm:gap-y-4" : "grid auto-cols-fr grid-cols-1 items-start gap-5 sm:grid-cols-[1fr_1fr] sm:gap-x-8 sm:gap-y-4",
+        children: [
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CompoundImage, { src: member.image.src, alt: member.image.alt, className: imageClass }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-3 md:mb-4", children: [
+              /* @__PURE__ */ jsx("h5", { className: "text-md font-semibold md:text-lg", children: member.name }),
+              /* @__PURE__ */ jsx("h6", { className: "md:text-md", children: member.jobTitle })
+            ] }),
+            /* @__PURE__ */ jsx("p", { children: member.description }),
+            /* @__PURE__ */ jsx("div", { className: "mt-6 grid grid-flow-col grid-cols-[max-content] gap-[0.875rem] self-start", children: member.socialLinks.map((link, linkIndex) => /* @__PURE__ */ jsx("a", { href: link.href, children: link.icon }, linkIndex)) })
+          ] })
+        ]
+      },
+      index
+    )) }),
+    footer && /* @__PURE__ */ jsxs("div", { className: "mt-14 w-full max-w-md md:mt-20 lg:mt-24", children: [
+      /* @__PURE__ */ jsx("h4", { className: "mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl", children: footer.heading }),
+      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: footer.description }),
+      /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap gap-4 md:mt-8", children: /* @__PURE__ */ jsx(Button, { variant: footer.button.variant, size: footer.button.size, children: footer.button.label }) })
+    ] })
+  ] }) });
+};
+const TeamInlineCardDefaults = {
+  tagline: "Tagline",
+  heading: "Our team",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  teamMembers: Array(4).fill(null).map((_, i) => ({
+    image: { src: `https://picsum.photos/seed/team-inline-${i + 1}/200/200`, alt: `Team member ${i + 1}` },
+    name: "Full name",
+    jobTitle: "Job title",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+    socialLinks: []
+  })),
+  footer: {
+    heading: "We're hiring!",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    button: { label: "Open positions", variant: "secondary" }
+  },
+  styles: {
+    imageShape: "circle",
+    cardLayout: "horizontal"
+  }
+};
+export {
+  TeamInlineCard,
+  TeamInlineCardDefaults
+};