@ovotech/element-native 2.0.4 → 2.2.0-canary-1cac2ba-73

package/dist/components/Input/Input.js

@@ -53,22 +53,18 @@ exports.Input = void 0;
 var react_1 = __importStar(require("react"));
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
-var utils_1 = require("../../utils");
 var Icon_1 = require("../Icon/Icon");
 var StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
-    var _b = _a.theme, input = _b.input, focusRing = _b.focusRing, side = _a.side, 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    position: absolute;\n    width: ", ";\n    z-index: 1;\n    top: ", "px;\n    ", ";\n    ", ";\n  "], ["\n    position: absolute;\n    width: ", ";\n    z-index: 1;\n    top: ", "px;\n    ", ";\n    ", ";\n  "])), input.icon.size, distance, side === 'left' ? "left: ".concat(distance, "px") : '', side === 'right' ? "right: ".concat(distance, "px") : '');
+    var core = _a.theme.core, side = _a.side, focused = _a.focused;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "], ["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "])), focused ? '16px' : '14px', side === 'left' ? "left: ".concat(core.space[2]) : '', side === 'right' ? "right: ".concat(core.space[2]) : '');
 });
 var Input = (0, react_1.forwardRef)(function (_a, ref) {
-    var onFocus = _a.onFocus, onBlur = _a.onBlur, style = _a.style, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight"]);
+    var onFocus = _a.onFocus, onBlur = _a.onBlur, style = _a.style, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rightSlot = _a.rightSlot, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight", "rightSlot"]);
     var _b = (0, react_1.useState)(false), focused = _b[0], setFocused = _b[1];
     var breakpoints = (0, hooks_1.useBreakpoint)();
-    var input = (0, react_1.useContext)(styled_native_1.ThemeContext).input;
     return (react_1.default.createElement(InputWrapper, { focused: focused },
-        iconLeft ? (react_1.default.createElement(StyledIcon, { name: iconLeft, size: (0, utils_1.pxToNumber)(input.icon.size), focused: focused, pointerEvents: "none", side: "left" })) : null,
-        react_1.default.createElement(StyledInput, __assign({}, rest, breakpoints, { iconLeft: !!iconLeft, iconRight: !!iconRight, style: style, 
+        iconLeft ? (react_1.default.createElement(StyledIcon, { name: iconLeft, size: 16, focused: focused, pointerEvents: "none", side: "left" })) : null,
+        react_1.default.createElement(StyledInput, __assign({}, rest, breakpoints, { iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, 
             // @ts-ignore
             ref: ref, onFocus: function (event) {
                 setFocused(true);
@@ -81,22 +77,24 @@ var Input = (0, react_1.forwardRef)(function (_a, ref) {
                     onBlur(event);
                 }
             } })),
-        iconRight ? (react_1.default.createElement(StyledIcon, { name: iconRight, size: (0, utils_1.pxToNumber)(input.icon.size), focused: focused, pointerEvents: "none", side: "right" })) : null));
+        iconRight && !rightSlot ? (react_1.default.createElement(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null,
+        rightSlot));
 });
 exports.Input = Input;
 var InputWrapper = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, input = _b.input, focusRing = _b.focusRing, focused = _a.focused;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    align-self: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    border-width: 0px;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "], ["\n    align-self: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    border-width: 0px;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "])), input.background, input.borderRadius, focusRing.color, focused
-        ? "\n      border-width: ".concat(focusRing.width, ";\n      padding: ").concat(focusRing.distance, ";\n      margin: -").concat((0, utils_1.pxToNumber)(focusRing.width) +
-            (0, utils_1.pxToNumber)(focusRing.distance), "px;")
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, focused = _a.focused;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "], ["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "])), core.radius.small, semantic.border.functional, focused
+        ? "\n      border-width: ".concat(core.borderWidth.small, ";\n      border-color: ").concat(semantic.focus.outline, ";\n      padding: 2px;\n      margin: -4px;")
         : null);
 });
 var StyledInput = styled_native_1.default.TextInput(function (_a) {
-    var input = _a.theme.input, invalid = _a.invalid, smallAndUp = _a.smallAndUp, iconLeft = _a.iconLeft, iconRight = _a.iconRight;
-    var fontSize = smallAndUp ? input.fontSize[1] : input.fontSize[0];
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, smallAndUp = _a.smallAndUp, iconLeft = _a.iconLeft, iconRight = _a.iconRight, hasRightSlot = _a.hasRightSlot;
+    var fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
     var errorStyles = invalid
-        ? "\n        border-width: ".concat(input.error.borderWidth, ";\n        border-color: ").concat(input.error.color, ";\n      ")
+        ? "\n        border-color: ".concat(semantic.message.error, ";\n      ")
         : '';
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-family: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      height: ", ";\n      line-height: 18px; /* Corrects for responsive line height in fixed height input */\n      border: ", " solid ", ";\n      background: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      flex: 1;\n\n      ", "\n      ", "\n\n      ", "\n    "], ["\n      font-family: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      height: ", ";\n      line-height: 18px; /* Corrects for responsive line height in fixed height input */\n      border: ", " solid ", ";\n      background: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      flex: 1;\n\n      ", "\n      ", "\n\n      ", "\n    "])), input.fontFamily, input.fontWeight, input.color, fontSize, input.height, input.borderWidth, input.borderColor, input.background, input.borderRadius, input.padding, iconLeft ? "padding-left: ".concat(input.height, ";") : '', iconRight ? "padding-right: ".concat(input.height, ";") : '', errorStyles);
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          font-family: ", ";\n          color: ", ";\n          font-size: ", ";\n          height: ", ";\n          line-height: 18px; /* Corrects for responsive line height in fixed height input */\n          border: ", " solid ", ";\n          border-radius: ", ";\n          padding: 0 ", ";\n          flex: 1;\n\n          ", "\n          ", "\n\n          ", "\n        "], ["\n          font-family: ", ";\n          color: ", ";\n          font-size: ", ";\n          height: ", ";\n          line-height: 18px; /* Corrects for responsive line height in fixed height input */\n          border: ", " solid ", ";\n          border-radius: ", ";\n          padding: 0 ", ";\n          flex: 1;\n\n          ", "\n          ", "\n\n          ", "\n        "])), core.fontFamily.body.native, semantic.message.base, fontSize, core.space[11], core.borderWidth.small, semantic.border.functional, core.radius.small, core.space[2], iconLeft ? "padding-left: ".concat(core.space[8], ";") : '', iconRight || hasRightSlot ? "padding-right: ".concat(core.space[8], ";") : '', errorStyles);
 });
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { TextInput as RNTextInput } from 'react-native';
-declare const NumberInput: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
+declare const NumberInput: 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<RNTextInput>>;
 export { NumberInput };

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

@@ -1,9 +1,12 @@
 import React from 'react';
 import { TextInput as RNTextInput } from 'react-native';
-declare const PasswordInput: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
+declare const PasswordInput: 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;
+} & {
+    hasVisibilityToggle?: boolean | undefined;
 } & React.RefAttributes<RNTextInput>>;
 export { PasswordInput };

