@telefonica/mistica 17.1.0 → 17.3.0

package/src/credit-card-fields.tsx

@@ -18,6 +18,7 @@ type CreditCardFieldsProps = {
     cvvFieldName?: string;
     acceptedCards?: CardOptions;
     children?: void;
+    small?: boolean;
 };
 
 const CreditCardFields = ({
@@ -25,6 +26,7 @@ const CreditCardFields = ({
     expirationFieldName = 'ccExp',
     cvvFieldName = 'ccCvv',
     acceptedCards,
+    small,
 }: CreditCardFieldsProps): JSX.Element => {
     const {values} = useForm();
     const {texts, t} = useTheme();
@@ -36,17 +38,20 @@ const CreditCardFields = ({
                 acceptedCards={acceptedCards}
                 name={numberFieldName}
                 label={texts.formCreditCardNumberLabel || t(tokens.formCreditCardNumberLabel)}
+                small={small}
             />
             <DoubleField layout="60/40">
                 <CreditCardExpirationField
                     name={expirationFieldName}
                     label={texts.formCreditCardExpirationLabel || t(tokens.formCreditCardExpirationLabel)}
+                    small={small}
                 />
                 <CvvField
                     acceptedCards={acceptedCards}
                     name={cvvFieldName}
                     label={texts.formCreditCardCvvLabel || t(tokens.formCreditCardCvvLabel)}
                     maxLength={cvvLength}
+                    small={small}
                 />
             </DoubleField>
         </Stack>

package/src/date-field.css.ts

@@ -9,6 +9,6 @@ export const iconContainer = style({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    right: `calc(${fieldRightPadding}px + (${iconButtonSize} - ${iconSize.default}) / 2)`,
+    right: `calc(${fieldRightPadding} + (${iconButtonSize} - ${iconSize.default}) / 2)`,
     marginRight: -12,
 });

package/src/icon-button.css.ts

@@ -280,24 +280,24 @@ export const iconButtonTokens = styleVariants({
     'danger-transparent-default': {
         vars: {
             [background]: 'transparent',
-            [backgroundHover]: skinVars.colors.backgroundContainerHover,
-            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundPressed,
+            [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundPressed,
             [iconColor]: skinVars.colors.error,
         },
     },
     'danger-transparent-brand': {
         vars: {
             [background]: skinVars.colors.buttonLinkDangerBackgroundBrand,
-            [backgroundHover]: skinVars.colors.backgroundContainerHover,
-            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundBrandPressed,
+            [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundBrandPressed,
             [iconColor]: skinVars.colors.error,
         },
     },
     'danger-transparent-negative': {
         vars: {
             [background]: skinVars.colors.buttonLinkDangerBackgroundBrand,
-            [backgroundHover]: skinVars.colors.backgroundContainerHover,
-            [backgroundActive]: skinVars.colors.backgroundContainerPressed,
+            [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundNegativePressed,
+            [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundNegativePressed,
             [iconColor]: skinVars.colors.error,
         },
     },

package/src/list.tsx

@@ -36,7 +36,7 @@ import type {DataAttributes, TrackingEvent, IconProps} from './utils/types';
 import type {ExclusifyUnion} from './utils/utility-types';
 
 type ListContextType = {small: boolean};
-const ListContext = React.createContext<ListContextType>({small: false});
+export const ListContext = React.createContext<ListContextType>({small: false});
 
 type Right = (({centerY}: {centerY: boolean}) => React.ReactNode) | React.ReactNode;
 

package/src/logo-movistar.tsx

@@ -77,7 +77,7 @@ const MovistarLogoImage = ({
 
     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" />
+            <path d="M63.9489 19.7664C62.3545 16.0836 59.7935 13.7229 56.5087 13.5152C52.8722 13.2842 48.7008 15.6958 46.5119 20.3736C44.4945 24.6854 42.8797 29.1134 41.9015 31.3724C40.9088 33.6634 39.4496 35.0755 37.2054 35.3123C34.4613 35.6014 32.098 33.6097 30.367 30.7724C28.8568 28.2984 25.8656 23.5871 24.2654 22.0036C22.7611 20.5175 21.0445 18.655 17.4676 18.7131C14.6407 18.7582 9.42423 20.1514 7.04057 29.879C6.00281 34.1181 5.60166 38.536 6.48971 43.7935C7.30946 48.6442 8.76145 52.8311 9.73962 55.1381C10.0768 55.9327 10.5986 56.7622 11.0027 57.2721C12.164 58.7394 14.0971 58.645 14.9095 58.2455C15.7947 57.8097 16.8121 56.7579 16.4444 54.3565C16.2671 53.1957 15.7525 51.4989 15.4633 50.5546C14.5767 47.6593 13.3965 44.1654 13.2933 41.6768C13.1552 38.3486 14.4691 37.9127 15.3412 37.721C16.8077 37.3985 18.0374 39.0081 19.2059 41.026C20.5998 43.4332 22.9893 47.6999 24.9383 50.9585C26.697 53.9003 29.944 57.0499 35.159 56.8334C40.4742 56.6141 44.3927 54.586 46.4116 48.2041C47.9217 43.4288 48.9522 39.8609 50.6077 36.2072C52.5132 32.0058 55.0538 29.757 57.1933 30.4427C59.1801 31.0804 59.6758 33.0213 59.7005 35.8745C59.7223 38.398 59.4301 41.1814 59.2019 43.2255C59.1191 43.9678 58.9708 45.4598 59.0319 46.2879C59.1525 47.9164 59.8574 49.5435 61.6917 49.8035C63.6466 50.081 65.2148 48.5193 65.8413 46.6322C66.0884 45.8884 66.2991 44.7494 66.4125 43.9417C66.9866 39.8638 67.1363 37.1224 66.8776 32.9487C66.5738 28.0689 65.6189 23.6191 63.9518 19.7678L63.9489 19.7664Z" />
         </g>
     );
 };

package/src/menu.css.ts

@@ -95,6 +95,20 @@ export const menuItemHovered = style({
     },
 });
 
+export const menuItemHoveredDestructive = style({
+    transition: 'background-color 0.1s ease-in-out',
+    backgroundColor: skinVars.colors.buttonLinkDangerBackgroundPressed,
+    ':active': {
+        backgroundColor: skinVars.colors.buttonLinkDangerBackgroundPressed,
+    },
+    '@media': {
+        [mq.touchableOnly]: {
+            backgroundColor: 'transparent',
+            transition: 'none',
+        },
+    },
+});
+
 export const menuItemEnabled = style({
     '@media': {
         [mq.touchableOnly]: {
@@ -132,7 +146,7 @@ export const itemTextContent = style({
     gap: 2,
 });
 
-export const iconContainer = style({
+export const assetContainer = style({
     display: 'flex',
     paddingRight: 8,
 });

package/src/menu.tsx

@@ -18,6 +18,7 @@ import {CSSTransition} from 'react-transition-group';
 import {combineRefs} from './utils/common';
 import {applyCssVars} from './utils/css';
 import {isRunningAcceptanceTest} from './utils/platform';
+import * as mediaStyles from './image.css';
 
 import type {ExclusifyUnion} from './utils/utility-types';
 import type {DataAttributes, IconProps} from './utils/types';
@@ -55,6 +56,7 @@ interface MenuItemBaseProps {
     label: string;
     description?: string;
     Icon?: (props: IconProps) => JSX.Element;
+    asset?: React.ReactElement;
     destructive?: boolean;
     disabled?: boolean;
     dataAttributes?: DataAttributes;
@@ -95,6 +97,7 @@ type MenuItemProps = ExclusifyUnion<MenuItemOnPressProps | MenuItemHrefProps | M
 export const MenuItem = ({
     label,
     Icon,
+    asset,
     destructive,
     disabled,
     onPress,
@@ -135,9 +138,19 @@ export const MenuItem = ({
 
     const renderItemContent = (labelId?: string) => (
         <div className={styles.itemContent}>
-            {Icon && (
-                <div className={styles.iconContainer}>
-                    <Icon size={24} color={contentColor} />
+            {(asset || Icon) && (
+                <div
+                    className={styles.assetContainer}
+                    {...(asset ? getPrefixedDataAttributes({testid: 'asset'}) : {})}
+                    style={
+                        asset
+                            ? applyCssVars({
+                                  [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
+                              })
+                            : undefined
+                    }
+                >
+                    {asset || (Icon && <Icon size={24} color={contentColor} />)}
                 </div>
             )}
             {renderTextContent(labelId)}
@@ -227,7 +240,10 @@ export const MenuItem = ({
             className={classnames(styles.menuItem, {
                 [styles.menuItemEnabled]: !disabled,
                 [styles.menuItemDisabled]: disabled,
-                [styles.menuItemHovered]: !disabled && itemIndex !== null && focusedItem === itemIndex,
+                [styles.menuItemHovered]:
+                    !disabled && !destructive && itemIndex !== null && focusedItem === itemIndex,
+                [styles.menuItemHoveredDestructive]:
+                    !disabled && destructive && itemIndex !== null && focusedItem === itemIndex,
             })}
             onMouseMove={() => setFocusedItem(disabled ? null : itemIndex)}
             onMouseLeave={() => setFocusedItem(null)}

package/src/mosaic.css.ts

@@ -71,3 +71,7 @@ export const fourItemsContainer = style({
         },
     },
 });
+
+export const horizontalMosaicPageContainer = style({
+    height: '100%',
+});

package/src/mosaic.tsx

@@ -22,7 +22,9 @@ const renderItem = (item: MosaicItem, gridMode: MosaicItemGridMode) => {
 
 const HorizontalMosaicPage = ({items, isEven}: HorizontalMosaicPageProps) => {
     return (
-        <div className={items.length === 1 ? styles.singleItemRowContainer : styles.squareContainer}>
+        <div
+            className={`${items.length === 1 ? styles.singleItemRowContainer : styles.squareContainer} ${styles.horizontalMosaicPageContainer}`}
+        >
             <Grid gap={GRID_GAP} rows={2} columns={2} height="100%">
                 {items.length === 3 ? (
                     <>
@@ -85,7 +87,7 @@ export const HorizontalMosaic = ({
             aria-labelledby={ariaLabelledby}
             dataAttributes={{...dataAttributes, testid: 'horizontal-mosaic'}}
             items={pages.map((items, index) => (
-                <Grid>
+                <Grid height="100%">
                     <HorizontalMosaicPage items={items} isEven={index % 2 === 0} key={index} />
                 </Grid>
             ))}

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.1.0' as string;
+export const PACKAGE_VERSION = '17.3.0' as string;

package/src/select.css.ts

@@ -153,7 +153,7 @@ const selectTextBase = style([
     {
         pointerEvents: 'none',
         top: 1, // for border
-        left: fieldLeftPadding + 1, // +1 for border
+        left: `calc(${fieldLeftPadding} + 1px)`, // +1 for border
         right: `calc(${iconButtonSize} + ${fieldEndIconGap}px + 1px)`, // +1 for border
         fontSize: fieldVars.mobileFontSize,
         lineHeight: fieldVars.mobileLineHeight,

package/src/select.tsx

@@ -10,7 +10,7 @@ import {TextFieldBaseAutosuggest} from './text-field-base';
 import Overlay from './overlay';
 import {isAndroid, isIos} from './utils/platform';
 import {cancelEvent} from './utils/dom';
-import {Text3} from './text';
+import {Text2, Text3} from './text';
 import * as styles from './select.css';
 import * as textStyles from './text-field-base.css';
 import {Portal} from './portal';
@@ -43,6 +43,7 @@ export type SelectProps = {
     native?: boolean;
     children?: void;
     dataAttributes?: DataAttributes;
+    small?: boolean;
 };
 
 const Select = ({
@@ -63,6 +64,7 @@ const Select = ({
     autoFocus = false,
     native,
     dataAttributes,
+    small,
 }: SelectProps): JSX.Element => {
     const inputRef = React.useRef<HTMLSelectElement | HTMLInputElement>(null);
     const focusableRef = React.useRef<HTMLSelectElement | HTMLDivElement>(null);
@@ -95,7 +97,7 @@ const Select = ({
         register,
     } = useForm();
     const {platformOverrides} = useTheme();
-    const cssVarStyles = useApplyCssVars();
+    const cssVarStyles = useApplyCssVars(small);
 
     const shouldUseNative =
         native ||
@@ -314,6 +316,8 @@ const Select = ({
 
     const selectedValue = valueState ?? value;
 
+    const MenuText = small ? Text2 : Text3;
+
     return (
         <ThemeVariant variant="default">
             {shouldUseNative || isServerSide ? (
@@ -323,6 +327,7 @@ const Select = ({
                     fieldRef={fieldRef}
                     fullWidth={fullWidth}
                     dataAttributes={{testid: 'Select', ...dataAttributes}}
+                    small={small}
                 >
                     {label && (
                         <Label
@@ -430,6 +435,7 @@ const Select = ({
                             inputRef={inputRef}
                             fieldRef={fieldRef}
                             dataAttributes={{testid: 'Select', ...dataAttributes}}
+                            small={small}
                         />
 
                         <div
@@ -498,7 +504,7 @@ const Select = ({
                                                 }
                                             }}
                                         >
-                                            <Text3 regular>{text}</Text3>
+                                            <MenuText regular>{text}</MenuText>
                                         </li>
                                     ))}
                                 </ul>

package/src/skins/blau.tsx

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {BLAU_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
@@ -675,6 +681,7 @@ export const getBlauSkin: GetKnownSkin = () => {
             popup: '8px',
             sheet: '8px',
             mediaSmall: '8px',
+            snackbar: '8px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -735,13 +742,7 @@ export const getBlauSkin: GetKnownSkin = () => {
             brandLoadingScreen: 'default',
         },
         componentProperties: {
-            showBoxedBorder: {
-                default: true,
-                brand: true,
-                negative: true,
-                alternative: true,
-                media: true,
-            },
+            showBoxedBorder: {default: true, brand: true, negative: true, alternative: true, media: true},
         },
         spacing: {
             buttonDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
@@ -752,7 +753,12 @@ export const getBlauSkin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 24},
                 right: {mobile: 16, desktop: 24},
             },
-            inputPadding: {top: {mobile: 8, desktop: 8}, bottom: {mobile: 8, desktop: 8}},
+            inputPadding: {
+                top: {mobile: 8, desktop: 8},
+                right: {mobile: 16, desktop: 16},
+                bottom: {mobile: 8, desktop: 8},
+                left: {mobile: 12, desktop: 12},
+            },
             tagPadding: {top: {mobile: 4, desktop: 4}, bottom: {mobile: 4, desktop: 4}},
             feedbackScreenPadding: {
                 top: {mobile: 64, desktop: 64},

package/src/skins/defaults.tsx

@@ -74,6 +74,7 @@ export const defaultBorderRadiiConfig: BorderRadiiConfig = {
     mediaSmall: '8px',
     chip: '16px',
     tag: '24px',
+    snackbar: '8px',
 };
 
 export const defaultThemeVariantsConfig: ThemeVariantsConfig = {
@@ -100,7 +101,12 @@ export const defaultSpacing: SpacingConfig = {
         left: {mobile: 16, desktop: 16},
         right: {mobile: 16, desktop: 16},
     },
-    inputPadding: {top: {mobile: 9, desktop: 3}, bottom: {mobile: 9, desktop: 3}},
+    inputPadding: {
+        top: {mobile: 9, desktop: 3},
+        bottom: {mobile: 9, desktop: 3},
+        left: {mobile: 12, desktop: 12},
+        right: {mobile: 16, desktop: 16},
+    },
     tagPadding: {top: {mobile: 2, desktop: 2}, bottom: {mobile: 2, desktop: 2}},
     feedbackScreenPadding: {
         top: {mobile: 64, desktop: 40},

package/src/skins/esimflag.tsx

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {ESIMFLAG_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
@@ -679,6 +685,7 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             popup: '16px',
             sheet: '16px',
             mediaSmall: '8px',
+            snackbar: '16px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -739,13 +746,7 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             brandLoadingScreen: 'inverse',
         },
         componentProperties: {
-            showBoxedBorder: {
-                default: true,
-                brand: true,
-                negative: true,
-                alternative: true,
-                media: true,
-            },
+            showBoxedBorder: {default: true, brand: true, negative: true, alternative: true, media: true},
         },
         spacing: {
             buttonDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
@@ -756,7 +757,12 @@ export const getEsimflagSkin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 24},
                 right: {mobile: 16, desktop: 24},
             },
-            inputPadding: {top: {mobile: 8, desktop: 8}, bottom: {mobile: 8, desktop: 8}},
+            inputPadding: {
+                top: {mobile: 8, desktop: 8},
+                right: {mobile: 16, desktop: 16},
+                bottom: {mobile: 8, desktop: 8},
+                left: {mobile: 12, desktop: 12},
+            },
             tagPadding: {top: {mobile: 4, desktop: 4}, bottom: {mobile: 4, desktop: 4}},
             feedbackScreenPadding: {
                 top: {mobile: 64, desktop: 64},

package/src/skins/movistar.tsx

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {MOVISTAR_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
@@ -686,6 +692,7 @@ export const getMovistarSkin: GetKnownSkin = () => {
             popup: '8px',
             sheet: '16px',
             mediaSmall: '8px',
+            snackbar: '8px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -746,13 +753,7 @@ export const getMovistarSkin: GetKnownSkin = () => {
             brandLoadingScreen: 'default',
         },
         componentProperties: {
-            showBoxedBorder: {
-                default: true,
-                brand: true,
-                negative: true,
-                alternative: true,
-                media: true,
-            },
+            showBoxedBorder: {default: true, brand: true, negative: true, alternative: true, media: true},
         },
         spacing: {
             buttonDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
@@ -763,7 +764,12 @@ export const getMovistarSkin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 16},
                 right: {mobile: 16, desktop: 16},
             },
-            inputPadding: {top: {mobile: 9, desktop: 3}, bottom: {mobile: 9, desktop: 3}},
+            inputPadding: {
+                top: {mobile: 9, desktop: 3},
+                right: {mobile: 16, desktop: 16},
+                bottom: {mobile: 9, desktop: 3},
+                left: {mobile: 12, desktop: 12},
+            },
             tagPadding: {top: {mobile: 2, desktop: 2}, bottom: {mobile: 2, desktop: 2}},
             feedbackScreenPadding: {
                 top: {mobile: 64, desktop: 40},

package/src/skins/o2.tsx

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {O2_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
@@ -682,6 +688,7 @@ export const getO2Skin: GetKnownSkin = () => {
             popup: '8px',
             sheet: '16px',
             mediaSmall: '8px',
+            snackbar: '8px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -742,13 +749,7 @@ export const getO2Skin: GetKnownSkin = () => {
             brandLoadingScreen: 'inverse',
         },
         componentProperties: {
-            showBoxedBorder: {
-                default: true,
-                brand: true,
-                negative: true,
-                alternative: true,
-                media: true,
-            },
+            showBoxedBorder: {default: true, brand: true, negative: true, alternative: true, media: true},
         },
         spacing: {
             buttonDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
@@ -759,7 +760,12 @@ export const getO2Skin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 24},
                 right: {mobile: 16, desktop: 24},
             },
-            inputPadding: {top: {mobile: 8, desktop: 8}, bottom: {mobile: 8, desktop: 8}},
+            inputPadding: {
+                top: {mobile: 8, desktop: 8},
+                right: {mobile: 16, desktop: 16},
+                bottom: {mobile: 8, desktop: 8},
+                left: {mobile: 12, desktop: 12},
+            },
             tagPadding: {top: {mobile: 4, desktop: 4}, bottom: {mobile: 4, desktop: 4}},
             feedbackScreenPadding: {
                 top: {mobile: 64, desktop: 64},

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

@@ -323,6 +323,7 @@ const borderRadii: BorderRadiiConfig = {
     avatar: '',
     mediaSmall: '',
     tag: '',
+    snackbar: '',
 };
 
 type ToThemeTokens<T> = T extends {mobile: number; desktop: number}
@@ -378,7 +379,7 @@ const spacing: ToThemeTokens<SpacingConfig> = {
     buttonDefaultPadding: {left: '', right: ''},
     buttonSmallPadding: {left: '', right: ''},
     cardDefaultPadding: {left: '', right: '', top: '', bottom: ''},
-    inputPadding: {top: '', bottom: ''},
+    inputPadding: {top: '', bottom: '', left: '', right: ''},
     tagPadding: {top: '', bottom: ''},
     feedbackScreenPadding: {top: '', bottom: '', left: '', right: ''},
     heroPadding: {top: '', bottom: ''},

package/src/skins/telefonica.tsx

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {TELEFONICA_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
@@ -683,6 +689,7 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             popup: '4px',
             sheet: '0px',
             mediaSmall: '2px',
+            snackbar: '4px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -779,13 +786,7 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             brandLoadingScreen: 'inverse',
         },
         componentProperties: {
-            showBoxedBorder: {
-                default: true,
-                brand: true,
-                negative: true,
-                alternative: true,
-                media: true,
-            },
+            showBoxedBorder: {default: true, brand: true, negative: true, alternative: true, media: true},
         },
         spacing: {
             buttonDefaultPadding: {left: {mobile: 20, desktop: 20}, right: {mobile: 20, desktop: 20}},
@@ -796,7 +797,12 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 24},
                 right: {mobile: 16, desktop: 24},
             },
-            inputPadding: {top: {mobile: 8, desktop: 8}, bottom: {mobile: 8, desktop: 8}},
+            inputPadding: {
+                top: {mobile: 8, desktop: 8},
+                right: {mobile: 16, desktop: 16},
+                bottom: {mobile: 8, desktop: 8},
+                left: {mobile: 12, desktop: 12},
+            },
             tagPadding: {top: {mobile: 4, desktop: 4}, bottom: {mobile: 4, desktop: 4}},
             feedbackScreenPadding: {
                 top: {mobile: 64, desktop: 64},

package/src/skins/types/colors.tsx

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 export type Colors = {
     background: string;
     backgroundAlternative: string;
@@ -46,6 +52,10 @@ export type Colors = {
     border: string;
     borderHigh: string;
     borderSelected: string;
+    completedStep: string;
+    completedStepInverse: string;
+    completedStepNegative: string;
+    completedStepBrand: string;
     coverBackgroundHover: string;
     coverBackgroundPressed: string;
     buttonDangerBackground: string;
@@ -146,10 +156,6 @@ export type Colors = {
     inputBorderInverse: string;
     inputBorderNegative: string;
     inputBorderBrand: string;
-    completedStep: string;
-    completedStepInverse: string;
-    completedStepNegative: string;
-    completedStepBrand: string;
     control: string;
     controlActivated: string;
     controlInverse: string;
@@ -207,13 +213,13 @@ export type Colors = {
     textSecondaryNegative: string;
     textSecondaryBrand: string;
     textSecondaryMedia: string;
-    success: string;
-    warning: string;
     error: string;
     textError: string;
     textErrorInverse: string;
     textErrorNegative: string;
     textErrorBrand: string;
+    success: string;
+    warning: string;
     promo: string;
     highlight: string;
     successLow: string;

package/src/skins/types/index.tsx

@@ -105,13 +105,14 @@ export type BorderRadiiConfig = {
     avatar: string;
     mediaSmall: string;
     tag: string;
+    snackbar: string;
 };
 
 export type SpacingConfig = {
     buttonDefaultPadding: PaddingXValues;
     buttonSmallPadding: PaddingXValues;
     cardDefaultPadding: PaddingValues;
-    inputPadding: PaddingYValues;
+    inputPadding: PaddingValues;
     tagPadding: PaddingYValues;
     feedbackScreenPadding: PaddingValues;
     heroPadding: PaddingYValues;