@nectary/assets 3.2.0 → 3.3.0

package/bundle.js

@@ -133,8 +133,8 @@ function getIntegerAttribute($element, attrName, defaultValue) {
 }
 const iconStylesHtml$1 = "<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none;fill:var(--sinch-sys-color-text-default);height:var(--sinch-global-size-icon,48px)}.accent{fill:var(--sinch-sys-color-primary-default)}:host([inverted]:not([inverted=false])) svg{fill:var(--sinch-sys-color-basic-pure)}:host([inverted]:not([inverted=false])) .accent{fill:var(--sinch-ref-color-honey-500)}</style>";
 const DEFAULT_SIZE$3 = 48;
-const MIN_SIZE$3 = 4;
-const MAX_SIZE$3 = 256;
+const MIN_SIZE$2 = 4;
+const MAX_SIZE$2 = 256;
 const createIconClass$1 = (templateHTML2) => {
   const template = document.createElement("template");
   template.innerHTML = iconStylesHtml$1 + templateHTML2;
@@ -167,7 +167,7 @@ const createIconClass$1 = (templateHTML2) => {
     attributeChangedCallback(name2, _, newVal) {
       switch (name2) {
         case "size": {
-          this.$svg.style.height = attrValueToPixels(newVal, { min: MIN_SIZE$3, max: MAX_SIZE$3 });
+          this.$svg.style.height = attrValueToPixels(newVal, { min: MIN_SIZE$2, max: MAX_SIZE$2 });
           break;
         }
       }
@@ -552,10 +552,8 @@ defineCustomElement("sinch-icon-branded-wheels", IconBrandedWheels);
 const templateHTML$2Z = '<svg viewBox="0 0 48 48" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.348 20.588c-1.827.69-3.518 1.626-4.665 2.61a1.001 1.001 0 0 1-1.44-.134 1.077 1.077 0 0 1 .131-1.485c1.38-1.184 3.298-2.225 5.27-2.97 1.972-.745 4.09-1.229 5.89-1.229 4.378 0 8.423 1.897 11.104 4.2.434.372.493 1.036.132 1.484a1.001 1.001 0 0 1-1.44.135c-2.37-2.036-5.965-3.71-9.796-3.71-1.487 0-3.359.409-5.186 1.099Zm5.255 8.952a6.51 6.51 0 0 0-3.85 1.265 1.003 1.003 0 0 1-1.425-.249 1.075 1.075 0 0 1 .242-1.47 8.513 8.513 0 0 1 5.033-1.655c1.803 0 3.562.579 5.033 1.656.46.337.568.995.241 1.47a1.003 1.003 0 0 1-1.425.248 6.51 6.51 0 0 0-3.85-1.266Z" class="accent"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24.823 24.606c-3.158 0-5.663.978-7.593 2.427a1.054 1.054 0 0 1-1.476-.21 1.056 1.056 0 0 1 .21-1.479c2.288-1.717 5.235-2.85 8.859-2.85 3.155 0 5.482 1.19 7.695 2.85.465.35.56 1.012.21 1.478a1.053 1.053 0 0 1-1.476.211c-2.004-1.505-3.894-2.427-6.43-2.427Zm-.331-10.495a20.022 20.022 0 0 0-13.248 5.011 1.053 1.053 0 0 1-1.488-.093 1.056 1.056 0 0 1 .093-1.49 22.13 22.13 0 0 1 29.286 0c.437.385.479 1.052.094 1.49a1.053 1.053 0 0 1-1.488.093 20.022 20.022 0 0 0-13.249-5.01Zm-1.054 18.941c0-.583.472-1.056 1.054-1.056h.014a1.055 1.055 0 0 1 0 2.111h-.014a1.055 1.055 0 0 1-1.054-1.055Z"/></svg>';
 const IconBrandedWiFi = createIconClass$1(templateHTML$2Z);
 defineCustomElement("sinch-icon-branded-wi-fi", IconBrandedWiFi);
-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$2 = 48;
-const MIN_SIZE$2 = 4;
-const MAX_SIZE$2 = 256;
 const createIconClass = (templateHTML2) => {
   const template = document.createElement("template");
   template.innerHTML = iconStylesHtml + templateHTML2;
@@ -582,119 +580,119 @@ const createIconClass = (templateHTML2) => {
     attributeChangedCallback(name2, _, newVal) {
       switch (name2) {
         case "size": {
-          this.$svg.style.height = attrValueToPixels(newVal, { min: MIN_SIZE$2, max: MAX_SIZE$2 });
+          this.style.setProperty("--sinch-comp-icon-channel-size", attrValueToPixels(newVal));
           break;
         }
       }
     }
   };
 };
-const templateHTML$2Y = '<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$2Y = '<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$2Y);
 defineCustomElement("sinch-icon-channel-apple-business-chat", IconChannelAppleBusinessChat);
-const templateHTML$2X = '<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$2X = '<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$2X);
 defineCustomElement("sinch-icon-channel-apple-business-chat-square", IconChannelAppleBusinessChatSquare);
-const templateHTML$2W = '<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$2W = '<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$2W);
 defineCustomElement("sinch-icon-channel-facebook", IconChannelFacebook);
-const templateHTML$2V = '<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$2V = '<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$2V);
 defineCustomElement("sinch-icon-channel-facebook-messenger", IconChannelFacebookMessenger);
-const templateHTML$2U = '<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$2U = '<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$2U);
 defineCustomElement("sinch-icon-channel-facebook-messenger-square", IconChannelFacebookMessengerSquare);
-const templateHTML$2T = '<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$2T = '<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$2T);
 defineCustomElement("sinch-icon-channel-facebook-square", IconChannelFacebookSquare);
-const templateHTML$2S = '<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$2S = '<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$2S);
 defineCustomElement("sinch-icon-channel-google-business", IconChannelGoogleBusiness);
-const templateHTML$2R = '<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$2R = '<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$2R);
 defineCustomElement("sinch-icon-channel-google-business-square", IconChannelGoogleBusinessSquare);
-const templateHTML$2Q = '<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$2Q = '<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$2Q);
 defineCustomElement("sinch-icon-channel-instagram", IconChannelInstagram);
-const templateHTML$2P = '<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$2P = '<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$2P);
 defineCustomElement("sinch-icon-channel-instagram-square", IconChannelInstagramSquare);
-const templateHTML$2O = '<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$2O = '<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$2O);
 defineCustomElement("sinch-icon-channel-line", IconChannelLine);
-const templateHTML$2N = '<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$2N = '<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$2N);
 defineCustomElement("sinch-icon-channel-line-square", IconChannelLineSquare);
-const templateHTML$2M = '<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$2M = '<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$2M);
 defineCustomElement("sinch-icon-channel-mms-round", IconChannelMmsRound);
-const templateHTML$2L = '<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$2L = '<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$2L);
 defineCustomElement("sinch-icon-channel-mms-square", IconChannelMmsSquare);
-const templateHTML$2K = '<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$2K = '<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$2K);
 defineCustomElement("sinch-icon-channel-notify", IconChannelNotify);
-const templateHTML$2J = '<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$2J = '<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$2J);
 defineCustomElement("sinch-icon-channel-notify-square", IconChannelNotifySquare);
-const templateHTML$2I = '<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$2I = '<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-a" 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-b" 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-c" 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$2I);
 defineCustomElement("sinch-icon-channel-push-round", IconChannelPushRound);
-const templateHTML$2H = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path fill="#fff" d="M8.6 0h31.9c4.4 0 8 3.615 8 8.033v31.934c0 4.418-3.6 8.033-8 8.033H8.6c-4.4 0-8-3.615-8-8.033V8.033C.6 3.615 4.2 0 8.6 0Z"/><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$2H = '<style>:host{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-c" 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-b" 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 IconChannelPushSquare = createIconClass(templateHTML$2H);
 defineCustomElement("sinch-icon-channel-push-square", IconChannelPushSquare);
