@lumx/react 2.1.9-alpha-thumbnail → 2.1.9-alpha-thumbnail5

package/src/components/mosaic/__snapshots__/Mosaic.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`<Mosaic> Snapshots and structure should render story FiveThumbnails 1`]
         align="left"
         alt="Image 1"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
         image="/demo-assets/landscape1.jpg"
         loading="lazy"
@@ -30,9 +30,9 @@ exports[`<Mosaic> Snapshots and structure should render story FiveThumbnails 1`]
         align="left"
         alt="Image 2"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
-        image="/demo-assets/landscape2.jpg"
+        image="/demo-assets/landscape1-s200.jpg"
         loading="lazy"
         theme="light"
       />
@@ -45,9 +45,9 @@ exports[`<Mosaic> Snapshots and structure should render story FiveThumbnails 1`]
         align="left"
         alt="Image 3"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
-        image="/demo-assets/landscape3.jpg"
+        image="/demo-assets/landscape2.jpg"
         loading="lazy"
         theme="light"
       />
@@ -60,9 +60,9 @@ exports[`<Mosaic> Snapshots and structure should render story FiveThumbnails 1`]
         align="left"
         alt="Image 4"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
-        image="/demo-assets/portrait1.jpg"
+        image="/demo-assets/landscape3.jpg"
         loading="lazy"
         theme="light"
       />
@@ -94,7 +94,7 @@ exports[`<Mosaic> Snapshots and structure should render story FourThumbnails 1`]
         align="left"
         alt="Image 1"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
         image="/demo-assets/landscape1.jpg"
         loading="lazy"
@@ -109,9 +109,9 @@ exports[`<Mosaic> Snapshots and structure should render story FourThumbnails 1`]
         align="left"
         alt="Image 2"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
-        image="/demo-assets/landscape2.jpg"
+        image="/demo-assets/landscape1-s200.jpg"
         loading="lazy"
         theme="light"
       />
@@ -124,9 +124,9 @@ exports[`<Mosaic> Snapshots and structure should render story FourThumbnails 1`]
         align="left"
         alt="Image 3"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
-        image="/demo-assets/landscape3.jpg"
+        image="/demo-assets/landscape2.jpg"
         loading="lazy"
         theme="light"
       />
@@ -139,9 +139,9 @@ exports[`<Mosaic> Snapshots and structure should render story FourThumbnails 1`]
         align="left"
         alt="Image 4"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
-        image="/demo-assets/portrait1.jpg"
+        image="/demo-assets/landscape3.jpg"
         loading="lazy"
         theme="light"
       />
@@ -165,7 +165,7 @@ exports[`<Mosaic> Snapshots and structure should render story OneThumbnail 1`] =
         align="left"
         alt="Image 1"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
         image="/demo-assets/landscape1.jpg"
         loading="lazy"
@@ -191,7 +191,7 @@ exports[`<Mosaic> Snapshots and structure should render story SixThumbnails 1`]
         align="left"
         alt="Image 1"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
         image="/demo-assets/landscape1.jpg"
         loading="lazy"
@@ -207,9 +207,9 @@ exports[`<Mosaic> Snapshots and structure should render story SixThumbnails 1`]
         align="left"
         alt="Image 2"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
-        image="/demo-assets/landscape2.jpg"
+        image="/demo-assets/landscape1-s200.jpg"
         loading="lazy"
         onClick={[Function]}
         theme="light"
@@ -223,9 +223,9 @@ exports[`<Mosaic> Snapshots and structure should render story SixThumbnails 1`]
         align="left"
         alt="Image 3"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
-        image="/demo-assets/landscape3.jpg"
+        image="/demo-assets/landscape2.jpg"
         loading="lazy"
         onClick={[Function]}
         theme="light"
@@ -239,9 +239,9 @@ exports[`<Mosaic> Snapshots and structure should render story SixThumbnails 1`]
         align="left"
         alt="Image 4"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
