@telefonica/mistica 14.14.0 → 14.16.0

package/dist/checkbox.css-mistica.js

@@ -25,13 +25,13 @@ _export(exports, {
         return b;
     },
     disabled: function() {
-        return e;
+        return a;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./checkbox.css.ts.vanilla.css-mistica.js");
 var n = {
-    ios: "_1rz9b15 _1rz9b14 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nf6m _1y2v1nfae _1y2v1nf30",
-    rest: "_1rz9b16 _1rz9b14 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nf6m _1y2v1nfae _1y2v1nf30",
-    checked: "_1rz9b17 _1rz9b14 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nf6m _1y2v1nfae _1y2v1nf30"
-}, r = "_1rz9b19 _1y2v1nf66", f = "_1rz9b1a", y = "_1rz9b11 _1y2v1nf67", b = "_1rz9b12", e = "_1rz9b1b";
+    ios: "_1rz9b16 _1rz9b15 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nf6m _1y2v1nfam _1y2v1nf30",
+    rest: "_1rz9b17 _1rz9b15 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nf6m _1y2v1nfam _1y2v1nf30",
+    checked: "_1rz9b18 _1rz9b15 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nf6m _1y2v1nfam _1y2v1nf30"
+}, r = "_1rz9b1a _1y2v1nf66", f = "_1rz9b1b", y = "_1rz9b12 _1rz9b11 _1y2v1nf67", b = "_1rz9b13 _1rz9b11 _1y2v1nf67", a = "_1rz9b1c";

package/dist/checkbox.js

@@ -117,7 +117,7 @@ function _object_spread_props(target, source) {
 }
 const z = (param)=>{
     let { isChecked: e , disabled: o  } = param;
-    const { isIos: l  } = (0, _hooks.useTheme)(), c = l ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
+    const { isIos: l  } = (0, _hooks.useTheme)(), r = l ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
         viewBox: "0 0 10 8",
         width: "10",
         height: "8",
@@ -144,10 +144,10 @@ const z = (param)=>{
         className: (0, _classnames.default)(_checkboxcssmistica.boxVariant[e ? "checked" : l ? "ios" : "rest"], {
             [_checkboxcssmistica.disabled]: o
         }),
-        children: c
+        children: r
     });
 }, B = (e)=>{
-    const o = (0, _hooks.useAriaId)(e["aria-labelledby"]), l = e["aria-label"], c = l || e["aria-labelledby"], { defaultValue: x , value: t , onChange: s , focusableRef: C , disabled: i  } = (0, _formcontext.useControlProps)({
+    const o = (0, _hooks.useAriaId)(e["aria-labelledby"]), l = e["aria-label"], r = l || e["aria-labelledby"], { defaultValue: x , value: t , onChange: s , focusableRef: C , disabled: i  } = (0, _formcontext.useControlProps)({
         name: e.name,
         value: e.checked,
         defaultValue: e.defaultChecked,
@@ -155,8 +155,8 @@ const z = (param)=>{
         disabled: e.disabled
     }), [d, g] = _react.useState(!!x), h = ()=>{
         t === void 0 ? (g(!d), s(!d)) : s(!t);
-    }, y = (r)=>{
-        r.keyCode === _keycodes.SPACE && (r.preventDefault(), r.stopPropagation(), h());
+    }, y = (c)=>{
+        c.keyCode === _keycodes.SPACE && (c.preventDefault(), c.stopPropagation(), h());
     }, b = /* @__PURE__ */ (0, _jsxruntime.jsx)(z, {
         disabled: i,
         isChecked: t !== null && t !== void 0 ? t : d
@@ -167,10 +167,12 @@ const z = (param)=>{
         role: "checkbox",
         "aria-checked": t !== null && t !== void 0 ? t : d,
         onKeyDown: i ? void 0 : y,
-        onClick: i ? void 0 : h,
+        onClick: (c)=>{
+            c.stopPropagation(), i || h();
+        },
         tabIndex: i ? void 0 : 0,
         ref: C,
-        className: _checkboxcssmistica.checkboxContainer,
+        className: i ? _checkboxcssmistica.checkboxContainerDisabled : _checkboxcssmistica.checkboxContainer,
         "aria-label": l,
         "aria-labelledby": l ? void 0 : o,
         "aria-disabled": i
@@ -182,7 +184,6 @@ const z = (param)=>{
             disabled: !!i
         }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: 16,
-            className: i ? _checkboxcssmistica.checkboxContainerDisabled : "",
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                     regular: !0,
@@ -199,7 +200,7 @@ const z = (param)=>{
                     regular: !0,
                     as: "div",
                     id: o,
-                    role: c ? "presentation" : void 0,
+                    role: r ? "presentation" : void 0,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
                         className: i ? _checkboxcssmistica.disabled : "",
                         children: e.children

package/dist/chip.css-mistica.js

@@ -27,11 +27,11 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./chip.css.ts.vanilla.css-mistica.js");
-var c = "_1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x _1y2v1nfa2 _1y2v1nf5y", t = {
+var c = "_1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nfaa _1y2v1nf5y", t = {
     light: "cc7htnb cc7htn9",
     dark: "cc7htnc cc7htn9"
 }, f = {
-    default: "cc7htn1 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nfa1 _1y2v1nf31 _1y2v1nf1w",
-    overAlternative: "cc7htn1 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nfa1 _1y2v1nf38 _1y2v1nf1w",
-    active: "cc7htn8 cc7htn2 cc7htn1 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nfa1 _1y2v1nf16 _1y2v1nf5k"
+    default: "cc7htn1 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nfa9 _1y2v1nf31 _1y2v1nf1w",
+    overAlternative: "cc7htn1 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nfa9 _1y2v1nf38 _1y2v1nf1w",
+    active: "cc7htn8 cc7htn2 cc7htn1 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nfa9 _1y2v1nf16 _1y2v1nf5k"
 }, y = "cc7htnd", _ = "cc7htne";

package/dist/chip.d.ts

@@ -6,6 +6,7 @@ interface SimpleChipProps {
     Icon?: React.FC<IconProps>;
     id?: string;
     dataAttributes?: DataAttributes;
+    badge?: boolean | number;
 }
 interface ClosableChipProps extends SimpleChipProps {
     onClose: () => void;

package/dist/chip.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return S;
+        return re;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _hooks = require("./hooks.js");
+const _badge = /*#__PURE__*/ _interop_require_default(require("./badge.js"));
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _text = require("./text.js");
 const _iconbutton = /*#__PURE__*/ _interop_require_default(require("./icon-button.js"));
@@ -78,74 +79,89 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const z = (e)=>{
-    const { Icon: i , children: v , id: g , dataAttributes: l , active: o , onClose: s  } = e, { texts: b , isDarkMode: C  } = (0, _hooks.useTheme)(), m = (0, _themevariantcontext.useThemeVariant)() === "alternative", d = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+const F = (e)=>{
+    const { Icon: c , children: P , id: k , dataAttributes: l , active: s , badge: r , onClose: d  } = e, { texts: T , isDarkMode: A , textPresets: I  } = (0, _hooks.useTheme)(), m = (0, _themevariantcontext.useThemeVariant)() === "alternative", { isTabletOrSmaller: a  } = (0, _hooks.useScreenSize)(), f = c ? a ? 16 : 8 : a ? 20 : 12, R = a ? 20 : 12, b = a ? 16 : 8, w = ()=>r ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+            children: r === !0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_badge.default, {}) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_badge.default, {
+                value: r
+            })
+        }) : null, h = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+            c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingRight: 4,
-                className: o ? _chipcssmistica.iconActive : _chipcssmistica.icon,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(i, {
+                className: s ? _chipcssmistica.iconActive : _chipcssmistica.icon,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(c, {
                     color: "currentColor",
                     size: (0, _css.pxToRem)(16)
                 })
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                id: g,
-                medium: !0,
-                truncate: 1,
-                color: "currentColor",
-                children: v
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                paddingRight: r ? 8 : d ? 4 : 0,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                    id: k,
+                    weight: I.indicator.weight,
+                    truncate: 1,
+                    color: "currentColor",
+                    children: P
+                })
             })
         ]
-    }), f = i ? 8 : 12;
-    if (s) return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, _object_spread_props(_object_spread({
+    });
+    if (r) return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, _object_spread_props(_object_spread({
         className: m ? _chipcssmistica.chipVariants.overAlternative : _chipcssmistica.chipVariants.default,
-        paddingLeft: f
+        paddingLeft: f,
+        paddingRight: b
     }, (0, _dom.getPrefixedDataAttributes)(l, "Chip")), {
         children: [
-            d,
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                paddingLeft: 4,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
-                    size: 24,
-                    style: {
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center"
-                    },
-                    "aria-label": b.closeButtonLabel,
-                    onPress: ()=>s(),
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcloseregular.default, {
-                        size: 16,
-                        color: _skincontractcssmistica.vars.colors.neutralMedium
-                    })
+            h,
+            w()
+        ]
+    }));
+    if (d) return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, _object_spread_props(_object_spread({
+        className: m ? _chipcssmistica.chipVariants.overAlternative : _chipcssmistica.chipVariants.default,
+        paddingLeft: f,
+        paddingRight: b
+    }, (0, _dom.getPrefixedDataAttributes)(l, "Chip")), {
+        children: [
+            h,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
+                size: 24,
+                style: {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center"
+                },
+                "aria-label": T.closeButtonLabel,
+                onPress: ()=>d(),
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcloseregular.default, {
+                    size: 16,
+                    color: _skincontractcssmistica.vars.colors.neutralMedium
                 })
             })
         ]
     }));
