@ovotech/element-native 2.0.4 → 2.2.0-canary-1cac2ba-73

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 (183) hide show
  1. package/dist/components/Accordion/Accordion.js +23 -22
  2. package/dist/components/Accordion/Icon.js +7 -10
  3. package/dist/components/Accordion/styles.d.ts +688 -46
  4. package/dist/components/Accordion/styles.js +56 -49
  5. package/dist/components/Accordion/types.d.ts +1 -0
  6. package/dist/components/Badge/Badge.d.ts +238 -8
  7. package/dist/components/Badge/Badge.js +35 -14
  8. package/dist/components/CTAButton/CTAButton.d.ts +7 -12
  9. package/dist/components/CTAButton/CTAButton.js +18 -19
  10. package/dist/components/CTALink/CTALink.d.ts +3 -4
  11. package/dist/components/Card/Card.d.ts +228 -5
  12. package/dist/components/Card/Card.js +5 -25
  13. package/dist/components/Checkbox/Checkbox.js +19 -26
  14. package/dist/components/DataTable/DataTable.d.ts +3 -12
  15. package/dist/components/DataTable/DataTable.js +8 -71
  16. package/dist/components/DataTable/TableRow.d.ts +2 -0
  17. package/dist/components/DataTable/TableRow.js +33 -0
  18. package/dist/components/DataTable/index.d.ts +2 -0
  19. package/dist/components/DataTable/index.js +16 -0
  20. package/dist/components/DataTable/styles.d.ts +2517 -0
  21. package/dist/components/DataTable/styles.js +77 -0
  22. package/dist/components/DataTable/types.d.ts +15 -0
  23. package/dist/components/DataTable/types.js +2 -0
  24. package/dist/components/DateField/DateField.js +9 -9
  25. package/dist/components/DescriptionList/DescriptionList.d.ts +10 -0
  26. package/dist/components/DescriptionList/DescriptionList.js +66 -0
  27. package/dist/components/DescriptionList/index.d.ts +1 -0
  28. package/dist/components/DescriptionList/index.js +6 -0
  29. package/dist/components/DescriptionList/styled.d.ts +241 -0
  30. package/dist/components/DescriptionList/styled.js +88 -0
  31. package/dist/components/Disclosure/Disclosure.js +7 -10
  32. package/dist/components/Divider/Divider.d.ts +5 -0
  33. package/dist/components/Divider/Divider.js +45 -0
  34. package/dist/components/Divider/index.d.ts +1 -0
  35. package/dist/components/Divider/index.js +5 -0
  36. package/dist/components/ErrorSummaryNotification/ErrorSummaryNotification.d.ts +1 -1
  37. package/dist/components/ErrorText/ErrorText.d.ts +228 -1
  38. package/dist/components/ErrorText/ErrorText.js +1 -1
  39. package/dist/components/Field/Field.js +3 -3
  40. package/dist/components/Grid/Col.d.ts +229 -2
  41. package/dist/components/Grid/Row.d.ts +228 -1
  42. package/dist/components/Heading/Heading.js +8 -24
  43. package/dist/components/HintText/HintText.d.ts +228 -1
  44. package/dist/components/HintText/HintText.js +1 -1
  45. package/dist/components/Icon/Icon.d.ts +2 -3
  46. package/dist/components/Icon/Icon.js +2 -2
  47. package/dist/components/Input/CurrencyInput.d.ts +2 -1
  48. package/dist/components/Input/EmailInput.d.ts +2 -1
  49. package/dist/components/Input/Input.d.ts +4 -2
  50. package/dist/components/Input/Input.js +16 -18
  51. package/dist/components/Input/NumberInput.d.ts +2 -1
  52. package/dist/components/Input/PasswordInput.d.ts +4 -1
  53. package/dist/components/Input/PasswordInput.js +4 -2
  54. package/dist/components/Input/PasswordInput.styled.d.ts +231 -0
  55. package/dist/components/Input/PasswordInput.styled.js +37 -0
  56. package/dist/components/Input/PasswordVisibilityToggle.d.ts +11 -0
  57. package/dist/components/Input/PasswordVisibilityToggle.js +51 -0
  58. package/dist/components/Input/{TelInput.d.ts → PhoneInput.d.ts} +3 -2
  59. package/dist/components/Input/{TelInput.js → PhoneInput.js} +3 -3
  60. package/dist/components/Input/TextInput.d.ts +2 -1
  61. package/dist/components/Input/TextareaInput.d.ts +2 -1
  62. package/dist/components/Input/TextareaInput.js +11 -9
  63. package/dist/components/Input/index.d.ts +1 -1
  64. package/dist/components/Input/index.js +3 -3
  65. package/dist/components/LabelText/LabelText.d.ts +228 -1
  66. package/dist/components/LabelText/LabelText.js +1 -1
  67. package/dist/components/List/List.d.ts +706 -3
  68. package/dist/components/List/List.js +18 -5
  69. package/dist/components/Margin/Margin.d.ts +228 -1
  70. package/dist/components/NavHeader/NavHeader.d.ts +1 -0
  71. package/dist/components/NavHeader/NavHeader.js +11 -13
  72. package/dist/components/Notification/Notification.d.ts +466 -20
  73. package/dist/components/Notification/Notification.js +32 -44
  74. package/dist/components/Radio/Radio.js +18 -36
  75. package/dist/components/SelectField/Select.d.ts +244 -0
  76. package/dist/components/SelectField/Select.js +101 -0
  77. package/dist/components/SelectField/SelectField.d.ts +7 -0
  78. package/dist/components/SelectField/SelectField.js +38 -0
  79. package/dist/components/SelectField/index.d.ts +1 -0
  80. package/dist/components/SelectField/index.js +5 -0
  81. package/dist/components/SkeletonLoading/Skeleton.d.ts +228 -1
  82. package/dist/components/SkeletonLoading/SkeletonAnimation.d.ts +6 -0
  83. package/dist/components/SkeletonLoading/SkeletonAnimation.js +57 -0
  84. package/dist/components/SkeletonLoading/SkeletonCTA.js +3 -1
  85. package/dist/components/SkeletonLoading/SkeletonCircle.js +4 -2
  86. package/dist/components/SkeletonLoading/SkeletonHeading.js +3 -1
  87. package/dist/components/SkeletonLoading/SkeletonText.js +2 -2
  88. package/dist/components/SubLabelText/SubLabelText.d.ts +228 -1
  89. package/dist/components/SubLabelText/SubLabelText.js +1 -1
  90. package/dist/components/SummaryList/SummaryList.d.ts +4 -0
  91. package/dist/components/SummaryList/SummaryList.js +5 -0
  92. package/dist/components/Tabs/Tab.js +22 -19
  93. package/dist/components/Tabs/TabList.d.ts +11 -1
  94. package/dist/components/Tabs/TabList.js +19 -16
  95. package/dist/components/Tabs/TabPanel.js +32 -6
  96. package/dist/components/Tabs/Tabs.d.ts +8 -6
  97. package/dist/components/Tabs/Tabs.js +10 -6
  98. package/dist/components/Text/Text.d.ts +1140 -5
  99. package/dist/components/Text/Text.js +6 -10
  100. package/dist/components/TextField/CurrencyField.d.ts +2 -1
  101. package/dist/components/TextField/EmailField.d.ts +2 -1
  102. package/dist/components/TextField/NumberField.d.ts +2 -1
  103. package/dist/components/TextField/PasswordField.d.ts +4 -1
  104. package/dist/components/TextField/PasswordField.js +2 -2
  105. package/dist/components/TextField/PhoneField.d.ts +10 -0
  106. package/dist/components/TextField/PhoneField.js +56 -0
  107. package/dist/components/TextField/TelField.d.ts +6 -1
  108. package/dist/components/TextField/TelField.js +7 -2
  109. package/dist/components/TextField/TextField.d.ts +2 -1
  110. package/dist/components/TextField/TextareaField.d.ts +2 -1
  111. package/dist/components/TextField/index.d.ts +1 -0
  112. package/dist/components/TextField/index.js +3 -1
  113. package/dist/components/TextLink/TextLink.js +2 -2
  114. package/dist/components/index.d.ts +3 -0
  115. package/dist/components/index.js +3 -0
  116. package/dist/esm/components/Accordion/Accordion.js +26 -25
  117. package/dist/esm/components/Accordion/Icon.js +8 -8
  118. package/dist/esm/components/Accordion/styles.js +29 -48
  119. package/dist/esm/components/Badge/Badge.js +35 -14
  120. package/dist/esm/components/CTAButton/CTAButton.js +20 -21
  121. package/dist/esm/components/Card/Card.js +5 -25
  122. package/dist/esm/components/Checkbox/Checkbox.js +17 -27
  123. package/dist/esm/components/DataTable/DataTable.js +3 -66
  124. package/dist/esm/components/DataTable/TableRow.js +26 -0
  125. package/dist/esm/components/DataTable/index.js +2 -0
  126. package/dist/esm/components/DataTable/styles.js +51 -0
  127. package/dist/esm/components/DataTable/types.js +1 -0
  128. package/dist/esm/components/DateField/DateField.js +9 -9
  129. package/dist/esm/components/DescriptionList/DescriptionList.js +39 -0
  130. package/dist/esm/components/DescriptionList/index.js +1 -0
  131. package/dist/esm/components/DescriptionList/styled.js +57 -0
  132. package/dist/esm/components/Disclosure/Disclosure.js +9 -12
  133. package/dist/esm/components/Divider/Divider.js +15 -0
  134. package/dist/esm/components/Divider/index.js +1 -0
  135. package/dist/esm/components/ErrorText/ErrorText.js +1 -1
  136. package/dist/esm/components/Field/Field.js +3 -3
  137. package/dist/esm/components/Heading/Heading.js +8 -24
  138. package/dist/esm/components/HintText/HintText.js +1 -1
  139. package/dist/esm/components/Icon/Icon.js +2 -2
  140. package/dist/esm/components/Input/Input.js +18 -20
  141. package/dist/esm/components/Input/PasswordInput.js +4 -2
  142. package/dist/esm/components/Input/PasswordInput.styled.js +11 -0
  143. package/dist/esm/components/Input/PasswordVisibilityToggle.js +23 -0
  144. package/dist/esm/components/Input/{TelInput.js → PhoneInput.js} +2 -2
  145. package/dist/esm/components/Input/TextareaInput.js +11 -9
  146. package/dist/esm/components/Input/index.js +1 -1
  147. package/dist/esm/components/LabelText/LabelText.js +1 -1
  148. package/dist/esm/components/List/List.js +17 -5
  149. package/dist/esm/components/NavHeader/NavHeader.js +12 -14
  150. package/dist/esm/components/Notification/Notification.js +34 -46
  151. package/dist/esm/components/Radio/Radio.js +18 -36
  152. package/dist/esm/components/SelectField/Select.js +74 -0
  153. package/dist/esm/components/SelectField/SelectField.js +31 -0
  154. package/dist/esm/components/SelectField/index.js +1 -0
  155. package/dist/esm/components/SkeletonLoading/SkeletonAnimation.js +30 -0
  156. package/dist/esm/components/SkeletonLoading/SkeletonCTA.js +3 -1
  157. package/dist/esm/components/SkeletonLoading/SkeletonCircle.js +4 -2
  158. package/dist/esm/components/SkeletonLoading/SkeletonHeading.js +3 -1
  159. package/dist/esm/components/SkeletonLoading/SkeletonText.js +2 -2
  160. package/dist/esm/components/SubLabelText/SubLabelText.js +1 -1
  161. package/dist/esm/components/SummaryList/SummaryList.js +5 -0
  162. package/dist/esm/components/Tabs/Tab.js +22 -16
  163. package/dist/esm/components/Tabs/TabList.js +18 -16
  164. package/dist/esm/components/Tabs/TabPanel.js +9 -6
  165. package/dist/esm/components/Tabs/Tabs.js +9 -6
  166. package/dist/esm/components/Text/Text.js +6 -10
  167. package/dist/esm/components/TextField/PasswordField.js +2 -2
  168. package/dist/esm/components/TextField/PhoneField.js +30 -0
  169. package/dist/esm/components/TextField/TelField.js +7 -2
  170. package/dist/esm/components/TextField/index.js +1 -0
  171. package/dist/esm/components/TextLink/TextLink.js +2 -2
  172. package/dist/esm/components/index.js +3 -0
  173. package/dist/esm/providers/icons/Logo.js +6 -3
  174. package/dist/esm/theme/create-theme.js +2 -176
  175. package/dist/esm/theme/index.js +13 -2
  176. package/dist/providers/icons/Logo.js +5 -2
  177. package/dist/styled.native.d.ts +1363 -1
  178. package/dist/theme/create-theme.d.ts +1 -1
  179. package/dist/theme/create-theme.js +2 -176
  180. package/dist/theme/index.d.ts +228 -2
  181. package/dist/theme/index.js +13 -2
  182. package/dist/theme/theme.d.ts +1 -110
  183. package/package.json +12 -10
