@zohodesk/components 1.4.21 → 1.4.23

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

@@ -12,10 +12,8 @@ exports[`Select - Should close the dropdown when clicking outside 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -89,9 +87,6 @@ exports[`Select - Should close the dropdown when clicking outside 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -110,10 +105,8 @@ exports[`Select - Should highlight the next list-items, when arrow keys pressed
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -187,9 +180,6 @@ exports[`Select - Should highlight the next list-items, when arrow keys pressed
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -402,10 +392,9 @@ exports[`Select - Should not open the dropdown when disabled 1`] = `
       data-test-id="selectComponent_disabled"
     >
       <div
-        class="container disabled    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-title=""
       >
         <div
           class="grow basis shrinkOff"
@@ -480,9 +469,6 @@ exports[`Select - Should not open the dropdown when disabled 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -501,10 +487,8 @@ exports[`Select - Should not open the dropdown when readonly 1`] = `
       data-test-id="selectComponent_readOnly"
     >
       <div
-        class="container readonly    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -578,9 +562,6 @@ exports[`Select - Should not open the dropdown when readonly 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -599,10 +580,8 @@ exports[`Select - Should open the dropdown, when click on the input 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -674,9 +653,6 @@ exports[`Select - Should open the dropdown, when click on the input 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -751,10 +727,8 @@ exports[`Select - Should render all the options when search value is cleared 1`]
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -828,9 +802,6 @@ exports[`Select - Should render all the options when search value is cleared 1`]
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -880,10 +851,8 @@ exports[`Select - Should render all the options when search value is cleared 1`]
                   class="search medium"
                 >
                   <div
-                    class="container effect effectFocused   flex rowdir"
-                    data-id="containerComponent"
+                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -919,9 +888,6 @@ 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>
@@ -1098,10 +1064,8 @@ exports[`Select - Should render given the options 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -1175,9 +1139,6 @@ exports[`Select - Should render given the options 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -1390,10 +1351,8 @@ exports[`Select - Should render the Select component 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -1465,9 +1424,6 @@ exports[`Select - Should render the Select component 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -1486,10 +1442,8 @@ exports[`Select - Should render the default selected value 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -1563,9 +1517,6 @@ exports[`Select - Should render the default selected value 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -1584,10 +1535,8 @@ exports[`Select - Should render the given selected value 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -1661,9 +1610,6 @@ exports[`Select - Should render the given selected value 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -1682,10 +1628,8 @@ exports[`Select - Should render the only options matching search value 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -1759,9 +1703,6 @@ exports[`Select - Should render the only options matching search value 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -1811,10 +1752,8 @@ exports[`Select - Should render the only options matching search value 1`] = `
                   class="search medium"
                 >
                   <div
-                    class="container effect effectFocused   flex rowdir"
-                    data-id="containerComponent"
+                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -1850,9 +1789,6 @@ exports[`Select - Should render the only options matching search value 1`] = `
                         data-test-id="containerComponent"
                       />
                     </div>
-                    <div
-                      class="line borderColor_default "
-                    />
                   </div>
                 </div>
               </div>
@@ -1938,10 +1874,8 @@ exports[`Select - Should render the only options matching search value even with
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -2015,9 +1949,6 @@ exports[`Select - Should render the only options matching search value even with
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -2067,10 +1998,8 @@ exports[`Select - Should render the only options matching search value even with
                   class="search medium"
                 >
                   <div
-                    class="container effect effectFocused   flex rowdir"
-                    data-id="containerComponent"
+                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -2131,9 +2060,6 @@ exports[`Select - Should render the only options matching search value even with
                         </button>
                       </div>
                     </div>
-                    <div
-                      class="line borderColor_default "
-                    />
                   </div>
                 </div>
               </div>
@@ -2219,10 +2145,8 @@ exports[`Select - Should render the placeholder when there is no default value 1
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -2296,9 +2220,6 @@ exports[`Select - Should render the placeholder when there is no default value 1
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -2317,10 +2238,8 @@ exports[`Select - Should show the custom empty state using getCustomEmptyState p
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -2394,9 +2313,6 @@ exports[`Select - Should show the custom empty state using getCustomEmptyState p
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -2446,10 +2362,8 @@ exports[`Select - Should show the custom empty state using getCustomEmptyState p
                   class="search medium"
                 >
                   <div
-                    class="container effect effectFocused   flex rowdir"
-                    data-id="containerComponent"
+                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -2485,9 +2399,6 @@ exports[`Select - Should show the custom empty state using getCustomEmptyState p
                         data-test-id="containerComponent"
                       />
                     </div>
-                    <div
-                      class="line borderColor_default "
-                    />
                   </div>
                 </div>
               </div>
@@ -2522,10 +2433,8 @@ exports[`Select - Should show the empty message when open the dropdown with no o
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -2597,9 +2506,6 @@ 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
@@ -2676,10 +2582,8 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -2753,9 +2657,6 @@ exports[`Select - Should trigger getNextOptions, when scroll to the end of the d
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -3276,10 +3177,8 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -3353,9 +3252,6 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -3405,10 +3301,8 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
                   class="search medium"
                 >
                   <div
-                    class="container effect effectFocused   flex rowdir"
-                    data-id="containerComponent"
+                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -3444,9 +3338,6 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
                         data-test-id="containerComponent"
                       />
                     </div>
-                    <div
-                      class="line borderColor_default "
-                    />
                   </div>
                 </div>
               </div>
@@ -3672,10 +3563,8 @@ exports[`Select - Should trigger onAddNewOption, when click on the custom search
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -3749,9 +3638,6 @@ exports[`Select - Should trigger onAddNewOption, when click on the custom search
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -3801,10 +3687,8 @@ exports[`Select - Should trigger onAddNewOption, when click on the custom search
                   class="search medium"
                 >
                   <div
-                    class="container effect effectFocused   flex rowdir"
-                    data-id="containerComponent"
+                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -3840,9 +3724,6 @@ exports[`Select - Should trigger onAddNewOption, when click on the custom search
                         data-test-id="containerComponent"
                       />
                     </div>
-                    <div
-                      class="line borderColor_default "
-                    />
                   </div>
                 </div>
               </div>
@@ -3877,10 +3758,8 @@ exports[`Select - Should update the value when select the option 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -3954,9 +3833,6 @@ exports[`Select - Should update the value when select the option 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -4169,10 +4045,8 @@ exports[`Select - Should update the value when select the option 2`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -4246,9 +4120,6 @@ exports[`Select - Should update the value when select the option 2`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -4267,10 +4138,8 @@ exports[`Select - Should update the value, when select the option using keyboard
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -4344,9 +4213,6 @@ exports[`Select - Should update the value, when select the option using keyboard
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -4402,10 +4268,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with aria prope
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -4480,9 +4344,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with aria prope
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -4534,10 +4395,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with autoComple
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -4608,9 +4467,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with autoComple
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -4663,10 +4519,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with borderColo
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -4738,9 +4592,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with borderColo
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -4793,10 +4644,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with borderColo
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_transparent hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -4868,9 +4717,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with borderColo
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_transparent "
-        />
       </div>
     </div>
   </div>
@@ -4924,10 +4770,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with customProp
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -5000,9 +4844,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with customProp
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -5056,10 +4897,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with htmlId - n
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -5132,9 +4971,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with htmlId - n
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -5188,10 +5024,9 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isDisabled
       data-test-id="selectComponent_disabled"
     >
       <div
-        class="container disabled    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-title=""
       >
         <div
           class="grow basis shrinkOff"
@@ -5264,9 +5099,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isDisabled
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -5375,10 +5207,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isPopupOpe
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -5450,9 +5280,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isPopupOpe
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -5561,10 +5388,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isReadOnly
       data-test-id="selectComponent_readOnly"
     >
       <div
-        class="container readonly    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -5636,9 +5461,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isReadOnly
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -5692,10 +5514,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with maxLength
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -5767,9 +5587,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with maxLength
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -5822,10 +5639,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with needBorder
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer   effect     container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -5949,10 +5764,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with placeHolde
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -6024,9 +5837,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with placeHolde
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -6079,10 +5889,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -6154,9 +5962,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -6209,10 +6014,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -6284,9 +6087,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -6339,10 +6139,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -6414,9 +6212,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -6469,10 +6264,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -6544,9 +6337,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -6599,10 +6389,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -6674,9 +6462,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -6729,10 +6514,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -6804,9 +6587,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -6859,10 +6639,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -6934,9 +6712,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -6989,10 +6764,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -7064,9 +6837,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -7120,10 +6890,8 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with title - ne
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -7196,9 +6964,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with title - ne
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -7217,10 +6982,8 @@ exports[`Select dataId snapshot -  Should render with dataId prop - dropbox open
       data-test-id="customDataId"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -7294,9 +7057,6 @@ exports[`Select dataId snapshot -  Should render with dataId prop - dropbox open
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -7346,10 +7106,8 @@ exports[`Select dataId snapshot -  Should render with dataId prop - dropbox open
                   class="search medium"
                 >
                   <div
-                    class="container effect    flex rowdir"
-                    data-id="containerComponent"
+                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -7385,9 +7143,6 @@ exports[`Select dataId snapshot -  Should render with dataId prop - dropbox open
                         data-test-id="containerComponent"
                       />
                     </div>
-                    <div
-                      class="line borderColor_default "
-                    />
                   </div>
                 </div>
               </div>
@@ -7654,10 +7409,9 @@ exports[`Select dataId snapshot -  Should render with dataId prop - isDisabled a
       data-test-id="customDataId_disabled"
     >
       <div
-        class="container disabled    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-title=""
       >
         <div
           class="grow basis shrinkOff"
@@ -7730,9 +7484,6 @@ exports[`Select dataId snapshot -  Should render with dataId prop - isDisabled a
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -7751,10 +7502,8 @@ exports[`Select dataId snapshot -  Should render with dataId prop - isReadOnly a
       data-test-id="customDataId_readOnly"
     >
       <div
-        class="container readonly    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -7826,9 +7575,39 @@ exports[`Select dataId snapshot -  Should render with dataId prop - isReadOnly a
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
+      </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
+        aria-controls="1"
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-owns="1"
+        aria-readonly="false"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+        role="button"
+        tabindex="0"
+      >
+        <div>
+           Select Custom Option 2
+        </div>
       </div>
     </div>
   </div>
@@ -7847,10 +7626,8 @@ exports[`Select snapshot -  Should render with children 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -7932,9 +7709,6 @@ exports[`Select snapshot -  Should render with children 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -7953,10 +7727,8 @@ exports[`Select snapshot -  Should render with children and dropdown open 1`] =
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -8038,9 +7810,6 @@ exports[`Select snapshot -  Should render with children and dropdown open 1`] =
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -8115,10 +7884,8 @@ exports[`Select snapshot -  Should render with className prop 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -8190,9 +7957,6 @@ exports[`Select snapshot -  Should render with className prop 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -8211,10 +7975,8 @@ exports[`Select snapshot -  Should render with customProps 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -8289,9 +8051,6 @@ exports[`Select snapshot -  Should render with customProps 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -8341,10 +8100,8 @@ exports[`Select snapshot -  Should render with customProps 1`] = `
                   class="search medium"
                 >
                   <div
-                    class="container effect    flex rowdir"
-                    data-id="containerComponent"
+                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -8381,9 +8138,6 @@ exports[`Select snapshot -  Should render with customProps 1`] = `
                         data-test-id="containerComponent"
                       />
                     </div>
-                    <div
-                      class="line borderColor_default "
-                    />
                   </div>
                 </div>
               </div>
@@ -8563,10 +8317,8 @@ exports[`Select snapshot -  Should render with dataSelectorId prop 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -8638,9 +8390,6 @@ exports[`Select snapshot -  Should render with dataSelectorId prop 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -8659,10 +8408,8 @@ exports[`Select snapshot -  Should render with dropBoxSize as large 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -8734,9 +8481,6 @@ exports[`Select snapshot -  Should render with dropBoxSize as large 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -8786,10 +8530,8 @@ exports[`Select snapshot -  Should render with dropBoxSize as large 1`] = `
                   class="search medium"
                 >
                   <div
-                    class="container effect    flex rowdir"
-                    data-id="containerComponent"
+                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -8825,9 +8567,6 @@ exports[`Select snapshot -  Should render with dropBoxSize as large 1`] = `
                         data-test-id="containerComponent"
                       />
                     </div>
-                    <div
-                      class="line borderColor_default "
-                    />
                   </div>
                 </div>
               </div>
@@ -8866,10 +8605,8 @@ exports[`Select snapshot -  Should render with dropBoxSize as medium 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -8941,9 +8678,6 @@ exports[`Select snapshot -  Should render with dropBoxSize as medium 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -8993,10 +8727,8 @@ exports[`Select snapshot -  Should render with dropBoxSize as medium 1`] = `
                   class="search medium"
                 >
                   <div
-                    class="container effect    flex rowdir"
-                    data-id="containerComponent"
+                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -9032,9 +8764,6 @@ exports[`Select snapshot -  Should render with dropBoxSize as medium 1`] = `
                         data-test-id="containerComponent"
                       />
                     </div>
-                    <div
-                      class="line borderColor_default "
-                    />
                   </div>
                 </div>
               </div>
@@ -9073,10 +8802,8 @@ exports[`Select snapshot -  Should render with dropBoxSize as small 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -9148,9 +8875,6 @@ exports[`Select snapshot -  Should render with dropBoxSize as small 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -9200,10 +8924,8 @@ exports[`Select snapshot -  Should render with dropBoxSize as small 1`] = `
                   class="search medium"
                 >
                   <div
-                    class="container effect    flex rowdir"
-                    data-id="containerComponent"
+                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -9239,9 +8961,6 @@ exports[`Select snapshot -  Should render with dropBoxSize as small 1`] = `
                         data-test-id="containerComponent"
                       />
                     </div>
-                    <div
-                      class="line borderColor_default "
-                    />
                   </div>
                 </div>
               </div>
@@ -9280,10 +8999,8 @@ exports[`Select snapshot -  Should render with getChildren 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -9355,9 +9072,6 @@ exports[`Select snapshot -  Should render with getChildren 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -9414,10 +9128,8 @@ exports[`Select snapshot -  Should render with getFooter 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -9489,9 +9201,6 @@ exports[`Select snapshot -  Should render with getFooter 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -9576,10 +9285,8 @@ exports[`Select snapshot -  Should render with iconOnHover as true 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -9651,9 +9358,6 @@ exports[`Select snapshot -  Should render with iconOnHover as true 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -9672,10 +9376,9 @@ exports[`Select snapshot -  Should render with iconOnHover as true and isDisable
       data-test-id="selectComponent_disabled"
     >
       <div
-        class="container disabled    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-title=""
       >
         <div
           class="grow basis shrinkOff"
@@ -9748,9 +9451,6 @@ exports[`Select snapshot -  Should render with iconOnHover as true and isDisable
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -9769,10 +9469,8 @@ exports[`Select snapshot -  Should render with iconOnHover as true and isReadOnl
       data-test-id="selectComponent_readOnly"
     >
       <div
-        class="container readonly    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -9844,9 +9542,6 @@ exports[`Select snapshot -  Should render with iconOnHover as true and isReadOnl
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -9865,10 +9560,8 @@ exports[`Select snapshot -  Should render with isLoading 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect effectFocused input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -9940,9 +9633,6 @@ exports[`Select snapshot -  Should render with isLoading 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -10038,10 +9728,8 @@ exports[`Select snapshot -  Should render with isParentBased as false 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -10113,9 +9801,6 @@ exports[`Select snapshot -  Should render with isParentBased as false 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -10168,10 +9853,8 @@ exports[`Select snapshot -  Should render with size as medium 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -10243,9 +9926,6 @@ exports[`Select snapshot -  Should render with size as medium 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -10264,10 +9944,8 @@ exports[`Select snapshot -  Should render with size as small 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -10339,9 +10017,6 @@ exports[`Select snapshot -  Should render with size as small 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -10360,10 +10035,8 @@ exports[`Select snapshot -  Should render with title prop 1`] = `
       data-test-id="selectComponent"
     >
       <div
-        class="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -10436,9 +10109,6 @@ exports[`Select snapshot -  Should render with title prop 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>