@capillarytech/creatives-library 8.0.204 → 8.0.206-alpha.0

package/v2Containers/Assets/images/viberIllustration.svg

@@ -0,0 +1,60 @@
+<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="240" height="240" fill="white"/>
+<mask id="mask0_317_246142" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="11" y="23" width="217" height="193">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0527 23.6855H227.552V215.936H11.0527V23.6855Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_317_246142)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M227.543 148.585C227.191 135.892 219.58 125.281 204.337 111.052C198.067 105.209 194 99.35 191.137 93.4905C189.211 89.5195 187.828 85.5468 186.699 81.5568C185.433 77.06 184.498 72.5237 183.467 67.9668C180.157 53.3868 173.188 35.1642 135.419 26.8905C101.175 19.3747 66.0942 34.2105 35.1594 69.661C26.2036 79.9005 19.2152 91.7379 14.9915 104.646C11.2921 115.918 9.09101 129.506 13.4931 141.186C23.1089 166.709 56.2431 164.393 71.1563 170.019C86.0489 175.646 98.3126 196.184 108.593 203.155C118.853 210.104 148.678 224.685 183.798 208.781C218.917 192.874 227.873 161.278 227.543 148.585ZM183.661 31.9321C182.415 29.1879 179.65 26.8905 175.252 28.2137C175.252 28.2137 167.815 29.8684 170.208 34.2295C172.624 38.5716 177.432 42.5821 181.501 42.8726C185.549 43.1458 184.927 34.6779 183.661 31.9321ZM160.962 23.9126C160.962 23.9126 156.601 25.1189 157.496 27.8253C158.392 30.53 163.259 31.0179 164.758 28.7395C166.258 26.4816 164.973 22.7237 160.962 23.9126Z" fill="#FFD24B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M80.6007 97.4436C80.6007 98.3025 79.8713 99.0004 78.9713 99.0004C78.0713 99.0004 77.3418 98.3025 77.3418 97.4436C77.3418 96.5846 78.0713 95.8867 78.9713 95.8867C79.8713 95.8867 80.6007 96.5846 80.6007 97.4436Z" fill="#6C65E4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M124.893 69.9662C124.893 71.0099 123.998 71.8562 122.891 71.8562C121.787 71.8562 120.892 71.0099 120.892 69.9662C120.892 68.9225 121.787 68.0762 122.891 68.0762C123.998 68.0762 124.893 68.9225 124.893 69.9662Z" fill="#6C65E4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M117.17 85.8621C117.17 86.7937 116.361 87.5484 115.363 87.5484C114.367 87.5484 113.559 86.7937 113.559 85.8621C113.559 84.9305 114.367 84.1758 115.363 84.1758C116.361 84.1758 117.17 84.9305 117.17 85.8621Z" fill="#6C65E4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M89.0276 53.8348C89.0276 54.7663 88.2191 55.5211 87.2212 55.5211C86.2265 55.5211 85.4165 54.7663 85.4165 53.8348C85.4165 52.9032 86.2265 52.1484 87.2212 52.1484C88.2191 52.1484 89.0276 52.9032 89.0276 53.8348Z" fill="#6C65E4"/>
+<path d="M171.924 106.697C171.467 105.974 169.49 103.534 164.028 102.045C164.028 102.045 157.685 99.9287 153.769 101.97C151.55 103.251 150.249 105.647 149.333 108.804C148.417 111.961 146.739 117.889 152.042 121.039L152.048 121.04L151.384 123.501C151.384 123.501 151.081 124.488 151.682 124.867C152.41 125.326 153.079 124.693 154.056 124.08C154.592 123.743 155.343 123.238 155.91 122.851C159.744 124.232 162.963 124.286 163.335 124.266C164.196 124.222 168.831 124.848 171.154 119.094C173.55 113.164 173.473 108.986 171.924 106.697Z" fill="white"/>
+<path d="M170.317 107.594C169.928 106.99 168.085 105.003 163.465 103.744C163.465 103.744 158.085 101.916 154.781 103.612C152.909 104.677 151.829 106.716 151.064 109.352C150.299 111.989 148.658 116.978 153.147 119.625C153.147 119.625 152.12 123.38 152.03 123.71C151.968 123.941 151.962 124.109 152.085 124.177C152.174 124.226 152.33 124.214 152.483 124.126C153.467 123.555 156.752 121.225 156.752 121.225C160.025 122.336 162.851 122.388 163.161 122.371C163.891 122.335 167.61 122.997 169.556 118.193C171.564 113.241 171.632 109.512 170.317 107.594Z" fill="#7360F2"/>
+<path d="M163.642 112.49C163.907 111.261 163.462 110.459 162.306 110.084" stroke="white" stroke-width="0.640265" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M165.086 113.447C165.413 112.324 165.332 111.29 164.841 110.346C164.348 109.399 163.495 108.721 162.282 108.299" stroke="white" stroke-width="0.640265" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M166.54 114.518C167.051 112.553 166.879 110.852 166.024 109.415C165.169 107.977 163.884 107.022 162.167 106.549" stroke="white" stroke-width="0.640265" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M160.746 116.153C160.746 116.153 161.17 116.306 161.482 116.081L162.092 115.629C162.388 115.403 162.968 115.364 163.41 115.793C163.741 116.12 164.054 116.463 164.35 116.821C164.627 117.167 165.176 117.946 165.178 117.947C165.439 118.322 165.405 118.76 165.058 119.139C165.057 119.141 165.054 119.145 165.053 119.147C164.684 119.517 164.257 119.826 163.79 120.062C163.785 120.063 163.785 120.065 163.78 120.067C163.38 120.252 163.017 120.322 162.691 120.274C162.642 120.27 162.594 120.26 162.548 120.245C162.408 120.209 162.275 120.151 162.154 120.072L162.148 120.055C161.699 119.787 160.978 119.226 159.826 118.118C159.158 117.481 158.544 116.79 157.993 116.05C157.716 115.679 157.461 115.293 157.229 114.893L157.204 114.85L157.18 114.807L157.155 114.764C157.147 114.75 157.139 114.736 157.13 114.722C156.9 114.321 156.693 113.907 156.51 113.482C156.145 112.634 155.853 111.757 155.636 110.861C155.252 109.308 155.126 108.405 155.12 107.881L155.107 107.866C155.1 107.722 155.116 107.578 155.154 107.439C155.164 107.392 155.18 107.345 155.201 107.301C155.324 106.996 155.566 106.716 155.926 106.461C155.929 106.457 155.932 106.458 155.935 106.454C156.373 106.168 156.853 105.953 157.359 105.818C157.361 105.819 157.366 105.818 157.369 105.818C157.87 105.707 158.267 105.897 158.461 106.308C158.463 106.311 158.862 107.175 159.022 107.588C159.184 108.024 159.324 108.467 159.442 108.917C159.593 109.514 159.268 109.998 158.925 110.141L158.229 110.444C157.876 110.6 157.798 111.045 157.798 111.045C157.798 111.045 157.786 114.491 160.746 116.153Z" fill="white"/>
+<path d="M154.162 50.6853C153.848 50.3952 152.577 49.4728 149.747 49.4603C149.747 49.4603 146.409 49.259 144.782 50.7514C143.876 51.6573 143.558 52.9828 143.524 54.6262C143.49 56.2696 143.447 59.3494 146.416 60.1845H146.419L146.417 61.4588C146.417 61.4588 146.398 61.9747 146.737 62.0798C147.148 62.2074 147.389 61.8153 147.782 61.3927C147.997 61.1607 148.294 60.8198 148.518 60.5593C150.549 60.7302 152.11 60.3396 152.288 60.2819C152.698 60.149 155.017 59.8518 155.395 56.7722C155.784 53.598 155.206 51.5903 154.162 50.6853Z" fill="white"/>
+<path d="M153.502 51.3265C153.236 51.085 152.089 50.3641 149.694 50.3536C149.694 50.3536 146.859 50.1673 145.483 51.4139C144.717 52.1702 144.459 53.2948 144.431 54.6672C144.402 56.0397 144.256 58.6615 146.766 59.3589C146.766 59.3589 146.756 61.3053 146.755 61.4764C146.755 61.596 146.774 61.6779 146.843 61.6948C146.892 61.7067 146.965 61.6813 147.028 61.6188C147.43 61.2157 148.715 59.6654 148.715 59.6654C150.439 59.778 151.811 59.4375 151.958 59.3893C152.306 59.2774 154.188 59.1159 154.506 56.5438C154.835 53.8925 154.385 52.0828 153.502 51.3265Z" fill="#7360F2"/>
+<path d="M150.912 54.5535C150.881 53.9258 150.562 53.5961 149.955 53.5645" stroke="white" stroke-width="0.320132" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M151.733 54.8285C151.745 54.2437 151.572 53.755 151.213 53.3626C150.852 52.9688 150.353 52.752 149.712 52.7051" stroke="white" stroke-width="0.320132" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M152.574 55.1576C152.566 54.1428 152.263 53.3435 151.664 52.7598C151.065 52.1761 150.321 51.8812 149.43 51.875" stroke="white" stroke-width="0.320132" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M149.987 56.6982C149.987 56.6982 150.212 56.7172 150.333 56.568L150.569 56.2708C150.683 56.1235 150.958 56.0295 151.227 56.1795C151.429 56.2946 151.625 56.4197 151.814 56.5543C151.993 56.6857 152.359 56.991 152.36 56.991C152.534 57.1382 152.574 57.3543 152.456 57.5821C152.456 57.5834 152.455 57.5857 152.455 57.5869C152.324 57.8134 152.158 58.0178 151.963 58.1922C151.961 58.1933 151.961 58.1945 151.959 58.1956C151.789 58.3371 151.623 58.4176 151.459 58.4369C151.435 58.4412 151.411 58.4427 151.387 58.4415C151.314 58.4422 151.243 58.4312 151.174 58.4088L151.169 58.4011C150.917 58.33 150.497 58.1523 149.797 57.7661C149.392 57.5452 149.006 57.2905 148.644 57.0045C148.462 56.8613 148.289 56.7077 148.125 56.5446L148.108 56.5272L148.09 56.5097L148.073 56.4922C148.067 56.4865 148.061 56.4806 148.055 56.4748C147.892 56.3108 147.739 56.1377 147.595 55.9562C147.31 55.5941 147.055 55.2085 146.834 54.8035C146.448 54.1032 146.27 53.6832 146.199 53.431L146.191 53.4257C146.169 53.3572 146.158 53.2855 146.159 53.2134C146.157 53.189 146.159 53.1646 146.163 53.1405C146.183 52.9773 146.264 52.8108 146.405 52.6409C146.406 52.6389 146.407 52.6389 146.408 52.6366C146.583 52.4416 146.787 52.2758 147.014 52.1452C147.015 52.1452 147.017 52.144 147.018 52.144C147.246 52.0254 147.462 52.0656 147.609 52.239C147.61 52.2401 147.915 52.606 148.046 52.7847C148.181 52.9741 148.306 53.1702 148.421 53.3722C148.571 53.6412 148.477 53.9167 148.329 54.0303L148.032 54.2665C147.882 54.3876 147.902 54.6126 147.902 54.6126C147.902 54.6126 148.342 56.2784 149.987 56.6982Z" fill="white"/>
+<path d="M146.315 84.2376C146.21 84.1409 145.787 83.8334 144.843 83.8292C144.843 83.8292 143.731 83.7621 143.188 84.2596C142.886 84.5616 142.78 85.0034 142.769 85.5512C142.758 86.099 142.743 87.1256 143.733 87.4039H143.734L143.733 87.8287C143.733 87.8287 143.727 88.0007 143.84 88.0357C143.977 88.0783 144.058 87.9476 144.188 87.8067C144.26 87.7293 144.359 87.6157 144.434 87.5289C145.111 87.5858 145.631 87.4557 145.69 87.4364C145.827 87.3921 146.6 87.2931 146.726 86.2665C146.856 85.2085 146.663 84.5392 146.315 84.2376Z" fill="white"/>
+<path d="M146.095 84.4506C146.006 84.3701 145.624 84.1298 144.826 84.1263C144.826 84.1263 143.881 84.0642 143.422 84.4798C143.167 84.7319 143.081 85.1067 143.071 85.5642C143.062 86.0217 143.013 86.8956 143.85 87.1281C143.85 87.1281 143.846 87.7769 143.846 87.8339C143.846 87.8738 143.852 87.9011 143.875 87.9067C143.891 87.9107 143.916 87.9022 143.937 87.8814C144.071 87.747 144.499 87.2303 144.499 87.2303C145.074 87.2678 145.531 87.1543 145.58 87.1382C145.696 87.1009 146.323 87.0471 146.43 86.1897C146.539 85.306 146.389 84.7027 146.095 84.4506Z" fill="#7360F2"/>
+<path d="M145.231 85.527C145.221 85.3177 145.115 85.2078 144.913 85.1973" stroke="white" stroke-width="0.106711" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M145.505 85.618C145.509 85.423 145.452 85.2601 145.332 85.1293C145.212 84.9981 145.045 84.9258 144.832 84.9102" stroke="white" stroke-width="0.106711" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M145.786 85.729C145.783 85.3907 145.682 85.1243 145.482 84.9297C145.283 84.7351 145.035 84.6368 144.738 84.6348" stroke="white" stroke-width="0.106711" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M144.923 86.2419C144.923 86.2419 144.998 86.2482 145.038 86.1984L145.117 86.0994C145.155 86.0503 145.247 86.0189 145.337 86.0689C145.404 86.1073 145.469 86.149 145.532 86.1939C145.592 86.2377 145.714 86.3395 145.714 86.3395C145.772 86.3885 145.786 86.4605 145.746 86.5365C145.746 86.5369 145.746 86.5377 145.746 86.5381C145.702 86.6136 145.647 86.6817 145.582 86.7398C145.581 86.7402 145.581 86.7406 145.58 86.741C145.524 86.7882 145.469 86.815 145.414 86.8214C145.406 86.8228 145.398 86.8233 145.39 86.8229C145.366 86.8232 145.342 86.8195 145.319 86.8121L145.317 86.8095C145.233 86.7858 145.093 86.7266 144.86 86.5978C144.725 86.5242 144.596 86.4393 144.476 86.344C144.415 86.2962 144.357 86.245 144.303 86.1907L144.297 86.1848L144.291 86.179L144.285 86.1732C144.283 86.1713 144.281 86.1693 144.279 86.1674C144.225 86.1127 144.174 86.055 144.126 85.9945C144.031 85.8738 143.946 85.7453 143.872 85.6103C143.743 85.3768 143.684 85.2368 143.661 85.1528L143.658 85.151C143.651 85.1282 143.647 85.1043 143.647 85.0803C143.647 85.0721 143.647 85.064 143.649 85.056C143.655 85.0016 143.682 84.9461 143.729 84.8894C143.73 84.8887 143.73 84.8887 143.73 84.888C143.788 84.823 143.857 84.7677 143.932 84.7242C143.932 84.7242 143.933 84.7238 143.934 84.7238C144.01 84.6842 144.082 84.6977 144.131 84.7554C144.131 84.7558 144.233 84.8778 144.276 84.9373C144.321 85.0005 144.363 85.0658 144.401 85.1332C144.451 85.2229 144.42 85.3147 144.371 85.3525L144.272 85.4313C144.222 85.4717 144.228 85.5467 144.228 85.5467C144.228 85.5467 144.375 86.1019 144.923 86.2419Z" fill="white"/>
+<path d="M116.023 51.1965C115.918 51.0998 115.494 50.7924 114.551 50.7882C114.551 50.7882 113.438 50.7211 112.896 51.2186C112.594 51.5205 112.488 51.9624 112.477 52.5102C112.465 53.058 112.451 54.0846 113.44 54.3629H113.441L113.441 54.7877C113.441 54.7877 113.434 54.9597 113.548 54.9947C113.685 55.0372 113.765 54.9065 113.896 54.7657C113.968 54.6883 114.067 54.5747 114.141 54.4879C114.818 54.5448 115.339 54.4146 115.398 54.3954C115.534 54.3511 116.308 54.252 116.433 53.2255C116.563 52.1674 116.371 51.4982 116.023 51.1965Z" fill="white"/>
+<path d="M115.802 51.4096C115.714 51.3291 115.331 51.0888 114.533 51.0853C114.533 51.0853 113.588 51.0232 113.129 51.4387C112.874 51.6908 112.788 52.0657 112.779 52.5232C112.769 52.9807 112.72 53.8546 113.557 54.0871C113.557 54.0871 113.554 54.7359 113.554 54.7929C113.554 54.8328 113.56 54.8601 113.583 54.8657C113.599 54.8697 113.624 54.8612 113.644 54.8404C113.778 54.706 114.207 54.1892 114.207 54.1892C114.781 54.2268 115.239 54.1133 115.288 54.0972C115.404 54.0599 116.031 54.0061 116.137 53.1487C116.247 52.265 116.097 51.6617 115.802 51.4096Z" fill="#7360F2"/>
+<path d="M114.939 52.4859C114.929 52.2767 114.822 52.1668 114.62 52.1562" stroke="white" stroke-width="0.106711" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M115.213 52.5769C115.217 52.382 115.159 52.2191 115.039 52.0883C114.919 51.9571 114.753 51.8848 114.539 51.8691" stroke="white" stroke-width="0.106711" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M115.493 52.6879C115.491 52.3497 115.39 52.0833 115.19 51.8887C114.99 51.6941 114.742 51.5958 114.445 51.5938" stroke="white" stroke-width="0.106711" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M114.631 53.2008C114.631 53.2008 114.706 53.2072 114.746 53.1574L114.825 53.0584C114.863 53.0093 114.954 52.9779 115.044 53.0279C115.111 53.0663 115.177 53.108 115.24 53.1529C115.299 53.1967 115.421 53.2984 115.422 53.2984C115.48 53.3475 115.493 53.4195 115.454 53.4955C115.454 53.4959 115.453 53.4967 115.453 53.4971C115.41 53.5726 115.354 53.6407 115.289 53.6988C115.289 53.6992 115.289 53.6996 115.288 53.7C115.232 53.7471 115.176 53.774 115.122 53.7804C115.114 53.7818 115.105 53.7823 115.097 53.7819C115.073 53.7822 115.049 53.7785 115.027 53.771L115.025 53.7684C114.941 53.7448 114.801 53.6855 114.567 53.5568C114.432 53.4832 114.304 53.3983 114.183 53.3029C114.123 53.2552 114.065 53.204 114.01 53.1496L114.004 53.1438L113.999 53.138L113.993 53.1322C113.991 53.1303 113.989 53.1283 113.987 53.1263C113.933 53.0717 113.881 53.014 113.834 52.9535C113.738 52.8328 113.653 52.7043 113.58 52.5693C113.451 52.3358 113.392 52.1958 113.368 52.1118L113.365 52.11C113.358 52.0872 113.354 52.0633 113.355 52.0392C113.354 52.0311 113.355 52.023 113.356 52.0149C113.363 51.9605 113.39 51.905 113.437 51.8484C113.437 51.8477 113.437 51.8477 113.438 51.847C113.496 51.782 113.564 51.7267 113.64 51.6832C113.64 51.6832 113.641 51.6828 113.641 51.6828C113.717 51.6432 113.789 51.6566 113.838 51.7144C113.839 51.7148 113.94 51.8368 113.984 51.8963C114.029 51.9595 114.07 52.0248 114.109 52.0922C114.159 52.1818 114.127 52.2737 114.078 52.3115L113.979 52.3903C113.929 52.4306 113.936 52.5056 113.936 52.5056C113.936 52.5056 114.082 53.0609 114.631 53.2008Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.8893 108.936C42.8893 109.168 42.7015 109.356 42.4693 109.356C42.2388 109.356 42.0509 109.168 42.0509 108.936C42.0509 108.705 42.2388 108.516 42.4693 108.516C42.7015 108.516 42.8893 108.705 42.8893 108.936Z" fill="#6C65E4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.0896 95.1664C64.0896 95.4491 63.8591 95.678 63.578 95.678C63.2954 95.678 63.0665 95.4491 63.0665 95.1664C63.0665 94.8838 63.2954 94.6548 63.578 94.6548C63.8591 94.6548 64.0896 94.8838 64.0896 95.1664Z" fill="#6C65E4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M69.3569 69.0121C69.3569 69.429 69.019 69.7669 68.6022 69.7669C68.1869 69.7669 67.849 69.429 67.849 69.0121C67.849 68.5953 68.1869 68.2574 68.6022 68.2574C69.019 68.2574 69.3569 68.5953 69.3569 69.0121Z" fill="#6C65E4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M86.0501 76.1176C86.0501 76.5344 85.7122 76.8723 85.2953 76.8723C84.8785 76.8723 84.5406 76.5344 84.5406 76.1176C84.5406 75.7008 84.8785 75.3629 85.2953 75.3629C85.7122 75.3629 86.0501 75.7008 86.0501 76.1176Z" fill="#6C65E4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M53.3285 86.2553C53.3285 86.8031 52.8848 87.2468 52.3369 87.2468C51.7874 87.2468 51.3438 86.8031 51.3438 86.2553C51.3438 85.7074 51.7874 85.2637 52.3369 85.2637C52.8848 85.2637 53.3285 85.7074 53.3285 86.2553Z" fill="#6C65E4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M130.849 143.008C134.039 138.111 137.626 139.676 138.608 140.429C140.17 141.626 139.567 143.499 134.786 147.898C130.309 152.014 126.403 155.036 121.125 159.864C111.045 169.081 108.643 172.698 108.643 172.698C108.643 172.698 107.239 170.9 111.922 163.845C111.922 163.845 113.372 161.068 116.438 157.616C116.438 157.616 128.397 146.773 130.849 143.008Z" fill="#091E42"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M95.2304 107.1C88.9178 107.1 83.3047 110.054 79.8689 115.309C75.6262 121.794 75.6957 130.314 80.0504 137.545C87.2094 149.432 118.986 157.41 121.82 158.1L128.052 152.495C126.915 149.009 113.633 109.325 97.9352 107.277C97.0225 107.159 96.1194 107.1 95.2304 107.1ZM122.039 158.964L121.84 158.916C120.421 158.583 87.001 150.618 79.3731 137.953C74.862 130.459 74.7989 121.617 79.2073 114.878C83.2983 108.624 90.3389 105.494 98.0362 106.494C105.134 107.419 112.488 115.462 119.892 130.396C125.376 141.455 128.849 152.389 128.883 152.498L128.958 152.741L122.039 158.964Z" fill="#091E42"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M91.3698 169.885C88.103 169.885 85.1156 169.301 82.8309 167.804C76.2198 163.473 75.4051 158.866 75.5045 156.505C75.6309 153.578 77.2666 150.918 79.7756 149.568C84.9672 146.765 107.83 153.974 108.801 154.281C109.008 154.347 109.123 154.57 109.057 154.777C108.992 154.983 108.771 155.099 108.563 155.034C108.328 154.96 85.0509 147.629 80.1514 150.261C77.8856 151.483 76.4077 153.888 76.294 156.54C76.2009 158.733 76.9809 163.028 83.2635 167.144C92.7924 173.386 116.151 162.572 117.415 161.978L121.303 158.441C121.468 158.294 121.717 158.305 121.862 158.468C122.008 158.628 121.997 158.877 121.836 159.024L117.904 162.602C117.874 162.627 117.842 162.649 117.808 162.667C117.026 163.041 102.558 169.885 91.3698 169.885Z" fill="#091E42"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M126.028 152.567L90.4038 107.557L90.7133 107.312L126.337 152.324L126.028 152.567Z" fill="#091E42"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M123.554 156.032C102.932 135.601 77.4949 120.206 77.2407 120.053L77.4444 119.715C77.6986 119.868 103.178 135.286 123.832 155.751L123.554 156.032Z" fill="#091E42"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M80.5991 165.668C80.5012 165.668 80.416 165.595 80.4033 165.496C80.3891 165.387 80.4649 165.289 80.5723 165.275L118.424 160.422L77.3086 153.215C77.2012 153.197 77.1286 153.095 77.1475 152.987C77.1665 152.88 77.2628 152.812 77.3765 152.826L119.774 160.258C119.871 160.276 119.94 160.361 119.937 160.457C119.935 160.555 119.861 160.636 119.766 160.648L80.6244 165.666C80.6165 165.668 80.607 165.668 80.5991 165.668Z" fill="#091E42"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M112.984 120.836L112.719 120.542C112.953 120.331 113.207 120.122 113.472 119.922L113.709 120.236C113.453 120.429 113.21 120.631 112.984 120.836ZM111.281 122.92L110.94 122.72C111.208 122.262 111.522 121.821 111.878 121.409L112.176 121.665C111.837 122.06 111.537 122.481 111.281 122.92ZM110.307 125.425L109.921 125.341C110.037 124.809 110.198 124.291 110.401 123.801L110.766 123.953C110.573 124.42 110.417 124.915 110.307 125.425ZM109.691 128.137C109.684 127.968 109.68 127.798 109.68 127.624C109.68 127.258 109.699 126.89 109.732 126.535L110.125 126.571C110.092 126.915 110.074 127.27 110.074 127.624C110.074 127.791 110.079 127.956 110.085 128.121L109.691 128.137ZM110.1 130.907C109.97 130.382 109.868 129.853 109.797 129.334L110.188 129.282C110.258 129.787 110.357 130.303 110.482 130.812L110.1 130.907ZM111.023 133.556C111.011 133.534 110.734 132.975 110.433 132.059L110.807 131.936C111.101 132.822 111.372 133.375 111.375 133.381L111.023 133.556Z" fill="#091E42"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M101.047 109.756L100.693 109.581C101.13 108.709 101.503 108.21 101.519 108.191L101.833 108.428C101.83 108.433 101.465 108.921 101.047 109.756ZM100.099 112.301L99.7173 112.207C99.8452 111.695 100.009 111.18 100.205 110.678L100.572 110.824C100.382 111.308 100.224 111.807 100.099 112.301ZM99.7536 114.99L99.3589 114.987C99.362 114.461 99.4031 113.923 99.482 113.388L99.872 113.446C99.7963 113.962 99.7568 114.482 99.7536 114.99ZM99.6936 117.771C99.5626 117.251 99.4694 116.719 99.4141 116.19L99.8073 116.151C99.8594 116.661 99.951 117.174 100.076 117.676L99.6936 117.771ZM100.701 120.389C100.45 119.91 100.23 119.418 100.049 118.924L100.42 118.788C100.595 119.265 100.808 119.741 101.052 120.204L100.701 120.389Z" fill="#091E42"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M89.9652 122.41L89.9194 122.019C90.4578 121.953 90.9852 121.93 91.5268 121.96L91.5078 122.355C90.9899 122.327 90.4831 122.349 89.9652 122.41ZM94.1257 122.939C93.652 122.745 93.1562 122.595 92.6526 122.497L92.7299 122.109C93.2589 122.213 93.7783 122.371 94.2741 122.575L94.1257 122.939ZM87.3441 123.083L87.2004 122.715C87.7104 122.516 88.2252 122.354 88.732 122.234L88.8236 122.616C88.3357 122.734 87.8368 122.892 87.3441 123.083ZM84.9457 124.345L84.7104 124.026C84.7326 124.011 85.2426 123.634 86.1015 123.205L86.2783 123.557C85.4526 123.97 84.9504 124.34 84.9457 124.345ZM96.3694 124.452C95.8815 124.056 95.4726 123.745 95.122 123.5L95.3447 123.176C95.7062 123.426 96.1231 123.743 96.6189 124.147L96.3694 124.452ZM98.4504 126.271C98.0368 125.894 97.6436 125.541 97.2726 125.216L97.5315 124.921C97.9057 125.246 98.3004 125.601 98.7173 125.979L98.4504 126.271ZM100.462 128.166C100.07 127.785 99.6883 127.424 99.3189 127.075L99.5889 126.787C99.9599 127.136 100.344 127.503 100.737 127.881L100.462 128.166ZM102.439 130.105C102.057 129.726 101.683 129.353 101.313 128.993L101.589 128.712C101.959 129.074 102.335 129.445 102.717 129.824L102.439 130.105ZM104.389 132.066C103.997 131.668 103.634 131.301 103.277 130.94L103.557 130.664C103.915 131.024 104.277 131.39 104.646 131.764L104.389 132.066ZM106.318 134.047L105.218 132.912L105.5 132.639L106.603 133.773L106.318 134.047ZM108.235 136.045C107.869 135.661 107.504 135.28 107.141 134.903L107.427 134.628C107.79 135.007 108.155 135.389 108.521 135.773L108.235 136.045ZM110.139 138.055L109.051 136.905L109.339 136.634L110.427 137.783L110.139 138.055ZM112.034 140.073L110.951 138.918L111.24 138.647L112.321 139.801L112.034 140.073ZM113.918 142.098L112.841 140.938L113.13 140.669L114.208 141.83L113.918 142.098ZM115.795 144.134L114.723 142.97L115.012 142.703L116.086 143.865L115.795 144.134ZM117.668 146.172L116.597 145.007L116.889 144.738L117.958 145.907L117.668 146.172ZM119.533 148.221L118.467 147.048L118.757 146.785L119.823 147.956L119.533 148.221ZM121.391 150.276L120.328 149.101L120.622 148.836L121.685 150.01L121.391 150.276ZM123.246 152.336C122.932 151.984 122.578 151.591 122.187 151.158L122.48 150.893C122.872 151.326 123.226 151.722 123.542 152.074L123.246 152.336ZM124.871 154.157C124.852 154.133 124.558 153.803 124.042 153.225L124.337 152.963C125.256 153.993 125.256 153.993 125.203 154.109L124.844 153.948L125.023 154.029L124.871 154.157Z" fill="#091E42"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M91.8156 138.366C91.364 138.318 90.9156 138.293 90.4813 138.293L90.2634 138.295L90.2556 137.9L90.4813 137.898C90.9282 137.898 91.3908 137.924 91.8566 137.974L91.8156 138.366ZM87.5982 138.707L87.4813 138.331C87.985 138.175 88.514 138.061 89.0556 137.99L89.1061 138.382C88.5882 138.449 88.0813 138.558 87.5982 138.707ZM94.4871 138.901C93.9787 138.756 93.4687 138.634 92.9698 138.539L93.044 138.151C93.554 138.249 94.0766 138.372 94.5961 138.522L94.4871 138.901ZM97.0561 139.845C96.5445 139.618 96.0566 139.421 95.6034 139.256L95.7361 138.887C96.1971 139.053 96.6961 139.253 97.2171 139.484L97.0561 139.845ZM85.2029 139.915L84.9661 139.597C85.3971 139.278 85.8613 138.999 86.3524 138.768L86.5198 139.125C86.0556 139.345 85.6103 139.612 85.2029 139.915ZM99.5287 141.063C99.0503 140.807 98.5829 140.565 98.1266 140.343L98.2987 139.987C98.7598 140.213 99.2319 140.455 99.715 140.714L99.5287 141.063ZM83.4092 141.876L83.0571 141.696C83.0698 141.672 83.3666 141.096 84.0519 140.396L84.3345 140.671C83.6934 141.326 83.4108 141.871 83.4092 141.876ZM101.924 142.425C101.464 142.149 101.01 141.885 100.561 141.629L100.756 141.288C101.207 141.543 101.665 141.811 102.126 142.086L101.924 142.425ZM104.269 143.886C103.822 143.597 103.375 143.316 102.934 143.043L103.143 142.706C103.585 142.983 104.032 143.265 104.482 143.553L104.269 143.886ZM106.572 145.411C106.135 145.113 105.698 144.821 105.26 144.532L105.477 144.202C105.917 144.491 106.356 144.786 106.793 145.084L106.572 145.411ZM108.843 146.99C108.415 146.687 107.981 146.382 107.548 146.082L107.772 145.758C108.208 146.058 108.641 146.362 109.072 146.669L108.843 146.99ZM111.085 148.605C110.665 148.296 110.239 147.988 109.809 147.677L110.038 147.356C110.469 147.667 110.897 147.978 111.32 148.288L111.085 148.605ZM113.303 150.257C112.891 149.944 112.468 149.63 112.04 149.311L112.276 148.992C112.703 149.313 113.128 149.63 113.542 149.943L113.303 150.257ZM115.501 151.942C115.096 151.626 114.677 151.305 114.248 150.977L114.488 150.663C114.917 150.991 115.336 151.315 115.743 151.629L115.501 151.942ZM117.677 153.648C117.284 153.336 116.869 153.009 116.436 152.671L116.679 152.358C117.112 152.698 117.529 153.026 117.922 153.339L117.677 153.648ZM119.836 155.384C119.468 155.082 119.056 154.751 118.606 154.389L118.852 154.081C119.303 154.443 119.717 154.777 120.085 155.079L119.836 155.384ZM122.019 157.124C121.942 157.124 121.876 157.068 121.822 157.023C121.681 156.904 121.312 156.595 120.754 156.137L121.006 155.832C121.564 156.292 121.934 156.603 122.076 156.719L122.136 156.77L122.011 156.923L122.134 157.079C122.095 157.111 122.056 157.124 122.019 157.124Z" fill="#091E42"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M99.0577 159.298C98.5303 159.284 98.0029 159.274 97.4819 159.269L97.485 158.875C98.0092 158.879 98.5382 158.889 99.0687 158.903L99.0577 159.298ZM94.7266 159.301L94.714 158.906C95.2319 158.889 95.7608 158.878 96.2977 158.873L96.3008 159.268C95.7671 159.273 95.2414 159.284 94.7266 159.301ZM101.816 159.402C101.293 159.377 100.768 159.353 100.24 159.333L100.256 158.938C100.785 158.958 101.312 158.982 101.837 159.007L101.816 159.402ZM91.9824 159.47L91.9429 159.078C92.4529 159.028 92.9819 158.99 93.525 158.958L93.5487 159.353C93.0103 159.385 92.4861 159.423 91.9824 159.47ZM104.573 159.569L104.249 159.547C103.837 159.52 103.42 159.492 102.997 159.467L103.022 159.072C103.444 159.099 103.862 159.127 104.276 159.153L104.6 159.175L104.573 159.569ZM107.327 159.79C106.82 159.748 106.294 159.704 105.752 159.659L105.784 159.265C106.327 159.309 106.853 159.353 107.361 159.396L107.327 159.79ZM89.2761 159.88L89.1892 159.495C89.6724 159.388 90.1998 159.293 90.7571 159.214L90.8124 159.606C90.2645 159.683 89.7482 159.776 89.2761 159.88ZM110.077 160.057C109.588 160.005 109.062 159.953 108.505 159.899L108.544 159.508C109.101 159.561 109.627 159.614 110.118 159.666L110.077 160.057ZM112.823 160.367C112.409 160.316 111.88 160.251 111.253 160.184L111.296 159.79C111.925 159.86 112.457 159.923 112.87 159.975L112.823 160.367ZM86.7024 160.728L86.5319 160.371C86.985 160.157 87.4903 159.964 88.0319 159.798L88.1471 160.176C87.6245 160.335 87.1382 160.521 86.7024 160.728ZM84.5614 162.298L84.2582 162.045C84.5866 161.652 84.9971 161.289 85.4771 160.967L85.6982 161.294C85.2482 161.595 84.8661 161.935 84.5614 162.298ZM83.3061 164.739C83.3061 164.739 83.2935 164.652 83.2935 164.497C83.2935 164.181 83.3471 163.679 83.6045 163.092L83.9661 163.25C83.7245 163.804 83.6882 164.268 83.6882 164.497C83.6882 164.608 83.6961 164.674 83.6961 164.68L83.3061 164.739Z" fill="#091E42"/>
+<path d="M153.357 150.62C151.969 149.891 146.593 147.83 136.557 150.471C136.557 150.471 124.545 152.926 120.198 159.756C117.85 163.824 117.98 168.821 119.42 174.673C120.861 180.525 123.63 191.475 134.937 191.615L134.947 191.612L136.149 196.127C136.149 196.127 136.572 197.972 137.874 198.022C139.451 198.084 139.933 196.467 140.921 194.598C141.463 193.571 142.193 192.082 142.739 190.947C150.093 189.625 155.252 186.76 155.826 186.387C157.152 185.528 165.085 182.274 163.499 171.009C161.866 159.397 157.914 152.834 153.357 150.62Z" fill="white"/>
+<path d="M151.627 153.518C150.456 152.915 145.708 151.45 137.219 153.685C137.219 153.685 127.001 155.716 123.31 161.437C121.315 164.842 121.468 169.07 122.671 173.958C123.873 178.846 125.842 188.271 135.395 188.358C135.395 188.358 137.207 195.261 137.365 195.868C137.479 196.292 137.624 196.564 137.882 196.559C138.067 196.555 138.304 196.395 138.467 196.114C139.506 194.305 142.586 187.595 142.586 187.595C148.8 186.357 153.335 183.85 153.812 183.539C154.938 182.812 161.448 180.455 160.135 171.043C158.785 161.341 155.473 155.358 151.627 153.518Z" fill="#7360F2"/>
+<path d="M145.517 167.408C144.811 165.214 143.369 164.349 141.19 164.812" stroke="white" stroke-width="1.17382" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M148.688 167.605C148.178 165.522 147.1 163.955 145.456 162.906C143.805 161.854 141.83 161.56 139.516 162.002" stroke="white" stroke-width="1.17382" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M151.977 167.971C150.987 164.384 149.154 161.841 146.48 160.342C143.805 158.843 140.888 158.505 137.728 159.328" stroke="white" stroke-width="1.17382" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M144.275 175.878C144.275 175.878 145.09 175.731 145.377 175.088L145.932 173.811C146.196 173.181 147.08 172.587 148.176 172.863C149 173.079 149.812 173.336 150.611 173.634C151.368 173.929 152.954 174.664 152.958 174.662C153.715 175.018 154.062 175.745 153.858 176.665C153.86 176.67 153.858 176.679 153.859 176.683C153.612 177.609 153.218 178.49 152.693 179.293C152.686 179.299 152.687 179.303 152.681 179.309C152.215 179.971 151.702 180.414 151.142 180.638C151.06 180.676 150.975 180.704 150.888 180.723C150.633 180.794 150.369 180.823 150.105 180.809L150.079 180.786C149.12 180.774 147.462 180.543 144.616 179.84C142.972 179.442 141.364 178.906 139.81 178.237C139.031 177.902 138.272 177.522 137.537 177.1L137.458 177.055L137.38 177.009L137.302 176.964C137.275 176.949 137.249 176.934 137.223 176.919C136.49 176.493 135.782 176.026 135.102 175.519C133.746 174.508 132.478 173.384 131.311 172.159C129.278 170.045 128.25 168.726 127.76 167.901L127.727 167.889C127.583 167.667 127.476 167.424 127.411 167.168C127.383 167.083 127.365 166.995 127.357 166.906C127.274 166.308 127.401 165.642 127.739 164.907C127.741 164.898 127.745 164.897 127.747 164.888C128.179 164.032 128.746 163.251 129.424 162.573C129.428 162.572 129.435 162.566 129.44 162.565C130.134 161.928 130.938 161.866 131.623 162.34C131.628 162.343 133.055 163.35 133.688 163.859C134.344 164.402 134.973 164.977 135.573 165.584C136.359 166.394 136.288 167.459 135.874 168.001L135.045 169.12C134.629 169.691 134.913 170.469 134.913 170.469C134.913 170.469 138.052 175.951 144.275 175.878Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M111.033 107.56C111.033 107.56 134.611 98.9499 133.706 120.04C133.477 125.391 130.729 141.761 130.729 141.761C130.729 141.761 132.974 122.642 133.002 118.756C133.057 111.427 126.759 103.069 111.033 107.56Z" fill="#091E42"/>
+</g>
+</svg>