@@ -49,7 +49,7 @@ var __rest = (this && this.__rest) || function (s, e) {
49
49
  return t;
50
50
  };
51
51
  Object.defineProperty(exports, "__esModule", { value: true });
52
- exports.Dd = exports.Dt = exports.Dl = exports.Li = exports.Ol = exports.Ul = void 0;
52
+ exports.ListWrapper = exports.Dd = exports.Dt = exports.Dl = exports.Li = exports.Ol = exports.Ul = void 0;
53
53
  var react_1 = __importStar(require("react"));
54
54
  var react_native_1 = require("react-native");
55
55
  var hooks_1 = require("../../hooks");
@@ -72,7 +72,7 @@ var StyledBullet = styled_native_1.default.Text(function (_a) {
72
72
  var lineHeight = smallAndUp
73
73
  ? list.listItem.lineHeight[1]
74
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]);
75
+ 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]);
76
76
  });
77
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: flex-start;\n justify-content: center;\n "], ["\n flex-direction: row;\n align-items: flex-start;\n justify-content: center;\n "]))); });
78
78
  var Bullet = (0, utils_1.styledComponentWithBreakpoints)(StyledBullet);
@@ -93,6 +93,7 @@ var StyledList = styled_native_1.default.View(function (_a) {
93
93
  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]);
