@telefonica/mistica 16.58.0-beta.2 → 16.59.0-beta.1

package/src/icons/icon-error.css.ts

@@ -0,0 +1,27 @@
+import {style, keyframes} from '@vanilla-extract/css';
+
+const shake = keyframes({
+    '10%, 90%': {
+        transform: 'translate(3px, 0)',
+    },
+    '20%, 80%': {
+        transform: 'translate(6px, 0)',
+    },
+
+    '30%, 50%, 70%': {
+        transform: 'translate(0px, 0)',
+    },
+
+    '40%, 60%': {
+        transform: 'translate(8px, 0)',
+    },
+});
+
+export const outerAnimation = style({
+    animation: `${shake} 0.82s cubic-bezier(.36,.07,.19,.97) both`,
+    animationDelay: '0.84s',
+});
+export const innerAnimation = style({
+    animation: `${shake} 0.82s cubic-bezier(.36,.07,.19,.97) both`,
+    animationDelay: '0.8s',
+});

package/src/icons/icon-error.tsx

@@ -0,0 +1,207 @@
+'use client';
+import * as React from 'react';
+import {getAnimateDrawLineProps, getAnimateFadeInProps} from '../utils/animation';
+import {useTheme} from '../hooks';
+import {O2_SKIN, O2_NEW_SKIN, VIVO_NEW_SKIN} from '../skins/constants';
+import {vars} from '../skins/skin-contract.css';
+import * as styles from './icon-error.css';
+
+type Props = {
+    size?: number | string;
+};
+
+const IconErrorO2 = ({size = 48}: Props): JSX.Element => {
+    const {platformOverrides} = useTheme();
+
+    return (
+        <svg role="presentation" width={size} height={size} viewBox="0 0 64 64" overflow="visible">
+            <g
+                stroke={vars.colors.error}
+                fill={vars.colors.error}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            >
+                <g className={styles.outerAnimation}>
+                    <path
+                        strokeWidth="2"
+                        fill="none"
+                        d="M48.24,57.99c-4.71,2.95-10.27,4.65-16.24,4.65C15.08,62.64,1.36,48.92,1.36,32S15.08,1.36,32,1.36 S62.64,15.08,62.64,32c0,6.11-1.79,11.8-4.87,16.58"
+                        {...getAnimateDrawLineProps('202', '0.3s', platformOverrides)}
+                    />
+                    <circle
+                        cx="53.64"
+                        cy="53.54"
+                        r="1.06"
+                        {...getAnimateFadeInProps('0.2s', platformOverrides)}
+                    />
+                </g>
+                <g className={styles.innerAnimation}>
+                    <line
+                        strokeWidth="2"
+                        fill="none"
+                        x1="32"
+                        y1="14.86"
+                        x2="32"
+                        y2="39.08"
+                        {...getAnimateDrawLineProps('110', '0.6s', platformOverrides)}
+                    />
+                    <circle
+                        strokeWidth="0"
+                        cx="32"
+                        cy="46.25"
+                        r="1.72"
+                        {...getAnimateFadeInProps('0.8s', platformOverrides)}
+                    />
+                </g>
+            </g>
+        </svg>
+    );
+};
+
+const IconErrorO2New = ({size = 48}: Props): JSX.Element => {
+    const {platformOverrides} = useTheme();
+
+    return (
+        <svg role="presentation" width={size} height={size} viewBox="0 0 64 64" overflow="visible">
+            <g
+                stroke={vars.colors.error}
+                fill={vars.colors.error}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            >
+                <g className={styles.outerAnimation}>
+                    <circle
+                        strokeWidth="4"
+                        fill="none"
+                        cx="32"
+                        cy="32"
+                        r="30"
+                        {...getAnimateDrawLineProps('202', '0.3s', platformOverrides)}
+                    />
+                </g>
+                <g className={styles.innerAnimation}>
+                    <line
+                        strokeWidth="4"
+                        fill="none"
+                        x1="32"
+                        y1="16.5"
+                        x2="32"
+                        y2="39.08"
+                        {...getAnimateDrawLineProps('110', '0.6s', platformOverrides)}
+                    />
+                    <circle
+                        strokeWidth="0"
+                        cx="32"
+                        cy="47.5"
+                        r="3"
+                        {...getAnimateFadeInProps('0.8s', platformOverrides)}
+                    />
+                </g>
+            </g>
+        </svg>
+    );
+};
+
+const IconErrorVivo = ({size = 48}: Props): JSX.Element => {
+    const {platformOverrides} = useTheme();
+
+    return (
+        <svg role="presentation" width={size} height={size} viewBox="0 0 64 64" overflow="visible">
+            <g
+                stroke={vars.colors.error}
+                fill="none"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeMiterlimit="10"
+            >
+                <g className={styles.outerAnimation}>
+                    <path
+                        fill="none"
+                        strokeWidth="2"
+                        strokeMiterlimit="10"
+                        d="M 31.9 0.9 C 52.5 0.9 62.9 11.4 62.9 31.9 C 62.9 52.5 52.5 62.9 31.9 62.9 C 11.3 62.9 0.9 52.5 0.9 31.9 C 0.9 11.3 11.3 0.9 31.9 0.9 Z"
+                        transform="rotate(90 32 32)"
+                        {...getAnimateDrawLineProps('202', '0.3s', platformOverrides)}
+                    />
+                </g>
+                <g className={styles.innerAnimation}>
+                    <line
+                        x1="31.9"
+                        y1="20.9"
+                        x2="31.9"
+                        y2="36.9"
+                        {...getAnimateDrawLineProps('17', '0.7s', platformOverrides)}
+                    />
+                    <circle
+                        stroke={vars.colors.error}
+                        fill={vars.colors.error}
+                        strokeWidth="1"
+                        cx="31.9"
+                        cy="43.9"
+                        r="1.5"
+                        {...getAnimateFadeInProps('1s', platformOverrides)}
+                    />
+                </g>
+            </g>
+        </svg>
+    );
+};
+
+const IconErrorDefault = ({size = 48}: Props): JSX.Element => {
+    const {platformOverrides} = useTheme();
+
+    return (
+        <svg role="presentation" width={size} height={size} viewBox="0 0 64 64" overflow="visible">
+            <g
+                stroke={vars.colors.error}
+                fill="none"
+                strokeWidth="4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeMiterlimit="10"
+            >
+                <g className={styles.outerAnimation}>
+                    <circle
+                        fill="none"
+                        cx="32"
+                        cy="32"
+                        r="30"
+                        {...getAnimateDrawLineProps('202', '0.3s', platformOverrides)}
+                    />
+                </g>
+                <g className={styles.innerAnimation}>
+                    <path
+                        d="M32 17.9375V32.9375"
+                        {...getAnimateDrawLineProps('17', '0.7s', platformOverrides)}
+                    />
+                    <circle
+                        stroke={vars.colors.error}
+                        fill={vars.colors.error}
+                        cx="32"
+                        cy="45.1289"
+                        r="1.5"
+                        {...getAnimateFadeInProps('1s', platformOverrides)}
+                    />
+                </g>
+            </g>
+        </svg>
+    );
+};
+
+const IconError = (props: Props): JSX.Element => {
+    const {skinName} = useTheme();
+
+    switch (skinName) {
+        case O2_SKIN:
+            return <IconErrorO2 {...props} />;
+        case O2_NEW_SKIN:
+            return <IconErrorO2New {...props} />;
+        case VIVO_NEW_SKIN:
+            return <IconErrorVivo {...props} />;
+        default:
+            return <IconErrorDefault {...props} />;
+    }
+};
+
+export default IconError;

