@revolut/ui-kit-miniapp 0.0.8 → 0.1.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.
- package/package.json +2 -2
- package/types/index.d.ts +1099 -399
package/types/index.d.ts
CHANGED
|
@@ -1,23 +1,614 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import * as
|
|
3
|
-
import
|
|
2
|
+
import * as React__default from 'react';
|
|
3
|
+
import React__default__default from 'react';
|
|
4
4
|
import * as ReactTable from 'react-table';
|
|
5
5
|
import { IdType, UseTableOptions, UseExpandedOptions, UseFiltersOptions, UseResizeColumnsOptions, UseRowSelectOptions, UseRowStateOptions, UseSortByOptions, UseGroupByOptions, UseExpandedHooks, UseGroupByHooks, UseRowSelectHooks, UseSortByHooks, UseColumnOrderInstanceProps, UseExpandedInstanceProps, UseFiltersInstanceProps, UseGlobalFiltersInstanceProps, UsePaginationInstanceProps, UseRowSelectInstanceProps, UseRowStateInstanceProps, UseSortByInstanceProps, Row, UseColumnOrderState, UseExpandedState, UseFiltersState, UseGlobalFiltersState, UseGroupByState, UsePaginationState, UseResizeColumnsState, UseRowSelectState, UseRowStateState, UseSortByState, UseFiltersColumnProps, UseGroupByColumnProps, UseResizeColumnsColumnProps, UseSortByColumnProps, UseGroupByCellProps, UseRowStateCellProps, UseExpandedRowProps, UseGroupByRowProps, UseRowSelectRowProps, UseRowStateRowProps } from 'react-table';
|
|
6
|
-
import { ValueOf, Token as Token$1 } from '@revolut-internal/ui-kit-shared';
|
|
7
6
|
import * as csstype from 'csstype';
|
|
7
|
+
import { MessageBubblePlacement } from '@revolut-internal/ui-kit-unstable';
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
9
|
+
interface LooseCurrencyDefinition {
|
|
10
|
+
code?: string;
|
|
11
|
+
symbol?: string;
|
|
12
|
+
fractionalPart: number;
|
|
13
|
+
crypto?: boolean;
|
|
14
|
+
}
|
|
15
|
+
type CurrencyDefinition = Required<Omit<LooseCurrencyDefinition, 'crypto'>> & Pick<LooseCurrencyDefinition, 'crypto'>;
|
|
16
|
+
interface LooseMoney {
|
|
17
|
+
amount: number;
|
|
18
|
+
currency?: string;
|
|
19
|
+
}
|
|
20
|
+
interface Money extends Required<LooseMoney> {
|
|
21
|
+
}
|
|
22
|
+
type MoneyRoundingModeFallback = 'ceil' | 'floor' | 'expand' | 'trunc' | 'halfCeil' | 'halfFloor' | 'halfExpand' | 'halfTrunc' | 'halfEven' | undefined;
|
|
23
|
+
type MoneyRoundingMode = 'roundingMode' extends keyof Intl.NumberFormatOptions ? Intl.NumberFormatOptions['roundingMode'] : MoneyRoundingModeFallback;
|
|
24
|
+
|
|
25
|
+
declare const DEFAULT_MESSAGES: {
|
|
26
|
+
readonly 'action.add': "Add";
|
|
27
|
+
readonly 'action.apply': "Apply";
|
|
28
|
+
readonly 'action.back': "Back";
|
|
29
|
+
readonly 'action.cancel': "Cancel";
|
|
30
|
+
readonly 'action.clear': "Clear";
|
|
31
|
+
readonly 'action.close': "Close";
|
|
32
|
+
readonly 'action.collapse': "Collapse";
|
|
33
|
+
readonly 'action.collapse-menu': "Collapse menu";
|
|
34
|
+
readonly 'action.copy': "Copy";
|
|
35
|
+
readonly 'action.expand': "Expand";
|
|
36
|
+
readonly 'action.expand-menu': "Expand menu";
|
|
37
|
+
readonly 'action.fca-disclaimer-learn-more': "Take 2 mins to learn more";
|
|
38
|
+
readonly 'action.hide': "Hide";
|
|
39
|
+
readonly 'action.link': "Link";
|
|
40
|
+
readonly 'action.more': "More";
|
|
41
|
+
readonly 'action.next-slide': "Next slide";
|
|
42
|
+
readonly 'action.next': "Next";
|
|
43
|
+
readonly 'action.prev-slide': "Previous slide";
|
|
44
|
+
readonly 'action.prev': "Previous";
|
|
45
|
+
readonly 'action.rate': "Rate";
|
|
46
|
+
readonly 'action.retry': "Retry";
|
|
47
|
+
readonly 'action.select-all': "Select all";
|
|
48
|
+
readonly 'action.select': "Select";
|
|
49
|
+
readonly 'action.show-less': "Show less";
|
|
50
|
+
readonly 'action.show-more': "Show more";
|
|
51
|
+
readonly 'action.show': "Show";
|
|
52
|
+
readonly 'action.sort-asc': "Sort ascending";
|
|
53
|
+
readonly 'action.sort-cancel': "Discard sorting";
|
|
54
|
+
readonly 'action.sort-dsc': "Sort descending";
|
|
55
|
+
readonly 'action.resize-column': "Resize column";
|
|
56
|
+
readonly 'action.remove': "Remove";
|
|
57
|
+
readonly 'action.reorder': "Reorder";
|
|
58
|
+
readonly 'action.play': "Play";
|
|
59
|
+
readonly 'action.pause': "Pause";
|
|
60
|
+
readonly 'action.open-global-search': "Open global search";
|
|
61
|
+
readonly 'action.open-profile': "Open profile";
|
|
62
|
+
readonly 'action.open-notifications': "Open notifications";
|
|
63
|
+
readonly 'action.open-app-switcher': "Open app switcher";
|
|
64
|
+
readonly 'action.open-menu': "Open menu";
|
|
65
|
+
readonly 'action.open-filters': "Open filters";
|
|
66
|
+
readonly 'label.apps': "Apps";
|
|
67
|
+
readonly 'label.notifications': "Notifications";
|
|
68
|
+
readonly 'label.accounts': "Accounts";
|
|
69
|
+
readonly 'label.profile': "Profile";
|
|
70
|
+
readonly 'label.empty-state': "Nothing here";
|
|
71
|
+
readonly 'label.failed-state': "Something went wrong";
|
|
72
|
+
readonly 'label.fca-disclaimer': "Don’t invest unless you’re prepared to lose all the money you invest. This is a high-risk investment and you should not expect to be protected if something goes wrong.";
|
|
73
|
+
readonly 'label.more-dialog': "More";
|
|
74
|
+
readonly 'label.no-results-state': "No results found";
|
|
75
|
+
readonly 'label.pending-state': "Loading";
|
|
76
|
+
readonly 'label.search': "Search";
|
|
77
|
+
readonly 'label.min': "Minimum";
|
|
78
|
+
readonly 'label.max': "Maximum";
|
|
79
|
+
readonly 'label.global-search': "Global search";
|
|
80
|
+
readonly 'label.selected': "Selected";
|
|
81
|
+
readonly 'format.in-a-few-moments': "In a few moments";
|
|
82
|
+
readonly 'format.moments-ago': "Moments ago";
|
|
83
|
+
readonly 'label.range': "Range";
|
|
84
|
+
readonly 'label.price': "Price";
|
|
85
|
+
readonly 'label.sum': "Sum";
|
|
86
|
+
readonly 'label.no-open-orders': "No open orders";
|
|
87
|
+
readonly 'label.settings': "Settings";
|
|
88
|
+
readonly 'label.dark': "Dark";
|
|
89
|
+
readonly 'label.light': "Light";
|
|
90
|
+
readonly 'label.system': "System";
|
|
91
|
+
readonly 'label.controlled-by-mode': "Controlled by mode";
|
|
92
|
+
readonly 'label.mode': "Mode";
|
|
93
|
+
readonly 'label.background': "Background";
|
|
94
|
+
readonly 'label.resize': "Resize";
|
|
95
|
+
readonly 'label.navigation-style': "Navigation style";
|
|
96
|
+
readonly 'label.icons-and-text': "Icons and text";
|
|
97
|
+
readonly 'label.icons-only': "Icons only";
|
|
98
|
+
readonly 'label.shortcuts': "Keyboard shortcuts";
|
|
99
|
+
readonly 'label.shortcut-centre': "Shortcut centre";
|
|
100
|
+
readonly 'label.general': "General";
|
|
101
|
+
readonly 'label.back': "Back";
|
|
102
|
+
readonly 'label.forward': "Forward";
|
|
103
|
+
readonly 'label.toggle-navigation': "Collapse/Expand navigation";
|
|
104
|
+
readonly 'label.menu-navigation': "Menu navigation";
|
|
105
|
+
readonly 'label.navigate-menu-item': "Navigate to menu item";
|
|
106
|
+
};
|
|
107
|
+
type IntlMessages = Record<keyof typeof DEFAULT_MESSAGES, string>;
|
|
108
|
+
|
|
109
|
+
type ValueOf<T> = T extends unknown[] | Readonly<unknown[]> ? T[number] : T[keyof T];
|
|
110
|
+
|
|
111
|
+
declare const colorChannel: {
|
|
112
|
+
readonly accent: "var(--rui-color-channel-accent)";
|
|
113
|
+
readonly accentNeutral: "var(--rui-color-channel-accent-neutral)";
|
|
114
|
+
readonly onAccent: "var(--rui-color-channel-on-accent)";
|
|
115
|
+
readonly onAccentNeutral: "var(--rui-color-channel-on-accent-neutral)";
|
|
116
|
+
readonly blue: "var(--rui-color-channel-blue)";
|
|
117
|
+
readonly coldBlue: "var(--rui-color-channel-cold-blue)";
|
|
118
|
+
readonly pink: "var(--rui-color-channel-pink)";
|
|
119
|
+
readonly green: "var(--rui-color-channel-green)";
|
|
120
|
+
readonly orange: "var(--rui-color-channel-orange)";
|
|
121
|
+
readonly red: "var(--rui-color-channel-red)";
|
|
122
|
+
readonly deepPink: "var(--rui-color-channel-deep-pink)";
|
|
123
|
+
readonly terracotta: "var(--rui-color-channel-terracotta)";
|
|
124
|
+
readonly yellow: "var(--rui-color-channel-yellow)";
|
|
125
|
+
readonly lime: "var(--rui-color-channel-lime)";
|
|
126
|
+
readonly lightGreen: "var(--rui-color-channel-light-green)";
|
|
127
|
+
readonly teal: "var(--rui-color-channel-teal)";
|
|
128
|
+
readonly cyan: "var(--rui-color-channel-cyan)";
|
|
129
|
+
readonly lightBlue: "var(--rui-color-channel-light-blue)";
|
|
130
|
+
readonly indigo: "var(--rui-color-channel-indigo)";
|
|
131
|
+
readonly deepPurple: "var(--rui-color-channel-deep-purple)";
|
|
132
|
+
readonly purple: "var(--rui-color-channel-purple)";
|
|
133
|
+
readonly brown: "var(--rui-color-channel-brown)";
|
|
134
|
+
readonly deepGrey: "var(--rui-color-channel-deep-grey)";
|
|
135
|
+
readonly black: "var(--rui-color-channel-black)";
|
|
136
|
+
readonly white: "var(--rui-color-channel-white)";
|
|
137
|
+
readonly grey50: "var(--rui-color-channel-grey-50)";
|
|
138
|
+
readonly grey20: "var(--rui-color-channel-grey-20)";
|
|
139
|
+
readonly grey10: "var(--rui-color-channel-grey-10)";
|
|
140
|
+
readonly grey8: "var(--rui-color-channel-grey-8)";
|
|
141
|
+
readonly grey5: "var(--rui-color-channel-grey-5)";
|
|
142
|
+
readonly grey2: "var(--rui-color-channel-grey-2)";
|
|
143
|
+
readonly greyTone2: "var(--rui-color-channel-grey-tone-2)";
|
|
144
|
+
readonly actionBlue: "var(--rui-color-channel-action-blue)";
|
|
145
|
+
readonly actionBlueNeutral: "var(--rui-color-channel-action-blue-neutral)";
|
|
146
|
+
readonly background: "var(--rui-color-channel-background)";
|
|
147
|
+
readonly foreground: "var(--rui-color-channel-foreground)";
|
|
148
|
+
readonly layoutBackground: "var(--rui-color-channel-layout-background)";
|
|
149
|
+
readonly actionBackground: "var(--rui-color-channel-action-background)";
|
|
150
|
+
readonly actionBackgroundNeutral: "var(--rui-color-channel-action-background-neutral)";
|
|
151
|
+
readonly groupedBackground: "var(--rui-color-channel-grouped-background)";
|
|
152
|
+
readonly widgetBackground: "var(--rui-color-channel-widget-background)";
|
|
153
|
+
readonly popoverBackground: "var(--rui-color-channel-popover-background)";
|
|
154
|
+
readonly success: "var(--rui-color-channel-success)";
|
|
155
|
+
readonly warning: "var(--rui-color-channel-warning)";
|
|
156
|
+
readonly danger: "var(--rui-color-channel-danger)";
|
|
157
|
+
readonly inactive: "var(--rui-color-channel-inactive)";
|
|
158
|
+
readonly positive: "var(--rui-color-channel-positive)";
|
|
159
|
+
readonly negative: "var(--rui-color-channel-negative)";
|
|
160
|
+
readonly static: "var(--rui-color-channel-static)";
|
|
161
|
+
};
|
|
162
|
+
type BaseColor = keyof typeof colorChannel;
|
|
163
|
+
type Opacity = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
|
|
164
|
+
type BaseColorWithOpacity = BaseColor | `${Exclude<BaseColor, 'background' | 'foreground' | 'layoutBackground' | 'actionBackground' | 'groupedBackground' | 'widgetBackground'>}_${Opacity}`;
|
|
165
|
+
type Color$1 = keyof typeof color | BaseColorWithOpacity;
|
|
166
|
+
declare const color: {
|
|
167
|
+
readonly accent: "var(--rui-color-accent)";
|
|
168
|
+
readonly accentNeutral: "var(--rui-color-accent-neutral)";
|
|
169
|
+
readonly blue: "var(--rui-color-blue)";
|
|
170
|
+
readonly coldBlue: "var(--rui-color-cold-blue)";
|
|
171
|
+
readonly pink: "var(--rui-color-pink)";
|
|
172
|
+
readonly green: "var(--rui-color-green)";
|
|
173
|
+
readonly orange: "var(--rui-color-orange)";
|
|
174
|
+
readonly red: "var(--rui-color-red)";
|
|
175
|
+
readonly deepPink: "var(--rui-color-deep-pink)";
|
|
176
|
+
readonly terracotta: "var(--rui-color-terracotta)";
|
|
177
|
+
readonly yellow: "var(--rui-color-yellow)";
|
|
178
|
+
readonly lime: "var(--rui-color-lime)";
|
|
179
|
+
readonly lightGreen: "var(--rui-color-light-green)";
|
|
180
|
+
readonly teal: "var(--rui-color-teal)";
|
|
181
|
+
readonly cyan: "var(--rui-color-cyan)";
|
|
182
|
+
readonly lightBlue: "var(--rui-color-light-blue)";
|
|
183
|
+
readonly indigo: "var(--rui-color-indigo)";
|
|
184
|
+
readonly deepPurple: "var(--rui-color-deep-purple)";
|
|
185
|
+
readonly purple: "var(--rui-color-purple)";
|
|
186
|
+
readonly brown: "var(--rui-color-brown)";
|
|
187
|
+
readonly deepGrey: "var(--rui-color-deep-grey)";
|
|
188
|
+
readonly black: "var(--rui-color-black)";
|
|
189
|
+
readonly grey50: "var(--rui-color-grey-50)";
|
|
190
|
+
readonly grey20: "var(--rui-color-grey-20)";
|
|
191
|
+
readonly grey10: "var(--rui-color-grey-10)";
|
|
192
|
+
readonly grey5: "var(--rui-color-grey-5)";
|
|
193
|
+
readonly grey8: "var(--rui-color-grey-8)";
|
|
194
|
+
readonly grey2: "var(--rui-color-grey-2)";
|
|
195
|
+
readonly white: "var(--rui-color-white)";
|
|
196
|
+
readonly actionBlue: "var(--rui-color-action-blue)";
|
|
197
|
+
readonly actionBlueNeutral: "var(--rui-color-action-blue-neutral)";
|
|
198
|
+
readonly searchBackground: "var(--rui-color-search-background)";
|
|
199
|
+
readonly segmentedWidgetBackground: "var(--rui-color-segmented-widget-background)";
|
|
200
|
+
readonly segmentedBackground: "var(--rui-color-segmented-background)";
|
|
201
|
+
readonly segmentedActive: "var(--rui-color-segmented-active)";
|
|
202
|
+
readonly onAccent: "var(--rui-color-on-accent)";
|
|
203
|
+
readonly onAccentNeutral: "var(--rui-color-on-accent-neutral)";
|
|
204
|
+
readonly actionPhotoHeaderText: "var(--rui-color-action-photo-header-text)";
|
|
205
|
+
readonly actionPhotoHeaderTextNeutral: "var(--rui-color-action-photo-header-text-neutral)";
|
|
206
|
+
readonly actionPhotoHeaderBackground: "var(--rui-color-action-photo-header-background)";
|
|
207
|
+
readonly actionPhotoHeaderBackgroundNeutral: "var(--rui-color-action-photo-header-background-neutral)";
|
|
208
|
+
readonly redActionBackground: "var(--rui-color-red-action-background)";
|
|
209
|
+
readonly actionBackground: "var(--rui-color-action-background)";
|
|
210
|
+
readonly actionBackgroundNeutral: "var(--rui-color-action-background-neutral)";
|
|
211
|
+
readonly widgetBackground: "var(--rui-color-widget-background)";
|
|
212
|
+
readonly groupedBackground: "var(--rui-color-grouped-background)";
|
|
213
|
+
readonly popoverBackground: "var(--rui-color-popover-background)";
|
|
214
|
+
readonly nestedBackground: "var(--rui-color-nested-background)";
|
|
215
|
+
readonly background: "var(--rui-color-background)";
|
|
216
|
+
readonly greyTone2: "var(--rui-color-grey-tone-2)";
|
|
217
|
+
readonly greyTone5: "var(--rui-color-grey-tone-5)";
|
|
218
|
+
readonly greyTone8: "var(--rui-color-grey-tone-8)";
|
|
219
|
+
readonly greyTone10: "var(--rui-color-grey-tone-10)";
|
|
220
|
+
readonly greyTone20: "var(--rui-color-grey-tone-20)";
|
|
221
|
+
readonly greyTone50: "var(--rui-color-grey-tone-50)";
|
|
222
|
+
readonly foreground: "var(--rui-color-foreground)";
|
|
223
|
+
readonly actionLabel: "var(--rui-color-action-label)";
|
|
224
|
+
readonly actionLabelNeutral: "var(--rui-color-action-label-neutral)";
|
|
225
|
+
readonly inputError: "var(--rui-color-input-error)";
|
|
226
|
+
readonly inputErrorFocus: "var(--rui-color-input-error-focus)";
|
|
227
|
+
readonly disabledBackground: "var(--rui-color-disabled-background)";
|
|
228
|
+
/** @deprecated Use `static` instead */
|
|
229
|
+
readonly progressNeutral: "var(--rui-color-static)";
|
|
230
|
+
/** @deprecated Use `positive` instead */
|
|
231
|
+
readonly up: "var(--rui-color-positive)";
|
|
232
|
+
/** @deprecated Use `negative` instead */
|
|
233
|
+
readonly down: "var(--rui-color-negative)";
|
|
234
|
+
readonly success: "var(--rui-color-success)";
|
|
235
|
+
readonly warning: "var(--rui-color-warning)";
|
|
236
|
+
readonly danger: "var(--rui-color-danger)";
|
|
237
|
+
readonly inactive: "var(--rui-color-inactive)";
|
|
238
|
+
/** @deprecated Use `inactive` instead */
|
|
239
|
+
readonly neutral: "var(--rui-color-inactive)";
|
|
240
|
+
readonly positive: "var(--rui-color-positive)";
|
|
241
|
+
readonly negative: "var(--rui-color-negative)";
|
|
242
|
+
readonly static: "var(--rui-color-static)";
|
|
243
|
+
readonly shimmer: "var(--rui-color-shimmer)";
|
|
244
|
+
readonly onShimmer: "var(--rui-color-on-shimmer)";
|
|
245
|
+
readonly layoutBackground: "var(--rui-color-grouped-background)";
|
|
246
|
+
readonly modalOverlay: "var(--rui-color-modal-overlay)";
|
|
247
|
+
readonly metalDark: "var(--rui-color-metal-dark)";
|
|
248
|
+
readonly metalLight: "var(--rui-color-metal-light)";
|
|
249
|
+
readonly plus: "var(--rui-color-plus)";
|
|
250
|
+
readonly premiumDark: "var(--rui-color-premium-dark)";
|
|
251
|
+
readonly premiumLight: "var(--rui-color-premium-light)";
|
|
252
|
+
readonly premiumMid: "var(--rui-color-premium-mid)";
|
|
253
|
+
readonly ultraDark: "var(--rui-color-ultra-dark)";
|
|
254
|
+
readonly ultraLight: "var(--rui-color-ultra-light)";
|
|
255
|
+
readonly ultraLightBlue: "var(--rui-color-ultra-light-blue)";
|
|
256
|
+
readonly ultraMid: "var(--rui-color-ultra-mid)";
|
|
257
|
+
};
|
|
258
|
+
declare const Token$1: {
|
|
259
|
+
readonly breakpoint: {
|
|
260
|
+
readonly sm: "600px";
|
|
261
|
+
readonly md: "840px";
|
|
262
|
+
readonly lg: "1200px";
|
|
263
|
+
readonly xl: "1600px";
|
|
264
|
+
readonly xxl: "1920px";
|
|
265
|
+
};
|
|
266
|
+
readonly colorChannel: {
|
|
267
|
+
readonly accent: "var(--rui-color-channel-accent)";
|
|
268
|
+
readonly accentNeutral: "var(--rui-color-channel-accent-neutral)";
|
|
269
|
+
readonly onAccent: "var(--rui-color-channel-on-accent)";
|
|
270
|
+
readonly onAccentNeutral: "var(--rui-color-channel-on-accent-neutral)";
|
|
271
|
+
readonly blue: "var(--rui-color-channel-blue)";
|
|
272
|
+
readonly coldBlue: "var(--rui-color-channel-cold-blue)";
|
|
273
|
+
readonly pink: "var(--rui-color-channel-pink)";
|
|
274
|
+
readonly green: "var(--rui-color-channel-green)";
|
|
275
|
+
readonly orange: "var(--rui-color-channel-orange)";
|
|
276
|
+
readonly red: "var(--rui-color-channel-red)";
|
|
277
|
+
readonly deepPink: "var(--rui-color-channel-deep-pink)";
|
|
278
|
+
readonly terracotta: "var(--rui-color-channel-terracotta)";
|
|
279
|
+
readonly yellow: "var(--rui-color-channel-yellow)";
|
|
280
|
+
readonly lime: "var(--rui-color-channel-lime)";
|
|
281
|
+
readonly lightGreen: "var(--rui-color-channel-light-green)";
|
|
282
|
+
readonly teal: "var(--rui-color-channel-teal)";
|
|
283
|
+
readonly cyan: "var(--rui-color-channel-cyan)";
|
|
284
|
+
readonly lightBlue: "var(--rui-color-channel-light-blue)";
|
|
285
|
+
readonly indigo: "var(--rui-color-channel-indigo)";
|
|
286
|
+
readonly deepPurple: "var(--rui-color-channel-deep-purple)";
|
|
287
|
+
readonly purple: "var(--rui-color-channel-purple)";
|
|
288
|
+
readonly brown: "var(--rui-color-channel-brown)";
|
|
289
|
+
readonly deepGrey: "var(--rui-color-channel-deep-grey)";
|
|
290
|
+
readonly black: "var(--rui-color-channel-black)";
|
|
291
|
+
readonly white: "var(--rui-color-channel-white)";
|
|
292
|
+
readonly grey50: "var(--rui-color-channel-grey-50)";
|
|
293
|
+
readonly grey20: "var(--rui-color-channel-grey-20)";
|
|
294
|
+
readonly grey10: "var(--rui-color-channel-grey-10)";
|
|
295
|
+
readonly grey8: "var(--rui-color-channel-grey-8)";
|
|
296
|
+
readonly grey5: "var(--rui-color-channel-grey-5)";
|
|
297
|
+
readonly grey2: "var(--rui-color-channel-grey-2)";
|
|
298
|
+
readonly greyTone2: "var(--rui-color-channel-grey-tone-2)";
|
|
299
|
+
readonly actionBlue: "var(--rui-color-channel-action-blue)";
|
|
300
|
+
readonly actionBlueNeutral: "var(--rui-color-channel-action-blue-neutral)";
|
|
301
|
+
readonly background: "var(--rui-color-channel-background)";
|
|
302
|
+
readonly foreground: "var(--rui-color-channel-foreground)";
|
|
303
|
+
readonly layoutBackground: "var(--rui-color-channel-layout-background)";
|
|
304
|
+
readonly actionBackground: "var(--rui-color-channel-action-background)";
|
|
305
|
+
readonly actionBackgroundNeutral: "var(--rui-color-channel-action-background-neutral)";
|
|
306
|
+
readonly groupedBackground: "var(--rui-color-channel-grouped-background)";
|
|
307
|
+
readonly widgetBackground: "var(--rui-color-channel-widget-background)";
|
|
308
|
+
readonly popoverBackground: "var(--rui-color-channel-popover-background)";
|
|
309
|
+
readonly success: "var(--rui-color-channel-success)";
|
|
310
|
+
readonly warning: "var(--rui-color-channel-warning)";
|
|
311
|
+
readonly danger: "var(--rui-color-channel-danger)";
|
|
312
|
+
readonly inactive: "var(--rui-color-channel-inactive)";
|
|
313
|
+
readonly positive: "var(--rui-color-channel-positive)";
|
|
314
|
+
readonly negative: "var(--rui-color-channel-negative)";
|
|
315
|
+
readonly static: "var(--rui-color-channel-static)";
|
|
316
|
+
};
|
|
317
|
+
readonly color: Record<Color$1, string>;
|
|
318
|
+
readonly duration: {
|
|
319
|
+
readonly xs: "var(--rui-duration-xs)";
|
|
320
|
+
readonly sm: "var(--rui-duration-sm)";
|
|
321
|
+
readonly md: "var(--rui-duration-md)";
|
|
322
|
+
readonly lg: "var(--rui-duration-lg)";
|
|
323
|
+
readonly xl: "var(--rui-duration-xl)";
|
|
324
|
+
};
|
|
325
|
+
readonly easing: {
|
|
326
|
+
readonly default: "var(--rui-easing-default)";
|
|
327
|
+
readonly shadow: "var(--rui-easing-shadow)";
|
|
328
|
+
readonly toast: "var(--rui-easing-toast)";
|
|
329
|
+
readonly linear: "var(--rui-easing-linear)";
|
|
330
|
+
};
|
|
331
|
+
readonly font: {
|
|
332
|
+
readonly default: "var(--rui-font-default)";
|
|
333
|
+
readonly system: "var(--rui-font-system)";
|
|
334
|
+
readonly brand: "var(--rui-font-brand)";
|
|
335
|
+
readonly marketing: "var(--rui-font-marketing)";
|
|
336
|
+
readonly emoji: "var(--rui-font-emoji)";
|
|
337
|
+
};
|
|
338
|
+
readonly fontSize: {
|
|
339
|
+
readonly marketingDisplay1: "var(--rui-font-size-marketing-display1)";
|
|
340
|
+
readonly marketingDisplay2: "var(--rui-font-size-marketing-display2)";
|
|
341
|
+
readonly marketingDisplay3: "var(--rui-font-size-marketing-display3)";
|
|
342
|
+
readonly display1: "var(--rui-font-size-display1)";
|
|
343
|
+
readonly display2: "var(--rui-font-size-display2)";
|
|
344
|
+
readonly heading1: "var(--rui-font-size-heading1)";
|
|
345
|
+
readonly heading2: "var(--rui-font-size-heading2)";
|
|
346
|
+
readonly heading3: "var(--rui-font-size-heading3)";
|
|
347
|
+
readonly emphasis1: "var(--rui-font-size-emphasis1)";
|
|
348
|
+
readonly emphasis2: "var(--rui-font-size-emphasis2)";
|
|
349
|
+
readonly emphasis3: "var(--rui-font-size-emphasis3)";
|
|
350
|
+
readonly emphasis4: "var(--rui-font-size-emphasis4)";
|
|
351
|
+
readonly body1: "var(--rui-font-size-body1)";
|
|
352
|
+
readonly body2: "var(--rui-font-size-body2)";
|
|
353
|
+
readonly body3: "var(--rui-font-size-body3)";
|
|
354
|
+
readonly h0: "var(--rui-font-size-display1)";
|
|
355
|
+
readonly h1: "var(--rui-font-size-heading1)";
|
|
356
|
+
readonly h2: "var(--rui-font-size-heading1)";
|
|
357
|
+
readonly h3: "var(--rui-font-size-heading1)";
|
|
358
|
+
readonly h4: "var(--rui-font-size-heading3)";
|
|
359
|
+
readonly h5: "var(--rui-font-size-heading3)";
|
|
360
|
+
readonly h6: "var(--rui-font-size-emphasis2)";
|
|
361
|
+
readonly primary: "var(--rui-font-size-emphasis1)";
|
|
362
|
+
readonly secondary: "var(--rui-font-size-body1)";
|
|
363
|
+
readonly caption: "var(--rui-font-size-body2)";
|
|
364
|
+
readonly small: "var(--rui-font-size-body3)";
|
|
365
|
+
readonly tile: "var(--rui-font-size-emphasis1)";
|
|
366
|
+
readonly smallTile: "var(--rui-font-size-emphasis3)";
|
|
367
|
+
readonly tiny: "var(--rui-font-size-emphasis4)";
|
|
368
|
+
readonly display3: "var(--rui-font-size-marketing-display3)";
|
|
369
|
+
};
|
|
370
|
+
readonly fontWeight: {
|
|
371
|
+
readonly marketingDisplay1: "var(--rui-font-weight-marketing-display1)";
|
|
372
|
+
readonly marketingDisplay2: "var(--rui-font-weight-marketing-display2)";
|
|
373
|
+
readonly marketingDisplay3: "var(--rui-font-weight-marketing-display3)";
|
|
374
|
+
readonly display1: "var(--rui-font-weight-display1)";
|
|
375
|
+
readonly display2: "var(--rui-font-weight-display2)";
|
|
376
|
+
readonly heading1: "var(--rui-font-weight-heading1)";
|
|
377
|
+
readonly heading2: "var(--rui-font-weight-heading2)";
|
|
378
|
+
readonly heading3: "var(--rui-font-weight-heading3)";
|
|
379
|
+
readonly emphasis1: "var(--rui-font-weight-emphasis1)";
|
|
380
|
+
readonly emphasis2: "var(--rui-font-weight-emphasis2)";
|
|
381
|
+
readonly emphasis3: "var(--rui-font-weight-emphasis3)";
|
|
382
|
+
readonly emphasis4: "var(--rui-font-weight-emphasis4)";
|
|
383
|
+
readonly body1: "var(--rui-font-weight-body1)";
|
|
384
|
+
readonly body2: "var(--rui-font-weight-body2)";
|
|
385
|
+
readonly body3: "var(--rui-font-weight-body3)";
|
|
386
|
+
};
|
|
387
|
+
readonly lineHeight: {
|
|
388
|
+
readonly marketingDisplay1: "var(--rui-line-height-marketing-display1)";
|
|
389
|
+
readonly marketingDisplay2: "var(--rui-line-height-marketing-display2)";
|
|
390
|
+
readonly marketingDisplay3: "var(--rui-line-height-marketing-display3)";
|
|
391
|
+
readonly display1: "var(--rui-line-height-display1)";
|
|
392
|
+
readonly display2: "var(--rui-line-height-display2)";
|
|
393
|
+
readonly heading1: "var(--rui-line-height-heading1)";
|
|
394
|
+
readonly heading2: "var(--rui-line-height-heading2)";
|
|
395
|
+
readonly heading3: "var(--rui-line-height-heading3)";
|
|
396
|
+
readonly emphasis1: "var(--rui-line-height-emphasis1)";
|
|
397
|
+
readonly emphasis2: "var(--rui-line-height-emphasis2)";
|
|
398
|
+
readonly emphasis3: "var(--rui-line-height-emphasis3)";
|
|
399
|
+
readonly emphasis4: "var(--rui-line-height-emphasis4)";
|
|
400
|
+
readonly body1: "var(--rui-line-height-body1)";
|
|
401
|
+
readonly body2: "var(--rui-line-height-body2)";
|
|
402
|
+
readonly body3: "var(--rui-line-height-body3)";
|
|
403
|
+
readonly h0: "var(--rui-line-height-display1)";
|
|
404
|
+
readonly h1: "var(--rui-line-height-heading1)";
|
|
405
|
+
readonly h2: "var(--rui-line-height-heading1)";
|
|
406
|
+
readonly h3: "var(--rui-line-height-heading1)";
|
|
407
|
+
readonly h4: "var(--rui-line-height-heading3)";
|
|
408
|
+
readonly h5: "var(--rui-line-height-heading3)";
|
|
409
|
+
readonly h6: "var(--rui-line-height-emphasis2)";
|
|
410
|
+
readonly primary: "var(--rui-line-height-emphasis1)";
|
|
411
|
+
readonly secondary: "var(--rui-line-height-body1)";
|
|
412
|
+
readonly caption: "var(--rui-line-height-body2)";
|
|
413
|
+
readonly small: "var(--rui-line-height-body3)";
|
|
414
|
+
readonly tile: "var(--rui-font-line-height-emphasis1)";
|
|
415
|
+
readonly smallTile: "var(--rui-line-height-emphasis3)";
|
|
416
|
+
readonly tiny: "var(--rui-line-height-emphasis4)";
|
|
417
|
+
readonly display3: "var(--rui-line-height-marketing-display3)";
|
|
418
|
+
};
|
|
419
|
+
readonly letterSpacing: {
|
|
420
|
+
readonly marketingDisplay1: "var(--rui-letter-spacing-marketing-display1)";
|
|
421
|
+
readonly marketingDisplay2: "var(--rui-letter-spacing-marketing-display2)";
|
|
422
|
+
readonly marketingDisplay3: "var(--rui-letter-spacing-marketing-display3)";
|
|
423
|
+
readonly display1: "var(--rui-letter-spacing-display1)";
|
|
424
|
+
readonly display2: "var(--rui-letter-spacing-display2)";
|
|
425
|
+
readonly heading1: "var(--rui-letter-spacing-heading1)";
|
|
426
|
+
readonly heading2: "var(--rui-letter-spacing-heading2)";
|
|
427
|
+
readonly heading3: "var(--rui-letter-spacing-heading3)";
|
|
428
|
+
readonly emphasis1: "var(--rui-letter-spacing-emphasis1)";
|
|
429
|
+
readonly emphasis2: "var(--rui-letter-spacing-emphasis2)";
|
|
430
|
+
readonly emphasis3: "var(--rui-letter-spacing-emphasis3)";
|
|
431
|
+
readonly emphasis4: "var(--rui-letter-spacing-emphasis4)";
|
|
432
|
+
readonly body1: "var(--rui-letter-spacing-body1)";
|
|
433
|
+
readonly body2: "var(--rui-letter-spacing-body2)";
|
|
434
|
+
readonly body3: "var(--rui-letter-spacing-body3)";
|
|
435
|
+
readonly h0: "var(--rui-letter-spacing-display1)";
|
|
436
|
+
readonly h1: "var(--rui-letter-spacing-heading1)";
|
|
437
|
+
readonly h2: "var(--rui-letter-spacing-heading1)";
|
|
438
|
+
readonly h3: "var(--rui-letter-spacing-heading1)";
|
|
439
|
+
readonly h4: "var(--rui-letter-spacing-heading3)";
|
|
440
|
+
readonly h5: "var(--rui-letter-spacing-heading3)";
|
|
441
|
+
readonly h6: "var(--rui-letter-spacing-emphasis2)";
|
|
442
|
+
readonly primary: "var(--rui-letter-spacing-emphasis1)";
|
|
443
|
+
readonly secondary: "var(--rui-letter-spacing-body1)";
|
|
444
|
+
readonly caption: "var(--rui-letter-spacing-body2)";
|
|
445
|
+
readonly small: "var(--rui-letter-spacing-body3)";
|
|
446
|
+
readonly tile: "var(--rui-font-letter-spacing-emphasis1)";
|
|
447
|
+
readonly smallTile: "var(--rui-letter-spacing-emphasis3)";
|
|
448
|
+
readonly tiny: "var(--rui-letter-spacing-emphasis4)";
|
|
449
|
+
readonly display3: "var(--rui-letter-spacing-marketing-display3)";
|
|
450
|
+
};
|
|
451
|
+
readonly radius: {
|
|
452
|
+
/** @deprecated will be removed soon */
|
|
453
|
+
readonly r2: "var(--rui-radius-r2)";
|
|
454
|
+
/** @deprecated use `rd100` instead */
|
|
455
|
+
readonly r4: "var(--rui-radius-r4)";
|
|
456
|
+
/** @deprecated use `rd150` instead */
|
|
457
|
+
readonly r6: "var(--rui-radius-r6)";
|
|
458
|
+
/** @deprecated use `rd200` instead */
|
|
459
|
+
readonly r8: "var(--rui-radius-r8)";
|
|
460
|
+
/** @deprecated use `rd300` instead */
|
|
461
|
+
readonly r12: "var(--rui-radius-r12)";
|
|
462
|
+
/** @deprecated use `rd400` instead */
|
|
463
|
+
readonly r16: "var(--rui-radius-r16)";
|
|
464
|
+
/** @deprecated use `rd600` instead */
|
|
465
|
+
readonly r24: "var(--rui-radius-r24)";
|
|
466
|
+
/** @deprecated will be removed soon */
|
|
467
|
+
readonly r32: "var(--rui-radius-r32)";
|
|
468
|
+
readonly none: "var(--rui-radius-none)";
|
|
469
|
+
readonly round: "var(--rui-radius-round)";
|
|
470
|
+
readonly widget: "var(--rui-radius-widget)";
|
|
471
|
+
readonly popup: "var(--rui-radius-popup)";
|
|
472
|
+
readonly rd100: "var(--rui-radius-rd100, var(--rui-radius-r4))";
|
|
473
|
+
readonly rd150: "var(--rui-radius-rd150, var(--rui-radius-r6))";
|
|
474
|
+
readonly rd200: "var(--rui-radius-rd200, var(--rui-radius-r8))";
|
|
475
|
+
readonly rd300: "var(--rui-radius-rd300, var(--rui-radius-r12))";
|
|
476
|
+
readonly rd400: "var(--rui-radius-rd400, var(--rui-radius-r16))";
|
|
477
|
+
readonly rd600: "var(--rui-radius-rd600, var(--rui-radius-r24))";
|
|
478
|
+
};
|
|
479
|
+
readonly space: {
|
|
480
|
+
readonly none: "var(--rui-space-none)";
|
|
481
|
+
/** @deprecated use `sp50` instead */
|
|
482
|
+
readonly s2: "var(--rui-space-s2)";
|
|
483
|
+
/** @deprecated use `sp100` instead */
|
|
484
|
+
readonly s4: "var(--rui-space-s4)";
|
|
485
|
+
/** @deprecated use `sp150` instead */
|
|
486
|
+
readonly s6: "var(--rui-space-s6)";
|
|
487
|
+
/** @deprecated use `sp200` instead */
|
|
488
|
+
readonly s8: "var(--rui-space-s8)";
|
|
489
|
+
/** @deprecated use `sp300` instead */
|
|
490
|
+
readonly s12: "var(--rui-space-s12)";
|
|
491
|
+
/** @deprecated use `sp400` instead */
|
|
492
|
+
readonly s16: "var(--rui-space-s16)";
|
|
493
|
+
/** @deprecated use `sp500` instead */
|
|
494
|
+
readonly s20: "var(--rui-space-s20)";
|
|
495
|
+
/** @deprecated use `sp600` instead */
|
|
496
|
+
readonly s24: "var(--rui-space-s24)";
|
|
497
|
+
/** @deprecated use `sp800` instead */
|
|
498
|
+
readonly s32: "var(--rui-space-s32)";
|
|
499
|
+
/** @deprecated use `sp1000` instead */
|
|
500
|
+
readonly s40: "var(--rui-space-s40)";
|
|
501
|
+
/** @deprecated will be removed soon */
|
|
502
|
+
readonly s48: "var(--rui-size-s48)";
|
|
503
|
+
/** @deprecated will be removed soon */
|
|
504
|
+
readonly s56: "var(--rui-size-s56)";
|
|
505
|
+
/** @deprecated will be removed soon */
|
|
506
|
+
readonly s64: "var(--rui-size-s64)";
|
|
507
|
+
/** @deprecated will be removed soon */
|
|
508
|
+
readonly s72: "var(--rui-size-s72)";
|
|
509
|
+
/** @deprecated will be removed soon */
|
|
510
|
+
readonly n2: "calc(-1 * var(--rui-space-s2))";
|
|
511
|
+
/** @deprecated will be removed soon */
|
|
512
|
+
readonly n4: "calc(-1 * var(--rui-space-s4))";
|
|
513
|
+
/** @deprecated will be removed soon */
|
|
514
|
+
readonly n6: "calc(-1 * var(--rui-space-s6))";
|
|
515
|
+
/** @deprecated will be removed soon */
|
|
516
|
+
readonly n8: "calc(-1 * var(--rui-space-s8))";
|
|
517
|
+
/** @deprecated will be removed soon */
|
|
518
|
+
readonly n12: "calc(-1 * var(--rui-space-s12))";
|
|
519
|
+
/** @deprecated will be removed soon */
|
|
520
|
+
readonly n16: "calc(-1 * var(--rui-space-s16))";
|
|
521
|
+
/** @deprecated will be removed soon */
|
|
522
|
+
readonly n20: "calc(-1 * var(--rui-space-s20))";
|
|
523
|
+
/** @deprecated will be removed soon */
|
|
524
|
+
readonly n24: "calc(-1 * var(--rui-space-s24))";
|
|
525
|
+
/** @deprecated will be removed soon */
|
|
526
|
+
readonly n32: "calc(-1 * var(--rui-space-s32))";
|
|
527
|
+
/** @deprecated will be removed soon */
|
|
528
|
+
readonly n40: "calc(-1 * var(--rui-space-s40))";
|
|
529
|
+
/** @deprecated will be removed soon */
|
|
530
|
+
readonly n48: "calc(-1 * var(--rui-size-s48))";
|
|
531
|
+
/** @deprecated will be removed soon */
|
|
532
|
+
readonly n56: "calc(-1 * var(--rui-size-s56))";
|
|
533
|
+
/** @deprecated will be removed soon */
|
|
534
|
+
readonly n64: "calc(-1 * var(--rui-size-s64))";
|
|
535
|
+
/** @deprecated will be removed soon */
|
|
536
|
+
readonly n72: "calc(-1 * var(--rui-size-s72))";
|
|
537
|
+
readonly sp50: "var(--rui-space-sp50, var(--rui-space-s2))";
|
|
538
|
+
readonly sp100: "var(--rui-space-sp100, var(--rui-space-s4))";
|
|
539
|
+
readonly sp150: "var(--rui-space-sp150, var(--rui-space-s6))";
|
|
540
|
+
readonly sp200: "var(--rui-space-sp200, var(--rui-space-s8))";
|
|
541
|
+
readonly sp300: "var(--rui-space-sp300, var(--rui-space-s12))";
|
|
542
|
+
readonly sp400: "var(--rui-space-sp400, var(--rui-space-s16))";
|
|
543
|
+
readonly sp500: "var(--rui-space-sp500, var(--rui-space-s20))";
|
|
544
|
+
readonly sp600: "var(--rui-space-sp600, var(--rui-space-s24))";
|
|
545
|
+
readonly sp800: "var(--rui-space-sp800, var(--rui-space-s32))";
|
|
546
|
+
readonly sp1000: "var(--rui-space-sp1000, var(--rui-space-s40))";
|
|
547
|
+
};
|
|
548
|
+
readonly size: {
|
|
549
|
+
readonly s2: "var(--rui-size-s2, var(--rui-space-s2))";
|
|
550
|
+
readonly s4: "var(--rui-size-s4, var(--rui-space-s4))";
|
|
551
|
+
readonly s6: "var(--rui-size-s6, var(--rui-space-s6))";
|
|
552
|
+
readonly s8: "var(--rui-size-s8, var(--rui-space-s8))";
|
|
553
|
+
readonly s12: "var(--rui-size-s12, var(--rui-space-s12))";
|
|
554
|
+
readonly s16: "var(--rui-size-s16, var(--rui-space-s16))";
|
|
555
|
+
readonly s20: "var(--rui-size-s20, var(--rui-space-s20))";
|
|
556
|
+
readonly s24: "var(--rui-size-s24, var(--rui-space-s24))";
|
|
557
|
+
readonly s32: "var(--rui-size-s32, var(--rui-space-s32))";
|
|
558
|
+
readonly s40: "var(--rui-size-s40, var(--rui-space-s40))";
|
|
559
|
+
readonly s48: "var(--rui-size-s48, var(--rui-space-s48))";
|
|
560
|
+
readonly s56: "var(--rui-size-s56, var(--rui-space-s56))";
|
|
561
|
+
readonly s64: "var(--rui-size-s64, var(--rui-space-s64))";
|
|
562
|
+
readonly s72: "var(--rui-size-s72, var(--rui-space-s72))";
|
|
563
|
+
};
|
|
564
|
+
readonly timing: {
|
|
565
|
+
readonly sm: "var(--rui-timing-sm)";
|
|
566
|
+
readonly md: "var(--rui-timing-md)";
|
|
567
|
+
readonly lg: "var(--rui-timing-lg)";
|
|
568
|
+
readonly xl: "var(--rui-timing-xl)";
|
|
569
|
+
readonly shadow: "var(--rui-timing-shadow)";
|
|
570
|
+
};
|
|
571
|
+
readonly shadow: {
|
|
572
|
+
readonly none: "var(--rui-shadow-none)";
|
|
573
|
+
readonly level1: "var(--rui-shadow-level1)";
|
|
574
|
+
readonly level2: "var(--rui-shadow-level2)";
|
|
575
|
+
readonly level3: "var(--rui-shadow-level3)";
|
|
576
|
+
readonly level4: "var(--rui-shadow-level4)";
|
|
577
|
+
};
|
|
578
|
+
readonly transition: {
|
|
579
|
+
readonly shadow: "box-shadow var(--rui-timing-shadow)";
|
|
580
|
+
readonly background: "background-color var(--rui-timing-md)";
|
|
581
|
+
readonly border: "border-width var(--rui-timing-md)";
|
|
582
|
+
readonly text: "color var(--rui-timing-md)";
|
|
583
|
+
readonly opacity: "opacity var(--rui-timing-md)";
|
|
584
|
+
readonly transform: "transform var(--rui-timing-md)";
|
|
585
|
+
readonly width: "width var(--rui-timing-md)";
|
|
586
|
+
readonly height: "height var(--rui-timing-md)";
|
|
587
|
+
readonly top: "top var(--rui-timing-md), inset-block-start var(--rui-timing-md)";
|
|
588
|
+
readonly right: "right var(--rui-timing-md), inset-inline-end var(--rui-timing-md)";
|
|
589
|
+
readonly bottom: "bottom var(--rui-timing-md), inset-block-end var(--rui-timing-md)";
|
|
590
|
+
readonly left: "left var(--rui-timing-md), inset-inline-start var(--rui-timing-md)";
|
|
591
|
+
readonly filter: "filter var(--rui-timing-md)";
|
|
592
|
+
readonly radius: "border-radius var(--rui-timing-md)";
|
|
593
|
+
readonly outline: "outline var(--rui-timing-shadow)";
|
|
594
|
+
};
|
|
595
|
+
readonly media: {
|
|
596
|
+
readonly sm: "(min-width: 600px)";
|
|
597
|
+
readonly md: "(min-width: 840px)";
|
|
598
|
+
readonly lg: "(min-width: 1200px)";
|
|
599
|
+
readonly xl: "(min-width: 1600px)";
|
|
600
|
+
readonly xxl: "(min-width: 1920px)";
|
|
601
|
+
};
|
|
602
|
+
/** @deprecated will be removed soon */
|
|
603
|
+
readonly utils: {
|
|
604
|
+
/** @deprecated use `opacity` directly */
|
|
605
|
+
readonly opacity: (channel: string, value: number) => string;
|
|
606
|
+
/** @deprecated use `calc.negate` instead */
|
|
607
|
+
readonly negative: (space: string) => string;
|
|
608
|
+
/** @deprecated use `calc.subtract` instead */
|
|
609
|
+
readonly minus: (a: string, b: string) => string;
|
|
610
|
+
};
|
|
19
611
|
};
|
|
20
|
-
type Breakpoint = ValueOf<typeof Breakpoint>;
|
|
21
612
|
|
|
22
613
|
declare const UnifiedColor: {
|
|
23
614
|
readonly LAYOUT_BACKGROUND: "layout-background";
|
|
@@ -717,12 +1308,18 @@ declare const Color: {
|
|
|
717
1308
|
};
|
|
718
1309
|
type Color = UnifiedColor | (string & {});
|
|
719
1310
|
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
1311
|
+
/**
|
|
1312
|
+
* Docs: {@link https://ui-kit.revolut.codes/design-system/breakpoints Breakpoint}
|
|
1313
|
+
*/
|
|
1314
|
+
declare const Breakpoint: {
|
|
1315
|
+
readonly ALL: "all";
|
|
1316
|
+
readonly SM: "sm";
|
|
1317
|
+
readonly MD: "md";
|
|
1318
|
+
readonly LG: "lg";
|
|
1319
|
+
readonly XL: "xl";
|
|
1320
|
+
readonly XXL: "xxl";
|
|
724
1321
|
};
|
|
725
|
-
type
|
|
1322
|
+
type Breakpoint = ValueOf<typeof Breakpoint>;
|
|
726
1323
|
|
|
727
1324
|
declare const ElevationLevel: {
|
|
728
1325
|
readonly NONE: "none";
|
|
@@ -733,96 +1330,6 @@ declare const ElevationLevel: {
|
|
|
733
1330
|
};
|
|
734
1331
|
type ElevationLevel = ValueOf<typeof ElevationLevel>;
|
|
735
1332
|
|
|
736
|
-
declare const DEFAULT_MESSAGES: {
|
|
737
|
-
readonly 'action.apply': "Apply";
|
|
738
|
-
readonly 'action.back': "Back";
|
|
739
|
-
readonly 'action.cancel': "Cancel";
|
|
740
|
-
readonly 'action.clear': "Clear";
|
|
741
|
-
readonly 'action.close': "Close";
|
|
742
|
-
readonly 'action.collapse': "Collapse";
|
|
743
|
-
readonly 'action.collapse-menu': "Collapse menu";
|
|
744
|
-
readonly 'action.copy': "Copy";
|
|
745
|
-
readonly 'action.expand': "Expand";
|
|
746
|
-
readonly 'action.expand-menu': "Expand menu";
|
|
747
|
-
readonly 'action.fca-disclaimer-learn-more': "Take 2 mins to learn more";
|
|
748
|
-
readonly 'action.hide': "Hide";
|
|
749
|
-
readonly 'action.more': "More";
|
|
750
|
-
readonly 'action.next-slide': "Next slide";
|
|
751
|
-
readonly 'action.next': "Next";
|
|
752
|
-
readonly 'action.prev-slide': "Previous slide";
|
|
753
|
-
readonly 'action.prev': "Previous";
|
|
754
|
-
readonly 'action.rate': "Rate";
|
|
755
|
-
readonly 'action.retry': "Retry";
|
|
756
|
-
readonly 'action.select-all': "Select all";
|
|
757
|
-
readonly 'action.select': "Select";
|
|
758
|
-
readonly 'action.show-less': "Show less";
|
|
759
|
-
readonly 'action.show-more': "Show more";
|
|
760
|
-
readonly 'action.show': "Show";
|
|
761
|
-
readonly 'action.sort-asc': "Sort ascending";
|
|
762
|
-
readonly 'action.sort-cancel': "Discard sorting";
|
|
763
|
-
readonly 'action.sort-dsc': "Sort descending";
|
|
764
|
-
readonly 'action.resize-column': "Resize column";
|
|
765
|
-
readonly 'action.remove': "Remove";
|
|
766
|
-
readonly 'action.play': "Play";
|
|
767
|
-
readonly 'action.pause': "Pause";
|
|
768
|
-
readonly 'action.open-global-search': "Open global search";
|
|
769
|
-
readonly 'action.open-profile': "Open profile";
|
|
770
|
-
readonly 'action.open-notifications': "Open notifications";
|
|
771
|
-
readonly 'action.open-app-switcher': "Open app switcher";
|
|
772
|
-
readonly 'action.open-menu': "Open menu";
|
|
773
|
-
readonly 'action.open-filters': "Open filters";
|
|
774
|
-
readonly 'label.apps': "Apps";
|
|
775
|
-
readonly 'label.notifications': "Notifications";
|
|
776
|
-
readonly 'label.accounts': "Accounts";
|
|
777
|
-
readonly 'label.profile': "Profile";
|
|
778
|
-
readonly 'label.empty-state': "Nothing here";
|
|
779
|
-
readonly 'label.failed-state': "Something went wrong";
|
|
780
|
-
readonly 'label.fca-disclaimer': "Don’t invest unless you’re prepared to lose all the money you invest. This is a high-risk investment and you should not expect to be protected if something goes wrong.";
|
|
781
|
-
readonly 'label.more-dialog': "More";
|
|
782
|
-
readonly 'label.no-results-state': "No results found";
|
|
783
|
-
readonly 'label.pending-state': "Loading";
|
|
784
|
-
readonly 'label.search': "Search";
|
|
785
|
-
readonly 'label.min': "Minimum";
|
|
786
|
-
readonly 'label.max': "Maximum";
|
|
787
|
-
readonly 'label.global-search': "Global search";
|
|
788
|
-
readonly 'label.selected': "Selected";
|
|
789
|
-
readonly 'format.in-a-few-moments': "In a few moments";
|
|
790
|
-
readonly 'format.moments-ago': "Moments ago";
|
|
791
|
-
readonly 'label.range': "Range";
|
|
792
|
-
readonly 'label.price': "Price";
|
|
793
|
-
readonly 'label.sum': "Sum";
|
|
794
|
-
readonly 'label.no-open-orders': "No open orders";
|
|
795
|
-
readonly 'label.settings': "Settings";
|
|
796
|
-
readonly 'label.dark': "Dark";
|
|
797
|
-
readonly 'label.light': "Light";
|
|
798
|
-
readonly 'label.system': "System";
|
|
799
|
-
readonly 'label.controlled-by-mode': "Controlled by mode";
|
|
800
|
-
readonly 'label.mode': "Mode";
|
|
801
|
-
readonly 'label.background': "Background";
|
|
802
|
-
readonly 'label.resize': "Resize";
|
|
803
|
-
readonly 'label.navigation-style': "Navigation style";
|
|
804
|
-
readonly 'label.table-style': "Table style";
|
|
805
|
-
readonly 'label.zebra': "Zebra";
|
|
806
|
-
readonly 'label.plain': "Plain";
|
|
807
|
-
readonly 'label.icons-and-text': "Icons and text";
|
|
808
|
-
readonly 'label.icons-only': "Icons only";
|
|
809
|
-
readonly 'label.shortcuts': "Keyboard shortcuts";
|
|
810
|
-
readonly 'label.shortcut-centre': "Shortcut centre";
|
|
811
|
-
readonly 'label.general': "General";
|
|
812
|
-
readonly 'label.back': "Back";
|
|
813
|
-
readonly 'label.forward': "Forward";
|
|
814
|
-
readonly 'label.toggle-navigation': "Collapse/Expand navigation";
|
|
815
|
-
readonly 'label.menu-navigation': "Menu navigation";
|
|
816
|
-
readonly 'label.navigate-menu-item': "Navigate to menu item";
|
|
817
|
-
};
|
|
818
|
-
type IntlMessages = Record<keyof typeof DEFAULT_MESSAGES, string>;
|
|
819
|
-
|
|
820
|
-
declare const MoneyType: {
|
|
821
|
-
readonly MONEY: "money";
|
|
822
|
-
readonly MONEY_FRACTIONAL: "money-fractional";
|
|
823
|
-
};
|
|
824
|
-
type MoneyType = ValueOf<typeof MoneyType>;
|
|
825
|
-
|
|
826
1333
|
/**
|
|
827
1334
|
* Docs: {@link https://ui-kit.revolut.codes/design-system/radii Radius}
|
|
828
1335
|
*/
|
|
@@ -968,42 +1475,12 @@ declare const TextStyle: {
|
|
|
968
1475
|
};
|
|
969
1476
|
type TextStyle = ValueOf<typeof TextStyle>;
|
|
970
1477
|
|
|
971
|
-
declare const TooltipBehaviour: {
|
|
972
|
-
readonly ALWAYS: "always";
|
|
973
|
-
readonly AUTO: "auto";
|
|
974
|
-
readonly NEVER: "never";
|
|
975
|
-
};
|
|
976
|
-
type TooltipBehaviour = ValueOf<typeof TooltipBehaviour>;
|
|
977
|
-
|
|
978
|
-
interface LooseCurrencyDefinition {
|
|
979
|
-
code?: string;
|
|
980
|
-
symbol?: string;
|
|
981
|
-
fractionalPart: number;
|
|
982
|
-
crypto?: boolean;
|
|
983
|
-
}
|
|
984
|
-
type CurrencyDefinition = Required<Omit<LooseCurrencyDefinition, 'crypto'>> & Pick<LooseCurrencyDefinition, 'crypto'>;
|
|
985
|
-
interface LooseMoney {
|
|
986
|
-
amount: number;
|
|
987
|
-
currency?: string;
|
|
988
|
-
}
|
|
989
|
-
interface Money extends Required<LooseMoney> {
|
|
990
|
-
}
|
|
991
|
-
type MoneyRoundingModeFallback = 'ceil' | 'floor' | 'expand' | 'trunc' | 'halfCeil' | 'halfFloor' | 'halfExpand' | 'halfTrunc' | 'halfEven' | undefined;
|
|
992
|
-
type MoneyRoundingMode = 'roundingMode' extends keyof Intl.NumberFormatOptions ? Intl.NumberFormatOptions['roundingMode'] : MoneyRoundingModeFallback;
|
|
993
|
-
|
|
994
|
-
type ImageURL = string;
|
|
995
|
-
type ImageSet = Record<string, ImageURL | ImageURL[]>;
|
|
996
|
-
type ImageSetWithFallback = {
|
|
997
|
-
default: ImageURL;
|
|
998
|
-
} & ImageSet;
|
|
999
|
-
type ImageProp$1 = ImageURL | ImageSetWithFallback;
|
|
1000
|
-
|
|
1001
1478
|
type Elements = 'svg' | Exclude<keyof JSXCompat$1.IntrinsicElements, 'slot' | 'style' | 'script' | 'title' | 'head' | 'body' | 'meta' | 'link' | 'document' | 'object'>;
|
|
1002
1479
|
declare namespace JSXCompat$1 {
|
|
1003
|
-
interface IntrinsicElements extends
|
|
1480
|
+
interface IntrinsicElements extends React__default.JSX.IntrinsicElements, JSX.IntrinsicElements {
|
|
1004
1481
|
}
|
|
1005
1482
|
}
|
|
1006
|
-
type InferElement<E extends Elements> = JSXCompat$1.IntrinsicElements[E] extends
|
|
1483
|
+
type InferElement<E extends Elements> = JSXCompat$1.IntrinsicElements[E] extends React__default.DetailedHTMLProps<React__default.HTMLAttributes<infer T>, any> ? T extends Element ? T : any : any;
|
|
1007
1484
|
type ResponsiveValue<T> = null | T | {
|
|
1008
1485
|
[key in Breakpoint]?: T;
|
|
1009
1486
|
};
|
|
@@ -1016,14 +1493,28 @@ interface TestAttributes {
|
|
|
1016
1493
|
'data-testid'?: string;
|
|
1017
1494
|
}
|
|
1018
1495
|
type RefAttributesWithoutLegacyRef<T> = {
|
|
1019
|
-
key?:
|
|
1020
|
-
ref?:
|
|
1496
|
+
key?: React__default.Key | null | undefined;
|
|
1497
|
+
ref?: React__default.Ref<T> | undefined;
|
|
1021
1498
|
};
|
|
1022
1499
|
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1500
|
+
type ImageURL = string;
|
|
1501
|
+
type ImageSet = Record<string, ImageURL | ImageURL[]>;
|
|
1502
|
+
type ImageSetWithFallback = {
|
|
1503
|
+
default: ImageURL;
|
|
1504
|
+
} & ImageSet;
|
|
1505
|
+
type ImageProp$1 = ImageURL | ImageSetWithFallback;
|
|
1506
|
+
|
|
1507
|
+
type IconName = 'Accessibility' | 'AccountActions' | 'AccountRefused' | 'Activities' | 'AddContact' | 'AddProduct' | 'Ai' | 'AirplaneArrival' | 'AirplaneDeparture' | 'Airtel' | 'Alipay' | 'AllTime' | 'AmexPay|image' | 'AndroidFace' | 'Animals' | 'Anonymous' | 'ApplePay|image' | 'AppNotifications' | 'Apps' | 'Archive' | 'ArrowBackspace' | 'ArrowBulk' | 'ArrowBulkRequest' | 'ArrowCollapsed' | 'ArrowDown' | 'ArrowDowngrade' | 'ArrowDropdown' | 'ArrowExchange' | 'ArrowExpanded' | 'ArrowFastForward' | 'ArrowHookLeft' | 'ArrowHookRight' | 'ArrowHookUp' | 'ArrowMove' | 'ArrowNavigation' | 'ArrowPinLeft' | 'ArrowPinRight' | 'ArrowRates' | 'ArrowRatesDown' | 'ArrowRepeat' | 'ArrowRequest' | 'ArrowRightLeft' | 'ArrowSend' | 'ArrowShuffle' | 'ArrowSplit' | 'ArrowsSort' | 'ArrowTabKey' | 'ArrowThinDown' | 'ArrowThinDownLeft' | 'ArrowThinLeft' | 'ArrowThinRight' | 'ArrowThinTopRight' | 'ArrowThinUp' | 'ArrowTopDown' | 'ArrowUp' | 'ArrowUpgrade' | 'Atm' | 'AutoExchange' | 'AutoTopup' | 'AvatarGrid' | 'BackButtonArrow' | 'Backpack' | 'BalanceSheet' | 'Bank' | 'BankAfterHours' | 'BarChart' | 'BarChartDecreasing' | 'BarChartPercent' | 'BarChartSearch' | 'BarChartWaterfall' | 'Basketball' | 'Battery0' | 'Battery15' | 'Battery25' | 'Battery35' | 'Battery50' | 'Battery65' | 'Battery85' | 'Battery100' | 'BatteryCharging' | 'BatteryWarning' | 'Bell' | 'BellAdd' | 'BellAddOutline' | 'BellCrossed' | 'BellOutline' | 'Bicycle' | 'Binoculars' | 'Bitcoin' | 'Bizum' | 'BKash' | 'Blik' | 'BlikCircle' | 'Bluetooth' | 'Bnpl' | 'Boost' | 'BottomNavigation' | 'BottomTab' | 'Bpay' | 'BreB' | 'BreBFull' | 'BriefcaseCoins' | 'BriefcasePercent' | 'BrokenHeart' | 'Browser' | 'Bug' | 'BulkSelection' | 'Bullet1' | 'Bullet2' | 'Bullet3' | 'Bullet4' | 'Bullet5' | 'Bullet6' | 'Bullet7' | 'Bullet8' | 'Bullet9' | 'Bullet10' | 'BulletA' | 'BulletB' | 'BulletC' | 'BulletD' | 'BusinessBasic' | 'BusinessEnterprise' | 'BusinessGrow' | 'BusinessScale' | 'Cake' | 'Calculator' | 'Calendar' | 'CalendarCheck' | 'CalendarCoins' | 'CalendarDate' | 'CalendarNextEvent' | 'CalendarQuarter' | 'CalendarRecurring' | 'CalendarWeek' | 'Call' | 'Camera' | 'CameraAdd' | 'Candle' | 'CandlestickChart' | 'Captions' | 'CaptionsOn' | 'Card' | 'CardBank' | 'CardCheck' | 'CardCode|image' | 'CardExpired' | 'CardExpiry|image' | 'CardNumber|image' | 'CardReader' | 'CardSecurity' | 'CardShield' | 'CardTerminal' | 'Carousel' | 'Cart' | 'Cash' | 'Cashback' | 'CashBlocked' | 'CashFlow' | 'CashIncome' | 'Celebration' | 'Cellular' | 'CenterPoint' | 'Cfd' | 'Chair' | 'ChangePasscode' | 'ChartExclude' | 'Chat' | 'ChatOutline' | 'Check' | 'CheckboxMultiple' | 'CheckboxOff' | 'CheckboxOn' | 'CheckSuccess' | 'CheckVerification' | 'Cheque' | 'ChevronDown' | 'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'Children' | 'Cinema' | 'CircleProfile' | 'Claim' | 'Cleaning' | 'Click2Pay' | 'ClickUp|image' | 'Clip' | 'Clipboard' | 'Cloud' | 'CloudCrossed' | 'CloudSql' | 'CloudStorage' | 'CodeRepository' | 'Coffee' | 'Coins' | 'CoinsEarning' | 'CoinsSearch' | 'CoinsShield' | 'Commodities' | 'Communication' | 'CompanyFilled' | 'CompanyOutline' | 'Compare' | 'Concierge' | 'Confluence' | 'Contactless' | 'Contrast' | 'Controls' | 'Cookie' | 'Copy' | 'CormorantGaramond' | 'Credit' | 'CreditBag' | 'CreditCard' | 'CreditOverdraft' | 'CreditPart' | 'CreditPartBalance' | 'Cross' | 'CrossCircle' | 'CrossSmall' | 'CrossVoid' | 'Crutch' | 'CryptoBlockchain' | 'CryptoBrick' | 'CryptoLayer' | 'CryptoLayers' | 'CryptoStablecoin' | 'CrystalBall' | 'Dap' | 'Data' | 'Database' | 'DataLimit' | 'DataLimitCompactFull' | 'DataLimitCompactLow' | 'DataLimitCompactMid' | 'DataLimitFull' | 'DataLimitHalf' | 'DataLimitLow' | 'Delete' | 'DeliveryCar' | 'DepositProtection' | 'DesktopShop' | 'DesktopTerminal' | 'DeviceDown' | 'Document' | 'DocumentChecked' | 'DocumentPending' | 'DocumentRevolut' | 'DocumentSearch' | 'DocumentsPair' | 'DollarsAndShares' | 'Dot' | 'DoubleThumbs' | 'Download' | 'DoXGetY' | 'Drag' | 'Draw' | 'DrawFibonacciTime' | 'DrawHorizontalLine' | 'Drawing' | 'DrawParallelChannel' | 'DrawPriceRange' | 'DrawTrendline' | 'DrawVerticalLine' | 'DrivingLicence' | 'Drone' | 'Drop' | 'Duplicate' | 'EditorUnderline' | 'Ellipsis' | 'Emoji' | 'Entertainment' | 'Envelope' | 'EnvelopeSearch' | 'Eraser' | 'ESimInstallation' | 'ESimNoData' | 'ESimPreparation' | 'Excel' | 'ExclamationMark' | 'ExclamationMarkOutline' | 'ExclamationTriangle' | 'ExitFullscreen' | 'Expand' | 'EyeDropper' | 'EyeHide' | 'EyeOutline' | 'EyeShow' | 'FaceId' | 'FamilyPortrait' | 'Fashion' | 'Fastfood' | 'Fees' | 'Figma' | 'Filter' | 'Fingerprint' | 'Fitness' | 'Flag' | 'FlagSwitzerland' | 'Flame' | 'FloatingModal' | 'Folder' | 'Football' | 'Form' | 'Fruit' | 'Fscs' | 'GameCube' | 'Gear' | 'Generate' | 'Ghost' | 'Gia' | 'Gift' | 'Globe' | 'GlobeP2P' | 'GooglePay|image' | 'Groceries' | 'GroupVault' | 'GrowthHub' | 'Hammer' | 'Hand' | 'Handle' | 'Hash' | 'Heart' | 'HeartOutline' | 'HeartRecurring' | 'HelpChat' | 'HelpChatOutline' | 'HiBob' | 'History' | 'Home' | 'Hotel' | 'IdBackSide' | 'Ideal' | 'Image' | 'Inbox' | 'InboxAdd' | 'IndustrialGear' | 'Info' | 'InfoOutline' | 'InfoSign' | 'Insurance' | 'Invest' | 'InviteEmoji' | 'Iris' | 'Isa' | 'Issue' | 'JackOLantern' | 'Jira|image' | 'JiraBug|image' | 'JiraEpic|image' | 'JiraOther|image' | 'JiraStory|image' | 'JiraSubtask|image' | 'JiraTask|image' | 'Joint' | 'Karma|image' | 'Key' | 'Keyboard' | 'KubernetesEngine' | 'Lab' | 'Language' | 'Laptop' | 'Laugh' | 'LayoutLeft' | 'LayoutRight' | 'LayoutVertical' | 'Lever' | 'Library' | 'LibraryOff' | 'Lifestyle' | 'Lightbulb' | 'Lightning' | 'LightningAuto' | 'LightningOff' | 'LightningOutline' | 'LikeDislike' | 'Limit' | 'LineChart' | 'Link' | 'LinkExternal' | 'LinkExternalSimple' | 'ListClose' | 'ListSearch' | 'LiveActivity' | 'Loading' | 'LoanChecked' | 'LocationArrow' | 'LocationArrowOutline' | 'LocationPin' | 'LockClosed' | 'LockOpened' | 'Logo2Fa' | 'Logo5G' | 'LogoAirplus|image' | 'LogoAirplusColour|image' | 'LogoAmazon' | 'LogoAmex|image' | 'LogoAmexColour|image' | 'LogoAndroid' | 'LogoAppleTapToPay' | 'LogoAppleTapToPayFilled' | 'LogoChatGpt' | 'LogoClaude|image' | 'LogoDinersClub|image' | 'LogoDinersClubColour|image' | 'LogoDiscover|image' | 'LogoDiscoverColour|image' | 'LogoFacebook' | 'LogoFacebookMessenger' | 'LogoGithub' | 'LogoGoogle|image' | 'LogoGoogleGemini|image' | 'LogoInstagram' | 'LogoInstagramFilled' | 'LogoIOs' | 'LogoJcb|image' | 'LogoJcbColour|image' | 'LogoLinkedIn' | 'LogoMa|image' | 'LogoMc|image' | 'LogoMcMetal|image' | 'LogoMcPremium|image' | 'LogoMicrosoft|image' | 'LogoMicrosoftCopilot|image' | 'LogoPix|image' | 'LogoPixFilled' | 'LogoPixOutline' | 'LogoRevolut' | 'LogoRevolutColour|image' | 'LogoRupay' | 'LogoSlack' | 'LogoTikTok' | 'LogoTwitter' | 'LogoutDoor' | 'LogoVisa' | 'LogoVisaColour|image' | 'LogoWhatsApp' | 'LogoYahoo|image' | 'LogoYoutube' | 'Lounges' | 'Map' | 'MapMarkerHide' | 'MapMarkerShow' | 'MapPoint' | 'MarketOrder' | 'Materials' | 'MbWay' | 'MedicalBed' | 'MedicalCross' | 'Medkit' | 'Megaphone' | 'Meme' | 'MemoryStore' | 'Menu' | 'Merchant' | 'Merge' | 'MergeBranch' | 'Message' | 'Microphone' | 'Minus' | 'MinusCircle' | 'Moon' | 'MoreAndroid' | 'MoreIOs' | 'Mortgage' | 'Mpesa' | 'Mtn' | 'NationalId' | 'NavigationBack' | 'NavigationDown' | 'NavigationForward' | 'NavigationSwipe' | 'NavigationUp' | 'NearMe' | 'NewAccount' | 'Newspaper' | 'Nft' | 'NoBoost' | 'NoCall' | 'NoCamera' | 'NoClip' | 'NoMail' | 'NoMicrophone' | 'NoSmartphone' | 'NoVideoCall' | 'OrangeMoney' | 'OrderDownwards' | 'OrderUpwards' | 'Outdoor' | 'Overdraft' | 'Palette' | 'Paragraph' | 'Parisienne' | 'Parking' | 'Passkey' | 'Passport' | 'PassportChip' | 'Pause' | 'PayId' | 'PaymentsRecurring' | 'PayNow' | 'PayNowBrandMark' | 'PayrollFolder' | 'PayTo' | 'Peakon|image' | 'Pencil' | 'PencilSpark' | 'People' | 'Percent' | 'Performance' | 'PersonChecked' | 'PhoneBook' | 'PhoneCall' | 'Pickup' | 'PieChart' | 'PieChartCircle' | 'Pin' | 'PlanPlus' | 'PlanPremium' | 'PlanTitan' | 'PlanUltra' | 'Play' | 'PlayOutline' | 'Plug' | 'Plus' | 'PlusCircle' | 'PnL' | 'Pocket' | 'Pointer' | 'Pointsback' | 'Pool' | 'PortfolioAggrasive' | 'PortfolioAggressiveGrowth' | 'PortfolioBalanced' | 'PortfolioBalancedBundle' | 'PortfolioBoldStack' | 'PortfolioConservative' | 'PortfolioDefensive' | 'PortfolioGrowth' | 'PortfolioModerate' | 'PortfolioSlowAndSteady' | 'PosTablet' | 'Premium' | 'Present' | 'PresentPlus' | 'PriceTag' | 'Printer' | 'Profile' | 'Pse' | 'Push' | 'Puzzle' | 'Qr' | 'Question' | 'Questionnaire' | 'QuestionOutline' | 'QuestionSign' | 'RadiobuttonOff' | 'RadiobuttonOn' | 'Rainbow' | 'RatesCircle' | 'RatesConverter' | 'RatesConverterPage' | 'Receipt' | 'Recurring' | 'Refinancing' | 'RefinancingCard' | 'RefinancingHome' | 'RegionAfrica' | 'RegionAsiaPacific' | 'RegionEurope' | 'RegionGlobal' | 'RegionMiddleEast' | 'RegionNorthAmerica' | 'RegionSouthAmerica' | 'RepairTool' | 'Repayment' | 'ResidencePermit' | 'Resort' | 'Restaurants' | 'Retry' | 'Reverted' | 'RevertLeft' | 'RevertRight' | 'RevolutIdProtected' | 'RevolutIdUser' | 'RevolutU18' | 'RevPoints' | 'RoboAdvisor' | 'RobotoCondensed' | 'RobotoRegular' | 'Rocket' | 'RPoint' | 'RulerOutline' | 'RulerSolid' | 'Salary' | 'SavingsVault' | 'ScanCard' | 'ScanQr' | 'Scatter' | 'Scissors' | 'Search' | 'SecureSeal' | 'SelfieStick' | 'SendMessage' | 'SensitiveInfo' | 'Services' | 'ShakeDevice' | 'ShareAndroid' | 'ShareIOs' | 'Shield' | 'Shopping' | 'ShoppingShield' | 'Shower' | 'SidePanel' | 'SidePanelLeft' | 'SimCard' | 'Siren' | 'Size' | 'SmartDelay' | 'Smartphone' | 'SmartphoneBroken' | 'SmartphoneConfirm' | 'SmartphoneShield' | 'SmartphoneUmbrella' | 'SmartphoneWarning' | 'Smoking' | 'Snowflake' | 'SocialDislike' | 'SocialLike' | 'Sound' | 'SoundOff' | 'Spa' | 'Spin' | 'SportEquipment' | 'Stamp' | 'StarEmpty' | 'StarFilled' | 'StarSemi' | 'Statement' | 'Sticker' | 'StickerFilled' | 'Stop' | 'Suitcase' | 'SuitcaseInsurance' | 'Sun' | 'Sunrise' | 'SunriseOutline' | 'Surprise' | 'Swish' | 'Switches' | 'SwitchOff' | 'SwitchOn' | 'SwitchToRevolut' | 'SymbolChange' | 'Sympathizing' | 'Table' | 'Tablet' | 'Target' | 'TargetDarts' | 'Tech' | 'Television' | 'Text' | 'ThankYou' | 'Thread' | 'Time' | 'TimeAndMoney' | 'Timeline' | 'TimeOutline' | 'Tooth' | 'TotalValue' | 'Toy' | 'Transcript' | 'Translation' | 'Transport' | 'Travel' | 'TravelCashback' | 'Trophy' | 'TrophyHalf' | 'TurboTransfer' | 'Unarchive' | 'Unknown' | 'Unlimited' | 'Unlink' | 'Unmerge' | 'Unpin' | 'Upi' | 'Upi2' | 'Upload' | 'UsersSearch' | 'Utilities' | 'Variable' | 'Vault' | 'Vegan' | 'VerifiedService' | 'VerticalExpand' | 'ViaVerde' | 'VideoCall' | 'ViewGrid' | 'ViewListLarge' | 'ViewListMedium' | 'ViewListSmall' | 'VirtualMachine' | 'VisaDocument' | 'Voucher' | 'Wallet' | 'Watch' | 'Wealth' | 'WealthDown' | 'WealthProtection' | 'Webhook' | 'Wero' | 'WeroFull' | 'Wheelchair' | 'Widgets' | 'Wine' | 'WizardHat' | 'Workflow' | 'Yellowtail' | 'ZoomIn' | 'ZoomOut' | '10/BadgeLeft' | '10/BadgeRight' | '10/StocksArrowDown' | '10/StocksArrowUp' | '10/StocksDividend' | '10/StocksTax' | '10/StocksTopup' | '10/StocksWithdraw' | '16/AddProduct' | '16/AlignCenter' | '16/AlignLeft' | '16/AlignRight' | '16/ArrowRates' | '16/ArrowRecurring' | '16/ArrowRepeat' | '16/ArrowThinUp' | '16/BadgeLeft' | '16/BadgeRight' | '16/Bullet' | '16/BulletFilled' | '16/BulletSquare' | '16/BulletSquareFilled' | '16/Canceled' | '16/ChartBarWithArrow' | '16/Check' | '16/CheckCircle' | '16/ChevronDown' | '16/ChevronDownSmall' | '16/ChevronLeft' | '16/ChevronLeftSmall' | '16/ChevronRight' | '16/ChevronRightSmall' | '16/ChevronUp' | '16/ChevronUpSmall' | '16/Clip' | '16/Code' | '16/CommentAdd' | '16/Compare' | '16/Contactless' | '16/Cross' | '16/CrossCircle' | '16/CrossSmall' | '16/Delete' | '16/DepthChart' | '16/Dots' | '16/EditorBold' | '16/EditorH1' | '16/EditorH2' | '16/EditorH3' | '16/EditorH4' | '16/EditorH5' | '16/EditorH6' | '16/EditorItalic' | '16/EditorTable' | '16/EditorTableHeaderColumn' | '16/EditorTableHeaderRow' | '16/EditorTextColour' | '16/EditorUnderline' | '16/ExclamationMark' | '16/ExclamationMarkOutline' | '16/ExclamationMarkSign' | '16/Expand' | '16/FilterViewFilled' | '16/FilterViewOutlined' | '16/GoogleChrome' | '16/IndentDecrease' | '16/IndentIncrease' | '16/InfoOutline' | '16/Link' | '16/LinkExternal' | '16/List' | '16/ListBullet' | '16/ListLetters' | '16/ListNumber' | '16/ListRomanNumerals' | '16/Live' | '16/LockClosed' | '16/LockOpened' | '16/LockOutline' | '16/MarkdownDownload' | '16/Minus' | '16/MinusCircle' | '16/Palette' | '16/Paragraph' | '16/Plus' | '16/PlusCircle' | '16/QuestionOutline' | '16/Receipt' | '16/Redo' | '16/Revolut' | '16/RevPoints' | '16/SandWatch' | '16/SecureSeal' | '16/SimCard' | '16/StatusActive' | '16/StatusCheck' | '16/StatusClockArrows' | '16/StatusRefund' | '16/Sticker' | '16/StickerFilled' | '16/SwitchOff' | '16/SwitchOn' | '16/Time' | '16/Timeline' | '16/TopupAuto' | '16/TriangleDown' | '16/TriangleRight' | '16/Warning' | '16/Write' | '20/AccountJoint' | '20/AccountPocket' | '20/AccountPro' | '20/AutoExchange' | '20/AutoTopUp' | '20/BulkPayment' | '20/Cashback' | '20/Compare' | '20/Credit' | '20/CryptoNetworkAlgorand' | '20/CryptoNetworkArbitrum' | '20/CryptoNetworkAvalanche' | '20/CryptoNetworkBitcoin' | '20/CryptoNetworkBitcoinCash' | '20/CryptoNetworkBsc' | '20/CryptoNetworkCardano' | '20/CryptoNetworkCelo' | '20/CryptoNetworkCosmos' | '20/CryptoNetworkCronos' | '20/CryptoNetworkDash' | '20/CryptoNetworkDogecoin' | '20/CryptoNetworkEos' | '20/CryptoNetworkEtc' | '20/CryptoNetworkEthereum' | '20/CryptoNetworkFallback' | '20/CryptoNetworkFantom' | '20/CryptoNetworkHarmony' | '20/CryptoNetworkHeco' | '20/CryptoNetworkHedera' | '20/CryptoNetworkKava' | '20/CryptoNetworkKusama' | '20/CryptoNetworkLighting' | '20/CryptoNetworkLitecoin' | '20/CryptoNetworkMoonbeam' | '20/CryptoNetworkNear' | '20/CryptoNetworkOptimism' | '20/CryptoNetworkPolkadot' | '20/CryptoNetworkPolygon' | '20/CryptoNetworkRipple' | '20/CryptoNetworkRonin' | '20/CryptoNetworkSolana' | '20/CryptoNetworkStarkNet' | '20/CryptoNetworkStellar' | '20/CryptoNetworkTezos' | '20/CryptoNetworkTon' | '20/CryptoNetworkTron' | '20/CryptoNetworkZkSync' | '20/Description' | '20/Dividend' | '20/Draft' | '20/Ea' | '20/Email' | '20/ExcludedAnalytics' | '20/Expense' | '20/Gif' | '20/Groups' | '20/Heart' | '20/IncomeSorter' | '20/Isa' | '20/Iso' | '20/KeyboardEmoji' | '20/KeyboardGif' | '20/KeyboardSticker' | '20/Linked' | '20/MoveMoney' | '20/Reccuring' | '20/Resort' | '20/Rewards' | '20/Scheduled' | '20/SpareChange' | '20/SpendLimit' | '20/SplitBill' | '20/Statement' | '20/Travel' | '20/Vault' | '40/SubtractApps' | '40/SubtractBackpack' | '40/SubtractBank' | '40/SubtractBitcoin' | '40/SubtractBoost' | '40/SubtractBudget' | '40/SubtractCalendar' | '40/SubtractCalendarRecurring' | '40/SubtractCard' | '40/SubtractCash' | '40/SubtractCashback' | '40/SubtractChat' | '40/SubtractCloud' | '40/SubtractCoins' | '40/SubtractCommodities' | '40/SubtractCompare' | '40/SubtractConcierge' | '40/SubtractCredit' | '40/SubtractCreditBag' | '40/SubtractCreditCard' | '40/SubtractDocument' | '40/SubtractDrop' | '40/SubtractEntertainment' | '40/SubtractExchange' | '40/SubtractFastfood' | '40/SubtractGift' | '40/SubtractGlobe' | '40/SubtractGlobeP2P' | '40/SubtractGroceries' | '40/SubtractGroupVault' | '40/SubtractHealth' | '40/SubtractIndustrialGear' | '40/SubtractInsurance' | '40/SubtractLightning' | '40/SubtractLink' | '40/SubtractLogoRevolut' | '40/SubtractLounges' | '40/SubtractMaterials' | '40/SubtractMedicalCross' | '40/SubtractMerchant' | '40/SubtractNoBoost' | '40/SubtractPassportChip' | '40/SubtractPeople' | '40/SubtractPocket' | '40/SubtractPremium' | '40/SubtractPresent' | '40/SubtractProfile' | '40/SubtractRestaurants' | '40/SubtractRocket' | '40/SubtractRPoint' | '40/SubtractSavingsVault' | '40/SubtractServices' | '40/SubtractShopping' | '40/SubtractSmartphoneUmbrella' | '40/SubtractStar' | '40/SubtractStatement' | '40/SubtractTech' | '40/SubtractTopUp' | '40/SubtractToy' | '40/SubtractTransfers' | '40/SubtractTransport' | '40/SubtractTravel' | '40/SubtractUtilities' | '40/SubtractVault' | '40/SubtractVegan' | '40/SubtractWealth' | '64/FileBacs|image' | '64/FileCsv|image' | '64/FileDoc|image' | '64/FileImg|image' | '64/FileLink|image' | '64/FilePdf|image' | '64/FileXls|image' | '104/Connection' | '104/Donation' | '104/Error' | '104/Loading' | '104/Pending' | '104/SoftFail' | '104/Success' | '104/Warning' | '108/ArrowExchange|image' | '108/ArrowRequest|image' | '108/ArrowSend|image' | '108/EyeShow|image' | '108/LinkExternal|image' | '108/Plus|image';
|
|
1508
|
+
|
|
1509
|
+
declare const ImageVariant: {
|
|
1510
|
+
readonly ROUND: "round";
|
|
1511
|
+
};
|
|
1512
|
+
type ImageVariant = ValueOf<typeof ImageVariant>;
|
|
1513
|
+
declare const ImageScale: {
|
|
1514
|
+
readonly COVER: "cover";
|
|
1515
|
+
readonly CONTAIN: "contain";
|
|
1516
|
+
};
|
|
1517
|
+
type ImageScale = ValueOf<typeof ImageScale>;
|
|
1027
1518
|
|
|
1028
1519
|
interface GapSystemProps {
|
|
1029
1520
|
gap?: ResponsiveValue<LooseLength<Space$1>>;
|
|
@@ -1031,20 +1522,6 @@ interface GapSystemProps {
|
|
|
1031
1522
|
columnGap?: ResponsiveValue<LooseLength<Space$1>>;
|
|
1032
1523
|
}
|
|
1033
1524
|
|
|
1034
|
-
interface HideProps {
|
|
1035
|
-
/** @deprecated Prefer `useMatchMedia` or CSS media queries */
|
|
1036
|
-
hide?: boolean | string | string[];
|
|
1037
|
-
}
|
|
1038
|
-
|
|
1039
|
-
interface OverflowSystemProps {
|
|
1040
|
-
overflow?: ResponsiveValue<csstype.Property.Overflow>;
|
|
1041
|
-
}
|
|
1042
|
-
|
|
1043
|
-
/** @private */
|
|
1044
|
-
interface PlaceSelfProps {
|
|
1045
|
-
placeSelf?: ResponsiveValue<csstype.Property.PlaceSelf>;
|
|
1046
|
-
}
|
|
1047
|
-
|
|
1048
1525
|
interface DisplayProps {
|
|
1049
1526
|
display?: ResponsiveValue<csstype.Property.Display>;
|
|
1050
1527
|
}
|
|
@@ -1135,6 +1612,27 @@ interface FlexDirectionProps {
|
|
|
1135
1612
|
flexDirection?: ResponsiveValue<csstype.Property.FlexDirection>;
|
|
1136
1613
|
}
|
|
1137
1614
|
|
|
1615
|
+
type Modify<T, R> = Omit<T, keyof R> & R;
|
|
1616
|
+
|
|
1617
|
+
interface ElevationProps {
|
|
1618
|
+
elevation?: ElevationLevel;
|
|
1619
|
+
elevationOnHover?: ElevationLevel;
|
|
1620
|
+
}
|
|
1621
|
+
|
|
1622
|
+
interface HideProps {
|
|
1623
|
+
/** @deprecated Prefer `useMatchMedia` or CSS media queries */
|
|
1624
|
+
hide?: boolean | string | string[];
|
|
1625
|
+
}
|
|
1626
|
+
|
|
1627
|
+
interface OverflowSystemProps {
|
|
1628
|
+
overflow?: ResponsiveValue<csstype.Property.Overflow>;
|
|
1629
|
+
}
|
|
1630
|
+
|
|
1631
|
+
/** @private */
|
|
1632
|
+
interface PlaceSelfProps {
|
|
1633
|
+
placeSelf?: ResponsiveValue<csstype.Property.PlaceSelf>;
|
|
1634
|
+
}
|
|
1635
|
+
|
|
1138
1636
|
interface RadiusProps {
|
|
1139
1637
|
radius?: ResponsiveValue<Radius | (string & {}) | number>;
|
|
1140
1638
|
}
|
|
@@ -1174,34 +1672,20 @@ interface TextStyleProps {
|
|
|
1174
1672
|
textStyle?: ResponsiveValue<TextStyle>;
|
|
1175
1673
|
}
|
|
1176
1674
|
|
|
1177
|
-
/**
|
|
1178
|
-
* Copy text to clipboard using native [Clipboard API](http://developer.mozilla.org/en-US/docs/Web/API/Clipboard) with [fallback](https://gist.github.com/lgarron/d1dee380f4ed9d825ca7) for older browsers
|
|
1179
|
-
*
|
|
1180
|
-
* Docs: {@link https://ui-kit.revolut.codes/utils/copy-to-clipboard copyToClipboard}
|
|
1181
|
-
*/
|
|
1182
|
-
declare const copyToClipboard: (input: string, doc?: Document) => Promise<void>;
|
|
1183
|
-
|
|
1184
|
-
type Modify<T, R> = Omit<T, keyof R> & R;
|
|
1185
|
-
|
|
1186
|
-
/**
|
|
1187
|
-
* Docs: {@link https://ui-kit.revolut.codes/utils/node-chain nodeChain}
|
|
1188
|
-
*/
|
|
1189
|
-
declare const nodeChain: (...parts: React.ReactNode[]) => react_jsx_runtime.JSX.Element;
|
|
1190
|
-
|
|
1191
1675
|
declare const BLACKLIST: readonly ["bg", "color", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "size", "verticalAlign", "display", "overflow", "overflowX", "overflowY", "opacity", "fontSize", "fontFamily", "fontWeight", "lineHeight", "textAlign", "fontStyle", "letterSpacing", "alignItems", "alignContent", "justifyItems", "justifyContent", "flexWrap", "flexDirection", "flex", "flexGrow", "flexShrink", "flexBasis", "justifySelf", "alignSelf", "order", "gridGap", "gridColumnGap", "gridRowGap", "gridColumn", "gridRow", "gridAutoFlow", "gridAutoColumns", "gridAutoRows", "gridTemplateColumns", "gridTemplateRows", "gridTemplateAreas", "gridArea", "borderWidth", "borderStyle", "borderColor", "borderTop", "borderRight", "borderBottom", "borderLeft", "borderRadius", "backgroundImage", "backgroundSize", "backgroundPosition", "backgroundRepeat", "zIndex", "top", "right", "bottom", "left", "elevated", "elevation", "elevationOnHover", "elevationColor", "hide", "radius", "variant", "textStyle", "textDecoration", "tapArea", "notAvailable", "locked", "iconOnly", "active"];
|
|
1192
1676
|
|
|
1193
1677
|
type BaseDOMAttributes<E extends Element> = Omit<Modify<{
|
|
1194
1678
|
to?: string;
|
|
1195
|
-
} & Pick<
|
|
1679
|
+
} & Pick<React__default__default.SVGAttributes<any>,
|
|
1196
1680
|
/** @see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg */
|
|
1197
|
-
'width' | 'height' | 'viewBox' | 'preserveAspectRatio'>, Omit<
|
|
1681
|
+
'width' | 'height' | 'viewBox' | 'preserveAspectRatio'>, Omit<React__default__default.AllHTMLAttributes<E>, 'css'>>, 'as' | 'data' | (typeof BLACKLIST)[number]>;
|
|
1198
1682
|
interface DOMAttributes<E extends Element> extends BaseDOMAttributes<E>, TestAttributes {
|
|
1199
1683
|
}
|
|
1200
1684
|
|
|
1201
1685
|
interface BaseInnerProps<T> {
|
|
1202
1686
|
use?: T;
|
|
1203
1687
|
}
|
|
1204
|
-
interface BaseProps<E extends Elements> extends DOMAttributes<InferElement<E>>, RefAttributesWithoutLegacyRef<InferElement<E>>, BaseInnerProps<E | Elements |
|
|
1688
|
+
interface BaseProps<E extends Elements> extends DOMAttributes<InferElement<E>>, RefAttributesWithoutLegacyRef<InferElement<E>>, BaseInnerProps<E | Elements | React__default__default.ComponentType<any>> {
|
|
1205
1689
|
}
|
|
1206
1690
|
|
|
1207
1691
|
interface BoxProps<E extends Elements = 'div'> extends BoxInnerProps, BaseProps<E> {
|
|
@@ -1211,28 +1695,50 @@ interface BoxInnerProps extends SpaceProps, ColorProps, WidthProps, FlexProps$1,
|
|
|
1211
1695
|
variant?: ResponsiveValue<string>;
|
|
1212
1696
|
}
|
|
1213
1697
|
|
|
1214
|
-
type IconName = 'Accessibility' | 'AccountActions' | 'AccountRefused' | 'Activities' | 'AddContact' | 'AddProduct' | 'Ai' | 'AirplaneArrival' | 'AirplaneDeparture' | 'Airtel' | 'Alipay' | 'AllTime' | 'AmexPay|image' | 'AndroidFace' | 'Animals' | 'Anonymous' | 'ApplePay|image' | 'AppNotifications' | 'Apps' | 'Archive' | 'ArrowBackspace' | 'ArrowBulk' | 'ArrowBulkRequest' | 'ArrowCollapsed' | 'ArrowDown' | 'ArrowDowngrade' | 'ArrowDropdown' | 'ArrowExchange' | 'ArrowExpanded' | 'ArrowFastForward' | 'ArrowHookLeft' | 'ArrowHookRight' | 'ArrowHookUp' | 'ArrowMove' | 'ArrowNavigation' | 'ArrowPinLeft' | 'ArrowPinRight' | 'ArrowRates' | 'ArrowRatesDown' | 'ArrowRepeat' | 'ArrowRequest' | 'ArrowRightLeft' | 'ArrowSend' | 'ArrowShuffle' | 'ArrowSplit' | 'ArrowsSort' | 'ArrowTabKey' | 'ArrowThinDown' | 'ArrowThinDownLeft' | 'ArrowThinLeft' | 'ArrowThinRight' | 'ArrowThinTopRight' | 'ArrowThinUp' | 'ArrowTopDown' | 'ArrowUp' | 'ArrowUpgrade' | 'Atm' | 'AutoExchange' | 'AutoTopup' | 'AvatarGrid' | 'BackButtonArrow' | 'Backpack' | 'BalanceSheet' | 'Bank' | 'BankAfterHours' | 'BarChart' | 'BarChartDecreasing' | 'BarChartPercent' | 'BarChartSearch' | 'BarChartWaterfall' | 'Basketball' | 'Battery0' | 'Battery15' | 'Battery25' | 'Battery35' | 'Battery50' | 'Battery65' | 'Battery85' | 'Battery100' | 'BatteryCharging' | 'BatteryWarning' | 'Bell' | 'BellAdd' | 'BellAddOutline' | 'BellCrossed' | 'BellOutline' | 'Bicycle' | 'Binoculars' | 'Bitcoin' | 'Bizum' | 'BKash' | 'Blik' | 'BlikCircle' | 'Bluetooth' | 'Bnpl' | 'Boost' | 'BottomNavigation' | 'BottomTab' | 'Bpay' | 'BreB' | 'BreBFull' | 'BriefcaseCoins' | 'BriefcasePercent' | 'BrokenHeart' | 'Browser' | 'Bug' | 'BulkSelection' | 'Bullet1' | 'Bullet2' | 'Bullet3' | 'Bullet4' | 'Bullet5' | 'Bullet6' | 'Bullet7' | 'Bullet8' | 'Bullet9' | 'Bullet10' | 'BulletA' | 'BulletB' | 'BulletC' | 'BulletD' | 'BusinessBasic' | 'BusinessEnterprise' | 'BusinessGrow' | 'BusinessScale' | 'Cake' | 'Calculator' | 'Calendar' | 'CalendarCheck' | 'CalendarCoins' | 'CalendarDate' | 'CalendarNextEvent' | 'CalendarQuarter' | 'CalendarRecurring' | 'CalendarWeek' | 'Call' | 'Camera' | 'CameraAdd' | 'Candle' | 'CandlestickChart' | 'Captions' | 'CaptionsOn' | 'Card' | 'CardBank' | 'CardCheck' | 'CardCode|image' | 'CardExpired' | 'CardExpiry|image' | 'CardNumber|image' | 'CardReader' | 'CardSecurity' | 'CardShield' | 'CardTerminal' | 'Carousel' | 'Cart' | 'Cash' | 'Cashback' | 'CashBlocked' | 'CashFlow' | 'CashIncome' | 'Celebration' | 'Cellular' | 'CenterPoint' | 'Cfd' | 'Chair' | 'ChangePasscode' | 'ChartExclude' | 'Chat' | 'ChatOutline' | 'Check' | 'CheckboxMultiple' | 'CheckboxOff' | 'CheckboxOn' | 'CheckSuccess' | 'CheckVerification' | 'Cheque' | 'ChevronDown' | 'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'Children' | 'Cinema' | 'CircleProfile' | 'Claim' | 'Cleaning' | 'Click2Pay' | 'ClickUp|image' | 'Clip' | 'Clipboard' | 'Cloud' | 'CloudCrossed' | 'CloudSql' | 'CloudStorage' | 'CodeRepository' | 'Coffee' | 'Coins' | 'CoinsEarning' | 'CoinsSearch' | 'CoinsShield' | 'Commodities' | 'Communication' | 'CompanyFilled' | 'CompanyOutline' | 'Compare' | 'Concierge' | 'Confluence' | 'Contactless' | 'Contrast' | 'Controls' | 'Cookie' | 'Copy' | 'CormorantGaramond' | 'Credit' | 'CreditBag' | 'CreditCard' | 'CreditOverdraft' | 'CreditPart' | 'CreditPartBalance' | 'Cross' | 'CrossCircle' | 'CrossSmall' | 'CrossVoid' | 'Crutch' | 'CryptoBlockchain' | 'CryptoBrick' | 'CryptoLayer' | 'CryptoLayers' | 'CryptoStablecoin' | 'CrystalBall' | 'Dap' | 'Data' | 'Database' | 'DataLimit' | 'DataLimitCompactFull' | 'DataLimitCompactLow' | 'DataLimitCompactMid' | 'DataLimitFull' | 'DataLimitHalf' | 'DataLimitLow' | 'Delete' | 'DeliveryCar' | 'DepositProtection' | 'DesktopShop' | 'DesktopTerminal' | 'DeviceDown' | 'Document' | 'DocumentChecked' | 'DocumentPending' | 'DocumentRevolut' | 'DocumentSearch' | 'DocumentsPair' | 'DollarsAndShares' | 'Dot' | 'DoubleThumbs' | 'Download' | 'DoXGetY' | 'Drag' | 'Draw' | 'DrawFibonacciTime' | 'DrawHorizontalLine' | 'Drawing' | 'DrawParallelChannel' | 'DrawPriceRange' | 'DrawTrendline' | 'DrawVerticalLine' | 'DrivingLicence' | 'Drone' | 'Drop' | 'Duplicate' | 'EditorUnderline' | 'Ellipsis' | 'Emoji' | 'Entertainment' | 'Envelope' | 'EnvelopeSearch' | 'Eraser' | 'ESimInstallation' | 'ESimNoData' | 'ESimPreparation' | 'Excel' | 'ExclamationMark' | 'ExclamationMarkOutline' | 'ExclamationTriangle' | 'ExitFullscreen' | 'Expand' | 'EyeDropper' | 'EyeHide' | 'EyeOutline' | 'EyeShow' | 'FaceId' | 'FamilyPortrait' | 'Fashion' | 'Fastfood' | 'Fees' | 'Figma' | 'Filter' | 'Fingerprint' | 'Fitness' | 'Flag' | 'FlagSwitzerland' | 'Flame' | 'FloatingModal' | 'Folder' | 'Football' | 'Form' | 'Fruit' | 'Fscs' | 'GameCube' | 'Gear' | 'Generate' | 'Ghost' | 'Gia' | 'Gift' | 'Globe' | 'GlobeP2P' | 'GooglePay|image' | 'Groceries' | 'GroupVault' | 'GrowthHub' | 'Hammer' | 'Hand' | 'Handle' | 'Hash' | 'Heart' | 'HeartOutline' | 'HeartRecurring' | 'HelpChat' | 'HelpChatOutline' | 'HiBob' | 'History' | 'Home' | 'Hotel' | 'IdBackSide' | 'Ideal' | 'Image' | 'Inbox' | 'InboxAdd' | 'IndustrialGear' | 'Info' | 'InfoOutline' | 'InfoSign' | 'Insurance' | 'Invest' | 'InviteEmoji' | 'Iris' | 'Isa' | 'Issue' | 'JackOLantern' | 'Jira|image' | 'JiraBug|image' | 'JiraEpic|image' | 'JiraOther|image' | 'JiraStory|image' | 'JiraSubtask|image' | 'JiraTask|image' | 'Joint' | 'Karma|image' | 'Key' | 'Keyboard' | 'KubernetesEngine' | 'Lab' | 'Language' | 'Laptop' | 'Laugh' | 'LayoutLeft' | 'LayoutRight' | 'LayoutVertical' | 'Lever' | 'Library' | 'LibraryOff' | 'Lifestyle' | 'Lightbulb' | 'Lightning' | 'LightningAuto' | 'LightningOff' | 'LightningOutline' | 'LikeDislike' | 'Limit' | 'LineChart' | 'Link' | 'LinkExternal' | 'LinkExternalSimple' | 'ListClose' | 'ListSearch' | 'LiveActivity' | 'Loading' | 'LoanChecked' | 'LocationArrow' | 'LocationArrowOutline' | 'LocationPin' | 'LockClosed' | 'LockOpened' | 'Logo2Fa' | 'Logo5G' | 'LogoAirplus|image' | 'LogoAirplusColour|image' | 'LogoAmazon' | 'LogoAmex|image' | 'LogoAmexColour|image' | 'LogoAndroid' | 'LogoAppleTapToPay' | 'LogoAppleTapToPayFilled' | 'LogoChatGpt' | 'LogoClaude|image' | 'LogoDinersClub|image' | 'LogoDinersClubColour|image' | 'LogoDiscover|image' | 'LogoDiscoverColour|image' | 'LogoFacebook' | 'LogoFacebookMessenger' | 'LogoGithub' | 'LogoGoogle|image' | 'LogoGoogleGemini|image' | 'LogoInstagram' | 'LogoInstagramFilled' | 'LogoIOs' | 'LogoJcb|image' | 'LogoJcbColour|image' | 'LogoLinkedIn' | 'LogoMa|image' | 'LogoMc|image' | 'LogoMcMetal|image' | 'LogoMcPremium|image' | 'LogoMicrosoft|image' | 'LogoMicrosoftCopilot|image' | 'LogoPix|image' | 'LogoPixFilled' | 'LogoPixOutline' | 'LogoRevolut' | 'LogoRevolutColour|image' | 'LogoRupay' | 'LogoSlack' | 'LogoTikTok' | 'LogoTwitter' | 'LogoutDoor' | 'LogoVisa' | 'LogoVisaColour|image' | 'LogoWhatsApp' | 'LogoYahoo|image' | 'LogoYoutube' | 'Lounges' | 'Map' | 'MapMarkerHide' | 'MapMarkerShow' | 'MapPoint' | 'MarketOrder' | 'Materials' | 'MbWay' | 'MedicalBed' | 'MedicalCross' | 'Medkit' | 'Megaphone' | 'Meme' | 'MemoryStore' | 'Menu' | 'Merchant' | 'Merge' | 'MergeBranch' | 'Message' | 'Microphone' | 'Minus' | 'MinusCircle' | 'Moon' | 'MoreAndroid' | 'MoreIOs' | 'Mortgage' | 'Mpesa' | 'Mtn' | 'NationalId' | 'NavigationBack' | 'NavigationDown' | 'NavigationForward' | 'NavigationSwipe' | 'NavigationUp' | 'NearMe' | 'NewAccount' | 'Newspaper' | 'Nft' | 'NoBoost' | 'NoCall' | 'NoCamera' | 'NoClip' | 'NoMail' | 'NoMicrophone' | 'NoSmartphone' | 'NoVideoCall' | 'OrangeMoney' | 'OrderDownwards' | 'OrderUpwards' | 'Outdoor' | 'Overdraft' | 'Palette' | 'Paragraph' | 'Parisienne' | 'Parking' | 'Passkey' | 'Passport' | 'PassportChip' | 'Pause' | 'PayId' | 'PaymentsRecurring' | 'PayNow' | 'PayNowBrandMark' | 'PayrollFolder' | 'PayTo' | 'Peakon|image' | 'Pencil' | 'PencilSpark' | 'People' | 'Percent' | 'Performance' | 'PersonChecked' | 'PhoneBook' | 'PhoneCall' | 'Pickup' | 'PieChart' | 'PieChartCircle' | 'Pin' | 'PlanPlus' | 'PlanPremium' | 'PlanTitan' | 'PlanUltra' | 'Play' | 'PlayOutline' | 'Plug' | 'Plus' | 'PlusCircle' | 'PnL' | 'Pocket' | 'Pointer' | 'Pointsback' | 'Pool' | 'PortfolioAggrasive' | 'PortfolioAggressiveGrowth' | 'PortfolioBalanced' | 'PortfolioBalancedBundle' | 'PortfolioBoldStack' | 'PortfolioConservative' | 'PortfolioDefensive' | 'PortfolioGrowth' | 'PortfolioModerate' | 'PortfolioSlowAndSteady' | 'PosTablet' | 'Premium' | 'Present' | 'PresentPlus' | 'PriceTag' | 'Printer' | 'Profile' | 'Pse' | 'Push' | 'Puzzle' | 'Qr' | 'Question' | 'Questionnaire' | 'QuestionOutline' | 'QuestionSign' | 'RadiobuttonOff' | 'RadiobuttonOn' | 'Rainbow' | 'RatesCircle' | 'RatesConverter' | 'RatesConverterPage' | 'Receipt' | 'Recurring' | 'Refinancing' | 'RefinancingCard' | 'RefinancingHome' | 'RegionAfrica' | 'RegionAsiaPacific' | 'RegionEurope' | 'RegionGlobal' | 'RegionMiddleEast' | 'RegionNorthAmerica' | 'RegionSouthAmerica' | 'RepairTool' | 'Repayment' | 'ResidencePermit' | 'Resort' | 'Restaurants' | 'Retry' | 'Reverted' | 'RevertLeft' | 'RevertRight' | 'RevolutIdProtected' | 'RevolutIdUser' | 'RevolutU18' | 'RevPoints' | 'RoboAdvisor' | 'RobotoCondensed' | 'RobotoRegular' | 'Rocket' | 'RPoint' | 'RulerOutline' | 'RulerSolid' | 'Salary' | 'SavingsVault' | 'ScanCard' | 'ScanQr' | 'Scatter' | 'Scissors' | 'Search' | 'SecureSeal' | 'SelfieStick' | 'SendMessage' | 'SensitiveInfo' | 'Services' | 'ShakeDevice' | 'ShareAndroid' | 'ShareIOs' | 'Shield' | 'Shopping' | 'ShoppingShield' | 'Shower' | 'SidePanel' | 'SidePanelLeft' | 'SimCard' | 'Siren' | 'Size' | 'SmartDelay' | 'Smartphone' | 'SmartphoneBroken' | 'SmartphoneConfirm' | 'SmartphoneShield' | 'SmartphoneUmbrella' | 'SmartphoneWarning' | 'Smoking' | 'Snowflake' | 'SocialDislike' | 'SocialLike' | 'Sound' | 'SoundOff' | 'Spa' | 'Spin' | 'SportEquipment' | 'Stamp' | 'StarEmpty' | 'StarFilled' | 'StarSemi' | 'Statement' | 'Sticker' | 'StickerFilled' | 'Stop' | 'Suitcase' | 'SuitcaseInsurance' | 'Sun' | 'Sunrise' | 'SunriseOutline' | 'Surprise' | 'Swish' | 'Switches' | 'SwitchOff' | 'SwitchOn' | 'SwitchToRevolut' | 'SymbolChange' | 'Sympathizing' | 'Table' | 'Tablet' | 'Target' | 'TargetDarts' | 'Tech' | 'Television' | 'Text' | 'ThankYou' | 'Thread' | 'Time' | 'TimeAndMoney' | 'Timeline' | 'TimeOutline' | 'Tooth' | 'TotalValue' | 'Toy' | 'Transcript' | 'Translation' | 'Transport' | 'Travel' | 'TravelCashback' | 'Trophy' | 'TrophyHalf' | 'TurboTransfer' | 'Unarchive' | 'Unknown' | 'Unlimited' | 'Unlink' | 'Unmerge' | 'Unpin' | 'Upi' | 'Upi2' | 'Upload' | 'UsersSearch' | 'Utilities' | 'Variable' | 'Vault' | 'Vegan' | 'VerifiedService' | 'VerticalExpand' | 'ViaVerde' | 'VideoCall' | 'ViewGrid' | 'ViewListLarge' | 'ViewListMedium' | 'ViewListSmall' | 'VirtualMachine' | 'VisaDocument' | 'Voucher' | 'Wallet' | 'Watch' | 'Wealth' | 'WealthDown' | 'WealthProtection' | 'Webhook' | 'Wero' | 'WeroFull' | 'Wheelchair' | 'Widgets' | 'Wine' | 'WizardHat' | 'Workflow' | 'Yellowtail' | 'ZoomIn' | 'ZoomOut' | '10/BadgeLeft' | '10/BadgeRight' | '10/StocksArrowDown' | '10/StocksArrowUp' | '10/StocksDividend' | '10/StocksTax' | '10/StocksTopup' | '10/StocksWithdraw' | '16/AddProduct' | '16/AlignCenter' | '16/AlignLeft' | '16/AlignRight' | '16/ArrowRates' | '16/ArrowRecurring' | '16/ArrowRepeat' | '16/ArrowThinUp' | '16/BadgeLeft' | '16/BadgeRight' | '16/Bullet' | '16/BulletFilled' | '16/BulletSquare' | '16/BulletSquareFilled' | '16/Canceled' | '16/ChartBarWithArrow' | '16/Check' | '16/CheckCircle' | '16/ChevronDown' | '16/ChevronDownSmall' | '16/ChevronLeft' | '16/ChevronLeftSmall' | '16/ChevronRight' | '16/ChevronRightSmall' | '16/ChevronUp' | '16/ChevronUpSmall' | '16/Clip' | '16/Code' | '16/CommentAdd' | '16/Compare' | '16/Contactless' | '16/Cross' | '16/CrossCircle' | '16/CrossSmall' | '16/Delete' | '16/DepthChart' | '16/Dots' | '16/EditorBold' | '16/EditorH1' | '16/EditorH2' | '16/EditorH3' | '16/EditorH4' | '16/EditorH5' | '16/EditorH6' | '16/EditorItalic' | '16/EditorTable' | '16/EditorTableHeaderColumn' | '16/EditorTableHeaderRow' | '16/EditorTextColour' | '16/EditorUnderline' | '16/ExclamationMark' | '16/ExclamationMarkOutline' | '16/ExclamationMarkSign' | '16/Expand' | '16/FilterViewFilled' | '16/FilterViewOutlined' | '16/GoogleChrome' | '16/IndentDecrease' | '16/IndentIncrease' | '16/InfoOutline' | '16/Link' | '16/LinkExternal' | '16/List' | '16/ListBullet' | '16/ListLetters' | '16/ListNumber' | '16/ListRomanNumerals' | '16/Live' | '16/LockClosed' | '16/LockOpened' | '16/LockOutline' | '16/MarkdownDownload' | '16/Minus' | '16/MinusCircle' | '16/Palette' | '16/Paragraph' | '16/Plus' | '16/PlusCircle' | '16/QuestionOutline' | '16/Receipt' | '16/Redo' | '16/Revolut' | '16/RevPoints' | '16/SandWatch' | '16/SecureSeal' | '16/SimCard' | '16/StatusActive' | '16/StatusCheck' | '16/StatusClockArrows' | '16/StatusRefund' | '16/Sticker' | '16/StickerFilled' | '16/SwitchOff' | '16/SwitchOn' | '16/Time' | '16/Timeline' | '16/TopupAuto' | '16/TriangleDown' | '16/TriangleRight' | '16/Warning' | '16/Write' | '20/AccountJoint' | '20/AccountPocket' | '20/AccountPro' | '20/AutoExchange' | '20/AutoTopUp' | '20/BulkPayment' | '20/Cashback' | '20/Compare' | '20/Credit' | '20/CryptoNetworkAlgorand' | '20/CryptoNetworkArbitrum' | '20/CryptoNetworkAvalanche' | '20/CryptoNetworkBitcoin' | '20/CryptoNetworkBitcoinCash' | '20/CryptoNetworkBsc' | '20/CryptoNetworkCardano' | '20/CryptoNetworkCelo' | '20/CryptoNetworkCosmos' | '20/CryptoNetworkCronos' | '20/CryptoNetworkDash' | '20/CryptoNetworkDogecoin' | '20/CryptoNetworkEos' | '20/CryptoNetworkEtc' | '20/CryptoNetworkEthereum' | '20/CryptoNetworkFallback' | '20/CryptoNetworkFantom' | '20/CryptoNetworkHarmony' | '20/CryptoNetworkHeco' | '20/CryptoNetworkHedera' | '20/CryptoNetworkKava' | '20/CryptoNetworkKusama' | '20/CryptoNetworkLighting' | '20/CryptoNetworkLitecoin' | '20/CryptoNetworkMoonbeam' | '20/CryptoNetworkNear' | '20/CryptoNetworkOptimism' | '20/CryptoNetworkPolkadot' | '20/CryptoNetworkPolygon' | '20/CryptoNetworkRipple' | '20/CryptoNetworkRonin' | '20/CryptoNetworkSolana' | '20/CryptoNetworkStarkNet' | '20/CryptoNetworkStellar' | '20/CryptoNetworkTezos' | '20/CryptoNetworkTon' | '20/CryptoNetworkTron' | '20/CryptoNetworkZkSync' | '20/Description' | '20/Dividend' | '20/Draft' | '20/Ea' | '20/Email' | '20/ExcludedAnalytics' | '20/Expense' | '20/Gif' | '20/Groups' | '20/Heart' | '20/IncomeSorter' | '20/Isa' | '20/Iso' | '20/KeyboardEmoji' | '20/KeyboardGif' | '20/KeyboardSticker' | '20/Linked' | '20/MoveMoney' | '20/Reccuring' | '20/Resort' | '20/Rewards' | '20/Scheduled' | '20/SpareChange' | '20/SpendLimit' | '20/SplitBill' | '20/Statement' | '20/Travel' | '20/Vault' | '40/SubtractApps' | '40/SubtractBackpack' | '40/SubtractBank' | '40/SubtractBitcoin' | '40/SubtractBoost' | '40/SubtractBudget' | '40/SubtractCalendar' | '40/SubtractCalendarRecurring' | '40/SubtractCard' | '40/SubtractCash' | '40/SubtractCashback' | '40/SubtractChat' | '40/SubtractCloud' | '40/SubtractCoins' | '40/SubtractCommodities' | '40/SubtractCompare' | '40/SubtractConcierge' | '40/SubtractCredit' | '40/SubtractCreditBag' | '40/SubtractCreditCard' | '40/SubtractDocument' | '40/SubtractDrop' | '40/SubtractEntertainment' | '40/SubtractExchange' | '40/SubtractFastfood' | '40/SubtractGift' | '40/SubtractGlobe' | '40/SubtractGlobeP2P' | '40/SubtractGroceries' | '40/SubtractGroupVault' | '40/SubtractHealth' | '40/SubtractIndustrialGear' | '40/SubtractInsurance' | '40/SubtractLightning' | '40/SubtractLink' | '40/SubtractLogoRevolut' | '40/SubtractLounges' | '40/SubtractMaterials' | '40/SubtractMedicalCross' | '40/SubtractMerchant' | '40/SubtractNoBoost' | '40/SubtractPassportChip' | '40/SubtractPeople' | '40/SubtractPocket' | '40/SubtractPremium' | '40/SubtractPresent' | '40/SubtractProfile' | '40/SubtractRestaurants' | '40/SubtractRocket' | '40/SubtractRPoint' | '40/SubtractSavingsVault' | '40/SubtractServices' | '40/SubtractShopping' | '40/SubtractSmartphoneUmbrella' | '40/SubtractStar' | '40/SubtractStatement' | '40/SubtractTech' | '40/SubtractTopUp' | '40/SubtractToy' | '40/SubtractTransfers' | '40/SubtractTransport' | '40/SubtractTravel' | '40/SubtractUtilities' | '40/SubtractVault' | '40/SubtractVegan' | '40/SubtractWealth' | '64/FileBacs|image' | '64/FileCsv|image' | '64/FileDoc|image' | '64/FileImg|image' | '64/FileLink|image' | '64/FilePdf|image' | '64/FileXls|image' | '104/Connection' | '104/Donation' | '104/Error' | '104/Loading' | '104/Pending' | '104/SoftFail' | '104/Success' | '104/Warning' | '108/ArrowExchange|image' | '108/ArrowRequest|image' | '108/ArrowSend|image' | '108/EyeShow|image' | '108/LinkExternal|image' | '108/Plus|image';
|
|
1698
|
+
interface FlexProps<E extends Elements = 'div'> extends FlexInnerProps, BoxProps<E> {
|
|
1699
|
+
}
|
|
1700
|
+
/** @private */
|
|
1701
|
+
interface FlexInnerProps extends GapSystemProps, FlexWrapProps, FlexDirectionProps, AlignItemsProps, JustifyContentProps {
|
|
1702
|
+
}
|
|
1215
1703
|
|
|
1216
|
-
declare const
|
|
1217
|
-
readonly
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
declare const ImageScale: {
|
|
1221
|
-
readonly COVER: "cover";
|
|
1222
|
-
readonly CONTAIN: "contain";
|
|
1704
|
+
declare const TooltipBehaviour: {
|
|
1705
|
+
readonly ALWAYS: "always";
|
|
1706
|
+
readonly AUTO: "auto";
|
|
1707
|
+
readonly NEVER: "never";
|
|
1223
1708
|
};
|
|
1224
|
-
type
|
|
1709
|
+
type TooltipBehaviour = ValueOf<typeof TooltipBehaviour>;
|
|
1225
1710
|
|
|
1226
|
-
interface
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
image?: ImageProp$1;
|
|
1711
|
+
interface EllipsisProps extends React__default__default.HTMLAttributes<HTMLSpanElement>, TestAttributes, MaxWidthProps {
|
|
1712
|
+
tooltip?: TooltipBehaviour;
|
|
1713
|
+
children?: React__default__default.ReactNode;
|
|
1230
1714
|
}
|
|
1231
1715
|
|
|
1232
|
-
|
|
1716
|
+
declare const CellAlign: {
|
|
1717
|
+
readonly START: "start";
|
|
1718
|
+
readonly END: "end";
|
|
1719
|
+
readonly CENTER: "center";
|
|
1720
|
+
};
|
|
1721
|
+
type CellAlign = ValueOf<typeof CellAlign>;
|
|
1722
|
+
|
|
1723
|
+
declare const CellBaseType: {
|
|
1724
|
+
readonly HEADER: "header";
|
|
1725
|
+
readonly BODY: "body";
|
|
1726
|
+
readonly CONTENT: "content";
|
|
1727
|
+
};
|
|
1728
|
+
type CellBaseType = ValueOf<typeof CellBaseType>;
|
|
1729
|
+
interface CellInnerBaseProps {
|
|
1730
|
+
/** @private For test environment */
|
|
1731
|
+
type: CellBaseType;
|
|
1732
|
+
align?: CellAlign;
|
|
1733
|
+
stopEventPropagation?: boolean;
|
|
1233
1734
|
}
|
|
1234
|
-
|
|
1235
|
-
|
|
1735
|
+
interface CellBaseProps<E extends Elements = 'div'> extends Omit<FlexProps<E>, 'type'>, CellInnerBaseProps {
|
|
1736
|
+
}
|
|
1737
|
+
|
|
1738
|
+
interface CellProps$1<E extends Elements = 'div'> extends Omit<CellBaseProps<E>, 'type'>, Partial<Pick<CellBaseProps<E>, 'type'>>, Pick<EllipsisProps, 'tooltip'> {
|
|
1739
|
+
ellipsis?: boolean;
|
|
1740
|
+
renderStart?: () => React__default__default.ReactNode;
|
|
1741
|
+
renderEnd?: () => React__default__default.ReactNode;
|
|
1236
1742
|
}
|
|
1237
1743
|
|
|
1238
1744
|
interface ToggleOptions {
|
|
@@ -1267,123 +1773,16 @@ interface GetTargetProps<Element> {
|
|
|
1267
1773
|
}
|
|
1268
1774
|
interface DropdownOptions extends ToggleOptions {
|
|
1269
1775
|
}
|
|
1270
|
-
interface DropdownState<Element> {
|
|
1271
|
-
state: boolean;
|
|
1272
|
-
toggle: ToggleFn;
|
|
1273
|
-
getAnchorProps: GetAnchorProps<Element>;
|
|
1274
|
-
getTargetProps: GetTargetProps<Element>;
|
|
1275
|
-
}
|
|
1276
|
-
/**
|
|
1277
|
-
* Docs: {@link https://ui-kit.revolut.codes/utils/use-dropdown useDropdown}
|
|
1278
|
-
*/
|
|
1279
|
-
declare function useDropdown<Element>(options?: DropdownOptions): DropdownState<Element>;
|
|
1280
|
-
|
|
1281
|
-
interface DateFormatOptions {
|
|
1282
|
-
style?: 'auto' | 'precise';
|
|
1283
|
-
now?: Date;
|
|
1284
|
-
timeZone?: string;
|
|
1285
|
-
/** @private */
|
|
1286
|
-
__locale?: string;
|
|
1287
|
-
}
|
|
1288
|
-
/**
|
|
1289
|
-
* Docs: {@link https://ui-kit.revolut.codes/utils/use-date-format useDateFormat}
|
|
1290
|
-
*/
|
|
1291
|
-
declare function useDateFormat(options?: DateFormatOptions): (input: Date | number) => string;
|
|
1292
|
-
|
|
1293
|
-
interface DateRangeFormatOptions extends Intl.DateTimeFormatOptions {
|
|
1294
|
-
style?: 'auto' | 'precise';
|
|
1295
|
-
now?: Date;
|
|
1296
|
-
/** @private */
|
|
1297
|
-
__locale?: string;
|
|
1298
|
-
}
|
|
1299
|
-
/**
|
|
1300
|
-
* Docs: {@link https://ui-kit.revolut.codes/utils/use-date-range-format useDateRangeFormat}
|
|
1301
|
-
*/
|
|
1302
|
-
declare function useDateRangeFormat(options?: DateRangeFormatOptions): (start: Date | number, end: Date | number) => string;
|
|
1303
|
-
|
|
1304
|
-
interface DateTimeFormatOptions {
|
|
1305
|
-
style?: 'auto' | 'auto-date' | 'precise';
|
|
1306
|
-
now?: Date;
|
|
1307
|
-
timeZone?: string;
|
|
1308
|
-
/** @private */
|
|
1309
|
-
__locale?: string;
|
|
1310
|
-
}
|
|
1311
|
-
/**
|
|
1312
|
-
* Docs: {@link https://ui-kit.revolut.codes/utils/use-date-time-format useDateTimeFormat}
|
|
1313
|
-
*/
|
|
1314
|
-
declare function useDateTimeFormat(options?: DateTimeFormatOptions): (input: Date | number) => string;
|
|
1315
|
-
|
|
1316
|
-
/**
|
|
1317
|
-
* Docs: {@link https://ui-kit.revolut.codes/utils/use-is-rtl useIsRTL}
|
|
1318
|
-
*/
|
|
1319
|
-
declare const useIsRTL: () => boolean;
|
|
1320
|
-
|
|
1321
|
-
interface UseMoneyFormatOptions {
|
|
1322
|
-
currency?: string;
|
|
1323
|
-
showSign?: boolean;
|
|
1324
|
-
compactNotation?: boolean;
|
|
1325
|
-
type?: MoneyType;
|
|
1326
|
-
symbol?: CurrencySymbol;
|
|
1327
|
-
minimumFractionDigits?: number;
|
|
1328
|
-
maximumFractionDigits?: number;
|
|
1329
|
-
crypto?: boolean;
|
|
1330
|
-
roundingMode?: MoneyRoundingMode;
|
|
1331
|
-
}
|
|
1332
|
-
/**
|
|
1333
|
-
* Docs: {@link https://ui-kit.revolut.codes/utils/use-money-format useMoneyFormat}
|
|
1334
|
-
*/
|
|
1335
|
-
declare const useMoneyFormat: (options?: UseMoneyFormatOptions) => (argument: number | Money) => string;
|
|
1336
|
-
|
|
1337
|
-
interface TimeFormatOptions {
|
|
1338
|
-
style?: 'auto' | 'precise';
|
|
1339
|
-
now?: Date;
|
|
1340
|
-
timeZone?: string;
|
|
1341
|
-
/** @private */
|
|
1342
|
-
__locale?: string;
|
|
1343
|
-
}
|
|
1344
|
-
/**
|
|
1345
|
-
* Docs: {@link https://ui-kit.revolut.codes/utils/use-time-format useTimeFormat}
|
|
1346
|
-
*/
|
|
1347
|
-
declare function useTimeFormat(options?: TimeFormatOptions): (input: Date | number) => string;
|
|
1348
|
-
|
|
1349
|
-
interface RangeModifier {
|
|
1350
|
-
from: Date;
|
|
1351
|
-
to: Date;
|
|
1352
|
-
}
|
|
1353
|
-
type DateRange$1 = RangeModifier;
|
|
1354
|
-
|
|
1355
|
-
interface EllipsisProps extends React__default.HTMLAttributes<HTMLSpanElement>, TestAttributes, MaxWidthProps {
|
|
1356
|
-
tooltip?: TooltipBehaviour;
|
|
1357
|
-
children?: React__default.ReactNode;
|
|
1358
|
-
}
|
|
1359
|
-
|
|
1360
|
-
declare const CellAlign: {
|
|
1361
|
-
readonly START: "start";
|
|
1362
|
-
readonly END: "end";
|
|
1363
|
-
readonly CENTER: "center";
|
|
1364
|
-
};
|
|
1365
|
-
type CellAlign = ValueOf<typeof CellAlign>;
|
|
1366
|
-
|
|
1367
|
-
declare const CellBaseType: {
|
|
1368
|
-
readonly HEADER: "header";
|
|
1369
|
-
readonly BODY: "body";
|
|
1370
|
-
readonly CONTENT: "content";
|
|
1371
|
-
};
|
|
1372
|
-
type CellBaseType = ValueOf<typeof CellBaseType>;
|
|
1373
|
-
interface CellInnerBaseProps {
|
|
1374
|
-
/** @private For test environment */
|
|
1375
|
-
type: CellBaseType;
|
|
1376
|
-
align?: CellAlign;
|
|
1377
|
-
stopEventPropagation?: boolean;
|
|
1378
|
-
}
|
|
1379
|
-
interface CellBaseProps<E extends Elements = 'div'> extends Omit<FlexProps<E>, 'type'>, CellInnerBaseProps {
|
|
1380
|
-
}
|
|
1381
|
-
|
|
1382
|
-
interface CellProps$1<E extends Elements = 'div'> extends Omit<CellBaseProps<E>, 'type'>, Partial<Pick<CellBaseProps<E>, 'type'>>, Pick<EllipsisProps, 'tooltip'> {
|
|
1383
|
-
ellipsis?: boolean;
|
|
1384
|
-
renderStart?: () => React__default.ReactNode;
|
|
1385
|
-
renderEnd?: () => React__default.ReactNode;
|
|
1386
|
-
}
|
|
1776
|
+
interface DropdownState<Element> {
|
|
1777
|
+
state: boolean;
|
|
1778
|
+
toggle: ToggleFn;
|
|
1779
|
+
getAnchorProps: GetAnchorProps<Element>;
|
|
1780
|
+
getTargetProps: GetTargetProps<Element>;
|
|
1781
|
+
}
|
|
1782
|
+
/**
|
|
1783
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/use-dropdown useDropdown}
|
|
1784
|
+
*/
|
|
1785
|
+
declare function useDropdown<Element>(options?: DropdownOptions): DropdownState<Element>;
|
|
1387
1786
|
|
|
1388
1787
|
interface TableData {
|
|
1389
1788
|
}
|
|
@@ -1397,7 +1796,7 @@ declare module 'react' {
|
|
|
1397
1796
|
/**
|
|
1398
1797
|
* @deprecated - This type is not relevant when using React. Inline the type instead to make the intent clear.
|
|
1399
1798
|
*/
|
|
1400
|
-
type ReactFragment = Iterable<
|
|
1799
|
+
type ReactFragment = Iterable<React__default__default.ReactNode>
|
|
1401
1800
|
}
|
|
1402
1801
|
|
|
1403
1802
|
interface UseRowDisabledOptions<D extends object = {}>
|
|
@@ -1410,7 +1809,7 @@ interface UseRowDisabledState<D extends object = {}> {
|
|
|
1410
1809
|
}
|
|
1411
1810
|
|
|
1412
1811
|
interface UseRowDisabledRowProps
|
|
1413
|
-
extends Pick<
|
|
1812
|
+
extends Pick<React__default__default.AriaAttributes, 'aria-disabled'> {
|
|
1414
1813
|
isDisabled: boolean
|
|
1415
1814
|
}
|
|
1416
1815
|
|
|
@@ -1420,7 +1819,7 @@ interface UseRowDisabledInstanceProps<D extends object = {}> {
|
|
|
1420
1819
|
}
|
|
1421
1820
|
|
|
1422
1821
|
interface UseRowDisabledRowCommonProps
|
|
1423
|
-
extends Pick<
|
|
1822
|
+
extends Pick<React__default__default.AriaAttributes, 'aria-disabled'> {}
|
|
1424
1823
|
|
|
1425
1824
|
declare module 'react-table' {
|
|
1426
1825
|
export interface UseGroupByInstanceProps<D extends object> {
|
|
@@ -1509,12 +1908,61 @@ declare module 'react-table' {
|
|
|
1509
1908
|
export interface TableRowProps extends UseRowDisabledRowCommonProps {}
|
|
1510
1909
|
}
|
|
1511
1910
|
|
|
1911
|
+
declare const MoneyType: {
|
|
1912
|
+
readonly MONEY: "money";
|
|
1913
|
+
readonly MONEY_FRACTIONAL: "money-fractional";
|
|
1914
|
+
};
|
|
1915
|
+
type MoneyType = ValueOf<typeof MoneyType>;
|
|
1916
|
+
|
|
1917
|
+
declare const CurrencySymbol: {
|
|
1918
|
+
readonly AUTO: "auto";
|
|
1919
|
+
readonly NARROW: "narrow";
|
|
1920
|
+
readonly NONE: "none";
|
|
1921
|
+
};
|
|
1922
|
+
type CurrencySymbol = ValueOf<typeof CurrencySymbol>;
|
|
1923
|
+
|
|
1924
|
+
declare const ActionsGradient: {
|
|
1925
|
+
readonly None: "none";
|
|
1926
|
+
readonly Low: "low";
|
|
1927
|
+
readonly High: "high";
|
|
1928
|
+
readonly Full: "full";
|
|
1929
|
+
};
|
|
1930
|
+
type ActionsGradient = ValueOf<typeof ActionsGradient>;
|
|
1931
|
+
|
|
1932
|
+
interface RangeModifier {
|
|
1933
|
+
from: Date;
|
|
1934
|
+
to: Date;
|
|
1935
|
+
}
|
|
1936
|
+
type DateRange$1 = RangeModifier;
|
|
1937
|
+
|
|
1938
|
+
interface UseMoneyFormatOptions {
|
|
1939
|
+
currency?: string;
|
|
1940
|
+
showSign?: boolean;
|
|
1941
|
+
compactNotation?: boolean;
|
|
1942
|
+
type?: MoneyType;
|
|
1943
|
+
symbol?: CurrencySymbol;
|
|
1944
|
+
minimumFractionDigits?: number;
|
|
1945
|
+
maximumFractionDigits?: number;
|
|
1946
|
+
crypto?: boolean;
|
|
1947
|
+
roundingMode?: MoneyRoundingMode;
|
|
1948
|
+
}
|
|
1949
|
+
/**
|
|
1950
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/use-money-format useMoneyFormat}
|
|
1951
|
+
*/
|
|
1952
|
+
declare const useMoneyFormat: (options?: UseMoneyFormatOptions) => (argument: number | Money) => string;
|
|
1953
|
+
|
|
1954
|
+
interface ImageProps$1 extends Omit<BoxProps<'img'>, 'variant' | 'use'> {
|
|
1955
|
+
variant?: ImageVariant;
|
|
1956
|
+
scale?: ImageScale;
|
|
1957
|
+
image?: ImageProp$1;
|
|
1958
|
+
}
|
|
1959
|
+
|
|
1512
1960
|
declare const ToastTimeout: {
|
|
1513
1961
|
readonly SHORT: "short";
|
|
1514
1962
|
readonly LONG: "long";
|
|
1515
1963
|
};
|
|
1516
1964
|
type ToastTimeout = ValueOf<typeof ToastTimeout>;
|
|
1517
|
-
type Toast$1 =
|
|
1965
|
+
type Toast$1 = React__default__default.ReactElement | RenderToast;
|
|
1518
1966
|
type ToastId = symbol;
|
|
1519
1967
|
interface HideToastCallback {
|
|
1520
1968
|
(): void;
|
|
@@ -1526,7 +1974,7 @@ interface HideToast {
|
|
|
1526
1974
|
(): void;
|
|
1527
1975
|
}
|
|
1528
1976
|
interface RenderToast {
|
|
1529
|
-
(hide: HideToast):
|
|
1977
|
+
(hide: HideToast): React__default__default.ReactElement;
|
|
1530
1978
|
}
|
|
1531
1979
|
interface ToastActions {
|
|
1532
1980
|
show(toast: Toast$1, onHide?: HideToastCallback): ToastId;
|
|
@@ -1540,8 +1988,72 @@ interface ToastActions {
|
|
|
1540
1988
|
*/
|
|
1541
1989
|
declare const useToast: () => ToastActions;
|
|
1542
1990
|
|
|
1991
|
+
interface DateFormatOptions {
|
|
1992
|
+
style?: 'auto' | 'precise';
|
|
1993
|
+
now?: Date;
|
|
1994
|
+
timeZone?: string;
|
|
1995
|
+
/** @private */
|
|
1996
|
+
__locale?: string;
|
|
1997
|
+
}
|
|
1998
|
+
/**
|
|
1999
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/use-date-format useDateFormat}
|
|
2000
|
+
*/
|
|
2001
|
+
declare function useDateFormat(options?: DateFormatOptions): (input: Date | number) => string;
|
|
2002
|
+
|
|
2003
|
+
interface DateRangeFormatOptions extends Intl.DateTimeFormatOptions {
|
|
2004
|
+
style?: 'auto' | 'precise';
|
|
2005
|
+
now?: Date;
|
|
2006
|
+
/** @private */
|
|
2007
|
+
__locale?: string;
|
|
2008
|
+
}
|
|
2009
|
+
/**
|
|
2010
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/use-date-range-format useDateRangeFormat}
|
|
2011
|
+
*/
|
|
2012
|
+
declare function useDateRangeFormat(options?: DateRangeFormatOptions): (start: Date | number, end: Date | number) => string;
|
|
2013
|
+
|
|
2014
|
+
interface DateTimeFormatOptions {
|
|
2015
|
+
style?: 'auto' | 'auto-date' | 'precise';
|
|
2016
|
+
now?: Date;
|
|
2017
|
+
timeZone?: string;
|
|
2018
|
+
/** @private */
|
|
2019
|
+
__locale?: string;
|
|
2020
|
+
}
|
|
2021
|
+
/**
|
|
2022
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/use-date-time-format useDateTimeFormat}
|
|
2023
|
+
*/
|
|
2024
|
+
declare function useDateTimeFormat(options?: DateTimeFormatOptions): (input: Date | number) => string;
|
|
2025
|
+
|
|
2026
|
+
/**
|
|
2027
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/use-is-rtl useIsRTL}
|
|
2028
|
+
*/
|
|
2029
|
+
declare const useIsRTL: () => boolean;
|
|
2030
|
+
|
|
2031
|
+
interface TimeFormatOptions {
|
|
2032
|
+
style?: 'auto' | 'precise';
|
|
2033
|
+
now?: Date;
|
|
2034
|
+
timeZone?: string;
|
|
2035
|
+
/** @private */
|
|
2036
|
+
__locale?: string;
|
|
2037
|
+
}
|
|
2038
|
+
/**
|
|
2039
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/use-time-format useTimeFormat}
|
|
2040
|
+
*/
|
|
2041
|
+
declare function useTimeFormat(options?: TimeFormatOptions): (input: Date | number) => string;
|
|
2042
|
+
|
|
2043
|
+
/**
|
|
2044
|
+
* Copy text to clipboard using native [Clipboard API](http://developer.mozilla.org/en-US/docs/Web/API/Clipboard) with [fallback](https://gist.github.com/lgarron/d1dee380f4ed9d825ca7) for older browsers
|
|
2045
|
+
*
|
|
2046
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/copy-to-clipboard copyToClipboard}
|
|
2047
|
+
*/
|
|
2048
|
+
declare const copyToClipboard: (input: string, doc?: Document) => Promise<void>;
|
|
2049
|
+
|
|
2050
|
+
/**
|
|
2051
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/node-chain nodeChain}
|
|
2052
|
+
*/
|
|
2053
|
+
declare const nodeChain: (...parts: React.ReactNode[]) => react_jsx_runtime.JSX.Element;
|
|
2054
|
+
|
|
1543
2055
|
declare namespace JSXCompat {
|
|
1544
|
-
interface IntrinsicElements extends
|
|
2056
|
+
interface IntrinsicElements extends React__default.JSX.IntrinsicElements, JSX.IntrinsicElements {
|
|
1545
2057
|
}
|
|
1546
2058
|
}
|
|
1547
2059
|
/**
|
|
@@ -1559,23 +2071,23 @@ type StackAlignment = 'start' | 'center' | 'end';
|
|
|
1559
2071
|
/**
|
|
1560
2072
|
* Native button props excluding styling escape hatches.
|
|
1561
2073
|
*/
|
|
1562
|
-
type NativeButtonProps = Omit<
|
|
2074
|
+
type NativeButtonProps = Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style' | 'disabled' | 'children'>;
|
|
1563
2075
|
/**
|
|
1564
2076
|
* Native div props excluding styling escape hatches.
|
|
1565
2077
|
*/
|
|
1566
|
-
type NativeDivProps = Omit<
|
|
2078
|
+
type NativeDivProps = Omit<React__default.HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children' | 'title' | 'content'>;
|
|
1567
2079
|
/**
|
|
1568
2080
|
* Native span props excluding styling escape hatches.
|
|
1569
2081
|
*/
|
|
1570
|
-
type NativeSpanProps = Omit<
|
|
2082
|
+
type NativeSpanProps = Omit<React__default.HTMLAttributes<HTMLSpanElement>, 'className' | 'style' | 'children' | 'title'>;
|
|
1571
2083
|
/**
|
|
1572
2084
|
* Native heading props excluding styling escape hatches.
|
|
1573
2085
|
*/
|
|
1574
|
-
type NativeHeadingProps = Omit<
|
|
2086
|
+
type NativeHeadingProps = Omit<React__default.HTMLAttributes<HTMLHeadingElement>, 'className' | 'style' | 'children' | 'placeholder' | 'title'>;
|
|
1575
2087
|
/**
|
|
1576
2088
|
* Native main props excluding styling escape hatches.
|
|
1577
2089
|
*/
|
|
1578
|
-
type NativeMainProps = Omit<
|
|
2090
|
+
type NativeMainProps = Omit<React__default.HTMLAttributes<HTMLElement>, 'className' | 'style' | 'children' | 'title'>;
|
|
1579
2091
|
|
|
1580
2092
|
/**
|
|
1581
2093
|
* Props for the Action component.
|
|
@@ -1605,7 +2117,7 @@ interface ActionProps extends NativeButtonProps {
|
|
|
1605
2117
|
/**
|
|
1606
2118
|
* Action content.
|
|
1607
2119
|
*/
|
|
1608
|
-
children:
|
|
2120
|
+
children: React__default.ReactNode;
|
|
1609
2121
|
}
|
|
1610
2122
|
/**
|
|
1611
2123
|
* Action component for text-style clickable actions.
|
|
@@ -1676,7 +2188,7 @@ declare const Action: ({ disabled, icon, iconOnly, children, ...rest }: ActionPr
|
|
|
1676
2188
|
* Image prop type supporting simple URLs or responsive image sets.
|
|
1677
2189
|
*/
|
|
1678
2190
|
type ImageProp = ImageProps$1['image'];
|
|
1679
|
-
type NativeImgProps = Omit<
|
|
2191
|
+
type NativeImgProps = Omit<React__default.ImgHTMLAttributes<HTMLImageElement>, 'className' | 'style'>;
|
|
1680
2192
|
/**
|
|
1681
2193
|
* Image fit options for object-fit behaviour.
|
|
1682
2194
|
*/
|
|
@@ -1974,7 +2486,7 @@ interface ButtonProps extends NativeButtonProps {
|
|
|
1974
2486
|
/**
|
|
1975
2487
|
* Button content.
|
|
1976
2488
|
*/
|
|
1977
|
-
children:
|
|
2489
|
+
children: React__default.ReactNode;
|
|
1978
2490
|
/**
|
|
1979
2491
|
* Whether the button is elevated.
|
|
1980
2492
|
*/
|
|
@@ -2055,7 +2567,7 @@ interface ActionButtonProps extends NativeButtonProps {
|
|
|
2055
2567
|
/**
|
|
2056
2568
|
* Button content.
|
|
2057
2569
|
*/
|
|
2058
|
-
children:
|
|
2570
|
+
children: React__default.ReactNode;
|
|
2059
2571
|
}
|
|
2060
2572
|
/**
|
|
2061
2573
|
* ActionButton component for secondary actions in miniapps.
|
|
@@ -2211,6 +2723,10 @@ interface CalendarRangeProps {
|
|
|
2211
2723
|
* Dates that should be disabled in the calendar
|
|
2212
2724
|
*/
|
|
2213
2725
|
disabledDays?: CalendarDisabledDays;
|
|
2726
|
+
/**
|
|
2727
|
+
* Whether the background is transparent or not
|
|
2728
|
+
*/
|
|
2729
|
+
transparentBg?: boolean;
|
|
2214
2730
|
}
|
|
2215
2731
|
type CalendarProps = CalendarDateProps | CalendarRangeProps;
|
|
2216
2732
|
/**
|
|
@@ -2313,15 +2829,15 @@ interface CellProps extends NativeDivProps {
|
|
|
2313
2829
|
/**
|
|
2314
2830
|
* Main title text.
|
|
2315
2831
|
*/
|
|
2316
|
-
title:
|
|
2832
|
+
title: React__default.ReactNode;
|
|
2317
2833
|
/**
|
|
2318
2834
|
* Secondary description text below the title.
|
|
2319
2835
|
*/
|
|
2320
|
-
description?:
|
|
2836
|
+
description?: React__default.ReactNode;
|
|
2321
2837
|
/**
|
|
2322
2838
|
* Content displayed on the right side of the cell.
|
|
2323
2839
|
*/
|
|
2324
|
-
side?:
|
|
2840
|
+
side?: React__default.ReactNode;
|
|
2325
2841
|
/**
|
|
2326
2842
|
* Icon displayed at the start of the cell.
|
|
2327
2843
|
*/
|
|
@@ -2329,7 +2845,7 @@ interface CellProps extends NativeDivProps {
|
|
|
2329
2845
|
/**
|
|
2330
2846
|
* Avatar or image displayed at the start of the cell.
|
|
2331
2847
|
*/
|
|
2332
|
-
avatar?:
|
|
2848
|
+
avatar?: React__default.ReactNode;
|
|
2333
2849
|
/**
|
|
2334
2850
|
* Alignment for the avatar content, center by default
|
|
2335
2851
|
*/
|
|
@@ -2355,7 +2871,7 @@ interface CellProps extends NativeDivProps {
|
|
|
2355
2871
|
/**
|
|
2356
2872
|
* Click handler for the cell.
|
|
2357
2873
|
*/
|
|
2358
|
-
onClick?:
|
|
2874
|
+
onClick?: React__default.MouseEventHandler<HTMLElement>;
|
|
2359
2875
|
/**
|
|
2360
2876
|
* URL for anchor element (when as="a").
|
|
2361
2877
|
*/
|
|
@@ -2490,7 +3006,7 @@ declare const Cell: ({ as, title, description, side, icon, avatar, avatarAlign,
|
|
|
2490
3006
|
*/
|
|
2491
3007
|
declare const CellSkeleton: () => react_jsx_runtime.JSX.Element;
|
|
2492
3008
|
|
|
2493
|
-
type NativeInputProps$
|
|
3009
|
+
type NativeInputProps$5 = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'children' | 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'type' | 'color'>;
|
|
2494
3010
|
/**
|
|
2495
3011
|
* Props for the Checkbox component.
|
|
2496
3012
|
*
|
|
@@ -2502,7 +3018,7 @@ type NativeInputProps$4 = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'c
|
|
|
2502
3018
|
* />
|
|
2503
3019
|
* ```
|
|
2504
3020
|
*/
|
|
2505
|
-
interface CheckboxProps extends NativeInputProps$
|
|
3021
|
+
interface CheckboxProps extends NativeInputProps$5 {
|
|
2506
3022
|
/**
|
|
2507
3023
|
* Controlled checked state.
|
|
2508
3024
|
*/
|
|
@@ -2520,7 +3036,7 @@ interface CheckboxProps extends NativeInputProps$4 {
|
|
|
2520
3036
|
/**
|
|
2521
3037
|
* Callback fired when the checkbox state changes.
|
|
2522
3038
|
*/
|
|
2523
|
-
onChange?:
|
|
3039
|
+
onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
|
|
2524
3040
|
}
|
|
2525
3041
|
/**
|
|
2526
3042
|
* Checkbox component for selecting multiple options.
|
|
@@ -2607,7 +3123,95 @@ interface CheckboxProps extends NativeInputProps$4 {
|
|
|
2607
3123
|
*/
|
|
2608
3124
|
declare const Checkbox: ({ checked, defaultChecked, disabled, onChange, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
|
|
2609
3125
|
|
|
2610
|
-
type
|
|
3126
|
+
type NativeInputProps$4 = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'children' | 'value' | 'defaultValue' | 'onChange' | 'disabled' | 'readOnly'>;
|
|
3127
|
+
/**
|
|
3128
|
+
* Compact input action item definition.
|
|
3129
|
+
*/
|
|
3130
|
+
interface CompactInputActionItem {
|
|
3131
|
+
/**
|
|
3132
|
+
* Label for the action for accessibility, not shown
|
|
3133
|
+
*/
|
|
3134
|
+
label: string;
|
|
3135
|
+
/**
|
|
3136
|
+
* Icon to show
|
|
3137
|
+
*/
|
|
3138
|
+
icon: IconName;
|
|
3139
|
+
/**
|
|
3140
|
+
* Callback when the button is clicked
|
|
3141
|
+
*/
|
|
3142
|
+
onClick: () => void;
|
|
3143
|
+
/**
|
|
3144
|
+
* Visual style variant of the button.
|
|
3145
|
+
* @default 'default'
|
|
3146
|
+
*/
|
|
3147
|
+
variant?: 'default' | 'accent';
|
|
3148
|
+
}
|
|
3149
|
+
/**
|
|
3150
|
+
* Props for the CompactInput component.
|
|
3151
|
+
*
|
|
3152
|
+
* @example
|
|
3153
|
+
* ```tsx
|
|
3154
|
+
* <CompactInput
|
|
3155
|
+
* label="Message input"
|
|
3156
|
+
* placeholder="Type a message"
|
|
3157
|
+
* onChange={(value) => console.log(value)}
|
|
3158
|
+
* />
|
|
3159
|
+
* ```
|
|
3160
|
+
*/
|
|
3161
|
+
interface CompactInputProps extends NativeInputProps$4 {
|
|
3162
|
+
/**
|
|
3163
|
+
* Controlled value of the input.
|
|
3164
|
+
*/
|
|
3165
|
+
value?: string;
|
|
3166
|
+
/**
|
|
3167
|
+
* Callback fired when the input value changes.
|
|
3168
|
+
*/
|
|
3169
|
+
onChange?: (value: string) => void;
|
|
3170
|
+
/**
|
|
3171
|
+
* Label for the input for accessibility, not shown
|
|
3172
|
+
*/
|
|
3173
|
+
label: string;
|
|
3174
|
+
/**
|
|
3175
|
+
* Placeholder text shown when the input is empty.
|
|
3176
|
+
*/
|
|
3177
|
+
placeholder?: string;
|
|
3178
|
+
/**
|
|
3179
|
+
* Whether the input is disabled.
|
|
3180
|
+
* @default false
|
|
3181
|
+
*/
|
|
3182
|
+
disabled?: boolean;
|
|
3183
|
+
/**
|
|
3184
|
+
* Actions to render as icons at the end of the input.
|
|
3185
|
+
*/
|
|
3186
|
+
actions?: CompactInputActionItem[];
|
|
3187
|
+
}
|
|
3188
|
+
/**
|
|
3189
|
+
* Input component with a compact style.
|
|
3190
|
+
*
|
|
3191
|
+
* @example
|
|
3192
|
+
* ```tsx
|
|
3193
|
+
* import { CompactInput } from '@revolut/ui-kit-miniapp'
|
|
3194
|
+
* import { useState } from 'react'
|
|
3195
|
+
*
|
|
3196
|
+
* // Controlled usage
|
|
3197
|
+
* function ControlledExample() {
|
|
3198
|
+
* const [message, setMessage] = useState('')
|
|
3199
|
+
*
|
|
3200
|
+
* return (
|
|
3201
|
+
* <CompactInput
|
|
3202
|
+
* value={message}
|
|
3203
|
+
* onChange={setMessage}
|
|
3204
|
+
* label="Message input"
|
|
3205
|
+
* placeholder="Type a message"
|
|
3206
|
+
* actions={[ label: 'Send', onClick: () => console.log('Clicked!'), icon: 'ArrowThinUp' ]}
|
|
3207
|
+
* />
|
|
3208
|
+
* )
|
|
3209
|
+
* }
|
|
3210
|
+
* ```
|
|
3211
|
+
*/
|
|
3212
|
+
declare const CompactInput: ({ actions, onChange, label, value: controlledValue, placeholder, disabled, ...rest }: CompactInputProps) => react_jsx_runtime.JSX.Element;
|
|
3213
|
+
|
|
3214
|
+
type BaseDivProps = Omit<React__default.HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children' | 'onCopy' | 'onError' | 'onClick'>;
|
|
2611
3215
|
/**
|
|
2612
3216
|
* Props for the Copyable component.
|
|
2613
3217
|
*
|
|
@@ -2635,7 +3239,7 @@ interface CopyableProps extends BaseDivProps {
|
|
|
2635
3239
|
/**
|
|
2636
3240
|
* Callback fired when the copy button is clicked.
|
|
2637
3241
|
*/
|
|
2638
|
-
onClick?:
|
|
3242
|
+
onClick?: React__default.MouseEventHandler<HTMLButtonElement>;
|
|
2639
3243
|
/**
|
|
2640
3244
|
* Custom label for the copy button (for accessibility).
|
|
2641
3245
|
* @default 'Copy'
|
|
@@ -2644,7 +3248,7 @@ interface CopyableProps extends BaseDivProps {
|
|
|
2644
3248
|
/**
|
|
2645
3249
|
* Content to display alongside the copy button.
|
|
2646
3250
|
*/
|
|
2647
|
-
children?:
|
|
3251
|
+
children?: React__default.ReactNode;
|
|
2648
3252
|
}
|
|
2649
3253
|
/**
|
|
2650
3254
|
* Copyable component for displaying content with a copy-to-clipboard button.
|
|
@@ -2715,15 +3319,15 @@ interface DetailsCellProps extends NativeDivProps {
|
|
|
2715
3319
|
/**
|
|
2716
3320
|
* Label text displayed on the left.
|
|
2717
3321
|
*/
|
|
2718
|
-
title:
|
|
3322
|
+
title: React__default.ReactNode;
|
|
2719
3323
|
/**
|
|
2720
3324
|
* Value text displayed on the right.
|
|
2721
3325
|
*/
|
|
2722
|
-
content:
|
|
3326
|
+
content: React__default.ReactNode;
|
|
2723
3327
|
/**
|
|
2724
3328
|
* Additional note displayed below, spanning full width.
|
|
2725
3329
|
*/
|
|
2726
|
-
note?:
|
|
3330
|
+
note?: React__default.ReactNode;
|
|
2727
3331
|
}
|
|
2728
3332
|
/**
|
|
2729
3333
|
* DetailsCell component for displaying key-value pairs.
|
|
@@ -2801,7 +3405,7 @@ interface DropdownProps extends NativeDivProps {
|
|
|
2801
3405
|
/**
|
|
2802
3406
|
* Element ref where the tooltip is anchored.
|
|
2803
3407
|
*/
|
|
2804
|
-
anchorRef:
|
|
3408
|
+
anchorRef: React__default.RefObject<HTMLElement | null>;
|
|
2805
3409
|
/**
|
|
2806
3410
|
* Callback triggered when the dropdown is closed.
|
|
2807
3411
|
*/
|
|
@@ -2813,7 +3417,7 @@ interface DropdownProps extends NativeDivProps {
|
|
|
2813
3417
|
/**
|
|
2814
3418
|
* Dropdown content.
|
|
2815
3419
|
*/
|
|
2816
|
-
children:
|
|
3420
|
+
children: React__default.ReactNode;
|
|
2817
3421
|
}
|
|
2818
3422
|
/**
|
|
2819
3423
|
* Dropdown component for displaying content anchored to an element.
|
|
@@ -2860,7 +3464,7 @@ interface FootnoteProps extends NativeDivProps {
|
|
|
2860
3464
|
/**
|
|
2861
3465
|
* Footnote content.
|
|
2862
3466
|
*/
|
|
2863
|
-
children?:
|
|
3467
|
+
children?: React__default.ReactNode;
|
|
2864
3468
|
}
|
|
2865
3469
|
/**
|
|
2866
3470
|
* Footnote component for secondary, supporting text.
|
|
@@ -2942,7 +3546,7 @@ interface GroupProps extends NativeDivProps {
|
|
|
2942
3546
|
/**
|
|
2943
3547
|
* Group content.
|
|
2944
3548
|
*/
|
|
2945
|
-
children?:
|
|
3549
|
+
children?: React__default.ReactNode;
|
|
2946
3550
|
}
|
|
2947
3551
|
/**
|
|
2948
3552
|
* Group component for visually grouping related content.
|
|
@@ -3049,7 +3653,7 @@ interface IconProps {
|
|
|
3049
3653
|
*/
|
|
3050
3654
|
declare const Icon: ({ name, size, color }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
3051
3655
|
|
|
3052
|
-
type NativeInputProps$3 = Omit<
|
|
3656
|
+
type NativeInputProps$3 = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'children' | 'value' | 'defaultValue' | 'onChange' | 'disabled' | 'readOnly' | 'type' | 'size'>;
|
|
3053
3657
|
/**
|
|
3054
3658
|
* Input type options.
|
|
3055
3659
|
*/
|
|
@@ -3078,7 +3682,7 @@ interface InputProps extends NativeInputProps$3 {
|
|
|
3078
3682
|
/**
|
|
3079
3683
|
* Callback fired when the input value changes.
|
|
3080
3684
|
*/
|
|
3081
|
-
onChange?:
|
|
3685
|
+
onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
|
|
3082
3686
|
/**
|
|
3083
3687
|
* Label displayed above the input.
|
|
3084
3688
|
*/
|
|
@@ -3110,11 +3714,11 @@ interface InputProps extends NativeInputProps$3 {
|
|
|
3110
3714
|
/**
|
|
3111
3715
|
* Description or helper text shown below the input.
|
|
3112
3716
|
*/
|
|
3113
|
-
description?:
|
|
3717
|
+
description?: React__default.ReactNode;
|
|
3114
3718
|
/**
|
|
3115
3719
|
* Error message shown when invalid.
|
|
3116
3720
|
*/
|
|
3117
|
-
errorMessage?:
|
|
3721
|
+
errorMessage?: React__default.ReactNode;
|
|
3118
3722
|
/**
|
|
3119
3723
|
* Custom label for the clear button (for accessibility).
|
|
3120
3724
|
* @default 'Clear'
|
|
@@ -3233,7 +3837,7 @@ interface InputProps extends NativeInputProps$3 {
|
|
|
3233
3837
|
*/
|
|
3234
3838
|
declare const Input: ({ value, defaultValue, onChange, label, placeholder, type, disabled, readOnly, invalid, description, errorMessage, labelButtonClear, onClear, icon, endIcon, avatar, ...rest }: InputProps) => react_jsx_runtime.JSX.Element;
|
|
3235
3839
|
|
|
3236
|
-
type NativeAnchorProps = Omit<
|
|
3840
|
+
type NativeAnchorProps = Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'style'>;
|
|
3237
3841
|
/**
|
|
3238
3842
|
* Props for the Link component.
|
|
3239
3843
|
*
|
|
@@ -3257,7 +3861,7 @@ interface LinkProps extends NativeAnchorProps {
|
|
|
3257
3861
|
/**
|
|
3258
3862
|
* Link content.
|
|
3259
3863
|
*/
|
|
3260
|
-
children?:
|
|
3864
|
+
children?: React__default.ReactNode;
|
|
3261
3865
|
}
|
|
3262
3866
|
/**
|
|
3263
3867
|
* Link component for navigation to external or internal URLs.
|
|
@@ -3325,7 +3929,7 @@ interface ListItem {
|
|
|
3325
3929
|
/**
|
|
3326
3930
|
* Content to show
|
|
3327
3931
|
*/
|
|
3328
|
-
content:
|
|
3932
|
+
content: React__default.ReactNode;
|
|
3329
3933
|
/**
|
|
3330
3934
|
* Icon to show at the start
|
|
3331
3935
|
*/
|
|
@@ -3414,7 +4018,7 @@ interface FilterButtonProps extends NativeButtonProps {
|
|
|
3414
4018
|
/**
|
|
3415
4019
|
* Button content.
|
|
3416
4020
|
*/
|
|
3417
|
-
children?:
|
|
4021
|
+
children?: React__default.ReactNode;
|
|
3418
4022
|
}
|
|
3419
4023
|
/**
|
|
3420
4024
|
* FilterButton component for filter controls.
|
|
@@ -3454,7 +4058,7 @@ interface FilterButtonProps extends NativeButtonProps {
|
|
|
3454
4058
|
*/
|
|
3455
4059
|
declare const FilterButton: ({ active, disabled, onClear, labelClear, icon, children, ...rest }: FilterButtonProps) => react_jsx_runtime.JSX.Element;
|
|
3456
4060
|
|
|
3457
|
-
type NativeInputProps$2 = Omit<
|
|
4061
|
+
type NativeInputProps$2 = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'children' | 'value' | 'defaultValue' | 'onChange' | 'disabled' | 'readOnly'>;
|
|
3458
4062
|
/**
|
|
3459
4063
|
* Props for the Search component.
|
|
3460
4064
|
*
|
|
@@ -3584,7 +4188,7 @@ interface HStackProps extends NativeSpanProps {
|
|
|
3584
4188
|
/**
|
|
3585
4189
|
* Stack content.
|
|
3586
4190
|
*/
|
|
3587
|
-
children?:
|
|
4191
|
+
children?: React__default.ReactNode;
|
|
3588
4192
|
}
|
|
3589
4193
|
/**
|
|
3590
4194
|
* HStack component for horizontal layout.
|
|
@@ -3616,6 +4220,57 @@ interface HStackProps extends NativeSpanProps {
|
|
|
3616
4220
|
*/
|
|
3617
4221
|
declare const HStack: ({ align, gap, children, ...rest }: HStackProps) => react_jsx_runtime.JSX.Element;
|
|
3618
4222
|
|
|
4223
|
+
/**
|
|
4224
|
+
* Props for the MessageBubble component.
|
|
4225
|
+
*
|
|
4226
|
+
* @example
|
|
4227
|
+
* ```tsx
|
|
4228
|
+
* <MessageBubble footer="10:12" placement="sender">
|
|
4229
|
+
* Message!
|
|
4230
|
+
* </MessageBubble>
|
|
4231
|
+
* ```
|
|
4232
|
+
*/
|
|
4233
|
+
interface MessageBubbleProps {
|
|
4234
|
+
/**
|
|
4235
|
+
* Message content.
|
|
4236
|
+
*/
|
|
4237
|
+
children: React__default.ReactNode;
|
|
4238
|
+
/**
|
|
4239
|
+
* Content shown in the footer of the message.
|
|
4240
|
+
*/
|
|
4241
|
+
footer?: string;
|
|
4242
|
+
/**
|
|
4243
|
+
* Variant of the footer of the message.
|
|
4244
|
+
*/
|
|
4245
|
+
footerVariant?: 'default' | 'overlay';
|
|
4246
|
+
/**
|
|
4247
|
+
* Placement of the message.
|
|
4248
|
+
*/
|
|
4249
|
+
placement?: MessageBubblePlacement;
|
|
4250
|
+
/**
|
|
4251
|
+
* Whether the message has tail or not.
|
|
4252
|
+
* @default true
|
|
4253
|
+
*/
|
|
4254
|
+
withTail?: boolean;
|
|
4255
|
+
}
|
|
4256
|
+
/**
|
|
4257
|
+
* MessageBubble displays chat-style sender or receiver messages with optional avatar, footer, actions, and reply content.
|
|
4258
|
+
*
|
|
4259
|
+
* @example
|
|
4260
|
+
* ```tsx
|
|
4261
|
+
* import { MessageBubble } from '@revolut/ui-kit-miniapp'
|
|
4262
|
+
*
|
|
4263
|
+
* function MessageExample() {
|
|
4264
|
+
* return (
|
|
4265
|
+
* <MessageBubble footer="10:12" placement="sender">
|
|
4266
|
+
* Message!
|
|
4267
|
+
* </MessageBubble>
|
|
4268
|
+
* )
|
|
4269
|
+
* }
|
|
4270
|
+
* ```
|
|
4271
|
+
*/
|
|
4272
|
+
declare const MessageBubble: ({ children, footer, footerVariant, placement, withTail, }: MessageBubbleProps) => react_jsx_runtime.JSX.Element;
|
|
4273
|
+
|
|
3619
4274
|
/**
|
|
3620
4275
|
* Props for the Placeholder component.
|
|
3621
4276
|
*
|
|
@@ -3645,7 +4300,7 @@ interface PlaceholderProps {
|
|
|
3645
4300
|
/**
|
|
3646
4301
|
* Placeholder action.
|
|
3647
4302
|
*/
|
|
3648
|
-
action?:
|
|
4303
|
+
action?: React__default.ReactNode;
|
|
3649
4304
|
}
|
|
3650
4305
|
/**
|
|
3651
4306
|
* Placeholder component for showing status information.
|
|
@@ -3686,6 +4341,10 @@ interface PopupActionItem {
|
|
|
3686
4341
|
* Visual style variant of the button.
|
|
3687
4342
|
*/
|
|
3688
4343
|
variant?: ButtonVariant;
|
|
4344
|
+
/**
|
|
4345
|
+
* Whether the action is disabled
|
|
4346
|
+
*/
|
|
4347
|
+
disabled?: boolean;
|
|
3689
4348
|
}
|
|
3690
4349
|
/**
|
|
3691
4350
|
* Props for the Popup component.
|
|
@@ -3702,7 +4361,7 @@ interface PopupProps {
|
|
|
3702
4361
|
/**
|
|
3703
4362
|
* Modal content.
|
|
3704
4363
|
*/
|
|
3705
|
-
children?:
|
|
4364
|
+
children?: React__default.ReactNode;
|
|
3706
4365
|
/**
|
|
3707
4366
|
* Modal title
|
|
3708
4367
|
*/
|
|
@@ -3715,6 +4374,22 @@ interface PopupProps {
|
|
|
3715
4374
|
* Modal actions
|
|
3716
4375
|
*/
|
|
3717
4376
|
actions?: PopupActionItem[];
|
|
4377
|
+
/**
|
|
4378
|
+
* Modal bottom content
|
|
4379
|
+
*/
|
|
4380
|
+
footer?: React__default.ReactNode;
|
|
4381
|
+
/**
|
|
4382
|
+
* Modal header variant
|
|
4383
|
+
*/
|
|
4384
|
+
headerVariant?: 'modal' | 'item';
|
|
4385
|
+
/**
|
|
4386
|
+
* Modal header end icon or image
|
|
4387
|
+
*/
|
|
4388
|
+
avatar?: IconName | string;
|
|
4389
|
+
/**
|
|
4390
|
+
* Icon to show as close button
|
|
4391
|
+
*/
|
|
4392
|
+
closeButtonIcon?: 'back' | 'close';
|
|
3718
4393
|
}
|
|
3719
4394
|
/**
|
|
3720
4395
|
* Popup component for displaying modal content with full screen size.
|
|
@@ -3737,7 +4412,7 @@ interface PopupProps {
|
|
|
3737
4412
|
* }
|
|
3738
4413
|
* ```
|
|
3739
4414
|
*/
|
|
3740
|
-
declare const Popup: ({ open, onClose, children, title, description, actions, }: PopupProps) => react_jsx_runtime.JSX.Element;
|
|
4415
|
+
declare const Popup: ({ open, onClose, children, title, description, actions, footer, headerVariant, avatar, closeButtonIcon, }: PopupProps) => react_jsx_runtime.JSX.Element;
|
|
3741
4416
|
|
|
3742
4417
|
/**
|
|
3743
4418
|
* Progress steps item definition.
|
|
@@ -3879,7 +4554,7 @@ interface SpacerProps extends NativeDivProps {
|
|
|
3879
4554
|
*/
|
|
3880
4555
|
declare const Spacer: ({ width, height, ...rest }: SpacerProps) => react_jsx_runtime.JSX.Element;
|
|
3881
4556
|
|
|
3882
|
-
type NativeInputProps$1 = Omit<
|
|
4557
|
+
type NativeInputProps$1 = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'children' | 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'type' | 'color'>;
|
|
3883
4558
|
/**
|
|
3884
4559
|
* Props for the Radio component.
|
|
3885
4560
|
*
|
|
@@ -3911,7 +4586,7 @@ interface RadioProps extends NativeInputProps$1 {
|
|
|
3911
4586
|
/**
|
|
3912
4587
|
* Callback fired when the radio state changes.
|
|
3913
4588
|
*/
|
|
3914
|
-
onChange?:
|
|
4589
|
+
onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
|
|
3915
4590
|
/**
|
|
3916
4591
|
* Name attribute for grouping radio buttons.
|
|
3917
4592
|
*/
|
|
@@ -4025,11 +4700,11 @@ interface SubheaderProps extends NativeDivProps {
|
|
|
4025
4700
|
/**
|
|
4026
4701
|
* Content displayed on the right side of the subheader.
|
|
4027
4702
|
*/
|
|
4028
|
-
side?:
|
|
4703
|
+
side?: React__default.ReactNode;
|
|
4029
4704
|
/**
|
|
4030
4705
|
* Main title content.
|
|
4031
4706
|
*/
|
|
4032
|
-
children:
|
|
4707
|
+
children: React__default.ReactNode;
|
|
4033
4708
|
}
|
|
4034
4709
|
/**
|
|
4035
4710
|
* Subheader component for section titles.
|
|
@@ -4093,7 +4768,7 @@ interface SubheaderProps extends NativeDivProps {
|
|
|
4093
4768
|
*/
|
|
4094
4769
|
declare const Subheader: ({ variant, side, children, ...rest }: SubheaderProps) => react_jsx_runtime.JSX.Element;
|
|
4095
4770
|
|
|
4096
|
-
type NativeInputProps = Omit<
|
|
4771
|
+
type NativeInputProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'children' | 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'type' | 'color'>;
|
|
4097
4772
|
/**
|
|
4098
4773
|
* Props for the Switch component.
|
|
4099
4774
|
*
|
|
@@ -4123,7 +4798,7 @@ interface SwitchProps extends NativeInputProps {
|
|
|
4123
4798
|
/**
|
|
4124
4799
|
* Callback fired when the switch state changes.
|
|
4125
4800
|
*/
|
|
4126
|
-
onChange?:
|
|
4801
|
+
onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
|
|
4127
4802
|
}
|
|
4128
4803
|
/**
|
|
4129
4804
|
* Switch component for toggling between on and off states.
|
|
@@ -4398,7 +5073,7 @@ interface TextProps extends NativeSpanProps {
|
|
|
4398
5073
|
/**
|
|
4399
5074
|
* Text content.
|
|
4400
5075
|
*/
|
|
4401
|
-
children?:
|
|
5076
|
+
children?: React__default.ReactNode;
|
|
4402
5077
|
}
|
|
4403
5078
|
/**
|
|
4404
5079
|
* Text component for rendering styled typography.
|
|
@@ -4454,7 +5129,7 @@ interface TextProps extends NativeSpanProps {
|
|
|
4454
5129
|
*/
|
|
4455
5130
|
declare const Text: ({ textStyle, as, children, ...rest }: TextProps) => react_jsx_runtime.JSX.Element;
|
|
4456
5131
|
|
|
4457
|
-
type NativeTextAreaProps = Omit<
|
|
5132
|
+
type NativeTextAreaProps = Omit<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'style' | 'children' | 'value' | 'defaultValue' | 'onChange' | 'disabled' | 'readOnly'>;
|
|
4458
5133
|
/**
|
|
4459
5134
|
* Props for the TextArea component.
|
|
4460
5135
|
*
|
|
@@ -4479,7 +5154,7 @@ interface TextAreaProps extends NativeTextAreaProps {
|
|
|
4479
5154
|
/**
|
|
4480
5155
|
* Callback fired when the textarea value changes.
|
|
4481
5156
|
*/
|
|
4482
|
-
onChange?:
|
|
5157
|
+
onChange?: React__default.ChangeEventHandler<HTMLTextAreaElement>;
|
|
4483
5158
|
/**
|
|
4484
5159
|
* Label displayed above the textarea.
|
|
4485
5160
|
*/
|
|
@@ -4506,11 +5181,11 @@ interface TextAreaProps extends NativeTextAreaProps {
|
|
|
4506
5181
|
/**
|
|
4507
5182
|
* Description or helper text shown below the textarea.
|
|
4508
5183
|
*/
|
|
4509
|
-
description?:
|
|
5184
|
+
description?: React__default.ReactNode;
|
|
4510
5185
|
/**
|
|
4511
5186
|
* Error message shown when invalid.
|
|
4512
5187
|
*/
|
|
4513
|
-
errorMessage?:
|
|
5188
|
+
errorMessage?: React__default.ReactNode;
|
|
4514
5189
|
/**
|
|
4515
5190
|
* Number of visible text lines.
|
|
4516
5191
|
* @default 1
|
|
@@ -4652,7 +5327,7 @@ interface ToggleButtonProps extends Omit<NativeButtonProps, 'onChange' | 'onTogg
|
|
|
4652
5327
|
/**
|
|
4653
5328
|
* Button content.
|
|
4654
5329
|
*/
|
|
4655
|
-
children:
|
|
5330
|
+
children: React__default.ReactNode;
|
|
4656
5331
|
}
|
|
4657
5332
|
/**
|
|
4658
5333
|
* ToggleButton component for toggle-able button states.
|
|
@@ -4742,7 +5417,7 @@ interface VisuallyHiddenProps {
|
|
|
4742
5417
|
/**
|
|
4743
5418
|
* Content to hide visually but keep accessible to screen readers.
|
|
4744
5419
|
*/
|
|
4745
|
-
children?:
|
|
5420
|
+
children?: React__default.ReactNode;
|
|
4746
5421
|
}
|
|
4747
5422
|
/**
|
|
4748
5423
|
* VisuallyHidden component for accessible hidden content.
|
|
@@ -4837,7 +5512,7 @@ interface VStackProps extends NativeSpanProps {
|
|
|
4837
5512
|
/**
|
|
4838
5513
|
* Stack content.
|
|
4839
5514
|
*/
|
|
4840
|
-
children?:
|
|
5515
|
+
children?: React__default.ReactNode;
|
|
4841
5516
|
}
|
|
4842
5517
|
/**
|
|
4843
5518
|
* VStack component for vertical layout.
|
|
@@ -4921,7 +5596,7 @@ interface RootProviderProps {
|
|
|
4921
5596
|
/**
|
|
4922
5597
|
* Application content.
|
|
4923
5598
|
*/
|
|
4924
|
-
children:
|
|
5599
|
+
children: React__default.ReactNode;
|
|
4925
5600
|
}
|
|
4926
5601
|
/**
|
|
4927
5602
|
* RootProvider component that sets up the theme and internationalisation context.
|
|
@@ -4959,11 +5634,11 @@ interface BottomSheetHeaderProps {
|
|
|
4959
5634
|
/**
|
|
4960
5635
|
* Avatar or icon displayed at the top of the header.
|
|
4961
5636
|
*/
|
|
4962
|
-
avatar?:
|
|
5637
|
+
avatar?: React__default.ReactNode;
|
|
4963
5638
|
/**
|
|
4964
5639
|
* Description text displayed below the title.
|
|
4965
5640
|
*/
|
|
4966
|
-
description?:
|
|
5641
|
+
description?: React__default.ReactNode;
|
|
4967
5642
|
/**
|
|
4968
5643
|
* Custom label for the close button.
|
|
4969
5644
|
*/
|
|
@@ -4971,7 +5646,7 @@ interface BottomSheetHeaderProps {
|
|
|
4971
5646
|
/**
|
|
4972
5647
|
* Title content.
|
|
4973
5648
|
*/
|
|
4974
|
-
children?:
|
|
5649
|
+
children?: React__default.ReactNode;
|
|
4975
5650
|
}
|
|
4976
5651
|
declare const BottomSheetHeader: ({ avatar, description, labelButtonClose, children, }: BottomSheetHeaderProps) => react_jsx_runtime.JSX.Element;
|
|
4977
5652
|
/**
|
|
@@ -4981,7 +5656,7 @@ interface BottomSheetContentProps {
|
|
|
4981
5656
|
/**
|
|
4982
5657
|
* Content to display in the body of the bottom sheet.
|
|
4983
5658
|
*/
|
|
4984
|
-
children?:
|
|
5659
|
+
children?: React__default.ReactNode;
|
|
4985
5660
|
}
|
|
4986
5661
|
declare const BottomSheetContent: ({ children }: BottomSheetContentProps) => react_jsx_runtime.JSX.Element;
|
|
4987
5662
|
/**
|
|
@@ -4991,7 +5666,7 @@ interface BottomSheetActionsProps {
|
|
|
4991
5666
|
/**
|
|
4992
5667
|
* Action buttons to display at the bottom.
|
|
4993
5668
|
*/
|
|
4994
|
-
children?:
|
|
5669
|
+
children?: React__default.ReactNode;
|
|
4995
5670
|
}
|
|
4996
5671
|
declare const BottomSheetActions: ({ children }: BottomSheetActionsProps) => react_jsx_runtime.JSX.Element;
|
|
4997
5672
|
/**
|
|
@@ -5009,9 +5684,9 @@ interface BottomSheetProps {
|
|
|
5009
5684
|
/**
|
|
5010
5685
|
* Bottom sheet content (typically Header, Content, and Actions).
|
|
5011
5686
|
*/
|
|
5012
|
-
children?:
|
|
5687
|
+
children?: React__default.ReactNode;
|
|
5013
5688
|
}
|
|
5014
|
-
interface BottomSheetComponent extends
|
|
5689
|
+
interface BottomSheetComponent extends React__default.FC<BottomSheetProps> {
|
|
5015
5690
|
Header: typeof BottomSheetHeader;
|
|
5016
5691
|
Content: typeof BottomSheetContent;
|
|
5017
5692
|
Actions: typeof BottomSheetActions;
|
|
@@ -5086,9 +5761,9 @@ interface PageHeaderActionItem {
|
|
|
5086
5761
|
onClick: () => void;
|
|
5087
5762
|
}
|
|
5088
5763
|
/**
|
|
5089
|
-
*
|
|
5764
|
+
* Base props for the Page.Header component, shared across all variants.
|
|
5090
5765
|
*/
|
|
5091
|
-
interface
|
|
5766
|
+
interface PageHeaderBaseProps extends NativeHeadingProps {
|
|
5092
5767
|
/**
|
|
5093
5768
|
* Callback when the back button is clicked.
|
|
5094
5769
|
*/
|
|
@@ -5100,19 +5775,19 @@ interface PageHeaderProps extends NativeHeadingProps {
|
|
|
5100
5775
|
/**
|
|
5101
5776
|
* Custom label for the close button.
|
|
5102
5777
|
*/
|
|
5103
|
-
labelButtonClose?:
|
|
5778
|
+
labelButtonClose?: React__default.ReactNode;
|
|
5104
5779
|
/**
|
|
5105
5780
|
* Custom label for the back button.
|
|
5106
5781
|
*/
|
|
5107
|
-
labelButtonBack?:
|
|
5782
|
+
labelButtonBack?: React__default.ReactNode;
|
|
5108
5783
|
/**
|
|
5109
5784
|
* Subtitle text displayed below the title.
|
|
5110
5785
|
*/
|
|
5111
|
-
subtitle?:
|
|
5786
|
+
subtitle?: React__default.ReactNode;
|
|
5112
5787
|
/**
|
|
5113
5788
|
* Description text displayed below the subtitle.
|
|
5114
5789
|
*/
|
|
5115
|
-
description?:
|
|
5790
|
+
description?: React__default.ReactNode;
|
|
5116
5791
|
/**
|
|
5117
5792
|
* Whether the header is in a loading state.
|
|
5118
5793
|
* @default false
|
|
@@ -5121,13 +5796,34 @@ interface PageHeaderProps extends NativeHeadingProps {
|
|
|
5121
5796
|
/**
|
|
5122
5797
|
* Header title content.
|
|
5123
5798
|
*/
|
|
5124
|
-
children?:
|
|
5799
|
+
children?: React__default.ReactNode;
|
|
5800
|
+
/**
|
|
5801
|
+
* Whether the header is compact.
|
|
5802
|
+
*/
|
|
5803
|
+
compact?: boolean;
|
|
5804
|
+
}
|
|
5805
|
+
/**
|
|
5806
|
+
* Header end content. `actions` and `avatar` are mutually exclusive: a header
|
|
5807
|
+
* shows either a set of actions or a single avatar, never both.
|
|
5808
|
+
*/
|
|
5809
|
+
type PageHeaderEndProps = {
|
|
5125
5810
|
/**
|
|
5126
5811
|
* Header actions.
|
|
5127
5812
|
*/
|
|
5128
5813
|
actions?: PageHeaderActionItem[];
|
|
5129
|
-
|
|
5130
|
-
|
|
5814
|
+
avatar?: never;
|
|
5815
|
+
} | {
|
|
5816
|
+
/**
|
|
5817
|
+
* Header end icon or image
|
|
5818
|
+
*/
|
|
5819
|
+
avatar?: IconName | string;
|
|
5820
|
+
actions?: never;
|
|
5821
|
+
};
|
|
5822
|
+
/**
|
|
5823
|
+
* Props for the Page.Header component.
|
|
5824
|
+
*/
|
|
5825
|
+
type PageHeaderProps = PageHeaderBaseProps & PageHeaderEndProps;
|
|
5826
|
+
declare const PageHeader: ({ onBack, onClose, labelButtonClose, labelButtonBack, subtitle, description, loading, children, actions, compact, avatar, ...rest }: PageHeaderProps) => react_jsx_runtime.JSX.Element;
|
|
5131
5827
|
/**
|
|
5132
5828
|
* Props for the Page.Main component.
|
|
5133
5829
|
*/
|
|
@@ -5135,13 +5831,17 @@ interface PageMainProps extends NativeMainProps {
|
|
|
5135
5831
|
/**
|
|
5136
5832
|
* Main content.
|
|
5137
5833
|
*/
|
|
5138
|
-
children?:
|
|
5834
|
+
children?: React__default.ReactNode;
|
|
5139
5835
|
/**
|
|
5140
5836
|
* Action buttons displayed at the bottom of the page.
|
|
5141
5837
|
*/
|
|
5142
|
-
actions?:
|
|
5838
|
+
actions?: React__default.ReactNode;
|
|
5839
|
+
/**
|
|
5840
|
+
* Actions container gradient
|
|
5841
|
+
*/
|
|
5842
|
+
actionsGradient?: ActionsGradient;
|
|
5143
5843
|
}
|
|
5144
|
-
declare const PageMain: ({ children, actions, ...rest }: PageMainProps) => react_jsx_runtime.JSX.Element;
|
|
5844
|
+
declare const PageMain: ({ children, actions, actionsGradient, ...rest }: PageMainProps) => react_jsx_runtime.JSX.Element;
|
|
5145
5845
|
/**
|
|
5146
5846
|
* Props for the Page.Tabs component.
|
|
5147
5847
|
*/
|
|
@@ -5149,7 +5849,7 @@ interface PageTabsProps extends NativeDivProps {
|
|
|
5149
5849
|
/**
|
|
5150
5850
|
* Tabs content (typically TabBar or similar).
|
|
5151
5851
|
*/
|
|
5152
|
-
children?:
|
|
5852
|
+
children?: React__default.ReactNode;
|
|
5153
5853
|
}
|
|
5154
5854
|
declare const PageTabs: ({ children, ...rest }: PageTabsProps) => react_jsx_runtime.JSX.Element;
|
|
5155
5855
|
/**
|
|
@@ -5159,9 +5859,9 @@ interface PageProps extends NativeDivProps {
|
|
|
5159
5859
|
/**
|
|
5160
5860
|
* Page content (typically Page.Header and Page.Main).
|
|
5161
5861
|
*/
|
|
5162
|
-
children?:
|
|
5862
|
+
children?: React__default.ReactNode;
|
|
5163
5863
|
}
|
|
5164
|
-
interface PageComponent extends
|
|
5864
|
+
interface PageComponent extends React__default.FC<PageProps> {
|
|
5165
5865
|
Header: typeof PageHeader;
|
|
5166
5866
|
Main: typeof PageMain;
|
|
5167
5867
|
Tabs: typeof PageTabs;
|
|
@@ -5220,7 +5920,7 @@ interface StatusSheetAction {
|
|
|
5220
5920
|
/**
|
|
5221
5921
|
* Text to display on the action button.
|
|
5222
5922
|
*/
|
|
5223
|
-
title:
|
|
5923
|
+
title: React__default.ReactNode;
|
|
5224
5924
|
/**
|
|
5225
5925
|
* Callback when the action button is clicked.
|
|
5226
5926
|
*/
|
|
@@ -5242,11 +5942,11 @@ interface StatusSheetOptions {
|
|
|
5242
5942
|
/**
|
|
5243
5943
|
* Title content displayed in the status sheet.
|
|
5244
5944
|
*/
|
|
5245
|
-
title:
|
|
5945
|
+
title: React__default.ReactNode;
|
|
5246
5946
|
/**
|
|
5247
5947
|
* Optional description content displayed below the title.
|
|
5248
5948
|
*/
|
|
5249
|
-
description?:
|
|
5949
|
+
description?: React__default.ReactNode;
|
|
5250
5950
|
/**
|
|
5251
5951
|
* Optional action buttons displayed at the bottom.
|
|
5252
5952
|
*/
|
|
@@ -5445,5 +6145,5 @@ declare const Token: {
|
|
|
5445
6145
|
};
|
|
5446
6146
|
};
|
|
5447
6147
|
|
|
5448
|
-
export { Action, ActionButton, Avatar, Badge, BottomSheet, Button, Calendar, Cell, CellSkeleton, Checkbox, Copyable, DetailsCell, Dropdown, FilterButton, Footnote, Group, HStack, Icon, Image, Input, Link, List, Page, Placeholder, Popup, ProgressSteps, Radio, RootProvider, Search, Spacer, Subheader, Switch, TabBar, Text, TextArea, Toast, ToggleButton, Token, VStack, VisuallyHidden, copyToClipboard, nodeChain, useDateFormat, useDateRangeFormat, useDateTimeFormat, useDropdown, useIsRTL, useMoneyFormat, useStatusSheet, useTimeFormat, useToast };
|
|
5449
|
-
export type { ActionButtonProps, ActionButtonVariant, ActionProps, AvatarProps, AvatarSize, BadgeProps, BottomSheetActionsProps, BottomSheetContentProps, BottomSheetHeaderProps, BottomSheetProps, ButtonProps, ButtonVariant, CalendarDateProps, CalendarDisabledDays, CalendarProps, CalendarRangeProps, CalendarVariant, CellProps, CellVariant, CheckboxProps, CopyableProps, CurrencyDefinition, DateFormatOptions, DateRangeFormatOptions, DateTimeFormatOptions, DetailsCellProps, DropdownOptions, DropdownProps, DropdownState, FilterButtonProps, FootnoteProps, GroupProps, GroupVariant, HStackProps, IconName, IconProps, ImageFit, ImageProp, ImageProps, InputProps, InputType, IntlMessages, LinkProps, ListProps, PageHeaderProps, PageMainProps, PageProps, PageTabsProps, PlaceholderProps, PopupProps, ProgressStepsProps, RadioProps, RootProviderProps, SearchProps, Space, SpacerProps, StackAlignment, StatusSheetAction, StatusSheetInstance, StatusSheetOptions, StatusSheetVariant, SubheaderProps, SubheaderVariant, SwitchProps, TabBarItem, TabBarProps, TabBarVariant, TextAreaProps, TextProps, TextVariant, ThemeBackground, ThemeMode, TimeFormatOptions, ToastActions, ToastProps, ToggleButtonProps, UseMoneyFormatOptions, VStackProps, VisuallyHiddenProps };
|
|
6148
|
+
export { Action, ActionButton, Avatar, Badge, BottomSheet, Button, Calendar, Cell, CellSkeleton, Checkbox, CompactInput, Copyable, DetailsCell, Dropdown, FilterButton, Footnote, Group, HStack, Icon, Image, Input, Link, List, MessageBubble, Page, Placeholder, Popup, ProgressSteps, Radio, RootProvider, Search, Spacer, Subheader, Switch, TabBar, Text, TextArea, Toast, ToggleButton, Token, VStack, VisuallyHidden, copyToClipboard, nodeChain, useDateFormat, useDateRangeFormat, useDateTimeFormat, useDropdown, useIsRTL, useMoneyFormat, useStatusSheet, useTimeFormat, useToast };
|
|
6149
|
+
export type { ActionButtonProps, ActionButtonVariant, ActionProps, AvatarProps, AvatarSize, BadgeProps, BottomSheetActionsProps, BottomSheetContentProps, BottomSheetHeaderProps, BottomSheetProps, ButtonProps, ButtonVariant, CalendarDateProps, CalendarDisabledDays, CalendarProps, CalendarRangeProps, CalendarVariant, CellProps, CellVariant, CheckboxProps, CompactInputProps, CopyableProps, CurrencyDefinition, DateFormatOptions, DateRangeFormatOptions, DateTimeFormatOptions, DetailsCellProps, DropdownOptions, DropdownProps, DropdownState, FilterButtonProps, FootnoteProps, GroupProps, GroupVariant, HStackProps, IconName, IconProps, ImageFit, ImageProp, ImageProps, InputProps, InputType, IntlMessages, LinkProps, ListProps, MessageBubbleProps, PageHeaderProps, PageMainProps, PageProps, PageTabsProps, PlaceholderProps, PopupProps, ProgressStepsProps, RadioProps, RootProviderProps, SearchProps, Space, SpacerProps, StackAlignment, StatusSheetAction, StatusSheetInstance, StatusSheetOptions, StatusSheetVariant, SubheaderProps, SubheaderVariant, SwitchProps, TabBarItem, TabBarProps, TabBarVariant, TextAreaProps, TextProps, TextVariant, ThemeBackground, ThemeMode, TimeFormatOptions, ToastActions, ToastProps, ToggleButtonProps, UseMoneyFormatOptions, VStackProps, VisuallyHiddenProps };
|