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

package/dist/components/Toggle/styles.js

@@ -4,15 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledToggleDot = exports.StyledToggleInput = exports.StyledToggleInputWrapper = exports.StyledWrapper = void 0;
+var element_core_1 = require("@ovotech/element-core");
 var react_native_1 = require("react-native");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 exports.StyledWrapper = styled_native_1.default.TouchableOpacity(function (_a) {
     var core = _a.theme.core, hasLabel = _a.hasLabel, labelPosition = _a.labelPosition;
-    return "\n    width: ".concat(hasLabel ? '100%' : core.space[11], ";\n    display: flex;\n    flex-direction: row").concat(labelPosition === 'left' ? '' : '-reverse', ";\n    justify-content: space-between;\n    position: relative;\n  ");
+    return "\n    width: ".concat(hasLabel ? '100%' : (0, element_core_1.numToPx)(core.space[11]), ";\n    display: flex;\n    flex-direction: row").concat(labelPosition === 'left' ? '' : '-reverse', ";\n    justify-content: space-between;\n    position: relative;\n  ");
 });
 exports.StyledToggleInputWrapper = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, labelPosition = _a.labelPosition;
-    return "\n    width: ".concat(core.space[11], ";\n    height: ").concat(core.space[6], ";\n    ").concat(labelPosition
+    return "\n    width: ".concat((0, element_core_1.numToPx)(core.space[11]), ";\n    height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n    ").concat(labelPosition
         ? labelPosition === 'left'
             ? 'margin-left: 10px;'
             : 'margin-right: 10px;'
@@ -20,9 +21,9 @@ exports.StyledToggleInputWrapper = styled_native_1.default.View(function (_a) {
 });
 exports.StyledToggleInput = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, checked = _a.checked;
-    return "\n      width: ".concat(core.space[11], ";\n      height: ").concat(core.space[6], ";\n      justify-content: center;\n      border-radius: ").concat(core.radius.large, ";\n      background: ").concat(checked ? core.color.brand.ovo : core.color.neutral.lighter, ";\n    ");
+    return "\n      width: ".concat((0, element_core_1.numToPx)(core.space[11]), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n      justify-content: center;\n      border-radius: ").concat((0, element_core_1.numToPx)(core.radius.large), ";\n      background: ").concat(checked ? core.color.brand.ovo : core.color.neutral.lighter, ";\n    ");
 });
 exports.StyledToggleDot = (0, styled_native_1.default)(react_native_1.Animated.View)(function (_a) {
     var core = _a.theme.core, checked = _a.checked;
-    return "\n  position: absolute;\n  width: ".concat(core.space[4], ";\n  height: ").concat(core.space[4], ";\n  border-radius: ").concat(core.space[4], ";\n  background-color: ").concat(checked ? core.color.brand.white : core.color.neutral.dark, ";\n");
+    return "\n  position: absolute;\n  width: ".concat((0, element_core_1.numToPx)(core.space[4]), ";\n  height: ").concat((0, element_core_1.numToPx)(core.space[4]), ";\n  border-radius: ").concat((0, element_core_1.numToPx)(core.space[4]), ";\n  background-color: ").concat(checked ? core.color.brand.white : core.color.neutral.dark, ";\n");
 });

package/dist/components/index.d.ts

@@ -58,3 +58,5 @@ export * from './TextInput';
 export * from './TextLink';
 export * from './Toggle';
 export * from './Toast';
+export * from './ProductCarousel';
+export * from './RadioCard';

package/dist/components/index.js

@@ -74,3 +74,5 @@ __exportStar(require("./TextInput"), exports);
 __exportStar(require("./TextLink"), exports);
 __exportStar(require("./Toggle"), exports);
 __exportStar(require("./Toast"), exports);
+__exportStar(require("./ProductCarousel"), exports);
+__exportStar(require("./RadioCard"), exports);

package/dist/esm/components/Accordion/Accordion.js

@@ -29,7 +29,6 @@ import { Component, useCallback, useContext, useEffect, useMemo, useState, } fro
 import Animated, { interpolateColor, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { useLayout } from '../../hooks/use-layout';
 import { ThemeContext } from '../../styled.native';
-import { pxToNumber } from '../../utils';
 import { Heading4 } from '../Heading4';
 import { AccordionGroupContext } from './Group';
 import { AccordionIcon } from './Icon';
@@ -55,14 +54,10 @@ export var Accordion = function (_a) {
     var _c = useContext(ThemeContext), core = _c.core, semantic = _c.semantic;
     var Header = useContext(AccordionGroupContext).Header;
     var AccordionHeading = Header !== null && Header !== void 0 ? Header : Heading4;
-    var AnimatedHeading = useMemo(function () { return withAnimated(AccordionHeading); }, [
-        AccordionHeading,
-    ]);
+    var AnimatedHeading = useMemo(function () { return withAnimated(AccordionHeading); }, [AccordionHeading]);
     var _d = useLayout(0), layout = _d[0], onLayout = _d[1];
     var _e = useState(expanded), open = _e[0], setOpen = _e[1];
-    var handleHeightContent = useMemo(function () { return layout.height || 100; }, [
-        layout.height,
-    ]);
+    var handleHeightContent = useMemo(function () { return layout.height || 100; }, [layout.height]);
     var size = useSharedValue(handleHeightContent);
     useEffect(function () {
         runOnUI(function () {
@@ -101,8 +96,8 @@ export var Accordion = function (_a) {
     return (_jsxs(StyledAccordion, __assign({ first: first, last: last, isExpanded: open }, { children: [_jsxs(StyledAccordionHeader, __assign({ accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle" }, { children: [_jsx(AnimatedHeading, __assign({ style: [
                             headerStyle,
                             {
-                                paddingTop: pxToNumber(core.space[1]),
-                                paddingRight: pxToNumber(core.space[3]),
+                                paddingTop: core.space[1],
+                                paddingRight: core.space[3],
                                 marginTop: 0,
                                 marginBottom: 0,
                                 flexShrink: 1,

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

@@ -2,11 +2,12 @@ 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 StyledAccordion = styled(Animated.View)(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, first = _a.first, last = _a.last, isExpanded = _a.isExpanded;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "], ["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "])), core.borderWidth.small, semantic.border.differentiated, isExpanded ? core.color.brand.white : 'transparent', core.transition.fast, first
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "], ["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "])), numToPx(core.borderWidth.small), semantic.border.differentiated, isExpanded ? core.color.brand.white : 'transparent', core.transition.fast, first
         ? {
             borderTopLeftRadius: core.radius.small,
             borderTopRightRadius: core.radius.small,
@@ -21,10 +22,10 @@ export var StyledAccordion = styled(Animated.View)(function (_a) {
 });
 export var StyledAccordionHeader = styled.TouchableOpacity(function (_a) {
     var core = _a.theme.core;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "], ["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "])), core.space[5], core.space[3]);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "], ["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "])), numToPx(core.space[5]), numToPx(core.space[3]));
 });
 export var StyledContainer = styled.View(function (_a) {
     var core = _a.theme.core;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "])), core.space[12], core.space[6], core.space[3]);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "])), numToPx(core.space[12]), numToPx(core.space[6]), numToPx(core.space[3]));
 });
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/esm/components/ActionCard/ActionCard.js

@@ -10,6 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
 import MaskedView from '@react-native-masked-view/masked-view';
 import { useContext, useEffect } from 'react';
 import { Image, Pressable, View } from 'react-native';
@@ -22,7 +23,7 @@ var StyledCard = styled.Pressable(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
     var paddingVal = inline ? core.space[4] : core.space[6];
     var reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
-    return "\n      border-radius: ".concat(inline ? core.space[6] : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(paddingVal, ";\n      padding-bottom: ").concat(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal, ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
+    return "\n      border-radius: ".concat(inline ? numToPx(core.space[6]) : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(numToPx(paddingVal), ";\n      padding-bottom: ").concat(numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
 });
 var StyledP = styled(P)(function (_a) {
     var semantic = _a.theme.semantic, inverted = _a.inverted;
@@ -37,7 +38,7 @@ export var ActionCard = function (_a) {
         }
     }, []);
     var Heading = inline ? Heading3 : Heading2;
-    var cardPadding = parseInt(core.space[inline ? 4 : 6]);
+    var cardPadding = core.space[inline ? 4 : 6];
     var negativeMarginAdjustment = -cardPadding;
     return (_jsx(StyledCard, __assign({ onPress: onPressIndicator, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card") }, { children: _jsxs(View, __assign({ style: { flexDirection: 'row' } }, { children: [_jsx(View, __assign({ style: { flex: 1 } }, { children: _jsxs(Stack, __assign({ spaceBetween: 2 }, { children: [_jsx(Heading, __assign({ style: {
                                     color: inverted
@@ -46,7 +47,7 @@ export var ActionCard = function (_a) {
                                     paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
                                 }, testID: "".concat(testID, "-heading") }, { children: title })), _jsxs(View, { children: [typeof body === 'string' ? (_jsx(View, __assign({ style: {
                                             paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
-                                        } }, { children: _jsx(StyledP, __assign({ inverted: inverted }, { children: body })) }))) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, __assign({ top: 2 }, { children: _jsx(Action, __assign({ inverted: inverted, inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button") }, { children: buttonTitle })) }))) : (_jsx(Margin, __assign({ top: 4 }, { children: _jsx(CTAButton, __assign({ onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant }, { children: buttonTitle })) })))) : null] })] })) })), image ? (_jsx(MaskedView, __assign({ style: {
+                                        } }, { children: _jsx(StyledP, __assign({ inverted: inverted }, { children: body })) }))) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, __assign({ top: 2 }, { children: _jsx(Action, __assign({ inverted: inverted, inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: "chevron-right-small" }, { children: buttonTitle })) }))) : (_jsx(Margin, __assign({ top: 4 }, { children: _jsx(CTAButton, __assign({ onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant }, { children: buttonTitle })) })))) : null] })] })) })), image ? (_jsx(MaskedView, __assign({ style: {
                         flex: 1,
                         flexDirection: 'row',
                         height: '100%',

package/dist/esm/components/ActionList/ActionList.js

@@ -29,13 +29,14 @@ var ActionList = function (_a) {
     var children = _a.children, inverted = _a.inverted, rest = __rest(_a, ["children", "inverted"]);
     var childCount = children.length;
     return (_jsx(StyledActionList, __assign({}, rest, { children: Children.map(children, function (child, index) {
-            var _a;
+            var _a, _b;
             return cloneElement(child, {
                 fullWidth: 'always',
                 index: index,
                 hasBorder: childCount > 1 && index !== childCount - 1,
                 inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted,
                 inList: true,
+                iconRight: (_b = child.props.iconRight) !== null && _b !== void 0 ? _b : 'chevron-right-small',
             });
         }) })));
 };

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

@@ -2,17 +2,18 @@ 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 { Icon } from '../Icon';
 var StyledList = styled.View(function (_a) {
     var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), smallAndUp ? core.space[3] : core.space[2], smallAndUp ? core.space[3] : core.space[2]);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), numToPx(smallAndUp ? core.space[3] : core.space[2]), numToPx(smallAndUp ? core.space[3] : core.space[2]));
 });
 export var StyledActionList = styledComponentWithBreakpoints(StyledList);
 export var StyledActionWrapper = styled.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBorder = _a.hasBorder, inverted = _a.inverted;
-    return "\n  width: 100%;\n  align-self: flex-start;\n  border-bottom-width: ".concat(hasBorder ? core.borderWidth.small : 0, ";\n  border-bottom-style: solid;\n  border-bottom-color: ").concat(inverted ? semantic.inverted.border : semantic.border.graphic, ";\n");
+    return "\n  width: 100%;\n  align-self: flex-start;\n  border-bottom-width: ".concat(hasBorder ? numToPx(core.borderWidth.small) : 0, ";\n  border-bottom-style: solid;\n  border-bottom-color: ").concat(inverted ? semantic.inverted.border : semantic.border.graphic, ";\n");
 });
 export var StyledActionInner = styled.View(function (_a) {
     var fullWidth = _a.fullWidth, inline = _a.inline;
@@ -25,14 +26,14 @@ export var StyledActionText = styled.Text(function (_a) {
         : core.fontSize.body.small;
     return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      flex: ", ";\n    "], ["\n      color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      flex: ", ";\n    "])), inverted
         ? semantic.inverted.message.base
-        : semantic.message.base, core.fontFamily.bodyBold.native, fontSize, core.lineHeight.body.small, inList ? 1 : 'none');
+        : semantic.message.base, core.fontFamily.bodyBold.native, numToPx(fontSize), numToPx(core.lineHeight.body.small), inList ? 1 : 'none');
 });
 export var StyledRightIcon = styled(Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted, marginTop = _a.marginTop;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "], ["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1], core.space[marginTop]);
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "], ["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, numToPx(core.space[1]), numToPx(core.space[marginTop]));
 });
 export var StyledLeftIcon = styled(Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: start;\n  "], ["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: start;\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1], core.space[1]);
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: start;\n  "], ["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: start;\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, numToPx(core.space[1]), numToPx(core.space[1]));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/esm/components/Badge/Badge.js

