@telefonica/mistica 14.36.1 → 14.37.0

package/dist/grid.css-mistica.js

@@ -31,10 +31,10 @@ _export(exports, {
         return r;
     },
     gridAutoFlow: function() {
-        return a;
+        return t;
     },
     gridJustifyContent: function() {
-        return t;
+        return a;
     },
     gridJustifyItems: function() {
         return n;
@@ -69,131 +69,129 @@ _export(exports, {
 });
 require("./grid.css.ts.vanilla.css-mistica.js");
 var i = {
-    start: "mfyikv36",
-    end: "mfyikv37",
-    center: "mfyikv38",
-    stretch: "mfyikv39",
-    baseline: "mfyikv3a"
+    start: "mfyikv34",
+    end: "mfyikv35",
+    center: "mfyikv36",
+    stretch: "mfyikv37",
+    baseline: "mfyikv38"
 }, m = {
-    1: "mfyikv2e",
-    2: "mfyikv2f",
-    3: "mfyikv2g",
-    4: "mfyikv2h",
-    5: "mfyikv2i",
-    6: "mfyikv2j",
-    7: "mfyikv2k",
-    8: "mfyikv2l",
-    9: "mfyikv2m",
-    10: "mfyikv2n",
-    11: "mfyikv2o",
-    12: "mfyikv2p"
-}, f = "mfyikv1o", y = "mfyikv1p", k = "mfyikv6", e = {
-    start: "mfyikv1h",
-    end: "mfyikv1i",
-    center: "mfyikv1j",
-    stretch: "mfyikv1k",
-    "space-between": "mfyikv1l",
-    "space-around": "mfyikv1m",
-    "space-evenly": "mfyikv1n"
+    1: "mfyikv2c",
+    2: "mfyikv2d",
+    3: "mfyikv2e",
+    4: "mfyikv2f",
+    5: "mfyikv2g",
+    6: "mfyikv2h",
+    7: "mfyikv2i",
+    8: "mfyikv2j",
+    9: "mfyikv2k",
+    10: "mfyikv2l",
+    11: "mfyikv2m",
+    12: "mfyikv2n"
+}, f = "mfyikv1m", y = "mfyikv1n", k = "mfyikv4", e = {
+    start: "mfyikv1f",
+    end: "mfyikv1g",
+    center: "mfyikv1h",
+    stretch: "mfyikv1i",
+    "space-between": "mfyikv1j",
+    "space-around": "mfyikv1k",
+    "space-evenly": "mfyikv1l"
 }, r = {
-    start: "mfyikv15",
-    end: "mfyikv16",
-    center: "mfyikv17",
-    stretch: "mfyikv18",
-    baseline: "mfyikv19"
-}, a = {
-    column: "mfyikvx",
-    row: "mfyikvy",
-    "row dense": "mfyikvz",
-    "column dense": "mfyikv10"
+    start: "mfyikv13",
+    end: "mfyikv14",
+    center: "mfyikv15",
+    stretch: "mfyikv16",
+    baseline: "mfyikv17"
 }, t = {
-    start: "mfyikv1a",
-    end: "mfyikv1b",
-    center: "mfyikv1c",
-    stretch: "mfyikv1d",
-    "space-between": "mfyikv1e",
-    "space-around": "mfyikv1f",
-    "space-evenly": "mfyikv1g"
+    column: "mfyikvv",
+    row: "mfyikvw",
+    "row dense": "mfyikvx",
+    "column dense": "mfyikvy"
+}, a = {
+    start: "mfyikv18",
+    end: "mfyikv19",
+    center: "mfyikv1a",
+    stretch: "mfyikv1b",
+    "space-between": "mfyikv1c",
+    "space-around": "mfyikv1d",
+    "space-evenly": "mfyikv1e"
 }, n = {
-    start: "mfyikv11",
-    end: "mfyikv12",
-    center: "mfyikv13",
-    stretch: "mfyikv14"
+    start: "mfyikvz",
+    end: "mfyikv10",
+    center: "mfyikv11",
+    stretch: "mfyikv12"
 }, s = {
-    1: "mfyikv9",
-    2: "mfyikva",
-    3: "mfyikvb",
-    4: "mfyikvc",
-    5: "mfyikvd",
-    6: "mfyikve",
-    7: "mfyikvf",
-    8: "mfyikvg",
-    9: "mfyikvh",
-    10: "mfyikvi",
-    11: "mfyikvj",
-    12: "mfyikvk"
-}, o = "mfyikv7", l = {
-    1: "mfyikvl",
-    2: "mfyikvm",
-    3: "mfyikvn",
-    4: "mfyikvo",
-    5: "mfyikvp",
-    6: "mfyikvq",
-    7: "mfyikvr",
-    8: "mfyikvs",
-    9: "mfyikvt",
-    10: "mfyikvu",
-    11: "mfyikvv",
-    12: "mfyikvw"
-}, c = "mfyikv8", d = {
-    start: "mfyikv32",
-    end: "mfyikv33",
-    center: "mfyikv34",
-    stretch: "mfyikv35"
+    1: "mfyikv7",
+    2: "mfyikv8",
+    3: "mfyikv9",
+    4: "mfyikva",
+    5: "mfyikvb",
+    6: "mfyikvc",
+    7: "mfyikvd",
+    8: "mfyikve",
+    9: "mfyikvf",
+    10: "mfyikvg",
+    11: "mfyikvh",
+    12: "mfyikvi"
+}, o = "mfyikv5", l = {
+    1: "mfyikvj",
+    2: "mfyikvk",
+    3: "mfyikvl",
+    4: "mfyikvm",
+    5: "mfyikvn",
+    6: "mfyikvo",
+    7: "mfyikvp",
+    8: "mfyikvq",
+    9: "mfyikvr",
+    10: "mfyikvs",
+    11: "mfyikvt",
+    12: "mfyikvu"
+}, c = "mfyikv6", d = {
+    start: "mfyikv30",
+    end: "mfyikv31",
+    center: "mfyikv32",
+    stretch: "mfyikv33"
 }, u = {
-    1: "mfyikv2q",
-    2: "mfyikv2r",
-    3: "mfyikv2s",
-    4: "mfyikv2t",
-    5: "mfyikv2u",
-    6: "mfyikv2v",
-    7: "mfyikv2w",
-    8: "mfyikv2x",
-    9: "mfyikv2y",
-    10: "mfyikv2z",
-    11: "mfyikv30",
-    12: "mfyikv31"
+    1: "mfyikv2o",
+    2: "mfyikv2p",
+    3: "mfyikv2q",
+    4: "mfyikv2r",
+    5: "mfyikv2s",
+    6: "mfyikv2t",
+    7: "mfyikv2u",
+    8: "mfyikv2v",
+    9: "mfyikv2w",
+    10: "mfyikv2x",
+    11: "mfyikv2y",
+    12: "mfyikv2z"
 }, p = {
-    1: "mfyikv1q",
-    2: "mfyikv1r",
-    3: "mfyikv1s",
-    4: "mfyikv1t",
-    5: "mfyikv1u",
-    6: "mfyikv1v",
-    7: "mfyikv1w",
-    8: "mfyikv1x",
-    9: "mfyikv1y",
-    10: "mfyikv1z",
-    11: "mfyikv20",
-    12: "mfyikv21"
+    1: "mfyikv1o",
+    2: "mfyikv1p",
+    3: "mfyikv1q",
+    4: "mfyikv1r",
+    5: "mfyikv1s",
+    6: "mfyikv1t",
+    7: "mfyikv1u",
+    8: "mfyikv1v",
+    9: "mfyikv1w",
+    10: "mfyikv1x",
+    11: "mfyikv1y",
+    12: "mfyikv1z"
 }, g = {
-    1: "mfyikv22",
-    2: "mfyikv23",
-    3: "mfyikv24",
-    4: "mfyikv25",
-    5: "mfyikv26",
-    6: "mfyikv27",
-    7: "mfyikv28",
-    8: "mfyikv29",
-    9: "mfyikv2a",
-    10: "mfyikv2b",
-    11: "mfyikv2c",
-    12: "mfyikv2d"
+    1: "mfyikv20",
+    2: "mfyikv21",
+    3: "mfyikv22",
+    4: "mfyikv23",
+    5: "mfyikv24",
+    6: "mfyikv25",
+    7: "mfyikv26",
+    8: "mfyikv27",
+    9: "mfyikv28",
+    10: "mfyikv29",
+    11: "mfyikv2a",
+    12: "mfyikv2b"
 }, w = {
-    rowGap: "var(--mfyikv0)",
-    columnGap: "var(--mfyikv1)",
-    rowMinSize: "var(--mfyikv2)",
-    rowMaxSize: "var(--mfyikv3)",
-    columnMinSize: "var(--mfyikv4)",
-    columnMaxSize: "var(--mfyikv5)"
+    rowMinSize: "var(--mfyikv0)",
+    rowMaxSize: "var(--mfyikv1)",
+    columnMinSize: "var(--mfyikv2)",
+    columnMaxSize: "var(--mfyikv3)"
 };

package/dist/grid.css.d.ts

@@ -1,6 +1,4 @@
 export declare const vars: {
-    rowGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    columnGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     rowMinSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     rowMaxSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     columnMinSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/grid.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { DataAttributes } from './utils/types';
+import type { ByBreakpoint, DataAttributes } from './utils/types';
 type RowsColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 type Gap = 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80;
 type AutoFillConfig = {
@@ -12,7 +12,7 @@ type AutoFillConfig = {
 type GridProps = {
     rows?: RowsColumns | AutoFillConfig;
     columns?: RowsColumns | AutoFillConfig;
-    gap?: Gap | [Gap, Gap];
+    gap?: ByBreakpoint<Gap> | [ByBreakpoint<Gap>, ByBreakpoint<Gap>];
     flow?: 'column' | 'row' | 'column dense' | 'row dense';
     justifyItems?: 'start' | 'end' | 'center' | 'stretch';
     alignItems?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';

package/dist/grid.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     Grid: function() {
-        return Q;
+        return Y;
     },
     GridItem: function() {
-        return U;
+        return Z;
     }
 });
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
@@ -21,6 +21,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _gridcssmistica = require("./grid.css-mistica.js");
 const _css = require("./utils/css.js");
 const _dom = require("./utils/dom.js");
+const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -95,30 +96,44 @@ function _object_spread(target) {
     }
     return target;
 }
-const B = (t, e)=>{
-    const r = {}, m = (i)=>typeof i == "number" ? `min(${i}px, 100%)` : i, f = (i)=>typeof i == "number" ? `${i}px` : i;
-    return t && typeof t != "number" && (typeof t.minSize < "u" && (r[_gridcssmistica.vars.rowMinSize] = m(t.minSize)), typeof t.maxSize < "u" && (r[_gridcssmistica.vars.rowMaxSize] = f(t.maxSize))), e && typeof e != "number" && (typeof e.minSize < "u" && (r[_gridcssmistica.vars.columnMinSize] = m(e.minSize)), typeof e.maxSize < "u" && (r[_gridcssmistica.vars.columnMaxSize] = f(e.maxSize))), r;
-}, Q = /*#__PURE__*/ _react.forwardRef((param, g)=>{
-    let { rows: t, columns: e, gap: r = 0, flow: m, justifyItems: f, alignItems: i, justifyContent: o, alignContent: n, height: u, minHeight: l, children: p, as: A = "div", dataAttributes: R } = param;
-    const [y, x] = Array.isArray(r) ? r : [
-        r,
-        r
-    ];
-    return /*#__PURE__*/ _react.createElement(A, _object_spread({
-        ref: g,
-        className: (0, _classnames.default)(_gridcssmistica.grid, e ? typeof e == "number" ? _gridcssmistica.gridTemplateColumns[e] : _gridcssmistica.gridTemplateColumnsAutoRepeat : "", t ? typeof t == "number" ? _gridcssmistica.gridTemplateRows[t] : _gridcssmistica.gridTemplateRowsAutoRepeat : "", m ? _gridcssmistica.gridAutoFlow[m] : "", f ? _gridcssmistica.gridJustifyItems[f] : "", i ? _gridcssmistica.gridAlignItems[i] : "", o ? _gridcssmistica.gridJustifyContent[o] : "", n ? _gridcssmistica.gridAlignContent[n] : ""),
+const K = (t, e)=>{
+    const i = {}, f = (r)=>typeof r == "number" ? `min(${r}px, 100%)` : r, o = (r)=>typeof r == "number" ? `${r}px` : r;
+    return t && typeof t != "number" && (typeof t.minSize < "u" && (i[_gridcssmistica.vars.rowMinSize] = f(t.minSize)), typeof t.maxSize < "u" && (i[_gridcssmistica.vars.rowMaxSize] = o(t.maxSize))), e && typeof e != "number" && (typeof e.minSize < "u" && (i[_gridcssmistica.vars.columnMinSize] = f(e.minSize)), typeof e.maxSize < "u" && (i[_gridcssmistica.vars.columnMaxSize] = o(e.maxSize))), i;
+}, Y = /*#__PURE__*/ _react.forwardRef((param, x)=>{
+    let { rows: t, columns: e, gap: i = 0, flow: f, justifyItems: o, alignItems: r, justifyContent: l, alignContent: n, height: u, minHeight: y, children: s, as: z = "div", dataAttributes: S } = param;
+    const [m, a] = Array.isArray(i) ? i : [
+        i,
+        i
+    ], A = {
+        columnGap: m,
+        rowGap: a,
+        gridColumnGap: m,
+        gridRowGap: a
+    };
+    let b = {}, g = "";
+    try {
+        g = (0, _sprinklescssmistica.sprinkles)(A);
+    } catch (e) {
+        b = {
+            columnGap: typeof m == "object" ? m.mobile : m,
+            rowGap: typeof a == "object" ? a.mobile : a,
+            // Chrome 57-65 support
+            gridColumnGap: typeof m == "object" ? m.mobile : m,
+            gridRowGap: typeof a == "object" ? a.mobile : a
+        };
+    }
+    return /*#__PURE__*/ _react.createElement(z, _object_spread({
+        ref: x,
+        className: (0, _classnames.default)(_gridcssmistica.grid, g, e ? typeof e == "number" ? _gridcssmistica.gridTemplateColumns[e] : _gridcssmistica.gridTemplateColumnsAutoRepeat : "", t ? typeof t == "number" ? _gridcssmistica.gridTemplateRows[t] : _gridcssmistica.gridTemplateRowsAutoRepeat : "", f ? _gridcssmistica.gridAutoFlow[f] : "", o ? _gridcssmistica.gridJustifyItems[o] : "", r ? _gridcssmistica.gridAlignItems[r] : "", l ? _gridcssmistica.gridJustifyContent[l] : "", n ? _gridcssmistica.gridAlignContent[n] : ""),
         style: _object_spread({
             height: u,
-            minHeight: l
-        }, (0, _css.applyCssVars)(_object_spread({
-            [_gridcssmistica.vars.columnGap]: y ? `${y}px` : "",
-            [_gridcssmistica.vars.rowGap]: x ? `${x}px` : ""
-        }, B(t, e))))
-    }, (0, _dom.getPrefixedDataAttributes)(R)), p);
-}), U = /*#__PURE__*/ _react.forwardRef((param, p)=>{
-    let { rowStart: t, rowSpan: e, columnStart: r, columnSpan: m, span: f, justifySelf: i, alignSelf: o, children: n, as: u = "div", dataAttributes: l } = param;
-    return f && (Array.isArray(f) ? (m = f[0], e = f[1]) : (m = f, e = f)), /*#__PURE__*/ _react.createElement(u, _object_spread({
-        ref: p,
-        className: (0, _classnames.default)(m ? m === "full" ? _gridcssmistica.fullColumns : _gridcssmistica.spanColumns[m] : "", e ? e === "full" ? _gridcssmistica.fullRows : _gridcssmistica.spanRows[e] : "", r ? _gridcssmistica.columnStart[r] : "", t ? _gridcssmistica.rowStart[t] : "", i ? _gridcssmistica.justifySelf[i] : "", o ? _gridcssmistica.alignSelf[o] : "")
-    }, (0, _dom.getPrefixedDataAttributes)(l)), n);
+            minHeight: y
+        }, g ? {} : b, (0, _css.applyCssVars)(_object_spread({}, K(t, e))))
+    }, (0, _dom.getPrefixedDataAttributes)(S)), s);
+}), Z = /*#__PURE__*/ _react.forwardRef((param, s)=>{
+    let { rowStart: t, rowSpan: e, columnStart: i, columnSpan: f, span: o, justifySelf: r, alignSelf: l, children: n, as: u = "div", dataAttributes: y } = param;
+    return o && (Array.isArray(o) ? (f = o[0], e = o[1]) : (f = o, e = o)), /*#__PURE__*/ _react.createElement(u, _object_spread({
+        ref: s,
+        className: (0, _classnames.default)(f ? f === "full" ? _gridcssmistica.fullColumns : _gridcssmistica.spanColumns[f] : "", e ? e === "full" ? _gridcssmistica.fullRows : _gridcssmistica.spanRows[e] : "", i ? _gridcssmistica.columnStart[i] : "", t ? _gridcssmistica.rowStart[t] : "", r ? _gridcssmistica.justifySelf[r] : "", l ? _gridcssmistica.alignSelf[l] : "")
+    }, (0, _dom.getPrefixedDataAttributes)(y)), n);
 });

package/dist/header.css-mistica.js

@@ -21,4 +21,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./header.css.ts.vanilla.css-mistica.js");
-var t = "mtk7e90 _1y2v1nf82", m = "mtk7e93", a = "mtk7e90";
+var t = "mtk7e90 _1y2v1nf88", m = "mtk7e93", a = "mtk7e90";

package/dist/hero.css-mistica.js

@@ -13,16 +13,16 @@ _export(exports, {
         return t;
     },
     container: function() {
-        return v;
+        return n;
     },
     containerDesktop: function() {
-        return n;
+        return a;
     },
     containerMobile: function() {
-        return b;
+        return _;
     },
     layout: function() {
-        return _;
+        return i;
     },
     vars: function() {
         return p;
@@ -31,6 +31,6 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./responsive-layout.css.ts.vanilla.css-mistica.js");
 require("./hero.css.ts.vanilla.css-mistica.js");
-var t = "_16rbpto6 _1y2v1nfba _1y2v1nfbw _1y2v1nfbq", v = "_16rbpto2 _1y2v1nfba", n = "_1y2v1nfbp _1y2v1nfce", b = "_1y2v1nfbg", _ = "_16rbpto7", p = {
+var t = "_16rbpto6 _1y2v1nfgg _1y2v1nfh2 _1y2v1nfgw", n = "_16rbpto2 _1y2v1nfgg", a = "_1y2v1nfgv _1y2v1nfhk", _ = "_1y2v1nfgm", i = "_16rbpto7", p = {
     height: "var(--_16rbpto0)"
 };

package/dist/highlighted-card.css-mistica.js

@@ -10,21 +10,21 @@ function _export(target, all) {
 }
 _export(exports, {
     container: function() {
-        return f;
+        return y;
     },
     imageContent: function() {
-        return y;
+        return f;
     },
     textContainerVariant: function() {
         return _;
     },
     touchableContainer: function() {
-        return b;
+        return g;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./highlighted-card.css.ts.vanilla.css-mistica.js");
-var f = "wrb8722 _1y2v1nfba _1y2v1nfbf _1y2v1nfbm _1y2v1nfbs", y = "wrb8725 _1y2v1nfba", _ = {
-    withImage: "wrb8728 wrb8727 _1y2v1nfba _1y2v1nfbg _1y2v1nfbo _1y2v1nf6o _1y2v1nf7x _1y2v1nf90",
-    withoutImage: "wrb8729 wrb8727 _1y2v1nfba _1y2v1nfbg _1y2v1nfbo _1y2v1nf6o _1y2v1nf7x _1y2v1nf90"
-}, b = "_1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfba _1y2v1nfbs _1y2v1nfds _1y2v1nfbx _1y2v1nf62";
+var y = "wrb8722 _1y2v1nfgg _1y2v1nfgl _1y2v1nfgs _1y2v1nfgy", f = "wrb8725 _1y2v1nfgg", _ = {
+    withImage: "wrb8728 wrb8727 _1y2v1nfgg _1y2v1nfgm _1y2v1nfgu _1y2v1nf6u _1y2v1nf83 _1y2v1nf96",
+    withoutImage: "wrb8729 wrb8727 _1y2v1nfgg _1y2v1nfgm _1y2v1nfgu _1y2v1nf6u _1y2v1nf83 _1y2v1nf96"
+}, g = "_1y2v1nf69 _1y2v1nf7i _1y2v1nf8r _1y2v1nfa0 _1y2v1nfgg _1y2v1nfgy _1y2v1nfiy _1y2v1nfh3 _1y2v1nf68";

package/dist/horizontal-scroll.css-mistica.js

@@ -10,13 +10,13 @@ function _export(target, all) {
 }
 _export(exports, {
     noScrollbar: function() {
-        return m;
+        return l;
     },
     scroll: function() {
-        return v;
+        return m;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./responsive-layout.css.ts.vanilla.css-mistica.js");
 require("./horizontal-scroll.css.ts.vanilla.css-mistica.js");
-var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nfba";
+var l = "_1gl3gmv2", m = "_1gl3gmv1 _1y2v1nfgg";

package/dist/icon-button.css-mistica.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "base", {
     enumerable: true,
     get: function() {
-        return r;
+        return t;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./icon-button.css.ts.vanilla.css-mistica.js");
-var r = "yqt1oe1 _1y2v1nfbe";
+var t = "yqt1oe1 _1y2v1nfgk";

package/dist/image.css-mistica.js

@@ -13,14 +13,14 @@ _export(exports, {
         return r;
     },
     image: function() {
-        return f;
+        return n;
     },
     vars: function() {
-        return n;
+        return f;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./image.css.ts.vanilla.css-mistica.js");
-var r = 300, f = "_17tt25r2 _1y2v1nfeh _1y2v1nfew _1y2v1nfbc _1y2v1nfbx _1y2v1nfce _1y2v1nfg5 _1y2v1nfdp _1y2v1nfdq _1y2v1nfe1", n = {
+var r = 300, n = "_17tt25r2 _1y2v1nfjn _1y2v1nfk2 _1y2v1nfgi _1y2v1nfh3 _1y2v1nfhk _1y2v1nflb _1y2v1nfiv _1y2v1nfiw _1y2v1nfj7", f = {
     mediaBorderRadius: "var(--_17tt25r0)"
 };

package/dist/image.d.ts

@@ -7,7 +7,7 @@ type ImageErrorProps = {
     border?: boolean;
 };
 export declare const ImageError: React.ForwardRefExoticComponent<ImageErrorProps & React.RefAttributes<HTMLDivElement>>;
-export type AspectRatio = '1:1' | '16:9' | '7:10' | '4:3';
+export type AspectRatio = '1:1' | '16:9' | '7:10' | '4:3' | undefined;
 export declare const RATIO: {
     '1:1': number;
     '16:9': number;

package/dist/image.js

@@ -11,16 +11,16 @@ function _export(target, all) {
 }
 _export(exports, {
     ImageContent: function() {
-        return G;
+        return J;
     },
     ImageError: function() {
-        return q;
+        return G;
     },
     RATIO: function() {
         return k;
     },
     default: function() {
-        return m1;
+        return h1;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -163,7 +163,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Z = (param)=>/* @__PURE__ */ {
+const q = (param)=>/* @__PURE__ */ {
     let { style: t } = param;
     return (0, _jsxruntime.jsx)("svg", {
         width: "48",
@@ -177,7 +177,7 @@ const Z = (param)=>/* @__PURE__ */ {
             strokeWidth: "2"
         })
     });
-}, q = /*#__PURE__*/ _react.forwardRef((param, d)=>{
+}, G = /*#__PURE__*/ _react.forwardRef((param, l)=>{
     let { borderRadius: t, withIcon: a = !0, border: c } = param;
     const s = (0, _themevariantcontext.useIsInverseVariant)(), { skinName: n } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -192,8 +192,8 @@ const Z = (param)=>/* @__PURE__ */ {
             border: c ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none",
             borderRadius: t
         },
-        ref: d,
-        children: a ? n === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {
+        ref: l,
+        children: a ? n === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(q, {
             style: {
                 width: "10%",
                 minWidth: 24,
@@ -218,8 +218,8 @@ const Z = (param)=>/* @__PURE__ */ {
     "16:9": 16 / 9,
     "7:10": 7 / 10,
     "4:3": 4 / 3
-}, x = "1:1", G = /*#__PURE__*/ _react.forwardRef((_param, S)=>{
-    var { aspectRatio: t = x, alt: a = "", dataAttributes: c, noBorderRadius: d, src: s, onError: n, onLoad: l, loadingFallback: R = !0, errorFallback: y = !0 } = _param, i = _object_without_properties(_param, [
+}, x = "1:1", J = /*#__PURE__*/ _react.forwardRef((_param, S)=>{
+    var { aspectRatio: t = x, alt: a = "", dataAttributes: c, noBorderRadius: l, src: s, onError: n, onLoad: d, loadingFallback: R = !0, errorFallback: y = !0 } = _param, i = _object_without_properties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",
@@ -230,12 +230,12 @@ const Z = (param)=>/* @__PURE__ */ {
         "loadingFallback",
         "errorFallback"
     ]);
-    const f = _react.useRef(), A = i.border ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none", m = i.circular ? "50%" : d ? "0px" : (0, _css.fallbackStyles)(_imagecssmistica.vars.mediaBorderRadius, _skincontractcssmistica.vars.borderRadii.container), [C, g] = _react.useState(!s), [z, b] = _react.useState(!0), [F, w] = _react.useState(!1), h = i.circular ? 1 : typeof t == "number" ? t : k[t], v = R && !!(h !== 0 || i.width && i.height), L = y && !!(h !== 0 || i.width && i.height), u = _react.useCallback(()=>{
+    const f = _react.useRef(), A = i.border ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none", h = i.circular ? "50%" : l ? "0px" : (0, _css.fallbackStyles)(_imagecssmistica.vars.mediaBorderRadius, _skincontractcssmistica.vars.borderRadii.container), [C, g] = _react.useState(!s), [z, b] = _react.useState(!0), [F, w] = _react.useState(!1), m = i.width && i.height ? void 0 : i.circular ? 1 : typeof t == "number" ? t : k[t], v = R && !!(m !== 0 || i.width && i.height), L = y && !!(m !== 0 || i.width && i.height), u = _react.useCallback(()=>{
         g(!1), b(!1), setTimeout(()=>{
             w(!0);
-        }, _imagecssmistica.FADE_IN_DURATION_MS), l == null || l();
+        }, _imagecssmistica.FADE_IN_DURATION_MS), d == null || d();
     }, [
-        l
+        d
     ]), T = // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
         style: _object_spread_props(_object_spread({}, z && v ? {
@@ -245,12 +245,12 @@ const Z = (param)=>/* @__PURE__ */ {
         }), {
             boxSizing: "border-box",
             border: A,
-            borderRadius: m
+            borderRadius: h
         }),
         ref: (0, _common.combineRefs)(f, S),
         src: s,
         className: (0, _classnames.default)(_imagecssmistica.image, (0, _sprinklescssmistica.sprinkles)({
-            position: h !== 0 ? "absolute" : "static"
+            position: m !== 0 ? "absolute" : "static"
         })),
         alt: a,
         onError: ()=>{
@@ -278,7 +278,7 @@ const Z = (param)=>/* @__PURE__ */ {
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_skeletonbase.default, {
                         height: "100%",
                         width: "100%",
-                        radius: m
+                        radius: h
                     })
                 })
             }),
@@ -289,17 +289,17 @@ const Z = (param)=>/* @__PURE__ */ {
                     height: "100%",
                     zIndex: 1
                 },
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(q, {
-                    borderRadius: m,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(G, {
+                    borderRadius: h,
                     border: i.border
                 })
             }),
             !C && T
         ]
     });
-}), J = /*#__PURE__*/ _react.forwardRef((t, a)=>{
+}), Q = /*#__PURE__*/ _react.forwardRef((t, a)=>{
     var _t_aspectRatio;
-    const c = t.circular ? 1 : typeof t.aspectRatio == "number" ? t.aspectRatio : k[(_t_aspectRatio = t.aspectRatio) !== null && _t_aspectRatio !== void 0 ? _t_aspectRatio : x];
+    const c = t.width && t.height ? void 0 : t.circular ? 1 : typeof t.aspectRatio == "number" ? t.aspectRatio : k[(_t_aspectRatio = t.aspectRatio) !== null && _t_aspectRatio !== void 0 ? _t_aspectRatio : x];
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
         style: {
             position: "relative"
@@ -308,8 +308,8 @@ const Z = (param)=>/* @__PURE__ */ {
         width: t.width,
         height: t.height,
         dataAttributes: (0, _dom.getPrefixedDataAttributes)(t.dataAttributes, "Image"),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(G, _object_spread_props(_object_spread({}, t), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(J, _object_spread_props(_object_spread({}, t), {
             ref: a
         }))
     });
-}), m1 = J;
+}), h1 = Q;