@transferwise/components 46.150.0 → 46.151.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/build/main.css +155 -12
  2. package/build/styles/css/neptune.css +0 -11
  3. package/build/styles/main.css +155 -12
  4. package/build/styles/pocketSurface/PocketSurface.css +163 -0
  5. package/build/styles/sentimentSurface/SentimentSurface.css +0 -1
  6. package/build/styles/styles/less/neptune.css +0 -11
  7. package/build/types/index.d.ts +1 -1
  8. package/build/types/index.d.ts.map +1 -1
  9. package/build/types/pocketSurface/PocketSurface.d.ts +4 -0
  10. package/build/types/pocketSurface/PocketSurface.d.ts.map +1 -0
  11. package/build/types/pocketSurface/PocketSurface.types.d.ts +19 -0
  12. package/build/types/pocketSurface/PocketSurface.types.d.ts.map +1 -0
  13. package/build/types/pocketSurface/index.d.ts +3 -0
  14. package/build/types/pocketSurface/index.d.ts.map +1 -0
  15. package/package.json +6 -4
  16. package/src/index.ts +2 -0
  17. package/src/main.css +155 -12
  18. package/src/main.less +1 -0
  19. package/src/pocketSurface/PocketSurface.css +163 -0
  20. package/src/pocketSurface/PocketSurface.docs.mdx +64 -0
  21. package/src/pocketSurface/PocketSurface.less +6 -0
  22. package/src/pocketSurface/PocketSurface.story.tsx +278 -0
  23. package/src/pocketSurface/PocketSurface.test.tsx +107 -0
  24. package/src/pocketSurface/PocketSurface.tsx +41 -0
  25. package/src/pocketSurface/PocketSurface.types.ts +37 -0
  26. package/src/pocketSurface/index.ts +7 -0
  27. package/src/sentimentSurface/SentimentSurface.css +0 -1
  28. package/src/styles/less/neptune.css +0 -11
  29. package/src/tokens/tokens.story.tsx +0 -142
package/src/pocketSurface/index.ts ADDED
@@ -0,0 +1,7 @@
1
+ export { default } from './PocketSurface';
2
+ export type {
3
+ PocketSurfaceComponent,
4
+ PocketSurfaceProps,
5
+ CommonProps,
6
+ PocketVariant,
7
+ } from './PocketSurface.types';
package/src/sentimentSurface/SentimentSurface.css CHANGED
@@ -1,6 +1,5 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
4
3
  */
5
4
 
6
5
 
package/src/styles/less/neptune.css CHANGED
@@ -1,6 +1,5 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Tue, 09 Jun 2026 08:11:03 GMT
4
3
  */
5
4
 
