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

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

@@ -1,36 +1,48 @@
+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';
-const StyledMargin = styled.View(({ theme: { core: { space }, }, mTop, mBottom, mLeft, mRight, horizontal, vertical, all, breakpoints, }) => {
-    const formatter = (spaceKey) => numToPx(space[spaceKey]);
-    return `
-    ${horizontal
-        ? `
-            ${responsiveStyle('margin-left', horizontal, breakpoints, formatter)}
-            ${responsiveStyle('margin-right', horizontal, breakpoints, formatter)}
-          `
-        : ''}
-    ${vertical
-        ? `
-            ${responsiveStyle('margin-top', vertical, breakpoints, formatter)}
-            ${responsiveStyle('margin-bottom', vertical, breakpoints, formatter)}
-          `
-        : ''}
-    ${mTop ? responsiveStyle('margin-top', mTop, breakpoints, formatter) : ''}
-    ${mBottom
+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)
-        : ''}
-    ${mLeft ? responsiveStyle('margin-left', mLeft, breakpoints, formatter) : ''}
-    ${mRight
+        : '', "\n    ").concat(mLeft ? responsiveStyle('margin-left', mLeft, breakpoints, formatter) : '', "\n    ").concat(mRight
         ? responsiveStyle('margin-right', mRight, breakpoints, formatter)
-        : ''}
-    ${all ? responsiveStyle('margin', all, breakpoints, formatter) : ''}
-  `;
+        : '', "\n    ").concat(all ? responsiveStyle('margin', all, breakpoints, formatter) : '', "\n  ");
 });
