@nectary/assets 3.2.1 → 3.3.1

package/icons-channel/apple-business-chat/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "../../utils/element.js";
 import { createIconClass } from "../create-icon-class.js";
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><linearGradient id="apple-business-chat-gradient" x1="24" x2="24" y1="48.13" y2=".13" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0cbd2a"/><stop offset="1" stop-color="#5bf675"/></linearGradient><circle id="b" cx="24" cy="24" r="24" fill="url(#apple-business-chat-gradient)" overflow="visible"/><path fill="#fff" d="M24 10c-8.7 0-15.8 5.9-15.8 13.1 0 4.6 2.9 8.9 7.7 11.3-.6 1.4-1.6 2.7-2.8 3.9 2.3-.4 4.5-1.3 6.4-2.5 1.4.4 3 .5 4.5.5 8.7 0 15.8-5.9 15.8-13.1C39.8 15.8 32.7 10 24 10z"/></svg>';
+const templateHTML = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-comp-icon-channel-color-apple-business-chat-bg,linear-gradient(0deg,#0cbd2a 0,#5bf675 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-apple-business-chat-layera,#FFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" d="M24 37.1913C32.8366 37.1913 40 31.2853 40 23.9999C40 16.7146 32.8366 10.8086 24 10.8086C15.1634 10.8086 8 16.7146 8 23.9999C8 25.4762 8.27034 27.7368 9.33291 29.5527C11.3463 32.9934 12.1576 34.6161 9.68839 36.8115C9.60626 37.1058 9.66126 37.1953 9.98146 37.1913C12.327 36.9617 13.523 36.566 15.3058 35.0757C17.8089 36.414 20.7944 37.1913 24 37.1913Z"/></svg>';
 const IconChannelAppleBusinessChat = createIconClass(templateHTML);
 defineCustomElement("sinch-icon-channel-apple-business-chat", IconChannelAppleBusinessChat);
 export {

package/icons-channel/apple-business-chat-square/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "../../utils/element.js";
 import { createIconClass } from "../create-icon-class.js";
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path d="M7.7 0h32.5c4.2 0 7.6 3.414 7.6 7.632v32.636c0 4.217-3.4 7.632-7.6 7.632H7.7c-4.2 0-7.6-3.415-7.6-7.632V7.632C.1 3.414 3.5 0 7.7 0Z" fill="url(#apple-business-chat-square-gradient)"/><path d="M24.4 7.531c-9.7 0-17.5 6.528-17.5 14.662 0 5.12 3.2 9.94 8.5 12.552-.7 1.506-1.7 3.012-3.1 4.318 2.6-.502 5-1.406 7.1-2.812 1.6.402 3.3.602 5 .602 9.7 0 17.5-6.527 17.5-14.66C42 14.058 34.1 7.53 24.4 7.53Z" fill="#fff"/><defs><linearGradient id="apple-business-chat-square-gradient" x1="23.95" y1="48.25" x2="23.95" y2=".35" gradientUnits="userSpaceOnUse"><stop stop-color="#0CBD2A"/><stop offset="1" stop-color="#5BF675"/></linearGradient></defs></svg>';
+const templateHTML = '<style>:host{background:var(--sinch-comp-icon-channel-color-apple-business-chat-bg,linear-gradient(0deg,#0cbd2a 0,#5bf675 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-apple-business-chat-layera,#FFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" d="M24 37.1913C32.8366 37.1913 40 31.2853 40 23.9999C40 16.7146 32.8366 10.8086 24 10.8086C15.1634 10.8086 8 16.7146 8 23.9999C8 25.4762 8.27034 27.7368 9.33291 29.5527C11.3463 32.9934 12.1576 34.6161 9.68839 36.8115C9.60626 37.1058 9.66126 37.1953 9.98146 37.1913C12.327 36.9617 13.523 36.566 15.3058 35.0757C17.8089 36.414 20.7944 37.1913 24 37.1913Z"/></svg>';
 const IconChannelAppleBusinessChatSquare = createIconClass(templateHTML);
 defineCustomElement("sinch-icon-channel-apple-business-chat-square", IconChannelAppleBusinessChatSquare);
 export {

package/icons-channel/create-icon-class.js

@@ -1,9 +1,7 @@
 import { updateAttribute, getIntegerAttribute, attrValueToPixels } from "../utils/dom.js";
 import { NectaryElement } from "../utils/element.js";
-const iconStylesHtml = "<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none;height:var(--sinch-global-size-icon,48px)}</style>";
+const iconStylesHtml = "<style>:host{--sinch-comp-icon-channel-shape-radius:calc(var(--sinch-comp-icon-channel-size, 48px) / 4);display:inline-block;vertical-align:middle;border-radius:var(--sinch-comp-icon-channel-shape-radius,12px)}svg{display:block;pointer-events:none;height:var(--sinch-comp-icon-channel-size,48px)}</style>";
 const DEFAULT_SIZE = 48;
-const MIN_SIZE = 4;
-const MAX_SIZE = 256;
 const createIconClass = (templateHTML) => {
   const template = document.createElement("template");
   template.innerHTML = iconStylesHtml + templateHTML;
@@ -30,7 +28,7 @@ const createIconClass = (templateHTML) => {
     attributeChangedCallback(name, _, newVal) {
       switch (name) {
         case "size": {
-          this.$svg.style.height = attrValueToPixels(newVal, { min: MIN_SIZE, max: MAX_SIZE });
+          this.style.setProperty("--sinch-comp-icon-channel-size", attrValueToPixels(newVal));
           break;
         }
       }

package/icons-channel/facebook/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "../../utils/element.js";
 import { createIconClass } from "../create-icon-class.js";
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path d="M24 49c13.255 0 24-10.745 24-24S37.255 1 24 1 0 11.745 0 25s10.745 24 24 24Z" fill="#1877F2"/><path d="M33.346 31.938 34.41 25h-6.656v-4.502c0-1.898.93-3.748 3.91-3.748h3.027v-5.906s-2.746-.469-5.372-.469c-5.482 0-9.065 3.322-9.065 9.337V25H14.16v6.938h6.094v16.77a24.168 24.168 0 0 0 7.5 0v-16.77h5.592Z" fill="#fff"/></svg>';
+const templateHTML = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-comp-icon-channel-color-facebook-bg,linear-gradient(180deg,#1877f2 0,#1877f2 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-facebook-chat-layera,#FFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" d="M33.3459 30.9375L34.41 24H27.7538V19.498C27.7538 17.6 28.6835 15.75 31.6649 15.75H34.6913V9.84375C34.6913 9.84375 31.9447 9.375 29.3189 9.375C23.8368 9.375 20.2538 12.6975 20.2538 18.7125V24H14.16V30.9375H20.2538V48C21.4899 48 22.728 48 24.0038 48C25.2795 48 26.4959 48 27.7538 48V30.9375H33.3459Z"/></svg>';
 const IconChannelFacebook = createIconClass(templateHTML);
 defineCustomElement("sinch-icon-channel-facebook", IconChannelFacebook);
 export {

package/icons-channel/facebook-messenger/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "../../utils/element.js";
 import { createIconClass } from "../create-icon-class.js";
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><clipPath id="c"><path d="M24 48c13.3 0 24-10.7 24-24S37.3 0 24 0 0 10.7 0 24s10.7 24 24 24z" overflow="visible"/></clipPath><radialGradient id="b" cx="-607.428" cy="528.408" r="1" gradientTransform="matrix(52.1753 0 0 -52.0245 31702.027 27537.644)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#09f"/><stop offset=".61" stop-color="#a033ff"/><stop offset=".935" stop-color="#ff5280"/><stop offset="1" stop-color="#ff7061"/></radialGradient><path fill="url(#b)" d="M8.1 0H40c4.4 0 8 3.6 8 8v31.8c0 4.4-3.6 8-8 8H8.1c-4.4 0-8-3.6-8-8V8c0-4.4 3.5-8 8-8z" clip-path="url(#c)"/><path fill="#fff" d="M24 9C15.5 9 8.8 15.1 8.8 23.5c0 4.4 1.8 8.1 4.8 10.7.2.2.4.5.4.9l.1 2.7c0 .8.9 1.4 1.7 1.1l3-1.3c.3-.1.5-.1.8-.1 1.4.3 2.9.5 4.4.5 8.5 0 15.2-6.2 15.2-14.5S32.5 9 24 9z"/><radialGradient id="d" cx="-595.366" cy="495.039" r="1" gradientTransform="matrix(20.1092 0 0 -10.6522 11990.652 5302.023)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#09f"/><stop offset=".61" stop-color="#a033ff"/><stop offset=".935" stop-color="#ff5280"/><stop offset="1" stop-color="#ff7061"/></radialGradient><path fill="url(#d)" d="m14.9 27.7 4.5-7c.7-1.1 2.2-1.4 3.3-.6l3.5 2.6c.3.2.8.2 1.1 0l4.8-3.6c.6-.5 1.5.3 1 .9l-4.5 7c-.7 1.1-2.2 1.4-3.3.6L21.8 25c-.3-.2-.8-.2-1.1 0l-4.8 3.6c-.6.5-1.4-.2-1-.9z"/></svg>';
+const templateHTML = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-comp-icon-channel-color-facebook-messenger-bg,linear-gradient(45deg,#09f 0,#a033ff 45%,#ff5280 82%,#ff7061 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-facebook-messenger-layera,#FFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M9.09998 23.548C9.09998 15.2421 15.6772 9.03766 24.1478 9.03766C32.7181 9.03766 39.2953 15.2421 39.3949 23.6481C39.3949 31.954 32.7181 38.1584 24.2474 38.1584C22.7526 38.1584 21.2578 37.9583 19.8626 37.558C19.5637 37.558 19.3644 37.558 19.0654 37.6581L16.0758 38.959C15.2785 39.2592 14.3817 38.6588 14.3817 37.8582L14.282 35.1563C14.282 34.756 14.0827 34.4558 13.8834 34.2556C10.8938 31.6538 9.09998 27.9511 9.09998 23.548ZM19.5637 20.846L15.0792 27.851C14.6806 28.4515 15.4779 29.252 16.0758 28.7517L20.8592 25.1491C21.1582 24.949 21.6564 24.949 21.9554 25.1491L25.4433 27.751C26.5395 28.5515 28.0343 28.2513 28.7319 27.1505L33.2163 20.1455C33.7146 19.5451 32.8177 18.7446 32.2198 19.2449L27.4364 22.8475C27.1374 23.0476 26.6391 23.0476 26.3402 22.8475L22.8523 20.2456C21.7561 19.4451 20.2613 19.7453 19.5637 20.846Z"/></svg>';
 const IconChannelFacebookMessenger = createIconClass(templateHTML);
 defineCustomElement("sinch-icon-channel-facebook-messenger", IconChannelFacebookMessenger);
 export {

package/icons-channel/facebook-messenger-square/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "../../utils/element.js";
 import { createIconClass } from "../create-icon-class.js";
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path d="M8.1 0H40c4.4 0 8 3.615 8 8.033v31.934C48 44.385 44.4 48 40 48H8.1c-4.4 0-8-3.615-8-8.033V8.033C.1 3.615 3.6 0 8.1 0Z" fill="url(#b)"/><path d="M24.2 9.038c-8.5 0-15.1 6.226-15.1 14.56 0 4.419 1.8 8.134 4.8 10.745.2.2.4.502.4.904l.1 2.711c0 .803.9 1.406 1.7 1.105l3-1.306c.3-.1.5-.1.8-.1 1.4.402 2.9.602 4.4.602 8.5 0 15.2-6.226 15.2-14.56-.1-8.436-6.7-14.661-15.3-14.661Z" fill="#fff"/><path d="m15.1 27.916 4.5-7.029a2.29 2.29 0 0 1 3.3-.602l3.5 2.61c.3.201.8.201 1.1 0l4.8-3.615c.6-.502 1.5.302 1 .904l-4.5 7.03a2.29 2.29 0 0 1-3.3.602L22 25.205c-.3-.2-.8-.2-1.1 0l-4.8 3.615c-.6.502-1.4-.301-1-.904Z" fill="url(#c)"/><defs><radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(52.1753 0 0 52.2422 9.289 47.733)"><stop stop-color="#09F"/><stop offset=".61" stop-color="#A033FF"/><stop offset=".935" stop-color="#FF5280"/><stop offset="1" stop-color="#FF7061"/></radialGradient><radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(20.1092 0 0 10.6968 18.56 28.942)"><stop stop-color="#09F"/><stop offset=".61" stop-color="#A033FF"/><stop offset=".935" stop-color="#FF5280"/><stop offset="1" stop-color="#FF7061"/></radialGradient></defs></svg>';
+const templateHTML = '<style>:host{background:var(--sinch-comp-icon-channel-color-facebook-messenger-bg,linear-gradient(45deg,#09f 0,#a033ff 45%,#ff5280 82%,#ff7061 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-facebook-messenger-layera,#FFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M9.09998 23.548C9.09998 15.2421 15.6772 9.03766 24.1478 9.03766C32.7181 9.03766 39.2953 15.2421 39.3949 23.6481C39.3949 31.954 32.7181 38.1584 24.2474 38.1584C22.7526 38.1584 21.2578 37.9583 19.8626 37.558C19.5637 37.558 19.3644 37.558 19.0654 37.6581L16.0758 38.959C15.2785 39.2592 14.3817 38.6588 14.3817 37.8582L14.282 35.1563C14.282 34.756 14.0827 34.4558 13.8834 34.2556C10.8938 31.6538 9.09998 27.9511 9.09998 23.548ZM19.5637 20.846L15.0792 27.851C14.6806 28.4515 15.4779 29.252 16.0758 28.7517L20.8592 25.1491C21.1582 24.949 21.6564 24.949 21.9554 25.1491L25.4433 27.751C26.5395 28.5515 28.0343 28.2513 28.7319 27.1505L33.2163 20.1455C33.7146 19.5451 32.8177 18.7446 32.2198 19.2449L27.4364 22.8475C27.1374 23.0476 26.6391 23.0476 26.3402 22.8475L22.8523 20.2456C21.7561 19.4451 20.2613 19.7453 19.5637 20.846Z"/></svg>';
 const IconChannelFacebookMessengerSquare = createIconClass(templateHTML);
 defineCustomElement("sinch-icon-channel-facebook-messenger-square", IconChannelFacebookMessengerSquare);
 export {

package/icons-channel/facebook-square/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "../../utils/element.js";
 import { createIconClass } from "../create-icon-class.js";
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path d="M7.648.96h32.704A7.644 7.644 0 0 1 48 8.61v32.704a7.644 7.644 0 0 1-7.648 7.648H7.648A7.644 7.644 0 0 1 0 41.313V8.609A7.644 7.644 0 0 1 7.648.96Z" fill="#1877F2"/><path d="M33.346 31.938 34.41 25h-6.656v-4.502c0-1.898.93-3.748 3.91-3.748h3.027v-5.906s-2.746-.469-5.372-.469c-5.482 0-9.065 3.322-9.065 9.337V25H14.16v6.938h6.094V49h7.5V31.937h5.592Z" fill="#fff"/></svg>';
+const templateHTML = '<style>:host{background:var(--sinch-comp-icon-channel-color-facebook-bg,linear-gradient(180deg,#1877f2 0,#1877f2 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-facebook-chat-layera,#FFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" d="M33.3459 30.9375L34.41 24H27.7538V19.498C27.7538 17.6 28.6835 15.75 31.6649 15.75H34.6913V9.84375C34.6913 9.84375 31.9447 9.375 29.3189 9.375C23.8368 9.375 20.2538 12.6975 20.2538 18.7125V24H14.16V30.9375H20.2538V48C21.4899 48 22.728 48 24.0038 48C25.2795 48 26.4959 48 27.7538 48V30.9375H33.3459Z"/></svg>';
 const IconChannelFacebookSquare = createIconClass(templateHTML);
 defineCustomElement("sinch-icon-channel-facebook-square", IconChannelFacebookSquare);
 export {

package/icons-channel/google-business/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "../../utils/element.js";
 import { createIconClass } from "../create-icon-class.js";
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><circle cx="24" cy="24" r="24" fill="#fff"/><path fill="#4285F4" fill-rule="evenodd" d="M35.76 24.273c0-.851-.076-1.67-.218-2.455H24.24v4.642h6.458a5.52 5.52 0 0 1-2.394 3.622v3.01h3.878c2.269-2.088 3.578-5.165 3.578-8.82Z" clip-rule="evenodd"/><path fill="#34A853" fill-rule="evenodd" d="M24.24 36c3.24 0 5.956-1.075 7.942-2.907l-3.878-3.011c-1.075.72-2.45 1.145-4.064 1.145-3.125 0-5.77-2.11-6.715-4.947h-4.009v3.11A11.995 11.995 0 0 0 24.24 36Z" clip-rule="evenodd"/><path fill="#FBBC05" fill-rule="evenodd" d="M17.525 26.28A7.213 7.213 0 0 1 17.15 24c0-.79.136-1.56.376-2.28v-3.11h-4.009A11.994 11.994 0 0 0 12.24 24c0 1.936.464 3.77 1.276 5.39l4.01-3.11Z" clip-rule="evenodd"/><path fill="#EA4335" fill-rule="evenodd" d="M24.24 16.773c1.762 0 3.344.605 4.587 1.794l3.442-3.441C30.191 13.189 27.475 12 24.24 12c-4.69 0-8.75 2.69-10.724 6.61l4.01 3.11c.943-2.836 3.588-4.947 6.714-4.947Z" clip-rule="evenodd"/></svg>';
+const templateHTML = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-icon-channel-color-google-business-bg,linear-gradient(180deg,#fff 0,#fff 100%))}#shape-a{fill:var(--comp-icon-channel-color-google-business-layera,#EA4335)}#shape-b{fill:var(--comp-icon-channel-color-google-business-layerb,#FBBC05)}#shape-c{fill:var(--comp-icon-channel-color-google-business-layerc,#34A853)}#shape-d{fill:var(--comp-icon-channel-color-google-business-layerd,#4285F4)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-d" fill-rule="evenodd" clip-rule="evenodd" d="M35.76 24.2727C35.76 23.4218 35.6836 22.6036 35.5418 21.8182H24.24V26.46H30.6982C30.42 27.96 29.5745 29.2309 28.3036 30.0818L32.1818 33.0927C34.4509 31.0036 35.76 27.9273 35.76 24.2727Z"/><path id="shape-c" fill-rule="evenodd" clip-rule="evenodd" d="M24.24 36C27.48 36 30.1964 34.9255 32.1818 33.0927L28.3036 30.0818C27.2291 30.8018 25.8545 31.2273 24.24 31.2273C21.1145 31.2273 18.4691 29.1164 17.5254 26.28L13.5164 29.3891C15.4909 33.3109 19.5491 36 24.24 36Z"/><path id="shape-b" fill-rule="evenodd" clip-rule="evenodd" d="M17.5254 26.28C17.2854 25.56 17.1491 24.7909 17.1491 24C17.1491 23.2091 17.2854 22.44 17.5254 21.72L13.5164 18.6109C12.7036 20.2309 12.24 22.0636 12.24 24C12.24 25.9364 12.7036 27.7691 13.5164 29.3891L17.5254 26.28Z"/><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M24.24 16.7727C26.0018 16.7727 27.5836 17.3782 28.8273 18.5673L32.2691 15.1255C30.1909 13.1891 27.4745 12 24.24 12C19.5491 12 15.4909 14.6891 13.5164 18.6109L17.5254 21.72C18.4691 18.8836 21.1145 16.7727 24.24 16.7727Z"/></svg>';
 const IconChannelGoogleBusiness = createIconClass(templateHTML);
 defineCustomElement("sinch-icon-channel-google-business", IconChannelGoogleBusiness);
 export {

package/icons-channel/google-business-square/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "../../utils/element.js";
 import { createIconClass } from "../create-icon-class.js";
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path fill="#fff" d="M8.1 0H40c4.4 0 8 3.615 8 8.033v31.934C48 44.385 44.4 48 40 48H8.1c-4.4 0-8-3.615-8-8.033V8.033C.1 3.615 3.7 0 8.1 0Z"/><path fill="#4285F4" fill-rule="evenodd" d="M35.76 24.273c0-.851-.076-1.67-.218-2.455H24.24v4.642h6.458a5.52 5.52 0 0 1-2.394 3.622v3.01h3.878c2.269-2.088 3.578-5.165 3.578-8.82Z" clip-rule="evenodd"/><path fill="#34A853" fill-rule="evenodd" d="M24.24 36c3.24 0 5.956-1.075 7.942-2.907l-3.878-3.011c-1.075.72-2.45 1.145-4.064 1.145-3.125 0-5.77-2.11-6.715-4.947h-4.009v3.11A11.995 11.995 0 0 0 24.24 36Z" clip-rule="evenodd"/><path fill="#FBBC05" fill-rule="evenodd" d="M17.525 26.28A7.213 7.213 0 0 1 17.15 24c0-.79.136-1.56.376-2.28v-3.11h-4.009A11.994 11.994 0 0 0 12.24 24c0 1.936.464 3.77 1.276 5.39l4.01-3.11Z" clip-rule="evenodd"/><path fill="#EA4335" fill-rule="evenodd" d="M24.24 16.773c1.762 0 3.344.605 4.587 1.794l3.442-3.441C30.191 13.189 27.475 12 24.24 12c-4.69 0-8.75 2.69-10.724 6.61l4.01 3.11c.943-2.836 3.588-4.947 6.714-4.947Z" clip-rule="evenodd"/></svg>';
+const templateHTML = '<style>:host{background:var(--sinch-icon-channel-color-google-business-bg,linear-gradient(180deg,#fff 0,#fff 100%))}#shape-a{fill:var(--comp-icon-channel-color-google-business-layera,#EA4335)}#shape-b{fill:var(--comp-icon-channel-color-google-business-layerb,#FBBC05)}#shape-c{fill:var(--comp-icon-channel-color-google-business-layerc,#34A853)}#shape-d{fill:var(--comp-icon-channel-color-google-business-layerd,#4285F4)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-d" fill-rule="evenodd" clip-rule="evenodd" d="M35.76 24.2727C35.76 23.4218 35.6836 22.6036 35.5418 21.8182H24.24V26.46H30.6982C30.42 27.96 29.5745 29.2309 28.3036 30.0818L32.1818 33.0927C34.4509 31.0036 35.76 27.9273 35.76 24.2727Z"/><path id="shape-c" fill-rule="evenodd" clip-rule="evenodd" d="M24.24 36C27.48 36 30.1964 34.9255 32.1818 33.0927L28.3036 30.0818C27.2291 30.8018 25.8545 31.2273 24.24 31.2273C21.1145 31.2273 18.4691 29.1164 17.5254 26.28L13.5164 29.3891C15.4909 33.3109 19.5491 36 24.24 36Z"/><path id="shape-b" fill-rule="evenodd" clip-rule="evenodd" d="M17.5254 26.28C17.2854 25.56 17.1491 24.7909 17.1491 24C17.1491 23.2091 17.2854 22.44 17.5254 21.72L13.5164 18.6109C12.7036 20.2309 12.24 22.0636 12.24 24C12.24 25.9364 12.7036 27.7691 13.5164 29.3891L17.5254 26.28Z"/><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M24.24 16.7727C26.0018 16.7727 27.5836 17.3782 28.8273 18.5673L32.2691 15.1255C30.1909 13.1891 27.4745 12 24.24 12C19.5491 12 15.4909 14.6891 13.5164 18.6109L17.5254 21.72C18.4691 18.8836 21.1145 16.7727 24.24 16.7727Z"/></svg>';
 const IconChannelGoogleBusinessSquare = createIconClass(templateHTML);
 defineCustomElement("sinch-icon-channel-google-business-square", IconChannelGoogleBusinessSquare);
 export {

package/icons-channel/instagram/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "../../utils/element.js";
 import { createIconClass } from "../create-icon-class.js";
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><clipPath id="c"><path d="M24 48c13.3 0 24-10.7 24-24S37.3 0 24 0 0 10.7 0 24s10.7 24 24 24z" overflow="visible"/></clipPath><linearGradient id="instagram-gradient" x1="47.991" x2="-.058" y1="49.802" y2="1.887" gradientTransform="matrix(1 0 0 -1 0 50)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4f3eb7"/><stop offset=".193" stop-color="#9132ae"/><stop offset=".526" stop-color="#cf288b"/><stop offset="1" stop-color="#ffd43c"/></linearGradient><path fill="url(#instagram-gradient)" d="M7.7.2h32.5c4.2 0 7.6 3.4 7.6 7.6v32.5c0 4.2-3.4 7.6-7.6 7.6H7.7c-4.2 0-7.6-3.4-7.6-7.6V7.9C.1 3.6 3.5.2 7.7.2z" clip-path="url(#c)"/><g fill="#fff"><path d="M19.7 24.2c0-2.4 1.9-4.3 4.3-4.3s4.3 1.9 4.3 4.3-1.9 4.3-4.3 4.3-4.3-1.9-4.3-4.3m-2.3 0c0 3.7 3 6.6 6.6 6.6s6.6-3 6.6-6.6-3-6.6-6.6-6.6-6.6 2.9-6.6 6.6m11.9-6.9c0 .9.7 1.6 1.6 1.6s1.6-.7 1.6-1.6-.7-1.6-1.6-1.6c-.9.1-1.5.7-1.6 1.6M18.8 34.7c-1.3-.1-1.9-.3-2.4-.4-.6-.2-1-.5-1.5-1s-.7-.9-1-1.5c-.2-.5-.4-1.1-.4-2.4-.1-1.4-.1-1.8-.1-5.2s0-3.9.1-5.2c.1-1.3.3-1.9.4-2.4.2-.6.5-1 1-1.5s.9-.7 1.5-1c.5-.2 1.1-.4 2.4-.4 1.4-.1 1.8-.1 5.2-.1s3.9 0 5.2.1c1.3.1 1.9.3 2.4.4.6.2 1 .5 1.5 1s.7.9 1 1.5c.2.5.4 1.1.4 2.4.1 1.4.1 1.8.1 5.2s0 3.9-.1 5.2c-.1 1.3-.3 1.9-.4 2.4-.2.6-.5 1-1 1.5s-.9.7-1.5 1c-.5.2-1.1.4-2.4.4-1.4.1-1.8.1-5.2.1s-3.9 0-5.2-.1m-.1-23.3c-1.4.1-2.3.3-3.1.6-.9.3-1.6.8-2.3 1.5s-1.2 1.4-1.5 2.3c-.3.8-.5 1.8-.6 3.1-.1 1.4-.1 1.8-.1 5.3s0 4 .1 5.3c.1 1.4.3 2.3.6 3.1s.8 1.6 1.5 2.3 1.4 1.2 2.3 1.5c.8.3 1.8.5 3.1.6 1.4.1 1.8.1 5.3.1s4 0 5.3-.1c1.4-.1 2.3-.3 3.1-.6s1.6-.8 2.3-1.5 1.2-1.4 1.5-2.3c.3-.8.5-1.8.6-3.1.1-1.4.1-1.8.1-5.3s0-4-.1-5.3c-.1-1.4-.3-2.3-.6-3.1-.3-.8-.8-1.6-1.5-2.3s-1.4-1.2-2.3-1.5c-.8-.3-1.8-.5-3.1-.6-1.4-.1-1.8-.1-5.3-.1s-3.9 0-5.3.1"/><path d="M19.7 24.2c0-2.4 1.9-4.3 4.3-4.3s4.3 1.9 4.3 4.3-1.9 4.3-4.3 4.3-4.3-1.9-4.3-4.3m-2.3 0c0 3.7 3 6.6 6.6 6.6s6.6-3 6.6-6.6-3-6.6-6.6-6.6-6.6 2.9-6.6 6.6m11.9-6.9c0 .9.7 1.6 1.6 1.6s1.6-.7 1.6-1.6-.7-1.6-1.6-1.6c-.9.1-1.5.7-1.6 1.6M18.8 34.7c-1.3-.1-1.9-.3-2.4-.4-.6-.2-1-.5-1.5-1s-.7-.9-1-1.5c-.2-.5-.4-1.1-.4-2.4-.1-1.4-.1-1.8-.1-5.2s0-3.9.1-5.2c.1-1.3.3-1.9.4-2.4.2-.6.5-1 1-1.5s.9-.7 1.5-1c.5-.2 1.1-.4 2.4-.4 1.4-.1 1.8-.1 5.2-.1s3.9 0 5.2.1c1.3.1 1.9.3 2.4.4.6.2 1 .5 1.5 1s.7.9 1 1.5c.2.5.4 1.1.4 2.4.1 1.4.1 1.8.1 5.2s0 3.9-.1 5.2c-.1 1.3-.3 1.9-.4 2.4-.2.6-.5 1-1 1.5s-.9.7-1.5 1c-.5.2-1.1.4-2.4.4-1.4.1-1.8.1-5.2.1s-3.9 0-5.2-.1m-.1-23.3c-1.4.1-2.3.3-3.1.6-.9.3-1.6.8-2.3 1.5s-1.2 1.4-1.5 2.3c-.3.8-.5 1.8-.6 3.1-.1 1.4-.1 1.8-.1 5.3s0 4 .1 5.3c.1 1.4.3 2.3.6 3.1s.8 1.6 1.5 2.3 1.4 1.2 2.3 1.5c.8.3 1.8.5 3.1.6 1.4.1 1.8.1 5.3.1s4 0 5.3-.1c1.4-.1 2.3-.3 3.1-.6s1.6-.8 2.3-1.5 1.2-1.4 1.5-2.3c.3-.8.5-1.8.6-3.1.1-1.4.1-1.8.1-5.3s0-4-.1-5.3c-.1-1.4-.3-2.3-.6-3.1-.3-.8-.8-1.6-1.5-2.3s-1.4-1.2-2.3-1.5c-.8-.3-1.8-.5-3.1-.6-1.4-.1-1.8-.1-5.3-.1s-3.9 0-5.3.1"/></g></svg>';
+const templateHTML = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-comp-icon-channel-color-instagram-bg,linear-gradient(225deg,#4f3eb7 0,#9132ae 19%,#cf288b 53%,#ffd43c 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-instagram-layera,#FFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" d="M19.2 24C19.2 21.2887 21.4 19.1799 24 19.1799C26.7 19.1799 28.8 21.3891 28.8 24C28.8 26.6109 26.6 28.8201 24 28.8201C21.3 28.8201 19.2 26.7113 19.2 24ZM16.6 24C16.6 28.1172 19.9 31.431 24 31.431C28.1 31.431 31.4 28.1172 31.4 24C31.4 19.8828 28.1 16.569 24 16.569C19.9 16.569 16.6 19.8828 16.6 24ZM30 16.2678C30 16.569 30.1 16.9707 30.3 17.272C30.5 17.5732 30.8 17.7741 31.1 17.8745C31.4 17.9749 31.8 18.0753 32.1 17.9749C32.4 17.8745 32.7 17.7741 33 17.4728C33.2 17.272 33.4 16.8703 33.5 16.569C33.6 16.2678 33.5 15.8661 33.4 15.5649C33.3 15.2636 33 14.9623 32.8 14.7615C32.5 14.5607 32.2 14.4603 31.8 14.4603C31.3 14.4603 30.9 14.6611 30.6 14.9623C30.2 15.364 30 15.7657 30 16.2678ZM18.2 35.749C16.8 35.6485 16 35.4477 15.5 35.2469C14.8 34.9456 14.3 34.6444 13.8 34.1423C13.3 33.6402 13 33.1381 12.7 32.4351C12.5 31.9331 12.3 31.1297 12.2 29.7238C12.1 28.2176 12.1 27.7155 12.1 23.8996C12.1 20.0837 12.1 19.5816 12.2 18.0753C12.3 16.6695 12.5 15.8661 12.7 15.364C13 14.6611 13.3 14.159 13.8 13.6569C14.3 13.1548 14.8 12.8536 15.5 12.5523C16 12.3515 16.8 12.1506 18.2 12.0502C19.7 11.9498 20.2 11.9498 24 11.9498C27.8 11.9498 28.3 11.9498 29.8 12.0502C31.2 12.1506 32 12.3515 32.5 12.5523C33.2 12.8536 33.7 13.1548 34.2 13.6569C34.7 14.159 35 14.6611 35.3 15.364C35.5 15.8661 35.7 16.6695 35.8 18.0753C35.9 19.5816 35.9 20.0837 35.9 23.8996C35.9 27.7155 35.9 28.2176 35.8 29.7238C35.7 31.1297 35.5 31.9331 35.3 32.4351C35 33.1381 34.7 33.6402 34.2 34.1423C33.7 34.6444 33.2 34.9456 32.5 35.2469C32 35.4477 31.2 35.6485 29.8 35.749C28.3 35.8494 27.8 35.8494 24 35.8494C20.1 35.8494 19.7 35.8494 18.2 35.749ZM18.1 9.64017C16.6 9.74059 15.5 9.94142 14.6 10.3431C13.7 10.7448 12.8 11.2469 12 12.0502C11.2 12.8536 10.7 13.6569 10.3 14.6611C9.9 15.5649 9.7 16.6695 9.6 18.1757C9.5 19.682 9.5 20.1841 9.5 24.1004C9.5 28.0167 9.5 28.5188 9.6 30.0251C9.7 31.5314 9.9 32.636 10.3 33.5397C10.7 34.4435 11.2 35.3473 12 36.1506C12.8 36.954 13.6 37.4561 14.6 37.8577C15.5 38.2594 16.6 38.4603 18.1 38.5607C19.6 38.6611 20.1 38.6611 24 38.6611C27.9 38.6611 28.4 38.6611 29.9 38.5607C31.4 38.4603 32.5 38.2594 33.4 37.8577C34.3 37.4561 35.2 36.954 36 36.1506C36.8 35.3473 37.3 34.5439 37.7 33.5397C38.1 32.636 38.3 31.5314 38.4 30.0251C38.5 28.5188 38.5 28.0167 38.5 24.1004C38.5 20.1841 38.5 19.682 38.4 18.1757C38.3 16.6695 38.1 15.5649 37.7 14.6611C37.3 13.7573 36.8 12.8536 36 12.0502C35.2 11.2469 34.4 10.7448 33.4 10.3431C32.5 9.94142 31.4 9.74059 29.9 9.64017C28.4 9.53975 27.9 9.53975 24 9.53975C20.1 9.53975 19.6 9.53975 18.1 9.64017Z"/></svg>';
 const IconChannelInstagram = createIconClass(templateHTML);
 defineCustomElement("sinch-icon-channel-instagram", IconChannelInstagram);
 export {

package/icons-channel/instagram-square/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "../../utils/element.js";
 import { createIconClass } from "../create-icon-class.js";
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path d="M7.7 0h32.5c4.2 0 7.6 3.414 7.6 7.632v32.636c0 4.217-3.4 7.632-7.6 7.632H7.7c-4.2 0-7.6-3.415-7.6-7.632V7.632C.1 3.414 3.5 0 7.7 0Z" fill="url(#instagram-square-gradient)"/><path d="M19.2 24c0-2.711 2.2-4.82 4.8-4.82 2.7 0 4.8 2.21 4.8 4.82 0 2.61-2.2 4.82-4.8 4.82-2.7 0-4.8-2.109-4.8-4.82Zm-2.6 0c0 4.117 3.3 7.431 7.4 7.431 4.1 0 7.4-3.314 7.4-7.431s-3.3-7.43-7.4-7.43c-4.1 0-7.4 3.313-7.4 7.43ZM30 16.268c0 .301.1.703.3 1.004.2.301.5.502.8.603.3.1.7.2 1 .1.3-.1.6-.2.9-.502.2-.201.4-.603.5-.904.1-.301 0-.703-.1-1.004-.1-.301-.4-.603-.6-.803-.3-.201-.6-.302-1-.302-.5 0-.9.201-1.2.502-.4.402-.6.804-.6 1.306ZM18.2 35.749c-1.4-.1-2.2-.301-2.7-.502-.7-.301-1.2-.603-1.7-1.105s-.8-1.004-1.1-1.707c-.2-.502-.4-1.305-.5-2.711-.1-1.506-.1-2.009-.1-5.824 0-3.816 0-4.318.1-5.825.1-1.405.3-2.209.5-2.71.3-.704.6-1.206 1.1-1.708.5-.502 1-.803 1.7-1.105.5-.2 1.3-.401 2.7-.502 1.5-.1 2-.1 5.8-.1s4.3 0 5.8.1c1.4.1 2.2.301 2.7.502.7.302 1.2.603 1.7 1.105s.8 1.004 1.1 1.707c.2.502.4 1.305.5 2.711.1 1.507.1 2.009.1 5.825 0 3.816 0 4.318-.1 5.824-.1 1.406-.3 2.21-.5 2.711-.3.703-.6 1.205-1.1 1.707-.5.502-1 .804-1.7 1.105-.5.2-1.3.402-2.7.502-1.5.1-2 .1-5.8.1-3.9 0-4.3 0-5.8-.1ZM18.1 9.64c-1.5.1-2.6.301-3.5.703-.9.402-1.8.904-2.6 1.707-.8.804-1.3 1.607-1.7 2.611-.4.904-.6 2.008-.7 3.515-.1 1.506-.1 2.008-.1 5.925 0 3.916 0 4.418.1 5.924.1 1.506.3 2.611.7 3.515.4.904.9 1.807 1.7 2.61.8.804 1.6 1.306 2.6 1.708.9.402 2 .602 3.5.703 1.5.1 2 .1 5.9.1 3.9 0 4.4 0 5.9-.1s2.6-.301 3.5-.703c.9-.402 1.8-.904 2.6-1.707.8-.804 1.3-1.607 1.7-2.611.4-.904.6-2.009.7-3.515.1-1.506.1-2.008.1-5.924 0-3.917 0-4.419-.1-5.925-.1-1.506-.3-2.611-.7-3.515-.4-.904-.9-1.807-1.7-2.61-.8-.804-1.6-1.306-2.6-1.708-.9-.402-2-.602-3.5-.703-1.5-.1-2-.1-5.9-.1-3.9 0-4.4 0-5.9.1Z" fill="#fff"/><defs><linearGradient id="instagram-square-gradient" x1="47.991" y1="-.024" x2="-.258" y2="47.89" gradientUnits="userSpaceOnUse"><stop stop-color="#4F3EB7"/><stop offset=".193" stop-color="#9132AE"/><stop offset=".526" stop-color="#CF288B"/><stop offset="1" stop-color="#FFD43C"/></linearGradient></defs></svg>';
+const templateHTML = '<style>:host{background:var(--sinch-comp-icon-channel-color-instagram-bg,linear-gradient(225deg,#4f3eb7 0,#9132ae 19%,#cf288b 53%,#ffd43c 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-instagram-layera,#FFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" d="M19.2 24C19.2 21.2887 21.4 19.1799 24 19.1799C26.7 19.1799 28.8 21.3891 28.8 24C28.8 26.6109 26.6 28.8201 24 28.8201C21.3 28.8201 19.2 26.7113 19.2 24ZM16.6 24C16.6 28.1172 19.9 31.431 24 31.431C28.1 31.431 31.4 28.1172 31.4 24C31.4 19.8828 28.1 16.569 24 16.569C19.9 16.569 16.6 19.8828 16.6 24ZM30 16.2678C30 16.569 30.1 16.9707 30.3 17.272C30.5 17.5732 30.8 17.7741 31.1 17.8745C31.4 17.9749 31.8 18.0753 32.1 17.9749C32.4 17.8745 32.7 17.7741 33 17.4728C33.2 17.272 33.4 16.8703 33.5 16.569C33.6 16.2678 33.5 15.8661 33.4 15.5649C33.3 15.2636 33 14.9623 32.8 14.7615C32.5 14.5607 32.2 14.4603 31.8 14.4603C31.3 14.4603 30.9 14.6611 30.6 14.9623C30.2 15.364 30 15.7657 30 16.2678ZM18.2 35.749C16.8 35.6485 16 35.4477 15.5 35.2469C14.8 34.9456 14.3 34.6444 13.8 34.1423C13.3 33.6402 13 33.1381 12.7 32.4351C12.5 31.9331 12.3 31.1297 12.2 29.7238C12.1 28.2176 12.1 27.7155 12.1 23.8996C12.1 20.0837 12.1 19.5816 12.2 18.0753C12.3 16.6695 12.5 15.8661 12.7 15.364C13 14.6611 13.3 14.159 13.8 13.6569C14.3 13.1548 14.8 12.8536 15.5 12.5523C16 12.3515 16.8 12.1506 18.2 12.0502C19.7 11.9498 20.2 11.9498 24 11.9498C27.8 11.9498 28.3 11.9498 29.8 12.0502C31.2 12.1506 32 12.3515 32.5 12.5523C33.2 12.8536 33.7 13.1548 34.2 13.6569C34.7 14.159 35 14.6611 35.3 15.364C35.5 15.8661 35.7 16.6695 35.8 18.0753C35.9 19.5816 35.9 20.0837 35.9 23.8996C35.9 27.7155 35.9 28.2176 35.8 29.7238C35.7 31.1297 35.5 31.9331 35.3 32.4351C35 33.1381 34.7 33.6402 34.2 34.1423C33.7 34.6444 33.2 34.9456 32.5 35.2469C32 35.4477 31.2 35.6485 29.8 35.749C28.3 35.8494 27.8 35.8494 24 35.8494C20.1 35.8494 19.7 35.8494 18.2 35.749ZM18.1 9.64017C16.6 9.74059 15.5 9.94142 14.6 10.3431C13.7 10.7448 12.8 11.2469 12 12.0502C11.2 12.8536 10.7 13.6569 10.3 14.6611C9.9 15.5649 9.7 16.6695 9.6 18.1757C9.5 19.682 9.5 20.1841 9.5 24.1004C9.5 28.0167 9.5 28.5188 9.6 30.0251C9.7 31.5314 9.9 32.636 10.3 33.5397C10.7 34.4435 11.2 35.3473 12 36.1506C12.8 36.954 13.6 37.4561 14.6 37.8577C15.5 38.2594 16.6 38.4603 18.1 38.5607C19.6 38.6611 20.1 38.6611 24 38.6611C27.9 38.6611 28.4 38.6611 29.9 38.5607C31.4 38.4603 32.5 38.2594 33.4 37.8577C34.3 37.4561 35.2 36.954 36 36.1506C36.8 35.3473 37.3 34.5439 37.7 33.5397C38.1 32.636 38.3 31.5314 38.4 30.0251C38.5 28.5188 38.5 28.0167 38.5 24.1004C38.5 20.1841 38.5 19.682 38.4 18.1757C38.3 16.6695 38.1 15.5649 37.7 14.6611C37.3 13.7573 36.8 12.8536 36 12.0502C35.2 11.2469 34.4 10.7448 33.4 10.3431C32.5 9.94142 31.4 9.74059 29.9 9.64017C28.4 9.53975 27.9 9.53975 24 9.53975C20.1 9.53975 19.6 9.53975 18.1 9.64017Z"/></svg>';
 const IconChannelInstagramSquare = createIconClass(templateHTML);
 defineCustomElement("sinch-icon-channel-instagram-square", IconChannelInstagramSquare);
 export {

package/icons-channel/line/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "../../utils/element.js";
 import { createIconClass } from "../create-icon-class.js";
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path fill="#06c755" d="M24 48c13.3 0 24-10.7 24-24S37.3 0 24 0 0 10.7 0 24s10.7 24 24 24z"/><path fill="#fff" d="M38.2 22c0-6.4-6.4-11.5-14.2-11.5-7.8 0-14.2 5.2-14.2 11.5 0 5.7 5.1 10.5 11.9 11.4.5.1 1.1.3 1.3.7.1.4.1.9 0 1.3 0 0-.2 1-.2 1.2-.1.4-.3 1.4 1.2.8 1.5-.6 8.2-4.8 11.2-8.3 2-2.3 3-4.6 3-7.1z"/><path d="M33.5 25.7h-4c-.1 0-.3-.1-.3-.3v-6.2c0-.1.1-.3.3-.3h4c.1 0 .3.1.3.3v1c0 .1-.1.3-.3.3h-2.7v1h2.7c.1 0 .3.1.3.3v1c0 .1-.1.3-.3.3h-2.7v1h2.7c.1 0 .3.1.3.3v1c0 .1-.2.3-.3.3zm-14.8 0c.1 0 .3-.1.3-.3v-1c0-.1-.1-.3-.3-.3H16v-4.9c0-.1-.1-.3-.3-.3h-1c-.1 0-.3.1-.3.3v6.2c0 .1.1.3.3.3h4zm2.4-6.8h-1c-.1 0-.3.1-.3.3v6.2c0 .1.1.3.3.3h1c.1 0 .3-.1.3-.3v-6.2c0-.2-.1-.3-.3-.3zm6.9 0h-1c-.1 0-.3.1-.3.3v3.7L23.9 19h-1c-.1 0-.3.1-.3.3v6.2c0 .1.1.3.3.3h1c.1 0 .3-.1.3-.3v-3.7l2.8 3.8s0 .1.1.1h1.1c.1 0 .3-.1.3-.3v-6.2c-.2-.2-.4-.3-.5-.3z" fill="#06c755"/></svg>';
+const templateHTML = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-comp-icon-channel-color-line-bg,linear-gradient(180deg,#06c755 0,#06c755 100%))}#shape-a{fill:var(--comp-icon-channel-color-line-layera,#FFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M24 11.5439C31.8 11.5439 38.2001 16.6653 38.2001 23.0921C38.2001 25.6025 37.2001 27.9121 35.2001 30.2218C32.2001 33.7364 25.5 37.954 24 38.5565C22.5 39.159 22.7 38.1548 22.8 37.7532C22.8 37.5523 23 36.5481 23 36.5481C23.1 36.1465 23.1 35.6444 23 35.2427C22.8 34.841 22.2001 34.6402 21.7001 34.5398C14.9 33.636 9.80005 28.8159 9.80005 23.0921C9.80005 16.7657 16.2 11.5439 24 11.5439ZM29.5 26.8075H33.5C33.6 26.8075 33.8 26.6067 33.8 26.5063V25.5021C33.8 25.3012 33.6 25.2008 33.5 25.2008H30.8V24.1966H33.5C33.7 24.1966 33.8 23.9958 33.8 23.8954V22.8912C33.8 22.6904 33.6 22.5899 33.5 22.5899H30.8V21.5858H33.5C33.7 21.5858 33.8 21.3849 33.8 21.2845V20.2803C33.8 20.0795 33.6 19.9791 33.5 19.9791H29.5C29.3 19.9791 29.2 20.1799 29.2 20.2803V26.5063C29.2 26.7071 29.4 26.8075 29.5 26.8075ZM19 26.5063C19 26.7071 18.8 26.8075 18.7 26.8075H14.7C14.5 26.8075 14.4 26.6067 14.4 26.5063V20.2803C14.4 20.0795 14.6 19.9791 14.7 19.9791H15.7C15.9 19.9791 16 20.1799 16 20.2803V25.2008H18.7C18.9 25.2008 19 25.4017 19 25.5021V26.5063ZM20.1 19.9791H21.1C21.3 19.9791 21.4 20.0795 21.4 20.2803V26.5063C21.4 26.7071 21.2 26.8075 21.1 26.8075H20.1C19.9 26.8075 19.8 26.6067 19.8 26.5063V20.2803C19.8 20.0795 20 19.9791 20.1 19.9791ZM27 19.9791H28C28.1 19.9791 28.3 20.0795 28.5 20.2803V26.5063C28.5 26.7071 28.3 26.8075 28.2 26.8075H27.1C27 26.8075 27 26.7071 27 26.7071L24.2 22.8912V26.6067C24.2 26.8075 24 26.9079 23.9 26.9079H22.9C22.7 26.9079 22.6 26.7071 22.6 26.6067V20.3807C22.6 20.1799 22.8 20.0795 22.9 20.0795H23.9L26.7 23.9958V20.2803C26.7 20.0795 26.9 19.9791 27 19.9791Z"/></svg>';
 const IconChannelLine = createIconClass(templateHTML);
 defineCustomElement("sinch-icon-channel-line", IconChannelLine);
 export {

package/icons-channel/line-square/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "../../utils/element.js";
 import { createIconClass } from "../create-icon-class.js";
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path d="M8.1 0H40c4.4 0 8 3.615 8 8.033v31.934C48 44.385 44.4 48 40 48H8.1c-4.4 0-8-3.615-8-8.033V8.033C.1 3.615 3.7 0 8.1 0Z" fill="#06C755"/><path d="M38.2 22.092c0-6.427-6.4-11.548-14.2-11.548-7.8 0-14.2 5.222-14.2 11.548 0 5.724 5.1 10.544 11.9 11.448.5.1 1.1.301 1.3.703.1.401.1.904 0 1.305 0 0-.2 1.004-.2 1.205-.1.402-.3 1.406 1.2.803 1.5-.602 8.2-4.82 11.2-8.334 2-2.31 3-4.62 3-7.13Z" fill="#fff"/><path d="M33.5 25.808h-4c-.1 0-.3-.1-.3-.302V19.28c0-.1.1-.3.3-.3h4c.1 0 .3.1.3.3v1.005c0 .1-.1.3-.3.3h-2.7v1.005h2.7c.1 0 .3.1.3.301v1.004c0 .1-.1.302-.3.302h-2.7V24.2h2.7c.1 0 .3.1.3.301v1.004c0 .1-.2.302-.3.302Zm-14.8 0c.1 0 .3-.1.3-.302v-1.004c0-.1-.1-.301-.3-.301H16v-4.92c0-.101-.1-.302-.3-.302h-1c-.1 0-.3.1-.3.301v6.226c0 .1.1.302.3.302h4Zm2.4-6.829h-1c-.1 0-.3.1-.3.301v6.226c0 .1.1.302.3.302h1c.1 0 .3-.1.3-.302V19.28c0-.2-.1-.3-.3-.3Zm6.9 0h-1c-.1 0-.3.1-.3.301v3.716l-2.8-3.916h-1c-.1 0-.3.1-.3.3v6.227c0 .1.1.301.3.301h1c.1 0 .3-.1.3-.301V21.89l2.8 3.816s0 .1.1.1h1.1c.1 0 .3-.1.3-.3V19.28c-.2-.2-.4-.3-.5-.3Z" fill="#06C755"/></svg>';
+const templateHTML = '<style>:host{background:var(--sinch-comp-icon-channel-color-line-bg,linear-gradient(180deg,#06c755 0,#06c755 100%))}#shape-a{fill:var(--comp-icon-channel-color-line-layera,#FFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M24 11.5439C31.8 11.5439 38.2001 16.6653 38.2001 23.0921C38.2001 25.6025 37.2001 27.9121 35.2001 30.2218C32.2001 33.7364 25.5 37.954 24 38.5565C22.5 39.159 22.7 38.1548 22.8 37.7532C22.8 37.5523 23 36.5481 23 36.5481C23.1 36.1465 23.1 35.6444 23 35.2427C22.8 34.841 22.2001 34.6402 21.7001 34.5398C14.9 33.636 9.80005 28.8159 9.80005 23.0921C9.80005 16.7657 16.2 11.5439 24 11.5439ZM29.5 26.8075H33.5C33.6 26.8075 33.8 26.6067 33.8 26.5063V25.5021C33.8 25.3012 33.6 25.2008 33.5 25.2008H30.8V24.1966H33.5C33.7 24.1966 33.8 23.9958 33.8 23.8954V22.8912C33.8 22.6904 33.6 22.5899 33.5 22.5899H30.8V21.5858H33.5C33.7 21.5858 33.8 21.3849 33.8 21.2845V20.2803C33.8 20.0795 33.6 19.9791 33.5 19.9791H29.5C29.3 19.9791 29.2 20.1799 29.2 20.2803V26.5063C29.2 26.7071 29.4 26.8075 29.5 26.8075ZM19 26.5063C19 26.7071 18.8 26.8075 18.7 26.8075H14.7C14.5 26.8075 14.4 26.6067 14.4 26.5063V20.2803C14.4 20.0795 14.6 19.9791 14.7 19.9791H15.7C15.9 19.9791 16 20.1799 16 20.2803V25.2008H18.7C18.9 25.2008 19 25.4017 19 25.5021V26.5063ZM20.1 19.9791H21.1C21.3 19.9791 21.4 20.0795 21.4 20.2803V26.5063C21.4 26.7071 21.2 26.8075 21.1 26.8075H20.1C19.9 26.8075 19.8 26.6067 19.8 26.5063V20.2803C19.8 20.0795 20 19.9791 20.1 19.9791ZM27 19.9791H28C28.1 19.9791 28.3 20.0795 28.5 20.2803V26.5063C28.5 26.7071 28.3 26.8075 28.2 26.8075H27.1C27 26.8075 27 26.7071 27 26.7071L24.2 22.8912V26.6067C24.2 26.8075 24 26.9079 23.9 26.9079H22.9C22.7 26.9079 22.6 26.7071 22.6 26.6067V20.3807C22.6 20.1799 22.8 20.0795 22.9 20.0795H23.9L26.7 23.9958V20.2803C26.7 20.0795 26.9 19.9791 27 19.9791Z"/></svg>';
 const IconChannelLineSquare = createIconClass(templateHTML);
 defineCustomElement("sinch-icon-channel-line-square", IconChannelLineSquare);
 export {

package/icons-channel/mms-round/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "../../utils/element.js";
 import { createIconClass } from "../create-icon-class.js";
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><circle cx="24" cy="24" r="24" fill="#fff"/><path fill="#000" fill-rule="evenodd" d="M28.562 14.868a2.86 2.86 0 0 0-2.86-2.858c-2.6 0-5.242-.003-7.874-.006L13.171 12a2.856 2.856 0 0 0-2.857 2.856v8.954a2.857 2.857 0 0 0 2.857 2.857h.28v2.373a.857.857 0 0 0 1.383.677l3.922-3.05h6.95a2.856 2.856 0 0 0 2.856-2.857v-8.942Zm-9.023 14.08-.101.079v.866a2.856 2.856 0 0 0 2.856 2.857h6.859l4.019 3.072a.857.857 0 0 0 1.378-.68V32.75h.279a2.857 2.857 0 0 0 2.857-2.857v-8.954a2.856 2.856 0 0 0-2.857-2.856l-3.986.003v5.724a5.137 5.137 0 0 1-5.137 5.138h-6.167Zm5.61-12.43a1.532 1.532 0 1 1-3.065 0 1.532 1.532 0 0 1 3.065 0Zm-8.226 1.192a.842.842 0 0 1 .698.377l1.423 2.148 1.341-1.19a.842.842 0 0 1 1.17.051l2.712 2.867a.842.842 0 1 1-1.224 1.157l-2.15-2.274-1.457 1.292a.842.842 0 0 1-1.261-.165l-1.262-1.906-1.99 2.946a.842.842 0 1 1-1.395-.943l2.693-3.989a.842.842 0 0 1 .702-.37Z" clip-rule="evenodd"/></svg>';
+const templateHTML = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-comp-icon-channel-color-mms-bg,linear-gradient(180deg,#fff 0,#fff 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-mms-layera,#242424)}#shape-b{fill:var(--sinch-comp-icon-channel-color-mms-layerb,#242424)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-b" d="M19.5388 28.9482L19.438 29.0266V29.8928C19.438 31.4708 20.716 32.75 22.2939 32.75H29.1528L33.1719 35.8222C33.7359 36.2534 34.5496 35.8512 34.5496 35.1413V32.75H34.8288C36.4068 32.75 37.6863 31.4708 37.6863 29.8928V20.939C37.6863 19.361 36.4071 18.0818 34.8291 18.0828C33.5092 18.0837 32.1782 18.085 30.8432 18.0863V23.8101C30.8432 26.6469 28.5446 28.9482 25.7059 28.9482H19.5388Z"/><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M28.562 14.8682C28.562 13.2891 27.2811 12.0095 25.702 12.0096C23.1021 12.0097 20.4596 12.007 17.8279 12.0042C16.268 12.0026 14.712 12.001 13.1709 12C11.5929 11.999 10.3137 13.2782 10.3137 14.8562V23.81C10.3137 25.388 11.5932 26.6672 13.1712 26.6672H13.4505V29.0404C13.4505 29.7536 14.2707 30.1548 14.8337 29.717L18.7562 26.6672H25.7058C27.2838 26.6672 28.562 25.388 28.562 23.81V14.8682ZM25.149 16.5186C25.149 17.3649 24.4629 18.051 23.6166 18.051C22.7703 18.051 22.0843 17.3649 22.0843 16.5186C22.0843 15.6723 22.7703 14.9862 23.6166 14.9862C24.4629 14.9862 25.149 15.6723 25.149 16.5186ZM16.9229 17.7103C17.204 17.7116 17.4659 17.853 17.6211 18.0874L19.0435 20.2348L20.3854 19.045C20.7254 18.7434 21.2435 18.7662 21.5557 19.0964L24.2668 21.963C24.5863 22.3008 24.5714 22.8337 24.2336 23.1533C23.8957 23.4728 23.3628 23.4579 23.0433 23.1201L20.8925 20.8459L19.4355 22.138C19.253 22.2998 19.0094 22.3745 18.7676 22.3428C18.5258 22.3112 18.3096 22.1762 18.1749 21.9729L16.9125 20.0669L14.9236 23.0127C14.6633 23.3981 14.14 23.4996 13.7546 23.2394C13.3692 22.9791 13.2677 22.4558 13.5279 22.0704L16.2213 18.0812C16.3786 17.8482 16.6418 17.7091 16.9229 17.7103Z"/></svg>';
 const IconChannelMmsRound = createIconClass(templateHTML);
 defineCustomElement("sinch-icon-channel-mms-round", IconChannelMmsRound);
 export {

package/icons-channel/mms-square/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "../../utils/element.js";
 import { createIconClass } from "../create-icon-class.js";
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path fill="#fff" d="M8.1 0H40c4.4 0 8 3.615 8 8.033v31.934C48 44.385 44.4 48 40 48H8.1c-4.4 0-8-3.615-8-8.033V8.033C.1 3.615 3.7 0 8.1 0Z"/><path fill="#000" fill-rule="evenodd" d="M28.562 14.868a2.86 2.86 0 0 0-2.86-2.858c-2.6 0-5.242-.003-7.874-.006L13.171 12a2.856 2.856 0 0 0-2.857 2.856v8.954a2.857 2.857 0 0 0 2.857 2.857h.28v2.373a.857.857 0 0 0 1.383.677l3.922-3.05h6.95a2.856 2.856 0 0 0 2.856-2.857v-8.942Zm-9.023 14.08-.101.079v.866a2.856 2.856 0 0 0 2.856 2.857h6.859l4.019 3.072a.857.857 0 0 0 1.378-.68V32.75h.279a2.857 2.857 0 0 0 2.857-2.857v-8.954a2.856 2.856 0 0 0-2.857-2.856l-3.986.003v5.724a5.137 5.137 0 0 1-5.137 5.138h-6.167Zm5.61-12.43a1.532 1.532 0 1 1-3.065 0 1.532 1.532 0 0 1 3.065 0Zm-8.226 1.192a.842.842 0 0 1 .698.377l1.423 2.148 1.341-1.19a.842.842 0 0 1 1.17.051l2.712 2.867a.842.842 0 1 1-1.224 1.157l-2.15-2.274-1.457 1.292a.842.842 0 0 1-1.261-.165l-1.262-1.906-1.99 2.946a.842.842 0 1 1-1.395-.943l2.693-3.989a.842.842 0 0 1 .702-.37Z" clip-rule="evenodd"/></svg>';
+const templateHTML = '<style>:host{background:var(--sinch-comp-icon-channel-color-mms-bg,linear-gradient(180deg,#fff 0,#fff 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-mms-layera,#242424)}#shape-b{fill:var(--sinch-comp-icon-channel-color-mms-layerb,#242424)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-b" d="M19.5388 28.9482L19.438 29.0266V29.8928C19.438 31.4708 20.716 32.75 22.2939 32.75H29.1528L33.1719 35.8222C33.7359 36.2534 34.5496 35.8512 34.5496 35.1413V32.75H34.8288C36.4068 32.75 37.6863 31.4708 37.6863 29.8928V20.939C37.6863 19.361 36.4071 18.0818 34.8291 18.0828C33.5092 18.0837 32.1782 18.085 30.8432 18.0863V23.8101C30.8432 26.6469 28.5446 28.9482 25.7059 28.9482H19.5388Z"/><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M28.562 14.8682C28.562 13.2891 27.2811 12.0095 25.702 12.0096C23.1021 12.0097 20.4596 12.007 17.8279 12.0042C16.268 12.0026 14.712 12.001 13.1709 12C11.5929 11.999 10.3137 13.2782 10.3137 14.8562V23.81C10.3137 25.388 11.5932 26.6672 13.1712 26.6672H13.4505V29.0404C13.4505 29.7536 14.2707 30.1548 14.8337 29.717L18.7562 26.6672H25.7058C27.2838 26.6672 28.562 25.388 28.562 23.81V14.8682ZM25.149 16.5186C25.149 17.3649 24.4629 18.051 23.6166 18.051C22.7703 18.051 22.0843 17.3649 22.0843 16.5186C22.0843 15.6723 22.7703 14.9862 23.6166 14.9862C24.4629 14.9862 25.149 15.6723 25.149 16.5186ZM16.9229 17.7103C17.204 17.7116 17.4659 17.853 17.6211 18.0874L19.0435 20.2348L20.3854 19.045C20.7254 18.7434 21.2435 18.7662 21.5557 19.0964L24.2668 21.963C24.5863 22.3008 24.5714 22.8337 24.2336 23.1533C23.8957 23.4728 23.3628 23.4579 23.0433 23.1201L20.8925 20.8459L19.4355 22.138C19.253 22.2998 19.0094 22.3745 18.7676 22.3428C18.5258 22.3112 18.3096 22.1762 18.1749 21.9729L16.9125 20.0669L14.9236 23.0127C14.6633 23.3981 14.14 23.4996 13.7546 23.2394C13.3692 22.9791 13.2677 22.4558 13.5279 22.0704L16.2213 18.0812C16.3786 17.8482 16.6418 17.7091 16.9229 17.7103Z"/></svg>';
 const IconChannelMmsSquare = createIconClass(templateHTML);
 defineCustomElement("sinch-icon-channel-mms-square", IconChannelMmsSquare);
 export {

package/icons-channel/notify/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "../../utils/element.js";
 import { createIconClass } from "../create-icon-class.js";
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path fill="#A7D7F7" d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"/><path fill="#0076BA" fill-rule="evenodd" d="M15.174 36.594c-3.962-2.783-6.554-7.387-6.554-12.592 0-8.488 6.89-15.379 15.378-15.379s15.379 6.891 15.379 15.379c0 8.487-6.891 15.378-15.379 15.378-.492 0-.978-.023-1.459-.069a7.819 7.819 0 0 1-6.061 2.874c-1.633 0-3.15-.5-4.406-1.357a7.855 7.855 0 0 0 3.102-4.234Z" clip-rule="evenodd"/><path fill="#fff" d="M32.2 20.053a3.905 3.905 0 0 1-4.617-4.294h-1.944v3.855a.615.615 0 0 1-1.166.275l-2.065-4.13h-2.51a4.103 4.103 0 0 0-4.101 4.1v8.203c0 2.263 1.837 4.1 4.1 4.1h2.46v-3.854a.615.615 0 0 1 1.166-.275l2.065 4.13h2.511c2.264 0 4.101-1.838 4.101-4.101v-8.01Z"/><path fill="#E44436" d="M31.46 18.884a2.666 2.666 0 1 0 0-5.331 2.666 2.666 0 0 0 0 5.33Z"/></svg>';
+const templateHTML = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-comp-icon-channel-color-notify-bg,linear-gradient(180deg,#a7d7f7 0,#a7d7f7 100%))}#shape-a{fill:var(--comp-icon-channel-color-notify-layera,#E44436)}#shape-b{fill:var(--comp-icon-channel-color-notify-layera,#FFFFFF)}#shape-c{fill:var(--comp-icon-channel-color-notify-layera,#0076BA)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-c" fill-rule="evenodd" clip-rule="evenodd" d="M14.8187 36.8019C10.6964 33.9064 8 29.1156 8 23.7C8 14.8694 15.1693 7.7 24 7.7C32.8306 7.7 40 14.8693 40 23.7C40 32.5306 32.8307 39.7 24 39.7C23.4881 39.7 22.9817 39.6759 22.482 39.6288C20.987 41.4536 18.7162 42.619 16.1754 42.619C14.4765 42.619 12.8983 42.098 11.592 41.2071C13.1209 40.1645 14.2773 38.6153 14.8187 36.8019Z"/><path id="shape-b" d="M32.5333 19.5915C32.2842 19.6392 32.027 19.6642 31.764 19.6642C29.5204 19.6642 27.7015 17.8454 27.7015 15.6018C27.7015 15.4402 27.711 15.2808 27.7293 15.1241H25.7066V19.1346C25.7066 19.4314 25.5025 19.6892 25.2136 19.7574C24.9248 19.8256 24.6269 19.6863 24.4942 19.4208L22.3459 15.1241H19.7333C17.3785 15.1241 15.4666 17.036 15.4666 19.3908V27.9241C15.4666 30.279 17.3785 32.1908 19.7333 32.1908H22.2933V28.1804C22.2933 27.8836 22.4973 27.6257 22.7862 27.5575C23.0751 27.4893 23.373 27.6287 23.5057 27.8942L25.654 32.1908H28.2666C30.6215 32.1908 32.5333 30.279 32.5333 27.9241V19.5915Z"/><path id="shape-a" d="M31.764 18.3751C33.2957 18.3751 34.5373 17.1334 34.5373 15.6018C34.5373 14.0701 33.2957 12.8284 31.764 12.8284C30.2324 12.8284 28.9907 14.0701 28.9907 15.6018C28.9907 17.1334 30.2324 18.3751 31.764 18.3751Z"/></svg>';
 const IconChannelNotify = createIconClass(templateHTML);
 defineCustomElement("sinch-icon-channel-notify", IconChannelNotify);
 export {

package/icons-channel/notify-square/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "../../utils/element.js";
 import { createIconClass } from "../create-icon-class.js";
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path fill="#A7D7F7" d="M7.648 0h32.704A7.644 7.644 0 0 1 48 7.648v32.704A7.644 7.644 0 0 1 40.352 48H7.648A7.644 7.644 0 0 1 0 40.352V7.648A7.644 7.644 0 0 1 7.648 0Z"/><path fill="#0076BA" fill-rule="evenodd" d="M13.872 37.597C9.112 34.254 6 28.723 6 22.47 6 12.277 14.277 4 24.471 4c10.195 0 18.471 8.277 18.471 18.471 0 10.195-8.276 18.471-18.47 18.471-.592 0-1.176-.028-1.753-.082a9.391 9.391 0 0 1-7.28 3.452 9.36 9.36 0 0 1-5.292-1.63 9.435 9.435 0 0 0 3.725-5.086Z" clip-rule="evenodd"/><path fill="#fff" d="M34.322 17.728a4.69 4.69 0 0 1-5.546-5.157h-2.335v4.63a.739.739 0 0 1-1.4.33l-2.48-4.96h-3.015a4.928 4.928 0 0 0-4.926 4.925v9.852a4.928 4.928 0 0 0 4.926 4.925H22.5v-4.63a.739.739 0 0 1 1.4-.33l2.48 4.96h3.016a4.928 4.928 0 0 0 4.925-4.925v-9.62Z"/><path fill="#E44436" d="M33.434 16.324a3.202 3.202 0 1 0 0-6.404 3.202 3.202 0 0 0 0 6.404Z"/></svg>';
+const templateHTML = '<style>:host{background:var(--sinch-comp-icon-channel-color-notify-bg,linear-gradient(180deg,#a7d7f7 0,#a7d7f7 100%))}#shape-a{fill:var(--comp-icon-channel-color-notify-layera,#E44436)}#shape-b{fill:var(--comp-icon-channel-color-notify-layera,#FFFFFF)}#shape-c{fill:var(--comp-icon-channel-color-notify-layera,#0076BA)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-c" fill-rule="evenodd" clip-rule="evenodd" d="M14.8187 36.8019C10.6964 33.9064 8 29.1156 8 23.7C8 14.8694 15.1693 7.7 24 7.7C32.8306 7.7 40 14.8693 40 23.7C40 32.5306 32.8307 39.7 24 39.7C23.4881 39.7 22.9817 39.6759 22.482 39.6288C20.987 41.4536 18.7162 42.619 16.1754 42.619C14.4765 42.619 12.8983 42.098 11.592 41.2071C13.1209 40.1645 14.2773 38.6153 14.8187 36.8019Z"/><path id="shape-b" d="M32.5333 19.5915C32.2842 19.6392 32.027 19.6642 31.764 19.6642C29.5204 19.6642 27.7015 17.8454 27.7015 15.6018C27.7015 15.4402 27.711 15.2808 27.7293 15.1241H25.7066V19.1346C25.7066 19.4314 25.5025 19.6892 25.2136 19.7574C24.9248 19.8256 24.6269 19.6863 24.4942 19.4208L22.3459 15.1241H19.7333C17.3785 15.1241 15.4666 17.036 15.4666 19.3908V27.9241C15.4666 30.279 17.3785 32.1908 19.7333 32.1908H22.2933V28.1804C22.2933 27.8836 22.4973 27.6257 22.7862 27.5575C23.0751 27.4893 23.373 27.6287 23.5057 27.8942L25.654 32.1908H28.2666C30.6215 32.1908 32.5333 30.279 32.5333 27.9241V19.5915Z"/><path id="shape-a" d="M31.764 18.3751C33.2957 18.3751 34.5373 17.1334 34.5373 15.6018C34.5373 14.0701 33.2957 12.8284 31.764 12.8284C30.2324 12.8284 28.9907 14.0701 28.9907 15.6018C28.9907 17.1334 30.2324 18.3751 31.764 18.3751Z"/></svg>';
 const IconChannelNotifySquare = createIconClass(templateHTML);
 defineCustomElement("sinch-icon-channel-notify-square", IconChannelNotifySquare);
 export {

package/icons-channel/phone-round/global/index.d.ts

@@ -0,0 +1,24 @@
+import type { TSinchIconChannelElement, TSinchIconChannelReact, TSinchIconChannelProps } from '../../types';
+export * from '../../types';
+declare global {
+    interface NectaryComponentMap {
+        'sinch-icon-channel-phone-round': {
+            props: TSinchIconChannelProps;
+        };
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-channel-phone-round': TSinchIconChannelElement;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-channel-phone-round': TSinchIconChannelReact;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-icon-channel-phone-round': TSinchIconChannelReact;
+        }
+    }
+}

package/icons-channel/phone-round/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../../utils/element.js";
+defineCustomElement("sinch-icon-channel-phone-round");

package/icons-channel/phone-round/index.d.ts

@@ -0,0 +1,25 @@
+import type { TSinchIconChannelElement, TSinchIconChannelReact, TSinchIconChannelProps } from '../types';
+export * from '../types';
+export declare const IconChannelPhoneRound: CustomElementConstructor;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-icon-channel-phone-round': {
+            props: TSinchIconChannelProps;
+        };
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-channel-phone-round': TSinchIconChannelElement;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-channel-phone-round': TSinchIconChannelReact;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-icon-channel-phone-round': TSinchIconChannelReact;
+        }
+    }
+}

package/icons-channel/phone-round/index.js

@@ -0,0 +1,8 @@
+import { defineCustomElement } from "../../utils/element.js";
+import { createIconClass } from "../create-icon-class.js";
+const templateHTML = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-comp-icon-channel-color-phone-bg,linear-gradient(180deg,#fff 0,#fff 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-phone-layera,#242424)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" d="M17.6891 13.5651L15.1769 14.2502C13.7801 14.6312 13.3203 15.3948 13.3728 16.7515C13.7509 26.5127 21.6368 34.3496 31.4179 34.6494C32.7315 34.6897 33.4141 34.1331 33.7419 32.9312L34.4464 30.3478C34.8296 28.9428 34.3967 28.1128 33.1233 27.5822L30.1764 26.3543C28.9265 25.8335 28.1417 26.0982 27.3349 27.0827L26.697 27.8612C26.3091 28.3345 25.6452 28.4888 25.113 28.1866C22.9112 26.9365 21.0814 25.1068 19.831 22.9051C19.5285 22.3725 19.6833 21.7079 20.1576 21.3202L21.0041 20.6282C22.0226 19.7956 22.1312 18.9692 21.6585 17.8346L20.3945 14.8012C19.8679 13.5374 19.1679 13.1618 17.6891 13.5651Z"/></svg>';
+const IconChannelPhoneRound = createIconClass(templateHTML);
+defineCustomElement("sinch-icon-channel-phone-round", IconChannelPhoneRound);
+export {
+  IconChannelPhoneRound
+};

package/icons-channel/phone-square/global/index.d.ts

@@ -0,0 +1,24 @@
+import type { TSinchIconChannelElement, TSinchIconChannelReact, TSinchIconChannelProps } from '../../types';
+export * from '../../types';
+declare global {
+    interface NectaryComponentMap {
+        'sinch-icon-channel-phone-square': {
+            props: TSinchIconChannelProps;
+        };
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-channel-phone-square': TSinchIconChannelElement;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-channel-phone-square': TSinchIconChannelReact;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-icon-channel-phone-square': TSinchIconChannelReact;
+        }
+    }
+}

package/icons-channel/phone-square/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../../utils/element.js";
+defineCustomElement("sinch-icon-channel-phone-square");

package/icons-channel/phone-square/index.d.ts

@@ -0,0 +1,25 @@
+import type { TSinchIconChannelElement, TSinchIconChannelReact, TSinchIconChannelProps } from '../types';
+export * from '../types';
+export declare const IconChannelPhoneSquare: CustomElementConstructor;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-icon-channel-phone-square': {
+            props: TSinchIconChannelProps;
+        };
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-channel-phone-square': TSinchIconChannelElement;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-channel-phone-square': TSinchIconChannelReact;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-icon-channel-phone-square': TSinchIconChannelReact;
+        }
+    }
+}

package/icons-channel/phone-square/index.js

@@ -0,0 +1,8 @@
+import { defineCustomElement } from "../../utils/element.js";
+import { createIconClass } from "../create-icon-class.js";
+const templateHTML = '<style>:host{background:var(--sinch-comp-icon-channel-color-mms-bg,linear-gradient(180deg,#fff 0,#fff 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-mms-layera,#242424)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" d="M17.6891 13.5651L15.1769 14.2502C13.7801 14.6312 13.3203 15.3948 13.3728 16.7515C13.7509 26.5127 21.6368 34.3496 31.4179 34.6494C32.7315 34.6897 33.4141 34.1331 33.7419 32.9312L34.4464 30.3478C34.8296 28.9428 34.3967 28.1128 33.1233 27.5822L30.1764 26.3543C28.9265 25.8335 28.1417 26.0982 27.3349 27.0827L26.697 27.8612C26.3091 28.3345 25.6452 28.4888 25.113 28.1866C22.9112 26.9365 21.0814 25.1068 19.831 22.9051C19.5285 22.3725 19.6833 21.7079 20.1576 21.3202L21.0041 20.6282C22.0226 19.7956 22.1312 18.9692 21.6585 17.8346L20.3945 14.8012C19.8679 13.5374 19.1679 13.1618 17.6891 13.5651Z"/></svg>';
+const IconChannelPhoneSquare = createIconClass(templateHTML);
+defineCustomElement("sinch-icon-channel-phone-square", IconChannelPhoneSquare);
+export {
+  IconChannelPhoneSquare
+};

package/icons-channel/push-round/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "../../utils/element.js";
 import { createIconClass } from "../create-icon-class.js";
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><circle cx="24.5" cy="24" r="24" fill="#fff"/><path fill="#242424" d="M30.44 30.1A3.91 3.91 0 0 1 29 28.593a2.745 2.745 0 0 1-2.267-1.56 2.694 2.694 0 0 1-.246-1.513c.066-.52.273-1.007.6-1.393l.113-.134c.093-.113.187-.206.267-.286 0-.114.013-.274.013-.5 0-1.927.793-3.434 2.253-4.314.6-.946 1.62-1.54 2.747-1.54V14.7c-.02-1.487-1.22-2.687-2.693-2.687-3.514 0-7.107-.013-10.62-.013a2.666 2.666 0 0 0-2.667 2.667v18.666A2.666 2.666 0 0 0 19.167 36h10.626a2.666 2.666 0 0 0 2.667-2.667V30.66a3.925 3.925 0 0 1-2.02-.56ZM21.4 14.633c0-.46.38-.833.84-.826l4.453.026c.46 0 .834.38.827.84a.83.83 0 0 1-.84.827l-4.453-.027a.83.83 0 0 1-.827-.84Zm3.053 19.594c-.733 0-1.333-.6-1.333-1.334 0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333 0 .734-.6 1.334-1.334 1.334Z"/><path fill="#242424" d="m36.293 25.387-.053-.067-.047-.06a1.834 1.834 0 0 0-.28-.28c-.286-.26-.453-.407-.453-1.78 0-.813-.193-1.48-.58-1.98-.28-.367-.667-.647-1.167-.853 0 0-.013-.007-.02-.014-.18-.606-.673-1.013-1.233-1.013s-1.053.407-1.233 1.013c0 0-.014.007-.02.014-1.174.48-1.747 1.413-1.747 2.833 0 1.38-.167 1.527-.453 1.787-.08.073-.174.153-.28.28l-.014.013c-.026.033-.06.073-.086.107a.718.718 0 0 0-.16.38c-.02.14 0 .28.066.406.127.274.4.44.714.44h6.426c.314 0 .58-.166.714-.44a.713.713 0 0 0 .066-.406.775.775 0 0 0-.16-.38ZM34.127 27.507s-.034-.014-.047-.014h-3.247s-.033 0-.046.014a.08.08 0 0 0-.034.033.124.124 0 0 0-.013.047c0 .02 0 .033.013.046a1.938 1.938 0 0 0 3.413 0 .124.124 0 0 0 .014-.046c0-.02 0-.034-.013-.047a.08.08 0 0 0-.034-.033h-.006Z"/></svg>';
+const templateHTML = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-comp-icon-channel-color-push-bg,linear-gradient(180deg,#fff 0,#fff 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-push-layera,#242424)}#shape-b{fill:var(--sinch-comp-icon-channel-color-push-layerb,#242424)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-b" d="M29.94 30.1C29.3333 29.74 28.84 29.22 28.5 28.5933C27.5133 28.5067 26.6533 27.9267 26.2333 27.0333C26.0067 26.56 25.92 26.04 25.9867 25.52C26.0533 25 26.26 24.5133 26.5867 24.1267L26.7 23.9933C26.7933 23.88 26.8867 23.7867 26.9667 23.7067C26.9667 23.5933 26.98 23.4333 26.98 23.2067C26.98 21.28 27.7733 19.7733 29.2333 18.8933C29.8333 17.9467 30.8533 17.3533 31.98 17.3533V14.7C31.96 13.2133 30.76 12.0133 29.2867 12.0133C25.7733 12.0133 22.18 12 18.6667 12C17.1933 12 16 13.1933 16 14.6667V33.3333C16 34.8067 17.1933 36 18.6667 36H29.2933C30.7667 36 31.96 34.8067 31.96 33.3333V30.66C31.2467 30.66 30.5533 30.4667 29.94 30.1ZM20.9 14.6333C20.9 14.1733 21.28 13.8 21.74 13.8067L26.1933 13.8333C26.6533 13.8333 27.0267 14.2133 27.02 14.6733C27.02 15.1333 26.64 15.5067 26.18 15.5L21.7267 15.4733C21.2667 15.4733 20.8933 15.0933 20.9 14.6333ZM23.9533 34.2267C23.22 34.2267 22.62 33.6267 22.62 32.8933C22.62 32.16 23.22 31.56 23.9533 31.56C24.6867 31.56 25.2867 32.16 25.2867 32.8933C25.2867 33.6267 24.6867 34.2267 23.9533 34.2267Z"/><path id="shape-a" d="M35.7933 25.3867L35.74 25.32L35.6933 25.26C35.5933 25.1333 35.5 25.0533 35.4133 24.98C35.1266 24.72 34.96 24.5733 34.96 23.2C34.96 22.3867 34.7666 21.72 34.38 21.22C34.1 20.8533 33.7133 20.5733 33.2133 20.3667C33.2133 20.3667 33.2 20.36 33.1933 20.3533C33.0133 19.7467 32.52 19.34 31.96 19.34C31.4 19.34 30.9066 19.7467 30.7266 20.3533C30.7266 20.3533 30.7133 20.36 30.7066 20.3667C29.5333 20.8467 28.96 21.78 28.96 23.2C28.96 24.58 28.7933 24.7267 28.5066 24.9867C28.4266 25.06 28.3333 25.14 28.2266 25.2667L28.2133 25.28C28.1866 25.3133 28.1533 25.3533 28.1266 25.3867C28.04 25.4933 27.98 25.6267 27.9666 25.7667C27.9466 25.9067 27.9666 26.0467 28.0333 26.1733C28.16 26.4467 28.4333 26.6133 28.7466 26.6133H35.1733C35.4866 26.6133 35.7533 26.4467 35.8866 26.1733C35.9466 26.0467 35.9733 25.9067 35.9533 25.7667C35.9333 25.6267 35.88 25.4933 35.7933 25.3867Z"/><path id="shape-a" d="M33.6266 27.5067C33.6266 27.5067 33.5933 27.4933 33.58 27.4933H30.3333C30.3333 27.4933 30.3 27.4933 30.2866 27.5067C30.2733 27.5133 30.26 27.5267 30.2533 27.54C30.2466 27.5533 30.24 27.5733 30.24 27.5867C30.24 27.6067 30.24 27.62 30.2533 27.6333C30.42 27.94 30.6666 28.2 30.9666 28.38C31.2666 28.56 31.6133 28.6533 31.96 28.6533C32.3133 28.6533 32.6533 28.56 32.9533 28.38C33.2533 28.2 33.5 27.94 33.6666 27.6333C33.6733 27.62 33.68 27.6 33.68 27.5867C33.68 27.5667 33.68 27.5533 33.6666 27.54C33.66 27.5267 33.6466 27.5133 33.6333 27.5067H33.6266Z"/></svg>';
 const IconChannelPushRound = createIconClass(templateHTML);
 defineCustomElement("sinch-icon-channel-push-round", IconChannelPushRound);
 export {