@ovotech/element-native 3.7.0 → 3.8.0-canary-9bfdab2-202

package/dist/components/NavHeader/NavHeader.styles.d.ts

@@ -5,6 +5,7 @@ export declare const NavContainer: import("styled-components").StyledComponent<t
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
         space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -36,12 +37,20 @@ export declare const NavContainer: import("styled-components").StyledComponent<t
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -239,6 +248,7 @@ export declare const ExpandedTitle: import("styled-components").StyledComponent<
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
         space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -270,12 +280,20 @@ export declare const ExpandedTitle: import("styled-components").StyledComponent<
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -474,6 +492,7 @@ export declare const CollapsedTitleWrapper: import("styled-components").StyledCo
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
         space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -505,12 +524,20 @@ export declare const CollapsedTitleWrapper: import("styled-components").StyledCo
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -706,6 +733,7 @@ export declare const CollapsedTitle: import("styled-components").StyledComponent
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
         space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -737,12 +765,20 @@ export declare const CollapsedTitle: import("styled-components").StyledComponent
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -938,6 +974,7 @@ export declare const IconButtonWrapper: import("styled-components").StyledCompon
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
         space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -969,12 +1006,20 @@ export declare const IconButtonWrapper: import("styled-components").StyledCompon
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -1170,6 +1215,7 @@ export declare const StyledIconButtonS: import("styled-components").StyledCompon
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
         space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -1201,12 +1247,20 @@ export declare const StyledIconButtonS: import("styled-components").StyledCompon
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -1404,6 +1458,7 @@ export declare const StyledIconButtonL: import("styled-components").StyledCompon
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
         space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -1435,12 +1490,20 @@ export declare const StyledIconButtonL: import("styled-components").StyledCompon
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -1638,6 +1701,7 @@ export declare const ActionWrapper: import("styled-components").StyledComponent<
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
         space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -1669,12 +1733,20 @@ export declare const ActionWrapper: import("styled-components").StyledComponent<
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;

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

@@ -1,6 +1,6 @@
 import { ComponentProps, ReactNode } from 'react';
 import { View } from 'react-native';
-export declare type NotificationVariantName = 'error' | 'success' | 'info' | 'warning';
+export declare type NotificationVariantName = 'error' | 'success' | 'info' | 'warning' | 'neutral';
 declare type NotificationProps = Omit<ComponentProps<typeof Notification>, 'variant'>;
 export declare const NotificationContentBox: import("styled-components").StyledComponent<typeof import("react-native").View, {
     core: {
@@ -8,6 +8,7 @@ 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>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
         space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -39,12 +40,20 @@ export declare const NotificationContentBox: import("styled-components").StyledC
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -240,6 +249,7 @@ export declare const NotificationTitleBox: import("styled-components").StyledCom
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
         space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -271,12 +281,20 @@ export declare const NotificationTitleBox: import("styled-components").StyledCom
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;

package/dist/components/Notification/Notification.js

@@ -56,46 +56,46 @@ var react_native_1 = require("react-native");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var Icon_1 = require("../Icon");
 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, core = _b.core, semantic = _b.semantic, noMargin = _a.noMargin;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    margin-bottom: ", ";\n    border: ", " solid ", ";\n    border-radius: ", ";\n    overflow: hidden;\n  "], ["\n    position: relative;\n    margin-bottom: ", ";\n    border: ", " solid ", ";\n    border-radius: ", ";\n    overflow: hidden;\n  "])), noMargin ? 0 : core.space[4], core.borderWidth.small, semantic.surface.elevated, core.radius.max);
 });
 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, core = _b.core, semantic = _b.semantic;
