@telefonica/mistica 14.15.0 → 14.16.1

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 {

package/dist/date-time-picker.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Z;
+        return ie;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -21,6 +21,10 @@ const _hooks = require("./hooks.js");
 const _iconcloseregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-close-regular.js"));
 const _datetimepickercssmistica = require("./date-time-picker.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+require("moment/locale/es");
+require("moment/locale/de");
+require("moment/locale/pt-br");
+require("moment/locale/en-gb");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -144,49 +148,64 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const g = navigator.language.toLocaleLowerCase().split("-")[0];
-Promise.resolve(/* webpackChunkName: "moment-locale" */ `moment/locale/${g}`).then((p)=>/*#__PURE__*/ _interop_require_wildcard(require(p))).finally(()=>{});
-const Z = (_param)=>{
-    var { withTime: s , mode: l , isValidDate: y , optional: u  } = _param, t = _object_without_properties(_param, [
+const A = {
+    es: "es",
+    // spanish
+    ca: "es",
+    // catalan
+    eu: "es",
+    // euskera
+    gl: "es",
+    // gallego
+    de: "de",
+    // german
+    pt: "pt-br",
+    // portuguese
+    en: "en-gb"
+}, O = (a)=>{
+    const i = a.toLocaleLowerCase().split("-")[0];
+    return A[i] || "en-gb";
+}, ie = (_param)=>{
+    var { withTime: a , mode: i , isValidDate: h , optional: u  } = _param, t = _object_without_properties(_param, [
         "withTime",
         "mode",
         "isValidDate",
         "optional"
     ]);
-    const [m, x] = _react.useState(!1), { texts: b  } = (0, _hooks.useTheme)(), n = _react.useRef(null), { height: v , ref: k  } = (0, _hooks.useElementDimensions)(), i = (e)=>{
-        t.disabled || x(e);
-    }, w = ()=>{
-        var p;
-        const { top: e = 0 , bottom: o = 0 , left: a = 0  } = ((p = n.current) == null ? void 0 : p.getBoundingClientRect()) || {}, P = 260 + o < window.innerHeight;
+    const [m, y] = _react.useState(!1), { texts: x , i18n: { locale: b  }  } = (0, _hooks.useTheme)(), n = _react.useRef(null), { height: k , ref: v  } = (0, _hooks.useElementDimensions)(), l = (e)=>{
+        t.disabled || y(e);
+    }, C = ()=>{
+        var f;
+        const { top: e = 0 , bottom: o = 0 , left: c = 0  } = ((f = n.current) == null ? void 0 : f.getBoundingClientRect()) || {}, M = 260 + o < window.innerHeight;
         return {
             width: _textfieldcomponentscssmistica.DEFAULT_WIDTH,
-            top: P ? o : e - v,
-            left: a,
+            top: M ? o : e - k,
+            left: c,
             position: "absolute",
             borderRadius: _skincontractcssmistica.vars.borderRadii.input,
             overflow: "hidden",
             boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)"
         };
-    }, c = ()=>{
+    }, s = ()=>{
         var o;
         const e = (o = n.current) == null ? void 0 : o.value;
         return e ? new Date(e) : void 0;
-    }, C = (e)=>s ? e.format("yyyy-MM-DD HH:mm") : l === "year-month" ? e.format("yyyy-MM") : e.format("yyyy-MM-DD"), f = (e)=>{
-        var a;
-        const o = typeof e == "string" ? e : C(e);
-        n.current && (n.current.focus(), (a = t.onChange) == null || a.call(t, (0, _dom.createChangeEvent)(n.current, o)));
-    }, D = ()=>c() && u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
-            "aria-label": b.clearButton,
+    }, D = (e)=>a ? e.format("yyyy-MM-DD HH:mm") : i === "year-month" ? e.format("yyyy-MM") : e.format("yyyy-MM-DD"), p = (e)=>{
+        var c;
+        const o = typeof e == "string" ? e : D(e);
+        n.current && (n.current.focus(), (c = t.onChange) == null || c.call(t, (0, _dom.createChangeEvent)(n.current, o)));
+    }, w = ()=>s() && u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
+            "aria-label": x.clearButton,
             size: 32,
             onPress: ()=>{
-                f("");
+                p("");
             },
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcloseregular.default, {})
         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
             disabled: t.disabled,
             "aria-label": "",
             size: 32,
-            onPress: ()=>i(!m),
+            onPress: ()=>l(!m),
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcalendarregular.default, {})
         });
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
@@ -198,36 +217,36 @@ const Z = (_param)=>{
                 required: !u,
                 type: "text",
                 autoComplete: "off",
-                shrinkLabel: !!c(),
-                endIcon: D(),
+                shrinkLabel: !!s(),
+                endIcon: w(),
                 inputRef: (e)=>{
                     var o;
                     (o = t == null ? void 0 : t.inputRef) == null || o.call(t, e), n.current = e;
                 },
                 readOnly: !0,
-                onKeyDown: ()=>i(!0),
+                onKeyDown: ()=>l(!0),
                 onClick: ()=>{
-                    i(!0);
+                    l(!0);
                 }
             })),
             m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
                 onPress: (e)=>{
-                    (0, _dom.cancelEvent)(e), i(!1);
+                    (0, _dom.cancelEvent)(e), l(!1);
                 },
                 disableScroll: !0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    ref: k,
