@ovotech/element-native 3.8.0 → 3.8.1-canary-dff71b6-233

package/dist/esm/components/Grid/Col.js

@@ -2,13 +2,13 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
-import { pxToNumber } from '../../utils/utils';
 var StyledCol = styled.View(function (_a) {
     var core = _a.theme.core, _b = _a.span, span = _b === void 0 ? 12 : _b, small = _a.small, medium = _a.medium, large = _a.large, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
     var gutter = [core.space[4], core.space[8]];
-    var halfGutter = gutter.map(function (g) { return pxToNumber(g) / 2 + 'px'; });
+    var halfGutter = gutter.map(function (g) { return g / 2; });
     var smallScreen = !smallAndUp;
     var percentage = (span / 12) * 100;
     var smallPercentage = small ? (small / 12) * 100 : percentage;
@@ -26,7 +26,7 @@ var StyledCol = styled.View(function (_a) {
             ? mediumPercentage
             : smallAndUp
                 ? smallPercentage
-                : percentage, smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? gutter[0] : gutter[1]);
+                : percentage, numToPx(smallScreen ? halfGutter[0] : halfGutter[1]), numToPx(smallScreen ? halfGutter[0] : halfGutter[1]), numToPx(smallScreen ? gutter[0] : gutter[1]));
 });
 var Col = styledComponentWithBreakpoints(StyledCol);
 export { Col };

package/dist/esm/components/Grid/Row.js

@@ -25,16 +25,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
-import { pxToNumber } from '../../utils/utils';
 var StyledRow = styled.View(function (_a) {
     var core = _a.theme.core, isNested = _a.isNested, smallAndUp = _a.smallAndUp;
     var gutter = [core.space[4], core.space[8]];
-    var halfGutter = gutter.map(function (g) { return pxToNumber(g) / 2 + 'px'; });
+    var halfGutter = gutter.map(function (g) { return g / 2; });
     var smallScreen = !smallAndUp;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n      margin: 0 auto;\n      width: ", "px;\n      max-width: 100%;\n      margin-bottom: -", ";\n\n      ", "\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n      margin: 0 auto;\n      width: ", "px;\n      max-width: 100%;\n      margin-bottom: -", ";\n\n      ", "\n    "])), smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], core.breakpoint.large, smallScreen ? gutter[0] : gutter[1], isNested
-        ? "\n      margin-left: -".concat(smallScreen ? gutter[0] : gutter[1], ";\n      margin-right: -").concat(smallScreen ? gutter[0] : gutter[1], ";\n      width: auto;\n      max-width: 200%; /* max width none not supported in RN */\n    ")
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n      margin: 0 auto;\n      width: ", "px;\n      max-width: 100%;\n      margin-bottom: -", ";\n\n      ", "\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n      margin: 0 auto;\n      width: ", "px;\n      max-width: 100%;\n      margin-bottom: -", ";\n\n      ", "\n    "])), numToPx(smallScreen ? halfGutter[0] : halfGutter[1]), numToPx(smallScreen ? halfGutter[0] : halfGutter[1]), core.breakpoint.large, numToPx(smallScreen ? gutter[0] : gutter[1]), isNested
+        ? "\n      margin-left: -".concat(numToPx(smallScreen ? gutter[0] : gutter[1]), ";\n      margin-right: -").concat(numToPx(smallScreen ? gutter[0] : gutter[1]), ";\n      width: auto;\n      max-width: 200%; /* max width none not supported in RN */\n    ")
         : null);
 });
 var WidthRow = styledComponentWithBreakpoints(StyledRow);

package/dist/esm/components/Heading1/Heading1.js

@@ -25,16 +25,18 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber, numToPx } from '@ovotech/element-core';
 import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
