@ovotech/element-native 5.4.3 → 5.6.0

package/dist/components/Notification/Notification.styles.js

@@ -0,0 +1,115 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TitleContainer = exports.ContentContainer = exports.VariantIconContainer = exports.VariantIconBackground = exports.StyledIcon = exports.DismissButton = exports.NotificationContentBox = exports.NotificationBox = exports.NotificationShadow = void 0;
+const element_core_1 = require("@ovotech/element-core");
+const react_native_1 = require("react-native");
+const styled_native_1 = __importStar(require("../../styled.native"));
+const Icon_1 = require("../Icon");
+const utils_1 = require("./utils");
+exports.NotificationShadow = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => {
+    return (0, styled_native_1.css) `
+    shadow-color: ${theme.color.brand.dark};
+    shadow-offset: 0 ${(0, element_core_1.numToPx)(theme.space[100])};
+    shadow-opacity: ${theme.opacity.transparent};
+    shadow-radius: ${(0, element_core_1.numToPx)(theme.space[100])};
+    elevation: 6;
+  `;
+});
+exports.NotificationBox = styled_native_1.default.View(({ theme, noMargin }) => {
+    return (0, styled_native_1.css) `
+    position: relative;
+    margin-bottom: ${noMargin ? 0 : (0, element_core_1.numToPx)(theme.space[400])};
+    background: ${theme.color.surface.bright};
+    border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.md)};
+    overflow: hidden;
+    flex-direction: row;
+  `;
+});
+exports.NotificationContentBox = styled_native_1.default.View(({ theme }) => {
+    return (0, styled_native_1.css) `
+    padding-right: ${(0, element_core_1.numToPx)(theme.space[300])};
+  `;
+});
+exports.DismissButton = styled_native_1.default.TouchableOpacity(({ theme }) => {
+    return (0, styled_native_1.css) `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: ${(0, element_core_1.numToPx)(theme.space[800])};
+    height: ${(0, element_core_1.numToPx)(theme.space[800])};
+    background: ${theme.color.surface.dim};
+    border: ${(0, element_core_1.numToPx)(theme.border.width.sm)} solid ${theme.color.surface.dim};
+    border-radius: ${(0, element_core_1.numToPx)(theme.border.radius['2xl'])};
+  `;
+});
+exports.StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(({ theme, variant, }) => {
+    const currentVariant = (0, utils_1.mapVariantToIconColor)(variant);
+    return (0, styled_native_1.css) `
+    color: ${currentVariant
+        ? theme.color.alert[currentVariant]
+        : theme.color.surface.onSurface};
+  `;
+});
+exports.VariantIconBackground = (0, styled_native_1.default)(react_native_1.View)(({ theme, variant }) => {
+    const currentVariant = (0, utils_1.mapVariantToAlertColor)(variant);
+    return (0, styled_native_1.css) `
+    left: 0;
+    width: ${(0, element_core_1.numToPx)(theme.space[1200])};
+    min-height: ${(0, element_core_1.numToPx)(theme.space[1600])};
+    background: ${currentVariant
+        ? theme.color.alert[currentVariant]
+        : theme.color.surface.bright};
+    align-items: center;
+  `;
+});
+exports.VariantIconContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => (0, styled_native_1.css) `
+    top: ${(0, element_core_1.numToPx)(theme.space[400])};
+  `);
+exports.ContentContainer = styled_native_1.default.View(({ theme }) => {
+    return (0, styled_native_1.css) `
+    flex: 1;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: ${(0, element_core_1.numToPx)(theme.space[400])};
+  `;
+});
+exports.TitleContainer = styled_native_1.default.View(({ theme }) => (0, styled_native_1.css) `
+    flex: 1;
+    flex-direction: column;
+    gap: ${(0, element_core_1.numToPx)(theme.space[100])};
+    padding-right: ${(0, element_core_1.numToPx)(theme.space[100])};
+    justify-content: center;
+  `);

package/dist/components/Notification/index.js

@@ -1 +1,9 @@
-export { ErrorNotification, InfoNotification, Notification, SuccessNotification, WarningNotification, } from './Notification';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WarningNotification = exports.SuccessNotification = exports.Notification = exports.InfoNotification = exports.ErrorNotification = void 0;
+var Notification_1 = require("./Notification");
+Object.defineProperty(exports, "ErrorNotification", { enumerable: true, get: function () { return Notification_1.ErrorNotification; } });
+Object.defineProperty(exports, "InfoNotification", { enumerable: true, get: function () { return Notification_1.InfoNotification; } });
+Object.defineProperty(exports, "Notification", { enumerable: true, get: function () { return Notification_1.Notification; } });
+Object.defineProperty(exports, "SuccessNotification", { enumerable: true, get: function () { return Notification_1.SuccessNotification; } });
+Object.defineProperty(exports, "WarningNotification", { enumerable: true, get: function () { return Notification_1.WarningNotification; } });

