@ovotech/element-native 2.2.0-canary-668a0ee-91 → 2.2.0

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

@@ -20,12 +20,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { useBreakpoint } from '../../hooks';
 import styled from '../../styled.native';
 import { responsiveStyle } from '../../utils';
 var StyledMargin = styled.View(function (_a) {
-    var space = _a.theme.core.space, mTop = _a.mTop, mBottom = _a.mBottom, mLeft = _a.mLeft, mRight = _a.mRight, horizontal = _a.horizontal, vertical = _a.vertical, all = _a.all, breakpoints = _a.breakpoints;
+    var space = _a.theme.space, mTop = _a.mTop, mBottom = _a.mBottom, mLeft = _a.mLeft, mRight = _a.mRight, horizontal = _a.horizontal, vertical = _a.vertical, all = _a.all, breakpoints = _a.breakpoints;
     var formatter = function (spaceKey) {
         return spaceKey === 0 ? '0' : space[spaceKey];
     };
@@ -42,6 +42,6 @@ var StyledMargin = styled.View(function (_a) {
 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 })));
+    return (React.createElement(StyledMargin, __assign({}, rest, { breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right })));
 };
 export { Margin };

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

@@ -2,62 +2,60 @@ 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, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import Animated, { FadeIn, FadeOut, Layout } from 'react-native-reanimated';
 import { Path, Svg } from 'react-native-svg';
 import styled, { css } from '../../styled.native';
 import { Heading3, Heading4 } from '../Heading';
 var BackIcon = function () {
-    return (_jsx(Svg, __assign({ width: "10", height: "16", viewBox: "0 0 10 16" }, { children: _jsx(Path, { d: "M0.579956 8L8.57996 16L9.99996 14.58L3.41996 8L9.99996 1.42L8.57996 0L0.579956 8Z", fill: "white" }) })));
+    return (React.createElement(Svg, { width: "10", height: "16", viewBox: "0 0 10 16" },
+        React.createElement(Path, { d: "M0.579956 8L8.57996 16L9.99996 14.58L3.41996 8L9.99996 1.42L8.57996 0L0.579956 8Z", fill: "white" })));
 };
 var StyledText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n  "], ["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n  "])), semantic.inverted.message.base, core.fontSize.small.small, core.fontFamily.body.native);
