@zohodesk/components 1.6.25 → 1.6.27

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 (218) hide show
  1. package/CHANGELOG.md +2046 -0
  2. package/README.md +16 -2031
  3. package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css +5 -20
  4. package/assets/Appearance/light/mode/Component_v1_LightMode.module.css +5 -20
  5. package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css +5 -20
  6. package/es/Accordion/Accordion.js +1 -6
  7. package/es/Accordion/AccordionItem.js +1 -6
  8. package/es/Animation/Animation.js +1 -8
  9. package/es/AppContainer/AppContainer.js +1 -6
  10. package/es/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  11. package/es/Avatar/Avatar.js +1 -6
  12. package/es/AvatarTeam/AvatarTeam.js +1 -7
  13. package/es/Button/Button.js +1 -6
  14. package/es/Buttongroup/Buttongroup.js +1 -14
  15. package/es/Card/Card.js +1 -9
  16. package/es/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  17. package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  18. package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  19. package/es/CheckBox/CheckBox.js +1 -6
  20. package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +88 -88
  21. package/es/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +48 -48
  22. package/es/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +30 -30
  23. package/es/DateTime/DateWidget.js +1 -11
  24. package/es/DateTime/DateWidget.module.css +3 -0
  25. package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  26. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +93 -93
  27. package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  28. package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +8 -8
  29. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +7 -7
  30. package/es/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  31. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +28 -28
  32. package/es/DropDown/DropDownHeading.js +1 -6
  33. package/es/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  34. package/es/Heading/Heading.js +1 -6
  35. package/es/Label/Label.js +1 -6
  36. package/es/Label/__tests__/__snapshots__/Label.spec.js.snap +4 -4
  37. package/es/ListItem/ListContainer.js +1 -6
  38. package/es/ListItem/ListItem.js +1 -6
  39. package/es/ListItem/ListItemWithAvatar.js +1 -6
  40. package/es/ListItem/ListItemWithCheckBox.js +1 -6
  41. package/es/ListItem/ListItemWithIcon.js +1 -6
  42. package/es/ListItem/ListItemWithRadio.js +1 -6
  43. package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  44. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  45. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  46. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -62
  47. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  48. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -62
  49. package/es/Modal/Modal.js +1 -8
  50. package/es/MultiSelect/AdvancedGroupMultiSelect.js +1 -7
  51. package/es/MultiSelect/AdvancedMultiSelect.js +1 -9
  52. package/es/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  53. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  54. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  55. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +35 -35
  56. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  57. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  58. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  59. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  60. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +94 -94
  61. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  62. package/es/RippleEffect/RippleEffect.js +1 -6
  63. package/es/Select/GroupSelect.js +1 -8
  64. package/es/Select/Select.js +1 -10
  65. package/es/Select/SelectWithAvatar.js +1 -9
  66. package/es/Select/SelectWithIcon.js +1 -7
  67. package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +7 -7
  68. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +831 -831
  69. package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  70. package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +10 -10
  71. package/es/Switch/Switch.js +1 -6
  72. package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  73. package/es/Tab/Tab.js +1 -6
  74. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  75. package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  76. package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  77. package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  78. package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  79. package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  80. package/es/Tag/Tag.js +1 -6
  81. package/es/Tag/__tests__/__snapshots__/Tag.spec.js.snap +94 -94
  82. package/es/TextBox/TextBox.js +1 -8
  83. package/es/TextBoxIcon/TextBoxIcon.js +1 -8
  84. package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +167 -167
  85. package/es/Textarea/Textarea.js +1 -8
  86. package/es/Tooltip/Tooltip.js +1 -8
  87. package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +1 -5
  88. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -5
  89. package/es/semantic/Button/Button.js +1 -6
  90. package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +20 -20
  91. package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  92. package/es/v1/Button/Button.js +197 -113
  93. package/es/v1/Button/README.md +110 -44
  94. package/es/v1/Button/__tests__/Button.spec.js +139 -48
  95. package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +1236 -340
  96. package/es/v1/Button/constants/index.js +29 -23
  97. package/es/v1/Button/constants/presets.js +160 -0
  98. package/es/v1/Button/css/Button_v1.module.css +33 -16
  99. package/es/v1/Button/css/cssJSLogic.js +56 -29
  100. package/es/v1/Button/props/defaultProps.js +5 -6
  101. package/es/v1/Button/props/propTypes.js +26 -8
  102. package/es/v1/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -24
  103. package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +14 -14
  104. package/es/v1/helpers/colorHelpers/__tests__/colorHelper.spec.js +357 -0
  105. package/es/v1/helpers/colorHelpers/background/backgroundColor.module.css +38 -534
  106. package/es/v1/helpers/colorHelpers/border/borderColor.module.css +28 -412
  107. package/es/v1/helpers/colorHelpers/colorHelper.js +120 -139
  108. package/es/v1/helpers/colorHelpers/constants/index.js +45 -4
  109. package/es/v1/helpers/colorHelpers/index.js +0 -1
  110. package/es/v1/helpers/colorHelpers/paletteUtilities.README.md +141 -336
  111. package/es/v1/helpers/colorHelpers/text/textColor.module.css +79 -295
  112. package/lib/Accordion/Accordion.js +1 -6
  113. package/lib/Accordion/AccordionItem.js +1 -6
  114. package/lib/Animation/Animation.js +1 -8
  115. package/lib/AppContainer/AppContainer.js +1 -6
  116. package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  117. package/lib/Avatar/Avatar.js +1 -6
  118. package/lib/AvatarTeam/AvatarTeam.js +1 -7
  119. package/lib/Button/Button.js +1 -7
  120. package/lib/Buttongroup/Buttongroup.js +1 -14
  121. package/lib/Card/Card.js +1 -8
  122. package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  123. package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  124. package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  125. package/lib/CheckBox/CheckBox.js +1 -6
  126. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +88 -88
  127. package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +48 -48
  128. package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +30 -30
  129. package/lib/DateTime/DateWidget.js +1 -11
  130. package/lib/DateTime/DateWidget.module.css +3 -0
  131. package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  132. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +93 -93
  133. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  134. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +8 -8
  135. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +7 -7
  136. package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  137. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +28 -28
  138. package/lib/DropDown/DropDownHeading.js +1 -6
  139. package/lib/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  140. package/lib/Heading/Heading.js +1 -6
  141. package/lib/Label/Label.js +1 -6
  142. package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap +4 -4
  143. package/lib/ListItem/ListContainer.js +1 -7
  144. package/lib/ListItem/ListItem.js +1 -6
  145. package/lib/ListItem/ListItemWithAvatar.js +1 -6
  146. package/lib/ListItem/ListItemWithCheckBox.js +1 -6
  147. package/lib/ListItem/ListItemWithIcon.js +1 -6
  148. package/lib/ListItem/ListItemWithRadio.js +1 -6
  149. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  150. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  151. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  152. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -62
  153. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  154. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -62
  155. package/lib/Modal/Modal.js +1 -8
  156. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +1 -7
  157. package/lib/MultiSelect/AdvancedMultiSelect.js +1 -9
  158. package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  159. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  160. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  161. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +35 -35
  162. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  163. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  164. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  165. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  166. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +94 -94
  167. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  168. package/lib/RippleEffect/RippleEffect.js +1 -6
  169. package/lib/Select/GroupSelect.js +1 -9
  170. package/lib/Select/Select.js +1 -11
  171. package/lib/Select/SelectWithAvatar.js +1 -9
  172. package/lib/Select/SelectWithIcon.js +1 -7
  173. package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +7 -7
  174. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +831 -831
  175. package/lib/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  176. package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +10 -10
  177. package/lib/Switch/Switch.js +1 -6
  178. package/lib/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  179. package/lib/Tab/Tab.js +1 -6
  180. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  181. package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  182. package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  183. package/lib/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  184. package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  185. package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  186. package/lib/Tag/Tag.js +1 -6
  187. package/lib/Tag/__tests__/__snapshots__/Tag.spec.js.snap +94 -94
  188. package/lib/TextBox/TextBox.js +1 -8
  189. package/lib/TextBoxIcon/TextBoxIcon.js +1 -8
  190. package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +167 -167
  191. package/lib/Textarea/Textarea.js +1 -8
  192. package/lib/Tooltip/Tooltip.js +1 -8
  193. package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +1 -5
  194. package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -5
  195. package/lib/semantic/Button/Button.js +1 -6
  196. package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +20 -20
  197. package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  198. package/lib/v1/Button/Button.js +207 -123
  199. package/lib/v1/Button/README.md +110 -44
  200. package/lib/v1/Button/__tests__/Button.spec.js +195 -88
  201. package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +1236 -340
  202. package/lib/v1/Button/constants/index.js +34 -31
  203. package/lib/v1/Button/constants/presets.js +179 -0
  204. package/lib/v1/Button/css/Button_v1.module.css +33 -16
  205. package/lib/v1/Button/css/cssJSLogic.js +45 -25
  206. package/lib/v1/Button/props/defaultProps.js +4 -5
  207. package/lib/v1/Button/props/propTypes.js +41 -7
  208. package/lib/v1/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -24
  209. package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +14 -14
  210. package/lib/v1/helpers/colorHelpers/__tests__/colorHelper.spec.js +363 -0
  211. package/lib/v1/helpers/colorHelpers/background/backgroundColor.module.css +38 -534
  212. package/lib/v1/helpers/colorHelpers/border/borderColor.module.css +28 -412
  213. package/lib/v1/helpers/colorHelpers/colorHelper.js +130 -153
  214. package/lib/v1/helpers/colorHelpers/constants/index.js +45 -4
  215. package/lib/v1/helpers/colorHelpers/index.js +2 -24
  216. package/lib/v1/helpers/colorHelpers/paletteUtilities.README.md +141 -336
  217. package/lib/v1/helpers/colorHelpers/text/textColor.module.css +79 -295
  218. package/package.json +16 -16
