@telefonica/mistica 12.6.0 → 12.7.0

package/dist-es/generated/mistica-icons/icon-justice-regular.js

@@ -90,7 +90,7 @@ var IconJusticeRegular = function(_param) {
             role: "presentation"
         }, rest, {
             children: /*#__PURE__*/ _jsx("path", {
-                d: "M21.828 14.066a.16.16 0 01.008.044c0 .918-.258 1.641-.753 2.15-.429.432-1.009.676-1.717.726a64.99 64.99 0 01-2.009.006c-.75-.037-1.358-.28-1.806-.728-.494-.496-.746-1.2-.76-2.082-.002-.005-.002-.01-.002-.016l-.002-.03a.244.244 0 01.01-.089.376.376 0 00.012-.073c0-.018 0-.038.008-.058l2.22-7.367c-.912-.002-2.184-.002-3.257-.002v11.935h1.446c.79 0 1.42.235 1.88.698.475.479.716 1.156.716 2.02a.632.632 0 01-.619.643.12.12 0 01-.034-.006l-.02-.005-.022.005a.12.12 0 01-.033.006H6.904a.12.12 0 01-.035-.006l-.019-.005-.023.005a.121.121 0 01-.033.006.632.632 0 01-.619-.644c0-.86.241-1.54.717-2.02.46-.462 1.09-.697 1.883-.697h1.442V6.547c-1.073.002-2.342.002-3.255.002l2.224 7.367c.005.019.005.037.006.054 0 .014 0 .028.003.041a.385.385 0 00.008.037.22.22 0 01.011.064l-.001.027a.306.306 0 00-.001.027c-.003.005-.003.01-.003.016-.014.883-.264 1.586-.76 2.082-.445.448-1.053.692-1.803.728a65.34 65.34 0 01-2.014-.006c-.712-.05-1.289-.294-1.717-.725-.502-.507-.76-1.23-.76-2.149v-.002c0-.016.005-.032.01-.047.003-.013.006-.025.007-.038l.005-.038a.531.531 0 01.029-.13L5.158 6.69a1.109 1.109 0 00-.35.219.593.593 0 01-.871-.02.665.665 0 01.02-.913c.437-.437 1.03-.678 1.767-.714.056-.006 3.33-.006 5.232-.006a1.083 1.083 0 01-.207-.162c-.285-.286-.428-.709-.428-1.255 0-.552.145-.975.428-1.26.272-.278.667-.418 1.171-.418h.146v.003c.003-.003.008-.003.011-.003.504 0 .9.14 1.171.417.286.286.429.709.429 1.26 0 .547-.146.97-.429 1.256a1.333 1.333 0 01-.207.162c1.899 0 5.173.003 5.232.006.737.036 1.33.277 1.768.714.246.25.255.658.02.913a.596.596 0 01-.874.02 1.175 1.175 0 00-.354-.219l2.953 7.168a.56.56 0 01.033.168.217.217 0 00.009.04zM11.45 6.546h.17c.005 0 .009.002.013.003a.03.03 0 00.013.003h.022c.06 0 .225-.003.37-.003v.003h.308l.013-.003a.04.04 0 01.012-.002h.168v11.935h-1.09V6.547zM17.945 7.8l-1.708 5.666h4.042L17.945 7.8zm2.272 7.532c.143-.143.247-.336.308-.574h-4.44c.065.238.169.431.311.574.227.224.563.35 1 .37a58.297 58.297 0 001.877-.003c.415-.028.731-.154.944-.367zm-3.977 4.776c-.222-.221-.563-.334-1.023-.334H8.77c-.46 0-.804.113-1.022.334-.11.115-.197.263-.253.448h9a1.11 1.11 0 00-.254-.448zM3.707 13.465H7.75L6.041 7.8l-2.334 5.666zm3.883 1.866c.143-.143.246-.336.31-.574H3.46c.062.238.166.431.309.574.216.216.532.339.947.367a58.288 58.288 0 001.876.003c.435-.023.774-.146.998-.37z",
+                d: "M20.352 15.383c-.216.216-.538.344-.96.373a59.137 59.137 0 01-1.906.002c-.444-.02-.786-.148-1.016-.375a1.281 1.281 0 01-.316-.584h4.511a1.253 1.253 0 01-.313.584zm-2.308-7.654l2.37 5.758h-4.106l1.736-5.758zm-2.772 12.168c.466 0 .814.114 1.039.338.113.117.199.268.259.456H7.425c.057-.188.145-.339.256-.456.222-.224.572-.338 1.039-.338h6.552zm-3.828-13.44h.173c.009 0 .017.006.026.006.008 0 .219-.003.398-.003v.003h.313c.009 0 .017-.006.026-.006h.17v12.128h-1.106V6.457zm-3.76 7.03H3.577l2.37-5.758 1.737 5.758zm-.162 1.896c-.228.227-.573.353-1.014.375a59.142 59.142 0 01-1.907-.003c-.42-.028-.742-.153-.962-.372a1.253 1.253 0 01-.313-.584h4.511c-.065.242-.17.439-.315.584zm14.475-1.241c0-.029-.014-.054-.017-.086a.569.569 0 00-.034-.17l-3-7.284c.137.06.262.128.359.222a.606.606 0 00.888-.02.678.678 0 00-.02-.928c-.444-.444-1.048-.688-1.796-.725-.06-.003-3.387-.006-5.317-.006a1.35 1.35 0 00.21-.165c.288-.29.436-.72.436-1.275 0-.56-.145-.99-.435-1.28-.276-.283-.678-.425-1.19-.425-.003 0-.008 0-.011.003V2h-.148c-.513 0-.914.142-1.19.424-.287.29-.435.72-.435 1.28 0 .556.145.986.435 1.276a1.1 1.1 0 00.21.165c-1.932 0-5.26 0-5.316.006-.749.037-1.352.281-1.796.725a.675.675 0 00-.02.928.602.602 0 00.453.202c.156 0 .313-.06.432-.182.094-.094.222-.165.356-.222l-3 7.284c-.023.054-.025.113-.034.17-.003.029-.017.057-.017.086v.003c0 .933.262 1.667.771 2.183.436.438 1.022.686 1.745.737a66.277 66.277 0 002.046.005c.763-.037 1.38-.284 1.833-.74.504-.503.757-1.218.772-2.114 0-.006 0-.012.002-.017 0-.02.003-.034.003-.054 0-.037-.014-.069-.02-.103-.005-.031 0-.063-.008-.097L6.884 6.46c.928 0 2.217 0 3.307-.003v12.128H8.725c-.805 0-1.445.239-1.912.708-.484.487-.729 1.179-.729 2.052 0 .362.282.655.63.655.02 0 .036-.009.056-.011.017.002.034.011.054.011H17.18c.02 0 .037-.009.056-.011.018.002.035.011.055.011a.642.642 0 00.629-.655c0-.876-.245-1.565-.729-2.052-.467-.47-1.107-.708-1.91-.708h-1.468V6.457c1.09 0 2.382 0 3.31.003l-2.257 7.485c-.012.034-.006.066-.012.097-.005.034-.02.066-.02.103 0 .017.003.034.003.054 0 .005 0 .011.003.017.014.896.27 1.61.771 2.114.456.456 1.073.703 1.836.74a65.907 65.907 0 002.04-.006c.72-.05 1.31-.298 1.745-.736.504-.518.766-1.253.766-2.186z",
                 fill: fillColor
             })
         }));

