@lumx/react 2.1.9-alpha-thumbnail4 → 2.1.9-prefer-css-color-variables2

package/esm/_internal/mosaic.js

@@ -7,9 +7,12 @@ import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
+import './constants.js';
 import './mergeRefs.js';
 import './Icon2.js';
 import 'lodash/take';
 export { M as Mosaic } from './Mosaic2.js';
+import './clamp.js';
 import './Thumbnail2.js';
+import 'lodash';
 //# sourceMappingURL=mosaic.js.map

package/esm/_internal/mosaic.js.map

@@ -1 +1 @@
-{"version":3,"file":"mosaic.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"mosaic.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/esm/_internal/post-block.js

@@ -7,10 +7,13 @@ import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
+import './constants.js';
 import './mergeRefs.js';
 import './Icon2.js';
 import 'lodash/isObject';
 export { P as PostBlock } from './PostBlock.js';
+import './clamp.js';
 import './Thumbnail2.js';
+import 'lodash';
 import './types.js';
 //# sourceMappingURL=post-block.js.map

package/esm/_internal/post-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"post-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
+{"version":3,"file":"post-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/esm/_internal/slider.js

@@ -9,5 +9,6 @@ import 'lodash/kebabCase';
 import 'lodash/noop';
 import './InputHelper.js';
 import './InputLabel.js';
-export { S as Slider, c as clamp } from './Slider2.js';
+export { S as Slider } from './Slider2.js';
+export { c as clamp } from './clamp.js';
 //# sourceMappingURL=slider.js.map

package/esm/_internal/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/esm/_internal/thumbnail.js

@@ -7,8 +7,11 @@ import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
+import './constants.js';
 import './mergeRefs.js';
 import './Icon2.js';
+import './clamp.js';
 export { T as Thumbnail } from './Thumbnail2.js';
+import 'lodash';
 export { T as ThumbnailAspectRatio, a as ThumbnailVariant } from './types.js';
 //# sourceMappingURL=thumbnail.js.map

package/esm/_internal/thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"thumbnail.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/esm/_internal/user-block.js

@@ -7,9 +7,12 @@ import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
+import './constants.js';
 import './mergeRefs.js';
 import './Avatar2.js';
 import './Icon2.js';
+import './clamp.js';
 import './Thumbnail2.js';
+import 'lodash';
 export { U as UserBlock } from './UserBlock.js';
 //# sourceMappingURL=user-block.js.map

package/esm/_internal/user-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/esm/index.js

@@ -74,13 +74,15 @@ export { R as RadioButton, a as RadioGroup } from './_internal/RadioGroup.js';
 export { a as Select, c as SelectMultiple, b as SelectMultipleField, S as SelectVariant } from './_internal/SelectMultiple.js';
 export { S as SideNavigation, a as SideNavigationItem } from './_internal/SideNavigationItem.js';
 export { S as SkeletonCircle, b as SkeletonRectangle, a as SkeletonRectangleVariant, c as SkeletonTypography } from './_internal/SkeletonTypography.js';
-export { S as Slider, c as clamp } from './_internal/Slider2.js';
+export { S as Slider } from './_internal/Slider2.js';
+export { c as clamp } from './_internal/clamp.js';
 export { S as Slideshow, b as SlideshowControls, a as SlideshowItem } from './_internal/SlideshowControls.js';
 export { S as Switch } from './_internal/Switch2.js';
 export { T as Table, a as TableBody, d as TableCell, c as TableCellVariant, e as TableHeader, f as TableRow, b as ThOrder } from './_internal/TableRow.js';
 export { c as Tab, b as TabList, a as TabListLayout, d as TabPanel, T as TabProvider } from './_internal/TabPanel.js';
 export { T as TextField } from './_internal/TextField.js';
 export { T as Thumbnail } from './_internal/Thumbnail2.js';
+import 'lodash';
 export { T as ThumbnailAspectRatio, a as ThumbnailVariant } from './_internal/types.js';
 export { T as Toolbar } from './_internal/Toolbar2.js';
 export { T as Tooltip } from './_internal/Tooltip2.js';

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.1.9-alpha-thumbnail4",
-        "@lumx/icons": "^2.1.9-alpha-thumbnail4",
+        "@lumx/core": "^2.1.9-prefer-css-color-variables2",
+        "@lumx/icons": "^2.1.9-prefer-css-color-variables2",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.1.9-alpha-thumbnail4",
-    "gitHead": "fa5191f099b3ac41f36405aeb23d0f6d254d4d39"
+    "version": "2.1.9-prefer-css-color-variables2",
+    "gitHead": "62c4eb58224dd92429a040c9dbb9197e4a6d43ab"
 }

package/src/components/image-block/ImageBlock.tsx

@@ -118,6 +118,7 @@ export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((pro
             <Thumbnail
                 {...thumbnailProps}
                 className={classNames(`${CLASSNAME}__image`, thumbnailProps?.className)}
+                fillHeight={fillHeight}
                 align={align}
                 image={image}
                 size={size}

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

@@ -12,53 +12,30 @@ import {
     Thumbnail,
     ThumbnailVariant,
 } from '@lumx/react';
-import { IMAGE_SIZES, imageKnob, IMAGES } from '@lumx/react/stories/knobs/image';
+import { imageKnob, IMAGES } from '@lumx/react/stories/knobs/image';
+import { htmlDecode } from '@lumx/react/utils/htmlDecode';
 import { boolean, select, text } from '@storybook/addon-knobs';
 import { enumKnob } from '@lumx/react/stories/knobs/enumKnob';
 import { focusKnob } from '@lumx/react/stories/knobs/focusKnob';
 import { sizeKnob } from '@lumx/react/stories/knobs/sizeKnob';
-import { action } from '@storybook/addon-actions';
-import classNames from 'classnames';
 
 export default { title: 'LumX components/thumbnail/Thumbnail' };
 
-/** Default thumbnail props (editable via knobs) */
-export const Default = ({ theme }: any) => {
-    const alt = text('Alternative text', 'Image alt text');
-    const align = enumKnob(
-        'Alignment',
-        [undefined, Alignment.center, Alignment.left, Alignment.right] as const,
-        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;
+export const Default = () => <Thumbnail alt="Image alt text" image={imageKnob()} size={Size.xxl} />;
 
-    return (
-        <Thumbnail
-            alt={alt}
-            align={align}
-            aspectRatio={aspectRatio}
-            crossOrigin={crossOrigin}
-            fillHeight={fillHeight}
-            focusPoint={focusPoint}
-            image={image}
-            size={size}
-            theme={theme}
-            variant={variant}
-            onClick={onClick}
-        />
-    );
-};
+export const Clickable = () => <Thumbnail alt="Click me" image={imageKnob()} size={Size.xxl} onClick={console.log} />;
+
+export const DefaultFallback = () => <Thumbnail alt="foo" image="foo" />;
+
+export const IconFallback = () => <Thumbnail alt="foo" image="foo" fallback={mdiAbTesting} />;
+
+export const CustomFallback = () => (
+    <Thumbnail alt="foo" image="foo" fallback={<Thumbnail alt="missing image" image="/logo.svg" />} />
+);
 
 export const WithBadge = () => {
-    const thumbnailSize = sizeKnob('Size', Size.l);
-    const variant = select('Variant', ThumbnailVariant, ThumbnailVariant.rounded);
+    const thumbnailSize = sizeKnob('Thumbnail size', Size.l);
+    const variant = select('Thumbnail variant', ThumbnailVariant, ThumbnailVariant.rounded);
     const badgeColor = select('Badge color', ColorPalette, ColorPalette.primary);
     const activateFallback = boolean('Activate fallback', false);
     const image = imageKnob();
@@ -78,297 +55,13 @@ export const WithBadge = () => {
     );
 };
 
-export const Clickable = () => (
-    <Thumbnail alt="Click me" image={imageKnob()} size={sizeKnob('Size', Size.xxl)} onClick={action('onClick')} />
-);
-
-export const ClickableLink = () => (
-    <Thumbnail
-        alt="Click me"
-        image={imageKnob()}
-        size={sizeKnob('Size', Size.xxl)}
-        linkProps={{ href: 'https://google.fr' }}
-    />
-);
-
-const CustomLinkComponent = (props: any) => (
-    <a {...props} className={classNames('custom-link-component', props.className)}>
-        {props.children}
-    </a>
-);
-
-export const ClickableCustomLink = () => (
-    <Thumbnail
-        alt="Click me"
-        image={imageKnob()}
-        size={sizeKnob('Size', Size.xxl)}
-        linkAs={CustomLinkComponent}
-        linkProps={{ href: 'https://google.fr', className: 'custom-class-name' }}
-    />
-);
-
-export const FillHeight = () => {
-    const parentStyle = {
-        width: 600,
-        height: 240,
-        border: '1px solid red',
-        overflow: 'hidden',
-        resize: 'both',
-    } as const;
-    return (
-        <>
-            <h2>Default</h2>
-            <div style={parentStyle}>
-                <Thumbnail alt="" image={IMAGES.landscape1s200} fillHeight />
-            </div>
-            <h2>Ratio wide</h2>
-            <div style={parentStyle}>
-                <Thumbnail alt="" image={IMAGES.landscape1s200} fillHeight aspectRatio="wide" />
-            </div>
-            <h2>Ratio vertical</h2>
-            <div style={parentStyle}>
-                <Thumbnail alt="" image={IMAGES.landscape1s200} fillHeight aspectRatio="vertical" />
-            </div>
-            <h2>Ratio free</h2>
-            <div style={parentStyle}>
-                <Thumbnail alt="" image={IMAGES.landscape1s200} fillHeight aspectRatio="free" />
-            </div>
-        </>
-    );
-};
-
-export const Original = () => (
-    <>
-        <h1>Ratio: Original</h1>
-        <h2>Default</h2>
-        <table>
-            <tr>
-                <th>Landscape</th>
-                <th>
-                    Landscape <small>(with original size)</small>
-                </th>
-                <th>Portrait</th>
-                <th>
-                    Portrait <small>(with original size)</small>
-                </th>
-            </tr>
-            <tr>
-                <td>
-                    <Thumbnail alt="" image={IMAGES.landscape1} />
-                </td>
-                <td>
-                    <Thumbnail alt="" image={IMAGES.landscape1} imgProps={IMAGE_SIZES.landscape1} />
-                </td>
-                <td>
-                    <Thumbnail alt="" image={IMAGES.portrait1} />
-                </td>
-                <td>
-                    <Thumbnail alt="" image={IMAGES.portrait1} imgProps={IMAGE_SIZES.portrait1} />
-                </td>
-            </tr>
-        </table>
-        <h2>Constrained parent size</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" image={IMAGES.landscape1} />
-            </div>
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" image={IMAGES.portrait1} />
-            </div>
-        </FlexBox>
-        <h2>With size</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" image={IMAGES.landscape1} size="xxl" />
-            <Thumbnail alt="" image={IMAGES.portrait1} size="xxl" />
-        </FlexBox>
-        <h2>With size & smaller image</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" image={IMAGES.landscape1s200} size="xxl" />
-            <Thumbnail alt="" image={IMAGES.portrait1s200} size="xxl" />
-        </FlexBox>
-        <h2>With size & smaller image & fill height</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" image={IMAGES.landscape1s200} size="xxl" fillHeight />
-            <Thumbnail alt="" 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="" image={IMAGES.landscape1s200} fillHeight />
-            </div>
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" image={IMAGES.portrait1s200} fillHeight />
-            </div>
-        </FlexBox>
-    </>
-);
-
-export const Vertical = () => (
-    <>
-        <h1>Ratio: vertical</h1>
-        <h2>Default</h2>
-        <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 }}>
-                <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1} />
-            </div>
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1} />
-            </div>
-        </FlexBox>
-        <h2>Constraint parent size & smaller image</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1s200} />
-            </div>
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1s200} />
-            </div>
-        </FlexBox>
-        <h2>With size</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1} size="xxl" />
-            <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1} size="xxl" />
-        </FlexBox>
-        <h2>With size & smaller image</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1s200} size="xxl" />
-            <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1s200} size="xxl" />
-        </FlexBox>
-        <h2>With size & smaller image & fill height</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1s200} size="xxl" fillHeight />
-            <Thumbnail alt="" aspectRatio="vertical" 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="vertical" image={IMAGES.landscape1s200} fillHeight />
-            </div>
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1s200} fillHeight />
-            </div>
-        </FlexBox>
-    </>
-);
-
-export const Wide = () => (
-    <>
-        <h1>Ratio: wide</h1>
-        <h2>Default</h2>
-        <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 }}>
-                <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1} />
-            </div>
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1} />
-            </div>
-        </FlexBox>
-        <h2>Constrained parent size & smaller image</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1s200} />
-            </div>
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1s200} />
-            </div>
-        </FlexBox>
-        <h2>With size</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1} size="xxl" />
-            <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1} size="xxl" />
-        </FlexBox>
-        <h2>With size & smaller image</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1s200} size="xxl" />
-            <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1s200} size="xxl" />
-        </FlexBox>
-        <h2>With size & smaller image & fill height</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1s200} size="xxl" fillHeight />
-            <Thumbnail alt="" aspectRatio="wide" 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="wide" image={IMAGES.landscape1s200} fillHeight />
-            </div>
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1s200} fillHeight />
-            </div>
-        </FlexBox>
-    </>
-);
-
-export const Square = () => (
-    <>
-        <h1>Ratio: square</h1>
-        <h2>Default</h2>
-        <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 className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1} />
-            </div>
-        </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 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' }}>
+            <div style={{ border: '1px solid red', width: 200, height: 400, resize: 'both', overflow: 'auto' }}>
                 <Thumbnail alt="Grid" image="/demo-assets/grid.jpg" aspectRatio={aspectRatio} fillHeight={fillHeight} />
             </div>
 
