@ebay/skin 15.5.0 → 16.0.0-0

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

@@ -94,8 +94,8 @@ function getPointerStyle(key) {
 export const top = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle('top')}">
@@ -114,8 +114,8 @@ export const top = () => `
 export const topLeft = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -136,8 +136,8 @@ export const topLeft = () => `
 export const leftTop = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -158,8 +158,8 @@ export const leftTop = () => `
 export const left = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle('left')}">
@@ -178,8 +178,8 @@ export const left = () => `
 export const leftBottom = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -200,8 +200,8 @@ export const leftBottom = () => `
 export const bottomLeft = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -222,8 +222,8 @@ export const bottomLeft = () => `
 export const bottom = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -244,8 +244,8 @@ export const bottom = () => `
 export const bottomRight = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -266,8 +266,8 @@ export const bottomRight = () => `
 export const rightBottom = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -288,8 +288,8 @@ export const rightBottom = () => `
 export const right = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle('right')}">
@@ -308,8 +308,8 @@ export const right = () => `
 export const rightTop = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -330,8 +330,8 @@ export const rightTop = () => `
 export const topRight = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(

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

@@ -3,8 +3,8 @@ export default { title: 'Tooltip' };
 export const collapsed = () => `
 <span class="tooltip">
     <button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" 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="bottom: calc(100% + 12px); left: 0">
@@ -22,8 +22,8 @@ export const collapsed = () => `
 export const expanded = () => `
 <span class="tooltip">
     <button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="true" aria-label="Settings">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" 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="bottom: calc(100% - 90px); left: 4px">

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

@@ -12,8 +12,8 @@ export const collapsed = () => `
                     <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" focusable="false" height="24" width="24" aria-hidden="true">
-                        <use href="#icon-close"></use>
+                    <svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
+                        <use href="#icon-close-16"></use>
                     </svg>
                 </button>
             </div>
@@ -33,8 +33,8 @@ export const expanded = () => `
                     <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" focusable="false" height="24" width="24" aria-hidden="true">
-                        <use href="#icon-close"></use>
+                    <svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
+                        <use href="#icon-close-16"></use>
                     </svg>
                 </button>
             </div>
@@ -54,8 +54,8 @@ export const withActions = () => `
                     <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" focusable="false" height="24" width="24" aria-hidden="true">
-                        <use href="#icon-close"></use>
+                    <svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
+                        <use href="#icon-close-16"></use>
                     </svg>
                 </button>
                 <div class="tourtip__footer">
@@ -80,8 +80,8 @@ export const withOneAction = () => `
                     <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" focusable="false" height="24" width="24" aria-hidden="true">
-                        <use href="#icon-close"></use>
+                    <svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
+                        <use href="#icon-close-16"></use>
                     </svg>
                 </button>
                 <div class="tourtip__footer">

package/src/less/variables/variables.less

@@ -1,14 +1,28 @@
-@screen-size-1: 320px;
-@screen-size-2: 480px;
-@screen-size-3: 600px;
-@screen-size-4: 768px;
-@screen-size-5: 960px;
-@screen-size-6: 1280px;
-
-@page-grid-cols-small: 8;
-@page-grid-cols-large: 16;
-@page-grid-gutter-width-small: @spacing-100;
-@page-grid-gutter-width-large: @spacing-200;
+// Responsive Breakpoints
+// The first breakpoint simply indicates minimum support level. It should not be used with media queries.
+// Mobile-first means the default layout applies to mobile and there should be no mimimums even though
+// most mobile devices would be higher in screen width than the smallest viewport width.
+
+// The variables with underscores are to be considered constants. They can be read, but should not be modified.
+@_screen-size-XS: 320px;
+@_screen-size-SM: 512px;
+@_screen-size-MD: 768px;
+@_screen-size-LG: 1024px;
+@_screen-size-XL: 1280px;
+@_screen-size-XL2: 1440px;
+@_screen-size-XL3: 1680px;
+@_screen-size-XL4: 1920px;
+
+@_page-grid-max-width: 1584px;
+@_page-grid-number-cols-small: 8;
+@_page-grid-number-cols-large: 16;
+@_page-grid-outside-margins-small: 16px;
+@_page-grid-outside-margins-large: 32px;
+@_page-grid-outside-margins-max: 48px;
+@_page-grid-column-gaps-small: @spacing-100;
+@_page-grid-column-gaps-large: @spacing-200;
+@_page-grid-row-gaps-small: @spacing-100;
+@_page-grid-row-gaps-large: @spacing-200;
 
 @marketsans-url: "https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/";
 @marketsans-fontname: "Market Sans";
@@ -33,6 +47,7 @@
 @spacing-25: @spacing-100 * 0.25;
 @spacing-50: @spacing-100 * 0.5;
 @spacing-100: 8px;
+@spacing-125: @spacing-100 * 1.25;
 @spacing-150: @spacing-100 * 1.5;
 @spacing-200: @spacing-100 * 2;
 @spacing-250: @spacing-100 * 2.5;
@@ -41,13 +56,6 @@
 @spacing-600: @spacing-100 * 6;
 @spacing-800: @spacing-100 * 8;
 
-@breakpoint-1: ~"only screen and (min-width: @{screen-size-1})";
-@breakpoint-2: ~"only screen and (min-width: @{screen-size-2})";
-@breakpoint-3: ~"only screen and (min-width: @{screen-size-3})";
-@breakpoint-4: ~"only screen and (min-width: @{screen-size-4})";
-@breakpoint-5: ~"only screen and (min-width: @{screen-size-5})";
-@breakpoint-6: ~"only screen and (min-width: @{screen-size-6})";
-
 @font-size-giant-3: @font-size-46;
 @font-size-giant-2: @font-size-36;
 @font-size-giant-1: @font-size-30;

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

@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 0 0 0 2h5v5a1 1 0 1 0 2 0V9h5a1 1 0 1 0 0-2Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path
+    d="M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 0 0 0 2h5v5a1 1 0 1 0 2 0V9h5a1 1 0 1 0 0-2Z"
+  />
+</svg>

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

@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 11h-8V3a1 1 0 0 0-2 0v8H3a1 1 0 0 0 0 2h8v8a1 1 0 0 0 2 0v-8h8a1 1 0 0 0 0-2Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M21 11h-8V3a1 1 0 0 0-2 0v8H3a1 1 0 0 0 0 2h8v8a1 1 0 0 0 2 0v-8h8a1 1 0 0 0 0-2Z"
+  />
+</svg>

package/src/svg/icon/icon-add-image-24.svg

@@ -1 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 0a1 1 0 0 1 1 1v1h1a1 1 0 0 1 0 2H7v1a1 1 0 0 1-2 0V4H4a1 1 0 0 1 0-2h1V1a1 1 0 0 1 1-1Z"/><path fill-rule="evenodd" d="M5 9a1 1 0 1 1 2 0v4.238l3.232-3.878a1 1 0 0 1 1.549.015l3.302 4.128 2.21-2.21a1 1 0 0 1 1.414 0L21 13.586V5a1 1 0 0 0-1-1h-8a1 1 0 1 1 0-2h8a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9Zm2 7.362V17a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.586l-3-3-2.293 2.293a1 1 0 0 1-1.488-.082l-3.235-4.044L7 16.362Z" clip-rule="evenodd"/><path d="M18 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM3 10a1 1 0 1 0-2 0v11a3 3 0 0 0 3 3h11a1 1 0 1 0 0-2H4a1 1 0 0 1-1-1V10Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M6 0a1 1 0 0 1 1 1v1h1a1 1 0 0 1 0 2H7v1a1 1 0 0 1-2 0V4H4a1 1 0 0 1 0-2h1V1a1 1 0 0 1 1-1Z"
+  />
+  <path
+    fill-rule="evenodd"
+    d="M5 9a1 1 0 1 1 2 0v4.238l3.232-3.878a1 1 0 0 1 1.549.015l3.302 4.128 2.21-2.21a1 1 0 0 1 1.414 0L21 13.586V5a1 1 0 0 0-1-1h-8a1 1 0 1 1 0-2h8a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9Zm2 7.362V17a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.586l-3-3-2.293 2.293a1 1 0 0 1-1.488-.082l-3.235-4.044L7 16.362Z"
+    clip-rule="evenodd"
+  />
+  <path
+    d="M18 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM3 10a1 1 0 1 0-2 0v11a3 3 0 0 0 3 3h11a1 1 0 1 0 0-2H4a1 1 0 0 1-1-1V10Z"
+  />
+</svg>

package/src/svg/icon/icon-afterpay-12-colored.svg

