@telefonica/mistica 14.42.1 → 14.43.0

package/dist/cvv-field.js

@@ -6,14 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return dr;
+        return gr;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _hooks = require("./hooks.js");
 const _iconcvvvisamc = /*#__PURE__*/ _interop_require_default(require("./icons/icon-cvv-visa-mc.js"));
 const _iconcvvamex = /*#__PURE__*/ _interop_require_default(require("./icons/icon-cvv-amex.js"));
-const _tooltip = /*#__PURE__*/ _interop_require_default(require("./tooltip.js"));
+const _popover = /*#__PURE__*/ _interop_require_default(require("./popover.js"));
 const _iconbutton = /*#__PURE__*/ _interop_require_default(require("./icon-button.js"));
 const _iconinformationregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-information-regular.js"));
 const _formcontext = require("./form-context.js");
@@ -32,6 +33,47 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -111,8 +153,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const X = (param)=>{
-    let { acceptedCards: t } = param;
+const Z = (param)=>{
+    let { acceptedCards: e } = param;
     const { texts: i } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
@@ -134,7 +176,7 @@ const X = (param)=>{
                         ]
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {}),
-                    (t == null ? void 0 : t.americanExpress) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                    (e == null ? void 0 : e.americanExpress) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
                         space: 16,
                         alignItems: "center",
                         children: [
@@ -151,12 +193,12 @@ const X = (param)=>{
             })
         })
     });
-}, Y = (_param)=>{
-    var { disabled: t, error: i, helperText: T, name: m, optional: a, validate: s, onChange: F, onChangeValue: z, onBlur: y, acceptedCards: B = {
+}, _ = (_param)=>{
+    var { disabled: e, error: i, helperText: z, name: m, optional: u, validate: c, onChange: B, onChangeValue: M, onBlur: V, acceptedCards: y = {
         americanExpress: !0,
         visa: !0,
         masterCard: !0
-    }, maxLength: c = 4, value: E, autoComplete: M = "cc-csc", defaultValue: V, dataAttributes: $ } = _param, j = _object_without_properties(_param, [
+    }, maxLength: l = 4, value: E, autoComplete: $ = "cc-csc", defaultValue: j, dataAttributes: A } = _param, S = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -173,42 +215,44 @@ const X = (param)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: l } = (0, _hooks.useTheme)(), { setFormError: A, jumpToNext: S } = (0, _formcontext.useForm)(), u = (o, n)=>o ? o.length !== c ? l.formCreditCardCvvError : s == null ? void 0 : s(o, n) : a ? "" : l.formFieldErrorIsMandatory, d = (o)=>o, v = (0, _formcontext.useFieldProps)({
+    const { texts: n } = (0, _hooks.useTheme)(), { setFormError: O, jumpToNext: R } = (0, _formcontext.useForm)(), [p, d] = _react.useState(!1), v = (o, s)=>o ? o.length !== l ? n.formCreditCardCvvError : c == null ? void 0 : c(o, s) : u ? "" : n.formFieldErrorIsMandatory, C = (o)=>o, g = (0, _formcontext.useFieldProps)({
         name: m,
         value: E,
-        defaultValue: V,
-        processValue: d,
-        helperText: T,
-        optional: a,
+        defaultValue: j,
+        processValue: C,
+        helperText: z,
+        optional: u,
         error: i,
-        disabled: t,
-        onBlur: y,
-        validate: u,
-        onChange: F,
-        onChangeValue: z
-    }), e = (0, _css.pxToRem)(16);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, j, v), {
-        maxLength: c,
+        disabled: e,
+        onBlur: V,
+        validate: v,
+        onChange: B,
+        onChangeValue: M
+    }), t = (0, _css.pxToRem)(16);
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, S, g), {
+        maxLength: l,
         onChange: (o)=>{
-            v.onChange(o);
-            const n = o.currentTarget.value, C = d(n);
-            if (C.length === c) {
-                const g = u(C, n);
-                g ? A({
+            g.onChange(o);
+            const s = o.currentTarget.value, h = C(s);
+            if (h.length === l) {
+                const I = v(h, s);
+                I ? O({
                     name: m,
-                    error: g
-                }) : S(m);
+                    error: I
+                }) : R(m);
             }
         },
-        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_tooltip.default, {
+        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_popover.default, {
             position: "top",
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(X, {
-                acceptedCards: B
+            open: p,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {
+                acceptedCards: y
             }),
+            onClose: ()=>d(!1),
             target: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
-                    width: e,
-                    height: e
+                    width: t,
+                    height: t
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
                     size: _textfieldbasecssmistica.iconButtonSize,
@@ -217,21 +261,22 @@ const X = (param)=>{
                         alignItems: "center",
                         justifyContent: "center",
                         position: "relative",
-                        left: `calc(-1 * (${_textfieldbasecssmistica.iconButtonSize} - ${e}) / 2)`,
-                        top: `calc(-1 * (${_textfieldbasecssmistica.iconButtonSize} - ${e}) / 2)`
+                        left: `calc(-1 * (${_textfieldbasecssmistica.iconButtonSize} - ${t}) / 2)`,
+                        top: `calc(-1 * (${_textfieldbasecssmistica.iconButtonSize} - ${t}) / 2)`
                     },
-                    "aria-label": l.formCreditCardCvvTooltipVisaMcButton,
+                    onPress: ()=>d(!p),
+                    "aria-label": p ? n.formCreditCardCvvTooltipVisaMcButtonClose : n.formCreditCardCvvTooltipVisaMcButtonOpen,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconinformationregular.default, {
-                        size: e,
+                        size: t,
                         color: _skincontractcssmistica.vars.colors.neutralMedium
                     })
                 })
             })
         }),
