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

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

@@ -20,8 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement } from 'react';
+import React, { Children, cloneElement, } from 'react';
 import { Dd, Dl, Dt } from '../List';
 /**
  * @deprecated This component has been deprecated and will be removed in a future release.
@@ -30,14 +29,16 @@ import { Dd, Dl, Dt } from '../List';
 var SummaryList = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
     console.warn('SummaryList component has been deprecated and will be removed in a future release. Please use the DescriptionList component instead.');
-    return (_jsx(Dl, __assign({}, rest, { children: Children.map(children, function (child, index) {
-            return cloneElement(child, {
-                index: index,
-            });
-        }) })));
+    return (React.createElement(Dl, __assign({}, rest), Children.map(children, function (child, index) {
+        return cloneElement(child, {
+            index: index,
+        });
+    })));
 };
 var SummaryItem = function (_a) {
     var label = _a.label, children = _a.children, index = _a.index, rest = __rest(_a, ["label", "children", "index"]);
-    return (_jsxs(_Fragment, { children: [_jsx(Dt, __assign({ style: index === 0 ? { marginTop: 0 } : undefined }, { children: label })), _jsx(Dd, __assign({}, rest, { children: children }))] }));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Dt, { style: index === 0 ? { marginTop: 0 } : undefined }, label),
+        React.createElement(Dd, __assign({}, rest), children)));
 };
 export { SummaryList, SummaryItem };

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

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

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

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

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

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

@@ -24,22 +24,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, cloneElement, useEffect, createRef, useRef, } from 'react';
+import React, { useState, cloneElement, useEffect, createRef, useRef, } from 'react';
 import styled, { css } from '../../styled.native';
 import { filterChildrenByType } from '../../utils';
 import { Card } from '../Card';
 import { TabList } from './TabList';
 import { TabPanel } from './TabPanel';
-var TabsCard = styled(Card)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "], ["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "])), core.borderWidth.small, inline ? semantic.border.differentiated : 'transparent');
-});
-export var Tabs = function (_a) {
+export var Tabs = styled(function (_a) {
     var children = _a.children, _b = _a.defaultSelected, defaultSelected = _b === void 0 ? 0 : _b, onSelected = _a.onSelected, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "defaultSelected", "onSelected", "fullWidth", "inline"]);
     var _c = useState(defaultSelected), activeTab = _c[0], setActiveTab = _c[1];
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore there is no way to properly type it
     var tabList = filterChildrenByType(children, TabList);
     var tabPanels = filterChildrenByType(children, TabPanel);
     var tabRefs = tabPanels.map(function () { return createRef(); });
@@ -52,20 +45,25 @@ export var Tabs = function (_a) {
             loaded.current = true;
         }
     }, [onSelected, activeTab]);
-    return (_jsxs(TabsCard, __assign({ inline: inline }, rest, { children: [tabList.map(function (child) {
-                return cloneElement(child, {
-                    setActiveTab: setActiveTab,
-                    activeTab: activeTab,
-                    tabRefs: tabRefs,
-                    fullWidth: fullWidth,
-                    inline: inline,
-                });
-            }), tabPanels
-                .filter(function (_, index) { return index === activeTab; })
-                .map(function (child, index) {
-                return cloneElement(child, {
-                    hidden: activeTab !== index,
-                });
-            })] })));
-};
+    return (React.createElement(Card, __assign({}, rest),
+        tabList.map(function (child) {
+            return cloneElement(child, {
+                setActiveTab: setActiveTab,
+                activeTab: activeTab,
+                tabRefs: tabRefs,
+                fullWidth: fullWidth,
+                inline: inline,
+            });
+        }),
+        tabPanels
+            .filter(function (_, index) { return index === activeTab; })
+            .map(function (child, index) {
+            return cloneElement(child, {
+                hidden: activeTab !== index,
+            });
+        })));
+})(function (_a) {
+    var _b = _a.theme, card = _b.card, tabs = _b.tabs, inline = _a.inline;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "], ["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "])), card.borderWidth, inline ? card.borderColor : tabs.tab.borderColor);
+});
 var templateObject_1;

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

@@ -24,24 +24,27 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, isValidElement, cloneElement, } from 'react';
+import React, { Children, isValidElement, cloneElement, } from 'react';
 import { View } from 'react-native';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 var StyledP = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.body[smallAndUp ? 'large' : 'small'], core.lineHeight.body[smallAndUp ? 'large' : 'small'], semantic.message.base);
+    var text = _a.theme.text, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp ? text.p.fontSize[1] : text.p.fontSize[0];
+    var lineHeight = smallAndUp ? text.p.lineHeight[1] : text.p.lineHeight[0];
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-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  "])), text.fontFamily, fontSize, lineHeight, text.color, smallAndUp ? text.p.marginTop[1] : text.p.marginTop[0], smallAndUp
+        ? text.p.marginBottom[1]
+        : text.p.marginBottom[0]);
 });
 export var P = styledComponentWithBreakpoints(StyledP);
 var StyledSmall = styled.Text(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-size: ", ";\n    line-height: ", ";\n  "])), core.fontSize.small[smallAndUp ? 'large' : 'small'], core.lineHeight.small[smallAndUp ? 'large' : 'small']);
+    var text = _a.theme.text, smallAndUp = _a.smallAndUp;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-size: ", ";\n  "], ["\n    font-size: ", ";\n  "])), smallAndUp ? text.small.fontSize[1] : text.small.fontSize[0]);
 });
 export var Small = styledComponentWithBreakpoints(StyledSmall);
 export var Strong = styled.Text(function (_a) {
-    var core = _a.theme.core;
-    return "\n    font-family: ".concat(core.fontFamily.bodyBold.native, ";\n  ");
+    var text = _a.theme.text;
+    return "\n    font-family: ".concat(text.strong.fontFamily, ";\n  ");
 });
 export var Em = styled.Text(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-family: 'System font';\n  font-style: italic;\n"], ["\n  font-family: 'System font';\n  font-style: italic;\n"])));
 export var LineThrough = styled.Text(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-decoration: line-through;\n"], ["\n  text-decoration: line-through;\n"])));
@@ -53,14 +56,14 @@ export var TextGroup = function (_a) {
             filteredChildren.push(child);
         }
     });
-    return (_jsx(View, __assign({}, rest, { children: Children.map(filteredChildren, function (child, index) {
-            if (!isValidElement(child)) {
-                return;
-            }
-            var style = __assign(__assign(__assign({}, child.props.style), (index === 0 ? { marginTop: 0 } : {})), { marginBottom: 0 });
-            return cloneElement(child, {
-                style: style,
-            });
-        }) })));
+    return (React.createElement(View, __assign({}, rest), Children.map(filteredChildren, function (child, index) {
+        if (!isValidElement(child)) {
+            return;
+        }
+        var style = __assign(__assign(__assign({}, child.props.style), (index === 0 ? { marginTop: 0 } : {})), { marginBottom: 0 });
+        return cloneElement(child, {
+            style: style,
+        });
+    })));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -20,11 +20,11 @@ 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 { Field } from '../Field';
 import { CurrencyInput } from '../Input/CurrencyInput';
 export var CurrencyField = forwardRef(function (_a, ref) {
     var rest = __rest(_a, []);
-    return (_jsx(Field, __assign({ affixWidth: 40 }, rest, { ref: ref }, { children: _jsx(CurrencyInput, {}) })));
+    return (React.createElement(Field, __assign({ affixWidth: 40 }, rest, { ref: ref }),
+        React.createElement(CurrencyInput, null)));
 });

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

@@ -20,11 +20,11 @@ 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 { Field } from '../Field';
 import { EmailInput } from '../Input/EmailInput';
 export var EmailField = forwardRef(function (_a, ref) {
     var rest = __rest(_a, []);
-    return (_jsx(Field, __assign({}, rest, { ref: ref }, { children: _jsx(EmailInput, {}) })));
+    return (React.createElement(Field, __assign({}, rest, { ref: ref }),
+        React.createElement(EmailInput, null)));
 });

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

@@ -20,11 +20,11 @@ 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 { Field } from '../Field';
 import { NumberInput } from '../Input/NumberInput';
 export var NumberField = forwardRef(function (_a, ref) {
     var rest = __rest(_a, []);
-    return (_jsx(Field, __assign({}, rest, { ref: ref }, { children: _jsx(NumberInput, {}) })));
+    return (React.createElement(Field, __assign({}, rest, { ref: ref }),
+        React.createElement(NumberInput, null)));
 });

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

@@ -20,11 +20,11 @@ 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 { Field } from '../Field';
 import { PasswordInput } from '../Input/PasswordInput';
 export var PasswordField = forwardRef(function (_a, ref) {
     var hasVisibilityToggle = _a.hasVisibilityToggle, rest = __rest(_a, ["hasVisibilityToggle"]);
-    return (_jsx(Field, __assign({}, rest, { ref: ref }, { children: _jsx(PasswordInput, { hasVisibilityToggle: hasVisibilityToggle }) })));
+    return (React.createElement(Field, __assign({}, rest, { ref: ref }),
+        React.createElement(PasswordInput, { hasVisibilityToggle: hasVisibilityToggle })));
 });

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

@@ -20,16 +20,11 @@ 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 { Field } from '../Field';
-import { PhoneInput } from '../Input/PhoneInput';
-/**
- * @deprecated This component has been deprecated and will be removed in a future release.
- * Please use the PhoneField component instead.
- * */
+import { TelInput } from '../Input/TelInput';
 export var TelField = forwardRef(function (_a, ref) {
     var rest = __rest(_a, []);
-    console.warn('TelField component has been deprecated and will be removed in a future release. Please use the PhoneField component instead.');
-    return (_jsx(Field, __assign({}, rest, { ref: ref }, { children: _jsx(PhoneInput, {}) })));
+    return (React.createElement(Field, __assign({}, rest, { ref: ref }),
+        React.createElement(TelInput, null)));
 });

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

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

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

