@telefonica/mistica 12.9.1 → 12.10.0

package/dist-es/grid-layout.js

@@ -50,240 +50,117 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-import { useScreenSize as o } from "./hooks.js";
-import r from "./container-type-context.js";
-import { createUseStyles as u } from "./jss.js";
-import { getPrefixedDataAttributes as g } from "./utils/dom.js";
-import { jsxs as n, jsx as l } from "./_virtual/jsx-runtime.js";
-var p = u(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(param) {
-                var a = param.verticalSpace;
-                return a;
-            }
-        }), _obj),
-        span1: {
-            gridColumn: "span 1",
-            gap: function(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(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(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(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(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(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(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(param) {
-                var a = param.verticalSpace;
-                return a;
-            }
-        }), _obj7)
+import { assignInlineVars as v } from "@vanilla-extract/dynamic";
+import { useScreenSize as h } from "./hooks.js";
+import t from "./container-type-context.js";
+import { getPrefixedDataAttributes as s } from "./utils/dom.js";
+import { grid as f, vars as m, span as P } from "./grid-layout.css-mistica.js";
+import { jsxs as c, jsx as e } from "./_virtual/jsx-runtime.js";
+var A = function(i) {
+    var r = s(i.dataAttributes), ref = h(), u = ref.isMobile, o = ref.isTablet, d = function(a) {
+        return u ? "mobile-column" : o ? "tablet-column" : a;
+    }, l = function(a) {
+        return {
+            className: P,
+            style: v(_defineProperty({}, m.colSpan, String(a)))
+        };
+    }, n = {
+        className: f,
+        style: v(_defineProperty({}, m.verticalSpace, i.verticalSpace ? "".concat(i.verticalSpace, "px") : ""))
     };
-}), k = function(e) {
-    var s;
-    var a = p({
-        verticalSpace: (s = e.verticalSpace) != null ? s : 0
-    }), d = g(e.dataAttributes), ref = o(), m = ref.isMobile, t = ref.isTablet, i = function(c) {
-        return m ? "mobile-column" : t ? "tablet-column" : c;
-    };
-    return e.template === "6+6" ? /* @__PURE__ */ n("div", _objectSpreadProps(_objectSpread({
-        className: a.grid
-    }, d), {
+    return i.template === "6+6" ? /* @__PURE__ */ c("div", _objectSpreadProps(_objectSpread({}, n, r), {
         children: [
-            /* @__PURE__ */ l(r.Provider, {
-                value: i("desktop-medium-column"),
-                children: /* @__PURE__ */ l("div", {
-                    className: a.span6,
-                    children: e.left
-                })
+            /* @__PURE__ */ e(t.Provider, {
+                value: d("desktop-medium-column"),
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(6)), {
+                    children: i.left
+                }))
             }),
-            /* @__PURE__ */ l(r.Provider, {
-                value: i("desktop-medium-column"),
-                children: /* @__PURE__ */ l("div", {
-                    className: a.span6,
-                    children: e.right
-                })
+            /* @__PURE__ */ e(t.Provider, {
+                value: d("desktop-medium-column"),
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(6)), {
+                    children: i.right
+                }))
             })
         ]
-    })) : e.template === "8+4" ? /* @__PURE__ */ n("div", _objectSpreadProps(_objectSpread({
-        className: a.grid
-    }, d), {
+    })) : i.template === "8+4" ? /* @__PURE__ */ c("div", _objectSpreadProps(_objectSpread({}, n, r), {
         children: [
-            /* @__PURE__ */ l(r.Provider, {
-                value: i("desktop-medium-column"),
-                children: /* @__PURE__ */ l("div", {
-                    className: a.span8,
-                    children: e.left
-                })
+            /* @__PURE__ */ e(t.Provider, {
+                value: d("desktop-medium-column"),
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(8)), {
+                    children: i.left
+                }))
             }),
-            /* @__PURE__ */ l(r.Provider, {
-                value: i("desktop-small-column"),
-                children: /* @__PURE__ */ l("div", {
-                    className: a.span4,
-                    children: e.right
-                })
+            /* @__PURE__ */ e(t.Provider, {
+                value: d("desktop-small-column"),
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(4)), {
+                    children: i.right
+                }))
             })
         ]
-    })) : e.template === "4+6" ? /* @__PURE__ */ n("div", _objectSpreadProps(_objectSpread({
-        className: a.grid
-    }, d), {
+    })) : i.template === "4+6" ? /* @__PURE__ */ c("div", _objectSpreadProps(_objectSpread({}, n, r), {
         children: [
-            /* @__PURE__ */ l(r.Provider, {
-                value: i("desktop-small-column"),
-                children: /* @__PURE__ */ l("div", {
-                    className: a.span4,
-                    children: e.left
-                })
-            }),
-            /* @__PURE__ */ l("div", {
-                className: a.span1
+            /* @__PURE__ */ e(t.Provider, {
+                value: d("desktop-small-column"),
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(4)), {
+                    children: i.left
+                }))
             }),
-            /* @__PURE__ */ l(r.Provider, {
-                value: i("desktop-medium-column"),
-                children: /* @__PURE__ */ l("div", {
-                    className: a.span6,
-                    children: e.right
-                })
+            /* @__PURE__ */ e("div", _objectSpread({}, l(1))),
+            /* @__PURE__ */ e(t.Provider, {
+                value: d("desktop-medium-column"),
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(6)), {
+                    children: i.right
+                }))
             }),
-            /* @__PURE__ */ l("div", {
-                className: a.span1
-            })
+            /* @__PURE__ */ e("div", _objectSpread({}, l(1)))
         ]
-    })) : e.template === "5+4" ? /* @__PURE__ */ n("div", _objectSpreadProps(_objectSpread({
-        className: a.grid
-    }, d), {
+    })) : i.template === "5+4" ? /* @__PURE__ */ c("div", _objectSpreadProps(_objectSpread({}, n, r), {
         children: [
-            /* @__PURE__ */ l("div", {
-                className: a.span1
-            }),
-            /* @__PURE__ */ l(r.Provider, {
-                value: i("desktop-small-column"),
-                children: /* @__PURE__ */ l("div", {
-                    className: a.span5,
-                    children: e.left
-                })
+            /* @__PURE__ */ e("div", _objectSpread({}, l(1))),
+            /* @__PURE__ */ e(t.Provider, {
+                value: d("desktop-small-column"),
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(5)), {
+                    children: i.left
+                }))
             }),
-            /* @__PURE__ */ l("div", {
-                className: a.span1
+            /* @__PURE__ */ e("div", _objectSpread({}, l(1))),
+            /* @__PURE__ */ e(t.Provider, {
+                value: d("desktop-small-column"),
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(4)), {
+                    children: i.right
+                }))
             }),
-            /* @__PURE__ */ l(r.Provider, {
-                value: i("desktop-small-column"),
-                children: /* @__PURE__ */ l("div", {
-                    className: a.span4,
-                    children: e.right
-                })
-            }),
-            /* @__PURE__ */ l("div", {
-                className: a.span1
-            })
+            /* @__PURE__ */ e("div", _objectSpread({}, l(1)))
         ]
-    })) : e.template === "3+9" ? /* @__PURE__ */ n("div", _objectSpreadProps(_objectSpread({
-        className: a.grid
-    }, d), {
+    })) : i.template === "3+9" ? /* @__PURE__ */ c("div", _objectSpreadProps(_objectSpread({}, n, r), {
         children: [
-            /* @__PURE__ */ l(r.Provider, {
-                value: i("desktop-small-column"),
-                children: /* @__PURE__ */ l("div", {
-                    className: a.span3,
-                    children: e.left
-                })
+            /* @__PURE__ */ e(t.Provider, {
+                value: d("desktop-small-column"),
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(3)), {
+                    children: i.left
+                }))
             }),
-            /* @__PURE__ */ l(r.Provider, {
-                value: i("desktop-medium-column"),
-                children: /* @__PURE__ */ l("div", {
-                    className: a.span9,
-                    children: e.right
-                })
+            /* @__PURE__ */ e(t.Provider, {
+                value: d("desktop-medium-column"),
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(9)), {
+                    children: i.right
+                }))
             })
         ]
-    })) : e.template === "10" ? /* @__PURE__ */ n("div", _objectSpreadProps(_objectSpread({
-        className: a.grid
-    }, d), {
+    })) : i.template === "10" ? /* @__PURE__ */ c("div", _objectSpreadProps(_objectSpread({}, n, r), {
         children: [
-            /* @__PURE__ */ l("div", {
-                className: a.span1
+            /* @__PURE__ */ e("div", _objectSpread({}, l(1))),
+            /* @__PURE__ */ e(t.Provider, {
+                value: d("desktop-wide-column"),
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(10)), {
+                    children: i.children
+                }))
             }),
-            /* @__PURE__ */ l(r.Provider, {
-                value: i("desktop-wide-column"),
-                children: /* @__PURE__ */ l("div", {
-                    className: a.span10,
-                    children: e.children
-                })
-            }),
-            /* @__PURE__ */ l("div", {
-                className: a.span1
-            })
+            /* @__PURE__ */ e("div", _objectSpread({}, l(1)))
         ]
-    })) : /* @__PURE__ */ l("div", _objectSpreadProps(_objectSpread({
-        className: a.grid
-    }, d), {
-        children: e.children
+    })) : /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, n, r), {
+        children: i.children
     }));
 };
