ActionGroup:staticColor=white

Build 918 on main
1200px
Reviewing disabled
chromechrome
Unchanged
firefoxfirefox
Changed
BaselineBuild 853 on main
View Storybook
View Storybook
Baseline History
Build 918bae640a current baseline
Current build. Auto-accepted
Build 918bae640a
Inherited baseline identical to build 853
Build 853adae13c
Accepted by Robert Snow.
Build 841e14088a
Accepted by Robert Snow.
Build 549424432c
Auto-accepted
Build 548424432c
Accepted by Robert Snow.
Commenting is disabled because there's a newer build on this branch
DOM Diff
file.html a CHANGED
@@ -1,112 +1,243 @@
1
- <div style="display: flex; flex-direction: column; min-height: 1000px;">
2
- <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily YqfL3a_spectrum--light rfm_fq_spectrum--medium XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
3
- lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: light;">
4
- <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
5
- <h1 style="margin: 0px; padding: 0px;">light, medium, en-US</h1>
6
- <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
7
- <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
8
- loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
9
- </div>
 
10
  </div>
 
 
 
11
  </div>
12
- <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily YqfL3a_spectrum--light rfm_fq_spectrum--medium XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
13
- lang="ar-AE" dir="rtl" style="isolation: isolate; color-scheme: light;">
14
- <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
15
- <h1 style="margin: 0px; padding: 0px;">light, medium, ar-AE</h1>
16
- <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
17
- <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
18
- loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </div>
20
  </div>
21
- </div>
22
- <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily YqfL3a_spectrum--light _1DrGeG_spectrum--large XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
23
- lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: light;">
24
- <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
25
- <h1 style="margin: 0px; padding: 0px;">light, large, en-US</h1>
26
- <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
27
- <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
28
- loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
29
  </div>
30
  </div>
31
- </div>
32
- <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily YqfL3a_spectrum--light _1DrGeG_spectrum--large XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
33
- lang="ar-AE" dir="rtl" style="isolation: isolate; color-scheme: light;">
34
- <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
35
- <h1 style="margin: 0px; padding: 0px;">light, large, ar-AE</h1>
36
- <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
37
- <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
38
- loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
39
  </div>
40
  </div>
41
- </div>
42
- <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily VF2-xW_spectrum--dark rfm_fq_spectrum--medium XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
43
- lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: dark;">
44
- <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
45
- <h1 style="margin: 0px; padding: 0px;">dark, medium, en-US</h1>
46
- <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
47
- <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
48
- loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
49
  </div>
50
  </div>
51
- </div>
52
- <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily VF2-xW_spectrum--dark _1DrGeG_spectrum--large XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
53
- lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: dark;">
54
- <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
55
- <h1 style="margin: 0px; padding: 0px;">dark, large, en-US</h1>
56
- <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
57
- <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
58
- loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
59
  </div>
60
  </div>
61
- </div>
62
- <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily EV5Q3q_spectrum--lightest rfm_fq_spectrum--medium XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
63
- lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: light;">
64
- <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
65
- <h1 style="margin: 0px; padding: 0px;">lightest, medium, en-US</h1>
66
- <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
67
- <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
68
- loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
69
  </div>
70
  </div>
71
- </div>
72
- <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily EV5Q3q_spectrum--lightest _1DrGeG_spectrum--large XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
73
- lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: light;">
74
- <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
75
- <h1 style="margin: 0px; padding: 0px;">lightest, large, en-US</h1>
76
- <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
77
- <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
78
- loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
79
  </div>
80
  </div>
81
- </div>
82
- <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily R-l9gW_spectrum--darkest rfm_fq_spectrum--medium XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
83
- lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: dark;">
84
- <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
85
- <h1 style="margin: 0px; padding: 0px;">darkest, medium, en-US</h1>
86
- <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
87
- <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
88
- loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
89
  </div>
90
  </div>
91
- </div>
92
- <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily R-l9gW_spectrum--darkest _1DrGeG_spectrum--large XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
93
- lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: dark;">
94
- <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
95
- <h1 style="margin: 0px; padding: 0px;">darkest, large, en-US</h1>
96
- <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
97
- <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
98
- loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
99
  </div>
100
  </div>
101
- </div>
102
- <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily YqfL3a_spectrum--light rfm_fq_spectrum--medium u4Zobq_medium XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium u4Zobq_express"
103
- lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: light;">
104
- <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
105
- <h1 style="margin: 0px; padding: 0px;">express, light, medium, en-US</h1>
106
- <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
107
- <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
108
- loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
109
  </div>
