@ovotech/element-native 4.2.0 → 4.3.0-canary-3908de8-301

package/dist/components/ActionCard/ActionCard.js

@@ -1,4 +1,15 @@
 "use strict";
+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);
@@ -36,7 +47,13 @@ var __1 = require("../");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var P_1 = require("../P");
 var IndicatorIconShape_1 = require("./IndicatorIconShape");
-var StyledCard = styled_native_1.default.Pressable(function (_a) {
+var StyledPressableCard = styled_native_1.default.Pressable(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
+    var paddingVal = inline ? core.space[4] : core.space[6];
+    var reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
+    return "\n      border-radius: ".concat(inline ? (0, element_core_1.numToPx)(core.space[6]) : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat((0, element_core_1.numToPx)(paddingVal), ";\n      padding-bottom: ").concat((0, element_core_1.numToPx)(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
+});
+var StyledCard = styled_native_1.default.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
     var paddingVal = inline ? core.space[4] : core.space[6];
     var reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
@@ -58,6 +75,9 @@ var ActionCard = function (_a) {
     var cardAction = hasSingleAction
         ? onPressActionButton || onPressIndicator
         : null;
+    var RootContainer = hasSingleAction
+        ? StyledPressableCard
+        : StyledCard;
     (0, react_1.useEffect)(function () {
         if (onMount) {
             onMount();
@@ -66,7 +86,7 @@ var ActionCard = function (_a) {
     var Heading = inline ? __1.Heading3 : __1.Heading2;
     var cardPadding = core.space[inline ? 4 : 6];
     var negativeMarginAdjustment = -cardPadding;
-    return ((0, jsx_runtime_1.jsxs)(StyledCard, { onPress: cardAction, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1 }, children: (0, jsx_runtime_1.jsxs)(__1.Stack, { spaceBetween: 2, children: [(0, jsx_runtime_1.jsx)(Heading, { style: {
+    return ((0, jsx_runtime_1.jsxs)(RootContainer, __assign({}, (cardAction ? { onPress: cardAction } : {}), { inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), accessibilityRole: cardAction ? 'button' : 'none', children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1 }, children: (0, jsx_runtime_1.jsxs)(__1.Stack, { spaceBetween: 2, children: [(0, jsx_runtime_1.jsx)(Heading, { style: {
                                         color: inverted
                                             ? semantic.inverted.message.link
                                             : semantic.message.branded,
@@ -106,6 +126,6 @@ var ActionCard = function (_a) {
                     position: 'absolute',
                     right: core.space[2],
                     top: core.space[2],
-                }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: (0, jsx_runtime_1.jsx)(CloseIconWrapper, { inverted: inverted, children: (0, jsx_runtime_1.jsx)(__1.Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] }));
+                }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: (0, jsx_runtime_1.jsx)(CloseIconWrapper, { inverted: inverted, children: (0, jsx_runtime_1.jsx)(__1.Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] })));
 };
 exports.ActionCard = ActionCard;

package/dist/components/ActionList/ActionList.d.ts

@@ -14,7 +14,8 @@ type ActionProps = PropsWithChildren<ViewProps & {
     ref?: Ref<View>;
     testID?: string;
     inList?: boolean;
+    standalone?: boolean;
 }>;
 declare const ActionList: ({ children, inverted, ...rest }: ActionListProps) => JSX.Element;
-declare const Action: import("react").ForwardRefExoticComponent<Pick<ActionProps, "onPress" | "inverted" | "inline" | keyof ViewProps | "fullWidth" | "iconLeft" | "iconRight" | "inList"> & import("react").RefAttributes<View>>;
+declare const Action: import("react").ForwardRefExoticComponent<Pick<ActionProps, "onPress" | "inverted" | "inline" | keyof ViewProps | "fullWidth" | "iconLeft" | "iconRight" | "standalone" | "inList"> & import("react").RefAttributes<View>>;
 export { ActionList, Action };

package/dist/components/ActionList/ActionList.js

@@ -47,12 +47,12 @@ var ActionList = function (_a) {
 };
 exports.ActionList = ActionList;
 var ActionWrapper = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID"]);
-    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, onPress: onPress, children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, children: children }) }) })));
+    var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID", "standalone"]);
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, onPress: onPress, children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, standalone: standalone, children: children }) }) })));
 });
 var Action = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight"]);
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight", "standalone"]);
     var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
-    return ((0, jsx_runtime_1.jsxs)(ActionWrapper, __assign({ ref: ref, accessible: true, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID }, rest, { children: [iconLeft ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? ((0, jsx_runtime_1.jsx)(styled_1.StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : ((0, jsx_runtime_1.jsx)(styled_1.StyledActionNodeWrapper, { children: children })), iconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
+    return ((0, jsx_runtime_1.jsxs)(ActionWrapper, __assign({ ref: ref, accessible: true, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID, standalone: standalone }, rest, { children: [iconLeft ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? ((0, jsx_runtime_1.jsx)(styled_1.StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : ((0, jsx_runtime_1.jsx)(styled_1.StyledActionNodeWrapper, { children: children })), iconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
 });
 exports.Action = Action;

package/dist/components/ActionList/styled.d.ts

@@ -1708,6 +1708,7 @@ export declare const StyledActionInner: import("styled-components").StyledCompon
 }, {
     fullWidth?: boolean | undefined;
     inline?: boolean | undefined;
+    standalone?: boolean | undefined;
 }, never>;
 export declare const StyledActionText: import("styled-components").StyledComponent<typeof import("react-native").Text, {
     core: {

package/dist/components/ActionList/styled.js

@@ -42,8 +42,8 @@ exports.StyledActionWrapper = styled_native_1.default.View(function (_a) {
     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' : '');
+    var fullWidth = _a.fullWidth, inline = _a.inline, standalone = _a.standalone;
+    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    min-height: ", ";\n  "], ["\n    display: flex;\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    min-height: ", ";\n  "])), fullWidth ? 'space-between' : 'flex-start', inline || standalone ? '' : '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;

package/dist/components/CurrencyField/CurrencyField.d.ts

@@ -4,8 +4,8 @@ import { FieldProps } from '../Field';
 export declare const CurrencyField: import("react").ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & {
     currency?: "GBP" | "EUR" | "AUD" | "USD" | undefined;

package/dist/components/CurrencyInput/CurrencyInput.d.ts

@@ -7,8 +7,8 @@ export type CurrencyInputProps = InputProps & {
 declare const CurrencyInput: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & {
     currency?: "GBP" | "EUR" | "AUD" | "USD" | undefined;

package/dist/components/EmailField/EmailField.d.ts

@@ -4,7 +4,7 @@ import { FieldProps } from '../Field';
 export declare const EmailField: import("react").ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & import("react").RefAttributes<NativeTextInput>>;

package/dist/components/EmailInput/EmailInput.d.ts

@@ -3,8 +3,8 @@ import { TextInput } from 'react-native';
 declare const EmailInput: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & import("react").RefAttributes<TextInput>>;
 export { EmailInput };

package/dist/components/FilterSelect/FilterSelect.js

@@ -76,7 +76,7 @@ var FilterSelect = function (_a) {
                             right: react_native_1.Dimensions.get('window').width - (x + width),
                         });
                     });
-                }, children: [(0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: selected.value === 'default'
+                }, accessibilityRole: "combobox", children: [(0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: selected.value === 'default'
                                 ? ''
                                 : (_b = selected.collapsedLabel) !== null && _b !== void 0 ? _b : selected.label }) }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "caret-arrow-down", size: 14, style: { marginLeft: 2 } })] }, String(isOpen)), rightText ? (0, jsx_runtime_1.jsxs)(P_1.P, { children: [" ", rightText] }) : null, (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { style: {
                             top: measure === null || measure === void 0 ? void 0 : measure.top,

package/dist/components/Input/Input.d.ts

@@ -11,8 +11,8 @@ export type InputProps = TextInputProps & {
 declare const Input: import("react").ForwardRefExoticComponent<TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: IconNameExtended | undefined;
+    iconRight?: IconNameExtended | undefined;
     rightSlot?: ReactNode;
 } & import("react").RefAttributes<TextInput>>;
 export { Input };

package/dist/components/NavHeader/IconButton.d.ts

@@ -3,6 +3,8 @@ import { IconNameExtended } from '../../providers';
 export type RightActionConfig = {
     iconName?: IconNameExtended;
     onActionPress?: () => void;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
 };
 type IconButtonProps = {
     size: 'small' | 'large';

package/dist/components/NavHeader/IconButton.js

@@ -13,7 +13,7 @@ var IconButton = function (_a) {
     if (!rightActionConfig || !(rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.iconName)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { hitSlop: theme.core.space[2], pressRetentionOffset: theme.core.space[2], onPress: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.onActionPress, children: function (_a) {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { hitSlop: theme.core.space[2], pressRetentionOffset: theme.core.space[2], onPress: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.onActionPress, accessibilityRole: "button", accessibilityLabel: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityLabel, accessibilityHint: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityHint, children: function (_a) {
             var pressed = _a.pressed;
             return ((0, jsx_runtime_1.jsx)(ButtonStyled, { entering: animation, "$pressed": pressed, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: rightActionConfig.iconName, size: size === 'small' ? 16 : 18, color: theme.semantic.inverted.message.base }) }));
         } }));

package/dist/components/NumberField/NumberField.d.ts

@@ -4,7 +4,7 @@ import { FieldProps } from '../Field';
 export declare const NumberField: import("react").ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & import("react").RefAttributes<NativeTextInput>>;

package/dist/components/NumberInput/NumberInput.d.ts

@@ -3,8 +3,8 @@ import { TextInput as RNTextInput } from 'react-native';
 declare const NumberInput: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & import("react").RefAttributes<RNTextInput>>;
 export { NumberInput };

package/dist/components/PasswordField/PasswordField.d.ts

@@ -4,8 +4,8 @@ import { FieldProps } from '../Field';
 export declare const PasswordField: import("react").ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & {
     hasVisibilityToggle?: boolean | undefined;

package/dist/components/PasswordInput/PasswordInput.d.ts

@@ -3,8 +3,8 @@ import { TextInput as RNTextInput } from 'react-native';
 declare const PasswordInput: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & {
     hasVisibilityToggle?: boolean | undefined;

package/dist/components/PhoneField/PhoneField.d.ts

@@ -4,7 +4,7 @@ import { FieldProps } from '../Field';
 export declare const PhoneField: import("react").ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & import("react").RefAttributes<NativeTextInput>>;

package/dist/components/PhoneInput/PhoneInput.d.ts

@@ -3,7 +3,7 @@ import { TextInput } from 'react-native';
 export declare const PhoneInput: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & import("react").RefAttributes<TextInput>>;

package/dist/components/SelectField/Select.js

@@ -90,7 +90,7 @@ var Select = function (_a) {
         label: "-- ".concat(noOptionMessage, " --"),
         value: 'default',
     };
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [(0, jsx_runtime_1.jsx)(P_1.P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { nestedScrollEnabled: true, children: [(0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === requiredOption.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === option.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [(0, jsx_runtime_1.jsx)(P_1.P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { nestedScrollEnabled: true, testID: "".concat(testID, "-OptionsScrollView"), children: [(0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === requiredOption.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === option.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
 };
 exports.Select = Select;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/Strong/Strong.d.ts

@@ -562,4 +562,6 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
             };
         };
     };
-}, {}, never>;
+}, {
+    color?: string | undefined;
+}, never>;

package/dist/components/Strong/Strong.js

@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Strong = void 0;
 var styled_native_1 = __importDefault(require("../../styled.native"));
 exports.Strong = styled_native_1.default.Text(function (_a) {
-    var core = _a.theme.core;
-    return "\n    font-family: ".concat(core.fontFamily.bodyBold.native, ";\n  ");
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return "\n    font-family: ".concat(core.fontFamily.bodyBold.native, ";\n    color: color ?? ").concat(semantic.message.base, "\n  ");
 });

package/dist/components/TextField/TextField.d.ts

@@ -4,7 +4,7 @@ import { FieldProps } from '../Field';
 export declare const TextField: import("react").ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & import("react").RefAttributes<NativeTextInput>>;

package/dist/components/TextInput/TextInput.d.ts

@@ -3,8 +3,8 @@ import { TextInput as RNTextInput } from 'react-native';
 declare const TextInput: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & import("react").RefAttributes<RNTextInput>>;
 export { TextInput };

package/dist/components/TextareaField/TextareaField.d.ts

@@ -4,8 +4,8 @@ import { FieldProps } from '../Field';
 export declare const TextareaField: import("react").ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & {
     rows?: number | undefined;

package/dist/components/TextareaInput/TextareaInput.d.ts

@@ -7,8 +7,8 @@ type TextareaInputProps = InputProps & {
 declare const TextareaInput: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & {
     rows?: number | undefined;

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

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import MaskedView from '@react-native-masked-view/masked-view';
@@ -7,7 +18,13 @@ import { Action, CTAButton, Heading2, Heading3, Icon, Margin, Stack, } from '../
 import styled, { ThemeContext } from '../../styled.native';
 import { P } from '../P';
 import { IndicatorIconShape } from './IndicatorIconShape';
-var StyledCard = styled.Pressable(function (_a) {
+var StyledPressableCard = styled.Pressable(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
+    var paddingVal = inline ? core.space[4] : core.space[6];
+    var reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
+    return "\n      border-radius: ".concat(inline ? numToPx(core.space[6]) : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(numToPx(paddingVal), ";\n      padding-bottom: ").concat(numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
+});
+var StyledCard = styled.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
     var paddingVal = inline ? core.space[4] : core.space[6];
     var reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
@@ -29,6 +46,9 @@ export var ActionCard = function (_a) {
     var cardAction = hasSingleAction
         ? onPressActionButton || onPressIndicator
         : null;
+    var RootContainer = hasSingleAction
+        ? StyledPressableCard
+        : StyledCard;
     useEffect(function () {
         if (onMount) {
             onMount();
@@ -37,7 +57,7 @@ export var ActionCard = function (_a) {
     var Heading = inline ? Heading3 : Heading2;
     var cardPadding = core.space[inline ? 4 : 6];
     var negativeMarginAdjustment = -cardPadding;
-    return (_jsxs(StyledCard, { onPress: cardAction, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: [_jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
+    return (_jsxs(RootContainer, __assign({}, (cardAction ? { onPress: cardAction } : {}), { inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), accessibilityRole: cardAction ? 'button' : 'none', children: [_jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
                                         color: inverted
                                             ? semantic.inverted.message.link
                                             : semantic.message.branded,
@@ -77,5 +97,5 @@ export var ActionCard = function (_a) {
                     position: 'absolute',
                     right: core.space[2],
                     top: core.space[2],
-                }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] }));
+                }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] })));
 };

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

@@ -43,12 +43,12 @@ var ActionList = function (_a) {
         }) })));
 };
 var ActionWrapper = forwardRef(function (_a, ref) {
-    var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID"]);
-    return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, children: children }) }) })));
+    var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID", "standalone"]);
+    return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, standalone: standalone, children: children }) }) })));
 });
 var Action = forwardRef(function (_a, ref) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight"]);
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight", "standalone"]);
     var smallAndUp = useBreakpoint().smallAndUp;
-    return (_jsxs(ActionWrapper, __assign({ ref: ref, accessible: true, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? (_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : (_jsx(StyledActionNodeWrapper, { children: children })), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
+    return (_jsxs(ActionWrapper, __assign({ ref: ref, accessible: true, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID, standalone: standalone }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? (_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : (_jsx(StyledActionNodeWrapper, { children: children })), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
 });
 export { ActionList, Action };

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

@@ -16,8 +16,8 @@ export var StyledActionWrapper = styled.View(function (_a) {
     return "\n  width: 100%;\n  align-self: flex-start;\n  border-bottom-width: ".concat(hasBorder ? numToPx(core.borderWidth.small) : 0, ";\n  border-bottom-style: solid;\n  border-bottom-color: ").concat(inverted ? semantic.inverted.border : semantic.border.graphic, ";\n");
 });
 export var StyledActionInner = styled.View(function (_a) {
-    var fullWidth = _a.fullWidth, inline = _a.inline;
-    return 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' : '');
+    var fullWidth = _a.fullWidth, inline = _a.inline, standalone = _a.standalone;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    min-height: ", ";\n  "], ["\n    display: flex;\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    min-height: ", ";\n  "])), fullWidth ? 'space-between' : 'flex-start', inline || standalone ? '' : '44px');
 });
 export var StyledActionText = styled.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;

package/dist/esm/components/FilterSelect/FilterSelect.js

@@ -50,7 +50,7 @@ export var FilterSelect = function (_a) {
                             right: Dimensions.get('window').width - (x + width),
                         });
                     });
-                }, children: [_jsx(P, { children: _jsx(Strong, { children: selected.value === 'default'
+                }, accessibilityRole: "combobox", children: [_jsx(P, { children: _jsx(Strong, { children: selected.value === 'default'
                                 ? ''
                                 : (_b = selected.collapsedLabel) !== null && _b !== void 0 ? _b : selected.label }) }), _jsx(Icon, { name: "caret-arrow-down", size: 14, style: { marginLeft: 2 } })] }, String(isOpen)), rightText ? _jsxs(P, { children: [" ", rightText] }) : null, _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { style: {
                             top: measure === null || measure === void 0 ? void 0 : measure.top,

package/dist/esm/components/NavHeader/IconButton.js

@@ -10,7 +10,7 @@ export var IconButton = function (_a) {
     if (!rightActionConfig || !(rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.iconName)) {
         return null;
     }
-    return (_jsx(Pressable, { hitSlop: theme.core.space[2], pressRetentionOffset: theme.core.space[2], onPress: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.onActionPress, children: function (_a) {
+    return (_jsx(Pressable, { hitSlop: theme.core.space[2], pressRetentionOffset: theme.core.space[2], onPress: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.onActionPress, accessibilityRole: "button", accessibilityLabel: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityLabel, accessibilityHint: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityHint, children: function (_a) {
             var pressed = _a.pressed;
             return (_jsx(ButtonStyled, { entering: animation, "$pressed": pressed, children: _jsx(Icon, { name: rightActionConfig.iconName, size: size === 'small' ? 16 : 18, color: theme.semantic.inverted.message.base }) }));
         } }));

package/dist/esm/components/SelectField/Select.js

@@ -61,6 +61,6 @@ export var Select = function (_a) {
         label: "-- ".concat(noOptionMessage, " --"),
         value: 'default',
     };
-    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { children: _jsxs(ScrollView, { nestedScrollEnabled: true, children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selected.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selected.value === option.value, children: _jsx(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
+    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: "".concat(testID, "-OptionsScrollView"), children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selected.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selected.value === option.value, children: _jsx(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/esm/components/Strong/Strong.js

@@ -1,5 +1,5 @@
 import styled from '../../styled.native';
 export var Strong = styled.Text(function (_a) {
-    var core = _a.theme.core;
-    return "\n    font-family: ".concat(core.fontFamily.bodyBold.native, ";\n  ");
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return "\n    font-family: ".concat(core.fontFamily.bodyBold.native, ";\n    color: color ?? ").concat(semantic.message.base, "\n  ");
 });

package/dist/esm/providers/IconsProvider.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
-import { Address, Advice, Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Award, Battery, Cal, CalBook, CaretArrowDown, CaretArrowLeft, CaretArrowRight, CaretArrowUp, CaretDown, CaretLeft, CaretRight, CaretUp, Chart, ChartFilled, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronLeftSmall, ChevronLeftSmallFirst, ChevronRight, ChevronRightSmall, ChevronRightSmallLast, ChevronUp, Circle, CloseCircle, Cross, Doc, Dollar, Download, EcoHome, Eco, Edit, ElectricCar, ElectricHome, Electricity, EnergyAdvice, Equals, Euro, Gas, GlobeAddress, Help, HelpFilled, Hide, Home, HomeFilled, HydroPower, Info, Link, Logo, Mail, MailOpen, Menu, Message, MessageFilled, Minus, Mobile, NewWindow, PaymentCard, PaymentCardFilled, Phone, Plus, Pound, Pricing, Search, Security, Shop, ShopFilled, Show, SmartHome, SmartMeter, Solar, Star, StarFilled, Sun, Torch, Trees, Tune, User, UserFilled, Wallet, WalletFilled, WarmHome, Warning, WebAddress, WindPower, } from './icons';
+import { Address, Advice, Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Award, Battery, CalBook, Cal, CaretArrowDown, CaretArrowLeft, CaretArrowRight, CaretArrowUp, CaretDown, CaretLeft, CaretRight, CaretUp, ChartFilled, Chart, CheckCircle, Check, ChevronDown, ChevronLeftSmallFirst, ChevronLeftSmall, ChevronLeft, ChevronRightSmallLast, ChevronRightSmall, ChevronRight, ChevronUp, Circle, CloseCircle, Cross, Doc, Dollar, Download, EcoHome, Eco, Edit, ElectricCar, ElectricHome, Electricity, EnergyAdvice, Equals, Euro, Gas, GlobeAddress, HelpFilled, Help, Hide, HomeFilled, Home, HydroPower, Info, Link, Logo, MailOpen, Mail, Menu, MessageFilled, Message, Minus, Mobile, NewWindow, PaymentCardFilled, PaymentCard, Phone, Plus, Pound, PricingFilled, Pricing, Search, Security, ShopFilled, Shop, Show, SmartHome, SmartMeter, Solar, StarFilled, Star, Sun, Torch, Trees, Tune, UserFilled, User, Wallet, WarmHome, Warning, WebAddress, WindPower, } from './icons';
 var defaultIcons = {
     address: Address,
     advice: Advice,
@@ -83,6 +83,7 @@ var defaultIcons = {
     phone: Phone,
     plus: Plus,
     pound: Pound,
+    'pricing-filled': PricingFilled,
     pricing: Pricing,
     search: Search,
     security: Security,
@@ -101,7 +102,6 @@ var defaultIcons = {
     'user-filled': UserFilled,
     user: User,
     wallet: Wallet,
-    'wallet-filled': WalletFilled,
     'warm-home': WarmHome,
     warning: Warning,
     'web-address': WebAddress,

package/dist/esm/providers/icons/Circle.js

@@ -10,5 +10,5 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Circle as CircleSvg, Svg } from 'react-native-svg';
-export var Circle = function (props) { return (_jsx(Svg, __assign({ viewBox: "0 0 16 16" }, props, { children: _jsx(CircleSvg, { cx: "8", cy: "8", r: "8", fill: "currentColor" }) }))); };
+import Svg, { Path } from 'react-native-svg';
+export var Circle = function (props) { return (_jsx(Svg, __assign({ viewBox: "0 0 16 16" }, props, { children: _jsx(Path, { fill: "currentColor", d: "M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z" }) }))); };

package/dist/esm/providers/icons/PricingFilled.js

@@ -0,0 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export var PricingFilled = function (props) { return (_jsx(Svg, __assign({ viewBox: "0 0 16 16" }, props, { children: _jsx(Path, { fill: "currentColor", d: "m12.294 9.853 1.67-.447-5.912-5.913-3.128.408-2.355-2.354-1.06 1.06 2.355 2.355-.409 3.127 6.364 6.364 2.924-2.924-.449-1.676Z" }) }))); };

package/dist/esm/providers/icons/index.js

@@ -7,8 +7,8 @@ export * from './ArrowRight';
 export * from './ArrowUp';
 export * from './Award';
 export * from './Battery';
-export * from './Cal';
 export * from './CalBook';
+export * from './Cal';
 export * from './CaretArrowDown';
 export * from './CaretArrowLeft';
 export * from './CaretArrowRight';
@@ -17,17 +17,17 @@ export * from './CaretDown';
 export * from './CaretLeft';
 export * from './CaretRight';
 export * from './CaretUp';
-export * from './Chart';
 export * from './ChartFilled';
-export * from './Check';
+export * from './Chart';
 export * from './CheckCircle';
+export * from './Check';
 export * from './ChevronDown';
-export * from './ChevronLeft';
-export * from './ChevronLeftSmall';
 export * from './ChevronLeftSmallFirst';
-export * from './ChevronRight';
-export * from './ChevronRightSmall';
+export * from './ChevronLeftSmall';
+export * from './ChevronLeft';
 export * from './ChevronRightSmallLast';
+export * from './ChevronRightSmall';
+export * from './ChevronRight';
 export * from './ChevronUp';
 export * from './Circle';
 export * from './CloseCircle';
@@ -46,47 +46,47 @@ export * from './Equals';
 export * from './Euro';
 export * from './Gas';
 export * from './GlobeAddress';
-export * from './Help';
 export * from './HelpFilled';
+export * from './Help';
 export * from './Hide';
-export * from './Home';
 export * from './HomeFilled';
+export * from './Home';
 export * from './HydroPower';
 export * from './Info';
 export * from './Link';
 export * from './Logo';
-export * from './Mail';
 export * from './MailOpen';
+export * from './Mail';
 export * from './Menu';
-export * from './Message';
 export * from './MessageFilled';
+export * from './Message';
 export * from './Minus';
 export * from './Mobile';
 export * from './NewWindow';
-export * from './PaymentCard';
 export * from './PaymentCardFilled';
+export * from './PaymentCard';
 export * from './Phone';
 export * from './Plus';
 export * from './Pound';
+export * from './PricingFilled';
 export * from './Pricing';
 export * from './Search';
 export * from './Security';
-export * from './Shop';
 export * from './ShopFilled';
+export * from './Shop';
 export * from './Show';
 export * from './SmartHome';
 export * from './SmartMeter';
 export * from './Solar';
-export * from './Star';
 export * from './StarFilled';
+export * from './Star';
 export * from './Sun';
 export * from './Torch';
 export * from './Trees';
 export * from './Tune';
-export * from './User';
 export * from './UserFilled';
+export * from './User';
 export * from './Wallet';
-export * from './WalletFilled';
 export * from './WarmHome';
 export * from './Warning';
 export * from './WebAddress';

package/dist/providers/IconsProvider.js

@@ -86,6 +86,7 @@ var defaultIcons = {
     phone: icons_1.Phone,
     plus: icons_1.Plus,
     pound: icons_1.Pound,
+    'pricing-filled': icons_1.PricingFilled,
     pricing: icons_1.Pricing,
     search: icons_1.Search,
     security: icons_1.Security,
@@ -104,7 +105,6 @@ var defaultIcons = {
     'user-filled': icons_1.UserFilled,
     user: icons_1.User,
     wallet: icons_1.Wallet,
-    'wallet-filled': icons_1.WalletFilled,
     'warm-home': icons_1.WarmHome,
     warning: icons_1.Warning,
     'web-address': icons_1.WebAddress,

package/dist/providers/icons/Circle.js

@@ -10,9 +10,32 @@ 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.Circle = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_native_svg_1 = require("react-native-svg");
-var Circle = function (props) { return ((0, jsx_runtime_1.jsx)(react_native_svg_1.Svg, __assign({ viewBox: "0 0 16 16" }, props, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Circle, { cx: "8", cy: "8", r: "8", fill: "currentColor" }) }))); };
+var react_native_svg_1 = __importStar(require("react-native-svg"));
+var Circle = function (props) { return ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, __assign({ viewBox: "0 0 16 16" }, props, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { fill: "currentColor", d: "M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z" }) }))); };
 exports.Circle = Circle;

package/dist/providers/icons/PricingFilled.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from 'react-native-svg';
+export declare const PricingFilled: (props: SvgProps) => JSX.Element;

package/dist/providers/icons/PricingFilled.js

@@ -0,0 +1,41 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PricingFilled = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_svg_1 = __importStar(require("react-native-svg"));
+var PricingFilled = function (props) { return ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, __assign({ viewBox: "0 0 16 16" }, props, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { fill: "currentColor", d: "m12.294 9.853 1.67-.447-5.912-5.913-3.128.408-2.355-2.354-1.06 1.06 2.355 2.355-.409 3.127 6.364 6.364 2.924-2.924-.449-1.676Z" }) }))); };
+exports.PricingFilled = PricingFilled;

package/dist/providers/icons/index.d.ts

@@ -7,8 +7,8 @@ export * from './ArrowRight';
 export * from './ArrowUp';
 export * from './Award';
 export * from './Battery';
-export * from './Cal';
 export * from './CalBook';
+export * from './Cal';
 export * from './CaretArrowDown';
 export * from './CaretArrowLeft';
 export * from './CaretArrowRight';
@@ -17,17 +17,17 @@ export * from './CaretDown';
 export * from './CaretLeft';
 export * from './CaretRight';
 export * from './CaretUp';
-export * from './Chart';
 export * from './ChartFilled';
-export * from './Check';
+export * from './Chart';
 export * from './CheckCircle';
+export * from './Check';
 export * from './ChevronDown';
-export * from './ChevronLeft';
-export * from './ChevronLeftSmall';
 export * from './ChevronLeftSmallFirst';
-export * from './ChevronRight';
-export * from './ChevronRightSmall';
+export * from './ChevronLeftSmall';
+export * from './ChevronLeft';
 export * from './ChevronRightSmallLast';
+export * from './ChevronRightSmall';
+export * from './ChevronRight';
 export * from './ChevronUp';
 export * from './Circle';
 export * from './CloseCircle';
@@ -46,47 +46,47 @@ export * from './Equals';
 export * from './Euro';
 export * from './Gas';
 export * from './GlobeAddress';
-export * from './Help';
 export * from './HelpFilled';
+export * from './Help';
 export * from './Hide';
-export * from './Home';
 export * from './HomeFilled';
+export * from './Home';
 export * from './HydroPower';
 export * from './Info';
 export * from './Link';
 export * from './Logo';
-export * from './Mail';
 export * from './MailOpen';
+export * from './Mail';
 export * from './Menu';
-export * from './Message';
 export * from './MessageFilled';
+export * from './Message';
 export * from './Minus';
 export * from './Mobile';
 export * from './NewWindow';
-export * from './PaymentCard';
 export * from './PaymentCardFilled';
+export * from './PaymentCard';
 export * from './Phone';
 export * from './Plus';
 export * from './Pound';
+export * from './PricingFilled';
 export * from './Pricing';
 export * from './Search';
 export * from './Security';
-export * from './Shop';
 export * from './ShopFilled';
+export * from './Shop';
 export * from './Show';
 export * from './SmartHome';
 export * from './SmartMeter';
 export * from './Solar';
-export * from './Star';
 export * from './StarFilled';
+export * from './Star';
 export * from './Sun';
 export * from './Torch';
 export * from './Trees';
 export * from './Tune';
-export * from './User';
 export * from './UserFilled';
+export * from './User';
 export * from './Wallet';
-export * from './WalletFilled';
 export * from './WarmHome';
 export * from './Warning';
 export * from './WebAddress';

package/dist/providers/icons/index.js

@@ -23,8 +23,8 @@ __exportStar(require("./ArrowRight"), exports);
 __exportStar(require("./ArrowUp"), exports);
 __exportStar(require("./Award"), exports);
 __exportStar(require("./Battery"), exports);
-__exportStar(require("./Cal"), exports);
 __exportStar(require("./CalBook"), exports);
+__exportStar(require("./Cal"), exports);
 __exportStar(require("./CaretArrowDown"), exports);
 __exportStar(require("./CaretArrowLeft"), exports);
 __exportStar(require("./CaretArrowRight"), exports);
@@ -33,17 +33,17 @@ __exportStar(require("./CaretDown"), exports);
 __exportStar(require("./CaretLeft"), exports);
 __exportStar(require("./CaretRight"), exports);
 __exportStar(require("./CaretUp"), exports);
-__exportStar(require("./Chart"), exports);
 __exportStar(require("./ChartFilled"), exports);
-__exportStar(require("./Check"), exports);
+__exportStar(require("./Chart"), exports);
 __exportStar(require("./CheckCircle"), exports);
+__exportStar(require("./Check"), exports);
 __exportStar(require("./ChevronDown"), exports);
-__exportStar(require("./ChevronLeft"), exports);
-__exportStar(require("./ChevronLeftSmall"), exports);
 __exportStar(require("./ChevronLeftSmallFirst"), exports);
-__exportStar(require("./ChevronRight"), exports);
-__exportStar(require("./ChevronRightSmall"), exports);
+__exportStar(require("./ChevronLeftSmall"), exports);
+__exportStar(require("./ChevronLeft"), exports);
 __exportStar(require("./ChevronRightSmallLast"), exports);
+__exportStar(require("./ChevronRightSmall"), exports);
+__exportStar(require("./ChevronRight"), exports);
 __exportStar(require("./ChevronUp"), exports);
 __exportStar(require("./Circle"), exports);
 __exportStar(require("./CloseCircle"), exports);
@@ -62,47 +62,47 @@ __exportStar(require("./Equals"), exports);
 __exportStar(require("./Euro"), exports);
 __exportStar(require("./Gas"), exports);
 __exportStar(require("./GlobeAddress"), exports);
-__exportStar(require("./Help"), exports);
 __exportStar(require("./HelpFilled"), exports);
+__exportStar(require("./Help"), exports);
 __exportStar(require("./Hide"), exports);
-__exportStar(require("./Home"), exports);
 __exportStar(require("./HomeFilled"), exports);
+__exportStar(require("./Home"), exports);
 __exportStar(require("./HydroPower"), exports);
 __exportStar(require("./Info"), exports);
 __exportStar(require("./Link"), exports);
 __exportStar(require("./Logo"), exports);
-__exportStar(require("./Mail"), exports);
 __exportStar(require("./MailOpen"), exports);
+__exportStar(require("./Mail"), exports);
 __exportStar(require("./Menu"), exports);
-__exportStar(require("./Message"), exports);
 __exportStar(require("./MessageFilled"), exports);
+__exportStar(require("./Message"), exports);
 __exportStar(require("./Minus"), exports);
 __exportStar(require("./Mobile"), exports);
 __exportStar(require("./NewWindow"), exports);
-__exportStar(require("./PaymentCard"), exports);
 __exportStar(require("./PaymentCardFilled"), exports);
+__exportStar(require("./PaymentCard"), exports);
 __exportStar(require("./Phone"), exports);
 __exportStar(require("./Plus"), exports);
 __exportStar(require("./Pound"), exports);
+__exportStar(require("./PricingFilled"), exports);
 __exportStar(require("./Pricing"), exports);
 __exportStar(require("./Search"), exports);
 __exportStar(require("./Security"), exports);
-__exportStar(require("./Shop"), exports);
 __exportStar(require("./ShopFilled"), exports);
+__exportStar(require("./Shop"), exports);
 __exportStar(require("./Show"), exports);
 __exportStar(require("./SmartHome"), exports);
 __exportStar(require("./SmartMeter"), exports);
 __exportStar(require("./Solar"), exports);
-__exportStar(require("./Star"), exports);
 __exportStar(require("./StarFilled"), exports);
+__exportStar(require("./Star"), exports);
 __exportStar(require("./Sun"), exports);
 __exportStar(require("./Torch"), exports);
 __exportStar(require("./Trees"), exports);
 __exportStar(require("./Tune"), exports);
-__exportStar(require("./User"), exports);
 __exportStar(require("./UserFilled"), exports);
+__exportStar(require("./User"), exports);
 __exportStar(require("./Wallet"), exports);
-__exportStar(require("./WalletFilled"), exports);
 __exportStar(require("./WarmHome"), exports);
 __exportStar(require("./Warning"), exports);
 __exportStar(require("./WebAddress"), exports);

package/dist/providers/types.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
 import { SvgProps } from 'react-native-svg';
-export type IconName = 'address' | 'advice' | 'archive' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'award' | 'battery' | 'cal-book' | 'cal' | 'caret-arrow-down' | 'caret-arrow-left' | 'caret-arrow-right' | 'caret-arrow-up' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'chart-filled' | 'chart' | 'check-circle' | 'check' | 'chevron-down' | 'chevron-left-small-first' | 'chevron-left-small' | 'chevron-left' | 'chevron-right-small-last' | 'chevron-right-small' | 'chevron-right' | 'chevron-up' | 'circle' | 'close-circle' | 'cross' | 'doc' | 'dollar' | 'download' | 'eco-home' | 'eco' | 'edit' | 'electric-car' | 'electric-home' | 'electricity' | 'energy-advice' | 'equals' | 'euro' | 'gas' | 'globe-address' | 'help-filled' | 'help' | 'hide' | 'home-filled' | 'home' | 'hydro-power' | 'info' | 'link' | 'logo' | 'mail-open' | 'mail' | 'menu' | 'message-filled' | 'message' | 'minus' | 'mobile' | 'new-window' | 'payment-card-filled' | 'payment-card' | 'phone' | 'plus' | 'pound' | 'pricing' | 'search' | 'security' | 'shop-filled' | 'shop' | 'show' | 'smart-home' | 'smart-meter' | 'solar' | 'star-filled' | 'star' | 'sun' | 'torch' | 'trees' | 'tune' | 'user-filled' | 'user' | 'wallet' | 'warm-home' | 'warning' | 'web-address' | 'wind-power';
-export type IconNameExtended = IconName | string;
+export type IconName = 'address' | 'advice' | 'archive' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'award' | 'battery' | 'cal-book' | 'cal' | 'caret-arrow-down' | 'caret-arrow-left' | 'caret-arrow-right' | 'caret-arrow-up' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'chart-filled' | 'chart' | 'check-circle' | 'check' | 'chevron-down' | 'chevron-left-small-first' | 'chevron-left-small' | 'chevron-left' | 'chevron-right-small-last' | 'chevron-right-small' | 'chevron-right' | 'chevron-up' | 'circle' | 'close-circle' | 'cross' | 'doc' | 'dollar' | 'download' | 'eco-home' | 'eco' | 'edit' | 'electric-car' | 'electric-home' | 'electricity' | 'energy-advice' | 'equals' | 'euro' | 'gas' | 'globe-address' | 'help-filled' | 'help' | 'hide' | 'home-filled' | 'home' | 'hydro-power' | 'info' | 'link' | 'logo' | 'mail-open' | 'mail' | 'menu' | 'message-filled' | 'message' | 'minus' | 'mobile' | 'new-window' | 'payment-card-filled' | 'payment-card' | 'phone' | 'plus' | 'pound' | 'pricing-filled' | 'pricing' | 'search' | 'security' | 'shop-filled' | 'shop' | 'show' | 'smart-home' | 'smart-meter' | 'solar' | 'star-filled' | 'star' | 'sun' | 'torch' | 'trees' | 'tune' | 'user-filled' | 'user' | 'wallet' | 'warm-home' | 'warning' | 'web-address' | 'wind-power';
+export type IconNameExtended = IconName | (string & {});
 export type IconsType = Record<string, FunctionComponent<SvgProps>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "4.2.0",
+  "version": "4.3.0-canary-3908de8-301",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,10 +14,10 @@
   },
   "dependencies": {
     "@backpackapp-io/react-native-toast": "^0.10.0",
+    "@ovotech/element-core": "3.1.0-canary-3908de8-301",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
-    "react-native-reanimated-carousel": "^3.5.1",
-    "@ovotech/element-core": "3.1.0"
+    "react-native-reanimated-carousel": "^3.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",