@ovotech/element-native 4.4.9 → 4.5.0

package/dist/components/PhoneInput/index.js

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

package/dist/components/ProductCarousel/NavigationDots.js

@@ -1,52 +1,19 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationDots = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-var styled_native_1 = __importStar(require("../../styled.native"));
-function NavigationDots(_a) {
-    var data = _a.data, animatedValue = _a.animatedValue;
-    return ((0, jsx_runtime_1.jsx)(SDotsContainer, { children: data.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(Dot, { index: index, length: data.length, animatedValue: animatedValue }, index)); }) }));
+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))) }));
 }
-exports.NavigationDots = NavigationDots;
-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 = (0, styled_native_1.useTheme)();
-    var animatedStyle = (0, react_native_reanimated_1.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 = (0, react_native_reanimated_1.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,
@@ -54,24 +21,28 @@ var Dot = function (_a) {
         return {
             transform: [
                 {
-                    translateX: (0, react_native_reanimated_1.interpolate)(animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value, inputRange, outputRange, react_native_reanimated_1.Extrapolate.CLAMP),
+                    translateX: interpolate(animatedValue?.value, inputRange, outputRange, Extrapolate.CLAMP),
                 },
             ],
-            backgroundColor: backgroundColor,
+            backgroundColor,
         };
     }, [animatedValue, index, length]);
-    return ((0, jsx_runtime_1.jsx)(SDot, { "$width": width, children: (0, jsx_runtime_1.jsx)(SAnimatedDot, { style: animatedStyle }) }));
+    return (_jsx(SDot, { "$width": width, children: _jsx(SAnimatedDot, { style: animatedStyle }) }));
 };
-var SDotsContainer = styled_native_1.default.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_native_1.default.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 = (0, styled_native_1.default)(react_native_reanimated_1.default.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/components/ProductCarousel/ProductCarousel.d.ts

@@ -1,3 +1,4 @@
+import { type JSX } from 'react';
 interface ProductCarouselProps<T> {
     data: T[];
     children: (item: T) => JSX.Element;

package/dist/components/ProductCarousel/ProductCarousel.js

@@ -1,112 +1,63 @@
-"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProductCarousel = 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 react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-var react_native_reanimated_carousel_1 = __importDefault(require("react-native-reanimated-carousel"));
-var react_native_svg_1 = __importStar(require("react-native-svg"));
-var hooks_1 = require("../../hooks");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var Icon_1 = require("../Icon");
-var NavigationDots_1 = require("./NavigationDots");
-var anchor_point_1 = require("./anchor-point");
-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 = (0, styled_native_1.useTheme)();
-    var mediumAndUp = (0, hooks_1.useBreakpoint)().mediumAndUp;
-    var carouselRef = (0, react_1.useRef)(null);
-    var progressValue = (0, react_native_reanimated_1.useSharedValue)(0);
-    var windowWidth = (0, react_native_1.useWindowDimensions)().width;
-    var carouselWidth = fullWidth ? windowWidth : width || windowWidth;
-    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: function (_a) {
-                            var item = _a.item, animationValue = _a.animationValue;
-                            return ((0, jsx_runtime_1.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: {
+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, { 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;
+    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 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-left", size: 32, color: theme.core.color.brand.white }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-right", size: 32, color: theme.core.color.brand.white }) })] })), showDots && data.length > 1 && ((0, jsx_runtime_1.jsx)(NavigationDots_1.NavigationDots, { data: data, animatedValue: progressValue }))] })] }));
+                                }, children: _jsx(Icon, { name: "arrow-right", size: 32, color: theme.core.color.brand.white }) })] })), showDots && data.length > 1 && (_jsx(NavigationDots, { data: data, animatedValue: progressValue }))] })] }));
 }
-exports.ProductCarousel = ProductCarousel;
-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 = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
-        var scale = (0, react_native_reanimated_1.interpolate)(animationValue.value, [-0.1, 0, 1], [0.95, 1, 1], react_native_reanimated_1.Extrapolate.CLAMP);
-        var opacity = (0, react_native_reanimated_1.interpolate)(animationValue.value, [-0.75, 0, 1], [0, 1, 0]);
-        var translateX = (0, react_native_reanimated_1.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((0, react_native_reanimated_1.interpolate)(animationValue.value, [-1, 0, 0.4, 1], [30, 0, -25, -25], react_native_reanimated_1.Extrapolate.CLAMP), "deg"),
+                    rotateY: `${interpolate(animationValue.value, [-1, 0, 0.4, 1], [30, 0, -25, -25], Extrapolation.CLAMP)}deg`,
                 },
             ],
         };
-        return __assign(__assign({}, (0, anchor_point_1.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 ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: {
+    return (_jsx(Animated.View, { style: {
             flex: 1,
             justifyContent: 'center',
             alignItems: 'center',
-        }, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
+        }, children: _jsx(Animated.View, { style: [
                 {
                     width: WIDTH,
                     height: HEIGHT,
@@ -114,15 +65,17 @@ var Card = function (_a) {
                 cardStyle,
             ], children: children }) }));
 };
-var SCarouselContainer = styled_native_1.default.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_native_1.default.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%' : (0, element_core_1.numToPx)(theme.core.space[14]))
-        : "left: ".concat(mediumAndUp ? '25%' : (0, element_core_1.numToPx)(theme.core.space[14]));
-});
-var SkewLine = function (props) { return ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, __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" }) }))); };
-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/components/ProductCarousel/anchor-point.d.ts

@@ -7,4 +7,201 @@ export interface Size {
     width: number;
     height: number;
 }
-export declare const withAnchorPoint: (transform: TransformsStyle, anchorPoint: Point, size: Size) => TransformsStyle;
+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;
+    }))[];
+};

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

@@ -1,34 +1,25 @@
-"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) {
+const isValidSize = (size) => {
     'worklet';
     return size && size.width > 0 && size.height > 0;
 };
-var defaultAnchorPoint = { x: 0.5, y: 0.5 };
-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),
@@ -37,12 +28,12 @@ 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),
@@ -50,4 +41,3 @@ var withAnchorPoint = function (transform, anchorPoint, size) {
     }
     return { transform: injectedTransform };
 };
-exports.withAnchorPoint = withAnchorPoint;

package/dist/components/ProductCarousel/index.js

@@ -1,5 +1 @@
-"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; } });
+export { ProductCarousel } from './ProductCarousel';

package/dist/components/Radio/Radio.d.ts

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