@telefonica/mistica 15.9.0 → 15.11.0

package/dist/boxed.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     Boxed: function() {
-        return N;
+        return J;
     },
     InternalBoxed: function() {
-        return C;
+        return A;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -25,6 +25,7 @@ const _dom = require("./utils/dom.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _boxedcssmistica = require("./boxed.css-mistica.js");
 const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
+const _css = require("./utils/css.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -123,36 +124,41 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const w = (e, r)=>e || r ? (0, _sprinklescssmistica.sprinkles)({
+const z = (o, r)=>o || r ? (0, _sprinklescssmistica.sprinkles)({
         border: "none"
-    }) : _boxedcssmistica.boxBorder, C = /*#__PURE__*/ _react.forwardRef((param, g)=>{
-    let { children: e, isInverse: r = !1, className: l, role: d, dataAttributes: m, "aria-label": b, "aria-labelledby": f, width: c, height: p, minHeight: u, borderRadius: x = _skincontractcssmistica.vars.borderRadii.container, background: t, desktopOnly: v } = param;
-    const n = (0, _themevariantcontext.useIsInverseVariant)();
+    }) : _boxedcssmistica.boxBorder, s = (o)=>typeof o == "number" ? `${o}px` : o !== null && o !== void 0 ? o : "initial", e = (o, r)=>{
+    if (typeof r == "number" || typeof r == "string" || typeof r > "u") return {
+        [_boxedcssmistica.vars[o]]: s(r)
+    };
+    const t = {
+        [_boxedcssmistica.vars.mobile[o]]: s(r.mobile),
+        [_boxedcssmistica.vars.desktop[o]]: s(r.desktop)
+    };
+    return r.tablet && (t[_boxedcssmistica.vars.tablet[o]] = s(r.tablet)), t;
+}, A = /*#__PURE__*/ _react.forwardRef((param, w)=>{
+    let { children: o, isInverse: r = !1, className: t, role: p, dataAttributes: b, "aria-label": c, "aria-labelledby": y, width: h, maxWidth: x, minWidth: g, height: k, minHeight: u, borderRadius: B = _skincontractcssmistica.vars.borderRadii.container, background: d, desktopOnly: C } = param;
+    const m = (0, _themevariantcontext.useIsInverseVariant)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        ref: g,
-        style: {
-            width: c,
-            height: p,
-            minHeight: u,
-            boxSizing: "border-box",
-            background: t
-        },
-        className: (0, _classnames.default)(l, w(n, r), (0, _sprinklescssmistica.sprinkles)({
-            borderRadius: x,
+        ref: w,
+        style: _object_spread_props(_object_spread({}, (0, _css.applyCssVars)(_object_spread({}, e("width", h), e("maxWidth", x), e("minWidth", g), e("height", k), e("minHeight", u)))), {
+            background: d
+        }),
+        className: (0, _classnames.default)(t, _boxedcssmistica.boxed, z(m, r), (0, _sprinklescssmistica.sprinkles)({
+            borderRadius: B,
             overflow: "hidden",
-            background: (t !== null && t !== void 0 ? t : r) ? n ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainerBrand : _skincontractcssmistica.vars.colors.backgroundContainer
+            background: (d !== null && d !== void 0 ? d : r) ? m ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainerBrand : _skincontractcssmistica.vars.colors.backgroundContainer
         }), {
-            [_boxedcssmistica.desktopOnly]: v
+            [_boxedcssmistica.desktopOnly]: C
         }),
-        role: d,
-        "aria-label": b,
-        "aria-labelledby": f
-    }, (0, _dom.getPrefixedDataAttributes)(m)), {
+        role: p,
+        "aria-label": c,
+        "aria-labelledby": y
+    }, (0, _dom.getPrefixedDataAttributes)(b)), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
             isInverse: r,
-            children: e
+            children: o
         })
     }));
