@makeswift/runtime 0.13.1 → 0.14.1

package/dist/esm/components/page/Page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/page/Page.tsx"],"sourcesContent":["'use client'\n\nimport { ReactElement, Children, createElement, useMemo, useEffect, useRef, useState } from 'react'\nimport { useSyncExternalStore } from 'use-sync-external-store/shim'\nimport parse from 'html-react-parser'\nimport Head from 'next/head'\n\nimport { BodySnippet } from './BodySnippet'\nimport { DocumentReference } from '../../runtimes/react'\nimport { createDocumentReference } from '../../state/react-page'\nimport { useMakeswiftClient } from '../../api/react'\nimport { useIsInBuilder } from '../../react'\nimport deepEqual from '../../utils/deepEqual'\nimport { MakeswiftPageDocument } from '../../next'\nimport { Page as PageType, Site } from '../../api'\n\nconst SnippetLocation = {\n  Body: 'BODY',\n  Head: 'HEAD',\n} as const\n\ntype SnippetLocation = typeof SnippetLocation[keyof typeof SnippetLocation]\n\ntype Snippet = {\n  builderEnabled: boolean\n  cleanup: string | null\n  code: string\n  id: string\n  liveEnabled: boolean\n  location: SnippetLocation\n}\n\nconst defaultFavicon = {\n  mimetype: 'image/png',\n  publicUrl:\n    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC',\n}\n\n// Taken from https://github.com/facebook/react/blob/14bac6193a334eda42e727336e8967419f08f5df/packages/react-dom/src/server/ReactPartialRenderer.js#L208\nconst VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_.\\-\\d]*$/\n\nconst VALID_HEAD_ELEMENT_TYPES = [\n  'title',\n  'base',\n  'link',\n  'style',\n  'meta',\n  'script',\n  'noscript',\n  'template',\n]\n\nfunction snippetToElement(snippet: Pick<Snippet, 'id' | 'code'>): (string | ReactElement)[] {\n  return Children.map(parse(snippet.code), element => {\n    if (typeof element === 'string') return element\n\n    if (!VALID_TAG_REGEX.test(element.type)) return null\n\n    const key = element.key ? `${snippet.id}:${element.key}` : snippet.id\n\n    return createElement(element.type, { ...element.props, key })\n  })\n}\n\nconst filterUsedSnippetProperties = ({\n  code,\n  builderEnabled,\n  liveEnabled,\n  location,\n  cleanup,\n}: Snippet) => ({\n  code,\n  builderEnabled,\n  liveEnabled,\n  location,\n  cleanup,\n})\n\ntype Props = {\n  document: MakeswiftPageDocument\n}\n\nexport function Page({ document: page }: Props): JSX.Element {\n  const isInBuilder = useIsInBuilder()\n  const [snippets, setSnippets] = useState(page.snippets)\n  // We're using cached results here for page snippets and site fonts so that anytime the user\n  // changes the snippets or fonts on the builder, the change would be reflected here.\n  // See this PR for discussions and things we can do to improve it in the future:\n  // https://github.com/makeswift/makeswift/pull/77\n  const cachedPage = useCachedPage(isInBuilder ? page.id : null)\n  useEffect(() => {\n    if (cachedPage == null) return\n\n    const oldSnippets = snippets.map(filterUsedSnippetProperties)\n    const newSnippets = cachedPage.snippets.map(filterUsedSnippetProperties)\n\n    if (deepEqual(newSnippets, oldSnippets)) return\n\n    setSnippets(cachedPage.snippets)\n  }, [cachedPage])\n  const site = useCachedSite(isInBuilder ? page.site.id : null)\n\n  const baseLocalizedPage = page.localizedPages.find(({ parentId }) => parentId == null)\n  const favicon = page.meta.favicon ?? defaultFavicon\n  const title = baseLocalizedPage?.meta.title ?? page.meta.title\n  const description = baseLocalizedPage?.meta.description ?? page.meta.description\n  const keywords = baseLocalizedPage?.meta.keywords ?? page.meta.keywords\n  const socialImage = baseLocalizedPage?.meta.socialImage ?? page.meta.socialImage\n  const canonicalUrl = baseLocalizedPage?.seo.canonicalUrl ?? page.seo.canonicalUrl\n  const isIndexingBlocked = baseLocalizedPage?.seo.isIndexingBlocked ?? page.seo.isIndexingBlocked\n\n  const fontFamilyParamValue = useMemo(() => {\n    if (site == null) {\n      return page.fonts\n        .map(({ family, variants }) => {\n          return `${family.replace(/ /g, '+')}:${variants.join()}`\n        })\n        .join('|')\n    }\n\n    return site.googleFonts.edges\n      .filter((edge): edge is NonNullable<typeof edge> => edge != null)\n      .map(({ activeVariants, node: { family, variants } }) => {\n        const activeVariantSpecifiers = variants\n          .filter(variant =>\n            activeVariants.some(activeVariant => activeVariant.specifier === variant.specifier),\n          )\n          .map(variant => variant.specifier)\n          .join()\n\n        return `${family.replace(/ /g, '+')}:${activeVariantSpecifiers}`\n      })\n      .join('|')\n  }, [site, page])\n\n  const filteredSnippets = useMemo(\n    () => snippets.filter(snippet => (isInBuilder ? snippet.builderEnabled : snippet.liveEnabled)),\n    [snippets, isInBuilder],\n  )\n  const headSnippets = useMemo(\n    () => filteredSnippets.filter(snippet => snippet.location === SnippetLocation.Head),\n    [filteredSnippets],\n  )\n\n  const previousHeadSnippets = useRef<MakeswiftPageDocument['snippets'] | null>(null)\n  useEffect(() => {\n    const headSnippetsToCleanUp = (previousHeadSnippets.current ?? [])\n      .filter(previousSnippet => previousSnippet.cleanup != null)\n      .filter(previousSnippet => !headSnippets.some(snippet => previousSnippet.id === snippet.id))\n\n    headSnippetsToCleanUp.forEach(snippetToCleanUp => {\n      if (snippetToCleanUp.cleanup == null) return\n\n      const cleanUp = new Function(snippetToCleanUp.cleanup)\n\n      try {\n        cleanUp()\n      } catch {\n        // Ignore errors from user input.\n      }\n    })\n\n    previousHeadSnippets.current = headSnippets\n  }, [headSnippets])\n\n  const documentId = baseLocalizedPage?.elementTreeId ?? page.id\n\n  return (\n    <>\n      <Head>\n        <style>\n          {`\n            html {\n              font-family: sans-serif;\n            }\n            div#__next {\n              overflow: hidden;\n            }\n          `}\n        </style>\n\n        <link rel=\"icon\" type={favicon.mimetype} href={favicon.publicUrl} />\n\n        {canonicalUrl && <link rel=\"canonical\" href={canonicalUrl} />}\n\n        {isIndexingBlocked && <meta name=\"robots\" content=\"noindex\" />}\n\n        {title && (\n          <>\n            <title>{title}</title>\n            <meta property=\"og:title\" content={title} />\n            <meta name=\"twitter:title\" content={title} />\n            <meta itemProp=\"name\" content={title} />\n          </>\n        )}\n\n        {description && (\n          <>\n            <meta name=\"description\" content={description} />\n            <meta property=\"og:description\" content={description} />\n            <meta name=\"twitter:description\" content={description} />\n            <meta itemProp=\"description\" content={description} />\n          </>\n        )}\n\n        {keywords && <meta name=\"keywords\" content={keywords} />}\n\n        {socialImage && (\n          <>\n            <meta property=\"og:image\" content={socialImage.publicUrl} />\n            <meta property=\"og:image:type\" content={socialImage.mimetype} />\n            <meta name=\"twitter:image\" content={socialImage.publicUrl} />\n            <meta name=\"twitter:card\" content=\"summary_large_image\" />\n            <meta itemProp=\"image\" content={socialImage.publicUrl} />\n          </>\n        )}\n\n        {fontFamilyParamValue !== '' && (\n          <>\n            <link\n              rel=\"stylesheet\"\n              href={`https://fonts.googleapis.com/css?family=${fontFamilyParamValue}&display=swap`}\n            />\n          </>\n        )}\n\n        {headSnippets.map(snippetToElement).map(children =>\n          Children.map(children, child => {\n            if (typeof child === 'string') return child\n\n            if (VALID_HEAD_ELEMENT_TYPES.includes(child.type as string)) return child\n\n            return null\n          }),\n        )}\n      </Head>\n\n      <DocumentReference documentReference={createDocumentReference(documentId)} />\n\n      {filteredSnippets\n        .filter(snippet => snippet.location === SnippetLocation.Body)\n        .map(snippet => (\n          <BodySnippet key={snippet.id} code={snippet.code} cleanup={snippet.cleanup} />\n        ))}\n    </>\n  )\n}\n\nfunction useCachedPage(pageId: string | null): PageType | null {\n  const client = useMakeswiftClient()\n  const getSnapshot = () => (pageId == null ? null : client.readPage(pageId))\n\n  const page = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot)\n\n  return page\n}\n\nfunction useCachedSite(siteId: string | null): Site | null {\n  const client = useMakeswiftClient()\n  const getSnapshot = () => (siteId == null ? null : client.readSite(siteId))\n\n  const site = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot)\n\n  return site\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components/page/index.js

@@ -0,0 +1,2 @@
+export * from "./Page";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/page/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/page/index.ts"],"sourcesContent":["export * from './Page'\n"],"mappings":"AAAA,cAAc;","names":[]}

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

@@ -0,0 +1,118 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+import { useState, useRef, forwardRef } from "react";
+import ReactPlayer from "react-player";
+import { useStyle } from "../../../../../runtimes/react/use-style";
+import { useIsomorphicLayoutEffect } from "../../../../hooks/useIsomorphicLayoutEffect";
+const Container = forwardRef(function Container2({ className, ...restOfProps }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restOfProps,
+      ref,
+      className: cx(
+        useStyle({
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          pointerEvents: "none",
+          overflow: "hidden"
+        }),
+        className
+      )
+    }
+  );
+});
+function Mask({
+  backgroundColor,
+  visible
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: useStyle({
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: backgroundColor,
+        opacity: visible ? 1 : 0,
+        transition: "opacity 1s"
+      })
+    }
+  );
+}
+const getScale = (element, aspectRatio, zoom) => {
+  const { offsetWidth: width, offsetHeight: height } = element;
+  const computedAspectRatio = width / height;
+  return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom;
+};
+function BackgroundVideo({
+  url = "",
+  aspectRatio = 16 / 9,
+  zoom = 1,
+  maskColor,
+  opacity
+}) {
+  const [ready, setReady] = useState(false);
+  const [scale, setScale] = useState(1);
+  const container = useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    const { current: containerEl } = container;
+    if (!containerEl)
+      return void 0;
+    const { defaultView } = containerEl.ownerDocument;
+    const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom));
+    handleResize();
+    defaultView.addEventListener("resize", handleResize);
+    return () => defaultView.removeEventListener("resize", handleResize);
+  }, [aspectRatio, zoom]);
+  if (!ReactPlayer.canPlay(url))
+    return /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsxs(Container, { ref: container, children: [
+    container.current && /* @__PURE__ */ jsx(
+      ReactPlayer,
+      {
+        url,
+        config: {
+          vimeo: { playerOptions: { background: true } },
+          youtube: {
+            playerVars: {
+              origin: 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__ */ jsx(Mask, { backgroundColor: maskColor, visible: !ready })
+  ] });
+}
+export {
+  BackgroundVideo as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/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"]}

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

@@ -0,0 +1,193 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import NextImage from "next/image";
+import { colorToString } from "../../../../utils/colorToString";
+import Parallax from "../Parallax";
+import BackgroundVideo from "../BackgroundVideo";
+import { useStyle } from "../../../../../runtimes/react/use-style";
+import { useResponsiveStyle } from "../../../../utils/responsive-style";
+import { major as nextMajorVersion } from "../../../../../next/next-version";
+const NextLegacyImage = NextImage;
+function getColor(color) {
+  if (color == null)
+    return "black";
+  if (color.swatch == null) {
+    return colorToString({ ...color, swatch: { hue: 0, saturation: 0, lightness: 0 } });
+  }
+  return colorToString(color);
+}
+const getStopsStyle = (stops) => stops.map(({ color, location }) => `${getColor(color)} ${location}%`).join(",");
+const absoluteFillStyle = {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+};
+const containerStyle = {
+  ...absoluteFillStyle,
+  borderRadius: "inherit"
+};
+function Backgrounds({ backgrounds }) {
+  if (backgrounds == null)
+    return /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsx(Fragment, { children: backgrounds.map(({ value, deviceId }) => {
+    const visibility = backgrounds.map((v) => ({
+      deviceId: v.deviceId,
+      value: v.deviceId === deviceId
+    }));
+    return /* @__PURE__ */ jsx(BackgroundDeviceLayer, { layer: value, visibility }, deviceId);
+  }) });
+}
+function BackgroundDeviceLayer({ layer, visibility }) {
+  const visibilityStyle = useResponsiveStyle([visibility], ([v]) => ({
+    display: v === true ? "block" : "none"
+  }));
+  return /* @__PURE__ */ jsx("div", { className: useStyle({ ...containerStyle, ...visibilityStyle, overflow: "hidden" }), children: [...layer].reverse().map((bg) => {
+    if (bg.type === "color") {
+      return /* @__PURE__ */ jsx(ColorBackground, { color: getColor(bg.payload) }, bg.id);
+    }
+    if (bg.type === "image" && bg.payload) {
+      return /* @__PURE__ */ createElement(ImageBackground, { ...bg.payload, key: bg.id });
+    }
+    if (bg.type === "gradient" && bg.payload) {
+      return /* @__PURE__ */ createElement(
+        GradientBackground,
+        {
+          ...bg.payload,
+          key: bg.id,
+          gradient: getStopsStyle(bg.payload.stops)
+        }
+      );
+    }
+    if (bg.type === "video" && bg.payload) {
+      return /* @__PURE__ */ createElement(
+        VideoBackground,
+        {
+          ...bg.payload,
+          key: bg.id,
+          maskColor: getColor(bg.payload.maskColor)
+        }
+      );
+    }
+    return null;
+  }) });
+}
+function ColorBackground({ color }) {
+  return /* @__PURE__ */ jsx("div", { className: 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 = useStyle(containerStyle);
+  if (repeat === "no-repeat" && size !== "auto" && publicUrl != null) {
+    return /* @__PURE__ */ jsx(Parallax, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ jsx("div", { ...getParallaxProps({ style: { opacity, overflow: "hidden" } }), children: nextMajorVersion < 13 ? /* @__PURE__ */ jsx(
+      NextLegacyImage,
+      {
+        src: publicUrl,
+        layout: "fill",
+        objectPosition: backgroundPosition,
+        objectFit: size,
+        priority
+      }
+    ) : /* @__PURE__ */ jsx(
+      NextImage,
+      {
+        src: publicUrl,
+        alt: "",
+        fill: true,
+        sizes: "100vw",
+        style: {
+          objectPosition: backgroundPosition,
+          objectFit: size
+        },
+        priority
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx(Parallax, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ 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__ */ jsx(
+    "div",
+    {
+      className: 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__ */ jsx(Parallax, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ jsx("div", { ...getParallaxProps({ className: useStyle(containerStyle) }), children: /* @__PURE__ */ jsx(
+    BackgroundVideo,
+    {
+      url,
+      zoom,
+      opacity,
+      aspectRatio: getAspectRatio(aspectRatio),
+      maskColor
+    }
+  ) }) });
+}
+export {
+  Backgrounds as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/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":"AA+CkC;AAkCjB;AAjFjB,OAAO,eAAe;AAMtB,SAAS,qBAAqB;AAC9B,OAAO,cAAc;AACrB,OAAO,qBAAqB;AAE5B,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,SAAS,wBAAwB;AAE1C,MAAM,kBAAkB;AAExB,SAAS,SAAS,OAAiC;AACjD,MAAI,SAAS;AAAM,WAAO;AAE1B,MAAI,MAAM,UAAU,MAAM;AACxB,WAAO,cAAc,EAAE,GAAG,OAAO,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,EAAE,CAAC;AAAA,EACpF;AAEA,SAAO,cAAc,KAAK;AAC5B;AAIA,MAAM,gBAAgB,CAAC,UACrB,MAAM,IAAI,CAAC,EAAE,OAAO,SAAS,MAAM,GAAG,SAAS,KAAK,CAAC,IAAI,QAAQ,GAAG,EAAE,KAAK,GAAG;AAEhF,MAAM,oBAA+B;AAAA,EACnC,UAAU;AAAA,EACV,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AAEA,MAAM,iBAA4B;AAAA,EAChC,GAAG;AAAA,EACH,cAAc;AAChB;AAIe,SAAR,YAA6B,EAAE,YAAY,GAAuB;AACvE,MAAI,eAAe;AAAM,WAAO,gCAAE;AAElC,SACE,gCACG,sBAAY,IAAI,CAAC,EAAE,OAAO,SAAS,MAAM;AACxC,UAAM,aAAa,YAAY,IAAI,QAAM;AAAA,MACvC,UAAU,EAAE;AAAA,MACZ,OAAO,EAAE,aAAa;AAAA,IACxB,EAAE;AAEF,WAAO,oBAAC,yBAAqC,OAAO,OAAO,cAAxB,QAAgD;AAAA,EACrF,CAAC,GACH;AAEJ;AAOA,SAAS,sBAAsB,EAAE,OAAO,WAAW,GAAyB;AAC1E,QAAM,kBAAkB,mBAAmB,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,OAAO;AAAA,IACjE,SAAS,MAAM,OAAO,UAAU;AAAA,EAClC,EAAE;AAEF,SACE,oBAAC,SAAI,WAAW,SAAS,EAAE,GAAG,gBAAgB,GAAG,iBAAiB,UAAU,SAAS,CAAC,GACnF,WAAC,GAAG,KAAK,EAAE,QAAQ,EAAE,IAAI,QAAM;AAC9B,QAAI,GAAG,SAAS,SAAS;AACvB,aAAO,oBAAC,mBAA4B,OAAO,SAAS,GAAG,OAAO,KAAjC,GAAG,EAAiC;AAAA,IACnE;AAEA,QAAI,GAAG,SAAS,WAAW,GAAG,SAAS;AACrC,aAAO,8BAAC,mBAAiB,GAAG,GAAG,SAAS,KAAK,GAAG,IAAI;AAAA,IACtD;AAEA,QAAI,GAAG,SAAS,cAAc,GAAG,SAAS;AACxC,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG,GAAG;AAAA,UACP,KAAK,GAAG;AAAA,UACR,UAAU,cAAc,GAAG,QAAQ,KAAK;AAAA;AAAA,MAC1C;AAAA,IAEJ;AAEA,QAAI,GAAG,SAAS,WAAW,GAAG,SAAS;AACrC,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG,GAAG;AAAA,UACP,KAAK,GAAG;AAAA,UACR,WAAW,SAAS,GAAG,QAAQ,SAAS;AAAA;AAAA,MAC1C;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT,CAAC,GACH;AAEJ;AAIA,SAAS,gBAAgB,EAAE,MAAM,GAAyB;AACxD,SAAO,oBAAC,SAAI,WAAW,SAAS,EAAE,GAAG,gBAAgB,iBAAiB,MAAM,CAAC,GAAG;AAClF;AAEA,MAAM,wBAAwB;AAAA,EAC5B,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAIA,MAAM,sBAAsB;AAAA,EAC1B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;AAcA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA,SAAS,sBAAsB;AAAA,EAC/B,OAAO,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,qBAAqB,GAAG,SAAS,CAAC,KAAK,SAAS,CAAC;AACvD,QAAM,qBAAqB,SAAS,cAAc;AAElD,MAAI,WAAW,eAAe,SAAS,UAAU,aAAa,MAAM;AAClE,WACE,oBAAC,YAAS,UAAU,UACjB,gCACC,oBAAC,SAAK,GAAG,iBAAiB,EAAE,OAAO,EAAE,SAAS,UAAU,SAAS,EAAE,CAAC,GACjE,6BAAmB,KAClB;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,QAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,WAAW;AAAA,QACX;AAAA;AAAA,IACF,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAI;AAAA,QACJ,OAAM;AAAA,QACN,OAAO;AAAA,UACL,gBAAgB;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QACA;AAAA;AAAA,IACF,GAEJ,GAEJ;AAAA,EAEJ;AAEA,SACE,oBAAC,YAAS,UAAU,UACjB,gCACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACV,GAAG,iBAAiB;AAAA,QACnB,OAAO;AAAA,UACL,iBAAiB,aAAa,OAAO,QAAQ,SAAS,OAAO;AAAA,UAC7D;AAAA,UACA,kBAAkB;AAAA,UAClB,gBAAgB;AAAA,UAChB;AAAA,QACF;AAAA,MACF,CAAC;AAAA;AAAA,EACH,GAEJ;AAEJ;AAQA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA,WAAW;AAAA,EACX,QAAQ,KAAK;AACf,GAA4B;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,SAAS;AAAA,QAClB,GAAG;AAAA,QACH,YAAY,WACR,mBAAmB,QAAQ,MAC3B,mBAAmB,KAAK,QAAQ,QAAQ;AAAA,MAC9C,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,MAAM,6BAA6B;AAAA,EACjC,MAAM;AAAA,EACN,UAAU;AACZ;AAKA,SAAS,eAAe,aAAoE;AAC1F,UAAQ,aAAa;AAAA,IACnB,KAAK;AACH,aAAO,KAAK;AAAA,IAEd,KAAK;AACH,aAAO,IAAI;AAAA,IAEb;AACE,aAAO,KAAK;AAAA,EAChB;AACF;AAWA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,SACE,oBAAC,YAAS,UAAU,UACjB,gCACC,oBAAC,SAAK,GAAG,iBAAiB,EAAE,WAAW,SAAS,cAAc,EAAE,CAAC,GAC/D;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,eAAe,WAAW;AAAA,MACvC;AAAA;AAAA,EACF,GACF,GAEJ;AAEJ;","names":[]}

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

@@ -0,0 +1,84 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from "react";
+import clamp from "../../../../../utils/clamp";
+import { useIsomorphicLayoutEffect } from "../../../../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 = useRef(null);
+  const [containerScrollTop, setContainerScrollTop] = useState(strength == null ? 0 : strength);
+  const lastScrollParentScrollTop = useRef(0);
+  useIsomorphicLayoutEffect(() => {
+    if (!container.current || strength == null || strength === 0)
+      return void 0;
+    const containerDocument = container.current.ownerDocument;
+    const scrollParent = getScrollParent(container.current);
+    const eventTarget = containerDocument.documentElement === scrollParent ? containerDocument.defaultView : scrollParent;
+    lastScrollParentScrollTop.current = scrollParent.scrollTop;
+    setContainerScrollTop(strength);
+    function handleScroll() {
+      containerDocument.defaultView.requestAnimationFrame(() => {
+        if (!container.current)
+          return;
+        const { top: containerTop, bottom: containerBottom } = container.current.getBoundingClientRect();
+        const { top: scrollParentTop, bottom: scrollParentBottom } = scrollParent === containerDocument.documentElement ? { top: 0, bottom: containerDocument.defaultView.innerHeight } : scrollParent.getBoundingClientRect();
+        const { scrollTop: scrollParentScrollTop } = scrollParent === containerDocument.documentElement ? { scrollTop: containerDocument.defaultView.pageYOffset } : scrollParent;
+        const scrollParentHeight = scrollParentBottom - scrollParentTop;
+        const scrollParentScrollDelta = scrollParentScrollTop - lastScrollParentScrollTop.current;
+        lastScrollParentScrollTop.current = scrollParentScrollTop;
+        setContainerScrollTop((scrollTop) => {
+          const isContainerVisible = containerTop < scrollParentTop + scrollParentHeight && containerBottom > scrollParentTop;
+          const containerScrollRemaining = scrollParentScrollDelta > 0 ? 2 * strength - scrollTop : scrollTop;
+          const scrollParentScrollRemaining = scrollParentScrollDelta > 0 ? scrollParentTop + containerBottom : scrollParentHeight - containerTop;
+          const parallaxRatio = containerScrollRemaining / scrollParentScrollRemaining;
+          const containerScrollDelta = isContainerVisible ? parallaxRatio * scrollParentScrollDelta : 0;
+          return clamp(0, scrollTop + containerScrollDelta, strength * 2);
+        });
+      });
+    }
+    eventTarget.addEventListener("scroll", handleScroll);
+    return () => eventTarget.removeEventListener("scroll", handleScroll);
+  }, [strength]);
+  const getProps = useCallback(
+    ({ 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__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: container,
+      style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 },
+      children: children(getProps)
+    }
+  );
+}
+export {
+  Parallax as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/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":[]}

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

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+import {
+  Children,
+  forwardRef
+} from "react";
+import { useStyle } from "../../../runtimes/react/use-style";
+import { useBackgrounds } from "../../hooks";
+import Backgrounds from "./components/Backgrounds";
+var BackgroundsContainer_default = forwardRef(function BackgroundsContainer({ backgrounds, children, className, ...restOfProps }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...restOfProps,
+      ref,
+      className: cx(
+        useStyle({
+          position: "relative",
+          width: "100%",
+          margin: "0 auto",
+          "> *": {
+            borderRadius: "inherit",
+            height: "inherit"
+          },
+          "> :last-child": {
+            position: "relative"
+          }
+        }),
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Backgrounds, { backgrounds: useBackgrounds(backgrounds) }),
+        Children.only(children)
+      ]
+    }
+  );
+});
+export {
+  BackgroundsContainer_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/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":"AA0BI,SAmBE,KAnBF;AA1BJ,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EAGA;AAAA,OAGK;AAEP,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,iBAAiB;AASxB,IAAO,+BAAQ,WAAyC,SAAS,qBAC/D,EAAE,aAAa,UAAU,WAAW,GAAG,YAAY,GACnD,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACT,SAAS;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,4BAAC,eAAY,aAAa,eAAe,WAAW,GAAG;AAAA,QACtD,SAAS,KAAK,QAAQ;AAAA;AAAA;AAAA,EACzB;AAEJ,CAAC;","names":[]}

package/dist/esm/components/shared/FallbackComponent/FallbackComponent.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useStyle } from "../../../runtimes/react/use-style";
+import { Warning20 } from "../../icons/Warning20";
+const FallbackComponent = forwardRef(function FallbackComponent2({ text }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: useStyle({
+        width: "100%",
+        height: 54,
+        backgroundColor: "#fcedf2",
+        borderRadius: 6,
+        padding: 16,
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        color: "#c73e6d",
+        fill: "currentColor",
+        fontFamily: "Heebo, sans-serif",
+        fontSize: 16
+      }),
+      children: [
+        /* @__PURE__ */ jsx(Warning20, {}),
+        /* @__PURE__ */ jsx("span", { children: text })
+      ]
+    }
+  );
+});
+export {
+  FallbackComponent
+};
+//# sourceMappingURL=FallbackComponent.js.map

package/dist/esm/components/shared/FallbackComponent/FallbackComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/shared/FallbackComponent/FallbackComponent.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { Warning20 } from '../../icons/Warning20'\n\ntype Props = {\n  text: string\n}\n\nexport const FallbackComponent = forwardRef(function FallbackComponent(\n  { text }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      ref={ref}\n      className={useStyle({\n        width: '100%',\n        height: 54,\n        backgroundColor: '#fcedf2',\n        borderRadius: 6,\n        padding: 16,\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        color: '#c73e6d',\n        fill: 'currentColor',\n        fontFamily: 'Heebo, sans-serif',\n        fontSize: 16,\n      })}\n    >\n      <Warning20 />\n      <span>{text}</span>\n    </div>\n  )\n})\n"],"mappings":"AAaI,SAiBE,KAjBF;AAbJ,SAAS,kBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAMnB,MAAM,oBAAoB,WAAW,SAASA,mBACnD,EAAE,KAAK,GACP,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,SAAS;AAAA,QAClB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,cAAc;AAAA,QACd,SAAS;AAAA,QACT,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ,CAAC;AAAA,MAED;AAAA,4BAAC,aAAU;AAAA,QACX,oBAAC,UAAM,gBAAK;AAAA;AAAA;AAAA,EACd;AAEJ,CAAC;","names":["FallbackComponent"]}

package/dist/esm/components/shared/FallbackComponent/index.js

@@ -0,0 +1,2 @@
+export * from "./FallbackComponent";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/shared/FallbackComponent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/shared/FallbackComponent/index.ts"],"sourcesContent":["export * from './FallbackComponent'\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/esm/components/shared/GutterContainer/index.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+import { useStyle } from "../../../runtimes/react/use-style";
+import { useResponsiveStyle } from "../../utils/responsive-style";
+function GutterContainer({ className, gutter, first, last, ...restOfProps }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restOfProps,
+      className: cx(
+        useStyle(
+          useResponsiveStyle([gutter], ([gutter2 = { value: 0, unit: "px" }]) => ({
+            paddingLeft: first ? "0px" : `${gutter2.value / 2}${gutter2.unit}`,
+            paddingRight: last ? "0px" : `${gutter2.value / 2}${gutter2.unit}`
+          }))
+        ),
+        className
+      )
+    }
+  );
+}
+export {
+  GutterContainer as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/shared/GutterContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/shared/GutterContainer/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef } from 'react'\nimport { ResponsiveValue, Length } from '../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\n\ntype BaseProps = {\n  className?: string\n  gutter?: ResponsiveValue<Length>\n  first: boolean\n  last: boolean\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nexport default function GutterContainer({ className, gutter, first, last, ...restOfProps }: Props) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle(\n          useResponsiveStyle([gutter] as const, ([gutter = { value: 0, unit: 'px' }]) => ({\n            paddingLeft: first ? '0px' : `${gutter.value / 2}${gutter.unit}`,\n            paddingRight: last ? '0px' : `${gutter.value / 2}${gutter.unit}`,\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":"AAiBI;AAjBJ,SAAS,UAAU;AAGnB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AAWpB,SAAR,gBAAiC,EAAE,WAAW,QAAQ,OAAO,MAAM,GAAG,YAAY,GAAU;AACjG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,UACE,mBAAmB,CAAC,MAAM,GAAY,CAAC,CAACA,UAAS,EAAE,OAAO,GAAG,MAAM,KAAK,CAAC,OAAO;AAAA,YAC9E,aAAa,QAAQ,QAAQ,GAAGA,QAAO,QAAQ,CAAC,GAAGA,QAAO,IAAI;AAAA,YAC9D,cAAc,OAAO,QAAQ,GAAGA,QAAO,QAAQ,CAAC,GAAGA,QAAO,IAAI;AAAA,UAChE,EAAE;AAAA,QACJ;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":["gutter"]}