@makeswift/runtime 0.5.0 → 0.5.2

package/dist/index.es2.js

@@ -29,112 +29,727 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { forwardRef } from "react";
-import scrollIntoView from "scroll-into-view-if-needed";
-import NextLink from "next/link";
-import { Q as usePagePathnameSlice, T as useElementId } from "./index.es.js";
-import { jsx } from "react/jsx-runtime";
-const Link = forwardRef(function Link2(_a, ref) {
+import { useMemo, useState, useEffect, useCallback, useRef, forwardRef, createElement, useImperativeHandle, Children } from "react";
+import { N as useFiles, K as useSwatches, o as useStyle, w as responsiveGridItem, m as useMediaQuery, c as DEFAULT_BOX_ANIMATE_TYPE, f as DEFAULT_ITEM_ANIMATE_TYPE, e as DEFAULT_BOX_ANIMATE_DURATION, d as DEFAULT_BOX_ANIMATE_DELAY, i as DEFAULT_ITEM_STAGGER_DURATION, r as responsiveStyle, s as colorToString } from "./index.es.js";
+import "use-sync-external-store/shim";
+import "./slot.es.js";
+import { cx } from "@emotion/css";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { l as isNonNullable, x as getBackgroundsFileIds, y as getBackgroundsSwatchIds } from "./react-page.es.js";
+import NextImage from "next/image";
+import { u as useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.es.js";
+import ReactPlayer from "react-player";
+import { m as major } from "./next-version.es.js";
+function useBackgrounds(value) {
+  const fileIds = getBackgroundsFileIds(value);
+  const files = useFiles(fileIds);
+  const swatchIds = getBackgroundsSwatchIds(value);
+  const swatches = useSwatches(swatchIds);
+  return 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(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(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(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 = 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 = 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 = useStyle(responsiveGridItem({
+    grid,
+    index,
+    columnGap,
+    rowGap
+  }));
+  const animationClassName = useItemAnimation(itemAnimateDuration, itemAnimateDelay, itemStaggerDuration, index);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(gridItemClassName, className, animationClassName, gridItemIdentifierClassName)
+  }));
+}
+const useElementOnScreen = (element, options) => {
+  const [isVisible, setIsVisible] = useState(false);
+  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 = useMediaQuery(responsiveAnimationType) || DEFAULT_BOX_ANIMATE_TYPE;
+  const itemAnimationType = useMediaQuery(itemResponsiveAnimationType) || DEFAULT_ITEM_ANIMATE_TYPE;
+  const duration = useMediaQuery(responsiveDuration) || DEFAULT_BOX_ANIMATE_DURATION;
+  const delay = useMediaQuery(responisveDelay) || 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] = useState(false);
+  useEffect(() => {
+    if (isVisible && !isEntered)
+      setEntered(true);
+  }, [isVisible, entered]);
+  const replayAnimation = useCallback(() => {
+    setEntered(false);
+  }, []);
+  return [useStyle({
+    "@media (prefers-reduced-motion: no-preference)": isEntered ? entered : exited
+  }), replayAnimation];
+}
+function useItemAnimation(responsiveDuration, responisveDelay, responsiveStagger, index) {
+  const duration = useMediaQuery(responsiveDuration) || DEFAULT_BOX_ANIMATE_DURATION;
+  const delay = useMediaQuery(responisveDelay) || DEFAULT_BOX_ANIMATE_DELAY;
+  const stagger = useMediaQuery(responsiveStagger) || DEFAULT_ITEM_STAGGER_DURATION;
+  const delayFromStagger = responsiveStagger == null || index == null ? 0 : stagger * index;
+  const actualDelay = (delay + delayFromStagger) * 1e3;
+  const actualDuration = duration * 1e3;
+  return 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 = useRef(null);
+  const [containerScrollTop, setContainerScrollTop] = useState(strength == null ? 0 : strength);
+  const lastScrollParentScrollTop = useRef(0);
+  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 {
+          top: containerTop,
+          bottom: containerBottom
+        } = container.current.getBoundingClientRect();
+        const {
+          top: scrollParentTop,
+          bottom: scrollParentBottom
+        } = scrollParent === containerDocument.documentElement ? {
+          top: 0,
+          bottom: containerDocument.defaultView.innerHeight
+        } : scrollParent.getBoundingClientRect();
         const {
-          to,
-          subject = "",
-          body = ""
-        } = link.payload;
-        if (to != null)
-          href = `mailto:${to}?subject=${subject}&body=${body}`;
-        break;
+          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 = 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__ */ jsx("div", __spreadProps(__spreadValues({}, rest), {
+    ref: container,
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
+    },
+    children: children(getProps)
+  }));
+}
+const Container = forwardRef(function Container2(_e, ref) {
+  var _f = _e, {
+    className
+  } = _f, restOfProps = __objRest(_f, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    className: cx(useStyle({
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      pointerEvents: "none",
+      overflow: "hidden"
+    }), className)
+  }));
+});
+function Mask({
+  backgroundColor,
+  visible
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    className: 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] = useState(false);
+  const [scale, setScale] = useState(1);
+  const container = useRef(null);
+  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.canPlay(url))
+    return /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsxs(Container, {
+    ref: container,
+    children: [container.current && /* @__PURE__ */ jsx(ReactPlayer, {
+      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__ */ jsx(Mask, {
+      backgroundColor: maskColor,
+      visible: !ready
+    })]
+  });
+}
+const NextLegacyImage = NextImage;
+function getColor(color) {
+  if (color == null)
+    return "black";
+  if (color.swatch == null) {
+    return colorToString(__spreadProps(__spreadValues({}, color), {
+      swatch: {
+        hue: 0,
+        saturation: 0,
+        lightness: 0
       }
-      case "CALL_PHONE": {
-        useNextLink = false;
-        href = `tel:${link.payload.phoneNumber}`;
-        break;
+    }));
+  }
+  return 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__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: backgrounds.map(({
+      value,
+      deviceId
+    }) => {
+      const visibility = backgrounds.map((v) => ({
+        deviceId: v.deviceId,
+        value: v.deviceId === deviceId
+      }));
+      return /* @__PURE__ */ jsx(BackgroundDeviceLayer, {
+        layer: value,
+        visibility
+      }, deviceId);
+    })
+  });
+}
+function BackgroundDeviceLayer({
+  layer,
+  visibility
+}) {
+  const visibilityStyle = responsiveStyle([visibility], ([v]) => ({
+    display: v === true ? "block" : "none"
+  }));
+  return /* @__PURE__ */ jsx("div", {
+    className: useStyle(__spreadProps(__spreadValues(__spreadValues({}, containerStyle), visibilityStyle), {
+      overflow: "hidden"
+    })),
+    children: [...layer].reverse().map((bg) => {
+      if (bg.type === "color") {
+        return /* @__PURE__ */ 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__ */ 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__ */ 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(view.document.querySelector(hash), {
-          behavior: "smooth",
-          block
-        });
-        if (view.location.hash !== hash)
-          view.history.pushState({}, "", hash);
+      if (bg.type === "video" && bg.payload) {
+        return /* @__PURE__ */ createElement(VideoBackground, __spreadProps(__spreadValues({}, bg.payload), {
+          key: bg.id,
+          maskColor: getColor(bg.payload.maskColor)
+        }));
       }
-    }
+      return null;
+    })
+  });
+}
+function ColorBackground({
+  color
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    className: 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 = useStyle(containerStyle);
+  if (repeat === "no-repeat" && size !== "auto" && publicUrl != null) {
+    return /* @__PURE__ */ jsx(Parallax, {
+      strength: parallax,
+      children: (getParallaxProps) => /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, getParallaxProps({
+        style: {
+          opacity,
+          overflow: "hidden"
+        }
+      })), {
+        children: major < 13 ? /* @__PURE__ */ jsx(NextLegacyImage, {
+          src: publicUrl,
+          layout: "fill",
+          objectPosition: backgroundPosition,
+          objectFit: size
+        }) : /* @__PURE__ */ jsx(NextImage, {
+          src: publicUrl,
+          alt: "",
+          fill: true,
+          sizes: "100vw",
+          style: {
+            objectPosition: backgroundPosition,
+            objectFit: size
+          }
+        })
+      }))
+    });
   }
