@jetshop/ui 5.17.0-alpha.f7018eb5 → 5.17.0

package/DropdownMenu/index.d.ts

@@ -0,0 +1,4 @@
+export { Button as DropdownMenuButton } from './Button';
+export { DropdownMenu, useDropdownMenu } from './DropdownMenu';
+export { Items as DropdownMenuItems } from './Items';
+export { Item as DropdownMenuItem } from './Item';

package/DropdownMenu/index.js

@@ -0,0 +1,5 @@
+export { Button as DropdownMenuButton } from './Button';
+export { DropdownMenu, useDropdownMenu } from './DropdownMenu';
+export { Items as DropdownMenuItems } from './Items';
+export { Item as DropdownMenuItem } from './Item';
+//# sourceMappingURL=index.js.map

package/DropdownMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,kBAAkB,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,KAAK,IAAI,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,IAAI,IAAI,gBAAgB,EAAE,MAAM,QAAQ,CAAC"}

package/ErrorBoundary/Generic.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface BoundaryErrorState {
+    error?: Error;
+    info?: React.ErrorInfo;
+}
+export interface BoundaryErrorProps {
+    component?: React.ReactNode;
+    extraInfo?: any;
+}
+export declare const DefaultError: React.FC<BoundaryErrorState>;
+declare class ErrorBoundary extends React.Component<BoundaryErrorProps, BoundaryErrorState> {
+    state: BoundaryErrorState;
+    static defaultProps: Partial<BoundaryErrorProps>;
+    componentDidCatch(error: Error, info: React.ErrorInfo): void;
+    render(): React.ReactNode;
+}
+export default ErrorBoundary;

package/ErrorBoundary/Generic.js

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import report from '@jetshop/core/errorReporting';
+import { styled } from 'linaria/react';
+const Wrapper = styled('section') `
+  width: 57ch;
+  max-width: 100%;
+  margin: 4rem auto;
+  padding: 1rem;
+  a {
+    display: inline-block;
+    margin: 1rem 0 3rem 0;
+    border-radius: 3px;
+    padding: 0.5rem;
+    text-decoration: none;
+    font-weight: 600;
+    background: #e2e2e2;
+    border: 1px solid #c3c3c3;
+    color: #000;
+    :hover {
+      background: #eaeaea;
+    }
+  }
+  h1 {
+    font-size: 1.5rem;
+    margin-bottom: 2rem;
+  }
+  pre {
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: #585858;
+  }
+`;
+export const DefaultError = ({ error, info }) => (React.createElement(Wrapper, null,
+    React.createElement("h1", null, "Something went wrong!"),
+    React.createElement("p", null, "Sorry! Our developers have been notified."),
+    React.createElement("div", null,
+        React.createElement("a", { href: "/" }, "Go back to the start page")),
+    process.env.NODE_ENV !== 'production' && (React.createElement("div", null,
+        error && React.createElement("p", null,
+            "Error: ",
+            error.message),
+        info && React.createElement("pre", null, info.componentStack)))));
+class ErrorBoundary extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            error: undefined,
+            info: undefined
+        };
+    }
+    componentDidCatch(error, info) {
+        const { extraInfo = {} } = this.props;
+        // Report to Sentry
+        report(error, Object.assign(Object.assign({}, extraInfo), { reactInfo: info }));
+        this.setState({ error, info });
+    }
+    render() {
+        const Comp = this.props.component;
+        if (!this.state.error) {
+            return this.props.children;
+        }
+        return React.createElement(Comp, Object.assign({}, this.state));
+    }
+}
+ErrorBoundary.defaultProps = {
+    component: DefaultError
+};
+export default ErrorBoundary;
+//# sourceMappingURL=Generic.js.map

