@ovotech/element-native 2.0.3 → 2.1.0

package/dist/components/Accordion/Accordion.js

@@ -82,7 +82,7 @@ var Accordion = function (_a) {
         headingComponent,
     ]);
     var _d = (0, hooks_1.useLayout)(0), layout = _d[0], onLayout = _d[1];
-    var open = (0, react_native_reanimated_1.useSharedValue)(expanded);
+    var _e = (0, react_1.useState)(expanded), open = _e[0], setOpen = _e[1];
     var handleHeightContent = (0, react_1.useMemo)(function () { return layout.height || 100; }, [
         layout.height,
     ]);
@@ -103,19 +103,19 @@ var Accordion = function (_a) {
             }
         })();
     }, [handleHeightContent, size]);
-    var progress = (0, react_native_reanimated_1.useDerivedValue)(function () { return (0, react_native_reanimated_1.withTiming)(open.value ? 1 : 0); });
+    var progress = (0, react_native_reanimated_1.useDerivedValue)(function () { return (0, react_native_reanimated_1.withTiming)(open ? 1 : 0); });
     var style = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
         height: size.value * progress.value + 1,
     }); });
     var toggleOpen = (0, react_1.useCallback)(function () {
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open.value);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
         if (size.value === 0) {
             (0, react_native_reanimated_1.runOnUI)(function () {
                 'worklet';
                 size.value = handleHeightContent;
             })();
         }
-        open.value = !open.value;
+        setOpen(function (o) { return !o; });
     }, [handleHeightContent, open, size]);
     var containerAnimatedStyle = (0, react_1.useMemo)(function () { return [styles_1.styles.content, style]; }, [style]);
     var headerStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
@@ -130,7 +130,7 @@ var Accordion = function (_a) {
             first ? styles_1.styles.topItem : null,
             last ? styles_1.styles.bottomItem : null,
         ] },
