@ovotech/element-native 4.4.9 → 4.5.0

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

@@ -1,25 +1,19 @@
-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)); }) }));
+export function NavigationDots({ data, animatedValue, }) {
+    return (_jsx(SDotsContainer, { children: data.map((_, index) => (_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) {
+const Dot = ({ animatedValue, index, length, width = 10 }) => {
+    const theme = useTheme();
+    const animatedStyle = useAnimatedStyle(() => {
+        let inputRange = [index - 1, index, index + 1];
+        let outputRange = [-width, 0, width];
+        if (index === 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, [
+        const backgroundColor = interpolateColor(animatedValue?.value, inputRange, [
             theme.core.color.brand.forest,
             theme.core.color.brand.energised,
             theme.core.color.brand.forest,
@@ -27,24 +21,28 @@ var Dot = function (_a) {
         return {
             transform: [
                 {
-                    translateX: interpolate(animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value, inputRange, outputRange, Extrapolate.CLAMP),
+                    translateX: interpolate(animatedValue?.value, inputRange, outputRange, Extrapolate.CLAMP),
                 },
             ],
-            backgroundColor: 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.core.color.brand.forest;
-}, 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;
+const SDotsContainer = styled.View `
+  position: absolute;
+  bottom: 20px;
+  flex-direction: row;
+  gap: 10px;
+`;
+const SDot = styled.View `
+  background-color: ${({ theme }) => theme.core.color.brand.forest};
+  width: ${({ $width }) => $width}px;
+  height: ${({ $width }) => $width}px;
+  border-radius: 50px;
+  overflow: hidden;
+`;
+const SAnimatedDot = styled(Animated.View) `
+  border-radius: 20px;
+  flex: 1;
+`;

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

@@ -1,23 +1,8 @@
-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 Animated, { Extrapolation, 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';
@@ -25,52 +10,48 @@ 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: {
+export function ProductCarousel({ data, children, width, height, fullWidth, showArrows = true, showDots = false, loop = true, arrowsDistanceFromTop, }) {
+    const theme = useTheme();
+    const { mediumAndUp } = useBreakpoint();
+    const carouselRef = useRef(null);
+    const progressValue = useSharedValue(0);
+    const windowWidth = useWindowDimensions().width;
+    const carouselWidth = fullWidth ? windowWidth : width || windowWidth;
+    return (_jsxs(View, { children: [mediumAndUp ? null : _jsx(SkewLine, {}), _jsxs(SCarouselContainer, { children: [_jsx(Carousel, { ref: carouselRef, data: data, renderItem: ({ item, animationValue }) => (_jsx(Card, { animationValue: animationValue, height: height, width: carouselWidth, children: children(item) })), vertical: false, width: carouselWidth, height: height, onProgressChange: (_, absoluteProgress) => (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: {
+                        }, loop: loop, testID: "carousel", scrollAnimationDuration: 700 }), showArrows && data.length > 1 && (_jsxs(_Fragment, { children: [_jsx(SActionPressable, { onPress: () => carouselRef.current?.prev(), "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
                                     top: 32,
                                     bottom: 32,
                                     left: 16,
                                     right: 16,
-                                }, children: _jsx(Icon, { name: "arrow-left", size: 32, color: theme.core.color.brand.white }) }), _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: {
+                                }, children: _jsx(Icon, { name: "arrow-left", size: 32, color: theme.core.color.brand.white }) }), _jsx(SActionPressable, { "$next": true, onPress: () => carouselRef.current?.next(), "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
                                     top: 32,
                                     bottom: 32,
                                     left: 16,
                                     right: 16,
                                 }, children: _jsx(Icon, { name: "arrow-right", size: 32, color: theme.core.color.brand.white }) })] })), 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 = {
+const Card = ({ children, animationValue, height, width, }) => {
+    const WIDTH = width / 1.3;
+    const HEIGHT = height / 1.3;
+    const cardStyle = useAnimatedStyle(() => {
+        const scale = interpolate(animationValue.value, [-0.1, 0, 1], [0.95, 1, 1], Extrapolation.CLAMP);
+        const opacity = interpolate(animationValue.value, [-0.75, 0, 1], [0, 1, 0]);
+        const translateX = interpolate(animationValue.value, [-1, -0.2, 0, 1], [0, WIDTH * 0.3, 0, 0]);
+        const transform = {
             transform: [
-                { scale: scale },
-                { translateX: translateX },
+                { scale },
+                { translateX },
                 { perspective: 200 },
                 {
-                    rotateY: "".concat(interpolate(animationValue.value, [-1, 0, 0.4, 1], [30, 0, -25, -25], Extrapolate.CLAMP), "deg"),
+                    rotateY: `${interpolate(animationValue.value, [-1, 0, 0.4, 1], [30, 0, -25, -25], Extrapolation.CLAMP)}deg`,
                 },
             ],
         };
-        return __assign(__assign({}, withAnchorPoint(transform, { x: 0.5, y: 0.5 }, { width: WIDTH, height: HEIGHT })), { opacity: opacity });
+        return {
+            ...withAnchorPoint(transform, { x: 0.5, y: 0.5 }, { width: WIDTH, height: HEIGHT }),
+            opacity,
+        };
     }, []);
     return (_jsx(Animated.View, { style: {
             flex: 1,
@@ -84,15 +65,17 @@ var Card = function (_a) {
                 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.core.space[14]))
-        : "left: ".concat(mediumAndUp ? '25%' : numToPx(theme.core.space[14]));
-});
-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;
+const SCarouselContainer = styled.View `
+  align-items: center;
+  background-color: #0a9828;
+  overflow: hidden;
+  margin-top: -0.5px;
+`;
+const SActionPressable = styled.Pressable `
+  position: absolute;
+  top: ${({ $top }) => ($top ? `${$top}px` : '30%')};
+  ${({ theme, $next, mediumAndUp }) => $next
+    ? `right: ${mediumAndUp ? '25%' : numToPx(theme.core.space[14])}`
+    : `left: ${mediumAndUp ? '25%' : numToPx(theme.core.space[14])}`};
+`;
+const SkewLine = (props) => (_jsx(Svg, { width: "100%", height: 69, ...props, children: _jsx(Path, { fill: "#0A9828", d: "M768 0 0 68.776h768V0Z" }) }));

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

@@ -1,31 +1,25 @@
-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) {
+const isValidSize = (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) {
+const defaultAnchorPoint = { x: 0.5, y: 0.5 };
+export const withAnchorPoint = (transform, anchorPoint, size) => {
     'worklet';
     if (!isValidSize(size))
         return transform;
-    var injectedTransform = transform.transform;
+    let injectedTransform = transform.transform;
     if (!injectedTransform)
         return transform;
     if (anchorPoint.x !== defaultAnchorPoint.x && size.width) {
-        var shiftTranslateX = [];
+        const shiftTranslateX = [];
         // shift before rotation
         shiftTranslateX.push({
             translateX: size.width * (anchorPoint.x - defaultAnchorPoint.x),
         });
-        injectedTransform = __spreadArray(__spreadArray([], shiftTranslateX, true), injectedTransform, true);
+        injectedTransform = [
+            ...shiftTranslateX,
+            ...injectedTransform,
+        ];
         // shift after rotation
         injectedTransform.push({
             translateX: size.width * (defaultAnchorPoint.x - anchorPoint.x),
@@ -34,12 +28,12 @@ export var withAnchorPoint = function (transform, anchorPoint, size) {
     if (!Array.isArray(injectedTransform))
         return { transform: injectedTransform };
     if (anchorPoint.y !== defaultAnchorPoint.y && size.height) {
-        var shiftTranslateY = [];
+        const shiftTranslateY = [];
         // shift before rotation
         shiftTranslateY.push({
             translateY: size.height * (anchorPoint.y - defaultAnchorPoint.y),
         });
-        injectedTransform = __spreadArray(__spreadArray([], shiftTranslateY, true), injectedTransform, true);
+        injectedTransform = [...shiftTranslateY, ...injectedTransform];
         // shift after rotation
         injectedTransform.push({
             translateY: size.height * (defaultAnchorPoint.y - anchorPoint.y),

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

@@ -1,62 +1,52 @@
-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 core = _a.theme.core;
-    return "\n      width: ".concat(numToPx(core.space[6]), ";\n      height: ").concat(numToPx(core.space[6]), ";\n      margin-right: 10px;\n    ");
+const StyledRadioInputWrapper = styled.View(({ theme: { core } }) => {
+    return `
+      width: ${numToPx(core.space[6])};
+      height: ${numToPx(core.space[6])};
+      margin-right: 10px;
+    `;
 });
-var StyledRadioInput = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;
-    return "\n      width: ".concat(numToPx(core.space[6]), ";\n      height: ").concat(numToPx(core.space[6]), ";\n      border: ").concat(numToPx(core.borderWidth.small), " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat(numToPx(core.space[6]), ";\n      border-color: ").concat(invalid
+const StyledRadioInput = styled.View(({ theme: { core, semantic }, invalid, checked }) => {
+    return `
+      width: ${numToPx(core.space[6])};
+      height: ${numToPx(core.space[6])};
+      border: ${numToPx(core.borderWidth.small)} solid;
+      align-items: center;
+      justify-content: center;
+      border-radius: ${numToPx(core.space[6])};
+      border-color: ${invalid
         ? semantic.message.error
         : checked
             ? core.color.blue.dark
-            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
+            : semantic.border.functional};
+      background: ${checked ? core.color.blue.lightest : 'transparent'};
+    `;
 });
-var StyledRadioInputDot = styled.View(function (_a) {
-    var core = _a.theme.core, checked = _a.checked;
-    return "\n      width: ".concat(numToPx(core.space[3]), ";\n      height: ").concat(numToPx(core.space[3]), ";\n      border-radius: ").concat(numToPx(core.space[3]), ";\n      background: ").concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+const StyledRadioInputDot = styled.View(({ theme: { core }, checked }) => {
+    return `
+      width: ${numToPx(core.space[3])};
+      height: ${numToPx(core.space[3])};
+      border-radius: ${numToPx(core.space[3])};
+      background: ${core.color.blue.dark};
+      opacity: ${checked ? 1 : 0};
+    `;
 });
-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 }) }) })));
+const Input = ({ checked, invalid, testID, ...rest }) => {
+    return (_jsx(StyledRadioInputWrapper, { ...rest, children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) }));
+};
+const StyledWrapper = styled.View(({ theme: { core } }) => `
+    padding-top: ${numToPx(core.space[3])};
+    flex-direction: row;
+  `);
+const Radio = ({ label, hint, checked, invalid, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+value, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
+activeOpacity = 0.8, testID, ref, ...rest }) => {
+    return (_jsx(TouchableOpacity, { ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { 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] })] }) }));
 };
-var StyledWrapper = styled.View(function (_a) {
-    var core = _a.theme.core;
-    return "\n    padding-top: ".concat(numToPx(core.space[3]), ";\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

@@ -1,25 +1,3 @@
-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';
@@ -29,18 +7,15 @@ 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),
-                        });
-                    }) })] }) })));
+const RadioField = ({ label, hint, error, children, optional = false, value, onValueChange, ...rest }) => {
+    const hasError = !!error;
+    const validChildren = getValidChildren(children);
+    return (_jsx(FormGroup, { ...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, child => 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 && (() => onValueChange(child.props.value)), child.props.onPress),
+                    })) })] }) }));
 };
 export { RadioField };

package/dist/esm/components/RadioCard/RadioCard.js

@@ -1,66 +1,57 @@
-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 core = _a.theme.core;
-    return "\n      width: ".concat(numToPx(core.space[6]), ";\n      height: ").concat(numToPx(core.space[6]), ";\n      margin-top: ").concat(numToPx(core.space[2]), ";\n    ");
+const StyledRadioInputWrapper = styled.View(({ theme: { core } }) => {
+    return `
+      width: ${numToPx(core.space[6])};
+      height: ${numToPx(core.space[6])};
+      margin-top: ${numToPx(core.space[2])};
+    `;
 });
-var StyledRadioInput = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;
-    return "\n      width: ".concat(numToPx(core.space[6]), ";\n      height: ").concat(numToPx(core.space[6]), ";\n      border: ").concat(numToPx(core.borderWidth.small), " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat(numToPx(core.space[6]), ";\n      border-color: ").concat(invalid
+const StyledRadioInput = styled.View(({ theme: { core, semantic }, invalid, checked }) => {
+    return `
+      width: ${numToPx(core.space[6])};
+      height: ${numToPx(core.space[6])};
+      border: ${numToPx(core.borderWidth.small)} solid;
+      align-items: center;
+      justify-content: center;
+      border-radius: ${numToPx(core.space[6])};
+      border-color: ${invalid
         ? semantic.message.error
         : checked
             ? core.color.blue.dark
-            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
+            : semantic.border.functional};
+      background: ${checked ? core.color.blue.lightest : 'transparent'};
+    `;
 });
-var StyledRadioInputDot = styled.View(function (_a) {
-    var core = _a.theme.core, checked = _a.checked;
-    return "\n      width: ".concat(numToPx(core.space[3]), ";\n      height: ").concat(numToPx(core.space[3]), ";\n      border-radius: ").concat(numToPx(core.space[3]), ";\n      background: ").concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+const StyledRadioInputDot = styled.View(({ theme: { core }, checked }) => {
+    return `
+      width: ${numToPx(core.space[3])};
+      height: ${numToPx(core.space[3])};
+      border-radius: ${numToPx(core.space[3])};
+      background: ${core.color.blue.dark};
+      opacity: ${checked ? 1 : 0};
+    `;
 });
-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 }) }) })));
+const Input = ({ checked, invalid, testID, ...rest }) => {
+    return (_jsx(StyledRadioInputWrapper, { ...rest, children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) }));
+};
+const StyledWrapper = styled.View(({ theme: { core, semantic }, checked, invalid }) => css `
+    align-items: center;
+    background: ${semantic.surface.elevated};
+    padding: ${numToPx(core.space[2])};
+    min-width: 82px;
+    border-radius: ${numToPx(core.radius.small)};
+    border: ${numToPx(core.borderWidth.medium)} solid;
+    border-color: ${invalid
+    ? semantic.message.error
+    : checked
+        ? core.color.blue.dark
+        : 'transparent'};
+  `);
+export const RadioCard = ({ label, checked, invalid, activeOpacity = 0.8, testID, hasInput = true, ref, ...rest }) => {
+    return (_jsx(TouchableOpacity, { ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked }, ...rest, children: _jsxs(StyledWrapper, { checked: checked, invalid: invalid, children: [typeof label === 'string' ? _jsx(LabelText, { children: label }) : label, hasInput ? (_jsx(Input, { checked: checked, invalid: invalid, testID: testID })) : null] }) }));
 };
-var StyledWrapper = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, 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  "])), semantic.surface.elevated, numToPx(core.space[2]), numToPx(core.radius.small), numToPx(core.borderWidth.medium), invalid
-        ? semantic.message.error
-        : checked
-            ? core.color.blue.dark
-            : '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, _c = _a.hasInput, hasInput = _c === void 0 ? true : _c, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID", "hasInput"]);
-    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, hasInput ? (_jsx(Input, { checked: checked, invalid: invalid, testID: testID })) : null] }) })));
-});
-var templateObject_1;