@ovotech/element-native 2.2.0 → 3.0.0-canary-edaf96f-93

package/dist/esm/components/Grid/Col.js

@@ -6,8 +6,9 @@ import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 import { pxToNumber } from '../../utils/utils';
 var StyledCol = styled.View(function (_a) {
-    var grid = _a.theme.grid, _b = _a.span, span = _b === void 0 ? 12 : _b, small = _a.small, medium = _a.medium, large = _a.large, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
-    var halfGutter = grid.gutter.map(function (g) { return pxToNumber(g) / 2 + 'px'; });
+    var core = _a.theme.core, _b = _a.span, span = _b === void 0 ? 12 : _b, small = _a.small, medium = _a.medium, large = _a.large, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
+    var gutter = [core.space[4], core.space[8]];
+    var halfGutter = gutter.map(function (g) { return pxToNumber(g) / 2 + 'px'; });
     var smallScreen = !smallAndUp;
     var percentage = (span / 12) * 100;
     var smallPercentage = small ? (small / 12) * 100 : percentage;
@@ -25,7 +26,7 @@ var StyledCol = styled.View(function (_a) {
             ? mediumPercentage
             : smallAndUp
                 ? smallPercentage
-                : percentage, smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? grid.gutter[0] : grid.gutter[1]);
+                : percentage, smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? gutter[0] : gutter[1]);
 });
 var Col = styledComponentWithBreakpoints(StyledCol);
 export { Col };

package/dist/esm/components/Grid/Row.js

@@ -24,24 +24,24 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 import { pxToNumber } from '../../utils/utils';
 var StyledRow = styled.View(function (_a) {
-    var grid = _a.theme.grid, isNested = _a.isNested, smallAndUp = _a.smallAndUp;
-    var halfGutter = grid.gutter.map(function (g) { return pxToNumber(g) / 2 + 'px'; });
+    var core = _a.theme.core, isNested = _a.isNested, smallAndUp = _a.smallAndUp;
+    var gutter = [core.space[4], core.space[8]];
+    var halfGutter = gutter.map(function (g) { return pxToNumber(g) / 2 + 'px'; });
     var smallScreen = !smallAndUp;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n      margin: 0 auto;\n      width: ", ";\n      max-width: 100%;\n      margin-bottom: -", ";\n\n      ", "\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n      margin: 0 auto;\n      width: ", ";\n      max-width: 100%;\n      margin-bottom: -", ";\n\n      ", "\n    "])), smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], grid.maxWidth, smallScreen ? grid.gutter[0] : grid.gutter[1], isNested
-        ? "\n      margin-left: -".concat(smallScreen ? grid.gutter[0] : grid.gutter[1], ";\n      margin-right: -").concat(smallScreen ? grid.gutter[0] : grid.gutter[1], ";\n      width: auto;\n      max-width: 200%; /* max width none not supported in RN */\n    ")
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n      margin: 0 auto;\n      width: ", "px;\n      max-width: 100%;\n      margin-bottom: -", ";\n\n      ", "\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n      margin: 0 auto;\n      width: ", "px;\n      max-width: 100%;\n      margin-bottom: -", ";\n\n      ", "\n    "])), smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], core.breakpoint.large, smallScreen ? gutter[0] : gutter[1], isNested
+        ? "\n      margin-left: -".concat(smallScreen ? gutter[0] : gutter[1], ";\n      margin-right: -").concat(smallScreen ? gutter[0] : gutter[1], ";\n      width: auto;\n      max-width: 200%; /* max width none not supported in RN */\n    ")
         : null);
 });
 var WidthRow = styledComponentWithBreakpoints(StyledRow);
 var RowInner = styled.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 0 1 auto;\n  flex-direction: row;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex: 0 1 auto;\n  flex-direction: row;\n  flex-wrap: wrap;\n"])));
 var Row = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
-    return (React.createElement(WidthRow, __assign({}, rest),
-        React.createElement(RowInner, null, children)));
+    return (_jsx(WidthRow, __assign({}, rest, { children: _jsx(RowInner, { children: children }) })));
 };
 export { Row };
 var templateObject_1, templateObject_2;

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

@@ -24,59 +24,51 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
+import { pxToNumber, numToPx } from '../../utils';
+var calculateLetterSpacing = function (fontSize, letterSpacing) {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
+};
 var StyledHeading1 = styled.Text(function (_a) {
-    var 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]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = core.fontSize.heading1[smallAndUp ? 'large' : 'small'];
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.heading.native, fontSize, core.lineHeight.heading1[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.extraCompressed), semantic.message.branded);
 });
 export var Heading1 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
     var breakpoints = useBreakpoint();