package/src/icons/icon-info.tsx

@@ -0,0 +1,86 @@
+'use client';
+import * as React from 'react';
+import {useTheme} from '../hooks';
+import {O2_SKIN, O2_NEW_SKIN, VIVO_NEW_SKIN} from '../skins/constants';
+import {vars} from '../skins/skin-contract.css';
+
+type Props = {
+    size?: number | string;
+};
+
+const IconInfoO2 = ({size = 48}: Props): JSX.Element => {
+    return (
+        <svg role="presentation" width={size} height={size} viewBox="0 0 64 64">
+            <g
+                stroke={vars.colors.brand}
+                fill={vars.colors.brand}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            >
+                <path
+                    fill="none"
+                    strokeWidth="2"
+                    d="M48.24,57.99c-4.71,2.95-10.27,4.65-16.24,4.65C15.08,62.64,1.36,48.92,1.36,32S15.08,1.36,32,1.36 S62.64,15.08,62.64,32c0,6.11-1.79,11.8-4.87,16.58"
+                />
+                <line fill="none" strokeWidth="2" x1="32" y1="47.96" x2="32" y2="23.74" />
+                <circle cx="53.64" cy="53.54" r="1.06" />
+                <circle strokeWidth="0" cx="32" cy="16.58" r="1.72" />
+            </g>
+        </svg>
+    );
+};
+
+const IconInfoO2New = ({size = 48}: Props): JSX.Element => {
+    return (
+        <svg role="presentation" width={size} height={size} viewBox="0 0 48 48">
+            <g fill={vars.colors.brand}>
+                <path d="M24 36.8544C23.0592 36.8544 22.2816 36.0864 22.2816 35.136V18.8544C22.2816 17.9136 23.0496 17.136 24 17.136C24.9408 17.136 25.7184 17.904 25.7184 18.8544V35.136C25.7184 36.0864 24.9408 36.8544 24 36.8544Z" />
+                <path d="M24 14.5728C25.1823 14.5728 26.1408 13.6143 26.1408 12.432C26.1408 11.2497 25.1823 10.2912 24 10.2912C22.8177 10.2912 21.8592 11.2497 21.8592 12.432C21.8592 13.6143 22.8177 14.5728 24 14.5728Z" />
+                <path d="M0 24C0 37.2 10.8 48 24 48C37.2 48 48 37.2 48 24C48 10.8 37.2 0 24 0C10.8 0 0 10.8 0 24ZM3.4272 24C3.4272 12.6816 12.6816 3.4272 24 3.4272C35.3184 3.4272 44.5728 12.6816 44.5728 24C44.5728 35.3184 35.3184 44.5728 24 44.5728C12.6816 44.5728 3.4272 35.3184 3.4272 24Z" />
+            </g>
+        </svg>
+    );
+};
+
+const IconInfoVivo = ({size = 48}: Props): JSX.Element => {
+    return (
+        <svg role="presentation" width={size} height={size} viewBox="0 0 64 64">
+            <g fill={vars.colors.brand}>
+                <path
+                    fillRule="nonzero"
+                    strokeWidth="0"
+                    d="M31.991 0c21.24 0 32.01 10.77 32.01 32.01C64 53.235 53.23 64 31.99 64 10.763 64 .001 53.236.001 32.01 0 10.77 10.762 0 31.99 0zm0 2c-20.18 0-29.99 9.816-29.99 30.01C2 52.19 11.81 62 31.99 62c20.192 0 30.01-9.81 30.01-29.99C62 11.815 52.182 2 31.99 2zM32 27a1 1 0 0 1 1 1v16a1 1 0 0 1-2 0V28a1 1 0 0 1 1-1zm0-7.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z"
+                />
+            </g>
+        </svg>
+    );
+};
+
+const IconInfoDefault = ({size = 48}: Props): JSX.Element => {
+    return (
+        <svg role="presentation" width={size} height={size} viewBox="0 0 64 64">
+            <g fill={vars.colors.brand}>
+                <path d="M32 29.1797C33.0354 29.1797 33.8867 29.9663 33.9893 30.9746L34 31.1797V45.9492C34 47.0538 33.1046 47.9492 32 47.9492C30.8954 47.9492 30 47.0538 30 45.9492V31.1797L30.0107 30.9746C30.1133 29.9663 30.9646 29.1797 32 29.1797Z" />
+                <path d="M32 15.5889C33.8127 15.5889 35.2822 17.0584 35.2822 18.8711C35.2822 20.6838 33.8127 22.1533 32 22.1533C30.1873 22.1533 28.7178 20.6838 28.7178 18.8711C28.7178 17.0584 30.1873 15.5889 32 15.5889Z" />
+                <path d="M32 0.459961C36.1418 0.459966 40.2428 1.27637 44.0693 2.86133C47.8959 4.44636 51.373 6.76948 54.3018 9.69824C57.2305 12.627 59.5536 16.1041 61.1387 19.9307C62.7236 23.7572 63.54 27.8582 63.54 32C63.54 36.1419 62.7237 40.2437 61.1387 44.0703C59.5537 47.8967 57.2304 51.3732 54.3018 54.3018C51.373 57.2305 47.8959 59.5546 44.0693 61.1396C40.2429 62.7245 36.1417 63.54 32 63.54C27.8581 63.54 23.7563 62.7247 19.9297 61.1396C16.1032 59.5546 12.6269 57.2305 9.69824 54.3018C6.76954 51.3731 4.44538 47.8968 2.86035 44.0703C1.27532 40.2437 0.459966 36.1419 0.459961 32C0.459966 27.8583 1.27549 23.7571 2.86035 19.9307C4.44538 16.1041 6.7695 12.627 9.69824 9.69824C12.6268 6.76965 16.1033 4.44635 19.9297 2.86133C23.7563 1.2763 27.8581 0.459965 32 0.459961ZM32 4.45996C28.3834 4.45996 24.8022 5.17263 21.4609 6.55664C18.1197 7.94065 15.0837 9.96907 12.5264 12.5264C9.96909 15.0837 7.94065 18.1197 6.55664 21.4609C5.17264 24.8022 4.45997 28.3834 4.45996 32C4.45997 35.6166 5.17263 39.1978 6.55664 42.5391C7.94065 45.8803 9.96906 48.9163 12.5264 51.4736C15.0837 54.0309 18.1197 56.0593 21.4609 57.4434C24.8022 58.8274 28.3834 59.54 32 59.54C35.6166 59.54 39.1978 58.8274 42.5391 57.4434C45.8803 56.0594 48.9163 54.0309 51.4736 51.4736C54.0309 48.9163 56.0594 45.8803 57.4434 42.5391C58.8274 39.1978 59.54 35.6166 59.54 32C59.54 28.3834 58.8274 24.8022 57.4434 21.4609C56.0593 18.1197 54.0309 15.0837 51.4736 12.5264C48.9163 9.96906 45.8803 7.94065 42.5391 6.55664C39.1978 5.17263 35.6166 4.45997 32 4.45996Z" />
+            </g>
+        </svg>
+    );
+};
+
+const IconInfo = (props: Props): JSX.Element => {
+    const {skinName} = useTheme();
+
+    switch (skinName) {
+        case O2_SKIN:
+            return <IconInfoO2 {...props} />;
+        case O2_NEW_SKIN:
+            return <IconInfoO2New {...props} />;
+        case VIVO_NEW_SKIN:
+            return <IconInfoVivo {...props} />;
+        default:
+            return <IconInfoDefault {...props} />;
+    }
+};
+
+export default IconInfo;