-    const x = o !== void 0 || e.href || e.onPress || e.to, r = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, _object_spread_props(_object_spread({
-            className: (0, _classnames.default)(_chipcssmistica.chipVariants[o ? "active" : m ? "overAlternative" : "default"], {
-                [_chipcssmistica.chipInteractiveVariants[C ? "dark" : "light"]]: x
+    const B = s !== void 0 || e.href || e.onPress || e.to, o = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, _object_spread_props(_object_spread({
+            className: (0, _classnames.default)(_chipcssmistica.chipVariants[s ? "active" : m ? "overAlternative" : "default"], {
+                [_chipcssmistica.chipInteractiveVariants[A ? "dark" : "light"]]: B
             }),
             paddingLeft: f,
-            paddingRight: 12
+            paddingRight: R
         }, (0, _dom.getPrefixedDataAttributes)(l, "Chip")), {
-            children: d
+            children: h
         }));
     return e.onPress ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
         className: _chipcssmistica.button,
         trackingEvent: e.trackingEvent,
         onPress: e.onPress,
-        children: r()
+        children: o()
     }) : e.to ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
         trackingEvent: e.trackingEvent,
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView,
-        children: r()
+        children: o()
     }) : e.href ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
         trackingEvent: e.trackingEvent,
         href: e.href,
         newTab: e.newTab,
