@lumx/react 2.1.6-alpha.4 → 2.1.8-alpha.0

package/src/components/avatar/__snapshots__/Avatar.test.tsx.snap

@@ -10,7 +10,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       onClick={[Function]}
       size="xs"
@@ -25,7 +25,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       onClick={[Function]}
       size="s"
@@ -40,7 +40,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       onClick={[Function]}
       size="m"
@@ -55,7 +55,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       onClick={[Function]}
       size="l"
@@ -70,7 +70,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       onClick={[Function]}
       size="xl"
@@ -85,7 +85,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       onClick={[Function]}
       size="xxl"
@@ -105,7 +105,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       loading="lazy"
       size="xs"
       theme="light"
@@ -119,7 +119,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       loading="lazy"
       size="s"
       theme="light"
@@ -133,7 +133,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       loading="lazy"
       size="m"
       theme="light"
@@ -147,7 +147,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       loading="lazy"
       size="l"
       theme="light"
@@ -161,7 +161,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       loading="lazy"
       size="xl"
       theme="light"
@@ -175,7 +175,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       loading="lazy"
       size="xxl"
       theme="light"
@@ -194,7 +194,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       size="xs"
       theme="light"
@@ -258,7 +258,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       size="s"
       theme="light"
@@ -322,7 +322,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       size="m"
       theme="light"
@@ -386,7 +386,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       size="l"
       theme="light"
@@ -450,7 +450,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       size="xl"
       theme="light"
@@ -514,7 +514,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       size="xxl"
       theme="light"
@@ -583,7 +583,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar3.jpg"
+      image="/demo-assets/avatar3.jpg"
       loading="lazy"
       size="xs"
       theme="light"
@@ -608,7 +608,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar3.jpg"
+      image="/demo-assets/avatar3.jpg"
       loading="lazy"
       size="s"
       theme="light"
@@ -633,7 +633,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar3.jpg"
+      image="/demo-assets/avatar3.jpg"
       loading="lazy"
       size="m"
       theme="light"
@@ -658,7 +658,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar3.jpg"
+      image="/demo-assets/avatar3.jpg"
       loading="lazy"
       size="l"
       theme="light"
@@ -683,7 +683,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar3.jpg"
+      image="/demo-assets/avatar3.jpg"
       loading="lazy"
       size="xl"
       theme="light"
@@ -708,7 +708,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="avatar3.jpg"
+      image="/demo-assets/avatar3.jpg"
       loading="lazy"
       size="xxl"
       theme="light"
@@ -738,7 +738,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="portrait3.jpg"
+      image="/demo-assets/portrait3.jpg"
       loading="lazy"
       size="xs"
       theme="light"
@@ -752,7 +752,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="portrait3.jpg"
+      image="/demo-assets/portrait3.jpg"
       loading="lazy"
       size="s"
       theme="light"
@@ -766,7 +766,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="portrait3.jpg"
+      image="/demo-assets/portrait3.jpg"
       loading="lazy"
       size="m"
       theme="light"
@@ -780,7 +780,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="portrait3.jpg"
+      image="/demo-assets/portrait3.jpg"
       loading="lazy"
       size="l"
       theme="light"
@@ -794,7 +794,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="portrait3.jpg"
+      image="/demo-assets/portrait3.jpg"
       loading="lazy"
       size="xl"
       theme="light"
@@ -808,7 +808,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       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"
-      image="portrait3.jpg"
+      image="/demo-assets/portrait3.jpg"
       loading="lazy"
       size="xxl"
       theme="light"

package/src/components/comment-block/__snapshots__/CommentBlock.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`<CommentBlock> Snapshots and structure should render story 'WithHeaderA
     >
       <Avatar
         alt="Avatar"
-        image="avatar1.jpg"
+        image="/demo-assets/avatar1.jpg"
         onKeyPress={[Function]}
         size="m"
         tabIndex={-1}

package/src/components/dialog/Dialog.stories.tsx

@@ -15,17 +15,24 @@ import {
     Theme,
     Toolbar,
 } from '@lumx/react';
+import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
 import { select } from '@storybook/addon-knobs';
 import React, { RefObject, useRef, useState } from 'react';
 import { Dialog, DialogSizes } from './Dialog';
 import { loremIpsum } from '../../stories/knobs/lorem';
+import { chromaticForceScreenSize } from '../../stories/chromaticForceScreenSize';
 
 export default {
     title: 'LumX components/dialog/Dialog',
     parameters: {
-        // Notifies Chromatic to pause the animations when they finish for the specific story.
-        chromatic: { pauseAnimationAtEnd: true },
+        // Delay Chromatic snapshot to wait for dialog to open.
+        chromatic: {
+            pauseAnimationAtEnd: true,
+            delay: DIALOG_TRANSITION_DURATION,
+        },
     },
+    // Force minimum chromatic screen size to make sure the dialog appears in view.
+    decorators: [chromaticForceScreenSize],
 };
 
 const header = <header className="lumx-spacing-padding lumx-typography-title">Dialog header</header>;

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'>;
 
@@ -92,6 +93,10 @@ 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/image-block/ImageBlock.stories.tsx

@@ -11,8 +11,8 @@ export default { title: 'LumX components/image-block/Image Block' };
 
 export const DefaultImageBlock = ({ theme }: any) => {
     const alt = text('Alternative text', 'Image alt text');
-    const align = select<Alignment>('Alignment', Alignment, Alignment.center) as any;
-    const aspectRatio = select<AspectRatio>('Aspect ratio', AspectRatio, AspectRatio.square);
+    const align = select('Alignment', Alignment, Alignment.center) as any;
+    const aspectRatio = select('Aspect ratio', AspectRatio, AspectRatio.square);
     const title = text('Title', 'Hello world');
     const description = text('Description', 'My awesome description');
     const crossOrigin = enumKnob('CORS', [undefined, 'anonymous', 'use-credentials'], undefined);

package/src/components/image-block/__snapshots__/ImageBlock.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`<ImageBlock> Snapshots and structure should render story 'DefaultImageB
         "y": 0,
       }
     }
