@zohodesk/components 1.6.24 → 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 (261) hide show
  1. package/CHANGELOG.md +2042 -0
  2. package/README.md +16 -2027
  3. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +321 -330
  4. package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css +64 -79
  5. package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css +29 -33
  6. package/assets/Appearance/dark/themes/blue/blue_componentsCTA_DarkModifyCategory.module.css +13 -13
  7. package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css +29 -33
  8. package/assets/Appearance/dark/themes/green/green_componentsCTA_DarkModifyCategory.module.css +13 -13
  9. package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css +29 -33
  10. package/assets/Appearance/dark/themes/orange/orange_componentsCTA_DarkModifyCategory.module.css +13 -13
  11. package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css +29 -33
  12. package/assets/Appearance/dark/themes/red/red_componentsCTA_DarkModifyCategory.module.css +13 -13
  13. package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css +29 -33
  14. package/assets/Appearance/dark/themes/yellow/yellow_componentsCTA_DarkModifyCategory.module.css +13 -13
  15. package/assets/Appearance/light/mode/Component_LightMode.module.css +321 -330
  16. package/assets/Appearance/light/mode/Component_v1_LightMode.module.css +64 -79
  17. package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css +29 -33
  18. package/assets/Appearance/light/themes/blue/blue_componentsCTA_LightModifyCategory.module.css +13 -13
  19. package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css +29 -33
  20. package/assets/Appearance/light/themes/green/green_componentsCTA_LightModifyCategory.module.css +13 -13
  21. package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css +29 -33
  22. package/assets/Appearance/light/themes/orange/orange_componentsCTA_LightModifyCategory.module.css +13 -13
  23. package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css +29 -33
  24. package/assets/Appearance/light/themes/red/red_componentsCTA_LightModifyCategory.module.css +13 -13
  25. package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css +29 -33
  26. package/assets/Appearance/light/themes/yellow/yellow_componentsCTA_LightModifyCategory.module.css +13 -13
  27. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +321 -330
  28. package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css +64 -79
  29. package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css +29 -33
  30. package/assets/Appearance/pureDark/themes/blue/blue_componentsCTA_PureDarkModifyCategory.module.css +13 -13
  31. package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css +29 -33
  32. package/assets/Appearance/pureDark/themes/green/green_componentsCTA_PureDarkModifyCategory.module.css +13 -13
  33. package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css +29 -33
  34. package/assets/Appearance/pureDark/themes/orange/orange_componentsCTA_PureDarkModifyCategory.module.css +13 -13
  35. package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css +29 -33
  36. package/assets/Appearance/pureDark/themes/red/red_componentsCTA_PureDarkModifyCategory.module.css +13 -13
  37. package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css +29 -33
  38. package/assets/Appearance/pureDark/themes/yellow/yellow_componentsCTA_PureDarkModifyCategory.module.css +13 -13
  39. package/es/Accordion/Accordion.js +1 -6
  40. package/es/Accordion/AccordionItem.js +1 -6
  41. package/es/Animation/Animation.js +1 -8
  42. package/es/AppContainer/AppContainer.js +1 -6
  43. package/es/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  44. package/es/Avatar/Avatar.js +1 -6
  45. package/es/AvatarTeam/AvatarTeam.js +1 -7
  46. package/es/Button/Button.js +1 -6
  47. package/es/Buttongroup/Buttongroup.js +1 -14
  48. package/es/Card/Card.js +1 -9
  49. package/es/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  50. package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  51. package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  52. package/es/CheckBox/CheckBox.js +1 -6
  53. package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +88 -88
  54. package/es/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +48 -48
  55. package/es/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +30 -30
  56. package/es/DateTime/DateWidget.js +0 -10
  57. package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  58. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +93 -93
  59. package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  60. package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +8 -8
  61. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +7 -7
  62. package/es/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  63. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +28 -28
  64. package/es/DropDown/DropDownHeading.js +1 -6
  65. package/es/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  66. package/es/Heading/Heading.js +1 -6
  67. package/es/Label/Label.js +1 -6
  68. package/es/Label/__tests__/__snapshots__/Label.spec.js.snap +4 -4
  69. package/es/ListItem/ListContainer.js +1 -6
  70. package/es/ListItem/ListItem.js +1 -6
  71. package/es/ListItem/ListItemWithAvatar.js +1 -6
  72. package/es/ListItem/ListItemWithCheckBox.js +1 -6
  73. package/es/ListItem/ListItemWithIcon.js +1 -6
  74. package/es/ListItem/ListItemWithRadio.js +1 -6
  75. package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  76. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  77. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  78. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -62
  79. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  80. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -62
  81. package/es/Modal/Modal.js +1 -8
  82. package/es/MultiSelect/AdvancedGroupMultiSelect.js +1 -7
  83. package/es/MultiSelect/AdvancedMultiSelect.js +1 -9
  84. package/es/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  85. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  86. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  87. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +35 -35
  88. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  89. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  90. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  91. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  92. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +94 -94
  93. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  94. package/es/RippleEffect/RippleEffect.js +1 -6
  95. package/es/Select/GroupSelect.js +1 -8
  96. package/es/Select/Select.js +1 -10
  97. package/es/Select/SelectWithAvatar.js +1 -9
  98. package/es/Select/SelectWithIcon.js +1 -7
  99. package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +7 -7
  100. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +831 -831
  101. package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  102. package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +10 -10
  103. package/es/Switch/Switch.js +1 -6
  104. package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  105. package/es/Tab/Tab.js +1 -6
  106. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  107. package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  108. package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  109. package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  110. package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  111. package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  112. package/es/Tag/Tag.js +1 -6
  113. package/es/Tag/__tests__/__snapshots__/Tag.spec.js.snap +94 -94
  114. package/es/TextBox/TextBox.js +1 -8
  115. package/es/TextBoxIcon/TextBoxIcon.js +1 -8
  116. package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +167 -167
  117. package/es/Textarea/Textarea.js +1 -8
  118. package/es/Tooltip/Tooltip.js +1 -8
  119. package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +1 -5
  120. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -5
  121. package/es/semantic/Button/Button.js +1 -6
  122. package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +20 -20
  123. package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  124. package/es/v1/Button/Button.js +198 -114
  125. package/es/v1/Button/README.md +110 -44
  126. package/es/v1/Button/__tests__/Button.spec.js +139 -48
  127. package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +1236 -340
  128. package/es/v1/Button/constants/index.js +29 -23
  129. package/es/v1/Button/constants/presets.js +160 -0
  130. package/es/v1/Button/css/Button_v1.module.css +33 -16
  131. package/es/v1/Button/css/cssJSLogic.js +56 -29
  132. package/es/v1/Button/props/defaultProps.js +5 -6
  133. package/es/v1/Button/props/propTypes.js +26 -8
  134. package/es/v1/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -24
  135. package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +14 -14
  136. package/es/v1/helpers/colorHelpers/__tests__/colorHelper.spec.js +357 -0
  137. package/es/v1/helpers/colorHelpers/background/backgroundColor.module.css +38 -534
  138. package/es/v1/helpers/colorHelpers/border/borderColor.module.css +28 -412
  139. package/es/v1/helpers/colorHelpers/colorHelper.js +120 -139
  140. package/es/v1/helpers/colorHelpers/constants/index.js +45 -4
  141. package/es/v1/helpers/colorHelpers/index.js +0 -1
  142. package/es/v1/helpers/colorHelpers/paletteUtilities.README.md +141 -336
  143. package/es/v1/helpers/colorHelpers/text/textColor.module.css +79 -295
  144. package/es/v1/shared/{Loader/Loader.js → Spinner/Spinner.js} +5 -5
  145. package/es/v1/shared/{Loader/__tests__/Loader.spec.js → Spinner/__tests__/Spinner.spec.js} +4 -4
  146. package/{lib/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap → es/v1/shared/Spinner/__tests__/__snapshots__/Spinner.spec.js.snap} +2 -2
  147. package/lib/Accordion/Accordion.js +1 -6
  148. package/lib/Accordion/AccordionItem.js +1 -6
  149. package/lib/Animation/Animation.js +1 -8
  150. package/lib/AppContainer/AppContainer.js +1 -6
  151. package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  152. package/lib/Avatar/Avatar.js +1 -6
  153. package/lib/AvatarTeam/AvatarTeam.js +1 -7
  154. package/lib/Button/Button.js +1 -7
  155. package/lib/Buttongroup/Buttongroup.js +1 -14
  156. package/lib/Card/Card.js +1 -8
  157. package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  158. package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  159. package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  160. package/lib/CheckBox/CheckBox.js +1 -6
  161. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +88 -88
  162. package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +48 -48
  163. package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +30 -30
  164. package/lib/DateTime/DateWidget.js +0 -10
  165. package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  166. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +93 -93
  167. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  168. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +8 -8
  169. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +7 -7
  170. package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  171. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +28 -28
  172. package/lib/DropDown/DropDownHeading.js +1 -6
  173. package/lib/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  174. package/lib/Heading/Heading.js +1 -6
  175. package/lib/Label/Label.js +1 -6
  176. package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap +4 -4
  177. package/lib/ListItem/ListContainer.js +1 -7
  178. package/lib/ListItem/ListItem.js +1 -6
  179. package/lib/ListItem/ListItemWithAvatar.js +1 -6
  180. package/lib/ListItem/ListItemWithCheckBox.js +1 -6
  181. package/lib/ListItem/ListItemWithIcon.js +1 -6
  182. package/lib/ListItem/ListItemWithRadio.js +1 -6
  183. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  184. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  185. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  186. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -62
  187. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  188. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -62
  189. package/lib/Modal/Modal.js +1 -8
  190. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +1 -7
  191. package/lib/MultiSelect/AdvancedMultiSelect.js +1 -9
  192. package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  193. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  194. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  195. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +35 -35
  196. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  197. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  198. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  199. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  200. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +94 -94
  201. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  202. package/lib/RippleEffect/RippleEffect.js +1 -6
  203. package/lib/Select/GroupSelect.js +1 -9
  204. package/lib/Select/Select.js +1 -11
  205. package/lib/Select/SelectWithAvatar.js +1 -9
  206. package/lib/Select/SelectWithIcon.js +1 -7
  207. package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +7 -7
  208. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +831 -831
  209. package/lib/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  210. package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +10 -10
  211. package/lib/Switch/Switch.js +1 -6
  212. package/lib/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  213. package/lib/Tab/Tab.js +1 -6
  214. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  215. package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  216. package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  217. package/lib/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  218. package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  219. package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  220. package/lib/Tag/Tag.js +1 -6
  221. package/lib/Tag/__tests__/__snapshots__/Tag.spec.js.snap +94 -94
  222. package/lib/TextBox/TextBox.js +1 -8
  223. package/lib/TextBoxIcon/TextBoxIcon.js +1 -8
  224. package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +167 -167
  225. package/lib/Textarea/Textarea.js +1 -8
  226. package/lib/Tooltip/Tooltip.js +1 -8
  227. package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +1 -5
  228. package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -5
  229. package/lib/semantic/Button/Button.js +1 -6
  230. package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +20 -20
  231. package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  232. package/lib/v1/Button/Button.js +208 -124
  233. package/lib/v1/Button/README.md +110 -44
  234. package/lib/v1/Button/__tests__/Button.spec.js +195 -88
  235. package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +1236 -340
  236. package/lib/v1/Button/constants/index.js +34 -31
  237. package/lib/v1/Button/constants/presets.js +179 -0
  238. package/lib/v1/Button/css/Button_v1.module.css +33 -16
  239. package/lib/v1/Button/css/cssJSLogic.js +45 -25
  240. package/lib/v1/Button/props/defaultProps.js +4 -5
  241. package/lib/v1/Button/props/propTypes.js +41 -7
  242. package/lib/v1/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -24
  243. package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +14 -14
  244. package/lib/v1/helpers/colorHelpers/__tests__/colorHelper.spec.js +363 -0
  245. package/lib/v1/helpers/colorHelpers/background/backgroundColor.module.css +38 -534
  246. package/lib/v1/helpers/colorHelpers/border/borderColor.module.css +28 -412
  247. package/lib/v1/helpers/colorHelpers/colorHelper.js +130 -153
  248. package/lib/v1/helpers/colorHelpers/constants/index.js +45 -4
  249. package/lib/v1/helpers/colorHelpers/index.js +2 -24
  250. package/lib/v1/helpers/colorHelpers/paletteUtilities.README.md +141 -336
  251. package/lib/v1/helpers/colorHelpers/text/textColor.module.css +79 -295
  252. package/lib/v1/shared/{Loader/Loader.js → Spinner/Spinner.js} +8 -8
  253. package/lib/v1/shared/{Loader/__tests__/Loader.spec.js → Spinner/__tests__/Spinner.spec.js} +4 -4
  254. package/{es/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap → lib/v1/shared/Spinner/__tests__/__snapshots__/Spinner.spec.js.snap} +2 -2
  255. package/package.json +19 -19
  256. /package/es/v1/shared/{Loader/Loader_v1.module.css → Spinner/Spinner_v1.module.css} +0 -0
  257. /package/es/v1/shared/{Loader → Spinner}/props/defaultProps.js +0 -0
  258. /package/es/v1/shared/{Loader → Spinner}/props/propTypes.js +0 -0
  259. /package/lib/v1/shared/{Loader/Loader_v1.module.css → Spinner/Spinner_v1.module.css} +0 -0
  260. /package/lib/v1/shared/{Loader → Spinner}/props/defaultProps.js +0 -0
  261. /package/lib/v1/shared/{Loader → Spinner}/props/propTypes.js +0 -0
