@ovotech/element-native 3.8.0-canary-e69f528-225 → 3.8.0-canary-3cc1dc6-227

package/dist/components/{HorizontalCarousel/HorizontalCarousel.d.ts → ProductCarousel/ProductCarousel.d.ts}

@@ -1,4 +1,4 @@
-interface HorizontalCarouselProps<T> {
+interface ProductCarouselProps<T> {
     data: T[];
     children: (item: T) => JSX.Element;
     width?: number;
@@ -9,5 +9,5 @@ interface HorizontalCarouselProps<T> {
     loop?: boolean;
     arrowsDistanceFromTop?: number;
 }
-export declare function HorizontalCarousel<T>({ data, children, width, height, fullWidth, showArrows, showDots, loop, arrowsDistanceFromTop, }: HorizontalCarouselProps<T>): JSX.Element;
+export declare function ProductCarousel<T>({ data, children, width, height, fullWidth, showArrows, showDots, loop, arrowsDistanceFromTop, }: ProductCarouselProps<T>): JSX.Element;
 export {};

package/dist/components/ProductCarousel/ProductCarousel.js

@@ -0,0 +1,128 @@
+"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, __assign({ animationValue: animationValue, height: height, width: carouselWidth }, { children: children(item) })));
+                        }, vertical: false, width: carouselWidth, height: height, onProgressChange: function (_, absoluteProgress) {
+                            return (progressValue.value = absoluteProgress);
+                        }, panGestureHandlerProps: {
+                            activeOffsetX: [-20, 20],
+                        }, loop: loop, testID: "carousel", scrollAnimationDuration: 700 }), showArrows && data.length > 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SActionPressable, __assign({ onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.prev(); }, "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                                    top: 32,
+                                    bottom: 32,
+                                    left: 16,
+                                    right: 16,
+                                } }, { children: (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, __assign({ "$next": true, onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.next(); }, "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                                    top: 32,
+                                    bottom: 32,
+                                    left: 16,
+                                    right: 16,
+                                } }, { children: (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 }))] })] }));
+}
+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 = {
+            transform: [
+                { scale: scale },
+                { translateX: 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"),
+                },
+            ],
+        };
+        return __assign(__assign({}, (0, anchor_point_1.withAnchorPoint)(transform, { x: 0.5, y: 0.5 }, { width: WIDTH, height: HEIGHT })), { opacity: opacity });
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        } }, { children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: [
+                {
+                    width: WIDTH,
+                    height: HEIGHT,
+                },
+                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;

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

@@ -0,0 +1,10 @@
+import type { TransformsStyle } from 'react-native';
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+export declare const withAnchorPoint: (transform: TransformsStyle, anchorPoint: Point, size: Size) => TransformsStyle;

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

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

package/dist/components/ProductCarousel/index.d.ts

@@ -0,0 +1 @@
+export { ProductCarousel } from './ProductCarousel';

package/dist/components/ProductCarousel/index.js

@@ -0,0 +1,5 @@
+"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/index.d.ts

@@ -58,3 +58,4 @@ export * from './TextInput';
 export * from './TextLink';
 export * from './Toggle';
 export * from './Toast';
+export * from './ProductCarousel';

package/dist/components/index.js

@@ -74,3 +74,4 @@ __exportStar(require("./TextInput"), exports);
 __exportStar(require("./TextLink"), exports);
 __exportStar(require("./Toggle"), exports);
 __exportStar(require("./Toast"), exports);
+__exportStar(require("./ProductCarousel"), exports);

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

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

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

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

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

@@ -0,0 +1 @@
+export { ProductCarousel } from './ProductCarousel';

package/dist/esm/components/index.js

@@ -58,3 +58,4 @@ export * from './TextInput';
 export * from './TextLink';
 export * from './Toggle';
 export * from './Toast';
+export * from './ProductCarousel';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "3.8.0-canary-e69f528-225",
+  "version": "3.8.0-canary-3cc1dc6-227",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@backpackapp-io/react-native-toast": "^0.10.0",
-    "@ovotech/element-core": "^2.2.0-canary-e69f528-225",
+    "@ovotech/element-core": "^2.2.0-canary-3cc1dc6-227",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
     "react-native-reanimated-carousel": "^3.5.1"

package/dist/components/HorizontalCarousel/HorizontalCarousel.js

@@ -1,95 +0,0 @@
-"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.HorizontalCarousel = 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 = require("react-native-reanimated");
-var react_native_reanimated_carousel_1 = __importDefault(require("react-native-reanimated-carousel"));
-var styled_native_1 = __importStar(require("../../styled.native"));
-var Icon_1 = require("../Icon");
-var NavigationDots_1 = require("./NavigationDots");
-function HorizontalCarousel(_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 ? true : _c, _d = _a.loop, loop = _d === void 0 ? true : _d, arrowsDistanceFromTop = _a.arrowsDistanceFromTop;
-    var theme = (0, styled_native_1.useTheme)();
-    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)(SCarouselContainer, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_carousel_1.default, { ref: carouselRef, data: data, renderItem: function (_a) {
-                    var item = _a.item;
-                    return ((0, jsx_runtime_1.jsx)(SItemContainer, __assign({ "$itemWidth": carouselWidth }, { children: children(item) })));
-                }, vertical: false, width: carouselWidth, height: height, onProgressChange: function (_, absoluteProgress) {
-                    return (progressValue.value = absoluteProgress);
-                }, panGestureHandlerProps: {
-                    activeOffsetX: [-20, 20],
-                }, loop: loop, testID: "carousel" }), showArrows && data.length > 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SActionPressable, __assign({ onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.prev(); }, "$top": arrowsDistanceFromTop, hitSlop: {
-                            top: 32,
-                            bottom: 32,
-                            left: 16,
-                            right: 16,
-                        } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-left", size: 16, color: theme.core.color.brand.white }) })), (0, jsx_runtime_1.jsx)(SActionPressable, __assign({ "$next": true, onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.next(); }, "$top": arrowsDistanceFromTop, hitSlop: {
-                            top: 32,
-                            bottom: 32,
-                            left: 16,
-                            right: 16,
-                        } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-right", size: 16, color: theme.core.color.brand.white }) }))] })), showDots && data.length > 1 && ((0, jsx_runtime_1.jsx)(NavigationDots_1.NavigationDots, { data: data, animatedValue: progressValue }))] }));
-}
-exports.HorizontalCarousel = HorizontalCarousel;
-var SCarouselContainer = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n"], ["\n  align-items: center;\n"])));
-var SItemContainer = styled_native_1.default.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: ", "px;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: relative;\n  width: ", "px;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n"])), function (_a) {
-    var $itemWidth = _a.$itemWidth;
-    return $itemWidth;
-});
-var SActionPressable = styled_native_1.default.Pressable(templateObject_3 || (templateObject_3 = __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") : '50%');
-}, function (_a) {
-    var theme = _a.theme, $next = _a.$next;
-    return $next
-        ? "right: ".concat((0, element_core_1.numToPx)(theme.core.space[6]))
-        : "left: ".concat((0, element_core_1.numToPx)(theme.core.space[6]));
-});
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/HorizontalCarousel/index.d.ts

