@telefonica/mistica 12.9.1 → 12.10.0

package/dist/grid-layout.js

@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return k;
+        return A;
     }
 });
+var _dynamic = require("@vanilla-extract/dynamic");
 var _hooksJs = require("./hooks.js");
 var _containerTypeContextJs = /*#__PURE__*/ _interopRequireDefault(require("./container-type-context.js"));
-var _jssJs = require("./jss.js");
 var _domJs = require("./utils/dom.js");
+var _gridLayoutCssMisticaJs = require("./grid-layout.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -70,234 +71,110 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-var p = (0, _jssJs.createUseStyles)(function(e) {
-    var _obj, _obj1, _obj2, _obj3, _obj4, _obj5, _obj6, _obj7;
-    return {
-        grid: (_obj = {
-            display: "grid"
-        }, _defineProperty(_obj, e.mq.largeDesktop, {
-            gridColumnGap: 24,
-            gridTemplateColumns: "repeat(12, 1fr)"
-        }), _defineProperty(_obj, e.mq.desktop, {
-            gridTemplateColumns: "repeat(12, 1fr)",
-            gridColumnGap: 16
-        }), _defineProperty(_obj, e.mq.tabletOrSmaller, {
-            gridTemplateColumns: "minmax(0, 1fr)",
-            gridColumnGap: 16,
-            gap: function gap(param) {
-                var a = param.verticalSpace;
-                return a;
-            }
-        }), _obj),
-        span1: {
-            gridColumn: "span 1",
-            gap: function gap(param) {
-                var a = param.verticalSpace;
-                return a;
-            }
-        },
-        span3: (_obj1 = {}, _defineProperty(_obj1, e.mq.desktopOrBigger, {
-            gridColumn: "span 3"
-        }), _defineProperty(_obj1, e.mq.tabletOrSmaller, {
-            gridColumn: "span 1",
-            gap: function gap(param) {
-                var a = param.verticalSpace;
-                return a;
-            }
-        }), _obj1),
-        span4: (_obj2 = {}, _defineProperty(_obj2, e.mq.desktopOrBigger, {
-            gridColumn: "span 4"
-        }), _defineProperty(_obj2, e.mq.tabletOrSmaller, {
-            gridColumn: "span 1",
-            gap: function gap(param) {
-                var a = param.verticalSpace;
-                return a;
-            }
-        }), _obj2),
-        span5: (_obj3 = {}, _defineProperty(_obj3, e.mq.desktopOrBigger, {
-            gridColumn: "span 5"
-        }), _defineProperty(_obj3, e.mq.tabletOrSmaller, {
-            gridColumn: "span 1",
-            gap: function gap(param) {
-                var a = param.verticalSpace;
-                return a;
-            }
-        }), _obj3),
-        span6: (_obj4 = {}, _defineProperty(_obj4, e.mq.desktopOrBigger, {
-            gridColumn: "span 6"
-        }), _defineProperty(_obj4, e.mq.tabletOrSmaller, {
-            gridColumn: "span 1",
-            gap: function gap(param) {
-                var a = param.verticalSpace;
-                return a;
-            }
-        }), _obj4),
-        span8: (_obj5 = {}, _defineProperty(_obj5, e.mq.desktopOrBigger, {
-            gridColumn: "span 8"
-        }), _defineProperty(_obj5, e.mq.tabletOrSmaller, {
-            gridColumn: "span 1",
-            gap: function gap(param) {
-                var a = param.verticalSpace;
-                return a;
-            }
-        }), _obj5),
-        span9: (_obj6 = {}, _defineProperty(_obj6, e.mq.desktopOrBigger, {
-            gridColumn: "span 9"
-        }), _defineProperty(_obj6, e.mq.tabletOrSmaller, {
-            gridColumn: "span 1",
-            gap: function gap(param) {
-                var a = param.verticalSpace;
-                return a;
-            }
-        }), _obj6),
-        span10: (_obj7 = {}, _defineProperty(_obj7, e.mq.desktopOrBigger, {
-            gridColumn: "span 10"
-        }), _defineProperty(_obj7, e.mq.tabletOrSmaller, {
-            gridColumn: "span 1",
-            gap: function gap(param) {
-                var a = param.verticalSpace;
-                return a;
-            }
-        }), _obj7)
+var A = function A(i) {
+    var r = (0, _domJs.getPrefixedDataAttributes)(i.dataAttributes), ref = (0, _hooksJs.useScreenSize)(), u = ref.isMobile, o = ref.isTablet, d = function d(a) {
+        return u ? "mobile-column" : o ? "tablet-column" : a;
+    }, l = function l(a) {
+        return {
+            className: _gridLayoutCssMisticaJs.span,
+            style: (0, _dynamic.assignInlineVars)(_defineProperty({}, _gridLayoutCssMisticaJs.vars.colSpan, String(a)))
+        };
+    }, n = {
+        className: _gridLayoutCssMisticaJs.grid,
+        style: (0, _dynamic.assignInlineVars)(_defineProperty({}, _gridLayoutCssMisticaJs.vars.verticalSpace, i.verticalSpace ? "".concat(i.verticalSpace, "px") : ""))
     };
-}), k = function k(e) {
-    var s;
-    var a = p({
-        verticalSpace: (s = e.verticalSpace) != null ? s : 0
-    }), d = (0, _domJs.getPrefixedDataAttributes)(e.dataAttributes), ref = (0, _hooksJs.useScreenSize)(), m = ref.isMobile, t = ref.isTablet, i = function i(c) {
-        return m ? "mobile-column" : t ? "tablet-column" : c;
-    };
-    return e.template === "6+6" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
-        className: a.grid
-    }, d), {
+    return i.template === "6+6" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({}, n, r), {
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_containerTypeContextJs.default.Provider, {
-                value: i("desktop-medium-column"),
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: a.span6,
-                    children: e.left
-                })
+                value: d("desktop-medium-column"),
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, l(6)), {
+                    children: i.left
+                }))
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_containerTypeContextJs.default.Provider, {
-                value: i("desktop-medium-column"),
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: a.span6,
-                    children: e.right
-                })
+                value: d("desktop-medium-column"),
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, l(6)), {
+                    children: i.right
+                }))
             })
         ]
