@makeswift/runtime 0.13.0 → 0.14.0

package/dist/index.cjs2.js

@@ -1,807 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var React = require("react");
-var reactPage = require("./react-page.cjs.js");
-require("use-sync-external-store/shim");
-var next = require("./index.cjs.js");
-var tsPattern = require("ts-pattern");
-require("./actions.cjs.js");
-require("uuid");
-require("slate");
-require("escape-html");
-require("slate-hyperscript");
-require("parse5");
-require("is-hotkey");
-var jsxRuntime = require("react/jsx-runtime");
-require("./breakpoints.cjs.js");
-var useMediaQuery = require("./useMediaQuery.cjs.js");
-var css = require("@emotion/css");
-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 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) {
-            const _a2 = bg.payload, { imageId } = _a2, restOfPayload = __objRest(_a2, ["imageId"]);
-            const file = files.find((f) => f && f.id === imageId);
-            return file && __spreadProps(__spreadValues({}, bg), {
-              payload: __spreadProps(__spreadValues({}, restOfPayload), {
-                publicUrl: file.publicUrl,
-                dimensions: file.dimensions
-              })
-            });
-          }
-          if (bg.type === "image-v1" && bg.payload != null) {
-            return tsPattern.match(bg).with({
-              payload: { image: { type: "external-file", width: tsPattern.P.number, height: tsPattern.P.number } }
-            }, (val) => {
-              const _a3 = val.payload, { image, version } = _a3, restOfPayload = __objRest(_a3, ["image", "version"]);
-              return __spreadProps(__spreadValues({}, val), {
-                type: "image",
-                payload: __spreadProps(__spreadValues({}, restOfPayload), {
-                  publicUrl: image.url,
-                  dimensions: { width: image.width, height: image.height }
-                })
-              });
-            }).with({ payload: { image: { type: "external-file" } } }, (val) => {
-              const _a3 = val.payload, { image, version } = _a3, restOfPayload = __objRest(_a3, ["image", "version"]);
-              return __spreadProps(__spreadValues({}, val), {
-                type: "image",
-                payload: __spreadProps(__spreadValues({}, restOfPayload), {
-                  publicUrl: image.url,
-                  dimensions: null
-                })
-              });
-            }).with({ payload: { image: { type: "makeswift-file" } } }, (val) => {
-              const _a3 = val.payload, { image, version } = _a3, restOfPayload = __objRest(_a3, ["image", "version"]);
-              const file = files.find((f) => f && f.id === image.id);
-              return file && __spreadProps(__spreadValues({}, val), {
-                type: "image",
-                payload: __spreadProps(__spreadValues({}, restOfPayload), {
-                  publicUrl: file.publicUrl,
-                  dimensions: file.dimensions
-                })
-              });
-            }).otherwise(() => null);
-          }
-          if (bg.type === "color" && bg.payload != null) {
-            const { swatchId, alpha } = bg.payload;
-            const swatch = swatches.filter(next.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(next.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(next.isNonNullable)
-      });
-    });
-  }, [files, swatches, value]);
-}
-const gridItemIdentifierClassName = "grid-item";
-function GridItem(_a) {
-  var _b = _a, {
-    grid,
-    index,
-    columnGap,
-    rowGap,
-    className,
-    itemAnimateDuration,
-    itemAnimateDelay,
-    itemStaggerDuration
-  } = _b, restOfProps = __objRest(_b, [
-    "grid",
-    "index",
-    "columnGap",
-    "rowGap",
-    "className",
-    "itemAnimateDuration",
-    "itemAnimateDelay",
-    "itemStaggerDuration"
-  ]);
-  const gridItemClassName = reactPage.useStyle(next.useResponsiveGridItem({
-    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)
-  }));
-}
-function useElementOnScreen(options) {
-  const [isVisible, setIsVisible] = React.useState(false);
-  const intersectionObserverRef = React.useRef(null);
-  const setElement = React.useCallback((element) => {
-    var _a;
-    if (element != null) {
-      const observer = new IntersectionObserver(([entry]) => {
-        if (entry == null ? void 0 : entry.isIntersecting)
-          setIsVisible(true);
-      }, options);
-      observer.observe(element);
-      intersectionObserverRef.current = observer;
-    } else {
-      (_a = intersectionObserverRef.current) == null ? void 0 : _a.disconnect();
-      intersectionObserverRef.current = null;
-    }
-  }, []);
-  return [isVisible, setElement];
-}
-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;
-      }
-    });
-    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(responsiveAnimationType, responsiveDuration, responisveDelay, itemResponsiveAnimationType) {
-  const [isVisible, setElement] = useElementOnScreen({
-    root: null,
-    rootMargin: `0px 0px -10% 0px`,
-    threshold: 0.2
-  });
-  const animationType = useMediaQuery.useMediaQuery(responsiveAnimationType) || next.DEFAULT_BOX_ANIMATE_TYPE;
-  const itemAnimationType = useMediaQuery.useMediaQuery(itemResponsiveAnimationType) || next.DEFAULT_ITEM_ANIMATE_TYPE;
-  const duration = useMediaQuery.useMediaQuery(responsiveDuration) || next.DEFAULT_BOX_ANIMATE_DURATION;
-  const delay = useMediaQuery.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 [reactPage.useStyle({
-    "@media (prefers-reduced-motion: no-preference)": isEntered ? entered : exited
-  }), replayAnimation, setElement];
-}
-function useItemAnimation(responsiveDuration, responisveDelay, responsiveStagger, index) {
-  const duration = useMediaQuery.useMediaQuery(responsiveDuration) || next.DEFAULT_BOX_ANIMATE_DURATION;
-  const delay = useMediaQuery.useMediaQuery(responisveDelay) || next.DEFAULT_BOX_ANIMATE_DELAY;
-  const stagger = useMediaQuery.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 reactPage.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 {
-          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(reactPage.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: reactPage.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
-      }
-    }));
-  }
-  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.useResponsiveStyle([visibility], ([v]) => ({
-    display: v === true ? "block" : "none"
-  }));
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: reactPage.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);
-      }
-      if (bg.type === "image" && bg.payload) {
-        return /* @__PURE__ */ React.createElement(ImageBackground, __spreadProps(__spreadValues({}, bg.payload), {
-          key: bg.id
-        }));
-      }
-      if (bg.type === "gradient" && bg.payload) {
-        return /* @__PURE__ */ React.createElement(GradientBackground, __spreadProps(__spreadValues({}, bg.payload), {
-          key: bg.id,
-          gradient: getStopsStyle(bg.payload.stops)
-        }));
-      }
-      if (bg.type === "video" && bg.payload) {
-        return /* @__PURE__ */ React.createElement(VideoBackground, __spreadProps(__spreadValues({}, bg.payload), {
-          key: bg.id,
-          maskColor: getColor(bg.payload.maskColor)
-        }));
-      }
-      return null;
-    })
-  });
-}
-function ColorBackground({
-  color
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: reactPage.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,
-  priority
-}) {
-  const backgroundPosition = `${position.x}% ${position.y}%`;
-  const containerClassName = reactPage.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,
-          priority
-        }) : /* @__PURE__ */ jsxRuntime.jsx(NextImage__default["default"], {
-          src: publicUrl,
-          alt: "",
-          fill: true,
-          sizes: "100vw",
-          style: {
-            objectPosition: backgroundPosition,
-            objectFit: size
-          },
-          priority
-        })
-      }))
-    });
-  }
-  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: reactPage.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: reactPage.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"
-  ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", __spreadProps(__spreadValues({}, restOfProps), {
-    ref,
-    className: css.cx(reactPage.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.BackgroundsContainer = BackgroundsContainer;
-exports.GridItem = GridItem;
-exports.areBoxAnimationPropsEqual = areBoxAnimationPropsEqual;
-exports.useBackgrounds = useBackgrounds;
-exports.useBoxAnimation = useBoxAnimation;
-//# sourceMappingURL=index.cjs2.js.map