@ebay/skin 16.6.0 → 16.7.0

package/src/less/section-notice/stories/icon-24.stories.js

@@ -0,0 +1,251 @@
+export default { title: "Skin/Section Notice/Icon 24" };
+
+export const body = () => `
+<div class="section-notice" role="region">
+    <div class="section-notice__header" role="region" aria-roledescription="Notice">
+        <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
+            <use href="#icon-lightbulb-24"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+</div>
+`;
+
+export const title = () => `
+<div class="section-notice" role="region">
+    <div class="section-notice__header" role="region" aria-roledescription="Notice">
+        <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
+            <use href="#icon-lightbulb-24"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+</div>
+`;
+
+// known issue: https://github.com/eBay/skin/issues/2146
+export const linkCTA = () => `
+<div class="section-notice" role="region">
+    <div class="section-notice__header" role="region" aria-roledescription="Notice">
+        <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
+            <use href="#icon-lightbulb-24"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <div class="section-notice__footer">
+        <a href="https://www.ebay.com">Action</a>
+    </div>
+</div>
+`;
+
+// known issue: https://github.com/eBay/skin/issues/2146
+export const fakeLinkCTA = () => `
+<div class="section-notice" role="region">
+    <div class="section-notice__header" role="region" aria-roledescription="Notice">
+        <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
+            <use href="#icon-lightbulb-24"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <div class="section-notice__footer">
+        <button class="fake-link" type="button">Action</button>
+    </div>
+</div>
+`;
+
+export const dismiss = () => `
+<div class="section-notice" role="region">
+    <div class="section-notice__header" role="region" aria-roledescription="Notice">
+        <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
+            <use href="#icon-lightbulb-24"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <div class="section-notice__footer">
+    <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+        <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+            <use href="#icon-close-16"></use>
+        </svg>
+    </button>
+    </div>
+</div>
+`;
+
+export const dismissAndLinkCTA = () => `
+<div class="section-notice" role="region">
+    <div class="section-notice__header" role="region" aria-roledescription="Notice">
+        <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
+            <use href="#icon-lightbulb-24"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
+    <div class="section-notice__footer">
+        <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+`;
+
+export const dismissAndFakeLinkCTA = () => `
+<div class="section-notice" role="region">
+    <div class="section-notice__header" role="region" aria-roledescription="Notice">
+        <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
+            <use href="#icon-lightbulb-24"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <p class="section-notice__cta">
+        <button class="fake-link" type="button">Action</button>
+    </p>
+    <div class="section-notice__footer">
+        <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+`;
+
+export const education = () => `
+<div class="section-notice section-notice--education" role="region">
+    <div class="section-notice__header" role="region" aria-roledescription="Notice">
+        <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
+            <use href="#icon-lightbulb-24"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <p class="section-notice__cta">
+        <button class="fake-link" type="button">Action</button>
+    </p>
+    <div class="section-notice__footer">
+        <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+`;
+// known issue: https://github.com/eBay/skin/issues/2142
+export const RTL = () => `
+<div dir="rtl">
+    <div class="section-notice" role="region">
+        <div class="section-notice__header" role="region" aria-roledescription="Notice">
+            <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
+                <use href="#icon-lightbulb-24"></use>
+            </svg>
+        </div>
+        <div class="section-notice__main">
+            <h3 class="section-notice__title">Notification Title</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </div>
+        <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
+        <div class="section-notice__footer">
+            <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+    </div>
+</div>
+`;
+
+export const vault = () => `
+<div class="section-notice" role="region">
+    <div class="section-notice__header" role="region" aria-roledescription="Notice">
+        <svg aria-hidden="true" focusable="false" class="icon--the-ebay-vault-24-fit">
+            <use href="#icon-the-ebay-vault-24-fit"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <p class="section-notice__cta">
+        <button class="fake-link" type="button">Action</button>
+    </p>
+    <div class="section-notice__footer">
+        <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+`;
+
+export const selling = () => `
+<div class="section-notice" role="region">
+    <div class="section-notice__header" role="region" aria-roledescription="Notice">
+        <svg aria-hidden="true" focusable="false" class="icon--selling-24">
+            <use href="#icon-selling-24"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <p class="section-notice__cta">
+        <button class="fake-link" type="button">Action</button>
+    </p>
+    <div class="section-notice__footer">
+        <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+`;
+
+export const warranty = () => `
+<div class="section-notice" role="region">
+    <div class="section-notice__header" role="region" aria-roledescription="Notice">
+        <svg aria-hidden="true" focusable="false" class="icon--free-warranty-24-fit">
+            <use href="#icon-free-warranty-24-fit"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <p class="section-notice__cta">
+        <button class="fake-link" type="button">Action</button>
+    </p>
+    <div class="section-notice__footer">
+        <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+`;

