@ovotech/element-native 2.2.0-canary-668a0ee-91 → 2.2.0

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

@@ -24,51 +24,59 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 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);
+    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    color: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    color: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), heading.fontFamily, heading.color, heading.heading1.fontSize[smallAndUp ? 1 : 0], heading.heading1.lineHeight[smallAndUp ? 1 : 0], smallAndUp
+        ? heading.heading1.marginTop[1]
+        : heading.heading1.marginTop[0], smallAndUp
+        ? heading.heading1.marginBottom[1]
+        : heading.heading1.marginBottom[0]);
 });
 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)));
+    return (React.createElement(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);
+    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), heading.fontFamily, heading.heading2.fontSize[smallAndUp ? 1 : 0], heading.heading2.lineHeight[smallAndUp ? 1 : 0], heading.color, smallAndUp
+        ? heading.heading2.marginTop[1]
+        : heading.heading2.marginTop[0], smallAndUp
+        ? heading.heading2.marginBottom[1]
+        : heading.heading2.marginBottom[0]);
 });
 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)));
+    return (React.createElement(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);
+    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), heading.fontFamily, heading.heading3.fontSize[smallAndUp ? 1 : 0], heading.heading3.lineHeight[smallAndUp ? 1 : 0], heading.color, smallAndUp
+        ? heading.heading3.marginTop[1]
+        : heading.heading3.marginTop[0], smallAndUp
+        ? heading.heading3.marginBottom[1]
+        : heading.heading3.marginBottom[0]);
 });
 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)));
+    return (React.createElement(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);
+    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), heading.fontFamily, heading.heading3.fontSize[smallAndUp ? 1 : 0], heading.heading3.lineHeight[smallAndUp ? 1 : 0], heading.color, smallAndUp
+        ? heading.heading4.marginTop[1]
+        : heading.heading4.marginTop[0], smallAndUp
+        ? heading.heading4.marginBottom[1]
+        : heading.heading4.marginBottom[0]);
 });
 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)));
+    return (React.createElement(StyledHeading4, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/esm/components/HintText/HintText.js

@@ -3,15 +3,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { css } from '../../styled.native';
+import { calculateLineHeight } from '../../theme';
 import { styledComponentWithBreakpoints } from '../../utils';
 var StyledHintText = 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;
-    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, fontSize, smallAndUp
-        ? core.lineHeight.body.large
-        : core.lineHeight.body.small, semantic.border.functional);
+    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      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "])), field.fontFamily, fontSize, calculateLineHeight(fontSize, field.lineHeight), field.hint.color);
 });
 var HintText = styledComponentWithBreakpoints(StyledHintText);
 export { HintText };

package/dist/esm/components/Icon/Icon.js

@@ -20,17 +20,16 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 import { useIcons } from '../../providers';
 import { ThemeContext } from '../../styled.native';
 export var Icon = function (_a) {
     var name = _a.name, size = _a.size, color = _a.color, testID = _a.testID, rest = __rest(_a, ["name", "size", "color", "testID"]);
     var icons = useIcons();
-    var semantic = useContext(ThemeContext).semantic;
+    var colors = useContext(ThemeContext).colors;
     // @ts-ignore to support additional icons.
     var Svg = name && icons[name];
-    return Svg ? (_jsx(Svg, __assign({ testID: testID ? testID : "element-icon".concat(name ? "-".concat(name) : ''), 
+    return Svg ? (React.createElement(Svg, __assign({ testID: testID ? testID : "element-icon".concat(name ? "-".concat(name) : ''), 
         // @ts-ignore this is valid.
-        color: color !== null && color !== void 0 ? color : semantic.message.base, width: size, height: size }, rest))) : null;
+        color: color !== null && color !== void 0 ? color : colors.body, width: size, height: size }, rest))) : null;
 };

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

