@ebay/skin 14.1.3 → 14.2.1

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

@@ -1,18 +1,348 @@
-export default { title: 'Tooltip/Tooltip/Pointer' };
+export default { title: 'Tooltip/Pointer' };
+
+const pointerStyles = {
+    left: {
+        transform: 'translateX(16px) translateY(-50%)',
+        left: '100%',
+        right: 'auto',
+        top: '0',
+        bottom: 'auto',
+    },
+    'left-top': {
+        transform: 'translateX(16px)',
+        left: '100%',
+        right: 'auto',
+        top: '-25%',
+        bottom: 'auto',
+    },
+    'left-bottom': {
+        transform: 'translateX(16px)',
+        left: '100%',
+        right: 'auto',
+        top: 'auto',
+        bottom: '8px',
+    },
+    right: {
+        transform: 'translateX(-16px) translateY(-50%)',
+        left: 'auto',
+        right: '100%',
+        top: '0',
+        bottom: 'auto',
+    },
+    'right-top': {
+        transform: 'translateX(-16px)',
+        left: 'auto',
+        right: '100%',
+        top: '-25%',
+        bottom: 'auto',
+    },
+    'right-bottom': {
+        transform: 'translateX(-16px)',
+        left: 'auto',
+        right: '100%',
+        top: 'auto',
+        bottom: '4px',
+    },
+    top: {
+        transform: 'translateX(-50%)',
+        left: '50%',
+        right: 'auto',
+        top: 'calc(100% + 2px)',
+        bottom: 'auto',
+    },
+    'top-left': {
+        left: '4px',
+        right: 'auto',
+        top: 'calc(100% + 2px)',
+        bottom: 'auto',
+    },
+    'top-right': {
+        left: 'auto',
+        right: '4px',
+        top: 'calc(100% + 2px)',
+        bottom: 'auto',
+    },
+    'bottom-right': {
+        left: 'auto',
+        right: '4px',
+        top: 'auto',
+        bottom: 'calc(100% + 12px)',
+    },
+    'bottom-left': {
+        left: '4px',
+        right: 'auto',
+        top: 'auto',
+        bottom: 'calc(100% + 12px)',
+    },
+    bottom: {
+        transform: 'translateX(-50%)',
+        left: '50%',
+        right: 'auto',
+        top: 'auto',
+        bottom: 'calc(100% + 12px)',
+    },
+};
+
+function getPointerStyle(key) {
+    const ret = [];
+    for (const pointerKey of Object.keys(pointerStyles[key])) {
+        ret.push(`${pointerKey}: ${pointerStyles[key][pointerKey]}`);
+    }
+    return ret.join('; ');
+}
+
+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 xlink:href="#icon-settings"></use>
+        </svg>
+    </button>
+    <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle('top')}">
+        <span class="tooltip__pointer tooltip__pointer--top"></span>
+        <div class="tooltip__mask">
+            <div class="tooltip__cell">
+                <div class="tooltip__content">
+                    <p>Pointer</p>
+                    <p>Item</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</span>`;
+
+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 xlink:href="#icon-settings"></use>
+        </svg>
+    </button>
+    <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
+        'top-left'
+    )}">
+        <span class="tooltip__pointer tooltip__pointer--top-left"></span>
+        <div class="tooltip__mask">
+            <div class="tooltip__cell">
+                <div class="tooltip__content">
+                    <p>Pointer</p>
+                    <p>Item</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</span>`;
+
+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 xlink:href="#icon-settings"></use>
+        </svg>
+    </button>
+    <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
+        'left-top'
+    )}">
+        <span class="tooltip__pointer tooltip__pointer--left-top"></span>
+        <div class="tooltip__mask">
+            <div class="tooltip__cell">
+                <div class="tooltip__content">
+                    <p>Pointer</p>
+                    <p>Item</p>
+               </div>
+            </div>
+        </div>
+    </div>
+</span>`;
 
 export const left = () => `
-<span class="tooltip">
+<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 xlink:href="#icon-settings"></use>
         </svg>
     </button>
-    <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="bottom: -4px; left: calc(100% + 12px)">
+    <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle('left')}">
         <span class="tooltip__pointer tooltip__pointer--left"></span>
         <div class="tooltip__mask">
             <div class="tooltip__cell">
                 <div class="tooltip__content">
