@ovotech/element-native 2.2.0-canary-668a0ee-91 → 2.2.0

package/dist/esm/components/Accordion/Accordion.js

@@ -24,15 +24,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Component, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
-import Animated, { interpolateColor, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
-import { ThemeContext } from '../../styled.native';
-import { pxToNumber } from '../../utils';
+import React, { useCallback, useMemo, useEffect, useState, } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, useDerivedValue, withTiming, runOnUI, interpolateColor, } from 'react-native-reanimated';
+import { theme } from '../../theme';
 import { Heading3 } from '../Heading';
 import { AccordionIcon } from './Icon';
 import { useLayout } from './hooks';
-import { StyledAccordion, StyledAccordionHeader, StyledContainer, } from './styles';
+import { styles } from './styles';
+var _a = theme.colors, canvas = _a.canvas, canvasMuted = _a.canvasMuted, primary = _a.primary, greyDarker = _a.brand.grey.darker;
 export function withAnimated(WrappedComponent) {
     var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     // eslint-disable-next-line react/prefer-stateless-function
@@ -42,21 +42,20 @@ export function withAnimated(WrappedComponent) {
             return _super !== null && _super.apply(this, arguments) || this;
         }
         WithAnimated.prototype.render = function () {
-            return _jsx(WrappedComponent, __assign({}, this.props));
+            return React.createElement(WrappedComponent, __assign({}, this.props));
         };
         WithAnimated.displayName = "WithAnimated(".concat(displayName, ")");
         return WithAnimated;
-    }(Component));
+    }(React.Component));
     return Animated.createAnimatedComponent(WithAnimated);
 }
 export var Accordion = function (_a) {
     var _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, _c = _a.headingComponent, headingComponent = _c === void 0 ? Heading3 : _c, last = _a.last, title = _a.title, children = _a.children, onToggle = _a.onToggle;
-    var _d = useContext(ThemeContext), core = _d.core, semantic = _d.semantic;
     var AnimatedHeading = useMemo(function () { return withAnimated(headingComponent); }, [
         headingComponent,
     ]);
-    var _e = useLayout(0), layout = _e[0], onLayout = _e[1];
-    var _f = useState(expanded), open = _f[0], setOpen = _f[1];
+    var _d = useLayout(0), layout = _d[0], onLayout = _d[1];
+    var _e = useState(expanded), open = _e[0], setOpen = _e[1];
     var handleHeightContent = useMemo(function () { return layout.height || 100; }, [
         layout.height,
     ]);
@@ -91,18 +90,22 @@ export var Accordion = function (_a) {
         }
         setOpen(function (o) { return !o; });
     }, [handleHeightContent, open, size]);
-    var containerAnimatedStyle = useMemo(function () { return [{ overflow: 'hidden' }, style]; }, [style]);
+    var containerAnimatedStyle = useMemo(function () { return [styles.content, style]; }, [style]);
     var headerStyle = useAnimatedStyle(function () { return ({
-        color: interpolateColor(progress.value, [0, 1], [semantic.message.branded, semantic.message.base]),
+        color: interpolateColor(progress.value, [0, 1], [greyDarker, primary]),
     }); });
-    return (_jsxs(StyledAccordion, __assign({ first: first, last: last }, { children: [_jsxs(StyledAccordionHeader, __assign({ accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle" }, { children: [_jsx(AnimatedHeading, __assign({ style: [
-                            headerStyle,
-                            {
-                                paddingTop: pxToNumber(core.space[1]),
-                                paddingRight: pxToNumber(core.space[3]),
-                                marginTop: 0,
-                                marginBottom: 0,
-                                flexShrink: 1,
-                            },
-                        ] }, { children: title })), _jsx(AccordionIcon, { animationTiming: progress })] })), _jsx(Animated.View, __assign({ style: containerAnimatedStyle }, { children: _jsx(StyledContainer, __assign({ onLayout: onLayout }, { children: children })) }))] })));
+    var backgroundStyle = useAnimatedStyle(function () { return ({
+        backgroundColor: interpolateColor(progress.value, [0, 1], [canvas, canvasMuted]),
+    }); });
+    return (React.createElement(Animated.View, { style: [
+            backgroundStyle,
+            styles.accordion,
+            first ? styles.topItem : null,
+            last ? styles.bottomItem : null,
+        ] },
+        React.createElement(TouchableOpacity, { accessibilityState: { expanded: open }, onPress: toggleOpen, style: styles.accordionHeader, testID: "accordionTitle" },
+            React.createElement(AnimatedHeading, { style: [headerStyle, styles.accordionHeaderText] }, title),
+            React.createElement(AccordionIcon, { animationTiming: progress })),
+        React.createElement(Animated.View, { style: containerAnimatedStyle },
+            React.createElement(View, { onLayout: onLayout, style: styles.container }, children))));
 };