package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap CHANGED
@@ -9,13 +9,13 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
9
9
  data-test-id="multiSelectComp"
10
10
  >
11
11
  <div
12
- class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
12
+ class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium hasBorder borderColor_default"
13
13
  data-id="containerComponent"
14
14
  data-selector-id="container"
15
15
  data-test-id="containerComponent"
16
16
  >
17
17
  <div
18
- class="flexible basis_auto shrink wrapper"
18
+ class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
19
19
  data-id="multiSelectComp_textBox"
20
20
  data-selector-id="box"
21
21
  data-test-id="multiSelectComp_textBox"
@@ -24,11 +24,11 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
24
24
  class="custmSpan custmSpanMedium"
25
25
  />
26
26
  <div
27
- class="flex row varClass customContainer effect container custmInputWrapper"
27
+ class="d-flex d-flex-row varClass customContainer effect container custmInputWrapper"
28
28
  data-selector-id="textBoxIcon"
29
29
  >
30
30
  <div
31
- class="flexible basis_zero noShrink"
31
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
32
32
  data-id="boxComponent"
33
33
  data-selector-id="box"
34
34
  data-test-id="boxComponent"
@@ -51,13 +51,13 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
51
51
  />
52
52
  </div>
53
53
  <div
54
- class="noShrink iconContainer"
54
+ class="d-flex-shrink-0 iconContainer"
55
55
  data-id="boxComponent"
