@jetshop/ui 6.5.3 → 6.5.5-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CloudflareImage/BaseImage.d.ts +0 -1
- package/CloudflareImage/BaseImage.js +2 -47
- package/CloudflareImage/BaseImage.js.map +1 -1
- package/CloudflareImage/FlightImage.js +2 -2
- package/CloudflareImage/FlightImage.js.map +1 -1
- package/CloudflareImage/useConstructImage.d.ts +0 -2
- package/CloudflareImage/useConstructImage.js +10 -23
- package/CloudflareImage/useConstructImage.js.map +1 -1
- package/CloudflareImage/utils/getImageWidths.js +23 -2
- package/CloudflareImage/utils/getImageWidths.js.map +1 -1
- package/CloudflareImage/utils/getLQIP.js +3 -2
- package/CloudflareImage/utils/getLQIP.js.map +1 -1
- package/CloudflareImage/utils/getSrcSetFromWidths.d.ts +0 -1
- package/CloudflareImage/utils/getSrcSetFromWidths.js +1 -1
- package/CloudflareImage/utils/getSrcSetFromWidths.js.map +1 -1
- package/CloudflareImage/utils/getSrcWithParams.js +15 -10
- package/CloudflareImage/utils/getSrcWithParams.js.map +1 -1
- package/package.json +2 -2
|
@@ -59,49 +59,6 @@ function useObjectFitPolyfill(imageRefs) {
|
|
|
59
59
|
}, [imageRefs]);
|
|
60
60
|
return polyfilled;
|
|
61
61
|
}
|
|
62
|
-
function getTypeByExtension(src) {
|
|
63
|
-
// Identifying type by extension, based on common image file types
|
|
64
|
-
// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
|
|
65
|
-
const extensionRegex = /\.(jpg|jpeg|jfif|pjpeg|pjp|png|gif|bmp|webp|svg|apng|ico|cur)(?:\?.*)?$/i;
|
|
66
|
-
const formatMatch = extensionRegex.exec(src);
|
|
67
|
-
if (!formatMatch)
|
|
68
|
-
return null;
|
|
69
|
-
let type = null;
|
|
70
|
-
switch (formatMatch[1]) {
|
|
71
|
-
case 'jpg':
|
|
72
|
-
case 'jpeg':
|
|
73
|
-
case 'jfif':
|
|
74
|
-
case 'pjpeg':
|
|
75
|
-
case 'pjp':
|
|
76
|
-
type = 'image/jpeg';
|
|
77
|
-
break;
|
|
78
|
-
case 'png':
|
|
79
|
-
type = 'image/png';
|
|
80
|
-
break;
|
|
81
|
-
case 'gif':
|
|
82
|
-
type = 'image/gif';
|
|
83
|
-
break;
|
|
84
|
-
case 'bmp':
|
|
85
|
-
type = 'image/bmp';
|
|
86
|
-
break;
|
|
87
|
-
case 'webp':
|
|
88
|
-
type = 'image/webp';
|
|
89
|
-
break;
|
|
90
|
-
case 'svg':
|
|
91
|
-
type = 'image/svg+xml';
|
|
92
|
-
break;
|
|
93
|
-
case 'apng':
|
|
94
|
-
type = 'image/apng';
|
|
95
|
-
break;
|
|
96
|
-
case 'ico':
|
|
97
|
-
case 'cur':
|
|
98
|
-
type = 'image/x-icon';
|
|
99
|
-
break;
|
|
100
|
-
default:
|
|
101
|
-
break;
|
|
102
|
-
}
|
|
103
|
-
return type;
|
|
104
|
-
}
|
|
105
62
|
const Img = React.forwardRef((props, ref) => {
|
|
106
63
|
const { sizes, srcSet, src, style, alt, onLoad, onError, objectFit, critical } = props, otherProps = __rest(props, ["sizes", "srcSet", "src", "style", "alt", "onLoad", "onError", "objectFit", "critical"]);
|
|
107
64
|
const imgStyle = Object.assign({ position: 'absolute', top: 0, left: 0, width: `100%`, height: `100%`, paddingTop: 0, objectPosition: `center`, objectFit }, style);
|
|
@@ -112,7 +69,7 @@ const Placeholder = React.forwardRef((props, ref) => {
|
|
|
112
69
|
React.createElement(Img, Object.assign({ loading: "lazy" }, props, { ref: ref }))));
|
|
113
70
|
});
|
|
114
71
|
const Image = function Image(_a) {
|
|
115
|
-
var { src, hasFalsySrc, lqip, sizes, srcset,
|
|
72
|
+
var { src, hasFalsySrc, lqip, sizes, srcset, critical, aspect, cover = false, alt = '', fillAvailableSpace = false, children, error: ErrorComp, className, badges, baseUrl, cfTransformer } = _a, rest = __rest(_a, ["src", "hasFalsySrc", "lqip", "sizes", "srcset", "critical", "aspect", "cover", "alt", "fillAvailableSpace", "children", "error", "className", "badges", "baseUrl", "cfTransformer"]);
|
|
116
73
|
// Set up the IntersectionObserver
|
|
117
74
|
const [ref, inView] = useInView({ triggerOnce: true });
|
|
118
75
|
// Check if the browser supports loading="lazy". In that case, we don't need
|
|
@@ -151,7 +108,6 @@ const Image = function Image(_a) {
|
|
|
151
108
|
const loaded = imgLoaded || hasFalsySrc || isCached;
|
|
152
109
|
const objectFit = cover || fillAvailableSpace ? 'cover' : 'contain';
|
|
153
110
|
const objectFitPolyfillStyles = { fontFamily: `"object-fit: ${objectFit}"` };
|
|
154
|
-
const type = getTypeByExtension(src);
|
|
155
111
|
return (React.createElement(React.Fragment, null,
|
|
156
112
|
React.createElement("div", Object.assign({ key: src, ref:
|
|
157
113
|
// If we have native lazyloading, by not applying the `ref` from
|
|
@@ -170,8 +126,7 @@ const Image = function Image(_a) {
|
|
|
170
126
|
error ? (React.createElement(ErrorComp, null)) : (React.createElement(React.Fragment, null,
|
|
171
127
|
React.createElement(Placeholder, { src: critical ? transparentDataImg : lqip || transparentDataImg, ref: placeholderRef, alt: "", "aria-hidden": "true", style: Object.assign({ objectFit, opacity: loaded ? 0 : 0.6, transitionDelay: `500ms` }, objectFitPolyfillStyles) }),
|
|
172
128
|
(inView || nativeLazyLoading || !hydrated || isCached) && (React.createElement("picture", { "data-flight-image": "" },
|
|
173
|
-
React.createElement("source", {
|
|
174
|
-
React.createElement("source", { type: type, srcSet: srcset, sizes: sizes }),
|
|
129
|
+
React.createElement("source", { srcSet: srcset, sizes: sizes }),
|
|
175
130
|
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, fetchpriority: critical ? 'high' : 'auto' }))),
|
|
176
131
|
React.createElement("noscript", null,
|
|
177
132
|
React.createElement("picture", null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseImage.js","sourceRoot":"","sources":["BaseImage.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAStE,MAAM,CAAC,MAAM,kBAAkB,GAC7B,oHAAoH,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseImage.js","sourceRoot":"","sources":["BaseImage.tsx"],"names":[],"mappings":"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"}
|
|
@@ -53,9 +53,9 @@ function FlightImage(props) {
|
|
|
53
53
|
focalPointX,
|
|
54
54
|
focalPointY
|
|
55
55
|
});
|
|
56
|
-
const { hasFalsySrc, lqip, sizes, sizesMobile, srcset, srcsetMobile,
|
|
56
|
+
const { hasFalsySrc, lqip, sizes, sizesMobile, srcset, srcsetMobile, src } = imageOptions;
|
|
57
57
|
// // https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>
|
|
58
|
-
return (React.createElement(Below, { breakpoint: 'sm' }, (matches) => (React.createElement(Image, Object.assign({}, rest, { cfTransformer: true, critical: critical, aspect: aspect, src: hasFalsySrc && typeof originalSrc === 'boolean' ? false : src, baseUrl: baseUrl, hasFalsySrc: hasFalsySrc, lqip: lqip, sizes: matches && useMobileImageSizes ? sizesMobile : sizes, srcset: matches && useMobileImageSizes ? srcsetMobile : srcset,
|
|
58
|
+
return (React.createElement(Below, { breakpoint: 'sm' }, (matches) => (React.createElement(Image, Object.assign({}, rest, { cfTransformer: true, critical: critical, aspect: aspect, src: hasFalsySrc && typeof originalSrc === 'boolean' ? false : src, baseUrl: baseUrl, hasFalsySrc: hasFalsySrc, lqip: lqip, sizes: matches && useMobileImageSizes ? sizesMobile : sizes, srcset: matches && useMobileImageSizes ? srcsetMobile : srcset, error: ErrorComp })))));
|
|
59
59
|
}
|
|
60
60
|
export default FlightImage;
|
|
61
61
|
//# sourceMappingURL=FlightImage.js.map
|
|
@@ -1 +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;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAQvC,MAAM,CAAC,MAAM,kBAAkB,GAC7B,oHAAoH,CAAC;AAoEvH,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,EACtB,mBAAmB,GAAG,KAAK,EAC5B,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,YAAY,GAAG,iBAAiB,CAAC;QACrC,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;IAEH,MAAM,EACJ,WAAW,EACX,IAAI,EACJ,KAAK,EACL,WAAW,EACX,MAAM,EACN,YAAY,EACZ,
|
|
1
|
+
{"version":3,"file":"FlightImage.js","sourceRoot":"","sources":["FlightImage.tsx"],"names":[],"mappings":"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"}
|
|
@@ -37,13 +37,11 @@ interface ImageParameters {
|
|
|
37
37
|
*/
|
|
38
38
|
export declare function useConstructImage({ gravity, crop, src, sizes, aspect, critical, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }: ImageParameters): {
|
|
39
39
|
srcset: string;
|
|
40
|
-
webpSrcset: string;
|
|
41
40
|
sizes: string;
|
|
42
41
|
sizesMobile: string;
|
|
43
42
|
lqip: string;
|
|
44
43
|
src: string;
|
|
45
44
|
hasFalsySrc: boolean;
|
|
46
45
|
srcsetMobile: string;
|
|
47
|
-
webpSrcsetMobile: string;
|
|
48
46
|
};
|
|
49
47
|
export {};
|
|
@@ -51,33 +51,24 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
|
|
|
51
51
|
imageSrc = getFullUrl(src.value, baseUrl);
|
|
52
52
|
}
|
|
53
53
|
// useMemo so this runs only if the image props change. It calculates the
|
|
54
|
-
// strings used for `sizes`, `srcset`, and the `lqip
|
|
55
|
-
|
|
54
|
+
// strings used for `sizes`, `srcset`, and the `lqip`. Single srcset per mode
|
|
55
|
+
// (desktop + mobile) — Cloudflare's `format=auto` content-negotiates AVIF /
|
|
56
|
+
// WebP / JPEG on the same URL, so no separate webp srcset is needed.
|
|
57
|
+
const { sizesMap, sizesMapMobile, srcset, lqip, srcsetMobile } = React.useMemo(() => {
|
|
56
58
|
if (hasFalsySrc) {
|
|
57
59
|
return {};
|
|
58
60
|
}
|
|
59
61
|
const widths = getImageWidths(breakpoints, sizes);
|
|
60
62
|
const mobileWidths = getImageWidths(breakpoints, sizes, true);
|
|
61
|
-
const
|
|
63
|
+
const imageOptions = {
|
|
62
64
|
crop,
|
|
63
65
|
gravity,
|
|
64
66
|
quality,
|
|
65
|
-
webp,
|
|
66
67
|
focalPointX,
|
|
67
68
|
focalPointY
|
|
68
|
-
}
|
|
69
|
-
const
|
|
70
|
-
|
|
71
|
-
gravity,
|
|
72
|
-
quality,
|
|
73
|
-
webp,
|
|
74
|
-
focalPointX,
|
|
75
|
-
focalPointY
|
|
76
|
-
}, modifiedDate, baseUrl);
|
|
77
|
-
const srcset = srcSetFromWidths({ webp: false });
|
|
78
|
-
const webpSrcset = srcSetFromWidths({ webp: true });
|
|
79
|
-
const srcsetMobile = mobileSrcSetFromWidths({ webp: false });
|
|
80
|
-
const webpSrcsetMobile = mobileSrcSetFromWidths({ webp: true });
|
|
69
|
+
};
|
|
70
|
+
const srcset = getSrcSetFromWidths(imageSrc, widths, aspect, imageOptions, modifiedDate, baseUrl);
|
|
71
|
+
const srcsetMobile = getSrcSetFromWidths(imageSrc, mobileWidths, aspect, imageOptions, modifiedDate, baseUrl);
|
|
81
72
|
// If this is a critical image, don't calculate LQIP
|
|
82
73
|
const lqip = critical
|
|
83
74
|
? null
|
|
@@ -89,9 +80,7 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
|
|
|
89
80
|
sizesMapMobile,
|
|
90
81
|
srcset,
|
|
91
82
|
lqip,
|
|
92
|
-
|
|
93
|
-
srcsetMobile,
|
|
94
|
-
webpSrcsetMobile
|
|
83
|
+
srcsetMobile
|
|
95
84
|
};
|
|
96
85
|
}, [
|
|
97
86
|
aspect,
|
|
@@ -109,14 +98,12 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
|
|
|
109
98
|
]);
|
|
110
99
|
return {
|
|
111
100
|
srcset,
|
|
112
|
-
webpSrcset,
|
|
113
101
|
sizes: sizesMap,
|
|
114
102
|
sizesMobile: sizesMapMobile,
|
|
115
103
|
lqip,
|
|
116
104
|
src: imageSrc,
|
|
117
105
|
hasFalsySrc,
|
|
118
|
-
srcsetMobile
|
|
119
|
-
webpSrcsetMobile
|
|
106
|
+
srcsetMobile
|
|
120
107
|
};
|
|
121
108
|
}
|
|
122
109
|
//# sourceMappingURL=useConstructImage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useConstructImage.js","sourceRoot":"","sources":["useConstructImage.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAsC1B;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,OAAO,EACP,IAAI,EACJ,GAAG,EACH,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,WAAW,EACX,OAAO,EACP,WAAW,EACX,WAAW,EACK;IAChB,gDAAgD;IAChD,eAAe,CACb,OAAO,IAAI,CAAC,IAAI,EAChB,qKAAqK,CACtK,CAAC;IACF,mCAAmC;IACnC,eAAe,CACb,CAAC,CAAC,CAAC,GAAG,EACN,sNAAsN,CACvN,CAAC;IAEF;;;;;;;;;;;;;;;;;;MAkBE;IACF,IAAI,WAAW,GAAG,IAAI,CAAC;IACvB,IAAI,QAAQ,GAAG,EAAE,CAAC;IAClB,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;QACtB,oDAAoD;QACpD,WAAW,GAAG,KAAK,CAAC;QACpB,QAAQ,GAAG,UAAU,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC;KACrD;IACD,oCAAoC;IACpC,IAAI,CAAC,CAAC,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;QACpC,WAAW,GAAG,KAAK,CAAC;QACpB,QAAQ,GAAG,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;KACrC;IACD,IAAI,CAAC,CAAC,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAK,GAAkB,CAAC,KAAK,EAAE;QACjE,WAAW,GAAG,KAAK,CAAC;QACpB,QAAQ,GAAG,UAAU,CAAE,GAAkB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;KAC3D;IACD,yEAAyE;IACzE,
|
|
1
|
+
{"version":3,"file":"useConstructImage.js","sourceRoot":"","sources":["useConstructImage.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAsC1B;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,OAAO,EACP,IAAI,EACJ,GAAG,EACH,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,WAAW,EACX,OAAO,EACP,WAAW,EACX,WAAW,EACK;IAChB,gDAAgD;IAChD,eAAe,CACb,OAAO,IAAI,CAAC,IAAI,EAChB,qKAAqK,CACtK,CAAC;IACF,mCAAmC;IACnC,eAAe,CACb,CAAC,CAAC,CAAC,GAAG,EACN,sNAAsN,CACvN,CAAC;IAEF;;;;;;;;;;;;;;;;;;MAkBE;IACF,IAAI,WAAW,GAAG,IAAI,CAAC;IACvB,IAAI,QAAQ,GAAG,EAAE,CAAC;IAClB,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;QACtB,oDAAoD;QACpD,WAAW,GAAG,KAAK,CAAC;QACpB,QAAQ,GAAG,UAAU,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC;KACrD;IACD,oCAAoC;IACpC,IAAI,CAAC,CAAC,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;QACpC,WAAW,GAAG,KAAK,CAAC;QACpB,QAAQ,GAAG,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;KACrC;IACD,IAAI,CAAC,CAAC,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAK,GAAkB,CAAC,KAAK,EAAE;QACjE,WAAW,GAAG,KAAK,CAAC;QACpB,QAAQ,GAAG,UAAU,CAAE,GAAkB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;KAC3D;IACD,yEAAyE;IACzE,6EAA6E;IAC7E,4EAA4E;IAC5E,qEAAqE;IACrE,MAAM,EACJ,QAAQ,EACR,cAAc,EACd,MAAM,EACN,IAAI,EACJ,YAAY,EACb,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrB,IAAI,WAAW,EAAE;YACf,OAAO,EAAE,CAAC;SACX;QACD,MAAM,MAAM,GAAG,cAAc,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QAClD,MAAM,YAAY,GAAG,cAAc,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;QAE9D,MAAM,YAAY,GAAG;YACnB,IAAI;YACJ,OAAO;YACP,OAAO;YACP,WAAW;YACX,WAAW;SACZ,CAAC;QAEF,MAAM,MAAM,GAAG,mBAAmB,CAChC,QAAQ,EACR,MAAM,EACN,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,OAAO,CACR,CAAC;QACF,MAAM,YAAY,GAAG,mBAAmB,CACtC,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,OAAO,CACR,CAAC;QAEF,oDAAoD;QACpD,MAAM,IAAI,GAAG,QAAQ;YACnB,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC;QAEnE,MAAM,QAAQ,GAAG,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QACjD,MAAM,cAAc,GAAG,WAAW,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;QAE7D,OAAO;YACL,QAAQ;YACR,cAAc;YACd,MAAM;YACN,IAAI;YACJ,YAAY;SACb,CAAC;IACJ,CAAC,EAAE;QACD,MAAM;QACN,WAAW;QACX,IAAI;QACJ,OAAO;QACP,WAAW;QACX,QAAQ;QACR,OAAO;QACP,KAAK;QACL,QAAQ;QACR,YAAY;QACZ,WAAW;QACX,WAAW;KACZ,CAAC,CAAC;IACH,OAAO;QACL,MAAM;QACN,KAAK,EAAE,QAAQ;QACf,WAAW,EAAE,cAAc;QAC3B,IAAI;QACJ,GAAG,EAAE,QAAQ;QACb,WAAW;QACX,YAAY;KACb,CAAC;AACJ,CAAC"}
|
|
@@ -1,6 +1,21 @@
|
|
|
1
1
|
import { getImageWidth } from './getImageWidth';
|
|
2
2
|
import { remToPx } from './remToPx';
|
|
3
3
|
import { getSizeForBreakpoint } from './getSizeForBreakpoint';
|
|
4
|
+
// Snap responsive widths up to this ladder so srcsets from different
|
|
5
|
+
// (breakpoint × DPR × sizes-fraction) products collapse onto a shared finite
|
|
6
|
+
// set of URLs. Snap-up (not nearest) guarantees the served image is at least
|
|
7
|
+
// the requested width — no quality regression, at the cost of some bandwidth
|
|
8
|
+
// on widths that fall just above a rung. Fixed-pixel `sizes` (e.g.
|
|
9
|
+
// sizes={[200]} for a logo) bypass the ladder; their literal pixel intent is
|
|
10
|
+
// preserved.
|
|
11
|
+
const WIDTH_LADDER = [160, 320, 640, 960, 1280, 1600, 2560];
|
|
12
|
+
function snapToLadder(width) {
|
|
13
|
+
for (const rung of WIDTH_LADDER) {
|
|
14
|
+
if (width <= rung)
|
|
15
|
+
return rung;
|
|
16
|
+
}
|
|
17
|
+
return WIDTH_LADDER[WIDTH_LADDER.length - 1];
|
|
18
|
+
}
|
|
4
19
|
export const getImageWidths = (breakpoints, sizes, mobile = false) => {
|
|
5
20
|
const all = new Set();
|
|
6
21
|
const breakpointArray = Object.entries(breakpoints).map(([key, value]) => ({
|
|
@@ -10,8 +25,14 @@ export const getImageWidths = (breakpoints, sizes, mobile = false) => {
|
|
|
10
25
|
for (let i = 0; i < breakpointArray.length; i++) {
|
|
11
26
|
const bpSize = getSizeForBreakpoint(sizes, i);
|
|
12
27
|
const px = remToPx(breakpointArray[i].value);
|
|
13
|
-
|
|
14
|
-
|
|
28
|
+
const w1 = getImageWidth(bpSize, px, 1);
|
|
29
|
+
const w2 = getImageWidth(bpSize, px, 2);
|
|
30
|
+
// bpSize > 2 means a literal pixel size (sizeToNumber leaves px values
|
|
31
|
+
// unchanged above 2 and returns fractions for ≤ 2). Pass those through
|
|
32
|
+
// verbatim so explicit pixel intents aren't inflated to the ladder.
|
|
33
|
+
const isFixed = bpSize > 2;
|
|
34
|
+
all.add(isFixed ? w1 : snapToLadder(w1));
|
|
35
|
+
all.add(isFixed ? w2 : snapToLadder(w2));
|
|
15
36
|
if (mobile && breakpointArray[i].key === 'sm') {
|
|
16
37
|
break;
|
|
17
38
|
}
|
|
@@ -1 +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;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,
|
|
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;AAG9D,qEAAqE;AACrE,6EAA6E;AAC7E,6EAA6E;AAC7E,6EAA6E;AAC7E,mEAAmE;AACnE,6EAA6E;AAC7E,aAAa;AACb,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAErE,SAAS,YAAY,CAAC,KAAa;IACjC,KAAK,MAAM,IAAI,IAAI,YAAY,EAAE;QAC/B,IAAI,KAAK,IAAI,IAAI;YAAE,OAAO,IAAI,CAAC;KAChC;IACD,OAAO,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AAC/C,CAAC;AAED,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,MAAM,EAAE,GAAG,aAAa,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;QACxC,MAAM,EAAE,GAAG,aAAa,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;QAExC,uEAAuE;QACvE,uEAAuE;QACvE,oEAAoE;QACpE,MAAM,OAAO,GAAG,MAAM,GAAG,CAAC,CAAC;QAC3B,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC;QACzC,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC;QAEzC,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"}
|
|
@@ -17,12 +17,13 @@ export function getLQIP(src, widths, aspect, crop = false, modifiedDate, baseUrl
|
|
|
17
17
|
// the same perceptual range and lets the
|
|
18
18
|
// blurred result compress dramatically)
|
|
19
19
|
// quality=30 → quality=30 (passed through createSrcWithProperties)
|
|
20
|
-
// type=auto → format=auto (
|
|
20
|
+
// type=auto → format=auto (emitted by createSrcWithProperties; serves
|
|
21
|
+
// AVIF/WebP placeholders where supported)
|
|
21
22
|
const prop = createSrcWithProperties(smallestWidth, aspect, src, false, {
|
|
22
23
|
crop,
|
|
23
24
|
quality: 30
|
|
24
25
|
});
|
|
25
|
-
const finalSrc = `${baseUrl}/cdn-cgi/image/${prop},blur=50
|
|
26
|
+
const finalSrc = `${baseUrl}/cdn-cgi/image/${prop},blur=50/${src}${modifiedDate ? `?timestamp=${modifiedDate}` : ''}`;
|
|
26
27
|
return finalSrc;
|
|
27
28
|
}
|
|
28
29
|
//# sourceMappingURL=getLQIP.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getLQIP.js","sourceRoot":"","sources":["getLQIP.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAE7D;;;;;;GAMG;AACH,MAAM,UAAU,OAAO,CACrB,GAAW,EACX,MAAgB,EAChB,MAAc,EACd,IAAI,GAAG,KAAK,EACZ,YAAoB,EACpB,OAAe;IAEf,MAAM,WAAW,GACf,oHAAoH,CAAC;IACvH,IAAI,CAAC,GAAG;QAAE,OAAO,WAAW,CAAC;IAE7B,6FAA6F;IAC7F,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtD,+CAA+C;IAC/C,yFAAyF;IACzF,wFAAwF;IACxF,uFAAuF;IACvF,wFAAwF;IACxF,
|
|
1
|
+
{"version":3,"file":"getLQIP.js","sourceRoot":"","sources":["getLQIP.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAE7D;;;;;;GAMG;AACH,MAAM,UAAU,OAAO,CACrB,GAAW,EACX,MAAgB,EAChB,MAAc,EACd,IAAI,GAAG,KAAK,EACZ,YAAoB,EACpB,OAAe;IAEf,MAAM,WAAW,GACf,oHAAoH,CAAC;IACvH,IAAI,CAAC,GAAG;QAAE,OAAO,WAAW,CAAC;IAE7B,6FAA6F;IAC7F,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtD,+CAA+C;IAC/C,yFAAyF;IACzF,wFAAwF;IACxF,uFAAuF;IACvF,wFAAwF;IACxF,2FAA2F;IAC3F,yFAAyF;IACzF,MAAM,IAAI,GAAG,uBAAuB,CAAC,aAAa,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE;QACtE,IAAI;QACJ,OAAO,EAAE,EAAE;KACZ,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,GAAG,OAAO,kBAAkB,IAAI,YAAY,GAAG,GAC9D,YAAY,CAAC,CAAC,CAAC,cAAc,YAAY,EAAE,CAAC,CAAC,CAAC,EAChD,EAAE,CAAC;IAEH,OAAO,QAAQ,CAAC;AAClB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createSrcWithProperties } from './getSrcWithParams';
|
|
2
|
-
export const getSrcSetFromWidths = (src, widths, aspect, options = { crop: false
|
|
2
|
+
export const getSrcSetFromWidths = (src, widths, aspect, options = { crop: false }, modifiedDate, baseUrl) => {
|
|
3
3
|
const p = [];
|
|
4
4
|
for (const w of widths) {
|
|
5
5
|
const prop = createSrcWithProperties(w, aspect, src, true, options, modifiedDate);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getSrcSetFromWidths.js","sourceRoot":"","sources":["getSrcSetFromWidths.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"getSrcSetFromWidths.js","sourceRoot":"","sources":["getSrcSetFromWidths.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAU7D,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,GAAW,EACX,MAAgB,EAChB,MAAmB,EACnB,UAA6B,EAAE,IAAI,EAAE,KAAK,EAAE,EAC5C,YAAqB,EACrB,OAAgB,EAChB,EAAE;IACF,MAAM,CAAC,GAAG,EAAE,CAAC;IAEb,KAAK,MAAM,CAAC,IAAI,MAAM,EAAE;QACtB,MAAM,IAAI,GAAG,uBAAuB,CAClC,CAAC,EACD,MAAM,EACN,GAAG,EACH,IAAI,EACJ,OAAO,EACP,YAAY,CACb,CAAC;QACF,CAAC,CAAC,IAAI,CACJ,GAAG,OAAO,kBAAkB,IAAI,IAAI,GAAG,GACrC,YAAY,CAAC,CAAC,CAAC,cAAc,YAAY,EAAE,CAAC,CAAC,CAAC,EAChD,IAAI,CAAC,GAAG,CACT,CAAC;KACH;IAED,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACtB,CAAC,CAAC"}
|
|
@@ -15,23 +15,25 @@ export function createSrcWithProperties(width, aspect,
|
|
|
15
15
|
// @ts-ignore
|
|
16
16
|
src,
|
|
17
17
|
// @ts-ignore
|
|
18
|
-
includeViewportSize = true, options = { crop: false
|
|
18
|
+
includeViewportSize = true, options = { crop: false },
|
|
19
19
|
// @ts-ignore
|
|
20
20
|
timestamp) {
|
|
21
|
-
//
|
|
22
|
-
// `
|
|
23
|
-
//
|
|
24
|
-
//
|
|
21
|
+
// fit=cover when the caller opts into crop, fit=contain otherwise — mirrors
|
|
22
|
+
// the Akamai port's `options.crop ? 'crop' : 'fit'` toggle. Cloudflare has
|
|
23
|
+
// no analogue of Akamai's edge-pixel-sampling `extend=copy`; for
|
|
24
|
+
// non-transparent JPEGs, CF's contain mode pads white, which matches
|
|
25
|
+
// Akamai's behavior on white-background product photography.
|
|
26
|
+
const fit = options.crop ? 'cover' : 'contain';
|
|
25
27
|
const quality = options.quality;
|
|
26
28
|
const height = aspect
|
|
27
29
|
? Math.round(width * aspectRatioToFraction(aspect))
|
|
28
30
|
: null;
|
|
29
31
|
const properties = [];
|
|
30
32
|
if (height) {
|
|
31
|
-
properties.push(`width=${width},height=${height},fit
|
|
33
|
+
properties.push(`width=${width},height=${height},fit=${fit}`);
|
|
32
34
|
}
|
|
33
35
|
else {
|
|
34
|
-
properties.push(`width=${width},fit
|
|
36
|
+
properties.push(`width=${width},fit=${fit}`);
|
|
35
37
|
}
|
|
36
38
|
// Gravity (and focal-point override) only meaningful when aspect-driven height is
|
|
37
39
|
// set — mirrors Akamai's helper. Focal points trump the keyword since Cloudflare
|
|
@@ -50,9 +52,12 @@ timestamp) {
|
|
|
50
52
|
if (quality) {
|
|
51
53
|
properties.push(`quality=${quality}`);
|
|
52
54
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
55
|
+
// `format=auto` lets Cloudflare content-negotiate AVIF/WebP/JPEG per the request's
|
|
56
|
+
// Accept header. Counts as one billable transformation regardless of which output
|
|
57
|
+
// format is served (per developers.cloudflare.com/images/pricing). On URL
|
|
58
|
+
// transformations, CF preserves the source format unless `format` is explicitly
|
|
59
|
+
// set — auto is load-bearing, not decorative.
|
|
60
|
+
properties.push('format=auto');
|
|
56
61
|
return properties.toString();
|
|
57
62
|
}
|
|
58
63
|
//# sourceMappingURL=getSrcWithParams.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getSrcWithParams.js","sourceRoot":"","sources":["getSrcWithParams.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAIhE,uEAAuE;AAEvE,uDAAuD;AACvD,sFAAsF;AACtF,wDAAwD;AACxD,MAAM,WAAW,GAA4B;IAC3C,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,UAAU,uBAAuB,CACrC,KAAa,EACb,MAAmB;AACnB,aAAa;AACb,GAAW;AACX,aAAa;AACb,mBAAmB,GAAG,IAAI,EAC1B,UAA6B,EAAE,IAAI,EAAE,KAAK,EAAE
|
|
1
|
+
{"version":3,"file":"getSrcWithParams.js","sourceRoot":"","sources":["getSrcWithParams.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAIhE,uEAAuE;AAEvE,uDAAuD;AACvD,sFAAsF;AACtF,wDAAwD;AACxD,MAAM,WAAW,GAA4B;IAC3C,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,UAAU,uBAAuB,CACrC,KAAa,EACb,MAAmB;AACnB,aAAa;AACb,GAAW;AACX,aAAa;AACb,mBAAmB,GAAG,IAAI,EAC1B,UAA6B,EAAE,IAAI,EAAE,KAAK,EAAE;AAC5C,aAAa;AACb,SAAkB;IAElB,4EAA4E;IAC5E,2EAA2E;IAC3E,iEAAiE;IACjE,qEAAqE;IACrE,6DAA6D;IAC7D,MAAM,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/C,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IAChC,MAAM,MAAM,GAAG,MAAM;QACnB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC;QACnD,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,UAAU,GAAG,EAAE,CAAC;IAEtB,IAAI,MAAM,EAAE;QACV,UAAU,CAAC,IAAI,CAAC,SAAS,KAAK,WAAW,MAAM,QAAQ,GAAG,EAAE,CAAC,CAAC;KAC/D;SAAM;QACL,UAAU,CAAC,IAAI,CAAC,SAAS,KAAK,QAAQ,GAAG,EAAE,CAAC,CAAC;KAC9C;IAED,kFAAkF;IAClF,iFAAiF;IACjF,gFAAgF;IAChF,4BAA4B;IAC5B,IAAI,MAAM,EAAE;QACV,IAAI,OAAO,CAAC,WAAW,IAAI,OAAO,CAAC,WAAW,EAAE;YAC9C,UAAU,CAAC,IAAI,CACb,WAAW,OAAO,CAAC,WAAW,IAAI,OAAO,CAAC,WAAW,EAAE,CACxD,CAAC;SACH;aAAM,IAAI,OAAO,CAAC,OAAO,EAAE;YAC1B,UAAU,CAAC,IAAI,CAAC,WAAW,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;SAC5D;KACF;IAED,mFAAmF;IACnF,oFAAoF;IACpF,IAAI,OAAO,EAAE;QACX,UAAU,CAAC,IAAI,CAAC,WAAW,OAAO,EAAE,CAAC,CAAC;KACvC;IAED,mFAAmF;IACnF,kFAAkF;IAClF,0EAA0E;IAC1E,gFAAgF;IAChF,8CAA8C;IAC9C,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAE/B,OAAO,UAAU,CAAC,QAAQ,EAAE,CAAC;AAC/B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jetshop/ui",
|
|
3
|
-
"version": "6.5.
|
|
3
|
+
"version": "6.5.5-alpha.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"files": [
|
|
6
6
|
"**/*.js",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"react": "^18",
|
|
62
62
|
"react-dom": "^18"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "85ff1dce21c3e9080bfdfda487f0abe186da4c5f"
|
|
65
65
|
}
|