@makeswift/runtime 0.4.2 → 0.5.1

package/dist/index.cjs2.js

@@ -31,117 +31,735 @@ var __objRest = (source, exclude) => {
   return target;
 };
 var React = require("react");
-var scrollIntoView = require("scroll-into-view-if-needed");
-var NextLink = require("next/link");
 var next = require("./index.cjs.js");
+require("use-sync-external-store/shim");
+require("./slot.cjs.js");
+var css = require("@emotion/css");
 var jsxRuntime = require("react/jsx-runtime");
+var reactPage = require("./react-page.cjs.js");
+var NextImage = require("next/image");
+var useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect.cjs.js");
+var ReactPlayer = require("react-player");
+var nextVersion = require("./next-version.cjs.js");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };
 }
-var scrollIntoView__default = /* @__PURE__ */ _interopDefaultLegacy(scrollIntoView);
-var NextLink__default = /* @__PURE__ */ _interopDefaultLegacy(NextLink);
-const Link = React.forwardRef(function Link2(_a, ref) {
+var NextImage__default = /* @__PURE__ */ _interopDefaultLegacy(NextImage);
+var ReactPlayer__default = /* @__PURE__ */ _interopDefaultLegacy(ReactPlayer);
+function useBackgrounds(value) {
+  const fileIds = reactPage.getBackgroundsFileIds(value);
+  const files = next.useFiles(fileIds);
+  const swatchIds = reactPage.getBackgroundsSwatchIds(value);
+  const swatches = next.useSwatches(swatchIds);
+  return React.useMemo(() => {
+    if (value == null)
+      return null;
+    return value.map((_a) => {
+      var _b = _a, { value: backgrounds } = _b, restOfValue = __objRest(_b, ["value"]);
+      return __spreadProps(__spreadValues({}, restOfValue), {
+        value: backgrounds.map((bg) => {
+          if (bg.type === "image" && bg.payload != null && bg.payload.imageId != null) {
+            const _a2 = bg.payload, { imageId } = _a2, restOfPayload = __objRest(_a2, ["imageId"]);
+            const file = files.find((f) => f && f.id === imageId);
+            return file && {
+              id: bg.id,
+              type: "image",
+              payload: __spreadProps(__spreadValues({}, restOfPayload), {
+                publicUrl: file.publicUrl,
+                dimensions: file.dimensions
+              })
+            };
+          }
+          if (bg.type === "color" && bg.payload != null) {
+            const { swatchId, alpha } = bg.payload;
+            const swatch = swatches.filter(reactPage.isNonNullable).find((s) => s && s.id === swatchId);
+            return { id: bg.id, type: "color", payload: { swatch, alpha } };
+          }
+          if (bg.type === "gradient" && bg.payload != null && bg.payload.stops.length > 0) {
+            return {
+              id: bg.id,
+              type: "gradient",
+              payload: {
+                angle: bg.payload.angle,
+                isRadial: bg.payload.isRadial,
+                stops: bg.payload.stops.map((_b2) => {
+                  var _c = _b2, { color } = _c, restOfStop = __objRest(_c, ["color"]);
+                  return __spreadProps(__spreadValues({}, restOfStop), {
+                    color: color && {
+                      swatch: swatches.filter(reactPage.isNonNullable).find((s) => s && s.id === color.swatchId),
+                      alpha: color.alpha
+                    }
+                  });
+                })
+              }
+            };
+          }
+          if (bg.type === "video" && bg.payload != null) {
+            const _d = bg.payload, { maskColor } = _d, restOfPayload = __objRest(_d, ["maskColor"]);
+            const swatch = maskColor && swatches.find((s) => s && s.id === maskColor.swatchId);
+            return {
+              id: bg.id,
+              type: "video",
+              payload: __spreadProps(__spreadValues({}, restOfPayload), {
+                maskColor: swatch && maskColor && { swatch, alpha: maskColor.alpha }
+              })
+            };
+          }
+          return null;
+        }).filter(reactPage.isNonNullable)
+      });
+    });
+  }, [files, swatches, value]);
+}
+const gridItemIdentifierClassName = "grid-item";
+function GridItem(_a) {
   var _b = _a, {
-    link,
-    onClick = () => {
-    }
+    grid,
+    index,
+    columnGap,
+    rowGap,
+    className,
+    itemAnimateDuration,
+    itemAnimateDelay,
+    itemStaggerDuration
   } = _b, restOfProps = __objRest(_b, [
-    "link",
-    "onClick"
+    "grid",
+    "index",
+    "columnGap",
+    "rowGap",
+    "className",
+    "itemAnimateDuration",
+    "itemAnimateDelay",
+    "itemStaggerDuration"
   ]);
-  var _a2;
-  const pageId = link && link.type === "OPEN_PAGE" ? link.payload.pageId : null;
-  const page = next.usePagePathnameSlice(pageId != null ? pageId : null);
-  const elementKey = (link == null ? void 0 : link.type) === "SCROLL_TO_ELEMENT" ? (_a2 = link.payload.elementIdConfig) == null ? void 0 : _a2.elementKey : null;
-  const elementId = next.useElementId(elementKey);
-  let useNextLink;
-  let href;
-  let target;
-  let block;
-  if (link) {
-    switch (link.type) {
-      case "OPEN_PAGE": {
-        if (page) {
-          useNextLink = true;
-          href = `/${page.pathname}`;
-        }
-        target = link.payload.openInNewTab ? "_blank" : "_self";
-        break;
+  const gridItemClassName = next.useStyle(next.responsiveGridItem({
+    grid,
+    index,
+    columnGap,
+    rowGap
+  }));
+  const animationClassName = useItemAnimation(itemAnimateDuration, itemAnimateDelay, itemStaggerDuration, index);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(gridItemClassName, className, animationClassName, gridItemIdentifierClassName)
+  }));
+}
+const useElementOnScreen = (element, options) => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(intersectionCallback, options);
+    if (element)
+      observer.observe(element);
+    return () => {
+      if (element)
+        observer.unobserve(element);
+    };
+    function intersectionCallback([entry]) {
+      if (entry == null ? void 0 : entry.isIntersecting) {
+        setIsVisible(true);
       }
-      case "OPEN_URL": {
-        useNextLink = true;
-        href = link.payload.url;
-        target = link.payload.openInNewTab ? "_blank" : "_self";
-        break;
+    }
+  }, [element, options]);
+  return isVisible;
+};
+function compareResponsiveValues(a, b) {
+  if (a == null && b == null) {
+    return true;
+  }
+  if (a != null && b != null) {
+    let isEqual = true;
+    a.forEach((currentA, index) => {
+      const currentB = b.at(index);
+      if (currentB == null) {
+        isEqual = false;
+        return;
+      }
+      if (currentA.deviceId != (currentB == null ? void 0 : currentB.deviceId) || currentA.value != currentB.value) {
+        isEqual = false;
       }
-      case "SEND_EMAIL": {
-        useNextLink = false;
+    });
+    return isEqual;
+  }
+  return false;
+}
+function areBoxAnimationPropsEqual(prevProps, props) {
+  return compareResponsiveValues(prevProps.boxAnimateType, props.boxAnimateType) && compareResponsiveValues(prevProps.boxAnimateDuration, props.boxAnimateDuration) && compareResponsiveValues(prevProps.boxAnimateDelay, props.boxAnimateDelay) && compareResponsiveValues(prevProps.itemAnimateType, props.itemAnimateType) && compareResponsiveValues(prevProps.itemAnimateDuration, props.itemAnimateDuration) && compareResponsiveValues(prevProps.itemAnimateDelay, props.itemAnimateDelay) && compareResponsiveValues(prevProps.itemStaggerDuration, props.itemStaggerDuration);
+}
+const exitedBoxAnimationProperties = {
+  none: {
+    opacity: 1
+  },
+  fadeIn: {
+    opacity: 0
+  },
+  fadeLeft: {
+    transform: "translate3d(60px,0,0)",
+    opacity: 0
+  },
+  fadeRight: {
+    transform: "translate3d(-60px,0,0)",
+    opacity: 0
+  },
+  fadeDown: {
+    transform: "translate3d(0,-80px,0)",
+    opacity: 0
+  },
+  fadeUp: {
+    transform: "translate3d(0,80px,0)",
+    opacity: 0
+  },
+  blurIn: {
+    filter: "blur(20px)",
+    opacity: 0
+  },
+  scaleDown: {
+    transform: "scale(1.2)",
+    opacity: 0
+  },
+  scaleUp: {
+    transform: "scale(.75)",
+    opacity: 0
+  }
+};
+const enteredBoxAnimationProperties = {
+  none: {
+    opacity: 1
+  },
+  fadeIn: {
+    opacity: 1
+  },
+  fadeLeft: {
+    transform: "translate3d(0px,0,0)",
+    opacity: 1
+  },
+  fadeRight: {
+    transform: "translate3d(0px,0,0)",
+    opacity: 1
+  },
+  fadeDown: {
+    transform: "translate3d(0,0px,0)",
+    opacity: 1
+  },
+  fadeUp: {
+    transform: "translate3d(0,0px,0)",
+    opacity: 1
+  },
+  blurIn: {
+    filter: "blur(0px)",
+    opacity: 1
+  },
+  scaleDown: {
+    transform: "scale(1)",
+    opacity: 1
+  },
+  scaleUp: {
+    transform: "scale(1)",
+    opacity: 1
+  }
+};
+function useBoxAnimation(boxElement, responsiveAnimationType, responsiveDuration, responisveDelay, itemResponsiveAnimationType) {
+  const isVisible = useElementOnScreen(boxElement, {
+    root: null,
+    rootMargin: `0px 0px -10% 0px`,
+    threshold: 0.2
+  });
+  const animationType = next.useMediaQuery(responsiveAnimationType) || next.DEFAULT_BOX_ANIMATE_TYPE;
+  const itemAnimationType = next.useMediaQuery(itemResponsiveAnimationType) || next.DEFAULT_ITEM_ANIMATE_TYPE;
+  const duration = next.useMediaQuery(responsiveDuration) || next.DEFAULT_BOX_ANIMATE_DURATION;
+  const delay = next.useMediaQuery(responisveDelay) || next.DEFAULT_BOX_ANIMATE_DELAY;
+  const actualDelay = delay * 1e3;
+  const actualDuration = duration * 1e3;
+  const entered = __spreadProps(__spreadValues({}, enteredBoxAnimationProperties[animationType]), {
+    transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`,
+    [`& > div > .${gridItemIdentifierClassName}`]: __spreadValues({}, enteredBoxAnimationProperties[itemAnimationType])
+  });
+  const exited = __spreadProps(__spreadValues({}, exitedBoxAnimationProperties[animationType]), {
+    transition: `all 0ms`,
+    [`& > div > .${gridItemIdentifierClassName}`]: __spreadValues({}, exitedBoxAnimationProperties[itemAnimationType])
+  });
+  const [isEntered, setEntered] = React.useState(false);
+  React.useEffect(() => {
+    if (isVisible && !isEntered)
+      setEntered(true);
+  }, [isVisible, entered]);
+  const replayAnimation = React.useCallback(() => {
+    setEntered(false);
+  }, []);
+  return [next.useStyle({
+    "@media (prefers-reduced-motion: no-preference)": isEntered ? entered : exited
+  }), replayAnimation];
+}
+function useItemAnimation(responsiveDuration, responisveDelay, responsiveStagger, index) {
+  const duration = next.useMediaQuery(responsiveDuration) || next.DEFAULT_BOX_ANIMATE_DURATION;
+  const delay = next.useMediaQuery(responisveDelay) || next.DEFAULT_BOX_ANIMATE_DELAY;
+  const stagger = next.useMediaQuery(responsiveStagger) || next.DEFAULT_ITEM_STAGGER_DURATION;
+  const delayFromStagger = responsiveStagger == null || index == null ? 0 : stagger * index;
+  const actualDelay = (delay + delayFromStagger) * 1e3;
+  const actualDuration = duration * 1e3;
+  return next.useStyle({
+    "@media (prefers-reduced-motion: no-preference)": {
+      transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`
+    }
+  });
+}
+const clamp = (min, val, max) => Math.min(Math.max(min, val), max);
+function isScrollable(element) {
+  const {
+    overflow,
+    overflowY,
+    overflowX
+  } = element.ownerDocument.defaultView.getComputedStyle(element);
+  return /(auto|scroll)/.test(overflow + overflowX + overflowY);
+}
+function getScrollParent(element) {
+  const {
+    parentElement
+  } = element;
+  if (!element || !parentElement)
+    return element;
+  if (isScrollable(element))
+    return element;
+  return getScrollParent(parentElement);
+}
+function Parallax(_c) {
+  var _d = _c, {
+    strength,
+    children
+  } = _d, rest = __objRest(_d, [
+    "strength",
+    "children"
+  ]);
+  const container = React.useRef(null);
+  const [containerScrollTop, setContainerScrollTop] = React.useState(strength == null ? 0 : strength);
+  const lastScrollParentScrollTop = React.useRef(0);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    if (!container.current || strength == null || strength === 0)
+      return void 0;
+    const containerDocument = container.current.ownerDocument;
+    const scrollParent = getScrollParent(container.current);
+    const eventTarget = containerDocument.documentElement === scrollParent ? containerDocument.defaultView : scrollParent;
+    lastScrollParentScrollTop.current = scrollParent.scrollTop;
+    setContainerScrollTop(strength);
+    function handleScroll() {
+      containerDocument.defaultView.requestAnimationFrame(() => {
+        if (!container.current)
+          return;
         const {
-          to,
-          subject = "",
-          body = ""
-        } = link.payload;
-        if (to != null)
-          href = `mailto:${to}?subject=${subject}&body=${body}`;
-        break;
+          top: containerTop,
+          bottom: containerBottom
+        } = container.current.getBoundingClientRect();
+        const {
+          top: scrollParentTop,
+          bottom: scrollParentBottom
+        } = scrollParent === containerDocument.documentElement ? {
+          top: 0,
+          bottom: containerDocument.defaultView.innerHeight
+        } : scrollParent.getBoundingClientRect();
+        const {
+          scrollTop: scrollParentScrollTop
+        } = scrollParent === containerDocument.documentElement ? {
+          scrollTop: containerDocument.defaultView.pageYOffset
+        } : scrollParent;
+        const scrollParentHeight = scrollParentBottom - scrollParentTop;
+        const scrollParentScrollDelta = scrollParentScrollTop - lastScrollParentScrollTop.current;
+        lastScrollParentScrollTop.current = scrollParentScrollTop;
+        setContainerScrollTop((scrollTop) => {
+          const isContainerVisible = containerTop < scrollParentTop + scrollParentHeight && containerBottom > scrollParentTop;
+          const containerScrollRemaining = scrollParentScrollDelta > 0 ? 2 * strength - scrollTop : scrollTop;
+          const scrollParentScrollRemaining = scrollParentScrollDelta > 0 ? scrollParentTop + containerBottom : scrollParentHeight - containerTop;
+          const parallaxRatio = containerScrollRemaining / scrollParentScrollRemaining;
+          const containerScrollDelta = isContainerVisible ? parallaxRatio * scrollParentScrollDelta : 0;
+          return clamp(0, scrollTop + containerScrollDelta, strength * 2);
+        });
+      });
+    }
+    eventTarget.addEventListener("scroll", handleScroll);
+    return () => eventTarget.removeEventListener("scroll", handleScroll);
+  }, [strength]);
+  const getProps = React.useCallback((_a) => {
+    var _b = _a, {
+      style
+    } = _b, restOfChildrenProps = __objRest(_b, [
+      "style"
+    ]);
+    return __spreadProps(__spreadValues({}, restOfChildrenProps), {
+      style: __spreadValues(__spreadProps(__spreadValues({}, style), {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      }), strength == null || strength === 0 ? {} : {
+        top: -strength,
+        bottom: -strength,
+        transform: `translate3d(0, ${containerScrollTop - strength}px, 0)`
+      })
+    });
+  }, [strength, containerScrollTop]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, rest), {
+    ref: container,
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
+    },
+    children: children(getProps)
+  }));
+}
+const Container = React.forwardRef(function Container2(_e, ref) {
+  var _f = _e, {
+    className
+  } = _f, restOfProps = __objRest(_f, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    className: css.cx(next.useStyle({
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      pointerEvents: "none",
+      overflow: "hidden"
+    }), className)
+  }));
+});
+function Mask({
+  backgroundColor,
+  visible
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: next.useStyle({
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: backgroundColor,
+      opacity: visible ? 1 : 0,
+      transition: "opacity 1s"
+    })
+  });
+}
+const getScale = (element, aspectRatio, zoom) => {
+  const {
+    offsetWidth: width,
+    offsetHeight: height
+  } = element;
+  const computedAspectRatio = width / height;
+  return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom;
+};
+function BackgroundVideo({
+  url = "",
+  aspectRatio = 16 / 9,
+  zoom = 1,
+  maskColor,
+  opacity
+}) {
+  var _a;
+  const [ready, setReady] = React.useState(false);
+  const [scale, setScale] = React.useState(1);
+  const container = React.useRef(null);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    const {
+      current: containerEl
+    } = container;
+    if (!containerEl)
+      return void 0;
+    const {
+      defaultView
+    } = containerEl.ownerDocument;
+    const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom));
+    handleResize();
+    defaultView.addEventListener("resize", handleResize);
+    return () => defaultView.removeEventListener("resize", handleResize);
+  }, [aspectRatio, zoom]);
+  if (!ReactPlayer__default["default"].canPlay(url))
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container, {
+    ref: container,
+    children: [container.current && /* @__PURE__ */ jsxRuntime.jsx(ReactPlayer__default["default"], {
+      url,
+      config: {
+        vimeo: {
+          playerOptions: {
+            background: true
+          }
+        },
+        youtube: {
+          playerVars: {
+            origin: (_a = container.current.ownerDocument.defaultView) == null ? void 0 : _a.location.origin
+          }
+        },
+        wistia: {
+          options: {
+            endVideoBehavior: "loop",
+            playbackRateControl: false,
+            playbar: false,
+            playButton: false,
+            volumeControl: false,
+            fullscreenButton: false,
+            muted: true
+          }
+        }
+      },
+      playing: true,
+      loop: true,
+      muted: true,
+      controls: false,
+      onReady: () => setReady(true),
+      style: {
+        transform: `scale3d(${scale}, ${scale}, 1)`,
+        opacity
+      },
+      width: "100%",
+      height: "100%"
+    }), /* @__PURE__ */ jsxRuntime.jsx(Mask, {
+      backgroundColor: maskColor,
+      visible: !ready
+    })]
+  });
+}
+const NextLegacyImage = NextImage__default["default"];
+function getColor(color) {
+  if (color == null)
+    return "black";
+  if (color.swatch == null) {
+    return next.colorToString(__spreadProps(__spreadValues({}, color), {
+      swatch: {
+        hue: 0,
+        saturation: 0,
+        lightness: 0
       }
-      case "CALL_PHONE": {
-        useNextLink = false;
-        href = `tel:${link.payload.phoneNumber}`;
-        break;
+    }));
+  }
+  return next.colorToString(color);
+}
+const getStopsStyle = (stops) => stops.map(({
+  color,
+  location
+}) => `${getColor(color)} ${location}%`).join(",");
+const absoluteFillStyle = {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+};
+const containerStyle = __spreadProps(__spreadValues({}, absoluteFillStyle), {
+  borderRadius: "inherit"
+});
+function Backgrounds({
+  backgrounds
+}) {
+  if (backgrounds == null)
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: backgrounds.map(({
+      value,
+      deviceId
+    }) => {
+      const visibility = backgrounds.map((v) => ({
+        deviceId: v.deviceId,
+        value: v.deviceId === deviceId
+      }));
+      return /* @__PURE__ */ jsxRuntime.jsx(BackgroundDeviceLayer, {
+        layer: value,
+        visibility
+      }, deviceId);
+    })
+  });
+}
+function BackgroundDeviceLayer({
+  layer,
+  visibility
+}) {
+  const visibilityStyle = next.responsiveStyle([visibility], ([v]) => ({
+    display: v === true ? "block" : "none"
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: next.useStyle(__spreadProps(__spreadValues(__spreadValues({}, containerStyle), visibilityStyle), {
+      overflow: "hidden"
+    })),
+    children: [...layer].reverse().map((bg) => {
+      if (bg.type === "color") {
+        return /* @__PURE__ */ jsxRuntime.jsx(ColorBackground, {
+          color: getColor(bg.payload)
+        }, bg.id);
       }
-      case "SCROLL_TO_ELEMENT": {
-        useNextLink = false;
-        href = `#${elementId != null ? elementId : ""}`;
-        block = link.payload.block;
-        break;
+      if (bg.type === "image" && bg.payload) {
+        return /* @__PURE__ */ React.createElement(ImageBackground, __spreadProps(__spreadValues({}, bg.payload), {
+          key: bg.id
+        }));
       }
-      default:
-        throw new RangeError(`Invalid link type "${link.type}."`);
-    }
-  }
-  function handleClick(event) {
-    onClick(event);
-    if (event.defaultPrevented)
-      return;
-    if (event.currentTarget.isContentEditable)
-      return event.preventDefault();
-    if (link && link.type === "SCROLL_TO_ELEMENT") {
-      let hash;
-      try {
-        if (href != null)
-          hash = new URL(`http://www.example.com/${href}`).hash;
-      } catch (error) {
-        console.error(`Link received invalid href: ${href}`, error);
+      if (bg.type === "gradient" && bg.payload) {
+        return /* @__PURE__ */ React.createElement(GradientBackground, __spreadProps(__spreadValues({}, bg.payload), {
+          key: bg.id,
+          gradient: getStopsStyle(bg.payload.stops)
+        }));
       }
-      if (href != null && hash != null && href === hash) {
-        event.preventDefault();
-        const view = event.view;
-        scrollIntoView__default["default"](view.document.querySelector(hash), {
-          behavior: "smooth",
-          block
-        });
-        if (view.location.hash !== hash)
-          view.history.pushState({}, "", hash);
+      if (bg.type === "video" && bg.payload) {
+        return /* @__PURE__ */ React.createElement(VideoBackground, __spreadProps(__spreadValues({}, bg.payload), {
+          key: bg.id,
+          maskColor: getColor(bg.payload.maskColor)
+        }));
       }
-    }
-  }
-  if (useNextLink && href != null) {
-    return /* @__PURE__ */ jsxRuntime.jsx(NextLink__default["default"], {
-      href,
-      children: /* @__PURE__ */ jsxRuntime.jsx("a", __spreadProps(__spreadValues({}, restOfProps), {
-        ref,
-        target,
-        onClick: handleClick
+      return null;
+    })
+  });
+}
+function ColorBackground({
+  color
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: next.useStyle(__spreadProps(__spreadValues({}, containerStyle), {
+      backgroundColor: color
+    }))
+  });
+}
+const ImageBackgroundRepeat = {
+  NoRepeat: "no-repeat",
+  RepeatX: "repeat-x",
+  RepeatY: "repeat-y",
+  Repeat: "repeat"
+};
+const ImageBackgroundSize = {
+  Cover: "cover",
+  Contain: "contain",
+  Auto: "auto"
+};
+function ImageBackground({
+  publicUrl,
+  position,
+  repeat = ImageBackgroundRepeat.NoRepeat,
+  size = ImageBackgroundSize.Cover,
+  opacity,
+  parallax
+}) {
+  const backgroundPosition = `${position.x}% ${position.y}%`;
+  const containerClassName = next.useStyle(containerStyle);
+  if (repeat === "no-repeat" && size !== "auto" && publicUrl != null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Parallax, {
+      strength: parallax,
+      children: (getParallaxProps) => /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, getParallaxProps({
+        style: {
+          opacity,
+          overflow: "hidden"
+        }
+      })), {
+        children: nextVersion.major < 13 ? /* @__PURE__ */ jsxRuntime.jsx(NextLegacyImage, {
+          src: publicUrl,
+          layout: "fill",
+          objectPosition: backgroundPosition,
+          objectFit: size
+        }) : /* @__PURE__ */ jsxRuntime.jsx(NextImage__default["default"], {
+          src: publicUrl,
+          alt: "",
+          fill: true,
+          sizes: "100vw",
+          style: {
+            objectPosition: backgroundPosition,
+            objectFit: size
+          }
+        })
       }))
     });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("a", __spreadProps(__spreadValues({}, restOfProps), {
-    ref,
-    href,
-    target,
-    onClick: handleClick
+  return /* @__PURE__ */ jsxRuntime.jsx(Parallax, {
+    strength: parallax,
+    children: (getParallaxProps) => /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({
+      className: containerClassName
+    }, getParallaxProps({
+      style: {
+        backgroundImage: publicUrl != null ? `url('${publicUrl}')` : void 0,
+        backgroundPosition,
+        backgroundRepeat: repeat,
+        backgroundSize: size,
+        opacity
+      }
+    })))
+  });
+}
+function GradientBackground({
+  gradient,
+  isRadial = false,
+  angle = Math.PI
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: next.useStyle(__spreadProps(__spreadValues({}, containerStyle), {
+      background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
+    }))
+  });
+}
+function getAspectRatio(aspectRatio) {
+  switch (aspectRatio) {
+    case "wide":
+      return 16 / 9;
+    case "standard":
+      return 4 / 3;
+    default:
+      return 16 / 9;
+  }
+}
+function VideoBackground({
+  url,
+  aspectRatio,
+  maskColor,
+  zoom,
+  opacity,
+  parallax
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Parallax, {
+    strength: parallax,
+    children: (getParallaxProps) => /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, getParallaxProps({
+      className: next.useStyle(containerStyle)
+    })), {
+      children: /* @__PURE__ */ jsxRuntime.jsx(BackgroundVideo, {
+        url,
+        zoom,
+        opacity,
+        aspectRatio: getAspectRatio(aspectRatio),
+        maskColor
+      })
+    }))
+  });
+}
+var BackgroundsContainer = React.forwardRef(function BackgroundsContainer2(_g, ref) {
+  var _h = _g, {
+    backgrounds,
+    children,
+    className
+  } = _h, restOfProps = __objRest(_h, [
+    "backgrounds",
+    "children",
+    "className"
+  ]);
+  const [handle, setHandle] = React.useState(null);
+  React.useImperativeHandle(ref, () => handle, [handle]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", __spreadProps(__spreadValues({}, restOfProps), {
+    ref: setHandle,
+    className: css.cx(next.useStyle({
+      position: "relative",
+      width: "100%",
+      margin: "0 auto",
+      "> *": {
+        borderRadius: "inherit",
+        height: "inherit"
+      },
+      "> :last-child": {
+        position: "relative"
+      }
+    }), className),
+    children: [/* @__PURE__ */ jsxRuntime.jsx(Backgrounds, {
+      backgrounds: useBackgrounds(backgrounds)
+    }), React.Children.only(children)]
   }));
 });
-exports.Link = Link;
+exports.BackgroundsContainer = BackgroundsContainer;
+exports.GridItem = GridItem;
+exports.areBoxAnimationPropsEqual = areBoxAnimationPropsEqual;
+exports.useBackgrounds = useBackgrounds;
+exports.useBoxAnimation = useBoxAnimation;
 //# sourceMappingURL=index.cjs2.js.map