@jetshop/ui 5.13.0 → 5.13.10-0

package/Image/BaseImage.js

@@ -1,192 +1,192 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import { useInView } from 'react-intersection-observer';
-import { paddingForAspectRatio } from './utils/paddingForAspectRatio';
-export const transparentDataImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
-const defaultImageState = {
-    imgLoaded: false,
-    error: false
-};
-const loadedImageState = {
-    imgLoaded: true,
-    error: false
-};
-let hydrated = false;
-const imageCache = Object.create({});
-function isInCache(src) {
-    return src in imageCache;
-}
-function cacheImage(src) {
-    imageCache[src] = true;
-}
-function imageStateReducer(_, action) {
-    switch (action.type) {
-        case 'reset':
-            return defaultImageState;
-        case 'loaded':
-            cacheImage(action.cacheKey);
-            return loadedImageState;
-        case 'error':
-            return { imgLoaded: false, error: true };
-        default:
-            console.error(`Action ${action.type} is invalid for image reducer`);
-            return;
-    }
-}
-function useObjectFitPolyfill(imageRefs) {
-    const [polyfilled, setPolyfilled] = React.useState(false);
-    React.useEffect(() => {
-        const testImg = document.createElement(`img`);
-        if (typeof testImg.style.objectFit === `undefined` ||
-            typeof testImg.style.objectPosition === `undefined`) {
-            import(`object-fit-images`).then(({ default: ObjectFitImages }) => {
-                imageRefs.forEach((imageRef) => {
-                    imageRef.current && ObjectFitImages(imageRef.current);
-                });
-                setPolyfilled(true);
-            });
-        }
-    }, [imageRefs]);
-    return polyfilled;
-}
-function getTypeByExtension(src) {
-    // Identifying type by extension, based on common image file types
-    // https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
-    const extensionRegex = /\.(jpg|jpeg|jfif|pjpeg|pjp|png|gif|bmp|webp|svg|apng|ico|cur)(?:\?.*)?$/i;
-    const formatMatch = extensionRegex.exec(src);
-    if (!formatMatch)
-        return null;
-    let type = null;
-    switch (formatMatch[1]) {
-        case 'jpg':
-        case 'jpeg':
-        case 'jfif':
-        case 'pjpeg':
-        case 'pjp':
-            type = 'image/jpeg';
-            break;
-        case 'png':
-            type = 'image/png';
-            break;
-        case 'gif':
-            type = 'image/gif';
-            break;
-        case 'bmp':
-            type = 'image/bmp';
-            break;
-        case 'webp':
-            type = 'image/webp';
-            break;
-        case 'svg':
-            type = 'image/svg+xml';
-            break;
-        case 'apng':
-            type = 'image/apng';
-            break;
-        case 'ico':
-        case 'cur':
-            type = 'image/x-icon';
-            break;
-        default:
-            break;
-    }
-    return type;
-}
-const Img = React.forwardRef((props, ref) => {
-    const { sizes, srcSet, src, style, alt, onLoad, onError, objectFit, critical } = props, otherProps = __rest(props, ["sizes", "srcSet", "src", "style", "alt", "onLoad", "onError", "objectFit", "critical"]);
-    const imgStyle = Object.assign({ position: 'absolute', top: 0, left: 0, width: `100%`, height: `100%`, paddingTop: 0, objectPosition: `center`, objectFit }, style);
-    return (React.createElement("img", Object.assign({ alt: alt, sizes: sizes, srcSet: srcSet, src: src, onLoad: onLoad, onError: onError, loading: critical ? 'eager' : 'lazy' }, otherProps, { ref: ref, style: imgStyle })));
-});
-const Placeholder = React.forwardRef((props, ref) => {
-    return (React.createElement("picture", { "data-flight-image-placeholder": "" },
-        React.createElement(Img, Object.assign({ loading: "lazy", alt: "" }, props, { ref: ref }))));
-});
-const Image = function Image(_a) {
-    var { src, hasFalsySrc, lqip, sizes, srcset, webpSrcset, critical, aspect, cover = false, alt = '', fillAvailableSpace = false, children, error: ErrorComp, className, badges } = _a, rest = __rest(_a, ["src", "hasFalsySrc", "lqip", "sizes", "srcset", "webpSrcset", "critical", "aspect", "cover", "alt", "fillAvailableSpace", "children", "error", "className", "badges"]);
-    // Set up the IntersectionObserver
-    const [ref, inView] = useInView({ triggerOnce: true });
-    // Check if the browser supports loading="lazy". In that case, we don't need
-    // the IntersectionObserver
-    const nativeLazyLoading = typeof HTMLImageElement !== 'undefined' &&
-        'loading' in HTMLImageElement.prototype;
-    const imageRef = React.createRef();
-    const placeholderRef = React.createRef();
-    useObjectFitPolyfill([imageRef, placeholderRef]);
-    const [{ imgLoaded, error }, dispatch] = React.useReducer(imageStateReducer, critical ? loadedImageState : defaultImageState);
-    const cacheKey = srcset;
-    const handleImgLoad = React.useCallback(function handleImgLoad() {
-        dispatch({ type: 'loaded', cacheKey });
-    }, [cacheKey]);
-    function handleImgError() {
-        dispatch({ type: 'error' });
-    }
-    // Treat critical images as always cached
-    const isCached = critical || isInCache(cacheKey);
-    React.useEffect(() => {
-        hydrated = true;
-    }, []);
-    React.useEffect(() => {
-        dispatch({ type: 'reset' });
-    }, [src]);
-    React.useEffect(() => {
-        // Handle case where image onLoad fires during SSR
-        if (imageRef.current && imageRef.current.complete && !isCached) {
-            handleImgLoad();
-        }
-    }, [handleImgLoad, imageRef, isCached]);
-    // Render nothing if src is boolean
-    if (typeof src === 'boolean' && !src) {
-        return null;
-    }
-    const loaded = imgLoaded || hasFalsySrc || isCached;
-    const objectFit = cover || fillAvailableSpace ? 'cover' : 'contain';
-    const objectFitPolyfillStyles = { fontFamily: `"object-fit: ${objectFit}"` };
-    const type = getTypeByExtension(src);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", Object.assign({ key: src, ref: 
-            // If we have native lazyloading, by not applying the `ref` from
-            // useInView we don't use IntersectionObserver at all
-            nativeLazyLoading ? undefined : ref, "data-flight-image-container": "", "data-flight-image-loaded": loaded, className: className }, rest, { style: {
-                position: `relative`,
-                overflow: `hidden`,
-                width: `100%`,
-                height: fillAvailableSpace ? '100%' : 'auto',
-                paddingBottom: fillAvailableSpace
-                    ? 0
-                    : !aspect
-                        ? '100%'
-                        : paddingForAspectRatio(aspect)
-            } }),
-            error ? (React.createElement(ErrorComp, null)) : (React.createElement(React.Fragment, null,
-                React.createElement(Placeholder, { src: critical ? transparentDataImg : lqip || transparentDataImg, ref: placeholderRef, style: Object.assign({ objectFit, opacity: loaded ? 0 : 0.6, transitionDelay: `500ms` }, objectFitPolyfillStyles) }),
-                (inView || nativeLazyLoading || !hydrated || isCached) && (React.createElement("picture", { "data-flight-image": "" },
-                    React.createElement("source", { type: "image/webp", srcSet: webpSrcset, sizes: sizes }),
-                    React.createElement("source", { type: type, srcSet: srcset, sizes: sizes }),
-                    React.createElement(Img, { srcSet: srcset, src: src || transparentDataImg, sizes: sizes, onLoad: handleImgLoad, onError: handleImgError, alt: alt, ref: imageRef, style: Object.assign({ objectFit, opacity: loaded ? 1 : 0, transition: `opacity 500ms` }, objectFitPolyfillStyles), critical: critical }))),
-                React.createElement("noscript", null,
-                    React.createElement("picture", null,
-                        React.createElement(Img, { srcSet: srcset, src: src, sizes: sizes, alt: alt, style: {
-                                objectFit
-                            }, critical: critical }))))),
-            children && (React.createElement("div", { "data-flight-image-children": "", style: {
-                    position: 'relative',
-                    zIndex: 2,
-                    width: '100%',
-                    height: '100%'
-                } }, children)),
-            badges && (React.createElement("div", { "data-flight-image-badges": "", style: {
-                    zIndex: 2
-                } }, badges)))));
-};
-export default Image;
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { useInView } from 'react-intersection-observer';
+import { paddingForAspectRatio } from './utils/paddingForAspectRatio';
+export const transparentDataImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+const defaultImageState = {
+    imgLoaded: false,
+    error: false
+};
+const loadedImageState = {
+    imgLoaded: true,
+    error: false
+};
+let hydrated = false;
+const imageCache = Object.create({});
+function isInCache(src) {
+    return src in imageCache;
+}
+function cacheImage(src) {
+    imageCache[src] = true;
+}
+function imageStateReducer(_, action) {
+    switch (action.type) {
+        case 'reset':
+            return defaultImageState;
+        case 'loaded':
+            cacheImage(action.cacheKey);
+            return loadedImageState;
+        case 'error':
+            return { imgLoaded: false, error: true };
+        default:
+            console.error(`Action ${action.type} is invalid for image reducer`);
+            return;
+    }
+}
+function useObjectFitPolyfill(imageRefs) {
+    const [polyfilled, setPolyfilled] = React.useState(false);
+    React.useEffect(() => {
+        const testImg = document.createElement(`img`);
+        if (typeof testImg.style.objectFit === `undefined` ||
+            typeof testImg.style.objectPosition === `undefined`) {
+            import(`object-fit-images`).then(({ default: ObjectFitImages }) => {
+                imageRefs.forEach((imageRef) => {
+                    imageRef.current && ObjectFitImages(imageRef.current);
+                });
+                setPolyfilled(true);
+            });
+        }
+    }, [imageRefs]);
+    return polyfilled;
+}
+function getTypeByExtension(src) {
+    // Identifying type by extension, based on common image file types
+    // https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
+    const extensionRegex = /\.(jpg|jpeg|jfif|pjpeg|pjp|png|gif|bmp|webp|svg|apng|ico|cur)(?:\?.*)?$/i;
+    const formatMatch = extensionRegex.exec(src);
+    if (!formatMatch)
+        return null;
+    let type = null;
+    switch (formatMatch[1]) {
+        case 'jpg':
+        case 'jpeg':
+        case 'jfif':
+        case 'pjpeg':
+        case 'pjp':
+            type = 'image/jpeg';
+            break;
+        case 'png':
+            type = 'image/png';
+            break;
+        case 'gif':
+            type = 'image/gif';
+            break;
+        case 'bmp':
+            type = 'image/bmp';
+            break;
+        case 'webp':
+            type = 'image/webp';
+            break;
+        case 'svg':
+            type = 'image/svg+xml';
+            break;
+        case 'apng':
+            type = 'image/apng';
+            break;
+        case 'ico':
+        case 'cur':
+            type = 'image/x-icon';
+            break;
+        default:
+            break;
+    }
+    return type;
+}
+const Img = React.forwardRef((props, ref) => {
+    const { sizes, srcSet, src, style, alt, onLoad, onError, objectFit, critical } = props, otherProps = __rest(props, ["sizes", "srcSet", "src", "style", "alt", "onLoad", "onError", "objectFit", "critical"]);
+    const imgStyle = Object.assign({ position: 'absolute', top: 0, left: 0, width: `100%`, height: `100%`, paddingTop: 0, objectPosition: `center`, objectFit }, style);
+    return (React.createElement("img", Object.assign({ alt: alt, sizes: sizes, srcSet: srcSet, src: src, onLoad: onLoad, onError: onError, loading: critical ? 'eager' : 'lazy' }, otherProps, { ref: ref, style: imgStyle })));
+});
+const Placeholder = React.forwardRef((props, ref) => {
+    return (React.createElement("picture", { "data-flight-image-placeholder": "" },
+        React.createElement(Img, Object.assign({ loading: "lazy", alt: "" }, props, { ref: ref }))));
+});
+const Image = function Image(_a) {
+    var { src, hasFalsySrc, lqip, sizes, srcset, webpSrcset, critical, aspect, cover = false, alt = '', fillAvailableSpace = false, children, error: ErrorComp, className, badges } = _a, rest = __rest(_a, ["src", "hasFalsySrc", "lqip", "sizes", "srcset", "webpSrcset", "critical", "aspect", "cover", "alt", "fillAvailableSpace", "children", "error", "className", "badges"]);
+    // Set up the IntersectionObserver
+    const [ref, inView] = useInView({ triggerOnce: true });
+    // Check if the browser supports loading="lazy". In that case, we don't need
+    // the IntersectionObserver
+    const nativeLazyLoading = typeof HTMLImageElement !== 'undefined' &&
+        'loading' in HTMLImageElement.prototype;
+    const imageRef = React.createRef();
+    const placeholderRef = React.createRef();
+    useObjectFitPolyfill([imageRef, placeholderRef]);
+    const [{ imgLoaded, error }, dispatch] = React.useReducer(imageStateReducer, critical ? loadedImageState : defaultImageState);
+    const cacheKey = srcset;
+    const handleImgLoad = React.useCallback(function handleImgLoad() {
+        dispatch({ type: 'loaded', cacheKey });
+    }, [cacheKey]);
+    function handleImgError() {
+        dispatch({ type: 'error' });
+    }
+    // Treat critical images as always cached
+    const isCached = critical || isInCache(cacheKey);
+    React.useEffect(() => {
+        hydrated = true;
+    }, []);
+    React.useEffect(() => {
+        dispatch({ type: 'reset' });
+    }, [src]);
+    React.useEffect(() => {
+        // Handle case where image onLoad fires during SSR
+        if (imageRef.current && imageRef.current.complete && !isCached) {
+            handleImgLoad();
+        }
+    }, [handleImgLoad, imageRef, isCached]);
+    // Render nothing if src is boolean
+    if (typeof src === 'boolean' && !src) {
+        return null;
+    }
+    const loaded = imgLoaded || hasFalsySrc || isCached;
+    const objectFit = cover || fillAvailableSpace ? 'cover' : 'contain';
+    const objectFitPolyfillStyles = { fontFamily: `"object-fit: ${objectFit}"` };
+    const type = getTypeByExtension(src);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", Object.assign({ key: src, ref: 
+            // If we have native lazyloading, by not applying the `ref` from
+            // useInView we don't use IntersectionObserver at all
+            nativeLazyLoading ? undefined : ref, "data-flight-image-container": "", "data-flight-image-loaded": loaded, className: className }, rest, { style: {
+                position: `relative`,
+                overflow: `hidden`,
+                width: `100%`,
+                height: fillAvailableSpace ? '100%' : 'auto',
+                paddingBottom: fillAvailableSpace
+                    ? 0
+                    : !aspect
+                        ? '100%'
+                        : paddingForAspectRatio(aspect)
+            } }),
+            error ? (React.createElement(ErrorComp, null)) : (React.createElement(React.Fragment, null,
+                React.createElement(Placeholder, { src: critical ? transparentDataImg : lqip || transparentDataImg, ref: placeholderRef, style: Object.assign({ objectFit, opacity: loaded ? 0 : 0.6, transitionDelay: `500ms` }, objectFitPolyfillStyles) }),
+                (inView || nativeLazyLoading || !hydrated || isCached) && (React.createElement("picture", { "data-flight-image": "" },
+                    React.createElement("source", { type: "image/webp", srcSet: webpSrcset, sizes: sizes }),
+                    React.createElement("source", { type: type, srcSet: srcset, sizes: sizes }),
+                    React.createElement(Img, { srcSet: srcset, src: src || transparentDataImg, sizes: sizes, onLoad: handleImgLoad, onError: handleImgError, alt: alt, ref: imageRef, style: Object.assign({ objectFit, opacity: loaded ? 1 : 0, transition: `opacity 500ms` }, objectFitPolyfillStyles), critical: critical }))),
+                React.createElement("noscript", null,
+                    React.createElement("picture", null,
+                        React.createElement(Img, { srcSet: srcset, src: src, sizes: sizes, alt: alt, style: {
+                                objectFit
+                            }, critical: critical }))))),
+            children && (React.createElement("div", { "data-flight-image-children": "", style: {
+                    position: 'relative',
+                    zIndex: 2,
+                    width: '100%',
+                    height: '100%'
+                } }, children)),
+            badges && (React.createElement("div", { "data-flight-image-badges": "", style: {
+                    zIndex: 2
+                } }, badges)))));
+};
+export default Image;
 //# sourceMappingURL=BaseImage.js.map

