@ovotech/element-native 4.4.9 → 4.5.0

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

@@ -1,54 +1,24 @@
-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 { Children, cloneElement, } 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',
-            });
-        }) })));
+const ActionList = ({ children, inverted, ...rest }) => {
+    const validChildren = getValidChildren(children);
+    const childCount = Children.count(validChildren);
+    return (_jsx(StyledActionList, { ...rest, children: Children.map(validChildren, (child, index) => cloneElement(child, {
+            fullWidth: true,
+            index,
+            hasBorder: childCount > 1 && index !== childCount - 1,
+            inverted: child.props.inverted ?? inverted, // prioritise child prop
+            inList: true,
+            iconRight: child.props.iconRight ?? 'chevron-right-small',
+        })) }));
+};
+const ActionWrapper = ({ children, accessibilityRole, accessibilityLabel, accessibilityHint, activeOpacity = 0.75, fullWidth, hasBorder = false, inverted = false, inline = false, inList, onPress, testID, standalone = false, ref, ...rest }) => (_jsx(StyledActionWrapper, { ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID, ...rest, children: _jsx(TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, standalone: standalone, children: children }) }) }));
+const Action = ({ accessibilityRole = 'link', accessibilityLabel, accessibilityHint, children, fullWidth = false, inverted = false, inline = false, onPress, testID, iconLeft, iconRight, standalone = false, ref, ...rest }) => {
+    const { smallAndUp } = useBreakpoint();
+    return (_jsxs(ActionWrapper, { ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID, standalone: standalone, ...rest, children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? (_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest?.inList, children: children })) : (_jsx(StyledActionNodeWrapper, { children: children })), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] }));
 };
-var ActionWrapper = forwardRef(function (_a, ref) {
-    var children = _a.children, accessibilityRole = _a.accessibilityRole, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, _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, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID", "standalone"]);
-    return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, standalone: standalone, children: children }) }) })));
-});
-var Action = forwardRef(function (_a, ref) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, 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, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight", "standalone"]);
-    var smallAndUp = useBreakpoint().smallAndUp;
-    return (_jsxs(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID, standalone: standalone }, 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/styled.js

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

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

@@ -1,36 +1,9 @@
-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;
+const StyledBadge = styled.View(({ theme: { core, semantic, component }, variant = 'info', inverted = false, customVariant, }) => {
+    let surface;
+    let message;
     if (variant in semantic) {
         surface = semantic[variant].surface;
         message = semantic[variant].message;
@@ -39,16 +12,22 @@ var StyledBadge = styled.View(function (_a) {
         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)) {
+    if (customVariant?.foregroundColor && customVariant?.backgroundColor) {
         surface = customVariant.backgroundColor;
         message = customVariant.foregroundColor;
     }
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 2px ", ";\n      border-radius: 16px;\n      border: ", " solid\n        ", ";\n      background-color: ", ";\n      align-self: flex-start;\n    "], ["\n      padding: 2px ", ";\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);
+    return css `
+      padding: 2px ${numToPx(core.space[2])};
+      border-radius: 16px;
+      border: ${numToPx(core.borderWidth.medium)} solid
+        ${core.color.brand.white};
+      background-color: ${inverted ? message : surface};
+      align-self: flex-start;
+    `;
 });
-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;
+const StyledBadgeText = styled.Text(({ theme: { core, semantic, component }, variant = 'info', inverted = false, customVariant, }) => {
+    let surface;
+    let message;
     if (variant in semantic) {
         surface = semantic[variant].surface;
         message = semantic[variant].message;
@@ -57,14 +36,17 @@ var StyledBadgeText = styled.Text(function (_a) {
         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)) {
+    if (customVariant?.foregroundColor && 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));
+    return css `
+      font-family: ${core.fontFamily.bodyBold.native};
+      line-height: ${numToPx(core.lineHeight.body.small)};
+      color: ${inverted ? surface : message};
+      font-size: ${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 }) })));
+export const Badge = ({ children, variant, inverted, ...rest }) => {
+    return (_jsx(StyledBadge, { variant: variant, inverted: inverted, ...rest, children: _jsx(StyledBadgeText, { variant: variant, inverted: inverted, children: children }) }));
 };
-var templateObject_1, templateObject_2;

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

@@ -1,90 +1,81 @@
-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({ accessible: true, 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'
+const StyledCTAWrapper = styled.TouchableOpacity `
+  align-self: flex-start;
+  flex-direction: row;
+  align-items: flex-start;
+`;
+const CTAButtonWrapper = ({ children, accessibilityRole = 'button', activeOpacity = 0.8, ...rest }) => (_jsx(StyledCTAWrapper, { accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity, ...rest, children: children }));
+const StyledInner = styled.View(({ theme: { core, component }, fullWidth, variant, inverted }) => {
+    const currentVariant = component.cta[variant];
+    const borderRadius = core.space[11] / 2 + 'px';
+    const backgroundColor = variant === 'secondary'
         ? 'transparent'
         : inverted
             ? currentVariant.surfaceInverted
             : currentVariant.surface;
-    var borderColor = inverted
+    const 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');
+    return css `
+    padding: ${numToPx(core.space[2])} ${numToPx(core.space[4])};
+    background-color: ${backgroundColor};
+    border-radius: ${borderRadius};
+    min-height: ${numToPx(core.space[11])};
+    border: ${variant === 'secondary'
+        ? `solid ${numToPx(core.borderWidth.small)} ${borderColor}`
+        : 'none'};
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    flex-grow: ${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
+const StyledRightIcon = styled(Icon)(({ theme: { core, component }, variant, inverted }) => {
+    const currentVariant = component.cta[variant];
+    const 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);
+    return css `
+    margin-left: ${numToPx(core.space[1])};
+    color: ${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
+const StyledLeftIcon = styled(Icon)(({ theme: { core, component }, variant, inverted }) => {
+    const currentVariant = component.cta[variant];
+    const 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);
+    return css `
+    margin-right: ${numToPx(core.space[1])};
+    color: ${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
+const StyledCTAButtonText = styled.Text(({ theme: { core, component }, smallAndUp, variant, inverted }) => {
+    const fontSize = smallAndUp
         ? core.fontSize.body.large
         : core.fontSize.body.small;
-    var currentVariant = component.cta[variant];
-    var color = inverted
+    const currentVariant = component.cta[variant];
+    const 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));
+    return css `
+    color: ${color};
+    font-family: ${core.fontFamily.bodyBold.native};
+    font-size: ${numToPx(fontSize)};
+    line-height: ${numToPx(core.lineHeight.body.small)};
+    text-align: center;
+    flex-shrink: 2;
+  `;
 });
-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] }) })));
+const CTAButton = ({ iconLeft = 'off', iconRight = 'off', children, fullWidth = false, variant = 'primary', inverted = false, accessibilityRole = 'button', activeOpacity = 0.8, ref, ...rest }) => {
+    const { smallAndUp } = useBreakpoint();
+    return (_jsx(CTAButtonWrapper, { accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity, ref: ref, ...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 }))); });
+const PrimaryCTAButton = (props) => (_jsx(CTAButton, { variant: "primary", ...props }));
+const SecondaryCTAButton = (props) => (_jsx(CTAButton, { variant: "secondary", ...props }));
+const DestructiveCTAButton = (props) => (_jsx(CTAButton, { variant: "destructive", ...props }));
 export { CTAButton, PrimaryCTAButton, SecondaryCTAButton, DestructiveCTAButton, };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -1,18 +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);
