@telefonica/mistica 17.4.0 → 17.6.0

package/src/community/advanced-data-card.tsx

@@ -10,17 +10,19 @@ import Divider from '../divider';
 import {Text2, Text, useTextPresetSizes} from '../text';
 import {vars} from '../skins/skin-contract.css';
 import Box from '../box';
-import Touchable from '../touchable';
 import classNames from 'classnames';
+import Touchable from '../touchable';
 import {useInnerText, useTheme} from '../hooks';
 import {getPrefixedDataAttributes} from '../utils/dom';
 import Inline from '../inline';
 import {applyCssVars} from '../utils/css';
 import Tag from '../tag';
 import {isBiggerHeading} from '../utils/headings';
-import {TopActions} from '../card-internal';
+import {TopActions, useControlState, CardWithControl} from '../card-internal';
+import {useRadioContext} from '../radio-button';
+import * as cardStyles from '../card-internal.css';
 
-import type {CardAction} from '../card-internal';
+import type {CardSelectionProps, CardAction} from '../card-internal';
 import type {PressHandler} from '../touchable';
 import type {ExclusifyUnion} from '../utils/utility-types';
 import type StackingGroup from '../stacking-group';
@@ -55,7 +57,11 @@ type TouchableProps = {
       }
 >;
 type TouchableCard<T> = T & TouchableProps;