package/dist/components/Input/PasswordInput.js

@@ -48,8 +48,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PasswordInput = void 0;
 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 _b = _a.secureTextEntry, secureTextEntry = _b === void 0 ? true : _b, props = __rest(_a, ["secureTextEntry"]);
-    return (react_1.default.createElement(Input_1.Input, __assign({}, props, { keyboardType: "default", autoCapitalize: "none", autoCorrect: false, secureTextEntry: secureTextEntry, ref: ref })));
+    var props = __rest(_a, []);
+    var _b = (0, PasswordVisibilityToggle_1.useTogglePasswordVisibility)(), isPasswordVisible = _b.isPasswordVisible, handlePasswordVisibility = _b.handlePasswordVisibility;
+    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

@@ -0,0 +1,231 @@
+/// <reference types="react" />
+export declare const StyledPressable: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-native/types").PressableProps & import("react").RefAttributes<import("react-native/types").View>>, import("../../theme/theme").Theme & {
+    core: {
+        radius: Record<"small" | "medium" | "large" | "max", string>;
+        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>;
+        transition: Record<"medium" | "slow" | "fast", string>;
+        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
+        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
+            lightest: string;
+            lighter: string;
+            light: string;
+            base: string;
+            dark: string;
+            darker: string;
+            darkest: string;
+        }> & {
+            brand: Record<string, string>;
+        };
+        fontFamily: Record<"heading" | "body" | "mono" | "bodyBold", {
+            native: string;
+            web: string;
+        }>;
+        fontWeight: Record<"bold" | "book" | "black", string | number>;
+        fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+            small: string | number;
+            large: string | number;
+        }>;
+        lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+            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> & {
+            message: Record<"base" | "link" | "secondary" | "branded", string>;
+        };
+        success: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        warning: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        error: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        info: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
+    };
+    component: {
+        heading1: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        heading2: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        heading3: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        heading4: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        lead: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        body: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        small: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        label: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        cta: {
+            primary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
+            secondary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
+            destructive: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                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;
+}, never>;

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

@@ -0,0 +1,37 @@
+"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 __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.StyledPressable = void 0;
+var react_native_1 = require("react-native");
+var styled_native_1 = __importStar(require("../../styled.native"));
+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 templateObject_1;

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

@@ -0,0 +1,11 @@
+export declare const useTogglePasswordVisibility: () => {
+    isPasswordVisible: boolean;
+    handlePasswordVisibility: () => void;
+};
+declare type PasswordVisibilityToggleProps = {
+    iconName: string;
+    visibilityToggleLabel: string;
+    handlePasswordVisibility: () => void;
+};
+export declare const PasswordVisibilityToggle: ({ iconName, visibilityToggleLabel, handlePasswordVisibility, }: PasswordVisibilityToggleProps) => JSX.Element;
+export {};

package/dist/components/Input/PasswordVisibilityToggle.js

@@ -0,0 +1,51 @@
+"use strict";
+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 react_1 = __importStar(require("react"));
+var Icon_1 = require("../Icon");
+var PasswordInput_styled_1 = require("./PasswordInput.styled");
+var useTogglePasswordVisibility = function () {
+    var _a = (0, react_1.useState)(false), isPasswordVisible = _a[0], setIsPasswordVisible = _a[1];
+    var handlePasswordVisibility = function () {
+        setIsPasswordVisible(!isPasswordVisible);
+    };
+    return {
+        isPasswordVisible: isPasswordVisible,
+        handlePasswordVisibility: handlePasswordVisibility,
+    };
+};
+exports.useTogglePasswordVisibility = useTogglePasswordVisibility;
+var PasswordVisibilityToggle = function (_a) {
+    var iconName = _a.iconName, visibilityToggleLabel = _a.visibilityToggleLabel, handlePasswordVisibility = _a.handlePasswordVisibility;
+    var _b = (0, react_1.useState)(false), focused = _b[0], setFocused = _b[1];
+    return (react_1.default.createElement(PasswordInput_styled_1.StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: function () {
+            setFocused(true);
+        }, onBlur: function () {
+            setFocused(false);
+        } },
+        react_1.default.createElement(Icon_1.Icon, { name: iconName, size: 16, pointerEvents: "none" })));
+};
+exports.PasswordVisibilityToggle = PasswordVisibilityToggle;