-import { pxToNumber, numToPx } from '../../utils';
 var calculateLetterSpacing = function (fontSize, letterSpacing) {
     return numToPx(pxToNumber(fontSize) * letterSpacing);
 };
 var StyledHeading1 = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
     var fontSize = core.fontSize.heading1[smallAndUp ? 'large' : 'small'];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.heading.native, fontSize, core.lineHeight.heading1[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.extraCompressed), semantic.message.branded);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.heading.native, numToPx(fontSize), numToPx(core.lineHeight.heading1[smallAndUp ? 'large' : 'small']), calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed), inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded);
 });
 export var Heading1 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);

package/dist/esm/components/Heading2/Heading2.js

@@ -25,16 +25,18 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber, numToPx } from '@ovotech/element-core';
 import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
-import { pxToNumber, numToPx } from '../../utils';
 var calculateLetterSpacing = function (fontSize, letterSpacing) {
     return numToPx(pxToNumber(fontSize) * letterSpacing);
 };
 var StyledHeading2 = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
     var fontSize = core.fontSize.heading2[smallAndUp ? 'large' : 'small'];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.heading.native, fontSize, core.lineHeight.heading2[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.extraCompressed), semantic.message.branded);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.heading.native, numToPx(fontSize), numToPx(core.lineHeight.heading2[smallAndUp ? 'large' : 'small']), calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed), inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded);
 });
 export var Heading2 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);

package/dist/esm/components/Heading3/Heading3.js

@@ -25,16 +25,18 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber, numToPx } from '@ovotech/element-core';
 import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
-import { pxToNumber, numToPx } from '../../utils';
 var calculateLetterSpacing = function (fontSize, letterSpacing) {
     return numToPx(pxToNumber(fontSize) * letterSpacing);
 };
 var StyledHeading3 = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
     var fontSize = core.fontSize.heading3[smallAndUp ? 'large' : 'small'];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.bodyBold.native, fontSize, core.lineHeight.heading3[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.compressed), semantic.message.branded);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.bodyBold.native, numToPx(fontSize), numToPx(core.lineHeight.heading3[smallAndUp ? 'large' : 'small']), calculateLetterSpacing(String(fontSize), core.letterSpacing.compressed), inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded);
 });
 export var Heading3 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);

package/dist/esm/components/Heading4/Heading4.js

@@ -25,16 +25,18 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber, numToPx } from '@ovotech/element-core';
 import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
-import { pxToNumber, numToPx } from '../../utils';
 var calculateLetterSpacing = function (fontSize, letterSpacing) {
     return numToPx(pxToNumber(fontSize) * letterSpacing);
 };
 var StyledHeading4 = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
     var fontSize = core.fontSize.heading4[smallAndUp ? 'large' : 'small'];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.bodyBold.native, fontSize, core.lineHeight.heading4[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.compressed), semantic.message.branded);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.bodyBold.native, numToPx(fontSize), numToPx(core.lineHeight.heading4[smallAndUp ? 'large' : 'small']), calculateLetterSpacing(String(fontSize), core.letterSpacing.compressed), inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded);
 });
 export var Heading4 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);

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

