@ovotech/element-native 5.2.1 → 5.3.0-canary-9e22bfd-413

package/dist/esm/components/Link/Link.js

@@ -1,51 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { forwardRef } from 'react';
-import styled, { css } from '../../styled.native';
-import { getText } from '../../utils/utils';
-import { Button } from '../Button';
-import { Icon } from '../Icon';
-var Link = forwardRef(function (props, ref) { return _jsx(Button, __assign({}, props, { ref: ref })); });
-var StyledText = styled.Text(function (_a) {
-    var theme = _a.theme;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "])), theme.native.font.family.book, numToPx(theme.font.size.md.mediaQuery.sm), theme.color.surface.link, theme.color.surface.link);
-});
-var StyledIcon = styled(Icon)(function (_a) {
-    var theme = _a.theme;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), theme.color.surface.link);
-});
-var TextLink = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.opensInNewWindow, opensInNewWindow = _b === void 0 ? false : _b, accessibilityLabel = _a.accessibilityLabel, rest = __rest(_a, ["children", "opensInNewWindow", "accessibilityLabel"]);
-    var updatedAccessibilityLabel = opensInNewWindow
-        ? "".concat(accessibilityLabel ? accessibilityLabel : getText(children), " (opens in new window)")
-        : accessibilityLabel;
-    return (_jsxs(StyledText, __assign({}, rest, { accessibilityLabel: updatedAccessibilityLabel, ref: ref, children: [_jsx(StyledText, { children: children }), opensInNewWindow && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(StyledIcon, { size: 12, name: "new-window" })] }))] })));
-});
-export { TextLink, Link };
-var templateObject_1, templateObject_2;

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

@@ -1,29 +0,0 @@
-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

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

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

@@ -1,27 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-export var SquareBullet = styled.View(function (_a) {
-    var theme = _a.theme, visible = _a.visible, smallAndUp = _a.smallAndUp;
-    var lineHeight = smallAndUp
-        ? theme.font.lineHeight.md.mediaQuery.lg
-        : theme.font.lineHeight.md.mediaQuery.sm;
-    var topMargin = (lineHeight - theme.space[200]) / 2;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-self: flex-start;\n    width: ", ";\n    height: ", ";\n    margin-right: 10px;\n    margin-top: ", ";\n    background-color: ", ";\n    transform: rotate(-15deg);\n  "], ["\n    align-self: flex-start;\n    width: ", ";\n    height: ", ";\n    margin-right: 10px;\n    margin-top: ", ";\n    background-color: ", ";\n    transform: rotate(-15deg);\n  "])), numToPx(theme.space[200]), numToPx(theme.space[200]), numToPx(topMargin), visible ? theme.color.brand.brand : 'transparent');
-});
-export var TextBullet = styled.Text(function (_a) {
-    var theme = _a.theme, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
-        ? theme.font.size.md.mediaQuery.lg
-        : theme.font.size.md.mediaQuery.sm;
-    var lineHeight = smallAndUp
-        ? theme.font.lineHeight.md.mediaQuery.lg
-        : theme.font.lineHeight.md.mediaQuery.sm;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    min-width: ", ";\n    min-height: ", ";\n    margin-right: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-align: left;\n    color: ", ";\n  "], ["\n    min-width: ", ";\n    min-height: ", ";\n    margin-right: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-align: left;\n    color: ", ";\n  "])), numToPx(theme.space[300]), numToPx(theme.space[300]), numToPx(theme.space[100]), theme.native.font.family.book, numToPx(fontSize), numToPx(lineHeight), theme.color.surface.onSurface);
-});
-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

