@ovotech/element-native 3.8.0 → 3.8.1-canary-a8563d8-232

package/dist/components/Badge/Badge.js

@@ -51,6 +51,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = 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 StyledBadge = styled_native_1.default.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;
@@ -68,7 +69,7 @@ var StyledBadge = styled_native_1.default.View(function (_a) {
         surface = customVariant.backgroundColor;
         message = customVariant.foregroundColor;
     }
-    return (0, styled_native_1.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 (0, styled_native_1.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    "])), (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.borderWidth.medium), core.color.brand.white, inverted ? message : surface);
 });
 var StyledBadgeText = styled_native_1.default.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;
@@ -86,7 +87,7 @@ var StyledBadgeText = styled_native_1.default.Text(function (_a) {
         surface = customVariant.backgroundColor;
         message = customVariant.foregroundColor;
     }
-    return (0, styled_native_1.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 (0, styled_native_1.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, (0, element_core_1.numToPx)(core.lineHeight.body.small), inverted ? surface : message, (0, element_core_1.numToPx)(core.fontSize.body.small));
 });
 var Badge = function (_a) {
     var children = _a.children, variant = _a.variant, inverted = _a.inverted, rest = __rest(_a, ["children", "variant", "inverted"]);

package/dist/components/CTAButton/CTAButton.js

@@ -51,6 +51,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DestructiveCTAButton = exports.SecondaryCTAButton = exports.PrimaryCTAButton = exports.CTAButton = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
 var react_1 = require("react");
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
@@ -63,21 +64,21 @@ var CTAButtonWrapper = function (_a) {
 var StyledInner = styled_native_1.default.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 (0, styled_native_1.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 (0, styled_native_1.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  "])), (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[4]), currentVariant.surface, borderRadius, (0, element_core_1.numToPx)(core.space[11]), variant === 'secondary'
+        ? "solid ".concat((0, element_core_1.numToPx)(core.borderWidth.small), " ").concat(core.color.brand.forest)
         : 'none', fullWidth === 'never'
         ? (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          flex-grow: 0;\n        "], ["\n          flex-grow: 0;\n        "]))) : '');
 });
 var StyledRightIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, component = _b.component, variant = _a.variant;
     var currentVariant = component.cta[variant];
-    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      margin-left: ", ";\n      color: ", ";\n    "], ["\n      margin-left: ", ";\n      color: ", ";\n    "])), core.space[1], currentVariant.message);
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-left: ", ";\n    color: ", ";\n  "], ["\n    margin-left: ", ";\n    color: ", ";\n  "])), (0, element_core_1.numToPx)(core.space[1]), currentVariant.message);
 });
 var StyledLeftIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, component = _b.component, variant = _a.variant;
     var currentVariant = component.cta[variant];
-    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin-right: ", ";\n      color: ", ";\n    "], ["\n      margin-right: ", ";\n      color: ", ";\n    "])), core.space[1], currentVariant.message);
+    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin-right: ", ";\n    color: ", ";\n  "], ["\n    margin-right: ", ";\n    color: ", ";\n  "])), (0, element_core_1.numToPx)(core.space[1]), currentVariant.message);
 });
 var StyledCTAButtonText = styled_native_1.default.Text(function (_a) {
     var _b = _a.theme, core = _b.core, component = _b.component, smallAndUp = _a.smallAndUp, variant = _a.variant;
@@ -85,7 +86,7 @@ var StyledCTAButtonText = styled_native_1.default.Text(function (_a) {
         ? core.fontSize.body.large
         : core.fontSize.body.small;
     var currentVariant = component.cta[variant];
-    return (0, styled_native_1.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 (0, styled_native_1.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, (0, element_core_1.numToPx)(fontSize), (0, element_core_1.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"]);