@ebay/skin 17.4.1 → 17.5.0

package/dist/svg/icons.svg

@@ -15,20 +15,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-20-colored"
       x1="26.984"
@@ -44,11 +30,11 @@
       <stop offset=".785" stop-color="#4EE04B" />
     </linearGradient>
     <linearGradient
-      id="ref-ai-spectrum-filled-20-colored"
-      x1="26.984"
-      y1="14.065"
-      x2="14.21"
-      y2="27.71"
+      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" />
@@ -85,6 +71,20 @@
       <stop offset=".562" stop-color="#0968F6" />
       <stop offset=".785" stop-color="#4EE04B" />
     </linearGradient>
+    <linearGradient
+      id="ref-ai-spectrum-filled-20-colored"
+      x1="26.984"
+      y1="14.065"
+      x2="14.21"
+      y2="27.71"
+      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-thin-16-colored"
       x1="21.21"
@@ -621,6 +621,13 @@
       d="M10.505 2H20a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h6.505ZM3 10.951v7.711l4.673-4.154a5 5 0 0 1 7.324-6.51L19.495 4h-8.617L3 10.951ZM7.855 4 3 8.284V5a1 1 0 0 1 1-1h3.855Zm8.471 5.492L21 5.338v7.71L13.122 20H4.505l4.498-3.998a5 5 0 0 0 7.324-6.51ZM20 20h-3.855L21 15.716V19a1 1 0 0 1-1 1ZM9 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z"
     />
   </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-bank-16">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.555.168a1 1 0 0 0-1.11 0l-6 4A1 1 0 0 0 2 6h12a1 1 0 0 0 .555-1.832l-6-4ZM8 2.202 10.697 4H5.303L8 2.202ZM4 7a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0V8a1 1 0 0 1 1-1Zm11 7a1 1 0 0 1-1 1H2a1 1 0 1 1 0-2h12a1 1 0 0 1 1 1ZM9 8a1 1 0 0 0-2 0v3a1 1 0 1 0 2 0V8Zm3-1a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0V8a1 1 0 0 1 1-1Z"
+    />
+  </symbol>
   <symbol viewBox="0 0 24 24" id="icon-bank-24">
     <path
       fill-rule="evenodd"
@@ -1239,6 +1246,13 @@
       d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.71 10.29a1 1 0 1 1-1.41 1.41L8 9.41l-2.29 2.3A1 1 0 0 1 4.3 10.3L6.59 8l-2.3-2.29a1.004 1.004 0 0 1 1.42-1.42L8 6.59l2.29-2.29a1 1 0 0 1 1.41 1.41L9.41 8l2.3 2.29Z"
     />
   </symbol>
+  <symbol viewBox="0 0 20 20" id="icon-clear-20">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10Zm4.707-14.707a1 1 0 0 0-1.414 0L10 8.586 6.707 5.293a1 1 0 0 0-1.414 1.414L8.586 10l-3.293 3.293a1 1 0 1 0 1.414 1.414L10 11.414l3.293 3.293a1 1 0 0 0 1.414-1.414L11.414 10l3.293-3.293a1 1 0 0 0 0-1.414Z"
+    />
+  </symbol>
   <symbol viewBox="0 0 24 24" id="icon-clear-24">
     <path
       d="M0 12C0 5.373 5.373 0 12 0c3.183 0 6.235 1.264 8.485 3.515A11.996 11.996 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12Zm17.968 5.233a.996.996 0 0 0-.32-.989l-4.277-4.27 4.267-4.272a.995.995 0 0 0-1.402-1.404l-4.268 4.271-4.267-4.28a.998.998 0 1 0-1.413 1.413l4.278 4.271-4.268 4.281a.995.995 0 0 0 1.403 1.404l4.267-4.281 4.277 4.27a.994.994 0 0 0 1.723-.414Z"
@@ -2192,7 +2206,9 @@
   </symbol>
   <symbol viewBox="0 0 24 24" id="icon-download-24">
     <path
-      d="M12.7 18.71a1 1 0 0 1-1.41 0L4.3 11.7a1 1 0 0 1 1.41-1.41l5.29 5.3V2a1 1 0 1 1 2 0v13.59l5.29-5.29a1 1 0 0 1 1.41 1.41l-7 7ZM1 22a1 1 0 0 1 1-1h20a1 1 0 0 1 0 2H2a1 1 0 0 1-1-1Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 1a1 1 0 0 1 1 1v12.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 1.414-1.414L11 14.586V2a1 1 0 0 1 1-1ZM2 21a1 1 0 1 0 0 2h20a1 1 0 1 0 0-2H2Z"
     />
   </symbol>
   <symbol viewBox="0 0 20 12" id="icon-ebay-balance-12-colored">
