@ovotech/element-native 2.2.0-canary-58cee1b-87 → 2.2.0-canary-252a50d-89

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/components/Divider/Divider.js +2 -2
  2. package/dist/components/ErrorText/ErrorText.js +7 -4
  3. package/dist/components/Grid/Col.js +4 -3
  4. package/dist/components/Grid/Row.js +5 -4
  5. package/dist/components/HintText/HintText.js +7 -4
  6. package/dist/components/LabelText/LabelText.js +5 -4
  7. package/dist/components/List/List.js +24 -31
  8. package/dist/components/Margin/Margin.js +1 -1
  9. package/dist/components/NavHeader/NavHeader.js +14 -14
  10. package/dist/components/SkeletonLoading/SkeletonCTA.js +2 -2
  11. package/dist/components/SkeletonLoading/SkeletonCircle.js +2 -2
  12. package/dist/components/SkeletonLoading/SkeletonHeading.js +2 -2
  13. package/dist/components/SkeletonLoading/SkeletonText.js +2 -2
  14. package/dist/components/Stack/Stack.js +1 -1
  15. package/dist/esm/components/Divider/Divider.js +2 -2
  16. package/dist/esm/components/ErrorText/ErrorText.js +7 -4
  17. package/dist/esm/components/Grid/Col.js +4 -3
  18. package/dist/esm/components/Grid/Row.js +5 -4
  19. package/dist/esm/components/HintText/HintText.js +7 -4
  20. package/dist/esm/components/LabelText/LabelText.js +5 -4
  21. package/dist/esm/components/List/List.js +26 -33
  22. package/dist/esm/components/Margin/Margin.js +1 -1
  23. package/dist/esm/components/NavHeader/NavHeader.js +14 -14
  24. package/dist/esm/components/SkeletonLoading/SkeletonCTA.js +2 -2
  25. package/dist/esm/components/SkeletonLoading/SkeletonCircle.js +2 -2
  26. package/dist/esm/components/SkeletonLoading/SkeletonHeading.js +2 -2
  27. package/dist/esm/components/SkeletonLoading/SkeletonText.js +2 -2
  28. package/dist/esm/components/Stack/Stack.js +1 -1
  29. package/package.json +2 -2
package/dist/components/Divider/Divider.js CHANGED
@@ -31,8 +31,8 @@ exports.Divider = void 0;
31
31
  var jsx_runtime_1 = require("react/jsx-runtime");
32
32
  var styled_native_1 = __importStar(require("../../styled.native"));
33
33
  var StyledDivider = styled_native_1.default.View(function (_a) {
34
- var colors = _a.theme.colors, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c;
35
- return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 1px;\n background: ", ";\n width: ", ";\n "], ["\n height: 1px;\n background: ", ";\n width: ", ";\n "])), type === 'default' ? colors.primaryContrast : '#ECE5DD', width);
34
+ var semantic = _a.theme.semantic, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c;
35
+ return (0, styled_native_1.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);
36
36
  });
37
37
  var Divider = function (_a) {
38
38
  var type = _a.type, width = _a.width;
package/dist/components/ErrorText/ErrorText.js CHANGED
@@ -29,12 +29,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
29
29
  Object.defineProperty(exports, "__esModule", { value: true });
30
30
  exports.ErrorText = void 0;
31
31
  var styled_native_1 = __importStar(require("../../styled.native"));
32
- var theme_1 = require("../../theme");
33
32
  var utils_1 = require("../../utils");
34
33
  var StyledErrorText = styled_native_1.default.Text(function (_a) {
35
- var field = _a.theme.field, smallAndUp = _a.smallAndUp;
36
- var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
37
- return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-size: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-size: ", ";\n color: ", ";\n "])), field.error.fontFamily, (0, theme_1.calculateLineHeight)(fontSize, field.lineHeight), fontSize, field.error.color);
34
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
35
+ var fontSize = smallAndUp
36
+ ? core.fontSize.body.large
37
+ : core.fontSize.body.small;
38
+ return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-size: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-size: ", ";\n color: ", ";\n "])), core.fontFamily.body.native, smallAndUp
39
+ ? core.lineHeight.body.large
40
+ : core.lineHeight.body.small, fontSize, semantic.error.message);
38
41
  });
39
42
  var ErrorText = (0, utils_1.styledComponentWithBreakpoints)(StyledErrorText);
40
43
  exports.ErrorText = ErrorText;
package/dist/components/Grid/Col.js CHANGED
@@ -32,8 +32,9 @@ var styled_native_1 = __importStar(require("../../styled.native"));
32
32
  var utils_1 = require("../../utils");
33
33
  var utils_2 = require("../../utils/utils");
34
34
  var StyledCol = styled_native_1.default.View(function (_a) {
35
- var grid = _a.theme.grid, _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;
36
- var halfGutter = grid.gutter.map(function (g) { return (0, utils_2.pxToNumber)(g) / 2 + 'px'; });
35
+ 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;
36
+ var gutter = [core.space[4], core.space[8]];
37
+ var halfGutter = gutter.map(function (g) { return (0, utils_2.pxToNumber)(g) / 2 + 'px'; });
37
38
  var smallScreen = !smallAndUp;
38
39
  var percentage = (span / 12) * 100;
39
40
  var smallPercentage = small ? (small / 12) * 100 : percentage;
@@ -51,7 +52,7 @@ var StyledCol = styled_native_1.default.View(function (_a) {
51
52
  ? mediumPercentage
52
53
  : smallAndUp
53
54
  ? smallPercentage
54
- : percentage, smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? grid.gutter[0] : grid.gutter[1]);
55
+ : percentage, smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? gutter[0] : gutter[1]);
55
56
  });
56
57
  var Col = (0, utils_1.styledComponentWithBreakpoints)(StyledCol);
57
58
  exports.Col = Col;
package/dist/components/Grid/Row.js CHANGED
@@ -55,11 +55,12 @@ var styled_native_1 = __importStar(require("../../styled.native"));
55
55
  var utils_1 = require("../../utils");
56
56
  var utils_2 = require("../../utils/utils");
57
57
  var StyledRow = styled_native_1.default.View(function (_a) {
58
- var grid = _a.theme.grid, isNested = _a.isNested, smallAndUp = _a.smallAndUp;
59
- var halfGutter = grid.gutter.map(function (g) { return (0, utils_2.pxToNumber)(g) / 2 + 'px'; });
58
+ var core = _a.theme.core, isNested = _a.isNested, smallAndUp = _a.smallAndUp;
59
+ var gutter = [core.space[4], core.space[8]];
60
+ var halfGutter = gutter.map(function (g) { return (0, utils_2.pxToNumber)(g) / 2 + 'px'; });
60
61
  var smallScreen = !smallAndUp;
61
- return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n margin: 0 auto;\n width: ", ";\n max-width: 100%;\n margin-bottom: -", ";\n\n ", "\n "], ["\n padding-left: ", ";\n padding-right: ", ";\n margin: 0 auto;\n width: ", ";\n max-width: 100%;\n margin-bottom: -", ";\n\n ", "\n "])), smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], grid.maxWidth, smallScreen ? grid.gutter[0] : grid.gutter[1], isNested
62
- ? "\n margin-left: -".concat(smallScreen ? grid.gutter[0] : grid.gutter[1], ";\n margin-right: -").concat(smallScreen ? grid.gutter[0] : grid.gutter[1], ";\n width: auto;\n max-width: 200%; /* max width none not supported in RN */\n ")
62
+ return (0, styled_native_1.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 "])), smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], core.breakpoint.large, smallScreen ? gutter[0] : gutter[1], isNested
63
+ ? "\n margin-left: -".concat(smallScreen ? gutter[0] : gutter[1], ";\n margin-right: -").concat(smallScreen ? gutter[0] : gutter[1], ";\n width: auto;\n max-width: 200%; /* max width none not supported in RN */\n ")
63
64
  : null);
64
65
  });
