@telefonica/mistica 16.60.0 → 16.61.0

package/src/logo-common.tsx

@@ -0,0 +1,29 @@
+import * as styles from './logo.css';
+
+import type {NonDeprecatedVariant} from './theme-variant-context';
+import type {ByBreakpoint} from './utils/types';
+
+export type LogoType = 'isotype' | 'imagotype' | 'vertical';
+
+export type LogoImageProps = {
+    type: LogoType;
+    isDarkMode: boolean;
+    themeVariant: NonDeprecatedVariant;
+    color?: string;
+};
+
+export const calcInlineVars = (size: ByBreakpoint<number>): Record<string, string> => {
+    if (typeof size === 'number') {
+        return {
+            [styles.vars.size]: `${size}px`,
+        };
+    }
+    const vars = {
+        [styles.vars.sizeMobile]: `${size.mobile}px`,
+        [styles.vars.sizeDesktop]: `${size.desktop}px`,
+    };
+    if (size.tablet) {
+        vars[styles.vars.sizeTablet] = `${size.tablet}px`;
+    }
+    return vars;
+};

package/src/logo-esimflag-shell.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as styles from './logo.css';
+import {calcInlineVars} from './logo-common';
+import {applyCssVars} from './utils/css';
+
+import type {LogoType} from './logo-common';
+import type {ByBreakpoint} from './utils/types';
+
+type Props = {
+    size: ByBreakpoint<number>;
+    type: LogoType;
+    children: React.ReactNode;
+};
+
+const EsimflagLogoShell = ({size, type, children}: Props): JSX.Element => {
+    const viewBox = type === 'imagotype' ? '0 0 195 72' : '0 0 72 72';
+
+    return (
+        <svg
+            className={styles.svg}
+            style={applyCssVars(calcInlineVars(size))}
+            viewBox={viewBox}
+            role="presentation"
+        >
+            {children}
+        </svg>
+    );
+};
+
+export default EsimflagLogoShell;

package/src/logo-esimflag.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import {getEsimflagSkin} from './skins/esimflag';
+
+import type {LogoImageProps} from './logo-common';
+
+const EsimflagLogoImage = ({
+    type,
+    isDarkMode,
+    themeVariant,
+    color: colorProp,
+}: LogoImageProps): JSX.Element => {
+    const {colors} = getEsimflagSkin();
+    const color =
+        colorProp ||
+        (isDarkMode
+            ? colors.inverse
+            : {
+                  default: colors.backgroundBrand,
+                  alternative: colors.backgroundBrand,
+                  brand: colors.neutralHighBrand,
+                  media: colors.neutralHighBrand,
+                  negative: colors.neutralHighNegative,
+              }[themeVariant]);
+
+    if (type === 'vertical') {
+        return (
+            <g fill={color}>
+                <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>
+        );
+    }
+
+    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" />
+            </g>
+        );
+    }
+
+    return (
+        <g fill={color}>
+            <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>
+    );
+};
+
+export default EsimflagLogoImage;

package/src/logo-movistar-new-shell.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as styles from './logo.css';
+import {calcInlineVars} from './logo-common';
+import {applyCssVars} from './utils/css';
+
+import type {LogoType} from './logo-common';
+import type {ByBreakpoint} from './utils/types';
+
+type Props = {
+    size: ByBreakpoint<number>;
+    type: LogoType;
+    children: React.ReactNode;
+};
+
+const MovistarNewLogoShell = ({size, type, children}: Props): JSX.Element => {
+    const viewBox = type === 'imagotype' ? '0 0 203 72' : '0 0 72 72';
+
+    return (
+        <svg
+            className={styles.svg}
+            style={applyCssVars(calcInlineVars(size))}
+            viewBox={viewBox}
+            role="presentation"
+        >
+            {children}
+        </svg>
+    );
+};
+
+export default MovistarNewLogoShell;

