@ebay/skin 16.3.0 → 16.4.0

package/src/less/infotip/infotip.less

@@ -110,6 +110,7 @@ span.infotip__heading {
 
 // todo: refactor out this dependency. Use a mixin instead
 .infotip .icon-btn {
+    display: inline-flex;
     flex-shrink: 0; // todo: Should move to icon-btn in next major
     height: 20px;
     min-width: 20px;

package/src/less/mixins/private/button-mixins.less

@@ -1,5 +1,9 @@
-@button-height-small: 40px;
+@button-height-xsmall: 32px; // Rename to small after next major version
+@button-height-small: 40px; // Deprecated, use regular instead
+@button-height-regular: 40px;
 @button-height-large: 48px;
+@button-padding-vertical-small: 6px;
+@button-padding-horizontal-small: 16px;
 @button-padding-vertical: 9.5px;
 @button-padding-horizontal: 20px;
 @button-padding-vertical-large: 13px;
@@ -31,6 +35,13 @@
     }
 }
 
+.btn-large() {
+    border-radius: var(--btn-border-radius, calc(@button-height-large / 2));
+    font-size: @font-size-medium;
+    min-height: @button-height-large;
+    padding: @button-padding-vertical-large @button-padding-horizontal;
+}
+
 .btn-icon-base() {
     align-self: center;
 

package/src/less/segmented-buttons/segmented-buttons.less

@@ -1,12 +1,17 @@
 @import "../variables/variables.less";
 @import "../mixins/private/button-mixins.less";
 
+@segmented-buttons-padding: @spacing-50;
+
 .segmented-buttons {
     border: 1px solid var(--color-stroke-default);
-    border-radius: 24px;
+    border-radius: var(
+        --segmented-button-border-radius,
+        calc(@button-height-large / 2)
+    );
     max-width: 720px;
     min-width: 215px;
-    padding: 4px;
+    padding: @segmented-buttons-padding;
 }
 
 .segmented-buttons > ul {
@@ -22,19 +27,23 @@
 }
 
 .segmented-buttons > ul > li:not(:first-child) {
-    margin-left: 8px;
+    margin-left: @spacing-100;
 }
 
 .segmented-buttons__button {
     background-color: transparent;
     border: none;
-    border-radius: var(--btn-border-radius, calc(@button-height-small / 2));
+    border-radius: var(--btn-border-radius, calc(@button-height-regular / 2));
     font-size: @font-size-regular;
-    min-height: @button-height-small;
-    padding: 8px 16px;
+    min-height: @button-height-regular - (@segmented-buttons-padding * 2);
+    padding: @spacing-100 @spacing-200;
     width: 100%;
 }
 
+.segmented-buttons--large .segmented-buttons__button {
+    min-height: @button-height-large - (@segmented-buttons-padding * 2);
+}
+
 .segmented-buttons__button-cell {
     .btn-cell-base();
 
@@ -64,6 +73,6 @@
 [dir="rtl"] {
     .segmented-buttons > ul > li:not(:first-child) {
         margin-left: 0;
-        margin-right: 8px;
+        margin-right: @spacing-100;
     }
 }

package/src/less/segmented-buttons/stories/segmented-buttons.stories.js

@@ -20,6 +20,16 @@ export const shortItems = () => `
     </div>
 `;
 
+export const large = () => `
+    <div class="segmented-buttons segmented-buttons--large">
+        <ul>
+            <li><button type="button" class="segmented-buttons__button" aria-current="true">Day</button></li>
+            <li><button type="button" class="segmented-buttons__button">Month</button></li>
+            <li><button type="button" class="segmented-buttons__button">Year</button></li>
+        </ul>
+    </div>
+`;
+
 export const withIcons = () => `
     <div class="segmented-buttons">
         <ul>

package/src/less/textbox/textbox.less

@@ -130,7 +130,7 @@ input.textbox__control--large {
 
 input.textbox__control:not(:read-only):focus,
 textarea.textbox__control:not(:read-only):focus {
-    .border-color-token(textbox-focus-border-color, color-stroke-default);
+    .border-color-token(textbox-focus-border-color, color-stroke-strong);
     .background-color-token(textbox-focus-background-color, color-background-primary);
     outline: 0;
 }

package/src/less/toggle-button/stories/gallery-layout-responsive.stories.js

@@ -0,0 +1,121 @@
+export default { title: "Skin/Toggle Button/Gallery Layout Responsive" };
+
+export const smallButtonWithImage = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout" 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">Image Button Title</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const smallButtonWithCSSImageContainBackground = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false">
+    <span class="toggle-button__image-container">
+        <span class="toggle-button__image" style="background-image: url('https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-position-y: 20%; background-size: contain;">
+        </span>
+    </span>
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Image Button Title</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const smallButtonWithCSSImageCoverBackground = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false">
+    <span class="toggle-button__image-container">
+        <span class="toggle-button__image" style="background-image: url('https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-position-y: 20%; background-size: cover;">
+        </span>
+    </span>
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Image Button Title</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const mediumButtonWithImage = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" style="width: 260px;">
+    <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">Image Button Title</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const mediumButtonWithCSSImageContainBackground = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" style="width: 260px;">
+    <span class="toggle-button__image-container">
+        <span class="toggle-button__image" style="background-image: url('https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-position-y: 20%; background-size: contain;">
+        </span>
+    </span>
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Image Button Title</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const mediumButtonWithCSSImageCoverBackground = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" style="width: 260px;">
+    <span class="toggle-button__image-container">
+        <span class="toggle-button__image" style="background-image: url('https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-position-y: 20%; background-size: cover;">
+        </span>
+    </span>
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Image Button Title</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const largeButtonWithImage = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" style="width: 342px;">
+    <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">Image Button Title</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const largeButtonWithCSSImageContainBackground = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" style="width: 342px;">
+    <span class="toggle-button__image-container">
+        <span class="toggle-button__image" style="background-image: url('https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-position-y: 20%; background-size: contain;">
+        </span>
+    </span>
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Image Button Title</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const largeButtonWithCSSImageCoverBackground = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" style="width: 342px;">
+    <span class="toggle-button__image-container">
+        <span class="toggle-button__image" style="background-image: url('https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-position-y: 20%; background-size: cover;">
+        </span>
+    </span>
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Image Button Title</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;

package/src/less/toggle-button/stories/gallery-layout.stories.js

@@ -0,0 +1,97 @@
+export default { title: "Skin/Toggle Button/Gallery Layout" };
+
+export const iconTitleSubtitle = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false">
+    <span class="toggle-button__icon">
+        <svg aria-hidden="true" class="icon icon--on-the-way-16" focusable="false" height="64" width="64">
+            <use href="#icon-on-the-way-16"></use>
+        </svg>
+    </span>
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Icon Button Title</span>
+        <span class="toggle-button__subtitle">Icon Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const longTitle = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" style="width: 168px;">
+    <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">Long Title for Toggle Button</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const profileImageTitleSubtitle = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout" 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">Image Button Title</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const landscapeImageTitleSubtitle = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false">
+    <span class="toggle-button__image-container">
+        <span class="toggle-button__image">
+            <img alt="" src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg">
+        </span>
+    </span>
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Image Button Title</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const squareImageTitleSubtitle = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout" 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-square-pic.jpg" alt="">
+        </span>
+    </span>
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Image Button Title</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const profileCSSImageContainBackground = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false">
+    <span class="toggle-button__image-container">
+        <span class="toggle-button__image" style="background-image: url('https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-position-y: 20%; background-size: contain;">
+        </span>
+    </span>
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Image Button Title</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const profileCSSImageCoverBackground = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false">
+    <span class="toggle-button__image-container">
+        <span class="toggle-button__image" style="background-image: url('https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-position-y: 20%; background-size: cover;">
+        </span>
+    </span>
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Image Button Title</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;

package/src/less/toggle-button/stories/list-layout.stories.js

@@ -0,0 +1,100 @@
+export default { title: "Skin/Toggle Button/List Layout" };
+
+export const titleOnly = () => `
+<button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Simple Text Button</span>
+    </span>
+</button>
+`;
+
+export const titleSubtitle = () => `
+<button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Text Title</span>
+        <span class="toggle-button__subtitle">Text Subtitle</span>
+    </span>
+</button>
+`;
+
+export const titleMultilineSubtitle = () => `
+<button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Multiline Text Title</span>
+        <span class="toggle-button__subtitle">
+            <p>Text Subtitle Line 1</p>
+            <p>Text Subtitle Line 2 (max)</p>
+        </span>
+    </span>
+</button>
+`;
+
+export const iconTitleSubtitle = () => `
+<button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+    <span class="toggle-button__icon">
+        <svg aria-hidden="true" class="icon icon--on-the-way-16" focusable="false" height="16" width="16">
+            <use href="#icon-on-the-way-16"></use>
+        </svg>
+    </span>
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Icon Button Title</span>
+        <span class="toggle-button__subtitle">Icon Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const longTitle = () => `
+<button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false" style="width: 168px;">
+    <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">Long Title for Toggle Button</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const profileImageTitleSubtitle = () => `
+<button type="button" class="toggle-button toggle-button--list-layout" 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">Image Button Title</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const landscapeImageTitleSubtitle = () => `
+<button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+    <span class="toggle-button__image-container">
+        <span class="toggle-button__image">
+            <img alt="" src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg">
+        </span>
+    </span>
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Image Button Title</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;
+
+export const squareImageTitleSubtitle = () => `
+<button type="button" class="toggle-button toggle-button--list-layout" 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-square-pic.jpg" alt="">
+        </span>
+    </span>
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">Image Button Title</span>
+        <span class="toggle-button__subtitle">Image Button Subtitle</span>
+    </span>
+</button>
+`;

package/src/less/toggle-button/stories/minimal-layout.stories.js

@@ -0,0 +1,17 @@
+export default { title: "Skin/Toggle Button/Minimal Layout" };
+
+export const toggledOff = () => `
+<button type="button" class="toggle-button" aria-pressed="false">
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">4.5</span>
+    </span>
+</button>
+`;
+
+export const toggledOn = () => `
+<button type="button" class="toggle-button" aria-pressed="true">
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">4.5</span>
+    </span>
+</button>
+`;

package/src/less/toggle-button/toggle-button.less

@@ -0,0 +1,165 @@
+@import "../variables/variables.less";
+
+:root {
+    --toggle-button-height-min: 72px;
+    --toggle-button-width-min: 72px;
+    --toggle-button-width-max: 342px;
+    --toggle-button-list-width-min: 224px;
+    --toggle-button-list-width-max: 342px;
+    --toggle-button-gallery-width-min: 168px;
+    --toggle-button-gallery-width-max: 342px;
+}
+
+.toggle-button {
+    background-color: var(--color-background-primary);
+    border: 1px solid var(--color-stroke-default);
+    border-radius: @spacing-100;
+    box-shadow: 0 0 0 1px transparent;
+    color: var(--color-foreground-primary);
+    display: inline-flex;
+    font-size: @font-size-14;
+    justify-content: center;
+    margin-right: @spacing-100;
+    margin-top: auto;
+    max-width: var(--toggle-button-width-max);
+    min-height: var(--toggle-button-height-min);
+    min-width: var(--toggle-button-width-min);
+    padding: 0 @spacing-200;
+    vertical-align: top;
+
+    &:focus-visible {
+        outline-offset: 1px;
+        outline-style: outset;
+        outline-width: 2px;
+    }
+}
+
+.toggle-button[aria-pressed="true"] {
+    background-color: var(--color-background-secondary);
+    border: 1px solid var(--color-stroke-strong);
+    box-shadow: 0 0 0 1px var(--color-stroke-strong);
+    font-weight: bold;
+}
+
+.toggle-button__content {
+    align-self: center;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+}
+
+.toggle-button__icon {
+    margin-bottom: @spacing-200;
+    margin-right: @spacing-200;
+    margin-top: @spacing-200;
+}
+
+.toggle-button__image-container {
+    align-self: center;
+    margin-bottom: @spacing-200;
+    margin-right: @spacing-200;
+    margin-top: @spacing-200;
+}
+
+.toggle-button__image-container svg.icon {
+    height: 100%;
+}
+
+.toggle-button__image-container img {
+    height: 100%;
+    max-height: 56px;
+    max-width: 56px;
+}
+
+.toggle-button__image {
+    display: inline-block;
+    height: 56px;
+    width: 56px;
+}
+
+.toggle-button__title {
+    font-size: @font-size-16;
+    font-weight: bold;
+    line-height: @font-size-24;
+    margin-bottom: @spacing-50;
+    margin-top: @spacing-200;
+}
+
+.toggle-button .toggle-button__content .toggle-button__title:only-child {
+    font-weight: bold;
+    margin-bottom: auto;
+    margin-top: auto;
+    text-align: center;
+    width: 100%;
+}
+
+.toggle-button:not([aria-pressed="true"]) .toggle-button__title:only-child {
+    font-weight: normal;
+}
+
+.toggle-button__subtitle {
+    color: var(--color-foreground-secondary);
+    line-height: @font-size-20;
+    margin-bottom: @spacing-200;
+}
+
+.toggle-button__subtitle p {
+    margin: 0;
+}
+
+.toggle-button[aria-pressed="true"] .toggle-button__subtitle {
+    color: var(--color-foreground-primary);
+    font-weight: normal;
+}
+
+/* Layout Themes */
+.toggle-button--list-layout {
+    justify-content: left;
+    max-width: var(--toggle-button-list-width-max);
+    min-width: var(--toggle-button-list-width-min);
+}
+
+.toggle-button--gallery-layout {
+    flex-direction: column;
+    justify-content: left;
+    max-width: var(--toggle-button-gallery-width-max);
+    min-width: var(--toggle-button-gallery-width-min);
+}
+
+.toggle-button--gallery-layout .toggle-button__content {
+    align-self: self-start;
+}
+
+.toggle-button--gallery-layout .toggle-button__image-container,
+.toggle-button--gallery-layout .toggle-button__icon {
+    margin-bottom: 0;
+    margin-right: 0;
+    text-align: left;
+}
+
+.toggle-button--gallery-layout .toggle-button__image-container {
+    padding-bottom: 60%;
+    position: relative;
+    text-align: center;
+    width: 100%;
+}
+
+.toggle-button--gallery-layout .toggle-button__image {
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+}
+
+.toggle-button--gallery-layout .toggle-button__image-container img {
+    height: 100%;
+    max-height: 200px;
+    max-width: initial;
+}
+
+.toggle-button--gallery-layout .toggle-button__icon ~ .toggle-button__content {
+    align-self: flex-start;
+}

package/src/svg/icon/icon-arrow-left-12.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M3.054 8.253a.71.71 0 0 1 .157-.776l4.287-4.27a.717.717 0 0 1 1.011.003.71.71 0 0 1-.003 1.007L5.433 7.271h6.853a.713.713 0 1 1 0 1.423H5.433l3.073 3.054a.71.71 0 0 1-.298 1.232.716.716 0 0 1-.71-.229l-4.287-4.27a.712.712 0 0 1-.157-.228Z"
+    d="M1.211 5.477 5.5 1.207a.717.717 0 0 1 1.01.003.71.71 0 0 1-.003 1.007L3.434 5.271h6.852a.713.713 0 1 1 0 1.423H3.434l3.072 3.054a.71.71 0 0 1-.298 1.232.716.716 0 0 1-.71-.229l-4.287-4.27a.71.71 0 0 1 0-1.004Z"
   />
 </svg>

package/src/svg/icon/icon-arrow-right-12.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M12.946 8.253a.71.71 0 0 0-.157-.776l-4.287-4.27a.717.717 0 0 0-1.011.003.71.71 0 0 0 .003 1.007l3.073 3.054H3.715A.713.713 0 0 0 3 7.983c0 .393.32.711.715.711h6.852l-3.073 3.054a.71.71 0 0 0 .298 1.232.716.716 0 0 0 .71-.229l4.287-4.27a.71.71 0 0 0 .157-.228Z"
+    d="m10.789 5.477-4.287-4.27a.717.717 0 0 0-1.011.003.71.71 0 0 0 .003 1.007l3.073 3.054H1.715A.713.713 0 0 0 1 5.983c0 .393.32.711.715.711h6.852L5.494 9.748a.71.71 0 0 0 .298 1.232.716.716 0 0 0 .71-.229l4.287-4.27a.71.71 0 0 0 0-1.004Z"
   />
 </svg>

package/src/svg/icon/icon-arrow-right-20.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M9.293 2.293a1 1 0 0 0 0 1.414L14.586 9H3a1 1 0 1 0 0 2h11.586l-5.293 5.293a1 1 0 1 0 1.414 1.414l7-7a1 1 0 0 0 0-1.414l-7-7a1 1 0 0 0-1.414 0Z"
+  />
+</svg>

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

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <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"
+  />
+  <path
+    fill-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.975Zm-9.9 1.414a1.322 1.322 0 0 0-.39.92 3.547 3.547 0 0 1-.993 2.397A1.322 1.322 0 0 0 2 8c0 .361.14.685.374.927.621.642.978 1.503.994 2.396.005.337.135.665.39.92s.583.384.92.39a3.547 3.547 0 0 1 2.396.993c.242.234.565.374.926.374.36 0 .684-.14.926-.374a3.548 3.548 0 0 1 2.397-.993c.336-.006.665-.135.92-.39s.384-.584.39-.92a3.547 3.547 0 0 1 .993-2.397C13.86 8.685 14 8.361 14 8c0-.36-.14-.684-.374-.926a3.548 3.548 0 0 1-.993-2.397 1.34 1.34 0 0 0-.39-.92 1.322 1.322 0 0 0-.92-.39 3.548 3.548 0 0 1-2.397-.993A1.322 1.322 0 0 0 8 2c-.36 0-.685.14-.926.374a3.547 3.547 0 0 1-2.397.993 1.322 1.322 0 0 0-.92.39Z"
+    clip-rule="evenodd"
+  />
+</svg>