56
56
  data-selector-id="box"
57
57
  data-test-id="boxComponent"
58
58
  >
59
59
  <div
60
- class="flex fullSize row"
60
+ class="d-flex d-h-full d-w-full d-flex-row"
61
61
  data-id="containerComponent"
62
62
  data-selector-id="container"
63
63
  data-test-id="containerComponent"
@@ -79,13 +79,13 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
79
79
  data-test-id="multiSelectComp"
80
80
  >
81
81
  <div
82
- class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
82
+ class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium hasBorder borderColor_default"
83
83
  data-id="containerComponent"
84
84
  data-selector-id="container"
85
85
  data-test-id="containerComponent"
86
86
  >
87
87
  <div
88
- class="flexible basis_auto shrink wrapper"
88
+ class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
89
89
  data-id="multiSelectComp_textBox"
90
90
  data-selector-id="box"
91
91
  data-test-id="multiSelectComp_textBox"
@@ -94,11 +94,11 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
94
94
  class="custmSpan custmSpanMedium"
95
95
  />
96
96
  <div
97
- class="flex row varClass customContainer effect container custmInputWrapper"
97
+ class="d-flex d-flex-row varClass customContainer effect container custmInputWrapper"
98
98
  data-selector-id="textBoxIcon"
99
99
  >