@@ -1,48 +0,0 @@
-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 theme = _a.theme, 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(theme.space[String(spaceKey * 100)]);
-    };
-    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/NavHeader/NavHeader.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Animated, { Easing, FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
-import { Action } from '../ActionList';
-import { Button } from '../Button';
-import { BackActionWrapper, CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, NavContainer, NavWrapper, HeaderGap, } 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 hasTitle = title !== undefined && (title === null || title === void 0 ? void 0 : title.length) > 0;
-    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, hasTitle: hasTitle, onLayout: onLayout, children: [_jsx(BackActionWrapper, { collapsed: scrolled, hasBackButton: canGoBack, children: canGoBack && (_jsx(Action, { standalone: true, iconLeft: "chevron-left-small", onPress: onBackButtonPress, children: backButtonText })) }), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION), children: _jsx(CollapsedTitle, { numberOfLines: 1, ellipsizeMode: "tail", children: title }) }), _jsx(HeaderGap, { hasRightAction: hasRightAction }), hasRightAction && (_jsx(_Fragment, { children: _jsx(Animated.View, { entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION), accessibilityRole: "button", accessibilityLabel: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityLabel, accessibilityHint: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityHint, children: _jsx(Button, { iconRight: rightActionConfig.iconName, onPress: rightActionConfig.onActionPress }) }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(ExpandedTitle, { hasRightAction: !hasRightAction, hasTitle: hasTitle, numberOfLines: 2, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION), children: title }), hasRightAction && (_jsx(Animated.View, { entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION), accessibilityRole: "button", accessibilityLabel: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityLabel, accessibilityHint: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityHint, children: _jsx(Button, { iconRight: rightActionConfig.iconName, onPress: rightActionConfig.onActionPress }) }))] }))] }) }));
-};

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

