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

package/dist/components/Notification/Notification.d.ts

@@ -1,6 +1,12 @@
-import { ComponentProps, ReactNode } from 'react';
+import React, { ComponentProps, ReactNode } from 'react';
 import { View } from 'react-native';
+import { Breakpoints } from '../../hooks';
 export declare type NotificationVariantName = 'error' | 'success' | 'info' | 'warning';
+export declare type NotificationVariant = {
+    background: string;
+    borderColor: string;
+    textColor: string;
+};
 declare type NotificationProps = Omit<ComponentProps<typeof Notification>, 'variant'>;
 export declare const NotificationContentBox: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
     core: {
@@ -8,10 +14,10 @@ export declare const NotificationContentBox: import("styled-components").StyledC
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
-        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
+        opacity: Record<"transparent" | "translucent" | "solid", string | number>;
+        color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
             lightest: string;
             lighter: string;
             light: string;
@@ -27,53 +33,71 @@ export declare const NotificationContentBox: import("styled-components").StyledC
             web: string;
         }>;
         fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
             small: string | number;
             large: string | number;
         }>;
-        lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
             small: string | number;
             large: string | number;
         }>;
-        letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
         message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
-        focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"border" | "surface", string> & {
+        focus: Record<"outline" | "surface", string>;
+        inverted: Record<"surface" | "border", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
         success: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         warning: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         error: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         info: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
+        };
+        electricity: {
+            border: string;
+            surface: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
+        };
+        gas: {
+            border: string;
+            surface: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
-        data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
     };
     component: {
         heading1: {
@@ -204,42 +228,20 @@ export declare const NotificationContentBox: import("styled-components").StyledC
                 backgroundFocused: string;
             };
         };
-        badge: {
-            variants: {
-                red: {
-                    foreground: string;
-                    background: string;
-                };
-                orange: {
-                    foreground: string;
-                    background: string;
-                };
-                yellow: {
-                    foreground: string;
-                    background: string;
-                };
-                green: {
-                    foreground: string;
-                    background: string;
-                };
-                blue: {
-                    foreground: string;
-                    background: string;
-                };
-            };
-        };
     };
-}, {}, never>;
+}, {
+    variant: NotificationVariantName | (string & {});
+} & Breakpoints, never>;
 export declare const NotificationTitleBox: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
-        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
+        opacity: Record<"transparent" | "translucent" | "solid", string | number>;
+        color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
             lightest: string;
             lighter: string;
             light: string;
@@ -255,53 +257,71 @@ export declare const NotificationTitleBox: import("styled-components").StyledCom
             web: string;
         }>;
         fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
             small: string | number;
             large: string | number;
         }>;
-        lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
             small: string | number;
             large: string | number;
         }>;
-        letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
         message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
-        focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"border" | "surface", string> & {
+        focus: Record<"outline" | "surface", string>;
+        inverted: Record<"surface" | "border", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
         success: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         warning: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         error: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         info: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
+        };
+        electricity: {
+            border: string;
+            surface: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
+        };
+        gas: {
+            border: string;
+            surface: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
-        data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
     };
     component: {
         heading1: {
@@ -432,46 +452,22 @@ export declare const NotificationTitleBox: import("styled-components").StyledCom
                 backgroundFocused: string;
             };
         };
-        badge: {
-            variants: {
-                red: {
-                    foreground: string;
-                    background: string;
-                };
-                orange: {
-                    foreground: string;
-                    background: string;
-                };
-                yellow: {
-                    foreground: string;
-                    background: string;
-                };
-                green: {
-                    foreground: string;
-                    background: string;
-                };
-                blue: {
-                    foreground: string;
-                    background: string;
-                };
-            };
-        };
     };
 }, {
-    variant: NotificationVariantName;
+    variant: NotificationVariantName | (string & {});
     noMargin?: boolean | undefined;
-    dismissible: boolean;
-}, never>;
-export declare const Notification: import("react").ForwardRefExoticComponent<{
-    variant?: NotificationVariantName | undefined;
-    title: string;
+    dismissable: boolean;
+} & Breakpoints, never>;
+export declare const Notification: React.ForwardRefExoticComponent<{
+    variant?: (string & {}) | NotificationVariantName | undefined;
+    title?: ReactNode | string;
     noMargin?: boolean | undefined;
     children?: ReactNode;
-    dismissible?: boolean | undefined;
+    dismissable?: boolean | undefined;
     onDismiss?: (() => void) | undefined;
-} & import("react").RefAttributes<View>>;
-export declare const ErrorNotification: import("react").ForwardRefExoticComponent<Pick<NotificationProps, "children" | "title" | "key" | "noMargin" | "dismissible" | "onDismiss"> & import("react").RefAttributes<View>>;
-export declare const SuccessNotification: import("react").ForwardRefExoticComponent<Pick<NotificationProps, "children" | "title" | "key" | "noMargin" | "dismissible" | "onDismiss"> & import("react").RefAttributes<View>>;
-export declare const InfoNotification: import("react").ForwardRefExoticComponent<Pick<NotificationProps, "children" | "title" | "key" | "noMargin" | "dismissible" | "onDismiss"> & import("react").RefAttributes<View>>;
-export declare const WarningNotification: import("react").ForwardRefExoticComponent<Pick<NotificationProps, "children" | "title" | "key" | "noMargin" | "dismissible" | "onDismiss"> & import("react").RefAttributes<View>>;
+} & React.RefAttributes<View>>;
+export declare const ErrorNotification: React.ForwardRefExoticComponent<Pick<NotificationProps, "children" | "title" | "key" | "noMargin" | "dismissable" | "onDismiss"> & React.RefAttributes<View>>;
+export declare const SuccessNotification: React.ForwardRefExoticComponent<Pick<NotificationProps, "children" | "title" | "key" | "noMargin" | "dismissable" | "onDismiss"> & React.RefAttributes<View>>;
+export declare const InfoNotification: React.ForwardRefExoticComponent<Pick<NotificationProps, "children" | "title" | "key" | "noMargin" | "dismissable" | "onDismiss"> & React.RefAttributes<View>>;
+export declare const WarningNotification: React.ForwardRefExoticComponent<Pick<NotificationProps, "children" | "title" | "key" | "noMargin" | "dismissable" | "onDismiss"> & React.RefAttributes<View>>;
 export {};

