@ebay/skin 17.1.0 → 17.2.0-next.0

package/dist/svg/icons.svg

@@ -29,20 +29,6 @@
       <stop offset=".562" stop-color="#0968F6" />
       <stop offset=".785" stop-color="#4EE04B" />
     </linearGradient>
-    <linearGradient
-      id="ref-ai-spectrum-24-colored"
-      x1="32.758"
-      y1="16.968"
-      x2="17.145"
-      y2="33.645"
-      gradientUnits="userSpaceOnUse"
-    >
-      <stop offset=".098" stop-color="#FFD80E" />
-      <stop offset=".267" stop-color="#FF4242" />
-      <stop offset=".418" stop-color="#993EE0" />
-      <stop offset=".562" stop-color="#0968F6" />
-      <stop offset=".785" stop-color="#4EE04B" />
-    </linearGradient>
     <linearGradient
       id="ref-ai-spectrum-filled-16-colored"
       x1="21.21"
@@ -71,6 +57,20 @@
       <stop offset=".562" stop-color="#0968F6" />
       <stop offset=".785" stop-color="#4EE04B" />
     </linearGradient>
+    <linearGradient
+      id="ref-ai-spectrum-24-colored"
+      x1="32.758"
+      y1="16.968"
+      x2="17.145"
+      y2="33.645"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop offset=".098" stop-color="#FFD80E" />
+      <stop offset=".267" stop-color="#FF4242" />
+      <stop offset=".418" stop-color="#993EE0" />
+      <stop offset=".562" stop-color="#0968F6" />
+      <stop offset=".785" stop-color="#4EE04B" />
+    </linearGradient>
     <linearGradient
       id="ref-ai-spectrum-filled-24-colored"
       x1="32.758"
@@ -623,12 +623,16 @@
   </symbol>
   <symbol viewBox="0 0 24 24" id="icon-bank-24">
     <path
-      d="M12.53 1.152a1 1 0 0 0-1.06 0l-8 5C2.618 6.684 2.995 8 4 8h16c1.005 0 1.382-1.316.53-1.848l-8-5ZM7.487 6 12 3.18 16.513 6H7.487ZM1 22a1 1 0 0 1 1-1h20a1 1 0 1 1 0 2H2a1 1 0 0 1-1-1Zm3-4a1 1 0 1 0 0 2h16a1 1 0 1 0 0-2H4Zm1-9h2v8H5V9Zm14 0h-2v8h2V9Zm-6 0h2v8h-2V9Zm-2 0H9v8h2V9Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.53 1.152a1 1 0 0 0-1.06 0l-8 5A1 1 0 0 0 4 8h16a1 1 0 0 0 .53-1.848l-8-5ZM12 3.179 16.513 6H7.487L12 3.18ZM19 10a1 1 0 1 0-2 0v6a1 1 0 1 0 2 0v-6Zm2 9a1 1 0 0 1-1 1H4a1 1 0 1 1 0-2h16a1 1 0 0 1 1 1Zm2 3a1 1 0 0 1-1 1H2a1 1 0 1 1 0-2h20a1 1 0 0 1 1 1ZM14 9a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1Zm-3 1a1 1 0 1 0-2 0v6a1 1 0 1 0 2 0v-6ZM6 9a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1Z"
     />
   </symbol>
   <symbol viewBox="0 0 64 64" id="icon-bank-64">
     <path
-      d="M33.213 3.308a2.5 2.5 0 0 0-2.363 0l-20.51 11c-2.29 1.228-1.418 4.703 1.182 4.703h41.02c2.599 0 3.472-3.475 1.181-4.704l-20.51-11Zm-1.181 5.04L42.59 14.01H21.473l10.559-5.663ZM3 58.5A2.5 2.5 0 0 1 5.5 56h53a2.5 2.5 0 0 1 0 5h-53A2.5 2.5 0 0 1 3 58.5ZM11.5 48a2.5 2.5 0 0 0 0 5h41a2.5 2.5 0 0 0 0-5h-41ZM13 22h5v23h-5V22Zm16 0h-5v23h5V22Zm6 0h5v23h-5V22Zm16 0h-5v23h5V22Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M33.182 3.297a2.5 2.5 0 0 0-2.364 0l-20.5 11A2.5 2.5 0 0 0 11.5 19h41a2.5 2.5 0 0 0 1.182-4.703l-20.5-11ZM32 8.337 42.553 14H21.447L32 8.337ZM51 24.5a2.5 2.5 0 0 0-5 0v18a2.5 2.5 0 0 0 5 0v-18Zm-42 26a2.5 2.5 0 0 1 2.5-2.5h41a2.5 2.5 0 0 1 0 5h-41A2.5 2.5 0 0 1 9 50.5Zm-6 8A2.5 2.5 0 0 1 5.5 56h53a2.5 2.5 0 0 1 0 5h-53A2.5 2.5 0 0 1 3 58.5ZM37.5 22a2.5 2.5 0 0 1 2.5 2.5v18a2.5 2.5 0 0 1-5 0v-18a2.5 2.5 0 0 1 2.5-2.5ZM29 24.5a2.5 2.5 0 0 0-5 0v18a2.5 2.5 0 0 0 5 0v-18ZM15.5 22a2.5 2.5 0 0 1 2.5 2.5v18a2.5 2.5 0 0 1-5 0v-18a2.5 2.5 0 0 1 2.5-2.5Z"
     />
   </symbol>
   <symbol viewBox="0 0 20 12" id="icon-bank-account-12-colored">
@@ -793,26 +797,23 @@
   </symbol>
   <symbol viewBox="0 0 16 16" id="icon-calendar-16">
     <path