@@ -1,39 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 theme = _a.theme, 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, theme.color.surface.surface, 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(theme.border.width.sm), theme.color.input.borderDim) : '');
-});
-export var NavContainer = styled.View(function (_a) {
-    var theme = _a.theme, topOffset = _a.topOffset, hasTitle = _a.hasTitle;
-    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-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\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-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), Z_INDEX + 1, topOffset
-        ? numToPx(topOffset)
-        : numToPx(theme.space[hasTitle ? 200 : 400]), numToPx(theme.space[hasTitle ? 200 : 400]), numToPx(theme.space[400]), numToPx(theme.space[400]));
-});
-export var ExpandedTitle = styled(Animated.Text)(function (_a) {
-    var theme = _a.theme, hasBackButton = _a.hasBackButton, hasRightAction = _a.hasRightAction, hasTitle = _a.hasTitle;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    ", ";\n  "])), hasRightAction ? '100%' : '65%', theme.native.font.family.bold, numToPx(theme.font.size['4xl'].mediaQuery[hasBackButton ? 'sm' : 'lg']), numToPx(hasBackButton
-        ? theme.font.lineHeight['4xl'].mediaQuery.sm
-        : theme.space[1300]), theme.color.brand.brand, !hasTitle && 'height: 0;');
-});
-export var CollapsedTitleWrapper = styled(Animated.View)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 33.3%;\n  align-items: center;\n"], ["\n  width: 33.3%;\n  align-items: center;\n"])));
-export var CollapsedTitle = styled.Text(function (_a) {
-    var theme = _a.theme;
-    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  "])), theme.native.font.family.bold, numToPx(theme.font.size.xl.mediaQuery.sm), numToPx(theme.font.lineHeight.xl.mediaQuery.sm), theme.color.brand.brand);
-});
-export var HeaderGap = styled.View(function (_a) {
-    var hasRightAction = _a.hasRightAction;
-    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    width: ", ";\n  "], ["\n    width: ", ";\n  "])), hasRightAction ? '20%' : '33.3%');
-});
-export var BackActionWrapper = styled(Animated.View)(function (_a) {
-    var theme = _a.theme, collapsed = _a.collapsed, hasBackButton = _a.hasBackButton;
-    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    margin-bottom: ", ";\n    width: ", ";\n\n    /* Important for maintaining white space above the title on main app screens */\n    height: ", ";\n  "], ["\n    margin-bottom: ", ";\n    width: ", ";\n\n    /* Important for maintaining white space above the title on main app screens */\n    height: ", ";\n  "])), collapsed ? '0' : numToPx(theme.space[400]), collapsed ? '33.3%' : '100%', hasBackButton ? numToPx(theme.space[1000]) : undefined);
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -1,78 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 theme = _a.theme, noMargin = _a.noMargin, variant = _a.variant;
-    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(theme.space[400]), numToPx(theme.border.width.sm), theme.color.alert[variant], numToPx(theme.border.radius['2xl']));
-});
-export var NotificationContentBox = styled.View(function (_a) {
-    var theme = _a.theme;
-    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  "])), theme.color.surface.bright, numToPx(theme.space[200]), numToPx(theme.space[300]), numToPx(theme.space[400]), numToPx(theme.space[400]));
-});
-export var NotificationTitleBox = styled.View(function (_a) {
-    var theme = _a.theme, variant = _a.variant, dismissible = _a.dismissible;
-    var currentVariant = theme.color.alert["".concat(variant, "Tint")];
-    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, numToPx(theme.space[200]), numToPx(theme.space[200]), numToPx(theme.space[400]), dismissible
-        ? numToPx(theme.space[300])
-        : numToPx(theme.space[400]));
-});
-var NotificationTitleText = styled.Text(function (_a) {
-    var theme = _a.theme, variant = _a.variant;
-    var currentVariant = theme.color.alert[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(theme.font.size.md.mediaQuery.sm), theme.native.font.family.bold, currentVariant);
-});
-var DismissButton = styled.TouchableOpacity(function (_a) {
-    var theme = _a.theme;
-    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    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    border-radius: ", ";\n  "])), theme.button.surface.color.bg, numToPx(theme.border.width.sm), theme.color.surface.link, numToPx(theme.border.radius['2xl']));
-});
-var StyledIcon = styled(Icon)(function (_a) {
-    var theme = _a.theme;
-    return "\n    color: ".concat(theme.color.surface.bright, ";\n  ");
-});
-export var Notification = forwardRef(function (_a, ref) {
-    var _b = _a.variant, variant = _b === void 0 ? 'info' : _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, { variant: variant, 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

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

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

@@ -1,30 +0,0 @@
-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/NumberInput/NumberInput.js

@@ -1,16 +0,0 @@
-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/P/P.js

@@ -1,31 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } 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 theme = _a.theme, smallAndUp = _a.smallAndUp, inverted = _a.inverted, _b = _a.size, size = _b === void 0 ? 'md' : _b;
-    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    "])), theme.native.font.family.book, numToPx(theme.font.size[size].mediaQuery[smallAndUp ? 'lg' : 'sm']), numToPx(theme.font.lineHeight[size].mediaQuery[smallAndUp ? 'lg' : 'sm']), inverted
-        ? theme.color.surface.surface
-        : theme.color.surface.onSurface);
-});
-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/PasswordField/PasswordField.js

@@ -1,30 +0,0 @@
-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/PasswordInput/PasswordInput.js

@@ -1,32 +0,0 @@
-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

@@ -1,12 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 theme = _a.theme, 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(theme.space[400]), focused ? '16px' : '14px', numToPx(theme.space[300]));
-});
-var templateObject_1;

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

@@ -1,23 +0,0 @@
-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, accessible: true, 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/PhoneField/PhoneField.js

@@ -1,30 +0,0 @@
-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/PhoneInput/PhoneInput.js

@@ -1,15 +0,0 @@
-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/Pictogram/Pictogram.js

@@ -1,34 +0,0 @@
-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 { useContext } from 'react';
-import { usePictograms } from '../../providers';
-import { ThemeContext } from '../../styled.native';
-export 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 = usePictograms();
-    var theme = useContext(ThemeContext);
-    // @ts-ignore to support additional pictograms.
-    var Svg = name && pictograms[name];
-    return Svg ? (_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;
-};