@@ -25,6 +25,7 @@ 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';
 var StyledBadge = styled.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, component = _b.component, _c = _a.variant, variant = _c === void 0 ? 'info' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, customVariant = _a.customVariant;
@@ -42,7 +43,7 @@ var StyledBadge = styled.View(function (_a) {
         surface = customVariant.backgroundColor;
         message = customVariant.foregroundColor;
     }
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 0 ", ";\n      border-radius: 16px;\n      border: ", " solid ", ";\n      background-color: ", ";\n      align-self: flex-start;\n    "], ["\n      padding: 0 ", ";\n      border-radius: 16px;\n      border: ", " solid ", ";\n      background-color: ", ";\n      align-self: flex-start;\n    "])), core.space[2], core.borderWidth.medium, core.color.brand.white, inverted ? message : surface);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 0 ", ";\n      border-radius: 16px;\n      border: ", " solid\n        ", ";\n      background-color: ", ";\n      align-self: flex-start;\n    "], ["\n      padding: 0 ", ";\n      border-radius: 16px;\n      border: ", " solid\n        ", ";\n      background-color: ", ";\n      align-self: flex-start;\n    "])), numToPx(core.space[2]), numToPx(core.borderWidth.medium), core.color.brand.white, inverted ? message : surface);
 });
 var StyledBadgeText = styled.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, component = _b.component, _c = _a.variant, variant = _c === void 0 ? 'info' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, customVariant = _a.customVariant;
