@telefonica/mistica 10.14.0 → 10.16.0

package/dist/card.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.MediaCard = exports.DataCard = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _tag = _interopRequireDefault(require("./tag"));
 var _stack = _interopRequireDefault(require("./stack"));
@@ -59,38 +60,68 @@ var CardContent = function CardContent(param) {
             return null;
         }
         if (typeof headline === 'string') {
-            return(/*#__PURE__*/ React.createElement(_tag.default, {
-                color: theme.colors.promo
-            }, headline));
+            return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_tag.default, {
+                color: theme.colors.promo,
+                children: headline
+            }));
         }
         return headline;
     };
-    return(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(_stack.default, {
-        space: 16
-    }, /*#__PURE__*/ React.createElement(_stack.default, {
-        space: 8
-    }, (headline || pretitle || title || subtitle) && /*#__PURE__*/ React.createElement("header", null, /*#__PURE__*/ React.createElement(_stack.default, {
-        space: 4
-    }, renderHeadline(), pretitle && /*#__PURE__*/ React.createElement(_box.default, {
-        paddingTop: 4
-    }, /*#__PURE__*/ React.createElement(_text.Text1, {
-        regular: true,
-        uppercase: true
-    }, pretitle)), /*#__PURE__*/ React.createElement(_text.Text4, {
-        as: "h1",
-        regular: true
-    }, title), /*#__PURE__*/ React.createElement(_text.Text2, {
-        regular: true
-    }, subtitle))), description && /*#__PURE__*/ React.createElement(_text.Text2, {
-        as: "p",
-        regular: true,
-        color: theme.colors.textSecondary
-    }, description)), extra && /*#__PURE__*/ React.createElement("div", null, extra)), (button || buttonLink) && /*#__PURE__*/ React.createElement("div", {
-        className: classes.actions
-    }, /*#__PURE__*/ React.createElement(_buttonGroup.default, {
-        primaryButton: button,
-        link: buttonLink
-    }))));
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+                space: 16,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+                        space: 8,
+                        children: [
+                            (headline || pretitle || title || subtitle) && /*#__PURE__*/ (0, _jsxRuntime).jsx("header", {
+                                children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+                                    space: 4,
+                                    children: [
+                                        renderHeadline(),
+                                        pretitle && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                                            paddingTop: 4,
+                                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
+                                                regular: true,
+                                                uppercase: true,
+                                                children: pretitle
+                                            })
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text4, {
+                                            as: "h1",
+                                            regular: true,
+                                            children: title
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                                            regular: true,
+                                            children: subtitle
+                                        })
+                                    ]
+                                })
+                            }),
+                            description && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                                as: "p",
+                                regular: true,
+                                color: theme.colors.textSecondary,
+                                children: description
+                            })
+                        ]
+                    }),
+                    extra && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        children: extra
+                    })
+                ]
+            }),
+            (button || buttonLink) && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                className: classes.actions,
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_buttonGroup.default, {
+                    primaryButton: button,
+                    link: buttonLink
+                })
+            })
+        ]
+    }));
 };
 var useMediaCardStyles = (0, _jss).createUseStyles(function() {
     return {
@@ -136,25 +167,31 @@ var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
     var classes = useMediaCardStyles({
         media: media
     });
-    return(/*#__PURE__*/ React.createElement(_boxed.Boxed, {
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
         className: classes.boxed,
-        ref: ref
-    }, /*#__PURE__*/ React.createElement("section", {
-        className: classes.mediaCard,
-        "aria-label": ariaLabel
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: classes.media
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: classes.content
-    }, /*#__PURE__*/ React.createElement(CardContent, {
-        headline: headline,
-        pretitle: pretitle,
-        title: title,
-        description: description,
-        extra: extra,
-        button: button,
-        buttonLink: buttonLink
-    })))));
+        ref: ref,
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("section", {
+            className: classes.mediaCard,
+            "aria-label": ariaLabel,
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: classes.media
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: classes.content,
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(CardContent, {
+                        headline: headline,
+                        pretitle: pretitle,
+                        title: title,
+                        description: description,
+                        extra: extra,
+                        button: button,
+                        buttonLink: buttonLink
+                    })
+                })
+            ]
+        })
+    }));
 });
 exports.MediaCard = MediaCard;
 var useDataCardStyles = (0, _jss).createUseStyles(function() {
@@ -173,23 +210,29 @@ var useDataCardStyles = (0, _jss).createUseStyles(function() {
 var DataCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
     var icon = param.icon, headline = param.headline, title = param.title, subtitle = param.subtitle, description = param.description, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param['aria-label'];
     var classes = useDataCardStyles();
-    return(/*#__PURE__*/ React.createElement(_boxed.Boxed, {
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
         className: classes.boxed,
         dataAttributes: dataAttributes,
-        ref: ref
-    }, /*#__PURE__*/ React.createElement("section", {
-        className: classes.dataCard,
-        "aria-label": ariaLabel
-    }, icon && /*#__PURE__*/ React.createElement(_box.default, {
-        paddingBottom: 16
-    }, icon), /*#__PURE__*/ React.createElement(CardContent, {
-        headline: headline,
-        title: title,
-        subtitle: subtitle,
-        description: description,
-        extra: extra,
-        button: button,
-        buttonLink: buttonLink
-    }))));
+        ref: ref,
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("section", {
+            className: classes.dataCard,
+            "aria-label": ariaLabel,
+            children: [
+                icon && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                    paddingBottom: 16,
+                    children: icon
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(CardContent, {
+                    headline: headline,
+                    title: title,
+                    subtitle: subtitle,
+                    description: description,
+                    extra: extra,
+                    button: button,
+                    buttonLink: buttonLink
+                })
+            ]
+        })
+    }));
 });
 exports.DataCard = DataCard;

