@makeswift/runtime 0.5.0 → 0.5.2

package/dist/grid-item.cjs.js

@@ -1,603 +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 css = require("@emotion/css");
-var framerMotion = require("framer-motion");
-var React = require("react");
-var next = require("./index.cjs.js");
-var reactPage = require("./react-page.cjs.js");
-require("./slot.cjs.js");
-require("use-sync-external-store/shim");
-var NextImage = require("next/image");
-var jsxRuntime = require("react/jsx-runtime");
-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 && 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 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(_a) {
-  var _b = _a, {
-    strength,
-    children
-  } = _b, rest = __objRest(_b, [
-    "strength",
-    "children"
-  ]);
-  const container = React.useRef(null);
-  const [containerScrollTop, setContainerScrollTop] = React.useState(strength == null ? 0 : strength);
-  const lastScrollParentScrollTop = React.useRef(0);
-  next.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((_a2) => {
-    var _b2 = _a2, {
-      style
-    } = _b2, restOfChildrenProps = __objRest(_b2, [
-      "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(_c, ref) {
-  var _d = _c, {
-    className
-  } = _d, restOfProps = __objRest(_d, [
-    "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);
-  next.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.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);
-      }
-      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: 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(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(_e, ref) {
-  var _f = _e, {
-    hasAnimations = false,
-    backgrounds,
-    children,
-    className
-  } = _f, restOfProps = __objRest(_f, [
-    "hasAnimations",
-    "backgrounds",
-    "children",
-    "className"
-  ]);
-  const [handle, setHandle] = React.useState(null);
-  const Component = hasAnimations ? framerMotion.motion.div : "div";
-  React.useImperativeHandle(ref, () => handle, [handle]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Component, __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)]
-  }));
-});
-function GridItem(_g) {
-  var _h = _g, {
-    as,
-    grid,
-    index,
-    columnGap,
-    rowGap,
-    className
-  } = _h, restOfProps = __objRest(_h, [
-    "as",
-    "grid",
-    "index",
-    "columnGap",
-    "rowGap",
-    "className"
-  ]);
-  const gridItemClassName = next.useStyle(next.responsiveGridItem({
-    grid,
-    index,
-    columnGap,
-    rowGap
-  }));
-  const Component = as != null ? as : "div";
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(gridItemClassName, className)
-  }));
-}
-exports.BackgroundsContainer = BackgroundsContainer;
-exports.GridItem = GridItem;
-exports.useBackgrounds = useBackgrounds;
-//# sourceMappingURL=grid-item.cjs.js.map