@ovotech/element-native 4.1.9 → 4.2.0-canary-265b0a7-290

package/dist/esm/components/ActionList/ActionList.js

@@ -44,7 +44,7 @@ var ActionList = function (_a) {
 };
 var ActionWrapper = forwardRef(function (_a, ref) {
     var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID"]);
-    return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, { hitSlop: inline ? 24 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, children: children }) }) })));
+    return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, children: children }) }) })));
 });
 var Action = forwardRef(function (_a, ref) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight"]);

package/dist/esm/components/ActionList/styled.js

@@ -31,7 +31,7 @@ export var StyledActionText = styled.Text(function (_a) {
 export var StyledActionNodeWrapper = styled.View(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n"])));
 export var StyledRightIcon = styled(Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    margin-left: ", ";\n  "], ["\n    color: ", ";\n    margin-left: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, numToPx(core.space[1]));
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: 2px; /* compensation for the line-height of the text */\n  "], ["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: 2px; /* compensation for the line-height of the text */\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, numToPx(core.space[1]));
 });
 export var StyledLeftIcon = styled(Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;

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

@@ -22,8 +22,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Field } from '../Field';
 import { CurrencyInput } from '../CurrencyInput';
+import { Field } from '../Field';
 export var CurrencyField = forwardRef(function (_a, ref) {
     var rest = __rest(_a, []);
     return (_jsx(Field, __assign({ affixWidth: 40 }, rest, { ref: ref, children: _jsx(CurrencyInput, {}) })));

package/dist/esm/components/Display0/Display0.js

@@ -0,0 +1,46 @@
+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++) {
+            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 { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber, numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+var calculateLetterSpacing = function (fontSize, letterSpacing) {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
+};
+var StyledDisplay0 = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, component = _b.component, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
+    var fontSize = component.display0.fontSize[smallAndUp ? 'large' : 'small'];
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), component.display0.fontFamily, numToPx(fontSize), numToPx(component.display0.lineHeight[smallAndUp ? 'large' : 'small']), calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed), inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded);
+});
+export var Display0 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = useBreakpoint();
+    return (_jsx(StyledDisplay0, __assign({ accessible: true, accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+var templateObject_1;

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

@@ -0,0 +1 @@
+export { Display0 } from './Display0';

package/dist/esm/components/Display1/Display1.js

@@ -0,0 +1,46 @@
+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++) {
+            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 { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber, numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+var calculateLetterSpacing = function (fontSize, letterSpacing) {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
+};
+var StyledDisplay1 = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, component = _b.component, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
+    var fontSize = component.display1.fontSize[smallAndUp ? 'large' : 'small'];
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), component.display1.fontFamily, numToPx(fontSize), numToPx(component.display1.lineHeight[smallAndUp ? 'large' : 'small']), calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed), inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded);
+});
+export var Display1 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = useBreakpoint();
+    return (_jsx(StyledDisplay1, __assign({ accessible: true, accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+var templateObject_1;

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

@@ -0,0 +1 @@
+export { Display1 } from './Display1';

package/dist/esm/components/Display2/Display2.js

@@ -0,0 +1,46 @@
+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++) {
+            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 { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber, numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+var calculateLetterSpacing = function (fontSize, letterSpacing) {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
+};
+var StyledDisplay2 = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, component = _b.component, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
+    var fontSize = component.display2.fontSize[smallAndUp ? 'large' : 'small'];
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), component.display2.fontFamily, numToPx(fontSize), numToPx(component.display2.lineHeight[smallAndUp ? 'large' : 'small']), calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed), inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded);
+});
+export var Display2 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = useBreakpoint();
+    return (_jsx(StyledDisplay2, __assign({ accessible: true, accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+var templateObject_1;

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

@@ -0,0 +1 @@
+export { Display2 } from './Display2';

package/dist/esm/components/Display3/Display3.js

@@ -0,0 +1,46 @@
+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++) {
+            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 { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber, numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+var calculateLetterSpacing = function (fontSize, letterSpacing) {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
+};
+var StyledDisplay3 = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, component = _b.component, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
+    var fontSize = component.display3.fontSize[smallAndUp ? 'large' : 'small'];
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), component.display3.fontFamily, numToPx(fontSize), numToPx(component.display3.lineHeight[smallAndUp ? 'large' : 'small']), calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed), inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded);
+});
+export var Display3 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = useBreakpoint();
+    return (_jsx(StyledDisplay3, __assign({ accessible: true, accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+var templateObject_1;

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

@@ -0,0 +1 @@
+export { Display3 } from './Display3';

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

@@ -22,8 +22,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Field } from '../Field';
 import { EmailInput } from '../EmailInput';
+import { Field } from '../Field';
 export var EmailField = forwardRef(function (_a, ref) {
     var rest = __rest(_a, []);
     return (_jsx(Field, __assign({}, rest, { ref: ref, children: _jsx(EmailInput, {}) })));

package/dist/esm/components/SkeletonHeading/SkeletonHeading.js

@@ -22,8 +22,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from '../../styled.native';
-import { SkeletonAnimation } from '../SkeletonAnimation';
 import { Heading3 } from '../Heading3';
+import { SkeletonAnimation } from '../SkeletonAnimation';
 var StyledSkeletonHeading = styled.View(function (_a) {
     var core = _a.theme.core, size = _a.size;
     return "\n    background-color: ".concat(core.color.neutral.light, ";\n    width: ").concat(size, ";\n  ");

package/dist/esm/components/index.js

@@ -12,6 +12,10 @@ export * from './DataTable';
 export * from './DateField';
 export * from './DescriptionList';
 export * from './Disclosure';
+export * from './Display0';
+export * from './Display1';
+export * from './Display2';
+export * from './Display3';
 export * from './Divider';
 export * from './Em';
 export * from './EmailField';

package/dist/providers/types.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
 import { SvgProps } from 'react-native-svg';
 export type IconName = 'address' | 'advice' | 'archive' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'award' | 'battery' | 'cal-book' | 'cal' | 'caret-arrow-down' | 'caret-arrow-left' | 'caret-arrow-right' | 'caret-arrow-up' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'chart-filled' | 'chart' | 'check-circle' | 'check' | 'chevron-down' | 'chevron-left-small-first' | 'chevron-left-small' | 'chevron-left' | 'chevron-right-small-last' | 'chevron-right-small' | 'chevron-right' | 'chevron-up' | 'circle' | 'close-circle' | 'cross' | 'doc' | 'dollar' | 'download' | 'eco-home' | 'eco' | 'edit' | 'electric-car' | 'electric-home' | 'electricity' | 'energy-advice' | 'equals' | 'euro' | 'gas' | 'globe-address' | 'help-filled' | 'help' | 'hide' | 'home-filled' | 'home' | 'hydro-power' | 'info' | 'link' | 'logo' | 'mail-open' | 'mail' | 'menu' | 'message-filled' | 'message' | 'minus' | 'mobile' | 'new-window' | 'payment-card-filled' | 'payment-card' | 'phone' | 'plus' | 'pound' | 'pricing' | 'search' | 'security' | 'shop-filled' | 'shop' | 'show' | 'smart-home' | 'smart-meter' | 'solar' | 'star-filled' | 'star' | 'sun' | 'torch' | 'trees' | 'tune' | 'user-filled' | 'user' | 'wallet' | 'warm-home' | 'warning' | 'web-address' | 'wind-power';
-export type IconNameExtended = IconName | string;
+export type IconNameExtended = IconName | (string & {});
 export type IconsType = Record<string, FunctionComponent<SvgProps>>;