package/dist-es/generated/mistica-icons/icon-tokens-filled.js

@@ -0,0 +1,85 @@
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * This file was autogenerated. Don't edit this file!
+ *
+ * To update, execute "yarn start" inside "import-mistica-icons"
+ */ import * as React from "react";
+import { useTheme } from "../../hooks";
+import { useIsInverseVariant } from "../../theme-variant-context";
+var IconTokensFilled = function(_param) {
+    var color = _param.color, _size = _param.size, size = _size === void 0 ? 24 : _size, children = _param.children, rest = _objectWithoutProperties(_param, [
+        "color",
+        "size",
+        "children"
+    ]);
+    var colors = useTheme().colors;
+    var isInverse = useIsInverseVariant();
+    var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
+    return /*#__PURE__*/ _jsx("svg", _objectSpread({
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        role: "presentation"
+    }, rest, {
+        children: /*#__PURE__*/ _jsx("path", {
+            d: "M13.43 4.63l-.016.034-.029.066-.005.01a11.525 11.525 0 01-1.845 2.881 11.612 11.612 0 01-3.95 2.931 12.737 12.737 0 00-2.032-2.457 8.422 8.422 0 002.19-1.11 8.586 8.586 0 002.83-3.4.9.9 0 00.03-.068l.005-.013a1.52 1.52 0 012.763-.125l.027.063.02.045.014.03.008.018c.133.353.13.744-.01 1.095zM8.207 16.026a12.725 12.725 0 00-2.95 1.346 8.572 8.572 0 00-.327-2.294 8.515 8.515 0 00-2.386-3.885l-.005-.005a2.844 2.844 0 00-.074-.067l-.006-.006A1.516 1.516 0 013.49 8.511h.024a1.51 1.51 0 011.072.445c.02.02.042.038.065.055a11.46 11.46 0 012.115 2.671l.003.006a11.612 11.612 0 011.437 4.338zm10.659 2.754a8.579 8.579 0 011.247-5.97 12.745 12.745 0 01-3.117-.657 11.576 11.576 0 00-.87 8.3c.109.29.302.542.555.721h.002l.014.009.04.027a1.52 1.52 0 002.303-1.61l-.029-.114a8.117 8.117 0 01-.145-.707zm-6.83.99c.924.005 1.84.16 2.714.457a12.796 12.796 0 01-.302-3.226 11.577 11.577 0 00-5.386.115c-1.17.308-2.283.8-3.298 1.455l-.012.008c-.083.053-.17.11-.26.173a1.51 1.51 0 00-.476.692 8.235 8.235 0 01-.055.21 1.52 1.52 0 002.402 1.495l.01-.007A8.494 8.494 0 0112 19.77h.036zm2.52-4.057c.19-1.407.611-2.774 1.246-4.044a12.917 12.917 0 01-3.785-2.679 12.91 12.91 0 01-3.798 2.687 12.937 12.937 0 011.242 4.031 12.876 12.876 0 015.095.005zm7.002-4.615c.284-.284.444-.67.445-1.072a1.523 1.523 0 00-1.395-1.512l-.074-.005h-.015a8.462 8.462 0 01-5.992-3.188 12.775 12.775 0 01-1.657 2.705 11.593 11.593 0 004.065 2.734c1.096.435 2.253.698 3.43.78h.016l.025.001a1.518 1.518 0 001.152-.443z",
+            fill: fillColor
+        })
+    }));
+};
+export default IconTokensFilled;