-                    style: w(),
+                    ref: v,
+                    style: C(),
                     className: _datetimepickercssmistica.reactDatePicker,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reactdatetime.default, {
-                        initialViewMode: l === "year-month" ? "months" : void 0,
-                        dateFormat: l === "year-month" ? "YYYY-MM" : void 0,
-                        timeFormat: s ? "HH:mm" : !1,
-                        initialValue: c(),
-                        locale: g,
+                        initialViewMode: i === "year-month" ? "months" : void 0,
+                        dateFormat: i === "year-month" ? "YYYY-MM" : void 0,
+                        timeFormat: a ? "HH:mm" : !1,
+                        initialValue: s(),
+                        locale: O(b),
                         input: !1,
-                        onChange: f,
-                        isValidDate: y
+                        onChange: p,
+                        isValidDate: h
                     })
                 })
             })

package/dist/hooks.d.ts

@@ -24,7 +24,7 @@ export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
 type IntersectionObserverOptions = {
     root?: Element | Document | null;
     rootMargin?: string;
-    threshold?: number | number[];
+    threshold?: number | Array<number>;
 };
 export declare const useIsInViewport: (ref: React.RefObject<HTMLElement>, defaultValue: boolean, options?: IntersectionObserverOptions) => boolean;
 export {};

package/dist/icons/icon-cvv-amex.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 type Props = {
     role?: string;
     size?: number;
+    color?: string;
 };
 declare const IconCvvAmex: React.FC<Props>;
 export default IconCvvAmex;

package/dist/icons/icon-cvv-amex.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return a;
+        return s;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
+const _skincontractcssmistica = require("../skins/skin-contract.css-mistica.js");
 const l = (param)=>/* @__PURE__ */ {
-    let { role: t = "presentation" , size: c = 48  } = param;
+    let { role: t = "presentation" , size: c = 48 , color: r  } = param;
     return (0, _jsxruntime.jsx)("svg", {
         width: c,
         height: c,
@@ -20,7 +21,7 @@ const l = (param)=>/* @__PURE__ */ {
             flexShrink: 0
         },
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("g", {
-            fill: "#00A9E0",
+            fill: r || _skincontractcssmistica.vars.colors.brand,
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
                     d: "M2.571 0H45.43C46.849 0 48 1.075 48 2.4v27.2c0 1.325-1.151 2.4-2.571 2.4H2.57C1.151 32 0 30.925 0 29.6V2.4C0 1.075 1.151 0 2.571 0zm0 1.2c-.71 0-1.285.537-1.285 1.2v27.2c0 .663.575 1.2 1.285 1.2H45.43c.71 0 1.285-.537 1.285-1.2V2.4c0-.663-.575-1.2-1.285-1.2H2.57z",
@@ -37,4 +38,4 @@ const l = (param)=>/* @__PURE__ */ {
             ]
         })
     });
-}, a = l;
+}, s = l;