@@ -20,11 +20,11 @@ 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 { Field } from '../Field';
 import { TextareaInput } from '../Input/TextareaInput';
 export var TextareaField = forwardRef(function (_a, ref) {
     var rest = __rest(_a, []);
-    return (_jsx(Field, __assign({}, rest, { ref: ref }, { children: _jsx(TextareaInput, {}) })));
+    return (React.createElement(Field, __assign({}, rest, { ref: ref }),
+        React.createElement(TextareaInput, null)));
 });

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

@@ -2,7 +2,6 @@ export { CurrencyField } from './CurrencyField';
 export { TextField } from './TextField';
 export { NumberField } from './NumberField';
 export { TelField } from './TelField';
-export { PhoneField } from './PhoneField';
 export { EmailField } from './EmailField';
 export { PasswordField } from './PasswordField';
 export { TextareaField } from './TextareaField';

package/dist/esm/components/TextLink/TextLink.js

@@ -24,15 +24,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { Text } from 'react-native';
 import styled, { css, ThemeContext } from '../../styled.native';
 import { getText } from '../../utils/utils';
 import { Icon } from '../Icon';
 var StyledText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "], ["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "])), core.fontFamily.body.native, semantic.message.link, semantic.message.link);
+    var textLink = _a.theme.textLink;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "], ["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "])), textLink.fontFamily, textLink.color, textLink.color);
 });
 var TextLink = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.opensInNewWindow, opensInNewWindow = _b === void 0 ? false : _b, accessibilityLabel = _a.accessibilityLabel, rest = __rest(_a, ["children", "opensInNewWindow", "accessibilityLabel"]);
