@ovotech/element-native 3.8.1 → 4.0.0-canary-a872093-246

package/dist/esm/components/ActionCard/CloseIconShape.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Path, ClipPath, Defs } from 'react-native-svg';
+import styled from '../../styled.native';
+var StyledPath = styled(Path)(function (_a) {
+    var semantic = _a.theme.semantic, color = _a.color;
+    return "\n  fill: ".concat(color !== null && color !== void 0 ? color : semantic.message.branded, "\n");
+});
+export var CloseIconShape = function (_a) {
+    var color = _a.color;
+    return (_jsxs(Svg, { width: 44, height: 44, children: [_jsx(StyledPath, { color: color, d: "M11.632 44 0 0h44v35.402L11.632 44Z" }), _jsx(Defs, { children: _jsx(ClipPath, { id: "a", children: _jsx(Path, { fill: "#fff", d: "M16 16h12v12H16z" }) }) })] }));
+};

package/dist/esm/components/ActionCard/IndicatorIconShape.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+import styled from '../../styled.native';
+var StyledPath = styled(Path)(function (_a) {
+    var semantic = _a.theme.semantic, color = _a.color;
+    return "\n  fill: ".concat(color !== null && color !== void 0 ? color : semantic.message.branded, "\n");
+});
+export var IndicatorIconShape = function (_a) {
+    var color = _a.color;
+    return (_jsx(Svg, { width: 32, height: 48, children: _jsx(StyledPath, { color: color, d: "M0 9.5 32 1v47H10.5L0 9.5Z" }) }));
+};

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

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

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

@@ -0,0 +1,54 @@
+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 } from "react/jsx-runtime";
+import { Children, cloneElement, forwardRef, } from 'react';
+import { TouchableOpacity, } from 'react-native';
+import { useBreakpoint } from '../../hooks';
+import { getValidChildren } from '../../utils';
+import { StyledActionInner, StyledActionList, StyledActionNodeWrapper, StyledActionText, StyledActionWrapper, StyledLeftIcon, StyledRightIcon, } from './styled';
+var ActionList = function (_a) {
+    var children = _a.children, inverted = _a.inverted, rest = __rest(_a, ["children", "inverted"]);
+    var validChildren = getValidChildren(children);
+    var childCount = Children.count(validChildren);
+    return (_jsx(StyledActionList, __assign({}, rest, { children: Children.map(validChildren, function (child, index) {
+            var _a, _b;
+            return cloneElement(child, {
+                fullWidth: true,
+                index: index,
+                hasBorder: childCount > 1 && index !== childCount - 1,
+                inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted, // prioritise child prop
+                inList: true,
+                iconRight: (_b = child.props.iconRight) !== null && _b !== void 0 ? _b : 'chevron-right-small',
+            });
+        }) })));
+};
+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, 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"]);
+    var smallAndUp = useBreakpoint().smallAndUp;
+    return (_jsxs(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? (_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : (_jsx(StyledActionNodeWrapper, { children: children })), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
+});
+export { ActionList, Action };

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

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

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

@@ -0,0 +1,40 @@
+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';
+import { Icon } from '../Icon';
+var StyledList = styled.View(function (_a) {
+    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), numToPx(smallAndUp ? core.space[3] : core.space[2]), numToPx(smallAndUp ? core.space[3] : core.space[2]));
+});
+export var StyledActionList = styledComponentWithBreakpoints(StyledList);
+export var StyledActionWrapper = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBorder = _a.hasBorder, inverted = _a.inverted;
+    return "\n  width: 100%;\n  align-self: flex-start;\n  border-bottom-width: ".concat(hasBorder ? numToPx(core.borderWidth.small) : 0, ";\n  border-bottom-style: solid;\n  border-bottom-color: ").concat(inverted ? semantic.inverted.border : semantic.border.graphic, ";\n");
+});
+export var StyledActionInner = styled.View(function (_a) {
+    var fullWidth = _a.fullWidth, inline = _a.inline;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    ", ";\n  "], ["\n    display: flex;\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    ", ";\n  "])), fullWidth ? 'space-between' : 'flex-start', !inline ? 'min-height: 44px' : '');
+});
+export var StyledActionText = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.inList, inList = _d === void 0 ? false : _d;
+    var fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      flex: ", ";\n    "], ["\n      color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      flex: ", ";\n    "])), inverted
+        ? semantic.inverted.message.base
+        : semantic.message.base, core.fontFamily.bodyBold.native, numToPx(fontSize), numToPx(core.lineHeight.body.small), inList ? 1 : 'none');
+});
+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]));
+});
+export var StyledLeftIcon = styled(Icon)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: flex-start;\n  "], ["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: flex-start;\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, numToPx(core.space[1]), numToPx(core.space[1]));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/esm/components/Badge/Badge.js

