@ovotech/element-native 4.4.9 → 5.0.0-canary-bcb1788-338

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

@@ -26,45 +26,35 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
+import styled, { css, useTheme } 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;
-    var surface;
-    var message;
-    if (variant in semantic) {
-        surface = semantic[variant].surface;
-        message = semantic[variant].message;
-    }
-    else {
-        surface = component.badge.variants[variant].background;
-        message = component.badge.variants[variant].foreground;
-    }
-    if ((customVariant === null || customVariant === void 0 ? void 0 : customVariant.foregroundColor) && (customVariant === null || customVariant === void 0 ? void 0 : customVariant.backgroundColor)) {
-        surface = customVariant.backgroundColor;
-        message = customVariant.foregroundColor;
-    }
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 2px ", ";\n      border-radius: 16px;\n      border: ", " solid\n        ", ";\n      background-color: ", ";\n      align-self: flex-start;\n    "], ["\n      padding: 2px ", ";\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 inverted = _a.inverted, theme = _a.theme, $surface = _a.$surface, $message = _a.$message;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", " ", "\n      ", " ", ";\n    border-radius: 16px;\n    border: ", " solid ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "], ["\n    padding: ", " ", "\n      ", " ", ";\n    border-radius: 16px;\n    border: ", " solid ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "])), numToPx(theme.space[50]), numToPx(theme.space[200]), numToPx(theme.space[100]), numToPx(theme.space[200]), numToPx(theme.border.width.md), theme.color.brand.onBrand, 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;
-    var surface;
-    var message;
-    if (variant in semantic) {
-        surface = semantic[variant].surface;
-        message = semantic[variant].message;
-    }
-    else {
-        surface = component.badge.variants[variant].background;
-        message = component.badge.variants[variant].foreground;
-    }
-    if ((customVariant === null || customVariant === void 0 ? void 0 : customVariant.foregroundColor) && (customVariant === null || customVariant === void 0 ? void 0 : customVariant.backgroundColor)) {
-        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, numToPx(core.lineHeight.body.small), inverted ? surface : message, numToPx(core.fontSize.body.small));
+    var inverted = _a.inverted, theme = _a.theme, $surface = _a.$surface, $message = _a.$message;
+    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  "])), theme.native.font.family.bold, numToPx(theme.font.lineHeight.md.mediaQuery.sm), inverted ? $surface : $message, numToPx(theme.font.size.md.mediaQuery.sm));
 });
 export var Badge = function (_a) {
-    var children = _a.children, variant = _a.variant, inverted = _a.inverted, rest = __rest(_a, ["children", "variant", "inverted"]);
-    return (_jsx(StyledBadge, __assign({ variant: variant, inverted: inverted }, rest, { children: _jsx(StyledBadgeText, { variant: variant, inverted: inverted, children: children }) })));
+    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'neutral' : _b, _c = _a.inverted, inverted = _c === void 0 ? false : _c, customVariant = _a.customVariant, rest = __rest(_a, ["children", "variant", "inverted", "customVariant"]);
+    var theme = useTheme();
+    // check if variant is primitive, otherwise use alert colours
+    var isPrimitive = Object.keys(theme.color).includes(variant);
+    var message = isPrimitive
+        ? // @ts-ignore we're checking the variants above...
+            theme.color[variant]['70']
+        : // @ts-ignore we're checking the variants above...
+            theme.color.alert[variant];
+    var surface = isPrimitive
+        ? // @ts-ignore we're checking the variants above...
+            theme.color[variant]['20']
+        : // @ts-ignore we're checking the variants above...
+            theme.color.alert["".concat(variant, "Tint")];
+    if ((customVariant === null || customVariant === void 0 ? void 0 : customVariant.backgroundColor) !== undefined &&
+        (customVariant === null || customVariant === void 0 ? void 0 : customVariant.color) !== undefined) {
+        message = customVariant.color;
+        surface = customVariant.backgroundColor;
+    }
+    return (_jsx(StyledBadge, __assign({ inverted: inverted, "$surface": surface, "$message": message }, rest, { children: _jsx(StyledBadgeText, { inverted: inverted, "$surface": surface, "$message": message, children: children }) })));
 };
 var templateObject_1, templateObject_2;

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