-      d="M5 8a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H5Z"
-    />
-    <path
-      d="M3 2a1 1 0 0 1 2 0v1h6V2a1 1 0 1 1 2 0v1h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h1V2Zm0 11h10V7H3v6Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 1a1 1 0 0 1 1 1v1.05a2.5 2.5 0 0 1 2 2.45v7a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5v-7a2.5 2.5 0 0 1 2-2.45V2a1 1 0 0 1 2 0v1h6V2a1 1 0 0 1 1-1ZM4 5h-.5a.5.5 0 0 0-.5.5V6h10v-.5a.5.5 0 0 0-.5-.5H4ZM3 8v4.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V8H3Zm1 2a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1Z"
     />
   </symbol>
   <symbol viewBox="0 0 24 24" id="icon-calendar-24">
     <path
-      d="M6 10a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H6Zm4 1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2Zm6-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2Z"
-    />
-    <path
-      d="M5 2a1 1 0 0 1 2 0v1h10V2a1 1 0 1 1 2 0v1h3a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h3V2ZM3 21h18V8H3v13Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M18 1a1 1 0 0 1 1 1v1h1a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h1V2a1 1 0 0 1 2 0v1h10V2a1 1 0 0 1 1-1ZM6 5H4a1 1 0 0 0-1 1v1h18V6a1 1 0 0 0-1-1H6ZM3 9v11a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V9H3Zm12 3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2Zm-4-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2Zm-6 1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-2Z"
     />
   </symbol>
   <symbol viewBox="0 0 64 64" id="icon-calendar-64">
     <path
-      d="M13.997 28.01a2 2 0 0 0-2 1.999v5.998a2 2 0 0 0 2 2h6a2 2 0 0 0 2.001-2v-5.998a2 2 0 0 0-2-2h-6.001ZM27 30.009a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v5.998a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-5.998Zm17.002-1.999a2 2 0 0 0-2 1.999v5.998a2 2 0 0 0 2 2h6.001a2 2 0 0 0 2-2v-5.998a2 2 0 0 0-2-2h-6Z"
-    />
-    <path
-      d="M14.997 5.999a3 3 0 0 1 6.001 0v3.01h22.004V6a3 3 0 0 1 6 0v3.01H58.5a2.5 2.5 0 0 1 2.5 2.5V58.5a2.5 2.5 0 0 1-2.5 2.5h-53A2.5 2.5 0 0 1 3 58.5V11.51a2.5 2.5 0 0 1 2.5-2.5h9.497V6Zm41.001 50.002v-31.99H8.001V56h47.997Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M47.5 3A2.5 2.5 0 0 1 50 5.5V9h3.5a7.5 7.5 0 0 1 7.5 7.5v37a7.5 7.5 0 0 1-7.5 7.5h-43A7.5 7.5 0 0 1 3 53.5v-37A7.5 7.5 0 0 1 10.5 9H14V5.5a2.5 2.5 0 0 1 5 0V9h26V5.5A2.5 2.5 0 0 1 47.5 3Zm-37 11A2.5 2.5 0 0 0 8 16.5V19h48v-2.5a2.5 2.5 0 0 0-2.5-2.5h-43ZM56 24H8v29.5a2.5 2.5 0 0 0 2.5 2.5h43a2.5 2.5 0 0 0 2.5-2.5V24Zm-15 7a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-6Zm-12-2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-6Zm-16 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-6Z"
     />
   </symbol>
   <symbol viewBox="0 0 16 16" id="icon-camera-16">
@@ -1382,17 +1383,23 @@
   </symbol>
   <symbol viewBox="0 0 16 16" id="icon-credit-card-16">
     <path
-      d="M15 2H1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Zm-1 5v5H2V7h12Zm0-2H2V4h12v1Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2 4.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5V5H2v-.5ZM0 6V4.5A2.5 2.5 0 0 1 2.5 2h11A2.5 2.5 0 0 1 16 4.5v7a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 11.5V6Zm14 1v4.5a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5V7h12Z"
     />
   </symbol>
   <symbol viewBox="0 0 24 24" id="icon-credit-card-24">
     <path
-      d="M22 4H2a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h20a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1Zm-1 8v6H3v-6h18Zm0-4H3V6h18v2Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3 7a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v1H3V7Zm0 5v5a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-5H3Zm1-8a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h16a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H4Z"
     />
   </symbol>
   <symbol viewBox="0 0 64 64" id="icon-credit-card-64">
     <path
-      d="M58.495 8.994H5.505a2.5 2.5 0 0 0-2.5 2.5V52.54a2.5 2.5 0 0 0 2.5 2.5h52.99a2.5 2.5 0 0 0 2.5-2.5V11.494a2.5 2.5 0 0 0-2.5-2.5ZM55.994 32v18.04H8.004V32h47.99Zm0-12H8.004v-6.006h47.99V20Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 16.5a2.5 2.5 0 0 1 2.5-2.5h43a2.5 2.5 0 0 1 2.5 2.5V20H8v-3.5ZM8 32v15.5a2.5 2.5 0 0 0 2.5 2.5h43a2.5 2.5 0 0 0 2.5-2.5V32H8Zm2.5-23A7.5 7.5 0 0 0 3 16.5v31a7.5 7.5 0 0 0 7.5 7.5h43a7.5 7.5 0 0 0 7.5-7.5v-31A7.5 7.5 0 0 0 53.5 9h-43Z"
     />
   </symbol>
   <symbol viewBox="0 0 24 24" id="icon-crop-24">
@@ -3448,18 +3455,22 @@
   <symbol viewBox="0 0 16 16" id="icon-gift-16">
     <path
       fill-rule="evenodd"
-      d="M12.707 4.769a3.51 3.51 0 0 1-.12.231H14a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.417a3.464 3.464 0 0 1-.118-.23c-.285-.61-.396-1.329-.186-2.017.22-.717.755-1.281 1.523-1.581 1.12-.437 2.29.03 3.086.894.096.104.188.215.276.332.089-.118.183-.23.28-.336.8-.862 1.977-1.336 3.1-.898.77.3 1.304.867 1.521 1.586.208.689.094 1.409-.192 2.019ZM9.744 3.423c.43-.464.778-.446.907-.396.243.095.308.215.334.301.035.117.037.324-.089.591-.247.527-.9 1.074-1.878 1.08l-.006-.04c.158-.72.442-1.224.732-1.536ZM9 13h3v-3H9v3Zm-2-3v3H4v-3h3Zm6-2V7H3v1h10ZM6.972 5l.006-.041c-.159-.723-.441-1.228-.726-1.537-.42-.456-.758-.438-.889-.387-.244.096-.31.216-.337.303-.036.117-.038.323.086.587.242.52.887 1.064 1.86 1.075Z"
       clip-rule="evenodd"