@@ -2363,6 +2379,13 @@
       clip-rule="evenodd"
     />
   </symbol>
+  <symbol viewBox="0 0 64 64" id="icon-ebay-international-shipping-64">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M20.214 37.666A74.415 74.415 0 0 1 20 32c0-2.04.081-4.032.237-5.957-4.345-.76-8.139-1.946-11.402-3.46a24.929 24.929 0 0 0-1.811 10.513c3.164 1.67 7.873 3.414 13.19 4.57Zm.601 5.226c-4.803-.918-9.24-2.312-12.798-3.811a25.055 25.055 0 0 0 16.749 16.856c-1.758-3.324-3.137-7.83-3.95-13.045Zm5.204.779C27.995 43.883 30 44 32 44c2.002 0 4.006-.117 5.98-.33-.542 2.935-1.276 5.534-2.137 7.686-.946 2.366-1.948 3.945-2.805 4.85-.58.614-.928.76-1.038.79-.11-.03-.458-.176-1.038-.79-.857-.905-1.859-2.484-2.805-4.85-.86-2.152-1.595-4.75-2.137-7.685Zm12.673-5.119c-2.2.285-4.45.448-6.692.448s-4.491-.163-6.692-.448A68.667 68.667 0 0 1 25 32c0-1.825.07-3.597.2-5.302 2.152.198 4.417.302 6.8.302s4.648-.104 6.8-.302c.13 1.705.2 3.477.2 5.302 0 2.276-.108 4.47-.308 6.552Zm4.493 4.34c-.814 5.215-2.193 9.72-3.95 13.045a25.055 25.055 0 0 0 16.748-16.856c-3.558 1.5-7.995 2.893-12.798 3.811Zm13.791-9.796c-3.164 1.67-7.873 3.414-13.19 4.57.14-1.835.214-3.729.214-5.666 0-2.04-.081-4.032-.237-5.957 4.345-.76 8.139-1.946 11.402-3.46a24.927 24.927 0 0 1 1.811 10.513ZM32 22c2.196 0 4.268-.093 6.221-.27-.557-3.511-1.383-6.598-2.378-9.086-.946-2.366-1.948-3.945-2.805-4.85-.58-.614-.928-.76-1.038-.79-.11.03-.458.176-1.038.79-.857.905-1.859 2.484-2.805 4.85-.995 2.488-1.821 5.575-2.378 9.087 1.953.175 4.026.269 6.221.269Zm11.178-.932c3.73-.673 6.931-1.68 9.643-2.911A25.054 25.054 0 0 0 39.234 8.063c1.753 3.316 3.13 7.807 3.944 13.005ZM11.18 18.157c2.712 1.232 5.912 2.238 9.643 2.911.814-5.198 2.19-9.69 3.944-13.005A25.054 25.054 0 0 0 11.18 18.157ZM32 62c16.569 0 30-13.431 30-30C62 15.431 48.569 2 32 2 15.431 2 2 15.431 2 32c0 16.569 13.431 30 30 30Z"
+    />
+  </symbol>
   <symbol viewBox="0 0 16 16" id="icon-ebay-live-16">
     <path
       d="M3.817 2.294a1 1 0 0 1-.01 1.414A6.054 6.054 0 0 0 2 8c0 1.662.7 3.195 1.801 4.287a1 1 0 1 1-1.408 1.42A8.06 8.06 0 0 1 0 8c0-2.15.88-4.214 2.403-5.716a1 1 0 0 1 1.414.01Z"
@@ -2941,6 +2964,13 @@
       d="M4 6a1 1 0 0 0-1 1v8.75c0 .138.112.25.25.25h.92a3.001 3.001 0 0 1 5.66 0H14V7a1 1 0 0 0-1-1H4Zm-.75 12h.92a3.001 3.001 0 0 0 5.66 0h4.34a3.001 3.001 0 0 0 5.66 0h.92A2.25 2.25 0 0 0 23 15.75v-3.28a2.25 2.25 0 0 0-.557-1.482l-2.817-3.22A2.25 2.25 0 0 0 17.933 7H16a3 3 0 0 0-3-3H4a3 3 0 0 0-3 3v8.75A2.25 2.25 0 0 0 3.25 18ZM16 9v5.17A3.001 3.001 0 0 1 19.83 16h.92a.25.25 0 0 0 .25-.25v-3.28a.25.25 0 0 0-.062-.165l-2.817-3.22A.25.25 0 0 0 17.933 9H16Zm1 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm-9-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
     />
   </symbol>
