@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/lib/Tag/__tests__/__snapshots__/Tag.spec.js.snap CHANGED
@@ -25,14 +25,14 @@ exports[`Tag component Should be render closeTitle 1`] = `
25
25
  value="text"
26
26
  >
27
27
  <div
28
- class="flex fullSize column alignItems_center justifyContent_center"
28
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
29
29
  data-id="containerComponent"
30
30
  data-selector-id="container"
31
31
  data-test-id="containerComponent"
32
32
  >
33
33
  <i
34
34
  aria-hidden="true"
35
- class="zd_font_icons basic icon-close2 fbold"
35
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
36
36
  data-id="fontIcon"
37
37
  data-selector-id="fontIcon"
38
38
  data-test-id="fontIcon"
@@ -68,14 +68,14 @@ exports[`Tag component Should be render dataId when active if false 1`] = `
68
68
  value="text"
69
69
  >
70
70
  <div
71
- class="flex fullSize column alignItems_center justifyContent_center"
71
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
72
72
  data-id="containerComponent"
73
73
  data-selector-id="container"
74
74
  data-test-id="containerComponent"
75
75
  >
76
76
  <i
77
77
  aria-hidden="true"
78
- class="zd_font_icons basic icon-close2 fbold"
78
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
79
79
  data-id="fontIcon"
80
80
  data-selector-id="fontIcon"
81
81
  data-test-id="fontIcon"
@@ -111,14 +111,14 @@ exports[`Tag component Should be render dataId when active if true 1`] = `
111
111
  value="text"
112
112
  >
113
113
  <div
114
- class="flex fullSize column alignItems_center justifyContent_center"
114
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
115
115
  data-id="containerComponent"
116
116
  data-selector-id="container"
117
117
  data-test-id="containerComponent"
118
118
  >
119
119
  <i
120
120
  aria-hidden="true"
121
- class="zd_font_icons basic icon-close2 fbold"
121
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
122
122
  data-id="fontIcon"
123
123
  data-selector-id="fontIcon"
124
124
  data-test-id="fontIcon"
@@ -184,7 +184,7 @@ exports[`Tag component Should be render iconName and iconSize 1`] = `
184
184
  >
185
185
  <i
186
186
  aria-hidden="true"
187
- class="zd_font_icons basic icon-androidd"
187
+ class="zd_font_icons ff icon-androidd basic d-inline-block d-align-middle"
188
188
  data-id="fontIcon"
189
189
  data-selector-id="fontIcon"
190
190
  data-test-id="fontIcon"
@@ -360,14 +360,14 @@ exports[`Tag component Should be render rounded is false 1`] = `
360
360
  value="text"
361
361
  >
362
362
  <div
363
- class="flex fullSize column alignItems_center justifyContent_center"
363
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
364
364
  data-id="containerComponent"
365
365
  data-selector-id="container"
366
366
  data-test-id="containerComponent"
367
367
  >
368
368
  <i
369
369
  aria-hidden="true"
370
- class="zd_font_icons basic icon-close2 fbold"
370
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
371
371
  data-id="fontIcon"
372
372
  data-selector-id="fontIcon"
373
373
  data-test-id="fontIcon"
@@ -464,14 +464,14 @@ exports[`Tag component Should render active - palette danger, size medium , clos
464
464
  value="text"
465
465
  >
466
466
  <div
467
- class="flex fullSize column alignItems_center justifyContent_center"
467
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
468
468
  data-id="containerComponent"
469
469
  data-selector-id="container"
470
470
  data-test-id="containerComponent"
471
471
  >
472
472
  <i
473
473
  aria-hidden="true"
474
- class="zd_font_icons basic icon-close2 fbold"
474
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
475
475
  data-id="fontIcon"
476
476
  data-selector-id="fontIcon"
477
477
  data-test-id="fontIcon"