package/dist-es/generated/mistica-icons/icon-tokens-light.js

@@ -0,0 +1,85 @@
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * This file was autogenerated. Don't edit this file!
+ *
+ * To update, execute "yarn start" inside "import-mistica-icons"
+ */ import * as React from "react";
+import { useTheme } from "../../hooks";
+import { useIsInverseVariant } from "../../theme-variant-context";
+var IconTokensLight = function(_param) {
+    var color = _param.color, _size = _param.size, size = _size === void 0 ? 24 : _size, children = _param.children, rest = _objectWithoutProperties(_param, [
+        "color",
+        "size",
+        "children"
+    ]);
+    var colors = useTheme().colors;
+    var isInverse = useIsInverseVariant();
+    var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
+    return /*#__PURE__*/ _jsx("svg", _objectSpread({
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        role: "presentation"
+    }, rest, {
+        children: /*#__PURE__*/ _jsx("path", {
+            d: "M22 10.196a2.254 2.254 0 00-2.07-2.246l-.021-.001-.063-.005h-.009a6.868 6.868 0 01-5.723-4.013 2.256 2.256 0 00-4.194-.009v.003l-.009.023-.003.006c-.09.193-.182.37-.292.562a6.865 6.865 0 01-5.421 3.428H4.19c-.06.002-.12.006-.176.012l-.011.001h-.004a2.254 2.254 0 00-1.231 3.936l.004.004a6.852 6.852 0 011.938 3.15 6.961 6.961 0 01.079 3.504c-.026.08-.047.163-.064.246l-.006.03a2.258 2.258 0 003.402 2.332l.01-.006.005-.004a4.28 4.28 0 01.116-.077l.005-.003a6.882 6.882 0 013.741-1.107h.031a6.926 6.926 0 013.758 1.13l.004.002.004.002.013.01.027.017.004.003a2.251 2.251 0 002.212.14 2.26 2.26 0 001.223-2.528c0-.006-.003-.013-.005-.019a6.673 6.673 0 01-.144-.674 6.941 6.941 0 012.134-6.18l.043-.04A2.249 2.249 0 0022 10.196zm-2.902-1.774c.231.04.467.07.701.088h.009l.07.005h.001a1.687 1.687 0 01-.134 3.368c-.028 0-.058 0-.087-.002l-.035-.002h-.01a10.754 10.754 0 01-3.22-.733 10.893 10.893 0 01-4-2.763 11.38 11.38 0 001.662-2.659l.001-.004a2.28 2.28 0 00.05-.113l.004-.009c.043-.108.078-.22.105-.334a7.425 7.425 0 004.883 3.158zm-4.505 7.33a11.43 11.43 0 00-5.171-.005 11.49 11.49 0 00-1.289-4.191 11.472 11.472 0 003.883-2.744 11.469 11.469 0 003.87 2.738 11.497 11.497 0 00-1.293 4.201zM10.107 4.799a7.045 7.045 0 00.334-.652l.005-.014a1.69 1.69 0 013.08-.13l.003.009c.013.032.028.063.04.094l.024.05c.152.398.148.837-.011 1.232l-.044.099-.002.005v.002a10.81 10.81 0 01-1.734 2.707 10.891 10.891 0 01-3.952 2.858 11.342 11.342 0 00-2.02-2.476 2.295 2.295 0 00-.349-.279 7.36 7.36 0 002.458-1.13 7.536 7.536 0 002.168-2.375zM3.668 12a7.545 7.545 0 00-.507-.518l-.003-.003a4.351 4.351 0 00-.073-.067 1.687 1.687 0 011.136-2.9h.033a1.676 1.676 0 011.193.493.289.289 0 00.037.032 10.77 10.77 0 012 2.52 10.914 10.914 0 011.382 4.334c-1.07.306-2.089.768-3.023 1.371l-.008.005c-.09.059-.183.12-.285.19l-.017.012-.008.008A7.468 7.468 0 003.668 12zm8.33 7.394a7.453 7.453 0 00-4.054 1.202l-.003.002-.004.002a1.69 1.69 0 01-2.659-1.674l.001-.006c.02-.072.039-.145.056-.214.101-.31.29-.583.544-.787a8.51 8.51 0 01.257-.17l.007-.005c.954-.616 2-1.078 3.098-1.367a10.874 10.874 0 015.306-.051 11.375 11.375 0 00.3 3.297v.006c.026.11.056.223.086.337a.333.333 0 00.006.02l.005.014a7.514 7.514 0 00-2.914-.605h-.031zm6.765-4.51a7.544 7.544 0 00-.07 3.874c.009.035.018.07.029.105a1.692 1.692 0 01-2.565 1.794l-.002-.002-.035-.023-.01-.007-.003-.002a1.708 1.708 0 01-.626-.818 9.122 9.122 0 01-.081-.314l-.002-.007a10.87 10.87 0 011.02-7.721c1.012.377 2.074.606 3.152.681h.002l.057.004a2.304 2.304 0 00.348-.01 7.526 7.526 0 00-1.214 2.446z",
+            fill: fillColor
+        })
+    }));
+};
+export default IconTokensLight;

