@lumx/react 2.1.9-alpha.0 → 2.1.9

package/esm/_internal/message.js

@@ -2,10 +2,11 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './Icon2.js';
+import './mdi.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
+import './Icon2.js';
 export { M as Message } from './Message2.js';
 //# sourceMappingURL=message.js.map

package/esm/_internal/message.js.map

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

package/esm/_internal/mosaic.js

@@ -2,13 +2,14 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './Icon2.js';
+import './mdi.js';
 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';

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/notification.js

@@ -2,7 +2,7 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './Icon2.js';
+import './mdi.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
@@ -14,5 +14,6 @@ import './Button2.js';
 import 'lodash/isFunction';
 import 'react-dom';
 import './useDelayedVisibility.js';
+import './Icon2.js';
 export { N as Notification } from './Notification2.js';
 //# sourceMappingURL=notification.js.map

package/esm/_internal/notification.js.map

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

package/esm/_internal/post-block.js

@@ -2,13 +2,14 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './Icon2.js';
+import './mdi.js';
 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';

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/progress-tracker.js

@@ -2,13 +2,14 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './Icon2.js';
+import './mdi.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
 import './mergeRefs.js';
+import './Icon2.js';
 import './InputHelper.js';
 import './InputLabel.js';
 import './useRovingTabIndex.js';

package/esm/_internal/progress-tracker.js.map

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

package/esm/_internal/select.js

@@ -2,7 +2,7 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './Icon2.js';
+import './mdi.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
@@ -23,6 +23,7 @@ import './ClickAwayProvider.js';
 import 'lodash/pull';
 import './List2.js';
 import './Dropdown2.js';
+import './Icon2.js';
 import './InputHelper.js';
 import './InputLabel.js';
 export { a as Select, c as SelectMultiple, b as SelectMultipleField, S as SelectVariant } from './SelectMultiple.js';

package/esm/_internal/select.js.map

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

package/esm/_internal/side-navigation.js

@@ -2,7 +2,7 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './Icon2.js';
+import './mdi.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
@@ -19,6 +19,7 @@ import './IconButton.js';
 import 'react-dom';
 import './ClickAwayProvider.js';
 import 'lodash/pull';
+import './Icon2.js';
 export { S as SideNavigation, a as SideNavigationItem } from './SideNavigationItem.js';
 import './Tooltip2.js';
 import 'lodash/debounce';

package/esm/_internal/side-navigation.js.map

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

package/esm/_internal/slideshow.js

@@ -2,7 +2,7 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './Icon2.js';
+import './mdi.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
@@ -20,6 +20,7 @@ import 'lodash/range';
 import 'react-dom';
 import './ClickAwayProvider.js';
 import 'lodash/pull';
+import './Icon2.js';
 export { S as Slideshow, b as SlideshowControls, a as SlideshowItem } from './SlideshowControls.js';
 import './Tooltip2.js';
 import 'lodash/debounce';

package/esm/_internal/slideshow.js.map

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

package/esm/_internal/table.js

@@ -2,11 +2,12 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './Icon2.js';
+import './mdi.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
 import 'lodash/isFunction';
+import './Icon2.js';
 export { T as Table, a as TableBody, d as TableCell, c as TableCellVariant, e as TableHeader, f as TableRow, b as ThOrder } from './TableRow.js';
 //# sourceMappingURL=table.js.map

package/esm/_internal/table.js.map

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

package/esm/_internal/tabs.js

@@ -2,13 +2,13 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './Icon2.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
 import './mergeRefs.js';
+import './Icon2.js';
 import './useRovingTabIndex.js';
 export { c as Tab, b as TabList, a as TabListLayout, d as TabPanel, T as TabProvider } from './TabPanel.js';
 //# sourceMappingURL=tabs.js.map

package/esm/_internal/text-field.js

@@ -2,7 +2,7 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './Icon2.js';
+import './mdi.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
@@ -18,6 +18,7 @@ import './IconButton.js';
 import 'react-dom';
 import './ClickAwayProvider.js';
 import 'lodash/pull';
+import './Icon2.js';
 import './InputHelper.js';
 import './InputLabel.js';
 export { T as TextField } from './TextField.js';

package/esm/_internal/text-field.js.map

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

package/esm/_internal/thumbnail.js

@@ -2,13 +2,14 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './Icon2.js';
+import './mdi.js';
 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';

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/uploader.js

@@ -2,10 +2,10 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './Icon2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
+import './Icon2.js';
 export { a as Uploader, U as UploaderVariant } from './Uploader2.js';
 //# sourceMappingURL=uploader.js.map

package/esm/_internal/user-block.js

@@ -2,7 +2,7 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './Icon2.js';
+import './mdi.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
@@ -10,7 +10,7 @@ import 'lodash/noop';
 import './constants.js';
 import './mergeRefs.js';
 import './Avatar2.js';
