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

package/dist/esm/components/P/P.js

@@ -14,12 +14,13 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
 import { forwardRef } from 'react';
 import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
 var StyledP = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.body[smallAndUp ? 'large' : 'small'], core.lineHeight.body[smallAndUp ? 'large' : 'small'], semantic.message.base);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small']), numToPx(core.lineHeight.body[smallAndUp ? 'large' : 'small']), inverted ? semantic.inverted.message.base : semantic.message.base);
 });
 export var P = forwardRef(function (props, ref) {
     var breakpoints = useBreakpoint();

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

@@ -2,10 +2,11 @@ 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 { Pressable } from 'react-native';
 import styled, { css } from '../../styled.native';
 export var StyledPressable = styled(Pressable)(function (_a) {
     var core = _a.theme.core, focused = _a.focused;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      position: absolute;\n      width: ", ";\n      z-index: 1;\n      top: ", ";\n      right: ", ";\n    "], ["\n      display: flex;\n      align-items: center;\n      position: absolute;\n      width: ", ";\n      z-index: 1;\n      top: ", ";\n      right: ", ";\n    "])), core.space[4], focused ? '16px' : '14px', core.space[3]);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    position: absolute;\n    width: ", ";\n    z-index: 1;\n    top: ", ";\n    right: ", ";\n  "], ["\n    display: flex;\n    align-items: center;\n    position: absolute;\n    width: ", ";\n    z-index: 1;\n    top: ", ";\n    right: ", ";\n  "])), numToPx(core.space[4]), focused ? '16px' : '14px', numToPx(core.space[3]));
 });
 var templateObject_1;

package/dist/esm/components/ProductCarousel/ProductCarousel.js