-    return (React.createElement(StyledHeading1, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+    return (_jsx(StyledHeading1, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 var StyledHeading2 = styled.Text(function (_a) {
-    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]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = core.fontSize.heading2[smallAndUp ? 'large' : 'small'];
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.heading.native, fontSize, core.lineHeight.heading2[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.extraCompressed), semantic.message.branded);
 });
 export var Heading2 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
     var breakpoints = useBreakpoint();
-    return (React.createElement(StyledHeading2, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+    return (_jsx(StyledHeading2, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 var StyledHeading3 = styled.Text(function (_a) {
-    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]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = core.fontSize.heading3[smallAndUp ? 'large' : 'small'];
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.bodyBold.native, fontSize, core.lineHeight.heading3[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.compressed), semantic.message.branded);
 });
 export var Heading3 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
     var breakpoints = useBreakpoint();
-    return (React.createElement(StyledHeading3, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+    return (_jsx(StyledHeading3, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 var StyledHeading4 = styled.Text(function (_a) {
-    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]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = core.fontSize.heading4[smallAndUp ? 'large' : 'small'];
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.bodyBold.native, fontSize, core.lineHeight.heading4[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.compressed), semantic.message.branded);
 });
 export var Heading4 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
     var breakpoints = useBreakpoint();
-    return (React.createElement(StyledHeading4, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+    return (_jsx(StyledHeading4, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -3,12 +3,15 @@ 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 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 _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 HintText = styledComponentWithBreakpoints(StyledHintText);
 export { HintText };

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

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

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

@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, createRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, createRef } from 'react';
 import { mergeRefs } from '../../utils';
 import { NumberInput } from './NumberInput';
 var CurrencyInput = forwardRef(function (_a, ref) {
@@ -28,6 +29,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 (React.createElement(NumberInput, __assign({}, rest, { invalid: invalid, accessibilityLabel: updatedAccessibilityLabel, ref: mergeRefs(ref, inputRef), iconLeft: iconName })));
+    return (_jsx(NumberInput, __assign({}, rest, { invalid: invalid, accessibilityLabel: updatedAccessibilityLabel, ref: mergeRefs(ref, inputRef), iconLeft: iconName })));
 });
 export { CurrencyInput };

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

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

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

@@ -24,54 +24,48 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState, forwardRef, useContext } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
 import { useBreakpoint } from '../../hooks';
-import styled, { css, ThemeContext } from '../../styled.native';
-import { pxToNumber } from '../../utils';
+import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon/Icon';
 var StyledIcon = styled(Icon)(function (_a) {
-    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 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 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();
-    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));
+    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 InputWrapper = styled.View(function (_a) {
-    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;")
+    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;")
         : null);
 });
 var StyledInput = styled.TextInput(function (_a) {
-    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 _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 errorStyles = invalid
-        ? "\n        border-width: ".concat(input.error.borderWidth, ";\n        border-color: ").concat(input.error.color, ";\n      ")
+        ? "\n        border-color: ".concat(semantic.message.error, ";\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      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);
+    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);
 });
 export { Input };
 var templateObject_1, templateObject_2, templateObject_3;

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

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

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

@@ -20,12 +20,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { 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 (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 })));
+    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 })));
 });
 export { PasswordInput };

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

@@ -4,11 +4,8 @@ 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 _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 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 templateObject_1;

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

@@ -1,6 +1,16 @@
-import React, { useContext, useState } from 'react';
-import { ThemeContext } from '../../styled.native';
-import { pxToNumber } from '../../utils';
+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 { Icon } from '../Icon';
 import { StyledPressable } from './PasswordInput.styled';
 export var useTogglePasswordVisibility = function () {
@@ -15,12 +25,10 @@ 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 (React.createElement(StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: pxToNumber(input.icon.size), onFocus: function () {
+    return (_jsx(StyledPressable, __assign({ testID: "password-input-visibility-toggle", focused: focused, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: function () {
             setFocused(true);
         }, onBlur: function () {
             setFocused(false);
-        } },
-        React.createElement(Icon, { name: iconName, size: pxToNumber(input.icon.size), pointerEvents: "none" })));
+        } }, { children: _jsx(Icon, { name: iconName, size: 16, pointerEvents: "none" }) })));
 };

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

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

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

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

package/dist/esm/components/Input/TextareaInput.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++) {
@@ -20,19 +24,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
-import { useBreakpoint } from '../../hooks';
-import { useTheme } from '../../styled.native';
-import { calculateLineHeight } from '../../theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled, { css } from '../../styled.native';
 import { pxToNumber } from '../../utils';
 import { Input } from './Input';
+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"]);
-    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 })));
+    return (_jsx(StyledInput, __assign({}, rest, { keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, 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 { TelInput } from './TelInput';
+export { PhoneInput } from './PhoneInput';
 export { TextInput } from './TextInput';
 export { PasswordInput } from './PasswordInput';
 export { TextareaInput } from './TextareaInput';

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

@@ -3,12 +3,13 @@ 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 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 _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 LabelText = styledComponentWithBreakpoints(StyledLabelText);
 export { LabelText };