@ebay/skin 14.0.6 → 14.1.1

package/src/less/select/select.less

@@ -14,7 +14,7 @@ span.select {
 .select select {
     appearance: none;
     .background-color-token(select-background-color, color-background-secondary);
-    .border-color-token(select-border-color, color-foreground-secondary);
+    .border-color-token(select-border-color, color-stroke-default);
     border-radius: var(--select-border-radius, var(--border-radius-50));
     border-style: solid;
     border-width: 1px;
@@ -54,13 +54,18 @@ span.select {
     width: auto;
 
     &:focus {
+        background-color: transparent;
         text-decoration: underline;
     }
 }
 
 .select select:focus {
     .background-color-token(select-focus-background-color, color-background-primary);
-    .border-color-token(select-focus-border-color, color-foreground-primary);
+}
+
+.select select:focus:not(:read-only) {
+    .background-color-token(select-focus-background-color, color-background-primary);
+    .border-color-token(select-focus-border-color, color-stroke-default);
     outline: 0;
     text-decoration: underline;
 }
@@ -71,26 +76,24 @@ span.select {
 }
 
 .select select[disabled] {
-    .background-color-token(select-disabled-background-color, color-background-secondary);
-    .color-token(select-disabled-foregound-color, color-foreground-ghost);
+    .border-color-token(textbox-disabled-border-color, color-background-disabled);
+    .color-token(select-disabled-foregound-color, color-foreground-disabled);
+    opacity: 1;
 }
 
-.select--borderless select[disabled] {
-    .background-color-token(select-borderless-disabled-background-color, color-background-secondary);
-    .color-token(select-borderless-disabled-foregound-color, color-foreground-disabled);
+.select select[disabled] + svg {
+    .color-token(select-disabled-foregound-color, color-foreground-on-disabled);
 }
 
 .select select[readonly] {
-    .background-color-token(select-disabled-background-color, color-background-secondary);
-    .color-token(select-readonly-foregound-color, color-foreground-ghost);
+    background-color: transparent;
+    border: none;
 }
 
 .select select[aria-invalid="true"] {
-    .background-color-token(select-invalid-background-color, color-red-1);
     .border-color-token(select-invalid-border-color, color-stroke-attention);
     border-style: solid;
     border-width: 1px;
-    .color-token(select-invalid-foreground-color, color-foreground-primary);
 
     &:focus {
         .background-color-token(select-focus-background-color, color-background-primary);
@@ -98,14 +101,6 @@ span.select {
     }
 }
 
-.select select[aria-invalid="true"] + svg {
-    .color-token(select-invalid-foreground-color, color-foreground-primary);
-}
-
-.select select[disabled] + svg {
-    .color-token(select-disabled-foregound-color, color-foreground-ghost);
-}
-
 // stylelint-disable no-descending-specificity
 [dir="rtl"] {
     .select > select {

package/src/less/select/stories/floating-label.stories.js

@@ -0,0 +1,66 @@
+export default { title: 'Select/Select/Floating Label' };
+
+export const defaultLabel = () => `
+<span class="floating-label">
+    <label class="floating-label__label" for="select-01">Choose Option</label>
+    <span class="select">
+        <select id="select-01">
+            <option value="1">Option 1 with long text</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+        </select>
+        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-dropdown"></use>
+        </svg>
+    </span>
+</span>
+`;
+
+export const selectedOption = () => `
+<span class="floating-label">
+    <label class="floating-label__label floating-label__label--inline" for="select-01">Here are your options</label>
+    <span class="select">
+        <select id="select-01">
+            <option value=""></option>
+            <option value="1">Option 1 with long text</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+        </select>
+        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-dropdown"></use>
+        </svg>
+    </span>
+</span>
+`;
+
+export const errorState = () => `
+<span class="floating-label">
+    <label class="floating-label__label floating-label__label--invalid" for="select-03">Choose Option</label>
+    <span class="select">
+        <select id="select-03" aria-invalid="true">
+            <option value="1">Option 1 with long text</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+        </select>
+        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-dropdown"></use>
+        </svg>
+    </span>
+</span>
+`;
+
+export const disabled = () => `
+<span class="floating-label">
+    <label class="floating-label__label" for="select-03">Choose Option</label>
+    <span class="select">
+        <select disabled>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2 can't pick</option>
+            <option value="3">Option 3</option>
+        </select>
+        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-dropdown"></use>
+        </svg>
+    </span>
+</span>
+`;

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

@@ -46,6 +46,18 @@ export const inheritColor = () => `
 </div>
 `;
 
+export const error = () => `
+<span class="textbox">
+    <input class="textbox__control" type="text"  aria-invalid="true" placeholder="placeholder text" />
+</span>
+`;
+
+export const errorWithValue = () => `
+<span class="textbox">
+    <input class="textbox__control" type="text" placeholder="placeholder text" aria-invalid="true" value="value" />
+</span>
+`;
+
 export const fluid = () => `
 <div class="textbox">
     <input class="textbox__control textbox__control--fluid" type="text" placeholder="placeholder text" />

package/src/less/textbox/textbox.less

@@ -7,6 +7,7 @@
     position: relative;
 
     button.icon-btn {
+        background-color: transparent;
         display: inline-flex;
         height: 100%;
         justify-content: center;
@@ -51,7 +52,6 @@ textarea.textbox__control {
     margin: 0; // Remove the margin in Firefox and Safari.
 
     &[disabled] {
-        .background-color-token(textbox-disabled-background-color, color-background-secondary);
         .border-color-token(textbox-disabled-border-color, color-background-disabled);
         .color-token(textbox-disabled-foreground-color, color-foreground-disabled);
 
@@ -69,21 +69,16 @@ textarea.textbox__control {
     }
 
     &[readonly] {
-        .color-token(textbox-readonly-color, color-foreground-on-secondary);
+        background-color: transparent;
+        border: none;
+        padding-left: 0;
+        padding-right: 0;
     }
 
     &[aria-invalid="true"] {
-        background-color: var(--color-red-1);
         .border-color-token(textbox-invalid-foreground-color, color-stroke-attention);
     }
 
-    &:focus {
-        .border-color-token(textbox-focus-border-color, color-stroke-default);
-        .background-color-token(textbox-focus-background-color, color-background-primary);
-        .color-token(textbox-focus-foreground-color, color-foreground-on-secondary);
-        outline: 0;
-    }
-
     &::-webkit-input-placeholder {
         .color-token(textbox-placeholder-color, color-foreground-on-secondary);
         font-weight: 200;
@@ -133,6 +128,19 @@ input.textbox__control--large {
     }
 }
 
+input.textbox__control:not(:read-only):focus,
+textarea.textbox__control:not(:read-only):focus {
+    .border-color-token(textbox-focus-border-color, color-stroke-default);
+    .background-color-token(textbox-focus-background-color, color-background-primary);
+    outline: 0;
+}
+
+input.textbox__control[readonly]:focus,
+textarea.textbox__control[readonly]:focus {
+    outline: 0;
+    text-decoration: underline;
+}
+
 .textbox > svg:first-child {
     left: @spacing-200;
 

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

@@ -5,9 +5,9 @@ export const primaryAction = () => `
     <div class="toast-dialog__window">
         <div class="toast-dialog__header">
             <h2>User Privacy Preferences</h2>
-            <button class="icon-btn toast-dialog__close" type="button" aria-label="Close notification dialog">
-                <svg class="icon icon--close" focusable="false" height="24" width="24">
-                    <use xlink:href="#icon-close"></use>
+            <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
+                <svg class="icon icon--close icon--close-small" focusable="false">
+                    <use href="#icon-close-small"></use>
                 </svg>
             </button>
         </div>
@@ -27,9 +27,9 @@ export const secondaryAction = () => `
     <div class="toast-dialog__window">
         <div class="toast-dialog__header">
             <h2>User Privacy Preferences</h2>
-            <button class="icon-btn toast-dialog__close" type="button" aria-label="Close notification dialog">
-                <svg class="icon icon--close" focusable="false" height="24" width="24">
-                    <use xlink:href="#icon-close"></use>
+            <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
+                <svg class="icon icon--close icon--close-small" focusable="false">
+                    <use href="#icon-close-small"></use>
                 </svg>
             </button>
         </div>
@@ -51,9 +51,9 @@ export const RTL = () => `
         <div class="toast-dialog__window">
             <div class="toast-dialog__header">
                 <h2>User Privacy Preferences</h2>
-                <button style="margin-right: 140px;" class="icon-btn toast-dialog__close" type="button" aria-label="Close notification dialog">
-                    <svg class="icon icon--close" focusable="false" height="24" width="24">
-                        <use xlink:href="#icon-close"></use>
+                <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
+                    <svg class="icon icon--close icon--close-small" focusable="false">
+                        <use href="#icon-close-small"></use>
                     </svg>
                 </button>
             </div>

package/src/svg/direction.svg

@@ -111,4 +111,9 @@
       d="M6.309 12.194a.625.625 0 0 1 0-.882L9.62 8 6.31 4.694a.628.628 0 1 1 .887-.888l3.75 3.75a.625.625 0 0 1 0 .881l-3.75 3.75a.625.625 0 0 1-.887.007Z"
     />
   </symbol>
+  <symbol viewBox="0 0 20 20" id="icon-arrow-left-medium">
+    <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"
+    />
+  </symbol>
 </svg>

package/src/svg/general.svg

@@ -132,9 +132,9 @@
       d="M16 1a1 1 0 00-1-1H1a1 1 0 00-1 1v20a1 1 0 001.707.707L8 15.414l6.293 6.293A1 1 0 0016 21V1zm-2 17.586l-5.293-5.293a1 1 0 00-1.414 0L2 18.586V2h12v16.586z"
     />
   </symbol>
-  <symbol id="icon-flag" viewBox="0.6 0.1 13.36 21.34">
+  <symbol viewBox="0 0 24 24" id="icon-flag">
     <path
-      d="M9.554 7.881L7.67 4.824l2.386-2.905H2.39c.02 0 .021.008.031.627.025 1.612.038 3.093.045 5.335h7.089zM2.47 12.126v.292c.004 3.977.01 5.93.035 8.072a.919.919 0 11-1.838.02 764.91 764.91 0 01-.034-8.09v-.293C.63 7.156.62 5.013.583 2.574.558 1.011.927.081 2.388.081h11.556L9.922 4.976l2.922 4.743H2.47l.002 2.407z"
+      d="M20.953 1.695A.999.999 0 0 0 19.987 1H6a1 1 0 0 0-1 1v20a1 1 0 1 0 2 0v-9h12.979c.036 0 .072 0 .107-.004a1 1 0 0 0 .466-1.83L14.72 7l5.85-4.178a1.007 1.007 0 0 0 .428-.761 1 1 0 0 0-.045-.366Z"
     />
   </symbol>
   <symbol id="icon-key" viewBox="0.75 0.25 22.5 13.5">
@@ -154,17 +154,19 @@
       d="M11 19.925a8.925 8.925 0 100-17.85 8.925 8.925 0 000 17.85zm0 1.575C5.201 21.5.5 16.799.5 11S5.201.5 11 .5 21.5 5.201 21.5 11 16.799 21.5 11 21.5zm6.052-3.829a2.21 2.21 0 00-1.317-2.025l-2.439-1.023a1.816 1.816 0 01-1.116-1.727 1.81 1.81 0 01.708-1.406c.961-.735 1.365-1.94 1.055-3.146-.326-1.264-1.48-2.147-2.807-2.147-.81 0-1.57.317-2.141.893a2.934 2.934 0 00.306 4.4c.437.335.695.848.708 1.406a1.816 1.816 0 01-1.116 1.727l-2.439 1.023a2.2 2.2 0 00-1.313 1.892.744.744 0 11-1.484-.09 3.688 3.688 0 012.21-3.177l2.453-1.03a.327.327 0 00.202-.311.322.322 0 00-.122-.248 4.423 4.423 0 01-1.744-3.529 4.394 4.394 0 011.286-3.12A4.467 4.467 0 0111.135 4.7a4.373 4.373 0 014.247 3.269c.457 1.773-.169 3.622-1.593 4.713a.322.322 0 00-.122.248.327.327 0 00.202.312l2.453 1.029a3.706 3.706 0 012.217 3.4h-1.487z"
     />
   </symbol>
-  <symbol id="icon-history" viewBox="0 0 24 24">
+  <symbol viewBox="0 0 24 24" id="icon-history">
     <path
-      d="M5.852 17.12a7.999 7.999 0 0014.14-5.47A8 8 0 005.453 7.403l1.272-.364a1 1 0 11.55 1.924l-3.5 1a1 1 0 01-1.17-.515l-1.5-3a1 1 0 111.79-.894l.596 1.193a9.997 9.997 0 0110.46-4.554A10 10 0 113.881 17.84c-.322-.449-.155-1.064.324-1.34.42-.242.938-.142 1.284.183a1.165 1.165 0 01.133.148l.002.002c.073.097.15.193.227.286z"
+      d="M5.07 8a8 8 0 1 1 .324 8.514c-.322-.471-.95-.664-1.445-.378-.46.266-.635.852-.345 1.298A9.992 9.992 0 0 0 12 22c5.523 0 10-4.477 10-10S17.523 2 12 2a9.993 9.993 0 0 0-8.51 4.745l-.595-1.192a1 1 0 0 0-1.79.894l1.491 2.981a1 1 0 0 0 .926.572H7a1 1 0 1 0 0-2H5.07Z"
     />
     <path
-      d="M12 7a1 1 0 011 1v4.586l1.707 1.707a1 1 0 01-1.414 1.414l-2-2A1 1 0 0111 13V8a1 1 0 011-1z"
+      d="M13 8a1 1 0 1 0-2 0v5a1 1 0 0 0 .293.707l2 2a1 1 0 1 0 1.414-1.414L13 12.586V8Z"
     />
   </symbol>
-  <symbol id="icon-lightbulb" viewBox="0 0 24 24">
+  <symbol viewBox="0 0 24 24" id="icon-lightbulb">
     <path
-      d="M6.34 3.34A8 8 0 004 9a7.94 7.94 0 001 4 14 14 0 003.36 3.78 1 1 0 101.28-1.54A11.66 11.66 0 016.75 12 5.93 5.93 0 016 9v-.06a6 6 0 0110.24-4.18A5.93 5.93 0 0118 8.94V9a5.93 5.93 0 01-.75 3 11.66 11.66 0 01-2.89 3.22 1 1 0 001.28 1.54A14 14 0 0019 13a7.94 7.94 0 001-4A8 8 0 006.34 3.34zM12 7a2.07 2.07 0 00-.77.15 2.13 2.13 0 00-1.08 1.08A2.07 2.07 0 0010 9a1 1 0 01-2 0 4 4 0 01.3-1.53A4.16 4.16 0 018.54 7 3.84 3.84 0 0110 5.54a4.16 4.16 0 01.47-.24A4 4 0 0112 5a1 1 0 010 2zm-2 11a1 1 0 000 2h4a1 1 0 000-2zm1 3a1 1 0 000 2h2a1 1 0 000-2z"
+      fill-rule="evenodd"
+      d="m8.039 18.279-.035-.105c-.226-.68-.357-1.072-.574-1.525-.232-.486-.574-1.063-1.262-2.094l-.052-.078C5.148 13.026 4 11.304 4 9a8 8 0 1 1 16 0c0 2.304-1.148 4.026-2.116 5.477l-.052.078c-.688 1.031-1.03 1.608-1.262 2.094-.217.453-.348.845-.574 1.525l-.035.105-.612 2.449A3 3 0 0 1 12.439 23h-.877a3 3 0 0 1-2.91-2.272l-.613-2.45ZM6 9a6 6 0 1 1 12 0c0 1.654-.81 2.913-1.832 4.445-.699 1.049-1.107 1.722-1.403 2.341-.197.412-.34.792-.485 1.214H13v-5.586l1.707-1.707a1 1 0 0 0-1.414-1.414L12 9.586l-1.293-1.293a1 1 0 0 0-1.414 1.414L11 11.414V17H9.72a10.93 10.93 0 0 0-.485-1.214c-.296-.619-.704-1.292-1.403-2.34C6.811 11.912 6 10.653 6 9Zm7.72 10h-3.44l.311 1.243a1 1 0 0 0 .97.757h.877a1 1 0 0 0 .97-.757L13.72 19Z"
+      clip-rule="evenodd"
     />
   </symbol>
   <symbol id="icon-report-flag" viewBox="0 0 24 24">
@@ -213,7 +215,9 @@
     </symbol>
     <symbol viewBox="0 0 16 16" id="icon-delete-small">
       <path
-        d="M15 4h-3.22L11 .76A1 1 0 0010 0H6a1 1 0 00-1 .76L4.22 4H1a1 1 0 100 2h1.1l.9 8.17A2 2 0 005 16h6a2 2 0 002-1.81L13.9 6H15a1 1 0 100-2zM6.78 2h2.44l.5 2H6.28l.5-2zM11 14H5l-.88-8h7.77L11 14z"
+        fill-rule="evenodd"
+        d="m4.22 4 .573-2.296A2.25 2.25 0 0 1 6.976 0h2.048a2.25 2.25 0 0 1 2.183 1.704L11.78 4H15a1 1 0 1 1 0 2h-1.095l-.82 8.2a2 2 0 0 1-1.99 1.8h-6.19a2 2 0 0 1-1.99-1.8L2.095 6H1a1 1 0 0 1 0-2h3.22Zm2.513-1.81A.25.25 0 0 1 6.976 2h2.048a.25.25 0 0 1 .243.19L9.719 4H6.281l.452-1.81ZM4.98 6h6.916l-.8 8h-6.19l-.8-8h.874Z"
+        clip-rule="evenodd"
       />
     </symbol>
     <symbol viewBox="0 0 12 14" id="icon-locked-small">
@@ -300,4 +304,173 @@
       clip-rule="evenodd"
     />
   </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-lightbulb-small">
+    <path
+      fill-rule="evenodd"
+      d="M4.548 12.306c-.354-1.058-.863-1.89-1.187-2.42a6.934 6.934 0 0 1-.255-.439l.003.006-.007-.01-.036-.062-.004-.007a8.482 8.482 0 0 1-.517-.987C2.279 7.781 2 6.94 2 6a6 6 0 1 1 12 0c0 .94-.278 1.781-.546 2.387a8.484 8.484 0 0 1-.383.76l-.133.227-.004.007-.036.061-.007.011.003-.006a6.78 6.78 0 0 1-.255.438c-.324.53-.832 1.361-1.186 2.418a.716.716 0 0 1-.004.013l-.658 1.975A2.5 2.5 0 0 1 8.419 16H7.58a2.5 2.5 0 0 1-2.372-1.71l-.658-1.975a.62.62 0 0 1-.003-.01ZM4 6a4 4 0 1 1 8 0c0 .989-.483 1.829-.758 2.306-.054.094-.1.175-.132.239l-.003.005-.036.058-.062.102-.07.115A20.015 20.015 0 0 0 10.271 10H9V7.478l.868-.7a1 1 0 1 0-1.256-1.556L8 5.716l-.623-.5a1 1 0 0 0-1.252 1.56L7 7.479V10H5.728a20.021 20.021 0 0 0-.666-1.175l-.07-.114a24.872 24.872 0 0 1-.098-.161l-.004-.006c-.032-.064-.078-.143-.132-.238C4.483 7.83 4 6.99 4 6Zm2.554 6h2.892l-.553 1.658A.5.5 0 0 1 8.42 14h-.84a.5.5 0 0 1-.474-.342L6.554 12Z"
+      clip-rule="evenodd"
+    />
+  </symbol>
+  <symbol viewBox="0 0 21 13" id="icon-visa-xsmall" fill="none">
+    <g clip-path="path('M0.833008 0.38031H20.833V12.3803H0.833008V0.38031Z')">
+      <rect x="1.33301" y="0.88031" width="19" height="11" rx="1.5" fill="white" stroke="black"/>
+      <path
+        d="m9.148 4.27-1.93 4.352H5.96L5.01 5.15c-.058-.214-.107-.293-.283-.383-.286-.147-.759-.284-1.174-.37l.028-.126h2.026c.258 0 .49.163.549.444l.501 2.518 1.24-2.962h1.25Zm4.932 2.931c.005-1.148-1.68-1.212-1.669-1.725.004-.156.162-.322.505-.364a2.353 2.353 0 0 1 1.175.194l.209-.923a3.352 3.352 0 0 0-1.114-.193c-1.177 0-2.006.592-2.013 1.439-.007.626.591.976 1.043 1.184.464.214.62.35.618.541-.003.292-.37.421-.713.426-.599.009-.946-.153-1.223-.275l-.216.954c.279.12.792.226 1.325.231 1.25 0 2.069-.584 2.073-1.489m3.108 1.421h1.101l-.961-4.352H16.31a.565.565 0 0 0-.305.086.52.52 0 0 0-.201.233l-1.787 4.033h1.25l.248-.65h1.528l.144.65ZM15.859 7.08l.627-1.634.36 1.634h-.987Zm-5.01-2.81-.985 4.352h-1.19l.985-4.352h1.19Z"
+        fill="#1434CB"
+      />
+    </g>
+  </symbol>
+  <symbol viewBox="0 0 31 19" id="icon-visa-small">
+    <g clip-path="path('M.833.38h30v18h-30v-18Z')">
+      <rect width="29" height="17" x="1.333" y=".88" stroke="#000" rx="1.5"  fill="white" stroke="black"/>
+      <path
+        d="m13.306 6.215-2.894 6.528H8.523L7.1 7.533c-.086-.321-.161-.439-.424-.574-.43-.22-1.139-.427-1.762-.555l.042-.19h3.04a.82.82 0 0 1 .823.666l.752 3.778 1.859-4.443h1.877Zm7.398 4.397c.007-1.723-2.52-1.818-2.503-2.588.005-.234.242-.483.758-.547.256-.031.96-.056 1.761.292l.314-1.384a5.028 5.028 0 0 0-1.671-.29c-1.766 0-3.008.887-3.019 2.158-.011.94.887 1.465 1.564 1.777.696.32.93.525.927.811-.005.438-.555.632-1.07.64-.898.012-1.419-.23-1.834-.413l-.323 1.43c.417.181 1.187.34 1.986.347 1.877 0 3.104-.876 3.11-2.234m4.662 2.132h1.652l-1.442-6.528H24.05a.847.847 0 0 0-.458.129.78.78 0 0 0-.302.35l-2.68 6.049h1.875l.372-.975h2.291l.217.975Zm-1.993-2.313.94-2.452.541 2.452h-1.481Zm-7.515-4.215-1.477 6.528h-1.787l1.478-6.528h1.786Z"
+        fill="#1434CB"
+      />
+    </g>
+  </symbol>
+  <symbol viewBox="0 0 39 25" id="icon-visa">
+    <g clip-path="path('M.833.38h38v24h-38v-24Z')">
+      <rect width="37" height="23" x="1.333" y=".88" stroke="#000" rx="1.5"  fill="white" stroke="black"/>
+      <path
+        d="m16.631 8.16-3.665 8.704h-2.392L8.77 9.917c-.11-.428-.204-.585-.538-.765-.544-.293-1.442-.569-2.231-.74l.053-.252h3.85c.49 0 .932.325 1.043.887l.953 5.037 2.354-5.924h2.377Zm9.371 5.862c.01-2.297-3.192-2.424-3.17-3.45.007-.312.307-.644.96-.73.324-.041 1.217-.074 2.231.39l.398-1.845A6.084 6.084 0 0 0 24.304 8c-2.237 0-3.81 1.183-3.824 2.877-.014 1.254 1.123 1.953 1.98 2.37.883.426 1.178.7 1.175 1.081-.006.584-.703.842-1.355.852-1.137.018-1.797-.306-2.323-.55l-.41 1.907c.529.242 1.505.452 2.516.463 2.377 0 3.932-1.168 3.94-2.978m5.905 2.842H34L32.174 8.16h-1.932a1.033 1.033 0 0 0-.962.638l-3.396 8.066h2.376l.472-1.3h2.902l.274 1.3Zm-2.525-3.084 1.191-3.269.685 3.268h-1.876Zm-9.519-5.62-1.87 8.704H15.73l1.871-8.704h2.262Z"
+        fill="#1434CB"
+      />
+    </g>
+  </symbol>
+  <symbol fill="none" viewBox="0 0 51 33" id="icon-visa-large">
+      <g clip-path="path('M.8.4h50v32H.8V.4Z')">
+        <rect width="49" height="31" x="1.3" y=".9" fill="#fff" stroke="#000" rx="1.5"/>
+        <path fill="#1434CB" d="m21.6 10.8-4.8 11.6h-3.2L11.3 13c-.2-.6-.3-.8-.7-1-.7-.4-2-.8-3-1l.1-.3h5c.7 0 1.3.4 1.4 1.1l1.3 6.8 3-8h3.2ZM34 18.6c0-3-4.2-3.3-4.2-4.6 0-.4.4-.9 1.2-1 .5 0 1.6-.1 3 .5l.5-2.4a8 8 0 0 0-2.8-.6c-3 0-5 1.6-5 3.9 0 1.6 1.5 2.6 2.6 3.1 1.2.6 1.5 1 1.5 1.5 0 .8-.9 1.1-1.7 1.1-1.5 0-2.4-.4-3.1-.7l-.5 2.5c.7.3 2 .6 3.3.6 3.1 0 5.1-1.5 5.2-4m7.7 3.9h2.8L42 10.8h-2.6a1.3 1.3 0 0 0-1.2.8l-4.5 10.8h3.1l.6-1.8h3.9l.3 1.8Zm-3.3-4.2L40 14l.9 4.3h-2.5Zm-12.5-7.4-2.5 11.6h-3L23 10.8h3Z"/>
+      </g>
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-archive">
+    <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"
+    />
+  </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-archive-small">
+    <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"
+    />
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-inbox">
+    <path
+      fill-rule="evenodd"
+      d="M1.015 14.826A.988.988 0 0 0 1 15v5a3 3 0 0 0 3 3h16a3 3 0 0 0 3-3v-5a.988.988 0 0 0-.015-.174L21.249 3.544A3 3 0 0 0 18.284 1H5.716A3 3 0 0 0 2.75 3.544L1.015 14.826ZM20.835 14 19.271 3.848A1 1 0 0 0 18.285 3H5.716a1 1 0 0 0-.989.848L3.166 14h3.392a3 3 0 0 1 2.847 2.051l.088.265a1 1 0 0 0 .949.684h3.116a1 1 0 0 0 .95-.684l.088-.265A3 3 0 0 1 17.441 14h3.392ZM21 16v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4h3.558a1 1 0 0 1 .95.683l.087.265A3 3 0 0 0 10.442 19h3.116a3 3 0 0 0 2.846-2.052l.089-.265a1 1 0 0 1 .949-.684H21Z"
+      clip-rule="evenodd"
+    />
+  </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-inbox-small">
+    <path
+      fill-rule="evenodd"
+      d="M1.027 8.77A1.003 1.003 0 0 0 1 9v3.5A2.5 2.5 0 0 0 3.5 15h9a2.5 2.5 0 0 0 2.5-2.5V9c0-.08-.01-.156-.027-.23l-1.241-5.794A2.5 2.5 0 0 0 11.287 1H4.713a2.5 2.5 0 0 0-2.445 1.976L1.027 8.77ZM12.763 8l-.987-4.605A.5.5 0 0 0 11.287 3H4.713a.5.5 0 0 0-.49.395L3.238 8h1.439c.884 0 1.692.5 2.087 1.29l.263.526a.333.333 0 0 0 .298.184h1.352a.333.333 0 0 0 .298-.184l.263-.526A2.333 2.333 0 0 1 11.324 8h1.439ZM13 10v2.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10h1.676c.126 0 .242.071.298.184l.263.526A2.333 2.333 0 0 0 7.324 12h1.352c.884 0 1.692-.5 2.087-1.29l.263-.526a.333.333 0 0 1 .298-.184H13Z"
+      clip-rule="evenodd"
+    />
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-folder">
+    <path
+      fill-rule="evenodd"
+      d="M1 6a3 3 0 0 1 3-3h4.172a3 3 0 0 1 2.12.879L11.415 5H20a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V6Zm2 0a1 1 0 0 1 1-1h4.172a1 1 0 0 1 .707.293l1.414 1.414A1 1 0 0 0 11 7h9a1 1 0 0 1 1 1v2H3V6Zm18 6v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6h18Z"
+      clip-rule="evenodd"
+    />
+  </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-folder-small">
+    <path
+      fill-rule="evenodd"
+      d="M0 3.5A2.5 2.5 0 0 1 2.5 1h2.879a2.5 2.5 0 0 1 1.767.732L8.414 3H13.5A2.5 2.5 0 0 1 16 5.5v7a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5v-9Zm2 0a.5.5 0 0 1 .5-.5h2.879a.5.5 0 0 1 .353.146l1.56 1.561A1 1 0 0 0 8 5h5.5a.5.5 0 0 1 .5.5V7H2V3.5ZM14 9v3.5a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5V9h12Z"
+      clip-rule="evenodd"
+    />
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-reply">
+    <path
+      d="M12 9c6.075 0 11 4.925 11 11v1a1 1 0 1 1-2 0v-1a9 9 0 0 0-9-9H3.414l5.293 5.293a1 1 0 1 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 1.414L3.414 9H12Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-reply-small">
+    <path
+      d="M8 6a7 7 0 0 1 7 7 1 1 0 1 1-2 0 5 5 0 0 0-5-5H3.414l2.293 2.293a1 1 0 1 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 1.414L3.414 6H8Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-live-eye">
+    <path
+      d="M2.895 13.447c.214-.428 1.152-2.076 2.736-3.602C7.214 8.321 9.354 7 12.001 7c2.646 0 4.785 1.321 6.368 2.845 1.584 1.526 2.523 3.174 2.737 3.602a1 1 0 1 0 1.789-.894c-.286-.572-1.348-2.424-3.139-4.148C17.964 6.679 15.354 5 12 5 8.647 5 6.036 6.679 4.244 8.405c-1.79 1.724-2.852 3.576-3.138 4.148a1 1 0 1 0 1.789.894Z"
+    />
+    <path
+      fill-rule="evenodd"
+      d="M17 14a5 5 0 1 1-10 0 5 5 0 0 1 10 0Zm-2 0a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+      clip-rule="evenodd"
+    />
+  </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-live-eye-small">
+    <path
+      d="M1.895 9.447c.222-.444.862-1.586 1.913-2.603C4.854 5.83 6.243 5 8 5c1.757 0 3.146.831 4.192 1.844a10.136 10.136 0 0 1 1.914 2.603 1 1 0 0 0 1.789-.894 12.128 12.128 0 0 0-2.312-3.147C12.304 4.17 10.443 3 8 3S3.696 4.169 2.417 5.406A12.129 12.129 0 0 0 .106 8.553a1 1 0 1 0 1.789.894Z"
+    />
+    <path d="M8 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-return">
+    <path
+      d="M9.707 3.707a1 1 0 0 0-1.414-1.414l-5 5a.999.999 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414L6.414 9H14c3.385 0 6 2.53 6 5.5S17.385 20 14 20H5a1 1 0 1 0 0 2h9c4.347 0 8-3.29 8-7.5S18.347 7 14 7H6.414l3.293-3.293Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-return-small">
+    <path
+      d="M6.707 2.707a1 1 0 0 0-1.414-1.414l-3 3a.997.997 0 0 0 0 1.414l3 3a1 1 0 1 0 1.414-1.414L5.414 6H9c2.31 0 4 1.663 4 3.5 0 1.836-1.69 3.5-4 3.5H4a1 1 0 1 0 0 2h5c3.212 0 6-2.366 6-5.5S12.212 4 9 4H5.414l1.293-1.293Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 24 25" id="icon-undo">
+    <path
+      d="M5.07 8.38a8 8 0 1 1 .324 8.514c-.322-.47-.95-.663-1.445-.378-.46.266-.635.852-.345 1.299A9.992 9.992 0 0 0 12 22.38c5.523 0 10-4.477 10-10 0-5.522-4.477-10-10-10a9.993 9.993 0 0 0-8.51 4.746l-.595-1.193a1 1 0 0 0-1.79.895l1.491 2.98a1 1 0 0 0 .926.573H7a1 1 0 0 0 0-2H5.07Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-certified-recycle">
+    <g clip-path="url(#clip0_67655_82585)">
+      <path
+        d="m19.71 9.378-3.752-6.999c-1.697-3.167-6.24-3.165-7.934.004L5.807 6.528a1 1 0 1 0 1.764.943l2.217-4.145c.941-1.76 3.465-1.762 4.408-.002l3.783 7.059-1.204-.344a1 1 0 1 0-.55 1.923l3.481.994.019.006a1 1 0 0 0 1.236-.687l.003-.009.998-3.491a1 1 0 0 0-1.923-.55l-.33 1.153ZM22.124 15a1 1 0 0 0-.881 1.472l.453.847c.893 1.665-.314 3.68-2.203 3.68H4.509c-1.888 0-3.095-2.013-2.205-3.678l1.93-3.609.303 1.063a1 1 0 0 0 1.923-.55l-.992-3.473a1 1 0 0 0-1.243-.713l-3.5 1a1 1 0 1 0 .549 1.923l1.29-.369-2.023 3.785C-1.062 19.375 1.11 23 4.509 23h14.984c3.4 0 5.573-3.628 3.966-6.626l-.454-.846a1 1 0 0 0-.881-.528Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_67655_82585"><path d="M0 0h24v24H0z" /></clipPath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-certified-recycle-small">
+    <path
+      d="M12.845 5.551a.98.98 0 0 0-.02-.036l-2.202-3.969C9.48-.513 6.52-.513 5.377 1.546L4.285 3.515a1 1 0 0 0 1.748.97l1.093-1.968a1 1 0 0 1 1.748 0l2.172 3.913a1 1 0 0 0-.365 1.959l2.04.571a.997.997 0 0 0 1.225-.636l.73-1.977a1 1 0 0 0-1.831-.796ZM14.726 10a1 1 0 0 0-.874 1.485l.016.03A1 1 0 0 1 12.994 13H3.006a1 1 0 0 1-.874-1.485l1.134-2.043a1 1 0 0 0 1.833-.78l-.646-1.993a1 1 0 0 0-1.19-.67l-2.067.502A1 1 0 0 0 1.518 8.5L.383 10.545C-.727 12.545.72 15 3.006 15h9.988c2.287 0 3.733-2.456 2.623-4.456l-.016-.03a1 1 0 0 0-.875-.514Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 20 20" id="icon-selling-medium">
+    <path d="M8 6.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
+    <path
+      fill-rule="evenodd"
+      d="M5 1h5a.997.997 0 0 1 .707.293l9 9a1 1 0 0 1 0 1.414l-8 8a1.002 1.002 0 0 1-1.414 0l-9-9A.999.999 0 0 1 1 10V5a.997.997 0 0 1 .293-.707l3-3A.997.997 0 0 1 5 1ZM3 5.414v4.172l8 8L17.586 11l-8-8H5.414L3 5.414Z"
+      clip-rule="evenodd"
+    />
+  </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-sort-small">
+    <path
+      d="M4 3.001a.75.75 0 0 1 .75.75v6.544l.94-1.046a.75.75 0 1 1 1.116 1.003L4.569 12.74a.75.75 0 0 1-1.137 0l-2.24-2.487a.75.75 0 1 1 1.115-1.004l.943 1.047V3.752a.75.75 0 0 1 .75-.75Zm6.308 3.755a.75.75 0 1 1-1.116-1.002l2.25-2.505a.75.75 0 0 1 1.18.081l2.184 2.418a.75.75 0 1 1-1.112 1.006L12.75 5.71v6.541a.75.75 0 0 1-1.5 0V5.707l-.942 1.05Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-sort-up-small">
+    <path
+      d="M8.253 3.054a.71.71 0 0 0-.776.157l-4.27 4.287A.717.717 0 0 0 3.21 8.51a.71.71 0 0 0 1.007-.003l3.054-3.073v6.853a.713.713 0 1 0 1.423 0V5.433l3.054 3.073a.71.71 0 0 0 1.232-.298.716.716 0 0 0-.229-.71l-4.27-4.287a.712.712 0 0 0-.228-.157Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-sort-down-small">
+    <path
+      d="M7.747 12.946a.71.71 0 0 0 .776-.157l4.27-4.287a.717.717 0 0 0-.003-1.011.71.71 0 0 0-1.007.003l-3.054 3.073V3.714A.713.713 0 0 0 8.017 3a.713.713 0 0 0-.711.714v6.853L4.252 7.494a.71.71 0 0 0-1.232.298.716.716 0 0 0 .229.71l4.27 4.287c.065.067.143.12.228.157Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-flag-small">
+    <path
+      fill-rule="evenodd"
+      d="M13.8 1.4a1 1 0 0 1-.241 1.431L10.667 5l2.928 2.196.016.013a.995.995 0 0 1 .378.644.997.997 0 0 1-.891 1.142 1.007 1.007 0 0 1-.114.005H5v5a1 1 0 1 1-2 0V2.001a1 1 0 0 1 1.045-1h8.899a.999.999 0 0 1 .856.399Z"
+      clip-rule="evenodd"
+    />
+  </symbol>
 </svg>