package/dist-es/generated/mistica-icons/icon-tokens-regular.js

@@ -0,0 +1,85 @@
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * This file was autogenerated. Don't edit this file!
+ *
+ * To update, execute "yarn start" inside "import-mistica-icons"
+ */ import * as React from "react";
+import { useTheme } from "../../hooks";
+import { useIsInverseVariant } from "../../theme-variant-context";
+var IconTokensRegular = function(_param) {
+    var color = _param.color, _size = _param.size, size = _size === void 0 ? 24 : _size, children = _param.children, rest = _objectWithoutProperties(_param, [
+        "color",
+        "size",
+        "children"
+    ]);
+    var colors = useTheme().colors;
+    var isInverse = useIsInverseVariant();
+    var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
+    return /*#__PURE__*/ _jsx("svg", _objectSpread({
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        role: "presentation"
+    }, rest, {
+        children: /*#__PURE__*/ _jsx("path", {
+            d: "M22 10.254a2.482 2.482 0 00-2.276-2.472l-.034-.003a.438.438 0 01-.051-.004h-.013a6.373 6.373 0 01-5.305-3.721 2.483 2.483 0 00-4.614 0l-.002.006-.004.01v.003a6.371 6.371 0 01-5.297 3.7h-.005a2.481 2.481 0 00-1.56 4.34l.006.006a6.312 6.312 0 011.797 2.923 6.46 6.46 0 01.074 3.246c-.026.085-.048.17-.065.258l-.007.035a2.485 2.485 0 003.744 2.565l.02-.012.006-.005.108-.072.005-.002.003-.003a6.388 6.388 0 016.982.022h.002l.007.005.008.006.029.018.01.007a2.48 2.48 0 002.435.154 2.486 2.486 0 001.313-2.905 6.443 6.443 0 011.425-5.814 5.91 5.91 0 01.37-.381l.002-.003a4.014 4.014 0 01.124-.115l.014-.016A2.474 2.474 0 0022 10.254zm-3.16-1.433c.233.04.471.07.708.088h.01l.068.005a1.344 1.344 0 01-.108 2.683c-.023 0-.047 0-.07-.002h-.037a10.135 10.135 0 01-3.04-.692 10.275 10.275 0 01-3.6-2.422c.587-.735 1.08-1.54 1.468-2.397a7.497 7.497 0 004.6 2.737zm-4.575 6.471a11.408 11.408 0 00-4.515-.004 11.468 11.468 0 00-1.1-3.572 11.436 11.436 0 003.364-2.38c.965.987 2.101 1.79 3.353 2.373a11.467 11.467 0 00-1.103 3.583zM10.416 5.164a7.045 7.045 0 00.343-.674l.004-.01a1.346 1.346 0 012.449-.117v.002l.042.095.02.042c.117.313.114.66-.01.97-.013.028-.026.06-.04.088a.074.074 0 00-.003.009v.001a10.193 10.193 0 01-1.635 2.553 10.283 10.283 0 01-3.499 2.597 11.303 11.303 0 00-1.8-2.178 7.454 7.454 0 001.94-.983 7.601 7.601 0 002.189-2.397v.002zM4.132 11.81a7.397 7.397 0 00-.512-.522l-.004-.004a4.177 4.177 0 00-.066-.06l-.004-.004a1.344 1.344 0 01.785-2.3l.127-.008a1.337 1.337 0 01.974.393.612.612 0 00.057.05c.74.69 1.37 1.488 1.874 2.366a10.287 10.287 0 011.277 3.85c-.918.285-1.797.686-2.613 1.193a7.539 7.539 0 00-1.895-4.954zm4.308 7.974a7.701 7.701 0 00-.54.32l-.008.005a1.348 1.348 0 01-2.128-1.324l.048-.186c.08-.24.226-.453.422-.614l.23-.153.01-.006a10.17 10.17 0 012.923-1.29 10.26 10.26 0 014.772-.102c-.033.96.057 1.921.267 2.859a7.531 7.531 0 00-5.996.491zm9.842-5.06a7.616 7.616 0 00-.07 3.912 1.348 1.348 0 01-2.015 1.528l-.039-.026-.01-.006a1.36 1.36 0 01-.49-.64c-.027-.096-.051-.192-.074-.284l-.002-.008c-.57-2.379-.27-4.884.845-7.062.893.309 1.82.504 2.762.581a7.592 7.592 0 00-.907 2.005z",
+            fill: fillColor
+        })
+    }));
+};
+export default IconTokensRegular;

