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

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

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

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

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

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

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

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

@@ -1,3 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,14 +25,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { useBreakpoint } from '../../hooks';
-import styled from '../../styled.native';
+import styled, { css } from '../../styled.native';
 var StyledView = styled.View(function (_a) {
-    var card = _a.theme.card, smallAndUp = _a.smallAndUp;
-    return "\n    padding: ".concat(card.padding[smallAndUp ? 1 : 0], ";\n    border-top-width: ").concat(card.borderWidth, ";\n    border-style: solid;\n    border-color: ").concat(card.borderColor, ";\n    z-index: -1;\n  ");
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    border-top-width: ", ";\n    border-style: solid;\n    border-color: ", ";\n    z-index: -1;\n  "], ["\n    padding: ", ";\n    border-top-width: ", ";\n    border-style: solid;\n    border-color: ", ";\n    z-index: -1;\n  "])), core.space[4], core.borderWidth.small, semantic.border.differentiated);
 });
 export var TabPanel = function (_a) {
     var rest = __rest(_a, []);
-    var breakpoints = useBreakpoint();
-    return React.createElement(StyledView, __assign({}, breakpoints, rest));
+    return React.createElement(StyledView, __assign({}, rest));
 };
+var templateObject_1;

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

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

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

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

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

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from 'react';
+import { Field } from '../Field';
+import { PhoneInput } from '../Input/PhoneInput';
+export var PhoneField = forwardRef(function (_a, ref) {
+    var rest = __rest(_a, []);
+    return (React.createElement(Field, __assign({}, rest, { ref: ref }),
+        React.createElement(PhoneInput, null)));
+});

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

@@ -22,9 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from 'react';
 import { Field } from '../Field';
-import { TelInput } from '../Input/TelInput';
+import { PhoneInput } from '../Input/PhoneInput';
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the PhoneField component instead.
+ * */
 export var TelField = forwardRef(function (_a, ref) {
     var rest = __rest(_a, []);
+    console.warn('TelField component has been deprecated and will be removed in a future release. Please use the PhoneField component instead.');
     return (React.createElement(Field, __assign({}, rest, { ref: ref }),
-        React.createElement(TelInput, null)));
+        React.createElement(PhoneInput, null)));
 });

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

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

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