+    var _b = _a.theme, colors = _b.colors, fonts = _b.fonts, fontSizes = _b.fontSizes;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n  "], ["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n  "])), colors.primaryContrast, fontSizes[1], fonts.body);
 });
 var LeftHeaderText = styled(StyledText)(function (_a) {
-    var core = _a.theme.core;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-left: ", ";\n  "], ["\n    padding-left: ", ";\n  "])), core.space[2]);
+    var space = _a.theme.space;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-left: ", ";\n  "], ["\n    padding-left: ", ";\n  "])), space[2]);
 });
 var HeadlineView = styled(Animated.View)(function (_a) {
-    var core = _a.theme.core;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: 0 ", " ", ";\n  "], ["\n    padding: 0 ", " ", ";\n  "])), core.space[3], core.space[3]);
+    var space = _a.theme.space;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: 0 ", " ", ";\n  "], ["\n    padding: 0 ", " ", ";\n  "])), space[3], space[3]);
 });
 var RootView = styled.View(function (_a) {
-    var semantic = _a.theme.semantic;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n  "])), semantic.message.branded);
+    var colors = _a.theme.colors;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n  "])), colors.primary);
 });
 var StyledView = styled(Animated.View)(function (_a) {
-    var core = _a.theme.core, marginTop = _a.marginTop;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "], ["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "])), core.space[3], core.space[2], marginTop !== null && marginTop !== void 0 ? marginTop : 0);
+    var space = _a.theme.space, marginTop = _a.marginTop;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "], ["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "])), space[3], space[2], marginTop !== null && marginTop !== void 0 ? marginTop : 0);
 });
 var StyledHeading4 = styled(Heading4)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, textAlign = _a.textAlign;
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-family: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "], ["\n    font-family: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "])), core.fontFamily.bodyBold.native, semantic.inverted.message.base, textAlign);
+    var _b = _a.theme, fonts = _b.fonts, colors = _b.colors, textAlign = _a.textAlign;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-family: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "], ["\n    font-family: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "])), fonts.bold, colors.primaryContrast, textAlign);
 });
 var StyledHeading3 = styled(Heading3)(function (_a) {
-    var semantic = _a.theme.semantic;
-    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "], ["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "])), semantic.inverted.message.base);
+    var colors = _a.theme.colors;
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "], ["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "])), colors.primaryContrast);
 });
 export var NavHeader = function (_a) {
     var options = _a.options, headline = _a.headline;
-    return (_jsxs(RootView, __assign({ layout: Layout === null || Layout === void 0 ? void 0 : Layout.duration(150) }, { children: [_jsxs(StyledView, __assign({ marginTop: options === null || options === void 0 ? void 0 : options.statusBarHeight }, { children: [(options === null || options === void 0 ? void 0 : options.headerLeft) ? (options === null || options === void 0 ? void 0 : options.headerLeft()) : (options === null || options === void 0 ? void 0 : options.canGoBack()) ? (_jsxs(TouchableOpacity, __assign({ style: {
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            flex: 1,
-                            flexGrow: 1,
-                            flexShrink: 1,
-                        }, onPress: options === null || options === void 0 ? void 0 : options.goBack }, { children: [_jsx(BackIcon, {}), _jsx(LeftHeaderText, { children: "Back" })] }))) : null, _jsx(Animated.View, __assign({ entering: FadeIn, exiting: FadeOut, style: { flex: 1, flexGrow: 3, flexShrink: 1 } }, { children: _jsx(StyledHeading4, __assign({ textAlign: (options === null || options === void 0 ? void 0 : options.canGoBack()) ? 'center' : 'left', numberOfLines: 1 }, { children: !headline ? options === null || options === void 0 ? void 0 : options.title : ' ' })) })), _jsx(View, __assign({ style: { flex: 1, flexGrow: 1, flexShrink: 1 } }, { children: options.headerRight ? options.headerRight() : null }))] })), headline ? (_jsx(HeadlineView, __assign({ entering: FadeIn, exiting: FadeOut }, { children: (options === null || options === void 0 ? void 0 : options.title) ? (_jsx(StyledHeading3, { children: options.title })) : null }))) : null] })));
+    return (React.createElement(RootView, { layout: Layout === null || Layout === void 0 ? void 0 : Layout.duration(150) },
+        React.createElement(StyledView, { marginTop: options === null || options === void 0 ? void 0 : options.statusBarHeight },
+            (options === null || options === void 0 ? void 0 : options.headerLeft) ? (options === null || options === void 0 ? void 0 : options.headerLeft()) : (options === null || options === void 0 ? void 0 : options.canGoBack()) ? (React.createElement(TouchableOpacity, { style: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    flex: 1,
+                    flexGrow: 1,
+                    flexShrink: 1,
+                }, onPress: options === null || options === void 0 ? void 0 : options.goBack },
+                React.createElement(BackIcon, null),
+                React.createElement(LeftHeaderText, null, "Back"))) : null,
+            React.createElement(Animated.View, { entering: FadeIn, exiting: FadeOut, style: { flex: 1, flexGrow: 3, flexShrink: 1 } },
+                React.createElement(StyledHeading4, { textAlign: (options === null || options === void 0 ? void 0 : options.canGoBack()) ? 'center' : 'left', numberOfLines: 1 }, !headline ? options === null || options === void 0 ? void 0 : options.title : ' ')),
+            React.createElement(View, { style: { flex: 1, flexGrow: 1, flexShrink: 1 } }, options.headerRight ? options.headerRight() : null)),
+        headline ? (React.createElement(HeadlineView, { entering: FadeIn, exiting: FadeOut }, (options === null || options === void 0 ? void 0 : options.title) ? (React.createElement(StyledHeading3, null, options.title)) : null)) : null));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -24,52 +24,69 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
+import React, { forwardRef, useContext, useState, } from 'react';
 import { View } from 'react-native';