package/dist/esm/components/Accordion/Group.js

@@ -1,15 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, cloneElement, isValidElement, } from 'react';
+import React, { Children, cloneElement, isValidElement, } from 'react';
 import { View } from 'react-native';
 export var AccordionGroup = function (_a) {
     var children = _a.children;
     var childCount = Children.count(children);
-    return (_jsx(View, { children: Children.map(children, function (child, i) {
-            return isValidElement(child)
-                ? cloneElement(child, {
-                    first: i === 0,
-                    last: i === childCount - 1,
-                })
-                : child;
-        }) }));
+    return (React.createElement(View, null, Children.map(children, function (child, i) {
+        return isValidElement(child)
+            ? cloneElement(child, {
+                first: i === 0,
+                last: i === childCount - 1,
+            })
+            : child;
+    })));
 };

package/dist/esm/components/Accordion/Icon.js

@@ -1,26 +1,14 @@
-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 { useContext } from 'react';
-import Animated, { interpolateColor, useAnimatedProps, useAnimatedStyle, } from 'react-native-reanimated';
+import React from 'react';
+import Animated, { useAnimatedStyle, interpolateColor, useAnimatedProps, } from 'react-native-reanimated';
 import { Path, Svg } from 'react-native-svg';
-import { ThemeContext } from '../../styled.native';
+import { theme } from '../../theme';
+var _a = theme.colors, canvas = _a.canvas, primary = _a.primary, primaryMuted = _a.primaryMuted;
 var OVO_LOGO_ANGLE = 105;
 var AnimatedPath = Animated.createAnimatedComponent(Path);
 export function AccordionIcon(_a) {
     var animationTiming = _a.animationTiming;
-    var _b = useContext(ThemeContext), core = _b.core, semantic = _b.semantic;
     var outerAnimatedStyles = useAnimatedStyle(function () { return ({
-        backgroundColor: interpolateColor(animationTiming.value, [0, 1], [semantic.surface.cutout, semantic.message.branded]),
+        backgroundColor: interpolateColor(animationTiming.value, [0, 1], [primaryMuted, primary]),
         height: 36 - animationTiming.value * 4,
         margin: 2 * animationTiming.value,
         transform: [{ rotateZ: animationTiming.value * -OVO_LOGO_ANGLE + 'deg' }],
@@ -34,13 +22,17 @@ export function AccordionIcon(_a) {
     var minusAnimatedProps = useAnimatedProps(function () { return ({
         opacity: animationTiming.value,
     }); });
-    return (_jsx(Animated.View, __assign({ style: [
+    return (React.createElement(Animated.View, { style: [
             {
-                backgroundColor: semantic.surface.cutout,
+                backgroundColor: primaryMuted,
                 aspectRatio: 1,
                 alignItems: 'center',
                 justifyContent: 'center',
             },
             outerAnimatedStyles,
-        ] }, { children: _jsx(Animated.View, __assign({ style: innerAnimatedStyles }, { children: _jsxs(Svg, __assign({ width: "16", height: "16", viewBox: "0 0 16 16" }, { children: [_jsx(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: semantic.message.secondary }), _jsx(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: core.color.brand.white })] })) })) })));
+        ] },
+        React.createElement(Animated.View, { style: innerAnimatedStyles },
+            React.createElement(Svg, { width: "16", height: "16", viewBox: "0 0 16 16" },
+                React.createElement(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: primary }),
+                React.createElement(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: canvas })))));
 }

package/dist/esm/components/Accordion/hooks.js

@@ -1,7 +1,7 @@
-import { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 export var useLayout = function (defaultHeight) {
     var _a = useState({ height: defaultHeight || 0, width: 0, measured: false }), layout = _a[0], setLayout = _a[1];
-    var onLayout = useCallback(function (e) {
+    var onLayout = React.useCallback(function (e) {
         var _a = e.nativeEvent.layout, height = _a.height, width = _a.width;
         if (height === layout.height && width === layout.width) {
             return;
@@ -9,7 +9,7 @@ export var useLayout = function (defaultHeight) {
         setLayout({
             height: height,
             width: width,
-            measured: true,
+            measured: true
         });
     }, [layout.height, layout.width]);
     return [layout, onLayout];

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

@@ -1,30 +1,49 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import Animated from 'react-native-reanimated';
-import styled, { css } from '../../styled.native';
-export var StyledAccordion = styled(Animated.View)(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, core = _b.core, first = _a.first, last = _a.last;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n\n    ", "\n\n    ", "\n  "], ["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n\n    ", "\n\n    ", "\n  "])), core.borderWidth.small, semantic.border.differentiated, first
-        ? {
-            borderTopLeftRadius: core.radius.small,
-            borderTopRightRadius: core.radius.small,
-        }
-        : null, last
-        ? {
-            borderBottomLeftRadius: core.radius.small,
-            borderBottomRightRadius: core.radius.small,
-            borderBottomWidth: core.borderWidth.small,
-        }
-        : null);
+import { StyleSheet } from 'react-native';
+import { theme } from '../../theme';
+var greyBase = theme.colors.brand.grey.base;
+var styles = StyleSheet.create({
+    accordion: {
+        width: '100%',
+        borderWidth: parseInt(theme.borderWidths.standard),
+        borderBottomWidth: 0,
+        borderColor: greyBase,
+    },
+    topItem: {
+        borderTopLeftRadius: parseInt(theme.radii.small),
+        borderTopRightRadius: parseInt(theme.radii.small),
+    },
+    bottomItem: {
+        borderBottomLeftRadius: parseInt(theme.radii.small),
+        borderBottomRightRadius: parseInt(theme.radii.small),
+        borderBottomWidth: parseInt(theme.borderWidths.standard),
+    },
+    accordionHeader: {
+        paddingTop: parseInt(theme.space[5]),
+        paddingRight: 18,
+        paddingBottom: 18,
+        paddingLeft: parseInt(theme.space[3]),
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+    },
+    accordionHeaderText: {
+        paddingRight: parseInt(theme.space[3]),
+        marginTop: 0,
+        marginBottom: 0,
+        flexShrink: 1,
+    },
+    content: {
+        overflow: 'hidden',
+    },
+    container: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        paddingTop: 0,
+        paddingRight: parseInt(theme.space[12]),
+        paddingBottom: parseInt(theme.space[6]),
+        paddingLeft: parseInt(theme.space[3]),
+    },
 });
-export var StyledAccordionHeader = styled.TouchableOpacity(function (_a) {
-    var core = _a.theme.core;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-top: ", "\n      padding-left: ", "\n      padding-right: 18px;\n      padding-bottom: 18px;\n      flex-direction: row;\n      align-items: flex-start;\n      justify-content: space-between;\n    "], ["\n      padding-top: ", "\n      padding-left: ", "\n      padding-right: 18px;\n      padding-bottom: 18px;\n      flex-direction: row;\n      align-items: flex-start;\n      justify-content: space-between;\n    "])), core.space[5], core.space[3]);
-});
-export var StyledContainer = styled.View(function (_a) {
-    var core = _a.theme.core;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "])), core.space[12], core.space[6], core.space[3]);
-});
-var templateObject_1, templateObject_2, templateObject_3;
+export { styles };

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

@@ -24,46 +24,28 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
+import { calculateLineHeight } from '../../theme';
 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      background-color: ", ";\n      align-self: flex-start;\n    "], ["\n      padding: 0 ", ";\n      border-radius: 16px;\n      border: ", " solid ", ";\n      background-color: ", ";\n      align-self: flex-start;\n    "])), core.space[2], core.borderWidth.medium, core.color.brand.white, inverted ? message : surface);
+    var badge = _a.theme.badge, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.inverted, inverted = _c === void 0 ? false : _c;
+    // @ts-ignore to support additional palettes.
+    var currentVariant = badge.variants[variant];
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0 ", ";\n    border-radius: ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "], ["\n    padding: 0 ", ";\n    border-radius: ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "])), badge.paddingHorizontal, badge.borderRadius, inverted
+        ? currentVariant.foreground
+        : currentVariant.background);
 });
 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, core.lineHeight.body.small, inverted ? surface : message, core.fontSize.body.small);
+    var badge = _a.theme.badge, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.inverted, inverted = _c === void 0 ? false : _c;
+    // @ts-ignore to support additional palettes.
+    var currentVariant = badge.variants[variant];
+    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  "])), badge.fontFamily, calculateLineHeight(badge.fontSize[1], badge.lineHeight), inverted ? currentVariant.background : currentVariant.foreground, badge.fontSize[1]);
 });
 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, __assign({ variant: variant, inverted: inverted }, { children: children })) })));
