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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/esm/_internal/Avatar2.js +1 -5
  2. package/esm/_internal/Avatar2.js.map +1 -1
  3. package/esm/_internal/DragHandle.js +1 -1
  4. package/esm/_internal/DragHandle.js.map +1 -1
  5. package/esm/_internal/Flag2.js +1 -3
  6. package/esm/_internal/Flag2.js.map +1 -1
  7. package/esm/_internal/Icon2.js +9 -1
  8. package/esm/_internal/Icon2.js.map +1 -1
  9. package/esm/_internal/ImageBlock.js +0 -1
  10. package/esm/_internal/ImageBlock.js.map +1 -1
  11. package/esm/_internal/List2.js.map +1 -1
  12. package/esm/_internal/Message2.js +2 -2
  13. package/esm/_internal/Message2.js.map +1 -1
  14. package/esm/_internal/Thumbnail2.js +20 -12
  15. package/esm/_internal/Thumbnail2.js.map +1 -1
  16. package/esm/_internal/UserBlock.js +14 -45
  17. package/esm/_internal/UserBlock.js.map +1 -1
  18. package/esm/_internal/user-block.js +0 -2
  19. package/esm/_internal/user-block.js.map +1 -1
  20. package/esm/index.js +0 -1
  21. package/esm/index.js.map +1 -1
  22. package/package.json +4 -4
  23. package/src/components/avatar/Avatar.tsx +0 -8
  24. package/src/components/avatar/__snapshots__/Avatar.test.tsx.snap +30 -30
  25. package/src/components/drag-handle/DragHandle.tsx +5 -1
  26. package/src/components/flag/Flag.test.tsx +1 -2
  27. package/src/components/flag/Flag.tsx +2 -10
  28. package/src/components/flag/__snapshots__/Flag.test.tsx.snap +0 -15
  29. package/src/components/icon/Icon.tsx +10 -1
  30. package/src/components/image-block/ImageBlock.tsx +0 -1
  31. package/src/components/image-block/__snapshots__/ImageBlock.test.tsx.snap +1 -1
  32. package/src/components/message/Message.tsx +2 -2
  33. package/src/components/mosaic/__snapshots__/Mosaic.test.tsx.snap +30 -30
  34. package/src/components/post-block/__snapshots__/PostBlock.test.tsx.snap +1 -1
  35. package/src/components/slideshow/__snapshots__/Slideshow.test.tsx.snap +10 -10
  36. package/src/components/table/__snapshots__/Table.test.tsx.snap +3 -3
  37. package/src/components/thumbnail/Thumbnail.stories.tsx +79 -47
  38. package/src/components/thumbnail/Thumbnail.test.tsx +0 -6
  39. package/src/components/thumbnail/Thumbnail.tsx +20 -10
  40. package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap +39 -116
  41. package/src/components/user-block/UserBlock.stories.tsx +4 -30
  42. package/src/components/user-block/UserBlock.tsx +16 -41
  43. package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap +145 -244
  44. package/src/hooks/useOnResize.ts +0 -6
  45. package/src/stories/generated/List/Demos.stories.tsx +2 -0
  46. package/types.d.ts +0 -8
  47. package/src/components/thumbnail/useClickable.ts +0 -26
  48. package/src/components/thumbnail/useFocusPoint.ts +0 -162
