@ovotech/element-native 3.8.1 → 4.0.0-canary-a872093-246

package/dist/components/ActionList/styled.js

@@ -1,153 +1,66 @@
-import { n as i } from "../../utils-HsZygzDh.js";
-import { s as m, c as e } from "../../styled.native-KEscfVp7.js";
-import { styledComponentWithBreakpoints as l } from "../../utils/utils.js";
-import { Icon as s } from "../Icon/Icon.js";
-import "react";
-import "react/jsx-runtime";
-import "../../hooks/use-breakpoint.js";
-import "react-native";
-import "../../providers/IconsProvider.js";
-import "../../providers/icons/Address.js";
-import "react-native-svg";
-import "../../providers/icons/Advice.js";
-import "../../providers/icons/Archive.js";
-import "../../providers/icons/ArrowDown.js";
-import "../../providers/icons/ArrowLeft.js";
-import "../../providers/icons/ArrowRight.js";
-import "../../providers/icons/ArrowUp.js";
-import "../../providers/icons/Award.js";
-import "../../providers/icons/Battery.js";
-import "../../providers/icons/Cal.js";
-import "../../providers/icons/CalBook.js";
-import "../../providers/icons/CaretDown.js";
-import "../../providers/icons/CaretLeft.js";
-import "../../providers/icons/CaretRight.js";
-import "../../providers/icons/CaretUp.js";
-import "../../providers/icons/Chart.js";
-import "../../providers/icons/ChartFilled.js";
-import "../../providers/icons/Check.js";
-import "../../providers/icons/CheckCircle.js";
-import "../../providers/icons/ChevronDown.js";
-import "../../providers/icons/ChevronLeft.js";
-import "../../providers/icons/ChevronLeftSmall.js";
-import "../../providers/icons/ChevronLeftSmallFirst.js";
-import "../../providers/icons/ChevronRight.js";
-import "../../providers/icons/ChevronRightSmall.js";
-import "../../providers/icons/ChevronRightSmallLast.js";
-import "../../providers/icons/ChevronUp.js";
-import "../../providers/icons/Circle.js";
-import "../../providers/icons/CloseCircle.js";
-import "../../providers/icons/Cross.js";
-import "../../providers/icons/Doc.js";
-import "../../providers/icons/Dollar.js";
-import "../../providers/icons/Download.js";
-import "../../providers/icons/Eco.js";
-import "../../providers/icons/EcoHome.js";
-import "../../providers/icons/Edit.js";
-import "../../providers/icons/ElectricCar.js";
-import "../../providers/icons/ElectricHome.js";
-import "../../providers/icons/Electricity.js";
-import "../../providers/icons/EnergyAdvice.js";
-import "../../providers/icons/Equals.js";
-import "../../providers/icons/Euro.js";
-import "../../providers/icons/Gas.js";
-import "../../providers/icons/GlobeAddress.js";
-import "../../providers/icons/Help.js";
-import "../../providers/icons/Hide.js";
-import "../../providers/icons/Home.js";
-import "../../providers/icons/HomeFilled.js";
-import "../../providers/icons/HydroPower.js";
-import "../../providers/icons/Info.js";
-import "../../providers/icons/Link.js";
-import "../../providers/icons/Logo.js";
-import "../../providers/icons/Mail.js";
-import "../../providers/icons/MailOpen.js";
-import "../../providers/icons/Menu.js";
-import "../../providers/icons/Message.js";
-import "../../providers/icons/MessageFilled.js";
-import "../../providers/icons/Minus.js";
-import "../../providers/icons/Mobile.js";
-import "../../providers/icons/NewWindow.js";
-import "../../providers/icons/PaymentCard.js";
-import "../../providers/icons/Phone.js";
-import "../../providers/icons/Plus.js";
-import "../../providers/icons/Pound.js";
-import "../../providers/icons/Pricing.js";
-import "../../providers/icons/Search.js";
-import "../../providers/icons/Security.js";
-import "../../providers/icons/Show.js";
-import "../../providers/icons/SmartHome.js";
-import "../../providers/icons/SmartMeter.js";
-import "../../providers/icons/Solar.js";
-import "../../providers/icons/Star.js";
-import "../../providers/icons/Sun.js";
-import "../../providers/icons/Torch.js";
-import "../../providers/icons/Trees.js";
-import "../../providers/icons/Tune.js";
-import "../../providers/icons/User.js";
-import "../../providers/icons/UserFilled.js";
-import "../../providers/icons/Wallet.js";
-import "../../providers/icons/WalletFilled.js";
-import "../../providers/icons/WarmHome.js";
-import "../../providers/icons/Warning.js";
-import "../../providers/icons/WebAddress.js";
-import "../../providers/icons/WindPower.js";
-const d = m.View(
-  ({ theme: { core: t }, smallAndUp: o }) => e`
-    flex-direction: column;
-    margin-top: ${i(o ? t.space[3] : t.space[2])};
-    margin-bottom: ${i(o ? t.space[3] : t.space[2])};
-  `
-), _t = l(d), Ut = m.View(
-  ({ theme: { core: t, semantic: o }, hasBorder: r, inverted: p }) => `
-  width: 100%;
-  align-self: flex-start;
-  border-bottom-width: ${r ? i(t.borderWidth.small) : 0};
-  border-bottom-style: solid;
-  border-bottom-color: ${p ? o.inverted.border : o.border.graphic};
-`
-), to = m.View(
-  ({ fullWidth: t, inline: o }) => e`
-    display: flex;
-    flex-direction: row;
-    justify-content: ${t === "always" ? "space-between" : "flex-start"};
-    align-items: center;
-    ${o ? "" : "min-height: 44px"};
-  `
-), oo = m.Text(
-  ({
-    theme: { core: t, semantic: o },
-    smallAndUp: r,
-    inverted: p = !1,
-    inList: n = !1
-  }) => {
-    const a = r ? t.fontSize.body.large : t.fontSize.body.small;
-    return e`
-      color: ${p ? o.inverted.message.base : o.message.base};
-      font-family: ${t.fontFamily.bodyBold.native};
-      font-size: ${i(a)};
-      line-height: ${i(t.lineHeight.body.small)};
-      flex: ${n ? 1 : "none"};
-    `;
-  }
-), io = m(s)(({ theme: { core: t, semantic: o }, inverted: r, marginTop: p }) => e`
-    color: ${r ? o.inverted.message.base : o.message.base};
-    margin-left: ${i(t.space[1])};
-    margin-top: ${i(t.space[p])};
-  `), ro = m(s)(({
-  theme: { core: t, semantic: o },
-  inverted: r
-}) => e`
-    color: ${r ? o.inverted.message.base : o.message.base};
-    margin-right: ${i(t.space[1])};
-    margin-top: ${i(t.space[1])};
-    align-self: start;
-  `);
-export {
-  to as StyledActionInner,
-  _t as StyledActionList,
-  oo as StyledActionText,
-  Ut as StyledActionWrapper,
-  ro as StyledLeftIcon,
-  io as StyledRightIcon
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledLeftIcon = exports.StyledRightIcon = exports.StyledActionNodeWrapper = exports.StyledActionText = exports.StyledActionInner = exports.StyledActionWrapper = exports.StyledActionList = void 0;
+var element_core_1 = require("@ovotech/element-core");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var Icon_1 = require("../Icon");
+var StyledList = styled_native_1.default.View(function (_a) {
+    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), (0, element_core_1.numToPx)(smallAndUp ? core.space[3] : core.space[2]), (0, element_core_1.numToPx)(smallAndUp ? core.space[3] : core.space[2]));
+});
+exports.StyledActionList = (0, utils_1.styledComponentWithBreakpoints)(StyledList);
+exports.StyledActionWrapper = styled_native_1.default.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBorder = _a.hasBorder, inverted = _a.inverted;
+    return "\n  width: 100%;\n  align-self: flex-start;\n  border-bottom-width: ".concat(hasBorder ? (0, element_core_1.numToPx)(core.borderWidth.small) : 0, ";\n  border-bottom-style: solid;\n  border-bottom-color: ").concat(inverted ? semantic.inverted.border : semantic.border.graphic, ";\n");
+});
+exports.StyledActionInner = styled_native_1.default.View(function (_a) {
+    var fullWidth = _a.fullWidth, inline = _a.inline;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    ", ";\n  "], ["\n    display: flex;\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    ", ";\n  "])), fullWidth ? 'space-between' : 'flex-start', !inline ? 'min-height: 44px' : '');
+});
+exports.StyledActionText = styled_native_1.default.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.inList, inList = _d === void 0 ? false : _d;
+    var fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      flex: ", ";\n    "], ["\n      color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      flex: ", ";\n    "])), inverted
+        ? semantic.inverted.message.base
+        : semantic.message.base, core.fontFamily.bodyBold.native, (0, element_core_1.numToPx)(fontSize), (0, element_core_1.numToPx)(core.lineHeight.body.small), inList ? 1 : 'none');
+});
+exports.StyledActionNodeWrapper = styled_native_1.default.View(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n"])));
+exports.StyledRightIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
+    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    margin-left: ", ";\n  "], ["\n    color: ", ";\n    margin-left: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, (0, element_core_1.numToPx)(core.space[1]));
+});
+exports.StyledLeftIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
+    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: flex-start;\n  "], ["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: flex-start;\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, (0, element_core_1.numToPx)(core.space[1]), (0, element_core_1.numToPx)(core.space[1]));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -1,7 +1,7 @@
 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' | 'neutral' | 'branded'>;
