@telefonica/mistica 10.15.0 → 10.19.0

package/dist/video.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = exports.RATIO = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
+var _image = require("./image");
+var _jss = require("./jss");
+var _common = require("./utils/common");
+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;
+    }
+}
+function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {
+    };
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {
+    };
+    var target = {
+    };
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+var RATIO = {
+    '1:1': 1,
+    '16:9': 16 / 9,
+    '12:5': 12 / 5
+};
+exports.RATIO = RATIO;
+var useStyles = (0, _jss).createUseStyles(function() {
+    return {
+        video: {
+            borderRadius: function borderRadius(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
+            display: 'block',
+            maxWidth: '100%',
+            maxHeight: '100%',
+            objectFit: 'cover',
+            aspectRatio: function aspectRatio(param) {
+                var aspectRatio1 = param.aspectRatio;
+                return aspectRatio1 !== null && aspectRatio1 !== void 0 ? aspectRatio1 : 'unset';
+            }
+        }
+    };
+});
+/** Transparent 1x1px PNG  */ var TRANSPARENT_PIXEL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC';
+var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var src = _param.src, poster = _param.poster, _autoPlay = _param.autoPlay, autoPlay = _autoPlay === void 0 ? true : _autoPlay, _muted = _param.muted, muted = _muted === void 0 ? true : _muted, _loop = _param.loop, loop = _loop === void 0 ? true : _loop, _preload = _param.preload, preload = _preload === void 0 ? 'none' : _preload, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, props = _objectWithoutProperties(_param, [
+        "src",
+        "poster",
+        "autoPlay",
+        "muted",
+        "loop",
+        "preload",
+        "aspectRatio"
+    ]);
+    var noBorderRadius = (0, _image).useDisableBorderRadius();
+    var classes = useStyles({
+        noBorderRadius: noBorderRadius,
+        aspectRatio: !props.width && !props.height ? RATIO[aspectRatio] : undefined
+    });
+    var videoRef = React.useRef(null);
+    React.useEffect(function() {
+        var video = videoRef.current;
+        if (video && autoPlay && video.paused) {
+            video.play();
+        }
+    }, [
+        autoPlay
+    ]);
+    // normalize sources
+    var sources = (Array.isArray(src) ? src : [
+        src
+    ]).map(function(source) {
+        if (typeof source === 'string') {
+            return {
+                src: source
+            };
+        } else {
+            return source;
+        }
+    });
+    var width = props.width;
+    var height = props.height;
+    if (props.width !== undefined && props.height !== undefined) {
+        width = props.width;
+        height = props.height;
+    } else if (props.width !== undefined) {
+        height = props.width / RATIO[aspectRatio];
+    } else if (props.height !== undefined) {
+        width = props.height * RATIO[aspectRatio];
+    } else {
+        width = '100%';
+    }
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("video", {
+        ref: (0, _common).combineRefs(ref, videoRef),
+        playsInline: true,
+        disablePictureInPicture: true,
+        disableRemotePlayback: true,
+        autoPlay: autoPlay,
+        muted: muted,
+        loop: loop,
+        width: width,
+        height: height,
+        className: classes.video,
+        preload: preload,
+        // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
+        poster: poster || TRANSPARENT_PIXEL,
+        children: sources.map(function(param, index) {
+            var src = param.src, type = param.type;
+            /*#__PURE__*/ return (0, _jsxRuntime).jsx("source", {
+                src: src,
+                type: type
+            }, index);
+        })
+    }));
+});
+var _default = Video;
+exports.default = _default;

package/dist/video.js.flow