-import './renderLink.js';
+import './Icon2.js';
 import './clamp.js';
 import './Thumbnail2.js';
 import 'lodash';

package/esm/index.js

@@ -2,7 +2,7 @@ import './_internal/_rollupPluginBabelHelpers.js';
 export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyInterface, TypographyTitleCustom } from './_internal/components.js';
 import 'react';
 import './_internal/getRootClassName.js';
-export { I as Icon } from './_internal/Icon2.js';
+import './_internal/mdi.js';
 import './index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
@@ -53,6 +53,7 @@ export { F as Flag } from './_internal/Flag2.js';
 import 'lodash/castArray';
 export { F as FlexBox } from './_internal/FlexBox.js';
 export { G as Grid, a as GridItem } from './_internal/GridItem.js';
+export { I as Icon } from './_internal/Icon2.js';
 import 'lodash/isObject';
 export { a as ImageBlock, I as ImageBlockCaptionPosition } from './_internal/ImageBlock.js';
 export { I as InputHelper } from './_internal/InputHelper.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.0",
-        "@lumx/icons": "^2.1.9-alpha.0",
+        "@lumx/core": "^2.1.9",
+        "@lumx/icons": "^2.1.9",
         "@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.0",
-    "gitHead": "67f0df5b67d7a55fccb30b72173163bafcf7b82e"
+    "version": "2.1.9",
+    "gitHead": "fdcfec63e1d0e4e82934a34b6e27c8076f9cba8d"
 }

package/src/components/avatar/Avatar.tsx

@@ -36,10 +36,6 @@ export interface AvatarProps extends GenericProps {
         ThumbnailProps,
         'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'
     >;
-    /** Props to pass to the link wrapping the thumbnail. */
-    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-    /** Custom react component for the link (can be used to inject react router Link). */
-    linkAs?: 'a' | any;
 }
 
 /**
@@ -79,8 +75,6 @@ export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref)
         size,
         theme,
         thumbnailProps,
-        linkProps,
-        linkAs,
         ...forwardedProps
     } = props;
 
@@ -91,8 +85,6 @@ export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref)
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}
         >
             <Thumbnail
-                linkProps={linkProps}
-                linkAs={linkAs}
                 className={`${CLASSNAME}__thumbnail`}
                 onClick={onClick}
                 onKeyPress={onKeyPress}

package/src/components/icon/Icon.tsx

@@ -4,7 +4,6 @@ import classNames from 'classnames';
 
 import { Color, ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
-import { mdiAlertCircle } from '@lumx/icons';
 
 export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
 
@@ -102,10 +101,6 @@ export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
                     size: iconSize,
                 }),
                 !hasShape && `${CLASSNAME}--no-shape`,
-                !hasShape &&
-                    iconColor === ColorPalette.yellow &&
-                    icon === mdiAlertCircle &&
-                    `${CLASSNAME}--has-dark-layer`,
                 `${CLASSNAME}--path`,
             )}
         >

package/src/components/link-preview/LinkPreview.tsx

@@ -115,7 +115,7 @@ export const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((p
                             className={classNames(`${CLASSNAME}__link`, linkProps?.className)}
                             target="_blank"
                             href={link}
-                            color={theme === Theme.light ? ColorPalette.primary : ColorPalette.light}
+                            color={theme === Theme.light ? ColorPalette.blue : ColorPalette.light}
                             colorVariant={ColorVariant.N}
                         >
                             {link}

package/src/components/link-preview/__snapshots__/LinkPreview.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`<LinkPreview> Snapshots and structure should render correctly 1`] = `
       >
         <Link
           className="lumx-link-preview__link"
-          color="primary"
+          color="blue"
           colorVariant="N"
           target="_blank"
         />
@@ -40,7 +40,7 @@ exports[`<LinkPreview> Snapshots and structure should render correctly 2`] = `
       >
         <Link
           className="lumx-link-preview__link"
-          color="primary"
+          color="blue"
           colorVariant="N"
           target="_blank"
         />

package/src/components/message/Message.tsx

@@ -62,9 +62,7 @@ export const Message: Comp<MessageProps, HTMLDivElement> = forwardRef((props, re
             )}
             {...forwardedProps}
         >
-            {(customIcon || icon) && (
-                <Icon className={`${CLASSNAME}__icon`} icon={customIcon || icon} size={Size.xs} color={color} />
-            )}
+            {(customIcon || icon) && <Icon className={`${CLASSNAME}__icon`} icon={customIcon || icon} size={Size.xs} />}
             <div className={`${CLASSNAME}__text`}>{children}</div>
         </div>
     );

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

@@ -18,7 +18,6 @@ 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 classNames from 'classnames';
 
 export default { title: 'LumX components/thumbnail/Thumbnail' };
 
@@ -26,26 +25,6 @@ export const Default = () => <Thumbnail alt="Image alt text" image={imageKnob()}
 
 export const Clickable = () => <Thumbnail alt="Click me" image={imageKnob()} size={Size.xxl} onClick={console.log} />;
 
-export const ClickableLink = () => (
-    <Thumbnail alt="Click me" image={imageKnob()} 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={Size.xxl}
-        linkAs={CustomLinkComponent}
-        linkProps={{ href: 'https://google.fr', className: 'custom-class-name' }}
-    />
-);
-
 export const DefaultFallback = () => <Thumbnail alt="foo" image="foo" />;
 
 export const IconFallback = () => <Thumbnail alt="foo" image="foo" fallback={mdiAbTesting} />;

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

@@ -5,16 +5,7 @@ import 'jest-enzyme';
 import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
 
 import { Thumbnail, ThumbnailProps } from './Thumbnail';
-import {
-    Clickable,
-    ClickableCustomLink,
-    ClickableLink,
-    CustomFallback,
-    Default,
-    DefaultFallback,
-    IconFallback,
-    WithBadge,
-} from './Thumbnail.stories';
+import { Clickable, CustomFallback, Default, DefaultFallback, IconFallback, WithBadge } from './Thumbnail.stories';
 
 const CLASSNAME = Thumbnail.className as string;
 
@@ -31,16 +22,7 @@ describe(`<${Thumbnail.displayName}>`, () => {
     // 1. Test render via snapshot.
     describe('Snapshots and structure', () => {
         itShouldRenderStories(
-            {
-                Default,
-                Clickable,
-                ClickableLink,
-                ClickableCustomLink,
-                DefaultFallback,
-                CustomFallback,
-                IconFallback,
-                WithBadge,
-            },
+            { Default, Clickable, DefaultFallback, CustomFallback, IconFallback, WithBadge },
             Thumbnail,
         );
     });

package/src/components/thumbnail/Thumbnail.tsx

@@ -20,6 +20,7 @@ import { isInternetExplorer } from '@lumx/react/utils/isInternetExplorer';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useFocusPoint } from '@lumx/react/components/thumbnail/useFocusPoint';
 import { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';
+import { useClickable } from '@lumx/react/components/thumbnail/useClickable';
 import { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';
 
 type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
@@ -62,10 +63,6 @@ export interface ThumbnailProps extends GenericProps {
     theme?: Theme;
     /** Variant of the component. */
     variant?: ThumbnailVariant;