-const Margin = ({ top, bottom, left, right, ...rest }) => {
-    const breakpoints = useBreakpoint();
-    return (_jsx(StyledMargin, { ...rest, breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right }));
+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,28 +1,27 @@
 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 { useTheme } from '../../styled.native';
 import { Action } from '../ActionList';
-import { IconButton } from './IconButton';
-import { ActionWrapper, CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, NavWrapper, } from './NavHeader.styles';
-const FADE_ANIMATION_DURATION = 200;
-export const NavHeader = ({ title, scrolled, canGoBack, rightActionConfig, topOffset = 0, backButtonText = 'Back', onHeaderHeightChange, onBackButtonPress, }) => {
-    const hasRightAction = !!rightActionConfig;
-    const hasTitle = title !== undefined && title?.length > 0;
-    const theme = useTheme();
-    const layoutHeight = useSharedValue(0);
-    const animatedHeightStyle = useAnimatedStyle(() => {
+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,
         };
     });
-    const onLayout = (e) => {
-        const { height } = e.nativeEvent.layout;
+    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?.(height);
+            onHeaderHeightChange === null || onHeaderHeightChange === void 0 ? void 0 : onHeaderHeightChange(height);
         }
         layoutHeight.value = withTiming(height, {
             duration: FADE_ANIMATION_DURATION,
@@ -31,13 +30,5 @@ export const NavHeader = ({ title, scrolled, canGoBack, rightActionConfig, topOf
     };
     // 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, titleVisible: hasTitle, children: [_jsx(Animated.View, { style: {
-                        width: scrolled ? '33.3%' : '100%',
-                        // Important for maintaining white space above the title on main app screens.
-                        height: !canGoBack ? 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, { titleVisible: hasTitle, 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, titleVisible: hasTitle, 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) }) })] }))] }) }));
+    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,82 +1,39 @@
+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';
-const Z_INDEX = 1000;
-export const NavWrapper = styled(Animated.View)(({ theme: { semantic, core }, collapsed }) => css `
-    width: 100%;
-    position: absolute;
-
-    /* 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 */
-    z-index: ${Z_INDEX};
-    background-color: ${semantic.surface.base};
-
-    ${collapsed
-    ? css `
-          border-bottom-width: ${numToPx(core.borderWidth.small)};
-          border-bottom-style: solid;
-          border-bottom-color: ${semantic.border.differentiated};
-        `
-    : ''}
-  `);
-export const NavContainer = styled.View(({ theme: { core }, topOffset, titleVisible }) => css `
-    position: absolute;
-
-    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */
-    z-index: ${Z_INDEX + 1};
-    width: ${titleVisible ? '100%' : '50%'};
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    padding-top: ${topOffset
-    ? topOffset
-    : numToPx(core.space[titleVisible ? 2 : 4])};
-    padding-bottom: ${numToPx(core.space[titleVisible ? 2 : 4])};
-    padding-left: ${numToPx(core.space[4])};
-    padding-right: ${numToPx(core.space[4])};
-  `);
-export const ExpandedTitle = styled(Animated.Text)(({ theme: { core, semantic }, hasBackButton, fullWidth, titleVisible, }) => css `
-    width: ${fullWidth ? '100%' : '65%'};
-    font-family: ${core.fontFamily.heading.native};
-    font-size: ${numToPx(core.fontSize.heading1[hasBackButton ? 'small' : 'large'])};
-    line-height: ${numToPx(hasBackButton ? core.lineHeight.heading1.small : core.space[13])};
-    color: ${semantic.message.branded};
-    ${!titleVisible && 'height: 0;'};
-  `);
-export const CollapsedTitleWrapper = styled(Animated.View)(({ titleVisible }) => `
-  width: ${titleVisible ? '33.3%' : '0'};
-  align-items: center;
-  justify-content: center;
-`);
-export const CollapsedTitle = styled(Animated.Text)(({ theme: { core, semantic } }) => css `
-    font-family: ${core.fontFamily.heading.native};
-    font-size: ${numToPx(core.fontSize.heading4.small)};
-    line-height: ${numToPx(core.lineHeight.heading4.small)};
-    color: ${semantic.message.branded};
-  `);
-export const IconButtonWrapper = styled.View `
-  width: 33.3%;
-  flex-direction: row;
-  justify-content: flex-end;
-`;
-const iconButtonSharedStyles = css(({ theme: { semantic } }) => `
-    border-radius: 100px;
-    background-color: ${semantic.inverted.surface};
-    align-items: center;
-    justify-content: center;
-`);
-export const StyledIconButtonS = styled(Animated.View) `
-  width: 28px;
-  height: 28px;
-  opacity: ${({ $pressed }) => ($pressed ? 0.8 : 1)};
-  ${iconButtonSharedStyles};
-`;
-export const StyledIconButtonL = styled(Animated.View) `
-  width: 36px;
-  height: 36px;
-  opacity: ${({ $pressed }) => ($pressed ? 0.8 : 1)};
-  ${iconButtonSharedStyles};
-`;
-export const ActionWrapper = styled.View(({ theme: { core }, collapsed }) => css `
-    margin-bottom: ${collapsed ? '0' : numToPx(core.space[2])};
-  `);
+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
+        ? 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,81 +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 { useState } from 'react';
+import { forwardRef, useState } from 'react';
 import { View } from 'react-native';
 import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon';
-const NotificationBox = styled.View(({ theme: { core, semantic }, noMargin }) => {
-    return css `
-    position: relative;
-    margin-bottom: ${noMargin ? 0 : numToPx(core.space[4])};
-    border: ${numToPx(core.borderWidth.small)} solid
-      ${semantic.surface.elevated};
-    border-radius: ${numToPx(core.radius.max)};
-    overflow: hidden;
-  `;
+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 const NotificationContentBox = styled.View(({ theme: { core, semantic } }) => {
-    return css `
-      background-color: ${semantic.surface.elevated};
-      padding-top: ${numToPx(core.space[2])};
-      padding-bottom: ${numToPx(core.space[3])};
-      padding-left: ${numToPx(core.space[4])};
-      padding-right: ${numToPx(core.space[4])};
-    `;
+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 const NotificationTitleBox = styled.View(({ theme: { core, semantic }, variant, dismissible }) => {
-    const currentVariant = semantic[variant];
-    return css `
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    background-color: ${currentVariant.surface};
-    padding-top: ${numToPx(core.space[2])};
-    padding-bottom: ${numToPx(core.space[2])};
-    padding-left: ${numToPx(core.space[4])};
-    padding-right: ${dismissible
-        ? numToPx(core.space[3])
-        : numToPx(core.space[4])};
-    min-height: 44px;
-  `;
+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]));
 });
-const NotificationTitleText = styled.Text(({ theme: { core, semantic }, variant }) => {
-    const currentVariant = semantic[variant];
-    return css `
-    font-size: ${numToPx(core.fontSize.body.small)};
-    font-family: ${core.fontFamily.bodyBold.native};
-    color: ${currentVariant.message};
-  `;
+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);
 });
