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

package/dist/components/PasswordInput/PasswordInput.styled.js

@@ -1,14 +1,38 @@
-import { numToPx } from '@ovotech/element-core';
-import { Pressable } from 'react-native';
-import styled, { css } from '../../styled.native';
-export const StyledPressable = styled(Pressable)(({ theme: { core }, focused, }) => {
-    return css `
-    display: flex;
-    align-items: center;
-    position: absolute;
-    width: ${numToPx(core.space[4])};
-    z-index: 1;
-    top: ${focused ? '16px' : '14px'};
-    right: ${numToPx(core.space[3])};
-  `;
+"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.StyledPressable = void 0;
+var element_core_1 = require("@ovotech/element-core");
+var react_native_1 = require("react-native");
+var styled_native_1 = __importStar(require("../../styled.native"));
+exports.StyledPressable = (0, styled_native_1.default)(react_native_1.Pressable)(function (_a) {
+    var theme = _a.theme, focused = _a.focused;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    position: absolute;\n    width: ", ";\n    z-index: 1;\n    top: ", ";\n    right: ", ";\n  "], ["\n    display: flex;\n    align-items: center;\n    position: absolute;\n    width: ", ";\n    z-index: 1;\n    top: ", ";\n    right: ", ";\n  "])), (0, element_core_1.numToPx)(theme.space[400]), focused ? '16px' : '14px', (0, element_core_1.numToPx)(theme.space[300]));
+});
+var templateObject_1;

package/dist/components/PasswordInput/PasswordVisibilityToggle.js

@@ -1,22 +1,28 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Icon } from '../Icon';
-import { StyledPressable } from './PasswordInput.styled';
-export const useTogglePasswordVisibility = () => {
-    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-    const handlePasswordVisibility = () => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PasswordVisibilityToggle = exports.useTogglePasswordVisibility = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Icon_1 = require("../Icon");
+var PasswordInput_styled_1 = require("./PasswordInput.styled");
+var useTogglePasswordVisibility = function () {
+    var _a = (0, react_1.useState)(false), isPasswordVisible = _a[0], setIsPasswordVisible = _a[1];
+    var handlePasswordVisibility = function () {
         setIsPasswordVisible(!isPasswordVisible);
     };
     return {
-        isPasswordVisible,
-        handlePasswordVisibility,
+        isPasswordVisible: isPasswordVisible,
+        handlePasswordVisibility: handlePasswordVisibility,
     };
 };
-export const PasswordVisibilityToggle = ({ iconName, visibilityToggleLabel, handlePasswordVisibility, }) => {
-    const [focused, setFocused] = useState(false);
-    return (_jsx(StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessible: true, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: () => {
+exports.useTogglePasswordVisibility = useTogglePasswordVisibility;
+var PasswordVisibilityToggle = function (_a) {
+    var iconName = _a.iconName, visibilityToggleLabel = _a.visibilityToggleLabel, handlePasswordVisibility = _a.handlePasswordVisibility;
+    var _b = (0, react_1.useState)(false), focused = _b[0], setFocused = _b[1];
+    return ((0, jsx_runtime_1.jsx)(PasswordInput_styled_1.StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessible: true, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: function () {
             setFocused(true);
-        }, onBlur: () => {
+        }, onBlur: function () {
             setFocused(false);
-        }, children: _jsx(Icon, { name: iconName, size: 16, pointerEvents: "none" }) }));
+        }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: iconName, size: 16, pointerEvents: "none" }) }));
 };
+exports.PasswordVisibilityToggle = PasswordVisibilityToggle;

package/dist/components/PasswordInput/index.js

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

package/dist/components/PhoneField/PhoneField.d.ts

@@ -1,5 +1,10 @@
+/// <reference types="react" />
+import { TextInput as NativeTextInput } from 'react-native';
 import { FieldProps } from '../Field';