@@ -40,7 +39,11 @@ var TextLink = forwardRef(function (_a, ref) {
     var updatedAccessibilityLabel = opensInNewWindow
         ? "".concat(accessibilityLabel ? accessibilityLabel : getText(children), " (opens in new window)")
         : accessibilityLabel;
-    return (_jsxs(Text, __assign({}, rest, { accessibilityLabel: updatedAccessibilityLabel, ref: ref }, { children: [_jsx(StyledText, { children: children }), opensInNewWindow && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(Icon, { color: textLink.color, size: 12, name: "new-window" })] }))] })));
+    return (React.createElement(Text, __assign({}, rest, { accessibilityLabel: updatedAccessibilityLabel, ref: ref }),
+        React.createElement(StyledText, null, children),
+        opensInNewWindow && (React.createElement(React.Fragment, null,
+            "\u00A0",
+            React.createElement(Icon, { color: textLink.color, size: 12, name: "new-window" })))));
 });
 export { TextLink };
 var templateObject_1;

package/dist/esm/components/index.js

@@ -27,4 +27,3 @@ export * from './TextField';
 export * from './TextLink';
 export * from './DataTable';
 export * from './SkeletonLoading';
-export * from './SelectField';

package/dist/esm/hooks/use-breakpoint.js

@@ -2,11 +2,11 @@ import { useContext } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { ThemeContext } from '../styled.native';
 export var useBreakpoint = function () {
-    var breakpoint = useContext(ThemeContext).core.breakpoint;
+    var breakpoints = useContext(ThemeContext).breakpoints;
     var width = useWindowDimensions().width;
     return {
-        smallAndUp: width > Number(breakpoint.small),
-        mediumAndUp: width > Number(breakpoint.medium),
-        largeAndUp: width > Number(breakpoint.large),
+        smallAndUp: width >= breakpoints.small,
+        mediumAndUp: width >= breakpoints.medium,
+        largeAndUp: width >= breakpoints.large,
     };
 };