110
  </div>
 
 
 
 
 
 
 
 
 
 
111
  </div>
112
- </div>
 
 
 
1
+ <div class="sb-preparing-story sb-wrapper">
2
+ <div class="sb-loader"></div>
3
+ </div>
4
+ <div class="sb-preparing-docs sb-wrapper">
5
+ <div class="sb-previewBlock">
6
+ <div class="sb-previewBlock_header">
7
+ <div class="sb-previewBlock_icon"></div>
8
+ <div class="sb-previewBlock_icon"></div>
9
+ <div class="sb-previewBlock_icon"></div>
10
+ <div class="sb-previewBlock_icon"></div>
11
  </div>
12
+ <div class="sb-previewBlock_body">
13
+ <div class="sb-loader"></div>
14
+ </div>
15
  </div>
16
+ <table aria-hidden="true" class="sb-argstableBlock">
17
+ <thead class="sb-argstableBlock-head">
18
+ <tr>
19
+ <th>
20
+ <span>Name</span>
21
+ </th>
22
+ <th>
23
+ <span>Description</span>
24
+ </th>
25
+ <th>
26
+ <span>Default</span>
27
+ </th>
28
+ <th>
29
+ <span>Control</span>
30
+ </th>
31
+ </tr>
32
+ </thead>
33
+ <tbody class="sb-argstableBlock-body">
34
+ <tr>
35
+ <td>
36
+ <span>propertyName</span>
37
+ <span title="Required">*</span>
38
+ </td>
39
+ <td>
40
+ <div>
41
+ <span>This is a short description</span>
42
+ </div>
43
+ <div class="sb-argstableBlock-summary">
44
+ <div>
45
+ <span class="sb-argstableBlock-code">summary</span>
46
+ </div>
47
+ </div>
48
+ </td>
49
+ <td>
50
+ <div>
51
+ <span class="sb-argstableBlock-code">defaultValue</span>
52
+ </div>
53
+ </td>
54
+ <td>
55
+ <button>Set string</button>
56
+ </td>
57
+ </tr>
58
+ <tr>
59
+ <td>
60
+ <span>propertyName</span>
61
+ <span>*</span>
62
+ </td>
63
+ <td>
64
+ <div>
65
+ <span>This is a short description</span>
66
+ </div>
67
+ <div class="sb-argstableBlock-summary">
68
+ <div>
69
+ <span class="sb-argstableBlock-code">summary</span>
70
+ </div>
71
+ </div>
72
+ </td>
73
+ <td>
74
+ <div>
75
+ <span class="sb-argstableBlock-code">defaultValue</span>
76
+ </div>
77
+ </td>
78
+ <td>
79
+ <button>Set string</button>
80
+ </td>
81
+ </tr>
82
+ <tr>
83
+ <td>
84
+ <span>propertyName</span>
85
+ <span>*</span>
86
+ </td>
87
+ <td>
88
+ <div>
89
+ <span>This is a short description</span>
90
+ </div>
91
+ <div class="sb-argstableBlock-summary">
92
+ <div>
93
+ <span class="sb-argstableBlock-code">summary</span>
94
+ </div>
95
+ </div>
96
+ </td>
97
+ <td>
98
+ <div>
99
+ <span class="sb-argstableBlock-code">defaultValue</span>
100
+ </div>
101
+ </td>
102
+ <td>
103
+ <button>Set string</button>
104
+ </td>
105
+ </tr>
106
+ </tbody>
107
+ </table>
108
+ </div>
109
+ <div class="sb-nopreview sb-wrapper">
110
+ <div class="sb-nopreview_main">
111
+ <h1 class="sb-heading sb-nopreview_heading">No Preview</h1>
112
+ <p>Sorry, but you either have no stories or none are selected somehow.</p>
113
+ <ul>
114
+ <li>Please check the Storybook config.</li>
115
+ <li>Try reloading the page.</li>
116
+ </ul>
117
+ <p>If the problem persists, check the browser console, or the terminal you've
118
+ run Storybook from.</p>
119
+ </div>
120
+ </div>
121
+ <div class="sb-errordisplay sb-wrapper">
122
+ <pre id="error-message" class="sb-heading"></pre>
123
+ <pre class="sb-errordisplay_code">
124
+ <code id="error-stack"></code>
125
+ </pre>
126
+ </div>
127
+ <div id="storybook-root">
128
+ <div style="display: flex; flex-direction: column; min-height: 1000px;">
129
+ <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily YqfL3a_spectrum--light rfm_fq_spectrum--medium XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
130
+ lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: light;">
131
+ <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
132
+ <h1 style="margin: 0px; padding: 0px;">light, medium, en-US</h1>
133
+ <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
134
+ <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
135
+ loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
136
+ </div>
137
  </div>
