@ovotech/element-native 2.2.0 → 3.0.0-canary-edaf96f-93

package/dist/components/List/List.js

@@ -50,73 +50,66 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListWrapper = exports.Dd = exports.Dt = exports.Dl = exports.Li = exports.Ol = exports.Ul = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_native_1 = require("react-native");
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var Stack_1 = require("../Stack");
 var UlBullet = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, colors = _b.colors, list = _b.list, _c = _a.visible, visible = _c === void 0 ? true : _c, smallAndUp = _a.smallAndUp;
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.visible, visible = _c === void 0 ? true : _c, smallAndUp = _a.smallAndUp;
     var lineHeight = smallAndUp
-        ? list.listItem.lineHeight[1]
-        : list.listItem.lineHeight[0];
-    var topMargin = ((0, utils_1.pxToNumber)(lineHeight) - (0, utils_1.pxToNumber)(list.listItem.bulletWidth)) / 2;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-right: ", ";\n      margin-top: ", "px;\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n    "], ["\n      margin-right: ", ";\n      margin-top: ", "px;\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n    "])), list.listItem.bulletGap, topMargin, list.listItem.bulletWidth, list.listItem.bulletWidth, visible ? colors.body : 'transparent');
+        ? core.lineHeight.body.large
+        : core.lineHeight.body.small;
+    var topMargin = ((0, utils_1.pxToNumber)(lineHeight) - (0, utils_1.pxToNumber)(core.space[2])) / 2;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-right: ", ";\n      margin-top: ", "px;\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n    "], ["\n      margin-right: ", ";\n      margin-top: ", "px;\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n    "])), core.space[2], topMargin, core.space[2], core.space[2], visible ? semantic.message.base : 'transparent');
 });
 var StyledBullet = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, text = _b.text, list = _b.list, space = _b.space, smallAndUp = _a.smallAndUp;
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp
-        ? list.listItem.fontSize[1]
-        : list.listItem.fontSize[0];
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
     var lineHeight = smallAndUp
-        ? list.listItem.lineHeight[1]
-        : list.listItem.lineHeight[0];
-    return (0, styled_native_1.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]);
+        ? core.lineHeight.body.large
+        : core.lineHeight.body.small;
+    return (0, styled_native_1.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    "])), core.fontFamily.body.native, lineHeight, semantic.message.base, fontSize, core.space[2], core.space[4]);
 });
 var StyledUlItem = styled_native_1.default.View(function () { return (0, styled_native_1.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 = (0, utils_1.styledComponentWithBreakpoints)(StyledBullet);
 var ListBulletItem = function (_a) {
     var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b;
-    return (react_1.default.createElement(StyledUlItem, null,
-        react_1.default.createElement(UlBullet, { visible: showBullets }),
-        children));
+    return ((0, jsx_runtime_1.jsxs)(StyledUlItem, { children: [(0, jsx_runtime_1.jsx)(UlBullet, { visible: showBullets }), children] }));
 };
 var ListNumberedItem = function (_a) {
     var children = _a.children, prefix = _a.prefix;
-    return (react_1.default.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
-        react_1.default.createElement(Bullet, null, prefix),
-        children));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, __assign({ style: { flexDirection: 'row' } }, { children: [(0, jsx_runtime_1.jsx)(Bullet, { children: prefix }), children] })));
 };
 var StyledList = styled_native_1.default.View(function (_a) {
-    var list = _a.theme.list, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), smallAndUp ? list.marginTop[1] : list.marginTop[0], smallAndUp ? list.marginBottom[1] : list.marginBottom[0]);
+    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), smallAndUp ? core.space[3] : core.space[2], smallAndUp ? core.space[3] : core.space[2]);
 });
 var ListWrapper = (0, utils_1.styledComponentWithBreakpoints)(StyledList);
 exports.ListWrapper = ListWrapper;
 var Ul = function (_a) {
     var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, rest = __rest(_a, ["children", "showBullets"]);
-    var list = (0, react_1.useContext)(styled_native_1.ThemeContext).list;
-    return (react_1.default.createElement(ListWrapper, __assign({}, rest),
-        react_1.default.createElement(Stack_1.Stack, { spaceBetween: list.listItem.marginVertical }, react_1.Children.map(children, function (child) { return (react_1.default.createElement(ListBulletItem, { showBullets: showBullets }, child)); }))));
+    return ((0, jsx_runtime_1.jsx)(ListWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, __assign({ spaceBetween: 2 }, { children: react_1.Children.map(children, function (child) { return ((0, jsx_runtime_1.jsx)(ListBulletItem, __assign({ showBullets: showBullets }, { children: child }))); }) })) })));
 };
 exports.Ul = Ul;
 var Ol = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
