@mission-studio/puck 1.0.21 → 1.0.24

package/dist/chunk-MYS3PLMF.mjs

@@ -0,0 +1,463 @@
+import {
+  dotsContainerStyle,
+  getArrowStyle,
+  getBaseStyle,
+  getCaptionStyle,
+  getCardStyle,
+  getContainerStyle,
+  getContainerStyle2,
+  getContainerStyle3,
+  getDotStyle,
+  getEmptyState,
+  getHeadingStyle,
+  getHrStyle,
+  getImageStyle,
+  getParagraphStyle,
+  getSectionStyle,
+  getSlideContainerStyle,
+  getVariantStyles,
+  getVisibilityClasses,
+  getWrapperStyle,
+  getWrapperStyle2,
+  getWrapperStyle3,
+  getWrapperStyle4,
+  icons,
+  imageStyle,
+  sizeMap,
+  sizeMap2,
+  slideStyle
+} from "./chunk-YIPEC4L4.mjs";
+import {
+  getShadowCSS
+} from "./chunk-PJXZC564.mjs";
+import {
+  cn
+} from "./chunk-C6V3YUPF.mjs";
+
+// components/page/astro/Heading.tsx
+import { jsx } from "react/jsx-runtime";
+function Heading({
+  text,
+  level = "h2",
+  size = "2xl",
+  weight = "bold",
+  color = "rgba(0, 0, 0, 1)",
+  align = "left",
+  letterSpacing = "normal",
+  lineHeight = "tight",
+  id
+}) {
+  const resolvedText = text || "";
+  const Tag = level;
+  const style = getHeadingStyle({
+    size,
+    weight,
+    color,
+    align,
+    letterSpacing,
+    lineHeight
+  });
+  if (!resolvedText) return null;
+  return /* @__PURE__ */ jsx(Tag, { id, style, children: resolvedText });
+}
+
+// components/page/astro/Paragraph.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Paragraph({
+  text,
+  size = "base",
+  weight = "normal",
+  color = "rgba(0, 0, 0, 1)",
+  align = "left",
+  lineHeight = "normal",
+  maxWidth,
+  id
+}) {
+  const resolvedText = text || "";
+  const style = getParagraphStyle({
+    size,
+    weight,
+    color,
+    align,
+    lineHeight,
+    maxWidth
+  });
+  if (!resolvedText) return null;
+  return /* @__PURE__ */ jsx2("p", { id, style, children: resolvedText });
+}
+
+// components/page/astro/Button.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Button({
+  text,
+  href,
+  target = "_self",
+  variant = "solid",
+  size = "md",
+  color,
+  textColor,
+  borderRadius = "md",
+  fullWidth = false,
+  align = "center",
+  id
+}) {
+  const resolvedText = typeof text === "string" ? text : "Button";
+  const bgColor = typeof color === "string" ? color : "rgba(99, 102, 241, 1)";
+  const fgColor = typeof textColor === "string" ? textColor : variant === "solid" ? "rgba(255, 255, 255, 1)" : bgColor;
+  const baseStyle = getBaseStyle(size, borderRadius, fullWidth);
+  const variantStyle = getVariantStyles(variant, bgColor, fgColor);
+  const style = { ...baseStyle, ...variantStyle };
+  const wrapperStyle = getWrapperStyle(align);
+  const dataAttrs = {
+    "data-gtm-event": "button_click",
+    "data-gtm-text": resolvedText,
+    "data-gtm-href": href || "",
+    "data-gtm-variant": variant
+  };
+  if (href) {
+    return /* @__PURE__ */ jsx3("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx3(
+      "a",
+      {
+        id,
+        href,
+        target,
+        style,
+        rel: target === "_blank" ? "noopener noreferrer" : void 0,
+        ...dataAttrs,
+        children: resolvedText
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx3("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx3("button", { id, type: "button", style, ...dataAttrs, children: resolvedText }) });
+}
+
+// components/page/astro/Image.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function Image({
+  src,
+  alt = "",
+  width = "full",
+  aspectRatio = "auto",
+  objectFit = "cover",
+  borderRadius = "none",
+  shadow = "none",
+  align = "center",
+  caption,
+  captionColor,
+  id
+}) {
+  const resolvedSrc = typeof src === "string" ? src : "";
+  const resolvedCaption = typeof caption === "string" ? caption : "";
+  const resolvedCaptionColorStr = typeof captionColor === "string" ? captionColor : "rgba(107, 114, 128, 1)";
+  const wrapperStyle = getWrapperStyle2(align);
+  const imageStyle2 = getImageStyle(
+    width,
+    aspectRatio,
+    objectFit,
+    borderRadius,
+    shadow
+  );
+  const captionStyle = getCaptionStyle(align, width, resolvedCaptionColorStr);
+  if (!resolvedSrc) {
+    return /* @__PURE__ */ jsx4("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx4(
+      "div",
+      {
+        style: {
+          ...imageStyle2,
+          backgroundColor: "#e5e7eb",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "200px",
+          color: "#9ca3af"
+        },
+        children: "No image"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("figure", { id, style: { ...wrapperStyle, margin: 0 }, children: [
+    /* @__PURE__ */ jsx4("img", { src: resolvedSrc, alt, style: imageStyle2, loading: "lazy" }),
+    resolvedCaption && /* @__PURE__ */ jsx4("figcaption", { style: captionStyle, children: resolvedCaption })
+  ] });
+}
+
+// components/page/astro/ImageCarousel.tsx
+import { useState } from "react";
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function ImageCarousel({
+  images = [],
+  aspectRatio = "16:9",
+  borderRadius = "none",
+  showDots = true,
+  showArrows = true,
+  arrowColor,
+  dotColor,
+  id
+}) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const arrowColorStr = typeof arrowColor === "string" ? arrowColor : "rgba(255, 255, 255, 1)";
+  const dotColorStr = typeof dotColor === "string" ? dotColor : "rgba(99, 102, 241, 1)";
+  const goToPrevious = () => {
+    const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
+    setCurrentIndex(newIndex);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("carousel_navigate", {
+          detail: {
+            direction: "previous",
+            slideIndex: newIndex,
+            totalSlides: images.length
+          }
+        })
+      );
+    }
+  };
+  const goToNext = () => {
+    const newIndex = currentIndex === images.length - 1 ? 0 : currentIndex + 1;
+    setCurrentIndex(newIndex);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("carousel_navigate", {
+          detail: {
+            direction: "next",
+            slideIndex: newIndex,
+            totalSlides: images.length
+          }
+        })
+      );
+    }
+  };
+  const goToSlide = (index) => {
+    setCurrentIndex(index);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("carousel_navigate", {
+          detail: {
+            direction: "direct",
+            slideIndex: index,
+            totalSlides: images.length
+          }
+        })
+      );
+    }
+  };
+  if (images.length === 0) {
+    return /* @__PURE__ */ jsx5("div", { style: getEmptyState(aspectRatio, borderRadius), children: "No images" });
+  }
+  return /* @__PURE__ */ jsxs2("div", { id, style: getContainerStyle(aspectRatio, borderRadius), children: [
+    /* @__PURE__ */ jsx5("div", { style: getSlideContainerStyle(currentIndex), children: images.map((image, index) => /* @__PURE__ */ jsx5("div", { style: slideStyle, children: /* @__PURE__ */ jsx5(
+      "img",
+      {
+        src: image.src,
+        alt: image.alt || "",
+        style: imageStyle,
+        loading: "lazy"
+      }
+    ) }, index)) }),
+    showArrows && images.length > 1 && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          onClick: goToPrevious,
+          style: { ...getArrowStyle(arrowColorStr), left: "16px" },
+          "aria-label": "Previous slide",
+          children: "\u2039"
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          onClick: goToNext,
+          style: { ...getArrowStyle(arrowColorStr), right: "16px" },
+          "aria-label": "Next slide",
+          children: "\u203A"
+        }
+      )
+    ] }),
+    showDots && images.length > 1 && /* @__PURE__ */ jsx5("div", { style: dotsContainerStyle, children: images.map((_, index) => /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: () => goToSlide(index),
+        style: getDotStyle(index === currentIndex, dotColorStr),
+        "aria-label": `Go to slide ${index + 1}`
+      },
+      index
+    )) })
+  ] });
+}
+
+// components/page/astro/Icon.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Icon({
+  name = "check",
+  size = "md",
+  color,
+  align = "center",
+  id
+}) {
+  const colorValue = typeof color === "string" ? color : "rgba(99, 102, 241, 1)";
+  const IconComponent = icons[name.toLowerCase()] || icons.check;
+  const { size: iconSize, strokeWidth } = sizeMap[size];
+  const wrapperStyle = getWrapperStyle3(align);
+  return /* @__PURE__ */ jsx6("div", { id, style: wrapperStyle, children: /* @__PURE__ */ jsx6(
+    IconComponent,
+    {
+      size: iconSize,
+      color: colorValue,
+      strokeWidth
+    }
+  ) });
+}
+
+// components/page/astro/Section.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Section({
+  children: _children,
+  verticalPadding = 48,
+  horizontalPadding = 32,
+  gap = 24,
+  backgroundColor,
+  backgroundImage,
+  shadow = "none",
+  borderRadius = 0,
+  contentMaxWidth = "1400px",
+  anchorLink,
+  visibility,
+  puck
+}) {
+  const DropZone = puck?.renderDropZone;
+  const bgColor = typeof backgroundColor === "string" ? backgroundColor : void 0;
+  const style = {
+    ...getSectionStyle(
+      verticalPadding,
+      horizontalPadding,
+      gap,
+      bgColor,
+      backgroundImage,
+      shadow,
+      borderRadius
+    ),
+    boxShadow: getShadowCSS(shadow)
+  };
+  return /* @__PURE__ */ jsx7(
+    "section",
+    {
+      id: anchorLink,
+      className: cn("flex w-full flex-col", getVisibilityClasses(visibility)),
+      style,
+      children: /* @__PURE__ */ jsx7("div", { className: "mx-auto w-full", style: { maxWidth: contentMaxWidth }, children: DropZone && /* @__PURE__ */ jsx7(DropZone, { zone: "content" }) })
+    }
+  );
+}
+
+// components/page/astro/Container.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Container({
+  maxWidth = "lg",
+  padding,
+  paddingX = "md",
+  paddingY = "none",
+  backgroundColor,
+  centered = true,
+  id,
+  puck
+}) {
+  const DropZone = puck?.renderDropZone;
+  const bgColor = typeof backgroundColor === "string" ? backgroundColor : void 0;
+  const effectivePaddingX = padding || paddingX;
+  const effectivePaddingY = padding || paddingY;
+  const style = getContainerStyle2(
+    maxWidth,
+    effectivePaddingX,
+    effectivePaddingY,
+    centered,
+    bgColor
+  );
+  return /* @__PURE__ */ jsx8("div", { id, style, children: DropZone && /* @__PURE__ */ jsx8(DropZone, { zone: "container-content" }) });
+}
+
+// components/page/astro/Columns.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function Columns({
+  columns = 2,
+  gap = "md",
+  verticalAlign = "top",
+  stackOnMobile = true,
+  id,
+  puck
+}) {
+  const DropZone = puck?.renderDropZone;
+  const containerStyle = getContainerStyle3(columns, gap, verticalAlign);
+  return /* @__PURE__ */ jsx9("div", { id, style: containerStyle, children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx9("div", { style: { minWidth: 0 }, children: DropZone && /* @__PURE__ */ jsx9(DropZone, { zone: `column-${index}` }) }, index)) });
+}
+
+// components/page/astro/Card.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Card({
+  backgroundColor,
+  borderColor,
+  borderWidth = "thin",
+  borderRadius = "md",
+  shadow = "sm",
+  padding = "md",
+  id,
+  puck
+}) {
+  const DropZone = puck?.renderDropZone;
+  const bgColor = typeof backgroundColor === "string" ? backgroundColor : "rgba(255, 255, 255, 1)";
+  const bColor = typeof borderColor === "string" ? borderColor : "rgba(229, 231, 235, 1)";
+  const style = getCardStyle(
+    bgColor,
+    bColor,
+    borderWidth,
+    borderRadius,
+    shadow,
+    padding
+  );
+  return /* @__PURE__ */ jsx10("div", { id, style, children: DropZone && /* @__PURE__ */ jsx10(DropZone, { zone: "card-content" }) });
+}
+
+// components/page/astro/Divider.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Divider({
+  style: lineStyle = "solid",
+  thickness = "thin",
+  color,
+  width = "full",
+  align = "center",
+  spacing = "md",
+  id
+}) {
+  const colorValue = typeof color === "string" ? color : "rgba(107, 114, 128, 1)";
+  const wrapperStyle = getWrapperStyle4(align, spacing);
+  const hrStyle = getHrStyle(width, thickness, lineStyle, colorValue);
+  return /* @__PURE__ */ jsx11("div", { id, style: wrapperStyle, children: /* @__PURE__ */ jsx11("hr", { style: hrStyle }) });
+}
+
+// components/page/astro/Spacer.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function Spacer({ size = "md", id }) {
+  const style = {
+    height: sizeMap2[size],
+    width: "100%"
+  };
+  return /* @__PURE__ */ jsx12("div", { id, style, "aria-hidden": "true" });
+}
+
+export {
+  Heading,
+  Paragraph,
+  Button,
+  Image,
+  ImageCarousel,
+  Icon,
+  Section,
+  Container,
+  Columns,
+  Card,
+  Divider,
+  Spacer
+};