@gympass/yoga 7.87.1 → 7.88.1

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

@@ -0,0 +1,37 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_react_native = require("@testing-library/react-native");
+var import__ = require("../..");
+describe("<Input.Email />", () => {
+  describe("Snapshots", () => {
+    it("should match with default input", () => {
+      const { toJSON } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Input.Email, {}) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/cjs/Input/native/Helper.js

@@ -1 +1,117 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _react=_interopRequireDefault(require("react"));var _styledComponents=_interopRequireDefault(require("styled-components"));var _propTypes=require("prop-types");var _Text=_interopRequireDefault(require("../../Text"));var HelperWrapper=_styledComponents["default"].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=(0,_styledComponents["default"])(_Text["default"].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=_react["default"].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 _react["default"].createElement(HelperWrapper,{ref:ref,full:full,disabled:disabled},(error||helper)&&_react["default"].createElement(Info,{disabled:disabled,focused:focused,error:error},error||helper),!hideMaxLength&&maxLength&&_react["default"].createElement(Info,{disabled:disabled,focused:focused,error:error},length,"/",maxLength));});Helper.propTypes={disabled:_propTypes.bool,error:_propTypes.string,focused:_propTypes.bool,full:_propTypes.bool,helper:_propTypes.string,maxLength:_propTypes.number,length:_propTypes.number,hideMaxLength:_propTypes.bool};Helper.defaultProps={disabled:undefined,error:undefined,focused:false,full:false,helper:undefined,maxLength:undefined,length:undefined,hideMaxLength:false};var _default=Helper;exports["default"]=_default;
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Helper_exports = {};
+__export(Helper_exports, {
+  default: () => Helper_default
+});
+module.exports = __toCommonJS(Helper_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_prop_types = require("prop-types");
+var import_Text = __toESM(require("../../Text"));
+const HelperWrapper = import_styled_components.default.View(
+  ({
+    full,
+    theme: {
+      yoga: {
+        components: { input }
+      }
+    }
+  }) => `
+    width: ${full ? "100%" : `${input.width}px`};
+    max-width: ${input.width}px;
+    flex-direction: row;
+    justify-content: space-between;
+
+    margin-top: ${input.helper.margin.top}px;
+  `
+);
+const Info = (0, import_styled_components.default)(import_Text.default.Regular)(
+  ({
+    disabled,
+    focused,
+    error,
+    theme: {
+      yoga: {
+        colors,
+        components: { input }
+      }
+    }
+  }) => `
+    flex-wrap: wrap;
+
+    color: ${input.helper.color.default};
+    font-size: ${input.helper.font.size}px;
+
+    ${disabled ? `color: ${colors.text.disabled};` : ""}
+    ${focused ? `color: ${input.helper.color.focus};` : ""}
+    ${error ? `color: ${colors.feedback.attention.dark};` : ""}
+  `
+);
+const Helper = import_react.default.forwardRef(
+  ({
+    full,
+    error,
+    helper,
+    disabled,
+    focused,
+    maxLength,
+    length,
+    hideMaxLength
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(HelperWrapper, { ref, full, disabled, children: [
+    (error || helper) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Info, { disabled, focused, error, children: error || helper }),
+    !hideMaxLength && maxLength && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Info, { disabled, focused, error, children: [
+      length,
+      "/",
+      maxLength
+    ] })
+  ] })
+);
+Helper.propTypes = {
+  disabled: import_prop_types.bool,
+  error: import_prop_types.string,
+  focused: import_prop_types.bool,
+  full: import_prop_types.bool,
+  helper: import_prop_types.string,
+  maxLength: import_prop_types.number,
+  length: import_prop_types.number,
+  hideMaxLength: import_prop_types.bool
+};
+Helper.defaultProps = {
+  disabled: void 0,
+  error: void 0,
+  focused: false,
+  full: false,
+  helper: void 0,
+  maxLength: void 0,
+  length: void 0,
+  hideMaxLength: false
+};
+var Helper_default = Helper;

package/cjs/Input/native/Input.js

@@ -1 +1,385 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=require("prop-types");var _styledComponents=_interopRequireWildcard(require("styled-components"));var _yogaIcons=require("@gympass/yoga-icons");var _Helper=_interopRequireDefault(require("./Helper"));var _excluded=["cleanable","disabled","error","full","helper","label","maxLength","readOnly","style","textContentType","value","onBlur","onClean","onFocus","hideMaxLength","theme"],_excluded2=["height"];function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var ICON_SIZE=20;var Wrapper=_styledComponents["default"].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=_styledComponents["default"].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=(0,_styledComponents["default"])(_reactNative.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=(0,_styledComponents["default"])(_reactNative.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=_styledComponents["default"].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=_react["default"].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=(0,_objectWithoutProperties2["default"])(_ref6,_excluded);var inputRef=ref||(0,_react.useRef)(null);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2["default"])(_useState,2),focused=_useState2[0],setFocused=_useState2[1];var _useState3=(0,_react.useState)(Boolean(value)),_useState4=(0,_slicedToArray2["default"])(_useState3,2),typed=_useState4[0],setTyped=_useState4[1];(0,_react.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 _useState5=(0,_react.useState)(new _reactNative.Animated.Value(input.padding.top*1.5)),_useState6=(0,_slicedToArray2["default"])(_useState5,1),labelTopAnimation=_useState6[0];var _useState7=(0,_react.useState)(new _reactNative.Animated.Value(input.label.font.size["default"])),_useState8=(0,_slicedToArray2["default"])(_useState7,1),fontSizeAnimation=_useState8[0];var animate=function animate(animation,toValue){return _reactNative.Animated.timing(animation,{toValue:toValue,duration:transition.duration[1],easing:_reactNative.Easing.bezier.apply(_reactNative.Easing,(0,_toConsumableArray2["default"])(transition.timing[0])),useNativeDriver:false}).start();};(0,_react.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((0,_toConsumableArray2["default"])(style))):style,_ref7$height=_ref7.height,height=_ref7$height===void 0?input.height:_ref7$height,styles=(0,_objectWithoutProperties2["default"])(_ref7,_excluded2);return _react["default"].createElement(Wrapper,{full:full,style:styles},_react["default"].createElement(Field,(0,_extends2["default"])({},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)&&_react["default"].createElement(LabelWrapper,{focus:focused,pointerEvents:"none",typed:typed,style:{top:labelTopAnimation}},_react["default"].createElement(Label,{disabled:disabled,error:error,focus:focused,typed:typed,style:{fontSize:fontSizeAnimation}},label)),cleanable&&typed&&_react["default"].createElement(_reactNative.TouchableWithoutFeedback,{accessibilityRole:"button",onPress:function onPress(){if(disabled)return;onClean('');}},_react["default"].createElement(CloseIcon,null,_react["default"].createElement(_yogaIcons.Close,{height:input.height,width:20,fill:iconColor()}))),(helper||maxLength||error)&&_react["default"].createElement(_Helper["default"],{full:full,error:error,helper:helper,focused:focused,disabled:disabled,maxLength:maxLength,length:value.length,hideMaxLength:hideMaxLength}));});Input.propTypes={cleanable:_propTypes.bool,disabled:_propTypes.bool,error:_propTypes.string,full:_propTypes.bool,helper:_propTypes.string,label:_propTypes.string,maxLength:_propTypes.number,readOnly:_propTypes.bool,textContentType:_propTypes.string,value:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number]),style:(0,_propTypes.oneOfType)([(0,_propTypes.shape)({}),(0,_propTypes.arrayOf)((0,_propTypes.shape)({}))]),onBlur:_propTypes.func,onClean:_propTypes.func,onFocus:_propTypes.func,hideMaxLength:_propTypes.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};var _default=(0,_styledComponents.withTheme)(Input);exports["default"]=_default;
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Input_exports = {};
+__export(Input_exports, {
+  default: () => Input_default
+});
+module.exports = __toCommonJS(Input_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_react_native = require("react-native");
+var import_prop_types = require("prop-types");
+var import_styled_components = __toESM(require("styled-components"));
+var import_yoga_icons = require("@gympass/yoga-icons");
+var import_Helper = __toESM(require("./Helper"));
+const ICON_SIZE = 20;
+const Wrapper = import_styled_components.default.View(
+  ({
+    full,
+    theme: {
+      yoga: {
+        components: { input }
+      }
+    }
+  }) => `
+    position: relative;
+    width: ${full ? "100%" : `${input.width}px`};
+  `
+);
+const Field = import_styled_components.default.TextInput(
+  ({
+    cleanable,
+    disabled,
+    error,
+    focus,
+    full,
+    textContentType,
+    typed,
+    theme: {
+      yoga: {
+        baseFont,
+        colors,
+        components: { input }
+      }
+    }
+  }) => `
+    width: ${full ? "100%" : `${input.width}px`};
+
+    padding-top: ${input.padding.top}px;
+    padding-right: ${cleanable || textContentType === "password" ? ICON_SIZE + input.padding.right * 2 : input.padding.right}px;
+    padding-bottom: ${input.padding.bottom}px;
+    padding-left: ${input.padding.left}px;
+
+    border-radius: ${input.border.radius}px;
+    border: ${input.border.width}px solid ${input.border.color.default};
+
+    color: ${input.font.color.default};
+    font-family: ${baseFont.family};
+    font-size: ${input.font.size}px;
+
+    ${focus ? `border-color: ${input.border.color.typed};` : ""}
+    ${focus || typed ? `color: ${input.font.color.focus};` : ""}
+    ${error ? `border-color: ${colors.feedback.attention[1]};` : ""}
+
+    ${disabled ? `
+          border-color: ${colors.elements.lineAndBorders};
+          color: ${colors.text.disabled};
+        ` : ""}
+  `
+);
+const LabelWrapper = (0, import_styled_components.default)(import_react_native.Animated.View)(
+  ({
+    focus,
+    typed,
+    theme: {
+      yoga: {
+        components: { input }
+      }
+    }
+  }) => `
+    position: absolute;
+    left: ${input.padding.left}px;
+
+    transform: translateY(-${input.padding.top / 2}px);
+
+    ${focus || typed ? `left: ${input.padding.left - 2}px;` : ""}
+  `
+);
+const Label = (0, import_styled_components.default)(import_react_native.Animated.Text)(
+  ({
+    disabled,
+    error,
+    focus,
+    typed,
+    theme: {
+      yoga: {
+        colors,
+        baseFont,
+        components: { input }
+      }
+    }
+  }) => `
+    background-color: ${colors.white};
+
+    font-family: ${baseFont.family};
+    color: ${input.label.color.default};
+
+    ${focus ? `
+          color: ${input.label.color.focus};
+        ` : ""}
+
+    ${focus || typed ? `
+        padding-right: ${input.label.padding.right}px;
+        padding-left: ${input.label.padding.left}px;
+      ` : ""}
+
+    ${error ? `color: ${colors.feedback.attention[1]};` : ""}
+    ${disabled ? `color: ${colors.text.disabled};` : ""}
+  `
+);
+const CloseIcon = import_styled_components.default.View(
+  ({
+    theme: {
+      yoga: { spacing }
+    }
+  }) => `
+    position: absolute;
+    top: 0px;
+    right: 0px;
+
+    padding-right: ${spacing.small}px;
+    padding-left: ${spacing.small}px;
+  `
+);
+const Input = import_react.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      cleanable,
+      disabled,
+      error,
+      full,
+      helper,
+      label,
+      maxLength,
+      readOnly,
+      style,
+      textContentType,
+      value,
+      onBlur,
+      onClean,
+      onFocus,
+      hideMaxLength,
+      theme: {
+        yoga: {
+          colors,
+          transition,
+          components: { input }
+        }
+      }
+    } = _b, props = __objRest(_b, [
+      "cleanable",
+      "disabled",
+      "error",
+      "full",
+      "helper",
+      "label",
+      "maxLength",
+      "readOnly",
+      "style",
+      "textContentType",
+      "value",
+      "onBlur",
+      "onClean",
+      "onFocus",
+      "hideMaxLength",
+      "theme"
+    ]);
+    const inputRef = ref || (0, import_react.useRef)(null);
+    const [focused, setFocused] = (0, import_react.useState)(false);
+    const [typed, setTyped] = (0, import_react.useState)(Boolean(value));
+    (0, import_react.useEffect)(() => {
+      setTyped(Boolean(value));
+    }, [value]);
+    const iconColor = () => {
+      if (disabled) {
+        return colors.elements.backgroundAndDisabled;
+      }
+      if (focused) {
+        return input.font.color.focus;
+      }
+      return input.font.color.default;
+    };
+    const [labelTopAnimation] = (0, import_react.useState)(
+      new import_react_native.Animated.Value(input.padding.top * 1.5)
+    );
+    const [fontSizeAnimation] = (0, import_react.useState)(
+      new import_react_native.Animated.Value(input.label.font.size.default)
+    );
+    const animate = (animation, toValue) => import_react_native.Animated.timing(animation, {
+      toValue,
+      duration: transition.duration[1],
+      easing: import_react_native.Easing.bezier(...transition.timing[0]),
+      useNativeDriver: false
+    }).start();
+    (0, import_react.useEffect)(() => {
+      const 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]);
+    const _a2 = Array.isArray(style) ? Object.assign({}, ...style) : style, { height = input.height } = _a2, styles = __objRest(_a2, ["height"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { full, style: styles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Field,
+        __spreadProps(__spreadValues({}, props), {
+          cleanable,
+          disabled,
+          editable: !(readOnly || disabled),
+          error,
+          focus: focused,
+          full,
+          maxLength,
+          style: {
+            height
+          },
+          textContentType,
+          typed,
+          value,
+          onFocus: (e) => {
+            setFocused(true);
+            onFocus(e);
+          },
+          onBlur: (e) => {
+            setFocused(false);
+            onBlur(e);
+          },
+          ref: inputRef
+        })
+      ),
+      Boolean(label) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        LabelWrapper,
+        {
+          focus: focused,
+          pointerEvents: "none",
+          typed,
+          style: { top: labelTopAnimation },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            Label,
+            {
+              disabled,
+              error,
+              focus: focused,
+              typed,
+              style: { fontSize: fontSizeAnimation },
+              children: label
+            }
+          )
+        }
+      ),
+      cleanable && typed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_native.TouchableWithoutFeedback,
+        {
+          accessibilityRole: "button",
+          onPress: () => {
+            if (disabled)
+              return;
+            onClean("");
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.Close, { height: input.height, width: 20, fill: iconColor() }) })
+        }
+      ),
+      (helper || maxLength || error) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Helper.default,
+        {
+          full,
+          error,
+          helper,
+          focused,
+          disabled,
+          maxLength,
+          length: value.length,
+          hideMaxLength
+        }
+      )
+    ] });
+  }
+);
+Input.propTypes = {
+  /** display a close icon to clean the field */
+  cleanable: import_prop_types.bool,
+  disabled: import_prop_types.bool,
+  error: import_prop_types.string,
+  full: import_prop_types.bool,
+  /** A helper text to be displayed below field */
+  helper: import_prop_types.string,
+  label: import_prop_types.string,
+  /** maximum length (number of characters) of value */
+  maxLength: import_prop_types.number,
+  readOnly: import_prop_types.bool,
+  textContentType: import_prop_types.string,
+  value: (0, import_prop_types.oneOfType)([import_prop_types.string, import_prop_types.number]),
+  style: (0, import_prop_types.oneOfType)([(0, import_prop_types.shape)({}), (0, import_prop_types.arrayOf)((0, import_prop_types.shape)({}))]),
+  onBlur: import_prop_types.func,
+  /** callback invoked when close icon is clicked */
+  onClean: import_prop_types.func,
+  onFocus: import_prop_types.func,
+  hideMaxLength: import_prop_types.bool
+};
+Input.defaultProps = {
+  cleanable: true,
+  disabled: false,
+  error: void 0,
+  full: false,
+  helper: void 0,
+  label: "",
+  maxLength: void 0,
+  readOnly: false,
+  style: {},
+  textContentType: void 0,
+  value: "",
+  onBlur: () => {
+  },
+  onClean: () => {
+  },
+  onFocus: () => {
+  },
+  hideMaxLength: false
+};
+var Input_default = (0, import_styled_components.withTheme)(Input);