65
66
  var WidthRow = (0, utils_1.styledComponentWithBreakpoints)(StyledRow);
package/dist/components/HintText/HintText.js CHANGED
@@ -29,12 +29,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
29
29
  Object.defineProperty(exports, "__esModule", { value: true });
30
30
  exports.HintText = void 0;
31
31
  var styled_native_1 = __importStar(require("../../styled.native"));
32
- var theme_1 = require("../../theme");
33
32
  var utils_1 = require("../../utils");
34
33
  var StyledHintText = styled_native_1.default.Text(function (_a) {
35
- var field = _a.theme.field, smallAndUp = _a.smallAndUp;
36
- var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
37
- return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "])), field.fontFamily, fontSize, (0, theme_1.calculateLineHeight)(fontSize, field.lineHeight), field.hint.color);
34
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
35
+ var fontSize = smallAndUp
36
+ ? core.fontSize.body.large
37
+ : core.fontSize.body.small;
38
+ return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "])), core.fontFamily.body.native, fontSize, smallAndUp
39
+ ? core.lineHeight.body.large
40
+ : core.lineHeight.body.small, semantic.border.functional);
38
41
  });
39
42
  var HintText = (0, utils_1.styledComponentWithBreakpoints)(StyledHintText);
40
43
  exports.HintText = HintText;
package/dist/components/LabelText/LabelText.js CHANGED
@@ -29,12 +29,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
29
29
  Object.defineProperty(exports, "__esModule", { value: true });
30
30
  exports.LabelText = void 0;
31
31
  var styled_native_1 = __importStar(require("../../styled.native"));
32
- var theme_1 = require("../../theme");
33
32
  var utils_1 = require("../../utils");
34
33
  var StyledLabelText = styled_native_1.default.Text(function (_a) {
35
- var field = _a.theme.field, smallAndUp = _a.smallAndUp;
36
- var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
37
- return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n "], ["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n "])), field.label.fontFamily, (0, theme_1.calculateLineHeight)(fontSize, field.lineHeight), field.label.color, fontSize);
34
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
35
+ var fontSize = smallAndUp
36
+ ? core.fontSize.body.large
37
+ : core.fontSize.body.small;
38
+ return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n "], ["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n "])), core.fontFamily.bodyBold.native, core.lineHeight.body.small, semantic.message.base, fontSize);
38
39
  });
39
40
  var LabelText = (0, utils_1.styledComponentWithBreakpoints)(StyledLabelText);
40
41
  exports.LabelText = LabelText;
package/dist/components/List/List.js CHANGED
@@ -58,22 +58,22 @@ var styled_native_1 = __importStar(require("../../styled.native"));
58
58
  var utils_1 = require("../../utils");
59
59
  var Stack_1 = require("../Stack");
60
60
  var UlBullet = styled_native_1.default.View(function (_a) {
61
- var _b = _a.theme, colors = _b.colors, list = _b.list, _c = _a.visible, visible = _c === void 0 ? true : _c, smallAndUp = _a.smallAndUp;
61
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.visible, visible = _c === void 0 ? true : _c, smallAndUp = _a.smallAndUp;
62
62
  var lineHeight = smallAndUp
63
- ? list.listItem.lineHeight[1]
64
- : list.listItem.lineHeight[0];
65
- var topMargin = ((0, utils_1.pxToNumber)(lineHeight) - (0, utils_1.pxToNumber)(list.listItem.bulletWidth)) / 2;
66
- return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", "px;\n width: ", ";\n height: ", ";\n background-color: ", ";\n "], ["\n margin-right: ", ";\n margin-top: ", "px;\n width: ", ";\n height: ", ";\n background-color: ", ";\n "])), list.listItem.bulletGap, topMargin, list.listItem.bulletWidth, list.listItem.bulletWidth, visible ? colors.body : 'transparent');
63
+ ? core.lineHeight.body.large
64
+ : core.lineHeight.body.small;
65
+ var topMargin = ((0, utils_1.pxToNumber)(lineHeight) - (0, utils_1.pxToNumber)(core.space[2])) / 2;
66
+ return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", "px;\n width: ", ";\n height: ", ";\n background-color: ", ";\n "], ["\n margin-right: ", ";\n margin-top: ", "px;\n width: ", ";\n height: ", ";\n background-color: ", ";\n "])), core.space[2], topMargin, core.space[2], core.space[2], visible ? semantic.message.base : 'transparent');
67
67
  });
68
68
  var StyledBullet = styled_native_1.default.Text(function (_a) {
69
- var _b = _a.theme, text = _b.text, list = _b.list, space = _b.space, smallAndUp = _a.smallAndUp;
69
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
70
70
  var fontSize = smallAndUp
71
- ? list.listItem.fontSize[1]
72
- : list.listItem.fontSize[0];
71
+ ? core.fontSize.body.large
72
+ : core.fontSize.body.small;
73
73
  var lineHeight = smallAndUp
74
- ? list.listItem.lineHeight[1]
75
- : list.listItem.lineHeight[0];
76
- return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n width: ", ";\n text-align: right;\n "], ["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n width: ", ";\n text-align: right;\n "])), text.fontFamily, lineHeight, text.color, fontSize, list.listItem.bulletGap, space[4]);
74
+ ? core.lineHeight.body.large
75
+ : core.lineHeight.body.small;
76
+ return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n width: ", ";\n text-align: right;\n "], ["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n width: ", ";\n text-align: right;\n "])), core.fontFamily.body.native, lineHeight, semantic.message.base, fontSize, core.space[2], core.space[4]);
77
77
  });
