@ebay/skin 17.4.0 → 17.5.0-next.0

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

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

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

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

package/dist/tokens/evo-light.css

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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "17.4.0",
+    "version": "17.5.0-next.0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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/icon-button/icon-button.less

@@ -122,6 +122,10 @@ a.icon-link:visited {
     }
 }
 
+a.icon-link.icon-link--primary:visited > svg {
+    .fill-token(icon-button-icon-foreground-color, color-foreground-on-accent);
+}
+
 button.icon-btn--badged,
 a.icon-link--badged {
     overflow: visible;

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>