toggle-components-library 1.32.0-beta.1 → 1.32.0-beta.11

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.32.0-beta.1",
+  "version": "1.32.0-beta.11",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -17086,11 +17086,6 @@
         }
       }
     },
-    "swiper": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-10.3.1.tgz",
-      "integrity": "sha512-24Wk3YUdZHxjc9faID97GTu6xnLNia+adMt6qMTZG/HgdSUt4fS0REsGUXJOgpTED0Amh/j+gRGQxsLayJUlBQ=="
-    },
     "symbol.prototype.description": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/symbol.prototype.description/-/symbol.prototype.description-1.0.5.tgz",
@@ -18474,11 +18469,6 @@
       "resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.6.2.tgz",
       "integrity": "sha512-9HS3scJwWgKjmkcWIf+ndNDR0WytUJD8Ju0V2ZYcjYtlTLwJAf2SKUlBZaQTkDmwje/zMgulvZRi+MXmi+WkKw=="
     },
-    "vue-awesome-swiper": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
-      "integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ=="
-    },
     "vue-color": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",

package/package.json

@@ -1,83 +1,81 @@
 {
-    "name": "toggle-components-library",
-    "version": "1.32.0-beta.1",
-    "private": false,
-    "scripts": {
-        "serve": "vue-cli-service serve",
-        "build": "vue-cli-service build --target lib --name toggle-components-library src/index.js",
-        "lint": "vue-cli-service lint",
-        "storybook": "start-storybook -p 6006",
-        "build-storybook": "build-storybook",
-        "build-publish": "vue-cli-service build --target lib --name toggle-components-library src/index.js && npm publish"
+  "name": "toggle-components-library",
+  "version": "1.32.0-beta.11",
+  "private": false,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build --target lib --name toggle-components-library src/index.js",
+    "lint": "vue-cli-service lint",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "build-publish": "vue-cli-service build --target lib --name toggle-components-library src/index.js && npm publish"
+  },
+  "main": "dist/toggle-components-library.common.js",
+  "module": "dist/toggle-components-library.esm.js",
+  "unpkg": "dist/toggle-components-library.umd.min.js",
+  "browser": {
+    "./sfc": "src/toggle-components-library.vue"
+  },
+  "files": [
+    "dist/*",
+    "src/*",
+    "public/*",
+    "*.json",
+    "*.js"
+  ],
+  "dependencies": {
+    "apexcharts": "^3.36.3",
+    "core-js": "^3.25.0",
+    "countries-list": "^2.6.1",
+    "date-fns": "^1.30.1",
+    "storybook-vue-router": "^1.0.7",
+    "vue": "^2.7.10",
+    "vue-airbnb-style-datepicker": "^2.7.1",
+    "vue-apexcharts": "^1.6.2",
+    "vue-color": "^2.7.1",
+    "vue-moment": "^4.1.0",
+    "vue-multiselect": "^2.0.8",
+    "vue-router": "^3.6.4",
+    "vue2-dropzone": "^3.6.0",
+    "vuedraggable": "^2.24.3",
+    "webfontloader": "^1.6.28"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.13",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-docs": "^6.5.10",
+    "@storybook/vue": "^6.5.10",
+    "@vue/cli-plugin-babel": "^4.5.3",
+    "@vue/cli-plugin-eslint": "^4.5.3",
+    "@vue/cli-service": "^4.5.3",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
+    "babel-preset-vue": "^2.0.2",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "react": "^16.13.1",
+    "react-is": "^16.13.1",
+    "sass": "^1.54.5",
+    "sass-loader": "^8.0.2",
+    "vue-template-compiler": "^2.7.10"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
     },
-    "main": "dist/toggle-components-library.common.js",
-    "module": "dist/toggle-components-library.esm.js",
-    "unpkg": "dist/toggle-components-library.umd.min.js",
-    "browser": {
-        "./sfc": "src/toggle-components-library.vue"
-    },
-    "files": [
-        "dist/*",
-        "src/*",
-        "public/*",
-        "*.json",
-        "*.js"
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
     ],
-    "dependencies": {
-        "apexcharts": "^3.36.3",
-        "core-js": "^3.25.0",
-        "countries-list": "^2.6.1",
-        "date-fns": "^1.30.1",
-        "storybook-vue-router": "^1.0.7",
-        "swiper": "^10.3.0",
-        "vue": "^2.7.10",
-        "vue-airbnb-style-datepicker": "^2.7.1",
-        "vue-apexcharts": "^1.6.2",
-        "vue-awesome-swiper": "^4.1.1",
-        "vue-color": "^2.7.1",
-        "vue-moment": "^4.1.0",
-        "vue-multiselect": "^2.0.8",
-        "vue-router": "^3.6.4",
-        "vue2-dropzone": "^3.6.0",
-        "vuedraggable": "^2.24.3",
-        "webfontloader": "^1.6.28"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.18.13",
-        "@storybook/addon-actions": "^6.5.10",
-        "@storybook/addon-docs": "^6.5.10",
-        "@storybook/vue": "^6.5.10",
-        "@vue/cli-plugin-babel": "^4.5.3",
-        "@vue/cli-plugin-eslint": "^4.5.3",
-        "@vue/cli-service": "^4.5.3",
-        "babel-eslint": "^10.1.0",
-        "babel-loader": "^8.1.0",
-        "babel-preset-vue": "^2.0.2",
-        "eslint": "^6.7.2",
-        "eslint-plugin-vue": "^6.2.2",
-        "react": "^16.13.1",
-        "react-is": "^16.13.1",
-        "sass": "^1.54.5",
-        "sass-loader": "^8.0.2",
-        "vue-template-compiler": "^2.7.10"
-    },
-    "eslintConfig": {
-        "root": true,
-        "env": {
-            "node": true
-        },
-        "extends": [
-            "plugin:vue/essential",
-            "eslint:recommended"
-        ],
-        "parserOptions": {
-            "parser": "babel-eslint"
-        },
-        "rules": {}
+    "parserOptions": {
+      "parser": "babel-eslint"
     },
-    "browserslist": [
-        "> 1%",
-        "last 2 versions",
-        "not dead"
-    ]
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
 }

package/src/components/metrics/ToggleMetricFunnelChart.vue

@@ -3,17 +3,17 @@
         
         <div class="funnel-grid-svg"></div>
 
-         <div :class="{'funnel-spark-line funnel-grid-1': true, 'increase-padding-bottom': noSparkLine}">
-            <slot :name="emailInsight ? 'metric1' : 'sparkLine1'"></slot>
+         <div class="funnel-spark-line funnel-grid-1">
+            <slot name="sparkLine1"></slot>
         </div>
-         <div :class="{'funnel-spark-line funnel-grid-2': true, 'increase-padding-bottom': noSparkLine}">
-            <slot :name="emailInsight ? 'metric2' : 'sparkLine2'"></slot>
+         <div class="funnel-spark-line funnel-grid-2">
+            <slot name="sparkLine2"></slot>
         </div>
-         <div :class="{'funnel-spark-line funnel-grid-3': true, 'increase-padding-bottom': noSparkLine}">
-            <slot :name="emailInsight ? 'metric3' : 'sparkLine3'"></slot>
+         <div class="funnel-spark-line funnel-grid-3">
+            <slot name="sparkLine3"></slot>
         </div>
-        <div :class="{'funnel-spark-line funnel-grid-4': true, 'increase-padding-bottom': noSparkLine}">
-            <slot :name="emailInsight ? 'metric4' : 'sparkLine4'"></slot>
+        <div class="funnel-spark-line funnel-grid-4">
+            <slot name="sparkLine4"></slot>
         </div>
 
         <div class="funnel-single-metric funnel-grid-5">
@@ -56,25 +56,6 @@ export default {
         name: {
             type: String,
             default: "ToggleMetricFunnelChart"
-        },
-        /**
-         * If no SparkLine components are used in funnel
-         * set to true to increase distance between 
-         * funnel and metrics
-         */
-        noSparkLine: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * If funnel is used without SparkLine, 
-         * set prop to true 
-         * and name slots metric1, metric2 etc 
-         * for more generic use
-         */
-        emailInsight: {
-            type: Boolean,
-            default: false
         }
     }
 }

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -1,23 +1,17 @@
 <template>
     <div>
     <h3 class="toggle-metric metric-label">{{label}}</h3>