-import styled, { css } from '../../styled.native';
+import { useBreakpoint } from '../../hooks';
+import styled, { css, ThemeContext } from '../../styled.native';
 import { Icon } from '../Icon';
+var pxToNumber = function (value) { return parseInt(value.replace('px', '')); };
+var numberToPx = function (value) { return "".concat(value, "px"); };
 var NotificationBox = styled.View(function (_a) {
-    var core = _a.theme.core, noMargin = _a.noMargin;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    border: ", " solid ", ";\n    border-radius: ", ";\n    margin-bottom: ", ";\n    overflow: hidden;\n  "], ["\n    position: relative;\n    border: ", " solid ", ";\n    border-radius: ", ";\n    margin-bottom: ", ";\n    overflow: hidden;\n  "])), core.borderWidth.medium, core.color.brand.white, core.radius.small, noMargin ? 0 : core.space[4]);
+    var _b = _a.theme, colors = _b.colors, notification = _b.notification, space = _b.space, variant = _a.variant, noMargin = _a.noMargin;
+    // @ts-ignore
+    var currentVariant = notification.variants[variant];
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    border: ", " solid ", ";\n    border-radius: ", ";\n    margin-bottom: ", ";\n    background-color: ", ";\n  "], ["\n    position: relative;\n    border: ", " solid ", ";\n    border-radius: ", ";\n    margin-bottom: ", ";\n    background-color: ", ";\n  "])), notification.borderWidth, currentVariant.borderColor, notification.borderRadius, noMargin ? 0 : space[4], colors.canvas);
 });
 export var NotificationContentBox = styled.View(function (_a) {
-    var core = _a.theme.core;
-    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  "])), core.color.brand.white, core.space[2], core.space[3], core.space[4], core.space[4]);
+    var _b = _a.theme, colors = _b.colors, _c = _b.notification, paddingX = _c.paddingX, paddingY = _c.paddingY, variants = _c.variants, smallAndUp = _a.smallAndUp, variant = _a.variant;
+    // @ts-ignore
+    var currentVariant = variants[variant];
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding: ", " ", ";\n\n      a {\n        color: ", ";\n        :hover {\n          color: ", ";\n        }\n      }\n      ul {\n        list-style-type: square;\n      }\n      li {\n        color: ", ";\n      }\n    "], ["\n      padding: ", " ", ";\n\n      a {\n        color: ", ";\n        :hover {\n          color: ", ";\n        }\n      }\n      ul {\n        list-style-type: square;\n      }\n      li {\n        color: ", ";\n      }\n    "])), paddingX[smallAndUp ? 1 : 0], paddingY[smallAndUp ? 1 : 0], currentVariant.textColor, colors.body, currentVariant.textColor);
 });
 export var NotificationTitleBox = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, variant = _a.variant, dismissible = _a.dismissible;
-    var currentVariant = semantic[variant];
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), currentVariant.surface, core.space[2], core.space[2], core.space[4], dismissible ? core.space[3] : core.space[4]);
+    var notification = _a.theme.notification, variant = _a.variant, dismissable = _a.dismissable, smallAndUp = _a.smallAndUp;
+    // @ts-ignore to support additional palettes.
+    var currentVariant = notification.variants[variant];
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), currentVariant.background, notification.paddingX[smallAndUp ? 1 : 0], notification.paddingX[smallAndUp ? 1 : 0], notification.paddingY[smallAndUp ? 1 : 0], dismissable
+        ? numberToPx(pxToNumber(notification.dismiss.touchSize) -
+            pxToNumber(notification.dismiss.size))
+        : notification.paddingY[smallAndUp ? 1 : 0]);
 });
 var NotificationTitleText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, variant = _a.variant;
-    var currentVariant = semantic[variant];
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "])), core.fontSize.body.small, core.fontFamily.bodyBold.native, currentVariant.message);
+    var _b = _a.theme, fonts = _b.fonts, responsiveFontSizes = _b.responsiveFontSizes, notification = _b.notification, variant = _a.variant;
+    // @ts-ignore
+    var currentVariant = notification.variants[variant];
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n  "])), currentVariant.textColor, fonts.bold, responsiveFontSizes.body[0]);
 });
