@telefonica/mistica 16.52.0 → 16.54.0

package/dist-es/skins/defaults.js

@@ -347,5 +347,120 @@ const e = {
 }, t = {
     brandLoadingScreen: "inverse",
     successFeedback: "inverse"
+}, o = {
+    buttonDefaultPadding: {
+        left: {
+            mobile: 16,
+            desktop: 16
+        },
+        right: {
+            mobile: 16,
+            desktop: 16
+        }
+    },
+    buttonSmallPadding: {
+        left: {
+            mobile: 8,
+            desktop: 12
+        },
+        right: {
+            mobile: 8,
+            desktop: 12
+        }
+    },
+    cardDefaultPadding: {
+        top: {
+            mobile: 16,
+            desktop: 16
+        },
+        bottom: {
+            mobile: 16,
+            desktop: 16
+        },
+        left: {
+            mobile: 16,
+            desktop: 16
+        },
+        right: {
+            mobile: 16,
+            desktop: 16
+        }
+    },
+    inputPadding: {
+        top: {
+            mobile: 9,
+            desktop: 3
+        },
+        bottom: {
+            mobile: 9,
+            desktop: 3
+        }
+    },
+    tagPadding: {
+        top: {
+            mobile: 2,
+            desktop: 2
+        },
+        bottom: {
+            mobile: 2,
+            desktop: 2
+        }
+    },
+    feedbackScreenPadding: {
+        top: {
+            mobile: 64,
+            desktop: 40
+        },
+        bottom: {
+            mobile: 16,
+            desktop: 40
+        },
+        left: {
+            mobile: 16,
+            desktop: 40
+        },
+        right: {
+            mobile: 16,
+            desktop: 40
+        }
+    },
+    heroPadding: {
+        top: {
+            mobile: 16,
+            desktop: 56
+        },
+        bottom: {
+            mobile: 16,
+            desktop: 56
+        }
+    },
+    headerPadding: {
+        top: {
+            mobile: 16,
+            desktop: 48
+        },
+        bottom: {
+            mobile: 16,
+            desktop: 48
+        }
+    },
+    drawerPadding: {
+        top: {
+            mobile: 32,
+            desktop: 32
+        },
+        bottom: {
+            mobile: 16,
+            desktop: 32
+        },
+        left: {
+            mobile: 16,
+            desktop: 24
+        },
+        right: {
+            mobile: 16,
+            desktop: 24
+        }
+    }
 };
-export { i as defaultBorderRadiiConfig, e as defaultTextPresetsConfig, t as defaultThemeVariantsConfig };
+export { i as defaultBorderRadiiConfig, o as defaultSpacing, e as defaultTextPresetsConfig, t as defaultThemeVariantsConfig };

package/dist-es/skins/esimflag.js

