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

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 (162) hide show
  1. package/dist/components/Accordion/Accordion.js +4 -9
  2. package/dist/components/Accordion/styles.d.ts +1225 -484
  3. package/dist/components/Accordion/styles.js +4 -3
  4. package/dist/components/ActionCard/ActionCard.js +4 -3
  5. package/dist/components/ActionList/ActionList.d.ts +1 -1
  6. package/dist/components/ActionList/ActionList.js +2 -1
  7. package/dist/components/ActionList/styled.d.ts +2502 -1020
  8. package/dist/components/ActionList/styled.js +6 -5
  9. package/dist/components/Badge/Badge.d.ts +408 -161
  10. package/dist/components/Badge/Badge.js +3 -2
  11. package/dist/components/CTAButton/CTAButton.js +7 -6
  12. package/dist/components/Card/Card.d.ts +410 -161
  13. package/dist/components/Card/Card.js +5 -4
  14. package/dist/components/Checkbox/Checkbox.js +4 -3
  15. package/dist/components/DataTable/styles.d.ts +5472 -2261
  16. package/dist/components/DataTable/styles.js +14 -15
  17. package/dist/components/DateField/DateField.js +4 -3
  18. package/dist/components/DescriptionList/styled.d.ts +407 -160
  19. package/dist/components/DescriptionList/styled.js +5 -4
  20. package/dist/components/Disclosure/Disclosure.js +4 -3
  21. package/dist/components/Em/Em.d.ts +407 -160
  22. package/dist/components/ErrorText/ErrorText.d.ts +407 -160
  23. package/dist/components/ErrorText/ErrorText.js +2 -3
  24. package/dist/components/FilterSelect/FilterSelect.js +5 -4
  25. package/dist/components/Grid/Col.d.ts +407 -160
  26. package/dist/components/Grid/Col.js +3 -3
  27. package/dist/components/Grid/Row.d.ts +407 -160
  28. package/dist/components/Grid/Row.js +4 -4
  29. package/dist/components/Heading1/Heading1.d.ts +3 -1
  30. package/dist/components/Heading1/Heading1.js +6 -4
  31. package/dist/components/Heading2/Heading2.d.ts +3 -1
  32. package/dist/components/Heading2/Heading2.js +6 -4
  33. package/dist/components/Heading3/Heading3.d.ts +3 -1
  34. package/dist/components/Heading3/Heading3.js +6 -4
  35. package/dist/components/Heading4/Heading4.d.ts +3 -1
  36. package/dist/components/Heading4/Heading4.js +6 -4
  37. package/dist/components/HintText/HintText.d.ts +407 -160
  38. package/dist/components/HintText/HintText.js +2 -3
  39. package/dist/components/Input/Input.js +7 -4
  40. package/dist/components/Label/Label.d.ts +5 -241
  41. package/dist/components/Label/Label.js +17 -4
  42. package/dist/components/LabelText/LabelText.d.ts +407 -160
  43. package/dist/components/LabelText/LabelText.js +2 -1
  44. package/dist/components/Lead/Lead.d.ts +5 -241
  45. package/dist/components/Lead/Lead.js +19 -4
  46. package/dist/components/LineThrough/LineThrough.d.ts +407 -160
  47. package/dist/components/List/styled.d.ts +1636 -648
  48. package/dist/components/List/styled.js +4 -4
  49. package/dist/components/Margin/Margin.d.ts +408 -162
  50. package/dist/components/Margin/Margin.js +2 -3
  51. package/dist/components/NavHeader/NavHeader.d.ts +10 -2
  52. package/dist/components/NavHeader/NavHeader.js +25 -29
  53. package/dist/components/NavHeader/NavHeader.styles.d.ts +3845 -1387
  54. package/dist/components/NavHeader/NavHeader.styles.js +18 -17
  55. package/dist/components/Notification/Notification.d.ts +816 -322
  56. package/dist/components/Notification/Notification.js +18 -15
  57. package/dist/components/P/P.d.ts +2 -0
  58. package/dist/components/P/P.js +3 -2
  59. package/dist/components/PasswordInput/PasswordInput.styled.d.ts +407 -160
  60. package/dist/components/PasswordInput/PasswordInput.styled.js +2 -1
  61. package/dist/components/{HorizontalCarousel/HorizontalCarousel.d.ts → ProductCarousel/ProductCarousel.d.ts} +2 -2
  62. package/dist/components/ProductCarousel/ProductCarousel.js +128 -0
  63. package/dist/components/ProductCarousel/anchor-point.d.ts +10 -0
  64. package/dist/components/ProductCarousel/anchor-point.js +53 -0
  65. package/dist/components/ProductCarousel/index.d.ts +1 -0
  66. package/dist/components/ProductCarousel/index.js +5 -0
  67. package/dist/components/Radio/Radio.js +5 -4
  68. package/dist/components/RadioCard/RadioCard.d.ts +9 -0
  69. package/dist/components/RadioCard/RadioCard.js +72 -0
  70. package/dist/components/RadioCard/index.d.ts +1 -0
  71. package/dist/components/RadioCard/index.js +5 -0
  72. package/dist/components/SelectField/Select.d.ts +407 -160
  73. package/dist/components/SelectField/Select.js +8 -7
  74. package/dist/components/SkeletonCTA/SkeletonCTA.js +2 -1
  75. package/dist/components/SkeletonCircle/SkeletonCircle.js +2 -2
  76. package/dist/components/SkeletonText/SkeletonText.js +4 -1
  77. package/dist/components/Small/Small.d.ts +407 -160
  78. package/dist/components/Small/Small.js +2 -1
  79. package/dist/components/Stack/Stack.d.ts +1 -2
  80. package/dist/components/Stack/Stack.js +2 -1
  81. package/dist/components/Strong/Strong.d.ts +407 -160
  82. package/dist/components/SubLabelText/SubLabelText.d.ts +407 -160
  83. package/dist/components/SubLabelText/SubLabelText.js +2 -1
  84. package/dist/components/Tabs/Tab.js +8 -7
  85. package/dist/components/Tabs/TabList.js +2 -1
  86. package/dist/components/Tabs/TabPanel.js +2 -1
  87. package/dist/components/Tabs/Tabs.js +2 -1
  88. package/dist/components/TextareaInput/TextareaInput.js +2 -2
  89. package/dist/components/Toast/Toast.js +3 -2
  90. package/dist/components/Toggle/Toggle.js +2 -2
  91. package/dist/components/Toggle/styles.d.ts +1638 -650
  92. package/dist/components/Toggle/styles.js +5 -4
  93. package/dist/components/index.d.ts +2 -0
  94. package/dist/components/index.js +2 -0
  95. package/dist/esm/components/Accordion/Accordion.js +4 -9
  96. package/dist/esm/components/Accordion/styles.js +4 -3
  97. package/dist/esm/components/ActionCard/ActionCard.js +4 -3
  98. package/dist/esm/components/ActionList/ActionList.js +2 -1
  99. package/dist/esm/components/ActionList/styled.js +6 -5
  100. package/dist/esm/components/Badge/Badge.js +3 -2
  101. package/dist/esm/components/CTAButton/CTAButton.js +7 -6
  102. package/dist/esm/components/Card/Card.js +5 -4
  103. package/dist/esm/components/Checkbox/Checkbox.js +4 -3
  104. package/dist/esm/components/DataTable/styles.js +14 -15
  105. package/dist/esm/components/DateField/DateField.js +4 -3
  106. package/dist/esm/components/DescriptionList/styled.js +5 -4
  107. package/dist/esm/components/Disclosure/Disclosure.js +4 -3
  108. package/dist/esm/components/ErrorText/ErrorText.js +2 -3
  109. package/dist/esm/components/FilterSelect/FilterSelect.js +5 -4
  110. package/dist/esm/components/Grid/Col.js +3 -3
  111. package/dist/esm/components/Grid/Row.js +4 -4
  112. package/dist/esm/components/Heading1/Heading1.js +5 -3
  113. package/dist/esm/components/Heading2/Heading2.js +5 -3
  114. package/dist/esm/components/Heading3/Heading3.js +5 -3
  115. package/dist/esm/components/Heading4/Heading4.js +5 -3
  116. package/dist/esm/components/HintText/HintText.js +2 -3
  117. package/dist/esm/components/Input/Input.js +7 -4
  118. package/dist/esm/components/Label/Label.js +17 -4
  119. package/dist/esm/components/LabelText/LabelText.js +2 -1
  120. package/dist/esm/components/Lead/Lead.js +19 -4
  121. package/dist/esm/components/List/styled.js +4 -4
  122. package/dist/esm/components/Margin/Margin.js +2 -3
  123. package/dist/esm/components/NavHeader/NavHeader.js +26 -30
  124. package/dist/esm/components/NavHeader/NavHeader.styles.js +17 -16
  125. package/dist/esm/components/Notification/Notification.js +18 -15
  126. package/dist/esm/components/P/P.js +3 -2
  127. package/dist/esm/components/PasswordInput/PasswordInput.styled.js +2 -1
  128. package/dist/esm/components/ProductCarousel/ProductCarousel.js +98 -0
  129. package/dist/esm/components/ProductCarousel/anchor-point.js +49 -0
  130. package/dist/esm/components/ProductCarousel/index.js +1 -0
  131. package/dist/esm/components/Radio/Radio.js +5 -4
  132. package/dist/esm/components/RadioCard/RadioCard.js +66 -0
  133. package/dist/esm/components/RadioCard/index.js +1 -0
  134. package/dist/esm/components/SelectField/Select.js +8 -7
  135. package/dist/esm/components/SkeletonCTA/SkeletonCTA.js +2 -1
  136. package/dist/esm/components/SkeletonCircle/SkeletonCircle.js +1 -1
  137. package/dist/esm/components/SkeletonText/SkeletonText.js +4 -1
  138. package/dist/esm/components/Small/Small.js +2 -1
  139. package/dist/esm/components/Stack/Stack.js +2 -1
  140. package/dist/esm/components/SubLabelText/SubLabelText.js +2 -1
  141. package/dist/esm/components/Tabs/Tab.js +9 -8
  142. package/dist/esm/components/Tabs/TabList.js +2 -1
  143. package/dist/esm/components/Tabs/TabPanel.js +2 -1
  144. package/dist/esm/components/Tabs/Tabs.js +2 -1
  145. package/dist/esm/components/TextareaInput/TextareaInput.js +2 -2
  146. package/dist/esm/components/Toast/Toast.js +3 -2
  147. package/dist/esm/components/Toggle/Toggle.js +2 -2
  148. package/dist/esm/components/Toggle/styles.js +5 -4
  149. package/dist/esm/components/index.js +2 -0
  150. package/dist/esm/utils/utils.js +1 -7
  151. package/dist/styled.native.d.ts +2523 -1041
  152. package/dist/utils/utils.d.ts +1 -3
  153. package/dist/utils/utils.js +1 -9
  154. package/package.json +5 -4
  155. package/dist/components/HorizontalCarousel/HorizontalCarousel.js +0 -92
  156. package/dist/components/HorizontalCarousel/index.d.ts +0 -1
  157. package/dist/components/HorizontalCarousel/index.js +0 -17
  158. package/dist/esm/components/HorizontalCarousel/HorizontalCarousel.js +0 -62
  159. package/dist/esm/components/HorizontalCarousel/index.js +0 -1
  160. /package/dist/components/{HorizontalCarousel → ProductCarousel}/NavigationDots.d.ts +0 -0
  161. /package/dist/components/{HorizontalCarousel → ProductCarousel}/NavigationDots.js +0 -0
  162. /package/dist/esm/components/{HorizontalCarousel → ProductCarousel}/NavigationDots.js +0 -0
