@lumx/react 2.1.9 → 2.2.1

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 (68) hide show
  1. package/esm/_internal/Avatar2.js +7 -2
  2. package/esm/_internal/Avatar2.js.map +1 -1
  3. package/esm/_internal/Slider2.js +21 -2
  4. package/esm/_internal/Slider2.js.map +1 -1
  5. package/esm/_internal/Thumbnail2.js +181 -782
  6. package/esm/_internal/Thumbnail2.js.map +1 -1
  7. package/esm/_internal/Tooltip2.js +0 -5
  8. package/esm/_internal/Tooltip2.js.map +1 -1
  9. package/esm/_internal/UserBlock.js +41 -17
  10. package/esm/_internal/UserBlock.js.map +1 -1
  11. package/esm/_internal/avatar.js +0 -3
  12. package/esm/_internal/avatar.js.map +1 -1
  13. package/esm/_internal/comment-block.js +0 -3
  14. package/esm/_internal/comment-block.js.map +1 -1
  15. package/esm/_internal/image-block.js +0 -3
  16. package/esm/_internal/image-block.js.map +1 -1
  17. package/esm/_internal/link-preview.js +0 -3
  18. package/esm/_internal/link-preview.js.map +1 -1
  19. package/esm/_internal/mdi.js +2 -2
  20. package/esm/_internal/mdi.js.map +1 -1
  21. package/esm/_internal/mosaic.js +0 -3
  22. package/esm/_internal/mosaic.js.map +1 -1
  23. package/esm/_internal/post-block.js +0 -3
  24. package/esm/_internal/post-block.js.map +1 -1
  25. package/esm/_internal/slider.js +1 -2
  26. package/esm/_internal/slider.js.map +1 -1
  27. package/esm/_internal/thumbnail.js +1 -4
  28. package/esm/_internal/thumbnail.js.map +1 -1
  29. package/esm/_internal/types.js +1 -0
  30. package/esm/_internal/types.js.map +1 -1
  31. package/esm/_internal/user-block.js +2 -3
  32. package/esm/_internal/user-block.js.map +1 -1
  33. package/esm/index.js +2 -4
  34. package/esm/index.js.map +1 -1
  35. package/package.json +4 -4
  36. package/src/components/avatar/Avatar.stories.tsx +30 -53
  37. package/src/components/avatar/Avatar.tsx +9 -0
  38. package/src/components/avatar/__snapshots__/Avatar.test.tsx.snap +220 -357
  39. package/src/components/image-block/__snapshots__/ImageBlock.test.tsx.snap +1 -1
  40. package/src/components/mosaic/__snapshots__/Mosaic.test.tsx.snap +30 -30
  41. package/src/components/post-block/__snapshots__/PostBlock.test.tsx.snap +1 -1
  42. package/src/components/slideshow/__snapshots__/Slideshow.test.tsx.snap +10 -10
  43. package/src/components/table/__snapshots__/Table.test.tsx.snap +3 -3
  44. package/src/components/thumbnail/Thumbnail.stories.tsx +428 -52
  45. package/src/components/thumbnail/Thumbnail.test.tsx +8 -2
  46. package/src/components/thumbnail/Thumbnail.tsx +84 -47
  47. package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap +28 -81
  48. package/src/components/thumbnail/index.ts +1 -0
  49. package/src/components/thumbnail/useFocusPointStyle.tsx +89 -0
  50. package/src/components/thumbnail/useImageLoad.ts +24 -23
  51. package/src/components/tooltip/Tooltip.stories.tsx +7 -4
  52. package/src/components/tooltip/useInjectTooltipRef.tsx +1 -3
  53. package/src/components/user-block/UserBlock.stories.tsx +65 -105
  54. package/src/components/user-block/UserBlock.test.tsx +6 -0
  55. package/src/components/user-block/UserBlock.tsx +50 -25
  56. package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap +113 -144
  57. package/src/stories/generated/Badge/Demos.stories.tsx +1 -0
  58. package/src/stories/generated/Flag/Demos.stories.tsx +6 -0
  59. package/src/stories/generated/List/Demos.stories.tsx +2 -0
  60. package/src/stories/generated/Thumbnail/Demos.stories.tsx +1 -0
  61. package/src/stories/knobs/focusKnob.ts +1 -1
  62. package/src/stories/knobs/image.ts +35 -3
  63. package/src/stories/utils/CustomLink.tsx +7 -0
  64. package/types.d.ts +21 -4
  65. package/esm/_internal/clamp.js +0 -22
  66. package/esm/_internal/clamp.js.map +0 -1
  67. package/src/components/thumbnail/useClickable.ts +0 -26
  68. package/src/components/thumbnail/useFocusPoint.ts +0 -154