@@ -72,6 +72,14 @@ const e = {
             backgroundBrandBottom: e.purple,
             appBarBackground: e.white,
             navigationBarBackground: e.blue55,
+            backgroundDropZoneHover: r(e.blue55, 0.05),
+            backgroundDropZoneDragover: r(e.blue55, 0.08),
+            backgroundDropZoneBrandHover: r(e.blue55, 0.2),
+            backgroundDropZoneBrandDragover: r(e.blue55, 0.4),
+            backgroundDropZoneNegativeHover: r(e.white, 0.1),
+            backgroundDropZoneNegativeDragover: r(e.white, 0.17),
+            backgroundDropZoneMediaHover: r(e.blue55, 0.2),
+            backgroundDropZoneMediaDragover: r(e.blue55, 0.4),
             skeletonWave: e.grey2,
             borderLow: e.grey1,
             border: e.grey3,
@@ -350,6 +358,14 @@ const e = {
             appBarBackground: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
             skeletonWave: e.grey6,
+            backgroundDropZoneHover: r(e.white, 0.05),
+            backgroundDropZoneDragover: r(e.white, 0.08),
+            backgroundDropZoneBrandHover: r(e.white, 0.05),
+            backgroundDropZoneBrandDragover: r(e.white, 0.08),
+            backgroundDropZoneNegativeHover: r(e.white, 0.15),
+            backgroundDropZoneNegativeDragover: r(e.white, 0.08),
+            backgroundDropZoneMediaHover: r(e.white, 0.03),
+            backgroundDropZoneMediaDragover: r(e.white, 0.05),
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
             borderHigh: e.grey5,
@@ -951,6 +967,122 @@ const e = {
         themeVariants: {
             successFeedback: "inverse",
             brandLoadingScreen: "inverse"
+        },
+        spacing: {
+            buttonDefaultPadding: {
+                left: {
+                    mobile: 16,
+                    desktop: 16
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 16
+                }
+            },
+            buttonSmallPadding: {
+                left: {
+                    mobile: 12,
+                    desktop: 12
+                },
+                right: {
+                    mobile: 12,
+                    desktop: 12
+                }
+            },
+            cardDefaultPadding: {
+                top: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 24
+                }
+            },
+            inputPadding: {
+                top: {
+                    mobile: 8,
+                    desktop: 8
+                },
+                bottom: {
+                    mobile: 8,
+                    desktop: 8
+                }
+            },
+            tagPadding: {
+                top: {
+                    mobile: 4,
+                    desktop: 4
+                },
+                bottom: {
+                    mobile: 4,
+                    desktop: 4
+                }
+            },
+            feedbackScreenPadding: {
+                top: {
+                    mobile: 64,
+                    desktop: 64
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 64
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 64
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 64
+                }
+            },
+            heroPadding: {
+                top: {
+                    mobile: 24,
+                    desktop: 56
+                },
+                bottom: {
+                    mobile: 24,
+                    desktop: 56
+                }
+            },
+            headerPadding: {
+                top: {
+                    mobile: 24,
+                    desktop: 48
+                },
+                bottom: {
+                    mobile: 24,
+                    desktop: 48
+                }
+            },
+            drawerPadding: {
+                top: {
+                    mobile: 32,
+                    desktop: 40
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 40
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 40
+                }
+            }
         }
     });
 export { d as getEsimflagSkin, e as palette };

package/dist-es/skins/movistar-new.js

