@nectary/assets 3.2.1 → 3.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/bundle.js +41 -43
  2. package/icons-channel/apple-business-chat/index.js +1 -1
  3. package/icons-channel/apple-business-chat-square/index.js +1 -1
  4. package/icons-channel/create-icon-class.js +2 -4
  5. package/icons-channel/facebook/index.js +1 -1
  6. package/icons-channel/facebook-messenger/index.js +1 -1
  7. package/icons-channel/facebook-messenger-square/index.js +1 -1
  8. package/icons-channel/facebook-square/index.js +1 -1
  9. package/icons-channel/google-business/index.js +1 -1
  10. package/icons-channel/google-business-square/index.js +1 -1
  11. package/icons-channel/instagram/index.js +1 -1
  12. package/icons-channel/instagram-square/index.js +1 -1
  13. package/icons-channel/line/index.js +1 -1
  14. package/icons-channel/line-square/index.js +1 -1
  15. package/icons-channel/mms-round/index.js +1 -1
  16. package/icons-channel/mms-square/index.js +1 -1
  17. package/icons-channel/notify/index.js +1 -1
  18. package/icons-channel/notify-square/index.js +1 -1
  19. package/icons-channel/phone-round/global/index.d.ts +24 -0
  20. package/icons-channel/phone-round/global/index.js +2 -0
  21. package/icons-channel/phone-round/index.d.ts +25 -0
  22. package/icons-channel/phone-round/index.js +8 -0
  23. package/icons-channel/phone-square/global/index.d.ts +24 -0
  24. package/icons-channel/phone-square/global/index.js +2 -0
  25. package/icons-channel/phone-square/index.d.ts +25 -0
  26. package/icons-channel/phone-square/index.js +8 -0
  27. package/icons-channel/push-round/index.js +1 -1
  28. package/icons-channel/push-square/index.js +1 -1
  29. package/icons-channel/rcs-round/index.js +1 -1
  30. package/icons-channel/rcs-square/index.js +1 -1
  31. package/icons-channel/sms-round/index.js +1 -1
  32. package/icons-channel/sms-square/index.js +1 -1
  33. package/icons-channel/talk/index.js +1 -1
  34. package/icons-channel/talk-square/index.js +1 -1
  35. package/icons-channel/telegram/index.js +1 -1
  36. package/icons-channel/telegram-square/index.js +1 -1
  37. package/icons-channel/twitter/index.js +1 -1
  38. package/icons-channel/twitter-square/index.js +1 -1
  39. package/icons-channel/viber/index.js +1 -1
  40. package/icons-channel/viber-square/index.js +1 -1
  41. package/icons-channel/webchat-round/index.js +1 -1
  42. package/icons-channel/webchat-square/index.js +1 -1
  43. package/icons-channel/wechat/index.js +1 -1
  44. package/icons-channel/wechat-square/index.js +1 -1
  45. package/icons-channel/whatsapp/index.js +1 -1
  46. package/icons-channel/whatsapp-square/index.js +1 -1
  47. package/package.json +2 -2
  48. package/utils/asset-names.d.ts +2 -2
  49. package/utils/asset-names.js +2 -0
  50. package/utils/element.d.ts +2 -0
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<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>';
3
+ const templateHTML = '<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-b" d="M29.94 30.1C29.3333 29.74 28.84 29.22 28.5 28.5933C27.5133 28.5067 26.6533 27.9267 26.2333 27.0333C26.0067 26.56 25.92 26.04 25.9867 25.52C26.0533 25 26.26 24.5133 26.5867 24.1267L26.7 23.9933C26.7933 23.88 26.8867 23.7867 26.9667 23.7067C26.9667 23.5933 26.98 23.4333 26.98 23.2067C26.98 21.28 27.7733 19.7733 29.2333 18.8933C29.8333 17.9467 30.8533 17.3533 31.98 17.3533V14.7C31.96 13.2133 30.76 12.0133 29.2867 12.0133C25.7733 12.0133 22.18 12 18.6667 12C17.1933 12 16 13.1933 16 14.6667V33.3333C16 34.8067 17.1933 36 18.6667 36H29.2933C30.7667 36 31.96 34.8067 31.96 33.3333V30.66C31.2467 30.66 30.5533 30.4667 29.94 30.1ZM20.9 14.6333C20.9 14.1733 21.28 13.8 21.74 13.8067L26.1933 13.8333C26.6533 13.8333 27.0267 14.2133 27.02 14.6733C27.02 15.1333 26.64 15.5067 26.18 15.5L21.7267 15.4733C21.2667 15.4733 20.8933 15.0933 20.9 14.6333ZM23.9533 34.2267C23.22 34.2267 22.62 33.6267 22.62 32.8933C22.62 32.16 23.22 31.56 23.9533 31.56C24.6867 31.56 25.2867 32.16 25.2867 32.8933C25.2867 33.6267 24.6867 34.2267 23.9533 34.2267Z"/><path id="shape-a" d="M35.7933 25.3867L35.74 25.32L35.6933 25.26C35.5933 25.1333 35.5 25.0533 35.4133 24.98C35.1266 24.72 34.96 24.5733 34.96 23.2C34.96 22.3867 34.7666 21.72 34.38 21.22C34.1 20.8533 33.7133 20.5733 33.2133 20.3667C33.2133 20.3667 33.2 20.36 33.1933 20.3533C33.0133 19.7467 32.52 19.34 31.96 19.34C31.4 19.34 30.9066 19.7467 30.7266 20.3533C30.7266 20.3533 30.7133 20.36 30.7066 20.3667C29.5333 20.8467 28.96 21.78 28.96 23.2C28.96 24.58 28.7933 24.7267 28.5066 24.9867C28.4266 25.06 28.3333 25.14 28.2266 25.2667L28.2133 25.28C28.1866 25.3133 28.1533 25.3533 28.1266 25.3867C28.04 25.4933 27.98 25.6267 27.9666 25.7667C27.9466 25.9067 27.9666 26.0467 28.0333 26.1733C28.16 26.4467 28.4333 26.6133 28.7466 26.6133H35.1733C35.4866 26.6133 35.7533 26.4467 35.8866 26.1733C35.9466 26.0467 35.9733 25.9067 35.9533 25.7667C35.9333 25.6267 35.88 25.4933 35.7933 25.3867Z"/><path id="shape-a" d="M33.6266 27.5067C33.6266 27.5067 33.5933 27.4933 33.58 27.4933H30.3333C30.3333 27.4933 30.3 27.4933 30.2866 27.5067C30.2733 27.5133 30.26 27.5267 30.2533 27.54C30.2466 27.5533 30.24 27.5733 30.24 27.5867C30.24 27.6067 30.24 27.62 30.2533 27.6333C30.42 27.94 30.6666 28.2 30.9666 28.38C31.2666 28.56 31.6133 28.6533 31.96 28.6533C32.3133 28.6533 32.6533 28.56 32.9533 28.38C33.2533 28.2 33.5 27.94 33.6666 27.6333C33.6733 27.62 33.68 27.6 33.68 27.5867C33.68 27.5667 33.68 27.5533 33.6666 27.54C33.66 27.5267 33.6466 27.5133 33.6333 27.5067H33.6266Z"/></svg>';
4
4
  const IconChannelPushSquare = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-push-square", IconChannelPushSquare);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><circle cx="24.5" cy="24" r="24" fill="#fff"/><path fill="#242424" 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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelRcsRound = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-rcs-round", IconChannelRcsRound);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelRcsSquare = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-rcs-square", IconChannelRcsSquare);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><circle cx="24.5" cy="24" r="24" fill="#fff"/><path fill="#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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelSmsRound = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-sms-round", IconChannelSmsRound);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelSmsSquare = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-sms-square", IconChannelSmsSquare);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelTalk = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-talk", IconChannelTalk);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path d="M8.1 0H40c4.4 0 8 3.615 8 8.033v31.934C48 44.385 44.4 48 40 48H8.1c-4.4 0-8-3.615-8-8.033V8.033C.1 3.615 3.7 0 8.1 0Z" fill="#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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelTalkSquare = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-talk-square", IconChannelTalkSquare);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelTelegram = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-telegram", IconChannelTelegram);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelTelegramSquare = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-telegram-square", IconChannelTelegramSquare);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelTwitter = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-twitter", IconChannelTwitter);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path d="M8.1 0H40c4.4 0 8 3.615 8 8.033v31.934C48 44.385 44.4 48 40 48H8.1c-4.4 0-8-3.615-8-8.033V8.033C.1 3.615 3.7 0 8.1 0Z" fill="#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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelTwitterSquare = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-twitter-square", IconChannelTwitterSquare);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelViber = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-viber", IconChannelViber);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path d="M8.1 0H40c4.4 0 8 3.615 8 8.033v31.934C48 44.385 44.4 48 40 48H8.1c-4.4 0-8-3.615-8-8.033V8.033C.1 3.615 3.7 0 8.1 0Z" fill="#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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelViberSquare = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-viber-square", IconChannelViberSquare);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><circle cx="24" cy="24" r="24" fill="#fff"/><path fill="#000" fill-rule="evenodd" d="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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelWebchatRound = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-webchat-round", IconChannelWebchatRound);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path fill="#fff" d="M8.1 0H40c4.4 0 8 3.615 8 8.033v31.934C48 44.385 44.4 48 40 48H8.1c-4.4 0-8-3.615-8-8.033V8.033C.1 3.615 3.7 0 8.1 0Z"/><path fill="#000" fill-rule="evenodd" d="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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelWebchatSquare = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-webchat-square", IconChannelWebchatSquare);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelWechat = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-wechat", IconChannelWechat);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path d="M8.1 0H40c4.4 0 8 3.615 8 8.033v31.934C48 44.385 44.4 48 40 48H8.1c-4.4 0-8-3.615-8-8.033V8.033C.1 3.615 3.7 0 8.1 0Z" fill="#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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelWechatSquare = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-wechat-square", IconChannelWechatSquare);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelWhatsapp = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-whatsapp", IconChannelWhatsapp);
6
6
  export {
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement } from "../../utils/element.js";
2
2
  import { createIconClass } from "../create-icon-class.js";
3
- const templateHTML = '<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>';
3
+ const templateHTML = '<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>';
4
4
  const IconChannelWhatsappSquare = createIconClass(templateHTML);
5
5
  defineCustomElement("sinch-icon-channel-whatsapp-square", IconChannelWhatsappSquare);
6
6
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nectary/assets",
3
- "version": "3.2.1",
3
+ "version": "3.3.1",
4
4
  "files": [
5
5
  "**/*/*.css",
6
6
  "**/*/*.json",
@@ -38,6 +38,6 @@
38
38
  "vite": "^7.0.6"
39
39
  },
40
40
  "peerDependencies": {
41
- "@nectary/theme-base": "1.6.0"
41
+ "@nectary/theme-base": "1.7.1"
42
42
  }
43
43
  }