@zohodesk/components 1.6.25 → 1.6.26

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 (216) hide show
  1. package/CHANGELOG.md +2042 -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 +0 -10
  24. package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  25. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +93 -93
  26. package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  27. package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +8 -8
  28. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +7 -7
  29. package/es/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  30. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +28 -28
  31. package/es/DropDown/DropDownHeading.js +1 -6
  32. package/es/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  33. package/es/Heading/Heading.js +1 -6
  34. package/es/Label/Label.js +1 -6
  35. package/es/Label/__tests__/__snapshots__/Label.spec.js.snap +4 -4
  36. package/es/ListItem/ListContainer.js +1 -6
  37. package/es/ListItem/ListItem.js +1 -6
  38. package/es/ListItem/ListItemWithAvatar.js +1 -6
  39. package/es/ListItem/ListItemWithCheckBox.js +1 -6
  40. package/es/ListItem/ListItemWithIcon.js +1 -6
  41. package/es/ListItem/ListItemWithRadio.js +1 -6
  42. package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  43. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  44. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  45. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -62
  46. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  47. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -62
  48. package/es/Modal/Modal.js +1 -8
  49. package/es/MultiSelect/AdvancedGroupMultiSelect.js +1 -7
  50. package/es/MultiSelect/AdvancedMultiSelect.js +1 -9
  51. package/es/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  52. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  53. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  54. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +35 -35
  55. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  56. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  57. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  58. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  59. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +94 -94
  60. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  61. package/es/RippleEffect/RippleEffect.js +1 -6
  62. package/es/Select/GroupSelect.js +1 -8
  63. package/es/Select/Select.js +1 -10
  64. package/es/Select/SelectWithAvatar.js +1 -9
  65. package/es/Select/SelectWithIcon.js +1 -7
  66. package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +7 -7
  67. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +831 -831
  68. package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  69. package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +10 -10
  70. package/es/Switch/Switch.js +1 -6
  71. package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  72. package/es/Tab/Tab.js +1 -6
  73. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  74. package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  75. package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  76. package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  77. package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  78. package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  79. package/es/Tag/Tag.js +1 -6
  80. package/es/Tag/__tests__/__snapshots__/Tag.spec.js.snap +94 -94
  81. package/es/TextBox/TextBox.js +1 -8
  82. package/es/TextBoxIcon/TextBoxIcon.js +1 -8
  83. package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +167 -167
  84. package/es/Textarea/Textarea.js +1 -8
  85. package/es/Tooltip/Tooltip.js +1 -8
  86. package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +1 -5
  87. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -5
  88. package/es/semantic/Button/Button.js +1 -6
  89. package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +20 -20
  90. package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  91. package/es/v1/Button/Button.js +197 -113
  92. package/es/v1/Button/README.md +110 -44
  93. package/es/v1/Button/__tests__/Button.spec.js +139 -48
  94. package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +1236 -340
  95. package/es/v1/Button/constants/index.js +29 -23
  96. package/es/v1/Button/constants/presets.js +160 -0
  97. package/es/v1/Button/css/Button_v1.module.css +33 -16
  98. package/es/v1/Button/css/cssJSLogic.js +56 -29
  99. package/es/v1/Button/props/defaultProps.js +5 -6
  100. package/es/v1/Button/props/propTypes.js +26 -8
  101. package/es/v1/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -24
  102. package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +14 -14
  103. package/es/v1/helpers/colorHelpers/__tests__/colorHelper.spec.js +357 -0
  104. package/es/v1/helpers/colorHelpers/background/backgroundColor.module.css +38 -534
  105. package/es/v1/helpers/colorHelpers/border/borderColor.module.css +28 -412
  106. package/es/v1/helpers/colorHelpers/colorHelper.js +120 -139
  107. package/es/v1/helpers/colorHelpers/constants/index.js +45 -4
  108. package/es/v1/helpers/colorHelpers/index.js +0 -1
  109. package/es/v1/helpers/colorHelpers/paletteUtilities.README.md +141 -336
  110. package/es/v1/helpers/colorHelpers/text/textColor.module.css +79 -295
  111. package/lib/Accordion/Accordion.js +1 -6
  112. package/lib/Accordion/AccordionItem.js +1 -6
  113. package/lib/Animation/Animation.js +1 -8
  114. package/lib/AppContainer/AppContainer.js +1 -6
  115. package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  116. package/lib/Avatar/Avatar.js +1 -6
  117. package/lib/AvatarTeam/AvatarTeam.js +1 -7
  118. package/lib/Button/Button.js +1 -7
  119. package/lib/Buttongroup/Buttongroup.js +1 -14
  120. package/lib/Card/Card.js +1 -8
  121. package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  122. package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  123. package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  124. package/lib/CheckBox/CheckBox.js +1 -6
  125. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +88 -88
  126. package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +48 -48
  127. package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +30 -30
  128. package/lib/DateTime/DateWidget.js +0 -10
  129. package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  130. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +93 -93
  131. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  132. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +8 -8
  133. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +7 -7
  134. package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  135. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +28 -28
  136. package/lib/DropDown/DropDownHeading.js +1 -6
  137. package/lib/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  138. package/lib/Heading/Heading.js +1 -6
  139. package/lib/Label/Label.js +1 -6
  140. package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap +4 -4
  141. package/lib/ListItem/ListContainer.js +1 -7
  142. package/lib/ListItem/ListItem.js +1 -6
  143. package/lib/ListItem/ListItemWithAvatar.js +1 -6
  144. package/lib/ListItem/ListItemWithCheckBox.js +1 -6
  145. package/lib/ListItem/ListItemWithIcon.js +1 -6
  146. package/lib/ListItem/ListItemWithRadio.js +1 -6
  147. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  148. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  149. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  150. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -62
  151. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  152. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -62
  153. package/lib/Modal/Modal.js +1 -8
  154. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +1 -7
  155. package/lib/MultiSelect/AdvancedMultiSelect.js +1 -9
  156. package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  157. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  158. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  159. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +35 -35
  160. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  161. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  162. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  163. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  164. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +94 -94
  165. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  166. package/lib/RippleEffect/RippleEffect.js +1 -6
  167. package/lib/Select/GroupSelect.js +1 -9
  168. package/lib/Select/Select.js +1 -11
  169. package/lib/Select/SelectWithAvatar.js +1 -9
  170. package/lib/Select/SelectWithIcon.js +1 -7
  171. package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +7 -7
  172. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +831 -831
  173. package/lib/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  174. package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +10 -10
  175. package/lib/Switch/Switch.js +1 -6
  176. package/lib/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  177. package/lib/Tab/Tab.js +1 -6
  178. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  179. package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  180. package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  181. package/lib/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  182. package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  183. package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  184. package/lib/Tag/Tag.js +1 -6
  185. package/lib/Tag/__tests__/__snapshots__/Tag.spec.js.snap +94 -94
  186. package/lib/TextBox/TextBox.js +1 -8
  187. package/lib/TextBoxIcon/TextBoxIcon.js +1 -8
  188. package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +167 -167
  189. package/lib/Textarea/Textarea.js +1 -8
  190. package/lib/Tooltip/Tooltip.js +1 -8
  191. package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +1 -5
  192. package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -5
  193. package/lib/semantic/Button/Button.js +1 -6
  194. package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +20 -20
  195. package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  196. package/lib/v1/Button/Button.js +207 -123
  197. package/lib/v1/Button/README.md +110 -44
  198. package/lib/v1/Button/__tests__/Button.spec.js +195 -88
  199. package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +1236 -340
  200. package/lib/v1/Button/constants/index.js +34 -31
  201. package/lib/v1/Button/constants/presets.js +179 -0
  202. package/lib/v1/Button/css/Button_v1.module.css +33 -16
  203. package/lib/v1/Button/css/cssJSLogic.js +45 -25
  204. package/lib/v1/Button/props/defaultProps.js +4 -5
  205. package/lib/v1/Button/props/propTypes.js +41 -7
  206. package/lib/v1/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -24
  207. package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +14 -14
  208. package/lib/v1/helpers/colorHelpers/__tests__/colorHelper.spec.js +363 -0
  209. package/lib/v1/helpers/colorHelpers/background/backgroundColor.module.css +38 -534
  210. package/lib/v1/helpers/colorHelpers/border/borderColor.module.css +28 -412
  211. package/lib/v1/helpers/colorHelpers/colorHelper.js +130 -153
  212. package/lib/v1/helpers/colorHelpers/constants/index.js +45 -4
  213. package/lib/v1/helpers/colorHelpers/index.js +2 -24
  214. package/lib/v1/helpers/colorHelpers/paletteUtilities.README.md +141 -336
  215. package/lib/v1/helpers/colorHelpers/text/textColor.module.css +79 -295
  216. package/package.json +16 -16
