@ovotech/element-native 3.8.1 → 4.0.0-canary-a872093-246

package/dist/esm/components/List/List.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children } from 'react';
+import { View } from 'react-native';
+import { getValidChildren } from '../../utils';
+import { Margin } from '../Margin';
+import { Stack } from '../Stack';
+import { FlexRow, LiContent, SquareBullet, TextBullet } from './styled';
+var ListItem = function (_a) {
+    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, prefix = _a.prefix;
+    return (_jsxs(FlexRow, { children: [prefix ? (_jsx(TextBullet, { children: prefix })) : (_jsx(SquareBullet, { visible: showBullets })), _jsx(LiContent, { children: children })] }));
+};
+var renderList = function (_a) {
+    var children = _a.children, listType = _a.listType, showBullets = _a.showBullets;
+    var validChildren = getValidChildren(children);
+    return Children.map(validChildren, function (child, index) { return (_jsx(ListItem, { prefix: listType === 'ol' ? "".concat(index + 1, ".") : undefined, showBullets: showBullets, children: child })); });
+};
+var Li = function (_a) {
+    var children = _a.children;
+    return _jsx(View, { style: { flexDirection: 'column' }, children: children });
+};
+var Ul = function (props) {
+    var children = props.children, showBullets = props.showBullets;
+    return (_jsx(Margin, { top: 2, children: _jsx(Stack, { spaceBetween: 2, children: renderList({ children: children, listType: 'ul', showBullets: showBullets }) }) }));
+};
+var Ol = function (props) {
+    var children = props.children;
+    return (_jsx(Margin, { top: 2, children: _jsx(Stack, { spaceBetween: 2, children: renderList({ children: children, listType: 'ol' }) }) }));
+};
+export { Li, Ol, Ul };

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

@@ -0,0 +1 @@
+export { Ol, Ul, Li } from './List';

package/dist/esm/components/List/styled.js

