@ebay/skin 17.3.0 → 17.4.0-next.1

package/src/less/progress-bar-expressive/stories/progress-bar-expressive.stories.js

@@ -115,3 +115,34 @@ export const withLongMessages = () => `
     </div>
 </div>
 `;
+
+export const textSpacing = () => `
+<div class="progress-bar-expressive demo-a11y-text-spacing">
+    <div class="progress-bar-expressive__messages">
+        <div aria-hidden="true" class="progress-bar-expressive__message">
+            Work with a content designer to simplify your messages.
+        </div>
+        <div role="status" id="unique-id" class="progress-bar-expressive__message">
+            Ideally, on one line, but not always possible.
+        </div>
+    </div>
+    <div role="progressbar" aria-label="Loading..." aria-describedby="unique-id" class="progress-bar-expressive__progress">
+        <div class="progress-bar-expressive__lines">
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+        </div>
+    </div>
+</div>
+`;

package/src/less/progress-stepper/stories/progress-stepper.stories.js

@@ -265,7 +265,59 @@ export const RTL = () => `
         </div>
     </div>
 </div>
+`;
+
+export const textSpacing = () => `
+<div class="progress-stepper demo-a11y-text-spacing">
+    <div class="progress-stepper__items" role="list">
+        <div aria-current="step" class="progress-stepper__item" role="listitem">
+            <span class="progress-stepper__icon">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
+                    <use href="#icon-stepper-confirmation-24"></use>
+                </svg>
+            </span>
+            <span class="progress-stepper__text">
+                <h4>Started</h4>
+                <p>July 3rd</p>
+            </span>
+        </div>
+        <hr class="progress-stepper__separator" role="presentation" />
+        <div class="progress-stepper__item" role="listitem">
+            <span class="progress-stepper__icon">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
+                    <use href="#icon-stepper-upcoming-24"></use>
+                </svg>
+            </span>
+            <span class="progress-stepper__text">
+                <h4>Shipped</h4>
+                <p>July 4th</p>
+            </span>
+        </div>
+        <hr class="progress-stepper__separator" role="presentation" />
+        <div class="progress-stepper__item" role="listitem">
+            <span class="progress-stepper__icon">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
+                    <use href="#icon-stepper-upcoming-24"></use>
+                </svg>
+            </span>
+            <span class="progress-stepper__text">
+                <h4>Transit</h4>
+                <p>July 5th</p>
+            </span>
+        </div>
+        <hr class="progress-stepper__separator" role="presentation" />
+        <div class="progress-stepper__item" role="listitem">
+            <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
+                <use href="#icon-stepper-upcoming-24"></use>
+            </svg>
+            <span class="progress-stepper__text">
+                <h4>Delivered</h4>
+                <p>July 6th</p>
+            </span>
+        </div>
 
+    </div>
+</div>
 `;
 
 export const vertical = () => `

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

@@ -59,14 +59,14 @@ export const customColour = () => `
 `;
 
 export const customIcon = () => `
-<span class="radio" style="color: #5ba71b">
+<span class="radio">
 <input aria-label="Custom radio example" class="radio__control" name="r7" type="radio" checked />
 <span class="radio__icon" hidden>
     <svg aria-hidden="true" class="radio__unchecked">
         <use href="#icon-radio-unchecked-18"></use>
     </svg>
     <svg aria-hidden="true" class="radio__checked">
-        <use href="#icon-confirmation"></use>
+        <use href="#icon-confirmation-filled-24"></use>
     </svg>
 </span>
 </span>
@@ -118,3 +118,50 @@ export const multiLineLabel = () => `
         <label class="field__label field__label--end" for="group-radio-3">Option 3</label>
     </div>
 </fieldset>`;