package/ErrorBoundary/Generic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Generic.js","sourceRoot":"","sources":["Generic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAWvC,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BhC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAiC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAC7E,oBAAC,OAAO;IACN,wDAA8B;IAC9B,2EAAgD;IAChD;QACE,2BAAG,IAAI,EAAC,GAAG,gCAA8B,CACrC;IACL,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,IAAI,CACxC;QACG,KAAK,IAAI;;YAAW,KAAK,CAAC,OAAO,CAAK;QACtC,IAAI,IAAI,iCAAM,IAAI,CAAC,cAAc,CAAO,CACrC,CACP,CACO,CACX,CAAC;AAEF,MAAM,aAAc,SAAQ,KAAK,CAAC,SAGjC;IAHD;;QAIE,UAAK,GAAuB;YAC1B,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,SAAS;SAChB,CAAC;IAsBJ,CAAC;IAhBC,iBAAiB,CAAC,KAAY,EAAE,IAAqB;QACnD,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACtC,mBAAmB;QACnB,MAAM,CAAC,KAAK,kCAAO,SAAS,KAAE,SAAS,EAAE,IAAI,IAAG,CAAC;QACjD,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IACjC,CAAC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,SAAyC,CAAC;QAElE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YACrB,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;SAC5B;QAED,OAAO,oBAAC,IAAI,oBAAK,IAAI,CAAC,KAAK,EAAI,CAAC;IAClC,CAAC;;AAnBM,0BAAY,GAAgC;IACjD,SAAS,EAAE,YAAY;CACxB,CAAC;AAoBJ,eAAe,aAAa,CAAC"}

package/ErrorBoundary/PassThrough.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const PassThrough: React.FC;
+export default PassThrough;

package/ErrorBoundary/PassThrough.js

@@ -0,0 +1,7 @@
+// This should be used in cases where it is more desired to render nothing
+// rather than rendering a message when an error boundary is hit.
+const PassThrough = () => {
+    return null;
+};
+export default PassThrough;
+//# sourceMappingURL=PassThrough.js.map

package/ErrorBoundary/PassThrough.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PassThrough.js","sourceRoot":"","sources":["PassThrough.tsx"],"names":[],"mappings":"AAEA,0EAA0E;AAC1E,iEAAiE;AACjE,MAAM,WAAW,GAAa,GAAG,EAAE;IACjC,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/Gallery/Gallery.d.ts

@@ -0,0 +1,39 @@
+import { ProductImage } from '@jetshop/core/types';
+import * as React from 'react';
+import 'react-image-gallery/styles/css/image-gallery.css';
+export interface GalleryProps {
+    images: ProductImage[];
+    /** @default null
+     * The aspect ratio used for the gallery images. If unknown, pass `null` */
+    aspect?: string;
+    /**
+     * @default [1, 1, 1, 1 / 2, 1 / 2]
+     * An array of sizes to be used for the img
+     * srcSet. Each size maps to a breakpoint */
+    sizes?: number[];
+    /**
+     * @default ['5rem']
+     */
+    thumbnailSizes?: number[];
+    /**
+     * @default [1, 1, 1, 1 ]
+     */
+    fullScreenSizes?: number[];
+    /** @default bottom
+     * The position of image thumbnails */
+    thumbnailPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /** The desired background colour for the gallery */
+    backgroundColor?: string;
+    /** A ref to forward on to the image gallery in order to access imperative functions */
+    galleryRef?: {
+        current: any;
+    };
+    quality?: number;
+    thumbnailQuality?: number;
+    eagerlyLoad?: number[];
+}
+export interface GalleryState {
+    isFullscreen: boolean;
+}
+declare const Gallery: React.FC<GalleryProps>;
+export default Gallery;

package/Gallery/Gallery.js