@@ -0,0 +1,98 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useRef } from 'react';
+import { useWindowDimensions, View } from 'react-native';
+import Animated, { Extrapolate, interpolate, useAnimatedStyle, useSharedValue, } from 'react-native-reanimated';
+import Carousel from 'react-native-reanimated-carousel';
+import Svg, { Path } from 'react-native-svg';
+import { useBreakpoint } from '../../hooks';
+import styled, { useTheme } from '../../styled.native';
+import { Icon } from '../Icon';
+import { NavigationDots } from './NavigationDots';
+import { withAnchorPoint } from './anchor-point';
+export function ProductCarousel(_a) {
+    var data = _a.data, children = _a.children, width = _a.width, height = _a.height, fullWidth = _a.fullWidth, _b = _a.showArrows, showArrows = _b === void 0 ? true : _b, _c = _a.showDots, showDots = _c === void 0 ? false : _c, _d = _a.loop, loop = _d === void 0 ? true : _d, arrowsDistanceFromTop = _a.arrowsDistanceFromTop;
+    var theme = useTheme();
+    var mediumAndUp = useBreakpoint().mediumAndUp;
+    var carouselRef = useRef(null);
+    var progressValue = useSharedValue(0);
+    var windowWidth = useWindowDimensions().width;
+    var carouselWidth = fullWidth ? windowWidth : width || windowWidth;
+    return (_jsxs(View, { children: [mediumAndUp ? null : _jsx(SkewLine, {}), _jsxs(SCarouselContainer, { children: [_jsx(Carousel, { ref: carouselRef, data: data, renderItem: function (_a) {
+                            var item = _a.item, animationValue = _a.animationValue;
+                            return (_jsx(Card, __assign({ animationValue: animationValue, height: height, width: carouselWidth }, { children: children(item) })));
+                        }, vertical: false, width: carouselWidth, height: height, onProgressChange: function (_, absoluteProgress) {
+                            return (progressValue.value = absoluteProgress);
+                        }, panGestureHandlerProps: {
+                            activeOffsetX: [-20, 20],
+                        }, loop: loop, testID: "carousel", scrollAnimationDuration: 700 }), showArrows && data.length > 1 && (_jsxs(_Fragment, { children: [_jsx(SActionPressable, __assign({ onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.prev(); }, "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                                    top: 32,
+                                    bottom: 32,
+                                    left: 16,
+                                    right: 16,
+                                } }, { children: _jsx(Icon, { name: "arrow-left", size: 32, color: theme.core.color.brand.white }) })), _jsx(SActionPressable, __assign({ "$next": true, onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.next(); }, "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                                    top: 32,
+                                    bottom: 32,
+                                    left: 16,
+                                    right: 16,
+                                } }, { children: _jsx(Icon, { name: "arrow-right", size: 32, color: theme.core.color.brand.white }) }))] })), showDots && data.length > 1 && (_jsx(NavigationDots, { data: data, animatedValue: progressValue }))] })] }));
+}
+var Card = function (_a) {
+    var children = _a.children, animationValue = _a.animationValue, height = _a.height, width = _a.width;
+    var WIDTH = width / 1.3;
+    var HEIGHT = height / 1.3;
+    var cardStyle = useAnimatedStyle(function () {
+        var scale = interpolate(animationValue.value, [-0.1, 0, 1], [0.95, 1, 1], Extrapolate.CLAMP);
+        var opacity = interpolate(animationValue.value, [-0.75, 0, 1], [0, 1, 0]);
+        var translateX = interpolate(animationValue.value, [-1, -0.2, 0, 1], [0, WIDTH * 0.3, 0, 0]);
+        var transform = {
+            transform: [
+                { scale: scale },
+                { translateX: translateX },
+                { perspective: 200 },
+                {
+                    rotateY: "".concat(interpolate(animationValue.value, [-1, 0, 0.4, 1], [30, 0, -25, -25], Extrapolate.CLAMP), "deg"),
+                },
+            ],
+        };
+        return __assign(__assign({}, withAnchorPoint(transform, { x: 0.5, y: 0.5 }, { width: WIDTH, height: HEIGHT })), { opacity: opacity });
+    }, []);
+    return (_jsx(Animated.View, __assign({ style: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        } }, { children: _jsx(Animated.View, __assign({ style: [
+                {
+                    width: WIDTH,
+                    height: HEIGHT,
+                },
+                cardStyle,
+            ] }, { children: children })) })));
+};
+var SCarouselContainer = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: #0a9828;\n  overflow: hidden;\n  margin-top: -0.5px;\n"], ["\n  align-items: center;\n  background-color: #0a9828;\n  overflow: hidden;\n  margin-top: -0.5px;\n"])));
+var SActionPressable = styled.Pressable(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  ", ";\n"], ["\n  position: absolute;\n  top: ", ";\n  ", ";\n"])), function (_a) {
+    var $top = _a.$top;
+    return ($top ? "".concat($top, "px") : '30%');
+}, function (_a) {
+    var theme = _a.theme, $next = _a.$next, mediumAndUp = _a.mediumAndUp;
+    return $next
+        ? "right: ".concat(mediumAndUp ? '25%' : numToPx(theme.core.space[14]))
+        : "left: ".concat(mediumAndUp ? '25%' : numToPx(theme.core.space[14]));
+});
+var SkewLine = function (props) { return (_jsx(Svg, __assign({ width: "100%", height: 69 }, props, { children: _jsx(Path, { fill: "#0A9828", d: "M768 0 0 68.776h768V0Z" }) }))); };
+var templateObject_1, templateObject_2;

package/dist/esm/components/ProductCarousel/anchor-point.js

@@ -0,0 +1,49 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var isValidSize = function (size) {
+    'worklet';
+    return size && size.width > 0 && size.height > 0;
+};
+var defaultAnchorPoint = { x: 0.5, y: 0.5 };
+export var withAnchorPoint = function (transform, anchorPoint, size) {
+    'worklet';
+    if (!isValidSize(size))
+        return transform;
+    var injectedTransform = transform.transform;
+    if (!injectedTransform)
+        return transform;
+    if (anchorPoint.x !== defaultAnchorPoint.x && size.width) {
+        var shiftTranslateX = [];
+        // shift before rotation
+        shiftTranslateX.push({
+            translateX: size.width * (anchorPoint.x - defaultAnchorPoint.x),
+        });
+        injectedTransform = __spreadArray(__spreadArray([], shiftTranslateX, true), injectedTransform, true);
+        // shift after rotation
+        injectedTransform.push({
+            translateX: size.width * (defaultAnchorPoint.x - anchorPoint.x),
+        });
+    }
+    if (!Array.isArray(injectedTransform))
+        return { transform: injectedTransform };
+    if (anchorPoint.y !== defaultAnchorPoint.y && size.height) {
+        var shiftTranslateY = [];
+        // shift before rotation
+        shiftTranslateY.push({
+            translateY: size.height * (anchorPoint.y - defaultAnchorPoint.y),
+        });
+        injectedTransform = __spreadArray(__spreadArray([], shiftTranslateY, true), injectedTransform, true);
+        // shift after rotation
+        injectedTransform.push({
+            translateY: size.height * (defaultAnchorPoint.y - anchorPoint.y),
+        });
+    }
+    return { transform: injectedTransform };
+};