package/dist/components/Notification/utils.d.ts

@@ -0,0 +1,5 @@
+import { NotificationVariantName } from './Notification';
+export type AlertColors = NotificationVariantName | 'errorTint' | 'successTint' | 'warningTint' | 'infoTint';
+export declare const mapVariantToIconColor: (variant: NotificationVariantName) => AlertColors;
+export declare const mapVariantToAlertColor: (variant: NotificationVariantName) => AlertColors;
+export declare const mapVariantToIconName: (variant: NotificationVariantName) => "check-circle" | "info" | "warning";

package/dist/components/Notification/utils.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapVariantToIconName = exports.mapVariantToAlertColor = exports.mapVariantToIconColor = void 0;
+const mapVariantToIconColor = (variant) => {
+    if (variant === 'error') {
+        return 'errorTint';
+    }
+    return variant;
+};
+exports.mapVariantToIconColor = mapVariantToIconColor;
+const mapVariantToAlertColor = (variant) => {
+    if (variant === 'success' || variant === 'info' || variant === 'warning') {
+        return `${variant}Tint`;
+    }
+    return variant;
+};
+exports.mapVariantToAlertColor = mapVariantToAlertColor;
+const mapVariantToIconName = (variant) => {
+    if (variant === 'success') {
+        return 'check-circle';
+    }
+    if (variant === 'error') {
+        return 'warning';
+    }
+    return variant;
+};
+exports.mapVariantToIconName = mapVariantToIconName;

package/dist/components/NumberField/NumberField.js

@@ -1,6 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Field } from '../Field';
-import { NumberInput } from '../NumberInput';
-export const NumberField = ({ ref, ...props }) => {
-    return (_jsx(Field, { ...props, children: _jsx(NumberInput, { ref: ref }) }));
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Field_1 = require("../Field");
+const NumberInput_1 = require("../NumberInput");
+const NumberField = (_a) => {
+    var { ref } = _a, props = __rest(_a, ["ref"]);
+    return ((0, jsx_runtime_1.jsx)(Field_1.Field, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { ref: ref }) })));
+};
+exports.NumberField = NumberField;

package/dist/components/NumberField/index.js

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

package/dist/components/NumberInput/NumberInput.js

@@ -1,4 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Input } from '../Input/Input';
-const NumberInput = (props) => (_jsx(Input, { keyboardType: "numeric", autoCapitalize: "none", autoCorrect: false, ...props }));
-export { NumberInput };
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Input_1 = require("../Input/Input");
+const NumberInput = (props) => ((0, jsx_runtime_1.jsx)(Input_1.Input, Object.assign({ keyboardType: "numeric", autoCapitalize: "none", autoCorrect: false }, props)));
+exports.NumberInput = NumberInput;

package/dist/components/NumberInput/index.js

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

package/dist/components/P/P.js