package/dist/esm/providers/IconsProvider.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 { createContext, useContext } from 'react';
+import React, { createContext, useContext } from 'react';
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, CaretDown, CaretLeft, CaretRight, CaretUp, Chart, Check, ChevronDown, ChevronLeft, ChevronLeftSmall, ChevronLeftSmallFirst, ChevronRight, ChevronRightSmall, ChevronRightSmallLast, ChevronUp, Cross, Dollar, Download, Electricity, Euro, Gas, Help, Hide, Home, Info, Link, Logo, Minus, NewWindow, PaymentCard, Plus, Pound, Search, Show, User, } from './icons';
 var defaultIcons = {
     'arrow-down': ArrowDown,
@@ -61,6 +60,6 @@ function IconsProvider(_a) {
     var children = _a.children, _b = _a.icons, icons = _b === void 0 ? {} : _b;
     var baseIcons = useContext(IconsContext) || defaultIcons;
     var mergedIcons = __assign(__assign({}, baseIcons), icons);
-    return (_jsx(IconsContext.Provider, __assign({ value: mergedIcons }, { children: children })));
+    return (React.createElement(IconsContext.Provider, { value: mergedIcons }, children));
 }
 export { useIcons, IconsProvider, defaultIcons };

package/dist/esm/providers/icons/ArrowDown.js

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { Path, Svg } from 'react-native-svg';
-export var ArrowDown = function (props) { return (_jsx(Svg, __assign({ viewBox: "0 0 16 16" }, props, { children: _jsx(Path, { d: "M7 -1.07324e-07L9 -8.34742e-08L9 12.2L14.6 6.6L16 8L8 16L9.5399e-08 8L1.4 6.6L7 12.2L7 -1.07324e-07Z", fill: "currentColor", fillRule: "evenodd" }) }))); };
+export var ArrowDown = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M7 -1.07324e-07L9 -8.34742e-08L9 12.2L14.6 6.6L16 8L8 16L9.5399e-08 8L1.4 6.6L7 12.2L7 -1.07324e-07Z", fill: "currentColor", fillRule: "evenodd" }))); };

package/dist/esm/providers/icons/ArrowLeft.js

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { Path, Svg } from 'react-native-svg';
-export var ArrowLeft = function (props) { return (_jsx(Svg, __assign({ viewBox: "0 0 16 16" }, props, { children: _jsx(Path, { d: "M16 9V7H3.8L9.4 1.4L8 0L0 8L8 16L9.4 14.6L3.8 9H16Z", fill: "currentColor" }) }))); };
+export var ArrowLeft = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M16 9V7H3.8L9.4 1.4L8 0L0 8L8 16L9.4 14.6L3.8 9H16Z", fill: "currentColor" }))); };

package/dist/esm/providers/icons/ArrowRight.js

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { Path, Svg } from 'react-native-svg';
-export var ArrowRight = function (props) { return (_jsx(Svg, __assign({ viewBox: "0 0 16 16" }, props, { children: _jsx(Path, { d: "M0 9V7H12.2L6.6 1.4L8 0L16 8L8 16L6.6 14.6L12.2 9H0Z", fill: "currentColor", fillRule: "evenodd" }) }))); };
+export var ArrowRight = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M0 9V7H12.2L6.6 1.4L8 0L16 8L8 16L6.6 14.6L12.2 9H0Z", fill: "currentColor", fillRule: "evenodd" }))); };

package/dist/esm/providers/icons/ArrowUp.js

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { Path, Svg } from 'react-native-svg';
-export var ArrowUp = function (props) { return (_jsx(Svg, __assign({ viewBox: "0 0 16 16" }, props, { children: _jsx(Path, { d: "M7 16L9 16L9 3.8L14.6 9.4L16 8L8 -3.49691e-07L-3.49691e-07 8L1.4 9.4L7 3.8L7 16Z", fill: "currentColor", fillRule: "evenodd" }) }))); };
+export var ArrowUp = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M7 16L9 16L9 3.8L14.6 9.4L16 8L8 -3.49691e-07L-3.49691e-07 8L1.4 9.4L7 3.8L7 16Z", fill: "currentColor", fillRule: "evenodd" }))); };

package/dist/esm/providers/icons/CaretDown.js

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { Path, Svg } from 'react-native-svg';
-export var CaretDown = function (props) { return (_jsx(Svg, __assign({ viewBox: "0 0 16 16" }, props, { children: _jsx(Path, { d: "M8 12.5L2 5.5H14L8 12.5Z", fill: "currentColor", fillRule: "evenodd" }) }))); };
+export var CaretDown = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M8 12.5L2 5.5H14L8 12.5Z", fill: "currentColor", fillRule: "evenodd" }))); };

package/dist/esm/providers/icons/CaretLeft.js

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { Path, Svg } from 'react-native-svg';
-export var CaretLeft = function (props) { return (_jsx(Svg, __assign({ viewBox: "0 0 16 16" }, props, { children: _jsx(Path, { d: "M3.5 8.11999L10.5 2.12L10.5 14.12L3.5 8.11999Z", fill: "currentColor", fillRule: "evenodd" }) }))); };
+export var CaretLeft = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M3.5 8.11999L10.5 2.12L10.5 14.12L3.5 8.11999Z", fill: "currentColor", fillRule: "evenodd" }))); };

package/dist/esm/providers/icons/CaretRight.js

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { Path, Svg } from 'react-native-svg';
-export var CaretRight = function (props) { return (_jsx(Svg, __assign({ viewBox: "0 0 16 16" }, props, { children: _jsx(Path, { d: "M12.5 7.88L5.5 13.88V1.88L12.5 7.88Z", fill: "currentColor", fillRule: "evenodd" }) }))); };
+export var CaretRight = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M12.5 7.88L5.5 13.88V1.88L12.5 7.88Z", fill: "currentColor", fillRule: "evenodd" }))); };

package/dist/esm/providers/icons/CaretUp.js

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { Path, Svg } from 'react-native-svg';
-export var CaretUp = function (props) { return (_jsx(Svg, __assign({ viewBox: "0 0 16 16" }, props, { children: _jsx(Path, { d: "M8 3.5L14 10.5L2 10.5L8 3.5Z", fill: "currentColor", fillRule: "evenodd" }) }))); };
+export var CaretUp = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M8 3.5L14 10.5L2 10.5L8 3.5Z", fill: "currentColor", fillRule: "evenodd" }))); };