package/dist/esm/components/ProductCarousel/index.js

@@ -0,0 +1 @@
+export { ProductCarousel } from './ProductCarousel';

package/dist/esm/components/Radio/Radio.js

@@ -21,6 +21,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';
@@ -28,11 +29,11 @@ import { HintText } from '../HintText';
 import { LabelText } from '../LabelText';
 var StyledRadioInputWrapper = styled.View(function (_a) {
     var core = _a.theme.core;
-    return "\n      width: ".concat(core.space[6], ";\n      height: ").concat(core.space[6], ";\n      margin-right: 10px;\n    ");
+    return "\n      width: ".concat(numToPx(core.space[6]), ";\n      height: ").concat(numToPx(core.space[6]), ";\n      margin-right: 10px;\n    ");
 });
 var StyledRadioInput = 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      align-items: center;\n      justify-content: center;\n      border-radius: ").concat(core.space[6], ";\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      align-items: center;\n      justify-content: center;\n      border-radius: ").concat(numToPx(core.space[6]), ";\n      border-color: ").concat(invalid
         ? semantic.message.error
         : checked
             ? core.color.blue.dark
@@ -40,7 +41,7 @@ var StyledRadioInput = styled.View(function (_a) {
 });
 var StyledRadioInputDot = styled.View(function (_a) {
     var core = _a.theme.core, checked = _a.checked;
-    return "\n      width: ".concat(core.space[3], ";\n      height: ").concat(core.space[3], ";\n      border-radius: ").concat(core.space[3], ";\n      background: ").concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+    return "\n      width: ".concat(numToPx(core.space[3]), ";\n      height: ").concat(numToPx(core.space[3]), ";\n      border-radius: ").concat(numToPx(core.space[3]), ";\n      background: ").concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
 });
 var Input = function (_a) {
     var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
@@ -48,7 +49,7 @@ var Input = function (_a) {
 };
 var StyledWrapper = styled.View(function (_a) {
     var core = _a.theme.core;
-    return "\n    padding-top: ".concat(core.space[3], ";\n    flex-direction: row;\n  ");
+    return "\n    padding-top: ".concat(numToPx(core.space[3]), ";\n    flex-direction: row;\n  ");
 });
 var Radio = forwardRef(function (_a, ref) {
     var label = _a.label, hint = _a.hint, checked = _a.checked, invalid = _a.invalid, 

package/dist/esm/components/RadioCard/RadioCard.js

@@ -0,0 +1,66 @@
+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 } from 'react';
+import { TouchableOpacity, } from 'react-native';
+import { css } from 'styled-components';
+import styled from '../../styled.native';
+import { LabelText } from '../LabelText';
+var StyledRadioInputWrapper = styled.View(function (_a) {
+    var core = _a.theme.core;
+    return "\n      width: ".concat(numToPx(core.space[6]), ";\n      height: ").concat(numToPx(core.space[6]), ";\n      margin-top: ").concat(numToPx(core.space[2]), ";\n    ");
+});
+var StyledRadioInput = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;
+    return "\n      width: ".concat(numToPx(core.space[6]), ";\n      height: ").concat(numToPx(core.space[6]), ";\n      border: ").concat(numToPx(core.borderWidth.small), " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat(numToPx(core.space[6]), ";\n      border-color: ").concat(invalid
+        ? semantic.message.error
+        : checked
+            ? core.color.blue.dark
+            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
+});
+var StyledRadioInputDot = styled.View(function (_a) {
+    var core = _a.theme.core, checked = _a.checked;
+    return "\n      width: ".concat(numToPx(core.space[3]), ";\n      height: ").concat(numToPx(core.space[3]), ";\n      border-radius: ").concat(numToPx(core.space[3]), ";\n      background: ").concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+});
+var Input = function (_a) {
+    var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
+    return (_jsx(StyledRadioInputWrapper, __assign({}, rest, { children: _jsx(StyledRadioInput, __assign({ invalid: invalid, checked: checked, testID: testID }, { children: _jsx(StyledRadioInputDot, { checked: checked }) })) })));
+};
+var StyledWrapper = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, checked = _a.checked, invalid = _a.invalid;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-items: center;\n    background: ", ";\n    padding: ", ";\n    min-width: 82px;\n    border-radius: ", ";\n    border: ", " solid;\n    border-color: ", ";\n  "], ["\n    align-items: center;\n    background: ", ";\n    padding: ", ";\n    min-width: 82px;\n    border-radius: ", ";\n    border: ", " solid;\n    border-color: ", ";\n  "])), semantic.surface.elevated, numToPx(core.space[2]), numToPx(core.radius.small), numToPx(core.borderWidth.medium), invalid
+        ? semantic.message.error
+        : checked
+            ? core.color.blue.dark
+            : 'transparent');
+});
+export var RadioCard = forwardRef(function (_a, ref) {
+    var label = _a.label, checked = _a.checked, invalid = _a.invalid, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, _c = _a.hasInput, hasInput = _c === void 0 ? true : _c, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID", "hasInput"]);
+    return (_jsx(TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: _jsxs(StyledWrapper, __assign({ checked: checked, invalid: invalid }, { children: [typeof label === 'string' ? _jsx(LabelText, { children: label }) : label, hasInput ? (_jsx(Input, { checked: checked, invalid: invalid, testID: testID })) : null] })) })));
+});
+var templateObject_1;