@@ -60,7 +61,7 @@ var StyledBadgeText = styled.Text(function (_a) {
         surface = customVariant.backgroundColor;
         message = customVariant.foregroundColor;
     }
-    return css(templateObject_2 || (templateObject_2 = __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, inverted ? surface : message, core.fontSize.body.small);
+    return css(templateObject_2 || (templateObject_2 = __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), inverted ? surface : message, numToPx(core.fontSize.body.small));
 });
 export var Badge = function (_a) {
     var children = _a.children, variant = _a.variant, inverted = _a.inverted, rest = __rest(_a, ["children", "variant", "inverted"]);

package/dist/esm/components/CTAButton/CTAButton.js

@@ -25,6 +25,7 @@ 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 } from 'react';
 import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
@@ -37,21 +38,21 @@ var CTAButtonWrapper = function (_a) {
 var StyledInner = styled.View(function (_a) {
     var _b = _a.theme, core = _b.core, component = _b.component, fullWidth = _a.fullWidth, variant = _a.variant;
     var currentVariant = component.cta[variant];
-    var borderRadius = parseFloat(core.space[11]) / 2 + 'px';
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: ", " ", ";\n    background-color: ", ";\n    border-radius: ", ";\n    min-height: ", ";\n    border: ", ";\n    justify-content: center;\n    align-items: center;\n    flex-direction: row;\n    flex-grow: 1;\n\n    ", ";\n  "], ["\n    padding: ", " ", ";\n    background-color: ", ";\n    border-radius: ", ";\n    min-height: ", ";\n    border: ", ";\n    justify-content: center;\n    align-items: center;\n    flex-direction: row;\n    flex-grow: 1;\n\n    ", ";\n  "])), core.space[2], core.space[4], currentVariant.surface, borderRadius, core.space[11], variant === 'secondary'
-        ? "solid ".concat(core.borderWidth.small, " ").concat(core.color.brand.forest)
+    var borderRadius = core.space[11] / 2 + 'px';
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: ", " ", ";\n    background-color: ", ";\n    border-radius: ", ";\n    min-height: ", ";\n    border: ", ";\n    justify-content: center;\n    align-items: center;\n    flex-direction: row;\n    flex-grow: 1;\n\n    ", ";\n  "], ["\n    padding: ", " ", ";\n    background-color: ", ";\n    border-radius: ", ";\n    min-height: ", ";\n    border: ", ";\n    justify-content: center;\n    align-items: center;\n    flex-direction: row;\n    flex-grow: 1;\n\n    ", ";\n  "])), numToPx(core.space[2]), numToPx(core.space[4]), currentVariant.surface, borderRadius, numToPx(core.space[11]), variant === 'secondary'
+        ? "solid ".concat(numToPx(core.borderWidth.small), " ").concat(core.color.brand.forest)
         : 'none', fullWidth === 'never'
         ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          flex-grow: 0;\n        "], ["\n          flex-grow: 0;\n        "]))) : '');
 });
 var StyledRightIcon = styled(Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, component = _b.component, variant = _a.variant;
     var currentVariant = component.cta[variant];
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      margin-left: ", ";\n      color: ", ";\n    "], ["\n      margin-left: ", ";\n      color: ", ";\n    "])), core.space[1], currentVariant.message);
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-left: ", ";\n    color: ", ";\n  "], ["\n    margin-left: ", ";\n    color: ", ";\n  "])), numToPx(core.space[1]), currentVariant.message);
 });
 var StyledLeftIcon = styled(Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, component = _b.component, variant = _a.variant;
     var currentVariant = component.cta[variant];
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin-right: ", ";\n      color: ", ";\n    "], ["\n      margin-right: ", ";\n      color: ", ";\n    "])), core.space[1], currentVariant.message);
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin-right: ", ";\n    color: ", ";\n  "], ["\n    margin-right: ", ";\n    color: ", ";\n  "])), numToPx(core.space[1]), currentVariant.message);
 });
 var StyledCTAButtonText = styled.Text(function (_a) {
     var _b = _a.theme, core = _b.core, component = _b.component, smallAndUp = _a.smallAndUp, variant = _a.variant;
@@ -59,7 +60,7 @@ var StyledCTAButtonText = styled.Text(function (_a) {
         ? core.fontSize.body.large
         : core.fontSize.body.small;
     var currentVariant = component.cta[variant];
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-align: center;\n    flex-shrink: 2;\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-align: center;\n    flex-shrink: 2;\n  "])), currentVariant.message, core.fontFamily.bodyBold.native, fontSize, core.lineHeight.body.small);
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-align: center;\n    flex-shrink: 2;\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-align: center;\n    flex-shrink: 2;\n  "])), currentVariant.message, core.fontFamily.bodyBold.native, numToPx(fontSize), numToPx(core.lineHeight.body.small));
 });
 var CTAButton = function (_a) {
     var _b = _a.iconLeft, iconLeft = _b === void 0 ? 'off' : _b, _c = _a.iconRight, iconRight = _c === void 0 ? 'off' : _c, children = _a.children, _d = _a.fullWidth, fullWidth = _d === void 0 ? 'small' : _d, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, rest = __rest(_a, ["iconLeft", "iconRight", "children", "fullWidth", "variant"]);

package/dist/esm/components/Card/Card.js

@@ -1,7 +1,8 @@
+import { numToPx } from '@ovotech/element-core';
 import styled from '../../styled.native';
 export var Card = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.inline, inline = _c === void 0 ? false : _c;
-    return "\n      background: ".concat(semantic.surface.elevated, ";\n      border: ").concat(inline
-        ? "".concat(core.borderWidth.small, " solid ").concat(semantic.border.differentiated)
-        : 'none', ";\n      padding: ").concat(core.space[4], ";\n      border-radius: ").concat(core.radius.small, ";\n    ");
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, smallAndUp = _a.smallAndUp;
+    return "\n      background: ".concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(inline
+        ? numToPx(core.space[smallAndUp ? 6 : 4])
+        : numToPx(core.space[smallAndUp ? 9 : 6]), ";\n      border-radius: ").concat(inline ? numToPx(core.radius.max) : 0, ";\n    ");
 });

package/dist/esm/components/Checkbox/Checkbox.js

@@ -25,6 +25,7 @@ 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 } from 'react';
 import { TouchableOpacity, View, } from 'react-native';
 import styled from '../../styled.native';
