@zohodesk/components 1.0.0-temp-256.1 → 1.0.0-temp-259.1

package/lib/ListItem/props/defaultProps.js

@@ -92,7 +92,6 @@ var ListItemWithIconDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: '',
-  customTitleBoxClass: '',
   customProps: {},
   dataSelectorId: 'listItemWithIcon',
   needMultiLineText: false,

package/lib/ListItem/props/propTypes.js

@@ -94,7 +94,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   active: _propTypes["default"].bool,
   autoHover: _propTypes["default"].bool,
   avatarPalette: _propTypes["default"].string
-}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "secondaryValue", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "renderValueRightPlaceholderNode", _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])), _defineProperty(_ListItemWithAvatar_P, "renderLeftValuePlaceholderNode", _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])), _defineProperty(_ListItemWithAvatar_P, "lhsAlignContent", _propTypes["default"].oneOf(['start', 'center', 'end'])), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
+}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "secondaryValue", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "renderValueRightPlaceholderNode", _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])), _defineProperty(_ListItemWithAvatar_P, "lhsAlignContent", _propTypes["default"].oneOf(['start', 'center', 'end'])), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
   role: _propTypes["default"].string,
   ariaSelected: _propTypes["default"].bool,
   ariaHidden: _propTypes["default"].bool
@@ -102,8 +102,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   customListItem: _propTypes["default"].string,
   customAvatar: _propTypes["default"].string,
   customAvatarTeam: _propTypes["default"].string,