-                    <p>Pointer Left</p>
+                    <p>Pointer</p>
+                    <p>Item</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</span>`;
+
+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 xlink:href="#icon-settings"></use>
+        </svg>
+    </button>
+    <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
+        'left-bottom'
+    )}">
+        <span class="tooltip__pointer tooltip__pointer--left-bottom"></span>
+        <div class="tooltip__mask">
+            <div class="tooltip__cell">
+                <div class="tooltip__content">
+                    <p>Pointer</p>
+                    <p>Item</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</span>`;
+
+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 xlink:href="#icon-settings"></use>
+        </svg>
+    </button>
+    <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
+        'bottom-left'
+    )}">
+        <span class="tooltip__pointer tooltip__pointer--bottom-left"></span>
+        <div class="tooltip__mask">
+            <div class="tooltip__cell">
+                <div class="tooltip__content">
+                    <p>Pointer</p>
+                    <p>Item</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</span>`;
+
+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 xlink:href="#icon-settings"></use>
+        </svg>
+    </button>
+    <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
+        'bottom'
+    )}">
+        <span class="tooltip__pointer tooltip__pointer--bottom"></span>
+        <div class="tooltip__mask">
+            <div class="tooltip__cell">
+                <div class="tooltip__content">
+                    <p>Pointer</p>
+                    <p>Item</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</span>`;
+
+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 xlink:href="#icon-settings"></use>
+        </svg>
+    </button>
+    <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
+        'bottom-right'
+    )}">
+        <span class="tooltip__pointer tooltip__pointer--bottom-right"></span>
+        <div class="tooltip__mask">
+            <div class="tooltip__cell">
+                <div class="tooltip__content">
+                    <p>Pointer</p>
+                    <p>Item</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</span>`;
+
+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 xlink:href="#icon-settings"></use>
+        </svg>
+    </button>
+    <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
+        'right-bottom'
+    )}">
+        <span class="tooltip__pointer tooltip__pointer--right-bottom"></span>
+        <div class="tooltip__mask">
+            <div class="tooltip__cell">
+                <div class="tooltip__content">
+                    <p>Pointer</p>
+                    <p>Item</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</span>`;
+
+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 xlink:href="#icon-settings"></use>
+        </svg>
+    </button>
+    <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle('right')}">
+        <span class="tooltip__pointer tooltip__pointer--right"></span>
+        <div class="tooltip__mask">
+            <div class="tooltip__cell">
+                <div class="tooltip__content">
+                    <p>Pointer</p>
+                    <p>Item</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</span>`;
+
+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 xlink:href="#icon-settings"></use>
+        </svg>
+    </button>
+    <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
+        'right-top'
+    )}">
+        <span class="tooltip__pointer tooltip__pointer--right-top"></span>
+        <div class="tooltip__mask">
+            <div class="tooltip__cell">
+                <div class="tooltip__content">
+                    <p>Pointer</p>
+                    <p>Item</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</span>`;
+
+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 xlink:href="#icon-settings"></use>
+        </svg>
+    </button>
+    <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
+        'top-right'
+    )}">
+        <span class="tooltip__pointer tooltip__pointer--top-right"></span>
+        <div class="tooltip__mask">
+            <div class="tooltip__cell">
+                <div class="tooltip__content">
+                    <p>Pointer</p>
+                    <p>Item</p>
                 </div>
             </div>
         </div>

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

@@ -1,4 +1,4 @@
-export default { title: 'Tooltip/Tooltip' };
+export default { title: 'Tooltip' };
 
 export const collapsed = () => `
 <span class="tooltip">
@@ -26,7 +26,7 @@ export const expanded = () => `
             <use xlink:href="#icon-settings"></use>
         </svg>
     </button>
-    <div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(100% - 100px); left: 0">
+    <div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(100% - 90px); left: 4px">
         <span class="tooltip__pointer tooltip__pointer--top-left"></span>
         <div class="tooltip__mask">
             <div class="tooltip__cell">

package/src/less/tooltip/tooltip.less

