@telefonica/mistica 16.70.0 → 16.72.0

package/src/skins/skin-contract.css.ts

@@ -293,7 +293,6 @@ const borderRadii: BorderRadiiConfig = {
     button: '',
     input: '',
     container: '',
-    legacyDisplay: '',
     popup: '',
     checkbox: '',
     indicator: '',

package/src/skins/telefonica.tsx

@@ -638,7 +638,6 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             chip: '24px',
             tag: '24px',
             input: '8px',
-            legacyDisplay: '0px',
             popup: '4px',
             sheet: '0px',
             mediaSmall: '2px',

package/src/skins/types/index.tsx

@@ -7,14 +7,11 @@ export type SkinVariant = 'prominent';
 
 export type KnownSkinName =
     | 'Movistar'
-    | 'Movistar-new'
     | 'O2'
-    | 'O2-new'
     | 'Vivo'
-    | 'Vivo-new'
+    | 'Vivo-evolution'
     | 'Telefonica'
     | 'Blau'
-    | 'Tu'
     | 'Esimflag';
 export type SkinName = KnownSkinName | string;
 
@@ -99,11 +96,6 @@ export type BorderRadiiConfig = {
     button: string;
     input: string;
     container: string;
-    /**
-     * This will be used for DisplayCards and PosterCards only for the moment. One day we'll unify the borderRadius in all the cards to use container.
-     * @deprecated Use `container` instead
-     */
-    legacyDisplay: string;
     popup: string;
     checkbox: string;
     indicator: string;

package/src/skins/utils.tsx

@@ -4,22 +4,16 @@ import {
     TELEFONICA_SKIN,
     VIVO_SKIN,
     O2_SKIN,
-    O2_NEW_SKIN,
     MOVISTAR_SKIN,
-    MOVISTAR_NEW_SKIN,
-    VIVO_NEW_SKIN,
-    TU_SKIN,
+    VIVO_EVOLUTION_SKIN,
     ESIMFLAG_SKIN,
 } from './constants';
 import {getBlauSkin} from './blau';
 import {getTelefonicaSkin} from './telefonica';
 import {getVivoSkin} from './vivo';
-import {getVivoNewSkin} from './vivo-new';
+import {getVivoEvolutionSkin} from './vivo-evolution';
 import {getO2Skin} from './o2';
-import {getO2NewSkin} from './o2-new';
 import {getMovistarSkin} from './movistar';
-import {getMovistarNewSkin} from './movistar-new';
-import {getTuSkin} from './tu';
 import {getEsimflagSkin} from './esimflag';
 
 import type {SkinVariant, KnownSkin, KnownSkinName} from './types';
@@ -32,18 +26,12 @@ export const getSkinByName = (name: KnownSkinName, variant?: SkinVariant): Known
             return getTelefonicaSkin(variant);
         case VIVO_SKIN:
             return getVivoSkin(variant);
-        case VIVO_NEW_SKIN:
-            return getVivoNewSkin(variant);
+        case VIVO_EVOLUTION_SKIN:
+            return getVivoEvolutionSkin(variant);
         case O2_SKIN:
             return getO2Skin(variant);
-        case O2_NEW_SKIN:
-            return getO2NewSkin(variant);
         case MOVISTAR_SKIN:
             return getMovistarSkin(variant);
-        case MOVISTAR_NEW_SKIN:
-            return getMovistarNewSkin(variant);
-        case TU_SKIN:
-            return getTuSkin(variant);
         case ESIMFLAG_SKIN:
             return getEsimflagSkin(variant);
         default: {

package/src/skins/{vivo-new.tsx → vivo-evolution.tsx}

@@ -1,4 +1,4 @@
-import {VIVO_NEW_SKIN} from './constants';
+import {VIVO_EVOLUTION_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
 import type {GetKnownSkin, KnownSkin} from './types';
@@ -42,9 +42,9 @@ export const palette = {
     darkModeGrey6: '#313235',
 };
 
-export const getVivoNewSkin: GetKnownSkin = () => {
+export const getVivoEvolutionSkin: GetKnownSkin = () => {
     const skin: KnownSkin = {
-        name: VIVO_NEW_SKIN,
+        name: VIVO_EVOLUTION_SKIN,
         colors: {
             background: palette.white,
             backgroundAlternative: palette.grey1,
@@ -627,7 +627,6 @@ export const getVivoNewSkin: GetKnownSkin = () => {
             chip: '24px',
             tag: '10px',
             input: '16px',
-            legacyDisplay: '24px',
             popup: '16px',
             sheet: '24px',
             mediaSmall: '12px',

package/src/skins/vivo.tsx

@@ -32,12 +32,13 @@ export const palette = {
     grey1: '#F6F6F6',
     grey2: '#EEEEEE',
     grey3: '#DDDDDD',
-    grey4: '#999999',
+    grey4: '#8A8C90',
     grey5: '#666666',
     grey6: '#000000',
     white: '#FFFFFF',
     darkModeBlack: '#191919',
     darkModeGrey: '#242424',
+    darkModeGrey5: '#6D7D88',
     darkModeGrey6: '#313235',
 };
 
@@ -49,7 +50,7 @@ export const getVivoSkin: GetKnownSkin = () => {
             backgroundAlternative: palette.grey1,
             backgroundBrand: palette.vivoPurple,
             backgroundNegative: palette.vivoPurpleDark,
-            backgroundBrandSecondary: palette.vivoPurple,
+            backgroundBrandSecondary: palette.vivoPurpleLight80,
             backgroundContainer: palette.white,
             backgroundContainerError: palette.pepperLight10,
             backgroundContainerHover: applyAlpha(palette.darkModeBlack, 0.05),
@@ -62,7 +63,7 @@ export const getVivoSkin: GetKnownSkin = () => {
             backgroundContainerBrandOverBrand: palette.vivoPurpleDark,
             backgroundContainerAlternative: palette.grey1,
             backgroundOverlay: applyAlpha(palette.grey6, 0.6),
-            backgroundSkeleton: palette.grey2,
+            backgroundSkeleton: palette.grey3,
             backgroundSkeletonInverse: palette.vivoPurpleDark,
             backgroundSkeletonNegative: applyAlpha(palette.grey6, 0.2),
             backgroundSkeletonBrand: palette.vivoPurpleDark,
@@ -70,14 +71,14 @@ export const getVivoSkin: GetKnownSkin = () => {
             backgroundBrandBottom: palette.vivoPurple,
             appBarBackground: palette.white,
             navigationBarBackground: palette.vivoPurple,
-            backgroundDropZoneHover: applyAlpha(palette.vivoPurpleDark, 0.07),
-            backgroundDropZoneDragover: applyAlpha(palette.vivoPurpleDark, 0.12),
-            backgroundDropZoneBrandHover: applyAlpha(palette.vivoPurpleDark, 0.2),
-            backgroundDropZoneBrandDragover: applyAlpha(palette.vivoPurpleDark, 0.4),
+            backgroundDropZoneHover: applyAlpha(palette.vivoPurple, 0.06),
+            backgroundDropZoneDragover: palette.vivoPurpleLight10,
+            backgroundDropZoneBrandHover: applyAlpha(palette.vivoPurpleDark, 0.3),
+            backgroundDropZoneBrandDragover: applyAlpha(palette.vivoPurpleDark, 0.5),
             backgroundDropZoneNegativeHover: applyAlpha(palette.white, 0.1),
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
-            backgroundDropZoneMediaHover: applyAlpha(palette.vivoPurpleDark, 0.2),
-            backgroundDropZoneMediaDragover: applyAlpha(palette.vivoPurpleDark, 0.4),
+            backgroundDropZoneMediaHover: applyAlpha(palette.vivoPurpleDark, 0.3),
+            backgroundDropZoneMediaDragover: applyAlpha(palette.vivoPurpleDark, 0.5),
             skeletonWave: palette.grey2,
             borderLow: palette.grey1,
             border: palette.grey3,
@@ -108,15 +109,15 @@ export const getVivoSkin: GetKnownSkin = () => {
             buttonPrimaryBackgroundBrand: palette.white,
             buttonPrimaryBackgroundMedia: palette.white,
             buttonPrimaryBackgroundHover: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundInverseHover: palette.vivoPurpleLight50,
-            buttonPrimaryBackgroundNegativeHover: palette.vivoPurpleLight50,
-            buttonPrimaryBackgroundBrandHover: palette.vivoPurpleLight50,
-            buttonPrimaryBackgroundMediaHover: palette.vivoPurpleLight50,
+            buttonPrimaryBackgroundInverseHover: palette.vivoPurpleLight10,
+            buttonPrimaryBackgroundNegativeHover: palette.vivoPurpleLight10,
+            buttonPrimaryBackgroundBrandHover: palette.vivoPurpleLight10,
+            buttonPrimaryBackgroundMediaHover: palette.vivoPurpleLight10,
             buttonPrimaryBackgroundPressed: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundInversePressed: palette.vivoPurpleLight50,
-            buttonPrimaryBackgroundNegativePressed: palette.vivoPurpleLight50,
-            buttonPrimaryBackgroundBrandPressed: palette.vivoPurpleLight50,
-            buttonPrimaryBackgroundMediaPressed: palette.vivoPurpleLight50,
+            buttonPrimaryBackgroundInversePressed: palette.vivoPurpleLight20,
+            buttonPrimaryBackgroundNegativePressed: palette.vivoPurpleLight20,
+            buttonPrimaryBackgroundBrandPressed: palette.vivoPurpleLight20,
+            buttonPrimaryBackgroundMediaPressed: palette.vivoPurpleLight20,
             buttonSecondaryBackgroundBrand: applyAlpha(palette.white, 0),
             buttonSecondaryBorder: palette.vivoPurple,
             buttonSecondaryBorderInverse: palette.white,
@@ -164,10 +165,10 @@ export const getVivoSkin: GetKnownSkin = () => {
             textLinkMedia: palette.white,
             textLinkDanger: palette.pepper,
             textLinkDangerMedia: palette.pepper,
-            textLinkSnackbar: palette.vivoPurpleLight50,
+            textLinkSnackbar: palette.vivoPurpleLight20,
             textActivated: palette.vivoPurple,
             textBrand: palette.vivoPurple,
-            inputBorder: palette.grey3,
+            inputBorder: palette.grey4,
             inputBorderInverse: palette.white,
             inputBorderNegative: palette.white,
             inputBorderBrand: palette.white,
@@ -175,7 +176,7 @@ export const getVivoSkin: GetKnownSkin = () => {
             completedStepInverse: palette.vivoPurpleDark,
             completedStepNegative: palette.vivoPurpleDark,
             completedStepBrand: palette.vivoPurpleDark,
-            control: palette.grey3,
+            control: palette.grey4,
             controlActivated: palette.vivoPurple,
             controlInverse: palette.vivoPurpleLight50,
             controlNegative: palette.vivoPurpleLight50,
@@ -189,8 +190,8 @@ export const getVivoSkin: GetKnownSkin = () => {
             barTrackInverse: applyAlpha(palette.white, 0.5),
             barTrackNegative: applyAlpha(palette.white, 0.5),
             barTrackBrand: applyAlpha(palette.white, 0.5),
-            loadingBar: palette.pink,
-            loadingBarBackground: palette.pepperLight30,
+            loadingBar: palette.vivoPurple,
+            loadingBarBackground: palette.vivoPurpleLight10,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.vivoPurpleLight20,
             toggleAndroidActiveBrand: palette.white,
@@ -201,14 +202,14 @@ export const getVivoSkin: GetKnownSkin = () => {
             controlKnobInverse: palette.vivoPurple,
             controlKnobNegative: palette.vivoPurple,
             controlKnobBrand: palette.vivoPurple,
-            divider: palette.grey2,
+            divider: palette.grey3,
             dividerInverse: applyAlpha(palette.white, 0.2),
             dividerNegative: applyAlpha(palette.white, 0.2),
             dividerBrand: applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.vivoPurple,
             badge: palette.pepperDark,
             feedbackErrorBackground: palette.pepper,
-            feedbackInfoBackground: palette.grey6,
+            feedbackInfoBackground: palette.vivoPurpleDark,
             brand: palette.vivoPurple,
             brandHigh: palette.vivoPurpleDark,
             inverse: palette.white,
@@ -266,11 +267,11 @@ export const getVivoSkin: GetKnownSkin = () => {
             textNavigationBarSecondary: palette.vivoPurpleLight50,
             textNavigationSearchBarHint: palette.vivoPurpleLight50,
             textNavigationSearchBarText: palette.white,
-            textAppBar: palette.grey4,
+            textAppBar: palette.grey5,
             textAppBarSelected: palette.vivoPurple,
             iosGlassAppBar: palette.grey6,
             iosGlassAppBarSelected: palette.vivoPurple,
-            customTabsBackground: palette.vivoPurple,
+            customTabsBackground: palette.white,
             tagTextPromo: palette.vivoPurple,
             tagTextActive: palette.vivoPurple,
             tagTextInactive: palette.grey5,
@@ -279,7 +280,7 @@ export const getVivoSkin: GetKnownSkin = () => {
             tagTextWarning: palette.orangeDark,
             tagTextError: palette.pepperDark80,
             tagBackgroundPromo: palette.vivoPurpleLight10,
-            tagBackgroundActive: palette.vivoPurpleLight10,
+            tagBackgroundActive: palette.grey1,
             tagBackgroundInactive: palette.grey1,
             tagBackgroundInfo: palette.vivoPurpleLight10,
             tagBackgroundSuccess: palette.vivoGreenLight10,
@@ -397,12 +398,12 @@ export const getVivoSkin: GetKnownSkin = () => {
             buttonPrimaryBackgroundInverseHover: palette.vivoPurpleDark,
             buttonPrimaryBackgroundNegativeHover: palette.vivoPurpleDark,
             buttonPrimaryBackgroundBrandHover: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundMediaHover: palette.vivoPurpleLight50,
+            buttonPrimaryBackgroundMediaHover: palette.vivoPurpleLight10,
             buttonPrimaryBackgroundPressed: palette.vivoPurpleDark,
             buttonPrimaryBackgroundInversePressed: palette.vivoPurpleDark,
             buttonPrimaryBackgroundNegativePressed: palette.vivoPurpleDark,
             buttonPrimaryBackgroundBrandPressed: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundMediaPressed: palette.vivoPurpleLight50,
+            buttonPrimaryBackgroundMediaPressed: palette.vivoPurpleLight20,
             buttonSecondaryBackgroundBrand: applyAlpha(palette.white, 0),
             buttonSecondaryBorder: palette.white,
             buttonSecondaryBorderInverse: palette.white,
@@ -453,10 +454,10 @@ export const getVivoSkin: GetKnownSkin = () => {
             textLinkSnackbar: palette.vivoPurpleLight50,
             textActivated: palette.vivoPurpleLight80,
             textBrand: palette.vivoPurpleLight80,
-            inputBorder: palette.darkModeGrey6,
-            inputBorderInverse: palette.darkModeGrey6,
-            inputBorderNegative: palette.darkModeGrey6,
-            inputBorderBrand: palette.darkModeGrey6,
+            inputBorder: palette.darkModeGrey5,
+            inputBorderInverse: palette.darkModeGrey5,
+            inputBorderNegative: palette.darkModeGrey5,
+            inputBorderBrand: palette.darkModeGrey5,
             completedStep: palette.vivoPurpleLight80,
             completedStepInverse: palette.vivoPurpleLight80,
             completedStepNegative: palette.vivoPurpleLight80,
@@ -513,10 +514,10 @@ export const getVivoSkin: GetKnownSkin = () => {
             textPrimaryNegative: palette.grey2,
             textPrimaryBrand: palette.grey2,
             textPrimaryMedia: palette.white,
-            textSecondary: palette.grey4,
-            textSecondaryInverse: palette.grey4,
-            textSecondaryNegative: palette.grey4,
-            textSecondaryBrand: palette.grey4,
+            textSecondary: palette.grey3,
+            textSecondaryInverse: palette.grey3,
+            textSecondaryNegative: palette.grey3,
+            textSecondaryBrand: palette.grey3,
             textSecondaryMedia: palette.white,
             success: palette.vivoGreen,
             warning: palette.orange,
@@ -619,17 +620,16 @@ export const getVivoSkin: GetKnownSkin = () => {
         borderRadii: {
             avatar: '50%',
             bar: '999px',
-            button: '4px',
-            checkbox: '2px',
-            container: '8px',
+            button: '32px',
+            checkbox: '4px',
+            container: '24px',
             indicator: '24px',
             chip: '24px',
-            tag: '24px',
-            input: '8px',
-            legacyDisplay: '16px',
-            popup: '8px',
-            sheet: '8px',
-            mediaSmall: '8px',
+            tag: '10px',
+            input: '16px',
+            popup: '16px',
+            sheet: '24px',
+            mediaSmall: '12px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -639,8 +639,8 @@ export const getVivoSkin: GetKnownSkin = () => {
             cardPretitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             cardSubtitleDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             cardSubtitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
-            cardTitle: {weight: 'regular'},
-            cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
+            cardTitle: {weight: 'medium'},
+            cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 24, mobile: 18}},
             cardTitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             chipLabel: {
                 lineHeight: {desktop: 24, mobile: 20},
@@ -650,40 +650,64 @@ export const getVivoSkin: GetKnownSkin = () => {
             drawerTitle: {
                 lineHeight: {desktop: 32, mobile: 24},
                 size: {desktop: 28, mobile: 20},
-                weight: 'light',
+                weight: 'medium',
             },
             indicator: {weight: 'medium'},
             inputHelperText: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
             inputLabel: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
             inputValue: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
             link: {weight: 'medium'},
-            loadingScreenTitle: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
-            navigationBar: {weight: 'medium'},
+            loadingScreenTitle: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 24, mobile: 18}},
+            navigationBar: {weight: 'regular'},
             rowTitle: {weight: 'regular'},
             stepperStepLabel: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             tabsLabel: {
                 lineHeight: {desktop: 24, mobile: 24},
-                size: {desktop: 18, mobile: 16},
+                size: {desktop: 18, mobile: 18},
                 weight: 'medium',
             },
             text1: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
             text2: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             text3: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
-            text4: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
-            text5: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'light'},
-            text6: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'light'},
-            text7: {lineHeight: {desktop: 48, mobile: 32}, size: {desktop: 40, mobile: 28}, weight: 'light'},
-            text8: {lineHeight: {desktop: 56, mobile: 40}, size: {desktop: 48, mobile: 32}, weight: 'light'},
-            text9: {lineHeight: {desktop: 64, mobile: 48}, size: {desktop: 56, mobile: 40}, weight: 'light'},
-            text10: {lineHeight: {desktop: 72, mobile: 56}, size: {desktop: 64, mobile: 48}, weight: 'light'},
+            text4: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 24, mobile: 18}},
+            text5: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'medium'},
+            text6: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'medium'},
+            text7: {lineHeight: {desktop: 48, mobile: 32}, size: {desktop: 40, mobile: 28}, weight: 'medium'},
+            text8: {
+                lineHeight: {desktop: 56, mobile: 40},
+                size: {desktop: 48, mobile: 32},
+                weight: 'regular',
+            },
+            text9: {
+                lineHeight: {desktop: 64, mobile: 48},
+                size: {desktop: 56, mobile: 40},
+                weight: 'regular',
+            },
+            text10: {
+                lineHeight: {desktop: 72, mobile: 56},
+                size: {desktop: 64, mobile: 48},
+                weight: 'regular',
+            },
             title1: {
                 lineHeight: {desktop: 20, mobile: 16},
                 size: {desktop: 14, mobile: 12},
                 weight: 'medium',
             },
-            title2: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}, weight: 'light'},
-            title3: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'light'},
-            title4: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'light'},
+            title2: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'medium',
+            },
+            title3: {
+                lineHeight: {desktop: 28, mobile: 24},
+                size: {desktop: 24, mobile: 18},
+                weight: 'medium',
+            },
+            title4: {
+                lineHeight: {desktop: 40, mobile: 32},
+                size: {desktop: 32, mobile: 24},
+                weight: 'medium',
+            },
         },
         themeVariants: {
             successFeedback: 'inverse',

package/src/skip-link.tsx

@@ -17,7 +17,10 @@ type Props = {
 
 const SkipLink = ({targetId, children, 'aria-label': ariaLabel, dataAttributes}: Props): JSX.Element => {
     return (
-        <div className={styles.skipLinkContainer} {...getPrefixedDataAttributes(dataAttributes, 'SkipLink')}>
+        <div
+            className={styles.skipLinkContainer}
+            {...getPrefixedDataAttributes({testid: 'SkipLink', ...dataAttributes})}
+        >
             <ButtonLink aria-label={ariaLabel} href={`#${targetId}`} withChevron={false}>
                 {children}
             </ButtonLink>
@@ -39,7 +42,7 @@ export const SkipLinkNav = ({
     const {texts, t} = useTheme();
     const navLabel = ariaLabel || texts.skipLinkNavLabel || t(tokens.skipLinkNavLabel);
     return (
-        <nav aria-label={navLabel} {...getPrefixedDataAttributes(dataAttributes, 'SkipLinkNav')}>
+        <nav aria-label={navLabel} {...getPrefixedDataAttributes({testid: 'SkipLinkNav', ...dataAttributes})}>
             <ul className={styles.skipLinkList}>
                 {React.Children.map(children, (child) => (
                     <li>{child}</li>

package/src/slider.tsx

@@ -245,7 +245,7 @@ const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
         );
 
         return (
-            <Box paddingY={8} dataAttributes={{'component-name': 'Slider', ...dataAttributes}}>
+            <Box paddingY={8} dataAttributes={{testid: 'Slider', ...dataAttributes}}>
                 <div
                     className={classNames(styles.container, {[styles.disabled]: disabled})}
                     style={{height: touchableArea}}

package/src/snackbar.tsx

@@ -111,7 +111,7 @@ const SnackbarComponent = React.forwardRef<ImperativeHandle, Props>(
                             type === 'CRITICAL' ? styles.wrapperCritical : styles.wrapperInfo,
                             {[styles.wrapperOpen]: isOpen}
                         )}
-                        {...getPrefixedDataAttributes(dataAttributes, 'SnackBar')}
+                        {...getPrefixedDataAttributes({testid: 'SnackBar', ...dataAttributes})}
                     >
                         <div
                             className={classNames(

package/src/spinner.tsx

@@ -12,8 +12,6 @@ type Props = {
     color?: string;
     delay?: string;
     size?: number | string;
-    /** @deprecated Use aria-hidden instead */
-    rolePresentation?: boolean;
     'aria-hidden'?: 'true' | 'false' | boolean;
     'aria-label'?: string;
     'aria-live'?: 'off' | 'polite' | 'assertive';
@@ -26,7 +24,6 @@ const Spinner = ({
     delay = '500ms',
     size = 24,
     style,
-    rolePresentation,
     'aria-hidden': ariaHidden,
     'aria-label': ariaLabel,
     'aria-live': ariaLive = 'polite',
@@ -52,7 +49,7 @@ const Spinner = ({
                 role="progressbar"
                 aria-live={ariaLive}
                 aria-label={label}
-                aria-hidden={ariaHidden || rolePresentation}
+                aria-hidden={ariaHidden}
                 viewBox="0 0 30 30"
                 width={size}
             >
@@ -100,7 +97,7 @@ const Spinner = ({
                 </g>
             </svg>
         ) : (
-            <div aria-hidden={ariaHidden || rolePresentation} aria-live={ariaLive}>
+            <div aria-hidden={ariaHidden} aria-live={ariaLive}>
                 <svg
                     role="progressbar"
                     aria-label={label}
@@ -127,7 +124,7 @@ const Spinner = ({
         return content;
     }
     return (
-        <FadeIn delay={delay} dataAttributes={{'component-name': 'Spinner'}}>
+        <FadeIn delay={delay} dataAttributes={{testid: 'Spinner'}}>
             {content}
         </FadeIn>
     );

package/src/square.tsx

@@ -45,7 +45,7 @@ const Square = ({
                 border: borderProp,
                 borderRadius,
             }}
-            {...getPrefixedDataAttributes(dataAttributes, 'Square')}
+            {...getPrefixedDataAttributes({testid: 'Square', ...dataAttributes})}
         >
             {children}
         </div>

package/src/stepper.tsx

@@ -60,7 +60,7 @@ const Stepper = ({
             style={applyCssVars({
                 [styles.vars.stepperMinHeight]: pxToRem(40 + textContainerHeight),
             })}
-            {...getPrefixedDataAttributes(dataAttributes, 'Stepper')}
+            {...getPrefixedDataAttributes({testid: 'Stepper', ...dataAttributes})}
             aria-label={ariaLabel}
             aria-labelledby={ariaLabelledby}
             aria-description={ariaDescription}

package/src/switch-component.tsx

@@ -159,7 +159,7 @@ const Switch = (props: PropsRender | PropsChildren): JSX.Element => {
             aria-disabled={disabled}
             aria-label={props['aria-label']}
             aria-labelledby={props['aria-label'] ? undefined : labelId}
-            {...getPrefixedDataAttributes(props.dataAttributes, 'Switch')}
+            {...getPrefixedDataAttributes({testid: 'Switch', ...props.dataAttributes})}
         >
             {props.render ? (
                 <>

package/src/table.tsx

@@ -378,7 +378,7 @@ export const Table = React.forwardRef(
                         mobile: collapsedRowsMode ? '100%' : fullWidth ? '100%' : 'auto',
                     }}
                     ref={ref}
-                    dataAttributes={{'component-name': 'Table', ...dataAttributes}}
+                    dataAttributes={{testid: 'Table', ...dataAttributes}}
                 >
                     <div {...getScrollContainerStyles()}>{table}</div>
                 </InternalBoxed>
@@ -388,7 +388,7 @@ export const Table = React.forwardRef(
         return (
             <div
                 ref={ref}
-                {...getPrefixedDataAttributes(dataAttributes, 'Table')}
+                {...getPrefixedDataAttributes({testid: 'Table', ...dataAttributes})}
                 {...getScrollContainerStyles(scrollOverResponsiveLayout)}
             >
                 {table}

package/src/tabs.tsx

@@ -147,7 +147,7 @@ const Tabs = ({
                         }[externalVariant],
                     }),
                 }}
-                {...getPrefixedDataAttributes(dataAttributes, 'Tabs')}
+                {...getPrefixedDataAttributes({testid: 'Tabs', ...dataAttributes})}
                 aria-label={otherProps['aria-label']}
                 aria-labelledby={otherProps['aria-labelledby']}
                 aria-description={otherProps['aria-description']}
@@ -164,7 +164,7 @@ const Tabs = ({
                                             id={getTabId(index)}
                                             tabIndex={isSelected ? undefined : -1}
                                             ref={isSelected ? selectedTabRef : undefined}
-                                            dataAttributes={{'component-name': 'Tab'}}
+                                            dataAttributes={{testid: 'Tab'}}
                                             key={index}
                                             className={classnames(
                                                 styles.tabVariants[getTabVariant(tabs.length)],

package/src/tag.tsx

@@ -125,7 +125,7 @@ const Tag = ({
 
     return (
         <span
-            {...getPrefixedDataAttributes(dataAttributes, 'Tag')}
+            {...getPrefixedDataAttributes({testid: 'Tag', ...dataAttributes})}
             className={classNames(small ? styles.smallTag : styles.tag)}
             style={{
                 paddingLeft,
@@ -138,7 +138,7 @@ const Tag = ({
                     <Icon color={textColor} size={pxToRem(16)} className={styles.icon} />
                 </Box>
             )}
-            <ThemeVariant isInverse={false}>
+            <ThemeVariant variant="default">
                 <Text
                     color={textColor}
                     size={small ? 12 : 14}

package/src/test-utils/index.tsx

@@ -2,7 +2,7 @@ import path from 'path';
 import fs from 'fs';
 import os from 'os';
 import {openPage, serverHostName, screen, getGlobalPage, PageApi} from '@telefonica/acceptance-testing';
-import {MOVISTAR_NEW_SKIN} from '../skins/constants';
+import {MOVISTAR_SKIN} from '../skins/constants';
 import {kebabCase} from 'lodash';
 
 import type {TestViewport} from '@telefonica/acceptance-testing';
@@ -178,24 +178,14 @@ export const openStoryPage = ({
     id,
     device = TABLET_DEVICE,
     viewport,
-    skin = 'Movistar-new',
+    skin = 'Movistar',
     args,
     isDarkMode,
 }: {
     id: string;
     device?: Device;
     viewport?: TestViewport;
-    skin?:
-        | 'Movistar'
-        | 'Movistar-new'
-        | 'Vivo'
-        | 'Vivo-new'
-        | 'O2'
-        | 'O2-new'
-        | 'Telefonica'
-        | 'Blau'
-        | 'Tu'
-        | 'Esimflag';
+    skin?: 'Movistar' | 'Vivo' | 'Vivo-evolution' | 'O2' | 'Telefonica' | 'Blau' | 'Esimflag' | 'Cyber';
     args?: StoryArgs;
     isDarkMode?: boolean;
 }): Promise<PageApi> =>
@@ -251,7 +241,7 @@ const checkHydrationMismatch = async (page: PageApi): Promise<void> => {
 export const openSSRPage = async ({
     name,
     device = TABLET_DEVICE,
-    skin = MOVISTAR_NEW_SKIN,
+    skin = MOVISTAR_SKIN,
     checkHidrationVisualMismatch = true,
     prefersColorScheme,
     waitUntil,

package/src/text-field.tsx

@@ -109,7 +109,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
                 inputRef={combineRefs(inputRef, fieldProps.inputRef, ref)}
                 onFocus={onFocus}
                 type="text"
-                dataAttributes={{'component-name': 'TextField', testid: 'TextField', ...dataAttributes}}
+                dataAttributes={{testid: 'TextField', ...dataAttributes}}
             />
         );
     }