-import { InputProps } from '../Input/Input';
-type Props = Omit<FieldProps, 'children'> & InputProps;
-export declare const PhoneField: ({ ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const PhoneField: import("react").ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
+    invalid?: boolean | undefined;
+    stretch?: boolean | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
+    rightSlot?: import("react").ReactNode;
+} & import("react").RefAttributes<NativeTextInput>>;

package/dist/components/PhoneField/PhoneField.js

@@ -1,6 +1,33 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Field } from '../Field';
-import { PhoneInput } from '../PhoneInput';
-export const PhoneField = ({ ref, ...rest }) => {
-    return (_jsx(Field, { ...rest, children: _jsx(PhoneInput, { ref: ref }) }));
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PhoneField = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Field_1 = require("../Field");
+var PhoneInput_1 = require("../PhoneInput");
+exports.PhoneField = (0, react_1.forwardRef)(function (_a, ref) {
+    var rest = __rest(_a, []);
+    return ((0, jsx_runtime_1.jsx)(Field_1.Field, __assign({}, rest, { ref: ref, children: (0, jsx_runtime_1.jsx)(PhoneInput_1.PhoneInput, {}) })));
+});

package/dist/components/PhoneField/index.js

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

package/dist/components/PhoneInput/PhoneInput.d.ts

@@ -1,2 +1,9 @@
-import { InputProps } from '../Input/Input';
-export declare const PhoneInput: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+import { TextInput } from 'react-native';
+export declare const PhoneInput: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
+    invalid?: boolean | undefined;
+    stretch?: boolean | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
+    rightSlot?: import("react").ReactNode;
+} & import("react").RefAttributes<TextInput>>;

package/dist/components/PhoneInput/PhoneInput.js

@@ -1,3 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Input } from '../Input/Input';
-export const PhoneInput = (props) => (_jsx(Input, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ...props }));
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PhoneInput = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Input_1 = require("../Input/Input");
+exports.PhoneInput = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(Input_1.Input, __assign({}, props, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });

package/dist/components/PhoneInput/index.js

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

package/dist/components/Pictogram/Pictogram.d.ts

@@ -0,0 +1,8 @@
+import { SvgProps } from 'react-native-svg';
+import { PictogramNameExtended } from '../../providers';
+export type IconProps = SvgProps & {
+    name: PictogramNameExtended;
+    color?: string;
+    size?: string | number;
+};
+export declare const Pictogram: ({ name, size, color, testID, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Pictogram/Pictogram.js

@@ -0,0 +1,38 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pictogram = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var providers_1 = require("../../providers");
+var styled_native_1 = require("../../styled.native");
+var Pictogram = function (_a) {
+    var name = _a.name, _b = _a.size, size = _b === void 0 ? '64' : _b, color = _a.color, testID = _a.testID, rest = __rest(_a, ["name", "size", "color", "testID"]);
+    var pictograms = (0, providers_1.usePictograms)();
+    var theme = (0, react_1.useContext)(styled_native_1.ThemeContext);
+    // @ts-ignore to support additional pictograms.
+    var Svg = name && pictograms[name];
+    return Svg ? ((0, jsx_runtime_1.jsx)(Svg, __assign({ testID: testID ? testID : "element-icon".concat(name ? "-".concat(name) : ''), color: color !== null && color !== void 0 ? color : theme.color.brand.brand, width: size, height: size }, rest))) : null;
+};
+exports.Pictogram = Pictogram;

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

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

package/dist/components/Pictogram/index.js

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

package/dist/components/ProductCarousel/NavigationDots.js

@@ -1,48 +1,77 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Animated, { Extrapolate, interpolate, interpolateColor, useAnimatedStyle, } from 'react-native-reanimated';
-import styled, { useTheme } from '../../styled.native';
-export function NavigationDots({ data, animatedValue, }) {
-    return (_jsx(SDotsContainer, { children: data.map((_, index) => (_jsx(Dot, { index: index, length: data.length, animatedValue: animatedValue }, index))) }));
+"use strict";
+var __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)); }) }));
 }
-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) {
+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) {
             inputRange = [length - 1, length, length + 1];
             outputRange = [-width, 0, width];
         }