package/src/icons/icon-mastercard.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+type Props = {
+    role?: string;
+    size?: number | string;
+};
+
+const IconMastercard = ({role = 'presentation', size = 24}: Props): JSX.Element => (
+    <svg width={size} height={size} role={role} viewBox="0 0 20 20" fill="none">
+        <g clipPath="url(#clip0_10652_7684)">
+            <path
+                d="M19 -2H1C-0.656854 -2 -2 -0.656854 -2 1V19C-2 20.6569 -0.656854 22 1 22H19C20.6569 22 22 20.6569 22 19V1C22 -0.656854 20.6569 -2 19 -2Z"
+                fill="white"
+            />
+            <path
+                d="M7.057 14.614C9.57376 14.614 11.614 12.5738 11.614 10.057C11.614 7.54024 9.57376 5.5 7.057 5.5C4.54024 5.5 2.5 7.54024 2.5 10.057C2.5 12.5738 4.54024 14.614 7.057 14.614Z"
+                fill="#EA021B"
+            />
+            <path
+                d="M12.943 14.614C15.4597 14.614 17.5 12.5738 17.5 10.057C17.5 7.54024 15.4597 5.5 12.943 5.5C10.4262 5.5 8.38599 7.54024 8.38599 10.057C8.38599 12.5738 10.4262 14.614 12.943 14.614Z"
+                fill="#F79F19"
+            />
+            <path
+                d="M9.9625 6.54474C11.0058 7.38024 11.671 8.64324 11.671 10.057C11.671 11.4707 11.0058 12.7345 9.9625 13.5692C8.9185 12.7337 8.2525 11.4707 8.2525 10.057C8.2525 8.65974 8.90275 7.40949 9.9265 6.57324L9.9625 6.54474Z"
+                fill="#FF5F00"
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_10652_7684">
+                <rect width="20" height="20" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+);
+
+export default IconMastercard;