package/src/less/section-notice/stories/iconless.stories.js

@@ -0,0 +1,116 @@
+export default { title: "Skin/Section Notice/Iconless" };
+
+export const body = () => `
+<div class="section-notice" role="region">
+    <div class="section-notice__main">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+</div>
+`;
+
+export const title = () => `
+<div class="section-notice" role="region">
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+</div>
+`;
+
+// known issue: https://github.com/eBay/skin/issues/2146
+export const linkCTA = () => `
+<div class="section-notice" role="region">
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <div class="section-notice__footer">
+        <a href="https://www.ebay.com">Action</a>
+    </div>
+</div>
+`;
+
+// known issue: https://github.com/eBay/skin/issues/2146
+export const fakeLinkCTA = () => `
+<div class="section-notice" role="region">
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <div class="section-notice__footer">
+        <button class="fake-link" type="button">Action</button>
+    </div>
+</div>
+`;
+
+export const dismiss = () => `
+<div class="section-notice" role="region">
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <div class="section-notice__footer">
+    <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+        <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+            <use href="#icon-close-16"></use>
+        </svg>
+    </button>
+    </div>
+</div>
+`;
+
+export const dismissAndLinkCTA = () => `
+<div class="section-notice" role="region">
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
+    <div class="section-notice__footer">
+        <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+`;
+
+export const dismissAndFakeLinkCTA = () => `
+<div class="section-notice" role="region">
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <p class="section-notice__cta">
+        <button class="fake-link" type="button">Action</button>
+    </p>
+    <div class="section-notice__footer">
+        <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+`;
+
+// known issue: https://github.com/eBay/skin/issues/2142
+export const RTL = () => `
+<div dir="rtl">
+    <div class="section-notice" role="region">
+        <div class="section-notice__main">
+            <h3 class="section-notice__title">Notification Title</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </div>
+        <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
+        <div class="section-notice__footer">
+            <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+    </div>
+</div>
+`;

package/src/less/section-notice/stories/legacy.stories.js

@@ -0,0 +1,32 @@
+export default { title: "Skin/Section Notice/Legacy" };
+
+export const legacy = () => `
+<div class="section-notice section-notice--confirmation" role="region">
+    <div class="section-notice__header" role="region" aria-roledescription="Notice">
+        <svg aria-hidden="true" focusable="false" class="icon icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Your price has been updated.</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </div>
+</div>
+`;
+
+export const legacyWithCTA = () => `
+<div class="section-notice section-notice--confirmation" role="region">
+    <div class="section-notice__header" role="region" aria-roledescription="Notice">
+        <svg aria-hidden="true" focusable="false" class="icon icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Your price has been updated.</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </div>
+    <div class="section-notice__footer">
+        <button class="fake-link">Dismiss</button>
+    </div>
+</div>
+`;

package/src/less/section-notice/stories/test.stories.js

@@ -1,103 +1,44 @@
 export default { title: "Skin/Section Notice/Tests" };
 
-export const RTL = () => `
-<div dir="rtl">
-    <div class="section-notice section-notice--confirmation" role="region">
-        <div class="section-notice__header" role="region" aria-roledescription="Notice">
-            <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
-                <use href="#icon-confirmation-filled-16"></use>
-            </svg>
-        </div>
-        <div class="section-notice__main">
-            <h3 class="section-notice__title">Your price has been updated</h3>
-        </div>
-        <div class="section-notice__footer">
-            <button class="fake-link">Dismiss</button>
-        </div>
-    </div>
-</div>
-`;
-
-export const RTLDismissable = () => `
-<div dir="rtl">
-    <section class="page-notice page-notice--information" role="region" aria-label="Information">
-        <div class="page-notice__header">
-            <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
-                <use href="#icon-information-filled-16"></use>
-            </svg>
-        </div>
-        <div class="page-notice__main">
-            <h3 class="page-notice__title">Notice Title</h3>
-            <p>Opt into eBay payments before Jan 12th to pay no selling fees.</p>
-        </div>
-        <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
-        <div class="page-notice__footer">
-            <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
-                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="14" width="14">
-                    <use href="#icon-close-16"></use>
-                </svg>
-            </a>
-        </div>
-    </section>
-</div>
-`;
-
-export const longText = () => `
-<div class="section-notice section-notice--confirmation" role="region">
-    <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
-            <use href="#icon-confirmation-filled-16"></use>
-        </svg>
-    </div>
-    <div class="section-notice__main">
-        <h3 class="section-notice__title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
-    </div>
-</div>
-`;
-
-export const longTextWithCTA = () => `
+export const longBody = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+        <svg aria-hidden="true" focusable="false" class="icon icon--confirmation-filled-16">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
-        <h3 class="section-notice__title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis knostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     </div>
+    <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
     <div class="section-notice__footer">
-        <button class="fake-link">Dismiss</button>
-    </div>
-</div>
-`;
-
-export const legacy = () => `
-<div class="section-notice section-notice--confirmation" role="region">
-    <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
-            <use href="#icon-confirmation-filled-16"></use>
-        </svg>
-    </div>
-    <div class="section-notice__main">
-        <h3 class="section-notice__title">Your price has been updated.</h3>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
     </div>
 </div>
 `;
 