-export declare type BadgeVariantName = BadgeColors | SemanticVariants;
+export type SemanticVariants = Exclude<keyof Theme['semantic'], 'surface' | 'message' | 'border' | 'focus' | 'inverted' | 'data' | 'neutral' | 'branded'>;
+export type BadgeVariantName = BadgeColors | SemanticVariants;
 declare const StyledBadge: import("styled-components").StyledComponent<typeof import("react-native").View, {
     core: {
         color: {
@@ -361,6 +361,8 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             secondary: {
                 message: string;
@@ -371,6 +373,8 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             destructive: {
                 message: string;
@@ -381,6 +385,8 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
         };
         heading1: {
@@ -488,6 +494,6 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
     inverted?: boolean | undefined;
     variant?: BadgeVariantName | undefined;
 }, never>;
-declare type BadgeProps = ComponentProps<typeof StyledBadge>;
+type BadgeProps = ComponentProps<typeof StyledBadge>;
 export declare const Badge: ({ children, variant, inverted, ...rest }: BadgeProps) => JSX.Element;
 export {};

package/dist/components/Badge/Badge.js

@@ -1,40 +1,97 @@
-import { jsx as h } from "react/jsx-runtime";
-import { n as b } from "../../utils-HsZygzDh.js";
-import { s as y, c as C } from "../../styled.native-KEscfVp7.js";
-import "react";
-const $ = y.View(
-  ({
-    theme: { core: l, semantic: o, component: r },
-    variant: d = "info",
-    inverted: s = !1,
-    customVariant: e
-  }) => {
-    let f, g;
-    return d in o ? (f = o[d].surface, g = o[d].message) : (f = r.badge.variants[d].background, g = r.badge.variants[d].foreground), e != null && e.foregroundColor && (e != null && e.backgroundColor) && (f = e.backgroundColor, g = e.foregroundColor), C`
-      padding: 0 ${b(l.space[2])};
-      border-radius: 16px;
-      border: ${b(l.borderWidth.medium)} solid
-        ${l.color.brand.white};
-      background-color: ${s ? g : f};
-      align-self: flex-start;
-    `;
-  }
-), k = y.Text(
-  ({
-    theme: { core: l, semantic: o, component: r },
-    variant: d = "info",
-    inverted: s = !1,
-    customVariant: e
-  }) => {
-    let f, g;
-    return d in o ? (f = o[d].surface, g = o[d].message) : (f = r.badge.variants[d].background, g = r.badge.variants[d].foreground), e != null && e.foregroundColor && (e != null && e.backgroundColor) && (f = e.backgroundColor, g = e.foregroundColor), C`
-      font-family: ${l.fontFamily.bodyBold.native};
-      line-height: ${b(l.lineHeight.body.small)};
-      color: ${s ? f : g};
-      font-size: ${b(l.fontSize.body.small)};
-    `;
-  }
-), T = ({ children: l, variant: o, inverted: r, ...d }) => /* @__PURE__ */ h($, { variant: o, inverted: r, ...d, children: /* @__PURE__ */ h(k, { variant: o, inverted: r, children: l }) });
-export {
-  T as Badge
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
+var styled_native_1 = __importStar(require("../../styled.native"));
+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        ", ";\n      background-color: ", ";\n      align-self: flex-start;\n    "], ["\n      padding: 0 ", ";\n      border-radius: 16px;\n      border: ", " solid\n        ", ";\n      background-color: ", ";\n      align-self: flex-start;\n    "])), (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.borderWidth.medium), core.color.brand.white, inverted ? message : surface);
+});
+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, (0, element_core_1.numToPx)(core.lineHeight.body.small), inverted ? surface : message, (0, element_core_1.numToPx)(core.fontSize.body.small));
+});
+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, { variant: variant, inverted: inverted, children: children }) })));
+};
+exports.Badge = Badge;
+var templateObject_1, templateObject_2;

package/dist/components/Badge/index.js

@@ -1,8 +1,5 @@
-import { Badge as e } from "./Badge.js";
-import "react/jsx-runtime";
-import "../../utils-HsZygzDh.js";
-import "../../styled.native-KEscfVp7.js";
-import "react";
-export {
-  e as Badge
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+var Badge_1 = require("./Badge");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });

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

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