94
94
  });
95
95
  var ListWrapper = (0, utils_1.styledComponentWithBreakpoints)(StyledList);
96
+ exports.ListWrapper = ListWrapper;
96
97
  var Ul = function (_a) {
97
98
  var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, rest = __rest(_a, ["children", "showBullets"]);
98
99
  var list = (0, react_1.useContext)(styled_native_1.ThemeContext).list;
@@ -115,10 +116,14 @@ var StyledLi = styled_native_1.default.Text(function (_a) {
115
116
  var lineHeight = smallAndUp
116
117
  ? list.listItem.lineHeight[1]
117
118
  : 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);
119
+ 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);
119
120
  });
120
121
  var Li = (0, utils_1.styledComponentWithBreakpoints)(StyledLi);
121
122
  exports.Li = Li;
123
+ /**
124
+ * @deprecated This component has been deprecated and will be removed in a future release.
125
+ * Please use the DescriptionList component instead.
126
+ * */
122
127
  var Dl = ListWrapper;
123
128
  exports.Dl = Dl;
124
129
  var StyledDtText = styled_native_1.default.Text(function (_a) {
@@ -129,7 +134,7 @@ var StyledDtText = styled_native_1.default.Text(function (_a) {
129
134
  var lineHeight = smallAndUp
130
135
  ? list.listItem.lineHeight[1]
131
136
  : 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);
137
+ return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __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 "])), list.descriptionTerm.fontFamily, lineHeight, list.descriptionTerm.color, fontSize);
133
138
  });
134
139
  var DtText = (0, utils_1.styledComponentWithBreakpoints)(StyledDtText);
135
140
  var StyledDtItem = styled_native_1.default.View(function (_a) {
@@ -143,6 +148,10 @@ var StyledDtItem = styled_native_1.default.View(function (_a) {
143
148
  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);
144
149
  });
145
150
  var DtItem = (0, utils_1.styledComponentWithBreakpoints)(StyledDtItem);
151
+ /**
152
+ * @deprecated This component has been deprecated and will be removed in a future release.
153
+ * Please use the DescriptionList component instead.
154
+ * */
146
155
  var Dt = function (_a) {
147
156
  var children = _a.children, rest = __rest(_a, ["children"]);
148
157
  return (react_1.default.createElement(DtItem, __assign({}, rest),
@@ -157,8 +166,12 @@ var StyledDdText = styled_native_1.default.Text(function (_a) {
157
166
  var lineHeight = smallAndUp
158
167
  ? list.listItem.lineHeight[1]
159
168
  : 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);
169
+ return (0, styled_native_1.css)(templateObject_8 || (templateObject_8 = __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);
161
170
  });
171
+ /**
172
+ * @deprecated This component has been deprecated and will be removed in a future release.
173
+ * Please use the DescriptionList component instead.
174
+ * */
162
175
  var Dd = function (_a) {
163
176
  var children = _a.children, rest = __rest(_a, ["children"]);
164
177
  var breakpoints = (0, hooks_1.useBreakpoint)();
@@ -12,7 +12,234 @@ declare type MProps = {
12
12
  all?: SpaceKey | SpaceKey[];
13
13
  breakpoints: Breakpoints;
14
14
  };
15
- declare const StyledMargin: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme, MProps, never>;
15
+ declare const StyledMargin: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
16
+ core: {
17
+ radius: Record<"small" | "medium" | "large" | "max", string>;
18
+ borderWidth: Record<"small" | "medium" | "large", string>;
19
+ breakpoint: Record<"small" | "medium" | "large", string | number>;
20
+ mediaQuery: Record<"small" | "medium" | "large", string>;
21
+ space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
22
+ transition: Record<"medium" | "slow" | "fast", string>;
23
+ opacity: Record<"solid" | "transparent" | "translucent", string | number>;
24
+ color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
25
+ lightest: string;
26
+ lighter: string;
27
+ light: string;
28
+ base: string;
29
+ dark: string;
30
+ darker: string;
31
+ darkest: string;
32
+ }> & {
33
+ brand: Record<string, string>;
34
+ };
35
+ fontFamily: Record<"heading" | "body" | "mono" | "bodyBold", {
36
+ native: string;
37
+ web: string;
38
+ }>;
39
+ fontWeight: Record<"bold" | "book" | "black", string | number>;
40
+ fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
41
+ small: string | number;
42
+ large: string | number;
43
+ }>;
44
+ lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
45
+ small: string | number;
46
+ large: string | number;
47
+ }>;
48
+ letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
49
+ };
50
+ semantic: {
51
+ surface: Record<"base" | "cutout" | "elevated", string>;
52
+ message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
53
+ border: Record<"graphic" | "differentiated" | "functional", string>;
54
+ focus: Record<"surface" | "outline" | "hover", string>;
55
+ inverted: Record<"border" | "surface", string> & {
56
+ message: Record<"base" | "link" | "secondary" | "branded", string>;
57
+ };
58
+ success: {
59
+ border: string;
60
+ surface: string;
61
+ surfaceEmphasis: string;
62
+ message: string;
63
+ messageOnEmphasis: string;
64
+ };
65
+ warning: {
66
+ border: string;
67
+ surface: string;
68
+ surfaceEmphasis: string;
69
+ message: string;
70
+ messageOnEmphasis: string;
71
+ };
72
+ error: {
73
+ border: string;
74
+ surface: string;
75
+ surfaceEmphasis: string;
76
+ message: string;
77
+ messageOnEmphasis: string;
78
+ };
79
+ info: {
80
+ border: string;
81
+ surface: string;
82
+ surfaceEmphasis: string;
83
+ message: string;
84
+ messageOnEmphasis: string;
85
+ };
86
+ data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
87
+ };
88
+ component: {
89
+ heading1: {
90
+ fontFamily: string;
91
+ fontWeight: string | number;
92
+ fontSize: {
93
+ small: string | number;
94
+ large: string | number;
95
+ };
96
+ lineHeight: {
97
+ small: string | number;
98
+ large: string | number;
99
+ };
100
+ };
101
+ heading2: {
102
+ fontFamily: string;
103
+ fontWeight: string | number;
104
+ fontSize: {
105
+ small: string | number;
106
+ large: string | number;
107
+ };
108
+ lineHeight: {
109
+ small: string | number;
110
+ large: string | number;
111
+ };
112
+ };
113
+ heading3: {
114
+ fontFamily: string;
115
+ fontWeight: string | number;
116
+ fontSize: {
117
+ small: string | number;
118
+ large: string | number;
119
+ };
120
+ lineHeight: {
121
+ small: string | number;
122
+ large: string | number;
123
+ };
124
+ };
125
+ heading4: {
126
+ fontFamily: string;
127
+ fontWeight: string | number;
128
+ fontSize: {
129
+ small: string | number;
130
+ large: string | number;
131
+ };
132
+ lineHeight: {
133
+ small: string | number;
134
+ large: string | number;
135
+ };
136
+ };
137
+ lead: {
138
+ fontFamily: string;
139
+ fontWeight: string | number;
140
+ fontSize: {
141
+ small: string | number;
142
+ large: string | number;
143
+ };
144
+ lineHeight: {
145
+ small: string | number;
146
+ large: string | number;
147
+ };
148
+ };
149
+ body: {
150
+ fontFamily: string;
151
+ fontWeight: string | number;
152
+ fontSize: {
153
+ small: string | number;
154
+ large: string | number;
155
+ };
156
+ lineHeight: {
157
+ small: string | number;
158
+ large: string | number;
159
+ };
160
+ };
161
+ small: {
162
+ fontFamily: string;
163
+ fontWeight: string | number;
164
+ fontSize: {
165
+ small: string | number;
166
+ large: string | number;
167
+ };
168
+ lineHeight: {
169
+ small: string | number;
170
+ large: string | number;
171
+ };
172
+ };
173
+ label: {
174
+ fontFamily: string;
175
+ fontWeight: string | number;
176
+ fontSize: {
177
+ small: string | number;
178
+ large: string | number;
179
+ };
180
+ lineHeight: {
181
+ small: string | number;
182
+ large: string | number;
183
+ };
184
+ };
185
+ cta: {
186
+ primary: {
187
+ message: string;
188
+ surface: string;
189
+ messageHover: string;
190
+ surfaceHover: string;
191
+ messageFocused: string;
192
+ surfaceFocused: string;
193
+ outlineFocused: string;
194
+ backgroundFocused: string;
195
+ };
196
+ secondary: {
197
+ message: string;
198
+ surface: string;
199
+ messageHover: string;
200
+ surfaceHover: string;
201
+ messageFocused: string;
202
+ surfaceFocused: string;
203
+ outlineFocused: string;
204
+ backgroundFocused: string;
205
+ };
206
+ destructive: {
207
+ message: string;
208
+ surface: string;
209
+ messageHover: string;
210
+ surfaceHover: string;
211
+ messageFocused: string;
212
+ surfaceFocused: string;
213
+ outlineFocused: string;
214
+ backgroundFocused: string;
215
+ };
216
+ };
217
+ badge: {
218
+ variants: {
219
+ red: {
220
+ foreground: string;
221
+ background: string;
222
+ };
223
+ orange: {
224
+ foreground: string;
225
+ background: string;
226
+ };
227
+ yellow: {
228
+ foreground: string;
229
+ background: string;
230
+ };
231
+ green: {
232
+ foreground: string;
233
+ background: string;
234
+ };
235
+ blue: {
236
+ foreground: string;
237
+ background: string;
238
+ };
239
+ };
240
+ };
241
+ };
242
+ }, MProps, never>;
16
243
  declare type Props = Omit<ComponentProps<typeof StyledMargin>, 'mTop' | 'mBottom' | 'mLeft' | 'mRight' | 'breakpoints'> & {
17
244
  top?: SpaceKey | SpaceKey[];
18
245
  bottom?: SpaceKey | SpaceKey[];
@@ -8,6 +8,7 @@ declare type NavHeaderOptions = {
8
8
  statusBarHeight?: number;
9
9
  header?(): React.ReactNode;
10
10
  headerLeft?(): React.ReactNode;
11
+ headerRight?(): React.ReactNode;
11
12
  canGoBack(): boolean;
12
13
  goBack(): void;
13
14
  };
@@ -42,37 +42,36 @@ var BackIcon = function () {
42
42
  react_1.default.createElement(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" })));
43
43
  };
44
44
  var StyledText = styled_native_1.default.Text(function (_a) {
45
- var _b = _a.theme, colors = _b.colors, fonts = _b.fonts, fontWeights = _b.fontWeights, fontSizes = _b.fontSizes;
46
- return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-family: ", ";\n "], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-family: ", ";\n "])), colors.primaryContrast, fontSizes[1], fontWeights.normal, fonts.body);
45
+ var _b = _a.theme, colors = _b.colors, fonts = _b.fonts, fontSizes = _b.fontSizes;
46
+ 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);
47
47
  });
