@ovotech/element-native 3.7.0 → 3.8.0-canary-0411293-201

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 (72) hide show
  1. package/dist/components/Accordion/styles.d.ts +33 -6
  2. package/dist/components/ActionCard/ActionCard.js +1 -1
  3. package/dist/components/ActionList/ActionList.d.ts +1 -1
  4. package/dist/components/ActionList/ActionList.js +2 -1
  5. package/dist/components/ActionList/styled.d.ts +66 -12
  6. package/dist/components/Badge/Badge.d.ts +12 -3
  7. package/dist/components/Card/Card.d.ts +14 -3
  8. package/dist/components/Card/Card.js +2 -4
  9. package/dist/components/DataTable/styles.d.ts +143 -26
  10. package/dist/components/DescriptionList/styled.d.ts +11 -2
  11. package/dist/components/Em/Em.d.ts +11 -2
  12. package/dist/components/ErrorText/ErrorText.d.ts +11 -2
  13. package/dist/components/Grid/Col.d.ts +11 -2
  14. package/dist/components/Grid/Row.d.ts +11 -2
  15. package/dist/components/Heading1/Heading1.d.ts +3 -1
  16. package/dist/components/Heading1/Heading1.js +4 -2
  17. package/dist/components/Heading2/Heading2.d.ts +3 -1
  18. package/dist/components/Heading2/Heading2.js +4 -2
  19. package/dist/components/Heading3/Heading3.d.ts +3 -1
  20. package/dist/components/Heading3/Heading3.js +4 -2
  21. package/dist/components/Heading4/Heading4.d.ts +3 -1
  22. package/dist/components/Heading4/Heading4.js +4 -2
  23. package/dist/components/HintText/HintText.d.ts +11 -2
  24. package/dist/components/HorizontalCarousel/HorizontalCarousel.d.ts +13 -0
  25. package/dist/components/HorizontalCarousel/HorizontalCarousel.js +92 -0
  26. package/dist/components/HorizontalCarousel/NavigationDots.d.ts +5 -0
  27. package/dist/components/HorizontalCarousel/NavigationDots.js +88 -0
  28. package/dist/components/HorizontalCarousel/index.d.ts +1 -0
  29. package/dist/components/HorizontalCarousel/index.js +17 -0
  30. package/dist/components/Label/Label.d.ts +5 -241
  31. package/dist/components/Label/Label.js +16 -4
  32. package/dist/components/LabelText/LabelText.d.ts +11 -2
  33. package/dist/components/Lead/Lead.d.ts +5 -241
  34. package/dist/components/Lead/Lead.js +18 -4
  35. package/dist/components/LineThrough/LineThrough.d.ts +11 -2
  36. package/dist/components/List/styled.d.ts +44 -8
  37. package/dist/components/Margin/Margin.d.ts +11 -2
  38. package/dist/components/NavHeader/NavHeader.styles.d.ts +88 -16
  39. package/dist/components/Notification/Notification.d.ts +23 -5
  40. package/dist/components/Notification/Notification.js +14 -14
  41. package/dist/components/P/P.d.ts +2 -0
  42. package/dist/components/P/P.js +2 -2
  43. package/dist/components/PasswordInput/PasswordInput.styled.d.ts +11 -2
  44. package/dist/components/SelectField/Select.d.ts +11 -2
  45. package/dist/components/Small/Small.d.ts +11 -2
  46. package/dist/components/Strong/Strong.d.ts +11 -2
  47. package/dist/components/SubLabelText/SubLabelText.d.ts +11 -2
  48. package/dist/components/Tabs/Tab.js +6 -6
  49. package/dist/components/Toggle/styles.d.ts +44 -8
  50. package/dist/esm/components/ActionCard/ActionCard.js +1 -1
  51. package/dist/esm/components/ActionList/ActionList.js +2 -1
  52. package/dist/esm/components/Card/Card.js +2 -4
  53. package/dist/esm/components/Heading1/Heading1.js +4 -2
  54. package/dist/esm/components/Heading2/Heading2.js +4 -2
  55. package/dist/esm/components/Heading3/Heading3.js +4 -2
  56. package/dist/esm/components/Heading4/Heading4.js +4 -2
  57. package/dist/esm/components/HorizontalCarousel/HorizontalCarousel.js +62 -0
  58. package/dist/esm/components/HorizontalCarousel/NavigationDots.js +61 -0
  59. package/dist/esm/components/HorizontalCarousel/index.js +1 -0
  60. package/dist/esm/components/Label/Label.js +16 -4
  61. package/dist/esm/components/Lead/Lead.js +18 -4
  62. package/dist/esm/components/Notification/Notification.js +14 -14
  63. package/dist/esm/components/P/P.js +2 -2
  64. package/dist/esm/components/Tabs/Tab.js +7 -7
  65. package/dist/esm/index.js +1 -0
  66. package/dist/esm/theme/index.js +1 -0
  67. package/dist/index.d.ts +1 -0
  68. package/dist/index.js +1 -0
  69. package/dist/styled.native.d.ts +66 -12
  70. package/dist/theme/index.d.ts +1 -0
  71. package/dist/theme/index.js +17 -0
  72. package/package.json +4 -3