100
100
  <div
101
- class="flexible basis_zero noShrink"
101
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
102
102
  data-id="boxComponent"
103
103
  data-selector-id="box"
104
104
  data-test-id="boxComponent"
@@ -121,13 +121,13 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
121
121
  />
122
122
  </div>
123
123
  <div
124
- class="noShrink iconContainer"
124
+ class="d-flex-shrink-0 iconContainer"
125
125
  data-id="boxComponent"
126
126
  data-selector-id="box"
127
127
  data-test-id="boxComponent"
128
128
  >
129
129
  <div
130
- class="flex fullSize row"
130
+ class="d-flex d-h-full d-w-full d-flex-row"
131
131
  data-id="containerComponent"
132
132
  data-selector-id="container"
133
133
  data-test-id="containerComponent"
@@ -159,38 +159,38 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
159
159
  tabindex="-1"
160
160
  >
161
161
  <div
162
- class="flex row"
162
+ class="d-flex d-flex-row"
163
163
  data-id="containerComponent"
164
164
  data-selector-id="container"
165
165
  data-test-id="containerComponent"
166
166
  >
167
167
  <div
168
- class="flexible basis_zero noShrink"
168
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
169
169
  data-id="boxComponent"
170
170
  data-selector-id="box"
171
171
  data-test-id="boxComponent"
172
172
  >
173
173
  <div
174
- class="flex fullSize column box"
174
+ class="d-flex d-h-full d-w-full d-flex-col box"
175
175
  data-id="containerComponent"
176
176
  data-selector-id="container"
177
177
  data-test-id="containerComponent"
178
178
  >
179
179
  <div
180
- class="flexible basis_zero shrink scroll_vertical small"
180
+ class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden small"
181
181
  data-id="CardContent"
182
182
  data-selector-id="cardContent"
183
183
  data-test-id="CardContent"
184
184
  >
185
185
  <div
186
- class="flex column"
186
+ class="d-flex d-flex-col"
187
187
  data-id="containerComponent"
188
188
  data-selector-id="container"
189
189
  data-test-id="containerComponent"
190
190
  tabindex="0"
191
191
  >
192
192
  <div
193
- class="noShrink"
193
+ class="d-flex-shrink-0"
194
194
  data-id="multiSelectComp_Options"
195
195
  data-selector-id="box"
196
196
  data-test-id="multiSelectComp_Options"
@@ -198,7 +198,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
198
198
  <li
199
199
  aria-label="Apple"
200
200
  aria-selected="false"
201
- class="flex row alignItems_center list medium default defaultHover mediumwithTick withBorder"
201
+ class="d-flex d-flex-row d-items-center list medium default defaultHover mediumwithTick withBorder"
202
202
  data-a11y-inset-focus="true"
203
203
  data-a11y-list-active="true"
204
204
  data-id="Apple"
@@ -209,19 +209,19 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
209
209
  tabindex="0"
210
210
  >
211
211
  <div
212
- class="flexible basis_zero noShrink leftBox"
212
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
213
213
  data-id="boxComponent"
214
214
  data-selector-id="box"