+    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    "])), semantic.surface.elevated, core.space[2], core.space[3], core.space[4], core.space[4]);
 });
 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]);
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    min-height: 44px;\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    min-height: 44px;\n  "])), currentVariant.surface, core.space[2], core.space[2], core.space[4], dismissible ? core.space[3] : core.space[4]);
 });
 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 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 DismissButton = styled_native_1.default.TouchableOpacity(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 28px;\n      height: 28px;\n      background: ", ";\n      border: ", " solid ", ";\n      border-radius: ", ";\n    "], ["\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 28px;\n      height: 28px;\n      background: ", ";\n      border: ", " solid ", ";\n      border-radius: ", ";\n    "])), semantic.inverted.surface, core.borderWidth.small, core.color.brand.forest, core.radius.max);
 });
 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 semantic = _a.theme.semantic;
+    return "\n    color: ".concat(semantic.inverted.message.base, ";\n  ");
 });
 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 ? 'neutral' : _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 = (0, react_1.useState)(false), dismissed = _c[0], setDismissed = _c[1];
     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 () {
+    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({ accessible: true, 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] })) })));
+                            } }, { children: (0, jsx_runtime_1.jsx)(StyledIcon, { name: "cross", size: "16" }) }))) : null] })), children ? ((0, jsx_runtime_1.jsx)(exports.NotificationContentBox, __assign({ "data-testid": "el-notification-box" }, { children: 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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/P/P.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { TextProps } from 'react-native';
 export declare const P: import("react").ForwardRefExoticComponent<TextProps & {
+    inverted?: boolean | undefined;
+} & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<unknown>>;

package/dist/components/P/P.js

@@ -44,8 +44,8 @@ var react_1 = require("react");
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var StyledP = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.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.body.native, core.fontSize.body[smallAndUp ? 'large' : 'small'], core.lineHeight.body[smallAndUp ? 'large' : 'small'], semantic.message.base);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
+    return (0, styled_native_1.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.body.native, core.fontSize.body[smallAndUp ? 'large' : 'small'], core.lineHeight.body[smallAndUp ? 'large' : 'small'], inverted ? semantic.inverted.message.base : semantic.message.base);
 });
 exports.P = (0, react_1.forwardRef)(function (props, ref) {
     var breakpoints = (0, hooks_1.useBreakpoint)();

package/dist/components/PasswordInput/PasswordInput.styled.d.ts

@@ -5,6 +5,7 @@ export declare const StyledPressable: import("styled-components").StyledComponen
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
         space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -36,12 +37,20 @@ export declare const StyledPressable: import("styled-components").StyledComponen
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;

package/dist/components/SelectField/Select.d.ts

@@ -17,6 +17,7 @@ declare const SelectOption: import("styled-components").StyledComponent<typeof i
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
         space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -48,12 +49,20 @@ declare const SelectOption: import("styled-components").StyledComponent<typeof i
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;

package/dist/components/Small/Small.d.ts

@@ -11,6 +11,7 @@ export declare const Small: import("react").ForwardRefExoticComponent<Pick<Omit<
             borderWidth: Record<"small" | "medium" | "large", string>;
             breakpoint: Record<"small" | "medium" | "large", string | number>;
             mediaQuery: Record<"small" | "medium" | "large", string>;
+            customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
             space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
             transition: Record<"medium" | "slow" | "fast", string>;
             opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -42,12 +43,20 @@ export declare const Small: import("react").ForwardRefExoticComponent<Pick<Omit<
         };
         semantic: {
             surface: Record<"base" | "cutout" | "elevated", string>;
-            message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+            message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+            branded: Record<"message" | "heading" | "surface", string>;
             border: Record<"graphic" | "differentiated" | "functional", string>;
             focus: Record<"surface" | "outline" | "hover", string>;
-            inverted: Record<"surface" | "border", string> & {
+            inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
                 message: Record<"base" | "link" | "secondary" | "branded", string>;
             };
+            neutral: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
             success: {
                 border: string;
                 surface: string;

package/dist/components/Strong/Strong.d.ts

@@ -4,6 +4,7 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
         space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -35,12 +36,20 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;

package/dist/components/SubLabelText/SubLabelText.d.ts

@@ -11,6 +11,7 @@ declare const SubLabelText: import("react").ForwardRefExoticComponent<Pick<Omit<
             borderWidth: Record<"small" | "medium" | "large", string>;
             breakpoint: Record<"small" | "medium" | "large", string | number>;
             mediaQuery: Record<"small" | "medium" | "large", string>;
+            customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
             space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
             transition: Record<"medium" | "slow" | "fast", string>;
             opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -42,12 +43,20 @@ declare const SubLabelText: import("react").ForwardRefExoticComponent<Pick<Omit<
         };
         semantic: {
             surface: Record<"base" | "cutout" | "elevated", string>;
-            message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+            message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+            branded: Record<"message" | "heading" | "surface", string>;
             border: Record<"graphic" | "differentiated" | "functional", string>;
             focus: Record<"surface" | "outline" | "hover", string>;
-            inverted: Record<"surface" | "border", string> & {
+            inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
                 message: Record<"base" | "link" | "secondary" | "branded", string>;
             };
+            neutral: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
             success: {
                 border: string;
                 surface: string;

package/dist/components/Tabs/Tab.js

@@ -55,18 +55,18 @@ var react_1 = require("react");
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var TabText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "])), core.fontSize.body.small, core.fontFamily.bodyBold.native, core.lineHeight.body.small, semantic.message.base, core.space[3], core.space[smallAndUp ? 3 : 2]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.active, active = _c === void 0 ? false : _c;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "])), core.fontSize.body.small, core.fontFamily.bodyBold.native, core.lineHeight.body.small, active ? semantic.focus.outline : semantic.message.base, core.space[3], core.space[2]);
 });
 var TabTouchable = styled_native_1.default.TouchableOpacity(function (_a) {
     var _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.first, first = _c === void 0 ? false : _c, _d = _a.last, last = _d === void 0 ? false : _d, _e = _a.stretch, stretch = _e === void 0 ? false : _e, _f = _a.theme, core = _f.core, semantic = _f.semantic, inline = _a.inline;
     return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    flex-grow: ", ";\n    border: ", " solid ", ";\n    ", "\n    ", "\n    ", "\n    ", "\n  "], ["\n    flex-grow: ", ";\n    border: ", " solid ", ";\n    ", "\n    ", "\n    ", "\n    ", "\n  "])), stretch ? 1 : 0, core.borderWidth.small, semantic.border.differentiated, active
-        ? (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            border-bottom-color: ", ";\n            border-bottom-width: ", ";\n          "], ["\n            border-bottom-color: ", ";\n            border-bottom-width: ", ";\n          "])), semantic.message.branded, core.borderWidth.medium) : '', !inline
-        ? (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            border-top-color: transparent;\n            border-top-width: 0;\n          "], ["\n            border-top-color: transparent;\n            border-top-width: 0;\n          "]))) : '', last && inline
+        ? (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          border-bottom-color: ", ";\n          border-bottom-width: ", ";\n        "], ["\n          border-bottom-color: ", ";\n          border-bottom-width: ", ";\n        "])), semantic.focus.outline, core.borderWidth.medium) : '', !inline
+        ? (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          border-top-color: transparent;\n          border-top-width: 0;\n        "], ["\n          border-top-color: transparent;\n          border-top-width: 0;\n        "]))) : '', last && inline
         ? ''
-        : (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            border-right-color: transparent;\n            border-right-width: 0;\n          "], ["\n            border-right-color: transparent;\n            border-right-width: 0;\n          "]))), first && inline
+        : (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          border-right-color: transparent;\n          border-right-width: 0;\n        "], ["\n          border-right-color: transparent;\n          border-right-width: 0;\n        "]))), first && inline
         ? ''
-        : (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            border-left-color: transparent;\n            border-left-width: 0;\n          "], ["\n            border-left-color: transparent;\n            border-left-width: 0;\n          "]))));
+        : (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          border-left-color: transparent;\n          border-left-width: 0;\n        "], ["\n          border-left-color: transparent;\n          border-left-width: 0;\n        "]))));
 });
 exports.Tab = (0, react_1.forwardRef)(function (_a, ref) {
     var active = _a.active, fullWidth = _a.fullWidth, children = _a.children, rest = __rest(_a, ["active", "fullWidth", "children"]);