@ebay/skin 16.0.0-2 → 16.1.0-0

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

@@ -1,85 +1,85 @@
-export default { title: 'Tooltip/Pointer' };
+export default { title: "Tooltip/Pointer" };
 
 const pointerStyles = {
     left: {
-        transform: 'translateX(16px) translateY(-50%)',
-        left: '100%',
-        right: 'auto',
-        top: '0',
-        bottom: 'auto',
+        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-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',
+    "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',
+        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-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',
+    "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',
+        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-left": {
+        left: "4px",
+        right: "auto",
+        top: "calc(100% + 2px)",
+        bottom: "auto",
     },
-    'top-right': {
-        left: 'auto',
-        right: '4px',
-        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-right": {
+        left: "auto",
+        right: "4px",
+        top: "auto",
+        bottom: "calc(100% + 12px)",
     },
-    'bottom-left': {
-        left: '4px',
-        right: 'auto',
-        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)',
+        transform: "translateX(-50%)",
+        left: "50%",
+        right: "auto",
+        top: "auto",
+        bottom: "calc(100% + 12px)",
     },
 };
 
@@ -88,7 +88,7 @@ function getPointerStyle(key) {
     for (const pointerKey of Object.keys(pointerStyles[key])) {
         ret.push(`${pointerKey}: ${pointerStyles[key][pointerKey]}`);
     }
-    return ret.join('; ');
+    return ret.join("; ");
 }
 
 export const top = () => `
@@ -98,7 +98,9 @@ export const top = () => `
             <use href="#icon-settings-24"></use>
         </svg>
     </button>
-    <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle('top')}">
+    <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">
@@ -119,7 +121,7 @@ export const topLeft = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        'top-left'
+        "top-left"
     )}">
         <span class="tooltip__pointer tooltip__pointer--top-left"></span>
         <div class="tooltip__mask">
@@ -141,7 +143,7 @@ export const leftTop = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        'left-top'
+        "left-top"
     )}">
         <span class="tooltip__pointer tooltip__pointer--left-top"></span>
         <div class="tooltip__mask">
@@ -162,7 +164,9 @@ export const left = () => `
             <use href="#icon-settings-24"></use>
         </svg>
     </button>
-    <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle('left')}">
+    <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">
@@ -183,7 +187,7 @@ export const leftBottom = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        'left-bottom'
+        "left-bottom"
     )}">
         <span class="tooltip__pointer tooltip__pointer--left-bottom"></span>
         <div class="tooltip__mask">
@@ -205,7 +209,7 @@ export const bottomLeft = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        'bottom-left'
+        "bottom-left"
     )}">
         <span class="tooltip__pointer tooltip__pointer--bottom-left"></span>
         <div class="tooltip__mask">
@@ -227,7 +231,7 @@ export const bottom = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        'bottom'
+        "bottom"
     )}">
         <span class="tooltip__pointer tooltip__pointer--bottom"></span>
         <div class="tooltip__mask">
@@ -249,7 +253,7 @@ export const bottomRight = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        'bottom-right'
+        "bottom-right"
     )}">
         <span class="tooltip__pointer tooltip__pointer--bottom-right"></span>
         <div class="tooltip__mask">
@@ -271,7 +275,7 @@ export const rightBottom = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        'right-bottom'
+        "right-bottom"
     )}">
         <span class="tooltip__pointer tooltip__pointer--right-bottom"></span>
         <div class="tooltip__mask">
@@ -292,7 +296,9 @@ export const right = () => `
             <use href="#icon-settings-24"></use>
         </svg>
     </button>
-    <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle('right')}">
+    <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">
@@ -313,7 +319,7 @@ export const rightTop = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        'right-top'
+        "right-top"
     )}">
         <span class="tooltip__pointer tooltip__pointer--right-top"></span>
         <div class="tooltip__mask">
@@ -335,7 +341,7 @@ export const topRight = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        'top-right'
+        "top-right"
     )}">
         <span class="tooltip__pointer tooltip__pointer--top-right"></span>
         <div class="tooltip__mask">

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

