@ovotech/element-native 5.2.1-canary-2120912-411 → 5.2.1

package/dist/esm/components/ProductCarousel/NavigationDots.js

@@ -0,0 +1,50 @@
+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 } from "react/jsx-runtime";
+import Animated, { Extrapolate, interpolate, interpolateColor, useAnimatedStyle, } from 'react-native-reanimated';
+import styled, { useTheme } from '../../styled.native';
+export function NavigationDots(_a) {
+    var data = _a.data, animatedValue = _a.animatedValue;
+    return (_jsx(SDotsContainer, { children: data.map(function (_, index) { return (_jsx(Dot, { index: index, length: data.length, animatedValue: animatedValue }, index)); }) }));
+}
+var Dot = function (_a) {
+    var animatedValue = _a.animatedValue, index = _a.index, length = _a.length, _b = _a.width, width = _b === void 0 ? 10 : _b;
+    var theme = useTheme();
+    var animatedStyle = useAnimatedStyle(function () {
+        var inputRange = [index - 1, index, index + 1];
+        var outputRange = [-width, 0, width];
+        if (index === 0 && (animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value) > length - 1) {
+            inputRange = [length - 1, length, length + 1];
+            outputRange = [-width, 0, width];
+        }
+        var backgroundColor = interpolateColor(animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value, inputRange, [
+            theme.color.brand.dim,
+            theme.color.brand.bold,
+            theme.color.brand.dim,
+        ]);
+        return {
+            transform: [
+                {
+                    translateX: interpolate(animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value, inputRange, outputRange, Extrapolate.CLAMP),
+                },
+            ],
+            backgroundColor: backgroundColor,
+        };
+    }, [animatedValue, index, length]);
+    return (_jsx(SDot, { "$width": width, children: _jsx(SAnimatedDot, { style: animatedStyle }) }));
+};
+var SDotsContainer = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 20px;\n  flex-direction: row;\n  gap: 10px;\n"], ["\n  position: absolute;\n  bottom: 20px;\n  flex-direction: row;\n  gap: 10px;\n"])));
+var SDot = styled.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50px;\n  overflow: hidden;\n"], ["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50px;\n  overflow: hidden;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.color.brand.dim;
+}, function (_a) {
+    var $width = _a.$width;
+    return $width;
+}, function (_a) {
+    var $width = _a.$width;
+    return $width;
+});
+var SAnimatedDot = styled(Animated.View)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 20px;\n  flex: 1;\n"], ["\n  border-radius: 20px;\n  flex: 1;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/esm/components/ProductCarousel/ProductCarousel.js

