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

package/dist/components/FilterSelect/FilterSelect.d.ts

@@ -0,0 +1,14 @@
+declare type Option = {
+    label: string;
+    value: string;
+};
+export declare type FilterSelect = {
+    defaultSelected?: Option;
+    options: Array<Option>;
+    onSelected?(value: Option): void;
+    testID?: string;
+    rightText?: string;
+    leftText?: string;
+};
+export declare const FilterSelect: ({ options, defaultSelected, onSelected, testID, rightText, leftText, }: FilterSelect) => JSX.Element;
+export {};

package/dist/components/FilterSelect/FilterSelect.js

@@ -0,0 +1,89 @@
+"use strict";
+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);
+};
+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.FilterSelect = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var Divider_1 = require("../Divider");
+var Icon_1 = require("../Icon");
+var Margin_1 = require("../Margin");
+var P_1 = require("../P");
+var Strong_1 = require("../Strong");
+var SelectInput = styled_native_1.default.TouchableOpacity(function (_a) {
+    var core = _a.theme.core;
+    return (0, styled_native_1.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_native_1.default.View(function (_a) {
+    var core = _a.theme.core;
+    return (0, styled_native_1.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_native_1.default.View(function (_a) {
+    var core = _a.theme.core;
+    return (0, styled_native_1.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_native_1.default.TouchableOpacity(function (_a) {
+    var core = _a.theme.core;
+    return (0, styled_native_1.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]);
+});
+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 = (0, react_1.useRef)(null);
+    var _f = (0, react_1.useState)(false), isOpen = _f[0], setOpen = _f[1];
+    var _g = (0, react_1.useState)(defaultSelected), selected = _g[0], setSelected = _g[1];
+    var _h = (0, react_1.useState)(null), measure = _h[0], setMeasure = _h[1];
+    var handleOptionPress = function (val) {
+        onSelected(val);
+        setOpen(false);
+        setSelected(val);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, __assign({ style: { flexDirection: 'row' } }, { children: [leftText ? (0, jsx_runtime_1.jsxs)(P_1.P, { children: [leftText, " "] }) : null, (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: selected.value === 'default' ? '' : selected.label }) }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "caret-down", size: 14, style: { marginLeft: 2 } })] }), String(isOpen)), rightText ? (0, jsx_runtime_1.jsxs)(P_1.P, { children: [" ", rightText] }) : null, (0, jsx_runtime_1.jsx)(react_native_1.Modal, __assign({ transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, __assign({ style: {
+                            top: measure === null || measure === void 0 ? void 0 : measure.top,
+                            left: measure === null || measure === void 0 ? void 0 : measure.left,
+                        } }, { children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, __assign({ nestedScrollEnabled: true }, { children: options.map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SelectOption, __assign({ accessible: true, accessibilityRole: "option", onPress: function () { return handleOptionPress(option); } }, { children: (0, jsx_runtime_1.jsx)(Margin_1.Margin, __assign({ vertical: 3 }, { children: (0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }) })) })), i === options.length - 1 ? null : ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { type: "differentiated" }))] }, option.label)); }) })) })) }) }))] })));
+};
+exports.FilterSelect = FilterSelect;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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

package/dist/components/FilterSelect/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterSelect = void 0;
+var FilterSelect_1 = require("./FilterSelect");
+Object.defineProperty(exports, "FilterSelect", { enumerable: true, get: function () { return FilterSelect_1.FilterSelect; } });

package/dist/components/Grid/Col.d.ts