package/dist/components/DataTable/styles.d.ts CHANGED
@@ -5,6 +5,7 @@ export declare const StyledTableContainer: import("styled-components").StyledCom
5
5
  borderWidth: Record<"small" | "medium" | "large", string>;
6
6
  breakpoint: Record<"small" | "medium" | "large", string | number>;
7
7
  mediaQuery: Record<"small" | "medium" | "large", string>;
8
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
8
9
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
9
10
  transition: Record<"medium" | "slow" | "fast", string>;
10
11
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -36,12 +37,20 @@ export declare const StyledTableContainer: import("styled-components").StyledCom
36
37
  };
37
38
  semantic: {
38
39
  surface: Record<"base" | "cutout" | "elevated", string>;
39
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
40
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
41
+ branded: Record<"message" | "heading" | "surface", string>;
40
42
  border: Record<"graphic" | "differentiated" | "functional", string>;
41
43
  focus: Record<"surface" | "outline" | "hover", string>;
42
- inverted: Record<"surface" | "border", string> & {
44
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
43
45
  message: Record<"base" | "link" | "secondary" | "branded", string>;
44
46
  };
47
+ neutral: {
48
+ border: string;
49
+ surface: string;
50
+ surfaceEmphasis: string;
51
+ message: string;
52
+ messageOnEmphasis: string;
53
+ };
45
54
  success: {
46
55
  border: string;
47
56
  surface: string;
@@ -237,6 +246,7 @@ export declare const TableHeader: import("styled-components").StyledComponent<ty
237
246
  borderWidth: Record<"small" | "medium" | "large", string>;
238
247
  breakpoint: Record<"small" | "medium" | "large", string | number>;
239
248
  mediaQuery: Record<"small" | "medium" | "large", string>;
249
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
240
250
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
241
251
  transition: Record<"medium" | "slow" | "fast", string>;
242
252
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -268,12 +278,20 @@ export declare const TableHeader: import("styled-components").StyledComponent<ty
268
278
  };
269
279
  semantic: {
270
280
  surface: Record<"base" | "cutout" | "elevated", string>;
271
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
281
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
282
+ branded: Record<"message" | "heading" | "surface", string>;
272
283
  border: Record<"graphic" | "differentiated" | "functional", string>;
273
284
  focus: Record<"surface" | "outline" | "hover", string>;
274
- inverted: Record<"surface" | "border", string> & {
285
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
275
286
  message: Record<"base" | "link" | "secondary" | "branded", string>;
276
287
  };
288
+ neutral: {
289
+ border: string;
290
+ surface: string;
291
+ surfaceEmphasis: string;
292
+ message: string;
293
+ messageOnEmphasis: string;
294
+ };
277
295
  success: {
278
296
  border: string;
279
297
  surface: string;
@@ -471,6 +489,7 @@ export declare const TableHeaderText: import("styled-components").StyledComponen
471
489
  borderWidth: Record<"small" | "medium" | "large", string>;
472
490
  breakpoint: Record<"small" | "medium" | "large", string | number>;
473
491
  mediaQuery: Record<"small" | "medium" | "large", string>;
492
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
474
493
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
475
494
  transition: Record<"medium" | "slow" | "fast", string>;
476
495
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -502,12 +521,20 @@ export declare const TableHeaderText: import("styled-components").StyledComponen
502
521
  };
503
522
  semantic: {
504
523
  surface: Record<"base" | "cutout" | "elevated", string>;
505
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
524
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
525
+ branded: Record<"message" | "heading" | "surface", string>;
506
526
  border: Record<"graphic" | "differentiated" | "functional", string>;
507
527
  focus: Record<"surface" | "outline" | "hover", string>;
508
- inverted: Record<"surface" | "border", string> & {
528
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
509
529
  message: Record<"base" | "link" | "secondary" | "branded", string>;
510
530
  };
531
+ neutral: {
532
+ border: string;
533
+ surface: string;
534
+ surfaceEmphasis: string;
535
+ message: string;
536
+ messageOnEmphasis: string;
537
+ };
511
538
  success: {
512
539
  border: string;
513
540
  surface: string;
@@ -703,6 +730,7 @@ export declare const TableCaptionText: import("styled-components").StyledCompone
703
730
  borderWidth: Record<"small" | "medium" | "large", string>;
704
731
  breakpoint: Record<"small" | "medium" | "large", string | number>;
705
732
  mediaQuery: Record<"small" | "medium" | "large", string>;
733
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
706
734
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
707
735
  transition: Record<"medium" | "slow" | "fast", string>;
708
736
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -734,12 +762,20 @@ export declare const TableCaptionText: import("styled-components").StyledCompone
734
762
  };
735
763
  semantic: {
736
764
  surface: Record<"base" | "cutout" | "elevated", string>;
737
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
765
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
766
+ branded: Record<"message" | "heading" | "surface", string>;
738
767
  border: Record<"graphic" | "differentiated" | "functional", string>;
739
768
  focus: Record<"surface" | "outline" | "hover", string>;
740
- inverted: Record<"surface" | "border", string> & {
769
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
741
770
  message: Record<"base" | "link" | "secondary" | "branded", string>;
742
771
  };
772
+ neutral: {
773
+ border: string;
774
+ surface: string;
775
+ surfaceEmphasis: string;
776
+ message: string;
777
+ messageOnEmphasis: string;
778
+ };
743
779
  success: {
744
780
  border: string;
745
781
  surface: string;
@@ -935,6 +971,7 @@ export declare const CellText: import("styled-components").StyledComponent<typeo
935
971
  borderWidth: Record<"small" | "medium" | "large", string>;
936
972
  breakpoint: Record<"small" | "medium" | "large", string | number>;
937
973
  mediaQuery: Record<"small" | "medium" | "large", string>;
974
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
938
975
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
939
976
  transition: Record<"medium" | "slow" | "fast", string>;
940
977
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -966,12 +1003,20 @@ export declare const CellText: import("styled-components").StyledComponent<typeo
966
1003
  };
967
1004
  semantic: {
968
1005
  surface: Record<"base" | "cutout" | "elevated", string>;
969
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
1006
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
1007
+ branded: Record<"message" | "heading" | "surface", string>;
970
1008
  border: Record<"graphic" | "differentiated" | "functional", string>;
971
1009
  focus: Record<"surface" | "outline" | "hover", string>;
972
- inverted: Record<"surface" | "border", string> & {
1010
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
973
1011
  message: Record<"base" | "link" | "secondary" | "branded", string>;
974
1012
  };
1013
+ neutral: {
1014
+ border: string;
1015
+ surface: string;
1016
+ surfaceEmphasis: string;
1017
+ message: string;
1018
+ messageOnEmphasis: string;
1019
+ };
975
1020
  success: {
976
1021
  border: string;
977
1022
  surface: string;
@@ -1167,6 +1212,7 @@ export declare const TableCaption: import("styled-components").StyledComponent<t
1167
1212
  borderWidth: Record<"small" | "medium" | "large", string>;
1168
1213
  breakpoint: Record<"small" | "medium" | "large", string | number>;
1169
1214
  mediaQuery: Record<"small" | "medium" | "large", string>;
1215
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
1170
1216
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
1171
1217
  transition: Record<"medium" | "slow" | "fast", string>;
1172
1218
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -1198,12 +1244,20 @@ export declare const TableCaption: import("styled-components").StyledComponent<t
1198
1244
  };
1199
1245
  semantic: {
1200
1246
  surface: Record<"base" | "cutout" | "elevated", string>;
1201
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
1247
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
1248
+ branded: Record<"message" | "heading" | "surface", string>;
1202
1249
  border: Record<"graphic" | "differentiated" | "functional", string>;
1203
1250
  focus: Record<"surface" | "outline" | "hover", string>;
1204
- inverted: Record<"surface" | "border", string> & {
1251
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
1205
1252
  message: Record<"base" | "link" | "secondary" | "branded", string>;
1206
1253
  };
1254
+ neutral: {
1255
+ border: string;
1256
+ surface: string;
1257
+ surfaceEmphasis: string;
1258
+ message: string;
1259
+ messageOnEmphasis: string;
1260
+ };
1207
1261
  success: {
1208
1262
  border: string;
1209
1263
  surface: string;
@@ -1399,6 +1453,7 @@ export declare const TableRow: import("styled-components").StyledComponent<typeo
1399
1453
  borderWidth: Record<"small" | "medium" | "large", string>;
1400
1454
  breakpoint: Record<"small" | "medium" | "large", string | number>;
1401
1455
  mediaQuery: Record<"small" | "medium" | "large", string>;
1456
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
1402
1457
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
1403
1458
  transition: Record<"medium" | "slow" | "fast", string>;
1404
1459
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -1430,12 +1485,20 @@ export declare const TableRow: import("styled-components").StyledComponent<typeo
1430
1485
  };
1431
1486
  semantic: {
1432
1487
  surface: Record<"base" | "cutout" | "elevated", string>;
1433
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
1488
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
1489
+ branded: Record<"message" | "heading" | "surface", string>;
1434
1490
  border: Record<"graphic" | "differentiated" | "functional", string>;
1435
1491
  focus: Record<"surface" | "outline" | "hover", string>;
1436
- inverted: Record<"surface" | "border", string> & {
1492
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
1437
1493
  message: Record<"base" | "link" | "secondary" | "branded", string>;
1438
1494
  };
1495
+ neutral: {
1496
+ border: string;
1497
+ surface: string;
1498
+ surfaceEmphasis: string;
1499
+ message: string;
1500
+ messageOnEmphasis: string;
1501
+ };
1439
1502
  success: {
1440
1503
  border: string;
1441
1504
  surface: string;
@@ -1633,6 +1696,7 @@ export declare const TableRowHeading: import("styled-components").StyledComponen
1633
1696
  borderWidth: Record<"small" | "medium" | "large", string>;
1634
1697
  breakpoint: Record<"small" | "medium" | "large", string | number>;
1635
1698
  mediaQuery: Record<"small" | "medium" | "large", string>;
1699
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
1636
1700
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
1637
1701
  transition: Record<"medium" | "slow" | "fast", string>;
1638
1702
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -1664,12 +1728,20 @@ export declare const TableRowHeading: import("styled-components").StyledComponen
1664
1728
  };
1665
1729
  semantic: {
1666
1730
  surface: Record<"base" | "cutout" | "elevated", string>;
1667
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
1731
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
1732
+ branded: Record<"message" | "heading" | "surface", string>;
1668
1733
  border: Record<"graphic" | "differentiated" | "functional", string>;
1669
1734
  focus: Record<"surface" | "outline" | "hover", string>;
1670
- inverted: Record<"surface" | "border", string> & {
1735
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
1671
1736
  message: Record<"base" | "link" | "secondary" | "branded", string>;
1672
1737
  };
1738
+ neutral: {
1739
+ border: string;
1740
+ surface: string;
1741
+ surfaceEmphasis: string;
1742
+ message: string;
1743
+ messageOnEmphasis: string;
1744
+ };
1673
1745
  success: {
1674
1746
  border: string;
1675
1747
  surface: string;
@@ -1865,6 +1937,7 @@ export declare const TableBody: import("styled-components").StyledComponent<type
1865
1937
  borderWidth: Record<"small" | "medium" | "large", string>;
1866
1938
  breakpoint: Record<"small" | "medium" | "large", string | number>;
1867
1939
  mediaQuery: Record<"small" | "medium" | "large", string>;
1940
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
1868
1941
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
1869
1942
  transition: Record<"medium" | "slow" | "fast", string>;
1870
1943
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -1896,12 +1969,20 @@ export declare const TableBody: import("styled-components").StyledComponent<type
1896
1969
  };
1897
1970
  semantic: {
1898
1971
  surface: Record<"base" | "cutout" | "elevated", string>;
1899
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
1972
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
1973
+ branded: Record<"message" | "heading" | "surface", string>;
1900
1974
  border: Record<"graphic" | "differentiated" | "functional", string>;
1901
1975
  focus: Record<"surface" | "outline" | "hover", string>;
1902
- inverted: Record<"surface" | "border", string> & {
1976
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
1903
1977
  message: Record<"base" | "link" | "secondary" | "branded", string>;
1904
1978
  };
1979
+ neutral: {
1980
+ border: string;
1981
+ surface: string;
1982
+ surfaceEmphasis: string;
1983
+ message: string;
1984
+ messageOnEmphasis: string;
1985
+ };
1905
1986
  success: {
1906
1987
  border: string;
1907
1988
  surface: string;
@@ -2097,6 +2178,7 @@ export declare const TableCell: import("styled-components").StyledComponent<type
2097
2178
  borderWidth: Record<"small" | "medium" | "large", string>;
2098
2179
  breakpoint: Record<"small" | "medium" | "large", string | number>;
2099
2180
  mediaQuery: Record<"small" | "medium" | "large", string>;
2181
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
2100
2182
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
2101
2183
  transition: Record<"medium" | "slow" | "fast", string>;
2102
2184
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -2128,12 +2210,20 @@ export declare const TableCell: import("styled-components").StyledComponent<type
2128
2210
  };
2129
2211
  semantic: {
2130
2212
  surface: Record<"base" | "cutout" | "elevated", string>;
2131
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
2213
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
2214
+ branded: Record<"message" | "heading" | "surface", string>;
2132
2215
  border: Record<"graphic" | "differentiated" | "functional", string>;
2133
2216
  focus: Record<"surface" | "outline" | "hover", string>;
2134
- inverted: Record<"surface" | "border", string> & {
2217
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
2135
2218
  message: Record<"base" | "link" | "secondary" | "branded", string>;
2136
2219
  };
2220
+ neutral: {
2221
+ border: string;
2222
+ surface: string;
2223
+ surfaceEmphasis: string;
2224
+ message: string;
2225
+ messageOnEmphasis: string;
2226
+ };
2137
2227
  success: {
2138
2228
  border: string;
2139
2229
  surface: string;
@@ -2331,6 +2421,7 @@ export declare const RowHeading: import("styled-components").StyledComponent<typ
2331
2421
  borderWidth: Record<"small" | "medium" | "large", string>;
2332
2422
  breakpoint: Record<"small" | "medium" | "large", string | number>;
2333
2423
  mediaQuery: Record<"small" | "medium" | "large", string>;
2424
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
2334
2425
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
2335
2426
  transition: Record<"medium" | "slow" | "fast", string>;
2336
2427
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -2362,12 +2453,20 @@ export declare const RowHeading: import("styled-components").StyledComponent<typ
2362
2453
  };
2363
2454
  semantic: {
2364
2455
  surface: Record<"base" | "cutout" | "elevated", string>;
2365
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
2456
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
2457
+ branded: Record<"message" | "heading" | "surface", string>;
2366
2458
  border: Record<"graphic" | "differentiated" | "functional", string>;
2367
2459
  focus: Record<"surface" | "outline" | "hover", string>;
2368
- inverted: Record<"surface" | "border", string> & {
2460
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
2369
2461
  message: Record<"base" | "link" | "secondary" | "branded", string>;
2370
2462
  };
2463
+ neutral: {
2464
+ border: string;
2465
+ surface: string;
2466
+ surfaceEmphasis: string;
2467
+ message: string;
2468
+ messageOnEmphasis: string;
2469
+ };
2371
2470
  success: {
2372
2471
  border: string;
2373
2472
  surface: string;
@@ -2565,6 +2664,7 @@ export declare const StyledSeparatorRow: import("styled-components").StyledCompo
2565
2664
  borderWidth: Record<"small" | "medium" | "large", string>;
2566
2665
  breakpoint: Record<"small" | "medium" | "large", string | number>;
2567
2666
  mediaQuery: Record<"small" | "medium" | "large", string>;
2667
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
2568
2668
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
2569
2669
  transition: Record<"medium" | "slow" | "fast", string>;
2570
2670
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -2596,12 +2696,20 @@ export declare const StyledSeparatorRow: import("styled-components").StyledCompo
2596
2696
  };
2597
2697
  semantic: {
2598
2698
  surface: Record<"base" | "cutout" | "elevated", string>;
2599
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
2699
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
2700
+ branded: Record<"message" | "heading" | "surface", string>;
2600
2701
  border: Record<"graphic" | "differentiated" | "functional", string>;
2601
2702
  focus: Record<"surface" | "outline" | "hover", string>;
2602
- inverted: Record<"surface" | "border", string> & {
2703
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
2603
2704
  message: Record<"base" | "link" | "secondary" | "branded", string>;
2604
2705
  };
2706
+ neutral: {
2707
+ border: string;
2708
+ surface: string;
2709
+ surfaceEmphasis: string;
2710
+ message: string;
2711
+ messageOnEmphasis: string;
2712
+ };
2605
2713
  success: {
2606
2714
  border: string;
2607
2715
  surface: string;
@@ -2799,6 +2907,7 @@ export declare const SeparatorRowText: import("styled-components").StyledCompone
2799
2907
  borderWidth: Record<"small" | "medium" | "large", string>;
2800
2908
  breakpoint: Record<"small" | "medium" | "large", string | number>;
2801
2909
  mediaQuery: Record<"small" | "medium" | "large", string>;
2910
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
2802
2911
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
2803
2912
  transition: Record<"medium" | "slow" | "fast", string>;
2804
2913
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -2830,12 +2939,20 @@ export declare const SeparatorRowText: import("styled-components").StyledCompone
2830
2939
  };
2831
2940
  semantic: {
2832
2941
  surface: Record<"base" | "cutout" | "elevated", string>;
2833
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
2942
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
2943
+ branded: Record<"message" | "heading" | "surface", string>;
2834
2944
  border: Record<"graphic" | "differentiated" | "functional", string>;
2835
2945
  focus: Record<"surface" | "outline" | "hover", string>;
2836
- inverted: Record<"surface" | "border", string> & {
2946
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
2837
2947
  message: Record<"base" | "link" | "secondary" | "branded", string>;
2838
2948
  };
2949
+ neutral: {
2950
+ border: string;
2951
+ surface: string;
2952
+ surfaceEmphasis: string;
2953
+ message: string;
2954
+ messageOnEmphasis: string;
2955
+ };
2839
2956
  success: {
2840
2957
  border: string;
2841
2958
  surface: string;
package/dist/components/DescriptionList/styled.d.ts CHANGED
@@ -7,6 +7,7 @@ export declare const Dl: import("styled-components").StyledComponent<typeof impo
7
7
  borderWidth: Record<"small" | "medium" | "large", string>;
8
8
  breakpoint: Record<"small" | "medium" | "large", string | number>;
9
9
  mediaQuery: Record<"small" | "medium" | "large", string>;
10
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
10
11
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
11
12
  transition: Record<"medium" | "slow" | "fast", string>;
12
13
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -38,12 +39,20 @@ export declare const Dl: import("styled-components").StyledComponent<typeof impo
38
39
  };
39
40
  semantic: {
40
41
  surface: Record<"base" | "cutout" | "elevated", string>;
41
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
42
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
43
+ branded: Record<"message" | "heading" | "surface", string>;
42
44
  border: Record<"graphic" | "differentiated" | "functional", string>;
43
45
  focus: Record<"surface" | "outline" | "hover", string>;
44
- inverted: Record<"surface" | "border", string> & {
46
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
45
47
  message: Record<"base" | "link" | "secondary" | "branded", string>;
46
48
  };
49
+ neutral: {
50
+ border: string;
51
+ surface: string;
52
+ surfaceEmphasis: string;
53
+ message: string;
54
+ messageOnEmphasis: string;
55
+ };
47
56
  success: {
48
57
  border: string;
49
58
  surface: string;
package/dist/components/Em/Em.d.ts CHANGED
@@ -4,6 +4,7 @@ export declare const Em: import("styled-components").StyledComponent<typeof impo
4
4
  borderWidth: Record<"small" | "medium" | "large", string>;
5
5
  breakpoint: Record<"small" | "medium" | "large", string | number>;
6
6
  mediaQuery: Record<"small" | "medium" | "large", string>;
7
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
7
8
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
8
9
  transition: Record<"medium" | "slow" | "fast", string>;
9
10
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -35,12 +36,20 @@ export declare const Em: import("styled-components").StyledComponent<typeof impo
35
36
  };
36
37
  semantic: {
37
38
  surface: Record<"base" | "cutout" | "elevated", string>;
38
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
39
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
40
+ branded: Record<"message" | "heading" | "surface", string>;
39
41
  border: Record<"graphic" | "differentiated" | "functional", string>;
40
42
  focus: Record<"surface" | "outline" | "hover", string>;
41
- inverted: Record<"surface" | "border", string> & {
43
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
42
44
  message: Record<"base" | "link" | "secondary" | "branded", string>;
43
45
  };
46
+ neutral: {
47
+ border: string;
48
+ surface: string;
49
+ surfaceEmphasis: string;
50
+ message: string;
51
+ messageOnEmphasis: string;
52
+ };
44
53
  success: {
45
54
  border: string;
46
55
  surface: string;
package/dist/components/ErrorText/ErrorText.d.ts CHANGED
@@ -11,6 +11,7 @@ declare const ErrorText: import("react").ForwardRefExoticComponent<Pick<Omit<{
11
11
  borderWidth: Record<"small" | "medium" | "large", string>;
12
12
  breakpoint: Record<"small" | "medium" | "large", string | number>;
13
13
  mediaQuery: Record<"small" | "medium" | "large", string>;
14
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
14
15
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
15
16
  transition: Record<"medium" | "slow" | "fast", string>;
16
17
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -42,12 +43,20 @@ declare const ErrorText: import("react").ForwardRefExoticComponent<Pick<Omit<{
42
43
  };
43
44
  semantic: {
44
45
  surface: Record<"base" | "cutout" | "elevated", string>;
45
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
46
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
47
+ branded: Record<"message" | "heading" | "surface", string>;
46
48
  border: Record<"graphic" | "differentiated" | "functional", string>;
47
49
  focus: Record<"surface" | "outline" | "hover", string>;
48
- inverted: Record<"surface" | "border", string> & {
50
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
49
51
  message: Record<"base" | "link" | "secondary" | "branded", string>;
50
52
  };
53
+ neutral: {
54
+ border: string;
55
+ surface: string;
56
+ surfaceEmphasis: string;
57
+ message: string;
58
+ messageOnEmphasis: string;
59
+ };
51
60
  success: {
52
61
  border: string;
53
62
  surface: string;
package/dist/components/Grid/Col.d.ts CHANGED
@@ -10,6 +10,7 @@ declare const Col: import("react").ForwardRefExoticComponent<Pick<Omit<{
10
10
  borderWidth: Record<"small" | "medium" | "large", string>;
11
11
  breakpoint: Record<"small" | "medium" | "large", string | number>;
12
12
  mediaQuery: Record<"small" | "medium" | "large", string>;
13
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
13
14
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
14
15
  transition: Record<"medium" | "slow" | "fast", string>;
15
16
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -41,12 +42,20 @@ declare const Col: import("react").ForwardRefExoticComponent<Pick<Omit<{
41
42
  };
42
43
  semantic: {
43
44
  surface: Record<"base" | "cutout" | "elevated", string>;
44
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
45
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
46
+ branded: Record<"message" | "heading" | "surface", string>;
45
47
  border: Record<"graphic" | "differentiated" | "functional", string>;
46
48
  focus: Record<"surface" | "outline" | "hover", string>;
47
- inverted: Record<"surface" | "border", string> & {
49
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
48
50
  message: Record<"base" | "link" | "secondary" | "branded", string>;
49
51
  };
52
+ neutral: {
53
+ border: string;
54
+ surface: string;
55
+ surfaceEmphasis: string;
56
+ message: string;
57
+ messageOnEmphasis: string;
58
+ };
50
59
  success: {
51
60
  border: string;
52
61
  surface: string;
package/dist/components/Grid/Row.d.ts CHANGED
@@ -6,6 +6,7 @@ declare const StyledRow: import("styled-components").StyledComponent<typeof impo
6
6
  borderWidth: Record<"small" | "medium" | "large", string>;
7
7
  breakpoint: Record<"small" | "medium" | "large", string | number>;
8
8
  mediaQuery: Record<"small" | "medium" | "large", string>;
9
+ customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
9
10
  space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
10
11
  transition: Record<"medium" | "slow" | "fast", string>;
11
12
  opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -37,12 +38,20 @@ declare const StyledRow: import("styled-components").StyledComponent<typeof impo
37
38
  };
38
39
  semantic: {
39
40
  surface: Record<"base" | "cutout" | "elevated", string>;
40
- message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
41
+ message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
42
+ branded: Record<"message" | "heading" | "surface", string>;
41
43
  border: Record<"graphic" | "differentiated" | "functional", string>;
42
44
  focus: Record<"surface" | "outline" | "hover", string>;
43
- inverted: Record<"surface" | "border", string> & {
45
+ inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
44
46
  message: Record<"base" | "link" | "secondary" | "branded", string>;
45
47
  };
48
+ neutral: {
49
+ border: string;
50
+ surface: string;
51
+ surfaceEmphasis: string;
52
+ message: string;
53
+ messageOnEmphasis: string;
54
+ };
46
55
  success: {
47
56
  border: string;
48
57
  surface: string;
package/dist/components/Heading1/Heading1.d.ts CHANGED
@@ -1,3 +1,5 @@
1
1
  import { PropsWithChildren } from 'react';
2
2
  import { TextProps } from 'react-native';
3
- export declare const Heading1: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps>) => JSX.Element;
3
+ export declare const Heading1: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps & {
4
+ inverted?: boolean;
5
+ }>) => JSX.Element;
package/dist/components/Heading1/Heading1.js CHANGED
@@ -58,9 +58,11 @@ var calculateLetterSpacing = function (fontSize, letterSpacing) {
58
58
  return (0, utils_1.numToPx)((0, utils_1.pxToNumber)(fontSize) * letterSpacing);
59
59
  };
60
60
  var StyledHeading1 = styled_native_1.default.Text(function (_a) {
61
- var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
61
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
62
62
  var fontSize = core.fontSize.heading1[smallAndUp ? 'large' : 'small'];
63
- return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n color: ", ";\n "])), core.fontFamily.heading.native, fontSize, core.lineHeight.heading1[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.extraCompressed), semantic.message.branded);
63
+ return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n color: ", ";\n "])), core.fontFamily.heading.native, fontSize, core.lineHeight.heading1[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.extraCompressed), inverted
64
+ ? semantic.inverted.message.link
65
+ : semantic.message.branded);
64
66
  });
65
67
  var Heading1 = function (_a) {
66
68
  var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
package/dist/components/Heading2/Heading2.d.ts CHANGED
@@ -1,3 +1,5 @@
1
1
  import { PropsWithChildren } from 'react';
2
2
  import { TextProps } from 'react-native';
3
- export declare const Heading2: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps>) => JSX.Element;
3
+ export declare const Heading2: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps & {
4
+ inverted?: boolean;
5
+ }>) => JSX.Element;
package/dist/components/Heading2/Heading2.js CHANGED
@@ -58,9 +58,11 @@ var calculateLetterSpacing = function (fontSize, letterSpacing) {
58
58
  return (0, utils_1.numToPx)((0, utils_1.pxToNumber)(fontSize) * letterSpacing);
59
59
  };
60
60
  var StyledHeading2 = styled_native_1.default.Text(function (_a) {
61
- var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
61
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
62
62
  var fontSize = core.fontSize.heading2[smallAndUp ? 'large' : 'small'];
63
- return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n color: ", ";\n "])), core.fontFamily.heading.native, fontSize, core.lineHeight.heading2[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.extraCompressed), semantic.message.branded);
63
+ return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n color: ", ";\n "])), core.fontFamily.heading.native, fontSize, core.lineHeight.heading2[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.extraCompressed), inverted
64
+ ? semantic.inverted.message.link
65
+ : semantic.message.branded);
64
66
  });
65
67
  var Heading2 = function (_a) {
66
68
  var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
package/dist/components/Heading3/Heading3.d.ts CHANGED
@@ -1,3 +1,5 @@
1
1
  import { PropsWithChildren } from 'react';
2
2
  import { TextProps } from 'react-native';
3
- export declare const Heading3: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps>) => JSX.Element;
3
+ export declare const Heading3: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps & {
4
+ inverted?: boolean;
5
+ }>) => JSX.Element;