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

package/dist/components/Accordion/styles.js

@@ -1,59 +1,52 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledContainer = exports.StyledAccordionHeader = exports.StyledAccordion = void 0;
-var react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
-var styled_native_1 = __importStar(require("../../styled.native"));
-exports.StyledAccordion = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, core = _b.core, first = _a.first, last = _a.last;
-    return (0, styled_native_1.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);
-});
-exports.StyledAccordionHeader = styled_native_1.default.TouchableOpacity(function (_a) {
-    var core = _a.theme.core;
-    return (0, styled_native_1.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]);
-});
-exports.StyledContainer = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core;
-    return (0, styled_native_1.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]);
+exports.styles = void 0;
+var react_native_1 = require("react-native");
+var theme_1 = require("../../theme");
+var greyBase = theme_1.theme.colors.brand.grey.base;
+var styles = react_native_1.StyleSheet.create({
+    accordion: {
+        width: '100%',
+        borderWidth: parseInt(theme_1.theme.borderWidths.standard),
+        borderBottomWidth: 0,
+        borderColor: greyBase,
+    },
+    topItem: {
+        borderTopLeftRadius: parseInt(theme_1.theme.radii.small),
+        borderTopRightRadius: parseInt(theme_1.theme.radii.small),
+    },
+    bottomItem: {
+        borderBottomLeftRadius: parseInt(theme_1.theme.radii.small),
+        borderBottomRightRadius: parseInt(theme_1.theme.radii.small),
+        borderBottomWidth: parseInt(theme_1.theme.borderWidths.standard),
+    },
+    accordionHeader: {
+        paddingTop: parseInt(theme_1.theme.space[5]),
+        paddingRight: 18,
+        paddingBottom: 18,
+        paddingLeft: parseInt(theme_1.theme.space[3]),
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+    },
+    accordionHeaderText: {
+        paddingRight: parseInt(theme_1.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_1.theme.space[12]),
+        paddingBottom: parseInt(theme_1.theme.space[6]),
+        paddingLeft: parseInt(theme_1.theme.space[3]),
+    },
 });
-var templateObject_1, templateObject_2, templateObject_3;
+exports.styles = styles;

package/dist/components/Badge/Badge.d.ts

@@ -1,17 +1,19 @@
-import { Theme, BadgeColors } from '@ovotech/element-core';
 import { ComponentProps } from 'react';
-export declare type SemanticVariants = Exclude<keyof Theme['semantic'], 'surface' | 'message' | 'border' | 'focus' | 'inverted' | 'data'>;
-export declare type BadgeVariantName = BadgeColors | SemanticVariants;
+export declare type BadgeVariantName = 'default' | 'error' | 'success' | 'warning' | 'info';
+export declare type BadgeVariant = {
+    background: string;
+    foreground: string;
+};
 declare const StyledBadge: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
-        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
+        opacity: Record<"transparent" | "translucent" | "solid", string | number>;
+        color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
             lightest: string;
             lighter: string;
             light: string;
@@ -27,53 +29,71 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
             web: string;
         }>;
         fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
             small: string | number;
             large: string | number;
         }>;
-        lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
             small: string | number;
             large: string | number;
         }>;
-        letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
         message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
-        focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"border" | "surface", string> & {
+        focus: Record<"outline" | "surface", string>;
+        inverted: Record<"surface" | "border", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
         success: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         warning: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         error: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         info: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
+        };
+        electricity: {
+            border: string;
+            surface: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
+        };
+        gas: {
+            border: string;
+            surface: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
-        data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
     };
     component: {
         heading1: {
@@ -204,39 +224,11 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
                 backgroundFocused: string;
             };
         };
-        badge: {
-            variants: {
-                red: {
-                    foreground: string;
-                    background: string;
-                };
-                orange: {
-                    foreground: string;
-                    background: string;
-                };
-                yellow: {
-                    foreground: string;
-                    background: string;
-                };
-                green: {
-                    foreground: string;
-                    background: string;
-                };
-                blue: {
-                    foreground: string;
-                    background: string;
-                };
-            };
-        };
     };
 }, {
-    customVariant?: {
-        backgroundColor: string;
-        foregroundColor: string;
-    } | undefined;
+    variant?: BadgeVariantName | (string & {}) | undefined;
     inverted?: boolean | undefined;
-    variant?: BadgeVariantName | undefined;
 }, never>;
 declare type BadgeProps = ComponentProps<typeof StyledBadge>;