@@ -25,13 +25,12 @@ import { numToPx } from '@ovotech/element-core';
 import { useBreakpoint } from '../../hooks';
 import styled from '../../styled.native';
 var CardWrapper = styled.View(function (_a) {
-    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, _e = _a.smallAndUp, smallAndUp = _e === void 0 ? false : _e;
-    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    ");
+    var theme = _a.theme, displayStyle = _a.displayStyle, _b = _a.smallAndUp, smallAndUp = _b === void 0 ? false : _b;
+    var isSolid = displayStyle === 'solid';
+    return "\n      position: relative;\n      background: ".concat(isSolid ? theme.color.surface.bright : 'transparent', ";\n      padding: ").concat(numToPx(theme.space[smallAndUp ? 900 : 600]), ";\n      border-width: ").concat(numToPx(theme.border.width.md), ";\n      border-style: solid;\n      border-color: ").concat(isSolid ? 'transparent' : theme.color.surface.bright, ";\n      border-radius: ").concat(numToPx(theme.border.radius['2xl']), ";\n    ");
 });
 export var Card = function (_a) {
-    var children = _a.children, inline = _a.inline, inverted = _a.inverted, rest = __rest(_a, ["children", "inline", "inverted"]);
+    var children = _a.children, _b = _a.displayStyle, displayStyle = _b === void 0 ? 'solid' : _b, rest = __rest(_a, ["children", "displayStyle"]);
     var smallAndUp = useBreakpoint().smallAndUp;
-    return (_jsx(CardWrapper, __assign({ inline: inline, inverted: inverted, smallAndUp: smallAndUp }, rest, { children: children })));
+    return (_jsx(CardWrapper, __assign({ smallAndUp: smallAndUp, displayStyle: displayStyle }, rest, { children: children })));
 };

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

@@ -36,33 +36,33 @@ import { Icon } from '../Icon/Icon';
 import { LabelText } from '../LabelText';
 import { Stack } from '../Stack';
 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(numToPx(checkboxSize + gap), ";\n      height: ").concat(numToPx(core.space[11]), ";\n    ");
+    var theme = _a.theme;
+    var checkboxSize = theme.space[600];
+    var gap = theme.space[200];
+    return "\n      width: ".concat(numToPx(checkboxSize + gap), ";\n      height: ").concat(numToPx(theme.space[1100]), ";\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(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
+    var theme = _a.theme, invalid = _a.invalid, checked = _a.checked;
+    return "\n      width: ".concat(numToPx(theme.space[600]), ";\n      height: ").concat(numToPx(theme.space[600]), ";\n      border: ").concat(numToPx(theme.border.width.md), " solid;\n      margin-top: 10px;\n      border-radius: ").concat(numToPx(theme.border.radius.xs), ";\n      border-color: ").concat(invalid
+        ? theme.input.color.borderError
         : checked
-            ? core.color.blue.dark
-            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
+            ? theme.input.color.selected
+            : theme.input.color.border, ";\n      background: ").concat(checked ? theme.input.color.selectedTint : 'transparent', ";\n    ");
 });
 var CheckboxCheck = function (props) {
     return _jsx(Icon, __assign({ name: "check", size: 16 }, props));
 };
 var StyledCheckboxInputCheck = styled(CheckboxCheck)(function (_a) {
-    var core = _a.theme.core, checked = _a.checked;
-    return "\n      margin-top: 3px;\n      margin-left: 3px;\n      color: ".concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+    var theme = _a.theme, checked = _a.checked;
+    return "\n      margin-top: ".concat(numToPx(theme.space[50]), ";\n      margin-left: ").concat(numToPx(theme.space[50]), ";\n      color: ").concat(theme.color.alert.info, ";\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(StyledCheckboxInputWrapper, __assign({}, rest, { children: _jsx(StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledCheckboxInputCheck, { checked: checked }) }) })));
 };
 var CheckLabelText = styled(LabelText)(function (_a) {
-    var core = _a.theme.core;
-    return "\n    padding-top: ".concat(numToPx(core.space[3]), ";\n  ");
+    var theme = _a.theme;
+    return "\n    padding-top: ".concat(numToPx(theme.space[300]), ";\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

@@ -5,57 +5,57 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 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  "])), numToPx(core.borderWidth.small), semantic.border.differentiated);
+    var theme = _a.theme;
+    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(theme.border.width.sm), theme.color.surface.borderDim);
 });
 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-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    flex: ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    flex: ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n  "])), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[1]), numToPx(core.space[1]), cellWidth === 'auto' ? 1 : 0, cellWidth);
+    var theme = _a.theme, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    flex: ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    flex: ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n  "])), numToPx(theme.space[smallAndUp ? 300 : 200]), numToPx(theme.space[smallAndUp ? 300 : 200]), numToPx(theme.space[200]), numToPx(theme.space[200]), 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    flex-wrap: wrap;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: left;\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);
+    var theme = _a.theme, 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    flex-wrap: wrap;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "])), theme.native.font.family.bold, numToPx(theme.font.lineHeight.md.mediaQuery[smallAndUp ? 'lg' : 'sm']), numToPx(theme.font.size.md.mediaQuery[smallAndUp ? 'lg' : 'sm']), theme.color.surface.onSurface);
 });
 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    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);