-    var list = (0, react_1.useContext)(styled_native_1.ThemeContext).list;
-    return (react_1.default.createElement(ListWrapper, __assign({}, rest),
-        react_1.default.createElement(Stack_1.Stack, { spaceBetween: list.listItem.marginVertical }, react_1.Children.map(children, function (child, index) { return (react_1.default.createElement(ListNumberedItem, { prefix: index + 1 + '.' }, child)); }))));
+    return ((0, jsx_runtime_1.jsx)(ListWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, __assign({ spaceBetween: 2 }, { children: react_1.Children.map(children, function (child, index) { return ((0, jsx_runtime_1.jsx)(ListNumberedItem, __assign({ prefix: index + 1 + '.' }, { children: child }))); }) })) })));
 };
 exports.Ol = Ol;
 var StyledLi = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, text = _b.text, list = _b.list, smallAndUp = _a.smallAndUp;
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp
-        ? list.listItem.fontSize[1]
-        : list.listItem.fontSize[0];
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
     var lineHeight = smallAndUp
-        ? list.listItem.lineHeight[1]
-        : list.listItem.lineHeight[0];
-    return (0, styled_native_1.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);
+        ? core.lineHeight.body.large
+        : core.lineHeight.body.large;
+    return (0, styled_native_1.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    "])), core.fontFamily.body.native, lineHeight, semantic.message.base, fontSize);
 });
 var Li = (0, utils_1.styledComponentWithBreakpoints)(StyledLi);
 exports.Li = Li;
@@ -138,14 +131,9 @@ var StyledDtText = styled_native_1.default.Text(function (_a) {
 });
 var DtText = (0, utils_1.styledComponentWithBreakpoints)(StyledDtText);
 var StyledDtItem = styled_native_1.default.View(function (_a) {
-    var list = _a.theme.list, smallAndUp = _a.smallAndUp;
-    var marginTop = smallAndUp
-        ? list.descriptionTerm.marginTop[1]
-        : list.descriptionTerm.marginTop[0];
-    var marginBottom = smallAndUp
-        ? list.descriptionTerm.marginBottom[1]
-        : list.descriptionTerm.marginBottom[0];
-    return (0, styled_native_1.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 core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    var marginTop = smallAndUp ? core.space[4] : core.space[3];
+    return (0, styled_native_1.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, core.space[1]);
 });
 var DtItem = (0, utils_1.styledComponentWithBreakpoints)(StyledDtItem);
 /**
@@ -154,8 +142,7 @@ var DtItem = (0, utils_1.styledComponentWithBreakpoints)(StyledDtItem);
  * */
 var Dt = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
-    return (react_1.default.createElement(DtItem, __assign({}, rest),
-        react_1.default.createElement(DtText, null, children)));
+    return ((0, jsx_runtime_1.jsx)(DtItem, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(DtText, { children: children }) })));
 };
 exports.Dt = Dt;
 var StyledDdText = styled_native_1.default.Text(function (_a) {
@@ -175,8 +162,7 @@ var StyledDdText = styled_native_1.default.Text(function (_a) {
 var Dd = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
     var breakpoints = (0, hooks_1.useBreakpoint)();
-    return (react_1.default.createElement(react_native_1.View, __assign({ style: { flexDirection: 'row' } }, rest),
-        react_1.default.createElement(StyledDdText, __assign({}, breakpoints), children)));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ style: { flexDirection: 'row' } }, rest, { children: (0, jsx_runtime_1.jsx)(StyledDdText, __assign({}, breakpoints, { children: children })) })));
 };
 exports.Dd = Dd;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/Margin/Margin.d.ts

@@ -18,10 +18,10 @@ declare const StyledMargin: 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>;
-        space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
-        opacity: Record<"transparent" | "translucent" | "solid", string | number>;
-        color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
+        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
+        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
             lightest: string;
             lighter: string;
             light: string;
@@ -37,71 +37,53 @@ declare const StyledMargin: import("styled-components").StyledComponent<typeof i
             web: string;
         }>;
         fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+        fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
             small: string | number;
             large: string | number;
         }>;
-        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+        lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
             small: string | number;
             large: string | number;
         }>;
+        letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
         message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
-        focus: Record<"outline" | "surface", string>;
-        inverted: Record<"surface" | "border", string> & {
+        focus: Record<"surface" | "outline" | "hover", string>;
+        inverted: Record<"border" | "surface", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
         success: {
             border: string;
             surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
         };
         warning: {
             border: string;
             surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
         };
         error: {
             border: string;
             surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
         };
         info: {
             border: string;
             surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
-        };
-        electricity: {
-            border: string;
-            surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
-        };
-        gas: {
-            border: string;
-            surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
         };
+        data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
     };
     component: {
         heading1: {
@@ -232,6 +214,30 @@ declare const StyledMargin: import("styled-components").StyledComponent<typeof i
                 backgroundFocused: string;
             };
         };
