@zohodesk/components 1.6.20 → 1.6.21

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 (116) hide show
  1. package/README.md +6 -0
  2. package/es/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  3. package/es/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  4. package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  5. package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  6. package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +98 -121
  7. package/es/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +45 -45
  8. package/es/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +24 -24
  9. package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  10. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +87 -87
  11. package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  12. package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +5 -5
  13. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +6 -6
  14. package/es/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  15. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +25 -25
  16. package/es/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  17. package/es/Layout/Box.js +1 -115
  18. package/es/Layout/Container.js +1 -132
  19. package/es/Layout/props/defaultProps.js +1 -16
  20. package/es/Layout/props/propTypes.js +1 -46
  21. package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  22. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  23. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  24. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -69
  25. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  26. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +69 -69
  27. package/es/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  28. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  29. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  30. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +31 -31
  31. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +6 -6
  32. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  33. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  34. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  35. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +130 -130
  36. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  37. package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +6 -6
  38. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +771 -749
  39. package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  40. package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +9 -9
  41. package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  42. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  43. package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  44. package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  45. package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +36 -36
  46. package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  47. package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  48. package/es/Tag/__tests__/__snapshots__/Tag.spec.js.snap +46 -46
  49. package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +164 -164
  50. package/es/css.js +0 -1
  51. package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +10 -10
  52. package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  53. package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  54. package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  55. package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  56. package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  57. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +98 -121
  58. package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +45 -45
  59. package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +24 -24
  60. package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  61. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +87 -87
  62. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  63. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +5 -5
  64. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +6 -6
  65. package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  66. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +25 -25
  67. package/lib/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  68. package/lib/Layout/Box.js +7 -120
  69. package/lib/Layout/Container.js +7 -137
  70. package/lib/Layout/props/defaultProps.js +14 -19
  71. package/lib/Layout/props/propTypes.js +13 -52
  72. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  73. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  74. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  75. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -69
  76. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  77. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +69 -69
  78. package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  79. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  80. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  81. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +31 -31
  82. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +6 -6
  83. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  84. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  85. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  86. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +130 -130
  87. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  88. package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +6 -6
  89. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +771 -749
  90. package/lib/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  91. package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +9 -9
  92. package/lib/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  93. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  94. package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  95. package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  96. package/lib/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +36 -36
  97. package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  98. package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  99. package/lib/Tag/__tests__/__snapshots__/Tag.spec.js.snap +46 -46
  100. package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +164 -164
  101. package/lib/css.js +0 -2
  102. package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +10 -10
  103. package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  104. package/package.json +5 -5
  105. package/es/Layout/Layout.module.css +0 -336
  106. package/es/Layout/__tests__/Box.spec.js +0 -11
  107. package/es/Layout/__tests__/Container.spec.js +0 -11
  108. package/es/Layout/__tests__/__snapshots__/Box.spec.js.snap +0 -16
  109. package/es/Layout/__tests__/__snapshots__/Container.spec.js.snap +0 -16
  110. package/es/Layout/utils.js +0 -29
  111. package/lib/Layout/Layout.module.css +0 -336
  112. package/lib/Layout/__tests__/Box.spec.js +0 -18
  113. package/lib/Layout/__tests__/Container.spec.js +0 -18
  114. package/lib/Layout/__tests__/__snapshots__/Box.spec.js.snap +0 -16
  115. package/lib/Layout/__tests__/__snapshots__/Container.spec.js.snap +0 -16
  116. package/lib/Layout/utils.js +0 -59
package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap CHANGED
@@ -9,13 +9,13 @@ exports[`SelectWithAvatar rendering the defult props 1`] = `
9
9
  data-test-id="selectWithAvatar"
10
10
  >
11
11
  <div
12
- class="container medium borderColor_default hasBorder flex cover rowdir vCenter"
12
+ class="flex fullSize row alignItems_center container medium borderColor_default hasBorder"
13
13
  data-id="containerComponent"
14
14
  data-selector-id="container"
15
15
  data-test-id="containerComponent"
16
16
  >
17
17
  <div
18
- class="grow basis shrinkOff"
18
+ class="flexible basis_zero noShrink"
19
19
  data-id="selectWithAvatar_textBox"
20
20
  data-selector-id="box"
21
21
  data-test-id="selectWithAvatar_textBox"
package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap CHANGED
@@ -12,29 +12,29 @@ exports[`SelectWithIcon rendering the defult props 1`] = `
12
12
  data-test-id="selectWithIcon"