+    var theme = _a.theme, 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    flex-wrap: wrap;\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "])), theme.native.font.family.bold, numToPx(theme.font.size.xl.mediaQuery[smallAndUp ? 'lg' : 'sm']), numToPx(theme.font.lineHeight.xl.mediaQuery[smallAndUp ? 'lg' : 'sm']), theme.color.brand.brand);
 });
 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, numToPx(core.lineHeight.body.large), numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small']));
+    var theme = _a.theme, 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  "])), theme.native.font.family.book, numToPx(theme.font.lineHeight.md.mediaQuery.lg), numToPx(theme.font.size.md.mediaQuery[smallAndUp ? 'lg' : 'sm']));
 });
 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  "])), numToPx(core.space[4]), numToPx(core.space[2]));
+    var theme = _a.theme;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", " ", ";\n  "], ["\n    padding: ", " ", ";\n  "])), numToPx(theme.space[400]), numToPx(theme.space[200]));
 });
 export var TableRow = styled.View(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, core = _b.core, stripe = _a.stripe;
+    var theme = _a.theme, 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' : numToPx(core.borderWidth.small), stripe
+        ? theme.color.surface.dim
+        : theme.color.surface.surface, stripe ? '0px' : numToPx(theme.border.width.sm), stripe
         ? 'transparent'
-        : "".concat(semantic.border.differentiated));
+        : "".concat(theme.color.surface.borderDim));
 });
 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    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);
+    var theme = _a.theme;
+    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  "])), theme.color.surface.surface, numToPx(theme.border.width.sm), theme.color.surface.border);
 });
 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-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "])), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[2]), numToPx(core.space[2]), cellWidth, cellWidth === 'auto' ? 1 : 0);