package/src/icons/icon-success-vivo-new.tsx

@@ -0,0 +1,51 @@
+'use client';
+import * as React from 'react';
+import {useTheme} from '../hooks';
+import {getAnimateCircleScaleInProps, getAnimateDrawLineProps} from '../utils/animation';
+
+type Props = {
+    size?: number | string;
+};
+
+const IconSuccessVivoNew = ({size = 48}: Props): JSX.Element => {
+    const {platformOverrides} = useTheme();
+    const gradientId = React.useId();
+
+    return (
+        <svg role="presentation" width={size} height={size} viewBox="0 0 64 64" fill="none">
+            <circle
+                cx="32"
+                cy="32"
+                r="31"
+                stroke={`url(#${gradientId})`}
+                {...getAnimateCircleScaleInProps('31', platformOverrides)}
+            />
+
+            <polyline
+                fill="none"
+                stroke="white"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                points="24,32.75 30,39 40.5,24.5"
+                {...getAnimateDrawLineProps('44', '0.4s', platformOverrides, '0.5 0 0.83 0.83')}
+            />
+
+            <defs>
+                <linearGradient
+                    id={gradientId}
+                    x1="6.66663"
+                    y1="6.66669"
+                    x2="58.3441"
+                    y2="7.98638"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop stopColor="#E5B9FF" />
+                    <stop offset="1" stopColor="#FF6ACE" />
+                </linearGradient>
+            </defs>
+        </svg>
+    );
+};
+
+export default IconSuccessVivoNew;

