@wix/editor-react-components 1.2838.0 → 1.2839.0

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

@@ -101,18 +101,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/VideoScrub/css.css

@@ -137,19 +137,20 @@
   --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;
 }
 .presetWrapper__J1yzj {

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

@@ -474,18 +474,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 "./index6.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
+};