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

package/dist/esm/components/List/List.js

@@ -1,3 +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;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -22,61 +26,81 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children } from 'react';
+import { View } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { pxToNumber, styledComponentWithBreakpoints } from '../../utils';
 import { Stack } from '../Stack';
-import { StyledBullet, StyledLi, StyledList, StyledOlItem, StyledUlItem, UlBullet, } from './styled';
-import { styledComponentWithBreakpoints } from '../../utils';
+var UlBullet = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.visible, visible = _c === void 0 ? true : _c, smallAndUp = _a.smallAndUp;
+    var lineHeight = smallAndUp
+        ? core.lineHeight.body.large
+        : core.lineHeight.body.small;
+    var topMargin = (pxToNumber(lineHeight) - pxToNumber(core.space[2])) / 2;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-right: ", ";\n      margin-top: ", "px;\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n    "], ["\n      margin-right: ", ";\n      margin-top: ", "px;\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n    "])), core.space[2], topMargin, core.space[2], core.space[2], visible ? semantic.message.base : 'transparent');
+});
+var StyledBullet = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    var lineHeight = smallAndUp
+        ? core.lineHeight.body.large
+        : core.lineHeight.body.small;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "])), core.fontFamily.body.native, lineHeight, semantic.message.base, fontSize, core.space[2], core.space[4]);
+});
+var StyledUlItem = styled.View(function (_a) {
+    var core = _a.theme.core, level = _a.level;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    padding-left: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    padding-left: ", ";\n  "])), core.space[level]);
+});
 var Bullet = styledComponentWithBreakpoints(StyledBullet);
-var ListWrapper = styledComponentWithBreakpoints(StyledList);
 var ListBulletItem = function (_a) {
     var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, level = _a.level;
     return (_jsxs(StyledUlItem, __assign({ level: level }, { children: [_jsx(UlBullet, { visible: showBullets }), children] })));
 };
 var ListNumberedItem = function (_a) {
-    var children = _a.children, prefix = _a.prefix, level = _a.level;
-    return (_jsxs(StyledOlItem, __assign({ level: level }, { children: [_jsx(Bullet, { children: prefix }), children] })));
+    var children = _a.children, prefix = _a.prefix;
+    return (_jsxs(View, __assign({ style: { flexDirection: 'row' } }, { children: [_jsx(Bullet, { children: prefix }), children] })));
 };