package/Image/Fallback.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-/** Display this if JS is disabled. */
-export declare const Fallback: ({ children }: {
-    children: React.ReactElement<{}>;
-}) => JSX.Element;
+import React from 'react';
+/** Display this if JS is disabled. */
+export declare const Fallback: ({ children }: {
+    children: React.ReactElement<{}>;
+}) => JSX.Element;

package/Image/Fallback.js

@@ -1,4 +1,4 @@
-import React from 'react';
-/** Display this if JS is disabled. */
-export const Fallback = ({ children }) => React.createElement("noscript", null, children);
+import React from 'react';
+/** Display this if JS is disabled. */
+export const Fallback = ({ children }) => React.createElement("noscript", null, children);
 //# sourceMappingURL=Fallback.js.map

package/Image/FlightImage.d.ts

@@ -1,52 +1,52 @@
-import React from 'react';
-import { ProductImageSize } from '@jetshop/core/types';
-export declare type ImageSrcType = string | ProductImageSize[];
-export declare type BreakpointValues = string[];
-export declare type ImageBreakpointSize = number | string;
-export declare type ImageBreakpointSizes = ImageBreakpointSize | ImageBreakpointSize[];
-export declare type AspectRatio = string | number;
-export declare type Gravity = 'north' | 'south' | 'west' | 'east' | 'centre' | 'smart';
-export declare const transparentDataImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
-interface ImageParameters {
-    /** The image src
-     * Also accepts an array of objects with `url` keys (deprecated image field)
-     */
-    src: ImageSrcType;
-    /**
-     * Whether to crop the image instead of resizing it when aspect ratio is provided
-     * @default false
-     */
-    crop?: boolean;
-    gravity?: Gravity;
-    quality?: number;
-    /** An array of image sizes, will be mapped against breakpoints.
-     * @see https://docs.dev.jetshop.se/ui/image#the-sizes-prop
-     */
-    sizes: ImageBreakpointSizes;
-    /**
-     * The aspect ratio of the image
-     * If unknown, use null to preserve original aspect ratio
-     */
-    aspect?: string;
-    critical?: boolean;
-    modifiedDate?: string;
-    focalPointX?: number;
-    focalPointY?: number;
-}
-interface ImageProps extends ImageParameters {
-    /** Whether or not to use `background-size: cover` */
-    cover?: boolean;
-    error?: (args: any) => React.ReactElement<any>;
-    alt?: string;
-    title?: string;
-    /**
-     * Useful for banner images. Sets the following CSS automatically:
-     * object-fit: cover
-     * padding-top: 0;
-     */
-    fillAvailableSpace?: boolean;
-    className?: string;
-    badges?: React.ReactElement<any>;
-}
-declare function FlightImage(props: ImageProps): JSX.Element;
-export default FlightImage;
+import React from 'react';
+import { ProductImageSize } from '@jetshop/core/types';
+export declare type ImageSrcType = string | ProductImageSize[];
+export declare type BreakpointValues = string[];
+export declare type ImageBreakpointSize = number | string;
+export declare type ImageBreakpointSizes = ImageBreakpointSize | ImageBreakpointSize[];
+export declare type AspectRatio = string | number;
+export declare type Gravity = 'north' | 'south' | 'west' | 'east' | 'centre' | 'smart';
+export declare const transparentDataImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+interface ImageParameters {
+    /** The image src
+     * Also accepts an array of objects with `url` keys (deprecated image field)
+     */
+    src: ImageSrcType;
+    /**
+     * Whether to crop the image instead of resizing it when aspect ratio is provided
+     * @default false
+     */
+    crop?: boolean;
+    gravity?: Gravity;
+    quality?: number;
+    /** An array of image sizes, will be mapped against breakpoints.
+     * @see https://docs.dev.jetshop.se/ui/image#the-sizes-prop
+     */
+    sizes: ImageBreakpointSizes;
+    /**
+     * The aspect ratio of the image
+     * If unknown, use null to preserve original aspect ratio
+     */
+    aspect?: string;
+    critical?: boolean;
+    modifiedDate?: string;
+    focalPointX?: number;
+    focalPointY?: number;
+}
+interface ImageProps extends ImageParameters {
+    /** Whether or not to use `background-size: cover` */
+    cover?: boolean;
+    error?: (args: any) => React.ReactElement<any>;
+    alt?: string;
+    title?: string;
+    /**
+     * Useful for banner images. Sets the following CSS automatically:
+     * object-fit: cover
+     * padding-top: 0;
+     */
+    fillAvailableSpace?: boolean;
+    className?: string;
+    badges?: React.ReactElement<any>;
+}
+declare function FlightImage(props: ImageProps): JSX.Element;
+export default FlightImage;