@@ -507,14 +507,14 @@ exports[`Tag component Should render active - palette danger, size medium , clos
507
507
  value="text"
508
508
  >
509
509
  <div
510
- class="flex fullSize column alignItems_center justifyContent_center"
510
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
511
511
  data-id="containerComponent"
512
512
  data-selector-id="container"
513
513
  data-test-id="containerComponent"
514
514
  >
515
515
  <i
516
516
  aria-hidden="true"
517
- class="zd_font_icons basic icon-close2 fbold"
517
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
518
518
  data-id="fontIcon"
519
519
  data-selector-id="fontIcon"
520
520
  data-test-id="fontIcon"
@@ -550,14 +550,14 @@ exports[`Tag component Should render active - palette danger, size small , close
550
550
  value="text"
551
551
  >
552
552
  <div
553
- class="flex fullSize column alignItems_center justifyContent_center"
553
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
554
554
  data-id="containerComponent"
555
555
  data-selector-id="container"
556
556
  data-test-id="containerComponent"
557
557
  >
558
558
  <i
559
559
  aria-hidden="true"
560
- class="zd_font_icons basic icon-close2 fbold"
560
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
561
561
  data-id="fontIcon"
562
562
  data-selector-id="fontIcon"
563
563
  data-test-id="fontIcon"
@@ -593,14 +593,14 @@ exports[`Tag component Should render active - palette danger, size small , close
593
593
  value="text"
594
594
  >
595
595
  <div
596
- class="flex fullSize column alignItems_center justifyContent_center"
596
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
597
597
  data-id="containerComponent"
598
598
  data-selector-id="container"
599
599
  data-test-id="containerComponent"
600
600
  >
601
601
  <i
602
602
  aria-hidden="true"
603
- class="zd_font_icons basic icon-close2 fbold"
603
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
604
604
  data-id="fontIcon"
605
605
  data-selector-id="fontIcon"
606
606
  data-test-id="fontIcon"
@@ -636,14 +636,14 @@ exports[`Tag component Should render active - palette dark, size medium , closeP
636
636
  value="text"
637
637
  >
638
638
  <div
639
- class="flex fullSize column alignItems_center justifyContent_center"
639
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
640
640
  data-id="containerComponent"
641
641
  data-selector-id="container"
642
642
  data-test-id="containerComponent"
643
643
  >
644
644
  <i
645
645
  aria-hidden="true"
646
- class="zd_font_icons basic icon-close2 fbold"
646
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
647
647
  data-id="fontIcon"
648
648
  data-selector-id="fontIcon"
649
649
  data-test-id="fontIcon"
@@ -679,14 +679,14 @@ exports[`Tag component Should render active - palette dark, size medium , closeP
679
679
  value="text"
680
680
  >
681
681
  <div
682
- class="flex fullSize column alignItems_center justifyContent_center"
682
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
683
683
  data-id="containerComponent"
684
684
  data-selector-id="container"
685
685
  data-test-id="containerComponent"
686
686
  >
687
687
  <i
688
688
  aria-hidden="true"
689
- class="zd_font_icons basic icon-close2 fbold"
689
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
690
690
  data-id="fontIcon"
691
691
  data-selector-id="fontIcon"
692
692
  data-test-id="fontIcon"
@@ -722,14 +722,14 @@ exports[`Tag component Should render active - palette dark, size small , closePa
722
722
  value="text"
723
723
  >
724
724
  <div
725
- class="flex fullSize column alignItems_center justifyContent_center"
725
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
726
726
  data-id="containerComponent"
727
727
  data-selector-id="container"
728
728
  data-test-id="containerComponent"
729
729
  >
730
730
  <i
731
731
  aria-hidden="true"
732
- class="zd_font_icons basic icon-close2 fbold"
732
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
733
733
  data-id="fontIcon"
734
734
  data-selector-id="fontIcon"
735
735
  data-test-id="fontIcon"
@@ -765,14 +765,14 @@ exports[`Tag component Should render active - palette dark, size small , closePa
765
765
  value="text"
766
766
  >
767
767
  <div
768
- class="flex fullSize column alignItems_center justifyContent_center"
768
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
769
769
  data-id="containerComponent"
770
770
  data-selector-id="container"
771
771
  data-test-id="containerComponent"
772
772
  >
773
773
  <i
774
774
  aria-hidden="true"
775
- class="zd_font_icons basic icon-close2 fbold"
775
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
776
776
  data-id="fontIcon"
777
777
  data-selector-id="fontIcon"
778
778
  data-test-id="fontIcon"
@@ -808,14 +808,14 @@ exports[`Tag component Should render active - palette darkPrimaryDotted, size me
808
808
  value="text"
809
809
  >
810
810
  <div
811
- class="flex fullSize column alignItems_center justifyContent_center"
811
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
812
812
  data-id="containerComponent"
813
813
  data-selector-id="container"
814
814
  data-test-id="containerComponent"
815
815
  >
816
816
  <i
817
817
  aria-hidden="true"
818
- class="zd_font_icons basic icon-close2 fbold"
818
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
819
819
  data-id="fontIcon"
820
820
  data-selector-id="fontIcon"
821
821
  data-test-id="fontIcon"
@@ -851,14 +851,14 @@ exports[`Tag component Should render active - palette darkPrimaryDotted, size me
851
851
  value="text"
852
852
  >
853
853
  <div
854
- class="flex fullSize column alignItems_center justifyContent_center"
854
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
855
855
  data-id="containerComponent"
856
856
  data-selector-id="container"
857
857
  data-test-id="containerComponent"
858
858
  >
859
859
  <i
860
860
  aria-hidden="true"
861
- class="zd_font_icons basic icon-close2 fbold"
861
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
862
862
  data-id="fontIcon"
863
863
  data-selector-id="fontIcon"
864
864
  data-test-id="fontIcon"
@@ -894,14 +894,14 @@ exports[`Tag component Should render active - palette darkPrimaryDotted, size sm
894
894
  value="text"
895
895
  >
896
896
  <div
897
- class="flex fullSize column alignItems_center justifyContent_center"
897
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
898
898
  data-id="containerComponent"
899
899
  data-selector-id="container"
900
900
  data-test-id="containerComponent"
901
901
  >
902
902
  <i
903
903
  aria-hidden="true"
904
- class="zd_font_icons basic icon-close2 fbold"
904
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
905
905
  data-id="fontIcon"
906
906
  data-selector-id="fontIcon"
907
907
  data-test-id="fontIcon"
@@ -937,14 +937,14 @@ exports[`Tag component Should render active - palette darkPrimaryDotted, size sm
937
937
  value="text"
938
938
  >
939
939
  <div
940
- class="flex fullSize column alignItems_center justifyContent_center"
940
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
941
941
  data-id="containerComponent"
942
942
  data-selector-id="container"
943
943
  data-test-id="containerComponent"
944
944
  >
945
945
  <i
946
946
  aria-hidden="true"
947
- class="zd_font_icons basic icon-close2 fbold"
947
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
948
948
  data-id="fontIcon"
949
949
  data-selector-id="fontIcon"
950
950
  data-test-id="fontIcon"
@@ -980,14 +980,14 @@ exports[`Tag component Should render active - palette default, size medium , clo
980
980
  value="text"
981
981
  >
982
982
  <div
983
- class="flex fullSize column alignItems_center justifyContent_center"
983
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
984
984
  data-id="containerComponent"
985
985
  data-selector-id="container"
986
986
  data-test-id="containerComponent"
987
987
  >
988
988
  <i
989
989
  aria-hidden="true"
990
- class="zd_font_icons basic icon-close2 fbold"
990
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
991
991
  data-id="fontIcon"
992
992
  data-selector-id="fontIcon"
993
993
  data-test-id="fontIcon"
@@ -1023,14 +1023,14 @@ exports[`Tag component Should render active - palette default, size medium , clo
1023
1023
  value="text"
1024
1024
  >
1025
1025
  <div
1026
- class="flex fullSize column alignItems_center justifyContent_center"
1026
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1027
1027
  data-id="containerComponent"
1028
1028
  data-selector-id="container"
1029
1029
  data-test-id="containerComponent"
1030
1030
  >
1031
1031
  <i
1032
1032
  aria-hidden="true"
1033
- class="zd_font_icons basic icon-close2 fbold"
1033
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1034
1034
  data-id="fontIcon"
1035
1035
  data-selector-id="fontIcon"
1036
1036
  data-test-id="fontIcon"
@@ -1066,14 +1066,14 @@ exports[`Tag component Should render active - palette default, size small , clos
1066
1066
  value="text"
1067
1067
  >
1068
1068
  <div
1069
- class="flex fullSize column alignItems_center justifyContent_center"
1069
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1070
1070
  data-id="containerComponent"
1071
1071
  data-selector-id="container"
1072
1072
  data-test-id="containerComponent"
1073
1073
  >
1074
1074
  <i
1075
1075
  aria-hidden="true"
1076
- class="zd_font_icons basic icon-close2 fbold"
1076
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1077
1077
  data-id="fontIcon"
1078
1078
  data-selector-id="fontIcon"
1079
1079
  data-test-id="fontIcon"
@@ -1109,14 +1109,14 @@ exports[`Tag component Should render active - palette default, size small , clos
1109
1109
  value="text"
1110
1110
  >
1111
1111
  <div
1112
- class="flex fullSize column alignItems_center justifyContent_center"
1112
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1113
1113
  data-id="containerComponent"
1114
1114
  data-selector-id="container"
1115
1115
  data-test-id="containerComponent"
1116
1116
  >
1117
1117
  <i
1118
1118
  aria-hidden="true"
1119
- class="zd_font_icons basic icon-close2 fbold"
1119
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1120
1120
  data-id="fontIcon"
1121
1121
  data-selector-id="fontIcon"
1122
1122
  data-test-id="fontIcon"
@@ -1152,14 +1152,14 @@ exports[`Tag component Should render active - palette defaultLink, size medium ,
1152
1152
  value="text"
1153
1153
  >
1154
1154
  <div
1155
- class="flex fullSize column alignItems_center justifyContent_center"
1155
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1156
1156
  data-id="containerComponent"
1157
1157
  data-selector-id="container"
1158
1158
  data-test-id="containerComponent"
1159
1159
  >
1160
1160
  <i
1161
1161
  aria-hidden="true"
1162
- class="zd_font_icons basic icon-close2 fbold"
1162
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1163
1163
  data-id="fontIcon"
1164
1164
  data-selector-id="fontIcon"
1165
1165
  data-test-id="fontIcon"
@@ -1195,14 +1195,14 @@ exports[`Tag component Should render active - palette defaultLink, size medium ,
1195
1195
  value="text"
1196
1196
  >
1197
1197
  <div
1198
- class="flex fullSize column alignItems_center justifyContent_center"
1198
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1199
1199
  data-id="containerComponent"
1200
1200
  data-selector-id="container"
1201
1201
  data-test-id="containerComponent"
1202
1202
  >
1203
1203
  <i
1204
1204
  aria-hidden="true"
1205
- class="zd_font_icons basic icon-close2 fbold"
1205
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1206
1206
  data-id="fontIcon"
1207
1207
  data-selector-id="fontIcon"
1208
1208
  data-test-id="fontIcon"
@@ -1238,14 +1238,14 @@ exports[`Tag component Should render active - palette defaultLink, size small ,
1238
1238
  value="text"
1239
1239
  >
1240
1240
  <div
1241
- class="flex fullSize column alignItems_center justifyContent_center"
1241
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1242
1242
  data-id="containerComponent"
1243
1243
  data-selector-id="container"
1244
1244
  data-test-id="containerComponent"
1245
1245
  >
1246
1246
  <i
1247
1247
  aria-hidden="true"
1248
- class="zd_font_icons basic icon-close2 fbold"
1248
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1249
1249
  data-id="fontIcon"
1250
1250
  data-selector-id="fontIcon"
1251
1251
  data-test-id="fontIcon"
@@ -1281,14 +1281,14 @@ exports[`Tag component Should render active - palette defaultLink, size small ,
1281
1281
  value="text"
1282
1282
  >
1283
1283
  <div
1284
- class="flex fullSize column alignItems_center justifyContent_center"
1284
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1285
1285
  data-id="containerComponent"
1286
1286
  data-selector-id="container"
1287
1287
  data-test-id="containerComponent"
1288
1288
  >
1289
1289
  <i
1290
1290
  aria-hidden="true"
1291
- class="zd_font_icons basic icon-close2 fbold"
1291
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1292
1292
  data-id="fontIcon"
1293
1293
  data-selector-id="fontIcon"
1294
1294
  data-test-id="fontIcon"
@@ -1324,14 +1324,14 @@ exports[`Tag component Should render active - palette primaryDotted, size medium
1324
1324
  value="text"
1325
1325
  >
1326
1326
  <div
1327
- class="flex fullSize column alignItems_center justifyContent_center"
1327
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1328
1328
  data-id="containerComponent"
1329
1329
  data-selector-id="container"
1330
1330
  data-test-id="containerComponent"
1331
1331
  >
1332
1332
  <i
1333
1333
  aria-hidden="true"
1334
- class="zd_font_icons basic icon-close2 fbold"
1334
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1335
1335
  data-id="fontIcon"
1336
1336
  data-selector-id="fontIcon"
1337
1337
  data-test-id="fontIcon"
@@ -1367,14 +1367,14 @@ exports[`Tag component Should render active - palette primaryDotted, size medium
1367
1367
  value="text"
1368
1368
  >
1369
1369
  <div
1370
- class="flex fullSize column alignItems_center justifyContent_center"
1370
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1371
1371
  data-id="containerComponent"
1372
1372
  data-selector-id="container"
1373
1373
  data-test-id="containerComponent"
1374
1374
  >
1375
1375
  <i
1376
1376
  aria-hidden="true"
1377
- class="zd_font_icons basic icon-close2 fbold"
1377
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1378
1378
  data-id="fontIcon"
1379
1379
  data-selector-id="fontIcon"
1380
1380
  data-test-id="fontIcon"
@@ -1410,14 +1410,14 @@ exports[`Tag component Should render active - palette primaryDotted, size small
1410
1410
  value="text"
1411
1411
  >
1412
1412
  <div
1413
- class="flex fullSize column alignItems_center justifyContent_center"
1413
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1414
1414
  data-id="containerComponent"
1415
1415
  data-selector-id="container"
1416
1416
  data-test-id="containerComponent"
1417
1417
  >
1418
1418
  <i
1419
1419
  aria-hidden="true"
1420
- class="zd_font_icons basic icon-close2 fbold"
1420
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1421
1421
  data-id="fontIcon"
1422
1422
  data-selector-id="fontIcon"
1423
1423
  data-test-id="fontIcon"
@@ -1453,14 +1453,14 @@ exports[`Tag component Should render active - palette primaryDotted, size small
1453
1453
  value="text"
1454
1454
  >
1455
1455
  <div
1456
- class="flex fullSize column alignItems_center justifyContent_center"
1456
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1457
1457
  data-id="containerComponent"
1458
1458
  data-selector-id="container"
1459
1459
  data-test-id="containerComponent"
1460
1460
  >
1461
1461
  <i
1462
1462
  aria-hidden="true"
1463
- class="zd_font_icons basic icon-close2 fbold"
1463
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1464
1464
  data-id="fontIcon"
1465
1465
  data-selector-id="fontIcon"
1466
1466
  data-test-id="fontIcon"
@@ -1496,14 +1496,14 @@ exports[`Tag component Should render active - palette pureDarkDotted, size mediu
1496
1496
  value="text"
1497
1497
  >
1498
1498
  <div
1499
- class="flex fullSize column alignItems_center justifyContent_center"
1499
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1500
1500
  data-id="containerComponent"
1501
1501
  data-selector-id="container"
1502
1502
  data-test-id="containerComponent"
1503
1503
  >
1504
1504
  <i
1505
1505
  aria-hidden="true"
1506
- class="zd_font_icons basic icon-close2 fbold"
1506
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1507
1507
  data-id="fontIcon"
1508
1508
  data-selector-id="fontIcon"
1509
1509
  data-test-id="fontIcon"
@@ -1539,14 +1539,14 @@ exports[`Tag component Should render active - palette pureDarkDotted, size mediu
1539
1539
  value="text"
1540
1540
  >
1541
1541
  <div
1542
- class="flex fullSize column alignItems_center justifyContent_center"
1542
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1543
1543
  data-id="containerComponent"
1544
1544
  data-selector-id="container"
1545
1545
  data-test-id="containerComponent"
1546
1546
  >
1547
1547
  <i
1548
1548
  aria-hidden="true"
1549
- class="zd_font_icons basic icon-close2 fbold"
1549
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1550
1550
  data-id="fontIcon"
1551
1551
  data-selector-id="fontIcon"
1552
1552
  data-test-id="fontIcon"
@@ -1582,14 +1582,14 @@ exports[`Tag component Should render active - palette pureDarkDotted, size small
1582
1582
  value="text"
1583
1583
  >
1584
1584
  <div
1585
- class="flex fullSize column alignItems_center justifyContent_center"
1585
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1586
1586
  data-id="containerComponent"
1587
1587
  data-selector-id="container"
1588
1588
  data-test-id="containerComponent"
1589
1589
  >
1590
1590
  <i
1591
1591
  aria-hidden="true"
1592
- class="zd_font_icons basic icon-close2 fbold"
1592
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1593
1593
  data-id="fontIcon"
1594
1594
  data-selector-id="fontIcon"
1595
1595
  data-test-id="fontIcon"
@@ -1625,14 +1625,14 @@ exports[`Tag component Should render active - palette pureDarkDotted, size small
1625
1625
  value="text"
1626
1626
  >
1627
1627
  <div
1628
- class="flex fullSize column alignItems_center justifyContent_center"
1628
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1629
1629
  data-id="containerComponent"
1630
1630
  data-selector-id="container"
1631
1631
  data-test-id="containerComponent"
1632
1632
  >
1633
1633
  <i
1634
1634
  aria-hidden="true"
1635
- class="zd_font_icons basic icon-close2 fbold"
1635
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1636
1636
  data-id="fontIcon"
1637
1637
  data-selector-id="fontIcon"
1638
1638
  data-test-id="fontIcon"
@@ -1668,14 +1668,14 @@ exports[`Tag component Should render active - palette pureDotted, size medium ,
1668
1668
  value="text"
1669
1669
  >
1670
1670
  <div
1671
- class="flex fullSize column alignItems_center justifyContent_center"
1671
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1672
1672
  data-id="containerComponent"
1673
1673
  data-selector-id="container"
1674
1674
  data-test-id="containerComponent"
1675
1675
  >
1676
1676
  <i
1677
1677
  aria-hidden="true"
1678
- class="zd_font_icons basic icon-close2 fbold"
1678
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1679
1679
  data-id="fontIcon"
1680
1680
  data-selector-id="fontIcon"
1681
1681
  data-test-id="fontIcon"
@@ -1711,14 +1711,14 @@ exports[`Tag component Should render active - palette pureDotted, size medium ,
1711
1711
  value="text"
1712
1712
  >
1713
1713
  <div
1714
- class="flex fullSize column alignItems_center justifyContent_center"
1714
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1715
1715
  data-id="containerComponent"
1716
1716
  data-selector-id="container"
1717
1717
  data-test-id="containerComponent"
1718
1718
  >
1719
1719
  <i
1720
1720
  aria-hidden="true"
1721
- class="zd_font_icons basic icon-close2 fbold"
1721
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1722
1722
  data-id="fontIcon"
1723
1723
  data-selector-id="fontIcon"
1724
1724
  data-test-id="fontIcon"
@@ -1754,14 +1754,14 @@ exports[`Tag component Should render active - palette pureDotted, size small , c
1754
1754
  value="text"
1755
1755
  >
1756
1756
  <div
1757
- class="flex fullSize column alignItems_center justifyContent_center"
1757
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1758
1758
  data-id="containerComponent"
1759
1759
  data-selector-id="container"
1760
1760
  data-test-id="containerComponent"
1761
1761
  >
1762
1762
  <i
1763
1763
  aria-hidden="true"
1764
- class="zd_font_icons basic icon-close2 fbold"
1764
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1765
1765
  data-id="fontIcon"
1766
1766
  data-selector-id="fontIcon"
1767
1767
  data-test-id="fontIcon"
@@ -1797,14 +1797,14 @@ exports[`Tag component Should render active - palette pureDotted, size small , c
1797
1797
  value="text"
1798
1798
  >
1799
1799
  <div
1800
- class="flex fullSize column alignItems_center justifyContent_center"
1800
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1801
1801
  data-id="containerComponent"
1802
1802
  data-selector-id="container"
1803
1803
  data-test-id="containerComponent"
1804
1804
  >
1805
1805
  <i
1806
1806
  aria-hidden="true"
1807
- class="zd_font_icons basic icon-close2 fbold"
1807
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1808
1808
  data-id="fontIcon"
1809
1809
  data-selector-id="fontIcon"
1810
1810
  data-test-id="fontIcon"
@@ -1840,14 +1840,14 @@ exports[`Tag component Should render active - palette secondary, size medium , c
1840
1840
  value="text"
1841
1841
  >
1842
1842
  <div
1843
- class="flex fullSize column alignItems_center justifyContent_center"
1843
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1844
1844
  data-id="containerComponent"
1845
1845
  data-selector-id="container"
1846
1846
  data-test-id="containerComponent"
1847
1847
  >
1848
1848
  <i
1849
1849
  aria-hidden="true"
1850
- class="zd_font_icons basic icon-close2 fbold"
1850
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1851
1851
  data-id="fontIcon"
1852
1852
  data-selector-id="fontIcon"
1853
1853
  data-test-id="fontIcon"
@@ -1883,14 +1883,14 @@ exports[`Tag component Should render active - palette secondary, size medium , c
1883
1883
  value="text"
1884
1884
  >
1885
1885
  <div
1886
- class="flex fullSize column alignItems_center justifyContent_center"
1886
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1887
1887
  data-id="containerComponent"
1888
1888
  data-selector-id="container"
1889
1889
  data-test-id="containerComponent"
1890
1890
  >
1891
1891
  <i
1892
1892
  aria-hidden="true"
1893
- class="zd_font_icons basic icon-close2 fbold"
1893
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1894
1894
  data-id="fontIcon"
1895
1895
  data-selector-id="fontIcon"
1896
1896
  data-test-id="fontIcon"
@@ -1926,14 +1926,14 @@ exports[`Tag component Should render active - palette secondary, size small , cl
1926
1926
  value="text"
1927
1927
  >
1928
1928
  <div
1929
- class="flex fullSize column alignItems_center justifyContent_center"
1929
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1930
1930
  data-id="containerComponent"
1931
1931
  data-selector-id="container"
1932
1932
  data-test-id="containerComponent"
1933
1933
  >
1934
1934
  <i
1935
1935
  aria-hidden="true"
1936
- class="zd_font_icons basic icon-close2 fbold"
1936
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1937
1937
  data-id="fontIcon"
1938
1938
  data-selector-id="fontIcon"
1939
1939
  data-test-id="fontIcon"
@@ -1969,14 +1969,14 @@ exports[`Tag component Should render active - palette secondary, size small , cl
1969
1969
  value="text"
1970
1970
  >
1971
1971
  <div
1972
- class="flex fullSize column alignItems_center justifyContent_center"
1972
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
1973
1973
  data-id="containerComponent"
1974
1974
  data-selector-id="container"
1975
1975
  data-test-id="containerComponent"
1976
1976
  >
1977
1977
  <i
1978
1978
  aria-hidden="true"
1979
- class="zd_font_icons basic icon-close2 fbold"
1979
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
1980
1980
  data-id="fontIcon"
1981
1981
  data-selector-id="fontIcon"
1982
1982
  data-test-id="fontIcon"
@@ -2336,14 +2336,14 @@ exports[`Tag component Should render closePalette - danger 1`] = `
2336
2336
  value="text"
2337
2337
  >
2338
2338
  <div
2339
- class="flex fullSize column alignItems_center justifyContent_center"
2339
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
2340
2340
  data-id="containerComponent"
2341
2341
  data-selector-id="container"
2342
2342
  data-test-id="containerComponent"
2343
2343
  >
2344
2344
  <i
2345
2345
  aria-hidden="true"
2346
- class="zd_font_icons basic icon-close2 fbold"
2346
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
2347
2347
  data-id="fontIcon"
2348
2348
  data-selector-id="fontIcon"
2349
2349
  data-test-id="fontIcon"
@@ -2379,14 +2379,14 @@ exports[`Tag component Should render closePalette - primary 1`] = `
2379
2379
  value="text"
2380
2380
  >
2381
2381
  <div
2382
- class="flex fullSize column alignItems_center justifyContent_center"
2382
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
2383
2383
  data-id="containerComponent"
2384
2384
  data-selector-id="container"
2385
2385
  data-test-id="containerComponent"
2386
2386
  >
2387
2387
  <i
2388
2388
  aria-hidden="true"
2389
- class="zd_font_icons basic icon-close2 fbold"
2389
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
2390
2390
  data-id="fontIcon"
2391
2391
  data-selector-id="fontIcon"
2392
2392
  data-test-id="fontIcon"
@@ -2422,14 +2422,14 @@ exports[`Tag component Should render onRemove - medium 1`] = `
2422
2422
  value="text"
2423
2423
  >
2424
2424
  <div
2425
- class="flex fullSize column alignItems_center justifyContent_center"
2425
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
2426
2426
  data-id="containerComponent"
2427
2427
  data-selector-id="container"
2428
2428
  data-test-id="containerComponent"
2429
2429
  >
2430
2430
  <i
2431
2431
  aria-hidden="true"
2432
- class="zd_font_icons basic icon-close2 fbold"
2432
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
2433
2433
  data-id="fontIcon"
2434
2434
  data-selector-id="fontIcon"
2435
2435
  data-test-id="fontIcon"
@@ -2465,14 +2465,14 @@ exports[`Tag component Should render onRemove - small 1`] = `
2465
2465
  value="text"
2466
2466
  >
2467
2467
  <div
2468
- class="flex fullSize column alignItems_center justifyContent_center"
2468
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
2469
2469
  data-id="containerComponent"
2470
2470
  data-selector-id="container"
2471
2471
  data-test-id="containerComponent"
2472
2472
  >
2473
2473
  <i
2474
2474
  aria-hidden="true"
2475
- class="zd_font_icons basic icon-close2 fbold"
2475
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
2476
2476
  data-id="fontIcon"
2477
2477
  data-selector-id="fontIcon"
2478
2478
  data-test-id="fontIcon"
@@ -2870,14 +2870,14 @@ exports[`Tag component rendering ally clearLabel 1`] = `
2870
2870
  value="text"
2871
2871
  >
2872
2872
  <div
2873
- class="flex fullSize column alignItems_center justifyContent_center"
2873
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
2874
2874
  data-id="containerComponent"
2875
2875
  data-selector-id="container"
2876
2876
  data-test-id="containerComponent"
2877
2877
  >
2878
2878
  <i
2879
2879
  aria-hidden="true"
2880
- class="zd_font_icons basic icon-close2 fbold"
2880
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
2881
2881
  data-id="fontIcon"
2882
2882
  data-selector-id="fontIcon"
2883
2883
  data-test-id="fontIcon"
@@ -2922,7 +2922,7 @@ exports[`Tag component rendering the Custom class 1`] = `
2922
2922
  >
2923
2923
  <i
2924
2924
  aria-hidden="true"
2925
- class="zd_font_icons basic icon-androidd"
2925
+ class="zd_font_icons ff icon-androidd basic d-inline-block d-align-middle"
2926
2926
  data-id="fontIcon"
2927
2927
  data-selector-id="fontIcon"
2928
2928
  data-test-id="fontIcon"
@@ -2942,14 +2942,14 @@ exports[`Tag component rendering the Custom class 1`] = `
2942
2942
  value="text"
2943
2943
  >
2944
2944
  <div
2945
- class="flex fullSize column alignItems_center justifyContent_center"
2945
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
2946
2946
  data-id="containerComponent"
2947
2947
  data-selector-id="container"
2948
2948
  data-test-id="containerComponent"
2949
2949
  >
2950
2950
  <i
2951
2951
  aria-hidden="true"
2952
- class="zd_font_icons basic icon-close2 fbold"
2952
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
2953
2953
  data-id="fontIcon"
2954
2954
  data-selector-id="fontIcon"
2955
2955
  data-test-id="fontIcon"