@ovotech/element-native 3.6.0 → 3.7.0-canary-7cc2ffb-179

package/dist/esm/components/ActionList/ActionList.js

@@ -21,16 +21,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, } from 'react';
+import { Children, cloneElement, forwardRef, } from 'react';
 import { TouchableOpacity, } from 'react-native';
 import { useBreakpoint } from '../../hooks';
 import { StyledActionInner, StyledActionList, StyledActionText, StyledActionWrapper, StyledLeftIcon, StyledRightIcon, } from './styled';
-var ACTION_TYPES = {
-    back: 'chevron-left-small',
-    // edit: 'arrow-right', /* TODO: add pencil + paper icon */
-    external: 'new-window',
-    link: 'chevron-right-small',
-};
 var ActionList = function (_a) {
     var children = _a.children, inverted = _a.inverted, rest = __rest(_a, ["children", "inverted"]);
     var childCount = children.length;
@@ -45,21 +39,16 @@ var ActionList = function (_a) {
             });
         }) })));
 };
-var ActionWrapper = function (_a) {
+var ActionWrapper = forwardRef(function (_a, ref) {
     var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID"]);
-    return (_jsx(StyledActionWrapper, __assign({ hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, __assign({ hitSlop: inline ? 24 : null, activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: _jsx(StyledActionInner, __assign({ fullWidth: fullWidth, inList: inList, inline: inline }, { children: children })) })) })));
-};
-var Action = function (_a) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, _c = _a.actionType, actionType = _c === void 0 ? 'link' : _c, children = _a.children, _d = _a.fullWidth, fullWidth = _d === void 0 ? 'never' : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, _f = _a.inline, inline = _f === void 0 ? false : _f, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["accessibilityRole", "actionType", "children", "fullWidth", "inverted", "inline", "onPress", "testID"]);
+    return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, __assign({ hitSlop: inline ? 24 : null, activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: _jsx(StyledActionInner, __assign({ fullWidth: fullWidth, inList: inList, inline: inline }, { children: children })) })) })));
+});
+var Action = forwardRef(function (_a, ref) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? 'never' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight"]);
     var smallAndUp = useBreakpoint().smallAndUp;
-    var isBackAction = actionType === 'back';
-    var updatedIconRight = null;
-    if (!isBackAction) {
-        updatedIconRight = ACTION_TYPES[actionType];
-    }
     if (fullWidth === 'small') {
         fullWidth = smallAndUp ? 'never' : 'always';
     }
-    return (_jsxs(ActionWrapper, __assign({ accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID }, rest, { children: [isBackAction ? (_jsx(StyledLeftIcon, { inverted: inverted, name: ACTION_TYPES.back, size: 16 })) : null, _jsx(StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList }, { children: children })), updatedIconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: updatedIconRight, marginTop: actionType === 'link' ? 1 : 0, size: 16 })) : null] })));
-};
+    return (_jsxs(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, _jsx(StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList }, { children: children })), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, marginTop: iconRight === 'chevron-right-small' ? 1 : 0, size: 16 })) : null] })));
+});
 export { ActionList, Action };

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

@@ -1 +1 @@
-export * from './ActionList';
+export { Action, ActionList } from './ActionList';

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