138
  </div>
139
+ <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily YqfL3a_spectrum--light rfm_fq_spectrum--medium XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
140
+ lang="ar-AE" dir="rtl" style="isolation: isolate; color-scheme: light;">
141
+ <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
142
+ <h1 style="margin: 0px; padding: 0px;">light, medium, ar-AE</h1>
143
+ <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
144
+ <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
145
+ loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
146
+ </div>
147
  </div>
148
  </div>
149
+ <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily YqfL3a_spectrum--light _1DrGeG_spectrum--large XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
150
+ lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: light;">
151
+ <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
152
+ <h1 style="margin: 0px; padding: 0px;">light, large, en-US</h1>
153
+ <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
154
+ <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
155
+ loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
156
+ </div>
157
  </div>
158
  </div>
159
+ <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily YqfL3a_spectrum--light _1DrGeG_spectrum--large XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
160
+ lang="ar-AE" dir="rtl" style="isolation: isolate; color-scheme: light;">
161
+ <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
162
+ <h1 style="margin: 0px; padding: 0px;">light, large, ar-AE</h1>
163
+ <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
164
+ <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
165
+ loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
166
+ </div>
167
  </div>
168
  </div>
169
+ <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily VF2-xW_spectrum--dark rfm_fq_spectrum--medium XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
170
+ lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: dark;">
171
+ <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
172
+ <h1 style="margin: 0px; padding: 0px;">dark, medium, en-US</h1>
173
+ <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
174
+ <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
175
+ loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
176
+ </div>
177
  </div>
178
  </div>
179
+ <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily VF2-xW_spectrum--dark _1DrGeG_spectrum--large XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
180
+ lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: dark;">
181
+ <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
182
+ <h1 style="margin: 0px; padding: 0px;">dark, large, en-US</h1>
183
+ <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
184
+ <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
185
+ loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
186
+ </div>
187
  </div>
188
  </div>
189
+ <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily EV5Q3q_spectrum--lightest rfm_fq_spectrum--medium XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
190
+ lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: light;">
191
+ <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
192
+ <h1 style="margin: 0px; padding: 0px;">lightest, medium, en-US</h1>
193
+ <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
194
+ <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
195
+ loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
196
+ </div>
197
  </div>
198
  </div>
199
+ <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily EV5Q3q_spectrum--lightest _1DrGeG_spectrum--large XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
200
+ lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: light;">
201
+ <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
202
+ <h1 style="margin: 0px; padding: 0px;">lightest, large, en-US</h1>
203
+ <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
204
+ <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
205
+ loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
206
+ </div>
207
  </div>
208
  </div>
209
+ <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily R-l9gW_spectrum--darkest rfm_fq_spectrum--medium XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
210
+ lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: dark;">
211
+ <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
212
+ <h1 style="margin: 0px; padding: 0px;">darkest, medium, en-US</h1>
213
+ <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
214
+ <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
215
+ loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
216
+ </div>
217
  </div>
218
  </div>
219
+ <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily R-l9gW_spectrum--darkest _1DrGeG_spectrum--large XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
220
+ lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: dark;">
221
+ <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
222
+ <h1 style="margin: 0px; padding: 0px;">darkest, large, en-US</h1>
223
+ <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
224
+ <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
225
+ loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
226
+ </div>
227
  </div>
228
  </div>
229
+ <div class="_t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily YqfL3a_spectrum--light rfm_fq_spectrum--medium u4Zobq_medium XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium u4Zobq_express"
230
+ lang="en-US" dir="ltr" style="isolation: isolate; color-scheme: light;">
231
+ <div style="margin: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));">
232
+ <h1 style="margin: 0px; padding: 0px;">express, light, medium, en-US</h1>
233
+ <div class="react-spectrum-story" style="align-items: center; box-sizing: border-box; display: flex; justify-content: center;">
234
+ <img class="jilAbW_spectrum-Avatar" alt="" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png"
235
+ loading="eager" style="height: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100)); width: var(--spectrum-global-dimension-avatar-size-100, var(--spectrum-alias-avatar-size-100));">
236
+ </div>
237
+ </div>
238
+ </div>
239
  </div>
240
+ </div>
241
+ <div id="storybook-docs" hidden="true"></div>
242
+ <script src="iframe.5e9aa880.js" defer=""></script>
243
+ <script src="iframe.01cc2e7e.js" defer=""></script>