@gympass/yoga 7.65.0 → 7.66.1

package/esm/Input/native/Email.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, Input } from '../..';
+describe('<Input.Email />', function () {
+  describe('Snapshots', function () {
+    it('should match with default input', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Email, null))),
+          toJSON = _render.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/esm/Input/native/Helper.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+import { string, bool, number } from 'prop-types';
+import Text from '../../Text';
+var HelperWrapper = styled.View(function (_ref) {
+  var full = _ref.full,
+      input = _ref.theme.yoga.components.input;
+  return "\n    width: " + (full ? '100%' : input.width + "px") + ";\n    max-width: " + input.width + "px;\n    flex-direction: row;\n    justify-content: space-between;\n\n    margin-top: " + input.helper.margin.top + "px;\n  ";
+});
+var Info = styled(Text.Regular)(function (_ref2) {
+  var disabled = _ref2.disabled,
+      focused = _ref2.focused,
+      error = _ref2.error,
+      _ref2$theme$yoga = _ref2.theme.yoga,
+      colors = _ref2$theme$yoga.colors,
+      input = _ref2$theme$yoga.components.input;
+  return "\n    flex-wrap: wrap;\n\n    color: " + input.helper.color["default"] + ";\n    font-size: " + input.helper.font.size + "px;\n\n    " + (disabled ? "color: " + colors.text.disabled + ";" : '') + "\n    " + (focused ? "color: " + input.helper.color.focus + ";" : '') + "\n    " + (error ? "color: " + colors.feedback.attention.dark + ";" : '') + "\n  ";
+});
+var Helper = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var full = _ref3.full,
+      error = _ref3.error,
+      helper = _ref3.helper,
+      disabled = _ref3.disabled,
+      focused = _ref3.focused,
+      maxLength = _ref3.maxLength,
+      length = _ref3.length,
+      hideMaxLength = _ref3.hideMaxLength;
+  return /*#__PURE__*/React.createElement(HelperWrapper, {
+    ref: ref,
+    full: full,
+    disabled: disabled
+  }, (error || helper) && /*#__PURE__*/React.createElement(Info, {
+    disabled: disabled,
+    focused: focused,
+    error: error
+  }, error || helper), !hideMaxLength && maxLength && /*#__PURE__*/React.createElement(Info, {
+    disabled: disabled,
+    focused: focused,
+    error: error
+  }, length, "/", maxLength));
+});
+Helper.propTypes = {
+  disabled: bool,
+  error: string,
+  focused: bool,
+  full: bool,
+  helper: string,
+  maxLength: number,
+  length: number,
+  hideMaxLength: bool
+};
+Helper.defaultProps = {
+  disabled: undefined,
+  error: undefined,
+  focused: false,
+  full: false,
+  helper: undefined,
+  maxLength: undefined,
+  length: undefined,
+  hideMaxLength: false
+};
+export default Helper;

package/esm/Input/native/Input.js