+      d="M10 3a1 1 0 0 0-1 1v1h1a1 1 0 1 0 0-2ZM7 4a1 1 0 1 0-1 1h1V4ZM3.17 5A3 3 0 0 1 8 1.764 3 3 0 0 1 12.83 5h.42c.966 0 1.75.784 1.75 1.75v1.5c0 .698-.409 1.3-1 1.582V12.5a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 12.5V9.832A1.75 1.75 0 0 1 1 8.25v-1.5C1 5.784 1.784 5 2.75 5h.42ZM9 7h4v1H9V7ZM6 7H3v1h4V7H6Zm1 3H4v2.5a.5.5 0 0 0 .5.5H7v-3Zm2 0h3v2.5a.5.5 0 0 1-.5.5H9v-3Z"
     />
   </symbol>
   <symbol viewBox="0 0 24 24" id="icon-gift-24">
     <path
-      d="M17 6h5a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V12H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5a3 3 0 0 1 .1-4.12 3.07 3.07 0 0 1 4.24 0c.278.284.517.603.71.95.193-.347.432-.666.71-.95a3.07 3.07 0 0 1 4.24 0A3 3 0 0 1 17 6Zm-1.522-2.658a1 1 0 0 0-1.358-.052A5.562 5.562 0 0 0 13 6a5.815 5.815 0 0 0 2.53-1.3 1 1 0 0 0-.052-1.358ZM8.46 3.29h.01a.998.998 0 0 0-.01 1.42A5.79 5.79 0 0 0 11 6a5.514 5.514 0 0 0-1.13-2.71 1 1 0 0 0-1.41 0ZM13 21h6v-9h-6v9Zm-2 0v-9H5v9h6ZM3 10h18V8H3v2Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.5 3A1.5 1.5 0 0 0 13 4.5V6h1.5a1.5 1.5 0 0 0 0-3ZM12 2.05A3.5 3.5 0 0 1 17.663 6H21a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-8a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.337A3.5 3.5 0 0 1 12 2.05ZM9.5 6A1.5 1.5 0 1 1 11 4.5V6H9.5Zm0 2H3v2h8V8H9.5ZM13 8h8v2h-8V8Zm-2 13v-9H5v8a1 1 0 0 0 1 1h5Zm8-9v8a1 1 0 0 1-1 1h-5v-9h6Z"
     />
   </symbol>
   <symbol viewBox="0 0 64 64" id="icon-gift-64">
     <path
-      d="M45.182 16.12h13.182A2.64 2.64 0 0 1 61 18.76v10.56a2.64 2.64 0 0 1-2.636 2.64h-2.637v26.4A2.64 2.64 0 0 1 53.091 61H10.909a2.639 2.639 0 0 1-2.636-2.64v-26.4H5.636A2.639 2.639 0 0 1 3 29.32V18.76c0-1.457 1.18-2.64 2.636-2.64h13.182a7.928 7.928 0 0 1 .264-10.877 8.084 8.084 0 0 1 11.178 0 11.75 11.75 0 0 1 1.872 2.508 11.75 11.75 0 0 1 1.872-2.508 8.084 8.084 0 0 1 11.178 0 7.929 7.929 0 0 1 0 10.877Zm-4.013-7.017a2.636 2.636 0 0 0-3.58-.137 14.693 14.693 0 0 0-2.953 7.154 15.323 15.323 0 0 0 6.67-3.432 2.645 2.645 0 0 0-.137-3.585Zm-18.502-.137h.027a2.638 2.638 0 0 0-.026 3.749 15.257 15.257 0 0 0 6.696 3.405 14.566 14.566 0 0 0-2.98-7.154 2.632 2.632 0 0 0-3.717 0Zm11.97 46.754h15.818V31.96H34.636v23.76Zm-5.273 0V31.96H13.545v23.76h15.819ZM8.273 26.68h47.454V21.4H8.273v5.28Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M38.5 8a4 4 0 0 0-4 4v4h4a4 4 0 0 0 0-8ZM32 5.775A9 9 0 0 1 46.565 16H56a5 5 0 0 1 5 5v6a5 5 0 0 1-5 5v21.5a7.5 7.5 0 0 1-7.5 7.5h-33A7.5 7.5 0 0 1 8 53.5V32a5 5 0 0 1-5-5v-6a5 5 0 0 1 5-5h9.436A9 9 0 0 1 32 5.775ZM25.5 16a4 4 0 1 1 4-4v4h-4Zm0 5H8v6h21.5v-6h-4Zm9 0H56v6H34.5v-6Zm-5 11H13v21.5a2.5 2.5 0 0 0 2.5 2.5h14V32Zm5 0H51v21.5a2.5 2.5 0 0 1-2.5 2.5h-14V32Z"
     />
   </symbol>
   <symbol viewBox="0 0 20 12" id="icon-gift-card-12-colored">
@@ -4957,12 +4968,23 @@
   </symbol>
   <symbol viewBox="0 0 16 16" id="icon-locked-16">
     <path
-      d="M11.995 4.8A4 4 0 0 0 4 5v1H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-1V5l-.005-.2ZM10 6H6V5l.005-.15A2 2 0 0 1 10 5v1Zm-1 5a1 1 0 1 1-2 0v-1a1 1 0 0 1 2 0v1Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6 5a2 2 0 1 1 4 0v1H6V5ZM4 6.05V5a4 4 0 1 1 8 0v1.05a2.5 2.5 0 0 1 2 2.45v4a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 12.5v-4a2.5 2.5 0 0 1 2-2.45ZM8 9a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 20 20" id="icon-locked-20">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7 6a3 3 0 0 1 6 0v1H7V6ZM5 7V6a5 5 0 0 1 10 0v1a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-6a3 3 0 0 1 3-3Zm5 4a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1Z"
     />
   </symbol>
   <symbol viewBox="0 0 24 24" id="icon-locked-24">
     <path
