@ovotech/element-native 2.0.4 → 2.2.0-canary-1cac2ba-73

package/dist/esm/components/Radio/Radio.js

@@ -1,7 +1,3 @@
-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++) {
@@ -27,59 +23,45 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from 'react';
 import { TouchableOpacity, View, } from 'react-native';
 import styled from '../../styled.native';
-import { pxToNumber } from '../../utils';
 import { HintText } from '../HintText';
 import { LabelText } from '../LabelText';
 var StyledRadioInputWrapper = styled.View(function (_a) {
-    var radio = _a.theme.radio;
-    var radioSize = pxToNumber(radio.size);
-    var gap = pxToNumber(radio.gap);
-    return "\n      width: ".concat(radioSize + gap, "px;\n      height: ").concat(radio.touchSize, ";\n    ");
+    var core = _a.theme.core;
+    return "\n      width: ".concat(core.space[6], ";\n      height: ").concat(core.space[6], ";\n      margin-right: 10px;\n    ");
 });
 var StyledRadioInput = styled.View(function (_a) {
-    var radio = _a.theme.radio, invalid = _a.invalid, checked = _a.checked;
-    var touchSize = pxToNumber(radio.touchSize);
-    var radioSize = pxToNumber(radio.size);
-    var radioDistance = (touchSize - radioSize) / 2;
-    return "\n      width: ".concat(radio.size, ";\n      height: ").concat(radio.size, ";\n      border: ").concat(radio.borderWidth, " solid;\n      margin-top: ").concat(radioDistance, "px;\n      border-radius: ").concat(radioSize / 2, "px;\n      border-color: ").concat(invalid
-        ? radio.errorColor
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;
+    return "\n      width: ".concat(core.space[6], ";\n      height: ").concat(core.space[6], ";\n      border: ").concat(core.borderWidth.small, " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: 50%;\n      border-color: ").concat(invalid
+        ? semantic.error.border
         : checked
-            ? radio.dotColor
-            : radio.borderColor, ";\n      background: ").concat(radio.background, ";\n      background: ").concat(checked ? radio.checkedBackground : radio.background, ";\n    ");
+            ? core.color.blue.dark
+            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
 });
 var StyledRadioInputDot = styled.View(function (_a) {
-    var radio = _a.theme.radio, checked = _a.checked;
-    var radioSize = pxToNumber(radio.size);
-    var dotSize = pxToNumber(radio.dotSize);
-    var borderWidth = pxToNumber(radio.borderWidth);
-    var dotDistance = (radioSize - dotSize) / 2 - borderWidth;
-    return "\n      width: ".concat(radio.dotSize, ";\n      height: ").concat(radio.dotSize, ";\n      margin: ").concat(dotDistance, "px;\n      border-radius: ").concat(radioSize / 2, "px;\n      background: ").concat(radio.dotColor, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+    var core = _a.theme.core, checked = _a.checked;
+    return "\n      width: ".concat(core.space[3], ";\n      height: ").concat(core.space[3], ";\n      border-radius: 50%;\n      background: ").concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
 });
 var Input = function (_a) {
-    var checked = _a.checked, invalid = _a.invalid, rest = __rest(_a, ["checked", "invalid"]);
+    var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
     return (React.createElement(StyledRadioInputWrapper, __assign({}, rest),
-        React.createElement(StyledRadioInput, { invalid: invalid, checked: checked },
+        React.createElement(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID },
             React.createElement(StyledRadioInputDot, { checked: checked }))));
 };
-var RadioLabelText = styled(LabelText)(function (_a) {
-    var space = _a.theme.space;
-    return "\n    padding-top: ".concat(space[3], ";\n  ");
+var StyledWrapper = styled.View(function (_a) {
+    var core = _a.theme.core;
+    return "\n    padding-top: ".concat(core.space[3], ";\n    flex-direction: row;\n  ");
 });
-var StyledWrapper = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
 var Radio = forwardRef(function (_a, ref) {
     var label = _a.label, hint = _a.hint, checked = _a.checked, invalid = _a.invalid, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     value = _a.value, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
     _b = _a.activeOpacity, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
-    activeOpacity = _b === void 0 ? 0.8 : _b, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "activeOpacity"]);
-    return (React.createElement(TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, 
-        // @ts-ignore
-        invalid: invalid }, rest),
+    activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "activeOpacity", "testID"]);
+    return (React.createElement(TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest),
         React.createElement(StyledWrapper, null,
-            React.createElement(Input, { checked: checked, invalid: invalid }),
+            React.createElement(Input, { checked: checked, invalid: invalid, testID: testID }),
             React.createElement(View, { style: { flexShrink: 1 } },
-                React.createElement(RadioLabelText, null, label),
+                React.createElement(LabelText, null, label),
                 hint ? React.createElement(HintText, null, hint) : null))));
 });
 export { Radio };
