@ebay/skin 14.2.1 → 15.0.0-0

package/src/less/icon/generated/program-badges.less

@@ -1,49 +0,0 @@
-/* This is a generated file, DO NOT EDIT */
-svg.program-badge--authenticity-guaranteed {
-    height: 48px;
-    width: 48px;
-}
-svg.program-badge--click-to-call {
-    height: 48px;
-    width: 48px;
-}
-svg.program-badge--escrow {
-    height: 48px;
-    width: 48px;
-}
-svg.program-badge--free-warranty {
-    height: 48px;
-    width: 48px;
-}
-svg.program-badge--money-back-guarantee-chf {
-    height: 48px;
-    width: 48px;
-}
-svg.program-badge--money-back-guarantee-eu {
-    height: 48px;
-    width: 48px;
-}
-svg.program-badge--money-back-guarantee-uk {
-    height: 48px;
-    width: 48px;
-}
-svg.program-badge--money-back-guarantee-us {
-    height: 48px;
-    width: 48px;
-}
-svg.program-badge--money-back-guarantee-zl {
-    height: 48px;
-    width: 48px;
-}
-svg.program-badge--top-rated-seller {
-    height: 48px;
-    width: 48px;
-}
-svg.program-badge--ebay-plus {
-    height: 16px;
-    width: 58px;
-}
-svg.program-badge--vault {
-    height: 48px;
-    width: 48px;
-}

package/src/less/icon/generated/reviews.less

