@magicgol/polyjuice 0.17.1 → 0.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicgol/polyjuice",
-  "version": "0.17.1",
+  "version": "0.18.2",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/assets/palette.scss

@@ -18,4 +18,7 @@ $palette: (
     // LIVE
     'online': #00b669,
     'offline': #ea7203,
+    // OWNERSHIP
+    'owned': #d81159,
+    'opponent': #116dd8,
 );

package/src/assets/svg/hand-down.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'hand-down': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 20 20',
+    data: '<path pid="0" d="M16.417.833H4.747a2.75 2.75 0 00-2.704 2.255L.88 9.505a2.75 2.75 0 002.704 3.245h4.18l-.513 1.311a3.786 3.786 0 003.566 5.106.917.917 0 00.834-.541l2.612-5.876h2.155a2.75 2.75 0 002.75-2.75V3.583a2.75 2.75 0 00-2.75-2.75zM12.75 11.641l-2.493 5.61a1.953 1.953 0 01-1.265-2.548l.485-1.311a1.833 1.833 0 00-1.714-2.475h-4.18a.917.917 0 01-.706-.33.916.916 0 01-.21-.752L3.83 3.418a.917.917 0 01.916-.751h8.003v8.974zm4.583-1.64a.917.917 0 01-.916.916h-1.834v-8.25h1.834a.917.917 0 01.916.917V10z" _fill="#EC4141"/>'
+  }
+})

package/src/assets/svg/hand-up.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'hand-up': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 20 20',
+    data: '<path pid="0" d="M19.3 8.08A3 3 0 0017 7h-4.56L13 5.57A4.13 4.13 0 009.11 0a1 1 0 00-.91.59L5.35 7H3a3 3 0 00-3 3v7a3 3 0 003 3h12.73a3 3 0 002.95-2.46l1.27-7a3 3 0 00-.65-2.46zM5 18H3a1 1 0 01-1-1v-7a1 1 0 011-1h2v9zm13-7.82l-1.27 7a1 1 0 01-1 .82H7V8.21l2.72-6.12a2.11 2.11 0 011.38 2.78l-.53 1.43A2 2 0 0012.44 9H17a1 1 0 01.77.36 1.001 1.001 0 01.23.82z" _fill="#fff"/>'
+  }
+})

package/src/assets/svg/index.js

@@ -2,6 +2,8 @@
 require('./check-with-circle')
 require('./facebook')
 require('./google')
+require('./hand-down')
+require('./hand-up')
 require('./magic-coin')
 require('./message')
 require('./soccer-ball')

package/src/components/footballer/horizontal-placeholder/HPlaceholder.stories.js

