@ovotech/element-native 4.0.2-canary-242da35-253 → 4.0.2-canary-e8705c2-255

package/dist/components/ActionCard/ActionCard.js

@@ -50,6 +50,11 @@ var StyledP = (0, styled_native_1.default)(P_1.P)(function (_a) {
 var ActionCard = function (_a) {
     var onPressCloseButton = _a.onPressCloseButton, onPressActionButton = _a.onPressActionButton, onPressIndicator = _a.onPressIndicator, onMount = _a.onMount, body = _a.body, title = _a.title, buttonTitle = _a.buttonTitle, ctaVariant = _a.ctaVariant, image = _a.image, testID = _a.testID, _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'image' : _b, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.inline, inline = _d === void 0 ? false : _d;
     var _e = (0, react_1.useContext)(styled_native_1.ThemeContext), core = _e.core, semantic = _e.semantic;
+    var hasSingleAction = (onPressActionButton && !onPressIndicator && !onPressCloseButton) ||
+        (onPressIndicator && !onPressActionButton && !onPressCloseButton);
+    var cardAction = hasSingleAction
+        ? onPressActionButton || onPressIndicator
+        : null;
     (0, react_1.useEffect)(function () {
         if (onMount) {
             onMount();
@@ -58,7 +63,7 @@ var ActionCard = function (_a) {
     var Heading = inline ? __1.Heading3 : __1.Heading2;
     var cardPadding = core.space[inline ? 4 : 6];
     var negativeMarginAdjustment = -cardPadding;
-    return ((0, jsx_runtime_1.jsx)(StyledCard, { onPress: onPressIndicator, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1 }, children: (0, jsx_runtime_1.jsxs)(__1.Stack, { spaceBetween: 2, children: [(0, jsx_runtime_1.jsx)(Heading, { style: {
+    return ((0, jsx_runtime_1.jsx)(StyledCard, { onPress: cardAction, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1 }, children: (0, jsx_runtime_1.jsxs)(__1.Stack, { spaceBetween: 2, children: [(0, jsx_runtime_1.jsx)(Heading, { style: {
                                     color: inverted
                                         ? semantic.inverted.message.link
                                         : semantic.message.branded,

package/dist/components/FilterSection/FilterSection.d.ts

@@ -0,0 +1,498 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Filters } from './constants';
+type FilterSectionProps<T extends keyof Filters> = {
+    filterTitle: string;
+    localFilter: Filters[T][number];
+    setLocalFilter: Dispatch<SetStateAction<Filters[T][number]>>;
+    filters: Filters[T];
+    multipleRows?: boolean;
+};
+export declare const FilterSection: <T extends keyof Filters>({ filterTitle, localFilter, setLocalFilter, filters, multipleRows, }: FilterSectionProps<T>) => JSX.Element;
+export declare const BlackHeading4: import("styled-components").StyledComponent<({ accessibilityRole, ...rest }: import("react").PropsWithChildren<import("react-native").TextProps & {
+    inverted?: boolean | undefined;
+}>) => JSX.Element, {
+    core: {
+        color: {
+            brand: {
+                midnight: string;
+                midnightTint: string;
+                forest: string;
+                forestTint: string;
+                ovo: string;
+                ovoTint: string;
+                leaf: string;
+                leafTint: string;
+                energised: string;
+                energisedTint: string;
+                offwhite: string;
+                white: string;
+                black: string;
+            };
+            neutral: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            red: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            orange: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            yellow: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            green: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            blue: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+        };
+        fontFamily: {
+            mono: {
+                native: string;
+                web: string;
+            };
+            heading: {
+                native: string;
+                web: string;
+            };
+            body: {
+                native: string;
+                web: string;
+            };
+            bodyBold: {
+                native: string;
+                web: string;
+            };
+        };
+        fontWeight: {
+            book: number;
+            bold: number;
+            black: number;
+        };
+        fontSize: {
+            heading1: {
+                small: number;
+                large: number;
+            };
+            heading2: {
+                small: number;
+                large: number;
+            };
+            heading3: {
+                small: number;
+                large: number;
+            };
+            heading4: {
+                small: number;
+                large: number;
+            };
+            lead: {
+                small: number;
+                large: number;
+            };
+            body: {
+                small: number;
+                large: number;
+            };
+            small: {
+                small: number;
+                large: number;
+            };
+            label: {
+                small: number;
+                large: number;
+            };
+        };
+        letterSpacing: {
+            base: number;
+            compressed: number;
+            extraCompressed: number;
+        };
+        lineHeight: {
+            heading1: {
+                small: number;
+                large: number;
+            };
+            heading2: {
+                small: number;
+                large: number;
+            };
+            heading3: {
+                small: number;
+                large: number;
+            };
+            heading4: {
+                small: number;
+                large: number;
+            };
+            lead: {
+                small: number;
+                large: number;
+            };
+            body: {
+                small: number;
+                large: number;
+            };
+            small: {
+                small: number;
+                large: number;
+            };
+            label: {
+                small: number;
+                large: number;
+            };
+        };
+        borderWidth: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        breakpoint: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        mediaQuery: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        customMediaQuery: {
+            'small-and-up': number;
+            'medium-and-up': number;
+            'large-and-up': number;
+        };
+        opacity: {
+            solid: number;
+            translucent: number;
+            transparent: number;
+        };
+        radius: {
+            small: number;
+            medium: number;
+            large: number;
+            max: number;
+        };
+        space: {
+            '0': number;
+            '1': number;
+            '2': number;
+            '3': number;
+            '4': number;
+            '5': number;
+            '6': number;
+            '7': number;
+            '8': number;
+            '9': number;
+            '10': number;
+            '11': number;
+            '12': number;
+            '13': number;
+            '14': number;
+            '15': number;
+        };
+        transition: {
+            slow: number;
+            medium: number;
+            fast: number;
+        };
+    };
+    semantic: {
+        border: {
+            graphic: string;
+            differentiated: string;
+            functional: string;
+        };
+        branded: {
+            surface: string;
+            message: string;
+            heading: string;
+        };
+        neutral: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        success: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        warning: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        error: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        info: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        data: {
+            branded: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+            electric: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+            gas: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+        };
+        focus: {
+            outline: string;
+            hover: string;
+            surface: string;
+        };
+        inverted: {
+            surface: string;
+            surfaceAlt: string;
+            border: string;
+            borderAlt: string;
+            message: {
+                branded: string;
+                base: string;
+                secondary: string;
+                link: string;
+            };
+        };
+        message: {
+            base: string;
+            secondary: string;
+            link: string;
+            error: string;
+            branded: string;
+        };
+        surface: {
+            base: string;
+            cutout: string;
+            elevated: string;
+        };
+    };
+    component: {
+        badge: {
+            variants: {
+                neutral: {
+                    background: string;
+                    foreground: string;
+                };
+                red: {
+                    background: string;
+                    foreground: string;
+                };
+                orange: {
+                    background: string;
+                    foreground: string;
+                };
+                yellow: {
+                    background: string;
+                    foreground: string;
+                };
+                green: {
+                    background: string;
+                    foreground: string;
+                };
+                blue: {
+                    background: string;
+                    foreground: string;
+                };
+            };
+        };
+        cta: {
+            primary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
+            };
+            secondary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
+            };
+            destructive: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
+            };
+        };
+        heading1: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        heading2: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        heading3: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        heading4: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        lead: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        body: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        small: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        label: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+    };
+}, {}, never>;
+export {};

package/dist/components/FilterSection/FilterSection.js

@@ -0,0 +1,95 @@
+"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 __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlackHeading4 = exports.FilterSection = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var Heading4_1 = require("../Heading4");
+var FilterButton_1 = require("./components/FilterButton");
+var springSettings = {
+    damping: 15,
+};
+var FilterSection = function (_a) {
+    var filterTitle = _a.filterTitle, localFilter = _a.localFilter, setLocalFilter = _a.setLocalFilter, filters = _a.filters, multipleRows = _a.multipleRows;
+    var animatedX = (0, react_native_reanimated_1.useSharedValue)(0);
+    var animatedY = (0, react_native_reanimated_1.useSharedValue)(0);
+    var animatedWidth = (0, react_native_reanimated_1.useSharedValue)(0);
+    var animatedHeight = (0, react_native_reanimated_1.useSharedValue)(0);
+    var animatedBackgroundStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+        return {
+            transform: [
+                { translateX: animatedX.value },
+                { translateY: animatedY.value },
+            ],
+            width: animatedWidth.value,
+            height: animatedHeight.value,
+            position: 'absolute',
+            borderRadius: 22,
+            backgroundColor: '#0a9828',
+        };
+    }, [animatedX, animatedY, animatedWidth, animatedHeight]);
+    return ((0, jsx_runtime_1.jsxs)(SectionContainer, { children: [(0, jsx_runtime_1.jsx)(exports.BlackHeading4, { children: filterTitle }), (0, jsx_runtime_1.jsxs)(FilterSelectorContainer, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedBackgroundStyle }), filters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(FilterButton_1.FilterButton, { isSelected: localFilter.key === filter.key, label: filter.label, onPress: function (x, y, width) {
+                            setLocalFilter(filter);
+                            animatedX.value = (0, react_native_reanimated_1.withSpring)(x, springSettings);
+                            animatedY.value = (0, react_native_reanimated_1.withSpring)(y, springSettings);
+                            animatedWidth.value = (0, react_native_reanimated_1.withSpring)(width, springSettings);
+                        }, onLayout: function (width, height, x, y) {
+                            if (localFilter.key === filter.key) {
+                                animatedX.value = x;
+                                // (adrian.pop) - I couldn't figure out how to make the positioning work once the
+                                // choices go on the second row. The only way I could get it to work
+                                // was to hardcode the denominator to 3 for the single row ones
+                                // and 1.1 for the multiple row ones.
+                                animatedY.value = y - height / (multipleRows ? 1.1 : 3);
+                                animatedWidth.value = width;
+                                animatedHeight.value = height;
+                            }
+                        }, multipleRows: multipleRows }, filter.key)); })] })] }));
+};
+exports.FilterSection = FilterSection;
+var SectionContainer = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  gap: ", "px;\n  align-items: flex-start;\n"], ["\n  gap: ", "px;\n  align-items: flex-start;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.core.space[2];
+});
+var FilterSelectorContainer = styled_native_1.default.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: ", "px;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: ", "px;\n  border-radius: 22px;\n  width: 100%;\n"], ["\n  background-color: ", ";\n  padding: ", "px;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: ", "px;\n  border-radius: 22px;\n  width: 100%;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.core.color.neutral.lighter;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.core.space[2];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.core.space[1];
+});
+exports.BlackHeading4 = (0, styled_native_1.default)(Heading4_1.Heading4)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: black;\n"], ["\n  color: black;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/FilterSection/components/FilterButton.d.ts

@@ -0,0 +1,9 @@
+type FilterButtonProps = {
+    onPress: (x: number, y: number, width: number) => void;
+    onLayout: (width: number, height: number, x: number, y: number) => void;
+    isSelected: boolean;
+    label: string;
+    multipleRows?: boolean;
+};
+export declare const FilterButton: ({ onPress, onLayout, isSelected, label, multipleRows, }: FilterButtonProps) => JSX.Element;
+export {};

package/dist/components/FilterSection/components/FilterButton.js

@@ -0,0 +1,93 @@
+"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 __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.FilterButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var styled_native_1 = __importStar(require("../../../styled.native"));
+var P_1 = require("../../P");
+var AnimatedP = react_native_reanimated_1.default.createAnimatedComponent(P_1.P);
+var FilterButton = function (_a) {
+    var onPress = _a.onPress, onLayout = _a.onLayout, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows;
+    var xRef = (0, react_1.useRef)(0);
+    var yRef = (0, react_1.useRef)(0);
+    var widthRef = (0, react_1.useRef)(0);
+    var heightRef = (0, react_1.useRef)(0);
+    var fontWeightAnim = (0, react_native_reanimated_1.useSharedValue)(isSelected ? 1 : 0);
+    var animatedStyleNormal = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+        return {
+            opacity: 1 - fontWeightAnim.value,
+            position: 'absolute',
+        };
+    }, [fontWeightAnim]);
+    var animatedStyleBold = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+        return {
+            opacity: fontWeightAnim.value,
+            position: 'absolute',
+        };
+    }, [fontWeightAnim]);
+    (0, react_1.useEffect)(function () {
+        fontWeightAnim.value = (0, react_native_reanimated_1.withTiming)(isSelected ? 1 : 0);
+    }, [fontWeightAnim, isSelected]);
+    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;
+        widthRef.current = width;
+        heightRef.current = height;
+        onLayout(width, height, x, y);
+    };
+    var handlePress = function () {
+        onPress(xRef.current, 
+        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
+        // choices go on the second row. The only way I could get it to work
+        // was to hardcode the denominator to 3 for the single row ones
+        // and 1.1 for the multiple row ones.
+        yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: handlePress, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, children: (0, jsx_runtime_1.jsxs)(SFilterSelector, { "$isSelected": isSelected, children: [(0, jsx_runtime_1.jsx)(SFilterText, { style: {
+                        opacity: 0,
+                        fontWeight: '900',
+                    }, "$isSelected": false, children: label }), (0, jsx_runtime_1.jsx)(SFilterText, { style: animatedStyleNormal, "$isSelected": false, numberOfLines: 1, adjustsFontSizeToFit: true, children: label }), (0, jsx_runtime_1.jsx)(SFilterText, { style: animatedStyleBold, "$isSelected": true, numberOfLines: 1, adjustsFontSizeToFit: true, children: label })] }) }));
+};
+exports.FilterButton = FilterButton;
+var SFilterSelector = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 ", "px;\n  border-radius: ", "px;\n  align-items: center;\n  justify-content: center;\n"], ["\n  padding: 0 ", "px;\n  border-radius: ", "px;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.core.space[4];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.core.radius.large;
+});
+var SFilterText = (0, styled_native_1.default)(AnimatedP)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var $isSelected = _a.$isSelected, theme = _a.theme;
+    return $isSelected && (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n      font-weight: ", ";\n    "], ["\n      color: ", ";\n      font-weight: ", ";\n    "])), theme.core.color.brand.white, theme.core.fontWeight.bold);
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/FilterSection/constants.d.ts

@@ -0,0 +1,28 @@
+export type EnergyUseFilters = 'electricity' | 'gas' | 'combined';
+export type PeriodFilters = 'week' | 'month' | 'year';
+export type MeasurementFilters = 'consumption' | 'cost';
+export type ComparisonFilters = 'similar' | 'previous' | 'none';
+export type MeasurementUnit = '£' | 'kWh';
+export type Filters = {
+    ENERGY_USE: {
+        key: EnergyUseFilters;
+        label: string;
+        mainScreenLabel?: string;
+    }[];
+    PERIOD: {
+        key: PeriodFilters;
+        label: string;
+        mainScreenLabel?: string;
+    }[];
+    MEASUREMENT: {
+        key: MeasurementFilters;
+        label: string;
+        mainScreenLabel?: string;
+        unit: MeasurementUnit;
+    }[];
+    COMPARISON: {
+        key: ComparisonFilters;
+        label: string;
+        mainScreenLabel?: string;
+    }[];
+};

package/dist/components/FilterSection/constants.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/dist/components/FilterSection/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/esm/components/ActionCard/ActionCard.js

@@ -21,6 +21,11 @@ var StyledP = styled(P)(function (_a) {
 export var ActionCard = function (_a) {
     var onPressCloseButton = _a.onPressCloseButton, onPressActionButton = _a.onPressActionButton, onPressIndicator = _a.onPressIndicator, onMount = _a.onMount, body = _a.body, title = _a.title, buttonTitle = _a.buttonTitle, ctaVariant = _a.ctaVariant, image = _a.image, testID = _a.testID, _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'image' : _b, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.inline, inline = _d === void 0 ? false : _d;
     var _e = useContext(ThemeContext), core = _e.core, semantic = _e.semantic;
+    var hasSingleAction = (onPressActionButton && !onPressIndicator && !onPressCloseButton) ||
+        (onPressIndicator && !onPressActionButton && !onPressCloseButton);
+    var cardAction = hasSingleAction
+        ? onPressActionButton || onPressIndicator
+        : null;
     useEffect(function () {
         if (onMount) {
             onMount();
@@ -29,7 +34,7 @@ export var ActionCard = function (_a) {
     var Heading = inline ? Heading3 : Heading2;
     var cardPadding = core.space[inline ? 4 : 6];
     var negativeMarginAdjustment = -cardPadding;
-    return (_jsx(StyledCard, { onPress: onPressIndicator, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: _jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
+    return (_jsx(StyledCard, { onPress: cardAction, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: _jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
                                     color: inverted
                                         ? semantic.inverted.message.link
                                         : semantic.message.branded,

package/dist/esm/components/FilterSection/FilterSection.js

@@ -0,0 +1,65 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, } from 'react-native-reanimated';
+import styled from '../../styled.native';
+import { Heading4 } from '../Heading4';
+import { FilterButton } from './components/FilterButton';
+var springSettings = {
+    damping: 15,
+};
+export var FilterSection = function (_a) {
+    var filterTitle = _a.filterTitle, localFilter = _a.localFilter, setLocalFilter = _a.setLocalFilter, filters = _a.filters, multipleRows = _a.multipleRows;
+    var animatedX = useSharedValue(0);
+    var animatedY = useSharedValue(0);
+    var animatedWidth = useSharedValue(0);
+    var animatedHeight = useSharedValue(0);
+    var animatedBackgroundStyle = useAnimatedStyle(function () {
+        return {
+            transform: [
+                { translateX: animatedX.value },
+                { translateY: animatedY.value },
+            ],
+            width: animatedWidth.value,
+            height: animatedHeight.value,
+            position: 'absolute',
+            borderRadius: 22,
+            backgroundColor: '#0a9828',
+        };
+    }, [animatedX, animatedY, animatedWidth, animatedHeight]);
+    return (_jsxs(SectionContainer, { children: [_jsx(BlackHeading4, { children: filterTitle }), _jsxs(FilterSelectorContainer, { children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), filters.map(function (filter) { return (_jsx(FilterButton, { isSelected: localFilter.key === filter.key, label: filter.label, onPress: function (x, y, width) {
+                            setLocalFilter(filter);
+                            animatedX.value = withSpring(x, springSettings);
+                            animatedY.value = withSpring(y, springSettings);
+                            animatedWidth.value = withSpring(width, springSettings);
+                        }, onLayout: function (width, height, x, y) {
+                            if (localFilter.key === filter.key) {
+                                animatedX.value = x;
+                                // (adrian.pop) - I couldn't figure out how to make the positioning work once the
+                                // choices go on the second row. The only way I could get it to work
+                                // was to hardcode the denominator to 3 for the single row ones
+                                // and 1.1 for the multiple row ones.
+                                animatedY.value = y - height / (multipleRows ? 1.1 : 3);
+                                animatedWidth.value = width;
+                                animatedHeight.value = height;
+                            }
+                        }, multipleRows: multipleRows }, filter.key)); })] })] }));
+};
+var SectionContainer = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  gap: ", "px;\n  align-items: flex-start;\n"], ["\n  gap: ", "px;\n  align-items: flex-start;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.core.space[2];
+});
+var FilterSelectorContainer = styled.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: ", "px;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: ", "px;\n  border-radius: 22px;\n  width: 100%;\n"], ["\n  background-color: ", ";\n  padding: ", "px;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: ", "px;\n  border-radius: 22px;\n  width: 100%;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.core.color.neutral.lighter;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.core.space[2];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.core.space[1];
+});
+export var BlackHeading4 = styled(Heading4)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: black;\n"], ["\n  color: black;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/esm/components/FilterSection/components/FilterButton.js

@@ -0,0 +1,66 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Pressable } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import styled, { css } from '../../../styled.native';
+import { P } from '../../P';
+var AnimatedP = Animated.createAnimatedComponent(P);
+export var FilterButton = function (_a) {
+    var onPress = _a.onPress, onLayout = _a.onLayout, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows;
+    var xRef = useRef(0);
+    var yRef = useRef(0);
+    var widthRef = useRef(0);
+    var heightRef = useRef(0);
+    var fontWeightAnim = useSharedValue(isSelected ? 1 : 0);
+    var animatedStyleNormal = useAnimatedStyle(function () {
+        return {
+            opacity: 1 - fontWeightAnim.value,
+            position: 'absolute',
+        };
+    }, [fontWeightAnim]);
+    var animatedStyleBold = useAnimatedStyle(function () {
+        return {
+            opacity: fontWeightAnim.value,
+            position: 'absolute',
+        };
+    }, [fontWeightAnim]);
+    useEffect(function () {
+        fontWeightAnim.value = withTiming(isSelected ? 1 : 0);
+    }, [fontWeightAnim, isSelected]);
+    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;
+        widthRef.current = width;
+        heightRef.current = height;
+        onLayout(width, height, x, y);
+    };
+    var handlePress = function () {
+        onPress(xRef.current, 
+        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
+        // choices go on the second row. The only way I could get it to work
+        // was to hardcode the denominator to 3 for the single row ones
+        // and 1.1 for the multiple row ones.
+        yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
+    };
+    return (_jsx(Pressable, { onLayout: handleLayout, onPress: handlePress, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, children: _jsxs(SFilterSelector, { "$isSelected": isSelected, children: [_jsx(SFilterText, { style: {
+                        opacity: 0,
+                        fontWeight: '900',
+                    }, "$isSelected": false, children: label }), _jsx(SFilterText, { style: animatedStyleNormal, "$isSelected": false, numberOfLines: 1, adjustsFontSizeToFit: true, children: label }), _jsx(SFilterText, { style: animatedStyleBold, "$isSelected": true, numberOfLines: 1, adjustsFontSizeToFit: true, children: label })] }) }));
+};
+var SFilterSelector = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 ", "px;\n  border-radius: ", "px;\n  align-items: center;\n  justify-content: center;\n"], ["\n  padding: 0 ", "px;\n  border-radius: ", "px;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.core.space[4];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.core.radius.large;
+});
+var SFilterText = styled(AnimatedP)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var $isSelected = _a.$isSelected, theme = _a.theme;
+    return $isSelected && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n      font-weight: ", ";\n    "], ["\n      color: ", ";\n      font-weight: ", ";\n    "])), theme.core.color.brand.white, theme.core.fontWeight.bold);
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/esm/components/FilterSection/constants.js

@@ -0,0 +1 @@
+export {};

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "4.0.2-canary-242da35-253",
+  "version": "4.0.2-canary-e8705c2-255",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@backpackapp-io/react-native-toast": "^0.10.0",
-    "@ovotech/element-core": "3.0.1-canary-242da35-253",
+    "@ovotech/element-core": "3.0.1-canary-e8705c2-255",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
     "react-native-reanimated-carousel": "^3.5.1"