@ovotech/element-native 4.4.9 → 4.5.0

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

@@ -1,58 +1,35 @@
-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 { numToPx } from '@ovotech/element-core';
 import { View } from 'react-native';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
-export var Dl = styled.View(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return "\n  flex-direction: column;\n  flex: 1;\n  margin-vertical: ".concat(smallAndUp ? numToPx(core.space[3]) : numToPx(core.space[2]), ";\n");
-});
-var StyledDtText = 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    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    flex: 1;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    flex: 1;\n  "])), core.fontFamily.bodyBold.native, numToPx(core.lineHeight.body.small), numToPx(core.fontSize.body.small), semantic.message.base);
-});
-var DtText = styledComponentWithBreakpoints(StyledDtText);
-var StyledDtItem = styled.View(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin-top: ", ";\n    flex-direction: row;\n  "], ["\n    margin-top: ", ";\n    flex-direction: row;\n  "])), numToPx(core.space[smallAndUp ? 4 : 3]));
-});
-var DtItem = styledComponentWithBreakpoints(StyledDtItem);
-export var Dt = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return (_jsx(DtItem, __assign({}, rest, { children: _jsx(DtText, { children: children }) })));
-};
-var StyledDdText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n    flex: 1;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n    flex: 1;\n  "])), core.fontFamily.body.native, numToPx(core.lineHeight.body.small), semantic.message.secondary, numToPx(core.fontSize.body.small));
-});
-export var Dd = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return (_jsx(View, __assign({ style: { flexDirection: 'row' } }, rest, { children: _jsx(StyledDdText, { children: children }) })));
+export const Dl = styled.View(({ theme: { core }, smallAndUp }) => `
+  flex-direction: column;
+  flex: 1;
+  margin-top: ${smallAndUp ? numToPx(core.space[3]) : numToPx(core.space[2])};
+  margin-bottom: ${smallAndUp ? numToPx(core.space[3]) : numToPx(core.space[2])};
+`);
+const StyledDtText = styled.Text(({ theme: { core, semantic } }) => css `
+    font-family: ${core.fontFamily.bodyBold.native};
+    line-height: ${numToPx(core.lineHeight.body.small)};
+    font-size: ${numToPx(core.fontSize.body.small)};
+    color: ${semantic.message.base};
+    flex: 1;
+  `);
+const DtText = styledComponentWithBreakpoints(StyledDtText);
+const StyledDtItem = styled.View(({ theme: { core }, smallAndUp }) => css `
+    margin-top: ${numToPx(core.space[smallAndUp ? 4 : 3])};
+    flex-direction: row;
+  `);
+const DtItem = styledComponentWithBreakpoints(StyledDtItem);
+export const Dt = ({ children, ...rest }) => (_jsx(DtItem, { ...rest, children: _jsx(DtText, { children: children }) }));
+const StyledDdText = styled.Text(({ theme: { core, semantic } }) => css `
+    font-family: ${core.fontFamily.body.native};
+    line-height: ${numToPx(core.lineHeight.body.small)};
+    color: ${semantic.message.secondary};
+    font-size: ${numToPx(core.fontSize.body.small)};
+    flex: 1;
+  `);
+export const Dd = ({ children, ...rest }) => {
+    return (_jsx(View, { style: { flexDirection: 'row' }, ...rest, children: _jsx(StyledDdText, { children: children }) }));
 };
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/esm/components/Disclosure/Disclosure.js

@@ -1,55 +1,36 @@
-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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
-import { forwardRef, useState } from 'react';
+import { useState } from 'react';
 import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon';