-      d="M17.996 6.775A6 6 0 0 0 6 7v2H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1h-2V7l-.004-.225ZM16 9H8V7l.005-.2A4 4 0 0 1 16 7v2Zm-3 7.732V18a1 1 0 1 1-2 0v-1.268A2 2 0 0 1 12 13a2 2 0 0 1 1 3.732Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 7a4 4 0 1 1 8 0v2H8V7ZM6 9V7a6 6 0 1 1 12 0v2a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3Zm6 4a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z"
     />
   </symbol>
   <symbol viewBox="0 0 20 12" id="icon-maestro-12-colored">
@@ -5148,6 +5170,13 @@
       clip-rule="evenodd"
     />
   </symbol>
+  <symbol viewBox="0 0 20 20" id="icon-mail-20">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3H4Zm13 3.47V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v.47l6.44 4.357a1 1 0 0 0 1.12 0L17 5.47ZM3 7.883V15a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V7.884l-5.318 3.6a3 3 0 0 1-3.363 0L3 7.884Z"
+    />
+  </symbol>
   <symbol viewBox="0 0 24 24" id="icon-mail-24">
     <path
       fill-rule="evenodd"
@@ -5612,6 +5641,27 @@
       d="M15.028 5a5.5 5.5 0 0 0-4.448 2.265l-6.528 8.976A5.5 5.5 0 0 0 3 19.476V51.5a7.5 7.5 0 0 0 7.5 7.5h43a7.5 7.5 0 0 0 7.5-7.5V19.476a5.5 5.5 0 0 0-1.052-3.235L53.42 7.265A5.5 5.5 0 0 0 48.972 5H15.028ZM29.5 10H15.028a.5.5 0 0 0-.405.206L10.41 16H29.5v-6ZM8 21v30.5a2.5 2.5 0 0 0 2.5 2.5h19V21H8Zm26.5 33h19a2.5 2.5 0 0 0 2.5-2.5V21H34.5v33Zm19.09-38H34.5v-6h14.472a.5.5 0 0 1 .405.206L53.59 16Z"
     />
   </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-passkey-16">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4 4.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm4.236 2.183a3.5 3.5 0 1 0-5.471 0C1.12 7.581 0 9.305 0 11.5A2.5 2.5 0 0 0 2.5 14h6a2.5 2.5 0 0 0 2.5-2.5c0-2.195-1.12-3.919-2.764-4.817ZM5.5 8C3.536 8 2 9.39 2 11.5a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5C9 9.39 7.464 8 5.5 8ZM12 5a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm1-3a3 3 0 0 0-1 5.83V13a1 1 0 0 0 1 1h2a1 1 0 1 0 0-2h-1v-1h1a1 1 0 1 0 0-2h-1V7.83A3.001 3.001 0 0 0 13 2Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-passkey-24">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5 7.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Zm6.908 4.317a5.5 5.5 0 1 0-6.816 0A7.5 7.5 0 0 0 1 18.5 2.5 2.5 0 0 0 3.5 21h10a2.5 2.5 0 0 0 2.5-2.5 7.5 7.5 0 0 0-4.092-6.683ZM8.5 13A5.5 5.5 0 0 0 3 18.5a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5A5.5 5.5 0 0 0 8.5 13Zm8.5-3a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2-4a4 4 0 0 0-1 7.874V20a1 1 0 0 0 1 1h3a1 1 0 1 0 0-2h-2v-1h2a1 1 0 1 0 0-2h-2v-2.126A4.002 4.002 0 0 0 19 6Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 64 64" id="icon-passkey-64">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M13 20a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0Zm9.5-14.5C14.492 5.5 8 11.992 8 20c0 4.73 2.264 8.93 5.768 11.577C7.344 34.797 3 41.47 3 49.5A6.5 6.5 0 0 0 9.5 56h26a6.5 6.5 0 0 0 6.5-6.5c0-8.062-4.226-14.805-10.66-18.005A14.476 14.476 0 0 0 37 20c0-8.008-6.492-14.5-14.5-14.5ZM45 27a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0Zm5.5-10.5C44.701 16.5 40 21.201 40 27c0 4.938 3.408 9.079 8 10.2v16.3a2.5 2.5 0 0 0 2.5 2.5h8a2.5 2.5 0 0 0 0-5H53v-3.5h5.5a2.5 2.5 0 0 0 0-5H53v-5.3c4.592-1.121 8-5.263 8-10.2 0-5.799-4.701-10.5-10.5-10.5Zm-27.833 18C14.497 34.5 8 40.858 8 49.5A1.5 1.5 0 0 0 9.5 51h26a1.5 1.5 0 0 0 1.5-1.5c0-8.707-6.227-15-14.333-15Z"
+    />
+  </symbol>
   <symbol viewBox="0 0 16 16" id="icon-pause-16">
     <path
       d="M4.5 2A1.5 1.5 0 0 0 3 3.5v9a1.5 1.5 0 0 0 3 0v-9A1.5 1.5 0 0 0 4.5 2Zm7 0A1.5 1.5 0 0 0 10 3.5v9a1.5 1.5 0 0 0 3 0v-9A1.5 1.5 0 0 0 11.5 2Z"