-}), N = /*#__PURE__*/ _react.forwardRef((e, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(C, _object_spread_props(_object_spread({}, e), {
+}), J = /*#__PURE__*/ _react.forwardRef((o, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(A, _object_spread_props(_object_spread({}, o), {
         ref: r
     })));

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

@@ -10,18 +10,27 @@ function _export(target, all) {
 }
 _export(exports, {
     buttonChild: function() {
-        return h;
+        return r;
     },
     buttons: function() {
-        return r;
+        return t;
+    },
+    centerInDesktop: function() {
+        return e;
+    },
+    centerInMobile: function() {
+        return h;
+    },
+    centerInTablet: function() {
+        return v;
     },
     container: function() {
-        return t;
+        return _;
     },
     inline: function() {
-        return v;
+        return a;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./button-group.css.ts.vanilla.css-mistica.js");
-var h = "_1xdd1h64", r = "_1xdd1h63", t = "_1xdd1h62", v = "_1xdd1h61 _1y2v1nfhl _1y2v1nfhz _1y2v1nfhp";
+var r = "_1xdd1h67", t = "_1xdd1h66", e = "_1xdd1h64", h = "_1xdd1h62", v = "_1xdd1h63", _ = "_1xdd1h65", a = "_1xdd1h61 _1y2v1nfhl _1y2v1nfhz _1y2v1nfhp";

package/dist/button-group.css.d.ts

@@ -1,4 +1,7 @@
 export declare const inline: string;
+export declare const centerInMobile: string;
+export declare const centerInTablet: string;
+export declare const centerInDesktop: string;
 export declare const container: string;
 export declare const buttons: string;
 export declare const buttonChild: string;

package/dist/button-group.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import type { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
-import type { DataAttributes, RendersNullableElement } from './utils/types';
+import type { ByBreakpoint, DataAttributes, RendersNullableElement } from './utils/types';
 export interface ButtonGroupProps {
     primaryButton?: RendersNullableElement<typeof ButtonPrimary>;
     secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
     link?: RendersNullableElement<typeof ButtonLink>;
     dataAttributes?: DataAttributes;
+    align?: ByBreakpoint<'center' | 'left'>;
 }
 declare const ButtonGroup: React.FC<ButtonGroupProps>;
 export default ButtonGroup;

package/dist/button-group.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return x;
+        return A;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -69,33 +69,46 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const u = (param)=>{
-    let { primaryButton: s, secondaryButton: t, link: e, dataAttributes: d } = param;
-    const m = !!s || !!t || !!e, n = !!s && !!t;
-    return m ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(_buttongroupcssmistica.inline, _buttongroupcssmistica.container)
-    }, (0, _dom.getPrefixedDataAttributes)(d, "ButtonGroup")), {
+const k = (param)=>{
+    let { primaryButton: t, secondaryButton: o, link: s, align: e = "left", dataAttributes: m } = param;
+    var _e_mobile, _e_tablet, _ref, _e_desktop;
+    const d = !!t || !!o || !!s, a = !!t && !!o, l = typeof e == "string" ? {
+        mobile: e,
+        tablet: e,
+        desktop: e
+    } : {
+        mobile: (_e_mobile = e.mobile) !== null && _e_mobile !== void 0 ? _e_mobile : "left",
+        tablet: (_ref = (_e_tablet = e.tablet) !== null && _e_tablet !== void 0 ? _e_tablet : e.mobile) !== null && _ref !== void 0 ? _ref : "left",
+        desktop: (_e_desktop = e.desktop) !== null && _e_desktop !== void 0 ? _e_desktop : "left"
+    };
+    return d ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+        className: (0, _classnames.default)(_buttongroupcssmistica.inline, _buttongroupcssmistica.container, {
+            [_buttongroupcssmistica.centerInDesktop]: l.desktop === "center",
+            [_buttongroupcssmistica.centerInTablet]: l.tablet === "center",
+            [_buttongroupcssmistica.centerInMobile]: l.mobile === "center"
+        })
+    }, (0, _dom.getPrefixedDataAttributes)(m, "ButtonGroup")), {
         children: [
-            (s || t) && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+            (t || o) && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: (0, _classnames.default)(_buttongroupcssmistica.inline, _buttongroupcssmistica.buttons),
                 children: [
-                    s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: _buttongroupcssmistica.buttonChild,
-                        children: s
-                    }),
                     t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _buttongroupcssmistica.buttonChild,
                         children: t
+                    }),
+                    o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: _buttongroupcssmistica.buttonChild,
+                        children: o
                     })
                 ]
             }),
-            e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _buttongroupcssmistica.buttonChild,
                 style: {
-                    width: n ? "100%" : "auto"
+                    width: a ? "100%" : "auto"
                 },
-                children: e
+                children: s
             })
         ]
     })) : null;
-}, x = u;
+}, A = k;

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

