@ovotech/element-native 4.2.0-canary-e1006e1-298 → 4.2.0

package/dist/components/ActionCard/ActionCard.js

@@ -1,15 +1,4 @@
 "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);
@@ -47,13 +36,7 @@ var __1 = require("../");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var P_1 = require("../P");
 var IndicatorIconShape_1 = require("./IndicatorIconShape");
-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 StyledCard = 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];
@@ -75,9 +58,6 @@ var ActionCard = function (_a) {
     var cardAction = hasSingleAction
         ? onPressActionButton || onPressIndicator
         : null;
-    var RootContainer = hasSingleAction
-        ? StyledPressableCard
-        : StyledCard;
     (0, react_1.useEffect)(function () {
         if (onMount) {
             onMount();
@@ -86,7 +66,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)(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: {
+    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: {
                                         color: inverted
                                             ? semantic.inverted.message.link
                                             : semantic.message.branded,
@@ -126,6 +106,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,8 +14,7 @@ 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" | "standalone" | "inList"> & import("react").RefAttributes<View>>;
+declare const Action: import("react").ForwardRefExoticComponent<Pick<ActionProps, "onPress" | "inverted" | "inline" | keyof ViewProps | "fullWidth" | "iconLeft" | "iconRight" | "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, _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 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 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, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight", "standalone"]);
+    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 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, 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] })));
+    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] })));
 });
 exports.Action = Action;

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

@@ -1708,7 +1708,6 @@ 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, 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');
+    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;

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?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
+    iconLeft?: string | undefined;
+    iconRight?: string | 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?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
+    iconLeft?: string | undefined;
+    iconRight?: string | 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?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
+    iconLeft?: string | undefined;
+    iconRight?: string | 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?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
+    iconLeft?: string | undefined;
+    iconRight?: string | 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),
                         });
                     });
-                }, accessibilityRole: "dropdown", children: [(0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: selected.value === 'default'
+                }, 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?: IconNameExtended | undefined;
-    iconRight?: IconNameExtended | undefined;
+    iconLeft?: string | undefined;
+    iconRight?: string | undefined;
     rightSlot?: ReactNode;
 } & import("react").RefAttributes<TextInput>>;
 export { Input };

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

@@ -3,8 +3,6 @@ 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, 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) {
+    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) {
             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?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
+    iconLeft?: string | undefined;
+    iconRight?: string | 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?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
+    iconLeft?: string | undefined;
+    iconRight?: string | 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?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
+    iconLeft?: string | undefined;
+    iconRight?: string | 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?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
+    iconLeft?: string | undefined;
+    iconRight?: string | 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?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
+    iconLeft?: string | undefined;
+    iconRight?: string | 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?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
+    iconLeft?: string | undefined;
+    iconRight?: string | 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, 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)); })] }) }) }) })] }));
+    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)); })] }) }) }) })] }));
 };
 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,6 +562,4 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
             };
         };
     };
-}, {
-    color?: string | undefined;
-}, never>;
+}, {}, 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 _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  ");
+    var core = _a.theme.core;
+    return "\n    font-family: ".concat(core.fontFamily.bodyBold.native, ";\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?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
+    iconLeft?: string | undefined;
+    iconRight?: string | 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?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
+    iconLeft?: string | undefined;
+    iconRight?: string | 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?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
+    iconLeft?: string | undefined;
+    iconRight?: string | 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?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
+    iconLeft?: string | undefined;
+    iconRight?: string | undefined;
     rightSlot?: import("react").ReactNode;
 } & {
     rows?: number | undefined;

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

@@ -1,14 +1,3 @@
-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';
@@ -18,13 +7,7 @@ import { Action, CTAButton, Heading2, Heading3, Icon, Margin, Stack, } from '../
 import styled, { ThemeContext } from '../../styled.native';
 import { P } from '../P';
 import { IndicatorIconShape } from './IndicatorIconShape';
-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 StyledCard = 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];
@@ -46,9 +29,6 @@ export var ActionCard = function (_a) {
     var cardAction = hasSingleAction
         ? onPressActionButton || onPressIndicator
         : null;
-    var RootContainer = hasSingleAction
-        ? StyledPressableCard
-        : StyledCard;
     useEffect(function () {
         if (onMount) {
             onMount();
@@ -57,7 +37,7 @@ export var ActionCard = function (_a) {
     var Heading = inline ? Heading3 : Heading2;
     var cardPadding = core.space[inline ? 4 : 6];
     var negativeMarginAdjustment = -cardPadding;
-    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: {
+    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: {
                                         color: inverted
                                             ? semantic.inverted.message.link
                                             : semantic.message.branded,
@@ -97,5 +77,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, _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 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 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, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight", "standalone"]);
+    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 smallAndUp = useBreakpoint().smallAndUp;
-    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] })));
+    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] })));
 });
 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, 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');
+    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' : '');
 });
 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),
                         });
                     });
-                }, accessibilityRole: "dropdown", children: [_jsx(P, { children: _jsx(Strong, { children: selected.value === 'default'
+                }, 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, 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) {
+    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) {
             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, 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)); })] }) }) }) })] }));
+    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)); })] }) }) }) })] }));
 };
 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 _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  ");
+    var core = _a.theme.core;
+    return "\n    font-family: ".concat(core.fontFamily.bodyBold.native, ";\n  ");
 });

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 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-canary-e1006e1-298",
+  "version": "4.2.0",
   "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-e1006e1-298",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
-    "react-native-reanimated-carousel": "^3.5.1"
+    "react-native-reanimated-carousel": "^3.5.1",
+    "@ovotech/element-core": "3.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",