@@ -38,11 +39,11 @@ var StyledCheckboxInputWrapper = styled.View(function (_a) {
     var core = _a.theme.core;
     var checkboxSize = core.space[6];
     var gap = core.space[2];
-    return "\n      width: ".concat(parseInt(checkboxSize) + parseInt(gap), "px;\n      height: ").concat(core.space[11], ";\n    ");
+    return "\n      width: ".concat(numToPx(checkboxSize + gap), ";\n      height: ").concat(numToPx(core.space[11]), ";\n    ");
 });
 var StyledCheckboxInput = styled.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;
-    return "\n      width: ".concat(core.space[6], ";\n      height: ").concat(core.space[6], ";\n      border: ").concat(core.borderWidth.small, " solid;\n      margin-top: 10px;\n      border-radius: ").concat(core.radius.small, ";\n      border-color: ").concat(invalid
+    return "\n      width: ".concat(numToPx(core.space[6]), ";\n      height: ").concat(numToPx(core.space[6]), ";\n      border: ").concat(numToPx(core.borderWidth.small), " solid;\n      margin-top: 10px;\n      border-radius: ").concat(numToPx(core.radius.small), ";\n      border-color: ").concat(invalid
         ? semantic.message.error
         : checked
             ? core.color.blue.dark
@@ -61,7 +62,7 @@ var Input = function (_a) {
 };
 var CheckLabelText = styled(LabelText)(function (_a) {
     var core = _a.theme.core;
-    return "\n    padding-top: ".concat(core.space[3], ";\n  ");
+    return "\n    padding-top: ".concat(numToPx(core.space[3]), ";\n  ");
 });
 var StyledWrapper = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
 var Checkbox = forwardRef(function (_a, ref) {

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

@@ -2,61 +2,60 @@ 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';
 export var StyledTableContainer = styled.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-grow: 1;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "], ["\n    flex-grow: 1;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), core.borderWidth.small, semantic.border.differentiated);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-grow: 1;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "], ["\n    flex-grow: 1;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), numToPx(core.borderWidth.small), semantic.border.differentiated);
 });
 export var TableHeader = styled.View(function (_a) {
     var core = _a.theme.core, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding: ", " ", ";\n    flex: ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n  "], ["\n    padding: ", " ", ";\n    flex: ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n  "])), core.space[smallAndUp ? 3 : 2], core.space[1], cellWidth === 'auto' ? 1 : 0, cellWidth);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding: ", "\n      ", ";\n    flex: ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n  "], ["\n    padding: ", "\n      ", ";\n    flex: ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n  "])), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[1]), cellWidth === 'auto' ? 1 : 0, cellWidth);
 });
 export var TableHeaderText = styled.Text(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, smallAndUp = _a.smallAndUp;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: left;\n\n    flex-wrap: wrap;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: left;\n\n    flex-wrap: wrap;\n  "])), core.fontFamily.bodyBold.native, core.lineHeight.body[smallAndUp ? 'large' : 'small'], core.fontSize.body[smallAndUp ? 'large' : 'small'], semantic.message.base);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: left;\n\n    flex-wrap: wrap;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: left;\n\n    flex-wrap: wrap;\n  "])), core.fontFamily.bodyBold.native, numToPx(core.lineHeight.body[smallAndUp ? 'large' : 'small']), numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small']), semantic.message.base);
 });
 export var TableCaptionText = styled.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: left;\n\n    flex-wrap: wrap;\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: left;\n\n    flex-wrap: wrap;\n  "])), core.fontFamily.bodyBold.native, core.fontSize.heading4[smallAndUp ? 'large' : 'small'], core.lineHeight.heading4[smallAndUp ? 'large' : 'small'], semantic.message.branded);
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "])), core.fontFamily.bodyBold.native, numToPx(core.fontSize.heading4[smallAndUp ? 'large' : 'small']), numToPx(core.lineHeight.heading4[smallAndUp ? 'large' : 'small']), semantic.message.branded);
 });
 export var CellText = styled.Text(function (_a) {
     var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "])), core.fontFamily.body.native, core.lineHeight.body.large, core.fontSize.body[smallAndUp ? 'large' : 'small']);
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "])), core.fontFamily.body.native, numToPx(core.lineHeight.body.large), numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small']));
 });
 export var TableCaption = styled.View(function (_a) {
     var core = _a.theme.core;
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", " ", ";\n  "], ["\n    padding: ", " ", ";\n  "])), core.space[4], core.space[2]);
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", " ", ";\n  "], ["\n    padding: ", " ", ";\n  "])), numToPx(core.space[4]), numToPx(core.space[2]));
 });
 export var TableRow = styled.View(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, stripe = _a.stripe;
     return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    background-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "], ["\n    background-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), stripe
         ? semantic.surface.cutout