@@ -79,6 +79,14 @@ const e = {
             backgroundBrandBottom: e.movistarBlue,
             appBarBackground: e.white,
             navigationBarBackground: e.movistarBlue,
+            backgroundDropZoneHover: r(e.movistarBlue, 0.05),
+            backgroundDropZoneDragover: r(e.movistarBlue, 0.08),
+            backgroundDropZoneBrandHover: r(e.movistarBlack, 0.08),
+            backgroundDropZoneBrandDragover: r(e.movistarBlack, 0.1),
+            backgroundDropZoneNegativeHover: r(e.white, 0.1),
+            backgroundDropZoneNegativeDragover: r(e.white, 0.17),
+            backgroundDropZoneMediaHover: r(e.movistarBlack, 0.2),
+            backgroundDropZoneMediaDragover: r(e.movistarBlack, 0.4),
             skeletonWave: e.grey200,
             borderLow: e.grey100,
             border: e.grey300,
@@ -356,6 +364,14 @@ const e = {
             backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
+            backgroundDropZoneHover: r(e.white, 0.05),
+            backgroundDropZoneDragover: r(e.white, 0.08),
+            backgroundDropZoneBrandHover: r(e.white, 0.03),
+            backgroundDropZoneBrandDragover: r(e.white, 0.05),
+            backgroundDropZoneNegativeHover: r(e.white, 0.03),
+            backgroundDropZoneNegativeDragover: r(e.white, 0.05),
+            backgroundDropZoneMediaHover: r(e.white, 0.03),
+            backgroundDropZoneMediaDragover: r(e.white, 0.05),
             skeletonWave: e.grey600,
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
@@ -756,8 +772,8 @@ const e = {
             },
             inputValue: {
                 lineHeight: {
-                    desktop: 24,
-                    mobile: 24
+                    desktop: 22,
+                    mobile: 22
                 },
                 size: {
                     desktop: 16,
@@ -958,6 +974,122 @@ const e = {
         themeVariants: {
             successFeedback: "inverse",
             brandLoadingScreen: "default"
+        },
+        spacing: {
+            buttonDefaultPadding: {
+                left: {
+                    mobile: 16,
+                    desktop: 16
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 16
+                }
+            },
+            buttonSmallPadding: {
+                left: {
+                    mobile: 8,
+                    desktop: 12
+                },
+                right: {
+                    mobile: 8,
+                    desktop: 12
+                }
+            },
+            cardDefaultPadding: {
+                top: {
+                    mobile: 16,
+                    desktop: 16
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 16
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 16
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 16
+                }
+            },
+            inputPadding: {
+                top: {
+                    mobile: 9,
+                    desktop: 3
+                },
+                bottom: {
+                    mobile: 9,
+                    desktop: 3
+                }
+            },
+            tagPadding: {
+                top: {
+                    mobile: 2,
+                    desktop: 2
+                },
+                bottom: {
+                    mobile: 2,
+                    desktop: 2
+                }
+            },
+            feedbackScreenPadding: {
+                top: {
+                    mobile: 64,
+                    desktop: 40
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 40
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 40
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 40
+                }
+            },
+            heroPadding: {
+                top: {
+                    mobile: 16,
+                    desktop: 56
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 56
+                }
+            },
+            headerPadding: {
+                top: {
+                    mobile: 16,
+                    desktop: 48
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 48
+                }
+            },
+            drawerPadding: {
+                top: {
+                    mobile: 32,
+                    desktop: 32
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 32
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 24
+                }
+            }
         }
     });
 export { i as getMovistarNewSkin, e as palette };

package/dist-es/skins/movistar.js

@@ -84,6 +84,14 @@ const e = {
             backgroundBrandBottom: e.movistarBlue,
             appBarBackground: e.white,
             navigationBarBackground: e.movistarBlue,
+            backgroundDropZoneHover: e.movistarBlue10,
+            backgroundDropZoneDragover: e.movistarBlue15,
+            backgroundDropZoneBrandHover: r(e.black, 0.1),
+            backgroundDropZoneBrandDragover: r(e.black, 0.2),
+            backgroundDropZoneNegativeHover: r(e.white, 0.1),
+            backgroundDropZoneNegativeDragover: r(e.white, 0.17),
+            backgroundDropZoneMediaHover: r(e.black, 0.1),
+            backgroundDropZoneMediaDragover: r(e.black, 0.2),
             skeletonWave: e.grey2,
             borderLow: e.grey1,
             border: e.grey3,
@@ -361,6 +369,14 @@ const e = {
             backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
+            backgroundDropZoneHover: r(e.white, 0.05),
+            backgroundDropZoneDragover: r(e.white, 0.08),
+            backgroundDropZoneBrandHover: r(e.white, 0.03),
+            backgroundDropZoneBrandDragover: r(e.white, 0.05),
+            backgroundDropZoneNegativeHover: r(e.white, 0.15),
+            backgroundDropZoneNegativeDragover: r(e.white, 0.25),
+            backgroundDropZoneMediaHover: r(e.white, 0.03),
+            backgroundDropZoneMediaDragover: r(e.white, 0.05),
             skeletonWave: e.darkModeGrey6,
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
@@ -963,6 +979,122 @@ const e = {
         themeVariants: {
             successFeedback: "default",
             brandLoadingScreen: "default"
+        },
+        spacing: {
+            buttonDefaultPadding: {
+                left: {
+                    mobile: 16,
+                    desktop: 16
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 16
+                }
+            },
+            buttonSmallPadding: {
+                left: {
+                    mobile: 12,
+                    desktop: 12
+                },
+                right: {
+                    mobile: 12,
+                    desktop: 12
+                }
+            },
+            cardDefaultPadding: {
+                top: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 24
+                }
+            },
+            inputPadding: {
+                top: {
+                    mobile: 8,
+                    desktop: 8
+                },
+                bottom: {
+                    mobile: 8,
+                    desktop: 8
+                }
+            },
+            tagPadding: {
+                top: {
+                    mobile: 4,
+                    desktop: 4
+                },
+                bottom: {
+                    mobile: 4,
+                    desktop: 4
+                }
+            },
+            feedbackScreenPadding: {
+                top: {
+                    mobile: 64,
+                    desktop: 64
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 64
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 64
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 64
+                }
+            },
+            heroPadding: {
+                top: {
+                    mobile: 24,
+                    desktop: 56
+                },
+                bottom: {
+                    mobile: 24,
+                    desktop: 56
+                }
+            },
+            headerPadding: {
+                top: {
+                    mobile: 24,
+                    desktop: 48
+                },
+                bottom: {
+                    mobile: 24,
+                    desktop: 48
+                }
+            },
+            drawerPadding: {
+                top: {
+                    mobile: 32,
+                    desktop: 40
+                },
+                bottom: {
+                    mobile: 16,
+                    desktop: 24
+                },
+                left: {
+                    mobile: 16,
+                    desktop: 40
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 40
+                }
+            }
         }
     });
 export { i as getMovistarSkin, e as palette };