@telefonica/mistica 17.0.0 → 17.2.0

package/src/skins/vivo.tsx

@@ -48,6 +48,15 @@ export const getVivoSkin: GetKnownSkin = () => {
         colors: {
             background: palette.white,
             backgroundAlternative: palette.grey1,
+            backgroundSelected: applyAlpha(palette.vivoPurple, 0.08),
+            backgroundSelectedHover: applyAlpha(palette.vivoPurple, 0.12),
+            backgroundSelectedPressed: applyAlpha(palette.vivoPurple, 0.16),
+            backgroundSelectedBrand: applyAlpha(palette.darkModeBlack, 0.16),
+            backgroundSelectedBrandHover: applyAlpha(palette.darkModeBlack, 0.24),
+            backgroundSelectedBrandPressed: applyAlpha(palette.darkModeBlack, 0.32),
+            backgroundSelectedNegative: applyAlpha(palette.white, 0.2),
+            backgroundSelectedNegativeHover: applyAlpha(palette.white, 0.28),
+            backgroundSelectedNegativePressed: applyAlpha(palette.white, 0.35),
             backgroundBrand: palette.vivoPurple,
             backgroundNegative: palette.vivoPurpleDark,
             backgroundBrandSecondary: palette.vivoPurpleLight80,
@@ -103,6 +112,13 @@ export const getVivoSkin: GetKnownSkin = () => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.1),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.1),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.1),
+            buttonLinkNeutralBackgroundPressed: palette.grey2,
+            buttonLinkNeutralBackgroundBrand: palette.white,
+            buttonLinkNeutralBackgroundBrandPressed: palette.grey1,
+            buttonLinkNeutralBackgroundNegative: palette.white,
+            buttonLinkNeutralBackgroundNegativePressed: palette.grey1,
+            buttonLinkNeutralBackgroundMedia: palette.white,
+            buttonLinkNeutralBackgroundMediaPressed: palette.grey1,
             buttonPrimaryBackground: palette.vivoPurple,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -166,6 +182,11 @@ export const getVivoSkin: GetKnownSkin = () => {
             textLinkDanger: palette.pepper,
             textLinkDangerMedia: palette.pepper,
             textLinkSnackbar: palette.vivoPurpleLight20,
+            textLinkNeutral: palette.grey6,
+            textLinkNeutralBrand: palette.grey6,
+            textLinkNeutralNegative: palette.grey6,
+            textLinkNeutralAlternative: palette.grey6,
+            textLinkNeutralMedia: palette.grey6,
             textActivated: palette.vivoPurple,
             textBrand: palette.vivoPurple,
             inputBorder: palette.grey4,
@@ -334,6 +355,15 @@ export const getVivoSkin: GetKnownSkin = () => {
         darkModeColors: {
             background: palette.darkModeBlack,
             backgroundAlternative: palette.darkModeBlack,
+            backgroundSelected: applyAlpha(palette.vivoPurpleLight80, 0.18),
+            backgroundSelectedHover: applyAlpha(palette.vivoPurpleLight80, 0.25),
+            backgroundSelectedPressed: applyAlpha(palette.vivoPurpleLight80, 0.33),
+            backgroundSelectedBrand: applyAlpha(palette.vivoPurpleLight80, 0.18),
+            backgroundSelectedBrandHover: applyAlpha(palette.vivoPurpleLight80, 0.25),
+            backgroundSelectedBrandPressed: applyAlpha(palette.vivoPurpleLight80, 0.33),
+            backgroundSelectedNegative: applyAlpha(palette.vivoPurpleLight80, 0.18),
+            backgroundSelectedNegativeHover: applyAlpha(palette.vivoPurpleLight80, 0.25),
+            backgroundSelectedNegativePressed: applyAlpha(palette.vivoPurpleLight80, 0.33),
             backgroundBrand: palette.darkModeBlack,
             backgroundNegative: palette.darkModeBlack,
             backgroundBrandSecondary: palette.darkModeBlack,
@@ -389,6 +419,13 @@ export const getVivoSkin: GetKnownSkin = () => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.1),
+            buttonLinkNeutralBackgroundPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
             buttonPrimaryBackground: palette.vivoPurpleLight80,
             buttonPrimaryBackgroundInverse: palette.vivoPurpleLight80,
             buttonPrimaryBackgroundNegative: palette.vivoPurpleLight80,
@@ -452,6 +489,11 @@ export const getVivoSkin: GetKnownSkin = () => {
             textLinkDanger: palette.pepper,
             textLinkDangerMedia: palette.pepper,
             textLinkSnackbar: palette.vivoPurpleLight50,
+            textLinkNeutral: palette.grey2,
+            textLinkNeutralBrand: palette.grey2,
+            textLinkNeutralNegative: palette.grey2,
+            textLinkNeutralAlternative: palette.grey2,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.vivoPurpleLight80,
             textBrand: palette.vivoPurpleLight80,
             inputBorder: palette.darkModeGrey5,
@@ -630,6 +672,7 @@ export const getVivoSkin: GetKnownSkin = () => {
             popup: '16px',
             sheet: '24px',
             mediaSmall: '12px',
+            snackbar: '16px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -713,6 +756,9 @@ export const getVivoSkin: GetKnownSkin = () => {
             successFeedback: 'inverse',
             brandLoadingScreen: 'inverse',
         },
+        componentProperties: {
+            showBoxedBorder: {default: true, brand: true, negative: true, alternative: true, media: true},
+        },
         spacing: {
             buttonDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
             buttonSmallPadding: {left: {mobile: 12, desktop: 12}, right: {mobile: 12, desktop: 12}},
@@ -722,7 +768,12 @@ export const getVivoSkin: 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},
@@ -738,6 +789,8 @@ export const getVivoSkin: GetKnownSkin = () => {
                 left: {mobile: 16, desktop: 40},
                 right: {mobile: 16, desktop: 40},
             },
+            boxedDefaultPadding: {left: {mobile: 16, desktop: 16}, right: {mobile: 16, desktop: 16}},
+            responsiveLayoutMargin: {mobile: 16, desktop: 48},
         },
     };
     return skin;

package/src/snackbar.css.ts

@@ -34,7 +34,7 @@ export const snackbarOpen = style({
 export const wrapper = style([
     sprinkles({
         position: 'fixed',
-        borderRadius: vars.borderRadii.popup,
+        borderRadius: vars.borderRadii.snackbar,
     }),
     {
         maxWidth: 800,

package/src/stepper.css.ts

@@ -47,7 +47,7 @@ const currentNumberTextKeyframes = keyframes({
         color: skinVars.colors.textSecondary,
     },
     '100%': {
-        color: skinVars.colors.textPrimaryInverse,
+        color: skinVars.colors.textPrimaryNegative,
     },
 });
 

package/src/stepper.tsx

@@ -104,7 +104,7 @@ const Stepper = ({
                                         weight={textPresets.indicator.weight}
                                         color={
                                             isCurrent
-                                                ? vars.colors.textPrimaryInverse
+                                                ? vars.colors.textPrimaryNegative
                                                 : vars.colors.textSecondary
                                         }
                                         aria-hidden="true"

package/src/switch-component.css.ts

@@ -118,6 +118,8 @@ export const container = style([
     containerBase,
     {
         cursor: 'pointer',
+        display: 'flex',
+        flexDirection: 'column',
     },
 ]);
 export const containerDisabled = style([

package/src/text-field-base.css.ts

@@ -1,5 +1,5 @@
 import {createVar, globalStyle, style} from '@vanilla-extract/css';
-import {iconContainerSize} from './icon-button.css';
+import {bleedArea, iconContainerSize} from './icon-button.css';
 import * as mq from './media-queries.css';
 import {vars as skinVars, vars} from './skins/skin-contract.css';
 import {sprinkles} from './sprinkles.css';
@@ -10,8 +10,8 @@ const borderSize = 1;
 // We need to substract border size from padding because the container has boxSizing: border-box
 export const fieldTopPadding = `calc(${vars.spacing.inputPadding.top} - ${borderSize}px)`;
 export const fieldBottomPadding = `calc(${vars.spacing.inputPadding.bottom} - ${borderSize}px)`;
-export const fieldLeftPadding = 12 - borderSize;
-export const fieldRightPadding = 16 - borderSize;
+export const fieldLeftPadding = `calc(${vars.spacing.inputPadding.left} - ${borderSize}px)`;
+export const fieldRightPadding = `calc(${vars.spacing.inputPadding.right} - ${borderSize}px)`;
 
 export const fieldElementsGap = 12;
 export const fieldEndIconGap = 4;
@@ -331,6 +331,12 @@ export const endIconContainer = style([
     },
 ]);
 
+export const endIconPlaceholder = style({
+    flexShrink: 0,
+    width: `calc(${iconContainerSize.small} - ${bleedArea.small})`,
+    height: iconContainerSize.small,
+});
+
 export const startIcon = style([
     sprinkles({
         paddingRight: fieldElementsGap,

package/src/text-field-base.tsx

@@ -5,7 +5,7 @@ import {useIsomorphicLayoutEffect, useScreenSize, useTheme} from './hooks';
 import {InternalIconButton, InternalToggleIconButton} from './icon-button';
 import {iconSize} from './icon-button.css';
 import {vars} from './skins/skin-contract.css';
-import {Text3} from './text';
+import {Text2, Text3} from './text';
 import * as styles from './text-field-base.css';
 import {FieldContainer, HelperText, Label} from './text-field-components';
 import {fieldVars} from './text-field-base.css';
@@ -137,6 +137,7 @@ export interface CommonFormFieldProps<T = HTMLInputElement> {
     readOnly?: boolean;
     preventCopy?: boolean;
     dataAttributes?: DataAttributes;
+    small?: boolean;
 }
 
 interface TextFieldBaseProps {
@@ -160,6 +161,7 @@ interface TextFieldBaseProps {
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
     endIconOverlay?: React.ReactNode;
+    endIconSpaceReserved?: boolean;
     style?: React.CSSProperties;
     value?: string;
     inputRef?: React.Ref<HTMLInputElement | HTMLSelectElement>;
@@ -185,6 +187,7 @@ interface TextFieldBaseProps {
     max?: string;
     role?: string;
     dataAttributes?: DataAttributes;
+    small?: boolean;
 }
 
 const preventCopyHandler = (e: React.ClipboardEvent<HTMLInputElement>) => {
@@ -208,6 +211,7 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
             startIcon,
             endIcon,
             endIconOverlay,
+            endIconSpaceReserved,
             shrinkLabel,
             multiline = false,
             focus,
@@ -220,6 +224,7 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
             preventCopy,
             showOptionalLabel = true,
             required,
+            small,
             ...rest
         },
         ref
@@ -307,6 +312,10 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
 
         const startIconWidth = `calc(${iconSize.small} + ${styles.fieldElementsGap}px)`;
         const endIconWidth = `calc(${styles.iconButtonSize} + ${styles.fieldEndIconGap}px)`;
+        const hasEndIcon = !!endIcon;
+        const reservesRightSpace = hasEndIcon || endIconSpaceReserved;
+
+        const ValueText = small ? Text2 : Text3;
 
         const isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
         const scale = isShrinked
@@ -315,11 +324,11 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                 : fieldVars.labelScaleDesktop
             : 1;
         const labelStyle = {
-            left: `calc(${styles.fieldLeftPadding}px + ${startIcon ? startIconWidth : '0px'})`,
+            left: `calc(${styles.fieldLeftPadding} + ${startIcon ? startIconWidth : '0px'})`,
             // shrinking means applying a scale transformation, so width will be proportionally reduced.
             // Let's keep the original width.
-            width: `calc((100% - ${styles.fieldLeftPadding}px - ${startIcon ? startIconWidth : '0px'} - ${
-                endIcon || endIconOverlay ? endIconWidth : `${styles.fieldRightPadding}px`
+            width: `calc((100% - ${styles.fieldLeftPadding} - ${startIcon ? startIconWidth : '0px'} - ${
+                endIcon || endIconOverlay ? endIconWidth : styles.fieldRightPadding
             }) / ${scale})`,
         };
 
@@ -354,6 +363,7 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                 readOnly={rest.readOnly}
                 dataAttributes={dataAttributes}
                 focus={focus}
+                small={small}
             >
                 <ThemeVariant variant="default">
                     {startIcon && (
@@ -373,9 +383,9 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                                 opacity: inputState === 'default' ? 0 : 1,
                             }}
                         >
-                            <Text3 color={vars.colors.textSecondary} regular wordBreak={false}>
+                            <ValueText color={vars.colors.textSecondary} regular wordBreak={false}>
                                 {prefix}
-                            </Text3>
+                            </ValueText>
                         </div>
                     )}
                     {label && (
@@ -399,7 +409,7 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                                 ...(required && {'aria-required': true}),
                                 ...(error && {'aria-invalid': true}),
                                 style: {
-                                    paddingRight: endIcon
+                                    paddingRight: reservesRightSpace
                                         ? 0
                                         : endIconOverlay
                                           ? endIconWidth
@@ -407,7 +417,7 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                                     paddingLeft: prefix
                                         ? 0
                                         : startIcon
-                                          ? `calc(${startIconWidth} + ${styles.fieldLeftPadding}px)`
+                                          ? `calc(${startIconWidth} + ${styles.fieldLeftPadding})`
                                           : styles.fieldLeftPadding,
                                     ...props.style,
                                     fontFamily,
@@ -472,9 +482,13 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                             })}
                         </Text3>
                     </div>
-                    {endIcon && (
-                        <div className={styles.endIconContainer} data-testid="endIcon">
-                            {endIcon}
+                    {reservesRightSpace && (
+                        <div
+                            className={styles.endIconContainer}
+                            data-testid={hasEndIcon ? 'endIcon' : undefined}
+                            aria-hidden={hasEndIcon ? undefined : true}
+                        >
+                            {endIcon || <div className={styles.endIconPlaceholder} />}
                         </div>
                     )}
                     {endIconOverlay}
@@ -506,6 +520,8 @@ export const TextFieldBaseAutosuggest = React.forwardRef<any, TextFieldBaseProps
         const id = idProp || reactId;
         const autoSuggestId = React.useId();
 
+        const MenuText = props.small ? Text2 : Text3;
+
         const suggestionEmptyCaseText =
             typeof withSuggestionsEmptyCase === 'string'
                 ? withSuggestionsEmptyCase
@@ -579,7 +595,7 @@ export const TextFieldBaseAutosuggest = React.forwardRef<any, TextFieldBaseProps
                                 [styles.menuItemSelected]: isHighlighted,
                             })}
                         >
-                            <Text3 regular>{suggestion}</Text3>
+                            <MenuText regular>{suggestion}</MenuText>
                         </div>
                     )}
                     renderSuggestionsContainer={(options) => {
@@ -593,9 +609,9 @@ export const TextFieldBaseAutosuggest = React.forwardRef<any, TextFieldBaseProps
                         const children =
                             suggestions.length === 0 && withSuggestionsEmptyCase ? (
                                 <div role="status" className={classNames(styles.menuItemBase)}>
-                                    <Text3 regular color={vars.colors.textSecondary}>
+                                    <MenuText regular color={vars.colors.textSecondary}>
                                         {suggestionEmptyCaseText}
-                                    </Text3>
+                                    </MenuText>
                                 </div>
                             ) : (
                                 options.children

package/src/text-field-components.css.ts

@@ -26,7 +26,7 @@ export const labelContainer = style([
                 transform: `translateY(calc(${fieldVars.shrinkedLabelMobileLineHeight} / 2)) scale(1)`,
             },
         },
-        width: `calc(100% - ${fieldLeftPadding}px - ${fieldRightPadding}px)`,
+        width: `calc(100% - ${fieldLeftPadding} - ${fieldRightPadding})`,
     },
 ]);
 
@@ -55,12 +55,12 @@ export const labelText = style([
 export const shrinked = style({
     transform: `translateY(0) scale(${fieldVars.labelScaleDesktop})`,
     lineHeight: `calc(${fieldVars.shrinkedLabelDesktopLineHeight} / ${fieldVars.labelScaleDesktop})`,
-    width: `calc(100% - ${fieldLeftPadding}px - ${fieldRightPadding}px / ${fieldVars.labelScaleDesktop})`,
+    width: `calc(100% - ${fieldLeftPadding} - ${fieldRightPadding} / ${fieldVars.labelScaleDesktop})`,
     '@media': {
         [mq.tabletOrSmaller]: {
             transform: `translateY(0) scale(${fieldVars.labelScaleMobile})`,
             lineHeight: `calc(${fieldVars.shrinkedLabelMobileLineHeight} / ${fieldVars.labelScaleMobile})`,
-            width: `calc(100% - ${fieldLeftPadding}px - ${fieldRightPadding}px / ${fieldVars.labelScaleMobile})`,
+            width: `calc(100% - ${fieldLeftPadding} - ${fieldRightPadding} / ${fieldVars.labelScaleMobile})`,
         },
     },
 });
@@ -129,11 +129,15 @@ export const field = style([
     fieldFocusRing,
 ]);
 
-export const helperContainer = sprinkles({
-    paddingLeft: 12,
-    paddingRight: 16,
-    display: 'flex',
-});
+export const helperContainer = style([
+    sprinkles({
+        display: 'flex',
+    }),
+    {
+        paddingLeft: vars.spacing.inputPadding.left,
+        paddingRight: vars.spacing.inputPadding.right,
+    },
+]);
 
 export const leftHelperText = style([
     sprinkles({

package/src/text-field-components.tsx

@@ -14,14 +14,15 @@ import {applyCssVars, pxToRem} from './utils/css';
 
 import type {DataAttributes} from './utils/types';
 
-export const useApplyCssVars = (): Record<string, string> => {
+export const useApplyCssVars = (small?: boolean): Record<string, string> => {
     const {textPresets} = useTheme();
+    const inputValuePreset = small ? textPresets.text2 : textPresets.inputValue;
 
     return applyCssVars({
-        [fieldVars.mobileFontSize]: pxToRem(textPresets.inputValue.size.mobile),
-        [fieldVars.desktopFontSize]: pxToRem(textPresets.inputValue.size.desktop),
-        [fieldVars.mobileLineHeight]: pxToRem(textPresets.inputValue.lineHeight.mobile),
-        [fieldVars.desktopLineHeight]: pxToRem(textPresets.inputValue.lineHeight.desktop),
+        [fieldVars.mobileFontSize]: pxToRem(inputValuePreset.size.mobile),
+        [fieldVars.desktopFontSize]: pxToRem(inputValuePreset.size.desktop),
+        [fieldVars.mobileLineHeight]: pxToRem(inputValuePreset.lineHeight.mobile),
+        [fieldVars.desktopLineHeight]: pxToRem(inputValuePreset.lineHeight.desktop),
 
         [fieldVars.shrinkedLabelMobileFontSize]: pxToRem(textPresets.inputLabel.size.mobile),
         [fieldVars.shrinkedLabelDesktopFontSize]: pxToRem(textPresets.inputLabel.size.desktop),
@@ -33,8 +34,8 @@ export const useApplyCssVars = (): Record<string, string> => {
         [fieldVars.helperTextMobileLineHeight]: pxToRem(textPresets.inputHelperText.lineHeight.mobile),
         [fieldVars.helperTextDesktopLineHeight]: pxToRem(textPresets.inputHelperText.lineHeight.desktop),
 
-        [fieldVars.labelScaleMobile]: `calc(${textPresets.inputLabel.size.mobile} / ${textPresets.inputValue.size.mobile})`,
-        [fieldVars.labelScaleDesktop]: `calc(${textPresets.inputLabel.size.desktop} / ${textPresets.inputValue.size.desktop})`,
+        [fieldVars.labelScaleMobile]: `calc(${textPresets.inputLabel.size.mobile} / ${inputValuePreset.size.mobile})`,
+        [fieldVars.labelScaleDesktop]: `calc(${textPresets.inputLabel.size.desktop} / ${inputValuePreset.size.desktop})`,
     });
 };
 
@@ -185,6 +186,7 @@ type FieldContainerProps = {
     readOnly?: boolean;
     dataAttributes?: DataAttributes;
     focus?: boolean;
+    small?: boolean;
 };
 
 export const FieldContainer = ({
@@ -198,8 +200,9 @@ export const FieldContainer = ({
     readOnly,
     dataAttributes,
     focus,
+    small,
 }: FieldContainerProps): JSX.Element => {
-    const cssVarStyles = useApplyCssVars();
+    const cssVarStyles = useApplyCssVars(small);
     return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         <div

package/src/theme-context-provider.tsx

@@ -16,6 +16,7 @@ import {vars} from './skins/skin-contract.css';
 import {fromHexToRgb} from './utils/color';
 import {
     defaultBorderRadiiConfig,
+    defaultComponentPropertiesConfig,
     defaultSpacing,
     defaultTextPresetsConfig,
     defaultThemeVariantsConfig,
@@ -201,6 +202,7 @@ const ThemeContextProvider = ({theme, children, as, withoutStyles = false}: Prop
             textPresets,
             spacing: theme.skin.spacing ?? defaultSpacing,
             themeVariants: theme.skin.themeVariants ?? defaultThemeVariantsConfig,
+            componentProperties: theme.skin.componentProperties ?? defaultComponentPropertiesConfig,
             Link: getMisticaLinkComponent(theme.Link),
             isDarkMode: isDarkModeEnabled,
             isIos: getPlatform(platformOverrides) === 'ios',
@@ -242,33 +244,49 @@ const ThemeContextProvider = ({theme, children, as, withoutStyles = false}: Prop
         return Object.assign({}, ...tokenValues) as TextPresetsVars;
     }, [contextTheme]);
 
-    const spacingDesktopVars = React.useMemo(() => {
-        const tokenValues = Object.entries(contextTheme.spacing).map(([token, values]) => {
-            return {
-                [token]: {
-                    ...('top' in values && {top: `${values.top.desktop}px`}),
-                    ...('right' in values && {right: `${values.right.desktop}px`}),
-                    ...('bottom' in values && {bottom: `${values.bottom.desktop}px`}),
-                    ...('left' in values && {left: `${values.left.desktop}px`}),
-                },
-            };
-        });
-        return Object.assign({}, ...tokenValues) as typeof vars.spacing;
-    }, [contextTheme]);
+    const spacingDesktopVars = React.useMemo(
+        () =>
+            Object.fromEntries(
+                Object.entries(contextTheme.spacing).map(([token, values]) => {
+                    if ('desktop' in values) {
+                        return [token, `${(values as any).desktop}px`];
+                    }
 
-    const spacingMobileVars = React.useMemo(() => {
-        const tokenValues = Object.entries(contextTheme.spacing).map(([token, values]) => {
-            return {
-                [token]: {
-                    ...('top' in values && {top: `${values.top.mobile}px`}),
-                    ...('right' in values && {right: `${values.right.mobile}px`}),
-                    ...('bottom' in values && {bottom: `${values.bottom.mobile}px`}),
-                    ...('left' in values && {left: `${values.left.mobile}px`}),
-                },
-            };
-        });
-        return Object.assign({}, ...tokenValues) as typeof vars.spacing;
-    }, [contextTheme]);
+                    return [
+                        token,
+                        {
+                            ...('top' in values ? {top: `${(values as any).top.desktop}px`} : {}),
+                            ...('right' in values ? {right: `${(values as any).right.desktop}px`} : {}),
+                            ...('bottom' in values ? {bottom: `${(values as any).bottom.desktop}px`} : {}),
+                            ...('left' in values ? {left: `${(values as any).left.desktop}px`} : {}),
+                        },
+                    ];
+                })
+            ) as typeof vars.spacing,
+        [contextTheme]
+    );
+
+    const spacingMobileVars = React.useMemo(
+        () =>
+            Object.fromEntries(
+                Object.entries(contextTheme.spacing).map(([token, values]) => {
+                    if ('mobile' in values) {
+                        return [token, `${(values as any).mobile}px`];
+                    }
+
+                    return [
+                        token,
+                        {
+                            ...('top' in values ? {top: `${(values as any).top.mobile}px`} : {}),
+                            ...('right' in values ? {right: `${(values as any).right.mobile}px`} : {}),
+                            ...('bottom' in values ? {bottom: `${(values as any).bottom.mobile}px`} : {}),
+                            ...('left' in values ? {left: `${(values as any).left.mobile}px`} : {}),
+                        },
+                    ];
+                })
+            ) as typeof vars.spacing,
+        [contextTheme]
+    );
 
     const renderStyles = (selector: string) => {
         if (withoutStyles || (process.env.NODE_ENV === 'test' && !process.env.SSR_TEST)) {

package/src/theme.tsx

@@ -5,6 +5,7 @@ import type {Locale} from './utils/locale';
 import type {
     BorderRadiiConfig,
     Colors,
+    ComponentPropertiesConfig,
     Skin,
     SkinName,
     SpacingConfig,
@@ -173,6 +174,7 @@ export type Theme = {
     textPresets: TextPresetsConfig;
     spacing: SpacingConfig;
     themeVariants: ThemeVariantsConfig;
+    componentProperties: ComponentPropertiesConfig;
     Link: LinkComponent;
     isDarkMode: boolean;
     isIos: boolean;