@@ -2,6 +2,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 var StyledHintText = styled.Text(function (_a) {
@@ -9,9 +10,7 @@ var StyledHintText = styled.Text(function (_a) {
     var fontSize = smallAndUp
         ? core.fontSize.body.large
         : core.fontSize.body.small;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "])), core.fontFamily.body.native, fontSize, smallAndUp
-        ? core.lineHeight.body.large
-        : core.lineHeight.body.small, semantic.border.functional);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "])), core.fontFamily.body.native, numToPx(fontSize), numToPx(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small), semantic.border.functional);
 });
 var HintText = styledComponentWithBreakpoints(StyledHintText);
 export { HintText };

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

@@ -25,13 +25,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
 import { forwardRef, useState } from 'react';
 import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon/Icon';
 var StyledIcon = styled(Icon)(function (_a) {
     var core = _a.theme.core, side = _a.side, focused = _a.focused;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "], ["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "])), focused ? '16px' : '14px', side === 'left' ? "left: ".concat(core.space[2]) : '', side === 'right' ? "right: ".concat(core.space[2]) : '');
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "], ["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "])), focused ? '16px' : '14px', side === 'left' ? "left: ".concat(numToPx(core.space[2])) : '', side === 'right' ? "right: ".concat(numToPx(core.space[2])) : '');
 });
 var Input = forwardRef(function (_a, ref) {
     var onFocus = _a.onFocus, onBlur = _a.onBlur, style = _a.style, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rightSlot = _a.rightSlot, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight", "rightSlot"]);
@@ -53,8 +54,8 @@ var Input = forwardRef(function (_a, ref) {
 });
 var InputWrapper = styled.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, focused = _a.focused;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "], ["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "])), core.radius.small, semantic.border.functional, focused
-        ? "\n      border-width: ".concat(core.borderWidth.small, ";\n      border-color: ").concat(semantic.focus.outline, ";\n      padding: 2px;\n      margin: -4px;")
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "], ["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "])), numToPx(core.radius.small), semantic.border.functional, focused
+        ? "\n      border-width: ".concat(numToPx(core.borderWidth.small), ";\n      border-color: ").concat(semantic.focus.outline, ";\n      padding: 2px;\n      margin: -4px;")
         : null);
 });
 var StyledInput = styled.TextInput(function (_a) {
@@ -65,7 +66,9 @@ var StyledInput = styled.TextInput(function (_a) {
     var errorStyles = invalid
         ? "\n        border-color: ".concat(semantic.message.error, ";\n      ")
         : '';
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          font-family: ", ";\n          color: ", ";\n          font-size: ", ";\n          height: ", ";\n          line-height: 18px; /* Corrects for responsive line height in fixed height input */\n          border: ", " solid ", ";\n          border-radius: ", ";\n          padding: 0 ", ";\n          flex: 1;\n\n          ", "\n          ", "\n\n          ", "\n        "], ["\n          font-family: ", ";\n          color: ", ";\n          font-size: ", ";\n          height: ", ";\n          line-height: 18px; /* Corrects for responsive line height in fixed height input */\n          border: ", " solid ", ";\n          border-radius: ", ";\n          padding: 0 ", ";\n          flex: 1;\n\n          ", "\n          ", "\n\n          ", "\n        "])), core.fontFamily.body.native, semantic.message.base, fontSize, core.space[11], core.borderWidth.small, semantic.border.functional, core.radius.small, core.space[2], iconLeft ? "padding-left: ".concat(core.space[8], ";") : '', iconRight || hasRightSlot ? "padding-right: ".concat(core.space[8], ";") : '', errorStyles);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-family: ", ";\n      color: ", ";\n      font-size: ", ";\n      height: ", ";\n      line-height: 18px; /* Corrects for responsive line height in fixed height input */\n      border: ", " solid\n        ", ";\n      border-radius: ", ";\n      padding: 0 ", ";\n      flex: 1;\n\n      ", "\n      ", "\n\n          ", "\n    "], ["\n      font-family: ", ";\n      color: ", ";\n      font-size: ", ";\n      height: ", ";\n      line-height: 18px; /* Corrects for responsive line height in fixed height input */\n      border: ", " solid\n        ", ";\n      border-radius: ", ";\n      padding: 0 ", ";\n      flex: 1;\n\n      ", "\n      ", "\n\n          ", "\n    "])), core.fontFamily.body.native, semantic.message.base, numToPx(fontSize), numToPx(core.space[11]), numToPx(core.borderWidth.small), semantic.border.functional, numToPx(core.radius.small), numToPx(core.space[2]), iconLeft ? "padding-left: ".concat(numToPx(core.space[8]), ";") : '', iconRight || hasRightSlot
+        ? "padding-right: ".concat(numToPx(core.space[8]), ";")
+        : '', errorStyles);
 });
 export { Input };
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/esm/components/Label/Label.js