@@ -1,18 +1,55 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { useBreakpoint } from '../../hooks';
-import styled, { css } from '../../styled.native';
-const StyledText = styled.Text(({ theme, smallAndUp, inverted, size = 'md' }) => {
-    return css `
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.P = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_core_1 = require("@ovotech/element-core");
+const hooks_1 = require("../../hooks");
+const styled_native_1 = __importStar(require("../../styled.native"));
+const StyledText = styled_native_1.default.Text(({ theme, smallAndUp, inverted, size = 'md' }) => {
+    return (0, styled_native_1.css) `
       font-family: ${theme.native.font.family.book};
-      font-size: ${numToPx(theme.font.size[size].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
-      line-height: ${numToPx(theme.font.lineHeight[size].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+      font-size: ${(0, element_core_1.numToPx)(theme.font.size[size].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+      line-height: ${(0, element_core_1.numToPx)(theme.font.lineHeight[size].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
       color: ${inverted
         ? theme.color.surface.surface
         : theme.color.surface.onSurface};
     `;
 });
-export const P = (props) => {
-    const breakpoints = useBreakpoint();
-    return _jsx(StyledText, { ...props, ...breakpoints });
+const P = (props) => {
+    const breakpoints = (0, hooks_1.useBreakpoint)();
+    return (0, jsx_runtime_1.jsx)(StyledText, Object.assign({}, props, breakpoints));
 };
+exports.P = P;

package/dist/components/P/index.js

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

package/dist/components/PasswordField/PasswordField.js

@@ -1,6 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Field } from '../Field';
-import { PasswordInput } from '../PasswordInput';
-export const PasswordField = ({ hasVisibilityToggle, ref, ...rest }) => {
-    return (_jsx(Field, { ...rest, children: _jsx(PasswordInput, { ref: ref, hasVisibilityToggle: hasVisibilityToggle }) }));
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PasswordField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Field_1 = require("../Field");
+const PasswordInput_1 = require("../PasswordInput");
+const PasswordField = (_a) => {
+    var { hasVisibilityToggle, ref } = _a, rest = __rest(_a, ["hasVisibilityToggle", "ref"]);
+    return ((0, jsx_runtime_1.jsx)(Field_1.Field, Object.assign({}, rest, { children: (0, jsx_runtime_1.jsx)(PasswordInput_1.PasswordInput, { ref: ref, hasVisibilityToggle: hasVisibilityToggle }) })));
+};
+exports.PasswordField = PasswordField;

package/dist/components/PasswordField/index.js

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

package/dist/components/PasswordInput/PasswordInput.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Input } from '../Input/Input';
-import { PasswordVisibilityToggle, useTogglePasswordVisibility, } from './PasswordVisibilityToggle';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PasswordInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Input_1 = require("../Input/Input");
+const PasswordVisibilityToggle_1 = require("./PasswordVisibilityToggle");
 const PasswordInput = (props) => {
-    const { isPasswordVisible, handlePasswordVisibility } = useTogglePasswordVisibility();
-    return (_jsx(Input, { rightSlot: props.hasVisibilityToggle ? (_jsx(PasswordVisibilityToggle, { iconName: isPasswordVisible ? 'hide' : 'show', visibilityToggleLabel: isPasswordVisible ? 'Hide password' : 'Show password', handlePasswordVisibility: handlePasswordVisibility })) : null, keyboardType: "default", autoCapitalize: "none", autoCorrect: false, submitBehavior: "submit", secureTextEntry: !isPasswordVisible, ...props }));
+    const { isPasswordVisible, handlePasswordVisibility } = (0, PasswordVisibilityToggle_1.useTogglePasswordVisibility)();
+    return ((0, jsx_runtime_1.jsx)(Input_1.Input, Object.assign({ rightSlot: props.hasVisibilityToggle ? ((0, jsx_runtime_1.jsx)(PasswordVisibilityToggle_1.PasswordVisibilityToggle, { iconName: isPasswordVisible ? 'hide' : 'show', visibilityToggleLabel: isPasswordVisible ? 'Hide password' : 'Show password', handlePasswordVisibility: handlePasswordVisibility })) : null, keyboardType: "default", autoCapitalize: "none", autoCorrect: false, submitBehavior: "submit", secureTextEntry: !isPasswordVisible }, props)));
 };
-export { PasswordInput };
+exports.PasswordInput = PasswordInput;

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

@@ -37,6 +37,7 @@ export declare const StyledPressable: import("styled-components").StyledComponen
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -79,6 +80,7 @@ export declare const StyledPressable: import("styled-components").StyledComponen
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -87,6 +89,7 @@ export declare const StyledPressable: import("styled-components").StyledComponen
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -572,6 +575,4 @@ export declare const StyledPressable: import("styled-components").StyledComponen
             selectedTint: string;
         };
     };
-}, {
-    focused: boolean;
-}, never>;
+}, {}, never>;

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

@@ -1,14 +1,52 @@
-import { numToPx } from '@ovotech/element-core';
-import { Pressable } from 'react-native';
-import styled, { css } from '../../styled.native';
-export const StyledPressable = styled(Pressable)(({ theme, focused, }) => {
-    return css `
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledPressable = void 0;
+const element_core_1 = require("@ovotech/element-core");
+const react_native_1 = require("react-native");
+const styled_native_1 = __importStar(require("../../styled.native"));
+const styled_1 = require("../Input/styled");
+exports.StyledPressable = (0, styled_native_1.default)(react_native_1.Pressable)(({ theme }) => {
+    return (0, styled_native_1.css) `
     display: flex;
     align-items: center;
     position: absolute;
-    width: ${numToPx(theme.space[400])};
+    width: ${(0, element_core_1.numToPx)(theme.space[400])};
     z-index: 1;
-    top: ${focused ? '16px' : '14px'};
-    right: ${numToPx(theme.space[300])};
+    top: 50%;
+    margin-top: -${(0, element_core_1.numToPx)(styled_1.ICON_SIZE / 2)};
+    right: ${(0, element_core_1.numToPx)(theme.space[400])};
   `;
 });

package/dist/components/PasswordInput/PasswordVisibilityToggle.js

@@ -1,9 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Icon } from '../Icon';
-import { StyledPressable } from './PasswordInput.styled';
-export const useTogglePasswordVisibility = () => {
-    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PasswordVisibilityToggle = exports.useTogglePasswordVisibility = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Icon_1 = require("../Icon");
+const styled_1 = require("../Input/styled");
+const PasswordInput_styled_1 = require("./PasswordInput.styled");
+const useTogglePasswordVisibility = () => {
+    const [isPasswordVisible, setIsPasswordVisible] = (0, react_1.useState)(false);
     const handlePasswordVisibility = () => {
         setIsPasswordVisible(!isPasswordVisible);
     };
@@ -12,11 +16,6 @@ export const useTogglePasswordVisibility = () => {
         handlePasswordVisibility,
     };
 };
-export const PasswordVisibilityToggle = ({ iconName, visibilityToggleLabel, handlePasswordVisibility, }) => {
-    const [focused, setFocused] = useState(false);
-    return (_jsx(StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessible: true, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: () => {
-            setFocused(true);
-        }, onBlur: () => {
-            setFocused(false);
-        }, children: _jsx(Icon, { name: iconName, size: 16, pointerEvents: "none" }) }));
-};
+exports.useTogglePasswordVisibility = useTogglePasswordVisibility;
+const PasswordVisibilityToggle = ({ iconName, visibilityToggleLabel, handlePasswordVisibility, }) => ((0, jsx_runtime_1.jsx)(PasswordInput_styled_1.StyledPressable, { testID: "password-input-visibility-toggle", accessible: true, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: styled_1.ICON_SIZE, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: iconName, size: styled_1.ICON_SIZE, pointerEvents: "none" }) }));
+exports.PasswordVisibilityToggle = PasswordVisibilityToggle;

package/dist/components/PasswordInput/index.js

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

package/dist/components/PhoneField/PhoneField.js

@@ -1,6 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Field } from '../Field';
-import { PhoneInput } from '../PhoneInput';
-export const PhoneField = ({ ref, ...props }) => {
-    return (_jsx(Field, { ...props, children: _jsx(PhoneInput, { ref: ref }) }));
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PhoneField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Field_1 = require("../Field");
+const PhoneInput_1 = require("../PhoneInput");
+const PhoneField = (_a) => {
+    var { ref } = _a, props = __rest(_a, ["ref"]);
+    return ((0, jsx_runtime_1.jsx)(Field_1.Field, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(PhoneInput_1.PhoneInput, { ref: ref }) })));
+};
+exports.PhoneField = PhoneField;

package/dist/components/PhoneField/index.js

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

package/dist/components/PhoneInput/PhoneInput.js

@@ -1,3 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Input } from '../Input/Input';
-export const PhoneInput = (props) => (_jsx(Input, { ...props, keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false }));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PhoneInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Input_1 = require("../Input/Input");
+const PhoneInput = (props) => ((0, jsx_runtime_1.jsx)(Input_1.Input, Object.assign({}, props, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false })));
+exports.PhoneInput = PhoneInput;

package/dist/components/PhoneInput/index.js

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

package/dist/components/Pictogram/Pictogram.js

@@ -1,11 +1,27 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { usePictograms } from '../../providers';
-import { ThemeContext } from '../../styled.native';
-export const Pictogram = ({ name, size = '64', color, testID, ...rest }) => {
-    const pictograms = usePictograms();
-    const theme = useContext(ThemeContext);
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pictogram = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const providers_1 = require("../../providers");
+const styled_native_1 = require("../../styled.native");
+const Pictogram = (_a) => {
+    var { name, size = '64', color, testID } = _a, rest = __rest(_a, ["name", "size", "color", "testID"]);
+    const pictograms = (0, providers_1.usePictograms)();
+    const theme = (0, react_1.useContext)(styled_native_1.ThemeContext);
     // @ts-ignore to support additional pictograms.
     const Svg = name && pictograms[name];
-    return Svg ? (_jsx(Svg, { testID: testID ? testID : `element-icon${name ? `-${name}` : ''}`, color: color ?? theme.color.brand.brand, width: size, height: size, ...rest })) : null;
+    return Svg ? ((0, jsx_runtime_1.jsx)(Svg, Object.assign({ testID: testID ? testID : `element-icon${name ? `-${name}` : ''}`, color: color !== null && color !== void 0 ? color : theme.color.brand.brand, width: size, height: size }, rest))) : null;
 };
+exports.Pictogram = Pictogram;

package/dist/components/Pictogram/index.js

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