@ebay/skin 15.5.1 → 16.0.0-0

package/src/less/select/stories/cascade.stories.js

@@ -8,8 +8,8 @@ export const RTL = () => `
             <option value="2">Option 2</option>
             <option value="3">Option 3</option>
         </select>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-dropdown"></use>
+        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
 </div>
@@ -22,8 +22,8 @@ export const fontSize = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </span>
 `;
@@ -35,8 +35,8 @@ export const color = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </span>
 `;

package/src/less/select/stories/default.stories.js

@@ -7,8 +7,8 @@ export const defaultSelection = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </span>
 `;
@@ -21,8 +21,8 @@ export const forcedSelection = () => `
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
-   <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-       <use href="#icon-dropdown"></use>
+   <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+       <use href="#icon-chevron-down-12"></use>
    </svg>
 </span>
 `;
@@ -34,8 +34,8 @@ export const disabled = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </span>
 `;
@@ -47,8 +47,8 @@ export const fluid = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </div>
 `;
@@ -61,8 +61,8 @@ export const borderless = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </span>
 `;
@@ -74,8 +74,8 @@ export const large = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </span>
 `;
@@ -87,8 +87,8 @@ export const underline = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </span>
 `;
@@ -100,8 +100,8 @@ export const invalid = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </span>
 `;

package/src/less/select/stories/floating-label.stories.js

@@ -9,8 +9,8 @@ export const defaultLabel = () => `
             <option value="2">Option 2</option>
             <option value="3">Option 3</option>
         </select>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-dropdown"></use>
+        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
 </span>
@@ -26,8 +26,8 @@ export const selectedOption = () => `
             <option value="2">Option 2</option>
             <option value="3">Option 3</option>
         </select>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-dropdown"></use>
+        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
 </span>
@@ -42,8 +42,8 @@ export const errorState = () => `
             <option value="2">Option 2</option>
             <option value="3">Option 3</option>
         </select>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-dropdown"></use>
+        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
 </span>
@@ -58,8 +58,8 @@ export const disabled = () => `
             <option value="2">Option 2 can't pick</option>
             <option value="3">Option 3</option>
         </select>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-dropdown"></use>
+        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
 </span>

package/src/less/split-button/stories/base.stories.js

@@ -8,8 +8,8 @@ export const primaryCollapsed = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -38,8 +38,8 @@ export const primaryExpanded = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" aria-expanded="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -68,8 +68,8 @@ export const secondaryCollapsed = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--secondary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -98,8 +98,8 @@ export const secondaryExpanded = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--secondary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -128,8 +128,8 @@ export const tertiaryCollapsed = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--tertiary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -158,8 +158,8 @@ export const tertiaryExpanded = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--tertiary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -186,8 +186,8 @@ export const fakePrimaryCollapsed = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -214,8 +214,8 @@ export const fakePrimaryExpanded = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" aria-expanded="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -242,8 +242,8 @@ export const fakeSecondaryCollapsed = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--secondary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -270,8 +270,8 @@ export const fakeSecondaryExpanded = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--secondary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -298,8 +298,8 @@ export const fakeTertiaryCollapsed = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--tertiary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -326,8 +326,8 @@ export const fakeTertiaryExpanded = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--tertiary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">

package/src/less/split-button/stories/rtl.stories.js

@@ -10,8 +10,8 @@ export const primaryCollapsed = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
-                <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                    <use href="#icon-dropdown"></use>
+                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
             <div class="menu-button__menu menu-button__menu--reverse">
@@ -42,8 +42,8 @@ export const primaryExpanded = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--primary btn--split-end" aria-haspopup="true" aria-expanded="true" type="button">
-                <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                    <use href="#icon-dropdown"></use>
+                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
             <div class="menu-button__menu menu-button__menu--reverse">
@@ -74,8 +74,8 @@ export const secondaryCollapsed = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--secondary btn--split-end" aria-haspopup="true" type="button">
-                <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                    <use href="#icon-dropdown"></use>
+                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
             <div class="menu-button__menu menu-button__menu--reverse">
@@ -106,8 +106,8 @@ export const secondaryExpanded = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--secondary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-                <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                    <use href="#icon-dropdown"></use>
+                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
             <div class="menu-button__menu menu-button__menu--reverse">