@@ -0,0 +1,56 @@
+import MgHPlaceholder from './HPlaceholder.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Footballer/HPlaceholder',
+  component: MgHPlaceholder,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    ownership: {
+      control: { type: 'select' },
+      options: ['owned', 'opponent'],
+      defaultValue: 'owned'
+    },
+    default: {
+      description: "The default Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgHPlaceholder },
+  template: `<mg-h-placeholder @click="$emit('click')" v-bind="$props">
+    <template v-if="${'default' in args}" v-slot>${args.default}</template>
+  </mg-h-placeholder>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: '<div>This is a horizontal placeholder.</div><div>What do you think about?</div>'
+};
+
+export const Owned = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Owned.args = {
+  ownership: 'owned',
+  default: '<div>This is a horizontal placeholder.</div><div>What do you think about?</div>',
+};
+
+export const Opponent = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Opponent.args = {
+  ownership: 'opponent',
+  default: '<div>This is a horizontal placeholder.</div><div>What do you think about?</div>',
+};

package/src/components/footballer/horizontal-placeholder/HPlaceholder.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    class="d-flex align-items-center rounded px-3"
+    v-bind:class="classes"
+  >
+    <div class="flex-fill"><slot></slot></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-h-placeholder',
+
+  props: {
+    ownership: {
+      type: String,
+      default: 'owned',
+      validator: function (value) {
+        return ['owned', 'opponent'].indexOf(value) !== -1;
+      },
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-h-placeholder': true,
+        'mg-h-placeholder--ownership-owned': this.ownership === 'owned',
+        'mg-h-placeholder--ownership-opponent': this.ownership === 'opponent',
+      };
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../../assets/palette';
+
+.mg-h-placeholder {
+  background: white;
+  border: 2px dashed;
+  color: #777777;
+  font-family: 'Ubuntu', sans-serif;
+  font-size: 1rem;
+  font-weight: 500;
+  height: 3.5rem;
+
+  &--ownership {
+    &-owned {
+      border-color: rgba(map-get($palette, 'owned'), 0.5);
+    }
+
+    &-opponent {
+      border-color: rgba(map-get($palette, 'opponent'), 0.5);
+    }
+  }
+}
+</style>

package/src/components/icon/badge/IconBadge.stories.js

@@ -6,9 +6,14 @@ export default {
   component: MgIconBadge,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
-    level: {
+    size: {
       control: { type: 'select' },
-      options: ['normal', 'club'],
+      options: ['normal', 'large'],
+      defaultValue: 'normal'
+    },
+    context: {
+      control: { type: 'select' },
+      options: ['normal', 'club', 'success', 'failure'],
       defaultValue: 'normal'
     },
   },
@@ -25,13 +30,9 @@ export const Default = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {
   icon: 'message',
-  level: 'normal',
+  context: 'normal',
+  size: 'normal',
+  active: false
 };
 
-export const Club = Template.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args
-Club.args = {
-  icon: 'star-c',
-  level: 'club',
-};
 

package/src/components/icon/badge/IconBadge.vue

@@ -17,21 +17,37 @@ export default {
     icon: {
       type: String
     },
-    level: {
+    size: {
       type: String,
       default: 'normal',
       validator: function (value) {
-        return ['normal', 'club'].indexOf(value) !== -1;
+        return ['normal', 'large'].indexOf(value) !== -1;
       },
-    }
+    },
+    context: {
+      type: String,
+      default: 'normal',
+      validator: function (value) {
+        return ['normal', 'club', 'success', 'failure'].indexOf(value) !== -1;
+      },
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
     classes() {
       return {
         'mg-icon-badge': true,
-        'mg-icon-badge--club': this.level === 'club',
-        'mg-icon-badge--normal': this.level === 'normal',
+        'mg-icon-badge--active': this.active === true,
+        'mg-icon-badge--size-normal': this.size === 'normal',
+        'mg-icon-badge--size-large': this.size === 'large',
+        'mg-icon-badge--context-club': this.context === 'club',
+        'mg-icon-badge--context-normal': this.context === 'normal',
+        'mg-icon-badge--context-success': this.context === 'success',
+        'mg-icon-badge--context-failure': this.context === 'failure',
       };
     },
   },
@@ -42,28 +58,99 @@ export default {
   @import '../../../assets/palette';
 
   .mg-icon-badge {
-    height: 2rem;
-    min-width: 2rem;
-    width: 2rem;
+    &--size {
+      &-normal {
+        height: 2rem;
+        min-width: 2rem;
+        width: 2rem;
+
+        svg {
+          height: 1rem;
+          width: 1rem;
+        }
+      }
+
+      &-large {
+        height: 2.5rem;
+        min-width: 2.5rem;
+        width: 2.5rem;
 
-    svg {
-      height: 1rem;
-      width: 1rem;
+        svg {
+          height: 1.25rem;
+          width: 1.25rem;
+        }
+      }
     }
 
-    &--normal {
-      background-color: #f5f5f5;
+    &--context {
+      &-normal {
+        background-color: #f5f5f5;
 
-      svg {
-        fill: map-get($palette, 'brand');
+        svg {
+          fill: map-get($palette, 'brand');
+        }
+      }
+
+      &-club {
+        background-color: rgba(map-get($palette, 'expertClub'), 0.05);
+
+        svg {
+          fill: map-get($palette, 'expertClub');
+        }
+      }
+
+      &-success {
+        background-color: #f5f5f5;
+
+        svg {
+          fill: map-get($palette, 'success');
+        }
+      }
+
+      &-failure {
+        background-color: #f5f5f5;
+
+        svg {
+          fill: map-get($palette, 'error');
+        }
       }
     }
 
-    &--club {
-      background-color: rgba(map-get($palette, 'expertClub'), 0.05);
+    &--active {
+      &.mg-icon-badge {
+        &--context {
+          &-normal {
+            background-color: map-get($palette, 'brand');
+
+            svg {
+              fill: #f5f5f5;
+            }
+          }
+
+          &-club {
+            background-color: map-get($palette, 'expertClub');
+
+            svg {
+              fill: mix(white, map-get($palette, 'expertClub'), 90%);
+            }
+          }
+
+          &-success {
+            background-color: map-get($palette, 'success');
+
+            svg {
+              fill: #f5f5f5;
+            }
+          }
+
+          &-failure {
+            background-color: map-get($palette, 'error');
 
-      svg {
-        fill: map-get($palette, 'expertClub');
+            svg {
+              fill: #f5f5f5;
+            }
+          }
+        }
       }
     }
   }

package/src/components/label/anchor/Anchor.stories.js

@@ -0,0 +1,40 @@
+import MgAnchor from './Anchor.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Label/Anchor',
+  component: MgAnchor,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    light: {
+      control: { type: 'select' },
+      options: ['red', 'yellow', 'green'],
+      defaultValue: 'green'
+    },
+    default: {
+      description: "The default Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    }
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgAnchor },
+  template: `<mg-anchor v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-anchor>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: 'bozza',
+};

