@ovotech/element-native 3.4.1 → 3.5.0-canary-8ac6eb7-155

package/dist/esm/components/DataTable/TableRow.js

@@ -9,15 +9,21 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { isElement as isReactElement } from 'react-is';
+import { Dimensions } from 'react-native';
 import { useBreakpoint } from '../../hooks';
-import { CellText, RowHeading, TableCell, TableHeaderText, TableRow as StyledTableRow, } from './styles';
+import { CellText, RowHeading, TableCell, TableHeaderText, TableRow as StyledTableRow, SeparatorRowText, StyledSeparatorRow, } from './styles';
 export var TableRow = function (_a) {
     var data = _a.data, index = _a.index, striped = _a.striped, rowHeadings = _a.rowHeadings, columnWidths = _a.columnWidths;
     var breakpoints = useBreakpoint();
     var cells = data.map(function (cellData, i) {
+        if (typeof cellData === 'object' &&
+            (cellData === null || cellData === void 0 ? void 0 : cellData.hasOwnProperty('isSeparator')) &&
+            (cellData === null || cellData === void 0 ? void 0 : cellData.hasOwnProperty('content'))) {
+            return (_jsx(StyledSeparatorRow, __assign({ testID: "separatorRow", width: Dimensions.get('window').width }, { children: _jsx(SeparatorRowText, __assign({}, breakpoints, { children: cellData === null || cellData === void 0 ? void 0 : cellData.content })) }), i));
+        }
         if (rowHeadings && i === 0) {
             return (_createElement(RowHeading, __assign({}, breakpoints, { key: i, testID: "rowHeader", cellWidth: columnWidths[i] }), isReactElement(cellData) ? (cellData) : (_jsx(TableHeaderText, __assign({}, breakpoints, { children: cellData })))));
         }

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

@@ -21,11 +21,11 @@ export var TableCaptionText = styled.Text(function (_a) {
 });
 export var CellText = styled.Text(function (_a) {
     var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n\n    font-size: ", ";\n  "])), core.fontFamily.body.native, core.lineHeight.body.large, core.fontSize.body[smallAndUp ? 'large' : 'small']);
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "])), core.fontFamily.body.native, core.lineHeight.body.large, core.fontSize.body[smallAndUp ? 'large' : 'small']);
 });
 export var TableCaption = styled.View(function (_a) {
     var core = _a.theme.core;
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", " ", ";\n  "], ["\n    padding: ", " ", ";\n  "])), core.space[4], core.space[1]);
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", " ", ";\n  "], ["\n    padding: ", " ", ";\n  "])), core.space[4], core.space[2]);
 });
 export var TableRow = styled.View(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, stripe = _a.stripe;
@@ -42,10 +42,21 @@ export var TableRowHeading = styled.View(function (_a) {
 export var TableBody = styled.View(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"], ["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"])));
 export var TableCell = styled.View(function (_a) {
     var core = _a.theme.core, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
-    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "])), core.space[smallAndUp ? 3 : 2], core.space[1], cellWidth, cellWidth === 'auto' ? 1 : 0);
+    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "])), core.space[smallAndUp ? 3 : 2], core.space[2], cellWidth, cellWidth === 'auto' ? 1 : 0);
 });
 export var RowHeading = styled.View(function (_a) {
     var core = _a.theme.core, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
-    return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "])), core.space[smallAndUp ? 3 : 2], core.space[1], cellWidth, cellWidth === 'auto' ? 1 : 0);
+    return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "])), core.space[smallAndUp ? 3 : 2], core.space[2], cellWidth, cellWidth === 'auto' ? 1 : 0);
+});
+export var StyledSeparatorRow = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, width = _a.width;
+    var minWidth = width
+        ? "".concat(width - parseInt(core.space[2]) * 2, "px")
+        : '100%';
+    return "\n      min-width: ".concat(minWidth, ";\n      flex: 1;\n      flex-direction: row;\n      background-color: ").concat(semantic.surface.elevated, ";\n      padding: ").concat(core.space[1], " ").concat(core.space[2], ";\n    ");
+});
+export var SeparatorRowText = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    return "\n  flex: 1;\n  font-family: ".concat(core.fontFamily.body.native, ";\n  font-size: ").concat(core.fontSize.small[smallAndUp ? 'large' : 'small'], ";\n  line-height: ").concat(core.lineHeight.small[smallAndUp ? 'large' : 'small'], ";\n  color: ").concat(semantic.message.secondary, ";\n");
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

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

@@ -0,0 +1,62 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, useRef, useState } from 'react';
+import { Modal, ScrollView, View } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { Divider } from '../Divider';
+import { Icon } from '../Icon';
+import { Margin } from '../Margin';
+import { P } from '../P';
+import { Strong } from '../Strong';
+var SelectInput = styled.TouchableOpacity(function (_a) {
+    var core = _a.theme.core;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), core.color.brand.white, core.radius.max, core.space[2], core.space[1]);
+});
+var DropdownWrapper = styled.View(function (_a) {
+    var core = _a.theme.core;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    height: 100%;\n    // 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4\n    background-color: ", "40;\n  "], ["\n    width: 100%;\n    height: 100%;\n    // 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4\n    background-color: ", "40;\n  "])), core.color.neutral.darkest);
+});
+var DropdownContainer = styled.View(function (_a) {
+    var core = _a.theme.core;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex: 1;\n    min-width: 25%;\n    max-height: 100%;\n    border-radius: ", ";\n    background-color: ", ";\n    position: absolute;\n  "], ["\n    flex: 1;\n    min-width: 25%;\n    max-height: 100%;\n    border-radius: ", ";\n    background-color: ", ";\n    position: absolute;\n  "])), core.radius.large, core.color.brand.white);
+});
+var SelectOption = styled.TouchableOpacity(function (_a) {
+    var core = _a.theme.core;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    padding-horizontal: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    padding-horizontal: ", ";\n  "])), core.space[2]);
+});
+export var FilterSelect = function (_a) {
+    var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.defaultSelected, defaultSelected = _c === void 0 ? { label: '', value: 'default' } : _c, _d = _a.onSelected, onSelected = _d === void 0 ? function () { return null; } : _d, _e = _a.testID, testID = _e === void 0 ? 'select' : _e, rightText = _a.rightText, leftText = _a.leftText;
+    var selectRef = useRef(null);
+    var _f = useState(false), isOpen = _f[0], setOpen = _f[1];
+    var _g = useState(defaultSelected), selected = _g[0], setSelected = _g[1];
+    var _h = useState(null), measure = _h[0], setMeasure = _h[1];
+    var handleOptionPress = function (val) {
+        onSelected(val);
+        setOpen(false);
+        setSelected(val);
+    };
+    return (_jsxs(View, __assign({ style: { flexDirection: 'row' } }, { children: [leftText ? _jsxs(P, { children: [leftText, " "] }) : null, _jsxs(SelectInput, __assign({ ref: selectRef, testID: testID, onPress: function () { return setOpen(!isOpen); }, onLayout: function () {
+                    var _a;
+                    (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (x, y) {
+                        setMeasure({ top: y - 12, left: x });
+                    });
+                } }, { children: [_jsx(P, { children: _jsx(Strong, { children: selected.value === 'default' ? '' : selected.label }) }), _jsx(Icon, { name: "caret-down", size: 14, style: { marginLeft: 2 } })] }), String(isOpen)), rightText ? _jsxs(P, { children: [" ", rightText] }) : null, _jsx(Modal, __assign({ transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); } }, { children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, __assign({ style: {
+                            top: measure === null || measure === void 0 ? void 0 : measure.top,
+                            left: measure === null || measure === void 0 ? void 0 : measure.left,
+                        } }, { children: _jsx(ScrollView, __assign({ nestedScrollEnabled: true }, { children: options.map(function (option, i) { return (_jsxs(Fragment, { children: [_jsx(SelectOption, __assign({ accessible: true, accessibilityRole: "option", onPress: function () { return handleOptionPress(option); } }, { children: _jsx(Margin, __assign({ vertical: 3 }, { children: _jsx(P, { children: _jsx(Strong, { children: option.label }) }) })) })), i === options.length - 1 ? null : (_jsx(Divider, { type: "differentiated" }))] }, option.label)); }) })) })) }) }))] })));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1 @@
+export { FilterSelect } from './FilterSelect';