-var DisclosureButton = styled.TouchableOpacity(function () { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  "], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  "]))); });
-var DisclosureButtonIcon = styled(Icon)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, expanded = _a.expanded, smallAndUp = _a.smallAndUp;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    transform: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "], ["\n    transform: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "])), expanded ? 'rotate(0deg)' : 'rotate(-90deg)', numToPx(core.space[smallAndUp ? 2 : 1]), semantic.message.link);
-});
-var DisclosureButtonText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small']), numToPx(core.lineHeight.body[smallAndUp ? 'large' : 'small']), semantic.message.link, semantic.message.link);
-});
-var DisclosurePanel = styled.View(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    padding-left: ", ";\n  "], ["\n    margin-top: ", ";\n    padding-left: ", ";\n  "])), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[smallAndUp ? 2 : 1]));
-});
-export var Disclosure = forwardRef(function (_a, ref) {
-    var children = _a.children, title = _a.title, _b = _a.expanded, expanded = _b === void 0 ? false : _b, onToggle = _a.onToggle, rest = __rest(_a, ["children", "title", "expanded", "onToggle"]);
-    var _c = useState(expanded), isExpanded = _c[0], setIsExpanded = _c[1];
-    var breakpoints = useBreakpoint();
-    return (_jsxs(_Fragment, { children: [_jsxs(DisclosureButton, __assign({ onPress: function () {
+const DisclosureButton = styled.TouchableOpacity(() => css `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  `);
+const DisclosureButtonIcon = styled(Icon)(({ theme: { core, semantic }, expanded, smallAndUp }) => css `
+    transform: ${expanded ? 'rotate(0deg)' : 'rotate(-90deg)'};
+    margin-right: ${numToPx(core.space[smallAndUp ? 2 : 1])};
+    color: ${semantic.message.link};
+  `);
+const DisclosureButtonText = styled.Text(({ theme: { core, semantic }, smallAndUp }) => css `
+    font-family: ${core.fontFamily.body.native};
+    font-size: ${numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small'])};
+    line-height: ${numToPx(core.lineHeight.body[smallAndUp ? 'large' : 'small'])};
+    text-decoration: underline;
+    text-decoration-color: ${semantic.message.link};
+    color: ${semantic.message.link};
+  `);
+const DisclosurePanel = styled.View(({ theme: { core }, smallAndUp }) => css `
+    margin-top: ${numToPx(core.space[smallAndUp ? 3 : 2])};
+    padding-left: ${numToPx(core.space[smallAndUp ? 2 : 1])};
+  `);
+export const Disclosure = ({ children, title, expanded = false, onToggle, ref, ...rest }) => {
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const breakpoints = useBreakpoint();
+    return (_jsxs(_Fragment, { children: [_jsxs(DisclosureButton, { onPress: () => {
                     setIsExpanded(!isExpanded);
                     onToggle && onToggle(!isExpanded);
-                }, ref: ref, accessibilityState: { expanded: isExpanded } }, rest, { children: [_jsx(DisclosureButtonIcon, __assign({ name: "caret-arrow-down" }, breakpoints, { size: 14, expanded: isExpanded })), _jsx(DisclosureButtonText, __assign({}, breakpoints, { children: title }))] })), isExpanded && (_jsx(DisclosurePanel, __assign({}, breakpoints, { children: children })))] }));
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+                }, ref: ref, accessibilityState: { expanded: isExpanded }, ...rest, children: [_jsx(DisclosureButtonIcon, { name: "caret-arrow-down", ...breakpoints, size: 14, expanded: isExpanded }), _jsx(DisclosureButtonText, { ...breakpoints, children: title })] }), isExpanded && (_jsx(DisclosurePanel, { ...breakpoints, children: children }))] }));
+};

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

@@ -1,46 +1,23 @@
-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) {
+const calculateLetterSpacing = (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
+const StyledDisplay0 = styled.Text(({ theme: { core, semantic, component }, smallAndUp, inverted }) => {
+    const fontSize = component.display0.fontSize[smallAndUp ? 'large' : 'small'];
+    return css `
+      font-family: ${component.display0.fontFamily};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(component.display0.lineHeight[smallAndUp ? 'large' : 'small'])};
+      letter-spacing: ${calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed)};
+      color: ${inverted
         ? semantic.inverted.message.link
-        : semantic.message.branded);
+        : 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)));
+export const Display0 = ({ accessibilityRole = 'header', ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledDisplay0, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
 };
-var templateObject_1;

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

@@ -1,46 +1,23 @@
-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) {
+const calculateLetterSpacing = (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
+const StyledDisplay1 = styled.Text(({ theme: { core, semantic, component }, smallAndUp, inverted }) => {
+    const fontSize = component.display1.fontSize[smallAndUp ? 'large' : 'small'];
+    return css `
+      font-family: ${component.display1.fontFamily};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(component.display1.lineHeight[smallAndUp ? 'large' : 'small'])};
+      letter-spacing: ${calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed)};
+      color: ${inverted
         ? semantic.inverted.message.link
-        : semantic.message.branded);
+        : 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)));
+export const Display1 = ({ accessibilityRole = 'header', ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledDisplay1, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
 };
-var templateObject_1;

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

@@ -1,46 +1,23 @@
-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) {
+const calculateLetterSpacing = (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
+const StyledDisplay2 = styled.Text(({ theme: { core, semantic, component }, smallAndUp, inverted }) => {
+    const fontSize = component.display2.fontSize[smallAndUp ? 'large' : 'small'];
+    return css `
+      font-family: ${component.display2.fontFamily};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(component.display2.lineHeight[smallAndUp ? 'large' : 'small'])};
+      letter-spacing: ${calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed)};
+      color: ${inverted
         ? semantic.inverted.message.link
-        : semantic.message.branded);
+        : 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)));
+export const Display2 = ({ accessibilityRole = 'header', ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledDisplay2, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
 };
-var templateObject_1;

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

@@ -1,46 +1,23 @@
-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) {
+const calculateLetterSpacing = (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
+const StyledDisplay3 = styled.Text(({ theme: { core, semantic, component }, smallAndUp, inverted }) => {
+    const fontSize = component.display3.fontSize[smallAndUp ? 'large' : 'small'];
+    return css `
+      font-family: ${component.display3.fontFamily};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(component.display3.lineHeight[smallAndUp ? 'large' : 'small'])};
+      letter-spacing: ${calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed)};
+      color: ${inverted
         ? semantic.inverted.message.link
-        : semantic.message.branded);
+        : 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)));
+export const Display3 = ({ accessibilityRole = 'header', ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledDisplay3, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
 };
-var templateObject_1;

package/dist/esm/components/Divider/Divider.js

@@ -1,17 +1,14 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from '../../styled.native';
-var StyledDivider = styled.View(function (_a) {
-    var semantic = _a.theme.semantic, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 1px;\n      background: ", ";\n      width: ", ";\n    "], ["\n      height: 1px;\n      background: ", ";\n      width: ", ";\n    "])), type === 'default'
+const StyledDivider = styled.View(({ theme: { semantic }, type = 'default', width = '100%' }) => {
+    return css `
+      height: 1px;
+      background: ${type === 'default'
         ? semantic.border.graphic
-        : semantic.border.differentiated, width);
+        : semantic.border.differentiated};
+      width: ${width};
+    `;
 });
-export var Divider = function (_a) {
-    var type = _a.type, width = _a.width;
+export const Divider = ({ type, width }) => {
     return _jsx(StyledDivider, { type: type, width: width });
 };
-var templateObject_1;

package/dist/esm/components/Em/Em.js

@@ -1,7 +1,6 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import styled from '../../styled.native';
-export var Em = styled.Text(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */\n  font-family: 'System font';\n  font-style: italic;\n"], ["\n  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */\n  font-family: 'System font';\n  font-style: italic;\n"])));
-var templateObject_1;
+export const Em = styled.Text `
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+  font-family: 'System font';
+  font-style: italic;
+`;

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

@@ -1,30 +1,6 @@
-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 { forwardRef } from 'react';
 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, {}) })));