+  <symbol viewBox="0 0 64 64" id="icon-fast-and-free-64">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5 16.5A2.5 2.5 0 0 1 7.5 14h28a2.5 2.5 0 0 1 2.5 2.5V44H25.626a8.504 8.504 0 0 0-16.252 0H7.5A2.5 2.5 0 0 1 5 41.5v-25ZM9.374 49H7.5A7.5 7.5 0 0 1 0 41.5v-25A7.5 7.5 0 0 1 7.5 9h28a7.5 7.5 0 0 1 7.5 7.5v.5h5.74a6.5 6.5 0 0 1 4.792 2.108l8.76 9.556A6.5 6.5 0 0 1 64 33.056V42.5a6.5 6.5 0 0 1-6.5 6.5h-2.874a8.504 8.504 0 0 1-16.252 0H25.626a8.504 8.504 0 0 1-16.252 0ZM43 38.752V22h5.74a1.5 1.5 0 0 1 1.106.486l8.76 9.556A1.5 1.5 0 0 1 59 33.056V42.5a1.5 1.5 0 0 1-1.5 1.5h-2.874A8.504 8.504 0 0 0 43 38.752Zm0 7.748a3.5 3.5 0 1 0 7 0 3.5 3.5 0 0 0-7 0Zm-22 0a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
+    />
+  </symbol>
   <symbol viewBox="0 0 16 16" id="icon-feedback-16">
     <path
       fill-rule="evenodd"
@@ -3720,6 +3750,20 @@
       d="M3 3a1 1 0 0 0-2 0v16a3 3 0 0 0 3 3h18a1 1 0 1 0 0-2H4a1 1 0 0 1-1-1V3Zm2.263 12.324 5.495-5.995.02-.02a.997.997 0 0 1 1.434-.011l2.261 2.261 5.794-6.24a1 1 0 0 1 1.466 1.361l-6.496 6.996a.995.995 0 0 1-1.15.235.997.997 0 0 1-.298-.208l-2.258-2.257-4.794 5.23a1 1 0 0 1-1.474-1.352Z"
     />
   </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-graph-dynamic-16">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6 3.333 2.8 7.597a1 1 0 0 1-1.6-1.2L4.8 1.6c.6-.8 1.8-.8 2.4 0L9 3.996h2.586l-.293-.293a1 1 0 1 1 1.414-1.414l2 2a1 1 0 0 1 0 1.414l-2 2a1 1 0 1 1-1.414-1.414l.293-.293H8.75a1.5 1.5 0 0 1-1.2-.6L6 3.334Zm-4 7.664a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1Zm13 3v-3a1 1 0 0 0-2 0v3a1 1 0 1 0 2 0Zm-5-3a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-3-2a1 1 0 0 0-2 0v5a1 1 0 1 0 2 0v-5Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-graph-dynamic-24">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.49 3.11a.25.25 0 0 1 .422.011l2.866 4.783a2.25 2.25 0 0 0 1.93 1.093h5.878l-1.293 1.293a1 1 0 0 0 1.414 1.414l3-3a1 1 0 0 0 0-1.414l-3-3a1 1 0 1 0-1.414 1.414l1.293 1.293h-5.877a.25.25 0 0 1-.215-.122l-2.867-4.782C9.78.678 7.747.627 6.83 1.997L1.17 10.44a1 1 0 1 0 1.662 1.114L8.49 3.11Zm.177 7.887a1 1 0 0 1 1 1v9a1 1 0 1 1-2 0v-9a1 1 0 0 1 1-1Zm-6.667 5a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Zm14.333 1a1 1 0 1 0-2 0v4a1 1 0 1 0 2 0v-4Zm4.667-1a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0v-5Z"
+    />
+  </symbol>
   <symbol viewBox="0 0 16 16" id="icon-grid-view-16">
     <path
       d="M6 7H1a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1ZM2 5h3V3H2v2Zm13 2h-5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1Zm-4-2h3V3h-3v2ZM1 15h5a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1H1a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1Zm4-2H2v-2h3v2Zm10 2h-5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1Zm-4-2h3v-2h-3v2Z"