215
215
  data-test-id="boxComponent"
216
216
  >
217
217
  <div
218
- class="noShrink titleBox"
218
+ class="d-flex-shrink-0 titleBox"
219
219
  data-id="boxComponent"
220
220
  data-selector-id="box"
221
221
  data-test-id="boxComponent"
222
222
  >
223
223
  <div
224
- class="basis_auto shrink selfAlign_center value"
224
+ class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
225
225
  data-id="boxComponent"
226
226
  data-selector-id="box"
227
227
  data-test-id="boxComponent"
@@ -234,7 +234,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
234
234
  <li
235
235
  aria-label="Orange"
236
236
  aria-selected="false"
237
- class="flex row alignItems_center list medium default mediumwithTick withBorder"
237
+ class="d-flex d-flex-row d-items-center list medium default mediumwithTick withBorder"
238
238
  data-a11y-inset-focus="true"
239
239
  data-a11y-list-active="false"
240
240
  data-id="Orange"
@@ -245,19 +245,19 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
245
245
  tabindex="0"
246
246
  >
247
247
  <div
248
- class="flexible basis_zero noShrink leftBox"
248
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
249
249
  data-id="boxComponent"
250
250
  data-selector-id="box"
251
251
  data-test-id="boxComponent"
252
252
  >
253
253
  <div
254
- class="noShrink titleBox"
254
+ class="d-flex-shrink-0 titleBox"
255
255
  data-id="boxComponent"
256
256
  data-selector-id="box"
257
257
  data-test-id="boxComponent"
258
258
  >
259
259
  <div
260
- class="basis_auto shrink selfAlign_center value"
260
+ class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
261
261
  data-id="boxComponent"
262
262
  data-selector-id="box"
263
263
  data-test-id="boxComponent"
@@ -270,7 +270,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
270
270
  <li
271
271
  aria-label="string test"
272
272
  aria-selected="false"
273
- class="flex row alignItems_center list medium default mediumwithTick withBorder"
273
+ class="d-flex d-flex-row d-items-center list medium default mediumwithTick withBorder"
274
274
  data-a11y-inset-focus="true"
275
275
  data-a11y-list-active="false"
276
276
  data-id="string test"
@@ -281,19 +281,19 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
281
281
  tabindex="0"
282
282
  >
283
283
  <div
284
- class="flexible basis_zero noShrink leftBox"
284
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
285
285
  data-id="boxComponent"
286
286
  data-selector-id="box"
287
287
  data-test-id="boxComponent"
288
288
  >
289
289
  <div
290
- class="noShrink titleBox"
290
+ class="d-flex-shrink-0 titleBox"
291
291
  data-id="boxComponent"
292
292
  data-selector-id="box"
293
293
  data-test-id="boxComponent"
294
294
  >
295
295
  <div
296
- class="basis_auto shrink selfAlign_center value"
296
+ class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
297
297
  data-id="boxComponent"
298
298
  data-selector-id="box"
299
299
  data-test-id="boxComponent"
@@ -324,13 +324,13 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
324
324
  data-test-id="multiSelectComp"
325
325
  >
326
326
  <div
327
- class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
327
+ class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium hasBorder borderColor_default"
328
328
  data-id="containerComponent"
329
329
  data-selector-id="container"
330
330
  data-test-id="containerComponent"
331
331
  >
332
332
  <div
333
- class="flexible basis_auto shrink wrapper"
333
+ class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
334
334
  data-id="multiSelectComp_textBox"
335
335
  data-selector-id="box"
336
336
  data-test-id="multiSelectComp_textBox"
@@ -339,11 +339,11 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
339
339
  class="custmSpan custmSpanMedium"
340
340
  />
341
341
  <div
342
- class="flex row varClass customContainer effect container custmInputWrapper"
342
+ class="d-flex d-flex-row varClass customContainer effect container custmInputWrapper"
343
343
  data-selector-id="textBoxIcon"
344
344
  >
345
345
  <div
346
- class="flexible basis_zero noShrink"
346
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
347
347
  data-id="boxComponent"
348
348
  data-selector-id="box"
349
349
  data-test-id="boxComponent"
@@ -366,13 +366,13 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
366
366
  />
367
367
  </div>
368
368
  <div
369
- class="noShrink iconContainer"
369
+ class="d-flex-shrink-0 iconContainer"
370
370
  data-id="boxComponent"
371
371
  data-selector-id="box"
372
372
  data-test-id="boxComponent"
373
373
  >
374
374
  <div
375
- class="flex fullSize row"
375
+ class="d-flex d-h-full d-w-full d-flex-row"
376
376
  data-id="containerComponent"
377
377
  data-selector-id="container"
378
378
  data-test-id="containerComponent"
@@ -404,38 +404,38 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
404
404
  tabindex="-1"
405
405
  >
406
406
  <div
407
- class="flex row"
407
+ class="d-flex d-flex-row"
408
408
  data-id="containerComponent"