@@ -2,11 +2,24 @@ 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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { forwardRef } from 'react';
 import styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
 var StyledLabel = styled.Text(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.label[smallAndUp ? 'large' : 'small'], core.lineHeight.label[smallAndUp ? 'large' : 'small']);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, numToPx(core.fontSize.label[smallAndUp ? 'large' : 'small']), numToPx(core.lineHeight.label[smallAndUp ? 'large' : 'small']), inverted ? semantic.inverted.message.base : semantic.message.base);
 });
-export var Label = styledComponentWithBreakpoints(StyledLabel);
+export var Label = forwardRef(function (props, ref) { return (_jsx(StyledLabel, __assign({}, props, { ref: ref }))); });
 var templateObject_1;

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

@@ -2,6 +2,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 var StyledLabelText = styled.Text(function (_a) {
@@ -9,7 +10,7 @@ var StyledLabelText = styled.Text(function (_a) {
     var fontSize = smallAndUp
         ? core.fontSize.body.large
         : core.fontSize.body.small;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), core.fontFamily.bodyBold.native, core.lineHeight.body.small, semantic.message.base, fontSize);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), core.fontFamily.bodyBold.native, numToPx(core.lineHeight.body.small), semantic.message.base, numToPx(fontSize));
 });
 var LabelText = styledComponentWithBreakpoints(StyledLabelText);
 export { LabelText };

package/dist/esm/components/Lead/Lead.js

@@ -2,11 +2,26 @@ 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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { forwardRef } from 'react';
 import styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
 var StyledLead = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.lead[smallAndUp ? 'large' : 'small'], core.lineHeight.lead[smallAndUp ? 'large' : 'small'], semantic.message.branded);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, numToPx(core.fontSize.lead[smallAndUp ? 'large' : 'small']), numToPx(core.lineHeight.lead[smallAndUp ? 'large' : 'small']), inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded);
 });
-export var Lead = styledComponentWithBreakpoints(StyledLead);
+export var Lead = forwardRef(function (props, ref) { return (_jsx(StyledLead, __assign({}, props, { ref: ref }))); });
 var templateObject_1;

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

@@ -2,15 +2,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
-import { pxToNumber } from '../../utils';
 export var SquareBullet = styled.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, visible = _a.visible, smallAndUp = _a.smallAndUp;
     var lineHeight = smallAndUp
         ? core.lineHeight.body.large
         : core.lineHeight.body.small;
-    var topMargin = (pxToNumber(lineHeight) - pxToNumber(core.space[2])) / 2;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-self: flex-start;\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    margin-top: ", "px;\n    background-color: ", ";\n  "], ["\n    align-self: flex-start;\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    margin-top: ", "px;\n    background-color: ", ";\n  "])), core.space[2], core.space[2], core.space[2], topMargin, visible ? semantic.message.base : 'transparent');
+    var topMargin = (lineHeight - core.space[2]) / 2;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-self: flex-start;\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    background-color: ", ";\n  "], ["\n    align-self: flex-start;\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    background-color: ", ";\n  "])), numToPx(core.space[2]), numToPx(core.space[2]), numToPx(core.space[2]), numToPx(topMargin), visible ? semantic.message.base : 'transparent');
 });
 export var TextBullet = styled.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