-        children: r()
-    }) : r();
-}, S = z;
+        children: o()
+    }) : o();
+}, re = F;

package/dist/circle.css-mistica.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "circle", {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./circle.css.ts.vanilla.css-mistica.js");
-var r = "_1wpwyyp1 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfa3";
+var r = "_1wpwyyp1 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfab";

package/dist/credit-card-number-field.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return pr;
+        return hr;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -14,7 +14,7 @@ const _formcontext = require("./form-context.js");
 const _hooks = require("./hooks.js");
 const _creditcard = require("./utils/credit-card.js");
 const _textfieldbase = require("./text-field-base.js");
-const _iconcreditcard = /*#__PURE__*/ _interop_require_default(require("./icons/icon-creditcard.js"));
+const _iconcreditcardvisaregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-credit-card-visa-regular.js"));
 const _iconvisa = /*#__PURE__*/ _interop_require_default(require("./icons/icon-visa.js"));
 const _iconmastercard = /*#__PURE__*/ _interop_require_default(require("./icons/icon-mastercard.js"));
 const _iconamex = /*#__PURE__*/ _interop_require_default(require("./icons/icon-amex.js"));
@@ -22,6 +22,7 @@ const _rifm = require("rifm");
 const _dom = require("./utils/dom.js");
 const _common = require("./utils/common.js");
 const _creditcardnumberfieldcssmistica = require("./credit-card-number-field.css-mistica.js");
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -145,12 +146,12 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Q = (r)=>{
+const W = (r)=>{
     var t;
     const i = String(r !== null && r !== void 0 ? r : "").replace(/[^\d]/g, "");
     var _ref;
     return (_ref = (t = i.match(/.{1,4}/g)) == null ? void 0 : t.join(" ")) !== null && _ref !== void 0 ? _ref : i;
-}, W = (_param)=>{
+}, X = (_param)=>{
     var { inputRef: r , value: i , defaultValue: t , onChange: e  } = _param, a = _object_without_properties(_param, [
         "inputRef",
         "value",
@@ -163,7 +164,7 @@ const Q = (r)=>{
         f,
         e
     ]), d = (0, _rifm.useRifm)({
-        format: Q,
+        format: W,
         value: u,
         onChange: p,
         accept: /[\d]+/g
@@ -176,14 +177,14 @@ const Q = (r)=>{
         value: d.value,
         ref: (0, _common.combineRefs)(r, m)
     }));
-}, X = (r)=>(0, _creditcard.isVisa)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconvisa.default, {}) : (0, _creditcard.isMasterCard)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconmastercard.default, {}) : (0, _creditcard.isAmericanExpress)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconamex.default, {}) : null, Y = {
+}, Y = (r)=>(0, _creditcard.isVisa)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconvisa.default, {}) : (0, _creditcard.isMasterCard)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconmastercard.default, {}) : (0, _creditcard.isAmericanExpress)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconamex.default, {}) : null, Z = {
     showBackface: !1,
-    animationTarget: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcreditcard.default, {}),
+    animationTarget: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcreditcardvisaregular.default, {}),
     isAnimating: !1