+    var children = _a.children, variant = _a.variant, rest = __rest(_a, ["children", "variant"]);
+    var smallAndUp = useBreakpoint().smallAndUp;
+    return (React.createElement(StyledBadge, __assign({}, rest, { variant: variant }),
+        React.createElement(StyledBadgeText, { variant: variant, smallAndUp: smallAndUp }, children)));
 };
 var templateObject_1, templateObject_2;

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

@@ -24,51 +24,55 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { useContext, forwardRef, } from 'react';
 import { useBreakpoint } from '../../hooks';
-import styled, { css } from '../../styled.native';
+import styled, { css, ThemeContext } from '../../styled.native';
+import { calculateLineHeight } from '../../theme';
 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 })));
+    return (React.createElement(StyledCTAWrapper, __assign({ accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest), children));
 };
 var StyledInner = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, component = _b.component, fullWidth = _a.fullWidth, variant = _a.variant;
-    var currentVariant = component.cta[variant];
-    var borderRadius = parseFloat(core.space[11]) / 2 + 'px';
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: ", " ", ";\n    background-color: ", ";\n    border-radius: ", ";\n    min-height: ", ";\n    border: none;\n    justify-content: center;\n    align-items: center;\n    flex-direction: row;\n    flex-grow: 1;\n\n    ", ";\n  "], ["\n    padding: ", " ", ";\n    background-color: ", ";\n    border-radius: ", ";\n    min-height: ", ";\n    border: none;\n    justify-content: center;\n    align-items: center;\n    flex-direction: row;\n    flex-grow: 1;\n\n    ", ";\n  "])), core.space[2], core.space[4], currentVariant.surface, borderRadius, core.space[11], fullWidth === 'never'
+    var cta = _a.theme.cta, fullWidth = _a.fullWidth, variant = _a.variant;
+    // @ts-ignore to support additional palettes.
+    var currentVariant = cta.variants[variant];
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: ", " ", ";\n    border-color: ", ";\n    background-color: ", ";\n    border-width: ", ";\n    border-radius: ", ";\n    min-height: ", ";\n    border-style: solid;\n    justify-content: center;\n    align-items: center;\n    flex-direction: row;\n    flex-grow: 1;\n\n    ", ";\n  "], ["\n    padding: ", " ", ";\n    border-color: ", ";\n    background-color: ", ";\n    border-width: ", ";\n    border-radius: ", ";\n    min-height: ", ";\n    border-style: solid;\n    justify-content: center;\n    align-items: center;\n    flex-direction: row;\n    flex-grow: 1;\n\n    ", ";\n  "])), cta.paddingVertical, cta.paddingHorizontal, currentVariant.border, currentVariant.background, cta.borderWidth, cta.borderRadius, cta.minHeight, fullWidth === 'never'
         ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          flex-grow: 0;\n        "], ["\n          flex-grow: 0;\n        "]))) : '');
 });
 var StyledRightIcon = styled(Icon)(function (_a) {
-    var _b = _a.theme, core = _b.core, component = _b.component, variant = _a.variant;
-    var currentVariant = component.cta[variant];
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      margin-left: ", ";\n      color: ", ";\n    "], ["\n      margin-left: ", ";\n      color: ", ";\n    "])), core.space[1], currentVariant.message);
+    var cta = _a.theme.cta;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-left: ", ";\n  "], ["\n    margin-left: ", ";\n  "])), cta.iconGap);
 });
 var StyledLeftIcon = styled(Icon)(function (_a) {
-    var _b = _a.theme, core = _b.core, component = _b.component, variant = _a.variant;
-    var currentVariant = component.cta[variant];
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin-right: ", ";\n      color: ", ";\n    "], ["\n      margin-right: ", ";\n      color: ", ";\n    "])), core.space[1], currentVariant.message);
+    var cta = _a.theme.cta;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin-right: ", ";\n  "], ["\n    margin-right: ", ";\n  "])), cta.iconGap);
 });
 var StyledCTAButtonText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, component = _b.component, smallAndUp = _a.smallAndUp, variant = _a.variant;
