@ovotech/element-native 2.0.4 → 2.1.0

package/dist/components/SkeletonLoading/SkeletonAnimation.js

@@ -0,0 +1,57 @@
+"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.SkeletonAnimation = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var SkeletonAnimation = function (_a) {
+    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? 'pulse' : _b, testID = _a.testID;
+    var animationRef = (0, react_1.useRef)(new react_native_1.Animated.Value(0));
+    var animationLoop = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        animationLoop.current = react_native_1.Animated.timing(animationRef.current, {
+            toValue: 2,
+            delay: 400,
+            duration: 1500,
+            useNativeDriver: !!react_native_1.Platform.select({
+                web: false,
+                native: true,
+            }),
+        });
+        animationRef.current.setValue(0);
+        react_native_1.Animated.loop(animationLoop.current).start();
+    }, []);
+    return (react_1.default.createElement(react_native_1.View, { accessibilityRole: "none", accessibilityLabel: "loading...", accessible: false, testID: testID }, animation === 'pulse' ? (react_1.default.createElement(react_native_1.Animated.View, { style: [
+            {
+                height: '100%',
+                width: '100%',
+                opacity: animationRef.current.interpolate({
+                    inputRange: [0.25, 1, 2],
+                    outputRange: [1, 0.25, 1],
+                }),
+            },
+        ] }, children)) : (react_1.default.createElement(react_native_1.View, null, children))));
+};
+exports.SkeletonAnimation = SkeletonAnimation;

package/dist/components/SkeletonLoading/SkeletonCTA.js

@@ -30,12 +30,14 @@ var react_1 = __importDefault(require("react"));
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var Text_1 = require("../Text");
 var Skeleton_1 = require("./Skeleton");
+var SkeletonAnimation_1 = require("./SkeletonAnimation");
 var StyledSkeletonCTA = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
     var _b = _a.theme, colors = _b.colors, space = _b.space, size = _a.size;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n    height: ").concat(space[12], ";\n  ");
 });
 var SkeletonCTA = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);
-    return (react_1.default.createElement(StyledSkeletonCTA, __assign({ as: Text_1.P, size: size }, rest)));
+    return (react_1.default.createElement(SkeletonAnimation_1.SkeletonAnimation, null,
+        react_1.default.createElement(StyledSkeletonCTA, __assign({ as: Text_1.P, size: size }, rest))));
 };
 exports.SkeletonCTA = SkeletonCTA;

package/dist/components/SkeletonLoading/SkeletonCircle.js

@@ -30,6 +30,7 @@ var react_1 = __importDefault(require("react"));
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var Skeleton_1 = require("./Skeleton");
+var SkeletonAnimation_1 = require("./SkeletonAnimation");
 var StyledSkeletonCircleWrapper = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
     var size = _a.size;
     return "width: ".concat(size, "; max-width: 100%;");
@@ -40,7 +41,8 @@ var StyledSkeletonCircle = (0, styled_native_1.default)(Skeleton_1.Skeleton)(fun
 });
 var SkeletonCircle = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["size"]);
-    return (react_1.default.createElement(StyledSkeletonCircleWrapper, __assign({ size: size }, rest),
-        react_1.default.createElement(StyledSkeletonCircle, { size: size })));
+    return (react_1.default.createElement(SkeletonAnimation_1.SkeletonAnimation, null,
+        react_1.default.createElement(StyledSkeletonCircleWrapper, __assign({ size: size }, rest),
+            react_1.default.createElement(StyledSkeletonCircle, { size: size }))));
 };
 exports.SkeletonCircle = SkeletonCircle;

package/dist/components/SkeletonLoading/SkeletonHeading.js

@@ -30,12 +30,14 @@ var react_1 = __importDefault(require("react"));
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var Heading_1 = require("../Heading");
 var Skeleton_1 = require("./Skeleton");
+var SkeletonAnimation_1 = require("./SkeletonAnimation");
 var StyledSkeletonHeading = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
     var colors = _a.theme.colors, size = _a.size;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n  ");
 });
 var SkeletonHeading = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading_1.Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);
