@ovotech/element-native 5.4.3 → 5.5.0

package/dist/components/ProductCarousel/NavigationDots.js

@@ -1,19 +1,55 @@
-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({ data, animatedValue, }) {
-    return (_jsx(SDotsContainer, { children: data.map((_, index) => (_jsx(Dot, { index: index, length: data.length, animatedValue: animatedValue }, index))) }));
+"use strict";
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationDots = NavigationDots;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const styled_native_1 = __importStar(require("../../styled.native"));
+function NavigationDots({ data, animatedValue, }) {
+    return ((0, jsx_runtime_1.jsx)(SDotsContainer, { children: data.map((_, index) => ((0, jsx_runtime_1.jsx)(Dot, { index: index, length: data.length, animatedValue: animatedValue }, index))) }));
 }
 const Dot = ({ animatedValue, index, length, width = 10 }) => {
-    const theme = useTheme();
-    const animatedStyle = useAnimatedStyle(() => {
+    const theme = (0, styled_native_1.useTheme)();
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
         let inputRange = [index - 1, index, index + 1];
         let outputRange = [-width, 0, width];
-        if (index === 0 && animatedValue?.value > length - 1) {
+        if (index === 0 && (animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value) > length - 1) {
             inputRange = [length - 1, length, length + 1];
             outputRange = [-width, 0, width];
         }
-        const backgroundColor = interpolateColor(animatedValue?.value, inputRange, [
+        const backgroundColor = (0, react_native_reanimated_1.interpolateColor)(animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value, inputRange, [
             theme.color.brand.dim,
             theme.color.brand.bold,
             theme.color.brand.dim,
@@ -21,28 +57,28 @@ const Dot = ({ animatedValue, index, length, width = 10 }) => {
         return {
             transform: [
                 {
-                    translateX: interpolate(animatedValue?.value, inputRange, outputRange, Extrapolate.CLAMP),
+                    translateX: (0, react_native_reanimated_1.interpolate)(animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value, inputRange, outputRange, react_native_reanimated_1.Extrapolate.CLAMP),
                 },
             ],
             backgroundColor,
         };
     }, [animatedValue, index, length]);
-    return (_jsx(SDot, { "$width": width, children: _jsx(SAnimatedDot, { style: animatedStyle }) }));
+    return ((0, jsx_runtime_1.jsx)(SDot, { "$width": width, children: (0, jsx_runtime_1.jsx)(SAnimatedDot, { style: animatedStyle }) }));
 };
-const SDotsContainer = styled.View `
+const SDotsContainer = styled_native_1.default.View `
   position: absolute;
   bottom: 20px;
   flex-direction: row;
   gap: 10px;
 `;
-const SDot = styled.View `
+const SDot = styled_native_1.default.View `
   background-color: ${({ theme }) => theme.color.brand.dim};
   width: ${({ $width }) => $width}px;
   height: ${({ $width }) => $width}px;
   border-radius: 50px;
   overflow: hidden;
 `;
-const SAnimatedDot = styled(Animated.View) `
+const SAnimatedDot = (0, styled_native_1.default)(react_native_reanimated_1.default.View) `
   border-radius: 20px;
   flex: 1;
 `;

package/dist/components/ProductCarousel/ProductCarousel.js

@@ -1,63 +1,99 @@
-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 { View, useWindowDimensions } from 'react-native';
-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';
-import styled, { useTheme } from '../../styled.native';
-import { Icon } from '../Icon';
-import { NavigationDots } from './NavigationDots';
-import { withAnchorPoint } from './anchor-point';
-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;
+"use strict";
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.ProductCarousel = ProductCarousel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_core_1 = require("@ovotech/element-core");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const react_native_reanimated_carousel_1 = __importDefault(require("react-native-reanimated-carousel"));
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const hooks_1 = require("../../hooks");
+const styled_native_1 = __importStar(require("../../styled.native"));
+const Icon_1 = require("../Icon");
+const NavigationDots_1 = require("./NavigationDots");
+const anchor_point_1 = require("./anchor-point");
+function ProductCarousel({ data, children, width, height, fullWidth, showArrows = true, showDots = false, loop = true, arrowsDistanceFromTop, }) {
+    const theme = (0, styled_native_1.useTheme)();
+    const { mediumAndUp } = (0, hooks_1.useBreakpoint)();
+    const carouselRef = (0, react_1.useRef)(null);
+    const progressValue = (0, react_native_reanimated_1.useSharedValue)(0);
+    const windowWidth = (0, react_native_1.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: {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [mediumAndUp ? null : (0, jsx_runtime_1.jsx)(SkewLine, {}), (0, jsx_runtime_1.jsxs)(SCarouselContainer, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_carousel_1.default, { ref: carouselRef, data: data, renderItem: ({ item, animationValue }) => ((0, jsx_runtime_1.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: () => carouselRef.current?.prev(), "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                        }, loop: loop, testID: "carousel", scrollAnimationDuration: 700 }), showArrows && data.length > 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SActionPressable, { onPress: () => { 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: () => carouselRef.current?.next(), "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                                }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-left", size: 32, color: theme.color.brand.onBrand }) }), (0, jsx_runtime_1.jsx)(SActionPressable, { "$next": true, onPress: () => { 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 }))] })] }));
+                                }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-right", size: 32, color: theme.color.brand.onBrand }) })] })), showDots && data.length > 1 && ((0, jsx_runtime_1.jsx)(NavigationDots_1.NavigationDots, { data: data, animatedValue: progressValue }))] })] }));
 }
 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 cardStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const scale = (0, react_native_reanimated_1.interpolate)(animationValue.value, [-0.1, 0, 1], [0.95, 1, 1], react_native_reanimated_1.Extrapolation.CLAMP);
+        const opacity = (0, react_native_reanimated_1.interpolate)(animationValue.value, [-0.75, 0, 1], [0, 1, 0]);
+        const translateX = (0, react_native_reanimated_1.interpolate)(animationValue.value, [-1, -0.2, 0, 1], [0, WIDTH * 0.3, 0, 0]);
         const transform = {
             transform: [
                 { scale },
                 { translateX },
                 { perspective: 200 },
                 {
-                    rotateY: `${interpolate(animationValue.value, [-1, 0, 0.4, 1], [30, 0, -25, -25], Extrapolation.CLAMP)}deg`,
+                    rotateY: `${(0, react_native_reanimated_1.interpolate)(animationValue.value, [-1, 0, 0.4, 1], [30, 0, -25, -25], react_native_reanimated_1.Extrapolation.CLAMP)}deg`,
                 },
             ],
         };
-        return {
-            ...withAnchorPoint(transform, { x: 0.5, y: 0.5 }, { width: WIDTH, height: HEIGHT }),
-            opacity,
-        };
+        return Object.assign(Object.assign({}, (0, anchor_point_1.withAnchorPoint)(transform, { x: 0.5, y: 0.5 }, { width: WIDTH, height: HEIGHT })), { opacity });
     }, []);
-    return (_jsx(Animated.View, { style: {
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: {
             flex: 1,
             justifyContent: 'center',
             alignItems: 'center',
-        }, children: _jsx(Animated.View, { style: [
+        }, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
                 {
                     width: WIDTH,
                     height: HEIGHT,
@@ -65,17 +101,17 @@ const Card = ({ children, animationValue, height, width, }) => {
                 cardStyle,
             ], children: children }) }));
 };
-const SCarouselContainer = styled.View `
+const SCarouselContainer = styled_native_1.default.View `
   align-items: center;
   background-color: #0a9828;
   overflow: hidden;
   margin-top: -0.5px;
 `;
-const SActionPressable = styled.Pressable `
+const SActionPressable = styled_native_1.default.Pressable `
   position: absolute;
   top: ${({ $top }) => ($top ? `${$top}px` : '30%')};
   ${({ theme, $next, mediumAndUp }) => $next
-    ? `right: ${mediumAndUp ? '25%' : numToPx(theme.space[1400])}`
-    : `left: ${mediumAndUp ? '25%' : numToPx(theme.space[1400])}`};
+    ? `right: ${mediumAndUp ? '25%' : (0, element_core_1.numToPx)(theme.space[1400])}`
+    : `left: ${mediumAndUp ? '25%' : (0, element_core_1.numToPx)(theme.space[1400])}`};
 `;
-const SkewLine = (props) => (_jsx(Svg, { width: "100%", height: 69, ...props, children: _jsx(Path, { fill: "#0A9828", d: "M768 0 0 68.776h768V0Z" }) }));
+const SkewLine = (props) => ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, Object.assign({ width: "100%", height: 69 }, props, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { fill: "#0A9828", d: "M768 0 0 68.776h768V0Z" }) })));

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

@@ -1,9 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withAnchorPoint = void 0;
 const isValidSize = (size) => {
     'worklet';
     return size && size.width > 0 && size.height > 0;
 };
 const defaultAnchorPoint = { x: 0.5, y: 0.5 };
-export const withAnchorPoint = (transform, anchorPoint, size) => {
+const withAnchorPoint = (transform, anchorPoint, size) => {
     'worklet';
     if (!isValidSize(size))
         return transform;
@@ -41,3 +44,4 @@ export const withAnchorPoint = (transform, anchorPoint, size) => {
     }
     return { transform: injectedTransform };
 };
+exports.withAnchorPoint = withAnchorPoint;

package/dist/components/ProductCarousel/index.js

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

package/dist/components/Radio/Radio.js

@@ -1,24 +1,41 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { TouchableOpacity, View, } from 'react-native';
-import styled from '../../styled.native';
-import { HintText } from '../HintText';
-import { LabelText } from '../LabelText';
-const StyledRadioInputWrapper = styled.View(({ theme }) => {
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_core_1 = require("@ovotech/element-core");
+const react_native_1 = require("react-native");
+const styled_native_1 = __importDefault(require("../../styled.native"));
+const HintText_1 = require("../HintText");
+const LabelText_1 = require("../LabelText");
+const StyledRadioInputWrapper = styled_native_1.default.View(({ theme }) => {
     return `
-      width: ${numToPx(theme.space[600])};
-      height: ${numToPx(theme.space[600])};
+      width: ${(0, element_core_1.numToPx)(theme.space[600])};
+      height: ${(0, element_core_1.numToPx)(theme.space[600])};
       margin-right: 10px;
     `;
 });
-const StyledRadioInput = styled.View(({ theme, invalid, checked }) => {
+const StyledRadioInput = styled_native_1.default.View(({ theme, invalid, checked }) => {
     return `
-      width: ${numToPx(theme.space[600])};
-      height: ${numToPx(theme.space[600])};
-      border: ${numToPx(theme.border.width.md)} solid;
+      width: ${(0, element_core_1.numToPx)(theme.space[600])};
+      height: ${(0, element_core_1.numToPx)(theme.space[600])};
+      border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid;
       align-items: center;
       justify-content: center;
-      border-radius: ${numToPx(theme.space[600])};
+      border-radius: ${(0, element_core_1.numToPx)(theme.space[600])};
       border-color: ${invalid
         ? theme.input.color.borderError
         : checked
@@ -27,26 +44,28 @@ const StyledRadioInput = styled.View(({ theme, invalid, checked }) => {
       background: ${checked ? theme.input.color.selectedTint : 'transparent'};
     `;
 });
-const StyledRadioInputDot = styled.View(({ theme, checked }) => {
+const StyledRadioInputDot = styled_native_1.default.View(({ theme, checked }) => {
     return `
-      width: ${numToPx(theme.space[300])};
-      height: ${numToPx(theme.space[300])};
-      border-radius: ${numToPx(theme.space[300])};
+      width: ${(0, element_core_1.numToPx)(theme.space[300])};
+      height: ${(0, element_core_1.numToPx)(theme.space[300])};
+      border-radius: ${(0, element_core_1.numToPx)(theme.space[300])};
       background: ${theme.input.color.selected};
       opacity: ${checked ? 1 : 0};
     `;
 });
-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 Input = (_a) => {
+    var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
+    return ((0, jsx_runtime_1.jsx)(StyledRadioInputWrapper, Object.assign({}, rest, { children: (0, jsx_runtime_1.jsx)(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(StyledRadioInputDot, { checked: checked }) }) })));
 };
-const StyledWrapper = styled.View(({ theme }) => `
-    padding-top: ${numToPx(theme.space[300])};
+const StyledWrapper = styled_native_1.default.View(({ theme }) => `
+    padding-top: ${(0, element_core_1.numToPx)(theme.space[300])};
     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] })] }) }));
+const Radio = (_a) => {
+    var { 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 } = _a, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "activeOpacity", "testID", "ref"]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, { children: [(0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })] }) })));
 };
-export { Radio };
+exports.Radio = Radio;

package/dist/components/Radio/RadioField.js

@@ -1,21 +1,36 @@
-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';
-const RadioField = ({ label, hint, error, children, optional = false, value, onValueChange, ...rest }) => {
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const utils_1 = require("../../utils");
+const ErrorText_1 = require("../ErrorText");
+const FormGroup_1 = require("../FormGroup");
+const HintText_1 = require("../HintText");
+const LabelText_1 = require("../LabelText");
+const Stack_1 = require("../Stack");
+const RadioField = (_a) => {
+    var { label, hint, error, children, optional = false, value, onValueChange } = _a, rest = __rest(_a, ["label", "hint", "error", "children", "optional", "value", "onValueChange"]);
     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, {
+    const validChildren = (0, utils_1.getValidChildren)(children);
+    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, Object.assign({}, rest, { error: hasError, children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { spaceBetween: 1, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(LabelText_1.LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null, error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { accessible: true, accessibilityRole: "radiogroup", children: react_1.Children.map(validChildren, child => (0, react_1.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),
-                    })) })] }) }));
+                        onPress: (0, utils_1.callAll)(onValueChange && (() => onValueChange(child.props.value)), child.props.onPress),
+                    })) })] }) })));
 };
-export { RadioField };
+exports.RadioField = RadioField;

package/dist/components/Radio/index.js

@@ -1,2 +1,7 @@
-export { Radio } from './Radio';
-export { RadioField } from './RadioField';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioField = exports.Radio = void 0;
+var Radio_1 = require("./Radio");
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
+var RadioField_1 = require("./RadioField");
+Object.defineProperty(exports, "RadioField", { enumerable: true, get: function () { return RadioField_1.RadioField; } });

package/dist/components/RadioCard/RadioCard.js

@@ -1,24 +1,41 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { TouchableOpacity, } from 'react-native';
-import { css } from 'styled-components';
-import styled from '../../styled.native';
-import { LabelText } from '../LabelText';
-const StyledRadioInputWrapper = styled.View(({ theme }) => {
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_core_1 = require("@ovotech/element-core");
+const react_native_1 = require("react-native");
+const styled_components_1 = require("styled-components");
+const styled_native_1 = __importDefault(require("../../styled.native"));
+const LabelText_1 = require("../LabelText");
+const StyledRadioInputWrapper = styled_native_1.default.View(({ theme }) => {
     return `
-      width: ${numToPx(theme.space[600])};
-      height: ${numToPx(theme.space[600])};
-      margin-top: ${numToPx(theme.space[200])};
+      width: ${(0, element_core_1.numToPx)(theme.space[600])};
+      height: ${(0, element_core_1.numToPx)(theme.space[600])};
+      margin-top: ${(0, element_core_1.numToPx)(theme.space[200])};
     `;
 });
-const StyledRadioInput = styled.View(({ theme, invalid, checked }) => {
+const StyledRadioInput = styled_native_1.default.View(({ theme, invalid, checked }) => {
     return `
-      width: ${numToPx(theme.space[600])};
-      height: ${numToPx(theme.space[600])};
-      border: ${numToPx(theme.border.width.md)} solid;
+      width: ${(0, element_core_1.numToPx)(theme.space[600])};
+      height: ${(0, element_core_1.numToPx)(theme.space[600])};
+      border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid;
       align-items: center;
       justify-content: center;
-      border-radius: ${numToPx(theme.space[600])};
+      border-radius: ${(0, element_core_1.numToPx)(theme.space[600])};
       border-color: ${invalid
         ? theme.input.color.borderError
         : checked
@@ -27,31 +44,34 @@ const StyledRadioInput = styled.View(({ theme, invalid, checked }) => {
       background: ${checked ? theme.input.color.selectedTint : 'transparent'};
     `;
 });
-const StyledRadioInputDot = styled.View(({ theme, checked }) => {
+const StyledRadioInputDot = styled_native_1.default.View(({ theme, checked }) => {
     return `
-      width: ${numToPx(theme.space[300])};
-      height: ${numToPx(theme.space[300])};
-      border-radius: ${numToPx(theme.space[300])};
+      width: ${(0, element_core_1.numToPx)(theme.space[300])};
+      height: ${(0, element_core_1.numToPx)(theme.space[300])};
+      border-radius: ${(0, element_core_1.numToPx)(theme.space[300])};
       background: ${theme.input.color.selected};
       opacity: ${checked ? 1 : 0};
     `;
 });
-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 Input = (_a) => {
+    var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
+    return ((0, jsx_runtime_1.jsx)(StyledRadioInputWrapper, Object.assign({}, rest, { children: (0, jsx_runtime_1.jsx)(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(StyledRadioInputDot, { checked: checked }) }) })));
 };
-const StyledWrapper = styled.View(({ theme, checked, invalid }) => css `
+const StyledWrapper = styled_native_1.default.View(({ theme, checked, invalid }) => (0, styled_components_1.css) `
     align-items: center;
     background: ${theme.color.surface.bright};
-    padding: ${numToPx(theme.space[200])};
+    padding: ${(0, element_core_1.numToPx)(theme.space[200])};
     min-width: 82px;
-    border-radius: ${numToPx(theme.border.radius.lg)};
-    border: ${numToPx(theme.border.width.md)} solid;
+    border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.lg)};
+    border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid;
     border-color: ${invalid
     ? theme.input.color.borderError
     : checked
         ? theme.input.color.selected
         : 'transparent'};
   `);
-export const RadioCard = ({ label, checked, invalid, activeOpacity = 0.8, testID, 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, _jsx(Input, { checked: checked, invalid: invalid, testID: testID })] }) }));
+const RadioCard = (_a) => {
+    var { label, checked, invalid, activeOpacity = 0.8, testID, ref } = _a, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID", "ref"]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, { checked: checked, invalid: invalid, children: [typeof label === 'string' ? (0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }) : label, (0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID })] }) })));
 };
+exports.RadioCard = RadioCard;

package/dist/components/RadioCard/index.js

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