package/src/components/avatar/__snapshots__/Avatar.test.tsx.snap CHANGED
@@ -9,7 +9,7 @@ Array [
9
9
  alt="xs"
10
10
  aspectRatio="square"
11
11
  className="lumx-avatar__thumbnail"
12
- 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"
12
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
13
13
  image="/demo-assets/avatar2.jpg"
14
14
  loading="lazy"
15
15
  onClick={[Function]}
@@ -24,7 +24,7 @@ Array [
24
24
  alt="s"
25
25
  aspectRatio="square"
26
26
  className="lumx-avatar__thumbnail"
27
- 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"
27
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
28
28
  image="/demo-assets/avatar2.jpg"
29
29
  loading="lazy"
30
30
  onClick={[Function]}
@@ -39,7 +39,7 @@ Array [
39
39
  alt="m"
40
40
  aspectRatio="square"
41
41
  className="lumx-avatar__thumbnail"
42
- 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"
42
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
43
43
  image="/demo-assets/avatar2.jpg"
44
44
  loading="lazy"
45
45
  onClick={[Function]}
@@ -54,7 +54,7 @@ Array [
54
54
  alt="l"
55
55
  aspectRatio="square"
56
56
  className="lumx-avatar__thumbnail"
57
- 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"
57
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
58
58
  image="/demo-assets/avatar2.jpg"
59
59
  loading="lazy"
60
60
  onClick={[Function]}
@@ -69,7 +69,7 @@ Array [
69
69
  alt="xl"
70
70
  aspectRatio="square"
71
71
  className="lumx-avatar__thumbnail"
72
- 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"
72
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
73
73
  image="/demo-assets/avatar2.jpg"
74
74
  loading="lazy"
75
75
  onClick={[Function]}
@@ -84,7 +84,7 @@ Array [
84
84
  alt="xxl"
85
85
  aspectRatio="square"
86
86
  className="lumx-avatar__thumbnail"
87
- 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"
87
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
88
88
  image="/demo-assets/avatar2.jpg"
89
89
  loading="lazy"
90
90
  onClick={[Function]}
@@ -104,7 +104,7 @@ Array [
104
104
  alt="xs"
105
105
  aspectRatio="square"
106
106
  className="lumx-avatar__thumbnail"
107
- 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"
107
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
108
108
  image="/demo-assets/avatar1.jpg"
109
109
  loading="lazy"
110
110
  size="xs"
@@ -118,7 +118,7 @@ Array [
118
118
  alt="s"
119
119
  aspectRatio="square"
120
120
  className="lumx-avatar__thumbnail"
121
- 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"
121
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
122
122
  image="/demo-assets/avatar1.jpg"
123
123
  loading="lazy"
124
124
  size="s"
@@ -132,7 +132,7 @@ Array [
132
132
  alt="m"
133
133
  aspectRatio="square"
134
134
  className="lumx-avatar__thumbnail"
135
- 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"
135
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
136
136
  image="/demo-assets/avatar1.jpg"
137
137
  loading="lazy"
138
138
  size="m"
@@ -146,7 +146,7 @@ Array [
146
146
  alt="l"
147
147
  aspectRatio="square"
148
148
  className="lumx-avatar__thumbnail"
149
- 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"
149
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
150
150
  image="/demo-assets/avatar1.jpg"
151
151
  loading="lazy"
152
152
  size="l"
@@ -160,7 +160,7 @@ Array [
160
160
  alt="xl"
161
161
  aspectRatio="square"
162
162
  className="lumx-avatar__thumbnail"
163
- 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"
163
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
164
164
  image="/demo-assets/avatar1.jpg"
165
165
  loading="lazy"
166
166
  size="xl"
@@ -174,7 +174,7 @@ Array [
174
174
  alt="xxl"
175
175
  aspectRatio="square"
176
176
  className="lumx-avatar__thumbnail"
177
- 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"
177
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
178
178
  image="/demo-assets/avatar1.jpg"
179
179
  loading="lazy"
180
180
  size="xxl"
@@ -193,7 +193,7 @@ Array [
193
193
  alt="xs"
194
194
  aspectRatio="square"
195
195
  className="lumx-avatar__thumbnail"
196
- 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"
196
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
197
197
  image="/demo-assets/avatar2.jpg"
198
198
  loading="lazy"
199
199
  size="xs"
@@ -257,7 +257,7 @@ Array [
257
257
  alt="s"
258
258
  aspectRatio="square"
259
259
  className="lumx-avatar__thumbnail"
260
- 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"
260
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
261
261
  image="/demo-assets/avatar2.jpg"
262
262
  loading="lazy"
263
263
  size="s"
@@ -321,7 +321,7 @@ Array [
321
321
  alt="m"
322
322
  aspectRatio="square"
323
323
  className="lumx-avatar__thumbnail"
324
- 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"
324
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
325
325
  image="/demo-assets/avatar2.jpg"
326
326
  loading="lazy"
327
327
  size="m"
@@ -385,7 +385,7 @@ Array [
385
385
  alt="l"
386
386
  aspectRatio="square"
387
387
  className="lumx-avatar__thumbnail"
388
- 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"
388
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
389
389
  image="/demo-assets/avatar2.jpg"
390
390
  loading="lazy"
391
391
  size="l"
@@ -449,7 +449,7 @@ Array [
449
449
  alt="xl"
450
450
  aspectRatio="square"
451
451
  className="lumx-avatar__thumbnail"
452
- 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"
452
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
453
453
  image="/demo-assets/avatar2.jpg"
454
454
  loading="lazy"
455
455
  size="xl"
@@ -513,7 +513,7 @@ Array [
513
513
  alt="xxl"
514
514
  aspectRatio="square"
515
515
  className="lumx-avatar__thumbnail"
516
- 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"
516
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
517
517
  image="/demo-assets/avatar2.jpg"
518
518
  loading="lazy"
519
519
  size="xxl"
@@ -582,7 +582,7 @@ Array [
582
582
  alt="xs"
583
583
  aspectRatio="square"
584
584
  className="lumx-avatar__thumbnail"
585
- 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"
585
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
586
586
  image="/demo-assets/avatar3.jpg"
587
587
  loading="lazy"
588
588
  size="xs"
@@ -607,7 +607,7 @@ Array [
607
607
  alt="s"
608
608
  aspectRatio="square"
609
609
  className="lumx-avatar__thumbnail"
610
- 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"
610
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
611
611
  image="/demo-assets/avatar3.jpg"
612
612
  loading="lazy"
613
613
  size="s"
@@ -632,7 +632,7 @@ Array [
632
632
  alt="m"
633
633
  aspectRatio="square"
634
634
  className="lumx-avatar__thumbnail"
635
- 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"
635
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
636
636
  image="/demo-assets/avatar3.jpg"
637
637
  loading="lazy"
638
638
  size="m"
@@ -657,7 +657,7 @@ Array [
657
657
  alt="l"
658
658
  aspectRatio="square"
659
659
  className="lumx-avatar__thumbnail"
660
- 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"
660
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
661
661
  image="/demo-assets/avatar3.jpg"
662
662
  loading="lazy"
663
663
  size="l"
@@ -682,7 +682,7 @@ Array [
682
682
  alt="xl"
683
683
  aspectRatio="square"
684
684
  className="lumx-avatar__thumbnail"
685
- 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"
685
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
686
686
  image="/demo-assets/avatar3.jpg"
687
687
  loading="lazy"
688
688
  size="xl"
@@ -707,7 +707,7 @@ Array [
707
707
  alt="xxl"
708
708
  aspectRatio="square"
709
709
  className="lumx-avatar__thumbnail"
710
- 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"
710
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
711
711
  image="/demo-assets/avatar3.jpg"
712
712
  loading="lazy"
713
713
  size="xxl"
@@ -737,7 +737,7 @@ Array [
737
737
  alt="xs"
738
738
  aspectRatio="square"
739
739
  className="lumx-avatar__thumbnail"
740
- 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"
740
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
741
741
  image="/demo-assets/portrait3.jpg"
742
742
  loading="lazy"
743
743
  size="xs"
@@ -751,7 +751,7 @@ Array [
751
751
  alt="s"
752
752
  aspectRatio="square"
753
753
  className="lumx-avatar__thumbnail"
754
- 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"
754
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
755
755
  image="/demo-assets/portrait3.jpg"
756
756
  loading="lazy"
757
757
  size="s"
@@ -765,7 +765,7 @@ Array [
765
765
  alt="m"
766
766
  aspectRatio="square"
767
767
  className="lumx-avatar__thumbnail"
768
- 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"
768
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
769
769
  image="/demo-assets/portrait3.jpg"
770
770
  loading="lazy"
771
771
  size="m"
@@ -779,7 +779,7 @@ Array [
779
779
  alt="l"
780
780
  aspectRatio="square"
781
781
  className="lumx-avatar__thumbnail"
782
- 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"
782
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
783
783
  image="/demo-assets/portrait3.jpg"
784
784
  loading="lazy"
785
785
  size="l"
@@ -793,7 +793,7 @@ Array [
793
793
  alt="xl"
794
794
  aspectRatio="square"
795
795
  className="lumx-avatar__thumbnail"
796
- 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"
796
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
797
797
  image="/demo-assets/portrait3.jpg"
798
798
  loading="lazy"
799
799
  size="xl"
@@ -807,7 +807,7 @@ Array [
807
807
  alt="xxl"
808
808
  aspectRatio="square"
809
809
  className="lumx-avatar__thumbnail"
810
- 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"
810
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
811
811
  image="/demo-assets/portrait3.jpg"
812
812
  loading="lazy"
813
813
  size="xxl"
package/src/components/drag-handle/DragHandle.tsx CHANGED
@@ -40,7 +40,11 @@ export const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((pro
40
40
  {...forwardedProps}
41
41
  className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}
42
42
  >
43
- <Icon icon={mdiDragVertical} color={theme === Theme.dark ? ColorPalette.light : undefined} size={Size.xs} />
43
+ <Icon
44
+ icon={mdiDragVertical}
45
+ color={theme === Theme.dark ? ColorPalette.light : ColorPalette.dark}
46
+ size={Size.xs}
47
+ />
44
48
  </div>
45
49
  );
46
50
  });
package/src/components/flag/Flag.test.tsx CHANGED
@@ -69,9 +69,8 @@ describe(`<${Flag.displayName} />`, () => {
69
69
 
70
70
  it('should use the color', () => {
71
71
  const color = ColorPalette.green;
72
- const { wrapper, iconEl } = setup({ icon: mdiAbTesting, color });
72
+ const { wrapper } = setup({ icon: mdiAbTesting, color });
73
73
 
74
- expect(iconEl.prop('color')).toEqual(color);
75
74
  expect(wrapper).toHaveClassName(
76
75
  getBasicClass({
77
76
  prefix: CLASSNAME,
package/src/components/flag/Flag.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { forwardRef } from 'react';
2
2
  import classNames from 'classnames';
3
3
 
4
- import { ColorPalette, ColorVariant, Icon, Size, Theme } from '@lumx/react';
4
+ import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
5
5
  import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
6
6
 
7
7
  export interface FlagProps extends GenericProps {
@@ -38,15 +38,7 @@ export const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) =>
38
38
  className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor }))}
39
39
  ref={ref}
40
40
  >
41
- {icon && (
42
- <Icon
43
- icon={icon}
44
- color={color}
45
- colorVariant={ColorVariant.D2}
46
- size={Size.xxs}
47
- className={`${CLASSNAME}__icon`}
48
- />
49
- )}
41
+ {icon && <Icon icon={icon} size={Size.xxs} className={`${CLASSNAME}__icon`} />}
50
42
  <span className={`${CLASSNAME}__label`}>{label}</span>
51
43
  </div>
52
44
  );
package/src/components/flag/__snapshots__/Flag.test.tsx.snap CHANGED
@@ -19,8 +19,6 @@ Array [
19
19
  >
20
20
  <Icon
21
21
  className="lumx-flag__icon"
22
- color="blue"
23
- colorVariant="D2"
24
22
  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"
25
23
  size="xxs"
26
24
  />
@@ -35,8 +33,6 @@ Array [
35
33
  >
36
34
  <Icon
37
35
  className="lumx-flag__icon"
38
- color="dark"
39
- colorVariant="D2"
40
36
  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"
41
37
  size="xxs"
42
38
  />
@@ -51,8 +47,6 @@ Array [
51
47
  >
52
48
  <Icon
53
49
  className="lumx-flag__icon"
54
- color="green"
55
- colorVariant="D2"
56
50
  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"
57
51
  size="xxs"
58
52
  />
@@ -67,8 +61,6 @@ Array [
67
61
  >
68
62
  <Icon
69
63
  className="lumx-flag__icon"
70
- color="primary"
71
- colorVariant="D2"
72
64
  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"
73
65
  size="xxs"
74
66
  />
@@ -83,8 +75,6 @@ Array [
83
75
  >
84
76
  <Icon
85
77
  className="lumx-flag__icon"
86
- color="red"
87
- colorVariant="D2"
88
78
  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"
89
79
  size="xxs"
90
80
  />
@@ -99,8 +89,6 @@ Array [
99
89
  >
100
90
  <Icon
101
91
  className="lumx-flag__icon"
102
- color="secondary"
103
- colorVariant="D2"
104
92
  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"
105
93
  size="xxs"
106
94
  />
@@ -115,8 +103,6 @@ Array [
115
103
  >
116
104
  <Icon
117
105
  className="lumx-flag__icon"
118
- color="yellow"
119
- colorVariant="D2"
120
106
  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"
121
107
  size="xxs"
122
108
  />
@@ -135,7 +121,6 @@ exports[`<Flag /> Snapshots and structure should render story 'withIcon' 1`] = `
135
121
  >
136
122
  <Icon
137
123
  className="lumx-flag__icon"
138
- colorVariant="D2"
139
124
  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"
140
125
  size="xxs"
141
126
  />
package/src/components/icon/Icon.tsx CHANGED
@@ -52,11 +52,20 @@ const DEFAULT_PROPS: Partial<IconProps> = {};
52
52
  */
53
53
  export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
54
54
  const { className, color, colorVariant, hasShape, icon, size, theme, ...forwardedProps } = props;
55
+
55
56
  let iconColor;
57
+ let iconColorVariant;
56
58
  if (color) {
57
59
  iconColor = color;
60
+ iconColorVariant = colorVariant;
58
61
  } else if (theme) {
59
62
  iconColor = theme === Theme.light ? ColorPalette.dark : ColorPalette.light;
63
+
64
+ if (colorVariant) {
65
+ iconColorVariant = colorVariant;
66
+ } else {
67
+ iconColorVariant = Theme.light ? 'L1' : 'N';
68
+ }
60
69
  } else if (hasShape) {
61
70
  iconColor = ColorPalette.dark;
62
71
  }
@@ -86,7 +95,7 @@ export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
86
95
  className,
87
96
  handleBasicClasses({
88
97
  color: iconColor,
89
- colorVariant,
98
+ colorVariant: iconColorVariant,
90
99
  hasShape,
91
100
  prefix: CLASSNAME,
92
101
  size: iconSize,
package/src/components/image-block/ImageBlock.tsx CHANGED
@@ -118,7 +118,6 @@ export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((pro
118
118
  <Thumbnail
119
119
  {...thumbnailProps}
120
120
  className={classNames(`${CLASSNAME}__image`, thumbnailProps?.className)}
121
- fillHeight={fillHeight}
122
121
  align={align}
123
122
  image={image}
124
123
  size={size}
package/src/components/image-block/__snapshots__/ImageBlock.test.tsx.snap CHANGED
@@ -9,7 +9,7 @@ exports[`<ImageBlock> Snapshots and structure should render story 'DefaultImageB
9
9
  alt="Image alt text"
10
10
  aspectRatio="square"
11
11
  className="lumx-image-block__image"
12
- 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"
12
+ fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
13
13
  focusPoint={
14
14
  Object {
15
15
  "x": 0,
package/src/components/message/Message.tsx CHANGED
@@ -62,8 +62,8 @@ export const Message: Comp<MessageProps, HTMLDivElement> = forwardRef((props, re
62
62
  )}
63
63
  {...forwardedProps}
64
64
  >
65
- {(customIcon || icon) && <Icon className="lumx-message__icon" icon={customIcon || icon} size={Size.xs} />}
66
- <div className="lumx-message__text">{children}</div>
65
+ {(customIcon || icon) && <Icon className={`${CLASSNAME}__icon`} icon={customIcon || icon} size={Size.xs} />}
66
+ <div className={`${CLASSNAME}__text`}>{children}</div>
67
67
  </div>
68
68
  );
69
69
  });