@@ -20,8 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, createRef } from 'react';
+import React, { forwardRef, createRef } from 'react';
 import { mergeRefs } from '../../utils';
 import { NumberInput } from './NumberInput';
 var CurrencyInput = forwardRef(function (_a, ref) {
@@ -29,6 +28,6 @@ var CurrencyInput = forwardRef(function (_a, ref) {
     var inputRef = createRef();
     var updatedAccessibilityLabel = "".concat(accessibilityLabel, " ").concat(currency === 'GBP' ? 'pounds' : currency === 'EUR' ? 'euro' : 'dollar').trim();
     var iconName = currency === 'GBP' ? 'pound' : currency === 'EUR' ? 'euro' : 'dollar';
-    return (_jsx(NumberInput, __assign({}, rest, { invalid: invalid, accessibilityLabel: updatedAccessibilityLabel, ref: mergeRefs(ref, inputRef), iconLeft: iconName })));
+    return (React.createElement(NumberInput, __assign({}, rest, { invalid: invalid, accessibilityLabel: updatedAccessibilityLabel, ref: mergeRefs(ref, inputRef), iconLeft: iconName })));
 });
 export { CurrencyInput };

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

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

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

@@ -24,48 +24,54 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
+import React, { useState, forwardRef, useContext } from 'react';
 import { useBreakpoint } from '../../hooks';
-import styled, { css } from '../../styled.native';
+import styled, { css, ThemeContext } from '../../styled.native';
+import { pxToNumber } from '../../utils';
 import { Icon } from '../Icon/Icon';
 var StyledIcon = styled(Icon)(function (_a) {
-    var core = _a.theme.core, side = _a.side, focused = _a.focused;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "], ["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "])), focused ? '16px' : '14px', side === 'left' ? "left: ".concat(core.space[2]) : '', side === 'right' ? "right: ".concat(core.space[2]) : '');
+    var _b = _a.theme, input = _b.input, focusRing = _b.focusRing, side = _a.side, focused = _a.focused;
+    var distance = (pxToNumber(input.height) - pxToNumber(input.icon.size)) / 2 +
+        (focused ? pxToNumber(focusRing.distance) : 0);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    width: ", ";\n    z-index: 1;\n    top: ", "px;\n    ", ";\n    ", ";\n  "], ["\n    position: absolute;\n    width: ", ";\n    z-index: 1;\n    top: ", "px;\n    ", ";\n    ", ";\n  "])), input.icon.size, distance, side === 'left' ? "left: ".concat(distance, "px") : '', side === 'right' ? "right: ".concat(distance, "px") : '');
 });
 var Input = forwardRef(function (_a, ref) {
     var onFocus = _a.onFocus, onBlur = _a.onBlur, style = _a.style, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rightSlot = _a.rightSlot, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight", "rightSlot"]);
     var _b = useState(false), focused = _b[0], setFocused = _b[1];
     var breakpoints = useBreakpoint();
-    return (_jsxs(InputWrapper, __assign({ focused: focused }, { children: [iconLeft ? (_jsx(StyledIcon, { name: iconLeft, size: 16, focused: focused, pointerEvents: "none", side: "left" })) : null, _jsx(StyledInput, __assign({}, rest, breakpoints, { iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, 
-                // @ts-ignore
-                ref: ref, onFocus: function (event) {
-                    setFocused(true);
-                    if (onFocus) {
-                        onFocus(event);
-                    }
-                }, onBlur: function (event) {
-                    setFocused(false);
-                    if (onBlur) {
-                        onBlur(event);
-                    }
-                } })), iconRight && !rightSlot ? (_jsx(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null, rightSlot] })));
+    var input = useContext(ThemeContext).input;
+    return (React.createElement(InputWrapper, { focused: focused },
+        iconLeft ? (React.createElement(StyledIcon, { name: iconLeft, size: pxToNumber(input.icon.size), focused: focused, pointerEvents: "none", side: "left" })) : null,
+        React.createElement(StyledInput, __assign({}, rest, breakpoints, { iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, 
+            // @ts-ignore
+            ref: ref, onFocus: function (event) {
+                setFocused(true);
+                if (onFocus) {
+                    onFocus(event);
+                }
+            }, onBlur: function (event) {
+                setFocused(false);
+                if (onBlur) {
+                    onBlur(event);
+                }
+            } })),
+        iconRight && !rightSlot ? (React.createElement(StyledIcon, { name: iconRight, size: pxToNumber(input.icon.size), focused: focused, pointerEvents: "none", side: "right" })) : null,
+        rightSlot));
 });
 var InputWrapper = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, focused = _a.focused;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "], ["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "])), core.radius.small, semantic.border.functional, focused
-        ? "\n      border-width: ".concat(core.borderWidth.small, ";\n      border-color: ").concat(semantic.focus.outline, ";\n      padding: 2px;\n      margin: -4px;")
+    var _b = _a.theme, input = _b.input, focusRing = _b.focusRing, focused = _a.focused;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    align-self: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    border-width: 0px;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "], ["\n    align-self: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    border-width: 0px;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "])), input.background, input.borderRadius, focusRing.color, focused
+        ? "\n      border-width: ".concat(focusRing.width, ";\n      padding: ").concat(focusRing.distance, ";\n      margin: -").concat(pxToNumber(focusRing.width) +
+            pxToNumber(focusRing.distance), "px;")
         : null);
 });
 var StyledInput = styled.TextInput(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, smallAndUp = _a.smallAndUp, iconLeft = _a.iconLeft, iconRight = _a.iconRight, hasRightSlot = _a.hasRightSlot;
-    var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
+    var input = _a.theme.input, invalid = _a.invalid, smallAndUp = _a.smallAndUp, iconLeft = _a.iconLeft, iconRight = _a.iconRight, hasRightSlot = _a.hasRightSlot;
+    var fontSize = smallAndUp ? input.fontSize[1] : input.fontSize[0];
     var errorStyles = invalid
-        ? "\n        border-color: ".concat(semantic.message.error, ";\n      ")
+        ? "\n        border-width: ".concat(input.error.borderWidth, ";\n        border-color: ").concat(input.error.color, ";\n      ")
         : '';
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          font-family: ", ";\n          color: ", ";\n          font-size: ", ";\n          height: ", ";\n          line-height: 18px; /* Corrects for responsive line height in fixed height input */\n          border: ", " solid ", ";\n          border-radius: ", ";\n          padding: 0 ", ";\n          flex: 1;\n\n          ", "\n          ", "\n\n          ", "\n        "], ["\n          font-family: ", ";\n          color: ", ";\n          font-size: ", ";\n          height: ", ";\n          line-height: 18px; /* Corrects for responsive line height in fixed height input */\n          border: ", " solid ", ";\n          border-radius: ", ";\n          padding: 0 ", ";\n          flex: 1;\n\n          ", "\n          ", "\n\n          ", "\n        "])), core.fontFamily.body.native, semantic.message.base, fontSize, core.space[11], core.borderWidth.small, semantic.border.functional, core.radius.small, core.space[2], iconLeft ? "padding-left: ".concat(core.space[8], ";") : '', iconRight || hasRightSlot ? "padding-right: ".concat(core.space[8], ";") : '', errorStyles);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-family: ", ";\n      color: ", ";\n      font-size: ", ";\n      height: ", ";\n      line-height: 18px; /* Corrects for responsive line height in fixed height input */\n      border: ", " solid ", ";\n      background: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      flex: 1;\n\n      ", "\n      ", "\n\n      ", "\n    "], ["\n      font-family: ", ";\n      color: ", ";\n      font-size: ", ";\n      height: ", ";\n      line-height: 18px; /* Corrects for responsive line height in fixed height input */\n      border: ", " solid ", ";\n      background: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      flex: 1;\n\n      ", "\n      ", "\n\n      ", "\n    "])), input.fontFamily, input.color, fontSize, input.height, input.borderWidth, input.borderColor, input.background, input.borderRadius, input.padding, iconLeft ? "padding-left: ".concat(input.height, ";") : '', iconRight || hasRightSlot ? "padding-right: ".concat(input.height, ";") : '', errorStyles);
 });
 export { Input };
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -9,8 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { Input } from './Input';
-var NumberInput = forwardRef(function (props, ref) { return (_jsx(Input, __assign({}, props, { keyboardType: "numeric", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
+var NumberInput = forwardRef(function (props, ref) { return (React.createElement(Input, __assign({}, props, { keyboardType: "numeric", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
 export { NumberInput };

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

@@ -20,13 +20,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { Input } from './Input';
 import { PasswordVisibilityToggle, useTogglePasswordVisibility, } from './PasswordVisibilityToggle';
 var PasswordInput = forwardRef(function (_a, ref) {
     var props = __rest(_a, []);
     var _b = useTogglePasswordVisibility(), isPasswordVisible = _b.isPasswordVisible, handlePasswordVisibility = _b.handlePasswordVisibility;
-    return (_jsx(Input, __assign({}, props, { rightSlot: props.hasVisibilityToggle ? (_jsx(PasswordVisibilityToggle, { iconName: isPasswordVisible ? 'hide' : 'show', visibilityToggleLabel: isPasswordVisible ? 'Hide password' : 'Show password', handlePasswordVisibility: handlePasswordVisibility })) : null, keyboardType: "default", autoCapitalize: "none", autoCorrect: false, blurOnSubmit: false, secureTextEntry: !isPasswordVisible, ref: ref })));
+    return (React.createElement(Input, __assign({}, props, { rightSlot: props.hasVisibilityToggle ? (React.createElement(PasswordVisibilityToggle, { iconName: isPasswordVisible ? 'hide' : 'show', visibilityToggleLabel: isPasswordVisible ? 'Hide password' : 'Show password', handlePasswordVisibility: handlePasswordVisibility })) : null, keyboardType: "default", autoCapitalize: "none", autoCorrect: false, blurOnSubmit: false, secureTextEntry: !isPasswordVisible, ref: ref })));
 });
 export { PasswordInput };

package/dist/esm/components/Input/PasswordInput.styled.js

@@ -4,8 +4,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { Pressable } from 'react-native';
 import styled, { css } from '../../styled.native';
+import { pxToNumber } from '../../utils';
 export var StyledPressable = styled(Pressable)(function (_a) {
-    var core = _a.theme.core, focused = _a.focused;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      position: absolute;\n      width: ", ";\n      z-index: 1;\n      top: ", ";\n      right: ", ";\n    "], ["\n      display: flex;\n      align-items: center;\n      position: absolute;\n      width: ", ";\n      z-index: 1;\n      top: ", ";\n      right: ", ";\n    "])), core.space[4], focused ? '16px' : '14px', core.space[3]);
+    var _b = _a.theme, input = _b.input, focusRing = _b.focusRing, focused = _a.focused;
+    var distance = (pxToNumber(input.height) - pxToNumber(input.icon.size)) / 2 +
+        (focused ? pxToNumber(focusRing.distance) : 0);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      position: absolute;\n      width: ", ";\n      z-index: 1;\n      top: ", "px;\n      right: ", "px;\n    "], ["\n      display: flex;\n      align-items: center;\n      position: absolute;\n      width: ", ";\n      z-index: 1;\n      top: ", "px;\n      right: ", "px;\n    "])), input.icon.size, distance, distance);
 });
 var templateObject_1;

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

@@ -1,16 +1,6 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import React, { useContext, useState } from 'react';
+import { ThemeContext } from '../../styled.native';
+import { pxToNumber } from '../../utils';
 import { Icon } from '../Icon';
 import { StyledPressable } from './PasswordInput.styled';
 export var useTogglePasswordVisibility = function () {
@@ -25,10 +15,12 @@ export var useTogglePasswordVisibility = function () {
 };
 export var PasswordVisibilityToggle = function (_a) {
     var iconName = _a.iconName, visibilityToggleLabel = _a.visibilityToggleLabel, handlePasswordVisibility = _a.handlePasswordVisibility;
+    var input = useContext(ThemeContext).input;
     var _b = useState(false), focused = _b[0], setFocused = _b[1];
-    return (_jsx(StyledPressable, __assign({ testID: "password-input-visibility-toggle", focused: focused, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: function () {
+    return (React.createElement(StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: pxToNumber(input.icon.size), onFocus: function () {
             setFocused(true);
         }, onBlur: function () {
             setFocused(false);
-        } }, { children: _jsx(Icon, { name: iconName, size: 16, pointerEvents: "none" }) })));
+        } },
+        React.createElement(Icon, { name: iconName, size: pxToNumber(input.icon.size), pointerEvents: "none" })));
 };

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

@@ -9,8 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 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 };
+var TelInput = forwardRef(function (props, ref) { return (React.createElement(Input, __assign({}, props, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
+export { TelInput };

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

@@ -9,8 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { Input } from './Input';
-var TextInput = forwardRef(function (props, ref) { return (_jsx(Input, __assign({}, props, { keyboardType: "default", ref: ref }))); });
+var TextInput = forwardRef(function (props, ref) { return (React.createElement(Input, __assign({}, props, { keyboardType: "default", ref: ref }))); });
 export { TextInput };

package/dist/esm/components/Input/TextareaInput.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++) {
@@ -24,18 +20,19 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import styled, { css } from '../../styled.native';
+import React, { forwardRef } from 'react';
+import { useBreakpoint } from '../../hooks';
+import { useTheme } from '../../styled.native';
+import { calculateLineHeight } from '../../theme';
 import { pxToNumber } from '../../utils';
 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);
-});
 var TextareaInput = forwardRef(function (_a, ref) {
     var _b = _a.rows, rows = _b === void 0 ? 3 : _b, rest = __rest(_a, ["rows"]);
-    return (_jsx(StyledInput, __assign({}, rest, { keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref })));
+    var input = useTheme().input;
+    var smallAndUp = useBreakpoint().smallAndUp;
+    var height = pxToNumber(input.padding) * 2 +
+        pxToNumber(calculateLineHeight(smallAndUp ? input.fontSize[1] : input.fontSize[0], input.lineHeight)) *
+            rows;
+    return (React.createElement(Input, __assign({}, rest, { keyboardType: "default", multiline: true, textAlignVertical: "top", style: { height: height }, ref: ref })));
 });
 export { TextareaInput };
-var templateObject_1;

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

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

package/dist/esm/components/LabelText/LabelText.js

@@ -3,13 +3,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { css } from '../../styled.native';
+import { calculateLineHeight } from '../../theme';
 import { styledComponentWithBreakpoints } from '../../utils';
 var StyledLabelText = 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;
-    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    "])), core.fontFamily.bodyBold.native, core.lineHeight.body.small, semantic.message.base, fontSize);
+    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      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), field.label.fontFamily, calculateLineHeight(fontSize, field.lineHeight), field.label.color, fontSize);
 });
 var LabelText = styledComponentWithBreakpoints(StyledLabelText);
 export { LabelText };

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

@@ -24,63 +24,70 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children } from 'react';
+import React, { Children, useContext, } from 'react';
 import { View } from 'react-native';
 import { useBreakpoint } from '../../hooks';
-import styled, { css } from '../../styled.native';
+import styled, { css, ThemeContext } from '../../styled.native';
 import { pxToNumber, styledComponentWithBreakpoints } from '../../utils';
 import { Stack } from '../Stack';
 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 _b = _a.theme, colors = _b.colors, list = _b.list, _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');
+        ? list.listItem.lineHeight[1]
+        : list.listItem.lineHeight[0];
+    var topMargin = (pxToNumber(lineHeight) - pxToNumber(list.listItem.bulletWidth)) / 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    "])), list.listItem.bulletGap, topMargin, list.listItem.bulletWidth, list.listItem.bulletWidth, visible ? colors.body : 'transparent');
 });
 var StyledBullet = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var _b = _a.theme, text = _b.text, list = _b.list, space = _b.space, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
+        ? list.listItem.fontSize[1]
+        : list.listItem.fontSize[0];
     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]);
+        ? list.listItem.lineHeight[1]
+        : list.listItem.lineHeight[0];
+    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    "])), text.fontFamily, lineHeight, text.color, fontSize, list.listItem.bulletGap, space[4]);
 });
 var StyledUlItem = styled.View(function () { return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n  "], ["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n  "]))); });
 var Bullet = styledComponentWithBreakpoints(StyledBullet);
 var ListBulletItem = function (_a) {
     var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b;
-    return (_jsxs(StyledUlItem, { children: [_jsx(UlBullet, { visible: showBullets }), children] }));
+    return (React.createElement(StyledUlItem, null,
+        React.createElement(UlBullet, { visible: showBullets }),
+        children));
 };
 var ListNumberedItem = function (_a) {
     var children = _a.children, prefix = _a.prefix;
-    return (_jsxs(View, __assign({ style: { flexDirection: 'row' } }, { children: [_jsx(Bullet, { children: prefix }), children] })));
+    return (React.createElement(View, { style: { flexDirection: 'row' } },
+        React.createElement(Bullet, null, prefix),
+        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 list = _a.theme.list, 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 ? list.marginTop[1] : list.marginTop[0], smallAndUp ? list.marginBottom[1] : list.marginBottom[0]);
 });
 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"]);
-    return (_jsx(ListWrapper, __assign({}, rest, { children: _jsx(Stack, __assign({ spaceBetween: 2 }, { children: Children.map(children, function (child) { return (_jsx(ListBulletItem, __assign({ showBullets: showBullets }, { children: child }))); }) })) })));
+    var list = useContext(ThemeContext).list;
+    return (React.createElement(ListWrapper, __assign({}, rest),
+        React.createElement(Stack, { spaceBetween: list.listItem.marginVertical }, Children.map(children, function (child) { return (React.createElement(ListBulletItem, { showBullets: showBullets }, child)); }))));
 };
 var Ol = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
-    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 list = useContext(ThemeContext).list;
+    return (React.createElement(ListWrapper, __assign({}, rest),
+        React.createElement(Stack, { spaceBetween: list.listItem.marginVertical }, Children.map(children, function (child, index) { return (React.createElement(ListNumberedItem, { prefix: index + 1 + '.' }, child)); }))));
 };
 var StyledLi = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var _b = _a.theme, text = _b.text, list = _b.list, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
+        ? list.listItem.fontSize[1]
+        : list.listItem.fontSize[0];
     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);
+        ? list.listItem.lineHeight[1]
+        : list.listItem.lineHeight[0];
+    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    "])), text.fontFamily, lineHeight, text.color, fontSize);
 });
 var Li = styledComponentWithBreakpoints(StyledLi);
 /**
@@ -100,9 +107,14 @@ var StyledDtText = styled.Text(function (_a) {
 });
 var DtText = styledComponentWithBreakpoints(StyledDtText);
 var StyledDtItem = styled.View(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    var marginTop = smallAndUp ? core.space[4] : core.space[3];
-    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      flex-direction: row;\n    "], ["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      flex-direction: row;\n    "])), marginTop, core.space[1]);
+    var list = _a.theme.list, smallAndUp = _a.smallAndUp;
+    var marginTop = smallAndUp
+        ? list.descriptionTerm.marginTop[1]
+        : list.descriptionTerm.marginTop[0];
+    var marginBottom = smallAndUp
+        ? list.descriptionTerm.marginBottom[1]
+        : list.descriptionTerm.marginBottom[0];
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      flex-direction: row;\n    "], ["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      flex-direction: row;\n    "])), marginTop, marginBottom);
 });
 var DtItem = styledComponentWithBreakpoints(StyledDtItem);
 /**
@@ -111,7 +123,8 @@ var DtItem = styledComponentWithBreakpoints(StyledDtItem);
  * */
 var Dt = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
-    return (_jsx(DtItem, __assign({}, rest, { children: _jsx(DtText, { children: children }) })));
+    return (React.createElement(DtItem, __assign({}, rest),
+        React.createElement(DtText, null, children)));
 };
 var StyledDdText = styled.Text(function (_a) {
     var _b = _a.theme, text = _b.text, list = _b.list, smallAndUp = _a.smallAndUp;
@@ -130,7 +143,8 @@ var StyledDdText = styled.Text(function (_a) {
 var Dd = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
     var breakpoints = useBreakpoint();
-    return (_jsx(View, __assign({ style: { flexDirection: 'row' } }, rest, { children: _jsx(StyledDdText, __assign({}, breakpoints, { children: children })) })));
+    return (React.createElement(View, __assign({ style: { flexDirection: 'row' } }, rest),
+        React.createElement(StyledDdText, __assign({}, breakpoints), children)));
 };
 export { Ul, Ol, Li, Dl, Dt, Dd, ListWrapper };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;