@telefonica/mistica 10.15.0 → 10.19.0

package/dist/index.js

@@ -566,6 +566,12 @@ Object.defineProperty(exports, "Image", {
         return _image.default;
     }
 });
+Object.defineProperty(exports, "Video", {
+    enumerable: true,
+    get: function() {
+        return _video.default;
+    }
+});
 Object.defineProperty(exports, "Form", {
     enumerable: true,
     get: function() {
@@ -584,6 +590,12 @@ Object.defineProperty(exports, "TextField", {
         return _textField.default;
     }
 });
+Object.defineProperty(exports, "TextFieldBase", {
+    enumerable: true,
+    get: function() {
+        return _textFieldBase.TextFieldBase;
+    }
+});
 Object.defineProperty(exports, "SearchField", {
     enumerable: true,
     get: function() {
@@ -680,6 +692,12 @@ Object.defineProperty(exports, "useForm", {
         return _formContext.useForm;
     }
 });
+Object.defineProperty(exports, "useFieldProps", {
+    enumerable: true,
+    get: function() {
+        return _formContext.useFieldProps;
+    }
+});
 Object.defineProperty(exports, "IconClose", {
     enumerable: true,
     get: function() {
@@ -8286,9 +8304,11 @@ var _callout = _interopRequireDefault(require("./callout"));
 var _modalContextProvider = require("./modal-context-provider");
 var _navigationBar = require("./navigation-bar");
 var _image = _interopRequireDefault(require("./image"));
+var _video = _interopRequireDefault(require("./video"));
 var _form = _interopRequireDefault(require("./form"));
 var _select = _interopRequireDefault(require("./select"));
 var _textField = _interopRequireDefault(require("./text-field"));
+var _textFieldBase = require("./text-field-base");
 var _searchField = _interopRequireDefault(require("./search-field"));
 var _emailField = _interopRequireDefault(require("./email-field"));
 var _phoneNumberField = _interopRequireDefault(require("./phone-number-field"));

package/dist/index.js.flow

@@ -98,9 +98,11 @@ declare export {
   NavigationBarLogo,
 } from "./navigation-bar";
 declare export { default as Image } from "./image";
+declare export { default as Video } from "./video";
 declare export { default as Form } from "./form";
 declare export { default as Select } from "./select";
 declare export { default as TextField } from "./text-field";
+declare export { TextFieldBase } from "./text-field-base";
 declare export { default as SearchField } from "./search-field";
 declare export { default as EmailField } from "./email-field";
 declare export { default as PhoneNumberField } from "./phone-number-field";
@@ -116,7 +118,7 @@ declare export { default as DecimalField } from "./decimal-field";
 declare export { default as PasswordField } from "./password-field";
 declare export { default as DoubleField } from "./double-field";
 declare export { default as IbanField } from "./iban-field";
-declare export { useForm } from "./form-context";
+declare export { useForm, useFieldProps } from "./form-context";
 declare export { default as IconClose } from "./icons/icon-close";
 declare export { default as IconInfo } from "./icons/icon-info";
 declare export { default as IconArrowDown } from "./icons/icon-arrow-down";

package/dist/integer-field.js

@@ -6,12 +6,7 @@ exports.default = exports.IntegerInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+var _textFieldBase = require("./text-field-base");
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -137,7 +132,7 @@ var IntegerField = function IntegerField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: IntegerInput
     })));

package/dist/menu.d.ts

@@ -6,7 +6,7 @@ declare type MenuRenderProps = {
 };
 declare type TargetRenderProps = {
     ref: (element: HTMLElement | null) => void;
-    onPress: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    onPress: () => void;
     isMenuOpen: boolean;
 };
 export declare type MenuProps = {

package/dist/menu.js

@@ -6,9 +6,9 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _keyCodes = require("./utils/key-codes");
-var _overlay = _interopRequireDefault(require("./overlay"));
 var _jss = require("./jss");
 var _dom = require("./utils/dom");
+var _overlay = _interopRequireDefault(require("./overlay"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -103,6 +103,7 @@ var useStyles = (0, _jss).createUseStyles(function(param) {
     var colors = param.colors;
     return {
         menuContainer: {
+            zIndex: 12,
             margin: 0,
             padding: 0,
             listStyleType: 'none',
@@ -111,13 +112,17 @@ var useStyles = (0, _jss).createUseStyles(function(param) {
                 var itemsComputedProps = param.itemsComputedProps;
                 return itemsComputedProps.top;
             },
-            left: function left(param) {
+            bottom: function bottom(param) {
+                var itemsComputedProps = param.itemsComputedProps;
+                return itemsComputedProps.bottom;
+            },
+            right: function right(param) {
                 var itemsComputedProps = param.itemsComputedProps;
-                return itemsComputedProps.left;
+                return itemsComputedProps.right;
             },
             width: function width(param) {
-                var itemsComputedProps = param.itemsComputedProps, width1 = param.width;
-                return width1 !== null && width1 !== void 0 ? width1 : itemsComputedProps.width;
+                var width1 = param.width;
+                return width1 !== null && width1 !== void 0 ? width1 : '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)',
@@ -158,28 +163,27 @@ var Menu = function Menu(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'
                 });
@@ -187,9 +191,9 @@ var Menu = function Menu(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'
             });
@@ -257,20 +261,23 @@ var Menu = function Menu(param) {
             document.removeEventListener('keydown', handleKeyDown, false);
         };
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
+        style: {
+            position: 'relative'
+        },
         children: [
-            renderTarget(_objectSpread({
-            }, targetProps, {
-                isMenuOpen: isMenuOpen
-            })),
             isMenuOpen ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_overlay.default, {
                 onPress: function onPress(e) {
-                    setIsMenuOpen(false);
                     (0, _dom).cancelEvent(e);
+                    setIsMenuOpen(false);
                 },
-                disableScroll: true,
-                children: renderMenu(menuProps)
-            }) : null
+                disableScroll: true
+            }) : null,
+            renderTarget(_objectSpread({
+            }, targetProps, {
+                isMenuOpen: isMenuOpen
+            })),
+            isMenuOpen ? renderMenu(menuProps) : null
         ]
     }));
 };

package/dist/menu.js.flow

@@ -8,7 +8,7 @@ declare type MenuRenderProps = {
 };
 declare type TargetRenderProps = {
   ref: (element: HTMLElement | null) => void,
-  onPress: (event: SyntheticMouseEvent<> | SyntheticKeyboardEvent<>) => void,
+  onPress: () => void,
   isMenuOpen: boolean,
 };
 export type MenuProps = {

package/dist/month-field.js

@@ -6,7 +6,7 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _dom = require("./utils/dom");
 var _environment = require("./utils/environment");
 var _iconCalendarRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-calendar-regular"));
@@ -163,7 +163,7 @@ var DateField = function DateField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         min: min ? (0, _time).getLocalYearMonthString(min) : undefined,
         max: max ? (0, _time).getLocalYearMonthString(max) : undefined,

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = '10.15.0';
+var PACKAGE_VERSION = '10.19.0';
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/password-field.js

@@ -6,7 +6,7 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _hooks = require("./hooks");
 var _iconButton = _interopRequireDefault(require("./icon-button"));
 var _iconVisibility = _interopRequireDefault(require("./icons/icon-visibility"));
@@ -221,7 +221,7 @@ var PasswordField = function PasswordField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: isVisible ? 'text' : 'password',
         inputRef: function inputRef1(field) {

package/dist/phone-number-field.js

@@ -8,15 +8,10 @@ var React = _interopRequireWildcard(require("react"));
 var _rifm = require("rifm");
 var _libphonenumber = require("@telefonica/libphonenumber");
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _hooks = require("./hooks");
 var _dom = require("./utils/dom");
 var _common = require("./utils/common");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -252,7 +247,7 @@ var PhoneNumberField = function PhoneNumberField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: "phone",
         inputProps: {

package/dist/search-field.js

@@ -6,7 +6,7 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _iconSearch = _interopRequireDefault(require("./icons/icon-search"));
 var _iconCloseRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular"));
 var _iconButton = _interopRequireDefault(require("./icon-button"));
@@ -185,7 +185,7 @@ var SearchField = function SearchField(_param) {
         onChange: onChange,
         onChangeValue: handleChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
         ref: inputRef,
         startIcon: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconSearch.default, {
         }),

package/dist/section-title.d.ts

@@ -1,10 +1,8 @@
 import * as React from 'react';
-import TextLink from './text-link';
-import type { TextLinkProps } from './text-link';
 declare type Props = {
     children: React.ReactNode;
     id?: string;
-    right?: React.ReactElement<TextLinkProps, typeof TextLink>;
+    right?: React.ReactNode;
     as?: 'h1' | 'h2' | 'h3' | 'h4';
 };
 declare const SectionTitle: React.FC<Props>;

package/dist/section-title.js.flow

@@ -1,11 +1,10 @@
 // @flow
 
 import * as React from "react";
-import TextLink from "./text-link";
 declare type Props = {
   children: React.Node,
   id?: string,
-  right?: React.Element<typeof TextLink>,
+  right?: React.Node,
   as?: "h1" | "h2" | "h3" | "h4",
 };
 declare var SectionTitle: React.ComponentType<Props>;

package/dist/select.js

@@ -10,7 +10,7 @@ var _hooks = require("./hooks");
 var _keyCodes = require("./utils/key-codes");
 var _textFieldComponents = require("./text-field-components");
 var _iconChevronDownRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-chevron-down-regular"));
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _overlay = _interopRequireDefault(require("./overlay"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _platform = require("./utils/platform");
@@ -548,7 +548,7 @@ var Select = function Select(param) {
                 ref: focusableRef
             }, !disabled && containerActiveProps, {
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, {
+                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, {
                         style: {
                             visibility: 'hidden'
                         },

package/dist/text-field-base.d.ts

@@ -71,5 +71,6 @@ interface TextFieldBaseProps {
     min?: string;
     max?: string;
 }
-declare const TextFieldBase: React.ForwardRefExoticComponent<TextFieldBaseProps & React.RefAttributes<any>>;
-export default TextFieldBase;
+export declare const TextFieldBase: React.ForwardRefExoticComponent<TextFieldBaseProps & React.RefAttributes<any>>;
+export declare const TextFieldBaseAutosuggest: React.ForwardRefExoticComponent<TextFieldBaseProps & React.RefAttributes<any>>;
+export {};

package/dist/text-field-base.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.default = void 0;
+exports.TextFieldBase = exports.TextFieldBaseAutosuggest = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _jss = require("./jss");
@@ -315,11 +315,7 @@ var useStyles = (0, _jss).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 fixAutoComplete(platformOverrides, autoComplete) {
-    return autoComplete === 'off' && (0, _platform).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",
@@ -346,7 +342,7 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
     ]);
     var id = (0, _hooks).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 = (0, _hooks).useTheme(), platformOverrides = ref2.platformOverrides, colors = ref2.colors;
+    var ref2 = (0, _hooks).useTheme(), colors = ref2.colors;
     var ref3 = (0, _hooks).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];
@@ -403,7 +399,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 ? _textFieldComponents.LABEL_SCALE_MOBILE : _textFieldComponents.LABEL_SCALE_DESKTOP : 1;
@@ -493,6 +489,7 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
         ]
     }));
 });
+exports.TextFieldBase = TextFieldBase;
 var useSuggestionsStyles = (0, _jss).createUseStyles(function() {
     return {
         menuItem: {
@@ -527,7 +524,7 @@ var Autosuggest = /*#__PURE__*/ React.lazy(function() {
         return _interopRequireWildcard(require(/* 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"
@@ -542,13 +539,13 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         throw Error('Fields with suggestions must be used in controlled mode');
     }
     return getSuggestions ? /*#__PURE__*/ (0, _jsxRuntime).jsx(React.Suspense, {
-        fallback: /*#__PURE__*/ (0, _jsxRuntime).jsx(TextFieldBaseComponent, _objectSpread({
+        fallback: /*#__PURE__*/ (0, _jsxRuntime).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: (0, _platform).isRunningAcceptanceTest(platformOverrides) ? '' : props.label,
-            autoComplete: fixAutoComplete(platformOverrides, 'off'),
+            autoComplete: "off",
             ref: ref,
             id: id
         })),
@@ -557,7 +554,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 onChange(e, param) {
                     var newValue = param.newValue;
@@ -575,7 +572,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 }
             }),
             renderInputComponent: function renderInputComponent(inputProps) {
-                /*#__PURE__*/ return (0, _jsxRuntime).jsx(TextFieldBaseComponent, _objectSpread({
+                /*#__PURE__*/ return (0, _jsxRuntime).jsx(TextFieldBase, _objectSpread({
                 }, inputProps, {
                     inputRef: (0, _common).combineRefs(inputRef, props.inputRef, ref)
                 }));
@@ -615,11 +612,10 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 }));
             }
         })
-    }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(TextFieldBaseComponent, _objectSpread({
+    }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(TextFieldBase, _objectSpread({
     }, props, {
         id: id,
         ref: ref
     }));
 });
-var _default = TextFieldBase;
-exports.default = _default;
+exports.TextFieldBaseAutosuggest = TextFieldBaseAutosuggest;

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

@@ -97,10 +97,14 @@ declare type TextFieldBaseProps = {
   min?: string,
   max?: string,
 };
-declare var TextFieldBase: React.ComponentType<{
+declare export var TextFieldBase: React.ComponentType<{
   ...TextFieldBaseProps,
   ...{},
 }>;
-declare export default typeof TextFieldBase;
+declare export var TextFieldBaseAutosuggest: React.ComponentType<{
+  ...TextFieldBaseProps,
+  ...{},
+}>;
+declare export {};
 
 import { type CssStyle } from "./__types__.js.flow";

package/dist/text-field.d.ts

@@ -2,10 +2,11 @@ import * as React from 'react';
 import type { CommonFormFieldProps } from './text-field-base';
 export interface TextFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: string, rawValue: string) => void;
+    onPress?: (event: React.MouseEvent) => void;
     multiline?: boolean;
     prefix?: React.ReactNode;
     endIcon?: React.ReactNode;
     getSuggestions?: (value: string) => Array<string>;
 }
-declare const TextField: React.FC<TextFieldProps>;
+declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default TextField;

package/dist/text-field.js

@@ -6,12 +6,8 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+var _textFieldBase = require("./text-field-base");
+var _common = require("./utils/common");
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -95,8 +91,8 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-var TextField = function TextField(_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, [
+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",
@@ -108,7 +104,8 @@ var TextField = function TextField(_param) {
         "value",
         "defaultValue",
         "onBlur",
-        "onFocus"
+        "onFocus",
+        "onPress"
     ]);
     var inputRef = React.useRef(null);
     var processValue = function processValue(v) {
@@ -150,16 +147,13 @@ var TextField = function TextField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var setInputRef = function setInputRef(field) {
-        inputRef.current = field;
-        fieldProps.inputRef(field);
-    };
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
-        inputRef: setInputRef,
+        onClick: onPress,
+        inputRef: (0, _common).combineRefs(inputRef, fieldProps.inputRef, ref),
         onFocus: onFocus,
         type: "text"
     })));
-};
+});
 var _default = TextField;
 exports.default = _default;

package/dist/text-field.js.flow

@@ -6,10 +6,14 @@ export type TextFieldProps = {
   ...$Exact<CommonFormFieldProps>,
 
   onChangeValue?: (value: string, rawValue: string) => void,
+  onPress?: (event: SyntheticMouseEvent<>) => void,
   multiline?: boolean,
   prefix?: React.Node,
   endIcon?: React.Node,
   getSuggestions?: (value: string) => Array<string>,
 };
-declare var TextField: React.ComponentType<TextFieldProps>;
+declare var TextField: React.ComponentType<{
+  ...TextFieldProps,
+  ref?: React.Ref<HTMLInputElement>,
+}>;
 declare export default typeof TextField;

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;