@ebay/skin 17.4.0-next.0 → 17.4.0
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.
- package/CHANGELOG.md +24 -0
- package/_cdn/skin/v17.4.0/skin-default.min.css +76 -0
- package/_cdn/skin/v17.4.0/skin-full.min.css +160 -0
- package/_cdn/skin/v17.4.0/skin-headless.min.css +6 -0
- package/dist/flag/flag.css +774 -0
- package/dist/phone-input/phone-input.css +2 -0
- package/package.json +1 -1
- package/src/less/flag/flag.less +777 -0
- package/src/less/phone-input/phone-input.less +2 -0
- package/src/less/phone-input/stories/phone-input.stories.js +108 -162
- package/.changeset/big-cheetahs-peel.md +0 -5
- package/.changeset/kind-pens-own.md +0 -5
- package/.changeset/loud-carrots-protect.md +0 -5
- package/.changeset/metal-cars-promise.md +0 -5
- package/.changeset/pre.json +0 -15
- package/.changeset/shaggy-ways-pump.md +0 -5
- package/.changeset/shaggy-yaks-guess.md +0 -5
- package/_cdn/skin/v17.4.0-next.0/skin-default.min.css +0 -76
- package/_cdn/skin/v17.4.0-next.0/skin-full.min.css +0 -160
- package/_cdn/skin/v17.4.0-next.0/skin-headless.min.css +0 -6
|
@@ -7,10 +7,9 @@ export const Default = () => `
|
|
|
7
7
|
data-listbox-button-prefix="Country: ">
|
|
8
8
|
<span class="btn__cell">
|
|
9
9
|
<span class="btn__text">
|
|
10
|
-
<
|
|
10
|
+
<span class="fflag fflag--us" data-country-code="1"
|
|
11
11
|
aria-label="Country: United States of America (+1)">
|
|
12
|
-
|
|
13
|
-
</svg>
|
|
12
|
+
</span>
|
|
14
13
|
</span>
|
|
15
14
|
<svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
|
|
16
15
|
<use href="#icon-chevron-down-12"></use>
|
|
@@ -21,9 +20,8 @@ export const Default = () => `
|
|
|
21
20
|
<div class="listbox-button__options" role="listbox">
|
|
22
21
|
<div class="listbox-button__option" role="option">
|
|
23
22
|
<span class="listbox-button__value">
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
</svg>
|
|
23
|
+
<span class="fflag fflag--al" data-country-code="355">
|
|
24
|
+
</span>
|
|
27
25
|
<span>Albania</span>
|
|
28
26
|
<span>(+355)</span>
|
|
29
27
|
</span>
|
|
@@ -33,9 +31,8 @@ export const Default = () => `
|
|
|
33
31
|
</div>
|
|
34
32
|
<div class="listbox-button__option" role="option">
|
|
35
33
|
<span class="listbox-button__value">
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
</svg>
|
|
34
|
+
<span class="fflag fflag--in" data-country-code="91">
|
|
35
|
+
</span>
|
|
39
36
|
<span>India</span>
|
|
40
37
|
<span>(+91)</span>
|
|
41
38
|
</span>
|
|
@@ -45,9 +42,8 @@ export const Default = () => `
|
|
|
45
42
|
</div>
|
|
46
43
|
<div class="listbox-button__option" role="option">
|
|
47
44
|
<span class="listbox-button__value">
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
</svg>
|
|
45
|
+
<span class="fflag fflag--sh" data-country-code="290">
|
|
46
|
+
</span>
|
|
51
47
|
<span>Saint Helena, Ascension and Tristan da Cunha</span>
|
|
52
48
|
<span>(+290)</span>
|
|
53
49
|
</span>
|
|
@@ -57,9 +53,8 @@ export const Default = () => `
|
|
|
57
53
|
</div>
|
|
58
54
|
<div class="listbox-button__option" role="option">
|
|
59
55
|
<span class="listbox-button__value">
|
|
60
|
-
<
|
|
61
|
-
|
|
62
|
-
</svg>
|
|
56
|
+
<span class="fflag fflag--gb" data-country-code="44">
|
|
57
|
+
</span>
|
|
63
58
|
<span>United Kingdom</span>
|
|
64
59
|
<span>(+44)</span>
|
|
65
60
|
</span>
|
|
@@ -69,9 +64,8 @@ export const Default = () => `
|
|
|
69
64
|
</div>
|
|
70
65
|
<div class="listbox-button__option" role="option" aria-selected="true">
|
|
71
66
|
<span class="listbox-button__value">
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
</svg>
|
|
67
|
+
<span class="fflag fflag--us" data-country-code="1">
|
|
68
|
+
</span>
|
|
75
69
|
<span>United States of America</span>
|
|
76
70
|
<span>(+1)</span>
|
|
77
71
|
</span>
|
|
@@ -96,10 +90,9 @@ export const Large = () => `
|
|
|
96
90
|
data-listbox-button-prefix="Country: ">
|
|
97
91
|
<span class="btn__cell">
|
|
98
92
|
<span class="btn__text">
|
|
99
|
-
<
|
|
93
|
+
<span class="fflag fflag--us" data-country-code="1"
|
|
100
94
|
aria-label="Country: United States of America (+1)">
|
|
101
|
-
|
|
102
|
-
</svg>
|
|
95
|
+
</span>
|
|
103
96
|
</span>
|
|
104
97
|
<svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
|
|
105
98
|
<use href="#icon-chevron-down-12"></use>
|
|
@@ -110,9 +103,8 @@ export const Large = () => `
|
|
|
110
103
|
<div class="listbox-button__options" role="listbox">
|
|
111
104
|
<div class="listbox-button__option" role="option">
|
|
112
105
|
<span class="listbox-button__value">
|
|
113
|
-
<
|
|
114
|
-
|
|
115
|
-
</svg>
|
|
106
|
+
<span class="fflag fflag--al" data-country-code="355">
|
|
107
|
+
</span>
|
|
116
108
|
<span>Albania</span>
|
|
117
109
|
<span>(+355)</span>
|
|
118
110
|
</span>
|
|
@@ -122,9 +114,8 @@ export const Large = () => `
|
|
|
122
114
|
</div>
|
|
123
115
|
<div class="listbox-button__option" role="option">
|
|
124
116
|
<span class="listbox-button__value">
|
|
125
|
-
<
|
|
126
|
-
|
|
127
|
-
</svg>
|
|
117
|
+
<span class="fflag fflag--in" data-country-code="91">
|
|
118
|
+
</span>
|
|
128
119
|
<span>India</span>
|
|
129
120
|
<span>(+91)</span>
|
|
130
121
|
</span>
|
|
@@ -134,9 +125,8 @@ export const Large = () => `
|
|
|
134
125
|
</div>
|
|
135
126
|
<div class="listbox-button__option" role="option">
|
|
136
127
|
<span class="listbox-button__value">
|
|
137
|
-
<
|
|
138
|
-
|
|
139
|
-
</svg>
|
|
128
|
+
<span class="fflag fflag--sh" data-country-code="290">
|
|
129
|
+
</span>
|
|
140
130
|
<span>Saint Helena, Ascension and Tristan da Cunha</span>
|
|
141
131
|
<span>(+290)</span>
|
|
142
132
|
</span>
|
|
@@ -146,9 +136,8 @@ export const Large = () => `
|
|
|
146
136
|
</div>
|
|
147
137
|
<div class="listbox-button__option" role="option">
|
|
148
138
|
<span class="listbox-button__value">
|
|
149
|
-
<
|
|
150
|
-
|
|
151
|
-
</svg>
|
|
139
|
+
<span class="fflag fflag--gb" data-country-code="44">
|
|
140
|
+
</span>
|
|
152
141
|
<span>United Kingdom</span>
|
|
153
142
|
<span>(+44)</span>
|
|
154
143
|
</span>
|
|
@@ -158,9 +147,8 @@ export const Large = () => `
|
|
|
158
147
|
</div>
|
|
159
148
|
<div class="listbox-button__option" role="option" aria-selected="true">
|
|
160
149
|
<span class="listbox-button__value">
|
|
161
|
-
<
|
|
162
|
-
|
|
163
|
-
</svg>
|
|
150
|
+
<span class="fflag fflag--us" data-country-code="1">
|
|
151
|
+
</span>
|
|
164
152
|
<span>United States of America</span>
|
|
165
153
|
<span>(+1)</span>
|
|
166
154
|
</span>
|
|
@@ -185,10 +173,9 @@ export const ReadOnly = () => `
|
|
|
185
173
|
data-listbox-button-prefix="Country: " disabled>
|
|
186
174
|
<span class="btn__cell">
|
|
187
175
|
<span class="btn__text">
|
|
188
|
-
<
|
|
176
|
+
<span class="fflag fflag--us" data-country-code="1"
|
|
189
177
|
aria-label="Country: United States of America (+1)">
|
|
190
|
-
|
|
191
|
-
</svg>
|
|
178
|
+
</span>
|
|
192
179
|
</span>
|
|
193
180
|
<svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
|
|
194
181
|
<use href="#icon-chevron-down-12"></use>
|
|
@@ -199,9 +186,8 @@ export const ReadOnly = () => `
|
|
|
199
186
|
<div class="listbox-button__options" role="listbox">
|
|
200
187
|
<div class="listbox-button__option" role="option">
|
|
201
188
|
<span class="listbox-button__value">
|
|
202
|
-
<
|
|
203
|
-
|
|
204
|
-
</svg>
|
|
189
|
+
<span class="fflag fflag--al" data-country-code="355">
|
|
190
|
+
</span>
|
|
205
191
|
<span>Albania</span>
|
|
206
192
|
<span>(+355)</span>
|
|
207
193
|
</span>
|
|
@@ -211,9 +197,8 @@ export const ReadOnly = () => `
|
|
|
211
197
|
</div>
|
|
212
198
|
<div class="listbox-button__option" role="option">
|
|
213
199
|
<span class="listbox-button__value">
|
|
214
|
-
<
|
|
215
|
-
|
|
216
|
-
</svg>
|
|
200
|
+
<span class="fflag fflag--in" data-country-code="91">
|
|
201
|
+
</span>
|
|
217
202
|
<span>India</span>
|
|
218
203
|
<span>(+91)</span>
|
|
219
204
|
</span>
|
|
@@ -223,9 +208,8 @@ export const ReadOnly = () => `
|
|
|
223
208
|
</div>
|
|
224
209
|
<div class="listbox-button__option" role="option">
|
|
225
210
|
<span class="listbox-button__value">
|
|
226
|
-
<
|
|
227
|
-
|
|
228
|
-
</svg>
|
|
211
|
+
<span class="fflag fflag--sh" data-country-code="290">
|
|
212
|
+
</span>
|
|
229
213
|
<span>Saint Helena, Ascension and Tristan da Cunha</span>
|
|
230
214
|
<span>(+290)</span>
|
|
231
215
|
</span>
|
|
@@ -235,9 +219,8 @@ export const ReadOnly = () => `
|
|
|
235
219
|
</div>
|
|
236
220
|
<div class="listbox-button__option" role="option">
|
|
237
221
|
<span class="listbox-button__value">
|
|
238
|
-
<
|
|
239
|
-
|
|
240
|
-
</svg>
|
|
222
|
+
<span class="fflag fflag--gb" data-country-code="44">
|
|
223
|
+
</span>
|
|
241
224
|
<span>United Kingdom</span>
|
|
242
225
|
<span>(+44)</span>
|
|
243
226
|
</span>
|
|
@@ -247,9 +230,8 @@ export const ReadOnly = () => `
|
|
|
247
230
|
</div>
|
|
248
231
|
<div class="listbox-button__option" role="option" aria-selected="true">
|
|
249
232
|
<span class="listbox-button__value">
|
|
250
|
-
<
|
|
251
|
-
|
|
252
|
-
</svg>
|
|
233
|
+
<span class="fflag fflag--us" data-country-code="1">
|
|
234
|
+
</span>
|
|
253
235
|
<span>United States of America</span>
|
|
254
236
|
<span>(+1)</span>
|
|
255
237
|
</span>
|
|
@@ -274,10 +256,9 @@ export const Disabled = () => `
|
|
|
274
256
|
data-listbox-button-prefix="Country: " disabled>
|
|
275
257
|
<span class="btn__cell">
|
|
276
258
|
<span class="btn__text">
|
|
277
|
-
<
|
|
259
|
+
<span class="fflag fflag--us"
|
|
278
260
|
data-country-code="1" aria-label="Country: United States of America (+1)">
|
|
279
|
-
|
|
280
|
-
</svg>
|
|
261
|
+
</span>
|
|
281
262
|
</span>
|
|
282
263
|
<svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
|
|
283
264
|
<use href="#icon-chevron-down-12"></use>
|
|
@@ -288,9 +269,8 @@ export const Disabled = () => `
|
|
|
288
269
|
<div class="listbox-button__options" role="listbox">
|
|
289
270
|
<div class="listbox-button__option" role="option">
|
|
290
271
|
<span class="listbox-button__value">
|
|
291
|
-
<
|
|
292
|
-
|
|
293
|
-
</svg>
|
|
272
|
+
<span class="fflag fflag--al" data-country-code="355">
|
|
273
|
+
</span>
|
|
294
274
|
<span>Albania</span>
|
|
295
275
|
<span>(+355)</span>
|
|
296
276
|
</span>
|
|
@@ -300,9 +280,8 @@ export const Disabled = () => `
|
|
|
300
280
|
</div>
|
|
301
281
|
<div class="listbox-button__option" role="option">
|
|
302
282
|
<span class="listbox-button__value">
|
|
303
|
-
<
|
|
304
|
-
|
|
305
|
-
</svg>
|
|
283
|
+
<span class="fflag fflag--in" data-country-code="91">
|
|
284
|
+
</span>
|
|
306
285
|
<span>India</span>
|
|
307
286
|
<span>(+91)</span>
|
|
308
287
|
</span>
|
|
@@ -312,9 +291,8 @@ export const Disabled = () => `
|
|
|
312
291
|
</div>
|
|
313
292
|
<div class="listbox-button__option" role="option">
|
|
314
293
|
<span class="listbox-button__value">
|
|
315
|
-
<
|
|
316
|
-
|
|
317
|
-
</svg>
|
|
294
|
+
<span class="fflag fflag--sh" data-country-code="290">
|
|
295
|
+
</span>
|
|
318
296
|
<span>Saint Helena, Ascension and Tristan da Cunha</span>
|
|
319
297
|
<span>(+290)</span>
|
|
320
298
|
</span>
|
|
@@ -324,9 +302,8 @@ export const Disabled = () => `
|
|
|
324
302
|
</div>
|
|
325
303
|
<div class="listbox-button__option" role="option">
|
|
326
304
|
<span class="listbox-button__value">
|
|
327
|
-
<
|
|
328
|
-
|
|
329
|
-
</svg>
|
|
305
|
+
<span class="fflag fflag--gb" data-country-code="44">
|
|
306
|
+
</span>
|
|
330
307
|
<span>United Kingdom</span>
|
|
331
308
|
<span>(+44)</span>
|
|
332
309
|
</span>
|
|
@@ -336,9 +313,8 @@ export const Disabled = () => `
|
|
|
336
313
|
</div>
|
|
337
314
|
<div class="listbox-button__option" role="option" aria-selected="true">
|
|
338
315
|
<span class="listbox-button__value">
|
|
339
|
-
<
|
|
340
|
-
|
|
341
|
-
</svg>
|
|
316
|
+
<span class="fflag fflag--us" data-country-code="1">
|
|
317
|
+
</span>
|
|
342
318
|
<span>United States of America</span>
|
|
343
319
|
<span>(+1)</span>
|
|
344
320
|
</span>
|
|
@@ -363,10 +339,9 @@ export const Error = () => `
|
|
|
363
339
|
data-listbox-button-prefix="Country: ">
|
|
364
340
|
<span class="btn__cell">
|
|
365
341
|
<span class="btn__text">
|
|
366
|
-
<
|
|
342
|
+
<span class="fflag fflag--us" data-country-code="1"
|
|
367
343
|
aria-label="Country: United States of America (+1)">
|
|
368
|
-
|
|
369
|
-
</svg>
|
|
344
|
+
</span>
|
|
370
345
|
</span>
|
|
371
346
|
<svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
|
|
372
347
|
<use href="#icon-chevron-down-12"></use>
|
|
@@ -377,9 +352,8 @@ export const Error = () => `
|
|
|
377
352
|
<div class="listbox-button__options" role="listbox">
|
|
378
353
|
<div class="listbox-button__option" role="option">
|
|
379
354
|
<span class="listbox-button__value">
|
|
380
|
-
<
|
|
381
|
-
|
|
382
|
-
</svg>
|
|
355
|
+
<span class="fflag fflag--al" data-country-code="355">
|
|
356
|
+
</span>
|
|
383
357
|
<span>Albania</span>
|
|
384
358
|
<span>(+355)</span>
|
|
385
359
|
</span>
|
|
@@ -389,9 +363,8 @@ export const Error = () => `
|
|
|
389
363
|
</div>
|
|
390
364
|
<div class="listbox-button__option" role="option">
|
|
391
365
|
<span class="listbox-button__value">
|
|
392
|
-
<
|
|
393
|
-
|
|
394
|
-
</svg>
|
|
366
|
+
<span class="fflag fflag--in" data-country-code="91">
|
|
367
|
+
</span>
|
|
395
368
|
<span>India</span>
|
|
396
369
|
<span>(+91)</span>
|
|
397
370
|
</span>
|
|
@@ -401,9 +374,8 @@ export const Error = () => `
|
|
|
401
374
|
</div>
|
|
402
375
|
<div class="listbox-button__option" role="option">
|
|
403
376
|
<span class="listbox-button__value">
|
|
404
|
-
<
|
|
405
|
-
|
|
406
|
-
</svg>
|
|
377
|
+
<span class="fflag fflag--sh" data-country-code="290">
|
|
378
|
+
</span>
|
|
407
379
|
<span>Saint Helena, Ascension and Tristan da Cunha</span>
|
|
408
380
|
<span>(+290)</span>
|
|
409
381
|
</span>
|
|
@@ -413,9 +385,8 @@ export const Error = () => `
|
|
|
413
385
|
</div>
|
|
414
386
|
<div class="listbox-button__option" role="option">
|
|
415
387
|
<span class="listbox-button__value">
|
|
416
|
-
<
|
|
417
|
-
|
|
418
|
-
</svg>
|
|
388
|
+
<span class="fflag fflag--gb" data-country-code="44">
|
|
389
|
+
</span>
|
|
419
390
|
<span>United Kingdom</span>
|
|
420
391
|
<span>(+44)</span>
|
|
421
392
|
</span>
|
|
@@ -425,9 +396,8 @@ export const Error = () => `
|
|
|
425
396
|
</div>
|
|
426
397
|
<div class="listbox-button__option" role="option" aria-selected="true">
|
|
427
398
|
<span class="listbox-button__value">
|
|
428
|
-
<
|
|
429
|
-
|
|
430
|
-
</svg>
|
|
399
|
+
<span class="fflag fflag--us" data-country-code="1">
|
|
400
|
+
</span>
|
|
431
401
|
<span>United States of America</span>
|
|
432
402
|
<span>(+1)</span>
|
|
433
403
|
</span>
|
|
@@ -452,10 +422,9 @@ export const Fluid = () => `
|
|
|
452
422
|
data-listbox-button-prefix="Country: ">
|
|
453
423
|
<span class="btn__cell">
|
|
454
424
|
<span class="btn__text">
|
|
455
|
-
<
|
|
425
|
+
<span class="fflag fflag--us" data-country-code="1"
|
|
456
426
|
aria-label="Country: United States of America (+1)">
|
|
457
|
-
|
|
458
|
-
</svg>
|
|
427
|
+
</span>
|
|
459
428
|
</span>
|
|
460
429
|
<svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
|
|
461
430
|
<use href="#icon-chevron-down-12"></use>
|
|
@@ -466,9 +435,8 @@ export const Fluid = () => `
|
|
|
466
435
|
<div class="listbox-button__options" role="listbox">
|
|
467
436
|
<div class="listbox-button__option" role="option">
|
|
468
437
|
<span class="listbox-button__value">
|
|
469
|
-
<
|
|
470
|
-
|
|
471
|
-
</svg>
|
|
438
|
+
<span class="fflag fflag--al" data-country-code="355">
|
|
439
|
+
</span>
|
|
472
440
|
<span>Albania</span>
|
|
473
441
|
<span>(+355)</span>
|
|
474
442
|
</span>
|
|
@@ -478,9 +446,8 @@ export const Fluid = () => `
|
|
|
478
446
|
</div>
|
|
479
447
|
<div class="listbox-button__option" role="option">
|
|
480
448
|
<span class="listbox-button__value">
|
|
481
|
-
<
|
|
482
|
-
|
|
483
|
-
</svg>
|
|
449
|
+
<span class="fflag fflag--in" data-country-code="91">
|
|
450
|
+
</span>
|
|
484
451
|
<span>India</span>
|
|
485
452
|
<span>(+91)</span>
|
|
486
453
|
</span>
|
|
@@ -490,9 +457,8 @@ export const Fluid = () => `
|
|
|
490
457
|
</div>
|
|
491
458
|
<div class="listbox-button__option" role="option">
|
|
492
459
|
<span class="listbox-button__value">
|
|
493
|
-
<
|
|
494
|
-
|
|
495
|
-
</svg>
|
|
460
|
+
<span class="fflag fflag--sh" data-country-code="290">
|
|
461
|
+
</span>
|
|
496
462
|
<span>Saint Helena, Ascension and Tristan da Cunha</span>
|
|
497
463
|
<span>(+290)</span>
|
|
498
464
|
</span>
|
|
@@ -502,9 +468,8 @@ export const Fluid = () => `
|
|
|
502
468
|
</div>
|
|
503
469
|
<div class="listbox-button__option" role="option">
|
|
504
470
|
<span class="listbox-button__value">
|
|
505
|
-
<
|
|
506
|
-
|
|
507
|
-
</svg>
|
|
471
|
+
<span class="fflag fflag--gb" data-country-code="44">
|
|
472
|
+
</span>
|
|
508
473
|
<span>United Kingdom</span>
|
|
509
474
|
<span>(+44)</span>
|
|
510
475
|
</span>
|
|
@@ -514,9 +479,8 @@ export const Fluid = () => `
|
|
|
514
479
|
</div>
|
|
515
480
|
<div class="listbox-button__option" role="option" aria-selected="true">
|
|
516
481
|
<span class="listbox-button__value">
|
|
517
|
-
<
|
|
518
|
-
|
|
519
|
-
</svg>
|
|
482
|
+
<span class="fflag fflag--us" data-country-code="1">
|
|
483
|
+
</span>
|
|
520
484
|
<span>United States of America</span>
|
|
521
485
|
<span>(+1)</span>
|
|
522
486
|
</span>
|
|
@@ -542,10 +506,9 @@ export const RTL = () => `
|
|
|
542
506
|
data-listbox-button-prefix="Country: ">
|
|
543
507
|
<span class="btn__cell">
|
|
544
508
|
<span class="btn__text">
|
|
545
|
-
<
|
|
509
|
+
<span class="fflag fflag--us" data-country-code="1"
|
|
546
510
|
aria-label="Country: United States of America (+1)">
|
|
547
|
-
|
|
548
|
-
</svg>
|
|
511
|
+
</span>
|
|
549
512
|
</span>
|
|
550
513
|
<svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
|
|
551
514
|
<use href="#icon-chevron-down-12"></use>
|
|
@@ -556,9 +519,8 @@ export const RTL = () => `
|
|
|
556
519
|
<div class="listbox-button__options" role="listbox">
|
|
557
520
|
<div class="listbox-button__option" role="option">
|
|
558
521
|
<span class="listbox-button__value">
|
|
559
|
-
<
|
|
560
|
-
|
|
561
|
-
</svg>
|
|
522
|
+
<span class="fflag fflag--al" data-country-code="355">
|
|
523
|
+
</span>
|
|
562
524
|
<span>Albania</span>
|
|
563
525
|
<span>(+355)</span>
|
|
564
526
|
</span>
|
|
@@ -568,9 +530,8 @@ export const RTL = () => `
|
|
|
568
530
|
</div>
|
|
569
531
|
<div class="listbox-button__option" role="option">
|
|
570
532
|
<span class="listbox-button__value">
|
|
571
|
-
<
|
|
572
|
-
|
|
573
|
-
</svg>
|
|
533
|
+
<span class="fflag fflag--in" data-country-code="91">
|
|
534
|
+
</span>
|
|
574
535
|
<span>India</span>
|
|
575
536
|
<span>(+91)</span>
|
|
576
537
|
</span>
|
|
@@ -580,9 +541,8 @@ export const RTL = () => `
|
|
|
580
541
|
</div>
|
|
581
542
|
<div class="listbox-button__option" role="option">
|
|
582
543
|
<span class="listbox-button__value">
|
|
583
|
-
<
|
|
584
|
-
|
|
585
|
-
</svg>
|
|
544
|
+
<span class="fflag fflag--sh" data-country-code="290">
|
|
545
|
+
</span>
|
|
586
546
|
<span>Saint Helena, Ascension and Tristan da Cunha</span>
|
|
587
547
|
<span>(+290)</span>
|
|
588
548
|
</span>
|
|
@@ -592,9 +552,8 @@ export const RTL = () => `
|
|
|
592
552
|
</div>
|
|
593
553
|
<div class="listbox-button__option" role="option">
|
|
594
554
|
<span class="listbox-button__value">
|
|
595
|
-
<
|
|
596
|
-
|
|
597
|
-
</svg>
|
|
555
|
+
<span class="fflag fflag--gb" data-country-code="44">
|
|
556
|
+
</span>
|
|
598
557
|
<span>United Kingdom</span>
|
|
599
558
|
<span>(+44)</span>
|
|
600
559
|
</span>
|
|
@@ -604,9 +563,8 @@ export const RTL = () => `
|
|
|
604
563
|
</div>
|
|
605
564
|
<div class="listbox-button__option" role="option" aria-selected="true">
|
|
606
565
|
<span class="listbox-button__value">
|
|
607
|
-
<
|
|
608
|
-
|
|
609
|
-
</svg>
|
|
566
|
+
<span class="fflag fflag--us" data-country-code="1">
|
|
567
|
+
</span>
|
|
610
568
|
<span>United States of America</span>
|
|
611
569
|
<span>(+1)</span>
|
|
612
570
|
</span>
|
|
@@ -635,10 +593,9 @@ export const TextSpacing = () => `
|
|
|
635
593
|
data-listbox-button-prefix="Country: " aria-label="Country: United States of America">
|
|
636
594
|
<span class="btn__cell">
|
|
637
595
|
<span class="btn__text">
|
|
638
|
-
<
|
|
596
|
+
<span class="fflag fflag--us" aria-hidden="true"
|
|
639
597
|
data-country-code="1">
|
|
640
|
-
|
|
641
|
-
</svg>
|
|
598
|
+
</span>
|
|
642
599
|
</span>
|
|
643
600
|
<svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
|
|
644
601
|
<use href="#icon-chevron-down-12"></use>
|
|
@@ -649,10 +606,9 @@ export const TextSpacing = () => `
|
|
|
649
606
|
<div class="listbox-button__options" role="listbox">
|
|
650
607
|
<div class="listbox-button__option" role="option">
|
|
651
608
|
<span class="listbox-button__value">
|
|
652
|
-
<
|
|
609
|
+
<span class="fflag fflag--al" aria-hidden="true"
|
|
653
610
|
data-country-code="355">
|
|
654
|
-
|
|
655
|
-
</svg>
|
|
611
|
+
</span>
|
|
656
612
|
<span>Albania</span>
|
|
657
613
|
<span>(+355)</span>
|
|
658
614
|
</span>
|
|
@@ -662,10 +618,9 @@ export const TextSpacing = () => `
|
|
|
662
618
|
</div>
|
|
663
619
|
<div class="listbox-button__option" role="option">
|
|
664
620
|
<span class="listbox-button__value">
|
|
665
|
-
<
|
|
621
|
+
<span class="fflag fflag--in" aria-hidden="true"
|
|
666
622
|
data-country-code="91">
|
|
667
|
-
|
|
668
|
-
</svg>
|
|
623
|
+
</span>
|
|
669
624
|
<span>India</span>
|
|
670
625
|
<span>(+91)</span>
|
|
671
626
|
</span>
|
|
@@ -675,10 +630,9 @@ export const TextSpacing = () => `
|
|
|
675
630
|
</div>
|
|
676
631
|
<div class="listbox-button__option" role="option">
|
|
677
632
|
<span class="listbox-button__value">
|
|
678
|
-
<
|
|
633
|
+
<span class="fflag fflag--sh" aria-hidden="true"
|
|
679
634
|
data-country-code="290">
|
|
680
|
-
|
|
681
|
-
</svg>
|
|
635
|
+
</span>
|
|
682
636
|
<span>Saint Helena, Ascension and Tristan da Cunha</span>
|
|
683
637
|
<span>(+290)</span>
|
|
684
638
|
</span>
|
|
@@ -688,10 +642,9 @@ export const TextSpacing = () => `
|
|
|
688
642
|
</div>
|
|
689
643
|
<div class="listbox-button__option" role="option">
|
|
690
644
|
<span class="listbox-button__value">
|
|
691
|
-
<
|
|
645
|
+
<span class="fflag fflag--gb" aria-hidden="true"
|
|
692
646
|
data-country-code="44">
|
|
693
|
-
|
|
694
|
-
</svg>
|
|
647
|
+
</span>
|
|
695
648
|
<span>United Kingdom</span>
|
|
696
649
|
<span>(+44)</span>
|
|
697
650
|
</span>
|
|
@@ -701,10 +654,9 @@ export const TextSpacing = () => `
|
|
|
701
654
|
</div>
|
|
702
655
|
<div class="listbox-button__option" role="option" aria-selected="true">
|
|
703
656
|
<span class="listbox-button__value">
|
|
704
|
-
<
|
|
657
|
+
<span class="fflag fflag--us" aria-hidden="true"
|
|
705
658
|
data-country-code="1">
|
|
706
|
-
|
|
707
|
-
</svg>
|
|
659
|
+
</span>
|
|
708
660
|
<span>United States of America</span>
|
|
709
661
|
<span>(+1)</span>
|
|
710
662
|
</span>
|
|
@@ -734,10 +686,9 @@ export const overrideFontSize = () => `
|
|
|
734
686
|
data-listbox-button-prefix="Country: " aria-label="Country: United States of America">
|
|
735
687
|
<span class="btn__cell">
|
|
736
688
|
<span class="btn__text">
|
|
737
|
-
<
|
|
689
|
+
<span class="fflag fflag--us" aria-hidden="true"
|
|
738
690
|
data-country-code="1">
|
|
739
|
-
|
|
740
|
-
</svg>
|
|
691
|
+
</span>
|
|
741
692
|
</span>
|
|
742
693
|
<svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
|
|
743
694
|
<use href="#icon-chevron-down-12"></use>
|
|
@@ -748,10 +699,9 @@ export const overrideFontSize = () => `
|
|
|
748
699
|
<div class="listbox-button__options" role="listbox">
|
|
749
700
|
<div class="listbox-button__option" role="option">
|
|
750
701
|
<span class="listbox-button__value">
|
|
751
|
-
<
|
|
702
|
+
<span class="fflag fflag--al" aria-hidden="true"
|
|
752
703
|
data-country-code="355">
|
|
753
|
-
|
|
754
|
-
</svg>
|
|
704
|
+
</span>
|
|
755
705
|
<span>Albania</span>
|
|
756
706
|
<span>(+355)</span>
|
|
757
707
|
</span>
|
|
@@ -761,10 +711,9 @@ export const overrideFontSize = () => `
|
|
|
761
711
|
</div>
|
|
762
712
|
<div class="listbox-button__option" role="option">
|
|
763
713
|
<span class="listbox-button__value">
|
|
764
|
-
<
|
|
714
|
+
<span class="fflag fflag--in" aria-hidden="true"
|
|
765
715
|
data-country-code="91">
|
|
766
|
-
|
|
767
|
-
</svg>
|
|
716
|
+
</span>
|
|
768
717
|
<span>India</span>
|
|
769
718
|
<span>(+91)</span>
|
|
770
719
|
</span>
|
|
@@ -774,10 +723,9 @@ export const overrideFontSize = () => `
|
|
|
774
723
|
</div>
|
|
775
724
|
<div class="listbox-button__option" role="option">
|
|
776
725
|
<span class="listbox-button__value">
|
|
777
|
-
<
|
|
726
|
+
<span class="fflag fflag--sh" aria-hidden="true"
|
|
778
727
|
data-country-code="290">
|
|
779
|
-
|
|
780
|
-
</svg>
|
|
728
|
+
</span>
|
|
781
729
|
<span>Saint Helena, Ascension and Tristan da Cunha</span>
|
|
782
730
|
<span>(+290)</span>
|
|
783
731
|
</span>
|
|
@@ -787,10 +735,9 @@ export const overrideFontSize = () => `
|
|
|
787
735
|
</div>
|
|
788
736
|
<div class="listbox-button__option" role="option">
|
|
789
737
|
<span class="listbox-button__value">
|
|
790
|
-
<
|
|
738
|
+
<span class="fflag fflag--gb" aria-hidden="true"
|
|
791
739
|
data-country-code="44">
|
|
792
|
-
|
|
793
|
-
</svg>
|
|
740
|
+
</span>
|
|
794
741
|
<span>United Kingdom</span>
|
|
795
742
|
<span>(+44)</span>
|
|
796
743
|
</span>
|
|
@@ -800,10 +747,9 @@ export const overrideFontSize = () => `
|
|
|
800
747
|
</div>
|
|
801
748
|
<div class="listbox-button__option" role="option" aria-selected="true">
|
|
802
749
|
<span class="listbox-button__value">
|
|
803
|
-
<
|
|
750
|
+
<span class="fflag fflag--us" aria-hidden="true"
|
|
804
751
|
data-country-code="1">
|
|
805
|
-
|
|
806
|
-
</svg>
|
|
752
|
+
</span>
|
|
807
753
|
<span>United States of America</span>
|
|
808
754
|
<span>(+1)</span>
|
|
809
755
|
</span>
|