-  if (useNextLink && href != null) {
-    return /* @__PURE__ */ jsx(NextLink, __spreadProps(__spreadValues({}, restOfProps), {
-      ref,
-      target,
-      onClick: handleClick,
-      href,
-      legacyBehavior: false
-    }));
+  return /* @__PURE__ */ jsx(Parallax, {
+    strength: parallax,
+    children: (getParallaxProps) => /* @__PURE__ */ 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__ */ jsx("div", {
+    className: 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;
   }
-  return /* @__PURE__ */ jsx("a", __spreadProps(__spreadValues({}, restOfProps), {
-    ref,
-    href,
-    target,
-    onClick: handleClick
+}
+function VideoBackground({
+  url,
+  aspectRatio,
+  maskColor,
+  zoom,
+  opacity,
+  parallax
+}) {
+  return /* @__PURE__ */ jsx(Parallax, {
+    strength: parallax,
+    children: (getParallaxProps) => /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, getParallaxProps({
+      className: useStyle(containerStyle)
+    })), {
+      children: /* @__PURE__ */ jsx(BackgroundVideo, {
+        url,
+        zoom,
+        opacity,
+        aspectRatio: getAspectRatio(aspectRatio),
+        maskColor
+      })
+    }))
+  });
+}
+var BackgroundsContainer = forwardRef(function BackgroundsContainer2(_g, ref) {
+  var _h = _g, {
+    backgrounds,
+    children,
+    className
+  } = _h, restOfProps = __objRest(_h, [
+    "backgrounds",
+    "children",
+    "className"
+  ]);
+  const [handle, setHandle] = useState(null);
+  useImperativeHandle(ref, () => handle, [handle]);
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, restOfProps), {
+    ref: setHandle,
+    className: cx(useStyle({
+      position: "relative",
+      width: "100%",
+      margin: "0 auto",
+      "> *": {
+        borderRadius: "inherit",
+        height: "inherit"
+      },
+      "> :last-child": {
+        position: "relative"
+      }
+    }), className),
+    children: [/* @__PURE__ */ jsx(Backgrounds, {
+      backgrounds: useBackgrounds(backgrounds)
+    }), Children.only(children)]
   }));
 });
-export { Link as L };
+export { BackgroundsContainer as B, GridItem as G, useBoxAnimation as a, areBoxAnimationPropsEqual as b, useBackgrounds as u };
 //# sourceMappingURL=index.es2.js.map