@lumx/react 2.1.9-alpha-thumbnail3 → 2.1.9-alpha.0

package/esm/_internal/notification.js

@@ -2,7 +2,7 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './mdi.js';
+import './Icon2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
@@ -14,6 +14,5 @@ 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,15 +2,17 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './mdi.js';
+import './Icon2.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';
 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/progress-tracker.js

@@ -2,14 +2,13 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './mdi.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 './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 './mdi.js';
+import './Icon2.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
@@ -23,7 +23,6 @@ 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 './mdi.js';
+import './Icon2.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
@@ -19,7 +19,6 @@ 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/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/slideshow.js

@@ -2,7 +2,7 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './mdi.js';
+import './Icon2.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
@@ -20,7 +20,6 @@ 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,12 +2,11 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './mdi.js';
+import './Icon2.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 './mdi.js';
+import './Icon2.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
@@ -18,7 +18,6 @@ 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,15 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './mdi.js';
+import './Icon2.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';
 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/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,15 +2,16 @@ import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
 import './getRootClassName.js';
-import './mdi.js';
+import './Icon2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 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';
 export { U as UserBlock } from './UserBlock.js';

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

@@ -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';
-import './_internal/mdi.js';
+export { I as Icon } from './_internal/Icon2.js';
 import './index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
@@ -53,7 +53,6 @@ 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';
@@ -74,18 +73,19 @@ 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';
 import 'lodash/debounce';
 export { a as Uploader, U as UploaderVariant } from './_internal/Uploader2.js';
-import 'lodash';
 export { U as UserBlock } from './_internal/UserBlock.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.1.9-alpha-thumbnail3",
-        "@lumx/icons": "^2.1.9-alpha-thumbnail3",
+        "@lumx/core": "^2.1.9-alpha.0",
+        "@lumx/icons": "^2.1.9-alpha.0",
         "@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-thumbnail3",
-    "gitHead": "e57c222583d0f3fff98a3934a16a754302c88e3d"
+    "version": "2.1.9-alpha.0",
+    "gitHead": "67f0df5b67d7a55fccb30b72173163bafcf7b82e"
 }

package/src/components/drag-handle/DragHandle.tsx

@@ -40,7 +40,11 @@ export const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((pro
             {...forwardedProps}
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}
         >
-            <Icon icon={mdiDragVertical} color={theme === Theme.dark ? ColorPalette.light : undefined} size={Size.xs} />
+            <Icon
+                icon={mdiDragVertical}
+                color={theme === Theme.dark ? ColorPalette.light : ColorPalette.dark}
+                size={Size.xs}
+            />
         </div>
     );
 });

package/src/components/flag/Flag.test.tsx

@@ -69,9 +69,8 @@ describe(`<${Flag.displayName} />`, () => {
 
         it('should use the color', () => {
             const color = ColorPalette.green;
-            const { wrapper, iconEl } = setup({ icon: mdiAbTesting, color });
+            const { wrapper } = setup({ icon: mdiAbTesting, color });
 
-            expect(iconEl.prop('color')).toEqual(color);
             expect(wrapper).toHaveClassName(
                 getBasicClass({
                     prefix: CLASSNAME,

package/src/components/flag/Flag.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
-import { ColorPalette, ColorVariant, Icon, Size, Theme } from '@lumx/react';
+import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
 export interface FlagProps extends GenericProps {
@@ -38,15 +38,7 @@ export const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) =>
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor }))}
             ref={ref}
         >
-            {icon && (
-                <Icon
-                    icon={icon}
-                    color={color}
-                    colorVariant={ColorVariant.D2}
-                    size={Size.xxs}
-                    className={`${CLASSNAME}__icon`}
-                />
-            )}
+            {icon && <Icon icon={icon} size={Size.xxs} className={`${CLASSNAME}__icon`} />}
             <span className={`${CLASSNAME}__label`}>{label}</span>
         </div>
     );

package/src/components/flag/__snapshots__/Flag.test.tsx.snap

@@ -19,8 +19,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="blue"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -35,8 +33,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="dark"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -51,8 +47,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="green"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -67,8 +61,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="primary"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -83,8 +75,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="red"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -99,8 +89,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="secondary"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -115,8 +103,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="yellow"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -135,7 +121,6 @@ exports[`<Flag /> Snapshots and structure should render story 'withIcon' 1`] = `
 >
   <Icon
     className="lumx-flag__icon"
-    colorVariant="D2"
     icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
     size="xxs"
   />

package/src/components/icon/Icon.tsx

@@ -4,6 +4,7 @@ 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'>;
 
@@ -52,11 +53,20 @@ const DEFAULT_PROPS: Partial<IconProps> = {};
  */
 export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
     const { className, color, colorVariant, hasShape, icon, size, theme, ...forwardedProps } = props;
+
     let iconColor;
+    let iconColorVariant;
     if (color) {
         iconColor = color;
+        iconColorVariant = colorVariant;
     } else if (theme) {
         iconColor = theme === Theme.light ? ColorPalette.dark : ColorPalette.light;
+
+        if (colorVariant) {
+            iconColorVariant = colorVariant;
+        } else {
+            iconColorVariant = Theme.light ? 'L1' : 'N';
+        }
     } else if (hasShape) {
         iconColor = ColorPalette.dark;
     }
@@ -86,12 +96,16 @@ export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
                 className,
                 handleBasicClasses({
                     color: iconColor,
-                    colorVariant,
+                    colorVariant: iconColorVariant,
                     hasShape,
                     prefix: CLASSNAME,
                     size: iconSize,
                 }),
                 !hasShape && `${CLASSNAME}--no-shape`,
+                !hasShape &&
+                    iconColor === ColorPalette.yellow &&
+                    icon === mdiAlertCircle &&
+                    `${CLASSNAME}--has-dark-layer`,
                 `${CLASSNAME}--path`,
             )}
         >

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/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.blue : ColorPalette.light}
+                            color={theme === Theme.light ? ColorPalette.primary : 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="blue"
+          color="primary"
           colorVariant="N"
           target="_blank"
         />
@@ -40,7 +40,7 @@ exports[`<LinkPreview> Snapshots and structure should render correctly 2`] = `
       >
         <Link
           className="lumx-link-preview__link"
-          color="blue"
+          color="primary"
           colorVariant="N"
           target="_blank"
         />

package/src/components/message/Message.tsx

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