@zohodesk/components 1.6.19 → 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 (140) hide show
  1. package/README.md +15 -1
  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/AdvancedMultiSelect.js +4 -2
  28. package/es/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  29. package/es/MultiSelect/MultiSelect.js +11 -7
  30. package/es/MultiSelect/MultiSelectWithAvatar.js +4 -2
  31. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  32. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  33. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +31 -31
  34. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +6 -6
  35. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  36. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  37. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  38. package/es/MultiSelect/props/defaultProps.js +3 -0
  39. package/es/MultiSelect/props/propTypes.js +1 -0
  40. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +130 -130
  41. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  42. package/es/Select/GroupSelect.js +4 -2
  43. package/es/Select/Select.js +9 -5
  44. package/es/Select/SelectWithAvatar.js +4 -2
  45. package/es/Select/SelectWithIcon.js +4 -2
  46. package/es/Select/__tests__/SelectWithIcon.spec.js +3 -1
  47. package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +6 -6
  48. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +771 -749
  49. package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  50. package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +9 -9
  51. package/es/Select/props/defaultProps.js +4 -0
  52. package/es/Select/props/propTypes.js +3 -0
  53. package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  54. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  55. package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  56. package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  57. package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +36 -36
  58. package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  59. package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  60. package/es/Tag/__tests__/__snapshots__/Tag.spec.js.snap +46 -46
  61. package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +164 -164
  62. package/es/css.js +0 -1
  63. package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +10 -10
  64. package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  65. package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  66. package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  67. package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  68. package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  69. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +98 -121
  70. package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +45 -45
  71. package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +24 -24
  72. package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  73. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +87 -87
  74. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  75. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +5 -5
  76. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +6 -6
  77. package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  78. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +25 -25
  79. package/lib/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  80. package/lib/Layout/Box.js +7 -120
  81. package/lib/Layout/Container.js +7 -137
  82. package/lib/Layout/props/defaultProps.js +14 -19
  83. package/lib/Layout/props/propTypes.js +13 -52
  84. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  85. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  86. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  87. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -69
  88. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  89. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +69 -69
  90. package/lib/MultiSelect/AdvancedMultiSelect.js +4 -2
  91. package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  92. package/lib/MultiSelect/MultiSelect.js +50 -45
  93. package/lib/MultiSelect/MultiSelectWithAvatar.js +4 -2
  94. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  95. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  96. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +31 -31
  97. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +6 -6
  98. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  99. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  100. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  101. package/lib/MultiSelect/props/defaultProps.js +3 -0
  102. package/lib/MultiSelect/props/propTypes.js +1 -0
  103. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +130 -130
  104. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  105. package/lib/Select/GroupSelect.js +4 -2
  106. package/lib/Select/Select.js +9 -5
  107. package/lib/Select/SelectWithAvatar.js +4 -2
  108. package/lib/Select/SelectWithIcon.js +4 -2
  109. package/lib/Select/__tests__/SelectWithIcon.spec.js +3 -1
  110. package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +6 -6
  111. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +771 -749
  112. package/lib/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  113. package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +9 -9
  114. package/lib/Select/props/defaultProps.js +5 -2
  115. package/lib/Select/props/propTypes.js +3 -0
  116. package/lib/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  117. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  118. package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  119. package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  120. package/lib/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +36 -36
  121. package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  122. package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  123. package/lib/Tag/__tests__/__snapshots__/Tag.spec.js.snap +46 -46
  124. package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +164 -164
  125. package/lib/css.js +0 -2
  126. package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +10 -10
  127. package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  128. package/package.json +5 -5
  129. package/es/Layout/Layout.module.css +0 -336
  130. package/es/Layout/__tests__/Box.spec.js +0 -11
  131. package/es/Layout/__tests__/Container.spec.js +0 -11
  132. package/es/Layout/__tests__/__snapshots__/Box.spec.js.snap +0 -16
  133. package/es/Layout/__tests__/__snapshots__/Container.spec.js.snap +0 -16
  134. package/es/Layout/utils.js +0 -29
  135. package/lib/Layout/Layout.module.css +0 -336
  136. package/lib/Layout/__tests__/Box.spec.js +0 -18
  137. package/lib/Layout/__tests__/Container.spec.js +0 -18
  138. package/lib/Layout/__tests__/__snapshots__/Box.spec.js.snap +0 -16
  139. package/lib/Layout/__tests__/__snapshots__/Container.spec.js.snap +0 -16
  140. package/lib/Layout/utils.js +0 -59