-        autoComplete: M,
+        autoComplete: $,
         inputComponent: _integerfield.IntegerInput,
         dataAttributes: _object_spread({
             "component-name": "CvvField"
-        }, $)
+        }, A)
     }));
-}, dr = Y;
+}, gr = _;

package/dist/feedback.js

@@ -175,34 +175,34 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const R = (r)=>!(0, _platform.isRunningAcceptanceTest)(r), W = (param)=>{
+const D = (r)=>!(0, _platform.isRunningAcceptanceTest)(r), R = (param)=>{
     let { primaryButton: r, secondaryButton: o } = param;
     return !!r || !!o;
-}, Te = (param)=>{
+}, Be = (param)=>{
     let { isInverse: r } = param;
     const o = `@media ${_mediaqueriescssmistica.tabletOrSmaller} {
-        body {background:${r ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.background}}
+        body {background:${r ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.background}; background-attachment: fixed;}
     }`;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("style", {
         children: o
     });
-}, O = (r)=>{
+}, z = (r)=>{
     (0, _webviewbridge.isWebViewBridgeAvailable)() && (0, _webviewbridge.requestVibration)(r).catch(()=>{});
-}, L = (r)=>{
+}, W = (r)=>{
     _react.useEffect(()=>{
         let o;
-        return r === "success" && (o = setTimeout(()=>O("success"), 700)), r === "error" && (o = setTimeout(()=>O("error"), 1e3)), ()=>{
+        return r === "success" && (o = setTimeout(()=>z("success"), 700)), r === "error" && (o = setTimeout(()=>z("error"), 1e3)), ()=>{
             clearTimeout(o);
         };
     }, [
         r
     ]);
-}, q = (param, n)=>{
+}, L = (param, n)=>{
     let { icon: r, title: o, description: t, extra: c } = param;
     const i = t && Array.isArray(t) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
         space: 16,
-        children: t.map((d, m)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("p", {
-                children: d
+        children: t.map((s, m)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("p", {
+                children: s
             }, m))
     }) : t;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
@@ -239,8 +239,8 @@ const R = (r)=>!(0, _platform.isRunningAcceptanceTest)(r), W = (param)=>{
             })
         ]
     });
-}, K = (r, o)=>{
-    const t = W(o);
+}, q = (r, o)=>{
+    const t = R(o);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
         space: {
             desktop: 40,
@@ -251,7 +251,7 @@ const R = (r)=>!(0, _platform.isRunningAcceptanceTest)(r), W = (param)=>{
             t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, _object_spread({}, o))
         ]
     });