@@ -1 +1,16 @@
-<svg width="20" height="12" viewBox="0 0 20 12" xmlns="http://www.w3.org/2000/svg"><rect x=".5" y=".5" width="19" height="11" rx="1.5" fill="#fff" stroke="#000"/><path d="m17.756 5.255-.482-.26-.49-.263c-.323-.174-.725.046-.725.398v.058c0 .034.02.061.049.08l.227.122c.061.033.142-.01.142-.077v-.14c0-.07.081-.113.143-.08l.447.242.443.241a.087.087 0 0 1 0 .156l-.443.242-.447.241c-.065.034-.143-.009-.143-.08v-.07c0-.351-.405-.571-.725-.397l-.49.263-.482.26a.447.447 0 0 0 0 .795l.483.26.489.263c.324.174.725-.046.725-.398v-.058c0-.033-.02-.061-.048-.08l-.227-.122c-.062-.033-.143.01-.143.077v.14c0 .07-.08.114-.142.08l-.447-.242-.444-.241a.087.087 0 0 1 0-.156l.444-.242.447-.241c.065-.034.142.009.142.08v.07c0 .351.405.571.726.397l.489-.263.482-.26a.447.447 0 0 0 0-.795Zm-3.161.085-1.13 2.202h-.47l.425-.823-.664-1.379h.48l.427.924.466-.924h.466Zm-2.416.783c0-.263-.2-.447-.45-.447a.44.44 0 0 0-.45.447c0 .257.2.446.45.446s.45-.183.45-.446Zm.006.78V6.7a.68.68 0 0 1-.521.23.782.782 0 0 1-.797-.808c0-.459.356-.81.807-.81.21 0 .392.088.511.226v-.196h.409v1.563l-.409-.003Zm-1.887-.779c0-.254-.2-.447-.45-.447a.44.44 0 0 0-.45.447c0 .257.2.446.45.446.246 0 .45-.192.45-.446ZM8.986 7.543V5.34h.408v.202a.672.672 0 0 1 .522-.232c.447 0 .797.345.797.807a.8.8 0 0 1-.807.81.662.662 0 0 1-.499-.208v.823h-.42Zm-.732-2.05s.104-.18.356-.18a.41.41 0 0 1 .178.036v.398s-.152-.089-.294-.07c-.14.018-.23.14-.23.302v.924h-.421V5.34h.408l.003.153Zm-1.056.49c-.029-.202-.204-.325-.411-.325a.408.408 0 0 0-.418.325h.83Zm-.829.244c.03.233.204.364.428.364.175 0 .31-.08.392-.202h.427c-.1.33-.414.544-.826.544-.498 0-.852-.33-.852-.804 0-.47.37-.813.862-.813s.852.342.852.813a.535.535 0 0 1-.01.101H6.37v-.003Zm-.667.331c-.143 0-.181-.05-.181-.18v-.695h.262v-.342H5.52v-.38h-.418v.383h-.538v-.156c0-.132.052-.18.198-.18h.09v-.303h-.2c-.344 0-.506.107-.506.43v.209h-.233v.34h.233v1.222h.418V5.683h.538v.765c0 .317.13.455.466.455h.214v-.345h-.081Zm-2.387-.435c0-.263-.2-.447-.45-.447a.44.44 0 0 0-.45.447c0 .257.2.446.45.446s.45-.183.45-.446Zm.003.78V6.7a.68.68 0 0 1-.521.23A.782.782 0 0 1 2 6.122c0-.459.356-.81.806-.81a.67.67 0 0 1 .512.226v-.196h.408v1.563l-.408-.003Z"/></svg>
+<svg viewBox="0 0 20 12" xmlns="http://www.w3.org/2000/svg">
+  <rect
+    x=".5"
+    y=".5"
+    width="19"
+    height="11"
+    rx="1.5"
+    fill="#fff"
+    stroke="#000"
+    stroke-width="1"
+  />
+  <path
+    d="m17.756 5.255-.482-.26-.49-.263c-.323-.174-.725.046-.725.398v.058c0 .034.02.061.049.08l.227.122c.061.033.142-.01.142-.077v-.14c0-.07.081-.113.143-.08l.447.242.443.241a.087.087 0 0 1 0 .156l-.443.242-.447.241c-.065.034-.143-.009-.143-.08v-.07c0-.351-.405-.571-.725-.397l-.49.263-.482.26a.447.447 0 0 0 0 .795l.483.26.489.263c.324.174.725-.046.725-.398v-.058c0-.033-.02-.061-.048-.08l-.227-.122c-.062-.033-.143.01-.143.077v.14c0 .07-.08.114-.142.08l-.447-.242-.444-.241a.087.087 0 0 1 0-.156l.444-.242.447-.241c.065-.034.142.009.142.08v.07c0 .351.405.571.726.397l.489-.263.482-.26a.447.447 0 0 0 0-.795Zm-3.161.085-1.13 2.202h-.47l.425-.823-.664-1.379h.48l.427.924.466-.924h.466Zm-2.416.783c0-.263-.2-.447-.45-.447a.44.44 0 0 0-.45.447c0 .257.2.446.45.446s.45-.183.45-.446Zm.006.78V6.7a.68.68 0 0 1-.521.23.782.782 0 0 1-.797-.808c0-.459.356-.81.807-.81.21 0 .392.088.511.226v-.196h.409v1.563l-.409-.003Zm-1.887-.779c0-.254-.2-.447-.45-.447a.44.44 0 0 0-.45.447c0 .257.2.446.45.446.246 0 .45-.192.45-.446ZM8.986 7.543V5.34h.408v.202a.672.672 0 0 1 .522-.232c.447 0 .797.345.797.807a.8.8 0 0 1-.807.81.662.662 0 0 1-.499-.208v.823h-.42Zm-.732-2.05s.104-.18.356-.18a.41.41 0 0 1 .178.036v.398s-.152-.089-.294-.07c-.14.018-.23.14-.23.302v.924h-.421V5.34h.408l.003.153Zm-1.056.49c-.029-.202-.204-.325-.411-.325a.408.408 0 0 0-.418.325h.83Zm-.829.244c.03.233.204.364.428.364.175 0 .31-.08.392-.202h.427c-.1.33-.414.544-.826.544-.498 0-.852-.33-.852-.804 0-.47.37-.813.862-.813s.852.342.852.813a.535.535 0 0 1-.01.101H6.37v-.003Zm-.667.331c-.143 0-.181-.05-.181-.18v-.695h.262v-.342H5.52v-.38h-.418v.383h-.538v-.156c0-.132.052-.18.198-.18h.09v-.303h-.2c-.344 0-.506.107-.506.43v.209h-.233v.34h.233v1.222h.418V5.683h.538v.765c0 .317.13.455.466.455h.214v-.345h-.081Zm-2.387-.435c0-.263-.2-.447-.45-.447a.44.44 0 0 0-.45.447c0 .257.2.446.45.446s.45-.183.45-.446Zm.003.78V6.7a.68.68 0 0 1-.521.23A.782.782 0 0 1 2 6.122c0-.459.356-.81.806-.81a.67.67 0 0 1 .512.226v-.196h.408v1.563l-.408-.003Z"
+    fill="#000"
+  />
+</svg>

package/src/svg/icon/icon-afterpay-18-colored.svg