-export const legacyWithCTA = () => `
+export const longTitle = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+        <svg aria-hidden="true" focusable="false" class="icon icon--confirmation-filled-16">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
-        <h3 class="section-notice__title">Your price has been updated.</h3>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        <h3 class="section-notice__title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis knostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     </div>
+    <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
     <div class="section-notice__footer">
-        <button class="fake-link">Dismiss</button>
+        <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
     </div>
 </div>
 `;

package/src/less/snackbar-dialog/snackbar-dialog.less

@@ -21,7 +21,8 @@
 }
 
 .snackbar-dialog--transition {
-    transition: opacity 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s,
+    transition:
+        opacity 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s,
         transform 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s;
 }
 

package/src/less/switch/switch.less

@@ -111,7 +111,8 @@ span.switch__control[aria-disabled="true"][aria-checked="true"]
 span.switch__control:not([aria-disabled="true"]):focus-visible
     + span.switch__button,
 input.switch__control:not([disabled]):focus-visible + span.switch__button {
-    box-shadow: 0 0 0 2px var(--color-background-primary),
+    box-shadow:
+        0 0 0 2px var(--color-background-primary),
         0 0 0 4px var(--color-state-accent-hover);
 }
 

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

@@ -29,7 +29,8 @@
 }
 
 .toast-dialog--transition {
-    transition: opacity 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s,
+    transition:
+        opacity 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s,
         transform 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s;
 }
 

package/src/less/variables/variables.less

@@ -47,6 +47,7 @@
 
 @spacing-25: @spacing-100 * 0.25;
 @spacing-50: @spacing-100 * 0.5;
+@spacing-75: @spacing-100 * 0.75;
 @spacing-100: 8px;
 @spacing-125: @spacing-100 * 1.25;
 @spacing-150: @spacing-100 * 1.5;

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

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M6.682 4.104a3.358 3.358 0 0 1-2.578 2.578l-2.467.53c-.85.182-.85 1.394 0 1.576l2.467.53a3.358 3.358 0 0 1 2.578 2.578l.53 2.467c.182.85 1.394.85 1.576 0l.53-2.467a3.358 3.358 0 0 1 2.578-2.578l2.467-.53c.85-.182.85-1.394 0-1.576l-2.467-.53a3.358 3.358 0 0 1-2.578-2.578l-.53-2.467c-.182-.85-1.394-.85-1.576 0l-.53 2.467ZM8 6.145A5.364 5.364 0 0 1 6.145 8 5.364 5.364 0 0 1 8 9.855 5.364 5.364 0 0 1 9.855 8 5.364 5.364 0 0 1 8 6.145Z"
+  />
+</svg>

package/src/svg/icon/icon-ai-20.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M10 6.303A6.32 6.32 0 0 1 6.303 10 6.32 6.32 0 0 1 10 13.697 6.32 6.32 0 0 1 13.697 10 6.32 6.32 0 0 1 10 6.303Zm1.013-4.484c-.234-1.092-1.792-1.092-2.026 0L8.306 4.99A4.317 4.317 0 0 1 4.99 8.306l-3.172.681c-1.092.234-1.092 1.792 0 2.026l3.172.681a4.317 4.317 0 0 1 3.315 3.315l.681 3.172c.234 1.092 1.792 1.092 2.026 0l.681-3.172a4.317 4.317 0 0 1 3.315-3.315l3.172-.681c1.092-.234 1.092-1.792 0-2.026l-3.172-.681a4.317 4.317 0 0 1-3.315-3.315l-.681-3.172Z"
+  />
+</svg>