@@ -208,6 +208,10 @@ declare const Col: import("react").ForwardRefExoticComponent<Pick<Omit<{
             };
             badge: {
                 variants: {
+                    neutral: {
+                        foreground: string;
+                        background: string;
+                    };
                     red: {
                         foreground: string;
                         background: string;

package/dist/components/Grid/Row.d.ts

@@ -204,6 +204,10 @@ declare const StyledRow: import("styled-components").StyledComponent<typeof impo
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;

package/dist/components/HintText/HintText.d.ts

@@ -209,6 +209,10 @@ declare const HintText: import("react").ForwardRefExoticComponent<Pick<Omit<{
             };
             badge: {
                 variants: {
+                    neutral: {
+                        foreground: string;
+                        background: string;
+                    };
                     red: {
                         foreground: string;
                         background: string;

package/dist/components/LabelText/LabelText.d.ts

@@ -209,6 +209,10 @@ declare const LabelText: import("react").ForwardRefExoticComponent<Pick<Omit<{
             };
             badge: {
                 variants: {
+                    neutral: {
+                        foreground: string;
+                        background: string;
+                    };
                     red: {
                         foreground: string;
                         background: string;

package/dist/components/LineThrough/LineThrough.d.ts

@@ -202,6 +202,10 @@ export declare const LineThrough: import("styled-components").StyledComponent<ty
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;

package/dist/components/List/List.d.ts

@@ -209,6 +209,10 @@ declare const ListWrapper: import("react").ForwardRefExoticComponent<Pick<Omit<{
             };
             badge: {
                 variants: {
+                    neutral: {
+                        foreground: string;
+                        background: string;
+                    };
                     red: {
                         foreground: string;
                         background: string;

package/dist/components/List/List.js

@@ -26,6 +26,7 @@ exports.ListWrapper = exports.Li = exports.Ol = exports.Ul = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var utils_1 = require("../../utils");
+var P_1 = require("../P");
 var Stack_1 = require("../Stack");
 var styled_1 = require("./styled");
 var Bullet = (0, utils_1.styledComponentWithBreakpoints)(styled_1.StyledBullet);
@@ -42,33 +43,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 react_1.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 ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(ListNumberedItem, __assign({ level: level, prefix: "".concat(index + 1, ".") }, { children: child })));
+                return true;
             }
-        }
+        });
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [childrenToRender.length > 0 && listType === 'ul' ? ((0, jsx_runtime_1.jsx)(ListBulletItem, __assign({ showBullets: showBullets, level: level }, { children: (0, jsx_runtime_1.jsx)(P_1.P, { children: childrenToRender }) }))) : null, childrenToRender.length > 0 && listType === 'ol' ? ((0, jsx_runtime_1.jsx)(ListNumberedItem, __assign({ level: level, prefix: "".concat(index + 1, ".") }, { children: (0, jsx_runtime_1.jsx)(P_1.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/components/List/styled.d.ts

@@ -205,6 +205,10 @@ export declare const UlBullet: import("styled-components").StyledComponent<typeo
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -435,6 +439,10 @@ export declare const StyledBullet: import("styled-components").StyledComponent<t
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -663,6 +671,10 @@ export declare const StyledUlItem: import("styled-components").StyledComponent<t
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -893,6 +905,10 @@ export declare const StyledOlItem: import("styled-components").StyledComponent<t
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -1123,6 +1139,10 @@ export declare const StyledList: import("styled-components").StyledComponent<typ
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -1351,6 +1371,10 @@ export declare const StyledLi: import("styled-components").StyledComponent<typeo
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;

package/dist/components/List/styled.js

@@ -46,11 +46,11 @@ exports.StyledBullet = styled_native_1.default.Text(function (_a) {
     var lineHeight = smallAndUp
         ? core.lineHeight.body.large
         : core.lineHeight.body.small;
-    return (0, styled_native_1.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 (0, styled_native_1.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]);
 });
 exports.StyledUlItem = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, level = _a.level;
-    return (0, styled_native_1.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 (0, styled_native_1.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]);
 });
 exports.StyledOlItem = exports.StyledUlItem;
 exports.StyledList = styled_native_1.default.View(function (_a) {

package/dist/components/Margin/Margin.d.ts

@@ -216,6 +216,10 @@ declare const StyledMargin: import("styled-components").StyledComponent<typeof i
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;

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

@@ -204,6 +204,10 @@ export declare const NavContainer: import("styled-components").StyledComponent<t
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -432,6 +436,10 @@ export declare const ExpandedTitle: import("styled-components").StyledComponent<
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -663,6 +671,10 @@ export declare const CollapsedTitleWrapper: import("styled-components").StyledCo
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -891,6 +903,10 @@ export declare const CollapsedTitle: import("styled-components").StyledComponent
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -1119,6 +1135,10 @@ export declare const IconButtonWrapper: import("styled-components").StyledCompon
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -1347,6 +1367,10 @@ export declare const StyledIconButtonS: import("styled-components").StyledCompon
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -1577,6 +1601,10 @@ export declare const StyledIconButtonL: import("styled-components").StyledCompon
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;

package/dist/components/Notification/Notification.d.ts

@@ -206,6 +206,10 @@ export declare const NotificationContentBox: import("styled-components").StyledC
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -434,6 +438,10 @@ export declare const NotificationTitleBox: import("styled-components").StyledCom
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;

package/dist/components/P/P.d.ts

@@ -209,6 +209,10 @@ export declare const P: import("react").ForwardRefExoticComponent<Pick<Omit<{
             };
             badge: {
                 variants: {
+                    neutral: {
+                        foreground: string;
+                        background: string;
+                    };
                     red: {
                         foreground: string;
                         background: string;

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

@@ -203,6 +203,10 @@ export declare const StyledPressable: import("styled-components").StyledComponen
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;

package/dist/components/SelectField/Select.d.ts

@@ -215,6 +215,10 @@ declare const SelectOption: import("styled-components").StyledComponent<typeof i
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;

package/dist/components/Small/Small.d.ts

@@ -209,6 +209,10 @@ export declare const Small: import("react").ForwardRefExoticComponent<Pick<Omit<
             };
             badge: {
                 variants: {
+                    neutral: {
+                        foreground: string;
+                        background: string;
+                    };
                     red: {
                         foreground: string;
                         background: string;

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

@@ -202,6 +202,10 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;

package/dist/components/SubLabelText/SubLabelText.d.ts

@@ -209,6 +209,10 @@ declare const SubLabelText: import("react").ForwardRefExoticComponent<Pick<Omit<
             };
             badge: {
                 variants: {
+                    neutral: {
+                        foreground: string;
+                        background: string;
+                    };
                     red: {
                         foreground: string;
                         background: string;

package/dist/components/index.d.ts

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

package/dist/components/index.js

@@ -68,3 +68,4 @@ __exportStar(require("./SkeletonCircle"), exports);
 __exportStar(require("./SkeletonCTA"), exports);
 __exportStar(require("./SkeletonHeading"), exports);
 __exportStar(require("./SkeletonText"), exports);
+__exportStar(require("./FilterSelect"), exports);

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

@@ -44,7 +44,7 @@ export var ActionCard = function (_a) {
                                             paddingRight: !image && !title && onPressCloseButton
                                                 ? parseInt(core.space[6])
                                                 : 0,
-                                        } }, { children: _jsx(StyledP, __assign({ inverted: inverted }, { children: body })) }))) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Action, __assign({ inverted: inverted, onPress: onPressActionButton, testID: "".concat(testID, "-button") }, { children: buttonTitle }))) : (_jsx(Margin, __assign({ top: 4 }, { children: _jsx(CTAButton, __assign({ onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant }, { children: buttonTitle })) })))) : null] })] })) })), image ? (_jsx(MaskedView, __assign({ style: {
+                                        } }, { children: _jsx(StyledP, __assign({ inverted: inverted }, { children: body })) }))) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, __assign({ top: 2 }, { children: _jsx(Action, __assign({ inverted: inverted, inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button") }, { children: buttonTitle })) }))) : (_jsx(Margin, __assign({ top: 4 }, { children: _jsx(CTAButton, __assign({ onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant }, { children: buttonTitle })) })))) : null] })] })) })), image ? (_jsx(MaskedView, __assign({ style: {
                         flex: 1,
                         flexDirection: 'row',
                         height: '100%',

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

@@ -46,11 +46,11 @@ var ActionList = function (_a) {
         }) })));
 };
 var ActionWrapper = function (_a) {
-    var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "onPress", "testID"]);
-    return (_jsx(StyledActionWrapper, __assign({ hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, __assign({ activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: _jsx(StyledActionInner, __assign({ fullWidth: fullWidth, inList: rest === null || rest === void 0 ? void 0 : rest.inList }, { children: children })) })) })));
+    var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID"]);
+    return (_jsx(StyledActionWrapper, __assign({ hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, __assign({ hitSlop: inline ? 24 : null, activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: _jsx(StyledActionInner, __assign({ fullWidth: fullWidth, inList: inList, inline: inline }, { children: children })) })) })));
 };
 var Action = function (_a) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, _c = _a.actionType, actionType = _c === void 0 ? 'link' : _c, children = _a.children, _d = _a.fullWidth, fullWidth = _d === void 0 ? 'never' : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["accessibilityRole", "actionType", "children", "fullWidth", "inverted", "onPress", "testID"]);
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, _c = _a.actionType, actionType = _c === void 0 ? 'link' : _c, children = _a.children, _d = _a.fullWidth, fullWidth = _d === void 0 ? 'never' : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, _f = _a.inline, inline = _f === void 0 ? false : _f, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["accessibilityRole", "actionType", "children", "fullWidth", "inverted", "inline", "onPress", "testID"]);
     var smallAndUp = useBreakpoint().smallAndUp;
     var isBackAction = actionType === 'back';
     var updatedIconRight = null;