-}, j = (param)=>{
+}, K = (param)=>{
     let { isInverse: r, body: o, imageFit: t, imageUrl: c, dataAttributes: n } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
         borderRadius: _skincontractcssmistica.vars.borderRadii.legacyDisplay,
@@ -287,26 +287,26 @@ const R = (r)=>!(0, _platform.isRunningAcceptanceTest)(r), W = (param)=>{
         })
     });
 }, x = (param)=>{
-    let { title: r, description: o, children: t, extra: c, primaryButton: n, secondaryButton: i, link: d, hapticFeedback: m, icon: f, animateText: h = !1, isInverse: a = !1, unstable_inlineInDesktop: k, imageUrl: I, imageFit: g, dataAttributes: S } = param;
-    L(m);
-    const { platformOverrides: M, isDarkMode: N, skinName: B } = (0, _hooks.useTheme)(), G = (0, _hooks.useWindowHeight)(), { isTabletOrSmaller: P } = (0, _hooks.useScreenSize)(), [U, X] = _react.useState(typeof self < "u"), [T, J] = _react.useState(0), y = U ? "100vh" : `${G - T}px`, A = W({
+    let { title: r, description: o, children: t, extra: c, primaryButton: n, secondaryButton: i, link: s, hapticFeedback: m, icon: f, animateText: h = !1, isInverse: a = !1, unstable_inlineInDesktop: k, imageUrl: I, imageFit: g, dataAttributes: S } = param;
+    W(m);
+    const { platformOverrides: j, isDarkMode: M, skinName: N } = (0, _hooks.useTheme)(), G = (0, _hooks.useWindowHeight)(), { isTabletOrSmaller: P } = (0, _hooks.useScreenSize)(), [U, X] = _react.useState(typeof self < "u"), [T, J] = _react.useState(0), B = U ? "100vh" : `${G - T}px`, y = R({
         primaryButton: n,
         secondaryButton: i,
-        link: d
+        link: s
     });
     (0, _hooks.useIsomorphicLayoutEffect)(()=>{
         X(!1);
     }, []);
-    const C = q({
+    const A = L({
         icon: f,
         title: r,
         description: o,
         extra: c !== null && c !== void 0 ? c : t
-    }, h && R(M));
-    return !P && k ? K(C, {
+    }, h && D(j));
+    return !P && k ? q(A, {
         primaryButton: n,
         secondaryButton: i,
-        link: d
+        link: s
     }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         style: {
             position: "relative"
@@ -323,23 +323,23 @@ const R = (r)=>!(0, _platform.isRunningAcceptanceTest)(r), W = (param)=>{
                         desktop: 64,
                         mobile: 0
                     },
-                    children: j({
+                    children: K({
                         isInverse: a,
                         body: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttonfixedfooterlayout.default, {
-                            isFooterVisible: A,
+                            isFooterVisible: y,
                             button: n,
                             secondaryButton: i,
-                            link: d,
-                            footerBgColor: a && !N ? _skincontractcssmistica.vars.colors.backgroundFeedbackBottom : void 0,
-                            containerBgColor: a && !N ? _skincontractcssmistica.vars.colors.backgroundFeedbackBottom : void 0,
+                            link: s,
+                            footerBgColor: a && !M ? _skincontractcssmistica.vars.colors.backgroundFeedbackBottom : void 0,
+                            containerBgColor: "transparent",
                             onChangeFooterHeight: J,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _feedbackcssmistica.container,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     className: (0, _classnames.default)(_feedbackcssmistica.innerContainer, {
-                                        [_feedbackcssmistica.innerContainerWithButtons]: n || i || d
+                                        [_feedbackcssmistica.innerContainerWithButtons]: n || i || s
                                     }),
-                                    children: C
+                                    children: A
                                 })
                             })
                         }),
@@ -349,7 +349,7 @@ const R = (r)=>!(0, _platform.isRunningAcceptanceTest)(r), W = (param)=>{
                     })
                 })
             }),
-            B === _constants.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            N === _constants.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     position: "absolute",
                     bottom: T,
@@ -358,11 +358,11 @@ const R = (r)=>!(0, _platform.isRunningAcceptanceTest)(r), W = (param)=>{
                     right: 0,
                     // This extra height is a workaround to make sure the background div is displayed *under* the fixed footer.
                     // Otherwise in some devices (Galaxy S20+) the background and the fixed footer are rendered with some distance between them
-                    height: A ? `calc(${y} + 1px)` : `calc(${y})`,
+                    height: y ? `calc(${B} + 1px)` : `calc(${B})`,
                     background: a ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.background
                 }
             }),
-            B !== _constants.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxruntime.jsx)(Te, {
+            N !== _constants.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxruntime.jsx)(Be, {
                 isInverse: a
             })
         ]