package/v2Containers/BeeEditor/index.js

@@ -349,4 +349,4 @@ const withConnect = connect(mapStateToProps, mapDispatchToProps);
 const withSaga = injectSaga({ key: 'beeEditor', saga: v2BeeEditionSagas });
 const withReducer = injectReducer({ key: 'beeEditor', reducer: v2BeeEditionReducer });
 
-export default compose(withReducer, withSaga, withConnect)(injectIntl(BeeEditor));
+export default compose(withReducer, withSaga, withConnect)(injectIntl(React.memo(BeeEditor)));

package/v2Containers/CreativesContainer/index.js

@@ -11,7 +11,7 @@ import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import classnames from 'classnames';
 import {
-  isEmpty, get, forEach, cloneDeep,
+  isEmpty, get, forEach, cloneDeep, debounce,
 } from 'lodash';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
@@ -105,6 +105,8 @@ export class Creatives extends React.Component {
       // NEW: Test and Preview feature state
       showTestAndPreviewSlidebox: false,
       isTestAndPreviewMode: false, // Add flag to track Test & Preview mode
+      // Performance optimization: Local template name for immediate UI feedback
+      localTemplateName: '',
     };
     this.liquidFlow = Boolean(commonUtil.hasLiquidSupportFeature());
     this.creativesTemplateSteps = {
@@ -112,6 +114,9 @@ export class Creatives extends React.Component {
       2: 'templateSelection', // only for email in current flows wil be used for mpush, line and wechat as well.
       3: 'createTemplateContent',
     };
+
+    // Performance optimization: Debounced template name update
+    this.debouncedTemplateNameUpdate = debounce(this.performTemplateNameUpdate.bind(this), 300);
   }
 
   componentWillUnmount() {
@@ -119,6 +124,11 @@ export class Creatives extends React.Component {
       this.props.templateActions.resetTemplateStoreData();
     }
     this.props.globalActions.clearMetaEntities();
+
+    // Cleanup debounced function
+    if (this.debouncedTemplateNameUpdate) {
+      this.debouncedTemplateNameUpdate.cancel();
+    }
   }
 
   componentDidMount() {
@@ -136,6 +146,29 @@ export class Creatives extends React.Component {
 
   onEnterTemplateName = () => {
     this.setState({ templateNameExists: true });
+  }
+
+  // Performance optimized template name update
+  performTemplateNameUpdate = (value, formData, onFormDataChange) => {
+    const isEmptyTemplateName = !value.trim();
+    const newFormData = { ...formData, 'template-name': value, 'isTemplateNameEdited': true };
+
+    this.setState({ isTemplateNameEmpty: isEmptyTemplateName });
+    onFormDataChange(newFormData);
+  }
+
+  // Update template name immediately for UI feedback
+  updateTemplateNameImmediately = (value, formData, onFormDataChange) => {
+    const isEmptyTemplateName = !value.trim();
+
+    // 1. IMMEDIATE: Update local state for instant UI feedback
+    this.setState({ 
+      isTemplateNameEmpty: isEmptyTemplateName,
+      localTemplateName: value 
+    });
+
+    // 2. DEBOUNCED: Only debounce the expensive onFormDataChange call
+    this.debouncedTemplateNameUpdate(value, formData, onFormDataChange);
   };
 
   onRemoveTemplateName = () => {
@@ -1395,21 +1428,30 @@ export class Creatives extends React.Component {
       } />
   )
 
-  templateNameComponentInput = ({ formData, onFormDataChange, name }) => (
-    <CapInput
-      value={name}
-      suffix={<span />}
-      onBlur={() => { this.setState({ isEditName: false }, () => { this.showTemplateName({ formData, onFormDataChange }); }); }}
-      onChange={(ev) => {
-        const { value } = ev.currentTarget;
-        const isEmptyTemplateName = !value.trim();
-
-        const newFormData = { ...formData, 'template-name': value, 'isTemplateNameEdited': true };
-        this.setState({ isTemplateNameEmpty: isEmptyTemplateName });
-        onFormDataChange(newFormData);
-      }}
-    />
-  )
+  templateNameComponentInput = ({ formData, onFormDataChange, name }) => {
+    // Use local state for immediate UI feedback, fallback to prop value
+    const displayValue = this.state.localTemplateName !== '' ? this.state.localTemplateName : name;
+    
+    return (
+      <CapInput
+        value={displayValue}
+        suffix={<span />}
+        onBlur={() => { 
+          this.setState({ 
+            isEditName: false,
+            localTemplateName: '' // Clear local state on blur
+          }, () => { 
+            this.showTemplateName({ formData, onFormDataChange }); 
+          }); 
+        }}
+        onChange={(ev) => {
+          const { value } = ev.currentTarget;
+          // Use optimized update for better performance
+          this.updateTemplateNameImmediately(value, formData, onFormDataChange);
+        }}
+      />
+    );
+  }
 
   showTemplateName = ({ formData, onFormDataChange }) => { //gets called from email/index after template data is fetched
     const { slidBoxContent, currentChannel, isEditName } = this.state;
@@ -1423,7 +1465,10 @@ export class Creatives extends React.Component {
       if (name && !isEditName) {
         this.setState({ showTemplateNameComponentEdit: false });
       } else if (isEditName) {
-        this.setState({ showTemplateNameComponentEdit: true });
+        this.setState({ 
+          showTemplateNameComponentEdit: true,
+          localTemplateName: name || '' // Initialize local state with current value
+        });
       }
     }
   }

package/v2Containers/Email/index.js

@@ -2516,6 +2516,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         });
         obj.versions.history.push(newdata);
       }