48
48
  var LeftHeaderText = (0, styled_native_1.default)(StyledText)(function (_a) {
49
49
  var space = _a.theme.space;
50
50
  return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding-left: ", ";\n "], ["\n padding-left: ", ";\n "])), space[2]);
51
51
  });
52
- var FeedbackText = (0, styled_native_1.default)(StyledText)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n text-align: right;\n"], ["\n text-align: right;\n"])));
53
52
  var HeadlineView = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
54
53
  var space = _a.theme.space;
55
- return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0 ", " ", ";\n "], ["\n padding: 0 ", " ", ";\n "])), space[3], space[3]);
54
+ return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0 ", " ", ";\n "], ["\n padding: 0 ", " ", ";\n "])), space[3], space[3]);
56
55
  });
57
56
  var RootView = styled_native_1.default.View(function (_a) {
58
57
  var colors = _a.theme.colors;
59
- return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n overflow: hidden;\n "], ["\n background-color: ", ";\n overflow: hidden;\n "])), colors.primary);
58
+ 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);
60
59
  });
61
60
  var StyledView = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
62
61
  var space = _a.theme.space, marginTop = _a.marginTop;
63
- return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __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);
62
+ 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);
64
63
  });
65
64
  var StyledHeading4 = (0, styled_native_1.default)(Heading_1.Heading4)(function (_a) {
66
- var _b = _a.theme, fonts = _b.fonts, fontWeights = _b.fontWeights, colors = _b.colors, textAlign = _a.textAlign;
67
- return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-family: ", ";\n font-weight: ", ";\n margin-top: 0;\n margin-bottom: 0;\n color: ", ";\n text-align: ", ";\n "], ["\n font-family: ", ";\n font-weight: ", ";\n margin-top: 0;\n margin-bottom: 0;\n color: ", ";\n text-align: ", ";\n "])), fonts.bold, fontWeights.bold, colors.primaryContrast, textAlign);
65
+ var _b = _a.theme, fonts = _b.fonts, colors = _b.colors, textAlign = _a.textAlign;
66
+ 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);
68
67
  });
