@ebay/skin 18.0.8 → 18.2.0

package/src/sass/toggle-button-group/stories/list-layout-exceptions.stories.js

@@ -2,6 +2,55 @@ export default {
     title: "Skin/Toggle Button Group/List Layout/Layouts Exceptions",
 };
 
+export const minContainer2buttons = () => `
+<div style="width: 280px; border: 1px dashed orange;">
+    <div class="toggle-button-group toggle-button-group--list-layout" data-columns-min="2">
+        <ul aria-label="Buttons">
+            <li>
+                <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+`;
+
 export const _320container2buttons = () => `
 <div style="width: 320px; border: 1px dashed orange;">
     <div class="toggle-button-group toggle-button-group--list-layout" data-columns-xs="2">

package/src/sass/toggle-button-group/stories/list-layout.stories.js

@@ -133,6 +133,132 @@ export const mixedContent = () => `
 </div>
 `;
 
+export const _minContainer = () => `
+<div style="width: 240px; border: 1px dashed orange;">
+    <div class="toggle-button-group toggle-button-group--list-layout">
+        <ul aria-label="Buttons">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+`;
+
 export const _320container = () => `
 <div style="width: 320px; border: 1px dashed orange;">
     <div class="toggle-button-group toggle-button-group--list-layout">

package/src/sass/toggle-button-group/stories/minimal-layout-exceptions.stories.js

@@ -2,6 +2,78 @@ export default {
     title: "Skin/Toggle Button Group/Minimal Layout/Layouts Exceptions",
 };
 
+export const _mincontainer1button = () => `
+<div style="width: 240px; border: 1px dashed orange;">
+    <div class="toggle-button-group" data-columns-min="1">
+        <ul aria-label="Buttons">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">4.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">6</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">6.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">7</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">7.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">8</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">8.5</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+`;
+
 export const _320container3buttons = () => `
 <div style="width: 320px; border: 1px dashed orange;">
     <div class="toggle-button-group" data-columns-xs="3">

package/src/sass/toggle-button-group/stories/minimal-layout.stories.js

@@ -1,5 +1,78 @@
 export default { title: "Skin/Toggle Button Group/Minimal Layout" };
 
+export const minContainer = () => `
+<div style="width: 240px; border: 1px dashed orange;">
+    <div class="toggle-button-group">
+        <ul aria-label="Buttons">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">4.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">6</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">6.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">7</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">7.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">8</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">8.5</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+
+`;
+
 export const _320container = () => `
 <div style="width: 320px; border: 1px dashed orange;">
     <div class="toggle-button-group">

package/src/sass/toggle-button-group/toggle-button-group.scss

@@ -38,7 +38,7 @@
     --row-list-toggle-buttons-xl: 5;
 
     // Gallery Layout
-    --row-gallery-toggle-buttons-min: 1;
+    --row-gallery-toggle-buttons-min: 2;
     --row-gallery-toggle-buttons-xs: 2;
     --row-gallery-toggle-buttons-sm: 3;
     --row-gallery-toggle-buttons-md: 4;
@@ -49,6 +49,38 @@
     container: toggle-buttons-container / inline-size;
 }
 
