@telefonica/mistica 17.0.0 → 17.1.0

package/src/logo-esimflag.tsx

@@ -15,16 +15,30 @@ const EsimflagLogoImage = ({
         (isDarkMode
             ? colors.inverse
             : {
-                  default: colors.backgroundBrand,
-                  alternative: colors.backgroundBrand,
+                  default: 'url(#backgroundLogo)',
+                  alternative: 'url(#backgroundLogo)',
                   brand: colors.neutralHighBrand,
                   media: colors.neutralHighBrand,
                   negative: colors.neutralHighNegative,
               }[themeVariant]);
+    const LogoBackground = () => (
+        <defs>
+            <pattern id="backgroundLogo" patternUnits="userSpaceOnUse" width="100%" height="100%">
+                <image
+                    xlinkHref="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5Ojf/2wBDAQoKCg0MDRoPDxo3JR8lNzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzf/wAARCAAdAGQDASIAAhEBAxEB/8QAGgAAAgMBAQAAAAAAAAAAAAAABAUAAgMGAf/EACAQAAICAgIDAQEAAAAAAAAAAAABAgMEERIhBTFBUXH/xAAbAQABBQEBAAAAAAAAAAAAAAABAgMEBQYAB//EAB0RAAMAAwADAQAAAAAAAAAAAAABAgMEEQUSIRP/2gAMAwEAAhEDEQA/AOchjy36GGLBxaGj8c18M547r+Gl/ZUZrLqVwNwblDWx7Tkx4Ls4yzIlUzXF8nKT1tiax+30qcmpTZ1070/phOxMVVZTkvZq7tr2N+vCRg8dTYW5otGaAHcXjadwsn4ynIxU0euaAo2kdwOEGvG1LDHYkUlcgCzI19BbMvX0Up6RMus5HEblr2QSwzOvZAOBtYnw7Czxq16E+fhcU+juLK48X0IfJ1rsq8WZ9PRa14Zwebivb6BKsdxkdBmVrkwLgtltGT4CfH439ZnTtI35dFUiNBbHp1IlkcmWhN/pm12exQCX+U+vAhTPJ2dFF6K2IAxWpDQPfdrfYtyMlpvsKyfopyN7fY/HDN7+vMv4bQynp/0gNRU5xb5a7/CCml0qFiR//9k="
+                    x="0"
+                    y="0"
+                    width={type === 'imagotype' ? '100%' : undefined}
+                    height="100%"
+                />
+            </pattern>
+        </defs>
+    );
 
     if (type === 'vertical') {
         return (
             <g fill={color}>
+                <LogoBackground />
                 <path d="M9.33603 12H50.819C51.9502 12 53.0447 12.4078 53.8875 13.1485L65.0953 22.9663C66.0739 23.8235 66.6338 25.0497 66.6338 26.3369V58.7085C66.6338 59.9736 65.5874 61 64.2978 61H9.33603C8.04641 61 7 59.9736 7 58.7085V14.2915C7 13.0264 8.04641 12 9.33603 12ZM42.3148 32.8561L57.779 32.8867V32.8894L59.1167 25.5518L40.6038 25.5157C41.687 27.674 42.312 30.1818 42.312 32.8589L26.5735 32.8284L28.0469 25.4824L40.6038 25.5074C38.3978 21.1131 34.2631 18.1531 29.5232 18.1448L24.3307 18.1337C22.9082 18.1281 21.6893 19.1046 21.415 20.4695L14.5228 54.858L19.7266 54.8691C21.1378 54.8719 22.3511 53.8954 22.6254 52.536L25.1113 40.1688L43.9919 40.2077C42.9228 38.0549 42.3091 35.5554 42.3148 32.8867V32.8561ZM56.4498 40.2326L43.9947 40.2077C44.5575 41.3423 45.2504 42.3909 46.0507 43.3036C48.1153 45.6894 50.8868 47.2651 53.978 47.5786H55.1121L56.4498 40.2326Z" />
             </g>
         );
@@ -33,21 +47,25 @@ const EsimflagLogoImage = ({
     if (type === 'imagotype') {
         return (
             <g fill={color}>
-                <path d="M9.33603 11H50.819C51.9502 11 53.0447 11.4078 53.8875 12.1485L65.0953 21.9663C66.0739 22.8235 66.6338 24.0497 66.6338 25.3369V57.7085C66.6338 58.9736 65.5874 60 64.2978 60H9.33603C8.04641 60 7 58.9736 7 57.7085V13.2915C7 12.0264 8.04641 11 9.33603 11ZM42.3148 31.8561L57.779 31.8867V31.8894L59.1167 24.5518L40.6038 24.5157C41.687 26.674 42.312 29.1818 42.312 31.8589L26.5735 31.8284L28.0469 24.4824L40.6038 24.5074C38.3978 20.1131 34.2631 17.1531 29.5232 17.1448L24.3307 17.1337C22.9082 17.1281 21.6893 18.1046 21.415 19.4695L14.5228 53.858L19.7266 53.8691C21.1378 53.8719 22.3511 52.8954 22.6254 51.536L25.1113 39.1688L43.9919 39.2077C42.9228 37.0549 42.3091 34.5554 42.3148 31.8867V31.8561ZM56.4498 39.2326L43.9947 39.2077C44.5575 40.3423 45.2504 41.3909 46.0507 42.3036C48.1153 44.6894 50.8868 46.2651 53.978 46.5786H55.1121L56.4498 39.2326Z" />
-                <path d="M94.6351 24.4047C94.0638 24.3354 93.5831 24.2494 93.1956 24.1467C92.8704 24.058 92.6413 23.9442 92.5055 23.8028C92.3698 23.664 92.3019 23.4671 92.3019 23.2119V21.8192C92.9382 21.9968 93.6085 22.1438 94.3155 22.2575C95.0226 22.3713 95.6419 22.4295 96.1736 22.4295C97.0673 22.4295 97.7319 22.2686 98.1674 21.9441C98.6001 21.6195 98.8179 21.1895 98.8179 20.6569C98.8179 20.3378 98.7274 20.0604 98.5464 19.8163C98.3654 19.5749 98.0996 19.3585 97.7489 19.1671C97.3982 18.9757 96.9259 18.7732 96.3292 18.5568L95.5316 18.2711C94.4428 17.8771 93.6113 17.4 93.0429 16.8396C92.4716 16.2792 92.186 15.5496 92.186 14.6452C92.186 13.8685 92.3868 13.2082 92.7884 12.6617C93.19 12.1152 93.7669 11.7019 94.5192 11.4217C95.2714 11.1415 96.1651 11.0028 97.2031 11.0028C97.6951 11.0028 98.1844 11.0305 98.6709 11.0888C99.1573 11.147 99.5759 11.2192 99.9265 11.3079C100.147 11.3579 100.317 11.4161 100.433 11.4799C100.549 11.5437 100.631 11.6297 100.676 11.7379C100.721 11.8461 100.744 11.9959 100.744 12.1873V13.5051C100.252 13.3775 99.6975 13.272 99.0809 13.1916C98.4644 13.1084 97.9242 13.0668 97.4576 13.0668C96.6403 13.0668 96.0039 13.1888 95.5514 13.4302C95.0961 13.6715 94.8699 14.046 94.8699 14.5565C94.8699 14.9643 95.0537 15.2972 95.4242 15.5579C95.7946 15.8187 96.3348 16.0767 97.0475 16.3319L97.8252 16.6371C98.6426 16.9312 99.3128 17.2474 99.8389 17.5914C100.365 17.9354 100.772 18.3543 101.063 18.8509C101.355 19.3475 101.502 19.9439 101.502 20.6458C101.502 21.4475 101.301 22.1383 100.899 22.7153C100.498 23.2951 99.9067 23.7389 99.129 24.0497C98.3513 24.3604 97.418 24.5185 96.3263 24.5185C95.7692 24.5185 95.2036 24.4824 94.6351 24.4131V24.4047Z" />
-                <path d="M90.4523 19.672H82.6269C82.7174 20.5709 83.0681 21.2394 83.679 21.6805C84.2898 22.1216 85.0902 22.3435 86.0829 22.3435C87.0755 22.3435 88.286 22.1188 89.6293 21.6694V23.1508C89.6293 23.345 89.5841 23.5087 89.4908 23.6446C89.4003 23.7806 89.1995 23.9054 88.8969 24.0275C88.5009 24.1634 88.0088 24.2771 87.4206 24.3742C86.8323 24.4713 86.2497 24.5213 85.67 24.5213C84.5246 24.5213 83.4951 24.2993 82.5816 23.8582C81.6653 23.4171 80.9442 22.7708 80.4181 21.9163C79.8921 21.0619 79.6291 20.0604 79.6291 18.9091C79.6291 17.7579 79.8667 16.7952 80.339 15.9352C80.8113 15.0752 81.4645 14.4094 82.296 13.9378C83.1275 13.4662 84.0692 13.2304 85.1213 13.2304C86.1734 13.2304 87.0897 13.4662 87.9127 13.9378C88.7357 14.4094 89.3805 15.0614 89.8471 15.8908C90.3109 16.7203 90.5457 17.6746 90.5457 18.7538C90.5457 19.0673 90.5145 19.3752 90.4551 19.6748L90.4523 19.672ZM83.4612 15.9352C83.0115 16.3319 82.74 16.9201 82.6495 17.6968H87.6157C87.5394 16.9339 87.2679 16.3486 86.804 15.9463C86.3374 15.5413 85.7774 15.3416 85.1213 15.3416C84.4652 15.3416 83.9109 15.5413 83.4612 15.9352Z" />
-                <path d="M104.61 13.4551C104.092 13.4551 103.832 13.7104 103.832 14.218V24.3215H106.92V13.4551H104.61Z" />
-                <path d="M125.241 13.7464C125.781 14.0904 126.197 14.5648 126.488 15.1723C126.777 15.7771 126.924 16.4706 126.924 17.2502V24.3215H124.613C124.37 24.3215 124.178 24.2549 124.042 24.119C123.906 23.9831 123.836 23.7972 123.836 23.5586V17.6108C123.836 16.9811 123.694 16.4817 123.411 16.1072C123.128 15.7327 122.682 15.5469 122.074 15.5469C121.403 15.5469 120.889 15.7743 120.529 16.2321C120.17 16.6898 119.992 17.3279 119.992 18.1518V24.3243H116.904V17.6136C116.904 16.9839 116.762 16.4845 116.48 16.11C116.197 15.7355 115.744 15.5496 115.119 15.5496C114.449 15.5496 113.934 15.7771 113.575 16.2348C113.216 16.6926 113.038 17.3306 113.038 18.1546V24.3271H109.949V14.218C109.949 13.7104 110.201 13.4551 110.705 13.4551H112.673L112.763 15.2722C113.159 14.6286 113.674 14.1265 114.308 13.7686C114.941 13.4107 115.631 13.2304 116.378 13.2304C117.17 13.2304 117.848 13.4246 118.414 13.813C118.977 14.2014 119.398 14.734 119.673 15.4081C120.068 14.7202 120.583 14.1847 121.217 13.8019C121.85 13.4191 122.549 13.2304 123.312 13.2304C124.076 13.2304 124.704 13.4024 125.247 13.7464H125.241Z" />
-                <path d="M80.9215 29.9475C80.5793 30.2832 80.4068 30.7742 80.4068 31.415V59.5617H86.6994V47.9185H98.5238V43.2774H86.6994V34.1726H100.311V29.4454H82.4176C81.7615 29.4454 81.2637 29.6118 80.9215 29.9475Z" />
-                <path d="M105.218 31.415C105.218 30.7742 105.388 30.2832 105.73 29.9475C106.072 29.6118 106.57 29.4454 107.226 29.4454H111.511V54.8345H124.808V59.5617H105.218V31.415Z" />
-                <path d="M156.537 58.3355C156.537 58.1025 156.495 57.8556 156.404 57.592V57.5893L146.141 29.4426H140.519C139.806 29.4426 139.286 29.5675 138.957 29.8144C138.629 30.0613 138.347 30.4913 138.109 31.1043L128.247 59.5589H134.362L136.279 53.7359H148.55L150.513 59.5589H154.976C155.479 59.5589 155.867 59.4479 156.136 59.2316C156.404 59.0152 156.537 58.7156 156.537 58.3355ZM137.795 49.1003L142.391 35.224L147.032 49.1003H137.795Z" />
-                <path d="M188 41.9652V57.5476C186.453 58.2772 184.623 58.8681 182.511 59.3203C180.398 59.7725 178.181 60 175.862 60C172.261 60 169.196 59.3814 166.667 58.1385C164.139 56.8985 162.227 55.1258 160.932 52.8205C159.637 50.5151 158.992 47.7854 158.992 44.6339C158.992 41.4825 159.685 38.5557 161.068 36.206C162.451 33.8563 164.43 32.0698 167.004 30.8436C169.578 29.6174 172.621 29.0043 176.13 29.0043C177.618 29.0043 179.032 29.0931 180.37 29.2678C181.707 29.4426 182.839 29.6757 183.761 29.9669C184.504 30.2 184.994 30.4774 185.234 30.7992C185.472 31.121 185.59 31.5593 185.59 32.1114V35.3516C183.984 34.9133 182.437 34.5942 180.949 34.3889C179.462 34.1864 178.107 34.0838 176.888 34.0838C173.138 34.0838 170.285 34.966 168.319 36.7331C166.356 38.5003 165.372 41.0442 165.372 44.3732C165.372 47.8741 166.294 50.5096 168.138 52.274C169.982 54.0411 172.615 54.9233 176.037 54.9233C178.715 54.9233 180.737 54.6597 182.106 54.1354V46.6951H175.279V43.6741C175.279 43.1192 175.426 42.6976 175.726 42.4035C176.023 42.1122 176.456 41.9652 177.021 41.9652H188Z" />
+                <LogoBackground />
+                <g>
+                    <path d="M9.33603 11H50.819C51.9502 11 53.0447 11.4078 53.8875 12.1485L65.0953 21.9663C66.0739 22.8235 66.6338 24.0497 66.6338 25.3369V57.7085C66.6338 58.9736 65.5874 60 64.2978 60H9.33603C8.04641 60 7 58.9736 7 57.7085V13.2915C7 12.0264 8.04641 11 9.33603 11ZM42.3148 31.8561L57.779 31.8867V31.8894L59.1167 24.5518L40.6038 24.5157C41.687 26.674 42.312 29.1818 42.312 31.8589L26.5735 31.8284L28.0469 24.4824L40.6038 24.5074C38.3978 20.1131 34.2631 17.1531 29.5232 17.1448L24.3307 17.1337C22.9082 17.1281 21.6893 18.1046 21.415 19.4695L14.5228 53.858L19.7266 53.8691C21.1378 53.8719 22.3511 52.8954 22.6254 51.536L25.1113 39.1688L43.9919 39.2077C42.9228 37.0549 42.3091 34.5554 42.3148 31.8867V31.8561ZM56.4498 39.2326L43.9947 39.2077C44.5575 40.3423 45.2504 41.3909 46.0507 42.3036C48.1153 44.6894 50.8868 46.2651 53.978 46.5786H55.1121L56.4498 39.2326Z" />
+                    <path d="M94.6351 24.4047C94.0638 24.3354 93.5831 24.2494 93.1956 24.1467C92.8704 24.058 92.6413 23.9442 92.5055 23.8028C92.3698 23.664 92.3019 23.4671 92.3019 23.2119V21.8192C92.9382 21.9968 93.6085 22.1438 94.3155 22.2575C95.0226 22.3713 95.6419 22.4295 96.1736 22.4295C97.0673 22.4295 97.7319 22.2686 98.1674 21.9441C98.6001 21.6195 98.8179 21.1895 98.8179 20.6569C98.8179 20.3378 98.7274 20.0604 98.5464 19.8163C98.3654 19.5749 98.0996 19.3585 97.7489 19.1671C97.3982 18.9757 96.9259 18.7732 96.3292 18.5568L95.5316 18.2711C94.4428 17.8771 93.6113 17.4 93.0429 16.8396C92.4716 16.2792 92.186 15.5496 92.186 14.6452C92.186 13.8685 92.3868 13.2082 92.7884 12.6617C93.19 12.1152 93.7669 11.7019 94.5192 11.4217C95.2714 11.1415 96.1651 11.0028 97.2031 11.0028C97.6951 11.0028 98.1844 11.0305 98.6709 11.0888C99.1573 11.147 99.5759 11.2192 99.9265 11.3079C100.147 11.3579 100.317 11.4161 100.433 11.4799C100.549 11.5437 100.631 11.6297 100.676 11.7379C100.721 11.8461 100.744 11.9959 100.744 12.1873V13.5051C100.252 13.3775 99.6975 13.272 99.0809 13.1916C98.4644 13.1084 97.9242 13.0668 97.4576 13.0668C96.6403 13.0668 96.0039 13.1888 95.5514 13.4302C95.0961 13.6715 94.8699 14.046 94.8699 14.5565C94.8699 14.9643 95.0537 15.2972 95.4242 15.5579C95.7946 15.8187 96.3348 16.0767 97.0475 16.3319L97.8252 16.6371C98.6426 16.9312 99.3128 17.2474 99.8389 17.5914C100.365 17.9354 100.772 18.3543 101.063 18.8509C101.355 19.3475 101.502 19.9439 101.502 20.6458C101.502 21.4475 101.301 22.1383 100.899 22.7153C100.498 23.2951 99.9067 23.7389 99.129 24.0497C98.3513 24.3604 97.418 24.5185 96.3263 24.5185C95.7692 24.5185 95.2036 24.4824 94.6351 24.4131V24.4047Z" />
+                    <path d="M90.4523 19.672H82.6269C82.7174 20.5709 83.0681 21.2394 83.679 21.6805C84.2898 22.1216 85.0902 22.3435 86.0829 22.3435C87.0755 22.3435 88.286 22.1188 89.6293 21.6694V23.1508C89.6293 23.345 89.5841 23.5087 89.4908 23.6446C89.4003 23.7806 89.1995 23.9054 88.8969 24.0275C88.5009 24.1634 88.0088 24.2771 87.4206 24.3742C86.8323 24.4713 86.2497 24.5213 85.67 24.5213C84.5246 24.5213 83.4951 24.2993 82.5816 23.8582C81.6653 23.4171 80.9442 22.7708 80.4181 21.9163C79.8921 21.0619 79.6291 20.0604 79.6291 18.9091C79.6291 17.7579 79.8667 16.7952 80.339 15.9352C80.8113 15.0752 81.4645 14.4094 82.296 13.9378C83.1275 13.4662 84.0692 13.2304 85.1213 13.2304C86.1734 13.2304 87.0897 13.4662 87.9127 13.9378C88.7357 14.4094 89.3805 15.0614 89.8471 15.8908C90.3109 16.7203 90.5457 17.6746 90.5457 18.7538C90.5457 19.0673 90.5145 19.3752 90.4551 19.6748L90.4523 19.672ZM83.4612 15.9352C83.0115 16.3319 82.74 16.9201 82.6495 17.6968H87.6157C87.5394 16.9339 87.2679 16.3486 86.804 15.9463C86.3374 15.5413 85.7774 15.3416 85.1213 15.3416C84.4652 15.3416 83.9109 15.5413 83.4612 15.9352Z" />
+                    <path d="M104.61 13.4551C104.092 13.4551 103.832 13.7104 103.832 14.218V24.3215H106.92V13.4551H104.61Z" />
+                    <path d="M125.241 13.7464C125.781 14.0904 126.197 14.5648 126.488 15.1723C126.777 15.7771 126.924 16.4706 126.924 17.2502V24.3215H124.613C124.37 24.3215 124.178 24.2549 124.042 24.119C123.906 23.9831 123.836 23.7972 123.836 23.5586V17.6108C123.836 16.9811 123.694 16.4817 123.411 16.1072C123.128 15.7327 122.682 15.5469 122.074 15.5469C121.403 15.5469 120.889 15.7743 120.529 16.2321C120.17 16.6898 119.992 17.3279 119.992 18.1518V24.3243H116.904V17.6136C116.904 16.9839 116.762 16.4845 116.48 16.11C116.197 15.7355 115.744 15.5496 115.119 15.5496C114.449 15.5496 113.934 15.7771 113.575 16.2348C113.216 16.6926 113.038 17.3306 113.038 18.1546V24.3271H109.949V14.218C109.949 13.7104 110.201 13.4551 110.705 13.4551H112.673L112.763 15.2722C113.159 14.6286 113.674 14.1265 114.308 13.7686C114.941 13.4107 115.631 13.2304 116.378 13.2304C117.17 13.2304 117.848 13.4246 118.414 13.813C118.977 14.2014 119.398 14.734 119.673 15.4081C120.068 14.7202 120.583 14.1847 121.217 13.8019C121.85 13.4191 122.549 13.2304 123.312 13.2304C124.076 13.2304 124.704 13.4024 125.247 13.7464H125.241Z" />
+                    <path d="M80.9215 29.9475C80.5793 30.2832 80.4068 30.7742 80.4068 31.415V59.5617H86.6994V47.9185H98.5238V43.2774H86.6994V34.1726H100.311V29.4454H82.4176C81.7615 29.4454 81.2637 29.6118 80.9215 29.9475Z" />
+                    <path d="M105.218 31.415C105.218 30.7742 105.388 30.2832 105.73 29.9475C106.072 29.6118 106.57 29.4454 107.226 29.4454H111.511V54.8345H124.808V59.5617H105.218V31.415Z" />
+                    <path d="M156.537 58.3355C156.537 58.1025 156.495 57.8556 156.404 57.592V57.5893L146.141 29.4426H140.519C139.806 29.4426 139.286 29.5675 138.957 29.8144C138.629 30.0613 138.347 30.4913 138.109 31.1043L128.247 59.5589H134.362L136.279 53.7359H148.55L150.513 59.5589H154.976C155.479 59.5589 155.867 59.4479 156.136 59.2316C156.404 59.0152 156.537 58.7156 156.537 58.3355ZM137.795 49.1003L142.391 35.224L147.032 49.1003H137.795Z" />
+                    <path d="M188 41.9652V57.5476C186.453 58.2772 184.623 58.8681 182.511 59.3203C180.398 59.7725 178.181 60 175.862 60C172.261 60 169.196 59.3814 166.667 58.1385C164.139 56.8985 162.227 55.1258 160.932 52.8205C159.637 50.5151 158.992 47.7854 158.992 44.6339C158.992 41.4825 159.685 38.5557 161.068 36.206C162.451 33.8563 164.43 32.0698 167.004 30.8436C169.578 29.6174 172.621 29.0043 176.13 29.0043C177.618 29.0043 179.032 29.0931 180.37 29.2678C181.707 29.4426 182.839 29.6757 183.761 29.9669C184.504 30.2 184.994 30.4774 185.234 30.7992C185.472 31.121 185.59 31.5593 185.59 32.1114V35.3516C183.984 34.9133 182.437 34.5942 180.949 34.3889C179.462 34.1864 178.107 34.0838 176.888 34.0838C173.138 34.0838 170.285 34.966 168.319 36.7331C166.356 38.5003 165.372 41.0442 165.372 44.3732C165.372 47.8741 166.294 50.5096 168.138 52.274C169.982 54.0411 172.615 54.9233 176.037 54.9233C178.715 54.9233 180.737 54.6597 182.106 54.1354V46.6951H175.279V43.6741C175.279 43.1192 175.426 42.6976 175.726 42.4035C176.023 42.1122 176.456 41.9652 177.021 41.9652H188Z" />
+                </g>
             </g>
         );
     }
 
     return (
         <g fill={color}>
+            <LogoBackground />
             <path d="M9.33603 12H50.819C51.9502 12 53.0447 12.4078 53.8875 13.1485L65.0953 22.9663C66.0739 23.8235 66.6338 25.0497 66.6338 26.3369V58.7085C66.6338 59.9736 65.5874 61 64.2978 61H9.33603C8.04641 61 7 59.9736 7 58.7085V14.2915C7 13.0264 8.04641 12 9.33603 12ZM42.3148 32.8561L57.779 32.8867V32.8894L59.1167 25.5518L40.6038 25.5157C41.687 27.674 42.312 30.1818 42.312 32.8589L26.5735 32.8284L28.0469 25.4824L40.6038 25.5074C38.3978 21.1131 34.2631 18.1531 29.5232 18.1448L24.3307 18.1337C22.9082 18.1281 21.6893 19.1046 21.415 20.4695L14.5228 54.858L19.7266 54.8691C21.1378 54.8719 22.3511 53.8954 22.6254 52.536L25.1113 40.1688L43.9919 40.2077C42.9228 38.0549 42.3091 35.5554 42.3148 32.8867V32.8561ZM56.4498 40.2326L43.9947 40.2077C44.5575 41.3423 45.2504 42.3909 46.0507 43.3036C48.1153 45.6894 50.8868 47.2651 53.978 47.5786H55.1121L56.4498 40.2326Z" />
         </g>
     );

package/src/package-version.tsx

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '17.0.0' as string;
+export const PACKAGE_VERSION = '17.1.0' as string;

package/src/responsive-layout.css.ts

@@ -3,18 +3,16 @@ import * as mq from './media-queries.css';
 import {sprinkles} from './sprinkles.css';
 import {vars as skinVars} from './skins/skin-contract.css';
 
-export const MOBILE_SIDE_MARGIN = 16;
 export const TABLET_SIDE_MARGIN = 32;
-export const SMALL_DESKTOP_SIDE_MARGIN = 48;
 export const LARGE_DESKTOP_SIDE_MARGIN = 64;
 export const EXTRA_LARGE_DESKTOP_MAX_WIDTH = 1704;
 
 const marginValue = {
     extraLargeDesktop: `calc((100vw - ${EXTRA_LARGE_DESKTOP_MAX_WIDTH}px) / 2)`,
     largeDesktop: `${LARGE_DESKTOP_SIDE_MARGIN}px`,
-    desktop: `${SMALL_DESKTOP_SIDE_MARGIN}px`,
+    desktop: skinVars.spacing.responsiveLayoutMargin,
     tablet: `${TABLET_SIDE_MARGIN}px`,
-    mobile: `${MOBILE_SIDE_MARGIN}px`,
+    mobile: skinVars.spacing.responsiveLayoutMargin,
 };
 
 const currentMargin = createVar();

package/src/search-field.tsx

@@ -105,6 +105,7 @@ const SearchField = React.forwardRef<any, SearchFieldProps>(
             <TextFieldBaseAutosuggest
                 ref={combineRefs(inputRef, ref)}
                 startIcon={withStartIcon ? <IconSearchRegular size={iconSize.small} /> : undefined}
+                endIconSpaceReserved
                 endIcon={
                     controlledValue ? (
                         <FieldEndIcon

package/src/sheet-common.tsx

@@ -15,17 +15,17 @@ import {useDisableBodyScroll, useIsInViewport, useIsWithinIFrame, useScreenSize,
 import {useSetModalStateEffect} from './modal-context-provider';
 import {Portal} from './portal';
 import {Text2, Text3, Text5} from './text';
-import {vars as skinVars} from './skins/skin-contract.css';
 import Stack from './stack';
-import Box from './box';
+import Box, {type PadSize} from './box';
 import Divider from './divider';
 import {getPrefixedDataAttributes, getScrollableParentElement} from './utils/dom';
 import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
 import {IconButton} from './icon-button';
 import ButtonLayout from './button-layout';
 import {safeAreaInsetBottom} from './utils/css';
-import {MOBILE_SIDE_MARGIN, TABLET_SIDE_MARGIN} from './responsive-layout.css';
+import {TABLET_SIDE_MARGIN} from './responsive-layout.css';
 import * as tokens from './text-tokens';
+import {vars as skinVars} from './skins/skin-contract.css';
 
 import type {DataAttributes, RendersNullableElement} from './utils/types';
 import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
@@ -280,12 +280,6 @@ const Sheet = React.forwardRef<HTMLDivElement, SheetProps>(({onClose, children,
     );
 });
 
-const paddingX = {
-    mobile: MOBILE_SIDE_MARGIN,
-    tablet: TABLET_SIDE_MARGIN,
-    desktop: 40, // to keep consistency with the rest of the dialogs components
-} as const;
-
 type SheetBodyProps = {
     title?: string;
     subtitle?: string;
@@ -307,6 +301,14 @@ export const SheetBody = ({
     link,
     children,
 }: SheetBodyProps): JSX.Element => {
+    const {spacing} = useTheme();
+    // todo https://github.com/Telefonica/mistica-design/issues/2703 adopt tokens for sheets' dialogs (no hardcoded, not mingling sources)
+    const paddingX = {
+        mobile: spacing.responsiveLayoutMargin.mobile as PadSize,
+        tablet: TABLET_SIDE_MARGIN,
+        desktop: 40,
+    } as const;
+
     const topScrollSignalRef = React.useRef<HTMLDivElement>(null);
     const bottomScrollSignalRef = React.useRef<HTMLDivElement>(null);
     const scrollableParentRef = React.useRef<HTMLElement | null>(null);

package/src/skins/blau.tsx

@@ -51,6 +51,15 @@ export const getBlauSkin: GetKnownSkin = () => {
         colors: {
             background: palette.white,
             backgroundAlternative: palette.blauBluePrimary20,
+            backgroundSelected: applyAlpha(palette.blauBluePrimary, 0.08),
+            backgroundSelectedHover: applyAlpha(palette.blauBluePrimary, 0.12),
+            backgroundSelectedPressed: applyAlpha(palette.blauBluePrimary, 0.16),
+            backgroundSelectedBrand: applyAlpha(palette.darkModeBlack, 0.16),
+            backgroundSelectedBrandHover: applyAlpha(palette.darkModeBlack, 0.24),
+            backgroundSelectedBrandPressed: applyAlpha(palette.darkModeBlack, 0.32),
+            backgroundSelectedNegative: applyAlpha(palette.white, 0.2),
+            backgroundSelectedNegativeHover: applyAlpha(palette.white, 0.28),
+            backgroundSelectedNegativePressed: applyAlpha(palette.white, 0.35),
             backgroundBrand: palette.blauBluePrimary,
             backgroundNegative: palette.blauBlueSecondary,
             backgroundBrandSecondary: palette.blauBluePrimary,
@@ -110,6 +119,13 @@ export const getBlauSkin: GetKnownSkin = () => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.15),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.15),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.15),
+            buttonLinkNeutralBackgroundPressed: palette.grey1,
+            buttonLinkNeutralBackgroundBrand: palette.white,
+            buttonLinkNeutralBackgroundBrandPressed: palette.grey1,
+            buttonLinkNeutralBackgroundNegative: palette.white,
+            buttonLinkNeutralBackgroundNegativePressed: palette.grey1,
+            buttonLinkNeutralBackgroundMedia: palette.white,
+            buttonLinkNeutralBackgroundMediaPressed: palette.grey1,
             buttonPrimaryBackground: palette.blauBlueSecondary,
             buttonPrimaryBackgroundInverse: palette.blauBlueSecondary,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -173,6 +189,11 @@ export const getBlauSkin: GetKnownSkin = () => {
             textLinkDanger: palette.blauRed,
             textLinkDangerMedia: palette.blauRed,
             textLinkSnackbar: palette.blauPurple30,
+            textLinkNeutral: palette.grey6,
+            textLinkNeutralBrand: palette.grey6,
+            textLinkNeutralNegative: palette.grey6,
+            textLinkNeutralAlternative: palette.grey6,
+            textLinkNeutralMedia: palette.grey6,
             textActivated: palette.blauBlueSecondary,
             textBrand: palette.blauBlueSecondary,
             inputBorder: palette.grey4,
@@ -337,6 +358,15 @@ export const getBlauSkin: GetKnownSkin = () => {
         darkModeColors: {
             background: palette.darkModeBlack,
             backgroundAlternative: palette.darkModeBlack,
+            backgroundSelected: applyAlpha(palette.blauBluePrimary, 0.18),
+            backgroundSelectedHover: applyAlpha(palette.blauBluePrimary, 0.25),
+            backgroundSelectedPressed: applyAlpha(palette.blauBluePrimary, 0.33),
+            backgroundSelectedBrand: applyAlpha(palette.blauBluePrimary, 0.18),
+            backgroundSelectedBrandHover: applyAlpha(palette.blauBluePrimary, 0.25),
+            backgroundSelectedBrandPressed: applyAlpha(palette.blauBluePrimary, 0.33),
+            backgroundSelectedNegative: applyAlpha(palette.blauBluePrimary, 0.18),
+            backgroundSelectedNegativeHover: applyAlpha(palette.blauBluePrimary, 0.25),
+            backgroundSelectedNegativePressed: applyAlpha(palette.blauBluePrimary, 0.33),
             backgroundBrand: palette.darkModeBlack,
             backgroundNegative: palette.darkModeBlack,
             backgroundBrandSecondary: palette.darkModeBlack,
@@ -396,6 +426,13 @@ export const getBlauSkin: GetKnownSkin = () => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.blauPurple, 0.3),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.blauPurple, 0.3),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.15),
+            buttonLinkNeutralBackgroundPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
             buttonPrimaryBackground: palette.blauBlueSecondary,
             buttonPrimaryBackgroundInverse: palette.blauBlueSecondary,
             buttonPrimaryBackgroundNegative: palette.blauBlueSecondary,
@@ -459,6 +496,11 @@ export const getBlauSkin: GetKnownSkin = () => {
             textLinkDanger: palette.blauRed40,
             textLinkDangerMedia: palette.blauRed,
             textLinkSnackbar: palette.blauPurple30,
+            textLinkNeutral: palette.grey2,
+            textLinkNeutralBrand: palette.grey2,
+            textLinkNeutralNegative: palette.grey2,
+            textLinkNeutralAlternative: palette.grey2,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.blauBluePrimary,
             textBrand: palette.blauBluePrimary,
             inputBorder: palette.darkModeGrey5,
@@ -692,6 +734,15 @@ export const getBlauSkin: GetKnownSkin = () => {
             successFeedback: 'default',
             brandLoadingScreen: 'default',
         },
+        componentProperties: {
+            showBoxedBorder: {
+                default: true,
+                brand: true,
+                negative: true,
+                alternative: true,
+                media: true,
+            },
+        },
         spacing: {
             buttonDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
             buttonSmallPadding: {left: {mobile: 12, desktop: 12}, right: {mobile: 12, desktop: 12}},
@@ -717,6 +768,8 @@ export const getBlauSkin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 40},
                 right: {mobile: 16, desktop: 40},
             },
+            responsiveLayoutMargin: {mobile: 16, desktop: 48},
+            boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
         },
     };
     return skin;

package/src/skins/defaults.tsx

@@ -1,4 +1,10 @@
-import type {BorderRadiiConfig, SpacingConfig, TextPresetsConfig, ThemeVariantsConfig} from './types';
+import type {
+    BorderRadiiConfig,
+    ComponentPropertiesConfig,
+    SpacingConfig,
+    TextPresetsConfig,
+    ThemeVariantsConfig,
+} from './types';
 
 export const defaultTextPresetsConfig: TextPresetsConfig = {
     text1: {size: {mobile: 12, desktop: 14}, lineHeight: {mobile: 16, desktop: 20}},
@@ -75,6 +81,16 @@ export const defaultThemeVariantsConfig: ThemeVariantsConfig = {
     successFeedback: 'inverse',
 };
 
+export const defaultComponentPropertiesConfig: ComponentPropertiesConfig = {
+    showBoxedBorder: {
+        default: true,
+        alternative: true,
+        brand: true,
+        negative: true,
+        media: true,
+    },
+};
+
 export const defaultSpacing: SpacingConfig = {
     buttonDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
     buttonSmallPadding: {left: {mobile: 8, desktop: 12}, right: {mobile: 8, desktop: 12}},
@@ -100,4 +116,6 @@ export const defaultSpacing: SpacingConfig = {
         left: {mobile: 16, desktop: 24},
         right: {mobile: 16, desktop: 24},
     },
+    boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
+    responsiveLayoutMargin: {mobile: 16, desktop: 48},
 };

package/src/skins/esimflag.tsx

@@ -16,7 +16,7 @@ export const palette = {
     grass: '#99D52A',
     grass10: '#EBF7D4',
     grass70: '#6B951D',
-    grass75: '#5C8019',
+    grass75: '#567718',
     peach: '#FF9800',
     peach10: '#FFF4D5',
     peach75: '#995B00',
@@ -55,6 +55,15 @@ export const getEsimflagSkin: GetKnownSkin = () => {
         colors: {
             background: palette.white,
             backgroundAlternative: palette.grey1,
+            backgroundSelected: applyAlpha(palette.blue, 0.08),
+            backgroundSelectedHover: applyAlpha(palette.blue, 0.12),
+            backgroundSelectedPressed: applyAlpha(palette.blue, 0.16),
+            backgroundSelectedBrand: applyAlpha(palette.blue55, 0.16),
+            backgroundSelectedBrandHover: applyAlpha(palette.blue55, 0.24),
+            backgroundSelectedBrandPressed: applyAlpha(palette.blue55, 0.32),
+            backgroundSelectedNegative: applyAlpha(palette.white, 0.2),
+            backgroundSelectedNegativeHover: applyAlpha(palette.white, 0.28),
+            backgroundSelectedNegativePressed: applyAlpha(palette.white, 0.35),
             backgroundBrand: `linear-gradient(180deg, ${palette.blue55} 0%, ${palette.blue} 60%, ${palette.purple} 100%)`,
             backgroundNegative: palette.blue65,
             backgroundBrandSecondary: palette.blue,
@@ -110,6 +119,13 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundPressed: applyAlpha(palette.grey3, 0.4),
+            buttonLinkNeutralBackgroundBrand: palette.white,
+            buttonLinkNeutralBackgroundBrandPressed: palette.grey2,
+            buttonLinkNeutralBackgroundNegative: palette.white,
+            buttonLinkNeutralBackgroundNegativePressed: palette.grey2,
+            buttonLinkNeutralBackgroundMedia: palette.grey2,
+            buttonLinkNeutralBackgroundMediaPressed: palette.grey2,
             buttonPrimaryBackground: palette.blue,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -170,9 +186,14 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             textLinkNegative: palette.white,
             textLinkBrand: palette.white,
             textLinkMedia: palette.white,
-            textLinkDanger: palette.tomato55,
-            textLinkDangerMedia: palette.tomato55,
+            textLinkDanger: palette.tomato60,
+            textLinkDangerMedia: palette.tomato60,
             textLinkSnackbar: palette.blue30,
+            textLinkNeutral: palette.blue85,
+            textLinkNeutralBrand: palette.blue85,
+            textLinkNeutralNegative: palette.blue85,
+            textLinkNeutralAlternative: palette.blue85,
+            textLinkNeutralMedia: palette.blue85,
             textActivated: palette.blue,
             textBrand: palette.blue,
             inputBorder: palette.grey4,
@@ -243,7 +264,7 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             success: palette.grass,
             warning: palette.peach,
             error: palette.tomato,
-            textError: palette.tomato55,
+            textError: palette.tomato60,
             textErrorInverse: palette.white,
             textErrorNegative: palette.white,
             textErrorBrand: palette.white,
@@ -341,6 +362,15 @@ export const getEsimflagSkin: GetKnownSkin = () => {
         darkModeColors: {
             background: palette.darkModeBlack,
             backgroundAlternative: palette.darkModeBlack,
+            backgroundSelected: applyAlpha(palette.blue, 0.18),
+            backgroundSelectedHover: applyAlpha(palette.blue, 0.25),
+            backgroundSelectedPressed: applyAlpha(palette.blue, 0.33),
+            backgroundSelectedBrand: applyAlpha(palette.blue, 0.18),
+            backgroundSelectedBrandHover: applyAlpha(palette.blue, 0.25),
+            backgroundSelectedBrandPressed: applyAlpha(palette.blue, 0.33),
+            backgroundSelectedNegative: applyAlpha(palette.blue, 0.18),
+            backgroundSelectedNegativeHover: applyAlpha(palette.blue, 0.25),
+            backgroundSelectedNegativePressed: applyAlpha(palette.blue, 0.33),
             backgroundBrand: palette.darkModeBlack,
             backgroundNegative: palette.darkModeBlack,
             backgroundBrandSecondary: palette.darkModeBlack,
@@ -379,9 +409,9 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             borderSelected: palette.blue,
             coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
             coverBackgroundPressed: applyAlpha(palette.darkModeBlack, 0.35),
-            buttonDangerBackground: palette.tomato,
-            buttonDangerBackgroundPressed: palette.tomato55,
-            buttonDangerBackgroundHover: palette.tomato55,
+            buttonDangerBackground: palette.tomato55,
+            buttonDangerBackgroundPressed: palette.tomato60,
+            buttonDangerBackgroundHover: palette.tomato60,
             buttonLinkDangerBackgroundInverse: applyAlpha(palette.white, 0),
             buttonLinkDangerBackgroundNegative: applyAlpha(palette.white, 0),
             buttonLinkDangerBackgroundBrand: applyAlpha(palette.white, 0),
@@ -396,6 +426,13 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
             buttonPrimaryBackground: palette.blue,
             buttonPrimaryBackgroundInverse: palette.blue,
             buttonPrimaryBackgroundNegative: palette.blue,
@@ -457,8 +494,13 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             textLinkBrand: palette.purple30,
             textLinkMedia: palette.white,
             textLinkDanger: palette.chili,
-            textLinkDangerMedia: palette.tomato55,
+            textLinkDangerMedia: palette.tomato60,
             textLinkSnackbar: palette.blue30,
+            textLinkNeutral: palette.grey3,
+            textLinkNeutralBrand: palette.grey3,
+            textLinkNeutralNegative: palette.grey3,
+            textLinkNeutralAlternative: palette.grey3,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.blue30,
             textBrand: palette.blue30,
             inputBorder: palette.grey4,
@@ -517,7 +559,7 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             neutralLow: palette.grey6,
             neutralLowAlternative: palette.grey6,
             textPrimary: palette.grey3,
-            textPrimaryInverse: palette.grey3,
+            textPrimaryInverse: palette.grey2,
             textPrimaryNegative: palette.grey3,
             textPrimaryBrand: palette.grey3,
             textPrimaryMedia: palette.white,
@@ -696,6 +738,15 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             successFeedback: 'inverse',
             brandLoadingScreen: 'inverse',
         },
+        componentProperties: {
+            showBoxedBorder: {
+                default: true,
+                brand: true,
+                negative: true,
+                alternative: true,
+                media: true,
+            },
+        },
         spacing: {
             buttonDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
             buttonSmallPadding: {left: {mobile: 12, desktop: 12}, right: {mobile: 12, desktop: 12}},
@@ -721,6 +772,8 @@ export const getEsimflagSkin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 40},
                 right: {mobile: 16, desktop: 40},
             },
+            responsiveLayoutMargin: {mobile: 16, desktop: 48},
+            boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
         },
     };
     return skin;

package/src/skins/movistar.tsx

@@ -62,6 +62,15 @@ export const getMovistarSkin: GetKnownSkin = () => {
         colors: {
             background: palette.white,
             backgroundAlternative: palette.movistarWhite,
+            backgroundSelected: applyAlpha(palette.movistarBlue, 0.08),
+            backgroundSelectedHover: applyAlpha(palette.movistarBlue, 0.12),
+            backgroundSelectedPressed: applyAlpha(palette.movistarBlue, 0.16),
+            backgroundSelectedBrand: applyAlpha(palette.movistarBlack, 0.16),
+            backgroundSelectedBrandHover: applyAlpha(palette.movistarBlack, 0.24),
+            backgroundSelectedBrandPressed: applyAlpha(palette.movistarBlack, 0.32),
+            backgroundSelectedNegative: applyAlpha(palette.white, 0.2),
+            backgroundSelectedNegativeHover: applyAlpha(palette.white, 0.28),
+            backgroundSelectedNegativePressed: applyAlpha(palette.white, 0.35),
             backgroundBrand: palette.movistarBlue,
             backgroundNegative: palette.movistarBlack,
             backgroundBrandSecondary: palette.movistarBlack,
@@ -117,6 +126,13 @@ export const getMovistarSkin: GetKnownSkin = () => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.3),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.3),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.3),
+            buttonLinkNeutralBackgroundPressed: palette.grey100,
+            buttonLinkNeutralBackgroundBrand: palette.white,
+            buttonLinkNeutralBackgroundBrandPressed: palette.grey100,
+            buttonLinkNeutralBackgroundNegative: palette.white,
+            buttonLinkNeutralBackgroundNegativePressed: palette.grey100,
+            buttonLinkNeutralBackgroundMedia: palette.white,
+            buttonLinkNeutralBackgroundMediaPressed: palette.grey100,
             buttonPrimaryBackground: palette.movistarBlue,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -180,6 +196,11 @@ export const getMovistarSkin: GetKnownSkin = () => {
             textLinkDanger: palette.red,
             textLinkDangerMedia: palette.red,
             textLinkSnackbar: palette.blue300,
+            textLinkNeutral: palette.movistarBlack,
+            textLinkNeutralBrand: palette.movistarBlack,
+            textLinkNeutralNegative: palette.movistarBlack,
+            textLinkNeutralAlternative: palette.movistarBlack,
+            textLinkNeutralMedia: palette.movistarBlack,
             textActivated: palette.blueHigh,
             textBrand: palette.blueHigh,
             inputBorder: palette.grey500,
@@ -348,6 +369,15 @@ export const getMovistarSkin: GetKnownSkin = () => {
         darkModeColors: {
             background: palette.darkModeBlack,
             backgroundAlternative: palette.darkModeBlack,
+            backgroundSelected: applyAlpha(palette.darkModeMovistarBlue, 0.18),
+            backgroundSelectedHover: applyAlpha(palette.darkModeMovistarBlue, 0.25),
+            backgroundSelectedPressed: applyAlpha(palette.darkModeMovistarBlue, 0.33),
+            backgroundSelectedBrand: applyAlpha(palette.darkModeMovistarBlue, 0.18),
+            backgroundSelectedBrandHover: applyAlpha(palette.darkModeMovistarBlue, 0.25),
+            backgroundSelectedBrandPressed: applyAlpha(palette.darkModeMovistarBlue, 0.33),
+            backgroundSelectedNegative: applyAlpha(palette.darkModeMovistarBlue, 0.18),
+            backgroundSelectedNegativeHover: applyAlpha(palette.darkModeMovistarBlue, 0.25),
+            backgroundSelectedNegativePressed: applyAlpha(palette.darkModeMovistarBlue, 0.33),
             backgroundBrand: palette.darkModeBlack,
             backgroundNegative: palette.darkModeBlack,
             backgroundBrandSecondary: palette.darkModeBlack,
@@ -403,6 +433,13 @@ export const getMovistarSkin: GetKnownSkin = () => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.2),
+            buttonLinkNeutralBackgroundPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
             buttonPrimaryBackground: palette.movistarBlue,
             buttonPrimaryBackgroundInverse: palette.movistarBlue,
             buttonPrimaryBackgroundNegative: palette.movistarBlue,
@@ -466,6 +503,11 @@ export const getMovistarSkin: GetKnownSkin = () => {
             textLinkDanger: palette.red350,
             textLinkDangerMedia: palette.red,
             textLinkSnackbar: palette.darkModeMovistarBlue,
+            textLinkNeutral: palette.movistarWhite,
+            textLinkNeutralBrand: palette.movistarWhite,
+            textLinkNeutralNegative: palette.movistarWhite,
+            textLinkNeutralAlternative: palette.movistarWhite,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.blue300,
             textBrand: palette.blue300,
             inputBorder: palette.grey400,
@@ -703,6 +745,15 @@ export const getMovistarSkin: GetKnownSkin = () => {
             successFeedback: 'inverse',
             brandLoadingScreen: 'default',
         },
+        componentProperties: {
+            showBoxedBorder: {
+                default: true,
+                brand: true,
+                negative: true,
+                alternative: true,
+                media: true,
+            },
+        },
         spacing: {
             buttonDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
             buttonSmallPadding: {left: {mobile: 8, desktop: 12}, right: {mobile: 8, desktop: 12}},
@@ -728,6 +779,8 @@ export const getMovistarSkin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 24},
                 right: {mobile: 16, desktop: 24},
             },
+            boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
+            responsiveLayoutMargin: {mobile: 16, desktop: 48},
         },
     };
     return skin;