@@ -1,175 +1,833 @@
1
1
  import { ComponentProps, ReactNode } from 'react';
2
2
  import { View } from 'react-native';
3
- export declare type NotificationVariantName = 'error' | 'success' | 'info' | 'warning';
3
+ export declare type NotificationVariantName = 'error' | 'success' | 'info' | 'warning' | 'neutral';
4
4
  declare type NotificationProps = Omit<ComponentProps<typeof Notification>, 'variant'>;
5
5
  export declare const NotificationContentBox: import("styled-components").StyledComponent<typeof import("react-native").View, {
6
6
  core: {
7
- radius: Record<"small" | "medium" | "large" | "max", string>;
8
- borderWidth: Record<"small" | "medium" | "large", string>;
9
- breakpoint: Record<"small" | "medium" | "large", string | number>;
10
- mediaQuery: Record<"small" | "medium" | "large", string>;
11
- space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
12
- transition: Record<"medium" | "slow" | "fast", string>;
13
- opacity: Record<"solid" | "transparent" | "translucent", string | number>;
14
- color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
15
- lightest: string;
16
- lighter: string;
17
- light: string;
18
- base: string;
19
- dark: string;
20
- darker: string;
21
- darkest: string;
22
- }> & {
23
- brand: Record<string, string>;
24
- };
25
- fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
26
- native: string;
27
- web: string;
28
- }>;
29
- fontWeight: Record<"bold" | "book" | "black", string | number>;
30
- fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
31
- small: string | number;
32
- large: string | number;
33
- }>;
34
- lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
35
- small: string | number;
36
- large: string | number;
37
- }>;
38
- letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
7
+ color: {
8
+ brand: {
9
+ midnight: string;
10
+ midnightTint: string;
11
+ forest: string;
12
+ forestTint: string;
13
+ ovo: string;
14
+ ovoTint: string;
15
+ leaf: string;
16
+ leafTint: string;
17
+ energised: string;
18
+ energisedTint: string;
19
+ offwhite: string;
20
+ white: string;
21
+ black: string;
22
+ };
23
+ neutral: {
24
+ darkest: string;
25
+ darker: string;
26
+ dark: string;
27
+ base: string;
28
+ light: string;
29
+ lighter: string;
30
+ lightest: string;
31
+ };
32
+ red: {
33
+ darkest: string;
34
+ darker: string;
35
+ dark: string;
36
+ base: string;
37
+ light: string;
38
+ lighter: string;
39
+ lightest: string;
40
+ };
41
+ orange: {
42
+ darkest: string;
43
+ darker: string;
44
+ dark: string;
45
+ base: string;
46
+ light: string;
47
+ lighter: string;
48
+ lightest: string;
49
+ };
50
+ yellow: {
51
+ darkest: string;
52
+ darker: string;
53
+ dark: string;
54
+ base: string;
55
+ light: string;
56
+ lighter: string;
57
+ lightest: string;
58
+ };
59
+ green: {
60
+ darkest: string;
61
+ darker: string;
62
+ dark: string;
63
+ base: string;
64
+ light: string;
65
+ lighter: string;
66
+ lightest: string;
67
+ };
68
+ blue: {
69
+ darkest: string;
70
+ darker: string;
71
+ dark: string;
72
+ base: string;
73
+ light: string;
74
+ lighter: string;
75
+ lightest: string;
76
+ };
77
+ };
78
+ fontFamily: {
79
+ mono: {
80
+ native: string;
81
+ web: string;
82
+ };
83
+ heading: {
84
+ native: string;
85
+ web: string;
86
+ };
87
+ body: {
88
+ native: string;
89
+ web: string;
90
+ };
91
+ bodyBold: {
92
+ native: string;
93
+ web: string;
94
+ };
95
+ };
96
+ fontWeight: {
97
+ book: number;
98
+ bold: number;
99
+ black: number;
100
+ };
101
+ fontSize: {
102
+ heading1: {
103
+ small: number;
104
+ large: number;
105
+ };
106
+ heading2: {
107
+ small: number;
108
+ large: number;
109
+ };
110
+ heading3: {
111
+ small: number;
112
+ large: number;
113
+ };
114
+ heading4: {
115
+ small: number;
116
+ large: number;
117
+ };
118
+ lead: {
119
+ small: number;
120
+ large: number;
121
+ };
122
+ body: {
123
+ small: number;
124
+ large: number;
125
+ };
126
+ small: {
127
+ small: number;
128
+ large: number;
129
+ };
130
+ label: {
131
+ small: number;
132
+ large: number;
133
+ };
134
+ };
135
+ letterSpacing: {
136
+ base: number;
137
+ compressed: number;
138
+ extraCompressed: number;
139
+ };
140
+ lineHeight: {
141
+ heading1: {
142
+ small: number;
143
+ large: number;
144
+ };
145
+ heading2: {
146
+ small: number;
147
+ large: number;
148
+ };
149
+ heading3: {
150
+ small: number;
151
+ large: number;
152
+ };
153
+ heading4: {
154
+ small: number;
155
+ large: number;
156
+ };
157
+ lead: {
158
+ small: number;
159
+ large: number;
160
+ };
161
+ body: {
162
+ small: number;
163
+ large: number;
164
+ };
165
+ small: {
166
+ small: number;
167
+ large: number;
168
+ };
169
+ label: {
170
+ small: number;
171
+ large: number;
172
+ };
173
+ };
174
+ borderWidth: {
175
+ small: number;
176
+ medium: number;
177
+ large: number;
178
+ };
179
+ breakpoint: {
180
+ small: number;
181
+ medium: number;
182
+ large: number;
183
+ };
184
+ mediaQuery: {
185
+ small: number;
186
+ medium: number;
187
+ large: number;
188
+ };
189
+ customMediaQuery: {
190
+ 'small-and-up': number;
191
+ 'medium-and-up': number;
192
+ 'large-and-up': number;
193
+ };
194
+ opacity: {
195
+ solid: number;
196
+ translucent: number;
197
+ transparent: number;
198
+ };
199
+ radius: {
200
+ small: number;
201
+ medium: number;
202
+ large: number;
203
+ max: number;
204
+ };
205
+ space: {
206
+ '0': number;
207
+ '1': number;
208
+ '2': number;
209
+ '3': number;
210
+ '4': number;
211
+ '5': number;
212
+ '6': number;
213
+ '7': number;
214
+ '8': number;
215
+ '9': number;
216
+ '10': number;
217
+ '11': number;
218
+ '12': number;
219
+ '13': number;
220
+ '14': number;
221
+ '15': number;
222
+ };
223
+ transition: {
224
+ slow: number;
225
+ medium: number;
226
+ fast: number;
227
+ };
39
228
  };