@@ -1 +1,16 @@
-<svg width="30" height="18" viewBox="0 0 30 18" xmlns="http://www.w3.org/2000/svg"><rect x=".5" y=".5" width="29" height="17" rx="1.5" fill="#fff" stroke="#000"/><path d="m28.013 7.73-.81-.437-.82-.44c-.543-.293-1.217.076-1.217.666v.098c0 .056.033.102.082.133l.38.205c.103.057.239-.015.239-.128V7.59c0-.118.136-.19.24-.133l.749.405.744.405a.146.146 0 0 1 0 .262l-.744.405-.75.405c-.109.057-.239-.015-.239-.133v-.118c0-.59-.68-.96-1.217-.667l-.82.441-.81.436a.75.75 0 0 0 0 1.334l.81.436.82.441c.543.293 1.217-.077 1.217-.667v-.097c0-.057-.033-.103-.081-.133l-.38-.206c-.104-.056-.24.016-.24.129v.236c0 .117-.136.19-.239.133l-.75-.405-.744-.406a.146.146 0 0 1 0-.261l.744-.405.75-.406c.109-.056.24.016.24.134v.118c0 .59.678.959 1.216.667l.82-.442.81-.436a.75.75 0 0 0 0-1.334Zm-5.303.143-1.896 3.694h-.788l.712-1.38-1.114-2.314h.804l.717 1.55.783-1.55h.782Zm-4.053 1.314a.734.734 0 0 0-.756-.75.737.737 0 0 0-.755.75.74.74 0 0 0 .755.749.734.734 0 0 0 .756-.75Zm.01 1.308v-.339a1.14 1.14 0 0 1-.874.385c-.76 0-1.337-.575-1.337-1.354 0-.77.598-1.36 1.353-1.36.353 0 .657.149.858.38v-.329h.685V10.5l-.684-.005ZM15.5 9.186a.744.744 0 0 0-.756-.749.737.737 0 0 0-.755.75c0 .43.337.748.755.748a.747.747 0 0 0 .755-.749Zm-2.201 2.38V7.874h.684v.339c.207-.241.511-.39.875-.39.75 0 1.337.58 1.337 1.354 0 .77-.598 1.36-1.353 1.36a1.11 1.11 0 0 1-.837-.35v1.38H13.3ZM12.072 8.13s.174-.303.598-.303c.184 0 .298.062.298.062v.667s-.255-.15-.494-.118c-.234.03-.386.236-.386.507v1.55h-.706V7.873h.684l.006.257Zm-1.772.82c-.049-.338-.342-.543-.69-.543-.342 0-.625.2-.7.543h1.39Zm-1.39.41c.048.39.342.611.716.611a.763.763 0 0 0 .658-.338H11c-.168.554-.695.913-1.385.913-.837 0-1.43-.554-1.43-1.35 0-.79.62-1.364 1.446-1.364s1.429.575 1.429 1.365a.899.899 0 0 1-.016.169H8.909V9.36Zm-1.12.555c-.24 0-.305-.082-.305-.303V8.448h.44v-.575h-.44v-.636h-.7v.641h-.903v-.261c0-.22.087-.303.332-.303h.152v-.508h-.337c-.576 0-.848.18-.848.723v.35H4.79v.569h.391V10.5h.701V8.448h.902V9.73c0 .534.218.764.783.764h.358v-.58H7.79Zm-4.005-.728a.734.734 0 0 0-.755-.75.737.737 0 0 0-.755.75.74.74 0 0 0 .755.749.734.734 0 0 0 .755-.75Zm.006 1.308v-.339a1.14 1.14 0 0 1-.875.385c-.76 0-1.337-.575-1.337-1.354 0-.77.598-1.36 1.353-1.36.353 0 .658.149.859.38v-.329h.684V10.5l-.684-.005Z"/></svg>
+<svg viewBox="0 0 30 18" xmlns="http://www.w3.org/2000/svg">
+  <rect
+    x=".5"
+    y=".5"
+    width="29"
+    height="17"
+    rx="1.5"
+    fill="#fff"
+    stroke="#000"
+    stroke-width="1"
+  />
+  <path
+    d="m28.013 7.73-.81-.437-.82-.44c-.543-.293-1.217.076-1.217.666v.098c0 .056.033.102.082.133l.38.205c.103.057.239-.015.239-.128V7.59c0-.118.136-.19.24-.133l.749.405.744.405a.146.146 0 0 1 0 .262l-.744.405-.75.405c-.109.057-.239-.015-.239-.133v-.118c0-.59-.68-.96-1.217-.667l-.82.441-.81.436a.75.75 0 0 0 0 1.334l.81.436.82.441c.543.293 1.217-.077 1.217-.667v-.097c0-.057-.033-.103-.081-.133l-.38-.206c-.104-.056-.24.016-.24.129v.236c0 .117-.136.19-.239.133l-.75-.405-.744-.406a.146.146 0 0 1 0-.261l.744-.405.75-.406c.109-.056.24.016.24.134v.118c0 .59.678.959 1.216.667l.82-.442.81-.436a.75.75 0 0 0 0-1.334Zm-5.303.143-1.896 3.694h-.788l.712-1.38-1.114-2.314h.804l.717 1.55.783-1.55h.782Zm-4.053 1.314a.734.734 0 0 0-.756-.75.737.737 0 0 0-.755.75.74.74 0 0 0 .755.749.734.734 0 0 0 .756-.75Zm.01 1.308v-.339a1.14 1.14 0 0 1-.874.385c-.76 0-1.337-.575-1.337-1.354 0-.77.598-1.36 1.353-1.36.353 0 .657.149.858.38v-.329h.685V10.5l-.684-.005ZM15.5 9.186a.744.744 0 0 0-.756-.749.737.737 0 0 0-.755.75c0 .43.337.748.755.748a.747.747 0 0 0 .755-.749Zm-2.201 2.38V7.874h.684v.339c.207-.241.511-.39.875-.39.75 0 1.337.58 1.337 1.354 0 .77-.598 1.36-1.353 1.36a1.11 1.11 0 0 1-.837-.35v1.38H13.3ZM12.072 8.13s.174-.303.598-.303c.184 0 .298.062.298.062v.667s-.255-.15-.494-.118c-.234.03-.386.236-.386.507v1.55h-.706V7.873h.684l.006.257Zm-1.772.82c-.049-.338-.342-.543-.69-.543-.342 0-.625.2-.7.543h1.39Zm-1.39.41c.048.39.342.611.716.611a.763.763 0 0 0 .658-.338H11c-.168.554-.695.913-1.385.913-.837 0-1.43-.554-1.43-1.35 0-.79.62-1.364 1.446-1.364s1.429.575 1.429 1.365a.899.899 0 0 1-.016.169H8.909V9.36Zm-1.12.555c-.24 0-.305-.082-.305-.303V8.448h.44v-.575h-.44v-.636h-.7v.641h-.903v-.261c0-.22.087-.303.332-.303h.152v-.508h-.337c-.576 0-.848.18-.848.723v.35H4.79v.569h.391V10.5h.701V8.448h.902V9.73c0 .534.218.764.783.764h.358v-.58H7.79Zm-4.005-.728a.734.734 0 0 0-.755-.75.737.737 0 0 0-.755.75.74.74 0 0 0 .755.749.734.734 0 0 0 .755-.75Zm.006 1.308v-.339a1.14 1.14 0 0 1-.875.385c-.76 0-1.337-.575-1.337-1.354 0-.77.598-1.36 1.353-1.36.353 0 .658.149.859.38v-.329h.684V10.5l-.684-.005Z"
+    fill="#000"
+  />
+</svg>

package/src/svg/icon/icon-afterpay-24-colored.svg

