@hubspot/ui-extensions 0.11.0 → 0.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/__synced__/remoteComponents.synced.d.ts +85 -354
  2. package/dist/__synced__/remoteComponents.synced.js +88 -83
  3. package/dist/__synced__/types/components/index.synced.d.ts +38 -38
  4. package/dist/__synced__/types/index.synced.d.ts +7 -7
  5. package/dist/__synced__/types/index.synced.js +1 -9
  6. package/dist/__synced__/types/shared.synced.d.ts +2 -3
  7. package/dist/__synced__/utils/remote-component-registry.synced.d.ts +80 -0
  8. package/dist/__synced__/utils/remote-component-registry.synced.js +64 -0
  9. package/dist/experimental/testing/internal/constants.d.ts +2 -0
  10. package/dist/experimental/testing/internal/constants.js +1 -0
  11. package/dist/experimental/testing/internal/debug.d.ts +8 -0
  12. package/dist/experimental/testing/internal/debug.js +10 -0
  13. package/dist/experimental/testing/internal/element.d.ts +11 -0
  14. package/dist/experimental/testing/internal/element.js +67 -0
  15. package/dist/experimental/testing/internal/errors.d.ts +44 -0
  16. package/dist/experimental/testing/internal/errors.js +52 -0
  17. package/dist/experimental/testing/internal/fragment.d.ts +8 -0
  18. package/dist/experimental/testing/internal/fragment.js +44 -0
  19. package/dist/experimental/testing/internal/print.d.ts +6 -0
  20. package/dist/experimental/testing/internal/print.js +114 -0
  21. package/dist/experimental/testing/internal/query.d.ts +57 -0
  22. package/dist/experimental/testing/internal/query.js +231 -0
  23. package/dist/experimental/testing/internal/root.d.ts +8 -0
  24. package/dist/experimental/testing/internal/root.js +44 -0
  25. package/dist/experimental/testing/internal/text.d.ts +9 -0
  26. package/dist/experimental/testing/internal/text.js +16 -0
  27. package/dist/experimental/testing/types.d.ts +1 -1
  28. package/dist/hubspot.d.ts +1 -1
  29. package/dist/index.d.ts +2 -2
  30. package/dist/index.js +2 -2
  31. package/dist/pages/home/index.d.ts +1 -1
  32. package/dist/pages/home/index.js +1 -1
  33. package/package.json +10 -5
  34. package/dist/coreComponents.d.ts +0 -848
  35. package/dist/coreComponents.js +0 -582
  36. package/dist/experimental/types.d.ts +0 -240
  37. package/dist/experimental/types.js +0 -5
  38. package/dist/types.d.ts +0 -3214
  39. package/dist/types.js +0 -244