@@ -33,6 +33,6 @@ export var StyledRightIcon = styled(Icon)(function (_a) {
 });
 export var StyledLeftIcon = styled(Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    margin-right: ", ";\n  "], ["\n    color: ", ";\n    margin-right: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1]);
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: start;\n  "], ["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: start;\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1], core.space[1]);
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -11,20 +11,47 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { theme } from '@ovotech/element-core';
-import Animated, { FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, } from 'react-native-reanimated';
+import { useEffect } from 'react';
+import Animated, { Easing, FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { Action } from '../ActionList';
 import { IconButton } from './IconButton';
-import { CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, } from './NavHeader.styles';
-var FADE_ANIMATION_DURATION = 250; // ms
+import { ActionWrapper, CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, } from './NavHeader.styles';
+var FADE_ANIMATION_DURATION = 200;
+var ONLY_TITLE_CONTAINER_HEIGHT = 108;
+var TITLE_AND_BACK_CONTAINER_HEIGHT = 92;
 export var NavHeader = function (_a) {
-    var title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, goBack = _a.goBack;
-    return (_jsxs(NavContainer, { children: [_jsx(Animated.View, __assign({ style: {
+    var title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, _b = _a.backButtonText, backButtonText = _b === void 0 ? 'Back' : _b, onBackButtonPress = _a.onBackButtonPress;
+    var hasRightAction = !!rightActionConfig;
+    var initialContainerHeight = canGoBack
+        ? TITLE_AND_BACK_CONTAINER_HEIGHT
+        : ONLY_TITLE_CONTAINER_HEIGHT;
+    var animatedContainerHeight = useSharedValue(initialContainerHeight);
+    var animatedHeightStyle = useAnimatedStyle(function () {
+        return {
+            height: animatedContainerHeight.value,
+        };
+    });
+    useEffect(function () {
+        if (scrolled) {
+            animatedContainerHeight.value = withTiming(56, {
+                duration: FADE_ANIMATION_DURATION,
+                easing: Easing.linear,
+            });
+        }
+        else {
+            animatedContainerHeight.value = withTiming(initialContainerHeight, {
+                duration: FADE_ANIMATION_DURATION,
+                easing: Easing.linear,
+            });
+        }
+    }, [scrolled]);
+    return (_jsxs(NavContainer, __assign({ collapsed: scrolled, style: [animatedHeightStyle] }, { children: [_jsx(Animated.View, __assign({ 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(Action, __assign({ actionType: "back", onPress: goBack }, { children: "Back" }))) })), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { children: _jsx(CollapsedTitle, __assign({ 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
+                } }, { children: canGoBack && (_jsx(ActionWrapper, __assign({ collapsed: scrolled }, { children: _jsx(Action, __assign({ iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress }, { children: backButtonText })) }))) })), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { children: _jsx(CollapsedTitle, __assign({ 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
                     , __assign({ 
                         // if we don't have right action leave more space for the title text in expanded state
-                        fullWidth: !scrolled && !rightActionConfig, numberOfLines: 1, 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) }) })] }))] }));
+                        fullWidth: !scrolled && !hasRightAction, numberOfLines: 1, 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

@@ -2,38 +2,42 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import styled, { css } from '../../styled.native';
-export var NavContainer = styled(View)(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, core = _b.core;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    background-color: ", ";\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n  "], ["\n    width: 100%;\n    background-color: ", ";\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n  "])), semantic.surface.base, core.space[2]);
+export var NavContainer = 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    background-color: ", ";\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    ", "\n  "], ["\n    width: 100%;\n    background-color: ", ";\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    ", "\n  "])), semantic.surface.base, core.space[2], collapsed
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-bottom-width: 1px;\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "], ["\n          border-bottom-width: 1px;\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "])), semantic.border.differentiated) : '');
 });
 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_2 || (templateObject_2 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, core.fontSize.heading1[hasBackButton ? 'small' : 'large'], hasBackButton
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, core.fontSize.heading1[hasBackButton ? 'small' : 'large'], hasBackButton
         ? core.lineHeight.heading1.small
         : core.space[13], hasBackButton ? core.lineHeight.heading1.small : core.space[13], semantic.message.branded);
 });
-export var CollapsedTitleWrapper = styled(Animated.View)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"], ["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"])), function (_a) {
+export var CollapsedTitleWrapper = styled(Animated.View)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"], ["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"])), function (_a) {
     var core = _a.theme.core;
     return core.lineHeight.heading4.small;
 });
 export var CollapsedTitle = styled(Animated.Text)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_4 || (templateObject_4 = __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, core.fontSize.heading4.small, core.lineHeight.heading4.small, semantic.message.branded);
+    return css(templateObject_5 || (templateObject_5 = __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, core.fontSize.heading4.small, core.lineHeight.heading4.small, semantic.message.branded);
 });
-export var IconButtonWrapper = styled.View(templateObject_5 || (templateObject_5 = __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"])));
+export var IconButtonWrapper = styled.View(templateObject_6 || (templateObject_6 = __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_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+export var StyledIconButtonS = styled(Animated.View)(templateObject_7 || (templateObject_7 = __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_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+export var StyledIconButtonL = styled(Animated.View)(templateObject_8 || (templateObject_8 = __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);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+export var ActionWrapper = styled.View(function (_a) {
+    var core = _a.theme.core, collapsed = _a.collapsed;
+    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), collapsed ? '0' : core.space[2]);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -2,11 +2,27 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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 { forwardRef } from 'react';
+import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
 var StyledP = styled.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
     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, core.fontSize.body[smallAndUp ? 'large' : 'small'], core.lineHeight.body[smallAndUp ? 'large' : 'small'], semantic.message.base);
 });
-export var P = styledComponentWithBreakpoints(StyledP);
+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/SkeletonText/SkeletonText.js

@@ -36,5 +36,7 @@ export var SkeletonText = function (_a) {
     for (var i = 1; i <= lines; i++) {
         generatedLines.push(_jsx(StyledSkeletonText, { short: i === lines, aboveSmallBreakpoint: smallAndUp }, "line-".concat(i)));
     }
-    return (_jsx(P, __assign({ as: SkeletonAnimation }, rest, { children: generatedLines })));
+    return (
+    // @ts-ignore styled components stuff
+    _jsx(P, __assign({ as: SkeletonAnimation }, rest, { children: generatedLines })));
 };

package/dist/esm/components/Spinner/Spinner.js

@@ -0,0 +1,55 @@
+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 { useContext, useEffect } from 'react';
+import Animated, { cancelAnimation, Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+import Svg, { Rect } from 'react-native-svg';
+import { ThemeContext } from '../../styled.native';
+var semanticSizes = {
+    large: 65,
+    small: 32,
+};
+// based on values in the Figma `y` point is 3.5 times smaller side length, `viewBox` is 1.25 times larger side length
+var calculateSvgProps = function (size) {
+    return {
+        viewBox: size * 1.25,
+        y: size / 3.5,
+    };
+};
+export var Spinner = function (_a) {
+    var _b = _a.inverted, inverted = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'small' : _c, _d = _a.accessibilityLabel, accessibilityLabel = _d === void 0 ? 'Loading' : _d;
+    var core = useContext(ThemeContext).core;
+    var rotation = useSharedValue(0);
+    var animatedStyles = useAnimatedStyle(function () {
+        return {
+            transform: [
+                // needed for correct 3d animation
+                { perspective: 1000 },
+                {
+                    rotateY: "".concat(rotation.value, "deg"),
+                },
+            ],
+        };
+    }, [rotation.value]);
+    useEffect(function () {
+        // rotate svg from right to left on 360deg during 2 seconds and repeat that 200 times
+        rotation.value = withRepeat(withTiming(-360, {
+            duration: 2000,
+            easing: Easing.linear,
+        }), 200);
+        // cancel animation if component is unmounted
+        return function () { return cancelAnimation(rotation); };
+    }, []);
+    var rectangleSize = size in semanticSizes ? semanticSizes[size] : size;
+    var _e = calculateSvgProps(rectangleSize), viewBox = _e.viewBox, y = _e.y;
+    return (_jsx(Animated.View, __assign({ style: [{ width: viewBox }, animatedStyles], accessible: true, accessibilityLabel: accessibilityLabel }, { children: _jsx(Svg, __assign({ width: "".concat(viewBox), height: "".concat(viewBox), viewBox: "0 0 ".concat(viewBox, " ").concat(viewBox) }, { children: _jsx(Rect, { y: "".concat(y), width: "".concat(rectangleSize), height: "".concat(rectangleSize), transform: "rotate(-15 0 ".concat(y, ")"), fill: core.color.brand[inverted ? 'white' : 'ovo'] }) })) })));
+};

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

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

package/dist/esm/components/Toast/Toast.js

@@ -0,0 +1,140 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { toast, ToastPosition, Toasts, } from '@backpackapp-io/react-native-toast';
+import { useEffect, useRef, useState } from 'react';
+import { Dimensions, TouchableOpacity, View } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import styled, { css } from '../../styled.native';
+import { Action } from '../ActionList';
+import { Icon } from '../Icon';
+import { P } from '../P';
+export var ToastsContainer = function (_a) {
+    var _b = _a.top, top = _b === void 0 ? -80 : _b;
+    return (_jsx(Toasts, { extraInsets: { top: top } }));
+};
+var StyledView = styled.View(function (_a) {
+    var core = _a.theme.core, variant = _a.variant;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    border-radius: ", ";\n    flex-direction: row;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    border-radius: ", ";\n    flex-direction: row;\n  "])), variant === 'default'
+        ? core.color.brand.forest
+        : core.color.red.darkest, core.space[2], core.space[3], core.space[2], core.space[4], core.radius.max);
+});
+var StyledP = styled(P)(function (_a) {
+    var semantic = _a.theme.semantic;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), semantic.inverted.message.base);
+});
+var StyledThinBorder = styled(Animated.View)(function (_a) {
+    var core = _a.theme.core, variant = _a.variant;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    background-color: ", ";\n    height: 1px;\n  "], ["\n    background-color: ", ";\n    height: 1px;\n  "])), variant === 'default'
+        ? core.color.brand.energised
+        : core.color.red.light);
+});
+var StyledThickBorder = styled(Animated.View)(function (_a) {
+    var core = _a.theme.core, variant = _a.variant;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n    height: 3px;\n  "], ["\n    background-color: ", ";\n    height: 3px;\n  "])), variant === 'default'
+        ? core.color.brand.leaf
+        : core.color.red.base);
+});
+var StyledCloseIcon = styled(TouchableOpacity)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: ", ";\n    border-radius: ", ";\n    width: ", ";\n    height: ", ";\n    padding: ", ";\n    align-items: center;\n    justify-content: center;\n  "], ["\n    background-color: ", ";\n    border-radius: ", ";\n    width: ", ";\n    height: ", ";\n    padding: ", ";\n    align-items: center;\n    justify-content: center;\n  "])), semantic.inverted.surface, core.radius.max, core.space[7], core.space[7], core.space[2]);
+});
+export var showToast = function (_a) {
+    var message = _a.message, _b = _a.dismissible, dismissible = _b === void 0 ? false : _b, action = _a.action, actionTitle = _a.actionTitle, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, _d = _a.duration, duration = _d === void 0 ? 5000 : _d;
+    return action || dismissible
+        ? toast.loading(message, {
+            id: 'clipboard',
+            position: ToastPosition.BOTTOM,
+            disableShadow: true,
+            customToast: function (t) { return (_jsx(CustomToast, __assign({}, t, { dismissible: dismissible, action: action, actionTitle: actionTitle, variant: variant }), message)); },
+        })
+        : toast(message, {
+            id: 'clipboard',
+            position: ToastPosition.BOTTOM,
+            duration: duration,
+            disableShadow: true,
+            customToast: function (t) { return (_jsx(CustomToastWithTimeIndicator, __assign({}, t, { variant: variant }), message)); },
+        });
+};
+var CustomToastWithTimeIndicator = function (_a) {
+    var message = _a.message, _b = _a.duration, duration = _b === void 0 ? 5000 : _b, variant = _a.variant;
+    var toastPadding = 20;
+    var textRef = useRef(null);
+    var _c = useState(0), textHeight = _c[0], setTextHeight = _c[1];
+    var windowWidth = Dimensions.get('window').width;
+    var screenPadding = 32;
+    var toastWidth = windowWidth - screenPadding;
+    var sharedWidth = useSharedValue(toastWidth);
+    var style = useAnimatedStyle(function () {
+        return {
+            width: withTiming(sharedWidth.value, {
+                duration: duration,
+                easing: Easing.linear,
+            }),
+        };
+    });
+    useEffect(function () {
+        sharedWidth.value = 0;
+    }, []);
+    return (_jsxs(StyledView, __assign({ variant: variant, style: {
+            width: toastWidth,
+            height: textHeight + toastPadding,
+            flexWrap: 'wrap',
+        } }, { children: [_jsx(StyledP, __assign({ ref: textRef, onLayout: function () {
+                    var _a;
+                    (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
+                        setTextHeight(height);
+                    });
+                } }, { children: message })), _jsxs(View, __assign({ style: { position: 'absolute', bottom: 0 } }, { children: [_jsx(StyledThinBorder, { variant: variant, style: style }), _jsx(StyledThickBorder, { variant: variant, style: style })] }))] })));
+};
+var CustomToast = function (_a) {
+    var id = _a.id, message = _a.message, dismissible = _a.dismissible, action = _a.action, actionTitle = _a.actionTitle, width = _a.width, variant = _a.variant;
+    var toastPadding = 20;
+    var textRef = useRef(null);
+    var actionRef = useRef(null);
+    var _b = useState(0), textHeight = _b[0], setTextHeight = _b[1];
+    var _c = useState(0), actionHeight = _c[0], setActionHeight = _c[1];
+    var toastHeight = Math.floor(textHeight) === Math.floor(actionHeight) && !dismissible // handling multiline
+        ? textHeight
+        : textHeight + actionHeight;
+    var handleAction = function () {
+        if (action && actionTitle) {
+            action();
+            toast.dismiss(id);
+        }
+    };
+    return (_jsxs(StyledView, __assign({ variant: variant, style: {
+            width: width,
+            height: toastHeight + toastPadding,
+            alignItems: action ? 'flex-start' : 'center',
+        } }, { children: [_jsxs(View, __assign({ style: {
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                    justifyContent: 'space-between',
+                    flex: 1,
+                } }, { children: [_jsx(StyledP, __assign({ ref: textRef, onLayout: function () {
+                            var _a;
+                            (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
+                                setTextHeight(height);
+                            });
+                        } }, { children: message })), action && actionTitle ? (_jsx(Action, __assign({ ref: actionRef, style: { width: 'auto' }, inverted: true, inline: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: function () {
+                            var _a;
+                            (_a = actionRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
+                                setActionHeight(height);
+                            });
+                        } }, { children: actionTitle }))) : null] })), dismissible ? (_jsx(StyledCloseIcon, __assign({ onPress: function () { return toast.dismiss(id); } }, { children: _jsx(Icon, { name: "cross", color: "#fff", size: 14 }) }))) : null] })));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1 @@
+export { showToast, ToastsContainer } from './Toast';

