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

package/dist/components/TextField/index.js

@@ -1,19 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextareaField = exports.PasswordField = exports.EmailField = exports.PhoneField = exports.TelField = exports.NumberField = exports.TextField = exports.CurrencyField = void 0;
-var CurrencyField_1 = require("./CurrencyField");
-Object.defineProperty(exports, "CurrencyField", { enumerable: true, get: function () { return CurrencyField_1.CurrencyField; } });
+exports.TextField = void 0;
 var TextField_1 = require("./TextField");
 Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return TextField_1.TextField; } });
-var NumberField_1 = require("./NumberField");
-Object.defineProperty(exports, "NumberField", { enumerable: true, get: function () { return NumberField_1.NumberField; } });
-var TelField_1 = require("./TelField");
-Object.defineProperty(exports, "TelField", { enumerable: true, get: function () { return TelField_1.TelField; } });
-var PhoneField_1 = require("./PhoneField");
-Object.defineProperty(exports, "PhoneField", { enumerable: true, get: function () { return PhoneField_1.PhoneField; } });
-var EmailField_1 = require("./EmailField");
-Object.defineProperty(exports, "EmailField", { enumerable: true, get: function () { return EmailField_1.EmailField; } });
-var PasswordField_1 = require("./PasswordField");
-Object.defineProperty(exports, "PasswordField", { enumerable: true, get: function () { return PasswordField_1.PasswordField; } });
-var TextareaField_1 = require("./TextareaField");
-Object.defineProperty(exports, "TextareaField", { enumerable: true, get: function () { return TextareaField_1.TextareaField; } });

package/dist/components/TextGroup/TextGroup.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import { ViewProps } from 'react-native';
+export declare const TextGroup: ({ children, ...rest }: PropsWithChildren<ViewProps>) => JSX.Element;

package/dist/components/TextGroup/TextGroup.js

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.TextGroup = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var TextGroup = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    var filteredChildren = [];
+    react_1.Children.forEach(children, function (child) {
+        if ((0, react_1.isValidElement)(child)) {
+            filteredChildren.push(child);
+        }
+    });
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, __assign({}, rest, { children: react_1.Children.map(filteredChildren, function (child, index) {
+            if (!(0, react_1.isValidElement)(child)) {
+                return;
+            }
+            var style = __assign(__assign(__assign({}, child.props.style), (index === 0 ? { marginTop: 0 } : {})), { marginBottom: 0 });
+            return (0, react_1.cloneElement)(child, {
+                style: style,
+            });
+        }) })));
+};
+exports.TextGroup = TextGroup;

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

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

package/dist/components/TextGroup/index.js

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

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

@@ -14,6 +14,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = 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 TextInput = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(Input_1.Input, __assign({}, props, { keyboardType: "default", ref: ref }))); });
 exports.TextInput = TextInput;

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

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

package/dist/components/TextInput/index.js

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

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

@@ -26,7 +26,7 @@ exports.TextareaField = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var Field_1 = require("../Field");
-var TextareaInput_1 = require("../Input/TextareaInput");
+var TextareaInput_1 = require("../TextareaInput");
 exports.TextareaField = (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)(TextareaInput_1.TextareaInput, {}) })));

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

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

package/dist/components/TextareaField/index.js

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

package/dist/components/{Input → TextareaInput}/TextareaInput.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TextInput as RNTextInput } from 'react-native';
-import { InputProps } from './Input';
+import { InputProps } from '../Input/Input';
 declare type TextareaInputProps = InputProps & {
     rows?: number;
 };

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

