@ovotech/element-native 4.0.4 → 4.1.0-canary-9534c0a-267

package/dist/components/SegmentedControls/SegmentedControls.js

@@ -79,7 +79,7 @@ var SegmentedControls = function (_a) {
     }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
     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) {
+                return ((0, jsx_runtime_1.jsx)(SegmentButton_1.SegmentButton, { isSelected: activeSegment.key === segment.key, isLast: segments[segments.length - 1].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);

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

@@ -1,4 +1,5 @@
 type SegmentButtonProps = {
+    isLast: boolean;
     isSelected: boolean;
     label: string;
     onPress: (x: number, y: number, width: number) => void;
@@ -9,5 +10,5 @@ type SegmentButtonProps = {
     size?: 'small' | 'large';
     testID?: string;
 };
-export declare const SegmentButton: ({ accessibilityLabel, inline, isSelected, label, multipleRows, onLayout, onPress, size, testID, }: SegmentButtonProps) => JSX.Element;
+export declare const SegmentButton: ({ accessibilityLabel, inline, isLast, 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, testID = _a.testID;
+    var accessibilityLabel = _a.accessibilityLabel, inline = _a.inline, isLast = _a.isLast, 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);
@@ -57,12 +57,16 @@ var SegmentButton = function (_a) {
     (0, react_1.useEffect)(function () {
         fontWeightAnim.value = (0, react_native_reanimated_1.withTiming)(isSelected ? 1 : 0);
     }, [fontWeightAnim, isSelected]);
+    // strange discrepancy with the last segment not reaching the end of the container
+    var adjustLastSegmentWidth = function (width) {
+        return isLast && size === 'large' ? width + 2 : width;
+    };
     var handleLayout = function (event) {
         var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
         xRef.current = x;
         yRef.current = y;
         heightRef.current = height;
-        widthRef.current = width;
+        widthRef.current = adjustLastSegmentWidth(width);
         onLayout(width, height, x, y);
     };
     var handlePress = function () {
@@ -71,9 +75,9 @@ var SegmentButton = function (_a) {
         // 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.
-        yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
+        yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), adjustLastSegmentWidth(widthRef.current));
     };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel, hitSlop: {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel || label, hitSlop: {
             top: hitslopVal,
             bottom: hitslopVal,
         }, 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: {

package/dist/components/Toggle/Toggle.d.ts

@@ -4,7 +4,7 @@ export type HorizontalPosition = 'left' | 'right';
 export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<TouchableOpacityProps, "children"> & {
     label?: string | ReactNode;
     checked?: boolean | undefined;
+    inline?: boolean | undefined;
     hint?: ReactNode;
     labelPosition?: HorizontalPosition | undefined;
-    onChange?: (() => void) | undefined;
 } & import("react").RefAttributes<TouchableOpacity>>;

package/dist/components/Toggle/Toggle.js

@@ -46,11 +46,11 @@ var Input = function (_a) {
                 }, checked: checked }) }) })));
 };
 exports.Toggle = (0, react_1.forwardRef)(function (_a, ref) {
-    var label = _a.label, hint = _a.hint, _b = _a.checked, checked = _b === void 0 ? false : _b, 
+    var 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _c = _a.activeOpacity, 
+    _b = _a.activeOpacity, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    activeOpacity = _c === void 0 ? 0.8 : _c, testID = _a.testID, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'left' : _d, rest = __rest(_a, ["label", "hint", "checked", "activeOpacity", "testID", "labelPosition"]);
+    activeOpacity = _b === void 0 ? 0.8 : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, label = _a.label, hint = _a.hint, inline = _a.inline, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'left' : _d, testID = _a.testID, rest = __rest(_a, ["activeOpacity", "checked", "label", "hint", "inline", "labelPosition", "testID"]);
     var hasLabel = label !== undefined;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledWrapper, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition }, rest, { children: [hasLabel ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })) : null, (0, jsx_runtime_1.jsx)(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledWrapper, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })) : null, (0, jsx_runtime_1.jsx)(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
 });

package/dist/components/Toggle/styles.d.ts

