@ovotech/element-native 2.2.0-canary-668a0ee-91 → 2.2.0

package/dist/components/Input/NumberInput.js

@@ -10,10 +10,32 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberInput = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var Input_1 = require("./Input");
-var NumberInput = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(Input_1.Input, __assign({}, props, { keyboardType: "numeric", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
+var NumberInput = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(Input_1.Input, __assign({}, props, { keyboardType: "numeric", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
 exports.NumberInput = NumberInput;

package/dist/components/Input/PasswordInput.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
+import React from 'react';
 import { TextInput as RNTextInput } from 'react-native';
-declare const PasswordInput: import("react").ForwardRefExoticComponent<import("react-native/types").TextInputProps & {
+declare const PasswordInput: React.ForwardRefExoticComponent<import("react-native/types").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: import("../../providers").IconName | undefined;
-    iconRight?: import("../../providers").IconName | undefined;
-    rightSlot?: import("react").ReactNode;
+    iconLeft?: (string & {}) | import("../../providers").IconName | undefined;
+    iconRight?: (string & {}) | import("../../providers").IconName | undefined;
+    rightSlot?: React.ReactNode;
 } & {
     hasVisibilityToggle?: boolean | undefined;
-} & import("react").RefAttributes<RNTextInput>>;
+} & React.RefAttributes<RNTextInput>>;
 export { PasswordInput };

package/dist/components/Input/PasswordInput.js

@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -23,13 +46,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PasswordInput = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var Input_1 = require("./Input");
 var PasswordVisibilityToggle_1 = require("./PasswordVisibilityToggle");
 var PasswordInput = (0, react_1.forwardRef)(function (_a, ref) {
     var props = __rest(_a, []);
     var _b = (0, PasswordVisibilityToggle_1.useTogglePasswordVisibility)(), isPasswordVisible = _b.isPasswordVisible, handlePasswordVisibility = _b.handlePasswordVisibility;
-    return ((0, jsx_runtime_1.jsx)(Input_1.Input, __assign({}, props, { rightSlot: props.hasVisibilityToggle ? ((0, jsx_runtime_1.jsx)(PasswordVisibilityToggle_1.PasswordVisibilityToggle, { iconName: isPasswordVisible ? 'hide' : 'show', visibilityToggleLabel: isPasswordVisible ? 'Hide password' : 'Show password', handlePasswordVisibility: handlePasswordVisibility })) : null, keyboardType: "default", autoCapitalize: "none", autoCorrect: false, blurOnSubmit: false, secureTextEntry: !isPasswordVisible, ref: ref })));
+    return (react_1.default.createElement(Input_1.Input, __assign({}, props, { rightSlot: props.hasVisibilityToggle ? (react_1.default.createElement(PasswordVisibilityToggle_1.PasswordVisibilityToggle, { iconName: isPasswordVisible ? 'hide' : 'show', visibilityToggleLabel: isPasswordVisible ? 'Hide password' : 'Show password', handlePasswordVisibility: handlePasswordVisibility })) : null, keyboardType: "default", autoCapitalize: "none", autoCorrect: false, blurOnSubmit: false, secureTextEntry: !isPasswordVisible, ref: ref })));
 });
 exports.PasswordInput = PasswordInput;

package/dist/components/Input/PasswordInput.styled.d.ts

@@ -5,10 +5,10 @@ export declare const StyledPressable: import("styled-components").StyledComponen
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
-        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
+        opacity: Record<"transparent" | "translucent" | "solid", string | number>;
+        color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
             lightest: string;
             lighter: string;
             light: string;
@@ -24,53 +24,71 @@ export declare const StyledPressable: import("styled-components").StyledComponen
             web: string;
         }>;
         fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
             small: string | number;
             large: string | number;
         }>;
-        lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
             small: string | number;
             large: string | number;
         }>;
-        letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
         message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
-        focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"border" | "surface", string> & {
+        focus: Record<"outline" | "surface", string>;
+        inverted: Record<"surface" | "border", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
         success: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         warning: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         error: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         info: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
+        };
+        electricity: {
+            border: string;
+            surface: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
+        };
+        gas: {
+            border: string;
+            surface: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
-        data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
     };
     component: {
         heading1: {
@@ -201,30 +219,6 @@ export declare const StyledPressable: import("styled-components").StyledComponen
                 backgroundFocused: string;
             };
         };
-        badge: {
-            variants: {
-                red: {
-                    foreground: string;
-                    background: string;
-                };
-                orange: {
-                    foreground: string;
-                    background: string;
-                };
-                yellow: {
-                    foreground: string;
-                    background: string;
-                };
-                green: {
-                    foreground: string;
-                    background: string;
-                };
-                blue: {
-                    foreground: string;
-                    background: string;
-                };
-            };
-        };
     };
 }, {
     focused: boolean;

package/dist/components/Input/PasswordInput.styled.js

@@ -30,8 +30,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledPressable = void 0;
 var react_native_1 = require("react-native");
 var styled_native_1 = __importStar(require("../../styled.native"));
+var utils_1 = require("../../utils");
 exports.StyledPressable = (0, styled_native_1.default)(react_native_1.Pressable)(function (_a) {
-    var core = _a.theme.core, focused = _a.focused;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      position: absolute;\n      width: ", ";\n      z-index: 1;\n      top: ", ";\n      right: ", ";\n    "], ["\n      display: flex;\n      align-items: center;\n      position: absolute;\n      width: ", ";\n      z-index: 1;\n      top: ", ";\n      right: ", ";\n    "])), core.space[4], focused ? '16px' : '14px', core.space[3]);
+    var _b = _a.theme, input = _b.input, focusRing = _b.focusRing, focused = _a.focused;
+    var distance = ((0, utils_1.pxToNumber)(input.height) - (0, utils_1.pxToNumber)(input.icon.size)) / 2 +
+        (focused ? (0, utils_1.pxToNumber)(focusRing.distance) : 0);
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      position: absolute;\n      width: ", ";\n      z-index: 1;\n      top: ", "px;\n      right: ", "px;\n    "], ["\n      display: flex;\n      align-items: center;\n      position: absolute;\n      width: ", ";\n      z-index: 1;\n      top: ", "px;\n      right: ", "px;\n    "])), input.icon.size, distance, distance);
 });
 var templateObject_1;

package/dist/components/Input/PasswordVisibilityToggle.js

@@ -1,19 +1,32 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PasswordVisibilityToggle = exports.useTogglePasswordVisibility = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
+var styled_native_1 = require("../../styled.native");
+var utils_1 = require("../../utils");
 var Icon_1 = require("../Icon");
 var PasswordInput_styled_1 = require("./PasswordInput.styled");
 var useTogglePasswordVisibility = function () {
@@ -29,11 +42,13 @@ var useTogglePasswordVisibility = function () {
 exports.useTogglePasswordVisibility = useTogglePasswordVisibility;
 var PasswordVisibilityToggle = function (_a) {
     var iconName = _a.iconName, visibilityToggleLabel = _a.visibilityToggleLabel, handlePasswordVisibility = _a.handlePasswordVisibility;
+    var input = (0, react_1.useContext)(styled_native_1.ThemeContext).input;
     var _b = (0, react_1.useState)(false), focused = _b[0], setFocused = _b[1];
-    return ((0, jsx_runtime_1.jsx)(PasswordInput_styled_1.StyledPressable, __assign({ testID: "password-input-visibility-toggle", focused: focused, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: function () {
+    return (react_1.default.createElement(PasswordInput_styled_1.StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: (0, utils_1.pxToNumber)(input.icon.size), onFocus: function () {
             setFocused(true);
         }, onBlur: function () {
             setFocused(false);
-        } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: iconName, size: 16, pointerEvents: "none" }) })));
+        } },
+        react_1.default.createElement(Icon_1.Icon, { name: iconName, size: (0, utils_1.pxToNumber)(input.icon.size), pointerEvents: "none" })));
 };
 exports.PasswordVisibilityToggle = PasswordVisibilityToggle;