-    return (react_1.default.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0"));
+    return (react_1.default.createElement(SkeletonAnimation_1.SkeletonAnimation, null,
+        react_1.default.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0")));
 };
 exports.SkeletonHeading = SkeletonHeading;

package/dist/components/SkeletonLoading/SkeletonText.js

@@ -27,12 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonText = void 0;
 var react_1 = __importDefault(require("react"));
-var react_native_1 = require("react-native");
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var Text_1 = require("../Text");
 var Skeleton_1 = require("./Skeleton");
+var SkeletonAnimation_1 = require("./SkeletonAnimation");
 var StyledSkeletonText = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
     var _b = _a.theme, colors = _b.colors, space = _b.space, responsiveFontSizes = _b.responsiveFontSizes, short = _a.short, breakpoints = _a.breakpoints;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    margin-bottom: ").concat(space[2], ";\n    ").concat((0, utils_1.responsiveStyle)('height', responsiveFontSizes.body, breakpoints), "\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
@@ -44,6 +44,6 @@ var SkeletonText = function (_a) {
     for (var i = 1; i <= lines; i++) {
         generatedLines.push(react_1.default.createElement(StyledSkeletonText, { key: "line-".concat(i), short: i === lines, breakpoints: breakpoints }));
     }
-    return (react_1.default.createElement(Text_1.P, __assign({ as: react_native_1.View }, rest), generatedLines));
+    return (react_1.default.createElement(Text_1.P, __assign({ as: SkeletonAnimation_1.SkeletonAnimation }, rest), generatedLines));
 };
 exports.SkeletonText = SkeletonText;

package/dist/components/TextField/CurrencyField.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import { TextInput as NativeTextInput } from 'react-native';
 import { FieldProps } from '../Field';
-export declare const CurrencyField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
+export declare const CurrencyField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & 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<NativeTextInput>>;

package/dist/components/TextField/EmailField.d.ts

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

package/dist/components/TextField/NumberField.d.ts

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

package/dist/components/TextField/PasswordField.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import { TextInput as NativeTextInput } from 'react-native';
 import { FieldProps } from '../Field';
-export declare const PasswordField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
+export declare const PasswordField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & 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<NativeTextInput>>;

package/dist/components/TextField/PasswordField.js

@@ -50,7 +50,7 @@ var react_1 = __importStar(require("react"));
 var Field_1 = require("../Field");
 var PasswordInput_1 = require("../Input/PasswordInput");
 exports.PasswordField = (0, react_1.forwardRef)(function (_a, ref) {
-    var rest = __rest(_a, []);
+    var hasVisibilityToggle = _a.hasVisibilityToggle, rest = __rest(_a, ["hasVisibilityToggle"]);
     return (react_1.default.createElement(Field_1.Field, __assign({}, rest, { ref: ref }),
-        react_1.default.createElement(PasswordInput_1.PasswordInput, null)));
+        react_1.default.createElement(PasswordInput_1.PasswordInput, { hasVisibilityToggle: hasVisibilityToggle })));
 });

package/dist/components/TextField/TelField.d.ts

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

package/dist/components/TextField/TextField.d.ts

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

package/dist/components/TextField/TextareaField.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import { TextInput as NativeTextInput } from 'react-native';
 import { FieldProps } from '../Field';
-export declare const TextareaField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
+export declare const TextareaField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & 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<NativeTextInput>>;

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './CTAButton';
 export * from './CTALink';
 export * from './DateField';
 export * from './Disclosure';
+export * from './Divider';
 export * from './ErrorSummaryNotification';
 export * from './Field';
 export * from './Grid';

package/dist/components/index.js

@@ -22,6 +22,7 @@ __exportStar(require("./CTAButton"), exports);
 __exportStar(require("./CTALink"), exports);
 __exportStar(require("./DateField"), exports);
 __exportStar(require("./Disclosure"), exports);
+__exportStar(require("./Divider"), exports);
 __exportStar(require("./ErrorSummaryNotification"), exports);
 __exportStar(require("./Field"), exports);
 __exportStar(require("./Grid"), exports);

package/dist/esm/components/Accordion/Accordion.js

@@ -24,7 +24,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useCallback, useMemo, useEffect } from 'react';
+import React, { useCallback, useMemo, useEffect, useState, } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, useDerivedValue, withTiming, runOnUI, interpolateColor, } from 'react-native-reanimated';
 import { theme } from '../../theme';
@@ -55,7 +55,7 @@ export var Accordion = function (_a) {
         headingComponent,
     ]);
     var _d = useLayout(0), layout = _d[0], onLayout = _d[1];
-    var open = useSharedValue(expanded);
+    var _e = useState(expanded), open = _e[0], setOpen = _e[1];
     var handleHeightContent = useMemo(function () { return layout.height || 100; }, [
         layout.height,
     ]);