@@ -0,0 +1,98 @@
+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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useRef } from 'react';
+import { useWindowDimensions, View } from 'react-native';
+import Animated, { Extrapolate, interpolate, useAnimatedStyle, useSharedValue, } from 'react-native-reanimated';
+import Carousel from 'react-native-reanimated-carousel';
+import Svg, { Path } from 'react-native-svg';
+import { useBreakpoint } from '../../hooks';
+import styled, { useTheme } from '../../styled.native';
+import { Icon } from '../Icon';
+import { NavigationDots } from './NavigationDots';
+import { withAnchorPoint } from './anchor-point';
+export function ProductCarousel(_a) {
+    var data = _a.data, children = _a.children, width = _a.width, height = _a.height, fullWidth = _a.fullWidth, _b = _a.showArrows, showArrows = _b === void 0 ? true : _b, _c = _a.showDots, showDots = _c === void 0 ? false : _c, _d = _a.loop, loop = _d === void 0 ? true : _d, arrowsDistanceFromTop = _a.arrowsDistanceFromTop;
+    var theme = useTheme();
+    var mediumAndUp = useBreakpoint().mediumAndUp;
+    var carouselRef = useRef(null);
+    var progressValue = useSharedValue(0);
+    var windowWidth = useWindowDimensions().width;
+    var carouselWidth = fullWidth ? windowWidth : width || windowWidth;
+    return (_jsxs(View, { children: [mediumAndUp ? null : _jsx(SkewLine, {}), _jsxs(SCarouselContainer, { children: [_jsx(Carousel, { ref: carouselRef, data: data, renderItem: function (_a) {
+                            var item = _a.item, animationValue = _a.animationValue;
+                            return (_jsx(Card, { animationValue: animationValue, height: height, width: carouselWidth, children: children(item) }));
+                        }, vertical: false, width: carouselWidth, height: height, onProgressChange: function (_, absoluteProgress) {
+                            return (progressValue.value = absoluteProgress);
+                        }, panGestureHandlerProps: {
+                            activeOffsetX: [-20, 20],
+                        }, loop: loop, testID: "carousel", scrollAnimationDuration: 700 }), showArrows && data.length > 1 && (_jsxs(_Fragment, { children: [_jsx(SActionPressable, { onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.prev(); }, "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                                    top: 32,
+                                    bottom: 32,
+                                    left: 16,
+                                    right: 16,
+                                }, children: _jsx(Icon, { name: "arrow-left", size: 32, color: theme.color.brand.onBrand }) }), _jsx(SActionPressable, { "$next": true, onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.next(); }, "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                                    top: 32,
+                                    bottom: 32,
+                                    left: 16,
+                                    right: 16,
+                                }, children: _jsx(Icon, { name: "arrow-right", size: 32, color: theme.color.brand.onBrand }) })] })), showDots && data.length > 1 && (_jsx(NavigationDots, { data: data, animatedValue: progressValue }))] })] }));
+}
+var Card = function (_a) {
+    var children = _a.children, animationValue = _a.animationValue, height = _a.height, width = _a.width;
+    var WIDTH = width / 1.3;
+    var HEIGHT = height / 1.3;
+    var cardStyle = useAnimatedStyle(function () {
+        var scale = interpolate(animationValue.value, [-0.1, 0, 1], [0.95, 1, 1], Extrapolate.CLAMP);
+        var opacity = interpolate(animationValue.value, [-0.75, 0, 1], [0, 1, 0]);
+        var translateX = interpolate(animationValue.value, [-1, -0.2, 0, 1], [0, WIDTH * 0.3, 0, 0]);
+        var transform = {
+            transform: [
+                { scale: scale },
+                { translateX: translateX },
+                { perspective: 200 },
+                {
+                    rotateY: "".concat(interpolate(animationValue.value, [-1, 0, 0.4, 1], [30, 0, -25, -25], Extrapolate.CLAMP), "deg"),
+                },
+            ],
+        };
+        return __assign(__assign({}, withAnchorPoint(transform, { x: 0.5, y: 0.5 }, { width: WIDTH, height: HEIGHT })), { opacity: opacity });
+    }, []);
+    return (_jsx(Animated.View, { style: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        }, children: _jsx(Animated.View, { style: [
+                {
+                    width: WIDTH,
+                    height: HEIGHT,
+                },
+                cardStyle,
+            ], children: children }) }));
+};
+var SCarouselContainer = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: #0a9828;\n  overflow: hidden;\n  margin-top: -0.5px;\n"], ["\n  align-items: center;\n  background-color: #0a9828;\n  overflow: hidden;\n  margin-top: -0.5px;\n"])));
+var SActionPressable = styled.Pressable(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  ", ";\n"], ["\n  position: absolute;\n  top: ", ";\n  ", ";\n"])), function (_a) {
+    var $top = _a.$top;
+    return ($top ? "".concat($top, "px") : '30%');
+}, function (_a) {
+    var theme = _a.theme, $next = _a.$next, mediumAndUp = _a.mediumAndUp;
+    return $next
+        ? "right: ".concat(mediumAndUp ? '25%' : numToPx(theme.space[1400]))
+        : "left: ".concat(mediumAndUp ? '25%' : numToPx(theme.space[1400]));
+});
+var SkewLine = function (props) { return (_jsx(Svg, __assign({ width: "100%", height: 69 }, props, { children: _jsx(Path, { fill: "#0A9828", d: "M768 0 0 68.776h768V0Z" }) }))); };
+var templateObject_1, templateObject_2;

package/dist/esm/components/ProductCarousel/anchor-point.js