-var renderList = function (_a) {
-    var arrayChildren = _a.arrayChildren, _b = _a.level, level = _b === void 0 ? 0 : _b, showBullets = _a.showBullets, listType = _a.listType;
-    return Children.map(arrayChildren, function (child, index) {
-        var _a, _b, _c, _d;
-        // Checking if there are any child types, i.e. nodes
-        if (
-        // @ts-ignore
-        Array.isArray((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children) &&
-            // @ts-ignore
-            (child.type.name === 'Ul' || child.type.name === 'Ol')) {
-            var lvl = level;
-            var PADDING = 3;
-            lvl = lvl + PADDING;
-            return renderList({
-                // @ts-ignore It complains that child props doesn't exist. Weird.
-                arrayChildren: (_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.children,
+var StyledList = styled.View(function (_a) {
+    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), smallAndUp ? core.space[3] : core.space[2], smallAndUp ? core.space[3] : core.space[2]);
+});
+var ListWrapper = styledComponentWithBreakpoints(StyledList);
+var Ul = function (_a) {
+    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, rest = __rest(_a, ["children", "showBullets"]);
+    var renderList = function (arrayChildren, level) {
+        if (level === void 0) { level = 0; }
+        return Children.map(arrayChildren, function (child) {
+            var _a, _b, _c;
+            // @ts-ignore It complains that child props doesn't exist. Weird.
+            if (Array.isArray((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children) && ((_b = child === null || child === void 0 ? void 0 : child.type) === null || _b === void 0 ? void 0 : _b.name) === 'Ul') {
+                var lvl = level;
+                var PADDING = 3;
+                lvl = lvl + PADDING;
                 // @ts-ignore It complains that child props doesn't exist. Weird.
-                listType: (_d = (_c = child === null || child === void 0 ? void 0 : child.type) === null || _c === void 0 ? void 0 : _c.name) === null || _d === void 0 ? void 0 : _d.toLowerCase(),
-                showBullets: showBullets,
-                level: lvl,
-            });
-        }
-        else {
-            if (listType === 'ul') {
-                return (_jsx(ListBulletItem, __assign({ showBullets: showBullets, level: level }, { children: child })));
+                return renderList((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.children, lvl);
             }
             else {
-                return (_jsx(ListNumberedItem, __assign({ level: level, prefix: "".concat(index + 1, ".") }, { children: child })));
+                return (_jsx(ListBulletItem, __assign({ showBullets: showBullets, level: level }, { children: child })));
             }
-        }
-    });
-};
-var Li = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return _jsx(StyledLi, __assign({}, rest, { children: children }));
-};
-var Ul = function (_a) {
-    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, rest = __rest(_a, ["children", "showBullets"]);
-    return (_jsx(ListWrapper, __assign({}, rest, { children: _jsx(Stack, __assign({ spaceBetween: 2 }, { children: renderList({ arrayChildren: children, listType: 'ul', showBullets: showBullets }) })) })));
+        });
+    };
+    return (_jsx(ListWrapper, __assign({}, rest, { children: _jsx(Stack, __assign({ spaceBetween: 2 }, { children: renderList(children) })) })));
 };
 var Ol = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
-    return (_jsx(ListWrapper, __assign({}, rest, { children: _jsx(Stack, __assign({ spaceBetween: 2 }, { children: renderList({ arrayChildren: children, listType: 'ol' }) })) })));
+    return (_jsx(ListWrapper, __assign({}, rest, { children: _jsx(Stack, __assign({ spaceBetween: 2 }, { children: Children.map(children, function (child, index) { return (_jsx(ListNumberedItem, __assign({ prefix: index + 1 + '.' }, { children: child }))); }) })) })));
 };
+var StyledLi = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    var lineHeight = smallAndUp
+        ? core.lineHeight.body.large
+        : core.lineHeight.body.large;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), core.fontFamily.body.native, lineHeight, semantic.message.base, fontSize);
+});
+var Li = styledComponentWithBreakpoints(StyledLi);
 export { Ul, Ol, Li, ListWrapper };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -1,3 +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;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,46 +13,51 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { theme } from '@ovotech/element-core';