@@ -1 +1,16 @@
-<svg width="38" height="24" viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg"><rect x=".5" y=".5" width="37" height="23" rx="1.5" fill="#fff" stroke="#000"/><path d="m35.484 10.306-1.026-.581-1.039-.589c-.688-.39-1.542.103-1.542.89v.13c0 .075.042.136.104.177l.481.274c.131.075.303-.02.303-.171v-.315c0-.157.172-.253.303-.178l.95.54.943.541a.199.199 0 0 1 0 .349l-.943.54-.95.54a.203.203 0 0 1-.303-.177v-.158c0-.786-.86-1.279-1.541-.889l-1.04.589-1.025.581a1.024 1.024 0 0 0 0 1.778l1.025.582 1.04.588a1.03 1.03 0 0 0 1.541-.89v-.13a.213.213 0 0 0-.103-.177l-.482-.274c-.13-.075-.303.02-.303.171v.315a.204.204 0 0 1-.302.178l-.95-.54-.943-.54a.199.199 0 0 1 0-.35l.943-.54.95-.54a.203.203 0 0 1 .302.178v.157c0 .786.86 1.279 1.542.889l1.04-.588 1.025-.582a1.024 1.024 0 0 0 0-1.778Zm-6.717.192-2.402 4.924h-.998l.901-1.84-1.41-3.084h1.018l.909 2.065.99-2.065h.992Zm-5.136 1.75c0-.588-.427-.998-.957-.998s-.956.417-.956.998c0 .575.427 1 .956 1 .53 0 .957-.411.957-1Zm.014 1.745v-.452a1.414 1.414 0 0 1-1.108.513c-.964 0-1.693-.766-1.693-1.806 0-1.025.757-1.812 1.714-1.812.447 0 .832.198 1.087.506v-.438h.867V14l-.867-.006Zm-4.012-1.744c0-.568-.427-.999-.957-.999s-.956.417-.956.999c0 .574.427.998.956.998.524 0 .957-.43.957-.998Zm-2.787 3.173v-4.924h.867v.451a1.4 1.4 0 0 1 1.108-.52c.95 0 1.693.773 1.693 1.806 0 1.026-.757 1.813-1.714 1.813-.44 0-.812-.178-1.06-.466v1.84h-.894ZM15.29 10.84s.22-.404.757-.404c.234 0 .379.082.379.082v.89s-.324-.2-.627-.158c-.295.041-.488.315-.488.677v2.066h-.895v-3.495h.867l.007.341Zm-2.244 1.094c-.061-.451-.433-.725-.874-.725a.877.877 0 0 0-.888.725h1.762Zm-1.761.547c.061.52.433.814.908.814.372 0 .66-.178.833-.451h.908c-.213.738-.88 1.217-1.755 1.217-1.06 0-1.81-.739-1.81-1.799 0-1.053.785-1.82 1.83-1.82 1.047 0 1.811.767 1.811 1.82 0 .075-.007.15-.02.226h-2.706v-.007Zm-1.417.739c-.303 0-.386-.11-.386-.404v-1.553h.558v-.766h-.558V9.65h-.888v.855H7.452v-.349c0-.294.11-.403.42-.403h.192v-.677h-.426c-.73 0-1.074.24-1.074.964v.465h-.496v.76h.496V14h.888v-2.736h1.142v1.71c0 .712.276 1.02.991 1.02h.455v-.773h-.172Zm-5.074-.972c0-.588-.426-.998-.956-.998s-.957.417-.957.998c0 .575.427 1 .957 1s.956-.411.956-1Zm.007 1.745v-.452a1.414 1.414 0 0 1-1.108.513C2.73 14.054 2 13.288 2 12.248c0-1.025.757-1.812 1.714-1.812.447 0 .833.198 1.087.506v-.438h.867V14l-.867-.006Z"/></svg>
+<svg viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg">
+  <rect
+    x=".5"
+    y=".5"
+    width="37"
+    height="23"
+    rx="1.5"
+    fill="#fff"
+    stroke="#000"
+    stroke-width="1"
+  />
+  <path
+    d="m35.484 10.306-1.026-.581-1.039-.589c-.688-.39-1.542.103-1.542.89v.13c0 .075.042.136.104.177l.481.274c.131.075.303-.02.303-.171v-.315c0-.157.172-.253.303-.178l.95.54.943.541a.199.199 0 0 1 0 .349l-.943.54-.95.54a.203.203 0 0 1-.303-.177v-.158c0-.786-.86-1.279-1.541-.889l-1.04.589-1.025.581a1.024 1.024 0 0 0 0 1.778l1.025.582 1.04.588a1.03 1.03 0 0 0 1.541-.89v-.13a.213.213 0 0 0-.103-.177l-.482-.274c-.13-.075-.303.02-.303.171v.315a.204.204 0 0 1-.302.178l-.95-.54-.943-.54a.199.199 0 0 1 0-.35l.943-.54.95-.54a.203.203 0 0 1 .302.178v.157c0 .786.86 1.279 1.542.889l1.04-.588 1.025-.582a1.024 1.024 0 0 0 0-1.778Zm-6.717.192-2.402 4.924h-.998l.901-1.84-1.41-3.084h1.018l.909 2.065.99-2.065h.992Zm-5.136 1.75c0-.588-.427-.998-.957-.998s-.956.417-.956.998c0 .575.427 1 .956 1 .53 0 .957-.411.957-1Zm.014 1.745v-.452a1.414 1.414 0 0 1-1.108.513c-.964 0-1.693-.766-1.693-1.806 0-1.025.757-1.812 1.714-1.812.447 0 .832.198 1.087.506v-.438h.867V14l-.867-.006Zm-4.012-1.744c0-.568-.427-.999-.957-.999s-.956.417-.956.999c0 .574.427.998.956.998.524 0 .957-.43.957-.998Zm-2.787 3.173v-4.924h.867v.451a1.4 1.4 0 0 1 1.108-.52c.95 0 1.693.773 1.693 1.806 0 1.026-.757 1.813-1.714 1.813-.44 0-.812-.178-1.06-.466v1.84h-.894ZM15.29 10.84s.22-.404.757-.404c.234 0 .379.082.379.082v.89s-.324-.2-.627-.158c-.295.041-.488.315-.488.677v2.066h-.895v-3.495h.867l.007.341Zm-2.244 1.094c-.061-.451-.433-.725-.874-.725a.877.877 0 0 0-.888.725h1.762Zm-1.761.547c.061.52.433.814.908.814.372 0 .66-.178.833-.451h.908c-.213.738-.88 1.217-1.755 1.217-1.06 0-1.81-.739-1.81-1.799 0-1.053.785-1.82 1.83-1.82 1.047 0 1.811.767 1.811 1.82 0 .075-.007.15-.02.226h-2.706v-.007Zm-1.417.739c-.303 0-.386-.11-.386-.404v-1.553h.558v-.766h-.558V9.65h-.888v.855H7.452v-.349c0-.294.11-.403.42-.403h.192v-.677h-.426c-.73 0-1.074.24-1.074.964v.465h-.496v.76h.496V14h.888v-2.736h1.142v1.71c0 .712.276 1.02.991 1.02h.455v-.773h-.172Zm-5.074-.972c0-.588-.426-.998-.956-.998s-.957.417-.957.998c0 .575.427 1 .957 1s.956-.411.956-1Zm.007 1.745v-.452a1.414 1.414 0 0 1-1.108.513C2.73 14.054 2 13.288 2 12.248c0-1.025.757-1.812 1.714-1.812.447 0 .833.198 1.087.506v-.438h.867V14l-.867-.006Z"
+    fill="#000"
+  />
+</svg>

package/src/svg/icon/icon-afterpay-32-colored.svg

@@ -1 +1,16 @@
-<svg width="50" height="32" viewBox="0 0 50 32" xmlns="http://www.w3.org/2000/svg"><rect x=".5" y=".5" width="49" height="31" rx="1.5" fill="#fff" stroke="#000"/><path d="m46.69 13.741-1.35-.775-1.368-.784c-.905-.52-2.028.137-2.028 1.185v.174c0 .1.054.182.136.237l.634.364c.172.1.398-.027.398-.227v-.42c0-.21.227-.337.398-.237l1.25.72 1.241.72a.268.268 0 0 1 0 .466l-1.24.72-1.25.72a.267.267 0 0 1-.399-.236v-.21c0-1.049-1.132-1.705-2.029-1.186l-1.367.785-1.35.775a1.374 1.374 0 0 0 0 2.371l1.35.775 1.367.785c.906.52 2.029-.137 2.029-1.186v-.173c0-.1-.054-.183-.136-.237l-.634-.365a.268.268 0 0 0-.398.228v.42c0 .21-.227.337-.399.237l-1.25-.721-1.24-.72a.267.267 0 0 1 0-.466l1.24-.72 1.25-.72c.181-.1.399.027.399.237v.21c0 1.048 1.132 1.705 2.028 1.185l1.368-.784 1.35-.776a1.374 1.374 0 0 0 0-2.37Zm-8.84.256-3.16 6.566h-1.314l1.187-2.453-1.857-4.113h1.34l1.196 2.754 1.304-2.754h1.304Zm-6.755 2.334c0-.784-.562-1.331-1.26-1.331-.697 0-1.258.556-1.258 1.331 0 .766.561 1.332 1.259 1.332.697 0 1.259-.547 1.259-1.332Zm.018 2.326v-.602a1.85 1.85 0 0 1-1.459.684c-1.267 0-2.227-1.021-2.227-2.408 0-1.368.996-2.416 2.255-2.416.588 0 1.096.264 1.43.674v-.583h1.142v4.66l-1.141-.01Zm-5.28-2.325c0-.757-.562-1.332-1.26-1.332-.696 0-1.258.557-1.258 1.332 0 .766.562 1.331 1.259 1.331.688 0 1.259-.574 1.259-1.331Zm-3.668 4.231v-6.566h1.141v.602a1.83 1.83 0 0 1 1.458-.693c1.25 0 2.228 1.03 2.228 2.408 0 1.367-.996 2.416-2.255 2.416-.58 0-1.069-.237-1.395-.62v2.453h-1.177Zm-2.046-6.11s.29-.538.996-.538c.308 0 .498.109.498.109v1.186s-.425-.265-.824-.21c-.39.055-.643.42-.643.903v2.754H18.97v-4.66h1.14l.01.456Zm-2.953 1.459c-.081-.602-.57-.967-1.15-.967-.57 0-1.041.356-1.168.967h2.318Zm-2.318.73c.082.693.57 1.085 1.195 1.085.49 0 .87-.237 1.096-.602h1.196c-.281.985-1.16 1.623-2.31 1.623-1.394 0-2.381-.985-2.381-2.398 0-1.405 1.032-2.426 2.408-2.426 1.377 0 2.382 1.021 2.382 2.426 0 .1-.009.2-.027.3h-3.559v-.008Zm-1.865.984c-.398 0-.507-.146-.507-.538v-2.07h.734v-1.021h-.734v-1.131h-1.168v1.14H9.805v-.465c0-.393.145-.539.552-.539h.254V12.1h-.562c-.96 0-1.413.319-1.413 1.286v.62h-.652v1.012h.652v3.648h1.169v-3.648h1.503v2.28c0 .948.362 1.359 1.304 1.359h.598v-1.03h-.227Zm-6.674-1.295c0-.784-.562-1.331-1.26-1.331-.697 0-1.258.556-1.258 1.331 0 .766.561 1.332 1.259 1.332.697 0 1.259-.547 1.259-1.332Zm.009 2.326v-.602a1.85 1.85 0 0 1-1.458.684c-1.268 0-2.228-1.021-2.228-2.408 0-1.368.996-2.416 2.255-2.416a1.83 1.83 0 0 1 1.43.674v-.583H7.46v4.66l-1.141-.01Z"/></svg>
+<svg viewBox="0 0 50 32" xmlns="http://www.w3.org/2000/svg">
+  <rect
+    x=".5"
+    y=".5"
+    width="49"
+    height="31"
+    rx="1.5"
+    fill="#fff"
+    stroke="#000"
+    stroke-width="1"
+  />
+  <path
+    d="m46.69 13.741-1.35-.775-1.368-.784c-.905-.52-2.028.137-2.028 1.185v.174c0 .1.054.182.136.237l.634.364c.172.1.398-.027.398-.227v-.42c0-.21.227-.337.398-.237l1.25.72 1.241.72a.268.268 0 0 1 0 .466l-1.24.72-1.25.72a.267.267 0 0 1-.399-.236v-.21c0-1.049-1.132-1.705-2.029-1.186l-1.367.785-1.35.775a1.374 1.374 0 0 0 0 2.371l1.35.775 1.367.785c.906.52 2.029-.137 2.029-1.186v-.173c0-.1-.054-.183-.136-.237l-.634-.365a.268.268 0 0 0-.398.228v.42c0 .21-.227.337-.399.237l-1.25-.721-1.24-.72a.267.267 0 0 1 0-.466l1.24-.72 1.25-.72c.181-.1.399.027.399.237v.21c0 1.048 1.132 1.705 2.028 1.185l1.368-.784 1.35-.776a1.374 1.374 0 0 0 0-2.37Zm-8.84.256-3.16 6.566h-1.314l1.187-2.453-1.857-4.113h1.34l1.196 2.754 1.304-2.754h1.304Zm-6.755 2.334c0-.784-.562-1.331-1.26-1.331-.697 0-1.258.556-1.258 1.331 0 .766.561 1.332 1.259 1.332.697 0 1.259-.547 1.259-1.332Zm.018 2.326v-.602a1.85 1.85 0 0 1-1.459.684c-1.267 0-2.227-1.021-2.227-2.408 0-1.368.996-2.416 2.255-2.416.588 0 1.096.264 1.43.674v-.583h1.142v4.66l-1.141-.01Zm-5.28-2.325c0-.757-.562-1.332-1.26-1.332-.696 0-1.258.557-1.258 1.332 0 .766.562 1.331 1.259 1.331.688 0 1.259-.574 1.259-1.331Zm-3.668 4.231v-6.566h1.141v.602a1.83 1.83 0 0 1 1.458-.693c1.25 0 2.228 1.03 2.228 2.408 0 1.367-.996 2.416-2.255 2.416-.58 0-1.069-.237-1.395-.62v2.453h-1.177Zm-2.046-6.11s.29-.538.996-.538c.308 0 .498.109.498.109v1.186s-.425-.265-.824-.21c-.39.055-.643.42-.643.903v2.754H18.97v-4.66h1.14l.01.456Zm-2.953 1.459c-.081-.602-.57-.967-1.15-.967-.57 0-1.041.356-1.168.967h2.318Zm-2.318.73c.082.693.57 1.085 1.195 1.085.49 0 .87-.237 1.096-.602h1.196c-.281.985-1.16 1.623-2.31 1.623-1.394 0-2.381-.985-2.381-2.398 0-1.405 1.032-2.426 2.408-2.426 1.377 0 2.382 1.021 2.382 2.426 0 .1-.009.2-.027.3h-3.559v-.008Zm-1.865.984c-.398 0-.507-.146-.507-.538v-2.07h.734v-1.021h-.734v-1.131h-1.168v1.14H9.805v-.465c0-.393.145-.539.552-.539h.254V12.1h-.562c-.96 0-1.413.319-1.413 1.286v.62h-.652v1.012h.652v3.648h1.169v-3.648h1.503v2.28c0 .948.362 1.359 1.304 1.359h.598v-1.03h-.227Zm-6.674-1.295c0-.784-.562-1.331-1.26-1.331-.697 0-1.258.556-1.258 1.331 0 .766.561 1.332 1.259 1.332.697 0 1.259-.547 1.259-1.332Zm.009 2.326v-.602a1.85 1.85 0 0 1-1.458.684c-1.268 0-2.228-1.021-2.228-2.408 0-1.368.996-2.416 2.255-2.416a1.83 1.83 0 0 1 1.43.674v-.583H7.46v4.66l-1.141-.01Z"
+    fill="#000"
+  />
+</svg>