@@ -30,8 +30,8 @@ import styled, { css, ThemeContext } from '../../styled.native';
 import { getText } from '../../utils/utils';
 import { Icon } from '../Icon';
 var StyledText = styled.Text(function (_a) {
-    var textLink = _a.theme.textLink;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    font-weight: ", ";\n  "], ["\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    font-weight: ", ";\n  "])), textLink.color, textLink.color, textLink.fontWeight);
+    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 = 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"]);

package/dist/esm/components/index.js

@@ -5,6 +5,7 @@ export * from './Checkbox';
 export * from './CTAButton';
 export * from './CTALink';
 export * from './DateField';
+export * from './DescriptionList';
 export * from './Disclosure';
 export * from './Divider';
 export * from './ErrorSummaryNotification';
@@ -26,3 +27,4 @@ export * from './TextField';
 export * from './TextLink';
 export * from './DataTable';
 export * from './SkeletonLoading';
+export * from './SelectField';

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

@@ -10,6 +10,9 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import { Path, Svg } from 'react-native-svg';
-export var Logo = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 155 64", width: 155, height: 64 }, props),
-    React.createElement(Path, { fill: "#0a9928", d: "M10.6,19a15.29,15.29,0,0,1,8.8,2.7l-.9-2.3H28l3.2,11.4.7,2.6s.4-1.3.7-2.6l3.3-11.4h9.5l-.8,2.4a14.59,14.59,0,0,1,8.8-2.7,6.6,6.6,0,0,1,1.4.1L49.9.8.7,14l1.9,7.2A15.22,15.22,0,0,1,10.6,19Zm42.8,8.3a4.62,4.62,0,0,0-4.7,4.9A4.49,4.49,0,0,0,53.4,37a4.54,4.54,0,0,0,4.7-4.8,3.75,3.75,0,0,0-.1-1.1l-.2-.6A4.44,4.44,0,0,0,53.4,27.3ZM15.2,32.1a4.62,4.62,0,0,0-4.7-4.9,4.62,4.62,0,0,0-4.7,4.9,4.49,4.49,0,0,0,4.7,4.8C13.3,37,15.2,35,15.2,32.1ZM53.4,44.9c-6.9,0-12.6-3.9-13.7-10.5L35.8,44.5H28.1L24.2,34.4C23.1,41,17.4,44.9,10.5,44.9a8.6,8.6,0,0,1-1.6-.1l4.9,18.4L63,50l-1.9-7.1A14.7,14.7,0,0,1,53.4,44.9ZM70.8,33.5a4.7,4.7,0,0,0,4.9,5c3.6,0,4.6-2.2,5.6-2.2a1.06,1.06,0,0,1,1,1.2c0,1.3-3.4,3.4-6.6,3.4-5.3,0-7.6-4.1-7.6-8.5s2.8-8.5,7.4-8.5S82.6,28,82.6,32c0,1-.3,1.5-1.5,1.5Zm9.1-2.1c0-2.4-1.4-5.1-4.4-5.1-3.4-.1-4.6,2.6-4.7,5.1Zm4.9-6a1.34,1.34,0,0,1,1.4-1.5,1.39,1.39,0,0,1,1.4,1.5v.7l.1.1A5.53,5.53,0,0,1,92.3,24c2.6,0,5.8,1.6,5.8,6.3v9.2A1.34,1.34,0,0,1,96.7,41a1.39,1.39,0,0,1-1.4-1.5v-9a3.81,3.81,0,1,0-7.6,0v9A1.34,1.34,0,0,1,86.3,41a1.39,1.39,0,0,1-1.4-1.5V25.4ZM103,33.5a4.7,4.7,0,0,0,4.9,5c3.6,0,4.6-2.2,5.6-2.2a1.06,1.06,0,0,1,1,1.2c0,1.3-3.4,3.4-6.6,3.4-5.3,0-7.6-4.1-7.6-8.5s2.8-8.5,7.4-8.5,7.1,4.1,7.1,8.1c0,1-.3,1.5-1.5,1.5Zm9.1-2.1c0-2.4-1.4-5.1-4.4-5.1-3.4-.1-4.6,2.6-4.7,5.1Zm4.9-6a1.34,1.34,0,0,1,1.4-1.5,1.39,1.39,0,0,1,1.4,1.5v1.4h.1c.6-1.3,2.1-2.9,3.7-2.9a1.34,1.34,0,0,1,1.5,1.4c0,.8-.6,1.3-1.7,1.5-1.6.3-3.6,1.5-3.6,4.7v7.9a1.34,1.34,0,0,1-1.4,1.5,1.39,1.39,0,0,1-1.4-1.5Zm23,14.1c0,4.9-3,7.9-7.5,7.9-2.8,0-6.3-1.6-6.3-3a1.17,1.17,0,0,1,1.2-1.3c1.2,0,2.5,1.9,5.4,1.9,3.5,0,4.5-2.7,4.5-5.1V38.5h-.1a4.75,4.75,0,0,1-4.2,2.4c-4.7,0-7.3-4.1-7.3-8.5s2.6-8.5,7.3-8.5a5.53,5.53,0,0,1,4.2,2.1h.1v-.7c0-1,.7-1.3,1.5-1.3a1.31,1.31,0,0,1,1.3,1.3V39.5Zm-7-1c3.4,0,4.5-3.3,4.5-6.1s-1.2-6.1-4.5-6.1-4.5,3.3-4.5,6.1S129.6,38.5,133,38.5Zm9.4-11.9a5.37,5.37,0,0,1-.4-1.5,1.22,1.22,0,0,1,1.2-1.2,1.41,1.41,0,0,1,1.4,1l3.8,11.4h.1l3.7-11.4a1.3,1.3,0,0,1,1.3-1,1.22,1.22,0,0,1,1.2,1.2,5.37,5.37,0,0,1-.4,1.5l-6.9,19.7a1.38,1.38,0,0,1-1.3,1,1.22,1.22,0,0,1-1.2-1.2,5.37,5.37,0,0,1,.4-1.5L147,40Z" }))); };
+import { Path, Svg, ClipPath, Defs } from 'react-native-svg';
+export var Logo = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 48 48", width: 48, height: 48 }, props),
+    React.createElement(Path, { fill: "#0A9828", d: "M14.316 16.104c-1.837-1.34-4.186-2.084-6.733-2.084-2.262 0-4.364.589-6.1 1.66L0 10.143 37.861 0l3.767 14.063a12.37 12.37 0 00-1.054-.045c-2.562 0-4.924.752-6.771 2.109l.697-1.803h-7.311l-2.562 8.771c-.278.95-.565 1.982-.565 1.982l-.557-1.982-2.56-8.77h-7.316l.687 1.779zm22.654 8.023c0-2.05 1.382-3.76 3.606-3.76 1.711 0 2.919 1.013 3.387 2.414l.127.472c.058.28.092.57.092.873 0 2.2-1.484 3.71-3.606 3.71s-3.606-1.51-3.606-3.71zm-25.781 0c0-2.05-1.384-3.76-3.606-3.76-2.224 0-3.61 1.71-3.61 3.76 0 2.2 1.489 3.71 3.61 3.71 2.122 0 3.606-1.51 3.606-3.71zm18.866 1.69c.835 5.104 5.232 8.101 10.521 8.101 2.209 0 4.265-.52 5.972-1.5l1.456 5.44L10.143 48 6.357 33.865c.401.036.814.055 1.226.055 5.27 0 9.659-2.98 10.515-8.057l3 7.753h5.934l3.023-7.8z" }),
+    React.createElement(Defs, null,
+        React.createElement(ClipPath, { id: "a" },
+            React.createElement(Path, { fill: "#fff", d: "M0 0h48v48H0z" }))))); };