package/dist/components/Input/TelInput.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TextInput } from 'react-native';
+declare const TelInput: React.ForwardRefExoticComponent<import("react-native/types").TextInputProps & {
+    invalid?: boolean | undefined;
+    stretch?: boolean | undefined;
+    iconLeft?: (string & {}) | import("../../providers").IconName | undefined;
+    iconRight?: (string & {}) | import("../../providers").IconName | undefined;
+    rightSlot?: React.ReactNode;
+} & React.RefAttributes<TextInput>>;
+export { TelInput };

package/dist/components/Input/TelInput.js

@@ -0,0 +1,41 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TelInput = void 0;
+var react_1 = __importStar(require("react"));
+var Input_1 = require("./Input");
+var TelInput = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(Input_1.Input, __assign({}, props, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
+exports.TelInput = TelInput;

package/dist/components/Input/TextInput.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 import { TextInput as RNTextInput } from 'react-native';
-declare const TextInput: import("react").ForwardRefExoticComponent<import("react-native/types").TextInputProps & {
+declare const TextInput: React.ForwardRefExoticComponent<import("react-native/types").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: import("../../providers").IconName | undefined;
-    iconRight?: import("../../providers").IconName | undefined;
-    rightSlot?: import("react").ReactNode;
-} & import("react").RefAttributes<RNTextInput>>;
+    iconLeft?: (string & {}) | import("../../providers").IconName | undefined;
+    iconRight?: (string & {}) | import("../../providers").IconName | undefined;
+    rightSlot?: React.ReactNode;
+} & React.RefAttributes<RNTextInput>>;
 export { TextInput };

package/dist/components/Input/TextInput.js

@@ -10,10 +10,32 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var Input_1 = require("./Input");
-var TextInput = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(Input_1.Input, __assign({}, props, { keyboardType: "default", ref: ref }))); });
+var TextInput = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(Input_1.Input, __assign({}, props, { keyboardType: "default", ref: ref }))); });
 exports.TextInput = TextInput;