13
13
  >
14
14
  <div
15
- class="flex cover rowdir"
15
+ class="flex fullSize row"
16
16
  data-id="containerComponent"
17
17
  data-selector-id="container"
18
18
  data-test-id="containerComponent"
19
19
  >
20
20
  <div
21
- class="leftIcon flex cover coldir both"
21
+ class="flex fullSize column alignItems_center justifyContent_center leftIcon"
22
22
  data-id="containerComponent"
23
23
  data-selector-id="container"
24
24
  data-test-id="containerComponent"
25
25
  />
26
26
  <div
27
- class="grow basis shrinkOff"
27
+ class="flexible basis_zero noShrink"
28
28
  data-id="boxComponent"
29
29
  data-selector-id="box"
30
30
  data-test-id="boxComponent"
31
31
  >
32
32
  <div
33
- class="varClass customContainer border_bottom effect borderColor_default hasBorder container input iconSelect flex rowdir"
33
+ class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input iconSelect"
34
34
  data-selector-id="textBoxIcon"
35
35
  >
36
36
  <div
37
- class="grow basis shrinkOff"
37
+ class="flexible basis_zero noShrink"
38
38
  data-id="boxComponent"
39
39
  data-selector-id="box"
40
40
  data-test-id="boxComponent"
@@ -59,25 +59,25 @@ exports[`SelectWithIcon rendering the defult props 1`] = `
59
59
  />
60
60
  </div>
61
61
  <div
62
- class="iconContainer shrinkOff"
62
+ class="noShrink iconContainer"
63
63
  data-id="boxComponent"
64
64
  data-selector-id="box"
65
65
  data-test-id="boxComponent"
66
66
  >
67
67
  <div
68
- class="flex cover rowdir"
68
+ class="flex fullSize row"
69
69
  data-id="containerComponent"
70
70
  data-selector-id="container"
71
71
  data-test-id="containerComponent"
72
72
  >
73
73
  <div
74
- class="icon shrinkOff"
74
+ class="noShrink icon"
75
75
  data-id="boxComponent"
76
76
  data-selector-id="box"
77
77
  data-test-id="boxComponent"
78
78
  >
79
79
  <div
80
- class="rightPlaceholder inflex both"
80
+ class="inlineFlex alignItems_center justifyContent_center rightPlaceholder"
81
81
  data-id="selectWithIcon_downIcon"
82
82
  data-selector-id="container"
83
83
  data-test-id="selectWithIcon_downIcon"
package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap CHANGED
@@ -4,14 +4,14 @@ exports[`Switch rendering the CustomClass 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
6
  aria-checked="false"
7
- class="container SwtichCustomSwitchWrap effect inflex rowdir vCenter"
7
+ class="inlineFlex row alignItems_center container SwtichCustomSwitchWrap effect"
8
8
  data-id="containerComponent"
9
9
  data-selector-id="switch"
10
10
  data-test-id="containerComponent"
11
11
  role="switch"
12
12
  >
13
13
  <div
14
- class="switch_medium SwtichCustomSwitchSize shrinkOff"
14
+ class="noShrink switch_medium SwtichCustomSwitchSize"
15
15
  data-id="boxComponent"
16
16
  data-selector-id="box"
17
17
  data-test-id="boxComponent"
@@ -46,7 +46,7 @@ exports[`Switch rendering the CustomProps 1`] = `
46
46
  <DocumentFragment>
47
47
  <div
48
48
  aria-checked="false"
49
- class="container effect inflex rowdir vCenter"
49
+ class="inlineFlex row alignItems_center container effect"
50
50
  data-id="containerComponent"
51
51
  data-selector-id="switch"
52
52
  data-switch="true"
@@ -54,7 +54,7 @@ exports[`Switch rendering the CustomProps 1`] = `
54
54
  role="switch"