-    var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
-    var currentVariant = component.cta[variant];
-    return css(templateObject_6 || (templateObject_6 = __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  "])), currentVariant.message, core.fontFamily.bodyBold.native, fontSize, core.lineHeight.body.small);
+    var cta = _a.theme.cta, smallAndUp = _a.smallAndUp, variant = _a.variant;
+    var fontSize = smallAndUp ? cta.fontSize[1] : cta.fontSize[0];
+    // @ts-ignore to support additional palettes.
+    var currentVariant = cta.variants[variant];
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-align: left;\n    flex-shrink: 2;\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-align: left;\n    flex-shrink: 2;\n  "])), currentVariant.foreground, cta.fontFamily, fontSize, calculateLineHeight(fontSize, cta.lineHeight));
 });
 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 ? 'small' : _d, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, rest = __rest(_a, ["iconLeft", "iconRight", "children", "fullWidth", "variant"]);
+    var cta = useContext(ThemeContext).cta;
     var smallAndUp = useBreakpoint().smallAndUp;
+    // @ts-ignore to support additional palettes.
+    var currentVariant = cta.variants[variant];
     if (fullWidth === 'small') {
         fullWidth = smallAndUp ? 'never' : 'always';
     }
-    return (_jsx(CTAButtonWrapper, __assign({}, rest, { children: _jsxs(StyledInner, __assign({ fullWidth: fullWidth, variant: variant }, { children: [iconLeft !== 'off' ? (_jsx(StyledLeftIcon, { name: iconLeft, size: 16, variant: variant })) : null, _jsx(StyledCTAButtonText, __assign({ smallAndUp: smallAndUp, variant: variant }, { children: children })), iconRight !== 'off' ? (_jsx(StyledRightIcon, { name: iconRight, size: 16, variant: variant })) : null] })) })));
+    return (React.createElement(CTAButtonWrapper, __assign({}, rest),
+        React.createElement(StyledInner, { fullWidth: fullWidth, variant: variant },
+            iconLeft !== 'off' ? (React.createElement(StyledLeftIcon, { name: iconLeft, size: 16, color: currentVariant.foreground })) : null,
+            React.createElement(StyledCTAButtonText, { smallAndUp: smallAndUp, variant: variant }, children),
+            iconRight !== 'off' ? (React.createElement(StyledRightIcon, { name: iconRight, size: 16, color: currentVariant.foreground })) : 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 }))); });
+var PrimaryCTAButton = forwardRef(function (props, ref) { return (React.createElement(CTAButton, __assign({ variant: "primary" }, props, { ref: ref }))); });
+var SecondaryCTAButton = forwardRef(function (props, ref) { return (React.createElement(CTAButton, __assign({ variant: "secondary" }, props, { ref: ref }))); });
+var DestructiveCTAButton = forwardRef(function (props, ref) { return (React.createElement(CTAButton, __assign({ variant: "destructive" }, props, { ref: ref }))); });
 export { CTAButton, PrimaryCTAButton, SecondaryCTAButton, DestructiveCTAButton, };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -9,10 +9,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { 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))); });
+var CTALink = forwardRef(function (props, ref) { return React.createElement(CTAButton, __assign({}, props, { ref: ref })); });
+var PrimaryCTALink = forwardRef(function (props, ref) { return React.createElement(CTALink, __assign({ variant: "primary", ref: ref }, props)); });
+var SecondaryCTALink = forwardRef(function (props, ref) { return (React.createElement(CTALink, __assign({ variant: "secondary", ref: ref }, props))); });
 export { CTALink, PrimaryCTALink, SecondaryCTALink };

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

@@ -1,7 +1,27 @@
+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 React from 'react';
+import { useBreakpoint } from '../../hooks';
 import styled from '../../styled.native';
-export var Card = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.inline, inline = _c === void 0 ? false : _c;
-    return "\n      background: ".concat(semantic.surface.elevated, ";\n      border: ").concat(inline
-        ? "".concat(core.borderWidth.small, " solid ").concat(semantic.border.differentiated)
-        : 'none', ";\n      padding: ").concat(core.space[4], ";\n      border-radius: ").concat(core.radius.small, ";\n    ");
+var StyledCard = styled.View(function (_a) {
+    var _b = _a.theme, card = _b.card, radii = _b.radii, smallAndUp = _a.smallAndUp, _c = _a.inline, inline = _c === void 0 ? false : _c;
+    var padding = smallAndUp
+        ? "".concat(card.padding[2], " ").concat(card.padding[1])
+        : "".concat(card.padding[1], " ").concat(card.padding[0]);
+    var borderRadius = smallAndUp ? radii.medium : radii.small;
+    return "\n      background: ".concat(card.background, ";\n      border: ").concat(inline ? "".concat(card.borderWidth, " solid ").concat(card.borderColor) : 'none', ";\n      padding: ").concat(padding, ";\n      border-radius: ").concat(borderRadius, ";\n    ");
 });