-};
 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))); });
+const CTALink = (props) => _jsx(CTAButton, { ...props });
+const PrimaryCTALink = (props) => (_jsx(CTALink, { variant: "primary", ...props }));
+const SecondaryCTALink = (props) => (_jsx(CTALink, { variant: "secondary", ...props }));
 export { CTALink, PrimaryCTALink, SecondaryCTALink };

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

@@ -1,37 +1,15 @@
-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 })));
+const CardWrapper = styled.View(({ theme: { core, semantic }, inline = false, inverted = false, smallAndUp = false, }) => `
+      background: ${inverted ? semantic.inverted.surface : semantic.surface.elevated};
+      padding: ${inline
+    ? numToPx(core.space[smallAndUp ? 6 : 4])
+    : numToPx(core.space[smallAndUp ? 9 : 6])};
+      border-radius: ${inline ? numToPx(core.radius.max) : 0};
+    `);
+export const Card = ({ children, inline, inverted, ...rest }) => {
+    const { smallAndUp } = useBreakpoint();
+    return (_jsx(CardWrapper, { inline: inline, inverted: inverted, smallAndUp: smallAndUp, ...rest, children: children }));
 };

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

@@ -1,32 +1,5 @@
-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';
@@ -35,40 +8,51 @@ 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    ");
+const StyledCheckboxInputWrapper = styled.View(({ theme: { core } }) => {
+    const checkboxSize = core.space[6];
+    const gap = core.space[2];
+    return `
+      width: ${numToPx(checkboxSize + gap)};
+      height: ${numToPx(core.space[11])};
+    `;
 });
-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
+const StyledCheckboxInput = styled.View(({ theme: { core, semantic }, invalid, checked }) => {
+    return `
+      width: ${numToPx(core.space[6])};
+      height: ${numToPx(core.space[6])};
+      border: ${numToPx(core.borderWidth.small)} solid;
+      margin-top: 10px;
+      border-radius: ${numToPx(core.radius.small)};
+      border-color: ${invalid
         ? semantic.message.error
         : checked
             ? core.color.blue.dark
-            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
+            : semantic.border.functional};
+      background: ${checked ? core.color.blue.lightest : 'transparent'};
+    `;
 });
-var CheckboxCheck = function (props) {
-    return _jsx(Icon, __assign({ name: "check", size: 16 }, props));
+const CheckboxCheck = (props) => {
+    return _jsx(Icon, { 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    ");
+const StyledCheckboxInputCheck = styled(CheckboxCheck)(({ theme: { core }, checked, }) => {
+    return `
+      margin-top: 3px;
+      margin-left: 3px;
+      color: ${core.color.blue.dark};
+      opacity: ${checked ? 1 : 0};
+    `;
 });
-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 }) }) })));
+const Input = ({ checked, invalid, testID, ...rest }) => {
+    return (_jsx(StyledCheckboxInputWrapper, { ...rest, children: _jsx(StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledCheckboxInputCheck, { checked: checked }) }) }));
+};
+const CheckLabelText = styled(LabelText)(({ theme: { core } }) => `
+    padding-top: ${numToPx(core.space[3])};
+  `);
+const StyledWrapper = styled.View `
+  flex-direction: row;
+`;
+const Checkbox = ({ label, hint, error, checked, optional, invalid, activeOpacity = 0.8, testID, ref, ...rest }) => {
+    const hasError = !!error;
+    return (_jsx(FormGroup, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [error ? _jsx(ErrorText, { children: error }) : null, _jsx(TouchableOpacity, { ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { 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] })] }) })] }) }));
 };
-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, accessible: true, 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;