@@ -0,0 +1,27 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+export var SquareBullet = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, visible = _a.visible, smallAndUp = _a.smallAndUp;
+    var lineHeight = smallAndUp
+        ? core.lineHeight.body.large
+        : core.lineHeight.body.small;
+    var topMargin = (lineHeight - core.space[2]) / 2;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-self: flex-start;\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    background-color: ", ";\n  "], ["\n    align-self: flex-start;\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    background-color: ", ";\n  "])), numToPx(core.space[2]), numToPx(core.space[2]), numToPx(core.space[2]), numToPx(topMargin), visible ? semantic.message.base : 'transparent');
+});
+export var TextBullet = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    var lineHeight = smallAndUp
+        ? core.lineHeight.body.large
+        : core.lineHeight.body.small;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      margin-right: ", ";\n      min-width: ", ";\n      min-height: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      text-align: left;\n      color: ", ";\n    "], ["\n      margin-right: ", ";\n      min-width: ", ";\n      min-height: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      text-align: left;\n      color: ", ";\n    "])), numToPx(core.space[1]), numToPx(core.space[3]), numToPx(core.space[3]), numToPx(fontSize), numToPx(lineHeight), semantic.message.base);
+});
+export var FlexRow = styled.View(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
+export var LiContent = styled.View(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex-direction: column;\n  flex: 1;\n"], ["\n  flex-direction: column;\n  flex: 1;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/esm/components/Margin/Margin.js

@@ -0,0 +1,46 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled from '../../styled.native';
+import { responsiveStyle } from '../../utils';
+var StyledMargin = styled.View(function (_a) {
+    var space = _a.theme.core.space, mTop = _a.mTop, mBottom = _a.mBottom, mLeft = _a.mLeft, mRight = _a.mRight, horizontal = _a.horizontal, vertical = _a.vertical, all = _a.all, breakpoints = _a.breakpoints;
+    var formatter = function (spaceKey) { return numToPx(space[spaceKey]); };
+    return "\n    ".concat(horizontal
+        ? "\n            ".concat(responsiveStyle('margin-left', horizontal, breakpoints, formatter), "\n            ").concat(responsiveStyle('margin-right', horizontal, breakpoints, formatter), "\n          ")
+        : '', "\n    ").concat(vertical
+        ? "\n            ".concat(responsiveStyle('margin-top', vertical, breakpoints, formatter), "\n            ").concat(responsiveStyle('margin-bottom', vertical, breakpoints, formatter), "\n          ")
+        : '', "\n    ").concat(mTop ? responsiveStyle('margin-top', mTop, breakpoints, formatter) : '', "\n    ").concat(mBottom
+        ? responsiveStyle('margin-bottom', mBottom, breakpoints, formatter)
+        : '', "\n    ").concat(mLeft ? responsiveStyle('margin-left', mLeft, breakpoints, formatter) : '', "\n    ").concat(mRight
+        ? responsiveStyle('margin-right', mRight, breakpoints, formatter)
+        : '', "\n    ").concat(all ? responsiveStyle('margin', all, breakpoints, formatter) : '', "\n  ");
+});
+var Margin = function (_a) {
+    var top = _a.top, bottom = _a.bottom, left = _a.left, right = _a.right, rest = __rest(_a, ["top", "bottom", "left", "right"]);
+    var breakpoints = useBreakpoint();
+    return (_jsx(StyledMargin, __assign({}, rest, { breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right })));
+};
+export { Margin };

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

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

package/dist/esm/components/NavHeader/IconButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { theme } from '@ovotech/element-core';
+import { Pressable } from 'react-native';
+import { Icon } from '../Icon';
+import { StyledIconButtonL, StyledIconButtonS } from './NavHeader.styles';
+export var IconButton = function (_a) {
+    var size = _a.size, animation = _a.animation, rightActionConfig = _a.rightActionConfig;
+    var ButtonStyled = size === 'small' ? StyledIconButtonS : StyledIconButtonL;
+    if (!rightActionConfig || !(rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.iconName)) {
+        return null;
+    }
+    return (_jsx(Pressable, { hitSlop: 44, pressRetentionOffset: 44, onPress: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.onActionPress, children: function (_a) {
+            var pressed = _a.pressed;
+            return (_jsx(ButtonStyled, { entering: animation, "$pressed": pressed, children: _jsx(Icon, { name: rightActionConfig.iconName, size: size === 'small' ? 16 : 18, color: theme.semantic.inverted.message.base }) }));
+        } }));
+};

package/dist/esm/components/NavHeader/NavHeader.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from '@ovotech/element-core';
+import Animated, { Easing, FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { Action } from '../ActionList';
+import { IconButton } from './IconButton';
+import { ActionWrapper, CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, NavWrapper, } from './NavHeader.styles';
+var FADE_ANIMATION_DURATION = 200;
+export var NavHeader = function (_a) {
+    var title = _a.title, scrolled = _a.scrolled, canGoBack = _a.canGoBack, rightActionConfig = _a.rightActionConfig, _b = _a.topOffset, topOffset = _b === void 0 ? 0 : _b, _c = _a.backButtonText, backButtonText = _c === void 0 ? 'Back' : _c, onHeaderHeightChange = _a.onHeaderHeightChange, onBackButtonPress = _a.onBackButtonPress;
+    var hasRightAction = !!rightActionConfig;
+    var layoutHeight = useSharedValue(0);
+    var animatedHeightStyle = useAnimatedStyle(function () {
+        return {
+            height: layoutHeight.value,
+        };
+    });
+    var onLayout = function (e) {
+        var height = e.nativeEvent.layout.height;
+        if (height === layoutHeight.value) {
+            return;
+        }
+        // we want to only update height of the expanded header to set content offset on the client side
+        if (!scrolled) {
+            onHeaderHeightChange === null || onHeaderHeightChange === void 0 ? void 0 : onHeaderHeightChange(height);
+        }
+        layoutHeight.value = withTiming(height, {
+            duration: FADE_ANIMATION_DURATION,
+            easing: Easing.linear,
+        });
+    };
+    // NavWrapper will recieve height of the NavContainer and animate it
+    // content inside NavContainer is the only dynamic part of NavHeader
+    return (_jsx(NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: _jsxs(NavContainer, { topOffset: topOffset, onLayout: onLayout, children: [_jsx(Animated.View, { style: {
+                        width: scrolled ? '33.3%' : '100%',
+                        // when back button is off we have small margin top for title, to write less code we can just set height
+                        height: !canGoBack ? parseInt(theme.core.space[10]) : undefined,
+                    }, children: canGoBack && (_jsx(ActionWrapper, { collapsed: scrolled, children: _jsx(Action, { iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress, children: backButtonText }) })) }), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { children: _jsx(CollapsedTitle, { numberOfLines: 1, ellipsizeMode: "tail", entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION), children: title }) }), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(ExpandedTitle
+                        // if we don't have right action leave more space for the title text in expanded state
+                        , { 
+                            // if we don't have right action leave more space for the title text in expanded state
+                            fullWidth: !scrolled && !hasRightAction, numberOfLines: 2, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION), children: title }), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] }) }));
+};