@@ -6853,6 +6897,13 @@
       d="M19 20H8.3c2.09-2.43 2.87-4.31 2.8-6h5.91c.55 0 1-.45 1-1s-.45-1-1-1H10.6c-.484-1.14-1.252-2.142-1.65-3.32C8.042 5.955 10.135 3 13 3c2.573 0 4.427 1.816 5.03 4.24a1 1 0 0 0 1.94-.48C19.142 3.462 16.48 1 13 1c-2.37 0-4.18 1.2-5.22 2.84-1.03 1.61-1.33 3.67-.73 5.48.314.942.81 1.84 1.32 2.69H5c-.55 0-1 .45-1 1s.45 1 1 1h4.09c.09 1.19-.5 3-3.8 6.29 0 0 0 .01-.01.02-.28.28-.342.706-.21 1.07a.99.99 0 0 0 .92.61H19c.55 0 1-.45 1-1s-.45-1-1-1Z"
     />
   </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-print-16">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5V4H5V2.5ZM3 4V2.5A2.5 2.5 0 0 1 5.5 0h5A2.5 2.5 0 0 1 13 2.5V4h.5A2.5 2.5 0 0 1 16 6.5v4a2.5 2.5 0 0 1-2.5 2.5H13v.5a2.5 2.5 0 0 1-2.5 2.5h-5A2.5 2.5 0 0 1 3 13.5V13h-.5A2.5 2.5 0 0 1 0 10.5v-4A2.5 2.5 0 0 1 2.5 4H3Zm0 7V9a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v2h.5a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5H3Zm2 2.5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5V10H5v3.5Z"
+    />
+  </symbol>
   <symbol viewBox="0 0 24 24" id="icon-print-24">
     <path d="M17 9a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2h-3Z" />
     <path
@@ -7378,6 +7429,34 @@
       clip-rule="evenodd"
     />
   </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-ship-and-local-16">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.387 2.223A.5.5 0 0 1 3.803 2H6v1H2.869l.518-.777ZM8 3V2h2.197a.5.5 0 0 1 .416.223l.519.777H8Zm4 2H8v.5a.997.997 0 0 1-1 1 1 1 0 0 1-1-1V5H2v5.5a.5.5 0 0 0 .5.5h4.557A4.18 4.18 0 0 1 7 10.316v-.008C7 7.928 9.015 6 11.5 6c.169 0 .336.009.5.026V5Zm2 1v.725c1.206.773 2 2.09 2 3.583 0 2.288-1.784 3.841-4.209 5.599a.497.497 0 0 1-.582 0c-1.35-.979-2.5-1.893-3.256-2.907H2.5A2.5 2.5 0 0 1 0 10.5V4.454a2.5 2.5 0 0 1 .42-1.387l1.303-1.954A2.5 2.5 0 0 1 3.803 0h6.394a2.5 2.5 0 0 1 2.08 1.113l1.303 1.954c.274.411.42.894.42 1.387V6Zm-.728 6.022c.533-.636.728-1.158.728-1.714C14 9.115 12.964 8 11.5 8S9 9.115 9 10.309c0 .556.195 1.078.728 1.712.424.507 1.009 1.022 1.772 1.61.763-.588 1.348-1.103 1.772-1.609Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-ship-and-local-24">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7 3a1 1 0 0 0-.8.4L5 5h5.5V3H7Zm5.5 0v2H18l-1.2-1.6A1 1 0 0 0 16 3h-3.5Zm0 4H19v3.048a5.837 5.837 0 0 0-.75-.048c-3.168 0-5.75 2.551-5.75 5.714 0 .442.05.873.146 1.286H5a1 1 0 0 1-1-1V7h6.5v2a1 1 0 1 0 2 0V7Zm1.045 12H5a3 3 0 0 1-3-3V6.667a3 3 0 0 1 .6-1.8l2-2.667A3 3 0 0 1 7 1h9a3 3 0 0 1 2.4 1.2l2 2.667a3 3 0 0 1 .6 1.8v4.028c1.785.968 3 2.85 3 5.02a5.671 5.671 0 0 1-1.214 3.511c-.955 1.216-2.34 2.39-3.94 3.577a1 1 0 0 1-1.192 0c-1.6-1.187-2.986-2.36-3.94-3.577a5.758 5.758 0 0 1-.169-.226Zm4.705-1.813a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-3.75-1.473C14.5 13.67 16.172 12 18.25 12c2.078 0 3.75 1.67 3.75 3.714 0 .86-.293 1.648-.787 2.278-.682.868-1.684 1.77-2.963 2.755-1.28-.984-2.281-1.887-2.963-2.755a3.672 3.672 0 0 1-.787-2.278Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-shirt-16">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.25 2H6.827l-.077.001V2.2a1.25 1.25 0 1 0 2.5 0V2Zm1.986.5a3.25 3.25 0 0 1-6.472 0l-2.56 1.08A.333.333 0 0 0 2 3.886V6h2a1 1 0 0 1 1 1v6.201c.069.068.196.175.416.293.447.24 1.25.505 2.584.505a1 1 0 0 1 .03.001c1.317-.004 2.11-.267 2.555-.506.219-.118.346-.225.415-.292V7a1 1 0 0 1 1-1h2V3.885a.333.333 0 0 0-.204-.307L11.236 2.5ZM13 8h2a1 1 0 0 0 1-1V3.885c0-.938-.563-1.786-1.428-2.15L11.631.496A6.334 6.334 0 0 0 9.173 0H6.827c-.844 0-1.68.17-2.458.497L1.428 1.735A2.333 2.333 0 0 0 0 3.885V7a1 1 0 0 0 1 1h2v5.5a1 1 0 0 0 .051.316c.165.494.668 1.036 1.417 1.44.786.422 1.918.74 3.499.743L8 16c1.599 0 2.74-.318 3.532-.744.75-.404 1.252-.946 1.417-1.44A.999.999 0 0 0 13 13.5V8Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-shirt-24">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10 3.01a7 7 0 0 1 .386-.01h3.228a7 7 0 0 1 .386.01 2 2 0 0 1-4 0ZM10.386 1h3.228a9 9 0 0 1 3.027.524l4.368 1.56A3 3 0 0 1 23 5.91V10a1 1 0 0 1-1 1h-3v8.5a.999.999 0 0 1-.051.316C18.607 20.843 16.692 23 12 23c-4.691 0-6.607-2.157-6.949-3.184A1 1 0 0 1 5 19.5V11H2a1 1 0 0 1-1-1V5.91a3 3 0 0 1 1.991-2.826l4.368-1.56A9 9 0 0 1 10.386 1ZM12 21c3.569 0 4.755-1.39 5-1.738V10a1 1 0 0 1 1-1h3V5.91a1 1 0 0 0-.664-.942L15.98 3.412a4 4 0 0 1-7.958 0L3.664 4.968A1 1 0 0 0 3 5.909V9h3a1 1 0 0 1 1 1v9.262C7.245 19.61 8.431 21 12 21Z"