package/src/icons/icon-success-vivo.tsx

@@ -0,0 +1,36 @@
+'use client';
+import * as React from 'react';
+import {useTheme} from '../hooks';
+import {getAnimateSweepInProps} from '../utils/animation';
+import {useThemeVariant} from '../theme-variant-context';
+import {vars} from '../skins/skin-contract.css';
+
+type Props = {
+    size?: number | string;
+};
+
+const IconSuccessVivo = ({size = 48}: Props): JSX.Element => {
+    const themeVariant = useThemeVariant();
+    const {platformOverrides} = useTheme();
+
+    const color =
+        themeVariant === 'brand' || themeVariant === 'media'
+            ? vars.colors.neutralHighBrand
+            : themeVariant === 'negative'
+              ? vars.colors.neutralHighNegative
+              : vars.colors.brand;
+
+    return (
+        <svg role="presentation" width={size} height={size} viewBox="0 0 64 64" overflow="visible">
+            <g fill={color} stroke={color}>
+                <path
+                    fillRule="nonzero"
+                    d="M14.8832276,0 C10.2293915,0.0191737965 6.86229932,3.79747692 6.87644677,7.70928648 C6.89025737,11.6228714 9.24614399,14.2258918 11.0573539,15.1980743 C12.084728,15.7491434 11.7559683,16.7408548 11.7559683,16.7408548 C11.7559683,16.7408548 11.5093985,17.7055808 10.4274557,17.44922 C9.3458498,17.1875332 4.10725261,15.8961425 4.10725261,15.8961425 C4.10725261,15.8961425 0.947319469,15.2651826 0.18436791,18.6252129 C-0.579931024,21.9873736 1.196584,23.2652716 2.5001701,23.5816393 C3.80375621,23.8972968 8.2116962,25.0470144 8.2116962,25.0470144 C8.2116962,25.0470144 9.52370341,25.7443725 9.57490369,27.1742406 C9.60656702,28.0203732 9.60825124,28.7209269 8.78163618,29.9800062 C7.95670533,31.2394406 2.82589821,37.6825463 2.82589821,37.6825463 C2.82589821,37.6825463 1.06218326,39.9379529 3.61781834,41.9710855 C6.17345343,44.0045731 7.61110343,43.5309094 9.12824861,41.6575584 C10.6440464,39.7845626 13.6392629,35.862456 13.6392629,35.862456 C13.6392629,35.862456 14.0525704,35.0099322 14.8956908,35.0610623 C15.7388112,35.1136127 15.985381,35.5961532 16.2710247,35.9650713 C16.5580157,36.3339893 20.7318492,41.7285725 21.0164823,42.0786718 C21.297747,42.4326769 22.0782145,43.0806802 22.9364929,43.2042447 C23.7937607,43.3263889 24.7338922,43.1396219 25.3358324,42.6712841 C25.9360883,42.2022363 26.698703,41.5641749 26.9664939,41.1388007 C27.2326007,40.7134265 27.6863295,40.1034157 27.6027922,39.0996319 C27.5182443,38.0986887 27.3144537,37.574605 26.5878813,36.7149798 C25.8613089,35.8564198 21.565538,30.4178079 20.7567756,29.3742563 C20.7567756,29.3742563 20.022119,28.4461025 20.1285616,27.1341177 C20.2353412,25.8192924 20.7874284,25.2334264 21.9495401,24.9067617 C23.1099675,24.5815173 27.6499503,23.3980679 27.6499503,23.3980679 C27.6499503,23.3980679 30.2487014,22.0733006 29.6595614,19.4472006 L29.3210332,18.1046798 C29.3210332,18.1046798 28.7551353,15.0407782 25.0208833,15.989526 C21.2835996,16.9411144 19.2079671,17.5014154 19.2079671,17.5014154 C19.2079671,17.5014154 18.0185711,17.6235596 17.8477912,16.777427 C17.6797061,15.9302293 17.9003389,15.4934928 18.4258155,15.257016 C18.9516289,15.0208942 22.2685313,13.3144263 22.6939652,8.70064277 C23.121757,4.09538091 19.5505374,0 14.9128698,0 L14.8832276,0"
+                    {...getAnimateSweepInProps('0.2s', platformOverrides)}
+                />
+            </g>
+        </svg>
+    );
+};
+
+export default IconSuccessVivo;