78
78
  var StyledUlItem = styled_native_1.default.View(function () { return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-direction: row;\n align-items: flex-start;\n justify-content: center;\n "], ["\n flex-direction: row;\n align-items: flex-start;\n justify-content: center;\n "]))); });
79
79
  var Bullet = (0, utils_1.styledComponentWithBreakpoints)(StyledBullet);
@@ -86,32 +86,30 @@ var ListNumberedItem = function (_a) {
86
86
  return ((0, jsx_runtime_1.jsxs)(react_native_1.View, __assign({ style: { flexDirection: 'row' } }, { children: [(0, jsx_runtime_1.jsx)(Bullet, { children: prefix }), children] })));
87
87
  };
88
88
  var StyledList = styled_native_1.default.View(function (_a) {
89
- var list = _a.theme.list, smallAndUp = _a.smallAndUp;
90
- return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n "])), smallAndUp ? list.marginTop[1] : list.marginTop[0], smallAndUp ? list.marginBottom[1] : list.marginBottom[0]);
89
+ var core = _a.theme.core, smallAndUp = _a.smallAndUp;
90
+ return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n "])), smallAndUp ? core.space[3] : core.space[2], smallAndUp ? core.space[3] : core.space[2]);
91
91
  });
92
92
  var ListWrapper = (0, utils_1.styledComponentWithBreakpoints)(StyledList);
93
93
  exports.ListWrapper = ListWrapper;
94
94
  var Ul = function (_a) {
95
95
  var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, rest = __rest(_a, ["children", "showBullets"]);
96
- var list = (0, react_1.useContext)(styled_native_1.ThemeContext).list;
97
- return ((0, jsx_runtime_1.jsx)(ListWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, __assign({ spaceBetween: list.listItem.marginVertical }, { children: react_1.Children.map(children, function (child) { return ((0, jsx_runtime_1.jsx)(ListBulletItem, __assign({ showBullets: showBullets }, { children: child }))); }) })) })));
96
+ return ((0, jsx_runtime_1.jsx)(ListWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, __assign({ spaceBetween: 2 }, { children: react_1.Children.map(children, function (child) { return ((0, jsx_runtime_1.jsx)(ListBulletItem, __assign({ showBullets: showBullets }, { children: child }))); }) })) })));
98
97
  };
99
98
  exports.Ul = Ul;
100
99
  var Ol = function (_a) {
101
100
  var children = _a.children, rest = __rest(_a, ["children"]);
102
- var list = (0, react_1.useContext)(styled_native_1.ThemeContext).list;
103
- return ((0, jsx_runtime_1.jsx)(ListWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, __assign({ spaceBetween: list.listItem.marginVertical }, { children: react_1.Children.map(children, function (child, index) { return ((0, jsx_runtime_1.jsx)(ListNumberedItem, __assign({ prefix: index + 1 + '.' }, { children: child }))); }) })) })));
101
+ return ((0, jsx_runtime_1.jsx)(ListWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, __assign({ spaceBetween: 2 }, { children: react_1.Children.map(children, function (child, index) { return ((0, jsx_runtime_1.jsx)(ListNumberedItem, __assign({ prefix: index + 1 + '.' }, { children: child }))); }) })) })));
104
102
  };
105
103
  exports.Ol = Ol;
106
104
  var StyledLi = styled_native_1.default.Text(function (_a) {
107
- var _b = _a.theme, text = _b.text, list = _b.list, smallAndUp = _a.smallAndUp;
105
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
108
106
  var fontSize = smallAndUp
109
- ? list.listItem.fontSize[1]
110
- : list.listItem.fontSize[0];
107
+ ? core.fontSize.body.large
108
+ : core.fontSize.body.small;
111
109
  var lineHeight = smallAndUp
112
- ? list.listItem.lineHeight[1]
113
- : list.listItem.lineHeight[0];
114
- return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "], ["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "])), text.fontFamily, lineHeight, text.color, fontSize);
110
+ ? core.lineHeight.body.large
111
+ : core.lineHeight.body.large;
112
+ return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "], ["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "])), core.fontFamily.body.native, lineHeight, semantic.message.base, fontSize);
115
113
  });
116
114
  var Li = (0, utils_1.styledComponentWithBreakpoints)(StyledLi);
117
115
  exports.Li = Li;
@@ -133,14 +131,9 @@ var StyledDtText = styled_native_1.default.Text(function (_a) {
133
131
  });
134
132
  var DtText = (0, utils_1.styledComponentWithBreakpoints)(StyledDtText);
135
133
  var StyledDtItem = styled_native_1.default.View(function (_a) {
136
- var list = _a.theme.list, smallAndUp = _a.smallAndUp;
137
- var marginTop = smallAndUp
138
- ? list.descriptionTerm.marginTop[1]
139
- : list.descriptionTerm.marginTop[0];
140
- var marginBottom = smallAndUp
141
- ? list.descriptionTerm.marginBottom[1]
142
- : list.descriptionTerm.marginBottom[0];
143
- return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n flex-direction: row;\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n flex-direction: row;\n "])), marginTop, marginBottom);
134
+ var core = _a.theme.core, smallAndUp = _a.smallAndUp;
135
+ var marginTop = smallAndUp ? core.space[4] : core.space[3];
136
+ return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n flex-direction: row;\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n flex-direction: row;\n "])), marginTop, core.space[1]);
144
137
  });
145
138
  var DtItem = (0, utils_1.styledComponentWithBreakpoints)(StyledDtItem);
