@transferwise/components 0.0.0-experimental-4b8556a → 0.0.0-experimental-3064bdb

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 (71) hide show
  1. package/build/alert/Alert.js +52 -49
  2. package/build/alert/Alert.js.map +1 -1
  3. package/build/alert/Alert.mjs +53 -50
  4. package/build/alert/Alert.mjs.map +1 -1
  5. package/build/i18n/en.json +2 -0
  6. package/build/i18n/en.json.js +2 -0
  7. package/build/i18n/en.json.js.map +1 -1
  8. package/build/i18n/en.json.mjs +2 -0
  9. package/build/i18n/en.json.mjs.map +1 -1
  10. package/build/main.css +214 -0
  11. package/build/styles/main.css +214 -0
  12. package/build/styles/table/Table.css +214 -0
  13. package/build/types/alert/Alert.d.ts +3 -1
  14. package/build/types/alert/Alert.d.ts.map +1 -1
  15. package/build/types/table/Table.d.ts +23 -0
  16. package/build/types/table/Table.d.ts.map +1 -0
  17. package/build/types/table/Table.messages.d.ts +12 -0
  18. package/build/types/table/Table.messages.d.ts.map +1 -0
  19. package/build/types/table/TableCell.d.ts +37 -0
  20. package/build/types/table/TableCell.d.ts.map +1 -0
  21. package/build/types/table/TableHeader.d.ts +12 -0
  22. package/build/types/table/TableHeader.d.ts.map +1 -0
  23. package/build/types/table/TableRow.d.ts +17 -0
  24. package/build/types/table/TableRow.d.ts.map +1 -0
  25. package/build/types/table/TableStatusText.d.ts +9 -0
  26. package/build/types/table/TableStatusText.d.ts.map +1 -0
  27. package/build/types/table/index.d.ts +6 -0
  28. package/build/types/table/index.d.ts.map +1 -0
  29. package/build/types/uploadInput/UploadInput.d.ts +0 -9
  30. package/build/types/uploadInput/UploadInput.d.ts.map +1 -1
  31. package/build/types/uploadInput/uploadItem/UploadItem.d.ts +1 -3
  32. package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map +1 -1
  33. package/build/types/uploadInput/uploadItem/UploadItemLink.d.ts.map +1 -1
  34. package/build/uploadInput/UploadInput.js +51 -57
  35. package/build/uploadInput/UploadInput.js.map +1 -1
  36. package/build/uploadInput/UploadInput.mjs +51 -57
  37. package/build/uploadInput/UploadInput.mjs.map +1 -1
  38. package/build/uploadInput/uploadItem/UploadItem.js +3 -8
  39. package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
  40. package/build/uploadInput/uploadItem/UploadItem.mjs +3 -8
  41. package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
  42. package/build/uploadInput/uploadItem/UploadItemLink.js +0 -1
  43. package/build/uploadInput/uploadItem/UploadItemLink.js.map +1 -1
  44. package/build/uploadInput/uploadItem/UploadItemLink.mjs +0 -1
  45. package/build/uploadInput/uploadItem/UploadItemLink.mjs.map +1 -1
  46. package/package.json +3 -3
  47. package/src/alert/Alert.spec.tsx +20 -0
  48. package/src/alert/Alert.story.tsx +50 -2
  49. package/src/alert/Alert.tsx +57 -50
  50. package/src/i18n/en.json +2 -0
  51. package/src/main.css +214 -0
  52. package/src/main.less +1 -0
  53. package/src/table/Table.css +214 -0
  54. package/src/table/Table.less +253 -0
  55. package/src/table/Table.messages.ts +12 -0
  56. package/src/table/Table.spec.tsx +87 -0
  57. package/src/table/Table.story.tsx +352 -0
  58. package/src/table/Table.tsx +121 -0
  59. package/src/table/TableCell.spec.tsx +298 -0
  60. package/src/table/TableCell.tsx +153 -0
  61. package/src/table/TableHeader.spec.tsx +58 -0
  62. package/src/table/TableHeader.tsx +50 -0
  63. package/src/table/TableRow.spec.tsx +104 -0
  64. package/src/table/TableRow.tsx +62 -0
  65. package/src/table/TableStatusText.spec.tsx +53 -0
  66. package/src/table/TableStatusText.tsx +35 -0
  67. package/src/table/index.ts +11 -0
  68. package/src/uploadInput/UploadInput.spec.tsx +6 -150
  69. package/src/uploadInput/UploadInput.tsx +60 -83
  70. package/src/uploadInput/uploadItem/UploadItem.tsx +6 -12
  71. package/src/uploadInput/uploadItem/UploadItemLink.tsx +1 -9