-    })) : e.template === "8+4" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
-        className: a.grid
-    }, d), {
+    })) : i.template === "8+4" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({}, n, r), {
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_containerTypeContextJs.default.Provider, {
-                value: i("desktop-medium-column"),
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: a.span8,
-                    children: e.left
-                })
+                value: d("desktop-medium-column"),
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, l(8)), {
+                    children: i.left
+                }))
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_containerTypeContextJs.default.Provider, {
-                value: i("desktop-small-column"),
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: a.span4,
-                    children: e.right
-                })
+                value: d("desktop-small-column"),
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, l(4)), {
+                    children: i.right
+                }))
             })
         ]
-    })) : e.template === "4+6" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
-        className: a.grid
-    }, d), {
+    })) : i.template === "4+6" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({}, n, r), {
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_containerTypeContextJs.default.Provider, {
-                value: i("desktop-small-column"),
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: a.span4,
-                    children: e.left
-                })
-            }),
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: a.span1
+                value: d("desktop-small-column"),
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, l(4)), {
+                    children: i.left
+                }))
             }),
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpread({}, l(1))),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_containerTypeContextJs.default.Provider, {
-                value: i("desktop-medium-column"),
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: a.span6,
-                    children: e.right
-                })
+                value: d("desktop-medium-column"),
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, l(6)), {
+                    children: i.right
+                }))
             }),
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: a.span1
-            })
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpread({}, l(1)))
         ]
-    })) : e.template === "5+4" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
-        className: a.grid
-    }, d), {
+    })) : i.template === "5+4" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({}, n, r), {
         children: [
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: a.span1
-            }),
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpread({}, l(1))),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_containerTypeContextJs.default.Provider, {
-                value: i("desktop-small-column"),
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: a.span5,
-                    children: e.left
-                })
-            }),
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: a.span1
+                value: d("desktop-small-column"),
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, l(5)), {
+                    children: i.left
+                }))
             }),
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpread({}, l(1))),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_containerTypeContextJs.default.Provider, {
-                value: i("desktop-small-column"),
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: a.span4,
-                    children: e.right
-                })
+                value: d("desktop-small-column"),
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, l(4)), {
+                    children: i.right
+                }))
             }),
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: a.span1
-            })
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpread({}, l(1)))
         ]