55
55
  >
56
56
  <div
57
- class="switch_medium shrinkOff"
57
+ class="noShrink switch_medium"
58
58
  data-id="boxComponent"
59
59
  data-selector-id="box"
60
60
  data-test-id="boxComponent"
@@ -90,14 +90,14 @@ exports[`Switch rendering the ID 1`] = `
90
90
  <DocumentFragment>
91
91
  <div
92
92
  aria-checked="false"
93
- class="container effect inflex rowdir vCenter"
93
+ class="inlineFlex row alignItems_center container effect"
94
94
  data-id="containerComponent"
95
95
  data-selector-id="switch"
96
96
  data-test-id="containerComponent"
97
97
  role="switch"
98
98
  >
99
99
  <div
100
- class="switch_medium shrinkOff"
100
+ class="noShrink switch_medium"
101
101
  data-id="boxComponent"
102
102
  data-selector-id="box"
103
103
  data-test-id="boxComponent"
@@ -132,14 +132,14 @@ exports[`Switch rendering the Name 1`] = `
132
132
  <DocumentFragment>
133
133
  <div
134
134
  aria-checked="false"
135
- class="container effect inflex rowdir vCenter"
135
+ class="inlineFlex row alignItems_center container effect"
136
136
  data-id="containerComponent"
137
137
  data-selector-id="switch"
138
138
  data-test-id="containerComponent"
139
139
  role="switch"
140
140
  >
141
141
  <div
142
- class="switch_medium shrinkOff"
142
+ class="noShrink switch_medium"
143
143
  data-id="boxComponent"
144
144
  data-selector-id="box"
145
145
  data-test-id="boxComponent"
@@ -165,7 +165,7 @@ exports[`Switch rendering the Title 1`] = `
165
165
  <DocumentFragment>
166
166
  <div
167
167
  aria-checked="false"
168
- class="container effect inflex rowdir vCenter"
168
+ class="inlineFlex row alignItems_center container effect"
169
169
  data-id="containerComponent"
170
170
  data-selector-id="switch"
171
171
  data-test-id="containerComponent"
@@ -173,7 +173,7 @@ exports[`Switch rendering the Title 1`] = `
173
173
  role="switch"
174
174
  >
175
175
  <div
176
- class="switch_medium shrinkOff"
176
+ class="noShrink switch_medium"
177
177
  data-id="boxComponent"
178
178
  data-selector-id="box"
179
179
  data-test-id="boxComponent"
@@ -198,14 +198,14 @@ exports[`Switch rendering the Value 1`] = `
198
198
  <DocumentFragment>
199
199
  <div
200
200
  aria-checked="false"
201
- class="container effect inflex rowdir vCenter"
201
+ class="inlineFlex row alignItems_center container effect"
202
202
  data-id="containerComponent"
203
203
  data-selector-id="switch"
204
204
  data-test-id="containerComponent"
205
205
  role="switch"
206
206
  >
207
207
  <div
208
- class="switch_medium shrinkOff"
208
+ class="noShrink switch_medium"
209
209
  data-id="boxComponent"
210
210
  data-selector-id="box"
211
211
  data-test-id="boxComponent"
@@ -230,14 +230,14 @@ exports[`Switch rendering the checked 1`] = `
230
230
  <DocumentFragment>
231
231
  <div
232
232
  aria-checked="true"
233
- class="container effect inflex rowdir vCenter"
233
+ class="inlineFlex row alignItems_center container effect"
234
234
  data-id="containerComponent"
235
235
  data-selector-id="switch"
236
236
  data-test-id="containerComponent"
237
237
  role="switch"
238
238
  >
239
239
  <div
240
- class="switch_medium shrinkOff"
240
+ class="noShrink switch_medium"
241
241
  data-id="boxComponent"
242
242
  data-selector-id="box"
243
243
  data-test-id="boxComponent"