@@ -20,7 +20,7 @@ export var TextBullet = styled.Text(function (_a) {
     var lineHeight = smallAndUp
         ? core.lineHeight.body.large
         : core.lineHeight.body.small;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      margin-right: ", ";\n      min-width: ", ";\n      min-height: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      text-align: left;\n      color: ", ";\n    "], ["\n      margin-right: ", ";\n      min-width: ", ";\n      min-height: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      text-align: left;\n      color: ", ";\n    "])), core.space[1], core.space[3], core.space[3], fontSize, lineHeight, semantic.message.base);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      margin-right: ", ";\n      min-width: ", ";\n      min-height: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      text-align: left;\n      color: ", ";\n    "], ["\n      margin-right: ", ";\n      min-width: ", ";\n      min-height: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      text-align: left;\n      color: ", ";\n    "])), numToPx(core.space[1]), numToPx(core.space[3]), numToPx(core.space[3]), numToPx(fontSize), numToPx(lineHeight), semantic.message.base);
 });
 export var FlexRow = styled.View(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
 export var LiContent = styled.View(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex-direction: column;\n  flex: 1;\n"], ["\n  flex-direction: column;\n  flex: 1;\n"])));

package/dist/esm/components/Margin/Margin.js

@@ -21,14 +21,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
 import { useBreakpoint } from '../../hooks';
 import styled from '../../styled.native';
 import { responsiveStyle } from '../../utils';
 var StyledMargin = styled.View(function (_a) {
     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];
-    };
+    var formatter = function (spaceKey) { return numToPx(space[spaceKey]); };
     return "\n    ".concat(horizontal
         ? "\n            ".concat(responsiveStyle('margin-left', horizontal, breakpoints, formatter), "\n            ").concat(responsiveStyle('margin-right', horizontal, breakpoints, formatter), "\n          ")
         : '', "\n    ").concat(vertical

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

@@ -11,47 +11,43 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { theme } from '@ovotech/element-core';
-import { useEffect } from 'react';
 import Animated, { Easing, FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { Action } from '../ActionList';
 import { IconButton } from './IconButton';
-import { ActionWrapper, CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, } from './NavHeader.styles';
+import { ActionWrapper, CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, NavWrapper, } from './NavHeader.styles';
 var FADE_ANIMATION_DURATION = 200;
-var ONLY_TITLE_CONTAINER_HEIGHT = 108;
-var TITLE_AND_BACK_CONTAINER_HEIGHT = 92;
 export var NavHeader = function (_a) {
-    var title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, _b = _a.backButtonText, backButtonText = _b === void 0 ? 'Back' : _b, onBackButtonPress = _a.onBackButtonPress;
+    var title = _a.title, scrolled = _a.scrolled, canGoBack = _a.canGoBack, rightActionConfig = _a.rightActionConfig, _b = _a.topOffset, topOffset = _b === void 0 ? 0 : _b, _c = _a.backButtonText, backButtonText = _c === void 0 ? 'Back' : _c, onHeaderHeightChange = _a.onHeaderHeightChange, onBackButtonPress = _a.onBackButtonPress;
     var hasRightAction = !!rightActionConfig;
-    var initialContainerHeight = canGoBack
-        ? TITLE_AND_BACK_CONTAINER_HEIGHT
-        : ONLY_TITLE_CONTAINER_HEIGHT;
-    var animatedContainerHeight = useSharedValue(initialContainerHeight);
+    var layoutHeight = useSharedValue(0);
     var animatedHeightStyle = useAnimatedStyle(function () {
         return {
-            height: animatedContainerHeight.value,
+            height: layoutHeight.value,
         };
     });
-    useEffect(function () {
-        if (scrolled) {
-            animatedContainerHeight.value = withTiming(56, {
-                duration: FADE_ANIMATION_DURATION,
-                easing: Easing.linear,
-            });
+    var onLayout = function (e) {
+        var height = e.nativeEvent.layout.height;
+        if (height === layoutHeight.value) {
+            return;
         }
-        else {
-            animatedContainerHeight.value = withTiming(initialContainerHeight, {
-                duration: FADE_ANIMATION_DURATION,
-                easing: Easing.linear,
-            });
+        // we want to only update height of the expanded header to set content offset on the client side
+        if (!scrolled) {
+            onHeaderHeightChange === null || onHeaderHeightChange === void 0 ? void 0 : onHeaderHeightChange(height);
         }
-    }, [scrolled]);
-    return (_jsxs(NavContainer, __assign({ collapsed: scrolled, style: [animatedHeightStyle] }, { children: [_jsx(Animated.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(theme.core.space[10]) : undefined,
-                } }, { children: canGoBack && (_jsx(ActionWrapper, __assign({ collapsed: scrolled }, { children: _jsx(Action, __assign({ iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress }, { children: backButtonText })) }))) })), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { children: _jsx(CollapsedTitle, __assign({ numberOfLines: 1, ellipsizeMode: "tail", entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION) }, { children: title })) }), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(ExpandedTitle
-                    // if we don't have right action leave more space for the title text in expanded state
-                    , __assign({ 
+        layoutHeight.value = withTiming(height, {
+            duration: FADE_ANIMATION_DURATION,
+            easing: Easing.linear,
+        });
+    };
+    // NavWrapper will recieve height of the NavContainer and animate it
+    // content inside NavContainer is the only dynamic part of NavHeader
+    return (_jsx(NavWrapper, __assign({ collapsed: scrolled, style: animatedHeightStyle }, { children: _jsxs(NavContainer, __assign({ topOffset: topOffset, onLayout: onLayout }, { children: [_jsx(Animated.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(theme.core.space[10]) : undefined,
+                    } }, { children: canGoBack && (_jsx(ActionWrapper, __assign({ collapsed: scrolled }, { children: _jsx(Action, __assign({ iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress }, { children: backButtonText })) }))) })), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { children: _jsx(CollapsedTitle, __assign({ numberOfLines: 1, ellipsizeMode: "tail", entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION) }, { children: title })) }), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(ExpandedTitle
                         // if we don't have right action leave more space for the title text in expanded state
-                        fullWidth: !scrolled && !hasRightAction, numberOfLines: 1, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION) }, { children: title })), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] })));
+                        , __assign({ 
+                            // if we don't have right action leave more space for the title text in expanded state
+                            fullWidth: !scrolled && !hasRightAction, numberOfLines: 2, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION) }, { children: title })), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] })) })));
 };

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