package/dist/esm/components/NavHeader/NavHeader.styles.js

@@ -0,0 +1,44 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { numToPx } from '@ovotech/element-core';
+import Animated from 'react-native-reanimated';
+import styled, { css } from '../../styled.native';
+var Z_INDEX = 1000;
+export var NavWrapper = styled(Animated.View)(function (_a) {
+    var _b = _a.theme, semantic = _b.semantic, core = _b.core, collapsed = _a.collapsed;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    position: absolute;\n\n    /* yes, it is not a good move, but we want header to be the topmost element on the screen and we can't control app zIndex */\n    z-index: ", ";\n    background-color: ", ";\n\n    ", "\n  "], ["\n    width: 100%;\n    position: absolute;\n\n    /* yes, it is not a good move, but we want header to be the topmost element on the screen and we can't control app zIndex */\n    z-index: ", ";\n    background-color: ", ";\n\n    ", "\n  "])), Z_INDEX, semantic.surface.base, collapsed
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "], ["\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "])), numToPx(core.borderWidth.small), semantic.border.differentiated) : '');
+});
+export var NavContainer = styled.View(function (_a) {
+    var core = _a.theme.core, topOffset = _a.topOffset;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding: ", " ", ";\n    padding-top: ", ";\n  "], ["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding: ", " ", ";\n    padding-top: ", ";\n  "])), Z_INDEX + 1, numToPx(core.space[2]), numToPx(core.space[4]), numToPx(topOffset ? topOffset : core.space[2]));
+});
+export var ExpandedTitle = styled(Animated.Text)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBackButton = _a.hasBackButton, fullWidth = _a.fullWidth;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, numToPx(core.fontSize.heading1[hasBackButton ? 'small' : 'large']), numToPx(hasBackButton ? core.lineHeight.heading1.small : core.space[13]), semantic.message.branded);
+});
+export var CollapsedTitleWrapper = styled(Animated.View)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 33.3%;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 33.3%;\n  align-items: center;\n  justify-content: center;\n"])));
+export var CollapsedTitle = styled(Animated.Text)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.heading.native, numToPx(core.fontSize.heading4.small), numToPx(core.lineHeight.heading4.small), semantic.message.branded);
+});
+export var IconButtonWrapper = styled.View(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"], ["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"])));
+var iconButtonSharedStyles = css(function (_a) {
+    var semantic = _a.theme.semantic;
+    return "\n    border-radius: 100px;\n    background-color: ".concat(semantic.inverted.surface, ";\n    align-items: center;\n    justify-content: center;\n");
+});
+export var StyledIconButtonS = styled(Animated.View)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+    var $pressed = _a.$pressed;
+    return ($pressed ? 0.8 : 1);
+}, iconButtonSharedStyles);
+export var StyledIconButtonL = styled(Animated.View)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+    var $pressed = _a.$pressed;
+    return ($pressed ? 0.8 : 1);
+}, iconButtonSharedStyles);
+export var ActionWrapper = styled.View(function (_a) {
+    var core = _a.theme.core, collapsed = _a.collapsed;
+    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), collapsed ? '0' : numToPx(core.space[2]));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

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

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

package/dist/esm/components/Notification/Notification.js