+        badge: {
+            variants: {
+                red: {
+                    foreground: string;
+                    background: string;
+                };
+                orange: {
+                    foreground: string;
+                    background: string;
+                };
+                yellow: {
+                    foreground: string;
+                    background: string;
+                };
+                green: {
+                    foreground: string;
+                    background: string;
+                };
+                blue: {
+                    foreground: string;
+                    background: string;
+                };
+            };
+        };
     };
 }, MProps, never>;
 declare type Props = Omit<ComponentProps<typeof StyledMargin>, 'mTop' | 'mBottom' | 'mLeft' | 'mRight' | 'breakpoints'> & {

package/dist/components/Margin/Margin.js

@@ -26,12 +26,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Margin = void 0;
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var StyledMargin = styled_native_1.default.View(function (_a) {
-    var space = _a.theme.space, mTop = _a.mTop, mBottom = _a.mBottom, mLeft = _a.mLeft, mRight = _a.mRight, horizontal = _a.horizontal, vertical = _a.vertical, all = _a.all, breakpoints = _a.breakpoints;
+    var space = _a.theme.core.space, mTop = _a.mTop, mBottom = _a.mBottom, mLeft = _a.mLeft, mRight = _a.mRight, horizontal = _a.horizontal, vertical = _a.vertical, all = _a.all, breakpoints = _a.breakpoints;
     var formatter = function (spaceKey) {
         return spaceKey === 0 ? '0' : space[spaceKey];
     };
@@ -48,6 +48,6 @@ var StyledMargin = styled_native_1.default.View(function (_a) {
 var Margin = function (_a) {
     var top = _a.top, bottom = _a.bottom, left = _a.left, right = _a.right, rest = __rest(_a, ["top", "bottom", "left", "right"]);
     var breakpoints = (0, hooks_1.useBreakpoint)();
-    return (react_1.default.createElement(StyledMargin, __assign({}, rest, { breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right })));
+    return ((0, jsx_runtime_1.jsx)(StyledMargin, __assign({}, rest, { breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right })));
 };
 exports.Margin = Margin;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 declare type NavHeaderProps = {
     headline?: boolean;
     options: NavHeaderOptions;

package/dist/components/NavHeader/NavHeader.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -26,66 +37,54 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavHeader = void 0;
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_native_1 = require("react-native");
 var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
 var react_native_svg_1 = require("react-native-svg");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var Heading_1 = require("../Heading");
 var BackIcon = function () {
-    return (react_1.default.createElement(react_native_svg_1.Svg, { width: "10", height: "16", viewBox: "0 0 10 16" },
-        react_1.default.createElement(react_native_svg_1.Path, { d: "M0.579956 8L8.57996 16L9.99996 14.58L3.41996 8L9.99996 1.42L8.57996 0L0.579956 8Z", fill: "white" })));
+    return ((0, jsx_runtime_1.jsx)(react_native_svg_1.Svg, __assign({ width: "10", height: "16", viewBox: "0 0 10 16" }, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M0.579956 8L8.57996 16L9.99996 14.58L3.41996 8L9.99996 1.42L8.57996 0L0.579956 8Z", fill: "white" }) })));
 };
 var StyledText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, colors = _b.colors, fonts = _b.fonts, fontSizes = _b.fontSizes;
-    return (0, styled_native_1.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 _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n  "], ["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n  "])), semantic.inverted.message.base, core.fontSize.small.small, core.fontFamily.body.native);
 });
 var LeftHeaderText = (0, styled_native_1.default)(StyledText)(function (_a) {
-    var space = _a.theme.space;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-left: ", ";\n  "], ["\n    padding-left: ", ";\n  "])), space[2]);
+    var core = _a.theme.core;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-left: ", ";\n  "], ["\n    padding-left: ", ";\n  "])), core.space[2]);
 });
 var HeadlineView = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
-    var space = _a.theme.space;
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: 0 ", " ", ";\n  "], ["\n    padding: 0 ", " ", ";\n  "])), space[3], space[3]);
+    var core = _a.theme.core;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: 0 ", " ", ";\n  "], ["\n    padding: 0 ", " ", ";\n  "])), core.space[3], core.space[3]);
 });
 var RootView = styled_native_1.default.View(function (_a) {
-    var colors = _a.theme.colors;
-    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n  "])), colors.primary);
+    var semantic = _a.theme.semantic;
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n  "])), semantic.message.branded);
 });
 var StyledView = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
-    var space = _a.theme.space, marginTop = _a.marginTop;
-    return (0, styled_native_1.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 core = _a.theme.core, marginTop = _a.marginTop;
+    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "], ["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "])), core.space[3], core.space[2], marginTop !== null && marginTop !== void 0 ? marginTop : 0);
 });
 var StyledHeading4 = (0, styled_native_1.default)(Heading_1.Heading4)(function (_a) {
-    var _b = _a.theme, fonts = _b.fonts, colors = _b.colors, textAlign = _a.textAlign;
-    return (0, styled_native_1.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 _b = _a.theme, core = _b.core, semantic = _b.semantic, textAlign = _a.textAlign;
+    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-family: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "], ["\n    font-family: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "])), core.fontFamily.bodyBold.native, semantic.inverted.message.base, textAlign);
 });
 var StyledHeading3 = (0, styled_native_1.default)(Heading_1.Heading3)(function (_a) {
-    var colors = _a.theme.colors;
-    return (0, styled_native_1.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);
+    var semantic = _a.theme.semantic;
+    return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "], ["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "])), semantic.inverted.message.base);
 });
 var NavHeader = function (_a) {
     var options = _a.options, headline = _a.headline;
-    return (react_1.default.createElement(RootView, { layout: react_native_reanimated_1.Layout === null || react_native_reanimated_1.Layout === void 0 ? void 0 : react_native_reanimated_1.Layout.duration(150) },
-        react_1.default.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_1.default.createElement(react_native_1.TouchableOpacity, { style: {
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    flex: 1,
-                    flexGrow: 1,
-                    flexShrink: 1,
-                }, onPress: options === null || options === void 0 ? void 0 : options.goBack },
-                react_1.default.createElement(BackIcon, null),
-                react_1.default.createElement(LeftHeaderText, null, "Back"))) : null,
-            react_1.default.createElement(react_native_reanimated_1.default.View, { entering: react_native_reanimated_1.FadeIn, exiting: react_native_reanimated_1.FadeOut, style: { flex: 1, flexGrow: 3, flexShrink: 1 } },
-                react_1.default.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_1.default.createElement(react_native_1.View, { style: { flex: 1, flexGrow: 1, flexShrink: 1 } }, options.headerRight ? options.headerRight() : null)),
-        headline ? (react_1.default.createElement(HeadlineView, { entering: react_native_reanimated_1.FadeIn, exiting: react_native_reanimated_1.FadeOut }, (options === null || options === void 0 ? void 0 : options.title) ? (react_1.default.createElement(StyledHeading3, null, options.title)) : null)) : null));
+    return ((0, jsx_runtime_1.jsxs)(RootView, __assign({ layout: react_native_reanimated_1.Layout === null || react_native_reanimated_1.Layout === void 0 ? void 0 : react_native_reanimated_1.Layout.duration(150) }, { children: [(0, jsx_runtime_1.jsxs)(StyledView, __assign({ marginTop: options === null || options === void 0 ? void 0 : options.statusBarHeight }, { children: [(options === null || options === void 0 ? void 0 : options.headerLeft) ? (options === null || options === void 0 ? void 0 : options.headerLeft()) : (options === null || options === void 0 ? void 0 : options.canGoBack()) ? ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, __assign({ style: {
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            flex: 1,
+                            flexGrow: 1,
+                            flexShrink: 1,
+                        }, onPress: options === null || options === void 0 ? void 0 : options.goBack }, { children: [(0, jsx_runtime_1.jsx)(BackIcon, {}), (0, jsx_runtime_1.jsx)(LeftHeaderText, { children: "Back" })] }))) : null, (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ entering: react_native_reanimated_1.FadeIn, exiting: react_native_reanimated_1.FadeOut, style: { flex: 1, flexGrow: 3, flexShrink: 1 } }, { children: (0, jsx_runtime_1.jsx)(StyledHeading4, __assign({ textAlign: (options === null || options === void 0 ? void 0 : options.canGoBack()) ? 'center' : 'left', numberOfLines: 1 }, { children: !headline ? options === null || options === void 0 ? void 0 : options.title : ' ' })) })), (0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ style: { flex: 1, flexGrow: 1, flexShrink: 1 } }, { children: options.headerRight ? options.headerRight() : null }))] })), headline ? ((0, jsx_runtime_1.jsx)(HeadlineView, __assign({ entering: react_native_reanimated_1.FadeIn, exiting: react_native_reanimated_1.FadeOut }, { children: (options === null || options === void 0 ? void 0 : options.title) ? ((0, jsx_runtime_1.jsx)(StyledHeading3, { children: options.title })) : null }))) : null] })));
 };
 exports.NavHeader = NavHeader;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;