-var DismissButton = styled.TouchableOpacity(function () {
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    width: 16px;\n    height: 16px;\n    margin-left: auto;\n  "], ["\n    width: 16px;\n    height: 16px;\n    margin-left: auto;\n  "])));
-});
-var StyledIcon = styled(Icon)(function (_a) {
-    var semantic = _a.theme.semantic, variant = _a.variant;
-    var currentVariant = semantic[variant];
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), currentVariant.message);
+var DismissButton = styled.TouchableOpacity(function (_a) {
+    var notification = _a.theme.notification;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: ", ";\n    height: ", ";\n    align-items: center;\n    justify-content: center;\n  "], ["\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: ", ";\n    height: ", ";\n    align-items: center;\n    justify-content: center;\n  "])), notification.dismiss.touchSize, notification.dismiss.touchSize);
 });
 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 _b = _a.variant, variant = _b === void 0 ? 'info' : _b, children = _a.children, title = _a.title, noMargin = _a.noMargin, dismissable = _a.dismissable, onDismiss = _a.onDismiss, rest = __rest(_a, ["variant", "children", "title", "noMargin", "dismissable", "onDismiss"]);
+    var breakpoints = useBreakpoint();
+    var theme = useContext(ThemeContext);
     var _c = useState(false), dismissed = _c[0], setDismissed = _c[1];