@@ -0,0 +1,78 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { forwardRef, useState } from 'react';
+import { View } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { Icon } from '../Icon';
+var NotificationBox = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, noMargin = _a.noMargin;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    margin-bottom: ", ";\n    border: ", " solid\n      ", ";\n    border-radius: ", ";\n    overflow: hidden;\n  "], ["\n    position: relative;\n    margin-bottom: ", ";\n    border: ", " solid\n      ", ";\n    border-radius: ", ";\n    overflow: hidden;\n  "])), noMargin ? 0 : numToPx(core.space[4]), numToPx(core.borderWidth.small), semantic.surface.elevated, numToPx(core.radius.max));
+});
+export var NotificationContentBox = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      background-color: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), semantic.surface.elevated, numToPx(core.space[2]), numToPx(core.space[3]), numToPx(core.space[4]), numToPx(core.space[4]));
+});
+export var NotificationTitleBox = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, variant = _a.variant, dismissible = _a.dismissible;
+    var currentVariant = semantic[variant];
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    min-height: 44px;\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    min-height: 44px;\n  "])), currentVariant.surface, numToPx(core.space[2]), numToPx(core.space[2]), numToPx(core.space[4]), dismissible
+        ? numToPx(core.space[3])
+        : numToPx(core.space[4]));
+});
+var NotificationTitleText = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, variant = _a.variant;
+    var currentVariant = semantic[variant];
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "])), numToPx(core.fontSize.body.small), core.fontFamily.bodyBold.native, currentVariant.message);
+});
+var DismissButton = styled.TouchableOpacity(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 28px;\n      height: 28px;\n      background: ", ";\n      border: ", " solid\n        ", ";\n      border-radius: ", ";\n    "], ["\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 28px;\n      height: 28px;\n      background: ", ";\n      border: ", " solid\n        ", ";\n      border-radius: ", ";\n    "])), semantic.inverted.surface, numToPx(core.borderWidth.small), core.color.brand.forest, numToPx(core.radius.max));
+});
+var StyledIcon = styled(Icon)(function (_a) {
+    var semantic = _a.theme.semantic;
+    return "\n    color: ".concat(semantic.inverted.message.base, ";\n  ");
+});
+export var Notification = forwardRef(function (_a, ref) {
+    var _b = _a.variant, variant = _b === void 0 ? 'neutral' : _b, children = _a.children, title = _a.title, noMargin = _a.noMargin, dismissible = _a.dismissible, onDismiss = _a.onDismiss, rest = __rest(_a, ["variant", "children", "title", "noMargin", "dismissible", "onDismiss"]);
+    var _c = useState(false), dismissed = _c[0], setDismissed = _c[1];
+    if (dismissed || (!title && !children)) {
+        return null;
+    }
+    return (_jsx(View, __assign({ ref: ref }, rest, { children: _jsxs(NotificationBox, { noMargin: noMargin, testID: "nb-notification", children: [_jsxs(NotificationTitleBox, { variant: variant, dismissible: dismissible, children: [_jsx(NotificationTitleText, { variant: variant, children: title }), dismissible ? (_jsx(DismissButton, { accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
+                                setDismissed(true);
+                                if (onDismiss) {
+                                    onDismiss();
+                                }
+                            }, children: _jsx(StyledIcon, { name: "cross", size: "16" }) })) : null] }), children ? (_jsx(NotificationContentBox, { "data-testid": "el-notification-box", children: children })) : null] }) })));
+});
+export var ErrorNotification = forwardRef(function (props, ref) { return _jsx(Notification, __assign({ ref: ref, variant: "error" }, props)); });
+export var SuccessNotification = forwardRef(function (props, ref) { return (_jsx(Notification, __assign({ ref: ref, variant: "success" }, props))); });
+export var InfoNotification = forwardRef(function (props, ref) { return _jsx(Notification, __assign({ ref: ref, variant: "info" }, props)); });
+export var WarningNotification = forwardRef(function (props, ref) { return _jsx(Notification, __assign({ ref: ref, variant: "warning" }, props)); });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1 @@
+export { Notification, ErrorNotification, InfoNotification, WarningNotification, SuccessNotification, } from './Notification';

package/dist/esm/components/NumberField/NumberField.js

@@ -0,0 +1,30 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Field } from '../Field';
+import { NumberInput } from '../NumberInput';
+export var NumberField = forwardRef(function (_a, ref) {
+    var rest = __rest(_a, []);
+    return (_jsx(Field, __assign({}, rest, { ref: ref, children: _jsx(NumberInput, {}) })));
+});

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

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

package/dist/esm/components/NumberInput/NumberInput.js