-export { k as default };
+export { A as default };

package/dist-es/header.js

@@ -80,28 +80,29 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 import a from "./box.js";
 import l from "./stack.js";
 import { createUseStyles as O } from "./jss.js";
-import { useIsInverseVariant as P, ThemeVariant as S } from "./theme-variant-context.js";
-import x from "./responsive-layout.js";
+import { useIsInverseVariant as P, ThemeVariant as T } from "./theme-variant-context.js";
+import v from "./responsive-layout.js";
 import f from "./grid-layout.js";
-import { useScreenSize as g, useTheme as R } from "./hooks.js";
-import v from "./overscroll-color-context.js";
-import { Text6 as B, Text8 as j, Text7 as C, Text3 as y } from "./text.js";
-import G from "./button-group.js";
+import { useScreenSize as g } from "./hooks.js";
+import x from "./overscroll-color-context.js";
+import { Text6 as B, Text8 as R, Text7 as j, Text3 as S } from "./text.js";
+import C from "./button-group.js";
+import { vars as h } from "./skins/skin-contract.css-mistica.js";
 import { jsxs as c, jsx as r } from "./_virtual/jsx-runtime.js";
 var K = function(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 = g(), N = ref.isTabletOrSmaller, h = R(), H = P(), u = function(p, T) {
-        if (typeof p == "string") return /* @__PURE__ */ r(y, _objectSpreadProps(_objectSpread({
+    var ref = g(), N = ref.isTabletOrSmaller, H = P(), u = function(p, y) {
+        if (typeof p == "string") return /* @__PURE__ */ r(S, _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__ */ r(y, _objectSpreadProps(_objectSpread({
+        return /* @__PURE__ */ r(S, _objectSpreadProps(_objectSpread({
             regular: !0
-        }, T, L), {
+        }, y, L), {
             children: p.text
         }));
     };
@@ -134,13 +135,13 @@ var K = function(param) {
                             i && u(i, {
                                 color: h.colors.textPrimary
                             }),
-                            /* @__PURE__ */ r(j, {
+                            /* @__PURE__ */ r(R, {
                                 color: d && !H ? h.colors.highlight : h.colors.textPrimary,
                                 children: n
                             })
                         ]
                     }),
-                    (t || m) && /* @__PURE__ */ r(G, {
+                    (t || m) && /* @__PURE__ */ r(C, {
                         primaryButton: t,
                         secondaryButton: m
                     }),
@@ -158,7 +159,7 @@ var K = function(param) {
             /* @__PURE__ */ c(l, {
                 space: n ? 12 : 16,
                 children: [
-                    o && /* @__PURE__ */ r(C, {
+                    o && /* @__PURE__ */ r(j, {
                         role: "heading",
                         "aria-level": 1,
                         children: o
@@ -188,13 +189,13 @@ var K = function(param) {
     var d = k({
         isInverse: o
     }), ref = g(), m = ref.isTabletOrSmaller;
-    return /* @__PURE__ */ r(x, {
+    return /* @__PURE__ */ r(v, {
         className: d.background,
         dataAttributes: s,
-        children: /* @__PURE__ */ c(S, {
+        children: /* @__PURE__ */ c(T, {
             isInverse: o,
             children: [
-                /* @__PURE__ */ r(v, {}),
+                /* @__PURE__ */ r(x, {}),
                 m ? /* @__PURE__ */ r(a, {
                     paddingTop: 32,
                     paddingBottom: 24,
@@ -256,12 +257,12 @@ var K = function(param) {
     var i = k({
         isInverse: o
     }), ref = g(), n = ref.isTabletOrSmaller;
-    return /* @__PURE__ */ r(x, {
+    return /* @__PURE__ */ r(v, {
         className: i.background,
-        children: /* @__PURE__ */ c(S, {
+        children: /* @__PURE__ */ c(T, {
             isInverse: o,
             children: [
-                /* @__PURE__ */ r(v, {}),
+                /* @__PURE__ */ r(x, {}),
                 n ? /* @__PURE__ */ r(a, {
                     paddingTop: 12,
                     paddingBottom: 24,

package/dist-es/image.css-mistica.js

@@ -0,0 +1,4 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./image.css.ts.vanilla.js";
+var f = 300, n = "_17tt25r1 _1y2v1nfbg _1y2v1nfbu _1y2v1nf7d _1y2v1nf9h _1y2v1nf9x _1y2v1nfd0 _1y2v1nfb4 _1y2v1nfb5";
+export { f as FADE_IN_DURATION_MS, n as image };

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

@@ -0,0 +1,2 @@
+var a = "";
+export { a as default };

package/dist-es/image.js

@@ -123,59 +123,61 @@ 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 * as o from "react";
-import { createUseStyles as A } from "./jss.js";
-import { SkeletonRectangle as N } from "./skeletons.js";
-import { AspectRatioElement as j } from "./utils/aspect-ratio-support.js";
-import { getPrefixedDataAttributes as L } from "./utils/dom.js";
-import T from "./generated/mistica-icons/icon-image-regular.js";
-import { useIsInverseVariant as V } from "./theme-variant-context.js";
+import * as s from "react";
+import A from "classnames";
+import { SkeletonRectangle as F } from "./skeletons.js";
+import { AspectRatioElement as N } from "./utils/aspect-ratio-support.js";
+import { getPrefixedDataAttributes as W } from "./utils/dom.js";
+import L from "./generated/mistica-icons/icon-image-regular.js";
+import { useIsInverseVariant as T } from "./theme-variant-context.js";
 import { useTheme as f } from "./hooks.js";
-import { VIVO_SKIN as _ } from "./skins/constants.js";
-import { jsx as e, jsxs as B } from "./_virtual/jsx-runtime.js";
-var b = 300, w = /*#__PURE__*/ o.createContext(!1), E = function() {
-    return o.useContext(w);
-}, X = function(param) {
-    var t = param.children;
-    return /* @__PURE__ */ e(w.Provider, {
+import { VIVO_SKIN as V } from "./skins/constants.js";
+import { sprinkles as _ } from "./sprinkles.css-mistica.js";
+import { image as j, FADE_IN_DURATION_MS as E } from "./image.css-mistica.js";
+import { jsx as t, jsxs as M } from "./_virtual/jsx-runtime.js";
+var b = /*#__PURE__*/ s.createContext(!1), O = function() {
+    return s.useContext(b);
+}, t3 = function(param) {
+    var e = param.children;
+    return /* @__PURE__ */ t(b.Provider, {
         value: !0,
-        children: t
+        children: e
     });
-}, M = function(param) {
-    var t = param.style;
+}, P = function(param) {
+    var e = param.style;
     var ref = f(), i = ref.colors;
-    return /* @__PURE__ */ e("svg", {
+    return /* @__PURE__ */ t("svg", {
         width: "48",
         height: "48",
         viewBox: "0 0 48 48",
         fill: "none",
-        style: t,
-        children: /* @__PURE__ */ e("path", {
+        style: e,
+        children: /* @__PURE__ */ t("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() {
-    var t = V(), ref = f(), i = ref.colors, a = ref.skinName;
-    return /* @__PURE__ */ e("div", {
+}, B = function() {
+    var e = T(), ref = f(), i = ref.colors, a = ref.skinName;
+    return /* @__PURE__ */ t("div", {
         style: {
             height: "100%",
             width: "100%",
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: t ? i.backgroundSkeletonInverse : i.backgroundSkeleton,
+            backgroundColor: e ? i.backgroundSkeletonInverse : i.backgroundSkeleton,
             borderRadius: 8
         },
-        children: a === _ ? /* @__PURE__ */ e(M, {
+        children: a === V ? /* @__PURE__ */ t(P, {
             style: {
                 width: "10%",
                 minWidth: 24,
                 maxWidth: 48
             }
-        }) : /* @__PURE__ */ e(T, {
-            color: t ? i.inverse : i.neutralMedium,
+        }) : /* @__PURE__ */ t(L, {
+            color: e ? i.inverse : i.neutralMedium,
             size: "",
             style: {
                 width: "10%",
@@ -184,36 +186,13 @@ var b = 300, w = /*#__PURE__*/ o.createContext(!1), E = function() {
             }
         })
     });
-}, P = A(function() {
-    return {
-        image: {
-            position: function(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(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__*/ o.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__*/ s.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",
@@ -224,57 +203,57 @@ var b = 300, w = /*#__PURE__*/ o.createContext(!1), E = function() {
         "loadingFallback",
         "errorFallback"
     ]);
-    var k = E(), S = n != null ? n : k, ref = _slicedToArray(o.useState(!1), 2), h = ref[0], m = ref[1], ref1 = _slicedToArray(o.useState(!0), 2), p = ref1[0], C = ref1[1], ref2 = _slicedToArray(o.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__ */ e("img", _objectSpreadProps(_objectSpread({}, L(a)), {
+    var x = O(), y = n != null ? n : x, ref = _slicedToArray(s.useState(!1), 2), c = ref[0], m = ref[1], ref1 = _slicedToArray(s.useState(!0), 2), p = ref1[0], C = ref1[1], ref2 = _slicedToArray(s.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__ */ t("img", _objectSpreadProps(_objectSpread({}, W(a)), {
         style: _objectSpread({}, p && g ? {
             opacity: 0
         } : {
             opacity: 1
         }),
-        ref: x,
-        src: I,
-        className: D.image,
+        ref: k,
+        src: w,
+        className: A(j, _({
+            position: r !== 0 ? "absolute" : "static",
+            borderRadius: y ? void 0 : 8
+        })),
         alt: i,
-        onError: function(d) {
-            m(!0), C(!1), u(!0), l == null || l(d);
+        onError: function(h) {
+            m(!0), C(!1), u(!0), l == null || l(h);
         },
-        onLoad: function(d) {
+        onLoad: function(h) {
             m(!1), C(!1), setTimeout(function() {
                 u(!0);
-            }, b), c == null || c(d);
+            }, E), d == null || d(h);
         }
     }));
-    return /* @__PURE__ */ B(j, {
+    return /* @__PURE__ */ M(N, {
         style: {
             position: "relative"
         },
         aspectRatio: r,
-        width: s.width,
-        height: s.height,
+        width: o.width,
+        height: o.height,
         children: [
-            g && !R && /* @__PURE__ */ e("div", {
+            g && !S && /* @__PURE__ */ t("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
                     height: "100%"
                 },
-                children: /* @__PURE__ */ e(N, {
-                    width: s.width,
-                    height: s.height
+                children: /* @__PURE__ */ t(F, {
+                    width: o.width,
+                    height: o.height
                 })
             }),
-            h && F && /* @__PURE__ */ e("div", {
+            c && R && /* @__PURE__ */ t("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
                     height: "100%"
                 },
-                children: /* @__PURE__ */ e(O, {})
+                children: /* @__PURE__ */ t(B, {})
             }),
-            !h && W
+            !c && D
         ]
     });
 });
-export { X as DisableBorderRadiusProvider, z as RATIO, Y as default, E as useDisableBorderRadius };
+export { t3 as DisableBorderRadiusProvider, z as RATIO, e3 as default, O as useDisableBorderRadius };