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

package/dist/components/Tabs/TabList.js

@@ -51,12 +51,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabList = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
 var react_1 = require("react");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var StyledTabList = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    margin: -", ";\n  "], ["\n    flex-direction: row;\n    margin: -", ";\n  "])), core.borderWidth.small);
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    margin: -", ";\n  "], ["\n    flex-direction: row;\n    margin: -", ";\n  "])), (0, element_core_1.numToPx)(core.borderWidth.small));
 });
 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/components/Tabs/TabPanel.js

@@ -51,10 +51,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabPanel = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var StyledView = styled_native_1.default.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return (0, styled_native_1.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 (0, styled_native_1.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  "])), (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(core.borderWidth.small), semantic.border.differentiated);
 });
 var TabPanel = function (_a) {
     var rest = __rest(_a, []);

package/dist/components/Tabs/Tabs.js

@@ -51,6 +51,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
 var react_1 = require("react");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
@@ -59,7 +60,7 @@ var TabList_1 = require("./TabList");
 var TabPanel_1 = require("./TabPanel");
 var TabsCard = (0, styled_native_1.default)(Card_1.Card)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline;
-    return (0, styled_native_1.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 (0, styled_native_1.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  "])), (0, element_core_1.numToPx)(core.borderWidth.small), inline ? semantic.border.differentiated : 'transparent');
 });
 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/components/TextareaInput/TextareaInput.js

@@ -51,13 +51,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextareaInput = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
 var react_1 = require("react");
 var styled_native_1 = __importStar(require("../../styled.native"));
-var utils_1 = require("../../utils");
 var Input_1 = require("../Input/Input");
 var StyledInput = (0, styled_native_1.default)(Input_1.Input)(function (_a) {
     var core = _a.theme.core, rows = _a.rows;
-    return (0, styled_native_1.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], (0, utils_1.pxToNumber)(core.space[8]) * rows);
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    padding-top: ", ";\n    height: ", "px;\n  "], ["\n    padding: ", ";\n    padding-top: ", ";\n    height: ", "px;\n  "])), (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[3]), core.space[8] * rows);
 });
 var TextareaInput = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.rows, rows = _b === void 0 ? 3 : _b, rest = __rest(_a, ["rows"]);

package/dist/components/Toast/Toast.js

@@ -41,6 +41,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.showToast = exports.ToastsContainer = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_native_toast_1 = require("@backpackapp-io/react-native-toast");
+var element_core_1 = require("@ovotech/element-core");
 var react_1 = require("react");
 var react_native_1 = require("react-native");
 var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
@@ -57,7 +58,7 @@ var StyledView = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, variant = _a.variant;
     return (0, styled_native_1.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, (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[3]), (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(core.radius.max));
 });
 var StyledP = (0, styled_native_1.default)(P_1.P)(function (_a) {
     var semantic = _a.theme.semantic;
@@ -77,7 +78,7 @@ var StyledThickBorder = (0, styled_native_1.default)(react_native_reanimated_1.d
 });
 var StyledCloseIcon = (0, styled_native_1.default)(react_native_1.TouchableOpacity)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return (0, styled_native_1.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 (0, styled_native_1.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, (0, element_core_1.numToPx)(core.radius.max), (0, element_core_1.numToPx)(core.space[7]), (0, element_core_1.numToPx)(core.space[7]), (0, element_core_1.numToPx)(core.space[2]));
 });
 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/components/Toggle/Toggle.js

@@ -33,10 +33,10 @@ var styles_1 = require("./styles");
 var Input = function (_a) {
     var checked = _a.checked, labelPosition = _a.labelPosition, testID = _a.testID, rest = __rest(_a, ["checked", "labelPosition", "testID"]);
     var core = (0, react_1.useContext)(native_1.ThemeContext).core;
-    var leftVal = (0, react_1.useRef)(new react_native_1.Animated.Value(checked ? parseInt(core.space[6]) : parseInt(core.space[1]))).current;
+    var leftVal = (0, react_1.useRef)(new react_native_1.Animated.Value(checked ? core.space[6] : core.space[1])).current;
     (0, react_1.useEffect)(function () {
         react_native_1.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();