package/dist/esm/theme/create-theme.js

@@ -84,12 +84,6 @@ export var defaultTokens = {
         standard: 1.5,
     },
     fontSizes: ['12px', '14px', '16px', '20px', '24px', '28px', '32px', '48px'],
-    fontWeights: {
-        normal: 400,
-        bold: 700,
-        semiBold: 600,
-        heading: 900,
-    },
     colors: {
         primary: brand.primary.base,
         primaryAlt: brand.primary.darker,
@@ -150,7 +144,7 @@ export function createTheme(customTheme, additional) {
     var mergeOptions = { arrayMerge: function (_, source) { return source; } };
     var customThemeWithAdditional = deepMerge(customTheme, additional || {}, mergeOptions);
     var theme = deepMerge(defaultTokens, customThemeWithAdditional, mergeOptions);
-    var fontSizes = theme.fontSizes, breakpoints = theme.breakpoints, colors = theme.colors, fontWeights = theme.fontWeights, fonts = theme.fonts, lineHeights = theme.lineHeights, space = theme.space, radii = theme.radii, shadows = theme.shadows, borderWidths = theme.borderWidths, responsiveFontSizes = theme.responsiveFontSizes, responsiveLineHeights = theme.responsiveLineHeights;
+    var fontSizes = theme.fontSizes, breakpoints = theme.breakpoints, colors = theme.colors, fonts = theme.fonts, lineHeights = theme.lineHeights, space = theme.space, radii = theme.radii, shadows = theme.shadows, borderWidths = theme.borderWidths, responsiveFontSizes = theme.responsiveFontSizes, responsiveLineHeights = theme.responsiveLineHeights;
     return deepMerge({
         field: {
             fontFamily: fonts.body,
@@ -160,21 +154,17 @@ export function createTheme(customTheme, additional) {
             gap: space[2],
             error: {
                 color: colors.error,
-                fontWeight: fontWeights.bold,
                 fontFamily: fonts.bold,
             },
             hint: {
-                fontWeight: fontWeights.normal,
                 color: colors.border,
             },
             label: {
                 color: colors.heading,
-                fontWeight: fontWeights.bold,
                 fontFamily: fonts.bold,
             },
             subLabel: {
                 color: colors.border,
-                fontWeight: fontWeights.normal,
             },
             legend: {
                 marginBottom: space[1],
@@ -194,7 +184,6 @@ export function createTheme(customTheme, additional) {
             fontSize: responsiveFontSizes.body,
             color: colors.body,
             lineHeight: lineHeights.standard,
-            fontWeight: fontWeights.normal,
             height: space[11],
             borderColor: colors.border,
             borderWidth: borderWidths.standard,
@@ -215,75 +204,6 @@ export function createTheme(customTheme, additional) {
             borderColor: colors.borderMuted,
             padding: [space[3], space[6], space[9]],
         },
-        badge: {
-            fontWeight: fontWeights.bold,
-            fontFamily: fonts.bold,
-            lineHeight: lineHeights.standard,
-            paddingHorizontal: space[2],
-            borderRadius: radii.small,
-            fontSize: responsiveFontSizes.body,
-            variants: {
-                default: {
-                    background: colors.primaryMuted,
-                    foreground: colors.primaryAlt,
-                },
-                error: {
-                    background: colors.errorMuted,
-                    foreground: colors.errorAlt,
-                },
-                success: {
-                    background: colors.successMuted,
-                    foreground: colors.successAlt,
-                },
-                info: {
-                    background: colors.infoMuted,
-                    foreground: colors.infoAlt,
-                },
-                warning: {
-                    background: colors.warningMuted,
-                    foreground: colors.warningAlt,
-                },
-            },
-        },
-        cta: {
-            fontSize: responsiveFontSizes.body,
-            fontWeight: fontWeights.bold,
-            fontFamily: fonts.bold,
-            lineHeight: lineHeights.standard,
-            paddingVertical: space[2],
-            paddingHorizontal: space[3],
-            borderRadius: radii.small,
-            borderWidth: borderWidths.standard,
-            iconGap: space[1],
-            minHeight: space[11],
-            variants: {
-                primary: {
-                    background: colors.primary,
-                    foreground: colors.primaryContrast,
-                    border: colors.primary,
-                },
-                secondary: {
-                    background: colors.primaryContrast,
-                    foreground: colors.primary,
-                    border: colors.primary,
-                },
-                destructive: {
-                    background: colors.error,
-                    foreground: colors.errorContrast,
-                    border: colors.error,
-                },
-                missionPrimary: {
-                    background: colors.mission,
-                    foreground: colors.missionContrast,
-                    border: colors.mission,
-                },
-                missionSecondary: {
-                    background: colors.primaryContrast,
-                    foreground: colors.primary,
-                    border: colors.primary,
-                },
-            },
-        },
         checkbox: {
             touchSize: space[11],
             size: space[6],
@@ -298,44 +218,8 @@ export function createTheme(customTheme, additional) {
             checkColor: colors.info,
             errorColor: colors.error,
         },
-        notification: {
-            borderRadius: radii.small,
-            borderWidth: borderWidths.heavy,
-            borderColor: colors.error,
-            background: colors.errorMuted,
-            paddingX: [space[2], space[2]],
-            paddingY: [space[3], space[6]],
-            dismiss: {
-                touchSize: space[6],
-                size: space[4],
-                icon: 'cross',
-            },
-            variants: {
-                error: {
-                    borderColor: colors.errorMuted,
-                    background: colors.errorMuted,
-                    textColor: colors.errorAlt,
-                },
-                success: {
-                    borderColor: colors.successMuted,
-                    background: colors.successMuted,
-                    textColor: colors.successAlt,
-                },
-                info: {
-                    borderColor: colors.infoMuted,
-                    background: colors.infoMuted,
-                    textColor: colors.infoAlt,
-                },
-                warning: {
-                    borderColor: colors.warningMuted,
-                    background: colors.warningMuted,
-                    textColor: colors.warningAlt,
-                },
-            },
-        },
         text: {
             fontFamily: fonts.body,
-            fontWeight: fontWeights.normal,
             lineHeight: 1,
             color: colors.body,
             p: {
@@ -349,7 +233,6 @@ export function createTheme(customTheme, additional) {
                 lineHeight: responsiveLineHeights.small,
             },
             strong: {
-                fontWeight: fontWeights.bold,
                 fontFamily: fonts.bold,
             },
         },
@@ -366,19 +249,17 @@ export function createTheme(customTheme, additional) {
             },
             descriptionTerm: {
                 color: colors.heading,
-                fontWeight: fontWeights.bold,
                 fontFamily: fonts.bold,
                 marginTop: [space[3], space[4]],
                 marginBottom: [space[1], space[1]],
             },
         },
         textLink: {
+            fontFamily: fonts.body,
             color: colors.primary,
-            fontWeight: fontWeights.normal,
         },
         heading: {
             fontFamily: fonts.heading,
-            fontWeight: fontWeights.heading,
             color: colors.heading,
             heading1: {
                 fontSize: responsiveFontSizes.level1,
@@ -420,7 +301,6 @@ export function createTheme(customTheme, additional) {
             checkedBackground: colors.infoMuted,
             errorColor: colors.error,
         },
-        fontWeights: fontWeights,
         fontSizes: fontSizes,
         fonts: fonts,
         responsiveFontSizes: responsiveFontSizes,
@@ -438,35 +318,6 @@ export function createTheme(customTheme, additional) {
             iconGap: [space[1], space[2]],
             panelGap: [space[2], space[3]],
         },
-        dataTable: {
-            borderWidth: borderWidths.standard,
-            borderRadius: radii.small,
-            borderColor: colors.canvasMuted,
-            responsivePadding: {
-                vertical: [space[2], space[3]],
-                horizontal: [space[1], space[1]],
-            },
-            tableHeader: {
-                color: colors.heading,
-                backgroundColor: colors.canvas,
-                borderWidth: borderWidths.standard,
-                borderColor: colors.border,
-                fontWeight: fontWeights.bold,
-                fontFamily: fonts.bold,
-            },
-            tableCaption: {
-                color: colors.heading,
-                fontWeight: fontWeights.bold,
-                fontFamily: fonts.bold,
-            },
-            tableCell: {
-                color: colors.body,
-            },
-            tableRow: {
-                backgroundColor: colors.canvas,
-                stripeColor: colors.canvasMuted,
-            },
-        },
         accordion: {
             header: {
                 color: colors.primary,
@@ -475,30 +326,5 @@ export function createTheme(customTheme, additional) {
                 iconGap: space[3],
             },
         },
-        tabs: {
-            tab: {
-                borderTopWidth: borderWidths.heavy,
-                borderBottomWidth: borderWidths.heavy,
-                borderColor: colors.canvas,
-                fontSize: responsiveFontSizes.body,
-                fontWeight: fontWeights.bold,
-                fontFamily: fonts.bold,
-                lineHeight: lineHeights.standard,
-                paddingHorizontal: [space[4], space[4]],
-                paddingVertical: [space[3], space[3]],
-                active: {
-                    borderColor: colors.primary,
-                    foregroundColor: colors.primary,
-                    backgroundColor: colors.canvas,
-                },
-                inactive: {
-                    foregroundColor: colors.heading,
-                    backgroundColor: colors.canvas,
-                },
-                hover: {
-                    foregroundColor: colors.primaryAlt,
-                },
-            },
-        },
     }, theme, mergeOptions);
 }

package/dist/esm/theme/index.js

@@ -1,8 +1,19 @@
+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 { themeNative } from '@ovotech/element-core';
 import { pxToNumber } from '../utils';
 import { createTheme } from './create-theme';
-export * from './theme';
 export * from './create-theme';
-export var theme = createTheme({});
+export var theme = createTheme(__assign({}, themeNative));
 export var calculateLineHeight = function (size, lineHeight) {
     return pxToNumber(size) * (lineHeight || 1) + 'px';
 };