@makeswift/runtime 0.1.5 → 0.1.8

package/dist/Box2.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Box2.cjs.js","sources":["../src/components/builtin/Box/Box2.tsx"],"sourcesContent":["import { GridValue } from '../../../prop-controllers/descriptors'\nimport { Element } from '../../../runtimes/react'\n\ntype Props = {\n  children?: GridValue\n}\n\nexport default function Box2({ children }: Props) {\n  return (\n    <div\n      style={{\n        display: 'flex',\n        minHeight: 100,\n        maxWidth: '100%',\n        width: '100%',\n        border: '1px solid black',\n      }}\n    >\n      {children?.elements.map(element => (\n        <div style={{ flex: 1 }}>\n          <Element element={element} />\n          {/* @ts-ignore */}\n          {/* <Box2 {...element.props} /> */}\n        </div>\n      ))}\n    </div>\n  )\n}\n"],"names":["children","display","minHeight","maxWidth","width","border","elements","map","element","flex","Element"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAO6B,cAAA;AAAA,EAAEA;AAAAA,GAAmB;AAE9C,wCAAA,OAAA;AAAA,IACE,OAAO;AAAA,MACLC,SAAS;AAAA,MACTC,WAAW;AAAA,MACXC,UAAU;AAAA,MACVC,OAAO;AAAA,MACPC,QAAQ;AAAA,IANZ;AAAA,IAAA,UASGL,qCAAUM,SAASC,IAAIC,CAAAA,2CACtB,OAAA;AAAA,MAAK,OAAO;AAAA,QAAEC,MAAM;AAAA,MAApB;AAAA,MAAA,yCACGC,cAAD;AAAA,QAAS;AAAA,MAAA,CAAT;AAAA,IAAA,CAFH;AAAA,EAAA,CAVL;AAmBD;;"}

package/dist/Box2.es.js

@@ -1,52 +0,0 @@
-import { E as Element } from "./index.es.js";
-import { jsx } from "react/jsx-runtime";
-import "react";
-import "use-sync-external-store/shim/with-selector";
-import "./react-page.es.js";
-import "redux";
-import "redux-thunk";
-import "./actions.es.js";
-import "./descriptors.es.js";
-import "./style.es.js";
-import "./color.es.js";
-import "./image.es.js";
-import "next/dynamic";
-import "next/document";
-import "styled-components";
-import "slate";
-import "@emotion/server/create-instance";
-import "@emotion/css";
-import "@apollo/client";
-import "@apollo/client/link/batch-http";
-import "./graphql.es.js";
-import "./text-input.es.js";
-import "./shape.es.js";
-import "color";
-import "react-dom";
-import "html-react-parser";
-import "next/head";
-import "uuid/v4";
-import "corporate-ipsum";
-function Box2({
-  children
-}) {
-  return /* @__PURE__ */ jsx("div", {
-    style: {
-      display: "flex",
-      minHeight: 100,
-      maxWidth: "100%",
-      width: "100%",
-      border: "1px solid black"
-    },
-    children: children == null ? void 0 : children.elements.map((element) => /* @__PURE__ */ jsx("div", {
-      style: {
-        flex: 1
-      },
-      children: /* @__PURE__ */ jsx(Element, {
-        element
-      })
-    }))
-  });
-}
-export { Box2 as default };
-//# sourceMappingURL=Box2.es.js.map