-    if (dismissed || !children) {
+    if (dismissed || (!title && !children)) {
         return null;
     }
-    return (_jsx(View, __assign({ ref: ref }, rest, { children: _jsxs(NotificationBox, __assign({ noMargin: noMargin, testID: "nb-notification" }, { children: [_jsxs(NotificationTitleBox, __assign({ variant: variant, dismissible: dismissible }, { children: [_jsx(NotificationTitleText, __assign({ variant: variant }, { children: title })), dismissible ? (_jsx(DismissButton, __assign({ accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
-                                setDismissed(true);
-                                if (onDismiss) {
-                                    onDismiss();
-                                }
-                            } }, { children: _jsx(StyledIcon, { variant: variant, name: "cross", size: "16" }) }))) : null] })), children ? (_jsx(NotificationContentBox, __assign({ "data-testid": "el-notification-box" }, { children: children }))) : null] })) })));
+    return (React.createElement(View, __assign({ ref: ref }, rest),
+        React.createElement(NotificationBox, __assign({ variant: variant, noMargin: noMargin, testID: "nb-notification" }, breakpoints),
+            !!title ? (React.createElement(NotificationTitleBox, __assign({ variant: variant, dismissable: dismissable }, breakpoints),
+                React.createElement(View, null, typeof title === 'string' ? (React.createElement(NotificationTitleText, { variant: variant }, title)) : (title)))) : null,
+            dismissable ? (React.createElement(DismissButton, { accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
+                    setDismissed(true);
+                    if (onDismiss) {
+                        onDismiss();
+                    }
+                } },
+                React.createElement(Icon, { name: theme.notification.dismiss.icon, size: theme.notification.dismiss.size, 
+                    // @ts-ignore
+                    color: theme.notification.variants[variant].textColor }))) : null,
+            children ? (React.createElement(NotificationContentBox, __assign({ "data-testid": "el-notification-box", variant: variant }, breakpoints), 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, templateObject_6;
+export var ErrorNotification = forwardRef(function (props, ref) { return (React.createElement(Notification, __assign({ ref: ref, variant: "error", title: "Oops, there\u2019s a problem\u2026" }, props))); });
+export var SuccessNotification = forwardRef(function (props, ref) { return (React.createElement(Notification, __assign({ ref: ref, variant: "success" }, props))); });
+export var InfoNotification = forwardRef(function (props, ref) { return React.createElement(Notification, __assign({ ref: ref, variant: "info" }, props)); });
+export var WarningNotification = forwardRef(function (props, ref) { return React.createElement(Notification, __assign({ ref: ref, variant: "warning" }, props)); });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/esm/components/Radio/Radio.js

@@ -1,3 +1,7 @@
+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++) {
@@ -20,42 +24,60 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { TouchableOpacity, View, } from 'react-native';
 import styled from '../../styled.native';
+import { pxToNumber } from '../../utils';
 import { HintText } from '../HintText';
 import { LabelText } from '../LabelText';
 var StyledRadioInputWrapper = styled.View(function (_a) {
-    var core = _a.theme.core;
-    return "\n      width: ".concat(core.space[6], ";\n      height: ").concat(core.space[6], ";\n      margin-right: 10px;\n    ");
+    var radio = _a.theme.radio;
+    var radioSize = pxToNumber(radio.size);
+    var gap = pxToNumber(radio.gap);
+    return "\n      width: ".concat(radioSize + gap, "px;\n      height: ").concat(radio.touchSize, ";\n    ");
 });
 var StyledRadioInput = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;
-    return "\n      width: ".concat(core.space[6], ";\n      height: ").concat(core.space[6], ";\n      border: ").concat(core.borderWidth.small, " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: 50%;\n      border-color: ").concat(invalid
-        ? semantic.error.border
+    var radio = _a.theme.radio, invalid = _a.invalid, checked = _a.checked;
+    var touchSize = pxToNumber(radio.touchSize);
+    var radioSize = pxToNumber(radio.size);
+    var radioDistance = (touchSize - radioSize) / 2;
+    return "\n      width: ".concat(radio.size, ";\n      height: ").concat(radio.size, ";\n      border: ").concat(radio.borderWidth, " solid;\n      margin-top: ").concat(radioDistance, "px;\n      border-radius: ").concat(radioSize / 2, "px;\n      border-color: ").concat(invalid
+        ? radio.errorColor
         : checked
-            ? core.color.blue.dark
-            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
+            ? radio.dotColor
+            : radio.borderColor, ";\n      background: ").concat(radio.background, ";\n      background: ").concat(checked ? radio.checkedBackground : radio.background, ";\n    ");
 });
 var StyledRadioInputDot = styled.View(function (_a) {
-    var core = _a.theme.core, checked = _a.checked;
-    return "\n      width: ".concat(core.space[3], ";\n      height: ").concat(core.space[3], ";\n      border-radius: 50%;\n      background: ").concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+    var radio = _a.theme.radio, checked = _a.checked;
+    var radioSize = pxToNumber(radio.size);
+    var dotSize = pxToNumber(radio.dotSize);
+    var borderWidth = pxToNumber(radio.borderWidth);
+    var dotDistance = (radioSize - dotSize) / 2 - borderWidth;
+    return "\n      width: ".concat(radio.dotSize, ";\n      height: ").concat(radio.dotSize, ";\n      margin: ").concat(dotDistance, "px;\n      border-radius: ").concat(radioSize / 2, "px;\n      background: ").concat(radio.dotColor, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
 });
 var Input = function (_a) {
     var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
-    return (_jsx(StyledRadioInputWrapper, __assign({}, rest, { children: _jsx(StyledRadioInput, __assign({ invalid: invalid, checked: checked, testID: testID }, { children: _jsx(StyledRadioInputDot, { checked: checked }) })) })));
+    return (React.createElement(StyledRadioInputWrapper, __assign({}, rest),
+        React.createElement(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID },
+            React.createElement(StyledRadioInputDot, { checked: checked }))));
 };
-var StyledWrapper = styled.View(function (_a) {
-    var core = _a.theme.core;
-    return "\n    padding-top: ".concat(core.space[3], ";\n    flex-direction: row;\n  ");
+var RadioLabelText = styled(LabelText)(function (_a) {
+    var space = _a.theme.space;
+    return "\n    padding-top: ".concat(space[3], ";\n  ");
 });
+var StyledWrapper = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
 var Radio = forwardRef(function (_a, ref) {
     var label = _a.label, hint = _a.hint, checked = _a.checked, invalid = _a.invalid, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     value = _a.value, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
     _b = _a.activeOpacity, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
     activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "activeOpacity", "testID"]);
-    return (_jsx(TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: _jsxs(StyledWrapper, { children: [_jsx(Input, { checked: checked, invalid: invalid, testID: testID }), _jsxs(View, __assign({ style: { flexShrink: 1 } }, { children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] }))] }) })));
+    return (React.createElement(TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest),
+        React.createElement(StyledWrapper, null,
+            React.createElement(Input, { checked: checked, invalid: invalid, testID: testID }),
+            React.createElement(View, { style: { flexShrink: 1 } },
+                React.createElement(RadioLabelText, null, label),
+                hint ? React.createElement(HintText, null, hint) : null))));
 });
 export { Radio };