@@ -54,7 +54,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
-var Input_1 = require("./Input");
+var Input_1 = require("../Input/Input");
 var StyledInput = (0, styled_native_1.default)(Input_1.Input)(function (_a) {
     var core = _a.theme.core, rows = _a.rows;
     return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", " ", " ", " ", ";\n    height: ", "px;\n  "], ["\n    padding: ", " ", " ", " ", ";\n    height: ", "px;\n  "])), core.space[3], core.space[2], core.space[2], core.space[2], (0, utils_1.pxToNumber)(core.space[8]) * rows);

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

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

package/dist/components/TextareaInput/index.js

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

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './Accordion';
 export * from './ActionList';
+export * from './ActionCard';
 export * from './Badge';
 export * from './Card';
 export * from './Checkbox';
@@ -13,18 +14,41 @@ export * from './ErrorSummaryNotification';
 export * from './Field';
 export * from './Grid';
 export * from './NavHeader';
-export * from './Heading';
+export * from './Heading1';
+export * from './Heading2';
+export * from './Heading3';
+export * from './Heading4';
 export * from './Icon';
-export * from './Input';
 export * from './List';
 export * from './Margin';
 export * from './Notification';
 export * from './Radio';
 export * from './Stack';
 export * from './Tabs';
-export * from './Text';
+export * from './TextGroup';
+export * from './P';
+export * from './Strong';
+export * from './Small';
+export * from './Em';
+export * from './LineThrough';
 export * from './TextField';
 export * from './TextLink';
 export * from './DataTable';
-export * from './SkeletonLoading';
 export * from './SelectField';
+export * from './CurrencyField';
+export * from './PasswordField';
+export * from './EmailField';
+export * from './TextareaField';
+export * from './NumberField';
+export * from './PhoneField';
+export * from './PhoneInput';
+export * from './TextInput';
+export * from './EmailInput';
+export * from './NumberInput';
+export * from './TextareaInput';
+export * from './PasswordInput';
+export * from './CurrencyInput';
+export * from './SkeletonCircle';
+export * from './SkeletonCTA';
+export * from './SkeletonHeading';
+export * from './SkeletonText';

package/dist/components/index.js

@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Accordion"), exports);
 __exportStar(require("./ActionList"), exports);
+__exportStar(require("./ActionCard"), exports);
 __exportStar(require("./Badge"), exports);
 __exportStar(require("./Card"), exports);
 __exportStar(require("./Checkbox"), exports);
@@ -29,18 +30,41 @@ __exportStar(require("./ErrorSummaryNotification"), exports);
 __exportStar(require("./Field"), exports);
 __exportStar(require("./Grid"), exports);
 __exportStar(require("./NavHeader"), exports);
-__exportStar(require("./Heading"), exports);
+__exportStar(require("./Heading1"), exports);
+__exportStar(require("./Heading2"), exports);
+__exportStar(require("./Heading3"), exports);
+__exportStar(require("./Heading4"), exports);
 __exportStar(require("./Icon"), exports);
-__exportStar(require("./Input"), exports);
 __exportStar(require("./List"), exports);
 __exportStar(require("./Margin"), exports);
 __exportStar(require("./Notification"), exports);
 __exportStar(require("./Radio"), exports);
 __exportStar(require("./Stack"), exports);
 __exportStar(require("./Tabs"), exports);
-__exportStar(require("./Text"), exports);
+__exportStar(require("./TextGroup"), exports);
+__exportStar(require("./P"), exports);
+__exportStar(require("./Strong"), exports);
+__exportStar(require("./Small"), exports);
+__exportStar(require("./Em"), exports);
+__exportStar(require("./LineThrough"), exports);
 __exportStar(require("./TextField"), exports);
 __exportStar(require("./TextLink"), exports);
 __exportStar(require("./DataTable"), exports);
-__exportStar(require("./SkeletonLoading"), exports);
 __exportStar(require("./SelectField"), exports);
+__exportStar(require("./CurrencyField"), exports);
+__exportStar(require("./PasswordField"), exports);
+__exportStar(require("./EmailField"), exports);
+__exportStar(require("./TextareaField"), exports);
+__exportStar(require("./NumberField"), exports);
+__exportStar(require("./PhoneField"), exports);
+__exportStar(require("./PhoneInput"), exports);
+__exportStar(require("./TextInput"), exports);
+__exportStar(require("./EmailInput"), exports);
+__exportStar(require("./NumberInput"), exports);
+__exportStar(require("./TextareaInput"), exports);
+__exportStar(require("./PasswordInput"), exports);
+__exportStar(require("./CurrencyInput"), exports);
+__exportStar(require("./SkeletonCircle"), exports);
+__exportStar(require("./SkeletonCTA"), exports);
+__exportStar(require("./SkeletonHeading"), exports);
+__exportStar(require("./SkeletonText"), exports);

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

@@ -27,12 +27,12 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
 import Animated, { interpolateColor, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { useLayout } from '../../hooks/use-layout';
 import { ThemeContext } from '../../styled.native';
 import { pxToNumber } from '../../utils';
-import { Heading4 } from '../Heading';
+import { Heading4 } from '../Heading4';
 import { AccordionGroupContext } from './Group';
 import { AccordionIcon } from './Icon';
-import { useLayout } from './hooks';
 import { StyledAccordion, StyledAccordionHeader, StyledContainer, } from './styles';
 export function withAnimated(WrappedComponent) {
     var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
@@ -98,7 +98,7 @@ export var Accordion = function (_a) {
     var headerStyle = useAnimatedStyle(function () { return ({
         color: interpolateColor(progress.value, [0, 1], [semantic.message.branded, semantic.message.base]),
     }); });
-    return (_jsxs(StyledAccordion, __assign({ first: first, last: last }, { children: [_jsxs(StyledAccordionHeader, __assign({ accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle" }, { children: [_jsx(AnimatedHeading, __assign({ style: [
+    return (_jsxs(StyledAccordion, __assign({ first: first, last: last, isExpanded: open }, { children: [_jsxs(StyledAccordionHeader, __assign({ accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle" }, { children: [_jsx(AnimatedHeading, __assign({ style: [
                             headerStyle,
                             {
                                 paddingTop: pxToNumber(core.space[1]),

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

@@ -5,8 +5,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import Animated from 'react-native-reanimated';
 import styled, { css } from '../../styled.native';
 export var StyledAccordion = styled(Animated.View)(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, core = _b.core, first = _a.first, last = _a.last;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n\n    ", "\n\n    ", "\n  "], ["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n\n    ", "\n\n    ", "\n  "])), core.borderWidth.small, semantic.border.differentiated, first
+    var _b = _a.theme, semantic = _b.semantic, core = _b.core, first = _a.first, last = _a.last, isExpanded = _a.isExpanded;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "], ["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "])), core.borderWidth.small, semantic.border.differentiated, isExpanded ? core.color.brand.white : 'transparent', core.transition.fast, first
         ? {
             borderTopLeftRadius: core.radius.small,
             borderTopRightRadius: core.radius.small,

package/dist/esm/components/ActionCard/ActionCard.js

@@ -0,0 +1,85 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import MaskedView from '@react-native-masked-view/masked-view';
+import { useContext, useEffect } from 'react';
+import { Image, Pressable, View } from 'react-native';
+import { Action, CTAButton, Heading2, Heading3, Icon, Margin, Stack, } from '../';
+import styled, { ThemeContext } from '../../styled.native';
+import { P } from '../P';
+import { CloseIconShape } from './CloseIconShape';
+import { IndicatorIconShape } from './IndicatorIconShape';
+var StyledCard = styled.Pressable(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
+    return "\n      border-radius: ".concat(inline ? core.space[6] : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding-bottom: ").concat(reducedBottomPadding ? core.space[1] : core.space[4], ";\n      padding: ").concat(core.space[4], ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
+});
+var StyledP = styled(P)(function (_a) {
+    var semantic = _a.theme.semantic, inverted = _a.inverted;
+    return "\n    color: ".concat(inverted ? semantic.inverted.message.base : semantic.message.base, ";\n");
+});
+export var ActionCard = function (_a) {
+    var onPressCloseButton = _a.onPressCloseButton, onPressActionButton = _a.onPressActionButton, onPressIndicator = _a.onPressIndicator, onMount = _a.onMount, body = _a.body, title = _a.title, buttonTitle = _a.buttonTitle, ctaVariant = _a.ctaVariant, image = _a.image, testID = _a.testID, _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'image' : _b, _c = _a.inverted, inverted = _c === void 0 ? true : _c, _d = _a.inline, inline = _d === void 0 ? false : _d;
+    var _e = useContext(ThemeContext), core = _e.core, semantic = _e.semantic;
+    useEffect(function () {
+        if (onMount) {
+            onMount();
+        }
+    }, []);
+    var Heading = inline ? Heading3 : Heading2;
+    return (_jsx(StyledCard, __assign({ onPress: onPressIndicator, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card") }, { children: _jsxs(View, __assign({ style: { flexDirection: 'row' } }, { children: [_jsx(View, __assign({ style: { flex: 1 } }, { children: _jsxs(Stack, __assign({ spaceBetween: 2 }, { children: [_jsx(Heading, __assign({ style: {
+                                    color: inverted
+                                        ? semantic.inverted.message.link
+                                        : semantic.message.branded,
+                                    paddingRight: image || !onPressCloseButton ? 0 : parseInt(core.space[6]),
+                                }, testID: "".concat(testID, "-heading") }, { children: title })), _jsxs(View, { children: [typeof body === 'string' ? (_jsx(View, __assign({ style: {
+                                            paddingRight: !image && !title && onPressCloseButton
+                                                ? parseInt(core.space[6])
+                                                : 0,
+                                        } }, { children: _jsx(StyledP, __assign({ inverted: inverted }, { children: body })) }))) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Action, __assign({ inverted: inverted, onPress: onPressActionButton, testID: "".concat(testID, "-button") }, { children: buttonTitle }))) : (_jsx(Margin, __assign({ top: 4 }, { children: _jsx(CTAButton, __assign({ onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant }, { children: buttonTitle })) })))) : null] })] })) })), image ? (_jsx(MaskedView, __assign({ style: {
+                        flex: 1,
+                        flexDirection: 'row',
+                        height: '100%',
+                        marginTop: -16,
+                        marginRight: -16,
+                    }, maskElement: _jsx(View, { style: {
+                            width: '100%',
+                            height: 165,
+                            backgroundColor: 'olive',
+                            transform: [
+                                { rotate: '-16deg' },
+                                { translateX: 40 },
+                                { translateY: 25 },
+                            ],
+                        } }) }, { children: _jsx(Image, { resizeMode: "cover", source: image, style: {
+                            width: '100%',
+                            height: 200,
+                            position: 'absolute',
+                            top: 0,
+                            right: 0,
+                        }, accessible: true, accessibilityRole: "image", accessibilityLabel: accessibilityLabel }) }))) : null, onPressIndicator ? (_jsxs(Pressable, __assign({ style: {
+                        position: 'absolute',
+                        right: -16,
+                        bottom: -16,
+                    }, onPress: onPressIndicator, testID: "".concat(testID, "-indicator-button") }, { children: [_jsx(IndicatorIconShape, {}), _jsx(Icon, { size: 14, style: {
+                                position: 'absolute',
+                                right: inline ? 8 : 6,
+                                bottom: 16,
+                            }, color: semantic.surface.elevated, name: "chevron-right", accessibilityLabel: "chevron-right" })] }))) : null, onPressCloseButton && !onPressIndicator ? (_jsxs(Pressable, __assign({ style: {
+                        position: 'absolute',
+                        right: -16,
+                        top: -16,
+                    }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button") }, { children: [_jsx(CloseIconShape, {}), _jsx(Icon, { size: 14, style: {
+                                position: 'absolute',
+                                top: inline ? 14 : 12,
+                                right: inline ? 14 : 12,
+                            }, color: semantic.surface.elevated, name: "cross", accessibilityLabel: "close" })] }))) : null] })) })));
+};

package/dist/esm/components/ActionCard/CloseIconShape.js

@@ -0,0 +1,22 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Path, ClipPath, Defs } from 'react-native-svg';
+import styled from '../../styled.native';
+var StyledPath = styled(Path)(function (_a) {
+    var semantic = _a.theme.semantic, color = _a.color;
+    return "\n  fill: ".concat(color !== null && color !== void 0 ? color : semantic.message.branded, "\n");
+});
+export var CloseIconShape = function (_a) {
+    var color = _a.color;
+    return (_jsxs(Svg, __assign({ width: 44, height: 44 }, { children: [_jsx(StyledPath, { color: color, d: "M11.632 44 0 0h44v35.402L11.632 44Z" }), _jsx(Defs, { children: _jsx(ClipPath, __assign({ id: "a" }, { children: _jsx(Path, { fill: "#fff", d: "M16 16h12v12H16z" }) })) })] })));
+};

package/dist/esm/components/ActionCard/IndicatorIconShape.js

@@ -0,0 +1,22 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+import styled from '../../styled.native';
+var StyledPath = styled(Path)(function (_a) {
+    var semantic = _a.theme.semantic, color = _a.color;
+    return "\n  fill: ".concat(color !== null && color !== void 0 ? color : semantic.message.branded, "\n");
+});
+export var IndicatorIconShape = function (_a) {
+    var color = _a.color;
+    return (_jsx(Svg, __assign({ width: 32, height: 48 }, { children: _jsx(StyledPath, { color: color, d: "M0 9.5 32 1v47H10.5L0 9.5Z" }) })));
+};

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

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

package/dist/esm/components/{TextField → CurrencyField}/CurrencyField.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Field } from '../Field';
-import { CurrencyInput } from '../Input/CurrencyInput';
+import { CurrencyInput } from '../CurrencyInput';
 export var CurrencyField = forwardRef(function (_a, ref) {
     var rest = __rest(_a, []);
     return (_jsx(Field, __assign({ affixWidth: 40 }, rest, { ref: ref }, { children: _jsx(CurrencyInput, {}) })));

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

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

package/dist/esm/components/{Input → CurrencyInput}/CurrencyInput.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, createRef } from 'react';
 import { mergeRefs } from '../../utils';
-import { NumberInput } from './NumberInput';
+import { NumberInput } from '../NumberInput';
 var CurrencyInput = forwardRef(function (_a, ref) {
     var _b = _a.currency, currency = _b === void 0 ? 'GBP' : _b, invalid = _a.invalid, _c = _a.accessibilityLabel, accessibilityLabel = _c === void 0 ? '' : _c, rest = __rest(_a, ["currency", "invalid", "accessibilityLabel"]);
     var inputRef = createRef();

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

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

package/dist/esm/components/DateField/DateField.js

@@ -22,7 +22,7 @@ import { mergeRefs, getText } from '../../utils';
 import { ErrorText } from '../ErrorText';
 import { FormGroup } from '../FormGroup';
 import { HintText } from '../HintText';
-import { NumberInput } from '../Input';
+import { NumberInput } from '../NumberInput';
 import { LabelText } from '../LabelText';
 import { Stack } from '../Stack';
 import { SubLabelText } from '../SubLabelText';

package/dist/esm/components/Em/Em.js

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '../../styled.native';
+export var Em = styled.Text(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: 'System font';\n  font-style: italic;\n"], ["\n  font-family: 'System font';\n  font-style: italic;\n"])));
+var templateObject_1;

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

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

package/dist/esm/components/{TextField → EmailField}/EmailField.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Field } from '../Field';
-import { EmailInput } from '../Input/EmailInput';
+import { EmailInput } from '../EmailInput';
 export var EmailField = forwardRef(function (_a, ref) {
     var rest = __rest(_a, []);
     return (_jsx(Field, __assign({}, rest, { ref: ref }, { children: _jsx(EmailInput, {}) })));

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

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

package/dist/esm/components/{Input → EmailInput}/EmailInput.js

@@ -11,6 +11,6 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Input } from './Input';
+import { Input } from '../Input/Input';
 var EmailInput = forwardRef(function (props, ref) { return (_jsx(Input, __assign({}, props, { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
 export { EmailInput };

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

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

package/dist/esm/components/Heading1/Heading1.js

@@ -0,0 +1,44 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+import { pxToNumber, numToPx } from '../../utils';
+var calculateLetterSpacing = function (fontSize, letterSpacing) {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
+};
+var StyledHeading1 = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = core.fontSize.heading1[smallAndUp ? 'large' : 'small'];
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.heading.native, fontSize, core.lineHeight.heading1[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.extraCompressed), semantic.message.branded);
+});
+export var Heading1 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = useBreakpoint();
+    return (_jsx(StyledHeading1, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+var templateObject_1;

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

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

package/dist/esm/components/Heading2/Heading2.js

@@ -0,0 +1,44 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+import { pxToNumber, numToPx } from '../../utils';
+var calculateLetterSpacing = function (fontSize, letterSpacing) {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
+};
+var StyledHeading2 = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = core.fontSize.heading2[smallAndUp ? 'large' : 'small'];
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.heading.native, fontSize, core.lineHeight.heading2[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.extraCompressed), semantic.message.branded);
+});
+export var Heading2 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = useBreakpoint();
+    return (_jsx(StyledHeading2, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+var templateObject_1;

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

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