@revolut/ui-kit-miniapp 0.0.8 → 0.1.0
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 +6 -7
- package/types/index.d.ts +1062 -402
package/types/index.d.ts
CHANGED
|
@@ -1,23 +1,611 @@
|
|
|
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.apply': "Apply";
|
|
27
|
+
readonly 'action.back': "Back";
|
|
28
|
+
readonly 'action.cancel': "Cancel";
|
|
29
|
+
readonly 'action.clear': "Clear";
|
|
30
|
+
readonly 'action.close': "Close";
|
|
31
|
+
readonly 'action.collapse': "Collapse";
|
|
32
|
+
readonly 'action.collapse-menu': "Collapse menu";
|
|
33
|
+
readonly 'action.copy': "Copy";
|
|
34
|
+
readonly 'action.expand': "Expand";
|
|
35
|
+
readonly 'action.expand-menu': "Expand menu";
|
|
36
|
+
readonly 'action.fca-disclaimer-learn-more': "Take 2 mins to learn more";
|
|
37
|
+
readonly 'action.hide': "Hide";
|
|
38
|
+
readonly 'action.more': "More";
|
|
39
|
+
readonly 'action.next-slide': "Next slide";
|
|
40
|
+
readonly 'action.next': "Next";
|
|
41
|
+
readonly 'action.prev-slide': "Previous slide";
|
|
42
|
+
readonly 'action.prev': "Previous";
|
|
43
|
+
readonly 'action.rate': "Rate";
|
|
44
|
+
readonly 'action.retry': "Retry";
|
|
45
|
+
readonly 'action.select-all': "Select all";
|
|
46
|
+
readonly 'action.select': "Select";
|
|
47
|
+
readonly 'action.show-less': "Show less";
|
|
48
|
+
readonly 'action.show-more': "Show more";
|
|
49
|
+
readonly 'action.show': "Show";
|
|
50
|
+
readonly 'action.sort-asc': "Sort ascending";
|
|
51
|
+
readonly 'action.sort-cancel': "Discard sorting";
|
|
52
|
+
readonly 'action.sort-dsc': "Sort descending";
|
|
53
|
+
readonly 'action.resize-column': "Resize column";
|
|
54
|
+
readonly 'action.remove': "Remove";
|
|
55
|
+
readonly 'action.play': "Play";
|
|
56
|
+
readonly 'action.pause': "Pause";
|
|
57
|
+
readonly 'action.open-global-search': "Open global search";
|
|
58
|
+
readonly 'action.open-profile': "Open profile";
|
|
59
|
+
readonly 'action.open-notifications': "Open notifications";
|
|
60
|
+
readonly 'action.open-app-switcher': "Open app switcher";
|
|
61
|
+
readonly 'action.open-menu': "Open menu";
|
|
62
|
+
readonly 'action.open-filters': "Open filters";
|
|
63
|
+
readonly 'label.apps': "Apps";
|
|
64
|
+
readonly 'label.notifications': "Notifications";
|
|
65
|
+
readonly 'label.accounts': "Accounts";
|
|
66
|
+
readonly 'label.profile': "Profile";
|
|
67
|
+
readonly 'label.empty-state': "Nothing here";
|
|
68
|
+
readonly 'label.failed-state': "Something went wrong";
|
|
69
|
+
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.";
|
|
70
|
+
readonly 'label.more-dialog': "More";
|
|
71
|
+
readonly 'label.no-results-state': "No results found";
|
|
72
|
+
readonly 'label.pending-state': "Loading";
|
|
73
|
+
readonly 'label.search': "Search";
|
|
74
|
+
readonly 'label.min': "Minimum";
|
|
75
|
+
readonly 'label.max': "Maximum";
|
|
76
|
+
readonly 'label.global-search': "Global search";
|
|
77
|
+
readonly 'label.selected': "Selected";
|
|
78
|
+
readonly 'format.in-a-few-moments': "In a few moments";
|
|
79
|
+
readonly 'format.moments-ago': "Moments ago";
|
|
80
|
+
readonly 'label.range': "Range";
|
|
81
|
+
readonly 'label.price': "Price";
|
|
82
|
+
readonly 'label.sum': "Sum";
|
|
83
|
+
readonly 'label.no-open-orders': "No open orders";
|
|
84
|
+
readonly 'label.settings': "Settings";
|
|
85
|
+
readonly 'label.dark': "Dark";
|
|
86
|
+
readonly 'label.light': "Light";
|
|
87
|
+
readonly 'label.system': "System";
|
|
88
|
+
readonly 'label.controlled-by-mode': "Controlled by mode";
|
|
89
|
+
readonly 'label.mode': "Mode";
|
|
90
|
+
readonly 'label.background': "Background";
|
|
91
|
+
readonly 'label.resize': "Resize";
|
|
92
|
+
readonly 'label.navigation-style': "Navigation style";
|
|
93
|
+
readonly 'label.icons-and-text': "Icons and text";
|
|
94
|
+
readonly 'label.icons-only': "Icons only";
|
|
95
|
+
readonly 'label.shortcuts': "Keyboard shortcuts";
|
|
96
|
+
readonly 'label.shortcut-centre': "Shortcut centre";
|
|
97
|
+
readonly 'label.general': "General";
|
|
98
|
+
readonly 'label.back': "Back";
|
|
99
|
+
readonly 'label.forward': "Forward";
|
|
100
|
+
readonly 'label.toggle-navigation': "Collapse/Expand navigation";
|
|
101
|
+
readonly 'label.menu-navigation': "Menu navigation";
|
|
102
|
+
readonly 'label.navigate-menu-item': "Navigate to menu item";
|
|
103
|
+
};
|
|
104
|
+
type IntlMessages = Record<keyof typeof DEFAULT_MESSAGES, string>;
|
|
105
|
+
|
|
106
|
+
type ValueOf<T> = T extends unknown[] | Readonly<unknown[]> ? T[number] : T[keyof T];
|
|
107
|
+
|
|
108
|
+
declare const colorChannel: {
|
|
109
|
+
readonly accent: "var(--rui-color-channel-accent)";
|
|
110
|
+
readonly accentNeutral: "var(--rui-color-channel-accent-neutral)";
|
|
111
|
+
readonly onAccent: "var(--rui-color-channel-on-accent)";
|
|
112
|
+
readonly onAccentNeutral: "var(--rui-color-channel-on-accent-neutral)";
|
|
113
|
+
readonly blue: "var(--rui-color-channel-blue)";
|
|
114
|
+
readonly coldBlue: "var(--rui-color-channel-cold-blue)";
|
|
115
|
+
readonly pink: "var(--rui-color-channel-pink)";
|
|
116
|
+
readonly green: "var(--rui-color-channel-green)";
|
|
117
|
+
readonly orange: "var(--rui-color-channel-orange)";
|
|
118
|
+
readonly red: "var(--rui-color-channel-red)";
|
|
119
|
+
readonly deepPink: "var(--rui-color-channel-deep-pink)";
|
|
120
|
+
readonly terracotta: "var(--rui-color-channel-terracotta)";
|
|
121
|
+
readonly yellow: "var(--rui-color-channel-yellow)";
|
|
122
|
+
readonly lime: "var(--rui-color-channel-lime)";
|
|
123
|
+
readonly lightGreen: "var(--rui-color-channel-light-green)";
|
|
124
|
+
readonly teal: "var(--rui-color-channel-teal)";
|
|
125
|
+
readonly cyan: "var(--rui-color-channel-cyan)";
|
|
126
|
+
readonly lightBlue: "var(--rui-color-channel-light-blue)";
|
|
127
|
+
readonly indigo: "var(--rui-color-channel-indigo)";
|
|
128
|
+
readonly deepPurple: "var(--rui-color-channel-deep-purple)";
|
|
129
|
+
readonly purple: "var(--rui-color-channel-purple)";
|
|
130
|
+
readonly brown: "var(--rui-color-channel-brown)";
|
|
131
|
+
readonly deepGrey: "var(--rui-color-channel-deep-grey)";
|
|
132
|
+
readonly black: "var(--rui-color-channel-black)";
|
|
133
|
+
readonly white: "var(--rui-color-channel-white)";
|
|
134
|
+
readonly grey50: "var(--rui-color-channel-grey-50)";
|
|
135
|
+
readonly grey20: "var(--rui-color-channel-grey-20)";
|
|
136
|
+
readonly grey10: "var(--rui-color-channel-grey-10)";
|
|
137
|
+
readonly grey8: "var(--rui-color-channel-grey-8)";
|
|
138
|
+
readonly grey5: "var(--rui-color-channel-grey-5)";
|
|
139
|
+
readonly grey2: "var(--rui-color-channel-grey-2)";
|
|
140
|
+
readonly greyTone2: "var(--rui-color-channel-grey-tone-2)";
|
|
141
|
+
readonly actionBlue: "var(--rui-color-channel-action-blue)";
|
|
142
|
+
readonly actionBlueNeutral: "var(--rui-color-channel-action-blue-neutral)";
|
|
143
|
+
readonly background: "var(--rui-color-channel-background)";
|
|
144
|
+
readonly foreground: "var(--rui-color-channel-foreground)";
|
|
145
|
+
readonly layoutBackground: "var(--rui-color-channel-layout-background)";
|
|
146
|
+
readonly actionBackground: "var(--rui-color-channel-action-background)";
|
|
147
|
+
readonly actionBackgroundNeutral: "var(--rui-color-channel-action-background-neutral)";
|
|
148
|
+
readonly groupedBackground: "var(--rui-color-channel-grouped-background)";
|
|
149
|
+
readonly widgetBackground: "var(--rui-color-channel-widget-background)";
|
|
150
|
+
readonly popoverBackground: "var(--rui-color-channel-popover-background)";
|
|
151
|
+
readonly success: "var(--rui-color-channel-success)";
|
|
152
|
+
readonly warning: "var(--rui-color-channel-warning)";
|
|
153
|
+
readonly danger: "var(--rui-color-channel-danger)";
|
|
154
|
+
readonly inactive: "var(--rui-color-channel-inactive)";
|
|
155
|
+
readonly positive: "var(--rui-color-channel-positive)";
|
|
156
|
+
readonly negative: "var(--rui-color-channel-negative)";
|
|
157
|
+
readonly static: "var(--rui-color-channel-static)";
|
|
158
|
+
};
|
|
159
|
+
type BaseColor = keyof typeof colorChannel;
|
|
160
|
+
type Opacity = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
|
|
161
|
+
type BaseColorWithOpacity = BaseColor | `${Exclude<BaseColor, 'background' | 'foreground' | 'layoutBackground' | 'actionBackground' | 'groupedBackground' | 'widgetBackground'>}_${Opacity}`;
|
|
162
|
+
type Color$1 = keyof typeof color | BaseColorWithOpacity;
|
|
163
|
+
declare const color: {
|
|
164
|
+
readonly accent: "var(--rui-color-accent)";
|
|
165
|
+
readonly accentNeutral: "var(--rui-color-accent-neutral)";
|
|
166
|
+
readonly blue: "var(--rui-color-blue)";
|
|
167
|
+
readonly coldBlue: "var(--rui-color-cold-blue)";
|
|
168
|
+
readonly pink: "var(--rui-color-pink)";
|
|
169
|
+
readonly green: "var(--rui-color-green)";
|
|
170
|
+
readonly orange: "var(--rui-color-orange)";
|
|
171
|
+
readonly red: "var(--rui-color-red)";
|
|
172
|
+
readonly deepPink: "var(--rui-color-deep-pink)";
|
|
173
|
+
readonly terracotta: "var(--rui-color-terracotta)";
|
|
174
|
+
readonly yellow: "var(--rui-color-yellow)";
|
|
175
|
+
readonly lime: "var(--rui-color-lime)";
|
|
176
|
+
readonly lightGreen: "var(--rui-color-light-green)";
|
|
177
|
+
readonly teal: "var(--rui-color-teal)";
|
|
178
|
+
readonly cyan: "var(--rui-color-cyan)";
|
|
179
|
+
readonly lightBlue: "var(--rui-color-light-blue)";
|
|
180
|
+
readonly indigo: "var(--rui-color-indigo)";
|
|
181
|
+
readonly deepPurple: "var(--rui-color-deep-purple)";
|
|
182
|
+
readonly purple: "var(--rui-color-purple)";
|
|
183
|
+
readonly brown: "var(--rui-color-brown)";
|
|
184
|
+
readonly deepGrey: "var(--rui-color-deep-grey)";
|
|
185
|
+
readonly black: "var(--rui-color-black)";
|
|
186
|
+
readonly grey50: "var(--rui-color-grey-50)";
|
|
187
|
+
readonly grey20: "var(--rui-color-grey-20)";
|
|
188
|
+
readonly grey10: "var(--rui-color-grey-10)";
|
|
189
|
+
readonly grey5: "var(--rui-color-grey-5)";
|
|
190
|
+
readonly grey8: "var(--rui-color-grey-8)";
|
|
191
|
+
readonly grey2: "var(--rui-color-grey-2)";
|
|
192
|
+
readonly white: "var(--rui-color-white)";
|
|
193
|
+
readonly actionBlue: "var(--rui-color-action-blue)";
|
|
194
|
+
readonly actionBlueNeutral: "var(--rui-color-action-blue-neutral)";
|
|
195
|
+
readonly searchBackground: "var(--rui-color-search-background)";
|
|
196
|
+
readonly segmentedWidgetBackground: "var(--rui-color-segmented-widget-background)";
|
|
197
|
+
readonly segmentedBackground: "var(--rui-color-segmented-background)";
|
|
198
|
+
readonly segmentedActive: "var(--rui-color-segmented-active)";
|
|
199
|
+
readonly onAccent: "var(--rui-color-on-accent)";
|
|
200
|
+
readonly onAccentNeutral: "var(--rui-color-on-accent-neutral)";
|
|
201
|
+
readonly actionPhotoHeaderText: "var(--rui-color-action-photo-header-text)";
|
|
202
|
+
readonly actionPhotoHeaderTextNeutral: "var(--rui-color-action-photo-header-text-neutral)";
|
|
203
|
+
readonly actionPhotoHeaderBackground: "var(--rui-color-action-photo-header-background)";
|
|
204
|
+
readonly actionPhotoHeaderBackgroundNeutral: "var(--rui-color-action-photo-header-background-neutral)";
|
|
205
|
+
readonly redActionBackground: "var(--rui-color-red-action-background)";
|
|
206
|
+
readonly actionBackground: "var(--rui-color-action-background)";
|
|
207
|
+
readonly actionBackgroundNeutral: "var(--rui-color-action-background-neutral)";
|
|
208
|
+
readonly widgetBackground: "var(--rui-color-widget-background)";
|
|
209
|
+
readonly groupedBackground: "var(--rui-color-grouped-background)";
|
|
210
|
+
readonly popoverBackground: "var(--rui-color-popover-background)";
|
|
211
|
+
readonly nestedBackground: "var(--rui-color-nested-background)";
|
|
212
|
+
readonly background: "var(--rui-color-background)";
|
|
213
|
+
readonly greyTone2: "var(--rui-color-grey-tone-2)";
|
|
214
|
+
readonly greyTone5: "var(--rui-color-grey-tone-5)";
|
|
215
|
+
readonly greyTone8: "var(--rui-color-grey-tone-8)";
|
|
216
|
+
readonly greyTone10: "var(--rui-color-grey-tone-10)";
|
|
217
|
+
readonly greyTone20: "var(--rui-color-grey-tone-20)";
|
|
218
|
+
readonly greyTone50: "var(--rui-color-grey-tone-50)";
|
|
219
|
+
readonly foreground: "var(--rui-color-foreground)";
|
|
220
|
+
readonly actionLabel: "var(--rui-color-action-label)";
|
|
221
|
+
readonly actionLabelNeutral: "var(--rui-color-action-label-neutral)";
|
|
222
|
+
readonly inputError: "var(--rui-color-input-error)";
|
|
223
|
+
readonly inputErrorFocus: "var(--rui-color-input-error-focus)";
|
|
224
|
+
readonly disabledBackground: "var(--rui-color-disabled-background)";
|
|
225
|
+
/** @deprecated Use `static` instead */
|
|
226
|
+
readonly progressNeutral: "var(--rui-color-static)";
|
|
227
|
+
/** @deprecated Use `positive` instead */
|
|
228
|
+
readonly up: "var(--rui-color-positive)";
|
|
229
|
+
/** @deprecated Use `negative` instead */
|
|
230
|
+
readonly down: "var(--rui-color-negative)";
|
|
231
|
+
readonly success: "var(--rui-color-success)";
|
|
232
|
+
readonly warning: "var(--rui-color-warning)";
|
|
233
|
+
readonly danger: "var(--rui-color-danger)";
|
|
234
|
+
readonly inactive: "var(--rui-color-inactive)";
|
|
235
|
+
/** @deprecated Use `inactive` instead */
|
|
236
|
+
readonly neutral: "var(--rui-color-inactive)";
|
|
237
|
+
readonly positive: "var(--rui-color-positive)";
|
|
238
|
+
readonly negative: "var(--rui-color-negative)";
|
|
239
|
+
readonly static: "var(--rui-color-static)";
|
|
240
|
+
readonly shimmer: "var(--rui-color-shimmer)";
|
|
241
|
+
readonly onShimmer: "var(--rui-color-on-shimmer)";
|
|
242
|
+
readonly layoutBackground: "var(--rui-color-grouped-background)";
|
|
243
|
+
readonly modalOverlay: "var(--rui-color-modal-overlay)";
|
|
244
|
+
readonly metalDark: "var(--rui-color-metal-dark)";
|
|
245
|
+
readonly metalLight: "var(--rui-color-metal-light)";
|
|
246
|
+
readonly plus: "var(--rui-color-plus)";
|
|
247
|
+
readonly premiumDark: "var(--rui-color-premium-dark)";
|
|
248
|
+
readonly premiumLight: "var(--rui-color-premium-light)";
|
|
249
|
+
readonly premiumMid: "var(--rui-color-premium-mid)";
|
|
250
|
+
readonly ultraDark: "var(--rui-color-ultra-dark)";
|
|
251
|
+
readonly ultraLight: "var(--rui-color-ultra-light)";
|
|
252
|
+
readonly ultraLightBlue: "var(--rui-color-ultra-light-blue)";
|
|
253
|
+
readonly ultraMid: "var(--rui-color-ultra-mid)";
|
|
254
|
+
};
|
|
255
|
+
declare const Token$1: {
|
|
256
|
+
readonly breakpoint: {
|
|
257
|
+
readonly sm: "600px";
|
|
258
|
+
readonly md: "840px";
|
|
259
|
+
readonly lg: "1200px";
|
|
260
|
+
readonly xl: "1600px";
|
|
261
|
+
readonly xxl: "1920px";
|
|
262
|
+
};
|
|
263
|
+
readonly colorChannel: {
|
|
264
|
+
readonly accent: "var(--rui-color-channel-accent)";
|
|
265
|
+
readonly accentNeutral: "var(--rui-color-channel-accent-neutral)";
|
|
266
|
+
readonly onAccent: "var(--rui-color-channel-on-accent)";
|
|
267
|
+
readonly onAccentNeutral: "var(--rui-color-channel-on-accent-neutral)";
|
|
268
|
+
readonly blue: "var(--rui-color-channel-blue)";
|
|
269
|
+
readonly coldBlue: "var(--rui-color-channel-cold-blue)";
|
|
270
|
+
readonly pink: "var(--rui-color-channel-pink)";
|
|
271
|
+
readonly green: "var(--rui-color-channel-green)";
|
|
272
|
+
readonly orange: "var(--rui-color-channel-orange)";
|
|
273
|
+
readonly red: "var(--rui-color-channel-red)";
|
|
274
|
+
readonly deepPink: "var(--rui-color-channel-deep-pink)";
|
|
275
|
+
readonly terracotta: "var(--rui-color-channel-terracotta)";
|
|
276
|
+
readonly yellow: "var(--rui-color-channel-yellow)";
|
|
277
|
+
readonly lime: "var(--rui-color-channel-lime)";
|
|
278
|
+
readonly lightGreen: "var(--rui-color-channel-light-green)";
|
|
279
|
+
readonly teal: "var(--rui-color-channel-teal)";
|
|
280
|
+
readonly cyan: "var(--rui-color-channel-cyan)";
|
|
281
|
+
readonly lightBlue: "var(--rui-color-channel-light-blue)";
|
|
282
|
+
readonly indigo: "var(--rui-color-channel-indigo)";
|
|
283
|
+
readonly deepPurple: "var(--rui-color-channel-deep-purple)";
|
|
284
|
+
readonly purple: "var(--rui-color-channel-purple)";
|
|
285
|
+
readonly brown: "var(--rui-color-channel-brown)";
|
|
286
|
+
readonly deepGrey: "var(--rui-color-channel-deep-grey)";
|
|
287
|
+
readonly black: "var(--rui-color-channel-black)";
|
|
288
|
+
readonly white: "var(--rui-color-channel-white)";
|
|
289
|
+
readonly grey50: "var(--rui-color-channel-grey-50)";
|
|
290
|
+
readonly grey20: "var(--rui-color-channel-grey-20)";
|
|
291
|
+
readonly grey10: "var(--rui-color-channel-grey-10)";
|
|
292
|
+
readonly grey8: "var(--rui-color-channel-grey-8)";
|
|
293
|
+
readonly grey5: "var(--rui-color-channel-grey-5)";
|
|
294
|
+
readonly grey2: "var(--rui-color-channel-grey-2)";
|
|
295
|
+
readonly greyTone2: "var(--rui-color-channel-grey-tone-2)";
|
|
296
|
+
readonly actionBlue: "var(--rui-color-channel-action-blue)";
|
|
297
|
+
readonly actionBlueNeutral: "var(--rui-color-channel-action-blue-neutral)";
|
|
298
|
+
readonly background: "var(--rui-color-channel-background)";
|
|
299
|
+
readonly foreground: "var(--rui-color-channel-foreground)";
|
|
300
|
+
readonly layoutBackground: "var(--rui-color-channel-layout-background)";
|
|
301
|
+
readonly actionBackground: "var(--rui-color-channel-action-background)";
|
|
302
|
+
readonly actionBackgroundNeutral: "var(--rui-color-channel-action-background-neutral)";
|
|
303
|
+
readonly groupedBackground: "var(--rui-color-channel-grouped-background)";
|
|
304
|
+
readonly widgetBackground: "var(--rui-color-channel-widget-background)";
|
|
305
|
+
readonly popoverBackground: "var(--rui-color-channel-popover-background)";
|
|
306
|
+
readonly success: "var(--rui-color-channel-success)";
|
|
307
|
+
readonly warning: "var(--rui-color-channel-warning)";
|
|
308
|
+
readonly danger: "var(--rui-color-channel-danger)";
|
|
309
|
+
readonly inactive: "var(--rui-color-channel-inactive)";
|
|
310
|
+
readonly positive: "var(--rui-color-channel-positive)";
|
|
311
|
+
readonly negative: "var(--rui-color-channel-negative)";
|
|
312
|
+
readonly static: "var(--rui-color-channel-static)";
|
|
313
|
+
};
|
|
314
|
+
readonly color: Record<Color$1, string>;
|
|
315
|
+
readonly duration: {
|
|
316
|
+
readonly xs: "var(--rui-duration-xs)";
|
|
317
|
+
readonly sm: "var(--rui-duration-sm)";
|
|
318
|
+
readonly md: "var(--rui-duration-md)";
|
|
319
|
+
readonly lg: "var(--rui-duration-lg)";
|
|
320
|
+
readonly xl: "var(--rui-duration-xl)";
|
|
321
|
+
};
|
|
322
|
+
readonly easing: {
|
|
323
|
+
readonly default: "var(--rui-easing-default)";
|
|
324
|
+
readonly shadow: "var(--rui-easing-shadow)";
|
|
325
|
+
readonly toast: "var(--rui-easing-toast)";
|
|
326
|
+
readonly linear: "var(--rui-easing-linear)";
|
|
327
|
+
};
|
|
328
|
+
readonly font: {
|
|
329
|
+
readonly default: "var(--rui-font-default)";
|
|
330
|
+
readonly system: "var(--rui-font-system)";
|
|
331
|
+
readonly brand: "var(--rui-font-brand)";
|
|
332
|
+
readonly marketing: "var(--rui-font-marketing)";
|
|
333
|
+
readonly emoji: "var(--rui-font-emoji)";
|
|
334
|
+
};
|
|
335
|
+
readonly fontSize: {
|
|
336
|
+
readonly marketingDisplay1: "var(--rui-font-size-marketing-display1)";
|
|
337
|
+
readonly marketingDisplay2: "var(--rui-font-size-marketing-display2)";
|
|
338
|
+
readonly marketingDisplay3: "var(--rui-font-size-marketing-display3)";
|
|
339
|
+
readonly display1: "var(--rui-font-size-display1)";
|
|
340
|
+
readonly display2: "var(--rui-font-size-display2)";
|
|
341
|
+
readonly heading1: "var(--rui-font-size-heading1)";
|
|
342
|
+
readonly heading2: "var(--rui-font-size-heading2)";
|
|
343
|
+
readonly heading3: "var(--rui-font-size-heading3)";
|
|
344
|
+
readonly emphasis1: "var(--rui-font-size-emphasis1)";
|
|
345
|
+
readonly emphasis2: "var(--rui-font-size-emphasis2)";
|
|
346
|
+
readonly emphasis3: "var(--rui-font-size-emphasis3)";
|
|
347
|
+
readonly emphasis4: "var(--rui-font-size-emphasis4)";
|
|
348
|
+
readonly body1: "var(--rui-font-size-body1)";
|
|
349
|
+
readonly body2: "var(--rui-font-size-body2)";
|
|
350
|
+
readonly body3: "var(--rui-font-size-body3)";
|
|
351
|
+
readonly h0: "var(--rui-font-size-display1)";
|
|
352
|
+
readonly h1: "var(--rui-font-size-heading1)";
|
|
353
|
+
readonly h2: "var(--rui-font-size-heading1)";
|
|
354
|
+
readonly h3: "var(--rui-font-size-heading1)";
|
|
355
|
+
readonly h4: "var(--rui-font-size-heading3)";
|
|
356
|
+
readonly h5: "var(--rui-font-size-heading3)";
|
|
357
|
+
readonly h6: "var(--rui-font-size-emphasis2)";
|
|
358
|
+
readonly primary: "var(--rui-font-size-emphasis1)";
|
|
359
|
+
readonly secondary: "var(--rui-font-size-body1)";
|
|
360
|
+
readonly caption: "var(--rui-font-size-body2)";
|
|
361
|
+
readonly small: "var(--rui-font-size-body3)";
|
|
362
|
+
readonly tile: "var(--rui-font-size-emphasis1)";
|
|
363
|
+
readonly smallTile: "var(--rui-font-size-emphasis3)";
|
|
364
|
+
readonly tiny: "var(--rui-font-size-emphasis4)";
|
|
365
|
+
readonly display3: "var(--rui-font-size-marketing-display3)";
|
|
366
|
+
};
|
|
367
|
+
readonly fontWeight: {
|
|
368
|
+
readonly marketingDisplay1: "var(--rui-font-weight-marketing-display1)";
|
|
369
|
+
readonly marketingDisplay2: "var(--rui-font-weight-marketing-display2)";
|
|
370
|
+
readonly marketingDisplay3: "var(--rui-font-weight-marketing-display3)";
|
|
371
|
+
readonly display1: "var(--rui-font-weight-display1)";
|
|
372
|
+
readonly display2: "var(--rui-font-weight-display2)";
|
|
373
|
+
readonly heading1: "var(--rui-font-weight-heading1)";
|
|
374
|
+
readonly heading2: "var(--rui-font-weight-heading2)";
|
|
375
|
+
readonly heading3: "var(--rui-font-weight-heading3)";
|
|
376
|
+
readonly emphasis1: "var(--rui-font-weight-emphasis1)";
|
|
377
|
+
readonly emphasis2: "var(--rui-font-weight-emphasis2)";
|
|
378
|
+
readonly emphasis3: "var(--rui-font-weight-emphasis3)";
|
|
379
|
+
readonly emphasis4: "var(--rui-font-weight-emphasis4)";
|
|
380
|
+
readonly body1: "var(--rui-font-weight-body1)";
|
|
381
|
+
readonly body2: "var(--rui-font-weight-body2)";
|
|
382
|
+
readonly body3: "var(--rui-font-weight-body3)";
|
|
383
|
+
};
|
|
384
|
+
readonly lineHeight: {
|
|
385
|
+
readonly marketingDisplay1: "var(--rui-line-height-marketing-display1)";
|
|
386
|
+
readonly marketingDisplay2: "var(--rui-line-height-marketing-display2)";
|
|
387
|
+
readonly marketingDisplay3: "var(--rui-line-height-marketing-display3)";
|
|
388
|
+
readonly display1: "var(--rui-line-height-display1)";
|
|
389
|
+
readonly display2: "var(--rui-line-height-display2)";
|
|
390
|
+
readonly heading1: "var(--rui-line-height-heading1)";
|
|
391
|
+
readonly heading2: "var(--rui-line-height-heading2)";
|
|
392
|
+
readonly heading3: "var(--rui-line-height-heading3)";
|
|
393
|
+
readonly emphasis1: "var(--rui-line-height-emphasis1)";
|
|
394
|
+
readonly emphasis2: "var(--rui-line-height-emphasis2)";
|
|
395
|
+
readonly emphasis3: "var(--rui-line-height-emphasis3)";
|
|
396
|
+
readonly emphasis4: "var(--rui-line-height-emphasis4)";
|
|
397
|
+
readonly body1: "var(--rui-line-height-body1)";
|
|
398
|
+
readonly body2: "var(--rui-line-height-body2)";
|
|
399
|
+
readonly body3: "var(--rui-line-height-body3)";
|
|
400
|
+
readonly h0: "var(--rui-line-height-display1)";
|
|
401
|
+
readonly h1: "var(--rui-line-height-heading1)";
|
|
402
|
+
readonly h2: "var(--rui-line-height-heading1)";
|
|
403
|
+
readonly h3: "var(--rui-line-height-heading1)";
|
|
404
|
+
readonly h4: "var(--rui-line-height-heading3)";
|
|
405
|
+
readonly h5: "var(--rui-line-height-heading3)";
|
|
406
|
+
readonly h6: "var(--rui-line-height-emphasis2)";
|
|
407
|
+
readonly primary: "var(--rui-line-height-emphasis1)";
|
|
408
|
+
readonly secondary: "var(--rui-line-height-body1)";
|
|
409
|
+
readonly caption: "var(--rui-line-height-body2)";
|
|
410
|
+
readonly small: "var(--rui-line-height-body3)";
|
|
411
|
+
readonly tile: "var(--rui-font-line-height-emphasis1)";
|
|
412
|
+
readonly smallTile: "var(--rui-line-height-emphasis3)";
|
|
413
|
+
readonly tiny: "var(--rui-line-height-emphasis4)";
|
|
414
|
+
readonly display3: "var(--rui-line-height-marketing-display3)";
|
|
415
|
+
};
|
|
416
|
+
readonly letterSpacing: {
|
|
417
|
+
readonly marketingDisplay1: "var(--rui-letter-spacing-marketing-display1)";
|
|
418
|
+
readonly marketingDisplay2: "var(--rui-letter-spacing-marketing-display2)";
|
|
419
|
+
readonly marketingDisplay3: "var(--rui-letter-spacing-marketing-display3)";
|
|
420
|
+
readonly display1: "var(--rui-letter-spacing-display1)";
|
|
421
|
+
readonly display2: "var(--rui-letter-spacing-display2)";
|
|
422
|
+
readonly heading1: "var(--rui-letter-spacing-heading1)";
|
|
423
|
+
readonly heading2: "var(--rui-letter-spacing-heading2)";
|
|
424
|
+
readonly heading3: "var(--rui-letter-spacing-heading3)";
|
|
425
|
+
readonly emphasis1: "var(--rui-letter-spacing-emphasis1)";
|
|
426
|
+
readonly emphasis2: "var(--rui-letter-spacing-emphasis2)";
|
|
427
|
+
readonly emphasis3: "var(--rui-letter-spacing-emphasis3)";
|
|
428
|
+
readonly emphasis4: "var(--rui-letter-spacing-emphasis4)";
|
|
429
|
+
readonly body1: "var(--rui-letter-spacing-body1)";
|
|
430
|
+
readonly body2: "var(--rui-letter-spacing-body2)";
|
|
431
|
+
readonly body3: "var(--rui-letter-spacing-body3)";
|
|
432
|
+
readonly h0: "var(--rui-letter-spacing-display1)";
|
|
433
|
+
readonly h1: "var(--rui-letter-spacing-heading1)";
|
|
434
|
+
readonly h2: "var(--rui-letter-spacing-heading1)";
|
|
435
|
+
readonly h3: "var(--rui-letter-spacing-heading1)";
|
|
436
|
+
readonly h4: "var(--rui-letter-spacing-heading3)";
|
|
437
|
+
readonly h5: "var(--rui-letter-spacing-heading3)";
|
|
438
|
+
readonly h6: "var(--rui-letter-spacing-emphasis2)";
|
|
439
|
+
readonly primary: "var(--rui-letter-spacing-emphasis1)";
|
|
440
|
+
readonly secondary: "var(--rui-letter-spacing-body1)";
|
|
441
|
+
readonly caption: "var(--rui-letter-spacing-body2)";
|
|
442
|
+
readonly small: "var(--rui-letter-spacing-body3)";
|
|
443
|
+
readonly tile: "var(--rui-font-letter-spacing-emphasis1)";
|
|
444
|
+
readonly smallTile: "var(--rui-letter-spacing-emphasis3)";
|
|
445
|
+
readonly tiny: "var(--rui-letter-spacing-emphasis4)";
|
|
446
|
+
readonly display3: "var(--rui-letter-spacing-marketing-display3)";
|
|
447
|
+
};
|
|
448
|
+
readonly radius: {
|
|
449
|
+
/** @deprecated will be removed soon */
|
|
450
|
+
readonly r2: "var(--rui-radius-r2)";
|
|
451
|
+
/** @deprecated use `rd100` instead */
|
|
452
|
+
readonly r4: "var(--rui-radius-r4)";
|
|
453
|
+
/** @deprecated use `rd150` instead */
|
|
454
|
+
readonly r6: "var(--rui-radius-r6)";
|
|
455
|
+
/** @deprecated use `rd200` instead */
|
|
456
|
+
readonly r8: "var(--rui-radius-r8)";
|
|
457
|
+
/** @deprecated use `rd300` instead */
|
|
458
|
+
readonly r12: "var(--rui-radius-r12)";
|
|
459
|
+
/** @deprecated use `rd400` instead */
|
|
460
|
+
readonly r16: "var(--rui-radius-r16)";
|
|
461
|
+
/** @deprecated use `rd600` instead */
|
|
462
|
+
readonly r24: "var(--rui-radius-r24)";
|
|
463
|
+
/** @deprecated will be removed soon */
|
|
464
|
+
readonly r32: "var(--rui-radius-r32)";
|
|
465
|
+
readonly none: "var(--rui-radius-none)";
|
|
466
|
+
readonly round: "var(--rui-radius-round)";
|
|
467
|
+
readonly widget: "var(--rui-radius-widget)";
|
|
468
|
+
readonly popup: "var(--rui-radius-popup)";
|
|
469
|
+
readonly rd100: "var(--rui-radius-rd100, var(--rui-radius-r4))";
|
|
470
|
+
readonly rd150: "var(--rui-radius-rd150, var(--rui-radius-r6))";
|
|
471
|
+
readonly rd200: "var(--rui-radius-rd200, var(--rui-radius-r8))";
|
|
472
|
+
readonly rd300: "var(--rui-radius-rd300, var(--rui-radius-r12))";
|
|
473
|
+
readonly rd400: "var(--rui-radius-rd400, var(--rui-radius-r16))";
|
|
474
|
+
readonly rd600: "var(--rui-radius-rd600, var(--rui-radius-r24))";
|
|
475
|
+
};
|
|
476
|
+
readonly space: {
|
|
477
|
+
readonly none: "var(--rui-space-none)";
|
|
478
|
+
/** @deprecated use `sp50` instead */
|
|
479
|
+
readonly s2: "var(--rui-space-s2)";
|
|
480
|
+
/** @deprecated use `sp100` instead */
|
|
481
|
+
readonly s4: "var(--rui-space-s4)";
|
|
482
|
+
/** @deprecated use `sp150` instead */
|
|
483
|
+
readonly s6: "var(--rui-space-s6)";
|
|
484
|
+
/** @deprecated use `sp200` instead */
|
|
485
|
+
readonly s8: "var(--rui-space-s8)";
|
|
486
|
+
/** @deprecated use `sp300` instead */
|
|
487
|
+
readonly s12: "var(--rui-space-s12)";
|
|
488
|
+
/** @deprecated use `sp400` instead */
|
|
489
|
+
readonly s16: "var(--rui-space-s16)";
|
|
490
|
+
/** @deprecated use `sp500` instead */
|
|
491
|
+
readonly s20: "var(--rui-space-s20)";
|
|
492
|
+
/** @deprecated use `sp600` instead */
|
|
493
|
+
readonly s24: "var(--rui-space-s24)";
|
|
494
|
+
/** @deprecated use `sp800` instead */
|
|
495
|
+
readonly s32: "var(--rui-space-s32)";
|
|
496
|
+
/** @deprecated use `sp1000` instead */
|
|
497
|
+
readonly s40: "var(--rui-space-s40)";
|
|
498
|
+
/** @deprecated will be removed soon */
|
|
499
|
+
readonly s48: "var(--rui-size-s48)";
|
|
500
|
+
/** @deprecated will be removed soon */
|
|
501
|
+
readonly s56: "var(--rui-size-s56)";
|
|
502
|
+
/** @deprecated will be removed soon */
|
|
503
|
+
readonly s64: "var(--rui-size-s64)";
|
|
504
|
+
/** @deprecated will be removed soon */
|
|
505
|
+
readonly s72: "var(--rui-size-s72)";
|
|
506
|
+
/** @deprecated will be removed soon */
|
|
507
|
+
readonly n2: "calc(-1 * var(--rui-space-s2))";
|
|
508
|
+
/** @deprecated will be removed soon */
|
|
509
|
+
readonly n4: "calc(-1 * var(--rui-space-s4))";
|
|
510
|
+
/** @deprecated will be removed soon */
|
|
511
|
+
readonly n6: "calc(-1 * var(--rui-space-s6))";
|
|
512
|
+
/** @deprecated will be removed soon */
|
|
513
|
+
readonly n8: "calc(-1 * var(--rui-space-s8))";
|
|
514
|
+
/** @deprecated will be removed soon */
|
|
515
|
+
readonly n12: "calc(-1 * var(--rui-space-s12))";
|
|
516
|
+
/** @deprecated will be removed soon */
|
|
517
|
+
readonly n16: "calc(-1 * var(--rui-space-s16))";
|
|
518
|
+
/** @deprecated will be removed soon */
|
|
519
|
+
readonly n20: "calc(-1 * var(--rui-space-s20))";
|
|
520
|
+
/** @deprecated will be removed soon */
|
|
521
|
+
readonly n24: "calc(-1 * var(--rui-space-s24))";
|
|
522
|
+
/** @deprecated will be removed soon */
|
|
523
|
+
readonly n32: "calc(-1 * var(--rui-space-s32))";
|
|
524
|
+
/** @deprecated will be removed soon */
|
|
525
|
+
readonly n40: "calc(-1 * var(--rui-space-s40))";
|
|
526
|
+
/** @deprecated will be removed soon */
|
|
527
|
+
readonly n48: "calc(-1 * var(--rui-size-s48))";
|
|
528
|
+
/** @deprecated will be removed soon */
|
|
529
|
+
readonly n56: "calc(-1 * var(--rui-size-s56))";
|
|
530
|
+
/** @deprecated will be removed soon */
|
|
531
|
+
readonly n64: "calc(-1 * var(--rui-size-s64))";
|
|
532
|
+
/** @deprecated will be removed soon */
|
|
533
|
+
readonly n72: "calc(-1 * var(--rui-size-s72))";
|
|
534
|
+
readonly sp50: "var(--rui-space-sp50, var(--rui-space-s2))";
|
|
535
|
+
readonly sp100: "var(--rui-space-sp100, var(--rui-space-s4))";
|
|
536
|
+
readonly sp150: "var(--rui-space-sp150, var(--rui-space-s6))";
|
|
537
|
+
readonly sp200: "var(--rui-space-sp200, var(--rui-space-s8))";
|
|
538
|
+
readonly sp300: "var(--rui-space-sp300, var(--rui-space-s12))";
|
|
539
|
+
readonly sp400: "var(--rui-space-sp400, var(--rui-space-s16))";
|
|
540
|
+
readonly sp500: "var(--rui-space-sp500, var(--rui-space-s20))";
|
|
541
|
+
readonly sp600: "var(--rui-space-sp600, var(--rui-space-s24))";
|
|
542
|
+
readonly sp800: "var(--rui-space-sp800, var(--rui-space-s32))";
|
|
543
|
+
readonly sp1000: "var(--rui-space-sp1000, var(--rui-space-s40))";
|
|
544
|
+
};
|
|
545
|
+
readonly size: {
|
|
546
|
+
readonly s2: "var(--rui-size-s2, var(--rui-space-s2))";
|
|
547
|
+
readonly s4: "var(--rui-size-s4, var(--rui-space-s4))";
|
|
548
|
+
readonly s6: "var(--rui-size-s6, var(--rui-space-s6))";
|
|
549
|
+
readonly s8: "var(--rui-size-s8, var(--rui-space-s8))";
|
|
550
|
+
readonly s12: "var(--rui-size-s12, var(--rui-space-s12))";
|
|
551
|
+
readonly s16: "var(--rui-size-s16, var(--rui-space-s16))";
|
|
552
|
+
readonly s20: "var(--rui-size-s20, var(--rui-space-s20))";
|
|
553
|
+
readonly s24: "var(--rui-size-s24, var(--rui-space-s24))";
|
|
554
|
+
readonly s32: "var(--rui-size-s32, var(--rui-space-s32))";
|
|
555
|
+
readonly s40: "var(--rui-size-s40, var(--rui-space-s40))";
|
|
556
|
+
readonly s48: "var(--rui-size-s48, var(--rui-space-s48))";
|
|
557
|
+
readonly s56: "var(--rui-size-s56, var(--rui-space-s56))";
|
|
558
|
+
readonly s64: "var(--rui-size-s64, var(--rui-space-s64))";
|
|
559
|
+
readonly s72: "var(--rui-size-s72, var(--rui-space-s72))";
|
|
560
|
+
};
|
|
561
|
+
readonly timing: {
|
|
562
|
+
readonly sm: "var(--rui-timing-sm)";
|
|
563
|
+
readonly md: "var(--rui-timing-md)";
|
|
564
|
+
readonly lg: "var(--rui-timing-lg)";
|
|
565
|
+
readonly xl: "var(--rui-timing-xl)";
|
|
566
|
+
readonly shadow: "var(--rui-timing-shadow)";
|
|
567
|
+
};
|
|
568
|
+
readonly shadow: {
|
|
569
|
+
readonly none: "var(--rui-shadow-none)";
|
|
570
|
+
readonly level1: "var(--rui-shadow-level1)";
|
|
571
|
+
readonly level2: "var(--rui-shadow-level2)";
|
|
572
|
+
readonly level3: "var(--rui-shadow-level3)";
|
|
573
|
+
readonly level4: "var(--rui-shadow-level4)";
|
|
574
|
+
};
|
|
575
|
+
readonly transition: {
|
|
576
|
+
readonly shadow: "box-shadow var(--rui-timing-shadow)";
|
|
577
|
+
readonly background: "background-color var(--rui-timing-md)";
|
|
578
|
+
readonly border: "border-width var(--rui-timing-md)";
|
|
579
|
+
readonly text: "color var(--rui-timing-md)";
|
|
580
|
+
readonly opacity: "opacity var(--rui-timing-md)";
|
|
581
|
+
readonly transform: "transform var(--rui-timing-md)";
|
|
582
|
+
readonly width: "width var(--rui-timing-md)";
|
|
583
|
+
readonly height: "height var(--rui-timing-md)";
|
|
584
|
+
readonly top: "top var(--rui-timing-md), inset-block-start var(--rui-timing-md)";
|
|
585
|
+
readonly right: "right var(--rui-timing-md), inset-inline-end var(--rui-timing-md)";
|
|
586
|
+
readonly bottom: "bottom var(--rui-timing-md), inset-block-end var(--rui-timing-md)";
|
|
587
|
+
readonly left: "left var(--rui-timing-md), inset-inline-start var(--rui-timing-md)";
|
|
588
|
+
readonly filter: "filter var(--rui-timing-md)";
|
|
589
|
+
readonly radius: "border-radius var(--rui-timing-md)";
|
|
590
|
+
readonly outline: "outline var(--rui-timing-shadow)";
|
|
591
|
+
};
|
|
592
|
+
readonly media: {
|
|
593
|
+
readonly sm: "(min-width: 600px)";
|
|
594
|
+
readonly md: "(min-width: 840px)";
|
|
595
|
+
readonly lg: "(min-width: 1200px)";
|
|
596
|
+
readonly xl: "(min-width: 1600px)";
|
|
597
|
+
readonly xxl: "(min-width: 1920px)";
|
|
598
|
+
};
|
|
599
|
+
/** @deprecated will be removed soon */
|
|
600
|
+
readonly utils: {
|
|
601
|
+
/** @deprecated use `opacity` directly */
|
|
602
|
+
readonly opacity: (channel: string, value: number) => string;
|
|
603
|
+
/** @deprecated use `calc.negate` instead */
|
|
604
|
+
readonly negative: (space: string) => string;
|
|
605
|
+
/** @deprecated use `calc.subtract` instead */
|
|
606
|
+
readonly minus: (a: string, b: string) => string;
|
|
607
|
+
};
|
|
19
608
|
};
|
|
20
|
-
type Breakpoint = ValueOf<typeof Breakpoint>;
|
|
21
609
|
|
|
22
610
|
declare const UnifiedColor: {
|
|
23
611
|
readonly LAYOUT_BACKGROUND: "layout-background";
|
|
@@ -717,12 +1305,18 @@ declare const Color: {
|
|
|
717
1305
|
};
|
|
718
1306
|
type Color = UnifiedColor | (string & {});
|
|
719
1307
|
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
1308
|
+
/**
|
|
1309
|
+
* Docs: {@link https://ui-kit.revolut.codes/design-system/breakpoints Breakpoint}
|
|
1310
|
+
*/
|
|
1311
|
+
declare const Breakpoint: {
|
|
1312
|
+
readonly ALL: "all";
|
|
1313
|
+
readonly SM: "sm";
|
|
1314
|
+
readonly MD: "md";
|
|
1315
|
+
readonly LG: "lg";
|
|
1316
|
+
readonly XL: "xl";
|
|
1317
|
+
readonly XXL: "xxl";
|
|
724
1318
|
};
|
|
725
|
-
type
|
|
1319
|
+
type Breakpoint = ValueOf<typeof Breakpoint>;
|
|
726
1320
|
|
|
727
1321
|
declare const ElevationLevel: {
|
|
728
1322
|
readonly NONE: "none";
|
|
@@ -733,96 +1327,6 @@ declare const ElevationLevel: {
|
|
|
733
1327
|
};
|
|
734
1328
|
type ElevationLevel = ValueOf<typeof ElevationLevel>;
|
|
735
1329
|
|
|
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
1330
|
/**
|
|
827
1331
|
* Docs: {@link https://ui-kit.revolut.codes/design-system/radii Radius}
|
|
828
1332
|
*/
|
|
@@ -968,42 +1472,12 @@ declare const TextStyle: {
|
|
|
968
1472
|
};
|
|
969
1473
|
type TextStyle = ValueOf<typeof TextStyle>;
|
|
970
1474
|
|
|
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
1475
|
type Elements = 'svg' | Exclude<keyof JSXCompat$1.IntrinsicElements, 'slot' | 'style' | 'script' | 'title' | 'head' | 'body' | 'meta' | 'link' | 'document' | 'object'>;
|
|
1002
1476
|
declare namespace JSXCompat$1 {
|
|
1003
|
-
interface IntrinsicElements extends
|
|
1477
|
+
interface IntrinsicElements extends React__default.JSX.IntrinsicElements, JSX.IntrinsicElements {
|
|
1004
1478
|
}
|
|
1005
1479
|
}
|
|
1006
|
-
type InferElement<E extends Elements> = JSXCompat$1.IntrinsicElements[E] extends
|
|
1480
|
+
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
1481
|
type ResponsiveValue<T> = null | T | {
|
|
1008
1482
|
[key in Breakpoint]?: T;
|
|
1009
1483
|
};
|
|
@@ -1016,14 +1490,28 @@ interface TestAttributes {
|
|
|
1016
1490
|
'data-testid'?: string;
|
|
1017
1491
|
}
|
|
1018
1492
|
type RefAttributesWithoutLegacyRef<T> = {
|
|
1019
|
-
key?:
|
|
1020
|
-
ref?:
|
|
1493
|
+
key?: React__default.Key | null | undefined;
|
|
1494
|
+
ref?: React__default.Ref<T> | undefined;
|
|
1021
1495
|
};
|
|
1022
1496
|
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1497
|
+
type ImageURL = string;
|
|
1498
|
+
type ImageSet = Record<string, ImageURL | ImageURL[]>;
|
|
1499
|
+
type ImageSetWithFallback = {
|
|
1500
|
+
default: ImageURL;
|
|
1501
|
+
} & ImageSet;
|
|
1502
|
+
type ImageProp$1 = ImageURL | ImageSetWithFallback;
|
|
1503
|
+
|
|
1504
|
+
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';
|
|
1505
|
+
|
|
1506
|
+
declare const ImageVariant: {
|
|
1507
|
+
readonly ROUND: "round";
|
|
1508
|
+
};
|
|
1509
|
+
type ImageVariant = ValueOf<typeof ImageVariant>;
|
|
1510
|
+
declare const ImageScale: {
|
|
1511
|
+
readonly COVER: "cover";
|
|
1512
|
+
readonly CONTAIN: "contain";
|
|
1513
|
+
};
|
|
1514
|
+
type ImageScale = ValueOf<typeof ImageScale>;
|
|
1027
1515
|
|
|
1028
1516
|
interface GapSystemProps {
|
|
1029
1517
|
gap?: ResponsiveValue<LooseLength<Space$1>>;
|
|
@@ -1031,20 +1519,6 @@ interface GapSystemProps {
|
|
|
1031
1519
|
columnGap?: ResponsiveValue<LooseLength<Space$1>>;
|
|
1032
1520
|
}
|
|
1033
1521
|
|
|
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
1522
|
interface DisplayProps {
|
|
1049
1523
|
display?: ResponsiveValue<csstype.Property.Display>;
|
|
1050
1524
|
}
|
|
@@ -1135,6 +1609,27 @@ interface FlexDirectionProps {
|
|
|
1135
1609
|
flexDirection?: ResponsiveValue<csstype.Property.FlexDirection>;
|
|
1136
1610
|
}
|
|
1137
1611
|
|
|
1612
|
+
type Modify<T, R> = Omit<T, keyof R> & R;
|
|
1613
|
+
|
|
1614
|
+
interface ElevationProps {
|
|
1615
|
+
elevation?: ElevationLevel;
|
|
1616
|
+
elevationOnHover?: ElevationLevel;
|
|
1617
|
+
}
|
|
1618
|
+
|
|
1619
|
+
interface HideProps {
|
|
1620
|
+
/** @deprecated Prefer `useMatchMedia` or CSS media queries */
|
|
1621
|
+
hide?: boolean | string | string[];
|
|
1622
|
+
}
|
|
1623
|
+
|
|
1624
|
+
interface OverflowSystemProps {
|
|
1625
|
+
overflow?: ResponsiveValue<csstype.Property.Overflow>;
|
|
1626
|
+
}
|
|
1627
|
+
|
|
1628
|
+
/** @private */
|
|
1629
|
+
interface PlaceSelfProps {
|
|
1630
|
+
placeSelf?: ResponsiveValue<csstype.Property.PlaceSelf>;
|
|
1631
|
+
}
|
|
1632
|
+
|
|
1138
1633
|
interface RadiusProps {
|
|
1139
1634
|
radius?: ResponsiveValue<Radius | (string & {}) | number>;
|
|
1140
1635
|
}
|
|
@@ -1174,34 +1669,20 @@ interface TextStyleProps {
|
|
|
1174
1669
|
textStyle?: ResponsiveValue<TextStyle>;
|
|
1175
1670
|
}
|
|
1176
1671
|
|
|
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
1672
|
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
1673
|
|
|
1193
1674
|
type BaseDOMAttributes<E extends Element> = Omit<Modify<{
|
|
1194
1675
|
to?: string;
|
|
1195
|
-
} & Pick<
|
|
1676
|
+
} & Pick<React__default__default.SVGAttributes<any>,
|
|
1196
1677
|
/** @see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg */
|
|
1197
|
-
'width' | 'height' | 'viewBox' | 'preserveAspectRatio'>, Omit<
|
|
1678
|
+
'width' | 'height' | 'viewBox' | 'preserveAspectRatio'>, Omit<React__default__default.AllHTMLAttributes<E>, 'css'>>, 'as' | 'data' | (typeof BLACKLIST)[number]>;
|
|
1198
1679
|
interface DOMAttributes<E extends Element> extends BaseDOMAttributes<E>, TestAttributes {
|
|
1199
1680
|
}
|
|
1200
1681
|
|
|
1201
1682
|
interface BaseInnerProps<T> {
|
|
1202
1683
|
use?: T;
|
|
1203
1684
|
}
|
|
1204
|
-
interface BaseProps<E extends Elements> extends DOMAttributes<InferElement<E>>, RefAttributesWithoutLegacyRef<InferElement<E>>, BaseInnerProps<E | Elements |
|
|
1685
|
+
interface BaseProps<E extends Elements> extends DOMAttributes<InferElement<E>>, RefAttributesWithoutLegacyRef<InferElement<E>>, BaseInnerProps<E | Elements | React__default__default.ComponentType<any>> {
|
|
1205
1686
|
}
|
|
1206
1687
|
|
|
1207
1688
|
interface BoxProps<E extends Elements = 'div'> extends BoxInnerProps, BaseProps<E> {
|
|
@@ -1211,150 +1692,22 @@ interface BoxInnerProps extends SpaceProps, ColorProps, WidthProps, FlexProps$1,
|
|
|
1211
1692
|
variant?: ResponsiveValue<string>;
|
|
1212
1693
|
}
|
|
1213
1694
|
|
|
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';
|
|
1215
|
-
|
|
1216
|
-
declare const ImageVariant: {
|
|
1217
|
-
readonly ROUND: "round";
|
|
1218
|
-
};
|
|
1219
|
-
type ImageVariant = ValueOf<typeof ImageVariant>;
|
|
1220
|
-
declare const ImageScale: {
|
|
1221
|
-
readonly COVER: "cover";
|
|
1222
|
-
readonly CONTAIN: "contain";
|
|
1223
|
-
};
|
|
1224
|
-
type ImageScale = ValueOf<typeof ImageScale>;
|
|
1225
|
-
|
|
1226
|
-
interface ImageProps$1 extends Omit<BoxProps<'img'>, 'variant' | 'use'> {
|
|
1227
|
-
variant?: ImageVariant;
|
|
1228
|
-
scale?: ImageScale;
|
|
1229
|
-
image?: ImageProp$1;
|
|
1230
|
-
}
|
|
1231
|
-
|
|
1232
1695
|
interface FlexProps<E extends Elements = 'div'> extends FlexInnerProps, BoxProps<E> {
|
|
1233
1696
|
}
|
|
1234
1697
|
/** @private */
|
|
1235
1698
|
interface FlexInnerProps extends GapSystemProps, FlexWrapProps, FlexDirectionProps, AlignItemsProps, JustifyContentProps {
|
|
1236
1699
|
}
|
|
1237
1700
|
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
onChange?: (state: boolean) => void;
|
|
1243
|
-
}
|
|
1244
|
-
type ToggleFn = {
|
|
1245
|
-
(nextValue?: boolean): void;
|
|
1246
|
-
on(): void;
|
|
1247
|
-
off(): void;
|
|
1248
|
-
switch(): void;
|
|
1701
|
+
declare const TooltipBehaviour: {
|
|
1702
|
+
readonly ALWAYS: "always";
|
|
1703
|
+
readonly AUTO: "auto";
|
|
1704
|
+
readonly NEVER: "never";
|
|
1249
1705
|
};
|
|
1706
|
+
type TooltipBehaviour = ValueOf<typeof TooltipBehaviour>;
|
|
1250
1707
|
|
|
1251
|
-
interface
|
|
1252
|
-
ref: React.Ref<E>;
|
|
1253
|
-
onClick: () => void;
|
|
1254
|
-
}
|
|
1255
|
-
interface TargetProps<E> {
|
|
1256
|
-
anchorRef: React.RefObject<E | null>;
|
|
1257
|
-
open: boolean;
|
|
1258
|
-
onClose: () => void;
|
|
1259
|
-
}
|
|
1260
|
-
interface GetAnchorProps<Element> {
|
|
1261
|
-
<E extends Element>(): AnchorProps<E>;
|
|
1262
|
-
<E extends Element, P>(props: P): P & AnchorProps<E>;
|
|
1263
|
-
}
|
|
1264
|
-
interface GetTargetProps<Element> {
|
|
1265
|
-
<E extends Element>(): TargetProps<E>;
|
|
1266
|
-
<E extends Element, P>(props: P): P & TargetProps<E>;
|
|
1267
|
-
}
|
|
1268
|
-
interface DropdownOptions extends ToggleOptions {
|
|
1269
|
-
}
|
|
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 {
|
|
1708
|
+
interface EllipsisProps extends React__default__default.HTMLAttributes<HTMLSpanElement>, TestAttributes, MaxWidthProps {
|
|
1356
1709
|
tooltip?: TooltipBehaviour;
|
|
1357
|
-
children?:
|
|
1710
|
+
children?: React__default__default.ReactNode;
|
|
1358
1711
|
}
|
|
1359
1712
|
|
|
1360
1713
|
declare const CellAlign: {
|
|
@@ -1376,14 +1729,57 @@ interface CellInnerBaseProps {
|
|
|
1376
1729
|
align?: CellAlign;
|
|
1377
1730
|
stopEventPropagation?: boolean;
|
|
1378
1731
|
}
|
|
1379
|
-
interface CellBaseProps<E extends Elements = 'div'> extends Omit<FlexProps<E>, 'type'>, CellInnerBaseProps {
|
|
1732
|
+
interface CellBaseProps<E extends Elements = 'div'> extends Omit<FlexProps<E>, 'type'>, CellInnerBaseProps {
|
|
1733
|
+
}
|
|
1734
|
+
|
|
1735
|
+
interface CellProps$1<E extends Elements = 'div'> extends Omit<CellBaseProps<E>, 'type'>, Partial<Pick<CellBaseProps<E>, 'type'>>, Pick<EllipsisProps, 'tooltip'> {
|
|
1736
|
+
ellipsis?: boolean;
|
|
1737
|
+
renderStart?: () => React__default__default.ReactNode;
|
|
1738
|
+
renderEnd?: () => React__default__default.ReactNode;
|
|
1739
|
+
}
|
|
1740
|
+
|
|
1741
|
+
interface ToggleOptions {
|
|
1742
|
+
disabled?: boolean;
|
|
1743
|
+
defaultState?: boolean;
|
|
1744
|
+
state?: boolean | null;
|
|
1745
|
+
onChange?: (state: boolean) => void;
|
|
1746
|
+
}
|
|
1747
|
+
type ToggleFn = {
|
|
1748
|
+
(nextValue?: boolean): void;
|
|
1749
|
+
on(): void;
|
|
1750
|
+
off(): void;
|
|
1751
|
+
switch(): void;
|
|
1752
|
+
};
|
|
1753
|
+
|
|
1754
|
+
interface AnchorProps<E> {
|
|
1755
|
+
ref: React.Ref<E>;
|
|
1756
|
+
onClick: () => void;
|
|
1757
|
+
}
|
|
1758
|
+
interface TargetProps<E> {
|
|
1759
|
+
anchorRef: React.RefObject<E | null>;
|
|
1760
|
+
open: boolean;
|
|
1761
|
+
onClose: () => void;
|
|
1380
1762
|
}
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1763
|
+
interface GetAnchorProps<Element> {
|
|
1764
|
+
<E extends Element>(): AnchorProps<E>;
|
|
1765
|
+
<E extends Element, P>(props: P): P & AnchorProps<E>;
|
|
1766
|
+
}
|
|
1767
|
+
interface GetTargetProps<Element> {
|
|
1768
|
+
<E extends Element>(): TargetProps<E>;
|
|
1769
|
+
<E extends Element, P>(props: P): P & TargetProps<E>;
|
|
1770
|
+
}
|
|
1771
|
+
interface DropdownOptions extends ToggleOptions {
|
|
1772
|
+
}
|
|
1773
|
+
interface DropdownState<Element> {
|
|
1774
|
+
state: boolean;
|
|
1775
|
+
toggle: ToggleFn;
|
|
1776
|
+
getAnchorProps: GetAnchorProps<Element>;
|
|
1777
|
+
getTargetProps: GetTargetProps<Element>;
|
|
1386
1778
|
}
|
|
1779
|
+
/**
|
|
1780
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/use-dropdown useDropdown}
|
|
1781
|
+
*/
|
|
1782
|
+
declare function useDropdown<Element>(options?: DropdownOptions): DropdownState<Element>;
|
|
1387
1783
|
|
|
1388
1784
|
interface TableData {
|
|
1389
1785
|
}
|
|
@@ -1397,7 +1793,7 @@ declare module 'react' {
|
|
|
1397
1793
|
/**
|
|
1398
1794
|
* @deprecated - This type is not relevant when using React. Inline the type instead to make the intent clear.
|
|
1399
1795
|
*/
|
|
1400
|
-
type ReactFragment = Iterable<
|
|
1796
|
+
type ReactFragment = Iterable<React__default__default.ReactNode>
|
|
1401
1797
|
}
|
|
1402
1798
|
|
|
1403
1799
|
interface UseRowDisabledOptions<D extends object = {}>
|
|
@@ -1410,7 +1806,7 @@ interface UseRowDisabledState<D extends object = {}> {
|
|
|
1410
1806
|
}
|
|
1411
1807
|
|
|
1412
1808
|
interface UseRowDisabledRowProps
|
|
1413
|
-
extends Pick<
|
|
1809
|
+
extends Pick<React__default__default.AriaAttributes, 'aria-disabled'> {
|
|
1414
1810
|
isDisabled: boolean
|
|
1415
1811
|
}
|
|
1416
1812
|
|
|
@@ -1420,7 +1816,7 @@ interface UseRowDisabledInstanceProps<D extends object = {}> {
|
|
|
1420
1816
|
}
|
|
1421
1817
|
|
|
1422
1818
|
interface UseRowDisabledRowCommonProps
|
|
1423
|
-
extends Pick<
|
|
1819
|
+
extends Pick<React__default__default.AriaAttributes, 'aria-disabled'> {}
|
|
1424
1820
|
|
|
1425
1821
|
declare module 'react-table' {
|
|
1426
1822
|
export interface UseGroupByInstanceProps<D extends object> {
|
|
@@ -1509,12 +1905,53 @@ declare module 'react-table' {
|
|
|
1509
1905
|
export interface TableRowProps extends UseRowDisabledRowCommonProps {}
|
|
1510
1906
|
}
|
|
1511
1907
|
|
|
1908
|
+
declare const MoneyType: {
|
|
1909
|
+
readonly MONEY: "money";
|
|
1910
|
+
readonly MONEY_FRACTIONAL: "money-fractional";
|
|
1911
|
+
};
|
|
1912
|
+
type MoneyType = ValueOf<typeof MoneyType>;
|
|
1913
|
+
|
|
1914
|
+
declare const CurrencySymbol: {
|
|
1915
|
+
readonly AUTO: "auto";
|
|
1916
|
+
readonly NARROW: "narrow";
|
|
1917
|
+
readonly NONE: "none";
|
|
1918
|
+
};
|
|
1919
|
+
type CurrencySymbol = ValueOf<typeof CurrencySymbol>;
|
|
1920
|
+
|
|
1921
|
+
interface RangeModifier {
|
|
1922
|
+
from: Date;
|
|
1923
|
+
to: Date;
|
|
1924
|
+
}
|
|
1925
|
+
type DateRange$1 = RangeModifier;
|
|
1926
|
+
|
|
1927
|
+
interface UseMoneyFormatOptions {
|
|
1928
|
+
currency?: string;
|
|
1929
|
+
showSign?: boolean;
|
|
1930
|
+
compactNotation?: boolean;
|
|
1931
|
+
type?: MoneyType;
|
|
1932
|
+
symbol?: CurrencySymbol;
|
|
1933
|
+
minimumFractionDigits?: number;
|
|
1934
|
+
maximumFractionDigits?: number;
|
|
1935
|
+
crypto?: boolean;
|
|
1936
|
+
roundingMode?: MoneyRoundingMode;
|
|
1937
|
+
}
|
|
1938
|
+
/**
|
|
1939
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/use-money-format useMoneyFormat}
|
|
1940
|
+
*/
|
|
1941
|
+
declare const useMoneyFormat: (options?: UseMoneyFormatOptions) => (argument: number | Money) => string;
|
|
1942
|
+
|
|
1943
|
+
interface ImageProps$1 extends Omit<BoxProps<'img'>, 'variant' | 'use'> {
|
|
1944
|
+
variant?: ImageVariant;
|
|
1945
|
+
scale?: ImageScale;
|
|
1946
|
+
image?: ImageProp$1;
|
|
1947
|
+
}
|
|
1948
|
+
|
|
1512
1949
|
declare const ToastTimeout: {
|
|
1513
1950
|
readonly SHORT: "short";
|
|
1514
1951
|
readonly LONG: "long";
|
|
1515
1952
|
};
|
|
1516
1953
|
type ToastTimeout = ValueOf<typeof ToastTimeout>;
|
|
1517
|
-
type Toast$1 =
|
|
1954
|
+
type Toast$1 = React__default__default.ReactElement | RenderToast;
|
|
1518
1955
|
type ToastId = symbol;
|
|
1519
1956
|
interface HideToastCallback {
|
|
1520
1957
|
(): void;
|
|
@@ -1526,7 +1963,7 @@ interface HideToast {
|
|
|
1526
1963
|
(): void;
|
|
1527
1964
|
}
|
|
1528
1965
|
interface RenderToast {
|
|
1529
|
-
(hide: HideToast):
|
|
1966
|
+
(hide: HideToast): React__default__default.ReactElement;
|
|
1530
1967
|
}
|
|
1531
1968
|
interface ToastActions {
|
|
1532
1969
|
show(toast: Toast$1, onHide?: HideToastCallback): ToastId;
|
|
@@ -1540,8 +1977,72 @@ interface ToastActions {
|
|
|
1540
1977
|
*/
|
|
1541
1978
|
declare const useToast: () => ToastActions;
|
|
1542
1979
|
|
|
1980
|
+
interface DateFormatOptions {
|
|
1981
|
+
style?: 'auto' | 'precise';
|
|
1982
|
+
now?: Date;
|
|
1983
|
+
timeZone?: string;
|
|
1984
|
+
/** @private */
|
|
1985
|
+
__locale?: string;
|
|
1986
|
+
}
|
|
1987
|
+
/**
|
|
1988
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/use-date-format useDateFormat}
|
|
1989
|
+
*/
|
|
1990
|
+
declare function useDateFormat(options?: DateFormatOptions): (input: Date | number) => string;
|
|
1991
|
+
|
|
1992
|
+
interface DateRangeFormatOptions extends Intl.DateTimeFormatOptions {
|
|
1993
|
+
style?: 'auto' | 'precise';
|
|
1994
|
+
now?: Date;
|
|
1995
|
+
/** @private */
|
|
1996
|
+
__locale?: string;
|
|
1997
|
+
}
|
|
1998
|
+
/**
|
|
1999
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/use-date-range-format useDateRangeFormat}
|
|
2000
|
+
*/
|
|
2001
|
+
declare function useDateRangeFormat(options?: DateRangeFormatOptions): (start: Date | number, end: Date | number) => string;
|
|
2002
|
+
|
|
2003
|
+
interface DateTimeFormatOptions {
|
|
2004
|
+
style?: 'auto' | 'auto-date' | 'precise';
|
|
2005
|
+
now?: Date;
|
|
2006
|
+
timeZone?: string;
|
|
2007
|
+
/** @private */
|
|
2008
|
+
__locale?: string;
|
|
2009
|
+
}
|
|
2010
|
+
/**
|
|
2011
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/use-date-time-format useDateTimeFormat}
|
|
2012
|
+
*/
|
|
2013
|
+
declare function useDateTimeFormat(options?: DateTimeFormatOptions): (input: Date | number) => string;
|
|
2014
|
+
|
|
2015
|
+
/**
|
|
2016
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/use-is-rtl useIsRTL}
|
|
2017
|
+
*/
|
|
2018
|
+
declare const useIsRTL: () => boolean;
|
|
2019
|
+
|
|
2020
|
+
interface TimeFormatOptions {
|
|
2021
|
+
style?: 'auto' | 'precise';
|
|
2022
|
+
now?: Date;
|
|
2023
|
+
timeZone?: string;
|
|
2024
|
+
/** @private */
|
|
2025
|
+
__locale?: string;
|
|
2026
|
+
}
|
|
2027
|
+
/**
|
|
2028
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/use-time-format useTimeFormat}
|
|
2029
|
+
*/
|
|
2030
|
+
declare function useTimeFormat(options?: TimeFormatOptions): (input: Date | number) => string;
|
|
2031
|
+
|
|
2032
|
+
/**
|
|
2033
|
+
* 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
|
|
2034
|
+
*
|
|
2035
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/copy-to-clipboard copyToClipboard}
|
|
2036
|
+
*/
|
|
2037
|
+
declare const copyToClipboard: (input: string, doc?: Document) => Promise<void>;
|
|
2038
|
+
|
|
2039
|
+
/**
|
|
2040
|
+
* Docs: {@link https://ui-kit.revolut.codes/utils/node-chain nodeChain}
|
|
2041
|
+
*/
|
|
2042
|
+
declare const nodeChain: (...parts: React.ReactNode[]) => react_jsx_runtime.JSX.Element;
|
|
2043
|
+
|
|
1543
2044
|
declare namespace JSXCompat {
|
|
1544
|
-
interface IntrinsicElements extends
|
|
2045
|
+
interface IntrinsicElements extends React__default.JSX.IntrinsicElements, JSX.IntrinsicElements {
|
|
1545
2046
|
}
|
|
1546
2047
|
}
|
|
1547
2048
|
/**
|
|
@@ -1559,23 +2060,23 @@ type StackAlignment = 'start' | 'center' | 'end';
|
|
|
1559
2060
|
/**
|
|
1560
2061
|
* Native button props excluding styling escape hatches.
|
|
1561
2062
|
*/
|
|
1562
|
-
type NativeButtonProps = Omit<
|
|
2063
|
+
type NativeButtonProps = Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style' | 'disabled' | 'children'>;
|
|
1563
2064
|
/**
|
|
1564
2065
|
* Native div props excluding styling escape hatches.
|
|
1565
2066
|
*/
|
|
1566
|
-
type NativeDivProps = Omit<
|
|
2067
|
+
type NativeDivProps = Omit<React__default.HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children' | 'title' | 'content'>;
|
|
1567
2068
|
/**
|
|
1568
2069
|
* Native span props excluding styling escape hatches.
|
|
1569
2070
|
*/
|
|
1570
|
-
type NativeSpanProps = Omit<
|
|
2071
|
+
type NativeSpanProps = Omit<React__default.HTMLAttributes<HTMLSpanElement>, 'className' | 'style' | 'children' | 'title'>;
|
|
1571
2072
|
/**
|
|
1572
2073
|
* Native heading props excluding styling escape hatches.
|
|
1573
2074
|
*/
|
|
1574
|
-
type NativeHeadingProps = Omit<
|
|
2075
|
+
type NativeHeadingProps = Omit<React__default.HTMLAttributes<HTMLHeadingElement>, 'className' | 'style' | 'children' | 'placeholder' | 'title'>;
|
|
1575
2076
|
/**
|
|
1576
2077
|
* Native main props excluding styling escape hatches.
|
|
1577
2078
|
*/
|
|
1578
|
-
type NativeMainProps = Omit<
|
|
2079
|
+
type NativeMainProps = Omit<React__default.HTMLAttributes<HTMLElement>, 'className' | 'style' | 'children' | 'title'>;
|
|
1579
2080
|
|
|
1580
2081
|
/**
|
|
1581
2082
|
* Props for the Action component.
|
|
@@ -1605,7 +2106,7 @@ interface ActionProps extends NativeButtonProps {
|
|
|
1605
2106
|
/**
|
|
1606
2107
|
* Action content.
|
|
1607
2108
|
*/
|
|
1608
|
-
children:
|
|
2109
|
+
children: React__default.ReactNode;
|
|
1609
2110
|
}
|
|
1610
2111
|
/**
|
|
1611
2112
|
* Action component for text-style clickable actions.
|
|
@@ -1676,7 +2177,7 @@ declare const Action: ({ disabled, icon, iconOnly, children, ...rest }: ActionPr
|
|
|
1676
2177
|
* Image prop type supporting simple URLs or responsive image sets.
|
|
1677
2178
|
*/
|
|
1678
2179
|
type ImageProp = ImageProps$1['image'];
|
|
1679
|
-
type NativeImgProps = Omit<
|
|
2180
|
+
type NativeImgProps = Omit<React__default.ImgHTMLAttributes<HTMLImageElement>, 'className' | 'style'>;
|
|
1680
2181
|
/**
|
|
1681
2182
|
* Image fit options for object-fit behaviour.
|
|
1682
2183
|
*/
|
|
@@ -1974,7 +2475,7 @@ interface ButtonProps extends NativeButtonProps {
|
|
|
1974
2475
|
/**
|
|
1975
2476
|
* Button content.
|
|
1976
2477
|
*/
|
|
1977
|
-
children:
|
|
2478
|
+
children: React__default.ReactNode;
|
|
1978
2479
|
/**
|
|
1979
2480
|
* Whether the button is elevated.
|
|
1980
2481
|
*/
|
|
@@ -2055,7 +2556,7 @@ interface ActionButtonProps extends NativeButtonProps {
|
|
|
2055
2556
|
/**
|
|
2056
2557
|
* Button content.
|
|
2057
2558
|
*/
|
|
2058
|
-
children:
|
|
2559
|
+
children: React__default.ReactNode;
|
|
2059
2560
|
}
|
|
2060
2561
|
/**
|
|
2061
2562
|
* ActionButton component for secondary actions in miniapps.
|
|
@@ -2211,6 +2712,10 @@ interface CalendarRangeProps {
|
|
|
2211
2712
|
* Dates that should be disabled in the calendar
|
|
2212
2713
|
*/
|
|
2213
2714
|
disabledDays?: CalendarDisabledDays;
|
|
2715
|
+
/**
|
|
2716
|
+
* Whether the background is transparent or not
|
|
2717
|
+
*/
|
|
2718
|
+
transparentBg?: boolean;
|
|
2214
2719
|
}
|
|
2215
2720
|
type CalendarProps = CalendarDateProps | CalendarRangeProps;
|
|
2216
2721
|
/**
|
|
@@ -2313,15 +2818,15 @@ interface CellProps extends NativeDivProps {
|
|
|
2313
2818
|
/**
|
|
2314
2819
|
* Main title text.
|
|
2315
2820
|
*/
|
|
2316
|
-
title:
|
|
2821
|
+
title: React__default.ReactNode;
|
|
2317
2822
|
/**
|
|
2318
2823
|
* Secondary description text below the title.
|
|
2319
2824
|
*/
|
|
2320
|
-
description?:
|
|
2825
|
+
description?: React__default.ReactNode;
|
|
2321
2826
|
/**
|
|
2322
2827
|
* Content displayed on the right side of the cell.
|
|
2323
2828
|
*/
|
|
2324
|
-
side?:
|
|
2829
|
+
side?: React__default.ReactNode;
|
|
2325
2830
|
/**
|
|
2326
2831
|
* Icon displayed at the start of the cell.
|
|
2327
2832
|
*/
|
|
@@ -2329,7 +2834,7 @@ interface CellProps extends NativeDivProps {
|
|
|
2329
2834
|
/**
|
|
2330
2835
|
* Avatar or image displayed at the start of the cell.
|
|
2331
2836
|
*/
|
|
2332
|
-
avatar?:
|
|
2837
|
+
avatar?: React__default.ReactNode;
|
|
2333
2838
|
/**
|
|
2334
2839
|
* Alignment for the avatar content, center by default
|
|
2335
2840
|
*/
|
|
@@ -2355,7 +2860,7 @@ interface CellProps extends NativeDivProps {
|
|
|
2355
2860
|
/**
|
|
2356
2861
|
* Click handler for the cell.
|
|
2357
2862
|
*/
|
|
2358
|
-
onClick?:
|
|
2863
|
+
onClick?: React__default.MouseEventHandler<HTMLElement>;
|
|
2359
2864
|
/**
|
|
2360
2865
|
* URL for anchor element (when as="a").
|
|
2361
2866
|
*/
|
|
@@ -2490,7 +2995,7 @@ declare const Cell: ({ as, title, description, side, icon, avatar, avatarAlign,
|
|
|
2490
2995
|
*/
|
|
2491
2996
|
declare const CellSkeleton: () => react_jsx_runtime.JSX.Element;
|
|
2492
2997
|
|
|
2493
|
-
type NativeInputProps$
|
|
2998
|
+
type NativeInputProps$5 = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'children' | 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'type' | 'color'>;
|
|
2494
2999
|
/**
|
|
2495
3000
|
* Props for the Checkbox component.
|
|
2496
3001
|
*
|
|
@@ -2502,7 +3007,7 @@ type NativeInputProps$4 = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'c
|
|
|
2502
3007
|
* />
|
|
2503
3008
|
* ```
|
|
2504
3009
|
*/
|
|
2505
|
-
interface CheckboxProps extends NativeInputProps$
|
|
3010
|
+
interface CheckboxProps extends NativeInputProps$5 {
|
|
2506
3011
|
/**
|
|
2507
3012
|
* Controlled checked state.
|
|
2508
3013
|
*/
|
|
@@ -2520,7 +3025,7 @@ interface CheckboxProps extends NativeInputProps$4 {
|
|
|
2520
3025
|
/**
|
|
2521
3026
|
* Callback fired when the checkbox state changes.
|
|
2522
3027
|
*/
|
|
2523
|
-
onChange?:
|
|
3028
|
+
onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
|
|
2524
3029
|
}
|
|
2525
3030
|
/**
|
|
2526
3031
|
* Checkbox component for selecting multiple options.
|
|
@@ -2607,7 +3112,95 @@ interface CheckboxProps extends NativeInputProps$4 {
|
|
|
2607
3112
|
*/
|
|
2608
3113
|
declare const Checkbox: ({ checked, defaultChecked, disabled, onChange, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
|
|
2609
3114
|
|
|
2610
|
-
type
|
|
3115
|
+
type NativeInputProps$4 = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'children' | 'value' | 'defaultValue' | 'onChange' | 'disabled' | 'readOnly'>;
|
|
3116
|
+
/**
|
|
3117
|
+
* Compact input action item definition.
|
|
3118
|
+
*/
|
|
3119
|
+
interface CompactInputActionItem {
|
|
3120
|
+
/**
|
|
3121
|
+
* Label for the action for accessibility, not shown
|
|
3122
|
+
*/
|
|
3123
|
+
label: string;
|
|
3124
|
+
/**
|
|
3125
|
+
* Icon to show
|
|
3126
|
+
*/
|
|
3127
|
+
icon: IconName;
|
|
3128
|
+
/**
|
|
3129
|
+
* Callback when the button is clicked
|
|
3130
|
+
*/
|
|
3131
|
+
onClick: () => void;
|
|
3132
|
+
/**
|
|
3133
|
+
* Visual style variant of the button.
|
|
3134
|
+
* @default 'default'
|
|
3135
|
+
*/
|
|
3136
|
+
variant?: 'default' | 'accent';
|
|
3137
|
+
}
|
|
3138
|
+
/**
|
|
3139
|
+
* Props for the CompactInput component.
|
|
3140
|
+
*
|
|
3141
|
+
* @example
|
|
3142
|
+
* ```tsx
|
|
3143
|
+
* <CompactInput
|
|
3144
|
+
* label="Message input"
|
|
3145
|
+
* placeholder="Type a message"
|
|
3146
|
+
* onChange={(value) => console.log(value)}
|
|
3147
|
+
* />
|
|
3148
|
+
* ```
|
|
3149
|
+
*/
|
|
3150
|
+
interface CompactInputProps extends NativeInputProps$4 {
|
|
3151
|
+
/**
|
|
3152
|
+
* Controlled value of the input.
|
|
3153
|
+
*/
|
|
3154
|
+
value?: string;
|
|
3155
|
+
/**
|
|
3156
|
+
* Callback fired when the input value changes.
|
|
3157
|
+
*/
|
|
3158
|
+
onChange?: (value: string) => void;
|
|
3159
|
+
/**
|
|
3160
|
+
* Label for the input for accessibility, not shown
|
|
3161
|
+
*/
|
|
3162
|
+
label: string;
|
|
3163
|
+
/**
|
|
3164
|
+
* Placeholder text shown when the input is empty.
|
|
3165
|
+
*/
|
|
3166
|
+
placeholder?: string;
|
|
3167
|
+
/**
|
|
3168
|
+
* Whether the input is disabled.
|
|
3169
|
+
* @default false
|
|
3170
|
+
*/
|
|
3171
|
+
disabled?: boolean;
|
|
3172
|
+
/**
|
|
3173
|
+
* Actions to render as icons at the end of the input.
|
|
3174
|
+
*/
|
|
3175
|
+
actions?: CompactInputActionItem[];
|
|
3176
|
+
}
|
|
3177
|
+
/**
|
|
3178
|
+
* Input component with a compact style.
|
|
3179
|
+
*
|
|
3180
|
+
* @example
|
|
3181
|
+
* ```tsx
|
|
3182
|
+
* import { CompactInput } from '@revolut/ui-kit-miniapp'
|
|
3183
|
+
* import { useState } from 'react'
|
|
3184
|
+
*
|
|
3185
|
+
* // Controlled usage
|
|
3186
|
+
* function ControlledExample() {
|
|
3187
|
+
* const [message, setMessage] = useState('')
|
|
3188
|
+
*
|
|
3189
|
+
* return (
|
|
3190
|
+
* <CompactInput
|
|
3191
|
+
* value={message}
|
|
3192
|
+
* onChange={setMessage}
|
|
3193
|
+
* label="Message input"
|
|
3194
|
+
* placeholder="Type a message"
|
|
3195
|
+
* actions={[ label: 'Send', onClick: () => console.log('Clicked!'), icon: 'ArrowThinUp' ]}
|
|
3196
|
+
* />
|
|
3197
|
+
* )
|
|
3198
|
+
* }
|
|
3199
|
+
* ```
|
|
3200
|
+
*/
|
|
3201
|
+
declare const CompactInput: ({ actions, onChange, label, value: controlledValue, placeholder, disabled, ...rest }: CompactInputProps) => react_jsx_runtime.JSX.Element;
|
|
3202
|
+
|
|
3203
|
+
type BaseDivProps = Omit<React__default.HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children' | 'onCopy' | 'onError' | 'onClick'>;
|
|
2611
3204
|
/**
|
|
2612
3205
|
* Props for the Copyable component.
|
|
2613
3206
|
*
|
|
@@ -2635,7 +3228,7 @@ interface CopyableProps extends BaseDivProps {
|
|
|
2635
3228
|
/**
|
|
2636
3229
|
* Callback fired when the copy button is clicked.
|
|
2637
3230
|
*/
|
|
2638
|
-
onClick?:
|
|
3231
|
+
onClick?: React__default.MouseEventHandler<HTMLButtonElement>;
|
|
2639
3232
|
/**
|
|
2640
3233
|
* Custom label for the copy button (for accessibility).
|
|
2641
3234
|
* @default 'Copy'
|
|
@@ -2644,7 +3237,7 @@ interface CopyableProps extends BaseDivProps {
|
|
|
2644
3237
|
/**
|
|
2645
3238
|
* Content to display alongside the copy button.
|
|
2646
3239
|
*/
|
|
2647
|
-
children?:
|
|
3240
|
+
children?: React__default.ReactNode;
|
|
2648
3241
|
}
|
|
2649
3242
|
/**
|
|
2650
3243
|
* Copyable component for displaying content with a copy-to-clipboard button.
|
|
@@ -2715,15 +3308,15 @@ interface DetailsCellProps extends NativeDivProps {
|
|
|
2715
3308
|
/**
|
|
2716
3309
|
* Label text displayed on the left.
|
|
2717
3310
|
*/
|
|
2718
|
-
title:
|
|
3311
|
+
title: React__default.ReactNode;
|
|
2719
3312
|
/**
|
|
2720
3313
|
* Value text displayed on the right.
|
|
2721
3314
|
*/
|
|
2722
|
-
content:
|
|
3315
|
+
content: React__default.ReactNode;
|
|
2723
3316
|
/**
|
|
2724
3317
|
* Additional note displayed below, spanning full width.
|
|
2725
3318
|
*/
|
|
2726
|
-
note?:
|
|
3319
|
+
note?: React__default.ReactNode;
|
|
2727
3320
|
}
|
|
2728
3321
|
/**
|
|
2729
3322
|
* DetailsCell component for displaying key-value pairs.
|
|
@@ -2801,7 +3394,7 @@ interface DropdownProps extends NativeDivProps {
|
|
|
2801
3394
|
/**
|
|
2802
3395
|
* Element ref where the tooltip is anchored.
|
|
2803
3396
|
*/
|
|
2804
|
-
anchorRef:
|
|
3397
|
+
anchorRef: React__default.RefObject<HTMLElement | null>;
|
|
2805
3398
|
/**
|
|
2806
3399
|
* Callback triggered when the dropdown is closed.
|
|
2807
3400
|
*/
|
|
@@ -2813,7 +3406,7 @@ interface DropdownProps extends NativeDivProps {
|
|
|
2813
3406
|
/**
|
|
2814
3407
|
* Dropdown content.
|
|
2815
3408
|
*/
|
|
2816
|
-
children:
|
|
3409
|
+
children: React__default.ReactNode;
|
|
2817
3410
|
}
|
|
2818
3411
|
/**
|
|
2819
3412
|
* Dropdown component for displaying content anchored to an element.
|
|
@@ -2860,7 +3453,7 @@ interface FootnoteProps extends NativeDivProps {
|
|
|
2860
3453
|
/**
|
|
2861
3454
|
* Footnote content.
|
|
2862
3455
|
*/
|
|
2863
|
-
children?:
|
|
3456
|
+
children?: React__default.ReactNode;
|
|
2864
3457
|
}
|
|
2865
3458
|
/**
|
|
2866
3459
|
* Footnote component for secondary, supporting text.
|
|
@@ -2942,7 +3535,7 @@ interface GroupProps extends NativeDivProps {
|
|
|
2942
3535
|
/**
|
|
2943
3536
|
* Group content.
|
|
2944
3537
|
*/
|
|
2945
|
-
children?:
|
|
3538
|
+
children?: React__default.ReactNode;
|
|
2946
3539
|
}
|
|
2947
3540
|
/**
|
|
2948
3541
|
* Group component for visually grouping related content.
|
|
@@ -3049,7 +3642,7 @@ interface IconProps {
|
|
|
3049
3642
|
*/
|
|
3050
3643
|
declare const Icon: ({ name, size, color }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
3051
3644
|
|
|
3052
|
-
type NativeInputProps$3 = Omit<
|
|
3645
|
+
type NativeInputProps$3 = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'children' | 'value' | 'defaultValue' | 'onChange' | 'disabled' | 'readOnly' | 'type' | 'size'>;
|
|
3053
3646
|
/**
|
|
3054
3647
|
* Input type options.
|
|
3055
3648
|
*/
|
|
@@ -3078,7 +3671,7 @@ interface InputProps extends NativeInputProps$3 {
|
|
|
3078
3671
|
/**
|
|
3079
3672
|
* Callback fired when the input value changes.
|
|
3080
3673
|
*/
|
|
3081
|
-
onChange?:
|
|
3674
|
+
onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
|
|
3082
3675
|
/**
|
|
3083
3676
|
* Label displayed above the input.
|
|
3084
3677
|
*/
|
|
@@ -3110,11 +3703,11 @@ interface InputProps extends NativeInputProps$3 {
|
|
|
3110
3703
|
/**
|
|
3111
3704
|
* Description or helper text shown below the input.
|
|
3112
3705
|
*/
|
|
3113
|
-
description?:
|
|
3706
|
+
description?: React__default.ReactNode;
|
|
3114
3707
|
/**
|
|
3115
3708
|
* Error message shown when invalid.
|
|
3116
3709
|
*/
|
|
3117
|
-
errorMessage?:
|
|
3710
|
+
errorMessage?: React__default.ReactNode;
|
|
3118
3711
|
/**
|
|
3119
3712
|
* Custom label for the clear button (for accessibility).
|
|
3120
3713
|
* @default 'Clear'
|
|
@@ -3233,7 +3826,7 @@ interface InputProps extends NativeInputProps$3 {
|
|
|
3233
3826
|
*/
|
|
3234
3827
|
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
3828
|
|
|
3236
|
-
type NativeAnchorProps = Omit<
|
|
3829
|
+
type NativeAnchorProps = Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'style'>;
|
|
3237
3830
|
/**
|
|
3238
3831
|
* Props for the Link component.
|
|
3239
3832
|
*
|
|
@@ -3257,7 +3850,7 @@ interface LinkProps extends NativeAnchorProps {
|
|
|
3257
3850
|
/**
|
|
3258
3851
|
* Link content.
|
|
3259
3852
|
*/
|
|
3260
|
-
children?:
|
|
3853
|
+
children?: React__default.ReactNode;
|
|
3261
3854
|
}
|
|
3262
3855
|
/**
|
|
3263
3856
|
* Link component for navigation to external or internal URLs.
|
|
@@ -3325,7 +3918,7 @@ interface ListItem {
|
|
|
3325
3918
|
/**
|
|
3326
3919
|
* Content to show
|
|
3327
3920
|
*/
|
|
3328
|
-
content:
|
|
3921
|
+
content: React__default.ReactNode;
|
|
3329
3922
|
/**
|
|
3330
3923
|
* Icon to show at the start
|
|
3331
3924
|
*/
|
|
@@ -3414,7 +4007,7 @@ interface FilterButtonProps extends NativeButtonProps {
|
|
|
3414
4007
|
/**
|
|
3415
4008
|
* Button content.
|
|
3416
4009
|
*/
|
|
3417
|
-
children?:
|
|
4010
|
+
children?: React__default.ReactNode;
|
|
3418
4011
|
}
|
|
3419
4012
|
/**
|
|
3420
4013
|
* FilterButton component for filter controls.
|
|
@@ -3454,7 +4047,7 @@ interface FilterButtonProps extends NativeButtonProps {
|
|
|
3454
4047
|
*/
|
|
3455
4048
|
declare const FilterButton: ({ active, disabled, onClear, labelClear, icon, children, ...rest }: FilterButtonProps) => react_jsx_runtime.JSX.Element;
|
|
3456
4049
|
|
|
3457
|
-
type NativeInputProps$2 = Omit<
|
|
4050
|
+
type NativeInputProps$2 = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'children' | 'value' | 'defaultValue' | 'onChange' | 'disabled' | 'readOnly'>;
|
|
3458
4051
|
/**
|
|
3459
4052
|
* Props for the Search component.
|
|
3460
4053
|
*
|
|
@@ -3584,7 +4177,7 @@ interface HStackProps extends NativeSpanProps {
|
|
|
3584
4177
|
/**
|
|
3585
4178
|
* Stack content.
|
|
3586
4179
|
*/
|
|
3587
|
-
children?:
|
|
4180
|
+
children?: React__default.ReactNode;
|
|
3588
4181
|
}
|
|
3589
4182
|
/**
|
|
3590
4183
|
* HStack component for horizontal layout.
|
|
@@ -3616,6 +4209,57 @@ interface HStackProps extends NativeSpanProps {
|
|
|
3616
4209
|
*/
|
|
3617
4210
|
declare const HStack: ({ align, gap, children, ...rest }: HStackProps) => react_jsx_runtime.JSX.Element;
|
|
3618
4211
|
|
|
4212
|
+
/**
|
|
4213
|
+
* Props for the MessageBubble component.
|
|
4214
|
+
*
|
|
4215
|
+
* @example
|
|
4216
|
+
* ```tsx
|
|
4217
|
+
* <MessageBubble footer="10:12" placement="sender">
|
|
4218
|
+
* Message!
|
|
4219
|
+
* </MessageBubble>
|
|
4220
|
+
* ```
|
|
4221
|
+
*/
|
|
4222
|
+
interface MessageBubbleProps {
|
|
4223
|
+
/**
|
|
4224
|
+
* Message content.
|
|
4225
|
+
*/
|
|
4226
|
+
children: React__default.ReactNode;
|
|
4227
|
+
/**
|
|
4228
|
+
* Content shown in the footer of the message.
|
|
4229
|
+
*/
|
|
4230
|
+
footer?: string;
|
|
4231
|
+
/**
|
|
4232
|
+
* Variant of the footer of the message.
|
|
4233
|
+
*/
|
|
4234
|
+
footerVariant?: 'default' | 'overlay';
|
|
4235
|
+
/**
|
|
4236
|
+
* Placement of the message.
|
|
4237
|
+
*/
|
|
4238
|
+
placement?: MessageBubblePlacement;
|
|
4239
|
+
/**
|
|
4240
|
+
* Whether the message has tail or not.
|
|
4241
|
+
* @default true
|
|
4242
|
+
*/
|
|
4243
|
+
withTail?: boolean;
|
|
4244
|
+
}
|
|
4245
|
+
/**
|
|
4246
|
+
* MessageBubble displays chat-style sender or receiver messages with optional avatar, footer, actions, and reply content.
|
|
4247
|
+
*
|
|
4248
|
+
* @example
|
|
4249
|
+
* ```tsx
|
|
4250
|
+
* import { MessageBubble } from '@revolut/ui-kit-miniapp'
|
|
4251
|
+
*
|
|
4252
|
+
* function MessageExample() {
|
|
4253
|
+
* return (
|
|
4254
|
+
* <MessageBubble footer="10:12" placement="sender">
|
|
4255
|
+
* Message!
|
|
4256
|
+
* </MessageBubble>
|
|
4257
|
+
* )
|
|
4258
|
+
* }
|
|
4259
|
+
* ```
|
|
4260
|
+
*/
|
|
4261
|
+
declare const MessageBubble: ({ children, footer, footerVariant, placement, withTail, }: MessageBubbleProps) => react_jsx_runtime.JSX.Element;
|
|
4262
|
+
|
|
3619
4263
|
/**
|
|
3620
4264
|
* Props for the Placeholder component.
|
|
3621
4265
|
*
|
|
@@ -3645,7 +4289,7 @@ interface PlaceholderProps {
|
|
|
3645
4289
|
/**
|
|
3646
4290
|
* Placeholder action.
|
|
3647
4291
|
*/
|
|
3648
|
-
action?:
|
|
4292
|
+
action?: React__default.ReactNode;
|
|
3649
4293
|
}
|
|
3650
4294
|
/**
|
|
3651
4295
|
* Placeholder component for showing status information.
|
|
@@ -3702,7 +4346,7 @@ interface PopupProps {
|
|
|
3702
4346
|
/**
|
|
3703
4347
|
* Modal content.
|
|
3704
4348
|
*/
|
|
3705
|
-
children?:
|
|
4349
|
+
children?: React__default.ReactNode;
|
|
3706
4350
|
/**
|
|
3707
4351
|
* Modal title
|
|
3708
4352
|
*/
|
|
@@ -3715,6 +4359,22 @@ interface PopupProps {
|
|
|
3715
4359
|
* Modal actions
|
|
3716
4360
|
*/
|
|
3717
4361
|
actions?: PopupActionItem[];
|
|
4362
|
+
/**
|
|
4363
|
+
* Modal bottom content
|
|
4364
|
+
*/
|
|
4365
|
+
footer?: React__default.ReactNode;
|
|
4366
|
+
/**
|
|
4367
|
+
* Modal header variant
|
|
4368
|
+
*/
|
|
4369
|
+
headerVariant?: 'modal' | 'item';
|
|
4370
|
+
/**
|
|
4371
|
+
* Modal header end icon or image
|
|
4372
|
+
*/
|
|
4373
|
+
avatar?: IconName | string;
|
|
4374
|
+
/**
|
|
4375
|
+
* Icon to show as close button
|
|
4376
|
+
*/
|
|
4377
|
+
closeButtonIcon?: 'back' | 'close';
|
|
3718
4378
|
}
|
|
3719
4379
|
/**
|
|
3720
4380
|
* Popup component for displaying modal content with full screen size.
|
|
@@ -3737,7 +4397,7 @@ interface PopupProps {
|
|
|
3737
4397
|
* }
|
|
3738
4398
|
* ```
|
|
3739
4399
|
*/
|
|
3740
|
-
declare const Popup: ({ open, onClose, children, title, description, actions, }: PopupProps) => react_jsx_runtime.JSX.Element;
|
|
4400
|
+
declare const Popup: ({ open, onClose, children, title, description, actions, footer, headerVariant, avatar, closeButtonIcon, }: PopupProps) => react_jsx_runtime.JSX.Element;
|
|
3741
4401
|
|
|
3742
4402
|
/**
|
|
3743
4403
|
* Progress steps item definition.
|
|
@@ -3879,7 +4539,7 @@ interface SpacerProps extends NativeDivProps {
|
|
|
3879
4539
|
*/
|
|
3880
4540
|
declare const Spacer: ({ width, height, ...rest }: SpacerProps) => react_jsx_runtime.JSX.Element;
|
|
3881
4541
|
|
|
3882
|
-
type NativeInputProps$1 = Omit<
|
|
4542
|
+
type NativeInputProps$1 = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'children' | 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'type' | 'color'>;
|
|
3883
4543
|
/**
|
|
3884
4544
|
* Props for the Radio component.
|
|
3885
4545
|
*
|
|
@@ -3911,7 +4571,7 @@ interface RadioProps extends NativeInputProps$1 {
|
|
|
3911
4571
|
/**
|
|
3912
4572
|
* Callback fired when the radio state changes.
|
|
3913
4573
|
*/
|
|
3914
|
-
onChange?:
|
|
4574
|
+
onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
|
|
3915
4575
|
/**
|
|
3916
4576
|
* Name attribute for grouping radio buttons.
|
|
3917
4577
|
*/
|
|
@@ -4025,11 +4685,11 @@ interface SubheaderProps extends NativeDivProps {
|
|
|
4025
4685
|
/**
|
|
4026
4686
|
* Content displayed on the right side of the subheader.
|
|
4027
4687
|
*/
|
|
4028
|
-
side?:
|
|
4688
|
+
side?: React__default.ReactNode;
|
|
4029
4689
|
/**
|
|
4030
4690
|
* Main title content.
|
|
4031
4691
|
*/
|
|
4032
|
-
children:
|
|
4692
|
+
children: React__default.ReactNode;
|
|
4033
4693
|
}
|
|
4034
4694
|
/**
|
|
4035
4695
|
* Subheader component for section titles.
|
|
@@ -4093,7 +4753,7 @@ interface SubheaderProps extends NativeDivProps {
|
|
|
4093
4753
|
*/
|
|
4094
4754
|
declare const Subheader: ({ variant, side, children, ...rest }: SubheaderProps) => react_jsx_runtime.JSX.Element;
|
|
4095
4755
|
|
|
4096
|
-
type NativeInputProps = Omit<
|
|
4756
|
+
type NativeInputProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'children' | 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'type' | 'color'>;
|
|
4097
4757
|
/**
|
|
4098
4758
|
* Props for the Switch component.
|
|
4099
4759
|
*
|
|
@@ -4123,7 +4783,7 @@ interface SwitchProps extends NativeInputProps {
|
|
|
4123
4783
|
/**
|
|
4124
4784
|
* Callback fired when the switch state changes.
|
|
4125
4785
|
*/
|
|
4126
|
-
onChange?:
|
|
4786
|
+
onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
|
|
4127
4787
|
}
|
|
4128
4788
|
/**
|
|
4129
4789
|
* Switch component for toggling between on and off states.
|
|
@@ -4398,7 +5058,7 @@ interface TextProps extends NativeSpanProps {
|
|
|
4398
5058
|
/**
|
|
4399
5059
|
* Text content.
|
|
4400
5060
|
*/
|
|
4401
|
-
children?:
|
|
5061
|
+
children?: React__default.ReactNode;
|
|
4402
5062
|
}
|
|
4403
5063
|
/**
|
|
4404
5064
|
* Text component for rendering styled typography.
|
|
@@ -4454,7 +5114,7 @@ interface TextProps extends NativeSpanProps {
|
|
|
4454
5114
|
*/
|
|
4455
5115
|
declare const Text: ({ textStyle, as, children, ...rest }: TextProps) => react_jsx_runtime.JSX.Element;
|
|
4456
5116
|
|
|
4457
|
-
type NativeTextAreaProps = Omit<
|
|
5117
|
+
type NativeTextAreaProps = Omit<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'style' | 'children' | 'value' | 'defaultValue' | 'onChange' | 'disabled' | 'readOnly'>;
|
|
4458
5118
|
/**
|
|
4459
5119
|
* Props for the TextArea component.
|
|
4460
5120
|
*
|
|
@@ -4479,7 +5139,7 @@ interface TextAreaProps extends NativeTextAreaProps {
|
|
|
4479
5139
|
/**
|
|
4480
5140
|
* Callback fired when the textarea value changes.
|
|
4481
5141
|
*/
|
|
4482
|
-
onChange?:
|
|
5142
|
+
onChange?: React__default.ChangeEventHandler<HTMLTextAreaElement>;
|
|
4483
5143
|
/**
|
|
4484
5144
|
* Label displayed above the textarea.
|
|
4485
5145
|
*/
|
|
@@ -4506,11 +5166,11 @@ interface TextAreaProps extends NativeTextAreaProps {
|
|
|
4506
5166
|
/**
|
|
4507
5167
|
* Description or helper text shown below the textarea.
|
|
4508
5168
|
*/
|
|
4509
|
-
description?:
|
|
5169
|
+
description?: React__default.ReactNode;
|
|
4510
5170
|
/**
|
|
4511
5171
|
* Error message shown when invalid.
|
|
4512
5172
|
*/
|
|
4513
|
-
errorMessage?:
|
|
5173
|
+
errorMessage?: React__default.ReactNode;
|
|
4514
5174
|
/**
|
|
4515
5175
|
* Number of visible text lines.
|
|
4516
5176
|
* @default 1
|
|
@@ -4652,7 +5312,7 @@ interface ToggleButtonProps extends Omit<NativeButtonProps, 'onChange' | 'onTogg
|
|
|
4652
5312
|
/**
|
|
4653
5313
|
* Button content.
|
|
4654
5314
|
*/
|
|
4655
|
-
children:
|
|
5315
|
+
children: React__default.ReactNode;
|
|
4656
5316
|
}
|
|
4657
5317
|
/**
|
|
4658
5318
|
* ToggleButton component for toggle-able button states.
|
|
@@ -4742,7 +5402,7 @@ interface VisuallyHiddenProps {
|
|
|
4742
5402
|
/**
|
|
4743
5403
|
* Content to hide visually but keep accessible to screen readers.
|
|
4744
5404
|
*/
|
|
4745
|
-
children?:
|
|
5405
|
+
children?: React__default.ReactNode;
|
|
4746
5406
|
}
|
|
4747
5407
|
/**
|
|
4748
5408
|
* VisuallyHidden component for accessible hidden content.
|
|
@@ -4837,7 +5497,7 @@ interface VStackProps extends NativeSpanProps {
|
|
|
4837
5497
|
/**
|
|
4838
5498
|
* Stack content.
|
|
4839
5499
|
*/
|
|
4840
|
-
children?:
|
|
5500
|
+
children?: React__default.ReactNode;
|
|
4841
5501
|
}
|
|
4842
5502
|
/**
|
|
4843
5503
|
* VStack component for vertical layout.
|
|
@@ -4921,7 +5581,7 @@ interface RootProviderProps {
|
|
|
4921
5581
|
/**
|
|
4922
5582
|
* Application content.
|
|
4923
5583
|
*/
|
|
4924
|
-
children:
|
|
5584
|
+
children: React__default.ReactNode;
|
|
4925
5585
|
}
|
|
4926
5586
|
/**
|
|
4927
5587
|
* RootProvider component that sets up the theme and internationalisation context.
|
|
@@ -4959,11 +5619,11 @@ interface BottomSheetHeaderProps {
|
|
|
4959
5619
|
/**
|
|
4960
5620
|
* Avatar or icon displayed at the top of the header.
|
|
4961
5621
|
*/
|
|
4962
|
-
avatar?:
|
|
5622
|
+
avatar?: React__default.ReactNode;
|
|
4963
5623
|
/**
|
|
4964
5624
|
* Description text displayed below the title.
|
|
4965
5625
|
*/
|
|
4966
|
-
description?:
|
|
5626
|
+
description?: React__default.ReactNode;
|
|
4967
5627
|
/**
|
|
4968
5628
|
* Custom label for the close button.
|
|
4969
5629
|
*/
|
|
@@ -4971,7 +5631,7 @@ interface BottomSheetHeaderProps {
|
|
|
4971
5631
|
/**
|
|
4972
5632
|
* Title content.
|
|
4973
5633
|
*/
|
|
4974
|
-
children?:
|
|
5634
|
+
children?: React__default.ReactNode;
|
|
4975
5635
|
}
|
|
4976
5636
|
declare const BottomSheetHeader: ({ avatar, description, labelButtonClose, children, }: BottomSheetHeaderProps) => react_jsx_runtime.JSX.Element;
|
|
4977
5637
|
/**
|
|
@@ -4981,7 +5641,7 @@ interface BottomSheetContentProps {
|
|
|
4981
5641
|
/**
|
|
4982
5642
|
* Content to display in the body of the bottom sheet.
|
|
4983
5643
|
*/
|
|
4984
|
-
children?:
|
|
5644
|
+
children?: React__default.ReactNode;
|
|
4985
5645
|
}
|
|
4986
5646
|
declare const BottomSheetContent: ({ children }: BottomSheetContentProps) => react_jsx_runtime.JSX.Element;
|
|
4987
5647
|
/**
|
|
@@ -4991,7 +5651,7 @@ interface BottomSheetActionsProps {
|
|
|
4991
5651
|
/**
|
|
4992
5652
|
* Action buttons to display at the bottom.
|
|
4993
5653
|
*/
|
|
4994
|
-
children?:
|
|
5654
|
+
children?: React__default.ReactNode;
|
|
4995
5655
|
}
|
|
4996
5656
|
declare const BottomSheetActions: ({ children }: BottomSheetActionsProps) => react_jsx_runtime.JSX.Element;
|
|
4997
5657
|
/**
|
|
@@ -5009,9 +5669,9 @@ interface BottomSheetProps {
|
|
|
5009
5669
|
/**
|
|
5010
5670
|
* Bottom sheet content (typically Header, Content, and Actions).
|
|
5011
5671
|
*/
|
|
5012
|
-
children?:
|
|
5672
|
+
children?: React__default.ReactNode;
|
|
5013
5673
|
}
|
|
5014
|
-
interface BottomSheetComponent extends
|
|
5674
|
+
interface BottomSheetComponent extends React__default.FC<BottomSheetProps> {
|
|
5015
5675
|
Header: typeof BottomSheetHeader;
|
|
5016
5676
|
Content: typeof BottomSheetContent;
|
|
5017
5677
|
Actions: typeof BottomSheetActions;
|
|
@@ -5100,19 +5760,19 @@ interface PageHeaderProps extends NativeHeadingProps {
|
|
|
5100
5760
|
/**
|
|
5101
5761
|
* Custom label for the close button.
|
|
5102
5762
|
*/
|
|
5103
|
-
labelButtonClose?:
|
|
5763
|
+
labelButtonClose?: React__default.ReactNode;
|
|
5104
5764
|
/**
|
|
5105
5765
|
* Custom label for the back button.
|
|
5106
5766
|
*/
|
|
5107
|
-
labelButtonBack?:
|
|
5767
|
+
labelButtonBack?: React__default.ReactNode;
|
|
5108
5768
|
/**
|
|
5109
5769
|
* Subtitle text displayed below the title.
|
|
5110
5770
|
*/
|
|
5111
|
-
subtitle?:
|
|
5771
|
+
subtitle?: React__default.ReactNode;
|
|
5112
5772
|
/**
|
|
5113
5773
|
* Description text displayed below the subtitle.
|
|
5114
5774
|
*/
|
|
5115
|
-
description?:
|
|
5775
|
+
description?: React__default.ReactNode;
|
|
5116
5776
|
/**
|
|
5117
5777
|
* Whether the header is in a loading state.
|
|
5118
5778
|
* @default false
|
|
@@ -5121,7 +5781,7 @@ interface PageHeaderProps extends NativeHeadingProps {
|
|
|
5121
5781
|
/**
|
|
5122
5782
|
* Header title content.
|
|
5123
5783
|
*/
|
|
5124
|
-
children?:
|
|
5784
|
+
children?: React__default.ReactNode;
|
|
5125
5785
|
/**
|
|
5126
5786
|
* Header actions.
|
|
5127
5787
|
*/
|
|
@@ -5135,11 +5795,11 @@ interface PageMainProps extends NativeMainProps {
|
|
|
5135
5795
|
/**
|
|
5136
5796
|
* Main content.
|
|
5137
5797
|
*/
|
|
5138
|
-
children?:
|
|
5798
|
+
children?: React__default.ReactNode;
|
|
5139
5799
|
/**
|
|
5140
5800
|
* Action buttons displayed at the bottom of the page.
|
|
5141
5801
|
*/
|
|
5142
|
-
actions?:
|
|
5802
|
+
actions?: React__default.ReactNode;
|
|
5143
5803
|
}
|
|
5144
5804
|
declare const PageMain: ({ children, actions, ...rest }: PageMainProps) => react_jsx_runtime.JSX.Element;
|
|
5145
5805
|
/**
|
|
@@ -5149,7 +5809,7 @@ interface PageTabsProps extends NativeDivProps {
|
|
|
5149
5809
|
/**
|
|
5150
5810
|
* Tabs content (typically TabBar or similar).
|
|
5151
5811
|
*/
|
|
5152
|
-
children?:
|
|
5812
|
+
children?: React__default.ReactNode;
|
|
5153
5813
|
}
|
|
5154
5814
|
declare const PageTabs: ({ children, ...rest }: PageTabsProps) => react_jsx_runtime.JSX.Element;
|
|
5155
5815
|
/**
|
|
@@ -5159,9 +5819,9 @@ interface PageProps extends NativeDivProps {
|
|
|
5159
5819
|
/**
|
|
5160
5820
|
* Page content (typically Page.Header and Page.Main).
|
|
5161
5821
|
*/
|
|
5162
|
-
children?:
|
|
5822
|
+
children?: React__default.ReactNode;
|
|
5163
5823
|
}
|
|
5164
|
-
interface PageComponent extends
|
|
5824
|
+
interface PageComponent extends React__default.FC<PageProps> {
|
|
5165
5825
|
Header: typeof PageHeader;
|
|
5166
5826
|
Main: typeof PageMain;
|
|
5167
5827
|
Tabs: typeof PageTabs;
|
|
@@ -5220,7 +5880,7 @@ interface StatusSheetAction {
|
|
|
5220
5880
|
/**
|
|
5221
5881
|
* Text to display on the action button.
|
|
5222
5882
|
*/
|
|
5223
|
-
title:
|
|
5883
|
+
title: React__default.ReactNode;
|
|
5224
5884
|
/**
|
|
5225
5885
|
* Callback when the action button is clicked.
|
|
5226
5886
|
*/
|
|
@@ -5242,11 +5902,11 @@ interface StatusSheetOptions {
|
|
|
5242
5902
|
/**
|
|
5243
5903
|
* Title content displayed in the status sheet.
|
|
5244
5904
|
*/
|
|
5245
|
-
title:
|
|
5905
|
+
title: React__default.ReactNode;
|
|
5246
5906
|
/**
|
|
5247
5907
|
* Optional description content displayed below the title.
|
|
5248
5908
|
*/
|
|
5249
|
-
description?:
|
|
5909
|
+
description?: React__default.ReactNode;
|
|
5250
5910
|
/**
|
|
5251
5911
|
* Optional action buttons displayed at the bottom.
|
|
5252
5912
|
*/
|
|
@@ -5445,5 +6105,5 @@ declare const Token: {
|
|
|
5445
6105
|
};
|
|
5446
6106
|
};
|
|
5447
6107
|
|
|
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 };
|
|
6108
|
+
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 };
|
|
6109
|
+
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 };
|