409
409
  data-selector-id="container"
410
410
  data-test-id="containerComponent"
411
411
  >
412
412
  <div
413
- class="flexible basis_zero noShrink"
413
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
414
414
  data-id="boxComponent"
415
415
  data-selector-id="box"
416
416
  data-test-id="boxComponent"
417
417
  >
418
418
  <div
419
- class="flex fullSize column box"
419
+ class="d-flex d-h-full d-w-full d-flex-col box"
420
420
  data-id="containerComponent"
421
421
  data-selector-id="container"
422
422
  data-test-id="containerComponent"
423
423
  >
424
424
  <div
425
- class="flexible basis_zero shrink scroll_vertical small"
425
+ class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden small"
426
426
  data-id="CardContent"
427
427
  data-selector-id="cardContent"
428
428
  data-test-id="CardContent"
429
429
  >
430
430
  <div
431
- class="flex column"
431
+ class="d-flex d-flex-col"
432
432
  data-id="containerComponent"
433
433
  data-selector-id="container"
434
434
  data-test-id="containerComponent"
435
435
  tabindex="0"
436
436
  >
437
437
  <div
438
- class="noShrink"
438
+ class="d-flex-shrink-0"
439
439
  data-id="multiSelectComp_Options"
440
440
  data-selector-id="box"
441
441
  data-test-id="multiSelectComp_Options"
@@ -443,7 +443,7 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
443
443
  <li
444
444
  aria-label="Apple"
445
445
  aria-selected="false"
446
- class="flex row alignItems_center list medium default defaultHover mediumwithTick withBorder"
446
+ class="d-flex d-flex-row d-items-center list medium default defaultHover mediumwithTick withBorder"
447
447
  data-a11y-inset-focus="true"
448
448
  data-a11y-list-active="true"
449
449
  data-id="Apple"
@@ -454,19 +454,19 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
454
454
  tabindex="0"
455
455
  >
456
456
  <div
457
- class="flexible basis_zero noShrink leftBox"
457
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
458
458
  data-id="boxComponent"
459
459
  data-selector-id="box"
460
460
  data-test-id="boxComponent"
461
461
  >
462
462
  <div
463
- class="noShrink titleBox"
463
+ class="d-flex-shrink-0 titleBox"
464
464
  data-id="boxComponent"
465
465
  data-selector-id="box"
466
466
  data-test-id="boxComponent"
467
467
  >
468
468
  <div
469
- class="basis_auto shrink selfAlign_center value"
469
+ class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
470
470
  data-id="boxComponent"
471
471
  data-selector-id="box"
472
472
  data-test-id="boxComponent"
@@ -479,7 +479,7 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
479
479
  <li
480
480
  aria-label="Orange"
481
481
  aria-selected="false"
482
- class="flex row alignItems_center list medium default mediumwithTick withBorder"
482
+ class="d-flex d-flex-row d-items-center list medium default mediumwithTick withBorder"
483
483
  data-a11y-inset-focus="true"
484
484
  data-a11y-list-active="false"
485
485
  data-id="Orange"
@@ -490,19 +490,19 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
490
490
  tabindex="0"
491
491
  >
492
492
  <div
493
- class="flexible basis_zero noShrink leftBox"
493
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
494
494
  data-id="boxComponent"
495
495
  data-selector-id="box"
496
496
  data-test-id="boxComponent"
497
497
  >
498
498
  <div
499
- class="noShrink titleBox"
499
+ class="d-flex-shrink-0 titleBox"
500
500
  data-id="boxComponent"
501
501
  data-selector-id="box"
502
502
  data-test-id="boxComponent"
503
503
  >
504
504
  <div
505
- class="basis_auto shrink selfAlign_center value"
505
+ class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
506
506
  data-id="boxComponent"
507
507
  data-selector-id="box"
508
508
  data-test-id="boxComponent"
package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap CHANGED
@@ -9,13 +9,13 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
9
9
  data-test-id="multiSelect"
10
10
  >
11
11
  <div
12
- class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
12
+ class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium borderColor_default hasBorder"
13
13
  data-id="containerComponent"
14
14
  data-selector-id="container"
15
15
  data-test-id="containerComponent"
16
16
  >
17
17
  <div
18
- class="flexible basis_auto shrink wrapper"
18
+ class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
19
19
  data-id="boxComponent"
20
20
  data-selector-id="box"
21
21
  data-test-id="boxComponent"
@@ -24,11 +24,11 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
24
24
  class="custmSpan custmSpanMedium"
25
25
  />
26
26
  <div
27
- class="flex row varClass customContainer effect container custmInputWrapper"
27
+ class="d-flex d-flex-row varClass customContainer effect container custmInputWrapper"
28
28
  data-selector-id="textBoxIcon"
29
29
  >
30
30
  <div
31
- class="flexible basis_zero noShrink"
31
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
32
32
  data-id="boxComponent"
33
33
  data-selector-id="box"