@@ -138,8 +138,8 @@ export const tertiaryCollapsed = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--tertiary btn--split-end" aria-haspopup="true" type="button">
-                <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                    <use href="#icon-dropdown"></use>
+                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
             <div class="menu-button__menu menu-button__menu--reverse">
@@ -170,8 +170,8 @@ export const tertiaryExpanded = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--tertiary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-                <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                    <use href="#icon-dropdown"></use>
+                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
             <div class="menu-button__menu menu-button__menu--reverse">

package/src/less/split-button/stories/size.stories.js

@@ -8,8 +8,8 @@ export const longTextCollapsed = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -38,8 +38,8 @@ export const longTextExpanded = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">

package/src/less/textbox/stories/icon.stories.js

@@ -2,8 +2,8 @@ export default { title: 'Textbox/Icon' };
 
 export const base = () => `
 <span class="textbox">
-    <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-        <use href="#icon-messages"></use>
+    <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <use href="#icon-mail-24"></use>
     </svg>
     <input class="textbox__control" type="text" placeholder="placeholder text" />
 </span>
@@ -12,20 +12,20 @@ export const base = () => `
 export const end = () => `
 <span class="textbox textbox--icon-end">
     <input class="textbox__control" type="text" placeholder="placeholder text" />
-    <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-        <use href="#icon-messages"></use>
+    <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <use href="#icon-mail-24"></use>
     </svg>
 </span>
 `;
 
 export const dual = () => `
 <span class="textbox textbox--icon-end">
-    <svg class="icon icon--search" focusable="false" width="16" height="16" aria-hidden="true">
-        <use href="#icon-search"></use>
+    <svg class="icon icon--search-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <use href="#icon-search-24"></use>
     </svg>
     <input class="textbox__control" type="text" placeholder="placeholder text" />
-    <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-        <use href="#icon-messages"></use>
+    <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <use href="#icon-mail-24"></use>
     </svg>
 </span>
 `;
@@ -34,8 +34,8 @@ export const actionable = () => `
 <span class="textbox textbox--icon-end">
     <input class="textbox__control" type="text" placeholder="placeholder text" />
     <button class="icon-btn" type="button" aria-label="Choose Contact">
-        <svg aria-hidden="true" class="icon icon--messages" focusable="false" width="16" height="16">
-            <use href="#icon-messages"></use>
+        <svg aria-hidden="true" class="icon icon--mail-24" focusable="false" width="16" height="16">
+            <use href="#icon-mail-24"></use>
         </svg>
     </button>
 </span>
@@ -43,13 +43,13 @@ export const actionable = () => `
 
 export const dualActionable = () => `
 <span class="textbox textbox--icon-end">
-    <svg class="icon icon--search" focusable="false" width="16" height="16" aria-hidden="true">
-        <use href="#icon-search"></use>
+    <svg class="icon icon--search-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <use href="#icon-search-24"></use>
     </svg>
     <input class="textbox__control" type="text" placeholder="placeholder text" />
     <button class="icon-btn" type="button" aria-label="Choose Contact">
-        <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-            <use href="#icon-messages"></use>
+        <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+            <use href="#icon-mail-24"></use>
         </svg>
     </button>
 </span>
@@ -59,8 +59,8 @@ export const actionableLarge = () => `
 <span class="textbox textbox--icon-end">
     <input class="textbox__control textbox__control--large" type="text" placeholder="placeholder text" />
     <button class="icon-btn" type="button" aria-label="Choose Contact">
-        <svg aria-hidden="true" class="icon icon--messages" focusable="false" width="16" height="16">
-            <use href="#icon-messages"></use>
+        <svg aria-hidden="true" class="icon icon--mail-24" focusable="false" width="16" height="16">
+            <use href="#icon-mail-24"></use>
         </svg>
     </button>
 </span>
@@ -68,13 +68,13 @@ export const actionableLarge = () => `
 
 export const dualActionableLarge = () => `
 <span class="textbox textbox--icon-end">
-    <svg class="icon icon--search" focusable="false" width="16" height="16" aria-hidden="true">
-        <use href="#icon-search"></use>
+    <svg class="icon icon--search-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <use href="#icon-search-24"></use>
     </svg>
     <input class="textbox__control textbox__control--large" type="text" placeholder="placeholder text" />
     <button class="icon-btn" type="button" aria-label="Choose Contact">