+var templateObject_1;

package/dist/esm/components/Radio/RadioField.js

@@ -20,8 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Children, cloneElement } from 'react';
+import React, { Children, cloneElement, } from 'react';
 import { View } from 'react-native';
 import { callAll } from '../../utils';
 import { ErrorText } from '../ErrorText';
@@ -32,14 +31,22 @@ import { Stack } from '../Stack';
 var RadioField = function (_a) {
     var label = _a.label, hint = _a.hint, error = _a.error, children = _a.children, _b = _a.optional, optional = _b === void 0 ? false : _b, value = _a.value, onValueChange = _a.onValueChange, rest = __rest(_a, ["label", "hint", "error", "children", "optional", "value", "onValueChange"]);
     var hasError = !!error;
-    return (_jsx(FormGroup, __assign({}, rest, { error: hasError }, { children: _jsxs(Stack, __assign({ spaceBetween: 1 }, { children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsx(View, __assign({ accessibilityRole: "radiogroup" }, { children: Children.map(children, function (child) {
-                        return cloneElement(child, {
-                            invalid: hasError ? true : child.props.invalid,
-                            checked: child.props.checked != null
-                                ? child.props.checked
-                                : value && (value === child.props.value ? true : false),
-                            onPress: callAll(onValueChange && (function () { return onValueChange(child.props.value); }), child.props.onPress),
-                        });
-                    }) }))] })) })));
+    return (React.createElement(FormGroup, __assign({}, rest, { error: hasError }),
+        React.createElement(Stack, { spaceBetween: 1 },
+            React.createElement(View, null,
+                React.createElement(LabelText, null,
+                    label,
+                    optional ? ' (optional)' : null),
+                hint ? React.createElement(HintText, null, hint) : null,
+                error ? React.createElement(ErrorText, null, error) : null),
+            React.createElement(View, { accessibilityRole: "radiogroup" }, Children.map(children, function (child) {
+                return cloneElement(child, {
+                    invalid: hasError ? true : child.props.invalid,
+                    checked: child.props.checked != null
+                        ? child.props.checked
+                        : value && (value === child.props.value ? true : false),
+                    onPress: callAll(onValueChange && (function () { return onValueChange(child.props.value); }), child.props.onPress),
+                });
+            })))));
 };
 export { RadioField };

package/dist/esm/components/SkeletonLoading/SkeletonAnimation.js

@@ -1,16 +1,4 @@
-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 { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { View, Animated, Platform } from 'react-native';
 export var SkeletonAnimation = function (_a) {
     var children = _a.children, _b = _a.animation, animation = _b === void 0 ? 'pulse' : _b, testID = _a.testID;
@@ -29,14 +17,14 @@ export var SkeletonAnimation = function (_a) {
         animationRef.current.setValue(0);
         Animated.loop(animationLoop.current).start();
     }, []);
-    return (_jsx(View, __assign({ accessibilityRole: "none", accessibilityLabel: "loading...", accessible: false, testID: testID }, { children: animation === 'pulse' ? (_jsx(Animated.View, __assign({ style: [
-                {
-                    height: '100%',
-                    width: '100%',
-                    opacity: animationRef.current.interpolate({
-                        inputRange: [0.25, 1, 2],
-                        outputRange: [1, 0.25, 1],
-                    }),
-                },
-            ] }, { children: children }))) : (_jsx(View, { children: children })) })));
+    return (React.createElement(View, { accessibilityRole: "none", accessibilityLabel: "loading...", accessible: false, testID: testID }, animation === 'pulse' ? (React.createElement(Animated.View, { style: [
+            {
+                height: '100%',
+                width: '100%',
+                opacity: animationRef.current.interpolate({
+                    inputRange: [0.25, 1, 2],
+                    outputRange: [1, 0.25, 1],
+                }),
+            },
+        ] }, children)) : (React.createElement(View, null, children))));
 };