@@ -0,0 +1,49 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var isValidSize = function (size) {
+    'worklet';
+    return size && size.width > 0 && size.height > 0;
+};
+var defaultAnchorPoint = { x: 0.5, y: 0.5 };
+export var withAnchorPoint = function (transform, anchorPoint, size) {
+    'worklet';
+    if (!isValidSize(size))
+        return transform;
+    var injectedTransform = transform.transform;
+    if (!injectedTransform)
+        return transform;
+    if (anchorPoint.x !== defaultAnchorPoint.x && size.width) {
+        var shiftTranslateX = [];
+        // shift before rotation
+        shiftTranslateX.push({
+            translateX: size.width * (anchorPoint.x - defaultAnchorPoint.x),
+        });
+        injectedTransform = __spreadArray(__spreadArray([], shiftTranslateX, true), injectedTransform, true);
+        // shift after rotation
+        injectedTransform.push({
+            translateX: size.width * (defaultAnchorPoint.x - anchorPoint.x),
+        });
+    }
+    if (!Array.isArray(injectedTransform))
+        return { transform: injectedTransform };
+    if (anchorPoint.y !== defaultAnchorPoint.y && size.height) {
+        var shiftTranslateY = [];
+        // shift before rotation
+        shiftTranslateY.push({
+            translateY: size.height * (anchorPoint.y - defaultAnchorPoint.y),
+        });
+        injectedTransform = __spreadArray(__spreadArray([], shiftTranslateY, true), injectedTransform, true);
+        // shift after rotation
+        injectedTransform.push({
+            translateY: size.height * (defaultAnchorPoint.y - anchorPoint.y),
+        });
+    }
+    return { transform: injectedTransform };
+};

package/dist/esm/components/Radio/Radio.js

@@ -0,0 +1,62 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { forwardRef } from 'react';
+import { TouchableOpacity, View, } from 'react-native';
+import styled from '../../styled.native';
+import { HintText } from '../HintText';
+import { LabelText } from '../LabelText';
+var StyledRadioInputWrapper = styled.View(function (_a) {
+    var theme = _a.theme;
+    return "\n      width: ".concat(numToPx(theme.space[600]), ";\n      height: ").concat(numToPx(theme.space[600]), ";\n      margin-right: 10px;\n    ");
+});
+var StyledRadioInput = styled.View(function (_a) {
+    var theme = _a.theme, invalid = _a.invalid, checked = _a.checked;
+    return "\n      width: ".concat(numToPx(theme.space[600]), ";\n      height: ").concat(numToPx(theme.space[600]), ";\n      border: ").concat(numToPx(theme.border.width.md), " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat(numToPx(theme.space[600]), ";\n      border-color: ").concat(invalid
+        ? theme.input.color.borderError
+        : checked
+            ? theme.input.color.selected
+            : theme.input.color.border, ";\n      background: ").concat(checked ? theme.input.color.selectedTint : 'transparent', ";\n    ");
+});
+var StyledRadioInputDot = styled.View(function (_a) {
+    var theme = _a.theme, checked = _a.checked;
+    return "\n      width: ".concat(numToPx(theme.space[300]), ";\n      height: ").concat(numToPx(theme.space[300]), ";\n      border-radius: ").concat(numToPx(theme.space[300]), ";\n      background: ").concat(theme.input.color.selected, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+});
+var Input = function (_a) {
+    var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
+    return (_jsx(StyledRadioInputWrapper, __assign({}, rest, { children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) })));
+};
+var StyledWrapper = styled.View(function (_a) {
+    var theme = _a.theme;
+    return "\n    padding-top: ".concat(numToPx(theme.space[300]), ";\n    flex-direction: row;\n  ");
+});
+var Radio = forwardRef(function (_a, ref) {
+    var label = _a.label, hint = _a.hint, checked = _a.checked, invalid = _a.invalid, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    value = _a.value, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
+    _b = _a.activeOpacity, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
+    activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "activeOpacity", "testID"]);
+    return (_jsx(TouchableOpacity, __assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: _jsxs(StyledWrapper, { children: [_jsx(Input, { checked: checked, invalid: invalid, testID: testID }), _jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })] }) })));
+});
+export { Radio };

package/dist/esm/components/Radio/RadioField.js