@@ -0,0 +1,234 @@
+var _excluded = ["cleanable", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "textContentType", "value", "onBlur", "onClean", "onFocus", "hideMaxLength", "theme"],
+    _excluded2 = ["height"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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; }
+
+import React, { useState, useEffect, useRef } from 'react';
+import { TouchableWithoutFeedback, Animated, Easing } from 'react-native';
+import { func, string, bool, number, oneOfType, shape, arrayOf } from 'prop-types';
+import styled, { withTheme } from 'styled-components';
+import { Close } from '@gympass/yoga-icons';
+import Helper from './Helper';
+var ICON_SIZE = 20;
+var Wrapper = styled.View(function (_ref) {
+  var full = _ref.full,
+      input = _ref.theme.yoga.components.input;
+  return "\n    position: relative;\n    width: " + (full ? '100%' : input.width + "px") + ";\n  ";
+});
+var Field = styled.TextInput(function (_ref2) {
+  var cleanable = _ref2.cleanable,
+      disabled = _ref2.disabled,
+      error = _ref2.error,
+      focus = _ref2.focus,
+      full = _ref2.full,
+      textContentType = _ref2.textContentType,
+      typed = _ref2.typed,
+      _ref2$theme$yoga = _ref2.theme.yoga,
+      baseFont = _ref2$theme$yoga.baseFont,
+      colors = _ref2$theme$yoga.colors,
+      input = _ref2$theme$yoga.components.input;
+  return "\n    width: " + (full ? '100%' : input.width + "px") + ";\n\n    padding-top: " + input.padding.top + "px;\n    padding-right: " + (cleanable || textContentType === 'password' ? ICON_SIZE + input.padding.right * 2 : input.padding.right) + "px;\n    padding-bottom: " + input.padding.bottom + "px;\n    padding-left: " + input.padding.left + "px;\n\n    border-radius: " + input.border.radius + "px;\n    border: " + input.border.width + "px solid " + input.border.color["default"] + ";\n\n    color: " + input.font.color["default"] + ";\n    font-family: " + baseFont.family + ";\n    font-size: " + input.font.size + "px;\n\n    " + (focus ? "border-color: " + input.border.color.typed + ";" : '') + "\n    " + (focus || typed ? "color: " + input.font.color.focus + ";" : '') + "\n    " + (error ? "border-color: " + colors.feedback.attention[1] + ";" : '') + "\n\n    " + (disabled ? "\n          border-color: " + colors.elements.lineAndBorders + ";\n          color: " + colors.text.disabled + ";\n        " : '') + "\n  ";
+});
+var LabelWrapper = styled(Animated.View)(function (_ref3) {
+  var focus = _ref3.focus,
+      typed = _ref3.typed,
+      input = _ref3.theme.yoga.components.input;
+  return "\n    position: absolute;\n    left: " + input.padding.left + "px;\n\n    transform: translateY(-" + input.padding.top / 2 + "px);\n\n    " + (focus || typed ? "left: " + (input.padding.left - 2) + "px;" : '') + "\n  ";
+});
+var Label = styled(Animated.Text)(function (_ref4) {
+  var disabled = _ref4.disabled,
+      error = _ref4.error,
+      focus = _ref4.focus,
+      typed = _ref4.typed,
+      _ref4$theme$yoga = _ref4.theme.yoga,
+      colors = _ref4$theme$yoga.colors,
+      baseFont = _ref4$theme$yoga.baseFont,
+      input = _ref4$theme$yoga.components.input;
+  return "\n    background-color: " + colors.white + ";\n\n    font-family: " + baseFont.family + ";\n    color: " + input.label.color["default"] + ";\n\n    " + (focus ? "\n          color: " + input.label.color.focus + ";\n        " : '') + "\n\n    " + (focus || typed ? "\n        padding-right: " + input.label.padding.right + "px;\n        padding-left: " + input.label.padding.left + "px;\n      " : '') + "\n\n    " + (error ? "color: " + colors.feedback.attention[1] + ";" : '') + "\n    " + (disabled ? "color: " + colors.text.disabled + ";" : '') + "\n  ";
+});
+var CloseIcon = styled.View(function (_ref5) {
+  var spacing = _ref5.theme.yoga.spacing;
+  return "\n    position: absolute;\n    top: 0px;\n    right: 0px;\n\n    padding-right: " + spacing.small + "px;\n    padding-left: " + spacing.small + "px;\n  ";
+});
+var Input = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
+  var cleanable = _ref6.cleanable,
+      disabled = _ref6.disabled,
+      error = _ref6.error,
+      full = _ref6.full,
+      helper = _ref6.helper,
+      label = _ref6.label,
+      maxLength = _ref6.maxLength,
+      readOnly = _ref6.readOnly,
+      style = _ref6.style,
+      textContentType = _ref6.textContentType,
+      value = _ref6.value,
+      _onBlur = _ref6.onBlur,
+      onClean = _ref6.onClean,
+      _onFocus = _ref6.onFocus,
+      hideMaxLength = _ref6.hideMaxLength,
+      _ref6$theme$yoga = _ref6.theme.yoga,
+      colors = _ref6$theme$yoga.colors,
+      transition = _ref6$theme$yoga.transition,
+      input = _ref6$theme$yoga.components.input,
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded);
+
+  var inputRef = ref || useRef(null);
+
+  var _useState = useState(false),
+      focused = _useState[0],
+      setFocused = _useState[1];
+
+  var _useState2 = useState(Boolean(value)),
+      typed = _useState2[0],
+      setTyped = _useState2[1];
+
+  useEffect(function () {
+    setTyped(Boolean(value));
+  }, [value]);
+
+  var iconColor = function iconColor() {
+    if (disabled) {
+      return colors.elements.backgroundAndDisabled;
+    }
+
+    if (focused) {
+      return input.font.color.focus;
+    }
+
+    return input.font.color["default"];
+  };
+
+  var _useState3 = useState(new Animated.Value(input.padding.top * 1.5)),
+      labelTopAnimation = _useState3[0];
+
+  var _useState4 = useState(new Animated.Value(input.label.font.size["default"])),
+      fontSizeAnimation = _useState4[0];
+
+  var animate = function animate(animation, toValue) {
+    return Animated.timing(animation, {
+      toValue: toValue,
+      duration: transition.duration[1],
+      easing: Easing.bezier.apply(Easing, transition.timing[0]),
+      useNativeDriver: false
+    }).start();
+  };
+
+  useEffect(function () {
+    var shouldAnimate = typed || focused;
+    animate(labelTopAnimation, shouldAnimate ? 1 : input.padding.top * 1.5);
+    animate(fontSizeAnimation, shouldAnimate ? input.label.font.size.typed : input.label.font.size["default"]);
+  }, [focused, typed]);
+
+  var _ref7 = Array.isArray(style) ? Object.assign.apply(Object, [{}].concat(style)) : style,
+      _ref7$height = _ref7.height,
+      height = _ref7$height === void 0 ? input.height : _ref7$height,
+      styles = _objectWithoutPropertiesLoose(_ref7, _excluded2);
+
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    full: full,
+    style: styles
+  }, /*#__PURE__*/React.createElement(Field, _extends({}, props, {
+    cleanable: cleanable,
+    disabled: disabled,
+    editable: !(readOnly || disabled),
+    error: error,
+    focus: focused,
+    full: full,
+    maxLength: maxLength,
+    style: {
+      height: height
+    },
+    textContentType: textContentType,
+    typed: typed,
+    value: value,
+    onFocus: function onFocus(e) {
+      setFocused(true);
+
+      _onFocus(e);
+    },
+    onBlur: function onBlur(e) {
+      setFocused(false);
+
+      _onBlur(e);
+    },
+    ref: inputRef
+  })), Boolean(label) && /*#__PURE__*/React.createElement(LabelWrapper, {
+    focus: focused,
+    pointerEvents: "none",
+    typed: typed,
+    style: {
+      top: labelTopAnimation
+    }
+  }, /*#__PURE__*/React.createElement(Label, {
+    disabled: disabled,
+    error: error,
+    focus: focused,
+    typed: typed,
+    style: {
+      fontSize: fontSizeAnimation
+    }
+  }, label)), cleanable && typed && /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+    accessibilityRole: "button",
+    onPress: function onPress() {
+      if (disabled) return;
+      onClean('');
+    }
+  }, /*#__PURE__*/React.createElement(CloseIcon, null, /*#__PURE__*/React.createElement(Close, {
+    height: input.height,
+    width: 20,
+    fill: iconColor()
+  }))), (helper || maxLength || error) && /*#__PURE__*/React.createElement(Helper, {
+    full: full,
+    error: error,
+    helper: helper,
+    focused: focused,
+    disabled: disabled,
+    maxLength: maxLength,
+    length: value.length,
+    hideMaxLength: hideMaxLength
+  }));
+});
+Input.propTypes = {
+  /** display a close icon to clean the field */
+  cleanable: bool,
+  disabled: bool,
+  error: string,
+  full: bool,
+
+  /** A helper text to be displayed below field */
+  helper: string,
+  label: string,
+
+  /** maximum length (number of characters) of value */
+  maxLength: number,
+  readOnly: bool,
+  textContentType: string,
+  value: oneOfType([string, number]),
+  style: oneOfType([shape({}), arrayOf(shape({}))]),
+  onBlur: func,
+
+  /** callback invoked when close icon is clicked */
+  onClean: func,
+  onFocus: func,
+  hideMaxLength: bool
+};
+Input.defaultProps = {
+  cleanable: true,
+  disabled: false,
+  error: undefined,
+  full: false,
+  helper: undefined,
+  label: '',
+  maxLength: undefined,
+  readOnly: false,
+  style: {},
+  textContentType: undefined,
+  value: '',
+  onBlur: function onBlur() {},
+  onClean: function onClean() {},
+  onFocus: function onFocus() {},
+  hideMaxLength: false
+};
+export default withTheme(Input);

