@ovotech/element-native 3.3.2 → 3.4.0-canary-d9e3d0a-143

package/dist/components/NavHeader/NavHeader.styles.js

@@ -0,0 +1,72 @@
+"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.StyledIconButtonL = exports.StyledIconButtonS = exports.IconButtonWrapper = exports.CollapsedTitle = exports.CollapsedTitleWrapper = exports.ExpandedTitle = exports.NavWrapper = exports.NavContainer = void 0;
+var react_native_1 = require("react-native");
+var react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
+var styled_native_1 = __importStar(require("../../styled.native"));
+exports.NavContainer = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
+    var semantic = _a.theme.semantic;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    background-color: ", ";\n  "], ["\n    width: 100%;\n    background-color: ", ";\n  "])), semantic.surface.base);
+});
+exports.NavWrapper = (0, styled_native_1.default)(react_native_1.View)(function (_a) {
+    var core = _a.theme.core;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n  "], ["\n    width: 100%;\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n  "])), core.space[2]);
+});
+exports.ExpandedTitle = (0, styled_native_1.default)(react_native_reanimated_1.default.Text)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBackButton = _a.hasBackButton, fullWidth = _a.fullWidth;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, core.fontSize.heading1[hasBackButton ? 'small' : 'large'], hasBackButton
+        ? core.lineHeight.heading1.small
+        : core.space[13], hasBackButton ? core.lineHeight.heading1.small : core.space[13], semantic.message.branded);
+});
+exports.CollapsedTitleWrapper = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"], ["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"])), function (_a) {
+    var core = _a.theme.core;
+    return core.lineHeight.heading4.small;
+});
+exports.CollapsedTitle = (0, styled_native_1.default)(react_native_reanimated_1.default.Text)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.heading.native, core.fontSize.heading4.small, core.lineHeight.heading4.small, semantic.message.branded);
+});
+exports.IconButtonWrapper = styled_native_1.default.View(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"], ["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"])));
+var iconButtonSharedStyles = (0, styled_native_1.css)(function (_a) {
+    var semantic = _a.theme.semantic;
+    return "\n    border-radius: 100px;\n    background-color: ".concat(semantic.inverted.surface, ";\n    align-items: center;\n    justify-content: center;\n");
+});
+exports.StyledIconButtonS = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+    var $pressed = _a.$pressed;
+    return ($pressed ? 0.8 : 1);
+}, iconButtonSharedStyles);
+exports.StyledIconButtonL = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+    var $pressed = _a.$pressed;
+    return ($pressed ? 0.8 : 1);
+}, iconButtonSharedStyles);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -1 +1 @@
-export { NavHeader } from './NavHeader';
+export { NavHeader, NavHeaderProps } from './NavHeader';

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

@@ -8,7 +8,7 @@ export declare const NotificationContentBox: import("styled-components").StyledC
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
         color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