6
5
  :root {
@@ -144,7 +143,6 @@
144
143
 
145
144
  /**
146
145
  * Do not edit directly, this file was auto-generated.
147
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
148
146
  */
149
147
 
150
148
  .np-theme-personal {
@@ -328,7 +326,6 @@
328
326
 
329
327
  /**
330
328
  * Do not edit directly, this file was auto-generated.
331
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
332
329
  */
333
330
 
334
331
  .np-theme-personal--forest-green {
@@ -512,7 +509,6 @@
512
509
 
513
510
  /**
514
511
  * Do not edit directly, this file was auto-generated.
515
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
516
512
  */
517
513
 
518
514
  .np-theme-personal--bright-green {
@@ -696,7 +692,6 @@
696
692
 
697
693
  /**
698
694
  * Do not edit directly, this file was auto-generated.
699
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
700
695
  */
701
696
 
702
697
  .np-theme-personal--dark {
@@ -880,7 +875,6 @@
880
875
 
881
876
  /**
882
877
  * Do not edit directly, this file was auto-generated.
883
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
884
878
  */
885
879
 
886
880
  .np-theme-platform {
@@ -1064,7 +1058,6 @@
1064
1058
 
1065
1059
  /**
1066
1060
  * Do not edit directly, this file was auto-generated.
1067
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
1068
1061
  */
1069
1062
 
1070
1063
  .np-theme-platform--forest-green {
@@ -1248,7 +1241,6 @@
1248
1241
 
1249
1242
  /**
1250
1243
  * Do not edit directly, this file was auto-generated.
1251
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
1252
1244
  */
1253
1245
 
1254
1246
  .np-theme-business {
@@ -1433,7 +1425,6 @@
1433
1425
 
1434
1426
  /**
1435
1427
  * Do not edit directly, this file was auto-generated.
1436
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
1437
1428
  */
1438
1429
 
1439
1430
  .np-theme-business--dark {
@@ -1618,7 +1609,6 @@
1618
1609
 
1619
1610
  /**
1620
1611
  * Do not edit directly, this file was auto-generated.
1621
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
1622
1612
  */
1623
1613
 
1624
1614
  .np-theme-business--forest-green {
@@ -1803,7 +1793,6 @@
1803
1793
 
1804
1794
  /**
1805
1795
  * Do not edit directly, this file was auto-generated.
1806
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
1807
1796
  */
1808
1797
 
1809
1798
  .np-theme-business--bright-green {
package/src/tokens/tokens.story.tsx DELETED
@@ -1,142 +0,0 @@
1
- import React, { ReactNode } from 'react';
2
- import type { Meta, StoryObj } from '@storybook/react-webpack5';
3
- import clsx from 'clsx';
4
- import AvatarView from '../avatarView';
5
- import Tooltip from '../tooltip';
6
- import IconButton from '../iconButton';
7
- import Body from '../body';
8
-
9
- const meta: Meta = {
10
- title: 'Foundations/Tokens',
11
- tags: ['!autodocs', '!manifest'],
12
- };
13
-
14
- export default meta;
15
-
16
- type Story = StoryObj;
17
-
18
- export const Colors: Story = {
19
- render: () => {
20
- return (
21
- <Body>
22
- {colorTokens.map((token) => (
23
- <ColorToken key={token} token={token} className="m-b-2" />
24
- ))}
25
- </Body>
26
- );
27
- },
28
- };
29
-
30
- const colorTokens = [
31
- '--color-content-primary',
32
- '--color-bright-yellow',
33
- '--color-bright-orange',
34
- '--color-dark-purple',
35
- '--color-dark-gold',
36
- '--color-bright-blue',
37
- '--color-dark-charcoal',
38
- '--color-white',
39
- '--color-black',
40
- '--color-bright-green',
41
- '--color-forest-green',
42
- '--color-bright-pink',
43
- '--color-dark-maroon',
44
- '--color-content-primary',
45
- '--color-content-secondary',
46
- '--color-content-tertiary',
47
- '--color-content-link',
48
- '--color-content-link-hover',
49
- '--color-content-link-active',
50
- '--color-interactive-control',
51
- '--color-interactive-control-hover',
52
- '--color-interactive-control-active',
53
- '--color-interactive-primary',
54
- '--color-interactive-primary-hover',
55
- '--color-interactive-primary-active',
56
- '--color-interactive-secondary',
57
- '--color-interactive-secondary-hover',
58
- '--color-interactive-secondary-active',
59
- '--color-interactive-accent',
60
- '--color-interactive-accent-hover',
61
- '--color-interactive-accent-active',
62
- '--color-interactive-contrast',
63
- '--color-interactive-contrast-hover',
64
- '--color-interactive-contrast-active',
65
- '--color-interactive-neutral',
66
- '--color-interactive-neutral-hover',
67
- '--color-interactive-neutral-active',
68
- '--color-border-neutral',
69
- '--color-border-overlay',
70
- '--color-background-screen',
71
- '--color-background-screen-hover',
72
- '--color-background-screen-active',
73
- '--color-background-elevated',
74
- '--color-background-neutral',
75
- '--color-background-neutral-hover',
76
- '--color-background-neutral-active',
77
- '--color-background-overlay',
78
- '--color-background-surface',
79
- '--color-sentiment-negative',
80
- '--color-sentiment-negative-hover',
81
- '--color-sentiment-negative-active',
82
- '--color-sentiment-negative-primary',
83
- '--color-sentiment-negative-primary-hover',
84
- '--color-sentiment-negative-primary-active',
85
- '--color-sentiment-negative-secondary',
86
- '--color-sentiment-negative-secondary-hover',
87
- '--color-sentiment-negative-secondary-active',
88
- '--color-sentiment-positive',
89
- '--color-sentiment-positive-hover',
90
- '--color-sentiment-positive-active',
91
- '--color-sentiment-positive-primary',
92
- '--color-sentiment-positive-primary-hover',
93
- '--color-sentiment-positive-primary-active',
94
- '--color-sentiment-positive-secondary',
95
- '--color-sentiment-positive-secondary-hover',
96
- '--color-sentiment-positive-secondary-active',
97
- '--color-sentiment-warning',
98
- '--color-sentiment-warning-hover',
99
- '--color-sentiment-warning-active',
100
- '--color-sentiment-warning-primary',
101
- '--color-sentiment-warning-primary-hover',
102
- '--color-sentiment-warning-primary-active',
103
- '--color-sentiment-warning-secondary',
104
- '--color-sentiment-warning-secondary-hover',
105
- '--color-sentiment-warning-secondary-active',
106
- '--color-sentiment-warning-content',
107
- '--color-sentiment-warning-content-hover',
108
- '--color-sentiment-warning-content-active',
109
- '--color-contrast',
110
- '--color-light',
111
- '--color-dark',
112
- '--color-contrast-overlay',
113
- '--color-contrast-theme',
114
- ];
115
-
116
- function ColorToken(props: { token: string; className?: string }) {
117
- const color = `var(${props.token})`;
118
- const [tooltipLabel, setTooltipLabel] = React.useState<ReactNode>('Copy Token Name');
119
- return (
120
- <div className={clsx('d-flex', 'align-items-center', props.className)}>
121
- <IconButton
122
- aria-label="Copy color"
123
- size={72}
124
- className="m-r-2"
125
- onClick={async () => {
126
- await navigator.clipboard.writeText(color);
127
- setTooltipLabel('Copied!');
128
- }}
129
- >
130
- <Tooltip label={<Body type="body-large-bold">{tooltipLabel}</Body>} position="top">
131
- <AvatarView
132
- size={72}
133
- style={{ backgroundColor: color, border: 'solid 1px var(--color-border-neutral)' }}
134
- >
135
- {null}
136
- </AvatarView>
137
- </Tooltip>
138
- </IconButton>
139
- <code className="m-l-2">{props.token}</code>
140
- </div>
141
- );
142
- }