146
139
  /**
package/dist/components/Margin/Margin.js CHANGED
@@ -31,7 +31,7 @@ var hooks_1 = require("../../hooks");
31
31
  var styled_native_1 = __importDefault(require("../../styled.native"));
32
32
  var utils_1 = require("../../utils");
33
33
  var StyledMargin = styled_native_1.default.View(function (_a) {
34
- var space = _a.theme.space, mTop = _a.mTop, mBottom = _a.mBottom, mLeft = _a.mLeft, mRight = _a.mRight, horizontal = _a.horizontal, vertical = _a.vertical, all = _a.all, breakpoints = _a.breakpoints;
34
+ var space = _a.theme.core.space, mTop = _a.mTop, mBottom = _a.mBottom, mLeft = _a.mLeft, mRight = _a.mRight, horizontal = _a.horizontal, vertical = _a.vertical, all = _a.all, breakpoints = _a.breakpoints;
35
35
  var formatter = function (spaceKey) {
36
36
  return spaceKey === 0 ? '0' : space[spaceKey];
37
37
  };
package/dist/components/NavHeader/NavHeader.js CHANGED
@@ -49,32 +49,32 @@ var BackIcon = function () {
49
49
  return ((0, jsx_runtime_1.jsx)(react_native_svg_1.Svg, __assign({ width: "10", height: "16", viewBox: "0 0 10 16" }, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M0.579956 8L8.57996 16L9.99996 14.58L3.41996 8L9.99996 1.42L8.57996 0L0.579956 8Z", fill: "white" }) })));
50
50
  };
51
51
  var StyledText = styled_native_1.default.Text(function (_a) {
52
- var _b = _a.theme, colors = _b.colors, fonts = _b.fonts, fontSizes = _b.fontSizes;
53
- return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n "], ["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n "])), colors.primaryContrast, fontSizes[1], fonts.body);
52
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic;
53
+ return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n "], ["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n "])), semantic.inverted.message.base, core.fontSize.small.small, core.fontFamily.body.native);
54
54
  });
55
55
  var LeftHeaderText = (0, styled_native_1.default)(StyledText)(function (_a) {
56
- var space = _a.theme.space;
57
- return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding-left: ", ";\n "], ["\n padding-left: ", ";\n "])), space[2]);
56
+ var core = _a.theme.core;
57
+ return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding-left: ", ";\n "], ["\n padding-left: ", ";\n "])), core.space[2]);
58
58
  });
59
59
  var HeadlineView = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
60
- var space = _a.theme.space;
61
- return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0 ", " ", ";\n "], ["\n padding: 0 ", " ", ";\n "])), space[3], space[3]);
60
+ var core = _a.theme.core;
61
+ return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0 ", " ", ";\n "], ["\n padding: 0 ", " ", ";\n "])), core.space[3], core.space[3]);
62
62
  });
63
63
  var RootView = styled_native_1.default.View(function (_a) {
64
- var colors = _a.theme.colors;
65
- return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n overflow: hidden;\n "], ["\n background-color: ", ";\n overflow: hidden;\n "])), colors.primary);
64
+ var semantic = _a.theme.semantic;
65
+ return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n overflow: hidden;\n "], ["\n background-color: ", ";\n overflow: hidden;\n "])), semantic.message.branded);
66
66
  });
67
67
  var StyledView = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
68
- var space = _a.theme.space, marginTop = _a.marginTop;
69
- return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: ", ";\n padding-bottom: ", ";\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n margin-top: ", ";\n "], ["\n padding: ", ";\n padding-bottom: ", ";\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n margin-top: ", ";\n "])), space[3], space[2], marginTop !== null && marginTop !== void 0 ? marginTop : 0);
68
+ var core = _a.theme.core, marginTop = _a.marginTop;
69
+ return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: ", ";\n padding-bottom: ", ";\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n margin-top: ", ";\n "], ["\n padding: ", ";\n padding-bottom: ", ";\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n margin-top: ", ";\n "])), core.space[3], core.space[2], marginTop !== null && marginTop !== void 0 ? marginTop : 0);
70
70
  });
71
71
  var StyledHeading4 = (0, styled_native_1.default)(Heading_1.Heading4)(function (_a) {
72
- var _b = _a.theme, fonts = _b.fonts, colors = _b.colors, textAlign = _a.textAlign;
73
- return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-family: ", ";\n margin-top: 0;\n margin-bottom: 0;\n color: ", ";\n text-align: ", ";\n "], ["\n font-family: ", ";\n margin-top: 0;\n margin-bottom: 0;\n color: ", ";\n text-align: ", ";\n "])), fonts.bold, colors.primaryContrast, textAlign);
72
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, textAlign = _a.textAlign;
73
+ return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-family: ", ";\n margin-top: 0;\n margin-bottom: 0;\n color: ", ";\n text-align: ", ";\n "], ["\n font-family: ", ";\n margin-top: 0;\n margin-bottom: 0;\n color: ", ";\n text-align: ", ";\n "])), core.fontFamily.bodyBold.native, semantic.inverted.message.base, textAlign);
74
74
  });
75
75
  var StyledHeading3 = (0, styled_native_1.default)(Heading_1.Heading3)(function (_a) {
76
- var colors = _a.theme.colors;
77
- return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: 0;\n margin-bottom: 0;\n padding-top: 0;\n color: ", ";\n text-align: left;\n "], ["\n margin-top: 0;\n margin-bottom: 0;\n padding-top: 0;\n color: ", ";\n text-align: left;\n "])), colors.primaryContrast);
76
+ var semantic = _a.theme.semantic;
77
+ return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: 0;\n margin-bottom: 0;\n padding-top: 0;\n color: ", ";\n text-align: left;\n "], ["\n margin-top: 0;\n margin-bottom: 0;\n padding-top: 0;\n color: ", ";\n text-align: left;\n "])), semantic.inverted.message.base);
78
78
  });
79
79
  var NavHeader = function (_a) {
80
80
  var options = _a.options, headline = _a.headline;
package/dist/components/SkeletonLoading/SkeletonCTA.js CHANGED
@@ -32,8 +32,8 @@ var Text_1 = require("../Text");
32
32
  var Skeleton_1 = require("./Skeleton");
33
33
  var SkeletonAnimation_1 = require("./SkeletonAnimation");
34
34
  var StyledSkeletonCTA = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
35
- var _b = _a.theme, colors = _b.colors, space = _b.space, size = _a.size;
36
- return "\n background-color: ".concat(colors.borderMuted, ";\n width: ").concat(size, ";\n height: ").concat(space[12], ";\n ");
35
+ var core = _a.theme.core, size = _a.size;
36
+ return "\n background-color: ".concat(core.color.neutral.light, ";\n width: ").concat(size, ";\n height: ").concat(core.space[12], ";\n ");
37
37
  });
38
38
  var SkeletonCTA = function (_a) {
39
39
  var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);
package/dist/components/SkeletonLoading/SkeletonCircle.js CHANGED
@@ -36,8 +36,8 @@ var StyledSkeletonCircleWrapper = (0, styled_native_1.default)(Skeleton_1.Skelet
36
36
  return "width: ".concat(size, "; max-width: 100%;");
37
37
  });
38
38
  var StyledSkeletonCircle = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
39
- var colors = _a.theme.colors, size = _a.size;
40
- return "\n background-color: ".concat(colors.borderMuted, ";\n height: 0;\n padding-bottom: 100%;\n border-radius: ").concat((0, utils_1.pxToNumber)(size) / 2, "px;\n ");
39
+ var core = _a.theme.core, size = _a.size;
40
+ return "\n background-color: ".concat(core.color.neutral.light, ";\n height: 0;\n padding-bottom: 100%;\n border-radius: ").concat((0, utils_1.pxToNumber)(size) / 2, "px;\n ");
41
41
  });
42
42
  var SkeletonCircle = function (_a) {
43
43
  var _b = _a.size, size = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["size"]);
package/dist/components/SkeletonLoading/SkeletonHeading.js CHANGED
@@ -32,8 +32,8 @@ var Heading_1 = require("../Heading");
32
32
  var Skeleton_1 = require("./Skeleton");
33
33
  var SkeletonAnimation_1 = require("./SkeletonAnimation");
34
34
  var StyledSkeletonHeading = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
35
- var colors = _a.theme.colors, size = _a.size;
36
- return "\n background-color: ".concat(colors.borderMuted, ";\n width: ").concat(size, ";\n ");
35
+ var core = _a.theme.core, size = _a.size;
36
+ return "\n background-color: ".concat(core.color.neutral.light, ";\n width: ").concat(size, ";\n ");
37
37
  });
38
38
  var SkeletonHeading = function (_a) {
39
39
  var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading_1.Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);
package/dist/components/SkeletonLoading/SkeletonText.js CHANGED
@@ -34,8 +34,8 @@ var Text_1 = require("../Text");
34
34
  var Skeleton_1 = require("./Skeleton");
35
35
  var SkeletonAnimation_1 = require("./SkeletonAnimation");
36
36
  var StyledSkeletonText = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
37
- var _b = _a.theme, colors = _b.colors, space = _b.space, responsiveFontSizes = _b.responsiveFontSizes, short = _a.short, breakpoints = _a.breakpoints;
38
- return "\n background-color: ".concat(colors.borderMuted, ";\n margin-bottom: ").concat(space[2], ";\n ").concat((0, utils_1.responsiveStyle)('height', responsiveFontSizes.body, breakpoints), "\n\n ").concat(short ? 'width: 50%' : '', ";\n ");
37
+ var core = _a.theme.core, short = _a.short, breakpoints = _a.breakpoints;
38
+ return "\n background-color: ".concat(core.color.neutral.light, ";\n margin-bottom: ").concat(core.space[2], ";\n ").concat((0, utils_1.responsiveStyle)('height', core.fontSize.body, breakpoints), "\n\n ").concat(short ? 'width: 50%' : '', ";\n ");
39
39
  });
40
40
  var SkeletonText = function (_a) {
41
41
  var _b = _a.lines, lines = _b === void 0 ? 1 : _b, rest = __rest(_a, ["lines"]);
package/dist/components/Stack/Stack.js CHANGED
@@ -45,7 +45,7 @@ var Stack = function (_a) {
45
45
  };
46
46
  exports.Stack = Stack;
47
47
  var StyledStackItem = styled_native_1.default.View(function (_a) {
48
- var space = _a.theme.space, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
48
+ var space = _a.theme.core.space, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
49
49
  var formatter = function (spaceKey) { return space[spaceKey]; };
50
50
  var breakpoints = { smallAndUp: smallAndUp, mediumAndUp: mediumAndUp, largeAndUp: largeAndUp };
51
51
  return (0, utils_1.responsiveStyle)('margin-top', spaceBetween, breakpoints, formatter);
package/dist/esm/components/Divider/Divider.js CHANGED
@@ -5,8 +5,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  import styled, { css } from '../../styled.native';
7
7
  var StyledDivider = styled.View(function (_a) {
8
- var colors = _a.theme.colors, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c;
9
- 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' ? colors.primaryContrast : '#ECE5DD', width);
8
+ var semantic = _a.theme.semantic, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c;
9
+ 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);
10
10
  });
11
11
  export var Divider = function (_a) {
12
12
  var type = _a.type, width = _a.width;
package/dist/esm/components/ErrorText/ErrorText.js CHANGED
@@ -3,12 +3,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  return cooked;
4
4
  };
5
5
  import styled, { css } from '../../styled.native';
6
- import { calculateLineHeight } from '../../theme';
7
6
  import { styledComponentWithBreakpoints } from '../../utils';
8
7
  var StyledErrorText = styled.Text(function (_a) {
9
- var field = _a.theme.field, smallAndUp = _a.smallAndUp;
10
- var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
11
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-size: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-size: ", ";\n color: ", ";\n "])), field.error.fontFamily, calculateLineHeight(fontSize, field.lineHeight), fontSize, field.error.color);
8
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
9
+ var fontSize = smallAndUp
10
+ ? core.fontSize.body.large
11
+ : core.fontSize.body.small;
12
+ return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-size: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-size: ", ";\n color: ", ";\n "])), core.fontFamily.body.native, smallAndUp
13
+ ? core.lineHeight.body.large
14
+ : core.lineHeight.body.small, fontSize, semantic.error.message);
12
15
  });
13
16
  var ErrorText = styledComponentWithBreakpoints(StyledErrorText);
14
17
  export { ErrorText };
package/dist/esm/components/Grid/Col.js CHANGED
@@ -6,8 +6,9 @@ import styled, { css } from '../../styled.native';
6
6
  import { styledComponentWithBreakpoints } from '../../utils';
7
7
  import { pxToNumber } from '../../utils/utils';
8
8
  var StyledCol = styled.View(function (_a) {
9
- var grid = _a.theme.grid, _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;
10
- var halfGutter = grid.gutter.map(function (g) { return pxToNumber(g) / 2 + 'px'; });
9
+ 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;
10
+ var gutter = [core.space[4], core.space[8]];
11
+ var halfGutter = gutter.map(function (g) { return pxToNumber(g) / 2 + 'px'; });
11
12
  var smallScreen = !smallAndUp;
12
13
  var percentage = (span / 12) * 100;
13
14
  var smallPercentage = small ? (small / 12) * 100 : percentage;
@@ -25,7 +26,7 @@ var StyledCol = styled.View(function (_a) {
25
26
  ? mediumPercentage
26
27
  : smallAndUp
27
28
  ? smallPercentage
28
- : percentage, smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? grid.gutter[0] : grid.gutter[1]);
29
+ : percentage, smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? gutter[0] : gutter[1]);
29
30
  });
30
31
  var Col = styledComponentWithBreakpoints(StyledCol);
31
32
  export { Col };
package/dist/esm/components/Grid/Row.js CHANGED
@@ -29,11 +29,12 @@ import styled, { css } from '../../styled.native';
29
29
  import { styledComponentWithBreakpoints } from '../../utils';
30
30
  import { pxToNumber } from '../../utils/utils';
31
31
  var StyledRow = styled.View(function (_a) {
32
- var grid = _a.theme.grid, isNested = _a.isNested, smallAndUp = _a.smallAndUp;
33
- var halfGutter = grid.gutter.map(function (g) { return pxToNumber(g) / 2 + 'px'; });
32
+ var core = _a.theme.core, isNested = _a.isNested, smallAndUp = _a.smallAndUp;
33
+ var gutter = [core.space[4], core.space[8]];
34
+ var halfGutter = gutter.map(function (g) { return pxToNumber(g) / 2 + 'px'; });
34
35
  var smallScreen = !smallAndUp;
35
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n margin: 0 auto;\n width: ", ";\n max-width: 100%;\n margin-bottom: -", ";\n\n ", "\n "], ["\n padding-left: ", ";\n padding-right: ", ";\n margin: 0 auto;\n width: ", ";\n max-width: 100%;\n margin-bottom: -", ";\n\n ", "\n "])), smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], grid.maxWidth, smallScreen ? grid.gutter[0] : grid.gutter[1], isNested
36
- ? "\n margin-left: -".concat(smallScreen ? grid.gutter[0] : grid.gutter[1], ";\n margin-right: -").concat(smallScreen ? grid.gutter[0] : grid.gutter[1], ";\n width: auto;\n max-width: 200%; /* max width none not supported in RN */\n ")
36
+ 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 "])), smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], core.breakpoint.large, smallScreen ? gutter[0] : gutter[1], isNested
37
+ ? "\n margin-left: -".concat(smallScreen ? gutter[0] : gutter[1], ";\n margin-right: -").concat(smallScreen ? gutter[0] : gutter[1], ";\n width: auto;\n max-width: 200%; /* max width none not supported in RN */\n ")
37
38
  : null);
