@zohodesk/components 1.0.0-temp-230.1 → 1.0.0-temp-234

package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap

@@ -12,10 +12,10 @@ exports[`Select - Should close the dropdown when clicking outside 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -89,6 +89,9 @@ exports[`Select - Should close the dropdown when clicking outside 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -107,10 +110,10 @@ exports[`Select - Should highlight the next list-items, when arrow keys pressed
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -184,6 +187,9 @@ exports[`Select - Should highlight the next list-items, when arrow keys pressed
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -396,11 +402,10 @@ exports[`Select - Should not open the dropdown when disabled 1`] = `
       data-test-id="selectComponent_disabled"
     >
       <div
-        class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container disabled    flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
-        data-title=""
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -475,6 +480,9 @@ exports[`Select - Should not open the dropdown when disabled 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -493,10 +501,10 @@ exports[`Select - Should not open the dropdown when readonly 1`] = `
       data-test-id="selectComponent_readOnly"
     >
       <div
-        class="varClass customContainer  border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container readonly    flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -570,6 +578,9 @@ exports[`Select - Should not open the dropdown when readonly 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -588,10 +599,10 @@ exports[`Select - Should open the dropdown, when click on the input 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -663,6 +674,9 @@ exports[`Select - Should open the dropdown, when click on the input 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -737,10 +751,10 @@ exports[`Select - Should render all the options when search value is cleared 1`]
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -814,6 +828,9 @@ exports[`Select - Should render all the options when search value is cleared 1`]
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -863,10 +880,10 @@ exports[`Select - Should render all the options when search value is cleared 1`]
                   class="search medium"
                 >
                   <div
-                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
-                    data-id="selectComponent_search"
+                    class="container effect effectFocused   flex rowdir"
+                    data-id="containerComponent"
                     data-selector-id="textBoxIcon"
-                    data-test-id="selectComponent_search"
+                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -902,6 +919,9 @@ exports[`Select - Should render all the options when search value is cleared 1`]
                         data-test-id="containerComponent"
                       />
                     </div>
+                    <div
+                      class="line borderColor_default "
+                    />
                   </div>
                 </div>
               </div>
@@ -1078,10 +1098,10 @@ exports[`Select - Should render given the options 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -1155,6 +1175,9 @@ exports[`Select - Should render given the options 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -1367,10 +1390,10 @@ exports[`Select - Should render the Select component 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -1442,6 +1465,9 @@ exports[`Select - Should render the Select component 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -1460,10 +1486,10 @@ exports[`Select - Should render the default selected value 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -1537,6 +1563,9 @@ exports[`Select - Should render the default selected value 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -1555,10 +1584,10 @@ exports[`Select - Should render the given selected value 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -1632,6 +1661,9 @@ exports[`Select - Should render the given selected value 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -1650,10 +1682,10 @@ exports[`Select - Should render the only options matching search value 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -1727,6 +1759,9 @@ exports[`Select - Should render the only options matching search value 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -1776,10 +1811,10 @@ exports[`Select - Should render the only options matching search value 1`] = `
                   class="search medium"
                 >
                   <div
-                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
-                    data-id="selectComponent_search"
+                    class="container effect effectFocused   flex rowdir"
+                    data-id="containerComponent"
                     data-selector-id="textBoxIcon"
-                    data-test-id="selectComponent_search"
+                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -1815,6 +1850,9 @@ exports[`Select - Should render the only options matching search value 1`] = `
                         data-test-id="containerComponent"
                       />
                     </div>
+                    <div
+                      class="line borderColor_default "
+                    />
                   </div>
                 </div>
               </div>
@@ -2181,10 +2219,10 @@ exports[`Select - Should render the placeholder when there is no default value 1
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -2258,6 +2296,9 @@ exports[`Select - Should render the placeholder when there is no default value 1
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -2276,10 +2317,10 @@ exports[`Select - Should show the custom empty state using getCustomEmptyState p
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -2353,6 +2394,9 @@ exports[`Select - Should show the custom empty state using getCustomEmptyState p
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -2402,10 +2446,10 @@ exports[`Select - Should show the custom empty state using getCustomEmptyState p
                   class="search medium"
                 >
                   <div
-                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
-                    data-id="selectComponent_search"
+                    class="container effect effectFocused   flex rowdir"
+                    data-id="containerComponent"
                     data-selector-id="textBoxIcon"
-                    data-test-id="selectComponent_search"
+                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -2441,6 +2485,9 @@ exports[`Select - Should show the custom empty state using getCustomEmptyState p
                         data-test-id="containerComponent"
                       />
                     </div>
+                    <div
+                      class="line borderColor_default "
+                    />
                   </div>
                 </div>
               </div>
@@ -2475,10 +2522,10 @@ exports[`Select - Should show the empty message when open the dropdown with no o
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -2550,6 +2597,9 @@ exports[`Select - Should show the empty message when open the dropdown with no o
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -2626,10 +2676,10 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -2703,6 +2753,9 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -3223,10 +3276,10 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -3300,6 +3353,9 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -3349,10 +3405,10 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
                   class="search medium"
                 >
                   <div
-                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
-                    data-id="selectComponent_search"
+                    class="container effect effectFocused   flex rowdir"
+                    data-id="containerComponent"
                     data-selector-id="textBoxIcon"
-                    data-test-id="selectComponent_search"
+                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -3388,6 +3444,9 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
                         data-test-id="containerComponent"
                       />
                     </div>
+                    <div
+                      class="line borderColor_default "
+                    />
                   </div>
                 </div>
               </div>
@@ -3613,10 +3672,10 @@ exports[`Select - Should trigger onAddNewOption, when click on the custom search
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -3690,6 +3749,9 @@ exports[`Select - Should trigger onAddNewOption, when click on the custom search
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -3739,10 +3801,10 @@ exports[`Select - Should trigger onAddNewOption, when click on the custom search
                   class="search medium"
                 >
                   <div
-                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
-                    data-id="selectComponent_search"
+                    class="container effect effectFocused   flex rowdir"
+                    data-id="containerComponent"
                     data-selector-id="textBoxIcon"
-                    data-test-id="selectComponent_search"
+                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -3778,6 +3840,9 @@ exports[`Select - Should trigger onAddNewOption, when click on the custom search
                         data-test-id="containerComponent"
                       />
                     </div>
+                    <div
+                      class="line borderColor_default "
+                    />
                   </div>
                 </div>
               </div>
@@ -3812,10 +3877,10 @@ exports[`Select - Should update the value when select the option 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -3889,6 +3954,9 @@ exports[`Select - Should update the value when select the option 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -4101,10 +4169,10 @@ exports[`Select - Should update the value when select the option 2`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -4178,6 +4246,9 @@ exports[`Select - Should update the value when select the option 2`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -4196,10 +4267,10 @@ exports[`Select - Should update the value, when select the option using keyboard
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -4273,6 +4344,9 @@ exports[`Select - Should update the value, when select the option using keyboard
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -4328,10 +4402,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with aria prope
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -4406,6 +4480,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with aria prope
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -4457,10 +4534,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with autoComple
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -4531,6 +4608,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with autoComple
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -4583,10 +4663,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with borderColo
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -4658,6 +4738,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with borderColo
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -4710,10 +4793,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with borderColo
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_transparent hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -4785,6 +4868,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with borderColo
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_transparent "
+        />
       </div>
     </div>
   </div>
@@ -4838,10 +4924,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with customProp
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -4914,6 +5000,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with customProp
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -4967,10 +5056,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with htmlId - n
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -5043,6 +5132,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with htmlId - n
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -5096,11 +5188,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isDisabled
       data-test-id="selectComponent_disabled"
     >
       <div
-        class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container disabled    flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
-        data-title=""
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -5173,6 +5264,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isDisabled
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -5281,10 +5375,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isPopupOpe
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -5356,6 +5450,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isPopupOpe
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -5464,10 +5561,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isReadOnly
       data-test-id="selectComponent_readOnly"
     >
       <div
-        class="varClass customContainer  border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container readonly    flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -5539,6 +5636,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isReadOnly
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -5592,10 +5692,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with maxLength
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -5667,6 +5767,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with maxLength
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -5719,10 +5822,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with needBorder
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer   effect     container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -5846,10 +5949,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with placeHolde
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -5921,6 +6024,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with placeHolde
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -5973,10 +6079,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -6048,6 +6154,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -6100,10 +6209,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -6175,6 +6284,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -6227,10 +6339,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -6302,6 +6414,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -6354,10 +6469,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -6429,6 +6544,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -6481,10 +6599,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -6556,6 +6674,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -6608,10 +6729,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -6683,6 +6804,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -6735,10 +6859,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -6810,6 +6934,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -6862,10 +6989,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -6937,6 +7064,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -6990,10 +7120,10 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with title - ne
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -7066,6 +7196,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with title - ne
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -7084,10 +7217,10 @@ exports[`Select dataId snapshot -  Should render with dataId prop - dropbox open
       data-test-id="customDataId"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="customDataId_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="customDataId_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -7161,6 +7294,9 @@ exports[`Select dataId snapshot -  Should render with dataId prop - dropbox open
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -7210,10 +7346,10 @@ exports[`Select dataId snapshot -  Should render with dataId prop - dropbox open
                   class="search medium"
                 >
                   <div
-                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-                    data-id="customDataId_search"
+                    class="container effect    flex rowdir"
+                    data-id="containerComponent"
                     data-selector-id="textBoxIcon"
-                    data-test-id="customDataId_search"
+                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -7249,6 +7385,9 @@ exports[`Select dataId snapshot -  Should render with dataId prop - dropbox open
                         data-test-id="containerComponent"
                       />
                     </div>
+                    <div
+                      class="line borderColor_default "
+                    />
                   </div>
                 </div>
               </div>
@@ -7515,11 +7654,10 @@ exports[`Select dataId snapshot -  Should render with dataId prop - isDisabled a
       data-test-id="customDataId_disabled"
     >
       <div
-        class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
-        data-id="customDataId_textBox"
+        class="container disabled    flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="customDataId_textBox"
-        data-title=""
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -7592,6 +7730,9 @@ exports[`Select dataId snapshot -  Should render with dataId prop - isDisabled a
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -7610,10 +7751,10 @@ exports[`Select dataId snapshot -  Should render with dataId prop - isReadOnly a
       data-test-id="customDataId_readOnly"
     >
       <div
-        class="varClass customContainer  border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
-        data-id="customDataId_textBox"
+        class="container readonly    flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="customDataId_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -7685,31 +7826,9 @@ exports[`Select dataId snapshot -  Should render with dataId prop - isReadOnly a
             </div>
           </div>
         </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Select dataId snapshot -  Should render with renderCustomSelectedValue 1`] = `
-<DocumentFragment>
-  <div
-    class="container box_medium   "
-    data-selector-id="select"
-  >
-    <div
-      class=""
-      data-id="selectComponent"
-      data-test-id="selectComponent"
-    >
-      <div
-        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
-        data-selector-id="container"
-        data-title=""
-      >
-        <div>
-           Select Custom Option 2
-        </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -7728,10 +7847,10 @@ exports[`Select snapshot -  Should render with children 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -7813,6 +7932,9 @@ exports[`Select snapshot -  Should render with children 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -7831,10 +7953,10 @@ exports[`Select snapshot -  Should render with children and dropdown open 1`] =
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -7916,6 +8038,9 @@ exports[`Select snapshot -  Should render with children and dropdown open 1`] =
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -7990,10 +8115,10 @@ exports[`Select snapshot -  Should render with className prop 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -8065,6 +8190,9 @@ exports[`Select snapshot -  Should render with className prop 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -8083,10 +8211,10 @@ exports[`Select snapshot -  Should render with customProps 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -8161,6 +8289,9 @@ exports[`Select snapshot -  Should render with customProps 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -8210,10 +8341,10 @@ exports[`Select snapshot -  Should render with customProps 1`] = `
                   class="search medium"
                 >
                   <div
-                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-                    data-id="selectComponent_search"
+                    class="container effect    flex rowdir"
+                    data-id="containerComponent"
                     data-selector-id="textBoxIcon"
-                    data-test-id="selectComponent_search"
+                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -8250,6 +8381,9 @@ exports[`Select snapshot -  Should render with customProps 1`] = `
                         data-test-id="containerComponent"
                       />
                     </div>
+                    <div
+                      class="line borderColor_default "
+                    />
                   </div>
                 </div>
               </div>
@@ -8429,10 +8563,10 @@ exports[`Select snapshot -  Should render with dataSelectorId prop 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -8504,6 +8638,9 @@ exports[`Select snapshot -  Should render with dataSelectorId prop 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -8522,10 +8659,10 @@ exports[`Select snapshot -  Should render with dropBoxSize as large 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -8597,6 +8734,9 @@ exports[`Select snapshot -  Should render with dropBoxSize as large 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -8646,10 +8786,10 @@ exports[`Select snapshot -  Should render with dropBoxSize as large 1`] = `
                   class="search medium"
                 >
                   <div
-                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-                    data-id="selectComponent_search"
+                    class="container effect    flex rowdir"
+                    data-id="containerComponent"
                     data-selector-id="textBoxIcon"
-                    data-test-id="selectComponent_search"
+                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -8685,6 +8825,9 @@ exports[`Select snapshot -  Should render with dropBoxSize as large 1`] = `
                         data-test-id="containerComponent"
                       />
                     </div>
+                    <div
+                      class="line borderColor_default "
+                    />
                   </div>
                 </div>
               </div>
@@ -8723,10 +8866,10 @@ exports[`Select snapshot -  Should render with dropBoxSize as medium 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -8798,6 +8941,9 @@ exports[`Select snapshot -  Should render with dropBoxSize as medium 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -8847,10 +8993,10 @@ exports[`Select snapshot -  Should render with dropBoxSize as medium 1`] = `
                   class="search medium"
                 >
                   <div
-                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-                    data-id="selectComponent_search"
+                    class="container effect    flex rowdir"
+                    data-id="containerComponent"
                     data-selector-id="textBoxIcon"
-                    data-test-id="selectComponent_search"
+                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -8886,6 +9032,9 @@ exports[`Select snapshot -  Should render with dropBoxSize as medium 1`] = `
                         data-test-id="containerComponent"
                       />
                     </div>
+                    <div
+                      class="line borderColor_default "
+                    />
                   </div>
                 </div>
               </div>
@@ -8924,10 +9073,10 @@ exports[`Select snapshot -  Should render with dropBoxSize as small 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -8999,6 +9148,9 @@ exports[`Select snapshot -  Should render with dropBoxSize as small 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -9048,10 +9200,10 @@ exports[`Select snapshot -  Should render with dropBoxSize as small 1`] = `
                   class="search medium"
                 >
                   <div
-                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-                    data-id="selectComponent_search"
+                    class="container effect    flex rowdir"
+                    data-id="containerComponent"
                     data-selector-id="textBoxIcon"
-                    data-test-id="selectComponent_search"
+                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -9087,6 +9239,9 @@ exports[`Select snapshot -  Should render with dropBoxSize as small 1`] = `
                         data-test-id="containerComponent"
                       />
                     </div>
+                    <div
+                      class="line borderColor_default "
+                    />
                   </div>
                 </div>
               </div>
@@ -9125,10 +9280,10 @@ exports[`Select snapshot -  Should render with getChildren 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -9200,6 +9355,9 @@ exports[`Select snapshot -  Should render with getChildren 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -9256,10 +9414,10 @@ exports[`Select snapshot -  Should render with getFooter 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -9331,6 +9489,9 @@ exports[`Select snapshot -  Should render with getFooter 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -9415,10 +9576,10 @@ exports[`Select snapshot -  Should render with iconOnHover as true 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -9490,6 +9651,9 @@ exports[`Select snapshot -  Should render with iconOnHover as true 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -9508,11 +9672,10 @@ exports[`Select snapshot -  Should render with iconOnHover as true and isDisable
       data-test-id="selectComponent_disabled"
     >
       <div
-        class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container disabled    flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
-        data-title=""
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -9585,6 +9748,9 @@ exports[`Select snapshot -  Should render with iconOnHover as true and isDisable
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -9603,10 +9769,10 @@ exports[`Select snapshot -  Should render with iconOnHover as true and isReadOnl
       data-test-id="selectComponent_readOnly"
     >
       <div
-        class="varClass customContainer  border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container readonly    flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -9678,6 +9844,9 @@ exports[`Select snapshot -  Should render with iconOnHover as true and isReadOnl
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -9696,10 +9865,10 @@ exports[`Select snapshot -  Should render with isLoading 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -9771,6 +9940,9 @@ exports[`Select snapshot -  Should render with isLoading 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
     <div
@@ -9866,10 +10038,10 @@ exports[`Select snapshot -  Should render with isParentBased as false 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -9941,6 +10113,9 @@ exports[`Select snapshot -  Should render with isParentBased as false 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -9993,10 +10168,10 @@ exports[`Select snapshot -  Should render with size as medium 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -10068,6 +10243,9 @@ exports[`Select snapshot -  Should render with size as medium 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -10086,10 +10264,10 @@ exports[`Select snapshot -  Should render with size as small 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -10161,6 +10339,9 @@ exports[`Select snapshot -  Should render with size as small 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>
@@ -10179,10 +10360,10 @@ exports[`Select snapshot -  Should render with title prop 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-        data-id="selectComponent_textBox"
+        class="container effect  input  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="selectComponent_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -10255,6 +10436,9 @@ exports[`Select snapshot -  Should render with title prop 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>