-        : semantic.surface.base, stripe ? '0px' : "".concat(core.borderWidth.small), stripe
+        : semantic.surface.base, stripe ? '0px' : numToPx(core.borderWidth.small), stripe
         ? 'transparent'
         : "".concat(semantic.border.differentiated));
 });
 export var TableRowHeading = styled.View(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core;
-    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    background-color: ", ";\n\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "], ["\n    background-color: ", ";\n\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "])), semantic.surface.base, core.borderWidth.small, semantic.border.functional);
+    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    background-color: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "], ["\n    background-color: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "])), semantic.surface.base, numToPx(core.borderWidth.small), semantic.border.functional);
 });
 export var TableBody = styled.View(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"], ["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"])));
 export var TableCell = styled.View(function (_a) {
     var core = _a.theme.core, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
-    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "])), core.space[smallAndUp ? 3 : 2], core.space[2], cellWidth, cellWidth === 'auto' ? 1 : 0);
+    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding: ", "\n        ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", "\n        ", ";\n      width: ", ";\n      flex: ", ";\n    "])), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[2]), cellWidth, cellWidth === 'auto' ? 1 : 0);
 });
 export var RowHeading = styled.View(function (_a) {
     var core = _a.theme.core, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
-    return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "])), core.space[smallAndUp ? 3 : 2], core.space[2], cellWidth, cellWidth === 'auto' ? 1 : 0);
+    return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding: ", "\n        ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", "\n        ", ";\n      width: ", ";\n      flex: ", ";\n    "])), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[2]), cellWidth, cellWidth === 'auto' ? 1 : 0);
 });
 export var StyledSeparatorRow = styled.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, width = _a.width;
-    var minWidth = width
-        ? "".concat(width - parseInt(core.space[2]) * 2, "px")
-        : '100%';
-    return "\n      min-width: ".concat(minWidth, ";\n      flex: 1;\n      flex-direction: row;\n      background-color: ").concat(semantic.surface.elevated, ";\n      padding: ").concat(core.space[1], " ").concat(core.space[2], ";\n    ");
+    var minWidth = width ? "".concat(width - core.space[2] * 2, "px") : '100%';
+    return "\n      min-width: ".concat(minWidth, ";\n      flex: 1;\n      flex-direction: row;\n      background-color: ").concat(semantic.surface.elevated, ";\n      padding: ").concat(numToPx(core.space[1]), " ").concat(numToPx(core.space[2]), ";\n    ");
 });
 export var SeparatorRowText = styled.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return "\n  flex: 1;\n  font-family: ".concat(core.fontFamily.body.native, ";\n  font-size: ").concat(core.fontSize.small[smallAndUp ? 'large' : 'small'], ";\n  line-height: ").concat(core.lineHeight.small[smallAndUp ? 'large' : 'small'], ";\n  color: ").concat(semantic.message.secondary, ";\n");