package/dist/checkbox.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.default = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _keyCodes = require("./utils/key-codes");
 var _formContext = require("./form-context");
@@ -56,20 +57,6 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
 function _iterableToArrayLimit(arr, i) {
     var _arr = [];
     var _n = true;
@@ -95,6 +82,23 @@ function _iterableToArrayLimit(arr, i) {
 function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance");
 }
+function _objectSpread(target) {
+    var _arguments = arguments, _loop = function(i) {
+        var source = _arguments[i] != null ? _arguments[i] : {
+        };
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    };
+    for(var i = 1; i < arguments.length; i++)_loop(i);
+    return target;
+}
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
 }
@@ -126,36 +130,43 @@ var useIconCheckboxStyles = (0, _jss).createUseStyles(function(param) {
         },
         checkChecked: {
             transform: 'scale(1, 1)'
+        },
+        disabled: {
+            opacity: 0.5
         }
     };
 });
+var _obj;
 var IconCheckbox = function IconCheckbox(param) {
-    var isChecked = param.isChecked;
+    var isChecked = param.isChecked, disabled = param.disabled;
     var classes = useIconCheckboxStyles();
     var ref = (0, _hooks).useTheme(), isIos = ref.isIos, colors = ref.colors;
-    var icon = isIos ? /*#__PURE__*/ React.createElement("svg", {
+    var icon = isIos ? /*#__PURE__*/ (0, _jsxRuntime).jsx("svg", {
         viewBox: "0 0 10 8",
         width: "10",
         height: "8",
         className: (0, _classnames).default(classes.check, _defineProperty({
-        }, classes.checkChecked, isChecked))
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M2.659 7.724c.33.366.92.368 1.254.005L9.79 1.336A.782.782 0 009.719.202a.858.858 0 00-1.178.069l-5.236 5.72-1.841-2.038a.857.857 0 00-1.177-.078.782.782 0 00-.082 1.133l2.454 2.716z",
-        fill: colors.inverse
-    })) : /*#__PURE__*/ React.createElement("svg", {
+        }, classes.checkChecked, isChecked)),
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
+            d: "M2.659 7.724c.33.366.92.368 1.254.005L9.79 1.336A.782.782 0 009.719.202a.858.858 0 00-1.178.069l-5.236 5.72-1.841-2.038a.857.857 0 00-1.177-.078.782.782 0 00-.082 1.133l2.454 2.716z",
+            fill: colors.inverse
+        })
+    }) : /*#__PURE__*/ (0, _jsxRuntime).jsx("svg", {
         viewBox: "0 0 14 10",
         width: "14",
         height: "10",
         className: (0, _classnames).default(classes.check, _defineProperty({
-        }, classes.checkChecked, isChecked))
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M5 10L0 5.192l1.4-1.346L5 7.308 12.6 0 14 1.346z",
-        fill: colors.inverse
+        }, classes.checkChecked, isChecked)),
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
+            d: "M5 10L0 5.192l1.4-1.346L5 7.308 12.6 0 14 1.346z",
+            fill: colors.inverse
+        })
+    });
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+        className: (0, _classnames).default(classes.box, (_obj = {
+        }, _defineProperty(_obj, classes.boxChecked, isChecked), _defineProperty(_obj, classes.disabled, disabled), _obj)),
+        children: icon
     }));