package/src/logo-movistar-new.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import {getMovistarNewSkin} from './skins/movistar-new';
+
+import type {LogoImageProps} from './logo-common';
+
+const MovistarNewLogoImage = ({
+    type,
+    isDarkMode,
+    themeVariant,
+    color: colorProp,
+}: LogoImageProps): JSX.Element => {
+    const {colors, darkModeColors} = getMovistarNewSkin();
+    const color =
+        colorProp ||
+        (isDarkMode
+            ? colors.brand
+            : {
+                  default: colors.brand,
+                  alternative: colors.brand,
+                  brand: colors.neutralHighBrand,
+                  media: colors.neutralHighBrand,
+                  negative: colors.neutralHighNegative,
+              }[themeVariant]);
+    const wordmarkColor =
+        colorProp ||
+        (isDarkMode
+            ? darkModeColors?.neutralHigh
+            : {
+                  default: colors.neutralHigh,
+                  alternative: colors.neutralHigh,
+                  brand: colors.neutralHighBrand,
+                  media: colors.neutralHighBrand,
+                  negative: colors.neutralHighNegative,
+              }[themeVariant]);
+
+    if (type === 'vertical') {
+        return (
+            <>
+                <g fill={wordmarkColor}>
+                    <path d="M15.4265 52.355C15.0744 52.1167 14.6442 51.9982 14.1345 51.9982C13.6248 51.9982 13.1424 52.1238 12.7358 52.3739C12.3292 52.624 12.0139 52.9737 11.7887 53.4218C11.7627 53.4739 11.7378 53.5284 11.7152 53.5818C11.6714 53.4455 11.6216 53.3127 11.5576 53.1883C11.3632 52.8137 11.0894 52.5221 10.735 52.3123C10.3806 52.1025 9.97402 51.9982 9.51056 51.9982C9.02102 51.9982 8.58364 52.112 8.19604 52.3408C7.80844 52.5695 7.50145 52.8777 7.27624 53.2641C7.22527 53.3506 7.18023 53.4407 7.13993 53.5308V52.2116H5.26831V59.698H7.13993V56.0295C7.13993 55.5423 7.21223 55.1132 7.35684 54.7422C7.50145 54.3712 7.70058 54.0855 7.95424 53.884C8.2079 53.6825 8.49237 53.5818 8.80885 53.5818C9.05895 53.5818 9.26994 53.6458 9.44181 53.7738C9.61368 53.9018 9.74288 54.082 9.82941 54.3143C9.91594 54.5466 9.95861 54.8193 9.95861 55.1322V59.6992H11.8302V56.0058C11.8302 55.5352 11.9002 55.1191 12.0412 54.7576C12.1823 54.3961 12.3767 54.1175 12.6279 53.9208C12.878 53.724 13.1637 53.6256 13.4849 53.6256C13.7279 53.6256 13.9342 53.6885 14.1048 53.8141C14.2755 53.9397 14.4035 54.1164 14.4889 54.3416C14.5742 54.568 14.6181 54.8311 14.6181 55.1322V59.6992H16.4897V54.9947C16.4897 54.3688 16.4008 53.8319 16.2218 53.3838C16.0428 52.9358 15.7773 52.592 15.4253 52.355H15.4265Z" />
+                    <path d="M23.789 52.4925C23.2023 52.163 22.5255 51.9982 21.7586 51.9982C20.9917 51.9982 20.3136 52.163 19.7257 52.4925C19.1378 52.822 18.6827 53.2855 18.3591 53.884C18.0367 54.4826 17.8743 55.1725 17.8743 55.956C17.8743 56.7395 18.0355 57.4305 18.3591 58.0291C18.6815 58.6277 19.1366 59.0911 19.7257 59.4207C20.3136 59.7502 20.9917 59.9149 21.7586 59.9149C22.5255 59.9149 23.2023 59.7502 23.789 59.4207C24.3757 59.0911 24.8297 58.6277 25.1521 58.0291C25.4745 57.4305 25.6369 56.7407 25.6369 55.956C25.6369 55.1713 25.4757 54.4814 25.1521 53.884C24.8297 53.2855 24.3745 52.822 23.789 52.4925ZM23.4476 57.1828C23.2864 57.536 23.06 57.8098 22.7673 58.0054C22.4757 58.1998 22.139 58.297 21.7574 58.297C21.3757 58.297 21.0367 58.1998 20.7439 58.0054C20.4511 57.811 20.2248 57.5372 20.0635 57.1828C19.9023 56.8284 19.8229 56.4206 19.8229 55.956C19.8229 55.4913 19.9035 55.08 20.0635 54.7268C20.2236 54.3736 20.4511 54.0998 20.7439 53.9054C21.0367 53.7122 21.3745 53.615 21.7574 53.615C22.1402 53.615 22.4769 53.7122 22.7684 53.9054C23.0588 54.0998 23.2852 54.3724 23.4476 54.7268C23.6088 55.08 23.6894 55.4901 23.6894 55.956C23.6894 56.4218 23.6088 56.8296 23.4476 57.1828Z" />
+                    <path d="M29.8674 57.9485L28.0847 52.2128H26.0957L28.733 59.6992H30.997L33.6391 52.2128H31.688L29.8674 57.9485Z" />
+                    <path d="M36.6995 52.2128H34.8279V59.6992H36.6995V52.2128Z" />
+                    <path d="M36.3557 48.8737C36.1802 48.773 35.9847 48.7232 35.7701 48.7232C35.5556 48.7232 35.36 48.773 35.1846 48.8737C35.0091 48.9745 34.8705 49.112 34.7709 49.2874C34.6713 49.4628 34.6204 49.6584 34.6204 49.8729C34.6204 50.0875 34.6701 50.2831 34.7709 50.4585C34.8716 50.6339 35.0091 50.7726 35.1846 50.8733C35.36 50.9753 35.5556 51.0251 35.7701 51.0251C35.9847 51.0251 36.1802 50.9741 36.3557 50.8733C36.5311 50.7726 36.6698 50.6339 36.7717 50.4585C36.8736 50.2831 36.9234 50.0875 36.9234 49.8729C36.9234 49.6584 36.8725 49.4628 36.7717 49.2874C36.6698 49.112 36.5323 48.9733 36.3557 48.8737Z" />
+                    <path d="M43.5588 55.5744C43.1534 55.4475 42.6366 55.3302 42.0096 55.2223C41.5983 55.1488 41.2795 55.0824 41.0531 55.0244C40.8255 54.9651 40.6382 54.8809 40.4877 54.7695C40.3383 54.6593 40.2625 54.5111 40.2625 54.3262C40.2625 54.1686 40.3158 54.0251 40.4237 53.8983C40.5303 53.7715 40.6844 53.6707 40.8847 53.5984C41.0851 53.5261 41.3174 53.4894 41.5817 53.4894C41.9183 53.4894 42.1945 53.538 42.4102 53.6352C42.626 53.7324 42.7824 53.8675 42.8773 54.0394C42.9721 54.2112 43.0112 54.4104 42.9946 54.6344H44.8058C44.839 54.1259 44.7358 53.6719 44.4952 53.2737C44.2546 52.8754 43.8872 52.5625 43.3905 52.3361C42.8939 52.1097 42.2929 51.9971 41.5865 51.9971C40.9559 51.9971 40.3952 52.0919 39.9057 52.2804C39.4161 52.4688 39.0309 52.7462 38.7524 53.1125C38.4738 53.4787 38.3339 53.9197 38.3339 54.4353C38.3339 54.9509 38.4809 55.3634 38.7749 55.6633C39.0688 55.9631 39.4173 56.1789 39.8227 56.3104C40.2281 56.4432 40.7437 56.5677 41.3707 56.6862C41.7797 56.7656 42.0985 56.8379 42.3261 56.9007C42.5537 56.9635 42.7433 57.0513 42.8939 57.1627C43.0444 57.2741 43.1191 57.4211 43.1191 57.6048C43.1191 57.766 43.0586 57.9094 42.9365 58.0339C42.8156 58.1583 42.6461 58.2555 42.428 58.3255C42.2111 58.3954 41.961 58.4298 41.6777 58.4298C41.3233 58.4298 41.0246 58.3836 40.7804 58.2899C40.5363 58.1963 40.3537 58.0635 40.2304 57.8916C40.1072 57.7198 40.0455 57.5171 40.0432 57.2836H38.2344C38.2344 57.8193 38.3719 58.2852 38.6469 58.6799C38.9219 59.0746 39.3178 59.3792 39.8346 59.5926C40.3514 59.8059 40.9642 59.9114 41.673 59.9114C42.3332 59.9114 42.9187 59.8142 43.4272 59.621C43.9357 59.4278 44.3328 59.1469 44.6173 58.7806C44.9018 58.4144 45.044 57.9782 45.044 57.4744C45.044 56.9387 44.897 56.5191 44.6031 56.2168C44.3091 55.9145 43.9595 55.7 43.5541 55.5732L43.5588 55.5744Z" />
+                    <path d="M49.0041 50.1965H47.1325V52.2128H45.6746V53.8272H47.1325V57.2835C47.1325 57.8738 47.2226 58.3646 47.4028 58.7533C47.5829 59.1433 47.8555 59.4337 48.2182 59.6257C48.5821 59.8177 49.0385 59.9138 49.5897 59.9138C49.8789 59.9138 50.1408 59.8901 50.3743 59.8415C50.6078 59.7929 50.8129 59.7206 50.9895 59.6245V57.9924C50.8532 58.0694 50.7288 58.1287 50.6161 58.1737C50.5035 58.2176 50.3945 58.2496 50.2878 58.2685C50.1811 58.2875 50.0685 58.297 49.9512 58.297C49.7283 58.297 49.5482 58.2614 49.4095 58.1915C49.2708 58.1204 49.1689 58.0113 49.1025 57.862C49.0361 57.7126 49.0029 57.5182 49.0029 57.2764V53.8272H51.1495V52.2128H49.0029V50.1965H49.0041Z" />
+                    <path d="M57.511 52.3917C57.0013 52.1298 56.3838 51.9982 55.6607 51.9982C55.0017 51.9982 54.4351 52.1144 53.961 52.3467C53.4869 52.579 53.1301 52.8943 52.8918 53.2949C52.6536 53.6956 52.5457 54.1424 52.5683 54.6367H54.5074C54.4861 54.4554 54.5169 54.2859 54.5999 54.1258C54.6829 53.967 54.8156 53.839 54.9993 53.743C55.1819 53.647 55.4083 53.5984 55.6785 53.5984C56.0235 53.5984 56.3079 53.6636 56.532 53.7928C56.756 53.922 56.9243 54.1175 57.0333 54.3795C57.1436 54.6403 57.1981 54.9698 57.1981 55.3681V55.4356C56.9895 55.3894 56.769 55.3515 56.5367 55.3206C56.2001 55.278 55.8658 55.2555 55.5339 55.2555C54.8334 55.2555 54.2241 55.3526 53.7073 55.5459C53.1905 55.7402 52.7911 56.0188 52.5114 56.3827C52.2316 56.7466 52.0906 57.1792 52.0906 57.6806C52.0906 58.1121 52.1949 58.4961 52.4047 58.8339C52.6145 59.1717 52.9144 59.4361 53.3055 59.6269C53.6967 59.8177 54.1554 59.9137 54.6829 59.9137C55.368 59.9137 55.9571 59.749 56.4478 59.4195C56.8283 59.1646 57.1388 58.8221 57.3795 58.3942V59.6992H59.0685V55.3716C59.0685 54.6545 58.9358 54.0441 58.6715 53.5403C58.4071 53.0365 58.0195 52.6525 57.5098 52.3905L57.511 52.3917ZM57.0997 57.2148C56.8958 57.6083 56.6173 57.9141 56.2653 58.1334C55.912 58.3527 55.5197 58.4617 55.0871 58.4617C54.8571 58.4617 54.6603 58.4297 54.4944 58.3645C54.3285 58.2993 54.2016 58.2045 54.1127 58.0777C54.0238 57.9509 53.9788 57.798 53.9788 57.6166C53.9788 57.4021 54.0404 57.2171 54.1649 57.0619C54.2893 56.9066 54.479 56.7869 54.7362 56.7027C54.9934 56.6186 55.3134 56.5771 55.6987 56.5771C55.9654 56.5771 56.2392 56.5984 56.5213 56.6399C56.7844 56.679 57.0322 56.7359 57.268 56.8094C57.223 56.9505 57.1673 57.0879 57.0997 57.2171V57.2148Z" />
+                    <path d="M66.4864 53.0662C66.3216 52.7284 66.0881 52.4664 65.7847 52.2791C65.4824 52.0918 65.1304 51.9982 64.7286 51.9982C64.2497 51.9982 63.8289 52.1333 63.4674 52.4048C63.1248 52.662 62.8558 53.0199 62.6602 53.4751V52.2127H60.7886V59.6992H62.6602V56.0188C62.6602 55.5447 62.7159 55.1274 62.8285 54.7659C62.9411 54.4044 63.0964 54.1258 63.2967 53.9303C63.4958 53.7335 63.7246 53.6363 63.983 53.6363C64.1489 53.6363 64.2936 53.6766 64.4168 53.7572C64.5401 53.8378 64.6349 53.9528 64.7025 54.0998C64.7701 54.2467 64.8032 54.4198 64.8032 54.6166C64.8032 54.7695 64.7831 54.9259 64.7416 55.086C64.7013 55.246 64.6385 55.4084 64.5531 55.5755H66.4745C66.5291 55.438 66.5765 55.2946 66.6144 55.1476C66.6523 55.0006 66.682 54.8501 66.7021 54.696C66.7223 54.5419 66.7318 54.3878 66.7318 54.2325C66.7318 53.7928 66.65 53.4052 66.4852 53.0674L66.4864 53.0662Z" />
+                </g>
+                <g fill={color}>
+                    <path d="M53.1955 16.012C52.1974 13.7042 50.5925 12.2249 48.5348 12.0945C46.2578 11.9499 43.6442 13.4612 42.2728 16.3925C41.0092 19.095 39.9982 21.8687 39.3842 23.2851C38.7619 24.7217 37.848 25.606 36.4422 25.7541C34.7235 25.9355 33.243 24.6874 32.1585 22.9094C31.2126 21.359 29.3386 18.4064 28.337 17.4142C27.3947 16.4826 26.3196 15.3162 24.0794 15.3518C22.3085 15.3802 19.0418 16.2526 17.5483 22.3487C16.8975 25.005 16.6462 27.7727 17.2033 31.0691C17.7166 34.1083 18.6257 36.7325 19.2385 38.1774C19.4495 38.6753 19.7767 39.1956 20.0303 39.5145C20.7581 40.4343 21.9683 40.375 22.4768 40.1249C23.0315 39.8523 23.6692 39.1921 23.4381 37.6879C23.3267 36.9613 23.0055 35.8969 22.8241 35.3054C22.2682 33.4907 21.5297 31.3014 21.4646 29.7415C21.378 27.6554 22.2006 27.3828 22.7471 27.2619C23.6657 27.0592 24.4361 28.0679 25.1675 29.3326C26.0399 30.8415 27.5369 33.5144 28.7578 35.5567C29.8602 37.3999 31.893 39.3734 35.1597 39.2383C38.4893 39.1008 40.9441 37.8301 42.2076 33.8309C43.1535 30.8391 43.7983 28.6025 44.8366 26.3136C46.0302 23.681 47.6221 22.2717 48.9615 22.7019C50.2061 23.1014 50.5167 24.3175 50.5321 26.1062C50.5451 27.6874 50.3626 29.431 50.2203 30.7123C50.1682 31.177 50.0757 32.1122 50.1137 32.6313C50.1883 33.6519 50.6305 34.6713 51.7802 34.8348C53.0047 35.0091 53.9873 34.03 54.3796 32.8483C54.5349 32.3824 54.6665 31.6689 54.7376 31.1627C55.0979 28.6072 55.1904 26.8885 55.028 24.2737C54.8383 21.2156 54.2398 18.4277 53.1955 16.0144V16.012Z" />
+                </g>
+            </>
+        );
+    }
+
+    if (type === 'imagotype') {
+        return (
+            <>
+                <g fill={color}>
+                    <path d="M63.9212 19.7664C62.3276 16.0836 59.7678 13.7229 56.4846 13.5152C52.8498 13.2842 48.6804 15.6958 46.4925 20.3736C44.4761 24.6854 42.8621 29.1134 41.8844 31.3724C40.8922 33.6634 39.4336 35.0755 37.1905 35.3123C34.4477 35.6014 32.0856 33.6097 30.3553 30.7724C28.8459 28.2984 25.8562 23.5871 24.2567 22.0036C22.7531 20.5175 21.0374 18.655 17.4621 18.7131C14.6365 18.7582 9.42259 20.1514 7.04007 29.879C6.00281 34.1181 5.60185 38.536 6.48948 43.7935C7.30883 48.6442 8.76014 52.8311 9.73784 55.1381C10.0749 55.9327 10.5964 56.7622 11.0003 57.2722C12.161 58.7394 14.0932 58.645 14.9053 58.2455C15.79 57.8097 16.8069 56.7579 16.4394 54.3565C16.2622 53.1957 15.7479 51.4989 15.4588 50.5546C14.5726 47.6593 13.393 44.1654 13.2898 41.6768C13.1518 38.3486 14.4651 37.9127 15.3368 37.721C16.8026 37.3985 18.0316 39.0081 19.1996 41.026C20.5928 43.4332 22.9812 47.6999 24.9293 50.9585C26.6871 53.9003 29.9326 57.0499 35.1451 56.8334C40.4578 56.614 44.3744 54.586 46.3923 48.2041C47.9017 43.4288 48.9317 39.8609 50.5864 36.2072C52.491 32.0058 55.0304 29.757 57.1688 30.4427C59.1547 31.0804 59.6501 33.0213 59.6748 35.8745C59.6966 38.398 59.4046 41.1814 59.1765 43.2255C59.0937 43.9678 58.9455 45.4598 59.0066 46.2879C59.1271 47.9164 59.8317 49.5435 61.6651 49.8035C63.6191 50.081 65.1866 48.5193 65.8127 46.6322C66.0597 45.8884 66.2703 44.7494 66.3837 43.9417C66.9575 39.8638 67.1071 37.1224 66.8485 32.9487C66.5449 28.0689 65.5904 23.6191 63.9241 19.7678L63.9212 19.7664Z" />
+                </g>
+                <g fill={wordmarkColor}>
+                    <path d="M103.59 29.4897C102.955 29.0611 102.178 28.8461 101.26 28.8461C100.342 28.8461 99.4699 29.0713 98.7363 29.5231C98.0027 29.9749 97.4332 30.6054 97.0279 31.4146C96.9799 31.509 96.9363 31.6064 96.8942 31.7037C96.8157 31.4582 96.7257 31.2185 96.6095 30.9933C96.2579 30.3178 95.764 29.7904 95.1262 29.4127C94.4884 29.035 93.7519 28.8461 92.918 28.8461C92.0362 28.8461 91.2444 29.0524 90.5457 29.465C89.8454 29.8776 89.2934 30.4325 88.8866 31.1313C88.7951 31.2882 88.7137 31.4495 88.6411 31.6136V29.234H85.2649V42.7417H88.6411V36.123C88.6411 35.2441 88.7718 34.4697 89.0333 33.8C89.2948 33.1303 89.6537 32.6146 90.1113 32.2514C90.5689 31.8882 91.0832 31.7066 91.6527 31.7066C92.103 31.7066 92.4836 31.8214 92.7945 32.0538C93.1054 32.2848 93.3379 32.6102 93.4948 33.0286C93.6502 33.447 93.7286 33.9395 93.7286 34.5032V42.7432H97.1048V36.0794C97.1048 35.2295 97.2312 34.4799 97.4855 33.8276C97.7397 33.1768 98.0913 32.6727 98.5431 32.3168C98.9949 31.9608 99.5106 31.7836 100.09 31.7836C100.528 31.7836 100.901 31.8969 101.209 32.1235C101.517 32.3502 101.748 32.6683 101.902 33.0766C102.057 33.4848 102.134 33.9598 102.134 34.5046V42.7446H105.51V34.2576C105.51 33.1289 105.349 32.1599 105.027 31.3521C104.704 30.5429 104.225 29.9241 103.59 29.4955V29.4897Z" />
+                    <path d="M118.677 29.7381C117.619 29.1439 116.398 28.8461 115.015 28.8461C113.632 28.8461 112.408 29.1425 111.348 29.7381C110.287 30.3323 109.465 31.1691 108.883 32.2485C108.3 33.3279 108.01 34.5743 108.01 35.9879C108.01 37.4014 108.3 38.6479 108.883 39.7273C109.465 40.8067 110.286 41.6434 111.348 42.2376C112.408 42.8318 113.632 43.1296 115.015 43.1296C116.398 43.1296 117.619 42.8318 118.677 42.2376C119.735 41.6434 120.556 40.8067 121.138 39.7273C121.721 38.6479 122.011 37.4014 122.011 35.9879C122.011 34.5743 121.721 33.3279 121.138 32.2485C120.556 31.1691 119.736 30.3323 118.677 29.7381ZM118.063 38.2004C117.772 38.8382 117.362 39.3321 116.835 39.6837C116.308 40.0352 115.702 40.211 115.013 40.211C114.325 40.211 113.713 40.0352 113.186 39.6837C112.657 39.3321 112.249 38.8382 111.958 38.2004C111.669 37.5627 111.524 36.8247 111.524 35.9879C111.524 35.1511 111.669 34.4087 111.958 33.771C112.247 33.1332 112.657 32.6393 113.186 32.2892C113.714 31.939 114.323 31.7647 115.013 31.7647C115.703 31.7647 116.312 31.939 116.836 32.2892C117.361 32.6393 117.769 33.1332 118.061 33.771C118.352 34.4087 118.498 35.1482 118.498 35.9879C118.498 36.8276 118.353 37.5627 118.061 38.2004H118.063Z" />
+                    <path d="M129.644 39.5819L126.427 29.2339H122.839L127.598 42.7402H131.682L136.45 29.2339H132.93L129.644 39.5819Z" />
+                    <path d="M141.97 29.2339H138.594V42.7417H141.97V29.2339Z" />
+                    <path d="M141.351 23.208C141.035 23.0264 140.683 22.9349 140.295 22.9349C139.907 22.9349 139.556 23.0264 139.239 23.208C138.922 23.3896 138.674 23.638 138.492 23.9547C138.311 24.2714 138.219 24.623 138.219 25.0109C138.219 25.3987 138.311 25.7503 138.492 26.067C138.674 26.3837 138.922 26.6336 139.239 26.8166C139.556 26.9997 139.907 27.0912 140.295 27.0912C140.683 27.0912 141.035 26.9997 141.351 26.8166C141.668 26.6336 141.918 26.3837 142.101 26.067C142.284 25.7503 142.376 25.3987 142.376 25.0109C142.376 24.623 142.284 24.2714 142.101 23.9547C141.918 23.638 141.668 23.3896 141.351 23.208Z" />
+                    <path d="M154.348 35.2977C153.616 35.0697 152.683 34.8576 151.552 34.6629C150.811 34.5307 150.235 34.4116 149.824 34.3055C149.415 34.1995 149.075 34.0455 148.804 33.8464C148.534 33.646 148.399 33.3801 148.399 33.0474C148.399 32.7627 148.496 32.5055 148.69 32.2746C148.883 32.045 149.16 31.8649 149.522 31.7341C149.884 31.6034 150.304 31.538 150.78 31.538C151.386 31.538 151.884 31.6252 152.275 31.801C152.664 31.9767 152.946 32.2194 153.116 32.5302C153.288 32.8411 153.357 33.1985 153.328 33.6038H156.597C156.657 32.6857 156.471 31.8663 156.036 31.1472C155.602 30.4281 154.938 29.8644 154.043 29.4562C153.148 29.048 152.063 28.8446 150.787 28.8446C149.65 28.8446 148.639 29.0146 147.755 29.356C146.872 29.6974 146.178 30.1971 145.675 30.8581C145.172 31.5191 144.921 32.3138 144.921 33.245C144.921 34.1762 145.186 34.92 145.716 35.4604C146.246 36.0009 146.875 36.3902 147.607 36.6285C148.338 36.8667 149.269 37.0933 150.401 37.3054C151.139 37.4493 151.714 37.5786 152.125 37.6933C152.537 37.8066 152.878 37.965 153.15 38.1655C153.421 38.366 153.556 38.6318 153.556 38.963C153.556 39.2536 153.447 39.5122 153.228 39.7374C153.009 39.9625 152.704 40.1383 152.311 40.2647C151.919 40.3911 151.469 40.4536 150.959 40.4536C150.32 40.4536 149.781 40.3693 149.34 40.2008C148.9 40.0323 148.569 39.7926 148.348 39.4831C148.126 39.1722 148.014 38.8076 148.011 38.3863H144.747C144.747 39.3524 144.995 40.1921 145.492 40.9054C145.989 41.6187 146.704 42.1664 147.635 42.5513C148.568 42.9349 149.673 43.1281 150.952 43.1281C152.143 43.1281 153.199 42.9538 154.117 42.6036C155.035 42.2535 155.751 41.748 156.264 41.087C156.777 40.426 157.034 39.64 157.034 38.7306C157.034 37.7645 156.77 37.0076 156.24 36.4614C155.709 35.9152 155.079 35.5287 154.347 35.2992L154.348 35.2977Z" />
+                    <path d="M164.172 25.5948H160.795V29.2325H158.166V32.1453H160.795V38.3805C160.795 39.4469 160.958 40.3301 161.284 41.0318C161.609 41.7349 162.1 42.2594 162.755 42.6051C163.412 42.9524 164.236 43.1252 165.229 43.1252C165.752 43.1252 166.223 43.0816 166.646 42.9945C167.067 42.9073 167.437 42.7766 167.756 42.6022V39.6575C167.51 39.7955 167.285 39.9045 167.083 39.9844C166.881 40.0643 166.684 40.1209 166.49 40.1558C166.299 40.1907 166.095 40.2081 165.883 40.2081C165.481 40.2081 165.155 40.1442 164.905 40.0163C164.655 39.8885 164.471 39.6909 164.352 39.4222C164.231 39.1534 164.172 38.8018 164.172 38.366V32.1439H168.043V29.2311H164.172V25.5934V25.5948Z" />
+                    <path d="M179.521 29.5551C178.602 29.0829 177.489 28.8461 176.183 28.8461C174.995 28.8461 173.972 29.0553 173.116 29.4737C172.261 29.8921 171.617 30.463 171.187 31.1851C170.757 31.9071 170.562 32.7134 170.604 33.6054H174.103C174.063 33.2785 174.119 32.972 174.27 32.6843C174.419 32.3981 174.66 32.1671 174.99 31.9928C175.32 31.8185 175.728 31.7313 176.215 31.7313C176.837 31.7313 177.35 31.849 177.755 32.0829C178.16 32.3168 178.462 32.6698 178.66 33.1405C178.857 33.6112 178.958 34.2068 178.958 34.923V35.0436C178.581 34.9608 178.185 34.891 177.765 34.8373C177.159 34.7588 176.555 34.7211 175.955 34.7211C174.691 34.7211 173.593 34.8954 172.659 35.2455C171.726 35.5956 171.005 36.0983 170.5 36.7564C169.994 37.4145 169.741 38.1946 169.741 39.0982C169.741 39.8754 169.93 40.5684 170.308 41.1786C170.686 41.7873 171.228 42.2652 171.934 42.611C172.638 42.9567 173.468 43.1296 174.419 43.1296C175.656 43.1296 176.718 42.8318 177.605 42.2376C178.292 41.7771 178.852 41.1582 179.288 40.3868V42.7417H182.335V34.9346C182.335 33.6402 182.097 32.539 181.619 31.6296C181.141 30.7202 180.444 30.0287 179.523 29.5565L179.521 29.5551ZM177.273 39.9147C176.636 40.3098 175.927 40.5074 175.147 40.5074C174.733 40.5074 174.376 40.4493 174.078 40.3316C173.779 40.2139 173.549 40.0425 173.389 39.813C173.228 39.5849 173.148 39.3074 173.148 38.9805C173.148 38.5941 173.26 38.26 173.484 37.9796C173.707 37.6992 174.052 37.4828 174.515 37.3317C174.979 37.1806 175.557 37.105 176.251 37.105C176.732 37.105 177.226 37.1428 177.735 37.2169C178.21 37.2866 178.657 37.3912 179.081 37.522C179 37.7777 178.9 38.0232 178.779 38.2585C178.411 38.9689 177.909 39.521 177.273 39.9147Z" />
+                    <path d="M195.715 30.7739C195.417 30.1652 194.996 29.6902 194.45 29.3531C193.904 29.0147 193.269 28.8461 192.545 28.8461C191.681 28.8461 190.923 29.0902 190.269 29.5798C189.65 30.0432 189.165 30.6882 188.812 31.5119V29.234H185.436V42.7417H188.812V36.1012C188.812 35.2455 188.913 34.493 189.115 33.8407C189.319 33.1899 189.599 32.6858 189.959 32.3327C190.32 31.9783 190.732 31.801 191.197 31.801C191.498 31.801 191.758 31.8737 191.98 32.0189C192.202 32.1642 192.374 32.3705 192.496 32.6378C192.618 32.9051 192.678 33.216 192.678 33.569C192.678 33.8451 192.641 34.1269 192.567 34.416C192.493 34.7036 192.38 34.9985 192.227 35.2978H195.693C195.792 35.0494 195.877 34.7908 195.946 34.5249C196.015 34.2591 196.068 33.9874 196.103 33.71C196.139 33.4325 196.157 33.1535 196.157 32.8746C196.157 32.0829 196.009 31.3812 195.711 30.7725L195.715 30.7739Z" />
+                </g>
+            </>
+        );
+    }
+
+    return (
+        <g fill={color}>
+            <path d="M17.2797 17.2124C14.4995 17.2572 9.36782 18.6502 7.02384 28.3781C6.00256 32.6168 5.60793 37.0347 6.4823 42.2938C7.28828 47.1441 8.71635 51.3303 9.67886 53.6376C10.0107 54.4324 10.5244 55.2617 10.9215 55.7719C12.0639 57.239 13.9651 57.1453 14.764 56.7453C15.6348 56.3098 16.6358 55.2581 16.2736 52.8561C16.0983 51.6958 15.5933 49.9981 15.3091 49.0545C14.4367 46.1588 13.2756 42.6649 13.1743 40.176C13.039 36.8468 14.3308 36.4108 15.1885 36.2193C16.6312 35.8965 17.8405 37.5063 18.9894 39.5237C20.3607 41.9314 22.7108 46.1974 24.6277 49.456C26.3582 52.3975 29.5517 55.5469 34.6804 55.3307C39.9089 55.1109 43.763 53.0837 45.7483 46.7014C47.2341 41.9267 48.2468 38.3588 49.8765 34.7048C51.7503 30.5031 54.2498 28.254 56.3547 28.9408C58.3091 29.5781 58.7969 31.5193 58.8202 34.3728C58.841 36.8968 58.5538 39.6792 58.3304 41.7234C58.2493 42.4652 58.1024 43.9576 58.1622 44.7859C58.2802 46.4146 58.9742 48.0414 60.7792 48.3018C62.7017 48.5788 64.2443 47.0174 64.8603 45.1302C65.1034 44.3864 65.3106 43.2482 65.4226 42.4405C65.9874 38.3618 66.1338 35.6206 65.8795 31.4473C65.5811 26.5676 64.6414 22.1178 63.0021 18.2667C61.4337 14.5839 58.9145 12.2236 55.6835 12.0151C52.107 11.7845 48.0026 14.1958 45.8496 18.8741C43.8648 23.1865 42.2772 27.6136 41.3141 29.873C40.3374 32.1643 38.9018 33.5764 36.6946 33.8127C33.996 34.101 31.6708 32.1103 29.9676 29.2718C28.4828 26.7977 25.5401 22.0869 23.9656 20.5039C22.4864 19.0167 20.7969 17.1558 17.2797 17.2124Z" />
+        </g>
+    );
+};
+
+export default MovistarNewLogoImage;

