@ebay/skin 17.4.1 → 17.5.0

package/src/less/icon/generated/icon.less

@@ -239,6 +239,10 @@ svg.icon--background-removal-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--bank-16 {
+    height: 16px;
+    width: 16px;
+}
 svg.icon--bank-24 {
     height: 24px;
     width: 24px;
@@ -535,6 +539,10 @@ svg.icon--clear-16 {
     height: 16px;
     width: 16px;
 }
+svg.icon--clear-20 {
+    height: 20px;
+    width: 20px;
+}
 svg.icon--clear-24 {
     height: 24px;
     width: 24px;
@@ -799,6 +807,10 @@ svg.icon--ebay-international-shipping-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--ebay-international-shipping-64 {
+    height: 64px;
+    width: 64px;
+}
 svg.icon--ebay-live-16 {
     height: 16px;
     width: 16px;
@@ -959,6 +971,10 @@ svg.icon--fast-and-free-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--fast-and-free-64 {
+    height: 64px;
+    width: 64px;
+}
 svg.icon--feedback-16 {
     height: 16px;
     width: 16px;
@@ -1163,6 +1179,14 @@ svg.icon--graph-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--graph-dynamic-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--graph-dynamic-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--grid-view-16 {
     height: 16px;
     width: 16px;
@@ -1951,6 +1975,10 @@ svg.icon--pound-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--print-16 {
+    height: 16px;
+    width: 16px;
+}
 svg.icon--print-24 {
     height: 24px;
     width: 24px;
@@ -2251,6 +2279,22 @@ svg.icon--sharpen-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--ship-and-local-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--ship-and-local-24 {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--shirt-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--shirt-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--shoe-box-24 {
     height: 24px;
     width: 24px;
@@ -2459,6 +2503,14 @@ svg.icon--switch-camera-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--target-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--target-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--text-messaging-16 {
     height: 16px;
     width: 16px;

package/src/less/lightbox-dialog/lightbox-dialog.less

@@ -61,7 +61,7 @@
 // Might need to see if icon-btn can support a small version
 button.icon-btn.lightbox-dialog__prev,
 button.icon-btn.lightbox-dialog__close {
-    align-self: center;
+    align-self: flex-start;
     border: 0;
     height: 32px;
     min-width: 32px;

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

@@ -516,3 +516,27 @@ export const textSpacing = () => `
     </div>
 </div>
 `;
+
+export const baseWithHeaderOverflow = () => `
+<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
+    <div class="lightbox-dialog__window">
+        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
+        <div class="lightbox-dialog__header">
+            <h2 id="lightbox-dialog-title">Dialog Lightbox with a title that is so long it wraps across multiple lines. No dialog header should ever be this long.</h2>
+            <button class="icon-btn lightbox-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="lightbox-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>
+`;

package/src/less/menu/menu.less

@@ -33,6 +33,7 @@ span.fake-menu__items {
 
 .menu__item > svg.icon--tick-16:last-child,
 .fake-menu__item > svg.icon--tick-16:last-child,
+.fake-menu__item .badge,
 .menu__item .badge {
     margin-left: var(--spacing-100);
     margin-right: var(--spacing-100);

package/src/less/menu/stories/fake-menu.stories.js

@@ -97,3 +97,13 @@ export const buttonsDisabled = () => `
     </ul>
 </div>
 `;
+
+export const badged = () => `
+<span class="fake-menu">
+    <span class="fake-menu__items" role="menu">
+        <a class="fake-menu__item fake-menu__item--badged" role="menuitem" href="https://www.ebay.com"><span>Button 1<span class="badge">1</span></span></a>
+        <a class="fake-menu__item fake-menu__item--badged" role="menuitem" href="https://www.ebay.com"><span>Button 2<span class="badge">10</span></span></a>
+        <a class="fake-menu__item fake-menu__item--badged" role="menuitem" href="https://www.ebay.com"><span>Button 3<span class="badge">99+</span></span></a>
+    </span>
+</span>
+`;

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

@@ -71,9 +71,7 @@
         align-self: center;
         flex: 1 1 auto;
         margin: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        overflow-wrap: anywhere;
     }
 
     & > :last-child:not(:only-child) {

package/src/less/panel-dialog/panel-dialog.less

@@ -30,6 +30,7 @@
 }
 
 .panel-dialog__header .fake-link {
+    align-self: flex-start;
     outline-offset: 4px;
     text-decoration: none;
 }
@@ -48,7 +49,7 @@
 // inherits from .icon-btn
 // Might need to see to add a small icon btn
 button.icon-btn.panel-dialog__close {
-    align-self: center;
+    align-self: flex-start;
     border: 0;
     height: 32px;
     min-width: 32px;

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

@@ -247,3 +247,26 @@ export const textSpacing = () => `
     </div>
 </div>
 `;
+
+export const panelStartWithHeaderOverflow = () => `
+<div aria-labelledby="panel-title" aria-modal="true" class="panel-dialog" role="dialog">
+    <div class="panel-dialog__window">
+        <div class="panel-dialog__header">
+            <h2 id="panel-title">Left Panel with a title that's so long it wraps to the next line. No dialog should ever have a title this long.</h2>
+            <button class="icon-btn panel-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="panel-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>
+`;

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

@@ -92,3 +92,25 @@ export const textSpacing = () => `
     </div>
 </aside>
 `;
+
+export const primaryActionWithHeaderOverflow = () => `
+<aside class="toast-dialog" 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 but with a title that's super long so it wraps to the next line. No dialog header should ever be this long.</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="a" class="btn btn--primary">Accept</button>
+        </div>
+    </div>
+</aside>
+`;

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

@@ -65,8 +65,9 @@
 
 // inherits from .icon-btn
 button.toast-dialog__close {
-    align-self: center;
+    align-self: flex-start;
     border: 0;
+    flex-shrink: 0;
     .color-token(toast-dialog-foreground-color, color-foreground-on-information);
     // margin: 0 0 0 auto;
     margin-inline-start: auto;

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

@@ -55,6 +55,14 @@
     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/src/svg/icon/icon-bank-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="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"
+  />
+</svg>

package/src/svg/icon/icon-clear-20.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <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"
+  />
+</svg>

package/src/svg/icon/icon-download-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="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"
   />
 </svg>

package/src/svg/icon/icon-ebay-international-shipping-64.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+  <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"
+  />
+</svg>

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

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+  <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"
+  />
+</svg>

package/src/svg/icon/icon-graph-dynamic-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="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"
+  />
+</svg>

package/src/svg/icon/icon-graph-dynamic-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="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"
+  />
+</svg>

package/src/svg/icon/icon-print-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="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"
+  />
+</svg>

package/src/svg/icon/icon-ship-and-local-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.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"
+  />
+</svg>

package/src/svg/icon/icon-ship-and-local-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="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"
+  />
+</svg>

package/src/svg/icon/icon-shirt-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="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"
+  />
+</svg>

package/src/svg/icon/icon-shirt-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="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"
+  />
+</svg>

package/src/svg/icon/icon-target-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="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"
+  />
+</svg>

package/src/svg/icon/icon-target-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="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"
+  />
+</svg>

package/src/svg/icon/icon-upload-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="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"
   />
 </svg>

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

@@ -1,8 +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 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"
   />
 </svg>