-        <ToggleCalculateBadge v-if="pendingBadge && label.length" class="single-metric-badge"> 14 days until spend is calculated</ToggleCalculateBadge>
-        <div class="single-metric-icon" v-else-if="pendingBadge && label.length == 0"></div>
-        <h1 class="toggle-metric metric-value" v-else>{{metricValue}}</h1>
+        <h1 class="toggle-metric metric-value">{{metricValue}}</h1>
     </div>
 </template>
 
 <script>
 
-import { mixins } from '../mixins/mixins';
-import ToggleCalculateBadge from '../badges/ToggleCalculateBadge.vue';
+import { mixins } from '../mixins/mixins'
 
 
 export default {
     mixins:[mixins],
-    components: {
-        ToggleCalculateBadge,
-    },
     props: {
         /**
         * Component's name
@@ -69,13 +63,6 @@ export default {
         currencyDenomination: {
             type: Number,
             default: 1
-        },
-        /**
-        * Displays badge or clock if metrics are still pending
-        */
-        pendingBadge: {
-            type: Boolean,
-            default: false
         }
     },
     computed: {

package/src/components/statusbar/ToggleStatusBar.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <div :class="['toggle-status-bar-container', statusColours]">
+            <label class="toggle-status-bar-label">
+                <span class="toggle-status-bar-dot" v-if="showDot">&#9679;</span>
+                {{ statusName }}
+            </label>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'StatusBar',
+    props: {
+        status: {
+            type: String,
+            required: true,
+            validator: function (value) {
+                return ['draft', 'processing', 'complete', 'inactive', 'active'].indexOf(value) !== -1;
+            },
+        }
+    },
+    computed: {
+        // Capitalise the first letter of the status
+        statusName() {
+            return this.status.charAt(0).toUpperCase() + this.status.slice(1);
+        },
+        // Add the status to the class name
+        statusColours() {
+            return 'toggle-status-bar-' + this.status;
+        },
+        // Show the dot if the status is active or processing
+        showDot() {
+            return this.status === 'active' || this.status === 'processing';
+        }
+    }
+}
+</script>

package/src/index.js

@@ -80,8 +80,7 @@ import ToggleMetricFunnelChart from "./components/metrics/ToggleMetricFunnelChar
 import ToggleThreeDots from "./components/threedots/ToggleThreeDots.vue";
 import ToggleThreeDotsButton from "./components/threedots/ToggleThreeDotsButton.vue";
 
-import ToggleCarousel from "./components/carousel/ToggleCarousel.vue";
-import ToggleCarouselSlide from "./components/carousel/ToggleCarouselSlide.vue";
+import ToggleStatusBar from "./components/statusbar/ToggleStatusBar.vue";
 
 
 import './sass/main.scss';
@@ -149,8 +148,7 @@ const Components = {
     ToggleBoosterBasicButton,
     ToggleBoosterModal,
     ToggleContactSearch,
-    ToggleCarousel,
-    ToggleCarouselSlide
+    ToggleStatusBar
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_badges.scss

@@ -32,82 +32,4 @@
     &.empty {
         background-color: $toggle-placeholder-grey;
     }
-}
-
-.toggle-podium-badge {
-    @include toggle-global-font-config;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: fit-content;
-    border-radius: 20px;
-    color: white;
-    font-size: $toggle-font-size-regular;
-    font-weight: 900;
-    padding: 5px 18px 5px 10px;
-
-    &.first {
-        background-color: #efd028;
-    }
-
-    &.second{
-        background-color: #adb4c9;
-
-    }
-
-    &.third {
-        background-color: #d99a0c;
-    }
-
-}
-
-.podium-number {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 1;
-    width: 26px;
-    height: 26px;
-    border-radius: 50%;
-    text-align: center;
-    margin-right: 20px;
-    margin-left: -4px;
-}
-
-.first .podium-number{
-    background: transparent linear-gradient(132deg, #FFD700 0%, #F0E4A2 100%) 0% 0% no-repeat padding-box;
-    color: #CBAF15;
-}
-
-.second .podium-number{
-    background: transparent linear-gradient(132deg, #C6C9D5 0%, #DEE2EF 100%) 0% 0% no-repeat padding-box;
-    color: #8C92A3;
-}
-
-.third .podium-number{
-    background: transparent linear-gradient(132deg, #E8B33C 0%, #F8CE6E 100%) 0% 0% no-repeat padding-box;
-    color: #C18A0E;
-}
-
-.toggle-calculate-badge{
-    display: inline-flex;
-    justify-content: space-between;
-    align-items: center;
-    width: fit-content;
-    background-color: #E4EBED;
-    color: #6D90B4;
-    border-radius: 50px;
-    padding: 10px 20px 10px 15px;
-    font-family: $toggle-font-family;
-    font-size: 0.8rem;
-    font-weight:lighter;
-
-    .clock-icon {
-        background-image: url('../assets/icons/clock-solid.svg');
-        background-repeat:no-repeat;
-        background-size:contain;
-        height: 22px;
-        width: 22px;
-        margin-right: 15px;
-    }
 }

package/src/sass/includes/_as_buttons.scss

@@ -328,102 +328,4 @@
     top: 50%;
     margin-top: -0.5rem;
     box-sizing: content-box;
-}
-
-.toggle-metrics-button {
-    display: inline-flex;
-    border-radius: 50px;
-    padding: 5px 20px;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-
-    
-    &.heatmap{
-        background-image: linear-gradient(to right, #fbb415 0%, #f75d05 51%, #d01d2c 100%);
-        border: none;
-        color: #ffeab2;
-        height: 40px;
-        width: fit-content;
-        font-weight: 600;
-        transition: all .2s ease-in-out;
-
-        &:hover {
-            background-image: linear-gradient(to right, #ffc341 0%, #ff7b2e 51%, #d23e4a 100%);
-            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
-
-            .heatmap-icon {
-                transform: scale(1.1);
-                transition: transform 0.2s ease-in-out;
-            }
-        }
-    }
-    
-    &.email {
-        background-color: #257de5;
-        color: white;
-        border: none;
-        height: 40px;
-        width: fit-content;
-        font-weight: 600;
-        transition: all 0.2s ease-in-out;
-        
-        &:hover {
-            background-color: #4196ff;
-            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
-            
-            .email-icon {
-                transform: scale(1.1);
-                transition: transform 0.2s ease-in-out;
-            }
-        }
-    }
-    
-    &.mini-contacts {
-        border: 2px solid #6d90b4;
-        color: #6d90b4;
-        background-color: white;
-        padding: 7px 14px;
-        width: fit-content;
-        transition: all 0.2s ease-in-out;
-        font-weight: 600;
-        font-size: 0.7rem;
-        
-        &:hover {
-            background-color: #6d90b4;
-            color: white;
-        }
-        
-        &:hover .contacts-icon {
-            background-image: url("../assets/icons/contacts-white.svg");
-        }
-    }
-    //icons
-    .heatmap-icon {
-        background-image: url("../assets/icons/view_heatmap.svg");
-        background-repeat:no-repeat;
-        background-size:contain;
-        margin-right: 15px;
-        width: 25px;
-        height: 25px;
-    }
-    
-    .email-icon {
-        background-image: url("../assets/icons/view_email.svg");
-        background-repeat:no-repeat;
-        background-size:contain;
-        margin-right: 15px;
-        width: 30px;
-        height: 30px;
-    }
-    
-    .contacts-icon {
-        background-image: url("../assets/icons/contacts-greyblue.svg");
-        background-repeat:no-repeat;
-        background-size:contain;
-        margin-right: 6px;
-        width: 14px;
-        height: 14px;
-        transition: all 0.2s ease-in-out;
-    }
-}
+}

package/src/sass/includes/_as_metrics.scss

@@ -16,7 +16,6 @@
         font-size: 275%;
         color: $toggle-metric-label-black;
     }
-
 }
 
 
@@ -26,7 +25,7 @@
     grid-template-columns: 1fr 1fr 1fr 1fr;
     display: grid;
     grid-auto-flow: column;
-    
+
 }
 
 .funnel-grid-svg {
@@ -80,7 +79,7 @@
     grid-column-start: 2;
     grid-row-end: 3;
     grid-column-end: 3;
-    display: flex;
+     display: flex;
 }
 
 .funnel-grid-7 {
@@ -102,7 +101,7 @@
 .funnel-spark-line, .funnel-single-metric  {
     margin-right: 1rem;
     border-right: 1px solid #BCDBEE;
-    
+
     &:nth-child(5),  &:last-child {
         border: 0;
     }
@@ -118,20 +117,4 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-}
-
-.single-metric-badge {
-    margin-top: 0.6rem;
-}
-
-.single-metric-icon {
-    background-image: url('../assets/icons/clock-solid.svg');
-    background-repeat:no-repeat;
-    background-size:contain;
-    height: 25px;
-    width: 25px;
-}
-
-.increase-padding-bottom {
-    padding-bottom: 3rem !important;
 }

package/src/sass/includes/_as_statusbar.scss

@@ -0,0 +1,60 @@
+.toggle-status-bar-container {
+    font-family: $toggle-font-family;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 50px;
+    width: 100%;
+    border-radius: 7px;
+}
+
+// Draft colours
+.toggle-status-bar-draft {
+    background-color: #FFB88D;
+
+    .toggle-status-bar-label {
+        color: #A34308;
+    }
+}
+
+// Processing colours
+.toggle-status-bar-processing {
+    background-color: #D7E9F2;
+
+    .toggle-status-bar-label {
+        color: #269BE3;
+    }
+}
+
+// Complete colours
+.toggle-status-bar-complete {
+    background-color: #B3E49F;
+
+    .toggle-status-bar-label {
+        color: #3BB40B;
+    }
+}
+
+// Inactive colours
+.toggle-status-bar-inactive {
+    background-color: #D7E9F2;
+
+    .toggle-status-bar-label {
+        color: #269BE3;
+    }
+}
+
+// Active colours
+.toggle-status-bar-active {
+    background-color: #D7E9F2;
+    border: 1px solid #FF4848;
+
+    .toggle-status-bar-label {
+        color: #FF4848;
+    }
+}
+
+.toggle-status-bar-dot {
+    font-size: 20px;
+    margin: 0 3px 0 0;
+}

package/src/sass/main.scss

@@ -21,5 +21,4 @@
 @import "./includes/_as_metrics.scss";
 @import "./includes/_as_threedots.scss";
 @import "./includes/_as_boosters.scss";
-@import "./includes/_as_cards.scss";
-@import "./includes/_as_carousels.scss";
+@import "./includes/_as_statusbar.scss";

package/dist/img/clock-solid.fdaf024d.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#6D90B4}</style><path d="M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"/></svg>

package/dist/img/contacts-greyblue.ef6f8a9a.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#6d90b4}</style><path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z"/></svg>

package/dist/img/contacts-white.95d07c7a.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#fff}</style><path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z"/></svg>

package/dist/img/view_email.508021c9.svg

@@ -1,7 +0,0 @@
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-<svg width="800px" height="800px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#000000">
-
-
-
-

package/dist/img/view_heatmap.f9058fdb.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#ffeab2}</style><path d="M159.3 5.4c7.8-7.3 19.9-7.2 27.7 .1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4zM225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2 29.3c-6.6 7.6-18.5 7.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8 42.5-50.8 69.3-50.8 99.4C112 375.4 162.6 416 225.7 416z"/></svg>