@ovotech/element-native 3.3.2-canary-71b07de-141 → 3.3.2

package/dist/components/List/List.d.ts

@@ -1,5 +1,5 @@
-import { PropsWithChildren, ReactNode } from 'react';
-import { ViewProps } from 'react-native';
+import { PropsWithChildren } from 'react';
+import { Text, View, ViewProps } from 'react-native';
 declare const ListWrapper: import("react").ForwardRefExoticComponent<Pick<Omit<{
     [x: string]: any;
     [x: number]: any;
@@ -11,7 +11,7 @@ declare const ListWrapper: import("react").ForwardRefExoticComponent<Pick<Omit<{
             borderWidth: Record<"small" | "medium" | "large", string>;
             breakpoint: Record<"small" | "medium" | "large", string | number>;
             mediaQuery: Record<"small" | "medium" | "large", string>;
-            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
             transition: Record<"medium" | "slow" | "fast", string>;
             opacity: Record<"solid" | "transparent" | "translucent", string | number>;
             color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
@@ -236,12 +236,246 @@ declare const ListWrapper: import("react").ForwardRefExoticComponent<Pick<Omit<{
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
-}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<import("react-native/types").View>>;
-declare const Li: ({ children, ...rest }: {
-    children: ReactNode | ReactNode[];
-}) => JSX.Element;
+}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<View>>;
 declare const Ul: ({ children, showBullets, ...rest }: PropsWithChildren<ViewProps & {
     showBullets?: boolean | undefined;
 }>) => JSX.Element;
 declare const Ol: ({ children, ...rest }: PropsWithChildren<ViewProps>) => JSX.Element;
+declare const Li: import("react").ForwardRefExoticComponent<Pick<Omit<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: {
+        core: {
+            radius: Record<"small" | "medium" | "large" | "max", string>;
+            borderWidth: Record<"small" | "medium" | "large", string>;
+            breakpoint: Record<"small" | "medium" | "large", string | number>;
+            mediaQuery: Record<"small" | "medium" | "large", string>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+            transition: Record<"medium" | "slow" | "fast", string>;
+            opacity: Record<"solid" | "transparent" | "translucent", string | number>;
+            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
+                lightest: string;
+                lighter: string;
+                light: string;
+                base: string;
+                dark: string;
+                darker: string;
+                darkest: string;
+            }> & {
+                brand: Record<string, string>;
+            };
+            fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
+                native: string;
+                web: string;
+            }>;
+            fontWeight: Record<"bold" | "book" | "black", string | number>;
+            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+                small: string | number;
+                large: string | number;
+            }>;
+            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+                small: string | number;
+                large: string | number;
+            }>;
+            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
+        };
+        semantic: {
+            surface: Record<"base" | "cutout" | "elevated", string>;
+            message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+            border: Record<"graphic" | "differentiated" | "functional", string>;
+            focus: Record<"surface" | "outline" | "hover", string>;
+            inverted: Record<"surface" | "border", string> & {
+                message: Record<"base" | "link" | "secondary" | "branded", string>;
+            };
+            success: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
+            warning: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
+            error: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
+            info: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
+            data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
+        };
+        component: {
+            heading1: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            heading2: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            heading3: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            heading4: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            lead: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            body: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            small: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            label: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            cta: {
+                primary: {
+                    message: string;
+                    surface: string;
+                    messageHover: string;
+                    surfaceHover: string;
+                    messageFocused: string;
+                    surfaceFocused: string;
+                    outlineFocused: string;
+                    backgroundFocused: string;
+                };
+                secondary: {
+                    message: string;
+                    surface: string;
+                    messageHover: string;
+                    surfaceHover: string;
+                    messageFocused: string;
+                    surfaceFocused: string;
+                    outlineFocused: string;
+                    backgroundFocused: string;
+                };
+                destructive: {
+                    message: string;
+                    surface: string;
+                    messageHover: string;
+                    surfaceHover: string;
+                    messageFocused: string;
+                    surfaceFocused: string;
+                    outlineFocused: string;
+                    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;
+                    };
+                };
+            };
+        };
+    } | undefined;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<Text>>;
 export { Ul, Ol, Li, ListWrapper };

