@ebay/skin 15.5.1 → 16.0.0-1

package/src/less/carousel/stories/carousel.stories.js

@@ -4,8 +4,8 @@ export const continuous = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false">
-                <use href="#icon-carousel-prev"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false">
+                <use href="#icon-chevron-left-24"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -21,8 +21,8 @@ export const continuous = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false">
-                <use href="#icon-carousel-next"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
+                <use href="#icon-chevron-right-24"></use>
             </svg>
         </button>
     </div>
@@ -33,8 +33,8 @@ export const imageTreatment = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false">
-                <use href="#icon-carousel-prev"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false">
+                <use href="#icon-chevron-left-24"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -50,8 +50,8 @@ export const imageTreatment = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false">
-                <use href="#icon-carousel-next"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
+                <use href="#icon-chevron-right-24"></use>
             </svg>
         </button>
     </div>
@@ -62,8 +62,8 @@ export const imageTreatmentLarge = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false">
-                <use href="#icon-carousel-prev"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false">
+                <use href="#icon-chevron-left-24"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -79,8 +79,8 @@ export const imageTreatmentLarge = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false">
-                <use href="#icon-carousel-next"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
+                <use href="#icon-chevron-right-24"></use>
             </svg>
         </button>
     </div>
@@ -94,8 +94,8 @@ export const slides = () => `
             <span>Top Products - Slide 1 of 2</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false" >
-                <use href="#icon-carousel-prev"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false" >
+                <use href="#icon-chevron-left-24"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -111,8 +111,8 @@ export const slides = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false">
-                <use href="#icon-carousel-next"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
+                <use href="#icon-chevron-right-24"></use>
             </svg>
         </button>
     </div>
@@ -126,8 +126,8 @@ export const slideshow = () => `
             <span>Top Products - Slide 1 of 4</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false" >
-                <use href="#icon-carousel-prev"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false" >
+                <use href="#icon-chevron-left-24"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -139,14 +139,14 @@ export const slideshow = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false">
-                <use href="#icon-carousel-next"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
+                <use href="#icon-chevron-right-24"></use>
             </svg>
         </button>
     </div>
     <button class="carousel__playback" aria-label="Play - Top Products">
-        <svg class="icon icon--play" focusable="false" aria-hidden="true">
-            <use href="#icon-play"></use>
+        <svg class="icon icon--play-24" focusable="false" aria-hidden="true">
+            <use href="#icon-play-24"></use>
         </svg>
     </button>
 </div>
@@ -160,8 +160,8 @@ export const RTL = () => `
                 <span>Top Products - Slide 1 of 4</span>
             </h4>
             <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-                <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false">
-                    <use href="#icon-carousel-prev"></use>
+                <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false">
+                    <use href="#icon-chevron-left-24"></use>
                 </svg>
             </button>
             <div class="carousel__viewport">
@@ -173,14 +173,14 @@ export const RTL = () => `
                 </ul>
             </div>
             <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-                <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false" >
-                    <use href="#icon-carousel-next"></use>
+                <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false" >
+                    <use href="#icon-chevron-right-24"></use>
                 </svg>
             </button>
         </div>
         <button class="carousel__playback" aria-label="Play - Top Products">
-            <svg class="icon icon--play" focusable="false" aria-hidden="true">
-                <use href="#icon-play"></use>
+            <svg class="icon icon--play-24" focusable="false" aria-hidden="true">
+                <use href="#icon-play-24"></use>
             </svg>
         </button>
     </div>
@@ -191,8 +191,8 @@ export const hiddenScrollbar = () => `
 <div class="carousel carousel--hidden-scrollbar">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false">
-                <use href="#icon-carousel-prev"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false">
+                <use href="#icon-chevron-left-24"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -208,8 +208,8 @@ export const hiddenScrollbar = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false">
-                <use href="#icon-carousel-next"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
+                <use href="#icon-chevron-right-24"></use>
             </svg>
         </button>
     </div>

package/src/less/checkbox/stories/checked.stories.js

@@ -5,10 +5,10 @@ export const base = () => `
     <input aria-label="Base checkbox" class="checkbox__control" type="checkbox" checked />
     <span class="checkbox__icon" hidden>
         <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
-            <use href="#icon-checkbox-unchecked"></use>
+            <use href="#icon-checkbox-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="checkbox__checked" focusable="false">
-            <use href="#icon-checkbox-checked"></use>
+            <use href="#icon-checkbox-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -19,10 +19,10 @@ export const disabled = () => `
     <input aria-label="Disabled checkbox" class="checkbox__control" disabled checked type="checkbox" />
     <span class="checkbox__icon" hidden>
         <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