-});
+export const EmailField = ({ ref, ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(EmailInput, { ref: ref }) }));
+};

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

@@ -1,16 +1,4 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
 import { Input } from '../Input/Input';
-var EmailInput = forwardRef(function (props, ref) { return (_jsx(Input, __assign({}, props, { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
+const EmailInput = (props) => (_jsx(Input, { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ...props }));
 export { EmailInput };

package/dist/esm/components/ErrorSummaryNotification/ErrorSummaryNotification.js

@@ -1,49 +1,23 @@
-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 { createRef, useEffect } from 'react';
 import { findNodeHandle, AccessibilityInfo, } from 'react-native';
 import { Ul, Li } from '../List';
 import { ErrorNotification } from '../Notification';
 import { P } from '../P';
-var ErrorSummaryNotification = function (_a) {
-    var errors = _a.errors, scrollViewRef = _a.scrollViewRef, _b = _a.scrollPos, scrollPos = _b === void 0 ? { x: 0, y: 0 } : _b, rest = __rest(_a, ["errors", "scrollViewRef", "scrollPos"]);
-    var ref = createRef();
-    useEffect(function () {
+const ErrorSummaryNotification = ({ errors, scrollViewRef, scrollPos = { x: 0, y: 0 }, ...rest }) => {
+    const ref = createRef();
+    useEffect(() => {
         if (errors.length && scrollViewRef.current && ref.current) {
             scrollViewRef.current.scrollTo(scrollPos);
             // Timeout ensures element receives focus after current action.
-            setTimeout(function () {
-                var node = findNodeHandle(ref.current);
+            setTimeout(() => {
+                const node = findNodeHandle(ref.current);
                 node && AccessibilityInfo.setAccessibilityFocus(node);
             }, 200);
         }
         // This means that errors needs to have referential integrity otherwise the notification
         // will be focused all the time.
     }, [errors, scrollViewRef.current, ref.current]);
-    return (_jsx(ErrorNotification, __assign({ ref: ref }, rest, { children: errors.length === 0 ? null : (_jsx(Ul, { children: errors.map(function (_a) {
-                var message = _a.message, fieldId = _a.id;
-                return (_jsx(Li, { children: _jsx(P, { children: message }) }, fieldId));
-            }) })) })));
+    return (_jsx(ErrorNotification, { ref: ref, ...rest, children: errors.length === 0 ? null : (_jsx(Ul, { children: errors.map(({ message, id: fieldId }) => (_jsx(Li, { children: _jsx(P, { children: message }) }, fieldId))) })) }));
 };
 export { ErrorSummaryNotification };

package/dist/esm/components/ErrorText/ErrorText.js

@@ -1,17 +1,18 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
-var StyledErrorText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
+const StyledErrorText = styled.Text(({ theme: { core, semantic }, smallAndUp }) => {
+    const fontSize = smallAndUp
         ? core.fontSize.body.large
         : core.fontSize.body.small;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "], ["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "])), numToPx(core.space[1]), numToPx(core.space[1]), core.fontFamily.body.native, numToPx(fontSize), numToPx(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small), semantic.message.error);
+    return css `
+      margin-top: ${numToPx(core.space[1])};
+      margin-bottom: ${numToPx(core.space[1])};
+      font-family: ${core.fontFamily.body.native};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small)};
+      color: ${semantic.message.error};
+    `;
 });
-var ErrorText = styledComponentWithBreakpoints(StyledErrorText);
+const ErrorText = styledComponentWithBreakpoints(StyledErrorText);
 export { ErrorText };
-var templateObject_1;