-var templateObject_1;

package/dist/esm/components/SelectField/Select.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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useState } from 'react';
+import { Modal, ScrollView, View } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { Icon } from '../Icon';
+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]);
+});
+var DropdownWrapper = styled.View(function (_a) {
+    var core = _a.theme.core;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    flex: 1;\n    justify-content: center;\n    align-items: center;\n    // 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4\n    background-color: ", "40;\n  "], ["\n    flex: 1;\n    justify-content: center;\n    align-items: center;\n    // 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4\n    background-color: ", "40;\n  "])), core.color.neutral.darkest);
+});
+var DropdownContainer = styled.SafeAreaView(function (_a) {
+    var core = _a.theme.core;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 95%;\n    max-height: 70%;\n    border-radius: ", ";\n    background-color: ", ";\n  "], ["\n    width: 95%;\n    max-height: 70%;\n    border-radius: ", ";\n    background-color: ", ";\n  "])), core.radius.small, core.color.brand.white);
+});
+var SelectOption = styled.TouchableOpacity(function (_a) {
+    var _b = _a.theme, semantic = _b.semantic, core = _b.core, isLastOption = _a.isLastOption;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    border-bottom-color: ", ";\n    border-bottom-width: ", "px;\n    padding-horizontal: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    border-bottom-color: ", ";\n    border-bottom-width: ", "px;\n    padding-horizontal: ", ";\n  "])), semantic.border.differentiated, isLastOption ? 0 : 1, core.space[4]);
+});
+var Radio = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, isChecked = _a.isChecked;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    width: 24px;\n    height: 24px;\n    margin-left: auto;\n    border-radius: 24px;\n    border-width: ", ";\n    border-color: ", ";\n  "], ["\n    width: 24px;\n    height: 24px;\n    margin-left: auto;\n    border-radius: 24px;\n    border-width: ", ";\n    border-color: ", ";\n  "])), core.borderWidth.small, isChecked
+        ? semantic.focus.outline
+        : semantic.border.functional);
+});
+var RadioDot = styled.View(function (_a) {
+    var semantic = _a.theme.semantic, isChecked = _a.isChecked;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    background-color: ", ";\n    position: absolute;\n    top: 5px;\n    width: 12px;\n    height: 12px;\n    border-radius: 12px;\n    align-self: center;\n    opacity: ", ";\n  "], ["\n    background-color: ", ";\n    position: absolute;\n    top: 5px;\n    width: 12px;\n    height: 12px;\n    border-radius: 12px;\n    align-self: center;\n    opacity: ", ";\n  "])), semantic.focus.outline, isChecked ? 1 : 0);
+});
+var StyledP = styled(P)(function (_a) {
+    var core = _a.theme.core;
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: ", ";\n  "], ["\n    margin-top: ", ";\n  "])), core.space[3]);
+});
+export var Select = function (_a) {
+    var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.defaultSelected, defaultSelected = _c === void 0 ? { label: '', value: 'default' } : _c, _d = _a.noOptionMessage, noOptionMessage = _d === void 0 ? 'No option selected' : _d, _e = _a.onSelected, onSelected = _e === void 0 ? function () { return null; } : _e, _f = _a.hasError, hasError = _f === void 0 ? false : _f, _g = _a.testID, testID = _g === void 0 ? 'select' : _g;
+    var _h = useState(false), isOpen = _h[0], setOpen = _h[1];
+    var _j = useState(defaultSelected), selected = _j[0], setSelected = _j[1];
+    var handleOptionPress = function (val) {
+        onSelected(val);
+        setOpen(false);
+        setSelected(val);
+    };
+    var extendedOptions = __spreadArray([
+        { label: "-- ".concat(noOptionMessage, " --"), value: 'default' }
+    ], options, true);
+    return (React.createElement(View, null,
+        React.createElement(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); } },
+            React.createElement(P, { style: { marginTop: 0, marginBottom: 0 } }, selected.value === 'default' ? '' : selected.label),
+            React.createElement(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })),
+        React.createElement(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); } },
+            React.createElement(DropdownWrapper, null,
+                React.createElement(DropdownContainer, null,
+                    React.createElement(ScrollView, { nestedScrollEnabled: true }, extendedOptions.map(function (option, i) { return (React.createElement(SelectOption, { key: option.label, accessibilityRole: "radio", isLastOption: i === extendedOptions.length - 1, onPress: function () { return handleOptionPress(option); } },
+                        React.createElement(StyledP, null,
+                            React.createElement(Strong, null, option.label)),
+                        React.createElement(Radio, { isChecked: selected.value === option.value },
+                            React.createElement(RadioDot, { isChecked: selected.value === option.value })))); })))))));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -0,0 +1,31 @@
+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 React from 'react';
+import { Field } from '../Field';
+import { Select } from './Select';
+export var SelectField = function (_a) {
+    var error = _a.error, options = _a.options, onSelected = _a.onSelected, noOptionMessage = _a.noOptionMessage, defaultSelected = _a.defaultSelected, testID = _a.testID, rest = __rest(_a, ["error", "options", "onSelected", "noOptionMessage", "defaultSelected", "testID"]);
+    return (React.createElement(Field, __assign({ affixWidth: 20, error: error }, rest),
+        React.createElement(React.Fragment, null,
+            React.createElement(Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), testID: testID }))));
+};

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

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

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

