@comet/site-nextjs 7.21.0-canary-20250522145352

package/LICENSE

@@ -0,0 +1,24 @@
+BSD 2-Clause License
+
+Copyright (c) 2023, Vivid Planet Software GmbH
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/lib/blocks/DamFileDownloadLinkBlock.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithData } from '@comet/site-react';
+import { ReactElement } from 'react';
+import { DamFileDownloadLinkBlockData } from '../blocks.generated';
+interface Props extends PropsWithData<DamFileDownloadLinkBlockData> {
+    children: ReactElement;
+    title?: string;
+    className?: string;
+    legacyBehavior?: boolean;
+}
+export declare const DamFileDownloadLinkBlock: ({ ...componentProps }: import('@comet/site-react').WithPreviewProps & Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DamFileDownloadLinkBlock.d.ts.map

package/lib/blocks/DamFileDownloadLinkBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DamFileDownloadLinkBlock.d.ts","sourceRoot":"","sources":["../../src/blocks/DamFileDownloadLinkBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,KAAK,4BAA4B,EAAE,MAAM,qBAAqB,CAAC;AAExE,UAAU,KAAM,SAAQ,aAAa,CAAC,4BAA4B,CAAC;IAC/D,QAAQ,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,wBAAwB,0HAwBpC,CAAC"}

package/lib/blocks/DamFileDownloadLinkBlock.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { withPreview } from "@comet/site-react";
+import { cloneElement } from "react";
+const DamFileDownloadLinkBlock = withPreview(
+  ({ data: { file, openFileType }, children, title, className, legacyBehavior }) => {
+    if (!file) {
+      if (legacyBehavior) {
+        return children;
+      }
+      return /* @__PURE__ */ jsx("span", { className, children });
+    }
+    const href = file.fileUrl;
+    const target = openFileType === "NewTab" ? "_blank" : void 0;
+    if (legacyBehavior) {
+      return cloneElement(children, { href, target, title });
+    }
+    return /* @__PURE__ */ jsx("a", { href, target, title, className, children });
+  },
+  { label: "DamFileDownloadLink" }
+);
+export {
+  DamFileDownloadLinkBlock
+};

package/lib/blocks/DamVideoBlock.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithData } from '@comet/site-react';
+import { ReactElement, ReactNode } from 'react';
+import { DamVideoBlockData } from '../blocks.generated';
+import { VideoPreviewImageProps } from './helpers/VideoPreviewImage';
+interface DamVideoBlockProps extends PropsWithData<DamVideoBlockData> {
+    aspectRatio?: string;
+    previewImageSizes?: string;
+    renderPreviewImage?: (props: VideoPreviewImageProps) => ReactElement;
+    fill?: boolean;
+    previewImageIcon?: ReactNode;
+}
+export declare const DamVideoBlock: ({ ...componentProps }: import('@comet/site-react').WithPreviewProps & DamVideoBlockProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DamVideoBlock.d.ts.map

package/lib/blocks/DamVideoBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DamVideoBlock.d.ts","sourceRoot":"","sources":["../../src/blocks/DamVideoBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAwD,MAAM,mBAAmB,CAAC;AAE7G,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAE,KAAK,sBAAsB,EAAqB,MAAM,6BAA6B,CAAC;AAE7F,UAAU,kBAAmB,SAAQ,aAAa,CAAC,iBAAiB,CAAC;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,YAAY,CAAC;IACrE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAChC;AAED,eAAO,MAAM,aAAa,uIAgEzB,CAAC"}

package/lib/blocks/DamVideoBlock.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { withPreview, PreviewSkeleton, useIsElementInViewport } from "@comet/site-react";
+import clsx from "clsx";
+import { useState, useRef } from "react";
+import styles from "./DamVideoBlock.module.scss.js";
+import { VideoPreviewImage } from "./helpers/VideoPreviewImage.js";
+const DamVideoBlock = withPreview(
+  ({
+    data: { damFile, autoplay, loop, showControls, previewImage },
+    aspectRatio = "16x9",
+    previewImageSizes,
+    renderPreviewImage,
+    fill,
+    previewImageIcon
+  }) => {
+    if (damFile === void 0) {
+      return /* @__PURE__ */ jsx(PreviewSkeleton, { type: "media", hasContent: false, aspectRatio });
+    }
+    const [showPreviewImage, setShowPreviewImage] = useState(true);
+    const hasPreviewImage = Boolean(previewImage && previewImage.damFile);
+    const videoRef = useRef(null);
+    useIsElementInViewport(videoRef, (inView) => {
+      if (autoplay && videoRef.current) {
+        inView ? videoRef.current.play() : videoRef.current.pause();
+      }
+    });
+    return /* @__PURE__ */ jsx(Fragment, { children: hasPreviewImage && showPreviewImage ? renderPreviewImage ? renderPreviewImage({
+      onPlay: () => setShowPreviewImage(false),
+      image: previewImage,
+      aspectRatio,
+      sizes: previewImageSizes,
+      fill,
+      icon: previewImageIcon
+    }) : /* @__PURE__ */ jsx(
+      VideoPreviewImage,
+      {
+        onPlay: () => setShowPreviewImage(false),
+        image: previewImage,
+        aspectRatio,
+        sizes: previewImageSizes,
+        fill,
+        icon: previewImageIcon
+      }
+    ) : /* @__PURE__ */ jsx(
+      "video",
+      {
+        autoPlay: autoplay || hasPreviewImage && !showPreviewImage,
+        controls: showControls,
+        loop,
+        playsInline: true,
+        muted: autoplay,
+        ref: videoRef,
+        className: clsx(styles.video, fill && styles.fill),
+        style: !fill ? { "--aspect-ratio": aspectRatio.replace("x", " / ") } : void 0,
+        children: /* @__PURE__ */ jsx("source", { src: damFile.fileUrl, type: damFile.mimetype })
+      }
+    ) });
+  },
+  { label: "Video" }
+);
+export {
+  DamVideoBlock
+};

package/lib/blocks/DamVideoBlock.module.scss.js

@@ -0,0 +1,11 @@
+const video = "_video_17b8y_1";
+const fill = "_fill_17b8y_7";
+const styles = {
+  video,
+  fill
+};
+export {
+  styles as default,
+  fill,
+  video
+};

package/lib/blocks/EmailLinkBlock.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithData } from '@comet/site-react';
+import { ReactElement } from 'react';
+import { EmailLinkBlockData } from '../blocks.generated';
+interface EmailLinkBlockProps extends PropsWithData<EmailLinkBlockData> {
+    children: ReactElement;
+    title?: string;
+    className?: string;
+    legacyBehavior?: boolean;
+}
+export declare const EmailLinkBlock: ({ data: { email }, children, title, className, legacyBehavior }: EmailLinkBlockProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EmailLinkBlock.d.ts.map

package/lib/blocks/EmailLinkBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailLinkBlock.d.ts","sourceRoot":"","sources":["../../src/blocks/EmailLinkBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,UAAU,mBAAoB,SAAQ,aAAa,CAAC,kBAAkB,CAAC;IACnE,QAAQ,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,oEAAqE,mBAAmB,4CAoBlH,CAAC"}

package/lib/blocks/EmailLinkBlock.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { cloneElement } from "react";
+const EmailLinkBlock = ({ data: { email }, children, title, className, legacyBehavior }) => {
+  if (!email) {
+    if (legacyBehavior) {
+      return children;
+    }
+    return /* @__PURE__ */ jsx("span", { className, children });
+  }
+  const href = `mailto:${email}`;
+  if (legacyBehavior) {
+    return cloneElement(children, { href, title });
+  }
+  return /* @__PURE__ */ jsx("a", { href, title, className, children });
+};
+export {
+  EmailLinkBlock
+};

package/lib/blocks/ExternalLinkBlock.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithData } from '@comet/site-react';
+import { ReactElement } from 'react';
+import { ExternalLinkBlockData } from '../blocks.generated';
+interface ExternalLinkBlockProps extends PropsWithData<ExternalLinkBlockData> {
+    children: ReactElement;
+    title?: string;
+    className?: string;
+    legacyBehavior?: boolean;
+}
+export declare function ExternalLinkBlock({ data: { targetUrl, openInNewWindow }, children, title, className, legacyBehavior }: ExternalLinkBlockProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ExternalLinkBlock.d.ts.map

package/lib/blocks/ExternalLinkBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalLinkBlock.d.ts","sourceRoot":"","sources":["../../src/blocks/ExternalLinkBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAc,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAA0B,KAAK,YAAY,EAAgB,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAIjE,UAAU,sBAAuB,SAAQ,aAAa,CAAC,qBAAqB,CAAC;IACzE,QAAQ,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,sBAAsB,2CA8C7I"}

package/lib/blocks/ExternalLinkBlock.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { usePreview } from "@comet/site-react";
+import { cloneElement } from "react";
+import { sendSitePreviewIFrameMessage } from "../sitePreview/iframebridge/sendSitePreviewIFrameMessage.js";
+import { SitePreviewIFrameMessageType } from "../sitePreview/iframebridge/SitePreviewIFrameMessage.js";
+function ExternalLinkBlock({ data: { targetUrl, openInNewWindow }, children, title, className, legacyBehavior }) {
+  const preview = usePreview();
+  if (preview.previewType === "SitePreview" || preview.previewType === "BlockPreview") {
+    const onClick = (event) => {
+      event.preventDefault();
+      if (preview.previewType === "SitePreview") {
+        sendSitePreviewIFrameMessage({
+          cometType: SitePreviewIFrameMessageType.OpenLink,
+          data: { link: { openInNewWindow, targetUrl } }
+        });
+      }
+    };
+    if (legacyBehavior) {
+      return cloneElement(children, { href: "#", onClick, title });
+    }
+    return /* @__PURE__ */ jsx("a", { href: "#", onClick, title, className, children });
+  } else {
+    if (!targetUrl) {
+      if (legacyBehavior) {
+        return children;
+      }
+      return /* @__PURE__ */ jsx("span", { className, children });
+    }
+    const href = targetUrl;
+    const target = openInNewWindow ? "_blank" : void 0;
+    if (legacyBehavior) {
+      return cloneElement(children, { href, target, title });
+    }
+    return /* @__PURE__ */ jsx("a", { href, target, title, className, children });
+  }
+}
+export {
+  ExternalLinkBlock
+};

package/lib/blocks/InternalLinkBlock.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithData } from '@comet/site-react';
+import { PropsWithChildren } from 'react';
+import { InternalLinkBlockData } from '../blocks.generated';
+interface InternalLinkBlockProps extends PropsWithChildren<PropsWithData<InternalLinkBlockData>> {
+    title?: string;
+    className?: string;
+    legacyBehavior?: boolean;
+}
+/**
+ * @deprecated There should be a copy of this component in the application for flexibility (e.g. multi language support)
+ */
+export declare function InternalLinkBlock({ data: { targetPage, targetPageAnchor }, children, title, className, legacyBehavior }: InternalLinkBlockProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=InternalLinkBlock.d.ts.map

package/lib/blocks/InternalLinkBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalLinkBlock.d.ts","sourceRoot":"","sources":["../../src/blocks/InternalLinkBlock.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,UAAU,sBAAuB,SAAQ,iBAAiB,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC5F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,gBAAgB,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,sBAAsB,2CAwB/I"}

package/lib/blocks/InternalLinkBlock.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import Link from "next/link";
+function InternalLinkBlock({ data: { targetPage, targetPageAnchor }, children, title, className, legacyBehavior }) {
+  if (!targetPage) {
+    if (legacyBehavior) {
+      return /* @__PURE__ */ jsx(Fragment, { children });
+    }
+    return /* @__PURE__ */ jsx("span", { className, children });
+  }
+  const href = targetPageAnchor !== void 0 ? `${targetPage.path}#${targetPageAnchor}` : targetPage.path;
+  if (legacyBehavior) {
+    return /* @__PURE__ */ jsx(Link, { href, title, passHref: true, legacyBehavior: true, children });
+  }
+  return /* @__PURE__ */ jsx(Link, { href, title, className, children });
+}
+export {
+  InternalLinkBlock
+};

package/lib/blocks/PhoneLinkBlock.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithData } from '@comet/site-react';
+import { ReactElement } from 'react';
+import { PhoneLinkBlockData } from '../blocks.generated';
+interface PhoneLinkBlockProps extends PropsWithData<PhoneLinkBlockData> {
+    children: ReactElement;
+    title?: string;
+    className?: string;
+    legacyBehavior?: boolean;
+}
+export declare const PhoneLinkBlock: ({ data: { phone }, children, title, className, legacyBehavior }: PhoneLinkBlockProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PhoneLinkBlock.d.ts.map

package/lib/blocks/PhoneLinkBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneLinkBlock.d.ts","sourceRoot":"","sources":["../../src/blocks/PhoneLinkBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,UAAU,mBAAoB,SAAQ,aAAa,CAAC,kBAAkB,CAAC;IACnE,QAAQ,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,oEAAqE,mBAAmB,4CAoBlH,CAAC"}

package/lib/blocks/PhoneLinkBlock.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { cloneElement } from "react";
+const PhoneLinkBlock = ({ data: { phone }, children, title, className, legacyBehavior }) => {
+  if (!phone) {
+    if (legacyBehavior) {
+      return children;
+    }
+    return /* @__PURE__ */ jsx("span", { className, children });
+  }
+  const href = `tel:${phone}`;
+  if (legacyBehavior) {
+    return cloneElement(children, { href, title });
+  }
+  return /* @__PURE__ */ jsx("a", { href, title, className, children });
+};
+export {
+  PhoneLinkBlock
+};

package/lib/blocks/PixelImageBlock.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithData } from '@comet/site-react';
+import { ImageProps } from 'next/image';
+import { PixelImageBlockData } from '../blocks.generated';
+interface PixelImageBlockProps extends PropsWithData<PixelImageBlockData>, Omit<ImageProps, "src" | "width" | "height" | "alt"> {
+    aspectRatio: string | number | "inherit";
+    /**
+     * Do not set an `alt` attribute. The alt text is set in the DAM.
+     */
+    alt?: never;
+}
+export declare const PixelImageBlock: ({ ...componentProps }: import('@comet/site-react').WithPreviewProps & PixelImageBlockProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PixelImageBlock.d.ts.map

package/lib/blocks/PixelImageBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PixelImageBlock.d.ts","sourceRoot":"","sources":["../../src/blocks/PixelImageBlock.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,KAAK,aAAa,EAOrB,MAAM,mBAAmB,CAAC;AAE3B,OAAkB,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAExD,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAG/D,UAAU,oBAAqB,SAAQ,aAAa,CAAC,mBAAmB,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC3H,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACzC;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC;CACf;AAED,eAAO,MAAM,eAAe,yIAiE3B,CAAC"}

package/lib/blocks/PixelImageBlock.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { withPreview, PreviewSkeleton, calculateInheritAspectRatio, parseAspectRatio, getMaxDimensionsFromArea, generateImageUrl } from "@comet/site-react";
+import NextImage from "next/image";
+import styles from "./PixelImageBlock.module.scss.js";
+const PixelImageBlock = withPreview(
+  ({ aspectRatio, data: { damFile, cropArea, urlTemplate }, fill, ...nextImageProps }) => {
+    if (!damFile || !damFile.image)
+      return /* @__PURE__ */ jsx(PreviewSkeleton, { type: "media", hasContent: false, aspectRatio });
+    const usedCropArea = cropArea ?? damFile.image.cropArea;
+    let usedAspectRatio;
+    if (aspectRatio === "inherit") {
+      usedAspectRatio = calculateInheritAspectRatio(damFile.image, usedCropArea);
+    } else {
+      usedAspectRatio = parseAspectRatio(aspectRatio);
+    }
+    let dimensions;
+    if (usedCropArea.width && usedCropArea.height) {
+      dimensions = getMaxDimensionsFromArea(
+        {
+          width: usedCropArea.width * damFile.image.width / 100,
+          height: usedCropArea.height * damFile.image.height / 100
+        },
+        usedAspectRatio
+      );
+    } else {
+      dimensions = getMaxDimensionsFromArea(
+        {
+          width: damFile.image.width,
+          height: damFile.image.height
+        },
+        usedAspectRatio
+      );
+    }
+    const blurDataUrl = createDominantImageDataUrl(dimensions.width, dimensions.height, damFile.image.dominantColor);
+    const nextImage = /* @__PURE__ */ jsx(
+      NextImage,
+      {
+        loader: (loaderProps) => generateImageUrl(loaderProps, usedAspectRatio),
+        src: urlTemplate,
+        fill: true,
+        style: { objectFit: "cover" },
+        placeholder: "blur",
+        blurDataURL: blurDataUrl,
+        alt: damFile.altText ?? "",
+        ...nextImageProps
+      }
+    );
+    if (fill) {
+      return nextImage;
+    }
+    return /* @__PURE__ */ jsx("div", { className: styles.imageContainer, style: { "--aspect-ratio": usedAspectRatio }, children: nextImage });
+  },
+  { label: "PixelImage" }
+);
+function createDominantImageDataUrl(w, h, dominantColor = "#ffffff") {
+  const toBase64 = (str) => typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
+  const svg = `
+<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <rect width="${w}" height="${h}" fill="${dominantColor}" />
+</svg>`;
+  return `data:image/svg+xml;base64,${toBase64(svg)}`;
+}
+export {
+  PixelImageBlock
+};

package/lib/blocks/PixelImageBlock.module.scss.js

@@ -0,0 +1,8 @@
+const imageContainer = "_imageContainer_13azr_1";
+const styles = {
+  imageContainer
+};
+export {
+  styles as default,
+  imageContainer
+};

package/lib/blocks/VimeoVideoBlock.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithData } from '@comet/site-react';
+import { ReactNode } from 'react';
+import { VimeoVideoBlockData } from '../blocks.generated';
+import { VideoPreviewImageProps } from './helpers/VideoPreviewImage';
+interface VimeoVideoBlockProps extends PropsWithData<VimeoVideoBlockData> {
+    aspectRatio?: string;
+    previewImageSizes?: string;
+    renderPreviewImage?: (props: VideoPreviewImageProps) => React.ReactElement;
+    fill?: boolean;
+    previewImageIcon?: ReactNode;
+}
+export declare const VimeoVideoBlock: ({ ...componentProps }: import('@comet/site-react').WithPreviewProps & VimeoVideoBlockProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VimeoVideoBlock.d.ts.map

package/lib/blocks/VimeoVideoBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VimeoVideoBlock.d.ts","sourceRoot":"","sources":["../../src/blocks/VimeoVideoBlock.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAwD,MAAM,mBAAmB,CAAC;AAE7G,OAAO,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,KAAK,sBAAsB,EAAqB,MAAM,6BAA6B,CAAC;AAmB7F,UAAU,oBAAqB,SAAQ,aAAa,CAAC,mBAAmB,CAAC;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,YAAY,CAAC;IAC3E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAChC;AAED,eAAO,MAAM,eAAe,yIA+E3B,CAAC"}

package/lib/blocks/VimeoVideoBlock.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { withPreview, useIsElementInViewport, PreviewSkeleton } from "@comet/site-react";
+import clsx from "clsx";
+import { useState, useRef } from "react";
+import { VideoPreviewImage } from "./helpers/VideoPreviewImage.js";
+import styles from "./VimeoVideoBlock.module.scss.js";
+function parseVimeoIdentifier(vimeoIdentifier) {
+  const urlRegEx = /^(https?:\/\/)?((www\.|player\.)?vimeo\.com\/?(showcase\/)*([0-9a-z]*\/)*([0-9]{6,11})[?]?.*)$/;
+  const idRegEx = /^([0-9]{6,11})$/;
+  const urlRegExMatch = vimeoIdentifier.match(urlRegEx);
+  const idRegExMatch = vimeoIdentifier.match(idRegEx);
+  if (!urlRegExMatch && !idRegExMatch)
+    return void 0;
+  if (urlRegExMatch) {
+    return urlRegExMatch[6];
+  } else if (idRegExMatch) {
+    return idRegExMatch[1];
+  }
+}
+const VimeoVideoBlock = withPreview(
+  ({
+    data: { vimeoIdentifier, autoplay, loop, showControls, previewImage },
+    aspectRatio = "16x9",
+    previewImageSizes,
+    renderPreviewImage,
+    fill,
+    previewImageIcon
+  }) => {
+    const [showPreviewImage, setShowPreviewImage] = useState(true);
+    const hasPreviewImage = !!(previewImage && previewImage.damFile);
+    const inViewRef = useRef(null);
+    const iframeRef = useRef(null);
+    const handleVisibilityChange = (isVisible) => {
+      var _a;
+      if ((_a = iframeRef.current) == null ? void 0 : _a.contentWindow) {
+        iframeRef.current.contentWindow.postMessage(
+          JSON.stringify({ method: isVisible && autoplay ? "play" : "pause" }),
+          "https://player.vimeo.com"
+        );
+      }
+    };
+    useIsElementInViewport(inViewRef, handleVisibilityChange);
+    if (!vimeoIdentifier) {
+      return /* @__PURE__ */ jsx(PreviewSkeleton, { type: "media", hasContent: false, aspectRatio });
+    }
+    const identifier = parseVimeoIdentifier(vimeoIdentifier);
+    const searchParams = new URLSearchParams();
+    if (autoplay)
+      searchParams.append("muted", "1");
+    if (loop !== void 0)
+      searchParams.append("loop", Number(loop).toString());
+    if (showControls !== void 0)
+      searchParams.append("controls", Number(showControls).toString());
+    searchParams.append("dnt", "1");
+    const vimeoBaseUrl = "https://player.vimeo.com/video/";
+    const vimeoUrl = new URL(`${vimeoBaseUrl}${identifier ?? ""}`);
+    vimeoUrl.search = searchParams.toString();
+    return /* @__PURE__ */ jsx(Fragment, { children: hasPreviewImage && showPreviewImage ? renderPreviewImage ? renderPreviewImage({
+      onPlay: () => setShowPreviewImage(false),
+      image: previewImage,
+      aspectRatio,
+      sizes: previewImageSizes,
+      fill,
+      icon: previewImageIcon
+    }) : /* @__PURE__ */ jsx(
+      VideoPreviewImage,
+      {
+        onPlay: () => setShowPreviewImage(false),
+        image: previewImage,
+        aspectRatio,
+        sizes: previewImageSizes,
+        fill,
+        icon: previewImageIcon
+      }
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: inViewRef,
+        className: clsx(styles.videoContainer, fill && styles.fill),
+        style: !fill ? { "--aspect-ratio": aspectRatio.replace("x", "/") } : void 0,
+        children: /* @__PURE__ */ jsx("iframe", { ref: iframeRef, className: styles.vimeoContainer, src: vimeoUrl.toString(), allow: "autoplay", allowFullScreen: true })
+      }
+    ) });
+  },
+  { label: "Video" }
+);
+export {
+  VimeoVideoBlock
+};