@@ -0,0 +1,122 @@
+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 { styled } from 'linaria/react';
+import { css } from 'linaria';
+import ImageGallery from 'react-image-gallery';
+import 'react-image-gallery/styles/css/image-gallery.css';
+import { constructGallery } from './constructGallery';
+import Image from '@jetshop/ui/Image/Image';
+import ChannelContext from '@jetshop/core/components/ChannelContext';
+import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
+const wrapperStyles = css `
+  position: relative;
+  img {
+    max-height: 100vh;
+  }
+  .image-gallery {
+    z-index: 140;
+  }
+  .image-gallery-image {
+    text-align: center;
+  }
+  .image-gallery-thumbnail-inner {
+    font-size: 10px;
+  }
+  .image-gallery-right-nav,
+  .image-gallery-left-nav,
+  .image-gallery-fullscreen-button {
+    z-index: 2;
+    font-size: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    height: 2.5rem;
+    width: 2.5rem;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.4);
+    transition: background 0.3s ease-in-out;
+    margin: 0 0.5rem;
+    &:hover {
+      background: rgba(255, 255, 255, 0.8);
+    }
+    &:before {
+      color: black;
+      text-shadow: none;
+    }
+  }
+  .image-gallery-fullscreen-button {
+    margin-bottom: 0.5rem;
+  }
+  .image-gallery-fullscreen-button:before {
+    text-shadow: none;
+    font-size: 0.7em;
+    padding: 0;
+  }
+  .image-gallery-thumbnail.active {
+    border-width: 1px;
+  }
+  .image-gallery-thumbnails-wrapper.left .image-gallery-thumbnails,
+  .image-gallery-thumbnails-wrapper.right .image-gallery-thumbnails {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .fullscreen {
+    .image-gallery-fullscreen-button {
+      margin: 2rem;
+    }
+    .image-gallery-right-nav,
+    .image-gallery-left-nav {
+      margin: 0 2rem;
+    }
+    img {
+      width: auto;
+      max-width: 100%;
+    }
+    .image-gallery-thumbnails-wrapper {
+      display: none;
+    }
+  }
+  .image-gallery-slide {
+    background-color: var(--slide-bg);
+  }
+`;
+const Overlay = styled('div') `
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+`;
+const Gallery = function Gallery(props) {
+    const { sizes = [1, 1, 1, 1 / 2, 1 / 2], fullScreenSizes = [1, 1, 1, 1], thumbnailSizes = ['5rem'], aspect = '1:1', thumbnailPosition = 'bottom', backgroundColor = 'white', thumbnailQuality, quality, images, galleryRef, eagerlyLoad = [0] } = props, rest = __rest(props, ["sizes", "fullScreenSizes", "thumbnailSizes", "aspect", "thumbnailPosition", "backgroundColor", "thumbnailQuality", "quality", "images", "galleryRef", "eagerlyLoad"]);
+    const { theme: { breakpoints } } = useShopConfig();
+    const { selectedChannel } = React.useContext(ChannelContext);
+    const baseUrl = (selectedChannel === null || selectedChannel === void 0 ? void 0 : selectedChannel.url) ? String(selectedChannel.url) : null;
+    const [isFullscreen, setFullscreen] = React.useState(false);
+    const galleryImages = React.useMemo(() => constructGallery(images, fullScreenSizes, aspect, baseUrl, breakpoints), [aspect, baseUrl, breakpoints, fullScreenSizes, images]);
+    return (React.createElement("div", { className: wrapperStyles, style: { ['--slide-bg']: backgroundColor } },
+        React.createElement(ImageGallery, Object.assign({ ref: (r) => (galleryRef ? (galleryRef.current = r) : null), thumbnailPosition: thumbnailPosition, items: galleryImages, autoPlay: false, showPlayButton: false, showThumbnails: galleryImages.length > 1, useBrowserFullscreen: false, preventDefaultTouchmoveEvent: isFullscreen, onScreenChange: (el) => setFullscreen(!!el), renderItem: (item) => {
+                return (React.createElement("div", { className: "image-gallery-image" }, isFullscreen ? (React.createElement("img", { src: item.original, alt: item.originalAlt, srcSet: item.srcSet, sizes: item.sizes, title: item.originalTitle })) : (React.createElement(React.Fragment, null,
+                    React.createElement(Image, { src: item.original, alt: item.originalAlt, sizes: sizes, title: item.originalTitle, aspect: aspect, quality: quality, modifiedDate: item.modifiedDate, critical: eagerlyLoad.includes(item.index) }),
+                    props.children && React.createElement(Overlay, null, props.children)))));
+            }, renderThumbInner: (item) => {
+                return (React.createElement("div", { className: "image-gallery-thumbnail-inner" },
+                    React.createElement(Image, { src: item.thumbnail, alt: item.thumbnailAlt, title: item.thumbnailTitle, sizes: thumbnailSizes, aspect: aspect, quality: thumbnailQuality }),
+                    item.thumbnailLabel && (React.createElement("div", { className: "image-gallery-thumbnail-label" }, item.thumbnailLabel))));
+            } }, rest))));
+};
+export default Gallery;
+//# sourceMappingURL=Gallery.js.map

