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

package/dist/components/Grid/Row.js

@@ -48,29 +48,26 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Row = void 0;
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var utils_2 = require("../../utils/utils");
 var StyledRow = styled_native_1.default.View(function (_a) {
-    var grid = _a.theme.grid, isNested = _a.isNested, smallAndUp = _a.smallAndUp;
-    var halfGutter = grid.gutter.map(function (g) { return (0, utils_2.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 (0, utils_2.pxToNumber)(g) / 2 + 'px'; });
     var smallScreen = !smallAndUp;
-    return (0, styled_native_1.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 (0, styled_native_1.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 = (0, utils_1.styledComponentWithBreakpoints)(StyledRow);
 var RowInner = styled_native_1.default.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_1.default.createElement(WidthRow, __assign({}, rest),
-        react_1.default.createElement(RowInner, null, children)));
+    return ((0, jsx_runtime_1.jsx)(WidthRow, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(RowInner, { children: children }) })));
 };
 exports.Row = Row;
 var templateObject_1, templateObject_2;

package/dist/components/Heading/Heading.js

@@ -48,68 +48,57 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heading4 = exports.Heading3 = exports.Heading2 = exports.Heading1 = void 0;
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var calculateLetterSpacing = function (fontSize, letterSpacing) {
+    return (0, utils_1.numToPx)((0, utils_1.pxToNumber)(fontSize) * letterSpacing);
+};
 var StyledHeading1 = styled_native_1.default.Text(function (_a) {
-    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.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 (0, styled_native_1.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 Heading1 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
     var breakpoints = (0, hooks_1.useBreakpoint)();
-    return (react_1.default.createElement(StyledHeading1, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+    return ((0, jsx_runtime_1.jsx)(StyledHeading1, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 exports.Heading1 = Heading1;
 var StyledHeading2 = styled_native_1.default.Text(function (_a) {
-    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.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 (0, styled_native_1.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 Heading2 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
     var breakpoints = (0, hooks_1.useBreakpoint)();
-    return (react_1.default.createElement(StyledHeading2, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+    return ((0, jsx_runtime_1.jsx)(StyledHeading2, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 exports.Heading2 = Heading2;
 var StyledHeading3 = styled_native_1.default.Text(function (_a) {
-    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.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 (0, styled_native_1.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 Heading3 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
     var breakpoints = (0, hooks_1.useBreakpoint)();
-    return (react_1.default.createElement(StyledHeading3, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+    return ((0, jsx_runtime_1.jsx)(StyledHeading3, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 exports.Heading3 = Heading3;
 var StyledHeading4 = styled_native_1.default.Text(function (_a) {
-    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.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 (0, styled_native_1.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 Heading4 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
     var breakpoints = (0, hooks_1.useBreakpoint)();
-    return (react_1.default.createElement(StyledHeading4, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+    return ((0, jsx_runtime_1.jsx)(StyledHeading4, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 exports.Heading4 = Heading4;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/HintText/HintText.d.ts

@@ -11,10 +11,10 @@ declare const HintText: import("react").ForwardRefExoticComponent<Pick<Omit<{
             borderWidth: Record<"small" | "medium" | "large", string>;
             breakpoint: Record<"small" | "medium" | "large", string | number>;
             mediaQuery: Record<"small" | "medium" | "large", string>;
-            space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
             transition: Record<"medium" | "slow" | "fast", string>;
-            opacity: Record<"transparent" | "translucent" | "solid", string | number>;
-            color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
+            opacity: Record<"solid" | "transparent" | "translucent", string | number>;
+            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
                 lightest: string;
                 lighter: string;
                 light: string;
@@ -30,71 +30,53 @@ declare const HintText: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 web: string;
             }>;
             fontWeight: Record<"bold" | "book" | "black", string | number>;
-            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+            fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
                 small: string | number;
                 large: string | number;
             }>;
-            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+            lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
                 small: string | number;
                 large: string | number;
             }>;
+            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
         };
         semantic: {
             surface: Record<"base" | "cutout" | "elevated", string>;
             message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
             border: Record<"graphic" | "differentiated" | "functional", string>;
-            focus: Record<"outline" | "surface", string>;
-            inverted: Record<"surface" | "border", string> & {
+            focus: Record<"surface" | "outline" | "hover", string>;
+            inverted: Record<"border" | "surface", string> & {
                 message: Record<"base" | "link" | "secondary" | "branded", string>;
             };
             success: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             warning: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             error: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             info: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
-            };
-            electricity: {
-                border: string;
-                surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
-            };
-            gas: {
-                border: string;
-                surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
+            data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
         };
         component: {
             heading1: {
@@ -225,6 +207,30 @@ declare const HintText: import("react").ForwardRefExoticComponent<Pick<Omit<{
                     backgroundFocused: string;
                 };
             };
+            badge: {
+                variants: {
+                    red: {
+                        foreground: string;
+                        background: string;
+                    };
+                    orange: {
+                        foreground: string;
+                        background: string;
+                    };
+                    yellow: {
+                        foreground: string;
+                        background: string;
+                    };
+                    green: {
+                        foreground: string;
+                        background: string;
+                    };
+                    blue: {
+                        foreground: string;
+                        background: string;
+                    };
+                };
+            };
         };
     }) | undefined;
 } & {

package/dist/components/HintText/HintText.js

@@ -29,12 +29,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HintText = void 0;
 var styled_native_1 = __importStar(require("../../styled.native"));
-var theme_1 = require("../../theme");
 var utils_1 = require("../../utils");
 var StyledHintText = styled_native_1.default.Text(function (_a) {
-    var field = _a.theme.field, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "])), field.fontFamily, fontSize, (0, theme_1.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 (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "])), core.fontFamily.body.native, fontSize, smallAndUp
+        ? core.lineHeight.body.large
+        : core.lineHeight.body.small, semantic.border.functional);
 });
 var HintText = (0, utils_1.styledComponentWithBreakpoints)(StyledHintText);
 exports.HintText = HintText;

package/dist/components/Icon/Icon.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
+/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 import { IconName } from '../../providers';
 export declare type IconBase = React.FunctionComponent<SvgProps>;
-declare type Props = SvgProps & {
+export declare type IconProps = SvgProps & {
     name: IconName | (string & {});
     color?: string;
     size: string | number;
 };
-export declare const Icon: ({ name, size, color, testID, ...rest }: Props) => JSX.Element | null;
-export {};
+export declare const Icon: ({ name, size, color, testID, ...rest }: IconProps) => JSX.Element | null;

package/dist/components/Icon/Icon.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -46,17 +23,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var providers_1 = require("../../providers");
 var styled_native_1 = require("../../styled.native");
 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 = (0, providers_1.useIcons)();
-    var colors = (0, react_1.useContext)(styled_native_1.ThemeContext).colors;
+    var semantic = (0, react_1.useContext)(styled_native_1.ThemeContext).semantic;
     // @ts-ignore to support additional icons.
     var Svg = name && icons[name];
-    return Svg ? (react_1.default.createElement(Svg, __assign({ testID: testID ? testID : "element-icon".concat(name ? "-".concat(name) : ''), 
+    return Svg ? ((0, jsx_runtime_1.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;
 };
 exports.Icon = Icon;

package/dist/components/Input/CurrencyInput.d.ts

@@ -1,16 +1,16 @@
-import React from 'react';
+/// <reference types="react" />
 import { TextInput } from 'react-native';
 import { InputProps } from './Input';
 export declare type CurrencyInputProps = InputProps & {
     currency?: 'GBP' | 'EUR' | 'AUD' | 'USD';
 };
-declare const CurrencyInput: React.ForwardRefExoticComponent<import("react-native/types").TextInputProps & {
+declare const CurrencyInput: import("react").ForwardRefExoticComponent<import("react-native/types").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: (string & {}) | import("../../providers").IconName | undefined;
-    iconRight?: (string & {}) | import("../../providers").IconName | undefined;
-    rightSlot?: React.ReactNode;
+    iconLeft?: import("../../providers").IconName | undefined;
+    iconRight?: import("../../providers").IconName | undefined;
+    rightSlot?: import("react").ReactNode;
 } & {
     currency?: "GBP" | "EUR" | "AUD" | "USD" | undefined;
-} & React.RefAttributes<TextInput>>;
+} & import("react").RefAttributes<TextInput>>;
 export { CurrencyInput };

package/dist/components/Input/CurrencyInput.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -46,7 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CurrencyInput = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var utils_1 = require("../../utils");
 var NumberInput_1 = require("./NumberInput");
 var CurrencyInput = (0, react_1.forwardRef)(function (_a, ref) {
@@ -54,6 +32,6 @@ var CurrencyInput = (0, react_1.forwardRef)(function (_a, ref) {
     var inputRef = (0, react_1.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_1.default.createElement(NumberInput_1.NumberInput, __assign({}, rest, { invalid: invalid, accessibilityLabel: updatedAccessibilityLabel, ref: (0, utils_1.mergeRefs)(ref, inputRef), iconLeft: iconName })));
+    return ((0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, __assign({}, rest, { invalid: invalid, accessibilityLabel: updatedAccessibilityLabel, ref: (0, utils_1.mergeRefs)(ref, inputRef), iconLeft: iconName })));
 });
 exports.CurrencyInput = CurrencyInput;

package/dist/components/Input/EmailInput.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+/// <reference types="react" />
 import { TextInput } from 'react-native';
-declare const EmailInput: React.ForwardRefExoticComponent<import("react-native/types").TextInputProps & {
+declare const EmailInput: import("react").ForwardRefExoticComponent<import("react-native/types").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: (string & {}) | import("../../providers").IconName | undefined;
-    iconRight?: (string & {}) | import("../../providers").IconName | undefined;
-    rightSlot?: React.ReactNode;
-} & React.RefAttributes<TextInput>>;
+    iconLeft?: import("../../providers").IconName | undefined;
+    iconRight?: import("../../providers").IconName | undefined;
+    rightSlot?: import("react").ReactNode;
+} & import("react").RefAttributes<TextInput>>;
 export { EmailInput };

package/dist/components/Input/EmailInput.js

@@ -10,32 +10,10 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmailInput = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var Input_1 = require("./Input");
-var EmailInput = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(Input_1.Input, __assign({}, props, { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
+var EmailInput = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(Input_1.Input, __assign({}, props, { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
 exports.EmailInput = EmailInput;

package/dist/components/Input/Input.d.ts

@@ -1,18 +1,18 @@
-import React, { ReactNode } from 'react';
-import { TextInputProps, TextInput } from 'react-native';
+import { ReactNode } from 'react';
+import { TextInput, TextInputProps } from 'react-native';
 import { IconName } from '../../providers/types';
 export declare type InputProps = TextInputProps & {
     invalid?: boolean;
     stretch?: boolean;
-    iconLeft?: IconName | (string & {});
-    iconRight?: IconName | (string & {});
+    iconLeft?: IconName | (string & object);
+    iconRight?: IconName | (string & object);
     rightSlot?: ReactNode;
 };
-declare const Input: React.ForwardRefExoticComponent<TextInputProps & {
+declare const Input: import("react").ForwardRefExoticComponent<TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: (string & {}) | IconName | undefined;
-    iconRight?: (string & {}) | IconName | undefined;
+    iconLeft?: IconName | undefined;
+    iconRight?: IconName | undefined;
     rightSlot?: ReactNode;
-} & React.RefAttributes<TextInput>>;
+} & import("react").RefAttributes<TextInput>>;
 export { Input };

package/dist/components/Input/Input.js

@@ -50,54 +50,48 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
-var utils_1 = require("../../utils");
 var Icon_1 = require("../Icon/Icon");
 var StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
-    var _b = _a.theme, input = _b.input, focusRing = _b.focusRing, side = _a.side, focused = _a.focused;
-    var distance = ((0, utils_1.pxToNumber)(input.height) - (0, utils_1.pxToNumber)(input.icon.size)) / 2 +
-        (focused ? (0, utils_1.pxToNumber)(focusRing.distance) : 0);
-    return (0, styled_native_1.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 (0, styled_native_1.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 = (0, react_1.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 = (0, react_1.useState)(false), focused = _b[0], setFocused = _b[1];
     var breakpoints = (0, hooks_1.useBreakpoint)();
-    var input = (0, react_1.useContext)(styled_native_1.ThemeContext).input;
-    return (react_1.default.createElement(InputWrapper, { focused: focused },
-        iconLeft ? (react_1.default.createElement(StyledIcon, { name: iconLeft, size: (0, utils_1.pxToNumber)(input.icon.size), focused: focused, pointerEvents: "none", side: "left" })) : null,
-        react_1.default.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_1.default.createElement(StyledIcon, { name: iconRight, size: (0, utils_1.pxToNumber)(input.icon.size), focused: focused, pointerEvents: "none", side: "right" })) : null,
-        rightSlot));
+    return ((0, jsx_runtime_1.jsxs)(InputWrapper, __assign({ focused: focused }, { children: [iconLeft ? ((0, jsx_runtime_1.jsx)(StyledIcon, { name: iconLeft, size: 16, focused: focused, pointerEvents: "none", side: "left" })) : null, (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null, rightSlot] })));
 });
 exports.Input = Input;
 var InputWrapper = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, input = _b.input, focusRing = _b.focusRing, focused = _a.focused;
-    return (0, styled_native_1.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((0, utils_1.pxToNumber)(focusRing.width) +
-            (0, utils_1.pxToNumber)(focusRing.distance), "px;")
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, focused = _a.focused;
+    return (0, styled_native_1.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_native_1.default.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 (0, styled_native_1.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 (0, styled_native_1.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);
 });
 var templateObject_1, templateObject_2, templateObject_3;