34
34
  data-test-id="boxComponent"
@@ -49,25 +49,25 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
49
49
  />
50
50
  </div>
51
51
  <div
52
- class="noShrink iconContainer"
52
+ class="d-flex-shrink-0 iconContainer"
53
53
  data-id="boxComponent"
54
54
  data-selector-id="box"
55
55
  data-test-id="boxComponent"
56
56
  >
57
57
  <div
58
- class="flex fullSize row"
58
+ class="d-flex d-h-full d-w-full d-flex-row"
59
59
  data-id="containerComponent"
60
60
  data-selector-id="container"
61
61
  data-test-id="containerComponent"
62
62
  >
63
63
  <div
64
- class="noShrink icon"
64
+ class="d-flex-shrink-0 icon"
65
65
  data-id="boxComponent"
66
66
  data-selector-id="box"
67
67
  data-test-id="boxComponent"
68
68
  >
69
69
  <div
70
- class="inlineFlex row alignItems_center rightPlaceholder"
70
+ class="d-inline-flex d-flex-row d-items-center rightPlaceholder"
71
71
  data-id="containerComponent"
72
72
  data-selector-id="container"
73
73
  data-test-id="containerComponent"
@@ -91,13 +91,13 @@ exports[`MultiSelect rendering the defult props 1`] = `
91
91
  data-test-id="multiSelect"
92
92
  >
93
93
  <div
94
- class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
94
+ class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium borderColor_default hasBorder"
95
95
  data-id="containerComponent"
96
96
  data-selector-id="container"
97
97
  data-test-id="containerComponent"
98
98
  >
99
99
  <div
100
- class="flexible basis_auto shrink wrapper"
100
+ class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
101
101
  data-id="boxComponent"
102
102
  data-selector-id="box"
103
103
  data-test-id="boxComponent"
@@ -106,11 +106,11 @@ exports[`MultiSelect rendering the defult props 1`] = `
106
106
  class="custmSpan custmSpanMedium"
107
107
  />
108
108
  <div
109
- class="flex row varClass customContainer effect container custmInputWrapper"
109
+ class="d-flex d-flex-row varClass customContainer effect container custmInputWrapper"
110
110
  data-selector-id="textBoxIcon"
111
111
  >
112
112
  <div
113
- class="flexible basis_zero noShrink"
113
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
114
114
  data-id="boxComponent"
115
115
  data-selector-id="box"
116
116
  data-test-id="boxComponent"
@@ -131,25 +131,25 @@ exports[`MultiSelect rendering the defult props 1`] = `
131
131
  />
132
132
  </div>
133
133
  <div
134
- class="noShrink iconContainer"
134
+ class="d-flex-shrink-0 iconContainer"
135
135
  data-id="boxComponent"
136
136
  data-selector-id="box"
137
137
  data-test-id="boxComponent"
138
138
  >
139
139
  <div
140
- class="flex fullSize row"
140
+ class="d-flex d-h-full d-w-full d-flex-row"
141
141
  data-id="containerComponent"
142
142
  data-selector-id="container"
143
143
  data-test-id="containerComponent"
144
144
  >
145
145
  <div
146
- class="noShrink icon"
146
+ class="d-flex-shrink-0 icon"
147
147
  data-id="boxComponent"
148
148
  data-selector-id="box"
149
149
  data-test-id="boxComponent"
150
150
  >
151
151
  <div
152
- class="inlineFlex row alignItems_center rightPlaceholder"
152
+ class="d-inline-flex d-flex-row d-items-center rightPlaceholder"
153
153
  data-id="containerComponent"
154
154
  data-selector-id="container"
155
155
  data-test-id="containerComponent"
@@ -173,13 +173,13 @@ exports[`MultiSelect rendering with limit feature 1`] = `
173
173
  data-test-id="multiSelect"
174
174
  >
175
175
  <div
176
- class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
176
+ class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium borderColor_default hasBorder"
177
177
  data-id="containerComponent"
178
178
  data-selector-id="container"
179
179
  data-test-id="containerComponent"
180
180
  >
181
181
  <div
182
- class="noShrink tag medium"
182
+ class="d-flex-shrink-0 tag medium"
183
183
  data-id="multiSelect_selectedOptions"
184
184
  data-selector-id="box"
185
185
  data-test-id="multiSelect_selectedOptions"
@@ -209,14 +209,14 @@ exports[`MultiSelect rendering with limit feature 1`] = `
209
209
  value="text"
210
210
  >
211
211
  <div
212
- class="flex fullSize column alignItems_center justifyContent_center"
212
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
213
213
  data-id="containerComponent"
214
214
  data-selector-id="container"
215
215
  data-test-id="containerComponent"
216
216
  >
217
217
  <i
218
218
  aria-hidden="true"
219
- class="zd_font_icons basic icon-close2 fbold"
219
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
220
220
  data-id="fontIcon"
221
221
  data-selector-id="fontIcon"
222
222
  data-test-id="fontIcon"
@@ -227,7 +227,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
227
227
  </div>
228
228
  </div>
229
229
  <div
230
- class="noShrink tag medium"
230
+ class="d-flex-shrink-0 tag medium"
231
231
  data-id="multiSelect_selectedOptions"
232
232
  data-selector-id="box"
233
233
  data-test-id="multiSelect_selectedOptions"
@@ -257,14 +257,14 @@ exports[`MultiSelect rendering with limit feature 1`] = `
257
257
  value="text"