@@ -0,0 +1,46 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement } from 'react';
+import { View } from 'react-native';
+import { callAll, getValidChildren } from '../../utils';
+import { ErrorText } from '../ErrorText';
+import { FormGroup } from '../FormGroup';
+import { HintText } from '../HintText';
+import { LabelText } from '../LabelText';
+import { Stack } from '../Stack';
+var RadioField = function (_a) {
+    var label = _a.label, hint = _a.hint, error = _a.error, children = _a.children, _b = _a.optional, optional = _b === void 0 ? false : _b, value = _a.value, onValueChange = _a.onValueChange, rest = __rest(_a, ["label", "hint", "error", "children", "optional", "value", "onValueChange"]);
+    var hasError = !!error;
+    var validChildren = getValidChildren(children);
+    return (_jsx(FormGroup, __assign({}, rest, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsx(View, { accessible: true, accessibilityRole: "radiogroup", children: Children.map(validChildren, function (child) {
+                        return cloneElement(child, {
+                            invalid: hasError ? true : child.props.invalid,
+                            checked: child.props.checked != null
+                                ? child.props.checked
+                                : value && (value === child.props.value ? true : false),
+                            onPress: callAll(onValueChange && (function () { return onValueChange(child.props.value); }), child.props.onPress),
+                        });
+                    }) })] }) })));
+};
+export { RadioField };

package/dist/esm/components/RadioCard/RadioCard.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;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { forwardRef } from 'react';
+import { TouchableOpacity, } from 'react-native';
+import { css } from 'styled-components';
+import styled from '../../styled.native';
+import { LabelText } from '../LabelText';
+var StyledRadioInputWrapper = styled.View(function (_a) {
+    var theme = _a.theme;
+    return "\n      width: ".concat(numToPx(theme.space[600]), ";\n      height: ").concat(numToPx(theme.space[600]), ";\n      margin-top: ").concat(numToPx(theme.space[200]), ";\n    ");
+});
+var StyledRadioInput = styled.View(function (_a) {
+    var theme = _a.theme, invalid = _a.invalid, checked = _a.checked;
+    return "\n      width: ".concat(numToPx(theme.space[600]), ";\n      height: ").concat(numToPx(theme.space[600]), ";\n      border: ").concat(numToPx(theme.border.width.md), " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat(numToPx(theme.space[600]), ";\n      border-color: ").concat(invalid
+        ? theme.input.color.borderError
+        : checked
+            ? theme.input.color.selected
+            : theme.input.color.border, ";\n      background: ").concat(checked ? theme.input.color.selectedTint : 'transparent', ";\n    ");
+});
+var StyledRadioInputDot = styled.View(function (_a) {
+    var theme = _a.theme, checked = _a.checked;
+    return "\n      width: ".concat(numToPx(theme.space[300]), ";\n      height: ").concat(numToPx(theme.space[300]), ";\n      border-radius: ").concat(numToPx(theme.space[300]), ";\n      background: ").concat(theme.input.color.selected, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+});
+var Input = function (_a) {
+    var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
+    return (_jsx(StyledRadioInputWrapper, __assign({}, rest, { children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) })));
+};
+var StyledWrapper = styled.View(function (_a) {
+    var theme = _a.theme, checked = _a.checked, invalid = _a.invalid;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-items: center;\n    background: ", ";\n    padding: ", ";\n    min-width: 82px;\n    border-radius: ", ";\n    border: ", " solid;\n    border-color: ", ";\n  "], ["\n    align-items: center;\n    background: ", ";\n    padding: ", ";\n    min-width: 82px;\n    border-radius: ", ";\n    border: ", " solid;\n    border-color: ", ";\n  "])), theme.color.surface.bright, numToPx(theme.space[200]), numToPx(theme.border.radius.lg), numToPx(theme.border.width.md), invalid
+        ? theme.input.color.borderError
+        : checked
+            ? theme.input.color.selected
+            : 'transparent');
+});
+export var RadioCard = forwardRef(function (_a, ref) {
+    var label = _a.label, checked = _a.checked, invalid = _a.invalid, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID"]);
+    return (_jsx(TouchableOpacity, __assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: _jsxs(StyledWrapper, { checked: checked, invalid: invalid, children: [typeof label === 'string' ? _jsx(LabelText, { children: label }) : label, _jsx(Input, { checked: checked, invalid: invalid, testID: testID })] }) })));
+});
+var templateObject_1;

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

