@telefonica/mistica 12.8.0 → 12.9.1

package/dist-es/utils/media-queries.js

@@ -1,21 +1,15 @@
-export var createMediaQueries = function(param) {
-    var desktopOrTabletMinHeight = param.desktopOrTabletMinHeight, tabletMinWidth = param.tabletMinWidth, desktopMinWidth = param.desktopMinWidth, largeDesktopMinWidth = param.largeDesktopMinWidth;
+var x = function(param) {
+    var n = param.desktopOrTabletMinHeight, a = param.tabletMinWidth, e = param.desktopMinWidth, m = param.largeDesktopMinWidth;
     return {
-        mobile: "@media only screen and (max-width: ".concat(tabletMinWidth - 1, "px), ") + "(max-height: ".concat(desktopOrTabletMinHeight - 1, "px)"),
-        tablet: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(tabletMinWidth, "px) ") + "and (max-width: ".concat(desktopMinWidth - 1, "px)"),
-        desktop: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(desktopMinWidth, "px) ") + "and (max-width: ".concat(largeDesktopMinWidth - 1, "px)"),
-        largeDesktop: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(largeDesktopMinWidth, "px)"),
-        tabletOrBigger: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(tabletMinWidth, "px)"),
-        tabletOrSmaller: "@media only screen and (max-width: ".concat(desktopMinWidth - 1, "px), ") + "(max-height: ".concat(desktopOrTabletMinHeight - 1, "px)"),
-        desktopOrBigger: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(desktopMinWidth, "px)"),
-        // Only apply hover effect to user agents using fine pointer devices (a mouse, for example)
-        // Also enabled for (pointer: none) for acceptance tests, where (pointer: fine) doesn't match.
-        // WARNING: you may be tempted to use @media (hover: hover) instead, but that doesn't work as expected in some android browsers.
-        // See: https://hover-pointer-media-query.glitch.me/ and https://github.com/mui-org/material-ui/issues/15736
+        mobile: "@media only screen and (max-width: ".concat(a - 1, "px), (max-height: ").concat(n - 1, "px)"),
+        tablet: "@media only screen and (min-height: ".concat(n, "px) and (min-width: ").concat(a, "px) and (max-width: ").concat(e - 1, "px)"),
+        desktop: "@media only screen and (min-height: ".concat(n, "px) and (min-width: ").concat(e, "px) and (max-width: ").concat(m - 1, "px)"),
+        largeDesktop: "@media only screen and (min-height: ".concat(n, "px) and (min-width: ").concat(m, "px)"),
+        tabletOrBigger: "@media only screen and (min-height: ".concat(n, "px) and (min-width: ").concat(a, "px)"),
+        tabletOrSmaller: "@media only screen and (max-width: ".concat(e - 1, "px), (max-height: ").concat(n - 1, "px)"),
+        desktopOrBigger: "@media only screen and (min-height: ".concat(n, "px) and (min-width: ").concat(e, "px)"),
         supportsHover: "@media (pointer: fine), (pointer: none)",
-        /**
-     * Scopes the styles to touchable devices.
-     * See: https://stackoverflow.com/questions/12469875/how-to-code-css-media-queries-targeting-all-mobile-devices-and-tablets/42835826#42835826
-     */ touchableOnly: "@media (pointer: coarse), @media (hover: none)"
+        touchableOnly: "@media (pointer: coarse), @media (hover: none)"
     };
 };
+export { x as createMediaQueries };

package/dist-es/utils/platform.js

@@ -1,138 +1,34 @@
-function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterableToArrayLimit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-function _unsupportedIterableToArray(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-import { isWebViewBridgeAvailable } from "@tef-novum/webview-bridge";
-var getUserAgent = function() {
-    var platformOverrides = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var ref;
-    if (typeof self === "undefined") {
-        var _userAgent;
-        return (_userAgent = platformOverrides.userAgent) !== null && _userAgent !== void 0 ? _userAgent : "";
-    }
-    var ref1;
-    return (ref1 = (ref = self.navigator) === null || ref === void 0 ? void 0 : ref.userAgent) !== null && ref1 !== void 0 ? ref1 : "";
-};
-export var isInsideNovumNativeApp = function() {
-    var platformOverrides = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    if (typeof platformOverrides.insideNovumNativeApp !== "undefined") {
-        return platformOverrides.insideNovumNativeApp;
-    }
-    return isWebViewBridgeAvailable();
-};
-export var isRunningAcceptanceTest = function() {
-    var platformOverrides = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    return getUserAgent(platformOverrides).includes("acceptance-test");
-};
-var isEdgeOrIE = Boolean(typeof self !== "undefined" && self.MSStream);
-export var isAndroid = function(platformOverrides) {
-    return getUserAgent(platformOverrides).toLowerCase().includes("android") && !isEdgeOrIE;
-};
-export var isIos = function(platformOverrides) {
-    // IE and Edge mobile browsers includes Android and iPhone in the user agent
-    if (/iPad|iPhone|iPod/.test(getUserAgent(platformOverrides)) && !isEdgeOrIE) {
-        return true;
-    }
-    // In iOS13, iPad uses the Mac OS user-agent, but we know it's an iOS device when it runs inside our
-    // native app and is not Android
-    if (isInsideNovumNativeApp(platformOverrides) && !isAndroid(platformOverrides)) {
-        return true;
-    }
-    return false;
-};
-/**
- * Returns true if the browser is a safari browser:
- * webview, mobile, desktop or a browser like Chrome for iOS which is just a safari with a skin
- *
- * Note that this function checks the navigator vendor. It doesn't use platformOverrides or userAgent.
- */ export var isSafari = function() {
+var _typeof = function(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+};
+import { isWebViewBridgeAvailable as u } from "@tef-novum/webview-bridge";
+var t = function() {
+    var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var n, i, o;
+    return (typeof self === "undefined" ? "undefined" : _typeof(self)) > "u" ? (n = e.userAgent) != null ? n : "" : (o = (i = self.navigator) == null ? void 0 : i.userAgent) != null ? o : "";
+}, c = function() {
+    var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return _typeof(e.insideNovumNativeApp) < "u" ? e.insideNovumNativeApp : u();
+}, m = function() {
+    var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return t(e).includes("acceptance-test");
+}, r = Boolean((typeof self === "undefined" ? "undefined" : _typeof(self)) < "u" && self.MSStream), s = function(e) {
+    return t(e).toLowerCase().includes("android") && !r;
+}, a = function(e) {
+    return !!(/iPad|iPhone|iPod/.test(t(e)) && !r || c(e) && !s(e));
+}, l = function() {
     return navigator.vendor.includes("Apple");
-};
-export var isFirefox = function(platformOverrides) {
-    return !!getUserAgent(platformOverrides).match(/Firefox\/([0-9]+)\./);
-};
-export var isChrome = function(platformOverrides) {
-    return !!getUserAgent(platformOverrides).match(/Chrom(e|ium)\/([0-9]+)\./);
-};
-var MODERN_CHROME_VERSION = 44;
-export var isOldChrome = function(platformOverrides) {
-    var matches = getUserAgent(platformOverrides).match(/Chrome\/(\d+)/);
-    if (!matches || !matches[1]) {
-        // not Chrome
-        return false;
-    }
-    var version = Number(matches[1]);
-    return version < MODERN_CHROME_VERSION;
-};
-var SEMVER_ZERO = "0.0.0";
-export var getIosVersion = function(platformOverrides) {
-    if (!isIos(platformOverrides)) {
-        return SEMVER_ZERO;
-    }
-    var raw = getUserAgent(platformOverrides).match(/OS ((\d+_?){1,3})[\s_]/);
-    if (!raw || !raw[1]) {
-        return SEMVER_ZERO;
-    }
-    var ref = _slicedToArray(raw[1].split("_"), 3), major = ref[0], tmp = ref[1], minor = tmp === void 0 ? "0" : tmp, tmp1 = ref[2], patch = tmp1 === void 0 ? "0" : tmp1;
-    return [
-        major,
-        minor,
-        patch
-    ].join(".");
-};
-export var getPlatform = function() {
-    var platformOverrides = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var overridenPlatform = platformOverrides.platform;
-    if (overridenPlatform) {
-        return overridenPlatform;
-    }
-    if (isIos(platformOverrides)) {
-        return "ios";
-    }
-    if (isAndroid(platformOverrides)) {
-        return "android";
-    }
-    return "desktop";
-};
+}, p = function(e) {
+    return !!t(e).match(/Firefox\/([0-9]+)\./);
+}, g = function(e) {
+    return !!t(e).match(/Chrom(e|ium)\/([0-9]+)\./);
+}, d = 44, A = function(e) {
+    var n = t(e).match(/Chrome\/(\d+)/);
+    return !n || !n[1] ? !1 : Number(n[1]) < d;
+}, h = function() {
+    var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var n = e.platform;
+    return n || (a(e) ? "ios" : s(e) ? "android" : "desktop");
+};
+export { h as getPlatform, s as isAndroid, g as isChrome, p as isFirefox, c as isInsideNovumNativeApp, a as isIos, A as isOldChrome, m as isRunningAcceptanceTest, l as isSafari };

package/dist-es/utils/time.js

@@ -1,16 +1,11 @@
-export var getLocalDateString = function(date) {
-    var yyyy = date.getFullYear();
-    var mm = String(date.getMonth() + 1).padStart(2, "0");
-    var dd = String(date.getDate()).padStart(2, "0");
-    return "".concat(yyyy, "-").concat(mm, "-").concat(dd);
-};
-export var getLocalYearMonthString = function(date) {
-    var yyyy = date.getFullYear();
-    var mm = String(date.getMonth() + 1).padStart(2, "0");
-    return "".concat(yyyy, "-").concat(mm);
-};
-export var getLocalDateTimeString = function(date) {
-    var h = String(date.getHours()).padStart(2, "0");
-    var m = String(date.getMinutes()).padStart(2, "0");
-    return "".concat(getLocalDateString(date), "T").concat(h, ":").concat(m);
+var o = function(t) {
+    var n = t.getFullYear(), r = String(t.getMonth() + 1).padStart(2, "0"), g = String(t.getDate()).padStart(2, "0");
+    return "".concat(n, "-").concat(r, "-").concat(g);
+}, e = function(t) {
+    var n = t.getFullYear(), r = String(t.getMonth() + 1).padStart(2, "0");
+    return "".concat(n, "-").concat(r);
+}, a = function(t) {
+    var n = String(t.getHours()).padStart(2, "0"), r = String(t.getMinutes()).padStart(2, "0");
+    return "".concat(o(t), "T").concat(n, ":").concat(r);
 };
+export { o as getLocalDateString, a as getLocalDateTimeString, e as getLocalYearMonthString };

package/dist-es/video.js

@@ -26,6 +26,30 @@ function _objectSpread(target) {
     }
     return target;
 }
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _objectSpreadProps(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 function _objectWithoutProperties(source, excluded) {
     if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
@@ -53,21 +77,20 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { useDisableBorderRadius } from "./image";
-import { createUseStyles } from "./jss";
-import { AspectRatioElement } from "./utils/aspect-ratio-support";
-import { combineRefs } from "./utils/common";
-import { getPrefixedDataAttributes } from "./utils/dom";
-import { isRunningAcceptanceTest, isSafari } from "./utils/platform";
-export var RATIO = {
+import * as A from "react";
+import { useDisableBorderRadius as y } from "./image.js";
+import { createUseStyles as S } from "./jss.js";
+import { AspectRatioElement as E } from "./utils/aspect-ratio-support.js";
+import { combineRefs as k } from "./utils/common.js";
+import { getPrefixedDataAttributes as w } from "./utils/dom.js";
+import { isSafari as F, isRunningAcceptanceTest as I } from "./utils/platform.js";
+import { jsx as t } from "./_virtual/jsx-runtime.js";
+var x = {
     "1:1": 1,
     "16:9": 16 / 9,
     "12:5": 12 / 5,
     "4:3": 4 / 3
-};
-var useStyles = createUseStyles(function() {
+}, N = S(function() {
     return {
         video: {
             width: "100%",
@@ -79,10 +102,8 @@ var useStyles = createUseStyles(function() {
             maxHeight: "100%"
         }
     };
-});
-/** Transparent 1x1px PNG  */ var TRANSPARENT_PIXEL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC";
-var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var src1 = _param.src, poster = _param.poster, _autoPlay = _param.autoPlay, autoPlay = _autoPlay === void 0 ? !isRunningAcceptanceTest() : _autoPlay, _muted = _param.muted, muted = _muted === void 0 ? true : _muted, _loop = _param.loop, loop = _loop === void 0 ? true : _loop, _preload = _param.preload, preload = _preload === void 0 ? "none" : _preload, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? "1:1" : _aspectRatio, dataAttributes = _param.dataAttributes, props = _objectWithoutProperties(_param, [
+}), P = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", J = /*#__PURE__*/ A.forwardRef(function(_param, l) {
+    var r = _param.src, i = _param.poster, tmp = _param.autoPlay, o = tmp === void 0 ? !I() : tmp, tmp1 = _param.muted, d = tmp1 === void 0 ? !0 : tmp1, tmp2 = _param.loop, m = tmp2 === void 0 ? !0 : tmp2, tmp3 = _param.preload, u = tmp3 === void 0 ? "none" : tmp3, tmp4 = _param.aspectRatio, s = tmp4 === void 0 ? "1:1" : tmp4, f = _param.dataAttributes, n = _objectWithoutProperties(_param, [
         "src",
         "poster",
         "autoPlay",
@@ -92,73 +113,56 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         "aspectRatio",
         "dataAttributes"
     ]);
-    var noBorderRadius = useDisableBorderRadius();
-    var ratio = typeof aspectRatio === "number" ? aspectRatio : RATIO[aspectRatio];
-    var classes = useStyles();
-    var videoRef = React.useRef(null);
-    React.useEffect(function() {
-        var video = videoRef.current;
-        if (video && autoPlay && video.paused) {
-            video.play();
-        }
+    var h = y(), g = typeof s == "number" ? s : x[s], p = N(), a = A.useRef(null);
+    A.useEffect(function() {
+        var e = a.current;
+        e && o && e.paused && e.play();
     }, [
-        autoPlay
+        o
     ]);
-    // normalize sources
-    var sources = (Array.isArray(src1) ? src1 : [
-        src1
-    ]).map(function(source) {
-        if (typeof source === "string") {
-            return {
-                src: source
-            };
-        } else {
-            return source;
-        }
-    });
-    var video1 = /*#__PURE__*/ _jsx("video", _objectSpread({
-        ref: combineRefs(ref, videoRef),
-        playsInline: true,
-        disablePictureInPicture: true,
-        disableRemotePlayback: true,
-        autoPlay: autoPlay,
-        muted: muted,
-        loop: loop,
-        className: classes.video,
-        preload: preload,
-        // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
-        poster: poster || TRANSPARENT_PIXEL
-    }, getPrefixedDataAttributes(dataAttributes), {
+    var R = (Array.isArray(r) ? r : [
+        r
+    ]).map(function(e) {
+        return typeof e == "string" ? {
+            src: e
+        } : e;
+    }), c = /* @__PURE__ */ t("video", _objectSpreadProps(_objectSpread({
+        ref: k(l, a),
+        playsInline: !0,
+        disablePictureInPicture: !0,
+        disableRemotePlayback: !0,
+        autoPlay: o,
+        muted: d,
+        loop: m,
+        className: p.video,
+        preload: u,
+        poster: i || P
+    }, w(f)), {
         style: {
-            // For some reason adding this style with JSS doesn't add the border radius in safari
-            borderRadius: noBorderRadius ? 0 : 8
+            borderRadius: h ? 0 : 8
         },
-        children: sources.map(function(param, index) {
-            var src = param.src, type = param.type;
-            return /*#__PURE__*/ _jsx("source", {
-                src: src,
-                type: type
-            }, index);
+        children: R.map(function(param, v) {
+            var e = param.src, b = param.type;
+            return /* @__PURE__ */ t("source", {
+                src: e,
+                type: b
+            }, v);
         })
     }));
-    return /*#__PURE__*/ _jsx(AspectRatioElement, {
-        aspectRatio: ratio,
-        width: props.width,
-        height: props.height,
-        children: isSafari() ? /*#__PURE__*/ _jsx("div", {
+    return /* @__PURE__ */ t(E, {
+        aspectRatio: g,
+        width: n.width,
+        height: n.height,
+        children: F() ? /* @__PURE__ */ t("div", {
             style: {
                 width: "100%",
                 height: "100%",
-                /**
-                             * In safari, when using a video with poster, the transition from pause to play does a flicker,
-                             * To avoid this, in Safari browsers, instead of using the poster attribute, we use a
-                             * wrapper with the poster as background image
-                             */ backgroundImage: poster ? 'url("'.concat(poster, '")') : undefined,
+                backgroundImage: i ? 'url("'.concat(i, '")') : void 0,
                 backgroundSize: "cover",
                 backgroundPosition: "50% 50%"
             },
-            children: video1
-        }) : video1
+            children: c
+        }) : c
     });
 });
-export default Video;
+export { x as RATIO, J as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "12.8.0",
+    "version": "12.9.1",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -17,20 +17,21 @@
     "scripts": {
         "test": "jest --config jest.unit.config.js",
         "test-acceptance": "test-acceptance",
+        "test-ssr": "test-acceptance --config jest.ssr.config.js",
         "prettier-check": "prettier --check \"**/*.js\" \"**/*.tsx\" \"**/*.ts\" \"**/*.json\"",
         "lint": "eslint --report-unused-disable-directives .",
         "ts-check": "tsc --project tsconfig.json --noEmit",
         "build": "yarn clean && node scripts/build.js",
         "compile": "node scripts/compile.js",
         "clean": "rimraf dist && rimraf dist-es && rimraf dist-ts && rimraf node_modules/.cache",
-        "ci": "yarn lint && yarn prettier-check && yarn ts-check && yarn circular-dependencies && yarn build && yarn storybook-static && yarn test --ci && yarn test-acceptance --ci",
         "prepublishOnly": "node scripts/prepublish-only.js",
         "prepack": "yarn build",
         "storybook": "start-storybook -p 6006",
         "storybook-for-acceptance-tests": "cross-env NODE_ENV=production yarn storybook --ci 2>&1",
         "playroom": "playroom start",
         "gen-ts-defs": "rimraf dist-ts && tsc --project tsconfig.production.json --emitDeclarationOnly && cp -r dist-ts/src/* dist && rimraf dist-ts",
-        "now-build": "yarn storybook-static && ./node_modules/.bin/playroom build && cp img/favicon.ico public/",
+        "vercel-build": "yarn storybook-static && ./node_modules/.bin/playroom build && FORCE_MOBILE=1 ./node_modules/.bin/playroom build && FORCE_DESKTOP=1 ./node_modules/.bin/playroom build && cp img/favicon.ico public/",
+        "vercel-preview-build": "yarn storybook-static && ./node_modules/.bin/playroom build && cp img/favicon.ico public/",
         "storybook-static": "rimraf public && yarn build-storybook -s ./.storybook/css/fonts -o public --quiet",
         "serve-static-storybook": "node ./scripts/serve-static-storybook.js",
         "detect-circular-dependencies": "npx dpdm --circular src/index.tsx",
@@ -67,6 +68,7 @@
         "@storybook/addon-actions": "6.4.19",
         "@storybook/addon-controls": "6.4.19",
         "@storybook/addon-links": "6.4.19",
+        "@storybook/addon-postcss": "^2.0.0",
         "@storybook/addon-storysource": "6.4.19",
         "@storybook/addon-viewport": "6.4.19",
         "@storybook/addons": "6.4.19",
@@ -74,10 +76,10 @@
         "@storybook/components": "6.4.19",
         "@storybook/react": "6.4.19",
         "@storybook/theming": "6.4.19",
-        "@swc/cli": "^0.1.56",
-        "@swc/core": "^1.2.160",
-        "@swc/jest": "^0.2.20",
-        "@telefonica/acceptance-testing": "^2.7.0",
+        "@swc/cli": "^0.1.57",
+        "@swc/core": "^1.3.11",
+        "@swc/jest": "^0.2.23",
+        "@telefonica/acceptance-testing": "2.12.0",
         "@telefonica/eslint-config": "^1.0.7",
         "@telefonica/prettier-config": "^1.1.0",
         "@telefonica/ts-to-flow": "1.2.2",
@@ -85,13 +87,19 @@
         "@testing-library/react": "^12.1.4",
         "@testing-library/user-event": "^13.5.0",
         "@types/detect-port": "^1.3.2",
-        "@types/jest-environment-puppeteer": "^4.4.1",
+        "@types/jest-environment-puppeteer": "^5.0.3",
+        "@types/mini-css-extract-plugin": "^1.2.2",
         "@types/mkdirp": "^1.0.2",
         "@types/react-autosuggest": "^10.1.5",
         "@types/react-router-dom": "^5.3.3",
         "@types/react-transition-group": "^4.4.4",
         "@types/rimraf": "^3.0.2",
         "@types/semver-compare": "^1.0.1",
+        "@vanilla-extract/jest-transform": "^1.0.1",
+        "@vanilla-extract/vite-plugin": "^3.6.1",
+        "@vanilla-extract/webpack-plugin": "^2.2.0",
+        "@vitejs/plugin-react": "^2.1.0",
+        "autoprefixer": "^10.4.12",
         "axe-html-reporter": "^2.2.3",
         "cpx": "^1.5.0",
         "cross-env": "^7.0.3",
@@ -101,14 +109,19 @@
         "flow-bin": "^0.152.0",
         "flow-typed": "^3.7.0",
         "glob": "^7.2.0",
+        "gzip-size": "^6.0.0",
         "husky": "^7.0.4",
         "is-ci": "^3.0.1",
-        "jest": "^27.5.1",
-        "jest-environment-puppeteer": "^4.4.0",
+        "jest": "^29.2.2",
+        "jest-environment-jsdom": "^29.2.2",
+        "jest-environment-puppeteer": "^6.1.1",
         "jimp": "^0.16.1",
         "lint-staged": "^12.3.7",
+        "mini-css-extract-plugin": "^1.6.2",
         "node-fetch": "^2.6.7",
         "playroom": "^0.28.0",
+        "postcss": "^8.4.18",
+        "postcss-loader": "^4.2.0",
         "prettier": "^2.6.1",
         "pretty-bytes": "^5.6.0",
         "prop-types": "^15.8.1",
@@ -120,12 +133,17 @@
         "semantic-release": "^19.0.2",
         "static-server": "^2.2.1",
         "swc-loader": "^0.1.15",
-        "typescript": "^4.6.3"
+        "typescript": "^4.6.3",
+        "vite": "^3.1.8",
+        "vite-plugin-no-bundle": "^1.0.6"
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.3.1",
         "@tef-novum/webview-bridge": "^3.8.0",
         "@telefonica/libphonenumber": "^2.8.1",
+        "@vanilla-extract/css": "^1.9.1",
+        "@vanilla-extract/dynamic": "^2.0.2",
+        "@vanilla-extract/sprinkles": "^1.5.0",
         "classnames": "^2.3.1",
         "jss": "^10.9.0",
         "jss-plugin-camel-case": "^10.9.0",