package/dist/components/Input/TextareaInput.d.ts

@@ -1,16 +1,16 @@
-/// <reference types="react" />
+import React from 'react';
 import { TextInput as RNTextInput } from 'react-native';
 import { InputProps } from './Input';
 declare type TextareaInputProps = InputProps & {
     rows?: number;
 };
-declare const TextareaInput: import("react").ForwardRefExoticComponent<import("react-native/types").TextInputProps & {
+declare const TextareaInput: React.ForwardRefExoticComponent<import("react-native/types").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: import("../../providers").IconName | undefined;
-    iconRight?: import("../../providers").IconName | undefined;
-    rightSlot?: import("react").ReactNode;
+    iconLeft?: (string & {}) | import("../../providers").IconName | undefined;
+    iconRight?: (string & {}) | import("../../providers").IconName | undefined;
+    rightSlot?: React.ReactNode;
 } & {
     rows?: number | undefined;
-} & import("react").RefAttributes<RNTextInput>>;
+} & React.RefAttributes<RNTextInput>>;
 export { TextareaInput, TextareaInputProps };

package/dist/components/Input/TextareaInput.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -50,18 +46,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextareaInput = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_native_1 = __importStar(require("../../styled.native"));
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../../hooks");
+var styled_native_1 = require("../../styled.native");
+var theme_1 = require("../../theme");
 var utils_1 = require("../../utils");
 var Input_1 = require("./Input");
-var StyledInput = (0, styled_native_1.default)(Input_1.Input)(function (_a) {
-    var core = _a.theme.core, rows = _a.rows;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", " ", " ", " ", ";\n    height: ", "px;\n  "], ["\n    padding: ", " ", " ", " ", ";\n    height: ", "px;\n  "])), core.space[3], core.space[2], core.space[2], core.space[2], (0, utils_1.pxToNumber)(core.space[8]) * rows);
-});
 var TextareaInput = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.rows, rows = _b === void 0 ? 3 : _b, rest = __rest(_a, ["rows"]);
-    return ((0, jsx_runtime_1.jsx)(StyledInput, __assign({}, rest, { keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref })));
+    var input = (0, styled_native_1.useTheme)().input;
+    var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
+    var height = (0, utils_1.pxToNumber)(input.padding) * 2 +
+        (0, utils_1.pxToNumber)((0, theme_1.calculateLineHeight)(smallAndUp ? input.fontSize[1] : input.fontSize[0], input.lineHeight)) *
+            rows;
+    return (react_1.default.createElement(Input_1.Input, __assign({}, rest, { keyboardType: "default", multiline: true, textAlignVertical: "top", style: { height: height }, ref: ref })));
 });
 exports.TextareaInput = TextareaInput;
-var templateObject_1;

package/dist/components/Input/index.d.ts

@@ -1,7 +1,7 @@
 export { CurrencyInput } from './CurrencyInput';
 export { EmailInput } from './EmailInput';
 export { NumberInput } from './NumberInput';
-export { PhoneInput } from './PhoneInput';
+export { TelInput } from './TelInput';
 export { TextInput } from './TextInput';
 export { PasswordInput } from './PasswordInput';
 export { TextareaInput } from './TextareaInput';

package/dist/components/Input/index.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextareaInput = exports.PasswordInput = exports.TextInput = exports.PhoneInput = exports.NumberInput = exports.EmailInput = exports.CurrencyInput = void 0;
+exports.TextareaInput = exports.PasswordInput = exports.TextInput = exports.TelInput = exports.NumberInput = exports.EmailInput = exports.CurrencyInput = void 0;
 var CurrencyInput_1 = require("./CurrencyInput");
 Object.defineProperty(exports, "CurrencyInput", { enumerable: true, get: function () { return CurrencyInput_1.CurrencyInput; } });
 var EmailInput_1 = require("./EmailInput");
 Object.defineProperty(exports, "EmailInput", { enumerable: true, get: function () { return EmailInput_1.EmailInput; } });
 var NumberInput_1 = require("./NumberInput");
 Object.defineProperty(exports, "NumberInput", { enumerable: true, get: function () { return NumberInput_1.NumberInput; } });
-var PhoneInput_1 = require("./PhoneInput");
-Object.defineProperty(exports, "PhoneInput", { enumerable: true, get: function () { return PhoneInput_1.PhoneInput; } });
+var TelInput_1 = require("./TelInput");
+Object.defineProperty(exports, "TelInput", { enumerable: true, get: function () { return TelInput_1.TelInput; } });
 var TextInput_1 = require("./TextInput");
 Object.defineProperty(exports, "TextInput", { enumerable: true, get: function () { return TextInput_1.TextInput; } });
 var PasswordInput_1 = require("./PasswordInput");