@makeswift/runtime 0.13.0 → 0.14.0

package/dist/cjs/components/shared/BackgroundsContainer/components/BackgroundVideo/index.js

@@ -0,0 +1,148 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var BackgroundVideo_exports = {};
+__export(BackgroundVideo_exports, {
+  default: () => BackgroundVideo
+});
+module.exports = __toCommonJS(BackgroundVideo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_css = require("@emotion/css");
+var import_react = require("react");
+var import_react_player = __toESM(require("react-player"));
+var import_use_style = require("../../../../../runtimes/react/use-style");
+var import_useIsomorphicLayoutEffect = require("../../../../hooks/useIsomorphicLayoutEffect");
+const Container = (0, import_react.forwardRef)(function Container2({ className, ...restOfProps }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...restOfProps,
+      ref,
+      className: (0, import_css.cx)(
+        (0, import_use_style.useStyle)({
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          pointerEvents: "none",
+          overflow: "hidden"
+        }),
+        className
+      )
+    }
+  );
+});
+function Mask({
+  backgroundColor,
+  visible
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_use_style.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
+}) {
+  const [ready, setReady] = (0, import_react.useState)(false);
+  const [scale, setScale] = (0, import_react.useState)(1);
+  const container = (0, import_react.useRef)(null);
+  (0, import_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 (!import_react_player.default.canPlay(url))
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, { ref: container, children: [
+    container.current && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_player.default,
+      {
+        url,
+        config: {
+          vimeo: { playerOptions: { background: true } },
+          youtube: {
+            playerVars: {
+              origin: container.current.ownerDocument.defaultView?.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__ */ (0, import_jsx_runtime.jsx)(Mask, { backgroundColor: maskColor, visible: !ready })
+  ] });
+}
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/shared/BackgroundsContainer/components/BackgroundVideo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/BackgroundVideo/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { useState, useRef, ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react'\nimport ReactPlayer from 'react-player'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\n\nconst Container = forwardRef(function Container(\n  { className, ...restOfProps }: ComponentPropsWithoutRef<'div'>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          pointerEvents: 'none',\n          overflow: 'hidden',\n        }),\n        className,\n      )}\n    />\n  )\n})\n\nfunction Mask({\n  backgroundColor,\n  visible,\n}: {\n  backgroundColor: string | undefined\n  visible: boolean\n}) {\n  return (\n    <div\n      className={useStyle({\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        background: backgroundColor,\n        opacity: visible ? 1 : 0,\n        transition: 'opacity 1s',\n      })}\n    />\n  )\n}\n\nconst getScale = (element: HTMLElement, aspectRatio: number, zoom: number) => {\n  const { offsetWidth: width, offsetHeight: height } = element\n  const computedAspectRatio = width / height\n\n  return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom\n}\n\ntype Props = {\n  url?: string\n  aspectRatio?: number\n  zoom?: number\n  opacity?: number\n  maskColor?: string\n}\n\nexport default function BackgroundVideo({\n  url = '',\n  aspectRatio = 16 / 9,\n  zoom = 1,\n  maskColor,\n  opacity,\n}: Props): JSX.Element {\n  const [ready, setReady] = useState(false)\n  const [scale, setScale] = useState(1)\n  const container = useRef<HTMLDivElement>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    const { current: containerEl } = container\n\n    if (!containerEl) return undefined\n\n    const { defaultView } = containerEl.ownerDocument\n    const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom))\n\n    handleResize()\n\n    defaultView!.addEventListener('resize', handleResize)\n\n    return () => defaultView!.removeEventListener('resize', handleResize)\n  }, [aspectRatio, zoom])\n\n  if (!ReactPlayer.canPlay(url)) return <></>\n\n  return (\n    <Container ref={container}>\n      {container.current && (\n        <ReactPlayer\n          url={url}\n          config={{\n            vimeo: { playerOptions: { background: true } },\n            youtube: {\n              playerVars: {\n                origin: container.current.ownerDocument.defaultView?.location.origin,\n              },\n            },\n            wistia: {\n              options: {\n                endVideoBehavior: 'loop',\n                playbackRateControl: false,\n                playbar: false,\n                playButton: false,\n                volumeControl: false,\n                fullscreenButton: false,\n                muted: true,\n              },\n            },\n          }}\n          playing\n          loop\n          muted\n          controls={false}\n          onReady={() => setReady(true)}\n          style={{\n            transform: `scale3d(${scale}, ${scale}, 1)`,\n            opacity,\n          }}\n          width=\"100%\"\n          height=\"100%\"\n        />\n      )}\n      <Mask backgroundColor={maskColor} visible={!ready} />\n    </Container>\n  )\n}\n"],"mappings":"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","names":["Container","ReactPlayer"]}

package/dist/cjs/components/shared/BackgroundsContainer/components/Backgrounds/index.js

@@ -0,0 +1,223 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Backgrounds_exports = {};
+__export(Backgrounds_exports, {
+  default: () => Backgrounds
+});
+module.exports = __toCommonJS(Backgrounds_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_image = __toESM(require("next/image"));
+var import_colorToString = require("../../../../utils/colorToString");
+var import_Parallax = __toESM(require("../Parallax"));
+var import_BackgroundVideo = __toESM(require("../BackgroundVideo"));
+var import_use_style = require("../../../../../runtimes/react/use-style");
+var import_responsive_style = require("../../../../utils/responsive-style");
+var import_next_version = require("../../../../../next/next-version");
+const NextLegacyImage = import_image.default;
+function getColor(color) {
+  if (color == null)
+    return "black";
+  if (color.swatch == null) {
+    return (0, import_colorToString.colorToString)({ ...color, swatch: { hue: 0, saturation: 0, lightness: 0 } });
+  }
+  return (0, import_colorToString.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 = {
+  ...absoluteFillStyle,
+  borderRadius: "inherit"
+};
+function Backgrounds({ backgrounds }) {
+  if (backgrounds == null)
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: backgrounds.map(({ value, deviceId }) => {
+    const visibility = backgrounds.map((v) => ({
+      deviceId: v.deviceId,
+      value: v.deviceId === deviceId
+    }));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BackgroundDeviceLayer, { layer: value, visibility }, deviceId);
+  }) });
+}
+function BackgroundDeviceLayer({ layer, visibility }) {
+  const visibilityStyle = (0, import_responsive_style.useResponsiveStyle)([visibility], ([v]) => ({
+    display: v === true ? "block" : "none"
+  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_use_style.useStyle)({ ...containerStyle, ...visibilityStyle, overflow: "hidden" }), children: [...layer].reverse().map((bg) => {
+    if (bg.type === "color") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorBackground, { color: getColor(bg.payload) }, bg.id);
+    }
+    if (bg.type === "image" && bg.payload) {
+      return /* @__PURE__ */ (0, import_react.createElement)(ImageBackground, { ...bg.payload, key: bg.id });
+    }
+    if (bg.type === "gradient" && bg.payload) {
+      return /* @__PURE__ */ (0, import_react.createElement)(
+        GradientBackground,
+        {
+          ...bg.payload,
+          key: bg.id,
+          gradient: getStopsStyle(bg.payload.stops)
+        }
+      );
+    }
+    if (bg.type === "video" && bg.payload) {
+      return /* @__PURE__ */ (0, import_react.createElement)(
+        VideoBackground,
+        {
+          ...bg.payload,
+          key: bg.id,
+          maskColor: getColor(bg.payload.maskColor)
+        }
+      );
+    }
+    return null;
+  }) });
+}
+function ColorBackground({ color }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_use_style.useStyle)({ ...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 = (0, import_use_style.useStyle)(containerStyle);
+  if (repeat === "no-repeat" && size !== "auto" && publicUrl != null) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Parallax.default, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...getParallaxProps({ style: { opacity, overflow: "hidden" } }), children: import_next_version.major < 13 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      NextLegacyImage,
+      {
+        src: publicUrl,
+        layout: "fill",
+        objectPosition: backgroundPosition,
+        objectFit: size,
+        priority
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_image.default,
+      {
+        src: publicUrl,
+        alt: "",
+        fill: true,
+        sizes: "100vw",
+        style: {
+          objectPosition: backgroundPosition,
+          objectFit: size
+        },
+        priority
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Parallax.default, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      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__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_use_style.useStyle)({
+        ...containerStyle,
+        background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
+      })
+    }
+  );
+}
+const BackgroundVideoAspectRatio = {
+  Wide: "wide",
+  Standard: "standard"
+};
+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__ */ (0, import_jsx_runtime.jsx)(import_Parallax.default, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...getParallaxProps({ className: (0, import_use_style.useStyle)(containerStyle) }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_BackgroundVideo.default,
+    {
+      url,
+      zoom,
+      opacity,
+      aspectRatio: getAspectRatio(aspectRatio),
+      maskColor
+    }
+  ) }) });
+}
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/shared/BackgroundsContainer/components/Backgrounds/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/Backgrounds/index.tsx"],"sourcesContent":["import NextImage from 'next/image'\nimport type NextLegacyImageType from 'next/legacy/image'\n\nimport { BackgroundsPropControllerData, BackgroundsData } from '../../../../hooks'\nimport { ResponsiveValue } from '../../../../../prop-controllers'\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport Parallax from '../Parallax'\nimport BackgroundVideo from '../BackgroundVideo'\nimport { CSSObject } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../utils/responsive-style'\nimport { major as nextMajorVersion } from '../../../../../next/next-version'\n\nconst NextLegacyImage = NextImage as typeof NextLegacyImageType\n\nfunction getColor(color: Color | null | undefined) {\n  if (color == null) return 'black'\n\n  if (color.swatch == null) {\n    return colorToString({ ...color, swatch: { hue: 0, saturation: 0, lightness: 0 } })\n  }\n\n  return colorToString(color)\n}\n\ntype GradientStop = { color: Color | null | undefined; location: number }\n\nconst getStopsStyle = (stops: GradientStop[]) =>\n  stops.map(({ color, location }) => `${getColor(color)} ${location}%`).join(',')\n\nconst absoluteFillStyle: CSSObject = {\n  position: 'absolute',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n}\n\nconst containerStyle: CSSObject = {\n  ...absoluteFillStyle,\n  borderRadius: 'inherit',\n}\n\ntype Props = { backgrounds: BackgroundsPropControllerData | null | undefined }\n\nexport default function Backgrounds({ backgrounds }: Props): JSX.Element {\n  if (backgrounds == null) return <></>\n\n  return (\n    <>\n      {backgrounds.map(({ value, deviceId }) => {\n        const visibility = backgrounds.map(v => ({\n          deviceId: v.deviceId,\n          value: v.deviceId === deviceId,\n        }))\n\n        return <BackgroundDeviceLayer key={deviceId} layer={value} visibility={visibility} />\n      })}\n    </>\n  )\n}\n\ntype BackgroundLayerProps = {\n  layer: BackgroundsData\n  visibility: ResponsiveValue<boolean>\n}\n\nfunction BackgroundDeviceLayer({ layer, visibility }: BackgroundLayerProps) {\n  const visibilityStyle = useResponsiveStyle([visibility], ([v]) => ({\n    display: v === true ? 'block' : 'none',\n  }))\n\n  return (\n    <div className={useStyle({ ...containerStyle, ...visibilityStyle, overflow: 'hidden' })}>\n      {[...layer].reverse().map(bg => {\n        if (bg.type === 'color') {\n          return <ColorBackground key={bg.id} color={getColor(bg.payload)} />\n        }\n\n        if (bg.type === 'image' && bg.payload) {\n          return <ImageBackground {...bg.payload} key={bg.id} />\n        }\n\n        if (bg.type === 'gradient' && bg.payload) {\n          return (\n            <GradientBackground\n              {...bg.payload}\n              key={bg.id}\n              gradient={getStopsStyle(bg.payload.stops)}\n            />\n          )\n        }\n\n        if (bg.type === 'video' && bg.payload) {\n          return (\n            <VideoBackground\n              {...bg.payload}\n              key={bg.id}\n              maskColor={getColor(bg.payload.maskColor)}\n            />\n          )\n        }\n\n        return null\n      })}\n    </div>\n  )\n}\n\ntype ColorBackgroundProps = { color: string }\n\nfunction ColorBackground({ color }: ColorBackgroundProps) {\n  return <div className={useStyle({ ...containerStyle, backgroundColor: color })} />\n}\n\nconst ImageBackgroundRepeat = {\n  NoRepeat: 'no-repeat',\n  RepeatX: 'repeat-x',\n  RepeatY: 'repeat-y',\n  Repeat: 'repeat',\n} as const\n\ntype ImageBackgroundRepeat = typeof ImageBackgroundRepeat[keyof typeof ImageBackgroundRepeat]\n\nconst ImageBackgroundSize = {\n  Cover: 'cover',\n  Contain: 'contain',\n  Auto: 'auto',\n} as const\n\ntype ImageBackgroundSize = typeof ImageBackgroundSize[keyof typeof ImageBackgroundSize]\n\ntype ImageBackgroundProps = {\n  publicUrl?: string\n  position: { x: number; y: number }\n  repeat?: ImageBackgroundRepeat\n  size?: ImageBackgroundSize\n  opacity?: number\n  parallax?: number\n  priority?: boolean\n}\n\nfunction ImageBackground({\n  publicUrl,\n  position,\n  repeat = ImageBackgroundRepeat.NoRepeat,\n  size = ImageBackgroundSize.Cover,\n  opacity,\n  parallax,\n  priority,\n}: ImageBackgroundProps) {\n  const backgroundPosition = `${position.x}% ${position.y}%`\n  const containerClassName = useStyle(containerStyle)\n\n  if (repeat === 'no-repeat' && size !== 'auto' && publicUrl != null) {\n    return (\n      <Parallax strength={parallax}>\n        {getParallaxProps => (\n          <div {...getParallaxProps({ style: { opacity, overflow: 'hidden' } })}>\n            {nextMajorVersion < 13 ? (\n              <NextLegacyImage\n                src={publicUrl}\n                layout=\"fill\"\n                objectPosition={backgroundPosition}\n                objectFit={size}\n                priority={priority}\n              />\n            ) : (\n              <NextImage\n                src={publicUrl}\n                alt={''}\n                fill\n                sizes=\"100vw\"\n                style={{\n                  objectPosition: backgroundPosition,\n                  objectFit: size,\n                }}\n                priority={priority}\n              />\n            )}\n          </div>\n        )}\n      </Parallax>\n    )\n  }\n\n  return (\n    <Parallax strength={parallax}>\n      {getParallaxProps => (\n        <div\n          className={containerClassName}\n          {...getParallaxProps({\n            style: {\n              backgroundImage: publicUrl != null ? `url('${publicUrl}')` : undefined,\n              backgroundPosition,\n              backgroundRepeat: repeat,\n              backgroundSize: size,\n              opacity,\n            },\n          })}\n        />\n      )}\n    </Parallax>\n  )\n}\n\ntype GradientBackgroundProps = {\n  gradient: string\n  angle?: number\n  isRadial?: boolean\n}\n\nfunction GradientBackground({\n  gradient,\n  isRadial = false,\n  angle = Math.PI,\n}: GradientBackgroundProps) {\n  return (\n    <div\n      className={useStyle({\n        ...containerStyle,\n        background: isRadial\n          ? `radial-gradient(${gradient})`\n          : `linear-gradient(${angle}rad, ${gradient})`,\n      })}\n    />\n  )\n}\n\nconst BackgroundVideoAspectRatio = {\n  Wide: 'wide',\n  Standard: 'standard',\n} as const\n\ntype BackgroundVideoAspectRatio =\n  typeof BackgroundVideoAspectRatio[keyof typeof BackgroundVideoAspectRatio]\n\nfunction getAspectRatio(aspectRatio: BackgroundVideoAspectRatio | null | undefined): number {\n  switch (aspectRatio) {\n    case 'wide':\n      return 16 / 9\n\n    case 'standard':\n      return 4 / 3\n\n    default:\n      return 16 / 9\n  }\n}\n\ntype VideoBackgroundProps = {\n  url?: string\n  aspectRatio?: BackgroundVideoAspectRatio\n  maskColor: string\n  zoom?: number\n  opacity?: number\n  parallax?: number\n}\n\nfunction VideoBackground({\n  url,\n  aspectRatio,\n  maskColor,\n  zoom,\n  opacity,\n  parallax,\n}: VideoBackgroundProps) {\n  return (\n    <Parallax strength={parallax}>\n      {getParallaxProps => (\n        <div {...getParallaxProps({ className: useStyle(containerStyle) })}>\n          <BackgroundVideo\n            url={url}\n            zoom={zoom}\n            opacity={opacity}\n            aspectRatio={getAspectRatio(aspectRatio)}\n            maskColor={maskColor}\n          />\n        </div>\n      )}\n    </Parallax>\n  )\n}\n"],"mappings":"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","names":["NextImage","Parallax","nextMajorVersion","BackgroundVideo"]}