-    })) : e.template === "3+9" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
-        className: a.grid
-    }, d), {
+    })) : i.template === "3+9" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({}, n, r), {
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_containerTypeContextJs.default.Provider, {
-                value: i("desktop-small-column"),
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: a.span3,
-                    children: e.left
-                })
+                value: d("desktop-small-column"),
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, l(3)), {
+                    children: i.left
+                }))
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_containerTypeContextJs.default.Provider, {
-                value: i("desktop-medium-column"),
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: a.span9,
-                    children: e.right
-                })
+                value: d("desktop-medium-column"),
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, l(9)), {
+                    children: i.right
+                }))
             })
         ]
-    })) : e.template === "10" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
-        className: a.grid
-    }, d), {
+    })) : i.template === "10" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({}, n, r), {
         children: [
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: a.span1
-            }),
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpread({}, l(1))),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_containerTypeContextJs.default.Provider, {
-                value: i("desktop-wide-column"),
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: a.span10,
-                    children: e.children
-                })
+                value: d("desktop-wide-column"),
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, l(10)), {
+                    children: i.children
+                }))
             }),
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: a.span1
-            })
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpread({}, l(1)))
         ]
-    })) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({
-        className: a.grid
-    }, d), {
-        children: e.children
+    })) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, n, r), {
+        children: i.children
     }));
 };

package/dist/header.js

@@ -32,6 +32,7 @@ var _hooksJs = require("./hooks.js");
 var _overscrollColorContextJs = /*#__PURE__*/ _interopRequireDefault(require("./overscroll-color-context.js"));
 var _textJs = require("./text.js");
 var _buttonGroupJs = /*#__PURE__*/ _interopRequireDefault(require("./button-group.js"));
+var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -119,18 +120,18 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 var K = function K(param) {
     var o = param.pretitle, e = param.title, i = param.preamount, n = param.amount, t = param.button, s = param.subtitle, d = param.isErrorAmount, m = param.secondaryButton, I = param.dataAttributes;
-    var ref = (0, _hooksJs.useScreenSize)(), N = ref.isTabletOrSmaller, h = (0, _hooksJs.useTheme)(), H = (0, _themeVariantContextJs.useIsInverseVariant)(), u = function u(p, T) {
+    var ref = (0, _hooksJs.useScreenSize)(), N = ref.isTabletOrSmaller, H = (0, _themeVariantContextJs.useIsInverseVariant)(), u = function u(p, y) {
         if (typeof p == "string") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, _objectSpreadProps(_objectSpread({
             regular: !0
-        }, T), {
+        }, y), {
             children: p
         }));
-        var M = p.text, L = _objectWithoutProperties(p, [
+        var G = p.text, L = _objectWithoutProperties(p, [
             "text"
         ]);
         return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, _objectSpreadProps(_objectSpread({
             regular: !0
-        }, T, L), {
+        }, y, L), {
             children: p.text
         }));
     };
@@ -144,7 +145,7 @@ var K = function K(param) {
                     space: 8,
                     children: [
                         o && u(o, {
-                            color: h.colors.textPrimary
+                            color: _skinContractCssMisticaJs.vars.colors.textPrimary
                         }),
                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
                             role: "heading",
@@ -161,10 +162,10 @@ var K = function K(param) {
                         space: 8,
                         children: [
                             i && u(i, {
-                                color: h.colors.textPrimary
+                                color: _skinContractCssMisticaJs.vars.colors.textPrimary
                             }),
                             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text8, {
-                                color: d && !H ? h.colors.highlight : h.colors.textPrimary,
+                                color: d && !H ? _skinContractCssMisticaJs.vars.colors.highlight : _skinContractCssMisticaJs.vars.colors.textPrimary,
                                 children: n
                             })
                         ]

package/dist/image.css-mistica.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    FADE_IN_DURATION_MS: function() {
+        return f;
+    },
+    image: function() {
+        return n;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./image.css.ts.vanilla.js");
+var f = 300, n = "_17tt25r1 _1y2v1nfbg _1y2v1nfbu _1y2v1nf7d _1y2v1nf9h _1y2v1nf9x _1y2v1nfd0 _1y2v1nfb4 _1y2v1nfb5";

package/dist/image.css.d.ts

@@ -0,0 +1,3 @@
+export declare const FADE_IN_DURATION_MS = 300;
+export declare const image: string;
+export declare const noBorder: string;

package/dist/image.css.js.flow

@@ -0,0 +1,5 @@
+// @flow
+
+declare export var FADE_IN_DURATION_MS: 300;
+declare export var image: string;
+declare export var noBorder: string;

package/dist/image.css.ts.vanilla.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return a;
+    }
+});
+var a = "";

