@telefonica/mistica 14.45.0 → 14.46.0

package/dist/tooltip.js

@@ -35,7 +35,7 @@ const _themevariantcontext = require("./theme-variant-context.js");
 const _common = require("./utils/common.js");
 const _tooltipcontextprovider = require("./tooltip-context-provider.js");
 const _platform = require("./utils/platform.js");
-const _iconbutton = /*#__PURE__*/ _interop_require_default(require("./icon-button.js"));
+const _iconbutton = require("./icon-button.js");
 const _iconcloseregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-close-regular.js"));
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 function _interop_require_default(obj) {
@@ -165,16 +165,16 @@ function _object_without_properties_loose(source, excluded) {
 }
 const lt = (t)=>({
         border: `1px solid ${t ? _skincontractcssmistica.vars.colors.backgroundContainer : _skincontractcssmistica.vars.colors.border}`
-    }), ct = 496, Yt = 300, Gt = 500, Kt = 100, p = 20, O = 6, N = O + p / 2 + 1, Ut = (t)=>{
+    }), ct = 496, Yt = 300, Gt = 500, Kt = 100, p = 20, w = 6, C = w + p / 2 + 1, Ut = (t)=>{
     switch(t){
         case "left":
-            return `translateX(-${O}px)`;
+            return `translateX(-${w}px)`;
         case "right":
-            return `translateX(${O}px)`;
+            return `translateX(${w}px)`;
         case "top":
-            return `translateY(-${O}px)`;
+            return `translateY(-${w}px)`;
         case "bottom":
-            return `translateY(${O}px)`;
+            return `translateY(${w}px)`;
         default:
             return "";
     }
@@ -186,12 +186,12 @@ const lt = (t)=>({
     };
 }, ft = (t, u, v, d, x)=>{
     if (!t || !u) return;
-    const { top: b, bottom: h, left: I, right: W } = t, o = d - h, R = x - W, _ = b, a = I, { width: z, height: H } = pt(u), C = z + N, T = H + N, M = C <= Math.max(a, R), E = T <= Math.max(o, _);
+    const { top: b, bottom: h, left: O, right: W } = t, o = d - h, R = x - W, _ = b, a = O, { width: X, height: V } = pt(u), N = X + C, T = V + C, M = N <= Math.max(a, R), E = T <= Math.max(o, _);
     if (!(!E && !M)) switch(v){
         case "left":
-            return M ? C <= a ? "left" : "right" : o > _ ? "bottom" : "top";
+            return M ? N <= a ? "left" : "right" : o > _ ? "bottom" : "top";
         case "right":
-            return M ? C <= R ? "right" : "left" : o > _ ? "bottom" : "top";
+            return M ? N <= R ? "right" : "left" : o > _ ? "bottom" : "top";
         case "top":
             return E ? T <= _ ? "top" : "bottom" : a > R ? "left" : "right";
         case "bottom":
@@ -200,20 +200,20 @@ const lt = (t)=>({
             return;
     }
 }, jt = (param)=>{
-    let { content: t, target: u, width: v, position: d = "top", dataAttributes: x, delay: b = !0, centerContent: h, open: I, onClose: W, hasPointerInteractionOnly: o = !1, trackingEvent: R } = param;
-    const { texts: _ } = (0, _hooks.useTheme)(), a = (0, _hooks.useAriaId)(), { openTooltipId: z } = (0, _tooltipcontextprovider.useTooltipState)(), { openTooltip: H, closeTooltip: C } = (0, _tooltipcontextprovider.useSetTooltipState)(), [T, M] = _react.useState(), [E, P] = _react.useState(), Y = _react.useRef(null), G = _react.useRef(null), [y, dt] = _react.useState(null), m = (0, _environment.isTouchableDevice)(), K = b ? Gt : 0, [et, U] = _react.useState(!1), [j, k] = _react.useState(!1), q = I !== void 0, [ot, Z] = _react.useState(!1), S = q ? I : a === z, J = (0, _themevariantcontext.useIsInverseVariant)(), f = (0, _hooks.useBoundingRect)(Y, S), V = (0, _hooks.useBoundingRect)(G, S, !0), l = (0, _hooks.useWindowSize)(), w = _react.useCallback(()=>{
-        Z(!1), U(!1), k(!1);
+    let { content: t, target: u, width: v, position: d = "top", dataAttributes: x, delay: b = !0, centerContent: h, open: O, onClose: W, hasPointerInteractionOnly: o = !1, trackingEvent: R } = param;
+    const { texts: _ } = (0, _hooks.useTheme)(), a = (0, _hooks.useAriaId)(), { openTooltipId: X } = (0, _tooltipcontextprovider.useTooltipState)(), { openTooltip: V, closeTooltip: N } = (0, _tooltipcontextprovider.useSetTooltipState)(), [T, M] = _react.useState(), [E, z] = _react.useState(), P = _react.useRef(null), Y = _react.useRef(null), [y, dt] = _react.useState(null), m = (0, _environment.isTouchableDevice)(), G = b ? Gt : 0, [et, K] = _react.useState(!1), [U, k] = _react.useState(!1), j = O !== void 0, [ot, q] = _react.useState(!1), S = j ? O : a === X, Z = (0, _themevariantcontext.useIsInverseVariant)(), f = (0, _hooks.useBoundingRect)(P, S), H = (0, _hooks.useBoundingRect)(Y, S, !0), l = (0, _hooks.useWindowSize)(), I = _react.useCallback(()=>{
+        q(!1), K(!1), k(!1);
     }, []);
     _react.useEffect(()=>{
-        S || w();
+        S || I();
     }, [
         S,
-        w
+        I
     ]), _react.useEffect(()=>{
         if (!y || !S) return;
         const s = ft(f, y, d, l.height, l.width);
         if (!s || !f) {
-            M(void 0), P(void 0), w();
+            M(void 0), z(void 0), I();
             return;
         }
         let r, e;
@@ -224,7 +224,7 @@ const lt = (t)=>({
                 r = {
                     left: Math.max(0, Math.min(rt, (c + L - F) / 2)),
                     top: A - D - p / 2,
-                    padding: `0px 0px ${N}px 0px`
+                    padding: `0px 0px ${C}px 0px`
                 }, e = {
                     left: Math.max(g, Math.min(l.width - g - p, (c + L - p) / 2)),
                     top: "100%"
@@ -233,8 +233,8 @@ const lt = (t)=>({
             case "bottom":
                 r = {
                     left: Math.max(0, Math.min(rt, (c + L - F) / 2)),
-                    top: $ - O,
-                    padding: `${N}px 0px 0px 0px`
+                    top: $ - w,
+                    padding: `${C}px 0px 0px 0px`
                 }, e = {
                     left: Math.max(g, Math.min(l.width - g - p, (c + L - p) / 2)),
                     bottom: "100%",
@@ -245,7 +245,7 @@ const lt = (t)=>({
                 r = {
                     left: c - F - p / 2,
                     top: Math.max(0, Math.min(st, (A + $ - D) / 2)),
-                    padding: `0px ${N}px 0px 0px`
+                    padding: `0px ${C}px 0px 0px`
                 }, e = {
                     top: Math.max(g, Math.min(l.height - g - p, (A + $ - p) / 2)),
                     left: "100%",
@@ -256,9 +256,9 @@ const lt = (t)=>({
             case "right":
             default:
                 r = {
-                    left: L - O,
+                    left: L - w,
                     top: Math.max(0, Math.min(st, (A + $ - D) / 2)),
-                    padding: `0px 0px 0px ${N}px`
+                    padding: `0px 0px 0px ${C}px`
                 }, e = {
                     top: Math.max(g, Math.min(l.height - g - p, (A + $ - p) / 2)),
                     right: "100%",
@@ -267,61 +267,61 @@ const lt = (t)=>({
                 };
                 break;
         }
-        typeof e.top == "number" && (e.top -= r.top, e.top = `${e.top / D * 100}%`), typeof e.left == "number" && (e.left -= r.left, e.left = `${e.left / F * 100}%`), (0, _helpers.isEqual)(r, T) || M(r), (0, _helpers.isEqual)(e, E) || P(e);
+        typeof e.top == "number" && (e.top -= r.top, e.top = `${e.top / D * 100}%`), typeof e.left == "number" && (e.left -= r.left, e.left = `${e.left / F * 100}%`), (0, _helpers.isEqual)(r, T) || M(r), (0, _helpers.isEqual)(e, E) || z(e);
     }, [
         y,
         f,
-        V,
+        H,
         S,
         d,
         l,
         T,
         E,
-        J,
+        Z,
         m,
         a,
-        w
+        I
     ]);
-    const Q = _react.useRef(!1);
+    const J = _react.useRef(!1);
     _react.useEffect(()=>{
         const s = (c)=>{
             switch(c.key){
                 case _keys.ESC:
-                    o || w();
+                    o || I();
                     break;
                 case _keys.TAB:
-                    Q.current = !0;
+                    J.current = !0;
                     break;
             }
-        }, r = ()=>Q.current = !1, e = (c)=>{
-            !o && m && f && (c.clientX < f.left || c.clientX > f.right || c.clientY < f.top || c.clientY > f.bottom) && w();
+        }, r = ()=>J.current = !1, e = (c)=>{
+            !o && m && f && (c.clientX < f.left || c.clientX > f.right || c.clientY < f.top || c.clientY > f.bottom) && I();
         };
         return document.addEventListener("keydown", s, !1), document.addEventListener("keyup", r, !1), document.addEventListener("click", e, !1), ()=>{
             document.removeEventListener("keydown", s, !1), document.removeEventListener("keyup", r, !1), document.removeEventListener("click", e, !1);
         };
     }, [
         m,
-        w,
+        I,
         f,
         o
     ]), _react.useEffect(()=>{
-        q || (j || et || ot ? H(a) : C(a));
+        j || (U || et || ot ? V(a) : N(a));
     }, [
-        j,
+        U,
         et,
         ot,
         a,
-        H,
-        C,
-        q
+        V,
+        N,
+        j
     ]);
-    const mt = ft(f, y, d, l.height, l.width), ut = h !== void 0 ? h : (V == null ? void 0 : V.width) === _tooltipcssmistica.CONTENT_MIN_WIDTH;
+    const mt = ft(f, y, d, l.height, l.width), ut = h !== void 0 ? h : (H == null ? void 0 : H.width) === _tooltipcssmistica.CONTENT_MIN_WIDTH;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 ref: (s)=>{
                     const r = s == null ? void 0 : s.firstElementChild;
-                    r && r !== Y.current && (Y.current = r);
+                    r && r !== P.current && (P.current = r);
                 },
                 onMouseOver: ()=>{
                     !m && !o && k(!0);
@@ -330,13 +330,13 @@ const lt = (t)=>({
                     !m && !o && k(!1);
                 },
                 onClick: ()=>{
-                    (m || o) && k(o ? !j : !0);
+                    (m || o) && k(o ? !U : !0);
                 },
                 onFocus: ()=>{
-                    Q.current && !o && Z(!0);
+                    J.current && !o && q(!0);
                 },
                 onBlur: ()=>{
-                    !m && !o && Z(!1);
+                    !m && !o && q(!1);
                 },
                 "aria-describedby": a,
                 children: u
@@ -344,13 +344,13 @@ const lt = (t)=>({
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.Transition, {
                     in: S,
-                    nodeRef: G,
+                    nodeRef: Y,
                     timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : {
-                        enter: Yt + K,
+                        enter: Yt + G,
                         exit: Kt
                     },
                     onExited: ()=>{
-                        M(void 0), P(void 0);
+                        M(void 0), z(void 0);
                     },
                     mountOnEnter: !0,
                     unmountOnExit: !0,
@@ -376,20 +376,20 @@ const lt = (t)=>({
                                     pointerEvents: s === "entered" ? "auto" : "none",
                                     transform: Ut(mt)
                                 }, T, _tooltipcssmistica.tooltipTransitionClasses[s]), {
-                                    transition: s === "entering" ? `opacity .1s linear ${K}ms,transform .3s cubic-bezier(0.215,0.61,0.335,1) ${K}ms` : "opacity .1s linear"
+                                    transition: s === "entering" ? `opacity .1s linear ${G}ms,transform .3s cubic-bezier(0.215,0.61,0.335,1) ${G}ms` : "opacity .1s linear"
                                 }),
-                                ref: (0, _common.combineRefs)(dt, G),
+                                ref: (0, _common.combineRefs)(dt, Y),
                                 onMouseEnter: ()=>{
-                                    !m && s === "entered" && !o && U(!0);
+                                    !m && s === "entered" && !o && K(!0);
                                 },
                                 onMouseLeave: ()=>{
-                                    !m && !o && U(!1);
+                                    !m && !o && K(!1);
                                 },
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                     className: _tooltipcssmistica.tooltip,
                                     style: _object_spread_props(_object_spread({
                                         width: v
-                                    }, lt(J)), {
+                                    }, lt(Z)), {
                                         maxWidth: Math.min(ct, l.width)
                                     }),
                                     children: [
@@ -401,15 +401,17 @@ const lt = (t)=>({
                                                 isInverse: !1,
                                                 children: [
                                                     t,
-                                                    W && /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
+                                                    W && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                         className: _tooltipcssmistica.closeButtonIcon,
-                                                        onPress: ()=>{
-                                                            k(!1), W();
-                                                        },
-                                                        trackingEvent: R,
-                                                        "aria-label": _.modalClose,
-                                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcloseregular.default, {
-                                                            color: _skincontractcssmistica.vars.colors.neutralHigh
+                                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalIconButton, {
+                                                            onPress: ()=>{
+                                                                k(!1), W();
+                                                            },
+                                                            trackingEvent: R,
+                                                            "aria-label": _.modalClose,
+                                                            Icon: _iconcloseregular.default,
+                                                            hasInteractiveAreaBleed: !0,
+                                                            small: !0
                                                         })
                                                     })
                                                 ]
@@ -420,7 +422,7 @@ const lt = (t)=>({
                                             style: E,
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                 className: (0, _classnames.default)(_tooltipcssmistica.arrow),
-                                                style: lt(J)
+                                                style: lt(Z)
                                             })
                                         })
                                     ]
@@ -432,7 +434,7 @@ const lt = (t)=>({
         ]
     });
 }, qt = (_param)=>{
-    var { centerContent: t, textCenter: u, extra: v, children: d, dataAttributes: x, title: b, description: h } = _param, I = _object_without_properties(_param, [
+    var { centerContent: t, textCenter: u, extra: v, children: d, dataAttributes: x, title: b, description: h } = _param, O = _object_without_properties(_param, [
         "centerContent",
         "textCenter",
         "extra",
@@ -465,5 +467,5 @@ const lt = (t)=>({
         dataAttributes: _object_spread({
             "component-name": "Tooltip"
         }, x)
-    }, I));
+    }, O));
 }, ge = qt;

package/dist/touchable.css-mistica.js

@@ -12,13 +12,16 @@ _export(exports, {
     base: function() {
         return f;
     },
-    notTouchable: function() {
+    marginReset: function() {
         return y;
     },
-    touchable: function() {
+    notTouchable: function() {
         return _;
+    },
+    touchable: function() {
+        return t;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./touchable.css.ts.vanilla.css-mistica.js");
-var f = "mhti6u1 _1y2v1nfji", y = "mhti6u4", _ = "mhti6u1 _1y2v1nfji _1y2v1nf6b _1y2v1nf7k _1y2v1nf8t _1y2v1nfa2 _1y2v1nfgk _1y2v1nfj0 _1y2v1nfh5 _1y2v1nf34 _1y2v1nf6a _1y2v1nfjk";
+var f = "mhti6u2 _1y2v1nfji", y = "mhti6u0", _ = "mhti6u5", t = "mhti6u2 _1y2v1nfji _1y2v1nf6b _1y2v1nf7k _1y2v1nf8t _1y2v1nfa2 _1y2v1nfgk _1y2v1nfj0 _1y2v1nfh5 _1y2v1nf34 _1y2v1nf6a _1y2v1nfjk";

package/dist/touchable.css.d.ts

@@ -1,3 +1,4 @@
+export declare const marginReset: string;
 export declare const base: string;
 export declare const touchable: string;
 export declare const notTouchable: string;

package/dist/touchable.d.ts

@@ -71,5 +71,7 @@ export interface PropsMaybeOnPress extends CommonProps {
 export type Props = PropsHref | PropsTo | PropsOnPress | PropsMaybeHref | PropsMaybeTo | PropsMaybeOnPress;
 export type TouchableElement = HTMLDivElement | HTMLAnchorElement | HTMLButtonElement;
 declare const Touchable: React.ForwardRefExoticComponent<Props & React.RefAttributes<TouchableElement>>;
-export declare const BaseTouchable: React.ForwardRefExoticComponent<Props & React.RefAttributes<TouchableElement>>;
+export declare const BaseTouchable: React.ForwardRefExoticComponent<(Props & {
+    resetMargin?: boolean | undefined;
+}) & React.RefAttributes<TouchableElement>>;
 export default Touchable;

package/dist/touchable.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     BaseTouchable: function() {
-        return X;
+        return Y;
     },
     default: function() {
-        return Y;
+        return Z;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -124,16 +124,43 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-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;
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+const $ = function(e) {
+    let t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, l = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
+    t ? window.open(e, "_blank") : l ? 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)(), x = E(), f = _react.useRef(!1);
-    let l = [];
-    e.trackingEvent && (Array.isArray(e.trackingEvent) ? l = e.trackingEvent : l = [
+    const { texts: l, analytics: v, platformOverrides: N, Link: P, useHrefDecorator: E } = (0, _hooks.useTheme)(), R = E(), f = _react.useRef(!1);
+    let r = [];
+    e.trackingEvent && (Array.isArray(e.trackingEvent) ? r = e.trackingEvent : r = [
         e.trackingEvent
     ]);
-    const o = e.children, n = _object_spread({
+    const d = e.children, n = _object_spread({
         className: e.className,
         disabled: e.disabled,
         style: e.style,
@@ -147,25 +174,25 @@ const L = function(e) {
         "aria-selected": e["aria-selected"],
         "aria-live": e["aria-live"],
         tabIndex: e.tabIndex
-    }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Touchable")), u = e.type ? e.type : "button", r = !!e.href && !!e.newTab, m = !r && !!e.href && !!e.loadOnTop, s = (a)=>{
+    }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Touchable")), u = e.type ? e.type : "button", c = !!e.href && !!e.newTab, m = !c && !!e.href && !!e.loadOnTop, s = (a)=>{
         e.stopPropagation && a.stopPropagation();
     }, h = (a)=>{
         e.onPress && e.onPress(a);
     }, k = ()=>{
         var _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)=>{
+        return e.href ? R(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(r.map((a)=>v.logEvent(a))), g = (a)=>{
         f.current || (f.current = !0, y().finally(()=>{
             f.current = !1, a();
         }));
-    }, R = (a)=>{
-        if (s(a), !l.length) {
+    }, x = (a)=>{
+        if (s(a), !r.length) {
             h(a);
             return;
         }
         g(()=>h(a));
     }, C = (a)=>{
-        s(a), l.length && (a.preventDefault(), g(()=>L(k(), r, m)));
+        s(a), r.length && (a.preventDefault(), g(()=>$(k(), c, m)));
     }, D = (a)=>{
         s(a), y();
     }, w = (a)=>{
@@ -178,16 +205,16 @@ const L = function(e) {
         onKeyDown: w,
         href: e.disabled ? void 0 : k(),
         target: (()=>{
-            if (r) return "_blank";
+            if (c) return "_blank";
             if (m) return "_top";
         })(),
-        rel: r ? "noopener noreferrer" : void 0,
+        rel: c ? "noopener noreferrer" : void 0,
         ref: t,
         children: [
-            o,
-            r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
+            d,
+            c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
-                    children: d.linkOpensInNewTab
+                    children: l.linkOpensInNewTab
                 })
             })
         ]
@@ -200,7 +227,7 @@ const L = function(e) {
         replace: e.replace,
         onClick: D,
         onKeyDown: w,
-        children: o
+        children: d
     }));
     if (e.onPress) {
         var _e_as, _n_role;
@@ -216,19 +243,26 @@ const L = function(e) {
             "aria-labelledby": e["aria-labelledby"],
             type: u,
             ref: t,
-            onClick: R,
-            children: o
+            onClick: x,
+            children: d
         }));
     }
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, n), {
         ref: t,
         className: (0, _classnames.default)(n.className, _touchablecssmistica.notTouchable),
-        children: o
+        children: d
     }));
-}), $ = /*#__PURE__*/ _react.forwardRef((e, t)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(T, _object_spread_props(_object_spread({}, e), {
+}), q = /*#__PURE__*/ _react.forwardRef((e, t)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(T, _object_spread_props(_object_spread({}, e), {
         className: (0, _classnames.default)(_touchablecssmistica.touchable, e.className),
         ref: t
-    }))), X = /*#__PURE__*/ _react.forwardRef((e, t)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(T, _object_spread_props(_object_spread({}, e), {
-        className: (0, _classnames.default)(_touchablecssmistica.base, e.className),
-        ref: t
-    }))), Y = $;
+    }))), Y = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
+    var { resetMargin: e = !0 } = _param, t = _object_without_properties(_param, [
+        "resetMargin"
+    ]);
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(T, _object_spread_props(_object_spread({}, t), {
+        className: (0, _classnames.default)(_touchablecssmistica.base, t.className, {
+            [_touchablecssmistica.marginReset]: e
+        }),
+        ref: l
+    }));
+}), Z = q;

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

@@ -17,7 +17,7 @@ _export(exports, {
         return x;
     },
     useSupportsAspectRatio: function() {
-        return N;
+        return y;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -126,7 +126,7 @@ function _object_spread_props(target, source) {
 }
 const u = /*#__PURE__*/ _react.createContext(!0), x = (param)=>{
     let { children: t } = param;
-    const [o, s] = _react.useState(!0);
+    const [r, s] = _react.useState(!0);
     return (0, _hooks.useIsomorphicLayoutEffect)(()=>{
         try {
             CSS.supports("aspect-ratio", "1 / 1") || s(!1);
@@ -134,16 +134,16 @@ const u = /*#__PURE__*/ _react.createContext(!0), x = (param)=>{
             s(!1);
         }
     }, []), /* @__PURE__ */ (0, _jsxruntime.jsx)(u.Provider, {
-        value: o,
+        value: r,
         children: t
     });
-}, N = ()=>_react.useContext(u), W = (t)=>{
-    const o = N(), s = typeof t.width != "number" && typeof t.height != "number" && t.aspectRatio !== 0, e = s ? t.aspectRatio : void 0;
+}, y = ()=>_react.useContext(u), W = (t)=>{
+    const r = y(), s = typeof t.width != "number" && typeof t.height != "number" && t.aspectRatio !== 0, e = s ? t.aspectRatio : void 0;
     let i = t.width, a = t.height;
     var _t_aspectRatio, _t_aspectRatio1;
     t.width !== void 0 && t.height !== void 0 ? (i = t.width, a = t.height) : typeof t.width == "number" ? a = t.aspectRatio !== 0 ? t.width / ((_t_aspectRatio = t.aspectRatio) !== null && _t_aspectRatio !== void 0 ? _t_aspectRatio : 1) : void 0 : typeof t.height == "number" ? i = t.aspectRatio !== 0 ? t.height * ((_t_aspectRatio1 = t.aspectRatio) !== null && _t_aspectRatio1 !== void 0 ? _t_aspectRatio1 : 1) : void 0 : i = t.width || "100%";
     var _t_as;
-    const c = s && !o, r = /*#__PURE__*/ _react.createElement((_t_as = t.as) !== null && _t_as !== void 0 ? _t_as : "div", _object_spread({
+    const c = s && !r, n = /*#__PURE__*/ _react.createElement((_t_as = t.as) !== null && _t_as !== void 0 ? _t_as : "div", _object_spread({
         className: (0, _classnames.default)(t.className, _aspectratiosupportcssmistica.container, {
             [_aspectratiosupportcssmistica.containerWithWrapper]: c
         }),
@@ -167,7 +167,7 @@ const u = /*#__PURE__*/ _react.createContext(!0), x = (param)=>{
             },
             className: _aspectratiosupportcssmistica.wrapper
         }, t.dataAttributes), {
-            children: r
+            children: n
         }));
-    } else return r;
+    } else return n;
 };

package/dist/video.d.ts

@@ -41,6 +41,8 @@ export interface VideoElement extends HTMLDivElement {
     play: () => Promise<void>;
     pause: () => void;
     load: () => void;
+    /** Stops the video and shows the poster image (if available) */
+    stop: () => void;
     setCurrentTime: (time: number) => void;
 }
 declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<VideoElement>>;