@@ -0,0 +1,70 @@
+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 styled, { css } from '../../styled.native';
+var StyledBadge = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, component = _b.component, _c = _a.variant, variant = _c === void 0 ? 'info' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, customVariant = _a.customVariant;
+    var surface;
+    var message;
+    if (variant in semantic) {
+        surface = semantic[variant].surface;
+        message = semantic[variant].message;
+    }
+    else {
+        surface = component.badge.variants[variant].background;
+        message = component.badge.variants[variant].foreground;
+    }
+    if ((customVariant === null || customVariant === void 0 ? void 0 : customVariant.foregroundColor) && (customVariant === null || customVariant === void 0 ? void 0 : customVariant.backgroundColor)) {
+        surface = customVariant.backgroundColor;
+        message = customVariant.foregroundColor;
+    }
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 0 ", ";\n      border-radius: 16px;\n      border: ", " solid\n        ", ";\n      background-color: ", ";\n      align-self: flex-start;\n    "], ["\n      padding: 0 ", ";\n      border-radius: 16px;\n      border: ", " solid\n        ", ";\n      background-color: ", ";\n      align-self: flex-start;\n    "])), numToPx(core.space[2]), numToPx(core.borderWidth.medium), core.color.brand.white, inverted ? message : surface);
+});
+var StyledBadgeText = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, component = _b.component, _c = _a.variant, variant = _c === void 0 ? 'info' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, customVariant = _a.customVariant;
+    var surface;
+    var message;
+    if (variant in semantic) {
+        surface = semantic[variant].surface;
+        message = semantic[variant].message;
+    }
+    else {
+        surface = component.badge.variants[variant].background;
+        message = component.badge.variants[variant].foreground;
+    }
+    if ((customVariant === null || customVariant === void 0 ? void 0 : customVariant.foregroundColor) && (customVariant === null || customVariant === void 0 ? void 0 : customVariant.backgroundColor)) {
+        surface = customVariant.backgroundColor;
+        message = customVariant.foregroundColor;
+    }
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), core.fontFamily.bodyBold.native, numToPx(core.lineHeight.body.small), inverted ? surface : message, numToPx(core.fontSize.body.small));
+});
+export var Badge = function (_a) {
+    var children = _a.children, variant = _a.variant, inverted = _a.inverted, rest = __rest(_a, ["children", "variant", "inverted"]);
+    return (_jsx(StyledBadge, __assign({ variant: variant, inverted: inverted }, rest, { children: _jsx(StyledBadgeText, { variant: variant, inverted: inverted, children: children }) })));
+};
+var templateObject_1, templateObject_2;

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

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

package/dist/esm/components/CTAButton/CTAButton.js