@@ -430,9 +430,9 @@ const R = (r)=>!(0, _platform.isRunningAcceptanceTest)(r), W = (param)=>{
         })
     }, t));
 }, Ze = (param)=>{
-    let { title: r, description: o, children: t, extra: c, primaryButton: n, secondaryButton: i, link: d, imageUrl: m, imageFit: f, dataAttributes: h } = param;
-    L("success");
-    const { skinName: a, platformOverrides: k } = (0, _hooks.useTheme)(), g = q({
+    let { title: r, description: o, children: t, extra: c, primaryButton: n, secondaryButton: i, link: s, imageUrl: m, imageFit: f, dataAttributes: h } = param;
+    W("success");
+    const { skinName: a, platformOverrides: k } = (0, _hooks.useTheme)(), g = L({
         icon: a === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsuccessvivo.default, {
             size: "100%"
         }) : a === _constants.VIVO_NEW_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsuccessvivonew.default, {
@@ -443,12 +443,12 @@ const R = (r)=>!(0, _platform.isRunningAcceptanceTest)(r), W = (param)=>{
         title: r,
         description: o,
         extra: c !== null && c !== void 0 ? c : t
-    }, R(k)), S = K(g, {
+    }, D(k)), S = q(g, {
         primaryButton: n,
         secondaryButton: i,
-        link: d
+        link: s
     });
-    return j({
+    return K({
         isInverse: !0,
         body: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: _feedbackcssmistica.backgroundBrand,

package/dist/index.d.ts

@@ -76,7 +76,9 @@ export { default as Image } from './image';
 export { default as Chip } from './chip';
 export { default as Video } from './video';
 export type { VideoElement } from './video';
-export { Carousel, CenteredCarousel, Slideshow, PageBullets, CarouselContextProvider, useCarouselContext, CarouselContextConsummer, } from './carousel';
+export { Carousel, CenteredCarousel, Slideshow, PageBullets, CarouselContextProvider, useCarouselContext, 
+/** @deprecated Contains a typo. Please use CarouselContextConsumer */
+CarouselContextConsumer as CarouselContextConsummer, CarouselContextConsumer, } from './carousel';
 export { Grid, GridItem } from './grid';
 export { default as Sheet, ActionsSheet, InfoSheet, ActionsListSheet, RadioListSheet, SheetBody, } from './sheet';
 export { default as SheetRoot, showSheet } from './sheet-root';

package/dist/index.js

@@ -87,8 +87,11 @@ _export(exports, {
     Carousel: function() {
         return _carousel.Carousel;
     },
+    CarouselContextConsumer: function() {
+        return _carousel.CarouselContextConsumer;
+    },
     CarouselContextConsummer: function() {
-        return _carousel.CarouselContextConsummer;
+        return _carousel.CarouselContextConsumer;
     },
     CarouselContextProvider: function() {
         return _carousel.CarouselContextProvider;

package/dist/package-version.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
         return o;
     }
 });
-const o = "14.42.1";
+const o = "14.43.0";

package/dist/popover.css-mistica.js

@@ -2,50 +2,11 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    arrow: function() {
-        return r;
-    },
-    arrowSize: function() {
-        return t;
-    },
-    arrowWrapper: function() {
-        return _;
-    },
-    closeButtonIcon: function() {
-        return a;
-    },
-    container: function() {
-        return i;
-    },
-    defaultPositionDesktop: function() {
+Object.defineProperty(exports, "content", {
+    enumerable: true,
+    get: function() {
         return o;
-    },
-    defaultPositionMobile: function() {
-        return f;
-    },
-    distanceToTarget: function() {
-        return y;
-    },
-    marginLeftRightMobile: function() {
-        return e;
-    },
-    maxWidthDesktop: function() {
-        return g;
-    },
-    textAlign: function() {
-        return p;
-    },
-    textContent: function() {
-        return d;
     }
 });
-require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./popover.css.ts.vanilla.css-mistica.js");
-var r = "_12igu661 _1y2v1nfgd _1y2v1nfjp _1y2v1nfiz _1y2v1nfj2 _1y2v1nf37", t = 12, _ = "_12igu663 _1y2v1nfgd _1y2v1nf2 _1y2v1nfjj", a = "_12igu669 _1y2v1nfgd _1y2v1nfjs _1y2v1nfkm", i = "_12igu665 _1y2v1nfgd _1y2v1nfh6 _1y2v1nf37 _1y2v1nfiz _1y2v1nfjb", o = "bottom", f = "top", y = 20, e = 16, g = 488, p = "_1y2v1nfgi _1y2v1nfgx _1y2v1nfhm", d = "_12igu667";
+var o = "_12igu660";

package/dist/popover.css.d.ts

@@ -1,12 +1 @@
-export declare const defaultPositionDesktop = "bottom";
-export declare const defaultPositionMobile = "top";
-export declare const arrowSize = 12;
-export declare const distanceToTarget: number;
-export declare const marginLeftRightMobile = 16;
-export declare const maxWidthDesktop = 488;
-export declare const arrow: string;
-export declare const arrowWrapper: string;
-export declare const container: string;
-export declare const textAlign: string;
-export declare const textContent: string;
-export declare const closeButtonIcon: string;
+export declare const content: string;

package/dist/popover.d.ts

@@ -10,10 +10,14 @@ type Props = {
     position?: Position;
     width?: number;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-    isVisible?: boolean;
-    children?: void;
+    open?: boolean;
+    children?: React.ReactNode;
     extra?: React.ReactNode;
     dataAttributes?: DataAttributes;
+    /**
+     * @deprecated This field is deprecated, use open instead.
+     */
+    isVisible?: boolean;
 };
 declare const Popover: React.FC<Props>;
 export default Popover;