38
39
  });
39
40
  var WidthRow = styledComponentWithBreakpoints(StyledRow);
package/dist/esm/components/HintText/HintText.js CHANGED
@@ -3,12 +3,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  return cooked;
4
4
  };
5
5
  import styled, { css } from '../../styled.native';
6
- import { calculateLineHeight } from '../../theme';
7
6
  import { styledComponentWithBreakpoints } from '../../utils';
8
7
  var StyledHintText = styled.Text(function (_a) {
9
- var field = _a.theme.field, smallAndUp = _a.smallAndUp;
10
- var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
11
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "])), field.fontFamily, fontSize, calculateLineHeight(fontSize, field.lineHeight), field.hint.color);
8
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
9
+ var fontSize = smallAndUp
10
+ ? core.fontSize.body.large
11
+ : core.fontSize.body.small;
12
+ return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "])), core.fontFamily.body.native, fontSize, smallAndUp
13
+ ? core.lineHeight.body.large
14
+ : core.lineHeight.body.small, semantic.border.functional);
12
15
  });
13
16
  var HintText = styledComponentWithBreakpoints(StyledHintText);
14
17
  export { HintText };
package/dist/esm/components/LabelText/LabelText.js CHANGED
@@ -3,12 +3,13 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  return cooked;
4
4
  };