-            <use href="#icon-checkbox-unchecked"></use>
+            <use href="#icon-checkbox-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="checkbox__checked" focusable="false">
-            <use href="#icon-checkbox-checked"></use>
+            <use href="#icon-checkbox-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -33,10 +33,10 @@ export const customColour = () => `
     <input aria-label="Custom colour checkbox" class="checkbox__control" type="checkbox" checked />
     <span class="checkbox__icon" hidden>
         <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
-            <use href="#icon-checkbox-unchecked"></use>
+            <use href="#icon-checkbox-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="checkbox__checked" focusable="false" style="color: #5ba71b">
-            <use href="#icon-checkbox-checked"></use>
+            <use href="#icon-checkbox-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -48,10 +48,10 @@ export const RTL = () => `
         <input aria-label="RTL checkbox" class="checkbox__control" type="checkbox" checked />
         <span class="checkbox__icon" hidden>
             <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
-                <use href="#icon-checkbox-unchecked"></use>
+                <use href="#icon-checkbox-unchecked-18"></use>
             </svg>
             <svg aria-hidden="true" class="checkbox__checked" focusable="false" style="color: #5ba71b">
-                <use href="#icon-checkbox-checked"></use>
+                <use href="#icon-checkbox-checked-18"></use>
             </svg>
         </span>
     </span>
@@ -63,10 +63,10 @@ export const customIcon = () => `
     <input aria-label="Custom icon checkbox" class="checkbox__control" type="checkbox" checked />
     <span class="checkbox__icon" hidden>
         <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
-            <use href="#icon-attention"></use>
+            <use href="#icon-attention-24"></use>
         </svg>
         <svg aria-hidden="true" class="checkbox__checked" focusable="false" style="color: #5ba71b">
-            <use href="#icon-confirmation"></use>
+            <use href="#icon-confirmation-24"></use>
         </svg>
     </span>
 </span>
@@ -79,10 +79,10 @@ export const multiLineLabel = () => `
             <input aria-label="Multiline checkbox 1" class="checkbox__control" id="group-checkbox-1" type="checkbox" value="1" name="checkbox-group" checked />
             <span class="checkbox__icon" hidden>
                 <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-unchecked"></use>
+                    <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
                 <svg class="checkbox__checked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-checked"></use>
+                    <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
         </span>
@@ -93,10 +93,10 @@ export const multiLineLabel = () => `
             <input aria-label="Multiline checkbox 2" class="checkbox__control" id="group-checkbox-2" type="checkbox" value="2" name="checkbox-group" />
             <span class="checkbox__icon" hidden>
                 <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-unchecked"></use>
+                    <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
                 <svg class="checkbox__checked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-checked"></use>
+                    <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
         </span>
@@ -107,10 +107,10 @@ export const multiLineLabel = () => `
             <input aria-label="Multiline checkbox 3" class="checkbox__control" id="group-checkbox-3" type="checkbox" value="3" name="checkbox-group" />
             <span class="checkbox__icon" hidden>
                 <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-unchecked"></use>
+                    <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
                 <svg class="checkbox__checked" focusable="false" height="18" width="18">
-                    <use href="#icon-checkbox-checked"></use>
+                    <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
         </span>

package/src/less/checkbox/stories/mixed.stories.js

@@ -5,10 +5,10 @@ export const base = () => `
     <input aria-checked="mixed" aria-label="Mixed checkbox" class="checkbox__control" type="checkbox" checked />
     <span class="checkbox__icon" hidden>
         <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
-            <use href="#icon-checkbox-unchecked"></use>
+            <use href="#icon-checkbox-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="checkbox__checked" focusable="false">
-            <use href="#icon-checkbox-mixed"></use>
+            <use href="#icon-web-checkbox-indterminate-18"></use>
         </svg>
     </span>
 </span>

package/src/less/checkbox/stories/unchecked.stories.js

@@ -5,10 +5,10 @@ export const base = () => `
     <input aria-label="Base checkbox" class="checkbox__control" type="checkbox" />
     <span class="checkbox__icon" hidden>
         <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
-            <use href="#icon-checkbox-unchecked"></use>
+            <use href="#icon-checkbox-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="checkbox__checked" focusable="false">
-            <use href="#icon-checkbox-checked"></use>
+            <use href="#icon-checkbox-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -19,10 +19,10 @@ export const disabled = () => `
     <input aria-label="Disabled checkbox" class="checkbox__control" disabled type="checkbox" />
     <span class="checkbox__icon" hidden>
         <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
-            <use href="#icon-checkbox-unchecked"></use>
+            <use href="#icon-checkbox-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="checkbox__checked" focusable="false">
-            <use href="#icon-checkbox-checked"></use>
+            <use href="#icon-checkbox-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -33,10 +33,10 @@ export const customColour = () => `
     <input aria-label="Custom colour checkbox" class="checkbox__control" type="checkbox" />
     <span class="checkbox__icon" hidden>
         <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
