react-datocms 3.0.11 → 3.0.12

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.
Files changed (17) hide show
  1. package/package.json +3 -2
  2. package/src/Image/__tests__/__snapshots__/index.test.tsx.snap +948 -0
  3. package/src/Image/__tests__/index.test.tsx +62 -0
  4. package/src/Image/index.tsx +294 -0
  5. package/src/Seo/__tests__/__snapshots__/index.test.tsx.snap +249 -0
  6. package/src/Seo/__tests__/index.test.tsx +309 -0
  7. package/src/Seo/index.ts +4 -0
  8. package/src/Seo/remixUtils.ts +34 -0
  9. package/src/Seo/renderMetaTags.tsx +32 -0
  10. package/src/Seo/renderMetaTagsToString.tsx +21 -0
  11. package/src/Seo/types.tsx +54 -0
  12. package/src/StructuredText/__tests__/__snapshots__/index.test.tsx.snap +331 -0
  13. package/src/StructuredText/__tests__/index.test.tsx +271 -0
  14. package/src/StructuredText/index.tsx +244 -0
  15. package/src/index.ts +4 -0
  16. package/src/setupTests.ts +6 -0
  17. package/src/useQuerySubscription/index.ts +89 -0
package/src/Image/__tests__/__snapshots__/index.test.tsx.snap ADDED
@@ -0,0 +1,948 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Image layout=fill not visible renders the blur-up thumb 1`] = `
4
+ <ForwardRef
5
+ data={
6
+ Object {
7
+ "alt": "DatoCMS swag",
8
+ "aspectRatio": 1.7777777777777777,
9
+ "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
10
+ "height": 421,
11
+ "sizes": "(max-width: 750px) 100vw, 750px",
12
+ "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
13
+ "srcSet": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w",
14
+ "title": "These are awesome, we know that.",
15
+ "width": 750,
16
+ }
17
+ }
18
+ intersectionThreshold={0.1}
19
+ layout="fill"
20
+ >
21
+ <div
22
+ style={
23
+ Object {
24
+ "height": "100%",
25
+ "left": 0,
26
+ "overflow": "hidden",
27
+ "position": "absolute",
28
+ "top": 0,
29
+ "width": "100%",
30
+ }
31
+ }
32
+ >
33
+ <img
34
+ alt=""
35
+ aria-hidden="true"
36
+ role="presentation"
37
+ src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
38
+ style={
39
+ Object {
40
+ "backgroundColor": undefined,
41
+ "left": 0,
42
+ "objectFit": undefined,
43
+ "objectPosition": undefined,
44
+ "opacity": 1,
45
+ "position": "absolute",
46
+ "top": 0,
47
+ "transition": "opacity 500ms",
48
+ "width": "100%",
49
+ }
50
+ }
51
+ />
52
+ <noscript>
53
+ <picture />
54
+ </noscript>
55
+ </div>
56
+ </ForwardRef>
57
+ `;
58
+
59
+ exports[`Image layout=fill visible image loaded shows the image 1`] = `
60
+ <ForwardRef
61
+ data={
62
+ Object {
63
+ "alt": "DatoCMS swag",
64
+ "aspectRatio": 1.7777777777777777,
65
+ "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
66
+ "height": 421,
67
+ "sizes": "(max-width: 750px) 100vw, 750px",
68
+ "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
69
+ "srcSet": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w",
70
+ "title": "These are awesome, we know that.",
71
+ "width": 750,
72
+ }
73
+ }
74
+ intersectionThreshold={0.3}
75
+ layout="fill"
76
+ >
77
+ <div
78
+ style={
79
+ Object {
80
+ "height": "100%",
81
+ "left": 0,
82
+ "overflow": "hidden",
83
+ "position": "absolute",
84
+ "top": 0,
85
+ "width": "100%",
86
+ }
87
+ }
88
+ >
89
+ <img
90
+ alt=""
91
+ aria-hidden="true"
92
+ role="presentation"
93
+ src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
94
+ style={
95
+ Object {
96
+ "backgroundColor": undefined,
97
+ "left": 0,
98
+ "objectFit": undefined,
99
+ "objectPosition": undefined,
100
+ "opacity": 0,
101
+ "position": "absolute",
102
+ "top": 0,
103
+ "transition": "opacity 500ms",
104
+ "width": "100%",
105
+ }
106
+ }
107
+ />
108
+ <picture>
109
+ <source
110
+ sizes="(max-width: 750px) 100vw, 750px"
111
+ srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w"
112
+ />
113
+ <img
114
+ alt="DatoCMS swag"
115
+ onLoad={[Function]}
116
+ src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
117
+ style={
118
+ Object {
119
+ "height": "100%",
120
+ "left": 0,
121
+ "objectFit": undefined,
122
+ "objectPosition": undefined,
123
+ "opacity": 1,
124
+ "position": "absolute",
125
+ "top": 0,
126
+ "transition": "opacity 500ms",
127
+ "width": "100%",
128
+ }
129
+ }
130
+ title="These are awesome, we know that."
131
+ />
132
+ </picture>
133
+ <noscript>
134
+ <picture />
135
+ </noscript>
136
+ </div>
137
+ </ForwardRef>
138
+ `;
139
+
140
+ exports[`Image layout=fill visible renders the image 1`] = `
141
+ <ForwardRef
142
+ data={
143
+ Object {
144
+ "alt": "DatoCMS swag",
145
+ "aspectRatio": 1.7777777777777777,
146
+ "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
147
+ "height": 421,
148
+ "sizes": "(max-width: 750px) 100vw, 750px",
149
+ "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
150
+ "srcSet": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w",
151
+ "title": "These are awesome, we know that.",
152
+ "width": 750,
153
+ }
154
+ }
155
+ intersectionThreshold={0.2}
156
+ layout="fill"
157
+ >
158
+ <div
159
+ style={
160
+ Object {
161
+ "height": "100%",
162
+ "left": 0,
163
+ "overflow": "hidden",
164
+ "position": "absolute",
165
+ "top": 0,
166
+ "width": "100%",
167
+ }
168
+ }
169
+ >
170
+ <img
171
+ alt=""
172
+ aria-hidden="true"
173
+ role="presentation"
174
+ src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
175
+ style={
176
+ Object {
177
+ "backgroundColor": undefined,
178
+ "left": 0,
179
+ "objectFit": undefined,
180
+ "objectPosition": undefined,
181
+ "opacity": 1,
182
+ "position": "absolute",
183
+ "top": 0,
184
+ "transition": "opacity 500ms",
185
+ "width": "100%",
186
+ }
187
+ }
188
+ />
189
+ <picture>
190
+ <source
191
+ sizes="(max-width: 750px) 100vw, 750px"
192
+ srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w"
193
+ />
194
+ <img
195
+ alt="DatoCMS swag"
196
+ onLoad={[Function]}
197
+ src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
198
+ style={
199
+ Object {
200
+ "height": "100%",
201
+ "left": 0,
202
+ "objectFit": undefined,
203
+ "objectPosition": undefined,
204
+ "opacity": 0,
205
+ "position": "absolute",
206
+ "top": 0,
207
+ "transition": "opacity 500ms",
208
+ "width": "100%",
209
+ }
210
+ }
211
+ title="These are awesome, we know that."
212
+ />
213
+ </picture>
214
+ <noscript>
215
+ <picture />
216
+ </noscript>
217
+ </div>
218
+ </ForwardRef>
219
+ `;
220
+
221
+ exports[`Image layout=fixed not visible renders the blur-up thumb 1`] = `
222
+ <ForwardRef
223
+ data={
224
+ Object {
225
+ "alt": "DatoCMS swag",
226
+ "aspectRatio": 1.7777777777777777,
227
+ "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
228
+ "height": 421,
229
+ "sizes": "(max-width: 750px) 100vw, 750px",
230
+ "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
231
+ "srcSet": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w",
232
+ "title": "These are awesome, we know that.",
233
+ "width": 750,
234
+ }
235
+ }
236
+ intersectionThreshold={0.1}
237
+ layout="fixed"
238
+ >
239
+ <div
240
+ style={
241
+ Object {
242
+ "overflow": "hidden",
243
+ "position": "relative",
244
+ "width": 750,
245
+ }
246
+ }
247
+ >
248
+ <img
249
+ alt=""
250
+ aria-hidden="true"
251
+ src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
252
+ style={
253
+ Object {
254
+ "display": "block",
255
+ "width": "100%",
256
+ }
257
+ }
258
+ />
259
+ <img
260
+ alt=""
261
+ aria-hidden="true"
262
+ role="presentation"
263
+ src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
264
+ style={
265
+ Object {
266
+ "backgroundColor": undefined,
267
+ "left": 0,
268
+ "objectFit": undefined,
269
+ "objectPosition": undefined,
270
+ "opacity": 1,
271
+ "position": "absolute",
272
+ "top": 0,
273
+ "transition": "opacity 500ms",
274
+ "width": "100%",
275
+ }
276
+ }
277
+ />
278
+ <noscript>
279
+ <picture />
280
+ </noscript>
281
+ </div>
282
+ </ForwardRef>
283
+ `;
284
+
285
+ exports[`Image layout=fixed visible image loaded shows the image 1`] = `
286
+ <ForwardRef
287
+ data={
288
+ Object {
289
+ "alt": "DatoCMS swag",
290
+ "aspectRatio": 1.7777777777777777,
291
+ "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
292
+ "height": 421,
293
+ "sizes": "(max-width: 750px) 100vw, 750px",
294
+ "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
295
+ "srcSet": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w",
296
+ "title": "These are awesome, we know that.",
297
+ "width": 750,
298
+ }
299
+ }
300
+ intersectionThreshold={0.3}
301
+ layout="fixed"
302
+ >
303
+ <div
304
+ style={
305
+ Object {
306
+ "overflow": "hidden",
307
+ "position": "relative",
308
+ "width": 750,
309
+ }
310
+ }
311
+ >
312
+ <img
313
+ alt=""
314
+ aria-hidden="true"
315
+ src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
316
+ style={
317
+ Object {
318
+ "display": "block",
319
+ "width": "100%",
320
+ }
321
+ }
322
+ />
323
+ <img
324
+ alt=""
325
+ aria-hidden="true"
326
+ role="presentation"
327
+ src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
328
+ style={
329
+ Object {
330
+ "backgroundColor": undefined,
331
+ "left": 0,
332
+ "objectFit": undefined,
333
+ "objectPosition": undefined,
334
+ "opacity": 0,
335
+ "position": "absolute",
336
+ "top": 0,
337
+ "transition": "opacity 500ms",
338
+ "width": "100%",
339
+ }
340
+ }
341
+ />
342
+ <picture>
343
+ <source
344
+ sizes="(max-width: 750px) 100vw, 750px"
345
+ srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w"
346
+ />
347
+ <img
348
+ alt="DatoCMS swag"
349
+ onLoad={[Function]}
350
+ src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
351
+ style={
352
+ Object {
353
+ "height": "100%",
354
+ "left": 0,
355
+ "objectFit": undefined,
356
+ "objectPosition": undefined,
357
+ "opacity": 1,
358
+ "position": "absolute",
359
+ "top": 0,
360
+ "transition": "opacity 500ms",
361
+ "width": "100%",
362
+ }
363
+ }
364
+ title="These are awesome, we know that."
365
+ />
366
+ </picture>
367
+ <noscript>
368
+ <picture />
369
+ </noscript>
370
+ </div>
371
+ </ForwardRef>
372
+ `;
373
+
374
+ exports[`Image layout=fixed visible renders the image 1`] = `
375
+ <ForwardRef
376
+ data={
377
+ Object {
378
+ "alt": "DatoCMS swag",
379
+ "aspectRatio": 1.7777777777777777,
380
+ "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
381
+ "height": 421,
382
+ "sizes": "(max-width: 750px) 100vw, 750px",
383
+ "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
384
+ "srcSet": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w",
385
+ "title": "These are awesome, we know that.",
386
+ "width": 750,
387
+ }
388
+ }
389
+ intersectionThreshold={0.2}
390
+ layout="fixed"
391
+ >
392
+ <div
393
+ style={
394
+ Object {
395
+ "overflow": "hidden",
396
+ "position": "relative",
397
+ "width": 750,
398
+ }
399
+ }
400
+ >
401
+ <img
402
+ alt=""
403
+ aria-hidden="true"
404
+ src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
405
+ style={
406
+ Object {
407
+ "display": "block",
408
+ "width": "100%",
409
+ }
410
+ }
411
+ />
412
+ <img
413
+ alt=""
414
+ aria-hidden="true"
415
+ role="presentation"
416
+ src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
417
+ style={
418
+ Object {
419
+ "backgroundColor": undefined,
420
+ "left": 0,
421
+ "objectFit": undefined,
422
+ "objectPosition": undefined,
423
+ "opacity": 1,
424
+ "position": "absolute",
425
+ "top": 0,
426
+ "transition": "opacity 500ms",
427
+ "width": "100%",
428
+ }
429
+ }
430
+ />
431
+ <picture>
432
+ <source
433
+ sizes="(max-width: 750px) 100vw, 750px"
434
+ srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w"
435
+ />
436
+ <img
437
+ alt="DatoCMS swag"
438
+ onLoad={[Function]}
439
+ src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
440
+ style={
441
+ Object {
442
+ "height": "100%",
443
+ "left": 0,
444
+ "objectFit": undefined,
445
+ "objectPosition": undefined,
446
+ "opacity": 0,
447
+ "position": "absolute",
448
+ "top": 0,
449
+ "transition": "opacity 500ms",
450
+ "width": "100%",
451
+ }
452
+ }
453
+ title="These are awesome, we know that."
454
+ />
455
+ </picture>
456
+ <noscript>
457
+ <picture />
458
+ </noscript>
459
+ </div>
460
+ </ForwardRef>
461
+ `;
462
+
463
+ exports[`Image layout=intrinsic not visible renders the blur-up thumb 1`] = `
464
+ <ForwardRef
465
+ data={
466
+ Object {
467
+ "alt": "DatoCMS swag",
468
+ "aspectRatio": 1.7777777777777777,
469
+ "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
470
+ "height": 421,
471
+ "sizes": "(max-width: 750px) 100vw, 750px",
472
+ "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
473
+ "srcSet": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w",
474
+ "title": "These are awesome, we know that.",
475
+ "width": 750,
476
+ }
477
+ }
478
+ intersectionThreshold={0.1}
479
+ layout="intrinsic"
480
+ >
481
+ <div
482
+ style={
483
+ Object {
484
+ "maxWidth": 750,
485
+ "overflow": "hidden",
486
+ "position": "relative",
487
+ "width": "100%",
488
+ }
489
+ }
490
+ >
491
+ <img
492
+ alt=""
493
+ aria-hidden="true"
494
+ src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
495
+ style={
496
+ Object {
497
+ "display": "block",
498
+ "width": "100%",
499
+ }
500
+ }
501
+ />
502
+ <img
503
+ alt=""
504
+ aria-hidden="true"
505
+ role="presentation"
506
+ src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
507
+ style={
508
+ Object {
509
+ "backgroundColor": undefined,
510
+ "left": 0,
511
+ "objectFit": undefined,
512
+ "objectPosition": undefined,
513
+ "opacity": 1,
514
+ "position": "absolute",
515
+ "top": 0,
516
+ "transition": "opacity 500ms",
517
+ "width": "100%",
518
+ }
519
+ }
520
+ />
521
+ <noscript>
522
+ <picture />
523
+ </noscript>
524
+ </div>
525
+ </ForwardRef>
526
+ `;
527
+
528
+ exports[`Image layout=intrinsic visible image loaded shows the image 1`] = `
529
+ <ForwardRef
530
+ data={
531
+ Object {
532
+ "alt": "DatoCMS swag",
533
+ "aspectRatio": 1.7777777777777777,
534
+ "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
535
+ "height": 421,
536
+ "sizes": "(max-width: 750px) 100vw, 750px",
537
+ "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
538
+ "srcSet": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w",
539
+ "title": "These are awesome, we know that.",
540
+ "width": 750,
541
+ }
542
+ }
543
+ intersectionThreshold={0.3}
544
+ layout="intrinsic"
545
+ >
546
+ <div
547
+ style={
548
+ Object {
549
+ "maxWidth": 750,
550
+ "overflow": "hidden",
551
+ "position": "relative",
552
+ "width": "100%",
553
+ }
554
+ }
555
+ >
556
+ <img
557
+ alt=""
558
+ aria-hidden="true"
559
+ src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
560
+ style={
561
+ Object {
562
+ "display": "block",
563
+ "width": "100%",
564
+ }
565
+ }
566
+ />
567
+ <img
568
+ alt=""
569
+ aria-hidden="true"
570
+ role="presentation"
571
+ src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
572
+ style={
573
+ Object {
574
+ "backgroundColor": undefined,
575
+ "left": 0,
576
+ "objectFit": undefined,
577
+ "objectPosition": undefined,
578
+ "opacity": 0,
579
+ "position": "absolute",
580
+ "top": 0,
581
+ "transition": "opacity 500ms",
582
+ "width": "100%",
583
+ }
584
+ }
585
+ />
586
+ <picture>
587
+ <source
588
+ sizes="(max-width: 750px) 100vw, 750px"
589
+ srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w"
590
+ />
591
+ <img
592
+ alt="DatoCMS swag"
593
+ onLoad={[Function]}
594
+ src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
595
+ style={
596
+ Object {
597
+ "height": "100%",
598
+ "left": 0,
599
+ "objectFit": undefined,
600
+ "objectPosition": undefined,
601
+ "opacity": 1,
602
+ "position": "absolute",
603
+ "top": 0,
604
+ "transition": "opacity 500ms",
605
+ "width": "100%",
606
+ }
607
+ }
608
+ title="These are awesome, we know that."
609
+ />
610
+ </picture>
611
+ <noscript>
612
+ <picture />
613
+ </noscript>
614
+ </div>
615
+ </ForwardRef>
616
+ `;
617
+
618
+ exports[`Image layout=intrinsic visible renders the image 1`] = `
619
+ <ForwardRef
620
+ data={
621
+ Object {
622
+ "alt": "DatoCMS swag",
623
+ "aspectRatio": 1.7777777777777777,
624
+ "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
625
+ "height": 421,
626
+ "sizes": "(max-width: 750px) 100vw, 750px",
627
+ "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
628
+ "srcSet": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w",
629
+ "title": "These are awesome, we know that.",
630
+ "width": 750,
631
+ }
632
+ }
633
+ intersectionThreshold={0.2}
634
+ layout="intrinsic"
635
+ >
636
+ <div
637
+ style={
638
+ Object {
639
+ "maxWidth": 750,
640
+ "overflow": "hidden",
641
+ "position": "relative",
642
+ "width": "100%",
643
+ }
644
+ }
645
+ >
646
+ <img
647
+ alt=""
648
+ aria-hidden="true"
649
+ src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
650
+ style={
651
+ Object {
652
+ "display": "block",
653
+ "width": "100%",
654
+ }
655
+ }
656
+ />
657
+ <img
658
+ alt=""
659
+ aria-hidden="true"
660
+ role="presentation"
661
+ src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
662
+ style={
663
+ Object {
664
+ "backgroundColor": undefined,
665
+ "left": 0,
666
+ "objectFit": undefined,
667
+ "objectPosition": undefined,
668
+ "opacity": 1,
669
+ "position": "absolute",
670
+ "top": 0,
671
+ "transition": "opacity 500ms",
672
+ "width": "100%",
673
+ }
674
+ }
675
+ />
676
+ <picture>
677
+ <source
678
+ sizes="(max-width: 750px) 100vw, 750px"
679
+ srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w"
680
+ />
681
+ <img
682
+ alt="DatoCMS swag"
683
+ onLoad={[Function]}
684
+ src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
685
+ style={
686
+ Object {
687
+ "height": "100%",
688
+ "left": 0,
689
+ "objectFit": undefined,
690
+ "objectPosition": undefined,
691
+ "opacity": 0,
692
+ "position": "absolute",
693
+ "top": 0,
694
+ "transition": "opacity 500ms",
695
+ "width": "100%",
696
+ }
697
+ }
698
+ title="These are awesome, we know that."
699
+ />
700
+ </picture>
701
+ <noscript>
702
+ <picture />
703
+ </noscript>
704
+ </div>
705
+ </ForwardRef>
706
+ `;
707
+
708
+ exports[`Image layout=responsive not visible renders the blur-up thumb 1`] = `
709
+ <ForwardRef
710
+ data={
711
+ Object {
712
+ "alt": "DatoCMS swag",
713
+ "aspectRatio": 1.7777777777777777,
714
+ "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
715
+ "height": 421,
716
+ "sizes": "(max-width: 750px) 100vw, 750px",
717
+ "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
718
+ "srcSet": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w",
719
+ "title": "These are awesome, we know that.",
720
+ "width": 750,
721
+ }
722
+ }
723
+ intersectionThreshold={0.1}
724
+ layout="responsive"
725
+ >
726
+ <div
727
+ style={
728
+ Object {
729
+ "overflow": "hidden",
730
+ "position": "relative",
731
+ "width": "100%",
732
+ }
733
+ }
734
+ >
735
+ <img
736
+ alt=""
737
+ aria-hidden="true"
738
+ src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
739
+ style={
740
+ Object {
741
+ "display": "block",
742
+ "width": "100%",
743
+ }
744
+ }
745
+ />
746
+ <img
747
+ alt=""
748
+ aria-hidden="true"
749
+ role="presentation"
750
+ src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
751
+ style={
752
+ Object {
753
+ "backgroundColor": undefined,
754
+ "left": 0,
755
+ "objectFit": undefined,
756
+ "objectPosition": undefined,
757
+ "opacity": 1,
758
+ "position": "absolute",
759
+ "top": 0,
760
+ "transition": "opacity 500ms",
761
+ "width": "100%",
762
+ }
763
+ }
764
+ />
765
+ <noscript>
766
+ <picture />
767
+ </noscript>
768
+ </div>
769
+ </ForwardRef>
770
+ `;
771
+
772
+ exports[`Image layout=responsive visible image loaded shows the image 1`] = `
773
+ <ForwardRef
774
+ data={
775
+ Object {
776
+ "alt": "DatoCMS swag",
777
+ "aspectRatio": 1.7777777777777777,
778
+ "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
779
+ "height": 421,
780
+ "sizes": "(max-width: 750px) 100vw, 750px",
781
+ "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
782
+ "srcSet": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w",
783
+ "title": "These are awesome, we know that.",
784
+ "width": 750,
785
+ }
786
+ }
787
+ intersectionThreshold={0.3}
788
+ layout="responsive"
789
+ >
790
+ <div
791
+ style={
792
+ Object {
793
+ "overflow": "hidden",
794
+ "position": "relative",
795
+ "width": "100%",
796
+ }
797
+ }
798
+ >
799
+ <img
800
+ alt=""
801
+ aria-hidden="true"
802
+ src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
803
+ style={
804
+ Object {
805
+ "display": "block",
806
+ "width": "100%",
807
+ }
808
+ }
809
+ />
810
+ <img
811
+ alt=""
812
+ aria-hidden="true"
813
+ role="presentation"
814
+ src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
815
+ style={
816
+ Object {
817
+ "backgroundColor": undefined,
818
+ "left": 0,
819
+ "objectFit": undefined,
820
+ "objectPosition": undefined,
821
+ "opacity": 0,
822
+ "position": "absolute",
823
+ "top": 0,
824
+ "transition": "opacity 500ms",
825
+ "width": "100%",
826
+ }
827
+ }
828
+ />
829
+ <picture>
830
+ <source
831
+ sizes="(max-width: 750px) 100vw, 750px"
832
+ srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w"
833
+ />
834
+ <img
835
+ alt="DatoCMS swag"
836
+ onLoad={[Function]}
837
+ src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
838
+ style={
839
+ Object {
840
+ "height": "100%",
841
+ "left": 0,
842
+ "objectFit": undefined,
843
+ "objectPosition": undefined,
844
+ "opacity": 1,
845
+ "position": "absolute",
846
+ "top": 0,
847
+ "transition": "opacity 500ms",
848
+ "width": "100%",
849
+ }
850
+ }
851
+ title="These are awesome, we know that."
852
+ />
853
+ </picture>
854
+ <noscript>
855
+ <picture />
856
+ </noscript>
857
+ </div>
858
+ </ForwardRef>
859
+ `;
860
+
861
+ exports[`Image layout=responsive visible renders the image 1`] = `
862
+ <ForwardRef
863
+ data={
864
+ Object {
865
+ "alt": "DatoCMS swag",
866
+ "aspectRatio": 1.7777777777777777,
867
+ "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
868
+ "height": 421,
869
+ "sizes": "(max-width: 750px) 100vw, 750px",
870
+ "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
871
+ "srcSet": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w",
872
+ "title": "These are awesome, we know that.",
873
+ "width": 750,
874
+ }
875
+ }
876
+ intersectionThreshold={0.2}
877
+ layout="responsive"
878
+ >
879
+ <div
880
+ style={
881
+ Object {
882
+ "overflow": "hidden",
883
+ "position": "relative",
884
+ "width": "100%",
885
+ }
886
+ }
887
+ >
888
+ <img
889
+ alt=""
890
+ aria-hidden="true"
891
+ src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
892
+ style={
893
+ Object {
894
+ "display": "block",
895
+ "width": "100%",
896
+ }
897
+ }
898
+ />
899
+ <img
900
+ alt=""
901
+ aria-hidden="true"
902
+ role="presentation"
903
+ src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
904
+ style={
905
+ Object {
906
+ "backgroundColor": undefined,
907
+ "left": 0,
908
+ "objectFit": undefined,
909
+ "objectPosition": undefined,
910
+ "opacity": 1,
911
+ "position": "absolute",
912
+ "top": 0,
913
+ "transition": "opacity 500ms",
914
+ "width": "100%",
915
+ }
916
+ }
917
+ />
918
+ <picture>
919
+ <source
920
+ sizes="(max-width: 750px) 100vw, 750px"
921
+ srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w"
922
+ />
923
+ <img
924
+ alt="DatoCMS swag"
925
+ onLoad={[Function]}
926
+ src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
927
+ style={
928
+ Object {
929
+ "height": "100%",
930
+ "left": 0,
931
+ "objectFit": undefined,
932
+ "objectPosition": undefined,
933
+ "opacity": 0,
934
+ "position": "absolute",
935
+ "top": 0,
936
+ "transition": "opacity 500ms",
937
+ "width": "100%",
938
+ }
939
+ }
940
+ title="These are awesome, we know that."
941
+ />
942
+ </picture>
943
+ <noscript>
944
+ <picture />
945
+ </noscript>
946
+ </div>
947
+ </ForwardRef>
948
+ `;