@@ -0,0 +1,73 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, } from 'react-native-reanimated';
+import styled, { useTheme } from '../../styled.native';
+import { SegmentButton } from './components/SegmentButton';
+/* These settings were found to be nice and fast whilst maintaining spring */
+var springSettings = {
+    damping: 25,
+    mass: 0.25,
+};
+export var SegmentedControls = function (_a) {
+    var activeSegment = _a.activeSegment, setActiveSegment = _a.setActiveSegment, segments = _a.segments, _b = _a.inline, inline = _b === void 0 ? false : _b, multipleRows = _a.multipleRows, _c = _a.size, size = _c === void 0 ? 'large' : _c, rest = __rest(_a, ["activeSegment", "setActiveSegment", "segments", "inline", "multipleRows", "size"]);
+    var animatedX = useSharedValue(0);
+    var animatedY = useSharedValue(0);
+    var animatedHeight = useSharedValue(0);
+    var animatedWidth = useSharedValue(0);
+    var theme = useTheme();
+    var animatedBackgroundStyle = useAnimatedStyle(function () { return ({
+        transform: [
+            {
+                translateX: animatedX.value,
+            },
+            {
+                translateY: animatedY.value + theme.space[size === 'small' ? 100 : 200],
+            } /* accounting for margin from top & bottom */,
+        ],
+        width: animatedWidth.value,
+        height: animatedHeight.value,
+        position: 'absolute',
+        borderRadius: theme.border.radius['2xl'],
+        backgroundColor: theme.color.surface.bright,
+    }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
+    return (_jsxs(SegmentsContainer, __assign({ "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(function (segment) {
+                var _a, _b;
+                return (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, accessibilityHint: segment.accessibilityHint, setAnimatedValues: function (x, y, width) {
+                        animatedX.value = withSpring(x, springSettings);
+                        animatedY.value = withSpring(y, springSettings);
+                        animatedWidth.value = width;
+                    }, onPress: function () { return setActiveSegment(segment); }, onLayout: function (width, height, x, y) {
+                        if (activeSegment.key === segment.key) {
+                            animatedX.value = x;
+                            animatedY.value = y;
+                            animatedHeight.value = height;
+                            animatedWidth.value = width;
+                        }
+                    }, multipleRows: multipleRows, size: size, inline: inline, testID: "".concat((_a = rest.testID) !== null && _a !== void 0 ? _a : 'segment', "-").concat(segment.key), segmentCount: (_b = segments.length) !== null && _b !== void 0 ? _b : 0 }, segment.key));
+            })] })));
+};
+var SegmentsContainer = styled.View(function (_a) {
+    var theme = _a.theme, $inline = _a.$inline, $multipleRows = _a.$multipleRows;
+    return "\n  flex-direction: row;\n  flex-wrap: ".concat($multipleRows ? '' : 'no-', "wrap;\n  justify-content: ").concat($multipleRows ? 'space-between' : 'space-around', ";\n  align-items: center;\n  width: ").concat($inline ? 'auto' : '100%', ";\n  align-self: ").concat($inline ? 'flex-start' : 'stretch', ";\n  padding: ").concat(theme.space[100], "px;\n  background-color: ").concat(theme.color.surface.dim, ";\n  border-radius: ").concat(theme.border.radius['2xl'], "px;\n");
+});

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