@@ -13,19 +13,19 @@ _export(exports, {
         return y;
     },
     container: function() {
-        return t;
-    },
-    containerWithTwoButtons: function() {
         return l;
     },
-    link: function() {
+    containerWithTwoButtons: function() {
         return i;
     },
-    linkWithTwoButtons: function() {
+    link: function() {
         return k;
     },
-    margins: function() {
+    linkInNewLine: function() {
         return r;
+    },
+    margins: function() {
+        return t;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
@@ -36,4 +36,4 @@ var y = {
     left: "kfxylh9 _1y2v1nfhs",
     center: "kfxylha _1y2v1nfht",
     "full-width": "kfxylhb _1y2v1nfht"
-}, t = "kfxylh2 _1y2v1nfhk _1y2v1nfhz", l = "kfxylh3", i = "kfxylhe kfxylhd _1y2v1nfhk _1y2v1nfi7", k = "kfxylhf kfxylhd _1y2v1nfhk _1y2v1nfi7", r = "kfxylh0";
+}, l = "kfxylh2 _1y2v1nfhk _1y2v1nfhz", i = "kfxylh3", k = "kfxylhe kfxylhd _1y2v1nfhk _1y2v1nfi7", r = "kfxylhf kfxylhd _1y2v1nfhk _1y2v1nfi7", t = "kfxylh0";

package/dist/button-layout.css.d.ts

@@ -3,4 +3,4 @@ export declare const container: string;
 export declare const containerWithTwoButtons: string;
 export declare const alignVariant: Record<"left" | "right" | "center" | "full-width", string>;
 export declare const link: string;
-export declare const linkWithTwoButtons: string;
+export declare const linkInNewLine: string;

package/dist/button-layout.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return q;
+        return W;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -122,7 +122,7 @@ const p = [
     const l = _react.Children.toArray(r).sort((b, k)=>{
         const f = p.indexOf(b.type), h = p.indexOf(k.type);
         return t === "right" ? h - f : f - h;
-    }), i = r ? l.length : (e ? 1 : 0) + (s ? 1 : 0), u = r ? l : t === "right" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    }), i = r ? l.length : (e ? 1 : 0) + (s ? 1 : 0), m = r ? l : t === "right" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             s,
             e
@@ -132,8 +132,8 @@ const p = [
             e,
             s
         ]
-    }), m = c ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: (0, _classnames.default)(i > 1 ? _buttonlayoutcssmistica.linkWithTwoButtons : _buttonlayoutcssmistica.link),
+    }), u = c ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        className: (0, _classnames.default)(i !== 1 ? _buttonlayoutcssmistica.linkInNewLine : _buttonlayoutcssmistica.link),
         "data-link": "true",
         children: c
     }) : null, d = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
@@ -143,13 +143,13 @@ const p = [
     }, (0, _dom.getPrefixedDataAttributes)(B, "ButtonLayout")), {
         children: t !== "right" || i > 1 ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
-                u,
-                m
+                m,
+                u
             ]
         }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
-                m,
-                u
+                u,
+                m
             ]
         })
     }));
@@ -157,4 +157,4 @@ const p = [
         className: _buttonlayoutcssmistica.margins,
         children: d
     }) : d;
-}, q = R;
+}, W = R;

package/dist/button.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { TouchableElement } from './touchable';
 import type { DataAttributes, IconProps, RendersElement, RendersNullableElement, TrackingEvent } from './utils/types';
 import type { Location } from 'history';
+import type { ExclusifyUnion } from './utils/utility-types';
 interface CommonProps {
     children: React.ReactNode;
     className?: string;
@@ -26,48 +27,26 @@ interface CommonProps {
 }
 export interface ToButtonProps extends CommonProps {
     to: string | Location;
+    newTab?: boolean;
     fullPageOnWebView?: boolean;
-    submit?: undefined;
-    fake?: undefined;
-    onPress?: undefined;
-    href?: undefined;
     onNavigate?: () => void | Promise<void>;
 }
 export interface OnPressButtonProps extends CommonProps {
     onPress: (event: React.MouseEvent<HTMLElement>) => void | undefined | Promise<void>;
-    submit?: undefined;
-    fake?: undefined;
-    to?: undefined;
-    href?: undefined;
-    onNavigate?: undefined;
 }
 export interface HrefButtonProps extends CommonProps {
     href: string;
     newTab?: boolean;
     loadOnTop?: boolean;
-    submit?: undefined;
-    fake?: undefined;
-    onPress?: undefined;
-    to?: undefined;
     onNavigate?: () => void | Promise<void>;
 }
 export interface FakeButtonProps extends CommonProps {
     fake: true;
-    submit?: undefined;
-    onPress?: undefined;
-    to?: undefined;
-    href?: undefined;
-    onNavigate?: undefined;
 }
 export interface SubmitButtonProps extends CommonProps {
     submit: true;
-    to?: undefined;
-    fake?: undefined;
-    onPress?: undefined;
-    href?: undefined;
-    onNavigate?: undefined;
 }
-export type ButtonProps = FakeButtonProps | SubmitButtonProps | ToButtonProps | OnPressButtonProps | HrefButtonProps;
+export type ButtonProps = ExclusifyUnion<FakeButtonProps | SubmitButtonProps | ToButtonProps | OnPressButtonProps | HrefButtonProps>;
 interface ButtonLinkCommonProps {
     children: React.ReactNode;
     disabled?: boolean;
@@ -104,6 +83,7 @@ interface ButtonLinkHrefProps extends ButtonLinkCommonProps {
 }
 interface ButtonLinkToProps extends ButtonLinkCommonProps {
     to: string;
+    newTab?: boolean;
     fullPageOnWebView?: boolean;
     onPress?: undefined;
     href?: undefined;

package/dist/button.js

@@ -20,10 +20,10 @@ _export(exports, {
         return Be;
     },
     ButtonPrimary: function() {
-        return Ae;
+        return Te;
     },
     ButtonSecondary: function() {
-        return Te;
+        return Ae;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -396,6 +396,7 @@ const k = (param)=>{
     }));
     if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, b), {
         to: e.to,
+        newTab: e.newTab,
         fullPageOnWebView: e.fullPageOnWebView,
         onNavigate: e.onNavigate
     }));