@@ -2,42 +2,43 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+import { numToPx } from '@ovotech/element-core';
 import Animated from 'react-native-reanimated';
 import styled, { css } from '../../styled.native';
-export var NavContainer = styled(Animated.View)(function (_a) {
+var Z_INDEX = 1000;
+export var NavWrapper = styled(Animated.View)(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, collapsed = _a.collapsed;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    background-color: ", ";\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    ", "\n  "], ["\n    width: 100%;\n    background-color: ", ";\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    ", "\n  "])), semantic.surface.base, core.space[2], collapsed
-        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-bottom-width: 1px;\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "], ["\n          border-bottom-width: 1px;\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "])), semantic.border.differentiated) : '');
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    position: absolute;\n    /* yes, it is not a good move, but we want header to be the topmost element on the screen and we can't control app zIndex */\n    z-index: ", ";\n\n    background-color: ", ";\n\n    ", "\n  "], ["\n    width: 100%;\n    position: absolute;\n    /* yes, it is not a good move, but we want header to be the topmost element on the screen and we can't control app zIndex */\n    z-index: ", ";\n\n    background-color: ", ";\n\n    ", "\n  "])), Z_INDEX, semantic.surface.base, collapsed
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "], ["\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "])), numToPx(core.borderWidth.small), semantic.border.differentiated) : '');
+});
+export var NavContainer = styled.View(function (_a) {
+    var core = _a.theme.core, topOffset = _a.topOffset;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n\n    padding: ", " ", ";\n    padding-top: ", ";\n  "], ["\n    position: absolute;\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n\n    padding: ", " ", ";\n    padding-top: ", ";\n  "])), Z_INDEX + 1, numToPx(core.space[2]), numToPx(core.space[4]), numToPx(topOffset ? topOffset : core.space[2]));
 });
 export var ExpandedTitle = styled(Animated.Text)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBackButton = _a.hasBackButton, fullWidth = _a.fullWidth;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, core.fontSize.heading1[hasBackButton ? 'small' : 'large'], hasBackButton
-        ? core.lineHeight.heading1.small
-        : core.space[13], hasBackButton ? core.lineHeight.heading1.small : core.space[13], semantic.message.branded);
-});
-export var CollapsedTitleWrapper = styled(Animated.View)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"], ["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"])), function (_a) {
-    var core = _a.theme.core;
-    return core.lineHeight.heading4.small;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, numToPx(core.fontSize.heading1[hasBackButton ? 'small' : 'large']), numToPx(hasBackButton ? core.lineHeight.heading1.small : core.space[13]), semantic.message.branded);
 });