package/dist/esm/components/RadioCard/index.js

@@ -0,0 +1 @@
+export { RadioCard } from './RadioCard';

package/dist/esm/components/SelectField/Select.js

@@ -14,6 +14,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 groupBy from 'lodash.groupby';
 import { Fragment, useState } from 'react';
 import { Modal, ScrollView, View } from 'react-native';
@@ -23,9 +24,9 @@ import { P } from '../P';
 import { Strong } from '../Strong';
 var SelectInput = styled.TouchableOpacity(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, hasError = _a.hasError;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: row;\n      align-items: center;\n      background-color: ", ";\n      border-color: ", ";\n      border-width: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      padding-right: 14px;\n      height: 44px;\n    "], ["\n      flex-direction: row;\n      align-items: center;\n      background-color: ", ";\n      border-color: ", ";\n      border-width: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      padding-right: 14px;\n      height: 44px;\n    "])), core.color.brand.white, hasError
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: row;\n      align-items: center;\n      background-color: transparent;\n      border-color: ", ";\n      border-width: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      padding-right: 14px;\n      height: 44px;\n    "], ["\n      flex-direction: row;\n      align-items: center;\n      background-color: transparent;\n      border-color: ", ";\n      border-width: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      padding-right: 14px;\n      height: 44px;\n    "])), hasError
         ? semantic.error.border
-        : semantic.border.functional, core.borderWidth.small, core.radius.small, core.space[2]);
+        : semantic.border.functional, numToPx(core.borderWidth.small), numToPx(core.radius.small), numToPx(core.space[2]));
 });
 var DropdownWrapper = styled.View(function (_a) {
     var core = _a.theme.core;
@@ -33,15 +34,15 @@ var DropdownWrapper = styled.View(function (_a) {
 });
 var DropdownContainer = styled.SafeAreaView(function (_a) {
     var core = _a.theme.core;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 95%;\n    max-height: 70%;\n    border-radius: ", ";\n    background-color: ", ";\n  "], ["\n    width: 95%;\n    max-height: 70%;\n    border-radius: ", ";\n    background-color: ", ";\n  "])), core.radius.small, core.color.brand.white);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 95%;\n    max-height: 70%;\n    border-radius: ", ";\n    background-color: ", ";\n  "], ["\n    width: 95%;\n    max-height: 70%;\n    border-radius: ", ";\n    background-color: ", ";\n  "])), numToPx(core.radius.small), core.color.brand.white);
 });
 var SelectOption = styled.TouchableOpacity(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, isLastOption = _a.isLastOption;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    border-bottom-color: ", ";\n    border-bottom-width: ", "px;\n    padding-horizontal: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    border-bottom-color: ", ";\n    border-bottom-width: ", "px;\n    padding-horizontal: ", ";\n  "])), semantic.border.differentiated, isLastOption ? 0 : 1, core.space[4]);
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    border-bottom-color: ", ";\n    border-bottom-width: ", "px;\n    padding-horizontal: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    border-bottom-color: ", ";\n    border-bottom-width: ", "px;\n    padding-horizontal: ", ";\n  "])), semantic.border.differentiated, isLastOption ? 0 : 1, numToPx(core.space[4]));
 });
 var Radio = styled.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, isChecked = _a.isChecked;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    width: 24px;\n    height: 24px;\n    margin-left: auto;\n    border-radius: 24px;\n    border-width: ", ";\n    border-color: ", ";\n  "], ["\n    width: 24px;\n    height: 24px;\n    margin-left: auto;\n    border-radius: 24px;\n    border-width: ", ";\n    border-color: ", ";\n  "])), core.borderWidth.small, isChecked
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    width: 24px;\n    height: 24px;\n    margin-left: auto;\n    border-radius: 24px;\n    border-width: ", ";\n    border-color: ", ";\n  "], ["\n    width: 24px;\n    height: 24px;\n    margin-left: auto;\n    border-radius: 24px;\n    border-width: ", ";\n    border-color: ", ";\n  "])), numToPx(core.borderWidth.small), isChecked
         ? semantic.focus.outline
         : semantic.border.functional);
 });
@@ -51,11 +52,11 @@ var RadioDot = styled.View(function (_a) {
 });
 var StyledP = styled(P)(function (_a) {
     var core = _a.theme.core;
-    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), core.space[3], core.space[3]);
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), numToPx(core.space[3]), numToPx(core.space[3]));
 });
 var StyledCategory = styled(P)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    font-size: ", ";\n    color: ", ";\n    background-color: ", ";\n    padding-horizontal: ", ";\n    padding-vertical: ", ";\n  "], ["\n    font-size: ", ";\n    color: ", ";\n    background-color: ", ";\n    padding-horizontal: ", ";\n    padding-vertical: ", ";\n  "])), core.fontSize.label.large, semantic.message.secondary, semantic.surface.cutout, core.space[4], core.space[1]);
+    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    font-size: ", ";\n    color: ", ";\n    background-color: ", ";\n    padding-horizontal: ", ";\n    padding-vertical: ", ";\n  "], ["\n    font-size: ", ";\n    color: ", ";\n    background-color: ", ";\n    padding-horizontal: ", ";\n    padding-vertical: ", ";\n  "])), numToPx(core.fontSize.label.large), semantic.message.secondary, semantic.surface.cutout, numToPx(core.space[4]), numToPx(core.space[1]));
 });
 export var Select = function (_a) {
     var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.defaultSelected, defaultSelected = _c === void 0 ? { label: '', value: 'default' } : _c, _d = _a.noOptionMessage, noOptionMessage = _d === void 0 ? 'No option selected' : _d, _e = _a.onSelected, onSelected = _e === void 0 ? function () { return null; } : _e, _f = _a.hasError, hasError = _f === void 0 ? false : _f, _g = _a.testID, testID = _g === void 0 ? 'select' : _g;

package/dist/esm/components/SkeletonCTA/SkeletonCTA.js

@@ -21,12 +21,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
 import styled from '../../styled.native';
 import { P } from '../P';
 import { SkeletonAnimation } from '../SkeletonAnimation';
 var StyledSkeletonCTA = styled.View(function (_a) {
     var core = _a.theme.core, size = _a.size;
-    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    width: ").concat(size, ";\n    height: ").concat(core.space[12], ";\n  ");
+    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    width: ").concat(size, ";\n    height: ").concat(numToPx(core.space[12]), ";\n  ");
 });
 export var SkeletonCTA = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);

package/dist/esm/components/SkeletonCircle/SkeletonCircle.js

@@ -21,8 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber } from '@ovotech/element-core';
 import styled from '../../styled.native';
-import { pxToNumber } from '../../utils';
 import { SkeletonAnimation } from '../SkeletonAnimation';
 var StyledSkeletonCircleWrapper = styled.View(function (_a) {
     var size = _a.size;

package/dist/esm/components/SkeletonText/SkeletonText.js

@@ -21,13 +21,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
 import { useBreakpoint } from '../../hooks';
 import styled from '../../styled.native';
 import { P } from '../P';
 import { SkeletonAnimation } from '../SkeletonAnimation';
 var StyledSkeletonText = styled.View(function (_a) {
     var core = _a.theme.core, aboveSmallBreakpoint = _a.aboveSmallBreakpoint, short = _a.short;
-    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    margin-bottom: ").concat(core.space[2], ";\n    height: ").concat(aboveSmallBreakpoint ? core.fontSize.body.large : core.fontSize.body.small, ";\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
+    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    margin-bottom: ").concat(numToPx(core.space[2]), ";\n    height: ").concat(aboveSmallBreakpoint
+        ? numToPx(core.fontSize.body.large)
+        : numToPx(core.fontSize.body.small), ";\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
 });
 export var SkeletonText = function (_a) {
     var _b = _a.lines, lines = _b === void 0 ? 1 : _b, rest = __rest(_a, ["lines"]);

package/dist/esm/components/Small/Small.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 styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 var StyledSmall = styled.Text(function (_a) {
     var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-size: ", ";\n    line-height: ", ";\n  "])), core.fontSize.small[smallAndUp ? 'large' : 'small'], core.lineHeight.small[smallAndUp ? 'large' : 'small']);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-size: ", ";\n    line-height: ", ";\n  "])), numToPx(core.fontSize.small[smallAndUp ? 'large' : 'small']), numToPx(core.lineHeight.small[smallAndUp ? 'large' : 'small']));
 });
 export var Small = styledComponentWithBreakpoints(StyledSmall);
 var templateObject_1;

package/dist/esm/components/Stack/Stack.js

@@ -21,6 +21,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 { Children } from 'react';
 import { View } from 'react-native';
 import styled from '../../styled.native';
@@ -39,7 +40,7 @@ var Stack = function (_a) {
 };
 var StyledStackItem = styled.View(function (_a) {
     var space = _a.theme.core.space, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
-    var formatter = function (spaceKey) { return space[spaceKey]; };
+    var formatter = function (spaceKey) { return numToPx(space[spaceKey]); };
     var breakpoints = { smallAndUp: smallAndUp, mediumAndUp: mediumAndUp, largeAndUp: largeAndUp };
     return responsiveStyle('margin-top', spaceBetween, breakpoints, formatter);
 });

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

package/dist/esm/components/Tabs/Tab.js

@@ -25,22 +25,23 @@ 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 { forwardRef } from 'react';
-import { useBreakpoint, useFullWidth, } from '../../hooks';
+import { useBreakpoint, useFullWidth } from '../../hooks';
 import styled, { css } from '../../styled.native';
 var TabText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "])), core.fontSize.body.small, core.fontFamily.bodyBold.native, core.lineHeight.body.small, semantic.message.base, core.space[3], core.space[smallAndUp ? 3 : 2]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.active, active = _c === void 0 ? false : _c;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "])), numToPx(core.fontSize.body.small), core.fontFamily.bodyBold.native, numToPx(core.lineHeight.body.small), active ? semantic.focus.outline : semantic.message.base, numToPx(core.space[3]), numToPx(core.space[2]));
 });
 var TabTouchable = styled.TouchableOpacity(function (_a) {
     var _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.first, first = _c === void 0 ? false : _c, _d = _a.last, last = _d === void 0 ? false : _d, _e = _a.stretch, stretch = _e === void 0 ? false : _e, _f = _a.theme, core = _f.core, semantic = _f.semantic, inline = _a.inline;
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    flex-grow: ", ";\n    border: ", " solid ", ";\n    ", "\n    ", "\n    ", "\n    ", "\n  "], ["\n    flex-grow: ", ";\n    border: ", " solid ", ";\n    ", "\n    ", "\n    ", "\n    ", "\n  "])), stretch ? 1 : 0, core.borderWidth.small, semantic.border.differentiated, active
-        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            border-bottom-color: ", ";\n            border-bottom-width: ", ";\n          "], ["\n            border-bottom-color: ", ";\n            border-bottom-width: ", ";\n          "])), semantic.message.branded, core.borderWidth.medium) : '', !inline
-        ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            border-top-color: transparent;\n            border-top-width: 0;\n          "], ["\n            border-top-color: transparent;\n            border-top-width: 0;\n          "]))) : '', last && inline
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    flex-grow: ", ";\n    border: ", " solid\n      ", ";\n    ", "\n    ", "\n    ", "\n    ", "\n  "], ["\n    flex-grow: ", ";\n    border: ", " solid\n      ", ";\n    ", "\n    ", "\n    ", "\n    ", "\n  "])), stretch ? 1 : 0, numToPx(core.borderWidth.small), semantic.border.differentiated, active
+        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          border-bottom-color: ", ";\n          border-bottom-width: ", ";\n        "], ["\n          border-bottom-color: ", ";\n          border-bottom-width: ", ";\n        "])), semantic.focus.outline, numToPx(core.borderWidth.medium)) : '', !inline
+        ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          border-top-color: transparent;\n          border-top-width: 0;\n        "], ["\n          border-top-color: transparent;\n          border-top-width: 0;\n        "]))) : '', last && inline
         ? ''
-        : css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            border-right-color: transparent;\n            border-right-width: 0;\n          "], ["\n            border-right-color: transparent;\n            border-right-width: 0;\n          "]))), first && inline
+        : css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          border-right-color: transparent;\n          border-right-width: 0;\n        "], ["\n          border-right-color: transparent;\n          border-right-width: 0;\n        "]))), first && inline
         ? ''
-        : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            border-left-color: transparent;\n            border-left-width: 0;\n          "], ["\n            border-left-color: transparent;\n            border-left-width: 0;\n          "]))));
+        : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          border-left-color: transparent;\n          border-left-width: 0;\n        "], ["\n          border-left-color: transparent;\n          border-left-width: 0;\n        "]))));
 });
 export var Tab = forwardRef(function (_a, ref) {
     var active = _a.active, fullWidth = _a.fullWidth, children = _a.children, rest = __rest(_a, ["active", "fullWidth", "children"]);

package/dist/esm/components/Tabs/TabList.js

@@ -25,12 +25,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
 import { Children, cloneElement } from 'react';
 import styled, { css } from '../../styled.native';
 import { callAll } from '../../utils';
 var StyledTabList = styled.View(function (_a) {
     var core = _a.theme.core;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    margin: -", ";\n  "], ["\n    flex-direction: row;\n    margin: -", ";\n  "])), core.borderWidth.small);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    margin: -", ";\n  "], ["\n    flex-direction: row;\n    margin: -", ";\n  "])), numToPx(core.borderWidth.small));
 });
 export var TabList = function (_a) {
     var children = _a.children, setActiveTab = _a.setActiveTab, activeTab = _a.activeTab, tabRefs = _a.tabRefs, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "setActiveTab", "activeTab", "tabRefs", "fullWidth", "inline"]);

package/dist/esm/components/Tabs/TabPanel.js

@@ -25,10 +25,11 @@ 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 StyledView = styled.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    border-top-width: ", ";\n    border-style: solid;\n    border-color: ", ";\n    z-index: -1;\n  "], ["\n    padding: ", ";\n    border-top-width: ", ";\n    border-style: solid;\n    border-color: ", ";\n    z-index: -1;\n  "])), core.space[4], core.borderWidth.small, semantic.border.differentiated);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    border-top-width: ", ";\n    border-style: solid;\n    border-color: ", ";\n    z-index: -1;\n  "], ["\n    padding: ", ";\n    border-top-width: ", ";\n    border-style: solid;\n    border-color: ", ";\n    z-index: -1;\n  "])), numToPx(core.space[4]), numToPx(core.borderWidth.small), semantic.border.differentiated);
 });
 export var TabPanel = function (_a) {
     var rest = __rest(_a, []);

package/dist/esm/components/Tabs/Tabs.js

@@ -25,6 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
 import { useState, cloneElement, useEffect, createRef, useRef, } from 'react';
 import styled, { css } from '../../styled.native';
 import { filterChildrenByType } from '../../utils';
@@ -33,7 +34,7 @@ import { TabList } from './TabList';
 import { TabPanel } from './TabPanel';
 var TabsCard = styled(Card)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0;\n    border: ", " solid\n      ", ";\n    background: transparent;\n  "], ["\n    padding: 0;\n    border: ", " solid\n      ", ";\n    background: transparent;\n  "])), core.borderWidth.small, inline ? semantic.border.differentiated : 'transparent');
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0;\n    border: ", " solid\n      ", ";\n    background: transparent;\n  "], ["\n    padding: 0;\n    border: ", " solid\n      ", ";\n    background: transparent;\n  "])), numToPx(core.borderWidth.small), inline ? semantic.border.differentiated : 'transparent');
 });
 export var Tabs = function (_a) {
     var children = _a.children, _b = _a.defaultSelected, defaultSelected = _b === void 0 ? 0 : _b, onSelected = _a.onSelected, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "defaultSelected", "onSelected", "fullWidth", "inline"]);

package/dist/esm/components/TextareaInput/TextareaInput.js

@@ -25,13 +25,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
 import { forwardRef } from 'react';
 import styled, { css } from '../../styled.native';
-import { pxToNumber } from '../../utils';
 import { Input } from '../Input/Input';
 var StyledInput = styled(Input)(function (_a) {
     var core = _a.theme.core, rows = _a.rows;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", " ", " ", " ", ";\n    height: ", "px;\n  "], ["\n    padding: ", " ", " ", " ", ";\n    height: ", "px;\n  "])), core.space[3], core.space[2], core.space[2], core.space[2], pxToNumber(core.space[8]) * rows);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    padding-top: ", ";\n    height: ", "px;\n  "], ["\n    padding: ", ";\n    padding-top: ", ";\n    height: ", "px;\n  "])), numToPx(core.space[2]), numToPx(core.space[3]), core.space[8] * rows);
 });
 var TextareaInput = forwardRef(function (_a, ref) {
     var _b = _a.rows, rows = _b === void 0 ? 3 : _b, rest = __rest(_a, ["rows"]);

package/dist/esm/components/Toast/Toast.js

@@ -15,6 +15,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { toast, ToastPosition, Toasts, } from '@backpackapp-io/react-native-toast';
+import { numToPx } from '@ovotech/element-core';
 import { useEffect, useRef, useState } from 'react';
 import { Dimensions, TouchableOpacity, View } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
@@ -30,7 +31,7 @@ var StyledView = styled.View(function (_a) {
     var core = _a.theme.core, variant = _a.variant;
     return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    border-radius: ", ";\n    flex-direction: row;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    border-radius: ", ";\n    flex-direction: row;\n  "])), variant === 'default'
         ? core.color.brand.forest
-        : core.color.red.darkest, core.space[2], core.space[3], core.space[2], core.space[4], core.radius.max);
+        : core.color.red.darkest, numToPx(core.space[2]), numToPx(core.space[3]), numToPx(core.space[2]), numToPx(core.space[4]), numToPx(core.radius.max));
 });
 var StyledP = styled(P)(function (_a) {
     var semantic = _a.theme.semantic;
@@ -50,7 +51,7 @@ var StyledThickBorder = styled(Animated.View)(function (_a) {
 });
 var StyledCloseIcon = styled(TouchableOpacity)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: ", ";\n    border-radius: ", ";\n    width: ", ";\n    height: ", ";\n    padding: ", ";\n    align-items: center;\n    justify-content: center;\n  "], ["\n    background-color: ", ";\n    border-radius: ", ";\n    width: ", ";\n    height: ", ";\n    padding: ", ";\n    align-items: center;\n    justify-content: center;\n  "])), semantic.inverted.surface, core.radius.max, core.space[7], core.space[7], core.space[2]);
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: ", ";\n    border-radius: ", ";\n    width: ", ";\n    height: ", ";\n    padding: ", ";\n    align-items: center;\n    justify-content: center;\n  "], ["\n    background-color: ", ";\n    border-radius: ", ";\n    width: ", ";\n    height: ", ";\n    padding: ", ";\n    align-items: center;\n    justify-content: center;\n  "])), semantic.inverted.surface, numToPx(core.radius.max), numToPx(core.space[7]), numToPx(core.space[7]), numToPx(core.space[2]));
 });
 export var showToast = function (_a) {
     var message = _a.message, _b = _a.dismissible, dismissible = _b === void 0 ? false : _b, action = _a.action, actionTitle = _a.actionTitle, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, _d = _a.duration, duration = _d === void 0 ? 5000 : _d;

package/dist/esm/components/Toggle/Toggle.js

@@ -30,10 +30,10 @@ import { StyledToggleDot, StyledToggleInputWrapper, StyledToggleInput, StyledWra
 var Input = function (_a) {
     var checked = _a.checked, labelPosition = _a.labelPosition, testID = _a.testID, rest = __rest(_a, ["checked", "labelPosition", "testID"]);
     var core = useContext(ThemeContext).core;
-    var leftVal = useRef(new Animated.Value(checked ? parseInt(core.space[6]) : parseInt(core.space[1]))).current;
+    var leftVal = useRef(new Animated.Value(checked ? core.space[6] : core.space[1])).current;
     useEffect(function () {
         Animated.timing(leftVal, {
-            toValue: checked ? parseInt(core.space[6]) : parseInt(core.space[1]),
+            toValue: checked ? core.space[6] : core.space[1],
             duration: 150,
             useNativeDriver: true,
         }).start();