package/src/logo-movistar-shell.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as styles from './logo.css';
+import {calcInlineVars} from './logo-common';
+import {applyCssVars} from './utils/css';
+
+import type {LogoType} from './logo-common';
+import type {ByBreakpoint} from './utils/types';
+
+type Props = {
+    size: ByBreakpoint<number>;
+    type: LogoType;
+    children: React.ReactNode;
+};
+
+const MovistarLogoShell = ({size, type, children}: Props): JSX.Element => {
+    const viewBox = type === 'imagotype' ? '0 0 195 72' : '0 0 72 72';
+
+    return (
+        <svg
+            className={styles.svg}
+            style={applyCssVars(calcInlineVars(size))}
+            viewBox={viewBox}
+            role="presentation"
+        >
+            {children}
+        </svg>
+    );
+};
+
+export default MovistarLogoShell;

package/src/logo-movistar.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import {getMovistarSkin} from './skins/movistar';
+
+import type {LogoImageProps} from './logo-common';
+
+const MovistarLogoImage = ({
+    type,
+    isDarkMode,
+    themeVariant,
+    color: colorProp,
+}: LogoImageProps): JSX.Element => {
+    const {colors} = getMovistarSkin();
+    const color =
+        colorProp ||
+        (isDarkMode
+            ? colors.brand
+            : {
+                  default: colors.brand,
+                  alternative: colors.brand,
+                  brand: colors.neutralHighBrand,
+                  media: colors.neutralHighBrand,
+                  negative: colors.neutralHighNegative,
+              }[themeVariant]);
+    if (type === 'vertical') {
+        return (
+            <g fill={color}>
+                <path d="M22.1005 12.8312C20.077 12.8698 16.3384 13.8526 14.6232 20.8289C13.8716 23.8738 13.5825 27.0343 14.2378 30.8115C14.8159 34.2804 15.8566 37.2867 16.5696 38.9441C16.8201 39.5222 17.1863 40.1004 17.4754 40.4665C18.304 41.5265 19.6916 41.4494 20.2697 41.1603C20.9057 40.852 21.638 40.1004 21.3682 38.366C21.2333 37.5373 20.8672 36.3232 20.6744 35.6487C20.0385 33.5674 19.1905 31.0621 19.1134 29.2891C19.0171 26.8994 19.9614 26.5911 20.5781 26.4562C21.638 26.2249 22.5052 27.3812 23.3532 28.8266C24.3553 30.561 26.0705 33.6059 27.458 35.9377C28.7107 38.0383 31.0425 40.3124 34.7812 40.1582C38.5969 40.004 41.3913 38.5394 42.8367 33.9721C43.9159 30.5417 44.6482 27.9979 45.843 25.377C47.2113 22.3706 49.0228 20.7518 50.5645 21.2529C51.9906 21.7154 52.3375 23.1029 52.3568 25.1457C52.376 26.9572 52.1641 28.9422 51.9906 30.4068C51.9328 30.9464 51.8172 32.0064 51.875 32.6038C51.9521 33.7793 52.4724 34.9356 53.7829 35.1283C55.1897 35.3211 56.3074 34.2033 56.7507 32.8543C56.9241 32.3147 57.0783 31.5053 57.1554 30.9272C57.5601 27.9979 57.6757 26.0322 57.483 23.0451C57.271 19.557 56.5772 16.3579 55.3824 13.6021C54.2454 10.9619 52.4146 9.266 50.0442 9.11183C47.4425 8.93839 44.4555 10.6728 42.8752 14.0261C41.4298 17.1095 40.2736 20.2893 39.5798 21.9081C38.8667 23.5462 37.8261 24.5676 36.2073 24.741C34.2416 24.953 32.5457 23.5269 31.3123 21.4841C30.2331 19.7112 28.094 16.3386 26.9377 15.2016C25.897 14.1224 24.6636 12.7927 22.1005 12.8312Z" />
+                <path d="M17.3019 51.9718V62.494H15.8758C15.5482 62.494 15.3748 62.3013 15.3748 61.9737V55.0167L12.5419 59.6611H11.3085C10.9809 59.6611 10.8267 59.5455 10.6725 59.2949L8.01307 55.1516V62.494H6.06665V52.5692C6.06665 52.1838 6.25937 51.9718 6.68334 51.9718H8.24433L11.771 57.6183L14.8737 52.415C15.0664 52.0681 15.2592 51.9718 15.6639 51.9718H17.3019Z" />
+                <path d="M18.8244 58.7938C18.8244 56.5198 20.3468 54.9395 22.6594 54.9395C24.972 54.9395 26.4944 56.5198 26.4944 58.7938C26.4944 61.0679 24.9527 62.6481 22.6594 62.6481C20.3468 62.6481 18.8244 61.0679 18.8244 58.7938ZM24.3938 58.7938C24.3938 57.4063 23.7579 56.5391 22.6594 56.5391C21.5609 56.5391 20.925 57.387 20.925 58.7938C20.925 60.1621 21.5609 61.0486 22.6594 61.0486C23.7579 61.0486 24.3938 60.1814 24.3938 58.7938Z" />
+                <path d="M35.1473 55.0938L31.9868 62.4748H30.5414C30.2331 62.4748 30.0597 62.3591 29.9633 62.0701L27.246 55.6719C27.1111 55.325 27.246 55.0745 27.6315 55.0745H29.231L31.1196 60.2007L33.0082 55.0745H35.1473V55.0938Z" />
+                <path d="M35.9567 52.5499C35.9567 51.8754 36.5156 51.3358 37.1901 51.3358C37.8453 51.3358 38.4042 51.8754 38.4042 52.5499C38.4042 53.2629 37.8453 53.7832 37.1901 53.7832C36.4963 53.7832 35.9567 53.2629 35.9567 52.5499ZM36.1302 55.614C36.1302 55.2671 36.3229 55.0937 36.6505 55.0937H38.1922V62.494H36.1302V55.614Z" />
+                <path d="M40.3699 62.3976C39.9459 62.282 39.8688 62.0892 39.8688 61.8194V60.7788C40.6204 60.9715 41.5455 61.1449 42.3741 61.1449C43.4148 61.1449 43.8195 60.7981 43.8195 60.3548C43.8195 59.873 43.3763 59.7381 42.6825 59.5647L41.9502 59.372C40.5819 59.0443 39.7147 58.3891 39.7147 57.1365C39.7147 55.6526 40.8902 54.9395 42.9523 54.9395C43.6846 54.9395 44.4362 55.0552 44.8602 55.1901C45.2649 55.3057 45.3227 55.4599 45.3227 55.7682V56.7318C44.5904 56.5391 43.6846 56.4427 42.9716 56.4427C42.0465 56.4427 41.6611 56.674 41.6611 57.0787C41.6611 57.4834 42.1814 57.6761 42.8367 57.8495L43.6653 58.0615C44.706 58.312 45.7852 58.6975 45.7852 60.2585C45.7852 61.858 44.5711 62.6674 42.432 62.6674C41.6804 62.6481 40.8324 62.5518 40.3699 62.3976Z" />
+                <path d="M47.6353 60.2778V56.5584H46.1128V55.6141C46.1128 55.2672 46.3055 55.0938 46.6331 55.0938H47.6353V52.9546C47.6353 52.627 47.828 52.4343 48.1556 52.4343H49.6973V55.0938H51.663V56.5584H49.6973V59.9117C49.6973 60.6825 49.9671 61.0679 50.8536 61.0679C51.2583 61.0679 51.7015 60.9909 52.0677 60.9138V61.9159C52.0677 62.1471 52.0099 62.3013 51.6437 62.4555C51.3547 62.5711 50.8343 62.6482 50.2947 62.6482C48.6952 62.6482 47.6353 61.8195 47.6353 60.2778Z" />
+                <path d="M60.7977 61.0294V61.993C60.7977 62.1857 60.7977 62.3977 60.4315 62.5133C60.2388 62.5711 59.9497 62.6289 59.6414 62.6289C58.6393 62.6289 58.0997 62.1664 57.8491 61.4148C57.3095 62.1857 56.4231 62.6482 55.4017 62.6482C53.8792 62.6482 52.8771 61.6075 52.8771 60.2778C52.8771 58.7168 54.2454 57.9267 56.9048 57.9267C57.1746 57.9267 57.4637 57.946 57.695 57.9652C57.695 56.9631 57.2325 56.5584 55.922 56.5584C55.1897 56.5584 54.2261 56.674 53.5131 56.8668V55.8646C53.5131 55.537 53.5902 55.3829 53.9563 55.2672C54.4766 55.0938 55.3631 54.9782 56.2303 54.9782C58.9476 54.9782 59.757 56.1923 59.757 57.7532V60.3742C59.757 60.9138 59.8727 61.145 60.3544 61.145C60.4893 61.0872 60.7013 61.0679 60.7977 61.0294ZM57.6564 59.6611V59.1215H57.271C55.6715 59.1215 54.8621 59.3721 54.8621 60.2007C54.8621 60.7596 55.2668 61.2221 56.0184 61.2221C56.9434 61.2221 57.6564 60.5862 57.6564 59.6611Z" />
+                <path d="M66.7333 55.4213V56.8474H66.0203C64.7098 56.8474 64.016 57.3677 64.016 58.8709V62.5132H61.954V55.6333C61.954 55.2864 62.1467 55.1129 62.455 55.1129H63.8426L63.8811 56.6739C64.2858 55.5562 65.1916 54.9588 66.2323 54.9588C66.5599 54.9395 66.7333 55.0937 66.7333 55.4213Z" />
+            </g>
+        );
+    }
+
+    if (type === 'imagotype') {
+        return (
+            <g fill={color}>
+                <path d="M17.9412 17.6705C15.0439 17.7257 9.69094 19.1342 7.23519 29.1317C6.15907 33.4952 5.74518 38.0245 6.68333 43.4375C7.51111 48.4086 9.00112 52.7169 10.022 55.092C10.3808 55.9205 10.905 56.7491 11.3189 57.2738C12.5054 58.7927 14.4921 58.6823 15.3198 58.268C16.2304 57.8261 17.2789 56.7491 16.8926 54.2635C16.6995 53.0759 16.1752 51.3361 15.8993 50.3694C14.9887 47.3868 13.7747 43.7965 13.6643 41.2557C13.5263 37.8312 14.8784 37.3893 15.7613 37.196C17.2789 36.8646 18.5206 38.5216 19.7347 40.5929C21.1695 43.0785 23.6253 47.442 25.6119 50.7837C27.4055 53.794 30.7442 57.0528 36.0972 56.8319C41.5605 56.611 45.5615 54.5121 47.6309 47.9667C49.1761 43.0509 50.2246 39.4054 51.9354 35.6494C53.8944 31.3411 56.4882 29.0212 58.6956 29.7393C60.7374 30.4021 61.2341 32.3906 61.2617 35.318C61.2893 37.914 60.9858 40.7586 60.7374 42.8575C60.6547 43.6308 60.4891 45.1498 60.5719 46.0059C60.6823 47.6906 61.4273 49.3476 63.3036 49.6238C65.3178 49.9 66.9182 48.2982 67.5528 46.3649C67.8012 45.5916 68.0219 44.4317 68.1323 43.6032C68.7117 39.4054 68.8773 36.5884 68.6014 32.3077C68.2978 27.309 67.3045 22.7245 65.5938 18.7752C63.9658 14.9916 61.3445 12.5613 57.9506 12.3404C54.2256 12.0918 49.9487 14.5774 47.6861 19.3828C45.6166 23.8016 43.9611 28.3584 42.9677 30.6783C41.9468 33.0258 40.4568 34.4895 38.139 34.738C35.3246 35.0418 32.8964 32.9981 31.1305 30.0707C29.5853 27.5299 26.5225 22.6969 24.8669 21.0674C23.3493 19.5209 21.611 17.6153 17.9412 17.6705Z" />
+                <path d="M107.038 44.5422H104.527C103.948 44.5422 103.644 44.2384 103.644 43.6308V31.3687L98.6498 39.5434H96.47C96.1941 39.5434 95.9733 39.4882 95.8078 39.4054C95.6422 39.2949 95.5042 39.1292 95.3663 38.9082L90.7031 31.5896V44.5422H87.2816V27.0328C87.2816 26.3423 87.6403 25.9833 88.3577 25.9833H91.117L97.353 35.9532L102.816 26.7842C102.982 26.4804 103.175 26.2595 103.368 26.1766C103.561 26.0662 103.837 26.0109 104.196 26.0109H107.038V44.5422Z" />
+                <path d="M112.943 43.9623C111.922 43.3823 111.149 42.5814 110.57 41.5595C109.99 40.5377 109.714 39.3502 109.714 38.0245C109.714 36.6989 109.99 35.5113 110.57 34.4895C111.149 33.4677 111.922 32.6668 112.943 32.0868C113.964 31.5068 115.15 31.2307 116.502 31.2307C117.854 31.2307 119.041 31.5068 120.062 32.0868C121.083 32.6668 121.855 33.4677 122.435 34.4895C123.014 35.5113 123.29 36.6989 123.29 38.0245C123.29 39.3502 123.014 40.5377 122.435 41.5595C121.855 42.5814 121.083 43.3823 120.062 43.9623C119.041 44.5422 117.854 44.8184 116.53 44.8184C115.15 44.8184 113.964 44.5422 112.943 43.9623ZM118.71 40.9243C119.262 40.2063 119.51 39.2397 119.51 38.0245C119.51 36.7817 119.234 35.8151 118.71 35.0971C118.185 34.4067 117.44 34.0476 116.447 34.0476C115.481 34.0476 114.736 34.4067 114.185 35.0971C113.66 35.7875 113.384 36.7817 113.384 38.0245C113.384 39.2397 113.66 40.2063 114.185 40.9243C114.736 41.6424 115.481 42.0014 116.42 42.0014C117.44 42.0014 118.185 41.6424 118.71 40.9243Z" />
+                <path d="M134.686 31.5068H138.466L132.92 44.5422H130.381C130.106 44.5422 129.885 44.487 129.747 44.3765C129.581 44.266 129.471 44.1003 129.36 43.8242L124.587 32.5563C124.532 32.3906 124.504 32.2525 124.504 32.1144C124.504 31.9211 124.559 31.7554 124.697 31.6449C124.835 31.5344 125.001 31.4792 125.277 31.4792H128.091L131.402 40.5101L134.686 31.5068Z" />
+                <path d="M140.977 28.8831C140.646 28.6898 140.398 28.4413 140.204 28.1099C140.011 27.7785 139.901 27.4194 139.901 27.0052C139.901 26.6185 140.011 26.2595 140.204 25.9281C140.398 25.5967 140.674 25.3481 140.977 25.1548C141.308 24.9615 141.667 24.8786 142.053 24.8786C142.439 24.8786 142.798 24.9615 143.129 25.1548C143.46 25.3481 143.736 25.5967 143.902 25.9281C144.095 26.2595 144.178 26.6185 144.178 27.0052C144.178 27.3918 144.095 27.7785 143.902 28.1099C143.709 28.4413 143.46 28.7174 143.129 28.8831C142.798 29.0765 142.439 29.1593 142.053 29.1593C141.667 29.1593 141.281 29.0765 140.977 28.8831ZM140.204 32.4182C140.204 31.8106 140.508 31.5068 141.115 31.5068H143.847V44.5698H140.204V32.4182Z" />
+                <path d="M149.282 44.7079C148.62 44.6251 148.068 44.5146 147.654 44.3765C147.296 44.2661 147.047 44.128 146.937 43.9899C146.827 43.8242 146.771 43.6308 146.771 43.3547V41.5319C147.489 41.7253 148.234 41.891 149.007 42.0014C149.779 42.1119 150.496 42.1671 151.186 42.1671C152.042 42.1671 152.676 42.029 153.09 41.7805C153.504 41.5319 153.725 41.1729 153.725 40.7586C153.725 40.4825 153.642 40.2615 153.504 40.1234C153.339 39.9577 153.145 39.8197 152.869 39.7368C152.594 39.6263 152.235 39.5159 151.738 39.4054L150.441 39.0464C149.172 38.7426 148.206 38.2731 147.516 37.6379C146.827 37.0027 146.496 36.1742 146.496 35.0971C146.496 33.7991 146.992 32.8325 147.958 32.1973C148.924 31.5621 150.359 31.2307 152.207 31.2307C152.842 31.2307 153.449 31.2583 154.056 31.3411C154.663 31.424 155.16 31.5344 155.574 31.6449C155.905 31.7278 156.125 31.8382 156.236 32.0039C156.346 32.1696 156.374 32.363 156.374 32.6668V34.379C155.739 34.2133 155.022 34.1029 154.304 33.9924C153.559 33.9095 152.869 33.8543 152.235 33.8543C150.717 33.8543 149.945 34.2133 149.945 34.959C149.945 35.2904 150.11 35.5666 150.469 35.7599C150.828 35.9532 151.324 36.1465 152.014 36.3122L153.477 36.6989C154.222 36.8922 154.856 37.0855 155.38 37.3341C155.905 37.5827 156.346 37.9693 156.677 38.494C157.008 39.0188 157.202 39.6816 157.202 40.5653C157.202 41.9738 156.705 43.0233 155.684 43.7413C154.663 44.4594 153.201 44.8184 151.297 44.8184C150.634 44.8184 149.972 44.7908 149.282 44.7079Z" />
+                <path d="M162.665 44.3489C161.975 44.0175 161.423 43.548 161.037 42.9128C160.651 42.2776 160.457 41.5319 160.457 40.6482V34.1028H157.781V32.4182C157.781 31.8106 158.084 31.5068 158.692 31.5068H160.457V27.7232C160.457 27.4194 160.54 27.1985 160.706 27.0328C160.871 26.8671 161.092 26.8119 161.368 26.8119H164.1V31.5068H167.576V34.1028H164.1V40.013C164.1 40.7034 164.238 41.2281 164.569 41.5595C164.872 41.8909 165.397 42.0566 166.142 42.0566C166.721 42.0566 167.438 41.9738 168.266 41.7805V43.548C168.266 43.7689 168.211 43.9346 168.128 44.1003C168.018 44.2384 167.825 44.3765 167.521 44.5146C167.273 44.6251 166.914 44.7079 166.5 44.7631C166.059 44.8184 165.617 44.846 165.148 44.846C164.182 44.8184 163.382 44.6527 162.665 44.3489Z" />
+                <path d="M183.249 42.0566C183.387 42.029 183.525 42.0014 183.635 41.9738V43.6861C183.635 43.907 183.608 44.1003 183.525 44.2384C183.442 44.4041 183.277 44.5146 183.001 44.5974C182.587 44.7355 182.118 44.7908 181.593 44.7908C179.965 44.7908 178.917 44.0727 178.448 42.6642C177.979 43.3547 177.372 43.8794 176.627 44.266C175.882 44.6527 175.054 44.846 174.143 44.846C173.288 44.846 172.515 44.6527 171.826 44.2936C171.136 43.9346 170.612 43.4099 170.253 42.7747C169.894 42.1395 169.701 41.4214 169.701 40.6482C169.701 39.2673 170.308 38.2454 171.495 37.555C172.681 36.8646 174.447 36.5056 176.792 36.5056L178.172 36.5332C178.144 35.9256 178.062 35.4561 177.868 35.1247C177.675 34.7657 177.372 34.5171 176.903 34.3514C176.434 34.1857 175.854 34.1028 175.082 34.1028C174.447 34.1028 173.73 34.1581 172.929 34.2409C172.157 34.3514 171.439 34.4619 170.805 34.6276V32.8601C170.805 32.5563 170.86 32.3353 170.97 32.1696C171.081 32.0039 171.274 31.8935 171.605 31.8106C172.074 31.6725 172.681 31.5344 173.398 31.4516C174.116 31.3411 174.861 31.3135 175.606 31.3135C177.841 31.3135 179.441 31.7554 180.407 32.6115C181.373 33.4953 181.842 34.6828 181.842 36.2018V40.8139C181.842 41.311 181.925 41.6424 182.063 41.8633C182.201 42.0843 182.476 42.1671 182.89 42.1671C182.973 42.0843 183.111 42.0566 183.249 42.0566ZM176.71 41.9738C177.151 41.7528 177.482 41.4214 177.758 40.9796C178.006 40.5653 178.144 40.0682 178.144 39.5435V38.6045H177.482C176.02 38.6045 174.944 38.7426 174.254 39.0463C173.564 39.3225 173.205 39.8196 173.205 40.5377C173.205 41.0624 173.398 41.5043 173.757 41.8357C174.116 42.1671 174.613 42.3604 175.275 42.3604C175.771 42.3052 176.268 42.1947 176.71 41.9738Z" />
+                <path d="M194.093 32.0592V34.5723H192.824C191.61 34.5723 190.727 34.8485 190.147 35.4009C189.568 35.9532 189.292 36.8646 189.292 38.135V44.5698H185.65V32.4182C185.65 31.8106 185.953 31.5068 186.533 31.5068H188.988L189.044 34.2685C189.402 33.3019 189.954 32.5563 190.671 32.0315C191.389 31.5068 192.244 31.2583 193.155 31.2583C193.789 31.2306 194.093 31.5068 194.093 32.0592Z" />
+            </g>
+        );
+    }
+
+    return (
+        <g fill={color}>
+            <path d="M17.2797 17.2124C14.4995 17.2572 9.36782 18.6502 7.02384 28.3781C6.00256 32.6168 5.60793 37.0347 6.4823 42.2938C7.28828 47.1441 8.71635 51.3303 9.67886 53.6376C10.0107 54.4324 10.5244 55.2617 10.9215 55.7719C12.0639 57.239 13.9651 57.1453 14.764 56.7453C15.6348 56.3098 16.6358 55.2581 16.2736 52.8561C16.0983 51.6958 15.5933 49.9981 15.3091 49.0545C14.4367 46.1588 13.2756 42.6649 13.1743 40.176C13.039 36.8468 14.3308 36.4108 15.1885 36.2193C16.6312 35.8965 17.8405 37.5063 18.9894 39.5237C20.3607 41.9314 22.7108 46.1974 24.6277 49.456C26.3582 52.3975 29.5517 55.5469 34.6804 55.3307C39.9089 55.1109 43.763 53.0837 45.7483 46.7014C47.2341 41.9267 48.2468 38.3588 49.8765 34.7048C51.7503 30.5031 54.2498 28.254 56.3547 28.9408C58.3091 29.5781 58.7969 31.5193 58.8202 34.3728C58.841 36.8968 58.5538 39.6792 58.3304 41.7234C58.2493 42.4652 58.1024 43.9576 58.1622 44.7859C58.2802 46.4146 58.9742 48.0414 60.7792 48.3018C62.7017 48.5788 64.2443 47.0174 64.8603 45.1302C65.1034 44.3864 65.3106 43.2482 65.4226 42.4405C65.9874 38.3618 66.1338 35.6206 65.8795 31.4473C65.5811 26.5676 64.6414 22.1178 63.0021 18.2667C61.4337 14.5839 58.9145 12.2236 55.6835 12.0151C52.107 11.7845 48.0026 14.1958 45.8496 18.8741C43.8648 23.1865 42.2772 27.6136 41.3141 29.873C40.3374 32.1643 38.9018 33.5764 36.6946 33.8127C33.996 34.101 31.6708 32.1103 29.9676 29.2718C28.4828 26.7977 25.5401 22.0869 23.9656 20.5039C22.4864 19.0167 20.7969 17.1558 17.2797 17.2124Z" />
+        </g>
+    );
+};
+
+export default MovistarLogoImage;