+export var CollapsedTitleWrapper = styled(Animated.View)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 33.3%;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 33.3%;\n  align-items: center;\n  justify-content: center;\n"])));
 export var CollapsedTitle = styled(Animated.Text)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.heading.native, core.fontSize.heading4.small, core.lineHeight.heading4.small, semantic.message.branded);
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.heading.native, numToPx(core.fontSize.heading4.small), numToPx(core.lineHeight.heading4.small), semantic.message.branded);
 });
-export var IconButtonWrapper = styled.View(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"], ["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"])));
+export var IconButtonWrapper = styled.View(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"], ["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"])));
 var iconButtonSharedStyles = css(function (_a) {
     var semantic = _a.theme.semantic;
     return "\n    border-radius: 100px;\n    background-color: ".concat(semantic.inverted.surface, ";\n    align-items: center;\n    justify-content: center;\n");
 });
-export var StyledIconButtonS = styled(Animated.View)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+export var StyledIconButtonS = styled(Animated.View)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
     var $pressed = _a.$pressed;
     return ($pressed ? 0.8 : 1);
 }, iconButtonSharedStyles);
-export var StyledIconButtonL = styled(Animated.View)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+export var StyledIconButtonL = styled(Animated.View)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
     var $pressed = _a.$pressed;
     return ($pressed ? 0.8 : 1);
 }, iconButtonSharedStyles);
 export var ActionWrapper = styled.View(function (_a) {
     var core = _a.theme.core, collapsed = _a.collapsed;
-    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), collapsed ? '0' : core.space[2]);
+    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), collapsed ? '0' : numToPx(core.space[2]));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

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

@@ -25,51 +25,54 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
 import { forwardRef, useState } from 'react';
 import { View } from 'react-native';
 import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon';
 var NotificationBox = styled.View(function (_a) {
-    var core = _a.theme.core, noMargin = _a.noMargin;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    border: ", " solid ", ";\n    border-radius: ", ";\n    margin-bottom: ", ";\n    overflow: hidden;\n  "], ["\n    position: relative;\n    border: ", " solid ", ";\n    border-radius: ", ";\n    margin-bottom: ", ";\n    overflow: hidden;\n  "])), core.borderWidth.medium, core.color.brand.white, core.radius.small, noMargin ? 0 : core.space[4]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, noMargin = _a.noMargin;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    margin-bottom: ", ";\n    border: ", " solid\n      ", ";\n    border-radius: ", ";\n    overflow: hidden;\n  "], ["\n    position: relative;\n    margin-bottom: ", ";\n    border: ", " solid\n      ", ";\n    border-radius: ", ";\n    overflow: hidden;\n  "])), noMargin ? 0 : numToPx(core.space[4]), numToPx(core.borderWidth.small), semantic.surface.elevated, numToPx(core.radius.max));
 });
 export var NotificationContentBox = styled.View(function (_a) {
-    var core = _a.theme.core;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), core.color.brand.white, core.space[2], core.space[3], core.space[4], core.space[4]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      background-color: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), semantic.surface.elevated, numToPx(core.space[2]), numToPx(core.space[3]), numToPx(core.space[4]), numToPx(core.space[4]));
 });
 export var NotificationTitleBox = styled.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, variant = _a.variant, dismissible = _a.dismissible;
     var currentVariant = semantic[variant];
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), currentVariant.surface, core.space[2], core.space[2], core.space[4], dismissible ? core.space[3] : core.space[4]);
+    return 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, numToPx(core.space[2]), numToPx(core.space[2]), numToPx(core.space[4]), dismissible
+        ? numToPx(core.space[3])
+        : numToPx(core.space[4]));
 });
 var NotificationTitleText = styled.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, variant = _a.variant;
     var currentVariant = semantic[variant];
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "])), core.fontSize.body.small, core.fontFamily.bodyBold.native, currentVariant.message);
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "])), numToPx(core.fontSize.body.small), core.fontFamily.bodyBold.native, currentVariant.message);
 });