-    image="landscape1.jpg"
+    image="/demo-assets/landscape1.jpg"
     loading="lazy"
     onClick={false}
     theme="light"

package/src/components/lightbox/Lightbox.stories.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+    ImageBlock,
+    Slideshow,
+    SlideshowItem,
+    Toolbar,
+    Divider,
+    Alignment,
+    TextField,
+    Typography,
+    Link,
+    Lightbox,
+    ThumbnailProps,
+} from '@lumx/react';
+import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
+
+export default { title: 'LumX components/lightbox/Lightbox' };
+
+interface RowItemProps {
+    image: ThumbnailProps;
+}
+
+const RowItem: React.FC<RowItemProps> = ({ image }) => {
+    const [isOpen, setOpen] = React.useState(false);
+    const { image: url, alt: name } = image;
+    const linkRef = React.useRef(null);
+
+    return (
+        <>
+            <Toolbar
+                label={
+                    <Link ref={linkRef} typography={Typography.subtitle1} onClick={() => setOpen(true)}>
+                        {name}
+                    </Link>
+                }
+            />
+            <Lightbox
+                closeButtonProps={{ label: 'Close' }}
+                isOpen={isOpen}
+                onClose={() => setOpen(false)}
+                parentElement={linkRef}
+            >
+                <Slideshow
+                    activeIndex={0}
+                    fillHeight
+                    slideshowControlsProps={{
+                        nextButtonProps: { label: 'Next' },
+                        previousButtonProps: { label: 'Previous' },
+                    }}
+                >
+                    <SlideshowItem key={name}>
+                        <ImageBlock align={Alignment.center} alt={name} fillHeight image={url} />
+                    </SlideshowItem>
+                </Slideshow>
+            </Lightbox>
+        </>
+    );
+};
+
+export const Focus = () => {
+    const [textFieldValue, setTextFieldValue] = React.useState('');
+    const images: ThumbnailProps[] = thumbnailsKnob(12);
+
+    return (
+        <>
+            <TextField
+                value={textFieldValue}
+                onChange={setTextFieldValue}
+                className="lumx-spacing-margin-vertical-big"
+            />
+            {images.map((image, index) => {
+                const itemPosition = index + 1;
+                return (
+                    <div key={itemPosition}>
+                        <RowItem image={image} />
+                        <Divider />
+                    </div>
+                );
+            })}
+        </>
+    );
+};

package/src/components/lightbox/Lightbox.tsx

@@ -10,7 +10,6 @@ import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/
 
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
-import { useFocus } from '@lumx/react/hooks/useFocus';
 import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
@@ -90,9 +89,18 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useFocusTrap(wrapperRef.current, childrenRef.current?.firstChild);
 
-    // Focus the parent element on close.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useFocus(parentElement?.current, !isOpen);
+    const previousOpen = React.useRef(isOpen);
+
+    React.useEffect(() => {
+        if (isOpen !== previousOpen.current) {
+            previousOpen.current = isOpen;
+
+            // Focus the parent element on close.
+            if (!isOpen && parentElement && parentElement.current) {
+                parentElement.current.focus();
+            }
+        }
+    }, [isOpen, parentElement]);
 
     // Close lightbox on escape key pressed.
     // eslint-disable-next-line react-hooks/rules-of-hooks

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

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