-import { useEffect } from 'react';
-import Animated, { FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, Layout, runOnUI, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
-import { useLayout } from '../../hooks/use-layout';
-import { Action } from '../ActionList';
-import { IconButton } from './IconButton';
-import { CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, NavWrapper, } from './NavHeader.styles';
-// calculated based on layout with maximum possible height
-var INITIAL_HEADER_HEIGHT = 115;
-var FADE_ANIMATION_DURATION = 250; // ms
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TouchableOpacity, View } from 'react-native';
+import Animated, { FadeIn, FadeOut, Layout } from 'react-native-reanimated';
+import { Path, Svg } from 'react-native-svg';
+import styled, { css } from '../../styled.native';
+import { Heading3, Heading4 } from '../Heading';
+var BackIcon = function () {
+    return (_jsx(Svg, __assign({ width: "10", height: "16", viewBox: "0 0 10 16" }, { children: _jsx(Path, { d: "M0.579956 8L8.57996 16L9.99996 14.58L3.41996 8L9.99996 1.42L8.57996 0L0.579956 8Z", fill: "white" }) })));
+};
+var StyledText = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n  "], ["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n  "])), semantic.inverted.message.base, core.fontSize.small.small, core.fontFamily.body.native);
+});
+var LeftHeaderText = styled(StyledText)(function (_a) {
+    var core = _a.theme.core;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-left: ", ";\n  "], ["\n    padding-left: ", ";\n  "])), core.space[2]);
+});
+var HeadlineView = styled(Animated.View)(function (_a) {
+    var core = _a.theme.core;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: 0 ", " ", ";\n  "], ["\n    padding: 0 ", " ", ";\n  "])), core.space[3], core.space[3]);
+});
+var RootView = styled.View(function (_a) {
+    var semantic = _a.theme.semantic;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n  "])), semantic.message.branded);
+});
+var StyledView = styled(Animated.View)(function (_a) {
+    var core = _a.theme.core, marginTop = _a.marginTop;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "], ["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "])), core.space[3], core.space[2], marginTop !== null && marginTop !== void 0 ? marginTop : 0);
+});
+var StyledHeading4 = styled(Heading4)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, textAlign = _a.textAlign;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-family: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "], ["\n    font-family: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "])), core.fontFamily.bodyBold.native, semantic.inverted.message.base, textAlign);
+});
+var StyledHeading3 = styled(Heading3)(function (_a) {
+    var semantic = _a.theme.semantic;
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "], ["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "])), semantic.inverted.message.base);
+});
 export var NavHeader = function (_a) {
-    var title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, goBack = _a.goBack;
-    var _b = useLayout(INITIAL_HEADER_HEIGHT), layout = _b[0], onLayout = _b[1];
-    var navHeight = useSharedValue(layout.height); // initial value
-    var animatedNavHeight = useAnimatedStyle(function () {
-        return {
-            height: navHeight.value,
-        };
-    });
-    // take children calculated height and change NavContainer height accordingly but with animation
-    useEffect(function () {
-        runOnUI(function () {
-            'worklet';
-            navHeight.value = withTiming(Math.floor(layout.height), {
-                duration: FADE_ANIMATION_DURATION,
-            });
-        })();
-    }, [layout.height]);
-    // NavContainer is animated view, height transition will be smooth
-    // in order to tell NavContainer which height it children have we need another NavWrapper
-    // back-button, title and right-action has wrappers with 33.3% and they are always rendered
-    // we need it for correct placing of the title when either back-button or right-action missing
-    return (_jsx(NavContainer, __assign({ style: animatedNavHeight }, { children: _jsxs(NavWrapper, __assign({ onLayout: onLayout }, { children: [_jsx(Animated.View, __assign({ style: {
-                        width: scrolled ? '33.3%' : '100%',
-                        // when back button is off we have small margin top for title, to write less code we can just set height
-                        height: !canGoBack ? parseInt(theme.core.space[10]) : undefined,
-                    }, layout: Layout.delay(FADE_ANIMATION_DURATION) }, { children: canGoBack && (_jsx(Action, __assign({ actionType: "back", onPress: goBack }, { children: "Back" }))) })), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { children: _jsx(CollapsedTitle, __assign({ numberOfLines: 1, ellipsizeMode: "tail", entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION) }, { children: title })) }), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(ExpandedTitle
-                        // if we don't have right action leave more space for the title text in expanded state
-                        , __assign({ 
-                            // if we don't have right action leave more space for the title text in expanded state
-                            fullWidth: !scrolled && !rightActionConfig, numberOfLines: 1, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION) }, { children: title })), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] })) })));
+    var options = _a.options, headline = _a.headline;
+    return (_jsxs(RootView, __assign({ layout: Layout === null || Layout === void 0 ? void 0 : Layout.duration(150) }, { children: [_jsxs(StyledView, __assign({ marginTop: options === null || options === void 0 ? void 0 : options.statusBarHeight }, { children: [(options === null || options === void 0 ? void 0 : options.headerLeft) ? (options === null || options === void 0 ? void 0 : options.headerLeft()) : (options === null || options === void 0 ? void 0 : options.canGoBack()) ? (_jsxs(TouchableOpacity, __assign({ style: {
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            flex: 1,
+                            flexGrow: 1,
+                            flexShrink: 1,
+                        }, onPress: options === null || options === void 0 ? void 0 : options.goBack }, { children: [_jsx(BackIcon, {}), _jsx(LeftHeaderText, { children: "Back" })] }))) : null, _jsx(Animated.View, __assign({ entering: FadeIn, exiting: FadeOut, style: { flex: 1, flexGrow: 3, flexShrink: 1 } }, { children: _jsx(StyledHeading4, __assign({ textAlign: (options === null || options === void 0 ? void 0 : options.canGoBack()) ? 'center' : 'left', numberOfLines: 1 }, { children: !headline ? options === null || options === void 0 ? void 0 : options.title : ' ' })) })), _jsx(View, __assign({ style: { flex: 1, flexGrow: 1, flexShrink: 1 } }, { children: options.headerRight ? options.headerRight() : null }))] })), headline ? (_jsx(HeadlineView, __assign({ entering: FadeIn, exiting: FadeOut }, { children: (options === null || options === void 0 ? void 0 : options.title) ? (_jsx(StyledHeading3, { children: options.title })) : null }))) : null] })));
 };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/esm/components/SelectField/Select.js