+    var theme = _a.theme, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
+    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "])), numToPx(theme.space[smallAndUp ? 300 : 200]), numToPx(theme.space[smallAndUp ? 300 : 200]), numToPx(theme.space[200]), numToPx(theme.space[200]), 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-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "])), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[2]), numToPx(core.space[2]), cellWidth, cellWidth === 'auto' ? 1 : 0);
+    var theme = _a.theme, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
+    return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "])), numToPx(theme.space[smallAndUp ? 300 : 200]), numToPx(theme.space[smallAndUp ? 300 : 200]), numToPx(theme.space[200]), numToPx(theme.space[200]), 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 - 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    ");
+    var theme = _a.theme, width = _a.width;
+    var minWidth = width ? "".concat(width - theme.space[200] * 2, "px") : '100%';
+    return "\n      min-width: ".concat(minWidth, ";\n      flex: 1;\n      flex-direction: row;\n      background-color: ").concat(theme.color.surface.bright, ";\n      padding: ").concat(numToPx(theme.space[100]), " ").concat(numToPx(theme.space[200]), ";\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(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 theme = _a.theme, smallAndUp = _a.smallAndUp;
+    return "\n  flex: 1;\n  font-family: ".concat(theme.native.font.family.book, ";\n  font-size: ").concat(numToPx(theme.font.size.sm.mediaQuery[smallAndUp ? 'lg' : 'sm']), ";\n  line-height: ").concat(numToPx(theme.font.lineHeight.sm.mediaQuery[smallAndUp ? 'lg' : 'sm']), ";\n  color: ").concat(theme.color.surface.onSurfaceVariant, ";\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

@@ -27,29 +27,39 @@ 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 = 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 stretch = _a.stretch, theme = _a.theme;
+    var margin = numToPx(theme.space[100]);
+    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 = numToPx(core.space[1]);
+    var theme = _a.theme;
+    var padding = numToPx(theme.space[100]);
     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"])));
 var MonthField = styled(SubField)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 25%;\n"], ["\n  width: 25%;\n"])));
 var YearField = styled(SubField)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 50%;\n"], ["\n  width: 50%;\n"])));
 export var DateField = forwardRef(function (_a, ref) {
-    var label = _a.label, hint = _a.hint, error = _a.error, _b = _a.optional, optional = _b === void 0 ? false : _b, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, onChange = _a.onChange, value = _a.value, testID = _a.testID, _d = _a.editable, editable = _d === void 0 ? false : _d;
+    var label = _a.label, hint = _a.hint, error = _a.error, _b = _a.optional, optional = _b === void 0 ? false : _b, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, onChange = _a.onChange, value = _a.value, testID = _a.testID, _d = _a.editable, editable = _d === void 0 ? true : _d, _e = _a.autoFocusNext, autoFocusNext = _e === void 0 ? true : _e;
     var hasError = !!error;
+    var dayRef = createRef();
+    var monthRef = createRef();
+    var yearRef = createRef();
+    var nextFieldRef = {
+        day: monthRef,
+        month: yearRef,
+    };
     var handleChange = function (key) { return function (datePartValue) {
         var _a;
         onChange &&
             onChange(__assign(__assign({}, value), (_a = {}, _a[key] = datePartValue, _a)));
+        if (key !== 'year' && autoFocusNext) {
+            var nextField = nextFieldRef[key].current;
+            if (nextField && datePartValue.length === 2) {
+                nextField.focus();
+            }
+        }
     }; };
-    var dayRef = createRef();
-    var monthRef = createRef();
-    var yearRef = createRef();
     var accessibilityLabel = function (labelText) {
         return [labelText, getText(hint), getText(error)].filter(Boolean).join(', ');
     };
@@ -58,6 +68,6 @@ export var DateField = forwardRef(function (_a, ref) {
             internalRef.current.focus();
         }
     }; };
-    return (_jsx(FormGroup, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsxs(InlineFields, { stretch: fullWidth, children: [_jsxs(DayField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(dayRef), accessible: false, children: _jsx(SubLabelText, { children: "Day" }) }), _jsx(NumberInput, { ref: mergeRefs(dayRef, ref), accessibilityLabel: accessibilityLabel('Day'), invalid: hasError, value: value.day, onChangeText: handleChange('day'), testID: testID, stretch: true, editable: editable })] }), _jsxs(MonthField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(monthRef), accessible: false, children: _jsx(SubLabelText, { children: "Month" }) }), _jsx(NumberInput, { ref: monthRef, accessibilityLabel: accessibilityLabel('Month'), invalid: hasError, value: value.month, onChangeText: handleChange('month'), testID: "".concat(testID, "-month"), stretch: true, editable: editable })] }), _jsxs(YearField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(yearRef), accessible: false, children: _jsx(SubLabelText, { children: "Year" }) }), _jsx(NumberInput, { ref: yearRef, accessibilityLabel: accessibilityLabel('Year'), invalid: hasError, value: value.year, onChangeText: handleChange('year'), testID: "".concat(testID, "-year"), stretch: true, editable: editable })] })] })] }) }));
+    return (_jsx(FormGroup, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsxs(InlineFields, { stretch: fullWidth, children: [_jsxs(DayField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(dayRef), accessible: false, children: _jsx(SubLabelText, { children: "Day" }) }), _jsx(NumberInput, { ref: mergeRefs(dayRef, ref), accessibilityLabel: accessibilityLabel('Day'), invalid: hasError, value: value.day, onChangeText: handleChange('day'), testID: testID, stretch: true, editable: editable, maxLength: 2 })] }), _jsxs(MonthField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(monthRef), accessible: false, children: _jsx(SubLabelText, { children: "Month" }) }), _jsx(NumberInput, { ref: monthRef, accessibilityLabel: accessibilityLabel('Month'), invalid: hasError, value: value.month, onChangeText: handleChange('month'), testID: "".concat(testID, "-month"), stretch: true, editable: editable, maxLength: 2 })] }), _jsxs(YearField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(yearRef), accessible: false, children: _jsx(SubLabelText, { children: "Year" }) }), _jsx(NumberInput, { ref: yearRef, accessibilityLabel: accessibilityLabel('Year'), invalid: hasError, value: value.year, onChangeText: handleChange('year'), testID: "".concat(testID, "-year"), stretch: true, editable: editable, maxLength: 4 })] })] })] }) }));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -32,16 +32,16 @@ import styled, { css } from '../../styled.native';
 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)', numToPx(core.space[smallAndUp ? 2 : 1]), semantic.message.link);