-    /** Props to pass to the link wrapping the thumbnail. */
-    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-    /** Custom react component for the link (can be used to inject react router Link). */
-    linkAs?: 'a' | any;
 }
 
 /**
@@ -112,8 +109,6 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         size,
         theme,
         variant,
-        linkProps,
-        linkAs,
         ...forwardedProps
     } = props;
     const imgRef = useRef<HTMLImageElement>(null);
@@ -124,44 +119,24 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
     const isLoading = loadingState === 'isLoading';
 
     const [wrapper, setWrapper] = useState<HTMLElement>();
-
-    const isLink = Boolean(linkProps?.href || linkAs);
-    const isButton = !!forwardedProps.onClick;
-    const isClickable = isButton || isLink;
-
-    let Wrapper: any = 'div';
-    const wrapperProps = { ...forwardedProps };
-    if (isLink) {
-        Wrapper = linkAs || 'a';
-        Object.assign(wrapperProps, linkProps);
-    } else if (isButton) {
-        Wrapper = 'button';
-    }
+    const wrapperProps: any = {
+        ...forwardedProps,
+        ref: mergeRefs(setWrapper, ref),
+        className: classNames(
+            className,
+            handleBasicClasses({ align, aspectRatio, prefix: CLASSNAME, size, theme, variant, hasBadge: !!badge }),
+            isLoading && wrapper?.getBoundingClientRect()?.height && 'lumx-color-background-dark-L6',
+            fillHeight && `${CLASSNAME}--fill-height`,
+        ),
+        // Handle clickable Thumbnail a11y.
+        ...useClickable(props),
+    };
 
     // Update img style according to focus point and aspect ratio.
     const style = useFocusPoint({ image, focusPoint, aspectRatio, imgRef, loadingState, wrapper });
 
     return (
-        <Wrapper
-            {...wrapperProps}
-            ref={mergeRefs(setWrapper, ref) as any}
-            className={classNames(
-                linkProps?.className,
-                className,
-                handleBasicClasses({
-                    align,
-                    aspectRatio,
-                    prefix: CLASSNAME,
-                    size,
-                    theme,
-                    variant,
-                    isClickable,
-                    hasBadge: !!badge,
-                }),
-                isLoading && wrapper?.getBoundingClientRect()?.height && 'lumx-color-background-dark-L6',
-                fillHeight && `${CLASSNAME}--fill-height`,
-            )}
-        >
+        <div {...wrapperProps}>
             <div
                 className={`${CLASSNAME}__background`}
                 style={{
@@ -194,7 +169,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
                 ))}
             {badge &&
                 React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}
-        </Wrapper>
+        </div>
     );
 });
 Thumbnail.displayName = COMPONENT_NAME;