@@ -19,8 +19,7 @@ import { Fragment, useState } from 'react';
 import { Modal, ScrollView, View } from 'react-native';
 import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon';
-import { P } from '../P';
-import { Strong } from '../Strong';
+import { P, Strong } from '../Text';
 var SelectInput = styled.TouchableOpacity(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, hasError = _a.hasError;
     return 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]);

package/dist/esm/components/{LineThrough/LineThrough.js → SkeletonLoading/Skeleton.js}

@@ -3,5 +3,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled from '../../styled.native';
-export var LineThrough = styled.Text(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: line-through;\n"], ["\n  text-decoration: line-through;\n"])));
+export var Skeleton = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 var templateObject_1;

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

@@ -22,9 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from '../../styled.native';
-import { P } from '../P';
-import { SkeletonAnimation } from '../SkeletonAnimation';
-var StyledSkeletonCTA = styled.View(function (_a) {
+import { P } from '../Text';
+import { Skeleton } from './Skeleton';
+import { SkeletonAnimation } from './SkeletonAnimation';
+var StyledSkeletonCTA = styled(Skeleton)(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  ");
 });

package/dist/esm/components/{SkeletonCircle → SkeletonLoading}/SkeletonCircle.js

@@ -23,12 +23,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from '../../styled.native';
 import { pxToNumber } from '../../utils';
-import { SkeletonAnimation } from '../SkeletonAnimation';
-var StyledSkeletonCircleWrapper = styled.View(function (_a) {
+import { Skeleton } from './Skeleton';
+import { SkeletonAnimation } from './SkeletonAnimation';
+var StyledSkeletonCircleWrapper = styled(Skeleton)(function (_a) {
     var size = _a.size;
     return "width: ".concat(size, "; max-width: 100%;");
 });
-var StyledSkeletonCircle = styled.View(function (_a) {
+var StyledSkeletonCircle = styled(Skeleton)(function (_a) {
     var core = _a.theme.core, size = _a.size;
     return "\n    background-color: ".concat(core.color.neutral.light, ";\n    height: 0;\n    padding-bottom: 100%;\n    border-radius: ").concat(pxToNumber(size) / 2, "px;\n  ");
 });

package/dist/esm/components/{SkeletonHeading → SkeletonLoading}/SkeletonHeading.js

@@ -22,9 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from '../../styled.native';
-import { SkeletonAnimation } from '../SkeletonAnimation';
-import { Heading3 } from '../Heading3';
-var StyledSkeletonHeading = styled.View(function (_a) {
+import { Heading3 } from '../Heading';
+import { Skeleton } from './Skeleton';
+import { SkeletonAnimation } from './SkeletonAnimation';
+var StyledSkeletonHeading = styled(Skeleton)(function (_a) {
     var core = _a.theme.core, size = _a.size;
     return "\n    background-color: ".concat(core.color.neutral.light, ";\n    width: ").concat(size, ";\n  ");
 });

package/dist/esm/components/{SkeletonText → SkeletonLoading}/SkeletonText.js

@@ -23,9 +23,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useBreakpoint } from '../../hooks';
 import styled from '../../styled.native';
-import { P } from '../P';
-import { SkeletonAnimation } from '../SkeletonAnimation';
-var StyledSkeletonText = styled.View(function (_a) {
+import { P } from '../Text';
+import { Skeleton } from './Skeleton';
+import { SkeletonAnimation } from './SkeletonAnimation';
+var StyledSkeletonText = styled(Skeleton)(function (_a) {
     var core = _a.theme.core, aboveSmallBreakpoint = _a.aboveSmallBreakpoint, short = _a.short;
     return "\n    background-color: ".concat(core.color.neutral.light, ";\n    margin-bottom: ").concat(core.space[2], ";\n    height: ").concat(aboveSmallBreakpoint ? core.fontSize.body.large : core.fontSize.body.small, ";\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
 });

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

@@ -0,0 +1,5 @@
+export * from './Skeleton';
+export * from './SkeletonCircle';
+export * from './SkeletonCTA';
+export * from './SkeletonHeading';
+export * from './SkeletonText';

package/dist/esm/components/Text/Text.js

@@ -0,0 +1,66 @@
+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 { Children, isValidElement, cloneElement, } from 'react';
+import { View } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+var StyledP = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    return 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);
+});
+export var P = styledComponentWithBreakpoints(StyledP);
+var StyledSmall = styled.Text(function (_a) {
+    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    return 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']);
+});
+export var Small = styledComponentWithBreakpoints(StyledSmall);
+export var Strong = styled.Text(function (_a) {
+    var core = _a.theme.core;
+    return "\n    font-family: ".concat(core.fontFamily.bodyBold.native, ";\n  ");
+});
+export var Em = styled.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"])));
+export var LineThrough = styled.Text(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-decoration: line-through;\n"], ["\n  text-decoration: line-through;\n"])));
+export var TextGroup = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    var filteredChildren = [];
+    Children.forEach(children, function (child) {
+        if (isValidElement(child)) {
+            filteredChildren.push(child);
+        }
+    });
+    return (_jsx(View, __assign({}, rest, { children: Children.map(filteredChildren, function (child, index) {
+            if (!isValidElement(child)) {
+                return;
+            }
+            var style = __assign(__assign(__assign({}, child.props.style), (index === 0 ? { marginTop: 0 } : {})), { marginBottom: 0 });
+            return cloneElement(child, {
+                style: style,
+            });
+        }) })));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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

package/dist/esm/components/{CurrencyField → TextField}/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 '../CurrencyInput';
+import { CurrencyInput } from '../Input/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/{EmailField → TextField}/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 '../EmailInput';
+import { EmailInput } from '../Input/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/{NumberField → TextField}/NumberField.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 { NumberInput } from '../NumberInput';
+import { NumberInput } from '../Input/NumberInput';
 export var NumberField = forwardRef(function (_a, ref) {
     var rest = __rest(_a, []);
     return (_jsx(Field, __assign({}, rest, { ref: ref }, { children: _jsx(NumberInput, {}) })));

package/dist/esm/components/{PasswordField → TextField}/PasswordField.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 { PasswordInput } from '../PasswordInput';
+import { PasswordInput } from '../Input/PasswordInput';
 export var PasswordField = forwardRef(function (_a, ref) {
     var hasVisibilityToggle = _a.hasVisibilityToggle, rest = __rest(_a, ["hasVisibilityToggle"]);
     return (_jsx(Field, __assign({}, rest, { ref: ref }, { children: _jsx(PasswordInput, { hasVisibilityToggle: hasVisibilityToggle }) })));

package/dist/esm/components/{PhoneField → TextField}/PhoneField.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 { PhoneInput } from '../PhoneInput';
+import { PhoneInput } from '../Input/PhoneInput';
 export var PhoneField = forwardRef(function (_a, ref) {
     var rest = __rest(_a, []);
     return (_jsx(Field, __assign({}, rest, { ref: ref }, { children: _jsx(PhoneInput, {}) })));

package/dist/esm/components/TextField/TelField.js

@@ -0,0 +1,35 @@
+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 { forwardRef } from 'react';
+import { Field } from '../Field';
+import { PhoneInput } from '../Input/PhoneInput';
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the PhoneField component instead.
+ * */
+export var TelField = 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 (_jsx(Field, __assign({}, rest, { ref: ref }, { children: _jsx(PhoneInput, {}) })));
+});

package/dist/esm/components/TextField/TextField.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 { TextInput } from '../TextInput';
+import { TextInput } from '../Input/TextInput';
 export var TextField = forwardRef(function (_a, ref) {
     var rest = __rest(_a, []);
     return (_jsx(Field, __assign({}, rest, { ref: ref }, { children: _jsx(TextInput, {}) })));

package/dist/esm/components/{TextareaField → TextField}/TextareaField.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 { TextareaInput } from '../TextareaInput';
+import { TextareaInput } from '../Input/TextareaInput';
 export var TextareaField = forwardRef(function (_a, ref) {
     var rest = __rest(_a, []);
     return (_jsx(Field, __assign({}, rest, { ref: ref }, { children: _jsx(TextareaInput, {}) })));

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

@@ -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/esm/components/index.js

@@ -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';