-type MaybeTouchableCard<T> = ExclusifyUnion<TouchableCard<T> | T>;
+type CardInteractionProps<T> = ExclusifyUnion<
+    | (TouchableCard<T> & {selected?: boolean})
+    | (T & {selected?: boolean})
+    | (Omit<T, 'actions' | 'onClose'> & CardSelectionProps)
+>;
 
 type CardContentProps = {
     headline?: string | RendersNullableElement<typeof Tag>;
@@ -265,7 +271,7 @@ type AllowedSlot =
     | typeof SimpleBlock
     | typeof ValueBlock;
 
-type AdvancedDataCardProps = MaybeTouchableCard<{
+type AdvancedDataCardProps = CardInteractionProps<{
     stackingGroup?: RendersNullableElement<typeof StackingGroup>;
     headline?: RendersNullableElement<typeof Tag>;
     pretitle?: string;
@@ -295,6 +301,10 @@ type AdvancedDataCardProps = MaybeTouchableCard<{
 export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCardProps>(
     (
         {
+            selected,
+            checkbox,
+            switch: switchProps,
+            radioValue,
             stackingGroup,
             headline,
             pretitle,
@@ -326,14 +336,24 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
         },
         ref
     ) => {
-        const isTouchable = !!touchableProps.href || !!touchableProps.onPress || !!touchableProps.to;
-
+        const {isChecked, toggleChecked} = useControlState(switchProps || checkbox);
+        const radioContext = useRadioContext();
+        const isSelectable = !!switchProps || !!checkbox || radioValue !== undefined;
+        const isSelected =
+            switchProps || checkbox
+                ? isChecked
+                : radioValue !== undefined
+                  ? radioContext.selectedValue === radioValue
+                  : selected;
+        const {isIos} = useTheme();
+        const isTouchable =
+            isSelectable || !!touchableProps.href || !!touchableProps.onPress || !!touchableProps.to;
         const footerProps = {button, footerImage, footerText, footerTextLinesMax, buttonLink};
 
         const hasFooter = !!button || !!footerImage || !!footerText || !!buttonLink;
         const hasSlots = !!slot?.length;
 
-        const topActionsCount = (actions?.length || 0) + (onClose ? 1 : 0);
+        const topActionsCount = isSelectable ? 1 : (actions?.length || 0) + (onClose ? 1 : 0);
 
         const {text: headlineText, ref: headlineRef} = useInnerText();
         const {text: slotText, ref: slotRef} = useInnerText();
@@ -347,79 +367,109 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
                 .filter(Boolean)
                 .join(' ');
 
+        const content = (
+            <>
+                {isTouchable && <div className={styles.touchableCardHoverOverlay} />}
+
+                <div
+                    className={classNames(
+                        styles.cardContentStyle,
+                        !hasFooter && !hasSlots ? styles.minHeight : ''
+                    )}
+                    aria-hidden={isTouchable && !isSelectable}
+                >
+                    <Box paddingTop={8}>
+                        <Inline space={0}>
+                            <Stack space={8}>
+                                {stackingGroup}
+                                <CardContent
+                                    headline={headline}
+                                    headlineRef={headlineRef}
+                                    pretitle={pretitle}
+                                    pretitleAs={pretitleAs}
+                                    pretitleLinesMax={pretitleLinesMax}
+                                    title={title}
+                                    titleAs={titleAs}
+                                    titleLinesMax={titleLinesMax}
+                                    subtitle={subtitle}
+                                    subtitleLinesMax={subtitleLinesMax}
+                                    description={description}
+                                    descriptionLinesMax={descriptionLinesMax}
+                                />
+                            </Stack>
+                            {/** Hack to avoid content from rendering on top of the top action buttons */}
+                            {!stackingGroup && (
+                                <div
+                                    style={applyCssVars({
+                                        [styles.vars.topActionsCount]: String(topActionsCount),
+                                    })}
+                                    className={classNames(
+                                        styles.topActionsWithoutIcon,
+                                        switchProps && styles.switchSpace[isIos ? 'ios' : 'default']
+                                    )}
+                                />
+                            )}
+                        </Inline>
+                    </Box>
+                </div>
+                <div style={{flexGrow: 1}} />
+                {hasSlots && (
+                    <div className={styles.slot} ref={slotRef} aria-hidden={isTouchable && !isSelectable}>
+                        {slot.map((item, index) => {
+                            return (
+                                <div key={index}>
+                                    <div className={styles.paddingX}>{item}</div>
+
+                                    {index + 1 !== slot.length && (
+                                        <Box paddingY={slotDividerPadding}>
+                                            {!noSlotDivider && <Divider />}
+                                        </Box>
+                                    )}
+                                </div>
+                            );
+                        })}
+                    </div>
+                )}
+            </>
+        );
+
         return (
             <section
-                className={styles.container}
+                className={classNames(
+                    styles.container,
+                    isSelected && cardStyles.selectionOutline,
+                    isSelected && cardStyles.selectionOutlineColor.default
+                )}
                 {...getPrefixedDataAttributes({testid: 'AdvancedDataCard', ...dataAttributes})}
                 ref={ref}
                 aria-label={isTouchable ? undefined : ariaLabel}
             >
                 <Boxed className={styles.dataCard} width="100%" height="100%" minHeight={styles.MIN_HEIGHT}>
-                    <Touchable
-                        maybe
-                        {...touchableProps}
-                        aria-label={isTouchable ? ariaLabel : undefined}
-                        className={styles.touchable}
-                    >
-                        {isTouchable && <div className={styles.touchableCardHoverOverlay} />}
-
-                        <div
-                            className={classNames(
-                                styles.cardContentStyle,
-                                !hasFooter && !hasSlots ? styles.minHeight : ''
-                            )}
-                            aria-hidden={isTouchable}
+                    {isSelectable ? (
+                        <CardWithControl
+                            maybe
+                            {...(checkbox
+                                ? {checkbox}
+                                : switchProps
+                                  ? {switch: switchProps}
+                                  : {radioValue: radioValue ?? ''})}
+                            checked={isChecked}
+                            onChange={toggleChecked}
+                            aria-label={ariaLabel}
+                            className={classNames(styles.touchable, styles.selectionTouchable)}
                         >
-                            <Box paddingTop={8}>
-                                <Inline space={0}>
-                                    <Stack space={8}>
-                                        {stackingGroup}
-                                        <CardContent
-                                            headline={headline}
-                                            headlineRef={headlineRef}
-                                            pretitle={pretitle}
-                                            pretitleAs={pretitleAs}
-                                            pretitleLinesMax={pretitleLinesMax}
-                                            title={title}
-                                            titleAs={titleAs}
-                                            titleLinesMax={titleLinesMax}
-                                            subtitle={subtitle}
-                                            subtitleLinesMax={subtitleLinesMax}
-                                            description={description}
-                                            descriptionLinesMax={descriptionLinesMax}
-                                        />
-                                    </Stack>
-                                    {/** Hack to avoid content from rendering on top of the top action buttons */}
-                                    {!stackingGroup && (
-                                        <div
-                                            style={applyCssVars({
-                                                [styles.vars.topActionsCount]: String(topActionsCount),
-                                            })}
-                                            className={styles.topActionsWithoutIcon}
-                                        />
-                                    )}
-                                </Inline>
-                            </Box>
-                        </div>
-                        <div style={{flexGrow: 1}} />
-                        {hasSlots && (
-                            <div className={styles.slot} ref={slotRef} aria-hidden={isTouchable}>
-                                {slot.map((item, index) => {
-                                    return (
-                                        <div key={index}>
-                                            <div className={styles.paddingX}>{item}</div>
-
-                                            {index + 1 !== slot.length && (
-                                                <Box paddingY={slotDividerPadding}>
-                                                    {!noSlotDivider && <Divider />}
-                                                </Box>
-                                            )}
-                                        </div>
-                                    );
-                                })}
-                            </div>
-                        )}
-                    </Touchable>
+                            {content}
+                        </CardWithControl>
+                    ) : (
+                        <Touchable
+                            maybe
+                            {...touchableProps}
+                            aria-label={isTouchable ? ariaLabel : undefined}
+                            className={styles.touchable}
+                        >
+                            {content}
+                        </Touchable>
+                    )}
                     {hasFooter && <CardFooter {...footerProps} />}
                 </Boxed>
                 <TopActions actions={actions} onClose={onClose} />

package/src/community/ai-card.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import {BaseTouchable} from '../touchable';
-import {Text3} from '../text';
+import {Text2} from '../text';
 import {vars} from '../skins/skin-contract.css';
 import {useIsInViewport} from '../hooks';
 import {isClientSide} from '../utils/environment';
@@ -201,7 +201,7 @@ const AiCard = ({
                 </span>
             )}
             <div ref={textLineRef} className={styles.textLine} aria-hidden="true" style={textLineStyle}>
-                <Text3 regular color={vars.colors.textPrimary} as="span">
+                <Text2 regular color={vars.colors.textPrimary} as="span">
                     <span className={styles.textWrapper}>
                         <span className={styles.ghost}>
                             {text}
@@ -222,7 +222,7 @@ const AiCard = ({
                             )}
                         </span>
                     </span>
-                </Text3>
+                </Text2>
             </div>
         </BaseTouchable>
     );

package/src/fade-out.css.ts

@@ -0,0 +1,12 @@
+import {style, keyframes} from '@vanilla-extract/css';
+
+const fadeIn = keyframes({
+    '0%': {opacity: 1},
+    '100%': {opacity: 0},
+});
+
+export const wrapper = style({
+    animationName: fadeIn,
+    animationTimingFunction: 'ease',
+    animationFillMode: 'both',
+});

package/src/fade-out.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import * as styles from './fade-out.css';
+import {getPrefixedDataAttributes} from './utils/dom';
+
+import type {DataAttributes} from './utils/types';
+
+const defaultDuration = '0.3s';
+
+type Props = {
+    children?: React.ReactNode;
+    className?: string;
+    delay?: string;
+    duration?: string;
+    dataAttributes?: DataAttributes;
+};
+
+const FadeOut = ({
+    children,
+    className = '',
+    /**
+     * The length of the fade-in animation.
+     * Use a CSS time value, for example '0.3s' or '300ms'.
+     * The default value is '0.3s'.
+     */
+    duration = defaultDuration,
+    /**
+     * The wait time before the fade-in animation starts.
+     * Use a CSS time value, for example '0.3s' or '300ms'.
+     * The default value is '0' (no wait time).
+     */
+    delay = '0',
+    dataAttributes,
+}: Props): JSX.Element => {
+    return (
+        <div
+            {...getPrefixedDataAttributes({testid: 'FadeOut', ...dataAttributes})}
+            className={`${styles.wrapper} ${className}`}
+            style={{
+                animationDelay: delay,
+                WebkitAnimationDelay: delay,
+                animationDuration: duration,
+                WebkitAnimationDuration: duration,
+            }}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default FadeOut;

package/src/header.tsx

@@ -5,11 +5,11 @@ import Stack from './stack';
 import ResponsiveLayout from './responsive-layout';
 import GridLayout from './grid-layout';
 import {useSetOverscrollColor} from './overscroll-color-context';
-import {Text7, Text6, Text3, Text2} from './text';
+import {Text7, Text6, Text, Text2, Text3} from './text';
 import {vars} from './skins/skin-contract.css';
 import * as styles from './header.css';
 import {getPrefixedDataAttributes} from './utils/dom';
-import {Title3, Title4} from './title';
+import {Title1, Title2, Title3, Title4} from './title';
 import {
     type DataAttributes,
     type HeadingType,
@@ -17,6 +17,7 @@ import {
     type RendersNullableElement,
 } from './utils/types';
 import {isBiggerHeading} from './utils/headings';
+import {useTheme} from './hooks';
 
 import type NavigationBreadcrumbs from './navigation-breadcrumbs';
 import type {ButtonPrimary, ButtonSecondary} from './button';
@@ -30,12 +31,15 @@ type OverridableTextProps = {
 
 type RichText = string | ({text: string} & OverridableTextProps);
 
+type TitleSizes = 'title1' | 'title2' | 'title3' | 'title4';
+
 type HeaderProps = {
     headline?: React.ReactNode;
     pretitle?: RichText;
     pretitleAs?: HeadingType;
     title?: string;
     titleAs?: HeadingType;
+    titleSize?: TitleSizes;
     description?: string;
     small?: boolean;
     dataAttributes?: DataAttributes;
@@ -47,45 +51,63 @@ export const Header = ({
     pretitleAs,
     title,
     titleAs = 'h2',
+    titleSize,
     description,
     dataAttributes,
     small = false,
 }: HeaderProps): JSX.Element => {
+    const {textPresets} = useTheme();
+
     const renderPretitle = () => {
         if (!pretitle) {
             return null;
         }
         const baseTextProps = {
-            regular: true,
             color: vars.colors.textPrimary,
             as: pretitleAs,
             dataAttributes: {testid: 'pretitle'},
+            desktopSize: textPresets.headerPretitle.size.desktop,
+            mobileSize: textPresets.headerPretitle.size.mobile,
+            desktopLineHeight: textPresets.headerPretitle.lineHeight.desktop,
+            mobileLineHeight: textPresets.headerPretitle.lineHeight.mobile,
+            weight: textPresets.headerPretitle.weight,
         } as const;
 
         if (typeof pretitle === 'string') {
-            return <Text3 {...baseTextProps}>{pretitle}</Text3>;
+            return <Text {...baseTextProps}>{pretitle}</Text>;
         }
         const {text, ...textProps} = pretitle;
         return (
-            <Text3 {...baseTextProps} {...textProps}>
+            <Text {...baseTextProps} {...textProps}>
                 {text}
-            </Text3>
+            </Text>
         );
     };
 
+    const renderTitle = () => {
+        if (!title) return undefined;
+
+        const baseTitleProps = {
+            children: title,
+            as: titleAs,
+            dataAttributes: {testid: 'title'},
+        } as const;
+
+        const titleComponents = {
+            title1: Title1,
+            title2: Title2,
+            title3: Title3,
+            title4: Title4,
+        } as const;
+
+        const TitleComponent = titleSize ? titleComponents[titleSize] : small ? Title3 : Title4;
+
+        return <TitleComponent {...baseTitleProps} />;
+    };
+
     const pretitleContent = renderPretitle();
 
-    const titleContent = title ? (
-        small ? (
-            <Title3 as={titleAs} dataAttributes={{testid: 'title'}}>
-                {title}
-            </Title3>
-        ) : (
-            <Title4 as={titleAs} dataAttributes={{testid: 'title'}}>
-                {title}
-            </Title4>
-        )
-    ) : undefined;
+    const titleContent = renderTitle();
 
     const headlineContent = headline ? (
         <div

package/src/index.tsx

@@ -7,6 +7,7 @@ export {default as Touchable} from './touchable';
 export type {TouchableElement} from './touchable';
 export {default as Spinner} from './spinner';
 export {default as FadeIn} from './fade-in';
+export {default as FadeOut} from './fade-out';
 
 export {AccordionItem, BoxedAccordionItem, Accordion, BoxedAccordion} from './accordion';
 export {ButtonPrimary, ButtonSecondary, ButtonDanger, ButtonLink, ButtonLinkDanger} from './button';
@@ -971,6 +972,9 @@ export {default as IconDisturbRegular} from './generated/mistica-icons/icon-dist
 export {default as IconDnaFilled} from './generated/mistica-icons/icon-dna-filled';
 export {default as IconDnaLight} from './generated/mistica-icons/icon-dna-light';
 export {default as IconDnaRegular} from './generated/mistica-icons/icon-dna-regular';
+export {default as IconDocumentInformationFilled} from './generated/mistica-icons/icon-document-information-filled';
+export {default as IconDocumentInformationLight} from './generated/mistica-icons/icon-document-information-light';
+export {default as IconDocumentInformationRegular} from './generated/mistica-icons/icon-document-information-regular';
 export {default as IconDocumentOtherFilled} from './generated/mistica-icons/icon-document-other-filled';
 export {default as IconDocumentOtherLight} from './generated/mistica-icons/icon-document-other-light';
 export {default as IconDocumentOtherRegular} from './generated/mistica-icons/icon-document-other-regular';
@@ -1392,6 +1396,9 @@ export {default as IconInternetPendriveFilled} from './generated/mistica-icons/i
 export {default as IconInternetPendriveLight} from './generated/mistica-icons/icon-internet-pendrive-light';
 export {default as IconInternetPendriveRegular} from './generated/mistica-icons/icon-internet-pendrive-regular';
 export {default as IconInternetRegular} from './generated/mistica-icons/icon-internet-regular';
+export {default as IconInternetRoamingFilled} from './generated/mistica-icons/icon-internet-roaming-filled';
+export {default as IconInternetRoamingLight} from './generated/mistica-icons/icon-internet-roaming-light';
+export {default as IconInternetRoamingRegular} from './generated/mistica-icons/icon-internet-roaming-regular';
 export {default as IconIntranetFilled} from './generated/mistica-icons/icon-intranet-filled';
 export {default as IconIntranetLight} from './generated/mistica-icons/icon-intranet-light';
 export {default as IconIntranetRegular} from './generated/mistica-icons/icon-intranet-regular';
@@ -1584,6 +1591,9 @@ export {default as IconMobileDeviceRegular} from './generated/mistica-icons/icon
 export {default as IconMobileEuroFilled} from './generated/mistica-icons/icon-mobile-euro-filled';
 export {default as IconMobileEuroLight} from './generated/mistica-icons/icon-mobile-euro-light';
 export {default as IconMobileEuroRegular} from './generated/mistica-icons/icon-mobile-euro-regular';
+export {default as IconMobileInformationFilled} from './generated/mistica-icons/icon-mobile-information-filled';
+export {default as IconMobileInformationLight} from './generated/mistica-icons/icon-mobile-information-light';
+export {default as IconMobileInformationRegular} from './generated/mistica-icons/icon-mobile-information-regular';
 export {default as IconMobilePauseFilled} from './generated/mistica-icons/icon-mobile-pause-filled';
 export {default as IconMobilePauseLight} from './generated/mistica-icons/icon-mobile-pause-light';
 export {default as IconMobilePauseRegular} from './generated/mistica-icons/icon-mobile-pause-regular';
@@ -1966,6 +1976,9 @@ export {default as IconSdFilled} from './generated/mistica-icons/icon-sd-filled'
 export {default as IconSdLight} from './generated/mistica-icons/icon-sd-light';
 export {default as IconSdRegular} from './generated/mistica-icons/icon-sd-regular';
 export {default as IconSeaLight} from './generated/mistica-icons/icon-sea-light';
+export {default as IconSearchAiFilled} from './generated/mistica-icons/icon-search-ai-filled';
+export {default as IconSearchAiLight} from './generated/mistica-icons/icon-search-ai-light';
+export {default as IconSearchAiRegular} from './generated/mistica-icons/icon-search-ai-regular';
 export {default as IconSearchCloudFilled} from './generated/mistica-icons/icon-search-cloud-filled';
 export {default as IconSearchCloudLight} from './generated/mistica-icons/icon-search-cloud-light';
 export {default as IconSearchCloudRegular} from './generated/mistica-icons/icon-search-cloud-regular';

package/src/package-version.tsx

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

package/src/radio-button.tsx

@@ -44,6 +44,7 @@ type PropsRender = {
     }) => React.ReactNode;
     children?: undefined;
     dataAttributes?: DataAttributes;
+    className?: string;
     'aria-label'?: string;
     'aria-labelledby'?: string;
 };
@@ -54,6 +55,7 @@ type PropsChildren = {
     children?: React.ReactNode;
     render?: undefined;
     dataAttributes?: DataAttributes;
+    className?: string;
     'aria-label'?: string;
     'aria-labelledby'?: string;
 };
@@ -62,6 +64,7 @@ const RadioButton = ({
     value,
     id,
     dataAttributes,
+    className,
     'aria-labelledby': ariaLabelledby,
     'aria-label': ariaLabel,
     ...rest
@@ -171,7 +174,10 @@ const RadioButton = ({
                 }
             }}
             onKeyDown={disabled ? undefined : handleKeyDown}
-            className={disabled ? styles.radioButtonContainerDisabled : styles.radioButton}
+            className={classnames(
+                disabled ? styles.radioButtonContainerDisabled : styles.radioButton,
+                className
+            )}
             {...getPrefixedDataAttributes({testid: 'RadioButton', ...dataAttributes})}
         >
             {rest.render ? (

package/src/skins/blau.tsx

@@ -708,6 +708,11 @@ export const getBlauSkin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'light',
             },
+            headerPretitle: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
             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}},

package/src/skins/defaults.tsx

@@ -24,6 +24,11 @@ export const defaultTextPresetsConfig: TextPresetsConfig = {
     cardDescriptionSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
     cardPretitleDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
     cardPretitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+    headerPretitle: {
+        lineHeight: {desktop: 24, mobile: 22},
+        size: {desktop: 18, mobile: 16},
+        weight: 'regular',
+    },
     cardSubtitleDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
     cardSubtitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
     cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},

package/src/skins/esimflag.tsx

@@ -712,6 +712,11 @@ export const getEsimflagSkin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'bold',
             },
+            headerPretitle: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
             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}},

package/src/skins/movistar.tsx

@@ -719,6 +719,11 @@ export const getMovistarSkin: GetKnownSkin = () => {
                 size: {desktop: 20, mobile: 20},
                 weight: 'bold',
             },
+            headerPretitle: {
+                lineHeight: {desktop: 24, mobile: 22},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
             indicator: {weight: 'medium'},
             inputHelperText: {lineHeight: {desktop: 20, mobile: 20}, size: {desktop: 14, mobile: 14}},
             inputLabel: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},

package/src/skins/o2.tsx

@@ -715,6 +715,11 @@ export const getO2Skin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'bold',
             },
+            headerPretitle: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
             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}},

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

@@ -375,6 +375,7 @@ const textPresets: ToThemeTokens<TextPresetsConfig> = {
         size: '',
         weight: '',
     },
+    headerPretitle: {lineHeight: '', size: '', weight: ''},
 };
 
 const spacing: ToThemeTokens<SpacingConfig> = {

package/src/skins/telefonica.tsx

@@ -716,6 +716,11 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
                 size: {desktop: 28, mobile: 20},
                 weight: 'regular',
             },
+            headerPretitle: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
+            },
             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}},

package/src/skins/types/index.tsx

@@ -60,6 +60,7 @@ export type TextPresetsConfig = {
     cardDescriptionSnap: TextSizeTokenConfig;
     cardPretitleDefault: TextSizeTokenConfig;
     cardPretitleSnap: TextSizeTokenConfig;
+    headerPretitle: TextTokenConfig;
     cardSubtitleDefault: TextSizeTokenConfig;
     cardSubtitleSnap: TextSizeTokenConfig;
     cardTitleDefault: TextSizeTokenConfig;