@@ -7672,6 +7722,13 @@
       d="M16.294 4.291a1 1 0 0 1 1.415.003C18.54 5.13 19 5.957 19 7c0 1.044-.459 1.871-1.292 2.706a1 1 0 1 1-1.416-1.412C16.787 7.796 17 7.413 17 7c0-.413-.213-.797-.709-1.294a1 1 0 0 1 .003-1.415Z"
     />
   </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-swap-24">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M15.207.793a1 1 0 1 0-1.414 1.414L15.586 4H8a7 7 0 0 0-7 7v4a1 1 0 1 0 2 0v-4a5 5 0 0 1 5-5h7.586l-1.793 1.793a1 1 0 0 0 1.414 1.414l3.5-3.5a1 1 0 0 0 0-1.414l-3.5-3.5Zm-5 15.414a1 1 0 0 0-1.414-1.414l-3.5 3.5a1 1 0 0 0 0 1.414l3.5 3.5a1 1 0 0 0 1.414-1.414L8.414 20H16a7 7 0 0 0 7-7V9a1 1 0 1 0-2 0v4a5 5 0 0 1-5 5H8.414l1.793-1.793Z"
+    />
+  </symbol>
   <symbol viewBox="0 0 24 24" id="icon-switch-camera-24">
     <path
       d="M14.83 12c-.587-1.658-2.553-2.46-4.125-1.707-.468.224-1.057.234-1.424-.133-.392-.392-.382-1.126.117-1.43A4.977 4.977 0 0 1 12 8a4.99 4.99 0 0 1 4 2v-.5a1 1 0 1 1 2 0V13a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h.83Zm-1.532 3.707c-1.571.753-3.538-.05-4.124-1.707h.83a1 1 0 1 0 0-2h-3a1 1 0 0 0-1 1v3.5a1 1 0 1 0 2 0V16a4.992 4.992 0 0 0 4 2c.953 0 1.844-.267 2.602-.73.498-.304.509-1.038.117-1.43-.368-.367-.957-.357-1.425-.133Z"
@@ -8026,17 +8083,17 @@
     />
   </symbol>
   <symbol viewBox="0 0 16 16" id="icon-unlocked-16">
-    <path d="M7 10a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1Z" />
     <path
-      d="M8 1a4 4 0 0 1 3.995 3.8L12 5v1h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h7V5a2 2 0 0 0-3.995-.15L6 5H4a4 4 0 0 1 4-4Zm4 12V8H4v5h8Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.114 4.333A2.001 2.001 0 0 1 10 5v1H4.5A2.5 2.5 0 0 0 2 8.5v4A2.5 2.5 0 0 0 4.5 15h7a2.5 2.5 0 0 0 2.5-2.5v-4a2.5 2.5 0 0 0-2-2.45V5a4 4 0 0 0-7.772-1.333 1 1 0 1 0 1.886.666ZM11 8H4.5a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5H11ZM8 9a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1Z"
     />
   </symbol>
   <symbol viewBox="0 0 24 24" id="icon-unlocked-24">
     <path
-      d="M13 16.732A2 2 0 0 0 12 13a2 2 0 0 0-1 3.732V18a1 1 0 1 0 2 0v-1.268Z"
-    />
-    <path
-      d="M12 1a6 6 0 0 1 5.996 5.775L18 7v2h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1h12V7a4 4 0 0 0-7.995-.2L8 7H6a6 6 0 0 1 6-6ZM5 11v10h14V11H5Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.08 6.199A4.002 4.002 0 0 1 16 7v2H6a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3V7A6 6 0 0 0 6.12 5.801a1 1 0 0 0 1.96.398ZM17 11H6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-1Zm-5 2a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z"
     />
   </symbol>
   <symbol viewBox="0 0 24 24" id="icon-unselect-all-24">
@@ -8063,6 +8120,7 @@
       rx="1.5"
       fill="#fff"
       stroke="#000"
+      stroke-width="1"
     />
     <path
       d="M16.31 4.759c-1.03 0-1.478.706-1.478 1.46 0 .574.259 1.031 1.04 1.031 1.054 0 1.497-.773 1.497-1.519 0-.564-.284-.972-1.06-.972ZM16 6.615c-.163 0-.233-.138-.233-.36 0-.293.075-.866.438-.866.164 0 .219.134.219.329 0 .293-.08.897-.423.897Zm-2.044-1.856a1.48 1.48 0 0 0-.856.262c-.095-.151-.284-.262-.572-.262-.333 0-.582.12-.766.24l-.025-.2h-.79l-.424 2.393h.925l.294-1.678a.814.814 0 0 1 .318-.085c.09 0 .164.027.164.147 0 .031-.01.08-.014.12l-.264 1.496h.92l.293-1.678c.085-.04.2-.085.314-.085.09 0 .164.027.164.147 0 .031-.01.08-.015.12l-.263 1.496h.92l.283-1.598c.015-.085.03-.213.03-.302 0-.32-.164-.533-.636-.533Zm-4.22 0a1.5 1.5 0 0 0-.79.23l-.01-.19h-.801l-.423 2.393h.925l.294-1.678a.815.815 0 0 1 .318-.085c.09 0 .164.027.164.134 0 .044-.015.124-.02.164l-.258 1.465h.92l.283-1.598c.015-.085.03-.213.03-.302 0-.32-.164-.533-.632-.533Zm-2.94 0c-.985 0-1.463.764-1.463 1.483 0 .555.294.999 1.114.999.324 0 .657-.062.87-.155l.115-.693c-.303.138-.537.19-.78.19-.225 0-.394-.106-.394-.377.508-.004 1.383-.19 1.383-.799 0-.377-.303-.648-.845-.648Zm-.518 1.008c.025-.267.254-.453.428-.453.1 0 .184.053.184.16 0 .222-.438.293-.612.293Zm-2.084-.861c.054.102.09.226.09.408 0 .333-.265.822-.478 1.132l-.23-1.643-.944.08.433 2.31h1.079c.472-.556 1.054-1.346 1.054-1.955a.821.821 0 0 0-.144-.488l-.86.156Z"
@@ -8078,6 +8136,7 @@
       rx="1.5"
       fill="#fff"
       stroke="#000"