+
+export const textSpacing = () => `
+<fieldset class="demo-a11y-text-spacing">
+    <legend>Choose an Option</legend>
+    <div class="field" style="display: flex;">
+        <span class="field__control radio">
+            <input class="radio__control" id="group-radio-1" type="radio" value="1" name="radio-group" />
+            <span class="radio__icon" hidden>
+                <svg class="radio__unchecked" height="18" width="18">
+                    <use href="#icon-radio-unchecked-18"></use>
+                </svg>
+                <svg class="radio__checked" height="18" width="18">
+                    <use href="#icon-radio-checked-18"></use>
+                </svg>
+            </span>
+        </span>
+        <label class="field__label field__label--end" for="group-radio-1">Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 </label>
+    </div>
+    <div class="field" style="display: flex;">
+        <span class="field__control radio">
+            <input class="radio__control" id="group-radio-2" type="radio" value="2" name="radio-group" />
+            <span class="radio__icon" hidden>
+                <svg class="radio__unchecked" height="18" width="18">
+                    <use href="#icon-radio-unchecked-18"></use>
+                </svg>
+                <svg class="radio__checked" height="18" width="18">
+                    <use href="#icon-radio-checked-18"></use>
+                </svg>
+            </span>
+        </span>
+        <label class="field__label field__label--end" for="group-radio-2">Option 2</label>
+    </div>
+    <div class="field" style="display: flex;">
+        <span class="field__control radio">
+            <input class="radio__control" id="group-radio-3" type="radio" value="3" name="radio-group" />
+            <span class="radio__icon" hidden>
+                <svg class="radio__unchecked" height="18" width="18">
+                    <use href="#icon-radio-unchecked-18"></use>
+                </svg>
+                <svg class="radio__checked" height="18" width="18">
+                    <use href="#icon-radio-checked-18"></use>
+                </svg>
+            </span>
+        </span>
+        <label class="field__label field__label--end" for="group-radio-3">Option 3</label>
+    </div>
+</fieldset>`;

package/src/less/section-notice/stories/icon-16.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Skin/Section Notice/Icon 16" };
+export default { title: "Skin/Section Notice/Base" };
 
 export const body = () => `
 <div class="section-notice section-notice--confirmation" role="region">
@@ -154,3 +154,27 @@ export const RTL = () => `
     </div>
 </div>
 `;
+
+export const textSpacing = () => `
+<div class="section-notice section-notice--confirmation demo-a11y-text-spacing" role="region">
+    <div class="section-notice__header" role="region" aria-roledescription="Notice">
+        <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <p class="section-notice__cta">
+        <button class="fake-link" type="button">Action</button>
+    </p>
+    <div class="section-notice__footer">
+        <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+`;

package/src/less/section-title/stories/section-title.stories.js

@@ -92,3 +92,20 @@ export const withFavoriteAndLink = () => `
     <a class="section-title__cta" href="https://www.ebay.com">See all</a>
 </div>
 `;
+
+export const textSpacing = () => `
+<div class="section-title demo-a11y-text-spacing">
+    <div class="section-title__title-container">
+        <h2 class="section-title__title">Marketing Type Content Title</h2>
+        <span class="section-title__subtitle">Recommended for you</span>
+    </div>
+    <div class="section-title__info">
+        <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
+            <svg aria-hidden="true" class="icon icon--save-16" width="16" height="14">
+                <use href="#icon-save-16"></use>
+            </svg>
+        </button>
+    </div>
+    <a class="section-title__cta" href="https://www.ebay.com">See all</a>
+</div>
+`;

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

@@ -108,3 +108,13 @@ export const rtl = () => `
     </div>
 </div>
 `;
+
+export const textSpacing = () => `
+    <div class="segmented-buttons demo-a11y-text-spacing">
+        <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>
+`;

package/src/less/select/stories/default.stories.js

@@ -105,3 +105,16 @@ export const invalid = () => `
     </svg>
 </span>
 `;
+
+export const textSpacing = () => `
+<span class="select demo-a11y-text-spacing">
+    <select>
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+        <option value="3">Option 3</option>
+    </select>
+    <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
+    </svg>
+</span>
+`;

package/src/less/signal/stories/signal.stories.js

@@ -23,3 +23,9 @@ export const neutral = () => `
     Neutral
 </span>
 `;
+
+export const textSpacing = () => `
+<span class="signal signal--trustworthy demo-a11y-text-spacing">
+    Trustworthy
+</span>
+`;

package/src/less/skeleton/skeleton.less

@@ -124,17 +124,28 @@ div.skeleton__textbox:not(:last-child) {
     margin-block-end: var(--spacing-150);
 }
 
+// Deprecated, remove next major
 .skeleton--elevated {
     --skeleton-background: var(--color-loading-fill-elevated);
 }
 
+.skeleton--on-secondary {
+    --skeleton-background: var(--color-loading-fill-on-secondary);
+}
+
 @media screen and (max-width: @_screen-size-SM) {
     .skeleton {
         --skeleton-background: var(--color-loading-shimmer);
     }
+
+    // Deprecated, remove next major
     .skeleton--elevated {
         --skeleton-background: var(--color-loading-shimmer-elevated);
     }
+
+    .skeleton--on-secondary {
+        --skeleton-background: var(--color-loading-shimmer-on-secondary);
+    }
 }
 
 .skeleton--purple {

package/src/less/skeleton/stories/composite.stories.js

@@ -30,7 +30,7 @@ export const inlineSkeletons = () =>
     </div>`;
 
 export const blockSkeletons = () =>
