@telefonica/mistica 9.17.0 → 10.2.0

package/dist/navigation-bar.js.flow

@@ -0,0 +1,62 @@
+// @flow
+
+import * as React from "react";
+import type { Props as TouchableProps } from "./touchable";
+declare type NavigationBarLogoProps = { size?: number };
+declare export var NavigationBarLogo: React.ComponentType<NavigationBarLogoProps>;
+declare type MainNavigationBarSection =
+  | {
+  href: string,
+  title: string,
+}
+  | {
+  to: string,
+  title: string,
+}
+  | {
+  onPress: () => void,
+  title: string,
+};
+declare type MainNavigationBarProps = {
+  sections: Array<MainNavigationBarSection>,
+  selectedIndex?: number,
+  right?: React.Element<any>,
+  logo?: React.Element<any>,
+  isInverse?: boolean,
+  topFixed?: boolean,
+};
+declare export var MainNavigationBar: React.ComponentType<MainNavigationBarProps>;
+declare type NavigationBarCommonProps = {|
+  isInverse?: boolean,
+  onBack?: () => void,
+  title?: string,
+  right?: React.Element<any>,
+|};
+declare type NavigationBarTopFixedProps = {|
+  ...$Exact<NavigationBarCommonProps>,
+  topFixed?: true,
+|};
+declare type NavigationBarNotFixedProps = {|
+  ...$Exact<NavigationBarCommonProps>,
+
+  topFixed: false,
+  paddingX?: number,
+|};
+declare type NavigationBarProps =
+  | NavigationBarTopFixedProps
+  | NavigationBarNotFixedProps;
+declare export var NavigationBar: React.ComponentType<NavigationBarProps>;
+declare type FunnelNavigationBarProps = {
+  isInverse?: boolean,
+  logo?: React.Element<any>,
+  right?: React.Element<any>,
+  topFixed?: boolean,
+};
+declare export var FunnelNavigationBar: React.ComponentType<FunnelNavigationBarProps>;
+declare type NavigationBarActionGroupProps = {
+  children: React.Node,
+};
+declare export var NavigationBarActionGroup: React.ComponentType<NavigationBarActionGroupProps>;
+declare type NavigationBarActionProps = TouchableProps;
+declare export var NavigationBarAction: React.ComponentType<NavigationBarActionProps>;
+declare export {};