+      stroke-width="1"
     />
     <path
       d="M24.464 7.139c-1.545 0-2.216 1.06-2.216 2.191 0 .86.388 1.546 1.56 1.546 1.581 0 2.245-1.16 2.245-2.278 0-.846-.425-1.46-1.59-1.46ZM24 9.923c-.246 0-.35-.206-.35-.54 0-.44.111-1.298.656-1.298.246 0 .328.2.328.493 0 .44-.119 1.345-.634 1.345Zm-3.067-2.784c-.514 0-.887.14-1.283.393-.142-.227-.425-.393-.858-.393-.5 0-.873.18-1.149.36l-.037-.3h-1.187l-.634 3.59h1.388l.44-2.518c.12-.053.298-.126.477-.126.134 0 .246.04.246.22 0 .046-.014.12-.022.18l-.395 2.244h1.38l.44-2.518a1.15 1.15 0 0 1 .47-.126c.135 0 .247.04.247.22 0 .046-.015.12-.023.18l-.395 2.244h1.38l.425-2.398c.023-.126.045-.32.045-.453 0-.48-.246-.8-.955-.8Zm-6.329 0c-.53 0-.903.18-1.186.346l-.015-.286H12.2l-.634 3.59h1.388l.44-2.518c.12-.053.299-.126.478-.126.134 0 .246.04.246.2 0 .066-.022.186-.03.246l-.388 2.198h1.38l.426-2.398c.022-.126.045-.32.045-.453 0-.48-.247-.8-.948-.8Zm-4.41 0C8.717 7.139 8 8.284 8 9.363c0 .833.44 1.499 1.671 1.499.486 0 .985-.093 1.306-.233l.172-1.039c-.456.206-.806.286-1.172.286-.336 0-.589-.16-.589-.566.761-.007 2.074-.286 2.074-1.199 0-.566-.455-.972-1.268-.972ZM9.418 8.65c.037-.4.38-.68.641-.68.15 0 .276.08.276.24 0 .333-.656.44-.917.44ZM6.29 7.358c.082.154.134.34.134.613 0 .5-.395 1.232-.716 1.698l-.343-2.464-1.418.12.65 3.463h1.618c.71-.832 1.582-2.018 1.582-2.93 0-.287-.067-.513-.216-.733l-1.291.233Z"
@@ -8093,6 +8152,7 @@
       rx="1.5"
       fill="#fff"
       stroke="#000"
+      stroke-width="1"
     />
     <path
       d="M30.988 9.518c-1.957 0-2.807 1.412-2.807 2.922 0 1.145.491 2.06 1.975 2.06 2.003 0 2.845-1.545 2.845-3.037 0-1.128-.54-1.945-2.013-1.945ZM30.4 13.23c-.311 0-.444-.275-.444-.72 0-.586.142-1.731.832-1.731.311 0 .415.266.415.657 0 .586-.15 1.794-.803 1.794Zm-3.885-3.712c-.652 0-1.125.186-1.625.524-.18-.302-.54-.524-1.087-.524-.634 0-1.106.24-1.456.48l-.047-.4h-1.503l-.803 4.786h1.758l.557-3.356c.151-.072.378-.17.605-.17.17 0 .312.054.312.294 0 .062-.02.16-.028.24l-.501 2.992h1.748l.558-3.356c.16-.08.378-.17.595-.17.17 0 .312.054.312.294 0 .062-.02.16-.028.24l-.501 2.992h1.748l.539-3.197c.028-.168.057-.426.057-.603 0-.64-.312-1.066-1.21-1.066Zm-8.016 0c-.67 0-1.144.24-1.503.462l-.019-.383h-1.521l-.804 4.787h1.758l.558-3.356c.15-.072.378-.17.604-.17.17 0 .313.054.313.267 0 .089-.029.249-.038.328l-.492 2.931h1.748l.54-3.197c.028-.168.056-.426.056-.603 0-.64-.312-1.067-1.2-1.066Zm-5.587 0c-1.872 0-2.78 1.527-2.78 2.966 0 1.11.559 1.998 2.118 1.998.614 0 1.248-.124 1.654-.31l.217-1.386c-.577.275-1.02.382-1.484.382-.425 0-.746-.213-.746-.755.964-.009 2.627-.382 2.627-1.599 0-.754-.576-1.296-1.606-1.296Zm-.983 2.015c.047-.532.481-.905.812-.905.19 0 .35.106.35.32 0 .443-.832.585-1.162.585ZM7.967 9.811c.104.204.17.453.17.817 0 .666-.5 1.643-.907 2.264l-.435-3.285L5 9.767l.822 4.617h2.05c.899-1.11 2.005-2.69 2.005-3.907 0-.382-.086-.684-.275-.977l-1.635.311Z"
@@ -8108,6 +8168,7 @@
       rx="1.5"
       fill="#fff"
       stroke="#000"
+      stroke-width="1"
     />
     <path
       d="M40.773 12.69c-2.574 0-3.693 1.884-3.693 3.897 0 1.527.647 2.747 2.599 2.747 2.636 0 3.743-2.06 3.743-4.05 0-1.504-.709-2.594-2.649-2.594Zm-.771 4.95c-.41 0-.584-.367-.584-.96 0-.78.186-2.308 1.094-2.308.41 0 .547.355.547.876 0 .782-.199 2.392-1.057 2.392Zm-5.114-4.95c-.858 0-1.48.25-2.139.7-.237-.404-.709-.7-1.43-.7-.833 0-1.454.32-1.915.64l-.062-.533h-1.977l-1.057 6.383h2.312l.734-4.476c.199-.095.497-.225.796-.225.223 0 .41.07.41.39 0 .083-.025.213-.037.32l-.66 3.99h2.301l.734-4.475c.212-.107.497-.225.783-.225.224 0 .411.07.411.39 0 .083-.025.213-.038.32l-.659 3.99h2.301l.709-4.262c.037-.225.075-.568.075-.805 0-.853-.411-1.422-1.592-1.422Zm-10.548 0c-.882 0-1.504.32-1.977.616l-.025-.509h-2.002l-1.057 6.382h2.314l.733-4.475c.199-.095.497-.225.795-.225.225 0 .412.07.412.355 0 .118-.038.332-.05.438l-.647 3.907h2.3l.71-4.263a5.65 5.65 0 0 0 .074-.804c0-.853-.41-1.422-1.58-1.422Zm-7.35 0c-2.463 0-3.657 2.037-3.657 3.955 0 1.48.734 2.665 2.786 2.665.808 0 1.641-.166 2.176-.415l.286-1.847c-.759.367-1.343.51-1.953.51-.56 0-.982-.284-.982-1.007 1.27-.012 3.457-.509 3.457-2.131 0-1.007-.758-1.73-2.114-1.73Zm-1.294 2.688c.063-.71.634-1.207 1.07-1.207.248 0 .46.142.46.426 0 .592-1.095.781-1.53.781Zm-5.212-2.296c.136.272.224.603.224 1.09 0 .887-.66 2.19-1.194 3.018l-.574-4.38-2.362.213 1.082 6.158h2.698c1.181-1.48 2.637-3.588 2.637-5.21 0-.51-.112-.912-.361-1.303l-2.151.415Z"