@@ -0,0 +1,90 @@
+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 } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { forwardRef } from 'react';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+import { Icon } from '../Icon/Icon';
+var StyledCTAWrapper = styled.TouchableOpacity(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-self: flex-start;\n  flex-direction: row;\n  align-items: flex-start;\n"], ["\n  align-self: flex-start;\n  flex-direction: row;\n  align-items: flex-start;\n"])));
+var CTAButtonWrapper = function (_a) {
+    var children = _a.children, _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'button' : _b, _c = _a.activeOpacity, activeOpacity = _c === void 0 ? 0.8 : _c, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity"]);
+    return (_jsx(StyledCTAWrapper, __assign({ accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest, { children: children })));
+};
+var StyledInner = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, component = _b.component, fullWidth = _a.fullWidth, variant = _a.variant, inverted = _a.inverted;
+    var currentVariant = component.cta[variant];
+    var borderRadius = core.space[11] / 2 + 'px';
+    var backgroundColor = variant === 'secondary'
+        ? 'transparent'
+        : inverted
+            ? currentVariant.surfaceInverted
+            : currentVariant.surface;
+    var borderColor = inverted
+        ? core.color.brand.white
+        : core.color.brand.forest;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding: ", " ", ";\n    background-color: ", ";\n    border-radius: ", ";\n    min-height: ", ";\n    border: ", ";\n    justify-content: center;\n    align-items: center;\n    flex-direction: row;\n    flex-grow: ", ";\n  "], ["\n    padding: ", " ", ";\n    background-color: ", ";\n    border-radius: ", ";\n    min-height: ", ";\n    border: ", ";\n    justify-content: center;\n    align-items: center;\n    flex-direction: row;\n    flex-grow: ", ";\n  "])), numToPx(core.space[2]), numToPx(core.space[4]), backgroundColor, borderRadius, numToPx(core.space[11]), variant === 'secondary'
+        ? "solid ".concat(numToPx(core.borderWidth.small), " ").concat(borderColor)
+        : 'none', fullWidth ? '1' : '0');
+});
+var StyledRightIcon = styled(Icon)(function (_a) {
+    var _b = _a.theme, core = _b.core, component = _b.component, variant = _a.variant, inverted = _a.inverted;
+    var currentVariant = component.cta[variant];
+    var color = inverted
+        ? currentVariant.messageInverted
+        : currentVariant.message;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    margin-left: ", ";\n    color: ", ";\n  "], ["\n    margin-left: ", ";\n    color: ", ";\n  "])), numToPx(core.space[1]), color);
+});
+var StyledLeftIcon = styled(Icon)(function (_a) {
+    var _b = _a.theme, core = _b.core, component = _b.component, variant = _a.variant, inverted = _a.inverted;
+    var currentVariant = component.cta[variant];
+    var color = inverted
+        ? currentVariant.messageInverted
+        : currentVariant.message;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-right: ", ";\n    color: ", ";\n  "], ["\n    margin-right: ", ";\n    color: ", ";\n  "])), numToPx(core.space[1]), color);
+});
+var StyledCTAButtonText = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, component = _b.component, smallAndUp = _a.smallAndUp, variant = _a.variant, inverted = _a.inverted;
+    var fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    var currentVariant = component.cta[variant];
+    var color = inverted
+        ? currentVariant.messageInverted
+        : currentVariant.message;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-align: center;\n    flex-shrink: 2;\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-align: center;\n    flex-shrink: 2;\n  "])), color, core.fontFamily.bodyBold.native, numToPx(fontSize), numToPx(core.lineHeight.body.small));
+});
+var CTAButton = function (_a) {
+    var _b = _a.iconLeft, iconLeft = _b === void 0 ? 'off' : _b, _c = _a.iconRight, iconRight = _c === void 0 ? 'off' : _c, children = _a.children, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, _f = _a.inverted, inverted = _f === void 0 ? false : _f, rest = __rest(_a, ["iconLeft", "iconRight", "children", "fullWidth", "variant", "inverted"]);
+    var smallAndUp = useBreakpoint().smallAndUp;
+    return (_jsx(CTAButtonWrapper, __assign({}, rest, { children: _jsxs(StyledInner, { fullWidth: fullWidth, variant: variant, inverted: inverted, children: [iconLeft !== 'off' ? (_jsx(StyledLeftIcon, { name: iconLeft, size: 16, variant: variant, inverted: inverted })) : null, _jsx(StyledCTAButtonText, { smallAndUp: smallAndUp, variant: variant, inverted: inverted, children: children }), iconRight !== 'off' ? (_jsx(StyledRightIcon, { name: iconRight, size: 16, variant: variant, inverted: inverted })) : null] }) })));
+};
+var PrimaryCTAButton = forwardRef(function (props, ref) { return (_jsx(CTAButton, __assign({ variant: "primary" }, props, { ref: ref }))); });
+var SecondaryCTAButton = forwardRef(function (props, ref) { return (_jsx(CTAButton, __assign({ variant: "secondary" }, props, { ref: ref }))); });
+var DestructiveCTAButton = forwardRef(function (props, ref) { return (_jsx(CTAButton, __assign({ variant: "destructive" }, props, { ref: ref }))); });
+export { CTAButton, PrimaryCTAButton, SecondaryCTAButton, DestructiveCTAButton, };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1 @@
+export { CTAButton, DestructiveCTAButton, PrimaryCTAButton, SecondaryCTAButton, } from './CTAButton';

package/dist/esm/components/CTALink/CTALink.js

@@ -0,0 +1,18 @@
+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 { CTAButton } from '../CTAButton';
+var CTALink = forwardRef(function (props, ref) { return _jsx(CTAButton, __assign({}, props, { ref: ref })); });
+var PrimaryCTALink = forwardRef(function (props, ref) { return _jsx(CTALink, __assign({ variant: "primary", ref: ref }, props)); });
+var SecondaryCTALink = forwardRef(function (props, ref) { return (_jsx(CTALink, __assign({ variant: "secondary", ref: ref }, props))); });
+export { CTALink, PrimaryCTALink, SecondaryCTALink };

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