-export declare const Badge: ({ children, variant, inverted, ...rest }: BadgeProps) => JSX.Element;
+export declare const Badge: ({ children, variant, ...rest }: BadgeProps) => JSX.Element;
 export {};

package/dist/components/Badge/Badge.js

@@ -48,49 +48,34 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
+var theme_1 = require("../../theme");
 var StyledBadge = styled_native_1.default.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 (0, styled_native_1.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 (0, styled_native_1.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_native_1.default.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 (0, styled_native_1.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 (0, styled_native_1.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, (0, theme_1.calculateLineHeight)(badge.fontSize[1], badge.lineHeight), inverted ? currentVariant.background : currentVariant.foreground, badge.fontSize[1]);
 });
 var Badge = function (_a) {
-    var children = _a.children, variant = _a.variant, inverted = _a.inverted, rest = __rest(_a, ["children", "variant", "inverted"]);
-    return ((0, jsx_runtime_1.jsx)(StyledBadge, __assign({ variant: variant, inverted: inverted }, rest, { children: (0, jsx_runtime_1.jsx)(StyledBadgeText, __assign({ variant: variant, inverted: inverted }, { children: children })) })));
+    var children = _a.children, variant = _a.variant, rest = __rest(_a, ["children", "variant"]);
+    var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
+    return (react_1.default.createElement(StyledBadge, __assign({}, rest, { variant: variant }),
+        react_1.default.createElement(StyledBadgeText, { variant: variant, smallAndUp: smallAndUp }, children)));
 };
 exports.Badge = Badge;
 var templateObject_1, templateObject_2;

package/dist/components/CTAButton/CTAButton.d.ts

@@ -1,19 +1,24 @@
-import { ComponentProps, PropsWithChildren, Ref } from 'react';
-import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+import React, { PropsWithChildren, ComponentProps, Ref } from 'react';
+import { TouchableOpacityProps, TouchableOpacity } from 'react-native';
 import { IconName } from '../../providers/types';
-export declare type CTAVariantName = 'primary' | 'secondary' | 'destructive';
+export declare type CTAVariantName = 'primary' | 'secondary' | 'destructive' | 'missionPrimary' | 'missionSecondary';
+export declare type CTAVariant = {
+    background: string;
+    foreground: string;
+    border: string;
+};
 declare type CTAButtonProps = PropsWithChildren<TouchableOpacityProps & {
     iconLeft?: IconName | 'off';
     iconRight?: IconName | 'off';
     fullWidth?: 'always' | 'never' | 'small';
-    variant?: CTAVariantName;
+    variant?: CTAVariantName | (string & {});
     ref?: Ref<TouchableOpacity>;
 }>;
 declare const CTAButton: ({ iconLeft, iconRight, children, fullWidth, variant, ...rest }: CTAButtonProps) => JSX.Element;
 declare type CTAProps = Omit<ComponentProps<typeof CTAButton>, 'variant' | 'ref'> & {
     ref: Ref<TouchableOpacity>;
 };
-declare const PrimaryCTAButton: import("react").ForwardRefExoticComponent<Pick<CTAProps, keyof TouchableOpacityProps | "fullWidth" | "iconLeft" | "iconRight"> & import("react").RefAttributes<TouchableOpacity>>;
-declare const SecondaryCTAButton: import("react").ForwardRefExoticComponent<Pick<CTAProps, keyof TouchableOpacityProps | "fullWidth" | "iconLeft" | "iconRight"> & import("react").RefAttributes<TouchableOpacity>>;
-declare const DestructiveCTAButton: import("react").ForwardRefExoticComponent<Pick<CTAProps, keyof TouchableOpacityProps | "fullWidth" | "iconLeft" | "iconRight"> & import("react").RefAttributes<TouchableOpacity>>;
+declare const PrimaryCTAButton: React.ForwardRefExoticComponent<Pick<CTAProps, "fullWidth" | "iconLeft" | "iconRight" | keyof TouchableOpacityProps> & React.RefAttributes<TouchableOpacity>>;
+declare const SecondaryCTAButton: React.ForwardRefExoticComponent<Pick<CTAProps, "fullWidth" | "iconLeft" | "iconRight" | keyof TouchableOpacityProps> & React.RefAttributes<TouchableOpacity>>;
+declare const DestructiveCTAButton: React.ForwardRefExoticComponent<Pick<CTAProps, "fullWidth" | "iconLeft" | "iconRight" | keyof TouchableOpacityProps> & React.RefAttributes<TouchableOpacity>>;
 export { CTAButton, PrimaryCTAButton, SecondaryCTAButton, DestructiveCTAButton, };

package/dist/components/CTAButton/CTAButton.js

@@ -50,54 +50,58 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DestructiveCTAButton = exports.SecondaryCTAButton = exports.PrimaryCTAButton = exports.CTAButton = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
+var theme_1 = require("../../theme");
 var Icon_1 = require("../Icon/Icon");
 var StyledCTAWrapper = styled_native_1.default.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 ((0, jsx_runtime_1.jsx)(StyledCTAWrapper, __assign({ accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest, { children: children })));
+    return (react_1.default.createElement(StyledCTAWrapper, __assign({ accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest), children));
 };
 var StyledInner = styled_native_1.default.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 (0, styled_native_1.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 (0, styled_native_1.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'
         ? (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          flex-grow: 0;\n        "], ["\n          flex-grow: 0;\n        "]))) : '');
 });
 var StyledRightIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
-    var _b = _a.theme, core = _b.core, component = _b.component, variant = _a.variant;
-    var currentVariant = component.cta[variant];
-    return (0, styled_native_1.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 (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-left: ", ";\n  "], ["\n    margin-left: ", ";\n  "])), cta.iconGap);
 });
 var StyledLeftIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
-    var _b = _a.theme, core = _b.core, component = _b.component, variant = _a.variant;
-    var currentVariant = component.cta[variant];
-    return (0, styled_native_1.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 (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin-right: ", ";\n  "], ["\n    margin-right: ", ";\n  "])), cta.iconGap);
 });
 var StyledCTAButtonText = styled_native_1.default.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 (0, styled_native_1.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 (0, styled_native_1.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, (0, theme_1.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 = (0, react_1.useContext)(styled_native_1.ThemeContext).cta;
     var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
+    // @ts-ignore to support additional palettes.
+    var currentVariant = cta.variants[variant];
     if (fullWidth === 'small') {
         fullWidth = smallAndUp ? 'never' : 'always';
     }
-    return ((0, jsx_runtime_1.jsx)(CTAButtonWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsxs)(StyledInner, __assign({ fullWidth: fullWidth, variant: variant }, { children: [iconLeft !== 'off' ? ((0, jsx_runtime_1.jsx)(StyledLeftIcon, { name: iconLeft, size: 16, variant: variant })) : null, (0, jsx_runtime_1.jsx)(StyledCTAButtonText, __assign({ smallAndUp: smallAndUp, variant: variant }, { children: children })), iconRight !== 'off' ? ((0, jsx_runtime_1.jsx)(StyledRightIcon, { name: iconRight, size: 16, variant: variant })) : null] })) })));
+    return (react_1.default.createElement(CTAButtonWrapper, __assign({}, rest),
+        react_1.default.createElement(StyledInner, { fullWidth: fullWidth, variant: variant },
+            iconLeft !== 'off' ? (react_1.default.createElement(StyledLeftIcon, { name: iconLeft, size: 16, color: currentVariant.foreground })) : null,
+            react_1.default.createElement(StyledCTAButtonText, { smallAndUp: smallAndUp, variant: variant }, children),
+            iconRight !== 'off' ? (react_1.default.createElement(StyledRightIcon, { name: iconRight, size: 16, color: currentVariant.foreground })) : null)));
 };
 exports.CTAButton = CTAButton;
-var PrimaryCTAButton = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(CTAButton, __assign({ variant: "primary" }, props, { ref: ref }))); });
+var PrimaryCTAButton = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(CTAButton, __assign({ variant: "primary" }, props, { ref: ref }))); });
 exports.PrimaryCTAButton = PrimaryCTAButton;