-  customValueRightPlaceholder: _propTypes["default"].string,
-  customLeftValuePlaceholder: _propTypes["default"].string
+  customValueRightPlaceholder: _propTypes["default"].string
 })), _defineProperty(_ListItemWithAvatar_P, "needMultiLineText", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
   ListItemProps: _propTypes["default"].object,
   ContainerProps: _propTypes["default"].object,
@@ -132,7 +131,6 @@ var ListItemWithCheckBox_Props = {
   secondaryValue: _propTypes["default"].string,
   needBorder: _propTypes["default"].bool,
   renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
-  renderLeftValuePlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   a11y: _propTypes["default"].shape({
@@ -144,8 +142,7 @@ var ListItemWithCheckBox_Props = {
     customListItem: _propTypes["default"].string,
     customCheckBox: _propTypes["default"].string,
     customLabel: _propTypes["default"].string,
-    customValueRightPlaceholder: _propTypes["default"].string,
-    customLeftValuePlaceholder: _propTypes["default"].string
+    customValueRightPlaceholder: _propTypes["default"].string
   }),
   customProps: _propTypes["default"].object
 };
@@ -174,7 +171,6 @@ var ListItemWithIcon_Props = {
   value: _propTypes["default"].string,
   secondaryValue: _propTypes["default"].string,
   renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
-  renderLeftValuePlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   a11y: _propTypes["default"].shape({
@@ -185,8 +181,6 @@ var ListItemWithIcon_Props = {
   needMultiLineText: _propTypes["default"].bool,
   customClass: _propTypes["default"].string,
   customValueRightPlaceholderClass: _propTypes["default"].string,
-  customLeftValuePlaceholderClass: _propTypes["default"].string,
-  customTitleBoxClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
     ListItemProps: _propTypes["default"].object
   }),
@@ -216,7 +210,6 @@ var ListItemWithRadio_Props = {
   secondaryValue: _propTypes["default"].string,
   needBorder: _propTypes["default"].bool,
   renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
-  renderLeftValuePlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   a11y: _propTypes["default"].shape({
@@ -228,8 +221,7 @@ var ListItemWithRadio_Props = {
     customListItem: _propTypes["default"].string,
     customRadio: _propTypes["default"].string,
     customRadioWrap: _propTypes["default"].string,
-    customValueRightPlaceholder: _propTypes["default"].string,
-    customLeftValuePlaceholder: _propTypes["default"].string
+    customValueRightPlaceholder: _propTypes["default"].string
   }),
   customProps: _propTypes["default"].object
 };

package/lib/Modal/Modal.js

@@ -226,11 +226,4 @@ var Modal = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = Modal;
 Modal.defaultProps = _defaultProps.defaultProps;
-Modal.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   Modal.docs = {
-//     componentGroup: 'Atom',
-//     folderName: 'Style Guide',
-//     external: false,
-//     description: ' '
-//   };
-// }
+Modal.propTypes = _propTypes.propTypes;

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1198,12 +1198,6 @@ AdvancedGroupMultiSelect.defaultProps = _defaultProps.AdvancedGroupMultiSelect_d
 AdvancedGroupMultiSelect.propTypes = _propTypes.AdvancedGroupMultiSelect_propTypes;
 var AdvancedGroupMultiSelectComponent = (0, _Popup["default"])(AdvancedGroupMultiSelect);
 AdvancedGroupMultiSelectComponent.defaultProps = AdvancedGroupMultiSelect.defaultProps;
-AdvancedGroupMultiSelectComponent.propTypes = AdvancedGroupMultiSelect.propTypes; // if (__DOCS__) {
-//   AdvancedGroupMultiSelect.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }
-
+AdvancedGroupMultiSelectComponent.propTypes = AdvancedGroupMultiSelect.propTypes;
 var _default = AdvancedGroupMultiSelectComponent;
 exports["default"] = _default;

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -666,14 +666,6 @@ AdvancedMultiSelectComponent.defaultProps = _defaultProps.AdvancedMultiSelect_de
 AdvancedMultiSelectComponent.displayName = 'AdvancedMultiSelect';
 var AdvancedMultiSelect = (0, _Popup["default"])(AdvancedMultiSelectComponent);
 AdvancedMultiSelect.defaultProps = AdvancedMultiSelectComponent.defaultProps;
-AdvancedMultiSelect.propTypes = AdvancedMultiSelectComponent.propTypes; // if (__DOCS__) {
-//   AdvancedMultiSelectComponent.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-//   // eslint-disable-next-line react/forbid-foreign-prop-types
-//   AdvancedMultiSelect.propTypes = AdvancedMultiSelectComponent.propTypes;
-// }
-
+AdvancedMultiSelect.propTypes = AdvancedMultiSelectComponent.propTypes;
 var _default = AdvancedMultiSelect;
 exports["default"] = _default;

package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap

@@ -6,19 +6,19 @@ exports[`MobileHeader rendering the defult props 1`] = `
     class="container"
   >
     <div
-      class="flex row alignContent_spaceBetween alignItems_center header"
+      class="d-flex d-flex-row d-content-between d-items-center header"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="flexible basis_zero noShrink cardHeading"
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 cardHeading"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="shrink"
+        class="d-min-w-0 d-flex-shrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"

package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap

@@ -9,13 +9,13 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
+      class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium hasBorder borderColor_default"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="flexible basis_auto shrink wrapper"
+        class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -24,11 +24,11 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
           class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer effect container custmInputWrapper"
+          class="d-flex d-flex-row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
-            class="flexible basis_zero noShrink"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -51,13 +51,13 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
             />
           </div>
           <div
-            class="noShrink iconContainer"
+            class="d-flex-shrink-0 iconContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex fullSize row"
+              class="d-flex d-h-full d-w-full d-flex-row"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"

package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap

@@ -9,13 +9,13 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
     data-test-id="multiSelectComp"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
+      class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium hasBorder borderColor_default"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="flexible basis_auto shrink wrapper"
+        class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
         data-id="multiSelectComp_textBox"
         data-selector-id="box"
         data-test-id="multiSelectComp_textBox"
@@ -24,11 +24,11 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
           class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer effect container custmInputWrapper"
+          class="d-flex d-flex-row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
-            class="flexible basis_zero noShrink"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -51,13 +51,13 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
             />
           </div>
           <div
-            class="noShrink iconContainer"
+            class="d-flex-shrink-0 iconContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex fullSize row"
+              class="d-flex d-h-full d-w-full d-flex-row"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"
@@ -79,13 +79,13 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
     data-test-id="multiSelectComp"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
+      class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium hasBorder borderColor_default"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="flexible basis_auto shrink wrapper"
+        class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
         data-id="multiSelectComp_textBox"
         data-selector-id="box"
         data-test-id="multiSelectComp_textBox"
@@ -94,11 +94,11 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
           class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer effect container custmInputWrapper"
+          class="d-flex d-flex-row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
-            class="flexible basis_zero noShrink"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -121,13 +121,13 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
             />
           </div>
           <div
-            class="noShrink iconContainer"
+            class="d-flex-shrink-0 iconContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex fullSize row"
+              class="d-flex d-h-full d-w-full d-flex-row"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"
@@ -159,38 +159,38 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
         tabindex="-1"
       >
         <div
-          class="flex row"
+          class="d-flex d-flex-row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="flexible basis_zero noShrink"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex fullSize column box"
+              class="d-flex d-h-full d-w-full d-flex-col box"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"
             >
               <div
-                class="flexible basis_zero shrink scroll_vertical small"
+                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"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
               >
                 <div
-                  class="flex column"
+                  class="d-flex d-flex-col"
                   data-id="containerComponent"
                   data-selector-id="container"
                   data-test-id="containerComponent"
                   tabindex="0"
                 >
                   <div
-                    class="noShrink"
+                    class="d-flex-shrink-0"
                     data-id="multiSelectComp_Options"
                     data-selector-id="box"
                     data-test-id="multiSelectComp_Options"
@@ -198,7 +198,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                     <li
                       aria-label="Apple"
                       aria-selected="false"
-                      class="flex row alignItems_center list medium default defaultHover mediumwithTick withBorder"
+                      class="d-flex d-flex-row d-items-center list medium default defaultHover mediumwithTick withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="true"
                       data-id="Apple"
@@ -209,19 +209,19 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                       tabindex="0"
                     >
                       <div
-                        class="flexible basis_zero noShrink leftBox"
+                        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
                         data-id="boxComponent"
                         data-selector-id="box"
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="noShrink titleBox"
+                          class="d-flex-shrink-0 titleBox"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="basis_auto shrink selfAlign_center value"
+                            class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"
@@ -234,7 +234,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                     <li
                       aria-label="Orange"
                       aria-selected="false"
-                      class="flex row alignItems_center list medium default mediumwithTick withBorder"
+                      class="d-flex d-flex-row d-items-center list medium default mediumwithTick withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="false"
                       data-id="Orange"
@@ -245,19 +245,19 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                       tabindex="0"
                     >
                       <div
-                        class="flexible basis_zero noShrink leftBox"
+                        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
                         data-id="boxComponent"
                         data-selector-id="box"
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="noShrink titleBox"
+                          class="d-flex-shrink-0 titleBox"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="basis_auto shrink selfAlign_center value"
+                            class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"
@@ -270,7 +270,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                     <li
                       aria-label="string test"
                       aria-selected="false"
-                      class="flex row alignItems_center list medium default mediumwithTick withBorder"
+                      class="d-flex d-flex-row d-items-center list medium default mediumwithTick withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="false"
                       data-id="string test"
@@ -281,19 +281,19 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                       tabindex="0"
                     >
                       <div
-                        class="flexible basis_zero noShrink leftBox"
+                        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
                         data-id="boxComponent"
                         data-selector-id="box"
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="noShrink titleBox"
+                          class="d-flex-shrink-0 titleBox"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="basis_auto shrink selfAlign_center value"
+                            class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"
@@ -324,13 +324,13 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
     data-test-id="multiSelectComp"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
+      class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium hasBorder borderColor_default"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="flexible basis_auto shrink wrapper"
+        class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
         data-id="multiSelectComp_textBox"
         data-selector-id="box"
         data-test-id="multiSelectComp_textBox"
@@ -339,11 +339,11 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
           class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer effect container custmInputWrapper"
+          class="d-flex d-flex-row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
-            class="flexible basis_zero noShrink"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -366,13 +366,13 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
             />
           </div>
           <div
-            class="noShrink iconContainer"
+            class="d-flex-shrink-0 iconContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex fullSize row"
+              class="d-flex d-h-full d-w-full d-flex-row"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"
@@ -404,38 +404,38 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
         tabindex="-1"
       >
         <div
-          class="flex row"
+          class="d-flex d-flex-row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="flexible basis_zero noShrink"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex fullSize column box"
+              class="d-flex d-h-full d-w-full d-flex-col box"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"
             >
               <div
-                class="flexible basis_zero shrink scroll_vertical small"
+                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"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
               >
                 <div
-                  class="flex column"
+                  class="d-flex d-flex-col"
                   data-id="containerComponent"
                   data-selector-id="container"
                   data-test-id="containerComponent"
                   tabindex="0"
                 >
                   <div
-                    class="noShrink"
+                    class="d-flex-shrink-0"
                     data-id="multiSelectComp_Options"
                     data-selector-id="box"
                     data-test-id="multiSelectComp_Options"
@@ -443,7 +443,7 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                     <li
                       aria-label="Apple"
                       aria-selected="false"
-                      class="flex row alignItems_center list medium default defaultHover mediumwithTick withBorder"
+                      class="d-flex d-flex-row d-items-center list medium default defaultHover mediumwithTick withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="true"
                       data-id="Apple"
@@ -454,19 +454,19 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                       tabindex="0"
                     >
                       <div
-                        class="flexible basis_zero noShrink leftBox"
+                        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
                         data-id="boxComponent"
                         data-selector-id="box"
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="noShrink titleBox"
+                          class="d-flex-shrink-0 titleBox"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="basis_auto shrink selfAlign_center value"
+                            class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"
@@ -479,7 +479,7 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                     <li
                       aria-label="Orange"
                       aria-selected="false"
-                      class="flex row alignItems_center list medium default mediumwithTick withBorder"
+                      class="d-flex d-flex-row d-items-center list medium default mediumwithTick withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="false"
                       data-id="Orange"
@@ -490,19 +490,19 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                       tabindex="0"
                     >
                       <div
-                        class="flexible basis_zero noShrink leftBox"
+                        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
                         data-id="boxComponent"
                         data-selector-id="box"
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="noShrink titleBox"
+                          class="d-flex-shrink-0 titleBox"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="basis_auto shrink selfAlign_center value"
+                            class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"