@hubspot/ui-extensions 0.11.0 → 0.11.1

package/dist/__synced__/remoteComponents.synced.js

@@ -1,6 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// Do not manually update this file, changes will be autogenerated by our scripts based on: ui-extensions-remote-renderer/static/js/remoteComponents.tsx
-import { createRemoteReactComponent } from '@remote-ui/react';
+import { createRemoteComponentRegistry } from './utils/remote-component-registry.synced';
+/**
+ * Represents a registry of HubSpot-provided React components that should only be used **internally** by the UI extension SDK.
+ *
+ * @internal
+ */
+export const __hubSpotComponentRegistry = createRemoteComponentRegistry();
+const { createAndRegisterRemoteReactComponent, createAndRegisterRemoteCompoundReactComponent, } = __hubSpotComponentRegistry;
 /**
  * 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.
  *
@@ -9,7 +14,7 @@ import { createRemoteReactComponent } from '@remote-ui/react';
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/alert Docs}
  * - {@link https://app.hubspot.com/docs/48008916/reference/ui-components/standard-components/alert#variants Variants}
  */
-export const Alert = createRemoteReactComponent('Alert');
+export const Alert = createAndRegisterRemoteReactComponent('Alert');
 /**
  * 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.
  *
@@ -19,7 +24,7 @@ export const Alert = createRemoteReactComponent('Alert');
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/button#usage-examples Examples}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#button Design Pattern Examples}
  */