@@ -263,14 +263,14 @@ exports[`Switch rendering the dataId 1`] = `
263
263
  <DocumentFragment>
264
264
  <div
265
265
  aria-checked="false"
266
- class="container effect inflex rowdir vCenter"
266
+ class="inlineFlex row alignItems_center container effect"
267
267
  data-id="containerComponent"
268
268
  data-selector-id="switch"
269
269
  data-test-id="containerComponent"
270
270
  role="switch"
271
271
  >
272
272
  <div
273
- class="switch_medium shrinkOff"
273
+ class="noShrink switch_medium"
274
274
  data-id="boxComponent"
275
275
  data-selector-id="box"
276
276
  data-test-id="boxComponent"
@@ -297,14 +297,14 @@ exports[`Switch rendering the defult props 1`] = `
297
297
  <DocumentFragment>
298
298
  <div
299
299
  aria-checked="false"
300
- class="container effect inflex rowdir vCenter"
300
+ class="inlineFlex row alignItems_center container effect"
301
301
  data-id="containerComponent"
302
302
  data-selector-id="switch"
303
303
  data-test-id="containerComponent"
304
304
  role="switch"
305
305
  >
306
306
  <div
307
- class="switch_medium shrinkOff"
307
+ class="noShrink switch_medium"
308
308
  data-id="boxComponent"
309
309
  data-selector-id="box"
310
310
  data-test-id="boxComponent"
@@ -327,7 +327,7 @@ exports[`Switch rendering the disabled and disableTitle 1`] = `
327
327
  <DocumentFragment>
328
328
  <div
329
329
  aria-checked="false"
330
- class="container disabled inflex rowdir vCenter"
330
+ class="inlineFlex row alignItems_center container disabled"
331
331
  data-id="containerComponent"
332
332
  data-selector-id="switch"
333
333
  data-test-id="containerComponent"
@@ -335,7 +335,7 @@ exports[`Switch rendering the disabled and disableTitle 1`] = `
335
335
  role="switch"
336
336
  >
337
337
  <div
338
- class="switch_medium shrinkOff"
338
+ class="noShrink switch_medium"
339
339
  data-id="boxComponent"
340
340
  data-selector-id="box"
341
341
  data-test-id="boxComponent"
@@ -361,14 +361,14 @@ exports[`Switch rendering the isReadOnly 1`] = `
361
361
  <DocumentFragment>
362
362
  <div
363
363
  aria-checked="false"
364
- class="container readonly inflex rowdir vCenter"
364
+ class="inlineFlex row alignItems_center container readonly"
365
365
  data-id="containerComponent"
366
366
  data-selector-id="switch"
367
367
  data-test-id="containerComponent"
368
368
  role="switch"
369
369
  >
370
370
  <div
371
- class="switch_medium shrinkOff"
371
+ class="noShrink switch_medium"
372
372
  data-id="boxComponent"
373
373
  data-selector-id="box"
374
374
  data-test-id="boxComponent"
@@ -392,14 +392,14 @@ exports[`Switch rendering the labelSize of- danger 1`] = `
392
392
  <DocumentFragment>
393
393
  <div
394
394
  aria-checked="false"
395
- class="container effect inflex rowdir vCenter"
395
+ class="inlineFlex row alignItems_center container effect"
396
396
  data-id="containerComponent"
397
397
  data-selector-id="switch"
398
398
  data-test-id="containerComponent"
399
399
  role="switch"
400
400
  >
401
401
  <div
402
- class="switch_medium shrinkOff"
402
+ class="noShrink switch_medium"
403
403
  data-id="boxComponent"
404
404
  data-selector-id="box"
405
405
  data-test-id="boxComponent"
@@ -434,14 +434,14 @@ exports[`Switch rendering the labelSize of- default 1`] = `
434
434
  <DocumentFragment>
435
435
  <div
436
436
  aria-checked="false"
437
- class="container effect inflex rowdir vCenter"
437
+ class="inlineFlex row alignItems_center container effect"
438
438
  data-id="containerComponent"
439
439
  data-selector-id="switch"
440
440
  data-test-id="containerComponent"
441
441
  role="switch"
442
442
  >
443
443
  <div
444
- class="switch_medium shrinkOff"
444
+ class="noShrink switch_medium"
445
445
  data-id="boxComponent"
446
446
  data-selector-id="box"
447
447
  data-test-id="boxComponent"
@@ -476,14 +476,14 @@ exports[`Switch rendering the labelSize of- large 1`] = `
476
476
  <DocumentFragment>
