@hubspot/ui-extensions 0.8.38 → 0.8.40

package/dist/coreComponents.js

@@ -1,6 +1,11 @@
 import { createRemoteReactComponent } from '@remote-ui/react';
 /**
- * @link https://developers.hubspot.com/beta-docs/reference/ui-components/standard-components/alert
+ * 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.
+ *
+ * **Links:**
+ *
+ * - {@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');
 /**
@@ -8,78 +13,466 @@ export const Alert = createRemoteReactComponent('Alert');
  *
  * **Links:**
  *
- * - {@link https://developers.hubspot.com/beta-docs/reference/ui-components/standard-components/button Docs}
- * - {@link https://developers.hubspot.com/beta-docs/reference/ui-components/standard-components/button#usage-examples Examples}
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/button Docs}
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/button#usage-examples Examples}
  */
 export const Button = createRemoteReactComponent('Button', {
     fragmentProps: ['overlay'],
 });
+/**
+ * The `ButtonRow` component renders a row of specified `Button` components. Use this component when you want to include multiple buttons in a row.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/button-row Docs}
+ */
 export const ButtonRow = createRemoteReactComponent('ButtonRow');
 export const Card = createRemoteReactComponent('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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/description-list Docs}
+ */
 export const DescriptionList = createRemoteReactComponent('DescriptionList');
+/**
+ * The `DescriptionListItem` component renders a single set of a label and value. Use this component within a `DescriptionList` component.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/description-list Docs}
+ */
 export const DescriptionListItem = createRemoteReactComponent('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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/divider Docs}
+ */
 export const Divider = createRemoteReactComponent('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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/empty-state Docs}
+ */
 export const EmptyState = createRemoteReactComponent('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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/error-state Docs}
+ */
 export const ErrorState = createRemoteReactComponent('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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/form Docs}
+ */
 export const Form = createRemoteReactComponent('Form');
+/**
+ * The `Heading` component renders large heading text. Use this component to introduce or differentiate sections of your component.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/heading Docs}
+ */
 export const Heading = createRemoteReactComponent('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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/image Docs}
+ */
 export const Image = createRemoteReactComponent('Image', {
     fragmentProps: ['overlay'],
 });
+/**
+ * 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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/input Docs}
+ */
 export const Input = createRemoteReactComponent('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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/link Docs}
+ */
 export const Link = createRemoteReactComponent('Link', {
     fragmentProps: ['overlay'],
 });
+/**
+ * The `TextArea` component renders a fillable text field. Like other inputs, this component should be used within a `Form` that has a submit button.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/text-area Docs}
+ */
 export const TextArea = createRemoteReactComponent('TextArea');
 // Textarea was changed to TextArea
 // Exporting both for backwards compat
 /** @deprecated use TextArea instead. With a capital A.*/
 export const Textarea = createRemoteReactComponent('Textarea');
+/**
+ * The `LoadingSpinner` component renders a visual indicator for when an extension is loading or processing data.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/loading-spinner Docs}
+ */
 export const LoadingSpinner = createRemoteReactComponent('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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/progress-bar Docs}
+ */
 export const ProgressBar = createRemoteReactComponent('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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/select Docs}
+ */
 export const Select = createRemoteReactComponent('Select');
+/**
+ * The `Tag` component renders a tag to label or categorize information or other components. Tags can be static or clickable for invoking functions.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tag Docs}
+ */
 export const Tag = createRemoteReactComponent('Tag', {
     fragmentProps: ['overlay'],
 });
+/**
+ * The `Text` component renders text with formatting options.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/text Docs}
+ */
 export const Text = createRemoteReactComponent('Text');
+/**
+ * The `Tile` component renders a square tile that can contain other components. Use this component to create groups of related components.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tile Docs}
+ */
 export const Tile = createRemoteReactComponent('Tile');
 /** @deprecated use Flex instead. It will be removed in the next release. */
 export const Stack = createRemoteReactComponent('Stack');
+/**
+ * The `ToggleGroup` component renders a list of selectable options, either in radio button or checkbox form.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/toggle-group Docs}
+ */
 export const ToggleGroup = createRemoteReactComponent('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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/statistics Docs}
+ */
 export const StatisticsItem = createRemoteReactComponent('StatisticsItem');
+/**
+ * The `Statistics` component renders a visual spotlight of one or more data points. Includes the `StatisticsItem` and `StatisticsTrend` subcomponents.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/statistics Docs}
+ */
 export const Statistics = createRemoteReactComponent('Statistics');
+/**
+ * The `StatisticsTrend` component renders a percentage trend value and direction alonside a `StatisticsItem` component. Use this component within the `StatisticsItem` component.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/statistics Docs}
+ */
 export const StatisticsTrend = createRemoteReactComponent('StatisticsTrend');
+/**
+ * The `Table` component renders a table. To format the table, use the subcomponents `TableHead`, `TableRow`, `TableHeader`, `TableBody`, `TableCell`and `TableFooter`.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
+ */
 export const Table = createRemoteReactComponent('Table');
+/**
+ * The `TableFooter` component renders a footer within a `Table` component. Use this component to display totals or other summary information.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
+ */
 export const TableFooter = createRemoteReactComponent('TableFooter');
+/**
+ * The `TableCell` component renders individual cells within the `TableBody` component.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
+ */
 export const TableCell = createRemoteReactComponent('TableCell');
+/**
+ * The `TableRow` component renders a row within the `TableBody` or `TableHead` component.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
+ */
 export const TableRow = createRemoteReactComponent('TableRow');
+/**
+ * The `TableBody` component renders the body (rows and cells) of a table within the `Table` component.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
+ */
 export const TableBody = createRemoteReactComponent('TableBody');
+/**
+ * The `TableHeader` component renders individual cells containing bolded column labels, within `TableHead`.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
+ */
 export const TableHeader = createRemoteReactComponent('TableHeader');
+/**
+ * The `TableHead` component renders the header section of the `Table` component, containing column labels.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
+ */
 export const TableHead = createRemoteReactComponent('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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/number-input Docs}
+ */
 export const NumberInput = createRemoteReactComponent('NumberInput');
+/**
+ * The `Box` component renders an empty div container for fine tuning the spacing of components. Commonly used with the `Flex` component.
+ *
+ * **Links:**
+ *
+ * - {@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');
+/**
+ * The `StepIndicator` component renders an indicator to show the current step of a multi-step process.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/step-indicator Docs}
+ */
 export const StepIndicator = createRemoteReactComponent('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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/accordion Docs}
+ */
 export const Accordion = createRemoteReactComponent('Accordion');
+/**
+ * The MultiSelect component renders a dropdown menu select field where a user can select multiple values. Commonly used within the `Form` component.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/multi-select Docs}
+ */
 export const MultiSelect = createRemoteReactComponent('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.
+ *
+ * **Links:**
+ *
+ * - {@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');
+/**
+ * The `DateInput` component renders an input field where a user can select a date. Commonly used within the `Form` component.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/date-input Docs}
+ */
 export const DateInput = createRemoteReactComponent('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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/checkbox Docs}
+ */
 export const Checkbox = createRemoteReactComponent('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');
+/**
+ * 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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/list Docs}
+ */
 export const List = createRemoteReactComponent('List');
+/**
+ * The `Toggle` component renders a boolean toggle switch that can be configured with sizing, label position, read-only, and more.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/toggle Docs}
+ */
 export const Toggle = createRemoteReactComponent('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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/dropdown Docs}
+ */
 export const Dropdown = createRemoteReactComponent('Dropdown');
+/**
+ * The Panel component renders a panel overlay on the right side of the page and contains other components.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/panel Docs}
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
+ */
 export const Panel = createRemoteReactComponent('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`.
+ *
+ * **Links:**
+ *
+ * - {@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');
+/**
+ * The `PanelBody` component is a container that wraps the panel's content and makes it scrollable. Include only one `PanelBody` component per `Panel`.
+ *
+ * **Links:**
+ *
+ * - {@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');
+/**
+ * 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`.
+ *
+ * **Links:**
+ *
+ * - {@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');
+/**
+ * The `StepperInput` component renders a number input field that can be increased or decreased by a set number. Commonly used within the `Form` component.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/stepper-input Docs}
+ */
 export const StepperInput = createRemoteReactComponent('StepperInput');
+/**
+ * The Modal component renders a pop-up overlay that can contain other components.
+ *
+ * **Links:**
+ *
+ * - {@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 Modal = createRemoteReactComponent('Modal');
+/**
+ * The `ModalBody` component contains the main content of the modal. One `ModalBody` is required per `Modal`.
+ *
+ * **Links:**
+ *
+ * - {@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');
+/**
+ * The `ModalFooter` component is an optional component to format the footer section of the modal. Use one `ModalFooter` per `Modal`.
+ *
+ * **Links:**
+ *
+ * - {@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');
+/**
+ * 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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/icon Docs}
+ */
 export const Icon = createRemoteReactComponent('Icon');
+/**
+ * The `StatusTag` component renders a visual indicator to display the current status of an item. Status tags can be static or clickable.
+ *
+ * **Links:**
+ *
+ * - {@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');
+/**
+ * The `LoadingButton` component renders a button with loading state options.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/loading-button Docs}
+ */
 export const LoadingButton = createRemoteReactComponent('LoadingButton', {
     fragmentProps: ['overlay'],
 });
+/**
+ * The `BarChart` component renders a bar chart for visualizing data. This type of chart is best suited for comparing categorical data.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/bar-chart BarChart Docs}
+ * - {@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');
+/**
+ * The `LineChart` component renders a line chart for visualizing data. This type of chart is best suited for time series plots or trend data.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/line-chart LineChart Docs}
+ * - {@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');

package/dist/experimental/index.d.ts

@@ -1,4 +1,5 @@
 import type * as types from '../types';
+import type * as experimentalTypes from './types';
 /** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
 declare const Iframe: "Iframe" & {
     readonly type?: "Iframe" | undefined;
@@ -8,7 +9,25 @@ declare const Iframe: "Iframe" & {
 /** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
 declare const MediaObject: "MediaObject" & {
     readonly type?: "MediaObject" | undefined;
-    readonly props?: types.MediaObjectProps | undefined;
+    readonly props?: experimentalTypes.MediaObjectProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"MediaObject", types.MediaObjectProps, true>>;
-export { Iframe, MediaObject };
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"MediaObject", experimentalTypes.MediaObjectProps, true>>;
+/** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
+declare const Inline: "Inline" & {
+    readonly type?: "Inline" | undefined;
+    readonly props?: experimentalTypes.InlineProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Inline", experimentalTypes.InlineProps, true>>;
+/** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
+declare const Stack2: "Stack2" & {
+    readonly type?: "Stack2" | undefined;
+    readonly props?: experimentalTypes.Stack2Props | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Stack2", experimentalTypes.Stack2Props, true>>;
+/** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
+declare const Center: "Center" & {
+    readonly type?: "Center" | undefined;
+    readonly props?: experimentalTypes.CenterProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Center", experimentalTypes.CenterProps, true>>;
+export { Iframe, MediaObject, Inline, Stack2, Center };

package/dist/experimental/index.js

@@ -5,4 +5,10 @@ const Iframe = createRemoteReactComponent('Iframe');
 const MediaObject = createRemoteReactComponent('MediaObject', {
     fragmentProps: ['itemRight', 'itemLeft'],
 });
-export { Iframe, MediaObject };
+/** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
+const Inline = createRemoteReactComponent('Inline');
+/** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
+const Stack2 = createRemoteReactComponent('Stack2');
+/** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
+const Center = createRemoteReactComponent('Center');
+export { Iframe, MediaObject, Inline, Stack2, Center };

package/dist/experimental/testing/index.d.ts

@@ -0,0 +1,14 @@
+import { type RootNode, type Node } from '@remote-ui/testing';
+import type { ReactNode } from 'react';
+type CoreComponentName = keyof typeof import('../../coreComponents');
+type CrmComponentName = keyof typeof import('../../crm');
+interface HubSpotRoot extends RootNode<unknown> {
+    findByName: (name: CoreComponentName | CrmComponentName) => ReturnType<Node<unknown>['find']>;
+}
+interface RenderReturn {
+    extension: HubSpotRoot;
+    flushAsync: () => Promise<void>;
+}
+/** @experimental This function is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
+export declare function render(ui: ReactNode): RenderReturn;
+export {};

package/dist/experimental/testing/index.js

@@ -0,0 +1,33 @@
+import { createRoot } from '@remote-ui/react';
+import { mount } from '@remote-ui/testing';
+/** @experimental This function is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
+export function render(ui) {
+    const mountedExtension = mount((coreRemoteRoot) => {
+        // create the react appliction to render remote react component
+        createRoot(coreRemoteRoot).render(ui);
+    });
+    function findByName(name) {
+        return mountedExtension.find(name);
+    }
+    // @ts-expect-error ts doesn't know the type of object that we are forwarding to
+    const extension = new Proxy({ findByName }, //target object
+    {
+        // traps and modifies calls to target object
+        get(target, key, receiver) {
+            // if target object has the key, invoke.
+            if (Reflect.ownKeys(target).includes(key)) {
+                return Reflect.get(target, key, receiver);
+            }
+            // if our target object doesn't have the key, pass to the extension
+            return Reflect.get(mountedExtension, key);
+        },
+    });
+    function flushAsync() {
+        // the promise with the setTimeout is what flushes the promise stack
+        return new Promise((resolve) => setTimeout(resolve, 0)).then(() => {
+            // the act call on the extension forces the UI to update
+            mountedExtension.act(() => null);
+        });
+    }
+    return { extension, flushAsync };
+}

package/dist/experimental/testing/jest/matchers/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Direct re-export of shopify matchers. This is a great way
+ * to enable internal testing but I don't think it's how we should ship to
+ * customers because error messages make reference to shopify internals.
+ */
+export * from '@remote-ui/testing/matchers';

package/dist/experimental/testing/jest/matchers/index.js

@@ -0,0 +1,6 @@
+/**
+ * Direct re-export of shopify matchers. This is a great way
+ * to enable internal testing but I don't think it's how we should ship to
+ * customers because error messages make reference to shopify internals.
+ */
+export * from '@remote-ui/testing/matchers';

package/dist/experimental/types.d.ts

@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react';
+import type { RemoteFragment } from '@remote-ui/core';
+import type { AllDistances } from '../types';
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
+interface BaseLayout {
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+}
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
+export type FlexJustify = 'center' | 'end' | 'start' | 'around' | 'between';
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
+export type FlexAlign = 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
+export interface InlineProps extends BaseLayout {
+    justify?: FlexJustify;
+    align?: FlexAlign;
+    gap?: AllDistances;
+    children?: ReactNode;
+}
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
+export interface Stack2Props extends BaseLayout {
+    align?: FlexAlign;
+    gap?: AllDistances;
+    children?: ReactNode;
+}
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
+export interface CenterProps extends BaseLayout {
+    maxContentSize?: number | string;
+    gutter?: AllDistances;
+    children?: ReactNode;
+}
+/**
+ * @ignore
+ * @experimental
+ */
+export interface MediaObjectProps {
+    align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+    spacing?: 'none' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
+    children?: ReactNode;
+    itemLeft?: RemoteFragment;
+    itemRight?: RemoteFragment;
+}
+export {};

package/dist/experimental/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import './clientTypes';
 export { hubspot } from './hubspot';
 export { logger } from './logger';
 export * from './coreComponents';