@@ -0,0 +1,30 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Animated, Platform } from 'react-native';
+export var SkeletonAnimation = function (_a) {
+    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? 'pulse' : _b, testID = _a.testID;
+    var animationRef = useRef(new Animated.Value(0));
+    var animationLoop = useRef();
+    useEffect(function () {
+        animationLoop.current = Animated.timing(animationRef.current, {
+            toValue: 2,
+            delay: 400,
+            duration: 1500,
+            useNativeDriver: !!Platform.select({
+                web: false,
+                native: true,
+            }),
+        });
+        animationRef.current.setValue(0);
+        Animated.loop(animationLoop.current).start();
+    }, []);
+    return (React.createElement(View, { accessibilityRole: "none", accessibilityLabel: "loading...", accessible: false, testID: testID }, animation === 'pulse' ? (React.createElement(Animated.View, { style: [
+            {
+                height: '100%',
+                width: '100%',
+                opacity: animationRef.current.interpolate({
+                    inputRange: [0.25, 1, 2],
+                    outputRange: [1, 0.25, 1],
+                }),
+            },
+        ] }, children)) : (React.createElement(View, null, children))));
+};

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

@@ -24,11 +24,13 @@ import React from 'react';
 import styled from '../../styled.native';
 import { P } from '../Text';
 import { Skeleton } from './Skeleton';
+import { SkeletonAnimation } from './SkeletonAnimation';
 var StyledSkeletonCTA = styled(Skeleton)(function (_a) {
     var _b = _a.theme, colors = _b.colors, space = _b.space, size = _a.size;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n    height: ").concat(space[12], ";\n  ");
 });
 export var SkeletonCTA = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);
-    return (React.createElement(StyledSkeletonCTA, __assign({ as: P, size: size }, rest)));
+    return (React.createElement(SkeletonAnimation, null,
+        React.createElement(StyledSkeletonCTA, __assign({ as: P, size: size }, rest))));
 };

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

@@ -24,6 +24,7 @@ import React from 'react';
 import styled from '../../styled.native';
 import { pxToNumber } from '../../utils';
 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%;");
@@ -34,6 +35,7 @@ var StyledSkeletonCircle = styled(Skeleton)(function (_a) {
 });
 export var SkeletonCircle = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["size"]);