package/dist/esm/components/List/List.js

@@ -20,9 +20,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Children } from 'react';
 import { styledComponentWithBreakpoints } from '../../utils';
+import { P } from '../P';
 import { Stack } from '../Stack';
 import { StyledBullet, StyledLi, StyledList, StyledOlItem, StyledUlItem, UlBullet, } from './styled';
 var Bullet = styledComponentWithBreakpoints(StyledBullet);
@@ -38,33 +39,38 @@ var ListNumberedItem = function (_a) {
 var renderList = function (_a) {
     var arrayChildren = _a.arrayChildren, _b = _a.level, level = _b === void 0 ? 0 : _b, showBullets = _a.showBullets, listType = _a.listType;
     return Children.map(arrayChildren, function (child, index) {
-        var _a, _b, _c, _d;
-        // Checking if there are any child types, i.e. nodes
-        if (
-        // @ts-ignore
-        Array.isArray((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children) &&
-            // @ts-ignore
-            (child.type.name === 'Ul' || child.type.name === 'Ol')) {
-            var lvl = level;
-            var PADDING = 3;
-            lvl = lvl + PADDING;
-            return renderList({
-                // @ts-ignore It complains that child props doesn't exist. Weird.
-                arrayChildren: (_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.children,
-                // @ts-ignore It complains that child props doesn't exist. Weird.
-                listType: (_d = (_c = child === null || child === void 0 ? void 0 : child.type) === null || _c === void 0 ? void 0 : _c.name) === null || _d === void 0 ? void 0 : _d.toLowerCase(),
-                showBullets: showBullets,
-                level: lvl,
-            });
-        }
-        else {
-            if (listType === 'ul') {
-                return (_jsx(ListBulletItem, __assign({ showBullets: showBullets, level: level }, { children: child })));
+        var _a;
+        var lvl = level;
+        var PADDING = 3;
+        lvl = lvl + PADDING;
+        // @ts-ignore doesn't recognise child props.
+        var nestedChildren = ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children) || {};
+        var nestedLists = [];
+        var childrenToRender = Array.from(nestedChildren).filter(function (ch) {
+            var _a, _b;
+            if (typeof ch == 'object' &&
+                // @ts-ignore Missing types for React Children
+                (((_a = ch === null || ch === void 0 ? void 0 : ch.type) === null || _a === void 0 ? void 0 : _a.name) === 'Ul' || ((_b = ch === null || ch === void 0 ? void 0 : ch.type) === null || _b === void 0 ? void 0 : _b.name) === 'Ol')) {
+                nestedLists.push(ch);
+                return false;
             }
             else {
-                return (_jsx(ListNumberedItem, __assign({ level: level, prefix: "".concat(index + 1, ".") }, { children: child })));
+                return true;
             }
-        }
+        });
+        return (_jsxs(_Fragment, { children: [childrenToRender.length > 0 && listType === 'ul' ? (_jsx(ListBulletItem, __assign({ showBullets: showBullets, level: level }, { children: _jsx(P, { children: childrenToRender }) }))) : null, childrenToRender.length > 0 && listType === 'ol' ? (_jsx(ListNumberedItem, __assign({ level: level, prefix: "".concat(index + 1, ".") }, { children: _jsx(P, { children: childrenToRender }) }))) : null, nestedLists.length > 0
+                    ? nestedLists.map(function (obj) {
+                        var _a, _b, _c, _d;
+                        return renderList({
+                            //@ts-ignore
+                            arrayChildren: (_b = (_a = obj === null || obj === void 0 ? void 0 : obj.props) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : obj,
+                            level: lvl,
+                            showBullets: showBullets,
+                            //@ts-ignore
+                            listType: (_d = (_c = obj.type) === null || _c === void 0 ? void 0 : _c.name) === null || _d === void 0 ? void 0 : _d.toLowerCase(),
+                        });
+                    })
+                    : null] }));
     });
 };
 var Li = function (_a) {

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

@@ -20,11 +20,11 @@ export var StyledBullet = styled.Text(function (_a) {
     var lineHeight = smallAndUp
         ? core.lineHeight.body.large
         : core.lineHeight.body.small;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "])), core.fontFamily.body.native, lineHeight, semantic.message.base, fontSize, core.space[2], core.space[4]);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      text-align: left;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      text-align: left;\n    "])), core.fontFamily.body.native, lineHeight, semantic.message.base, fontSize, core.space[1]);
 });
 export var StyledUlItem = styled.View(function (_a) {
     var core = _a.theme.core, level = _a.level;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    padding-left: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    padding-left: ", ";\n  "])), core.space[level]);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n    padding-left: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n    padding-left: ", ";\n  "])), core.space[level]);
 });
 export var StyledOlItem = StyledUlItem;
 export var StyledList = styled.View(function (_a) {

package/dist/esm/components/index.js

@@ -52,3 +52,4 @@ export * from './SkeletonCircle';
 export * from './SkeletonCTA';
 export * from './SkeletonHeading';
 export * from './SkeletonText';
+export * from './FilterSelect';

package/dist/esm/providers/IconsProvider.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
-import { Address, Advice, Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Award, Battery, Cal, CalBook, CaretDown, CaretLeft, CaretRight, CaretUp, Chart, ChartFilled, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronLeftSmall, ChevronLeftSmallFirst, ChevronRight, ChevronRightSmall, ChevronRightSmallLast, ChevronUp, Circle, CloseCircle, Cross, Doc, Dollar, Download, Eco, EcoHome, Edit, ElectricCar, ElectricHome, Electricity, EnergyAdvice, Equals, Euro, Gas, GlobeAddress, Help, Hide, Home, HomeFilled, HydroPower, Info, Link, Logo, Mail, MailOpen, Menu, Message, MessageFilled, Minus, Mobile, NewWindow, PaymentCard, Phone, Plus, Pound, Pricing, Search, Security, Show, SmartHome, SmartMeter, Solar, Star, Sun, Trees, Tune, User, UserFilled, Wallet, WalletFilled, WarmHome, Warning, WebAddress, WindPower, } from './icons';
+import { Address, Advice, Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Award, Battery, Cal, CalBook, CaretDown, CaretLeft, CaretRight, CaretUp, Chart, ChartFilled, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronLeftSmall, ChevronLeftSmallFirst, ChevronRight, ChevronRightSmall, ChevronRightSmallLast, ChevronUp, Circle, CloseCircle, Cross, Doc, Dollar, Download, Eco, EcoHome, Edit, ElectricCar, ElectricHome, Electricity, EnergyAdvice, Equals, Euro, Gas, GlobeAddress, Help, Hide, Home, HomeFilled, HydroPower, Info, Link, Logo, Mail, MailOpen, Menu, Message, MessageFilled, Minus, Mobile, NewWindow, PaymentCard, Phone, Plus, Pound, Pricing, Search, Security, Show, SmartHome, SmartMeter, Solar, Star, Sun, Torch, Trees, Tune, User, UserFilled, Wallet, WalletFilled, WarmHome, Warning, WebAddress, WindPower, } from './icons';
 var defaultIcons = {
     address: Address,
     advice: Advice,
@@ -86,6 +86,7 @@ var defaultIcons = {
     solar: Solar,
     star: Star,
     sun: Sun,
+    torch: Torch,
     trees: Trees,
     tune: Tune,
     user: User,

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

@@ -9,6 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Path, Svg, ClipPath, Defs } from 'react-native-svg';
-export var Logo = function (props) { return (_jsxs(Svg, __assign({ viewBox: "0 0 48 48", width: 48, height: 48 }, props, { children: [_jsx(Path, { fill: "#0A9828", d: "M14.316 16.104c-1.837-1.34-4.186-2.084-6.733-2.084-2.262 0-4.364.589-6.1 1.66L0 10.143 37.861 0l3.767 14.063a12.37 12.37 0 00-1.054-.045c-2.562 0-4.924.752-6.771 2.109l.697-1.803h-7.311l-2.562 8.771c-.278.95-.565 1.982-.565 1.982l-.557-1.982-2.56-8.77h-7.316l.687 1.779zm22.654 8.023c0-2.05 1.382-3.76 3.606-3.76 1.711 0 2.919 1.013 3.387 2.414l.127.472c.058.28.092.57.092.873 0 2.2-1.484 3.71-3.606 3.71s-3.606-1.51-3.606-3.71zm-25.781 0c0-2.05-1.384-3.76-3.606-3.76-2.224 0-3.61 1.71-3.61 3.76 0 2.2 1.489 3.71 3.61 3.71 2.122 0 3.606-1.51 3.606-3.71zm18.866 1.69c.835 5.104 5.232 8.101 10.521 8.101 2.209 0 4.265-.52 5.972-1.5l1.456 5.44L10.143 48 6.357 33.865c.401.036.814.055 1.226.055 5.27 0 9.659-2.98 10.515-8.057l3 7.753h5.934l3.023-7.8z" }), _jsx(Defs, { children: _jsx(ClipPath, __assign({ id: "a" }, { children: _jsx(Path, { fill: "#fff", d: "M0 0h48v48H0z" }) })) })] }))); };
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Path, Svg } from 'react-native-svg';
+export var Logo = function (props) { return (_jsx(Svg, __assign({ viewBox: "0 0 48 48", width: 48, height: 48 }, props, { children: _jsx(Path, { fill: "#0A9828", d: "M14.316 16.104c-1.837-1.34-4.186-2.084-6.733-2.084-2.262 0-4.364.589-6.1 1.66L0 10.143 37.861 0l3.767 14.063a12.37 12.37 0 00-1.054-.045c-2.562 0-4.924.752-6.771 2.109l.697-1.803h-7.311l-2.562 8.771c-.278.95-.565 1.982-.565 1.982l-.557-1.982-2.56-8.77h-7.316l.687 1.779zm22.654 8.023c0-2.05 1.382-3.76 3.606-3.76 1.711 0 2.919 1.013 3.387 2.414l.127.472c.058.28.092.57.092.873 0 2.2-1.484 3.71-3.606 3.71s-3.606-1.51-3.606-3.71zm-25.781 0c0-2.05-1.384-3.76-3.606-3.76-2.224 0-3.61 1.71-3.61 3.76 0 2.2 1.489 3.71 3.61 3.71 2.122 0 3.606-1.51 3.606-3.71zm18.866 1.69c.835 5.104 5.232 8.101 10.521 8.101 2.209 0 4.265-.52 5.972-1.5l1.456 5.44L10.143 48 6.357 33.865c.401.036.814.055 1.226.055 5.27 0 9.659-2.98 10.515-8.057l3 7.753h5.934l3.023-7.8z" }) }))); };

package/dist/esm/providers/icons/Torch.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 Torch = function (props) { return (_jsxs(Svg, __assign({ viewBox: "0 0 16 16" }, props, { children: [_jsx(Path, { fill: "currentColor", d: "M4.728 14V6.714L3.016 5.012 3 1h10v4.012L11.273 6.73v6.173l-1.5-.402L9.37 14H4.726ZM11.5 3.494V2.5H4.506l.004.994h6.99ZM9.773 12.5V6.105l.442-.44.675-.671H5.124l.66.656.442.44v6.41h3.547Z" }), _jsx(Path, { fill: "currentColor", d: "M7 10V8h2v2H7Z" })] }))); };

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

@@ -71,6 +71,7 @@ export * from './SmartMeter';
 export * from './Solar';
 export * from './Star';
 export * from './Sun';
+export * from './Torch';
 export * from './Trees';
 export * from './Tune';
 export * from './User';

package/dist/providers/IconsProvider.js

@@ -89,6 +89,7 @@ var defaultIcons = {
     solar: icons_1.Solar,
     star: icons_1.Star,
     sun: icons_1.Sun,
+    torch: icons_1.Torch,
     trees: icons_1.Trees,
     tune: icons_1.Tune,
     user: icons_1.User,

package/dist/providers/icons/Logo.js

@@ -14,5 +14,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Logo = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_native_svg_1 = require("react-native-svg");
-var Logo = function (props) { return ((0, jsx_runtime_1.jsxs)(react_native_svg_1.Svg, __assign({ viewBox: "0 0 48 48", width: 48, height: 48 }, props, { children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { fill: "#0A9828", d: "M14.316 16.104c-1.837-1.34-4.186-2.084-6.733-2.084-2.262 0-4.364.589-6.1 1.66L0 10.143 37.861 0l3.767 14.063a12.37 12.37 0 00-1.054-.045c-2.562 0-4.924.752-6.771 2.109l.697-1.803h-7.311l-2.562 8.771c-.278.95-.565 1.982-.565 1.982l-.557-1.982-2.56-8.77h-7.316l.687 1.779zm22.654 8.023c0-2.05 1.382-3.76 3.606-3.76 1.711 0 2.919 1.013 3.387 2.414l.127.472c.058.28.092.57.092.873 0 2.2-1.484 3.71-3.606 3.71s-3.606-1.51-3.606-3.71zm-25.781 0c0-2.05-1.384-3.76-3.606-3.76-2.224 0-3.61 1.71-3.61 3.76 0 2.2 1.489 3.71 3.61 3.71 2.122 0 3.606-1.51 3.606-3.71zm18.866 1.69c.835 5.104 5.232 8.101 10.521 8.101 2.209 0 4.265-.52 5.972-1.5l1.456 5.44L10.143 48 6.357 33.865c.401.036.814.055 1.226.055 5.27 0 9.659-2.98 10.515-8.057l3 7.753h5.934l3.023-7.8z" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Defs, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.ClipPath, __assign({ id: "a" }, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { fill: "#fff", d: "M0 0h48v48H0z" }) })) })] }))); };
+var Logo = function (props) { return ((0, jsx_runtime_1.jsx)(react_native_svg_1.Svg, __assign({ viewBox: "0 0 48 48", width: 48, height: 48 }, props, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { fill: "#0A9828", d: "M14.316 16.104c-1.837-1.34-4.186-2.084-6.733-2.084-2.262 0-4.364.589-6.1 1.66L0 10.143 37.861 0l3.767 14.063a12.37 12.37 0 00-1.054-.045c-2.562 0-4.924.752-6.771 2.109l.697-1.803h-7.311l-2.562 8.771c-.278.95-.565 1.982-.565 1.982l-.557-1.982-2.56-8.77h-7.316l.687 1.779zm22.654 8.023c0-2.05 1.382-3.76 3.606-3.76 1.711 0 2.919 1.013 3.387 2.414l.127.472c.058.28.092.57.092.873 0 2.2-1.484 3.71-3.606 3.71s-3.606-1.51-3.606-3.71zm-25.781 0c0-2.05-1.384-3.76-3.606-3.76-2.224 0-3.61 1.71-3.61 3.76 0 2.2 1.489 3.71 3.61 3.71 2.122 0 3.606-1.51 3.606-3.71zm18.866 1.69c.835 5.104 5.232 8.101 10.521 8.101 2.209 0 4.265-.52 5.972-1.5l1.456 5.44L10.143 48 6.357 33.865c.401.036.814.055 1.226.055 5.27 0 9.659-2.98 10.515-8.057l3 7.753h5.934l3.023-7.8z" }) }))); };
 exports.Logo = Logo;

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

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