-        <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-            <use href="#icon-messages"></use>
+        <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+            <use href="#icon-mail-24"></use>
         </svg>
     </button>
 </span>

package/src/less/textbox/stories/rtl/icon.stories.js

@@ -3,8 +3,8 @@ export default { title: 'Textbox/RTL/Icon' };
 export const base = () => `
 <div dir="rtl">
     <span class="textbox">
-        <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-            <use href="#icon-messages"></use>
+        <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+            <use href="#icon-mail-24"></use>
         </svg>
         <input class="textbox__control" type="text" placeholder="placeholder text" />
     </span>
@@ -15,8 +15,8 @@ export const end = () => `
 <div dir="rtl">
     <span class="textbox textbox--icon-end">
         <input class="textbox__control" type="text" placeholder="placeholder text" />
-        <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-            <use href="#icon-messages"></use>
+        <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+            <use href="#icon-mail-24"></use>
         </svg>
     </span>
 </div>
@@ -25,13 +25,13 @@ export const end = () => `
 export const dual = () => `
 <div dir="rtl">
     <span class="textbox textbox--icon-end">
-        <svg class="icon icon--search" focusable="false" width="16" height="16" aria-hidden="true">
-            <use href="#icon-search"></use>
+        <svg class="icon icon--search-24" focusable="false" width="16" height="16" aria-hidden="true">
+            <use href="#icon-search-24"></use>
         </svg>
 
         <input class="textbox__control" type="text" placeholder="placeholder text" />
-        <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-            <use href="#icon-messages"></use>
+        <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+            <use href="#icon-mail-24"></use>
         </svg>
     </span>
 </div>
@@ -42,8 +42,8 @@ export const actionable = () => `
     <span class="textbox textbox--icon-end">
         <input class="textbox__control" type="text" placeholder="placeholder text" />
         <button class="icon-btn" type="button" aria-label="Choose Contact">
-            <svg aria-hidden="true" class="icon icon--messages" focusable="false" width="16" height="16">
-                <use href="#icon-messages"></use>
+            <svg aria-hidden="true" class="icon icon--mail-24" focusable="false" width="16" height="16">
+                <use href="#icon-mail-24"></use>
             </svg>
         </button>
     </span>
@@ -53,14 +53,14 @@ export const actionable = () => `
 export const dualActionable = () => `
 <div dir="rtl">
     <span class="textbox textbox--icon-end">
-        <svg class="icon icon--search" focusable="false" width="16" height="16" aria-hidden="true">
-            <use href="#icon-search"></use>
+        <svg class="icon icon--search-24" focusable="false" width="16" height="16" aria-hidden="true">
+            <use href="#icon-search-24"></use>
         </svg>
 
         <input class="textbox__control" type="text" placeholder="placeholder text" />
         <button class="icon-btn" type="button" aria-label="Choose Contact">
-            <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-                <use href="#icon-messages"></use>
+            <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+                <use href="#icon-mail-24"></use>
             </svg>
         </button>
     </span>

package/src/less/toast-dialog/stories/toast-dialog.stories.js

@@ -6,8 +6,8 @@ export const primaryAction = () => `
         <div class="toast-dialog__header">
             <h2>User Privacy Preferences</h2>
             <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
-                <svg class="icon icon--close icon--close-small" focusable="false">
-                    <use href="#icon-close-small"></use>
+                <svg class="icon icon--close icon--close-16" focusable="false">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </button>
         </div>
@@ -28,8 +28,8 @@ export const secondaryAction = () => `
         <div class="toast-dialog__header">
             <h2>User Privacy Preferences</h2>
             <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
-                <svg class="icon icon--close icon--close-small" focusable="false">
-                    <use href="#icon-close-small"></use>
+                <svg class="icon icon--close icon--close-16" focusable="false">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </button>
         </div>
@@ -52,8 +52,8 @@ export const RTL = () => `
             <div class="toast-dialog__header">
                 <h2>User Privacy Preferences</h2>
                 <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
-                    <svg class="icon icon--close icon--close-small" focusable="false">
-                        <use href="#icon-close-small"></use>
+                    <svg class="icon icon--close icon--close-16" focusable="false">
+                        <use href="#icon-close-16"></use>
                     </svg>
                 </button>
             </div>