package/src/svg/icon/icon-amex-12-colored.svg

@@ -1 +1,10 @@
-<svg width="20" height="12" viewBox="0 0 20 12" xmlns="http://www.w3.org/2000/svg"><rect width="20" height="12" rx="2" fill="#006FCF"/><path d="M12.814 4.485h.881l-.44-1.007-.44 1.007Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19.474 9.757V8.668l-.892-.899.892-.892V5.791h-.877V3.63l-.835 2.16h-.779l-.835-2.155V5.79h-.876V2.712h1.387l.723 1.918.728-1.918h1.364v-.44h-1.71l-.385 1.023-.383-1.024H14.79V3.63l-.636-1.359h-1.782l-1.847 3.965h1.49v3.52h4.614l.724-.755.72.756h1.4ZM15.272 5.79h-.998l-.273-.616h-1.493l-.27.616h-.973l1.433-3.079h1.14l1.434 3.079Zm0 .447h1.165l.941.985.95-.985h1.146l-1.54 1.53 1.54 1.548H18.31l-.95-.994-.956.994h-1.132l1.53-1.54-1.53-1.538Zm0 0v.712h-1.878v.48h1.832v.694h-1.832v.48h1.878v.712h-2.764V6.238h2.764Z" fill="#fff"/></svg>
+<svg viewBox="0 0 20 12" xmlns="http://www.w3.org/2000/svg">
+  <rect width="20" height="12" rx="2" fill="#006FCF" />
+  <path d="M12.814 4.485h.881l-.44-1.007-.44 1.007Z" fill="#fff" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M19.474 9.757V8.668l-.892-.899.892-.892V5.791h-.877V3.63l-.835 2.16h-.779l-.835-2.155V5.79h-.876V2.712h1.387l.723 1.918.728-1.918h1.364v-.44h-1.71l-.385 1.023-.383-1.024H14.79V3.63l-.636-1.359h-1.782l-1.847 3.965h1.49v3.52h4.614l.724-.755.72.756h1.4ZM15.272 5.79h-.998l-.273-.616h-1.493l-.27.616h-.973l1.433-3.079h1.14l1.434 3.079Zm0 .447h1.165l.941.985.95-.985h1.146l-1.54 1.53 1.54 1.548H18.31l-.95-.994-.956.994h-1.132l1.53-1.54-1.53-1.538Zm0 0v.712h-1.878v.48h1.832v.694h-1.832v.48h1.878v.712h-2.764V6.238h2.764Z"
+    fill="#fff"
+  />
+</svg>

package/src/svg/icon/icon-amex-18-colored.svg

@@ -1 +1,10 @@
-<svg width="30" height="18" viewBox="0 0 30 18" xmlns="http://www.w3.org/2000/svg"><rect width="30" height="18" rx="2" fill="#006FCF"/><path d="M19.22 6.727h1.322l-.66-1.51-.661 1.51Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M29.21 14.636v-1.632l-1.337-1.35 1.337-1.337v-1.63h-1.315v-3.24l-1.252 3.24h-1.169l-1.252-3.233v3.233h-1.315V4.069h2.08l1.086 2.876 1.092-2.876h2.045v-.661h-2.564l-.578 1.535-.575-1.535h-3.307v2.037l-.954-2.037H18.56l-2.77 5.946h2.233v5.282h6.921l1.086-1.134 1.08 1.134h2.1Zm-6.303-5.95h-1.496l-.41-.923h-2.24l-.404.924h-1.46l2.15-4.618h1.71l2.15 4.618Zm.001.67h1.747l1.412 1.479 1.425-1.478h1.718l-2.309 2.296 2.31 2.321h-1.746l-1.426-1.49-1.433 1.49h-1.698l2.296-2.308-2.296-2.31Zm0 0v1.07H20.09v.719h2.749v1.042H20.09v.719h2.817v1.068h-4.146V9.357h4.146Z" fill="#fff"/></svg>
+<svg viewBox="0 0 30 18" xmlns="http://www.w3.org/2000/svg">
+  <rect width="30" height="18" rx="2" fill="#006FCF" />
+  <path d="M19.22 6.727h1.322l-.66-1.51-.661 1.51Z" fill="#fff" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M29.21 14.636v-1.632l-1.337-1.35 1.337-1.337v-1.63h-1.315v-3.24l-1.252 3.24h-1.169l-1.252-3.233v3.233h-1.315V4.069h2.08l1.086 2.876 1.092-2.876h2.045v-.661h-2.564l-.578 1.535-.575-1.535h-3.307v2.037l-.954-2.037H18.56l-2.77 5.946h2.233v5.282h6.921l1.086-1.134 1.08 1.134h2.1Zm-6.303-5.95h-1.496l-.41-.923h-2.24l-.404.924h-1.46l2.15-4.618h1.71l2.15 4.618Zm.001.67h1.747l1.412 1.479 1.425-1.478h1.718l-2.309 2.296 2.31 2.321h-1.746l-1.426-1.49-1.433 1.49h-1.698l2.296-2.308-2.296-2.31Zm0 0v1.07H20.09v.719h2.749v1.042H20.09v.719h2.817v1.068h-4.146V9.357h4.146Z"
+    fill="#fff"
+  />
+</svg>