package/dist/Box2.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Box2.es.js","sources":["../src/components/builtin/Box/Box2.tsx"],"sourcesContent":["import { GridValue } from '../../../prop-controllers/descriptors'\nimport { Element } from '../../../runtimes/react'\n\ntype Props = {\n  children?: GridValue\n}\n\nexport default function Box2({ children }: Props) {\n  return (\n    <div\n      style={{\n        display: 'flex',\n        minHeight: 100,\n        maxWidth: '100%',\n        width: '100%',\n        border: '1px solid black',\n      }}\n    >\n      {children?.elements.map(element => (\n        <div style={{ flex: 1 }}>\n          <Element element={element} />\n          {/* @ts-ignore */}\n          {/* <Box2 {...element.props} /> */}\n        </div>\n      ))}\n    </div>\n  )\n}\n"],"names":["children","display","minHeight","maxWidth","width","border","elements","map","element","flex"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAO6B,cAAA;AAAA,EAAEA;AAAAA,GAAmB;AAE9C,6BAAA,OAAA;AAAA,IACE,OAAO;AAAA,MACLC,SAAS;AAAA,MACTC,WAAW;AAAA,MACXC,UAAU;AAAA,MACVC,OAAO;AAAA,MACPC,QAAQ;AAAA,IANZ;AAAA,IAAA,UASGL,qCAAUM,SAASC,IAAIC,CAAAA,gCACtB,OAAA;AAAA,MAAK,OAAO;AAAA,QAAEC,MAAM;AAAA,MAApB;AAAA,MAAA,8BACG,SAAD;AAAA,QAAS;AAAA,MAAA,CAAT;AAAA,IAAA,CAFH;AAAA,EAAA,CAVL;AAmBD;;"}

package/dist/grid-item.cjs.js

@@ -1,594 +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 NextImage = require("next/image");
-var jsxRuntime = require("react/jsx-runtime");
-var ReactPlayer = require("react-player");
-var styled = require("styled-components");
-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);
-var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
-function useBackgrounds(value) {
-  const fileIds = value == null ? [] : value.map(({ value: backgrounds }) => backgrounds.map((background) => background.type === "image" && background.payload != null ? background.payload.imageId : null).filter(next.isNonNullable).reduce((a, b) => a.concat(b), [])).reduce((a, b) => a.concat(b), []);
-  const swatchIds = value == null ? [] : value.map(({ value: backgrounds }) => backgrounds.map((background) => {
-    if (background.type === "color" && background.payload != null) {
-      return [background.payload.swatchId];
-    }
-    if (background.type === "gradient" && background.payload != null) {
-      return background.payload.stops.map((stop) => stop.color && stop.color.swatchId).filter(next.isNonNullable);
-    }
-    if (background.type === "video" && background.payload != null) {
-      return [background.payload.maskColor && background.payload.maskColor.swatchId];
-    }
-    return null;
-  }).filter(next.isNonNullable).reduce((a, b) => a.concat(b), [])).reduce((a, b) => a.concat(b), []).filter(next.isNonNullable);
-  const skip = value == null;
-  const filesResult = next.useQuery(next.FILES_BY_ID, {
-    skip: skip || fileIds.length === 0,
-    variables: { ids: fileIds }
-  });
-  const swatchesResult = next.useQuery(next.SWATCHES_BY_ID, {
-    skip: skip || swatchIds.length === 0,
-    variables: { ids: swatchIds }
-  });
-  return React.useMemo(() => {
-    const { data: filesData = {} } = filesResult;
-    const { data: swatchesData = {} } = swatchesResult;
-    if (value == null || filesResult.error != null || swatchesResult.error != null) {
-      return null;
-    }
-    const { files = [] } = filesData;
-    const { swatches = [] } = swatchesData;
-    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.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.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(Boolean)
-      });
-    });
-  }, [filesResult, swatchesResult, 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 = styled__default["default"].div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  overflow: hidden;
-`;
-const Mask = styled__default["default"].div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: ${(props) => props.backgroundColor};
-  opacity: ${(props) => props.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
-    })]
-  });
-}
-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: /* @__PURE__ */ jsxRuntime.jsx(NextImage__default["default"], {
-          src: publicUrl,
-          layout: "fill",
-          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,
-  angle
-}) {
-  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(_c, ref) {
-  var _d = _c, {
-    backgrounds,
-    children,
-    className
-  } = _d, restOfProps = __objRest(_d, [
-    "backgrounds",
-    "children",
-    "className"
-  ]);
-  const [handle, setHandle] = React.useState(null);
-  React.useImperativeHandle(ref, () => handle, [handle]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.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)]
-  }));
-});
-function GridItem(_e) {
-  var _f = _e, {
-    as,
-    grid,
-    index,
-    columnGap,
-    rowGap,
-    className
-  } = _f, restOfProps = __objRest(_f, [
-    "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