5
5
  import styled, { css } from '../../styled.native';
6
- import { calculateLineHeight } from '../../theme';
7
6
  import { styledComponentWithBreakpoints } from '../../utils';
8
7
  var StyledLabelText = styled.Text(function (_a) {
9
- var field = _a.theme.field, smallAndUp = _a.smallAndUp;
10
- var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
11
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n "], ["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n "])), field.label.fontFamily, calculateLineHeight(fontSize, field.lineHeight), field.label.color, fontSize);
8
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
9
+ var fontSize = smallAndUp
10
+ ? core.fontSize.body.large
11
+ : core.fontSize.body.small;
12
+ return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n "], ["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n "])), core.fontFamily.bodyBold.native, core.lineHeight.body.small, semantic.message.base, fontSize);
12
13
  });
13
14
  var LabelText = styledComponentWithBreakpoints(StyledLabelText);
14
15
  export { LabelText };
package/dist/esm/components/List/List.js CHANGED
@@ -25,29 +25,29 @@ var __rest = (this && this.__rest) || function (s, e) {
25
25
  return t;
26
26
  };
27
27
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
28
- import { Children, useContext, } from 'react';
28
+ import { Children } from 'react';
29
29
  import { View } from 'react-native';
30
30
  import { useBreakpoint } from '../../hooks';
31
- import styled, { css, ThemeContext } from '../../styled.native';
31
+ import styled, { css } from '../../styled.native';
32
32
  import { pxToNumber, styledComponentWithBreakpoints } from '../../utils';
33
33
  import { Stack } from '../Stack';
34
34
  var UlBullet = styled.View(function (_a) {
35
- var _b = _a.theme, colors = _b.colors, list = _b.list, _c = _a.visible, visible = _c === void 0 ? true : _c, smallAndUp = _a.smallAndUp;
35
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.visible, visible = _c === void 0 ? true : _c, smallAndUp = _a.smallAndUp;
36
36
  var lineHeight = smallAndUp
37
- ? list.listItem.lineHeight[1]
38
- : list.listItem.lineHeight[0];
39
- var topMargin = (pxToNumber(lineHeight) - pxToNumber(list.listItem.bulletWidth)) / 2;
40
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", "px;\n width: ", ";\n height: ", ";\n background-color: ", ";\n "], ["\n margin-right: ", ";\n margin-top: ", "px;\n width: ", ";\n height: ", ";\n background-color: ", ";\n "])), list.listItem.bulletGap, topMargin, list.listItem.bulletWidth, list.listItem.bulletWidth, visible ? colors.body : 'transparent');
37
+ ? core.lineHeight.body.large
38
+ : core.lineHeight.body.small;
39
+ var topMargin = (pxToNumber(lineHeight) - pxToNumber(core.space[2])) / 2;
40
+ return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", "px;\n width: ", ";\n height: ", ";\n background-color: ", ";\n "], ["\n margin-right: ", ";\n margin-top: ", "px;\n width: ", ";\n height: ", ";\n background-color: ", ";\n "])), core.space[2], topMargin, core.space[2], core.space[2], visible ? semantic.message.base : 'transparent');
41
41
  });
42
42
  var StyledBullet = styled.Text(function (_a) {
43
- var _b = _a.theme, text = _b.text, list = _b.list, space = _b.space, smallAndUp = _a.smallAndUp;
43
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
44
44
  var fontSize = smallAndUp
45
- ? list.listItem.fontSize[1]
46
- : list.listItem.fontSize[0];
45
+ ? core.fontSize.body.large
46
+ : core.fontSize.body.small;
47
47
  var lineHeight = smallAndUp
48
- ? list.listItem.lineHeight[1]
49
- : list.listItem.lineHeight[0];
50
- return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n width: ", ";\n text-align: right;\n "], ["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n width: ", ";\n text-align: right;\n "])), text.fontFamily, lineHeight, text.color, fontSize, list.listItem.bulletGap, space[4]);
48
+ ? core.lineHeight.body.large
49
+ : core.lineHeight.body.small;
50
+ return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n width: ", ";\n text-align: right;\n "], ["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n width: ", ";\n text-align: right;\n "])), core.fontFamily.body.native, lineHeight, semantic.message.base, fontSize, core.space[2], core.space[4]);
51
51
  });