package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap CHANGED
@@ -4,7 +4,7 @@ exports[`CheckBox component Should be disable 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
6
  aria-checked="true"
7
- class="flex row alignItems_center container disabled checkedprimary"
7
+ class="d-flex d-flex-row d-items-center container disabled checkedprimary"
8
8
  data-id="checkBox"
9
9
  data-selector-id="container"
10
10
  data-test-id="checkBox"
@@ -12,7 +12,7 @@ exports[`CheckBox component Should be disable 1`] = `
12
12
  tabindex="-1"
13
13
  >
14
14
  <div
15
- class="noShrink boxContainer medium filled disabled"
15
+ class="d-flex-shrink-0 boxContainer medium filled disabled"
16
16
  data-id="boxComponent"
17
17
  data-selector-id="box"
18
18
  data-test-id="boxComponent"
@@ -46,7 +46,7 @@ exports[`CheckBox component Should be disable 1`] = `
46
46
  </label>
47
47
  </div>
48
48
  <div
49
- class="flexible basis_zero noShrink labelContainer"
49
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
50
50
  data-id="boxComponent"
51
51
  data-selector-id="box"
52
52
  data-test-id="boxComponent"
@@ -69,7 +69,7 @@ exports[`CheckBox component Should be isReadOnly 1`] = `
69
69
  <DocumentFragment>
70
70
  <div
71
71
  aria-checked="false"
72
- class="inlineFlex row alignItems_center container readonly"
72
+ class="d-inline-flex d-flex-row d-items-center container readonly"
73
73
  data-id="checkBox"
74
74
  data-selector-id="container"
75
75
  data-test-id="checkBox"
@@ -77,7 +77,7 @@ exports[`CheckBox component Should be isReadOnly 1`] = `
77
77
  tabindex="-1"
78
78
  >
79
79
  <div
80
- class="noShrink boxContainer medium filled disabled"
80
+ class="d-flex-shrink-0 boxContainer medium filled disabled"
81
81
  data-id="boxComponent"
82
82
  data-selector-id="box"
83
83
  data-test-id="boxComponent"
@@ -112,7 +112,7 @@ exports[`CheckBox component Should be render ID 1`] = `
112
112
  <DocumentFragment>
113
113
  <div
114
114
  aria-checked="false"
115
- class="flex row alignItems_center container pointer primary"
115
+ class="d-flex d-flex-row d-items-center container pointer primary"
116
116
  data-id="checkBox"
117
117
  data-selector-id="checkBoxId"
118
118
  data-test-id="checkBox"
@@ -120,7 +120,7 @@ exports[`CheckBox component Should be render ID 1`] = `
120
120
  tabindex="0"
121
121
  >
122
122
  <div
123
- class="noShrink boxContainer medium filled"
123
+ class="d-flex-shrink-0 boxContainer medium filled"
124
124
  data-id="boxComponent"
125
125
  data-selector-id="box"
126
126
  data-test-id="boxComponent"
@@ -149,7 +149,7 @@ exports[`CheckBox component Should be render ID 1`] = `
149
149
  </label>
150
150
  </div>
151
151
  <div
152
- class="flexible basis_zero noShrink labelContainer"
152
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
153
153
  data-id="boxComponent"
154
154
  data-selector-id="box"
155
155
  data-test-id="boxComponent"
@@ -173,7 +173,7 @@ exports[`CheckBox component Should be render activeStyle is minus 1`] = `
173
173
  <DocumentFragment>
174
174
  <div
175
175
  aria-checked="false"
176
- class="inlineFlex row alignItems_center container pointer primary"
176
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
177
177
  data-id="checkBox"
178
178
  data-selector-id="container"
179
179
  data-test-id="checkBox"
@@ -181,7 +181,7 @@ exports[`CheckBox component Should be render activeStyle is minus 1`] = `
181
181
  tabindex="0"
182
182
  >
183
183
  <div
184
- class="noShrink boxContainer medium filled"
184
+ class="d-flex-shrink-0 boxContainer medium filled"
185
185
  data-id="boxComponent"
186
186
  data-selector-id="box"
187
187
  data-test-id="boxComponent"
@@ -216,7 +216,7 @@ exports[`CheckBox component Should be render dataSelectorId 1`] = `
216
216
  <DocumentFragment>
217
217
  <div
218
218
  aria-checked="false"
219
- class="inlineFlex row alignItems_center container pointer primary"
219
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
220
220
  data-id="checkBox"
221
221
  data-selector-id="dataSelectorIdCheck"
222
222
  data-test-id="checkBox"
@@ -224,7 +224,7 @@ exports[`CheckBox component Should be render dataSelectorId 1`] = `
224
224
  tabindex="0"
225
225
  >
226
226
  <div
227
- class="noShrink boxContainer medium filled"
227
+ class="d-flex-shrink-0 boxContainer medium filled"
228
228
  data-id="boxComponent"
229
229
  data-selector-id="box"
230
230
  data-test-id="boxComponent"
@@ -259,7 +259,7 @@ exports[`CheckBox component Should be render disabledTitle and title 1`] = `
259
259
  <DocumentFragment>
260
260
  <div
261
261
  aria-checked="false"
262
- class="flex row alignItems_center container disabled"
262
+ class="d-flex d-flex-row d-items-center container disabled"
263
263
  data-id="checkBox"
264
264
  data-selector-id="container"
265
265
  data-test-id="checkBox"
@@ -268,7 +268,7 @@ exports[`CheckBox component Should be render disabledTitle and title 1`] = `
268
268
  tabindex="-1"
269
269
  >
270
270
  <div
271
- class="noShrink boxContainer medium filled disabled"
271
+ class="d-flex-shrink-0 boxContainer medium filled disabled"
272
272
  data-id="boxComponent"
273
273
  data-selector-id="box"
274
274
  data-test-id="boxComponent"
@@ -296,7 +296,7 @@ exports[`CheckBox component Should be render disabledTitle and title 1`] = `
296
296
  </label>
297
297
  </div>
298
298
  <div
299
- class="flexible basis_zero noShrink labelContainer"
299
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
300
300
  data-id="boxComponent"
301
301
  data-selector-id="box"
302
302
  data-test-id="boxComponent"
@@ -319,7 +319,7 @@ exports[`CheckBox component Should be render isClipped is false 1`] = `
319
319
  <DocumentFragment>
320
320
  <div
321
321
  aria-checked="false"
322
- class="inlineFlex row alignItems_center container pointer primary"
322
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
323
323
  data-id="checkBox"
324
324
  data-selector-id="container"
325
325
  data-test-id="checkBox"
@@ -327,7 +327,7 @@ exports[`CheckBox component Should be render isClipped is false 1`] = `
327
327
  tabindex="0"
328
328
  >
329
329
  <div
330
- class="noShrink boxContainer medium filled"
330
+ class="d-flex-shrink-0 boxContainer medium filled"
331
331
  data-id="boxComponent"
332
332
  data-selector-id="box"
333
333
  data-test-id="boxComponent"
@@ -362,7 +362,7 @@ exports[`CheckBox component Should be render isFilled 1`] = `
362
362
  <DocumentFragment>
363
363
  <div
364
364
  aria-checked="false"
365
- class="inlineFlex row alignItems_center container pointer primary"
365
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
366
366
  data-id="checkBox"
367
367
  data-selector-id="container"
368
368
  data-test-id="checkBox"
@@ -370,7 +370,7 @@ exports[`CheckBox component Should be render isFilled 1`] = `
370
370
  tabindex="0"
371
371
  >
372
372
  <div
373
- class="noShrink boxContainer medium filled"
373
+ class="d-flex-shrink-0 boxContainer medium filled"
374
374
  data-id="boxComponent"
375
375
  data-selector-id="box"
376
376
  data-test-id="boxComponent"
@@ -405,7 +405,7 @@ exports[`CheckBox component Should be render name 1`] = `
405
405
  <DocumentFragment>
406
406
  <div
407
407
  aria-checked="false"
408
- class="inlineFlex row alignItems_center container pointer primary"
408
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
409
409
  data-id="checkBox"
410
410
  data-selector-id="container"
411
411
  data-test-id="checkBox"
@@ -413,7 +413,7 @@ exports[`CheckBox component Should be render name 1`] = `
413
413
  tabindex="0"
414
414
  >
415
415
  <div
416
- class="noShrink boxContainer medium filled"
416
+ class="d-flex-shrink-0 boxContainer medium filled"
417
417
  data-id="boxComponent"
418
418
  data-selector-id="box"
419
419
  data-test-id="boxComponent"
@@ -449,7 +449,7 @@ exports[`CheckBox component Should be render text 1`] = `
449
449
  <DocumentFragment>
450
450
  <div
451
451
  aria-checked="false"
452
- class="flex row alignItems_center container pointer primary"
452
+ class="d-flex d-flex-row d-items-center container pointer primary"
453
453
  data-id="checkBox"
454
454
  data-selector-id="container"
455
455
  data-test-id="checkBox"
@@ -457,7 +457,7 @@ exports[`CheckBox component Should be render text 1`] = `
457
457
  tabindex="0"
458
458
  >
459
459
  <div
460
- class="noShrink boxContainer medium filled"
460
+ class="d-flex-shrink-0 boxContainer medium filled"
461
461
  data-id="boxComponent"
462
462
  data-selector-id="box"
463
463
  data-test-id="boxComponent"
@@ -485,7 +485,7 @@ exports[`CheckBox component Should be render text 1`] = `
485
485
  </label>
486
486
  </div>
487
487
  <div
488
- class="flexible basis_zero noShrink labelContainer"
488
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
489
489
  data-id="boxComponent"
490
490
  data-selector-id="box"
491
491
  data-test-id="boxComponent"
@@ -508,7 +508,7 @@ exports[`CheckBox component Should be render title 1`] = `
508
508
  <DocumentFragment>
509
509
  <div
510
510
  aria-checked="false"
511
- class="flex row alignItems_center container pointer primary"
511
+ class="d-flex d-flex-row d-items-center container pointer primary"
512
512
  data-id="checkBox"
513
513
  data-selector-id="container"
514
514
  data-test-id="checkBox"
@@ -517,7 +517,7 @@ exports[`CheckBox component Should be render title 1`] = `
517
517
  tabindex="0"
518
518
  >
519
519
  <div
520
- class="noShrink boxContainer medium filled"
520
+ class="d-flex-shrink-0 boxContainer medium filled"
521
521
  data-id="boxComponent"
522
522
  data-selector-id="box"
523
523
  data-test-id="boxComponent"
@@ -545,7 +545,7 @@ exports[`CheckBox component Should be render title 1`] = `
545
545
  </label>
546
546
  </div>
547
547
  <div
548
- class="flexible basis_zero noShrink labelContainer"
548
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
549
549
  data-id="boxComponent"
550
550
  data-selector-id="box"
551
551
  data-test-id="boxComponent"
@@ -568,7 +568,7 @@ exports[`CheckBox component Should be render with the basic set of default props
568
568
  <DocumentFragment>
569
569
  <div
570
570
  aria-checked="false"
571
- class="inlineFlex row alignItems_center container pointer primary"
571
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
572
572
  data-id="checkBox"
573
573
  data-selector-id="container"
574
574
  data-test-id="checkBox"
@@ -576,7 +576,7 @@ exports[`CheckBox component Should be render with the basic set of default props
576
576
  tabindex="0"
577
577
  >
578
578
  <div
579
- class="noShrink boxContainer medium filled"
579
+ class="d-flex-shrink-0 boxContainer medium filled"
580
580
  data-id="boxComponent"
581
581
  data-selector-id="box"
582
582
  data-test-id="boxComponent"
@@ -611,7 +611,7 @@ exports[`CheckBox component Should render active - danger 1`] = `
611
611
  <DocumentFragment>
612
612
  <div
613
613
  aria-checked="true"
614
- class="flex row alignItems_center container pointer danger checkeddanger"
614
+ class="d-flex d-flex-row d-items-center container pointer danger checkeddanger"
615
615
  data-id="checkBox"
616
616
  data-selector-id="container"
617
617
  data-test-id="checkBox"
@@ -619,7 +619,7 @@ exports[`CheckBox component Should render active - danger 1`] = `
619
619
  tabindex="0"
620
620
  >
621
621
  <div
622
- class="noShrink boxContainer medium filled"
622
+ class="d-flex-shrink-0 boxContainer medium filled"
623
623
  data-id="boxComponent"
624
624
  data-selector-id="box"
625
625
  data-test-id="boxComponent"
@@ -653,7 +653,7 @@ exports[`CheckBox component Should render active - danger 1`] = `
653
653
  </label>
654
654
  </div>
655
655
  <div
656
- class="flexible basis_zero noShrink labelContainer"
656
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
657
657
  data-id="boxComponent"
658
658
  data-selector-id="box"
659
659
  data-test-id="boxComponent"
@@ -676,7 +676,7 @@ exports[`CheckBox component Should render active - primary 1`] = `
676
676
  <DocumentFragment>
677
677
  <div
678
678
  aria-checked="true"
679
- class="flex row alignItems_center container pointer primary checkedprimary"
679
+ class="d-flex d-flex-row d-items-center container pointer primary checkedprimary"
680
680
  data-id="checkBox"
681
681
  data-selector-id="container"
682
682
  data-test-id="checkBox"
@@ -684,7 +684,7 @@ exports[`CheckBox component Should render active - primary 1`] = `
684
684
  tabindex="0"
685
685
  >
686
686
  <div
687
- class="noShrink boxContainer medium filled"
687
+ class="d-flex-shrink-0 boxContainer medium filled"
688
688
  data-id="boxComponent"
689
689
  data-selector-id="box"
690
690
  data-test-id="boxComponent"
@@ -718,7 +718,7 @@ exports[`CheckBox component Should render active - primary 1`] = `
718
718
  </label>
719
719
  </div>
720
720
  <div
721
- class="flexible basis_zero noShrink labelContainer"
721
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
722
722
  data-id="boxComponent"
723
723
  data-selector-id="box"
724
724
  data-test-id="boxComponent"
@@ -741,7 +741,7 @@ exports[`CheckBox component Should render labelSize - default 1`] = `
741
741
  <DocumentFragment>
742
742
  <div
743
743
  aria-checked="false"
744
- class="flex row alignItems_center container pointer primary"
744
+ class="d-flex d-flex-row d-items-center container pointer primary"
745
745
  data-id="checkBox"
746
746
  data-selector-id="container"
747
747
  data-test-id="checkBox"
@@ -749,7 +749,7 @@ exports[`CheckBox component Should render labelSize - default 1`] = `
749
749
  tabindex="0"
750
750
  >
751
751
  <div
752
- class="noShrink boxContainer medium filled"
752
+ class="d-flex-shrink-0 boxContainer medium filled"
753
753
  data-id="boxComponent"
754
754
  data-selector-id="box"
755
755
  data-test-id="boxComponent"
@@ -777,7 +777,7 @@ exports[`CheckBox component Should render labelSize - default 1`] = `
777
777
  </label>
778
778
  </div>
779
779
  <div
780
- class="flexible basis_zero noShrink labelContainer"
780
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
781
781
  data-id="boxComponent"
782
782
  data-selector-id="box"
783
783
  data-test-id="boxComponent"
@@ -800,7 +800,7 @@ exports[`CheckBox component Should render labelSize - large 1`] = `
800
800
  <DocumentFragment>
801
801
  <div
802
802
  aria-checked="false"
803
- class="flex row alignItems_center container pointer primary"
803
+ class="d-flex d-flex-row d-items-center container pointer primary"
804
804
  data-id="checkBox"
805
805
  data-selector-id="container"
806
806
  data-test-id="checkBox"
@@ -808,7 +808,7 @@ exports[`CheckBox component Should render labelSize - large 1`] = `
808
808
  tabindex="0"
809
809
  >
810
810
  <div
811
- class="noShrink boxContainer medium filled"
811
+ class="d-flex-shrink-0 boxContainer medium filled"
812
812
  data-id="boxComponent"
813
813
  data-selector-id="box"
814
814
  data-test-id="boxComponent"
@@ -836,7 +836,7 @@ exports[`CheckBox component Should render labelSize - large 1`] = `
836
836
  </label>
837
837
  </div>
838
838
  <div
839
- class="flexible basis_zero noShrink labelContainer"
839
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
840
840
  data-id="boxComponent"
841
841
  data-selector-id="box"
842
842
  data-test-id="boxComponent"
@@ -859,7 +859,7 @@ exports[`CheckBox component Should render labelSize - medium 1`] = `
859
859
  <DocumentFragment>
860
860
  <div
861
861
  aria-checked="false"
862
- class="flex row alignItems_center container pointer primary"
862
+ class="d-flex d-flex-row d-items-center container pointer primary"
863
863
  data-id="checkBox"
864
864
  data-selector-id="container"
865
865
  data-test-id="checkBox"
@@ -867,7 +867,7 @@ exports[`CheckBox component Should render labelSize - medium 1`] = `
867
867
  tabindex="0"
868
868
  >
869
869
  <div
870
- class="noShrink boxContainer medium filled"
870
+ class="d-flex-shrink-0 boxContainer medium filled"
871
871
  data-id="boxComponent"
872
872
  data-selector-id="box"
873
873
  data-test-id="boxComponent"
@@ -895,7 +895,7 @@ exports[`CheckBox component Should render labelSize - medium 1`] = `
895
895
  </label>
896
896
  </div>
897
897
  <div
898
- class="flexible basis_zero noShrink labelContainer"
898
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
899
899
  data-id="boxComponent"
900
900
  data-selector-id="box"
901
901
  data-test-id="boxComponent"
@@ -918,7 +918,7 @@ exports[`CheckBox component Should render labelSize - primary 1`] = `
918
918
  <DocumentFragment>
919
919
  <div
920
920
  aria-checked="false"
921
- class="flex row alignItems_center container pointer primary"
921
+ class="d-flex d-flex-row d-items-center container pointer primary"
922
922
  data-id="checkBox"
923
923
  data-selector-id="container"
924
924
  data-test-id="checkBox"
@@ -926,7 +926,7 @@ exports[`CheckBox component Should render labelSize - primary 1`] = `
926
926
  tabindex="0"
927
927
  >
928
928
  <div
929
- class="noShrink boxContainer medium filled"
929
+ class="d-flex-shrink-0 boxContainer medium filled"
930
930
  data-id="boxComponent"
931
931
  data-selector-id="box"
932
932
  data-test-id="boxComponent"
@@ -954,7 +954,7 @@ exports[`CheckBox component Should render labelSize - primary 1`] = `
954
954
  </label>
955
955
  </div>
956
956
  <div
957
- class="flexible basis_zero noShrink labelContainer"
957
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
958
958
  data-id="boxComponent"
959
959
  data-selector-id="box"
960
960
  data-test-id="boxComponent"
@@ -977,7 +977,7 @@ exports[`CheckBox component Should render labelSize - small 1`] = `
977
977
  <DocumentFragment>
978
978
  <div
979
979
  aria-checked="false"
980
- class="flex row alignItems_center container pointer primary"
980
+ class="d-flex d-flex-row d-items-center container pointer primary"
981
981
  data-id="checkBox"
982
982
  data-selector-id="container"
983
983
  data-test-id="checkBox"
@@ -985,7 +985,7 @@ exports[`CheckBox component Should render labelSize - small 1`] = `
985
985
  tabindex="0"
986
986
  >
987
987
  <div
988
- class="noShrink boxContainer medium filled"
988
+ class="d-flex-shrink-0 boxContainer medium filled"
989
989
  data-id="boxComponent"
990
990
  data-selector-id="box"
991
991
  data-test-id="boxComponent"
@@ -1013,7 +1013,7 @@ exports[`CheckBox component Should render labelSize - small 1`] = `
1013
1013
  </label>
1014
1014
  </div>
1015
1015
  <div
1016
- class="flexible basis_zero noShrink labelContainer"
1016
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1017
1017
  data-id="boxComponent"
1018
1018
  data-selector-id="box"
1019
1019
  data-test-id="boxComponent"
@@ -1036,7 +1036,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
1036
1036
  <DocumentFragment>
1037
1037
  <div
1038
1038
  aria-checked="true"
1039
- class="flex row alignItems_center container pointer danger checkeddanger"
1039
+ class="d-flex d-flex-row d-items-center container pointer danger checkeddanger"
1040
1040
  data-id="checkBox"
1041
1041
  data-selector-id="container"
1042
1042
  data-test-id="checkBox"
@@ -1044,7 +1044,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
1044
1044
  tabindex="0"
1045
1045
  >
1046
1046
  <div
1047
- class="noShrink boxContainer medium filled"
1047
+ class="d-flex-shrink-0 boxContainer medium filled"
1048
1048
  data-id="boxComponent"
1049
1049
  data-selector-id="box"
1050
1050
  data-test-id="boxComponent"
@@ -1078,7 +1078,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
1078
1078
  </label>
1079
1079
  </div>
1080
1080
  <div
1081
- class="flexible basis_zero noShrink labelContainer"
1081
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1082
1082
  data-id="boxComponent"
1083
1083
  data-selector-id="box"
1084
1084
  data-test-id="boxComponent"
@@ -1101,7 +1101,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
1101
1101
  <DocumentFragment>
1102
1102
  <div
1103
1103
  aria-checked="true"
1104
- class="flex row alignItems_center container pointer primary checkedprimary"
1104
+ class="d-flex d-flex-row d-items-center container pointer primary checkedprimary"
1105
1105
  data-id="checkBox"
1106
1106
  data-selector-id="container"
1107
1107
  data-test-id="checkBox"
@@ -1109,7 +1109,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
1109
1109
  tabindex="0"
1110
1110
  >
1111
1111
  <div
1112
- class="noShrink boxContainer medium filled"
1112
+ class="d-flex-shrink-0 boxContainer medium filled"
1113
1113
  data-id="boxComponent"
1114
1114
  data-selector-id="box"
1115
1115
  data-test-id="boxComponent"
@@ -1143,7 +1143,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
1143
1143
  </label>
1144
1144
  </div>
1145
1145
  <div
1146
- class="flexible basis_zero noShrink labelContainer"
1146
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1147
1147
  data-id="boxComponent"
1148
1148
  data-selector-id="box"
1149
1149
  data-test-id="boxComponent"
@@ -1166,7 +1166,7 @@ exports[`CheckBox component Should render secondaryText 1`] = `
1166
1166
  <DocumentFragment>
1167
1167
  <div
1168
1168
  aria-checked="false"
1169
- class="flex row alignItems_center container pointer primary"
1169
+ class="d-flex d-flex-row d-items-center container pointer primary"
1170
1170
  data-id="checkBox"
1171
1171
  data-selector-id="container"
1172
1172
  data-test-id="checkBox"
@@ -1174,7 +1174,7 @@ exports[`CheckBox component Should render secondaryText 1`] = `
1174
1174
  tabindex="0"
1175
1175
  >
1176
1176
  <div
1177
- class="noShrink alignSelf_start boxContainer withSecondaryText medium filled"
1177
+ class="d-flex-shrink-0 d-self-start boxContainer withSecondaryText medium filled"
1178
1178
  data-id="boxComponent"
1179
1179
  data-selector-id="box"
1180
1180
  data-test-id="boxComponent"
@@ -1202,7 +1202,7 @@ exports[`CheckBox component Should render secondaryText 1`] = `
1202
1202
  </label>
1203
1203
  </div>
1204
1204
  <div
1205
- class="flexible basis_zero noShrink labelContainer"
1205
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1206
1206
  data-id="boxComponent"
1207
1207
  data-selector-id="box"
1208
1208
  data-test-id="boxComponent"
@@ -1231,7 +1231,7 @@ exports[`CheckBox component Should render size - danger 1`] = `
1231
1231
  <DocumentFragment>
1232
1232
  <div
1233
1233
  aria-checked="false"
1234
- class="flex row alignItems_center container pointer primary"
1234
+ class="d-flex d-flex-row d-items-center container pointer primary"
1235
1235
  data-id="checkBox"
1236
1236
  data-selector-id="container"
1237
1237
  data-test-id="checkBox"
@@ -1239,7 +1239,7 @@ exports[`CheckBox component Should render size - danger 1`] = `
1239
1239
  tabindex="0"
1240
1240
  >
1241
1241
  <div
1242
- class="noShrink boxContainer medium filled"
1242
+ class="d-flex-shrink-0 boxContainer medium filled"
1243
1243
  data-id="boxComponent"
1244
1244
  data-selector-id="box"
1245
1245
  data-test-id="boxComponent"
@@ -1267,7 +1267,7 @@ exports[`CheckBox component Should render size - danger 1`] = `
1267
1267
  </label>
1268
1268
  </div>
1269
1269
  <div
1270
- class="flexible basis_zero noShrink labelContainer"
1270
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1271
1271
  data-id="boxComponent"
1272
1272
  data-selector-id="box"
1273
1273
  data-test-id="boxComponent"
@@ -1290,7 +1290,7 @@ exports[`CheckBox component Should render size - default 1`] = `
1290
1290
  <DocumentFragment>
1291
1291
  <div
1292
1292
  aria-checked="false"
1293
- class="flex row alignItems_center container pointer primary"
1293
+ class="d-flex d-flex-row d-items-center container pointer primary"
1294
1294
  data-id="checkBox"
1295
1295
  data-selector-id="container"
1296
1296
  data-test-id="checkBox"
@@ -1298,7 +1298,7 @@ exports[`CheckBox component Should render size - default 1`] = `
1298
1298
  tabindex="0"
1299
1299
  >
1300
1300
  <div
1301
- class="noShrink boxContainer medium filled"
1301
+ class="d-flex-shrink-0 boxContainer medium filled"
1302
1302
  data-id="boxComponent"
1303
1303
  data-selector-id="box"
1304
1304
  data-test-id="boxComponent"
@@ -1326,7 +1326,7 @@ exports[`CheckBox component Should render size - default 1`] = `
1326
1326
  </label>
1327
1327
  </div>
1328
1328
  <div
1329
- class="flexible basis_zero noShrink labelContainer"
1329
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1330
1330
  data-id="boxComponent"
1331
1331
  data-selector-id="box"
1332
1332
  data-test-id="boxComponent"
@@ -1349,7 +1349,7 @@ exports[`CheckBox component Should render size - mandatory 1`] = `
1349
1349
  <DocumentFragment>
1350
1350
  <div
1351
1351
  aria-checked="false"
1352
- class="flex row alignItems_center container pointer primary"
1352
+ class="d-flex d-flex-row d-items-center container pointer primary"
1353
1353
  data-id="checkBox"
1354
1354
  data-selector-id="container"
1355
1355
  data-test-id="checkBox"
@@ -1357,7 +1357,7 @@ exports[`CheckBox component Should render size - mandatory 1`] = `
1357
1357
  tabindex="0"
1358
1358
  >
1359
1359
  <div
1360
- class="noShrink boxContainer medium filled"
1360
+ class="d-flex-shrink-0 boxContainer medium filled"
1361
1361
  data-id="boxComponent"
1362
1362
  data-selector-id="box"
1363
1363
  data-test-id="boxComponent"
@@ -1385,7 +1385,7 @@ exports[`CheckBox component Should render size - mandatory 1`] = `
1385
1385
  </label>
1386
1386
  </div>
1387
1387
  <div
1388
- class="flexible basis_zero noShrink labelContainer"
1388
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1389
1389
  data-id="boxComponent"
1390
1390
  data-selector-id="box"
1391
1391
  data-test-id="boxComponent"
@@ -1408,7 +1408,7 @@ exports[`CheckBox component Should render size - medium 1`] = `
1408
1408
  <DocumentFragment>
1409
1409
  <div
1410
1410
  aria-checked="true"
1411
- class="inlineFlex row alignItems_center container pointer primary checkedprimary"
1411
+ class="d-inline-flex d-flex-row d-items-center container pointer primary checkedprimary"
1412
1412
  data-id="checkBox"
1413
1413
  data-selector-id="container"
1414
1414
  data-test-id="checkBox"
@@ -1416,7 +1416,7 @@ exports[`CheckBox component Should render size - medium 1`] = `
1416
1416
  tabindex="0"
1417
1417
  >
1418
1418
  <div
1419
- class="noShrink boxContainer medium filled"
1419
+ class="d-flex-shrink-0 boxContainer medium filled"
1420
1420
  data-id="boxComponent"
1421
1421
  data-selector-id="box"
1422
1422
  data-test-id="boxComponent"
@@ -1457,7 +1457,7 @@ exports[`CheckBox component Should render size - primary 1`] = `
1457
1457
  <DocumentFragment>
1458
1458
  <div
1459
1459
  aria-checked="false"
1460
- class="flex row alignItems_center container pointer primary"
1460
+ class="d-flex d-flex-row d-items-center container pointer primary"
1461
1461
  data-id="checkBox"
1462
1462
  data-selector-id="container"
1463
1463
  data-test-id="checkBox"
@@ -1465,7 +1465,7 @@ exports[`CheckBox component Should render size - primary 1`] = `
1465
1465
  tabindex="0"
1466
1466
  >
1467
1467
  <div
1468
- class="noShrink boxContainer medium filled"
1468
+ class="d-flex-shrink-0 boxContainer medium filled"
1469
1469
  data-id="boxComponent"
1470
1470
  data-selector-id="box"
1471
1471
  data-test-id="boxComponent"
@@ -1493,7 +1493,7 @@ exports[`CheckBox component Should render size - primary 1`] = `
1493
1493
  </label>
1494
1494
  </div>
1495
1495
  <div
1496
- class="flexible basis_zero noShrink labelContainer"
1496
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1497
1497
  data-id="boxComponent"
1498
1498
  data-selector-id="box"
1499
1499
  data-test-id="boxComponent"
@@ -1516,7 +1516,7 @@ exports[`CheckBox component Should render size - secondary 1`] = `
1516
1516
  <DocumentFragment>
1517
1517
  <div
1518
1518
  aria-checked="false"
1519
- class="flex row alignItems_center container pointer primary"
1519
+ class="d-flex d-flex-row d-items-center container pointer primary"
1520
1520
  data-id="checkBox"
1521
1521
  data-selector-id="container"
1522
1522
  data-test-id="checkBox"
@@ -1524,7 +1524,7 @@ exports[`CheckBox component Should render size - secondary 1`] = `
1524
1524
  tabindex="0"
1525
1525
  >
1526
1526
  <div
1527
- class="noShrink boxContainer medium filled"
1527
+ class="d-flex-shrink-0 boxContainer medium filled"
1528
1528
  data-id="boxComponent"
1529
1529
  data-selector-id="box"
1530
1530
  data-test-id="boxComponent"
@@ -1552,7 +1552,7 @@ exports[`CheckBox component Should render size - secondary 1`] = `
1552
1552
  </label>
1553
1553
  </div>
1554
1554
  <div
1555
- class="flexible basis_zero noShrink labelContainer"
1555
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1556
1556
  data-id="boxComponent"
1557
1557
  data-selector-id="box"
1558
1558
  data-test-id="boxComponent"
@@ -1575,7 +1575,7 @@ exports[`CheckBox component Should render size - small 1`] = `
1575
1575
  <DocumentFragment>
1576
1576
  <div
1577
1577
  aria-checked="true"
1578
- class="inlineFlex row alignItems_center container pointer primary checkedprimary"
1578
+ class="d-inline-flex d-flex-row d-items-center container pointer primary checkedprimary"
1579
1579
  data-id="checkBox"
1580
1580
  data-selector-id="container"
1581
1581
  data-test-id="checkBox"
@@ -1583,7 +1583,7 @@ exports[`CheckBox component Should render size - small 1`] = `
1583
1583
  tabindex="0"
1584
1584
  >
1585
1585
  <div
1586
- class="noShrink boxContainer small filled"
1586
+ class="d-flex-shrink-0 boxContainer small filled"
1587
1587
  data-id="boxComponent"
1588
1588
  data-selector-id="box"
1589
1589
  data-test-id="boxComponent"
@@ -1627,7 +1627,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
1627
1627
  aria-hidden="false"
1628
1628
  aria-label="ariaLabelCheckBox"
1629
1629
  aria-labelledby="ariaLabelledbyCheckBox"
1630
- class="inlineFlex row alignItems_center container pointer primary checkedprimary"
1630
+ class="d-inline-flex d-flex-row d-items-center container pointer primary checkedprimary"
1631
1631
  data-id="checkBox"
1632
1632
  data-selector-id="container"
1633
1633
  data-test-id="checkBox"
@@ -1635,7 +1635,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
1635
1635
  tabindex="0"
1636
1636
  >
1637
1637
  <div
1638
- class="noShrink boxContainer medium filled"
1638
+ class="d-flex-shrink-0 boxContainer medium filled"
1639
1639
  data-id="boxComponent"
1640
1640
  data-selector-id="box"
1641
1641
  data-test-id="boxComponent"
@@ -1679,7 +1679,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
1679
1679
  aria-hidden="true"
1680
1680
  aria-label="ariaLabelCheckBox"
1681
1681
  aria-labelledby="ariaLabelledbyCheckBox"
1682
- class="inlineFlex row alignItems_center container pointer primary checkedprimary"
1682
+ class="d-inline-flex d-flex-row d-items-center container pointer primary checkedprimary"
1683
1683
  data-id="checkBox"
1684
1684
  data-selector-id="container"
1685
1685
  data-test-id="checkBox"
@@ -1687,7 +1687,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
1687
1687
  tabindex="-1"
1688
1688
  >
1689
1689
  <div
1690
- class="noShrink boxContainer medium filled"
1690
+ class="d-flex-shrink-0 boxContainer medium filled"
1691
1691
  data-id="boxComponent"
1692
1692
  data-selector-id="box"
1693
1693
  data-test-id="boxComponent"
@@ -1728,7 +1728,7 @@ exports[`CheckBox component rendering the Custom Props 1`] = `
1728
1728
  <DocumentFragment>
1729
1729
  <div
1730
1730
  aria-checked="false"
1731
- class="flex row alignItems_center container pointer primary"
1731
+ class="d-flex d-flex-row d-items-center container pointer primary"
1732
1732
  data-id="checkBox"
1733
1733
  data-props="true"
1734
1734
  data-selector-id="container"
@@ -1737,7 +1737,7 @@ exports[`CheckBox component rendering the Custom Props 1`] = `
1737
1737
  tabindex="0"
1738
1738
  >
1739
1739
  <div
1740
- class="noShrink boxContainer medium filled"
1740
+ class="d-flex-shrink-0 boxContainer medium filled"
1741
1741
  data-id="boxComponent"
1742
1742
  data-selector-id="box"
1743
1743
  data-test-id="boxComponent"
@@ -1765,7 +1765,7 @@ exports[`CheckBox component rendering the Custom Props 1`] = `
1765
1765
  </label>
1766
1766
  </div>
1767
1767
  <div
1768
- class="flexible basis_zero noShrink labelContainer"
1768
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1769
1769
  data-id="boxComponent"
1770
1770
  data-selector-id="box"
1771
1771
  data-test-id="boxComponent"
@@ -1788,7 +1788,7 @@ exports[`CheckBox component rendering the Custom class 1`] = `
1788
1788
  <DocumentFragment>
1789
1789
  <div
1790
1790
  aria-checked="true"
1791
- class="flex row alignItems_center container pointer primary checkedprimary customCheckBoxClass"
1791
+ class="d-flex d-flex-row d-items-center container pointer primary checkedprimary customCheckBoxClass"
1792
1792
  data-id="checkBox"
1793
1793
  data-selector-id="container"
1794
1794
  data-test-id="checkBox"
@@ -1796,7 +1796,7 @@ exports[`CheckBox component rendering the Custom class 1`] = `
1796
1796
  tabindex="0"
1797
1797
  >
1798
1798
  <div
1799
- class="noShrink boxContainer medium filled customCBoxSizeClass"
1799
+ class="d-flex-shrink-0 boxContainer medium filled customCBoxSizeClass"
1800
1800
  data-id="boxComponent"
1801
1801
  data-selector-id="box"
1802
1802
  data-test-id="boxComponent"
@@ -1830,7 +1830,7 @@ exports[`CheckBox component rendering the Custom class 1`] = `
1830
1830
  </label>
1831
1831
  </div>
1832
1832
  <div
1833
- class="flexible basis_zero noShrink labelContainer"
1833
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1834
1834
  data-id="boxComponent"
1835
1835
  data-selector-id="box"
1836
1836
  data-test-id="boxComponent"