477
477
  <div
478
478
  aria-checked="false"
479
- class="container effect inflex rowdir vCenter"
479
+ class="inlineFlex row alignItems_center container effect"
480
480
  data-id="containerComponent"
481
481
  data-selector-id="switch"
482
482
  data-test-id="containerComponent"
483
483
  role="switch"
484
484
  >
485
485
  <div
486
- class="switch_medium shrinkOff"
486
+ class="noShrink switch_medium"
487
487
  data-id="boxComponent"
488
488
  data-selector-id="box"
489
489
  data-test-id="boxComponent"
@@ -518,14 +518,14 @@ exports[`Switch rendering the labelSize of- mandatory 1`] = `
518
518
  <DocumentFragment>
519
519
  <div
520
520
  aria-checked="false"
521
- class="container effect inflex rowdir vCenter"
521
+ class="inlineFlex row alignItems_center container effect"
522
522
  data-id="containerComponent"
523
523
  data-selector-id="switch"
524
524
  data-test-id="containerComponent"
525
525
  role="switch"
526
526
  >
527
527
  <div
528
- class="switch_medium shrinkOff"
528
+ class="noShrink switch_medium"
529
529
  data-id="boxComponent"
530
530
  data-selector-id="box"
531
531
  data-test-id="boxComponent"
@@ -560,14 +560,14 @@ exports[`Switch rendering the labelSize of- medium 1`] = `
560
560
  <DocumentFragment>
561
561
  <div
562
562
  aria-checked="false"
563
- class="container effect inflex rowdir vCenter"
563
+ class="inlineFlex row alignItems_center container effect"
564
564
  data-id="containerComponent"
565
565
  data-selector-id="switch"
566
566
  data-test-id="containerComponent"
567
567
  role="switch"
568
568
  >
569
569
  <div
570
- class="switch_medium shrinkOff"
570
+ class="noShrink switch_medium"
571
571
  data-id="boxComponent"
572
572
  data-selector-id="box"
573
573
  data-test-id="boxComponent"
@@ -602,14 +602,14 @@ exports[`Switch rendering the labelSize of- primary 1`] = `
602
602
  <DocumentFragment>
603
603
  <div
604
604
  aria-checked="false"
605
- class="container effect inflex rowdir vCenter"
605
+ class="inlineFlex row alignItems_center container effect"
606
606
  data-id="containerComponent"
607
607
  data-selector-id="switch"
608
608
  data-test-id="containerComponent"
609
609
  role="switch"
610
610
  >
611
611
  <div
612
- class="switch_medium shrinkOff"
612
+ class="noShrink switch_medium"
613
613
  data-id="boxComponent"
614
614
  data-selector-id="box"
615
615
  data-test-id="boxComponent"
@@ -644,14 +644,14 @@ exports[`Switch rendering the labelSize of- secondary 1`] = `
644
644
  <DocumentFragment>
645
645
  <div
646
646
  aria-checked="false"
647
- class="container effect inflex rowdir vCenter"
647
+ class="inlineFlex row alignItems_center container effect"
648
648
  data-id="containerComponent"
649
649
  data-selector-id="switch"
650
650
  data-test-id="containerComponent"
651
651
  role="switch"
652
652
  >
653
653
  <div
654
- class="switch_medium shrinkOff"
654
+ class="noShrink switch_medium"
655
655
  data-id="boxComponent"
656
656
  data-selector-id="box"
657
657
  data-test-id="boxComponent"