@@ -0,0 +1,50 @@
+// @flow
+
+import * as React from "react";
+export type AspectRatio = "1:1" | "16:9" | "12:5";
+declare export var RATIO: {
+  "1:1": number,
+  "16:9": number,
+  "12:5": number,
+};
+declare type VideoSource = {
+  src: string,
+  type?: string,
+};
+export type VideoProps = {
+ /**
+  * defaults to 100% when no width and no height are given
+  */
+ width?: number,
+ height?: number,
+ /**
+  * defaults to 1:1, if both width and height are given, aspectRatio is ignored
+  */
+ aspectRatio?: AspectRatio,
+ /**
+  * accepts multiple sources
+  */
+ src: string | Array<string> | VideoSource | Array<VideoSource>,
+ /**
+  * defaults to true
+  */
+ loop?: boolean,
+ /**
+  * defaults to true
+  */
+ muted?: boolean,
+ /**
+  * defaults to true
+  */
+ autoPlay?: boolean,
+ poster?: string,
+ /**
+  * defaults to none
+  */
+ preload?: "none" | "metadata" | "auto",
+};
+declare var Video: React.ComponentType<{
+  ...VideoProps,
+  ref?: React.Ref<HTMLVideoElement>,
+}>;
+declare export default typeof Video;

package/dist-es/card.js

@@ -8,6 +8,7 @@ import { Text1, Text2, Text4 } from './text';
 import { createUseStyles } from './jss';
 import { Boxed } from './boxed';
 import ButtonGroup from './button-group';