@@ -383,89 +76,35 @@ export const ParentSizeConstraint = () => {
     ));
 };
 
-export const IsLoading = ({ theme }: any) => (
-    <FlexBox
-        orientation="horizontal"
-        vAlign="center"
-        marginAuto={['left', 'right']}
-        style={{ border: '1px solid red', width: 900, height: 700, resize: 'both', overflow: 'auto' }}
-    >
+export const Knobs = ({ theme }: any) => {
+    const alt = text('Alternative text', 'Image alt text');
+    const align = enumKnob(
+        'Alignment',
+        [undefined, Alignment.center, Alignment.left, Alignment.right] as const,
+        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', Size.xxl);
+    const onClick = boolean('clickable?', false) ? () => console.log('ok') : undefined;
+
+    return (
         <Thumbnail
+            alt={alt}
+            align={align}
+            aspectRatio={aspectRatio}
+            crossOrigin={crossOrigin}
+            fillHeight={fillHeight}
+            focusPoint={focusPoint}
+            image={htmlDecode(image)}
+            size={size}
             theme={theme}
-            alt="Image alt text"
-            image={IMAGES.landscape2}
-            isLoading={boolean('Is loading', true)}
-            fillHeight={boolean('Fill Height', false)}
-            size={sizeKnob('Size', undefined)}
+            variant={variant}
+            onClick={onClick}
         />
-    </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);
-    const variant = select('Variant', ThumbnailVariant, undefined);
-    const base = { alt: 'foo', image: 'foo', isLoading, variant } 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} />
-                <Thumbnail {...base} fallback={imageFallback} />
-            </FlexBox>
-            <h2>
-                With original image size <small>(50x50)</small>
-            </h2>
-            <FlexBox orientation="horizontal" gap="big">
-                <Thumbnail {...base} imgProps={imgProps} />
-                <Thumbnail {...base} fallback={mdiAbTesting} imgProps={imgProps} />
-                <Thumbnail {...base} fallback={imageFallback} imgProps={imgProps} />
-            </FlexBox>
-            <h2>With size</h2>
-            <FlexBox orientation="horizontal" gap="big">
-                <Thumbnail {...base} size="xl" />
-                <Thumbnail {...base} size="xl" fallback={mdiAbTesting} />
-                <Thumbnail {...base} size="xl" fallback={imageFallback} imgProps={imgProps} />
-            </FlexBox>
-            <h2>With size & ratio</h2>
-            <FlexBox orientation="horizontal" gap="big">
-                <Thumbnail {...base} size="xl" aspectRatio="wide" />
-                <Thumbnail {...base} size="xl" aspectRatio="wide" fallback={mdiAbTesting} />
-                <Thumbnail {...base} size="xl" aspectRatio="wide" fallback={imageFallback} />
-            </FlexBox>
-            <h2>
-                With original size <small>(50x50)</small> & ratio
-            </h2>
-            <FlexBox orientation="horizontal" gap="big">
-                <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" />
-                <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" fallback={mdiAbTesting} />
-                <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" fallback={imageFallback} />
-            </FlexBox>
-            <h2>
-                With original size <small>(50x50)</small> & ratio & constrained parent size
-            </h2>
-            <FlexBox orientation="horizontal" gap="big">
-                <div className="parent" style={{ width: 220 }}>
-                    <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" />
-                </div>
-                <div className="parent" style={{ width: 220 }}>
-                    <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" fallback={mdiAbTesting} />
-                </div>
-                <div className="parent" style={{ width: 220 }}>
-                    <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" fallback={imageFallback} />
-                </div>
-            </FlexBox>
-        </>
     );
 };