+    />
+  </symbol>
   <symbol viewBox="0 0 24 24" id="icon-shoe-box-24">
     <path
       fill-rule="evenodd"
@@ -7780,6 +7859,20 @@
       d="M6.595 4.051A3 3 0 0 1 9.442 2h5.117a3 3 0 0 1 2.845 2.051l.317.949H21a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h3.28l.315-.949ZM9.442 4a1 1 0 0 0-.95.684L7.95 6.316A1 1 0 0 1 7 7H3a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-4a1 1 0 0 1-.949-.684l-.544-1.632A1 1 0 0 0 14.56 4H9.442Z"
     />
   </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-target-16">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 0a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2.586L9.328 8.086a2.5 2.5 0 1 1-1.414-1.414L11 3.586V1a1 1 0 0 1 1-1ZM2 9a5 5 0 0 1 5.835-4.93 1 1 0 0 0 .33-1.973 7 7 0 1 0 5.738 5.738 1 1 0 0 0-1.972.33A5 5 0 1 1 2 9Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-target-24">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M20 1a1 1 0 1 0-2 0v3.586l-7.707 7.707a1 1 0 1 0 1.414 1.414L19.414 6H23a1 1 0 1 0 0-2h-3V1ZM2 13.5A8.5 8.5 0 0 1 10.5 5c1.108 0 2.164.211 3.131.595a1 1 0 0 0 .738-1.86A10.475 10.475 0 0 0 10.5 3C4.701 3 0 7.701 0 13.5S4.701 24 10.5 24 21 19.299 21 13.5c0-1.364-.26-2.67-.736-3.869a1 1 0 0 0-1.86.738A8.5 8.5 0 1 1 2 13.5Zm8.11-3.479a1 1 0 0 0-.22-1.988A5.502 5.502 0 0 0 10.5 19a5.502 5.502 0 0 0 5.466-4.89 1 1 0 1 0-1.987-.22A3.502 3.502 0 0 1 7 13.5a3.502 3.502 0 0 1 3.11-3.479Z"
+    />
+  </symbol>
   <symbol viewBox="0 0 16 16" id="icon-text-messaging-16">
     <path
       d="M3 5a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm1 2a1 1 0 0 0 0 2h4a1 1 0 0 0 0-2H4Z"
@@ -8149,7 +8242,9 @@
   </symbol>
   <symbol viewBox="0 0 24 24" id="icon-upload-24">
     <path
-      d="M5.707 9.707a1 1 0 0 1-1.414-1.414l7-7c.187-.188.443-.291.707-.293.264.002.52.105.707.293l7 7a1 1 0 0 1-1.414 1.414L13 4.414V18a1 1 0 1 1-2 0V4.414L5.707 9.707ZM2 21a1 1 0 0 0 0 2h20a1 1 0 0 0 0-2H2Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.293 1.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1-1.414 1.414L13 4.414V17a1 1 0 1 1-2 0V4.414L5.707 9.707a1 1 0 0 1-1.414-1.414l7-7ZM2 21a1 1 0 1 0 0 2h20a1 1 0 1 0 0-2H2Z"
     />
   </symbol>
   <symbol viewBox="0 0 20 12" id="icon-venmo-12-colored">