package/lib/blocks/VimeoVideoBlock.module.scss.js

@@ -0,0 +1,14 @@
+const videoContainer = "_videoContainer_1flq1_1";
+const fill = "_fill_1flq1_7";
+const vimeoContainer = "_vimeoContainer_1flq1_12";
+const styles = {
+  videoContainer,
+  fill,
+  vimeoContainer
+};
+export {
+  styles as default,
+  fill,
+  videoContainer,
+  vimeoContainer
+};

package/lib/blocks/YouTubeVideoBlock.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithData } from '@comet/site-react';
+import { ReactElement, ReactNode } from 'react';
+import { YouTubeVideoBlockData } from '../blocks.generated';
+import { VideoPreviewImageProps } from './helpers/VideoPreviewImage';
+interface YouTubeVideoBlockProps extends PropsWithData<YouTubeVideoBlockData> {
+    aspectRatio?: string;
+    previewImageSizes?: string;
+    renderPreviewImage?: (props: VideoPreviewImageProps) => ReactElement;
+    fill?: boolean;
+    previewImageIcon?: ReactNode;
+}
+export declare const YouTubeVideoBlock: ({ ...componentProps }: import('@comet/site-react').WithPreviewProps & YouTubeVideoBlockProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=YouTubeVideoBlock.d.ts.map

package/lib/blocks/YouTubeVideoBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"YouTubeVideoBlock.d.ts","sourceRoot":"","sources":["../../src/blocks/YouTubeVideoBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAwD,MAAM,mBAAmB,CAAC;AAE7G,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,KAAK,sBAAsB,EAAqB,MAAM,6BAA6B,CAAC;AAc7F,UAAU,sBAAuB,SAAQ,aAAa,CAAC,qBAAqB,CAAC;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,YAAY,CAAC;IACrE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAChC;AAED,eAAO,MAAM,iBAAiB,2IA4F7B,CAAC"}