@ovotech/element-native 4.4.8 → 4.5.0

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

@@ -1,17 +1,18 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    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) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
+const StyledHintText = styled.Text(({ theme: { core, semantic }, smallAndUp }) => {
+    const fontSize = smallAndUp
         ? core.fontSize.body.large
         : core.fontSize.body.small;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "], ["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "])), numToPx(core.space[1]), numToPx(core.space[1]), core.fontFamily.body.native, numToPx(fontSize), numToPx(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small), semantic.border.functional);
+    return css `
+      margin-top: ${numToPx(core.space[1])};
+      margin-bottom: ${numToPx(core.space[1])};
+      font-family: ${core.fontFamily.body.native};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small)};
+      color: ${semantic.border.functional};
+    `;
 });
-var HintText = styledComponentWithBreakpoints(StyledHintText);
+const HintText = styledComponentWithBreakpoints(StyledHintText);
 export { HintText };
-var templateObject_1;

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

@@ -1,36 +1,13 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
 import { useIcons } from '../../providers';
 import { ThemeContext } from '../../styled.native';
-export var Icon = function (_a) {
-    var name = _a.name, size = _a.size, color = _a.color, testID = _a.testID, rest = __rest(_a, ["name", "size", "color", "testID"]);
-    var icons = useIcons();
-    var semantic = useContext(ThemeContext).semantic;
+export const Icon = ({ name, size, color, testID, ...rest }) => {
+    const icons = useIcons();
+    const { semantic } = useContext(ThemeContext);
     // @ts-ignore to support additional icons.
-    var Svg = name && icons[name];
-    return Svg ? (_jsx(Svg, __assign({ testID: testID ? testID : "element-icon".concat(name ? "-".concat(name) : ''), 
+    const Svg = name && icons[name];
+    return Svg ? (_jsx(Svg, { testID: testID ? testID : `element-icon${name ? `-${name}` : ''}`, 
         // @ts-ignore this is valid.
-        color: color !== null && color !== void 0 ? color : semantic.message.base, width: size, height: size }, rest))) : null;
+        color: color ?? semantic.message.base, width: size, height: size, ...rest })) : null;
 };

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

@@ -1,74 +1,78 @@
-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++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    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 { 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(numToPx(core.space[2])) : '', side === 'right' ? "right: ".concat(numToPx(core.space[2])) : '');
+const StyledIcon = styled(Icon)(({ theme: { core }, side, focused }) => {
+    return css `
+    position: absolute;
+    z-index: 1;
+    top: ${focused ? '16px' : '14px'};
+    ${side === 'left' ? `left: ${numToPx(core.space[2])}` : ''};
+    ${side === 'right' ? `right: ${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"]);
-    var _b = useState(false), focused = _b[0], setFocused = _b[1];
-    var breakpoints = useBreakpoint();
-    return (_jsxs(InputWrapper, { focused: focused, children: [iconLeft ? (_jsx(StyledIcon, { name: iconLeft, size: 16, focused: focused, pointerEvents: "none", side: "left" })) : null, _jsx(StyledInput, __assign({}, rest, breakpoints, { iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, 
+const Input = ({ onFocus, onBlur, style, iconLeft, iconRight, rightSlot, ref, ...rest }) => {
+    const [focused, setFocused] = useState(false);
+    const breakpoints = useBreakpoint();
+    return (_jsxs(InputWrapper, { focused: focused, children: [iconLeft ? (_jsx(StyledIcon, { name: iconLeft, size: 16, focused: focused, pointerEvents: "none", side: "left" })) : null, _jsx(StyledInput, { ...rest, ...breakpoints, iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, 
                 // @ts-ignore
-                ref: ref, onFocus: function (event) {
+                ref: ref, onFocus: (event) => {
                     setFocused(true);
                     if (onFocus) {
                         onFocus(event);
                     }
-                }, onBlur: function (event) {
+                }, onBlur: (event) => {
                     setFocused(false);
                     if (onBlur) {
                         onBlur(event);
                     }
-                } })), iconRight && !rightSlot ? (_jsx(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
-});
-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  "])), 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) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, smallAndUp = _a.smallAndUp, iconLeft = _a.iconLeft, iconRight = _a.iconRight, hasRightSlot = _a.hasRightSlot;
-    var fontSize = smallAndUp
+                } }), iconRight && !rightSlot ? (_jsx(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
+};
+const InputWrapper = styled.View(({ theme: { core, semantic }, focused }) => css `
+    align-self: stretch;
+    border-radius: ${numToPx(core.radius.small)};
+    border-width: 0;
+    border-style: solid;
+    border-color: ${semantic.border.functional};
+    flex-direction: row;
+
+    ${focused
+    ? `
+      border-width: ${numToPx(core.borderWidth.small)};
+      border-color: ${semantic.focus.outline};
+      padding: 2px;
+      margin: -4px;`
+    : null}
+  `);
+const StyledInput = styled.TextInput(({ theme: { core, semantic }, invalid, smallAndUp, iconLeft, iconRight, hasRightSlot, }) => {
+    const fontSize = smallAndUp
         ? core.fontSize.body.large
         : core.fontSize.body.small;
-    var errorStyles = invalid
-        ? "\n        border-color: ".concat(semantic.message.error, ";\n      ")
+    const errorStyles = invalid
+        ? `
+        border-color: ${semantic.message.error};
+      `
         : '';
-    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);
+    return css `
+      font-family: ${core.fontFamily.body.native};
+      color: ${semantic.message.base};
+      font-size: ${numToPx(fontSize)};
+      height: ${numToPx(core.space[11])};
+      line-height: 18px; /* Corrects for responsive line height in fixed height input */
+      border: ${numToPx(core.borderWidth.small)} solid
+        ${semantic.border.functional};
+      border-radius: ${numToPx(core.radius.small)};
+      padding: 0 ${numToPx(core.space[2])};
+      flex: 1;
+
+      ${iconLeft ? `padding-left: ${numToPx(core.space[8])};` : ''}
+      ${iconRight || hasRightSlot
+        ? `padding-right: ${numToPx(core.space[8])};`
+        : ''}
+
+          ${errorStyles}
+    `;
 });
 export { Input };
-var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,25 +1,10 @@
-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++) {
-            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';
-var StyledLabel = styled.Text(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, component = _b.component, 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  "])), component.label.fontFamily, numToPx(component.label.fontSize[smallAndUp ? 'large' : 'small']), numToPx(component.label.lineHeight[smallAndUp ? 'large' : 'small']), inverted ? semantic.inverted.message.base : semantic.message.base);
-});
-export var Label = forwardRef(function (props, ref) { return (_jsx(StyledLabel, __assign({}, props, { ref: ref }))); });
-var templateObject_1;
+const StyledLabel = styled.Text(({ theme: { semantic, component }, smallAndUp, inverted }) => css `
+    font-family: ${component.label.fontFamily};
+    font-size: ${numToPx(component.label.fontSize[smallAndUp ? 'large' : 'small'])};
+    line-height: ${numToPx(component.label.lineHeight[smallAndUp ? 'large' : 'small'])};
+    color: ${inverted ? semantic.inverted.message.base : semantic.message.base};
+  `);
+export const Label = ({ ref, ...props }) => (_jsx(StyledLabel, { ...props, ref: ref }));

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

@@ -1,17 +1,16 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    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) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
+const StyledLabelText = styled.Text(({ theme: { core, semantic }, smallAndUp }) => {
+    const 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, numToPx(core.lineHeight.body.small), semantic.message.base, numToPx(fontSize));
+    return css `
+      font-family: ${core.fontFamily.bodyBold.native};
+      line-height: ${numToPx(core.lineHeight.body.small)};
+      color: ${semantic.message.base};
+      font-size: ${numToPx(fontSize)};
+    `;
 });
-var LabelText = styledComponentWithBreakpoints(StyledLabelText);
+const LabelText = styledComponentWithBreakpoints(StyledLabelText);
 export { LabelText };
-var templateObject_1;

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

@@ -1,27 +1,12 @@
-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++) {
-            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';
-var StyledLead = styled.Text(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, component = _b.component, 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  "])), component.lead.fontFamily, numToPx(component.lead.fontSize[smallAndUp ? 'large' : 'small']), numToPx(component.lead.lineHeight[smallAndUp ? 'large' : 'small']), inverted
-        ? semantic.inverted.message.link
-        : semantic.message.branded);
-});
-export var Lead = forwardRef(function (props, ref) { return (_jsx(StyledLead, __assign({}, props, { ref: ref }))); });
-var templateObject_1;
+const StyledLead = styled.Text(({ theme: { semantic, component }, smallAndUp, inverted }) => css `
+    font-family: ${component.lead.fontFamily};
+    font-size: ${numToPx(component.lead.fontSize[smallAndUp ? 'large' : 'small'])};
+    line-height: ${numToPx(component.lead.lineHeight[smallAndUp ? 'large' : 'small'])};
+    color: ${inverted
+    ? semantic.inverted.message.link
+    : semantic.message.branded};
+  `);
+export const Lead = ({ ref, ...props }) => (_jsx(StyledLead, { ...props, ref: ref }));

package/dist/esm/components/LineThrough/LineThrough.js

@@ -1,7 +1,4 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import styled from '../../styled.native';
-export var LineThrough = styled.Text(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: line-through;\n"], ["\n  text-decoration: line-through;\n"])));
-var templateObject_1;
+export const LineThrough = styled.Text `
+  text-decoration: line-through;
+`;

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

@@ -5,25 +5,22 @@ import { getValidChildren } from '../../utils';
 import { Margin } from '../Margin';
 import { Stack } from '../Stack';
 import { FlexRow, LiContent, SquareBullet, TextBullet } from './styled';
-var ListItem = function (_a) {
-    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, prefix = _a.prefix;
+const ListItem = ({ children, showBullets = true, prefix, }) => {
     return (_jsxs(FlexRow, { children: [prefix ? (_jsx(TextBullet, { children: prefix })) : (_jsx(SquareBullet, { visible: showBullets })), _jsx(LiContent, { children: children })] }));
 };
-var renderList = function (_a) {
-    var children = _a.children, listType = _a.listType, showBullets = _a.showBullets;
-    var validChildren = getValidChildren(children);
-    return Children.map(validChildren, function (child, index) { return (_jsx(ListItem, { prefix: listType === 'ol' ? "".concat(index + 1, ".") : undefined, showBullets: showBullets, children: child })); });
+const renderList = ({ children, listType, showBullets, }) => {
+    const validChildren = getValidChildren(children);
+    return Children.map(validChildren, (child, index) => (_jsx(ListItem, { prefix: listType === 'ol' ? `${index + 1}.` : undefined, showBullets: showBullets, children: child })));
 };
-var Li = function (_a) {
-    var children = _a.children;
+const Li = ({ children }) => {
     return _jsx(View, { style: { flexDirection: 'column' }, children: children });
 };
-var Ul = function (props) {
-    var children = props.children, showBullets = props.showBullets;
-    return (_jsx(Margin, { top: 2, children: _jsx(Stack, { spaceBetween: 2, children: renderList({ children: children, listType: 'ul', showBullets: showBullets }) }) }));
+const Ul = (props) => {
+    const { children, showBullets } = props;
+    return (_jsx(Margin, { top: 2, children: _jsx(Stack, { spaceBetween: 2, children: renderList({ children, listType: 'ul', showBullets }) }) }));
 };
-var Ol = function (props) {
-    var children = props.children;
-    return (_jsx(Margin, { top: 2, children: _jsx(Stack, { spaceBetween: 2, children: renderList({ children: children, listType: 'ol' }) }) }));
+const Ol = (props) => {
+    const { children } = props;
+    return (_jsx(Margin, { top: 2, children: _jsx(Stack, { spaceBetween: 2, children: renderList({ children, listType: 'ol' }) }) }));
 };
 export { Li, Ol, Ul };

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

@@ -1,27 +1,40 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    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';
-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
+export const SquareBullet = styled.View(({ theme: { core, semantic }, visible, smallAndUp }) => {
+    const lineHeight = smallAndUp
         ? core.lineHeight.body.large
         : core.lineHeight.body.small;
-    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');
+    const topMargin = (lineHeight - core.space[2]) / 2;
+    return css `
+    align-self: flex-start;
+    width: ${numToPx(core.space[2])};
+    height: ${numToPx(core.space[2])};
+    margin-right: ${numToPx(core.space[2])};
+    margin-top: ${numToPx(topMargin)};
+    background-color: ${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;
-    var fontSize = smallAndUp
+export const TextBullet = styled.Text(({ theme: { core, semantic }, smallAndUp }) => {
+    const fontSize = smallAndUp
         ? core.fontSize.body.large
         : core.fontSize.body.small;
-    var lineHeight = smallAndUp
+    const 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    "])), numToPx(core.space[1]), numToPx(core.space[3]), numToPx(core.space[3]), numToPx(fontSize), numToPx(lineHeight), semantic.message.base);
+    return css `
+      margin-right: ${numToPx(core.space[1])};
+      min-width: ${numToPx(core.space[3])};
+      min-height: ${numToPx(core.space[3])};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(lineHeight)};
+      text-align: left;
+      color: ${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"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+export const FlexRow = styled.View `
+  flex-direction: row;
+`;
+export const LiContent = styled.View `
+  flex-direction: column;
+  flex: 1;
+`;

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

@@ -1,46 +1,36 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    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 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
-        ? "\n            ".concat(responsiveStyle('margin-top', vertical, breakpoints, formatter), "\n            ").concat(responsiveStyle('margin-bottom', vertical, breakpoints, formatter), "\n          ")
-        : '', "\n    ").concat(mTop ? responsiveStyle('margin-top', mTop, breakpoints, formatter) : '', "\n    ").concat(mBottom
+const StyledMargin = styled.View(({ theme: { core: { space }, }, mTop, mBottom, mLeft, mRight, horizontal, vertical, all, breakpoints, }) => {
+    const formatter = (spaceKey) => numToPx(space[spaceKey]);
+    return `
+    ${horizontal
+        ? `
+            ${responsiveStyle('margin-left', horizontal, breakpoints, formatter)}
+            ${responsiveStyle('margin-right', horizontal, breakpoints, formatter)}
+          `
+        : ''}
+    ${vertical
+        ? `
+            ${responsiveStyle('margin-top', vertical, breakpoints, formatter)}
+            ${responsiveStyle('margin-bottom', vertical, breakpoints, formatter)}
+          `
+        : ''}
+    ${mTop ? responsiveStyle('margin-top', mTop, breakpoints, formatter) : ''}
+    ${mBottom
         ? responsiveStyle('margin-bottom', mBottom, breakpoints, formatter)
-        : '', "\n    ").concat(mLeft ? responsiveStyle('margin-left', mLeft, breakpoints, formatter) : '', "\n    ").concat(mRight
+        : ''}
+    ${mLeft ? responsiveStyle('margin-left', mLeft, breakpoints, formatter) : ''}
+    ${mRight
         ? responsiveStyle('margin-right', mRight, breakpoints, formatter)
-        : '', "\n    ").concat(all ? responsiveStyle('margin', all, breakpoints, formatter) : '', "\n  ");
+        : ''}
+    ${all ? responsiveStyle('margin', all, breakpoints, formatter) : ''}
+  `;
 });
-var Margin = function (_a) {
-    var top = _a.top, bottom = _a.bottom, left = _a.left, right = _a.right, rest = __rest(_a, ["top", "bottom", "left", "right"]);
-    var breakpoints = useBreakpoint();
-    return (_jsx(StyledMargin, __assign({}, rest, { breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right })));
+const Margin = ({ top, bottom, left, right, ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledMargin, { ...rest, breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right }));
 };
 export { Margin };

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

@@ -3,15 +3,11 @@ import { Pressable } from 'react-native';
 import { useTheme } from '../../styled.native';
 import { Icon } from '../Icon';
 import { StyledIconButtonL, StyledIconButtonS } from './NavHeader.styles';
-export var IconButton = function (_a) {
-    var size = _a.size, animation = _a.animation, rightActionConfig = _a.rightActionConfig;
-    var ButtonStyled = size === 'small' ? StyledIconButtonS : StyledIconButtonL;
-    var theme = useTheme();
-    if (!rightActionConfig || !(rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.iconName)) {
+export const IconButton = ({ size, animation, rightActionConfig, }) => {
+    const ButtonStyled = size === 'small' ? StyledIconButtonS : StyledIconButtonL;
+    const theme = useTheme();
+    if (!rightActionConfig || !rightActionConfig?.iconName) {
         return null;
     }
-    return (_jsx(Pressable, { hitSlop: theme.core.space[2], pressRetentionOffset: theme.core.space[2], onPress: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.onActionPress, accessibilityRole: "button", accessibilityLabel: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityLabel, accessibilityHint: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityHint, children: function (_a) {
-            var pressed = _a.pressed;
-            return (_jsx(ButtonStyled, { entering: animation, "$pressed": pressed, children: _jsx(Icon, { name: rightActionConfig.iconName, size: size === 'small' ? 16 : 18, color: theme.semantic.inverted.message.base }) }));
-        } }));
+    return (_jsx(Pressable, { hitSlop: theme.core.space[2], pressRetentionOffset: theme.core.space[2], onPress: rightActionConfig?.onActionPress, accessibilityRole: "button", accessibilityLabel: rightActionConfig?.accessibilityLabel, accessibilityHint: rightActionConfig?.accessibilityHint, children: ({ pressed }) => (_jsx(ButtonStyled, { entering: animation, "$pressed": pressed, children: _jsx(Icon, { name: rightActionConfig.iconName, size: size === 'small' ? 16 : 18, color: theme.semantic.inverted.message.base }) })) }));
 };

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

@@ -4,26 +4,25 @@ import { useTheme } from '../../styled.native';
 import { Action } from '../ActionList';
 import { IconButton } from './IconButton';
 import { ActionWrapper, CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, NavWrapper, } from './NavHeader.styles';
-var FADE_ANIMATION_DURATION = 200;
-export var NavHeader = function (_a) {
-    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 hasTitle = title !== undefined && (title === null || title === void 0 ? void 0 : title.length) > 0;
-    var theme = useTheme();
-    var layoutHeight = useSharedValue(0);
-    var animatedHeightStyle = useAnimatedStyle(function () {
+const FADE_ANIMATION_DURATION = 200;
+export const NavHeader = ({ title, scrolled, canGoBack, rightActionConfig, topOffset = 0, backButtonText = 'Back', onHeaderHeightChange, onBackButtonPress, }) => {
+    const hasRightAction = !!rightActionConfig;
+    const hasTitle = title !== undefined && title?.length > 0;
+    const theme = useTheme();
+    const layoutHeight = useSharedValue(0);
+    const animatedHeightStyle = useAnimatedStyle(() => {
         return {
             height: layoutHeight.value,
         };
     });
-    var onLayout = function (e) {
-        var height = e.nativeEvent.layout.height;
+    const onLayout = (e) => {
+        const { height } = e.nativeEvent.layout;
         if (height === layoutHeight.value) {
             return;
         }
         // 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);
+            onHeaderHeightChange?.(height);
         }
         layoutHeight.value = withTiming(height, {
             duration: FADE_ANIMATION_DURATION,