package/esm/Input/native/Input.test.js

@@ -0,0 +1,181 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { ThemeProvider, Input } from '../..';
+describe('<Input />', function () {
+  describe('Snapshots', function () {
+    it('should match with default input', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, null))),
+          toJSON = _render.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match with label', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input"
+      }))),
+          toJSON = _render2.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match when input is focused', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        testID: "input"
+      }))),
+          toJSON = _render3.toJSON,
+          getByTestId = _render3.getByTestId;
+
+      fireEvent(getByTestId('input'), 'focus');
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match with disabled input', function () {
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        disabled: true
+      }))),
+          toJSON = _render4.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match with error', function () {
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        error: "Error message"
+      }))),
+          toJSON = _render5.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match with helper text and max length', function () {
+      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        helper: "Helper text",
+        maxLength: 20
+      }))),
+          toJSON = _render6.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match with helper text, max length and hideMaxLength', function () {
+      var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        helper: "Helper text",
+        maxLength: 20,
+        hideMaxLength: true
+      }))),
+          toJSON = _render7.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match with full width', function () {
+      var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Label",
+        full: true
+      }))),
+          toJSON = _render8.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+  describe('Events', function () {
+    it('should call onChangeText', function () {
+      var onChangeTextMock = jest.fn();
+
+      var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        testID: "input",
+        onChangeText: onChangeTextMock
+      }))),
+          getByTestId = _render9.getByTestId;
+
+      fireEvent.changeText(getByTestId('input'), 'foo');
+      expect(onChangeTextMock).toHaveBeenCalled();
+    });
+    it('should not call onChangeText when input is disabled', function () {
+      var onChangeTextMock = jest.fn();
+
+      var _render10 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        testID: "input",
+        onChangeText: onChangeTextMock,
+        disabled: true
+      }))),
+          getByTestId = _render10.getByTestId;
+
+      fireEvent(getByTestId('input'), 'focus');
+      expect(onChangeTextMock).not.toHaveBeenCalled();
+    });
+    it('should call onFocus', function () {
+      var onFocusMock = jest.fn();
+
+      var _render11 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        testID: "input",
+        onFocus: onFocusMock
+      }))),
+          getByTestId = _render11.getByTestId;
+
+      fireEvent(getByTestId('input'), 'focus');
+      expect(onFocusMock).toHaveBeenCalled();
+    });
+    it('should call onBlur', function () {
+      var onBlurMock = jest.fn();
+
+      var _render12 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        testID: "input",
+        onBlur: onBlurMock
+      }))),
+          getByTestId = _render12.getByTestId;
+
+      fireEvent(getByTestId('input'), 'focus');
+      fireEvent(getByTestId('input'), 'blur');
+      expect(onBlurMock).toHaveBeenCalled();
+    });
+  });
+  describe('maxLength', function () {
+    it('should update maxLength counter when add character', function () {
+      var _render13 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        testID: "input",
+        maxLength: 10
+      }))),
+          getByText = _render13.getByText,
+          rerender = _render13.rerender;
+
+      expect(getByText('0/10')).toBeTruthy();
+      rerender( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        value: "foo",
+        maxLength: 10
+      })));
+      expect(getByText('3/10')).toBeTruthy();
+    });
+  });
+  describe('clean button', function () {
+    it('should call onClean when press clean button', function () {
+      var onCleanMock = jest.fn();
+
+      var _render14 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        value: "foo",
+        onClean: onCleanMock
+      }))),
+          getByRole = _render14.getByRole;
+
+      fireEvent.press(getByRole('button'));
+      expect(onCleanMock).toHaveBeenCalledWith('');
+    });
+    it('should test if clean button is present', function () {
+      var _render15 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input"
+      }))),
+          rerender = _render15.rerender,
+          queryByRole = _render15.queryByRole; // closeButton
+
+
+      expect(queryByRole('button')).toBeNull();
+      rerender( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        value: "foo"
+      })));
+      expect(queryByRole('button')).not.toBeNull();
+    });
+  });
+});