40
229
  semantic: {
41
- surface: Record<"base" | "cutout" | "elevated", string>;
42
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
43
- border: Record<"graphic" | "differentiated" | "functional", string>;
44
- focus: Record<"surface" | "outline" | "hover", string>;
45
- inverted: Record<"surface" | "border", string> & {
46
- message: Record<"base" | "link" | "secondary" | "branded", string>;
230
+ border: {
231
+ graphic: string;
232
+ differentiated: string;
233
+ functional: string;
47
234
  };
48
- success: {
49
- border: string;
235
+ branded: {
236
+ surface: string;
237
+ message: string;
238
+ heading: string;
239
+ };
240
+ neutral: {
50
241
  surface: string;
242
+ message: string;
51
243
  surfaceEmphasis: string;
244
+ messageOnEmphasis: string;
245
+ border: string;
246
+ };
247
+ success: {
248
+ surface: string;
52
249
  message: string;
250
+ surfaceEmphasis: string;
53
251
  messageOnEmphasis: string;
252
+ border: string;
54
253
  };
55
254
  warning: {
56
- border: string;
57
255
  surface: string;
58
- surfaceEmphasis: string;
59
256
  message: string;
257
+ surfaceEmphasis: string;
60
258
  messageOnEmphasis: string;
259
+ border: string;
61
260
  };
62
261
  error: {
63
- border: string;
64
262
  surface: string;
65
- surfaceEmphasis: string;
66
263
  message: string;
264
+ surfaceEmphasis: string;
67
265
  messageOnEmphasis: string;
266
+ border: string;
68
267
  };
69
268
  info: {
70
- border: string;
71
269
  surface: string;
72
- surfaceEmphasis: string;
73
270
  message: string;
271
+ surfaceEmphasis: string;
74
272
  messageOnEmphasis: string;
273
+ border: string;
274
+ };
275
+ data: {
276
+ branded: {
277
+ '1': string;
278
+ '2': string;
279
+ '3': string;
280
+ '4': string;
281
+ };
282
+ electric: {
283
+ '1': string;
284
+ '2': string;
285
+ '3': string;
286
+ '4': string;
287
+ };
288
+ gas: {
289
+ '1': string;
290
+ '2': string;
291
+ '3': string;
292
+ '4': string;
293
+ };
294
+ };
295
+ focus: {
296
+ outline: string;
297
+ hover: string;
298
+ surface: string;
299
+ };
300
+ inverted: {
301
+ surface: string;
302
+ surfaceAlt: string;
303
+ border: string;
304
+ borderAlt: string;
305
+ message: {
306
+ branded: string;
307
+ base: string;
308
+ secondary: string;
309
+ link: string;
310
+ };
311
+ };
312
+ message: {
313
+ base: string;
314
+ secondary: string;
315
+ link: string;
316
+ error: string;
317
+ branded: string;
318
+ };
319
+ surface: {
320
+ base: string;
321
+ cutout: string;
322
+ elevated: string;
75
323
  };
76
- data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
77
324
  };
78
325
  component: {
326
+ badge: {
327
+ variants: {
328
+ neutral: {
329
+ background: string;
330
+ foreground: string;
331
+ };
332
+ red: {
333
+ background: string;
334
+ foreground: string;
335
+ };
336
+ orange: {
337
+ background: string;
338
+ foreground: string;
339
+ };
340
+ yellow: {
341
+ background: string;
342
+ foreground: string;
343
+ };
344
+ green: {
345
+ background: string;
346
+ foreground: string;
347
+ };
348
+ blue: {
349
+ background: string;
350
+ foreground: string;
351
+ };
352
+ };
353
+ };
354
+ cta: {
355
+ primary: {
356
+ message: string;
357
+ surface: string;
358
+ messageHover: string;
359
+ surfaceHover: string;
360
+ messageFocused: string;
361
+ surfaceFocused: string;
362
+ outlineFocused: string;
363
+ backgroundFocused: string;
364
+ };
365
+ secondary: {
366
+ message: string;
367
+ surface: string;
368
+ messageHover: string;
369
+ surfaceHover: string;
370
+ messageFocused: string;
371
+ surfaceFocused: string;
372
+ outlineFocused: string;
373
+ backgroundFocused: string;
374
+ };
375
+ destructive: {
376
+ message: string;
377
+ surface: string;
378
+ messageHover: string;
379
+ surfaceHover: string;
380
+ messageFocused: string;
381
+ surfaceFocused: string;
382
+ outlineFocused: string;
383
+ backgroundFocused: string;
384
+ };
385
+ };
79
386
  heading1: {
80
387
  fontFamily: string;
81
- fontWeight: string | number;
82
- fontSize: {
83
- small: string | number;
84
- large: string | number;
85
- };
388
+ fontWeight: number;
86
389
  lineHeight: {
87
- small: string | number;
88
- large: string | number;
390
+ small: number;
391
+ large: number;
392
+ };
393
+ fontSize: {
394
+ small: number;
395
+ large: number;
89
396
  };
90
397
  };
91
398
  heading2: {
92
399
  fontFamily: string;
93
- fontWeight: string | number;
94
- fontSize: {
95
- small: string | number;
96
- large: string | number;
97
- };
400
+ fontWeight: number;
98
401
  lineHeight: {
99
- small: string | number;
100
- large: string | number;
402
+ small: number;
403
+ large: number;
404
+ };
405
+ fontSize: {
406
+ small: number;
407
+ large: number;
101
408
  };
102
409
  };
103
410
  heading3: {
104
411
  fontFamily: string;
105
- fontWeight: string | number;
106
- fontSize: {
107
- small: string | number;
108
- large: string | number;
109
- };
412
+ fontWeight: number;
110
413
  lineHeight: {
111
- small: string | number;
112
- large: string | number;
414
+ small: number;
415
+ large: number;
416
+ };
417
+ fontSize: {
418
+ small: number;
419
+ large: number;
113
420
  };
114
421
  };
115
422
  heading4: {
116
423
  fontFamily: string;
117
- fontWeight: string | number;
118
- fontSize: {
119
- small: string | number;
120
- large: string | number;
121
- };
424
+ fontWeight: number;
122
425
  lineHeight: {
123
- small: string | number;
124
- large: string | number;
426
+ small: number;
427
+ large: number;
428
+ };
429
+ fontSize: {
430
+ small: number;
431
+ large: number;
125
432
  };
126
433
  };
127
434
  lead: {
128
435
  fontFamily: string;
129
- fontWeight: string | number;
130
- fontSize: {
131
- small: string | number;
132
- large: string | number;
133
- };
436
+ fontWeight: number;
134
437
  lineHeight: {
135
- small: string | number;
136
- large: string | number;
438
+ small: number;
439
+ large: number;
440
+ };
441
+ fontSize: {
442
+ small: number;
443
+ large: number;
137
444
  };
138
445
  };
139
446
  body: {
140
447
  fontFamily: string;
141
- fontWeight: string | number;
142
- fontSize: {
143
- small: string | number;
144
- large: string | number;
145
- };
448
+ fontWeight: number;
146
449
  lineHeight: {
147
- small: string | number;
148
- large: string | number;
450
+ small: number;
451
+ large: number;
452
+ };
453
+ fontSize: {
454
+ small: number;
455
+ large: number;
149
456
  };
150
457
  };
151
458
  small: {
152
459
  fontFamily: string;
153
- fontWeight: string | number;
154
- fontSize: {
155
- small: string | number;
156
- large: string | number;
157
- };
460
+ fontWeight: number;
158
461
  lineHeight: {
159
- small: string | number;
160
- large: string | number;
462
+ small: number;
463
+ large: number;
464
+ };
465
+ fontSize: {
466
+ small: number;
467
+ large: number;
161
468
  };
162
469
  };
163
470
  label: {
164
471
  fontFamily: string;
165
- fontWeight: string | number;
472
+ fontWeight: number;
473
+ lineHeight: {
474
+ small: number;
475
+ large: number;
476
+ };
166
477
  fontSize: {
167
- small: string | number;
168
- large: string | number;
478
+ small: number;
479
+ large: number;
169
480
  };
170
- lineHeight: {
171
- small: string | number;
172
- large: string | number;
481
+ };
482
+ };
483
+ }, {}, never>;
484
+ export declare const NotificationTitleBox: import("styled-components").StyledComponent<typeof import("react-native").View, {
485
+ core: {
486
+ color: {
487
+ brand: {
488
+ midnight: string;
489
+ midnightTint: string;
490
+ forest: string;
491
+ forestTint: string;
492
+ ovo: string;
493
+ ovoTint: string;
494
+ leaf: string;
495
+ leafTint: string;
496
+ energised: string;
497
+ energisedTint: string;
498
+ offwhite: string;
499
+ white: string;
500
+ black: string;
501
+ };
502
+ neutral: {
503
+ darkest: string;
504
+ darker: string;
505
+ dark: string;
506
+ base: string;
507
+ light: string;
508
+ lighter: string;
509
+ lightest: string;
510
+ };
511
+ red: {
512
+ darkest: string;
513
+ darker: string;
514
+ dark: string;
515
+ base: string;
516
+ light: string;
517
+ lighter: string;
518
+ lightest: string;
519
+ };
520
+ orange: {
521
+ darkest: string;
522
+ darker: string;
523
+ dark: string;
524
+ base: string;
525
+ light: string;
526
+ lighter: string;
527
+ lightest: string;
528
+ };
529
+ yellow: {
530
+ darkest: string;
531
+ darker: string;
532
+ dark: string;
533
+ base: string;
534
+ light: string;
535
+ lighter: string;
536
+ lightest: string;
537
+ };
538
+ green: {
539
+ darkest: string;
540
+ darker: string;
541
+ dark: string;
542
+ base: string;
543
+ light: string;
544
+ lighter: string;
545
+ lightest: string;
546
+ };
547
+ blue: {
548
+ darkest: string;
549
+ darker: string;
550
+ dark: string;
551
+ base: string;
552
+ light: string;
553
+ lighter: string;
554
+ lightest: string;
555
+ };
556
+ };
557
+ fontFamily: {
558
+ mono: {
559
+ native: string;
560
+ web: string;
561
+ };
562
+ heading: {
563
+ native: string;
564
+ web: string;
565
+ };
566
+ body: {
567
+ native: string;
568
+ web: string;
569
+ };
570
+ bodyBold: {
571
+ native: string;
572
+ web: string;
573
+ };
574
+ };
575
+ fontWeight: {
576
+ book: number;
577
+ bold: number;
578
+ black: number;
579
+ };
580
+ fontSize: {
581
+ heading1: {
582
+ small: number;
583
+ large: number;
584
+ };
585
+ heading2: {
586
+ small: number;
587
+ large: number;
588
+ };
589
+ heading3: {
590
+ small: number;
591
+ large: number;
592
+ };
593
+ heading4: {
594
+ small: number;
595
+ large: number;
596
+ };
597
+ lead: {
598
+ small: number;
599
+ large: number;
600
+ };
601
+ body: {
602
+ small: number;
603
+ large: number;
604
+ };
605
+ small: {
606
+ small: number;
607
+ large: number;
608
+ };
609
+ label: {
610
+ small: number;
611
+ large: number;
612
+ };
613
+ };
614
+ letterSpacing: {
615
+ base: number;
616
+ compressed: number;
617
+ extraCompressed: number;
618
+ };
619
+ lineHeight: {
620
+ heading1: {
621
+ small: number;
622
+ large: number;
623
+ };
624
+ heading2: {
625
+ small: number;
626
+ large: number;
627
+ };
628
+ heading3: {
629
+ small: number;
630
+ large: number;
631
+ };
632
+ heading4: {
633
+ small: number;
634
+ large: number;
635
+ };
636
+ lead: {
637
+ small: number;
638
+ large: number;
639
+ };
640
+ body: {
641
+ small: number;
642
+ large: number;
643
+ };
644
+ small: {
645
+ small: number;
646
+ large: number;
647
+ };
648
+ label: {
649
+ small: number;
650
+ large: number;
651
+ };
652
+ };
653
+ borderWidth: {
654
+ small: number;
655
+ medium: number;
656
+ large: number;
657
+ };
658
+ breakpoint: {
659
+ small: number;
660
+ medium: number;
661
+ large: number;
662
+ };
663
+ mediaQuery: {
664
+ small: number;
665
+ medium: number;
666
+ large: number;
667
+ };
668
+ customMediaQuery: {
669
+ 'small-and-up': number;
670
+ 'medium-and-up': number;
671
+ 'large-and-up': number;
672
+ };
673
+ opacity: {
674
+ solid: number;
675
+ translucent: number;
676
+ transparent: number;
677
+ };
678
+ radius: {
679
+ small: number;
680
+ medium: number;
681
+ large: number;
682
+ max: number;
683
+ };
684
+ space: {
685
+ '0': number;
686
+ '1': number;
687
+ '2': number;
688
+ '3': number;
689
+ '4': number;
690
+ '5': number;
691
+ '6': number;
692
+ '7': number;
693
+ '8': number;
694
+ '9': number;
695
+ '10': number;
696
+ '11': number;
697
+ '12': number;
698
+ '13': number;
699
+ '14': number;
700
+ '15': number;
701
+ };
702
+ transition: {
703
+ slow: number;
704
+ medium: number;
705
+ fast: number;
706
+ };
707
+ };
708
+ semantic: {
709
+ border: {
710
+ graphic: string;
711
+ differentiated: string;
712
+ functional: string;
713
+ };
714
+ branded: {
715
+ surface: string;
716
+ message: string;
717
+ heading: string;
718
+ };
719
+ neutral: {
720
+ surface: string;
721
+ message: string;
722
+ surfaceEmphasis: string;
723
+ messageOnEmphasis: string;
724
+ border: string;
725
+ };
726
+ success: {
727
+ surface: string;
728
+ message: string;
729
+ surfaceEmphasis: string;
730
+ messageOnEmphasis: string;
731
+ border: string;
732
+ };
733
+ warning: {
734
+ surface: string;
735
+ message: string;
736
+ surfaceEmphasis: string;
737
+ messageOnEmphasis: string;
738
+ border: string;
739
+ };
740
+ error: {
741
+ surface: string;
742
+ message: string;
743
+ surfaceEmphasis: string;
744
+ messageOnEmphasis: string;
745
+ border: string;
746
+ };
747
+ info: {
748
+ surface: string;
749
+ message: string;
750
+ surfaceEmphasis: string;
751
+ messageOnEmphasis: string;
752
+ border: string;
753
+ };
754
+ data: {
755
+ branded: {
756
+ '1': string;
757
+ '2': string;
758
+ '3': string;
759
+ '4': string;
760
+ };
761
+ electric: {
762
+ '1': string;
763
+ '2': string;
764
+ '3': string;
765
+ '4': string;
766
+ };
767
+ gas: {
768
+ '1': string;
769
+ '2': string;
770
+ '3': string;
771
+ '4': string;
772
+ };
773
+ };
774
+ focus: {
775
+ outline: string;
776
+ hover: string;
777
+ surface: string;
778
+ };
779
+ inverted: {
780
+ surface: string;
781
+ surfaceAlt: string;
782
+ border: string;
783
+ borderAlt: string;
784
+ message: {
785
+ branded: string;
786
+ base: string;
787
+ secondary: string;
788
+ link: string;
789
+ };
790
+ };
791
+ message: {
792
+ base: string;
793
+ secondary: string;
794
+ link: string;
795
+ error: string;
796
+ branded: string;
797
+ };
798
+ surface: {
799
+ base: string;
800
+ cutout: string;
801
+ elevated: string;
802
+ };
803
+ };
804
+ component: {
805
+ badge: {
806
+ variants: {
807
+ neutral: {
808
+ background: string;
809
+ foreground: string;
810
+ };
811
+ red: {
812
+ background: string;
813
+ foreground: string;
814
+ };
815
+ orange: {
816
+ background: string;
817
+ foreground: string;
818
+ };
819
+ yellow: {
820
+ background: string;
821
+ foreground: string;
822
+ };
823
+ green: {
824
+ background: string;
825
+ foreground: string;
826
+ };
827
+ blue: {
828
+ background: string;
829
+ foreground: string;
830
+ };
173
831
  };
174
832
  };
175
833
  cta: {
@@ -204,264 +862,100 @@ export declare const NotificationContentBox: import("styled-components").StyledC
204
862
  backgroundFocused: string;
205
863
  };
206
864
  };
207
- badge: {
208
- variants: {
209
- neutral: {
210
- foreground: string;
211
- background: string;
212
- };
213
- red: {
214
- foreground: string;
215
- background: string;
216
- };
217
- orange: {
218
- foreground: string;
219
- background: string;
220
- };
221
- yellow: {
222
- foreground: string;
223
- background: string;
224
- };
225
- green: {
226
- foreground: string;
227
- background: string;
228
- };
229
- blue: {
230
- foreground: string;
231
- background: string;
232
- };
233
- };
234
- };
235
- };
236
- }, {}, never>;
237
- export declare const NotificationTitleBox: import("styled-components").StyledComponent<typeof import("react-native").View, {
238
- core: {
239
- radius: Record<"small" | "medium" | "large" | "max", string>;
240
- borderWidth: Record<"small" | "medium" | "large", string>;
241
- breakpoint: Record<"small" | "medium" | "large", string | number>;
242
- mediaQuery: Record<"small" | "medium" | "large", string>;
243
- space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
244
- transition: Record<"medium" | "slow" | "fast", string>;
245
- opacity: Record<"solid" | "transparent" | "translucent", string | number>;
246
- color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
247
- lightest: string;
248
- lighter: string;
249
- light: string;
250
- base: string;
251
- dark: string;
252
- darker: string;
253
- darkest: string;
254
- }> & {
255
- brand: Record<string, string>;
256
- };
257
- fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
258
- native: string;
259
- web: string;
260
- }>;
261
- fontWeight: Record<"bold" | "book" | "black", string | number>;
262
- fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
263
- small: string | number;
264
- large: string | number;
265
- }>;
266
- lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
267
- small: string | number;
268
- large: string | number;
269
- }>;
270
- letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
271
- };
272
- semantic: {
273
- surface: Record<"base" | "cutout" | "elevated", string>;
274
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
275
- border: Record<"graphic" | "differentiated" | "functional", string>;
276
- focus: Record<"surface" | "outline" | "hover", string>;
277
- inverted: Record<"surface" | "border", string> & {
278
- message: Record<"base" | "link" | "secondary" | "branded", string>;
279
- };
280
- success: {
281
- border: string;
282
- surface: string;
283
- surfaceEmphasis: string;
284
- message: string;
285
- messageOnEmphasis: string;
286
- };
287
- warning: {
288
- border: string;
289
- surface: string;
290
- surfaceEmphasis: string;
291
- message: string;
292
- messageOnEmphasis: string;
293
- };
294
- error: {
295
- border: string;
296
- surface: string;
297
- surfaceEmphasis: string;
298
- message: string;
299
- messageOnEmphasis: string;
300
- };
301
- info: {
302
- border: string;
303
- surface: string;
304
- surfaceEmphasis: string;
305
- message: string;
306
- messageOnEmphasis: string;
307
- };
308
- data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
309
- };
310
- component: {
311
865
  heading1: {
312
866
  fontFamily: string;
313
- fontWeight: string | number;
314
- fontSize: {
315
- small: string | number;
316
- large: string | number;
317
- };
867
+ fontWeight: number;
318
868
  lineHeight: {
319
- small: string | number;
320
- large: string | number;
869
+ small: number;
870
+ large: number;
871
+ };
872
+ fontSize: {
873
+ small: number;
874
+ large: number;
321
875
  };
322
876
  };
323
877
  heading2: {
324
878
  fontFamily: string;
325
- fontWeight: string | number;
326
- fontSize: {
327
- small: string | number;
328
- large: string | number;
329
- };
879
+ fontWeight: number;
330
880
  lineHeight: {
331
- small: string | number;
332
- large: string | number;
881
+ small: number;
882
+ large: number;
883
+ };
884
+ fontSize: {
885
+ small: number;
886
+ large: number;
333
887
  };
334
888
  };
335
889
  heading3: {
336
890
  fontFamily: string;
337
- fontWeight: string | number;
338
- fontSize: {
339
- small: string | number;
340
- large: string | number;
341
- };
891
+ fontWeight: number;
342
892
  lineHeight: {
343
- small: string | number;
344
- large: string | number;
893
+ small: number;
894
+ large: number;
895
+ };
896
+ fontSize: {
897
+ small: number;
898
+ large: number;
345
899
  };
346
900
  };
347
901
  heading4: {
348
902
  fontFamily: string;
349
- fontWeight: string | number;
350
- fontSize: {
351
- small: string | number;
352
- large: string | number;
353
- };
903
+ fontWeight: number;
354
904
  lineHeight: {
355
- small: string | number;
356
- large: string | number;
905
+ small: number;
906
+ large: number;
907
+ };
908
+ fontSize: {
909
+ small: number;
910
+ large: number;
357
911
  };
358
912
  };
359
913
  lead: {
360
914
  fontFamily: string;
361
- fontWeight: string | number;
362
- fontSize: {
363
- small: string | number;
364
- large: string | number;
365
- };
915
+ fontWeight: number;
366
916
  lineHeight: {
367
- small: string | number;
368
- large: string | number;
917
+ small: number;
918
+ large: number;
919
+ };
920
+ fontSize: {
921
+ small: number;
922
+ large: number;
369
923
  };
370
924
  };
371
925
  body: {
372
926
  fontFamily: string;
373
- fontWeight: string | number;
374
- fontSize: {
375
- small: string | number;
376
- large: string | number;
377
- };
927
+ fontWeight: number;
378
928
  lineHeight: {
379
- small: string | number;
380
- large: string | number;
929
+ small: number;
930
+ large: number;
931
+ };
932
+ fontSize: {
933
+ small: number;
934
+ large: number;
381
935
  };
382
936
  };
383
937
  small: {
384
938
  fontFamily: string;
385
- fontWeight: string | number;
386
- fontSize: {
387
- small: string | number;
388
- large: string | number;
389
- };
939
+ fontWeight: number;
390
940
  lineHeight: {
391
- small: string | number;
392
- large: string | number;
941
+ small: number;
942
+ large: number;
943
+ };
944
+ fontSize: {
945
+ small: number;
946
+ large: number;
393
947
  };
394
948
  };
395
949
  label: {
396
950
  fontFamily: string;
397
- fontWeight: string | number;
398
- fontSize: {
399
- small: string | number;
400
- large: string | number;
401
- };
951
+ fontWeight: number;
402
952
  lineHeight: {
403
- small: string | number;
404
- large: string | number;
405
- };
406
- };
407
- cta: {
408
- primary: {
409
- message: string;
410
- surface: string;
411
- messageHover: string;
412
- surfaceHover: string;
413
- messageFocused: string;
414
- surfaceFocused: string;
415
- outlineFocused: string;
416
- backgroundFocused: string;
417
- };
418
- secondary: {
419
- message: string;
420
- surface: string;
421
- messageHover: string;
422
- surfaceHover: string;
423
- messageFocused: string;
424
- surfaceFocused: string;
425
- outlineFocused: string;
426
- backgroundFocused: string;
953
+ small: number;
954
+ large: number;
427
955
  };
428
- destructive: {
429
- message: string;
430
- surface: string;
431
- messageHover: string;
432
- surfaceHover: string;
433
- messageFocused: string;
434
- surfaceFocused: string;
435
- outlineFocused: string;
436
- backgroundFocused: string;
437
- };
438
- };
439
- badge: {
440
- variants: {
441
- neutral: {
442
- foreground: string;
443
- background: string;
444
- };
445
- red: {
446
- foreground: string;
447
- background: string;
448
- };
449
- orange: {
450
- foreground: string;
451
- background: string;
452
- };
453
- yellow: {
454
- foreground: string;
455
- background: string;
456
- };
457
- green: {
458
- foreground: string;
459
- background: string;
460
- };
461
- blue: {
462
- foreground: string;
463
- background: string;
464
- };
956
+ fontSize: {
957
+ small: number;
958
+ large: number;
465
959
  };
466
960
  };
467
961
  };