@ovotech/element-native 2.0.1 → 2.0.2

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.
@@ -54,21 +54,27 @@ var react_1 = __importStar(require("react"));
54
54
  var react_native_1 = require("react-native");
55
55
  var hooks_1 = require("../../hooks");
56
56
  var styled_native_1 = __importStar(require("../../styled.native"));
57
- var theme_1 = require("../../theme");
58
57
  var utils_1 = require("../../utils");
59
58
  var Stack_1 = require("../Stack");
60
59
  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;
62
- return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n width: ", ";\n height: ", ";\n background-color: ", ";\n "], ["\n margin-right: ", ";\n width: ", ";\n height: ", ";\n background-color: ", ";\n "])), list.listItem.bulletGap, list.listItem.bulletWidth, list.listItem.bulletWidth, visible ? colors.body : 'transparent');
60
+ var _b = _a.theme, colors = _b.colors, list = _b.list, _c = _a.visible, visible = _c === void 0 ? true : _c, smallAndUp = _a.smallAndUp;
61
+ var lineHeight = smallAndUp
62
+ ? list.listItem.lineHeight[1]
63
+ : list.listItem.lineHeight[0];
64
+ var topMargin = ((0, utils_1.pxToNumber)(lineHeight) - (0, utils_1.pxToNumber)(list.listItem.bulletWidth)) / 2;
65
+ 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
66
  });
64
67
  var StyledBullet = styled_native_1.default.Text(function (_a) {
65
68
  var _b = _a.theme, text = _b.text, list = _b.list, space = _b.space, smallAndUp = _a.smallAndUp;
66
69
  var fontSize = smallAndUp
67
70
  ? list.listItem.fontSize[1]
68
71
  : list.listItem.fontSize[0];
69
- return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n width: ", ";\n text-align: right;\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n width: ", ";\n text-align: right;\n "])), text.fontFamily, (0, theme_1.calculateLineHeight)(fontSize, text.lineHeight), text.fontWeight, text.color, fontSize, list.listItem.bulletGap, space[4]);
72
+ var lineHeight = smallAndUp
73
+ ? list.listItem.lineHeight[1]
74
+ : list.listItem.lineHeight[0];
75
+ return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n width: ", ";\n text-align: right;\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n width: ", ";\n text-align: right;\n "])), text.fontFamily, lineHeight, text.fontWeight, text.color, fontSize, list.listItem.bulletGap, space[4]);
70
76
  });
71
- 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: center;\n justify-content: center;\n "], ["\n flex-direction: row;\n align-items: center;\n justify-content: center;\n "]))); });
77
+ 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: top;\n justify-content: center;\n "], ["\n flex-direction: row;\n align-items: top;\n justify-content: center;\n "]))); });
72
78
  var Bullet = (0, utils_1.styledComponentWithBreakpoints)(StyledBullet);