@@ -76,19 +76,19 @@ export var Accordion = function (_a) {
             }
         })();
     }, [handleHeightContent, size]);
-    var progress = useDerivedValue(function () { return withTiming(open.value ? 1 : 0); });
+    var progress = useDerivedValue(function () { return withTiming(open ? 1 : 0); });
     var style = useAnimatedStyle(function () { return ({
         height: size.value * progress.value + 1,
     }); });
     var toggleOpen = 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) {
             runOnUI(function () {
                 'worklet';
                 size.value = handleHeightContent;
             })();
         }
-        open.value = !open.value;
+        setOpen(function (o) { return !o; });
     }, [handleHeightContent, open, size]);
     var containerAnimatedStyle = useMemo(function () { return [styles.content, style]; }, [style]);
     var headerStyle = useAnimatedStyle(function () { return ({
@@ -103,7 +103,7 @@ export var Accordion = function (_a) {
             first ? styles.topItem : null,
             last ? styles.bottomItem : null,
         ] },
-        React.createElement(TouchableOpacity, { accessibilityState: { expanded: expanded }, onPress: toggleOpen, style: styles.accordionHeader },
+        React.createElement(TouchableOpacity, { accessibilityState: { expanded: open }, onPress: toggleOpen, style: styles.accordionHeader, testID: "accordionTitle" },
             React.createElement(AnimatedHeading, { style: [headerStyle, styles.accordionHeaderText] }, title),
             React.createElement(AccordionIcon, { animationTiming: progress })),
         React.createElement(Animated.View, { style: containerAnimatedStyle },

package/dist/esm/components/Badge/Badge.js

@@ -29,16 +29,18 @@ import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
 import { calculateLineHeight } from '../../theme';
 var StyledBadge = styled.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 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 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.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 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, calculateLineHeight(badge.fontSize[1], badge.lineHeight), currentVariant.foreground, badge.fontSize[1]);
+    return 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, calculateLineHeight(badge.fontSize[1], badge.lineHeight), inverted ? currentVariant.background : currentVariant.foreground, badge.fontSize[1]);
 });
 export var Badge = function (_a) {
     var children = _a.children, variant = _a.variant, rest = __rest(_a, ["children", "variant"]);

package/dist/esm/components/Checkbox/Checkbox.js

@@ -64,9 +64,9 @@ var StyledCheckboxInputCheck = styled(CheckboxCheck)(function (_a) {
     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.createElement(StyledCheckboxInputWrapper, __assign({}, rest),
-        React.createElement(StyledCheckboxInput, { invalid: invalid, checked: checked },
+        React.createElement(StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID },
             React.createElement(StyledCheckboxInputCheck, { checked: checked }))));
 };
 var CheckLabelText = styled(LabelText)(function (_a) {
@@ -75,16 +75,14 @@ var CheckLabelText = styled(LabelText)(function (_a) {
 });
 var StyledWrapper = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
 var Checkbox = 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.createElement(FormGroup, { error: hasError },
         React.createElement(Stack, { spaceBetween: 1 },
             error ? React.createElement(ErrorText, null, error) : null,
-            React.createElement(TouchableOpacity, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, 
-                // @ts-ignore
-                invalid: hasError || invalid }, rest),
+            React.createElement(TouchableOpacity, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest),
                 React.createElement(StyledWrapper, null,
-                    React.createElement(Input, { checked: checked, invalid: hasError || invalid }),
+                    React.createElement(Input, { checked: checked, invalid: hasError || invalid, testID: testID }),
                     React.createElement(View, { style: { flexShrink: 1 } },
                         React.createElement(CheckLabelText, null,
                             label,

package/dist/esm/components/Divider/Divider.js

@@ -0,0 +1,15 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled, { css } from '../../styled.native';
+var StyledDivider = styled.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 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);
+});
+export var Divider = function (_a) {
+    var type = _a.type, width = _a.width;
+    return React.createElement(StyledDivider, { type: type, width: width });
+};
+var templateObject_1;

package/dist/esm/components/Divider/index.js

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

package/dist/esm/components/Input/Input.js

@@ -36,13 +36,13 @@ var StyledIcon = styled(Icon)(function (_a) {
     return 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 = 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 = useState(false), focused = _b[0], setFocused = _b[1];
     var breakpoints = useBreakpoint();
     var input = useContext(ThemeContext).input;
     return (React.createElement(InputWrapper, { focused: focused },
         iconLeft ? (React.createElement(StyledIcon, { name: iconLeft, size: pxToNumber(input.icon.size), focused: focused, pointerEvents: "none", side: "left" })) : null,
-        React.createElement(StyledInput, __assign({}, rest, breakpoints, { iconLeft: !!iconLeft, iconRight: !!iconRight, style: style, 
+        React.createElement(StyledInput, __assign({}, rest, breakpoints, { iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, 
             // @ts-ignore
             ref: ref, onFocus: function (event) {
                 setFocused(true);
@@ -55,7 +55,8 @@ var Input = forwardRef(function (_a, ref) {
                     onBlur(event);
                 }
             } })),
-        iconRight ? (React.createElement(StyledIcon, { name: iconRight, size: pxToNumber(input.icon.size), focused: focused, pointerEvents: "none", side: "right" })) : null));
+        iconRight && !rightSlot ? (React.createElement(StyledIcon, { name: iconRight, size: pxToNumber(input.icon.size), focused: focused, pointerEvents: "none", side: "right" })) : null,
+        rightSlot));
 });
 var InputWrapper = styled.View(function (_a) {
     var _b = _a.theme, input = _b.input, focusRing = _b.focusRing, focused = _a.focused;
@@ -65,12 +66,12 @@ var InputWrapper = styled.View(function (_a) {
         : null);
 });
 var StyledInput = styled.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 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 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);
 });
 export { Input };
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -22,8 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from 'react';
 import { Input } from './Input';
+import { PasswordVisibilityToggle, useTogglePasswordVisibility, } from './PasswordVisibilityToggle';
 var PasswordInput = forwardRef(function (_a, ref) {
-    var _b = _a.secureTextEntry, secureTextEntry = _b === void 0 ? true : _b, props = __rest(_a, ["secureTextEntry"]);
-    return (React.createElement(Input, __assign({}, props, { keyboardType: "default", autoCapitalize: "none", autoCorrect: false, secureTextEntry: secureTextEntry, ref: ref })));
+    var props = __rest(_a, []);
+    var _b = useTogglePasswordVisibility(), isPasswordVisible = _b.isPasswordVisible, handlePasswordVisibility = _b.handlePasswordVisibility;
+    return (React.createElement(Input, __assign({}, props, { rightSlot: props.hasVisibilityToggle ? (React.createElement(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 })));
 });
 export { PasswordInput };

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

@@ -0,0 +1,14 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { Pressable } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { pxToNumber } from '../../utils';
+export var StyledPressable = styled(Pressable)(function (_a) {
+    var _b = _a.theme, input = _b.input, focusRing = _b.focusRing, focused = _a.focused;
+    var distance = (pxToNumber(input.height) - pxToNumber(input.icon.size)) / 2 +
+        (focused ? pxToNumber(focusRing.distance) : 0);
+    return 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/esm/components/Input/PasswordVisibilityToggle.js

@@ -0,0 +1,26 @@
+import React, { useContext, useState } from 'react';
+import { ThemeContext } from '../../styled.native';
+import { pxToNumber } from '../../utils';
+import { Icon } from '../Icon';
+import { StyledPressable } from './PasswordInput.styled';
+export var useTogglePasswordVisibility = function () {
+    var _a = useState(false), isPasswordVisible = _a[0], setIsPasswordVisible = _a[1];
+    var handlePasswordVisibility = function () {
+        setIsPasswordVisible(!isPasswordVisible);
+    };
+    return {
+        isPasswordVisible: isPasswordVisible,
+        handlePasswordVisibility: handlePasswordVisibility,
+    };
+};
+export var PasswordVisibilityToggle = function (_a) {
+    var iconName = _a.iconName, visibilityToggleLabel = _a.visibilityToggleLabel, handlePasswordVisibility = _a.handlePasswordVisibility;
+    var input = useContext(ThemeContext).input;
+    var _b = useState(false), focused = _b[0], setFocused = _b[1];
+    return (React.createElement(StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: pxToNumber(input.icon.size), onFocus: function () {
+            setFocused(true);
+        }, onBlur: function () {
+            setFocused(false);
+        } },
+        React.createElement(Icon, { name: iconName, size: pxToNumber(input.icon.size), pointerEvents: "none" })));
+};

package/dist/esm/components/NavHeader/NavHeader.js

@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import React from 'react';
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import Animated, { FadeIn, FadeOut, Layout } from 'react-native-reanimated';
 import { Path, Svg } from 'react-native-svg';
 import styled, { css } from '../../styled.native';
@@ -20,30 +20,29 @@ var LeftHeaderText = styled(StyledText)(function (_a) {
     var space = _a.theme.space;
     return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-left: ", ";\n  "], ["\n    padding-left: ", ";\n  "])), space[2]);
 });
-var FeedbackText = styled(StyledText)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  text-align: right;\n"], ["\n  text-align: right;\n"])));
 var HeadlineView = styled(Animated.View)(function (_a) {
     var space = _a.theme.space;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0 ", " ", ";\n  "], ["\n    padding: 0 ", " ", ";\n  "])), space[3], space[3]);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: 0 ", " ", ";\n  "], ["\n    padding: 0 ", " ", ";\n  "])), space[3], space[3]);
 });
 var RootView = styled.View(function (_a) {
     var colors = _a.theme.colors;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n  "])), colors.primary);
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n  "])), colors.primary);
 });
 var StyledView = styled(Animated.View)(function (_a) {
     var space = _a.theme.space, marginTop = _a.marginTop;
-    return 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 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 = styled(Heading4)(function (_a) {
     var _b = _a.theme, fonts = _b.fonts, fontWeights = _b.fontWeights, colors = _b.colors, textAlign = _a.textAlign;
-    return 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 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 = styled(Heading3)(function (_a) {
     var colors = _a.theme.colors;
-    return 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 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);
 });
 export var NavHeader = function (_a) {
     var options = _a.options, headline = _a.headline;
-    return (React.createElement(RootView, { layout: Layout.duration(150) },
+    return (React.createElement(RootView, { layout: Layout === null || Layout === void 0 ? void 0 : Layout.duration(150) },
         React.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.createElement(TouchableOpacity, { style: {
                     flexDirection: 'row',
@@ -56,8 +55,7 @@ export var NavHeader = function (_a) {
                 React.createElement(LeftHeaderText, null, "Back"))) : null,
             React.createElement(Animated.View, { entering: FadeIn, exiting: FadeOut, style: { flex: 1, flexGrow: 3, flexShrink: 1 } },
                 React.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.createElement(TouchableOpacity, { style: { flex: 1, flexGrow: 1, flexShrink: 1 } },
-                React.createElement(FeedbackText, null, "Feedback"))),
+            React.createElement(View, { style: { flex: 1, flexGrow: 1, flexShrink: 1 } }, options.headerRight ? options.headerRight() : null)),
         headline ? (React.createElement(HeadlineView, { entering: FadeIn, exiting: FadeOut }, (options === null || options === void 0 ? void 0 : options.title) ? (React.createElement(StyledHeading3, null, options.title)) : null)) : null));
 };
-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;

package/dist/esm/components/Radio/Radio.js

@@ -56,9 +56,9 @@ var StyledRadioInputDot = styled.View(function (_a) {
     return "\n      width: ".concat(radio.dotSize, ";\n      height: ").concat(radio.dotSize, ";\n      margin: ").concat(dotDistance, "px;\n      border-radius: ").concat(radioSize / 2, "px;\n      background: ").concat(radio.dotColor, ";\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.createElement(StyledRadioInputWrapper, __assign({}, rest),
-        React.createElement(StyledRadioInput, { invalid: invalid, checked: checked },
+        React.createElement(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID },
             React.createElement(StyledRadioInputDot, { checked: checked }))));
 };
 var RadioLabelText = styled(LabelText)(function (_a) {
@@ -71,12 +71,10 @@ var Radio = forwardRef(function (_a, ref) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     value = _a.value, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
     _b = _a.activeOpacity, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
-    activeOpacity = _b === void 0 ? 0.8 : _b, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "activeOpacity"]);
-    return (React.createElement(TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, 
-        // @ts-ignore
-        invalid: invalid }, rest),
+    activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "activeOpacity", "testID"]);
+    return (React.createElement(TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest),
         React.createElement(StyledWrapper, null,
-            React.createElement(Input, { checked: checked, invalid: invalid }),
+            React.createElement(Input, { checked: checked, invalid: invalid, testID: testID }),
             React.createElement(View, { style: { flexShrink: 1 } },
                 React.createElement(RadioLabelText, null, label),
                 hint ? React.createElement(HintText, null, hint) : null))));