@@ -17,7 +17,7 @@ exports[`<Mosaic> Snapshots and structure should render story FiveThumbnails 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"
         fillHeight={true}
-        image="landscape1.jpg"
+        image="/demo-assets/landscape1.jpg"
         loading="lazy"
         theme="light"
       />
@@ -32,7 +32,7 @@ exports[`<Mosaic> Snapshots and structure should render story FiveThumbnails 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"
         fillHeight={true}
-        image="landscape2.jpg"
+        image="/demo-assets/landscape2.jpg"
         loading="lazy"
         theme="light"
       />
@@ -47,7 +47,7 @@ exports[`<Mosaic> Snapshots and structure should render story FiveThumbnails 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"
         fillHeight={true}
-        image="landscape3.jpg"
+        image="/demo-assets/landscape3.jpg"
         loading="lazy"
         theme="light"
       />
@@ -62,7 +62,7 @@ exports[`<Mosaic> Snapshots and structure should render story FiveThumbnails 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"
         fillHeight={true}
-        image="portrait1.jpg"
+        image="/demo-assets/portrait1.jpg"
         loading="lazy"
         theme="light"
       />
@@ -96,7 +96,7 @@ exports[`<Mosaic> Snapshots and structure should render story FourThumbnails 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"
         fillHeight={true}
-        image="landscape1.jpg"
+        image="/demo-assets/landscape1.jpg"
         loading="lazy"
         theme="light"
       />
@@ -111,7 +111,7 @@ exports[`<Mosaic> Snapshots and structure should render story FourThumbnails 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"
         fillHeight={true}
-        image="landscape2.jpg"
+        image="/demo-assets/landscape2.jpg"
         loading="lazy"
         theme="light"
       />
@@ -126,7 +126,7 @@ exports[`<Mosaic> Snapshots and structure should render story FourThumbnails 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"
         fillHeight={true}
-        image="landscape3.jpg"
+        image="/demo-assets/landscape3.jpg"
         loading="lazy"
         theme="light"
       />
@@ -141,7 +141,7 @@ exports[`<Mosaic> Snapshots and structure should render story FourThumbnails 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"
         fillHeight={true}
-        image="portrait1.jpg"
+        image="/demo-assets/portrait1.jpg"
         loading="lazy"
         theme="light"
       />
@@ -167,7 +167,7 @@ exports[`<Mosaic> Snapshots and structure should render story OneThumbnail 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"
         fillHeight={true}
-        image="landscape1.jpg"
+        image="/demo-assets/landscape1.jpg"
         loading="lazy"
         theme="light"
       />
@@ -193,7 +193,7 @@ exports[`<Mosaic> Snapshots and structure should render story SixThumbnails 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"
         fillHeight={true}
-        image="landscape1.jpg"
+        image="/demo-assets/landscape1.jpg"
         loading="lazy"
         onClick={[Function]}
         theme="light"
@@ -209,7 +209,7 @@ exports[`<Mosaic> Snapshots and structure should render story SixThumbnails 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"
         fillHeight={true}
-        image="landscape2.jpg"
+        image="/demo-assets/landscape2.jpg"
         loading="lazy"
         onClick={[Function]}
         theme="light"
@@ -225,7 +225,7 @@ exports[`<Mosaic> Snapshots and structure should render story SixThumbnails 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"
         fillHeight={true}
-        image="landscape3.jpg"
+        image="/demo-assets/landscape3.jpg"
         loading="lazy"
         onClick={[Function]}
         theme="light"
@@ -241,7 +241,7 @@ exports[`<Mosaic> Snapshots and structure should render story SixThumbnails 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"
         fillHeight={true}
-        image="portrait1.jpg"
+        image="/demo-assets/portrait1.jpg"
         loading="lazy"
         onClick={[Function]}
         theme="light"
@@ -276,7 +276,7 @@ exports[`<Mosaic> Snapshots and structure should render story ThreeThumbnails 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"
         fillHeight={true}
-        image="landscape1.jpg"
+        image="/demo-assets/landscape1.jpg"
         loading="lazy"
         theme="light"
       />
@@ -291,7 +291,7 @@ exports[`<Mosaic> Snapshots and structure should render story ThreeThumbnails 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"
         fillHeight={true}
-        image="landscape2.jpg"
+        image="/demo-assets/landscape2.jpg"
         loading="lazy"
         theme="light"
       />
@@ -306,7 +306,7 @@ exports[`<Mosaic> Snapshots and structure should render story ThreeThumbnails 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"
         fillHeight={true}
-        image="landscape3.jpg"
+        image="/demo-assets/landscape3.jpg"
         loading="lazy"
         theme="light"
       />
@@ -332,7 +332,7 @@ exports[`<Mosaic> Snapshots and structure should render story TwoThumbnails 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"
         fillHeight={true}
-        image="landscape1.jpg"
+        image="/demo-assets/landscape1.jpg"
         loading="lazy"
         theme="light"
       />
@@ -347,7 +347,7 @@ exports[`<Mosaic> Snapshots and structure should render story TwoThumbnails 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"
         fillHeight={true}
-        image="landscape2.jpg"
+        image="/demo-assets/landscape2.jpg"
         loading="lazy"
         theme="light"
       />