package/dist/esm/components/SkeletonLoading/SkeletonCTA.js

@@ -20,16 +20,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import styled from '../../styled.native';
 import { P } from '../Text';
 import { Skeleton } from './Skeleton';
 import { SkeletonAnimation } from './SkeletonAnimation';
 var StyledSkeletonCTA = styled(Skeleton)(function (_a) {
-    var core = _a.theme.core, size = _a.size;
-    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    width: ").concat(size, ";\n    height: ").concat(core.space[12], ";\n  ");
+    var _b = _a.theme, colors = _b.colors, space = _b.space, size = _a.size;
+    return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n    height: ").concat(space[12], ";\n  ");
 });
 export var SkeletonCTA = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);
-    return (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonCTA, __assign({ as: P, size: size }, rest)) }));
+    return (React.createElement(SkeletonAnimation, null,
+        React.createElement(StyledSkeletonCTA, __assign({ as: P, size: size }, rest))));
 };

package/dist/esm/components/SkeletonLoading/SkeletonCircle.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import styled from '../../styled.native';
 import { pxToNumber } from '../../utils';
 import { Skeleton } from './Skeleton';
@@ -30,10 +30,12 @@ var StyledSkeletonCircleWrapper = styled(Skeleton)(function (_a) {
     return "width: ".concat(size, "; max-width: 100%;");
 });
 var StyledSkeletonCircle = styled(Skeleton)(function (_a) {
-    var core = _a.theme.core, size = _a.size;
-    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    height: 0;\n    padding-bottom: 100%;\n    border-radius: ").concat(pxToNumber(size) / 2, "px;\n  ");
+    var colors = _a.theme.colors, size = _a.size;
+    return "\n    background-color: ".concat(colors.borderMuted, ";\n    height: 0;\n    padding-bottom: 100%;\n    border-radius: ").concat(pxToNumber(size) / 2, "px;\n  ");
 });
 export var SkeletonCircle = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["size"]);
-    return (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonCircleWrapper, __assign({ size: size }, rest, { children: _jsx(StyledSkeletonCircle, { size: size }) })) }));
+    return (React.createElement(SkeletonAnimation, null,
+        React.createElement(StyledSkeletonCircleWrapper, __assign({ size: size }, rest),
+            React.createElement(StyledSkeletonCircle, { size: size }))));
 };

package/dist/esm/components/SkeletonLoading/SkeletonHeading.js

@@ -20,16 +20,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import styled from '../../styled.native';
 import { Heading3 } from '../Heading';
 import { Skeleton } from './Skeleton';
 import { SkeletonAnimation } from './SkeletonAnimation';
 var StyledSkeletonHeading = styled(Skeleton)(function (_a) {
-    var core = _a.theme.core, size = _a.size;
-    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    width: ").concat(size, ";\n  ");
+    var colors = _a.theme.colors, size = _a.size;
+    return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n  ");
 });
 export var SkeletonHeading = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);