package/dist/cjs/components/shared/BackgroundsContainer/components/Parallax/index.js

@@ -0,0 +1,114 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Parallax_exports = {};
+__export(Parallax_exports, {
+  default: () => Parallax
+});
+module.exports = __toCommonJS(Parallax_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_clamp = __toESM(require("../../../../../utils/clamp"));
+var import_useIsomorphicLayoutEffect = require("../../../../hooks/useIsomorphicLayoutEffect");
+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({ strength, children, ...rest }) {
+  const container = (0, import_react.useRef)(null);
+  const [containerScrollTop, setContainerScrollTop] = (0, import_react.useState)(strength == null ? 0 : strength);
+  const lastScrollParentScrollTop = (0, import_react.useRef)(0);
+  (0, import_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 (0, import_clamp.default)(0, scrollTop + containerScrollDelta, strength * 2);
+        });
+      });
+    }
+    eventTarget.addEventListener("scroll", handleScroll);
+    return () => eventTarget.removeEventListener("scroll", handleScroll);
+  }, [strength]);
+  const getProps = (0, import_react.useCallback)(
+    ({ style, ...restOfChildrenProps }) => ({
+      ...restOfChildrenProps,
+      style: {
+        ...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__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...rest,
+      ref: container,
+      style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 },
+      children: children(getProps)
+    }
+  );
+}
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/shared/BackgroundsContainer/components/Parallax/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/Parallax/index.tsx"],"sourcesContent":["import { useState, useRef, useCallback, ReactNode, CSSProperties } from 'react'\nimport clamp from '../../../../../utils/clamp'\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\n\nfunction isScrollable(element: HTMLElement) {\n  const { overflow, overflowY, overflowX } =\n    element.ownerDocument.defaultView!.getComputedStyle(element)\n\n  return /(auto|scroll)/.test(overflow + overflowX + overflowY)\n}\n\nfunction getScrollParent(element: HTMLElement): HTMLElement {\n  const { parentElement } = element\n\n  if (!element || !parentElement) return element\n\n  if (isScrollable(element)) return element\n\n  return getScrollParent(parentElement)\n}\n\ntype Props = {\n  strength: number | null | undefined\n  children: (\n    getParallaxProps: <P extends { style?: CSSProperties; [key: string]: unknown }>(props: P) => P,\n  ) => ReactNode\n}\n\nexport default function Parallax({ strength, children, ...rest }: Props): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const [containerScrollTop, setContainerScrollTop] = useState(strength == null ? 0 : strength)\n  const lastScrollParentScrollTop = useRef(0)\n\n  useIsomorphicLayoutEffect(() => {\n    if (!container.current || strength == null || strength === 0) return undefined\n\n    const containerDocument = container.current.ownerDocument\n    const scrollParent = getScrollParent(container.current)\n    const eventTarget =\n      containerDocument.documentElement === scrollParent\n        ? containerDocument.defaultView!\n        : scrollParent\n\n    lastScrollParentScrollTop.current = scrollParent.scrollTop\n    setContainerScrollTop(strength)\n\n    function handleScroll() {\n      containerDocument.defaultView!.requestAnimationFrame(() => {\n        if (!container.current) return\n\n        const { top: containerTop, bottom: containerBottom } =\n          container.current.getBoundingClientRect()\n        const { top: scrollParentTop, bottom: scrollParentBottom } =\n          scrollParent === containerDocument.documentElement\n            ? { top: 0, bottom: containerDocument.defaultView!.innerHeight }\n            : scrollParent.getBoundingClientRect()\n        const { scrollTop: scrollParentScrollTop } =\n          scrollParent === containerDocument.documentElement\n            ? { scrollTop: containerDocument.defaultView!.pageYOffset }\n            : scrollParent\n        const scrollParentHeight = scrollParentBottom - scrollParentTop\n        const scrollParentScrollDelta = scrollParentScrollTop - lastScrollParentScrollTop.current\n\n        lastScrollParentScrollTop.current = scrollParentScrollTop\n\n        setContainerScrollTop(scrollTop => {\n          const isContainerVisible =\n            containerTop < scrollParentTop + scrollParentHeight && containerBottom > scrollParentTop\n          const containerScrollRemaining =\n            scrollParentScrollDelta > 0 ? 2 * strength! - scrollTop : scrollTop\n          const scrollParentScrollRemaining =\n            scrollParentScrollDelta > 0\n              ? scrollParentTop + containerBottom\n              : scrollParentHeight - containerTop\n          const parallaxRatio = containerScrollRemaining / scrollParentScrollRemaining\n          const containerScrollDelta = isContainerVisible\n            ? parallaxRatio * scrollParentScrollDelta\n            : 0\n\n          return clamp(0, scrollTop + containerScrollDelta, strength! * 2)\n        })\n      })\n    }\n\n    eventTarget.addEventListener('scroll', handleScroll)\n\n    return () => eventTarget.removeEventListener('scroll', handleScroll)\n  }, [strength])\n\n  const getProps = useCallback(\n    ({ style, ...restOfChildrenProps }: any) => ({\n      ...restOfChildrenProps,\n      style: {\n        ...style,\n        position: 'absolute',\n        left: 0,\n        right: 0,\n        top: 0,\n        bottom: 0,\n        ...(strength == null || strength === 0\n          ? {}\n          : {\n              top: -strength,\n              bottom: -strength,\n              transform: `translate3d(0, ${containerScrollTop - strength}px, 0)`,\n            }),\n      },\n    }),\n    [strength, containerScrollTop],\n  )\n\n  return (\n    <div\n      {...rest}\n      ref={container}\n      style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}\n    >\n      {children(getProps)}\n    </div>\n  )\n}\n"],"mappings":"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","names":["clamp"]}