-    return(/*#__PURE__*/ React.createElement("div", {
-        className: (0, _classnames).default(classes.box, _defineProperty({
-        }, classes.boxChecked, isChecked))
-    }, icon));
 };
 var useStyles = (0, _jss).createUseStyles(function() {
     return {
@@ -164,8 +175,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
             display: 'inline'
         },
         disabled: {
-            opacity: 0.5,
-            pointerEvents: 'none'
+            opacity: 0.5
         }
     };
 });
@@ -197,11 +207,12 @@ var Checkbox = function Checkbox(props) {
             handleChange();
         }
     };
-    var iconCheckbox = /*#__PURE__*/ React.createElement(IconCheckbox, {
+    var iconCheckbox = /*#__PURE__*/ (0, _jsxRuntime).jsx(IconCheckbox, {
+        disabled: disabled,
         isChecked: value !== null && value !== void 0 ? value : checkedState
     });
     return(// eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    /*#__PURE__*/ React.createElement("div", _extends({
+    /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
         id: props.id,
         role: "checkbox",
         "aria-checked": value !== null && value !== void 0 ? value : checkedState,
@@ -209,27 +220,38 @@ var Checkbox = function Checkbox(props) {
         onClick: disabled ? undefined : handleChange,
         tabIndex: disabled ? undefined : 0,
         ref: focusableRef,
-        className: (0, _classnames).default(classes.checkboxContainer, _defineProperty({
-        }, classes.disabled, disabled)),
+        className: classes.checkboxContainer,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabel ? undefined : labelId,
         "aria-disabled": disabled
-    }, (0, _dom).getPrefixedDataAttributes(props.dataAttributes)), props.render ? props.render(iconCheckbox, labelId) : /*#__PURE__*/ React.createElement(_inline.default, {
-        space: 16
-    }, /*#__PURE__*/ React.createElement(_text.Text3, {
-        regular: true,
-        as: "div"
-    }, /*#__PURE__*/ React.createElement("div", {
-        style: {
-            position: 'relative',
-            top: -2
-        }
-    }, iconCheckbox)), props.children && /*#__PURE__*/ React.createElement(_text.Text3, {
-        regular: true,
-        as: "div",
-        id: labelId,
-        role: hasExternalLabel ? 'presentation' : undefined
-    }, /*#__PURE__*/ React.createElement("span", null, props.children)))));
+    }, (0, _dom).getPrefixedDataAttributes(props.dataAttributes), {
+        children: props.render ? props.render(iconCheckbox, labelId) : /*#__PURE__*/ (0, _jsxRuntime).jsxs(_inline.default, {
+            space: 16,
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
+                    regular: true,
+                    as: "div",
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        style: {
+                            position: 'relative',
+                            top: -2
+                        },
+                        children: iconCheckbox
+                    })
+                }),
+                props.children && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
+                    regular: true,
+                    as: "div",
+                    id: labelId,
+                    role: hasExternalLabel ? 'presentation' : undefined,
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("span", {
+                        className: disabled ? classes.disabled : '',
+                        children: props.children
+                    })
+                })
+            ]
+        })
+    })));
 };
 var _default = Checkbox;
 exports.default = _default;

package/dist/circle.js

@@ -3,31 +3,8 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 var _jss = require("./jss");
-function _interopRequireWildcard(obj) {
-    if (obj && obj.__esModule) {
-        return obj;
-    } else {
-        var newObj = {
-        };
-        if (obj != null) {
-            for(var key in obj){
-                if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
-                    };
-                    if (desc.get || desc.set) {
-                        Object.defineProperty(newObj, key, desc);
-                    } else {
-                        newObj[key] = obj[key];
-                    }
-                }
-            }
-        }
-        newObj.default = obj;
-        return newObj;
-    }
-}
 var useStyles = (0, _jss).createUseStyles(function() {
     return {
         circle: {
@@ -63,9 +40,10 @@ var Circle = function Circle(param) {
         backgroundImage: backgroundImage,
         size: size
     });
-    return(/*#__PURE__*/ React.createElement("div", {
-        className: classes.circle
-    }, children));
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+        className: classes.circle,
+        children: children
+    }));
 };
 var _default = Circle;
 exports.default = _default;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.default = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
