@telefonica/mistica 11.2.1 → 11.3.0

package/dist-es/checkbox.js

@@ -1,13 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { SPACE } from './utils/key-codes';
-import { useControlProps } from './form-context';
-import { createUseStyles } from './jss';
-import Inline from './inline';
-import { Text3 } from './text';
-import { useAriaId, useTheme } from './hooks';
-import classnames from 'classnames';
-import { getPrefixedDataAttributes } from './utils/dom';
 function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -82,6 +72,16 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { SPACE } from "./utils/key-codes";
+import { useControlProps } from "./form-context";
+import { createUseStyles } from "./jss";
+import Inline from "./inline";
+import { Text3 } from "./text";
+import { useAriaId, useTheme } from "./hooks";
+import classnames from "classnames";
+import { getPrefixedDataAttributes } from "./utils/dom";
 var useIconCheckboxStyles = createUseStyles(function(param) {
     var colors = param.colors, isIos = param.isIos;
     return {
@@ -89,27 +89,27 @@ var useIconCheckboxStyles = createUseStyles(function(param) {
             flexShrink: 0,
             height: 18,
             width: 18,
-            display: 'inline-flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            userSelect: 'none',
+            display: "inline-flex",
+            justifyContent: "center",
+            alignItems: "center",
+            userSelect: "none",
             borderRadius: 2,
-            verticalAlign: 'middle',
+            verticalAlign: "middle",
             background: colors.background,
             boxShadow: "inset 0 0 0 ".concat(isIos ? 1 : 2, "px ").concat(colors.control),
-            transition: 'box-shadow 0.3s'
+            transition: "box-shadow 0.3s"
         },
         boxChecked: {
             boxShadow: "inset 0 0 0 9px ".concat(colors.controlActivated)
         },
         check: {
-            display: 'block',
-            transform: 'scale(0, 0)',
-            transformOrigin: 'center',
-            transition: 'transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6)'
+            display: "block",
+            transform: "scale(0, 0)",
+            transformOrigin: "center",
+            transition: "transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6)"
         },
         checkChecked: {
-            transform: 'scale(1, 1)'
+            transform: "scale(1, 1)"
         },
         disabled: {
             opacity: 0.5
@@ -140,16 +140,16 @@ var IconCheckbox = function(param) {
         })
     });
     var _obj;
-    return(/*#__PURE__*/ _jsx("div", {
+    return /*#__PURE__*/ _jsx("div", {
         className: classnames(classes.box, (_obj = {}, _defineProperty(_obj, classes.boxChecked, isChecked), _defineProperty(_obj, classes.disabled, disabled), _obj)),
         children: icon
-    }));
+    });
 };
 var useStyles = createUseStyles(function() {
     return {
         checkboxContainer: {
-            cursor: 'default',
-            display: 'inline'
+            cursor: "default",
+            display: "inline"
         },
         disabled: {
             opacity: 0.5
@@ -158,9 +158,9 @@ var useStyles = createUseStyles(function() {
 });
 var Checkbox = function(props) {
     var classes = useStyles();
-    var labelId = useAriaId(props['aria-labelledby']);
-    var ariaLabel = props['aria-label'];
-    var hasExternalLabel = ariaLabel || props['aria-labelledby'];
+    var labelId = useAriaId(props["aria-labelledby"]);
+    var ariaLabel = props["aria-label"];
+    var hasExternalLabel = ariaLabel || props["aria-labelledby"];
     var ref = useControlProps({
         name: props.name,
         value: props.checked,
@@ -216,7 +216,7 @@ var Checkbox = function(props) {
                     as: "div",
                     children: /*#__PURE__*/ _jsx("div", {
                         style: {
-                            position: 'relative',
+                            position: "relative",
                             top: -2
                         },
                         children: iconCheckbox
@@ -226,9 +226,9 @@ var Checkbox = function(props) {
                     regular: true,
                     as: "div",
                     id: labelId,
-                    role: hasExternalLabel ? 'presentation' : undefined,
+                    role: hasExternalLabel ? "presentation" : undefined,
                     children: /*#__PURE__*/ _jsx("span", {
-                        className: disabled ? classes.disabled : '',
+                        className: disabled ? classes.disabled : "",
                         children: props.children
                     })
                 })

package/dist-es/chip.js

@@ -1,13 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { createUseStyles } from './jss';
-import { useTheme } from './hooks';
-import Box from './box';
-import { Text2 } from './text';
-import IconButton from './icon-button';
-import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
-import { pxToRem } from './utils/css';
-import classNames from 'classnames';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -21,27 +11,37 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { createUseStyles } from "./jss";
+import { useTheme } from "./hooks";
+import Box from "./box";
+import { Text2 } from "./text";
+import IconButton from "./icon-button";
+import IconCloseRegular from "./generated/mistica-icons/icon-close-regular";
+import { pxToRem } from "./utils/css";
+import classNames from "classnames";
 var useStyles = createUseStyles(function(param1) {
     var colors = param1.colors, mq = param1.mq;
     return {
         container: {
-            display: 'inline-flex',
-            verticalAlign: 'middle',
-            justifyContent: 'center',
-            alignItems: 'center',
+            display: "inline-flex",
+            verticalAlign: "middle",
+            justifyContent: "center",
+            alignItems: "center",
             border: "1px solid ".concat(colors.border),
             borderRadius: 20,
             backgroundColor: colors.backgroundContainer,
             minHeight: 32,
             minWidth: 56,
-            cursor: 'default',
+            cursor: "default",
             color: colors.neutralMedium,
-            '& > span': {
+            "& > span": {
                 color: colors.textPrimary
             }
         },
         interactive: _defineProperty({}, mq.supportsHover, {
-            '&:hover:not($active)': {
+            "&:hover:not($active)": {
                 borderColor: function(param) {
                     var isDarkMode = param.isDarkMode;
                     return isDarkMode ? colors.background : colors.tagBackgroundActive;
@@ -49,7 +49,7 @@ var useStyles = createUseStyles(function(param1) {
                 color: colors.controlActivated,
                 backgroundColor: colors.tagBackgroundActive
             },
-            '&:hover > span': {
+            "&:hover > span": {
                 color: colors.controlActivated
             }
         }),
@@ -57,7 +57,7 @@ var useStyles = createUseStyles(function(param1) {
             borderColor: colors.controlActivated,
             color: colors.controlActivated,
             backgroundColor: colors.tagBackgroundActive,
-            '& > span': {
+            "& > span": {
                 color: colors.controlActivated
             }
         }
@@ -89,7 +89,7 @@ var Chip = function(props) {
     });
     var paddingLeft = Icon ? 8 : 12;
     if (props.onClose) {
-        return(/*#__PURE__*/ _jsxs(Box, {
+        return /*#__PURE__*/ _jsxs(Box, {
             className: classes.container,
             paddingLeft: paddingLeft,
             children: [
@@ -99,9 +99,9 @@ var Chip = function(props) {
                     children: /*#__PURE__*/ _jsx(IconButton, {
                         size: 24,
                         style: {
-                            display: 'flex',
-                            justifyContent: 'center',
-                            alignItems: 'center'
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center"
                         },
                         "aria-label": texts.closeButtonLabel,
                         onPress: function() {
@@ -114,16 +114,16 @@ var Chip = function(props) {
                     })
                 })
             ]
-        }));
+        });
     } else {
         var isInteractive = props.active !== undefined;
         var _obj;
-        return(/*#__PURE__*/ _jsx(Box, {
+        return /*#__PURE__*/ _jsx(Box, {
             className: classNames(classes.container, (_obj = {}, _defineProperty(_obj, classes.interactive, isInteractive), _defineProperty(_obj, classes.active, props.active), _obj)),
             paddingLeft: paddingLeft,
             paddingRight: 12,
             children: body
-        }));
+        });
     }
 };
 export default Chip;

package/dist-es/circle.js

@@ -1,22 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { createUseStyles } from './jss';
+import * as React from "react";
+import { createUseStyles } from "./jss";
 var useStyles = createUseStyles(function() {
     return {
         circle: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
             backgroundColor: function(param) {
                 var backgroundColor = param.backgroundColor;
                 return backgroundColor;
             },
             backgroundImage: function(param) {
                 var backgroundImage = param.backgroundImage;
-                return backgroundImage ? "url(".concat(backgroundImage, ")") : 'none';
+                return backgroundImage ? "url(".concat(backgroundImage, ")") : "none";
             },
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
+            backgroundSize: "cover",
+            backgroundPosition: "center",
             width: function(param) {
                 var size = param.size;
                 return size;
@@ -25,7 +25,7 @@ var useStyles = createUseStyles(function() {
                 var size = param.size;
                 return size;
             },
-            borderRadius: '50%'
+            borderRadius: "50%"
         }
     };
 });
@@ -36,9 +36,9 @@ var Circle = function(param) {
         backgroundImage: backgroundImage,
         size: size
     });
-    return(/*#__PURE__*/ _jsx("div", {
+    return /*#__PURE__*/ _jsx("div", {
         className: classes.circle,
         children: children
-    }));
+    });
 };
 export default Circle;

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

@@ -1,8 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { useForm, useFieldProps } from './form-context';
-import { useTheme } from './hooks';
-import { TextFieldBaseAutosuggest } from './text-field-base';
 function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -104,6 +99,11 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useForm, useFieldProps } from "./form-context";
+import { useTheme } from "./hooks";
+import { TextFieldBaseAutosuggest } from "./text-field-base";
 var MonthYearDateInput = function(_param) {
     var inputRef = _param.inputRef, defaultValue = _param.defaultValue, value1 = _param.value, rest = _objectWithoutProperties(_param, [
         "inputRef",
@@ -111,28 +111,28 @@ var MonthYearDateInput = function(_param) {
         "value"
     ]);
     var texts = useTheme().texts;
-    var prevValue = React.useRef(value1 || '');
+    var prevValue = React.useRef(value1 || "");
     /**
      * 1) characters other than [0-9] and '/' are removed
      * 2) automatically insert "/" as you type
      * 3) the user must be able to remove text (eg: deleting the slash must not automatically insert a new one)
      */ var format = function(s) {
         // remove invalid characters
-        var value = s.replace(/[^\d/]/g, '').replace(/\/+/g, '/');
+        var value = s.replace(/[^\d/]/g, "").replace(/\/+/g, "/");
         // remove extra slashes: "01/12/34" => "01/12"
-        var ref = _slicedToArray(value.split('/'), 2), month = ref[0], year = ref[1];
+        var ref = _slicedToArray(value.split("/"), 2), month = ref[0], year = ref[1];
         if (year) {
             value = "".concat(month, "/").concat(year);
         }
         var isDeleting = String(prevValue.current).length >= value.length;
         if (isDeleting) {
         // do not format when deleting
-        } else if (value === '/') {
-            value = ''; // missing month, invalid
+        } else if (value === "/") {
+            value = ""; // missing month, invalid
         } else if (value.length === 1 && parseInt(value) >= 2) {
             value = "0".concat(value, "/"); // month is > 1, prepend with "0"
         } else if (value.length === 2) {
-            if (value[1] === '/') {
+            if (value[1] === "/") {
                 value = "0".concat(value); // prepend "0" to "1/"
             } else if (parseInt(month) > 12 || parseInt(month) < 1) {
                 value = value[0]; // if month is invalid remove last character
@@ -142,7 +142,7 @@ var MonthYearDateInput = function(_param) {
         }
         return value;
     };
-    return(/*#__PURE__*/ _jsx("input", _objectSpread({}, rest, {
+    return /*#__PURE__*/ _jsx("input", _objectSpread({}, rest, {
         placeholder: texts.expirationDatePlaceholder,
         type: "text",
         inputMode: "decimal",
@@ -156,10 +156,10 @@ var MonthYearDateInput = function(_param) {
         value: value1 === undefined ? undefined : format(value1),
         defaultValue: defaultValue === undefined ? undefined : format(defaultValue),
         ref: inputRef
-    })));
+    }));
 };
 var CreditCardExpirationField = function(_param) {
-    var disabled = _param.disabled, error1 = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validateProp = _param.validate, onChange = _param.onChange, onChangeValue = _param.onChangeValue, onBlur = _param.onBlur, value2 = _param.value, _autoComplete = _param.autoComplete, autoComplete = _autoComplete === void 0 ? 'cc-exp' : _autoComplete, defaultValue = _param.defaultValue, rest = _objectWithoutProperties(_param, [
+    var disabled = _param.disabled, error1 = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validateProp = _param.validate, onChange = _param.onChange, onChangeValue = _param.onChangeValue, onBlur = _param.onBlur, value2 = _param.value, _autoComplete = _param.autoComplete, autoComplete = _autoComplete === void 0 ? "cc-exp" : _autoComplete, defaultValue = _param.defaultValue, rest = _objectWithoutProperties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -177,7 +177,7 @@ var CreditCardExpirationField = function(_param) {
     var ref1 = useForm(), setFormError = ref1.setFormError, jumpToNext = ref1.jumpToNext;
     var validate = function(value, rawValue) {
         if (!rawValue) {
-            return optional ? '' : texts.formFieldErrorIsMandatory;
+            return optional ? "" : texts.formFieldErrorIsMandatory;
         }
         var month = value.month, year = value.year;
         if (!month || !year) {
@@ -195,7 +195,7 @@ var CreditCardExpirationField = function(_param) {
         return validateProp === null || validateProp === void 0 ? void 0 : validateProp(value, rawValue);
     };
     var processValue = function(s) {
-        var ref = _slicedToArray(String(s).split('/').map(function(n) {
+        var ref = _slicedToArray(String(s).split("/").map(function(n) {
             return parseInt(n);
         }), 2), month = ref[0], year = ref[1];
         var fullYear = Number.isInteger(year) ? 2000 + year : null;
@@ -219,7 +219,7 @@ var CreditCardExpirationField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
+    return /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
         onChange: function(event) {
             fieldProps.onChange(event);
             var rawValue = event.currentTarget.value;
@@ -238,6 +238,6 @@ var CreditCardExpirationField = function(_param) {
         },
         autoComplete: autoComplete,
         inputComponent: MonthYearDateInput
-    })));
+    }));
 };
 export default CreditCardExpirationField;

package/dist-es/credit-card-fields.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { useForm } from './form-context';
-import { useTheme } from './hooks';
-import { getCvvLength } from './utils/credit-card';
-import DoubleField from './double-field';
-import Stack from './stack';
-import CreditCardExpirationField from './credit-card-expiration-field';
-import CreditCardNumberField from './credit-card-number-field';
-import CvvField from './cvv-field';
+import * as React from "react";
+import { useForm } from "./form-context";
+import { useTheme } from "./hooks";
+import { getCvvLength } from "./utils/credit-card";
+import DoubleField from "./double-field";
+import Stack from "./stack";
+import CreditCardExpirationField from "./credit-card-expiration-field";
+import CreditCardNumberField from "./credit-card-number-field";
+import CvvField from "./cvv-field";
 var CreditCardFields = function(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 _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 values = useForm().values;
     var texts = useTheme().texts;
     var cvvLength = getCvvLength(String(values[numberFieldName]));
-    return(/*#__PURE__*/ _jsxs(Stack, {
+    return /*#__PURE__*/ _jsxs(Stack, {
         space: 16,
         children: [
             /*#__PURE__*/ _jsx(CreditCardNumberField, {
@@ -37,6 +37,6 @@ var CreditCardFields = function(param) {
                 ]
             })
         ]
-    }));
+    });
 };
 export default CreditCardFields;

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

@@ -1,17 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { useForm, useFieldProps } from './form-context';
-import { useTheme } from './hooks';
-import { getCreditCardNumberLength, isAmericanExpress, isVisa, isMasterCard, isValidCreditCardNumber } from './utils/credit-card';
-import { TextFieldBaseAutosuggest } from './text-field-base';
-import IconCreditcard from './icons/icon-creditcard';
-import IconVisa from './icons/icon-visa';
-import IconMastercard from './icons/icon-mastercard';
-import IconAmex from './icons/icon-amex';
-import { createUseStyles } from './jss';
-import { useRifm } from 'rifm';
-import { createChangeEvent } from './utils/dom';
-import { combineRefs } from './utils/common';
 function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -113,11 +99,25 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useForm, useFieldProps } from "./form-context";
+import { useTheme } from "./hooks";
+import { getCreditCardNumberLength, isAmericanExpress, isVisa, isMasterCard, isValidCreditCardNumber } from "./utils/credit-card";
+import { TextFieldBaseAutosuggest } from "./text-field-base";
+import IconCreditcard from "./icons/icon-creditcard";
+import IconVisa from "./icons/icon-visa";
+import IconMastercard from "./icons/icon-mastercard";
+import IconAmex from "./icons/icon-amex";
+import { createUseStyles } from "./jss";
+import { useRifm } from "rifm";
+import { createChangeEvent } from "./utils/dom";
+import { combineRefs } from "./utils/common";
 var format = function(s) {
     var ref;
-    var sanitizedNumber = String(s !== null && s !== void 0 ? s : '').replace(/[^\d]/g, '');
+    var sanitizedNumber = String(s !== null && s !== void 0 ? s : "").replace(/[^\d]/g, "");
     var ref1;
-    return (ref1 = (ref = sanitizedNumber.match(/.{1,4}/g)) === null || ref === void 0 ? void 0 : ref.join(' ')) !== null && ref1 !== void 0 ? ref1 : sanitizedNumber;
+    return (ref1 = (ref = sanitizedNumber.match(/.{1,4}/g)) === null || ref === void 0 ? void 0 : ref.join(" ")) !== null && ref1 !== void 0 ? ref1 : sanitizedNumber;
 };
 var CreditCardInput = function(_param) {
     var inputRef = _param.inputRef, value = _param.value, defaultValue = _param.defaultValue, onChange = _param.onChange, other = _objectWithoutProperties(_param, [
@@ -126,9 +126,9 @@ var CreditCardInput = function(_param) {
         "defaultValue",
         "onChange"
     ]);
-    var ref = _slicedToArray(React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''), 2), selfValue = ref[0], setSelfValue = ref[1];
+    var ref = _slicedToArray(React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ""), 2), selfValue = ref[0], setSelfValue = ref[1];
     var ref2 = React.useRef(null);
-    var isControlledByParent = typeof value !== 'undefined';
+    var isControlledByParent = typeof value !== "undefined";
     var controlledValue = isControlledByParent ? value : selfValue;
     var handleChangeValue = React.useCallback(function(newFormattedValue) {
         if (!isControlledByParent) {
@@ -147,24 +147,24 @@ var CreditCardInput = function(_param) {
         onChange: handleChangeValue,
         accept: /[\d]+/g
     });
-    return(/*#__PURE__*/ _jsx("input", _objectSpread({}, other, {
+    return /*#__PURE__*/ _jsx("input", _objectSpread({}, other, {
         type: "text",
         inputMode: "decimal",
         maxLength: getCreditCardNumberLength(rifm.value) + 3,
         onChange: rifm.onChange,
         value: rifm.value,
         ref: combineRefs(inputRef, ref2)
-    })));
+    }));
 };
 var getAnimationTarget = function(value) {
     if (isVisa(value)) {
-        return(/*#__PURE__*/ _jsx(IconVisa, {}));
+        return /*#__PURE__*/ _jsx(IconVisa, {});
     }
     if (isMasterCard(value)) {
-        return(/*#__PURE__*/ _jsx(IconMastercard, {}));
+        return /*#__PURE__*/ _jsx(IconMastercard, {});
     }
     if (isAmericanExpress(value)) {
-        return(/*#__PURE__*/ _jsx(IconAmex, {}));
+        return /*#__PURE__*/ _jsx(IconAmex, {});
     }
     return null;
 };
@@ -175,7 +175,7 @@ var initialState = {
 };
 var reducer = function(state, param) {
     var type = param.type, value = param.value;
-    if (type === 'INPUT') {
+    if (type === "INPUT") {
         var animationTarget = getAnimationTarget(value);
         if (animationTarget && !state.showBackface) {
             return {
@@ -197,7 +197,7 @@ var reducer = function(state, param) {
             });
         }
     }
-    if (type === 'TRANSITION_END') {
+    if (type === "TRANSITION_END") {
         return _objectSpread({}, state, {
             isAnimating: false
         });
@@ -210,22 +210,22 @@ var useStylesCCAdornment = createUseStyles(function() {
             perspective: 1000
         },
         flipInner: {
-            position: 'relative',
-            transition: 'transform 0.4s',
-            transformStyle: 'preserve-3d',
-            '& div': {
-                backfaceVisibility: 'hidden'
+            position: "relative",
+            transition: "transform 0.4s",
+            transformStyle: "preserve-3d",
+            "& div": {
+                backfaceVisibility: "hidden"
             },
             transform: function(param) {
                 var showBackface = param.showBackface;
-                return showBackface ? 'rotateY(180deg)' : 'none';
+                return showBackface ? "rotateY(180deg)" : "none";
             }
         },
         flipFront: {
-            position: 'absolute'
+            position: "absolute"
         },
         flipBack: {
-            transform: 'rotateY(180deg)'
+            transform: "rotateY(180deg)"
         }
     };
 });
@@ -234,7 +234,7 @@ var CreditcardAdornment = function(param) {
     var ref = _slicedToArray(React.useReducer(reducer, initialState), 2), ref3 = ref[0], showBackface = ref3.showBackface, animationTarget = ref3.animationTarget, isAnimating = ref3.isAnimating, dispatch = ref[1];
     React.useEffect(function() {
         dispatch({
-            type: 'INPUT',
+            type: "INPUT",
             value: value
         });
     }, [
@@ -243,13 +243,13 @@ var CreditcardAdornment = function(param) {
     var classes = useStylesCCAdornment({
         showBackface: showBackface
     });
-    return(/*#__PURE__*/ _jsx("div", {
+    return /*#__PURE__*/ _jsx("div", {
         className: classes.flip,
         children: /*#__PURE__*/ _jsxs("div", {
             className: classes.flipInner,
             onTransitionEnd: function() {
                 return isAnimating && dispatch({
-                    type: 'TRANSITION_END'
+                    type: "TRANSITION_END"
                 });
             },
             children: [
@@ -263,14 +263,14 @@ var CreditcardAdornment = function(param) {
                 })
             ]
         })
-    }));
+    });
 };
 var CreditCardNumberField = function(_param) {
     var disabled = _param.disabled, error1 = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validateProp = _param.validate, onChange = _param.onChange, onChangeValue = _param.onChangeValue, onBlur = _param.onBlur, _acceptedCards = _param.acceptedCards, acceptedCards = _acceptedCards === void 0 ? {
         americanExpress: true,
         visa: true,
         masterCard: true
-    } : _acceptedCards, value1 = _param.value, _autoComplete = _param.autoComplete, autoComplete = _autoComplete === void 0 ? 'cc-number' : _autoComplete, defaultValue = _param.defaultValue, rest = _objectWithoutProperties(_param, [
+    } : _acceptedCards, value1 = _param.value, _autoComplete = _param.autoComplete, autoComplete = _autoComplete === void 0 ? "cc-number" : _autoComplete, defaultValue = _param.defaultValue, rest = _objectWithoutProperties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -290,7 +290,7 @@ var CreditCardNumberField = function(_param) {
     var validate = function(value, rawValue) {
         var error = texts.formCreditCardNumberError;
         if (!value) {
-            return optional ? '' : texts.formFieldErrorIsMandatory;
+            return optional ? "" : texts.formFieldErrorIsMandatory;
         }
         if (isAmericanExpress(value) && !acceptedCards.americanExpress) {
             return error;
@@ -310,7 +310,7 @@ var CreditCardNumberField = function(_param) {
         return validateProp === null || validateProp === void 0 ? void 0 : validateProp(value, rawValue);
     };
     var processValue = function(s) {
-        return s.replace(/\s/g, '');
+        return s.replace(/\s/g, "");
     };
     var fieldProps = useFieldProps({
         name: name,
@@ -327,7 +327,7 @@ var CreditCardNumberField = function(_param) {
         onChangeValue: onChangeValue
     });
     var ref4;
-    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
+    return /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
         onChange: function(event) {
             fieldProps.onChange(event);
             var rawValue = event.currentTarget.value;
@@ -347,8 +347,8 @@ var CreditCardNumberField = function(_param) {
         inputComponent: CreditCardInput,
         autoComplete: autoComplete,
         endIcon: /*#__PURE__*/ _jsx(CreditcardAdornment, {
-            value: (ref4 = value1 !== null && value1 !== void 0 ? value1 : rawValues[name]) !== null && ref4 !== void 0 ? ref4 : ''
+            value: (ref4 = value1 !== null && value1 !== void 0 ? value1 : rawValues[name]) !== null && ref4 !== void 0 ? ref4 : ""
         })
-    })));
+    }));
 };
 export default CreditCardNumberField;