package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap CHANGED
@@ -4,8 +4,8 @@ exports[`CheckBox component Should be disable 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
6
  aria-checked="true"
7
- class="container disabled
8
- checkedprimary flex rowdir vCenter"
7
+ class="flex row alignItems_center container disabled
8
+ checkedprimary"
9
9
  data-id="checkBox"
10
10
  data-selector-id="container"
11
11
  data-test-id="checkBox"
@@ -13,7 +13,7 @@ exports[`CheckBox component Should be disable 1`] = `
13
13
  tabindex="-1"
14
14
  >
15
15
  <div
16
- class="boxContainer medium filled disabled shrinkOff"
16
+ class="noShrink boxContainer medium filled disabled"
17
17
  data-id="boxComponent"
18
18
  data-selector-id="box"
19
19
  data-test-id="boxComponent"
@@ -47,7 +47,7 @@ exports[`CheckBox component Should be disable 1`] = `
47
47
  </label>
48
48
  </div>
49
49
  <div
50
- class="labelContainer grow basis shrinkOff"
50
+ class="flexible basis_zero noShrink labelContainer"
51
51
  data-id="boxComponent"
52
52
  data-selector-id="box"
53
53
  data-test-id="boxComponent"
@@ -73,8 +73,7 @@ exports[`CheckBox component Should be isReadOnly 1`] = `
73
73
  <DocumentFragment>
74
74
  <div
75
75
  aria-checked="false"
76
- class="container readonly
77
- inflex rowdir vCenter"
76
+ class="inlineFlex row alignItems_center container readonly"
78
77
  data-id="checkBox"
79
78
  data-selector-id="container"
80
79
  data-test-id="checkBox"
@@ -82,7 +81,7 @@ exports[`CheckBox component Should be isReadOnly 1`] = `
82
81
  tabindex="-1"
83
82
  >
84
83
  <div
85
- class="boxContainer medium filled disabled shrinkOff"
84
+ class="noShrink boxContainer medium filled disabled"
86
85
  data-id="boxComponent"
87
86
  data-selector-id="box"
88
87
  data-test-id="boxComponent"
@@ -117,8 +116,7 @@ exports[`CheckBox component Should be render ID 1`] = `
117
116
  <DocumentFragment>
118
117
  <div
119
118
  aria-checked="false"
120
- class="container pointer primary
121
- flex rowdir vCenter"
119
+ class="flex row alignItems_center container pointer primary"
122
120
  data-id="checkBox"
123
121
  data-selector-id="checkBoxId"
124
122
  data-test-id="checkBox"
@@ -126,7 +124,7 @@ exports[`CheckBox component Should be render ID 1`] = `
126
124
  tabindex="0"
127
125
  >
128
126
  <div
129
- class="boxContainer medium filled shrinkOff"
127
+ class="noShrink boxContainer medium filled"
130
128
  data-id="boxComponent"
131
129
  data-selector-id="box"
132
130
  data-test-id="boxComponent"
@@ -155,7 +153,7 @@ exports[`CheckBox component Should be render ID 1`] = `
155
153
  </label>
156
154
  </div>
157
155
  <div
158
- class="labelContainer grow basis shrinkOff"
156
+ class="flexible basis_zero noShrink labelContainer"
159
157
  data-id="boxComponent"
160
158
  data-selector-id="box"
161
159
  data-test-id="boxComponent"
@@ -182,8 +180,7 @@ exports[`CheckBox component Should be render activeStyle is minus 1`] = `
182
180
  <DocumentFragment>
183
181
  <div
184
182
  aria-checked="false"
185
- class="container pointer primary
186
- inflex rowdir vCenter"
183
+ class="inlineFlex row alignItems_center container pointer primary"
187
184
  data-id="checkBox"
188
185
  data-selector-id="container"
189
186
  data-test-id="checkBox"
@@ -191,7 +188,7 @@ exports[`CheckBox component Should be render activeStyle is minus 1`] = `
191
188
  tabindex="0"
192
189
  >
193
190
  <div
194
- class="boxContainer medium filled shrinkOff"
191
+ class="noShrink boxContainer medium filled"
195
192
  data-id="boxComponent"
196
193
  data-selector-id="box"
197
194
  data-test-id="boxComponent"
@@ -226,8 +223,7 @@ exports[`CheckBox component Should be render dataSelectorId 1`] = `
226
223
  <DocumentFragment>
227
224
  <div
228
225
  aria-checked="false"
229
- class="container pointer primary
230
- inflex rowdir vCenter"
226
+ class="inlineFlex row alignItems_center container pointer primary"
231
227
  data-id="checkBox"
232
228
  data-selector-id="dataSelectorIdCheck"
233
229
  data-test-id="checkBox"
@@ -235,7 +231,7 @@ exports[`CheckBox component Should be render dataSelectorId 1`] = `
235
231
  tabindex="0"
236
232
  >
237
233
  <div
238
- class="boxContainer medium filled shrinkOff"
234
+ class="noShrink boxContainer medium filled"
239
235
  data-id="boxComponent"
240
236
  data-selector-id="box"
241
237
  data-test-id="boxComponent"
@@ -270,8 +266,7 @@ exports[`CheckBox component Should be render disabledTitle and title 1`] = `
270
266
  <DocumentFragment>
271
267
  <div
272
268
  aria-checked="false"
273
- class="container disabled
274
- flex rowdir vCenter"
269
+ class="flex row alignItems_center container disabled"
275
270
  data-id="checkBox"
276
271
  data-selector-id="container"
277
272
  data-test-id="checkBox"
@@ -280,7 +275,7 @@ exports[`CheckBox component Should be render disabledTitle and title 1`] = `
280
275
  tabindex="-1"
281
276
  >
282
277
  <div
283
- class="boxContainer medium filled disabled shrinkOff"
278
+ class="noShrink boxContainer medium filled disabled"
284
279
  data-id="boxComponent"
285
280
  data-selector-id="box"
286
281
  data-test-id="boxComponent"
@@ -308,7 +303,7 @@ exports[`CheckBox component Should be render disabledTitle and title 1`] = `
308
303
  </label>
309
304
  </div>
310
305
  <div
311
- class="labelContainer grow basis shrinkOff"
306
+ class="flexible basis_zero noShrink labelContainer"
312
307
  data-id="boxComponent"
313
308
  data-selector-id="box"
314
309
  data-test-id="boxComponent"
@@ -334,8 +329,7 @@ exports[`CheckBox component Should be render isClipped is false 1`] = `
334
329
  <DocumentFragment>
335
330
  <div
336
331
  aria-checked="false"
337
- class="container pointer primary
338
- inflex rowdir vCenter"
332
+ class="inlineFlex row alignItems_center container pointer primary"
339
333
  data-id="checkBox"
340
334
  data-selector-id="container"
341
335
  data-test-id="checkBox"
@@ -343,7 +337,7 @@ exports[`CheckBox component Should be render isClipped is false 1`] = `
343
337
  tabindex="0"
344
338
  >
345
339
  <div
346
- class="boxContainer medium filled shrinkOff"
340
+ class="noShrink boxContainer medium filled"
347
341
  data-id="boxComponent"
348
342
  data-selector-id="box"
349
343
  data-test-id="boxComponent"
@@ -378,8 +372,7 @@ exports[`CheckBox component Should be render isFilled 1`] = `
378
372
  <DocumentFragment>
379
373
  <div
380
374
  aria-checked="false"
381
- class="container pointer primary
382
- inflex rowdir vCenter"
375
+ class="inlineFlex row alignItems_center container pointer primary"
383
376
  data-id="checkBox"
384
377
  data-selector-id="container"
385
378
  data-test-id="checkBox"
@@ -387,7 +380,7 @@ exports[`CheckBox component Should be render isFilled 1`] = `
387
380
  tabindex="0"
388
381
  >
389
382
  <div
390
- class="boxContainer medium filled shrinkOff"
383
+ class="noShrink boxContainer medium filled"
391
384
  data-id="boxComponent"
392
385
  data-selector-id="box"
393
386
  data-test-id="boxComponent"
@@ -422,8 +415,7 @@ exports[`CheckBox component Should be render name 1`] = `
422
415
  <DocumentFragment>
423
416
  <div
424
417
  aria-checked="false"
425
- class="container pointer primary
426
- inflex rowdir vCenter"
418
+ class="inlineFlex row alignItems_center container pointer primary"
427
419
  data-id="checkBox"
428
420
  data-selector-id="container"
429
421
  data-test-id="checkBox"
@@ -431,7 +423,7 @@ exports[`CheckBox component Should be render name 1`] = `
431
423
  tabindex="0"
432
424
  >
433
425
  <div
434
- class="boxContainer medium filled shrinkOff"
426
+ class="noShrink boxContainer medium filled"
435
427
  data-id="boxComponent"
436
428
  data-selector-id="box"
437
429
  data-test-id="boxComponent"
@@ -467,8 +459,7 @@ exports[`CheckBox component Should be render text 1`] = `
467
459
  <DocumentFragment>
468
460
  <div
469
461
  aria-checked="false"
470
- class="container pointer primary
471
- flex rowdir vCenter"
462
+ class="flex row alignItems_center container pointer primary"
472
463
  data-id="checkBox"
473
464
  data-selector-id="container"
474
465
  data-test-id="checkBox"
@@ -476,7 +467,7 @@ exports[`CheckBox component Should be render text 1`] = `
476
467
  tabindex="0"
477
468
  >
478
469
  <div
479
- class="boxContainer medium filled shrinkOff"
470
+ class="noShrink boxContainer medium filled"
480
471
  data-id="boxComponent"
481
472
  data-selector-id="box"
482
473
  data-test-id="boxComponent"
@@ -504,7 +495,7 @@ exports[`CheckBox component Should be render text 1`] = `
504
495
  </label>
505
496
  </div>
506
497
  <div
507
- class="labelContainer grow basis shrinkOff"
498
+ class="flexible basis_zero noShrink labelContainer"
508
499
  data-id="boxComponent"
509
500
  data-selector-id="box"
510
501
  data-test-id="boxComponent"
@@ -530,8 +521,7 @@ exports[`CheckBox component Should be render title 1`] = `
530
521
  <DocumentFragment>
531
522
  <div
532
523
  aria-checked="false"
533
- class="container pointer primary
534
- flex rowdir vCenter"
524
+ class="flex row alignItems_center container pointer primary"
535
525
  data-id="checkBox"
536
526
  data-selector-id="container"
537
527
  data-test-id="checkBox"
@@ -540,7 +530,7 @@ exports[`CheckBox component Should be render title 1`] = `
540
530
  tabindex="0"
541
531
  >
542
532
  <div
543
- class="boxContainer medium filled shrinkOff"
533
+ class="noShrink boxContainer medium filled"
544
534
  data-id="boxComponent"
545
535
  data-selector-id="box"
546
536
  data-test-id="boxComponent"
@@ -568,7 +558,7 @@ exports[`CheckBox component Should be render title 1`] = `
568
558
  </label>
569
559
  </div>
570
560
  <div
571
- class="labelContainer grow basis shrinkOff"
561
+ class="flexible basis_zero noShrink labelContainer"
572
562
  data-id="boxComponent"
573
563
  data-selector-id="box"
574
564
  data-test-id="boxComponent"
@@ -594,8 +584,7 @@ exports[`CheckBox component Should be render with the basic set of default props
594
584
  <DocumentFragment>
595
585
  <div
596
586
  aria-checked="false"
597
- class="container pointer primary
598
- inflex rowdir vCenter"
587
+ class="inlineFlex row alignItems_center container pointer primary"
599
588
  data-id="checkBox"
600
589
  data-selector-id="container"
601
590
  data-test-id="checkBox"
@@ -603,7 +592,7 @@ exports[`CheckBox component Should be render with the basic set of default props
603
592
  tabindex="0"
604
593
  >
605
594
  <div
606
- class="boxContainer medium filled shrinkOff"
595
+ class="noShrink boxContainer medium filled"
607
596
  data-id="boxComponent"
608
597
  data-selector-id="box"
609
598
  data-test-id="boxComponent"
@@ -638,8 +627,8 @@ exports[`CheckBox component Should render active - danger 1`] = `
638
627
  <DocumentFragment>
639
628
  <div
640
629
  aria-checked="true"
641
- class="container pointer danger
642
- checkeddanger flex rowdir vCenter"
630
+ class="flex row alignItems_center container pointer danger
631
+ checkeddanger"
643
632
  data-id="checkBox"
644
633
  data-selector-id="container"
645
634
  data-test-id="checkBox"
@@ -647,7 +636,7 @@ exports[`CheckBox component Should render active - danger 1`] = `
647
636
  tabindex="0"
648
637
  >
649
638
  <div
650
- class="boxContainer medium filled shrinkOff"
639
+ class="noShrink boxContainer medium filled"
651
640
  data-id="boxComponent"
652
641
  data-selector-id="box"
653
642
  data-test-id="boxComponent"
@@ -681,7 +670,7 @@ exports[`CheckBox component Should render active - danger 1`] = `
681
670
  </label>
682
671
  </div>
683
672
  <div
684
- class="labelContainer grow basis shrinkOff"
673
+ class="flexible basis_zero noShrink labelContainer"
685
674
  data-id="boxComponent"
686
675
  data-selector-id="box"
687
676
  data-test-id="boxComponent"
@@ -707,8 +696,8 @@ exports[`CheckBox component Should render active - primary 1`] = `
707
696
  <DocumentFragment>
708
697
  <div
709
698
  aria-checked="true"
710
- class="container pointer primary
711
- checkedprimary flex rowdir vCenter"
699
+ class="flex row alignItems_center container pointer primary
700
+ checkedprimary"
712
701
  data-id="checkBox"
713
702
  data-selector-id="container"
714
703
  data-test-id="checkBox"
@@ -716,7 +705,7 @@ exports[`CheckBox component Should render active - primary 1`] = `
716
705
  tabindex="0"
717
706
  >
718
707
  <div
719
- class="boxContainer medium filled shrinkOff"
708
+ class="noShrink boxContainer medium filled"
720
709
  data-id="boxComponent"
721
710
  data-selector-id="box"
722
711
  data-test-id="boxComponent"
@@ -750,7 +739,7 @@ exports[`CheckBox component Should render active - primary 1`] = `
750
739
  </label>
751
740
  </div>
752
741
  <div
753
- class="labelContainer grow basis shrinkOff"
742
+ class="flexible basis_zero noShrink labelContainer"
754
743
  data-id="boxComponent"
755
744
  data-selector-id="box"
756
745
  data-test-id="boxComponent"
@@ -776,8 +765,7 @@ exports[`CheckBox component Should render labelSize - default 1`] = `
776
765
  <DocumentFragment>
777
766
  <div
778
767
  aria-checked="false"
779
- class="container pointer primary
780
- flex rowdir vCenter"
768
+ class="flex row alignItems_center container pointer primary"
781
769
  data-id="checkBox"
782
770
  data-selector-id="container"
783
771
  data-test-id="checkBox"
@@ -785,7 +773,7 @@ exports[`CheckBox component Should render labelSize - default 1`] = `
785
773
  tabindex="0"
786
774
  >
787
775
  <div
788
- class="boxContainer medium filled shrinkOff"
776
+ class="noShrink boxContainer medium filled"
789
777
  data-id="boxComponent"
790
778
  data-selector-id="box"
791
779
  data-test-id="boxComponent"
@@ -813,7 +801,7 @@ exports[`CheckBox component Should render labelSize - default 1`] = `
813
801
  </label>
814
802
  </div>
815
803
  <div
816
- class="labelContainer grow basis shrinkOff"
804
+ class="flexible basis_zero noShrink labelContainer"
817
805
  data-id="boxComponent"
818
806
  data-selector-id="box"
819
807
  data-test-id="boxComponent"
@@ -839,8 +827,7 @@ exports[`CheckBox component Should render labelSize - large 1`] = `
839
827
  <DocumentFragment>
840
828
  <div
841
829
  aria-checked="false"
842
- class="container pointer primary
843
- flex rowdir vCenter"
830
+ class="flex row alignItems_center container pointer primary"
844
831
  data-id="checkBox"
845
832
  data-selector-id="container"
846
833
  data-test-id="checkBox"
@@ -848,7 +835,7 @@ exports[`CheckBox component Should render labelSize - large 1`] = `
848
835
  tabindex="0"
849
836
  >
850
837
  <div
851
- class="boxContainer medium filled shrinkOff"
838
+ class="noShrink boxContainer medium filled"
852
839
  data-id="boxComponent"
853
840
  data-selector-id="box"
854
841
  data-test-id="boxComponent"
@@ -876,7 +863,7 @@ exports[`CheckBox component Should render labelSize - large 1`] = `
876
863
  </label>
877
864
  </div>
878
865
  <div
879
- class="labelContainer grow basis shrinkOff"
866
+ class="flexible basis_zero noShrink labelContainer"
880
867
  data-id="boxComponent"
881
868
  data-selector-id="box"
882
869
  data-test-id="boxComponent"
@@ -902,8 +889,7 @@ exports[`CheckBox component Should render labelSize - medium 1`] = `
902
889
  <DocumentFragment>
903
890
  <div
904
891
  aria-checked="false"
905
- class="container pointer primary
906
- flex rowdir vCenter"
892
+ class="flex row alignItems_center container pointer primary"
907
893
  data-id="checkBox"
908
894
  data-selector-id="container"
909
895
  data-test-id="checkBox"
@@ -911,7 +897,7 @@ exports[`CheckBox component Should render labelSize - medium 1`] = `
911
897
  tabindex="0"
912
898
  >
913
899
  <div
914
- class="boxContainer medium filled shrinkOff"
900
+ class="noShrink boxContainer medium filled"
915
901
  data-id="boxComponent"
916
902
  data-selector-id="box"
917
903
  data-test-id="boxComponent"
@@ -939,7 +925,7 @@ exports[`CheckBox component Should render labelSize - medium 1`] = `
939
925
  </label>
940
926
  </div>
941
927
  <div
942
- class="labelContainer grow basis shrinkOff"
928
+ class="flexible basis_zero noShrink labelContainer"
943
929
  data-id="boxComponent"
944
930
  data-selector-id="box"
945
931
  data-test-id="boxComponent"
@@ -965,8 +951,7 @@ exports[`CheckBox component Should render labelSize - primary 1`] = `
965
951
  <DocumentFragment>
966
952
  <div
967
953
  aria-checked="false"
968
- class="container pointer primary
969
- flex rowdir vCenter"
954
+ class="flex row alignItems_center container pointer primary"
970
955
  data-id="checkBox"
971
956
  data-selector-id="container"
972
957
  data-test-id="checkBox"
@@ -974,7 +959,7 @@ exports[`CheckBox component Should render labelSize - primary 1`] = `
974
959
  tabindex="0"
975
960
  >
976
961
  <div
977
- class="boxContainer medium filled shrinkOff"
962
+ class="noShrink boxContainer medium filled"
978
963
  data-id="boxComponent"
979
964
  data-selector-id="box"
980
965
  data-test-id="boxComponent"
@@ -1002,7 +987,7 @@ exports[`CheckBox component Should render labelSize - primary 1`] = `
1002
987
  </label>
1003
988
  </div>
1004
989
  <div
1005
- class="labelContainer grow basis shrinkOff"
990
+ class="flexible basis_zero noShrink labelContainer"
1006
991
  data-id="boxComponent"
1007
992
  data-selector-id="box"
1008
993
  data-test-id="boxComponent"
@@ -1028,8 +1013,7 @@ exports[`CheckBox component Should render labelSize - small 1`] = `
1028
1013
  <DocumentFragment>
1029
1014
  <div
1030
1015
  aria-checked="false"
1031
- class="container pointer primary
1032
- flex rowdir vCenter"
1016
+ class="flex row alignItems_center container pointer primary"
1033
1017
  data-id="checkBox"
1034
1018
  data-selector-id="container"
1035
1019
  data-test-id="checkBox"
@@ -1037,7 +1021,7 @@ exports[`CheckBox component Should render labelSize - small 1`] = `
1037
1021
  tabindex="0"
1038
1022
  >
1039
1023
  <div
1040
- class="boxContainer medium filled shrinkOff"
1024
+ class="noShrink boxContainer medium filled"
1041
1025
  data-id="boxComponent"
1042
1026
  data-selector-id="box"
1043
1027
  data-test-id="boxComponent"
@@ -1065,7 +1049,7 @@ exports[`CheckBox component Should render labelSize - small 1`] = `
1065
1049
  </label>
1066
1050
  </div>
1067
1051
  <div
1068
- class="labelContainer grow basis shrinkOff"
1052
+ class="flexible basis_zero noShrink labelContainer"
1069
1053
  data-id="boxComponent"
1070
1054
  data-selector-id="box"
1071
1055
  data-test-id="boxComponent"
@@ -1091,8 +1075,8 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
1091
1075
  <DocumentFragment>
1092
1076
  <div
1093
1077
  aria-checked="true"
1094
- class="container pointer danger
1095
- checkeddanger flex rowdir vCenter"
1078
+ class="flex row alignItems_center container pointer danger
1079
+ checkeddanger"
1096
1080
  data-id="checkBox"
1097
1081
  data-selector-id="container"
1098
1082
  data-test-id="checkBox"
@@ -1100,7 +1084,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
1100
1084
  tabindex="0"
1101
1085
  >
1102
1086
  <div
1103
- class="boxContainer medium filled shrinkOff"
1087
+ class="noShrink boxContainer medium filled"
1104
1088
  data-id="boxComponent"
1105
1089
  data-selector-id="box"
1106
1090
  data-test-id="boxComponent"
@@ -1134,7 +1118,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
1134
1118
  </label>
1135
1119
  </div>
1136
1120
  <div
1137
- class="labelContainer grow basis shrinkOff"
1121
+ class="flexible basis_zero noShrink labelContainer"
1138
1122
  data-id="boxComponent"
1139
1123
  data-selector-id="box"
1140
1124
  data-test-id="boxComponent"
@@ -1160,8 +1144,8 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
1160
1144
  <DocumentFragment>
1161
1145
  <div
1162
1146
  aria-checked="true"
1163
- class="container pointer primary
1164
- checkedprimary flex rowdir vCenter"
1147
+ class="flex row alignItems_center container pointer primary
1148
+ checkedprimary"
1165
1149
  data-id="checkBox"
1166
1150
  data-selector-id="container"
1167
1151
  data-test-id="checkBox"
@@ -1169,7 +1153,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
1169
1153
  tabindex="0"
1170
1154
  >
1171
1155
  <div
1172
- class="boxContainer medium filled shrinkOff"
1156
+ class="noShrink boxContainer medium filled"
1173
1157
  data-id="boxComponent"
1174
1158
  data-selector-id="box"
1175
1159
  data-test-id="boxComponent"
@@ -1203,7 +1187,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
1203
1187
  </label>
1204
1188
  </div>
1205
1189
  <div
1206
- class="labelContainer grow basis shrinkOff"
1190
+ class="flexible basis_zero noShrink labelContainer"
1207
1191
  data-id="boxComponent"
1208
1192
  data-selector-id="box"
1209
1193
  data-test-id="boxComponent"
@@ -1229,8 +1213,7 @@ exports[`CheckBox component Should render secondaryText 1`] = `
1229
1213
  <DocumentFragment>
1230
1214
  <div
1231
1215
  aria-checked="false"
1232
- class="container pointer primary
1233
- flex rowdir vCenter"
1216
+ class="flex row alignItems_center container pointer primary"
1234
1217
  data-id="checkBox"
1235
1218
  data-selector-id="container"
1236
1219
  data-test-id="checkBox"
@@ -1238,7 +1221,7 @@ exports[`CheckBox component Should render secondaryText 1`] = `
1238
1221
  tabindex="0"
1239
1222
  >
1240
1223
  <div
1241
- class="boxContainer withSecondaryText medium filled shrinkOff selfStart"
1224
+ class="noShrink alignSelf_start boxContainer withSecondaryText medium filled"
1242
1225
  data-id="boxComponent"
1243
1226
  data-selector-id="box"
1244
1227
  data-test-id="boxComponent"
@@ -1266,7 +1249,7 @@ exports[`CheckBox component Should render secondaryText 1`] = `
1266
1249
  </label>
1267
1250
  </div>
1268
1251
  <div
1269
- class="labelContainer grow basis shrinkOff"
1252
+ class="flexible basis_zero noShrink labelContainer"
1270
1253
  data-id="boxComponent"
1271
1254
  data-selector-id="box"
1272
1255
  data-test-id="boxComponent"
@@ -1298,8 +1281,7 @@ exports[`CheckBox component Should render size - danger 1`] = `
1298
1281
  <DocumentFragment>
1299
1282
  <div
1300
1283
  aria-checked="false"
1301
- class="container pointer primary
1302
- flex rowdir vCenter"
1284
+ class="flex row alignItems_center container pointer primary"
1303
1285
  data-id="checkBox"
1304
1286
  data-selector-id="container"
1305
1287
  data-test-id="checkBox"
@@ -1307,7 +1289,7 @@ exports[`CheckBox component Should render size - danger 1`] = `
1307
1289
  tabindex="0"
1308
1290
  >
1309
1291
  <div
1310
- class="boxContainer medium filled shrinkOff"
1292
+ class="noShrink boxContainer medium filled"
1311
1293
  data-id="boxComponent"
1312
1294
  data-selector-id="box"
1313
1295
  data-test-id="boxComponent"
@@ -1335,7 +1317,7 @@ exports[`CheckBox component Should render size - danger 1`] = `
1335
1317
  </label>
1336
1318
  </div>
1337
1319
  <div
1338
- class="labelContainer grow basis shrinkOff"
1320
+ class="flexible basis_zero noShrink labelContainer"
1339
1321
  data-id="boxComponent"
1340
1322
  data-selector-id="box"
1341
1323
  data-test-id="boxComponent"
@@ -1361,8 +1343,7 @@ exports[`CheckBox component Should render size - default 1`] = `
1361
1343
  <DocumentFragment>
1362
1344
  <div
1363
1345
  aria-checked="false"
1364
- class="container pointer primary
1365
- flex rowdir vCenter"
1346
+ class="flex row alignItems_center container pointer primary"
1366
1347
  data-id="checkBox"
1367
1348
  data-selector-id="container"
1368
1349
  data-test-id="checkBox"
@@ -1370,7 +1351,7 @@ exports[`CheckBox component Should render size - default 1`] = `
1370
1351
  tabindex="0"
1371
1352
  >
1372
1353
  <div
1373
- class="boxContainer medium filled shrinkOff"
1354
+ class="noShrink boxContainer medium filled"
1374
1355
  data-id="boxComponent"
1375
1356
  data-selector-id="box"
1376
1357
  data-test-id="boxComponent"
@@ -1398,7 +1379,7 @@ exports[`CheckBox component Should render size - default 1`] = `
1398
1379
  </label>
1399
1380
  </div>
1400
1381
  <div
1401
- class="labelContainer grow basis shrinkOff"
1382
+ class="flexible basis_zero noShrink labelContainer"
1402
1383
  data-id="boxComponent"
1403
1384
  data-selector-id="box"
1404
1385
  data-test-id="boxComponent"
@@ -1424,8 +1405,7 @@ exports[`CheckBox component Should render size - mandatory 1`] = `
1424
1405
  <DocumentFragment>
1425
1406
  <div
1426
1407
  aria-checked="false"
1427
- class="container pointer primary
1428
- flex rowdir vCenter"
1408
+ class="flex row alignItems_center container pointer primary"
1429
1409
  data-id="checkBox"
1430
1410
  data-selector-id="container"
1431
1411
  data-test-id="checkBox"
@@ -1433,7 +1413,7 @@ exports[`CheckBox component Should render size - mandatory 1`] = `
1433
1413
  tabindex="0"
1434
1414
  >
1435
1415
  <div
1436
- class="boxContainer medium filled shrinkOff"
1416
+ class="noShrink boxContainer medium filled"
1437
1417
  data-id="boxComponent"
1438
1418
  data-selector-id="box"
1439
1419
  data-test-id="boxComponent"
@@ -1461,7 +1441,7 @@ exports[`CheckBox component Should render size - mandatory 1`] = `
1461
1441
  </label>
1462
1442
  </div>
1463
1443
  <div
1464
- class="labelContainer grow basis shrinkOff"
1444
+ class="flexible basis_zero noShrink labelContainer"
1465
1445
  data-id="boxComponent"
1466
1446
  data-selector-id="box"
1467
1447
  data-test-id="boxComponent"
@@ -1487,8 +1467,8 @@ exports[`CheckBox component Should render size - medium 1`] = `
1487
1467
  <DocumentFragment>
1488
1468
  <div
1489
1469
  aria-checked="true"
1490
- class="container pointer primary
1491
- checkedprimary inflex rowdir vCenter"
1470
+ class="inlineFlex row alignItems_center container pointer primary
1471
+ checkedprimary"
1492
1472
  data-id="checkBox"
1493
1473
  data-selector-id="container"
1494
1474
  data-test-id="checkBox"
@@ -1496,7 +1476,7 @@ exports[`CheckBox component Should render size - medium 1`] = `
1496
1476
  tabindex="0"
1497
1477
  >
1498
1478
  <div
1499
- class="boxContainer medium filled shrinkOff"
1479
+ class="noShrink boxContainer medium filled"
1500
1480
  data-id="boxComponent"
1501
1481
  data-selector-id="box"
1502
1482
  data-test-id="boxComponent"
@@ -1537,8 +1517,7 @@ exports[`CheckBox component Should render size - primary 1`] = `
1537
1517
  <DocumentFragment>
1538
1518
  <div
1539
1519
  aria-checked="false"
1540
- class="container pointer primary
1541
- flex rowdir vCenter"
1520
+ class="flex row alignItems_center container pointer primary"
1542
1521
  data-id="checkBox"
1543
1522
  data-selector-id="container"
1544
1523
  data-test-id="checkBox"
@@ -1546,7 +1525,7 @@ exports[`CheckBox component Should render size - primary 1`] = `
1546
1525
  tabindex="0"
1547
1526
  >
1548
1527
  <div
1549
- class="boxContainer medium filled shrinkOff"
1528
+ class="noShrink boxContainer medium filled"
1550
1529
  data-id="boxComponent"
1551
1530
  data-selector-id="box"
1552
1531
  data-test-id="boxComponent"
@@ -1574,7 +1553,7 @@ exports[`CheckBox component Should render size - primary 1`] = `
1574
1553
  </label>
1575
1554
  </div>
1576
1555
  <div
1577
- class="labelContainer grow basis shrinkOff"
1556
+ class="flexible basis_zero noShrink labelContainer"
1578
1557
  data-id="boxComponent"
1579
1558
  data-selector-id="box"
1580
1559
  data-test-id="boxComponent"
@@ -1600,8 +1579,7 @@ exports[`CheckBox component Should render size - secondary 1`] = `
1600
1579
  <DocumentFragment>
1601
1580
  <div
1602
1581
  aria-checked="false"
1603
- class="container pointer primary
1604
- flex rowdir vCenter"
1582
+ class="flex row alignItems_center container pointer primary"
1605
1583
  data-id="checkBox"
1606
1584
  data-selector-id="container"
1607
1585
  data-test-id="checkBox"
@@ -1609,7 +1587,7 @@ exports[`CheckBox component Should render size - secondary 1`] = `
1609
1587
  tabindex="0"
1610
1588
  >
1611
1589
  <div
1612
- class="boxContainer medium filled shrinkOff"
1590
+ class="noShrink boxContainer medium filled"
1613
1591
  data-id="boxComponent"
1614
1592
  data-selector-id="box"
1615
1593
  data-test-id="boxComponent"
@@ -1637,7 +1615,7 @@ exports[`CheckBox component Should render size - secondary 1`] = `
1637
1615
  </label>
1638
1616
  </div>
1639
1617
  <div
1640
- class="labelContainer grow basis shrinkOff"
1618
+ class="flexible basis_zero noShrink labelContainer"
1641
1619
  data-id="boxComponent"
1642
1620
  data-selector-id="box"
1643
1621
  data-test-id="boxComponent"
@@ -1663,8 +1641,8 @@ exports[`CheckBox component Should render size - small 1`] = `
1663
1641
  <DocumentFragment>
1664
1642
  <div
1665
1643
  aria-checked="true"
1666
- class="container pointer primary
1667
- checkedprimary inflex rowdir vCenter"
1644
+ class="inlineFlex row alignItems_center container pointer primary
1645
+ checkedprimary"
1668
1646
  data-id="checkBox"
1669
1647
  data-selector-id="container"
1670
1648
  data-test-id="checkBox"
@@ -1672,7 +1650,7 @@ exports[`CheckBox component Should render size - small 1`] = `
1672
1650
  tabindex="0"
1673
1651
  >
1674
1652
  <div
1675
- class="boxContainer small filled shrinkOff"
1653
+ class="noShrink boxContainer small filled"
1676
1654
  data-id="boxComponent"
1677
1655
  data-selector-id="box"
1678
1656
  data-test-id="boxComponent"
@@ -1716,8 +1694,8 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
1716
1694
  aria-hidden="false"
1717
1695
  aria-label="ariaLabelCheckBox"
1718
1696
  aria-labelledby="ariaLabelledbyCheckBox"
1719
- class="container pointer primary
1720
- checkedprimary inflex rowdir vCenter"
1697
+ class="inlineFlex row alignItems_center container pointer primary
1698
+ checkedprimary"
1721
1699
  data-id="checkBox"
1722
1700
  data-selector-id="container"
1723
1701
  data-test-id="checkBox"
@@ -1725,7 +1703,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
1725
1703
  tabindex="0"
1726
1704
  >
1727
1705
  <div
1728
- class="boxContainer medium filled shrinkOff"
1706
+ class="noShrink boxContainer medium filled"
1729
1707
  data-id="boxComponent"
1730
1708
  data-selector-id="box"
1731
1709
  data-test-id="boxComponent"
@@ -1769,8 +1747,8 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
1769
1747
  aria-hidden="true"
1770
1748
  aria-label="ariaLabelCheckBox"
1771
1749
  aria-labelledby="ariaLabelledbyCheckBox"
1772
- class="container pointer primary
1773
- checkedprimary inflex rowdir vCenter"
1750
+ class="inlineFlex row alignItems_center container pointer primary
1751
+ checkedprimary"
1774
1752
  data-id="checkBox"
1775
1753
  data-selector-id="container"
1776
1754
  data-test-id="checkBox"
@@ -1778,7 +1756,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
1778
1756
  tabindex="-1"
1779
1757
  >
1780
1758
  <div
1781
- class="boxContainer medium filled shrinkOff"
1759
+ class="noShrink boxContainer medium filled"
1782
1760
  data-id="boxComponent"
1783
1761
  data-selector-id="box"
1784
1762
  data-test-id="boxComponent"
@@ -1819,8 +1797,7 @@ exports[`CheckBox component rendering the Custom Props 1`] = `
1819
1797
  <DocumentFragment>
1820
1798
  <div
1821
1799
  aria-checked="false"
1822
- class="container pointer primary
1823
- flex rowdir vCenter"
1800
+ class="flex row alignItems_center container pointer primary"
1824
1801
  data-id="checkBox"
1825
1802
  data-props="true"
1826
1803
  data-selector-id="container"
@@ -1829,7 +1806,7 @@ exports[`CheckBox component rendering the Custom Props 1`] = `
1829
1806
  tabindex="0"
1830
1807
  >
1831
1808
  <div
1832
- class="boxContainer medium filled shrinkOff"
1809
+ class="noShrink boxContainer medium filled"
1833
1810
  data-id="boxComponent"
1834
1811
  data-selector-id="box"
1835
1812
  data-test-id="boxComponent"
@@ -1857,7 +1834,7 @@ exports[`CheckBox component rendering the Custom Props 1`] = `
1857
1834
  </label>
1858
1835
  </div>
1859
1836
  <div
1860
- class="labelContainer grow basis shrinkOff"
1837
+ class="flexible basis_zero noShrink labelContainer"
1861
1838
  data-id="boxComponent"
1862
1839
  data-selector-id="box"
1863
1840
  data-test-id="boxComponent"
@@ -1881,8 +1858,8 @@ exports[`CheckBox component rendering the Custom class 1`] = `
1881
1858
  <DocumentFragment>
1882
1859
  <div
1883
1860
  aria-checked="true"
1884
- class="container pointer primary
1885
- checkedprimary customCheckBoxClass flex rowdir vCenter"
1861
+ class="flex row alignItems_center container pointer primary
1862
+ checkedprimary customCheckBoxClass"
1886
1863
  data-id="checkBox"
1887
1864
  data-selector-id="container"
1888
1865
  data-test-id="checkBox"
@@ -1890,7 +1867,7 @@ exports[`CheckBox component rendering the Custom class 1`] = `
1890
1867
  tabindex="0"
1891
1868
  >
1892
1869
  <div
1893
- class="boxContainer medium customCBoxSizeClass filled shrinkOff"
1870
+ class="noShrink boxContainer medium customCBoxSizeClass filled"
1894
1871
  data-id="boxComponent"
1895
1872
  data-selector-id="box"
1896
1873
  data-test-id="boxComponent"
@@ -1924,7 +1901,7 @@ exports[`CheckBox component rendering the Custom class 1`] = `
1924
1901
  </label>
1925
1902
  </div>
1926
1903
  <div
1927
- class="labelContainer grow basis shrinkOff"
1904
+ class="flexible basis_zero noShrink labelContainer"
1928
1905
  data-id="boxComponent"
1929
1906
  data-selector-id="box"
1930
1907
  data-test-id="boxComponent"