@ovotech/element-native 4.5.0 → 5.0.0-canary-bcb1788-338

package/dist/components/ProductCarousel/anchor-point.d.ts

@@ -7,201 +7,4 @@ export interface Size {
     width: number;
     height: number;
 }
-export declare const withAnchorPoint: (transform: TransformsStyle, anchorPoint: Point, size: Size) => TransformsStyle | {
-    transform: any[] | readonly (({
-        translateX: import("react-native").AnimatableNumericValue | `${number}%`;
-    } & {
-        translateY?: undefined;
-        scale?: undefined;
-        scaleX?: undefined;
-        scaleY?: undefined;
-        skewX?: undefined;
-        skewY?: undefined;
-        perspective?: undefined;
-        rotate?: undefined;
-        rotateX?: undefined;
-        rotateY?: undefined;
-        rotateZ?: undefined;
-        matrix?: undefined;
-    }) | ({
-        translateY: import("react-native").AnimatableNumericValue | `${number}%`;
-    } & {
-        translateX?: undefined;
-        scale?: undefined;
-        scaleX?: undefined;
-        scaleY?: undefined;
-        skewX?: undefined;
-        skewY?: undefined;
-        perspective?: undefined;
-        rotate?: undefined;
-        rotateX?: undefined;
-        rotateY?: undefined;
-        rotateZ?: undefined;
-        matrix?: undefined;
-    }) | ({
-        scale: import("react-native").AnimatableNumericValue;
-    } & {
-        translateX?: undefined;
-        translateY?: undefined;
-        scaleX?: undefined;
-        scaleY?: undefined;
-        skewX?: undefined;
-        skewY?: undefined;
-        perspective?: undefined;
-        rotate?: undefined;
-        rotateX?: undefined;
-        rotateY?: undefined;
-        rotateZ?: undefined;
-        matrix?: undefined;
-    }) | ({
-        scaleX: import("react-native").AnimatableNumericValue;
-    } & {
-        translateX?: undefined;
-        translateY?: undefined;
-        scale?: undefined;
-        scaleY?: undefined;
-        skewX?: undefined;
-        skewY?: undefined;
-        perspective?: undefined;
-        rotate?: undefined;
-        rotateX?: undefined;
-        rotateY?: undefined;
-        rotateZ?: undefined;
-        matrix?: undefined;
-    }) | ({
-        scaleY: import("react-native").AnimatableNumericValue;
-    } & {
-        translateX?: undefined;
-        translateY?: undefined;
-        scale?: undefined;
-        scaleX?: undefined;
-        skewX?: undefined;
-        skewY?: undefined;
-        perspective?: undefined;
-        rotate?: undefined;
-        rotateX?: undefined;
-        rotateY?: undefined;
-        rotateZ?: undefined;
-        matrix?: undefined;
-    }) | ({
-        skewX: import("react-native").AnimatableStringValue;
-    } & {
-        translateX?: undefined;
-        translateY?: undefined;
-        scale?: undefined;
-        scaleX?: undefined;
-        scaleY?: undefined;
-        skewY?: undefined;
-        perspective?: undefined;
-        rotate?: undefined;
-        rotateX?: undefined;
-        rotateY?: undefined;
-        rotateZ?: undefined;
-        matrix?: undefined;
-    }) | ({
-        skewY: import("react-native").AnimatableStringValue;
-    } & {
-        translateX?: undefined;
-        translateY?: undefined;
-        scale?: undefined;
-        scaleX?: undefined;
-        scaleY?: undefined;
-        skewX?: undefined;
-        perspective?: undefined;
-        rotate?: undefined;
-        rotateX?: undefined;
-        rotateY?: undefined;
-        rotateZ?: undefined;
-        matrix?: undefined;
-    }) | ({
-        perspective: import("react-native").AnimatableNumericValue;
-    } & {
-        translateX?: undefined;
-        translateY?: undefined;
-        scale?: undefined;
-        scaleX?: undefined;
-        scaleY?: undefined;
-        skewX?: undefined;
-        skewY?: undefined;
-        rotate?: undefined;
-        rotateX?: undefined;
-        rotateY?: undefined;
-        rotateZ?: undefined;
-        matrix?: undefined;
-    }) | ({
-        rotate: import("react-native").AnimatableStringValue;
-    } & {
-        translateX?: undefined;
-        translateY?: undefined;
-        scale?: undefined;
-        scaleX?: undefined;
-        scaleY?: undefined;
-        skewX?: undefined;
-        skewY?: undefined;
-        perspective?: undefined;
-        rotateX?: undefined;
-        rotateY?: undefined;
-        rotateZ?: undefined;
-        matrix?: undefined;
-    }) | ({
-        rotateX: import("react-native").AnimatableStringValue;
-    } & {
-        translateX?: undefined;
-        translateY?: undefined;
-        scale?: undefined;
-        scaleX?: undefined;
-        scaleY?: undefined;
-        skewX?: undefined;
-        skewY?: undefined;
-        perspective?: undefined;
-        rotate?: undefined;
-        rotateY?: undefined;
-        rotateZ?: undefined;
-        matrix?: undefined;
-    }) | ({
-        rotateY: import("react-native").AnimatableStringValue;
-    } & {
-        translateX?: undefined;
-        translateY?: undefined;
-        scale?: undefined;
-        scaleX?: undefined;
-        scaleY?: undefined;
-        skewX?: undefined;
-        skewY?: undefined;
-        perspective?: undefined;
-        rotate?: undefined;
-        rotateX?: undefined;
-        rotateZ?: undefined;
-        matrix?: undefined;
-    }) | ({
-        rotateZ: import("react-native").AnimatableStringValue;
-    } & {
-        translateX?: undefined;
-        translateY?: undefined;
-        scale?: undefined;
-        scaleX?: undefined;
-        scaleY?: undefined;
-        skewX?: undefined;
-        skewY?: undefined;
-        perspective?: undefined;
-        rotate?: undefined;
-        rotateX?: undefined;
-        rotateY?: undefined;
-        matrix?: undefined;
-    }) | ({
-        matrix: import("react-native").AnimatableNumericValue[];
-    } & {
-        translateX?: undefined;
-        translateY?: undefined;
-        scale?: undefined;
-        scaleX?: undefined;
-        scaleY?: undefined;
-        skewX?: undefined;
-        skewY?: undefined;
-        perspective?: undefined;
-        rotate?: undefined;
-        rotateX?: undefined;
-        rotateY?: undefined;
-        rotateZ?: undefined;
-    }))[];
-};
+export declare const withAnchorPoint: (transform: TransformsStyle, anchorPoint: Point, size: Size) => TransformsStyle;

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