package/dist/components/Notification/Notification.js

@@ -50,52 +50,69 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WarningNotification = exports.InfoNotification = exports.SuccessNotification = exports.ErrorNotification = exports.Notification = exports.NotificationTitleBox = exports.NotificationContentBox = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var react_native_1 = require("react-native");
+var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var Icon_1 = require("../Icon");
+var pxToNumber = function (value) { return parseInt(value.replace('px', '')); };
+var numberToPx = function (value) { return "".concat(value, "px"); };
 var NotificationBox = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, noMargin = _a.noMargin;
-    return (0, styled_native_1.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 (0, styled_native_1.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);
 });
 exports.NotificationContentBox = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core;
-    return (0, styled_native_1.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 (0, styled_native_1.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);
 });
 exports.NotificationTitleBox = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, variant = _a.variant, dismissible = _a.dismissible;
-    var currentVariant = semantic[variant];
-    return (0, styled_native_1.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 (0, styled_native_1.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_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, variant = _a.variant;
-    var currentVariant = semantic[variant];
-    return (0, styled_native_1.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 (0, styled_native_1.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_native_1.default.TouchableOpacity(function () {
-    return (0, styled_native_1.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 = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
-    var semantic = _a.theme.semantic, variant = _a.variant;
-    var currentVariant = semantic[variant];
-    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), currentVariant.message);
+var DismissButton = styled_native_1.default.TouchableOpacity(function (_a) {
+    var notification = _a.theme.notification;
+    return (0, styled_native_1.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);
 });
 exports.Notification = (0, react_1.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 = (0, hooks_1.useBreakpoint)();
+    var theme = (0, react_1.useContext)(styled_native_1.ThemeContext);
     var _c = (0, react_1.useState)(false), dismissed = _c[0], setDismissed = _c[1];
-    if (dismissed || !children) {
+    if (dismissed || (!title && !children)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ ref: ref }, rest, { children: (0, jsx_runtime_1.jsxs)(NotificationBox, __assign({ noMargin: noMargin, testID: "nb-notification" }, { children: [(0, jsx_runtime_1.jsxs)(exports.NotificationTitleBox, __assign({ variant: variant, dismissible: dismissible }, { children: [(0, jsx_runtime_1.jsx)(NotificationTitleText, __assign({ variant: variant }, { children: title })), dismissible ? ((0, jsx_runtime_1.jsx)(DismissButton, __assign({ accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
-                                setDismissed(true);
-                                if (onDismiss) {
-                                    onDismiss();
-                                }
-                            } }, { children: (0, jsx_runtime_1.jsx)(StyledIcon, { variant: variant, name: "cross", size: "16" }) }))) : null] })), children ? ((0, jsx_runtime_1.jsx)(exports.NotificationContentBox, __assign({ "data-testid": "el-notification-box" }, { children: children }))) : null] })) })));
+    return (react_1.default.createElement(react_native_1.View, __assign({ ref: ref }, rest),
+        react_1.default.createElement(NotificationBox, __assign({ variant: variant, noMargin: noMargin, testID: "nb-notification" }, breakpoints),
+            !!title ? (react_1.default.createElement(exports.NotificationTitleBox, __assign({ variant: variant, dismissable: dismissable }, breakpoints),
+                react_1.default.createElement(react_native_1.View, null, typeof title === 'string' ? (react_1.default.createElement(NotificationTitleText, { variant: variant }, title)) : (title)))) : null,
+            dismissable ? (react_1.default.createElement(DismissButton, { accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
+                    setDismissed(true);
+                    if (onDismiss) {
+                        onDismiss();
+                    }
+                } },
+                react_1.default.createElement(Icon_1.Icon, { name: theme.notification.dismiss.icon, size: theme.notification.dismiss.size, 
+                    // @ts-ignore
+                    color: theme.notification.variants[variant].textColor }))) : null,
+            children ? (react_1.default.createElement(exports.NotificationContentBox, __assign({ "data-testid": "el-notification-box", variant: variant }, breakpoints), children)) : null)));
 });