package/src/icons/icon-success.tsx

@@ -0,0 +1,211 @@
+'use client';
+import * as React from 'react';
+import {O2_SKIN, O2_NEW_SKIN, VIVO_NEW_SKIN} from '../skins/constants';
+import {
+    getAnimateDrawLineProps,
+    getAnimateFadeInProps,
+    getAnimateHopInProps,
+    mergeProperties,
+} from '../utils/animation';
+import {useTheme} from '../hooks';
+import {vars} from '../skins/skin-contract.css';
+import {useThemeVariant} from '../theme-variant-context';
+
+type Props = {
+    size?: number | string;
+    color?: string;
+    skipAnimation?: boolean;
+};
+
+const IconSuccessO2 = ({size = 48, color, skipAnimation = false}: Props): JSX.Element => {
+    const {platformOverrides} = useTheme();
+
+    const themeVariant = useThemeVariant();
+    const defaultColor =
+        themeVariant === 'brand' || themeVariant === 'media'
+            ? vars.colors.neutralHighBrand
+            : themeVariant === 'negative'
+              ? vars.colors.neutralHighNegative
+              : vars.colors.brand;
+
+    return (
+        <svg role="presentation" width={size} height={size} viewBox="0 0 64 64">
+            <g
+                stroke={color ? undefined : defaultColor}
+                fill={color ? undefined : defaultColor}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            >
+                <path
+                    fill="none"
+                    strokeWidth="2"
+                    stroke={color ? color : undefined}
+                    d="M48.24,57.99c-4.71,2.95-10.27,4.65-16.24,4.65C15.08,62.64,1.36,48.92,1.36,32S15.08,1.36,32,1.36 S62.64,15.08,62.64,32c0,6.11-1.79,11.8-4.87,16.58"
+                    {...(!skipAnimation && getAnimateDrawLineProps('202', '0.3s', platformOverrides))}
+                />
+                <polyline
+                    fill="none"
+                    strokeWidth="2"
+                    stroke={color ? color : undefined}
+                    points="16.92,30.08 28.68,43.12 50.26,20.22"
+                    {...(!skipAnimation &&
+                        mergeProperties(
+                            getAnimateDrawLineProps('50', '0.6s', platformOverrides),
+                            getAnimateHopInProps('0.6', platformOverrides)
+                        ))}
+                />
+                <circle
+                    stroke={color ? color : undefined}
+                    cx="53.64"
+                    cy="53.54"
+                    r="1.06"
+                    {...(!skipAnimation && getAnimateFadeInProps('0.2s', platformOverrides))}
+                />
+            </g>
+        </svg>
+    );
+};
+
+const IconSuccessO2New = ({size = 48, color, skipAnimation = false}: Props): JSX.Element => {
+    const {platformOverrides} = useTheme();
+
+    const themeVariant = useThemeVariant();
+    const defaultColor =
+        themeVariant === 'brand' || themeVariant === 'media'
+            ? vars.colors.neutralHighBrand
+            : themeVariant === 'negative'
+              ? vars.colors.neutralHighNegative
+              : vars.colors.brand;
+
+    return (
+        <svg role="presentation" width={size} height={size} viewBox="0 0 64 64">
+            <g
+                stroke={color ? undefined : defaultColor}
+                fill={color ? undefined : defaultColor}
+                strokeLinecap="round"
+                strokeWidth="4"
+            >
+                <circle
+                    stroke={color ? color : undefined}
+                    fill="none"
+                    cx="32"
+                    cy="32"
+                    r="30"
+                    {...(!skipAnimation && getAnimateDrawLineProps('202', '0.3s', platformOverrides))}
+                />
+                <polyline
+                    fill="none"
+                    stroke={color ? color : undefined}
+                    points="18,32.67 27.33,42 49.33,20.67"
+                    {...(!skipAnimation &&
+                        mergeProperties(
+                            getAnimateDrawLineProps('50', '0.6s', platformOverrides),
+                            getAnimateHopInProps('0.6', platformOverrides)
+                        ))}
+                />
+            </g>
+        </svg>
+    );
+};
+
+const IconSuccessVivo = ({size = 48, color, skipAnimation = false}: Props): JSX.Element => {
+    const {platformOverrides} = useTheme();
+
+    const themeVariant = useThemeVariant();
+    const defaultColor =
+        themeVariant === 'brand' || themeVariant === 'media'
+            ? vars.colors.neutralHighBrand
+            : themeVariant === 'negative'
+              ? vars.colors.neutralHighNegative
+              : vars.colors.brand;
+
+    return (
+        <svg role="presentation" width={size} height={size} viewBox="0 0 64 64">
+            <g stroke={color ? undefined : defaultColor}>
+                <path
+                    vectorEffect="non-scaling-stroke"
+                    fill="none"
+                    stroke={color ? color : undefined}
+                    strokeWidth="2"
+                    strokeMiterlimit="10"
+                    d="M61.4,32c0,19.5-10,29.4-29.4,29.4C12.5,61.4,2.6,51.5,2.6,32S12.5,2.6,32,2.6S61.4,12.5,61.4,32z"
+                    transform="rotate(90 32 32)"
+                    {...(!skipAnimation && getAnimateDrawLineProps('202', '0.2s', platformOverrides))}
+                />
+                <polyline
+                    vectorEffect="non-scaling-stroke"
+                    fill="none"
+                    stroke={color ? color : undefined}
+                    strokeWidth="2"
+                    strokeMiterlimit="10"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    points="20,34.9 27.4,44.3 45.6,21"
+                    {...(!skipAnimation &&
+                        mergeProperties(
+                            getAnimateDrawLineProps('44', '0.6s', platformOverrides),
+                            getAnimateHopInProps('0.6s', platformOverrides)
+                        ))}
+                />
+            </g>
+        </svg>
+    );
+};
+
+const IconSuccessDefault = ({size = 48, color, skipAnimation = false}: Props): JSX.Element => {
+    const {platformOverrides} = useTheme();
+
+    const themeVariant = useThemeVariant();
+    const defaultColor =
+        themeVariant === 'brand' || themeVariant === 'media'
+            ? vars.colors.neutralHighBrand
+            : themeVariant === 'negative'
+              ? vars.colors.neutralHighNegative
+              : vars.colors.brand;
+
+    return (
+        <svg role="presentation" width={size} height={size} viewBox="0 0 64 64">
+            <g stroke={color ? undefined : defaultColor}>
+                <path
+                    fill="none"
+                    stroke={color ? color : undefined}
+                    strokeWidth="4"
+                    strokeMiterlimit="10"
+                    d="M4.71002 43.3039C3.22557 39.7201 2.46154 35.879 2.46154 32C2.46154 28.121 3.22557 24.2799 4.71002 20.6961C6.19447 17.1124 8.37025 13.8561 11.1132 11.1132C13.8561 8.37026 17.1124 6.19447 20.6961 4.71002C24.2799 3.22558 28.121 2.46154 32 2.46154C35.879 2.46154 39.7201 3.22558 43.3039 4.71002C46.8877 6.19447 50.1439 8.37026 52.8868 11.1132C55.6297 13.8561 57.8055 17.1124 59.29 20.6961C60.7744 24.2799 61.5385 28.121 61.5385 32C61.5385 35.879 60.7744 39.7201 59.29 43.3039C57.8055 46.8877 55.6297 50.1439 52.8868 52.8868C50.1439 55.6297 46.8877 57.8055 43.3039 59.29C39.7201 60.7744 35.879 61.5385 32 61.5385C28.121 61.5385 24.2799 60.7744 20.6961 59.29C17.1124 57.8055 13.8561 55.6297 11.1132 52.8868C8.37025 50.1439 6.19447 46.8877 4.71002 43.3039Z"
+                    {...(!skipAnimation && getAnimateDrawLineProps('202', '0.2s', platformOverrides))}
+                />
+                <path
+                    fill="none"
+                    stroke={color ? color : undefined}
+                    strokeWidth="4"
+                    strokeMiterlimit="10"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M18.8718 32L28.7179 41.8462L45.1282 23.7949"
+                    {...(!skipAnimation &&
+                        mergeProperties(
+                            getAnimateDrawLineProps('44', '0.6s', platformOverrides),
+                            getAnimateHopInProps('0.6s', platformOverrides)
+                        ))}
+                />
+            </g>
+        </svg>
+    );
+};
+
+const IconSuccess = ({size, color, skipAnimation}: Props): JSX.Element => {
+    const {skinName} = useTheme();
+
+    switch (skinName) {
+        case O2_SKIN:
+            return <IconSuccessO2 size={size} color={color} skipAnimation={skipAnimation} />;
+        case O2_NEW_SKIN:
+            return <IconSuccessO2New size={size} color={color} skipAnimation={skipAnimation} />;
+        case VIVO_NEW_SKIN:
+            return <IconSuccessVivo size={size} color={color} skipAnimation={skipAnimation} />;
+        default:
+            return <IconSuccessDefault size={size} color={color} skipAnimation={skipAnimation} />;
+    }
+};
+
+export default IconSuccess;