@@ -0,0 +1 @@
+export { CTALink, PrimaryCTALink, SecondaryCTALink } from './CTALink';

package/dist/esm/components/Card/Card.js

@@ -0,0 +1,37 @@
+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 { useBreakpoint } from '../../hooks';
+import styled from '../../styled.native';
+var CardWrapper = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.smallAndUp, smallAndUp = _e === void 0 ? false : _e;
+    return "\n      background: ".concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(inline
+        ? numToPx(core.space[smallAndUp ? 6 : 4])
+        : numToPx(core.space[smallAndUp ? 9 : 6]), ";\n      border-radius: ").concat(inline ? numToPx(core.radius.max) : 0, ";\n    ");
+});
+export var Card = function (_a) {
+    var children = _a.children, inline = _a.inline, inverted = _a.inverted, rest = __rest(_a, ["children", "inline", "inverted"]);
+    var smallAndUp = useBreakpoint().smallAndUp;
+    return (_jsx(CardWrapper, __assign({ inline: inline, inverted: inverted, smallAndUp: smallAndUp }, rest, { children: children })));
+};

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

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

package/dist/esm/components/Checkbox/Checkbox.js

@@ -0,0 +1,74 @@
+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 } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { forwardRef } from 'react';
+import { TouchableOpacity, View, } from 'react-native';
+import styled from '../../styled.native';
+import { ErrorText } from '../ErrorText';
+import { FormGroup } from '../FormGroup';
+import { HintText } from '../HintText';
+import { Icon } from '../Icon/Icon';
+import { LabelText } from '../LabelText';
+import { Stack } from '../Stack';
+var StyledCheckboxInputWrapper = styled.View(function (_a) {
+    var core = _a.theme.core;
+    var checkboxSize = core.space[6];
+    var gap = core.space[2];
+    return "\n      width: ".concat(numToPx(checkboxSize + gap), ";\n      height: ").concat(numToPx(core.space[11]), ";\n    ");
+});
+var StyledCheckboxInput = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;
+    return "\n      width: ".concat(numToPx(core.space[6]), ";\n      height: ").concat(numToPx(core.space[6]), ";\n      border: ").concat(numToPx(core.borderWidth.small), " solid;\n      margin-top: 10px;\n      border-radius: ").concat(numToPx(core.radius.small), ";\n      border-color: ").concat(invalid
+        ? semantic.message.error
+        : checked
+            ? core.color.blue.dark
+            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
+});
+var CheckboxCheck = function (props) {
+    return _jsx(Icon, __assign({ name: "check", size: 16 }, props));
+};
+var StyledCheckboxInputCheck = styled(CheckboxCheck)(function (_a) {
+    var core = _a.theme.core, checked = _a.checked;
+    return "\n      margin-top: 3px;\n      margin-left: 3px;\n      color: ".concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+});
+var Input = function (_a) {
+    var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
+    return (_jsx(StyledCheckboxInputWrapper, __assign({}, rest, { children: _jsx(StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledCheckboxInputCheck, { checked: checked }) }) })));
+};
+var CheckLabelText = styled(LabelText)(function (_a) {
+    var core = _a.theme.core;
+    return "\n    padding-top: ".concat(numToPx(core.space[3]), ";\n  ");
+});
+var StyledWrapper = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
+var Checkbox = forwardRef(function (_a, ref) {
+    var label = _a.label, hint = _a.hint, error = _a.error, checked = _a.checked, optional = _a.optional, invalid = _a.invalid, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, rest = __rest(_a, ["label", "hint", "error", "checked", "optional", "invalid", "activeOpacity", "testID"]);
+    var hasError = !!error;
+    return (_jsx(FormGroup, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [error ? _jsx(ErrorText, { children: error }) : null, _jsx(TouchableOpacity, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: _jsxs(StyledWrapper, { children: [_jsx(Input, { checked: checked, invalid: hasError || invalid, testID: testID }), _jsxs(View, { style: { flexShrink: 1 }, children: [_jsxs(CheckLabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null] })] }) }))] }) }));
+});
+export { Checkbox };
+var templateObject_1;

package/dist/esm/components/Checkbox/CheckboxField.js