package/Gallery/Gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gallery.js","sourceRoot":"","sources":["Gallery.tsx"],"names":[],"mappings":"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"}

package/Gallery/constructGallery.d.ts

@@ -0,0 +1,15 @@
+import { ProductImage } from '@jetshop/core/types';
+export declare function constructGallery(images: ProductImage[], sizes: number[], aspect: string, baseUrl: string, breakpoints: {
+    [label: string]: string;
+}): {
+    index: number;
+    original: string;
+    originalAlt: string;
+    originalTitle: string;
+    thumbnail: string;
+    thumbnailAlt: string;
+    thumbnailTitle: string;
+    sizes: string;
+    srcSet: string;
+    modifiedDate: string;
+}[];

package/Gallery/constructGallery.js

@@ -0,0 +1,41 @@
+import { getFullUrl } from '../Image/utils/getFullUrl';
+import { getImageWidths } from '../Image/utils/getImageWidths';
+import { getLargestSize } from '../Image/utils/getLargestSize';
+import { getSizesMap } from '../Image/utils/getSizesMap';
+import { getSmallestSize } from '../Image/utils/getSmallestSize';
+import { getSrcSetFromWidths } from '../Image/utils/getSrcSetFromWidths';
+export function constructGallery(images, sizes, aspect, baseUrl, breakpoints) {
+    const breakpointValues = Object.values(breakpoints);
+    const calculatedSizes = getSizesMap(breakpointValues, sizes);
+    // Get required set of image widths
+    const widths = getImageWidths(breakpointValues, sizes);
+    return images.map((img, index) => {
+        const url = img.url || img.sizes;
+        let imageSrc;
+        let thumbSrc;
+        if (Array.isArray(url)) {
+            // maintain support for deprecated image sizes object
+            imageSrc = getFullUrl(getLargestSize(url), baseUrl);
+            thumbSrc = getFullUrl(getSmallestSize(url), baseUrl);
+        }
+        else {
+            imageSrc = getFullUrl(url, baseUrl);
+            thumbSrc = imageSrc;
+        }
+        // Generate image urls for the required image sizes
+        const srcSet = getSrcSetFromWidths(imageSrc, widths, aspect, { crop: false, webp: false }, img.modifiedDate);
+        return {
+            index,
+            original: imageSrc,
+            originalAlt: img.alt,
+            originalTitle: img.title,
+            thumbnail: thumbSrc,
+            thumbnailAlt: img.alt,
+            thumbnailTitle: img.title,
+            sizes: calculatedSizes,
+            srcSet,
+            modifiedDate: img.modifiedDate
+        };
+    });
+}
+//# sourceMappingURL=constructGallery.js.map

package/Gallery/constructGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constructGallery.js","sourceRoot":"","sources":["constructGallery.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAEzE,MAAM,UAAU,gBAAgB,CAC9B,MAAsB,EACtB,KAAe,EACf,MAAc,EACd,OAAe,EACf,WAAwC;IAExC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IACpD,MAAM,eAAe,GAAG,WAAW,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAC7D,mCAAmC;IACnC,MAAM,MAAM,GAAG,cAAc,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IACvD,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QAC/B,MAAM,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC;QAEjC,IAAI,QAAgB,CAAC;QACrB,IAAI,QAAgB,CAAC;QAErB,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACtB,qDAAqD;YACrD,QAAQ,GAAG,UAAU,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC;YACpD,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC;SACtD;aAAM;YACL,QAAQ,GAAG,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;YACpC,QAAQ,GAAG,QAAQ,CAAC;SACrB;QAED,mDAAmD;QACnD,MAAM,MAAM,GAAG,mBAAmB,CAChC,QAAQ,EACR,MAAM,EACN,MAAM,EACN,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAC5B,GAAG,CAAC,YAAY,CACjB,CAAC;QACF,OAAO;YACL,KAAK;YACL,QAAQ,EAAE,QAAQ;YAClB,WAAW,EAAE,GAAG,CAAC,GAAG;YACpB,aAAa,EAAE,GAAG,CAAC,KAAK;YACxB,SAAS,EAAE,QAAQ;YACnB,YAAY,EAAE,GAAG,CAAC,GAAG;YACrB,cAAc,EAAE,GAAG,CAAC,KAAK;YACzB,KAAK,EAAE,eAAe;YACtB,MAAM;YACN,YAAY,EAAE,GAAG,CAAC,YAAY;SAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC"}