package/esm/Input/native/Number.js

@@ -0,0 +1,12 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import Input from './Input';
+var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    ref: ref
+  }, props, {
+    keyboardType: "numeric"
+  }));
+});
+export default InputNumber;

package/esm/Input/native/Number.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, Input } from '../..';
+describe('<Input.Number />', function () {
+  describe('Snapshots', function () {
+    it('should match with default input', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Number, null))),
+          toJSON = _render.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/esm/Input/native/Password.js

@@ -0,0 +1,112 @@
+var _excluded = ["disabled", "style", "full", "onBlur", "onFocus", "theme"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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; }
+
+import React, { useState } from 'react';
+import { TouchableWithoutFeedback, Keyboard } from 'react-native';
+import styled, { withTheme } from 'styled-components';
+import { bool, func, shape } from 'prop-types';
+import { Visibility, VisibilityOff } from '@gympass/yoga-icons';
+import Input from './Input';
+var Wrapper = styled.View(function (_ref) {
+  var full = _ref.full,
+      input = _ref.theme.yoga.components.input;
+  return "\n    position: relative;\n\n    width: " + (full ? '100%' : input.width + "px") + ";\n  ";
+});
+var IconWrapper = styled.View(function (_ref2) {
+  var spacing = _ref2.theme.yoga.spacing;
+  return "\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    padding-right: " + spacing.small + "px;\n    padding-left: " + spacing.xxsmall + "px;\n  ";
+});
+var Password = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var disabled = _ref3.disabled,
+      style = _ref3.style,
+      full = _ref3.full,
+      _onBlur = _ref3.onBlur,
+      _onFocus = _ref3.onFocus,
+      _ref3$theme$yoga = _ref3.theme.yoga,
+      colors = _ref3$theme$yoga.colors,
+      input = _ref3$theme$yoga.components.input,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded);
+
+  var _useState = useState(false),
+      showPassword = _useState[0],
+      toggleShowPassword = _useState[1];
+
+  var _useState2 = useState(false),
+      focused = _useState2[0],
+      setFocused = _useState2[1];
+
+  var iconColor = function iconColor() {
+    if (disabled) {
+      return colors.elements.backgroundAndDisabled;
+    }
+
+    if (focused) {
+      return input.font.color.focus;
+    }
+
+    return input.font.color["default"];
+  };
+
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    style: style,
+    full: full
+  }, /*#__PURE__*/React.createElement(Input, _extends({
+    ref: ref
+  }, props, {
+    autoCompleteType: "password",
+    blurOnSubmit: false,
+    cleanable: false,
+    clearTextOnFocus: false,
+    disabled: disabled,
+    full: full,
+    secureTextEntry: !showPassword,
+    textContentType: "password",
+    onSubmitEditing: function onSubmitEditing() {
+      return Keyboard.dismiss();
+    },
+    onBlur: function onBlur(e) {
+      setFocused(false);
+
+      _onBlur(e);
+    },
+    onFocus: function onFocus(e) {
+      setFocused(true);
+
+      _onFocus(e);
+    }
+  })), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+    accessibilityRole: "button",
+    onPress: function onPress() {
+      if (disabled) return;
+      toggleShowPassword(!showPassword);
+    }
+  }, /*#__PURE__*/React.createElement(IconWrapper, {
+    disabled: disabled
+  }, showPassword ? /*#__PURE__*/React.createElement(Visibility, {
+    height: input.height,
+    width: 20,
+    fill: iconColor()
+  }) : /*#__PURE__*/React.createElement(VisibilityOff, {
+    height: input.height,
+    width: 20,
+    fill: iconColor()
+  }))));
+});
+Password.propTypes = {
+  disabled: bool,
+  full: bool,
+  style: shape({}),
+  onBlur: func,
+  onFocus: func
+};
+Password.defaultProps = {
+  disabled: false,
+  full: false,
+  style: undefined,
+  onBlur: function onBlur() {},
+  onFocus: function onFocus() {}
+};
+export default withTheme(Password);