-    return (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest, { children: "\u00A0" })) }));
+    return (React.createElement(SkeletonAnimation, null,
+        React.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0")));
 };

package/dist/esm/components/SkeletonLoading/SkeletonText.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { useBreakpoint } from '../../hooks';
 import styled from '../../styled.native';
 import { responsiveStyle } from '../../utils';
@@ -28,15 +28,15 @@ import { P } from '../Text';
 import { Skeleton } from './Skeleton';
 import { SkeletonAnimation } from './SkeletonAnimation';
 var StyledSkeletonText = styled(Skeleton)(function (_a) {
-    var core = _a.theme.core, short = _a.short, breakpoints = _a.breakpoints;
-    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    margin-bottom: ").concat(core.space[2], ";\n    ").concat(responsiveStyle('height', core.fontSize.body, breakpoints), "\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
+    var _b = _a.theme, colors = _b.colors, space = _b.space, responsiveFontSizes = _b.responsiveFontSizes, short = _a.short, breakpoints = _a.breakpoints;
+    return "\n    background-color: ".concat(colors.borderMuted, ";\n    margin-bottom: ").concat(space[2], ";\n    ").concat(responsiveStyle('height', responsiveFontSizes.body, breakpoints), "\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
 });
 export var SkeletonText = function (_a) {
     var _b = _a.lines, lines = _b === void 0 ? 1 : _b, rest = __rest(_a, ["lines"]);
     var breakpoints = useBreakpoint();
     var generatedLines = [];
     for (var i = 1; i <= lines; i++) {
-        generatedLines.push(_jsx(StyledSkeletonText, { short: i === lines, breakpoints: breakpoints }, "line-".concat(i)));
+        generatedLines.push(React.createElement(StyledSkeletonText, { key: "line-".concat(i), short: i === lines, breakpoints: breakpoints }));
     }
-    return (_jsx(P, __assign({ as: SkeletonAnimation }, rest, { children: generatedLines })));
+    return (React.createElement(P, __assign({ as: SkeletonAnimation }, rest), generatedLines));
 };

package/dist/esm/components/Stack/Stack.js

@@ -20,8 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Children } from 'react';
+import React, { Children } from 'react';
 import { View } from 'react-native';
 import styled from '../../styled.native';
 import { responsiveStyle, styledComponentWithBreakpoints } from '../../utils';
@@ -33,12 +32,12 @@ var Stack = function (_a) {
             filteredChildren.push(child);
         }
     });
-    return (_jsx(View, __assign({}, rest, { children: Children.map(filteredChildren, function (child, index) {
-            return index === 0 ? (child) : (_jsx(StackItem, __assign({ spaceBetween: spaceBetween }, { children: child })));
-        }) })));
+    return (React.createElement(View, __assign({}, rest), Children.map(filteredChildren, function (child, index) {
+        return index === 0 ? (child) : (React.createElement(StackItem, { spaceBetween: spaceBetween }, child));
+    })));
 };
 var StyledStackItem = styled.View(function (_a) {
-    var space = _a.theme.core.space, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
+    var space = _a.theme.space, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
     var formatter = function (spaceKey) { return space[spaceKey]; };
     var breakpoints = { smallAndUp: smallAndUp, mediumAndUp: mediumAndUp, largeAndUp: largeAndUp };
     return responsiveStyle('margin-top', spaceBetween, breakpoints, formatter);

package/dist/esm/components/Stretch/Stretch.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { useBreakpoint } from '../../hooks';
 import styled from '../../styled.native';
 var StyledStretch = styled.View(function (_a) {
@@ -20,5 +20,5 @@ var StyledStretch = styled.View(function (_a) {
 });
 export var Stretch = function (props) {
     var smallAndUp = useBreakpoint().smallAndUp;
-    return _jsx(StyledStretch, __assign({ smallAndUp: smallAndUp }, props));
+    return React.createElement(StyledStretch, __assign({ smallAndUp: smallAndUp }, props));
 };

package/dist/esm/components/SubLabelText/SubLabelText.js

@@ -3,13 +3,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { css } from '../../styled.native';
+import { calculateLineHeight } from '../../theme';
 import { styledComponentWithBreakpoints } from '../../utils';
 var StyledSubLabelText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), core.fontFamily.body.native, core.lineHeight.body.small, semantic.message.secondary, fontSize);
+    var field = _a.theme.field, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), field.fontFamily, calculateLineHeight(fontSize, field.lineHeight), field.subLabel.color, fontSize);
 });
 var SubLabelText = styledComponentWithBreakpoints(StyledSubLabelText);
 export { SubLabelText };