-    return (React.createElement(StyledSkeletonCircleWrapper, __assign({ size: size }, rest),
-        React.createElement(StyledSkeletonCircle, { size: size })));
+    return (React.createElement(SkeletonAnimation, null,
+        React.createElement(StyledSkeletonCircleWrapper, __assign({ size: size }, rest),
+            React.createElement(StyledSkeletonCircle, { size: size }))));
 };

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

@@ -24,11 +24,13 @@ import React from 'react';
 import styled from '../../styled.native';
 import { Heading3 } from '../Heading';
 import { Skeleton } from './Skeleton';
+import { SkeletonAnimation } from './SkeletonAnimation';
 var StyledSkeletonHeading = styled(Skeleton)(function (_a) {
     var colors = _a.theme.colors, size = _a.size;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n  ");
 });
 export var SkeletonHeading = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);
-    return (React.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0"));
+    return (React.createElement(SkeletonAnimation, null,
+        React.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0")));
 };

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

@@ -21,12 +21,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { View } from 'react-native';
 import { useBreakpoint } from '../../hooks';
 import styled from '../../styled.native';
 import { responsiveStyle } from '../../utils';
 import { P } from '../Text';
 import { Skeleton } from './Skeleton';
+import { SkeletonAnimation } from './SkeletonAnimation';
 var StyledSkeletonText = styled(Skeleton)(function (_a) {
     var _b = _a.theme, colors = _b.colors, space = _b.space, responsiveFontSizes = _b.responsiveFontSizes, short = _a.short, breakpoints = _a.breakpoints;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    margin-bottom: ").concat(space[2], ";\n    ").concat(responsiveStyle('height', responsiveFontSizes.body, breakpoints), "\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
@@ -38,5 +38,5 @@ export var SkeletonText = function (_a) {
     for (var i = 1; i <= lines; i++) {
         generatedLines.push(React.createElement(StyledSkeletonText, { key: "line-".concat(i), short: i === lines, breakpoints: breakpoints }));
     }
-    return (React.createElement(P, __assign({ as: View }, rest), generatedLines));
+    return (React.createElement(P, __assign({ as: SkeletonAnimation }, rest), generatedLines));
 };

package/dist/esm/components/SubLabelText/SubLabelText.js

@@ -8,7 +8,7 @@ import { styledComponentWithBreakpoints } from '../../utils';
 var StyledSubLabelText = styled.Text(function (_a) {
     var field = _a.theme.field, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), field.fontFamily, calculateLineHeight(fontSize, field.lineHeight), field.subLabel.fontWeight, field.subLabel.color, fontSize);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), field.fontFamily, calculateLineHeight(fontSize, field.lineHeight), field.subLabel.color, fontSize);
 });
 var SubLabelText = styledComponentWithBreakpoints(StyledSubLabelText);
 export { SubLabelText };

package/dist/esm/components/SummaryList/SummaryList.js

@@ -22,8 +22,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { Children, cloneElement, } from 'react';
 import { Dd, Dl, Dt } from '../List';
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the Description List (List/Dl) component instead.
+ * */
 var SummaryList = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