@@ -1,69 +0,0 @@
-/* This is a generated file, DO NOT EDIT */
-svg.icon--star-dynamic {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--star-full {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--star-empty {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--star-half {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--star-undefined {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--thumbs-down {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--thumbs-down-selected {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--thumbs-up {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--thumbs-up-selected {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--star-full-small {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--star-empty-small {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--star-half-small {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--star-undefined-small {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--thumbs-down-selected-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--thumbs-down-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--thumbs-up-selected-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--thumbs-up-small {
-    height: 16px;
-    width: 16px;
-}

package/src/less/icon/generated/shipping.less

@@ -1,61 +0,0 @@
-/* This is a generated file, DO NOT EDIT */
-svg.icon--bag {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--large-case {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--large-box {
-    height: 16px;
-    width: 22px;
-}
-svg.icon--medium-box {
-    height: 16px;
-    width: 18px;
-}
-svg.icon--package {
-    height: 20px;
-    width: 22px;
-}
-svg.icon--truck {
-    height: 17px;
-    width: 22px;
-}
-svg.icon--fast-n-free {
-    height: 17px;
-    width: 22px;
-}
-svg.icon--small-letter {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--small-box {
-    height: 12px;
-    width: 18px;
-}
-svg.icon--envelope {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--shoe-box {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--suitcase {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--fast-n-free-small {
-    height: 13px;
-    width: 18px;
-}
-svg.icon--truck-small {
-    height: 13px;
-    width: 16px;
-}
-svg.icon--small-case {
-    height: 24px;
-    width: 24px;
-}

package/src/less/icon/generated/social.less

@@ -1,41 +0,0 @@
-/* This is a generated file, DO NOT EDIT */
-svg.icon--social-link {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--social-discord {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--social-facebook {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--social-messenger {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--social-pinterest {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--social-reddit {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--social-twitter {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--social-linkedin {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--social-whatsapp {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--social-instagram {
-    height: 24px;
-    width: 24px;
-}

package/src/less/icon/generated/status.less

@@ -1,57 +0,0 @@
-/* This is a generated file, DO NOT EDIT */
-svg.icon--confirmation {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--confirmation-filled {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--attention {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--attention-filled {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--information {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--information-filled {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--tick {
-    height: 10px;
-    width: 14px;
-}
-svg.icon--confirmation-filled-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--confirmation-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--attention-filled-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--attention-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--information-filled-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--information-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--tick-small {
-    height: 9px;
-    width: 12px;
-}

package/src/less/icon/generated/user.less

@@ -1,17 +0,0 @@
-/* This is a generated file, DO NOT EDIT */
-svg.icon--avatar-light {
-    height: 40px;
-    width: 40px;
-}
-svg.icon--avatar-filled {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--avatar {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--avatar-dark {
-    height: 22px;
-    width: 22px;
-}

package/src/less/icon/interface.less

@@ -1,2 +0,0 @@
-@import "./base.less";
-@import "./generated/interface.less";

package/src/less/icon/internal.less

@@ -1,22 +0,0 @@
-@import "./base.less";
-@import "./generated/internal.less";
-
-svg {
-    &.icon--spinner-large {
-        .icon-image-mixin("spinner-large");
-    }
-}
-
-[dir="rtl"] svg {
-    &.icon--back,
-    &.icon--breadcrumb,
-    &.icon--carousel-next,
-    &.icon--carousel-prev,
-    &.icon--chevron-left,
-    &.icon--chevron-right,
-    &.icon--cta,
-    &.icon--pagination-next,
-    &.icon--pagination-prev {
-        transform: rotate(180deg);
-    }
-}

package/src/less/icon/large.less

@@ -1,2 +0,0 @@
-@import "./base.less";
-@import "./generated/large.less";

package/src/less/icon/media.less

@@ -1,2 +0,0 @@
-@import "./base.less";
-@import "./generated/media.less";

package/src/less/icon/photo.less

@@ -1,2 +0,0 @@
-@import "./base.less";
-@import "./generated/photo.less";

package/src/less/icon/reviews.less

@@ -1,12 +0,0 @@
-@import "./base.less";
-@import "./generated/reviews.less";
-
-svg {
-    &.icon--star-empty {
-        .color-token(color-foreground-disabled);
-    }
-
-    &.icon--star-empty-small {
-        .color-token(color-foreground-disabled);
-    }
-}

package/src/less/icon/shipping.less

@@ -1,2 +0,0 @@
-@import "./base.less";
-@import "./generated/shipping.less";

package/src/less/icon/social.less

@@ -1,41 +0,0 @@
-@import "./base.less";
-@import "./generated/social.less";
-
-svg {
-    // todo: these should be .color-token(icon-foreground-color, color-foreground-primary) ?
-    &.icon--social-link {
-        .color-token(color-social-icons-background);
-    }
-
-    &.icon--social-discord {
-        .color-token(color-social-icons-background);
-    }
-
-    &.icon--social-facebook {
-        .color-token(color-social-icons-background);
-    }
-
-    &.icon--social-messenger {
-        .color-token(color-social-icons-background);
-    }
-
-    &.icon--social-pinterest {
-        .color-token(color-social-icons-background);
-    }
-
-    &.icon--social-reddit {
-        .color-token(color-social-icons-background);
-    }
-
-    &.icon--social-twitter {
-        .color-token(color-social-icons-background);
-    }
-
-    &.icon--social-whatsapp {
-        .color-token(color-social-icons-background);
-    }
-
-    &.icon--social-linkedin {
-        .color-token(color-social-icons-background);
-    }
-}

package/src/less/icon/status.less

@@ -1,28 +0,0 @@
-@import "./base.less";
-@import "./generated/status.less";
-
-svg {
-    &.icon--attention-filled {
-        .color-token(color-foreground-attention);
-    }
-
-    &.icon--confirmation-filled {
-        .color-token(color-foreground-confirmation);
-    }
-
-    &.icon--information-filled {
-        .color-token(color-foreground-information);
-    }
-
-    &.icon--attention-filled-small {
-        .color-token(color-foreground-attention);
-    }
-
-    &.icon--confirmation-filled-small {
-        .color-token(color-foreground-confirmation);
-    }
-
-    &.icon--information-filled-small {
-        .color-token(color-foreground-information);
-    }
-}

package/src/less/icon/user.less

@@ -1,2 +0,0 @@
-@import "./base.less";
-@import "./generated/user.less";

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

@@ -1,60 +0,0 @@
-export default { title: 'Window Notice' };
-
-export const base = () => `
-<section class="window-notice" role="region" aria-label="Congratulations" aria-roledescription="Notice">
-    <div class="window-notice__header">
-        <svg class="icon icon--confirmation-filled" focusable="false" height="35" width="35" role="img" aria-label="Congratulations">
-            <use xlink:href="#icon-confirmation-filled"></use>
-        </svg>
-    </div>
-    <div class="window-notice__main">
-        <h2 class="window-notice__title">Your first order has been placed!</h2>
-        <p>You'll get a confirmation email soon. The rest of your items are now ready to checkout.</p>
-    </div>
-    <div class="window-notice__footer">
-        <button class="btn btn--large">Continue</button>
-    </div>
-</section>
-`;
-
-export const screen = () => `
-<div class="demo" style="width: 320px; max-width:90vw">
-    <div class="demo__inner" style="height: 500px; max-height: 90vh">
-    <section class="window-notice window-notice--screen" role="region" aria-label="Congratulations" aria-roledescription="Notice">
-        <div class="window-notice__header">
-            <svg class="icon icon--confirmation-filled" focusable="false" height="35" width="35" role="img" aria-label="Congratulations">
-                <use xlink:href="#icon-confirmation-filled"></use>
-            </svg>
-        </div>
-        <div class="window-notice__main">
-            <h2 class="window-notice__title">Your first order has been placed!</h2>
-            <p>You'll get a confirmation email soon. The rest of your items are now ready to checkout.</p>
-        </div>
-        <div class="window-notice__footer">
-            <button class="btn btn--large">Continue</button>
-        </div>
-    </section>
-    </div>
-</div>
-`;
-
-export const RTL = () => `
-<div dir="rtl" class="demo" style="width: 320px; max-width:90vw">
-    <div class="demo__inner" style="height: 500px; max-height: 90vh">
-    <section class="window-notice window-notice--screen" role="region" aria-label="Congratulations" aria-roledescription="Notice">
-        <div class="window-notice__header">
-            <svg class="icon icon--confirmation-filled" focusable="false" height="35" width="35" role="img" aria-label="Congratulations">
-                <use xlink:href="#icon-confirmation-filled"></use>
-            </svg>
-        </div>
-        <div class="window-notice__main">
-            <h2 class="window-notice__title">Your first order has been placed</h2>
-            <p>You'll get a confirmation email soon. The rest of your items are now ready to checkout</p>
-        </div>
-        <div class="window-notice__footer">
-            <button class="btn btn--large">Continue</button>
-        </div>
-    </section>
-    </div>
-</div>
-`;

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

@@ -1,50 +0,0 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
-
-// DEPRECATED, remove in v15
-.window-notice {
-    .background-color-token(window-notice-background-color, color-background-primary);
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    margin: @spacing-200 0;
-    text-align: center;
-    width: 100%;
-}
-
-.window-notice--screen {
-    height: 100%;
-    justify-content: center;
-    margin: 0;
-    position: relative;
-}
-
-.window-notice__main {
-    .color-token(window-notice-foreground-color, color-foreground-confirmation);
-    margin: 20px 0;
-}
-
-.window-notice__title {
-    .color-token(window-notice-title-foreground-color, color-foreground-primary);
-    display: inline-block;
-    font-size: @font-size-30;
-    font-weight: bold;
-    margin: 0;
-}
-
-.window-notice__header svg.icon {
-    font-size: 0;
-    height: 35px;
-    margin: 0 auto;
-    width: 35px;
-}
-
-.window-notice--screen .window-notice__footer {
-    .btn,
-    .fake-btn {
-        bottom: 0;
-        left: 0;
-        position: absolute;
-        width: 100%;
-    }
-}

package/src/svg/aliased.svg

@@ -1,38 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg">
-  <symbol viewBox="0 0 24 24" id="icon-back">
-    <path
-      d="m6.293 11.292 8-8a1 1 0 1 1 1.414 1.415L8.414 12l7.293 7.293a1 1 0 1 1-1.414 1.414l-8-8a.996.996 0 0 1 0-1.415Z"
-    />
-  </symbol>
-  <symbol viewBox="0 0 24 24" id="icon-carousel-next">
-    <path
-      d="M17.707 11.293a1 1 0 0 1 .22.33l-.22-.33Zm-.001-.001-7.999-8a1 1 0 0 0-1.414 1.415L15.586 12l-7.293 7.293a1 1 0 1 0 1.414 1.414l8-8a.999.999 0 0 0 .22-1.083"
-    />
-  </symbol>
-  <symbol viewBox="0 0 24 24" id="icon-carousel-prev">
-    <path
-      d="m6.293 11.292 8-8a1 1 0 1 1 1.414 1.415L8.414 12l7.293 7.293a1 1 0 1 1-1.414 1.414l-8-8a.996.996 0 0 1 0-1.415Z"
-    />
-  </symbol>
-  <symbol viewBox="0 0 14 14" id="icon-pagination-next">
-    <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"
-    />
-  </symbol>
-  <symbol viewBox="0 0 14 14" id="icon-pagination-prev">
-    <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"
-    />
-  </symbol>
-  <symbol id="icon-dropdown" viewBox="1.35 5.7 21.6 12.58">
-    <path
-      d="M12.186 18.285c-.451-.009-.809-.167-1.075-.441l-9.337-9.6a1.527 1.527 0 01-.424-.999v-.108c.015-.386.166-.741.424-1.008.56-.573 1.529-.57 2.082 0l8.294 8.53 8.292-8.532c.558-.57 1.526-.57 2.08 0 .265.27.416.629.428 1.01v.087c-.012.391-.165.75-.427 1.02l-9.333 9.6a1.443 1.443 0 01-1.004.441"
-    />
-  </symbol>
-  <symbol viewBox="0 0 20 18" id="icon-cta">
-    <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"
-    />
-  </symbol>
-</svg>

package/src/svg/content.svg

@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg">
-    <symbol viewBox="0 0 20 20" id="icon-add">
-        <path d="M19 9h-8V1a1 1 0 00-2 0v8H1a1 1 0 000 2h8v8a1 1 0 002 0v-8h8a1 1 0 000-2z"></path>
-    </symbol>
-   <symbol id="icon-clear" viewBox="0 0 24 24">
-        <path fill-rule="evenodd" d="M0 12C0 5.373 5.373 0 12 0c3.183 0 6.235 1.264 8.485 3.515A11.996 11.996 0 0124 12c0 6.627-5.373 12-12 12S0 18.627 0 12zm17.968 5.233a.996.996 0 00-.32-.989l-4.277-4.27 4.267-4.272a.995.995 0 10-1.403-1.404l-4.267 4.272-4.267-4.281a.998.998 0 10-1.413 1.413l4.278 4.271-4.268 4.281a.995.995 0 101.403 1.404l4.267-4.281 4.278 4.27a.994.994 0 001.722-.414z"/>
-    </symbol>
-    <symbol viewBox="0 0 22 22" id="icon-edit">
-        <path fill-rule="evenodd" d="M15.206 1.166a3.98 3.98 0 115.628 5.628L6.976 20.653a.996.996 0 01-.51.272L1.192 21.98A.995.995 0 01.02 20.81l1.055-5.277a.998.998 0 01.272-.509L15.206 1.166zM16.613 8.2L5.356 19.46l-3.518.703.703-3.518L13.799 5.387l2.814 2.814zm2.814-5.628a1.99 1.99 0 00-2.814 0L15.206 3.98l2.814 2.814 1.407-1.407a1.99 1.99 0 000-2.814z" />
-    </symbol>
-     <symbol viewBox="0 0 20 2" id="icon-remove">
-        <path d="M19 0H1a1 1 0 000 2h18a1 1 0 000-2z"></path>
-    </symbol>
-    <symbol viewBox="0 0 14 14" id="icon-add-small">
-        <path d="M13 6H8V1a1 1 0 10-2 0v5H1a1 1 0 100 2h5v5a1 1 0 002 0V8h5a1 1 0 000-2z"></path>
-    </symbol>
-   <symbol viewBox="0 0 16 16" id="icon-clear-small">
-        <path d="M8 0a8 8 0 100 16A8 8 0 008 0zm3.71 10.29a1 1 0 11-1.41 1.41L8 9.41l-2.29 2.3A1 1 0 014.3 10.3L6.59 8l-2.3-2.29a1.004 1.004 0 011.42-1.42L8 6.59l2.29-2.29a1 1 0 011.41 1.41L9.41 8l2.3 2.29z"></path>
-    </symbol>
-    <symbol viewBox="0 0 16 16" id="icon-edit-small">
-        <path d="M15.087.912a3.127 3.127 0 00-4.414 0l-9.38 9.38a1.001 1.001 0 00-.263.465l-1 4a1 1 0 001.212 1.213l4-1c.176-.044.337-.135.465-.263l9.38-9.38a3.125 3.125 0 000-4.415zm-1.415 1.414c.437.438.438 1.148.001 1.586l-.672.672-1.586-1.586.672-.672a1.121 1.121 0 011.585 0zm-9.184 10.77l-2.114.53.53-2.115L10 4.413l1.586 1.586-7.099 7.097z"></path>
-    </symbol>
-
-</svg>

package/src/svg/device.svg

@@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg">
-    <symbol viewBox="0 0 24 20" id="icon-camera">
-        <path d="M24 4v15a1 1 0 01-1 1H1a1 1 0 01-1-1V4a.998.998 0 011-1h5.279L7.051.684A1 1 0 018 0h8a1 1 0 01.949.684L17.721 3H23a.999.999 0 011 1zM2 5v13h20V5h-5a1 1 0 01-.949-.684L15.279 2H8.721l-.772 2.316A1 1 0 017 5H2zm10 1a5 5 0 105 5 5.006 5.006 0 00-5-5zm0 8a3 3 0 110-6 3 3 0 010 6z"></path>
-    </symbol>
-    <symbol viewBox="0 0 16 22" id="icon-mic">
-        <path d="M13.01 9c0 2.761-2.235 5-4.992 5a4.997 4.997 0 01-4.992-5V5c0-2.761 2.236-5 4.992-5a4.997 4.997 0 014.993 5v4zm-4.992 3a2.998 2.998 0 002.996-3V5c0-1.657-1.341-3-2.996-3a2.998 2.998 0 00-2.995 3v4c0 1.657 1.34 3 2.995 3zm6.787.021a1.001 1.001 0 011.031 1.529 8.987 8.987 0 01-6.82 4.39V20h1.998a1 1 0 010 2H5.023a1 1 0 010-2H7.02v-2.06A8.985 8.985 0 01.2 13.56a1.001 1.001 0 01.751-1.6.998.998 0 01.907.49A6.987 6.987 0 008.018 16a6.987 6.987 0 006.15-3.55c.148-.222.376-.376.637-.429z"></path>
-    </symbol>
-    <symbol viewBox="0 0 14 22" id="icon-mobile">
-        <path fill-rule="evenodd" d="M11 0a3 3 0 013 3v16a3 3 0 01-3 3H3a3 3 0 01-3-3V3a3 3 0 013-3zm1 16H2v3a1 1 0 00.883.993L3 20h8a1 1 0 001-1v-3zm-4 1a1 1 0 010 2H6a1 1 0 010-2h2zm4-12H2v9h10V5zm-1-3H3a1 1 0 00-1 1h10a1 1 0 00-1-1z"></path>
-    </symbol>
-    <symbol viewBox="0 0 22 22" id="icon-mobile-signal">
-        <path fill-rule="evenodd" d="M11 0a3 3 0 013 3v16a3 3 0 01-3 3H3a3 3 0 01-3-3V3a3 3 0 013-3zm1 16H2v3a1 1 0 00.883.993L3 20h8a1 1 0 001-1v-3zm-4 1a1 1 0 010 2H6a1 1 0 010-2h2zm4-12H2v9h10V5zm7.613-3.79A5.991 5.991 0 0122 6a5.991 5.991 0 01-2.384 4.788 1 1 0 11-1.206-1.595A3.992 3.992 0 0020 6a3.992 3.992 0 00-1.592-3.194 1 1 0 111.205-1.596zM16.71 3.294C17.54 4.13 18 4.957 18 6c0 1.044-.459 1.871-1.292 2.706a1 1 0 01-1.416-1.412C15.787 6.797 16 6.414 16 6c0-.413-.213-.797-.709-1.294a1 1 0 011.418-1.412zM11 2H3a1 1 0 00-1 1h10a1 1 0 00-1-1z"></path>
-    </symbol>
-    <symbol id="icon-print" viewBox="0 0 24 24">
-        <path d="M17 9a1 1 0 100 2h3a1 1 0 100-2h-3z" />
-        <path d="M5 2.222C5 .995 5.995 0 7.222 0h9.556C18.005 0 19 .995 19 2.222V6h2.778C23.005 6 24 6.995 24 8.222v8.556A2.222 2.222 0 0121.778 19H19v2.778A2.222 2.222 0 0116.778 24H7.222A2.222 2.222 0 015 21.778V19H2.222A2.222 2.222 0 010 16.777V8.223C0 6.995.995 6 2.222 6H5V2.222zM5 17v-3H4a1 1 0 110-2h16a1 1 0 110 2h-1v3h2.778c.123 0 .222-.1.222-.223V8.223C22 8.1 21.9 8 21.778 8H2.222C2.1 8 2 8.1 2 8.222v8.556c0 .122.1.222.222.222H5zm2 4.778c0 .123.1.222.222.222h9.556c.123 0 .222-.1.222-.222V14H7v7.778zM17 2.222C17 2.1 16.9 2 16.778 2H7.222C7.1 2 7 2.1 7 2.222V6h10V2.222z" />
-    </symbol>
-    <symbol id="icon-security-key" viewBox="0 0 24 24">
-        <path d="M8 5V1.2A1.2 1.2 0 019.2 0h5.6A1.2 1.2 0 0116 1.2V5h.8A1.2 1.2 0 0118 6.2V19a5 5 0 01-5 5h-2a5 5 0 01-5-5V6.2A1.2 1.2 0 017.2 5H8zm2 0h4V2h-4v3zM8 7v12a3 3 0 003 3h2a3 3 0 003-3V7H8z" />
-        <path d="M12 12a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z" />
-    </symbol>
-    <symbol viewBox="0 0 16 14" id="icon-camera-small">
-        <path d="M10 0a1 1 0 01.895.553L11.618 2H15a1 1 0 011 1v10a1 1 0 01-1 1H1a1 1 0 01-1-1V3a1 1 0 011-1h3.382L5.105.553A1 1 0 016 0zm-.618 2H6.618l-.723 1.447A1 1 0 015 4H2v8h12V4h-3a1 1 0 01-.895-.553L9.382 2zM8 5a3 3 0 110 6 3 3 0 010-6zm0 2a1 1 0 100 2 1 1 0 000-2z"></path>
-    </symbol>
-    <symbol viewBox="0 0 12 16" id="icon-mic-small">
-        <path d="M1.01 7.954c.367.005.701.21.871.536a4.657 4.657 0 004.125 2.5c1.731 0 3.32-.963 4.124-2.5a.998.998 0 011.367-.36 1 1 0 01.369 1.37 6.723 6.723 0 01-4.858 3.42V15c0 .552-.446 1-.997 1a.999.999 0 01-.998-1v-2.08A6.723 6.723 0 01.156 9.49a1.002 1.002 0 01.855-1.536zM6.01 0a2.996 2.996 0 012.993 3v3c0 1.657-1.34 3-2.992 3a2.996 2.996 0 01-2.993-3V3c0-1.657 1.34-3 2.993-3zm0 2a.999.999 0 00-.997 1v3a.999.999 0 101.995 0V3c0-.552-.446-1-.997-1z"></path>
-    </symbol>
-</svg>