package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap CHANGED
@@ -5,7 +5,7 @@ exports[`Radio rendering ally ariaChecked true 1`] = `
5
5
  <div
6
6
  aria-checked="true"
7
7
  aria-readonly="false"
8
- class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect checked"
8
+ class="d-inline-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect checked"
9
9
  data-id="RadioComp"
10
10
  data-selector-id="container"
11
11
  data-test-id="RadioComp"
@@ -13,7 +13,7 @@ exports[`Radio rendering ally ariaChecked true 1`] = `
13
13
  tabindex="0"
14
14
  >
15
15
  <div
16
- class="noShrink radio rdBoxprimary hoverprimary medium filled centerPathprimary"
16
+ class="d-flex-shrink-0 radio rdBoxprimary hoverprimary medium filled centerPathprimary"
17
17
  data-id="boxComponent"
18
18
  data-selector-id="box"
19
19
  data-test-id="boxComponent"
@@ -54,7 +54,7 @@ exports[`Radio rendering ally ariaHidden , ariaChecked, ariaReadonly fasle true
54
54
  aria-checked="true"
55
55
  aria-hidden="true"
56
56
  aria-readonly="true"
57
- class="inlineFlex row alignItems_center justifyContent_center container readonly checked"
57
+ class="d-inline-flex d-flex-row d-items-center d-justify-center container readonly checked"
58
58
  data-id="RadioComp"
59
59
  data-selector-id="container"
60
60
  data-test-id="RadioComp"
@@ -62,7 +62,7 @@ exports[`Radio rendering ally ariaHidden , ariaChecked, ariaReadonly fasle true
62
62
  tabindex="-1"
63
63
  >
64
64
  <div
65
- class="noShrink radio rdBoxprimary medium filled centerPathprimary disabled"
65
+ class="d-flex-shrink-0 radio rdBoxprimary medium filled centerPathprimary disabled"
66
66
  data-id="boxComponent"
67
67
  data-selector-id="box"
68
68
  data-test-id="boxComponent"
@@ -103,7 +103,7 @@ exports[`Radio rendering ally ariaHidden , ariaChecked, ariaReadonly is false 1`
103
103
  aria-checked="false"
104
104
  aria-hidden="false"
105
105
  aria-readonly="false"
106
- class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
106
+ class="d-inline-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
107
107
  data-id="RadioComp"
108
108
  data-selector-id="container"
109
109
  data-test-id="RadioComp"
@@ -111,7 +111,7 @@ exports[`Radio rendering ally ariaHidden , ariaChecked, ariaReadonly is false 1`
111
111
  tabindex="0"
112
112
  >
113
113
  <div
114
- class="noShrink radio hoverprimary medium filled centerPathprimary"
114
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
115
115
  data-id="boxComponent"
116
116
  data-selector-id="box"
117
117
  data-test-id="boxComponent"
@@ -145,7 +145,7 @@ exports[`Radio rendering labelPalette - danger 1`] = `
145
145
  <div
146
146
  aria-checked="false"
147
147
  aria-readonly="false"
148
- class="flex row alignItems_center justifyContent_center container pointer hoverEfffect"
148
+ class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
149
149
  data-id="RadioComp"
150
150
  data-selector-id="container"
151
151
  data-test-id="RadioComp"
@@ -153,7 +153,7 @@ exports[`Radio rendering labelPalette - danger 1`] = `
153
153
  tabindex="0"
154
154
  >
155
155
  <div
156
- class="noShrink radio hoverprimary medium filled centerPathprimary"
156
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
157
157
  data-id="boxComponent"
158
158
  data-selector-id="box"
159
159
  data-test-id="boxComponent"
@@ -179,7 +179,7 @@ exports[`Radio rendering labelPalette - danger 1`] = `
179
179
  </label>
180
180
  </div>
181
181
  <div
182
- class="flexible basis_zero noShrink labelContainer"
182
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
183
183
  data-id="boxComponent"
184
184
  data-selector-id="box"
185
185
  data-test-id="boxComponent"
@@ -203,7 +203,7 @@ exports[`Radio rendering labelPalette - default 1`] = `
203
203
  <div
204
204
  aria-checked="false"
205
205
  aria-readonly="false"
206
- class="flex row alignItems_center justifyContent_center container pointer hoverEfffect"
206
+ class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
207
207
  data-id="RadioComp"
208
208
  data-selector-id="container"
209
209
  data-test-id="RadioComp"
@@ -211,7 +211,7 @@ exports[`Radio rendering labelPalette - default 1`] = `
211
211
  tabindex="0"
212
212
  >
213
213
  <div
214
- class="noShrink radio hoverprimary medium filled centerPathprimary"
214
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
215
215
  data-id="boxComponent"
216
216
  data-selector-id="box"
217
217
  data-test-id="boxComponent"
@@ -237,7 +237,7 @@ exports[`Radio rendering labelPalette - default 1`] = `
237
237
  </label>
238
238
  </div>
239
239
  <div
240
- class="flexible basis_zero noShrink labelContainer"
240
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
241
241
  data-id="boxComponent"
242
242
  data-selector-id="box"
243
243
  data-test-id="boxComponent"
@@ -261,7 +261,7 @@ exports[`Radio rendering labelPalette - mandatory 1`] = `
261
261
  <div
262
262
  aria-checked="false"
263
263
  aria-readonly="false"
264
- class="flex row alignItems_center justifyContent_center container pointer hoverEfffect"
264
+ class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
265
265
  data-id="RadioComp"
266
266
  data-selector-id="container"
267
267
  data-test-id="RadioComp"
@@ -269,7 +269,7 @@ exports[`Radio rendering labelPalette - mandatory 1`] = `
269
269
  tabindex="0"
270
270
  >
271
271
  <div
272
- class="noShrink radio hoverprimary medium filled centerPathprimary"
272
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
273
273
  data-id="boxComponent"
274
274
  data-selector-id="box"
275
275
  data-test-id="boxComponent"
@@ -295,7 +295,7 @@ exports[`Radio rendering labelPalette - mandatory 1`] = `
295
295
  </label>
296
296
  </div>
297
297
  <div
298
- class="flexible basis_zero noShrink labelContainer"
298
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
299
299
  data-id="boxComponent"
300
300
  data-selector-id="box"
301
301
  data-test-id="boxComponent"
@@ -319,7 +319,7 @@ exports[`Radio rendering labelPalette - primary 1`] = `
319
319
  <div
320
320
  aria-checked="false"
321
321
  aria-readonly="false"
322
- class="flex row alignItems_center justifyContent_center container pointer hoverEfffect"
322
+ class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
323
323
  data-id="RadioComp"
324
324
  data-selector-id="container"
325
325
  data-test-id="RadioComp"
@@ -327,7 +327,7 @@ exports[`Radio rendering labelPalette - primary 1`] = `
327
327
  tabindex="0"
328
328
  >
329
329
  <div
330
- class="noShrink radio hoverprimary medium filled centerPathprimary"
330
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
331
331
  data-id="boxComponent"
332
332
  data-selector-id="box"
333
333
  data-test-id="boxComponent"
@@ -353,7 +353,7 @@ exports[`Radio rendering labelPalette - primary 1`] = `
353
353
  </label>
354
354
  </div>
355
355
  <div
356
- class="flexible basis_zero noShrink labelContainer"
356
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
357
357
  data-id="boxComponent"
358
358
  data-selector-id="box"
359
359
  data-test-id="boxComponent"
@@ -377,7 +377,7 @@ exports[`Radio rendering labelSize - default 1`] = `
377
377
  <div
378
378
  aria-checked="false"
379
379
  aria-readonly="false"
380
- class="flex row alignItems_center justifyContent_center container pointer hoverEfffect"
380
+ class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
381
381
  data-id="RadioComp"
382
382
  data-selector-id="container"
383
383
  data-test-id="RadioComp"
@@ -385,7 +385,7 @@ exports[`Radio rendering labelSize - default 1`] = `
385
385
  tabindex="0"
386
386
  >
387
387
  <div
388
- class="noShrink radio hoverprimary medium filled centerPathprimary"
388
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
389
389
  data-id="boxComponent"
390
390
  data-selector-id="box"
391
391
  data-test-id="boxComponent"
@@ -411,7 +411,7 @@ exports[`Radio rendering labelSize - default 1`] = `
411
411
  </label>
412
412
  </div>
413
413
  <div
414
- class="flexible basis_zero noShrink labelContainer"
414
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
415
415
  data-id="boxComponent"
416
416
  data-selector-id="box"
417
417
  data-test-id="boxComponent"
@@ -435,7 +435,7 @@ exports[`Radio rendering labelSize - large 1`] = `
435
435
  <div
436
436
  aria-checked="false"
437
437
  aria-readonly="false"
438
- class="flex row alignItems_center justifyContent_center container pointer hoverEfffect"
438
+ class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
439
439
  data-id="RadioComp"
440
440
  data-selector-id="container"
441
441
  data-test-id="RadioComp"
@@ -443,7 +443,7 @@ exports[`Radio rendering labelSize - large 1`] = `
443
443
  tabindex="0"
444
444
  >
445
445
  <div
446
- class="noShrink radio hoverprimary medium filled centerPathprimary"
446
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
447
447
  data-id="boxComponent"
448
448
  data-selector-id="box"
449
449
  data-test-id="boxComponent"
@@ -469,7 +469,7 @@ exports[`Radio rendering labelSize - large 1`] = `
469
469
  </label>
470
470
  </div>
471
471
  <div
472
- class="flexible basis_zero noShrink labelContainer"
472
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
473
473
  data-id="boxComponent"
474
474
  data-selector-id="box"
475
475
  data-test-id="boxComponent"
@@ -493,7 +493,7 @@ exports[`Radio rendering labelSize - medium 1`] = `
493
493
  <div
494
494
  aria-checked="false"
495
495
  aria-readonly="false"
496
- class="flex row alignItems_center justifyContent_center container pointer hoverEfffect"
496
+ class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
497
497
  data-id="RadioComp"
498
498
  data-selector-id="container"
499
499
  data-test-id="RadioComp"
@@ -501,7 +501,7 @@ exports[`Radio rendering labelSize - medium 1`] = `
501
501
  tabindex="0"
502
502
  >
503
503
  <div
504
- class="noShrink radio hoverprimary medium filled centerPathprimary"
504
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
505
505
  data-id="boxComponent"
506
506
  data-selector-id="box"
507
507
  data-test-id="boxComponent"
@@ -527,7 +527,7 @@ exports[`Radio rendering labelSize - medium 1`] = `
527
527
  </label>
528
528
  </div>
529
529
  <div
530
- class="flexible basis_zero noShrink labelContainer"
530
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
531
531
  data-id="boxComponent"
532
532
  data-selector-id="box"
533
533
  data-test-id="boxComponent"
@@ -551,7 +551,7 @@ exports[`Radio rendering labelSize - primary 1`] = `
551
551
  <div
552
552
  aria-checked="false"
553
553
  aria-readonly="false"
554
- class="flex row alignItems_center justifyContent_center container pointer hoverEfffect"
554
+ class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
555
555
  data-id="RadioComp"
556
556
  data-selector-id="container"
557
557
  data-test-id="RadioComp"
@@ -559,7 +559,7 @@ exports[`Radio rendering labelSize - primary 1`] = `
559
559
  tabindex="0"
560
560
  >
561
561
  <div
562
- class="noShrink radio hoverprimary medium filled centerPathprimary"
562
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
563
563
  data-id="boxComponent"
564
564
  data-selector-id="box"
565
565
  data-test-id="boxComponent"
@@ -585,7 +585,7 @@ exports[`Radio rendering labelSize - primary 1`] = `
585
585
  </label>
586
586
  </div>
587
587
  <div
588
- class="flexible basis_zero noShrink labelContainer"
588
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
589
589
  data-id="boxComponent"
590
590
  data-selector-id="box"
591
591
  data-test-id="boxComponent"
@@ -609,7 +609,7 @@ exports[`Radio rendering labelSize - small 1`] = `
609
609
  <div
610
610
  aria-checked="false"
611
611
  aria-readonly="false"
612
- class="flex row alignItems_center justifyContent_center container pointer hoverEfffect"
612
+ class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
613
613
  data-id="RadioComp"
614
614
  data-selector-id="container"
615
615
  data-test-id="RadioComp"
@@ -617,7 +617,7 @@ exports[`Radio rendering labelSize - small 1`] = `
617
617
  tabindex="0"
618
618
  >
619
619
  <div
620
- class="noShrink radio hoverprimary medium filled centerPathprimary"
620
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
621
621
  data-id="boxComponent"
622
622
  data-selector-id="box"
623
623
  data-test-id="boxComponent"
@@ -643,7 +643,7 @@ exports[`Radio rendering labelSize - small 1`] = `
643
643
  </label>
644
644
  </div>
645
645
  <div
646
- class="flexible basis_zero noShrink labelContainer"
646
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
647
647
  data-id="boxComponent"
648
648
  data-selector-id="box"
649
649
  data-test-id="boxComponent"
@@ -667,7 +667,7 @@ exports[`Radio rendering palette - danger 1`] = `
667
667
  <div
668
668
  aria-checked="false"
669
669
  aria-readonly="false"
670
- class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
670
+ class="d-inline-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
671
671
  data-id="RadioComp"
672
672
  data-selector-id="container"
673
673
  data-test-id="RadioComp"
@@ -675,7 +675,7 @@ exports[`Radio rendering palette - danger 1`] = `
675
675
  tabindex="0"
676
676
  >
677
677
  <div
678
- class="noShrink radio hoverdanger medium filled centerPathdanger"
678
+ class="d-flex-shrink-0 radio hoverdanger medium filled centerPathdanger"
679
679
  data-id="boxComponent"
680
680
  data-selector-id="box"
681
681
  data-test-id="boxComponent"
@@ -709,7 +709,7 @@ exports[`Radio rendering palette - primary 1`] = `
709
709
  <div
710
710
  aria-checked="false"
711
711
  aria-readonly="false"
712
- class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
712
+ class="d-inline-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
713
713
  data-id="RadioComp"
714
714
  data-selector-id="container"
715
715
  data-test-id="RadioComp"
@@ -717,7 +717,7 @@ exports[`Radio rendering palette - primary 1`] = `
717
717
  tabindex="0"
718
718
  >
719
719
  <div
720
- class="noShrink radio hoverprimary medium filled centerPathprimary"
720
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
721
721
  data-id="boxComponent"
722
722
  data-selector-id="box"
723
723
  data-test-id="boxComponent"
@@ -751,7 +751,7 @@ exports[`Radio rendering secondaryText with checked state 1`] = `
751
751
  <div
752
752
  aria-checked="true"
753
753
  aria-readonly="false"
754
- class="flex row alignItems_center justifyContent_center container pointer hoverEfffect checked"
754
+ class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect checked"
755
755
  data-id="RadioComp"
756
756
  data-selector-id="container"
757
757
  data-test-id="RadioComp"
@@ -759,7 +759,7 @@ exports[`Radio rendering secondaryText with checked state 1`] = `
759
759
  tabindex="0"
760
760
  >
761
761
  <div
762
- class="noShrink alignSelf_start radio rdBoxprimary hoverprimary medium filled centerPathprimary withSecondaryText"
762
+ class="d-flex-shrink-0 d-self-start radio rdBoxprimary hoverprimary medium filled centerPathprimary withSecondaryText"
763
763
  data-id="boxComponent"
764
764
  data-selector-id="box"
765
765
  data-test-id="boxComponent"
@@ -791,7 +791,7 @@ exports[`Radio rendering secondaryText with checked state 1`] = `
791
791
  </label>
792
792
  </div>
793
793
  <div
794
- class="flexible basis_zero noShrink labelContainer"
794
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
795
795
  data-id="boxComponent"
796
796
  data-selector-id="box"
797
797
  data-test-id="boxComponent"
@@ -821,7 +821,7 @@ exports[`Radio rendering size - medium 1`] = `
821
821
  <div
822
822
  aria-checked="false"
823
823
  aria-readonly="false"
824
- class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
824
+ class="d-inline-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
825
825
  data-id="RadioComp"
826
826
  data-selector-id="container"
827
827
  data-test-id="RadioComp"
@@ -829,7 +829,7 @@ exports[`Radio rendering size - medium 1`] = `
829
829
  tabindex="0"
830
830
  >
831
831
  <div
832
- class="noShrink radio hoverprimary medium filled centerPathprimary"
832
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
833
833
  data-id="boxComponent"
834
834
  data-selector-id="box"
835
835
  data-test-id="boxComponent"
@@ -863,7 +863,7 @@ exports[`Radio rendering size - small 1`] = `
863
863
  <div
864
864
  aria-checked="false"
865
865
  aria-readonly="false"
866
- class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
866
+ class="d-inline-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
867
867
  data-id="RadioComp"
868
868
  data-selector-id="container"
869
869
  data-test-id="RadioComp"
@@ -871,7 +871,7 @@ exports[`Radio rendering size - small 1`] = `
871
871
  tabindex="0"
872
872
  >
873
873
  <div
874
- class="noShrink radio hoverprimary small filled centerPathprimary"
874
+ class="d-flex-shrink-0 radio hoverprimary small filled centerPathprimary"
875
875
  data-id="boxComponent"
876
876
  data-selector-id="box"
877
877
  data-test-id="boxComponent"
@@ -905,7 +905,7 @@ exports[`Radio rendering the Checked is true for palette - danger 1`] = `
905
905
  <div
906
906
  aria-checked="false"
907
907
  aria-readonly="false"
908
- class="flex row alignItems_center justifyContent_center container active pointer hoverEfffect"
908
+ class="d-flex d-flex-row d-items-center d-justify-center container active pointer hoverEfffect"
909
909
  data-id="RadioComp"
910
910
  data-selector-id="container"
911
911
  data-test-id="RadioComp"
@@ -913,7 +913,7 @@ exports[`Radio rendering the Checked is true for palette - danger 1`] = `
913
913
  tabindex="0"
914
914
  >
915
915
  <div
916
- class="noShrink radio hoverdanger medium filled centerPathdanger"
916
+ class="d-flex-shrink-0 radio hoverdanger medium filled centerPathdanger"
917
917
  data-id="boxComponent"
918
918
  data-selector-id="box"
919
919
  data-test-id="boxComponent"
@@ -939,7 +939,7 @@ exports[`Radio rendering the Checked is true for palette - danger 1`] = `
939
939
  </label>
940
940
  </div>
941
941
  <div
942
- class="flexible basis_zero noShrink labelContainer"
942
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
943
943
  data-id="boxComponent"
944
944
  data-selector-id="box"
945
945
  data-test-id="boxComponent"
@@ -963,7 +963,7 @@ exports[`Radio rendering the Checked is true for palette - primary 1`] = `
963
963
  <div
964
964
  aria-checked="false"
965
965
  aria-readonly="false"
966
- class="flex row alignItems_center justifyContent_center container active pointer hoverEfffect"
966
+ class="d-flex d-flex-row d-items-center d-justify-center container active pointer hoverEfffect"
967
967
  data-id="RadioComp"
968
968
  data-selector-id="container"
969
969
  data-test-id="RadioComp"
@@ -971,7 +971,7 @@ exports[`Radio rendering the Checked is true for palette - primary 1`] = `
971
971
  tabindex="0"
972
972
  >
973
973
  <div
974
- class="noShrink radio hoverprimary medium filled centerPathprimary"
974
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
975
975
  data-id="boxComponent"
976
976
  data-selector-id="box"
977
977
  data-test-id="boxComponent"
@@ -997,7 +997,7 @@ exports[`Radio rendering the Checked is true for palette - primary 1`] = `
997
997
  </label>
998
998
  </div>
999
999
  <div
1000
- class="flexible basis_zero noShrink labelContainer"
1000
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1001
1001
  data-id="boxComponent"
1002
1002
  data-selector-id="box"
1003
1003
  data-test-id="boxComponent"
@@ -1021,7 +1021,7 @@ exports[`Radio rendering the ID 1`] = `
1021
1021
  <div
1022
1022
  aria-checked="false"
1023
1023
  aria-readonly="false"
1024
- class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
1024
+ class="d-inline-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
1025
1025
  data-id="RadioComp"
1026
1026
  data-selector-id="container"
1027
1027
  data-test-id="RadioComp"
@@ -1029,7 +1029,7 @@ exports[`Radio rendering the ID 1`] = `
1029
1029
  tabindex="0"
1030
1030
  >
1031
1031
  <div
1032
- class="noShrink radio hoverprimary medium filled centerPathprimary"
1032
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
1033
1033
  data-id="boxComponent"
1034
1034
  data-selector-id="box"
1035
1035
  data-test-id="boxComponent"
@@ -1064,7 +1064,7 @@ exports[`Radio rendering the Name 1`] = `
1064
1064
  <div
1065
1065
  aria-checked="false"
1066
1066
  aria-readonly="false"
1067
- class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
1067
+ class="d-inline-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
1068
1068
  data-id="RadioComp"
1069
1069
  data-selector-id="container"
1070
1070
  data-test-id="RadioComp"
@@ -1072,7 +1072,7 @@ exports[`Radio rendering the Name 1`] = `
1072
1072
  tabindex="0"
1073
1073
  >
1074
1074
  <div
1075
- class="noShrink radio hoverprimary medium filled centerPathprimary"
1075
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
1076
1076
  data-id="boxComponent"
1077
1077
  data-selector-id="box"
1078
1078
  data-test-id="boxComponent"
@@ -1107,7 +1107,7 @@ exports[`Radio rendering the Value 1`] = `
1107
1107
  <div
1108
1108
  aria-checked="false"
1109
1109
  aria-readonly="false"
1110
- class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
1110
+ class="d-inline-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
1111
1111
  data-id="radiovalue"
1112
1112
  data-selector-id="container"
1113
1113
  data-test-id="radiovalue"
@@ -1115,7 +1115,7 @@ exports[`Radio rendering the Value 1`] = `
1115
1115
  tabindex="0"
1116
1116
  >
1117
1117
  <div
1118
- class="noShrink radio hoverprimary medium filled centerPathprimary"
1118
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
1119
1119
  data-id="boxComponent"
1120
1120
  data-selector-id="box"
1121
1121
  data-test-id="boxComponent"
@@ -1149,7 +1149,7 @@ exports[`Radio rendering the accessMode when disabled 1`] = `
1149
1149
  <div
1150
1150
  aria-checked="false"
1151
1151
  aria-readonly="true"
1152
- class="flex row alignItems_center justifyContent_center container disabled"
1152
+ class="d-flex d-flex-row d-items-center d-justify-center container disabled"
1153
1153
  data-id="RadioComp"
1154
1154
  data-selector-id="container"
1155
1155
  data-test-id="RadioComp"
@@ -1157,7 +1157,7 @@ exports[`Radio rendering the accessMode when disabled 1`] = `
1157
1157
  tabindex="-1"
1158
1158
  >
1159
1159
  <div
1160
- class="noShrink radio medium filled centerPathprimary disabled"
1160
+ class="d-flex-shrink-0 radio medium filled centerPathprimary disabled"
1161
1161
  data-id="boxComponent"
1162
1162
  data-selector-id="box"
1163
1163
  data-test-id="boxComponent"
@@ -1183,7 +1183,7 @@ exports[`Radio rendering the accessMode when disabled 1`] = `
1183
1183
  </label>
1184
1184
  </div>
1185
1185
  <div
1186
- class="flexible basis_zero noShrink labelContainer"
1186
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1187
1187
  data-id="boxComponent"
1188
1188
  data-selector-id="box"
1189
1189
  data-test-id="boxComponent"
@@ -1207,7 +1207,7 @@ exports[`Radio rendering the accessMode when isReadOnly 1`] = `
1207
1207
  <div
1208
1208
  aria-checked="false"
1209
1209
  aria-readonly="true"
1210
- class="flex row alignItems_center justifyContent_center container readonly"
1210
+ class="d-flex d-flex-row d-items-center d-justify-center container readonly"
1211
1211
  data-id="RadioComp"
1212
1212
  data-selector-id="container"
1213
1213
  data-test-id="RadioComp"
@@ -1215,7 +1215,7 @@ exports[`Radio rendering the accessMode when isReadOnly 1`] = `
1215
1215
  tabindex="-1"
1216
1216
  >
1217
1217
  <div
1218
- class="noShrink radio medium filled centerPathprimary disabled"
1218
+ class="d-flex-shrink-0 radio medium filled centerPathprimary disabled"
1219
1219
  data-id="boxComponent"
1220
1220
  data-selector-id="box"
1221
1221
  data-test-id="boxComponent"
@@ -1241,7 +1241,7 @@ exports[`Radio rendering the accessMode when isReadOnly 1`] = `
1241
1241
  </label>
1242
1242
  </div>
1243
1243
  <div
1244
- class="flexible basis_zero noShrink labelContainer"
1244
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1245
1245
  data-id="boxComponent"
1246
1246
  data-selector-id="box"
1247
1247
  data-test-id="boxComponent"
@@ -1265,7 +1265,7 @@ exports[`Radio rendering the active is true - danger 1`] = `
1265
1265
  <div
1266
1266
  aria-checked="true"
1267
1267
  aria-readonly="false"
1268
- class="flex row alignItems_center justifyContent_center container active pointer hoverEfffect checked"
1268
+ class="d-flex d-flex-row d-items-center d-justify-center container active pointer hoverEfffect checked"
1269
1269
  data-id="RadioComp"
1270
1270
  data-selector-id="container"
1271
1271
  data-test-id="RadioComp"
@@ -1273,7 +1273,7 @@ exports[`Radio rendering the active is true - danger 1`] = `
1273
1273
  tabindex="0"
1274
1274
  >
1275
1275
  <div
1276
- class="noShrink radio rdBoxdanger hoverdanger medium filled centerPathdanger"
1276
+ class="d-flex-shrink-0 radio rdBoxdanger hoverdanger medium filled centerPathdanger"
1277
1277
  data-id="boxComponent"
1278
1278
  data-selector-id="box"
1279
1279
  data-test-id="boxComponent"
@@ -1305,7 +1305,7 @@ exports[`Radio rendering the active is true - danger 1`] = `
1305
1305
  </label>
1306
1306
  </div>
1307
1307
  <div
1308
- class="flexible basis_zero noShrink labelContainer"
1308
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1309
1309
  data-id="boxComponent"
1310
1310
  data-selector-id="box"
1311
1311
  data-test-id="boxComponent"
@@ -1329,7 +1329,7 @@ exports[`Radio rendering the active is true - primary 1`] = `
1329
1329
  <div
1330
1330
  aria-checked="true"
1331
1331
  aria-readonly="false"
1332
- class="flex row alignItems_center justifyContent_center container active pointer hoverEfffect checked"
1332
+ class="d-flex d-flex-row d-items-center d-justify-center container active pointer hoverEfffect checked"
1333
1333
  data-id="RadioComp"
1334
1334
  data-selector-id="container"
1335
1335
  data-test-id="RadioComp"
@@ -1337,7 +1337,7 @@ exports[`Radio rendering the active is true - primary 1`] = `
1337
1337
  tabindex="0"
1338
1338
  >
1339
1339
  <div
1340
- class="noShrink radio rdBoxprimary hoverprimary medium filled centerPathprimary"
1340
+ class="d-flex-shrink-0 radio rdBoxprimary hoverprimary medium filled centerPathprimary"
1341
1341
  data-id="boxComponent"
1342
1342
  data-selector-id="box"
1343
1343
  data-test-id="boxComponent"
@@ -1369,7 +1369,7 @@ exports[`Radio rendering the active is true - primary 1`] = `
1369
1369
  </label>
1370
1370
  </div>
1371
1371
  <div
1372
- class="flexible basis_zero noShrink labelContainer"
1372
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1373
1373
  data-id="boxComponent"
1374
1374
  data-selector-id="box"
1375
1375
  data-test-id="boxComponent"
@@ -1393,7 +1393,7 @@ exports[`Radio rendering the customClass of customRadioWrap,customRadio,customLa
1393
1393
  <div
1394
1394
  aria-checked="false"
1395
1395
  aria-readonly="false"
1396
- class="flex row alignItems_center justifyContent_center container pointer hoverEfffect CustomClassCustomRadioWrap"
1396
+ class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect CustomClassCustomRadioWrap"
1397
1397
  data-id="RadioComp"
1398
1398
  data-selector-id="container"
1399
1399
  data-test-id="RadioComp"
@@ -1401,7 +1401,7 @@ exports[`Radio rendering the customClass of customRadioWrap,customRadio,customLa
1401
1401
  tabindex="0"
1402
1402
  >
1403
1403
  <div
1404
- class="noShrink radio hoverprimary medium filled centerPathprimary CustomClassCustomRadio"
1404
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary CustomClassCustomRadio"
1405
1405
  data-id="boxComponent"
1406
1406
  data-selector-id="box"
1407
1407
  data-test-id="boxComponent"
@@ -1427,7 +1427,7 @@ exports[`Radio rendering the customClass of customRadioWrap,customRadio,customLa
1427
1427
  </label>
1428
1428
  </div>
1429
1429
  <div
1430
- class="flexible basis_zero noShrink labelContainer"
1430
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1431
1431
  data-id="boxComponent"
1432
1432
  data-selector-id="box"
1433
1433
  data-test-id="boxComponent"
@@ -1451,7 +1451,7 @@ exports[`Radio rendering the defult props 1`] = `
1451
1451
  <div
1452
1452
  aria-checked="false"
1453
1453
  aria-readonly="false"
1454
- class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
1454
+ class="d-inline-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
1455
1455
  data-id="RadioComp"
1456
1456
  data-selector-id="container"
1457
1457
  data-test-id="RadioComp"
@@ -1459,7 +1459,7 @@ exports[`Radio rendering the defult props 1`] = `
1459
1459
  tabindex="0"
1460
1460
  >
1461
1461
  <div
1462
- class="noShrink radio hoverprimary medium filled centerPathprimary"
1462
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
1463
1463
  data-id="boxComponent"
1464
1464
  data-selector-id="box"
1465
1465
  data-test-id="boxComponent"
@@ -1493,7 +1493,7 @@ exports[`Radio rendering the disabled is true for palette - danger 1`] = `
1493
1493
  <div
1494
1494
  aria-checked="false"
1495
1495
  aria-readonly="true"
1496
- class="flex row alignItems_center justifyContent_center container disabled"
1496
+ class="d-flex d-flex-row d-items-center d-justify-center container disabled"
1497
1497
  data-id="RadioComp"
1498
1498
  data-selector-id="container"
1499
1499
  data-test-id="RadioComp"
@@ -1501,7 +1501,7 @@ exports[`Radio rendering the disabled is true for palette - danger 1`] = `
1501
1501
  tabindex="-1"
1502
1502
  >
1503
1503
  <div
1504
- class="noShrink radio medium filled centerPathdanger disabled"
1504
+ class="d-flex-shrink-0 radio medium filled centerPathdanger disabled"
1505
1505
  data-id="boxComponent"
1506
1506
  data-selector-id="box"
1507
1507
  data-test-id="boxComponent"
@@ -1527,7 +1527,7 @@ exports[`Radio rendering the disabled is true for palette - danger 1`] = `
1527
1527
  </label>
1528
1528
  </div>
1529
1529
  <div
1530
- class="flexible basis_zero noShrink labelContainer"
1530
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1531
1531
  data-id="boxComponent"
1532
1532
  data-selector-id="box"
1533
1533
  data-test-id="boxComponent"
@@ -1551,7 +1551,7 @@ exports[`Radio rendering the disabled is true for palette - primary 1`] = `
1551
1551
  <div
1552
1552
  aria-checked="false"
1553
1553
  aria-readonly="true"
1554
- class="flex row alignItems_center justifyContent_center container disabled"
1554
+ class="d-flex d-flex-row d-items-center d-justify-center container disabled"
1555
1555
  data-id="RadioComp"
1556
1556
  data-selector-id="container"
1557
1557
  data-test-id="RadioComp"
@@ -1559,7 +1559,7 @@ exports[`Radio rendering the disabled is true for palette - primary 1`] = `
1559
1559
  tabindex="-1"
1560
1560
  >
1561
1561
  <div
1562
- class="noShrink radio medium filled centerPathprimary disabled"
1562
+ class="d-flex-shrink-0 radio medium filled centerPathprimary disabled"
1563
1563
  data-id="boxComponent"
1564
1564
  data-selector-id="box"
1565
1565
  data-test-id="boxComponent"
@@ -1585,7 +1585,7 @@ exports[`Radio rendering the disabled is true for palette - primary 1`] = `
1585
1585
  </label>
1586
1586
  </div>
1587
1587
  <div
1588
- class="flexible basis_zero noShrink labelContainer"
1588
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1589
1589
  data-id="boxComponent"
1590
1590
  data-selector-id="box"
1591
1591
  data-test-id="boxComponent"
@@ -1609,7 +1609,7 @@ exports[`Radio rendering the disabledTitle 1`] = `
1609
1609
  <div
1610
1610
  aria-checked="false"
1611
1611
  aria-readonly="true"
1612
- class="flex row alignItems_center justifyContent_center container disabled"
1612
+ class="d-flex d-flex-row d-items-center d-justify-center container disabled"
1613
1613
  data-id="RadioComp"
1614
1614
  data-selector-id="container"
1615
1615
  data-test-id="RadioComp"
@@ -1618,7 +1618,7 @@ exports[`Radio rendering the disabledTitle 1`] = `
1618
1618
  tabindex="-1"
1619
1619
  >
1620
1620
  <div
1621
- class="noShrink radio medium filled centerPathprimary disabled"
1621
+ class="d-flex-shrink-0 radio medium filled centerPathprimary disabled"
1622
1622
  data-id="boxComponent"
1623
1623
  data-selector-id="box"
1624
1624
  data-test-id="boxComponent"
@@ -1644,7 +1644,7 @@ exports[`Radio rendering the disabledTitle 1`] = `
1644
1644
  </label>
1645
1645
  </div>
1646
1646
  <div
1647
- class="flexible basis_zero noShrink labelContainer"
1647
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1648
1648
  data-id="boxComponent"
1649
1649
  data-selector-id="box"
1650
1650
  data-test-id="boxComponent"
@@ -1668,7 +1668,7 @@ exports[`Radio rendering the isFilled is false 1`] = `
1668
1668
  <div
1669
1669
  aria-checked="false"
1670
1670
  aria-readonly="false"
1671
- class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
1671
+ class="d-inline-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
1672
1672
  data-id="RadioComp"
1673
1673
  data-selector-id="container"
1674
1674
  data-test-id="RadioComp"
@@ -1676,7 +1676,7 @@ exports[`Radio rendering the isFilled is false 1`] = `
1676
1676
  tabindex="0"
1677
1677
  >
1678
1678
  <div
1679
- class="noShrink radio hoverprimary medium centerPathprimary"
1679
+ class="d-flex-shrink-0 radio hoverprimary medium centerPathprimary"
1680
1680
  data-id="boxComponent"
1681
1681
  data-selector-id="box"
1682
1682
  data-test-id="boxComponent"
@@ -1710,7 +1710,7 @@ exports[`Radio rendering the isReadOnly is true 1`] = `
1710
1710
  <div
1711
1711
  aria-checked="false"
1712
1712
  aria-readonly="true"
1713
- class="inlineFlex row alignItems_center justifyContent_center container readonly"
1713
+ class="d-inline-flex d-flex-row d-items-center d-justify-center container readonly"
1714
1714
  data-id="RadioComp"
1715
1715
  data-selector-id="container"
1716
1716
  data-test-id="RadioComp"
@@ -1718,7 +1718,7 @@ exports[`Radio rendering the isReadOnly is true 1`] = `
1718
1718
  tabindex="-1"
1719
1719
  >
1720
1720
  <div
1721
- class="noShrink radio medium filled centerPathprimary disabled"
1721
+ class="d-flex-shrink-0 radio medium filled centerPathprimary disabled"
1722
1722
  data-id="boxComponent"
1723
1723
  data-selector-id="box"
1724
1724
  data-test-id="boxComponent"
@@ -1752,7 +1752,7 @@ exports[`Radio rendering the text 1`] = `
1752
1752
  <div
1753
1753
  aria-checked="false"
1754
1754
  aria-readonly="false"
1755
- class="flex row alignItems_center justifyContent_center container pointer hoverEfffect"
1755
+ class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
1756
1756
  data-id="RadioComp"
1757
1757
  data-selector-id="container"
1758
1758
  data-test-id="RadioComp"
@@ -1760,7 +1760,7 @@ exports[`Radio rendering the text 1`] = `
1760
1760
  tabindex="0"
1761
1761
  >
1762
1762
  <div
1763
- class="noShrink radio hoverprimary medium filled centerPathprimary"
1763
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
1764
1764
  data-id="boxComponent"
1765
1765
  data-selector-id="box"
1766
1766
  data-test-id="boxComponent"
@@ -1786,7 +1786,7 @@ exports[`Radio rendering the text 1`] = `
1786
1786
  </label>
1787
1787
  </div>
1788
1788
  <div
1789
- class="flexible basis_zero noShrink labelContainer"
1789
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1790
1790
  data-id="boxComponent"
1791
1791
  data-selector-id="box"
1792
1792
  data-test-id="boxComponent"
@@ -1810,7 +1810,7 @@ exports[`Radio rendering the title 1`] = `
1810
1810
  <div
1811
1811
  aria-checked="false"
1812
1812
  aria-readonly="false"
1813
- class="flex row alignItems_center justifyContent_center container pointer hoverEfffect"
1813
+ class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
1814
1814
  data-id="RadioComp"
1815
1815
  data-selector-id="container"
1816
1816
  data-test-id="RadioComp"
@@ -1819,7 +1819,7 @@ exports[`Radio rendering the title 1`] = `
1819
1819
  tabindex="0"
1820
1820
  >
1821
1821
  <div
1822
- class="noShrink radio hoverprimary medium filled centerPathprimary"
1822
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
1823
1823
  data-id="boxComponent"
1824
1824
  data-selector-id="box"
1825
1825
  data-test-id="boxComponent"
@@ -1845,7 +1845,7 @@ exports[`Radio rendering the title 1`] = `
1845
1845
  </label>
1846
1846
  </div>
1847
1847
  <div
1848
- class="flexible basis_zero noShrink labelContainer"
1848
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
1849
1849
  data-id="boxComponent"
1850
1850
  data-selector-id="box"
1851
1851
  data-test-id="boxComponent"
@@ -1870,7 +1870,7 @@ exports[`Radio renders with different onClick props 1`] = `
1870
1870
  <div
1871
1871
  aria-checked="false"
1872
1872
  aria-readonly="false"
1873
- class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
1873
+ class="d-inline-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
1874
1874
  data-id="radiovalue"
1875
1875
  data-selector-id="container"
1876
1876
  data-test-id="radiovalue"
@@ -1878,7 +1878,7 @@ exports[`Radio renders with different onClick props 1`] = `
1878
1878
  tabindex="0"
1879
1879
  >
1880
1880
  <div
1881
- class="noShrink radio hoverprimary medium filled centerPathprimary"
1881
+ class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
1882
1882
  data-id="boxComponent"
1883
1883
  data-selector-id="box"
1884
1884
  data-test-id="boxComponent"