package/src/components/label/anchor/Anchor.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="mg-anchor">
+    <div class="mg-anchor-content position-relative d-inline-flex align-items-center text-uppercase text-white">
+      <div><slot></slot></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-anchor',
+
+  computed: {
+    classes() {
+      return {
+        'mg-anchor': true,
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+  .mg-anchor {
+    padding-left: 10px;
+
+    .mg-anchor-content {
+      background: #444444;
+      border-radius: 0 4px 4px 0;
+      font-family: 'Ubuntu', sans-serif;
+      font-size: 0.75rem;
+      font-weight: 500;
+      height: 1.625rem;
+      padding-right: 0.6875rem;
+      padding-left: 0.375rem;
+
+      &::after {
+        content: '';
+        position: absolute;
+        border-radius: 50%;
+        border-top: 16px solid transparent;
+        border-right: 16px solid #444444;
+        border-bottom: 16px solid transparent;
+        left: 0;
+        margin-left: -13px;
+      }
+    }
+  }
+</style>

package/src/components/label/label/Label.stories.js

@@ -0,0 +1,46 @@
+import MgLabel from './Label.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Label/Label',
+  component: MgLabel,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['normal', 'x-small'],
+      defaultValue: 'normal'
+    },
+    theme: {
+      control: { type: 'select' },
+      options: ['light', 'dark'],
+      defaultValue: 'light'
+    },
+    default: {
+      description: "The default Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    }
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgLabel },
+  template: `<mg-label v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-label>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: 'etichetta',
+  size: 'x-small'
+};

package/src/components/label/label/Label.vue

@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="d-inline-flex align-items-center px-2 text-uppercase"
+    :class="classes"
+  >
+    <div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-label',
+
+  props: {
+    size: {
+      type: String,
+      default: 'normal',
+      validator: function (value) {
+        return ['normal', 'x-small'].indexOf(value) !== -1;
+      },
+    },
+    theme: {
+      type: String,
+      default: 'light',
+      validator: function (value) {
+        return ['light', 'dark'].indexOf(value) !== -1;
+      },
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-label': true,
+        'mg-label--size-x-small': this.size === 'x-small',
+        'mg-label--size-normal': this.size === 'normal',
+        'mg-label--theme-light': this.theme === 'light',
+        'mg-label--theme-dark': this.theme === 'dark',
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+  .mg-label {
+    border-radius: 32px;
+    padding-top: 0.0625rem;
+    padding-bottom: 0.0625rem;
+
+    > div {
+      font-family: 'Raleway', sans-serif;
+      font-weight: 700;
+    }
+
+    &--size {
+      &-x-small {
+        font-size: 0.625rem;
+      }
+
+      &-normal {
+        font-size: 0.875rem;
+      }
+    }
+
+    &--theme {
+      &-light {
+        background: #f7f7f7;
+        color: #343434;
+      }
+
+      &-dark {
+        background: #5b5b5b;
+        color: #fff;
+      }
+    }
+  }
+</style>

package/src/components/typography/h4/HeadingFour.stories.js

@@ -6,6 +6,11 @@ export default {
   component: MgHeadingFour,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
+    level: {
+      control: { type: 'select' },
+      options: [null, 'club'],
+      defaultValue: null
+    },
     default: {
       description: "The default Vue slot",
       control: {
@@ -22,9 +27,10 @@ export default {
 };
 
 // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-const Template = args => ({
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
   components: { MgHeadingFour },
-  template: `<mg-heading-four><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-four>`,
+  template: `<mg-heading-four v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-four>`,
 });
 
 export const Default = Template.bind({});

package/src/components/typography/h4/HeadingFour.vue

@@ -6,10 +6,21 @@
 export default {
   name: 'mg-heading-four',
 
+  props: {
+    level: {
+      type: String,
+      default: null,
+      validator: function (value) {
+        return ['club'].indexOf(value) !== -1;
+      },
+    }
+  },
+
   computed: {
     classes() {
       return {
         'mg-h4': true,
+        'mg-h4--level-club': this.level === 'club',
       };
     }
   },
@@ -17,10 +28,18 @@ export default {
 </script>
 
 <style lang="scss">
+  @import '../../../assets/palette';
+
   .mg-h4 {
     color: #343434;
     font-family: 'Ubuntu', sans-serif;
     font-size: 0.875rem;
     font-weight: 700;
+
+    &--level {
+      &-club {
+        color: map-get($palette, 'expertClub') !important;
+      }
+    }
   }
 </style>

package/src/documentation/MagicTeam.stories.mdx

@@ -0,0 +1,14 @@
+import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
+
+<Meta title="Colors/Magic Team" />
+
+<ColorPalette>
+    <ColorItem
+        title="Own Team"
+        colors={{'Razzmatazz': '#d81159'}}
+    />
+    <ColorItem
+        title="Opponent Team"
+        colors={{'Denim': '#116dd8'}}
+    />
+</ColorPalette>

package/src/svg/hand-down.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.4166 0.833496H4.74748C4.10415 0.833711 3.48126 1.05946 2.98718 1.47147C2.49311 1.88349 2.15911 2.45568 2.04331 3.0885L0.879145 9.50516C0.806608 9.90156 0.822078 10.3091 0.924461 10.6988C1.02684 11.0886 1.21364 11.4511 1.47162 11.7607C1.7296 12.0703 2.05248 12.3193 2.41739 12.4903C2.7823 12.6613 3.18033 12.75 3.58331 12.7502H7.76331L7.24998 14.061C7.03646 14.6349 6.96535 15.2521 7.04275 15.8596C7.12016 16.467 7.34376 17.0466 7.69439 17.5487C8.04502 18.0508 8.5122 18.4603 9.05587 18.7421C9.59953 19.0239 10.2034 19.1697 10.8158 19.1668C10.9921 19.1665 11.1646 19.1152 11.3126 19.0193C11.4605 18.9234 11.5777 18.7868 11.65 18.626L14.2625 12.7502H16.4166C17.146 12.7502 17.8455 12.4604 18.3612 11.9447C18.8769 11.429 19.1666 10.7295 19.1666 10.0002V3.5835C19.1666 2.85415 18.8769 2.15468 18.3612 1.63895C17.8455 1.12323 17.146 0.833496 16.4166 0.833496ZM12.75 11.641L10.2566 17.251C10.0015 17.1738 9.76492 17.0452 9.56139 16.8731C9.35786 16.701 9.19172 16.4891 9.07321 16.2503C8.9547 16.0116 8.88633 15.7511 8.8723 15.4849C8.85827 15.2188 8.89889 14.9525 8.99164 14.7027L9.47748 13.3918C9.581 13.1148 9.61595 12.8168 9.57934 12.5233C9.54274 12.2298 9.43566 11.9495 9.26726 11.7063C9.09885 11.4632 8.87412 11.2644 8.61223 11.1269C8.35035 10.9894 8.05909 10.9173 7.76331 10.9168H3.58331C3.44864 10.917 3.31558 10.8876 3.19359 10.8306C3.07159 10.7735 2.96367 10.6903 2.87748 10.5868C2.78917 10.4848 2.72449 10.3645 2.68804 10.2346C2.6516 10.1046 2.64429 9.96825 2.66665 9.83516L3.83081 3.4185C3.86986 3.20495 3.98342 3.01219 4.15129 2.87455C4.31915 2.7369 4.53042 2.66329 4.74748 2.66683H12.75V11.641ZM17.3333 10.0002C17.3333 10.2433 17.2367 10.4764 17.0648 10.6483C16.8929 10.8203 16.6598 10.9168 16.4166 10.9168H14.5833V2.66683H16.4166C16.6598 2.66683 16.8929 2.76341 17.0648 2.93531C17.2367 3.10722 17.3333 3.34038 17.3333 3.5835V10.0002Z" fill="#EC4141"/>
+</svg>

package/src/svg/hand-up.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.3 8.08004C19.019 7.74269 18.6674 7.47113 18.27 7.28452C17.8726 7.0979 17.439 7.0008 17 7.00004H12.44L13 5.57004C13.2329 4.94393 13.3105 4.27065 13.2261 3.60797C13.1416 2.94528 12.8977 2.31297 12.5152 1.76527C12.1327 1.21758 11.623 0.770841 11.0299 0.463388C10.4369 0.155934 9.77804 -0.00305943 9.11 4.45912e-05C8.91764 0.000445953 8.72948 0.0563198 8.56807 0.160967C8.40666 0.265615 8.27887 0.414594 8.2 0.590044L5.35 7.00004H3C2.20435 7.00004 1.44129 7.31611 0.87868 7.87872C0.316071 8.44133 0 9.2044 0 10V17C0 17.7957 0.316071 18.5588 0.87868 19.1214C1.44129 19.684 2.20435 20 3 20H15.73C16.4318 19.9998 17.1113 19.7535 17.6503 19.3041C18.1893 18.8546 18.5537 18.2304 18.68 17.54L19.95 10.54C20.0286 10.1074 20.011 9.66283 19.8987 9.23772C19.7864 8.81262 19.582 8.4174 19.3 8.08004ZM5 18H3C2.73478 18 2.48043 17.8947 2.29289 17.7072C2.10536 17.5196 2 17.2653 2 17V10C2 9.73483 2.10536 9.48047 2.29289 9.29294C2.48043 9.1054 2.73478 9.00004 3 9.00004H5V18ZM18 10.18L16.73 17.18C16.6874 17.413 16.5635 17.6233 16.3804 17.7734C16.1973 17.9236 15.9668 18.0039 15.73 18H7V8.21004L9.72 2.09004C9.99998 2.17167 10.26 2.31045 10.4837 2.49763C10.7073 2.6848 10.8897 2.91631 11.0194 3.17754C11.1491 3.43876 11.2232 3.72404 11.2371 4.01535C11.2509 4.30666 11.2043 4.59768 11.1 4.87004L10.57 6.30005C10.4571 6.6023 10.4189 6.92739 10.4589 7.24758C10.4988 7.56776 10.6156 7.87353 10.7993 8.13878C10.983 8.40404 11.2282 8.62091 11.5139 8.77088C11.7996 8.92086 12.1173 8.99948 12.44 9.00004H17C17.1469 8.99981 17.2921 9.03194 17.4252 9.09416C17.5582 9.15638 17.676 9.24716 17.77 9.36004C17.8663 9.47137 17.9369 9.60259 17.9767 9.74434C18.0164 9.88608 18.0244 10.0349 18 10.18Z" fill="white"/>
+</svg>