package/src/components/avatar/__snapshots__/Avatar.test.tsx.snap CHANGED
@@ -1,60 +1,15 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`<Avatar> Snapshots and structure should render story 'AvatarClickable' 1`] = `
3
+ exports[`<Avatar> Snapshots and structure should render story 'Clickable' 1`] = `
4
4
  Array [
5
5
  <div
6
- className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"
7
- >
8
- <Thumbnail
9
- alt="xs"
10
- aspectRatio="square"
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"
13
- image="/demo-assets/avatar2.jpg"
14
- loading="lazy"
15
- onClick={[Function]}
16
- size="xs"
17
- theme="light"
18
- />
19
- </div>,
20
- <div
21
- className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-s lumx-avatar--theme-light"
22
- >
23
- <Thumbnail
24
- alt="s"
25
- aspectRatio="square"
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"
28
- image="/demo-assets/avatar2.jpg"
29
- loading="lazy"
30
- onClick={[Function]}
31
- size="s"
32
- theme="light"
33
- />
34
- </div>,
35
- <div
36
- className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-m lumx-avatar--theme-light"
37
- >
38
- <Thumbnail
39
- alt="m"
40
- aspectRatio="square"
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"
43
- image="/demo-assets/avatar2.jpg"
44
- loading="lazy"
45
- onClick={[Function]}
46
- size="m"
47
- theme="light"
48
- />
49
- </div>,
50
- <div
51
- className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-l lumx-avatar--theme-light"
6
+ className="lumx-avatar lumx-avatar--size-l lumx-avatar--theme-light"
52
7
  >
53
8
  <Thumbnail
54
- alt="l"
9
+ alt="avatar2"
55
10
  aspectRatio="square"
56
11
  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"
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"
58
13
  image="/demo-assets/avatar2.jpg"
59
14
  loading="lazy"
60
15
  onClick={[Function]}
@@ -63,39 +18,43 @@ Array [
63
18
  />
64
19
  </div>,
65
20
  <div
66
- className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xl lumx-avatar--theme-light"
21
+ className="lumx-avatar lumx-avatar--size-l lumx-avatar--theme-light"
67
22
  >
68
23
  <Thumbnail
69
- alt="xl"
24
+ alt="avatar2"
70
25
  aspectRatio="square"
71
26
  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"
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"
73
28
  image="/demo-assets/avatar2.jpg"
29
+ linkProps={
30
+ Object {
31
+ "href": "https://example.com",
32
+ }
33
+ }
74
34
  loading="lazy"
75
- onClick={[Function]}
76
- size="xl"
35
+ size="l"
77
36
  theme="light"
78
37
  />
79
38
  </div>,
80
39
  <div
81
- className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xxl lumx-avatar--theme-light"
40
+ className="lumx-avatar lumx-avatar--size-l lumx-avatar--theme-light"
82
41
  >
83
42
  <Thumbnail
84
- alt="xxl"
43
+ alt="avatar2"
85
44
  aspectRatio="square"
86
45
  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"
46
+ 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
47
  image="/demo-assets/avatar2.jpg"
48
+ linkAs={[Function]}
89
49
  loading="lazy"
90
- onClick={[Function]}
91
- size="xxl"
50
+ size="l"
92
51
  theme="light"
93
52
  />
94
53
  </div>,
95
54
  ]
96
55
  `;
97
56
 
98
- exports[`<Avatar> Snapshots and structure should render story 'AvatarSizes' 1`] = `
57
+ exports[`<Avatar> Snapshots and structure should render story 'Sizes' 1`] = `
99
58
  Array [
100
59
  <div
101
60
  className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"
@@ -104,7 +63,7 @@ Array [
104
63
  alt="xs"
105
64
  aspectRatio="square"
106
65
  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"
66
+ 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
67
  image="/demo-assets/avatar1.jpg"
109
68
  loading="lazy"
110
69
  size="xs"
@@ -118,7 +77,7 @@ Array [
118
77
  alt="s"
119
78
  aspectRatio="square"
120
79
  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"
80
+ 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
81
  image="/demo-assets/avatar1.jpg"
123
82
  loading="lazy"
124
83
  size="s"
@@ -132,7 +91,7 @@ Array [
132
91
  alt="m"
133
92
  aspectRatio="square"
134
93
  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"
94
+ 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
95
  image="/demo-assets/avatar1.jpg"
137
96
  loading="lazy"
138
97
  size="m"
@@ -146,7 +105,7 @@ Array [
146
105
  alt="l"
147
106
  aspectRatio="square"
148
107
  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"
108
+ 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
109
  image="/demo-assets/avatar1.jpg"
151
110
  loading="lazy"
152
111
  size="l"
@@ -160,7 +119,7 @@ Array [
160
119
  alt="xl"
161
120
  aspectRatio="square"
162
121
  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"
122
+ 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
123
  image="/demo-assets/avatar1.jpg"
165
124
  loading="lazy"
166
125
  size="xl"
@@ -174,7 +133,7 @@ Array [
174
133
  alt="xxl"
175
134
  aspectRatio="square"
176
135
  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"
136
+ 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
137
  image="/demo-assets/avatar1.jpg"
179
138
  loading="lazy"
180
139
  size="xxl"
@@ -184,7 +143,7 @@ Array [
184
143
  ]
185
144
  `;
186
145
 
187
- exports[`<Avatar> Snapshots and structure should render story 'AvatarWithActions' 1`] = `
146
+ exports[`<Avatar> Snapshots and structure should render story 'WithActions' 1`] = `
188
147
  Array [
189
148
  <div
190
149
  className="lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"
@@ -193,7 +152,7 @@ Array [
193
152
  alt="xs"
194
153
  aspectRatio="square"
195
154
  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"
155
+ 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
156
  image="/demo-assets/avatar2.jpg"
198
157
  loading="lazy"
199
158
  size="xs"
@@ -202,52 +161,36 @@ Array [
202
161
  <div
203
162
  className="lumx-avatar__actions"
204
163
  >
205
- <div
206
- style={
207
- Object {
208
- "display": "flex",
209
- "justifyContent": "center",
210
- }
211
- }
164
+ <FlexBox
165
+ gap="regular"
166
+ orientation="horizontal"
167
+ vAlign="center"
212
168
  >
213
- <div
214
- className="lumx-spacing-margin-right-regular"
215
- >
216
- <IconButton
217
- color="dark"
218
- emphasis="low"
219
- hasBackground={true}
220
- icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
221
- label="Edit"
222
- size="s"
223
- theme="light"
224
- />
225
- </div>
226
- <div
227
- className="lumx-spacing-margin-right-regular"
228
- >
229
- <IconButton
230
- color="dark"
231
- emphasis="low"
232
- hasBackground={true}
233
- icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
234
- label="See"
235
- size="s"
236
- theme="light"
237
- />
238
- </div>
239
- <div>
240
- <IconButton
241
- color="dark"
242
- emphasis="low"
243
- hasBackground={true}
244
- icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
245
- label="Delete"
246
- size="s"
247
- theme="light"
248
- />
249
- </div>
250
- </div>
169
+ <IconButton
170
+ emphasis="low"
171
+ hasBackground={true}
172
+ icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
173
+ label="Edit"
174
+ size="s"
175
+ theme="light"
176
+ />
177
+ <IconButton
178
+ emphasis="low"
179
+ hasBackground={true}
180
+ icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
181
+ label="See"
182
+ size="s"
183
+ theme="light"
184
+ />
185
+ <IconButton
186
+ emphasis="low"
187
+ hasBackground={true}
188
+ icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
189
+ label="Delete"
190
+ size="s"
191
+ theme="light"
192
+ />
193
+ </FlexBox>
251
194
  </div>
252
195
  </div>,
253
196
  <div
@@ -257,7 +200,7 @@ Array [
257
200
  alt="s"
258
201
  aspectRatio="square"
259
202
  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"
203
+ 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
204
  image="/demo-assets/avatar2.jpg"
262
205
  loading="lazy"
263
206
  size="s"
@@ -266,52 +209,36 @@ Array [
266
209
  <div
267
210
  className="lumx-avatar__actions"
268
211
  >
269
- <div
270
- style={
271
- Object {
272
- "display": "flex",
273
- "justifyContent": "center",
274
- }
275
- }
212
+ <FlexBox
213
+ gap="regular"
214
+ orientation="horizontal"
215
+ vAlign="center"
276
216
  >
277
- <div
278
- className="lumx-spacing-margin-right-regular"
279
- >
280
- <IconButton
281
- color="dark"
282
- emphasis="low"
283
- hasBackground={true}
284
- icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
285
- label="Edit"
286
- size="s"
287
- theme="light"
288
- />
289
- </div>
290
- <div
291
- className="lumx-spacing-margin-right-regular"
292
- >
293
- <IconButton
294
- color="dark"
295
- emphasis="low"
296
- hasBackground={true}
297
- icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
298
- label="See"
299
- size="s"
300
- theme="light"
301
- />
302
- </div>
303
- <div>
304
- <IconButton
305
- color="dark"
306
- emphasis="low"
307
- hasBackground={true}
308
- icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
309
- label="Delete"
310
- size="s"
311
- theme="light"
312
- />
313
- </div>
314
- </div>
217
+ <IconButton
218
+ emphasis="low"
219
+ hasBackground={true}
220
+ icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
221
+ label="Edit"
222
+ size="s"
223
+ theme="light"
224
+ />
225
+ <IconButton
226
+ emphasis="low"
227
+ hasBackground={true}
228
+ icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
229
+ label="See"
230
+ size="s"
231
+ theme="light"
232
+ />
233
+ <IconButton
234
+ emphasis="low"
235
+ hasBackground={true}
236
+ icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
237
+ label="Delete"
238
+ size="s"
239
+ theme="light"
240
+ />
241
+ </FlexBox>
315
242
  </div>
316
243
  </div>,
317
244
  <div
@@ -321,7 +248,7 @@ Array [
321
248
  alt="m"
322
249
  aspectRatio="square"
323
250
  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"
251
+ 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
252
  image="/demo-assets/avatar2.jpg"
326
253
  loading="lazy"
327
254
  size="m"
@@ -330,52 +257,36 @@ Array [
330
257
  <div
331
258
  className="lumx-avatar__actions"
332
259
  >
333
- <div
334
- style={
335
- Object {
336
- "display": "flex",
337
- "justifyContent": "center",
338
- }
339
- }
260
+ <FlexBox
261
+ gap="regular"
262
+ orientation="horizontal"
263
+ vAlign="center"
340
264
  >
341
- <div
342
- className="lumx-spacing-margin-right-regular"
343
- >
344
- <IconButton
345
- color="dark"
346
- emphasis="low"
347
- hasBackground={true}
348
- icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
349
- label="Edit"
350
- size="s"
351
- theme="light"
352
- />
353
- </div>
354
- <div
355
- className="lumx-spacing-margin-right-regular"
356
- >
357
- <IconButton
358
- color="dark"
359
- emphasis="low"
360
- hasBackground={true}
361
- icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
362
- label="See"
363
- size="s"
364
- theme="light"
365
- />
366
- </div>
367
- <div>
368
- <IconButton
369
- color="dark"
370
- emphasis="low"
371
- hasBackground={true}
372
- icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
373
- label="Delete"
374
- size="s"
375
- theme="light"
376
- />
377
- </div>
378
- </div>
265
+ <IconButton
266
+ emphasis="low"
267
+ hasBackground={true}
268
+ icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
269
+ label="Edit"
270
+ size="s"
271
+ theme="light"
272
+ />
273
+ <IconButton
274
+ emphasis="low"
275
+ hasBackground={true}
276
+ icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
277
+ label="See"
278
+ size="s"
279
+ theme="light"
280
+ />
281
+ <IconButton
282
+ emphasis="low"
283
+ hasBackground={true}
284
+ icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
285
+ label="Delete"
286
+ size="s"
287
+ theme="light"
288
+ />
289
+ </FlexBox>
379
290
  </div>
380
291
  </div>,
381
292
  <div
@@ -385,7 +296,7 @@ Array [
385
296
  alt="l"
386
297
  aspectRatio="square"
387
298
  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"
299
+ 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
300
  image="/demo-assets/avatar2.jpg"
390
301
  loading="lazy"
391
302
  size="l"
@@ -394,52 +305,36 @@ Array [
394
305
  <div
395
306
  className="lumx-avatar__actions"
396
307
  >
397
- <div
398
- style={
399
- Object {
400
- "display": "flex",
401
- "justifyContent": "center",
402
- }
403
- }
308
+ <FlexBox
309
+ gap="regular"
310
+ orientation="horizontal"
311
+ vAlign="center"
404
312
  >
405
- <div
406
- className="lumx-spacing-margin-right-regular"
407
- >
408
- <IconButton
409
- color="dark"
410
- emphasis="low"
411
- hasBackground={true}
412
- icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
413
- label="Edit"
414
- size="s"
415
- theme="light"
416
- />
417
- </div>
418
- <div
419
- className="lumx-spacing-margin-right-regular"
420
- >
421
- <IconButton
422
- color="dark"
423
- emphasis="low"
424
- hasBackground={true}
425
- icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
426
- label="See"
427
- size="s"
428
- theme="light"
429
- />
430
- </div>
431
- <div>
432
- <IconButton
433
- color="dark"
434
- emphasis="low"
435
- hasBackground={true}
436
- icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
437
- label="Delete"
438
- size="s"
439
- theme="light"
440
- />
441
- </div>
442
- </div>
313
+ <IconButton
314
+ emphasis="low"
315
+ hasBackground={true}
316
+ icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
317
+ label="Edit"
318
+ size="s"
319
+ theme="light"
320
+ />
321
+ <IconButton
322
+ emphasis="low"
323
+ hasBackground={true}
324
+ icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
325
+ label="See"
326
+ size="s"
327
+ theme="light"
328
+ />
329
+ <IconButton
330
+ emphasis="low"
331
+ hasBackground={true}
332
+ icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
333
+ label="Delete"
334
+ size="s"
335
+ theme="light"
336
+ />
337
+ </FlexBox>
443
338
  </div>
444
339
  </div>,
445
340
  <div
@@ -449,7 +344,7 @@ Array [
449
344
  alt="xl"
450
345
  aspectRatio="square"
451
346
  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"
347
+ 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
348
  image="/demo-assets/avatar2.jpg"
454
349
  loading="lazy"
455
350
  size="xl"
@@ -458,52 +353,36 @@ Array [
458
353
  <div
459
354
  className="lumx-avatar__actions"
460
355
  >
461
- <div
462
- style={
463
- Object {
464
- "display": "flex",
465
- "justifyContent": "center",
466
- }
467
- }
356
+ <FlexBox
357
+ gap="regular"
358
+ orientation="horizontal"
359
+ vAlign="center"
468
360
  >
469
- <div
470
- className="lumx-spacing-margin-right-regular"
471
- >
472
- <IconButton
473
- color="dark"
474
- emphasis="low"
475
- hasBackground={true}
476
- icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
477
- label="Edit"
478
- size="s"
479
- theme="light"
480
- />
481
- </div>
482
- <div
483
- className="lumx-spacing-margin-right-regular"
484
- >
485
- <IconButton
486
- color="dark"
487
- emphasis="low"
488
- hasBackground={true}
489
- icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
490
- label="See"
491
- size="s"
492
- theme="light"
493
- />
494
- </div>
495
- <div>
496
- <IconButton
497
- color="dark"
498
- emphasis="low"
499
- hasBackground={true}
500
- icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
501
- label="Delete"
502
- size="s"
503
- theme="light"
504
- />
505
- </div>
506
- </div>
361
+ <IconButton
362
+ emphasis="low"
363
+ hasBackground={true}
364
+ icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
365
+ label="Edit"
366
+ size="s"
367
+ theme="light"
368
+ />
369
+ <IconButton
370
+ emphasis="low"
371
+ hasBackground={true}
372
+ icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
373
+ label="See"
374
+ size="s"
375
+ theme="light"
376
+ />
377
+ <IconButton
378
+ emphasis="low"
379
+ hasBackground={true}
380
+ icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
381
+ label="Delete"
382
+ size="s"
383
+ theme="light"
384
+ />
385
+ </FlexBox>
507
386
  </div>
508
387
  </div>,
509
388
  <div
@@ -513,7 +392,7 @@ Array [
513
392
  alt="xxl"
514
393
  aspectRatio="square"
515
394
  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"
395
+ 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
396
  image="/demo-assets/avatar2.jpg"
518
397
  loading="lazy"
519
398
  size="xxl"
@@ -522,58 +401,42 @@ Array [
522
401
  <div
523
402
  className="lumx-avatar__actions"
524
403
  >
525
- <div
526
- style={
527
- Object {
528
- "display": "flex",
529
- "justifyContent": "center",
530
- }
531
- }
404
+ <FlexBox
405
+ gap="regular"
406
+ orientation="horizontal"
407
+ vAlign="center"
532
408
  >
533
- <div
534
- className="lumx-spacing-margin-right-regular"
535
- >
536
- <IconButton
537
- color="dark"
538
- emphasis="low"
539
- hasBackground={true}
540
- icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
541
- label="Edit"
542
- size="s"
543
- theme="light"
544
- />
545
- </div>
546
- <div
547
- className="lumx-spacing-margin-right-regular"
548
- >
549
- <IconButton
550
- color="dark"
551
- emphasis="low"
552
- hasBackground={true}
553
- icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
554
- label="See"
555
- size="s"
556
- theme="light"
557
- />
558
- </div>
559
- <div>
560
- <IconButton
561
- color="dark"
562
- emphasis="low"
563
- hasBackground={true}
564
- icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
565
- label="Delete"
566
- size="s"
567
- theme="light"
568
- />
569
- </div>
570
- </div>
409
+ <IconButton
410
+ emphasis="low"
411
+ hasBackground={true}
412
+ icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
413
+ label="Edit"
414
+ size="s"
415
+ theme="light"
416
+ />
417
+ <IconButton
418
+ emphasis="low"
419
+ hasBackground={true}
420
+ icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
421
+ label="See"
422
+ size="s"
423
+ theme="light"
424
+ />
425
+ <IconButton
426
+ emphasis="low"
427
+ hasBackground={true}
428
+ icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
429
+ label="Delete"
430
+ size="s"
431
+ theme="light"
432
+ />
433
+ </FlexBox>
571
434
  </div>
572
435
  </div>,
573
436
  ]
574
437
  `;
575
438
 
576
- exports[`<Avatar> Snapshots and structure should render story 'AvatarWithBadge' 1`] = `
439
+ exports[`<Avatar> Snapshots and structure should render story 'WithBadge' 1`] = `
577
440
  Array [
578
441
  <div
579
442
  className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"
@@ -582,7 +445,7 @@ Array [
582
445
  alt="xs"
583
446
  aspectRatio="square"
584
447
  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"
448
+ 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
449
  image="/demo-assets/avatar3.jpg"
587
450
  loading="lazy"
588
451
  size="xs"
@@ -607,7 +470,7 @@ Array [
607
470
  alt="s"
608
471
  aspectRatio="square"
609
472
  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"
473
+ 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
474
  image="/demo-assets/avatar3.jpg"
612
475
  loading="lazy"
613
476
  size="s"
@@ -632,7 +495,7 @@ Array [
632
495
  alt="m"
633
496
  aspectRatio="square"
634
497
  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"
498
+ 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
499
  image="/demo-assets/avatar3.jpg"
637
500
  loading="lazy"
638
501
  size="m"
@@ -657,7 +520,7 @@ Array [
657
520
  alt="l"
658
521
  aspectRatio="square"
659
522
  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"
523
+ 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
524
  image="/demo-assets/avatar3.jpg"
662
525
  loading="lazy"
663
526
  size="l"
@@ -682,7 +545,7 @@ Array [
682
545
  alt="xl"
683
546
  aspectRatio="square"
684
547
  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"
548
+ 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
549
  image="/demo-assets/avatar3.jpg"
687
550
  loading="lazy"
688
551
  size="xl"
@@ -707,7 +570,7 @@ Array [
707
570
  alt="xxl"
708
571
  aspectRatio="square"
709
572
  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"
573
+ 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
574
  image="/demo-assets/avatar3.jpg"
712
575
  loading="lazy"
713
576
  size="xxl"
@@ -728,7 +591,7 @@ Array [
728
591
  ]
729
592
  `;
730
593
 
731
- exports[`<Avatar> Snapshots and structure should render story 'AvatarWithRectangularImage' 1`] = `
594
+ exports[`<Avatar> Snapshots and structure should render story 'WithRectangularImage' 1`] = `
732
595
  Array [
733
596
  <div
734
597
  className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"
@@ -737,7 +600,7 @@ Array [
737
600
  alt="xs"
738
601
  aspectRatio="square"
739
602
  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"
603
+ 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
604
  image="/demo-assets/portrait3.jpg"
742
605
  loading="lazy"
743
606
  size="xs"
@@ -751,7 +614,7 @@ Array [
751
614
  alt="s"
752
615
  aspectRatio="square"
753
616
  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"
617
+ 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
618
  image="/demo-assets/portrait3.jpg"
756
619
  loading="lazy"
757
620
  size="s"
@@ -765,7 +628,7 @@ Array [
765
628
  alt="m"
766
629
  aspectRatio="square"
767
630
  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"
631
+ 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
632
  image="/demo-assets/portrait3.jpg"
770
633
  loading="lazy"
771
634
  size="m"
@@ -779,7 +642,7 @@ Array [
779
642
  alt="l"
780
643
  aspectRatio="square"
781
644
  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"
645
+ 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
646
  image="/demo-assets/portrait3.jpg"
784
647
  loading="lazy"
785
648
  size="l"
@@ -793,7 +656,7 @@ Array [
793
656
  alt="xl"
794
657
  aspectRatio="square"
795
658
  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"
659
+ 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
660
  image="/demo-assets/portrait3.jpg"
798
661
  loading="lazy"
799
662
  size="xl"
@@ -807,7 +670,7 @@ Array [
807
670
  alt="xxl"
808
671
  aspectRatio="square"
809
672
  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"
673
+ 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
674
  image="/demo-assets/portrait3.jpg"
812
675
  loading="lazy"
813
676
  size="xxl"