@ovotech/element-native 2.0.4 → 2.2.0-canary-1cac2ba-73

package/dist/esm/components/Field/Field.js

@@ -58,11 +58,11 @@ export var Field = forwardRef(function (_a, ref) {
                     React.createElement(LabelText, null,
                         label,
                         optional ? ' (optional)' : null),
-                    hint ? React.createElement(HintText, null, hint) : null)),
+                    hint ? React.createElement(HintText, null, hint) : null,
+                    error ? React.createElement(ErrorText, null, error) : null)),
             React.createElement(Stretch, { defaultWidth: "".concat(Math.ceil(characters * 0.8 * parseInt(field.fontSize[0])) + affixWidth, "px"), fullWidth: fullWidth }, Children.map(children, function (child) {
                 return isValidElement(child)
                     ? cloneElement(child, __assign({ invalid: hasError || undefined, ref: mergeRefs(inputRef, ref), accessibilityLabel: accessibilityLabel }, rest))
                     : child;
-            })),
-            error ? React.createElement(ErrorText, null, error) : null)));
+            })))));
 });

package/dist/esm/components/Heading/Heading.js

@@ -28,12 +28,8 @@ import React from 'react';
 import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
 var StyledHeading1 = styled.Text(function (_a) {
-    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    color: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    color: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), heading.fontFamily, heading.heading1.fontWeight || heading.fontWeight, heading.color, heading.heading1.fontSize[smallAndUp ? 1 : 0], heading.heading1.lineHeight[smallAndUp ? 1 : 0], smallAndUp
-        ? heading.heading1.marginTop[1]
-        : heading.heading1.marginTop[0], smallAndUp
-        ? heading.heading1.marginBottom[1]
-        : heading.heading1.marginBottom[0]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.heading.native, core.fontSize.heading1[smallAndUp ? 'large' : 'small'], core.lineHeight.heading1[smallAndUp ? 'large' : 'small'], semantic.message.branded);
 });
 export var Heading1 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
@@ -41,12 +37,8 @@ export var Heading1 = function (_a) {
     return (React.createElement(StyledHeading1, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 var StyledHeading2 = styled.Text(function (_a) {
-    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), heading.fontFamily, heading.heading2.fontSize[smallAndUp ? 1 : 0], heading.heading2.lineHeight[smallAndUp ? 1 : 0], heading.heading2.fontWeight || heading.fontWeight, heading.color, smallAndUp
-        ? heading.heading2.marginTop[1]
-        : heading.heading2.marginTop[0], smallAndUp
-        ? heading.heading2.marginBottom[1]
-        : heading.heading2.marginBottom[0]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.heading.native, core.fontSize.heading2[smallAndUp ? 'large' : 'small'], core.lineHeight.heading2[smallAndUp ? 'large' : 'small'], semantic.message.branded);
 });
 export var Heading2 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
@@ -54,12 +46,8 @@ export var Heading2 = function (_a) {
     return (React.createElement(StyledHeading2, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 var StyledHeading3 = styled.Text(function (_a) {
-    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), heading.fontFamily, heading.heading3.fontSize[smallAndUp ? 1 : 0], heading.heading3.lineHeight[smallAndUp ? 1 : 0], heading.heading3.fontWeight || heading.fontWeight, heading.color, smallAndUp
-        ? heading.heading3.marginTop[1]
-        : heading.heading3.marginTop[0], smallAndUp
-        ? heading.heading3.marginBottom[1]
-        : heading.heading3.marginBottom[0]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.heading.native, core.fontSize.heading3[smallAndUp ? 'large' : 'small'], core.lineHeight.heading3[smallAndUp ? 'large' : 'small'], semantic.message.branded);
 });
 export var Heading3 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
@@ -67,12 +55,8 @@ export var Heading3 = function (_a) {
     return (React.createElement(StyledHeading3, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 var StyledHeading4 = styled.Text(function (_a) {
-    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), heading.fontFamily, heading.heading3.fontSize[smallAndUp ? 1 : 0], heading.heading3.lineHeight[smallAndUp ? 1 : 0], heading.heading4.fontWeight || heading.fontWeight, heading.color, smallAndUp
-        ? heading.heading4.marginTop[1]
-        : heading.heading4.marginTop[0], smallAndUp
-        ? heading.heading4.marginBottom[1]
-        : heading.heading4.marginBottom[0]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.heading.native, core.fontSize.heading4[smallAndUp ? 'large' : 'small'], core.lineHeight.heading4[smallAndUp ? 'large' : 'small'], semantic.message.branded);
 });
 export var Heading4 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);

package/dist/esm/components/HintText/HintText.js

@@ -8,7 +8,7 @@ import { styledComponentWithBreakpoints } from '../../utils';
 var StyledHintText = styled.Text(function (_a) {
     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      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "])), field.fontFamily, field.hint.fontWeight, fontSize, calculateLineHeight(fontSize, field.lineHeight), field.hint.color);
+    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    "])), field.fontFamily, fontSize, calculateLineHeight(fontSize, field.lineHeight), field.hint.color);
 });
 var HintText = styledComponentWithBreakpoints(StyledHintText);
 export { HintText };

package/dist/esm/components/Icon/Icon.js

@@ -26,10 +26,10 @@ import { ThemeContext } from '../../styled.native';
 export var Icon = function (_a) {
     var name = _a.name, size = _a.size, color = _a.color, testID = _a.testID, rest = __rest(_a, ["name", "size", "color", "testID"]);
     var icons = useIcons();
-    var colors = useContext(ThemeContext).colors;
+    var semantic = useContext(ThemeContext).semantic;
     // @ts-ignore to support additional icons.
     var Svg = name && icons[name];
     return Svg ? (React.createElement(Svg, __assign({ testID: testID ? testID : "element-icon".concat(name ? "-".concat(name) : ''), 
         // @ts-ignore this is valid.
-        color: color !== null && color !== void 0 ? color : colors.body, width: size, height: size }, rest))) : null;
+        color: color !== null && color !== void 0 ? color : semantic.message.base, width: size, height: size }, rest))) : null;
 };

package/dist/esm/components/Input/Input.js

@@ -24,25 +24,21 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState, forwardRef, useContext } from 'react';
+import React, { forwardRef, useState } from 'react';
 import { useBreakpoint } from '../../hooks';
-import styled, { css, ThemeContext } from '../../styled.native';
-import { pxToNumber } from '../../utils';
+import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon/Icon';
 var StyledIcon = styled(Icon)(function (_a) {
-    var _b = _a.theme, input = _b.input, focusRing = _b.focusRing, side = _a.side, focused = _a.focused;
-    var distance = (pxToNumber(input.height) - pxToNumber(input.icon.size)) / 2 +
-        (focused ? pxToNumber(focusRing.distance) : 0);
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    width: ", ";\n    z-index: 1;\n    top: ", "px;\n    ", ";\n    ", ";\n  "], ["\n    position: absolute;\n    width: ", ";\n    z-index: 1;\n    top: ", "px;\n    ", ";\n    ", ";\n  "])), input.icon.size, distance, side === 'left' ? "left: ".concat(distance, "px") : '', side === 'right' ? "right: ".concat(distance, "px") : '');
+    var core = _a.theme.core, side = _a.side, focused = _a.focused;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "], ["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "])), focused ? '16px' : '14px', side === 'left' ? "left: ".concat(core.space[2]) : '', side === 'right' ? "right: ".concat(core.space[2]) : '');
 });
 var Input = forwardRef(function (_a, ref) {
-    var onFocus = _a.onFocus, onBlur = _a.onBlur, style = _a.style, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight"]);
+    var onFocus = _a.onFocus, onBlur = _a.onBlur, style = _a.style, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rightSlot = _a.rightSlot, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight", "rightSlot"]);
     var _b = useState(false), focused = _b[0], setFocused = _b[1];
     var breakpoints = useBreakpoint();
-    var input = useContext(ThemeContext).input;
     return (React.createElement(InputWrapper, { focused: focused },
-        iconLeft ? (React.createElement(StyledIcon, { name: iconLeft, size: pxToNumber(input.icon.size), focused: focused, pointerEvents: "none", side: "left" })) : null,
-        React.createElement(StyledInput, __assign({}, rest, breakpoints, { iconLeft: !!iconLeft, iconRight: !!iconRight, style: style, 
+        iconLeft ? (React.createElement(StyledIcon, { name: iconLeft, size: 16, focused: focused, pointerEvents: "none", side: "left" })) : null,
+        React.createElement(StyledInput, __assign({}, rest, breakpoints, { iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, 
             // @ts-ignore
             ref: ref, onFocus: function (event) {
                 setFocused(true);
@@ -55,22 +51,24 @@ var Input = forwardRef(function (_a, ref) {
                     onBlur(event);
                 }
             } })),
-        iconRight ? (React.createElement(StyledIcon, { name: iconRight, size: pxToNumber(input.icon.size), focused: focused, pointerEvents: "none", side: "right" })) : null));
+        iconRight && !rightSlot ? (React.createElement(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null,
+        rightSlot));
 });
 var InputWrapper = styled.View(function (_a) {
-    var _b = _a.theme, input = _b.input, focusRing = _b.focusRing, focused = _a.focused;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    align-self: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    border-width: 0px;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "], ["\n    align-self: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    border-width: 0px;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "])), input.background, input.borderRadius, focusRing.color, focused
-        ? "\n      border-width: ".concat(focusRing.width, ";\n      padding: ").concat(focusRing.distance, ";\n      margin: -").concat(pxToNumber(focusRing.width) +
-            pxToNumber(focusRing.distance), "px;")
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, focused = _a.focused;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "], ["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "])), core.radius.small, semantic.border.functional, focused
+        ? "\n      border-width: ".concat(core.borderWidth.small, ";\n      border-color: ").concat(semantic.focus.outline, ";\n      padding: 2px;\n      margin: -4px;")
         : null);
 });
 var StyledInput = styled.TextInput(function (_a) {
-    var input = _a.theme.input, invalid = _a.invalid, smallAndUp = _a.smallAndUp, iconLeft = _a.iconLeft, iconRight = _a.iconRight;
-    var fontSize = smallAndUp ? input.fontSize[1] : input.fontSize[0];
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, smallAndUp = _a.smallAndUp, iconLeft = _a.iconLeft, iconRight = _a.iconRight, hasRightSlot = _a.hasRightSlot;
+    var fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
     var errorStyles = invalid
-        ? "\n        border-width: ".concat(input.error.borderWidth, ";\n        border-color: ").concat(input.error.color, ";\n      ")
+        ? "\n        border-color: ".concat(semantic.message.error, ";\n      ")
         : '';
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-family: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      height: ", ";\n      line-height: 18px; /* Corrects for responsive line height in fixed height input */\n      border: ", " solid ", ";\n      background: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      flex: 1;\n\n      ", "\n      ", "\n\n      ", "\n    "], ["\n      font-family: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      height: ", ";\n      line-height: 18px; /* Corrects for responsive line height in fixed height input */\n      border: ", " solid ", ";\n      background: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      flex: 1;\n\n      ", "\n      ", "\n\n      ", "\n    "])), input.fontFamily, input.fontWeight, input.color, fontSize, input.height, input.borderWidth, input.borderColor, input.background, input.borderRadius, input.padding, iconLeft ? "padding-left: ".concat(input.height, ";") : '', iconRight ? "padding-right: ".concat(input.height, ";") : '', errorStyles);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          font-family: ", ";\n          color: ", ";\n          font-size: ", ";\n          height: ", ";\n          line-height: 18px; /* Corrects for responsive line height in fixed height input */\n          border: ", " solid ", ";\n          border-radius: ", ";\n          padding: 0 ", ";\n          flex: 1;\n\n          ", "\n          ", "\n\n          ", "\n        "], ["\n          font-family: ", ";\n          color: ", ";\n          font-size: ", ";\n          height: ", ";\n          line-height: 18px; /* Corrects for responsive line height in fixed height input */\n          border: ", " solid ", ";\n          border-radius: ", ";\n          padding: 0 ", ";\n          flex: 1;\n\n          ", "\n          ", "\n\n          ", "\n        "])), core.fontFamily.body.native, semantic.message.base, fontSize, core.space[11], core.borderWidth.small, semantic.border.functional, core.radius.small, core.space[2], iconLeft ? "padding-left: ".concat(core.space[8], ";") : '', iconRight || hasRightSlot ? "padding-right: ".concat(core.space[8], ";") : '', errorStyles);
 });
 export { Input };
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -22,8 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from 'react';
 import { Input } from './Input';
+import { PasswordVisibilityToggle, useTogglePasswordVisibility, } from './PasswordVisibilityToggle';
 var PasswordInput = forwardRef(function (_a, ref) {
-    var _b = _a.secureTextEntry, secureTextEntry = _b === void 0 ? true : _b, props = __rest(_a, ["secureTextEntry"]);
-    return (React.createElement(Input, __assign({}, props, { keyboardType: "default", autoCapitalize: "none", autoCorrect: false, secureTextEntry: secureTextEntry, ref: ref })));
+    var props = __rest(_a, []);
+    var _b = useTogglePasswordVisibility(), isPasswordVisible = _b.isPasswordVisible, handlePasswordVisibility = _b.handlePasswordVisibility;
+    return (React.createElement(Input, __assign({}, props, { rightSlot: props.hasVisibilityToggle ? (React.createElement(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/Input/PasswordInput.styled.js

@@ -0,0 +1,11 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { Pressable } from 'react-native';
+import styled, { css } from '../../styled.native';
+export var StyledPressable = styled(Pressable)(function (_a) {
+    var core = _a.theme.core, 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    "])), core.space[4], focused ? '16px' : '14px', core.space[3]);
+});
+var templateObject_1;

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

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import { Icon } from '../Icon';
+import { StyledPressable } from './PasswordInput.styled';
+export var useTogglePasswordVisibility = function () {
+    var _a = useState(false), isPasswordVisible = _a[0], setIsPasswordVisible = _a[1];
+    var handlePasswordVisibility = function () {
+        setIsPasswordVisible(!isPasswordVisible);
+    };
+    return {
+        isPasswordVisible: isPasswordVisible,
+        handlePasswordVisibility: handlePasswordVisibility,
+    };
+};
+export var PasswordVisibilityToggle = function (_a) {
+    var iconName = _a.iconName, visibilityToggleLabel = _a.visibilityToggleLabel, handlePasswordVisibility = _a.handlePasswordVisibility;
+    var _b = useState(false), focused = _b[0], setFocused = _b[1];
+    return (React.createElement(StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: function () {
+            setFocused(true);
+        }, onBlur: function () {
+            setFocused(false);
+        } },
+        React.createElement(Icon, { name: iconName, size: 16, pointerEvents: "none" })));
+};

package/dist/esm/components/Input/{TelInput.js → PhoneInput.js}

@@ -11,5 +11,5 @@ var __assign = (this && this.__assign) || function () {
 };
 import React, { forwardRef } from 'react';
 import { Input } from './Input';
-var TelInput = forwardRef(function (props, ref) { return (React.createElement(Input, __assign({}, props, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
-export { TelInput };
+var PhoneInput = forwardRef(function (props, ref) { return (React.createElement(Input, __assign({}, props, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
+export { PhoneInput };

package/dist/esm/components/Input/TextareaInput.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++) {
@@ -21,18 +25,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { useBreakpoint } from '../../hooks';
-import { useTheme } from '../../styled.native';
-import { calculateLineHeight } from '../../theme';
+import styled, { css } from '../../styled.native';
 import { pxToNumber } from '../../utils';
 import { Input } from './Input';
+var StyledInput = styled(Input)(function (_a) {
+    var core = _a.theme.core, rows = _a.rows;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", " ", " ", " ", ";\n    height: ", "px;\n  "], ["\n    padding: ", " ", " ", " ", ";\n    height: ", "px;\n  "])), core.space[3], core.space[2], core.space[2], core.space[2], pxToNumber(core.space[8]) * rows);
+});
 var TextareaInput = forwardRef(function (_a, ref) {
     var _b = _a.rows, rows = _b === void 0 ? 3 : _b, rest = __rest(_a, ["rows"]);
-    var input = useTheme().input;
-    var smallAndUp = useBreakpoint().smallAndUp;
-    var height = pxToNumber(input.padding) * 2 +
-        pxToNumber(calculateLineHeight(smallAndUp ? input.fontSize[1] : input.fontSize[0], input.lineHeight)) *
-            rows;
-    return (React.createElement(Input, __assign({}, rest, { keyboardType: "default", multiline: true, textAlignVertical: "top", style: { height: height }, ref: ref })));
+    return (React.createElement(StyledInput, __assign({}, rest, { keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref })));
 });
 export { TextareaInput };
+var templateObject_1;

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

@@ -1,7 +1,7 @@
 export { CurrencyInput } from './CurrencyInput';
 export { EmailInput } from './EmailInput';
 export { NumberInput } from './NumberInput';
-export { TelInput } from './TelInput';
+export { PhoneInput } from './PhoneInput';
 export { TextInput } from './TextInput';
 export { PasswordInput } from './PasswordInput';
 export { TextareaInput } from './TextareaInput';

package/dist/esm/components/LabelText/LabelText.js

@@ -8,7 +8,7 @@ import { styledComponentWithBreakpoints } from '../../utils';
 var StyledLabelText = styled.Text(function (_a) {
     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      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), field.label.fontFamily, calculateLineHeight(fontSize, field.lineHeight), field.label.fontWeight, field.label.color, fontSize);
+    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.label.fontFamily, calculateLineHeight(fontSize, field.lineHeight), field.label.color, fontSize);
 });
 var LabelText = styledComponentWithBreakpoints(StyledLabelText);
 export { LabelText };

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

@@ -46,7 +46,7 @@ var StyledBullet = styled.Text(function (_a) {
     var lineHeight = smallAndUp
         ? list.listItem.lineHeight[1]
         : list.listItem.lineHeight[0];
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "])), text.fontFamily, lineHeight, text.fontWeight, text.color, fontSize, list.listItem.bulletGap, space[4]);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "])), text.fontFamily, lineHeight, text.color, fontSize, list.listItem.bulletGap, space[4]);
 });
 var StyledUlItem = styled.View(function () { return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n  "], ["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n  "]))); });
 var Bullet = styledComponentWithBreakpoints(StyledBullet);
@@ -87,9 +87,13 @@ var StyledLi = styled.Text(function (_a) {
     var lineHeight = smallAndUp
         ? list.listItem.lineHeight[1]
         : list.listItem.lineHeight[0];
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), text.fontFamily, lineHeight, text.fontWeight, text.color, fontSize);
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), text.fontFamily, lineHeight, text.color, fontSize);
 });
 var Li = styledComponentWithBreakpoints(StyledLi);
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the DescriptionList component instead.
+ * */
 var Dl = ListWrapper;
 var StyledDtText = styled.Text(function (_a) {
     var list = _a.theme.list, smallAndUp = _a.smallAndUp;
@@ -99,7 +103,7 @@ var StyledDtText = styled.Text(function (_a) {
     var lineHeight = smallAndUp
         ? list.listItem.lineHeight[1]
         : list.listItem.lineHeight[0];
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      font-family: ", ";\n      font-weight: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      font-weight: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), list.descriptionTerm.fontFamily, list.descriptionTerm.fontWeight, lineHeight, list.descriptionTerm.color, fontSize);
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), list.descriptionTerm.fontFamily, lineHeight, list.descriptionTerm.color, fontSize);
 });
 var DtText = styledComponentWithBreakpoints(StyledDtText);
 var StyledDtItem = styled.View(function (_a) {
@@ -113,6 +117,10 @@ var StyledDtItem = styled.View(function (_a) {
     return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      flex-direction: row;\n    "], ["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      flex-direction: row;\n    "])), marginTop, marginBottom);
 });
 var DtItem = styledComponentWithBreakpoints(StyledDtItem);
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the DescriptionList component instead.
+ * */
 var Dt = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
     return (React.createElement(DtItem, __assign({}, rest),
@@ -126,13 +134,17 @@ var StyledDdText = styled.Text(function (_a) {
     var lineHeight = smallAndUp
         ? list.listItem.lineHeight[1]
         : list.listItem.lineHeight[0];
-    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), text.fontFamily, lineHeight, text.fontWeight, text.color, fontSize);
+    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), text.fontFamily, lineHeight, text.color, fontSize);
 });
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the DescriptionList component instead.
+ * */
 var Dd = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
     var breakpoints = useBreakpoint();
     return (React.createElement(View, __assign({ style: { flexDirection: 'row' } }, rest),
         React.createElement(StyledDdText, __assign({}, breakpoints), children)));
 };
-export { Ul, Ol, Li, Dl, Dt, Dd };
+export { Ul, Ol, Li, Dl, Dt, Dd, ListWrapper };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import React from 'react';
-import { TouchableOpacity } from 'react-native';
+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';
@@ -13,37 +13,36 @@ var BackIcon = function () {
         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, colors = _b.colors, fonts = _b.fonts, fontWeights = _b.fontWeights, fontSizes = _b.fontSizes;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    font-family: ", ";\n  "], ["\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    font-family: ", ";\n  "])), colors.primaryContrast, fontSizes[1], fontWeights.normal, fonts.body);
+    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 space = _a.theme.space;
     return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-left: ", ";\n  "], ["\n    padding-left: ", ";\n  "])), space[2]);
 });
-var FeedbackText = styled(StyledText)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  text-align: right;\n"], ["\n  text-align: right;\n"])));
 var HeadlineView = styled(Animated.View)(function (_a) {
     var space = _a.theme.space;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0 ", " ", ";\n  "], ["\n    padding: 0 ", " ", ";\n  "])), space[3], space[3]);
+    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 colors = _a.theme.colors;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n  "])), colors.primary);
+    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 space = _a.theme.space, marginTop = _a.marginTop;
-    return css(templateObject_6 || (templateObject_6 = __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);
+    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, fonts = _b.fonts, fontWeights = _b.fontWeights, colors = _b.colors, textAlign = _a.textAlign;
-    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "])), fonts.bold, fontWeights.bold, colors.primaryContrast, 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 colors = _a.theme.colors;
-    return css(templateObject_8 || (templateObject_8 = __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);
+    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 (React.createElement(RootView, { layout: Layout.duration(150) },
+    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',
@@ -56,8 +55,7 @@ export var NavHeader = function (_a) {
                 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(TouchableOpacity, { style: { flex: 1, flexGrow: 1, flexShrink: 1 } },
-                React.createElement(FeedbackText, null, "Feedback"))),
+            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, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -24,69 +24,57 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, useContext, useState, } from 'react';
+import React, { forwardRef, useState } from 'react';
 import { View } from 'react-native';
-import { useBreakpoint } from '../../hooks';
-import styled, { css, ThemeContext } from '../../styled.native';
+import styled, { css } 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 _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);
+    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]);
 });
 export var NotificationContentBox = styled.View(function (_a) {
-    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);
+    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]);
 });
 export var NotificationTitleBox = styled.View(function (_a) {
-    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 _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 NotificationTitleText = styled.Text(function (_a) {
-    var _b = _a.theme, fonts = _b.fonts, fontWeights = _b.fontWeights, 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-weight: ", ";\n      font-size: ", ";\n    "], ["\n      color: ", ";\n      font-family: ", ";\n      font-weight: ", ";\n      font-size: ", ";\n    "])), currentVariant.textColor, fonts.bold, fontWeights.bold, responsiveFontSizes.body[0]);
+    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 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);
+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);
 });
 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, dismissable = _a.dismissable, onDismiss = _a.onDismiss, rest = __rest(_a, ["variant", "children", "title", "noMargin", "dismissable", "onDismiss"]);
-    var breakpoints = useBreakpoint();
-    var theme = useContext(ThemeContext);
+    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)) {
+    if (dismissed || !children) {
         return 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)));
+        React.createElement(NotificationBox, { noMargin: noMargin, testID: "nb-notification" },
+            React.createElement(NotificationTitleBox, { variant: variant, dismissible: dismissible },
+                React.createElement(NotificationTitleText, { variant: variant }, title),
+                dismissible ? (React.createElement(DismissButton, { accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
+                        setDismissed(true);
+                        if (onDismiss) {
+                            onDismiss();
+                        }
+                    } },
+                    React.createElement(StyledIcon, { variant: variant, name: "cross", size: "16" }))) : null),
+            children ? (React.createElement(NotificationContentBox, { "data-testid": "el-notification-box" }, children)) : null)));
 });
-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 ErrorNotification = forwardRef(function (props, ref) { return React.createElement(Notification, __assign({ ref: ref, variant: "error" }, 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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;