@@ -8238,10 +8333,9 @@
   </symbol>
   <symbol viewBox="0 0 24 24" id="icon-video-24">
     <path
-      d="M21 3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3.001a1 1 0 0 1-1-1v-2.943a1.084 1.084 0 0 1 0-.114V4a1 1 0 0 1 1-1h18Zm-1 2H4v14h16V5Z"
-    />
-    <path
-      d="M9.752 8.068A.5.5 0 0 0 9 8.5v7a.5.5 0 0 0 .752.432l6-3.5a.5.5 0 0 0 0-.864l-6-3.5Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H5ZM4 6a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6Zm11.671 5.435-5.6-3.333C9.605 7.825 9 8.144 9 8.668v6.664c0 .524.605.843 1.071.566l5.6-3.333a.65.65 0 0 0 0-1.13Z"
     />
   </symbol>
   <symbol viewBox="0 0 20 12" id="icon-visa-12-colored">

package/dist/toast-dialog/toast-dialog.css

@@ -52,8 +52,9 @@
   margin: 0;
 }
 button.toast-dialog__close {
-  align-self: center;
+  align-self: flex-start;
   border: 0;
+  flex-shrink: 0;
   color: var(--toast-dialog-foreground-color, var(--color-foreground-on-information));
   -webkit-margin-start: auto;
           margin-inline-start: auto;

package/dist/toggle-button/toggle-button.css

@@ -47,6 +47,12 @@
   border-color: var(--color-stroke-disabled);
   box-shadow: 0 0 0 1px var(--color-stroke-disabled);
 }