-    `<div class="skeleton skeleton--elevated" role="img" aria-label="loading">
+    `<div class="skeleton skeleton--on-secondary" role="img" aria-label="loading">
         <div class="skeleton__button"></div>
         <div class="skeleton__button"></div>
     </div>`;

package/src/less/snackbar-dialog/stories/base.stories.js

@@ -50,3 +50,17 @@ export const actionsStacked = () => `
         </div>
     </aside>
 `;
+
+export const textSpacing = () => `
+    <aside aria-label="Notification" aria-live="polite" aria-modal="false" class="snackbar-dialog demo-a11y-text-spacing" role="dialog">
+        <div class="snackbar-dialog__window snackbar-dialog__window--column">
+            <div class="snackbar-dialog__main">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            </div>
+            <div class="snackbar-dialog__actions">
+            <button accesskey="u" class="fake-link snackbar-dialog__cta">Undo</button> |
+            <button accesskey="d" class="fake-link snackbar-dialog__close">Close</button>
+            </div>
+        </div>
+    </aside>
+`;

package/src/less/split-button/stories/base.stories.js

@@ -346,3 +346,33 @@ export const fakeTertiaryExpanded = () => `
     </span>
 </span>
 `;
+
+export const textSpacing = () => `
+<span class="split-button demo-a11y-text-spacing">
+    <button class="btn btn--primary btn--split-start" type="button">
+        <span class="btn__cell">
+            <span class="btn__text">Button</span>
+        </span>
+    </button>
+    <span class="menu-button">
+        <button class="btn btn--primary btn--split-end" aria-haspopup="true" aria-expanded="true" type="button">
+            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </button>
+        <div class="menu-button__menu menu-button__menu--reverse">
+            <div class="menu-button__items" role="menu">
+                <div class="menu-button__item" role="menuitem">
+                    <span>Item 10000</span>
+                </div>
+                <div class="menu-button__item" role="menuitem">
+                    <span>Item 20000</span>
+                </div>
+                <div class="menu-button__item" role="menuitem">
+                    <span>Item 30000</span>
+                </div>
+            </div>
+        </div>
+    </span>
+</span>
+`;

package/src/less/tabs/stories/tabs/block.stories.js

@@ -113,3 +113,20 @@ export const longText = () => `
     </div>
 </div>
 `;
+
+export const textSpacing = () => `
+<div class="tabs demo-a11y-text-spacing">
+    <div class="tabs__items" role="tablist">
+        <div aria-controls="panel1" class="tabs__item" role="tab" tabindex="0" aria-selected="true" id="tab1"><span>Tab 1</span></div>
+        <div aria-controls="panel2" class="tabs__item" role="tab" tabindex="-1" aria-selected="false" id="tab2"><span>Tab 2</span></div>
+        <div aria-controls="panel3" class="tabs__item" role="tab" tabindex="-1" aria-selected="false" id="tab3"><span>Tab 3</span></div>
+        <div aria-controls="panel4" class="tabs__item" role="tab" tabindex="-1" aria-selected="false" id="tab4"><span>Tab 4</span></div>
+    </div>
+    <div class="tabs__content">
+        <div id="panel1" role="tabpanel" aria-labelledby="tab1"><div class="tabs__cell"><p>Lorem ipsum dolor sit amet.</p></div></div>
+        <div id="panel2" role="tabpanel" hidden aria-labelledby="tab2"><div class="tabs__cell"><p>Lorem ipsum dolor sit amet.</p></div></div>
+        <div id="panel3" role="tabpanel" hidden aria-labelledby="tab3"><div class="tabs__cell"><p>Lorem ipsum dolor sit amet.</p></div></div>
+        <div id="panel4" role="tabpanel" hidden aria-labelledby="tab4"><div class="tabs__cell"><p>Lorem ipsum dolor sit amet.</p></div></div>
+    </div>
+</div>
+`;

package/src/less/tabs/stories/tabs/inlineBlock.stories.js

@@ -98,3 +98,20 @@ export const longText = () => `
     </div>
 </span>
 `;
+
+export const textSpacing = () => `
+<span class="tabs demo-a11y-text-spacing">
+    <div class="tabs__items" role="tablist">
+        <div aria-controls="panel1" class="tabs__item" role="tab" tabindex="0" aria-selected="true" id="tab1"><span>Tab 1</span></div>
+        <div aria-controls="panel2" class="tabs__item" role="tab" tabindex="-1" aria-selected="false" id="tab2"><span>Tab 2</span></div>
+        <div aria-controls="panel3" class="tabs__item" role="tab" tabindex="-1" aria-selected="false" id="tab3"><span>Tab 3</span></div>
+        <div aria-controls="panel4" class="tabs__item" role="tab" tabindex="-1" aria-selected="false" id="tab4"><span>Tab 4</span></div>
+    </div>
+    <div class="tabs__content">
+        <div id="panel1" role="tabpanel" aria-labelledby="tab1"><div class="tabs__cell"><p>Lorem ipsum dolor sit amet.</p></div></div>
+        <div id="panel2" role="tabpanel" hidden aria-labelledby="tab2"><div class="tabs__cell"><p>Lorem ipsum dolor sit amet.</p></div></div>
+        <div id="panel3" role="tabpanel" hidden aria-labelledby="tab3"><div class="tabs__cell"><p>Lorem ipsum dolor sit amet.</p></div></div>
+        <div id="panel4" role="tabpanel" hidden aria-labelledby="tab4"><div class="tabs__cell"><p>Lorem ipsum dolor sit amet.</p></div></div>
+    </div>
+</span>
+`;

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

@@ -63,3 +63,9 @@ export const fluid = () => `
     <input class="textbox__control textbox__control--fluid" type="text" placeholder="placeholder text" />
 </div>
 `;
+
+export const textSpacing = () => `
+<span class="textbox demo-a11y-text-spacing">
+    <input aria-label="Email Address" class="textbox__control" type="text" placeholder="placeholder text" />
+</span>
+`;

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

@@ -69,3 +69,26 @@ export const RTL = () => `
     </aside>
 </div>
 `;
+
+export const textSpacing = () => `
+<aside class="toast-dialog demo-a11y-text-spacing" aria-label="Notification" aria-live="polite" aria-modal="false" role="dialog">
+    <div class="toast-dialog__window">
+        <div class="toast-dialog__header">
+            <h2>User Privacy Preferences</h2>
+            <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
+                <svg class="icon icon--close icon--close-16">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="toast-dialog__main">
+            <p>We detected something unusual about a recent sign-in to your eBay account.
+            To help keep you safe, we recommend you change the password.</p>
+        </div>
+        <div class="toast-dialog__footer">
+            <button accesskey="d" class="btn btn--secondary">Dismiss</button>
+            <button accesskey="a" class="btn btn--primary">Accept</button>
+        </div>
+    </div>
+</aside>
+`;

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

@@ -150,3 +150,16 @@ export const disabledIconColored = () => `
     </span>
 </button>
 `;
+
+export const textSpacing = () => `
+<button type="button" class="toggle-button toggle-button--gallery-layout demo-a11y-text-spacing" 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

