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

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

@@ -3,10 +3,10 @@
 exports[`TextBoxIcon component Should be render children 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -50,9 +50,6 @@ exports[`TextBoxIcon component Should be render children 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -60,10 +57,10 @@ exports[`TextBoxIcon component Should be render children 1`] = `
 exports[`TextBoxIcon component Should be render htmlId  1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -95,9 +92,6 @@ exports[`TextBoxIcon component Should be render htmlId  1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -105,10 +99,10 @@ exports[`TextBoxIcon component Should be render htmlId  1`] = `
 exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHover, isDisabled is false  1`] = `
 <DocumentFragment>
   <div
-    class="container effect   iconOnHoverStyle flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container  iconOnHoverStyle flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -139,9 +133,6 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -149,10 +140,11 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
 exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHover, isDisabled is true  1`] = `
 <DocumentFragment>
   <div
-    class="container disabled   iconOnHoverReadonly flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container  iconOnHoverReadonly flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
+    data-title=""
   >
     <div
       class="grow basis shrinkOff"
@@ -185,9 +177,6 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -195,10 +184,10 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
 exports[`TextBoxIcon component Should be render iconRotated is true 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -242,9 +231,6 @@ exports[`TextBoxIcon component Should be render iconRotated is true 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -252,10 +238,10 @@ exports[`TextBoxIcon component Should be render iconRotated is true 1`] = `
 exports[`TextBoxIcon component Should be render id 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -287,9 +273,6 @@ exports[`TextBoxIcon component Should be render id 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -297,10 +280,10 @@ exports[`TextBoxIcon component Should be render id 1`] = `
 exports[`TextBoxIcon component Should be render isClickable is true 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -331,9 +314,6 @@ exports[`TextBoxIcon component Should be render isClickable is true 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -341,10 +321,11 @@ exports[`TextBoxIcon component Should be render isClickable is true 1`] = `
 exports[`TextBoxIcon component Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class="container disabled    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
+    data-title=""
   >
     <div
       class="grow basis shrinkOff"
@@ -376,9 +357,6 @@ exports[`TextBoxIcon component Should be render isDisabled is true 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -386,10 +364,10 @@ exports[`TextBoxIcon component Should be render isDisabled is true 1`] = `
 exports[`TextBoxIcon component Should be render isFocus is true   1`] = `
 <DocumentFragment>
   <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="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -420,9 +398,6 @@ exports[`TextBoxIcon component Should be render isFocus is true   1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -430,10 +405,10 @@ exports[`TextBoxIcon component Should be render isFocus is true   1`] = `
 exports[`TextBoxIcon component Should be render isReadOnly is true , needEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="container readonly    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -465,9 +440,6 @@ exports[`TextBoxIcon component Should be render isReadOnly is true , needEffect
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -475,10 +447,10 @@ exports[`TextBoxIcon component Should be render isReadOnly is true , needEffect
 exports[`TextBoxIcon component Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -510,9 +482,6 @@ exports[`TextBoxIcon component Should be render isReadOnly is true 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -520,10 +489,10 @@ exports[`TextBoxIcon component Should be render isReadOnly is true 1`] = `
 exports[`TextBoxIcon component Should be render name 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -555,9 +524,6 @@ exports[`TextBoxIcon component Should be render name 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -565,10 +531,10 @@ exports[`TextBoxIcon component Should be render name 1`] = `
 exports[`TextBoxIcon component Should be render needBorder is false 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer   effect     container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -606,10 +572,10 @@ exports[`TextBoxIcon component Should be render needBorder is false 1`] = `
 exports[`TextBoxIcon component Should be render needEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="container readonly    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -641,9 +607,6 @@ exports[`TextBoxIcon component Should be render needEffect is false 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -651,10 +614,10 @@ exports[`TextBoxIcon component Should be render needEffect is false 1`] = `
 exports[`TextBoxIcon component Should be render needReadOnlyStyle is false 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -685,9 +648,6 @@ exports[`TextBoxIcon component Should be render needReadOnlyStyle is false 1`] =
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -695,10 +655,10 @@ exports[`TextBoxIcon component Should be render needReadOnlyStyle is false 1`] =
 exports[`TextBoxIcon component Should be render placeholder 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -730,9 +690,6 @@ exports[`TextBoxIcon component Should be render placeholder 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -740,10 +697,10 @@ exports[`TextBoxIcon component Should be render placeholder 1`] = `
 exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -799,9 +756,6 @@ exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
         </button>
       </div>
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -809,10 +763,10 @@ exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
 exports[`TextBoxIcon component Should be render title 1`] = `
 <DocumentFragment>
   <div
-    class="container disabled    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
     data-title="TextBoxIconTitle"
   >
     <div
@@ -845,9 +799,6 @@ exports[`TextBoxIcon component Should be render title 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -855,10 +806,10 @@ exports[`TextBoxIcon component Should be render title 1`] = `
 exports[`TextBoxIcon component Should be render value is number 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -889,9 +840,6 @@ exports[`TextBoxIcon component Should be render value is number 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -899,10 +847,10 @@ exports[`TextBoxIcon component Should be render value is number 1`] = `
 exports[`TextBoxIcon component Should be render value is string and length greater than 1 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -958,9 +906,6 @@ exports[`TextBoxIcon component Should be render value is string and length great
         </button>
       </div>
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -968,10 +913,10 @@ exports[`TextBoxIcon component Should be render value is string and length great
 exports[`TextBoxIcon component Should be render value is string and length less than 1 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1002,9 +947,6 @@ exports[`TextBoxIcon component Should be render value is string and length less
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1012,10 +954,10 @@ exports[`TextBoxIcon component Should be render value is string and length less
 exports[`TextBoxIcon component Should be render with the basic set of default props 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1046,9 +988,6 @@ exports[`TextBoxIcon component Should be render with the basic set of default pr
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1056,10 +995,10 @@ exports[`TextBoxIcon component Should be render with the basic set of default pr
 exports[`TextBoxIcon component Should render Varient - default 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1090,9 +1029,6 @@ exports[`TextBoxIcon component Should render Varient - default 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1100,10 +1036,10 @@ exports[`TextBoxIcon component Should render Varient - default 1`] = `
 exports[`TextBoxIcon component Should render Varient - primary 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1134,9 +1070,6 @@ exports[`TextBoxIcon component Should render Varient - primary 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1144,10 +1077,10 @@ exports[`TextBoxIcon component Should render Varient - primary 1`] = `
 exports[`TextBoxIcon component Should render Varient - secondary 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1178,9 +1111,6 @@ exports[`TextBoxIcon component Should render Varient - secondary 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1188,10 +1118,10 @@ exports[`TextBoxIcon component Should render Varient - secondary 1`] = `
 exports[`TextBoxIcon component Should render borderColor - default 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1222,9 +1152,6 @@ exports[`TextBoxIcon component Should render borderColor - default 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1232,10 +1159,10 @@ exports[`TextBoxIcon component Should render borderColor - default 1`] = `
 exports[`TextBoxIcon component Should render borderColor - error 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_error hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1266,9 +1193,6 @@ exports[`TextBoxIcon component Should render borderColor - error 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_error "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1276,10 +1200,10 @@ exports[`TextBoxIcon component Should render borderColor - error 1`] = `
 exports[`TextBoxIcon component Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_transparent hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1310,9 +1234,6 @@ exports[`TextBoxIcon component Should render borderColor - transparent 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_transparent "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1320,10 +1241,10 @@ exports[`TextBoxIcon component Should render borderColor - transparent 1`] = `
 exports[`TextBoxIcon component Should render size  - medium 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1354,9 +1275,6 @@ exports[`TextBoxIcon component Should render size  - medium 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1364,10 +1282,10 @@ exports[`TextBoxIcon component Should render size  - medium 1`] = `
 exports[`TextBoxIcon component Should render size  - small 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1398,9 +1316,6 @@ exports[`TextBoxIcon component Should render size  - small 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1408,10 +1323,10 @@ exports[`TextBoxIcon component Should render size  - small 1`] = `
 exports[`TextBoxIcon component Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1442,9 +1357,6 @@ exports[`TextBoxIcon component Should render size  - xmedium 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1452,10 +1364,10 @@ exports[`TextBoxIcon component Should render size  - xmedium 1`] = `
 exports[`TextBoxIcon component Should render size  - xsmall 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1486,9 +1398,6 @@ exports[`TextBoxIcon component Should render size  - xsmall 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1496,10 +1405,10 @@ exports[`TextBoxIcon component Should render size  - xsmall 1`] = `
 exports[`TextBoxIcon component Should render type  - number 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1530,9 +1439,6 @@ exports[`TextBoxIcon component Should render type  - number 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1540,10 +1446,10 @@ exports[`TextBoxIcon component Should render type  - number 1`] = `
 exports[`TextBoxIcon component Should render type  - password 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1574,9 +1480,6 @@ exports[`TextBoxIcon component Should render type  - password 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1584,10 +1487,10 @@ exports[`TextBoxIcon component Should render type  - password 1`] = `
 exports[`TextBoxIcon component Should render type  - text 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1618,9 +1521,6 @@ exports[`TextBoxIcon component Should render type  - text 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1628,10 +1528,10 @@ exports[`TextBoxIcon component Should render type  - text 1`] = `
 exports[`TextBoxIcon component rendering the Custom Props 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1663,9 +1563,6 @@ exports[`TextBoxIcon component rendering the Custom Props 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1673,10 +1570,10 @@ exports[`TextBoxIcon component rendering the Custom Props 1`] = `
 exports[`TextBoxIcon component rendering the Custom class 1`] = `
 <DocumentFragment>
   <div
-    class="container effect  customTBoxWrapTextBoxIcon  flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container customTBoxWrapTextBoxIcon  flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1707,9 +1604,6 @@ exports[`TextBoxIcon component rendering the Custom class 1`] = `
         data-test-id="containerComponent"
       />
     </div>
-    <div
-      class="line borderColor_default customTBoxLineTextBox"
-    />
   </div>
 </DocumentFragment>
 `;
@@ -1717,10 +1611,10 @@ exports[`TextBoxIcon component rendering the Custom class 1`] = `
 exports[`TextBoxIcon component rendering the i18n value 1`] = `
 <DocumentFragment>
   <div
-    class="container effect    flex rowdir"
-    data-id="containerComponent"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    data-id="textBoxIcon"
     data-selector-id="textBoxIcon"
-    data-test-id="containerComponent"
+    data-test-id="textBoxIcon"
   >
     <div
       class="grow basis shrinkOff"
@@ -1776,9 +1670,6 @@ exports[`TextBoxIcon component rendering the i18n value 1`] = `
         </button>
       </div>
     </div>
-    <div
-      class="line borderColor_default "
-    />
   </div>
 </DocumentFragment>
 `;