+      if (index === "template-subject" && obj?.versions?.history?.[0]) {
+        obj.versions.history[0].subject = newdata;
+      }
     });
     //const data = formData[`${this.state.currentTab - 1}`];
     obj.name = formData['template-name'];

package/v2Containers/MobilePush/Create/index.js

@@ -207,9 +207,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       {
         formData: newFormData,
         tabCount,
-        isSchemaChanged:
-          compareValue?.toLowerCase() === EXTERNAL_LINK_LOWERCASE ||
-          !this.state?.isSchemaChanged,
       },
       () => {
         if (isFullMode && showTemplateName) {
@@ -220,6 +217,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         }
       }
     );
+    this.setState({isSchemaChanged:
+      compareValue?.toLowerCase() === EXTERNAL_LINK_LOWERCASE ||
+      !this.state?.isSchemaChanged});
   };
 
   onTagSelect = (data, currentTab, srcComp) => {

package/v2Containers/Templates/ChannelTypeIllustration.js

@@ -0,0 +1,188 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import emailIllustration from '../Assets/images/emailIllustration.svg';
+import smsIllustration from '../Assets/images/smsIllustration.svg';
+import pushIllustration from '../Assets/images/pushIllustration.svg';
+import viberIllustration from '../Assets/images/viberIllustration.svg';
+import lineIllustration from '../Assets/images/lineIllustration.svg';
+import facebookIllustration from '../Assets/images/facebookIllustration.svg';
+import whatsappIllustration from '../Assets/images/whatsappIllustration.png';
+import whatsappOrZaloAccountIllustration from '../Assets/images/whatsappOrZaloAccountIllustration.svg';
+import rcsIllustration from '../Assets/images/rcsIllustration.png';
+import zaloillustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
+import inAppIllustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
+import messages from './messages';
+import { FormattedMessage } from 'react-intl';
+import { CapIllustration } from "@capillarytech/cap-ui-library";
+import { MOBILE_PUSH, SMS, EMAIL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP } from '../CreativesContainer/constants';
+
+
+// Configuration object for channel types
+const CHANNEL_CONFIG = {
+  [SMS]: {
+    illustrationImage: smsIllustration,
+    buttonMessage: messages.newSMSTemplate,
+    titleMessage: messages.smsTitleIllustartion,
+    hasButton: true,
+  },
+  [EMAIL]: {
+    illustrationImage: emailIllustration,
+    buttonMessage: messages.newEmailTemplate,
+    titleMessage: messages.emailTitleIllustartion,
+    hasButton: true,
+  },
+  [MOBILE_PUSH]: {
+    illustrationImage: pushIllustration,
+    buttonMessage: messages.newNotificationTemplate,
+    titleMessage: messages.pushTitleIllustartion,
+    hasButton: true,
+  },
+  [VIBER]: {
+    illustrationImage: viberIllustration,
+    buttonMessage: messages.newViberTemplate,
+    titleMessage: messages.viberTitleIllustartion,
+    hasButton: true,
+  },
+  [LINE]: {
+    illustrationImage: lineIllustration,
+    buttonMessage: messages.newLineTemplate,
+    titleMessage: messages.lineTitleIllustartion,
+    hasButton: true,
+  },
+  [FACEBOOK]: {
+    illustrationImage: facebookIllustration,
+    buttonMessage: messages.newFacebookTemplate,
+    titleMessage: messages.facebookTitleIllustartion,
+    hasButton: true,
+  },
+  [RCS]: {
+    illustrationImage: rcsIllustration,
+    buttonMessage: messages.newRCSTemplate,
+    titleMessage: messages.rcsTitleIllustartion,
+    descriptionMessage: messages.rcsDescIllustartion,
+    descriptionPosition: 'bottom',
+    descriptionClassName: 'illustration-desc rcs-illustration',
+    hasButton: true,
+  },
+  [INAPP]: {
+    illustrationImage: inAppIllustration,
+    titleMessage: messages.inAppTitleIllustration,
+    descriptionMessage: messages.inAppDescIllustration,
+    descriptionPosition: 'bottom',
+    descriptionClassName: 'illustration-desc inapp-illustration',
+    buttonClassName: 'inapp-illustration-button',
+    hasButton: false,
+  },
+};
+
+function ChannelTypeIllustration(props) {
+  const {
+    isFullMode,
+    createTemplate,
+    currentChannel,
+    hostName
+  } = props;
+
+  const templateText = useMemo(() => {
+    const templateIntlMsg = <FormattedMessage {...messages.template} />;
+    return isFullMode ? templateIntlMsg : '';
+  }, [isFullMode]);
+
+  const getChannelTypeIllustrationInfo = (type, hostName) => {
+    // Handle special cases with hostName dependency
+    if (type === WHATSAPP) {
+      if (!hostName) {
+        return {
+          illustrationImage: whatsappOrZaloAccountIllustration,
+          title: <FormattedMessage {...messages.whatsappAccountNotConfiguredTitle} />,
+          description: <FormattedMessage {...messages.accountNotConfiguredDescription} />,
+          descriptionPosition: 'bottom',
+          descriptionClassName: 'illustration-desc zalo-illustration',
+          buttonClassName: 'zalo-illustration-button',
+        };
+      }
+      return {
+        buttonLabel: <FormattedMessage {...messages.newWhatsappTemplate} values={{ template: templateText }} />,
+        onClick: createTemplate,
+        illustrationImage: whatsappIllustration,
+        title: <FormattedMessage {...messages.whatsappTitleIllustration} values={{ template: templateText }} />,
+        description: <FormattedMessage {...messages.whatsappDescIllustration} />,
+        descriptionPosition: 'bottom',
+        descriptionClassName: 'illustration-desc',
+      };
+    }
+
+    if (type === ZALO) {
+      if (!hostName) {
+        return {
+          illustrationImage: whatsappOrZaloAccountIllustration,
+          title: <FormattedMessage {...messages.zaloAccountNotConfiguredTitle} />,
+          description: <FormattedMessage {...messages.accountNotConfiguredDescription} />,
+          descriptionPosition: 'bottom',
+          descriptionClassName: 'illustration-desc zalo-illustration',
+          buttonClassName: 'zalo-illustration-button',
+        };
+      }
+      return {
+        illustrationImage: zaloillustration,
+        title: <FormattedMessage {...messages.zaloTitleIllustration} />,
+        description: <FormattedMessage {...messages.zaloDescIllustration} />,
+        descriptionPosition: 'bottom',
+        descriptionClassName: 'illustration-desc zalo-illustration',
+        buttonClassName: 'zalo-illustration-button',
+      };
+    }
+
+    // Handle standard channels using configuration
+    const config = CHANNEL_CONFIG[type];
+    if (!config) {
+      return {
+        illustrationImage: emailIllustration,
+        title: '',
+        description: '',
+        descriptionPosition: 'bottom',
+        descriptionClassName: 'illustration-desc unknown-illustration',
+        buttonClassName: 'unknown-illustration-button',
+        buttonLabel: <FormattedMessage {...messages.createNewActionButton} />,
+      }; //send default illustration here
+    }
+
+    const result = {
+      illustrationImage: config.illustrationImage,
+      title: <FormattedMessage {...config.titleMessage} values={{ template: templateText }} />,
+    };
+
+    if (config.hasButton) {
+      result.buttonLabel = <FormattedMessage {...config.buttonMessage} values={{ template: templateText }} />;
+      result.onClick = createTemplate;
+    }
+
+    if (config.descriptionMessage) {
+      result.description = <FormattedMessage {...config.descriptionMessage} />;
+      result.descriptionPosition = config.descriptionPosition;
+      result.descriptionClassName = config.descriptionClassName;
+    }
+
+    if (config.buttonClassName) {
+      result.buttonClassName = config.buttonClassName;
+    }
+
+    return result;
+  };
+
+  const channelLowerCase = currentChannel?.toLowerCase() || '';
+
+  return (
+    <CapIllustration
+      buttonClassName={`create-new-${channelLowerCase}`}
+      {...getChannelTypeIllustrationInfo(currentChannel, hostName)}
+    />
+  );
+}
+ChannelTypeIllustration.propTypes = {
+  isFullMode: PropTypes.bool,
+  createTemplate: PropTypes.func.isRequired,
+  currentChannel: PropTypes.string,
+  hostName: PropTypes.string,
+};
+export default ChannelTypeIllustration;