package/src/svg/icon/icon-amex-24-colored.svg

@@ -1 +1,10 @@
-<svg width="38" height="24" viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg"><rect width="38" height="24" rx="2" fill="#006FCF"/><path d="M24.347 8.97h1.674l-.837-2.014-.837 2.014Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M37 19.514v-2.177l-1.694-1.798L37 13.755v-2.173h-1.665V7.264l-1.587 4.318h-1.48l-1.586-4.31v4.31h-1.665V5.425h2.634l1.375 3.835 1.383-3.835H37v-.882h-3.248L33.02 6.59l-.728-2.047h-4.19V7.26l-1.207-2.717h-3.386L20 12.473h2.83v7.041h8.767l1.375-1.511 1.369 1.511H37Zm-7.983-7.932h-1.895l-.52-1.231h-2.837l-.512 1.231h-1.85l2.723-6.157h2.168l2.723 6.157Zm0 .894h2.213l1.788 1.97 1.806-1.97H37l-2.924 3.06L37 18.633h-2.211l-1.806-1.988-1.815 1.988h-2.15l2.907-3.078-2.907-3.078Zm0 0V13.9h-3.569v.96h3.482v1.389h-3.482v.959h3.57v1.424h-5.252v-6.156h5.252Z" fill="#fff"/></svg>
+<svg viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg">
+  <rect width="38" height="24" rx="2" fill="#006FCF" />
+  <path d="M24.347 8.97h1.674l-.837-2.014-.837 2.014Z" fill="#fff" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M37 19.514v-2.177l-1.694-1.798L37 13.755v-2.173h-1.665V7.264l-1.587 4.318h-1.48l-1.586-4.31v4.31h-1.665V5.425h2.634l1.375 3.835 1.383-3.835H37v-.882h-3.248L33.02 6.59l-.728-2.047h-4.19V7.26l-1.207-2.717h-3.386L20 12.473h2.83v7.041h8.767l1.375-1.511 1.369 1.511H37Zm-7.983-7.932h-1.895l-.52-1.231h-2.837l-.512 1.231h-1.85l2.723-6.157h2.168l2.723 6.157Zm0 .894h2.213l1.788 1.97 1.806-1.97H37l-2.924 3.06L37 18.633h-2.211l-1.806-1.988-1.815 1.988h-2.15l2.907-3.078-2.907-3.078Zm0 0V13.9h-3.569v.96h3.482v1.389h-3.482v.959h3.57v1.424h-5.252v-6.156h5.252Z"
+    fill="#fff"
+  />
+</svg>

package/src/svg/icon/icon-amex-32-colored.svg

@@ -1 +1,10 @@
-<svg width="50" height="32" viewBox="0 0 50 32" xmlns="http://www.w3.org/2000/svg"><rect width="50" height="32" rx="2" fill="#006FCF"/><path d="M32.035 11.96h2.203l-1.101-2.686-1.102 2.686Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M48.684 26.019v-2.902l-2.228-2.398 2.228-2.378v-2.898h-2.191V9.685l-2.088 5.758h-1.948L40.37 9.697v5.746h-2.19v-8.21h3.466l1.809 5.114 1.82-5.113h3.409V6.058H44.41l-.963 2.73-.958-2.73h-5.512V9.68l-1.59-3.622h-4.454L26.315 16.63h3.723v9.389h11.536l1.81-2.015 1.8 2.015h3.5ZM38.179 15.443h-2.493l-.684-1.642H31.27l-.673 1.642H28.16l3.583-8.21h2.853l3.582 8.21Zm.002 1.191h2.91l2.353 2.627 2.377-2.627h2.863l-3.848 4.082 3.848 4.127h-2.91l-2.376-2.65-2.388 2.65h-2.83l3.827-4.104-3.826-4.105Zm0 0v1.9h-4.697v1.279h4.58v1.853h-4.58v1.277h4.697v1.9h-6.91v-8.209h6.91Z" fill="#fff"/></svg>
+<svg viewBox="0 0 50 32" xmlns="http://www.w3.org/2000/svg">
+  <rect width="50" height="32" rx="2" fill="#006FCF" />
+  <path d="M32.035 11.96h2.203l-1.101-2.686-1.102 2.686Z" fill="#fff" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M48.684 26.019v-2.902l-2.228-2.398 2.228-2.378v-2.898h-2.191V9.685l-2.088 5.758h-1.948L40.37 9.697v5.746h-2.19v-8.21h3.466l1.809 5.114 1.82-5.113h3.409V6.058H44.41l-.963 2.73-.958-2.73h-5.512V9.68l-1.59-3.622h-4.454L26.315 16.63h3.723v9.389h11.536l1.81-2.015 1.8 2.015h3.5ZM38.179 15.443h-2.493l-.684-1.642H31.27l-.673 1.642H28.16l3.583-8.21h2.853l3.582 8.21Zm.002 1.191h2.91l2.353 2.627 2.377-2.627h2.863l-3.848 4.082 3.848 4.127h-2.91l-2.376-2.65-2.388 2.65h-2.83l3.827-4.104-3.826-4.105Zm0 0v1.9h-4.697v1.279h4.58v1.853h-4.58v1.277h4.697v1.9h-6.91v-8.209h6.91Z"
+    fill="#fff"
+  />
+</svg>

package/src/svg/icon/icon-apple-pay-12-colored.svg

@@ -1 +1,16 @@
-<svg width="20" height="12" viewBox="0 0 20 12" xmlns="http://www.w3.org/2000/svg"><rect x=".5" y=".5" width="19" height="11" rx="1.5" fill="#fff" stroke="#000"/><path d="M14.097 9.258v-.53c.046.012.152.012.205.012.293 0 .45-.128.547-.455 0-.006.056-.194.056-.197l-1.113-3.19h.685l.78 2.594h.011l.78-2.594h.667l-1.154 3.354c-.263.772-.568 1.02-1.207 1.02-.052 0-.21-.005-.257-.014Zm-2.047-3.02c-.732.043-1.145.385-1.145.942 0 .573.422.96 1.026.96.404 0 .793-.223.972-.578h.015v.524h.606V5.89c0-.64-.477-1.048-1.224-1.048-.762 0-1.237.424-1.272 1h.598c.056-.285.284-.467.65-.467.387 0 .618.212.618.566v.246l-.843.051Zm.844.403v.252c0 .415-.345.73-.788.73-.34 0-.562-.182-.562-.46 0-.273.214-.446.591-.473l.76-.049Zm-2.16-1.491c0-.85-.571-1.435-1.391-1.435H7.758v4.371h.656V6.593h.908c.829 0 1.412-.588 1.412-1.442Zm-1.567.873h-.753V4.287h.756c.568 0 .893.315.893.867 0 .551-.325.87-.896.87Zm-3.11-1.498c-.378-.023-.699.221-.879.221-.18 0-.456-.21-.754-.204a1.108 1.108 0 0 0-.946.595c-.406.722-.107 1.794.287 2.383.191.291.422.612.726.6.287-.011.4-.192.75-.192.348 0 .45.192.754.187.315-.006.512-.292.704-.583.22-.332.31-.653.315-.67-.006-.006-.608-.245-.614-.962-.005-.6.473-.885.496-.903-.27-.414-.693-.46-.84-.472m-.234-.385a1.09 1.09 0 0 0 .238-.76 1.011 1.011 0 0 0-.678.363c-.147.176-.277.462-.243.73.26.024.52-.134.683-.332"/></svg>
+<svg viewBox="0 0 20 12" xmlns="http://www.w3.org/2000/svg">
+  <rect
+    x=".5"
+    y=".5"
+    width="19"
+    height="11"
+    rx="1.5"
+    fill="#fff"
+    stroke="#000"
+    stroke-width="1"
+  />
+  <path
+    d="M14.097 9.258v-.53c.046.012.152.012.205.012.293 0 .45-.128.547-.455 0-.006.056-.194.056-.197l-1.113-3.19h.685l.78 2.594h.011l.78-2.594h.667l-1.154 3.354c-.263.772-.568 1.02-1.207 1.02-.052 0-.21-.005-.257-.014Zm-2.047-3.02c-.732.043-1.145.385-1.145.942 0 .573.422.96 1.026.96.404 0 .793-.223.972-.578h.015v.524h.606V5.89c0-.64-.477-1.048-1.224-1.048-.762 0-1.237.424-1.272 1h.598c.056-.285.284-.467.65-.467.387 0 .618.212.618.566v.246l-.843.051Zm.844.403v.252c0 .415-.345.73-.788.73-.34 0-.562-.182-.562-.46 0-.273.214-.446.591-.473l.76-.049Zm-2.16-1.491c0-.85-.571-1.435-1.391-1.435H7.758v4.371h.656V6.593h.908c.829 0 1.412-.588 1.412-1.442Zm-1.567.873h-.753V4.287h.756c.568 0 .893.315.893.867 0 .551-.325.87-.896.87Zm-3.11-1.498c-.378-.023-.699.221-.879.221-.18 0-.456-.21-.754-.204a1.108 1.108 0 0 0-.946.595c-.406.722-.107 1.794.287 2.383.191.291.422.612.726.6.287-.011.4-.192.75-.192.348 0 .45.192.754.187.315-.006.512-.292.704-.583.22-.332.31-.653.315-.67-.006-.006-.608-.245-.614-.962-.005-.6.473-.885.496-.903-.27-.414-.693-.46-.84-.472m-.234-.385a1.09 1.09 0 0 0 .238-.76 1.011 1.011 0 0 0-.678.363c-.147.176-.277.462-.243.73.26.024.52-.134.683-.332"
+    fill="#000"
+  />
+</svg>