package/src/logo-o2-new-shell.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as styles from './logo.css';
+import {calcInlineVars} from './logo-common';
+import {applyCssVars} from './utils/css';
+
+import type {ByBreakpoint} from './utils/types';
+
+type Props = {
+    size: ByBreakpoint<number>;
+    children: React.ReactNode;
+};
+
+const O2NewLogoShell = ({size, children}: Props): JSX.Element => {
+    return (
+        <svg
+            className={styles.svg}
+            style={applyCssVars(calcInlineVars(size))}
+            viewBox="0 0 72 72"
+            role="presentation"
+        >
+            {children}
+        </svg>
+    );
+};
+
+export default O2NewLogoShell;

package/src/logo-o2-new.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import {getO2NewSkin} from './skins/o2-new';
+
+import type {LogoImageProps} from './logo-common';
+
+const O2NewLogoImage = ({isDarkMode, themeVariant, color: colorProp}: LogoImageProps): JSX.Element => {
+    const {colors} = getO2NewSkin();
+    const color =
+        colorProp ||
+        (isDarkMode
+            ? colors.brand
+            : {
+                  default: colors.brand,
+                  alternative: colors.brand,
+                  brand: colors.neutralHighBrand,
+                  media: colors.neutralHighBrand,
+                  negative: colors.neutralHighNegative,
+              }[themeVariant]);
+
+    return (
+        <g fill={color}>
+            <path d="M64.6464 48.1005C65.5273 48.3194 66.3797 48.7244 67.0163 49.3673C67.555 49.8826 67.9234 50.5497 68.1381 51.2513C68.3932 52.1193 68.4578 53.0409 68.3406 53.9362C68.2286 54.7438 67.9502 55.5225 67.5851 56.2533C66.899 57.5977 65.9414 58.7894 64.9183 59.9048C63.8168 61.0986 62.6299 62.214 61.4443 63.3281C63.8331 63.3205 66.222 63.3277 68.6108 63.3243C68.7406 63.3231 68.8729 63.3164 69 63.3499V66.1656C68.9276 66.1744 68.8561 66.1841 68.7849 66.187L56.6515 66.1866V63.1532C56.9278 62.8849 57.223 62.6362 57.5061 62.3746C58.7357 61.2826 59.9476 60.1702 61.0896 58.9906C62.1882 57.8312 63.2582 56.619 64.0232 55.2197C64.3697 54.5626 64.6602 53.8473 64.655 53.0979C64.6516 52.5621 64.4529 52.0228 64.0723 51.6312C63.578 51.1099 62.8587 50.8466 62.1481 50.7611C61.1887 50.6609 60.2199 50.855 59.327 51.1913C58.6379 51.4458 57.9983 51.8056 57.3725 52.1792C57.2747 51.1712 57.173 50.1635 57.0791 49.1551C58.6163 48.4104 60.3087 47.9609 62.0261 47.8824C62.9031 47.8313 63.7918 47.895 64.6464 48.1005ZM44.5216 15.9479C46.2174 16.5777 47.8288 17.4272 49.2842 18.4844C51.7084 20.2329 53.6818 22.5547 55.0432 25.1725C56.3106 27.5865 57.064 30.2404 57.3669 32.9308C57.5113 34.2801 57.5716 35.6404 57.4945 36.9961C57.3885 39.1497 56.97 41.2895 56.2443 43.3274C55.1022 46.5373 53.168 49.4901 50.5956 51.7934C48.1348 54.0137 45.0922 55.6109 41.841 56.4164C39.4569 57.011 36.9711 57.1964 34.5189 57.0169C32.0275 56.8353 29.5623 56.2462 27.2864 55.2382C24.6566 54.0787 22.2902 52.3616 20.3927 50.2449C18.0655 47.6619 16.445 44.5002 15.6352 41.1616C15.2392 39.5413 15.0384 37.8792 15 36.2153V35.3469C15.0353 33.9564 15.1603 32.5664 15.4189 31.1973C16.0352 27.8905 17.3992 24.692 19.5312 22.0352C21.1736 19.9734 23.2664 18.2546 25.6285 17.0201C28.6633 15.4237 32.1089 14.6354 35.5471 14.5511C38.5915 14.4593 41.6699 14.8883 44.5216 15.9479ZM35.3058 20.656C34.0556 20.7554 32.817 21.0309 31.6603 21.5068C30.4359 22.0054 29.3042 22.714 28.3199 23.5799C27.0856 24.6597 26.078 25.9726 25.3009 27.397C24.1179 29.5695 23.456 31.9948 23.2715 34.442C23.1655 35.8798 23.2284 37.3286 23.4426 38.7551C23.7215 40.5808 24.2533 42.3768 25.0885 44.0369C25.797 45.4479 26.7296 46.7608 27.8988 47.8476C29.1348 49.0096 30.6453 49.8935 32.2813 50.4072C33.7802 50.8797 35.3705 51.0542 36.9413 50.9883C38.4027 50.9208 39.8611 50.6344 41.2092 50.0734C43.2433 49.2406 44.9767 47.7906 46.2355 46.037C47.8603 43.7815 48.7769 41.0966 49.1372 38.3786C49.613 34.8311 49.0941 31.1331 47.4931 27.8998C46.776 26.4703 45.8494 25.1281 44.6828 24.0085C43.4299 22.7706 41.8862 21.8075 40.1968 21.241C38.632 20.7114 36.9543 20.5386 35.3058 20.656Z" />
+        </g>
+    );
+};
+
+export default O2NewLogoImage;