+import { DisableBorderRadiusProvider } from './image';
 var useCardContentStyles = createUseStyles(function() {
     return {
         actions: {
@@ -141,8 +142,10 @@ export var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
             className: classes.mediaCard,
             "aria-label": ariaLabel,
             children: [
-                /*#__PURE__*/ _jsx("div", {
+                typeof media.src === 'string' ? /*#__PURE__*/ _jsx("div", {
                     className: classes.media
+                }) : /*#__PURE__*/ _jsx(DisableBorderRadiusProvider, {
+                    children: media
                 }),
                 /*#__PURE__*/ _jsx("div", {
                     className: classes.content,

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useForm, useFieldProps } from './form-context';
 import { useTheme } from './hooks';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
@@ -192,7 +192,7 @@ var CreditCardExpirationField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         onChange: function(event) {
             fieldProps.onChange(event);

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

@@ -3,7 +3,7 @@ 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 TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import IconCreditcard from './icons/icon-creditcard';
 import IconVisa from './icons/icon-visa';
 import IconMastercard from './icons/icon-mastercard';
@@ -305,7 +305,7 @@ var CreditCardNumberField = function(_param) {
         onChangeValue: onChangeValue
     });
     var ref2;
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         onChange: function(event) {
             fieldProps.onChange(event);

package/dist-es/cvv-field.js

@@ -7,7 +7,7 @@ import Tooltip from './tooltip';
 import IconButton from './icon-button';
 import IcnInfo from './icons/icon-info-cvv';
 import { useFieldProps, useForm } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { IntegerInput } from './integer-field';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
@@ -152,7 +152,7 @@ var CvvField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         maxLength: maxLength,
         onChange: function(event) {

package/dist-es/date-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { isInputTypeSupported } from './utils/dom';
 import { isServerSide } from './utils/environment';
 import IconCalendarRegular from './generated/mistica-icons/icon-calendar-regular';
@@ -118,7 +118,7 @@ var DateField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var nativePicker = /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    var nativePicker = /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         min: min ? getLocalDateString(min) : undefined,
         max: max ? getLocalDateString(max) : undefined,

package/dist-es/date-time-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { isInputTypeSupported } from './utils/dom';
 import { isServerSide } from './utils/environment';
 import { getLocalDateTimeString } from './utils/time';
@@ -119,7 +119,7 @@ var FormDateField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var nativePicker = /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    var nativePicker = /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         min: min ? getLocalDateTimeString(min) : undefined,
         max: max ? getLocalDateTimeString(max) : undefined,

package/dist-es/date-time-picker.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import IconCalendarRegular from './generated/mistica-icons/icon-calendar-regular';
 import Datetime from 'react-datetime';
 import Overlay from './overlay';
@@ -367,7 +367,7 @@ var DateTimePicker = function(_param) {
     };
     return(/*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+            /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
             }, rest, {
                 style: {
                     cursor: 'default'

package/dist-es/decimal-field.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
 import { useTheme } from './hooks';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { createChangeEvent } from './utils/dom';
 import { useRifm } from 'rifm';
 import { combineRefs } from './utils/common';
@@ -191,7 +191,7 @@ var DecimalField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: DecimalInput,
         inputProps: {

package/dist-es/email-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFieldProps } from './form-context';
 import { useTheme } from './hooks';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -92,7 +92,7 @@ var EmailField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: "email",
         inputMode: "email",

package/dist-es/feedback.js

@@ -420,13 +420,12 @@ export var SuccessFeedbackScreen = function(props) {
 };
 var ErrorFeedbackScreen = function(_param) {
     var children = _param.children, errorReference = _param.errorReference, otherProps = _objectWithoutProperties(_param, ["children", "errorReference"]);
-    var ref = useTheme(), skinName = ref.skinName, colors = ref.colors;
-    var hasIcon = skinName !== VIVO_SKIN;
+    var ref = useTheme(), colors = ref.colors;
     return(/*#__PURE__*/ _jsxs(FeedbackScreen, _objectSpread({
     }, otherProps, {
         hapticFeedback: "error",
-        icon: hasIcon ? /*#__PURE__*/ _jsx(IcnError, {
-        }) : undefined,
+        icon: /*#__PURE__*/ _jsx(IcnError, {
+        }),
         animateText: true,
         children: [
             children,
@@ -440,12 +439,10 @@ var ErrorFeedbackScreen = function(_param) {
 };
 export { ErrorFeedbackScreen };
 export var InfoFeedbackScreen = function(props) {
-    var ref = useTheme(), skinName = ref.skinName;
-    var hasIcon = skinName !== VIVO_SKIN;
     return(/*#__PURE__*/ _jsx(FeedbackScreen, _objectSpread({
     }, props, {
-        icon: hasIcon ? /*#__PURE__*/ _jsx(IcnInfo, {
-        }) : undefined
+        icon: /*#__PURE__*/ _jsx(IcnInfo, {
+        })
     })));
 };
 export var SuccessFeedback = function(param) {

package/dist-es/iban-field.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useRifm } from 'rifm';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { createChangeEvent } from './utils/dom';
 import { combineRefs } from './utils/common';
 import { useTheme } from './hooks';
@@ -246,7 +246,7 @@ var IbanField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: IbanInput
     })));

package/dist-es/icons/icon-success.js

@@ -59,21 +59,29 @@ var IconSuccessO2 = function(param) {
         children: /*#__PURE__*/ _jsxs("g", {
             className: classnames(_defineProperty({
             }, classes.iconContainer, !color)),
-            strokeWidth: "2",
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
                 /*#__PURE__*/ _jsx("path", _objectSpread({
                     fill: "none",
+                    strokeWidth: "2",
                     stroke: color ? color : undefined,
-                    strokeMiterlimit: "10",
-                    d: "M21.7,35.6l2.8,2.8c1.1,1.1,2.9,1.1,4.1,0l17.3-17.3"
-                }, !skipAnimation && mergeProperties(getAnimateDrawLineProps('33', '0.9s', platformOverrides), getAnimateHopInProps('0.9s', platformOverrides)))),
+                    d: "M45.64 53.84A25.599 25.599 0 0 1 32 57.75C17.78 57.75 6.25 46.22 6.25 32S17.78 6.25 32 6.25 57.75 17.78 57.75 32c0 5.13-1.5 9.92-4.09 13.93"
+                }, !skipAnimation && getAnimateDrawLineProps('202', '0.3s', platformOverrides))),
                 /*#__PURE__*/ _jsx("path", _objectSpread({
                     fill: "none",
+                    strokeWidth: "2",
+                    stroke: color ? color : undefined,
+                    d: "m19.33 30.39 9.88 10.95 18.13-19.23"
+                }, !skipAnimation && mergeProperties(getAnimateDrawLineProps('44', '0.6s', platformOverrides), getAnimateHopInProps('0.6', platformOverrides)))),
+                /*#__PURE__*/ _jsx("circle", _objectSpread({
+                    fill: "none",
+                    strokeWidth: "2",
                     stroke: color ? color : undefined,
-                    d: "M49.1,57.9C44.2,61.1,38.3,63,32,63C14.9,63,1,49.1,1,32C1,14.9,14.9,1,32,1c17.1,0,31,13.9,31,31c0,7.5-2.6,14.3-7.1,19.7"
-                }, !skipAnimation && getAnimateDrawLineProps('186', '0.5s', platformOverrides)))
+                    cx: "50.18",
+                    cy: "50.1",
+                    r: ".89"
+                }, !skipAnimation && getAnimateDrawLineProps('180', '0.2s', platformOverrides)))
             ]
         })
     }));

package/dist-es/image.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
 import { createUseStyles } from './jss';
 function _objectWithoutProperties(source, excluded) {
     if (source == null) return {
@@ -30,38 +31,70 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
+/**
+ * This context is used internally to disable the border radius. This is useful for example
+ * when using the Image component inside a Card
+ */ var DisableBorderRadiusContext = /*#__PURE__*/ React.createContext(false);
+export var useDisableBorderRadius = function() {
+    return React.useContext(DisableBorderRadiusContext);
+};
+export var DisableBorderRadiusProvider = function(param) {
+    var children = param.children;
+    /*#__PURE__*/ return _jsx(DisableBorderRadiusContext.Provider, {
+        value: true,
+        children: children
+    });
+};
 var useStyles = createUseStyles(function() {
     return {
         image: {
-            borderRadius: 4,
+            borderRadius: function(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
             display: 'block',
             objectFit: 'cover',
             maxWidth: '100%',
-            maxHeight: '100%'
+            maxHeight: '100%',
+            aspectRatio: function(param) {
+                var aspectRatio = param.aspectRatio;
+                return aspectRatio !== null && aspectRatio !== void 0 ? aspectRatio : 'unset';
+            }
         }
     };
 });
-var RATIO = {
+export var RATIO = {
     '1:1': 1,
     '16:9': 16 / 9,
     '7:10': 7 / 10
 };
-var Image = function(_param) {
-    var url = _param.url, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, props = _objectWithoutProperties(_param, ["url", "aspectRatio", "alt"]);
-    var classes = useStyles();
+var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, props = _objectWithoutProperties(_param, ["aspectRatio", "alt"]);
+    var noBorderRadius = useDisableBorderRadius();
+    var classes = useStyles({
+        noBorderRadius: noBorderRadius,
+        aspectRatio: !props.width && !props.height ? RATIO[aspectRatio] : undefined
+    });
+    var url = props.src || props.url;
     var width = props.width;
     var height = props.height;
-    if (props.width !== undefined) {
+    if (props.width !== undefined && props.height !== undefined) {
+        width = props.width;
+        height = props.height;
+    } else if (props.width !== undefined) {
         height = props.width / RATIO[aspectRatio];
     } else if (props.height !== undefined) {
         width = props.height * RATIO[aspectRatio];
+    } else {
+        width = '100%';
     }
     return(/*#__PURE__*/ _jsx("img", {
+        ref: ref,
         src: url,
         className: classes.image,
         alt: alt,
         width: width,
         height: height
     }));
-};
+});
 export default Image;

package/dist-es/index.js

@@ -56,10 +56,12 @@ export { default as Callout } from './callout';
 export { useModalState } from './modal-context-provider';
 export { NavigationBar, MainNavigationBar, FunnelNavigationBar, NavigationBarActionGroup, NavigationBarAction, NavigationBarLogo } from './navigation-bar';
 export { default as Image } from './image';
+export { default as Video } from './video';
 // Forms
 export { default as Form } from './form';
 export { default as Select } from './select';
 export { default as TextField } from './text-field';
+export { TextFieldBase } from './text-field-base';
 export { default as SearchField } from './search-field';
 export { default as EmailField } from './email-field';
 export { default as PhoneNumberField } from './phone-number-field';
@@ -75,7 +77,7 @@ export { default as DecimalField } from './decimal-field';
 export { default as PasswordField } from './password-field';
 export { default as DoubleField } from './double-field';
 export { default as IbanField } from './iban-field';
-export { useForm } from './form-context';
+export { useForm, useFieldProps } from './form-context';
 // Icons
 // @deprecated use IconCloseRegular instead
 export { default as IconClose } from './icons/icon-close';

package/dist-es/integer-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFieldProps } from './form-context';
 import { useTheme } from './hooks';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -110,7 +110,7 @@ var IntegerField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: IntegerInput
     })));