-}, Z = (r, param)=>{
+}, v = (r, param)=>{
     let { type: i , value: t  } = param;
     if (i === "INPUT") {
-        const e = X(t);
+        const e = Y(t);
         if (e && !r.showBackface) return {
             animationTarget: e,
             showBackface: !0,
@@ -201,9 +202,9 @@ const Q = (r)=>{
     return i === "TRANSITION_END" ? _object_spread_props(_object_spread({}, r), {
         isAnimating: !1
     }) : r;
-}, v = (param)=>{
+}, rr = (param)=>{
     let { value: r  } = param;
-    const [{ showBackface: i , animationTarget: t , isAnimating: e  }, a] = _react.useReducer(Z, Y);
+    const [{ showBackface: i , animationTarget: t , isAnimating: e  }, a] = _react.useReducer(v, Z);
     return _react.useEffect(()=>{
         a({
             type: "INPUT",
@@ -221,7 +222,9 @@ const Q = (r)=>{
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _creditcardnumberfieldcssmistica.flipFront,
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcreditcard.default, {})
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcreditcardvisaregular.default, {
+                        color: _skincontractcssmistica.vars.colors.neutralMedium
+                    })
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _creditcardnumberfieldcssmistica.flipBack,
@@ -230,7 +233,7 @@ const Q = (r)=>{
             ]
         })
     });
-}, rr = (_param)=>{
+}, er = (_param)=>{
     var { disabled: r , error: i , helperText: t , name: e , optional: a , validate: c , onChange: N , onChangeValue: m , onBlur: f , acceptedCards: u = {
         americanExpress: !0,
         visa: !0,
@@ -250,7 +253,7 @@ const Q = (r)=>{
         "autoComplete",
         "defaultValue"
     ]);
-    const { texts: E  } = (0, _hooks.useTheme)(), { jumpToNext: F , rawValues: R , setFormError: S  } = (0, _formcontext.useForm)(), h = (n, C)=>{
+    const { texts: E  } = (0, _hooks.useTheme)(), { jumpToNext: R , rawValues: F , setFormError: S  } = (0, _formcontext.useForm)(), h = (n, C)=>{
         const s = E.formCreditCardNumberError;
         return n ? (0, _creditcard.isAmericanExpress)(n) && !u.americanExpress || (0, _creditcard.isVisa)(n) && !u.visa || (0, _creditcard.isMasterCard)(n) && !u.masterCard || !(0, _creditcard.isValidCreditCardNumber)(n) || (0, _creditcard.getCreditCardNumberLength)(n) !== n.length ? s : c == null ? void 0 : c(n, C) : a ? "" : E.formFieldErrorIsMandatory;
     }, b = (n)=>n.replace(/\s/g, ""), k = (0, _formcontext.useFieldProps)({
@@ -277,13 +280,13 @@ const Q = (r)=>{
                 B ? S({
                     name: e,
                     error: B
-                }) : F(e);
+                }) : R(e);
             }
         },
-        inputComponent: W,
+        inputComponent: X,
         autoComplete: d,
-        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(v, {
-            value: (_ref = p !== null && p !== void 0 ? p : R[e]) !== null && _ref !== void 0 ? _ref : ""
+        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(rr, {
+            value: (_ref = p !== null && p !== void 0 ? p : F[e]) !== null && _ref !== void 0 ? _ref : ""
         })
     }));
-}, pr = rr;
+}, hr = er;

package/dist/cvv-field.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return P;
+        return lr;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -14,11 +14,16 @@ const _iconcvvvisamc = /*#__PURE__*/ _interop_require_default(require("./icons/i
 const _iconcvvamex = /*#__PURE__*/ _interop_require_default(require("./icons/icon-cvv-amex.js"));
 const _tooltip = /*#__PURE__*/ _interop_require_default(require("./tooltip.js"));
 const _iconbutton = /*#__PURE__*/ _interop_require_default(require("./icon-button.js"));
-const _iconinfocvv = /*#__PURE__*/ _interop_require_default(require("./icons/icon-info-cvv.js"));
+const _iconinformationregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-information-regular.js"));
 const _formcontext = require("./form-context.js");
 const _textfieldbase = require("./text-field-base.js");
 const _integerfield = require("./integer-field.js");
-const _cvvfieldcssmistica = require("./cvv-field.css-mistica.js");
+const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
+const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
+const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
+const _divider = /*#__PURE__*/ _interop_require_default(require("./divider.js"));
+const _text = /*#__PURE__*/ _interop_require_default(require("./text.js"));
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -103,45 +108,52 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const J = (param)=>{
-    let { acceptedCards: o  } = param;
+const O = (param)=>{
+    let { acceptedCards: t  } = param;
     const { texts: e  } = (0, _hooks.useTheme)();
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                className: _cvvfieldcssmistica.tooltipContainer,
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+            padding: 8,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                space: 8,
                 children: [
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcvvvisamc.default, {
-                        size: 48,
-                        role: "img"
-                    }),
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)("p", {
-                        className: _cvvfieldcssmistica.cvvText,
-                        children: e.formCreditCardCvvTooltipVisaMc
-                    })
-                ]
-            }),
-            (o == null ? void 0 : o.americanExpress) && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                className: _cvvfieldcssmistica.tooltipContainer,
-                children: [
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcvvamex.default, {
-                        size: 48,
-                        role: "img"
+                    /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                        space: 16,
+                        alignItems: "center",
+                        children: [
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcvvvisamc.default, {
+                                size: 48,
+                                role: "img"
+                            }),
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.default, {
+                                children: e.formCreditCardCvvTooltipVisaMc
+                            })
+                        ]
                     }),
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)("p", {
-                        className: _cvvfieldcssmistica.cvvText,
-                        children: e.formCreditCardCvvTooltipAmex
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {}),
+                    (t == null ? void 0 : t.americanExpress) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                        space: 16,
+                        alignItems: "center",
+                        children: [
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcvvamex.default, {
+                                size: 48,
+                                role: "img"
+                            }),
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.default, {
+                                children: e.formCreditCardCvvTooltipAmex
+                            })
+                        ]
                     })
                 ]
             })
