@telefonica/mistica 10.15.0 → 10.19.0

package/dist-es/menu.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { ESC, TAB } from './utils/key-codes';
-import Overlay from './overlay';
 import { createUseStyles } from './jss';
 import { cancelEvent } from './utils/dom';
+import Overlay from './overlay';
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
@@ -69,6 +69,7 @@ var useStyles = createUseStyles(function(param) {
     var colors = param.colors;
     return {
         menuContainer: {
+            zIndex: 12,
             margin: 0,
             padding: 0,
             listStyleType: 'none',
@@ -77,13 +78,17 @@ var useStyles = createUseStyles(function(param) {
                 var itemsComputedProps = param.itemsComputedProps;
                 return itemsComputedProps.top;
             },
-            left: function(param) {
+            bottom: function(param) {
+                var itemsComputedProps = param.itemsComputedProps;
+                return itemsComputedProps.bottom;
+            },
+            right: function(param) {
                 var itemsComputedProps = param.itemsComputedProps;
-                return itemsComputedProps.left;
+                return itemsComputedProps.right;
             },
             width: function(param) {
-                var itemsComputedProps = param.itemsComputedProps, width = param.width;
-                return width !== null && width !== void 0 ? width : itemsComputedProps.width;
+                var width = param.width;
+                return width !== null && width !== void 0 ? width : '100%';
             },
             borderRadius: 4,
             boxShadow: '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)',
@@ -124,28 +129,27 @@ var Menu = function(param) {
             return;
         }
         var MARGIN_THRESHOLD = 12;
-        var topTarget = targetRect.top, widthTarget = targetRect.width, left = targetRect.left, right = targetRect.right, height = targetRect.height;
+        var topTarget = targetRect.top, widthTarget = targetRect.width, height = targetRect.height;
         var top = topTarget + height;
         var ref;
         var spaceTaken = (ref = parseInt(window.getComputedStyle(menu).getPropertyValue('height'))) !== null && ref !== void 0 ? ref : 0;
-        var leftDirection = position === 'left' ? left : right - (width !== null && width !== void 0 ? width : widthTarget);
+        var rightDirection = position === 'left' ? 'auto' : "calc(100% - ".concat(widthTarget, "px)");
         // if it doesn't fit on bottom
         if (top + spaceTaken + MARGIN_THRESHOLD > window.innerHeight) {
             var availableSpaceBottom = window.innerHeight - top;
             if (topTarget /* this is the available space on top */  > availableSpaceBottom) {
-                var newTop = topTarget - spaceTaken;
                 setItemsComputedProps({
-                    width: widthTarget,
-                    left: leftDirection,
-                    top: Math.max(newTop, MARGIN_THRESHOLD),
-                    maxHeight: topTarget - MARGIN_THRESHOLD,
+                    right: rightDirection,
+                    bottom: '100%',
+                    top: 'auto',
+                    maxHeight: Math.min(topTarget, MAX_HEIGHT_DEFAULT),
                     transformOrigin: 'center bottom'
                 });
             } else {
                 setItemsComputedProps({
-                    width: widthTarget,
-                    top: top,
-                    left: leftDirection,
+                    top: '100%',
+                    bottom: 'auto',
+                    right: rightDirection,
                     maxHeight: Math.min(window.innerHeight - top - MARGIN_THRESHOLD, MAX_HEIGHT_DEFAULT),
                     transformOrigin: 'center top'
                 });
@@ -153,9 +157,9 @@ var Menu = function(param) {
         } else {
             // if it fits on bottom
             setItemsComputedProps({
-                width: widthTarget,
-                top: top,
-                left: leftDirection,
+                top: '100%',
+                bottom: 'auto',
+                right: rightDirection,
                 maxHeight: Math.min(window.innerHeight - top - MARGIN_THRESHOLD, MAX_HEIGHT_DEFAULT),
                 transformOrigin: 'center top'
             });
@@ -223,20 +227,23 @@ var Menu = function(param) {
             document.removeEventListener('keydown', handleKeyDown, false);
         };
     });
-    return(/*#__PURE__*/ _jsxs(_Fragment, {
+    return(/*#__PURE__*/ _jsxs("div", {
+        style: {
+            position: 'relative'
+        },
         children: [
-            renderTarget(_objectSpread({
-            }, targetProps, {
-                isMenuOpen: isMenuOpen
-            })),
             isMenuOpen ? /*#__PURE__*/ _jsx(Overlay, {
                 onPress: function(e) {
-                    setIsMenuOpen(false);
                     cancelEvent(e);
+                    setIsMenuOpen(false);
                 },
-                disableScroll: true,
-                children: renderMenu(menuProps)
-            }) : null
+                disableScroll: true
+            }) : null,
+            renderTarget(_objectSpread({
+            }, targetProps, {
+                isMenuOpen: isMenuOpen
+            })),
+            isMenuOpen ? renderMenu(menuProps) : null
         ]
     }));
 };

package/dist-es/month-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';
@@ -113,7 +113,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 ? getLocalYearMonthString(min) : undefined,
         max: max ? getLocalYearMonthString(max) : undefined,

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export var PACKAGE_VERSION = '10.15.0';
+export var PACKAGE_VERSION = '10.19.0';

package/dist-es/password-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 { useTheme } from './hooks';
 import IconButton from './icon-button';
 import Visibility from './icons/icon-visibility';
@@ -174,7 +174,7 @@ var PasswordField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: isVisible ? 'text' : 'password',
         inputRef: function(field) {

package/dist-es/phone-number-field.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useRifm } from 'rifm';
 import { formatAsYouType, formatToE164, parse, getRegionCodeForCountryCode } from '@telefonica/libphonenumber';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { useTheme } from './hooks';
 import { createChangeEvent } from './utils/dom';
 import { combineRefs } from './utils/common';
@@ -199,7 +199,7 @@ var PhoneNumberField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: "phone",
         inputProps: {

package/dist-es/search-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 IconSearch from './icons/icon-search';
 import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
 import IconButton from './icon-button';
@@ -139,7 +139,7 @@ var SearchField = function(_param) {
         onChange: onChange,
         onChangeValue: handleChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
         ref: inputRef,
         startIcon: /*#__PURE__*/ _jsx(IconSearch, {
         }),

package/dist-es/select.js

@@ -5,7 +5,7 @@ import { useAriaId, useTheme } from './hooks';
 import { DOWN, ENTER, ESC, SPACE, TAB, UP } from './utils/key-codes';
 import { FieldContainer, HelperText, Label } from './text-field-components';
 import ChevronDownRegular from './generated/mistica-icons/icon-chevron-down-regular';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import Overlay from './overlay';
 import classNames from 'classnames';
 import { isAndroid, isIos } from './utils/platform';
@@ -515,7 +515,7 @@ var Select = function(param) {
                 ref: focusableRef
             }, !disabled && containerActiveProps, {
                 children: [
-                    /*#__PURE__*/ _jsx(TextFieldBase, {
+                    /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, {
                         style: {
                             visibility: 'hidden'
                         },

package/dist-es/text-field-base.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { createUseStyles } from './jss';
 import { Label, HelperText, FieldContainer, LABEL_LEFT_POSITION, LABEL_SCALE_MOBILE, LABEL_SCALE_DESKTOP } from './text-field-components';
 import { Text3 } from './text';
-import { isIos, isRunningAcceptanceTest, isChrome, isFirefox } from './utils/platform';
+import { isIos, isRunningAcceptanceTest, isFirefox } from './utils/platform';
 import { useAriaId, useTheme, useScreenSize } from './hooks';
 import classNames from 'classnames';
 import { combineRefs } from './utils/common';
@@ -281,16 +281,12 @@ var useStyles = createUseStyles(function(theme) {
         }), _defineProperty(_obj2, "transition", 'opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms'), _obj2)
     };
 });
-// Chrome ignores 'off': https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164
-var fixAutoComplete = function(platformOverrides, autoComplete) {
-    return autoComplete === 'off' && isChrome(platformOverrides) ? 'nope' : autoComplete;
-};
-var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var error = _param.error, helperText = _param.helperText, label = _param.label, inputProps = _param.inputProps, inputRef = _param.inputRef, defaultValue = _param.defaultValue, value = _param.value, onFocus = _param.onFocus, onBlur = _param.onBlur, inputComponent = _param.inputComponent, prefix = _param.prefix, startIcon = _param.startIcon, endIcon = _param.endIcon, endIconOverlay = _param.endIconOverlay, shrinkLabelProp = _param.shrinkLabel, _multiline = _param.multiline, multiline = _multiline === void 0 ? false : _multiline, focus = _param.focus, fieldRef = _param.fieldRef, maxLength = _param.maxLength, idProp = _param.id, autoCompleteProp = _param.autoComplete, fullWidth = _param.fullWidth, rest = _objectWithoutProperties(_param, ["error", "helperText", "label", "inputProps", "inputRef", "defaultValue", "value", "onFocus", "onBlur", "inputComponent", "prefix", "startIcon", "endIcon", "endIconOverlay", "shrinkLabel", "multiline", "focus", "fieldRef", "maxLength", "id",
         "autoComplete", "fullWidth"]);
     var id = useAriaId(idProp);
     var ref1 = _slicedToArray(React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) ? 'filled' : 'default'), 2), inputState = ref1[0], setInputState = ref1[1];
-    var ref2 = useTheme(), platformOverrides = ref2.platformOverrides, colors = ref2.colors;
+    var ref2 = useTheme(), colors = ref2.colors;
     var ref3 = useScreenSize(), isTabletOrSmaller = ref3.isTabletOrSmaller;
     var ref4;
     var ref5 = _slicedToArray(React.useState((ref4 = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== null && ref4 !== void 0 ? ref4 : 0), 2), characterCount = ref5[0], setCharacterCount = ref5[1];
@@ -347,7 +343,7 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
     var props = _objectSpread({
     }, rest, {
         maxLength: maxLength,
-        autoComplete: fixAutoComplete(platformOverrides, autoCompleteProp)
+        autoComplete: autoCompleteProp
     }, inputProps);
     var isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
     var scale = isShrinked ? isTabletOrSmaller ? LABEL_SCALE_MOBILE : LABEL_SCALE_DESKTOP : 1;
@@ -437,6 +433,7 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
         ]
     }));
 });
+export { TextFieldBase };
 var useSuggestionsStyles = createUseStyles(function() {
     return {
         menuItem: {
@@ -469,7 +466,7 @@ var useSuggestionsStyles = createUseStyles(function() {
 var Autosuggest = /*#__PURE__*/ React.lazy(function() {
     return import(/* webpackChunkName: "react-autosuggest" */ 'react-autosuggest');
 });
-var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+var TextFieldBaseAutosuggest = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var getSuggestions = _param.getSuggestions, idProp = _param.id, props = _objectWithoutProperties(_param, ["getSuggestions", "id"
     ]);
     var ref1 = _slicedToArray(React.useState([]), 2), suggestions = ref1[0], setSuggestions = ref1[1];
@@ -482,13 +479,13 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         throw Error('Fields with suggestions must be used in controlled mode');
     }
     return getSuggestions ? /*#__PURE__*/ _jsx(React.Suspense, {
-        fallback: /*#__PURE__*/ _jsx(TextFieldBaseComponent, _objectSpread({
+        fallback: /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
         }, props, {
             // This label override while loading is needed in acceptance tests because
             // while the test is typing, the component could be remounted.
             // By hiding the label, we ensure that the test selects the loaded component
             label: isRunningAcceptanceTest(platformOverrides) ? '' : props.label,
-            autoComplete: fixAutoComplete(platformOverrides, 'off'),
+            autoComplete: "off",
             ref: ref,
             id: id
         })),
@@ -497,7 +494,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             inputProps: _objectSpread({
             }, props, {
                 id: id,
-                autoComplete: fixAutoComplete(platformOverrides, 'off'),
+                autoComplete: 'off',
                 // @ts-expect-error Autosuggest expects slightly different types
                 onChange: function(e, param) {
                     var newValue = param.newValue;
@@ -515,7 +512,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 }
             }),
             renderInputComponent: function(inputProps) {
-                /*#__PURE__*/ return _jsx(TextFieldBaseComponent, _objectSpread({
+                /*#__PURE__*/ return _jsx(TextFieldBase, _objectSpread({
                 }, inputProps, {
                     inputRef: combineRefs(inputRef, props.inputRef, ref)
                 }));
@@ -555,10 +552,10 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 }));
             }
         })
-    }) : /*#__PURE__*/ _jsx(TextFieldBaseComponent, _objectSpread({
+    }) : /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
     }, props, {
         id: id,
         ref: ref
     }));
 });
-export default TextFieldBase;
+export { TextFieldBaseAutosuggest };

package/dist-es/text-field.js

@@ -1,7 +1,8 @@
 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 { combineRefs } from './utils/common';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -61,10 +62,9 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-var TextField = function(_param) {
-    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validate = _param.validate, onChangeValue = _param.onChangeValue, onChange = _param.onChange, value = _param.value, defaultValue = _param.defaultValue, onBlurProp = _param.onBlur, onFocusProp = _param.onFocus, rest = _objectWithoutProperties(_param, ["disabled", "error", "helperText", "name", "optional", "validate", "onChangeValue", "onChange", "value", "defaultValue", "onBlur",
-        "onFocus"
-    ]);
+var TextField = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validate = _param.validate, onChangeValue = _param.onChangeValue, onChange = _param.onChange, value = _param.value, defaultValue = _param.defaultValue, onBlurProp = _param.onBlur, onFocusProp = _param.onFocus, onPress = _param.onPress, rest = _objectWithoutProperties(_param, ["disabled", "error", "helperText", "name", "optional", "validate", "onChangeValue", "onChange", "value", "defaultValue", "onBlur",
+        "onFocus", "onPress"]);
     var inputRef = React.useRef(null);
     var processValue = function(v) {
         return v;
@@ -105,15 +105,12 @@ var TextField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var setInputRef = function(field) {
-        inputRef.current = field;
-        fieldProps.inputRef(field);
-    };
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
-        inputRef: setInputRef,
+        onClick: onPress,
+        inputRef: combineRefs(inputRef, fieldProps.inputRef, ref),
         onFocus: onFocus,
         type: "text"
     })));
-};
+});
 export default TextField;

package/dist-es/video.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useDisableBorderRadius } from './image';
+import { createUseStyles } from './jss';
+import { combineRefs } from './utils/common';
+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;
+}
+export var RATIO = {
+    '1:1': 1,
+    '16:9': 16 / 9,
+    '12:5': 12 / 5
+};
+var useStyles = createUseStyles(function() {
+    return {
+        video: {
+            borderRadius: function(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
+            display: 'block',
+            maxWidth: '100%',
+            maxHeight: '100%',
+            objectFit: 'cover',
+            aspectRatio: function(param) {
+                var aspectRatio = param.aspectRatio;
+                return aspectRatio !== null && aspectRatio !== void 0 ? aspectRatio : '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 = 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__*/ _jsx("video", {
+        ref: 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 _jsx("source", {
+                src: src,
+                type: type
+            }, index);
+        })
+    }));
+});
+export default Video;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "10.15.0",
+    "version": "10.19.0",
     "license": "MIT",
     "repository": {
         "type": "git",