@ovotech/element-native 3.3.2-canary-71b07de-141 → 3.3.2

package/dist/components/Text/Text.js

@@ -0,0 +1,93 @@
+"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 __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 __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 __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 = exports.LineThrough = exports.Em = exports.Strong = exports.Small = exports.P = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+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 StyledSmall = styled_native_1.default.Text(function (_a) {
+    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-size: ", ";\n    line-height: ", ";\n  "])), core.fontSize.small[smallAndUp ? 'large' : 'small'], core.lineHeight.small[smallAndUp ? 'large' : 'small']);
+});
+exports.Small = (0, utils_1.styledComponentWithBreakpoints)(StyledSmall);
+exports.Strong = styled_native_1.default.Text(function (_a) {
+    var core = _a.theme.core;
+    return "\n    font-family: ".concat(core.fontFamily.bodyBold.native, ";\n  ");
+});
+exports.Em = styled_native_1.default.Text(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-family: 'System font';\n  font-style: italic;\n"], ["\n  font-family: 'System font';\n  font-style: italic;\n"])));
+exports.LineThrough = styled_native_1.default.Text(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-decoration: line-through;\n"], ["\n  text-decoration: line-through;\n"])));
+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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1 @@
+export { P, Strong, Em, Small, LineThrough, TextGroup } from './Text';

package/dist/components/Text/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextGroup = exports.LineThrough = exports.Small = exports.Em = exports.Strong = exports.P = void 0;
+var Text_1 = require("./Text");
+Object.defineProperty(exports, "P", { enumerable: true, get: function () { return Text_1.P; } });
+Object.defineProperty(exports, "Strong", { enumerable: true, get: function () { return Text_1.Strong; } });
+Object.defineProperty(exports, "Em", { enumerable: true, get: function () { return Text_1.Em; } });
+Object.defineProperty(exports, "Small", { enumerable: true, get: function () { return Text_1.Small; } });
+Object.defineProperty(exports, "LineThrough", { enumerable: true, get: function () { return Text_1.LineThrough; } });
+Object.defineProperty(exports, "TextGroup", { enumerable: true, get: function () { return Text_1.TextGroup; } });

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

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

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

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

package/dist/components/{NumberField → TextField}/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("../NumberInput");
+var NumberInput_1 = require("../Input/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/{PasswordField → TextField}/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("../PasswordInput");
+var PasswordInput_1 = require("../Input/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/{PhoneField → TextField}/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("../PhoneInput");
+var PhoneInput_1 = require("../Input/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/TextField/TelField.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { TextInput as NativeTextInput } from 'react-native';
+import { FieldProps } from '../Field';
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the PhoneField component instead.
+ * */
+export declare const TelField: import("react").ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native/types").TextInputProps & {
+    invalid?: boolean | undefined;
+    stretch?: boolean | undefined;
+    iconLeft?: string | undefined;
+    iconRight?: string | undefined;
+    rightSlot?: import("react").ReactNode;
+} & import("react").RefAttributes<NativeTextInput>>;

package/dist/components/TextField/TelField.js

@@ -0,0 +1,38 @@
+"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.TelField = 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");
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the PhoneField component instead.
+ * */
+exports.TelField = (0, react_1.forwardRef)(function (_a, ref) {
+    var rest = __rest(_a, []);
+    console.warn('TelField component has been deprecated and will be removed in a future release. Please use the PhoneField component instead.');
+    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/TextField/TextField.js

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

package/dist/components/{TextareaField → TextField}/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("../TextareaInput");
+var TextareaInput_1 = require("../Input/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/TextField/index.d.ts

@@ -1 +1,8 @@
+export { CurrencyField } from './CurrencyField';
 export { TextField } from './TextField';
+export { NumberField } from './NumberField';
+export { TelField } from './TelField';
+export { PhoneField } from './PhoneField';
+export { EmailField } from './EmailField';
+export { PasswordField } from './PasswordField';
+export { TextareaField } from './TextareaField';

package/dist/components/TextField/index.js

@@ -1,5 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextField = void 0;
+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; } });
 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/index.d.ts

@@ -1,6 +1,5 @@
 export * from './Accordion';
 export * from './ActionList';
-export * from './ActionCard';
 export * from './Badge';
 export * from './Card';
 export * from './Checkbox';
@@ -14,41 +13,18 @@ export * from './ErrorSummaryNotification';
 export * from './Field';
 export * from './Grid';
 export * from './NavHeader';
-export * from './Heading1';
-export * from './Heading2';
-export * from './Heading3';
-export * from './Heading4';
+export * from './Heading';
 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 './TextGroup';
-export * from './P';
-export * from './Strong';
-export * from './Small';
-export * from './Em';
-export * from './LineThrough';
+export * from './Text';
 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,7 +16,6 @@ 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);
@@ -30,41 +29,18 @@ __exportStar(require("./ErrorSummaryNotification"), exports);
 __exportStar(require("./Field"), exports);
 __exportStar(require("./Grid"), exports);
 __exportStar(require("./NavHeader"), exports);
-__exportStar(require("./Heading1"), exports);
-__exportStar(require("./Heading2"), exports);
-__exportStar(require("./Heading3"), exports);
-__exportStar(require("./Heading4"), exports);
+__exportStar(require("./Heading"), 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("./TextGroup"), exports);
-__exportStar(require("./P"), exports);
-__exportStar(require("./Strong"), exports);
-__exportStar(require("./Small"), exports);
-__exportStar(require("./Em"), exports);
-__exportStar(require("./LineThrough"), exports);
+__exportStar(require("./Text"), 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 '../Heading4';
+import { Heading4 } from '../Heading';
 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, isExpanded: open }, { children: [_jsxs(StyledAccordionHeader, __assign({ accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle" }, { children: [_jsx(AnimatedHeading, __assign({ style: [
+    return (_jsxs(StyledAccordion, __assign({ first: first, last: last }, { 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, 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
+    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
         ? {
             borderTopLeftRadius: core.radius.small,
             borderTopRightRadius: core.radius.small,

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 '../NumberInput';
+import { NumberInput } from '../Input';
 import { LabelText } from '../LabelText';
 import { Stack } from '../Stack';
 import { SubLabelText } from '../SubLabelText';

package/dist/esm/components/Heading/Heading.js

@@ -0,0 +1,74 @@
+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 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_2 || (templateObject_2 = __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 StyledHeading3 = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = core.fontSize.heading3[smallAndUp ? 'large' : 'small'];
+    return css(templateObject_3 || (templateObject_3 = __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.bodyBold.native, fontSize, core.lineHeight.heading3[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.compressed), semantic.message.branded);
+});
+export var Heading3 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = useBreakpoint();
+    return (_jsx(StyledHeading3, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+var StyledHeading4 = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = core.fontSize.heading4[smallAndUp ? 'large' : 'small'];
+    return css(templateObject_4 || (templateObject_4 = __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.bodyBold.native, fontSize, core.lineHeight.heading4[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.compressed), semantic.message.branded);
+});
+export var Heading4 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = useBreakpoint();
+    return (_jsx(StyledHeading4, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1 @@
+export { Heading1, Heading2, Heading3, Heading4 } from './Heading';

package/dist/esm/components/{CurrencyInput → Input}/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/{EmailInput → Input}/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/Input';
+import { Input } from './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/{NumberInput → Input}/NumberInput.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/Input';
+import { Input } from './Input';
 var NumberInput = forwardRef(function (props, ref) { return (_jsx(Input, __assign({}, props, { keyboardType: "numeric", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
 export { NumberInput };

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

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Input } from '../Input/Input';
+import { Input } from './Input';
 import { PasswordVisibilityToggle, useTogglePasswordVisibility, } from './PasswordVisibilityToggle';
 var PasswordInput = forwardRef(function (_a, ref) {
     var props = __rest(_a, []);

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

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

package/dist/esm/components/{TextInput → Input}/TextInput.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/Input';
+import { Input } from './Input';
 var TextInput = forwardRef(function (props, ref) { return (_jsx(Input, __assign({}, props, { keyboardType: "default", ref: ref }))); });
 export { TextInput };

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

@@ -28,7 +28,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from '../../styled.native';
 import { pxToNumber } from '../../utils';
-import { Input } from '../Input/Input';
+import { Input } from './Input';
 var StyledInput = styled(Input)(function (_a) {
     var core = _a.theme.core, rows = _a.rows;
     return 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], pxToNumber(core.space[8]) * rows);

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

@@ -0,0 +1,7 @@
+export { CurrencyInput } from './CurrencyInput';
+export { EmailInput } from './EmailInput';
+export { NumberInput } from './NumberInput';
+export { PhoneInput } from './PhoneInput';
+export { TextInput } from './TextInput';
+export { PasswordInput } from './PasswordInput';
+export { TextareaInput } from './TextareaInput';