package/Image/B2BImage.d.ts

@@ -0,0 +1,50 @@
+import React, { PropsWithChildren } 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;
+}
+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 B2BImage({ modifiedDate, ...props }: PropsWithChildren<ImageProps>): JSX.Element;
+export default B2BImage;

package/Image/B2BImage.js

@@ -0,0 +1,53 @@
+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 Image from './BaseImage';
+import React from 'react';
+import { useConstructImage } from './useConstructImage';
+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%`
+        } }, "Image not found"));
+}
+function B2BImage(_a) {
+    var { modifiedDate } = _a, props = __rest(_a, ["modifiedDate"]);
+    const { gravity, crop, src: originalSrc, sizes: sizesArray = [1], aspect, quality, critical } = props;
+    const { src, hasFalsySrc, lqip, sizes, srcset, webpSrcset } = useConstructImage({
+        gravity,
+        crop,
+        src: originalSrc,
+        sizes: sizesArray,
+        aspect,
+        quality,
+        critical,
+        modifiedDate,
+        breakpoints: {
+            xs: '20rem',
+            sm: '40rem',
+            md: '50rem',
+            lg: '64rem',
+            xl: '80rem'
+        },
+        baseUrl: ''
+    });
+    return (React.createElement(Image, Object.assign({}, props, { src: src, hasFalsySrc: hasFalsySrc, lqip: lqip, sizes: sizes, srcset: srcset, webpSrcset: webpSrcset, error: Error })));
+}
+export default B2BImage;
+//# sourceMappingURL=B2BImage.js.map

package/Image/B2BImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"B2BImage.js","sourceRoot":"","sources":["B2BImage.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,aAAa,CAAC;AAChC,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAUxD,MAAM,CAAC,MAAM,kBAAkB,GAC7B,oHAAoH,CAAC;AA4CvH,SAAS,KAAK;IACZ,OAAO,CACL,6BACE,KAAK,EAAE;YACL,UAAU,EAAE,SAAS;YACrB,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf,sBAGG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,EAAyD;QAAzD,EAAE,YAAY,OAA2C,EAAtC,KAAK,cAAxB,gBAA0B,CAAF;IACxC,MAAM,EACJ,OAAO,EACP,IAAI,EACJ,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,UAAU,GAAG,CAAC,CAAC,CAAC,EACvB,MAAM,EACN,OAAO,EACP,QAAQ,EACT,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,GACzD,iBAAiB,CAAC;QAChB,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,WAAW;QAChB,KAAK,EAAE,UAAU;QACjB,MAAM;QACN,OAAO;QACP,QAAQ;QACR,YAAY;QACZ,WAAW,EAAE;YACX,EAAE,EAAE,OAAO;YACX,EAAE,EAAE,OAAO;YACX,EAAE,EAAE,OAAO;YACX,EAAE,EAAE,OAAO;YACX,EAAE,EAAE,OAAO;SACZ;QACD,OAAO,EAAE,EAAE;KACZ,CAAC,CAAC;IAEL,OAAO,CACL,oBAAC,KAAK,oBACA,KAAK,IACT,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,IACZ,CACH,CAAC;AACJ,CAAC;AAED,eAAe,QAAQ,CAAC"}

package/Image/BaseImage.d.ts

@@ -0,0 +1,40 @@
+import * as 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 const transparentDataImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+export interface ImageParameters {
+    src: string | boolean;
+    sizes: string;
+    hasFalsySrc: boolean;
+    srcset: string;
+    webpSrcset: string;
+    lqip: string;
+    /**
+     * The aspect ratio of the image
+     * If unknown, use null to preserve original aspect ratio
+     */
+    aspect?: string;
+    critical?: boolean;
+}
+export 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>;
+    cfTransformer?: boolean;
+}
+declare const Image: React.FC<ImageProps>;
+export default Image;