@ovotech/element-native 4.0.3 → 4.0.4-canary-8d6539a-263

package/dist/components/NavHeader/IconButton.js

@@ -2,19 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconButton = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
 var react_native_1 = require("react-native");
+var styled_native_1 = require("../../styled.native");
 var Icon_1 = require("../Icon");
 var NavHeader_styles_1 = require("./NavHeader.styles");
 var IconButton = function (_a) {
     var size = _a.size, animation = _a.animation, rightActionConfig = _a.rightActionConfig;
     var ButtonStyled = size === 'small' ? NavHeader_styles_1.StyledIconButtonS : NavHeader_styles_1.StyledIconButtonL;
+    var theme = (0, styled_native_1.useTheme)();
     if (!rightActionConfig || !(rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.iconName)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { hitSlop: 44, pressRetentionOffset: 44, 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, 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: element_core_1.theme.semantic.inverted.message.base }) }));
+            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 }) }));
         } }));
 };
 exports.IconButton = IconButton;

package/dist/components/NavHeader/NavHeader.js

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavHeader = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var styled_native_1 = require("../../styled.native");
 var ActionList_1 = require("../ActionList");
 var IconButton_1 = require("./IconButton");
 var NavHeader_styles_1 = require("./NavHeader.styles");
@@ -34,6 +35,7 @@ var NavHeader = function (_a) {
     var title = _a.title, scrolled = _a.scrolled, canGoBack = _a.canGoBack, rightActionConfig = _a.rightActionConfig, _b = _a.topOffset, topOffset = _b === void 0 ? 0 : _b, _c = _a.backButtonText, backButtonText = _c === void 0 ? 'Back' : _c, onHeaderHeightChange = _a.onHeaderHeightChange, onBackButtonPress = _a.onBackButtonPress;
     var hasRightAction = !!rightActionConfig;
     var hasTitle = title !== undefined && (title === null || title === void 0 ? void 0 : title.length) > 0;
+    var theme = (0, styled_native_1.useTheme)();
     var layoutHeight = (0, react_native_reanimated_1.useSharedValue)(0);
     var animatedHeightStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
         return {
@@ -58,6 +60,8 @@ var NavHeader = function (_a) {
     // content inside NavContainer is the only dynamic part of NavHeader
     return ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: (0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavContainer, { topOffset: topOffset, onLayout: onLayout, titleVisible: hasTitle, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: {
                         width: scrolled ? '33.3%' : '100%',
+                        // Important for maintaining white space above the title on main app screens.
+                        height: !canGoBack ? theme.core.space[10] : undefined,
                     }, children: canGoBack && ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.ActionWrapper, { collapsed: scrolled, children: (0, jsx_runtime_1.jsx)(ActionList_1.Action, { iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress, children: backButtonText }) })) }), scrolled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitleWrapper, { titleVisible: hasTitle, children: (0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitle, { numberOfLines: 1, ellipsizeMode: "tail", entering: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutDown.duration(FADE_ANIMATION_DURATION), children: title }) }), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.ExpandedTitle
                         // if we don't have right action leave more space for the title text in expanded state
                         , { 

package/dist/components/NavHeader/NavHeader.styles.js

@@ -42,7 +42,9 @@ exports.NavWrapper = (0, styled_native_1.default)(react_native_reanimated_1.defa
 });
 exports.NavContainer = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, topOffset = _a.topOffset, titleVisible = _a.titleVisible;
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), Z_INDEX + 1, titleVisible ? '100%' : '50%', (0, element_core_1.numToPx)(core.space[(topOffset !== null && topOffset !== void 0 ? topOffset : titleVisible) ? 2 : 4]), (0, element_core_1.numToPx)(core.space[titleVisible ? 2 : 4]), (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(core.space[4]));
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), Z_INDEX + 1, titleVisible ? '100%' : '50%', topOffset
+        ? topOffset
+        : (0, element_core_1.numToPx)(core.space[titleVisible ? 2 : 4]), (0, element_core_1.numToPx)(core.space[titleVisible ? 2 : 4]), (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(core.space[4]));
 });
 exports.ExpandedTitle = (0, styled_native_1.default)(react_native_reanimated_1.default.Text)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBackButton = _a.hasBackButton, fullWidth = _a.fullWidth, titleVisible = _a.titleVisible;