@@ -686,14 +686,14 @@ exports[`Switch rendering the labelSize of- small 1`] = `
686
686
  <DocumentFragment>
687
687
  <div
688
688
  aria-checked="false"
689
- class="container effect inflex rowdir vCenter"
689
+ class="inlineFlex row alignItems_center container effect"
690
690
  data-id="containerComponent"
691
691
  data-selector-id="switch"
692
692
  data-test-id="containerComponent"
693
693
  role="switch"
694
694
  >
695
695
  <div
696
- class="switch_medium shrinkOff"
696
+ class="noShrink switch_medium"
697
697
  data-id="boxComponent"
698
698
  data-selector-id="box"
699
699
  data-test-id="boxComponent"
@@ -728,14 +728,14 @@ exports[`Switch rendering the size of- medium 1`] = `
728
728
  <DocumentFragment>
729
729
  <div
730
730
  aria-checked="false"
731
- class="container effect inflex rowdir vCenter"
731
+ class="inlineFlex row alignItems_center container effect"
732
732
  data-id="containerComponent"
733
733
  data-selector-id="switch"
734
734
  data-test-id="containerComponent"
735
735
  role="switch"
736
736
  >
737
737
  <div
738
- class="switch_medium shrinkOff"
738
+ class="noShrink switch_medium"
739
739
  data-id="boxComponent"
740
740
  data-selector-id="box"
741
741
  data-test-id="boxComponent"
@@ -760,14 +760,14 @@ exports[`Switch rendering the size of- small 1`] = `
760
760
  <DocumentFragment>
761
761
  <div
762
762
  aria-checked="false"
763
- class="container effect inflex rowdir vCenter"
763
+ class="inlineFlex row alignItems_center container effect"
764
764
  data-id="containerComponent"
765
765
  data-selector-id="switch"
766
766
  data-test-id="containerComponent"
767
767
  role="switch"
768
768
  >
769
769
  <div
770
- class="switch_small shrinkOff"
770
+ class="noShrink switch_small"
771
771
  data-id="boxComponent"
772
772
  data-selector-id="box"
773
773
  data-test-id="boxComponent"
@@ -792,14 +792,14 @@ exports[`Switch rendering the text 1`] = `
792
792
  <DocumentFragment>
793
793
  <div
794
794
  aria-checked="false"
795
- class="container effect inflex rowdir vCenter"
795
+ class="inlineFlex row alignItems_center container effect"
796
796
  data-id="containerComponent"
797
797
  data-selector-id="switch"
798
798
  data-test-id="containerComponent"
799
799
  role="switch"
800
800
  >
801
801
  <div
802
- class="switch_medium shrinkOff"
802
+ class="noShrink switch_medium"
803
803
  data-id="boxComponent"
804
804
  data-selector-id="box"
805
805
  data-test-id="boxComponent"
package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap CHANGED
@@ -4,7 +4,7 @@ exports[`Tab rendering the defult props 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
6
  aria-selected="false"
7
- class="tab horizontal basisAuto shrinkOff"
7
+ class="basis_auto noShrink tab horizontal"
8
8
  data-id="tabMenu_Tab"
9
9
  data-selector-id="tab"
10
10
  data-test-id="tabMenu_Tab"
@@ -12,7 +12,7 @@ exports[`Tab rendering the defult props 1`] = `
12
12
  tabindex="0"
13
13
  >
14
14
  <div
15
- class="textContainer flex cover rowdir both"
15
+ class="flex fullSize row alignItems_center justifyContent_center textContainer"
16
16
  data-id="containerComponent"
17
17
  data-selector-id="container"
18
18
  data-test-id="containerComponent"
package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap CHANGED
@@ -3,7 +3,7 @@
3
3
  exports[`TabContent rendering the defult props 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
- class="container flex cover coldir"
6
+ class="flex fullSize column container"
7
7
  data-id="tabContent_TabContent"
8
8
  data-scroll="true"
9
9
  data-selector-id="tabContent"
package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap CHANGED
@@ -3,7 +3,7 @@
3
3
  exports[`TabContentWrapper rendering the defult props 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
- class="grow basis shrinkOff"
6
+ class="flexible basis_zero noShrink"
7
7
  data-id="boxComponent"
8
8
  data-selector-id="tabContentWrapper"
9
9
  data-test-id="boxComponent"