258
258
  >
259
259
  <div
260
- class="flex fullSize column alignItems_center justifyContent_center"
260
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
261
261
  data-id="containerComponent"
262
262
  data-selector-id="container"
263
263
  data-test-id="containerComponent"
264
264
  >
265
265
  <i
266
266
  aria-hidden="true"
267
- class="zd_font_icons basic icon-close2 fbold"
267
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
268
268
  data-id="fontIcon"
269
269
  data-selector-id="fontIcon"
270
270
  data-test-id="fontIcon"
@@ -275,7 +275,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
275
275
  </div>
276
276
  </div>
277
277
  <div
278
- class="noShrink tag medium"
278
+ class="d-flex-shrink-0 tag medium"
279
279
  data-id="multiSelect_selectedOptions"
280
280
  data-selector-id="box"
281
281
  data-test-id="multiSelect_selectedOptions"
@@ -305,14 +305,14 @@ exports[`MultiSelect rendering with limit feature 1`] = `
305
305
  value="text"
306
306
  >
307
307
  <div
308
- class="flex fullSize column alignItems_center justifyContent_center"
308
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
309
309
  data-id="containerComponent"
310
310
  data-selector-id="container"
311
311
  data-test-id="containerComponent"
312
312
  >
313
313
  <i
314
314
  aria-hidden="true"
315
- class="zd_font_icons basic icon-close2 fbold"
315
+ class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
316
316
  data-id="fontIcon"
317
317
  data-selector-id="fontIcon"
318
318
  data-test-id="fontIcon"
@@ -323,7 +323,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
323
323
  </div>
324
324
  </div>
325
325
  <div
326
- class="flexible basis_auto shrink wrapper"
326
+ class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
327
327
  data-id="boxComponent"
328
328
  data-selector-id="box"
329
329
  data-test-id="boxComponent"
@@ -332,11 +332,11 @@ exports[`MultiSelect rendering with limit feature 1`] = `
332
332
  class="custmSpan custmSpanMedium clearIconSpace"
333
333
  />
334
334
  <div
335
- class="flex row varClass customContainer effect container custmInputWrapper"
335
+ class="d-flex d-flex-row varClass customContainer effect container custmInputWrapper"
336
336
  data-selector-id="textBoxIcon"
337
337
  >
338
338
  <div
339
- class="flexible basis_zero noShrink"
339
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
340
340
  data-id="boxComponent"
341
341
  data-selector-id="box"
342
342
  data-test-id="boxComponent"
@@ -358,31 +358,31 @@ exports[`MultiSelect rendering with limit feature 1`] = `
358
358
  />
359
359
  </div>
360
360
  <div
361
- class="noShrink iconContainer"
361
+ class="d-flex-shrink-0 iconContainer"
362
362
  data-id="boxComponent"
363
363
  data-selector-id="box"
364
364
  data-test-id="boxComponent"
365
365
  >
366
366
  <div
367
- class="flex fullSize row"
367
+ class="d-flex d-h-full d-w-full d-flex-row"
368
368
  data-id="containerComponent"
369
369
  data-selector-id="container"
370
370
  data-test-id="containerComponent"
371
371
  >
372
372
  <div
373
- class="noShrink icon"
373
+ class="d-flex-shrink-0 icon"
374
374
  data-id="boxComponent"
375
375
  data-selector-id="box"
376
376
  data-test-id="boxComponent"
377
377
  >
378
378
  <div
379
- class="inlineFlex row alignItems_center rightPlaceholder"
379
+ class="d-inline-flex d-flex-row d-items-center rightPlaceholder"
380
380
  data-id="containerComponent"
381
381
  data-selector-id="container"
382
382
  data-test-id="containerComponent"
383
383
  >
384
384
  <button
385
- class="noShrink delete defaultDelete"
385
+ class="d-flex-shrink-0 delete defaultDelete"
386
386
  data-id="multiSelect_clearIcon"
387
387
  data-selector-id="box"
388
388
  data-test-id="multiSelect_clearIcon"
@@ -390,7 +390,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
390
390
  >
391
391
  <i
392
392
  aria-hidden="true"
393
- class="zd_font_icons rtl basic icon-delete"
393
+ class="zd_font_icons ff icon-delete basic d-inline-block d-align-middle rtl"
394
394
  data-id="fontIcon"
395
395
  data-selector-id="fontIcon"
396
396
  data-test-id="fontIcon"