+    var theme = _a.theme, 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)', numToPx(theme.space[smallAndUp ? 200 : 100]), theme.color.surface.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, numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small']), numToPx(core.lineHeight.body[smallAndUp ? 'large' : 'small']), semantic.message.link, semantic.message.link);
+    var theme = _a.theme, 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    padding-left: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n    padding-left: ", ";\n  "])), theme.native.font.family.book, numToPx(theme.font.size.md.mediaQuery[smallAndUp ? 'lg' : 'sm']), numToPx(theme.font.lineHeight.md.mediaQuery[smallAndUp ? 'lg' : 'sm']), theme.color.surface.link, theme.color.surface.link, numToPx(theme.space[200]));
 });
 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  "])), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[smallAndUp ? 2 : 1]));
+    var theme = _a.theme;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    padding-left: ", ";\n  "], ["\n    margin-top: ", ";\n    padding-left: ", ";\n  "])), numToPx(theme.space[300]), numToPx(theme.space[600]));
 });
 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/Divider/Divider.js

@@ -5,10 +5,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from '../../styled.native';
 var StyledDivider = styled.View(function (_a) {
-    var semantic = _a.theme.semantic, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c;
+    var theme = _a.theme, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c;
     return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 1px;\n      background: ", ";\n      width: ", ";\n    "], ["\n      height: 1px;\n      background: ", ";\n      width: ", ";\n    "])), type === 'default'
-        ? semantic.border.graphic
-        : semantic.border.differentiated, width);
+        ? theme.color.surface.border
+        : theme.color.surface.borderDim, width);
 });
 export var Divider = function (_a) {
     var type = _a.type, width = _a.width;

package/dist/esm/components/Em/Em.js

@@ -3,5 +3,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled from '../../styled.native';
-export var Em = styled.Text(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */\n  font-family: 'System font';\n  font-style: italic;\n"], ["\n  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */\n  font-family: 'System font';\n  font-style: italic;\n"])));
+export var Em = styled.Text(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */\n  font-family: System;\n  font-style: italic;\n"], ["\n  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */\n  font-family: System;\n  font-style: italic;\n"])));
 var templateObject_1;

package/dist/esm/components/ErrorText/ErrorText.js

@@ -6,11 +6,13 @@ import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 var StyledErrorText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var theme = _a.theme, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "], ["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "])), numToPx(core.space[1]), numToPx(core.space[1]), core.fontFamily.body.native, numToPx(fontSize), numToPx(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small), semantic.message.error);
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), numToPx(theme.space[100]), numToPx(theme.space[100]), theme.native.font.family.bold, numToPx(fontSize), numToPx(smallAndUp
+        ? theme.font.lineHeight.md.mediaQuery.lg
+        : theme.font.lineHeight.md.mediaQuery.sm), theme.color.alert.error);
 });
 var ErrorText = styledComponentWithBreakpoints(StyledErrorText);
 export { ErrorText };

package/dist/esm/components/Field/Field.js