package/Image/FlightImage.js

@@ -1,58 +1,58 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
-import Image from './BaseImage';
-import React from 'react';
-import t from '@jetshop/intl';
-import { useConstructImage } from './useConstructImage';
-import ChannelContext from '@jetshop/core/components/ChannelContext';
-export const transparentDataImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
-function Error() {
-    return (React.createElement("div", { style: {
-            background: '#e2e2e2',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            position: `absolute`,
-            top: 0,
-            left: 0,
-            width: `100%`,
-            height: `100%`
-        } }, t('Image Not Found')));
-}
-function FlightImage(props) {
-    const { gravity, crop, src: originalSrc, sizes: sizesArray = [1], aspect, quality, critical, modifiedDate, error: ErrorComp = Error, focalPointX, focalPointY } = props, rest = __rest(props, ["gravity", "crop", "src", "sizes", "aspect", "quality", "critical", "modifiedDate", "error", "focalPointX", "focalPointY"]);
-    const { theme: { breakpoints } } = useShopConfig();
-    // The baseUrl will change based on the currently-selected channel.
-    // We need it to correctly construct the image url
-    const { selectedChannel } = React.useContext(ChannelContext);
-    const baseUrl = (selectedChannel === null || selectedChannel === void 0 ? void 0 : selectedChannel.imageUrl)
-        ? String(selectedChannel.imageUrl)
-        : null;
-    const { src, hasFalsySrc, lqip, sizes, srcset, webpSrcset } = useConstructImage({
-        gravity,
-        crop,
-        src: originalSrc,
-        sizes: sizesArray,
-        aspect,
-        quality,
-        critical,
-        modifiedDate,
-        breakpoints,
-        baseUrl,
-        focalPointX,
-        focalPointY
-    });
-    return (React.createElement(Image, Object.assign({}, rest, { critical: critical, aspect: aspect, src: hasFalsySrc && typeof originalSrc === 'boolean' ? false : src, hasFalsySrc: hasFalsySrc, lqip: lqip, sizes: sizes, srcset: srcset, webpSrcset: webpSrcset, error: ErrorComp })));
-}
-export default FlightImage;
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
+import Image from './BaseImage';
+import React from 'react';
+import t from '@jetshop/intl';
+import { useConstructImage } from './useConstructImage';
+import ChannelContext from '@jetshop/core/components/ChannelContext';
+export const transparentDataImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+function Error() {
+    return (React.createElement("div", { style: {
+            background: '#e2e2e2',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: `absolute`,
+            top: 0,
+            left: 0,
+            width: `100%`,
+            height: `100%`
+        } }, t('Image Not Found')));
+}
+function FlightImage(props) {
+    const { gravity, crop, src: originalSrc, sizes: sizesArray = [1], aspect, quality, critical, modifiedDate, error: ErrorComp = Error, focalPointX, focalPointY } = props, rest = __rest(props, ["gravity", "crop", "src", "sizes", "aspect", "quality", "critical", "modifiedDate", "error", "focalPointX", "focalPointY"]);
+    const { theme: { breakpoints } } = useShopConfig();
+    // The baseUrl will change based on the currently-selected channel.
+    // We need it to correctly construct the image url
+    const { selectedChannel } = React.useContext(ChannelContext);
+    const baseUrl = (selectedChannel === null || selectedChannel === void 0 ? void 0 : selectedChannel.imageUrl)
+        ? String(selectedChannel.imageUrl)
+        : null;
+    const { src, hasFalsySrc, lqip, sizes, srcset, webpSrcset } = useConstructImage({
+        gravity,
+        crop,
+        src: originalSrc,
+        sizes: sizesArray,
+        aspect,
+        quality,
+        critical,
+        modifiedDate,
+        breakpoints,
+        baseUrl,
+        focalPointX,
+        focalPointY
+    });
+    return (React.createElement(Image, Object.assign({}, rest, { critical: critical, aspect: aspect, src: hasFalsySrc && typeof originalSrc === 'boolean' ? false : src, hasFalsySrc: hasFalsySrc, lqip: lqip, sizes: sizes, srcset: srcset, webpSrcset: webpSrcset, error: ErrorComp })));
+}
+export default FlightImage;
 //# sourceMappingURL=FlightImage.js.map