-var SecondaryCTAButton = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(CTAButton, __assign({ variant: "secondary" }, props, { ref: ref }))); });
+var SecondaryCTAButton = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(CTAButton, __assign({ variant: "secondary" }, props, { ref: ref }))); });
 exports.SecondaryCTAButton = SecondaryCTAButton;
-var DestructiveCTAButton = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(CTAButton, __assign({ variant: "destructive" }, props, { ref: ref }))); });
+var DestructiveCTAButton = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(CTAButton, __assign({ variant: "destructive" }, props, { ref: ref }))); });
 exports.DestructiveCTAButton = DestructiveCTAButton;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/CTALink/CTALink.d.ts

@@ -1,11 +1,11 @@
-import { ComponentProps, Ref } from 'react';
+import React, { ComponentProps, Ref } from 'react';
 import { TouchableOpacity } from 'react-native';
 import { CTAButton } from '../CTAButton';
 declare type CTALinkProps = Omit<ComponentProps<typeof CTAButton>, 'ref'> & {
     ref: Ref<TouchableOpacity>;
 };
-declare const CTALink: import("react").ForwardRefExoticComponent<Pick<CTALinkProps, "variant" | keyof import("react-native/types").TouchableOpacityProps | "fullWidth" | "iconLeft" | "iconRight"> & import("react").RefAttributes<TouchableOpacity>>;
+declare const CTALink: React.ForwardRefExoticComponent<Pick<CTALinkProps, "variant" | "fullWidth" | "iconLeft" | "iconRight" | keyof import("react-native/types").TouchableOpacityProps> & React.RefAttributes<TouchableOpacity>>;
 declare type CTAProps = Omit<ComponentProps<typeof CTALink>, 'variant'>;