+    console.warn('SummaryList component has been deprecated and will be removed in a future release. Please use the DescriptionList component instead.');
     return (React.createElement(Dl, __assign({}, rest), Children.map(children, function (child, index) {
         return cloneElement(child, {
             index: index,

package/dist/esm/components/Tabs/Tab.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,24 +26,26 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from 'react';
 import { useBreakpoint, useFullWidth, } from '../../hooks';
-import styled from '../../styled.native';
-import { pxToNumber } from '../../utils';
-var StyledText = styled.Text(function (_a) {
-    var tabs = _a.theme.tabs, smallAndUp = _a.smallAndUp, active = _a.active;
-    return "\n  font-size: ".concat(tabs.tab.fontSize[smallAndUp ? 1 : 0], ";\n  font-family: ").concat(tabs.tab.fontFamily, ";\n  font-weight: ").concat(tabs.tab.fontWeight, ";\n  background-color: ").concat(active ? tabs.tab.active.backgroundColor : tabs.tab.inactive.backgroundColor, ";\n  line-height: ").concat("".concat(tabs.tab.lineHeight * pxToNumber(tabs.tab.fontSize[0]), "px"), ";\n  color: ").concat(active ? tabs.tab.active.foregroundColor : tabs.tab.inactive.foregroundColor, ";\n  text-align: center;\n  padding: ").concat("".concat(tabs.tab.paddingVertical[smallAndUp ? 1 : 0], " ").concat(tabs.tab.paddingHorizontal[smallAndUp ? 1 : 0]), ";\n");
+import styled, { css } from '../../styled.native';
+var TabText = 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-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "])), core.fontSize.body.small, core.fontFamily.bodyBold.native, core.lineHeight.body.small, semantic.message.base, core.space[3], core.space[smallAndUp ? 3 : 2]);
 });
-var StyledTouchableOpacity = styled.TouchableOpacity(function (_a) {
-    var _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.first, first = _c === void 0 ? false : _c, _d = _a.last, last = _d === void 0 ? false : _d, _e = _a.stretch, stretch = _e === void 0 ? false : _e, _f = _a.theme, card = _f.card, tabs = _f.tabs, inline = _a.inline;
-    return "flex-grow: ".concat(stretch ? 1 : 0, ";\n  border: ").concat(card.borderWidth, " solid ").concat(tabs.tab.borderColor, ";\n  border-bottom-color: ").concat(active ? tabs.tab.active.backgroundColor : card.borderColor, ";\n  border-top-color: ").concat(inline ? card.borderColor : tabs.tab.borderColor, ";\n  border-right-color: ").concat(last && inline ? card.borderColor : tabs.tab.borderColor, "};\n  border-left-color: ").concat(first && inline ? card.borderColor : tabs.tab.borderColor, "};\n  border-right-width: ").concat(card.borderWidth, ";\n  border-left-width: ").concat(first ? card.borderWidth : 0, ";\n  background-color: ").concat(active ? tabs.tab.active.borderColor : tabs.tab.inactive.backgroundColor, ";\n  padding-bottom: ").concat(tabs.tab.borderBottomWidth, ";\n");
+var TabTouchable = styled.TouchableOpacity(function (_a) {
+    var _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.first, first = _c === void 0 ? false : _c, _d = _a.last, last = _d === void 0 ? false : _d, _e = _a.stretch, stretch = _e === void 0 ? false : _e, _f = _a.theme, core = _f.core, semantic = _f.semantic, inline = _a.inline;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    flex-grow: ", ";\n    border: ", " solid ", ";\n    ", "\n    ", "\n    ", "\n    ", "\n  "], ["\n    flex-grow: ", ";\n    border: ", " solid ", ";\n    ", "\n    ", "\n    ", "\n    ", "\n  "])), stretch ? 1 : 0, core.borderWidth.small, semantic.border.differentiated, active
+        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            border-bottom-color: ", ";\n            border-bottom-width: ", ";\n          "], ["\n            border-bottom-color: ", ";\n            border-bottom-width: ", ";\n          "])), semantic.message.branded, core.borderWidth.medium) : '', !inline
+        ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            border-top-color: transparent;\n            border-top-width: 0;\n          "], ["\n            border-top-color: transparent;\n            border-top-width: 0;\n          "]))) : '', last && inline
+        ? ''
+        : css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            border-right-color: transparent;\n            border-right-width: 0;\n          "], ["\n            border-right-color: transparent;\n            border-right-width: 0;\n          "]))), first && inline
+        ? ''
+        : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            border-left-color: transparent;\n            border-left-width: 0;\n          "], ["\n            border-left-color: transparent;\n            border-left-width: 0;\n          "]))));
 });
-export var Tab = forwardRef(function (
-// eslint-disable-next-line
-_a, ref) {
-    var active = _a.active, fullWidth = _a.fullWidth, children = _a.children, rest = __rest(_a, 
-    // eslint-disable-next-line
-    ["active", "fullWidth", "children"]);
+export var Tab = forwardRef(function (_a, ref) {
+    var active = _a.active, fullWidth = _a.fullWidth, children = _a.children, rest = __rest(_a, ["active", "fullWidth", "children"]);
     var stretch = useFullWidth(fullWidth);
     var breakpoints = useBreakpoint();
-    return (React.createElement(StyledTouchableOpacity, __assign({ accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: stretch, ref: ref }, rest),
-        React.createElement(StyledText, __assign({ active: active }, breakpoints), children)));
+    return (React.createElement(TabTouchable, __assign({ accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: stretch, ref: ref }, rest),
+        React.createElement(TabText, __assign({ active: active }, breakpoints), children)));
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/esm/components/Tabs/TabList.js

@@ -25,24 +25,26 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { Children, cloneElement } from 'react';
-import { View } from 'react-native';
 import styled, { css } from '../../styled.native';
 import { callAll } from '../../utils';
-export var TabList = styled(function (_a) {
+var StyledTabList = styled.View(function (_a) {
+    var core = _a.theme.core;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    margin: -", ";\n  "], ["\n    flex-direction: row;\n    margin: -", ";\n  "])), core.borderWidth.small);
+});
+export var TabList = function (_a) {
     var children = _a.children, setActiveTab = _a.setActiveTab, activeTab = _a.activeTab, tabRefs = _a.tabRefs, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "setActiveTab", "activeTab", "tabRefs", "fullWidth", "inline"]);
-    return (React.createElement(View, __assign({ accessibilityRole: "tablist" }, rest), Children.map(children, function (child, i) {
-        return cloneElement(child, {
-            onPress: callAll(function () { return setActiveTab && setActiveTab(i); }, child.props.onPress),
-            active: activeTab === i,
-            fullWidth: fullWidth,
-            ref: tabRefs[i],
-            first: i === 0,
-            last: Children.count(children) - 1 === i,
-            inline: inline,
-        });
+    return (React.createElement(StyledTabList, __assign({ accessibilityRole: "tablist" }, rest), Children.map(children, function (child, i) {
+        return child
+            ? cloneElement(child, {
+                onPress: callAll(function () { return setActiveTab && setActiveTab(i); }, child.props.onPress),
+                active: activeTab === i,
+                fullWidth: fullWidth,
+                ref: tabRefs === null || tabRefs === void 0 ? void 0 : tabRefs[i],
+                first: i === 0,
+                last: Children.count(children) - 1 === i,
+                inline: inline,
+            })
+            : null;
     })));
-})(function (_a) {
-    var card = _a.theme.card;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    margin: -", ";\n  "], ["\n    flex-direction: row;\n    margin: -", ";\n  "])), card.borderWidth);
-});
+};
 var templateObject_1;

package/dist/esm/components/Tabs/TabPanel.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++) {
@@ -21,14 +25,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { useBreakpoint } from '../../hooks';
-import styled from '../../styled.native';
+import styled, { css } from '../../styled.native';
 var StyledView = styled.View(function (_a) {
-    var card = _a.theme.card, smallAndUp = _a.smallAndUp;
-    return "\n    padding: ".concat(card.padding[smallAndUp ? 1 : 0], ";\n    border-top-width: ").concat(card.borderWidth, ";\n    border-style: solid;\n    border-color: ").concat(card.borderColor, ";\n    z-index: -1;\n  ");
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    border-top-width: ", ";\n    border-style: solid;\n    border-color: ", ";\n    z-index: -1;\n  "], ["\n    padding: ", ";\n    border-top-width: ", ";\n    border-style: solid;\n    border-color: ", ";\n    z-index: -1;\n  "])), core.space[4], core.borderWidth.small, semantic.border.differentiated);
 });
 export var TabPanel = function (_a) {
     var rest = __rest(_a, []);
-    var breakpoints = useBreakpoint();
-    return React.createElement(StyledView, __assign({}, breakpoints, rest));
+    return React.createElement(StyledView, __assign({}, rest));
 };
+var templateObject_1;

package/dist/esm/components/Tabs/Tabs.js

@@ -30,9 +30,15 @@ import { filterChildrenByType } from '../../utils';
 import { Card } from '../Card';
 import { TabList } from './TabList';
 import { TabPanel } from './TabPanel';
-export var Tabs = styled(function (_a) {
+var TabsCard = styled(Card)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "], ["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "])), core.borderWidth.small, inline ? semantic.border.differentiated : 'transparent');
+});
+export var Tabs = function (_a) {
     var children = _a.children, _b = _a.defaultSelected, defaultSelected = _b === void 0 ? 0 : _b, onSelected = _a.onSelected, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "defaultSelected", "onSelected", "fullWidth", "inline"]);
     var _c = useState(defaultSelected), activeTab = _c[0], setActiveTab = _c[1];
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore there is no way to properly type it
     var tabList = filterChildrenByType(children, TabList);
     var tabPanels = filterChildrenByType(children, TabPanel);
     var tabRefs = tabPanels.map(function () { return createRef(); });
@@ -45,7 +51,7 @@ export var Tabs = styled(function (_a) {
             loaded.current = true;
         }
     }, [onSelected, activeTab]);
-    return (React.createElement(Card, __assign({}, rest),
+    return (React.createElement(TabsCard, __assign({ inline: inline }, rest),
         tabList.map(function (child) {
             return cloneElement(child, {
                 setActiveTab: setActiveTab,
@@ -62,8 +68,5 @@ export var Tabs = styled(function (_a) {
                 hidden: activeTab !== index,
             });
         })));
-})(function (_a) {
-    var _b = _a.theme, card = _b.card, tabs = _b.tabs, inline = _a.inline;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "], ["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "])), card.borderWidth, inline ? card.borderColor : tabs.tab.borderColor);
-});
+};
 var templateObject_1;

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

@@ -29,22 +29,18 @@ import { View } from 'react-native';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 var StyledP = styled.Text(function (_a) {
-    var text = _a.theme.text, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp ? text.p.fontSize[1] : text.p.fontSize[0];
-    var lineHeight = smallAndUp ? text.p.lineHeight[1] : text.p.lineHeight[0];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), text.fontFamily, text.fontWeight, fontSize, lineHeight, text.color, smallAndUp ? text.p.marginTop[1] : text.p.marginTop[0], smallAndUp
-        ? text.p.marginBottom[1]
-        : text.p.marginBottom[0]);
+    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    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    margin-bottom: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.body[smallAndUp ? 'large' : 'small'], core.lineHeight.body[smallAndUp ? 'large' : 'small'], semantic.message.base, core.space[3]);
 });
 export var P = styledComponentWithBreakpoints(StyledP);
 var StyledSmall = styled.Text(function (_a) {
-    var text = _a.theme.text, smallAndUp = _a.smallAndUp;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-size: ", ";\n  "], ["\n    font-size: ", ";\n  "])), smallAndUp ? text.small.fontSize[1] : text.small.fontSize[0]);
+    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 text = _a.theme.text;
-    return "\n    font-family: ".concat(text.strong.fontFamily, ";\n    font-weight: ").concat(text.strong.fontWeight, ";\n  ");
+    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"])));

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

@@ -24,7 +24,7 @@ import React, { forwardRef } from 'react';
 import { Field } from '../Field';
 import { PasswordInput } from '../Input/PasswordInput';
 export var PasswordField = forwardRef(function (_a, ref) {
-    var rest = __rest(_a, []);
+    var hasVisibilityToggle = _a.hasVisibilityToggle, rest = __rest(_a, ["hasVisibilityToggle"]);
     return (React.createElement(Field, __assign({}, rest, { ref: ref }),
-        React.createElement(PasswordInput, null)));
+        React.createElement(PasswordInput, { hasVisibilityToggle: hasVisibilityToggle })));
 });

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

@@ -0,0 +1,30 @@
+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 React, { forwardRef } from 'react';
+import { Field } from '../Field';
+import { PhoneInput } from '../Input/PhoneInput';
+export var PhoneField = forwardRef(function (_a, ref) {
+    var rest = __rest(_a, []);
+    return (React.createElement(Field, __assign({}, rest, { ref: ref }),
+        React.createElement(PhoneInput, null)));
+});

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

@@ -22,9 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from 'react';
 import { Field } from '../Field';
-import { TelInput } from '../Input/TelInput';
+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 (React.createElement(Field, __assign({}, rest, { ref: ref }),
-        React.createElement(TelInput, null)));
+        React.createElement(PhoneInput, null)));
 });

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

@@ -2,6 +2,7 @@ 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';