+.toggle-button:not([aria-disabled="true"], [disabled]):hover {
+  background-color: var(--state-layer-hover);
+}
+.toggle-button:not([aria-disabled="true"], [disabled]):active {
+  background-color: var(--state-layer-pressed);
+}
 .toggle-button__content {
   align-self: center;
   display: flex;

package/dist/tokens/evo-light.css

@@ -89,10 +89,10 @@
     --color-marketing-orange-background-3: var(--color-orange-3);
     --color-marketing-magenta-foreground-4: var(--color-neutral-0);
     --color-marketing-magenta-background-4: var(--color-magenta-4);
-    --state-layer-focus: rgba(var(--color-neutral-8-rgb), var(--opacity-100));
-    --state-layer-hover: rgba(var(--color-neutral-8-rgb), var(--opacity-100));
-    --state-layer-pressed: rgba(var(--color-neutral-8-rgb), var(--opacity-150));
-    --state-layer-drag: rgba(var(--color-neutral-8-rgb), var(--opacity-200));
+    --state-layer-focus: rgba(var(--color-neutral-8-rgb), var(--opacity-50));
+    --state-layer-hover: rgba(var(--color-neutral-8-rgb), var(--opacity-50));
+    --state-layer-pressed: rgba(var(--color-neutral-8-rgb), var(--opacity-100));
+    --state-layer-drag: rgba(var(--color-neutral-8-rgb), var(--opacity-150));
     --color-ai-gradient-full-spectrum: linear-gradient(
         223deg,
         var(--color-ai-solid-yellow-strong) 9.79%,

package/dist/tooltip/tooltip.css

@@ -18,7 +18,6 @@ span.tooltip {
   position: absolute;
   top: 0;
   transform: scale3d(1, 1, 1);
-  width: -webkit-max-content;
   width: max-content;
   z-index: 1;
 }

package/dist/tourtip/tourtip.css

@@ -18,7 +18,6 @@ span.tourtip {
   position: absolute;
   top: 0;
   transform: scale3d(1, 1, 1);
-  width: -webkit-max-content;
   width: max-content;
   z-index: 1;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "17.4.1",
+    "version": "17.5.0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -61,24 +61,24 @@
         "prerelease:end": "changeset pre exit || :"
     },
     "devDependencies": {
-        "@babel/cli": "^7.24.1",
-        "@babel/core": "^7.24.4",
-        "@babel/preset-env": "^7.24.4",
+        "@babel/cli": "^7.24.6",
+        "@babel/core": "^7.24.6",
+        "@babel/preset-env": "^7.24.6",
         "@changesets/changelog-github": "^0.5.0",
-        "@changesets/cli": "^2.27.1",
-        "@commitlint/cli": "^19.2.2",
+        "@changesets/cli": "^2.27.5",
+        "@commitlint/cli": "^19.3.0",
         "@commitlint/config-conventional": "^19.2.2",
-        "@ebay/browserslist-config": "^2.8.0",
-        "@floating-ui/dom": "^1.6.3",
-        "@percy/cli": "^1.28.3",
+        "@ebay/browserslist-config": "^2.9.0",
+        "@floating-ui/dom": "^1.6.5",
+        "@percy/cli": "^1.28.7",
         "@percy/storybook": "^5.0.3",
-        "@storybook/html": "^8.0.8",
-        "@storybook/html-webpack5": "^8.0.8",
+        "@storybook/html": "^8.1.4",
+        "@storybook/html-webpack5": "^8.1.4",
         "babel-loader": "^9.1.3",
         "browser-sync": "^3.0.2",
         "btoa": "^1",
         "cross-env": "^7",
-        "eslint": "^9.0.0",
+        "eslint": "^9.3.0",
         "eslint-config-ebay": "^1",
         "eslint-config-prettier": "^9",
         "eslint-plugin-prettier": "^5",
@@ -89,11 +89,11 @@
         "gulp-rename": "^2",
         "husky": "^9.0.11",
         "jekyll": "^3.0.0-beta1",
-        "jsdom": "^24.0.0",
+        "jsdom": "^24.1.0",
         "less-loader": "^12.2.0",
         "less-plugin-autoprefix": "^2",
         "less-plugin-clean-css": "^1.5.1",
-        "lint-staged": "^15.2.2",
+        "lint-staged": "^15.2.5",
         "makeup-alert-dialog": "~0.2.0",
         "makeup-combobox": "~0.3.0",
         "makeup-confirm-dialog": "~0.2.0",
@@ -101,7 +101,7 @@
         "makeup-dialog-button": "~0.3.0",
         "makeup-drawer-dialog": "0.1.0",
         "makeup-expander": "~0.10.1",
-        "makeup-floating-label": "~0.3.2",
+        "makeup-floating-label": "~0.3.3",
         "makeup-fullscreen-dialog": "0.1.0",
         "makeup-input-dialog": "0.1.0",
         "makeup-key-emitter": "~0.3.1",
@@ -124,13 +124,13 @@
         "postcss-loader": "^8.1.1",
         "prettier": "^3.2.5",
         "rimraf": "^5",
-        "storybook": "^8.0.8",
-        "stylelint": "^16.3.1",
+        "storybook": "^8.1.4",
+        "stylelint": "^16.6.1",
         "stylelint-config-standard": "^36",
         "stylelint-no-unsupported-browser-features": "^8",
         "stylelint-order": "^6",
         "stylelint-prettier": "^5",
-        "svgo": "^3.2.0",
+        "svgo": "^3.3.2",
         "webpack": "^5.91.0",
         "webpack-cli": "^5.1.4",
         "winston": "^3.13.0",

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

@@ -31,3 +31,19 @@ export const textSpacing = () => `
     </div>
 </div>
 `;
+
+export const baseWithHeaderOverflow = () => `
+<div aria-labelledby="alert-dialog-title" aria-modal="true" class="alert-dialog alert-dialog--mask-fade" role="alertdialog">
+    <div class="alert-dialog__window alert-dialog__window--fade">
+        <div class="alert-dialog__header">
+            <h2 id="alert-dialog-title" class="alert-dialog__title">Alert! This title is so long that it wraps to the next line. No dialog should ever have a title this long.</h2>
+        </div>
+        <div class="alert-dialog__main">
+            <p id="alert-description-0">You must acknowledge this alert to continue.</p>
+        </div>
+        <div class="alert-dialog__footer">
+            <button class="btn btn--primary alert-dialog__acknowledge" aria-describedby="alert-description-0">OK</button>
+        </div>
+    </div>
+</div>
+`;

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

@@ -33,3 +33,20 @@ export const textSpacing = () => `
     </div>
 </div>
 `;
+
+export const baseWithHeaderOverflow = () => `
+<div aria-labelledby="confirm-dialog-title" aria-modal="true" class="confirm-dialog confirm-dialog--mask-fade" role="dialog">
+    <div class="confirm-dialog__window confirm-dialog__window--fade">
+        <div class="confirm-dialog__header">
+            <h2 id="confirm-dialog-title" class="confirm-dialog__title">This title is long enough that it needs to wrap into multiple lines. No dialog header should ever be this long.</h2>
+        </div>
+        <div class="confirm-dialog__main">
+            <p id="confirm-dialog__description">You will permanently lose this address.</p>
+        </div>
+        <div class="confirm-dialog__footer">
+            <button class="btn confirm-dialog__reject">Cancel</button>
+            <button class="btn btn--primary confirm-dialog__confirm" aria-describedby="confirm-dialog__description">Delete</button>
+        </div>
+    </div>
+</div>
+`;

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

@@ -5,9 +5,22 @@ export const base = () => `
     <span class="textbox textbox--icon-end">
         <input class="textbox__control" placeholder="YYYY-MM-DD" type="text" />
         <button class="icon-btn icon-btn--transparent" type="button" aria-label="Calendar">
-        <svg aria-hidden="true" class="icon icon--calendar-24" width="16" height="16">
-            <use href="#icon-calendar-24"></use>
-        </svg>
+            <svg aria-hidden="true" class="icon icon--calendar-24" width="16" height="16">
+                <use href="#icon-calendar-24"></use>
+            </svg>
+        </button>
+    </span>
+</span>
+`;
+
+export const disabled = () => `
+<span class="date-textbox">
+    <span class="textbox textbox--icon-end">
+        <input class="textbox__control" placeholder="YYYY-MM-DD" type="text" disabled />
+        <button class="icon-btn icon-btn--transparent" type="button" aria-label="Calendar" disabled>
+            <svg aria-hidden="true" class="icon icon--calendar-24" width="16" height="16">
+                <use href="#icon-calendar-24"></use>
+            </svg>
         </button>
     </span>
 </span>
@@ -18,9 +31,9 @@ export const textSpacing = () => `
     <span class="textbox textbox--icon-end">
         <input class="textbox__control" placeholder="YYYY-MM-DD" type="text" />
         <button class="icon-btn icon-btn--transparent" type="button" aria-label="Calendar">
-        <svg aria-hidden="true" class="icon icon--calendar-24" width="16" height="16">
-            <use href="#icon-calendar-24"></use>
-        </svg>
+            <svg aria-hidden="true" class="icon icon--calendar-24" width="16" height="16">
+                <use href="#icon-calendar-24"></use>
+            </svg>
         </button>
     </span>
 </span>

package/src/less/drawer-dialog/drawer-dialog.less

@@ -17,6 +17,7 @@
 }
 
 .drawer-dialog__header .fake-link {
+    align-self: flex-start;
     text-decoration: none;
 }
 
@@ -66,11 +67,13 @@
 
 // inherits from .icon-btn
 // Added icon button selector so it doesn't override fake-link
-button.icon-button.drawer-dialog__close {
-    background-color: transparent;
+button.icon-btn.drawer-dialog__close {
+    align-self: flex-start;
     border: 0;
-    height: auto;
-    outline-offset: -8px;
+    height: 32px;
+    min-width: 32px;
+    position: relative;
+    width: 32px;
     z-index: 1;
 }
 

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

@@ -256,3 +256,30 @@ export const textClose = () => `
     </div>
 </div>
 `;
+
+export const withFooterAndHeaderOverflow = () => `
+<div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog drawer-dialog--mask-fade-slow" role="dialog">
+    <div class="drawer-dialog__window drawer-dialog__window--slide">
+        <button class="drawer-dialog__handle"></button>
+        <div class="drawer-dialog__header">
+            <h2 id="dialog-title" class="large-text-1 bold-text">Heading that is so long it needs to wrap across multiple lines. In order for this to happen, text needs to span the entire width of the screen. No dialog header should ever be this long.</h2>
+            <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
+                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="drawer-dialog__main">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            </p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+        </div>
+        <div class="drawer-dialog__footer">
+            <button class="btn">Cancel</button>
+            <button class="btn btn--primary">Submit</button>
+        </div>
+    </div>
+</div>
+`;

package/src/less/fullscreen-dialog/fullscreen-dialog.less

@@ -23,6 +23,7 @@
 }
 
 .fullscreen-dialog__header .fake-link {
+    align-self: flex-start;
     outline-offset: 4px;
     text-decoration: none;
 }
@@ -46,7 +47,7 @@ button.icon-btn.fullscreen-dialog__close {
 // inherits from .icon-btn
 button.fullscreen-dialog__close,
 button.fullscreen-dialog__back {
-    align-self: center;
+    align-self: flex-start;
     border: 0;
     padding: 0;
     position: relative;

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

@@ -143,3 +143,26 @@ export const textSpacing = () => `
     </div>
 </div>
 `;
+
+export const closeButtonWithHeaderOverflow = () => `
+<div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
+    <div class="fullscreen-dialog__window">
+        <div class="fullscreen-dialog__header">
+            <h2 id="fullscreen-dialog-title">Dialog Full screen with title so long that it needs to wrap into multiple lines. This is a fullscreen dialog so it needs to be even longer than in others before it overflows. No dialog header should ever be this long.</h2>
+            <button class="icon-btn fullscreen-dialog__close" type="button" aria-label="Close Dialog">
+                <svg class="icon icon--close-16" aria-hidden="true">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="fullscreen-dialog__main">
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+        </div>
+    </div>
+</div>
+`;