@@ -0,0 +1,89 @@
+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 { useEffect, useRef } from 'react';
+import { Pressable, useWindowDimensions, } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import styled from '../../../styled.native';
+import { P } from '../../P';
+var AnimatedP = Animated.createAnimatedComponent(P);
+var textSizeProps = {
+    numberOfLines: 1,
+    adjustsFontSizeToFit: true,
+    minimumFontScale: 0.95,
+    maxFontSizeMultiplier: 1.75,
+};
+export var SegmentButton = function (_a) {
+    var accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, setAnimatedValues = _a.setAnimatedValues, segmentCount = _a.segmentCount, _b = _a.size, size = _b === void 0 ? 'large' : _b, testID = _a.testID;
+    var xRef = useRef(0);
+    var yRef = useRef(0);
+    var widthRef = useRef(0);
+    var heightRef = useRef(0);
+    var hitslopVal = size === 'small' ? 8 : 4;
+    var fontScale = useWindowDimensions().fontScale;
+    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]);
+    useEffect(function () {
+        if (!isSelected) {
+            return;
+        }
+        setAnimatedValues(xRef.current, yRef.current, widthRef.current);
+    }, [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;
+        // (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 = y - height / (multipleRows ? 1.1 : 3 * fontScale);
+        heightRef.current = height;
+        widthRef.current = width;
+        onLayout(width, height, x, yRef.current);
+    };
+    return (_jsx(Pressable, { onLayout: handleLayout, onPress: onPress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { checked: isSelected }, accessibilityLabel: accessibilityLabel || label, accessibilityHint: accessibilityHint, hitSlop: {
+            top: hitslopVal,
+            bottom: hitslopVal,
+        }, style: {
+            flexGrow: inline || multipleRows ? undefined : 1,
+            width: inline || multipleRows ? 'auto' : "".concat(100 / segmentCount, "%"),
+        }, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, multiline: multipleRows, children: [_jsx(SSegmentText, __assign({ style: {
+                        opacity: 0,
+                        fontWeight: '900',
+                    }, "$isSelected": false }, textSizeProps, { children: label })), _jsx(SSegmentText, __assign({ style: animatedStyleNormal, "$isSelected": false }, textSizeProps, { children: label })), _jsx(SSegmentText, __assign({ style: animatedStyleBold, "$isSelected": true }, textSizeProps, { children: label }))] }) }));
+};
+var SSegmentsWrapper = styled.View(function (_a) {
+    var theme = _a.theme, $size = _a.$size, multiline = _a.multiline;
+    return "\n  ".concat(multiline
+        ? "padding: 4px ".concat(theme.space[$size === 'small' ? 400 : 600], "px;")
+        : "padding: ".concat($size === 'small' ? 2 : 8, "px ").concat(theme.space[$size === 'small' ? 300 : 400], "px;"), "\n  align-items: center;\n  justify-content: center;\n");
+});
+var SSegmentText = styled(AnimatedP)(function (_a) {
+    var $isSelected = _a.$isSelected, theme = _a.theme;
+    return "\n    font-family: ".concat($isSelected
+        ? theme.native.font.family.bold
+        : theme.native.font.family.book, ";\n    color: ").concat(theme.color.surface.onSurface, ";\n  ");
+});

package/dist/esm/components/SelectField/Select.js