+    return "\n  flex: 1;\n  font-family: ".concat(core.fontFamily.body.native, ";\n  font-size: ").concat(numToPx(core.fontSize.small[smallAndUp ? 'large' : 'small']), ";\n  line-height: ").concat(numToPx(core.lineHeight.small[smallAndUp ? 'large' : 'small']), ";\n  color: ").concat(semantic.message.secondary, ";\n");
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/esm/components/DateField/DateField.js

@@ -14,6 +14,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
 import { forwardRef, createRef } from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
 import { useFullWidth } from '../../hooks';
@@ -22,18 +23,18 @@ import { mergeRefs, getText } from '../../utils';
 import { ErrorText } from '../ErrorText';
 import { FormGroup } from '../FormGroup';
 import { HintText } from '../HintText';
-import { NumberInput } from '../NumberInput';
 import { LabelText } from '../LabelText';
+import { NumberInput } from '../NumberInput';
 import { Stack } from '../Stack';
 import { SubLabelText } from '../SubLabelText';
 var InlineFields = styled.View(function (_a) {
     var stretch = _a.stretch, core = _a.theme.core;
-    var margin = core.space[1];
+    var margin = numToPx(core.space[1]);
     return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-left: -", ";\n      margin-right: -", ";\n      flex-direction: row;\n      ", "\n    "], ["\n      margin-left: -", ";\n      margin-right: -", ";\n      flex-direction: row;\n      ", "\n    "])), margin, margin, stretch ? '' : "width: 265px;");
 });
 var SubField = styled(Stack)(function (_a) {
     var core = _a.theme.core;
-    var padding = core.space[1];
+    var padding = numToPx(core.space[1]);
     return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-right: ", ";\n    padding-left: ", ";\n  "], ["\n    padding-right: ", ";\n    padding-left: ", ";\n  "])), padding, padding);
 });
 var DayField = styled(SubField)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 25%;\n"], ["\n  width: 25%;\n"])));

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

