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

package/dist/components/DataTable/styles.js

@@ -28,61 +28,60 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SeparatorRowText = exports.StyledSeparatorRow = exports.RowHeading = exports.TableCell = exports.TableBody = exports.TableRowHeading = exports.TableRow = exports.TableCaption = exports.CellText = exports.TableCaptionText = exports.TableHeaderText = exports.TableHeader = exports.StyledTableContainer = void 0;
+var element_core_1 = require("@ovotech/element-core");
 var styled_native_1 = __importStar(require("../../styled.native"));
 exports.StyledTableContainer = 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    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 (0, styled_native_1.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  "])), (0, element_core_1.numToPx)(core.borderWidth.small), semantic.border.differentiated);
 });
 exports.TableHeader = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.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 (0, styled_native_1.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  "])), (0, element_core_1.numToPx)(core.space[smallAndUp ? 3 : 2]), (0, element_core_1.numToPx)(core.space[1]), cellWidth === 'auto' ? 1 : 0, cellWidth);
 });
 exports.TableHeaderText = styled_native_1.default.Text(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.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 (0, styled_native_1.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, (0, element_core_1.numToPx)(core.lineHeight.body[smallAndUp ? 'large' : 'small']), (0, element_core_1.numToPx)(core.fontSize.body[smallAndUp ? 'large' : 'small']), semantic.message.base);
 });
 exports.TableCaptionText = styled_native_1.default.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.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 (0, styled_native_1.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, (0, element_core_1.numToPx)(core.fontSize.heading4[smallAndUp ? 'large' : 'small']), (0, element_core_1.numToPx)(core.lineHeight.heading4[smallAndUp ? 'large' : 'small']), semantic.message.branded);
 });
 exports.CellText = styled_native_1.default.Text(function (_a) {
     var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.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 (0, styled_native_1.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, (0, element_core_1.numToPx)(core.lineHeight.body.large), (0, element_core_1.numToPx)(core.fontSize.body[smallAndUp ? 'large' : 'small']));
 });
 exports.TableCaption = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core;
-    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", " ", ";\n  "], ["\n    padding: ", " ", ";\n  "])), core.space[4], core.space[2]);
+    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", " ", ";\n  "], ["\n    padding: ", " ", ";\n  "])), (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(core.space[2]));
 });
 exports.TableRow = styled_native_1.default.View(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, stripe = _a.stripe;
     return (0, styled_native_1.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' : (0, element_core_1.numToPx)(core.borderWidth.small), stripe
         ? 'transparent'
         : "".concat(semantic.border.differentiated));
 });
 exports.TableRowHeading = styled_native_1.default.View(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core;
-    return (0, styled_native_1.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 (0, styled_native_1.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, (0, element_core_1.numToPx)(core.borderWidth.small), semantic.border.functional);
 });
 exports.TableBody = styled_native_1.default.View(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"], ["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"])));
 exports.TableCell = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.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 (0, styled_native_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding: ", "\n        ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", "\n        ", ";\n      width: ", ";\n      flex: ", ";\n    "])), (0, element_core_1.numToPx)(core.space[smallAndUp ? 3 : 2]), (0, element_core_1.numToPx)(core.space[2]), cellWidth, cellWidth === 'auto' ? 1 : 0);
 });
 exports.RowHeading = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.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 (0, styled_native_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding: ", "\n        ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", "\n        ", ";\n      width: ", ";\n      flex: ", ";\n    "])), (0, element_core_1.numToPx)(core.space[smallAndUp ? 3 : 2]), (0, element_core_1.numToPx)(core.space[2]), cellWidth, cellWidth === 'auto' ? 1 : 0);
 });
 exports.StyledSeparatorRow = styled_native_1.default.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((0, element_core_1.numToPx)(core.space[1]), " ").concat((0, element_core_1.numToPx)(core.space[2]), ";\n    ");
 });
 exports.SeparatorRowText = styled_native_1.default.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((0, element_core_1.numToPx)(core.fontSize.small[smallAndUp ? 'large' : 'small']), ";\n  line-height: ").concat((0, element_core_1.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/components/DateField/DateField.js

@@ -40,6 +40,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateField = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
 var react_1 = require("react");
 var react_native_1 = require("react-native");
 var hooks_1 = require("../../hooks");
@@ -48,18 +49,18 @@ var utils_1 = require("../../utils");
 var ErrorText_1 = require("../ErrorText");
 var FormGroup_1 = require("../FormGroup");
 var HintText_1 = require("../HintText");
-var NumberInput_1 = require("../NumberInput");
 var LabelText_1 = require("../LabelText");
+var NumberInput_1 = require("../NumberInput");
 var Stack_1 = require("../Stack");
 var SubLabelText_1 = require("../SubLabelText");
 var InlineFields = styled_native_1.default.View(function (_a) {
     var stretch = _a.stretch, core = _a.theme.core;
-    var margin = core.space[1];
+    var margin = (0, element_core_1.numToPx)(core.space[1]);
     return (0, styled_native_1.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 = (0, styled_native_1.default)(Stack_1.Stack)(function (_a) {
     var core = _a.theme.core;
-    var padding = core.space[1];
+    var padding = (0, element_core_1.numToPx)(core.space[1]);
     return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-right: ", ";\n    padding-left: ", ";\n  "], ["\n    padding-right: ", ";\n    padding-left: ", ";\n  "])), padding, padding);
 });
 var DayField = (0, styled_native_1.default)(SubField)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 25%;\n"], ["\n  width: 25%;\n"])));