@zohodesk/components 1.0.0-temp-220.11 → 1.0.0-temp-230

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="container effect  input  flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+        data-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -89,9 +89,6 @@ exports[`Select - Should close the dropdown when clicking outside 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -110,10 +107,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -187,9 +184,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 +396,11 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
+        data-title=""
       >
         <div
           class="grow basis shrinkOff"
@@ -480,9 +475,6 @@ exports[`Select - Should not open the dropdown when disabled 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -501,10 +493,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -578,9 +570,6 @@ exports[`Select - Should not open the dropdown when readonly 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -599,10 +588,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -674,9 +663,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 +737,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -828,9 +814,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 +863,10 @@ 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-id="selectComponent_search"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
+                    data-test-id="selectComponent_search"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -919,9 +902,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 +1078,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -1175,9 +1155,6 @@ exports[`Select - Should render given the options 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -1390,10 +1367,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -1465,9 +1442,6 @@ exports[`Select - Should render the Select component 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -1486,10 +1460,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -1563,9 +1537,6 @@ exports[`Select - Should render the default selected value 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -1584,10 +1555,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -1661,9 +1632,6 @@ exports[`Select - Should render the given selected value 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -1671,6 +1639,256 @@ exports[`Select - Should render the given selected value 1`] = `
 `;
 
 exports[`Select - Should render the only options matching search value 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=""
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container input  flex rowdir"
+        data-id="selectComponent_textBox"
+        data-selector-id="textBoxIcon"
+        data-test-id="selectComponent_textBox"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            aria-activedescendant="1"
+            aria-controls="1"
+            aria-expanded="true"
+            aria-haspopup="true"
+            aria-label="click to select options"
+            aria-owns="1"
+            aria-readonly="true"
+            autocomplete="off"
+            class=" pointer container medium  default  effect focus borderColor_default inputDotted "
+            data-id="selectComponent_textBox"
+            data-selector-id="textBoxIcon"
+            data-test-id="selectComponent_textBox"
+            data-title="Option 1"
+            maxlength="250"
+            placeholder=""
+            readonly=""
+            role="Menuitem"
+            type="text"
+            value="Option 1"
+          />
+        </div>
+        <div
+          class="iconContainer  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="icon rotated shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="rightPlaceholder inflex rowdir both"
+                data-id="containerComponent"
+                data-selector-id="container"
+                data-test-id="containerComponent"
+              >
+                <div
+                  aria-hidden="true"
+                  class="arrowIcon flex cover coldir both"
+                  data-id="selectComponent_downIcon"
+                  data-selector-id="container"
+                  data-test-id="selectComponent_downIcon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="zd_font_icons basic icon-down    "
+                    data-id="fontIcon"
+                    data-selector-id="fontIcon"
+                    data-test-id="fontIcon"
+                    style="--zd-iconfont-size: var(--zd_font_size7);"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="main container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="selectComponent_suggestions"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="selectComponent_suggestions"
+      dot-ui-element="dropbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow radius bounce defaultPalette"
+        data-id="selectComponent_suggestions_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="selectComponent_suggestions_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover coldir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="notScroll  shrinkOff"
+                data-id="CardHeader"
+                data-selector-id="cardHeader"
+                data-test-id="CardHeader"
+              >
+                <div
+                  class="search medium"
+                >
+                  <div
+                    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
+                    data-id="selectComponent_search"
+                    data-selector-id="textBoxIcon"
+                    data-test-id="selectComponent_search"
+                  >
+                    <div
+                      class="grow basis shrinkOff"
+                      data-id="boxComponent"
+                      data-selector-id="box"
+                      data-test-id="boxComponent"
+                    >
+                      <input
+                        aria-autocomplete="list"
+                        aria-controls="1"
+                        aria-describedby="2"
+                        autocomplete="off"
+                        class="  container small  default  effect  borderColor_default  "
+                        data-id="selectComponent_search"
+                        data-selector-id="textBoxIcon"
+                        data-test-id="selectComponent_search"
+                        maxlength="250"
+                        placeholder="Search"
+                        type="text"
+                        value="2"
+                      />
+                    </div>
+                    <div
+                      class="iconContainer  shrinkOff"
+                      data-id="boxComponent"
+                      data-selector-id="box"
+                      data-test-id="boxComponent"
+                    >
+                      <div
+                        class="flex cover rowdir"
+                        data-id="containerComponent"
+                        data-selector-id="container"
+                        data-test-id="containerComponent"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="small grow basis shrinkOn scrolly"
+                data-id="CardContent"
+                data-selector-id="cardContent"
+                data-test-id="CardContent"
+              >
+                <div
+                  class="flex coldir"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                  id="1"
+                  role="listbox"
+                  tabindex="0"
+                >
+                  <div
+                    class="listItemContainer shrinkOff"
+                    data-id="selectComponent_Options"
+                    data-selector-id="box"
+                    data-test-id="selectComponent_Options"
+                  >
+                    <li
+                      aria-label="Option 2"
+                      aria-selected="false"
+                      ariaparentrole="listbox"
+                      class="list medium  default defaultHover  mediumwithTick    flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="true"
+                      data-id="Option 2"
+                      data-selector-id="listItem"
+                      data-test-id="Option 2"
+                      data-title="Option 2"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="leftBox grow basis shrinkOff"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        <div
+                          class="titleBox shrinkOff"
+                          data-id="boxComponent"
+                          data-selector-id="box"
+                          data-test-id="boxComponent"
+                        >
+                          <div
+                            class="value basisAuto shrinkOn"
+                            data-id="boxComponent"
+                            data-selector-id="box"
+                            data-test-id="boxComponent"
+                          >
+                            Option 2
+                          </div>
+                        </div>
+                      </div>
+                    </li>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Select - Should render the only options matching search value even with additional spaces before and after 1`] = `
 <DocumentFragment>
   <div
     class="container box_medium   "
@@ -1834,7 +2052,7 @@ exports[`Select - Should render the only options matching search value 1`] = `
                         maxlength="250"
                         placeholder="Search"
                         type="text"
-                        value="2"
+                        value="  2  "
                       />
                     </div>
                     <div
@@ -1848,7 +2066,32 @@ exports[`Select - Should render the only options matching search value 1`] = `
                         data-id="containerComponent"
                         data-selector-id="container"
                         data-test-id="containerComponent"
-                      />
+                      >
+                        <button
+                          class="buttonReset icon shrinkOff"
+                          data-id="selectComponent_search_ClearIcon"
+                          data-selector-id="box"
+                          data-test-id="selectComponent_search_ClearIcon"
+                          data-title="Clear"
+                        >
+                          <div
+                            aria-hidden="true"
+                            class="flex cover coldir both"
+                            data-id="containerComponent"
+                            data-selector-id="container"
+                            data-test-id="containerComponent"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="zd_font_icons basic icon-delete    rtl "
+                              data-id="fontIcon"
+                              data-selector-id="fontIcon"
+                              data-test-id="fontIcon"
+                              style="--zd-iconfont-size: var(--zd_font_size14);"
+                            />
+                          </div>
+                        </button>
+                      </div>
                     </div>
                     <div
                       class="line borderColor_default "
@@ -1938,10 +2181,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -2015,9 +2258,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>
@@ -2036,10 +2276,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -2113,9 +2353,6 @@ exports[`Select - Should show the custom empty state using getCustomEmptyState p
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -2165,10 +2402,10 @@ 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-id="selectComponent_search"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
+                    data-test-id="selectComponent_search"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -2204,9 +2441,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>
@@ -2241,10 +2475,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -2316,9 +2550,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
@@ -2395,10 +2626,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -2472,9 +2703,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
@@ -2995,10 +3223,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -3072,9 +3300,6 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -3124,10 +3349,10 @@ 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-id="selectComponent_search"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
+                    data-test-id="selectComponent_search"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -3163,9 +3388,6 @@ exports[`Select - Should trigger getNextOptions, when search with needLocalSearc
                         data-test-id="containerComponent"
                       />
                     </div>
-                    <div
-                      class="line borderColor_default "
-                    />
                   </div>
                 </div>
               </div>
@@ -3391,10 +3613,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -3468,9 +3690,6 @@ exports[`Select - Should trigger onAddNewOption, when click on the custom search
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -3520,10 +3739,10 @@ 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-id="selectComponent_search"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
+                    data-test-id="selectComponent_search"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -3559,9 +3778,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>
@@ -3596,10 +3812,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -3673,9 +3889,6 @@ exports[`Select - Should update the value when select the option 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -3888,10 +4101,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -3965,9 +4178,6 @@ exports[`Select - Should update the value when select the option 2`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -3986,10 +4196,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -4063,9 +4273,6 @@ exports[`Select - Should update the value, when select the option using keyboard
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -4121,10 +4328,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -4199,9 +4406,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with aria prope
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -4253,10 +4457,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -4327,9 +4531,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with autoComple
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -4382,10 +4583,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -4457,9 +4658,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with borderColo
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -4512,10 +4710,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -4587,9 +4785,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with borderColo
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_transparent "
-        />
       </div>
     </div>
   </div>
@@ -4643,10 +4838,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -4719,9 +4914,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with customProp
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -4775,10 +4967,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -4851,9 +5043,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with htmlId - n
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -4907,10 +5096,11 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
+        data-title=""
       >
         <div
           class="grow basis shrinkOff"
@@ -4983,9 +5173,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isDisabled
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -5094,10 +5281,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -5169,9 +5356,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isPopupOpe
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -5280,10 +5464,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -5355,9 +5539,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with isReadOnly
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -5411,10 +5592,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -5486,9 +5667,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with maxLength
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -5541,10 +5719,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -5668,10 +5846,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -5743,9 +5921,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with placeHolde
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -5798,10 +5973,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -5873,9 +6048,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -5928,10 +6100,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -6003,9 +6175,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -6058,10 +6227,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -6133,9 +6302,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -6188,10 +6354,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -6263,9 +6429,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxSiz
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -6318,10 +6481,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -6393,9 +6556,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -6448,10 +6608,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -6523,9 +6683,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -6578,10 +6735,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -6653,9 +6810,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -6708,10 +6862,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -6783,9 +6937,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with textBoxVar
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -6839,10 +6990,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -6915,9 +7066,6 @@ exports[`Select box needSelectDownIcon snapshot -  Should render with title - ne
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -6936,10 +7084,10 @@ 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-id="customDataId_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="customDataId_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -7013,9 +7161,6 @@ exports[`Select dataId snapshot -  Should render with dataId prop - dropbox open
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -7065,10 +7210,10 @@ 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-id="customDataId_search"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
+                    data-test-id="customDataId_search"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -7104,9 +7249,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>
@@ -7373,10 +7515,11 @@ 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-id="customDataId_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="customDataId_textBox"
+        data-title=""
       >
         <div
           class="grow basis shrinkOff"
@@ -7449,9 +7592,6 @@ exports[`Select dataId snapshot -  Should render with dataId prop - isDisabled a
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -7470,10 +7610,10 @@ 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-id="customDataId_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="customDataId_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -7545,9 +7685,31 @@ 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
+        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>
     </div>
   </div>
@@ -7566,10 +7728,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -7651,9 +7813,6 @@ exports[`Select snapshot -  Should render with children 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -7672,10 +7831,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -7757,9 +7916,6 @@ exports[`Select snapshot -  Should render with children and dropdown open 1`] =
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -7834,10 +7990,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -7909,9 +8065,6 @@ exports[`Select snapshot -  Should render with className prop 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -7930,10 +8083,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -8008,9 +8161,6 @@ exports[`Select snapshot -  Should render with customProps 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -8060,10 +8210,10 @@ 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-id="selectComponent_search"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
+                    data-test-id="selectComponent_search"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -8100,9 +8250,6 @@ exports[`Select snapshot -  Should render with customProps 1`] = `
                         data-test-id="containerComponent"
                       />
                     </div>
-                    <div
-                      class="line borderColor_default "
-                    />
                   </div>
                 </div>
               </div>
@@ -8282,10 +8429,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -8357,9 +8504,6 @@ exports[`Select snapshot -  Should render with dataSelectorId prop 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -8378,10 +8522,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -8453,9 +8597,6 @@ exports[`Select snapshot -  Should render with dropBoxSize as large 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -8505,10 +8646,10 @@ 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-id="selectComponent_search"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
+                    data-test-id="selectComponent_search"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -8544,9 +8685,6 @@ exports[`Select snapshot -  Should render with dropBoxSize as large 1`] = `
                         data-test-id="containerComponent"
                       />
                     </div>
-                    <div
-                      class="line borderColor_default "
-                    />
                   </div>
                 </div>
               </div>
@@ -8585,10 +8723,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -8660,9 +8798,6 @@ exports[`Select snapshot -  Should render with dropBoxSize as medium 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -8712,10 +8847,10 @@ 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-id="selectComponent_search"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
+                    data-test-id="selectComponent_search"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -8751,9 +8886,6 @@ exports[`Select snapshot -  Should render with dropBoxSize as medium 1`] = `
                         data-test-id="containerComponent"
                       />
                     </div>
-                    <div
-                      class="line borderColor_default "
-                    />
                   </div>
                 </div>
               </div>
@@ -8792,10 +8924,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -8867,9 +8999,6 @@ exports[`Select snapshot -  Should render with dropBoxSize as small 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -8919,10 +9048,10 @@ 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-id="selectComponent_search"
                     data-selector-id="textBoxIcon"
-                    data-test-id="containerComponent"
+                    data-test-id="selectComponent_search"
                   >
                     <div
                       class="grow basis shrinkOff"
@@ -8958,9 +9087,6 @@ exports[`Select snapshot -  Should render with dropBoxSize as small 1`] = `
                         data-test-id="containerComponent"
                       />
                     </div>
-                    <div
-                      class="line borderColor_default "
-                    />
                   </div>
                 </div>
               </div>
@@ -8999,10 +9125,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -9074,9 +9200,6 @@ exports[`Select snapshot -  Should render with getChildren 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -9133,10 +9256,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -9208,9 +9331,6 @@ exports[`Select snapshot -  Should render with getFooter 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -9295,10 +9415,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -9370,9 +9490,6 @@ exports[`Select snapshot -  Should render with iconOnHover as true 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -9391,10 +9508,11 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
+        data-title=""
       >
         <div
           class="grow basis shrinkOff"
@@ -9467,9 +9585,6 @@ exports[`Select snapshot -  Should render with iconOnHover as true and isDisable
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -9488,10 +9603,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -9563,9 +9678,6 @@ exports[`Select snapshot -  Should render with iconOnHover as true and isReadOnl
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -9584,10 +9696,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -9659,9 +9771,6 @@ exports[`Select snapshot -  Should render with isLoading 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
     <div
@@ -9757,10 +9866,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -9832,9 +9941,6 @@ exports[`Select snapshot -  Should render with isParentBased as false 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -9887,10 +9993,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -9962,9 +10068,6 @@ exports[`Select snapshot -  Should render with size as medium 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -9983,10 +10086,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -10058,9 +10161,6 @@ exports[`Select snapshot -  Should render with size as small 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>
@@ -10079,10 +10179,10 @@ 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-id="selectComponent_textBox"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
+        data-test-id="selectComponent_textBox"
       >
         <div
           class="grow basis shrinkOff"
@@ -10155,9 +10255,6 @@ exports[`Select snapshot -  Should render with title prop 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>