@telefonica/mistica 14.34.0 → 14.36.0

package/dist/touchable.js

@@ -24,7 +24,7 @@ const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./scre
 const _touchablecssmistica = require("./touchable.css-mistica.js");
 const _hooks = require("./hooks.js");
 const _platform = require("./utils/platform.js");
-const _keycodes = require("./utils/key-codes.js");
+const _keys = require("./utils/keys.js");
 const _dom = require("./utils/dom.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -128,7 +128,7 @@ const L = function(e) {
     let t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, d = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
     t ? window.open(e, "_blank") : d ? window.open(e, "_top") : document.location.href = e;
 }, T = /*#__PURE__*/ _react.forwardRef((e, t)=>{
-    const { texts: d, analytics: v, platformOverrides: N, Link: P, useHrefDecorator: E } = (0, _hooks.useTheme)(), C = E(), f = _react.useRef(!1);
+    const { texts: d, analytics: v, platformOverrides: N, Link: P, useHrefDecorator: E } = (0, _hooks.useTheme)(), x = E(), f = _react.useRef(!1);
     let l = [];
     e.trackingEvent && (Array.isArray(e.trackingEvent) ? l = e.trackingEvent : l = [
         e.trackingEvent
@@ -153,28 +153,28 @@ const L = function(e) {
         e.onPress && e.onPress(a);
     }, k = ()=>{
         var _e_to_pathname;
-        return e.href ? C(e.href) : e.to && e.fullPageOnWebView ? typeof e.to == "string" ? e.to : (_e_to_pathname = e.to.pathname) !== null && _e_to_pathname !== void 0 ? _e_to_pathname : "" : "";
+        return e.href ? x(e.href) : e.to && e.fullPageOnWebView ? typeof e.to == "string" ? e.to : (_e_to_pathname = e.to.pathname) !== null && _e_to_pathname !== void 0 ? _e_to_pathname : "" : "";
     }, y = ()=>Promise.all(l.map((a)=>v.logEvent(a))), g = (a)=>{
         f.current || (f.current = !0, y().finally(()=>{
             f.current = !1, a();
         }));
-    }, x = (a)=>{
+    }, R = (a)=>{
         if (s(a), !l.length) {
             h(a);
             return;
         }
         g(()=>h(a));
-    }, R = (a)=>{
+    }, C = (a)=>{
         s(a), l.length && (a.preventDefault(), g(()=>L(k(), r, m)));
     }, D = (a)=>{
         s(a), y();
     }, w = (a)=>{
-        (a.keyCode === _keycodes.ENTER || a.keyCode === _keycodes.SPACE) && (a.preventDefault(), a.currentTarget.click());
+        (a.key === _keys.ENTER || a.key === _keys.SPACE) && (a.preventDefault(), a.currentTarget.click());
     };
     if (e.href || e.to && e.fullPageOnWebView && (0, _platform.isInsideNovumNativeApp)(N)) return /* @__PURE__ */ (0, _jsxruntime.jsxs)("a", _object_spread_props(_object_spread({}, n), {
         "aria-label": e["aria-label"],
         "aria-labelledby": e["aria-labelledby"],
-        onClick: R,
+        onClick: C,
         onKeyDown: w,
         href: e.disabled ? void 0 : k(),
         target: (()=>{
@@ -216,7 +216,7 @@ const L = function(e) {
             "aria-labelledby": e["aria-labelledby"],
             type: u,
             ref: t,
-            onClick: x,
+            onClick: R,
             children: o
         }));
     }

package/dist/utils/aspect-ratio-support.css-mistica.js

@@ -24,6 +24,6 @@ _export(exports, {
 });
 require("../sprinkles.css.ts.vanilla.css-mistica.js");
 require("./aspect-ratio-support.css.ts.vanilla.css-mistica.js");
-var a = "yqswj62", n = "_1y2v1nfbx _1y2v1nfce _1y2v1nfeg _1y2v1nfev", e = {
+var a = "yqswj62", n = "_1y2v1nfbx _1y2v1nfce _1y2v1nfeh _1y2v1nfew", e = {
     aspectRatio: "var(--yqswj60)"
-}, y = "_1y2v1nfea _1y2v1nfdp _1y2v1nfdq _1y2v1nfb4";
+}, y = "_1y2v1nfeb _1y2v1nfdp _1y2v1nfdq _1y2v1nfb4";

package/dist/utils/environment.d.ts

@@ -1,2 +1,3 @@
 export declare const isServerSide: () => boolean;
 export declare const isClientSide: () => boolean;
+export declare const isTouchableDevice: () => boolean;

package/dist/utils/environment.js

@@ -14,6 +14,9 @@ _export(exports, {
     },
     isServerSide: function() {
         return e;
+    },
+    isTouchableDevice: function() {
+        return o;
     }
 });
-const e = ()=>typeof window > "u", i = ()=>!e();
+const e = ()=>typeof window > "u", i = ()=>!e(), o = ()=>i() ? window.matchMedia("(pointer: coarse)").matches : !1;

package/dist/utils/keys.d.ts

@@ -0,0 +1,8 @@
+export declare const LEFT = "ArrowLeft";
+export declare const UP = "ArrowUp";
+export declare const RIGHT = "ArrowRight";
+export declare const DOWN = "ArrowDown";
+export declare const ENTER = "Enter";
+export declare const ESC = "Escape";
+export declare const SPACE = " ";
+export declare const TAB = "Tab";

package/dist/utils/{key-codes.js → keys.js}

@@ -10,22 +10,22 @@ function _export(target, all) {
 }
 _export(exports, {
     DOWN: function() {
-        return n;
+        return r;
     },
     ENTER: function() {
-        return s;
+        return c;
     },
     ESC: function() {
-        return E;
+        return s;
     },
     LEFT: function() {
         return o;
     },
     RIGHT: function() {
-        return c;
+        return n;
     },
     SPACE: function() {
-        return T;
+        return E;
     },
     TAB: function() {
         return A;
@@ -34,4 +34,4 @@ _export(exports, {
         return t;
     }
 });
-const o = 37, t = 38, c = 39, n = 40, s = 13, E = 27, T = 32, A = 9;
+const o = "ArrowLeft", t = "ArrowUp", n = "ArrowRight", r = "ArrowDown", c = "Enter", s = "Escape", E = " ", A = "Tab";

package/dist/video.css-mistica.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "video", {
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
-var f = "_1y2v1nfeg _1y2v1nfev _1y2v1nfbc _1y2v1nf62 _1y2v1nfdp _1y2v1nfdq _1y2v1nfg4";
+var f = "_1y2v1nfeh _1y2v1nfew _1y2v1nfbc _1y2v1nf62 _1y2v1nfdp _1y2v1nfdq _1y2v1nfg5";

package/dist/video.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     RATIO: function() {
-        return K;
+        return _;
     },
     default: function() {
-        return re;
+        return ne;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -23,8 +23,10 @@ const _image = require("./image.js");
 const _aspectratiosupport = require("./utils/aspect-ratio-support.js");
 const _platform = require("./utils/platform.js");
 const _videocssmistica = require("./video.css-mistica.js");
-const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _imagecssmistica = require("./image.css-mistica.js");
 const _dom = require("./utils/dom.js");
+const _css = require("@vanilla-extract/css");
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -93,7 +95,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const q = {
+const K = {
     loading: {
         play: "playing",
         pause: "paused",
@@ -120,12 +122,12 @@ const q = {
     error: {
         reset: "loading"
     }
-}, D = (r, u)=>q[r][u] || r, K = {
+}, M = (r, u)=>K[r][u] || r, _ = {
     "1:1": 1,
     "16:9": 16 / 9,
     "4:3": 4 / 3
-}, _ = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", z = /*#__PURE__*/ _react.forwardRef((_param, A)=>{
-    var { src: r, poster: u, autoPlay: p = "when-loaded", muted: x = !0, loop: N = !0, preload: k = "none", loadingTimeout: T = 1e4, onLoad: y, onError: h, onPause: R, onPlay: b, aspectRatio: c = "1:1", dataAttributes: B } = _param, o = _object_without_properties(_param, [
+}, z = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", H = /*#__PURE__*/ _react.forwardRef((_param, A)=>{
+    var { src: r, poster: u, autoPlay: p = "when-loaded", muted: k = !0, loop: N = !0, preload: V = "none", loadingTimeout: T = 1e4, onLoad: y, onError: h, onPause: v, onPlay: R, aspectRatio: c = "1:1", dataAttributes: x } = _param, o = _object_without_properties(_param, [
         "src",
         "poster",
         "autoPlay",
@@ -140,7 +142,7 @@ const q = {
         "aspectRatio",
         "dataAttributes"
     ]);
-    const [a, d] = _react.useReducer(D, "loading"), s = _react.useRef(null), C = _react.useRef(), f = _react.useRef(null), w = (0, _image.useMediaBorderRadius)(), g = typeof c == "number" ? c : K[c], v = _react.useCallback(()=>{
+    const [a, d] = _react.useReducer(M, "loading"), s = _react.useRef(null), C = _react.useRef(), f = _react.useRef(null), b = (0, _css.fallbackVar)(_imagecssmistica.vars.mediaBorderRadius, _skincontractcssmistica.vars.borderRadii.container), m = typeof c == "number" ? c : _[c], w = _react.useCallback(()=>{
         a === "loading" && (d("fail"), h == null || h());
     }, [
         h,
@@ -150,14 +152,14 @@ const q = {
         var e;
         if (C.current !== r) {
             let t;
-            return C.current = r, d("reset"), r ? (t = setTimeout(v, T), (e = s.current) == null || e.load()) : d("fail"), ()=>{
+            return C.current = r, d("reset"), r ? (t = setTimeout(w, T), (e = s.current) == null || e.load()) : d("fail"), ()=>{
                 clearTimeout(t);
             };
         }
     }, [
         r,
         T,
-        v
+        w
     ]);
     const I = ()=>{
         y == null || y();
@@ -167,22 +169,22 @@ const q = {
         r
     ]).map((e)=>typeof e == "string" ? {
             src: e
-        } : e), m = a === "error" || a === "loading" || a === "loaded", V = /* @__PURE__ */ (0, _jsxruntime.jsx)("video", {
+        } : e), g = a === "error" || a === "loading" || a === "loaded", j = /* @__PURE__ */ (0, _jsxruntime.jsx)("video", {
         ref: s,
         playsInline: !0,
         disablePictureInPicture: !0,
         disableRemotePlayback: !0,
-        muted: x,
+        muted: k,
         loop: N,
         className: _videocssmistica.video,
-        preload: k,
-        onError: v,
+        preload: V,
+        onError: w,
         onPause: ()=>{
-            R == null || R(), d("pause");
+            v == null || v(), d("pause");
         },
         onTimeUpdate: ()=>{
             var e;
-            a !== "playing" && ((e = s.current) == null ? void 0 : e.currentTime) !== 0 && (b == null || b(), d("play"));
+            a !== "playing" && ((e = s.current) == null ? void 0 : e.currentTime) !== 0 && (R == null || R(), d("play"));
         },
         onCanPlay: ()=>{
             p === "streaming" && I();
@@ -190,12 +192,12 @@ const q = {
         onCanPlayThrough: ()=>{
             p !== "streaming" && I();
         },
-        poster: _,
+        poster: z,
         style: {
             // For some reason adding this style with classnames doesn't add the border radius in safari
-            borderRadius: w ? _skincontractcssmistica.vars.borderRadii.container : 0,
-            visibility: m ? "hidden" : "visible",
-            position: m || g !== 0 ? "absolute" : "static",
+            borderRadius: b,
+            visibility: g ? "hidden" : "visible",
+            position: g || m !== 0 ? "absolute" : "static",
             width: "100%",
             height: "100%"
         },
@@ -206,7 +208,7 @@ const q = {
                 type: t
             }, i);
         })
-    }), E = !!(g !== 0 || o.width && o.height), F = a === "error", j = _react.useMemo(()=>u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.ImageContent, {
+    }), E = !!(m !== 0 || o.width && o.height), F = a === "error", B = _react.useMemo(()=>u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.ImageContent, {
             aspectRatio: c,
             width: o.width,
             height: o.height,
@@ -218,14 +220,14 @@ const q = {
                 height: "100%"
             },
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.ImageError, {
-                noBorderRadius: !w,
+                borderRadius: b,
                 withIcon: F
             })
         }) : void 0, [
         c,
         o.height,
         o.width,
-        w,
+        b,
         F,
         u,
         E
@@ -234,10 +236,10 @@ const q = {
         style: {
             position: "relative"
         },
-        aspectRatio: g,
+        aspectRatio: m,
         width: o.width,
         height: o.height,
-        dataAttributes: (0, _dom.getPrefixedDataAttributes)(B, "Video"),
+        dataAttributes: (0, _dom.getPrefixedDataAttributes)(x, "Video"),
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
@@ -264,17 +266,17 @@ const q = {
                     }), typeof A == "function" ? A(t) : A && (A.current = t);
                 }
             }),
-            V,
+            j,
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 ref: f,
                 style: {
-                    position: g !== 0 ? "absolute" : "static",
-                    width: m ? "100%" : 0,
-                    height: m ? "100%" : 0,
+                    position: m !== 0 ? "absolute" : "static",
+                    width: g ? "100%" : 0,
+                    height: g ? "100%" : 0,
                     overflow: "hidden"
                 },
-                children: j
+                children: B
             })
         ]
     });
-}), re = z;
+}), ne = H;

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

@@ -1,3 +1,3 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
-var a = "_1y2v1nfe8 _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfea", f = "_1y2v1nfg4";
+var a = "_1y2v1nfe8 _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfeb", f = "_1y2v1nfg5";
 export { a as avatar, f as image };

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

@@ -1,12 +1,12 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./button.css.ts.vanilla.css-mistica.js";
 var _ = 2, y = 8, r = 24, f = 12, b = 6, a = 20, e = 16, p = 20, I = 14.5, i = 10.5, N = "rrbrpni _1y2v1nf2a", d = {
-    primary: "rrbrpno rrbrpn2 _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbe _1y2v1nfb4 _1y2v1nfby _1y2v1nfdz _1y2v1nfea _1y2v1nf23 _1y2v1nf3u",
-    secondary: "rrbrpnp rrbrpn2 _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbe _1y2v1nfb4 _1y2v1nfby _1y2v1nfdz _1y2v1nfea _1y2v1nf27 _1y2v1nf62",
-    danger: "rrbrpnq rrbrpn2 _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbe _1y2v1nfb4 _1y2v1nfby _1y2v1nfdz _1y2v1nfea _1y2v1nf22 _1y2v1nf3o"
-}, t = "rrbrpn0", l = "rrbrpng _1y2v1nf8x _1y2v1nfa6 _1y2v1nfbe _1y2v1nfby _1y2v1nfb4 _1y2v1nfdz _1y2v1nfds _1y2v1nf29 _1y2v1nf62 _1y2v1nfea _1y2v1nfd4", o = "rrbrpn7 _1y2v1nfbb _1y2v1nfb5 _1y2v1nfeg _1y2v1nffp _1y2v1nfbj _1y2v1nfbp", L = "rrbrpn4 _1y2v1nfbc _1y2v1nfcf _1y2v1nfea", c = "rrbrpn5", s = "rrbrpn9 _1y2v1nfba _1y2v1nfbp _1y2v1nfbj", A = "rrbrpnk _1y2v1nfba _1y2v1nfbp _1y2v1nfbj", P = {
-    primary: "rrbrpnl rrbrpn2 _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbe _1y2v1nfb4 _1y2v1nfby _1y2v1nfdz _1y2v1nfea _1y2v1nf22 _1y2v1nf3t",
-    secondary: "rrbrpnm rrbrpn2 _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbe _1y2v1nfb4 _1y2v1nfby _1y2v1nfdz _1y2v1nfea _1y2v1nf25 _1y2v1nf62",
-    danger: "rrbrpnn rrbrpn2 _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbe _1y2v1nfb4 _1y2v1nfby _1y2v1nfdz _1y2v1nfea _1y2v1nf22 _1y2v1nf3o"
+    primary: "rrbrpno rrbrpn2 _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbe _1y2v1nfb4 _1y2v1nfby _1y2v1nfdz _1y2v1nfeb _1y2v1nf23 _1y2v1nf3u",
+    secondary: "rrbrpnp rrbrpn2 _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbe _1y2v1nfb4 _1y2v1nfby _1y2v1nfdz _1y2v1nfeb _1y2v1nf27 _1y2v1nf62",
+    danger: "rrbrpnq rrbrpn2 _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbe _1y2v1nfb4 _1y2v1nfby _1y2v1nfdz _1y2v1nfeb _1y2v1nf22 _1y2v1nf3o"
+}, t = "rrbrpn0", l = "rrbrpng _1y2v1nf8x _1y2v1nfa6 _1y2v1nfbe _1y2v1nfby _1y2v1nfb4 _1y2v1nfdz _1y2v1nfds _1y2v1nf29 _1y2v1nf62 _1y2v1nfeb _1y2v1nfd4", o = "rrbrpn7 _1y2v1nfbb _1y2v1nfb5 _1y2v1nfeh _1y2v1nffq _1y2v1nfbj _1y2v1nfbp", L = "rrbrpn4 _1y2v1nfbc _1y2v1nfcf _1y2v1nfeb", c = "rrbrpn5", s = "rrbrpn9 _1y2v1nfba _1y2v1nfbp _1y2v1nfbj", A = "rrbrpnk _1y2v1nfba _1y2v1nfbp _1y2v1nfbj", P = {
+    primary: "rrbrpnl rrbrpn2 _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbe _1y2v1nfb4 _1y2v1nfby _1y2v1nfdz _1y2v1nfeb _1y2v1nf22 _1y2v1nf3t",
+    secondary: "rrbrpnm rrbrpn2 _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbe _1y2v1nfb4 _1y2v1nfby _1y2v1nfdz _1y2v1nfeb _1y2v1nf25 _1y2v1nf62",
+    danger: "rrbrpnn rrbrpn2 _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbe _1y2v1nfb4 _1y2v1nfby _1y2v1nfdz _1y2v1nfeb _1y2v1nf22 _1y2v1nf3o"
 };
 export { _ as CHEVRON_MARGIN_LEFT_LINK, y as ICON_MARGIN_PX, r as ICON_SIZE, f as PADDING_X_LINK, b as PADDING_Y_LINK, a as SMALL_ICON_SIZE, e as SMALL_SPINNER_SIZE, p as SPINNER_SIZE, I as X_PADDING_PX, i as X_SMALL_PADDING_PX, N as inverseLink, d as inverseVariants, t as isLoading, l as link, o as loadingContent, L as loadingFiller, c as small, s as textContent, A as textContentLink, P as variants };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./callout.css.ts.vanilla.css-mistica.js";
-var y = "_14g0jmy1 _1y2v1nf6i _1y2v1nf7r _1y2v1nf90 _1y2v1nfa9 _1y2v1nfba _1y2v1nfe1 _1y2v1nfea", _ = "_14g0jmy3 _1y2v1nfbw";
+var y = "_14g0jmy1 _1y2v1nf6i _1y2v1nf7r _1y2v1nf90 _1y2v1nfa9 _1y2v1nfba _1y2v1nfe1 _1y2v1nfeb", _ = "_14g0jmy3 _1y2v1nfbw";
 export { y as container, _ as content };

package/dist-es/callout.js

@@ -51,35 +51,40 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
 import m from "./stack.js";
 import h from "./inline.js";
 import g from "./box.js";
 import { useTheme as x } from "./hooks.js";
 import { useThemeVariant as b, ThemeVariant as v } from "./theme-variant-context.js";
 import { Text3 as C, Text2 as k } from "./text.js";
-import I from "./generated/mistica-icons/icon-close-regular.js";
-import T from "./icon-button.js";
-import y from "classnames";
-import B from "./button-group.js";
-import { container as j, content as z } from "./callout.css-mistica.js";
-import { sprinkles as A } from "./sprinkles.css-mistica.js";
+import y from "./generated/mistica-icons/icon-close-regular.js";
+import I from "./icon-button.js";
+import B from "classnames";
+import T from "./button-group.js";
+import { container as R, content as j } from "./callout.css-mistica.js";
+import { vars as S } from "./image.css-mistica.js";
+import { sprinkles as V } from "./sprinkles.css-mistica.js";
 import { vars as e } from "./skins/skin-contract.css-mistica.js";
-import { getPrefixedDataAttributes as N } from "./utils/dom.js";
-const P = (param)=>{
-    let { title: o, description: c, icon: a, onClose: i, button: l, secondaryButton: n, buttonLink: s, "aria-label": p, dataAttributes: u } = param;
-    const f = b(), { texts: d } = x();
+import { getPrefixedDataAttributes as z } from "./utils/dom.js";
+import { applyCssVars as A } from "./utils/css.js";
+const N = (param)=>{
+    let { title: t, description: c, icon: a, onClose: i, button: l, secondaryButton: s, buttonLink: n, "aria-label": p, dataAttributes: d } = param;
+    const f = b(), { texts: u } = x();
     return /* @__PURE__ */ r("section", _object_spread_props(_object_spread({
-        className: y(j, A({
+        className: B(R, V({
             background: {
                 inverse: e.colors.backgroundContainer,
                 alternative: e.colors.backgroundContainer,
                 default: e.colors.backgroundContainerAlternative
             }[f]
         })),
-        "aria-label": p !== null && p !== void 0 ? p : o
-    }, N(u, "Callout")), {
-        children: /* @__PURE__ */ t(v, {
+        style: A({
+            [S.mediaBorderRadius]: e.borderRadii.mediaSmall
+        }),
+        "aria-label": p !== null && p !== void 0 ? p : t
+    }, z(d, "Callout")), {
+        children: /* @__PURE__ */ o(v, {
             isInverse: !1,
             children: [
                 a && /* @__PURE__ */ r(g, {
@@ -87,22 +92,22 @@ const P = (param)=>{
                     children: a
                 }),
                 /* @__PURE__ */ r("div", {
-                    className: z,
-                    children: /* @__PURE__ */ t(m, {
+                    className: j,
+                    children: /* @__PURE__ */ o(m, {
                         space: 16,
                         children: [
-                            /* @__PURE__ */ t(h, {
+                            /* @__PURE__ */ o(h, {
                                 fullWidth: !0,
                                 alignItems: "flex-start",
                                 space: "between",
                                 children: [
-                                    /* @__PURE__ */ t(m, {
+                                    /* @__PURE__ */ o(m, {
                                         space: 4,
                                         children: [
                                             /* @__PURE__ */ r(C, {
                                                 as: "h2",
                                                 regular: !0,
-                                                children: o
+                                                children: t
                                             }),
                                             /* @__PURE__ */ r(k, {
                                                 as: "p",
@@ -112,7 +117,7 @@ const P = (param)=>{
                                             })
                                         ]
                                     }),
-                                    i && /* @__PURE__ */ r(T, {
+                                    i && /* @__PURE__ */ r(I, {
                                         size: 40,
                                         style: {
                                             display: "flex",
@@ -121,18 +126,18 @@ const P = (param)=>{
                                             justifyContent: "center"
                                         },
                                         onPress: i,
-                                        "aria-label": d.closeButtonLabel,
-                                        children: /* @__PURE__ */ r(I, {
+                                        "aria-label": u.closeButtonLabel,
+                                        children: /* @__PURE__ */ r(y, {
                                             size: 24,
                                             color: e.colors.neutralHigh
                                         })
                                     })
                                 ]
                             }),
-                            (l || n || s) && /* @__PURE__ */ r(B, {
+                            (l || s || n) && /* @__PURE__ */ r(T, {
                                 primaryButton: l,
-                                secondaryButton: n,
-                                link: s
+                                secondaryButton: s,
+                                link: n
                             })
                         ]
                     })
@@ -140,5 +145,5 @@ const P = (param)=>{
             ]
         })
     }));
-}, M = P;
-export { M as default };
+}, X = N;
+export { X as default };