package/src/alert/Alert.tsx CHANGED
@@ -52,6 +52,8 @@ export interface AlertProps {
52
52
  /** The type dictates which icon and colour will be used */
53
53
  type?: AlertType;
54
54
  variant?: `${Variant}`;
55
+ /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */
56
+ active?: boolean;
55
57
  /** @deprecated Use `InlineAlert` instead. */
56
58
  arrow?: `${AlertArrowPosition}`;
57
59
  /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */
@@ -88,6 +90,7 @@ export default function Alert({
88
90
  title,
89
91
  type = 'neutral',
90
92
  variant = 'desktop',
93
+ active = true,
91
94
  }: AlertProps) {
92
95
  useEffect(() => {
93
96
  if (arrow !== undefined) {
@@ -133,59 +136,63 @@ export default function Alert({
133
136
  const closeButtonReference = useRef<HTMLButtonElement>(null);
134
137
 
135
138
  return (
136
- <div
137
- className={clsx(
138
- 'alert d-flex',
139
- `alert-${resolvedType}`,
140
- arrow != null && alertArrowClassNames(arrow),
141
- className,
142
- )}
143
- data-testid="alert"
144
- onTouchStart={() => setShouldFire(true)}
145
- onTouchEnd={(event) => {
146
- if (
147
- shouldFire &&
148
- action?.href &&
149
- // Check if current event is triggered from closeButton
150
- event.target instanceof Node &&
151
- closeButtonReference.current &&
152
- !closeButtonReference.current.contains(event.target)
153
- ) {
154
- if (action.target === '_blank') {
155
- window.top?.open(action.href);
156
- } else {
157
- window.top?.location.assign(action.href);
158
- }
159
- }
160
- setShouldFire(false);
161
- }}
162
- onTouchMove={() => setShouldFire(false)}
163
- >
164
- <div
165
- className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}
166
- data-testid={variant}
167
- >
168
- {icon ? (
169
- <div className="alert__icon">{icon}</div>
170
- ) : (
171
- <StatusIcon size={Size.LARGE} sentiment={resolvedType} />
172
- )}
173
- <div className="alert__message">
174
- <div role={Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status'}>
175
- {title && (
176
- <Title className="m-b-1" type={Typography.TITLE_BODY}>
177
- {title}
178
- </Title>
139
+ <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>
140
+ {active && (
141
+ <div
142
+ className={clsx(
143
+ 'alert d-flex',
144
+ `alert-${resolvedType}`,
145
+ arrow != null && alertArrowClassNames(arrow),
146
+ className,
147
+ )}
148
+ data-testid="alert"
149
+ onTouchStart={() => setShouldFire(true)}
150
+ onTouchEnd={(event) => {
151
+ if (
152
+ shouldFire &&
153
+ action?.href &&
154
+ // Check if current event is triggered from closeButton
155
+ event.target instanceof Node &&
156
+ closeButtonReference.current &&
157
+ !closeButtonReference.current.contains(event.target)
158
+ ) {
159
+ if (action.target === '_blank') {
160
+ window.top?.open(action.href);
161
+ } else {
162
+ window.top?.location.assign(action.href);
163
+ }
164
+ }
165
+ setShouldFire(false);
166
+ }}
167
+ onTouchMove={() => setShouldFire(false)}
168
+ >
169
+ <div
170
+ className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}
171
+ data-testid={variant}
172
+ >
173
+ {icon ? (
174
+ <div className="alert__icon">{icon}</div>
175
+ ) : (
176
+ <StatusIcon size={Size.LARGE} sentiment={resolvedType} />
179
177
  )}
180
- <Body as="span" className="d-block" type={Typography.BODY_LARGE}>
181
- {children || <InlineMarkdown>{message}</InlineMarkdown>}
182
- </Body>
178
+ <div className="alert__message">
179
+ <div>
180
+ {title && (
181
+ <Title className="m-b-1" type={Typography.TITLE_BODY}>
182
+ {title}
183
+ </Title>
184
+ )}
185
+ <Body as="span" className="d-block" type={Typography.BODY_LARGE}>
186
+ {children || <InlineMarkdown>{message}</InlineMarkdown>}
187
+ </Body>
188
+ </div>
189
+ {action && <Action action={action} className="m-t-1" />}
190
+ </div>
183
191
  </div>
184
- {action && <Action action={action} className="m-t-1" />}
192
+ {onDismiss && (
193
+ <CloseButton ref={closeButtonReference} className="m-l-2" onClick={onDismiss} />
194
+ )}
185
195
  </div>
186
- </div>
187
- {onDismiss && (
188
- <CloseButton ref={closeButtonReference} className="m-l-2" onClick={onDismiss} />
189
196
  )}
190
197
  </div>
191
198
  );
package/src/i18n/en.json CHANGED
@@ -30,6 +30,8 @@
30
30
  "neptune.Summary.statusDone": "Item done",
31
31
  "neptune.Summary.statusNotDone": "Item to do",
32
32
  "neptune.Summary.statusPending": "Item pending",
33
+ "neptune.Table.emptyData": "No results found",
34
+ "neptune.Table.refreshPage": "Refresh page",
33
35
  "neptune.Upload.csButtonText": "Upload another file?",
34
36
  "neptune.Upload.csFailureText": "Upload failed. Please, try again",
35
37
  "neptune.Upload.csSuccessText": "Upload complete!",
package/src/main.css CHANGED
@@ -5025,6 +5025,220 @@ html:not([dir="rtl"]) .np-navigation-option {
5025
5025
  padding: 0 var(--size-24);
5026
5026
  }
5027
5027
  }
5028
+ .np-table {
5029
+ width: 100%;
5030
+ background-color: transparent;
5031
+ }
5032
+ .np-table-container {
5033
+ padding: 8px;
5034
+ padding: var(--size-8);
5035
+ background-color: rgba(134,167,189,0.10196);
5036
+ background-color: var(--color-background-neutral);
5037
+ border-radius: 16px;
5038
+ border-radius: var(--radius-medium);
5039
+ }
5040
+ .np-table-container--loading .np-table-header {
5041
+ min-width: calc(160px * 2);
5042
+ }
5043
+ .np-table-container--center {
5044
+ margin-right: auto;
5045
+ margin-left: auto;
5046
+ }
5047
+ .np-table-container--full-width {
5048
+ width: 100%;
5049
+ }
5050
+ .np-table-inner-container {
5051
+ background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
5052
+ background-image: linear-gradient(to right, var(--color-background-screen), var(--color-background-screen)), linear-gradient(to right, var(--color-background-screen), var(--color-background-screen)), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
5053
+ background-position: left center, right center, left center, right center;
5054
+ background-repeat: no-repeat;
5055
+ background-color: #ffffff;
5056
+ background-color: var(--color-background-screen);
5057
+ background-size: 10px 100%, 10px 100%, 10px 100%, 10px 100%;
5058
+ background-attachment: local, local, scroll, scroll;
5059
+ overflow-x: auto;
5060
+ border-radius: 10px;
5061
+ }
5062
+ .np-table-row:last-child .np-table-cell:first-child {
5063
+ border-bottom-left-radius: 10px;
5064
+ }
5065
+ .np-table-row:last-child .np-table-cell:last-child {
5066
+ border-bottom-right-radius: 10px;
5067
+ }
5068
+ .np-table-row--clickable:hover .np-table-cell {
5069
+ background-color: var(--color-background-screen-hover);
5070
+ cursor: pointer;
5071
+ }
5072
+ .np-table-row--separator .np-table-cell {
5073
+ padding: 0;
5074
+ }
5075
+ .np-table-header,
5076
+ .np-table-cell {
5077
+ padding: 0;
5078
+ }
5079
+ .np-table-header:first-child,
5080
+ .np-table-cell:first-child {
5081
+ padding-left: 16px;
5082
+ padding-left: var(--size-16);
5083
+ }
5084
+ .np-table-header:first-child .np-table-header-content,
5085
+ .np-table-cell:first-child .np-table-header-content,
5086
+ .np-table-header:first-child .np-table-cell-content,
5087
+ .np-table-cell:first-child .np-table-cell-content {
5088
+ padding-left: 0;
5089
+ }
5090
+ .np-table-header:last-child,
5091
+ .np-table-cell:last-child {
5092
+ padding-right: 16px;
5093
+ padding-right: var(--size-16);
5094
+ }
5095
+ .np-table-header:last-child .np-table-header-content,
5096
+ .np-table-cell:last-child .np-table-header-content,
5097
+ .np-table-header:last-child .np-table-cell-content,
5098
+ .np-table-cell:last-child .np-table-cell-content {
5099
+ padding-right: 0;
5100
+ }
5101
+ .np-table-header .np-text-body-large-bold,
5102
+ .np-table-cell .np-text-body-large-bold {
5103
+ font-size: 0.875rem;
5104
+ font-size: var(--font-size-14);
5105
+ }
5106
+ .np-table-header.np-table-header--right,
5107
+ .np-table-cell.np-table-cell--right {
5108
+ padding-right: calc(8px + 12px);
5109
+ padding-right: calc(var(--size-8) + var(--size-12));
5110
+ }
5111
+ .np-table-header.np-table-header--right > .np-text-body-default,
5112
+ .np-table-cell.np-table-cell--right > .np-text-body-default {
5113
+ text-align: right;
5114
+ }
5115
+ .np-table-header.np-table-header--right .np-table-header-content,
5116
+ .np-table-cell.np-table-cell--right .np-table-content {
5117
+ justify-content: end;
5118
+ }
5119
+ .np-table-header-content,
5120
+ .np-table-content {
5121
+ display: flex;
5122
+ align-items: center;
5123
+ justify-content: start;
5124
+ }
5125
+ .np-table-header {
5126
+ min-width: 160px;
5127
+ padding-right: 8px;
5128
+ padding-right: var(--size-8);
5129
+ padding-bottom: 8px;
5130
+ padding-bottom: var(--size-8);
5131
+ padding-left: 8px;
5132
+ padding-left: var(--size-8);
5133
+ background-color: rgba(134,167,189,0.10196);
5134
+ background-color: var(--color-background-neutral);
5135
+ color: #37517e;
5136
+ color: var(--color-content-primary);
5137
+ }
5138
+ .np-table-header-content {
5139
+ padding-top: 5px;
5140
+ padding-bottom: 5px;
5141
+ white-space: nowrap;
5142
+ }
5143
+ .np-table-header--has-error {
5144
+ color: var(--color-sentiment-negative);
5145
+ }
5146
+ .np-table-cell {
5147
+ padding: 16px 8px;
5148
+ padding: var(--size-16) var(--size-8);
5149
+ }
5150
+ .np-table-cell--primary {
5151
+ min-width: 200px;
5152
+ }
5153
+ .np-table-cell--currency .np-text-body-default {
5154
+ white-space: nowrap;
5155
+ }
5156
+ .np-table-cell--status .status-circle {
5157
+ width: 24px;
5158
+ height: 24px;
5159
+ }
5160
+ .np-table-cell--status .status-circle .status-icon > svg {
5161
+ width: 21px;
5162
+ height: 21px;
5163
+ }
5164
+ .np-table-cell .tw-chevron {
5165
+ margin-left: 8px;
5166
+ margin-left: var(--size-8);
5167
+ }
5168
+ .np-table-cell-separator {
5169
+ margin-top: 4px;
5170
+ margin-top: var(--size-4);
5171
+ margin-bottom: 4px;
5172
+ margin-bottom: var(--size-4);
5173
+ height: 1px;
5174
+ padding: 0;
5175
+ background-color: rgba(134,167,189,0.10196);
5176
+ background-color: var(--color-background-neutral);
5177
+ }
5178
+ .np-table-cell .np-text-body-default {
5179
+ line-height: 1.375rem;
5180
+ line-height: var(--line-height-22);
5181
+ }
5182
+ .np-table-cell .np-text-body-large-bold {
5183
+ display: flex;
5184
+ align-items: center;
5185
+ color: #37517e;
5186
+ color: var(--color-content-primary);
5187
+ white-space: nowrap;
5188
+ }
5189
+ .np-table-cell .np-table-content--success {
5190
+ color: var(--color-sentiment-positive);
5191
+ }
5192
+ .np-table-cell .np-table-content--error {
5193
+ color: var(--color-sentiment-negative);
5194
+ }
5195
+ .np-table-cell .tw-loader {
5196
+ margin: 150px auto;
5197
+ }
5198
+ @media (max-width: 320px) {
5199
+ .np-table-cell .tw-loader {
5200
+ margin-top: 70px;
5201
+ margin-bottom: 70px;
5202
+ }
5203
+ }
5204
+ .np-table-content {
5205
+ gap: 12px;
5206
+ gap: var(--size-12);
5207
+ }
5208
+ .np-table-content--success,
5209
+ .np-table-content--error {
5210
+ gap: 4px;
5211
+ gap: var(--size-4);
5212
+ }
5213
+ .np-table-content--success .np-table-content-text,
5214
+ .np-table-content--error .np-table-content-text {
5215
+ line-height: 155%;
5216
+ }
5217
+ .np-table-content-media {
5218
+ flex-shrink: 0;
5219
+ }
5220
+ .np-table-content-body {
5221
+ display: flex;
5222
+ flex-direction: column;
5223
+ font-size: 0.75rem;
5224
+ font-size: var(--font-size-12);
5225
+ color: #768e9c;
5226
+ color: var(--color-content-tertiary);
5227
+ }
5228
+ .np-table-content--reversed {
5229
+ flex-direction: row-reverse;
5230
+ }
5231
+ .np-table-content--reversed .np-table-content-body {
5232
+ align-items: end;
5233
+ }
5234
+ .np-table-empty-data {
5235
+ display: flex;
5236
+ align-items: center;
5237
+ }
5238
+ .np-table-empty-data .status-circle {
5239
+ margin-right: 12px;
5240
+ margin-right: var(--size-12);
5241
+ }
5028
5242
  .np-tile {
5029
5243
  min-width: 120px;
5030
5244
  border-radius: 10px;
package/src/main.less CHANGED
@@ -60,6 +60,7 @@
60
60
  @import "./summary/Summary.less";
61
61
  @import "./switch/Switch.less";
62
62
  @import "./tabs/Tabs.less";
63
+ @import "./table/Table.less";
63
64
  @import "./tile/Tile.less";
64
65
  @import "./tooltip/Tooltip.less";
65
66
  @import "./typeahead/Typeahead.less";
package/src/table/Table.css ADDED
@@ -0,0 +1,214 @@
1
+ .np-table {
2
+ width: 100%;
3
+ background-color: transparent;
4
+ }
5
+ .np-table-container {
6
+ padding: 8px;
7
+ padding: var(--size-8);
8
+ background-color: rgba(134,167,189,0.10196);
9
+ background-color: var(--color-background-neutral);
10
+ border-radius: 16px;
11
+ border-radius: var(--radius-medium);
12
+ }
13
+ .np-table-container--loading .np-table-header {
14
+ min-width: calc(160px * 2);
15
+ }
16
+ .np-table-container--center {
17
+ margin-right: auto;
18
+ margin-left: auto;
19
+ }
20
+ .np-table-container--full-width {
21
+ width: 100%;
22
+ }
23
+ .np-table-inner-container {
24
+ background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
25
+ background-image: linear-gradient(to right, var(--color-background-screen), var(--color-background-screen)), linear-gradient(to right, var(--color-background-screen), var(--color-background-screen)), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
26
+ background-position: left center, right center, left center, right center;
27
+ background-repeat: no-repeat;
28
+ background-color: #ffffff;
29
+ background-color: var(--color-background-screen);
30
+ background-size: 10px 100%, 10px 100%, 10px 100%, 10px 100%;
31
+ background-attachment: local, local, scroll, scroll;
32
+ overflow-x: auto;
33
+ border-radius: 10px;
34
+ }
35
+ .np-table-row:last-child .np-table-cell:first-child {
36
+ border-bottom-left-radius: 10px;
37
+ }
38
+ .np-table-row:last-child .np-table-cell:last-child {
39
+ border-bottom-right-radius: 10px;
40
+ }
41
+ .np-table-row--clickable:hover .np-table-cell {
42
+ background-color: var(--color-background-screen-hover);
43
+ cursor: pointer;
44
+ }
45
+ .np-table-row--separator .np-table-cell {
46
+ padding: 0;
47
+ }
48
+ .np-table-header,
49
+ .np-table-cell {
50
+ padding: 0;
51
+ }
52
+ .np-table-header:first-child,
53
+ .np-table-cell:first-child {
54
+ padding-left: 16px;
55
+ padding-left: var(--size-16);
56
+ }
57
+ .np-table-header:first-child .np-table-header-content,
58
+ .np-table-cell:first-child .np-table-header-content,
59
+ .np-table-header:first-child .np-table-cell-content,
60
+ .np-table-cell:first-child .np-table-cell-content {
61
+ padding-left: 0;
62
+ }
63
+ .np-table-header:last-child,
64
+ .np-table-cell:last-child {
65
+ padding-right: 16px;
66
+ padding-right: var(--size-16);
67
+ }
68
+ .np-table-header:last-child .np-table-header-content,
69
+ .np-table-cell:last-child .np-table-header-content,
70
+ .np-table-header:last-child .np-table-cell-content,
71
+ .np-table-cell:last-child .np-table-cell-content {
72
+ padding-right: 0;
73
+ }
74
+ .np-table-header .np-text-body-large-bold,
75
+ .np-table-cell .np-text-body-large-bold {
76
+ font-size: 0.875rem;
77
+ font-size: var(--font-size-14);
78
+ }
79
+ .np-table-header.np-table-header--right,
80
+ .np-table-cell.np-table-cell--right {
81
+ padding-right: calc(8px + 12px);
82
+ padding-right: calc(var(--size-8) + var(--size-12));
83
+ }
84
+ .np-table-header.np-table-header--right > .np-text-body-default,
85
+ .np-table-cell.np-table-cell--right > .np-text-body-default {
86
+ text-align: right;
87
+ }
88
+ .np-table-header.np-table-header--right .np-table-header-content,
89
+ .np-table-cell.np-table-cell--right .np-table-content {
90
+ justify-content: end;
91
+ }
92
+ .np-table-header-content,
93
+ .np-table-content {
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: start;
97
+ }
98
+ .np-table-header {
99
+ min-width: 160px;
100
+ padding-right: 8px;
101
+ padding-right: var(--size-8);
102
+ padding-bottom: 8px;
103
+ padding-bottom: var(--size-8);
104
+ padding-left: 8px;
105
+ padding-left: var(--size-8);
106
+ background-color: rgba(134,167,189,0.10196);
107
+ background-color: var(--color-background-neutral);
108
+ color: #37517e;
109
+ color: var(--color-content-primary);
110
+ }
111
+ .np-table-header-content {
112
+ padding-top: 5px;
113
+ padding-bottom: 5px;
114
+ white-space: nowrap;
115
+ }
116
+ .np-table-header--has-error {
117
+ color: var(--color-sentiment-negative);
118
+ }
119
+ .np-table-cell {
120
+ padding: 16px 8px;
121
+ padding: var(--size-16) var(--size-8);
122
+ }
123
+ .np-table-cell--primary {
124
+ min-width: 200px;
125
+ }
126
+ .np-table-cell--currency .np-text-body-default {
127
+ white-space: nowrap;
128
+ }
129
+ .np-table-cell--status .status-circle {
130
+ width: 24px;
131
+ height: 24px;
132
+ }
133
+ .np-table-cell--status .status-circle .status-icon > svg {
134
+ width: 21px;
135
+ height: 21px;
136
+ }
137
+ .np-table-cell .tw-chevron {
138
+ margin-left: 8px;
139
+ margin-left: var(--size-8);
140
+ }
141
+ .np-table-cell-separator {
142
+ margin-top: 4px;
143
+ margin-top: var(--size-4);
144
+ margin-bottom: 4px;
145
+ margin-bottom: var(--size-4);
146
+ height: 1px;
147
+ padding: 0;
148
+ background-color: rgba(134,167,189,0.10196);
149
+ background-color: var(--color-background-neutral);
150
+ }
151
+ .np-table-cell .np-text-body-default {
152
+ line-height: 1.375rem;
153
+ line-height: var(--line-height-22);
154
+ }
155
+ .np-table-cell .np-text-body-large-bold {
156
+ display: flex;
157
+ align-items: center;
158
+ color: #37517e;
159
+ color: var(--color-content-primary);
160
+ white-space: nowrap;
161
+ }
162
+ .np-table-cell .np-table-content--success {
163
+ color: var(--color-sentiment-positive);
164
+ }
165
+ .np-table-cell .np-table-content--error {
166
+ color: var(--color-sentiment-negative);
167
+ }
168
+ .np-table-cell .tw-loader {
169
+ margin: 150px auto;
170
+ }
171
+ @media (max-width: 320px) {
172
+ .np-table-cell .tw-loader {
173
+ margin-top: 70px;
174
+ margin-bottom: 70px;
175
+ }
176
+ }
177
+ .np-table-content {
178
+ gap: 12px;
179
+ gap: var(--size-12);
180
+ }
181
+ .np-table-content--success,
182
+ .np-table-content--error {
183
+ gap: 4px;
184
+ gap: var(--size-4);
185
+ }
186
+ .np-table-content--success .np-table-content-text,
187
+ .np-table-content--error .np-table-content-text {
188
+ line-height: 155%;
189
+ }
190
+ .np-table-content-media {
191
+ flex-shrink: 0;
192
+ }
193
+ .np-table-content-body {
194
+ display: flex;
195
+ flex-direction: column;
196
+ font-size: 0.75rem;
197
+ font-size: var(--font-size-12);
198
+ color: #768e9c;
199
+ color: var(--color-content-tertiary);
200
+ }
201
+ .np-table-content--reversed {
202
+ flex-direction: row-reverse;
203
+ }
204
+ .np-table-content--reversed .np-table-content-body {
205
+ align-items: end;
206
+ }
207
+ .np-table-empty-data {
208
+ display: flex;
209
+ align-items: center;
210
+ }
211
+ .np-table-empty-data .status-circle {
212
+ margin-right: 12px;
213
+ margin-right: var(--size-12);
214
+ }