-            <use href="#icon-checkbox-unchecked"></use>
+            <use href="#icon-checkbox-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="checkbox__checked" focusable="false" style="color: #5ba71b">
-            <use href="#icon-checkbox-checked"></use>
+            <use href="#icon-checkbox-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -47,10 +47,10 @@ export const customIcon = () => `
     <input aria-label="Custom icon checkbox" class="checkbox__control" type="checkbox" />
     <span class="checkbox__icon" hidden>
         <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
-            <use href="#icon-attention"></use>
+            <use href="#icon-attention-24"></use>
         </svg>
         <svg aria-hidden="true" class="checkbox__checked" focusable="false" style="color: #5ba71b">
-            <use href="#icon-confirmation"></use>
+            <use href="#icon-confirmation-24"></use>
         </svg>
     </span>
 </span>

package/src/less/combobox/combobox.less

@@ -82,17 +82,17 @@ span.combobox {
     display: block;
 }
 
-.combobox--expanded svg.icon--dropdown {
+.combobox--expanded svg.icon--chevron-down-12 {
     transform: rotate(180deg);
 }
 
-.combobox__control > svg.icon--dropdown {
+.combobox__control > svg.icon--chevron-down-12 {
     .color-token(combobox-textbox-icon-color, color-foreground-primary);
     margin-left: 8px;
     pointer-events: none;
     position: absolute;
     right: 17px; // +1 px for the border on the input box
-    top: calc(50% - 4px); // 4px is half the height of dropdown icon size
+    top: calc(50% - 8px); // 8px is half the height of dropdown icon size
 }
 
 .combobox__control > input {

package/src/less/combobox/stories/combobox.stories.js

@@ -4,8 +4,8 @@ export const collapsed = () => `
 <span class="combobox">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="false" aria-haspopup="listbox" />
-        <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 class="combobox__listbox">
@@ -25,8 +25,8 @@ export const expanded = () => `
 <span class="combobox combobox--expanded">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-        <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 class="combobox__listbox">
@@ -46,8 +46,8 @@ export const disabled = () => `
 <span class="combobox">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="false" aria-haspopup="listbox" disabled />
-        <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 class="combobox__listbox">
@@ -67,8 +67,8 @@ export const large = () => `
 <span class="combobox combobox--large combobox--expanded">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-        <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 class="combobox__listbox">
@@ -88,8 +88,8 @@ export const longOptions = () => `
 <span class="combobox combobox--expanded">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-        <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 class="combobox__listbox">
@@ -110,8 +110,8 @@ export const actionable = () => `
     <span class="combobox__control">
         <input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox1" />
         <button class="icon-btn icon-btn--actionable" type="button" aria-label="Expand Suggestions">
-            <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>
         </button>
     </span>
@@ -136,8 +136,8 @@ export const RTL = () => `
     <span class="combobox combobox--expanded">
         <span class="combobox__control">
             <input class="pink-placeholder-text" name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-            <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 class="combobox__listbox">
@@ -160,8 +160,8 @@ export const actionableRTL = () => `
         <span class="combobox__control combobox__control--actionable">
             <input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox5" />
             <button class="icon-btn" type="button" aria-label="Expand Suggestions">
-                <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>
             </button>
         </span>
@@ -187,8 +187,8 @@ export const inheritColour = () => `
     <span class="combobox combobox--expanded">
         <span class="combobox__control">
             <input class="pink-placeholder-text" name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-            <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 class="combobox__listbox">
@@ -210,8 +210,8 @@ export const inheritFontSize = () => `
     <span class="combobox combobox--expanded">
         <span class="combobox__control">
             <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-            <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 class="combobox__listbox">

package/src/less/confirm-dialog/confirm-dialog.less

@@ -88,13 +88,13 @@ button.confirm-dialog__confirm {
 }
 
 // In order to prevent the margins to meet the ege of the page at medium screen sizes
-@media (min-width: calc(@screen-size-3 + 1px)) and (max-width: @screen-size-4) {
+@media (min-width: calc(@_screen-size-MD + 1px)) and (max-width: @_screen-size-LG) {
     .confirm-dialog__window {
         max-width: calc(88% - @spacing-400);
     }
 }
 
-@media (min-width: calc(@screen-size-4 + 1px)) {
+@media (min-width: calc(@_screen-size-LG + 1px)) {
     .confirm-dialog__window {
         max-width: @dialog-lightbox-max-width;
     }

package/src/less/cta-button/cta-button.less

@@ -85,3 +85,7 @@ a.cta-btn--large-fixed-height {
     font-size: @font-size-16;
     height: @button-height-large;
 }
+
+[dir="rtl"] a.cta-btn svg.icon--arrow-right-24 {
+    transform: rotate(180deg);
+}

package/src/less/cta-button/stories/cascade.stories.js

@@ -4,8 +4,8 @@ export const color = () => `
 <a class="cta-btn" href="http://www.ebay.com" style="color: red">
     <span class="cta-btn__cell">
         <span>Link</span>
-        <svg class="icon icon--cta" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-cta"></use>
+        <svg class="icon icon--arrow-right-24" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-arrow-right-24"></use>
         </svg>
     </span>
 </a>
@@ -16,8 +16,8 @@ export const RTL = () => `
     <a class="cta-btn" href="http://www.ebay.com" style="color: red">
         <span class="cta-btn__cell">
             <span style="margin-right: 2px;">Link</span>
-            <svg style="margin-right: 5px; margin-left: 2px;" class="icon icon--cta" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-cta"></use>
+            <svg style="margin-right: 5px; margin-left: 2px;" class="icon icon--arrow-right-24" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-arrow-right-24"></use>
             </svg>
         </span>
     </a>
@@ -28,8 +28,8 @@ export const fontSize = () => `
 <a class="cta-btn" href="http://www.ebay.com" style="font-size: 200%">
     <span class="cta-btn__cell">
         <span>Link</span>
-        <svg class="icon icon--cta" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-cta"></use>
+        <svg class="icon icon--arrow-right-24" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-arrow-right-24"></use>
         </svg>
     </span>
 </a>

package/src/less/cta-button/stories/cta-button.stories.js

@@ -4,8 +4,8 @@ export const base = () => `
 <a class="cta-btn" href="http://www.ebay.com">
     <span class="cta-btn__cell">
         <span>Link</span>
-        <svg class="icon icon--cta" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-cta"></use>
+        <svg class="icon icon--arrow-right-24" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-arrow-right-24"></use>
         </svg>
     </span>
 </a>

package/src/less/cta-button/stories/dimensions.stories.js

@@ -4,8 +4,8 @@ export const large = () => `
 <a class="cta-btn cta-btn--large" href="http://www.ebay.com">
     <span class="cta-btn__cell">
         <span>Link</span>
-        <svg class="icon icon--cta" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-cta"></use>
+        <svg class="icon icon--arrow-right-24" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-arrow-right-24"></use>
         </svg>
     </span>
 </a>
@@ -15,8 +15,8 @@ export const largeFixedWidthTruncated = () => `
 <a style="width: 200px;" class="cta-btn cta-btn--large cta-btn--truncated" href="http://www.ebay.com">
     <span class="cta-btn__cell">
         <span>Link with a lot of text that should wrap</span>
-        <svg class="icon icon--cta" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-cta"></use>
+        <svg class="icon icon--arrow-right-24" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-arrow-right-24"></use>
         </svg>
     </span>
 </a>

package/src/less/date-textbox/date-textbox.less

@@ -0,0 +1,29 @@
+@import "../variables/variables.less";
+@import "../mixins/private/token-mixins.less";
+@import "../mixins/private/bubble-mixins.less";
+
+.date-textbox {
+    // 343px - (2 * @spacing-200) [not autmatically compiled by LESS]
+    --calendar-month-width: 311px;
+}
+
+.date-textbox__popover {
+    .background-color-token(calendar-background-color, color-background-primary);
+    border-radius: @spacing-200;
+    filter: var(--bubble-filter);
+    margin-left: -@spacing-100;
+    padding: @spacing-200;
+    position: absolute;
+    z-index: 1;
+}
+
+.date-textbox__popover[hidden] {
+    display: none;
+}
+
+@media only screen and (max-width: 600px) {
+    .date-textbox__popover {
+        left: 0;
+        margin-left: 0;
+    }
+}

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

@@ -6,8 +6,8 @@ export const RTL = () => `
         <summary class="details__summary">
             <span class="details__label">Details</span>
             <span class="details__icon" hidden>
-                <svg class="icon icon--dropdown" focusable="false" aria-hidden="true">
-                    <use href="#icon-dropdown"></use>
+                <svg class="icon icon--chevron-down-12" focusable="false" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
                 </svg>
             </span>
         </summary>
@@ -22,8 +22,8 @@ export const colour = () => `
         <summary class="details__summary">
             <span class="details__label">Details</span>
             <span class="details__icon" hidden>
-                <svg class="icon icon--dropdown" focusable="false" aria-hidden="true">
-                    <use href="#icon-dropdown"></use>
+                <svg class="icon icon--chevron-down-12" focusable="false" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
                 </svg>
             </span>
         </summary>
@@ -38,8 +38,8 @@ export const fontSize = () => `
         <summary class="details__summary">
             <span class="details__label">Details</span>
             <span class="details__icon" hidden>
-                <svg class="icon icon--dropdown" focusable="false" aria-hidden="true">
-                    <use href="#icon-dropdown"></use>
+                <svg class="icon icon--chevron-down-12" focusable="false" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
                 </svg>
             </span>
         </summary>