package/dist/providers/icons/Torch.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.Torch = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_svg_1 = __importStar(require("react-native-svg"));
+var Torch = 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: "M4.728 14V6.714L3.016 5.012 3 1h10v4.012L11.273 6.73v6.173l-1.5-.402L9.37 14H4.726ZM11.5 3.494V2.5H4.506l.004.994h6.99ZM9.773 12.5V6.105l.442-.44.675-.671H5.124l.66.656.442.44v6.41h3.547Z" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { fill: "currentColor", d: "M7 10V8h2v2H7Z" })] }))); };
+exports.Torch = Torch;

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

@@ -71,6 +71,7 @@ export * from './SmartMeter';
 export * from './Solar';
 export * from './Star';
 export * from './Sun';
+export * from './Torch';
 export * from './Trees';
 export * from './Tune';
 export * from './User';

package/dist/providers/icons/index.js

@@ -87,6 +87,7 @@ __exportStar(require("./SmartMeter"), exports);
 __exportStar(require("./Solar"), exports);
 __exportStar(require("./Star"), exports);
 __exportStar(require("./Sun"), exports);
+__exportStar(require("./Torch"), exports);
 __exportStar(require("./Trees"), exports);
 __exportStar(require("./Tune"), exports);
 __exportStar(require("./User"), exports);

package/dist/providers/types.d.ts

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

package/dist/styled.native.d.ts

@@ -205,6 +205,10 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -432,6 +436,10 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -659,6 +667,10 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -886,6 +898,10 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -1113,6 +1129,10 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -1340,6 +1360,10 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "3.4.1",
+  "version": "3.5.0-canary-8ac6eb7-155",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
     "url": "@ovotech/element"
   },
   "dependencies": {
-    "@ovotech/element-core": "^2.1.0",
+    "@ovotech/element-core": "^2.2.0-canary-8ac6eb7-155",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0"
   },