@@ -484,6 +485,7 @@ const k = (param)=>{
         ref: i
     }, y), {
         to: t.to,
+        newTab: t.newTab,
         fullPageOnWebView: t.fullPageOnWebView,
         onNavigate: t.onNavigate
     }));
@@ -521,7 +523,7 @@ const k = (param)=>{
         ref: i,
         type: "danger"
     }));
-}), Ae = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
+}), Te = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
     var { dataAttributes: e } = _param, t = _object_without_properties(_param, [
         "dataAttributes"
     ]);
@@ -533,7 +535,7 @@ const k = (param)=>{
         ref: i,
         type: "primary"
     }));
-}), Te = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
+}), Ae = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
     var { dataAttributes: e } = _param, t = _object_without_properties(_param, [
         "dataAttributes"
     ]);

package/dist/card.d.ts

@@ -17,6 +17,7 @@ type IconButtonAction = BaseIconButtonAction & ExclusifyUnion<{
     newTab?: boolean;
 } | {
     to: string;
+    newTab?: boolean;
     fullPageOnWebView?: boolean;
     replace?: boolean;
 } | {
@@ -43,6 +44,10 @@ export declare const CardActionIconButton: (props: CardAction) => JSX.Element;
 export declare const CardActionsGroup: ({ actions, padding, onClose, type, }: CardActionsGroupProps) => JSX.Element;
 export type AspectRatio = '1:1' | '16:9' | '7:10' | '9:10' | 'auto';
 export declare const CardActionSpinner: ({ color }: IconProps) => React.ReactElement;
+export declare const useVideoWithControls: (videoSrc?: VideoSource, poster?: string, videoRef?: React.RefObject<VideoElement>) => {
+    video?: React.ReactNode;
+    videoAction?: CardAction | undefined;
+};
 type TouchableProps = {
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
 } & ExclusifyUnion<{
@@ -52,6 +57,7 @@ type TouchableProps = {
     onNavigate?: () => void | Promise<void>;
 } | {
     to: string | undefined;
+    newTab?: boolean;
     fullPageOnWebView?: boolean;
     replace?: boolean;
     onNavigate?: () => void | Promise<void>;
@@ -165,6 +171,7 @@ interface CommonDisplayCardProps {
     descriptionLinesMax?: number;
     'aria-label'?: string;
     aspectRatio?: AspectRatio | number;
+    extra?: React.ReactNode;
 }
 type DisplayMediaCardBaseProps = {
     width?: number | string;
@@ -184,7 +191,6 @@ type DisplayMediaCardProps = DisplayMediaCardBaseProps & ExclusifyUnion<DisplayM
     buttonLink?: React.ReactComponentElement<typeof ButtonLink>;
 }>;
 type DisplayDataCardProps = CommonDisplayCardProps & {
-    extra?: React.ReactNode;
     isInverse?: boolean;
 } & ExclusifyUnion<TouchableProps | {
     button?: React.ReactComponentElement<typeof ButtonPrimary>;
@@ -214,6 +220,7 @@ interface PosterCardBaseProps {
     subtitleLinesMax?: number;
     description?: string;
     descriptionLinesMax?: number;
+    extra?: React.ReactNode;
 }
 interface PosterCardWithImageProps extends PosterCardBaseProps {
     backgroundImage: string;