@@ -0,0 +1,68 @@
+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 { numToPx } from '@ovotech/element-core';
+import groupBy from 'lodash.groupby';
+import { Fragment, useState } from 'react';
+import { Dimensions, Modal, ScrollView, View } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { Icon } from '../Icon';
+import { P } from '../P';
+import { Strong } from '../Strong';
+var SelectInput = styled.TouchableOpacity(function (_a) {
+    var theme = _a.theme, hasError = _a.hasError;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: row;\n      align-items: center;\n      background-color: transparent;\n      border-color: ", ";\n      border-width: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      padding-right: ", ";\n      height: ", ";\n    "], ["\n      flex-direction: row;\n      align-items: center;\n      background-color: transparent;\n      border-color: ", ";\n      border-width: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      padding-right: ", ";\n      height: ", ";\n    "])), hasError
+        ? theme.input.color.borderError
+        : theme.input.color.border, numToPx(theme.border.width.md), numToPx(theme.border.radius.sm), numToPx(theme.space[200]), numToPx(theme.space[350]), numToPx(theme.space[1100]));
+});
+var DropdownWrapper = styled.TouchableOpacity(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    flex: 1;\n    justify-content: center;\n    align-items: center;\n\n    /* 80 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */\n    background-color: ", "80;\n  "], ["\n    flex: 1;\n    justify-content: center;\n    align-items: center;\n\n    /* 80 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */\n    background-color: ", "80;\n  "])), theme.color.brand.dark);
+});
+var DropdownContainer = styled.SafeAreaView(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 95%;\n    max-height: 70%;\n    border-radius: ", ";\n    background-color: ", ";\n  "], ["\n    width: 95%;\n    max-height: 70%;\n    border-radius: ", ";\n    background-color: ", ";\n  "])), numToPx(theme.border.radius.sm), theme.color.surface.bright);
+});
+var SelectOption = styled.TouchableOpacity(function (_a) {
+    var theme = _a.theme, isLastOption = _a.isLastOption;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    border-bottom-color: ", ";\n    border-bottom-width: ", "px;\n    padding: 0 ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    border-bottom-color: ", ";\n    border-bottom-width: ", "px;\n    padding: 0 ", ";\n  "])), theme.color.input.borderDim, isLastOption ? 0 : 1, numToPx(theme.space[400]));
+});
+var Radio = styled.View(function (_a) {
+    var theme = _a.theme, isChecked = _a.isChecked;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: ", ";\n    width: ", ";\n    height: ", ";\n    margin-left: auto;\n    border-radius: ", ";\n    border-width: ", ";\n    border-color: ", ";\n  "], ["\n    background-color: ", ";\n    width: ", ";\n    height: ", ";\n    margin-left: auto;\n    border-radius: ", ";\n    border-width: ", ";\n    border-color: ", ";\n  "])), isChecked
+        ? theme.input.color.selectedTint
+        : 'transparent', numToPx(theme.space[600]), numToPx(theme.space[600]), numToPx(theme.space[600]), numToPx(theme.border.width.md), theme.input.color[isChecked ? 'selected' : 'border']);
+});
+var RadioDot = styled.View(function (_a) {
+    var theme = _a.theme, isChecked = _a.isChecked;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    background-color: ", ";\n    position: absolute;\n    top: ", ";\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    align-self: center;\n    opacity: ", ";\n  "], ["\n    background-color: ", ";\n    position: absolute;\n    top: ", ";\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    align-self: center;\n    opacity: ", ";\n  "])), theme.input.color.selected, numToPx(theme.space[100]), numToPx(theme.space[300]), numToPx(theme.space[300]), numToPx(theme.space[300]), isChecked ? 1 : 0);
+});
+var StyledP = styled(P)(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), numToPx(theme.space[300]), numToPx(theme.space[300]));
+});
+var StyledCategory = styled(P)(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    font-size: ", ";\n    color: ", ";\n    background-color: ", ";\n    padding: ", " ", ";\n  "], ["\n    font-size: ", ";\n    color: ", ";\n    background-color: ", ";\n    padding: ", " ", ";\n  "])), numToPx(theme.font.size.xs.mediaQuery.lg), theme.color.surface.onSurface, theme.color.surface.surface, numToPx(theme.space[100]), numToPx(theme.space[400]));
+});
+export var Select = function (_a) {
+    var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.defaultSelected, defaultSelected = _c === void 0 ? { label: '', value: 'default' } : _c, _d = _a.noOptionMessage, noOptionMessage = _d === void 0 ? 'No option selected' : _d, _e = _a.onSelected, onSelected = _e === void 0 ? function () { return null; } : _e, _f = _a.hasError, hasError = _f === void 0 ? false : _f, _g = _a.testID, testID = _g === void 0 ? 'select' : _g;
+    var _h = useState(false), isOpen = _h[0], setOpen = _h[1];
+    var _j = useState(defaultSelected), selected = _j[0], setSelected = _j[1];
+    var height = Dimensions.get('window').height;
+    var dropdownContainerMaxHeight = height * 0.7;
+    var handleOptionPress = function (val) {
+        onSelected(val);
+        setOpen(false);
+        setSelected(val);
+    };
+    var optionsByCategories = groupBy(options, 'category');
+    var requiredOption = {
+        label: "-- ".concat(noOptionMessage, " --"),
+        value: 'default',
+    };
+    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { onPress: function () { return setOpen(false); }, children: _jsx(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: "".concat(testID, "-OptionsScrollView"), children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selected.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selected.value === option.value, children: _jsx(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;