package/dist/components/List/List.js

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,6 +14,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -25,64 +52,84 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListWrapper = exports.Li = exports.Ol = exports.Ul = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var Stack_1 = require("../Stack");
-var styled_1 = require("./styled");
+var react_native_1 = require("react-native");
+var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
-var Bullet = (0, utils_1.styledComponentWithBreakpoints)(styled_1.StyledBullet);
-var ListWrapper = (0, utils_1.styledComponentWithBreakpoints)(styled_1.StyledList);
-exports.ListWrapper = ListWrapper;
+var Stack_1 = require("../Stack");
+var UlBullet = styled_native_1.default.View(function (_a) {
+    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
+        ? 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, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    var lineHeight = smallAndUp
+        ? 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 (_a) {
+    var core = _a.theme.core, level = _a.level;
+    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    padding-left: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    padding-left: ", ";\n  "])), core.space[level]);
+});
+var Bullet = (0, utils_1.styledComponentWithBreakpoints)(StyledBullet);
 var ListBulletItem = function (_a) {
     var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, level = _a.level;
-    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledUlItem, __assign({ level: level }, { children: [(0, jsx_runtime_1.jsx)(styled_1.UlBullet, { visible: showBullets }), children] })));
+    return ((0, jsx_runtime_1.jsxs)(StyledUlItem, __assign({ level: level }, { children: [(0, jsx_runtime_1.jsx)(UlBullet, { visible: showBullets }), children] })));
 };
 var ListNumberedItem = function (_a) {
-    var children = _a.children, prefix = _a.prefix, level = _a.level;
-    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledOlItem, __assign({ level: level }, { children: [(0, jsx_runtime_1.jsx)(Bullet, { children: prefix }), children] })));
+    var children = _a.children, prefix = _a.prefix;
+    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 renderList = function (_a) {
-    var arrayChildren = _a.arrayChildren, _b = _a.level, level = _b === void 0 ? 0 : _b, showBullets = _a.showBullets, listType = _a.listType;
-    return react_1.Children.map(arrayChildren, function (child, index) {
-        var _a, _b, _c, _d;
-        // Checking if there are any child types, i.e. nodes
-        if (
-        // @ts-ignore
-        Array.isArray((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children) &&
-            // @ts-ignore
-            (child.type.name === 'Ul' || child.type.name === 'Ol')) {
-            var lvl = level;
-            var PADDING = 3;
-            lvl = lvl + PADDING;
-            return renderList({
-                // @ts-ignore It complains that child props doesn't exist. Weird.
-                arrayChildren: (_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.children,
+var StyledList = styled_native_1.default.View(function (_a) {
+    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 renderList = function (arrayChildren, level) {
+        if (level === void 0) { level = 0; }
+        return react_1.Children.map(arrayChildren, function (child) {
+            var _a, _b, _c;
+            // @ts-ignore It complains that child props doesn't exist. Weird.
+            if (Array.isArray((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children) && ((_b = child === null || child === void 0 ? void 0 : child.type) === null || _b === void 0 ? void 0 : _b.name) === 'Ul') {
+                var lvl = level;
+                var PADDING = 3;
+                lvl = lvl + PADDING;
                 // @ts-ignore It complains that child props doesn't exist. Weird.
-                listType: (_d = (_c = child === null || child === void 0 ? void 0 : child.type) === null || _c === void 0 ? void 0 : _c.name) === null || _d === void 0 ? void 0 : _d.toLowerCase(),
-                showBullets: showBullets,
-                level: lvl,
-            });
-        }
-        else {
-            if (listType === 'ul') {
-                return ((0, jsx_runtime_1.jsx)(ListBulletItem, __assign({ showBullets: showBullets, level: level }, { children: child })));
+                return renderList((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.children, lvl);
             }
             else {
-                return ((0, jsx_runtime_1.jsx)(ListNumberedItem, __assign({ level: level, prefix: "".concat(index + 1, ".") }, { children: child })));
+                return ((0, jsx_runtime_1.jsx)(ListBulletItem, __assign({ showBullets: showBullets, level: level }, { children: child })));
             }
-        }
-    });
-};
-var Li = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return (0, jsx_runtime_1.jsx)(styled_1.StyledLi, __assign({}, rest, { children: children }));
-};
-exports.Li = Li;
-var Ul = function (_a) {
-    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, rest = __rest(_a, ["children", "showBullets"]);
-    return ((0, jsx_runtime_1.jsx)(ListWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, __assign({ spaceBetween: 2 }, { children: renderList({ arrayChildren: children, listType: 'ul', showBullets: showBullets }) })) })));
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)(ListWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, __assign({ spaceBetween: 2 }, { children: renderList(children) })) })));
 };
 exports.Ul = Ul;
 var Ol = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)(ListWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, __assign({ spaceBetween: 2 }, { children: renderList({ arrayChildren: children, listType: 'ol' }) })) })));