package/dist/navigation-breadcrumbs.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type NavigationBreadcrumbsProps = {
+export declare type NavigationBreadcrumbsProps = {
     title: string;
     breadcrumbs: ReadonlyArray<{
         readonly title: string;

package/dist/navigation-breadcrumbs.js.flow

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from "react";
-declare type NavigationBreadcrumbsProps = {
+export type NavigationBreadcrumbsProps = {
   title: string,
   breadcrumbs: $ReadOnlyArray<{
     +title: string,

package/dist/password-field.js

@@ -161,9 +161,9 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var usePasswordAdornmentStyles = (0, _jss.createUseStyles)(function () {
+var usePasswordAdornmentStyles = (0, _jss.createUseStyles)(function (theme) {
   return {
-    shadow: _defineProperty({}, '@media (hover: hover)', {
+    shadow: _defineProperty({}, theme.mq.supportsHover, {
       '&:hover': {
         backgroundColor: 'rgba(0, 0, 0, 0.08)'
       }
@@ -188,7 +188,7 @@ var PasswordAdornment = function PasswordAdornment(_ref) {
     backgroundColor: undefined
   };
   return /*#__PURE__*/React.createElement(_iconButton.default, {
-    label: texts.togglePasswordVisibilityLabel,
+    "aria-label": texts.togglePasswordVisibilityLabel,
     onPress: function onPress() {
       setVisibility(!isVisible);
       focus();
@@ -220,6 +220,8 @@ var PasswordField = function PasswordField(_ref2) {
       isVisible = _React$useState2[0],
       setIsVisible = _React$useState2[1];
 
+  var caretPositionRef = React.useRef(0);
+
   var _inputRef = React.useRef(null);
 
   var processValue = function processValue(value) {
@@ -230,16 +232,22 @@ var PasswordField = function PasswordField(_ref2) {
     var input = _inputRef.current;
 
     if (input) {
-      input.focus(); // neeeded to place the caret at the end
+      if (input.selectionStart !== null) {
+        caretPositionRef.current = input.selectionStart;
+      }
 
-      setTimeout(function () {
-        var v = input.value;
-        input.value = '';
-        input.value = v;
-      }, 0);
+      input.focus();
     }
   };
 
+  React.useEffect(function () {
+    var input = _inputRef.current;
+
+    if (input) {
+      input.selectionStart = caretPositionRef.current;
+      input.selectionEnd = caretPositionRef.current;
+    }
+  }, [isVisible, caretPositionRef, _inputRef]);
   var fieldProps = (0, _formContext.useFieldProps)({
     name: name,
     value: value,

package/dist/phone-number-field.js

@@ -32,59 +32,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var _excluded = ["inputRef", "value", "defaultValue", "onChange", "prefix", "e164"],
     _excluded2 = ["disabled", "error", "helperText", "name", "optional", "validate", "onChange", "onChangeValue", "onBlur", "value", "defaultValue", "e164"];
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 function _extends() {
   _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -336,9 +283,9 @@ var PhoneNumberField = function PhoneNumberField(_ref2) {
   });
   return /*#__PURE__*/React.createElement(_textFieldBase.default, _extends({}, rest, fieldProps, {
     type: "phone",
-    inputProps: _objectSpread(_objectSpread({}, rest.inputProps), {}, {
+    inputProps: {
       prefix: rest.prefix
-    }),
+    },
     inputComponent: PhoneInput
   }));
 };

package/dist/popover.js

@@ -395,7 +395,7 @@ var Popover = function Popover(_ref2) {
     }, /*#__PURE__*/React.createElement(_iconButton.default, {
       onPress: handleClose,
       trackingEvent: trackingEvent,
-      label: texts.modalClose
+      "aria-label": texts.modalClose
     }, /*#__PURE__*/React.createElement(_iconClose.default, {
       color: colors.neutralHigh
     })))));

package/dist/radio-button.d.ts

@@ -12,7 +12,7 @@ export declare const useRadioContext: () => RadioContextType;
 declare type PropsRender = {
     value: string;
     id?: string;
-    render: (radioElement: React.ReactElement<any>, disabled?: boolean) => React.ReactNode;
+    render: (radioElement: React.ReactElement, disabled?: boolean) => React.ReactNode;
     children?: undefined;
     dataAttributes?: DataAttributes;
 };

package/dist/search-field.js

@@ -211,7 +211,7 @@ var SearchField = function SearchField(_ref) {
         padding: 12,
         margin: -12
       },
-      label: theme.texts.formSearchClear,
+      "aria-label": theme.texts.formSearchClear,
       onPress: clearInput
     }, /*#__PURE__*/React.createElement(_iconClose.default, null)) : undefined
   }, rest, fieldProps, {

package/dist/section-title.d.ts

@@ -1,9 +1,10 @@
 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<typeof TextLink>;
+    right?: React.ReactElement<TextLinkProps, typeof TextLink>;
     as?: 'h1' | 'h2' | 'h3' | 'h4';
 };
 declare const SectionTitle: React.FC<Props>;

package/dist/select.d.ts

@@ -7,10 +7,6 @@ export declare type SelectProps = {
     label: string;
     name: string;
     optional?: boolean;
-    /** @deprecated */
-    inputProps?: {
-        [prop: string]: string;
-    };
     validate?: (value: string | void, rawValue: string | void) => string | void;
     onChangeValue?: (value: string) => void;
     onBlur?: (event: React.FocusEvent<any>) => void;

package/dist/select.js

@@ -132,7 +132,7 @@ function _defineProperty(obj, key, value) {
 }
 
 var useStyles = (0, _jss.createUseStyles)(function (theme) {
-  var _selectContainer;
+  var _selectContainer, _menuItem;
 
   return {
     selectContainer: (_selectContainer = {
@@ -171,7 +171,7 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
       height: '100%',
       textOverflow: 'ellipsis',
       '&:disabled': {
-        color: theme.colors.border
+        color: theme.colors.textDisabled
       },
       appearance: 'none',
       cursor: function cursor(_ref5) {
@@ -188,7 +188,11 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
     selectText: {
       position: 'absolute',
       pointerEvents: 'none',
-      left: 12,
+      left: 12 + 1,
+      // 12 for select paddingLeft and +1 for border
+      right: 48 + 1,
+      // 48 for icon and +1 for border
+      overflow: 'hidden',
       top: function top(_ref6) {
         var label = _ref6.label;
         return label ? 27 : 17;
@@ -199,7 +203,8 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
         return disabled ? theme.colors.textDisabled : theme.colors.textPrimary;
       },
       maxWidth: '100%',
-      textOverflow: 'ellipsis'
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
     },
     optionsContainer: {
       margin: 0,
@@ -214,7 +219,7 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
         var optionsComputedProps = _ref9.optionsComputedProps;
         return optionsComputedProps.left;
       },
-      width: function width(_ref10) {
+      minWidth: function minWidth(_ref10) {
         var optionsComputedProps = _ref10.optionsComputedProps;
         return optionsComputedProps.width;
       },
@@ -247,19 +252,17 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
     menuItemSelected: {
       backgroundColor: 'rgba(0, 0, 0, 0.14)'
     },
-    menuItem: {
+    menuItem: (_menuItem = {
       color: theme.colors.textPrimary,
       lineHeight: 1.5,
       padding: '6px 16px',
       height: 48,
-      transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+      transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
+    }, _defineProperty(_menuItem, theme.mq.supportsHover, {
       '&:hover': {
         backgroundColor: 'rgba(0, 0, 0, 0.08)'
-      },
-      display: 'flex',
-      alignItems: 'center',
-      cursor: 'pointer'
-    }
+      }
+    }), _defineProperty(_menuItem, "display", 'flex'), _defineProperty(_menuItem, "alignItems", 'center'), _defineProperty(_menuItem, "cursor", 'pointer'), _menuItem)
   };
 });
 
@@ -277,7 +280,6 @@ var Select = function Select(_ref15) {
       optional = _ref15.optional,
       disabledProp = _ref15.disabled,
       errorProp = _ref15.error,
-      inputProps = _ref15.inputProps,
       _onBlur = _ref15.onBlur,
       _ref15$autoFocus = _ref15.autoFocus,
       autoFocus = _ref15$autoFocus === void 0 ? false : _ref15$autoFocus,
@@ -331,7 +333,8 @@ var Select = function Select(_ref15) {
       register = _useForm.register;
 
   var _useTheme = (0, _hooks.useTheme)(),
-      platformOverrides = _useTheme.platformOverrides;
+      platformOverrides = _useTheme.platformOverrides,
+      colors = _useTheme.colors;
 
   var shouldUseNative = native || process.env.NODE_ENV === 'test' || (0, _platform.isAndroid)(platformOverrides) || (0, _platform.isIos)(platformOverrides);
   var disabled = disabledProp || formStatus === 'sending';
@@ -570,6 +573,9 @@ var Select = function Select(_ref15) {
       }
     }
   };
+  var arrowIcon = /*#__PURE__*/React.createElement(_iconArrowDown.default, {
+    color: disabledProp ? colors.neutralLow : undefined
+  });
   return shouldUseNative ? /*#__PURE__*/React.createElement(_textFieldComponents.FieldContainer, {
     helperText: /*#__PURE__*/React.createElement(_textFieldComponents.HelperText, {
       error: error,
@@ -583,7 +589,7 @@ var Select = function Select(_ref15) {
     inputState: isFocused ? 'focused' : ((_ref19 = value !== null && value !== void 0 ? value : valueState) !== null && _ref19 !== void 0 ? _ref19 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) ? 'filled' : 'default',
     disabled: disabled,
     optional: optional
-  }, label), /*#__PURE__*/React.createElement("select", _extends({}, inputProps, {
+  }, label), /*#__PURE__*/React.createElement("select", {
     className: classes.select,
     id: inputId,
     "aria-invalid": !!error,
@@ -613,7 +619,7 @@ var Select = function Select(_ref15) {
       // Without this fix, the label is invisible when disabled
       opacity: 1
     }
-  }), options.every(function (_ref20) {
+  }, options.every(function (_ref20) {
     var value = _ref20.value;
     return !!value;
   }) &&
@@ -635,7 +641,7 @@ var Select = function Select(_ref15) {
   })), /*#__PURE__*/React.createElement("div", {
     className: classes.arrowDown,
     "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(_iconArrowDown.default, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+  }, arrowIcon)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
     className: classes.selectContainer,
     role: "button",
     "aria-haspopup": "listbox",
@@ -645,7 +651,7 @@ var Select = function Select(_ref15) {
       visibility: 'hidden'
     },
     fullWidth: fullWidth,
-    endIcon: /*#__PURE__*/React.createElement(_iconArrowDown.default, null),
+    endIcon: arrowIcon,
     focus: isFocused,
     label: label,
     value: value,
@@ -656,7 +662,6 @@ var Select = function Select(_ref15) {
     disabled: disabled,
     id: inputId,
     error: error,
-    inputProps: inputProps,
     inputRef: inputRef,
     fieldRef: fieldRef
   }), /*#__PURE__*/React.createElement("div", {

package/dist/select.js.flow

@@ -9,10 +9,6 @@ export type SelectProps = {
   label: string,
   name: string,
   optional?: boolean,
-  /**
-   * @deprecated
-   */
-  inputProps?: { [prop: string]: string, ... },
   validate?: (value: string | void, rawValue: string | void) => string | void,
   onChangeValue?: (value: string) => void,
   onBlur?: (event: SyntheticFocusEvent<any>) => void,

package/dist/skins/movistar.js

@@ -111,8 +111,6 @@ var getMovistarSkin = function getMovistarSkin(variant) {
       controlError: palette.pepper,
       loadingBar: palette.movistarBlueLight50,
       loadingBarBackground: palette.movistarBlueDark,
-      loadingBarBackgroundInverse: palette.movistarBlueDark,
-      loadingBarInverse: palette.movistarBlueLight50,
       toggleAndroidInactive: palette.grey2,
       // web only
       toggleAndroidBackgroundActive: palette.movistarBlueLight30,
@@ -140,7 +138,7 @@ var getMovistarSkin = function getMovistarSkin(variant) {
       textPrimaryInverse: palette.white,
       textSecondary: palette.grey5,
       textSecondaryInverse: palette.white,
-      textDisabled: palette.grey3,
+      textDisabled: palette.grey4,
       textAmount: palette.movistarBlue,
       // STATES
       error: palette.pepper,
@@ -207,8 +205,6 @@ var getMovistarSkin = function getMovistarSkin(variant) {
       controlActivated: palette.movistarBlue,
       loadingBar: palette.movistarBlue,
       loadingBarBackground: (0, _color.applyAlpha)(palette.white, 0.05),
-      loadingBarBackgroundInverse: palette.movistarGreenDark,
-      loadingBarInverse: palette.movistarGreenLight50,
       toggleAndroidInactive: palette.grey4,
       // web only
       toggleAndroidBackgroundActive: palette.movistarBlueLight30,

package/dist/skins/o2-classic.js

@@ -144,7 +144,7 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
       textPrimaryInverse: palette.white,
       textSecondary: palette.grey5,
       textSecondaryInverse: palette.white,
-      textDisabled: palette.grey3,
+      textDisabled: palette.grey4,
       textAmount: palette.o2SkyBlue,
       // STATES
       error: palette.pepper,

package/dist/skins/o2.js

@@ -144,7 +144,7 @@ var getO2Skin = function getO2Skin() {
       textPrimaryInverse: palette.white,
       textSecondary: palette.grey5,
       textSecondaryInverse: palette.white,
-      textDisabled: palette.grey3,
+      textDisabled: palette.grey4,
       textAmount: palette.o2BluePrimary,
       // STATES
       error: palette.pepper,

package/dist/skins/telefonica.js

@@ -138,7 +138,7 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
       textPrimaryInverse: palette.white,
       textSecondary: palette.grey5,
       textSecondaryInverse: palette.white,
-      textDisabled: palette.grey3,
+      textDisabled: palette.grey4,
       textAmount: palette.telefonicaBlue,
       // STATES
       error: palette.coral,

package/dist/skins/types.d.ts

@@ -46,10 +46,6 @@ export declare type Colors = {
     controlError: string;
     loadingBar: string;
     loadingBarBackground: string;
-    /** @deprecated */
-    loadingBarBackgroundInverse: string;
-    /** @deprecated */
-    loadingBarInverse: string;
     toggleAndroidInactive: string;
     toggleAndroidBackgroundActive: string;
     iosControlKnob: string;

package/dist/skins/types.js.flow

@@ -48,16 +48,6 @@ export type Colors = {
   controlError: string,
   loadingBar: string,
   loadingBarBackground: string,
-
-  /**
-   * @deprecated
-   */
-  loadingBarBackgroundInverse: string,
-
-  /**
-   * @deprecated
-   */
-  loadingBarInverse: string,
   toggleAndroidInactive: string,
   toggleAndroidBackgroundActive: string,
   iosControlKnob: string,

package/dist/skins/vivo.js

@@ -132,7 +132,7 @@ var getVivoSkin = function getVivoSkin() {
       textPrimaryInverse: palette.white,
       textSecondary: palette.grey5,
       textSecondaryInverse: palette.white,
-      textDisabled: palette.grey3,
+      textDisabled: palette.grey4,
       textAmount: palette.vivoPurple,
       // STATES
       error: palette.pepper,

package/dist/switch-component.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { DataAttributes } from './utils/types';
-declare type RenderSwitch = (switchElement: React.ReactElement<any>, labelId: string) => React.ReactNode;
+declare type RenderSwitch = (switchElement: React.ReactElement, labelId: string) => React.ReactNode;
 declare type PropsRender = {
     name: string;
     defaultChecked?: boolean;

package/dist/tabs.js

@@ -111,6 +111,8 @@ var TAB_MAX_WIDTH = 284;
 var TAB_HEIGHT = 56;
 var LINE_ANIMATION_DURATION_MS = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300;
 var useStyles = (0, _jss.createUseStyles)(function (_ref) {
+  var _tab;
+
   var colors = _ref.colors,
       mq = _ref.mq;
   return {
@@ -138,7 +140,7 @@ var useStyles = (0, _jss.createUseStyles)(function (_ref) {
       height: TAB_HEIGHT,
       display: 'flex'
     },
-    tab: _defineProperty({
+    tab: (_tab = {
       flex: '1 0 80px',
       display: 'inline-flex',
       alignItems: 'center',
@@ -160,19 +162,19 @@ var useStyles = (0, _jss.createUseStyles)(function (_ref) {
         }
 
         return TAB_MAX_WIDTH;
-      },
+      }
+    }, _defineProperty(_tab, mq.supportsHover, {
       '&:hover': {
         color: colors.textPrimary
-      },
-      fallbacks: {
-        maxWidth: TAB_MAX_WIDTH // max() is not supported by all browsers
-
       }
-    }, mq.desktopOrBigger, {
+    }), _defineProperty(_tab, "fallbacks", {
+      maxWidth: TAB_MAX_WIDTH // max() is not supported by all browsers
+
+    }), _defineProperty(_tab, mq.desktopOrBigger, {
       flex: '0 1 208px',
       padding: "16px 32px",
       maxWidth: TAB_MAX_WIDTH
-    }),
+    }), _tab),
     tabWithIcon: _defineProperty({
       flexBasis: 112
     }, mq.desktopOrBigger, {

package/dist/tag.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-declare type Props = {
+export declare type TagProps = {
     children: string;
     color: string;
 };
-declare const Tag: React.FC<Props>;
+declare const Tag: React.FC<TagProps>;
 export default Tag;

package/dist/tag.js.flow

@@ -1,9 +1,9 @@
 // @flow
 
 import * as React from "react";
-declare type Props = {
+export type TagProps = {
   children: string,
   color: string,
 };
-declare var Tag: React.ComponentType<Props>;
+declare var Tag: React.ComponentType<TagProps>;
 declare export default typeof Tag;

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

@@ -15,10 +15,6 @@ export interface CommonFormFieldProps {
     name: string;
     optional?: boolean;
     maxLength?: number;
-    /** @deprecated */
-    inputProps?: {
-        [prop: string]: string | number | undefined;
-    };
     validate?: FieldValidator;
     autoComplete?: AutoComplete;
     onFocus?: (event: React.FocusEvent) => void;

package/dist/text-field-base.js

@@ -244,7 +244,7 @@ var commonInputStyles = function commonInputStyles(theme) {
       }
     },
     '&:disabled': {
-      color: theme.colors.border
+      color: theme.colors.textDisabled
     },
     boxShadow: 'none' // reset FF red shadow styles for required inputs
 
@@ -476,6 +476,25 @@ var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref11, ref
     autoComplete: fixAutoComplete(platformOverrides, autoCompleteProp)
   }, inputProps);
 
+  var labelStyle = {};
+  var isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
+
+  if (startIcon) {
+    labelStyle = isShrinked ? {
+      left: 48,
+      right: 0,
+      width: 'auto'
+    } : {
+      left: 48,
+      right: 12,
+      width: 'auto'
+    };
+  } else if (endIcon && !isShrinked) {
+    labelStyle = {
+      paddingRight: 36
+    };
+  }
+
   return /*#__PURE__*/React.createElement(_textFieldComponents.FieldContainer, {
     helperText: /*#__PURE__*/React.createElement(_textFieldComponents.HelperText, {
       error: error,
@@ -522,10 +541,7 @@ var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref11, ref
   }, error && {
     'aria-invalid': true
   })), label && /*#__PURE__*/React.createElement(_textFieldComponents.Label, {
-    style: startIcon ? {
-      marginLeft: 48,
-      left: 0
-    } : {},
+    style: labelStyle,
     error: error,
     forId: id,
     inputState: inputState,

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

@@ -42,10 +42,6 @@ export type CommonFormFieldProps = {|
   name: string,
   optional?: boolean,
   maxLength?: number,
-  /**
-   * @deprecated
-   */
-  inputProps?: { [prop: string]: string | number | void, ... },
   validate?: FieldValidator,
   autoComplete?: AutoComplete,
   onFocus?: (event: SyntheticFocusEvent<>) => void,