-        react_1.default.createElement(react_native_1.TouchableOpacity, { accessibilityState: { expanded: expanded }, onPress: toggleOpen, style: styles_1.styles.accordionHeader },
+        react_1.default.createElement(react_native_1.TouchableOpacity, { accessibilityState: { expanded: open }, onPress: toggleOpen, style: styles_1.styles.accordionHeader, testID: "accordionTitle" },
             react_1.default.createElement(AnimatedHeading, { style: [headerStyle, styles_1.styles.accordionHeaderText] }, title),
             react_1.default.createElement(Icon_1.AccordionIcon, { animationTiming: progress })),
         react_1.default.createElement(react_native_reanimated_1.default.View, { style: containerAnimatedStyle },

package/dist/components/Accordion/types.d.ts

@@ -11,6 +11,7 @@ export declare type AccordionProps = PropsWithChildren<{
     headingComponent?: React.ComponentType<any>;
     first?: boolean;
     last?: boolean;
+    testId?: string;
 }>;
 export declare type AccordionGroupProps = {
     /**

package/dist/components/Badge/Badge.d.ts

@@ -6,6 +6,7 @@ export declare type BadgeVariant = {
 };
 declare const StyledBadge: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme, {
     variant?: BadgeVariantName | (string & {}) | undefined;
+    inverted?: boolean | undefined;
 }, never>;
 declare type BadgeProps = ComponentProps<typeof StyledBadge>;
 export declare const Badge: ({ children, variant, ...rest }: BadgeProps) => JSX.Element;

package/dist/components/Badge/Badge.js

@@ -58,16 +58,18 @@ var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var theme_1 = require("../../theme");
 var StyledBadge = styled_native_1.default.View(function (_a) {
-    var badge = _a.theme.badge, _b = _a.variant, variant = _b === void 0 ? 'default' : _b;
+    var badge = _a.theme.badge, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.inverted, inverted = _c === void 0 ? false : _c;
     // @ts-ignore to support additional palettes.
     var currentVariant = badge.variants[variant];
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0 ", ";\n    border-radius: ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "], ["\n    padding: 0 ", ";\n    border-radius: ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "])), badge.paddingHorizontal, badge.borderRadius, currentVariant.background);
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0 ", ";\n    border-radius: ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "], ["\n    padding: 0 ", ";\n    border-radius: ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "])), badge.paddingHorizontal, badge.borderRadius, inverted
+        ? currentVariant.foreground
+        : currentVariant.background);
 });
 var StyledBadgeText = styled_native_1.default.Text(function (_a) {
-    var badge = _a.theme.badge, _b = _a.variant, variant = _b === void 0 ? 'default' : _b;
+    var badge = _a.theme.badge, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.inverted, inverted = _c === void 0 ? false : _c;
     // @ts-ignore to support additional palettes.
     var currentVariant = badge.variants[variant];
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "])), badge.fontFamily, badge.fontWeight, (0, theme_1.calculateLineHeight)(badge.fontSize[1], badge.lineHeight), currentVariant.foreground, badge.fontSize[1]);
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "])), badge.fontFamily, badge.fontWeight, (0, theme_1.calculateLineHeight)(badge.fontSize[1], badge.lineHeight), inverted ? currentVariant.background : currentVariant.foreground, badge.fontSize[1]);
 });
 var Badge = function (_a) {
     var children = _a.children, variant = _a.variant, rest = __rest(_a, ["children", "variant"]);

package/dist/components/CTALink/CTALink.d.ts

@@ -3,10 +3,9 @@ import { TouchableOpacity } from 'react-native';
 import { CTAButton } from '../CTAButton';
 declare type CTALinkProps = Omit<ComponentProps<typeof CTAButton>, 'ref'> & {
     ref: Ref<TouchableOpacity>;
-    opensInNewWindow?: boolean;
 };
-declare const CTALink: React.ForwardRefExoticComponent<Pick<CTALinkProps, "variant" | "fullWidth" | "iconLeft" | "iconRight" | keyof import("react-native").TouchableOpacityProps | "opensInNewWindow"> & React.RefAttributes<TouchableOpacity>>;
+declare const CTALink: React.ForwardRefExoticComponent<Pick<CTALinkProps, "variant" | "fullWidth" | "iconLeft" | "iconRight" | keyof import("react-native/types").TouchableOpacityProps> & React.RefAttributes<TouchableOpacity>>;
 declare type CTAProps = Omit<ComponentProps<typeof CTALink>, 'variant'>;
-declare const PrimaryCTALink: React.ForwardRefExoticComponent<Pick<CTAProps, "fullWidth" | "key" | "iconLeft" | "iconRight" | keyof import("react-native").TouchableOpacityProps | "opensInNewWindow"> & React.RefAttributes<TouchableOpacity>>;
-declare const SecondaryCTALink: React.ForwardRefExoticComponent<Pick<CTAProps, "fullWidth" | "key" | "iconLeft" | "iconRight" | keyof import("react-native").TouchableOpacityProps | "opensInNewWindow"> & React.RefAttributes<TouchableOpacity>>;
+declare const PrimaryCTALink: React.ForwardRefExoticComponent<Pick<CTAProps, "fullWidth" | "key" | "iconLeft" | "iconRight" | keyof import("react-native/types").TouchableOpacityProps> & React.RefAttributes<TouchableOpacity>>;
+declare const SecondaryCTALink: React.ForwardRefExoticComponent<Pick<CTAProps, "fullWidth" | "key" | "iconLeft" | "iconRight" | keyof import("react-native/types").TouchableOpacityProps> & React.RefAttributes<TouchableOpacity>>;
 export { CTALink, PrimaryCTALink, SecondaryCTALink };

package/dist/components/Checkbox/Checkbox.js

@@ -90,9 +90,9 @@ var StyledCheckboxInputCheck = (0, styled_native_1.default)(CheckboxCheck)(funct
     return "\n      margin-top: ".concat(checkDistance, "px;\n      margin-left: ").concat(checkDistance, "px;\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
 });
 var Input = function (_a) {
-    var checked = _a.checked, invalid = _a.invalid, rest = __rest(_a, ["checked", "invalid"]);
+    var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
     return (react_1.default.createElement(StyledCheckboxInputWrapper, __assign({}, rest),
-        react_1.default.createElement(StyledCheckboxInput, { invalid: invalid, checked: checked },
+        react_1.default.createElement(StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID },
             react_1.default.createElement(StyledCheckboxInputCheck, { checked: checked }))));
 };
 var CheckLabelText = (0, styled_native_1.default)(LabelText_1.LabelText)(function (_a) {
@@ -101,16 +101,14 @@ var CheckLabelText = (0, styled_native_1.default)(LabelText_1.LabelText)(functio
 });
 var StyledWrapper = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
 var Checkbox = (0, react_1.forwardRef)(function (_a, ref) {
-    var label = _a.label, hint = _a.hint, error = _a.error, checked = _a.checked, optional = _a.optional, invalid = _a.invalid, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, rest = __rest(_a, ["label", "hint", "error", "checked", "optional", "invalid", "activeOpacity"]);
+    var label = _a.label, hint = _a.hint, error = _a.error, checked = _a.checked, optional = _a.optional, invalid = _a.invalid, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, rest = __rest(_a, ["label", "hint", "error", "checked", "optional", "invalid", "activeOpacity", "testID"]);
     var hasError = !!error;
     return (react_1.default.createElement(FormGroup_1.FormGroup, { error: hasError },
         react_1.default.createElement(Stack_1.Stack, { spaceBetween: 1 },
             error ? react_1.default.createElement(ErrorText_1.ErrorText, null, error) : null,
-            react_1.default.createElement(react_native_1.TouchableOpacity, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, 
-                // @ts-ignore
-                invalid: hasError || invalid }, rest),
+            react_1.default.createElement(react_native_1.TouchableOpacity, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest),
                 react_1.default.createElement(StyledWrapper, null,
-                    react_1.default.createElement(Input, { checked: checked, invalid: hasError || invalid }),
+                    react_1.default.createElement(Input, { checked: checked, invalid: hasError || invalid, testID: testID }),
                     react_1.default.createElement(react_native_1.View, { style: { flexShrink: 1 } },
                         react_1.default.createElement(CheckLabelText, null,
                             label,

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,5 @@
+export declare type DividerProps = {
+    type?: 'default' | 'differentiated';
+    width?: string;
+};
+export declare const Divider: ({ type, width }: DividerProps) => JSX.Element;

package/dist/components/Divider/Divider.js

@@ -0,0 +1,45 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_native_1 = __importStar(require("../../styled.native"));
+var StyledDivider = styled_native_1.default.View(function (_a) {
+    var colors = _a.theme.colors, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 1px;\n      background: ", ";\n      width: ", ";\n    "], ["\n      height: 1px;\n      background: ", ";\n      width: ", ";\n    "])), type === 'default' ? colors.primaryContrast : '#ECE5DD', width);
+});
+var Divider = function (_a) {
+    var type = _a.type, width = _a.width;
+    return react_1.default.createElement(StyledDivider, { type: type, width: width });
+};
+exports.Divider = Divider;
+var templateObject_1;

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

@@ -0,0 +1 @@
+export { Divider } from './Divider';

package/dist/components/Divider/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = void 0;
+var Divider_1 = require("./Divider");
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });

package/dist/components/Grid/Col.d.ts

@@ -8,5 +8,5 @@ declare const Col: import("react").ForwardRefExoticComponent<Pick<Omit<{
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
-}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<import("react-native").View>>;
+}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<import("react-native/types").View>>;
 export { Col };

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

@@ -4,11 +4,12 @@ import { InputProps } from './Input';
 export declare type CurrencyInputProps = InputProps & {
     currency?: 'GBP' | 'EUR' | 'AUD' | 'USD';
 };
-declare const CurrencyInput: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
+declare const CurrencyInput: 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;
 } & {
     currency?: "GBP" | "EUR" | "AUD" | "USD" | undefined;
 } & React.RefAttributes<TextInput>>;

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

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { TextInputProps, TextInput } from 'react-native';
 import { IconName } from '../../providers/types';
 export declare type InputProps = TextInputProps & {
@@ -6,11 +6,13 @@ export declare type InputProps = TextInputProps & {
     stretch?: boolean;
     iconLeft?: IconName | (string & {});
     iconRight?: IconName | (string & {});
+    rightSlot?: ReactNode;
 };
 declare const Input: React.ForwardRefExoticComponent<TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
     iconLeft?: (string & {}) | IconName | undefined;
     iconRight?: (string & {}) | IconName | undefined;
+    rightSlot?: ReactNode;
 } & React.RefAttributes<TextInput>>;
 export { Input };

package/dist/components/Input/Input.js

@@ -62,13 +62,13 @@ var StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
     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 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, 
+        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,7 +81,8 @@ 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: (0, utils_1.pxToNumber)(input.icon.size), focused: focused, pointerEvents: "none", side: "right" })) : null,
+        rightSlot));
 });
 exports.Input = Input;
 var InputWrapper = styled_native_1.default.View(function (_a) {
@@ -92,11 +93,11 @@ var InputWrapper = styled_native_1.default.View(function (_a) {
         : 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 input = _a.theme.input, invalid = _a.invalid, smallAndUp = _a.smallAndUp, iconLeft = _a.iconLeft, iconRight = _a.iconRight, hasRightSlot = _a.hasRightSlot;
     var fontSize = smallAndUp ? input.fontSize[1] : input.fontSize[0];
     var errorStyles = invalid
         ? "\n        border-width: ".concat(input.error.borderWidth, ";\n        border-color: ").concat(input.error.color, ";\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      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 || hasRightSlot ? "padding-right: ".concat(input.height, ";") : '', 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,4 @@
+/// <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, {
+    focused: boolean;
+}, never>;

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

@@ -0,0 +1,40 @@
+"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"));
+var utils_1 = require("../../utils");
+exports.StyledPressable = (0, styled_native_1.default)(react_native_1.Pressable)(function (_a) {
+    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.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,54 @@
+"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 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 () {
+    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 input = (0, react_1.useContext)(styled_native_1.ThemeContext).input;
+    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: (0, utils_1.pxToNumber)(input.icon.size), onFocus: function () {
+            setFocused(true);
+        }, onBlur: function () {
+            setFocused(false);
+        } },
+        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

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

@@ -74,7 +74,7 @@ var StyledBullet = styled_native_1.default.Text(function (_a) {
         : list.listItem.lineHeight[0];
     return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "])), text.fontFamily, lineHeight, text.fontWeight, text.color, fontSize, list.listItem.bulletGap, space[4]);
 });
-var StyledUlItem = styled_native_1.default.View(function () { return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: top;\n    justify-content: center;\n  "], ["\n    flex-direction: row;\n    align-items: top;\n    justify-content: center;\n  "]))); });
+var StyledUlItem = styled_native_1.default.View(function () { return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n  "], ["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n  "]))); });
 var Bullet = (0, utils_1.styledComponentWithBreakpoints)(StyledBullet);
 var ListBulletItem = function (_a) {
     var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b;

package/dist/components/NavHeader/NavHeader.d.ts

@@ -8,6 +8,7 @@ declare type NavHeaderOptions = {
     statusBarHeight?: number;
     header?(): React.ReactNode;
     headerLeft?(): React.ReactNode;
+    headerRight?(): React.ReactNode;
     canGoBack(): boolean;
     goBack(): void;
 };

package/dist/components/NavHeader/NavHeader.js

@@ -49,30 +49,29 @@ var LeftHeaderText = (0, styled_native_1.default)(StyledText)(function (_a) {
     var space = _a.theme.space;
     return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-left: ", ";\n  "], ["\n    padding-left: ", ";\n  "])), space[2]);
 });
-var FeedbackText = (0, styled_native_1.default)(StyledText)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  text-align: right;\n"], ["\n  text-align: right;\n"])));
 var HeadlineView = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
     var space = _a.theme.space;
-    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0 ", " ", ";\n  "], ["\n    padding: 0 ", " ", ";\n  "])), space[3], space[3]);
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: 0 ", " ", ";\n  "], ["\n    padding: 0 ", " ", ";\n  "])), space[3], space[3]);
 });
 var RootView = styled_native_1.default.View(function (_a) {
     var colors = _a.theme.colors;
-    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n  "])), colors.primary);
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n  "])), colors.primary);
 });
 var StyledView = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
     var space = _a.theme.space, marginTop = _a.marginTop;
-    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "], ["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "])), space[3], space[2], marginTop !== null && marginTop !== void 0 ? marginTop : 0);
+    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "], ["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "])), space[3], space[2], marginTop !== null && marginTop !== void 0 ? marginTop : 0);
 });
 var StyledHeading4 = (0, styled_native_1.default)(Heading_1.Heading4)(function (_a) {
     var _b = _a.theme, fonts = _b.fonts, fontWeights = _b.fontWeights, colors = _b.colors, textAlign = _a.textAlign;
-    return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "])), fonts.bold, fontWeights.bold, colors.primaryContrast, textAlign);
+    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "])), fonts.bold, fontWeights.bold, colors.primaryContrast, textAlign);
 });
 var StyledHeading3 = (0, styled_native_1.default)(Heading_1.Heading3)(function (_a) {
     var colors = _a.theme.colors;
-    return (0, styled_native_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "], ["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "])), colors.primaryContrast);
+    return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "], ["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "])), colors.primaryContrast);
 });
 var NavHeader = function (_a) {
     var options = _a.options, headline = _a.headline;
-    return (react_1.default.createElement(RootView, { layout: react_native_reanimated_1.Layout.duration(150) },
+    return (react_1.default.createElement(RootView, { layout: react_native_reanimated_1.Layout === null || react_native_reanimated_1.Layout === void 0 ? void 0 : react_native_reanimated_1.Layout.duration(150) },
         react_1.default.createElement(StyledView, { marginTop: options === null || options === void 0 ? void 0 : options.statusBarHeight },
             (options === null || options === void 0 ? void 0 : options.headerLeft) ? (options === null || options === void 0 ? void 0 : options.headerLeft()) : (options === null || options === void 0 ? void 0 : options.canGoBack()) ? (react_1.default.createElement(react_native_1.TouchableOpacity, { style: {
                     flexDirection: 'row',
@@ -85,9 +84,8 @@ var NavHeader = function (_a) {
                 react_1.default.createElement(LeftHeaderText, null, "Back"))) : null,
             react_1.default.createElement(react_native_reanimated_1.default.View, { entering: react_native_reanimated_1.FadeIn, exiting: react_native_reanimated_1.FadeOut, style: { flex: 1, flexGrow: 3, flexShrink: 1 } },
                 react_1.default.createElement(StyledHeading4, { textAlign: (options === null || options === void 0 ? void 0 : options.canGoBack()) ? 'center' : 'left', numberOfLines: 1 }, !headline ? options === null || options === void 0 ? void 0 : options.title : ' ')),
-            react_1.default.createElement(react_native_1.TouchableOpacity, { style: { flex: 1, flexGrow: 1, flexShrink: 1 } },
-                react_1.default.createElement(FeedbackText, null, "Feedback"))),
+            react_1.default.createElement(react_native_1.View, { style: { flex: 1, flexGrow: 1, flexShrink: 1 } }, options.headerRight ? options.headerRight() : null)),
         headline ? (react_1.default.createElement(HeadlineView, { entering: react_native_reanimated_1.FadeIn, exiting: react_native_reanimated_1.FadeOut }, (options === null || options === void 0 ? void 0 : options.title) ? (react_1.default.createElement(StyledHeading3, null, options.title)) : null)) : null));
 };
 exports.NavHeader = NavHeader;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;