@@ -140,3 +140,17 @@ export const disabledIconColored = () => `
     </span>
 </button>
 `;
+
+export const textSpacing = () => `
+<button type="button" class="toggle-button toggle-button--list-layout demo-a11y-text-spacing" 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

@@ -47,3 +47,11 @@ export const toggledOnAriaDisabled = () => `
     </span>
 </button>
 `;
+
+export const textSpacing = () => `
+<button type="button" class="toggle-button demo-a11y-text-spacing" aria-pressed="false">
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">4.5</span>
+    </span>
+</button>
+`;

package/src/less/tooltip/stories/tooltip.stories.js

@@ -37,3 +37,22 @@ export const expanded = () => `
         </div>
     </div>
 </span>`;
+
+export const textSpacing = () => `
+<span class="tooltip demo-a11y-text-spacing">
+    <button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="true" aria-label="Settings">
+        <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
+        </svg>
+    </button>
+    <div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="left: calc(50% - 16px); right: auto; top: calc(100% + 8px); bottom: auto;">
+        <span class="tooltip__pointer tooltip__pointer--top-left"></span>
+        <div class="tooltip__mask">
+            <div class="tooltip__cell">
+                <div class="tooltip__content">
+                    <p>Use Access Key 'S' to display settings.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</span>`;

package/src/less/tourtip/stories/tourtip.stories.js

@@ -92,3 +92,24 @@ export const withOneAction = () => `
         </div>
     </div>
 </div>`;
+
+export const textSpacing = () => `
+<div class="tourtip tourtip--expanded demo-a11y-text-spacing">
+    <p class="tourtip__host">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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
+        <span class="tourtip__pointer tourtip__pointer--top"></span>
+        <div class="tourtip__mask">
+            <div class="tourtip__cell">
+                <span class="tourtip__content">
+                    <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
+                    <p>Here's something new to help you be successful at your task.</p>
+                </span>
+                <button class="icon-btn tourtip__close" type="button" aria-label="Dismiss tourtip">
+                    <svg class="icon icon--close-16" height="24" width="24" aria-hidden="true">
+                        <use href="#icon-close-16"></use>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>`;

package/src/svg/icon/icon-bids-24.svg

@@ -1,5 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M18.707 7.707a.998.998 0 0 0 0-1.414l-6-6a1 1 0 0 0-1.414 0l-11 11a.998.998 0 0 0 0 1.414l6 6a.999.999 0 0 0 1.414 0L11 15.414l7.293 7.293a1 1 0 0 0 1.414 0l3-3a.998.998 0 0 0 0-1.414L15.414 11l3.293-3.293ZM20.586 19 19 20.586 12.414 14 14 12.414 20.586 19ZM7 16.586 2.414 12 12 2.414 16.586 7 7 16.586ZM2 21h10a1 1 0 0 1 0 2H2a1 1 0 0 1 0-2Z"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M1.88 14.591a3 3 0 0 1 0-4.242l8.47-8.47a3 3 0 0 1 4.243 0l1.265 1.265 1.265 1.265a3 3 0 0 1 0 4.243l-2.028 2.028 6.988 6.988a3.123 3.123 0 0 1-4.416 4.416l-6.988-6.988-2.026 2.026a3 3 0 0 1-4.242 0l-2.531-2.53Zm10.213-.909 1.588-1.588 6.988 6.988a1.123 1.123 0 1 1-1.588 1.587l-6.988-6.987Zm-8.799-1.919a1 1 0 0 0 0 1.414l2.53 2.53a1 1 0 0 0 1.415 0l8.47-8.47a1 1 0 0 0 0-1.413l-1.265-1.266-1.266-1.265a1 1 0 0 0-1.414 0l-8.47 8.47ZM2 21a1 1 0 1 0 0 2h10a1 1 0 1 0 0-2H2Z"
   />
 </svg>

package/src/svg/icon/icon-bids-64.svg

@@ -1,10 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
   <path
     fill-rule="evenodd"
-    d="M.738 29.072a2.5 2.5 0 0 0 0 3.536l16.664 16.664a2.5 2.5 0 0 0 3.536 0l8.696-8.697L49.32 60.26c.98.98 2.57.98 3.55 0l7.392-7.392c.98-.98.98-2.57 0-3.55L40.576 29.634l8.699-8.7a2.5 2.5 0 0 0 0-3.535L32.61.735a2.5 2.5 0 0 0-3.535 0L.738 29.072Zm5.303 1.768L19.17 43.968l24.801-24.8-13.128-13.13L6.04 30.84Zm31 2.33-3.871 3.87 17.924 17.924 3.87-3.87L37.04 33.168Z"
     clip-rule="evenodd"
-  />
-  <path
-    d="M2.97 58.5a2.5 2.5 0 0 1 2.5-2.5H32.5a2.5 2.5 0 0 1 0 5H5.47a2.5 2.5 0 0 1-2.5-2.5Z"
+    d="M5.197 38.257a7.5 7.5 0 0 1 0-10.606L27.653 5.197a7.5 7.5 0 0 1 10.608 0l3.61 3.61 3.61 3.61a7.5 7.5 0 0 1 0 10.606l-5.46 5.459L58.61 47.068a8.162 8.162 0 0 1-11.542 11.54L28.48 40.023l-5.455 5.454a7.5 7.5 0 0 1-10.607 0l-7.22-7.22Zm26.819-1.77 4.47-4.47 18.588 18.586a3.16 3.16 0 1 1-4.47 4.47L32.015 36.487ZM8.733 31.186a2.5 2.5 0 0 0 0 3.535l7.22 7.22a2.5 2.5 0 0 0 3.537 0l22.456-22.454a2.5 2.5 0 0 0 0-3.535l-3.61-3.61-3.611-3.61a2.5 2.5 0 0 0-3.536 0L8.733 31.186ZM5.5 55.998a2.5 2.5 0 0 0 0 5h27.002a2.5 2.5 0 0 0 0-5H5.5Z"
   />
 </svg>

package/src/svg/icon/icon-bookmark-filled-16.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3 3.5A2.5 2.5 0 0 1 5.5 1h5A2.5 2.5 0 0 1 13 3.5V14a1 1 0 0 1-1.707.707L8 11.414l-3.293 3.293A1 1 0 0 1 3 14V3.5Z"
+  />
+</svg>

package/src/svg/icon/icon-bookmark-filled-24.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4 4a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v18a1 1 0 0 1-1.707.707L12 16.414l-6.293 6.293A1 1 0 0 1 4 22V4Z"
+  />
+</svg>

package/src/svg/icon/icon-exclude-16.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4.523 3.11a6 6 0 0 1 8.367 8.367L4.524 3.108ZM3.11 4.522a6 6 0 0 0 8.367 8.367L3.11 4.524ZM8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Z"
+  />
+</svg>

package/src/svg/icon/icon-exclude-24.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.671 4.257A9.959 9.959 0 0 1 12 2c5.523 0 10 4.477 10 10a9.958 9.958 0 0 1-2.257 6.329L5.67 4.257ZM4.257 5.671A9.959 9.959 0 0 0 2 12c0 5.523 4.477 10 10 10a9.958 9.958 0 0 0 6.329-2.257L4.257 5.67ZM12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0Z"
+  />
+</svg>

package/src/svg/icon/icon-fast-and-free-16.svg

@@ -1,5 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="m15.71 7.29-2-2A1 1 0 0 0 13 5h-2V3a1 1 0 0 0-1-1H1a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1 2 2 0 1 0 4 0h4a2 2 0 1 0 4 0h2a1 1 0 0 0 1-1V8a1 1 0 0 0-.29-.71ZM2 11V4h7v7H2Zm12 0h-3V7h1.59L14 8.41V11Z"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.5 4a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-6Zm-1.484 8.742A2 2 0 1 0 5 13h4a2 2 0 1 0 4 0h1a2 2 0 0 0 2-2V8.85a2 2 0 0 0-.438-1.249l-1.48-1.85A2 2 0 0 0 12.518 5H11v-.5A2.5 2.5 0 0 0 8.5 2h-6A2.5 2.5 0 0 0 0 4.5V11a2 2 0 0 0 1.016 1.742ZM14 11h-3.05c.033-.162.05-.329.05-.5V7h1.52L14 8.85V11Z"
   />
 </svg>

package/src/svg/icon/icon-fast-and-free-24.svg

@@ -1,5 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M21 16h-1.766c-.015-.018-.036-.031-.052-.048a2.942 2.942 0 0 0-.28-.254c-.056-.047-.108-.096-.168-.139a3.092 3.092 0 0 0-.343-.203c-.061-.031-.118-.069-.18-.097a3.092 3.092 0 0 0-.414-.138c-.058-.017-.11-.04-.169-.053a2.938 2.938 0 0 0-1.21-.009c-.072.014-.139.041-.209.06-.113.031-.227.06-.333.103-.081.033-.155.077-.232.116-.089.045-.178.088-.261.141-.077.05-.148.108-.219.165-.054.042-.113.077-.164.122V9h3.562L21 12.612V16Zm-4 3a1 1 0 0 1-1-1c0-.173.055-.327.132-.469a.978.978 0 0 1 .701-.497c.057-.01.107-.034.167-.034a1 1 0 1 1 0 2Zm-8.766-3c-.015-.017-.035-.029-.05-.045a2.818 2.818 0 0 0-.286-.26c-.054-.046-.105-.094-.164-.135a2.81 2.81 0 0 0-.343-.203c-.061-.032-.118-.07-.18-.098a3.065 3.065 0 0 0-.412-.138c-.058-.016-.112-.04-.171-.053A3.02 3.02 0 0 0 6 15a3.02 3.02 0 0 0-.628.068c-.06.013-.113.037-.171.053-.14.039-.28.08-.412.138-.062.028-.119.066-.18.098a2.81 2.81 0 0 0-.343.203c-.059.041-.11.09-.165.135a3.04 3.04 0 0 0-.285.259c-.015.017-.035.029-.05.046H3V6h10v10H8.234ZM6 19a1 1 0 1 1 0-2 1 1 0 1 1 0 2Zm16.829-7.253L19.922 7.44a1 1 0 0 0-.828-.44H15V5a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h1a3 3 0 1 0 6 0h5a3 3 0 1 0 6 0h2a1 1 0 0 0 1-1v-4.694a1 1 0 0 0-.171-.559Z"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    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"
   />
 </svg>