@@ -38,19 +39,18 @@ function _interopRequireWildcard(obj) {
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
 }
 function _iterableToArrayLimit(arr, i) {
     var _arr = [];
@@ -77,6 +77,23 @@ function _iterableToArrayLimit(arr, i) {
 function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance");
 }
+function _objectSpread(target) {
+    var _arguments = arguments, _loop = function(i) {
+        var source = _arguments[i] != null ? _arguments[i] : {
+        };
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    };
+    for(var i = 1; i < arguments.length; i++)_loop(i);
+    return target;
+}
 function _objectWithoutProperties(source, excluded) {
     if (source == null) return {
     };
@@ -148,7 +165,7 @@ var MonthYearDateInput = function MonthYearDateInput(_param) {
         }
         return value;
     };
-    return(/*#__PURE__*/ React.createElement("input", _extends({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("input", _objectSpread({
     }, rest, {
         placeholder: texts.expirationDatePlaceholder,
         type: "text",
@@ -226,7 +243,7 @@ var CreditCardExpirationField = function CreditCardExpirationField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ React.createElement(_textFieldBase.default, _extends({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
     }, rest, fieldProps, {
         onChange: function onChange(event) {
             fieldProps.onChange(event);

package/dist/credit-card-fields.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
 var _creditCard = require("./utils/credit-card");
@@ -17,51 +17,36 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function _interopRequireWildcard(obj) {
-    if (obj && obj.__esModule) {
-        return obj;
-    } else {
-        var newObj = {
-        };
-        if (obj != null) {
-            for(var key in obj){
-                if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
-                    };
-                    if (desc.get || desc.set) {
-                        Object.defineProperty(newObj, key, desc);
-                    } else {
-                        newObj[key] = obj[key];
-                    }
-                }
-            }
-        }
-        newObj.default = obj;
-        return newObj;
-    }
-}
 var CreditCardFields = function CreditCardFields(param) {
     var _numberFieldName = param.numberFieldName, numberFieldName = _numberFieldName === void 0 ? 'ccNum' : _numberFieldName, _expirationFieldName = param.expirationFieldName, expirationFieldName = _expirationFieldName === void 0 ? 'ccExp' : _expirationFieldName, _cvvFieldName = param.cvvFieldName, cvvFieldName = _cvvFieldName === void 0 ? 'ccCvv' : _cvvFieldName, acceptedCards = param.acceptedCards;
     var ref = (0, _formContext).useForm(), values = ref.values;
     var ref1 = (0, _hooks).useTheme(), texts = ref1.texts;
     var cvvLength = (0, _creditCard).getCvvLength(String(values[numberFieldName]));
-    return(/*#__PURE__*/ React.createElement(_stack.default, {
-        space: 16
-    }, /*#__PURE__*/ React.createElement(_creditCardNumberField.default, {
-        acceptedCards: acceptedCards,
-        name: numberFieldName,
-        label: texts.formCreditCardNumberLabel
-    }), /*#__PURE__*/ React.createElement(_doubleField.default, {
-        layout: "60/40"
-    }, /*#__PURE__*/ React.createElement(_creditCardExpirationField.default, {
-        name: expirationFieldName,
-        label: texts.formCreditCardExpirationLabel
-    }), /*#__PURE__*/ React.createElement(_cvvField.default, {
-        acceptedCards: acceptedCards,
-        name: cvvFieldName,
-        label: texts.formCreditCardCvvLabel,
-        maxLength: cvvLength
-    }))));
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+        space: 16,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_creditCardNumberField.default, {
+                acceptedCards: acceptedCards,
+                name: numberFieldName,
+                label: texts.formCreditCardNumberLabel
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime).jsxs(_doubleField.default, {
+                layout: "60/40",
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_creditCardExpirationField.default, {
+                        name: expirationFieldName,
+                        label: texts.formCreditCardExpirationLabel
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_cvvField.default, {
+                        acceptedCards: acceptedCards,
+                        name: cvvFieldName,
+                        label: texts.formCreditCardCvvLabel,
+                        maxLength: cvvLength
+                    })
+                ]
+            })
+        ]
+    }));
 };
 var _default = CreditCardFields;
 exports.default = _default;

package/dist/credit-card-number-field.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { CommonFormFieldProps } from './text-field-base';
 import type { CardOptions } from './utils/credit-card';
+import type { CommonFormFieldProps } from './text-field-base';
 interface CreditCardNumberFieldProps extends CommonFormFieldProps {
     acceptedCards?: CardOptions;
     onChangeValue?: (value: string, rawValue: string) => void;