@@ -25,21 +25,22 @@ 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 { View } from 'react-native';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 export var Dl = styled.View(function (_a) {
     var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return "\n  flex-direction: column;\n  flex: 1;\n  margin-vertical: ".concat(smallAndUp ? core.space[3] : core.space[2], ";\n");
+    return "\n  flex-direction: column;\n  flex: 1;\n  margin-vertical: ".concat(smallAndUp ? numToPx(core.space[3]) : numToPx(core.space[2]), ";\n");
 });
 var StyledDtText = styled.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n\n    flex: 1;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n\n    flex: 1;\n  "])), core.fontFamily.bodyBold.native, core.lineHeight.body.small, core.fontSize.body.small, semantic.message.base);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n\n    flex: 1;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n\n    flex: 1;\n  "])), core.fontFamily.bodyBold.native, numToPx(core.lineHeight.body.small), numToPx(core.fontSize.body.small), semantic.message.base);
 });
 var DtText = styledComponentWithBreakpoints(StyledDtText);
 var StyledDtItem = styled.View(function (_a) {
     var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin-top: ", ";\n    flex-direction: row;\n  "], ["\n    margin-top: ", ";\n    flex-direction: row;\n  "])), core.space[smallAndUp ? 4 : 3]);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin-top: ", ";\n    flex-direction: row;\n  "], ["\n    margin-top: ", ";\n    flex-direction: row;\n  "])), numToPx(core.space[smallAndUp ? 4 : 3]));
 });
 var DtItem = styledComponentWithBreakpoints(StyledDtItem);
 export var Dt = function (_a) {
@@ -48,7 +49,7 @@ export var Dt = function (_a) {
 };
 var StyledDdText = styled.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n    flex: 1;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n    flex: 1;\n  "])), core.fontFamily.body.native, core.lineHeight.body.small, semantic.message.secondary, core.fontSize.body.small);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n    flex: 1;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n    flex: 1;\n  "])), core.fontFamily.body.native, numToPx(core.lineHeight.body.small), semantic.message.secondary, numToPx(core.fontSize.body.small));
 });
 export var Dd = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);

package/dist/esm/components/Disclosure/Disclosure.js