73
79
  var ListBulletItem = function (_a) {
74
80
  var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b;
@@ -106,18 +112,24 @@ var StyledLi = styled_native_1.default.Text(function (_a) {
106
112
  var fontSize = smallAndUp
107
113
  ? list.listItem.fontSize[1]
108
114
  : list.listItem.fontSize[0];
109
- return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "])), text.fontFamily, (0, theme_1.calculateLineHeight)(fontSize, text.lineHeight), text.fontWeight, text.color, fontSize);
115
+ var lineHeight = smallAndUp
116
+ ? list.listItem.lineHeight[1]
117
+ : list.listItem.lineHeight[0];
118
+ return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "])), text.fontFamily, lineHeight, text.fontWeight, text.color, fontSize);
110
119
  });
111
120
  var Li = (0, utils_1.styledComponentWithBreakpoints)(StyledLi);
112
121
  exports.Li = Li;
113
122
  var Dl = ListWrapper;
114
123
  exports.Dl = Dl;
115
124
  var StyledDtText = styled_native_1.default.Text(function (_a) {
116
- var _b = _a.theme, text = _b.text, list = _b.list, smallAndUp = _a.smallAndUp;
125
+ var list = _a.theme.list, smallAndUp = _a.smallAndUp;
117
126
  var fontSize = smallAndUp
118
127
  ? list.listItem.fontSize[1]
119
128
  : list.listItem.fontSize[0];
120
- return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-family: ", ";\n font-weight: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "], ["\n font-family: ", ";\n font-weight: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "])), list.descriptionTerm.fontFamily, list.descriptionTerm.fontWeight, (0, theme_1.calculateLineHeight)(fontSize, text.lineHeight), list.descriptionTerm.color, fontSize);
129
+ var lineHeight = smallAndUp
130
+ ? list.listItem.lineHeight[1]
131
+ : list.listItem.lineHeight[0];
132
+ return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-family: ", ";\n font-weight: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "], ["\n font-family: ", ";\n font-weight: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "])), list.descriptionTerm.fontFamily, list.descriptionTerm.fontWeight, lineHeight, list.descriptionTerm.color, fontSize);
121
133
  });
122
134
  var DtText = (0, utils_1.styledComponentWithBreakpoints)(StyledDtText);
123
135
  var StyledDtItem = styled_native_1.default.View(function (_a) {
@@ -142,7 +154,10 @@ var StyledDdText = styled_native_1.default.Text(function (_a) {
142
154
  var fontSize = smallAndUp
143
155
  ? list.listItem.fontSize[1]
144
156
  : list.listItem.fontSize[0];
145
- return (0, styled_native_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "])), text.fontFamily, (0, theme_1.calculateLineHeight)(fontSize, text.lineHeight), text.fontWeight, text.color, fontSize);
157
+ var lineHeight = smallAndUp
158
+ ? list.listItem.lineHeight[1]
159
+ : list.listItem.lineHeight[0];
160
+ return (0, styled_native_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "])), text.fontFamily, lineHeight, text.fontWeight, text.color, fontSize);
146
161
  });
147
162
  var Dd = function (_a) {
148
163
  var children = _a.children, rest = __rest(_a, ["children"]);
@@ -84,15 +84,9 @@ var NotificationTitleText = styled_native_1.default.Text(function (_a) {
84
84
  var currentVariant = notification.variants[variant];
85
85
  return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n "], ["\n color: ", ";\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n "])), currentVariant.textColor, fonts.bold, fontWeights.bold, responsiveFontSizes.body[0]);
86
86
  });
87
- var NotificationTitleView = styled_native_1.default.View(function (_a) {
88
- var _b = _a.theme, fonts = _b.fonts, fontWeights = _b.fontWeights, responsiveFontSizes = _b.responsiveFontSizes, notification = _b.notification, variant = _a.variant;
89
- // @ts-ignore
90
- var currentVariant = notification.variants[variant];
91
- return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n "], ["\n color: ", ";\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n "])), currentVariant.textColor, fonts.bold, fontWeights.bold, responsiveFontSizes.body[0]);
92
- });
93
87
  var DismissButton = styled_native_1.default.TouchableOpacity(function (_a) {
94
88
  var notification = _a.theme.notification;
95
- return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 0;\n width: ", ";\n height: ", ";\n align-items: center;\n justify-content: center;\n "], ["\n position: absolute;\n top: 0;\n right: 0;\n width: ", ";\n height: ", ";\n align-items: center;\n justify-content: center;\n "])), notification.dismiss.touchSize, notification.dismiss.touchSize);
89
+ return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 0;\n width: ", ";\n height: ", ";\n align-items: center;\n justify-content: center;\n "], ["\n position: absolute;\n top: 0;\n right: 0;\n width: ", ";\n height: ", ";\n align-items: center;\n justify-content: center;\n "])), notification.dismiss.touchSize, notification.dismiss.touchSize);
96
90
  });
97
91
  exports.Notification = (0, react_1.forwardRef)(function (_a, ref) {
98
92
  var _b = _a.variant, variant = _b === void 0 ? 'info' : _b, children = _a.children, title = _a.title, noMargin = _a.noMargin, dismissable = _a.dismissable, onDismiss = _a.onDismiss, rest = __rest(_a, ["variant", "children", "title", "noMargin", "dismissable", "onDismiss"]);
@@ -102,12 +96,10 @@ exports.Notification = (0, react_1.forwardRef)(function (_a, ref) {
102
96
  if (dismissed || (!title && !children)) {
103
97
  return null;
104
98
  }
105
- var TitleComponent = typeof title === 'string' ? NotificationTitleText : NotificationTitleView;
106
99
  return (react_1.default.createElement(react_native_1.View, __assign({ ref: ref }, rest),
107
100
  react_1.default.createElement(NotificationBox, __assign({ variant: variant, noMargin: noMargin, testID: "nb-notification" }, breakpoints),
108
- title ? (react_1.default.createElement(exports.NotificationTitleBox, __assign({ variant: variant, dismissable: dismissable }, breakpoints),
109
- react_1.default.createElement(TitleComponent, { variant: variant }, title),
110
- ";")) : null,
101
+ !!title ? (react_1.default.createElement(exports.NotificationTitleBox, __assign({ variant: variant, dismissable: dismissable }, breakpoints),
102
+ react_1.default.createElement(react_native_1.View, null, typeof title === 'string' ? (react_1.default.createElement(NotificationTitleText, { variant: variant }, title)) : (title)))) : null,
111
103
  dismissable ? (react_1.default.createElement(DismissButton, { accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
112
104
  setDismissed(true);
113
105
  if (onDismiss) {
@@ -123,4 +115,4 @@ exports.ErrorNotification = (0, react_1.forwardRef)(function (props, ref) { retu
123
115
  exports.SuccessNotification = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(exports.Notification, __assign({ ref: ref, variant: "success" }, props))); });
124
116
  exports.InfoNotification = (0, react_1.forwardRef)(function (props, ref) { return react_1.default.createElement(exports.Notification, __assign({ ref: ref, variant: "info" }, props)); });
125
117
  exports.WarningNotification = (0, react_1.forwardRef)(function (props, ref) { return react_1.default.createElement(exports.Notification, __assign({ ref: ref, variant: "warning" }, props)); });
126
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
118
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
@@ -28,21 +28,27 @@ import React, { Children, useContext, } from 'react';
28
28
  import { View } from 'react-native';
29
29
  import { useBreakpoint } from '../../hooks';
30
30
  import styled, { css, ThemeContext } from '../../styled.native';
31
- import { calculateLineHeight } from '../../theme';
32
- import { styledComponentWithBreakpoints } from '../../utils';
31
+ import { pxToNumber, styledComponentWithBreakpoints } from '../../utils';
33
32
  import { Stack } from '../Stack';
34
33
  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;
36
- return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n width: ", ";\n height: ", ";\n background-color: ", ";\n "], ["\n margin-right: ", ";\n width: ", ";\n height: ", ";\n background-color: ", ";\n "])), list.listItem.bulletGap, list.listItem.bulletWidth, list.listItem.bulletWidth, visible ? colors.body : 'transparent');
34
+ var _b = _a.theme, colors = _b.colors, list = _b.list, _c = _a.visible, visible = _c === void 0 ? true : _c, smallAndUp = _a.smallAndUp;
35
+ var lineHeight = smallAndUp
36
+ ? list.listItem.lineHeight[1]
37
+ : list.listItem.lineHeight[0];
38
+ var topMargin = (pxToNumber(lineHeight) - pxToNumber(list.listItem.bulletWidth)) / 2;
39
+ 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
40
  });
38
41
  var StyledBullet = styled.Text(function (_a) {
39
42
  var _b = _a.theme, text = _b.text, list = _b.list, space = _b.space, smallAndUp = _a.smallAndUp;
40
43
  var fontSize = smallAndUp
41
44
  ? list.listItem.fontSize[1]
42
45
  : list.listItem.fontSize[0];
43
- return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n width: ", ";\n text-align: right;\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n width: ", ";\n text-align: right;\n "])), text.fontFamily, calculateLineHeight(fontSize, text.lineHeight), text.fontWeight, text.color, fontSize, list.listItem.bulletGap, space[4]);
46
+ var lineHeight = smallAndUp
47
+ ? list.listItem.lineHeight[1]
48
+ : list.listItem.lineHeight[0];
49
+ return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n width: ", ";\n text-align: right;\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n width: ", ";\n text-align: right;\n "])), text.fontFamily, lineHeight, text.fontWeight, text.color, fontSize, list.listItem.bulletGap, space[4]);
44
50
  });
45
- var StyledUlItem = styled.View(function () { return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-direction: row;\n align-items: center;\n justify-content: center;\n "], ["\n flex-direction: row;\n align-items: center;\n justify-content: center;\n "]))); });
51
+ var StyledUlItem = styled.View(function () { return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-direction: row;\n align-items: top;\n justify-content: center;\n "], ["\n flex-direction: row;\n align-items: top;\n justify-content: center;\n "]))); });
46
52
  var Bullet = styledComponentWithBreakpoints(StyledBullet);
47
53
  var ListBulletItem = function (_a) {
48
54
  var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b;
@@ -78,16 +84,22 @@ var StyledLi = styled.Text(function (_a) {
78
84
  var fontSize = smallAndUp
79
85
  ? list.listItem.fontSize[1]
80
86
  : list.listItem.fontSize[0];
81
- return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "])), text.fontFamily, calculateLineHeight(fontSize, text.lineHeight), text.fontWeight, text.color, fontSize);
87
+ var lineHeight = smallAndUp
88
+ ? list.listItem.lineHeight[1]
89
+ : list.listItem.lineHeight[0];
90
+ return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "])), text.fontFamily, lineHeight, text.fontWeight, text.color, fontSize);
82
91
  });
83
92
  var Li = styledComponentWithBreakpoints(StyledLi);
84
93
  var Dl = ListWrapper;
85
94
  var StyledDtText = styled.Text(function (_a) {
86
- var _b = _a.theme, text = _b.text, list = _b.list, smallAndUp = _a.smallAndUp;
95
+ var list = _a.theme.list, smallAndUp = _a.smallAndUp;
87
96
  var fontSize = smallAndUp
88
97
  ? list.listItem.fontSize[1]
89
98
  : list.listItem.fontSize[0];
90
- return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-family: ", ";\n font-weight: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "], ["\n font-family: ", ";\n font-weight: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "])), list.descriptionTerm.fontFamily, list.descriptionTerm.fontWeight, calculateLineHeight(fontSize, text.lineHeight), list.descriptionTerm.color, fontSize);
99
+ var lineHeight = smallAndUp
100
+ ? list.listItem.lineHeight[1]
101
+ : list.listItem.lineHeight[0];
102
+ return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-family: ", ";\n font-weight: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "], ["\n font-family: ", ";\n font-weight: ", ";\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "])), list.descriptionTerm.fontFamily, list.descriptionTerm.fontWeight, lineHeight, list.descriptionTerm.color, fontSize);
91
103
  });
92
104
  var DtText = styledComponentWithBreakpoints(StyledDtText);
93
105
  var StyledDtItem = styled.View(function (_a) {
@@ -111,7 +123,10 @@ var StyledDdText = styled.Text(function (_a) {
111
123
  var fontSize = smallAndUp
112
124
  ? list.listItem.fontSize[1]
113
125
  : list.listItem.fontSize[0];
114
- return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "])), text.fontFamily, calculateLineHeight(fontSize, text.lineHeight), text.fontWeight, text.color, fontSize);
126
+ var lineHeight = smallAndUp
127
+ ? list.listItem.lineHeight[1]
128
+ : list.listItem.lineHeight[0];
129
+ return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-weight: ", ";\n color: ", ";\n font-size: ", ";\n flex: 1;\n "])), text.fontFamily, lineHeight, text.fontWeight, text.color, fontSize);
115
130
  });
116
131
  var Dd = function (_a) {
117
132
  var children = _a.children, rest = __rest(_a, ["children"]);
@@ -58,15 +58,9 @@ var NotificationTitleText = styled.Text(function (_a) {
58
58
  var currentVariant = notification.variants[variant];
59
59
  return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n "], ["\n color: ", ";\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n "])), currentVariant.textColor, fonts.bold, fontWeights.bold, responsiveFontSizes.body[0]);
60
60
  });
61
- var NotificationTitleView = styled.View(function (_a) {
62
- var _b = _a.theme, fonts = _b.fonts, fontWeights = _b.fontWeights, responsiveFontSizes = _b.responsiveFontSizes, notification = _b.notification, variant = _a.variant;
63
- // @ts-ignore
64
- var currentVariant = notification.variants[variant];
65
- return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n "], ["\n color: ", ";\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n "])), currentVariant.textColor, fonts.bold, fontWeights.bold, responsiveFontSizes.body[0]);
66
- });
67
61
  var DismissButton = styled.TouchableOpacity(function (_a) {
68
62
  var notification = _a.theme.notification;
69
- return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 0;\n width: ", ";\n height: ", ";\n align-items: center;\n justify-content: center;\n "], ["\n position: absolute;\n top: 0;\n right: 0;\n width: ", ";\n height: ", ";\n align-items: center;\n justify-content: center;\n "])), notification.dismiss.touchSize, notification.dismiss.touchSize);
63
+ return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 0;\n width: ", ";\n height: ", ";\n align-items: center;\n justify-content: center;\n "], ["\n position: absolute;\n top: 0;\n right: 0;\n width: ", ";\n height: ", ";\n align-items: center;\n justify-content: center;\n "])), notification.dismiss.touchSize, notification.dismiss.touchSize);
70
64
  });
71
65
  export var Notification = forwardRef(function (_a, ref) {
72
66
  var _b = _a.variant, variant = _b === void 0 ? 'info' : _b, children = _a.children, title = _a.title, noMargin = _a.noMargin, dismissable = _a.dismissable, onDismiss = _a.onDismiss, rest = __rest(_a, ["variant", "children", "title", "noMargin", "dismissable", "onDismiss"]);
@@ -76,12 +70,10 @@ export var Notification = forwardRef(function (_a, ref) {
76
70
  if (dismissed || (!title && !children)) {
77
71
  return null;
78
72
  }
79
- var TitleComponent = typeof title === 'string' ? NotificationTitleText : NotificationTitleView;
80
73
  return (React.createElement(View, __assign({ ref: ref }, rest),
81
74
  React.createElement(NotificationBox, __assign({ variant: variant, noMargin: noMargin, testID: "nb-notification" }, breakpoints),
82
- title ? (React.createElement(NotificationTitleBox, __assign({ variant: variant, dismissable: dismissable }, breakpoints),
83
- React.createElement(TitleComponent, { variant: variant }, title),
84
- ";")) : null,
75
+ !!title ? (React.createElement(NotificationTitleBox, __assign({ variant: variant, dismissable: dismissable }, breakpoints),
76
+ React.createElement(View, null, typeof title === 'string' ? (React.createElement(NotificationTitleText, { variant: variant }, title)) : (title)))) : null,
85
77
  dismissable ? (React.createElement(DismissButton, { accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
86
78
  setDismissed(true);
87
79
  if (onDismiss) {
@@ -97,4 +89,4 @@ export var ErrorNotification = forwardRef(function (props, ref) { return (React.
97
89
  export var SuccessNotification = forwardRef(function (props, ref) { return (React.createElement(Notification, __assign({ ref: ref, variant: "success" }, props))); });
98
90
  export var InfoNotification = forwardRef(function (props, ref) { return React.createElement(Notification, __assign({ ref: ref, variant: "info" }, props)); });
99
91
  export var WarningNotification = forwardRef(function (props, ref) { return React.createElement(Notification, __assign({ ref: ref, variant: "warning" }, props)); });
100
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
92
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
@@ -359,6 +359,7 @@ export function createTheme(customTheme, additional) {
359
359
  marginLeft: space[6],
360
360
  listItem: {
361
361
  fontSize: responsiveFontSizes.body,
362
+ lineHeight: responsiveLineHeights.body,
362
363
  marginVertical: 2,
363
364
  bulletGap: space[2],
364
365
  bulletWidth: space[2],
@@ -365,6 +365,7 @@ function createTheme(customTheme, additional) {
365
365
  marginLeft: space[6],
366
366
  listItem: {
367
367
  fontSize: responsiveFontSizes.body,
368
+ lineHeight: responsiveLineHeights.body,
368
369
  marginVertical: 2,
369
370
  bulletGap: space[2],
370
371
  bulletWidth: space[2],
@@ -73,6 +73,7 @@ export declare type Theme = {
73
73
  marginLeft: string;
74
74
  listItem: {
75
75
  fontSize: string[];
76
+ lineHeight: string[];
76
77
  marginVertical: keyof Theme['space'];
77
78
  bulletGap: string;
78
79
  bulletWidth: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ovotech/element-native",
3
- "version": "2.0.1",
3
+ "version": "2.0.2",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -1,15 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- import React from 'react';
13
- import { Path, Svg } from 'react-native-svg';
14
- export var HidePassword = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
15
- React.createElement(Path, { d: "M15.8125 1.3125L14.5781 0.078125L10.7093 3.947C9.8406 3.65492 8.93342 3.5 8 3.5C4.89086 3.5 2.07286 5.21886 0 8C0.996343 9.33679 2.16484 10.4282 3.45507 11.2012L0.0937505 14.5625L1.32813 15.7969L5.12836 11.9966C6.04613 12.3251 7.00825 12.5 8 12.5C11.1091 12.5 13.9271 10.7811 16 8C14.9683 6.61581 13.7521 5.49476 12.4072 4.71779L15.8125 1.3125ZM9.3408 5.31545C8.93732 5.11358 8.48195 5 8 5C6.34286 5 5 6.34286 5 8C5 8.48195 5.11358 8.93732 5.31545 9.3408L6.50731 8.14894C6.50247 8.09995 6.5 8.05026 6.5 8C6.5 7.17171 7.17171 6.5 8 6.5C8.05026 6.5 8.09995 6.50247 8.14894 6.50731L9.3408 5.31545ZM9.46198 7.66302L10.6083 6.51665C10.8576 6.9541 11 7.46039 11 8C11 9.65714 9.65714 11 8 11C7.46039 11 6.9541 10.8576 6.51665 10.6083L7.66302 9.46198C7.77134 9.48686 7.88414 9.5 8 9.5C8.82829 9.5 9.5 8.82829 9.5 8C9.5 7.88414 9.48686 7.77134 9.46198 7.66302Z", fill: "currentColor", fillRule: "evenodd" }))); };
@@ -1,15 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- import React from 'react';
13
- import { Path, Svg } from 'react-native-svg';
14
- export var Payment = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
15
- React.createElement(Path, { d: "M2 1H11C12.1 1 13 1.9 13 3V10C13 11.1 12.1 12 11 12H2C0.9 12 0 11.1 0 10V3C0 1.9 0.9 1 2 1ZM11 3H2V4.5H11V3ZM2 6.5V10H11V6.5H2ZM2 15.19H11.25C13.87 15.19 16 13.06 16 10.44V4.5H14V10.44C14 11.96 12.76 13.19 11.25 13.19H2V15.19Z", fill: "currentColor", fillRule: "evenodd" }))); };
@@ -1,15 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- import React from 'react';
13
- import { Path, Svg } from 'react-native-svg';
14
- export var ShowPassword = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
15
- React.createElement(Path, { d: "M8 3.5C4.89086 3.5 2.07286 5.21886 0 8C2.07286 10.7811 4.89086 12.5 8 12.5C11.1091 12.5 13.9271 10.7811 16 8C13.9271 5.21886 11.1091 3.5 8 3.5ZM8 5C9.65714 5 11 6.34286 11 8C11 9.65714 9.65714 11 8 11C6.34286 11 5 9.65714 5 8C5 6.34286 6.34286 5 8 5ZM8 6.5C7.17171 6.5 6.5 7.17171 6.5 8C6.5 8.82829 7.17171 9.5 8 9.5C8.82829 9.5 9.5 8.82829 9.5 8C9.5 7.17171 8.82829 6.5 8 6.5Z", fill: "currentColor" }))); };
@@ -1,15 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- import React from 'react';
13
- import { Path, Svg } from 'react-native-svg';
14
- export var Usage = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
15
- React.createElement(Path, { d: "M2 14V0H0V16H16V14H2ZM5 10H3V13H5V10ZM6.33 3H8.33V13H6.33V3ZM11.67 9H9.67V13H11.67V9ZM13 7H15V13H13V7Z", fill: "currentColor", fillRule: "evenodd" }))); };
@@ -1,2 +0,0 @@
1
- import { SvgProps } from 'react-native-svg';
2
- export declare const HidePassword: (props: SvgProps) => JSX.Element;
@@ -1,22 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __importDefault = (this && this.__importDefault) || function (mod) {
14
- return (mod && mod.__esModule) ? mod : { "default": mod };
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.HidePassword = void 0;
18
- var react_1 = __importDefault(require("react"));
19
- var react_native_svg_1 = require("react-native-svg");
20
- var HidePassword = function (props) { return (react_1.default.createElement(react_native_svg_1.Svg, __assign({ viewBox: "0 0 16 16" }, props),
21
- react_1.default.createElement(react_native_svg_1.Path, { d: "M15.8125 1.3125L14.5781 0.078125L10.7093 3.947C9.8406 3.65492 8.93342 3.5 8 3.5C4.89086 3.5 2.07286 5.21886 0 8C0.996343 9.33679 2.16484 10.4282 3.45507 11.2012L0.0937505 14.5625L1.32813 15.7969L5.12836 11.9966C6.04613 12.3251 7.00825 12.5 8 12.5C11.1091 12.5 13.9271 10.7811 16 8C14.9683 6.61581 13.7521 5.49476 12.4072 4.71779L15.8125 1.3125ZM9.3408 5.31545C8.93732 5.11358 8.48195 5 8 5C6.34286 5 5 6.34286 5 8C5 8.48195 5.11358 8.93732 5.31545 9.3408L6.50731 8.14894C6.50247 8.09995 6.5 8.05026 6.5 8C6.5 7.17171 7.17171 6.5 8 6.5C8.05026 6.5 8.09995 6.50247 8.14894 6.50731L9.3408 5.31545ZM9.46198 7.66302L10.6083 6.51665C10.8576 6.9541 11 7.46039 11 8C11 9.65714 9.65714 11 8 11C7.46039 11 6.9541 10.8576 6.51665 10.6083L7.66302 9.46198C7.77134 9.48686 7.88414 9.5 8 9.5C8.82829 9.5 9.5 8.82829 9.5 8C9.5 7.88414 9.48686 7.77134 9.46198 7.66302Z", fill: "currentColor", fillRule: "evenodd" }))); };
22
- exports.HidePassword = HidePassword;
@@ -1,2 +0,0 @@
1
- import { SvgProps } from 'react-native-svg';
2
- export declare const Payment: (props: SvgProps) => JSX.Element;
@@ -1,22 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __importDefault = (this && this.__importDefault) || function (mod) {
14
- return (mod && mod.__esModule) ? mod : { "default": mod };
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.Payment = void 0;
18
- var react_1 = __importDefault(require("react"));
19
- var react_native_svg_1 = require("react-native-svg");
20
- var Payment = function (props) { return (react_1.default.createElement(react_native_svg_1.Svg, __assign({ viewBox: "0 0 16 16" }, props),
21
- react_1.default.createElement(react_native_svg_1.Path, { d: "M2 1H11C12.1 1 13 1.9 13 3V10C13 11.1 12.1 12 11 12H2C0.9 12 0 11.1 0 10V3C0 1.9 0.9 1 2 1ZM11 3H2V4.5H11V3ZM2 6.5V10H11V6.5H2ZM2 15.19H11.25C13.87 15.19 16 13.06 16 10.44V4.5H14V10.44C14 11.96 12.76 13.19 11.25 13.19H2V15.19Z", fill: "currentColor", fillRule: "evenodd" }))); };
22
- exports.Payment = Payment;
@@ -1,2 +0,0 @@
1
- import { SvgProps } from 'react-native-svg';
2
- export declare const ShowPassword: (props: SvgProps) => JSX.Element;
@@ -1,22 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __importDefault = (this && this.__importDefault) || function (mod) {
14
- return (mod && mod.__esModule) ? mod : { "default": mod };
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.ShowPassword = void 0;
18
- var react_1 = __importDefault(require("react"));
19
- var react_native_svg_1 = require("react-native-svg");
20
- var ShowPassword = function (props) { return (react_1.default.createElement(react_native_svg_1.Svg, __assign({ viewBox: "0 0 16 16" }, props),
21
- react_1.default.createElement(react_native_svg_1.Path, { d: "M8 3.5C4.89086 3.5 2.07286 5.21886 0 8C2.07286 10.7811 4.89086 12.5 8 12.5C11.1091 12.5 13.9271 10.7811 16 8C13.9271 5.21886 11.1091 3.5 8 3.5ZM8 5C9.65714 5 11 6.34286 11 8C11 9.65714 9.65714 11 8 11C6.34286 11 5 9.65714 5 8C5 6.34286 6.34286 5 8 5ZM8 6.5C7.17171 6.5 6.5 7.17171 6.5 8C6.5 8.82829 7.17171 9.5 8 9.5C8.82829 9.5 9.5 8.82829 9.5 8C9.5 7.17171 8.82829 6.5 8 6.5Z", fill: "currentColor" }))); };
22
- exports.ShowPassword = ShowPassword;
@@ -1,2 +0,0 @@
1
- import { SvgProps } from 'react-native-svg';
2
- export declare const Usage: (props: SvgProps) => JSX.Element;
@@ -1,22 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __importDefault = (this && this.__importDefault) || function (mod) {
14
- return (mod && mod.__esModule) ? mod : { "default": mod };
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.Usage = void 0;
18
- var react_1 = __importDefault(require("react"));
19
- var react_native_svg_1 = require("react-native-svg");
20
- var Usage = function (props) { return (react_1.default.createElement(react_native_svg_1.Svg, __assign({ viewBox: "0 0 16 16" }, props),
21
- react_1.default.createElement(react_native_svg_1.Path, { d: "M2 14V0H0V16H16V14H2ZM5 10H3V13H5V10ZM6.33 3H8.33V13H6.33V3ZM11.67 9H9.67V13H11.67V9ZM13 7H15V13H13V7Z", fill: "currentColor", fillRule: "evenodd" }))); };
22
- exports.Usage = Usage;