@@ -0,0 +1,42 @@
+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 { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement } from 'react';
+import { View } from 'react-native';
+import { getValidChildren } from '../../utils';
+import { ErrorText } from '../ErrorText';
+import { FormGroup } from '../FormGroup';
+import { HintText } from '../HintText';
+import { LabelText } from '../LabelText';
+import { Stack } from '../Stack';
+var CheckboxField = function (_a) {
+    var label = _a.label, hint = _a.hint, error = _a.error, children = _a.children, _b = _a.optional, optional = _b === void 0 ? false : _b, rest = __rest(_a, ["label", "hint", "error", "children", "optional"]);
+    var hasError = !!error;
+    var validChildren = getValidChildren(children);
+    return (_jsx(FormGroup, __assign({}, rest, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsx(View, { children: Children.map(validChildren, function (child) {
+                        return cloneElement(child, {
+                            invalid: hasError ? true : child.props.invalid,
+                        });
+                    }) })] }) })));
+};
+export { CheckboxField };

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

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export { CheckboxField } from './CheckboxField';

package/dist/esm/components/CurrencyField/CurrencyField.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 { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Field } from '../Field';
+import { CurrencyInput } from '../CurrencyInput';
+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/CurrencyField/index.js

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

package/dist/esm/components/CurrencyInput/CurrencyInput.js

@@ -0,0 +1,34 @@
+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, createRef } from 'react';
+import { mergeRefs } from '../../utils';
+import { NumberInput } from '../NumberInput';
+var CurrencyInput = forwardRef(function (_a, ref) {
+    var _b = _a.currency, currency = _b === void 0 ? 'GBP' : _b, invalid = _a.invalid, _c = _a.accessibilityLabel, accessibilityLabel = _c === void 0 ? '' : _c, rest = __rest(_a, ["currency", "invalid", "accessibilityLabel"]);
+    var inputRef = createRef();
+    var updatedAccessibilityLabel = "".concat(accessibilityLabel, " ").concat(currency === 'GBP' ? 'pounds' : currency === 'EUR' ? 'euro' : 'dollar').trim();
+    var iconName = currency === 'GBP' ? 'pound' : currency === 'EUR' ? 'euro' : 'dollar';
+    return (_jsx(NumberInput, __assign({}, rest, { invalid: invalid, accessibilityLabel: updatedAccessibilityLabel, ref: mergeRefs(ref, inputRef), iconLeft: iconName })));
+});
+export { CurrencyInput };

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

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

package/dist/esm/components/DataTable/DataTable.js

@@ -0,0 +1,43 @@
+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 { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { isElement as isReactElement } from 'react-is';
+import { ScrollView } from 'react-native';
+import { useBreakpoint } from '../../hooks';
+import { getText } from '../../utils';
+import { TableRow } from './TableRow';
+import { StyledTableContainer, TableBody, TableCaption, TableCaptionText, TableHeader, TableHeaderText, TableRowHeading, } from './styles';
+export var DataTable = forwardRef(function (_a, ref) {
+    var items = _a.items, columnHeadings = _a.columnHeadings, caption = _a.caption, rowHeadings = _a.rowHeadings, columnWidths = _a.columnWidths, _b = _a.striped, striped = _b === void 0 ? true : _b, rest = __rest(_a, ["items", "columnHeadings", "caption", "rowHeadings", "columnWidths", "striped"]);
+    var breakpoints = useBreakpoint();
+    var columnLabel = columnHeadings
+        ? " ".concat(columnHeadings.length, " columns,")
+        : '';
+    var accessibilityLabelText = isReactElement(caption)
+        ? getText(caption)
+        : caption;
+    var accessibilityLabel = "data table,".concat(columnLabel, " ").concat(items.length, " rows, ").concat(accessibilityLabelText);
+    return (_jsx(ScrollView, { horizontal: true, alwaysBounceHorizontal: false, contentContainerStyle: { flexGrow: 1 }, children: _jsxs(StyledTableContainer, __assign({}, rest, { ref: ref, children: [caption ? (_jsx(TableCaption, __assign({}, breakpoints, { children: isReactElement(caption) ? (caption) : (_jsx(TableCaptionText, __assign({}, breakpoints, { accessibilityLabel: accessibilityLabel, children: caption }))) }))) : null, columnHeadings ? (_jsx(TableRowHeading, { children: columnHeadings.map(function (columnHeading, index) { return (_createElement(TableHeader, __assign({}, breakpoints, { key: index, cellWidth: columnWidths[index] }), isReactElement(columnHeading) ? (columnHeading) : (_jsx(TableHeaderText, __assign({}, breakpoints, { children: columnHeading }))))); }) })) : null, _jsx(TableBody, { children: items.map(function (rowData, index) { return (_jsx(TableRow, { data: rowData, index: index, rowHeadings: rowHeadings, columnWidths: columnWidths, striped: striped }, index)); }) })] })) }));
+});