@telefonica/mistica 10.14.2 → 10.18.0

package/dist/video.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+export declare type AspectRatio = '1:1' | '16:9' | '12:5';
+export declare const RATIO: {
+    '1:1': number;
+    '16:9': number;
+    '12:5': number;
+};
+declare type VideoSource = {
+    src: string;
+    type?: string;
+};
+export declare 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;
+    children?: void;
+    /** defaults to none */
+    preload?: 'none' | 'metadata' | 'auto';
+};
+declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;
+export default Video;

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/button.js

@@ -88,7 +88,7 @@ var commonClasses = function() {
             border: "".concat(BORDER_PX, "px solid transparent"),
             borderRadius: 4,
             overflow: 'hidden',
-            '&:hover': {
+            '&:hover:not([disabled])': {
                 transition: "background-color ".concat(transitionTiming, ", color ").concat(transitionTiming, ", border-color ").concat(transitionTiming)
             }
         },
@@ -143,6 +143,9 @@ var commonClasses = function() {
         }
     };
 };
+var disabledStyle = {
+    opacity: 0.5
+};
 var usePrimaryButtonStyles = createUseStyles(function(theme) {
     return _objectSpread({
     }, commonClasses(), {
@@ -152,10 +155,7 @@ var usePrimaryButtonStyles = createUseStyles(function(theme) {
             '&:enabled:active': {
                 backgroundColor: theme.colors.buttonPrimaryBackgroundSelected
             },
-            '&[disabled]:not($isLoading)': {
-                color: theme.colors.textButtonPrimaryDisabled,
-                backgroundColor: theme.colors.buttonPrimaryBackgroundDisabled
-            },
+            '&[disabled]:not($isLoading)': disabledStyle,
             // Next media queries were added in each button style, because a pair of bugs in mobile devices (related to: https://jira.tuenti.io/jira/browse/APPS-1882):
             // - When tapping on a button that takes you to next screen and then go back to the previous one, button still have the focus styles
             // - Same behavior if you do long press on the button
@@ -163,7 +163,7 @@ var usePrimaryButtonStyles = createUseStyles(function(theme) {
             // - Make sure that in FF hover still has it's proper styles
             // - Media query with "coarse" (mobile), avoids that in devices that have coarse implemented, focus style doesn't get stuck
             // Must be always declared for Firefox
-            '&:hover': {
+            '&:hover:not([disabled])': {
                 backgroundColor: theme.colors.buttonPrimaryBackgroundHover,
                 '@media (pointer: coarse)': {
                     // Revert hover background in touch devices
@@ -178,11 +178,8 @@ var usePrimaryButtonStyles = createUseStyles(function(theme) {
                 backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse,
                 color: theme.colors.textButtonPrimaryInverseSelected
             },
-            '&[disabled]:not($isLoading)': {
-                backgroundColor: theme.colors.buttonPrimaryBackgroundDisabledInverse,
-                color: theme.colors.textButtonPrimaryInverseDisabled
-            },
-            '&:hover': {
+            '&[disabled]:not($isLoading)': disabledStyle,
+            '&:hover:not([disabled])': {
                 color: theme.colors.textButtonPrimaryInverseSelected,
                 backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse,
                 '@media (pointer: coarse)': {
@@ -213,11 +210,8 @@ var useSecondaryButtonStyles = createUseStyles(function(theme) {
         }, buttonSecondaryLightStyle(theme), {
             '&:enabled:active': _objectSpread({
             }, buttonSecondaryHoverLightStyle(theme)),
-            '&[disabled]:not($isLoading)': {
-                color: theme.colors.textButtonSecondaryDisabled,
-                borderColor: theme.colors.buttonSecondaryBackgroundDisabled
-            },
-            '&:hover': _objectSpread({
+            '&[disabled]:not($isLoading)': disabledStyle,
+            '&:hover:not([disabled])': _objectSpread({
             }, buttonSecondaryHoverLightStyle(theme), {
                 '@media (pointer: coarse)': _objectSpread({
                 }, buttonSecondaryLightStyle(theme))
@@ -230,11 +224,8 @@ var useSecondaryButtonStyles = createUseStyles(function(theme) {
                 borderColor: theme.colors.buttonSecondaryBorderSelectedInverse,
                 color: theme.colors.textButtonSecondaryInverseSelected
             },
-            '&[disabled]:not($isLoading)': {
-                color: theme.colors.textButtonSecondaryInverseDisabled,
-                borderColor: theme.colors.buttonSecondaryBorderDisabledInverse
-            },
-            '&:hover': {
+            '&[disabled]:not($isLoading)': disabledStyle,
+            '&:hover:not([disabled])': {
                 borderColor: theme.colors.buttonSecondaryBorderSelectedInverse,
                 color: theme.colors.textButtonSecondaryInverseSelected,
                 '@media (pointer: coarse)': {
@@ -253,10 +244,9 @@ var dangerButtonStyles = function(theme) {
             backgroundColor: theme.colors.buttonDangerBackgroundSelected
         },
         '&[disabled]:not($isLoading)': {
-            color: theme.colors.textButtonPrimaryDisabled,
-            backgroundColor: theme.colors.buttonDangerBackgroundDisabled
+            opacity: 0.5
         },
-        '&:hover': {
+        '&:hover:not([disabled])': {
             backgroundColor: theme.colors.buttonDangerBackgroundHover,
             '@media (pointer: coarse)': {
                 // Revert hover background in touch devices
@@ -426,7 +416,7 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
             '&:enabled:active': {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelected
             },
-            '&:hover': {
+            '&:hover:not([disabled])': {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelected,
                 '@media (pointer: coarse)': {
                     backgroundColor: 'initial'
@@ -438,7 +428,7 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
             '&:enabled:active': {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse
             },
-            '&:hover': {
+            '&:hover:not([disabled])': {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse,
                 '@media (pointer: coarse)': {
                     backgroundColor: 'initial'

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/checkbox.js

@@ -96,11 +96,15 @@ var useIconCheckboxStyles = createUseStyles(function(param) {
         },
         checkChecked: {
             transform: 'scale(1, 1)'
+        },
+        disabled: {
+            opacity: 0.5
         }
     };
 });
+var _obj;
 var IconCheckbox = function(param) {
-    var isChecked = param.isChecked;
+    var isChecked = param.isChecked, disabled = param.disabled;
     var classes = useIconCheckboxStyles();
     var ref = useTheme(), isIos = ref.isIos, colors = ref.colors;
     var icon = isIos ? /*#__PURE__*/ _jsx("svg", {
@@ -125,8 +129,8 @@ var IconCheckbox = function(param) {
         })
     });
     return(/*#__PURE__*/ _jsx("div", {
-        className: classnames(classes.box, _defineProperty({
-        }, classes.boxChecked, isChecked)),
+        className: classnames(classes.box, (_obj = {
+        }, _defineProperty(_obj, classes.boxChecked, isChecked), _defineProperty(_obj, classes.disabled, disabled), _obj)),
         children: icon
     }));
 };
@@ -137,8 +141,7 @@ var useStyles = createUseStyles(function() {
             display: 'inline'
         },
         disabled: {
-            opacity: 0.5,
-            pointerEvents: 'none'
+            opacity: 0.5
         }
     };
 });
@@ -171,6 +174,7 @@ var Checkbox = function(props) {
         }
     };
     var iconCheckbox = /*#__PURE__*/ _jsx(IconCheckbox, {
+        disabled: disabled,
         isChecked: value !== null && value !== void 0 ? value : checkedState
     });
     return(// When the checkbox is disabled, it shouldn't be focusable
@@ -183,8 +187,7 @@ var Checkbox = function(props) {
         onClick: disabled ? undefined : handleChange,
         tabIndex: disabled ? undefined : 0,
         ref: focusableRef,
-        className: classnames(classes.checkboxContainer, _defineProperty({
-        }, classes.disabled, disabled)),
+        className: classes.checkboxContainer,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabel ? undefined : labelId,
         "aria-disabled": disabled
@@ -209,6 +212,7 @@ var Checkbox = function(props) {
                     id: labelId,
                     role: hasExternalLabel ? 'presentation' : undefined,
                     children: /*#__PURE__*/ _jsx("span", {
+                        className: disabled ? classes.disabled : '',
                         children: props.children
                     })
                 })

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';
@@ -182,7 +182,7 @@ var useStyles = createUseStyles(function() {
             '& .rdtPicker td.rdtDisabled, & .rdtPicker td.rdtDisabled:hover': {
                 background: 'none',
                 color: '#999999',
-                cursor: 'not-allowed'
+                cursor: 'default'
             },
             '& .rdtPicker td span.rdtOld': {
                 color: '#999999'
@@ -190,7 +190,7 @@ var useStyles = createUseStyles(function() {
             '& .rdtPicker td span.rdtDisabled, & .rdtPicker td span.rdtDisabled:hover': {
                 background: 'none',
                 color: '#999999',
-                cursor: 'not-allowed'
+                cursor: 'default'
             },
             '& .rdtPicker th': {
                 borderBottom: '1px solid #f9f9f9',
@@ -215,7 +215,7 @@ var useStyles = createUseStyles(function() {
             '& .rdtPicker th.rdtDisabled, & .rdtPicker th.rdtDisabled:hover': {
                 background: 'none',
                 color: '#999999',
-                cursor: 'not-allowed'
+                cursor: 'default'
             },
             '& .rdtPicker thead tr:first-of-type th': {
                 cursor: 'pointer'
@@ -291,11 +291,16 @@ var useStyles = createUseStyles(function() {
 });
 var DateTimePicker = function(_param) {
     var withTime = _param.withTime, mode = _param.mode, isValidDate = _param.isValidDate, optional = _param.optional, rest = _objectWithoutProperties(_param, ["withTime", "mode", "isValidDate", "optional"]);
-    var ref = _slicedToArray(React.useState(false), 2), showPicker = ref[0], setShowPicker = ref[1];
+    var ref = _slicedToArray(React.useState(false), 2), showPicker = ref[0], realSetShowPicker = ref[1];
     var classes = useStyles();
     var ref1 = useTheme(), texts = ref1.texts;
     var fieldRef = React.useRef(null);
     var ref2 = useElementDimensions(), pickerContainerHeight = ref2.height, pickerContainerRef = ref2.ref;
+    var setShowPicker = function(show) {
+        if (!rest.disabled) {
+            realSetShowPicker(show);
+        }
+    };
     var getPickerContainerStyles = function() {
         var ref;
         var ref3 = ((ref = fieldRef.current) === null || ref === void 0 ? void 0 : ref.getBoundingClientRect()) || {
@@ -350,6 +355,7 @@ var DateTimePicker = function(_param) {
             }));
         }
         return(/*#__PURE__*/ _jsx(IconButton, {
+            disabled: rest.disabled,
             "aria-label": "",
             size: 32,
             onPress: function() {
@@ -361,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) {