@@ -21,8 +21,8 @@ span.tooltip {
 
 .tooltip__mask {
     .bubble-mask();
-    .background-color-token(tooltip-background-color, color-background-information);
-    .color-token(tooltip-foreground-color, color-foreground-on-information);
+    .background-color-token(tooltip-background-color, color-background-primary);
+    .color-token(tooltip-foreground-color, color-foreground-primary);
 }
 
 span.tooltip__mask {
@@ -33,7 +33,7 @@ span.tooltip__mask {
     .bubble-cell();
 
     a {
-        .color-token(tooltip-foreground-color, color-foreground-on-information);
+        .color-token(tooltip-foreground-color, color-foreground-primary);
 
         &:focus {
             outline: 1px dashed currentColor;
@@ -53,7 +53,7 @@ button.tooltip__close {
     .pointer-base();
     .pointer-top();
     .pointer-center();
-    .background-color-token(tooltip-background-color, color-background-information);
+    .background-color-token(tooltip-background-color, color-background-primary);
 }
 
 .tooltip__pointer--top-left {

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

@@ -1,4 +1,4 @@
-export default { title: 'Tourtip/Tourtip' };
+export default { title: 'Tourtip' };
 
 export const collapsed = () => `
 <div class="tourtip">

package/src/less/tourtip/tourtip.less

@@ -19,8 +19,8 @@ span.tourtip {
 
 .tourtip__mask {
     .bubble-mask();
-    .background-color-token(tourtip-background-color, color-background-information);
-    .color-token(tourtip-foreground-color, color-foreground-on-information);
+    .background-color-token(tourtip-background-color, color-background-primary);
+    .color-token(tourtip-foreground-color, color-foreground-primary);
 }
 
 span.tourtip__mask {
@@ -31,7 +31,7 @@ span.tourtip__mask {
     .bubble-cell();
 
     a {
-        .color-token(tourtip-foreground-color, color-foreground-on-information);
+        .color-token(tourtip-foreground-color, color-foreground-primary);
 
         &:focus {
             outline: 1px dashed currentColor;
@@ -45,21 +45,10 @@ span.tourtip__mask {
 
 button.tourtip__close {
     .bubble-close();
-    .color-token(tourtip-foreground-color, color-foreground-on-information);
-
-    &:focus,
-    &:hover {
-        color: var(--color-state-primary-hover);
-    }
-
-    &:focus {
-        outline: 1px dashed currentColor;
-    }
 }
 
 button.tourtip__close > svg {
     fill: currentColor;
-    height: 14px;
     width: 14px;
 }
 
@@ -67,7 +56,7 @@ button.tourtip__close > svg {
     .pointer-base();
     .pointer-top();
     .pointer-center();
-    .background-color-token(tourtip-background-color, color-background-information);
+    .background-color-token(tourtip-background-color, color-background-primary);
 }
 
 .tourtip__pointer--top-left {

package/src/less/variables/variables.less

@@ -33,6 +33,7 @@
 @spacing-25: @spacing-100 * 0.25;
 @spacing-50: @spacing-100 * 0.5;
 @spacing-100: 8px;
+@spacing-150: @spacing-100 * 1.5;
 @spacing-200: @spacing-100 * 2;
 @spacing-300: @spacing-100 * 3;
 @spacing-400: @spacing-100 * 4;

package/src/less/window-notice/stories/window-notice.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Window Notice/Window Notice' };
+export default { title: 'Window Notice' };
 
 export const base = () => `
 <section class="window-notice" role="region" aria-label="Congratulations" aria-roledescription="Notice">

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

@@ -0,0 +1,5 @@
+<svg viewbox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M13 6H8V1a1 1 0 10-2 0v5H1a1 1 0 100 2h5v5a1 1 0 002 0V8h5a1 1 0 000-2z"
+  />
+</svg>

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

@@ -0,0 +1,5 @@
+<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M19 9h-8V1a1 1 0 00-2 0v8H1a1 1 0 000 2h8v8a1 1 0 002 0v-8h8a1 1 0 000-2z"
+  />
+</svg>

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

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

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

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

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

@@ -0,0 +1,5 @@
+<svg viewbox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M13 6.028H3.41l4.3-4.307a1.011 1.011 0 000-1.426 1.001 1.001 0 00-1.42 0l-6 6.024a1.007 1.007 0 000 1.416l6 6.024a.997.997 0 001.358-.053c.37-.37.392-.965.052-1.363L3.41 8.036H13c.552 0 1-.45 1-1.004 0-.555-.448-1.004-1-1.004z"
+  />
+</svg>

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

@@ -0,0 +1,5 @@
+<svg viewbox="0 0 20 18" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M19 8H3.415l6.298-6.287a1.002 1.002 0 00-.45-1.679 1.003 1.003 0 00-.97.26L.297 8.29a1 1 0 000 1.419l7.998 7.995a1.001 1.001 0 001.42 0 1 1 0 000-1.419L3.414 9.999H19a1 1 0 000-2z"
+  />
+</svg>

package/src/svg/icon/icon-arrow-move-small.svg

@@ -0,0 +1,5 @@
+<svg viewbox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10.768 9.34l-7.34-7.33H9.05a1.005 1.005 0 000-2.01H1.005C.45 0 0 .45 0 1.005V9.05a1.005 1.005 0 002.01 0v-5.62l7.33 7.33a1.005 1.005 0 001.418-1.418h.01z"
+  />
+</svg>

package/src/svg/icon/icon-arrow-move.svg

@@ -0,0 +1,5 @@
+<svg viewbox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M14.704 13.29L3.48 2h9.516a1 1 0 000-2H1a1 1 0 00-1 1v12a1 1 0 002 0V3.35l11.285 11.36a.999.999 0 00.71.29.999.999 0 00.71-1.71z"
+  />
+</svg>

package/src/svg/icon/icon-arrow-right-bold.svg

@@ -0,0 +1,5 @@
+<svg viewbox="1.2 2.1 22 21" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M11.704 22.098a1.48 1.48 0 01-1.02-.386 1.38 1.38 0 01-.413-.996c0-.375.146-.721.415-.978.411-.397 5.078-4.857 6.494-6.21H2.706c-1.035 0-1.506-.726-1.506-1.4 0-.679.471-1.406 1.506-1.406h14.472c-1.42-1.353-6.02-5.736-6.497-6.213-.292-.291-.445-.635-.442-.996a1.37 1.37 0 01.447-.975c.501-.479 1.354-.681 2.037.003.561.56 9.765 9.334 9.856 9.423l.173.163-.172.162c-.093.09-9.407 8.985-9.86 9.422-.264.258-.639.387-1.016.387"
+  />
+</svg>

package/src/svg/icon/icon-arrow-right-extra-small.svg

@@ -0,0 +1,5 @@
+<svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M9.946 5.253a.71.71 0 00-.157-.776L5.502.207A.717.717 0 004.49.21a.71.71 0 00.003 1.007l3.073 3.054H.715A.713.713 0 000 4.983c0 .393.32.711.715.711h6.852L4.494 8.748a.71.71 0 00.298 1.232.716.716 0 00.71-.229l4.287-4.27a.712.712 0 00.157-.228z"
+  />
+</svg>

package/src/svg/icon/icon-arrow-right-group-titles.svg

@@ -0,0 +1,5 @@
+<svg viewbox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M13.925 7.354a.994.994 0 00-.22-1.086L7.703.29a1.004 1.004 0 00-1.416.005.994.994 0 00.005 1.41l4.302 4.274H1c-.552 0-1 .446-1 .997 0 .55.448.996 1 .996h9.594l-4.302 4.275a.994.994 0 00.417 1.725c.365.088.75-.036.994-.32l6.002-5.979c.093-.09.168-.2.22-.319z"
+  />
+</svg>

package/src/svg/icon/icon-arrow-right-small.svg

@@ -0,0 +1,5 @@
+<svg viewbox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M13.925 7.354a.994.994 0 00-.22-1.086L7.703.29a1.004 1.004 0 00-1.416.005.994.994 0 00.005 1.41l4.302 4.274H1c-.552 0-1 .446-1 .997 0 .55.448.996 1 .996h9.594l-4.302 4.275a.994.994 0 00.417 1.725c.365.088.75-.036.994-.32l6.002-5.979c.093-.09.168-.2.22-.319z"
+  />
+</svg>

package/src/svg/icon/icon-arrow-right.svg

@@ -0,0 +1,5 @@
+<svg viewbox="0 0 20 18" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M19.704 8.29L11.706.293a1.004 1.004 0 00-1.42 1.419L16.586 8H1a1 1 0 000 1.998h15.585l-6.298 6.287a1 1 0 000 1.42 1.001 1.001 0 001.42 0l7.997-7.996a1 1 0 000-1.42z"
+  />
+</svg>

package/src/svg/icon/icon-attention-filled-small.svg

@@ -0,0 +1,5 @@
+<svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8 0a8 8 0 100 16A8 8 0 008 0zm0 12a1 1 0 110-2 1 1 0 010 2zm1-4a1 1 0 11-2 0V5a1 1 0 112 0v3z"
+  />
+</svg>

package/src/svg/icon/icon-attention-filled.svg

@@ -0,0 +1,6 @@
+<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12C23.994 5.375 18.625.006 12 0zm0 18a1 1 0 110-2 1 1 0 010 2zm1-5V7a1 1 0 00-2 0v6a1 1 0 002 0z"
+  />
+</svg>

package/src/svg/icon/icon-attention-small.svg

@@ -0,0 +1,5 @@
+<svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8 0a8 8 0 110 16A8 8 0 018 0zm0 2a6 6 0 100 12A6 6 0 008 2zm0 8a1 1 0 110 2 1 1 0 010-2zm0-6a1 1 0 011 1v3a1 1 0 11-2 0V5a1 1 0 011-1z"
+  />
+</svg>

package/src/svg/icon/icon-attention.svg

@@ -0,0 +1,5 @@
+<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M0 12C0 5.373 5.373 0 12 0c6.625.006 11.994 5.375 12 12 0 6.627-5.373 12-12 12S0 18.627 0 12zm2 0c0 5.523 4.477 10 10 10 5.52-.006 9.994-4.48 10-10 0-5.523-4.477-10-10-10S2 6.477 2 12zm10-6a1 1 0 011 1v6a1 1 0 01-2 0V7a1 1 0 011-1zm1 11a1 1 0 11-2 0 1 1 0 012 0z"
+  />
+</svg>

package/src/svg/icon/icon-avatar-dark.svg

@@ -0,0 +1,18 @@
+<svg fill="none" viewbox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path
+      fill="#fff"
+      d="M0 11C0 4.92487 4.92487 0 11 0c6.0751 0 11 4.92487 11 11 0 6.0751-4.9249 11-11 11-6.07513 0-11-4.9249-11-11Z"
+    />
+    <path
+      fill="#333"
+      d="M0 11C0 4.92487 4.92487 0 11 0c6.0751 0 11 4.92487 11 11 0 6.0751-4.9249 11-11 11-6.07513 0-11-4.9249-11-11Z"
+    />
+    <ellipse cx="11" cy="22.55" fill="gray" rx="7.48" ry="6.6" />
+    <circle cx="11" cy="10.67" r="4.62" fill="gray" />
+  </g>
+  <path
+    fill="#171717"
+    d="M11 20c-4.97056 0-9-4.0294-9-9h-4c0 7.1797 5.8203 13 13 13v-4Zm9-9c0 4.9706-4.0294 9-9 9v4c7.1797 0 13-5.8203 13-13h-4Zm-9-9c4.9706 0 9 4.02944 9 9h4c0-7.1797-5.8203-13-13-13v4Zm0-4C3.8203-2-2 3.8203-2 11h4c0-4.97056 4.02944-9 9-9v-4Z"
+  />
+</svg>

package/src/svg/icon/icon-avatar-filled.svg

@@ -0,0 +1,8 @@
+<svg viewbox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M4.075 19.547C4.57 16.409 7.483 14 11 14s6.429 2.409 6.925 5.547A10.954 10.954 0 0111 22c-2.625 0-5.034-.92-6.925-2.453zM15 9a4 4 0 11-8 0 4 4 0 018 0z"
+  />
+  <path
+    d="M11 20a9 9 0 110-18 9 9 0 010 18zm0 2c6.075 0 11-4.925 11-11S17.075 0 11 0 0 4.925 0 11s4.925 11 11 11z"
+  />
+</svg>

package/src/svg/icon/icon-avatar-light.svg

@@ -0,0 +1,16 @@
+<svg viewbox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+  <g
+    clip-path="path('M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20z')"
+  >
+    <path
+      d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20z"
+      fill="#F7F7F7"
+    />
+    <ellipse cx="20" cy="41" rx="13.6" ry="12" fill="#707070" />
+    <circle cx="20" cy="19.4" r="8.4" fill="#707070" />
+  </g>
+  <path
+    d="M20 38c-9.941 0-18-8.059-18-18h-4c0 12.15 9.85 22 22 22v-4zm18-18c0 9.941-8.059 18-18 18v4c12.15 0 22-9.85 22-22h-4zM20 2c9.941 0 18 8.059 18 18h4C42 7.85 32.15-2 20-2v4zm0-4C7.85-2-2 7.85-2 20h4c0-9.941 8.059-18 18-18v-4z"
+    fill-opacity="0"
+  />
+</svg>