-exports.ErrorNotification = (0, react_1.forwardRef)(function (props, ref) { return (0, jsx_runtime_1.jsx)(exports.Notification, __assign({ ref: ref, variant: "error" }, props)); });
-exports.SuccessNotification = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(exports.Notification, __assign({ ref: ref, variant: "success" }, props))); });
-exports.InfoNotification = (0, react_1.forwardRef)(function (props, ref) { return (0, jsx_runtime_1.jsx)(exports.Notification, __assign({ ref: ref, variant: "info" }, props)); });
-exports.WarningNotification = (0, react_1.forwardRef)(function (props, ref) { return (0, jsx_runtime_1.jsx)(exports.Notification, __assign({ ref: ref, variant: "warning" }, props)); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+exports.ErrorNotification = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(exports.Notification, __assign({ ref: ref, variant: "error", title: "Oops, there\u2019s a problem\u2026" }, props))); });
+exports.SuccessNotification = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(exports.Notification, __assign({ ref: ref, variant: "success" }, props))); });
+exports.InfoNotification = (0, react_1.forwardRef)(function (props, ref) { return react_1.default.createElement(exports.Notification, __assign({ ref: ref, variant: "info" }, props)); });
+exports.WarningNotification = (0, react_1.forwardRef)(function (props, ref) { return react_1.default.createElement(exports.Notification, __assign({ ref: ref, variant: "warning" }, props)); });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/Radio/Radio.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
-declare const Radio: import("react").ForwardRefExoticComponent<Omit<TouchableOpacityProps, "children"> & {
+declare const Radio: React.ForwardRefExoticComponent<Omit<TouchableOpacityProps, "children"> & {
     label: ReactNode;
     value: string;
     hint?: ReactNode;
@@ -8,5 +8,5 @@ declare const Radio: import("react").ForwardRefExoticComponent<Omit<TouchableOpa
     invalid?: boolean | undefined;
     onValueChange?: ((value?: string) => void) | undefined;
     activeOpacity?: number | undefined;
-} & import("react").RefAttributes<TouchableOpacity>>;
+} & React.RefAttributes<TouchableOpacity>>;
 export { Radio };

package/dist/components/Radio/Radio.js

@@ -1,4 +1,8 @@
 "use strict";
+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++) {
@@ -10,6 +14,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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)
@@ -26,42 +53,60 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var react_native_1 = require("react-native");
 var styled_native_1 = __importDefault(require("../../styled.native"));
+var utils_1 = require("../../utils");
 var HintText_1 = require("../HintText");
 var LabelText_1 = require("../LabelText");
 var StyledRadioInputWrapper = styled_native_1.default.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 = (0, utils_1.pxToNumber)(radio.size);
+    var gap = (0, utils_1.pxToNumber)(radio.gap);
+    return "\n      width: ".concat(radioSize + gap, "px;\n      height: ").concat(radio.touchSize, ";\n    ");
 });
 var StyledRadioInput = styled_native_1.default.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 = (0, utils_1.pxToNumber)(radio.touchSize);
+    var radioSize = (0, utils_1.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_native_1.default.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 = (0, utils_1.pxToNumber)(radio.size);
+    var dotSize = (0, utils_1.pxToNumber)(radio.dotSize);
+    var borderWidth = (0, utils_1.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 ((0, jsx_runtime_1.jsx)(StyledRadioInputWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(StyledRadioInput, __assign({ invalid: invalid, checked: checked, testID: testID }, { children: (0, jsx_runtime_1.jsx)(StyledRadioInputDot, { checked: checked }) })) })));
+    return (react_1.default.createElement(StyledRadioInputWrapper, __assign({}, rest),
+        react_1.default.createElement(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID },
+            react_1.default.createElement(StyledRadioInputDot, { checked: checked }))));
 };
-var StyledWrapper = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core;
-    return "\n    padding-top: ".concat(core.space[3], ";\n    flex-direction: row;\n  ");
+var RadioLabelText = (0, styled_native_1.default)(LabelText_1.LabelText)(function (_a) {
+    var space = _a.theme.space;
+    return "\n    padding-top: ".concat(space[3], ";\n  ");
 });
+var StyledWrapper = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
 var Radio = (0, react_1.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 ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, { children: [(0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID }), (0, jsx_runtime_1.jsxs)(react_native_1.View, __assign({ style: { flexShrink: 1 } }, { children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] }))] }) })));
+    return (react_1.default.createElement(react_native_1.TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest),
+        react_1.default.createElement(StyledWrapper, null,
+            react_1.default.createElement(Input, { checked: checked, invalid: invalid, testID: testID }),
+            react_1.default.createElement(react_native_1.View, { style: { flexShrink: 1 } },
+                react_1.default.createElement(RadioLabelText, null, label),
+                hint ? react_1.default.createElement(HintText_1.HintText, null, hint) : null))));
 });
 exports.Radio = Radio;
+var templateObject_1;