package/dist/esm/components/index.js

@@ -46,6 +46,7 @@ export * from './SkeletonCTA';
 export * from './SkeletonHeading';
 export * from './SkeletonText';
 export * from './Small';
+export * from './Spinner';
 export * from './Stack';
 export * from './Strong';
 export * from './Tabs';
@@ -56,3 +57,4 @@ export * from './TextGroup';
 export * from './TextInput';
 export * from './TextLink';
 export * from './Toggle';
+export * from './Toast';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "3.6.0",
+  "version": "3.7.0-canary-7cc2ffb-179",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,8 @@
     "url": "@ovotech/element"
   },
   "dependencies": {
-    "@ovotech/element-core": "^2.2.0",
+    "@backpackapp-io/react-native-toast": "^0.10.0",
+    "@ovotech/element-core": "^2.2.0-canary-7cc2ffb-179",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0"
   },
@@ -40,7 +41,9 @@
     "react": "18.2.0",
     "react-is": "^16.13.0",
     "react-native": "0.72.3",
+    "react-native-gesture-handler": "^2.14.0",
     "react-native-reanimated": "^2.10.0",
+    "react-native-safe-area-context": "^4.7.4",
     "react-native-svg": "9.2.4",
     "react-router-dom": "^5.1.2",
     "react-test-renderer": "^18.2.0",
@@ -50,12 +53,14 @@
     "typescript": "^4.8.4"
   },
   "peerDependencies": {
+    "@react-native-masked-view/masked-view": "^0.3.0",
     "react": "^16.9.0 || ^17.0.0",
     "react-native": "^0.63.3 || ^0.71.0 || ^0.72.0",
+    "react-native-gesture-handler": "^2.14.0",
     "react-native-reanimated": "^2.10.0",
+    "react-native-safe-area-context": "^4.7.4",
     "react-native-svg": "^13.5.0",
-    "styled-components": "^5.1.3",
-    "@react-native-masked-view/masked-view": "^0.3.0"
+    "styled-components": "^5.1.3"
   },
   "sideEffects": false,
   "scripts": {