@@ -38,7 +38,7 @@ export var Field = forwardRef(function (_a, ref) {
     var accessibilityLabel = [labelText, getText(hint), getText(error)]
         .filter(Boolean)
         .join(', ');
-    return (_jsx(FormGroup, { error: hasError || undefined, testID: "nb-field-form-group", children: _jsxs(Stack, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: function () {
+    return (_jsx(FormGroup, { error: hasError || undefined, testID: "nb-field-form-group", children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(TouchableWithoutFeedback, { onPress: function () {
                         if (inputRef.current) {
                             // @ts-ignore. Toggle picker if this is a select menu.
                             if (inputRef.current.togglePicker) {

package/dist/esm/components/Grid/Col.js

@@ -6,27 +6,21 @@ import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 var StyledCol = styled.View(function (_a) {
-    var core = _a.theme.core, _b = _a.span, span = _b === void 0 ? 12 : _b, small = _a.small, medium = _a.medium, large = _a.large, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
-    var gutter = [core.space[4], core.space[8]];
-    var halfGutter = gutter.map(function (g) { return g / 2; });
-    var smallScreen = !smallAndUp;
-    var percentage = (span / 12) * 100;
-    var smallPercentage = small ? (small / 12) * 100 : percentage;
-    var mediumPercentage = medium ? (medium / 12) * 100 : smallPercentage;
-    var largePercentage = large ? (large / 12) * 100 : mediumPercentage;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex: 0 0 auto;\n      flex-basis: ", "%;\n      max-width: ", "%;\n      padding-left: ", ";\n      padding-right: ", ";\n      margin-bottom: ", ";\n      width: 100%;\n    "], ["\n      flex: 0 0 auto;\n      flex-basis: ", "%;\n      max-width: ", "%;\n      padding-left: ", ";\n      padding-right: ", ";\n      margin-bottom: ", ";\n      width: 100%;\n    "])), largeAndUp
+    var theme = _a.theme, _b = _a.span, span = _b === void 0 ? 12 : _b, small = _a.small, medium = _a.medium, large = _a.large, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
+    var COLS = 12;
+    var gutter = mediumAndUp ? theme.space[800] : theme.space[400];
+    var percentage = (span / COLS) * 100;
+    var smallPercentage = small ? (small / COLS) * 100 : percentage;
+    var mediumPercentage = medium ? (medium / COLS) * 100 : smallPercentage;
+    var largePercentage = large ? (large / COLS) * 100 : mediumPercentage;
+    var maxWidth = largeAndUp
         ? largePercentage
         : mediumAndUp
             ? mediumPercentage
             : smallAndUp
                 ? smallPercentage
-                : percentage, largeAndUp
-        ? largePercentage
-        : mediumAndUp
-            ? mediumPercentage
-            : smallAndUp
-                ? smallPercentage
-                : percentage, numToPx(smallScreen ? halfGutter[0] : halfGutter[1]), numToPx(smallScreen ? halfGutter[0] : halfGutter[1]), numToPx(smallScreen ? gutter[0] : gutter[1]));
+                : percentage;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex: 0 0 auto;\n      padding-left: ", ";\n      padding-right: ", ";\n      margin-bottom: ", ";\n      max-width: ", "%;\n      width: 100%;\n    "], ["\n      flex: 0 0 auto;\n      padding-left: ", ";\n      padding-right: ", ";\n      margin-bottom: ", ";\n      max-width: ", "%;\n      width: 100%;\n    "])), numToPx(gutter / 2), numToPx(gutter / 2), numToPx(gutter), maxWidth);
 });
 var Col = styledComponentWithBreakpoints(StyledCol);
 export { Col };

package/dist/esm/components/Grid/Row.js

@@ -29,12 +29,13 @@ import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 var StyledRow = styled.View(function (_a) {
-    var core = _a.theme.core, isNested = _a.isNested, smallAndUp = _a.smallAndUp;
-    var gutter = [core.space[4], core.space[8]];
-    var halfGutter = gutter.map(function (g) { return g / 2; });
-    var smallScreen = !smallAndUp;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n      margin: 0 auto;\n      width: ", "px;\n      max-width: 100%;\n      margin-bottom: -", ";\n\n      ", "\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n      margin: 0 auto;\n      width: ", "px;\n      max-width: 100%;\n      margin-bottom: -", ";\n\n      ", "\n    "])), numToPx(smallScreen ? halfGutter[0] : halfGutter[1]), numToPx(smallScreen ? halfGutter[0] : halfGutter[1]), core.breakpoint.large, numToPx(smallScreen ? gutter[0] : gutter[1]), isNested
-        ? "\n      margin-left: -".concat(numToPx(smallScreen ? gutter[0] : gutter[1]), ";\n      margin-right: -").concat(numToPx(smallScreen ? gutter[0] : gutter[1]), ";\n      width: auto;\n      max-width: 200%; /* max width none not supported in RN */\n    ")
+    var theme = _a.theme, isNested = _a.isNested, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp;
+    var gutter = mediumAndUp ? theme.space[800] : theme.space[400];
+    var margin = smallAndUp ? theme.space[800] : theme.space[400];
+    /* We need to make up for the half gutter that is added to the left and right of a column, between the small and medium breakpoints */
+    var additionalMargin = smallAndUp ? (margin - gutter) / 2 : 0;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n      margin: 0 auto;\n      max-width: ", "px;\n      width: 100%;\n\n      ", "\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n      margin: 0 auto;\n      max-width: ", "px;\n      width: 100%;\n\n      ", "\n    "])), numToPx(margin / 2 + additionalMargin), numToPx(margin / 2 + additionalMargin), theme.breakpoint.large + margin, isNested
+        ? "\n      margin-left: -".concat(numToPx(margin / 2), ";\n      margin-right: -").concat(numToPx(margin / 2), ";\n      width: auto;\n      max-width: 200%; /* max width none not supported in RN */\n    ")
         : null);
 });
 var WidthRow = styledComponentWithBreakpoints(StyledRow);

package/dist/esm/components/HintText/HintText.js

@@ -6,11 +6,13 @@ import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 var StyledHintText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var theme = _a.theme, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "], ["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "])), numToPx(core.space[1]), numToPx(core.space[1]), core.fontFamily.body.native, numToPx(fontSize), numToPx(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small), semantic.border.functional);
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), numToPx(theme.space[100]), numToPx(theme.space[100]), theme.native.font.family.book, numToPx(fontSize), numToPx(smallAndUp
+        ? theme.font.lineHeight.md.mediaQuery.lg
+        : theme.font.lineHeight.md.mediaQuery.sm), theme.color.surface.onSurfaceVariant);
 });
 var HintText = styledComponentWithBreakpoints(StyledHintText);
 export { HintText };

package/dist/esm/components/Icon/Icon.js

@@ -25,12 +25,10 @@ import { useContext } from 'react';
 import { useIcons } from '../../providers';
 import { ThemeContext } from '../../styled.native';
 export var Icon = function (_a) {
-    var name = _a.name, size = _a.size, color = _a.color, testID = _a.testID, rest = __rest(_a, ["name", "size", "color", "testID"]);
+    var name = _a.name, _b = _a.size, size = _b === void 0 ? '16' : _b, color = _a.color, testID = _a.testID, rest = __rest(_a, ["name", "size", "color", "testID"]);
     var icons = useIcons();
-    var semantic = useContext(ThemeContext).semantic;
+    var theme = useContext(ThemeContext);
     // @ts-ignore to support additional icons.
     var Svg = name && icons[name];
-    return Svg ? (_jsx(Svg, __assign({ testID: testID ? testID : "element-icon".concat(name ? "-".concat(name) : ''), 
-        // @ts-ignore this is valid.
-        color: color !== null && color !== void 0 ? color : semantic.message.base, width: size, height: size }, rest))) : null;
+    return Svg ? (_jsx(Svg, __assign({ testID: testID ? testID : "element-icon".concat(name ? "-".concat(name) : ''), color: color !== null && color !== void 0 ? color : theme.color.surface.onSurface, width: size, height: size }, rest))) : null;
 };

package/dist/esm/components/Input/Input.js

@@ -31,8 +31,13 @@ import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon/Icon';
 var StyledIcon = styled(Icon)(function (_a) {
-    var core = _a.theme.core, side = _a.side, focused = _a.focused;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "], ["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "])), focused ? '16px' : '14px', side === 'left' ? "left: ".concat(numToPx(core.space[2])) : '', side === 'right' ? "right: ".concat(numToPx(core.space[2])) : '');
+    var theme = _a.theme, side = _a.side, focused = _a.focused;
+    var focusCompensation = focused ? theme.space[50] : 0;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "], ["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "])), numToPx(theme.space[350] + focusCompensation), side === 'left'
+        ? "left: ".concat(numToPx(theme.space[200] + focusCompensation))
+        : '', side === 'right'
+        ? "right: ".concat(numToPx(theme.space[200] + focusCompensation))
+        : '');
 });
 var Input = forwardRef(function (_a, ref) {
     var onFocus = _a.onFocus, onBlur = _a.onBlur, style = _a.style, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rightSlot = _a.rightSlot, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight", "rightSlot"]);
@@ -53,21 +58,21 @@ var Input = forwardRef(function (_a, ref) {
                 } })), iconRight && !rightSlot ? (_jsx(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
 });
 var InputWrapper = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, focused = _a.focused;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "], ["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "])), numToPx(core.radius.small), semantic.border.functional, focused
-        ? "\n      border-width: ".concat(numToPx(core.borderWidth.small), ";\n      border-color: ").concat(semantic.focus.outline, ";\n      padding: 2px;\n      margin: -4px;")
+    var theme = _a.theme, focused = _a.focused;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "], ["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "])), numToPx(theme.border.radius.md), theme.input.color.border, focused
+        ? "\n      border-width: ".concat(numToPx(theme.border.width.md), ";\n      border-color: ").concat(theme.color.outline.outer, ";\n      padding: 2px;\n      margin: -4px;")
         : null);
 });
 var StyledInput = styled.TextInput(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, smallAndUp = _a.smallAndUp, iconLeft = _a.iconLeft, iconRight = _a.iconRight, hasRightSlot = _a.hasRightSlot;
+    var theme = _a.theme, invalid = _a.invalid, smallAndUp = _a.smallAndUp, iconLeft = _a.iconLeft, iconRight = _a.iconRight, hasRightSlot = _a.hasRightSlot;
     var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
     var errorStyles = invalid
-        ? "\n        border-color: ".concat(semantic.message.error, ";\n      ")
+        ? "\n        border-color: ".concat(theme.color.alert.error, ";\n      ")
         : '';
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-family: ", ";\n      color: ", ";\n      font-size: ", ";\n      height: ", ";\n      line-height: 18px; /* Corrects for responsive line height in fixed height input */\n      border: ", " solid\n        ", ";\n      border-radius: ", ";\n      padding: 0 ", ";\n      flex: 1;\n\n      ", "\n      ", "\n\n          ", "\n    "], ["\n      font-family: ", ";\n      color: ", ";\n      font-size: ", ";\n      height: ", ";\n      line-height: 18px; /* Corrects for responsive line height in fixed height input */\n      border: ", " solid\n        ", ";\n      border-radius: ", ";\n      padding: 0 ", ";\n      flex: 1;\n\n      ", "\n      ", "\n\n          ", "\n    "])), core.fontFamily.body.native, semantic.message.base, numToPx(fontSize), numToPx(core.space[11]), numToPx(core.borderWidth.small), semantic.border.functional, numToPx(core.radius.small), numToPx(core.space[2]), iconLeft ? "padding-left: ".concat(numToPx(core.space[8]), ";") : '', iconRight || hasRightSlot
-        ? "padding-right: ".concat(numToPx(core.space[8]), ";")
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    color: ", ";\n    font-size: ", ";\n    height: ", ";\n    line-height: 18px; /* Corrects for responsive line height in fixed height input */\n    border: ", " solid ", ";\n    border-radius: ", ";\n    padding: ", ";\n    flex: 1;\n\n    ", "\n    ", "\n\n          ", "\n  "], ["\n    font-family: ", ";\n    color: ", ";\n    font-size: ", ";\n    height: ", ";\n    line-height: 18px; /* Corrects for responsive line height in fixed height input */\n    border: ", " solid ", ";\n    border-radius: ", ";\n    padding: ", ";\n    flex: 1;\n\n    ", "\n    ", "\n\n          ", "\n  "])), theme.native.font.family.book, theme.color.surface.onSurface, numToPx(fontSize), numToPx(theme.space[1100]), numToPx(theme.border.width.md), theme.input.color.border, numToPx(theme.border.radius.sm), numToPx(theme.space[200]), iconLeft ? "padding-left: ".concat(numToPx(theme.space[800]), ";") : '', iconRight || hasRightSlot
+        ? "padding-right: ".concat(numToPx(theme.space[800]), ";")
         : '', errorStyles);
 });
 export { Input };