-const DismissButton = styled.TouchableOpacity(({ theme: { core, semantic } }) => {
-    return css `
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 28px;
-      height: 28px;
-      background: ${semantic.inverted.surface};
-      border: ${numToPx(core.borderWidth.small)} solid
-        ${core.color.brand.forest};
-      border-radius: ${numToPx(core.radius.max)};
-    `;
+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']));
 });
-const StyledIcon = styled(Icon)(({ theme: { semantic } }) => `
-    color: ${semantic.inverted.message.base};
-  `);
-export const Notification = ({ variant = 'neutral', children, title, noMargin, dismissible, onDismiss, ref, ...rest }) => {
-    const [dismissed, setDismissed] = useState(false);
+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, { 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: () => {
+    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 const ErrorNotification = (props) => (_jsx(Notification, { variant: "error", ...props }));
-export const SuccessNotification = (props) => (_jsx(Notification, { variant: "success", ...props }));
-export const InfoNotification = (props) => (_jsx(Notification, { variant: "info", ...props }));
-export const WarningNotification = (props) => (_jsx(Notification, { variant: "warning", ...props }));
+                            }, 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/NumberField/NumberField.js

@@ -1,6 +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 const NumberField = ({ ref, ...rest }) => {
-    return (_jsx(Field, { ...rest, children: _jsx(NumberInput, { ref: ref }) }));
-};
+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,4 +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';
-const NumberInput = (props) => (_jsx(Input, { keyboardType: "numeric", autoCapitalize: "none", autoCorrect: false, ...props }));
+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,14 +1,31 @@
+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';
-const StyledP = styled.Text(({ theme: { core, semantic }, smallAndUp, inverted }) => css `
-    font-family: ${core.fontFamily.body.native};
-    font-size: ${numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small'])};
-    line-height: ${numToPx(core.lineHeight.body[smallAndUp ? 'large' : 'small'])};
-    color: ${inverted ? semantic.inverted.message.base : semantic.message.base};
-  `);
-export const P = (props) => {
-    const breakpoints = useBreakpoint();
-    return _jsx(StyledP, { ...props, ...breakpoints });
-};
+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,6 +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 const PasswordField = ({ hasVisibilityToggle, ref, ...rest }) => {
-    return (_jsx(Field, { ...rest, children: _jsx(PasswordInput, { hasVisibilityToggle: hasVisibilityToggle, ref: ref }) }));
-};
+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,8 +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';
-const PasswordInput = ({ hasVisibilityToggle, ...props }) => {
-    const { isPasswordVisible, handlePasswordVisibility } = useTogglePasswordVisibility();
-    return (_jsx(Input, { rightSlot: 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, ...props }));
-};
+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,14 +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 const StyledPressable = styled(Pressable)(({ theme: { core }, focused, }) => {
-    return css `
-    display: flex;
-    align-items: center;
-    position: absolute;
-    width: ${numToPx(core.space[4])};
-    z-index: 1;
-    top: ${focused ? '16px' : '14px'};
-    right: ${numToPx(core.space[3])};
-  `;
+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;