+    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, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    var lineHeight = smallAndUp
+        ? 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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -18,7 +18,7 @@ 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 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 3 | 4 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
         color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {

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

@@ -1,9 +1,16 @@
-import { RightActionConfig } from './IconButton';
-export declare type NavHeaderProps = {
+/// <reference types="react" />
+declare type NavHeaderProps = {
+    headline?: boolean;
+    options: NavHeaderOptions;
+};
+declare type NavHeaderOptions = {
     title?: string;
-    scrolled: boolean;
-    rightActionConfig?: RightActionConfig;
-    canGoBack?: boolean;
-    goBack?: () => void;
+    statusBarHeight?: number;
+    header?(): React.ReactNode;
+    headerLeft?(): React.ReactNode;
+    headerRight?(): React.ReactNode;
+    canGoBack(): boolean;
+    goBack(): void;
 };
-export declare const NavHeader: ({ title, scrolled, rightActionConfig, canGoBack, goBack, }: NavHeaderProps) => JSX.Element;
+export declare const NavHeader: ({ options, headline }: NavHeaderProps) => JSX.Element;
+export {};

package/dist/components/NavHeader/NavHeader.js

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -36,46 +40,51 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavHeader = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var react_1 = require("react");
+var react_native_1 = require("react-native");
 var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-var use_layout_1 = require("../../hooks/use-layout");
-var ActionList_1 = require("../ActionList");
-var IconButton_1 = require("./IconButton");
-var NavHeader_styles_1 = require("./NavHeader.styles");
-// calculated based on layout with maximum possible height
-var INITIAL_HEADER_HEIGHT = 115;
-var FADE_ANIMATION_DURATION = 250; // ms
+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 ((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, 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 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 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 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 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, 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 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 title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, goBack = _a.goBack;
-    var _b = (0, use_layout_1.useLayout)(INITIAL_HEADER_HEIGHT), layout = _b[0], onLayout = _b[1];
-    var navHeight = (0, react_native_reanimated_1.useSharedValue)(layout.height); // initial value
-    var animatedNavHeight = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
-        return {
-            height: navHeight.value,
-        };
-    });
-    // take children calculated height and change NavContainer height accordingly but with animation
-    (0, react_1.useEffect)(function () {
-        (0, react_native_reanimated_1.runOnUI)(function () {
-            'worklet';
-            navHeight.value = (0, react_native_reanimated_1.withTiming)(Math.floor(layout.height), {
-                duration: FADE_ANIMATION_DURATION,
-            });
-        })();
-    }, [layout.height]);
-    // NavContainer is animated view, height transition will be smooth
-    // in order to tell NavContainer which height it children have we need another NavWrapper
-    // back-button, title and right-action has wrappers with 33.3% and they are always rendered
-    // we need it for correct placing of the title when either back-button or right-action missing
-    return ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.NavContainer, __assign({ style: animatedNavHeight }, { children: (0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavWrapper, __assign({ onLayout: onLayout }, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: {
-                        width: scrolled ? '33.3%' : '100%',
-                        // when back button is off we have small margin top for title, to write less code we can just set height
-                        height: !canGoBack ? parseInt(element_core_1.theme.core.space[10]) : undefined,
-                    }, layout: react_native_reanimated_1.Layout.delay(FADE_ANIMATION_DURATION) }, { children: canGoBack && ((0, jsx_runtime_1.jsx)(ActionList_1.Action, __assign({ actionType: "back", onPress: goBack }, { children: "Back" }))) })), scrolled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitleWrapper, { children: (0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitle, __assign({ numberOfLines: 1, ellipsizeMode: "tail", entering: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutDown.duration(FADE_ANIMATION_DURATION) }, { children: title })) }), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.ExpandedTitle
-                        // if we don't have right action leave more space for the title text in expanded state
-                        , __assign({ 
-                            // if we don't have right action leave more space for the title text in expanded state
-                            fullWidth: !scrolled && !rightActionConfig, numberOfLines: 1, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutUp.duration(FADE_ANIMATION_DURATION) }, { children: title })), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] })) })));
+    var options = _a.options, headline = _a.headline;
+    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;

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

@@ -1 +1 @@
-export { NavHeader, NavHeaderProps } from './NavHeader';
+export { NavHeader } from './NavHeader';

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

@@ -8,7 +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>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 3 | 4 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
         color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
@@ -236,7 +236,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>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 3 | 4 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
         color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {

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

@@ -17,7 +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>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 3 | 4 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
         color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {