@ovotech/element-native 2.2.0 → 3.0.0-canary-edaf96f-93

package/dist/components/TextLink/TextLink.js

@@ -50,14 +50,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextLink = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_native_1 = require("react-native");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils/utils");
 var Icon_1 = require("../Icon");
 var StyledText = styled_native_1.default.Text(function (_a) {
-    var textLink = _a.theme.textLink;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "], ["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "])), textLink.fontFamily, textLink.color, textLink.color);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "], ["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "])), core.fontFamily.body.native, semantic.message.link, semantic.message.link);
 });
 var TextLink = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, _b = _a.opensInNewWindow, opensInNewWindow = _b === void 0 ? false : _b, accessibilityLabel = _a.accessibilityLabel, rest = __rest(_a, ["children", "opensInNewWindow", "accessibilityLabel"]);
@@ -65,11 +66,7 @@ var TextLink = (0, react_1.forwardRef)(function (_a, ref) {
     var updatedAccessibilityLabel = opensInNewWindow
         ? "".concat(accessibilityLabel ? accessibilityLabel : (0, utils_1.getText)(children), " (opens in new window)")
         : accessibilityLabel;
-    return (react_1.default.createElement(react_native_1.Text, __assign({}, rest, { accessibilityLabel: updatedAccessibilityLabel, ref: ref }),
-        react_1.default.createElement(StyledText, null, children),
-        opensInNewWindow && (react_1.default.createElement(react_1.default.Fragment, null,
-            "\u00A0",
-            react_1.default.createElement(Icon_1.Icon, { color: textLink.color, size: 12, name: "new-window" })))));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Text, __assign({}, rest, { accessibilityLabel: updatedAccessibilityLabel, ref: ref }, { children: [(0, jsx_runtime_1.jsx)(StyledText, { children: children }), opensInNewWindow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: textLink.color, size: 12, name: "new-window" })] }))] })));
 });
 exports.TextLink = TextLink;
 var templateObject_1;

package/dist/components/index.d.ts

@@ -27,3 +27,4 @@ export * from './TextField';
 export * from './TextLink';
 export * from './DataTable';
 export * from './SkeletonLoading';
+export * from './SelectField';

package/dist/components/index.js

@@ -43,3 +43,4 @@ __exportStar(require("./TextField"), exports);
 __exportStar(require("./TextLink"), exports);
 __exportStar(require("./DataTable"), exports);
 __exportStar(require("./SkeletonLoading"), exports);
+__exportStar(require("./SelectField"), exports);

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

@@ -24,15 +24,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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 { 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 { Heading4 } from '../Heading';
 import { AccordionIcon } from './Icon';
 import { useLayout } from './hooks';
-import { styles } from './styles';
-var _a = theme.colors, canvas = _a.canvas, canvasMuted = _a.canvasMuted, primary = _a.primary, greyDarker = _a.brand.grey.darker;
+import { StyledAccordion, StyledAccordionHeader, StyledContainer, } from './styles';
 export function withAnimated(WrappedComponent) {
     var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     // eslint-disable-next-line react/prefer-stateless-function
@@ -42,20 +42,21 @@ export function withAnimated(WrappedComponent) {
             return _super !== null && _super.apply(this, arguments) || this;
         }
         WithAnimated.prototype.render = function () {
-            return React.createElement(WrappedComponent, __assign({}, this.props));
+            return _jsx(WrappedComponent, __assign({}, this.props));
         };
         WithAnimated.displayName = "WithAnimated(".concat(displayName, ")");
         return WithAnimated;
-    }(React.Component));
+    }(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 _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, _c = _a.headingComponent, headingComponent = _c === void 0 ? Heading4 : _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 _d = useLayout(0), layout = _d[0], onLayout = _d[1];
-    var _e = useState(expanded), open = _e[0], setOpen = _e[1];
+    var _e = useLayout(0), layout = _e[0], onLayout = _e[1];
+    var _f = useState(expanded), open = _f[0], setOpen = _f[1];
     var handleHeightContent = useMemo(function () { return layout.height || 100; }, [
         layout.height,
     ]);
@@ -90,22 +91,18 @@ export var Accordion = function (_a) {
         }
         setOpen(function (o) { return !o; });
     }, [handleHeightContent, open, size]);
-    var containerAnimatedStyle = useMemo(function () { return [styles.content, style]; }, [style]);
+    var containerAnimatedStyle = useMemo(function () { return [{ overflow: 'hidden' }, style]; }, [style]);
     var headerStyle = useAnimatedStyle(function () { return ({
-        color: interpolateColor(progress.value, [0, 1], [greyDarker, primary]),
+        color: interpolateColor(progress.value, [0, 1], [semantic.message.branded, semantic.message.base]),
     }); });
-    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))));
+    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 })) }))] })));
 };

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

@@ -1,14 +1,15 @@
-import React, { Children, cloneElement, isValidElement, } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { 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 (React.createElement(View, null, Children.map(children, function (child, i) {
-        return isValidElement(child)
-            ? cloneElement(child, {
-                first: i === 0,
-                last: i === childCount - 1,
-            })
-            : child;
-    })));
+    return (_jsx(View, { children: 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,14 +1,26 @@
-import React from 'react';
-import Animated, { useAnimatedStyle, interpolateColor, useAnimatedProps, } from 'react-native-reanimated';
+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 { Path, Svg } from 'react-native-svg';
-import { theme } from '../../theme';
-var _a = theme.colors, canvas = _a.canvas, primary = _a.primary, primaryMuted = _a.primaryMuted;
+import { ThemeContext } from '../../styled.native';
 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], [primaryMuted, primary]),
+        backgroundColor: interpolateColor(animationTiming.value, [0, 1], [semantic.surface.cutout, semantic.message.branded]),
         height: 36 - animationTiming.value * 4,
         margin: 2 * animationTiming.value,
         transform: [{ rotateZ: animationTiming.value * -OVO_LOGO_ANGLE + 'deg' }],
@@ -22,17 +34,13 @@ export function AccordionIcon(_a) {
     var minusAnimatedProps = useAnimatedProps(function () { return ({
         opacity: animationTiming.value,
     }); });
-    return (React.createElement(Animated.View, { style: [
+    return (_jsx(Animated.View, __assign({ style: [
             {
-                backgroundColor: primaryMuted,
+                backgroundColor: semantic.surface.cutout,
                 aspectRatio: 1,
                 alignItems: 'center',
                 justifyContent: 'center',
             },
             outerAnimatedStyles,
-        ] },
-        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 })))));
+        ] }, { 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 })] })) })) })));
 }

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

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import { useCallback, 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 = React.useCallback(function (e) {
+    var onLayout = 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,49 +1,30 @@
-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]),
-    },
+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);
 });
-export { styles };
+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;

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

@@ -24,28 +24,46 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
-import { useBreakpoint } from '../../hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from '../../styled.native';
-import { calculateLineHeight } from '../../theme';
 var StyledBadge = styled.View(function (_a) {
-    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 _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 StyledBadgeText = styled.Text(function (_a) {
-    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]);
+    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);
 });
 export var Badge = function (_a) {
-    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 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 templateObject_1, templateObject_2;

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

@@ -24,55 +24,51 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useContext, forwardRef, } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { useBreakpoint } from '../../hooks';
-import styled, { css, ThemeContext } from '../../styled.native';
-import { calculateLineHeight } from '../../theme';
+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 (React.createElement(StyledCTAWrapper, __assign({ accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest), children));
+    return (_jsx(StyledCTAWrapper, __assign({ accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest, { children: children })));
 };
 var StyledInner = styled.View(function (_a) {
-    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'
+    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'
         ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          flex-grow: 0;\n        "], ["\n          flex-grow: 0;\n        "]))) : '');
 });
 var StyledRightIcon = styled(Icon)(function (_a) {
-    var cta = _a.theme.cta;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-left: ", ";\n  "], ["\n    margin-left: ", ";\n  "])), cta.iconGap);
+    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 StyledLeftIcon = styled(Icon)(function (_a) {
-    var cta = _a.theme.cta;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin-right: ", ";\n  "], ["\n    margin-right: ", ";\n  "])), cta.iconGap);
+    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 StyledCTAButtonText = styled.Text(function (_a) {
-    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 _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 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 (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)));
+    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] })) })));
 };
-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 }))); });
+var PrimaryCTAButton = forwardRef(function (props, ref) { return (_jsx(CTAButton, __assign({ variant: "primary" }, props, { ref: ref }))); });
+var SecondaryCTAButton = forwardRef(function (props, ref) { return (_jsx(CTAButton, __assign({ variant: "secondary" }, props, { ref: ref }))); });
+var DestructiveCTAButton = forwardRef(function (props, ref) { return (_jsx(CTAButton, __assign({ variant: "destructive" }, props, { ref: ref }))); });
 export { CTAButton, PrimaryCTAButton, SecondaryCTAButton, DestructiveCTAButton, };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

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

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

@@ -1,27 +1,7 @@
-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';
-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    ");
+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 Card = function (props) {
-    var breakpoints = useBreakpoint();
-    return React.createElement(StyledCard, __assign({}, breakpoints, props));
-};
-export { Card };

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

@@ -24,9 +24,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, useContext, } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { TouchableOpacity, View, } from 'react-native';
-import styled, { ThemeContext } from '../../styled.native';
+import styled from '../../styled.native';
 import { pxToNumber } from '../../utils';
 import { ErrorText } from '../ErrorText';
 import { FormGroup } from '../FormGroup';
@@ -41,53 +42,33 @@ 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 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
+    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
         : checked
-            ? checkbox.checkColor
-            : checkbox.borderColor, ";\n      background: ").concat(checked ? checkbox.checkedBackground : checkbox.background, ";\n    ");
+            ? core.color.blue.dark
+            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
 });
 var CheckboxCheck = function (props) {
-    var checkbox = useContext(ThemeContext).checkbox;
-    return (React.createElement(Icon, __assign({ name: "check", size: pxToNumber(checkbox.checkSize), color: checkbox.checkColor }, props)));
+    return _jsx(Icon, __assign({ name: "check", size: 16 }, props));
 };
 var StyledCheckboxInputCheck = styled(CheckboxCheck)(function (_a) {
-    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 core = _a.theme.core, checked = _a.checked;
+    return "\n      margin-top: 3px;\n      margin-left: 3px;\n      color: ".concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
 });
 var Input = function (_a) {
     var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
-    return (React.createElement(StyledCheckboxInputWrapper, __assign({}, rest),
-        React.createElement(StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID },
-            React.createElement(StyledCheckboxInputCheck, { checked: checked }))));
+    return (_jsx(StyledCheckboxInputWrapper, __assign({}, rest, { children: _jsx(StyledCheckboxInput, __assign({ invalid: invalid, checked: checked, testID: testID }, { children: _jsx(StyledCheckboxInputCheck, { checked: checked }) })) })));
 };
 var CheckLabelText = styled(LabelText)(function (_a) {
-    var checkbox = _a.theme.checkbox;
-    return "\n    padding-top: ".concat(checkbox.paddingTop, ";\n  ");
+    var core = _a.theme.core;
+    return "\n    padding-top: ".concat(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 (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))))));
+    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] }))] }) }))] })) })));
 });
 export { Checkbox };
 var templateObject_1;