package/dist/icons/icon-cvv-visa-mc.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 type Props = {
     role?: string;
     size?: number;
+    color?: string;
 };
 declare const IconCvvVisaMc: React.FC<Props>;
 export default IconCvvVisaMc;

package/dist/icons/icon-cvv-visa-mc.js

@@ -5,22 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return s;
+        return l;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const a = (param)=>/* @__PURE__ */ {
-    let { role: v = "presentation" , size: t = 48  } = param;
+const _skincontractcssmistica = require("../skins/skin-contract.css-mistica.js");
+const s = (param)=>/* @__PURE__ */ {
+    let { role: r = "presentation" , size: t = 48 , color: v  } = param;
     return (0, _jsxruntime.jsx)("svg", {
         width: t,
         height: t,
         viewBox: "0 0 48 48",
-        role: v,
+        role: r,
         style: {
             flexShrink: 0
         },
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("g", {
-            fill: "#00A9E0",
+            fill: v || _skincontractcssmistica.vars.colors.brand,
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
                     d: "M2.571 0H45.43C46.849 0 48 1.075 48 2.4v27.2c0 1.325-1.151 2.4-2.571 2.4H2.57C1.151 32 0 30.925 0 29.6V2.4C0 1.075 1.151 0 2.571 0zm0 1.2c-.71 0-1.285.537-1.285 1.2v27.2c0 .663.575 1.2 1.285 1.2H45.43c.71 0 1.285-.537 1.285-1.2V2.4c0-.663-.575-1.2-1.285-1.2H2.57z",
@@ -37,4 +38,4 @@ const a = (param)=>/* @__PURE__ */ {
             ]
         })
     });
-}, s = a;
+}, l = s;

package/dist/index.d.ts

@@ -69,6 +69,7 @@ Logo as NavigationBarLogo, Logo, MovistarLogo, VivoLogo, O2Logo, TelefonicaLogo,
 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 } from './carousel';
 export { Grid, GridItem } from './grid';
 export { default as StackingGroup } from './stacking-group';

package/dist/list.css-mistica.js

@@ -54,4 +54,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./list.css.ts.vanilla.css-mistica.js");
-var _ = "_1y2v1nf64 _1y2v1nf6m _1y2v1nf6o", y = "_1y2v1nf6d _1y2v1nf9i _1y2v1nf8w _1y2v1nf6m", f = "_1y2v1nf64 _1y2v1nf6j", a = "_1y2v1nf64 _1y2v1nf8f _1y2v1nfa5", r = "_2buj9g0", o = "_1y2v1nf64 _1y2v1nf69", t = "_2buj9gi _1y2v1nf64", i = "_1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf66 _1y2v1nfaa _1y2v1nf5y _1y2v1nf7q _1y2v1nf85 _1y2v1nf6p", e = "_2buj9gk _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf66 _1y2v1nfaa _1y2v1nf5y _1y2v1nf7q _1y2v1nf85 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6o _1y2v1nf8g", d = "_2buj9g1", g = "_1y2v1nfar", u = "_2buj9gb", b = "_1y2v1nf64 _1y2v1nf6a _1y2v1nf6q", l = "_1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf8f _1y2v1nfaa _1y2v1nf5y";
+var _ = "_1y2v1nf64 _1y2v1nf6m _1y2v1nf6o", y = "_1y2v1nf6d _1y2v1nf9i _1y2v1nf8w _1y2v1nf6m", f = "_1y2v1nf64 _1y2v1nf6j", a = "_1y2v1nf64 _1y2v1nf8f _1y2v1nfa5", r = "_2buj9g0", o = "_1y2v1nf64 _1y2v1nf69", t = "_2buj9gi _1y2v1nf64", i = "_1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nfaa _1y2v1nf5y _1y2v1nf7q _1y2v1nf85 _1y2v1nf66 _1y2v1nf6p", e = "_2buj9gk _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nfaa _1y2v1nf5y _1y2v1nf7q _1y2v1nf85 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6o _1y2v1nf8g _1y2v1nf8w", d = "_2buj9g1", g = "_1y2v1nfar", u = "_2buj9gb", b = "_1y2v1nf64 _1y2v1nf6a _1y2v1nf6q", l = "_1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf8f _1y2v1nfaa _1y2v1nf5y";