@@ -60,6 +60,6 @@ var Action = function (_a) {
     if (fullWidth === 'small') {
         fullWidth = smallAndUp ? 'never' : 'always';
     }
-    return (_jsxs(ActionWrapper, __assign({ accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID }, rest, { children: [isBackAction ? (_jsx(StyledLeftIcon, { inverted: inverted, name: ACTION_TYPES.back, size: 16 })) : null, _jsx(StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList }, { children: children })), updatedIconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: updatedIconRight, marginTop: actionType === 'link' ? 1 : 0, size: 16 })) : null] })));
+    return (_jsxs(ActionWrapper, __assign({ accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID }, rest, { children: [isBackAction ? (_jsx(StyledLeftIcon, { inverted: inverted, name: ACTION_TYPES.back, size: 16 })) : null, _jsx(StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList }, { children: children })), updatedIconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: updatedIconRight, marginTop: actionType === 'link' ? 1 : 0, size: 16 })) : null] })));
 };
 export { ActionList, Action };

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

@@ -3,34 +3,36 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
 import { Icon } from '../Icon';
-import { ListWrapper } from '../List/List';
-export var StyledActionList = ListWrapper;
+var StyledList = styled.View(function (_a) {
+    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), smallAndUp ? core.space[3] : core.space[2], smallAndUp ? core.space[3] : core.space[2]);
+});
+export var StyledActionList = styledComponentWithBreakpoints(StyledList);
 export var StyledActionWrapper = styled.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBorder = _a.hasBorder, inverted = _a.inverted;
     return "\n  width: 100%;\n  align-self: flex-start;\n  border-bottom-width: ".concat(hasBorder ? core.borderWidth.small : 0, ";\n  border-bottom-style: solid;\n  border-bottom-color: ").concat(inverted ? semantic.inverted.border : semantic.border.graphic, ";\n");
 });
 export var StyledActionInner = styled.View(function (_a) {
-    var fullWidth = _a.fullWidth;
-    return "\n  display: flex;\n  flex-direction: row;\n  justify-content: ".concat(fullWidth === 'always' ? 'space-between' : 'flex-start', ";\n  align-items: center;\n  min-height: 44px;\n");
+    var fullWidth = _a.fullWidth, inline = _a.inline;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    ", ";\n  "], ["\n    display: flex;\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    ", ";\n  "])), fullWidth === 'always' ? 'space-between' : 'flex-start', !inline ? 'min-height: 44px' : '');
 });
 export var StyledActionText = styled.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.inList, inList = _d === void 0 ? false : _d;
     var fontSize = smallAndUp
         ? core.fontSize.body.large
         : core.fontSize.body.small;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      flex: ", ";\n    "], ["\n      color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      flex: ", ";\n    "])), inverted
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      flex: ", ";\n    "], ["\n      color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      flex: ", ";\n    "])), inverted
         ? semantic.inverted.message.base
         : semantic.message.base, core.fontFamily.bodyBold.native, fontSize, core.lineHeight.body.small, inList ? 1 : 'none');
 });
 export var StyledRightIcon = styled(Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted, marginTop = _a.marginTop;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "], ["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1], core.space[marginTop]);
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "], ["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1], core.space[marginTop]);
 });
 export var StyledLeftIcon = styled(Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n      margin-right: ", ";\n    "], ["\n      color: ", ";\n      margin-right: ", ";\n    "])), inverted
-        ? semantic.inverted.message.base
-        : semantic.message.base, core.space[1]);
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    margin-right: ", ";\n  "], ["\n    color: ", ";\n    margin-right: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1]);
 });
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;