-var DismissButton = styled.TouchableOpacity(function () {
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    width: 16px;\n    height: 16px;\n    margin-left: auto;\n  "], ["\n    width: 16px;\n    height: 16px;\n    margin-left: auto;\n  "])));
+var DismissButton = styled.TouchableOpacity(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return 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        ", ";\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        ", ";\n      border-radius: ", ";\n    "])), semantic.inverted.surface, numToPx(core.borderWidth.small), core.color.brand.forest, numToPx(core.radius.max));
 });
 var StyledIcon = styled(Icon)(function (_a) {
-    var semantic = _a.theme.semantic, variant = _a.variant;
-    var currentVariant = semantic[variant];
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), currentVariant.message);
+    var semantic = _a.theme.semantic;
+    return "\n    color: ".concat(semantic.inverted.message.base, ";\n  ");
 });
 export var Notification = forwardRef(function (_a, ref) {
-    var _b = _a.variant, variant = _b === void 0 ? 'info' : _b, children = _a.children, title = _a.title, noMargin = _a.noMargin, 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 = useState(false), dismissed = _c[0], setDismissed = _c[1];
     if (dismissed || (!title && !children)) {
         return null;
     }
-    return (_jsx(View, __assign({ ref: ref }, rest, { children: _jsxs(NotificationBox, __assign({ noMargin: noMargin, testID: "nb-notification" }, { children: [_jsxs(NotificationTitleBox, __assign({ variant: variant, dismissible: dismissible }, { children: [_jsx(NotificationTitleText, __assign({ variant: variant }, { children: title })), dismissible ? (_jsx(DismissButton, __assign({ accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
+    return (_jsx(View, __assign({ ref: ref }, rest, { children: _jsxs(NotificationBox, __assign({ noMargin: noMargin, testID: "nb-notification" }, { children: [_jsxs(NotificationTitleBox, __assign({ variant: variant, dismissible: dismissible }, { children: [_jsx(NotificationTitleText, __assign({ variant: variant }, { children: title })), dismissible ? (_jsx(DismissButton, __assign({ accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
                                 setDismissed(true);
                                 if (onDismiss) {
                                     onDismiss();
                                 }
-                            } }, { children: _jsx(StyledIcon, { variant: variant, name: "cross", size: "16" }) }))) : null] })), children ? (_jsx(NotificationContentBox, __assign({ "data-testid": "el-notification-box" }, { children: children }))) : null] })) })));
+                            } }, { children: _jsx(StyledIcon, { name: "cross", size: "16" }) }))) : null] })), children ? (_jsx(NotificationContentBox, __assign({ "data-testid": "el-notification-box" }, { children: children }))) : null] })) })));
 });
 export var ErrorNotification = forwardRef(function (props, ref) { return _jsx(Notification, __assign({ ref: ref, variant: "error" }, props)); });
 export var SuccessNotification = forwardRef(function (props, ref) { return (_jsx(Notification, __assign({ ref: ref, variant: "success" }, props))); });
 export var InfoNotification = forwardRef(function (props, ref) { return _jsx(Notification, __assign({ ref: ref, variant: "info" }, props)); });
 export var WarningNotification = forwardRef(function (props, ref) { return _jsx(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;