package/dist/components/SegmentedControls/SegmentedControls.d.ts

@@ -1,16 +1,16 @@
-import { Dispatch, SetStateAction } from 'react';
+import { ViewProps } from 'react-native';
 export type Segment = {
     key: string;
     label: string;
     accessibilityLabel?: string;
 };
-type SegmentedControlsProps = {
+type SegmentedControlsProps = ViewProps & {
     activeSegment: Segment[][number];
     segments: Segment[];
-    setActiveSegment: Dispatch<SetStateAction<Segment[][number]>>;
+    setActiveSegment: (...args: any[]) => void;
     inline?: boolean;
     multipleRows?: boolean;
     size?: 'small' | 'large';
 };
-export declare const SegmentedControls: ({ activeSegment, setActiveSegment, segments, inline, multipleRows, size, }: SegmentedControlsProps) => JSX.Element;
+export declare const SegmentedControls: ({ activeSegment, setActiveSegment, segments, inline, multipleRows, size, ...rest }: SegmentedControlsProps) => JSX.Element;
 export {};

package/dist/components/SegmentedControls/SegmentedControls.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);
@@ -22,17 +33,30 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SegmentedControls = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
 var styled_native_1 = __importStar(require("../../styled.native"));
 var SegmentButton_1 = require("./components/SegmentButton");