+// These provide a generic override for the number of buttons per line
+// for containers under 320px wide. No more than 3 should be needed.
+@supports not (contain: inline-size) {
+    @media (max-width: $_screen-size-XS) {
+        .toggle-button-group[data-columns-min="1"] ul {
+            grid-template-columns: repeat(1, 1fr);
+        }
+
+        .toggle-button-group[data-columns-min="2"] ul {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        .toggle-button-group[data-columns-min="3"] ul {
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+}
+
+@container toggle-buttons-container (inline-size < #{$_screen-size-XS}) {
+    .toggle-button-group[data-columns-min="1"] ul {
+        grid-template-columns: repeat(1, 1fr);
+    }
+
+    .toggle-button-group[data-columns-min="2"] ul {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .toggle-button-group[data-columns-min="3"] ul {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
 .toggle-button-group ul {
     display: grid;
     gap: var(--spacing-100);
@@ -74,12 +106,20 @@
 }
 
 /* Layout Themes */
+.toggle-button-group--list-layout ul {
+    grid-template-columns: repeat(var(--row-list-toggle-buttons-min), 1fr);
+}
+
 .toggle-button-group--list-layout .toggle-button {
     justify-content: left;
     max-width: 100%;
     min-width: auto;
 }
 
+.toggle-button-group--gallery-layout ul {
+    grid-template-columns: repeat(var(--row-gallery-toggle-buttons-min), 1fr);
+}
+
 .toggle-button-group--gallery-layout li {
     max-width: 100%;
 }

package/src/sass/utility/utility.scss

@@ -71,6 +71,10 @@
     @include image-treatment(16px);
 }
 
+.image-disabled {
+    filter: var(--color-media-disabled-filter);
+}
+
 .text-truncate {
     overflow: hidden;
     text-overflow: ellipsis;

package/src/svg/icon/icon-alipay-cn-12-colored.svg

@@ -0,0 +1,44 @@
+<svg viewBox="0 0 20 12" xmlns="http://www.w3.org/2000/svg">
+  <rect
+    x=".5"
+    y=".5"
+    width="19"
+    height="11"
+    rx="1.5"
+    fill="#fff"
+    stroke="#191919"
+    stroke-width="1"
+  />
+  <path
+    d="m16.58 6.959-.221.477-.225-.477h-.219l.342.66v.46h.201v-.46l.001-.002.34-.658h-.219Z"
+    fill="#3F3B3A"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m15.164 7.854.075.226h.211l-.415-1.121h-.161l-.414 1.12h.211l.079-.225h.414Zm-.204-.606.156.465H14.8l.161-.465Zm-1.359-.289h-.438v1.12h.203v-.43h.235c.219 0 .372-.142.372-.345 0-.203-.153-.345-.372-.345Zm-.011.536h-.224V7.11h.224c.113 0 .18.098.18.193 0 .092-.063.19-.18.19Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M12.34 8.08h-.202V6.959h.203v1.12Zm-1.63 0V6.959h.204v.968h.48v.153h-.683Z"
+    fill="#3F3B3A"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m9.76 7.854.075.226h.211l-.415-1.121H9.47l-.414 1.12h.21l.08-.225h.414Zm-.204-.606.156.465h-.317l.161-.465Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M13.561 3.912h.453v.47h.184v.19h-.184v1.782a.178.178 0 0 1-.169.175h-.587v-.196h.23a.078.078 0 0 0 .073-.07V4.57h-1.116v-.189h1.116v-.47Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M12.97 4.833c.039 0 .072.024.089.057l.273.863h-.446l-.294-.92h.377Zm-1.545.277.52-1.22h.485l-.329.746h.158v1.927h-.436V5.111h-.398Zm5.415.851.159.535h-.002l.002.006h-2.491v-.19h.974v-.794h-.974v-.19h.974v-.374h-.974v-.189h2.431v.19h-.974v.374h.974v.189h-.974v.795h.496l-.122-.41h.422c.037 0 .068.024.079.058Zm-.406-1.647h-1.42v.279h-.506v-.468h.95v-.26h.53v.26h.821a.135.135 0 0 1 .131.137v.33h-.506v-.278Zm-6.117.454h.87c-.13.499-.457.871-.83 1.145.257.159.585.324.999.473v.219s-.646-.128-1.29-.5c-.643.375-1.307.5-1.307.5v-.231a3.94 3.94 0 0 0 1.02-.454 2.514 2.514 0 0 1-.722-.767h.452s.139.248.553.56c.462-.39.555-.752.555-.752H8.933v-.193h.845v-.31H8.776v-.192h1.002v-.301c0-.05.04-.092.09-.092h.45v.393h1.008v.193h-1.009v.31Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M3.796 3.545a.79.79 0 0 0-.794.787v3.337a.79.79 0 0 0 .794.787h3.37a.79.79 0 0 0 .793-.787v-.034a55.155 55.155 0 0 1-1.935-.84c-.437.532-1 .855-1.585.855-.99 0-1.325-.858-.857-1.422.102-.123.276-.24.545-.307.422-.102 1.093.065 1.722.27.113-.206.209-.434.28-.676H4.19v-.194h1v-.35H3.979v-.194h1.21V4.28s0-.084.086-.084h.489v.581h1.197v.195H5.764v.349h.977c-.094.38-.236.728-.414 1.035.297.106.563.207.761.273.662.219.847.246.871.249V4.332a.79.79 0 0 0-.794-.787H3.796Zm.544 2.66a1.5 1.5 0 0 0-.128.008c-.124.012-.357.066-.484.178-.38.329-.153.93.618.93.449 0 .896-.283 1.248-.738-.453-.22-.844-.382-1.254-.377Z"
+    fill="#1677FF"
+  />
+</svg>

package/src/svg/icon/icon-alipay-cn-18-colored.svg

@@ -0,0 +1,44 @@
+<svg viewBox="0 0 30 18" xmlns="http://www.w3.org/2000/svg">
+  <rect
+    x=".5"
+    y=".5"
+    width="29"
+    height="17"
+    rx="1.5"
+    fill="#fff"
+    stroke="#191919"
+    stroke-width="1"
+  />
+  <path
+    d="m25.341 10.508-.347.75-.353-.75h-.345l.537 1.037v.724h.316v-.724l.002-.004.535-1.033h-.345Z"
+    fill="#3F3B3A"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m23.116 11.913.118.355h.331l-.652-1.761h-.254l-.65 1.76h.331l.124-.354h.652Zm-.321-.952.245.73h-.499l.254-.73Zm-2.135-.454h-.69v1.76h.32v-.676h.37c.343 0 .583-.223.583-.542 0-.32-.24-.542-.584-.542Zm-.018.842h-.353v-.603h.352c.177 0 .283.154.283.303 0 .145-.099.3-.282.3Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M18.678 12.268h-.319v-1.761h.32v1.76Zm-2.561 0v-1.761h.319v1.52h.754v.24h-1.073Z"
+    fill="#3F3B3A"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m14.623 11.913.118.355h.331l-.653-1.761h-.253l-.65 1.76h.331l.123-.354h.653Zm-.321-.952.245.73h-.499l.254-.73Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M20.597 5.719h.711v.738h.29v.298h-.29v2.8a.28.28 0 0 1-.265.276h-.923v-.308h.362a.123.123 0 0 0 .115-.111V6.755h-1.755v-.297h1.755v-.74Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M19.666 7.167a.16.16 0 0 1 .141.09l.43 1.355h-.701l-.463-1.445h.593Zm-2.426.435.816-1.918h.762l-.516 1.173h.248v3.028h-.684V7.602h-.627Zm8.507 1.338.25.84h-.003l.003.01h-3.914v-.297h1.531v-1.25h-1.53v-.297h1.53v-.588h-1.53V7.06h3.82v.298h-1.531v.588h1.531v.297h-1.531v1.25h.78l-.193-.645h.663a.13.13 0 0 1 .124.092Zm-.637-2.59h-2.23v.44h-.797v-.736h1.494v-.41h.833v.41h1.29a.212.212 0 0 1 .206.216v.52h-.797v-.44Zm-9.611.714h1.367c-.205.783-.719 1.368-1.304 1.8a8.47 8.47 0 0 0 1.569.742v.344s-1.016-.2-2.027-.787c-1.01.591-2.054.787-2.054.787v-.363a6.19 6.19 0 0 0 1.604-.713c-.44-.314-.848-.71-1.135-1.205h.71s.218.39.868.879c.726-.612.873-1.18.873-1.18h-2.647v-.304h1.329v-.487h-1.575v-.303h1.575v-.473c0-.08.063-.144.14-.144h.707v.617h1.585v.303H15.5v.487Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M5.25 5.142c-.69 0-1.248.553-1.248 1.236v5.245c0 .683.558 1.236 1.248 1.236h5.294c.69 0 1.248-.553 1.248-1.236v-.054c-.023-.01-2.025-.836-3.042-1.321-.686.837-1.571 1.344-2.49 1.344-1.554 0-2.082-1.347-1.346-2.234.16-.194.433-.378.857-.482.662-.161 1.717.101 2.706.424.177-.324.327-.682.438-1.062H5.87v-.306h1.57v-.548H5.538v-.306H7.44v-.782s0-.131.135-.131h.767v.913h1.881v.306h-1.88v.548h1.535a6.187 6.187 0 0 1-.65 1.627c.466.167.884.325 1.196.429 1.04.344 1.33.386 1.368.39v-4c0-.683-.558-1.236-1.248-1.236H5.25Zm.854 4.181c-.067 0-.134.004-.201.011-.195.02-.56.104-.76.28-.599.517-.24 1.462.972 1.462.704 0 1.408-.446 1.96-1.16-.712-.345-1.326-.6-1.97-.593Z"
+    fill="#1677FF"
+  />
+</svg>

package/src/svg/icon/icon-alipay-cn-24-colored.svg

@@ -0,0 +1,44 @@
+<svg viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg">
+  <rect
+    x=".5"
+    y=".5"
+    width="37"
+    height="23"
+    rx="1.5"
+    fill="#fff"
+    stroke="#191919"
+    stroke-width="1"
+  />
+  <path
+    d="m33.101 14.056-.474 1.023-.481-1.023h-.47l.732 1.414v.987h.431v-.987l.003-.005.729-1.41h-.47Z"
+    fill="#3F3B3A"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m30.067 15.972.161.484h.452l-.89-2.401h-.345l-.887 2.4h.452l.168-.483h.889Zm-.437-1.298.334.996h-.68l.346-.996Zm-2.913-.619h-.939v2.4h.435v-.922h.504c.469 0 .797-.304.797-.74 0-.435-.328-.738-.797-.738Zm-.024 1.148h-.48v-.822h.48c.241 0 .385.21.385.412 0 .199-.134.41-.385.41Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M24.016 16.456h-.435v-2.401h.435v2.4Zm-3.493 0v-2.401h.435v2.074h1.029v.327h-1.464Z"
+    fill="#3F3B3A"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m18.485 15.972.161.484h.452l-.89-2.401h-.345l-.887 2.4h.452l.168-.483h.889Zm-.437-1.298.334.996h-.68l.346-.996Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M26.63 7.525h.972v1.008h.393v.406h-.393v3.818a.381.381 0 0 1-.363.376H25.98v-.42h.493a.168.168 0 0 0 .157-.152V8.94h-2.393v-.406h2.393V7.525Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M25.362 9.5c.085 0 .157.05.193.122l.585 1.85h-.956l-.63-1.972h.808Zm-3.309.594 1.113-2.616h1.04l-.704 1.6h.339v4.13h-.934v-3.114h-.854Zm11.602 1.826.34 1.145h-.003l.004.013h-5.337v-.405h2.087v-1.704H28.66v-.405h2.087v-.802H28.66v-.406h5.21v.406h-2.09v.802h2.088v.405H31.78v1.704h1.063l-.262-.88h.904c.08 0 .146.053.169.127Zm-.87-3.531h-3.04v.598h-1.087V7.984h2.037v-.558h1.137v.558h1.757a.288.288 0 0 1 .282.294v.71h-1.086v-.599Zm-13.105.972h1.865c-.28 1.068-.98 1.866-1.78 2.454.552.34 1.254.692 2.14 1.013v.468s-1.384-.273-2.763-1.073a9.808 9.808 0 0 1-2.801 1.073v-.495c.923-.274 1.637-.617 2.188-.972-.6-.429-1.156-.969-1.548-1.644h.968s.297.532 1.184 1.2c.99-.835 1.19-1.61 1.19-1.61h-3.61V9.36h1.813v-.664h-2.148v-.413h2.148v-.645c0-.109.085-.197.19-.197h.964v.842h2.163v.413H19.68v.664Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M5.705 6.74c-.941 0-1.702.754-1.702 1.685v7.152c0 .931.761 1.686 1.702 1.686h7.22c.94 0 1.7-.755 1.7-1.686v-.073c-.031-.013-2.76-1.14-4.147-1.802-.936 1.141-2.143 1.834-3.396 1.834-2.12 0-2.84-1.838-1.836-3.047.219-.264.591-.516 1.169-.657.903-.22 2.342.137 3.69.578a7.32 7.32 0 0 0 .598-1.449H6.549v-.417h2.142v-.747H6.097V9.38H8.69V8.314s0-.18.184-.18h1.047V9.38h2.564v.417H9.922v.747h2.093a8.437 8.437 0 0 1-.886 2.219c.635.228 1.205.443 1.63.584 1.418.47 1.816.528 1.867.534V8.426c0-.932-.762-1.687-1.701-1.687h-7.22Zm1.164 5.701a3.217 3.217 0 0 0-.274.015c-.265.027-.764.143-1.036.381-.816.706-.328 1.995 1.325 1.995.96 0 1.92-.608 2.674-1.582-.972-.47-1.81-.819-2.689-.809Z"
+    fill="#1677FF"
+  />
+</svg>

package/src/svg/icon/icon-alipay-cn-32-colored.svg

@@ -0,0 +1,44 @@
+<svg viewBox="0 0 50 32" xmlns="http://www.w3.org/2000/svg">
+  <rect
+    x=".5"
+    y=".5"
+    width="49"
+    height="31"
+    rx="1.5"
+    fill="#fff"
+    stroke="#191919"
+    stroke-width="1"
+  />
+  <path
+    d="m43.802 18.74-.632 1.364-.642-1.364h-.627l.976 1.886v1.316h.576v-1.316l.003-.007.972-1.879h-.626Z"
+    fill="#3F3B3A"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m39.757 21.296.215.645h.602l-1.186-3.202h-.461l-1.183 3.202h.603l.224-.645h1.186Zm-.584-1.73.447 1.327h-.908l.461-1.328Zm-3.883-.826h-1.252v3.2h.58v-1.23h.672c.625 0 1.062-.405 1.062-.986 0-.58-.437-.985-1.062-.985Zm-.032 1.53h-.64v-1.096h.64c.321 0 .514.28.514.55 0 .265-.18.546-.514.546Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M31.688 21.94h-.58v-3.2h.58v3.2Zm-4.657 0v-3.2h.58v2.765h1.371v.436h-1.95Z"
+    fill="#3F3B3A"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m24.313 21.296.215.645h.603l-1.187-3.202h-.46L22.3 21.941h.603l.224-.645h1.185Zm-.582-1.73.445 1.327h-.907l.462-1.328Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M35.176 10.033h1.294v1.344h.525v.54h-.525v5.093a.508.508 0 0 1-.484.5H34.31v-.559h.658a.223.223 0 0 0 .209-.203v-4.83h-3.19v-.541h3.19v-1.344Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M33.484 12.666a.29.29 0 0 1 .257.163l.78 2.466h-1.275l-.84-2.629h1.078Zm-4.413.792 1.485-3.488h1.386l-.938 2.133h.451v5.506H30.21v-4.15h-1.139Zm15.47 2.434.455 1.527h-.006l.006.018h-7.117v-.54h2.784v-2.272h-2.784v-.54h2.784v-1.07h-2.784v-.54h6.947v.54h-2.784v1.07h2.784v.54h-2.784v2.272h1.418l-.35-1.173h1.206c.106 0 .194.07.225.168Zm-1.16-4.707h-4.054v.797h-1.448v-1.338h2.716V9.9h1.515v.744h2.344a.385.385 0 0 1 .375.388v.95h-1.448v-.797Zm-17.474 1.296h2.486c-.374 1.424-1.307 2.488-2.372 3.271.735.454 1.671.924 2.853 1.351v.625s-1.846-.364-3.685-1.43a13.074 13.074 0 0 1-3.735 1.43v-.66c1.231-.366 2.183-.823 2.917-1.297-.799-.57-1.541-1.291-2.063-2.19h1.29s.396.708 1.579 1.598c1.32-1.112 1.586-2.147 1.586-2.147h-4.812v-.55h2.416v-.886h-2.863v-.551h2.863v-.86c0-.145.114-.262.255-.262h1.285v1.122h2.883v.55h-2.883v.886Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M7.273 8.985a2.258 2.258 0 0 0-2.27 2.249v9.535a2.258 2.258 0 0 0 2.27 2.248h9.626a2.258 2.258 0 0 0 2.269-2.248v-.097c-.043-.018-3.681-1.521-5.53-2.402-1.249 1.521-2.858 2.444-4.53 2.444-2.825 0-3.784-2.45-2.446-4.063.291-.351.788-.687 1.558-.875 1.205-.294 3.122.183 4.92.77.323-.59.595-1.24.797-1.931H8.4v-.556h2.856v-.996h-3.46v-.556h3.46v-1.422s0-.24.245-.24h1.396v1.661h3.42v.557h-3.42v.996h2.79a11.252 11.252 0 0 1-1.18 2.958c.846.303 1.607.591 2.173.78 1.89.626 2.42.703 2.489.71v-7.273A2.258 2.258 0 0 0 16.9 8.985H7.272Zm1.553 7.603a4.261 4.261 0 0 0-.366.02c-.354.035-1.018.19-1.381.508-1.089.94-.437 2.66 1.766 2.66 1.28 0 2.56-.811 3.566-2.11-1.296-.627-2.412-1.091-3.585-1.078Z"
+    fill="#1677FF"
+  />
+</svg>

package/src/svg/icon/icon-authenticity-guarantee-24.svg

@@ -1,10 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path
-    d="M17.707 8.293a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.586l6.293-6.293a1 1 0 0 1 1.414 0Z"
-  />
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
   <path
     fill-rule="evenodd"
-    d="M1.192 8.76a3.756 3.756 0 0 0 .875-2.113 4.98 4.98 0 0 1 1.448-3.132 4.98 4.98 0 0 1 3.133-1.449 3.756 3.756 0 0 0 2.113-.875A4.98 4.98 0 0 1 12 0a4.98 4.98 0 0 1 3.24 1.191 3.756 3.756 0 0 0 2.113.875 4.98 4.98 0 0 1 3.133 1.449 4.98 4.98 0 0 1 1.448 3.133 3.76 3.76 0 0 0 .875 2.113A4.98 4.98 0 0 1 24 12a4.98 4.98 0 0 1-1.19 3.239 3.757 3.757 0 0 0-.876 2.113 4.98 4.98 0 0 1-1.448 3.133 4.98 4.98 0 0 1-3.133 1.449 3.756 3.756 0 0 0-2.114.875A4.98 4.98 0 0 1 12 24a4.98 4.98 0 0 1-3.24-1.191 3.755 3.755 0 0 0-2.112-.875 4.98 4.98 0 0 1-3.133-1.449 4.98 4.98 0 0 1-1.448-3.132 3.756 3.756 0 0 0-.876-2.113A4.98 4.98 0 0 1 0 12a4.98 4.98 0 0 1 1.192-3.24ZM4.06 6.807a2.98 2.98 0 0 1 .87-1.877 2.98 2.98 0 0 1 1.878-.869 5.756 5.756 0 0 0 3.25-1.346A2.98 2.98 0 0 1 12 2a2.98 2.98 0 0 1 1.943.714 5.756 5.756 0 0 0 3.25 1.346 2.98 2.98 0 0 1 1.878.869 2.98 2.98 0 0 1 .87 1.879 5.756 5.756 0 0 0 1.345 3.25c.447.524.714 1.2.714 1.942a2.98 2.98 0 0 1-.714 1.943 5.756 5.756 0 0 0-1.345 3.25 2.98 2.98 0 0 1-.87 1.878 2.98 2.98 0 0 1-1.878.87 5.756 5.756 0 0 0-3.25 1.345A2.98 2.98 0 0 1 12 22a2.98 2.98 0 0 1-1.943-.714 5.756 5.756 0 0 0-3.25-1.346 2.98 2.98 0 0 1-1.878-.869 2.98 2.98 0 0 1-.869-1.878 5.756 5.756 0 0 0-1.346-3.25A2.98 2.98 0 0 1 2 12c0-.743.268-1.419.714-1.943a5.756 5.756 0 0 0 1.347-3.25Z"
     clip-rule="evenodd"
+    d="M2.067 6.647a3.756 3.756 0 0 1-.875 2.113A4.98 4.98 0 0 0 0 12a4.98 4.98 0 0 0 1.191 3.24 3.75 3.75 0 0 1 .876 2.113 4.98 4.98 0 0 0 1.448 3.132 4.98 4.98 0 0 0 3.133 1.449c.77.061 1.524.374 2.113.875A4.98 4.98 0 0 0 12 24a4.98 4.98 0 0 0 3.24-1.191 3.756 3.756 0 0 1 2.113-.875 4.98 4.98 0 0 0 3.133-1.449 4.98 4.98 0 0 0 1.448-3.133 3.76 3.76 0 0 1 .875-2.113A4.98 4.98 0 0 0 24 12a4.98 4.98 0 0 0-1.19-3.239 3.756 3.756 0 0 1-.876-2.113 4.98 4.98 0 0 0-1.448-3.133 4.98 4.98 0 0 0-3.133-1.449 3.756 3.756 0 0 1-2.114-.875A4.98 4.98 0 0 0 12 0a4.98 4.98 0 0 0-3.24 1.191 3.756 3.756 0 0 1-2.112.875 4.98 4.98 0 0 0-3.133 1.449 4.98 4.98 0 0 0-1.448 3.132ZM4.93 4.929a2.98 2.98 0 0 0-.87 1.878 5.756 5.756 0 0 1-1.346 3.25A2.98 2.98 0 0 0 2 12c0 .743.268 1.419.714 1.943a5.756 5.756 0 0 1 1.346 3.25 2.98 2.98 0 0 0 .87 1.878 2.98 2.98 0 0 0 1.878.869 5.76 5.76 0 0 1 3.25 1.346A2.98 2.98 0 0 0 12 22a2.98 2.98 0 0 0 1.943-.714 5.756 5.756 0 0 1 3.25-1.346 2.98 2.98 0 0 0 1.879-.869 2.98 2.98 0 0 0 .869-1.879 5.756 5.756 0 0 1 1.345-3.25A2.98 2.98 0 0 0 22 12a2.98 2.98 0 0 0-.714-1.943 5.756 5.756 0 0 1-1.346-3.25 2.98 2.98 0 0 0-.869-1.878 2.98 2.98 0 0 0-1.878-.869 5.756 5.756 0 0 1-3.25-1.346A2.98 2.98 0 0 0 12 2a2.98 2.98 0 0 0-1.943.714A5.756 5.756 0 0 1 6.808 4.06a2.98 2.98 0 0 0-1.878.869Zm11.781 5.106a1 1 0 0 0-1.414-1.414l-4.632 4.631-1.962-1.962a1 1 0 0 0-1.414 1.415l2.67 2.669a1 1 0 0 0 1.414 0l5.338-5.339Z"
   />
 </svg>

package/src/svg/icon/icon-authenticity-guarantee-filled-16-colored.svg

@@ -0,0 +1,12 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M13.657 2.343a3.32 3.32 0 0 1 .976 2.3c.007.387.163.764.432 1.042C15.644 6.285 16 7.1 16 8c0 .9-.356 1.716-.936 2.316a1.547 1.547 0 0 0-.431 1.042 3.322 3.322 0 0 1-.976 2.299 3.322 3.322 0 0 1-2.3.976 1.548 1.548 0 0 0-1.041.431A3.32 3.32 0 0 1 8 16a3.32 3.32 0 0 1-2.316-.936 1.547 1.547 0 0 0-1.041-.431 3.322 3.322 0 0 1-2.3-.976 3.322 3.322 0 0 1-.975-2.299 1.548 1.548 0 0 0-.432-1.042A3.322 3.322 0 0 1 0 8c0-.9.357-1.716.936-2.316.269-.278.425-.655.432-1.042.014-.833.34-1.663.975-2.299a3.322 3.322 0 0 1 2.3-.976 1.547 1.547 0 0 0 1.04-.431A3.324 3.324 0 0 1 8 0c.9 0 1.716.357 2.316.936.278.269.655.425 1.042.432.834.014 1.663.34 2.3.975Z"
+    fill="#0968F6"
+  />
+  <path
+    d="M11.207 5.793a1 1 0 0 1 0 1.414l-3.5 3.5a1 1 0 0 1-1.414 0l-1.5-1.5a1 1 0 0 1 1.414-1.414L7 8.586l2.793-2.793a1 1 0 0 1 1.414 0Z"
+    fill="#fff"
+  />
+</svg>