@@ -1,25 +1,34 @@
-const isValidSize = (size) => {
+"use strict";
+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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withAnchorPoint = void 0;
+var isValidSize = function (size) {
     'worklet';
     return size && size.width > 0 && size.height > 0;
 };
-const defaultAnchorPoint = { x: 0.5, y: 0.5 };
-export const withAnchorPoint = (transform, anchorPoint, size) => {
+var defaultAnchorPoint = { x: 0.5, y: 0.5 };
+var withAnchorPoint = function (transform, anchorPoint, size) {
     'worklet';
     if (!isValidSize(size))
         return transform;
-    let injectedTransform = transform.transform;
+    var injectedTransform = transform.transform;
     if (!injectedTransform)
         return transform;
     if (anchorPoint.x !== defaultAnchorPoint.x && size.width) {
-        const shiftTranslateX = [];
+        var shiftTranslateX = [];
         // shift before rotation
         shiftTranslateX.push({
             translateX: size.width * (anchorPoint.x - defaultAnchorPoint.x),
         });
-        injectedTransform = [
-            ...shiftTranslateX,
-            ...injectedTransform,
-        ];
+        injectedTransform = __spreadArray(__spreadArray([], shiftTranslateX, true), injectedTransform, true);
         // shift after rotation
         injectedTransform.push({
             translateX: size.width * (defaultAnchorPoint.x - anchorPoint.x),
@@ -28,12 +37,12 @@ export const withAnchorPoint = (transform, anchorPoint, size) => {
     if (!Array.isArray(injectedTransform))
         return { transform: injectedTransform };
     if (anchorPoint.y !== defaultAnchorPoint.y && size.height) {
-        const shiftTranslateY = [];
+        var shiftTranslateY = [];
         // shift before rotation
         shiftTranslateY.push({
             translateY: size.height * (anchorPoint.y - defaultAnchorPoint.y),
         });
-        injectedTransform = [...shiftTranslateY, ...injectedTransform];
+        injectedTransform = __spreadArray(__spreadArray([], shiftTranslateY, true), injectedTransform, true);
         // shift after rotation
         injectedTransform.push({
             translateY: size.height * (defaultAnchorPoint.y - anchorPoint.y),
@@ -41,3 +50,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.d.ts

@@ -1,14 +1,12 @@
-import { ReactNode, Ref } from 'react';
-import { TouchableOpacityProps, View } from 'react-native';
-type Props = Omit<TouchableOpacityProps, 'children'> & {
+import { ReactNode } from 'react';
+import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+declare const Radio: import("react").ForwardRefExoticComponent<Omit<TouchableOpacityProps, "children"> & {
     label: ReactNode;
     value: string;
     hint?: ReactNode;
-    checked?: boolean;
-    invalid?: boolean;
-    onValueChange?: (value?: string) => void;
-    activeOpacity?: number;
-    ref?: Ref<View>;
-};
-declare const Radio: ({ label, hint, checked, invalid, value, activeOpacity, testID, ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+    checked?: boolean | undefined;
+    invalid?: boolean | undefined;
+    onValueChange?: ((value?: string) => void) | undefined;
+    activeOpacity?: number | undefined;
+} & import("react").RefAttributes<TouchableOpacity>>;
 export { Radio };

package/dist/components/Radio/Radio.js

@@ -1,52 +1,68 @@
-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: { core } }) => {
-    return `
-      width: ${numToPx(core.space[6])};
-      height: ${numToPx(core.space[6])};
-      margin-right: 10px;
-    `;
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var HintText_1 = require("../HintText");
+var LabelText_1 = require("../LabelText");
+var StyledRadioInputWrapper = styled_native_1.default.View(function (_a) {
+    var theme = _a.theme;
+    return "\n      width: ".concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      height: ").concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      margin-right: 10px;\n    ");
 });
-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
+var StyledRadioInput = styled_native_1.default.View(function (_a) {
+    var theme = _a.theme, invalid = _a.invalid, checked = _a.checked;
+    return "\n      width: ".concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      height: ").concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      border: ").concat((0, element_core_1.numToPx)(theme.border.width.md), " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      border-color: ").concat(invalid
+        ? theme.input.color.borderError
         : checked
-            ? core.color.blue.dark
-            : semantic.border.functional};
-      background: ${checked ? core.color.blue.lightest : 'transparent'};
-    `;
+            ? theme.input.color.selected
+            : theme.input.color.border, ";\n      background: ").concat(checked ? theme.input.color.selectedTint : 'transparent', ";\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 StyledRadioInputDot = styled_native_1.default.View(function (_a) {
+    var theme = _a.theme, checked = _a.checked;
+    return "\n      width: ".concat((0, element_core_1.numToPx)(theme.space[300]), ";\n      height: ").concat((0, element_core_1.numToPx)(theme.space[300]), ";\n      border-radius: ").concat((0, element_core_1.numToPx)(theme.space[300]), ";\n      background: ").concat(theme.input.color.selected, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
 });
-const Input = ({ checked, invalid, testID, ...rest }) => {
-    return (_jsx(StyledRadioInputWrapper, { ...rest, children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) }));
+var Input = function (_a) {
+    var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
+    return ((0, jsx_runtime_1.jsx)(StyledRadioInputWrapper, __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: { 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] })] }) }));
-};
-export { Radio };
+var StyledWrapper = styled_native_1.default.View(function (_a) {
+    var theme = _a.theme;
+    return "\n    padding-top: ".concat((0, element_core_1.numToPx)(theme.space[300]), ";\n    flex-direction: row;\n  ");
+});
+var Radio = (0, react_1.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 ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: 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] })] }) })));
+});
+exports.Radio = Radio;

package/dist/components/Radio/RadioField.js

@@ -1,21 +1,49 @@
-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 }) => {
-    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),
-                    })) })] }) }));
+"use strict";
+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);
 };
-export { RadioField };
+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;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var utils_1 = require("../../utils");
+var ErrorText_1 = require("../ErrorText");
+var FormGroup_1 = require("../FormGroup");
+var HintText_1 = require("../HintText");
+var LabelText_1 = require("../LabelText");
+var Stack_1 = require("../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 = (0, utils_1.getValidChildren)(children);
+    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, __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, function (child) {
+                        return (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: (0, utils_1.callAll)(onValueChange && (function () { return onValueChange(child.props.value); }), child.props.onPress),
+                        });
+                    }) })] }) })));
+};
+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.d.ts

@@ -1,12 +1,8 @@
-import { ReactNode, Ref } from 'react';
-import { TouchableOpacityProps, View } from 'react-native';
-type Props = Omit<TouchableOpacityProps, 'children'> & {
+import { ReactNode } from 'react';
+import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+export declare const RadioCard: import("react").ForwardRefExoticComponent<Omit<TouchableOpacityProps, "children"> & {
     label: ReactNode;
-    checked?: boolean;
-    invalid?: boolean;
-    activeOpacity?: number;
-    hasInput?: boolean;
-    ref?: Ref<View>;
-};
-export declare const RadioCard: ({ label, checked, invalid, activeOpacity, testID, hasInput, ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};
+    checked?: boolean | undefined;
+    invalid?: boolean | undefined;
+    activeOpacity?: number | undefined;
+} & import("react").RefAttributes<TouchableOpacity>>;

package/dist/components/RadioCard/RadioCard.js

@@ -1,57 +1,72 @@
-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: { core } }) => {
-    return `
-      width: ${numToPx(core.space[6])};
-      height: ${numToPx(core.space[6])};
-      margin-top: ${numToPx(core.space[2])};
-    `;
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var styled_components_1 = require("styled-components");
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var LabelText_1 = require("../LabelText");
+var StyledRadioInputWrapper = styled_native_1.default.View(function (_a) {
+    var theme = _a.theme;
+    return "\n      width: ".concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      height: ").concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      margin-top: ").concat((0, element_core_1.numToPx)(theme.space[200]), ";\n    ");
 });
-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
+var StyledRadioInput = styled_native_1.default.View(function (_a) {
+    var theme = _a.theme, invalid = _a.invalid, checked = _a.checked;
+    return "\n      width: ".concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      height: ").concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      border: ").concat((0, element_core_1.numToPx)(theme.border.width.md), " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      border-color: ").concat(invalid
+        ? theme.input.color.borderError
         : checked
-            ? core.color.blue.dark
-            : semantic.border.functional};
-      background: ${checked ? core.color.blue.lightest : 'transparent'};
-    `;
+            ? theme.input.color.selected
+            : theme.input.color.border, ";\n      background: ").concat(checked ? theme.input.color.selectedTint : 'transparent', ";\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 StyledRadioInputDot = styled_native_1.default.View(function (_a) {
+    var theme = _a.theme, checked = _a.checked;
+    return "\n      width: ".concat((0, element_core_1.numToPx)(theme.space[300]), ";\n      height: ").concat((0, element_core_1.numToPx)(theme.space[300]), ";\n      border-radius: ").concat((0, element_core_1.numToPx)(theme.space[300]), ";\n      background: ").concat(theme.input.color.selected, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
 });
-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 Input = function (_a) {
+    var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
+    return ((0, jsx_runtime_1.jsx)(StyledRadioInputWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(StyledRadioInputDot, { checked: checked }) }) })));
 };
+var StyledWrapper = styled_native_1.default.View(function (_a) {
+    var theme = _a.theme, checked = _a.checked, invalid = _a.invalid;
+    return (0, styled_components_1.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, (0, element_core_1.numToPx)(theme.space[200]), (0, element_core_1.numToPx)(theme.border.radius.lg), (0, element_core_1.numToPx)(theme.border.width.md), invalid
+        ? theme.input.color.borderError
+        : checked
+            ? theme.input.color.selected
+            : 'transparent');
+});
+exports.RadioCard = (0, react_1.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 ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: 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 })] }) })));
+});
+var templateObject_1;