52
52
  var StyledUlItem = styled.View(function () { return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-direction: row;\n align-items: flex-start;\n justify-content: center;\n "], ["\n flex-direction: row;\n align-items: flex-start;\n justify-content: center;\n "]))); });
53
53
  var Bullet = styledComponentWithBreakpoints(StyledBullet);
@@ -60,29 +60,27 @@ var ListNumberedItem = function (_a) {
60
60
  return (_jsxs(View, __assign({ style: { flexDirection: 'row' } }, { children: [_jsx(Bullet, { children: prefix }), children] })));
61
61
  };
62
62
  var StyledList = styled.View(function (_a) {
63
- var list = _a.theme.list, smallAndUp = _a.smallAndUp;
64
- return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n "])), smallAndUp ? list.marginTop[1] : list.marginTop[0], smallAndUp ? list.marginBottom[1] : list.marginBottom[0]);
63
+ var core = _a.theme.core, smallAndUp = _a.smallAndUp;
64
+ return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n "])), smallAndUp ? core.space[3] : core.space[2], smallAndUp ? core.space[3] : core.space[2]);
65
65
  });
66
66
  var ListWrapper = styledComponentWithBreakpoints(StyledList);
67
67
  var Ul = function (_a) {
68
68
  var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, rest = __rest(_a, ["children", "showBullets"]);
69
- var list = useContext(ThemeContext).list;
70
- return (_jsx(ListWrapper, __assign({}, rest, { children: _jsx(Stack, __assign({ spaceBetween: list.listItem.marginVertical }, { children: Children.map(children, function (child) { return (_jsx(ListBulletItem, __assign({ showBullets: showBullets }, { children: child }))); }) })) })));
69
+ return (_jsx(ListWrapper, __assign({}, rest, { children: _jsx(Stack, __assign({ spaceBetween: 2 }, { children: Children.map(children, function (child) { return (_jsx(ListBulletItem, __assign({ showBullets: showBullets }, { children: child }))); }) })) })));
71
70
  };
72
71
  var Ol = function (_a) {
73
72
  var children = _a.children, rest = __rest(_a, ["children"]);
74
- var list = useContext(ThemeContext).list;
75
- return (_jsx(ListWrapper, __assign({}, rest, { children: _jsx(Stack, __assign({ spaceBetween: list.listItem.marginVertical }, { children: Children.map(children, function (child, index) { return (_jsx(ListNumberedItem, __assign({ prefix: index + 1 + '.' }, { children: child }))); }) })) })));
73
+ return (_jsx(ListWrapper, __assign({}, rest, { children: _jsx(Stack, __assign({ spaceBetween: 2 }, { children: Children.map(children, function (child, index) { return (_jsx(ListNumberedItem, __assign({ prefix: index + 1 + '.' }, { children: child }))); }) })) })));
76
74
  };
77
75
  var StyledLi = styled.Text(function (_a) {
78
- var _b = _a.theme, text = _b.text, list = _b.list, smallAndUp = _a.smallAndUp;
76
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
79
77
  var fontSize = smallAndUp
80
- ? list.listItem.fontSize[1]
81
- : list.listItem.fontSize[0];
78
+ ? core.fontSize.body.large
79
+ : core.fontSize.body.small;
82
80
  var lineHeight = smallAndUp
83
- ? list.listItem.lineHeight[1]
84
- : list.listItem.lineHeight[0];
85
- return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "], ["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "])), text.fontFamily, lineHeight, text.color, fontSize);
81
+ ? core.lineHeight.body.large
82
+ : core.lineHeight.body.large;
83
+ return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "], ["\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "])), core.fontFamily.body.native, lineHeight, semantic.message.base, fontSize);
86
84
  });
87
85
  var Li = styledComponentWithBreakpoints(StyledLi);
88
86
  /**
@@ -102,14 +100,9 @@ var StyledDtText = styled.Text(function (_a) {
102
100
  });
103
101
  var DtText = styledComponentWithBreakpoints(StyledDtText);
104
102
  var StyledDtItem = styled.View(function (_a) {
105
- var list = _a.theme.list, smallAndUp = _a.smallAndUp;
106
- var marginTop = smallAndUp
107
- ? list.descriptionTerm.marginTop[1]
108
- : list.descriptionTerm.marginTop[0];
109
- var marginBottom = smallAndUp
110
- ? list.descriptionTerm.marginBottom[1]
111
- : list.descriptionTerm.marginBottom[0];
112
- return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n flex-direction: row;\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n flex-direction: row;\n "])), marginTop, marginBottom);
103
+ var core = _a.theme.core, smallAndUp = _a.smallAndUp;
104
+ var marginTop = smallAndUp ? core.space[4] : core.space[3];
105
+ return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n flex-direction: row;\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n flex-direction: row;\n "])), marginTop, core.space[1]);
113
106
  });
114
107
  var DtItem = styledComponentWithBreakpoints(StyledDtItem);
115
108
  /**
package/dist/esm/components/Margin/Margin.js CHANGED
@@ -25,7 +25,7 @@ import { useBreakpoint } from '../../hooks';
25
25
  import styled from '../../styled.native';
26
26
  import { responsiveStyle } from '../../utils';
27
27
  var StyledMargin = styled.View(function (_a) {
28
- var space = _a.theme.space, mTop = _a.mTop, mBottom = _a.mBottom, mLeft = _a.mLeft, mRight = _a.mRight, horizontal = _a.horizontal, vertical = _a.vertical, all = _a.all, breakpoints = _a.breakpoints;
28
+ var space = _a.theme.core.space, mTop = _a.mTop, mBottom = _a.mBottom, mLeft = _a.mLeft, mRight = _a.mRight, horizontal = _a.horizontal, vertical = _a.vertical, all = _a.all, breakpoints = _a.breakpoints;
29
29
  var formatter = function (spaceKey) {
30
30
  return spaceKey === 0 ? '0' : space[spaceKey];
31
31
  };
package/dist/esm/components/NavHeader/NavHeader.js CHANGED
@@ -23,32 +23,32 @@ var BackIcon = function () {
23
23
  return (_jsx(Svg, __assign({ width: "10", height: "16", viewBox: "0 0 10 16" }, { children: _jsx(Path, { d: "M0.579956 8L8.57996 16L9.99996 14.58L3.41996 8L9.99996 1.42L8.57996 0L0.579956 8Z", fill: "white" }) })));
24
24
  };
25
25
  var StyledText = styled.Text(function (_a) {
26
- var _b = _a.theme, colors = _b.colors, fonts = _b.fonts, fontSizes = _b.fontSizes;
27
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n "], ["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n "])), colors.primaryContrast, fontSizes[1], fonts.body);
26
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic;
27
+ return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n "], ["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n "])), semantic.inverted.message.base, core.fontSize.small.small, core.fontFamily.body.native);
28
28
  });
29
29
  var LeftHeaderText = styled(StyledText)(function (_a) {
30
- var space = _a.theme.space;
31
- return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding-left: ", ";\n "], ["\n padding-left: ", ";\n "])), space[2]);
30
+ var core = _a.theme.core;
31
+ return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding-left: ", ";\n "], ["\n padding-left: ", ";\n "])), core.space[2]);
32
32
  });
33
33
  var HeadlineView = styled(Animated.View)(function (_a) {
34
- var space = _a.theme.space;
35
- return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0 ", " ", ";\n "], ["\n padding: 0 ", " ", ";\n "])), space[3], space[3]);
34
+ var core = _a.theme.core;
35
+ return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0 ", " ", ";\n "], ["\n padding: 0 ", " ", ";\n "])), core.space[3], core.space[3]);
36
36
  });
37
37
  var RootView = styled.View(function (_a) {
38
- var colors = _a.theme.colors;
39
- return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n overflow: hidden;\n "], ["\n background-color: ", ";\n overflow: hidden;\n "])), colors.primary);
38
+ var semantic = _a.theme.semantic;
39
+ return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n overflow: hidden;\n "], ["\n background-color: ", ";\n overflow: hidden;\n "])), semantic.message.branded);
40
40
  });
41
41
  var StyledView = styled(Animated.View)(function (_a) {
42
- var space = _a.theme.space, marginTop = _a.marginTop;
43
- return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: ", ";\n padding-bottom: ", ";\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n margin-top: ", ";\n "], ["\n padding: ", ";\n padding-bottom: ", ";\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n margin-top: ", ";\n "])), space[3], space[2], marginTop !== null && marginTop !== void 0 ? marginTop : 0);
42
+ var core = _a.theme.core, marginTop = _a.marginTop;
43
+ return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: ", ";\n padding-bottom: ", ";\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n margin-top: ", ";\n "], ["\n padding: ", ";\n padding-bottom: ", ";\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n margin-top: ", ";\n "])), core.space[3], core.space[2], marginTop !== null && marginTop !== void 0 ? marginTop : 0);
44
44
  });
45
45
  var StyledHeading4 = styled(Heading4)(function (_a) {
46
- var _b = _a.theme, fonts = _b.fonts, colors = _b.colors, textAlign = _a.textAlign;
47
- return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-family: ", ";\n margin-top: 0;\n margin-bottom: 0;\n color: ", ";\n text-align: ", ";\n "], ["\n font-family: ", ";\n margin-top: 0;\n margin-bottom: 0;\n color: ", ";\n text-align: ", ";\n "])), fonts.bold, colors.primaryContrast, textAlign);
46
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, textAlign = _a.textAlign;
47
+ return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-family: ", ";\n margin-top: 0;\n margin-bottom: 0;\n color: ", ";\n text-align: ", ";\n "], ["\n font-family: ", ";\n margin-top: 0;\n margin-bottom: 0;\n color: ", ";\n text-align: ", ";\n "])), core.fontFamily.bodyBold.native, semantic.inverted.message.base, textAlign);
48
48
  });
49
49
  var StyledHeading3 = styled(Heading3)(function (_a) {
50
- var colors = _a.theme.colors;
51
- return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: 0;\n margin-bottom: 0;\n padding-top: 0;\n color: ", ";\n text-align: left;\n "], ["\n margin-top: 0;\n margin-bottom: 0;\n padding-top: 0;\n color: ", ";\n text-align: left;\n "])), colors.primaryContrast);
50
+ var semantic = _a.theme.semantic;
51
+ return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: 0;\n margin-bottom: 0;\n padding-top: 0;\n color: ", ";\n text-align: left;\n "], ["\n margin-top: 0;\n margin-bottom: 0;\n padding-top: 0;\n color: ", ";\n text-align: left;\n "])), semantic.inverted.message.base);
52
52
  });
53
53
  export var NavHeader = function (_a) {
54
54
  var options = _a.options, headline = _a.headline;
package/dist/esm/components/SkeletonLoading/SkeletonCTA.js CHANGED
@@ -26,8 +26,8 @@ import { P } from '../Text';
26
26
  import { Skeleton } from './Skeleton';
27
27
  import { SkeletonAnimation } from './SkeletonAnimation';
28
28
  var StyledSkeletonCTA = styled(Skeleton)(function (_a) {
29
- var _b = _a.theme, colors = _b.colors, space = _b.space, size = _a.size;
30
- return "\n background-color: ".concat(colors.borderMuted, ";\n width: ").concat(size, ";\n height: ").concat(space[12], ";\n ");
29
+ var core = _a.theme.core, size = _a.size;
30
+ return "\n background-color: ".concat(core.color.neutral.light, ";\n width: ").concat(size, ";\n height: ").concat(core.space[12], ";\n ");
31
31
  });
32
32
  export var SkeletonCTA = function (_a) {
33
33
  var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);
package/dist/esm/components/SkeletonLoading/SkeletonCircle.js CHANGED
@@ -30,8 +30,8 @@ var StyledSkeletonCircleWrapper = styled(Skeleton)(function (_a) {
30
30
  return "width: ".concat(size, "; max-width: 100%;");
31
31
  });
32
32
  var StyledSkeletonCircle = styled(Skeleton)(function (_a) {
33
- var colors = _a.theme.colors, size = _a.size;
34
- return "\n background-color: ".concat(colors.borderMuted, ";\n height: 0;\n padding-bottom: 100%;\n border-radius: ").concat(pxToNumber(size) / 2, "px;\n ");
33
+ var core = _a.theme.core, size = _a.size;
34
+ return "\n background-color: ".concat(core.color.neutral.light, ";\n height: 0;\n padding-bottom: 100%;\n border-radius: ").concat(pxToNumber(size) / 2, "px;\n ");
35
35
  });
36
36
  export var SkeletonCircle = function (_a) {
37
37
  var _b = _a.size, size = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["size"]);
package/dist/esm/components/SkeletonLoading/SkeletonHeading.js CHANGED
@@ -26,8 +26,8 @@ import { Heading3 } from '../Heading';
26
26
  import { Skeleton } from './Skeleton';
27
27
  import { SkeletonAnimation } from './SkeletonAnimation';
28
28
  var StyledSkeletonHeading = styled(Skeleton)(function (_a) {
29
- var colors = _a.theme.colors, size = _a.size;
30
- return "\n background-color: ".concat(colors.borderMuted, ";\n width: ").concat(size, ";\n ");
29
+ var core = _a.theme.core, size = _a.size;
30
+ return "\n background-color: ".concat(core.color.neutral.light, ";\n width: ").concat(size, ";\n ");
31
31
  });
32
32
  export var SkeletonHeading = function (_a) {
33
33
  var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);
package/dist/esm/components/SkeletonLoading/SkeletonText.js CHANGED
@@ -28,8 +28,8 @@ import { P } from '../Text';
28
28
  import { Skeleton } from './Skeleton';
29
29
  import { SkeletonAnimation } from './SkeletonAnimation';
30
30
  var StyledSkeletonText = styled(Skeleton)(function (_a) {
31
- var _b = _a.theme, colors = _b.colors, space = _b.space, responsiveFontSizes = _b.responsiveFontSizes, short = _a.short, breakpoints = _a.breakpoints;
32
- return "\n background-color: ".concat(colors.borderMuted, ";\n margin-bottom: ").concat(space[2], ";\n ").concat(responsiveStyle('height', responsiveFontSizes.body, breakpoints), "\n\n ").concat(short ? 'width: 50%' : '', ";\n ");
31
+ var core = _a.theme.core, short = _a.short, breakpoints = _a.breakpoints;
32
+ return "\n background-color: ".concat(core.color.neutral.light, ";\n margin-bottom: ").concat(core.space[2], ";\n ").concat(responsiveStyle('height', core.fontSize.body, breakpoints), "\n\n ").concat(short ? 'width: 50%' : '', ";\n ");
33
33
  });
34
34
  export var SkeletonText = function (_a) {
35
35
  var _b = _a.lines, lines = _b === void 0 ? 1 : _b, rest = __rest(_a, ["lines"]);
package/dist/esm/components/Stack/Stack.js CHANGED
@@ -38,7 +38,7 @@ var Stack = function (_a) {
38
38
  }) })));
39
39
  };
40
40
  var StyledStackItem = styled.View(function (_a) {
41
- var space = _a.theme.space, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
41
+ var space = _a.theme.core.space, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
42
42
  var formatter = function (spaceKey) { return space[spaceKey]; };
43
43
  var breakpoints = { smallAndUp: smallAndUp, mediumAndUp: mediumAndUp, largeAndUp: largeAndUp };
44
44
  return responsiveStyle('margin-top', spaceBetween, breakpoints, formatter);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ovotech/element-native",
3
- "version": "2.2.0-canary-58cee1b-87",
3
+ "version": "2.2.0-canary-252a50d-89",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
13
13
  "url": "@ovotech/element"
14
14
  },
15
15
  "dependencies": {
16
- "@ovotech/element-core": "^1.1.0-canary-58cee1b-87",
16
+ "@ovotech/element-core": "^1.1.0-canary-252a50d-89",
17
17
  "deepmerge": "^4.2.2"
18
18
  },
19
19
  "devDependencies": {