-        const backgroundColor = interpolateColor(animatedValue?.value, inputRange, [
-            theme.core.color.brand.forest,
-            theme.core.color.brand.energised,
-            theme.core.color.brand.forest,
+        var backgroundColor = (0, react_native_reanimated_1.interpolateColor)(animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value, inputRange, [
+            theme.color.brand.dim,
+            theme.color.brand.bold,
+            theme.color.brand.dim,
         ]);
         return {
             transform: [
                 {
-                    translateX: interpolate(animatedValue?.value, inputRange, outputRange, Extrapolate.CLAMP),
+                    translateX: (0, react_native_reanimated_1.interpolate)(animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value, inputRange, outputRange, react_native_reanimated_1.Extrapolate.CLAMP),
                 },
             ],
-            backgroundColor,
+            backgroundColor: backgroundColor,
         };
     }, [animatedValue, index, length]);
-    return (_jsx(SDot, { "$width": width, children: _jsx(SAnimatedDot, { style: animatedStyle }) }));
+    return ((0, jsx_runtime_1.jsx)(SDot, { "$width": width, children: (0, jsx_runtime_1.jsx)(SAnimatedDot, { style: animatedStyle }) }));
 };
-const SDotsContainer = styled.View `
-  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;
-`;
+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.color.brand.dim;
+}, 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;

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

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

package/dist/components/ProductCarousel/ProductCarousel.js

@@ -1,63 +1,112 @@
-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: {
+"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: {
                             activeOffsetX: [-20, 20],
-                        }, loop: loop, testID: "carousel", scrollAnimationDuration: 700 }), showArrows && data.length > 1 && (_jsxs(_Fragment, { children: [_jsx(SActionPressable, { onPress: () => carouselRef.current?.prev(), "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                        }, loop: loop, testID: "carousel", scrollAnimationDuration: 700 }), showArrows && data.length > 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SActionPressable, { onPress: 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, { "$next": true, onPress: () => carouselRef.current?.next(), "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                                }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-left", size: 32, color: theme.color.brand.onBrand }) }), (0, jsx_runtime_1.jsx)(SActionPressable, { "$next": true, onPress: 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 }))] })] }));
+                                }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-right", size: 32, color: theme.color.brand.onBrand }) })] })), showDots && data.length > 1 && ((0, jsx_runtime_1.jsx)(NavigationDots_1.NavigationDots, { data: data, animatedValue: progressValue }))] })] }));
 }
-const Card = ({ children, animationValue, height, width, }) => {
-    const WIDTH = width / 1.3;
-    const HEIGHT = height / 1.3;
-    const cardStyle = useAnimatedStyle(() => {
-        const scale = interpolate(animationValue.value, [-0.1, 0, 1], [0.95, 1, 1], Extrapolation.CLAMP);
-        const opacity = interpolate(animationValue.value, [-0.75, 0, 1], [0, 1, 0]);
-        const translateX = interpolate(animationValue.value, [-1, -0.2, 0, 1], [0, WIDTH * 0.3, 0, 0]);
-        const transform = {
+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 },
-                { translateX },
+                { scale: scale },
+                { translateX: translateX },
                 { perspective: 200 },
                 {
-                    rotateY: `${interpolate(animationValue.value, [-1, 0, 0.4, 1], [30, 0, -25, -25], Extrapolation.CLAMP)}deg`,
+                    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 {
-            ...withAnchorPoint(transform, { x: 0.5, y: 0.5 }, { width: WIDTH, height: HEIGHT }),
-            opacity,
-        };
+        return __assign(__assign({}, (0, anchor_point_1.withAnchorPoint)(transform, { x: 0.5, y: 0.5 }, { width: WIDTH, height: HEIGHT })), { opacity: opacity });
     }, []);
-    return (_jsx(Animated.View, { style: {
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: {
             flex: 1,
             justifyContent: 'center',
             alignItems: 'center',
-        }, children: _jsx(Animated.View, { style: [
+        }, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
                 {
                     width: WIDTH,
                     height: HEIGHT,
@@ -65,17 +114,15 @@ const Card = ({ children, animationValue, height, width, }) => {
                 cardStyle,
             ], children: children }) }));
 };
-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" }) }));
+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.space[1400]))
+        : "left: ".concat(mediumAndUp ? '25%' : (0, element_core_1.numToPx)(theme.space[1400]));
+});
+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;