-declare const PrimaryCTALink: import("react").ForwardRefExoticComponent<Pick<CTAProps, "key" | keyof import("react-native/types").TouchableOpacityProps | "fullWidth" | "iconLeft" | "iconRight"> & import("react").RefAttributes<TouchableOpacity>>;
-declare const SecondaryCTALink: import("react").ForwardRefExoticComponent<Pick<CTAProps, "key" | keyof import("react-native/types").TouchableOpacityProps | "fullWidth" | "iconLeft" | "iconRight"> & import("react").RefAttributes<TouchableOpacity>>;
+declare const PrimaryCTALink: React.ForwardRefExoticComponent<Pick<CTAProps, "fullWidth" | "key" | "iconLeft" | "iconRight" | keyof import("react-native/types").TouchableOpacityProps> & React.RefAttributes<TouchableOpacity>>;
+declare const SecondaryCTALink: React.ForwardRefExoticComponent<Pick<CTAProps, "fullWidth" | "key" | "iconLeft" | "iconRight" | keyof import("react-native/types").TouchableOpacityProps> & React.RefAttributes<TouchableOpacity>>;
 export { CTALink, PrimaryCTALink, SecondaryCTALink };

package/dist/components/CTALink/CTALink.js

@@ -10,14 +10,36 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SecondaryCTALink = exports.PrimaryCTALink = exports.CTALink = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var CTAButton_1 = require("../CTAButton");
-var CTALink = (0, react_1.forwardRef)(function (props, ref) { return (0, jsx_runtime_1.jsx)(CTAButton_1.CTAButton, __assign({}, props, { ref: ref })); });
+var CTALink = (0, react_1.forwardRef)(function (props, ref) { return react_1.default.createElement(CTAButton_1.CTAButton, __assign({}, props, { ref: ref })); });
 exports.CTALink = CTALink;
-var PrimaryCTALink = (0, react_1.forwardRef)(function (props, ref) { return (0, jsx_runtime_1.jsx)(CTALink, __assign({ variant: "primary", ref: ref }, props)); });
+var PrimaryCTALink = (0, react_1.forwardRef)(function (props, ref) { return react_1.default.createElement(CTALink, __assign({ variant: "primary", ref: ref }, props)); });
 exports.PrimaryCTALink = PrimaryCTALink;
-var SecondaryCTALink = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(CTALink, __assign({ variant: "secondary", ref: ref }, props))); });
+var SecondaryCTALink = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(CTALink, __assign({ variant: "secondary", ref: ref }, props))); });
 exports.SecondaryCTALink = SecondaryCTALink;