package/dist/cjs/components/shared/BackgroundsContainer/index.js

@@ -0,0 +1,68 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var BackgroundsContainer_exports = {};
+__export(BackgroundsContainer_exports, {
+  default: () => BackgroundsContainer_default
+});
+module.exports = __toCommonJS(BackgroundsContainer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_css = require("@emotion/css");
+var import_react = require("react");
+var import_use_style = require("../../../runtimes/react/use-style");
+var import_hooks = require("../../hooks");
+var import_Backgrounds = __toESM(require("./components/Backgrounds"));
+var BackgroundsContainer_default = (0, import_react.forwardRef)(function BackgroundsContainer({ backgrounds, children, className, ...restOfProps }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...restOfProps,
+      ref,
+      className: (0, import_css.cx)(
+        (0, import_use_style.useStyle)({
+          position: "relative",
+          width: "100%",
+          margin: "0 auto",
+          "> *": {
+            borderRadius: "inherit",
+            height: "inherit"
+          },
+          "> :last-child": {
+            position: "relative"
+          }
+        }),
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Backgrounds.default, { backgrounds: (0, import_hooks.useBackgrounds)(backgrounds) }),
+        import_react.Children.only(children)
+      ]
+    }
+  );
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/shared/BackgroundsContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/shared/BackgroundsContainer/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport {\n  Children,\n  ComponentPropsWithoutRef,\n  ElementType,\n  forwardRef,\n  ReactElement,\n  Ref,\n} from 'react'\nimport { BackgroundsValue as BackgroundsPropControllerValue } from '../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useBackgrounds } from '../../hooks'\nimport Backgrounds from './components/Backgrounds'\n\ntype BaseProps = {\n  backgrounds: BackgroundsPropControllerValue | null | undefined\n  children: ReactElement<ElementType>\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nexport default forwardRef<HTMLDivElement | null, Props>(function BackgroundsContainer(\n  { backgrounds, children, className, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          width: '100%',\n          margin: '0 auto',\n          '> *': {\n            borderRadius: 'inherit',\n            height: 'inherit',\n          },\n          '> :last-child': {\n            position: 'relative',\n          },\n        }),\n        className,\n      )}\n    >\n      <Backgrounds backgrounds={useBackgrounds(backgrounds)} />\n      {Children.only(children)}\n    </div>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BI;AA1BJ,iBAAmB;AACnB,mBAOO;AAEP,uBAAyB;AACzB,mBAA+B;AAC/B,yBAAwB;AASxB,IAAO,mCAAQ,yBAAyC,SAAS,qBAC/D,EAAE,aAAa,UAAU,WAAW,GAAG,YAAY,GACnD,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,eAAW;AAAA,YACT,2BAAS;AAAA,UACP,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,OAAO;AAAA,YACL,cAAc;AAAA,YACd,QAAQ;AAAA,UACV;AAAA,UACA,iBAAiB;AAAA,YACf,UAAU;AAAA,UACZ;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEA;AAAA,oDAAC,mBAAAA,SAAA,EAAY,iBAAa,6BAAe,WAAW,GAAG;AAAA,QACtD,sBAAS,KAAK,QAAQ;AAAA;AAAA;AAAA,EACzB;AAEJ,CAAC;","names":["Backgrounds"]}