package/src/logo-o2-shell.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as styles from './logo.css';
+import {calcInlineVars} from './logo-common';
+import {applyCssVars} from './utils/css';
+
+import type {ByBreakpoint} from './utils/types';
+
+type Props = {
+    size: ByBreakpoint<number>;
+    children: React.ReactNode;
+};
+
+const O2LogoShell = ({size, children}: Props): JSX.Element => {
+    return (
+        <svg
+            className={styles.svg}
+            style={applyCssVars(calcInlineVars(size))}
+            viewBox="0 0 72 72"
+            role="presentation"
+        >
+            {children}
+        </svg>
+    );
+};
+
+export default O2LogoShell;

package/src/logo-o2.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import {getO2Skin} from './skins/o2';
+
+import type {LogoImageProps} from './logo-common';
+
+const O2LogoImage = ({isDarkMode, themeVariant, color: colorProp}: LogoImageProps): JSX.Element => {
+    const {colors} = getO2Skin();
+    const color =
+        colorProp ||
+        (isDarkMode
+            ? colors.brand
+            : {
+                  default: colors.brand,
+                  alternative: colors.brand,
+                  brand: colors.neutralHighBrand,
+                  media: colors.neutralHighBrand,
+                  negative: colors.neutralHighNegative,
+              }[themeVariant]);
+
+    return (
+        <g fill={color}>
+            <path d="M64.6464 48.1005C65.5273 48.3194 66.3797 48.7244 67.0163 49.3673C67.555 49.8826 67.9234 50.5497 68.1381 51.2513C68.3932 52.1193 68.4578 53.0409 68.3406 53.9362C68.2286 54.7438 67.9502 55.5225 67.5851 56.2533C66.899 57.5977 65.9414 58.7894 64.9183 59.9048C63.8168 61.0986 62.6299 62.214 61.4443 63.3281C63.8331 63.3205 66.222 63.3277 68.6108 63.3243C68.7406 63.3231 68.8729 63.3164 69 63.3499V66.1656C68.9276 66.1744 68.8561 66.1841 68.7849 66.187L56.6515 66.1866V63.1532C56.9278 62.8849 57.223 62.6362 57.5061 62.3746C58.7357 61.2826 59.9476 60.1702 61.0896 58.9906C62.1882 57.8312 63.2582 56.619 64.0232 55.2197C64.3697 54.5626 64.6602 53.8473 64.655 53.0979C64.6516 52.5621 64.4529 52.0228 64.0723 51.6312C63.578 51.1099 62.8587 50.8466 62.1481 50.7611C61.1887 50.6609 60.2199 50.855 59.327 51.1913C58.6379 51.4458 57.9983 51.8056 57.3725 52.1792C57.2747 51.1712 57.173 50.1635 57.0791 49.1551C58.6163 48.4104 60.3087 47.9609 62.0261 47.8824C62.9031 47.8313 63.7918 47.895 64.6464 48.1005ZM44.5216 15.9479C46.2174 16.5777 47.8288 17.4272 49.2842 18.4844C51.7084 20.2329 53.6818 22.5547 55.0432 25.1725C56.3106 27.5865 57.064 30.2404 57.3669 32.9308C57.5113 34.2801 57.5716 35.6404 57.4945 36.9961C57.3885 39.1497 56.97 41.2895 56.2443 43.3274C55.1022 46.5373 53.168 49.4901 50.5956 51.7934C48.1348 54.0137 45.0922 55.6109 41.841 56.4164C39.4569 57.011 36.9711 57.1964 34.5189 57.0169C32.0275 56.8353 29.5623 56.2462 27.2864 55.2382C24.6566 54.0787 22.2902 52.3616 20.3927 50.2449C18.0655 47.6619 16.445 44.5002 15.6352 41.1616C15.2392 39.5413 15.0384 37.8792 15 36.2153V35.3469C15.0353 33.9564 15.1603 32.5664 15.4189 31.1973C16.0352 27.8905 17.3992 24.692 19.5312 22.0352C21.1736 19.9734 23.2664 18.2546 25.6285 17.0201C28.6633 15.4237 32.1089 14.6354 35.5471 14.5511C38.5915 14.4593 41.6699 14.8883 44.5216 15.9479ZM35.3058 20.656C34.0556 20.7554 32.817 21.0309 31.6603 21.5068C30.4359 22.0054 29.3042 22.714 28.3199 23.5799C27.0856 24.6597 26.078 25.9726 25.3009 27.397C24.1179 29.5695 23.456 31.9948 23.2715 34.442C23.1655 35.8798 23.2284 37.3286 23.4426 38.7551C23.7215 40.5808 24.2533 42.3768 25.0885 44.0369C25.797 45.4479 26.7296 46.7608 27.8988 47.8476C29.1348 49.0096 30.6453 49.8935 32.2813 50.4072C33.7802 50.8797 35.3705 51.0542 36.9413 50.9883C38.4027 50.9208 39.8611 50.6344 41.2092 50.0734C43.2433 49.2406 44.9767 47.7906 46.2355 46.037C47.8603 43.7815 48.7769 41.0966 49.1372 38.3786C49.613 34.8311 49.0941 31.1331 47.4931 27.8998C46.776 26.4703 45.8494 25.1281 44.6828 24.0085C43.4299 22.7706 41.8862 21.8075 40.1968 21.241C38.632 20.7114 36.9543 20.5386 35.3058 20.656Z" />
+        </g>
+    );
+};
+
+export default O2LogoImage;

package/src/logo-telefonica-shell.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as styles from './logo.css';
+import {calcInlineVars} from './logo-common';
+import {applyCssVars} from './utils/css';
+
+import type {LogoType} from './logo-common';
+import type {ByBreakpoint} from './utils/types';
+
+type Props = {
+    size: ByBreakpoint<number>;
+    type: LogoType;
+    children: React.ReactNode;
+};
+
+const TelefonicaLogoShell = ({size, type, children}: Props): JSX.Element => {
+    const viewBox = type === 'imagotype' ? '0 0 195 72' : type === 'vertical' ? '0 0 73 72' : '0 0 72 72';
+
+    return (
+        <svg
+            className={styles.svg}
+            style={applyCssVars(calcInlineVars(size))}
+            viewBox={viewBox}
+            role="presentation"
+        >
+            {children}
+        </svg>
+    );
+};
+
+export default TelefonicaLogoShell;