package/dist/tokens/evo-dark.css

@@ -11,6 +11,7 @@
         --color-background-education: #2f373c;
         --color-background-accent: var(--color-blue-3);
         --color-background-invalid: var(--color-red-1);
+        --color-background-elevated: var(--color-neutral-7);
         --color-foreground-primary: var(--color-neutral-1);
         --color-foreground-secondary: var(--color-neutral-4);
         --color-foreground-disabled: var(--color-neutral-4);

package/dist/tokens/evo-light.css

@@ -10,6 +10,7 @@
     --color-background-education: #ecf7fe;
     --color-background-accent: var(--color-blue-4);
     --color-background-invalid: var(--color-red-1);
+    --color-background-elevated: var(--color-neutral-0);
     --color-foreground-primary: var(--color-neutral-7);
     --color-foreground-secondary: var(--color-neutral-5);
     --color-foreground-disabled: var(--color-neutral-3);

package/dist/tooltip/tooltip.css

@@ -25,7 +25,7 @@ span.tooltip {
   border-radius: var(--bubble-border-radius, var(--border-radius-50));
   position: relative;
   z-index: 1;
-  background-color: var(--tooltip-background-color, var(--color-background-primary));
+  background-color: var(--tooltip-background-color, var(--color-background-elevated));
   color: var(--tooltip-foreground-color, var(--color-foreground-primary));
 }
 span.tooltip__mask {
@@ -68,7 +68,7 @@ button.tooltip__close {
   transform: rotate(45deg);
   width: 8px;
   z-index: 0;
-  background-color: var(--tooltip-background-color, var(--color-background-primary));
+  background-color: var(--tooltip-background-color, var(--color-background-elevated));
 }
 .tooltip__pointer--top-left {
   top: -4px;

package/dist/tourtip/tourtip.css

@@ -25,7 +25,7 @@ span.tourtip {
   border-radius: var(--bubble-border-radius, var(--border-radius-100));
   position: relative;
   z-index: 1;
-  background-color: var(--tourtip-background-color, var(--color-background-primary));
+  background-color: var(--tourtip-background-color, var(--color-background-elevated));
   color: var(--tourtip-foreground-color, var(--color-foreground-primary));
 }
 span.tourtip__mask {
@@ -65,17 +65,13 @@ button.tourtip__close {
   width: 32px;
   outline-offset: -2px;
 }
-button.tourtip__close > svg {
-  fill: currentColor;
-  width: 14px;
-}
 .tourtip__pointer {
   height: 8px;
   position: absolute;
   transform: rotate(45deg);
   width: 8px;
   z-index: 0;
-  background-color: var(--tourtip-background-color, var(--color-background-primary));
+  background-color: var(--tourtip-background-color, var(--color-background-elevated));
 }
 .tourtip__pointer--top-left {
   top: -4px;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "17.1.0",
+    "version": "17.2.0-next.0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -45,7 +45,8 @@
         "copy:tokensToDocs": "ncp src/tokens docs/static",
         "copy:tokensToDist": "ncp src/tokens dist/tokens",
         "verify": "node scripts verify",
-        "version": "node scripts/jekyll-config && npm run build:storybook && npm run build && git add -A dist docs",
+        "version": "node scripts/jekyll-config && npm run build:storybook && npm run build && git add -A dist docs && changeset version",
+        "release": "npm run build && changeset publish",
         "transpile": "babel docs/src/js --out-dir docs/_babel",
         "build:snapshots": "npm run copy:assetsToStorybook && storybook build -o ./.storybook-percy",
         "snapshots": "npm run build:snapshots && npx gulp runSnapshots --stories $STORIES",
@@ -54,19 +55,25 @@
         "snapshots:execute:dry": "percy storybook ./.storybook-percy --dry-run --include",
         "snapshots:all": "npm run build:snapshots && percy storybook ./.storybook-percy --include '.*'",
         "snapshots:all:dry": "npm run build:snapshots && percy storybook --dry-run ./.storybook-percy --include '.*'",
-        "storybook": "npm run copy:assetsToStorybook && storybook dev -c .storybook"
+        "storybook": "npm run copy:assetsToStorybook && storybook dev -c .storybook",
+        "change": "changeset add",
+        "prerelease:start": "changeset pre enter next",
+        "prerelease:end": "changeset pre exit",
+        "release:manual": "npm run version && git commit -am '`npm pkg get version | tr -d \"`'"
     },
     "devDependencies": {
         "@babel/cli": "^7.23.4",
         "@babel/core": "^7.23.3",
         "@babel/preset-env": "^7.23.3",
+        "@changesets/changelog-github": "^0.5.0",
+        "@changesets/cli": "^2.27.1",
         "@commitlint/cli": "^18.4.3",
         "@commitlint/config-conventional": "^18.4.3",
         "@ebay/browserslist-config": "^2.6.0",
         "@floating-ui/dom": "^1.5.3",
         "@percy/cli": "^1.27.4",
         "@percy/storybook": "^5.0.0",
-        "@storybook/html": "^7.5.3",
+        "@storybook/html": "^7.1.1",
         "@storybook/html-webpack5": "^7.5.3",
         "babel-loader": "^9.1.2",
         "browser-sync": "^3.0.2",
@@ -81,10 +88,10 @@
         "gulp-clean-css": "^4",
         "gulp-less": "^5",
         "gulp-rename": "^2",
-        "husky": "^8.0.3",
+        "husky": "^9.0.7",
         "jekyll": "^3.0.0-beta1",
-        "jsdom": "^23.0.0",
-        "less-loader": "^11.1.0",
+        "jsdom": "^24.0.0",
+        "less-loader": "^12.1.0",
         "less-plugin-autoprefix": "^2",
         "less-plugin-clean-css": "^1.5.1",
         "lint-staged": "^15.1.0",
@@ -115,7 +122,7 @@
         "ncp": "^2",
         "npm-run-all": "^4",
         "postcss-less": "^6.0.0",
-        "postcss-loader": "^7.3.0",
+        "postcss-loader": "^8.0.0",
         "prettier": "^3.1.0",
         "rimraf": "^5",
         "storybook": "^7.5.3",
@@ -152,8 +159,5 @@
     "lint-staged": {
         "*.{js,css,md,less,json}": "prettier --write",
         "*.{css,less}": "stylelint --config .stylelintrc"
-    },
-    "dependencies": {
-        "-": "^0.0.1"
     }
 }

package/scripts/develop-module_proper/code-generators/doc-generator.js

@@ -4,14 +4,12 @@ const log = require("../../log");
 const writeLine = require("../util/line-writer");
 const BaseGenerator = require("./base-generator");
 
-const DS_VERSION = "DS6.5.v1.01";
-
 const getModuleDocContent = (
     moduleName,
-    moduleId
+    moduleId,
 ) => `<!-- Auto generated code -->
 <div id="${moduleId}">
-    {% include section-header.html name="${moduleId}" version=page.versions.${moduleId} %}
+    {% include section-header.html name="${moduleId}" version=page.module_metadata.${moduleId}.ds-component.version %}
 
     <p>This is generated documentation for ${moduleName}. Update it!</p>
 
@@ -36,6 +34,14 @@ const getMainContent = (moduleId) => `
 <img class="skin-graphic" src="{{ page.static_dir }}/skin-graphic.png" alt="" />
 `;
 
+const getMetadataContent = (moduleId) => `  ${moduleId}:
+    ds-component: # module's relationship with the eBay Design System
+      group: # eBay Design System component group
+      name: # eBay Design System component name
+      version: # version of the eBay Design System component implemented in Skin
+    status: # status, e.g. "beta", "deprecated", "in-progress"
+    submodules: # array of Skin modules used in this module`;
+
 /**
  * Code generation for docs
  */
@@ -59,14 +65,14 @@ class DocumentationGenerator extends BaseGenerator {
 
         log.info(
             "Docs added! Make changes in %s file.",
-            path.join(this.moduleDocFilePath)
+            path.join(this.moduleDocFilePath),
         );
     }
 
     _addDocsModuleDoc() {
         const moduleDocFilePath = path.join(
             this.docsCommonFolder,
-            `${this.moduleId}.html`
+            `${this.moduleId}.html`,
         );
         if (fs.existsSync(moduleDocFilePath)) {
             log.warn("[DOC][%s] Module doc already exists!", moduleDocFilePath);
@@ -74,7 +80,7 @@ class DocumentationGenerator extends BaseGenerator {
         }
         fs.writeFileSync(
             moduleDocFilePath,
-            getModuleDocContent(this.moduleName, this.moduleId)
+            getModuleDocContent(this.moduleName, this.moduleId),
         );
 
         this.moduleDocFilePath = moduleDocFilePath;
@@ -84,7 +90,7 @@ class DocumentationGenerator extends BaseGenerator {
         const filePathFromRoot = path.join(
             "docs",
             "_includes",
-            "module-list.html"
+            "module-list.html",
         );
         const newLineContent = `<li><a href="#${this.moduleId}">${this.moduleName}</a></li>`;
         writeLine({
@@ -111,14 +117,14 @@ class DocumentationGenerator extends BaseGenerator {
 
     _addDocsIndex() {
         const filePathFromRoot = path.join("docs", "index.html");
-        const newLineContent = `    ${this.moduleId}: ${DS_VERSION}`;
+        const newMetadataContent = getMetadataContent(this.moduleId);
         writeLine({
             filePathFromRoot,
-            sectionPredicate: (line) => line.match(/versions\s*:/),
-            newLineContent,
+            sectionPredicate: (line) => line.match(/module_metadata\s*:/),
+            newLineContent: newMetadataContent,
             duplicateCheckText: `\s*\t*${this.moduleId}:\s*\t*.+`,
-            getLineMeta: (prevLine, currentLine, nextLine) => ({
-                shouldAppend: !nextLine || currentLine > newLineContent,
+            getLineMeta: (_prevLine, currentLine, nextLine) => ({
+                shouldAppend: !nextLine || currentLine > newMetadataContent,
             }),
         });
     }

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

@@ -6,19 +6,19 @@ export const color = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Cell Phones, Smart Watches &amp; Accessories</button>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Smart Watch Accessories</button>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -35,19 +35,19 @@ export const fontSize = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Cell Phones, Smart Watches &amp; Accessories</button>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Smart Watch Accessories</button>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -65,19 +65,19 @@ export const RTL = () => `
         <ul>
             <li>
                 <button>ebay</button>
-                <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                     <use href="#icon-chevron-right-12"></use>
                 </svg>
             </li>
             <li>
                 <button>Cell Phones, Smart Watches &amp; Accessories</button>
-                <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                     <use href="#icon-chevron-right-12"></use>
                 </svg>
             </li>
             <li>
                 <button>Smart Watch Accessories</button>
-                <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                     <use href="#icon-chevron-right-12"></use>
                 </svg>
             </li>