+/* These settings were found to be nice and fast whilst maintaining spring */
 var springSettings = {
-    damping: 15,
+    damping: 25,
+    mass: 0.25,
 };
 var SegmentedControls = function (_a) {
-    var activeSegment = _a.activeSegment, setActiveSegment = _a.setActiveSegment, segments = _a.segments, _b = _a.inline, inline = _b === void 0 ? false : _b, multipleRows = _a.multipleRows, _c = _a.size, size = _c === void 0 ? 'large' : _c;
+    var activeSegment = _a.activeSegment, setActiveSegment = _a.setActiveSegment, segments = _a.segments, _b = _a.inline, inline = _b === void 0 ? false : _b, multipleRows = _a.multipleRows, _c = _a.size, size = _c === void 0 ? 'large' : _c, rest = __rest(_a, ["activeSegment", "setActiveSegment", "segments", "inline", "multipleRows", "size"]);
     var animatedX = (0, react_native_reanimated_1.useSharedValue)(0);
     var animatedY = (0, react_native_reanimated_1.useSharedValue)(0);
     var animatedHeight = (0, react_native_reanimated_1.useSharedValue)(0);
@@ -53,23 +77,26 @@ var SegmentedControls = function (_a) {
         borderRadius: theme.core.radius.max,
         backgroundColor: theme.semantic.surface.elevated,
     }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
-    return ((0, jsx_runtime_1.jsxs)(SegmentsContainer, { "$inline": inline, "$multipleRows": multipleRows, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedBackgroundStyle }), segments.map(function (segment) { return ((0, jsx_runtime_1.jsx)(SegmentButton_1.SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, onPress: function (x, y, width) {
-                    setActiveSegment(segment);
-                    animatedX.value = (0, react_native_reanimated_1.withSpring)(x, springSettings);
-                    animatedY.value = (0, react_native_reanimated_1.withSpring)(y, springSettings);
-                    animatedWidth.value = width;
-                }, onLayout: function (width, height, x, y) {
-                    if (activeSegment.key === segment.key) {
-                        animatedX.value = x;
-                        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
-                        // choices go on the second row. The only way I could get it to work
-                        // was to hardcode the denominator to 3 for the single row ones
-                        // and 1.1 for the multiple row ones.
-                        animatedY.value = y - height / (multipleRows ? 1.1 : 3);
-                        animatedHeight.value = height;
+    return ((0, jsx_runtime_1.jsxs)(SegmentsContainer, __assign({ "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedBackgroundStyle }), segments.map(function (segment) {
+                var _a;
+                return ((0, jsx_runtime_1.jsx)(SegmentButton_1.SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, onPress: function (x, y, width) {
+                        setActiveSegment(segment);
+                        animatedX.value = (0, react_native_reanimated_1.withSpring)(x, springSettings);
+                        animatedY.value = (0, react_native_reanimated_1.withSpring)(y, springSettings);
                         animatedWidth.value = width;
-                    }
-                }, multipleRows: multipleRows, size: size, inline: inline }, segment.key)); })] }));
+                    }, onLayout: function (width, height, x, y) {
+                        if (activeSegment.key === segment.key) {
+                            animatedX.value = x;
+                            // (adrian.pop) - I couldn't figure out how to make the positioning work once the
+                            // choices go on the second row. The only way I could get it to work
+                            // was to hardcode the denominator to 3 for the single row ones
+                            // and 1.1 for the multiple row ones.
+                            animatedY.value = y - height / (multipleRows ? 1.1 : 3);
+                            animatedHeight.value = height;
+                            animatedWidth.value = width;
+                        }
+                    }, multipleRows: multipleRows, size: size, inline: inline, testID: "".concat((_a = rest.testID) !== null && _a !== void 0 ? _a : 'segment', "-").concat(segment.key) }, segment.key));
+            })] })));
 };
 exports.SegmentedControls = SegmentedControls;
 var SegmentsContainer = styled_native_1.default.View(function (_a) {

package/dist/components/SegmentedControls/components/SegmentButton.d.ts

@@ -7,6 +7,7 @@ type SegmentButtonProps = {
     inline?: boolean;
     multipleRows?: boolean;
     size?: 'small' | 'large';
+    testID?: string;
 };
-export declare const SegmentButton: ({ accessibilityLabel, inline, isSelected, label, multipleRows, onLayout, onPress, size, }: SegmentButtonProps) => JSX.Element;
+export declare const SegmentButton: ({ accessibilityLabel, inline, isSelected, label, multipleRows, onLayout, onPress, size, testID, }: SegmentButtonProps) => JSX.Element;
 export {};

package/dist/components/SegmentedControls/components/SegmentButton.js

@@ -35,7 +35,7 @@ var styled_native_1 = __importDefault(require("../../../styled.native"));
 var P_1 = require("../../P");
 var AnimatedP = react_native_reanimated_1.default.createAnimatedComponent(P_1.P);
 var SegmentButton = function (_a) {
-    var accessibilityLabel = _a.accessibilityLabel, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, _b = _a.size, size = _b === void 0 ? 'large' : _b;
+    var accessibilityLabel = _a.accessibilityLabel, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, _b = _a.size, size = _b === void 0 ? 'large' : _b, testID = _a.testID;
     var xRef = (0, react_1.useRef)(0);
     var yRef = (0, react_1.useRef)(0);
     var widthRef = (0, react_1.useRef)(0);
@@ -76,7 +76,7 @@ var SegmentButton = function (_a) {
     return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel, hitSlop: {
             top: hitslopVal,
             bottom: hitslopVal,
-        }, style: { flexGrow: inline || multipleRows ? undefined : 1 }, children: (0, jsx_runtime_1.jsxs)(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [(0, jsx_runtime_1.jsx)(SSegmentText, { style: {
+        }, style: { flexGrow: inline || multipleRows ? undefined : 1 }, testID: testID, children: (0, jsx_runtime_1.jsxs)(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [(0, jsx_runtime_1.jsx)(SSegmentText, { style: {
                         opacity: 0,
                         fontWeight: '900',
                     }, "$isSelected": false, children: label }), (0, jsx_runtime_1.jsx)(SSegmentText, { style: animatedStyleNormal, "$isSelected": false, numberOfLines: 1, adjustsFontSizeToFit: true, children: label }), (0, jsx_runtime_1.jsx)(SSegmentText, { style: animatedStyleBold, "$isSelected": true, numberOfLines: 1, adjustsFontSizeToFit: true, children: label })] }) }));

package/dist/components/SegmentedControls/index.d.ts

@@ -1,2 +1,2 @@
-import { SegmentedControls } from './SegmentedControls';
-export { SegmentedControls };
+import { Segment, SegmentedControls } from './SegmentedControls';
+export { Segment, SegmentedControls };

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

@@ -1,15 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { theme } from '@ovotech/element-core';
 import { Pressable } from 'react-native';
+import { useTheme } from '../../styled.native';
 import { Icon } from '../Icon';
 import { StyledIconButtonL, StyledIconButtonS } from './NavHeader.styles';
 export var IconButton = function (_a) {
     var size = _a.size, animation = _a.animation, rightActionConfig = _a.rightActionConfig;
     var ButtonStyled = size === 'small' ? StyledIconButtonS : StyledIconButtonL;
+    var theme = useTheme();
     if (!rightActionConfig || !(rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.iconName)) {
         return null;
     }
-    return (_jsx(Pressable, { hitSlop: 44, pressRetentionOffset: 44, 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, 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/NavHeader/NavHeader.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Animated, { Easing, FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { useTheme } from '../../styled.native';
 import { Action } from '../ActionList';
 import { IconButton } from './IconButton';
 import { ActionWrapper, CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, NavWrapper, } from './NavHeader.styles';
@@ -8,6 +9,7 @@ export var NavHeader = function (_a) {
     var title = _a.title, scrolled = _a.scrolled, canGoBack = _a.canGoBack, rightActionConfig = _a.rightActionConfig, _b = _a.topOffset, topOffset = _b === void 0 ? 0 : _b, _c = _a.backButtonText, backButtonText = _c === void 0 ? 'Back' : _c, onHeaderHeightChange = _a.onHeaderHeightChange, onBackButtonPress = _a.onBackButtonPress;
     var hasRightAction = !!rightActionConfig;
     var hasTitle = title !== undefined && (title === null || title === void 0 ? void 0 : title.length) > 0;
+    var theme = useTheme();
     var layoutHeight = useSharedValue(0);
     var animatedHeightStyle = useAnimatedStyle(function () {
         return {
@@ -32,6 +34,8 @@ export var NavHeader = function (_a) {
     // content inside NavContainer is the only dynamic part of NavHeader
     return (_jsx(NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: _jsxs(NavContainer, { topOffset: topOffset, onLayout: onLayout, titleVisible: hasTitle, children: [_jsx(Animated.View, { style: {
                         width: scrolled ? '33.3%' : '100%',
+                        // Important for maintaining white space above the title on main app screens.
+                        height: !canGoBack ? theme.core.space[10] : undefined,
                     }, children: canGoBack && (_jsx(ActionWrapper, { collapsed: scrolled, children: _jsx(Action, { iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress, children: backButtonText }) })) }), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { titleVisible: hasTitle, children: _jsx(CollapsedTitle, { numberOfLines: 1, ellipsizeMode: "tail", entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION), children: title }) }), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(ExpandedTitle
                         // if we don't have right action leave more space for the title text in expanded state
                         , { 

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

@@ -13,7 +13,9 @@ export var NavWrapper = styled(Animated.View)(function (_a) {
 });
 export var NavContainer = styled.View(function (_a) {
     var core = _a.theme.core, topOffset = _a.topOffset, titleVisible = _a.titleVisible;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), Z_INDEX + 1, titleVisible ? '100%' : '50%', numToPx(core.space[(topOffset !== null && topOffset !== void 0 ? topOffset : titleVisible) ? 2 : 4]), numToPx(core.space[titleVisible ? 2 : 4]), numToPx(core.space[4]), numToPx(core.space[4]));
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), Z_INDEX + 1, titleVisible ? '100%' : '50%', topOffset
+        ? topOffset
+        : numToPx(core.space[titleVisible ? 2 : 4]), numToPx(core.space[titleVisible ? 2 : 4]), numToPx(core.space[4]), numToPx(core.space[4]));
 });
 export var ExpandedTitle = styled(Animated.Text)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBackButton = _a.hasBackButton, fullWidth = _a.fullWidth, titleVisible = _a.titleVisible;

package/dist/esm/components/SegmentedControls/SegmentedControls.js

@@ -1,12 +1,36 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Animated, { useAnimatedStyle, useSharedValue, withSpring, } from 'react-native-reanimated';
 import styled, { useTheme } from '../../styled.native';
 import { SegmentButton } from './components/SegmentButton';
+/* These settings were found to be nice and fast whilst maintaining spring */
 var springSettings = {
-    damping: 15,
+    damping: 25,
+    mass: 0.25,
 };
 export var SegmentedControls = function (_a) {
-    var activeSegment = _a.activeSegment, setActiveSegment = _a.setActiveSegment, segments = _a.segments, _b = _a.inline, inline = _b === void 0 ? false : _b, multipleRows = _a.multipleRows, _c = _a.size, size = _c === void 0 ? 'large' : _c;
+    var activeSegment = _a.activeSegment, setActiveSegment = _a.setActiveSegment, segments = _a.segments, _b = _a.inline, inline = _b === void 0 ? false : _b, multipleRows = _a.multipleRows, _c = _a.size, size = _c === void 0 ? 'large' : _c, rest = __rest(_a, ["activeSegment", "setActiveSegment", "segments", "inline", "multipleRows", "size"]);
     var animatedX = useSharedValue(0);
     var animatedY = useSharedValue(0);
     var animatedHeight = useSharedValue(0);
@@ -27,23 +51,26 @@ export var SegmentedControls = function (_a) {
         borderRadius: theme.core.radius.max,
         backgroundColor: theme.semantic.surface.elevated,
     }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
-    return (_jsxs(SegmentsContainer, { "$inline": inline, "$multipleRows": multipleRows, children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(function (segment) { return (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, onPress: function (x, y, width) {
-                    setActiveSegment(segment);
-                    animatedX.value = withSpring(x, springSettings);
-                    animatedY.value = withSpring(y, springSettings);
-                    animatedWidth.value = width;
-                }, onLayout: function (width, height, x, y) {
-                    if (activeSegment.key === segment.key) {
-                        animatedX.value = x;
-                        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
-                        // choices go on the second row. The only way I could get it to work
-                        // was to hardcode the denominator to 3 for the single row ones
-                        // and 1.1 for the multiple row ones.
-                        animatedY.value = y - height / (multipleRows ? 1.1 : 3);
-                        animatedHeight.value = height;
+    return (_jsxs(SegmentsContainer, __assign({ "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(function (segment) {
+                var _a;
+                return (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, onPress: function (x, y, width) {
+                        setActiveSegment(segment);
+                        animatedX.value = withSpring(x, springSettings);
+                        animatedY.value = withSpring(y, springSettings);
                         animatedWidth.value = width;
-                    }
-                }, multipleRows: multipleRows, size: size, inline: inline }, segment.key)); })] }));
+                    }, onLayout: function (width, height, x, y) {
+                        if (activeSegment.key === segment.key) {
+                            animatedX.value = x;
+                            // (adrian.pop) - I couldn't figure out how to make the positioning work once the
+                            // choices go on the second row. The only way I could get it to work
+                            // was to hardcode the denominator to 3 for the single row ones
+                            // and 1.1 for the multiple row ones.
+                            animatedY.value = y - height / (multipleRows ? 1.1 : 3);
+                            animatedHeight.value = height;
+                            animatedWidth.value = width;
+                        }
+                    }, multipleRows: multipleRows, size: size, inline: inline, testID: "".concat((_a = rest.testID) !== null && _a !== void 0 ? _a : 'segment', "-").concat(segment.key) }, segment.key));
+            })] })));
 };
 var SegmentsContainer = styled.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, $inline = _a.$inline, $multipleRows = _a.$multipleRows;

package/dist/esm/components/SegmentedControls/components/SegmentButton.js

@@ -6,7 +6,7 @@ import styled from '../../../styled.native';
 import { P } from '../../P';
 var AnimatedP = Animated.createAnimatedComponent(P);
 export var SegmentButton = function (_a) {
-    var accessibilityLabel = _a.accessibilityLabel, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, _b = _a.size, size = _b === void 0 ? 'large' : _b;
+    var accessibilityLabel = _a.accessibilityLabel, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, _b = _a.size, size = _b === void 0 ? 'large' : _b, testID = _a.testID;
     var xRef = useRef(0);
     var yRef = useRef(0);
     var widthRef = useRef(0);
@@ -47,7 +47,7 @@ export var SegmentButton = function (_a) {
     return (_jsx(Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel, hitSlop: {
             top: hitslopVal,
             bottom: hitslopVal,
-        }, style: { flexGrow: inline || multipleRows ? undefined : 1 }, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [_jsx(SSegmentText, { style: {
+        }, style: { flexGrow: inline || multipleRows ? undefined : 1 }, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [_jsx(SSegmentText, { style: {
                         opacity: 0,
                         fontWeight: '900',
                     }, "$isSelected": false, children: label }), _jsx(SSegmentText, { style: animatedStyleNormal, "$isSelected": false, numberOfLines: 1, adjustsFontSizeToFit: true, children: label }), _jsx(SSegmentText, { style: animatedStyleBold, "$isSelected": true, numberOfLines: 1, adjustsFontSizeToFit: true, children: label })] }) }));

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, CalBook, Cal, CaretArrowDown, CaretArrowLeft, CaretArrowRight, CaretArrowUp, ChartFilled, Chart, CheckCircle, Check, ChevronDown, ChevronLeftSmallFirst, ChevronLeftSmall, ChevronLeft, ChevronRightSmallLast, ChevronRightSmall, ChevronRight, ChevronUp, 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, Pricing, Search, Security, Show, SmartHome, SmartMeter, Solar, StarFilled, Star, Sun, Torch, Trees, Tune, UserFilled, User, Wallet, WarmHome, Warning, WebAddress, WindPower, } from './icons';
+import { Address, Advice, Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Award, Battery, CalBook, Cal, CaretArrowDown, CaretArrowLeft, CaretArrowRight, CaretArrowUp, ChartFilled, Chart, CheckCircle, Check, ChevronDown, ChevronLeftSmallFirst, ChevronLeftSmall, ChevronLeft, ChevronRightSmallLast, ChevronRightSmall, ChevronRight, ChevronUp, 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, 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,
@@ -81,6 +81,8 @@ var defaultIcons = {
     pricing: Pricing,
     search: Search,
     security: Security,
+    'shop-filled': ShopFilled,
+    shop: Shop,
     show: Show,
     'smart-home': SmartHome,
     'smart-meter': SmartMeter,

package/dist/esm/providers/icons/Shop.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, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export var Shop = function (props) { return (_jsxs(Svg, __assign({ viewBox: "0 0 16 16" }, props, { children: [_jsx(Path, { fill: "currentColor", d: "M13.425 11.06 14.5 6.19h-1.8l-1.51-3.495-1.375.595 1.25 2.9h-6.19L6.19 3.3l-1.365-.62L3.23 6.19H1.505l1.5 6.81h9.19l-.4-1.5H4.21l-.84-3.81h9.265l-.84 3.81 1.63-.44Z" }), _jsx(Path, { fill: "currentColor", d: "M4.755 10.495h1.5V8.73H6.25l-1.495.4v1.365ZM7.255 10.495h1.5V8.73H8.75l-1.495.4v1.365ZM9.755 10.495h1.5V8.73h-.005l-1.495.4v1.365Z" })] }))); };

package/dist/esm/providers/icons/ShopFilled.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, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export var ShopFilled = function (props) { return (_jsxs(Svg, __assign({ viewBox: "0 0 16 16" }, props, { children: [_jsx(Path, { fill: "currentColor", d: "m13.39 11.122 1.13-4.857-1.8-.02-1.47-3.513-1.381.58 1.217 2.913-6.19-.07L6.244 3.28l-1.358-.636-1.635 3.492-1.725-.02 1.422 6.827 9.19.105-.383-1.505-7.585-.087-.796-3.819 9.264.106-.883 3.8 1.635-.421Z" }), _jsx(Path, { fill: "currentColor", d: "m12.636 7.742-9.264-.107.797 3.818 7.583.087.884-3.798Z" })] }))); };

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

@@ -66,6 +66,8 @@ export * from './Pound';
 export * from './Pricing';
 export * from './Search';
 export * from './Security';
+export * from './ShopFilled';
+export * from './Shop';
 export * from './Show';
 export * from './SmartHome';
 export * from './SmartMeter';

package/dist/providers/IconsProvider.js

@@ -84,6 +84,8 @@ var defaultIcons = {
     pricing: icons_1.Pricing,
     search: icons_1.Search,
     security: icons_1.Security,
+    'shop-filled': icons_1.ShopFilled,
+    shop: icons_1.Shop,
     show: icons_1.Show,
     'smart-home': icons_1.SmartHome,
     'smart-meter': icons_1.SmartMeter,

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

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

package/dist/providers/icons/Shop.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.Shop = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_svg_1 = __importStar(require("react-native-svg"));
+var Shop = function (props) { return ((0, jsx_runtime_1.jsxs)(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: "M13.425 11.06 14.5 6.19h-1.8l-1.51-3.495-1.375.595 1.25 2.9h-6.19L6.19 3.3l-1.365-.62L3.23 6.19H1.505l1.5 6.81h9.19l-.4-1.5H4.21l-.84-3.81h9.265l-.84 3.81 1.63-.44Z" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { fill: "currentColor", d: "M4.755 10.495h1.5V8.73H6.25l-1.495.4v1.365ZM7.255 10.495h1.5V8.73H8.75l-1.495.4v1.365ZM9.755 10.495h1.5V8.73h-.005l-1.495.4v1.365Z" })] }))); };
+exports.Shop = Shop;

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

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

package/dist/providers/icons/ShopFilled.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.ShopFilled = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_svg_1 = __importStar(require("react-native-svg"));
+var ShopFilled = function (props) { return ((0, jsx_runtime_1.jsxs)(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: "m13.39 11.122 1.13-4.857-1.8-.02-1.47-3.513-1.381.58 1.217 2.913-6.19-.07L6.244 3.28l-1.358-.636-1.635 3.492-1.725-.02 1.422 6.827 9.19.105-.383-1.505-7.585-.087-.796-3.819 9.264.106-.883 3.8 1.635-.421Z" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { fill: "currentColor", d: "m12.636 7.742-9.264-.107.797 3.818 7.583.087.884-3.798Z" })] }))); };
+exports.ShopFilled = ShopFilled;

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

@@ -66,6 +66,8 @@ export * from './Pound';
 export * from './Pricing';
 export * from './Search';
 export * from './Security';
+export * from './ShopFilled';
+export * from './Shop';
 export * from './Show';
 export * from './SmartHome';
 export * from './SmartMeter';

package/dist/providers/icons/index.js

@@ -82,6 +82,8 @@ __exportStar(require("./Pound"), exports);
 __exportStar(require("./Pricing"), exports);
 __exportStar(require("./Search"), exports);
 __exportStar(require("./Security"), exports);
+__exportStar(require("./ShopFilled"), exports);
+__exportStar(require("./Shop"), exports);
 __exportStar(require("./Show"), exports);
 __exportStar(require("./SmartHome"), exports);
 __exportStar(require("./SmartMeter"), 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' | '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' | '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' | '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 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' | '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' | '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 IconsType = Record<string, FunctionComponent<SvgProps>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "4.0.3",
+  "version": "4.0.4-canary-8d6539a-263",
   "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.0.1-canary-8d6539a-263",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
-    "react-native-reanimated-carousel": "^3.5.1",
-    "@ovotech/element-core": "3.0.1"
+    "react-native-reanimated-carousel": "^3.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",