-        ]
+        })
     });
-}, K = (_param)=>{
-    var { disabled: o , error: e , helperText: x , name: s , optional: f , validate: n , onChange: I , onChangeValue: T , onBlur: F , acceptedCards: y = {
+}, Q = (_param)=>{
+    var { disabled: t , error: e , helperText: I , name: n , optional: f , validate: s , onChange: x , onChangeValue: T , onBlur: F , acceptedCards: y = {
         americanExpress: !0,
         visa: !0,
         masterCard: !0
-    } , maxLength: m = 4 , value: E , autoComplete: N = "cc-csc" , defaultValue: V  } = _param, j = _object_without_properties(_param, [
+    } , maxLength: m = 4 , value: E , autoComplete: M = "cc-csc" , defaultValue: V  } = _param, j = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -157,36 +169,36 @@ const J = (param)=>{
         "autoComplete",
         "defaultValue"
     ]);
-    const { texts: l  } = (0, _hooks.useTheme)(), { setFormError: z , jumpToNext: M  } = (0, _formcontext.useForm)(), p = (t, i)=>t ? t.length !== m ? l.formCreditCardCvvError : n == null ? void 0 : n(t, i) : f ? "" : l.formFieldErrorIsMandatory, a = (t)=>t, u = (0, _formcontext.useFieldProps)({
-        name: s,
+    const { texts: l  } = (0, _hooks.useTheme)(), { setFormError: z , jumpToNext: B  } = (0, _formcontext.useForm)(), p = (o, i)=>o ? o.length !== m ? l.formCreditCardCvvError : s == null ? void 0 : s(o, i) : f ? "" : l.formFieldErrorIsMandatory, a = (o)=>o, u = (0, _formcontext.useFieldProps)({
+        name: n,
         value: E,
         defaultValue: V,
         processValue: a,
-        helperText: x,
+        helperText: I,
         optional: f,
         error: e,
-        disabled: o,
+        disabled: t,
         onBlur: F,
         validate: p,
-        onChange: I,
+        onChange: x,
         onChangeValue: T
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, j, u), {
         maxLength: m,
-        onChange: (t)=>{
-            u.onChange(t);
-            const i = t.currentTarget.value, d = a(i);
+        onChange: (o)=>{
+            u.onChange(o);
+            const i = o.currentTarget.value, d = a(i);
             if (d.length === m) {
                 const v = p(d, i);
                 v ? z({
-                    name: s,
+                    name: n,
                     error: v
-                }) : M(s);
+                }) : B(n);
             }
         },
         endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_tooltip.default, {
             position: "top",
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(J, {
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
                 acceptedCards: y
             }),
             targetLabel: l.formCreditCardCvvTooltipVisaMcButton,
@@ -206,13 +218,14 @@ const J = (param)=>{
                         // (40 - 16) / 2
                         top: -12
                     },
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconinfocvv.default, {
-                        size: 20
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconinformationregular.default, {
+                        size: 16,
+                        color: _skincontractcssmistica.vars.colors.neutralMedium
                     })
                 })
             })
         }),
-        autoComplete: N,
+        autoComplete: M,
         inputComponent: _integerfield.IntegerInput
     }));
-}, P = K;
+}, lr = Q;

package/dist/date-time-picker.d.ts

@@ -1,4 +1,14 @@
+/**
+ * Do not use this component!
+ * Use DateField or FormDateTimeField
+ *
+ * This component is a fallback for browsers that don't support datetime-local or date inputs
+ */
 import * as React from 'react';
+import 'moment/locale/es';
+import 'moment/locale/de';
+import 'moment/locale/pt-br';
+import 'moment/locale/en-gb';
 import type { CommonFormFieldProps } from './text-field-base';
 import type Moment from 'moment';
 export interface DateTimePickerProps extends CommonFormFieldProps {