-        image="/demo-assets/portrait1.jpg"
+        image="/demo-assets/landscape3.jpg"
         loading="lazy"
         onClick={[Function]}
         theme="light"
@@ -274,7 +274,7 @@ exports[`<Mosaic> Snapshots and structure should render story ThreeThumbnails 1`
         align="left"
         alt="Image 1"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
         image="/demo-assets/landscape1.jpg"
         loading="lazy"
@@ -289,9 +289,9 @@ exports[`<Mosaic> Snapshots and structure should render story ThreeThumbnails 1`
         align="left"
         alt="Image 2"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
-        image="/demo-assets/landscape2.jpg"
+        image="/demo-assets/landscape1-s200.jpg"
         loading="lazy"
         theme="light"
       />
@@ -304,9 +304,9 @@ exports[`<Mosaic> Snapshots and structure should render story ThreeThumbnails 1`
         align="left"
         alt="Image 3"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
-        image="/demo-assets/landscape3.jpg"
+        image="/demo-assets/landscape2.jpg"
         loading="lazy"
         theme="light"
       />
@@ -330,7 +330,7 @@ exports[`<Mosaic> Snapshots and structure should render story TwoThumbnails 1`]
         align="left"
         alt="Image 1"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
         image="/demo-assets/landscape1.jpg"
         loading="lazy"
@@ -345,9 +345,9 @@ exports[`<Mosaic> Snapshots and structure should render story TwoThumbnails 1`]
         align="left"
         alt="Image 2"
         aspectRatio="free"
-        fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+        fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
         fillHeight={true}
-        image="/demo-assets/landscape2.jpg"
+        image="/demo-assets/landscape1-s200.jpg"
         loading="lazy"
         theme="light"
       />

package/src/components/post-block/__snapshots__/PostBlock.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`<PostBlock> Snapshots and structure should render story 'Default' 1`] =
   >
     <Thumbnail
       alt="Landscape"
-      fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
       image="/demo-assets/landscape1.jpg"
       loading="lazy"
       theme="light"

package/src/components/slideshow/__snapshots__/Slideshow.test.tsx.snap

@@ -39,13 +39,13 @@ Array [
           />
         </SlideshowItem>
         <SlideshowItem
-          key="/demo-assets/landscape2.jpg-1"
+          key="/demo-assets/landscape1-s200.jpg-1"
         >
           <ImageBlock
             align="left"
             alt="Image 2"
             captionPosition="below"
-            image="/demo-assets/landscape2.jpg"
+            image="/demo-assets/landscape1-s200.jpg"
             theme="light"
             thumbnailProps={
               Object {
@@ -55,13 +55,13 @@ Array [
           />
         </SlideshowItem>
         <SlideshowItem
-          key="/demo-assets/landscape3.jpg-2"
+          key="/demo-assets/landscape2.jpg-2"
         >
           <ImageBlock
             align="left"
             alt="Image 3"
             captionPosition="below"
-            image="/demo-assets/landscape3.jpg"
+            image="/demo-assets/landscape2.jpg"
             theme="light"
             thumbnailProps={
               Object {
@@ -71,13 +71,13 @@ Array [
           />
         </SlideshowItem>
         <SlideshowItem
-          key="/demo-assets/portrait1.jpg-3"
+          key="/demo-assets/landscape3.jpg-3"
         >
           <ImageBlock
             align="left"
             alt="Image 4"
             captionPosition="below"
-            image="/demo-assets/portrait1.jpg"
+            image="/demo-assets/landscape3.jpg"
             theme="light"
             thumbnailProps={
               Object {
@@ -87,13 +87,13 @@ Array [
           />
         </SlideshowItem>
         <SlideshowItem
-          key="/demo-assets/portrait2.jpg-4"
+          key="/demo-assets/portrait1.jpg-4"
         >
           <ImageBlock
             align="left"
             alt="Image 5"
             captionPosition="below"
-            image="/demo-assets/portrait2.jpg"
+            image="/demo-assets/portrait1.jpg"
             theme="light"
             thumbnailProps={
               Object {
@@ -103,13 +103,13 @@ Array [
           />
         </SlideshowItem>
         <SlideshowItem
-          key="/demo-assets/portrait3.jpg-5"
+          key="/demo-assets/portrait1-s200.jpg-5"
         >
           <ImageBlock
             align="left"
             alt="Image 6"
             captionPosition="below"
-            image="/demo-assets/portrait3.jpg"
+            image="/demo-assets/portrait1-s200.jpg"
             theme="light"
             thumbnailProps={
               Object {

package/src/components/table/__snapshots__/Table.test.tsx.snap

@@ -60,7 +60,7 @@ exports[`<Table> Snapshots and structure should render story 'Default' 1`] = `
             alt="Frozen yogurt"
             aspectRatio="square"
             className="lumx-spacing-margin-right-big"
-            fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+            fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
             image="/demo-assets/landscape1.jpg"
             loading="lazy"
             size="m"
@@ -129,7 +129,7 @@ exports[`<Table> Snapshots and structure should render story 'Default' 1`] = `
             alt="Ice cream sandwich"
             aspectRatio="square"
             className="lumx-spacing-margin-right-big"
-            fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+            fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
             image="/demo-assets/landscape2.jpg"
             loading="lazy"
             size="m"
@@ -198,7 +198,7 @@ exports[`<Table> Snapshots and structure should render story 'Default' 1`] = `
             alt="Eclair"
             aspectRatio="square"
             className="lumx-spacing-margin-right-big"
-            fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+            fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
             image="/demo-assets/landscape3.jpg"
             loading="lazy"
             size="m"

package/src/components/thumbnail/Thumbnail.stories.tsx

@@ -20,19 +20,6 @@ import { sizeKnob } from '@lumx/react/stories/knobs/sizeKnob';
 import { action } from '@storybook/addon-actions';
 import classNames from 'classnames';
 
-const knobAspectRatio = () => {
-    const ratiosProps = {
-        Original: {},
-        'Original (with natural size)': { imgNaturalSize: { width: 800, height: 600 } },
-        'Free (with fill height)': { aspectRatio: AspectRatio.free },
-        Horizontal: { aspectRatio: AspectRatio.horizontal },
-        Wide: { aspectRatio: AspectRatio.wide },
-        Vertical: { aspectRatio: AspectRatio.vertical },
-        Square: { aspectRatio: AspectRatio.square },
-    } as const;
-    return select('Aspect ratio', ratiosProps as any, ratiosProps.Original as any);
-};
-
 export default { title: 'LumX components/thumbnail/Thumbnail' };
 
 /** Default thumbnail props (editable via knobs) */
@@ -44,27 +31,28 @@ export const Default = ({ theme }: any) => {
         undefined,
     );
     const aspectRatio = enumKnob('Aspect ratio', [undefined, ...Object.values(AspectRatio)], undefined);
-    const crossOrigin = enumKnob('CORS', [undefined, 'anonymous', 'use-credentials'] as const, undefined);
     const fillHeight = boolean('Fill Height', false);
     const focusPoint = { x: focusKnob('Focus X'), y: focusKnob('Focus Y') };
     const image = imageKnob('Image', IMAGES.landscape1);
     const variant = select('Variant', ThumbnailVariant, ThumbnailVariant.squared);
     const size = sizeKnob('Size', undefined);
     const onClick = boolean('clickable?', false) ? action('onClick') : undefined;
+    const isLoading = boolean('Force loading', false);
+    const forceError = boolean('Force error', false);
 
     return (
         <Thumbnail
             alt={alt}
             align={align}
             aspectRatio={aspectRatio}
-            crossOrigin={crossOrigin}
             fillHeight={fillHeight}
             focusPoint={focusPoint}
-            image={image}
+            image={forceError ? 'foo' : image}
             size={size}
             theme={theme}
             variant={variant}
             onClick={onClick}
+            isLoading={isLoading}
         />
     );
 };
@@ -121,7 +109,13 @@ export const ClickableCustomLink = () => (
 );
 
 export const FillHeight = () => {
-    const parentStyle = { width: 600, height: 240, border: '1px solid red' };
+    const parentStyle = {
+        width: 600,
+        height: 240,
+        border: '1px solid red',
+        overflow: 'hidden',
+        resize: 'both',
+    } as const;
     return (
         <>
             <h2>Default</h2>
@@ -213,6 +207,12 @@ export const Original = () => (
 export const Vertical = () => (
     <>
         <h1>Ratio: vertical</h1>
+        <h2>Default</h2>
+        <small>Unsupported use case (thumbnail size is undefined)</small>
+        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
+            <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1} />
+            <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1} />
+        </FlexBox>
         <h2>Constraint parent size</h2>
         <FlexBox orientation="horizontal" vAlign="center" gap="huge">
             <div className="parent" style={{ width: 220 }}>
@@ -261,6 +261,12 @@ export const Vertical = () => (
 export const Wide = () => (
     <>
         <h1>Ratio: wide</h1>
+        <h2>Default</h2>
+        <small>Unsupported use case (thumbnail size is undefined)</small>
+        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
+            <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1} />
+            <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1} />
+        </FlexBox>
         <h2>Constrained parent size</h2>
         <FlexBox orientation="horizontal" vAlign="center" gap="huge">
             <div className="parent" style={{ width: 220 }}>
@@ -306,26 +312,59 @@ export const Wide = () => (
     </>
 );
 
-export const ParentSizeConstraint = () => {
-    const fillHeight = boolean('Fill Height', true);
-    return Object.values(AspectRatio).map((aspectRatio) => (
-        <FlexBox key={aspectRatio} orientation="horizontal" gap="huge">
-            <h1>ratio: {aspectRatio}</h1>
-
-            <div style={{ border: '1px solid red', width: 220, height: 400, resize: 'both', overflow: 'auto' }}>
-                <Thumbnail alt="Grid" image="/demo-assets/grid.jpg" aspectRatio={aspectRatio} fillHeight={fillHeight} />
+export const Square = () => (
+    <>
+        <h1>Ratio: square</h1>
+        <h2>Default</h2>
+        <small>Unsupported use case (thumbnail size is undefined)</small>
+        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
+            <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1} />
+            <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1} />
+        </FlexBox>
+        <h2>Constrained parent size</h2>
+        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
+            <div className="parent" style={{ width: 220 }}>
+                <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1} />
             </div>
-
-            <div style={{ border: '1px solid red', width: 300, height: 300, resize: 'both', overflow: 'auto' }}>
-                <Thumbnail alt="Grid" image="/demo-assets/grid.jpg" aspectRatio={aspectRatio} fillHeight={fillHeight} />
+            <div className="parent" style={{ width: 220 }}>
+                <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1} />
             </div>
-
-            <div style={{ border: '1px solid red', width: 400, height: 200, resize: 'both', overflow: 'auto' }}>
-                <Thumbnail alt="Grid" image="/demo-assets/grid.jpg" aspectRatio={aspectRatio} fillHeight={fillHeight} />
+        </FlexBox>
+        <h2>Constrained parent size & smaller image</h2>
+        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
+            <div className="parent" style={{ width: 220 }}>
+                <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1s200} />
+            </div>
+            <div className="parent" style={{ width: 220 }}>
+                <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1s200} />
             </div>
         </FlexBox>
-    ));
-};
+        <h2>With size</h2>
+        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
+            <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1} size="xxl" />
+            <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1} size="xxl" />
+        </FlexBox>
+        <h2>With size & smaller image</h2>
+        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
+            <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1s200} size="xxl" />
+            <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1s200} size="xxl" />
+        </FlexBox>
+        <h2>With size & smaller image & fill height</h2>
+        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
+            <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1s200} size="xxl" fillHeight />
+            <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1s200} size="xxl" fillHeight />
+        </FlexBox>
+        <h2>Constrained parent size & smaller image & fill height</h2>
+        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
+            <div className="parent" style={{ width: 220 }}>
+                <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1s200} fillHeight />
+            </div>
+            <div className="parent" style={{ width: 220 }}>
+                <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1s200} fillHeight />
+            </div>
+        </FlexBox>
+    </>
+);
 
 export const IsLoading = ({ theme }: any) => (
     <FlexBox
@@ -338,31 +377,23 @@ export const IsLoading = ({ theme }: any) => (
             theme={theme}
             alt="Image alt text"
             image={IMAGES.landscape2}
-            isLoading={boolean('Is loading', true)}
+            isLoading={boolean('Force loading', true)}
             fillHeight={boolean('Fill Height', false)}
             size={sizeKnob('Size', undefined)}
         />
     </FlexBox>
 );
 
-export const ErrorFallback = () => <Thumbnail alt="foo" image="foo" />;
-
-export const ErrorCustomIconFallback = () => <Thumbnail alt="foo" image="foo" fallback={mdiAbTesting} />;
-
-export const ErrorCustomFallback = () => (
-    <Thumbnail alt="foo" image="foo" fallback={<Thumbnail alt="missing image" image="/logo.svg" />} />
-);
-
-export const ErrorFallbackVariants = () => {
-    const isLoading = boolean('is loading', false);
+export const ErrorFallbackVariants = ({ theme }: any) => {
+    const isLoading = boolean('Force loading', false);
     const variant = select('Variant', ThumbnailVariant, undefined);
-    const base = { alt: 'foo', image: 'foo', isLoading, variant } as const;
+    const base = { alt: 'foo', image: 'foo', isLoading, variant, theme } as const;
     const imageFallback = <img src="/logo.svg" alt="logo" />;
     const imgProps = { width: 50, height: 50 };
+
     return (
         <>
             <h2>Default</h2>
-            Default fallback | Custom icon fallback | Custom react node fallback
             <FlexBox orientation="horizontal" gap="big">
                 <Thumbnail {...base} />
                 <Thumbnail {...base} fallback={mdiAbTesting} />
@@ -380,7 +411,7 @@ export const ErrorFallbackVariants = () => {
             <FlexBox orientation="horizontal" gap="big">
                 <Thumbnail {...base} size="xl" />
                 <Thumbnail {...base} size="xl" fallback={mdiAbTesting} />
-                <Thumbnail {...base} size="xl" fallback={imageFallback} imgProps={imgProps} />
+                <Thumbnail {...base} size="xl" fallback={imageFallback} />
             </FlexBox>
             <h2>With size & ratio</h2>
             <FlexBox orientation="horizontal" gap="big">
@@ -391,6 +422,7 @@ export const ErrorFallbackVariants = () => {
             <h2>
                 With original size <small>(50x50)</small> & ratio
             </h2>
+            <small>Unsupported use case (thumbnail size is undefined)</small>
             <FlexBox orientation="horizontal" gap="big">
                 <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" />
                 <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" fallback={mdiAbTesting} />

package/src/components/thumbnail/Thumbnail.test.tsx

@@ -9,10 +9,7 @@ import {
     Clickable,
     ClickableCustomLink,
     ClickableLink,
-    ErrorCustomFallback,
     Default,
-    ErrorFallback,
-    ErrorCustomIconFallback,
     WithBadge,
 } from './Thumbnail.stories';
 
@@ -36,9 +33,6 @@ describe(`<${Thumbnail.displayName}>`, () => {
                 Clickable,
                 ClickableLink,
                 ClickableCustomLink,
-                ErrorFallback,
-                ErrorCustomFallback,
-                ErrorCustomIconFallback,
                 WithBadge,
             },
             Thumbnail,