package/src/svg/icon/icon-apple-pay-18-colored.svg

@@ -1 +1,16 @@
-<svg width="30" height="18" viewBox="0 0 30 18" xmlns="http://www.w3.org/2000/svg"><rect x=".5" y=".5" width="29" height="17" rx="1.5" fill="#fff" stroke="#000"/><path d="M21.293 13.887v-.795c.073.018.24.018.323.018.463 0 .712-.19.865-.681 0-.01.088-.291.088-.296L20.811 7.35h1.083l1.23 3.89h.018l1.23-3.89h1.055l-1.822 5.03c-.416 1.159-.897 1.531-1.905 1.531a3.93 3.93 0 0 1-.407-.023Zm-3.231-4.53c-1.156.064-1.808.577-1.808 1.413 0 .859.666 1.44 1.619 1.44.638 0 1.253-.336 1.535-.867h.023v.786h.958V8.834c0-.958-.754-1.572-1.934-1.572-1.202 0-1.951.636-2.007 1.5h.944c.088-.427.448-.7 1.027-.7.61 0 .975.318.975.85v.368l-1.332.077Zm1.332.604v.377c0 .623-.545 1.096-1.244 1.096-.536 0-.888-.273-.888-.691 0-.409.338-.668.934-.709l1.198-.073Zm-3.41-2.235c0-1.277-.902-2.154-2.197-2.154h-2.502v6.557h1.036v-2.24h1.434c1.309 0 2.229-.882 2.229-2.163ZM13.51 9.034h-1.19V6.431h1.193c.898 0 1.41.472 1.41 1.3 0 .826-.512 1.303-1.414 1.303ZM8.6 6.79c-.597-.035-1.103.332-1.388.332-.284 0-.72-.314-1.191-.306a1.761 1.761 0 0 0-1.494.891c-.64 1.085-.169 2.693.454 3.576.302.436.666.917 1.146.9.454-.017.632-.288 1.183-.288s.711.288 1.191.28c.498-.01.81-.438 1.112-.875.347-.498.489-.979.498-1.005-.01-.009-.96-.367-.97-1.442-.008-.9.748-1.329.783-1.355-.427-.62-1.094-.69-1.325-.708m-.37-.578c.25-.307.42-.719.374-1.14-.365.018-.811.237-1.07.544-.231.263-.436.692-.383 1.096.41.035.82-.202 1.079-.5"/></svg>
+<svg viewBox="0 0 30 18" xmlns="http://www.w3.org/2000/svg">
+  <rect
+    x=".5"
+    y=".5"
+    width="29"
+    height="17"
+    rx="1.5"
+    fill="#fff"
+    stroke="#000"
+    stroke-width="1"
+  />
+  <path
+    d="M21.293 13.887v-.795c.073.018.24.018.323.018.463 0 .712-.19.865-.681 0-.01.088-.291.088-.296L20.811 7.35h1.083l1.23 3.89h.018l1.23-3.89h1.055l-1.822 5.03c-.416 1.159-.897 1.531-1.905 1.531a3.93 3.93 0 0 1-.407-.023Zm-3.231-4.53c-1.156.064-1.808.577-1.808 1.413 0 .859.666 1.44 1.619 1.44.638 0 1.253-.336 1.535-.867h.023v.786h.958V8.834c0-.958-.754-1.572-1.934-1.572-1.202 0-1.951.636-2.007 1.5h.944c.088-.427.448-.7 1.027-.7.61 0 .975.318.975.85v.368l-1.332.077Zm1.332.604v.377c0 .623-.545 1.096-1.244 1.096-.536 0-.888-.273-.888-.691 0-.409.338-.668.934-.709l1.198-.073Zm-3.41-2.235c0-1.277-.902-2.154-2.197-2.154h-2.502v6.557h1.036v-2.24h1.434c1.309 0 2.229-.882 2.229-2.163ZM13.51 9.034h-1.19V6.431h1.193c.898 0 1.41.472 1.41 1.3 0 .826-.512 1.303-1.414 1.303ZM8.6 6.79c-.597-.035-1.103.332-1.388.332-.284 0-.72-.314-1.191-.306a1.761 1.761 0 0 0-1.494.891c-.64 1.085-.169 2.693.454 3.576.302.436.666.917 1.146.9.454-.017.632-.288 1.183-.288s.711.288 1.191.28c.498-.01.81-.438 1.112-.875.347-.498.489-.979.498-1.005-.01-.009-.96-.367-.97-1.442-.008-.9.748-1.329.783-1.355-.427-.62-1.094-.69-1.325-.708m-.37-.578c.25-.307.42-.719.374-1.14-.365.018-.811.237-1.07.544-.231.263-.436.692-.383 1.096.41.035.82-.202 1.079-.5"
+    fill="#000"
+  />
+</svg>

package/src/svg/icon/icon-apple-pay-24-colored.svg

@@ -1 +1,16 @@
-<svg width="38" height="24" viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg"><rect x=".5" y=".5" width="37" height="23" rx="1.5" fill="#fff" stroke="#000"/><path d="M26.97 18.516v-1.06c.094.024.305.024.41.024.586 0 .903-.254 1.096-.909 0-.012.111-.387.111-.393l-2.226-6.38h1.371l1.559 5.186h.023l1.558-5.186h1.336L29.9 16.505c-.527 1.545-1.137 2.042-2.414 2.042a4.74 4.74 0 0 1-.515-.03Zm-4.09-6.04c-1.465.085-2.291.77-2.291 1.884 0 1.145.844 1.92 2.05 1.92.809 0 1.588-.447 1.945-1.156h.03v1.048h1.212v-4.393c0-1.278-.955-2.096-2.448-2.096-1.524 0-2.473.848-2.543 2h1.195c.111-.57.568-.934 1.3-.934.774 0 1.237.425 1.237 1.133v.491l-1.687.103Zm1.687.806v.503c0 .83-.692 1.46-1.576 1.46-.68 0-1.125-.364-1.125-.92 0-.546.428-.891 1.183-.946l1.518-.097Zm-4.321-2.981c0-1.702-1.142-2.872-2.783-2.872h-3.17v8.743h1.313v-2.987h1.816c1.658 0 2.824-1.176 2.824-2.884Zm-3.134 1.745h-1.506V8.574h1.512c1.136 0 1.786.63 1.786 1.733 0 1.103-.65 1.739-1.792 1.739Zm-6.219-2.993c-.755-.046-1.397.443-1.757.443-.36 0-.913-.42-1.51-.408-.776.012-1.497.466-1.892 1.189-.81 1.445-.214 3.59.575 4.767.383.582.844 1.223 1.453 1.2.574-.023.8-.384 1.498-.384s.9.384 1.509.373c.63-.012 1.025-.583 1.408-1.166.44-.664.619-1.305.63-1.34-.011-.012-1.216-.49-1.227-1.923-.012-1.2.946-1.772.99-1.807-.54-.827-1.385-.92-1.677-.944Zm-.469-.771c.317-.409.531-.958.475-1.52-.463.025-1.028.317-1.355.726-.294.35-.554.923-.486 1.46.52.047 1.039-.268 1.366-.666Z"/></svg>
+<svg viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg">
+  <rect
+    x=".5"
+    y=".5"
+    width="37"
+    height="23"
+    rx="1.5"
+    fill="#fff"
+    stroke="#000"
+    stroke-width="1"
+  />
+  <path
+    d="M26.97 18.516v-1.06c.094.024.305.024.41.024.586 0 .903-.254 1.096-.909 0-.012.111-.387.111-.393l-2.226-6.38h1.371l1.559 5.186h.023l1.558-5.186h1.336L29.9 16.505c-.527 1.545-1.137 2.042-2.414 2.042a4.74 4.74 0 0 1-.515-.03Zm-4.09-6.04c-1.465.085-2.291.77-2.291 1.884 0 1.145.844 1.92 2.05 1.92.809 0 1.588-.447 1.945-1.156h.03v1.048h1.212v-4.393c0-1.278-.955-2.096-2.448-2.096-1.524 0-2.473.848-2.543 2h1.195c.111-.57.568-.934 1.3-.934.774 0 1.237.425 1.237 1.133v.491l-1.687.103Zm1.687.806v.503c0 .83-.692 1.46-1.576 1.46-.68 0-1.125-.364-1.125-.92 0-.546.428-.891 1.183-.946l1.518-.097Zm-4.321-2.981c0-1.702-1.142-2.872-2.783-2.872h-3.17v8.743h1.313v-2.987h1.816c1.658 0 2.824-1.176 2.824-2.884Zm-3.134 1.745h-1.506V8.574h1.512c1.136 0 1.786.63 1.786 1.733 0 1.103-.65 1.739-1.792 1.739Zm-6.219-2.993c-.755-.046-1.397.443-1.757.443-.36 0-.913-.42-1.51-.408-.776.012-1.497.466-1.892 1.189-.81 1.445-.214 3.59.575 4.767.383.582.844 1.223 1.453 1.2.574-.023.8-.384 1.498-.384s.9.384 1.509.373c.63-.012 1.025-.583 1.408-1.166.44-.664.619-1.305.63-1.34-.011-.012-1.216-.49-1.227-1.923-.012-1.2.946-1.772.99-1.807-.54-.827-1.385-.92-1.677-.944Zm-.469-.771c.317-.409.531-.958.475-1.52-.463.025-1.028.317-1.355.726-.294.35-.554.923-.486 1.46.52.047 1.039-.268 1.366-.666Z"
+    fill="#000"
+  />
+</svg>