+var Card = function (props) {
+    var breakpoints = useBreakpoint();
+    return React.createElement(StyledCard, __assign({}, breakpoints, props));
+};
+export { Card };

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

@@ -24,10 +24,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef, useContext, } from 'react';
 import { TouchableOpacity, View, } from 'react-native';
-import styled from '../../styled.native';
+import styled, { ThemeContext } from '../../styled.native';
 import { pxToNumber } from '../../utils';
 import { ErrorText } from '../ErrorText';
 import { FormGroup } from '../FormGroup';
@@ -42,33 +41,53 @@ var StyledCheckboxInputWrapper = styled.View(function (_a) {
     return "\n      width: ".concat(checkboxSize + gap, "px;\n      height: ").concat(checkbox.touchSize, ";\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(core.space[6], ";\n      height: ").concat(core.space[6], ";\n      border: ").concat(core.borderWidth.small, " solid;\n      margin-top: 10px;\n      border-radius: ").concat(core.radius.small, ";\n      border-color: ").concat(invalid
-        ? semantic.error.border
+    var checkbox = _a.theme.checkbox, invalid = _a.invalid, checked = _a.checked;
+    var touchSize = pxToNumber(checkbox.touchSize);
+    var checkboxSize = pxToNumber(checkbox.size);
+    var checkboxDistance = (touchSize - checkboxSize) / 2;
+    return "\n      width: ".concat(checkbox.size, ";\n      height: ").concat(checkbox.size, ";\n      border: ").concat(checkbox.borderWidth, " solid;\n      margin-top: ").concat(checkboxDistance, "px;\n      border-radius: ").concat(checkbox.borderRadius, ";\n      border-color: ").concat(invalid
+        ? checkbox.errorColor
         : checked
-            ? core.color.blue.dark
-            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
+            ? checkbox.checkColor
+            : checkbox.borderColor, ";\n      background: ").concat(checked ? checkbox.checkedBackground : checkbox.background, ";\n    ");
 });
 var CheckboxCheck = function (props) {
-    return _jsx(Icon, __assign({ name: "check", size: 16 }, props));
+    var checkbox = useContext(ThemeContext).checkbox;
+    return (React.createElement(Icon, __assign({ name: "check", size: pxToNumber(checkbox.checkSize), color: checkbox.checkColor }, 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 checkbox = _a.theme.checkbox, checked = _a.checked;
+    var checkboxSize = pxToNumber(checkbox.size);
+    var checkSize = pxToNumber(checkbox.checkSize);
+    var borderWidth = pxToNumber(checkbox.borderWidth);
+    var checkDistance = (checkboxSize - checkSize) / 2 - borderWidth;
+    return "\n      margin-top: ".concat(checkDistance, "px;\n      margin-left: ").concat(checkDistance, "px;\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, __assign({ invalid: invalid, checked: checked, testID: testID }, { children: _jsx(StyledCheckboxInputCheck, { checked: checked }) })) })));
+    return (React.createElement(StyledCheckboxInputWrapper, __assign({}, rest),
+        React.createElement(StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID },
+            React.createElement(StyledCheckboxInputCheck, { checked: checked }))));
 };
 var CheckLabelText = styled(LabelText)(function (_a) {
-    var core = _a.theme.core;
-    return "\n    padding-top: ".concat(core.space[3], ";\n  ");
+    var checkbox = _a.theme.checkbox;
+    return "\n    padding-top: ".concat(checkbox.paddingTop, ";\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, __assign({ error: hasError }, { children: _jsxs(Stack, __assign({ 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, __assign({ style: { flexShrink: 1 } }, { children: [_jsxs(CheckLabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null] }))] }) }))] })) })));
+    return (React.createElement(FormGroup, { error: hasError },
+        React.createElement(Stack, { spaceBetween: 1 },
+            error ? React.createElement(ErrorText, null, error) : null,
+            React.createElement(TouchableOpacity, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest),
+                React.createElement(StyledWrapper, null,
+                    React.createElement(Input, { checked: checked, invalid: hasError || invalid, testID: testID }),
+                    React.createElement(View, { style: { flexShrink: 1 } },
+                        React.createElement(CheckLabelText, null,
+                            label,
+                            optional ? ' (optional)' : null),
+                        hint ? React.createElement(HintText, null, hint) : null))))));
 });
 export { Checkbox };
 var templateObject_1;

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

@@ -20,8 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Children, cloneElement } from 'react';
+import React, { Children, cloneElement, } from 'react';
 import { View } from 'react-native';
 import { ErrorText } from '../ErrorText';
 import { FormGroup } from '../FormGroup';
@@ -31,10 +30,18 @@ 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;
-    return (_jsx(FormGroup, __assign({}, rest, { error: hasError }, { children: _jsxs(Stack, __assign({ 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(children, function (child) {
-                        return cloneElement(child, {
-                            invalid: hasError ? true : child.props.invalid,
-                        });
-                    }) })] })) })));
+    return (React.createElement(FormGroup, __assign({}, rest, { error: hasError }),
+        React.createElement(Stack, { spaceBetween: 1 },
+            React.createElement(View, null,
+                React.createElement(LabelText, null,
+                    label,
+                    optional ? ' (optional)' : null),
+                hint ? React.createElement(HintText, null, hint) : null,
+                error ? React.createElement(ErrorText, null, error) : null),
+            React.createElement(View, null, Children.map(children, function (child) {
+                return cloneElement(child, {
+                    invalid: hasError ? true : child.props.invalid,
+                });
+            })))));
 };
 export { CheckboxField };