@jetshop/ui 6.3.3 → 6.3.4

package/Gallery/constructGallery.js

@@ -5,10 +5,9 @@ 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);
+    const calculatedSizes = getSizesMap(breakpoints, sizes);
     // Get required set of image widths
-    const widths = getImageWidths(breakpointValues, sizes);
+    const widths = getImageWidths(breakpoints, sizes);
     return images.map((img, index) => {
         const url = img.url || img.sizes;
         let imageSrc;

package/Gallery/constructGallery.js.map

@@ -1 +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"}
+{"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,eAAe,GAAG,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IACxD,mCAAmC;IACnC,MAAM,MAAM,GAAG,cAAc,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAClD,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/FlightImage.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ProductImageSize } from '@jetshop/core/types';
 export type ImageSrcType = string | ProductImageSize[];
-export type BreakpointValues = string[];
 export type ImageBreakpointSize = number | string;
 export type ImageBreakpointSizes = ImageBreakpointSize | ImageBreakpointSize[];
 export type AspectRatio = string | number;

package/Image/FlightImage.js

@@ -15,6 +15,7 @@ import React from 'react';
 import t from '@jetshop/intl';
 import { useConstructImage } from './useConstructImage';
 import ChannelContext from '@jetshop/core/components/ChannelContext';
+import { Below } from '../Breakpoints';
 export const transparentDataImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 function Error() {
     return (React.createElement("div", { style: {
@@ -31,14 +32,14 @@ function Error() {
 }
 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();
+    const { theme: { breakpoints }, useMobileImageSizes = false } = 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({
+    const { src, hasFalsySrc, lqip, sizes, sizesMobile, srcset, webpSrcset, srcsetMobile, webpSrcsetMobile } = useConstructImage({
         gravity,
         crop,
         src: originalSrc,
@@ -52,7 +53,7 @@ function FlightImage(props) {
         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 })));
+    return (React.createElement(Below, { breakpoint: 'sm' }, (matches) => (React.createElement(Image, Object.assign({}, rest, { critical: critical, aspect: aspect, src: hasFalsySrc && typeof originalSrc === 'boolean' ? false : src, hasFalsySrc: hasFalsySrc, lqip: lqip, sizes: matches && useMobileImageSizes ? sizesMobile : sizes, srcset: matches && useMobileImageSizes ? srcsetMobile : srcset, webpSrcset: matches && useMobileImageSizes ? webpSrcsetMobile : webpSrcset, error: ErrorComp })))));
 }
 export default FlightImage;
 //# sourceMappingURL=FlightImage.js.map

package/Image/FlightImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlightImage.js","sourceRoot":"","sources":["FlightImage.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,MAAM,aAAa,CAAC;AAChC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,cAAc,MAAM,yCAAyC,CAAC;AASrE,MAAM,CAAC,MAAM,kBAAkB,GAC7B,oHAAoH,CAAC;AA8CvH,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,IAEA,CAAC,CAAC,iBAAiB,CAAC,CACjB,CACP,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,KAAiB;IACpC,MAAM,EACJ,OAAO,EACP,IAAI,EACJ,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,UAAU,GAAG,CAAC,CAAC,CAAC,EACvB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,KAAK,EAAE,SAAS,GAAG,KAAK,EACxB,WAAW,EACX,WAAW,KAET,KAAK,EADJ,IAAI,UACL,KAAK,EAbH,2HAaL,CAAQ,CAAC;IAEV,MAAM,EACJ,KAAK,EAAE,EAAE,WAAW,EAAE,EACvB,GAAG,aAAa,EAAE,CAAC;IAEpB,mEAAmE;IACnE,kDAAkD;IAClD,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IAC7D,MAAM,OAAO,GAAG,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ;QACvC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,QAAQ,CAAC;QAClC,CAAC,CAAC,IAAI,CAAC;IAET,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;QACX,OAAO;QACP,WAAW;QACX,WAAW;KACZ,CAAC,CAAC;IAEL,OAAO,CACL,oBAAC,KAAK,oBACA,IAAI,IACR,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,WAAW,IAAI,OAAO,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAClE,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,SAAS,IAChB,CACH,CAAC;AACJ,CAAC;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FlightImage.js","sourceRoot":"","sources":["FlightImage.tsx"],"names":[],"mappings":"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"}

package/Image/useConstructImage.d.ts

@@ -39,8 +39,11 @@ export declare function useConstructImage({ gravity, crop, src, sizes, aspect, c
     srcset: string;
     webpSrcset: string;
     sizes: string;
+    sizesMobile: string;
     lqip: string;
     src: string;
     hasFalsySrc: boolean;
+    srcsetMobile: string;
+    webpSrcsetMobile: string;
 };
 export {};

package/Image/useConstructImage.js

@@ -52,11 +52,12 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
     }
     // useMemo so this runs only if the image props change. It calculates the
     // strings used for `sizes`, `srcset`, and the `lqip`
-    const { sizesMap, srcset, lqip, webpSrcset } = React.useMemo(() => {
+    const { sizesMap, sizesMapMobile, srcset, lqip, webpSrcset, srcsetMobile, webpSrcsetMobile } = React.useMemo(() => {
         if (hasFalsySrc) {
             return {};
         }
-        const widths = getImageWidths(Object.values(breakpoints), sizes);
+        const widths = getImageWidths(breakpoints, sizes);
+        const mobileWidths = getImageWidths(breakpoints, sizes, true);
         const srcSetFromWidths = ({ webp }) => getSrcSetFromWidths(imageSrc, widths, aspect, {
             crop,
             gravity,
@@ -65,14 +66,33 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
             focalPointX,
             focalPointY
         }, modifiedDate);
+        const mobileSrcSetFromWidths = ({ webp }) => getSrcSetFromWidths(imageSrc, mobileWidths, aspect, {
+            crop,
+            gravity,
+            quality,
+            webp,
+            focalPointX,
+            focalPointY
+        }, modifiedDate);
         const srcset = srcSetFromWidths({ webp: false });
         const webpSrcset = srcSetFromWidths({ webp: true });
+        const srcsetMobile = mobileSrcSetFromWidths({ webp: false });
+        const webpSrcsetMobile = mobileSrcSetFromWidths({ webp: true });
         // If this is a critical image, don't calculate LQIP
         const lqip = critical
             ? null
             : getLQIP(imageSrc, widths, aspect, crop, modifiedDate);
-        const sizesMap = getSizesMap(Object.values(breakpoints), sizes);
-        return { sizesMap, srcset, lqip, webpSrcset };
+        const sizesMap = getSizesMap(breakpoints, sizes);
+        const sizesMapMobile = getSizesMap(breakpoints, sizes, true);
+        return {
+            sizesMap,
+            sizesMapMobile,
+            srcset,
+            lqip,
+            webpSrcset,
+            srcsetMobile,
+            webpSrcsetMobile
+        };
     }, [
         aspect,
         breakpoints,
@@ -91,9 +111,12 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
         srcset,
         webpSrcset,
         sizes: sizesMap,
+        sizesMobile: sizesMapMobile,
         lqip,
         src: imageSrc,
-        hasFalsySrc
+        hasFalsySrc,
+        srcsetMobile,
+        webpSrcsetMobile
     };
 }
 //# sourceMappingURL=useConstructImage.js.map

package/Image/useConstructImage.js.map

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

package/Image/utils/getImageWidths.d.ts

@@ -1,2 +1,2 @@
-import { BreakpointValues, ImageBreakpointSizes } from '../Image';
-export declare const getImageWidths: (breakpoints: BreakpointValues, sizes: ImageBreakpointSizes) => number[];
+import { ImageBreakpointSizes } from '../Image';
+export declare const getImageWidths: (breakpoints: Record<string, string>, sizes: ImageBreakpointSizes, mobile?: boolean) => number[];

package/Image/utils/getImageWidths.js

@@ -1,13 +1,20 @@
 import { getImageWidth } from './getImageWidth';
 import { remToPx } from './remToPx';
 import { getSizeForBreakpoint } from './getSizeForBreakpoint';
-export const getImageWidths = (breakpoints, sizes) => {
+export const getImageWidths = (breakpoints, sizes, mobile = false) => {
     const all = new Set();
-    for (let i = 0; i < breakpoints.length; i++) {
+    const breakpointArray = Object.entries(breakpoints).map(([key, value]) => ({
+        key,
+        value
+    }));
+    for (let i = 0; i < breakpointArray.length; i++) {
         const bpSize = getSizeForBreakpoint(sizes, i);
-        const px = remToPx(breakpoints[i]);
+        const px = remToPx(breakpointArray[i].value);
         all.add(getImageWidth(bpSize, px, 1));
         all.add(getImageWidth(bpSize, px, 2));
+        if (mobile && breakpointArray[i].key === 'sm') {
+            break;
+        }
     }
     return Array.from(all).sort();
 };

package/Image/utils/getImageWidths.js.map

@@ -1 +1 @@
-{"version":3,"file":"getImageWidths.js","sourceRoot":"","sources":["getImageWidths.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,WAA6B,EAC7B,KAA2B,EAC3B,EAAE;IACF,MAAM,GAAG,GAAG,IAAI,GAAG,EAAU,CAAC;IAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC3C,MAAM,MAAM,GAAG,oBAAoB,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC9C,MAAM,EAAE,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;QAEnC,GAAG,CAAC,GAAG,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;QACtC,GAAG,CAAC,GAAG,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;KACvC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAChC,CAAC,CAAC"}
+{"version":3,"file":"getImageWidths.js","sourceRoot":"","sources":["getImageWidths.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,WAAmC,EACnC,KAA2B,EAC3B,MAAM,GAAG,KAAK,EACd,EAAE;IACF,MAAM,GAAG,GAAG,IAAI,GAAG,EAAU,CAAC;IAE9B,MAAM,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QACzE,GAAG;QACH,KAAK;KACN,CAAC,CAAC,CAAC;IAEJ,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAE/C,MAAM,MAAM,GAAG,oBAAoB,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC9C,MAAM,EAAE,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAE7C,GAAG,CAAC,GAAG,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;QACtC,GAAG,CAAC,GAAG,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;QAEtC,IAAI,MAAM,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,EAAE;YAC7C,MAAM;SACP;KACF;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAChC,CAAC,CAAC"}

package/Image/utils/getSizesMap.d.ts

@@ -1,2 +1,2 @@
-import { BreakpointValues, ImageBreakpointSizes } from '../Image';
-export declare const getSizesMap: (breakpoints: BreakpointValues, sizes: ImageBreakpointSizes) => string;
+import { ImageBreakpointSizes } from '../Image';
+export declare const getSizesMap: (breakpoints: Record<string, string>, sizes: ImageBreakpointSizes, mobile?: boolean) => string;

package/Image/utils/getSizesMap.js

@@ -1,22 +1,35 @@
 import { getSizeForBreakpoint } from './getSizeForBreakpoint';
-export const getSizesMap = (breakpoints, sizes) => breakpoints
-    .map((breakpoint, i) => {
-    const size = getSizeForBreakpoint(sizes, i);
-    let width;
-    if (size > 2) {
-        // Size is absolute value in px
-        width = size + 'px';
+export const getSizesMap = (breakpoints, sizes, mobile = false) => {
+    const breakpointArray = Object.entries(breakpoints).map(([key, value]) => ({
+        key,
+        value
+    }));
+    const breakpointWidths = [];
+    for (let i = 0; i < breakpointArray.length; i++) {
+        breakpointWidths.push(breakpointArray[i].value);
+        if (mobile && breakpointArray[i].key === 'sm') {
+            break;
+        }
     }
-    else {
-        // Size is already a fraction (or unset). Convert it to vw (percentage
-        // of viewport width)
-        width = Math.round(100 * (size || 1)) + 'vw';
-    }
-    // Include a media query for all but the last size
-    if (i + 1 < breakpoints.length) {
-        return `(max-width: ${breakpoint}) ${width}`;
-    }
-    return width;
-})
-    .join(', ');
+    return breakpointWidths
+        .map((breakpoint, i) => {
+        const size = getSizeForBreakpoint(sizes, i);
+        let width;
+        if (size > 2) {
+            // Size is absolute value in px
+            width = size + 'px';
+        }
+        else {
+            // Size is already a fraction (or unset). Convert it to vw (percentage
+            // of viewport width)
+            width = Math.round(100 * (size || 1)) + 'vw';
+        }
+        // Include a media query for all but the last size
+        if (i + 1 < breakpointWidths.length) {
+            return `(max-width: ${breakpoint}) ${width}`;
+        }
+        return width;
+    })
+        .join(', ');
+};
 //# sourceMappingURL=getSizesMap.js.map

package/Image/utils/getSizesMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"getSizesMap.js","sourceRoot":"","sources":["getSizesMap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,WAA6B,EAC7B,KAA2B,EAC3B,EAAE,CACF,WAAW;KACR,GAAG,CAAC,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE;IACrB,MAAM,IAAI,GAAG,oBAAoB,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC5C,IAAI,KAAK,CAAC;IACV,IAAI,IAAI,GAAG,CAAC,EAAE;QACZ,+BAA+B;QAC/B,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;KACrB;SAAM;QACL,sEAAsE;QACtE,qBAAqB;QACrB,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;KAC9C;IACD,kDAAkD;IAClD,IAAI,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE;QAC9B,OAAO,eAAe,UAAU,KAAK,KAAK,EAAE,CAAC;KAC9C;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;KACD,IAAI,CAAC,IAAI,CAAC,CAAC"}
+{"version":3,"file":"getSizesMap.js","sourceRoot":"","sources":["getSizesMap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,WAAmC,EACnC,KAA2B,EAC3B,MAAM,GAAG,KAAK,EACd,EAAE;IACF,MAAM,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QACzE,GAAG;QACH,KAAK;KACN,CAAC,CAAC,CAAC;IAEJ,MAAM,gBAAgB,GAAa,EAAE,CAAC;IAEtC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC/C,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAEhD,IAAI,MAAM,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,EAAE;YAC7C,MAAM;SACP;KACF;IAED,OAAO,gBAAgB;SACpB,GAAG,CAAC,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE;QACrB,MAAM,IAAI,GAAG,oBAAoB,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC5C,IAAI,KAAK,CAAC;QACV,IAAI,IAAI,GAAG,CAAC,EAAE;YACZ,+BAA+B;YAC/B,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;SACrB;aAAM;YACL,sEAAsE;YACtE,qBAAqB;YACrB,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;SAC9C;QACD,kDAAkD;QAClD,IAAI,CAAC,GAAG,CAAC,GAAG,gBAAgB,CAAC,MAAM,EAAE;YACnC,OAAO,eAAe,UAAU,KAAK,KAAK,EAAE,CAAC;SAC9C;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,CAAC;AAChB,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetshop/ui",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "license": "MIT",
   "files": [
     "**/*.js",
@@ -60,5 +60,5 @@
     "react": "^18",
     "react-dom": "^18"
   },
-  "gitHead": "cddb48be4625b45e4d8bf9c3af95674ea5c8efba"
+  "gitHead": "dcb25931cd88b0c5e9256a744defd59281eb27b4"
 }