@hubspot/ui-extensions 0.8.39 → 0.8.41

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.
@@ -1,6 +1,11 @@
1
1
  import type * as types from './types';
2
2
  /**
3
- * @link https://developers.hubspot.com/beta-docs/reference/ui-components/standard-components/alert
3
+ * The `Alert` component renders an alert within a card. Use this component to give usage guidance, notify users of action results, or warn them about potential issues or failures.
4
+ *
5
+ * **Links:**
6
+ *
7
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/alert Docs}
8
+ * - {@link https://app.hubspot.com/docs/48008916/reference/ui-components/standard-components/alert#variants Variants}
4
9
  */
5
10
  export declare const Alert: "Alert" & {
6
11
  readonly type?: "Alert" | undefined;
@@ -12,14 +17,21 @@ export declare const Alert: "Alert" & {
12
17
  *
13
18
  * **Links:**
14
19
  *
15
- * - {@link https://developers.hubspot.com/beta-docs/reference/ui-components/standard-components/button Docs}
16
- * - {@link https://developers.hubspot.com/beta-docs/reference/ui-components/standard-components/button#usage-examples Examples}
20
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/button Docs}
21
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/button#usage-examples Examples}
17
22
  */
18
23
  export declare const Button: "Button" & {
19
24
  readonly type?: "Button" | undefined;
20
25
  readonly props?: types.ButtonProps | undefined;
21
26
  readonly children?: true | undefined;
22
27
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Button", types.ButtonProps, true>>;
28
+ /**
29
+ * The `ButtonRow` component renders a row of specified `Button` components. Use this component when you want to include multiple buttons in a row.
30
+ *
31
+ * **Links:**
32
+ *
33
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/button-row Docs}
34
+ */
23
35
  export declare const ButtonRow: "ButtonRow" & {
24
36
  readonly type?: "ButtonRow" | undefined;
25
37
  readonly props?: types.ButtonRowProps | undefined;
@@ -30,56 +42,134 @@ export declare const Card: "Card" & {
30
42
  readonly props?: types.CardProps | undefined;
31
43
  readonly children?: true | undefined;
32
44
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Card", types.CardProps, true>>;
45
+ /**
46
+ * The `DescriptionList` component renders pairs of labels and values. Use this component to display pairs of labels and values in a way that's easy to read at a glance.
47
+ *
48
+ * **Links:**
49
+ *
50
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/description-list Docs}
51
+ */
33
52
  export declare const DescriptionList: "DescriptionList" & {
34
53
  readonly type?: "DescriptionList" | undefined;
35
54
  readonly props?: types.DescriptionListProps | undefined;
36
55
  readonly children?: true | undefined;
37
56
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"DescriptionList", types.DescriptionListProps, true>>;
57
+ /**
58
+ * The `DescriptionListItem` component renders a single set of a label and value. Use this component within a `DescriptionList` component.
59
+ *
60
+ * **Links:**
61
+ *
62
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/description-list Docs}
63
+ */
38
64
  export declare const DescriptionListItem: "DescriptionListItem" & {
39
65
  readonly type?: "DescriptionListItem" | undefined;
40
66
  readonly props?: types.DescriptionListItemProps | undefined;
41
67
  readonly children?: true | undefined;
42
68
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"DescriptionListItem", types.DescriptionListItemProps, true>>;
69
+ /**
70
+ * The `Divider` component renders a grey, horizontal line for spacing out components vertically or creating sections in an extension. Use this component to space out other components when the content needs more separation than white space.
71
+ *
72
+ * **Links:**
73
+ *
74
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/divider Docs}
75
+ */
43
76
  export declare const Divider: "Divider" & {
44
77
  readonly type?: "Divider" | undefined;
45
78
  readonly props?: types.DividerProps | undefined;
46
79
  readonly children?: true | undefined;
47
80
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Divider", types.DividerProps, true>>;
81
+ /**
82
+ * The `EmptyState` component sets the content that appears when the extension is in an empty state. Use this component when there's no content or data to help guide users.
83
+ *
84
+ * **Links:**
85
+ *
86
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/empty-state Docs}
87
+ */
48
88
  export declare const EmptyState: "EmptyState" & {
49
89
  readonly type?: "EmptyState" | undefined;
50
90
  readonly props?: types.EmptyStateProps | undefined;
51
91
  readonly children?: true | undefined;
52
92
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"EmptyState", types.EmptyStateProps, true>>;
93
+ /**
94
+ * The `ErrorState` component sets the content of an erroring extension. Use this component to guide users through resolving errors that your extension might encounter.
95
+ *
96
+ * **Links:**
97
+ *
98
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/error-state Docs}
99
+ */
53
100
  export declare const ErrorState: "ErrorState" & {
54
101
  readonly type?: "ErrorState" | undefined;
55
102
  readonly props?: types.ErrorStateProps | undefined;
56
103
  readonly children?: true | undefined;
57
104
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ErrorState", types.ErrorStateProps, true>>;
105
+ /**
106
+ * The `Form` component renders a form that can contain other subcomponents, such as `Input`, `Select`, and `Button`. Use this component to enable users to submit data to HubSpot or an external system.
107
+ *
108
+ * **Links:**
109
+ *
110
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/form Docs}
111
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#form Design Pattern Examples}
112
+ */
58
113
  export declare const Form: "Form" & {
59
114
  readonly type?: "Form" | undefined;
60
115
  readonly props?: types.FormProps | undefined;
61
116
  readonly children?: true | undefined;
62
117
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Form", types.FormProps, true>>;
118
+ /**
119
+ * The `Heading` component renders large heading text. Use this component to introduce or differentiate sections of your component.
120
+ *
121
+ * **Links:**
122
+ *
123
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/heading Docs}
124
+ */
63
125
  export declare const Heading: "Heading" & {
64
126
  readonly type?: "Heading" | undefined;
65
127
  readonly props?: types.HeadingProps | undefined;
66
128
  readonly children?: true | undefined;
67
129
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Heading", types.HeadingProps, true>>;
130
+ /**
131
+ * The `Image` component renders an image. Use this component to add a logo or other visual brand identity asset, or to accentuate other content in the extension.
132
+ *
133
+ * **Links:**
134
+ *
135
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/image Docs}
136
+ */
68
137
  export declare const Image: "Image" & {
69
138
  readonly type?: "Image" | undefined;
70
139
  readonly props?: types.ImageProps | undefined;
71
140
  readonly children?: true | undefined;
72
141
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Image", types.ImageProps, true>>;
142
+ /**
143
+ * The `Input` component renders a text input field where a user can enter a custom text value. Like other inputs, this component should be used within a `Form` that has a submit button.
144
+ *
145
+ * **Links:**
146
+ *
147
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/input Docs}
148
+ */
73
149
  export declare const Input: "Input" & {
74
150
  readonly type?: "Input" | undefined;
75
151
  readonly props?: types.InputProps | undefined;
76
152
  readonly children?: true | undefined;
77
153
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Input", types.InputProps, true>>;
154
+ /**
155
+ * The `Link` component renders a clickable hyperlink. Use links to direct users to an external web page or another part of the HubSpot app.
156
+ *
157
+ * **Links:**
158
+ *
159
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/link Docs}
160
+ */
78
161
  export declare const Link: "Link" & {
79
162
  readonly type?: "Link" | undefined;
80
163
  readonly props?: types.LinkProps | undefined;
81
164
  readonly children?: true | undefined;
82
165
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Link", types.LinkProps, true>>;
166
+ /**
167
+ * The `TextArea` component renders a fillable text field. Like other inputs, this component should be used within a `Form` that has a submit button.
168
+ *
169
+ * **Links:**
170
+ *
171
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/text-area Docs}
172
+ */
83
173
  export declare const TextArea: "TextArea" & {
84
174
  readonly type?: "TextArea" | undefined;
85
175
  readonly props?: types.TextAreaProps | undefined;
@@ -91,31 +181,73 @@ export declare const Textarea: "Textarea" & {
91
181
  readonly props?: types.TextAreaProps | undefined;
92
182
  readonly children?: true | undefined;
93
183
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Textarea", types.TextAreaProps, true>>;
184
+ /**
185
+ * The `LoadingSpinner` component renders a visual indicator for when an extension is loading or processing data.
186
+ *
187
+ * **Links:**
188
+ *
189
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/loading-spinner Docs}
190
+ */
94
191
  export declare const LoadingSpinner: "LoadingSpinner" & {
95
192
  readonly type?: "LoadingSpinner" | undefined;
96
193
  readonly props?: types.LoadingSpinnerProps | undefined;
97
194
  readonly children?: true | undefined;
98
195
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"LoadingSpinner", types.LoadingSpinnerProps, true>>;
196
+ /**
197
+ * The `ProgressBar` component renders a visual indicator showing a numeric and/or percentage-based representation of progress. The percentage is calculated based on the maximum possible value specified in the component.
198
+ *
199
+ * **Links:**
200
+ *
201
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/progress-bar Docs}
202
+ */
99
203
  export declare const ProgressBar: "ProgressBar" & {
100
204
  readonly type?: "ProgressBar" | undefined;
101
205
  readonly props?: types.ProgressBarProps | undefined;
102
206
  readonly children?: true | undefined;
103
207
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ProgressBar", types.ProgressBarProps, true>>;
208
+ /**
209
+ * The `Select` component renders a dropdown menu select field where a user can select a single value. A search bar will be automatically included when there are more than seven options. Like other inputs, this component should be used within a `Form` that has a submit button.
210
+ *
211
+ * **Links:**
212
+ *
213
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/select Docs}
214
+ */
104
215
  export declare const Select: "Select" & {
105
216
  readonly type?: "Select" | undefined;
106
217
  readonly props?: types.SelectProps | undefined;
107
218
  readonly children?: true | undefined;
108
219
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Select", types.SelectProps, true>>;
220
+ /**
221
+ * The `Tag` component renders a tag to label or categorize information or other components. Tags can be static or clickable for invoking functions.
222
+ *
223
+ * **Links:**
224
+ *
225
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tag Docs}
226
+ */
109
227
  export declare const Tag: "Tag" & {
110
228
  readonly type?: "Tag" | undefined;
111
229
  readonly props?: types.TagProps | undefined;
112
230
  readonly children?: true | undefined;
113
231
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tag", types.TagProps, true>>;
232
+ /**
233
+ * The `Text` component renders text with formatting options.
234
+ *
235
+ * **Links:**
236
+ *
237
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/text Docs}
238
+ */
114
239
  export declare const Text: "Text" & {
115
240
  readonly type?: "Text" | undefined;
116
241
  readonly props?: types.TextProps | undefined;
117
242
  readonly children?: true | undefined;
118
243
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Text", types.TextProps, true>>;
244
+ /**
245
+ * The `Tile` component renders a square tile that can contain other components. Use this component to create groups of related components.
246
+ *
247
+ * **Links:**
248
+ *
249
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tile Docs}
250
+ */
119
251
  export declare const Tile: "Tile" & {
120
252
  readonly type?: "Tile" | undefined;
121
253
  readonly props?: types.TileProps | undefined;
@@ -127,6 +259,13 @@ export declare const Stack: "Stack" & {
127
259
  readonly props?: types.StackProps | undefined;
128
260
  readonly children?: true | undefined;
129
261
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Stack", types.StackProps, true>>;
262
+ /**
263
+ * The `ToggleGroup` component renders a list of selectable options, either in radio button or checkbox form.
264
+ *
265
+ * **Links:**
266
+ *
267
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/toggle-group Docs}
268
+ */
130
269
  export declare const ToggleGroup: "ToggleGroup" & {
131
270
  readonly type?: "ToggleGroup" | undefined;
132
271
  readonly props?: ({
@@ -148,176 +287,433 @@ export declare const ToggleGroup: "ToggleGroup" & {
148
287
  onChange?: ((value: string) => void) | undefined;
149
288
  value?: string | undefined;
150
289
  } & types.CommonGroupProps), true>>;
290
+ /**
291
+ * The `StatisticsItem` component renders a single data point within a `Statistics` component. Use this component to display a single data point, such as a number or percentage.
292
+ *
293
+ * **Links:**
294
+ *
295
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/statistics Docs}
296
+ */
151
297
  export declare const StatisticsItem: "StatisticsItem" & {
152
298
  readonly type?: "StatisticsItem" | undefined;
153
299
  readonly props?: types.StatisticsItemProps | undefined;
154
300
  readonly children?: true | undefined;
155
301
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StatisticsItem", types.StatisticsItemProps, true>>;
302
+ /**
303
+ * The `Statistics` component renders a visual spotlight of one or more data points. Includes the `StatisticsItem` and `StatisticsTrend` subcomponents.
304
+ *
305
+ * **Links:**
306
+ *
307
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/statistics Docs}
308
+ */
156
309
  export declare const Statistics: "Statistics" & {
157
310
  readonly type?: "Statistics" | undefined;
158
311
  readonly props?: types.StatisticsProps | undefined;
159
312
  readonly children?: true | undefined;
160
313
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Statistics", types.StatisticsProps, true>>;
314
+ /**
315
+ * The `StatisticsTrend` component renders a percentage trend value and direction alonside a `StatisticsItem` component. Use this component within the `StatisticsItem` component.
316
+ *
317
+ * **Links:**
318
+ *
319
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/statistics Docs}
320
+ */
161
321
  export declare const StatisticsTrend: "StatisticsTrend" & {
162
322
  readonly type?: "StatisticsTrend" | undefined;
163
323
  readonly props?: types.StatisticsTrendProps | undefined;
164
324
  readonly children?: true | undefined;
165
325
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StatisticsTrend", types.StatisticsTrendProps, true>>;
326
+ /**
327
+ * The `Table` component renders a table. To format the table, use the subcomponents `TableHead`, `TableRow`, `TableHeader`, `TableBody`, `TableCell`and `TableFooter`.
328
+ *
329
+ * **Links:**
330
+ *
331
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
332
+ */
166
333
  export declare const Table: "Table" & {
167
334
  readonly type?: "Table" | undefined;
168
335
  readonly props?: types.TableProps | undefined;
169
336
  readonly children?: true | undefined;
170
337
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Table", types.TableProps, true>>;
338
+ /**
339
+ * The `TableFooter` component renders a footer within a `Table` component. Use this component to display totals or other summary information.
340
+ *
341
+ * **Links:**
342
+ *
343
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
344
+ */
171
345
  export declare const TableFooter: "TableFooter" & {
172
346
  readonly type?: "TableFooter" | undefined;
173
347
  readonly props?: types.TableElementProps | undefined;
174
348
  readonly children?: true | undefined;
175
349
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableFooter", types.TableElementProps, true>>;
350
+ /**
351
+ * The `TableCell` component renders individual cells within the `TableBody` component.
352
+ *
353
+ * **Links:**
354
+ *
355
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
356
+ */
176
357
  export declare const TableCell: "TableCell" & {
177
358
  readonly type?: "TableCell" | undefined;
178
359
  readonly props?: types.TableCellProps | undefined;
179
360
  readonly children?: true | undefined;
180
361
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableCell", types.TableCellProps, true>>;
362
+ /**
363
+ * The `TableRow` component renders a row within the `TableBody` or `TableHead` component.
364
+ *
365
+ * **Links:**
366
+ *
367
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
368
+ */
181
369
  export declare const TableRow: "TableRow" & {
182
370
  readonly type?: "TableRow" | undefined;
183
371
  readonly props?: types.TableElementProps | undefined;
184
372
  readonly children?: true | undefined;
185
373
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableRow", types.TableElementProps, true>>;
374
+ /**
375
+ * The `TableBody` component renders the body (rows and cells) of a table within the `Table` component.
376
+ *
377
+ * **Links:**
378
+ *
379
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
380
+ */
186
381
  export declare const TableBody: "TableBody" & {
187
382
  readonly type?: "TableBody" | undefined;
188
383
  readonly props?: types.TableElementProps | undefined;
189
384
  readonly children?: true | undefined;
190
385
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableBody", types.TableElementProps, true>>;
386
+ /**
387
+ * The `TableHeader` component renders individual cells containing bolded column labels, within `TableHead`.
388
+ *
389
+ * **Links:**
390
+ *
391
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
392
+ */
191
393
  export declare const TableHeader: "TableHeader" & {
192
394
  readonly type?: "TableHeader" | undefined;
193
395
  readonly props?: types.TableHeaderProps | undefined;
194
396
  readonly children?: true | undefined;
195
397
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableHeader", types.TableHeaderProps, true>>;
398
+ /**
399
+ * The `TableHead` component renders the header section of the `Table` component, containing column labels.
400
+ *
401
+ * **Links:**
402
+ *
403
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
404
+ */
196
405
  export declare const TableHead: "TableHead" & {
197
406
  readonly type?: "TableHead" | undefined;
198
407
  readonly props?: types.TableElementProps | undefined;
199
408
  readonly children?: true | undefined;
200
409
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableHead", types.TableElementProps, true>>;
410
+ /**
411
+ * The `NumberInput` component renders a number input field. Like other inputs, this component should be used within a `Form` that has a submit button.
412
+ *
413
+ * **Links:**
414
+ *
415
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/number-input Docs}
416
+ */
201
417
  export declare const NumberInput: "NumberInput" & {
202
418
  readonly type?: "NumberInput" | undefined;
203
419
  readonly props?: types.NumberInputProps | undefined;
204
420
  readonly children?: true | undefined;
205
421
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"NumberInput", types.NumberInputProps, true>>;
422
+ /**
423
+ * The `Box` component renders an empty div container for fine tuning the spacing of components. Commonly used with the `Flex` component.
424
+ *
425
+ * **Links:**
426
+ *
427
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/box Docs}
428
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/flex-and-box Flex and Box Example}
429
+ */
206
430
  export declare const Box: "Box" & {
207
431
  readonly type?: "Box" | undefined;
208
432
  readonly props?: types.BoxProps | undefined;
209
433
  readonly children?: true | undefined;
210
434
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Box", types.BoxProps, true>>;
435
+ /**
436
+ * The `StepIndicator` component renders an indicator to show the current step of a multi-step process.
437
+ *
438
+ * **Links:**
439
+ *
440
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/step-indicator Docs}
441
+ */
211
442
  export declare const StepIndicator: "StepIndicator" & {
212
443
  readonly type?: "StepIndicator" | undefined;
213
444
  readonly props?: types.StepIndicatorProps | undefined;
214
445
  readonly children?: true | undefined;
215
446
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StepIndicator", types.StepIndicatorProps, true>>;
447
+ /**
448
+ * The `Accordion` component renders an expandable and collapsable section that can contain other components. This component can be helpful for saving space and breaking up extension content.
449
+ *
450
+ * **Links:**
451
+ *
452
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/accordion Docs}
453
+ */
216
454
  export declare const Accordion: "Accordion" & {
217
455
  readonly type?: "Accordion" | undefined;
218
456
  readonly props?: types.AccordionProps | undefined;
219
457
  readonly children?: true | undefined;
220
458
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Accordion", types.AccordionProps, true>>;
459
+ /**
460
+ * The MultiSelect component renders a dropdown menu select field where a user can select multiple values. Commonly used within the `Form` component.
461
+ *
462
+ * **Links:**
463
+ *
464
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/multi-select Docs}
465
+ */
221
466
  export declare const MultiSelect: "MultiSelect" & {
222
467
  readonly type?: "MultiSelect" | undefined;
223
468
  readonly props?: types.MultiSelectProps | undefined;
224
469
  readonly children?: true | undefined;
225
470
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"MultiSelect", types.MultiSelectProps, true>>;
471
+ /**
472
+ * The `Flex` component renders a flex container that can contain other components, and arrange them with props. Use this component to create a flexible and responsive layout.
473
+ *
474
+ * **Links:**
475
+ *
476
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/flex Docs}
477
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/flex-and-box Flex and Box Example}
478
+ */
226
479
  export declare const Flex: "Flex" & {
227
480
  readonly type?: "Flex" | undefined;
228
481
  readonly props?: types.FlexProps | undefined;
229
482
  readonly children?: true | undefined;
230
483
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Flex", types.FlexProps, true>>;
484
+ /**
485
+ * The `DateInput` component renders an input field where a user can select a date. Commonly used within the `Form` component.
486
+ *
487
+ * **Links:**
488
+ *
489
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/date-input Docs}
490
+ */
231
491
  export declare const DateInput: "DateInput" & {
232
492
  readonly type?: "DateInput" | undefined;
233
493
  readonly props?: types.DateInputProps | undefined;
234
494
  readonly children?: true | undefined;
235
495
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"DateInput", types.DateInputProps, true>>;
496
+ /**
497
+ * The `Checkbox` component renders a single checkbox input. Commonly used within the `Form` component. If you want to display multiple checkboxes, you should use `ToggleGroup` instead, as it comes with extra logic for handling multiple checkboxes.
498
+ *
499
+ * **Links:**
500
+ *
501
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/checkbox Docs}
502
+ */
236
503
  export declare const Checkbox: "Checkbox" & {
237
504
  readonly type?: "Checkbox" | undefined;
238
505
  readonly props?: types.CheckboxProps | undefined;
239
506
  readonly children?: true | undefined;
240
507
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Checkbox", types.CheckboxProps, true>>;
508
+ /**
509
+ * The `RadioButton` component renders a single radio input. Commonly used within the `Form` component. If you want to display multiple radio inputs, you should use `ToggleGroup` instead, as it comes with extra logic for handling multiple inputs.
510
+ */
241
511
  export declare const RadioButton: "RadioButton" & {
242
512
  readonly type?: "RadioButton" | undefined;
243
513
  readonly props?: types.RadioButtonProps | undefined;
244
514
  readonly children?: true | undefined;
245
515
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"RadioButton", types.RadioButtonProps, true>>;
516
+ /**
517
+ * The `List` component renders a list of items. Use this component to display a list of items, such as a list of contacts, tasks, or other data. A list can be styled as a bulleted list or a numbered list.
518
+ *
519
+ * **Links:**
520
+ *
521
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/list Docs}
522
+ */
246
523
  export declare const List: "List" & {
247
524
  readonly type?: "List" | undefined;
248
525
  readonly props?: types.ListProps | undefined;
249
526
  readonly children?: true | undefined;
250
527
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"List", types.ListProps, true>>;
528
+ /**
529
+ * The `Toggle` component renders a boolean toggle switch that can be configured with sizing, label position, read-only, and more.
530
+ *
531
+ * **Links:**
532
+ *
533
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/toggle Docs}
534
+ */
251
535
  export declare const Toggle: "Toggle" & {
252
536
  readonly type?: "Toggle" | undefined;
253
537
  readonly props?: types.ToggleProps | undefined;
254
538
  readonly children?: true | undefined;
255
539
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Toggle", types.ToggleProps, true>>;
540
+ /**
541
+ * The `Dropdown` component renders a dropdown menu that can appear as a button or hyperlink. Use this component to enable users to select from multiple options in a compact list.
542
+ *
543
+ * **Links:**
544
+ *
545
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/dropdown Docs}
546
+ */
256
547
  export declare const Dropdown: "Dropdown" & {
257
548
  readonly type?: "Dropdown" | undefined;
258
549
  readonly props?: types.DropdownProps | undefined;
259
550
  readonly children?: true | undefined;
260
551
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Dropdown", types.DropdownProps, true>>;
552
+ /**
553
+ * The Panel component renders a panel overlay on the right side of the page and contains other components.
554
+ *
555
+ * **Links:**
556
+ *
557
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/panel Docs}
558
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
559
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#panel Design Pattern Examples}
560
+ */
261
561
  export declare const Panel: "Panel" & {
262
562
  readonly type?: "Panel" | undefined;
263
563
  readonly props?: types.PanelProps | undefined;
264
564
  readonly children?: true | undefined;
265
565
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Panel", types.PanelProps, true>>;
566
+ /**
567
+ * The `PanelFooter` is a sticky footer component displayed at the bottom of a `Panel` component. Use this component to display actions or other content that should be visible at all times. Include only one `PanelFooter` component per `Panel`.
568
+ *
569
+ * **Links:**
570
+ *
571
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/panel-footer Docs}
572
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
573
+ */
266
574
  export declare const PanelFooter: "PanelFooter" & {
267
575
  readonly type?: "PanelFooter" | undefined;
268
576
  readonly props?: types.PanelFooterProps | undefined;
269
577
  readonly children?: true | undefined;
270
578
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"PanelFooter", types.PanelFooterProps, true>>;
579
+ /**
580
+ * The `PanelBody` component is a container that wraps the panel's content and makes it scrollable. Include only one `PanelBody` component per `Panel`.
581
+ *
582
+ * **Links:**
583
+ *
584
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/panel-footer Docs}
585
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
586
+ */
271
587
  export declare const PanelBody: "PanelBody" & {
272
588
  readonly type?: "PanelBody" | undefined;
273
589
  readonly props?: types.PanelBodyProps | undefined;
274
590
  readonly children?: true | undefined;
275
591
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"PanelBody", types.PanelBodyProps, true>>;
592
+ /**
593
+ * The `PanelSection` component is a container that adds padding and bottom margin to provide spacing between content. Use the `PanelSection` component to separate content within a `PanelBody`.
594
+ *
595
+ * **Links:**
596
+ *
597
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/panel-footer Docs}
598
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
599
+ */
276
600
  export declare const PanelSection: "PanelSection" & {
277
601
  readonly type?: "PanelSection" | undefined;
278
602
  readonly props?: types.PanelSectionProps | undefined;
279
603
  readonly children?: true | undefined;
280
604
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"PanelSection", types.PanelSectionProps, true>>;
605
+ /**
606
+ * The `StepperInput` component renders a number input field that can be increased or decreased by a set number. Commonly used within the `Form` component.
607
+ *
608
+ * **Links:**
609
+ *
610
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/stepper-input Docs}
611
+ */
281
612
  export declare const StepperInput: "StepperInput" & {
282
613
  readonly type?: "StepperInput" | undefined;
283
614
  readonly props?: types.StepperInputProps | undefined;
284
615
  readonly children?: true | undefined;
285
616
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StepperInput", types.StepperInputProps, true>>;
617
+ /**
618
+ * The Modal component renders a pop-up overlay that can contain other components.
619
+ *
620
+ * **Links:**
621
+ *
622
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/modal Docs}
623
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
624
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#modal Design Pattern Examples}
625
+ */
286
626
  export declare const Modal: "Modal" & {
287
627
  readonly type?: "Modal" | undefined;
288
628
  readonly props?: types.ModalProps | undefined;
289
629
  readonly children?: true | undefined;
290
630
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Modal", types.ModalProps, true>>;
631
+ /**
632
+ * The `ModalBody` component contains the main content of the modal. One `ModalBody` is required per `Modal`.
633
+ *
634
+ * **Links:**
635
+ *
636
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/modal Docs}
637
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
638
+ */
291
639
  export declare const ModalBody: "ModalBody" & {
292
640
  readonly type?: "ModalBody" | undefined;
293
641
  readonly props?: types.ModalBodyProps | undefined;
294
642
  readonly children?: true | undefined;
295
643
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ModalBody", types.ModalBodyProps, true>>;
644
+ /**
645
+ * The `ModalFooter` component is an optional component to format the footer section of the modal. Use one `ModalFooter` per `Modal`.
646
+ *
647
+ * **Links:**
648
+ *
649
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/modal Docs}
650
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
651
+ */
296
652
  export declare const ModalFooter: "ModalFooter" & {
297
653
  readonly type?: "ModalFooter" | undefined;
298
654
  readonly props?: types.ModalFooterProps | undefined;
299
655
  readonly children?: true | undefined;
300
656
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ModalFooter", types.ModalFooterProps, true>>;
657
+ /**
658
+ * Use the `Icon` component to render a visual icon within other components. It can generally be used inside most components, excluding ones that don't support child components.
659
+ *
660
+ * **Links:**
661
+ *
662
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/icon Docs}
663
+ */
301
664
  export declare const Icon: "Icon" & {
302
665
  readonly type?: "Icon" | undefined;
303
666
  readonly props?: types.IconProps | undefined;
304
667
  readonly children?: true | undefined;
305
668
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Icon", types.IconProps, true>>;
669
+ /**
670
+ * The `StatusTag` component renders a visual indicator to display the current status of an item. Status tags can be static or clickable.
671
+ *
672
+ * **Links:**
673
+ *
674
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/status-tag Docs}
675
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/status-tag#variants Variants}
676
+ */
306
677
  export declare const StatusTag: "StatusTag" & {
307
678
  readonly type?: "StatusTag" | undefined;
308
679
  readonly props?: types.StatusTagProps | undefined;
309
680
  readonly children?: true | undefined;
310
681
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StatusTag", types.StatusTagProps, true>>;
682
+ /**
683
+ * The `LoadingButton` component renders a button with loading state options.
684
+ *
685
+ * **Links:**
686
+ *
687
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/loading-button Docs}
688
+ */
311
689
  export declare const LoadingButton: "LoadingButton" & {
312
690
  readonly type?: "LoadingButton" | undefined;
313
691
  readonly props?: types.LoadingButtonProps | undefined;
314
692
  readonly children?: true | undefined;
315
693
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"LoadingButton", types.LoadingButtonProps, true>>;
694
+ /**
695
+ * The `BarChart` component renders a bar chart for visualizing data. This type of chart is best suited for comparing categorical data.
696
+ *
697
+ * **Links:**
698
+ *
699
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/bar-chart BarChart Docs}
700
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/charts Charts Docs}
701
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/charts-example Charts Example}
702
+ */
316
703
  export declare const BarChart: "BarChart" & {
317
704
  readonly type?: "BarChart" | undefined;
318
705
  readonly props?: types.ChartProps | undefined;
319
706
  readonly children?: true | undefined;
320
707
  } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"BarChart", types.ChartProps, true>>;
708
+ /**
709
+ * The `LineChart` component renders a line chart for visualizing data. This type of chart is best suited for time series plots or trend data.
710
+ *
711
+ * **Links:**
712
+ *
713
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/line-chart LineChart Docs}
714
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/charts Charts Docs}
715
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/charts-example Charts Example}
716
+ */
321
717
  export declare const LineChart: "LineChart" & {
322
718
  readonly type?: "LineChart" | undefined;
323
719
  readonly props?: types.ChartProps | undefined;