@@ -1 +0,0 @@
-export * from './HorizontalCarousel';

package/dist/components/HorizontalCarousel/index.js

@@ -1,17 +0,0 @@
-"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./HorizontalCarousel"), exports);

package/dist/esm/components/HorizontalCarousel/HorizontalCarousel.js

@@ -1,65 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { useRef } from 'react';
-import { useWindowDimensions } from 'react-native';
-import { useSharedValue } from 'react-native-reanimated';
-import Carousel from 'react-native-reanimated-carousel';
-import styled, { useTheme } from '../../styled.native';
-import { Icon } from '../Icon';
-import { NavigationDots } from './NavigationDots';
-export function HorizontalCarousel(_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 ? true : _c, _d = _a.loop, loop = _d === void 0 ? true : _d, arrowsDistanceFromTop = _a.arrowsDistanceFromTop;
-    var theme = useTheme();
-    var carouselRef = useRef(null);
-    var progressValue = useSharedValue(0);
-    var windowWidth = useWindowDimensions().width;
-    var carouselWidth = fullWidth ? windowWidth : width || windowWidth;
-    return (_jsxs(SCarouselContainer, { children: [_jsx(Carousel, { ref: carouselRef, data: data, renderItem: function (_a) {
-                    var item = _a.item;
-                    return (_jsx(SItemContainer, __assign({ "$itemWidth": carouselWidth }, { children: children(item) })));
-                }, vertical: false, width: carouselWidth, height: height, onProgressChange: function (_, absoluteProgress) {
-                    return (progressValue.value = absoluteProgress);
-                }, panGestureHandlerProps: {
-                    activeOffsetX: [-20, 20],
-                }, loop: loop, testID: "carousel" }), showArrows && data.length > 1 && (_jsxs(_Fragment, { children: [_jsx(SActionPressable, __assign({ onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.prev(); }, "$top": arrowsDistanceFromTop, hitSlop: {
-                            top: 32,
-                            bottom: 32,
-                            left: 16,
-                            right: 16,
-                        } }, { children: _jsx(Icon, { name: "arrow-left", size: 16, color: theme.core.color.brand.white }) })), _jsx(SActionPressable, __assign({ "$next": true, onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.next(); }, "$top": arrowsDistanceFromTop, hitSlop: {
-                            top: 32,
-                            bottom: 32,
-                            left: 16,
-                            right: 16,
-                        } }, { children: _jsx(Icon, { name: "arrow-right", size: 16, color: theme.core.color.brand.white }) }))] })), showDots && data.length > 1 && (_jsx(NavigationDots, { data: data, animatedValue: progressValue }))] }));
-}
-var SCarouselContainer = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n"], ["\n  align-items: center;\n"])));
-var SItemContainer = styled.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: ", "px;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: relative;\n  width: ", "px;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n"])), function (_a) {
-    var $itemWidth = _a.$itemWidth;
-    return $itemWidth;
-});
-var SActionPressable = styled.Pressable(templateObject_3 || (templateObject_3 = __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") : '50%');
-}, function (_a) {
-    var theme = _a.theme, $next = _a.$next;
-    return $next
-        ? "right: ".concat(numToPx(theme.core.space[6]))
-        : "left: ".concat(numToPx(theme.core.space[6]));
-});
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/esm/components/HorizontalCarousel/index.js

@@ -1 +0,0 @@
-export * from './HorizontalCarousel';