-export const Button = createRemoteReactComponent('Button', {
+export const Button = createAndRegisterRemoteReactComponent('Button', {
     fragmentProps: ['overlay'],
 });
 /**
@@ -29,8 +34,8 @@ export const Button = createRemoteReactComponent('Button', {
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/button-row Docs}
  */
-export const ButtonRow = createRemoteReactComponent('ButtonRow');
-export const Card = createRemoteReactComponent('Card');
+export const ButtonRow = createAndRegisterRemoteReactComponent('ButtonRow');
+export const Card = createAndRegisterRemoteReactComponent('Card');
 /**
  * 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.
  *
@@ -38,7 +43,7 @@ export const Card = createRemoteReactComponent('Card');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/description-list Docs}
  */
-export const DescriptionList = createRemoteReactComponent('DescriptionList');
+export const DescriptionList = createAndRegisterRemoteReactComponent('DescriptionList');
 /**
  * The `DescriptionListItem` component renders a single set of a label and value. Use this component within a `DescriptionList` component.
  *
@@ -46,7 +51,7 @@ export const DescriptionList = createRemoteReactComponent('DescriptionList');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/description-list Docs}
  */
-export const DescriptionListItem = createRemoteReactComponent('DescriptionListItem');
+export const DescriptionListItem = createAndRegisterRemoteReactComponent('DescriptionListItem');
 /**
  * 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.
  *
@@ -54,7 +59,7 @@ export const DescriptionListItem = createRemoteReactComponent('DescriptionListIt
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/divider Docs}
  */
-export const Divider = createRemoteReactComponent('Divider');
+export const Divider = createAndRegisterRemoteReactComponent('Divider');
 /**
  * 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.
  *
@@ -62,7 +67,7 @@ export const Divider = createRemoteReactComponent('Divider');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/empty-state Docs}
  */
-export const EmptyState = createRemoteReactComponent('EmptyState');
+export const EmptyState = createAndRegisterRemoteReactComponent('EmptyState');
 /**
  * The `ErrorState` component sets the content of an erroring extension. Use this component to guide users through resolving errors that your extension might encounter.
  *
@@ -70,7 +75,7 @@ export const EmptyState = createRemoteReactComponent('EmptyState');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/error-state Docs}
  */
-export const ErrorState = createRemoteReactComponent('ErrorState');
+export const ErrorState = createAndRegisterRemoteReactComponent('ErrorState');
 /**
  * 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.
  *
@@ -79,7 +84,7 @@ export const ErrorState = createRemoteReactComponent('ErrorState');
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/form Docs}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#form Design Pattern Examples}
  */
-export const Form = createRemoteReactComponent('Form');
+export const Form = createAndRegisterRemoteReactComponent('Form');
 /**
  * The `Heading` component renders large heading text. Use this component to introduce or differentiate sections of your component.
  *
@@ -87,7 +92,7 @@ export const Form = createRemoteReactComponent('Form');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/heading Docs}
  */
-export const Heading = createRemoteReactComponent('Heading');
+export const Heading = createAndRegisterRemoteReactComponent('Heading');
 /**
  * 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.
  *
@@ -95,7 +100,7 @@ export const Heading = createRemoteReactComponent('Heading');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/image Docs}
  */
-export const Image = createRemoteReactComponent('Image', {
+export const Image = createAndRegisterRemoteReactComponent('Image', {
     fragmentProps: ['overlay'],
 });
 /**
@@ -105,7 +110,7 @@ export const Image = createRemoteReactComponent('Image', {
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/input Docs}
  */
-export const Input = createRemoteReactComponent('Input');
+export const Input = createAndRegisterRemoteReactComponent('Input');
 /**
  * The `Link` component renders a clickable hyperlink. Use links to direct users to an external web page or another part of the HubSpot app.
  *
@@ -113,7 +118,7 @@ export const Input = createRemoteReactComponent('Input');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/link Docs}
  */
-export const Link = createRemoteReactComponent('Link', {
+export const Link = createAndRegisterRemoteReactComponent('Link', {
     fragmentProps: ['overlay'],
 });
 /**
@@ -123,11 +128,11 @@ export const Link = createRemoteReactComponent('Link', {
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/text-area Docs}
  */
-export const TextArea = createRemoteReactComponent('TextArea');
+export const TextArea = createAndRegisterRemoteReactComponent('TextArea');
 // Textarea was changed to TextArea
 // Exporting both for backwards compat
 /** @deprecated use TextArea instead. With a capital A.*/
-export const Textarea = createRemoteReactComponent('Textarea');
+export const Textarea = createAndRegisterRemoteReactComponent('Textarea');
 /**
  * The `LoadingSpinner` component renders a visual indicator for when an extension is loading or processing data.
  *
@@ -135,7 +140,7 @@ export const Textarea = createRemoteReactComponent('Textarea');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/loading-spinner Docs}
  */
-export const LoadingSpinner = createRemoteReactComponent('LoadingSpinner');
+export const LoadingSpinner = createAndRegisterRemoteReactComponent('LoadingSpinner');
 /**
  * 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.
  *
@@ -143,7 +148,7 @@ export const LoadingSpinner = createRemoteReactComponent('LoadingSpinner');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/progress-bar Docs}
  */
-export const ProgressBar = createRemoteReactComponent('ProgressBar');
+export const ProgressBar = createAndRegisterRemoteReactComponent('ProgressBar');
 /**
  * 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.
  *
@@ -151,7 +156,7 @@ export const ProgressBar = createRemoteReactComponent('ProgressBar');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/select Docs}
  */
-export const Select = createRemoteReactComponent('Select');
+export const Select = createAndRegisterRemoteReactComponent('Select');
 /**
  * The `Tag` component renders a tag to label or categorize information or other components. Tags can be static or clickable for invoking functions.
  *
@@ -159,7 +164,7 @@ export const Select = createRemoteReactComponent('Select');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tag Docs}
  */
-export const Tag = createRemoteReactComponent('Tag', {
+export const Tag = createAndRegisterRemoteReactComponent('Tag', {
     fragmentProps: ['overlay'],
 });
 /**
@@ -169,7 +174,7 @@ export const Tag = createRemoteReactComponent('Tag', {
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/text Docs}
  */
-export const Text = createRemoteReactComponent('Text');
+export const Text = createAndRegisterRemoteReactComponent('Text');
 /**
  * The `Tile` component renders a square tile that can contain other components. Use this component to create groups of related components.
  *
@@ -177,9 +182,9 @@ export const Text = createRemoteReactComponent('Text');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tile Docs}
  */
-export const Tile = createRemoteReactComponent('Tile');
+export const Tile = createAndRegisterRemoteReactComponent('Tile');
 /** @deprecated use Flex instead. It will be removed in the next release. */
-export const Stack = createRemoteReactComponent('Stack');
+export const Stack = createAndRegisterRemoteReactComponent('Stack');
 /**
  * The `ToggleGroup` component renders a list of selectable options, either in radio button or checkbox form.
  *
@@ -187,7 +192,7 @@ export const Stack = createRemoteReactComponent('Stack');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/toggle-group Docs}
  */
-export const ToggleGroup = createRemoteReactComponent('ToggleGroup');
+export const ToggleGroup = createAndRegisterRemoteReactComponent('ToggleGroup');
 /**
  * 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.
  *
@@ -195,7 +200,7 @@ export const ToggleGroup = createRemoteReactComponent('ToggleGroup');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/statistics Docs}
  */
-export const StatisticsItem = createRemoteReactComponent('StatisticsItem');
+export const StatisticsItem = createAndRegisterRemoteReactComponent('StatisticsItem');
 /**
  * The `Statistics` component renders a visual spotlight of one or more data points. Includes the `StatisticsItem` and `StatisticsTrend` subcomponents.
  *
@@ -203,7 +208,7 @@ export const StatisticsItem = createRemoteReactComponent('StatisticsItem');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/statistics Docs}
  */
-export const Statistics = createRemoteReactComponent('Statistics');
+export const Statistics = createAndRegisterRemoteReactComponent('Statistics');
 /**
  * The `StatisticsTrend` component renders a percentage trend value and direction alonside a `StatisticsItem` component. Use this component within the `StatisticsItem` component.
  *
@@ -211,7 +216,7 @@ export const Statistics = createRemoteReactComponent('Statistics');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/statistics Docs}
  */
-export const StatisticsTrend = createRemoteReactComponent('StatisticsTrend');
+export const StatisticsTrend = createAndRegisterRemoteReactComponent('StatisticsTrend');
 /**
  * The `Table` component renders a table. To format the table, use the subcomponents `TableHead`, `TableRow`, `TableHeader`, `TableBody`, `TableCell`and `TableFooter`.
  *
@@ -220,7 +225,7 @@ export const StatisticsTrend = createRemoteReactComponent('StatisticsTrend');
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#table Design Pattern Example}
  */
-export const Table = createRemoteReactComponent('Table');
+export const Table = createAndRegisterRemoteReactComponent('Table');
 /**
  * The `TableFooter` component renders a footer within a `Table` component. Use this component to display totals or other summary information.
  *
@@ -228,7 +233,7 @@ export const Table = createRemoteReactComponent('Table');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
  */
-export const TableFooter = createRemoteReactComponent('TableFooter');
+export const TableFooter = createAndRegisterRemoteReactComponent('TableFooter');
 /**
  * The `TableCell` component renders individual cells within the `TableBody` component.
  *
@@ -236,7 +241,7 @@ export const TableFooter = createRemoteReactComponent('TableFooter');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
  */
-export const TableCell = createRemoteReactComponent('TableCell');
+export const TableCell = createAndRegisterRemoteReactComponent('TableCell');
 /**
  * The `TableRow` component renders a row within the `TableBody` or `TableHead` component.
  *
@@ -244,7 +249,7 @@ export const TableCell = createRemoteReactComponent('TableCell');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
  */
-export const TableRow = createRemoteReactComponent('TableRow');
+export const TableRow = createAndRegisterRemoteReactComponent('TableRow');
 /**
  * The `TableBody` component renders the body (rows and cells) of a table within the `Table` component.
  *
@@ -252,7 +257,7 @@ export const TableRow = createRemoteReactComponent('TableRow');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
  */
-export const TableBody = createRemoteReactComponent('TableBody');
+export const TableBody = createAndRegisterRemoteReactComponent('TableBody');
 /**
  * The `TableHeader` component renders individual cells containing bolded column labels, within `TableHead`.
  *
@@ -260,7 +265,7 @@ export const TableBody = createRemoteReactComponent('TableBody');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
  */
-export const TableHeader = createRemoteReactComponent('TableHeader');
+export const TableHeader = createAndRegisterRemoteReactComponent('TableHeader');
 /**
  * The `TableHead` component renders the header section of the `Table` component, containing column labels.
  *
@@ -268,7 +273,7 @@ export const TableHeader = createRemoteReactComponent('TableHeader');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
  */
-export const TableHead = createRemoteReactComponent('TableHead');
+export const TableHead = createAndRegisterRemoteReactComponent('TableHead');
 /**
  * The `NumberInput` component renders a number input field. Like other inputs, this component should be used within a `Form` that has a submit button.
  *
@@ -276,7 +281,7 @@ export const TableHead = createRemoteReactComponent('TableHead');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/number-input Docs}
  */
-export const NumberInput = createRemoteReactComponent('NumberInput');
+export const NumberInput = createAndRegisterRemoteReactComponent('NumberInput');
 /**
  * The `Box` component renders an empty div container for fine tuning the spacing of components. Commonly used with the `Flex` component.
  *
@@ -285,7 +290,7 @@ export const NumberInput = createRemoteReactComponent('NumberInput');
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/box Docs}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/flex-and-box Flex and Box Example}
  */
-export const Box = createRemoteReactComponent('Box');
+export const Box = createAndRegisterRemoteReactComponent('Box');
 /**
  * The `StepIndicator` component renders an indicator to show the current step of a multi-step process.
  *
@@ -293,7 +298,7 @@ export const Box = createRemoteReactComponent('Box');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/step-indicator Docs}
  */
-export const StepIndicator = createRemoteReactComponent('StepIndicator');
+export const StepIndicator = createAndRegisterRemoteReactComponent('StepIndicator');
 /**
  * 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.
  *
@@ -301,7 +306,7 @@ export const StepIndicator = createRemoteReactComponent('StepIndicator');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/accordion Docs}
  */
-export const Accordion = createRemoteReactComponent('Accordion');
+export const Accordion = createAndRegisterRemoteReactComponent('Accordion');
 /**
  * The MultiSelect component renders a dropdown menu select field where a user can select multiple values. Commonly used within the `Form` component.
  *
@@ -309,7 +314,7 @@ export const Accordion = createRemoteReactComponent('Accordion');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/multi-select Docs}
  */
-export const MultiSelect = createRemoteReactComponent('MultiSelect');
+export const MultiSelect = createAndRegisterRemoteReactComponent('MultiSelect');
 /**
  * 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.
  *
@@ -318,7 +323,7 @@ export const MultiSelect = createRemoteReactComponent('MultiSelect');
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/flex Docs}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/flex-and-box Flex and Box Example}
  */
-export const Flex = createRemoteReactComponent('Flex');
+export const Flex = createAndRegisterRemoteReactComponent('Flex');
 /**
  * The `DateInput` component renders an input field where a user can select a date. Commonly used within the `Form` component.
  *
@@ -326,7 +331,7 @@ export const Flex = createRemoteReactComponent('Flex');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/date-input Docs}
  */
-export const DateInput = createRemoteReactComponent('DateInput');
+export const DateInput = createAndRegisterRemoteReactComponent('DateInput');
 /**
  * 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.
  *
@@ -334,11 +339,11 @@ export const DateInput = createRemoteReactComponent('DateInput');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/checkbox Docs}
  */
-export const Checkbox = createRemoteReactComponent('Checkbox');
+export const Checkbox = createAndRegisterRemoteReactComponent('Checkbox');
 /**
  * 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.
  */
-export const RadioButton = createRemoteReactComponent('RadioButton');
+export const RadioButton = createAndRegisterRemoteReactComponent('RadioButton');
 /**
  * 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.
  *
@@ -346,7 +351,7 @@ export const RadioButton = createRemoteReactComponent('RadioButton');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/list Docs}
  */
-export const List = createRemoteReactComponent('List');
+export const List = createAndRegisterRemoteReactComponent('List');
 /**
  * The `Toggle` component renders a boolean toggle switch that can be configured with sizing, label position, read-only, and more.
  *
@@ -354,8 +359,7 @@ export const List = createRemoteReactComponent('List');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/toggle Docs}
  */
-export const Toggle = createRemoteReactComponent('Toggle');
-const DropdownInternal = createRemoteReactComponent('Dropdown');
+export const Toggle = createAndRegisterRemoteReactComponent('Toggle');
 /**
  * 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.
  *
@@ -363,18 +367,19 @@ const DropdownInternal = createRemoteReactComponent('Dropdown');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/dropdown Docs}
  */
-export function Dropdown(props) {
-    return _jsx(DropdownInternal, { ...props });
-}
-/**
- * The `DropdownButtonItem` component represents a single option within a `Dropdown` menu. Use this component as a child of the `Dropdown` component.
- *
- * **Links:**
- *
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/dropdown Docs}
- */
-Dropdown.ButtonItem = createRemoteReactComponent('DropdownButtonItem', {
-    fragmentProps: ['overlay'],
+export const Dropdown = createAndRegisterRemoteCompoundReactComponent('Dropdown', {
+    compoundComponentProperties: {
+        /**
+         * The `Dropdown.ButtonItem` component represents a single option within a `Dropdown` menu. Use this component as a child of the `Dropdown` component.
+         *
+         * **Links:**
+         *
+         * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/dropdown Docs}
+         */
+        ButtonItem: createAndRegisterRemoteReactComponent('DropdownButtonItem', {
+            fragmentProps: ['overlay'],
+        }),
+    },
 });
 /**
  * The Panel component renders a panel overlay on the right side of the page and contains other components.
@@ -385,7 +390,7 @@ Dropdown.ButtonItem = createRemoteReactComponent('DropdownButtonItem', {
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#panel Design Pattern Examples}
  */
-export const Panel = createRemoteReactComponent('Panel');
+export const Panel = createAndRegisterRemoteReactComponent('Panel');
 /**
  * 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`.
  *
@@ -394,7 +399,7 @@ export const Panel = createRemoteReactComponent('Panel');
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/panel-footer Docs}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
  */
-export const PanelFooter = createRemoteReactComponent('PanelFooter');
+export const PanelFooter = createAndRegisterRemoteReactComponent('PanelFooter');
 /**
  * The `PanelBody` component is a container that wraps the panel's content and makes it scrollable. Include only one `PanelBody` component per `Panel`.
  *
@@ -403,7 +408,7 @@ export const PanelFooter = createRemoteReactComponent('PanelFooter');
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/panel-footer Docs}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
  */
-export const PanelBody = createRemoteReactComponent('PanelBody');
+export const PanelBody = createAndRegisterRemoteReactComponent('PanelBody');
 /**
  * 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`.
  *
@@ -412,7 +417,7 @@ export const PanelBody = createRemoteReactComponent('PanelBody');
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/panel-footer Docs}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
  */
-export const PanelSection = createRemoteReactComponent('PanelSection');
+export const PanelSection = createAndRegisterRemoteReactComponent('PanelSection');
 /**
  * The `StepperInput` component renders a number input field that can be increased or decreased by a set number. Commonly used within the `Form` component.
  *
@@ -420,7 +425,7 @@ export const PanelSection = createRemoteReactComponent('PanelSection');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/stepper-input Docs}
  */
-export const StepperInput = createRemoteReactComponent('StepperInput');
+export const StepperInput = createAndRegisterRemoteReactComponent('StepperInput');
 /**
  * The Modal component renders a pop-up overlay that can contain other components.
  *
@@ -430,7 +435,7 @@ export const StepperInput = createRemoteReactComponent('StepperInput');
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#modal Design Pattern Examples}
  */
-export const Modal = createRemoteReactComponent('Modal');
+export const Modal = createAndRegisterRemoteReactComponent('Modal');
 /**
  * The `ModalBody` component contains the main content of the modal. One `ModalBody` is required per `Modal`.
  *
@@ -439,7 +444,7 @@ export const Modal = createRemoteReactComponent('Modal');
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/modal Docs}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
  */
-export const ModalBody = createRemoteReactComponent('ModalBody');
+export const ModalBody = createAndRegisterRemoteReactComponent('ModalBody');
 /**
  * The `ModalFooter` component is an optional component to format the footer section of the modal. Use one `ModalFooter` per `Modal`.
  *
@@ -448,7 +453,7 @@ export const ModalBody = createRemoteReactComponent('ModalBody');
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/modal Docs}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
  */
-export const ModalFooter = createRemoteReactComponent('ModalFooter');
+export const ModalFooter = createAndRegisterRemoteReactComponent('ModalFooter');
 /**
  * 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.
  *
@@ -456,7 +461,7 @@ export const ModalFooter = createRemoteReactComponent('ModalFooter');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/icon Docs}
  */
-export const Icon = createRemoteReactComponent('Icon');
+export const Icon = createAndRegisterRemoteReactComponent('Icon');
 /**
  * The `StatusTag` component renders a visual indicator to display the current status of an item. Status tags can be static or clickable.
  *
@@ -465,7 +470,7 @@ export const Icon = createRemoteReactComponent('Icon');
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/status-tag Docs}
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/status-tag#variants Variants}
  */
-export const StatusTag = createRemoteReactComponent('StatusTag');
+export const StatusTag = createAndRegisterRemoteReactComponent('StatusTag');
 /**
  * The `LoadingButton` component renders a button with loading state options.
  *
@@ -473,7 +478,7 @@ export const StatusTag = createRemoteReactComponent('StatusTag');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/loading-button Docs}
  */
-export const LoadingButton = createRemoteReactComponent('LoadingButton', {
+export const LoadingButton = createAndRegisterRemoteReactComponent('LoadingButton', {
     fragmentProps: ['overlay'],
 });
 /**
@@ -485,7 +490,7 @@ export const LoadingButton = createRemoteReactComponent('LoadingButton', {
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/charts Charts Docs}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/charts-example Charts Example}
  */
-export const BarChart = createRemoteReactComponent('BarChart');
+export const BarChart = createAndRegisterRemoteReactComponent('BarChart');
 /**
  * The `LineChart` component renders a line chart for visualizing data. This type of chart is best suited for time series plots or trend data.
  *
@@ -495,7 +500,7 @@ export const BarChart = createRemoteReactComponent('BarChart');
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/charts Charts Docs}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/charts-example Charts Example}
  */
-export const LineChart = createRemoteReactComponent('LineChart');
+export const LineChart = createAndRegisterRemoteReactComponent('LineChart');
 /**
  * `Tabs` allow you to group related content in a compact space, allowing users to switch between views without leaving the page.
  * @example
@@ -510,7 +515,7 @@ export const LineChart = createRemoteReactComponent('LineChart');
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
  * - {@link https://github.com/hubspotdev/uie-tabbed-product-carousel Tabs Example}
  */
-export const Tabs = createRemoteReactComponent('Tabs');
+export const Tabs = createAndRegisterRemoteReactComponent('Tabs');
 /**
  * Each `Tab` represents a single tab (or "view") within the parent `Tabs` component.
  * @example
@@ -525,7 +530,7 @@ export const Tabs = createRemoteReactComponent('Tabs');
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
  * - {@link https://github.com/hubspotdev/uie-tabbed-product-carousel Tabs Example}
  */
-export const Tab = createRemoteReactComponent('Tab');
+export const Tab = createAndRegisterRemoteReactComponent('Tab');
 /**
  * The `Illustration` component renders an illustration.
  *
@@ -533,14 +538,14 @@ export const Tab = createRemoteReactComponent('Tab');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/illustration Illustration Docs}
  */
-export const Illustration = createRemoteReactComponent('Illustration');
+export const Illustration = createAndRegisterRemoteReactComponent('Illustration');
 /**
  * The `Tooltip` component renders a tooltip for a component.
  *
  * **Links:**
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tooltip Documentation}
  */
-export const Tooltip = createRemoteReactComponent('Tooltip');
+export const Tooltip = createAndRegisterRemoteReactComponent('Tooltip');
 /**
  * The `SearchInput` component renders a search input field.
  *
@@ -548,7 +553,7 @@ export const Tooltip = createRemoteReactComponent('Tooltip');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/search-input SearchInput Docs}
  */
-export const SearchInput = createRemoteReactComponent('SearchInput');
+export const SearchInput = createAndRegisterRemoteReactComponent('SearchInput');
 /**
  * The `TimeInput` component renders an input field where a user can select a time. Commonly used within the `Form` component.
  *
@@ -556,7 +561,7 @@ export const SearchInput = createRemoteReactComponent('SearchInput');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/time-input Docs}
  */
-export const TimeInput = createRemoteReactComponent('TimeInput');
+export const TimeInput = createAndRegisterRemoteReactComponent('TimeInput');
 /**
  * The `CurrencyInput` component renders a currency input field with proper formatting,
  * currency symbols, and locale-specific display patterns. Commonly used within the `Form` component.
@@ -565,14 +570,14 @@ export const TimeInput = createRemoteReactComponent('TimeInput');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/currency-input Docs}
  */
-export const CurrencyInput = createRemoteReactComponent('CurrencyInput');
+export const CurrencyInput = createAndRegisterRemoteReactComponent('CurrencyInput');
 /**
  * The `Inline` component spreads aligns its children horizontally (along the x-axis).
  *
  * **Links:**
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/inline Docs}
- */ export const Inline = createRemoteReactComponent('Inline');
+ */ export const Inline = createAndRegisterRemoteReactComponent('Inline');
 /**
  * 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.
  *
@@ -580,4 +585,4 @@ export const CurrencyInput = createRemoteReactComponent('CurrencyInput');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/simple-grid Docs}
  */
-export const AutoGrid = createRemoteReactComponent('AutoGrid');
+export const AutoGrid = createAndRegisterRemoteReactComponent('AutoGrid');