package/dist/image.js

@@ -10,20 +10,20 @@ function _export(target, all) {
 }
 _export(exports, {
     DisableBorderRadiusProvider: function() {
-        return X;
+        return t3;
     },
     RATIO: function() {
         return z;
     },
     default: function() {
-        return Y;
+        return e3;
     },
     useDisableBorderRadius: function() {
-        return E;
+        return O;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-var _jssJs = require("./jss.js");
+var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _skeletonsJs = require("./skeletons.js");
 var _aspectRatioSupportJs = require("./utils/aspect-ratio-support.js");
 var _domJs = require("./utils/dom.js");
@@ -31,6 +31,8 @@ var _iconImageRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./genera
 var _themeVariantContextJs = require("./theme-variant-context.js");
 var _hooksJs = require("./hooks.js");
 var _constantsJs = require("./skins/constants.js");
+var _sprinklesCssMisticaJs = require("./sprinkles.css-mistica.js");
+var _imageCssMisticaJs = require("./image.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -201,31 +203,31 @@ 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);
 }
-var b = 300, w = /*#__PURE__*/ _react.createContext(!1), E = function E() {
-    return _react.useContext(w);
-}, X = function X(param) {
-    var t = param.children;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(w.Provider, {
+var b = /*#__PURE__*/ _react.createContext(!1), O = function O() {
+    return _react.useContext(b);
+}, t3 = function t3(param) {
+    var e = param.children;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(b.Provider, {
         value: !0,
-        children: t
+        children: e
     });
-}, M = function M(param) {
-    var t = param.style;
+}, P = function P(param) {
+    var e = param.style;
     var ref = (0, _hooksJs.useTheme)(), i = ref.colors;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("svg", {
         width: "48",
         height: "48",
         viewBox: "0 0 48 48",
         fill: "none",
-        style: t,
+        style: e,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.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: i.brand,
             strokeWidth: "2"
         })
     });
-}, O = function O() {
-    var t = (0, _themeVariantContextJs.useIsInverseVariant)(), ref = (0, _hooksJs.useTheme)(), i = ref.colors, a = ref.skinName;
+}, B = function B() {
+    var e = (0, _themeVariantContextJs.useIsInverseVariant)(), ref = (0, _hooksJs.useTheme)(), i = ref.colors, a = ref.skinName;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
         style: {
             height: "100%",
@@ -233,17 +235,17 @@ var b = 300, w = /*#__PURE__*/ _react.createContext(!1), E = function E() {
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: t ? i.backgroundSkeletonInverse : i.backgroundSkeleton,
+            backgroundColor: e ? i.backgroundSkeletonInverse : i.backgroundSkeleton,
             borderRadius: 8
         },
-        children: a === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(M, {
+        children: a === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(P, {
             style: {
                 width: "10%",
                 minWidth: 24,
                 maxWidth: 48
             }
         }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconImageRegularJs.default, {
-            color: t ? i.inverse : i.neutralMedium,
+            color: e ? i.inverse : i.neutralMedium,
             size: "",
             style: {
                 width: "10%",
@@ -252,36 +254,13 @@ var b = 300, w = /*#__PURE__*/ _react.createContext(!1), E = function E() {
             }
         })
     });
-}, P = (0, _jssJs.createUseStyles)(function() {
-    return {
-        image: {
-            position: function position(param) {
-                var t = param.ratio;
-                return t !== 0 ? "absolute" : "static";
-            },
-            top: 0,
-            left: 0,
-            display: "block",
-            objectFit: "cover",
-            width: "100%",
-            height: "100%",
-            maxWidth: "100%",
-            maxHeight: "100%",
-            borderRadius: function borderRadius(param) {
-                var t = param.noBorderRadius;
-                return t ? 0 : 8;
-            },
-            transition: "opacity ".concat(b, "ms"),
-            zIndex: 1
-        }
-    };
-}), z = {
+}, z = {
     "1:1": 1,
     "16:9": 16 / 9,
     "7:10": 7 / 10,
     "4:3": 4 / 3
-}, Y = /*#__PURE__*/ _react.forwardRef(function(_param, x) {
-    var tmp = _param.aspectRatio, t = tmp === void 0 ? "1:1" : tmp, tmp1 = _param.alt, i = tmp1 === void 0 ? "" : tmp1, a = _param.dataAttributes, n = _param.noBorderRadius, I = _param.src, l = _param.onError, c = _param.onLoad, tmp2 = _param.loadingFallback, y = tmp2 === void 0 ? !0 : tmp2, tmp3 = _param.errorFallback, v = tmp3 === void 0 ? !0 : tmp3, s = _objectWithoutProperties(_param, [
+}, e3 = /*#__PURE__*/ _react.forwardRef(function(_param, k) {
+    var tmp = _param.aspectRatio, e = tmp === void 0 ? "1:1" : tmp, tmp1 = _param.alt, i = tmp1 === void 0 ? "" : tmp1, a = _param.dataAttributes, n = _param.noBorderRadius, w = _param.src, l = _param.onError, d = _param.onLoad, tmp2 = _param.loadingFallback, I = tmp2 === void 0 ? !0 : tmp2, tmp3 = _param.errorFallback, v = tmp3 === void 0 ? !0 : tmp3, o = _objectWithoutProperties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",
@@ -292,26 +271,26 @@ var b = 300, w = /*#__PURE__*/ _react.createContext(!1), E = function E() {
         "loadingFallback",
         "errorFallback"
     ]);
-    var k = E(), S = n != null ? n : k, ref = _slicedToArray(_react.useState(!1), 2), h = ref[0], m = ref[1], ref1 = _slicedToArray(_react.useState(!0), 2), p = ref1[0], C = ref1[1], ref2 = _slicedToArray(_react.useState(!1), 2), R = ref2[0], u = ref2[1], r = typeof t == "number" ? t : z[t], D = P({
-        noBorderRadius: S,
-        ratio: r
-    }), g = y && !!(r !== 0 || s.width && s.height), F = v && !!(r !== 0 || s.width && s.height), W = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(a)), {
+    var x = O(), y = n != null ? n : x, ref = _slicedToArray(_react.useState(!1), 2), c = ref[0], m = ref[1], ref1 = _slicedToArray(_react.useState(!0), 2), p = ref1[0], C = ref1[1], ref2 = _slicedToArray(_react.useState(!1), 2), S = ref2[0], u = ref2[1], r = typeof e == "number" ? e : z[e], g = I && !!(r !== 0 || o.width && o.height), R = v && !!(r !== 0 || o.width && o.height), D = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(a)), {
         style: _objectSpread({}, p && g ? {
             opacity: 0
         } : {
             opacity: 1
         }),
-        ref: x,
-        src: I,
-        className: D.image,
+        ref: k,
+        src: w,
+        className: (0, _classnames.default)(_imageCssMisticaJs.image, (0, _sprinklesCssMisticaJs.sprinkles)({
+            position: r !== 0 ? "absolute" : "static",
+            borderRadius: y ? void 0 : 8
+        })),
         alt: i,
-        onError: function onError(d) {
-            m(!0), C(!1), u(!0), l == null || l(d);
+        onError: function onError(h) {
+            m(!0), C(!1), u(!0), l == null || l(h);
         },
-        onLoad: function onLoad(d) {
+        onLoad: function onLoad(h) {
             m(!1), C(!1), setTimeout(function() {
                 u(!0);
-            }, b), c == null || c(d);
+            }, _imageCssMisticaJs.FADE_IN_DURATION_MS), d == null || d(h);
         }
     }));
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_aspectRatioSupportJs.AspectRatioElement, {
@@ -319,29 +298,29 @@ var b = 300, w = /*#__PURE__*/ _react.createContext(!1), E = function E() {
             position: "relative"
         },
         aspectRatio: r,
-        width: s.width,
-        height: s.height,
+        width: o.width,
+        height: o.height,
         children: [
-            g && !R && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            g && !S && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
                     height: "100%"
                 },
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_skeletonsJs.SkeletonRectangle, {
-                    width: s.width,
-                    height: s.height
+                    width: o.width,
+                    height: o.height
                 })
             }),
-            h && F && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            c && R && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
                     height: "100%"
                 },
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(O, {})
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(B, {})
             }),
-            !h && W
+            !c && D
         ]
     });
 });