package/src/svg/icon/icon-apple-pay-32-colored.svg

@@ -1 +1,16 @@
-<svg width="50" height="32" viewBox="0 0 50 32" xmlns="http://www.w3.org/2000/svg"><rect x=".5" y=".5" width="49" height="31" rx="1.5" fill="#fff" stroke="#000"/><path d="M35.488 24.689v-1.414c.123.032.4.032.54.032.77 0 1.187-.34 1.441-1.212 0-.016.147-.517.147-.525l-2.93-8.506h1.804l2.05 6.915h.031l2.051-6.915h1.757l-3.037 8.942c-.693 2.06-1.495 2.723-3.175 2.723-.14 0-.556-.016-.679-.04Zm-5.384-8.054c-1.927.113-3.014 1.026-3.014 2.512 0 1.527 1.11 2.56 2.698 2.56 1.064 0 2.089-.597 2.559-1.542h.038v1.397h1.596v-5.856c0-1.705-1.256-2.795-3.222-2.795-2.004 0-3.253 1.13-3.345 2.665h1.572c.146-.759.748-1.244 1.712-1.244 1.017 0 1.626.566 1.626 1.511v.654l-2.22.138Zm2.22 1.074v.67c0 1.107-.91 1.947-2.074 1.947-.894 0-1.48-.484-1.48-1.227 0-.727.563-1.188 1.557-1.26l1.997-.13Zm-5.684-3.974c0-2.27-1.504-3.83-3.662-3.83h-4.17v11.658h1.726V17.58h2.39c2.181 0 3.715-1.567 3.715-3.845Zm-4.125 2.326h-1.98v-4.628h1.988c1.495 0 2.35.84 2.35 2.31 0 1.47-.855 2.318-2.358 2.318Zm-8.183-3.99c-.993-.062-1.837.59-2.311.59-.475 0-1.201-.559-1.986-.544-1.023.016-1.971.622-2.49 1.585-1.067 1.928-.282 4.786.756 6.356.504.776 1.111 1.631 1.911 1.6.756-.03 1.053-.512 1.972-.512.918 0 1.185.513 1.985.497.83-.015 1.349-.777 1.853-1.554.578-.885.815-1.74.83-1.787-.015-.015-1.601-.653-1.616-2.564-.015-1.6 1.245-2.362 1.304-2.409-.711-1.102-1.822-1.227-2.208-1.258m-.616-1.028c.416-.545.698-1.278.624-2.026-.61.032-1.353.421-1.783.967-.386.467-.729 1.23-.64 1.948.684.062 1.367-.359 1.799-.889"/></svg>
+<svg viewBox="0 0 50 32" xmlns="http://www.w3.org/2000/svg">
+  <rect
+    x=".5"
+    y=".5"
+    width="49"
+    height="31"
+    rx="1.5"
+    fill="#fff"
+    stroke="#000"
+    stroke-width="1"
+  />
+  <path
+    d="M35.488 24.689v-1.414c.123.032.4.032.54.032.77 0 1.187-.34 1.441-1.212 0-.016.147-.517.147-.525l-2.93-8.506h1.804l2.05 6.915h.031l2.051-6.915h1.757l-3.037 8.942c-.693 2.06-1.495 2.723-3.175 2.723-.14 0-.556-.016-.679-.04Zm-5.384-8.054c-1.927.113-3.014 1.026-3.014 2.512 0 1.527 1.11 2.56 2.698 2.56 1.064 0 2.089-.597 2.559-1.542h.038v1.397h1.596v-5.856c0-1.705-1.256-2.795-3.222-2.795-2.004 0-3.253 1.13-3.345 2.665h1.572c.146-.759.748-1.244 1.712-1.244 1.017 0 1.626.566 1.626 1.511v.654l-2.22.138Zm2.22 1.074v.67c0 1.107-.91 1.947-2.074 1.947-.894 0-1.48-.484-1.48-1.227 0-.727.563-1.188 1.557-1.26l1.997-.13Zm-5.684-3.974c0-2.27-1.504-3.83-3.662-3.83h-4.17v11.658h1.726V17.58h2.39c2.181 0 3.715-1.567 3.715-3.845Zm-4.125 2.326h-1.98v-4.628h1.988c1.495 0 2.35.84 2.35 2.31 0 1.47-.855 2.318-2.358 2.318Zm-8.183-3.99c-.993-.062-1.837.59-2.311.59-.475 0-1.201-.559-1.986-.544-1.023.016-1.971.622-2.49 1.585-1.067 1.928-.282 4.786.756 6.356.504.776 1.111 1.631 1.911 1.6.756-.03 1.053-.512 1.972-.512.918 0 1.185.513 1.985.497.83-.015 1.349-.777 1.853-1.554.578-.885.815-1.74.83-1.787-.015-.015-1.601-.653-1.616-2.564-.015-1.6 1.245-2.362 1.304-2.409-.711-1.102-1.822-1.227-2.208-1.258m-.616-1.028c.416-.545.698-1.278.624-2.026-.61.032-1.353.421-1.783.967-.386.467-.729 1.23-.64 1.948.684.062 1.367-.359 1.799-.889"
+    fill="#000"
+  />
+</svg>

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

@@ -1 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1 2.5A1.5 1.5 0 0 1 2.5 1h11A1.5 1.5 0 0 1 15 2.5v3a1.5 1.5 0 0 1-1 1.415V12.5a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 12.5V6.915A1.5 1.5 0 0 1 1 5.5v-3ZM13 5H3V3h10v2Zm-1 2H4v5.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5V7ZM7 8a1 1 0 0 0 0 2h2a1 1 0 1 0 0-2H7Z" clip-rule="evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path
+    fill-rule="evenodd"
+    d="M1 2.5A1.5 1.5 0 0 1 2.5 1h11A1.5 1.5 0 0 1 15 2.5v3a1.5 1.5 0 0 1-1 1.415V12.5a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 12.5V6.915A1.5 1.5 0 0 1 1 5.5v-3ZM13 5H3V3h10v2Zm-1 2H4v5.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5V7ZM7 8a1 1 0 0 0 0 2h2a1 1 0 1 0 0-2H7Z"
+    clip-rule="evenodd"
+  />
+</svg>

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

@@ -1 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 10a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H9Z"/><path fill-rule="evenodd" d="M1 3a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v3a2 2 0 0 1-1 1.732V20a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7.732A2 2 0 0 1 1 6V3Zm3 5h16v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8Zm17-5H3v3h18V3Z" clip-rule="evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M9 10a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H9Z" />
+  <path
+    fill-rule="evenodd"
+    d="M1 3a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v3a2 2 0 0 1-1 1.732V20a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7.732A2 2 0 0 1 1 6V3Zm3 5h16v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8Zm17-5H3v3h18V3Z"
+    clip-rule="evenodd"
+  />
+</svg>

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

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

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

@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M14 7H4.41l4.3-4.29a1.004 1.004 0 0 0-1.42-1.42l-6 6a1 1 0 0 0 0 1.41l6 6a1 1 0 0 0 1.41-1.41L4.41 9H14a1 1 0 1 0 0-2Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path
+    d="M14 7H4.41l4.3-4.29a1.004 1.004 0 0 0-1.42-1.42l-6 6a1 1 0 0 0 0 1.41l6 6a1 1 0 0 0 1.41-1.41L4.41 9H14a1 1 0 1 0 0-2Z"
+  />
+</svg>

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

@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 0 1 0 1.414L5.414 9H17a1 1 0 1 1 0 2H5.414l5.293 5.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <path
+    d="M10.707 2.293a1 1 0 0 1 0 1.414L5.414 9H17a1 1 0 1 1 0 2H5.414l5.293 5.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z"
+  />
+</svg>