@yoobic/yobi 8.7.3 → 8.7.4

package/dist/collection/components/form-creator/form-creator-score-expandable/form-creator-score-expandable.js

@@ -326,7 +326,7 @@ export class YooFormCreatorBlockExpandableComponent {
     return [this.renderScoringInput(trueScoringInput, 0, TRUE_PRESENCE_VALUE_TEXT), this.renderScoringInput(falseScoringInput, 1, FALSE_PRESENCE_VALUE_TEXT)];
   }
   renderScoringInput(scoringInput, index = 0, valueText) {
-    return (h("div", { class: "value-container" }, h("div", { class: "value-text" }, translateMulti(scoringInput.valueText.toUpperCase()), scoringInput.tooltip && (h("yoo-tooltip", { content: scoringInput.tooltip }, h("yoo-icon", { color: "stable", name: "help", size: "small" })))), h("div", { class: "input-container" }, h("yoo-form-input", { ref: (el) => (this.scoringInputs[index] = el), forceValueUpdate: true, type: "number", value: scoringInput.score, placeholder: translate('ADDVALUE'), hasIconPrefix: false, disabled: scoringInput.notApplicable, size: "medium", initialCheckboxParams: this.formField.scoringCategory !== ScoringCategory.numberRating
+    return (h("div", { class: "value-container" }, h("div", { class: "value-text" }, translateMulti(scoringInput.valueText).toUpperCase(), scoringInput.tooltip && (h("yoo-tooltip", { content: scoringInput.tooltip }, h("yoo-icon", { color: "stable", name: "help", size: "small" })))), h("div", { class: "input-container" }, h("yoo-form-input", { ref: (el) => (this.scoringInputs[index] = el), forceValueUpdate: true, type: "number", value: scoringInput.score, placeholder: translate('ADDVALUE'), hasIconPrefix: false, disabled: scoringInput.notApplicable, size: "medium", initialCheckboxParams: this.formField.scoringCategory !== ScoringCategory.numberRating
         ? {
           class: 'top-right-help',
           header: 'N/A',

package/dist/collection/components/grid/grid/grid.css

@@ -4067,6 +4067,9 @@ svg:not(:root) {
 :host(.autocomplete) {
   height: 100%;
 }
+:host(.autocomplete) .container-base yoo-loader[size=large] {
+  height: calc(var(--spacing-08, 0.5rem) + var(--icon-size-04, 3rem));
+}
 :host(.autocomplete) .container-base yoo-loader.autocomplete {
   height: 45%;
 }

package/dist/collection/components/grid/grid/grid.js

@@ -2097,7 +2097,7 @@ export class YooGridComponent {
     return (this.showSearch !== false && [
       !isWeb(this.host) && this.shouldRenderToggleSelectAll() && !this.showAutocompleteHeader && h("yoo-button", { class: "select-all", disabled: !this.canSelectAll, shape: "circular", fill: "transparent", rippleType: "unbounded", color: this.isSelectAll ? 'app-color' : 'stable', onClick: () => this.onToggleSelectAll() }, h("yoo-icon", { name: "select-all", color: this.isSelectAll ? 'app-color' : 'stable' })),
       (isWeb(this.host) || this.hideAdvancedFilters || this.showFilters === false) ? null : h("yoo-button", { class: "margin-right filters", color: "light", onClick: () => this.onShowFilterAdvanced(), fill: "transparent", shape: "circular", rippleType: "bounded" }, h("yoo-icon", { name: "filter", color: "stable", slot: "start", size: "medium" }), this.getActiveFiltersCount() > 0 && (h("yoo-badge", { color: "app-color", slot: "end", class: "count floating", text: `${this.getActiveFiltersCount()}` }))),
-      h("yoo-form-input", { ref: (el) => (this.input = el), debounce: 1200, autocapitalize: "none", autocorrect: "off", disabled: this.isSelectAll, class: {
+      h("yoo-form-input", { ref: (el) => (this.input = el), debounce: 1200, autocapitalize: "none", autocorrect: "off", disabled: this.isSelectAll, disableKeyboardResizing: true, class: {
           search: true,
           flex: !isWeb(this.host),
           web: isWeb(this.host),
@@ -4303,7 +4303,7 @@ export class YooGridComponent {
         "mutable": false,
         "complexType": {
           "original": "TIllustration",
-          "resolved": "\"activity\" | \"aisles\" | \"barcode\" | \"battle\" | \"calendar\" | \"campaign\" | \"chart\" | \"chat\" | \"check\" | \"comment\" | \"contact\" | \"courses\" | \"database\" | \"feed\" | \"file\" | \"filter\" | \"folder\" | \"group\" | \"image\" | \"inbox\" | \"journey\" | \"leaderboard\" | \"lock\" | \"map\" | \"mission\" | \"note\" | \"offline\" | \"password\" | \"plugin\" | \"poll\" | \"publish\" | \"questions\" | \"request\" | \"scoring\" | \"search\" | \"security\" | \"settings\" | \"store\" | \"tag\" | \"user\" | \"visit\" | \"workflow\" | \"aclRole\" | \"blog\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"emails\" | \"feeds\" | \"files\" | \"geofilters\" | \"groups\" | \"hierarchy\" | \"htmltemplates\" | \"incentives\" | \"lessons\" | \"locations\" | \"locationtypes\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"plans\" | \"productbatch\" | \"products\" | \"tenants\" | \"translations\" | \"userranks\" | \"users\" | \"photo\" | \"reject\" | \"none\" | \"inventory\" | \"kanban\" | \"knowledgelibrary\" | \"admin\" | \"service\" | \"field\" | \"dashboard\" | \"pharmaone\" | \"score\" | \"team\" | \"todo\" | \"trial\" | \"videocall\" | \"allowcamera\" | \"areamanager\" | \"category\" | \"empty\" | \"error\" | \"faceid\" | \"form\" | \"template\" | \"location\" | \"newsletter\" | \"nodata\" | \"notification\" | \"offlinemode\" | \"requestraised\" | \"robot\" | \"robotfailed\" | \"robotgenerating\" | \"robotsleeping\" | \"role\" | \"storemanager\" | \"touchid\" | \"usertrial\" | \"waiting\" | \"hq\" | \"missionstovalidate\" | \"wiki\" | \"goto\" | \"archived\" | \"allstores\" | \"analytics\" | \"artificialintelligence\" | \"availablestores\" | \"barcodelong\" | \"barcodeold\" | \"communitiestodiscover\" | \"courseqrcode\" | \"createannouncement\" | \"createmission\" | \"createpoll\" | \"createrequest\" | \"customformfield\" | \"enrol\" | \"fielduser\" | \"generic_chart\" | \"geocoding\" | \"magic-link\" | \"new-user\" | \"oneoff\" | \"page\" | \"paperplane\" | \"payments\" | \"pdfauditexport\" | \"pdfclassic\" | \"pdfcontract\" | \"pdfphotoreport\" | \"photosplaceholder\" | \"recurring\" | \"robot2\" | \"robotgenerated\" | \"robotsuccess\" | \"selectedstores\" | \"sending\" | \"sent\" | \"shopping\" | \"subscription\" | \"todoold\" | \"welcomeuser\" | \"generalscoring\" | \"answers\" | \"barcodealert\" | \"briefcase\" | \"emailblocked\" | \"memo\" | \"podium\" | \"widgetcourses\" | \"wikis\" | \"subplans\"",
+          "resolved": "\"activity\" | \"aisles\" | \"barcode\" | \"battle\" | \"calendar\" | \"campaign\" | \"chart\" | \"chat\" | \"check\" | \"comment\" | \"contact\" | \"courses\" | \"database\" | \"feed\" | \"file\" | \"filter\" | \"folder\" | \"group\" | \"image\" | \"inbox\" | \"journey\" | \"leaderboard\" | \"lock\" | \"map\" | \"mission\" | \"note\" | \"offline\" | \"password\" | \"plugin\" | \"poll\" | \"publish\" | \"questions\" | \"request\" | \"scoring\" | \"search\" | \"security\" | \"settings\" | \"store\" | \"tag\" | \"upload\" | \"user\" | \"visit\" | \"workflow\" | \"aclRole\" | \"blog\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"emails\" | \"feeds\" | \"files\" | \"geofilters\" | \"groups\" | \"hierarchy\" | \"htmltemplates\" | \"incentives\" | \"lessons\" | \"locations\" | \"locationtypes\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"plans\" | \"productbatch\" | \"products\" | \"tenants\" | \"translations\" | \"userranks\" | \"users\" | \"photo\" | \"reject\" | \"none\" | \"inventory\" | \"kanban\" | \"knowledgelibrary\" | \"admin\" | \"service\" | \"field\" | \"dashboard\" | \"pharmaone\" | \"score\" | \"team\" | \"todo\" | \"trial\" | \"videocall\" | \"allowcamera\" | \"areamanager\" | \"category\" | \"empty\" | \"error\" | \"faceid\" | \"form\" | \"template\" | \"location\" | \"newsletter\" | \"nodata\" | \"notification\" | \"offlinemode\" | \"requestraised\" | \"robot\" | \"robotfailed\" | \"robotgenerating\" | \"robotsleeping\" | \"role\" | \"storemanager\" | \"touchid\" | \"usertrial\" | \"waiting\" | \"hq\" | \"missionstovalidate\" | \"wiki\" | \"goto\" | \"archived\" | \"allstores\" | \"analytics\" | \"artificialintelligence\" | \"availablestores\" | \"barcodelong\" | \"barcodeold\" | \"communitiestodiscover\" | \"courseqrcode\" | \"createannouncement\" | \"createmission\" | \"createpoll\" | \"createrequest\" | \"customformfield\" | \"enrol\" | \"fielduser\" | \"generalscoring\" | \"generic_chart\" | \"geocoding\" | \"magic-link\" | \"new-user\" | \"oneoff\" | \"page\" | \"paperplane\" | \"payments\" | \"pdfauditexport\" | \"pdfclassic\" | \"pdfcontract\" | \"pdfphotoreport\" | \"photosplaceholder\" | \"recurring\" | \"robot2\" | \"robotgenerated\" | \"robotsuccess\" | \"selectedstores\" | \"sending\" | \"sent\" | \"shopping\" | \"subscription\" | \"todoold\" | \"welcomeuser\" | \"answers\" | \"barcodealert\" | \"briefcase\" | \"emailblocked\" | \"memo\" | \"podium\" | \"subplans\" | \"widgetcourses\" | \"wikis\"",
           "references": {
             "TIllustration": {
               "location": "import",
@@ -6560,7 +6560,7 @@ export class YooGridComponent {
         "mutable": false,
         "complexType": {
           "original": "TEntityMapping",
-          "resolved": "(item: IEntity, entityType: EntityType, displayType: CardType, displaySize?: TSize, useCellOverlay?: boolean) => string | ICardListEntry | ICardMediaEntry",
+          "resolved": "(item: IEntity, entityType: EntityType, displayType: CardType, displaySize?: TSize, useCellOverlay?: boolean) => string | ICardListEntry | ICardListColorEntry | ICardMediaEntry",
           "references": {
             "TEntityMapping": {
               "location": "import",

package/dist/collection/components/layout/layout-two-columns/layout-two-columns.js

@@ -1,4 +1,3 @@
-import { translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 export class YooLayoutTwoColumsComponent {
   constructor() {
@@ -6,7 +5,7 @@ export class YooLayoutTwoColumsComponent {
     this.hideHeader = false;
   }
   renderHeader() {
-    return h("yoo-header", { class: "no-border" }, h("yoo-navbar", { centerTitle: false }, h("yoo-items", { slot: "start" }, h("slot", { name: "top-left" })), h("yoo-truncate", null, " ", translate(this.header), " "), h("yoo-items", { slot: "end", class: "pointer-events" }, h("slot", { name: "top-right" }))));
+    return h("yoo-header", { class: "no-border" }, h("yoo-navbar", { centerTitle: false }, h("yoo-items", { slot: "start" }, h("slot", { name: "top-left" })), h("yoo-breadcrumbs", { showHome: true, homeName: this.header }), h("yoo-items", { slot: "end", class: "pointer-events" }, h("slot", { name: "top-right" }))));
   }
   renderBody() {
     return h("div", { class: "body" }, h("div", { class: "left-part" }, h("slot", { name: "left-part" })), h("div", { class: "right-part" }, h("slot", { name: "right-part" })));

package/dist/collection/feature-communicate/chat/chat/chat.css

@@ -208,7 +208,6 @@ svg:not(:root) {
 :host {
   --typing-username-padding-left: 45px;
   --gradient-background-image: linear-gradient(transparent 60%, var(--dark-80, rgba(0, 0, 0, 0.8))100%);
-  --keyboard-transform: unset;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -334,15 +333,6 @@ svg:not(:root) {
     transform: translateY(0);
   }
 }
-:host .keyboard-spacer {
-  width: 100%;
-  height: 0;
-  transition: height 0.35s cubic-bezier(0.25, 1, 0.3, 1);
-}
-:host .input-bar-container {
-  transform: var(--keyboard-transform);
-  transition: transform 0.35s cubic-bezier(0.25, 1, 0.3, 1);
-}
 :host .delete-mode-header {
   animation: slide-down 0.4s ease;
 }

package/dist/collection/feature-communicate/chat/chat/chat.js

@@ -1,5 +1,5 @@
 import { BroadcastType, MessageType } from '@shared/interfaces';
-import { addKeyboardEventListener, cancelRequestInterval, closeModal, dateFormat, disableKeyboardResize, dispatchCustomEvent, downloadFile, enableKeyboardResize, findParent, floatingIconAnimation, getAsyncExtraData, getFormattedCountDownToDisplay, getSession, getUserDisplayName, isGif, isImage, isIOS, isIphoneX, isNativeMobile, isNotificationMessage, isRichContentMessage, isVideo, isWeb, removeKeyboardEventListeners, requestInterval, showAlert, translate } from '@shared/utils';
+import { cancelRequestInterval, closeModal, dateFormat, dispatchCustomEvent, downloadFile, findParent, floatingIconAnimation, getAsyncExtraData, getFormattedCountDownToDisplay, getSession, getUserDisplayName, isGif, isImage, isIOS, isIphoneX, isNativeMobile, isNotificationMessage, isRichContentMessage, isVideo, isWeb, requestInterval, showAlert, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { getButton } from '@yobi/utils/button.factory';
 import { getDateFormats, parseMediaMessageForSlidesMedia } from '@yobi/utils/helpers/chat-helpers';
@@ -20,7 +20,6 @@ export class YooChatComponent {
     this.showBackgroundVideo = undefined;
     this.deleteModeEnabled = undefined;
     this.canVideoCall = undefined;
-    this.enableKeyboardResizing = undefined;
     this.closeIcon = undefined;
     this.usersTyping = undefined;
     this.isOnline = undefined;
@@ -38,7 +37,6 @@ export class YooChatComponent {
     this.countDownValue = undefined;
     this.showCountdown = undefined;
     this.countDownStartValue = undefined;
-    this.keyboardHeight = undefined;
     this.hideControls = undefined;
     this.showLoader = undefined;
   }
@@ -76,7 +74,6 @@ export class YooChatComponent {
   onInputFocused() {
     var _a;
     this.inputFocused = true;
-    this.scrollBottomOnKeyboradShown = true;
     if (!isNativeMobile()) {
       this.oldestMostRecentMessageToken = null;
       (_a = this.scroll) === null || _a === void 0 ? void 0 : _a.scrollToBottom(250);
@@ -93,12 +90,6 @@ export class YooChatComponent {
       this.preventToggle = false;
     }, 200); // allow reaction click to come through first
   }
-  onKeyboardShown() {
-    if (this.scrollBottomOnKeyboradShown) {
-      this.scrollToBottom();
-      this.scrollBottomOnKeyboradShown = false;
-    }
-  }
   onMediaChatClicked(ev) {
     if (!ev.detail) {
       return;
@@ -164,6 +155,7 @@ export class YooChatComponent {
   }
   async scrollToBottom(scrollBottomOnUpdated) {
     if (scrollBottomOnUpdated && this.scroll) {
+      this.oldestMostRecentMessageToken = null;
       return this.scroll.scrollToBottom(200);
     }
   }
@@ -214,15 +206,11 @@ export class YooChatComponent {
     this.updateChat();
   }
   disconnectedCallback() {
-    if (isNativeMobile()) {
-      removeKeyboardEventListeners();
-    }
     if (this.requestIntervalID) {
       cancelRequestInterval(this.requestIntervalID['value']);
     }
   }
   initChat() {
-    this.initKeyboardListeners();
     this.initMessagesAndScrollToBottom();
     if (this.showBackgroundVideo && !isNativeMobile()) {
       this.playerReady.emit(this.videoElWrapper);
@@ -253,42 +241,6 @@ export class YooChatComponent {
       getAsyncExtraData({ type: 'user-detail', params: { user: this.users[0] } });
     }
   }
-  initKeyboardListeners() {
-    if (isNativeMobile()) {
-      addKeyboardEventListener('keyboardDidShow', () => {
-        setTimeout(() => {
-          var _a;
-          this.oldestMostRecentMessageToken = null;
-          (_a = this.scroll) === null || _a === void 0 ? void 0 : _a.scrollToBottom(400);
-        }, 300);
-      });
-      this.broadcastMode && addKeyboardEventListener('keyboardDidHide', () => {
-        setTimeout(() => {
-          var _a;
-          (_a = this.scroll) === null || _a === void 0 ? void 0 : _a.scrollToBottom(400);
-        }, 300);
-      });
-      if (isIOS()) {
-        addKeyboardEventListener('keyboardWillShow', (ev) => {
-          this.toggleKeyboardResize(true);
-          this.keyboardHeight = ev.keyboardHeight || 0;
-          this.host.style.setProperty('--keyboard-transform', `translateY(-${this.keyboardHeight}px)`);
-        });
-        addKeyboardEventListener('keyboardWillHide', () => {
-          this.toggleKeyboardResize(false);
-          this.keyboardHeight = 0;
-          this.host.style.setProperty('--keyboard-transform', 'translateY(0)');
-        });
-      }
-    }
-  }
-  toggleKeyboardResize(enabled) {
-    if (isIOS()) {
-      this.enableKeyboardResizing
-        ? enabled ? enableKeyboardResize() : disableKeyboardResize()
-        : enabled ? disableKeyboardResize() : enableKeyboardResize();
-    }
-  }
   async refreshMessages() {
     var _a;
     if (this.oldestMostRecentMessageToken) {
@@ -659,7 +611,6 @@ export class YooChatComponent {
           'bg-light': !this.transparent,
           'simple-content hide': true
         }, forceOverscroll: false, scrollEvents: true, ref: (el) => (this.ionContent = el) }, !isWeb(this.host) && h("yoo-ion-refresher", { class: { transparent: this.transparent }, slot: "fixed", onIonRefresh: () => this.onPullToRefresh(), disabled: this.deleteModeEnabled, ref: (el) => (this.refresher = el) }, h("yoo-ion-refresher-content", { pullingText: translate('PULLTOREFRESH') })), h("div", { onClick: () => dispatchCustomEvent('hideBottomDialog', window), class: { 'messages-container': true, 'iphone-x': isIphoneX() } }, this.messages && this.renderMessages(), this.showLoader && h("yoo-loader", { class: "loader transparent" }), this.isSomeoneTyping && this.renderSomeoneIsTyping())),
-      !this.hideInputBar && isIOS() && h("div", { class: "keyboard-spacer", style: { height: `${this.keyboardHeight || 0}px` } }),
       this.hideInputBar ? null : this.deleteModeEnabled ? this.renderDeleteModeFooter() : this.renderInputBar()
     ];
   }
@@ -884,23 +835,6 @@ export class YooChatComponent {
         "attribute": "can-video-call",
         "reflect": false
       },
-      "enableKeyboardResizing": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "enable-keyboard-resizing",
-        "reflect": false
-      },
       "closeIcon": {
         "type": "string",
         "mutable": false,
@@ -1132,7 +1066,6 @@ export class YooChatComponent {
       "countDownValue": {},
       "showCountdown": {},
       "countDownStartValue": {},
-      "keyboardHeight": {},
       "hideControls": {},
       "showLoader": {}
     };
@@ -1580,12 +1513,6 @@ export class YooChatComponent {
         "target": undefined,
         "capture": false,
         "passive": false
-      }, {
-        "name": "keyboardDidShow",
-        "method": "onKeyboardShown",
-        "target": "window",
-        "capture": false,
-        "passive": false
       }, {
         "name": "mediaChatClicked",
         "method": "onMediaChatClicked",

package/dist/collection/feature-learn/learning/podium/assets/podium/leaderboard.svg

@@ -12,84 +12,79 @@
     </defs>
     <g id="main-svg" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="leaderboard">
-            <g id="1st" transform="translate(118.200000, 10.000000)">
+             <g id="1st" transform="translate(118.200000, 10.000000)">
                 <g id="center_avatar_image" transform="translate(0.000000, 0.000000)">
-                    <mask id="mask-first-image" fill="white">
-                        <use xlink:href="#path-2"></use>
-                    </mask>
-                    <use id="Mask" fill="#999999" fill-rule="nonzero" xlink:href="#path-2"></use>
-                    <image id="center_image" mask="url(#mask-first-image)" x="0" y="0" width="56" height="56" xlink:href=""></image>
-                    <circle cx="26" cy="26" r="28" stroke="#5A30F4" stroke-width="1" fill="none">></circle>
+                    <defs>
+                        <clipPath id="cp_center_image" >
+                            <circle cx="26" cy="26" r="26" stroke="#5A30F4" stroke-width="1" fill="none"></circle>
+                        </clipPath>
+                    </defs>
+                    <image id="center_image" clip-path="url(#cp_center_image)" x="0" y="0" width="52" height="52" xlink:href=""></image>
+                    <circle cx="26" cy="26" r="28" stroke="#5A30F4" stroke-width="1" fill="none"></circle>
                 </g>
-                <g id="center_avatar_no_image">
-                    <mask id="mask-first-no-image" fill="white">
-                        <use xlink:href="#path-6"></use>
-                    </mask>
-                    <use id="path-6" fill="#F1F1F1" xlink:href="#path-6"></use>
-                    <text mask="url(#mask-first-no-image)" font-family="Lato-Regular, Lato" font-size="30.24" font-weight="normal" fill="#807F83">
-                        <tspan x="5" y="38">AN</tspan>
+                 <g id="center_avatar_no_image">
+                    <defs>
+                        <clipPath id="cp_center_no_image" >
+                            <circle cx="26" cy="26" r="26" stroke="#5A30F4" stroke-width="1" fill="none"></circle>
+                        </clipPath>
+                    </defs>
+                    <circle cx="26" cy="26" r="28" stroke="#5A30F4" stroke-width="1" fill="#f1f1f1"></circle>
+                    <text x="5" y="38" clip-path="url(#cp_center_no_image)" font-family="Lato-Regular, Lato" font-size="30.24" font-weight="normal" fill="#807F83">
                     </text>
-                     <circle cx="26" cy="26" r="28" stroke="#5A30F4" stroke-width="1" fill="none">></circle>
                 </g>
-                <g id="center_image_text" transform="translate(0.000000, 0.000000)" fill="#000000" font-family="Lato-Regular, Lato" font-size="13" font-weight="normal">
+               <g id="center_image_text" transform="translate(0.000000, 0.000000)" fill="#000000" font-family="Lato-Regular, Lato" font-size="13" font-weight="normal">
                     <g id="Avatar-Name" transform="translate(0.000000, 50.000000)">
-                        <text>
-                            <tspan alignment-baseline="middle" x="0" y="13.8">Name</tspan>
-                        </text>
+                        <text x="0" y="13.8"></text>
                     </g>
                 </g>
             </g>
-            <g id="2nd" transform="translate(32.000000, 36.000000)">
-                  <g id="left_avatar_image">
-                        <mask id="mask-second-image" fill="white">
-                            <use xlink:href="#path-4"></use>
-                        </mask>
-                        <use id="Mask" fill="#999999" fill-rule="nonzero" xlink:href="#path-4"></use>
-                        <image id="left_image" mask="url(#mask-second-image)" x="0" y="0" width="56" height="56" xlink:href=""></image>
-                        <circle cx="26" cy="26" r="28" stroke="#5A30F4" stroke-width="1" fill="none">></circle>
+          <g id="2nd" transform="translate(32.000000, 36.000000)">
+                 <g id="left_avatar_image">
+                    <defs>
+                        <clipPath id="cp_left_image" >
+                            <circle cx="26" cy="26" r="26" stroke="#5A30F4" stroke-width="1" fill="none"></circle>
+                        </clipPath>
+                    </defs>
+                    <image id="left_image" clip-path="url(#cp_left_image)" x="0" y="0" width="52" height="52" xlink:href=""></image>
+                    <circle cx="26" cy="26" r="28" stroke="#5A30F4" stroke-width="1" fill="none"></circle>
                 </g>
                  <g id="left_avatar_no_image">
-                        <mask id="mask-second-no-image" fill="white">
-                            <use xlink:href="#path-6"></use>
-                        </mask>
-                        <use id="path-6" fill="#F1F1F1" xlink:href="#path-6"></use>
-                        <text mask="url(#mask-second-no-image)" font-family="Lato-Regular, Lato" font-size="30.24" font-weight="normal" fill="#807F83">
-                            <tspan x="5" y="38">AN</tspan>
-                        </text>
-                        <circle cx="26" cy="26" r="28" stroke="#5A30F4" stroke-width="1" fill="none">></circle>
+                    <defs>
+                        <clipPath id="cp_left_no_image" >
+                            <circle cx="26" cy="26" r="26" stroke="#5A30F4" stroke-width="1" fill="none"></circle>
+                        </clipPath>
+                    </defs>
+                    <circle cx="26" cy="26" r="28" stroke="#5A30F4" stroke-width="1" fill="#f1f1f1"></circle>
+                    <text x="5" y="38" clip-path="url(#cp_left_no_image)" font-family="Lato-Regular, Lato" font-size="30.24" font-weight="normal" fill="#807F83"></text>
                  </g>
                 <g id="left_image_text" transform="translate(0.000000, 0.000000)" fill="#000000" font-family="Lato-Regular, Lato" font-size="13" font-weight="normal">
                     <g id="Avatar-Name">
-                        <text>
-                            <tspan alignment-baseline="middle" x="0" y="102">Name</tspan>
-                        </text>
+                        <text x="0" y="102"></text>
                     </g>
                 </g>
-            </g>
+           </g>
             <g id="3rd" transform="translate(208.000000, 36.000000)">
                 <g id="right_avatar_image">
-                    <mask id="mask-third-image" fill="white">
-                        <use xlink:href="#path-6"></use>
-                    </mask>
-                    <use id="Mask" fill="#999999" fill-rule="nonzero" xlink:href="#path-6"></use>
-                    <image id="right_image" mask="url(#mask-third-image)" x="0" y="0" width="56" height="56" xlink:href=""></image>
-                    <circle cx="26" cy="26" r="28" stroke="#5A30F4" stroke-width="1" fill="none">></circle>
+                    <defs>
+                        <clipPath id="cp_right_image" >
+                            <circle cx="26" cy="26" r="26" stroke="#5A30F4" stroke-width="1" fill="none"></circle>
+                        </clipPath>
+                    </defs>
+                    <image id="right_image" clip-path="url(#cp_right_image)" x="0" y="0" width="52" height="52" xlink:href=""></image>
+                    <circle cx="26" cy="26" r="28" stroke="#5A30F4" stroke-width="1" fill="none"></circle> 
                 </g>
                 <g id="right_avatar_no_image">
-                    <mask id="mask-third-no-image" fill="white">
-                        <use xlink:href="#path-6"></use>
-                    </mask>
-                    <use id="path-6" fill="#F1F1F1" xlink:href="#path-6"></use>
-                    <text mask="url(#mask-third-no-image)" font-family="Lato-Regular, Lato" font-size="30.24" font-weight="normal" fill="#807F83">
-                        <tspan x="5" y="38">AN</tspan>
-                    </text>
-                    <circle cx="26" cy="26" r="28" stroke="#5A30F4" stroke-width="1" fill="none">></circle>
+                    <defs>
+                        <clipPath id="cp_right_no_image" >
+                            <circle cx="26" cy="26" r="26" stroke="#5A30F4" stroke-width="1" fill="none"></circle>
+                        </clipPath>
+                    </defs>
+                    <circle cx="26" cy="26" r="28" stroke="#5A30F4" stroke-width="1" fill="#f1f1f1"></circle>
+                    <text x="5" y="38" clip-path="url(#cp_right_no_image)" font-family="Lato-Regular, Lato" font-size="30.24" font-weight="normal" fill="#807F83"></text>
                 </g>
                 <g id="right_image_text" transform="translate(0.000000, 0.000000)" fill="#000000" font-family="Lato-Regular, Lato" font-size="13" font-weight="normal">
                     <g id="Avatar-Name">
-                        <text>
-                            <tspan alignment-baseline="middle" x="0" y="13">Name</tspan>
-                        </text>
+                        <text x="0" y="13"></text>
                     </g>
                 </g>
             </g>
@@ -158,10 +153,6 @@
                 <circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" opacity="0.8" cx="15.9551772" cy="15.779392" r="15.34235"></circle>
                 <path d="M15.9551772,31.5444533 C9.57500983,31.5615013 3.81355835,27.7313453 1.36011261,21.8417416 C-1.09333313,15.9521379 0.245001189,9.16440781 4.75041726,4.6468804 C9.25583333,0.129353 16.0399461,-1.22719855 21.936115,1.21042735 C27.8322839,3.64805326 31.677916,9.39920171 31.677916,15.779392 C31.6548294,24.4601089 24.6358008,31.4980058 15.9551772,31.5444533 L15.9551772,31.5444533 Z M15.9551772,0.901901588 C9.91306532,0.884869351 4.45717816,4.51365679 2.13705947,10.0925865 C-0.183059214,15.6715163 1.09071809,22.0989803 5.36315344,26.3714157 C9.6355888,30.643851 16.0630529,31.9176284 21.6419826,29.5975097 C27.2209123,27.277391 30.8496998,21.8215038 30.8326675,15.779392 C30.809391,7.5724499 24.1621192,0.925178091 15.9551772,0.901901588 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
                 <g id="Clipped" transform="translate(5.967011, 5.664430)"></g>
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <use id="Path" fill-opacity="0.1" fill="#000000" xlink:href="#path-1"></use>
                 <path d="M16.8004857,7.62216458 L18.8714916,11.7641764 C19.0253793,12.0560705 19.3067946,12.2593149 19.6322693,12.313627 L24.1969354,12.9053429 C24.5603274,12.9746891 24.8571486,13.2363708 24.9714949,13.5882054 C25.0858411,13.9400399 24.9995765,14.3262246 24.746386,14.59596 L21.4496827,17.8503979 C21.221114,18.084694 21.1258015,18.4182879 21.1960901,18.7379719 L21.9991332,23.2603725 C22.0501201,23.6290645 21.8950929,23.9960691 21.5952289,24.2165572 C21.295365,24.4370454 20.8988309,24.4756007 20.5621087,24.3170082 L16.4623623,22.2037369 C16.1653976,22.0768722 15.8294876,22.0768722 15.5325229,22.2037369 L11.4750419,24.4015391 C11.140363,24.596536 10.7218585,24.5742366 10.409796,24.344779 C10.0977336,24.1153213 9.95167244,23.7224988 10.0380174,23.3449034 L10.7987951,18.8225027 C10.8373349,18.4973422 10.7288652,18.1719332 10.5029371,17.9349287 L7.16396838,14.7227563 C6.91077788,14.4530209 6.82451323,14.0668362 6.93885947,13.7150017 C7.0532057,13.3631671 7.35002692,13.1014853 7.71341893,13.0321392 L12.278085,12.3558924 C12.5934004,12.3021093 12.8620777,12.0966501 12.9965973,11.8064418 L15.0253378,7.66443001 C15.1732355,7.3103538 15.5155822,7.07641067 15.899197,7.06727698 C16.2828117,7.0581433 16.6359043,7.27552836 16.8004857,7.62216458 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
                 <path d="M11.0101222,24.9509896 C10.7134596,24.9649378 10.4237828,24.8582148 10.2070791,24.6551316 C9.75949243,24.3611874 9.52747151,23.8308539 9.61536313,23.302638 L10.3761408,18.7379719 C10.4037271,18.5516379 10.3409485,18.3633022 10.2070791,18.2307867 L6.86811039,15.0186143 C6.46973727,14.6521481 6.31937084,14.0882825 6.48237127,13.5721145 C6.6453717,13.0559464 7.09229979,12.6807002 7.62888807,12.609485 L12.1935542,11.9332381 C12.3807521,11.8953478 12.53815,11.7694294 12.6162084,11.5951147 L14.6449489,7.45310287 C14.8903485,6.97496708 15.3757625,6.66753824 15.9129117,6.65005097 C16.4558398,6.64813816 16.9505434,6.96145038 17.1808745,7.45310287 L17.1808745,7.45310287 L19.2518805,11.5528493 C19.3395496,11.7194823 19.4927215,11.8420198 19.6745347,11.8909727 L24.2392008,12.5249541 C24.7742061,12.5717341 25.2264919,12.9402632 25.3803674,13.4547935 C25.5511772,13.959075 25.4199927,14.5166091 25.0422439,14.891818 L21.7455406,18.1462559 C21.6204003,18.283091 21.5727194,18.4738146 21.6187444,18.653441 L22.4217875,23.2181071 C22.50803,23.7364453 22.2956351,24.2592635 21.8723369,24.5706008 C21.4485872,24.9039311 20.8673412,24.9537522 20.393047,24.697397 L16.2933006,22.5841257 C16.1196648,22.5006377 15.9174858,22.5006377 15.74385,22.5841257 L11.6863691,24.7819279 C11.4726801,24.8776999 11.2437405,24.9349348 11.0101222,24.9509896 Z M15.9129117,7.4953683 L15.9129117,7.4953683 C15.6910981,7.4953683 15.4910396,7.62874065 15.4057266,7.83349172 L13.3769861,11.9755036 C13.1713508,12.3950255 12.7796138,12.6927457 12.3203505,12.7785467 L7.75568435,13.4547935 C7.55028542,13.4832663 7.38290675,13.6339071 7.33303008,13.8351823 C7.24010937,14.0387928 7.2916339,14.2792406 7.45982636,14.4268983 L10.7987951,17.6390708 C11.1264569,17.9572547 11.2833523,18.4122515 11.2214494,18.8647681 L10.4606717,23.4294342 C10.4187795,23.6380536 10.5011071,23.8521054 10.6719988,23.9788848 C10.8474207,24.0979668 11.0731485,24.1140902 11.2637148,24.0211502 L15.3634612,21.823348 C15.7747948,21.6126611 16.2623558,21.6126611 16.6736894,21.823348 L20.7734358,23.9366194 C20.9592081,24.0513754 21.197576,24.0343491 21.3651518,23.8943539 C21.5360436,23.7675745 21.6183711,23.5535228 21.5764789,23.3449034 L20.7734358,18.8225027 C20.7000948,18.363946 20.8401784,17.8970004 21.1538247,17.5545399 L24.450528,14.300102 C24.6187204,14.1524443 24.670245,13.9119966 24.5773243,13.7083861 C24.5221811,13.4935819 24.3338746,13.3395129 24.1124046,13.3279972 L19.5477385,12.6940158 C19.0855318,12.6457552 18.6834724,12.3562724 18.4911028,11.9332381 L16.4200969,7.83349172 C16.3347839,7.62874065 16.1347254,7.4953683 15.9129117,7.4953683 L15.9129117,7.4953683 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
             </g>
@@ -171,10 +162,6 @@
                 <circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" opacity="0.8" cx="15.9551772" cy="15.779392" r="15.34235"></circle>
                 <path d="M15.9551772,31.5444533 C9.57500983,31.5615013 3.81355835,27.7313453 1.36011261,21.8417416 C-1.09333313,15.9521379 0.245001189,9.16440781 4.75041726,4.6468804 C9.25583333,0.129353 16.0399461,-1.22719855 21.936115,1.21042735 C27.8322839,3.64805326 31.677916,9.39920171 31.677916,15.779392 C31.6548294,24.4601089 24.6358008,31.4980058 15.9551772,31.5444533 L15.9551772,31.5444533 Z M15.9551772,0.901901588 C9.91306532,0.884869351 4.45717816,4.51365679 2.13705947,10.0925865 C-0.183059214,15.6715163 1.09071809,22.0989803 5.36315344,26.3714157 C9.6355888,30.643851 16.0630529,31.9176284 21.6419826,29.5975097 C27.2209123,27.277391 30.8496998,21.8215038 30.8326675,15.779392 C30.809391,7.5724499 24.1621192,0.925178091 15.9551772,0.901901588 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
                 <g id="Clipped" transform="translate(5.967011, 5.664430)"></g>
-                <mask id="mask-4" fill="white">
-                    <use xlink:href="#path-3"></use>
-                </mask>
-                <use id="Path" fill-opacity="0.1" fill="#000000" xlink:href="#path-3"></use>
                 <path d="M16.8004857,7.62216458 L18.8714916,11.7641764 C19.0253793,12.0560705 19.3067946,12.2593149 19.6322693,12.313627 L24.1969354,12.9053429 C24.5603274,12.9746891 24.8571486,13.2363708 24.9714949,13.5882054 C25.0858411,13.9400399 24.9995765,14.3262246 24.746386,14.59596 L21.4496827,17.8503979 C21.221114,18.084694 21.1258015,18.4182879 21.1960901,18.7379719 L21.9991332,23.2603725 C22.0501201,23.6290645 21.8950929,23.9960691 21.5952289,24.2165572 C21.295365,24.4370454 20.8988309,24.4756007 20.5621087,24.3170082 L16.4623623,22.2037369 C16.1653976,22.0768722 15.8294876,22.0768722 15.5325229,22.2037369 L11.4750419,24.4015391 C11.140363,24.596536 10.7218585,24.5742366 10.409796,24.344779 C10.0977336,24.1153213 9.95167244,23.7224988 10.0380174,23.3449034 L10.7987951,18.8225027 C10.8373349,18.4973422 10.7288652,18.1719332 10.5029371,17.9349287 L7.16396838,14.7227563 C6.91077788,14.4530209 6.82451323,14.0668362 6.93885947,13.7150017 C7.0532057,13.3631671 7.35002692,13.1014853 7.71341893,13.0321392 L12.278085,12.3558924 C12.5934004,12.3021093 12.8620777,12.0966501 12.9965973,11.8064418 L15.0253378,7.66443001 C15.1732355,7.3103538 15.5155822,7.07641067 15.899197,7.06727698 C16.2828117,7.0581433 16.6359043,7.27552836 16.8004857,7.62216458 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
                 <path d="M11.0101222,24.9509896 C10.7134596,24.9649378 10.4237828,24.8582148 10.2070791,24.6551316 C9.75949243,24.3611874 9.52747151,23.8308539 9.61536313,23.302638 L10.3761408,18.7379719 C10.4037271,18.5516379 10.3409485,18.3633022 10.2070791,18.2307867 L6.86811039,15.0186143 C6.46973727,14.6521481 6.31937084,14.0882825 6.48237127,13.5721145 C6.6453717,13.0559464 7.09229979,12.6807002 7.62888807,12.609485 L12.1935542,11.9332381 C12.3807521,11.8953478 12.53815,11.7694294 12.6162084,11.5951147 L14.6449489,7.45310287 C14.8903485,6.97496708 15.3757625,6.66753824 15.9129117,6.65005097 C16.4558398,6.64813816 16.9505434,6.96145038 17.1808745,7.45310287 L17.1808745,7.45310287 L19.2518805,11.5528493 C19.3395496,11.7194823 19.4927215,11.8420198 19.6745347,11.8909727 L24.2392008,12.5249541 C24.7742061,12.5717341 25.2264919,12.9402632 25.3803674,13.4547935 C25.5511772,13.959075 25.4199927,14.5166091 25.0422439,14.891818 L21.7455406,18.1462559 C21.6204003,18.283091 21.5727194,18.4738146 21.6187444,18.653441 L22.4217875,23.2181071 C22.50803,23.7364453 22.2956351,24.2592635 21.8723369,24.5706008 C21.4485872,24.9039311 20.8673412,24.9537522 20.393047,24.697397 L16.2933006,22.5841257 C16.1196648,22.5006377 15.9174858,22.5006377 15.74385,22.5841257 L11.6863691,24.7819279 C11.4726801,24.8776999 11.2437405,24.9349348 11.0101222,24.9509896 Z M15.9129117,7.4953683 L15.9129117,7.4953683 C15.6910981,7.4953683 15.4910396,7.62874065 15.4057266,7.83349172 L13.3769861,11.9755036 C13.1713508,12.3950255 12.7796138,12.6927457 12.3203505,12.7785467 L7.75568435,13.4547935 C7.55028542,13.4832663 7.38290675,13.6339071 7.33303008,13.8351823 C7.24010937,14.0387928 7.2916339,14.2792406 7.45982636,14.4268983 L10.7987951,17.6390708 C11.1264569,17.9572547 11.2833523,18.4122515 11.2214494,18.8647681 L10.4606717,23.4294342 C10.4187795,23.6380536 10.5011071,23.8521054 10.6719988,23.9788848 C10.8474207,24.0979668 11.0731485,24.1140902 11.2637148,24.0211502 L15.3634612,21.823348 C15.7747948,21.6126611 16.2623558,21.6126611 16.6736894,21.823348 L20.7734358,23.9366194 C20.9592081,24.0513754 21.197576,24.0343491 21.3651518,23.8943539 C21.5360436,23.7675745 21.6183711,23.5535228 21.5764789,23.3449034 L20.7734358,18.8225027 C20.7000948,18.363946 20.8401784,17.8970004 21.1538247,17.5545399 L24.450528,14.300102 C24.6187204,14.1524443 24.670245,13.9119966 24.5773243,13.7083861 C24.5221811,13.4935819 24.3338746,13.3395129 24.1124046,13.3279972 L19.5477385,12.6940158 C19.0855318,12.6457552 18.6834724,12.3562724 18.4911028,11.9332381 L16.4200969,7.83349172 C16.3347839,7.62874065 16.1347254,7.4953683 15.9129117,7.4953683 L15.9129117,7.4953683 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
             </g>
@@ -185,17 +172,13 @@
                 <path d="M19.5001825,39 C11.6085482,39 4.49497348,34.2433416 1.47988279,26.9503762 C-1.53520789,19.6574108 0.142705826,11.2661485 5.73041916,5.6934039 C11.3181325,0.120659288 19.7138513,-1.53472508 26.9986809,1.49993948 C34.2835104,4.53460405 39.0210165,11.6609376 38.9999299,19.5525602 C38.9710417,30.3015355 30.2491738,39 19.5001825,39 Z M19.5001825,1.09840356 C9.30825473,1.09840356 1.04606479,9.36061091 1.04606479,19.5525602 C1.04606479,29.7445094 9.30825473,38.0067168 19.5001825,38.0067168 C29.6921103,38.0067168 37.9543002,29.7445094 37.9543002,19.5525602 C37.9255835,9.3725295 29.6801917,1.12712032 19.5001825,1.09840356 L19.5001825,1.09840356 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
             </g>
             <g id="Clipped" transform="translate(120.000000, 7.000000)">
-                <mask id="mask-6" fill="white">
-                    <use xlink:href="#path-5"></use>
-                </mask>
-                <use id="Path" fill-opacity="0.1" fill="#000000" xlink:href="#path-5"></use>
                 <path d="M12.5388973,1.66768009 L15.1589456,6.64915541 C15.3392777,7.0118012 15.7025869,7.26124112 16.1214123,7.30996336 L21.8962126,8.07243408 C22.3802367,8.11985583 22.7893366,8.43411442 22.9397341,8.87403672 C23.0901316,9.31395903 22.953543,9.79681347 22.5913274,10.1056893 L18.4206383,13.9688743 C18.1397213,14.2551452 18.0203908,14.6521886 18.0998161,15.0363333 L19.1157532,20.5261224 C19.1802572,20.9695373 18.9841308,21.4109229 18.6047703,21.6760975 C18.2254097,21.9412721 17.7237508,21.9876414 17.2977605,21.7969069 L12.1111343,19.2045065 C11.7335013,19.0393297 11.2950988,19.0582736 10.9347861,19.2553379 L5.8016303,21.8477383 C5.38737276,22.0711688 4.8746534,22.0471211 4.48554287,21.7860109 C4.09643235,21.5249006 3.90090085,21.0736807 3.98363762,20.6277851 L4.94610433,15.137996 C4.98755783,14.7476754 4.85132534,14.3591489 4.57181172,14.070537 L0.347652248,10.2073521 C0.0273386656,9.88294923 -0.081795522,9.41849637 0.0628649353,8.99535531 C0.207525393,8.57221426 0.583036596,8.25749737 1.0427671,8.17409684 L6.81756739,7.36079474 C7.21647565,7.29611135 7.55638174,7.04901173 7.72656373,6.69998679 L10.2931416,1.71851147 C10.4802484,1.29267448 10.9133543,1.01131797 11.3986688,1.00033316 C11.8839833,0.989348349 12.3306839,1.25079094 12.5388973,1.66768009 Z" style="fill: var(--app-color)" fill="#5A30F4"></path>
                 <path d="M5.52876086,22.9996256 C5.18001,23.0073602 4.83854925,22.8950783 4.55731386,22.6801863 C4.00741624,22.2923013 3.72721944,21.6045671 3.84151081,20.9232705 L4.76182902,15.1733641 C4.79520033,14.9386475 4.71925665,14.7014094 4.55731386,14.5344856 L0.518139481,10.541495 C0.0728708982,10.0625003 -0.101391342,9.37699439 0.0579803745,8.73133933 C0.250471167,8.07847403 0.788851626,7.60091742 1.43845769,7.50682223 L6.96036697,6.60174437 C7.17969259,6.57373792 7.37131234,6.43406577 7.47165487,6.22906526 L9.92583677,0.958317732 C10.2279563,0.368454076 10.8176964,0 11.4597005,0 C12.1017045,0 12.6914446,0.368454076 12.9935641,0.958317732 L12.9935641,0.958317732 L15.4988748,6.17582538 C15.6055845,6.37495082 15.7939591,6.51225755 16.0101627,6.5485045 L21.532072,7.34710261 C22.1687342,7.4323051 22.7038196,7.88630271 22.9125493,8.51837984 C23.1158357,9.17056665 22.9587231,9.8863153 22.503519,10.3817754 L18.5154734,14.4280058 C18.3718712,14.6046235 18.3151978,14.8406775 18.3620871,15.0668843 L19.3335341,20.8167907 C19.4236234,21.4833333 19.1713231,22.150232 18.6688598,22.5737066 C18.1372666,22.9513701 17.4488002,22.9923354 16.8793522,22.6801863 L11.9198596,20.0181926 C11.7098111,19.9130265 11.4652338,19.9130265 11.2551853,20.0181926 L6.3468215,22.7866661 C6.09668771,22.9308613 5.81463306,23.0042864 5.52876086,22.9996256 Z M11.4532504,1.00257361 L11.4532504,1.00257361 C11.1928491,0.978205117 10.9461811,1.1286834 10.8382875,1.37772781 L8.3784362,6.6298867 C8.14305195,7.17366188 7.66126917,7.55658274 7.09726363,7.6481624 L1.56259812,8.50565773 C1.30567419,8.56300715 1.10496751,8.77290403 1.05012909,9.0415923 C0.94548599,9.28353669 1.00843006,9.56878366 1.2038698,9.73830726 L5.25237513,13.8114101 C5.63627177,14.2236384 5.82418896,14.7935516 5.76484416,15.3656203 L4.84239991,21.1537138 C4.79160554,21.4182476 4.89142788,21.6896698 5.09863442,21.8504288 C5.30182035,22.0279456 5.59084182,22.0495353 5.81609106,21.9040222 L10.7870406,19.1707559 C11.277502,18.8866204 11.8687425,18.8666748 12.3756946,19.1171624 L17.3466442,21.8504288 C17.5777061,21.9682787 17.8514016,21.9478339 18.0641008,21.7968353 C18.2703484,21.6116968 18.3677734,21.326416 18.3203354,21.0465269 L17.3466442,15.3120269 C17.2577181,14.7305672 17.4275697,14.1384704 17.8078663,13.7042231 L21.8051248,9.57752688 C21.9810365,9.39334875 22.0440946,9.12197506 21.9686212,8.87391159 C21.8931478,8.62584813 21.6917337,8.44247787 21.4463964,8.39847081 L15.860484,7.59456894 C15.3167921,7.48998667 14.8465972,7.13594482 14.5793114,6.6298867 L12.0682132,1.37772781 C11.9603196,1.1286834 11.7136516,0.978205117 11.4532504,1.00257361 L11.4532504,1.00257361 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
                 <g id="center_points_container" transform="translate(8.00000, 52.000000)">
                     <g id="center_points" transform="translate(0.000000, 0.000000)">
                         <g id="0">
                             <g id="Clipped">
-                                <text id="0" fill="#FFFFFF" mask="url(#mask-12)" font-family="Lato-Regular, Lato" font-size="15" font-weight="normal">
+                                <text id="0" fill="#FFFFFF" font-family="Lato-Regular, Lato" font-size="15" font-weight="normal">
                                     <tspan alignment-baseline="middle" x="0" y="0">0</tspan>
                                 </text>
                             </g>

package/dist/collection/feature-learn/learning/podium/podium.css

@@ -206,22 +206,17 @@ svg:not(:root) {
 }
 
 :host {
-  --podium-height: 30rem;
-  display: block;
-}
-:host .podium-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 100%;
 }
-:host .podium-container yoo-icon {
-  margin-right: 0.75rem;
+:host svg {
+  width: auto !important;
+  height: 100%;
 }
-:host .podium-container yoo-img {
-  width: 18.75rem;
-  height: var(--podium-height);
-  overflow: inherit;
+:host yoo-icon {
+  margin-right: var(--spacing-12, 0.75rem);
 }
 
 :host([hidden]) {