@wix/editor-react-components 1.2499.0 → 1.2501.0

package/dist/site/components/Logo/component.js

@@ -2,163 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c as clsx } from "../chunks/clsx.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { d as defaultLogoUrl, D as DEFAULT_LOGO_SIZE } from "../chunks/constants29.js";
-import * as React from "react";
-import { i as imageKit, g as getPlaceholder } from "../chunks/index5.js";
+import { I as Image$1 } from "../chunks/Image.js";
 import { L as Link } from "../chunks/Link.js";
-const image$1 = "image__WopE9";
-const styles$2 = {
-  image: image$1
-};
-const { STATIC_MEDIA_URL } = imageKit;
-const fetchLQIP = ({ fittingType, src, target, options }) => {
-  const placeholder = getPlaceholder(fittingType, src, target, {
-    ...options,
-    autoEncode: true
-  });
-  if ((placeholder == null ? void 0 : placeholder.uri) && !/^[a-z]+:/.test(placeholder.uri)) {
-    placeholder.uri = `${STATIC_MEDIA_URL}${placeholder.uri}`;
-  }
-  return placeholder;
-};
-const SCHEME_RE = /^[a-z]+:/;
-const Image$1 = (props) => {
-  var _a, _b;
-  const { id, containerId, uri, alt, name = "", role, width, height, displayMode, devicePixelRatio, quality, alignType, bgEffectName = "", focalPoint, upscaleMethod, className = "", crop, imageStyles = {}, targetWidth, targetHeight, targetScale, onLoad = () => {
-  }, onError = () => {
-  }, shouldUseLQIP, containerWidth, containerHeight, getPlaceholder: getPlaceholder2, isInFirstFold, placeholderTransition, socialAttrs, isSEOBot, skipMeasure, hasAnimation, encoding, isFluidLayout } = props;
-  const imageRef = React.useRef(null);
-  let hasSsrSrc = "";
-  const hasBlurTransition = placeholderTransition === "blur";
-  const ssrImageData = React.useRef(null);
-  if (!ssrImageData.current) {
-    if (getPlaceholder2 || shouldUseLQIP || isInFirstFold || isSEOBot) {
-      const options = {
-        upscaleMethod,
-        ...quality ? quality : {},
-        shouldLoadHQImage: isInFirstFold,
-        isSEOBot,
-        hasAnimation,
-        encoding
-      };
-      ssrImageData.current = (getPlaceholder2 || fetchLQIP)({
-        fittingType: displayMode,
-        src: {
-          id: uri,
-          width,
-          height,
-          crop,
-          name,
-          focalPoint
-        },
-        target: {
-          width: containerWidth,
-          height: containerHeight,
-          alignment: alignType,
-          htmlTag: "img"
-        },
-        options
-      });
-      hasSsrSrc = !ssrImageData.current.transformed || isInFirstFold || isSEOBot ? "" : "true";
-    } else {
-      ssrImageData.current = {
-        uri: void 0,
-        css: { img: {} },
-        attr: { img: {}, container: {} },
-        transformed: false
-      };
-    }
-  }
-  const isLQIP = !isSEOBot && (getPlaceholder2 || shouldUseLQIP) && !isInFirstFold && ssrImageData.current.transformed;
-  const imageInfo = React.useMemo(() => JSON.stringify({
-    containerId,
-    ...containerId && { containerId },
-    ...alignType && { alignType },
-    ...skipMeasure && { skipMeasure: true },
-    displayMode,
-    ...containerWidth && { targetWidth: containerWidth },
-    ...containerHeight && { targetHeight: containerHeight },
-    ...targetWidth && { targetWidth },
-    ...targetHeight && { targetHeight },
-    ...targetScale && { targetScale },
-    isLQIP,
-    isSEOBot,
-    lqipTransition: placeholderTransition,
-    encoding,
-    imageData: {
-      width,
-      height,
-      uri,
-      name,
-      displayMode,
-      hasAnimation,
-      ...quality && { quality },
-      ...devicePixelRatio && { devicePixelRatio },
-      ...focalPoint && { focalPoint },
-      ...crop && { crop },
-      ...upscaleMethod && { upscaleMethod }
-    }
-  }), [
-    containerId,
-    alignType,
-    skipMeasure,
-    displayMode,
-    containerWidth,
-    containerHeight,
-    targetWidth,
-    targetHeight,
-    targetScale,
-    isLQIP,
-    isSEOBot,
-    placeholderTransition,
-    encoding,
-    width,
-    height,
-    uri,
-    name,
-    hasAnimation,
-    quality,
-    devicePixelRatio,
-    focalPoint,
-    crop,
-    upscaleMethod
-  ]);
-  const ssrResult = ssrImageData.current;
-  const src = ssrResult == null ? void 0 : ssrResult.uri;
-  const srcset = ssrResult == null ? void 0 : ssrResult.srcset;
-  const placeholderStyle = (_a = ssrResult.css) == null ? void 0 : _a.img;
-  const classNames = `${styles$2.image} ${className}`;
-  React.useEffect(() => {
-    const imgElement = imageRef.current;
-    if (onLoad && (imgElement == null ? void 0 : imgElement.currentSrc) && (imgElement == null ? void 0 : imgElement.complete)) {
-      onLoad({
-        target: imgElement
-      });
-    }
-  }, []);
-  const maxWidth = ssrResult && !(ssrResult == null ? void 0 : ssrResult.transformed) ? `max(${width}px, 100%)` : targetWidth ? `${targetWidth}px` : null;
-  return React.createElement(
-    "wow-image",
-    { id, class: classNames, "data-image-info": imageInfo, "data-motion-part": `BG_IMG ${containerId}`, "data-bg-effect-name": bgEffectName, "data-has-ssr-src": hasSsrSrc, "data-animate-blur": !isSEOBot && isLQIP && hasBlurTransition ? "" : void 0, "data-is-responsive": isFluidLayout ? "true" : void 0, style: maxWidth ? { "--wix-img-max-width": maxWidth } : {} },
-    React.createElement("img", {
-      src,
-      ref: imageRef,
-      alt: alt || "",
-      role,
-      style: { ...placeholderStyle, ...imageStyles },
-      onLoad,
-      onError,
-      width: containerWidth ? containerWidth : void 0,
-      height: containerHeight ? containerHeight : void 0,
-      ...socialAttrs,
-      srcSet: isInFirstFold ? (_b = srcset == null ? void 0 : srcset.dpr) == null ? void 0 : _b.map((s) => SCHEME_RE.test(s) ? s : `${STATIC_MEDIA_URL}${s}`).join(", ") : void 0,
-      // @ts-expect-error fetchpriority type should work in react > 18.3 https://github.com/facebook/react/pull/25927
-      fetchpriority: isInFirstFold ? "high" : void 0,
-      loading: isInFirstFold === false ? "lazy" : void 0,
-      // The src attribute triggers a mismatch warning because wow-image updates its src outside of the React lifecycle. This causes React to retain the old value in the virtual DOM, which could potentially lead to a bug where the old value is re-rendered during updates. However, we’re confident that this issue is not reproducing in current (16-18) React versions
-      suppressHydrationWarning: true
-    })
-  );
-};
 const logo = "logo__Y9w6a";
 const linkLayer = "linkLayer__KtYh-";
 const styles$1 = {

package/dist/site/components/Logo/css.css

@@ -1,18 +1,4 @@
-.image__WopE9 {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-.image__WopE9 img {
-  max-width: var(--wix-img-max-width, 100%);
-}
-.image__WopE9[data-animate-blur] img {
-  filter: blur(9px);
-  transition: filter 0.8s ease-in;
-}
-.image__WopE9[data-animate-blur] img[data-load-done] {
-  filter: none;
-}.logo__Y9w6a {
+.logo__Y9w6a {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -42,4 +28,19 @@
   width: 100%;
   height: 100%;
   display: block;
+}
+.image__WopE9 {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.image__WopE9 img {
+  max-width: var(--wix-img-max-width, 100%);
+}
+.image__WopE9[data-animate-blur] img {
+  filter: blur(9px);
+  transition: filter 0.8s ease-in;
+}
+.image__WopE9[data-animate-blur] img[data-load-done] {
+  filter: none;
 }

package/dist/site/components/TransparentVideo/css.css

@@ -88,18 +88,19 @@
   --position-left: calc(50cqw - 1cqh * var(--focal-x, 50) * var(--aspect-ratio, 1));
   --position-top: calc(50cqh - 1cqw * var(--focal-y, 50) / var(--aspect-ratio, 1));
   object-position: var(--video-position, clamp(100%, var(--position-left), 0%) clamp(100%, var(--position-top), 0%));
-}.image__OIbFL {
+}
+.image__WopE9 {
   display: block;
   width: 100%;
   height: 100%;
 }
-.image__OIbFL img {
+.image__WopE9 img {
   max-width: var(--wix-img-max-width, 100%);
 }
-.image__OIbFL[data-animate-blur] img {
+.image__WopE9[data-animate-blur] img {
   filter: blur(9px);
   transition: filter 0.8s ease-in;
 }
-.image__OIbFL[data-animate-blur] img[data-load-done] {
+.image__WopE9[data-animate-blur] img[data-load-done] {
   filter: none;
 }

package/dist/site/components/VideoUpload/css.css

@@ -467,18 +467,19 @@
   --position-left: calc(50cqw - 1cqh * var(--focal-x, 50) * var(--aspect-ratio, 1));
   --position-top: calc(50cqh - 1cqw * var(--focal-y, 50) / var(--aspect-ratio, 1));
   object-position: var(--video-position, clamp(100%, var(--position-left), 0%) clamp(100%, var(--position-top), 0%));
-}.image__OIbFL {
+}
+.image__WopE9 {
   display: block;
   width: 100%;
   height: 100%;
 }
-.image__OIbFL img {
+.image__WopE9 img {
   max-width: var(--wix-img-max-width, 100%);
 }
-.image__OIbFL[data-animate-blur] img {
+.image__WopE9[data-animate-blur] img {
   filter: blur(9px);
   transition: filter 0.8s ease-in;
 }
-.image__OIbFL[data-animate-blur] img[data-load-done] {
+.image__WopE9[data-animate-blur] img[data-load-done] {
   filter: none;
 }

package/dist/site/components/chunks/Image.js

@@ -0,0 +1,160 @@
+import * as React from "react";
+import { i as imageKit, g as getPlaceholder } from "./index5.js";
+const image = "image__WopE9";
+const styles = {
+  image
+};
+const { STATIC_MEDIA_URL } = imageKit;
+const fetchLQIP = ({ fittingType, src, target, options }) => {
+  const placeholder = getPlaceholder(fittingType, src, target, {
+    ...options,
+    autoEncode: true
+  });
+  if ((placeholder == null ? void 0 : placeholder.uri) && !/^[a-z]+:/.test(placeholder.uri)) {
+    placeholder.uri = `${STATIC_MEDIA_URL}${placeholder.uri}`;
+  }
+  return placeholder;
+};
+const SCHEME_RE = /^[a-z]+:/;
+const Image = (props) => {
+  var _a, _b;
+  const { id, containerId, uri, alt, name = "", role, width, height, displayMode, devicePixelRatio, quality, alignType, bgEffectName = "", focalPoint, upscaleMethod, className = "", crop, imageStyles = {}, targetWidth, targetHeight, targetScale, onLoad = () => {
+  }, onError = () => {
+  }, shouldUseLQIP, containerWidth, containerHeight, getPlaceholder: getPlaceholder2, isInFirstFold, placeholderTransition, socialAttrs, isSEOBot, skipMeasure, hasAnimation, encoding, isFluidLayout, baseHostURL } = props;
+  const imageRef = React.useRef(null);
+  let hasSsrSrc = "";
+  const hasBlurTransition = placeholderTransition === "blur";
+  const ssrImageData = React.useRef(null);
+  if (!ssrImageData.current) {
+    if (getPlaceholder2 || shouldUseLQIP || isInFirstFold || isSEOBot) {
+      const options = {
+        upscaleMethod,
+        ...quality ? quality : {},
+        shouldLoadHQImage: isInFirstFold,
+        isSEOBot,
+        hasAnimation,
+        encoding,
+        baseHostURL
+      };
+      ssrImageData.current = (getPlaceholder2 || fetchLQIP)({
+        fittingType: displayMode,
+        src: {
+          id: uri,
+          width,
+          height,
+          crop,
+          name,
+          focalPoint
+        },
+        target: {
+          width: containerWidth,
+          height: containerHeight,
+          alignment: alignType,
+          htmlTag: "img"
+        },
+        options
+      });
+      hasSsrSrc = !ssrImageData.current.transformed || isInFirstFold || isSEOBot ? "" : "true";
+    } else {
+      ssrImageData.current = {
+        uri: void 0,
+        css: { img: {} },
+        attr: { img: {}, container: {} },
+        transformed: false
+      };
+    }
+  }
+  const isLQIP = !isSEOBot && (getPlaceholder2 || shouldUseLQIP) && !isInFirstFold && ssrImageData.current.transformed;
+  const imageInfo = React.useMemo(() => JSON.stringify({
+    containerId,
+    ...containerId && { containerId },
+    ...alignType && { alignType },
+    ...skipMeasure && { skipMeasure: true },
+    displayMode,
+    ...containerWidth && { targetWidth: containerWidth },
+    ...containerHeight && { targetHeight: containerHeight },
+    ...targetWidth && { targetWidth },
+    ...targetHeight && { targetHeight },
+    ...targetScale && { targetScale },
+    isLQIP,
+    isSEOBot,
+    lqipTransition: placeholderTransition,
+    encoding,
+    imageData: {
+      width,
+      height,
+      uri,
+      name,
+      displayMode,
+      hasAnimation,
+      ...quality && { quality },
+      ...devicePixelRatio && { devicePixelRatio },
+      ...focalPoint && { focalPoint },
+      ...crop && { crop },
+      ...upscaleMethod && { upscaleMethod }
+    }
+  }), [
+    containerId,
+    alignType,
+    skipMeasure,
+    displayMode,
+    containerWidth,
+    containerHeight,
+    targetWidth,
+    targetHeight,
+    targetScale,
+    isLQIP,
+    isSEOBot,
+    placeholderTransition,
+    encoding,
+    width,
+    height,
+    uri,
+    name,
+    hasAnimation,
+    quality,
+    devicePixelRatio,
+    focalPoint,
+    crop,
+    upscaleMethod
+  ]);
+  const ssrResult = ssrImageData.current;
+  const src = ssrResult == null ? void 0 : ssrResult.uri;
+  const srcset = ssrResult == null ? void 0 : ssrResult.srcset;
+  const placeholderStyle = (_a = ssrResult.css) == null ? void 0 : _a.img;
+  const classNames = `${styles.image} ${className}`;
+  React.useEffect(() => {
+    const imgElement = imageRef.current;
+    if (onLoad && (imgElement == null ? void 0 : imgElement.currentSrc) && (imgElement == null ? void 0 : imgElement.complete)) {
+      onLoad({
+        target: imgElement
+      });
+    }
+  }, []);
+  const maxWidth = ssrResult && !(ssrResult == null ? void 0 : ssrResult.transformed) ? `max(${width}px, 100%)` : targetWidth ? `${targetWidth}px` : null;
+  return React.createElement(
+    "wow-image",
+    { id, class: classNames, "data-image-info": imageInfo, "data-motion-part": `BG_IMG ${containerId}`, "data-bg-effect-name": bgEffectName, "data-has-ssr-src": hasSsrSrc, "data-animate-blur": !isSEOBot && isLQIP && hasBlurTransition ? "" : void 0, "data-is-responsive": isFluidLayout ? "true" : void 0, style: maxWidth ? { "--wix-img-max-width": maxWidth } : {} },
+    React.createElement("img", {
+      src,
+      ref: imageRef,
+      alt: alt || "",
+      role,
+      style: { ...placeholderStyle, ...imageStyles },
+      onLoad,
+      onError,
+      width: containerWidth ? containerWidth : void 0,
+      height: containerHeight ? containerHeight : void 0,
+      ...socialAttrs,
+      srcSet: isInFirstFold ? (_b = srcset == null ? void 0 : srcset.dpr) == null ? void 0 : _b.map((s) => SCHEME_RE.test(s) ? s : `${STATIC_MEDIA_URL}${s}`).join(", ") : void 0,
+      // @ts-expect-error fetchpriority type should work in react > 18.3 https://github.com/facebook/react/pull/25927
+      fetchpriority: isInFirstFold ? "high" : void 0,
+      loading: isInFirstFold === false ? "lazy" : void 0,
+      // The src attribute triggers a mismatch warning because wow-image updates its src outside of the React lifecycle. This causes React to retain the old value in the virtual DOM, which could potentially lead to a bug where the old value is re-rendered during updates. However, we’re confident that this issue is not reproducing in current (16-18) React versions
+      suppressHydrationWarning: true
+    })
+  );
+};
+export {
+  Image as I
+};