@ovotech/element-native 4.4.8 → 4.5.0

package/dist/components/Disclosure/Disclosure.js

@@ -1,81 +1,36 @@
-"use strict";
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Disclosure = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var react_1 = require("react");
-var hooks_1 = require("../../hooks");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var Icon_1 = require("../Icon");
-var DisclosureButton = styled_native_1.default.TouchableOpacity(function () { return (0, styled_native_1.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 = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, expanded = _a.expanded, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.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)', (0, element_core_1.numToPx)(core.space[smallAndUp ? 2 : 1]), semantic.message.link);
-});
-var DisclosureButtonText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.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, (0, element_core_1.numToPx)(core.fontSize.body[smallAndUp ? 'large' : 'small']), (0, element_core_1.numToPx)(core.lineHeight.body[smallAndUp ? 'large' : 'small']), semantic.message.link, semantic.message.link);
-});
-var DisclosurePanel = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    padding-left: ", ";\n  "], ["\n    margin-top: ", ";\n    padding-left: ", ";\n  "])), (0, element_core_1.numToPx)(core.space[smallAndUp ? 3 : 2]), (0, element_core_1.numToPx)(core.space[smallAndUp ? 2 : 1]));
-});
-exports.Disclosure = (0, react_1.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 = (0, react_1.useState)(expanded), isExpanded = _c[0], setIsExpanded = _c[1];
-    var breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(DisclosureButton, __assign({ onPress: function () {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useState } from 'react';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+import { Icon } from '../Icon';
+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: [(0, jsx_runtime_1.jsx)(DisclosureButtonIcon, __assign({ name: "caret-arrow-down" }, breakpoints, { size: 14, expanded: isExpanded })), (0, jsx_runtime_1.jsx)(DisclosureButtonText, __assign({}, breakpoints, { children: title }))] })), isExpanded && ((0, jsx_runtime_1.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/components/Disclosure/index.js

@@ -1,17 +1 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Disclosure"), exports);
+export * from './Disclosure';

package/dist/components/Display0/Display0.js

@@ -1,73 +1,23 @@
-"use strict";
-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 { pxToNumber, numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const calculateLetterSpacing = (fontSize, letterSpacing) => {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
 };
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Display0 = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var hooks_1 = require("../../hooks");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var calculateLetterSpacing = function (fontSize, letterSpacing) {
-    return (0, element_core_1.numToPx)((0, element_core_1.pxToNumber)(fontSize) * letterSpacing);
-};
-var StyledDisplay0 = styled_native_1.default.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 (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), component.display0.fontFamily, (0, element_core_1.numToPx)(fontSize), (0, element_core_1.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};
+    `;
 });
-var Display0 = function (_a) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
-    var breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.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 }));
 };
-exports.Display0 = Display0;
-var templateObject_1;

package/dist/components/Display0/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Display0 = void 0;
-var Display0_1 = require("./Display0");
-Object.defineProperty(exports, "Display0", { enumerable: true, get: function () { return Display0_1.Display0; } });
+export { Display0 } from './Display0';

package/dist/components/Display1/Display1.js

@@ -1,73 +1,23 @@
-"use strict";
-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 { pxToNumber, numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const calculateLetterSpacing = (fontSize, letterSpacing) => {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
 };
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Display1 = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var hooks_1 = require("../../hooks");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var calculateLetterSpacing = function (fontSize, letterSpacing) {
-    return (0, element_core_1.numToPx)((0, element_core_1.pxToNumber)(fontSize) * letterSpacing);
-};
-var StyledDisplay1 = styled_native_1.default.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 (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), component.display1.fontFamily, (0, element_core_1.numToPx)(fontSize), (0, element_core_1.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};
+    `;
 });
-var Display1 = function (_a) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
-    var breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.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 }));
 };
-exports.Display1 = Display1;
-var templateObject_1;

package/dist/components/Display1/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Display1 = void 0;
-var Display1_1 = require("./Display1");
-Object.defineProperty(exports, "Display1", { enumerable: true, get: function () { return Display1_1.Display1; } });
+export { Display1 } from './Display1';

package/dist/components/Display2/Display2.js

@@ -1,73 +1,23 @@
-"use strict";
-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 { pxToNumber, numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const calculateLetterSpacing = (fontSize, letterSpacing) => {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
 };
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Display2 = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var hooks_1 = require("../../hooks");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var calculateLetterSpacing = function (fontSize, letterSpacing) {
-    return (0, element_core_1.numToPx)((0, element_core_1.pxToNumber)(fontSize) * letterSpacing);
-};
-var StyledDisplay2 = styled_native_1.default.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 (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), component.display2.fontFamily, (0, element_core_1.numToPx)(fontSize), (0, element_core_1.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};
+    `;
 });
-var Display2 = function (_a) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
-    var breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.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 }));
 };
-exports.Display2 = Display2;
-var templateObject_1;

package/dist/components/Display2/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Display2 = void 0;
-var Display2_1 = require("./Display2");
-Object.defineProperty(exports, "Display2", { enumerable: true, get: function () { return Display2_1.Display2; } });
+export { Display2 } from './Display2';

package/dist/components/Display3/Display3.js

@@ -1,73 +1,23 @@
-"use strict";
-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 { pxToNumber, numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const calculateLetterSpacing = (fontSize, letterSpacing) => {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
 };
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Display3 = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var hooks_1 = require("../../hooks");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var calculateLetterSpacing = function (fontSize, letterSpacing) {
-    return (0, element_core_1.numToPx)((0, element_core_1.pxToNumber)(fontSize) * letterSpacing);
-};
-var StyledDisplay3 = styled_native_1.default.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 (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), component.display3.fontFamily, (0, element_core_1.numToPx)(fontSize), (0, element_core_1.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};
+    `;
 });
-var Display3 = function (_a) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
-    var breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.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 }));
 };
-exports.Display3 = Display3;
-var templateObject_1;

package/dist/components/Display3/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Display3 = void 0;
-var Display3_1 = require("./Display3");
-Object.defineProperty(exports, "Display3", { enumerable: true, get: function () { return Display3_1.Display3; } });
+export { Display3 } from './Display3';

package/dist/components/Divider/Divider.js

@@ -1,44 +1,14 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Divider = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var StyledDivider = styled_native_1.default.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 (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 1px;\n      background: ", ";\n      width: ", ";\n    "], ["\n      height: 1px;\n      background: ", ";\n      width: ", ";\n    "])), type === 'default'
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from '../../styled.native';
+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};
+    `;
 });
-var Divider = function (_a) {
-    var type = _a.type, width = _a.width;
-    return (0, jsx_runtime_1.jsx)(StyledDivider, { type: type, width: width });
+export const Divider = ({ type, width }) => {
+    return _jsx(StyledDivider, { type: type, width: width });
 };
-exports.Divider = Divider;
-var templateObject_1;

package/dist/components/Divider/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Divider = void 0;
-var Divider_1 = require("./Divider");
-Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });
+export { Divider } from './Divider';