@@ -0,0 +1,16 @@
+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 } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Input } from '../Input/Input';
+var NumberInput = forwardRef(function (props, ref) { return (_jsx(Input, __assign({}, props, { keyboardType: "numeric", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
+export { NumberInput };

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

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

package/dist/esm/components/P/P.js

@@ -0,0 +1,29 @@
+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 } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { forwardRef } from 'react';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+var StyledP = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small']), numToPx(core.lineHeight.body[smallAndUp ? 'large' : 'small']), inverted ? semantic.inverted.message.base : semantic.message.base);
+});
+export var P = forwardRef(function (props, ref) {
+    var breakpoints = useBreakpoint();
+    return _jsx(StyledP, __assign({}, props, breakpoints, { ref: ref }));
+});
+var templateObject_1;

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

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

package/dist/esm/components/PasswordField/PasswordField.js

@@ -0,0 +1,30 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Field } from '../Field';
+import { PasswordInput } from '../PasswordInput';
+export var PasswordField = forwardRef(function (_a, ref) {
+    var hasVisibilityToggle = _a.hasVisibilityToggle, rest = __rest(_a, ["hasVisibilityToggle"]);
+    return (_jsx(Field, __assign({}, rest, { ref: ref, children: _jsx(PasswordInput, { hasVisibilityToggle: hasVisibilityToggle }) })));
+});

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

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

package/dist/esm/components/PasswordInput/PasswordInput.js

@@ -0,0 +1,32 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Input } from '../Input/Input';
+import { PasswordVisibilityToggle, useTogglePasswordVisibility, } from './PasswordVisibilityToggle';
+var PasswordInput = forwardRef(function (_a, ref) {
+    var props = __rest(_a, []);
+    var _b = useTogglePasswordVisibility(), isPasswordVisible = _b.isPasswordVisible, handlePasswordVisibility = _b.handlePasswordVisibility;
+    return (_jsx(Input, __assign({}, props, { rightSlot: props.hasVisibilityToggle ? (_jsx(PasswordVisibilityToggle, { iconName: isPasswordVisible ? 'hide' : 'show', visibilityToggleLabel: isPasswordVisible ? 'Hide password' : 'Show password', handlePasswordVisibility: handlePasswordVisibility })) : null, keyboardType: "default", autoCapitalize: "none", autoCorrect: false, blurOnSubmit: false, secureTextEntry: !isPasswordVisible, ref: ref })));
+});
+export { PasswordInput };

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

@@ -0,0 +1,12 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { numToPx } from '@ovotech/element-core';
+import { Pressable } from 'react-native';
+import styled, { css } from '../../styled.native';
+export var StyledPressable = styled(Pressable)(function (_a) {
+    var core = _a.theme.core, focused = _a.focused;
+    return 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  "])), numToPx(core.space[4]), focused ? '16px' : '14px', numToPx(core.space[3]));
+});
+var templateObject_1;

package/dist/esm/components/PasswordInput/PasswordVisibilityToggle.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Icon } from '../Icon';
+import { StyledPressable } from './PasswordInput.styled';
+export var useTogglePasswordVisibility = function () {
+    var _a = useState(false), isPasswordVisible = _a[0], setIsPasswordVisible = _a[1];
+    var handlePasswordVisibility = function () {
+        setIsPasswordVisible(!isPasswordVisible);
+    };
+    return {
+        isPasswordVisible: isPasswordVisible,
+        handlePasswordVisibility: handlePasswordVisibility,
+    };
+};
+export var PasswordVisibilityToggle = function (_a) {
+    var iconName = _a.iconName, visibilityToggleLabel = _a.visibilityToggleLabel, handlePasswordVisibility = _a.handlePasswordVisibility;
+    var _b = useState(false), focused = _b[0], setFocused = _b[1];
+    return (_jsx(StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: function () {
+            setFocused(true);
+        }, onBlur: function () {
+            setFocused(false);
+        }, children: _jsx(Icon, { name: iconName, size: 16, pointerEvents: "none" }) }));
+};

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

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

package/dist/esm/components/PhoneField/PhoneField.js

@@ -0,0 +1,30 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Field } from '../Field';
+import { PhoneInput } from '../PhoneInput';
+export var PhoneField = forwardRef(function (_a, ref) {
+    var rest = __rest(_a, []);
+    return (_jsx(Field, __assign({}, rest, { ref: ref, children: _jsx(PhoneInput, {}) })));
+});

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

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

package/dist/esm/components/PhoneInput/PhoneInput.js

@@ -0,0 +1,15 @@
+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 } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Input } from '../Input/Input';
+export var PhoneInput = forwardRef(function (props, ref) { return (_jsx(Input, __assign({}, props, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });

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

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

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

@@ -0,0 +1,50 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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(_a) {
+    var data = _a.data, animatedValue = _a.animatedValue;
+    return (_jsx(SDotsContainer, { children: data.map(function (_, index) { return (_jsx(Dot, { index: index, length: data.length, animatedValue: animatedValue }, index)); }) }));
+}
+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 = useTheme();
+    var animatedStyle = 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];
+        }
+        var backgroundColor = interpolateColor(animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value, inputRange, [
+            theme.core.color.brand.forest,
+            theme.core.color.brand.energised,
+            theme.core.color.brand.forest,
+        ]);
+        return {
+            transform: [
+                {
+                    translateX: interpolate(animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value, inputRange, outputRange, Extrapolate.CLAMP),
+                },
+            ],
+            backgroundColor: backgroundColor,
+        };
+    }, [animatedValue, index, length]);
+    return (_jsx(SDot, { "$width": width, children: _jsx(SAnimatedDot, { style: animatedStyle }) }));
+};
+var SDotsContainer = styled.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.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 = styled(Animated.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;