@@ -236,7 +236,7 @@ export declare const NotificationTitleBox: import("styled-components").StyledCom
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
         color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {

package/dist/components/{TextField → NumberField}/NumberField.js

@@ -26,7 +26,7 @@ exports.NumberField = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var Field_1 = require("../Field");
-var NumberInput_1 = require("../Input/NumberInput");
+var NumberInput_1 = require("../NumberInput");
 exports.NumberField = (0, react_1.forwardRef)(function (_a, ref) {
     var rest = __rest(_a, []);
     return ((0, jsx_runtime_1.jsx)(Field_1.Field, __assign({}, rest, { ref: ref }, { children: (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, {}) })));

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

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

package/dist/components/NumberField/index.js

@@ -0,0 +1,5 @@
+"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/{Input → NumberInput}/NumberInput.js

@@ -14,6 +14,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberInput = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var Input_1 = require("./Input");
+var Input_1 = require("../Input/Input");
 var NumberInput = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(Input_1.Input, __assign({}, props, { keyboardType: "numeric", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
 exports.NumberInput = NumberInput;

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

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

package/dist/components/NumberInput/index.js

@@ -0,0 +1,5 @@
+"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.d.ts

@@ -0,0 +1,239 @@
+/// <reference types="react" />
+import { Text } from 'react-native';
+export declare const P: import("react").ForwardRefExoticComponent<Pick<Omit<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: {
+        core: {
+            radius: Record<"small" | "medium" | "large" | "max", string>;
+            borderWidth: Record<"small" | "medium" | "large", string>;
+            breakpoint: Record<"small" | "medium" | "large", string | number>;
+            mediaQuery: Record<"small" | "medium" | "large", string>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+            transition: Record<"medium" | "slow" | "fast", string>;
+            opacity: Record<"solid" | "transparent" | "translucent", string | number>;
+            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
+                lightest: string;
+                lighter: string;
+                light: string;
+                base: string;
+                dark: string;
+                darker: string;
+                darkest: string;
+            }> & {
+                brand: Record<string, string>;
+            };
+            fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
+                native: string;
+                web: string;
+            }>;
+            fontWeight: Record<"bold" | "book" | "black", string | number>;
+            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+                small: string | number;
+                large: string | number;
+            }>;
+            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+                small: string | number;
+                large: string | number;
+            }>;
+            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
+        };
+        semantic: {
+            surface: Record<"base" | "cutout" | "elevated", string>;
+            message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+            border: Record<"graphic" | "differentiated" | "functional", string>;
+            focus: Record<"surface" | "outline" | "hover", string>;
+            inverted: Record<"surface" | "border", string> & {
+                message: Record<"base" | "link" | "secondary" | "branded", string>;
+            };
+            success: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
+            warning: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
+            error: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
+            info: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
+            data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
+        };
+        component: {
+            heading1: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            heading2: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            heading3: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            heading4: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            lead: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            body: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            small: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            label: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            cta: {
+                primary: {
+                    message: string;
+                    surface: string;
+                    messageHover: string;
+                    surfaceHover: string;
+                    messageFocused: string;
+                    surfaceFocused: string;
+                    outlineFocused: string;
+                    backgroundFocused: string;
+                };
+                secondary: {
+                    message: string;
+                    surface: string;
+                    messageHover: string;
+                    surfaceHover: string;
+                    messageFocused: string;
+                    surfaceFocused: string;
+                    outlineFocused: string;
+                    backgroundFocused: string;
+                };
+                destructive: {
+                    message: string;
+                    surface: string;
+                    messageHover: string;
+                    surfaceHover: string;
+                    messageFocused: string;
+                    surfaceFocused: string;
+                    outlineFocused: string;
+                    backgroundFocused: string;
+                };
+            };
+            badge: {
+                variants: {
+                    red: {
+                        foreground: string;
+                        background: string;
+                    };
+                    orange: {
+                        foreground: string;
+                        background: string;
+                    };
+                    yellow: {
+                        foreground: string;
+                        background: string;
+                    };
+                    green: {
+                        foreground: string;
+                        background: string;
+                    };
+                    blue: {
+                        foreground: string;
+                        background: string;
+                    };
+                };
+            };
+        };
+    } | undefined;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<Text>>;

package/dist/components/P/P.js

@@ -0,0 +1,38 @@
+"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.P = void 0;
+var styled_native_1 = __importStar(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var StyledP = styled_native_1.default.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.body[smallAndUp ? 'large' : 'small'], core.lineHeight.body[smallAndUp ? 'large' : 'small'], semantic.message.base);
+});
+exports.P = (0, utils_1.styledComponentWithBreakpoints)(StyledP);
+var templateObject_1;

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

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

package/dist/components/P/index.js

@@ -0,0 +1,5 @@
+"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/{TextField → PasswordField}/PasswordField.js