@@ -1,4 +1,4 @@
-export default { title: 'Tooltip' };
+export default { title: "Tooltip" };
 
 export const collapsed = () => `
 <span class="tooltip">

package/src/less/tooltip/tooltip.less

@@ -109,7 +109,7 @@ button.tooltip__close {
     display: block;
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     .tooltip__overlay {
         .bubble-large-screen();
     }

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

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

package/src/less/tourtip/tourtip.less

@@ -161,7 +161,7 @@ span.tourtip__heading {
     flex: 1;
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     .tourtip__overlay {
         .bubble-large-screen();
     }

package/src/less/typography/typography.less

@@ -85,7 +85,7 @@
     font-weight: @font-weight-bold;
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     .giant-product-title,
     .giant-section-title {
         .title-giant-screen-large();

package/src/less/video/video.less

@@ -13,17 +13,14 @@
 .video-player__overlay {
     align-items: center;
     background-color: rgba(0, 0, 0, 0.6);
-    bottom: 0;
     color: var(--color-neutral-0);
     cursor: pointer;
     display: flex;
     flex-direction: column;
+    inset: 0;
     justify-content: center;
-    left: 0;
     position: absolute;
-    right: 0;
     text-align: center;
-    top: 0;
 }
 
 .video-player__overlay-text {

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

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.5 3a.5.5 0 0 0-.5.5v8.086l2.293-2.293a1 1 0 0 1 1.414 0L11 11.586V3.5a.5.5 0 0 0-.5-.5h-5ZM3 3.5A2.5 2.5 0 0 1 5.5 1h5A2.5 2.5 0 0 1 13 3.5V14a1 1 0 0 1-1.707.707L8 11.414l-3.293 3.293A1 1 0 0 1 3 14V3.5Z"
+  />
+</svg>

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

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7 3a1 1 0 0 0-1 1v15.586l5.293-5.293a1 1 0 0 1 1.414 0L18 19.586V4a1 1 0 0 0-1-1H7ZM4 4a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v18a1 1 0 0 1-1.707.707L12 16.414l-6.293 6.293A1 1 0 0 1 4 22V4Z"
+  />
+</svg>

package/src/svg/icon/icon-play-filled-16-colored.svg

@@ -0,0 +1,13 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z"
+    fill="#fff"
+    fill-opacity=".88"
+  />
+  <path
+    d="M11.514 8.857a1 1 0 0 0 0-1.714l-5-3A1 1 0 0 0 5 5v6a1 1 0 0 0 1.514.857l5-3Z"
+    fill="#191919"
+  />
+</svg>

package/src/svg/icon/icon-play-filled-24-colored.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Z"
+    fill="#fff"
+    fill-opacity=".88"
+  />
+  <path
+    d="m9.53 6.152 8 5a1 1 0 0 1 0 1.696l-8 5A1 1 0 0 1 8 17V7a1 1 0 0 1 1.53-.848Z"
+    fill="#191919"
+  />
+</svg>

package/src/svg/icon/image-placeholder.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
+    <path d="M175.241 121.603a9.465 9.465 0 0 1-9.465 9.465 9.466 9.466 0 1 1 9.465-9.465Z"/><path fill-rule="evenodd" d="M211 192.068c0 10.456-8.476 18.931-18.931 18.931h-84.138c-10.456 0-18.931-8.475-18.931-18.931V107.93C89 97.475 97.475 89 107.93 89h84.138C202.524 89 211 97.474 211 107.93v84.138ZM107.931 99.516h84.138a8.413 8.413 0 0 1 8.414 8.414v66.184l-21.523-21.523a5.26 5.26 0 0 0-7.437 0l-14.777 14.777-21.571-26.964a5.255 5.255 0 0 0-8.106-.129L99.517 172.55v-64.62a8.414 8.414 0 0 1 8.414-8.414Zm-8.414 89.233 31.42-36.807 21.267 26.584a5.258 5.258 0 0 0 7.825.433l15.212-15.213 25.242 25.242v3.08a8.414 8.414 0 0 1-8.414 8.414h-84.138a8.414 8.414 0 0 1-8.414-8.414v-3.319Z" clip-rule="evenodd"/>
+</svg>

package/src/svg/icons.svg

@@ -502,6 +502,20 @@
       clip-rule="evenodd"
     />
   </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-bookmark-16">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.5 3a.5.5 0 0 0-.5.5v8.086l2.293-2.293a1 1 0 0 1 1.414 0L11 11.586V3.5a.5.5 0 0 0-.5-.5h-5ZM3 3.5A2.5 2.5 0 0 1 5.5 1h5A2.5 2.5 0 0 1 13 3.5V14a1 1 0 0 1-1.707.707L8 11.414l-3.293 3.293A1 1 0 0 1 3 14V3.5Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-bookmark-24">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7 3a1 1 0 0 0-1 1v15.586l5.293-5.293a1 1 0 0 1 1.414 0L18 19.586V4a1 1 0 0 0-1-1H7ZM4 4a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v18a1 1 0 0 1-1.707.707L12 16.414l-6.293 6.293A1 1 0 0 1 4 22V4Z"
+    />
+  </symbol>
   <symbol viewBox="0 0 10 16" id="icon-brand-authorized-seller-16-fit">
     <path d="M6 6.14a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" />
     <path
@@ -3524,16 +3538,6 @@
       clip-rule="evenodd"
     />
   </symbol>
-  <symbol viewBox="0 0 300 300" id="icon-image-placeholder">
-    <path
-      d="M175.241 121.603a9.465 9.465 0 0 1-9.465 9.465 9.466 9.466 0 1 1 9.465-9.465Z"
-    />
-    <path
-      fill-rule="evenodd"
-      d="M211 192.068c0 10.456-8.476 18.931-18.931 18.931h-84.138c-10.456 0-18.931-8.475-18.931-18.931V107.93C89 97.475 97.475 89 107.93 89h84.138C202.524 89 211 97.474 211 107.93v84.138ZM107.931 99.516h84.138a8.413 8.413 0 0 1 8.414 8.414v66.184l-21.523-21.523a5.26 5.26 0 0 0-7.437 0l-14.777 14.777-21.571-26.964a5.255 5.255 0 0 0-8.106-.129L99.517 172.55v-64.62a8.414 8.414 0 0 1 8.414-8.414Zm-8.414 89.233 31.42-36.807 21.267 26.584a5.258 5.258 0 0 0 7.825.433l15.212-15.213 25.242 25.242v3.08a8.414 8.414 0 0 1-8.414 8.414h-84.138a8.414 8.414 0 0 1-8.414-8.414v-3.319Z"
-      clip-rule="evenodd"
-    />
-  </symbol>
   <symbol viewBox="0 0 16 16" id="icon-inbox-16">
     <path
       fill-rule="evenodd"
@@ -6105,11 +6109,35 @@
       clip-rule="evenodd"
     />
   </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-play-filled-16-colored">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z"
+      fill="#fff"
+      fill-opacity=".88"
+    />
+    <path
+      d="M11.514 8.857a1 1 0 0 0 0-1.714l-5-3A1 1 0 0 0 5 5v6a1 1 0 0 0 1.514.857l5-3Z"
+      fill="#191919"
+    />
+  </symbol>
   <symbol viewBox="0 0 24 24" id="icon-play-filled-24">
     <path
       d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12ZM9.53 6.152A1 1 0 0 0 8 7v10a1 1 0 0 0 1.53.848l8-5a1 1 0 0 0 0-1.696l-8-5Z"
     />
   </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-play-filled-24-colored">
+    <path
+      d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Z"
+      fill="#fff"
+      fill-opacity=".88"
+    />
+    <path
+      d="m9.53 6.152 8 5a1 1 0 0 1 0 1.696l-8 5A1 1 0 0 1 8 17V7a1 1 0 0 1 1.53-.848Z"
+      fill="#191919"
+    />
+  </symbol>
   <symbol viewBox="0 0 20 12" id="icon-postepay-12-colored">
     <rect
       x=".5"
@@ -7467,7 +7495,7 @@
       clip-rule="evenodd"
     />
   </symbol>
-  <symbol viewBox="0 0 16 16" id="icon-zoom-In-16">
+  <symbol viewBox="0 0 16 16" id="icon-zoom-in-16">
     <path
       d="M7 4.5a.5.5 0 0 0-1 0V6H4.5a.5.5 0 0 0 0 1H6v1.5a.5.5 0 0 0 1 0V7h1.5a.5.5 0 0 0 0-1H7V4.5Z"
     />
@@ -7495,6 +7523,16 @@
       clip-rule="evenodd"
     />
   </symbol>
+  <symbol viewBox="0 0 300 300" id="image-placeholder">
+    <path
+      d="M175.241 121.603a9.465 9.465 0 0 1-9.465 9.465 9.466 9.466 0 1 1 9.465-9.465Z"
+    />
+    <path
+      fill-rule="evenodd"
+      d="M211 192.068c0 10.456-8.476 18.931-18.931 18.931h-84.138c-10.456 0-18.931-8.475-18.931-18.931V107.93C89 97.475 97.475 89 107.93 89h84.138C202.524 89 211 97.474 211 107.93v84.138ZM107.931 99.516h84.138a8.413 8.413 0 0 1 8.414 8.414v66.184l-21.523-21.523a5.26 5.26 0 0 0-7.437 0l-14.777 14.777-21.571-26.964a5.255 5.255 0 0 0-8.106-.129L99.517 172.55v-64.62a8.414 8.414 0 0 1 8.414-8.414Zm-8.414 89.233 31.42-36.807 21.267 26.584a5.258 5.258 0 0 0 7.825.433l15.212-15.213 25.242 25.242v3.08a8.414 8.414 0 0 1-8.414 8.414h-84.138a8.414 8.414 0 0 1-8.414-8.414v-3.319Z"
+      clip-rule="evenodd"
+    />
+  </symbol>
   <symbol viewBox="0 0 132 24" fill="none" id="star-rating-0">
     <path
       fill-rule="evenodd"

package/src/tokens/evo-dark.css

@@ -70,5 +70,7 @@
         --color-data-viz-chart-quinary-stroke: var(--color-teal-3);
         --color-data-viz-tooltip-shadow-primary: #ffffff26;
         --color-data-viz-tooltip-shadow-secondary: #ffffff2b;
+        --color-scrim-image: rgba(255, 255, 255, 0.12);
+        --color-scrim-background: rgba(0, 0, 0, 0.64);
     }
 }

package/src/tokens/evo-light.css

@@ -69,4 +69,6 @@
     --color-data-viz-chart-quinary-stroke: var(--color-teal-5);
     --color-data-viz-tooltip-shadow-primary: #00000026;
     --color-data-viz-tooltip-shadow-secondary: #0000002b;
+    --color-scrim-image: rgba(0, 0, 0, 0.04);
+    --color-scrim-background: rgba(0, 0, 0, 0.32);
 }

package/svg.svg

@@ -502,6 +502,20 @@
       clip-rule="evenodd"
     />
   </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-bookmark-16">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.5 3a.5.5 0 0 0-.5.5v8.086l2.293-2.293a1 1 0 0 1 1.414 0L11 11.586V3.5a.5.5 0 0 0-.5-.5h-5ZM3 3.5A2.5 2.5 0 0 1 5.5 1h5A2.5 2.5 0 0 1 13 3.5V14a1 1 0 0 1-1.707.707L8 11.414l-3.293 3.293A1 1 0 0 1 3 14V3.5Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-bookmark-24">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7 3a1 1 0 0 0-1 1v15.586l5.293-5.293a1 1 0 0 1 1.414 0L18 19.586V4a1 1 0 0 0-1-1H7ZM4 4a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v18a1 1 0 0 1-1.707.707L12 16.414l-6.293 6.293A1 1 0 0 1 4 22V4Z"
+    />
+  </symbol>
   <symbol viewBox="0 0 10 16" id="icon-brand-authorized-seller-16-fit">
     <path d="M6 6.14a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" />
     <path
@@ -3524,16 +3538,6 @@
       clip-rule="evenodd"
     />
   </symbol>
-  <symbol viewBox="0 0 300 300" id="icon-image-placeholder">
-    <path
-      d="M175.241 121.603a9.465 9.465 0 0 1-9.465 9.465 9.466 9.466 0 1 1 9.465-9.465Z"
-    />
-    <path
-      fill-rule="evenodd"
-      d="M211 192.068c0 10.456-8.476 18.931-18.931 18.931h-84.138c-10.456 0-18.931-8.475-18.931-18.931V107.93C89 97.475 97.475 89 107.93 89h84.138C202.524 89 211 97.474 211 107.93v84.138ZM107.931 99.516h84.138a8.413 8.413 0 0 1 8.414 8.414v66.184l-21.523-21.523a5.26 5.26 0 0 0-7.437 0l-14.777 14.777-21.571-26.964a5.255 5.255 0 0 0-8.106-.129L99.517 172.55v-64.62a8.414 8.414 0 0 1 8.414-8.414Zm-8.414 89.233 31.42-36.807 21.267 26.584a5.258 5.258 0 0 0 7.825.433l15.212-15.213 25.242 25.242v3.08a8.414 8.414 0 0 1-8.414 8.414h-84.138a8.414 8.414 0 0 1-8.414-8.414v-3.319Z"
-      clip-rule="evenodd"
-    />
-  </symbol>
   <symbol viewBox="0 0 16 16" id="icon-inbox-16">
     <path
       fill-rule="evenodd"
@@ -6105,11 +6109,35 @@
       clip-rule="evenodd"
     />
   </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-play-filled-16-colored">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z"
+      fill="#fff"
+      fill-opacity=".88"
+    />
+    <path
+      d="M11.514 8.857a1 1 0 0 0 0-1.714l-5-3A1 1 0 0 0 5 5v6a1 1 0 0 0 1.514.857l5-3Z"
+      fill="#191919"
+    />
+  </symbol>
   <symbol viewBox="0 0 24 24" id="icon-play-filled-24">
     <path
       d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12ZM9.53 6.152A1 1 0 0 0 8 7v10a1 1 0 0 0 1.53.848l8-5a1 1 0 0 0 0-1.696l-8-5Z"
     />
   </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-play-filled-24-colored">
+    <path
+      d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Z"
+      fill="#fff"
+      fill-opacity=".88"
+    />
+    <path
+      d="m9.53 6.152 8 5a1 1 0 0 1 0 1.696l-8 5A1 1 0 0 1 8 17V7a1 1 0 0 1 1.53-.848Z"
+      fill="#191919"
+    />
+  </symbol>
   <symbol viewBox="0 0 20 12" id="icon-postepay-12-colored">
     <rect
       x=".5"
@@ -7467,7 +7495,7 @@
       clip-rule="evenodd"
     />
   </symbol>
-  <symbol viewBox="0 0 16 16" id="icon-zoom-In-16">
+  <symbol viewBox="0 0 16 16" id="icon-zoom-in-16">
     <path
       d="M7 4.5a.5.5 0 0 0-1 0V6H4.5a.5.5 0 0 0 0 1H6v1.5a.5.5 0 0 0 1 0V7h1.5a.5.5 0 0 0 0-1H7V4.5Z"
     />
@@ -7495,6 +7523,16 @@
       clip-rule="evenodd"
     />
   </symbol>
+  <symbol viewBox="0 0 300 300" id="image-placeholder">
+    <path
+      d="M175.241 121.603a9.465 9.465 0 0 1-9.465 9.465 9.466 9.466 0 1 1 9.465-9.465Z"
+    />
+    <path
+      fill-rule="evenodd"
+      d="M211 192.068c0 10.456-8.476 18.931-18.931 18.931h-84.138c-10.456 0-18.931-8.475-18.931-18.931V107.93C89 97.475 97.475 89 107.93 89h84.138C202.524 89 211 97.474 211 107.93v84.138ZM107.931 99.516h84.138a8.413 8.413 0 0 1 8.414 8.414v66.184l-21.523-21.523a5.26 5.26 0 0 0-7.437 0l-14.777 14.777-21.571-26.964a5.255 5.255 0 0 0-8.106-.129L99.517 172.55v-64.62a8.414 8.414 0 0 1 8.414-8.414Zm-8.414 89.233 31.42-36.807 21.267 26.584a5.258 5.258 0 0 0 7.825.433l15.212-15.213 25.242 25.242v3.08a8.414 8.414 0 0 1-8.414 8.414h-84.138a8.414 8.414 0 0 1-8.414-8.414v-3.319Z"
+      clip-rule="evenodd"
+    />
+  </symbol>
   <symbol viewBox="0 0 132 24" fill="none" id="star-rating-0">
     <path
       fill-rule="evenodd"

package/webpack.config.js

@@ -1,16 +1,16 @@
-const path = require('path');
+const path = require("path");
 
 module.exports = {
-    devtool: 'source-map',
+    devtool: "source-map",
     entry: {
-        main: './docs/_babel/main.js',
+        main: "./docs/_babel/main.js",
     },
-    mode: 'production',
+    mode: "production",
     optimization: {
         minimize: true,
     },
     output: {
-        filename: 'docs.min.js',
-        path: path.resolve(__dirname, './docs/static'),
+        filename: "docs.min.js",
+        path: path.resolve(__dirname, "./docs/static"),
     },
 };