69
68
  var StyledHeading3 = (0, styled_native_1.default)(Heading_1.Heading3)(function (_a) {
70
69
  var colors = _a.theme.colors;
71
- return (0, styled_native_1.css)(templateObject_8 || (templateObject_8 = __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);
70
+ 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);
72
71
  });
73
72
  var NavHeader = function (_a) {
74
73
  var options = _a.options, headline = _a.headline;
75
- return (react_1.default.createElement(RootView, { layout: react_native_reanimated_1.Layout.duration(150) },
74
+ return (react_1.default.createElement(RootView, { layout: react_native_reanimated_1.Layout === null || react_native_reanimated_1.Layout === void 0 ? void 0 : react_native_reanimated_1.Layout.duration(150) },
76
75
  react_1.default.createElement(StyledView, { marginTop: options === null || options === void 0 ? void 0 : options.statusBarHeight },
77
76
  (options === null || options === void 0 ? void 0 : options.headerLeft) ? (options === null || options === void 0 ? void 0 : options.headerLeft()) : (options === null || options === void 0 ? void 0 : options.canGoBack()) ? (react_1.default.createElement(react_native_1.TouchableOpacity, { style: {
78
77
  flexDirection: 'row',
@@ -85,9 +84,8 @@ var NavHeader = function (_a) {
85
84
  react_1.default.createElement(LeftHeaderText, null, "Back"))) : null,
86
85
  react_1.default.createElement(react_native_reanimated_1.default.View, { entering: react_native_reanimated_1.FadeIn, exiting: react_native_reanimated_1.FadeOut, style: { flex: 1, flexGrow: 3, flexShrink: 1 } },
87
86
  react_1.default.createElement(StyledHeading4, { textAlign: (options === null || options === void 0 ? void 0 : options.canGoBack()) ? 'center' : 'left', numberOfLines: 1 }, !headline ? options === null || options === void 0 ? void 0 : options.title : ' ')),
88
- react_1.default.createElement(react_native_1.TouchableOpacity, { style: { flex: 1, flexGrow: 1, flexShrink: 1 } },
89
- react_1.default.createElement(FeedbackText, null, "Feedback"))),
87
+ react_1.default.createElement(react_native_1.View, { style: { flex: 1, flexGrow: 1, flexShrink: 1 } }, options.headerRight ? options.headerRight() : null)),
90
88
  headline ? (react_1.default.createElement(HeadlineView, { entering: react_native_reanimated_1.FadeIn, exiting: react_native_reanimated_1.FadeOut }, (options === null || options === void 0 ? void 0 : options.title) ? (react_1.default.createElement(StyledHeading3, null, options.title)) : null)) : null));
91
89
  };
92
90
  exports.NavHeader = NavHeader;
93
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
91
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;