package/dist-es/hooks.js

@@ -147,10 +147,14 @@ export var useWindowSize = function() {
     ), 2), windowHeight = ref[0], setWindowHeight = ref[1];
     var ref6 = _slicedToArray(React.useState(typeof window !== "undefined" ? window.innerWidth : 800 // Best guess
     ), 2), windowWidth = ref6[0], setWindowWidth = ref6[1];
+    var ref7 = _slicedToArray(React.useState(typeof window !== "undefined" ? window.screen.availHeight : 1200), 2), screenHeight = ref7[0], setScreenHeight = ref7[1];
+    var ref8 = _slicedToArray(React.useState(typeof window !== "undefined" ? window.screen.availWidth : 800), 2), screenWidth = ref8[0], setScreenWidth = ref8[1];
     React.useEffect(function() {
         var handleResize = function() {
             setWindowHeight(window.innerHeight);
             setWindowWidth(window.innerWidth);
+            setScreenHeight(window.screen.availHeight);
+            setScreenWidth(window.screen.availWidth);
         };
         window.addEventListener("resize", handleResize);
         return function() {
@@ -161,11 +165,15 @@ export var useWindowSize = function() {
     return React.useMemo(function() {
         return {
             height: windowHeight,
-            width: windowWidth
+            width: windowWidth,
+            screenHeight: screenHeight,
+            screenWidth: screenWidth
         };
     }, [
         windowHeight,
-        windowWidth
+        windowWidth,
+        screenHeight,
+        screenWidth
     ]);
 };
 export var useWindowHeight = function() {
@@ -176,6 +184,10 @@ export var useWindowWidth = function() {
     var width = useWindowSize().width;
     return width;
 };
+export var useScreenHeight = function() {
+    var screenHeight = useWindowSize().screenHeight;
+    return screenHeight;
+};
 // React currently throws a warning when using useLayoutEffect on the server.
 // To get around it, we can conditionally useEffect on the server (no-op) and
 // useLayoutEffect in the browser

package/dist-es/image.js

@@ -99,11 +99,17 @@ function _unsupportedIterableToArray(o, minLen) {
     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 { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { createUseStyles } from "./jss";
-import { useSupportsAspectRatio } from "./utils/aspect-ratio-support";
+import { SkeletonRectangle } from "./skeletons";
+import { AspectRatioElement } from "./utils/aspect-ratio-support";
 import { getPrefixedDataAttributes } from "./utils/dom";
+import IconImageRegular from "./generated/mistica-icons/icon-image-regular";
+import { useIsInverseVariant } from "./theme-variant-context";
+import { useTheme } from "./hooks";
+import { VIVO_SKIN } from "./skins/constants";
+var FADE_IN_DURATION_MS = 300;
 /**
  * This context is used internally to disable the border radius. This is useful for example
  * when using the Image component inside a Card
@@ -118,59 +124,74 @@ export var DisableBorderRadiusProvider = function(param) {
         children: children
     });
 };
+var VivoLogo = function(param) {
+    var style = param.style;
+    var colors = useTheme().colors;
+    return /*#__PURE__*/ _jsx("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48",
+        fill: "none",
+        style: style,
+        children: /*#__PURE__*/ _jsx("path", {
+            d: "M24.021 35.7235C24.8145 35.7694 25.0467 36.1913 25.3157 36.5138C25.586 36.8362 29.515 41.551 29.7823 41.8569C30.0475 42.1662 30.7822 42.7329 31.5901 42.8405C32.3967 42.9473 33.282 42.7842 33.8484 42.3748C34.4135 41.965 35.1313 41.4073 35.3833 41.0356C35.6337 40.6638 36.061 40.1302 35.9823 39.2534C35.9028 38.3783 35.7112 37.9204 35.0268 37.1691C34.3433 36.4185 30.2992 31.6657 29.5382 30.7537C29.5382 30.7537 28.8467 29.9423 28.9469 28.7956C29.0476 27.6468 29.567 27.1343 30.6608 26.8487C31.7534 26.5647 36.0267 25.5306 36.0267 25.5306C36.0267 25.5306 38.4728 24.3723 37.9182 22.0776L37.5997 20.904C37.5997 20.904 37.0672 18.2264 33.5519 19.0556C30.0344 19.8869 28.0803 20.377 28.0803 20.377C28.0803 20.377 26.9602 20.4838 26.7999 19.744C26.6417 19.0038 26.8494 18.6218 27.3443 18.4156C27.8387 18.209 30.9611 16.7175 31.3617 12.6853C31.7652 8.65158 28.3882 5.06573 24.0091 5.08104C19.6288 5.0976 16.4594 8.39988 16.4725 11.8185C16.4856 15.2387 18.7033 17.5144 20.4079 18.3638C21.3752 18.8453 21.0656 19.7122 21.0656 19.7122C21.0656 19.7122 20.8334 20.5554 19.8153 20.3311C18.7972 20.1025 13.8657 18.9736 13.8657 18.9736C13.8657 18.9736 10.8914 18.4226 10.1732 21.359C9.4541 24.2978 11.1261 25.4143 12.3532 25.6908C13.5798 25.9669 17.7296 26.9716 17.7296 26.9716C17.7296 26.9716 18.9643 27.581 19.0125 28.8308C19.0425 29.5697 19.0438 30.1824 18.266 31.2832C17.4894 32.3835 12.6598 38.0148 12.6598 38.0148C12.6598 38.0148 10.9997 39.9862 13.4051 41.763C15.8106 43.5401 17.1641 43.1262 18.5921 41.4889C20.0188 39.852 22.8383 36.4243 22.8383 36.4243C22.8383 36.4243 23.2275 35.6788 24.021 35.7235Z",
+            stroke: colors.brand,
+            strokeWidth: "2"
+        })
+    });
+};
+var ImageError = function() {
+    var isInverse = useIsInverseVariant();
+    var ref = useTheme(), colors = ref.colors, skinName = ref.skinName;
+    return /*#__PURE__*/ _jsx("div", {
+        style: {
+            height: "100%",
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: isInverse ? colors.backgroundSkeletonInverse : colors.backgroundSkeleton,
+            borderRadius: 8
+        },
+        children: skinName === VIVO_SKIN ? /*#__PURE__*/ _jsx(VivoLogo, {
+            style: {
+                width: "10%",
+                minWidth: 24,
+                maxWidth: 48
+            }
+        }) : /*#__PURE__*/ _jsx(IconImageRegular, {
+            color: isInverse ? colors.inverse : colors.neutralMedium,
+            size: "",
+            style: {
+                width: "10%",
+                minWidth: 24,
+                maxWidth: 48
+            }
+        })
+    });
+};
 var useStyles = createUseStyles(function() {
     return {
         image: {
+            // needeed because images with aspect-ratio 0 and position absolute does not work
+            position: function(param) {
+                var ratio = param.ratio;
+                return ratio !== 0 ? "absolute" : "static";
+            },
+            top: 0,
+            left: 0,
             display: "block",
             objectFit: "cover",
+            width: "100%",
+            height: "100%",
             maxWidth: "100%",
             maxHeight: "100%",
             borderRadius: function(param) {
                 var noBorderRadius = param.noBorderRadius;
                 return noBorderRadius ? 0 : 8;
             },
-            "@supports (aspect-ratio: 1 / 1)": {
-                aspectRatio: function(param) {
-                    var aspectRatio = param.aspectRatio;
-                    return aspectRatio !== null && aspectRatio !== void 0 ? aspectRatio : "unset";
-                }
-            },
-            "$wrapper &": {
-                borderRadius: 0,
-                position: function(param) {
-                    var aspectRatio = param.aspectRatio;
-                    return(// when aspectRatio is 0, we want the video to use the original aspect ratio
-                    aspectRatio ? "absolute" : "static");
-                },
-                width: "100%",
-                height: "100%",
-                top: 0,
-                left: 0
-            },
-            opacity: function(param) {
-                var isError = param.isError;
-                return isError ? 0 : 1;
-            }
-        },
-        wrapper: {
-            borderRadius: function(param) {
-                var noBorderRadius = param.noBorderRadius;
-                return noBorderRadius ? 0 : 8;
-            },
-            overflow: "hidden",
-            maxWidth: "100%",
-            maxHeight: "100%",
-            position: "relative",
-            paddingTop: function(param) {
-                var aspectRatio = param.aspectRatio, width = param.width;
-                if (!aspectRatio) {
-                    return 0;
-                }
-                if (width && typeof width === "string" && width.endsWith("%")) {
-                    return "".concat(Number(width.replace("%", "")) / aspectRatio, "%");
-                }
-                return "".concat(100 / aspectRatio, "%");
-            }
+            transition: "opacity ".concat(FADE_IN_DURATION_MS, "ms"),
+            zIndex: 1
         }
     };
 });
@@ -181,74 +202,85 @@ export var RATIO = {
     "4:3": 4 / 3
 };
 var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? "1:1" : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? "" : _alt, dataAttributes = _param.dataAttributes, noBorderRadius = _param.noBorderRadius, src = _param.src, onError = _param.onError, onLoad = _param.onLoad, props = _objectWithoutProperties(_param, [
+    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? "1:1" : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? "" : _alt, dataAttributes = _param.dataAttributes, noBorderRadius = _param.noBorderRadius, src = _param.src, onError = _param.onError, onLoad = _param.onLoad, _loadingFallback = _param.loadingFallback, loadingFallback = _loadingFallback === void 0 ? true : _loadingFallback, _errorFallback = _param.errorFallback, errorFallback = _errorFallback === void 0 ? true : _errorFallback, props = _objectWithoutProperties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",
         "noBorderRadius",
         "src",
         "onError",
-        "onLoad"
+        "onLoad",
+        "loadingFallback",
+        "errorFallback"
     ]);
-    var supportsAspectRatio = useSupportsAspectRatio();
     var noBorderRadiusContext = useDisableBorderRadius();
     var noBorderSetting = noBorderRadius !== null && noBorderRadius !== void 0 ? noBorderRadius : noBorderRadiusContext;
     var _$ref = _slicedToArray(React.useState(false), 2), isError = _$ref[0], setIsError = _$ref[1];
+    var _$ref1 = _slicedToArray(React.useState(true), 2), isLoading = _$ref1[0], setIsLoading = _$ref1[1];
+    var _$ref2 = _slicedToArray(React.useState(false), 2), hideLoadingFallback = _$ref2[0], setHideLoadingFallback = _$ref2[1];
     var ratio = typeof aspectRatio === "number" ? aspectRatio : RATIO[aspectRatio];
-    // if width or height are numeric, we can calculate the other with the ratio without css.
-    // if aspect ratio is 0, we use the original image proportions
-    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && ratio !== 0;
     var classes = useStyles({
         noBorderRadius: noBorderSetting,
-        aspectRatio: withCssAspectRatio ? ratio : undefined,
-        width: props.width,
-        isError: isError
+        ratio: ratio
     });
-    var width = props.width;
-    var height = props.height;
-    if (props.width !== undefined && props.height !== undefined) {
-        width = props.width;
-        height = props.height;
-    } else if (typeof props.width === "number") {
-        height = ratio ? props.width / ratio : undefined;
-    } else if (typeof props.height === "number") {
-        width = ratio ? props.height * ratio : undefined;
-    } else {
-        width = props.width || "100%";
-    }
-    var needsWrapper = withCssAspectRatio && !supportsAspectRatio;
+    var withLoadingFallback = loadingFallback && !!(ratio !== 0 || props.width && props.height);
+    var withErrorFallback = errorFallback && !!(ratio !== 0 || props.width && props.height);
     var img = // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/309
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     /*#__PURE__*/ _jsx("img", _objectSpread({}, getPrefixedDataAttributes(dataAttributes), {
+        style: _objectSpread({}, isLoading && withLoadingFallback ? {
+            opacity: 0
+        } : {
+            opacity: 1
+        }),
         ref: ref,
         src: src,
         className: classes.image,
         alt: alt,
         onError: function(event) {
             setIsError(true);
+            setIsLoading(false);
+            setHideLoadingFallback(true);
             onError === null || onError === void 0 ? void 0 : onError(event);
         },
         onLoad: function(event) {
             setIsError(false);
+            setIsLoading(false);
+            setTimeout(function() {
+                setHideLoadingFallback(true);
+            }, FADE_IN_DURATION_MS);
             onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
         }
-    }, needsWrapper ? {
-        width: "100%"
-    } : {
-        width: width,
-        height: height
     }));
-    if (needsWrapper) {
-        return /*#__PURE__*/ _jsx("div", {
-            style: {
-                width: width,
-                height: height
-            },
-            className: classes.wrapper,
-            children: img
-        });
-    } else {
-        return img;
-    }
+    return /*#__PURE__*/ _jsxs(AspectRatioElement, {
+        style: {
+            position: "relative"
+        },
+        aspectRatio: ratio,
+        width: props.width,
+        height: props.height,
+        children: [
+            withLoadingFallback && !hideLoadingFallback && /*#__PURE__*/ _jsx("div", {
+                style: {
+                    position: "absolute",
+                    width: "100%",
+                    height: "100%"
+                },
+                children: /*#__PURE__*/ _jsx(SkeletonRectangle, {
+                    width: props.width,
+                    height: props.height
+                })
+            }),
+            isError && withErrorFallback && /*#__PURE__*/ _jsx("div", {
+                style: {
+                    position: "absolute",
+                    width: "100%",
+                    height: "100%"
+                },
+                children: /*#__PURE__*/ _jsx(ImageError, {})
+            }),
+            !isError && img
+        ]
+    });
 });
 export default Image;

package/dist-es/index.js

@@ -1600,6 +1600,9 @@ export { default as IconTipsAndTricksRegular } from "./generated/mistica-icons/i
 export { default as IconTkFilled } from "./generated/mistica-icons/icon-tk-filled";
 export { default as IconTkLight } from "./generated/mistica-icons/icon-tk-light";
 export { default as IconTkRegular } from "./generated/mistica-icons/icon-tk-regular";
+export { default as IconTokensFilled } from "./generated/mistica-icons/icon-tokens-filled";
+export { default as IconTokensLight } from "./generated/mistica-icons/icon-tokens-light";
+export { default as IconTokensRegular } from "./generated/mistica-icons/icon-tokens-regular";
 export { default as IconTongueFilled } from "./generated/mistica-icons/icon-tongue-filled";
 export { default as IconTongueLight } from "./generated/mistica-icons/icon-tongue-light";
 export { default as IconTongueRegular } from "./generated/mistica-icons/icon-tongue-regular";

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export var PACKAGE_VERSION = "12.6.0";
+export var PACKAGE_VERSION = "12.7.0";