@@ -26,7 +26,7 @@ exports.PasswordField = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var Field_1 = require("../Field");
-var PasswordInput_1 = require("../Input/PasswordInput");
+var PasswordInput_1 = require("../PasswordInput");
 exports.PasswordField = (0, react_1.forwardRef)(function (_a, ref) {
     var hasVisibilityToggle = _a.hasVisibilityToggle, rest = __rest(_a, ["hasVisibilityToggle"]);
     return ((0, jsx_runtime_1.jsx)(Field_1.Field, __assign({}, rest, { ref: ref }, { children: (0, jsx_runtime_1.jsx)(PasswordInput_1.PasswordInput, { hasVisibilityToggle: hasVisibilityToggle }) })));

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

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

package/dist/components/PasswordField/index.js

@@ -0,0 +1,5 @@
+"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/{Input → PasswordInput}/PasswordInput.js

@@ -25,7 +25,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PasswordInput = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var Input_1 = require("./Input");
+var Input_1 = require("../Input/Input");
 var PasswordVisibilityToggle_1 = require("./PasswordVisibilityToggle");
 var PasswordInput = (0, react_1.forwardRef)(function (_a, ref) {
     var props = __rest(_a, []);

package/dist/components/{Input → PasswordInput}/PasswordInput.styled.d.ts

@@ -5,7 +5,7 @@ export declare const StyledPressable: import("styled-components").StyledComponen
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
         color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {

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

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

package/dist/components/PasswordInput/index.js

@@ -0,0 +1,5 @@
+"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/{TextField → PhoneField}/PhoneField.js

@@ -26,7 +26,7 @@ exports.PhoneField = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var Field_1 = require("../Field");
-var PhoneInput_1 = require("../Input/PhoneInput");
+var PhoneInput_1 = require("../PhoneInput");
 exports.PhoneField = (0, react_1.forwardRef)(function (_a, ref) {
     var rest = __rest(_a, []);
     return ((0, jsx_runtime_1.jsx)(Field_1.Field, __assign({}, rest, { ref: ref }, { children: (0, jsx_runtime_1.jsx)(PhoneInput_1.PhoneInput, {}) })));

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

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

package/dist/components/PhoneField/index.js

@@ -0,0 +1,5 @@
+"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/{Input → PhoneInput}/PhoneInput.d.ts

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

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

@@ -14,6 +14,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PhoneInput = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var Input_1 = require("./Input");
-var PhoneInput = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(Input_1.Input, __assign({}, props, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
-exports.PhoneInput = PhoneInput;
+var Input_1 = require("../Input/Input");
+exports.PhoneInput = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(Input_1.Input, __assign({}, props, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });

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

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

package/dist/components/PhoneInput/index.js

@@ -0,0 +1,5 @@
+"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/SelectField/Select.d.ts

@@ -17,7 +17,7 @@ declare const SelectOption: import("styled-components").StyledComponent<typeof i
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
         color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {

package/dist/components/SelectField/Select.js

@@ -48,7 +48,8 @@ var react_1 = require("react");
 var react_native_1 = require("react-native");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var Icon_1 = require("../Icon");
-var Text_1 = require("../Text");
+var P_1 = require("../P");
+var Strong_1 = require("../Strong");
 var SelectInput = styled_native_1.default.TouchableOpacity(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, hasError = _a.hasError;
     return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: row;\n      align-items: center;\n      background-color: ", ";\n      border-color: ", ";\n      border-width: ", "\n      border-radius: ", ";\n      padding-vertical: ", "\n      padding-left: ", "\n      padding-right: 14px;\n      height: 44px;\n    "], ["\n      flex-direction: row;\n      align-items: center;\n      background-color: ", ";\n      border-color: ", ";\n      border-width: ", "\n      border-radius: ", ";\n      padding-vertical: ", "\n      padding-left: ", "\n      padding-right: 14px;\n      height: 44px;\n    "])), core.color.brand.white, hasError ? semantic.error.border : semantic.border.functional, core.borderWidth.small, core.radius.small, core.space[2], core.space[2]);
@@ -75,11 +76,11 @@ var RadioDot = styled_native_1.default.View(function (_a) {
     var semantic = _a.theme.semantic, isChecked = _a.isChecked;
     return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    background-color: ", ";\n    position: absolute;\n    top: 5px;\n    width: 12px;\n    height: 12px;\n    border-radius: 12px;\n    align-self: center;\n    opacity: ", ";\n  "], ["\n    background-color: ", ";\n    position: absolute;\n    top: 5px;\n    width: 12px;\n    height: 12px;\n    border-radius: 12px;\n    align-self: center;\n    opacity: ", ";\n  "])), semantic.focus.outline, isChecked ? 1 : 0);
 });
-var StyledP = (0, styled_native_1.default)(Text_1.P)(function (_a) {
+var StyledP = (0, styled_native_1.default)(P_1.P)(function (_a) {
     var core = _a.theme.core;
     return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), core.space[3], core.space[3]);
 });
-var StyledCategory = (0, styled_native_1.default)(Text_1.P)(function (_a) {
+var StyledCategory = (0, styled_native_1.default)(P_1.P)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
     return (0, styled_native_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    font-size: ", ";\n    color: ", "\n    background-color: ", ";\n    padding-horizontal: ", ";\n    padding-vertical: ", ";\n  "], ["\n    font-size: ", ";\n    color: ", "\n    background-color: ", ";\n    padding-horizontal: ", ";\n    padding-vertical: ", ";\n  "])), core.fontSize.label.large, semantic.message.secondary, semantic.surface.cutout, core.space[4], core.space[1]);
 });
@@ -97,7 +98,7 @@ var Select = function (_a) {
         label: "-- ".concat(noOptionMessage, " --"),
         value: 'default',
     };
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, __assign({ testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); } }, { children: [(0, jsx_runtime_1.jsx)(Text_1.P, __assign({ style: { marginTop: 0, marginBottom: 0 } }, { children: selected.value === 'default' ? '' : selected.label })), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] })), (0, jsx_runtime_1.jsx)(react_native_1.Modal, __assign({ transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, __assign({ nestedScrollEnabled: true }, { children: [(0, jsx_runtime_1.jsxs)(SelectOption, __assign({ accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); } }, { children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Text_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(Radio, __assign({ isChecked: selected.value === requiredOption.value }, { children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === requiredOption.value }) }))] })), Object.keys(optionsByCategories).map(function (category) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(SelectOption, __assign({ accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); } }, { children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Text_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, __assign({ isChecked: selected.value === option.value }, { children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) }))] }), option.label)); })] }, category)); })] })) }) }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, __assign({ testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); } }, { children: [(0, jsx_runtime_1.jsx)(P_1.P, __assign({ style: { marginTop: 0, marginBottom: 0 } }, { children: selected.value === 'default' ? '' : selected.label })), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] })), (0, jsx_runtime_1.jsx)(react_native_1.Modal, __assign({ transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, __assign({ nestedScrollEnabled: true }, { children: [(0, jsx_runtime_1.jsxs)(SelectOption, __assign({ accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); } }, { children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(Radio, __assign({ isChecked: selected.value === requiredOption.value }, { children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === requiredOption.value }) }))] })), Object.keys(optionsByCategories).map(function (category) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(SelectOption, __assign({ accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); } }, { children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, __assign({ isChecked: selected.value === option.value }, { children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) }))] }), option.label)); })] }, category)); })] })) }) }) }))] }));
 };
 exports.Select = Select;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

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

package/dist/components/SkeletonAnimation/index.js

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

package/dist/components/{SkeletonLoading → SkeletonCTA}/SkeletonCTA.js

@@ -28,15 +28,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonCTA = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 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 P_1 = require("../P");
+var SkeletonAnimation_1 = require("../SkeletonAnimation");
+var StyledSkeletonCTA = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, size = _a.size;
     return "\n    background-color: ".concat(core.color.neutral.light, ";\n    width: ").concat(size, ";\n    height: ").concat(core.space[12], ";\n  ");
 });
 var SkeletonCTA = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);
-    return ((0, jsx_runtime_1.jsx)(SkeletonAnimation_1.SkeletonAnimation, { children: (0, jsx_runtime_1.jsx)(StyledSkeletonCTA, __assign({ as: Text_1.P, size: size }, rest)) }));
+    return ((0, jsx_runtime_1.jsx)(SkeletonAnimation_1.SkeletonAnimation, { children: (0, jsx_runtime_1.jsx)(StyledSkeletonCTA, __assign({ as: P_1.P, size: size }, rest)) }));
 };
 exports.SkeletonCTA = SkeletonCTA;

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

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

package/dist/components/SkeletonCTA/index.js

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