package/dist/components/Input/{TelInput.d.ts → PhoneInput.d.ts}

@@ -1,9 +1,10 @@
 import React from 'react';
 import { TextInput } from 'react-native';
-declare const TelInput: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
+declare const PhoneInput: 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 };
+export { PhoneInput };

package/dist/components/Input/{TelInput.js → PhoneInput.js}

@@ -34,8 +34,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TelInput = void 0;
+exports.PhoneInput = 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;
+var PhoneInput = (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.PhoneInput = PhoneInput;

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { TextInput as RNTextInput } from 'react-native';
-declare const TextInput: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
+declare const TextInput: 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<RNTextInput>>;
 export { TextInput };

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

@@ -4,11 +4,12 @@ import { InputProps } from './Input';
 declare type TextareaInputProps = InputProps & {
     rows?: number;
 };
-declare const TextareaInput: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
+declare const TextareaInput: 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;
 } & {
     rows?: number | undefined;
 } & React.RefAttributes<RNTextInput>>;

package/dist/components/Input/TextareaInput.js

@@ -1,4 +1,8 @@
 "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++) {
@@ -47,18 +51,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextareaInput = void 0;
 var react_1 = __importStar(require("react"));
-var hooks_1 = require("../../hooks");
-var styled_native_1 = require("../../styled.native");
-var theme_1 = require("../../theme");
+var styled_native_1 = __importStar(require("../../styled.native"));
 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"]);
-    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 })));
+    return (react_1.default.createElement(StyledInput, __assign({}, rest, { keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, 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 { TelInput } from './TelInput';
+export { PhoneInput } from './PhoneInput';
 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.TelInput = exports.NumberInput = exports.EmailInput = exports.CurrencyInput = void 0;
+exports.TextareaInput = exports.PasswordInput = exports.TextInput = exports.PhoneInput = 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 TelInput_1 = require("./TelInput");
-Object.defineProperty(exports, "TelInput", { enumerable: true, get: function () { return TelInput_1.TelInput; } });
+var PhoneInput_1 = require("./PhoneInput");
+Object.defineProperty(exports, "PhoneInput", { enumerable: true, get: function () { return PhoneInput_1.PhoneInput; } });
 var TextInput_1 = require("./TextInput");
 Object.defineProperty(exports, "TextInput", { enumerable: true, get: function () { return TextInput_1.TextInput; } });
 var PasswordInput_1 = require("./PasswordInput");