@@ -487,6 +487,7 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
 }, {
     hasLabel?: boolean | undefined;
     labelPosition?: HorizontalPosition | undefined;
+    inline?: boolean | undefined;
 }, never>;
 export declare const StyledToggleInputWrapper: import("styled-components").StyledComponent<typeof import("react-native").View, {
     core: {

package/dist/components/Toggle/styles.js

@@ -8,8 +8,8 @@ var element_core_1 = require("@ovotech/element-core");
 var react_native_1 = require("react-native");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 exports.StyledWrapper = styled_native_1.default.TouchableOpacity(function (_a) {
-    var core = _a.theme.core, hasLabel = _a.hasLabel, labelPosition = _a.labelPosition;
-    return "\n    width: ".concat(hasLabel ? '100%' : (0, element_core_1.numToPx)(core.space[11]), ";\n    display: flex;\n    flex-direction: row").concat(labelPosition === 'left' ? '' : '-reverse', ";\n    justify-content: space-between;\n    position: relative;\n  ");
+    var core = _a.theme.core, hasLabel = _a.hasLabel, inline = _a.inline, labelPosition = _a.labelPosition;
+    return "\n    width: ".concat(hasLabel ? (inline ? undefined : '100%') : (0, element_core_1.numToPx)(core.space[11]), ";\n    display: flex;\n    flex-direction: row").concat(labelPosition === 'left' ? '' : '-reverse', ";\n    justify-content: space-between;\n    position: relative;\n  ");
 });
 exports.StyledToggleInputWrapper = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, labelPosition = _a.labelPosition;

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

@@ -53,7 +53,7 @@ export var SegmentedControls = function (_a) {
     }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
     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) {
+                return (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, isLast: segments[segments.length - 1].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);

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, testID = _a.testID;
+    var accessibilityLabel = _a.accessibilityLabel, inline = _a.inline, isLast = _a.isLast, 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);
@@ -28,12 +28,16 @@ export var SegmentButton = function (_a) {
     useEffect(function () {
         fontWeightAnim.value = withTiming(isSelected ? 1 : 0);
     }, [fontWeightAnim, isSelected]);
+    // strange discrepancy with the last segment not reaching the end of the container
+    var adjustLastSegmentWidth = function (width) {
+        return isLast && size === 'large' ? width + 2 : width;
+    };
     var handleLayout = function (event) {
         var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
         xRef.current = x;
         yRef.current = y;
         heightRef.current = height;
-        widthRef.current = width;
+        widthRef.current = adjustLastSegmentWidth(width);
         onLayout(width, height, x, y);
     };
     var handlePress = function () {
@@ -42,9 +46,9 @@ export var SegmentButton = function (_a) {
         // 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.
-        yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
+        yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), adjustLastSegmentWidth(widthRef.current));
     };
-    return (_jsx(Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel, hitSlop: {
+    return (_jsx(Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel || label, hitSlop: {
             top: hitslopVal,
             bottom: hitslopVal,
         }, style: { flexGrow: inline || multipleRows ? undefined : 1 }, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [_jsx(SSegmentText, { style: {

package/dist/esm/components/Toggle/Toggle.js

@@ -43,11 +43,11 @@ var Input = function (_a) {
                 }, checked: checked }) }) })));
 };
 export var Toggle = forwardRef(function (_a, ref) {
-    var label = _a.label, hint = _a.hint, _b = _a.checked, checked = _b === void 0 ? false : _b, 
+    var 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _c = _a.activeOpacity, 
+    _b = _a.activeOpacity, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    activeOpacity = _c === void 0 ? 0.8 : _c, testID = _a.testID, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'left' : _d, rest = __rest(_a, ["label", "hint", "checked", "activeOpacity", "testID", "labelPosition"]);
+    activeOpacity = _b === void 0 ? 0.8 : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, label = _a.label, hint = _a.hint, inline = _a.inline, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'left' : _d, testID = _a.testID, rest = __rest(_a, ["activeOpacity", "checked", "label", "hint", "inline", "labelPosition", "testID"]);
     var hasLabel = label !== undefined;
-    return (_jsxs(StyledWrapper, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition }, rest, { children: [hasLabel ? (_jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })) : null, _jsx(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
+    return (_jsxs(StyledWrapper, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? (_jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })) : null, _jsx(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
 });

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

@@ -2,8 +2,8 @@ import { numToPx } from '@ovotech/element-core';
 import { Animated } from 'react-native';
 import styled from '../../styled.native';
 export var StyledWrapper = styled.TouchableOpacity(function (_a) {
-    var core = _a.theme.core, hasLabel = _a.hasLabel, labelPosition = _a.labelPosition;
-    return "\n    width: ".concat(hasLabel ? '100%' : numToPx(core.space[11]), ";\n    display: flex;\n    flex-direction: row").concat(labelPosition === 'left' ? '' : '-reverse', ";\n    justify-content: space-between;\n    position: relative;\n  ");
+    var core = _a.theme.core, hasLabel = _a.hasLabel, inline = _a.inline, labelPosition = _a.labelPosition;
+    return "\n    width: ".concat(hasLabel ? (inline ? undefined : '100%') : numToPx(core.space[11]), ";\n    display: flex;\n    flex-direction: row").concat(labelPosition === 'left' ? '' : '-reverse', ";\n    justify-content: space-between;\n    position: relative;\n  ");
 });
 export var StyledToggleInputWrapper = styled.View(function (_a) {
     var core = _a.theme.core, labelPosition = _a.labelPosition;

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, Cal, CalBook, CaretArrowDown, CaretArrowLeft, CaretArrowRight, CaretArrowUp, CaretDown, CaretLeft, CaretRight, CaretUp, Chart, ChartFilled, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronLeftSmall, ChevronLeftSmallFirst, ChevronRight, ChevronRightSmall, ChevronRightSmallLast, ChevronUp, Circle, CloseCircle, Cross, Doc, Dollar, Download, EcoHome, Eco, Edit, ElectricCar, ElectricHome, Electricity, EnergyAdvice, Equals, Euro, Gas, GlobeAddress, Help, HelpFilled, Hide, Home, HomeFilled, HydroPower, Info, Link, Logo, Mail, MailOpen, Menu, Message, MessageFilled, Minus, Mobile, NewWindow, PaymentCard, PaymentCardFilled, Phone, Plus, Pound, Pricing, Search, Security, Shop, ShopFilled, Show, SmartHome, SmartMeter, Solar, Star, StarFilled, Sun, Torch, Trees, Tune, User, UserFilled, Wallet, WalletFilled, WarmHome, Warning, WebAddress, WindPower, } from './icons';
 var defaultIcons = {
     address: Address,
     advice: Advice,
@@ -28,6 +28,10 @@ var defaultIcons = {
     'caret-arrow-left': CaretArrowLeft,
     'caret-arrow-right': CaretArrowRight,
     'caret-arrow-up': CaretArrowUp,
+    'caret-down': CaretDown,
+    'caret-left': CaretLeft,
+    'caret-right': CaretRight,
+    'caret-up': CaretUp,
     'chart-filled': ChartFilled,
     chart: Chart,
     'check-circle': CheckCircle,
@@ -40,6 +44,7 @@ var defaultIcons = {
     'chevron-right-small': ChevronRightSmall,
     'chevron-right': ChevronRight,
     'chevron-up': ChevronUp,
+    circle: Circle,
     'close-circle': CloseCircle,
     cross: Cross,
     doc: Doc,
@@ -81,6 +86,8 @@ var defaultIcons = {
     pricing: Pricing,
     search: Search,
     security: Security,
+    'shop-filled': ShopFilled,
+    shop: Shop,
     show: Show,
     'smart-home': SmartHome,
     'smart-meter': SmartMeter,
@@ -94,6 +101,7 @@ var defaultIcons = {
     'user-filled': UserFilled,
     user: User,
     wallet: Wallet,
+    'wallet-filled': WalletFilled,
     'warm-home': WarmHome,
     warning: Warning,
     'web-address': WebAddress,

package/dist/esm/providers/icons/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

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

package/dist/providers/IconsProvider.js

@@ -31,6 +31,10 @@ var defaultIcons = {
     'caret-arrow-left': icons_1.CaretArrowLeft,
     'caret-arrow-right': icons_1.CaretArrowRight,
     'caret-arrow-up': icons_1.CaretArrowUp,
+    'caret-down': icons_1.CaretDown,
+    'caret-left': icons_1.CaretLeft,
+    'caret-right': icons_1.CaretRight,
+    'caret-up': icons_1.CaretUp,
     'chart-filled': icons_1.ChartFilled,
     chart: icons_1.Chart,
     'check-circle': icons_1.CheckCircle,
@@ -43,6 +47,7 @@ var defaultIcons = {
     'chevron-right-small': icons_1.ChevronRightSmall,
     'chevron-right': icons_1.ChevronRight,
     'chevron-up': icons_1.ChevronUp,
+    circle: icons_1.Circle,
     'close-circle': icons_1.CloseCircle,
     cross: icons_1.Cross,
     doc: icons_1.Doc,
@@ -84,6 +89,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,
@@ -97,6 +104,7 @@ var defaultIcons = {
     'user-filled': icons_1.UserFilled,
     user: icons_1.User,
     wallet: icons_1.Wallet,
+    'wallet-filled': icons_1.WalletFilled,
     'warm-home': icons_1.WarmHome,
     warning: icons_1.Warning,
     'web-address': icons_1.WebAddress,

package/dist/providers/icons/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

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

package/dist/providers/icons/index.js

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

package/dist/providers/types.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
 import { SvgProps } from 'react-native-svg';
-export type IconName = 'address' | 'advice' | 'archive' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'award' | 'battery' | 'cal-book' | 'cal' | 'caret-arrow-down' | 'caret-arrow-left' | 'caret-arrow-right' | 'caret-arrow-up' | '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' | '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 IconsType = Record<string, FunctionComponent<SvgProps>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "4.0.4",
+  "version": "4.1.0-canary-9534c0a-267",
   "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-9534c0a-267",
     "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",