@@ -25,6 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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';
@@ -32,15 +33,15 @@ import { Icon } from '../Icon';
 var DisclosureButton = styled.TouchableOpacity(function () { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  "], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  "]))); });
 var DisclosureButtonIcon = styled(Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, expanded = _a.expanded, smallAndUp = _a.smallAndUp;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    transform: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "], ["\n    transform: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "])), expanded ? 'rotate(0deg)' : 'rotate(-90deg)', core.space[smallAndUp ? 2 : 1], semantic.message.link);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    transform: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "], ["\n    transform: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "])), expanded ? 'rotate(0deg)' : 'rotate(-90deg)', numToPx(core.space[smallAndUp ? 2 : 1]), semantic.message.link);
 });
 var DisclosureButtonText = styled.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.body[smallAndUp ? 'large' : 'small'], core.lineHeight.body[smallAndUp ? 'large' : 'small'], semantic.message.link, semantic.message.link);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small']), numToPx(core.lineHeight.body[smallAndUp ? 'large' : 'small']), semantic.message.link, semantic.message.link);
 });
 var DisclosurePanel = styled.View(function (_a) {
     var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    padding-left: ", ";\n  "], ["\n    margin-top: ", ";\n    padding-left: ", ";\n  "])), core.space[smallAndUp ? 3 : 2], core.space[smallAndUp ? 2 : 1]);
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    padding-left: ", ";\n  "], ["\n    margin-top: ", ";\n    padding-left: ", ";\n  "])), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[smallAndUp ? 2 : 1]));
 });
 export var Disclosure = forwardRef(function (_a, ref) {
     var children = _a.children, title = _a.title, _b = _a.expanded, expanded = _b === void 0 ? false : _b, onToggle = _a.onToggle, rest = __rest(_a, ["children", "title", "expanded", "onToggle"]);

package/dist/esm/components/ErrorText/ErrorText.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 StyledErrorText = styled.Text(function (_a) {
@@ -9,9 +10,7 @@ var StyledErrorText = 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      font-size: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      color: ", ";\n    "])), core.fontFamily.body.native, smallAndUp
-        ? core.lineHeight.body.large
-        : core.lineHeight.body.small, fontSize, semantic.message.error);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      color: ", ";\n    "])), core.fontFamily.body.native, numToPx(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small), numToPx(fontSize), semantic.message.error);
 });
 var ErrorText = styledComponentWithBreakpoints(StyledErrorText);
 export { ErrorText };

package/dist/esm/components/FilterSelect/FilterSelect.js

@@ -14,6 +14,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
 import { Fragment, useRef, useState } from 'react';
 import { Modal, ScrollView, View } from 'react-native';
 import styled, { css } from '../../styled.native';
@@ -24,19 +25,19 @@ import { P } from '../P';
 import { Strong } from '../Strong';
 var SelectInput = styled.TouchableOpacity(function (_a) {
     var core = _a.theme.core;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), core.color.brand.white, core.radius.max, core.space[2], core.space[1]);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), core.color.brand.white, numToPx(core.radius.max), numToPx(core.space[2]), numToPx(core.space[1]));
 });
 var DropdownWrapper = styled.View(function (_a) {
     var core = _a.theme.core;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    height: 100%;\n    // 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4\n    background-color: ", "40;\n  "], ["\n    width: 100%;\n    height: 100%;\n    // 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4\n    background-color: ", "40;\n  "])), core.color.neutral.darkest);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    height: 100%;\n    /* 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */\n    background-color: ", "40;\n  "], ["\n    width: 100%;\n    height: 100%;\n    /* 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */\n    background-color: ", "40;\n  "])), core.color.neutral.darkest);
 });
 var DropdownContainer = styled.View(function (_a) {
     var core = _a.theme.core;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex: 1;\n    min-width: 25%;\n    max-height: 100%;\n    border-radius: ", ";\n    background-color: ", ";\n    position: absolute;\n  "], ["\n    flex: 1;\n    min-width: 25%;\n    max-height: 100%;\n    border-radius: ", ";\n    background-color: ", ";\n    position: absolute;\n  "])), core.radius.large, core.color.brand.white);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex: 1;\n    min-width: 25%;\n    max-height: 100%;\n    border-radius: ", ";\n    background-color: ", ";\n    position: absolute;\n  "], ["\n    flex: 1;\n    min-width: 25%;\n    max-height: 100%;\n    border-radius: ", ";\n    background-color: ", ";\n    position: absolute;\n  "])), numToPx(core.radius.large), core.color.brand.white);
 });
 var SelectOption = styled.TouchableOpacity(function (_a) {
     var core = _a.theme.core;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    padding-horizontal: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    padding-horizontal: ", ";\n  "])), core.space[2]);
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    padding-horizontal: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    padding-horizontal: ", ";\n  "])), numToPx(core.space[2]));
 });
 export var FilterSelect = function (_a) {
     var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.defaultSelected, defaultSelected = _c === void 0 ? { label: '', value: 'default' } : _c, _d = _a.onSelected, onSelected = _d === void 0 ? function () { return null; } : _d, _e = _a.testID, testID = _e === void 0 ? 'select' : _e, rightText = _a.rightText, leftText = _a.leftText;