@ovotech/element-native 4.5.0 → 5.0.0-canary-bcb1788-338

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

@@ -1,72 +1,70 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import MaskedView from '@react-native-masked-view/masked-view';
-import { useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 import { Image, Pressable, View } from 'react-native';
-import { Action, CTAButton, Heading2, Heading3, Icon, Margin, Stack, } from '../';
-import styled, { useTheme } from '../../styled.native';
+import { Action, Button, Heading2, Heading3, Icon, Margin, Stack } from '../';
+import styled, { ThemeContext } from '../../styled.native';
 import { P } from '../P';
 import { IndicatorIconShape } from './IndicatorIconShape';
-const StyledPressableCard = styled.Pressable(({ theme: { core, semantic }, inline, inverted, reducedBottomPadding }) => {
-    const paddingVal = inline ? core.space[4] : core.space[6];
-    const reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
-    return `
-      border-radius: ${inline ? numToPx(core.space[6]) : 0};
-      background-color: ${inverted ? semantic.inverted.surface : semantic.surface.elevated};
-      padding: ${numToPx(paddingVal)};
-      padding-bottom: ${numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal)};
-      overflow: hidden;
-      border-width: 0;
-      width: 100%;
-    `;
+var StyledPressableCard = styled.Pressable(function (_a) {
+    var theme = _a.theme, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
+    var paddingVal = inline ? theme.space[400] : theme.space[600];
+    var reducedBottomPaddingVal = inline ? theme.space[300] : theme.space[500];
+    return "\n      border-radius: ".concat(inline ? numToPx(theme.space[600]) : 0, ";\n      background-color: ").concat(inverted ? theme.color.surface.dim : theme.color.surface.bright, ";\n      padding: ").concat(numToPx(paddingVal), ";\n      padding-bottom: ").concat(numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
+});
+var StyledCard = styled.View(function (_a) {
+    var theme = _a.theme, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
+    var paddingVal = inline ? theme.space[400] : theme.space[600];
+    var reducedBottomPaddingVal = inline ? theme.space[300] : theme.space[500];
+    return "\n      border-radius: ".concat(inline ? numToPx(theme.space[600]) : 0, ";\n      background-color: ").concat(inverted ? theme.color.surface.onSurface : theme.color.surface.bright, ";\n      padding: ").concat(numToPx(paddingVal), ";\n      padding-bottom: ").concat(numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
+});
+var StyledP = styled(P)(function (_a) {
+    var theme = _a.theme, inverted = _a.inverted;
+    return "\n    color: ".concat(inverted ? theme.color.surface.bright : theme.color.surface.onSurface, ";\n");
 });
-const StyledCard = styled.View(({ theme: { core, semantic }, inline, inverted, reducedBottomPadding }) => {
-    const paddingVal = inline ? core.space[4] : core.space[6];
-    const reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
-    return `
-      border-radius: ${inline ? numToPx(core.space[6]) : 0};
-      background-color: ${inverted ? semantic.inverted.surface : semantic.surface.elevated};
-      padding: ${numToPx(paddingVal)};
-      padding-bottom: ${numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal)};
-      overflow: hidden;
-      border-width: 0;
-      width: 100%;
-    `;
+var CloseIconWrapper = styled.View(function (_a) {
+    var theme = _a.theme;
+    return "\n    padding: ".concat(numToPx(theme.space[200]), ";\n    background-color: ").concat(theme.color.surface.bright, ";\n    border-radius: ").concat(numToPx(theme.space[600]), ";\n");
 });
-const StyledP = styled(P)(({ theme: { semantic }, inverted }) => `
-    color: ${inverted ? semantic.inverted.message.base : semantic.message.base};
-`);
-const CloseIconWrapper = styled.View(({ theme: { core, semantic } }) => `
-    padding: ${numToPx(core.space[2])};
-    background-color: ${semantic.surface.elevated};
-    border-radius: ${numToPx(core.space[6])};
-`);
-export const ActionCard = ({ accessibilityLabel = 'image', actionIconName = 'chevron-right-small', body, buttonTitle, ctaVariant, image, inline = false, inverted = false, onMount, onPressCloseButton, onPressActionButton, onPressIndicator, testID, title, }) => {
-    const { core, semantic } = useTheme();
-    const hasSingleAction = (onPressActionButton && !onPressIndicator && !onPressCloseButton) ||
+export var ActionCard = function (_a) {
+    var _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'image' : _b, _c = _a.actionIconName, actionIconName = _c === void 0 ? 'chevron-right-small' : _c, body = _a.body, buttonTitle = _a.buttonTitle, ctaVariant = _a.ctaVariant, image = _a.image, _d = _a.inline, inline = _d === void 0 ? false : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, onMount = _a.onMount, onPressCloseButton = _a.onPressCloseButton, onPressActionButton = _a.onPressActionButton, onPressIndicator = _a.onPressIndicator, testID = _a.testID, title = _a.title;
+    var theme = useContext(ThemeContext);
+    var hasSingleAction = (onPressActionButton && !onPressIndicator && !onPressCloseButton) ||
         (onPressIndicator && !onPressActionButton && !onPressCloseButton);
-    const cardAction = hasSingleAction
+    var cardAction = hasSingleAction
         ? onPressActionButton || onPressIndicator
         : null;
-    const RootContainer = hasSingleAction
+    var RootContainer = hasSingleAction
         ? StyledPressableCard
         : StyledCard;
-    useEffect(() => {
+    useEffect(function () {
         if (onMount) {
             onMount();
         }
     }, []);
-    const Heading = inline ? Heading3 : Heading2;
-    const cardPadding = core.space[inline ? 4 : 6];
-    const negativeMarginAdjustment = -cardPadding;
-    return (_jsxs(RootContainer, { ...(cardAction ? { onPress: cardAction } : {}), inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: `${testID}-card`, accessibilityRole: cardAction ? 'button' : 'none', children: [_jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
+    var Heading = inline ? Heading3 : Heading2;
+    var cardPadding = theme.space[inline ? 400 : 600];
+    var negativeMarginAdjustment = -cardPadding;
+    return (_jsxs(RootContainer, __assign({}, (cardAction ? { onPress: cardAction } : {}), { inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), accessibilityRole: cardAction ? 'button' : 'none', children: [_jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
                                         color: inverted
-                                            ? semantic.inverted.message.link
-                                            : semantic.message.branded,
+                                            ? theme.color.surface.bright
+                                            : theme.color.brand.brand,
                                         paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
-                                    }, testID: `${testID}-heading`, children: title }), _jsxs(View, { children: [typeof body === 'string' ? (_jsx(View, { style: {
+                                    }, testID: "".concat(testID, "-heading"), children: title }), _jsxs(View, { children: [typeof body === 'string' ? (_jsx(View, { style: {
                                                 paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
-                                            }, children: _jsx(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, { top: 2, children: _jsx(Action, { inline: true, onPress: onPressActionButton, testID: `${testID}-button`, iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : (_jsx(Margin, { top: 4, children: _jsx(CTAButton, { onPress: onPressActionButton, testID: `${testID}-button`, variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? (_jsx(MaskedView, { style: {
+                                            }, children: _jsx(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, { top: 2, children: _jsx(Action, { standalone: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : (_jsx(Margin, { top: 4, children: _jsx(Button, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? (_jsx(MaskedView, { style: {
                             flex: 1,
                             flexDirection: 'row',
                             height: '100%',
@@ -91,13 +89,13 @@ export const ActionCard = ({ accessibilityLabel = 'image', actionIconName = 'che
                             position: 'absolute',
                             right: negativeMarginAdjustment,
                             bottom: negativeMarginAdjustment,
-                        }, onPress: onPressIndicator, testID: `${testID}-indicator-button`, children: [_jsx(IndicatorIconShape, {}), _jsx(Icon, { size: 14, style: {
+                        }, onPress: onPressIndicator, testID: "".concat(testID, "-indicator-button"), children: [_jsx(IndicatorIconShape, {}), _jsx(Icon, { size: 14, style: {
                                     position: 'absolute',
                                     right: inline ? 8 : 6,
                                     bottom: 16,
-                                }, color: semantic.surface.elevated, name: "chevron-right", accessibilityLabel: "chevron-right" })] })) : null] }), onPressCloseButton && !onPressIndicator ? (_jsx(Pressable, { style: {
+                                }, color: theme.color.surface.bright, name: "chevron-right", accessibilityLabel: "chevron-right" })] })) : null] }), onPressCloseButton && !onPressIndicator ? (_jsx(Pressable, { style: {
                     position: 'absolute',
-                    right: core.space[2],
-                    top: core.space[2],
-                }, onPress: onPressCloseButton, testID: `${testID}-close-button`, children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] }));
+                    right: theme.space[200],
+                    top: theme.space[200],
+                }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: theme.color.surface.onSurface }) }) })) : null] })));
 };

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

@@ -1,7 +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';
-const StyledPath = styled(Path)(({ theme: { semantic }, color }) => `
-  fill: ${color ?? semantic.message.branded}
-`);
-export const CloseIconShape = ({ color }) => (_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" }) }) })] }));
+var StyledPath = styled(Path)(function (_a) {
+    var theme = _a.theme, color = _a.color;
+    return "\n  fill: ".concat(color !== null && color !== void 0 ? color : theme.color.brand.brand, "\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

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

@@ -1,24 +1,55 @@
+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, } from 'react';
-import { TouchableOpacity, } from 'react-native';
+import { Children, cloneElement, forwardRef, } from 'react';
+import { TouchableOpacity, View, } from 'react-native';
 import { useBreakpoint } from '../../hooks';
 import { getValidChildren } from '../../utils';
-import { StyledActionInner, StyledActionList, StyledActionNodeWrapper, StyledActionText, StyledActionWrapper, StyledLeftIcon, StyledRightIcon, } from './styled';
-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] }));
+import { Badge } from '../Badge';
+import { StyledActionInner, StyledActionList, StyledActionNodeWrapper, StyledActionText, StyledActionWrapper, StyledHintText, StyledLeftIcon, StyledRightIcon, StyledTextWrapper, } from './styled';
+var ActionList = function (_a) {
+    var children = _a.children, inverted = _a.inverted, borderBottom = _a.borderBottom, rest = __rest(_a, ["children", "inverted", "borderBottom"]);
+    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) || borderBottom,
+                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, 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, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, _e = _a.standalone, standalone = _e === void 0 ? false : _e, rest = __rest(_a, ["children", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inList", "onPress", "testID", "standalone"]);
+    return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID, inList: inList }, rest, { children: _jsx(TouchableOpacity, { activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, 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, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _e = _a.standalone, standalone = _e === void 0 ? false : _e, _f = _a.badgeVariant, badgeVariant = _f === void 0 ? 'info' : _f, badgeText = _a.badgeText, hint = _a.hint, rest = __rest(_a, ["accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "fullWidth", "inverted", "onPress", "testID", "iconLeft", "iconRight", "standalone", "badgeVariant", "badgeText", "hint"]);
+    var smallAndUp = useBreakpoint().smallAndUp;
+    return (_jsxs(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID, standalone: standalone, hint: hint, badgeText: badgeText }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, _jsxs(View, { children: [typeof children === 'string' ? (_jsxs(StyledTextWrapper, { children: [_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, children: children }), badgeText ? (_jsx(Badge, { variant: badgeVariant, children: badgeText })) : null] })) : (_jsx(StyledActionNodeWrapper, { children: children })), hint ? (_jsx(StyledHintText, { inverted: inverted, children: hint })) : null] }), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
+});
 export { ActionList, Action };

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

@@ -1,58 +1,57 @@
+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 { HintText } from '../HintText';
 import { Icon } from '../Icon';
-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 `
-      color: ${inverted
-        ? semantic.inverted.message.base
-        : 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 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 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 StyledList = styled.View(function (_a) {
+    var theme = _a.theme, 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 ? theme.space[300] : theme.space[200]), numToPx(smallAndUp ? theme.space[300] : theme.space[200]));
 });
+export var StyledActionList = styledComponentWithBreakpoints(StyledList);
+export var StyledActionWrapper = styled.View(function (_a) {
+    var theme = _a.theme, hasBorder = _a.hasBorder, inverted = _a.inverted, inList = _a.inList, hint = _a.hint, badgeText = _a.badgeText;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    align-self: flex-start;\n    border-bottom-width: ", ";\n    border-bottom-style: solid;\n    border-bottom-color: ", ";\n    padding: ", " 0;\n  "], ["\n    width: 100%;\n    align-self: flex-start;\n    border-bottom-width: ", ";\n    border-bottom-style: solid;\n    border-bottom-color: ", ";\n    padding: ", " 0;\n  "])), hasBorder ? numToPx(theme.border.width.sm) : 0, inverted
+        ? theme.color.surface.dim
+        : theme.color.brand.fixed.onBrand, inList && (hint || badgeText) ? numToPx(theme.space[200]) : 0);
+});
+export var StyledActionInner = styled.View(function (_a) {
+    var fullWidth = _a.fullWidth, standalone = _a.standalone;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    min-height: ", ";\n  "], ["\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    min-height: ", ";\n  "])), fullWidth ? 'space-between' : 'flex-start', standalone ? '' : '44px');
+});
+export var StyledActionText = styled.Text(function (_a) {
+    var theme = _a.theme, smallAndUp = _a.smallAndUp, _b = _a.inverted, inverted = _b === void 0 ? false : _b;
+    var fontSize = smallAndUp
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), inverted
+        ? theme.color.surface.bright
+        : theme.color.surface.onSurface, theme.native.font.family.bold, numToPx(fontSize), numToPx(theme.font.lineHeight.md.mediaQuery.sm));
+});
+export var StyledActionNodeWrapper = styled.View(templateObject_5 || (templateObject_5 = __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 theme = _a.theme, inverted = _a.inverted;
+    return css(templateObject_6 || (templateObject_6 = __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
+        ? theme.color.surface.bright
+        : theme.color.surface.onSurface, numToPx(theme.space[100]));
+});
+export var StyledLeftIcon = styled(Icon)(function (_a) {
+    var theme = _a.theme, inverted = _a.inverted;
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    color: ", ";\n    margin-right: ", ";\n  "], ["\n    color: ", ";\n    margin-right: ", ";\n  "])), inverted
+        ? theme.color.surface.bright
+        : theme.color.surface.onSurface, numToPx(theme.space[100]));
+});
+export var StyledTextWrapper = styled.View(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    gap: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    gap: ", ";\n  "])), numToPx(theme.space[200]));
+});
+export var StyledHintText = styled(HintText)(function (_a) {
+    var theme = _a.theme, _b = _a.inverted, inverted = _b === void 0 ? false : _b;
+    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), inverted
+        ? theme.color.surface.bright
+        : theme.color.surface.onSurfaceVariant);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -1,52 +1,60 @@
+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';
-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;
-    }
-    else {
-        surface = component.badge.variants[variant].background;
-        message = component.badge.variants[variant].foreground;
-    }
-    if (customVariant?.foregroundColor && customVariant?.backgroundColor) {
-        surface = customVariant.backgroundColor;
-        message = customVariant.foregroundColor;
-    }
-    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;
-    `;
+import styled, { css, useTheme } from '../../styled.native';
+var StyledBadge = styled.View(function (_a) {
+    var inverted = _a.inverted, theme = _a.theme, $surface = _a.$surface, $message = _a.$message;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", " ", "\n      ", " ", ";\n    border-radius: 16px;\n    border: ", " solid ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "], ["\n    padding: ", " ", "\n      ", " ", ";\n    border-radius: 16px;\n    border: ", " solid ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "])), numToPx(theme.space[50]), numToPx(theme.space[200]), numToPx(theme.space[100]), numToPx(theme.space[200]), numToPx(theme.border.width.md), theme.color.brand.onBrand, inverted ? $message : $surface);
 });
-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;
-    }
-    else {
-        surface = component.badge.variants[variant].background;
-        message = component.badge.variants[variant].foreground;
-    }
-    if (customVariant?.foregroundColor && customVariant?.backgroundColor) {
+var StyledBadgeText = styled.Text(function (_a) {
+    var inverted = _a.inverted, theme = _a.theme, $surface = _a.$surface, $message = _a.$message;
+    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  "])), theme.native.font.family.bold, numToPx(theme.font.lineHeight.md.mediaQuery.sm), inverted ? $surface : $message, numToPx(theme.font.size.md.mediaQuery.sm));
+});
+export var Badge = function (_a) {
+    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'neutral' : _b, _c = _a.inverted, inverted = _c === void 0 ? false : _c, customVariant = _a.customVariant, rest = __rest(_a, ["children", "variant", "inverted", "customVariant"]);
+    var theme = useTheme();
+    // check if variant is primitive, otherwise use alert colours
+    var isPrimitive = Object.keys(theme.color).includes(variant);
+    var message = isPrimitive
+        ? // @ts-ignore we're checking the variants above...
+            theme.color[variant]['70']
+        : // @ts-ignore we're checking the variants above...
+            theme.color.alert[variant];
+    var surface = isPrimitive
+        ? // @ts-ignore we're checking the variants above...
+            theme.color[variant]['20']
+        : // @ts-ignore we're checking the variants above...
+            theme.color.alert["".concat(variant, "Tint")];
+    if ((customVariant === null || customVariant === void 0 ? void 0 : customVariant.backgroundColor) !== undefined &&
+        (customVariant === null || customVariant === void 0 ? void 0 : customVariant.color) !== undefined) {
+        message = customVariant.color;
         surface = customVariant.backgroundColor;
-        message = customVariant.foregroundColor;
     }
-    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 const Badge = ({ children, variant, inverted, ...rest }) => {
-    return (_jsx(StyledBadge, { variant: variant, inverted: inverted, ...rest, children: _jsx(StyledBadgeText, { variant: variant, inverted: inverted, children: children }) }));
+    return (_jsx(StyledBadge, __assign({ inverted: inverted, "$surface": surface, "$message": message }, rest, { children: _jsx(StyledBadgeText, { inverted: inverted, "$surface": surface, "$message": message, children: children }) })));
 };
+var templateObject_1, templateObject_2;

package/dist/esm/components/Button/Button.js

@@ -0,0 +1,39 @@
+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 { StyledButtonWrapper, StyledInner, StyledButtonIcon, StyledButtonText, } from './Button.styles';
+var ButtonWrapper = 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(StyledButtonWrapper, __assign({ accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest, { children: children })));
+};
+var Button = function (_a) {
+    var iconLeft = _a.iconLeft, iconRight = _a.iconRight, children = _a.children, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.variant, variant = _c === void 0 ? 'surface' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 'default' : _e, rest = __rest(_a, ["iconLeft", "iconRight", "children", "fullWidth", "variant", "inverted", "size"]);
+    var smallAndUp = useBreakpoint().smallAndUp;
+    var isIconOnly = !children;
+    return (_jsx(ButtonWrapper, __assign({}, rest, { children: _jsxs(StyledInner, { fullWidth: fullWidth, variant: variant, inverted: inverted, size: size, iconLeft: iconLeft, iconRight: iconRight, iconOnly: isIconOnly, children: [iconLeft && (_jsx(StyledButtonIcon, { iconLeft: true, iconOnly: isIconOnly, name: iconLeft, inverted: inverted, variant: variant, size: size === 'default' ? numToPx(16) : numToPx(20) })), children ? (_jsx(StyledButtonText, { smallAndUp: smallAndUp, variant: variant, inverted: inverted, size: size, children: children })) : null, iconRight && (_jsx(StyledButtonIcon, { iconRight: true, iconOnly: isIconOnly, name: iconRight, inverted: inverted, variant: variant, size: size === 'default' ? numToPx(16) : numToPx(20) }))] }) })));
+};
+var ButtonDestructive = forwardRef(function (props, ref) { return (_jsx(Button, __assign({ variant: "destructive" }, props, { ref: ref }))); });
+export { Button, ButtonDestructive };

package/dist/esm/components/Button/Button.styles.js

@@ -0,0 +1,78 @@
+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 { Icon } from '../Icon/Icon';
+export var StyledButtonWrapper = 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"])));
+export var StyledInner = styled.View(function (_a) {
+    var theme = _a.theme, fullWidth = _a.fullWidth, inverted = _a.inverted, variant = _a.variant, size = _a.size, iconOnly = _a.iconOnly, iconRight = _a.iconRight, iconLeft = _a.iconLeft;
+    var borderRadius = numToPx(theme.border.radius['3xl']);
+    var backgroundColor = getBackgroundColor(theme, variant, inverted);
+    var borderColor = getBorderColor(theme, variant, inverted);
+    var minHeight = size === 'default'
+        ? numToPx(theme.space[1100])
+        : numToPx(theme.border.radius['3xl'] * 2 - theme.border.width.sm * 2);
+    var top, right, bottom, left;
+    if (size === 'default') {
+        top = numToPx(theme.space[100]);
+        bottom = numToPx(theme.space[100]);
+        right = numToPx(theme.space[iconRight ? 300 : 500]);
+        left = numToPx(theme.space[iconLeft ? 300 : 500]);
+    }
+    else {
+        top = numToPx(theme.space[200]);
+        bottom = numToPx(theme.space[200]);
+        right = numToPx(theme.space[iconRight ? 500 : 800]);
+        left = numToPx(theme.space[iconLeft ? 500 : 800]);
+    }
+    var padding = "".concat(top, " ").concat(right, " ").concat(bottom, " ").concat(left);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding: ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      min-height: ", ";\n      border-style: solid;\n      border-width: ", ";\n      border-color: ", ";\n      justify-content: center;\n      align-items: center;\n      flex-direction: row;\n      flex-grow: ", ";\n      min-width: ", ";\n    "], ["\n      padding: ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      min-height: ", ";\n      border-style: solid;\n      border-width: ", ";\n      border-color: ", ";\n      justify-content: center;\n      align-items: center;\n      flex-direction: row;\n      flex-grow: ", ";\n      min-width: ", ";\n    "])), iconOnly ? '0' : padding, backgroundColor, borderRadius, minHeight, numToPx(theme.border.width.md), borderColor, fullWidth ? '1' : '0', iconOnly ? minHeight : 'auto');
+});
+export var StyledButtonIcon = styled(Icon)(function (_a) {
+    var theme = _a.theme, inverted = _a.inverted, variant = _a.variant, iconLeft = _a.iconLeft, iconRight = _a.iconRight, iconOnly = _a.iconOnly;
+    var color = getIconColor(theme, inverted, variant);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    margin-left: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "], ["\n    margin-left: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "])), iconRight && !iconOnly ? numToPx(theme.space[100]) : '0', iconLeft && !iconOnly ? numToPx(theme.space[100]) : '0', color);
+});
+export var StyledButtonText = styled.Text(function (_a) {
+    var theme = _a.theme, smallAndUp = _a.smallAndUp, inverted = _a.inverted, variant = _a.variant, size = _a.size;
+    var fontSize = smallAndUp || size === 'large'
+        ? theme.font.size.lg.mediaQuery.sm
+        : theme.font.size.md.mediaQuery.sm;
+    var color = getTextColor(theme, inverted, variant);
+    return css(templateObject_4 || (templateObject_4 = __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, theme.native.font.family.bold, numToPx(fontSize), numToPx(theme.font.lineHeight.md.mediaQuery.sm));
+});
+// Helper functions
+var getBackgroundColor = function (theme, variant, inverted) {
+    var button = theme.button;
+    if (variant === 'outline' || variant === 'outline-variant') {
+        return 'transparent';
+    }
+    return inverted ? button.surface.color.bgInverted : button[variant].color.bg;
+};
+var getBorderColor = function (theme, variant, inverted) {
+    var button = theme.button;
+    if (variant === 'outline') {
+        return inverted ? button.surface.color.bgVariant : button.surface.color.bg;
+    }
+    if (variant === 'outline-variant') {
+        return button.surface.color.bgVariant;
+    }
+    return inverted ? button.surface.color.bgVariant : button[variant].color.bg;
+};
+var getIconColor = function (theme, inverted, variant) {
+    var button = theme.button;
+    if (variant === 'outline' || variant === 'outline-variant') {
+        return inverted ? button.surface.color.bgInverted : button.surface.color.bg;
+    }
+    return inverted ? button.surface.color.fgInverted : button[variant].color.fg;
+};
+var getTextColor = function (theme, inverted, variant) {
+    var button = theme.button;
+    if (variant === 'outline' || variant === 'outline-variant') {
+        return inverted ? button.surface.color.bgInverted : button.surface.color.bg;
+    }
+    return inverted ? button.surface.color.fgInverted : button[variant].color.fg;
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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