package/src/svg/icon/icon-ai-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="m12 5.76-.115.538a7.276 7.276 0 0 1-5.587 5.587L5.76 12l.537.115a7.276 7.276 0 0 1 5.587 5.587l.115.537.115-.537a7.276 7.276 0 0 1 5.587-5.587L18.24 12l-.537-.115a7.276 7.276 0 0 1-5.587-5.587L12 5.76ZM13.238 2c-.286-1.334-2.19-1.333-2.476 0l-.833 3.878a5.277 5.277 0 0 1-4.051 4.051L2 10.762c-1.335.286-1.334 2.19 0 2.476l3.877.833a5.277 5.277 0 0 1 4.051 4.051L10.762 22c.286 1.334 2.19 1.334 2.476 0l.833-3.878a5.277 5.277 0 0 1 4.051-4.051L22 13.238c1.334-.286 1.334-2.19 0-2.476l-3.878-.833a5.277 5.277 0 0 1-4.051-4.051L13.238 2Z"
+  />
+</svg>

package/src/svg/icon/icon-ai-filled-16.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M7.212 1.637c.182-.85 1.394-.85 1.576 0l.53 2.467a3.358 3.358 0 0 0 2.578 2.578l2.467.53c.85.182.85 1.394 0 1.576l-2.467.53a3.358 3.358 0 0 0-2.578 2.578l-.53 2.467c-.182.85-1.394.85-1.576 0l-.53-2.467a3.358 3.358 0 0 0-2.578-2.578l-2.467-.53c-.85-.182-.85-1.394 0-1.576l2.467-.53a3.358 3.358 0 0 0 2.578-2.578l.53-2.467Z"
+  />
+</svg>

package/src/svg/icon/icon-ai-filled-20.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8.987 1.819c.234-1.092 1.792-1.092 2.026 0l.681 3.172a4.317 4.317 0 0 0 3.315 3.315l3.172.681c1.092.234 1.092 1.792 0 2.026l-3.172.681a4.317 4.317 0 0 0-3.315 3.315l-.681 3.172c-.234 1.092-1.792 1.092-2.026 0l-.681-3.172a4.317 4.317 0 0 0-3.315-3.315l-3.172-.681c-1.092-.234-1.092-1.792 0-2.026l3.172-.681A4.317 4.317 0 0 0 8.306 4.99l.681-3.172Z"
+  />
+</svg>

package/src/svg/icon/icon-ai-filled-24.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10.762 2c.286-1.333 2.19-1.334 2.476 0l.833 3.878a5.277 5.277 0 0 0 4.051 4.051l3.878.833c1.334.286 1.334 2.19 0 2.476l-3.878.833a5.277 5.277 0 0 0-4.051 4.051L13.238 22c-.286 1.334-2.19 1.334-2.476 0l-.833-3.878a5.277 5.277 0 0 0-4.051-4.051L2 13.238c-1.334-.286-1.335-2.19 0-2.476l3.877-.833a5.277 5.277 0 0 0 4.051-4.051L10.762 2Z"
+  />
+</svg>

package/src/svg/icon/icon-ai-thin-16.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8 4.959A4.859 4.859 0 0 1 4.959 8 4.859 4.859 0 0 1 8 11.041 4.859 4.859 0 0 1 11.041 8 4.859 4.859 0 0 1 8 4.959Zm.788-3.322c-.182-.85-1.394-.85-1.576 0l-.53 2.467a3.358 3.358 0 0 1-2.578 2.578l-2.467.53c-.85.182-.85 1.394 0 1.576l2.467.53a3.358 3.358 0 0 1 2.578 2.578l.53 2.467c.182.85 1.394.85 1.576 0l.53-2.467a3.358 3.358 0 0 1 2.578-2.578l2.467-.53c.85-.182.85-1.394 0-1.576l-2.467-.53a3.358 3.358 0 0 1-2.578-2.578l-.53-2.467Z"
+  />
+</svg>

package/src/svg/icon/icon-arrows-expand-16.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="M1 22a1 1 0 0 0 1 1h7a1 1 0 1 0 0-2H4.414l6.293-6.293a1 1 0 0 0-1.414-1.414L3 19.586V15a1 1 0 1 0-2 0v7Zm12.293-11.293a1 1 0 0 0 1.414 0L21 4.414V9a1 1 0 1 0 2 0V2a1 1 0 0 0-1-1h-7a1 1 0 1 0 0 2h4.586l-6.293 6.293a1 1 0 0 0 0 1.414Z"
+  />
+</svg>

package/src/svg/icon/icon-arrows-expand-24.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="M1 14a1 1 0 0 0 1 1h4a1 1 0 1 0 0-2H4.414l2.793-2.793a1 1 0 0 0-1.414-1.414L3 11.586V10a1 1 0 0 0-2 0v4Zm7.793-6.793a1 1 0 0 0 1.414 0L13 4.414V6a1 1 0 1 0 2 0V2a1 1 0 0 0-1-1h-4a1 1 0 1 0 0 2h1.586L8.793 5.793a1 1 0 0 0 0 1.414Z"
+  />
+</svg>