@@ -1,582 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { createRemoteReactComponent } from '@remote-ui/react';
3
- /**
4
- * 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.
5
- *
6
- * **Links:**
7
- *
8
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/alert Docs}
9
- * - {@link https://app.hubspot.com/docs/48008916/reference/ui-components/standard-components/alert#variants Variants}
10
- */
11
- export const Alert = createRemoteReactComponent('Alert');
12
- /**
13
- * The `Button` component renders a single button. Use this component to enable users to perform actions, such as submitting a form, sending data to an external system, or deleting data.
14
- *
15
- * **Links:**
16
- *
17
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/button Docs}
18
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/button#usage-examples Examples}
19
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#button Design Pattern Examples}
20
- */
21
- export const Button = createRemoteReactComponent('Button', {
22
- fragmentProps: ['overlay'],
23
- });
24
- /**
25
- * The `ButtonRow` component renders a row of specified `Button` components. Use this component when you want to include multiple buttons in a row.
26
- *
27
- * **Links:**
28
- *
29
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/button-row Docs}
30
- */
31
- export const ButtonRow = createRemoteReactComponent('ButtonRow');
32
- export const Card = createRemoteReactComponent('Card');
33
- /**
34
- * 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.
35
- *
36
- * **Links:**
37
- *
38
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/description-list Docs}
39
- */
40
- export const DescriptionList = createRemoteReactComponent('DescriptionList');
41
- /**
42
- * The `DescriptionListItem` component renders a single set of a label and value. Use this component within a `DescriptionList` component.
43
- *
44
- * **Links:**
45
- *
46
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/description-list Docs}
47
- */
48
- export const DescriptionListItem = createRemoteReactComponent('DescriptionListItem');
49
- /**
50
- * 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.
51
- *
52
- * **Links:**
53
- *
54
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/divider Docs}
55
- */
56
- export const Divider = createRemoteReactComponent('Divider');
57
- /**
58
- * 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.
59
- *
60
- * **Links:**
61
- *
62
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/empty-state Docs}
63
- */
64
- export const EmptyState = createRemoteReactComponent('EmptyState');
65
- /**
66
- * The `ErrorState` component sets the content of an erroring extension. Use this component to guide users through resolving errors that your extension might encounter.
67
- *
68
- * **Links:**
69
- *
70
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/error-state Docs}
71
- */
72
- export const ErrorState = createRemoteReactComponent('ErrorState');
73
- /**
74
- * 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.
75
- *
76
- * **Links:**
77
- *
78
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/form Docs}
79
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#form Design Pattern Examples}
80
- */
81
- export const Form = createRemoteReactComponent('Form');
82
- /**
83
- * The `Heading` component renders large heading text. Use this component to introduce or differentiate sections of your component.
84
- *
85
- * **Links:**
86
- *
87
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/heading Docs}
88
- */
89
- export const Heading = createRemoteReactComponent('Heading');
90
- /**
91
- * 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.
92
- *
93
- * **Links:**
94
- *
95
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/image Docs}
96
- */
97
- export const Image = createRemoteReactComponent('Image', {
98
- fragmentProps: ['overlay'],
99
- });
100
- /**
101
- * 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.
102
- *
103
- * **Links:**
104
- *
105
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/input Docs}
106
- */
107
- export const Input = createRemoteReactComponent('Input');
108
- /**
109
- * The `Link` component renders a clickable hyperlink. Use links to direct users to an external web page or another part of the HubSpot app.
110
- *
111
- * **Links:**
112
- *
113
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/link Docs}
114
- */
115
- export const Link = createRemoteReactComponent('Link', {
116
- fragmentProps: ['overlay'],
117
- });
118
- /**
119
- * The `TextArea` component renders a fillable text field. Like other inputs, this component should be used within a `Form` that has a submit button.
120
- *
121
- * **Links:**
122
- *
123
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/text-area Docs}
124
- */
125
- export const TextArea = createRemoteReactComponent('TextArea');
126
- // Textarea was changed to TextArea
127
- // Exporting both for backwards compat
128
- /** @deprecated use TextArea instead. With a capital A.*/
129
- export const Textarea = createRemoteReactComponent('Textarea');
130
- /**
131
- * The `LoadingSpinner` component renders a visual indicator for when an extension is loading or processing data.
132
- *
133
- * **Links:**
134
- *
135
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/loading-spinner Docs}
136
- */
137
- export const LoadingSpinner = createRemoteReactComponent('LoadingSpinner');
138
- /**
139
- * 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.
140
- *
141
- * **Links:**
142
- *
143
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/progress-bar Docs}
144
- */
145
- export const ProgressBar = createRemoteReactComponent('ProgressBar');
146
- /**
147
- * 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.
148
- *
149
- * **Links:**
150
- *
151
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/select Docs}
152
- */
153
- export const Select = createRemoteReactComponent('Select');
154
- /**
155
- * The `Tag` component renders a tag to label or categorize information or other components. Tags can be static or clickable for invoking functions.
156
- *
157
- * **Links:**
158
- *
159
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tag Docs}
160
- */
161
- export const Tag = createRemoteReactComponent('Tag', {
162
- fragmentProps: ['overlay'],
163
- });
164
- /**
165
- * The `Text` component renders text with formatting options.
166
- *
167
- * **Links:**
168
- *
169
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/text Docs}
170
- */
171
- export const Text = createRemoteReactComponent('Text');
172
- /**
173
- * The `Tile` component renders a square tile that can contain other components. Use this component to create groups of related components.
174
- *
175
- * **Links:**
176
- *
177
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tile Docs}
178
- */
179
- export const Tile = createRemoteReactComponent('Tile');
180
- /** @deprecated use Flex instead. It will be removed in the next release. */
181
- export const Stack = createRemoteReactComponent('Stack');
182
- /**
183
- * The `ToggleGroup` component renders a list of selectable options, either in radio button or checkbox form.
184
- *
185
- * **Links:**
186
- *
187
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/toggle-group Docs}
188
- */
189
- export const ToggleGroup = createRemoteReactComponent('ToggleGroup');
190
- /**
191
- * 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.
192
- *
193
- * **Links:**
194
- *
195
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/statistics Docs}
196
- */
197
- export const StatisticsItem = createRemoteReactComponent('StatisticsItem');
198
- /**
199
- * The `Statistics` component renders a visual spotlight of one or more data points. Includes the `StatisticsItem` and `StatisticsTrend` subcomponents.
200
- *
201
- * **Links:**
202
- *
203
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/statistics Docs}
204
- */
205
- export const Statistics = createRemoteReactComponent('Statistics');
206
- /**
207
- * The `StatisticsTrend` component renders a percentage trend value and direction alonside a `StatisticsItem` component. Use this component within the `StatisticsItem` component.
208
- *
209
- * **Links:**
210
- *
211
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/statistics Docs}
212
- */
213
- export const StatisticsTrend = createRemoteReactComponent('StatisticsTrend');
214
- /**
215
- * The `Table` component renders a table. To format the table, use the subcomponents `TableHead`, `TableRow`, `TableHeader`, `TableBody`, `TableCell`and `TableFooter`.
216
- *
217
- * **Links:**
218
- *
219
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
220
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#table Design Pattern Example}
221
- */
222
- export const Table = createRemoteReactComponent('Table');
223
- /**
224
- * The `TableFooter` component renders a footer within a `Table` component. Use this component to display totals or other summary information.
225
- *
226
- * **Links:**
227
- *
228
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
229
- */
230
- export const TableFooter = createRemoteReactComponent('TableFooter');
231
- /**
232
- * The `TableCell` component renders individual cells within the `TableBody` component.
233
- *
234
- * **Links:**
235
- *
236
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
237
- */
238
- export const TableCell = createRemoteReactComponent('TableCell');
239
- /**
240
- * The `TableRow` component renders a row within the `TableBody` or `TableHead` component.
241
- *
242
- * **Links:**
243
- *
244
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
245
- */
246
- export const TableRow = createRemoteReactComponent('TableRow');
247
- /**
248
- * The `TableBody` component renders the body (rows and cells) of a table within the `Table` component.
249
- *
250
- * **Links:**
251
- *
252
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
253
- */
254
- export const TableBody = createRemoteReactComponent('TableBody');
255
- /**
256
- * The `TableHeader` component renders individual cells containing bolded column labels, within `TableHead`.
257
- *
258
- * **Links:**
259
- *
260
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
261
- */
262
- export const TableHeader = createRemoteReactComponent('TableHeader');
263
- /**
264
- * The `TableHead` component renders the header section of the `Table` component, containing column labels.
265
- *
266
- * **Links:**
267
- *
268
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
269
- */
270
- export const TableHead = createRemoteReactComponent('TableHead');
271
- /**
272
- * The `NumberInput` component renders a number input field. Like other inputs, this component should be used within a `Form` that has a submit button.
273
- *
274
- * **Links:**
275
- *
276
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/number-input Docs}
277
- */
278
- export const NumberInput = createRemoteReactComponent('NumberInput');
279
- /**
280
- * The `Box` component renders an empty div container for fine tuning the spacing of components. Commonly used with the `Flex` component.
281
- *
282
- * **Links:**
283
- *
284
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/box Docs}
285
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/flex-and-box Flex and Box Example}
286
- */
287
- export const Box = createRemoteReactComponent('Box');
288
- /**
289
- * The `StepIndicator` component renders an indicator to show the current step of a multi-step process.
290
- *
291
- * **Links:**
292
- *
293
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/step-indicator Docs}
294
- */
295
- export const StepIndicator = createRemoteReactComponent('StepIndicator');
296
- /**
297
- * 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.
298
- *
299
- * **Links:**
300
- *
301
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/accordion Docs}
302
- */
303
- export const Accordion = createRemoteReactComponent('Accordion');
304
- /**
305
- * The MultiSelect component renders a dropdown menu select field where a user can select multiple values. Commonly used within the `Form` component.
306
- *
307
- * **Links:**
308
- *
309
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/multi-select Docs}
310
- */
311
- export const MultiSelect = createRemoteReactComponent('MultiSelect');
312
- /**
313
- * 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.
314
- *
315
- * **Links:**
316
- *
317
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/flex Docs}
318
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/flex-and-box Flex and Box Example}
319
- */
320
- export const Flex = createRemoteReactComponent('Flex');
321
- /**
322
- * The `DateInput` component renders an input field where a user can select a date. Commonly used within the `Form` component.
323
- *
324
- * **Links:**
325
- *
326
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/date-input Docs}
327
- */
328
- export const DateInput = createRemoteReactComponent('DateInput');
329
- /**
330
- * 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.
331
- *
332
- * **Links:**
333
- *
334
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/checkbox Docs}
335
- */
336
- export const Checkbox = createRemoteReactComponent('Checkbox');
337
- /**
338
- * 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.
339
- */
340
- export const RadioButton = createRemoteReactComponent('RadioButton');
341
- /**
342
- * 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.
343
- *
344
- * **Links:**
345
- *
346
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/list Docs}
347
- */
348
- export const List = createRemoteReactComponent('List');
349
- /**
350
- * The `Toggle` component renders a boolean toggle switch that can be configured with sizing, label position, read-only, and more.
351
- *
352
- * **Links:**
353
- *
354
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/toggle Docs}
355
- */
356
- export const Toggle = createRemoteReactComponent('Toggle');
357
- const DropdownInternal = createRemoteReactComponent('Dropdown');
358
- /**
359
- * 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.
360
- *
361
- * **Links:**
362
- *
363
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/dropdown Docs}
364
- */
365
- export function Dropdown(props) {
366
- return _jsx(DropdownInternal, { ...props });
367
- }
368
- /**
369
- * The `DropdownButtonItem` component represents a single option within a `Dropdown` menu. Use this component as a child of the `Dropdown` component.
370
- *
371
- * **Links:**
372
- *
373
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/dropdown Docs}
374
- */
375
- Dropdown.ButtonItem = createRemoteReactComponent('DropdownButtonItem', {
376
- fragmentProps: ['overlay'],
377
- });
378
- /**
379
- * The Panel component renders a panel overlay on the right side of the page and contains other components.
380
- *
381
- * **Links:**
382
- *
383
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/panel Docs}
384
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
385
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#panel Design Pattern Examples}
386
- */
387
- export const Panel = createRemoteReactComponent('Panel');
388
- /**
389
- * 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`.
390
- *
391
- * **Links:**
392
- *
393
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/panel-footer Docs}
394
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
395
- */
396
- export const PanelFooter = createRemoteReactComponent('PanelFooter');
397
- /**
398
- * The `PanelBody` component is a container that wraps the panel's content and makes it scrollable. Include only one `PanelBody` component per `Panel`.
399
- *
400
- * **Links:**
401
- *
402
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/panel-footer Docs}
403
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
404
- */
405
- export const PanelBody = createRemoteReactComponent('PanelBody');
406
- /**
407
- * 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`.
408
- *
409
- * **Links:**
410
- *
411
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/panel-footer Docs}
412
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
413
- */
414
- export const PanelSection = createRemoteReactComponent('PanelSection');
415
- /**
416
- * The `StepperInput` component renders a number input field that can be increased or decreased by a set number. Commonly used within the `Form` component.
417
- *
418
- * **Links:**
419
- *
420
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/stepper-input Docs}
421
- */
422
- export const StepperInput = createRemoteReactComponent('StepperInput');
423
- /**
424
- * The Modal component renders a pop-up overlay that can contain other components.
425
- *
426
- * **Links:**
427
- *
428
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/modal Docs}
429
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
430
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#modal Design Pattern Examples}
431
- */
432
- export const Modal = createRemoteReactComponent('Modal');
433
- /**
434
- * The `ModalBody` component contains the main content of the modal. One `ModalBody` is required per `Modal`.
435
- *
436
- * **Links:**
437
- *
438
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/modal Docs}
439
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
440
- */
441
- export const ModalBody = createRemoteReactComponent('ModalBody');
442
- /**
443
- * The `ModalFooter` component is an optional component to format the footer section of the modal. Use one `ModalFooter` per `Modal`.
444
- *
445
- * **Links:**
446
- *
447
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/modal Docs}
448
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
449
- */
450
- export const ModalFooter = createRemoteReactComponent('ModalFooter');
451
- /**
452
- * 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.
453
- *
454
- * **Links:**
455
- *
456
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/icon Docs}
457
- */
458
- export const Icon = createRemoteReactComponent('Icon');
459
- /**
460
- * The `StatusTag` component renders a visual indicator to display the current status of an item. Status tags can be static or clickable.
461
- *
462
- * **Links:**
463
- *
464
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/status-tag Docs}
465
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/status-tag#variants Variants}
466
- */
467
- export const StatusTag = createRemoteReactComponent('StatusTag');
468
- /**
469
- * The `LoadingButton` component renders a button with loading state options.
470
- *
471
- * **Links:**
472
- *
473
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/loading-button Docs}
474
- */
475
- export const LoadingButton = createRemoteReactComponent('LoadingButton', {
476
- fragmentProps: ['overlay'],
477
- });
478
- /**
479
- * The `BarChart` component renders a bar chart for visualizing data. This type of chart is best suited for comparing categorical data.
480
- *
481
- * **Links:**
482
- *
483
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/bar-chart BarChart Docs}
484
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/charts Charts Docs}
485
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/charts-example Charts Example}
486
- */
487
- export const BarChart = createRemoteReactComponent('BarChart');
488
- /**
489
- * The `LineChart` component renders a line chart for visualizing data. This type of chart is best suited for time series plots or trend data.
490
- *
491
- * **Links:**
492
- *
493
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/line-chart LineChart Docs}
494
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/charts Charts Docs}
495
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/charts-example Charts Example}
496
- */
497
- export const LineChart = createRemoteReactComponent('LineChart');
498
- /**
499
- * `Tabs` allow you to group related content in a compact space, allowing users to switch between views without leaving the page.
500
- * @example
501
- * ```tsx
502
- * <Tabs defaultSelected="1">
503
- * <Tab tabId="1">First tab content</Tab>
504
- * <Tab tabId="2">Second tab content</Tab>
505
- * </Tabs>
506
- * ```
507
- *
508
- * **Links:**
509
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
510
- * - {@link https://github.com/hubspotdev/uie-tabbed-product-carousel Tabs Example}
511
- */
512
- export const Tabs = createRemoteReactComponent('Tabs');
513
- /**
514
- * Each `Tab` represents a single tab (or "view") within the parent `Tabs` component.
515
- * @example
516
- * ```tsx
517
- * <Tabs defaultSelected="1">
518
- * <Tab tabId="1">First tab content</Tab>
519
- * <Tab tabId="2">Second tab content</Tab>
520
- * </Tabs>
521
- * ```
522
- *
523
- * **Links:**
524
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
525
- * - {@link https://github.com/hubspotdev/uie-tabbed-product-carousel Tabs Example}
526
- */
527
- export const Tab = createRemoteReactComponent('Tab');
528
- /**
529
- * The `Illustration` component renders an illustration.
530
- *
531
- * **Links:**
532
- *
533
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/illustration Illustration Docs}
534
- */
535
- export const Illustration = createRemoteReactComponent('Illustration');
536
- /**
537
- * The `Tooltip` component renders a tooltip for a component.
538
- *
539
- * **Links:**
540
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tooltip Documentation}
541
- */
542
- export const Tooltip = createRemoteReactComponent('Tooltip');
543
- /**
544
- * The `SearchInput` component renders a search input field.
545
- *
546
- * **Links:**
547
- *
548
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/search-input SearchInput Docs}
549
- */
550
- export const SearchInput = createRemoteReactComponent('SearchInput');
551
- /**
552
- * The `TimeInput` component renders an input field where a user can select a time. Commonly used within the `Form` component.
553
- *
554
- * **Links:**
555
- *
556
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/time-input Docs}
557
- */
558
- export const TimeInput = createRemoteReactComponent('TimeInput');
559
- /**
560
- * The `CurrencyInput` component renders a currency input field with proper formatting,
561
- * currency symbols, and locale-specific display patterns. Commonly used within the `Form` component.
562
- *
563
- * **Links:**
564
- *
565
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/currency-input Docs}
566
- */
567
- export const CurrencyInput = createRemoteReactComponent('CurrencyInput');
568
- /**
569
- * The `Inline` component spreads aligns its children horizontally (along the x-axis).
570
- *
571
- * **Links:**
572
- *
573
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/inline Docs}
574
- */ export const Inline = createRemoteReactComponent('Inline');
575
- /**
576
- * The `AutoGrid` component renders a responsive grid layout that automatically adjusts the number of columns based on available space. Use this component to create flexible grid layouts for cards, tiles, or other content.
577
- *
578
- * **Links:**
579
- *
580
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/simple-grid Docs}
581
- */
582
- export const AutoGrid = createRemoteReactComponent('AutoGrid');