-const templateHTML$2G = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><circle cx="24.5" cy="24" r="24" fill="#fff"/><path fill="#242424" fill-rule="evenodd" d="M29.058 14.868a2.86 2.86 0 0 0-2.86-2.858c-2.6 0-5.242-.003-7.874-.006L13.667 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.923-3.05h6.95a2.856 2.856 0 0 0 2.855-2.857v-8.942Zm-5.613 5.656a1.117 1.117 0 0 0 0-1.935l-4.428-2.556a1.117 1.117 0 0 0-1.676.967v5.113c0 .86.931 1.398 1.676.968l4.428-2.557Z" clip-rule="evenodd"/><path fill="#242424" d="m20.035 28.948-.1.079v.866a2.856 2.856 0 0 0 2.855 2.857h6.859l4.02 3.072a.857.857 0 0 0 1.377-.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.167Z"/></svg>';
+const templateHTML$2G = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-comp-icon-channel-color-rcs-bg,linear-gradient(180deg,#fff 0,#fff 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-rcs-layera,#242424)}#shape-b{fill:var(--sinch-comp-icon-channel-color-rcs-layerb,#242424)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" d="M19.535 28.9482L19.4342 29.0266V29.8928C19.4342 31.4708 20.7122 32.75 22.2901 32.75H29.149L33.1681 35.8223C33.7321 36.2534 34.5458 35.8512 34.5458 35.1413V32.75H34.8251C36.403 32.75 37.6825 31.4708 37.6825 29.8928V20.939C37.6825 19.361 36.4033 18.0818 34.8254 18.0828C33.5054 18.0837 32.1744 18.085 30.8394 18.0863V23.8101C30.8394 26.6469 28.5408 28.9482 25.7021 28.9482H19.535Z"/><path id="shape-b" fill-rule="evenodd" clip-rule="evenodd" d="M28.5584 14.8682C28.5584 13.2891 27.2774 12.0095 25.6983 12.0096C23.0984 12.0097 20.4559 12.007 17.8243 12.0042C16.2644 12.0026 14.7083 12.001 13.1672 12C11.5892 11.999 10.3101 13.2782 10.3101 14.8562V23.81C10.3101 25.388 11.5896 26.6672 13.1675 26.6672H13.4468V29.0404C13.4468 29.7536 14.267 30.1548 14.8301 29.717L18.7525 26.6672H25.7021C27.2801 26.6672 28.5584 25.388 28.5584 23.81V14.8682ZM22.9447 20.5243C23.6897 20.0942 23.6897 19.019 22.9447 18.5889L18.5171 16.0326C17.7721 15.6025 16.8409 16.1401 16.8409 17.0003V22.1129C16.8409 22.9731 17.7721 23.5107 18.5171 23.0806L22.9447 20.5243Z"/></svg>';
 const IconChannelRcsRound = createIconClass(templateHTML$2G);
 defineCustomElement("sinch-icon-channel-rcs-round", IconChannelRcsRound);
-const templateHTML$2F = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path fill="#fff" d="M8.6 0h31.9c4.4 0 8 3.615 8 8.033v31.934c0 4.418-3.6 8.033-8 8.033H8.6c-4.4 0-8-3.615-8-8.033V8.033C.6 3.615 4.2 0 8.6 0Z"/><path fill="#242424" fill-rule="evenodd" d="M29.058 14.868a2.86 2.86 0 0 0-2.86-2.858c-2.6 0-5.242-.003-7.874-.006L13.667 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.923-3.05h6.95a2.856 2.856 0 0 0 2.855-2.857v-8.942Zm-5.613 5.656a1.117 1.117 0 0 0 0-1.935l-4.428-2.556a1.117 1.117 0 0 0-1.676.967v5.113c0 .86.931 1.398 1.676.968l4.428-2.557Z" clip-rule="evenodd"/><path fill="#242424" d="m20.035 28.948-.1.079v.866a2.856 2.856 0 0 0 2.855 2.857h6.859l4.02 3.072a.857.857 0 0 0 1.377-.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.167Z"/></svg>';
+const templateHTML$2F = '<style>:host{background:var(--sinch-comp-icon-channel-color-rcs-bg,linear-gradient(180deg,#fff 0,#fff 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-rcs-layera,#242424)}#shape-b{fill:var(--sinch-comp-icon-channel-color-rcs-layerb,#242424)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-b" d="M19.535 28.9482L19.4342 29.0266V29.8928C19.4342 31.4708 20.7122 32.75 22.2901 32.75H29.149L33.1681 35.8223C33.7321 36.2534 34.5458 35.8512 34.5458 35.1413V32.75H34.8251C36.403 32.75 37.6825 31.4708 37.6825 29.8928V20.939C37.6825 19.361 36.4033 18.0818 34.8254 18.0828C33.5054 18.0837 32.1744 18.085 30.8394 18.0863V23.8101C30.8394 26.6469 28.5408 28.9482 25.7021 28.9482H19.535Z"/><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M28.5584 14.8682C28.5584 13.2891 27.2774 12.0095 25.6983 12.0096C23.0984 12.0097 20.4559 12.007 17.8243 12.0042C16.2644 12.0026 14.7083 12.001 13.1672 12C11.5892 11.999 10.3101 13.2782 10.3101 14.8562V23.81C10.3101 25.388 11.5896 26.6672 13.1675 26.6672H13.4468V29.0404C13.4468 29.7536 14.267 30.1548 14.8301 29.717L18.7525 26.6672H25.7021C27.2801 26.6672 28.5584 25.388 28.5584 23.81V14.8682ZM22.9447 20.5243C23.6897 20.0942 23.6897 19.019 22.9447 18.5889L18.5171 16.0326C17.7721 15.6025 16.8409 16.1401 16.8409 17.0003V22.1129C16.8409 22.9731 17.7721 23.5107 18.5171 23.0806L22.9447 20.5243Z"/></svg>';
 const IconChannelRcsSquare = createIconClass(templateHTML$2F);
 defineCustomElement("sinch-icon-channel-rcs-square", IconChannelRcsSquare);
-const templateHTML$2E = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><circle cx="24.5" cy="24" r="24" fill="#fff"/><path fill="#000" fill-rule="evenodd" d="M29.062 14.868a2.86 2.86 0 0 0-2.86-2.858c-2.6 0-5.242-.003-7.874-.006L13.671 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.942ZM15.02 15.977a1.14 1.14 0 1 0 0 2.28h9.893a1.14 1.14 0 1 0 0-2.28H15.02Zm0 4.557a1.14 1.14 0 1 0 0 2.281h9.893a1.14 1.14 0 1 0 0-2.28H15.02Z" clip-rule="evenodd"/><path fill="#000" d="m20.039 28.948-.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.167Z"/></svg>';
+const templateHTML$2E = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-comp-icon-channel-color-sms-bg,linear-gradient(180deg,#fff 0,#fff 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-sms-layera,#242424)}#shape-b{fill:var(--sinch-comp-icon-channel-color-sms-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.8223C33.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.8682ZM14.5196 15.9766C13.8897 15.9766 13.3791 16.4872 13.3791 17.1171C13.3791 17.747 13.8897 18.2576 14.5196 18.2576H24.4132C25.0431 18.2576 25.5537 17.747 25.5537 17.1171C25.5537 16.4872 25.0431 15.9766 24.4132 15.9766H14.5196ZM14.5196 20.5342C13.8897 20.5342 13.3791 21.0448 13.3791 21.6747C13.3791 22.3046 13.8897 22.8152 14.5196 22.8152H24.4132C25.0431 22.8152 25.5537 22.3046 25.5537 21.6747C25.5537 21.0448 25.0431 20.5342 24.4132 20.5342H14.5196Z"/></svg>';
 const IconChannelSmsRound = createIconClass(templateHTML$2E);
 defineCustomElement("sinch-icon-channel-sms-round", IconChannelSmsRound);
-const templateHTML$2D = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path fill="#fff" d="M8.6 0h31.9c4.4 0 8 3.615 8 8.033v31.934c0 4.418-3.6 8.033-8 8.033H8.6c-4.4 0-8-3.615-8-8.033V8.033C.6 3.615 4.2 0 8.6 0Z"/><path fill="#000" fill-rule="evenodd" d="M29.062 14.868a2.86 2.86 0 0 0-2.86-2.858c-2.6 0-5.242-.003-7.874-.006L13.671 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.942ZM15.02 15.977a1.14 1.14 0 1 0 0 2.28h9.893a1.14 1.14 0 1 0 0-2.28H15.02Zm0 4.557a1.14 1.14 0 1 0 0 2.281h9.893a1.14 1.14 0 1 0 0-2.28H15.02Z" clip-rule="evenodd"/><path fill="#000" d="m20.039 28.948-.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.167Z"/></svg>';
+const templateHTML$2D = '<style>:host{background:var(--sinch-comp-icon-channel-color-sms-bg,linear-gradient(180deg,#fff 0,#fff 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-sms-layera,#242424)}#shape-b{fill:var(--sinch-comp-icon-channel-color-sms-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.8223C33.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.8682ZM14.5196 15.9766C13.8897 15.9766 13.3791 16.4872 13.3791 17.1171C13.3791 17.747 13.8897 18.2576 14.5196 18.2576H24.4132C25.0431 18.2576 25.5537 17.747 25.5537 17.1171C25.5537 16.4872 25.0431 15.9766 24.4132 15.9766H14.5196ZM14.5196 20.5342C13.8897 20.5342 13.3791 21.0448 13.3791 21.6747C13.3791 22.3046 13.8897 22.8152 14.5196 22.8152H24.4132C25.0431 22.8152 25.5537 22.3046 25.5537 21.6747C25.5537 21.0448 25.0431 20.5342 24.4132 20.5342H14.5196Z"/></svg>';
 const IconChannelSmsSquare = createIconClass(templateHTML$2D);
 defineCustomElement("sinch-icon-channel-sms-square", IconChannelSmsSquare);
-const templateHTML$2C = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path fill="#ffe812" d="M24 48c13.3 0 24-10.7 24-24S37.3 0 24 0 0 10.7 0 24s10.7 24 24 24z"/><path d="M24 12.2c-7.6 0-13.8 4.9-13.8 10.9 0 3.9 2.6 7.3 6.5 9.2-.2.7-1.4 4.7-1.4 5 0 0 0 .2.1.3.2.1.3 0 .3 0 .4-.1 5-3.3 5.8-3.9.8.1 1.6.2 2.5.2 7.6 0 13.8-4.9 13.8-10.9S31.6 12.2 24 12.2z"/><path fill="#ffe812" d="M16.4 26.9c-.4 0-.8-.3-.8-.8v-4.7h-1.2c-.4 0-.8-.4-.8-.8s.4-.8.8-.8h4.1c.4 0 .8.4.8.8s-.4.8-.8.8h-1.2v4.7c-.2.4-.5.8-.9.8zm6.9 0c-.3 0-.6-.1-.7-.4l-.4-1h-2.4l-.4 1c-.1.2-.3.4-.7.4-.2 0-.4 0-.5-.1-.2-.1-.4-.4-.2-1.1l1.9-5c.1-.4.5-.8 1.1-.8.5 0 .9.4 1.1.8l1.9 5c.2.8 0 1-.2 1.1-.1 0-.3.1-.5.1zm-1.4-2.8-.8-2.3-.8 2.3h1.6zm3.4 2.7c-.4 0-.8-.3-.8-.7v-5.4c0-.4.4-.8.8-.8s.8.4.8.8v4.7h1.7c.4 0 .8.3.8.7 0 .4-.3.7-.8.7h-2.5zm4.5.1c-.4 0-.8-.4-.8-.8v-5.5c0-.4.4-.8.8-.8s.8.4.8.8v1.7l2.2-2.2c.1-.1.3-.2.4-.2.2 0 .4.1.5.2.1.1.2.3.2.5s-.1.4-.2.5L32 23l2 2.6c.1.2.2.4.2.6 0 .2-.1.4-.3.5-.1.1-.3.2-.5.2-.3 0-.5-.1-.6-.3l-1.9-2.5-.3.3v1.7c0 .4-.4.8-.8.8z"/></svg>';
+const templateHTML$2C = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-comp-icon-channel-color-talk-bg,linear-gradient(180deg,#ffe812 0,#ffe812 100%))}#shape-a{fill:var(--comp-icon-channel-color-talk-layera,#000)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" d="M21.1 21.8912L21.9 24.2009H20.3L21.1 21.8912Z"/><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M10.2 23.1966C10.2 17.1715 16.4 12.251 24 12.251C31.6 12.251 37.7999 17.0711 37.7999 23.0962C37.7999 29.1213 31.6 34.0418 24 34.0418C23.1 34.0418 22.3 33.9414 21.5 33.841C20.7 34.4435 16.1 37.6569 15.7 37.7573C15.7 37.7573 15.6 37.8577 15.4 37.7573C15.3 37.6569 15.3 37.4561 15.3 37.4561C15.3 37.217 16.0555 34.6387 16.4675 33.2327C16.5747 32.8668 16.6586 32.5803 16.7 32.4351C12.8 30.5272 10.2 27.113 10.2 23.1966ZM15.6 26.2092C15.6 26.7113 16 27.0126 16.4 27.0126C16.8 27.0126 17.1 26.6109 17.3 26.2092V21.4896H18.5C18.9 21.4896 19.3 21.0879 19.3 20.6862C19.3 20.2845 18.9 19.8829 18.5 19.8829H14.4C14 19.8829 13.6 20.2845 13.6 20.6862C13.6 21.0879 14 21.4896 14.4 21.4896H15.6V26.2092ZM22.6 26.6109C22.7 26.9122 23 27.0126 23.3 27.0126C23.4171 27.0126 23.5343 26.9781 23.6313 26.9496C23.7 26.9294 23.7586 26.9122 23.8 26.9122C24 26.8117 24.2 26.6109 24 25.8076L22.1 20.7866C21.9 20.385 21.5 19.9833 21 19.9833C20.4 19.9833 20 20.385 19.9 20.7866L18 25.8076C17.8 26.5105 18 26.8117 18.2 26.9122C18.3 27.0126 18.5 27.0126 18.7 27.0126C19.1 27.0126 19.3 26.8117 19.4 26.6109L19.8 25.6067H22.2L22.6 26.6109ZM24.5 26.2092C24.5 26.6109 24.9 26.9122 25.3 26.9122H27.8C28.3 26.9122 28.6 26.6109 28.6 26.2092C28.6 25.8076 28.2 25.5063 27.8 25.5063H26.1V20.7866C26.1 20.385 25.7 19.9833 25.3 19.9833C24.9 19.9833 24.5 20.385 24.5 20.7866V26.2092ZM29 26.2092C29 26.6109 29.4 27.0126 29.8 27.0126C30.2 27.0126 30.6 26.6109 30.6 26.2092V24.5021L30.9 24.2009L32.8 26.7113C32.9 26.9122 33.1 27.0126 33.4 27.0126C33.6 27.0126 33.8 26.9122 33.9 26.8117C34.1 26.7113 34.2 26.5105 34.2 26.3097C34.2 26.1088 34.1 25.908 34 25.7071L32 23.0963L33.7 21.1883C33.8 21.0879 33.9 20.8871 33.9 20.6862C33.9 20.4854 33.8 20.2845 33.7 20.1841C33.6 20.0837 33.4 19.9833 33.2 19.9833C33.1 19.9833 32.9 20.0837 32.8 20.1841L30.6 22.3933V20.6862C30.6 20.2845 30.2 19.8829 29.8 19.8829C29.4 19.8829 29 20.2845 29 20.6862V26.2092Z"/></svg>';
 const IconChannelTalk = createIconClass(templateHTML$2C);
 defineCustomElement("sinch-icon-channel-talk", IconChannelTalk);
-const templateHTML$2B = '<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="#FFE812"/><path d="M24 12.251c-7.6 0-13.8 4.92-13.8 10.946 0 3.916 2.6 7.33 6.5 9.238-.2.703-1.4 4.72-1.4 5.021 0 0 0 .201.1.301.2.1.3 0 .3 0 .4-.1 5-3.313 5.8-3.916.8.1 1.6.2 2.5.2 7.6 0 13.8-4.92 13.8-10.945S31.6 12.251 24 12.251Z" fill="#000"/><path d="M16.4 27.012a.79.79 0 0 1-.8-.803v-4.72h-1.2c-.4 0-.8-.401-.8-.803 0-.401.4-.803.8-.803h4.1c.4 0 .8.402.8.803 0 .402-.4.803-.8.803h-1.2v4.72c-.2.402-.5.803-.9.803Zm6.9 0c-.3 0-.6-.1-.7-.401l-.4-1.004h-2.4l-.4 1.004c-.1.2-.3.401-.7.401-.2 0-.4 0-.5-.1-.2-.1-.4-.402-.2-1.104l1.9-5.021c.1-.402.5-.804 1.1-.804.5 0 .9.402 1.1.804l1.9 5.02c.2.804 0 1.005-.2 1.105-.1 0-.3.1-.5.1Zm-1.4-2.811-.8-2.31-.8 2.31h1.6Zm3.4 2.711c-.4 0-.8-.301-.8-.703v-5.422c0-.402.4-.804.8-.804s.8.402.8.804v4.72h1.7c.4 0 .8.3.8.702 0 .402-.3.703-.8.703h-2.5Zm4.5.1c-.4 0-.8-.401-.8-.803v-5.523c0-.401.4-.803.8-.803s.8.402.8.803v1.707l2.2-2.209c.1-.1.3-.2.4-.2.2 0 .4.1.5.2.1.1.2.301.2.502s-.1.402-.2.502L32 23.096l2 2.611c.1.2.2.402.2.603 0 .2-.1.401-.3.502-.1.1-.3.2-.5.2-.3 0-.5-.1-.6-.3L30.9 24.2l-.3.301v1.707c0 .402-.4.803-.8.803Z" fill="#FFE812"/></svg>';
+const templateHTML$2B = '<style>:host{background:var(--sinch-comp-icon-channel-color-talk-bg,linear-gradient(180deg,#ffe812 0,#ffe812 100%))}#shape-a{fill:var(--comp-icon-channel-color-talk-layera,#000)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" d="M21.1 21.8912L21.9 24.2009H20.3L21.1 21.8912Z"/><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M10.2 23.1966C10.2 17.1715 16.4 12.251 24 12.251C31.6 12.251 37.7999 17.0711 37.7999 23.0962C37.7999 29.1213 31.6 34.0418 24 34.0418C23.1 34.0418 22.3 33.9414 21.5 33.841C20.7 34.4435 16.1 37.6569 15.7 37.7573C15.7 37.7573 15.6 37.8577 15.4 37.7573C15.3 37.6569 15.3 37.4561 15.3 37.4561C15.3 37.217 16.0555 34.6387 16.4675 33.2327C16.5747 32.8668 16.6586 32.5803 16.7 32.4351C12.8 30.5272 10.2 27.113 10.2 23.1966ZM15.6 26.2092C15.6 26.7113 16 27.0126 16.4 27.0126C16.8 27.0126 17.1 26.6109 17.3 26.2092V21.4896H18.5C18.9 21.4896 19.3 21.0879 19.3 20.6862C19.3 20.2845 18.9 19.8829 18.5 19.8829H14.4C14 19.8829 13.6 20.2845 13.6 20.6862C13.6 21.0879 14 21.4896 14.4 21.4896H15.6V26.2092ZM22.6 26.6109C22.7 26.9122 23 27.0126 23.3 27.0126C23.4171 27.0126 23.5343 26.9781 23.6313 26.9496C23.7 26.9294 23.7586 26.9122 23.8 26.9122C24 26.8117 24.2 26.6109 24 25.8076L22.1 20.7866C21.9 20.385 21.5 19.9833 21 19.9833C20.4 19.9833 20 20.385 19.9 20.7866L18 25.8076C17.8 26.5105 18 26.8117 18.2 26.9122C18.3 27.0126 18.5 27.0126 18.7 27.0126C19.1 27.0126 19.3 26.8117 19.4 26.6109L19.8 25.6067H22.2L22.6 26.6109ZM24.5 26.2092C24.5 26.6109 24.9 26.9122 25.3 26.9122H27.8C28.3 26.9122 28.6 26.6109 28.6 26.2092C28.6 25.8076 28.2 25.5063 27.8 25.5063H26.1V20.7866C26.1 20.385 25.7 19.9833 25.3 19.9833C24.9 19.9833 24.5 20.385 24.5 20.7866V26.2092ZM29 26.2092C29 26.6109 29.4 27.0126 29.8 27.0126C30.2 27.0126 30.6 26.6109 30.6 26.2092V24.5021L30.9 24.2009L32.8 26.7113C32.9 26.9122 33.1 27.0126 33.4 27.0126C33.6 27.0126 33.8 26.9122 33.9 26.8117C34.1 26.7113 34.2 26.5105 34.2 26.3097C34.2 26.1088 34.1 25.908 34 25.7071L32 23.0963L33.7 21.1883C33.8 21.0879 33.9 20.8871 33.9 20.6862C33.9 20.4854 33.8 20.2845 33.7 20.1841C33.6 20.0837 33.4 19.9833 33.2 19.9833C33.1 19.9833 32.9 20.0837 32.8 20.1841L30.6 22.3933V20.6862C30.6 20.2845 30.2 19.8829 29.8 19.8829C29.4 19.8829 29 20.2845 29 20.6862V26.2092Z"/></svg>';
 const IconChannelTalkSquare = createIconClass(templateHTML$2B);
 defineCustomElement("sinch-icon-channel-talk-square", IconChannelTalkSquare);
-const templateHTML$2A = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><linearGradient id="telegram-gradient" x1="-934.041" x2="-934.041" y1="564.485" y2="564.437" gradientTransform="matrix(1000 0 0 -1000 934065 564485)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2aabee"/><stop offset="1" stop-color="#229ed9"/></linearGradient><circle cx="24" cy="24" r="24" fill="url(#telegram-gradient)" fill-rule="evenodd" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="M10.9 23.7c7-3 11.7-5.1 14-6 6.7-2.8 8-3.3 9-3.3.2 0 .6 0 .9.3.2.2.3.5.3.6s.1.6 0 .9c-.4 3.8-1.9 13-2.7 17.3-.3 1.8-1 2.4-1.6 2.5-1.4.1-2.5-.9-3.8-1.8l-5.4-3.6c-2.4-1.6-.8-2.4.5-3.8.4-.4 6.5-6 6.6-6.5 0-.1 0-.3-.1-.4-.1-.1-.3-.1-.5 0-.2 0-3.6 2.3-10.1 6.7-1 .7-1.8 1-2.6 1-.9 0-2.5-.5-3.7-.9-1.5-.5-2.7-.7-2.6-1.6 0-.5.6-.9 1.8-1.4z" clip-rule="evenodd"/></svg>';
+const templateHTML$2A = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-comp-icon-channel-color-telegram-bg,linear-gradient(180deg,#25a2e0 0,#25a2e0 100%))}#shape-a{fill:var(--comp-icon-channel-color-telegram-layera,#FFFFFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M10.8023 23.3965C17.7888 20.3965 22.4798 18.2965 24.7753 17.3965C31.4624 14.5965 32.7599 14.0965 33.758 14.0965C33.9576 14.0965 34.3568 14.0965 34.6562 14.3965C34.8558 14.5965 34.9556 14.8965 34.9556 14.9965C34.9556 15.0965 35.0554 15.5965 34.9556 15.8965C34.5564 19.6965 33.0593 28.8965 32.2609 33.1965C31.9614 34.9965 31.2628 35.5965 30.6639 35.6965C29.2666 35.7965 28.1688 34.7965 26.8713 33.8965L21.4817 30.2965C19.0863 28.6965 20.6832 27.8965 21.9807 26.4965C22.38 26.0965 28.4682 20.4965 28.568 19.9965C28.568 19.8965 28.568 19.6965 28.4682 19.5965C28.3684 19.4965 28.1688 19.4965 27.9692 19.5965C27.7695 19.5965 24.3761 21.8965 17.8886 26.2965C16.8906 26.9965 16.0921 27.2965 15.2937 27.2965C14.3954 27.2965 12.7985 26.7965 11.6008 26.3965C10.1037 25.8965 8.90601 25.6965 9.00582 24.7965C9.00582 24.2965 9.60466 23.8965 10.8023 23.3965Z"/></svg>';
 const IconChannelTelegram = createIconClass(templateHTML$2A);
 defineCustomElement("sinch-icon-channel-telegram", IconChannelTelegram);
-const templateHTML$2z = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path d="M8 0h31.9c4.4 0 8 3.615 8 8.033v31.934c0 4.418-3.6 8.033-8 8.033H8c-4.4 0-8-3.615-8-8.033V8.033C0 3.615 3.6 0 8 0Z" fill="#25A2E0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10.9 23.7c7-3 11.7-5.1 14-6 6.7-2.8 8-3.3 9-3.3.2 0 .6 0 .9.3.2.2.3.5.3.6 0 .1.1.6 0 .9-.4 3.8-1.9 13-2.7 17.3-.3 1.8-1 2.4-1.6 2.5-1.4.1-2.5-.9-3.8-1.8l-5.4-3.6c-2.4-1.6-.8-2.4.5-3.8.4-.4 6.5-6 6.6-6.5 0-.1 0-.3-.1-.4-.1-.1-.3-.1-.5 0-.2 0-3.6 2.3-10.1 6.7-1 .7-1.8 1-2.6 1-.9 0-2.5-.5-3.7-.9-1.5-.5-2.7-.7-2.6-1.6 0-.5.6-.9 1.8-1.4Z" fill="#fff"/></svg>';
+const templateHTML$2z = '<style>:host{background:var(--sinch-comp-icon-channel-color-telegram-bg,linear-gradient(180deg,#25a2e0 0,#25a2e0 100%))}#shape-a{fill:var(--comp-icon-channel-color-telegram-layera,#FFFFFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M11.8023 22.3965C18.7888 19.3965 23.4798 17.2965 25.7753 16.3965C32.4624 13.5965 33.7599 13.0965 34.758 13.0965C34.9576 13.0965 35.3568 13.0965 35.6562 13.3965C35.8558 13.5965 35.9556 13.8965 35.9556 13.9965C35.9556 14.0965 36.0554 14.5965 35.9556 14.8965C35.5564 18.6965 34.0593 27.8965 33.2609 32.1965C32.9614 33.9965 32.2628 34.5965 31.6639 34.6965C30.2666 34.7965 29.1688 33.7965 27.8713 32.8965L22.4817 29.2965C20.0863 27.6965 21.6832 26.8965 22.9807 25.4965C23.38 25.0965 29.4682 19.4965 29.568 18.9965C29.568 18.8965 29.568 18.6965 29.4682 18.5965C29.3684 18.4965 29.1688 18.4965 28.9692 18.5965C28.7695 18.5965 25.3761 20.8965 18.8886 25.2965C17.8906 25.9965 17.0921 26.2965 16.2937 26.2965C15.3954 26.2965 13.7985 25.7965 12.6008 25.3965C11.1037 24.8965 9.90601 24.6965 10.0058 23.7965C10.0058 23.2965 10.6047 22.8965 11.8023 22.3965Z"/></svg>';
 const IconChannelTelegramSquare = createIconClass(templateHTML$2z);
 defineCustomElement("sinch-icon-channel-telegram-square", IconChannelTelegramSquare);
-const templateHTML$2y = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path fill="#1d9bf0" 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="M34.6 19.7v.7c0 7-5.3 15.1-15.1 15.1-2.9 0-5.7-.8-8.1-2.4.4.1.8.1 1.3.1 2.4 0 4.7-.8 6.6-2.3-2.3 0-4.3-1.5-4.9-3.7.8.2 1.6.1 2.4-.1-2.5-.5-4.2-2.7-4.2-5.2v-.1c.7.4 1.6.6 2.4.7-2.3-1.6-3-4.6-1.6-7.1 2.7 3.3 6.7 5.3 10.9 5.5-.4-1.8.2-3.8 1.5-5.1 2.1-2 5.5-1.9 7.5.2 1.2-.2 2.3-.7 3.4-1.3-.4 1.2-1.2 2.3-2.3 2.9 1-.1 2.1-.4 3-.8-.9 1.3-1.8 2.2-2.8 2.9z"/></svg>';
+const templateHTML$2y = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-icon-channel-color-twitter-bg,linear-gradient(180deg,#1d9bf0 0,#1d9bf0 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-twitter-layera,#FFFFFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" d="M34.7 19.682V20.3849C34.7 27.4142 29.4 35.5481 19.6 35.5481C16.7 35.5481 13.9 34.7448 11.5 33.1381C11.9 33.2385 12.3 33.2385 12.8 33.2385C15.2 33.2385 17.5 32.4351 19.4 30.9289C17.1 30.9289 15.1 29.4226 14.5 27.2134C15.3 27.4142 16.1 27.3138 16.9 27.113C14.4 26.6109 12.7 24.4017 12.7 21.8912V21.7908C13.4 22.1925 14.3 22.3933 15.1 22.4937C12.8 20.887 12.1 17.8745 13.5 15.364C16.2 18.6778 20.2 20.6862 24.4 20.887C24 19.0795 24.6 17.0711 25.9 15.7657C28 13.7573 31.4 13.8577 33.4 15.9665C34.6 15.7657 35.7 15.2636 36.8 14.6611C36.4 15.8661 35.6 16.9707 34.5 17.5732C35.5 17.4728 36.6 17.1716 37.5 16.7699C36.6 18.0753 35.7 18.9791 34.7 19.682Z"/></svg>';
 const IconChannelTwitter = createIconClass(templateHTML$2y);
 defineCustomElement("sinch-icon-channel-twitter", IconChannelTwitter);
-const templateHTML$2x = '<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="#1D9BF0"/><path d="M34.7 19.682v.703c0 7.03-5.3 15.163-15.1 15.163-2.9 0-5.7-.803-8.1-2.41.4.1.8.1 1.3.1 2.4 0 4.7-.803 6.6-2.31-2.3 0-4.3-1.505-4.9-3.715.8.201 1.6.1 2.4-.1-2.5-.502-4.2-2.711-4.2-5.222v-.1c.7.401 1.6.602 2.4.703-2.3-1.607-3-4.62-1.6-7.13 2.7 3.314 6.7 5.322 10.9 5.523-.4-1.808.2-3.816 1.5-5.121 2.1-2.009 5.5-1.908 7.5.2 1.2-.2 2.3-.702 3.4-1.305-.4 1.205-1.2 2.31-2.3 2.912 1-.1 2.1-.401 3-.803-.9 1.305-1.8 2.209-2.8 2.912Z" fill="#fff"/></svg>';
+const templateHTML$2x = '<style>:host{background:var(--sinch-icon-channel-color-twitter-bg,linear-gradient(180deg,#1d9bf0 0,#1d9bf0 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-twitter-layera,#FFFFFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" d="M34.7 19.682V20.3849C34.7 27.4142 29.4 35.5481 19.6 35.5481C16.7 35.5481 13.9 34.7448 11.5 33.1381C11.9 33.2385 12.3 33.2385 12.8 33.2385C15.2 33.2385 17.5 32.4351 19.4 30.9289C17.1 30.9289 15.1 29.4226 14.5 27.2134C15.3 27.4142 16.1 27.3138 16.9 27.113C14.4 26.6109 12.7 24.4017 12.7 21.8912V21.7908C13.4 22.1925 14.3 22.3933 15.1 22.4937C12.8 20.887 12.1 17.8745 13.5 15.364C16.2 18.6778 20.2 20.6862 24.4 20.887C24 19.0795 24.6 17.0711 25.9 15.7657C28 13.7573 31.4 13.8577 33.4 15.9665C34.6 15.7657 35.7 15.2636 36.8 14.6611C36.4 15.8661 35.6 16.9707 34.5 17.5732C35.5 17.4728 36.6 17.1716 37.5 16.7699C36.6 18.0753 35.7 18.9791 34.7 19.682Z"/></svg>';
 const IconChannelTwitterSquare = createIconClass(templateHTML$2x);
 defineCustomElement("sinch-icon-channel-twitter-square", IconChannelTwitterSquare);
-const templateHTML$2w = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path fill="#7360f2" d="M24 48c13.3 0 24-10.7 24-24S37.3 0 24 0 0 10.7 0 24s10.7 24 24 24z"/><g fill="#fff"><path d="M35.4 12.6c-.8-.7-3.9-3-10.8-3 0 0-8.2-.5-12.1 3.2-2.2 2.2-3 5.5-3.1 9.5-.1 4-.2 11.5 7.1 13.6V39s0 1.3.8 1.5c1 .3 1.6-.6 2.6-1.7.5-.6 1.3-1.4 1.8-2 5 .4 8.8-.5 9.2-.7 1-.3 6.7-1.1 7.6-8.6.8-7.7-.6-12.6-3.1-14.9zm.8 14.4c-.8 6.3-5.4 6.7-6.2 7-.4.1-3.7 1-7.9.7 0 0-3.1 3.8-4.1 4.8-.2.2-.3.2-.5.2s-.2-.2-.2-.5V34c-6.1-1.7-5.8-8.1-5.7-11.5.1-3.4.7-6.1 2.6-8 3.4-3 10.3-2.6 10.3-2.6 5.9 0 8.7 1.8 9.3 2.4 2.1 1.8 3.2 6.2 2.4 12.7z"/><path d="M27.4 22.5c-.2 0-.4-.2-.4-.4-.1-1.3-.7-2-2-2-.2 0-.4-.2-.4-.4s.2-.4.4-.4c1.7.1 2.6 1.1 2.7 2.8.1.2-.1.4-.3.4z"/><path d="M29.4 23.2c-.2 0-.4-.2-.4-.4 0-1.3-.4-2.4-1.2-3.3-.8-.9-1.9-1.4-3.4-1.5-.2 0-.4-.2-.4-.4s.2-.4.4-.4c1.7.1 3 .7 3.9 1.7.9 1 1.4 2.3 1.4 3.9.1.2-.1.4-.3.4z"/><path d="M31.5 24c-.2 0-.4-.2-.4-.4 0-2.4-.7-4.2-2.1-5.6-1.4-1.3-3.1-2-5.2-2.1-.2 0-.4-.2-.4-.4s.2-.4.4-.4c2.3 0 4.2.8 5.7 2.3 1.5 1.5 2.3 3.6 2.3 6.1.1.3-.1.5-.3.5zm-6.4 3.3s.6 0 .8-.3l.6-.7c.3-.4 1-.6 1.6-.2.5.3 1 .6 1.4.9.4.3 1.3 1.1 1.3 1.1.4.4.5.9.2 1.4-.3.6-.7 1.1-1.2 1.5-.4.3-.8.5-1.2.6h-.2c-.2 0-.4 0-.5-.1-.6-.2-1.6-.6-3.4-1.6-1-.5-1.9-1.2-2.8-1.9-.4-.4-.9-.7-1.3-1.1-.4-.4-.8-.8-1.1-1.3-.7-.9-1.3-1.8-1.9-2.8-.9-1.7-1.4-2.7-1.6-3.4-.1-.2-.1-.3-.1-.5v-.2c0-.4.2-.8.6-1.2.4-.5.9-.9 1.5-1.2.6-.3 1.1-.2 1.4.2 0 0 .7.9 1.1 1.3.3.5.6.9.9 1.4.4.7.1 1.3-.2 1.6l-.7.6c-.4.3-.3.8-.3.8s1.1 4.1 5.1 5.1z"/></g></svg>';
+const templateHTML$2w = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-comp-icon-channel-color-viber-bg,linear-gradient(180deg,#7360f2 0,#7360f2 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-viber-layera,#FFFFFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" d="M27 22.092C27 22.2929 27.2 22.4937 27.4 22.4937C27.6 22.4937 27.8 22.2929 27.7 22.092C27.6 20.3849 26.7 19.3808 25 19.2803C24.8 19.2803 24.6 19.4812 24.6 19.682C24.6 19.8828 24.8 20.0837 25 20.0837C26.3 20.0837 26.9 20.7866 27 22.092Z"/><path id="shape-a" d="M29.4 23.1967C29.2 23.1967 29 22.9958 29 22.795C29 21.4896 28.6 20.385 27.8 19.4812C27 18.5774 25.9 18.0753 24.4 17.9749C24.2 17.9749 24 17.7741 24 17.5732C24 17.3724 24.2 17.1716 24.4 17.1716C26.1 17.272 27.4 17.8745 28.3 18.8787C29.2 19.8829 29.7 21.1883 29.7 22.795C29.8 22.9958 29.6 23.1967 29.4 23.1967Z"/><path id="shape-a" d="M31.1 23.5983C31.1 23.7991 31.3 24 31.5 24C31.7 24 31.9 23.7991 31.7999 23.4979C31.7999 20.9874 31 18.8786 29.5 17.3724C28 15.8661 26.0999 15.0627 23.7999 15.0627C23.5999 15.0627 23.4 15.2636 23.4 15.4644C23.4 15.6653 23.5999 15.8661 23.7999 15.8661C25.8999 15.9665 27.6 16.6694 29 17.9749C30.4 19.3807 31.1 21.1883 31.1 23.5983Z"/><path id="shape-a" d="M25.9 27.0125C25.7 27.3138 25.1 27.3138 25.1 27.3138C21.1 26.3096 20 22.1925 20 22.1925C20 22.1925 19.8999 21.6904 20.2999 21.3891L21 20.7866C21.3 20.4853 21.6 19.8828 21.2 19.1799C21.05 18.9289 20.9 18.7029 20.75 18.477C20.5999 18.251 20.45 18.0251 20.2999 17.774C19.8999 17.3724 19.2 16.4686 19.2 16.4686C18.9 16.0669 18.3999 15.9665 17.7999 16.2678C17.1999 16.569 16.6999 16.9707 16.2999 17.4728C15.8999 17.8745 15.7 18.2761 15.7 18.6778V18.8786C15.7 19.0795 15.7 19.1799 15.8 19.3807C16 20.0837 16.5 21.0879 17.4 22.795C18 23.7991 18.5999 24.7029 19.2999 25.6067C19.5999 26.1088 20 26.5104 20.4 26.9121C20.6 27.113 20.8249 27.2887 21.0499 27.4644C21.2749 27.6401 21.4999 27.8159 21.7 28.0167C22.5999 28.7196 23.5 29.4226 24.5 29.9247C26.3 30.9289 27.2999 31.3305 27.9 31.5314C28 31.6318 28.2 31.6318 28.4 31.6318H28.6C29 31.5314 29.4 31.3305 29.7999 31.0293C30.2999 30.6276 30.7 30.1255 31 29.523C31.3 29.0209 31.2 28.5188 30.7999 28.1171C30.7999 28.1171 29.9 27.3138 29.5 27.0125C29.1 26.7113 28.6 26.41 28.1 26.1088C27.5 25.7071 26.8 25.9079 26.5 26.3096L25.9 27.0125Z"/><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M24.6 9.53976C31.5 9.53976 34.6 11.8494 35.4 12.5523C37.9 14.8619 39.3 19.7824 38.5 27.5147C37.67 34.4597 32.7584 35.6835 31.2145 36.0682C31.0842 36.1007 30.9778 36.1272 30.9 36.1506C30.5 36.3515 26.7 37.2552 21.7 36.8536C21.45 37.1548 21.125 37.5062 20.8 37.8577C20.475 38.2091 20.1499 38.5607 19.9 38.8619C19.767 39.0088 19.6412 39.152 19.5205 39.2894C18.7334 40.1855 18.167 40.8303 17.3 40.569C16.5 40.3682 16.5 39.0628 16.5 39.0628V35.9498C9.19996 33.841 9.29996 26.3096 9.39996 22.2929C9.49996 18.2762 10.3 14.9624 12.5 12.7531C16.4 9.03767 24.6 9.53976 24.6 9.53976ZM30.4007 33.9288C31.782 33.5765 35.4895 32.6309 36.2 27.0126C37 20.4854 35.9 16.067 33.8 14.2594C33.2 13.6569 30.4 11.8494 24.5 11.8494C24.5 11.8494 17.6 11.4477 14.2 14.4603C12.3 16.3682 11.7 19.0795 11.6 22.4937L11.5946 22.6734C11.4915 26.1287 11.3054 32.3642 17.3 34.0419V39.2636C17.3 39.5649 17.3 39.7657 17.5 39.7657C17.7 39.7657 17.8 39.7657 18 39.5649C19 38.5607 22.1 34.7448 22.1 34.7448C26.1352 35.0342 29.3397 34.2113 29.9396 34.0573L30 34.0419C30.0895 34.0081 30.2266 33.9732 30.4007 33.9288Z"/></svg>';
 const IconChannelViber = createIconClass(templateHTML$2w);
 defineCustomElement("sinch-icon-channel-viber", IconChannelViber);
-const templateHTML$2v = '<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="#7360F2"/><path d="M35.4 12.552c-.8-.703-3.9-3.012-10.8-3.012 0 0-8.2-.502-12.1 3.213-2.2 2.21-3 5.523-3.1 9.54-.1 4.017-.2 11.548 7.1 13.657v3.113s0 1.305.8 1.506c1 .301 1.6-.602 2.6-1.707.5-.603 1.3-1.406 1.8-2.009 5 .402 8.8-.502 9.2-.702 1-.302 6.7-1.105 7.6-8.636.8-7.733-.6-12.653-3.1-14.963Zm.8 14.46c-.8 6.327-5.4 6.728-6.2 7.03-.4.1-3.7 1.004-7.9.703 0 0-3.1 3.816-4.1 4.82-.2.2-.3.2-.5.2s-.2-.2-.2-.502v-5.221c-6.1-1.707-5.8-8.134-5.7-11.548.1-3.415.7-6.126 2.6-8.034 3.4-3.012 10.3-2.61 10.3-2.61 5.9 0 8.7 1.807 9.3 2.41 2.1 1.807 3.2 6.225 2.4 12.752Z" fill="#fff"/><path d="M27.4 22.494c-.2 0-.4-.201-.4-.402-.1-1.305-.7-2.008-2-2.008-.2 0-.4-.201-.4-.402 0-.2.2-.402.4-.402 1.7.1 2.6 1.105 2.7 2.812.1.2-.1.402-.3.402Z" fill="#fff"/><path d="M29.4 23.197c-.2 0-.4-.201-.4-.402 0-1.306-.4-2.41-1.2-3.314-.8-.904-1.9-1.406-3.4-1.506-.2 0-.4-.201-.4-.402 0-.2.2-.401.4-.401 1.7.1 3 .702 3.9 1.707.9 1.004 1.4 2.31 1.4 3.916.1.2-.1.402-.3.402Z" fill="#fff"/><path d="M31.5 24c-.2 0-.4-.2-.4-.402 0-2.41-.7-4.217-2.1-5.623-1.4-1.306-3.1-2.009-5.2-2.109-.2 0-.4-.2-.4-.402 0-.2.2-.401.4-.401 2.3 0 4.2.803 5.7 2.31 1.5 1.506 2.3 3.614 2.3 6.125.1.301-.1.502-.3.502Zm-6.4 3.314s.6 0 .8-.302l.6-.702c.3-.402 1-.603 1.6-.201.5.301 1 .602 1.4.903.4.302 1.3 1.105 1.3 1.105.4.402.5.904.2 1.406a4.44 4.44 0 0 1-1.2 1.506c-.4.302-.8.502-1.2.603h-.2c-.2 0-.4 0-.5-.1-.6-.201-1.6-.603-3.4-1.607-1-.502-1.9-1.205-2.8-1.908-.4-.402-.9-.703-1.3-1.105s-.8-.803-1.1-1.305c-.7-.904-1.3-1.808-1.9-2.812-.9-1.707-1.4-2.711-1.6-3.414-.1-.201-.1-.302-.1-.502v-.201c0-.402.2-.803.6-1.205.4-.502.9-.904 1.5-1.205.6-.302 1.1-.201 1.4.2 0 0 .7.904 1.1 1.306.3.502.6.904.9 1.406.4.703.1 1.305-.2 1.607l-.7.602c-.4.301-.3.803-.3.803s1.1 4.118 5.1 5.122Z" fill="#fff"/></svg>';
+const templateHTML$2v = '<style>:host{background:var(--sinch-comp-icon-channel-color-viber-bg,linear-gradient(180deg,#7360f2 0,#7360f2 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-viber-layera,#FFFFFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" d="M27 22.092C27 22.2929 27.2 22.4937 27.4 22.4937C27.6 22.4937 27.8 22.2929 27.7 22.092C27.6 20.3849 26.7 19.3808 25 19.2803C24.8 19.2803 24.6 19.4812 24.6 19.682C24.6 19.8828 24.8 20.0837 25 20.0837C26.3 20.0837 26.9 20.7866 27 22.092Z"/><path id="shape-a" d="M29.4 23.1967C29.2 23.1967 29 22.9958 29 22.795C29 21.4896 28.6 20.385 27.8 19.4812C27 18.5774 25.9 18.0753 24.4 17.9749C24.2 17.9749 24 17.7741 24 17.5732C24 17.3724 24.2 17.1716 24.4 17.1716C26.1 17.272 27.4 17.8745 28.3 18.8787C29.2 19.8829 29.7 21.1883 29.7 22.795C29.8 22.9958 29.6 23.1967 29.4 23.1967Z"/><path id="shape-a" d="M31.1 23.5983C31.1 23.7991 31.3 24 31.5 24C31.7 24 31.9 23.7991 31.7999 23.4979C31.7999 20.9874 31 18.8786 29.5 17.3724C28 15.8661 26.0999 15.0627 23.7999 15.0627C23.5999 15.0627 23.4 15.2636 23.4 15.4644C23.4 15.6653 23.5999 15.8661 23.7999 15.8661C25.8999 15.9665 27.6 16.6694 29 17.9749C30.4 19.3807 31.1 21.1883 31.1 23.5983Z"/><path id="shape-a" d="M25.9 27.0125C25.7 27.3138 25.1 27.3138 25.1 27.3138C21.1 26.3096 20 22.1925 20 22.1925C20 22.1925 19.8999 21.6904 20.2999 21.3891L21 20.7866C21.3 20.4853 21.6 19.8828 21.2 19.1799C21.05 18.9289 20.9 18.7029 20.75 18.477C20.5999 18.251 20.45 18.0251 20.2999 17.774C19.8999 17.3724 19.2 16.4686 19.2 16.4686C18.9 16.0669 18.3999 15.9665 17.7999 16.2678C17.1999 16.569 16.6999 16.9707 16.2999 17.4728C15.8999 17.8745 15.7 18.2761 15.7 18.6778V18.8786C15.7 19.0795 15.7 19.1799 15.8 19.3807C16 20.0837 16.5 21.0879 17.4 22.795C18 23.7991 18.5999 24.7029 19.2999 25.6067C19.5999 26.1088 20 26.5104 20.4 26.9121C20.6 27.113 20.8249 27.2887 21.0499 27.4644C21.2749 27.6401 21.4999 27.8159 21.7 28.0167C22.5999 28.7196 23.5 29.4226 24.5 29.9247C26.3 30.9289 27.2999 31.3305 27.9 31.5314C28 31.6318 28.2 31.6318 28.4 31.6318H28.6C29 31.5314 29.4 31.3305 29.7999 31.0293C30.2999 30.6276 30.7 30.1255 31 29.523C31.3 29.0209 31.2 28.5188 30.7999 28.1171C30.7999 28.1171 29.9 27.3138 29.5 27.0125C29.1 26.7113 28.6 26.41 28.1 26.1088C27.5 25.7071 26.8 25.9079 26.5 26.3096L25.9 27.0125Z"/><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M24.6 9.53976C31.5 9.53976 34.6 11.8494 35.4 12.5523C37.9 14.8619 39.3 19.7824 38.5 27.5147C37.67 34.4597 32.7584 35.6835 31.2145 36.0682C31.0842 36.1007 30.9778 36.1272 30.9 36.1506C30.5 36.3515 26.7 37.2552 21.7 36.8536C21.45 37.1548 21.125 37.5062 20.8 37.8577C20.475 38.2091 20.1499 38.5607 19.9 38.8619C19.767 39.0088 19.6412 39.152 19.5205 39.2894C18.7334 40.1855 18.167 40.8303 17.3 40.569C16.5 40.3682 16.5 39.0628 16.5 39.0628V35.9498C9.19996 33.841 9.29996 26.3096 9.39996 22.2929C9.49996 18.2762 10.3 14.9624 12.5 12.7531C16.4 9.03767 24.6 9.53976 24.6 9.53976ZM30.4007 33.9288C31.782 33.5765 35.4895 32.6309 36.2 27.0126C37 20.4854 35.9 16.067 33.8 14.2594C33.2 13.6569 30.4 11.8494 24.5 11.8494C24.5 11.8494 17.6 11.4477 14.2 14.4603C12.3 16.3682 11.7 19.0795 11.6 22.4937L11.5946 22.6734C11.4915 26.1287 11.3054 32.3642 17.3 34.0419V39.2636C17.3 39.5649 17.3 39.7657 17.5 39.7657C17.7 39.7657 17.8 39.7657 18 39.5649C19 38.5607 22.1 34.7448 22.1 34.7448C26.1352 35.0342 29.3397 34.2113 29.9396 34.0573L30 34.0419C30.0895 34.0081 30.2266 33.9732 30.4007 33.9288Z"/></svg>';
 const IconChannelViberSquare = createIconClass(templateHTML$2v);
 defineCustomElement("sinch-icon-channel-viber-square", IconChannelViberSquare);
-const templateHTML$2u = '<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="M25.702 12.01a2.86 2.86 0 0 1 2.86 2.858v8.942a2.856 2.856 0 0 1-2.856 2.857h-6.95l-3.922 3.05a.857.857 0 0 1-1.383-.677v-2.373h-.28a2.857 2.857 0 0 1-2.857-2.857v-8.954A2.856 2.856 0 0 1 13.17 12l4.657.004c2.632.003 5.274.006 7.874.006Zm-6.216 8.838a1.453 1.453 0 1 0 0-2.907 1.453 1.453 0 0 0 0 2.907Zm-4.64 0a1.453 1.453 0 1 0 0-2.907 1.453 1.453 0 0 0 0 2.907Zm10.733-1.453a1.453 1.453 0 1 1-2.907 0 1.453 1.453 0 0 1 2.907 0Z" clip-rule="evenodd"/><path fill="#000" d="m19.438 29.027.1-.079h6.168a5.137 5.137 0 0 0 5.137-5.138v-5.724l3.986-.003a2.856 2.856 0 0 1 2.857 2.856v8.954a2.857 2.857 0 0 1-2.857 2.857h-.28v2.391a.857.857 0 0 1-1.377.681l-4.02-3.072h-6.858a2.856 2.856 0 0 1-2.856-2.857v-.866Z"/></svg>';
+const templateHTML$2u = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-comp-icon-channel-color-webchat-bg,linear-gradient(180deg,#fff 0,#fff 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-webchat-layera,#242424)}#shape-b{fill:var(--sinch-comp-icon-channel-color-webchat-layerb,#242424)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-b" d="M19.4379 29.0266L19.5386 28.9482H25.7058C28.5445 28.9482 30.8431 26.6469 30.8431 23.8101V18.0863C32.178 18.085 33.509 18.0837 34.829 18.0828C36.407 18.0818 37.6862 19.361 37.6862 20.939V29.8928C37.6862 31.4708 36.4067 32.75 34.8287 32.75H34.5494V35.1413C34.5494 35.8512 33.7358 36.2534 33.1718 35.8223L29.1526 32.75H22.2938C20.7158 32.75 19.4379 31.4708 19.4379 29.8928V29.0266Z"/><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M25.702 12.0096C27.2811 12.0095 28.562 13.2891 28.562 14.8682V23.81C28.562 25.388 27.2838 26.6672 25.7058 26.6672H18.7562L14.8337 29.717C14.2707 30.1548 13.4505 29.7536 13.4505 29.0404V26.6672H13.1712C11.5932 26.6672 10.3137 25.388 10.3137 23.81V14.8562C10.3137 13.2782 11.5929 11.999 13.1709 12C14.712 12.001 16.268 12.0026 17.8279 12.0042C20.4596 12.007 23.1021 12.0097 25.702 12.0096ZM19.4858 20.848C20.2885 20.848 20.9392 20.1973 20.9392 19.3946C20.9392 18.5919 20.2885 17.9412 19.4858 17.9412C18.6831 17.9412 18.0324 18.5919 18.0324 19.3946C18.0324 20.1973 18.6831 20.848 19.4858 20.848ZM14.8451 20.848C15.6478 20.848 16.2985 20.1973 16.2985 19.3946C16.2985 18.5919 15.6478 17.9412 14.8451 17.9412C14.0424 17.9412 13.3917 18.5919 13.3917 19.3946C13.3917 20.1973 14.0424 20.848 14.8451 20.848ZM25.5792 19.3946C25.5792 20.1973 24.9285 20.848 24.1258 20.848C23.3231 20.848 22.6724 20.1973 22.6724 19.3946C22.6724 18.5919 23.3231 17.9412 24.1258 17.9412C24.9285 17.9412 25.5792 18.5919 25.5792 19.3946Z"/></svg>';
 const IconChannelWebchatRound = createIconClass(templateHTML$2u);
 defineCustomElement("sinch-icon-channel-webchat-round", IconChannelWebchatRound);
-const templateHTML$2t = '<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="M25.702 12.01a2.86 2.86 0 0 1 2.86 2.858v8.942a2.856 2.856 0 0 1-2.856 2.857h-6.95l-3.922 3.05a.857.857 0 0 1-1.383-.677v-2.373h-.28a2.857 2.857 0 0 1-2.857-2.857v-8.954A2.856 2.856 0 0 1 13.17 12l4.657.004c2.632.003 5.274.006 7.874.006Zm-6.216 8.838a1.453 1.453 0 1 0 0-2.907 1.453 1.453 0 0 0 0 2.907Zm-4.64 0a1.453 1.453 0 1 0 0-2.907 1.453 1.453 0 0 0 0 2.907Zm10.733-1.453a1.453 1.453 0 1 1-2.907 0 1.453 1.453 0 0 1 2.907 0Z" clip-rule="evenodd"/><path fill="#000" d="m19.438 29.027.1-.079h6.168a5.137 5.137 0 0 0 5.137-5.138v-5.724l3.986-.003a2.856 2.856 0 0 1 2.857 2.856v8.954a2.857 2.857 0 0 1-2.857 2.857h-.28v2.391a.857.857 0 0 1-1.377.681l-4.02-3.072h-6.858a2.856 2.856 0 0 1-2.856-2.857v-.866Z"/></svg>';
+const templateHTML$2t = '<style>:host{background:var(--sinch-comp-icon-channel-color-webchat-bg,linear-gradient(180deg,#fff 0,#fff 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-webchat-layera,#242424)}#shape-b{fill:var(--sinch-comp-icon-channel-color-webchat-layerb,#242424)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-b" d="M19.4379 29.0266L19.5386 28.9482H25.7058C28.5445 28.9482 30.8431 26.6469 30.8431 23.8101V18.0863C32.178 18.085 33.509 18.0837 34.829 18.0828C36.407 18.0818 37.6862 19.361 37.6862 20.939V29.8928C37.6862 31.4708 36.4067 32.75 34.8287 32.75H34.5494V35.1413C34.5494 35.8512 33.7358 36.2534 33.1718 35.8223L29.1526 32.75H22.2938C20.7158 32.75 19.4379 31.4708 19.4379 29.8928V29.0266Z"/><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M25.702 12.0096C27.2811 12.0095 28.562 13.2891 28.562 14.8682V23.81C28.562 25.388 27.2838 26.6672 25.7058 26.6672H18.7562L14.8337 29.717C14.2707 30.1548 13.4505 29.7536 13.4505 29.0404V26.6672H13.1712C11.5932 26.6672 10.3137 25.388 10.3137 23.81V14.8562C10.3137 13.2782 11.5929 11.999 13.1709 12C14.712 12.001 16.268 12.0026 17.8279 12.0042C20.4596 12.007 23.1021 12.0097 25.702 12.0096ZM19.4858 20.848C20.2885 20.848 20.9392 20.1973 20.9392 19.3946C20.9392 18.5919 20.2885 17.9412 19.4858 17.9412C18.6831 17.9412 18.0324 18.5919 18.0324 19.3946C18.0324 20.1973 18.6831 20.848 19.4858 20.848ZM14.8451 20.848C15.6478 20.848 16.2985 20.1973 16.2985 19.3946C16.2985 18.5919 15.6478 17.9412 14.8451 17.9412C14.0424 17.9412 13.3917 18.5919 13.3917 19.3946C13.3917 20.1973 14.0424 20.848 14.8451 20.848ZM25.5792 19.3946C25.5792 20.1973 24.9285 20.848 24.1258 20.848C23.3231 20.848 22.6724 20.1973 22.6724 19.3946C22.6724 18.5919 23.3231 17.9412 24.1258 17.9412C24.9285 17.9412 25.5792 18.5919 25.5792 19.3946Z"/></svg>';
 const IconChannelWebchatSquare = createIconClass(templateHTML$2t);
 defineCustomElement("sinch-icon-channel-webchat-square", IconChannelWebchatSquare);
-const templateHTML$2s = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path fill="#2dc100" d="M24 48c13.3 0 24-10.7 24-24S37.3 0 24 0 0 10.7 0 24s10.7 24 24 24z"/><g fill="#fff"><path d="M29.8 19.6c-2.8.1-5.1 1-7.1 2.9s-2.9 4.2-2.6 7.1c-1.1-.1-2.1-.3-3-.4-.3 0-.7 0-1 .2-1 .5-1.9 1.1-3 1.8.2-.9.3-1.7.6-2.5.2-.6.1-.9-.4-1.2-3.3-2.3-4.7-5.8-3.7-9.4 1-3.3 3.3-5.3 6.5-6.4 4.4-1.4 9.3 0 12 3.5 1 1.3 1.6 2.7 1.7 4.4zm-12.6-1.1c0-.7-.5-1.2-1.2-1.3-.7 0-1.3.5-1.3 1.2s.5 1.2 1.2 1.3c.7 0 1.2-.5 1.3-1.2zm6.6-1.3c-.7 0-1.3.6-1.2 1.2 0 .7.6 1.2 1.3 1.2.7 0 1.2-.5 1.2-1.2-.1-.7-.6-1.2-1.3-1.2z"/><path d="M36 36.7c-.9-.4-1.7-1-2.5-1.1-.8-.1-1.7.4-2.6.5-2.7.3-5.1-.5-7.1-2.3-3.8-3.5-3.3-8.9 1.1-11.8 3.9-2.6 9.6-1.7 12.4 1.8 2.4 3.1 2.1 7.2-.8 9.8-.8.8-1.2 1.4-.6 2.4 0 .3 0 .5.1.7zm-9.9-9.6c.6 0 1-.4 1-1s-.4-1.1-1-1.1-1.1.5-1 1.1c0 .6.4 1 1 1zm6.4-2c-.5 0-1 .4-1 1s.4 1.1 1 1.1 1-.4 1-1-.4-1.1-1-1.1z"/></g></svg>';
+const templateHTML$2s = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-comp-icon-channel-color-wechat-bg,linear-gradient(180deg,#2dc100 0,#2dc100 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-wechat-layera,#FFFFFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M22.7 22.5941C24.7 20.6862 27 19.7824 29.8 19.682C29.7 17.9749 29.1 16.569 28.1 15.2636C25.4 11.7489 20.5 10.3431 16.1 11.7489C12.9 12.8535 10.6 14.8619 9.60001 18.1757C8.60001 21.7908 10 25.3054 13.3 27.615C13.8 27.9163 13.9 28.2176 13.7 28.8201C13.486 29.3932 13.3738 29.9663 13.2544 30.5759C13.2064 30.8208 13.1573 31.0715 13.1 31.3305C13.2605 31.228 13.4167 31.1276 13.5696 31.0293C14.4647 30.4539 15.2459 29.9518 16.1 29.523C16.4 29.3222 16.8 29.3222 17.1 29.3222C17.482 29.3648 17.882 29.4255 18.3 29.4889C18.8669 29.575 19.4669 29.666 20.1 29.7238C19.8 26.8117 20.7 24.5021 22.7 22.5941ZM16 17.2719C16.7 17.3724 17.2 17.8745 17.2 18.5774C17.1 19.2803 16.6 19.7824 15.9 19.7824C15.2 19.682 14.7 19.1799 14.7 18.477C14.7 17.774 15.3 17.2719 16 17.2719ZM22.6 18.477C22.5 17.8745 23.1 17.2719 23.8 17.2719C24.5 17.2719 25 17.774 25.1 18.477C25.1 19.1799 24.6 19.682 23.9 19.682C23.2 19.682 22.6 19.1799 22.6 18.477Z"/><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M35.1209 36.4061C35.4051 36.5602 35.6969 36.7182 36.0001 36.8535C35.9001 36.6527 35.9001 36.4519 35.9001 36.1506C35.3001 35.1464 35.7001 34.5439 36.5001 33.7406C39.4001 31.1297 39.7001 27.0125 37.3001 23.8996C34.5001 20.3849 28.8001 19.4811 24.9001 22.092C20.5001 25.0042 20.0001 30.4267 23.8001 33.9414C25.8001 35.7489 28.2001 36.5523 30.9001 36.251C31.271 36.2096 31.6419 36.1 32.0058 35.9925C32.5249 35.8391 33.0298 35.6899 33.5001 35.7489C34.0306 35.8155 34.5611 36.1029 35.1209 36.4061ZM27.1001 26.2092C27.1001 26.8117 26.7001 27.2134 26.1001 27.2134C25.5001 27.2134 25.1001 26.8117 25.1001 26.2092C25.0001 25.6067 25.5001 25.1046 26.1001 25.1046C26.7001 25.1046 27.1001 25.6067 27.1001 26.2092ZM31.5001 26.2092C31.5001 25.6067 32.0001 25.205 32.5001 25.205C33.1001 25.205 33.5001 25.7071 33.5001 26.3096C33.5001 26.9121 33.1001 27.3138 32.5001 27.3138C31.9001 27.3138 31.5001 26.8117 31.5001 26.2092Z"/></svg>';
 const IconChannelWechat = createIconClass(templateHTML$2s);
 defineCustomElement("sinch-icon-channel-wechat", IconChannelWechat);
-const templateHTML$2r = '<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="#2DC100"/><path d="M29.8 19.682c-2.8.1-5.1 1.004-7.1 2.912s-2.9 4.218-2.6 7.13c-1.1-.1-2.1-.301-3-.402-.3 0-.7 0-1 .201-1 .502-1.9 1.105-3 1.808.2-.904.3-1.708.6-2.51.2-.603.1-.905-.4-1.206-3.3-2.31-4.7-5.824-3.7-9.44 1-3.313 3.3-5.322 6.5-6.426 4.4-1.406 9.3 0 12 3.515 1 1.305 1.6 2.71 1.7 4.418Zm-12.6-1.105c0-.703-.5-1.205-1.2-1.305-.7 0-1.3.502-1.3 1.205 0 .703.5 1.205 1.2 1.305.7 0 1.2-.502 1.3-1.205Zm6.6-1.305c-.7 0-1.3.603-1.2 1.205 0 .703.6 1.205 1.3 1.205.7 0 1.2-.502 1.2-1.205-.1-.703-.6-1.205-1.3-1.205Z" fill="#fff"/><path d="M36 36.853c-.9-.401-1.7-1.004-2.5-1.104-.8-.1-1.7.402-2.6.502-2.7.301-5.1-.502-7.1-2.31-3.8-3.514-3.3-8.937 1.1-11.849 3.9-2.61 9.6-1.707 12.4 1.808 2.4 3.113 2.1 7.23-.8 9.84-.8.804-1.2 1.406-.6 2.41 0 .302 0 .503.1.703Zm-9.9-9.64c.6 0 1-.401 1-1.004 0-.602-.4-1.104-1-1.104s-1.1.502-1 1.104c0 .603.4 1.004 1 1.004Zm6.4-2.008c-.5 0-1 .402-1 1.004 0 .603.4 1.105 1 1.105s1-.402 1-1.004c0-.603-.4-1.105-1-1.105Z" fill="#fff"/></svg>';
+const templateHTML$2r = '<style>:host{background:var(--sinch-comp-icon-channel-color-wechat-bg,linear-gradient(180deg,#2dc100 0,#2dc100 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-wechat-layera,#FFFFFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M22.7 22.5941C24.7 20.6862 27 19.7824 29.8 19.682C29.7 17.9749 29.1 16.569 28.1 15.2636C25.4 11.7489 20.5 10.3431 16.1 11.7489C12.9 12.8535 10.6 14.8619 9.60001 18.1757C8.60001 21.7908 10 25.3054 13.3 27.615C13.8 27.9163 13.9 28.2176 13.7 28.8201C13.486 29.3932 13.3738 29.9663 13.2544 30.5759C13.2064 30.8208 13.1573 31.0715 13.1 31.3305C13.2605 31.228 13.4167 31.1276 13.5696 31.0293C14.4647 30.4539 15.2459 29.9518 16.1 29.523C16.4 29.3222 16.8 29.3222 17.1 29.3222C17.482 29.3648 17.882 29.4255 18.3 29.4889C18.8669 29.575 19.4669 29.666 20.1 29.7238C19.8 26.8117 20.7 24.5021 22.7 22.5941ZM16 17.2719C16.7 17.3724 17.2 17.8745 17.2 18.5774C17.1 19.2803 16.6 19.7824 15.9 19.7824C15.2 19.682 14.7 19.1799 14.7 18.477C14.7 17.774 15.3 17.2719 16 17.2719ZM22.6 18.477C22.5 17.8745 23.1 17.2719 23.8 17.2719C24.5 17.2719 25 17.774 25.1 18.477C25.1 19.1799 24.6 19.682 23.9 19.682C23.2 19.682 22.6 19.1799 22.6 18.477Z"/><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M35.1209 36.4061C35.4051 36.5602 35.6969 36.7182 36.0001 36.8535C35.9001 36.6527 35.9001 36.4519 35.9001 36.1506C35.3001 35.1464 35.7001 34.5439 36.5001 33.7406C39.4001 31.1297 39.7001 27.0125 37.3001 23.8996C34.5001 20.3849 28.8001 19.4811 24.9001 22.092C20.5001 25.0042 20.0001 30.4267 23.8001 33.9414C25.8001 35.7489 28.2001 36.5523 30.9001 36.251C31.271 36.2096 31.6419 36.1 32.0058 35.9925C32.5249 35.8391 33.0298 35.6899 33.5001 35.7489C34.0306 35.8155 34.5611 36.1029 35.1209 36.4061ZM27.1001 26.2092C27.1001 26.8117 26.7001 27.2134 26.1001 27.2134C25.5001 27.2134 25.1001 26.8117 25.1001 26.2092C25.0001 25.6067 25.5001 25.1046 26.1001 25.1046C26.7001 25.1046 27.1001 25.6067 27.1001 26.2092ZM31.5001 26.2092C31.5001 25.6067 32.0001 25.205 32.5001 25.205C33.1001 25.205 33.5001 25.7071 33.5001 26.3096C33.5001 26.9121 33.1001 27.3138 32.5001 27.3138C31.9001 27.3138 31.5001 26.8117 31.5001 26.2092Z"/></svg>';
 const IconChannelWechatSquare = createIconClass(templateHTML$2r);
 defineCustomElement("sinch-icon-channel-wechat-square", IconChannelWechatSquare);
-const templateHTML$2q = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><circle cx="24.5" cy="24" r="24" fill="#25D366"/><path fill="#fff" fill-rule="evenodd" d="M35.4 13.255c-2.7-2.711-6.4-4.217-10.2-4.217-8 0-14.4 6.426-14.4 14.46 0 2.51.7 5.02 1.9 7.23l-2 7.431 7.7-2.008c2.1 1.104 4.5 1.707 6.9 1.707 8 0 14.4-6.427 14.4-14.46-.1-3.816-1.6-7.431-4.3-10.143ZM25.2 35.448c-2.2 0-4.3-.603-6.1-1.707l-.4-.302-4.5 1.205 1.2-4.418-.3-.502c-1.2-1.908-1.8-4.117-1.8-6.427 0-6.628 5.4-11.95 12-11.95 3.2 0 6.2 1.205 8.5 3.515s3.5 5.322 3.5 8.536c-.1 6.727-5.5 12.05-12.1 12.05Zm6.6-8.938c-.4-.2-2.1-1.004-2.5-1.205-.3-.1-.6-.2-.8.201-.2.402-.9 1.205-1.1 1.406-.2.201-.4.301-.8.1-.4-.2-1.5-.602-2.9-1.807-1.1-1.004-1.8-2.109-2-2.51-.2-.402 0-.603.2-.703.2-.201.4-.402.5-.603.2-.2.2-.402.4-.602.1-.201.1-.402 0-.603-.1-.2-.8-1.908-1.1-2.711-.3-.703-.6-.603-.8-.603h-.7c-.2 0-.6.1-1 .402-.3.402-1.3 1.205-1.3 3.013 0 1.807 1.3 3.514 1.5 3.715.2.2 2.5 3.916 6.2 5.423.9.401 1.5.602 2.1.803.9.301 1.7.2 2.3.1.7-.1 2.1-.903 2.4-1.707.3-.803.3-1.606.2-1.707-.2-.2-.5-.2-.8-.401Z" clip-rule="evenodd"/></svg>';
+const templateHTML$2q = '<style>:host{--sinch-comp-icon-channel-shape-radius:var(--sinch-sys-shape-radius-full, 9999px);background:var(--sinch-comp-icon-channel-color-whatsapp-bg,linear-gradient(180deg,#25d366 0,#25d366 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-whatsapp-layera,#FFFFFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M34.9 13.2552C32.2 10.5439 28.5 9.03766 24.7 9.03766C16.7 9.03766 10.3 15.4644 10.3 23.4979C10.3 26.0084 11 28.5188 12.2 30.728L10.2 38.159L17.9 36.1506C20 37.2552 22.4 37.8577 24.8 37.8577C32.8 37.8577 39.2 31.431 39.2 23.3975C39.1 19.5816 37.6 15.9665 34.9 13.2552ZM24.7 35.4477C22.5 35.4477 20.4 34.8452 18.6 33.7406L18.2 33.4393L13.7 34.6443L14.9 30.2259L14.6 29.7239C13.4 27.8159 12.8 25.6067 12.8 23.2971C12.8 16.6695 18.2 11.3473 24.8 11.3473C28 11.3473 31 12.5523 33.3 14.8619C35.6 17.1715 36.8 20.1841 36.8 23.3975C36.7 30.1255 31.3 35.4477 24.7 35.4477ZM31.3 26.5105C30.9 26.3096 29.2 25.5063 28.8 25.3054C28.5 25.205 28.2 25.1046 28 25.5063C27.8 25.9079 27.1 26.7113 26.9 26.9121C26.7 27.113 26.5 27.2134 26.1 27.0126C25.7 26.8117 24.6 26.41 23.2 25.205C22.1 24.2008 21.4 23.0962 21.2 22.6946C21 22.2929 21.2 22.0921 21.4 21.9916C21.6 21.7908 21.8 21.59 21.9 21.3891C22.1 21.1883 22.1 20.9874 22.3 20.7866C22.4 20.5858 22.4 20.3849 22.3 20.1841C22.2 19.9833 21.5 18.2762 21.2 17.4728C20.9 16.7699 20.6 16.8703 20.4 16.8703H19.7C19.5 16.8703 19.1 16.9707 18.7 17.272C18.4 17.6736 17.4 18.477 17.4 20.2845C17.4 22.0921 18.7 23.7992 18.9 24C19.1 24.2008 21.4 27.9163 25.1 29.4226C26 29.8243 26.6 30.0251 27.2 30.2259C28.1 30.5272 28.9 30.4268 29.5 30.3264C30.2 30.2259 31.6 29.4226 31.9 28.6192C32.2 27.8159 32.2 27.0126 32.1 26.9121C31.9 26.7113 31.6 26.7113 31.3 26.5105Z"/></svg>';
 const IconChannelWhatsapp = createIconClass(templateHTML$2q);
 defineCustomElement("sinch-icon-channel-whatsapp", IconChannelWhatsapp);
-const templateHTML$2p = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path fill="#25D366" d="M8.6 0h31.9c4.4 0 8 3.615 8 8.033v31.934c0 4.418-3.6 8.033-8 8.033H8.6c-4.4 0-8-3.615-8-8.033V8.033C.6 3.615 4.2 0 8.6 0Z"/><path fill="#fff" fill-rule="evenodd" d="M35.4 13.255c-2.7-2.711-6.4-4.217-10.2-4.217-8 0-14.4 6.426-14.4 14.46 0 2.51.7 5.02 1.9 7.23l-2 7.431 7.7-2.008c2.1 1.104 4.5 1.707 6.9 1.707 8 0 14.4-6.427 14.4-14.46-.1-3.816-1.6-7.431-4.3-10.143ZM25.2 35.448c-2.2 0-4.3-.603-6.1-1.707l-.4-.302-4.5 1.205 1.2-4.418-.3-.502c-1.2-1.908-1.8-4.117-1.8-6.427 0-6.628 5.4-11.95 12-11.95 3.2 0 6.2 1.205 8.5 3.515s3.5 5.322 3.5 8.536c-.1 6.727-5.5 12.05-12.1 12.05Zm6.6-8.938c-.4-.2-2.1-1.004-2.5-1.205-.3-.1-.6-.2-.8.201-.2.402-.9 1.205-1.1 1.406-.2.201-.4.301-.8.1-.4-.2-1.5-.602-2.9-1.807-1.1-1.004-1.8-2.109-2-2.51-.2-.402 0-.603.2-.703.2-.201.4-.402.5-.603.2-.2.2-.402.4-.602.1-.201.1-.402 0-.603-.1-.2-.8-1.908-1.1-2.711-.3-.703-.6-.603-.8-.603h-.7c-.2 0-.6.1-1 .402-.3.402-1.3 1.205-1.3 3.013 0 1.807 1.3 3.514 1.5 3.715.2.2 2.5 3.916 6.2 5.423.9.401 1.5.602 2.1.803.9.301 1.7.2 2.3.1.7-.1 2.1-.903 2.4-1.707.3-.803.3-1.606.2-1.707-.2-.2-.5-.2-.8-.401Z" clip-rule="evenodd"/></svg>';
+const templateHTML$2p = '<style>:host{background:var(--sinch-comp-icon-channel-color-whatsapp-bg,linear-gradient(180deg,#25d366 0,#25d366 100%))}#shape-a{fill:var(--sinch-comp-icon-channel-color-whatsapp-layera,#FFFFFF)}</style><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path id="shape-a" fill-rule="evenodd" clip-rule="evenodd" d="M34.9 13.2552C32.2 10.5439 28.5 9.03766 24.7 9.03766C16.7 9.03766 10.3 15.4644 10.3 23.4979C10.3 26.0084 11 28.5188 12.2 30.728L10.2 38.159L17.9 36.1506C20 37.2552 22.4 37.8577 24.8 37.8577C32.8 37.8577 39.2 31.431 39.2 23.3975C39.1 19.5816 37.6 15.9665 34.9 13.2552ZM24.7 35.4477C22.5 35.4477 20.4 34.8452 18.6 33.7406L18.2 33.4393L13.7 34.6443L14.9 30.2259L14.6 29.7239C13.4 27.8159 12.8 25.6067 12.8 23.2971C12.8 16.6695 18.2 11.3473 24.8 11.3473C28 11.3473 31 12.5523 33.3 14.8619C35.6 17.1715 36.8 20.1841 36.8 23.3975C36.7 30.1255 31.3 35.4477 24.7 35.4477ZM31.3 26.5105C30.9 26.3096 29.2 25.5063 28.8 25.3054C28.5 25.205 28.2 25.1046 28 25.5063C27.8 25.9079 27.1 26.7113 26.9 26.9121C26.7 27.113 26.5 27.2134 26.1 27.0126C25.7 26.8117 24.6 26.41 23.2 25.205C22.1 24.2008 21.4 23.0962 21.2 22.6946C21 22.2929 21.2 22.0921 21.4 21.9916C21.6 21.7908 21.8 21.59 21.9 21.3891C22.1 21.1883 22.1 20.9874 22.3 20.7866C22.4 20.5858 22.4 20.3849 22.3 20.1841C22.2 19.9833 21.5 18.2762 21.2 17.4728C20.9 16.7699 20.6 16.8703 20.4 16.8703H19.7C19.5 16.8703 19.1 16.9707 18.7 17.272C18.4 17.6736 17.4 18.477 17.4 20.2845C17.4 22.0921 18.7 23.7992 18.9 24C19.1 24.2008 21.4 27.9163 25.1 29.4226C26 29.8243 26.6 30.0251 27.2 30.2259C28.1 30.5272 28.9 30.4268 29.5 30.3264C30.2 30.2259 31.6 29.4226 31.9 28.6192C32.2 27.8159 32.2 27.0126 32.1 26.9121C31.9 26.7113 31.6 26.7113 31.3 26.5105Z"/></svg>';
 const IconChannelWhatsappSquare = createIconClass(templateHTML$2p);
 defineCustomElement("sinch-icon-channel-whatsapp-square", IconChannelWhatsappSquare);
 const backgroundValues = ["blue", "grey", "gray", "green", "yellow", "white"];