@hubspot/ui-extensions 0.7.2 → 0.8.0

package/dist/types.d.ts

@@ -1,183 +1,802 @@
 import { ReactNode, ComponentType } from 'react';
+/**
+ * The props type for {@link !components.Alert}.
+ *
+ * @category Component Props
+ */
 export interface AlertProps {
+    /**
+     * The bolded title text of the alert.
+     *
+     */
     title: string;
+    /**
+     * The main content of the alert message.
+     *
+     */
     children?: ReactNode;
+    /**
+     * The color of the alert.
+     *
+     * @defaultValue `"info"`
+     */
     variant?: 'info' | 'warning' | 'success' | 'error' | 'danger';
 }
+/**
+ * The props type for {@link !components.Button}.
+ *
+ * @category Component Props
+ */
 export interface ButtonProps {
+    /**
+     * A function that will be invoked when the button is clicked. It receives no arguments and its return value is ignored.
+     *
+     * @event
+     */
     onClick?: () => void;
+    /**
+     * A URL that will be opened when the button is clicked. If the value is a URL external to `hubspot.com` it will be opened in a new tab.
+     */
     href?: string;
+    /**
+     * Determines whether or not the button should be disabled.
+     */
     disabled?: boolean;
+    /**
+     * Sets the color variation of the button.
+     *
+     * @defaultValue `"secondary"`
+     */
     variant?: 'primary' | 'secondary' | 'destructive';
+    /**
+     * Sets the HTML attribute "role" of the button.
+     *
+     * @defaultValue `"button"`
+     */
     type?: 'button' | 'reset' | 'submit';
+    /**
+     * The displayable text for the Button.
+     */
     children: ReactNode;
 }
+/**
+ * The props type for {@link !components.ButtonRow}.
+ *
+ * @category Component Props
+ */
 export interface ButtonRowProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     */
     children: ReactNode;
+    /**
+     * Disables the dropdown list of buttons that appears when the children expand beyond the horizontal space.
+     *
+     * @defaultValue `false`
+     */
     disableDropdown?: boolean;
 }
+/**
+ * The props type for {@link !components.Card}.
+ *
+ * @category Component Props
+ */
 export interface CardProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     */
     children: ReactNode;
 }
+/**
+ * The props type for {@link !components.DescriptionListItem}.
+ *
+ * @category Component Props
+ */
 export interface DescriptionListItemProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     *
+     */
     children: ReactNode;
+    /**
+     * Text to be displayed as the label.
+     *
+     */
     label: string;
 }
+/**
+ * The props type for {@link !components.DescriptionList}.
+ *
+ * @category Component Props
+ */
 export interface DescriptionListProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. The children should be {@link !components.DescriptionListItem}.
+     *
+     */
     children: ReactNode;
+    /**
+     * The direction the label/value pairs are placed in the description list container.
+     *
+     * @defaultValue `"column"`
+     */
     direction?: 'row' | 'column';
 }
+/**
+ * The props type for {@link !components.Divider}.
+ *
+ * @category Component Props
+ */
 export interface DividerProps {
+    /**
+     * The space between the divider and the content above and below it.
+     *
+     * @defaultValue `"small"`
+     */
     distance?: AllDistances;
 }
+/**
+ * The props type for {@link !components.EmptyState}.
+ *
+ * @category Component Props
+ */
 export interface EmptyStateProps {
+    /**
+     * When set to `true`, removes the default vertical margins in the component.
+     *
+     * @defaultValue `false`
+     */
     flush?: boolean;
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     *
+     */
     children: ReactNode;
+    /**
+     * The text for the title header.
+     *
+     * @defaultValue `"All is not lost."`
+     *
+     */
     title?: string;
+    /**
+     * Sets the layout direction for the content. Can be either `horizontal` or `vertical`.
+     *
+     * @defaultValue `"horizontal"`
+     */
     layout?: 'horizontal' | 'vertical';
+    /**
+     * When set to `true`, swaps the visual order of the text (primary) and image (secondary) content. This ensures the primary content is still presented first to assistive technology.
+     *
+     * @defaultValue `false`
+     */
     reverseOrder?: boolean;
+    /**
+     * The max-width(in pixels) for the image container.
+     *
+     * @defaultValue `250`
+     */
     imageWidth?: number;
 }
+/**
+ * The props type for {@link !components.ErrorState}.
+ *
+ * @category Component Props
+ */
 export interface ErrorStateProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     *
+     */
     children: ReactNode;
+    /**
+     * The text of the title header.
+     *
+     */
     title?: string;
+    /**
+     * The type of error image that will be shown.
+     *
+     * @defaultValue `"error"`
+     */
     type?: 'error' | 'support' | 'lock';
 }
 export type FormInputValues = Record<string, string | number>;
+/**
+ * The props type for {@link !components.Form}.
+ *
+ * @category Component Props
+ */
 export interface FormProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     *
+     */
     children: ReactNode;
+    /**
+     * The function that is called when the form is submitted. It will receive a RemoteEvent as an argument and its return value will be ignored.
+     *
+     * @event
+     */
     onSubmit?: (event: RemoteEvent<FormInputValues>) => void;
+    /**
+     * When set to `true`, `event.preventDefault()` will be invoked before the `onSubmit` function is called, preventing the default HTML form behavior.
+     *
+     * @defaultValue `false`
+     */
     preventDefault?: boolean;
 }
+/**
+ * The props type for {@link !components.Heading}.
+ *
+ * @category Component Props
+ */
 export interface HeadingProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     *
+     */
     children: ReactNode;
+    /**
+     * When set to true, text will not line break.
+     *
+     * @defaultValue `false`
+     */
     inline?: boolean;
 }
+/**
+ * The props type for {@link !components.Image}.
+ *
+ * @category Component Props
+ */
 export interface ImageProps {
+    /**
+     * The alt text for the image.
+     *
+     */
     alt?: string;
+    /**
+     * If provided, will be used as the href that will be opened in a new browser tab on click.
+     *
+     */
     href?: string;
+    /**
+     * A function that will be called when the image is clicked. This function will receive no arguments and any returned values will be ignored.
+     *
+     * @event
+     */
     onClick?: () => void;
+    /**
+     * The URL of the image to display.
+     *
+     */
     src: string;
+    /**
+     * The pixel width of the image.
+     *
+     */
     width?: number;
+    /**
+     * The pixel height of the image.
+     *
+     */
     height?: number;
 }
+/**
+ * Generic collection of props for all inputs
+ * @internal
+ * */
 interface BaseInputProps<T = string, V = string> {
+    /**
+     * The label text to display for the form input element.
+     */
     label: string;
+    /**
+     * The unique identifier for the input element, this could be thought of as the HTML5 [Input element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name).
+     */
     name: string;
+    /**
+     * The value of the input.
+     */
     value?: T;
+    /**
+     * Determines if the required indicator should be displayed.
+     *
+     * @defaultValue `false`
+     */
     required?: boolean;
+    /**
+     * Determines if the field is editable or not.
+     *
+     * @defaultValue `false`
+     */
     readOnly?: boolean;
+    /**
+     * Instructional message to display to the user to help understand the purpose of the input.
+     */
     description?: string;
+    /**
+     * Text that will appear in a tooltip next to the input label.
+     */
     tooltip?: string;
+    /**
+     * Text that appears in the input when it has no value set.
+     */
     placeholder?: string;
+    /**
+     * If set to `true`, `validationMessage` is displayed as an error message, if it was provided. The input will also render its error state to let the user know there is an error. If set to `false`, `validationMessage` is displayed as a success message.
+     *
+     * @defaultValue `false`
+     */
     error?: boolean;
+    /**
+     * The value of the input on the first render.
+     */
     defaultValue?: T;
+    /**
+     * The text to show under the input for error or success validations.
+     */
     validationMessage?: string;
+    /**
+     * A callback function that is invoked when the value is committed. Currently these times are `onBlur` of the input and when the user submits the form.
+     *
+     * @event
+     */
     onChange?: (value: V) => void;
+    /**
+     * A function that is called and passed the value every time the field is edited by the user. It is recommended that you do not use this value to update state, that is what `onChange` should be used for. Instead this should be used for validation.
+     *
+     * @event
+     */
     onInput?: (value: V) => void;
+    /**
+     * A function that is called and passed the value every time the field loses focus.
+     *
+     * @event
+     */
     onBlur?: (value: V) => void;
+    /**
+     * A function that is called and passed the value every time the field gets focused.
+     *
+     * @event
+     */
     onFocus?: (value: V) => void;
 }
+/**
+ * The props type for {@link !components.Input}.
+ *
+ * @interface
+ * @category Component Props
+ */
 export type InputProps = BaseInputProps;
+/**
+ * The props type for {@link !components.TextArea}.
+ *
+ * @category Component Props
+ */
 export interface TextAreaProps extends BaseInputProps {
+    /**
+     * The visible width of the text field in average character widths.
+     */
     cols?: number;
+    /**
+     * The maximum number of characters (UTF-16 code units) that the user can enter. If not specified, the max length is unlimited.
+     */
     maxLength?: number;
+    /**
+     * The number of visible text lines for the text field.
+     */
     rows?: number;
+    /**
+     * Sets whether the element is resizable, and if so in which directions.
+     *
+     * @defaultValue `"both"`
+     */
     resize?: 'vertical' | 'horizontal' | 'both' | 'none';
 }
+/**
+ * Textarea was changed to TextArea. Exporting both for backwards compat
+ *
+ * @ignore
+ * @internal
+ * */
 export type TextareaProps = TextAreaProps;
-export interface NumberInputProps extends Omit<BaseInputProps<number, number>, 'onInput'> {
+/**
+ * @internal
+ * @ignore
+ * */
+type BaseInputForNumber = Omit<BaseInputProps<number, number>, 'onInput'>;
+/**
+ * The props type for {@link !components.NumberInput}.
+ *
+ * @category Component Props
+ */
+export interface NumberInputProps extends BaseInputForNumber {
+    /**
+     * Sets the lower bound of the input.
+     *
+     */
     min?: number;
+    /**
+     * Sets the upper bound of the input.
+     *
+     */
     max?: number;
+    /**
+     * Sets the number of digits to the right of the decimal point.
+     *
+     */
     precision?: number;
+    /**
+     * Formats the input as a decimal point (decimal) or percentage (percentage).
+     *
+     * @defaultValue `"decimal"`
+     */
     formatStyle?: 'decimal' | 'percentage';
     /** @deprecated use onChange instead. It doesn't guarantee valid format */
     onInput?: (value: number) => void;
 }
+/** Object that represents dates. */
 export interface BaseDate {
+    /** the four-digit year (e.g., 2023). */
     year: number;
+    /** starting at 0, the number of the month (e.g., 0 = January, 11 = December). */
     month: number;
+    /** the number of the day (e.g., 1 = the first day of the month).*/
     date: number;
 }
+/** The values used to invoke events on the DateInput component */
 export interface DateInputEventsPayload extends BaseDate {
+    /** Selected date with formatting option applied. (e.g., 09/04/1986). */
     formattedDate?: string;
 }
-export interface DateInputProps extends Omit<BaseInputProps<BaseDate | null, DateInputEventsPayload>, 'onInput' | 'placeholder'> {
+/**
+ * @internal
+ * @ignore
+ * */
+type BaseDateInputForDate = Omit<BaseInputProps<BaseDate | null, DateInputEventsPayload>, 'onInput' | 'placeholder'>;
+/**
+ * The props type for {@link !components.DateInput}.
+ *
+ * @category Component Props
+ */
+export interface DateInputProps extends BaseDateInputForDate {
+    /**
+     * Sets the earliest date that will be valid.
+     */
     min?: BaseDate;
+    /**
+     * Sets the latest date that will be valid.
+     */
     max?: BaseDate;
+    /**
+     * Sets the message that users will see when they hover over dates before the min date.
+     *
+     * @defaultValue `"You must choose a newer date"`
+     */
     minValidationMessage?: string;
+    /**
+     * Sets the message that users will see when the hover over dates after the max date.
+     *
+     * @defaultValue `"You must choose an older date"`
+     */
     maxValidationMessage?: string;
+    /**
+     * Sets the date format that input will display to users.
+     *
+     * @defaultValue `short`
+     *
+     * #### Format Options
+     *
+     * - short: `09/04/1986`
+     * - long: `September 4, 1986`
+     * - medium : `Sep 4, 1986`
+     * - standard: `1986-09-04`
+     * - L: `09/04/1986`
+     * - LL: `September 4, 1986`
+     * - ll : `Sep 4, 1986`
+     * - YYYY-MM-DD: `1986-09-04`
+     */
     format?: 'YYYY-MM-DD' | 'L' | 'LL' | 'll' | 'short' | 'long' | 'medium' | 'standard';
+    /**
+     * Sets the timezone that the component will user to calculate valid dates.
+     *
+     * @defaultValue `"userTz"`
+     */
     timezone?: 'userTz' | 'portalTz';
+    /**
+     * Sets the label of the clear button.
+     *
+     * @defaultValue `"Clear"`
+     */
     clearButtonLabel?: string;
+    /**
+     * Sets the label of the today button.
+     *
+     * @defaultValue `"Today"`
+     */
     todayButtonLabel?: string;
 }
+/**
+ * The props type for {@link !components.ProgressBar}.
+ *
+ * @category Component Props
+ */
 export interface ProgressBarProps {
+    /**
+     * The text that displays above the progress bar.
+     *
+     */
     title?: string;
+    /**
+     * Accessibility label.
+     *
+     */
     'aria-label'?: string;
+    /**
+     * Whether the progress bar displays the completion percentage.
+     *
+     * @defaultValue `false`
+     */
     showPercentage?: boolean;
+    /**
+     * The number representing the progress so far.
+     *
+     * @defaultValue `0`
+     */
     value?: number;
-    /** @deprecated use maxValue instead */
-    valueMax?: number;
+    /**
+     * The maximum value of the progress bar.
+     *
+     * @defaultValue `100`
+     */
     maxValue?: number;
+    /**
+     * The text that explains the current state of the value property. For example, "150 out of 250". Displays above the progress bar on the right side.
+     *
+     */
     valueDescription?: string;
+    /**
+     * The color that indicates the type of progress bar.
+     *
+     * @defaultValue `"success"`
+     */
     variant?: 'success' | 'danger' | 'warning';
+    /** @deprecated use maxValue instead */
+    valueMax?: number;
 }
+/**
+ * Generic collection of props for select components
+ * @internal
+ * */
 export interface BaseSelectProps {
+    /**
+     * The text that displays above to the dropdown menu.
+     *
+     */
     label?: string;
+    /**
+     * The unique identifier for the select element.
+     *
+     */
     name?: string;
+    /**
+     * When set to `true`, displays a required field indicator.
+     *
+     * @defaultValue `false`
+     */
     required?: boolean;
+    /**
+     * When set to `true`, sets the field as read-only on the CRM record, and users will not be able to fill the input field.
+     *
+     * @defaultValue `false`
+     */
     readOnly?: boolean;
+    /**
+     * Displayed text that describes the field's purpose.
+     *
+     */
     description?: string;
+    /**
+     * The text that displays in a tooltip next to the label.
+     *
+     */
     tooltip?: string;
+    /**
+     * Text that appears in the input when no value is set.
+     *
+     */
     placeholder?: string;
+    /**
+     * When set to `true`, `validationMessage` is displayed as an error message if provided.
+     * The input will also render its error state to let the user know there's an error.
+     * If left `false` (default), `validationMessage` is displayed as a success message.
+     *
+     * @defaultValue `false`
+     */
     error?: boolean;
+    /**
+     * The text to show if the input has an error.
+     *
+     */
     validationMessage?: string;
+    /**
+     * The options to display in the dropdown menu.
+     */
     options: {
+        /** Will be used as the display text. **/
         label: string;
+        /** Should be the option's unique identifier, which is submitted with the form. **/
         value: string | number;
     }[];
+    /**
+     * The variant type for the select.
+     *
+     * @defaultValue `"input"`
+     */
     variant?: 'transparent' | 'input';
 }
+/**
+ * The props type for {@link !components.Select}.
+ *
+ * @category Component Props
+ */
 export interface SelectProps extends BaseSelectProps {
+    /**
+     * The value of the select input.
+     *
+     */
     value?: string | number;
+    /**
+     * A callback function that is invoked when the value is committed.
+     *
+     * @event
+     */
     onChange?: (value: NonNullable<SelectProps['value']>) => void;
+    /**
+     * The variant type for the select.
+     *
+     * @defaultValue `"input"`
+     */
     variant?: 'transparent' | 'input';
 }
+/**
+ * The props type for {@link !components.MultiSelect}.
+ *
+ * @category Component Props
+ */
 export interface MultiSelectProps extends BaseSelectProps {
+    /**
+     * The value of the select input.
+     *
+     */
     value?: (string | number)[];
+    /**
+     * A callback function that is invoked when the value is committed.
+     *
+     * @event
+     */
     onChange?: (value: NonNullable<MultiSelectProps['value']>) => void;
 }
+/**
+ * The props type for {@link !components.Tag}.
+ *
+ * @category Component Props
+ */
 export interface TagProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     */
     children: ReactNode;
-    onClick?: () => void;
+    /**
+     * The tag's color. The following variants are available.
+     *
+     * @defaultValue `"default"`
+     */
     variant?: 'default' | 'warning' | 'success' | 'error';
+    /**
+     * A function that will be invoked when the tag is clicked. It receives no argument and its return value is ignored.
+     *
+     * @event
+     */
+    onClick?: () => void;
 }
+/**
+ * @internal
+ * Format options for text component.
+ */
 export interface TextFormatOptions {
+    /**
+     * Weight of the font.
+     *
+     * @defaultValue `"regular"`
+     */
     fontWeight?: 'regular' | 'bold' | 'demibold';
+    /**
+     * If `true`, font will be in italicized.
+     *
+     * @defaultValue `false`
+     */
     italic?: boolean;
+    /**
+     * Line decoration of the font.
+     *
+     * @defaultValue `"none"`
+     */
     lineDecoration?: 'none' | 'underline' | 'strikethrough';
 }
+/**
+ * The props type for {@link !components.Text}.
+ *
+ * @interface
+ * @category Component Props
+ */
 export type TextProps = {
+    /**
+     * The style of text to display. Can be either of:
+     *
+     * - bodytext: the default value which renders the standard text size.
+     * - microcopy: smaller text used for adding context.
+     *
+     * @defaultValue `"bodytext"`
+     */
     variant?: 'bodytext' | 'microcopy';
+    /**
+     * When set to `true`, inserts a line break.
+     *
+     * @defaultValue `false`
+     */
     inline?: boolean;
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     */
     children: ReactNode;
+    /**
+     * @interface
+     * The style of text to display. Can be any of:
+     *
+     * - { fontWeight: 'bold' }
+     * - { fontWeight: 'demibold' }
+     * - { italic: true }
+     * - { lineDecoration: 'strikethrough' }
+     * - { lineDecoration: 'underline' }
+     * - <Text inline={true}>
+     */
     format?: TextFormatOptions;
 };
+/**
+ * The props type for {@link !components.Tile}.
+ *
+ * @category Component Props
+ */
 export interface TileProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     */
     children: ReactNode;
+    /**
+     * When set to `true`, removes left and right padding from tile contents.
+     *
+     * @defaultValue `false`
+     */
     flush?: boolean;
 }
+/** @ignore */
 interface Team {
     id: number;
     name: string;
     teammates: number[];
 }
 export type ToggleGroupOption = {
+    /** The text that displays in the dropdown menu. */
     label: string;
+    /** The unique value that is submitted with the form. */
     value: string;
+    /** When set to `true`, the option will be selected by default. */
     initialIsChecked?: boolean;
+    /** When set to `true`, the option cannot be selected. */
     readonly?: boolean;
+    /** The string that displays below the toggle. */
     description?: string;
 };
 interface ToggleGroupListBaseProps {
@@ -195,26 +814,96 @@ export interface RadioButtonListProps extends ToggleGroupListBaseProps {
     onChange?: RadioButtonGroupProps['onChange'];
 }
 interface CheckboxGroupProps {
+    /**
+     * Denotes the type of list to render.
+     *
+     * @defaultValue `"checkboxList"`
+     */
     toggleType: 'checkboxList';
+    /**
+     * A function that is called with the new value or values when the list is updated.
+     *
+     * @event
+     */
     onChange?: (value: this['value']) => void;
+    /**
+     * The value of the toggle group.
+     */
     value?: string[];
 }
 interface RadioButtonGroupProps {
+    /**
+     * Denotes the type of list to render.
+     *
+     * @defaultValue `"checkboxList"`
+     */
     toggleType: 'radioButtonList';
+    /**
+     * A function that is called with the new value or values when the list is updated.
+     *
+     * @event
+     */
     onChange?: (value: this['value']) => void;
+    /**
+     * The value of the toggle group.
+     */
     value?: string;
 }
+/**
+ * The props type for {@link !components.ToggleGroup}.
+ *
+ * @interface
+ * @category Component Props
+ */
 export type ToggleGroupProps = {
+    /**
+     * The unique identifier for the toggle group element.
+     */
     name: string;
+    /**
+     * The label that displays above the toggle group.
+     */
     label: string;
+    /**
+     * The text to display if the input has an error.
+     */
     validationMessage?: string;
+    /**
+     * When set to `true`, displays a required indicator next to the toggle group.
+     *
+     * @defaultValue `false`
+     */
     required?: boolean;
+    /**
+     * Text that will appear in a tooltip next to the toggle group label.
+     */
     tooltip?: string;
+    /**
+     * When set to `true`, `validationMessage` is displayed as an error message if provided. The input will also render its error state to let the user know there is an error. If left false, `validationMessage` is displayed as a success message.
+     *
+     * @defaultValue `false`
+     */
     error?: boolean;
+    /**
+     * An array of options to display in the dropdown menu.
+     *
+     * @defaultValue `[]`
+     */
     options: Array<ToggleGroupOption>;
+    /**
+     * When set to `true`, stacks the options horizontally.
+     *
+     * @defaultValue `false`
+     */
     inline?: boolean;
+    /**
+     * The size variation of the individual options.
+     *
+     * @defaultValue `"default"`
+     */
     variant?: 'default' | 'small';
 } & (CheckboxGroupProps | RadioButtonGroupProps);
+/** @ignore */
 export interface UserContext {
     id: number;
     emails: string[];
@@ -225,10 +914,12 @@ export interface UserContext {
     teams: Team[];
     locale?: string;
 }
+/** @ignore */
 export interface PortalContext {
     id: number;
     timezone: string;
 }
+/** @ignore */
 export interface Context {
     user: UserContext;
     portal: PortalContext;
@@ -241,28 +932,107 @@ export interface StackProps {
     align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
     width?: 'auto' | '100%';
 }
+/**
+ * The props type for {@link !components.Flex}.
+ *
+ * @category Component Props
+ */
 export interface FlexProps {
+    /**
+     * Sets the spacing between components.
+     *
+     * @defaultValue `"flush"`
+     */
     gap?: AllDistances;
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     *
+     */
     children?: ReactNode;
+    /**
+     * Arranges components `horizontally` or `vertically` by setting the main axis.
+     *
+     * @defaultValue `"row"`
+     */
     direction?: 'row' | 'column';
+    /**
+     * Distributes components along the main axis using the available free space.
+     *
+     * @defaultValue `"start"`
+     */
     justify?: 'center' | 'end' | 'start' | 'around' | 'between';
+    /**
+     * Distributes components along the cross-axis using the available free space.
+     *
+     * @defaultValue `"stretch"`
+     */
     align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+    /**
+     * Distributes a child component along the cross-axis using the available free space. Use this prop for nested child Flex and Box components to align them differently from other child components in the Flex.
+     *
+     */
     alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+    /**
+     * Whether components will wrap instead of trying to fit on one line.
+     *
+     * @defaultValue `"nowrap"`
+     */
     wrap?: boolean | 'wrap' | 'nowrap';
 }
+/**
+ * The props type for {@link !components.StatisticsTrend}.
+ *
+ * @category Component Props
+ */
 export interface StatisticsTrendProps {
+    /**
+     * The text to be displayed as the trend value.
+     */
     value: string;
+    /**
+     * The direction of the trend arrow.
+     *
+     * @defaultValue `"increase"`
+     */
     direction: 'increase' | 'decrease';
 }
+/**
+ * The props type for {@link !components.StatisticsItem}.
+ *
+ * @category Component Props
+ */
 export interface StatisticsItemProps {
+    /**
+     * The unique identifier.
+     */
     id?: string;
+    /**
+     * The item's label text.
+     */
     label: string;
+    /**
+     * The string to be displayed as the item's primary number.
+     */
     number: string;
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. The children should be {@link !components.StatisticsTrend} or {@link !components.Text}.
+     */
     children: ReactNode;
 }
+/**
+ * The props type for {@link !components.Statistics}.
+ *
+ * @category Component Props
+ */
 export interface StatisticsProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. The children should be {@link !components.StatisticsItem}.
+     */
     children: ReactNode;
 }
+/**
+ * @category Serverless
+ */
 export interface ServerlessRunnerParams {
     /**
      * Name of the serverless function
@@ -282,10 +1052,16 @@ export interface ServerlessRunnerParams {
      */
     payload?: JsonValue;
 }
+/**
+ * @category Serverless
+ */
 export declare enum ServerlessExecutionStatus {
     Success = "SUCCESS",
     Error = "ERROR"
 }
+/**
+ * @category Serverless
+ */
 export type ServerlessExecutionResult = {
     status: ServerlessExecutionStatus.Success;
     response: JsonValue;
@@ -293,7 +1069,14 @@ export type ServerlessExecutionResult = {
     status: ServerlessExecutionStatus.Error;
     message: string;
 };
+/**
+ * @category Serverless
+ */
 export type ServerlessFuncRunner = (params: ServerlessRunnerParams) => Promise<ServerlessExecutionResult>;
+/**
+ *  @ignore
+ *  @category Serverless
+ */
 export interface ServerlessExecutionRequest {
     appId: number;
     extensibleCardId: number;
@@ -312,10 +1095,16 @@ export interface ServerlessExecutionRequest {
     objectId?: number;
     objectTypeId?: string;
 }
+/**
+ * @category Serverless
+ */
 export interface ServerlessExecutionResponse {
     logId: string;
     response?: JsonValue;
 }
+/**
+ * @category Serverless
+ */
 export interface ServerlessErrorResponse {
     responseJSON?: {
         message: string;
@@ -329,6 +1118,7 @@ export interface ServerlessErrorResponse {
     };
     status: number;
 }
+/** @ignore */
 export interface ExtensionCardContextData {
     cardId: string;
     cardTitle?: string;
@@ -338,21 +1128,29 @@ export interface ExtensionCardContextData {
     objectTypeId: string;
     location: keyof ExtensionPoints;
 }
+/** @ignore */
 export type ExtensionPointAction = (...args: any[]) => Promise<any> | void;
+/** @ignore */
 export interface ExtensionPointContract {
     actions?: {
         [k: string]: ExtensionPointAction;
     } | {};
     customComponents: Record<string, ComponentType<any>>;
 }
+/** @ignore */
 type AlertType = 'info' | 'warning' | 'success' | 'danger' | 'tip' | undefined;
+/** @ignore */
 export type AddAlertAction = (args: {
     type?: AlertType;
     message: string;
 }) => void;
+/** @ignore */
 export type ReloadPageAction = () => void;
+/** @ignore */
 export type FetchCrmObjectPropertiesAction = (properties: string[]) => Promise<Record<string, string>>;
+/** @ignore */
 export type OpenIframeModalAction = (action: OpenIframeActionPayload) => void;
+/** @ignore */
 export interface CrmMiddleExtensionPoint extends ExtensionPointContract {
     actions: {
         addAlert: AddAlertAction;
@@ -369,31 +1167,52 @@ export interface CrmMiddleExtensionPoint extends ExtensionPointContract {
         CrmObjectProperty?: ComponentType<CrmObjectPropertyProps>;
         CrmAssociationPropertyList?: ComponentType<CrmAssociationPropertyListProps>;
         CrmStageTracker?: ComponentType<CrmStageTrackerProps>;
+        CrmActionButton?: ComponentType<CrmActionButtonProps>;
+        CrmActionLink?: ComponentType<CrmActionLinkProps>;
+        CrmCardActions?: ComponentType<CrmCardActionsProps>;
+    };
+}
+/** @ignore */
+export interface CrmSidebarExtensionPoint extends ExtensionPointContract {
+    actions: {
+        addAlert: AddAlertAction;
+        reloadPage: ReloadPageAction;
+        fetchCrmObjectProperties: FetchCrmObjectPropertiesAction;
+        openIframeModal: OpenIframeModalAction;
+    };
+    customComponents: {
+        [k: string]: never;
     };
 }
+/** @ignore */
 export interface CrmDataHighlightProps {
     properties: Array<string>;
     objectTypeId?: string;
     objectId?: number;
 }
+/** @ignore */
 export interface CrmReportProps {
     reportId: string;
 }
+/** @ignore */
 export interface CrmPropertyListProps {
     properties: Array<string>;
     direction?: string;
     objectTypeId?: string;
     objectId?: number;
 }
+/** @ignore */
 export interface CrmObjectPropertyProps {
     properties: Array<string>;
     objectTypeId?: string;
     objectId?: number;
 }
+/** @ignore */
 type CrmSortDescriptor = {
     columnName: string;
     direction: 1 | -1;
 };
+/** @ignore */
 interface CrmSearchFilter {
     operator: 'EQ' | 'NEQ' | 'LT' | 'LTE' | 'GT' | 'GTE' | 'BETWEEN' | 'IN' | 'NOT_IN' | 'HAS_PROPERTY' | 'NOT_HAS_PROPERTY';
     value?: string | number;
@@ -401,6 +1220,7 @@ interface CrmSearchFilter {
     highValue?: string | number;
     property: string;
 }
+/** @ignore */
 export interface CrmAssociationTableProps {
     objectTypeId: string;
     propertyColumns: Array<string>;
@@ -412,6 +1232,7 @@ export interface CrmAssociationTableProps {
     preFilters?: Array<CrmSearchFilter>;
     sort?: Array<CrmSortDescriptor>;
 }
+/** @ignore */
 export interface CrmAssociationPivotProps {
     objectTypeId: string;
     associationLabels?: Array<string>;
@@ -419,6 +1240,7 @@ export interface CrmAssociationPivotProps {
     preFilters?: Array<CrmSearchFilter>;
     sort?: Array<CrmSortDescriptor>;
 }
+/** @ignore */
 export interface CrmAssociationPropertyListProps {
     objectTypeId: string;
     properties: Array<string>;
@@ -426,17 +1248,91 @@ export interface CrmAssociationPropertyListProps {
     filters?: Array<CrmSearchFilter>;
     sort?: Array<CrmSortDescriptor>;
 }
+/** @ignore */
 export interface CrmStageTrackerProps {
     objectId?: number;
     objectTypeId?: string;
     properties: Array<string>;
     showProperties?: boolean;
 }
-interface CrmSidebarExtensionPoint extends ExtensionPointContract {
-    actions: {
-        reloadPage: ReloadPageAction;
+/** @ignore */
+interface ObjectCoordinates {
+    objectTypeId: string;
+    objectId: number;
+}
+/** @ignore */
+interface OpenRecordAssociationFormArgs {
+    objectTypeId: string;
+    association: {
+        objectTypeId: string;
+        objectId: number;
     };
 }
+/** @ignore */
+interface ActivityCreatorActionArgs {
+    objectTypeId: string;
+    objectId: number;
+    windowVariant?: 'windowed' | 'fullscreen';
+}
+/** @ignore */
+interface ActionArgs {
+    PREVIEW_OBJECT: ObjectCoordinates;
+    ADD_NOTE: ActivityCreatorActionArgs;
+    SEND_EMAIL: ActivityCreatorActionArgs;
+    SCHEDULE_MEETING: ActivityCreatorActionArgs;
+    OPEN_RECORD_ASSOCIATION_FORM: OpenRecordAssociationFormArgs;
+}
+/** @ignore */
+export type ArgsFor<SpecificActionType extends ActionType> = ActionArgs[SpecificActionType];
+export type ActionType = 'PREVIEW_OBJECT' | 'ADD_NOTE' | 'SEND_EMAIL' | 'SCHEDULE_MEETING' | 'OPEN_RECORD_ASSOCIATION_FORM';
+/** @ignore */
+interface BaseActionComponent {
+    children: ReactNode;
+    actionType: ActionType;
+    actionContext: ArgsFor<ActionType>;
+    onError?: (errors: string[]) => void;
+}
+/** @ignore */
+export interface CrmActionButtonProps extends BaseActionComponent {
+    variant?: 'primary' | 'secondary' | 'destructive';
+    type?: 'button' | 'reset' | 'submit';
+}
+/** @ignore */
+export interface CrmActionLinkProps extends BaseActionComponent {
+    variant?: 'primary' | 'light' | 'dark' | 'destructive';
+}
+/** @ignore */
+export interface ActionLibraryButtonCardActionConfig<SpecificActionType extends ActionType = ActionType> {
+    type: 'action-library-button';
+    actionType: SpecificActionType;
+    actionContext: ArgsFor<SpecificActionType>;
+    label?: string;
+    disabled?: boolean;
+    tooltipText?: string;
+}
+/** @ignore */
+export type DropdownCardActionConfigOptions = [
+    ActionLibraryButtonCardActionConfig,
+    ...ActionLibraryButtonCardActionConfig[]
+];
+/** @ignore */
+export interface DropdownCardActionConfig {
+    type: 'dropdown';
+    options: DropdownCardActionConfigOptions;
+    label?: string;
+    disabled?: boolean;
+    tooltipText?: string;
+}
+/** @ignore */
+type ErrorHandler = (errors: string[]) => void;
+/** @ignore */
+type CardActionConfig = ActionLibraryButtonCardActionConfig | DropdownCardActionConfig;
+/** @ignore */
+export type CrmCardActionsProps = {
+    actionConfigs: Array<CardActionConfig>;
+    onError?: ErrorHandler;
+};
+/** @ignore */
 interface RemotePlaygroundExtensionPoint extends ExtensionPointContract {
     actions: {
         warn: () => void;
@@ -445,6 +1341,7 @@ interface RemotePlaygroundExtensionPoint extends ExtensionPointContract {
         ExampleCrmComponent: ComponentType<ExampleCrmComponentProps>;
     };
 }
+/** @ignore */
 export interface ExtensionPoints {
     'uie.playground.middle': RemotePlaygroundExtensionPoint;
     'crm.record.tab': CrmMiddleExtensionPoint;
@@ -455,51 +1352,182 @@ export interface ExampleCrmComponentProps {
     size: 'sm' | 'md' | 'lg';
     count: number;
 }
+/** @ignore */
 export interface ExtensionPointApi<ExtensionPointName extends keyof ExtensionPoints> {
     context: Context;
     runServerlessFunction: ServerlessFuncRunner;
     actions: ExtensionPoints[ExtensionPointName]['actions'];
 }
+/** @ignore */
 interface OpenIframeActionPayload {
     uri: string;
     height: number;
     width: number;
     associatedObjectProperties?: string[];
 }
+/**
+ * The props type for {@link !components.LoadingSpinner}.
+ *
+ * @category Component Props
+ */
 export interface LoadingSpinnerProps {
+    /**
+     * The text that displays next to the spinner.
+     *
+     */
     label: string;
+    /**
+     * When set to `true`, the label will appear next to the spinner.
+     *
+     * @defaultValue `false`
+     */
     showLabel?: boolean;
+    /**
+     * The size of the spinner.
+     *
+     * @defaultValue `"sm"`
+     */
     size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
+    /**
+     * The position of the spinner. Can be one of `inline` or `centered`.
+     *
+     * @defaultValue `"inline"`
+     */
     layout?: 'inline' | 'centered';
 }
-interface AlignmentProps {
+export interface AlignmentProps {
     align?: 'left' | 'center' | 'right';
 }
-interface WidthProps {
+export interface WidthProps {
     width?: 'min' | 'max' | 'auto' | number;
 }
 export interface TableElementProps {
     children: React.ReactNode;
 }
-export type TableHeaderProps = TableElementProps & AlignmentProps & WidthProps;
+/**
+ * @property align Sets the alignment of a table header.
+ * @property width Sets the width of a table header.
+ *
+ * @interface
+ */
+export type BaseTableHeaderProps = TableElementProps & AlignmentProps & WidthProps;
 export type TableCellProps = TableElementProps & AlignmentProps & WidthProps;
+/**
+ * The props type for {@link !components.TableHeader} when sorted === never.
+ *
+ * @category Component Props
+ */
+export interface UnSortedTableHeaderProps extends BaseTableHeaderProps {
+    sortDirection?: 'never';
+}
+/**
+ * The props type for {@link !components.TableHeader} when sorted !== never.
+ *
+ * @category Component Props
+ */
+export interface SortedTableHeaderProps extends BaseTableHeaderProps {
+    /**
+     * Sets the current direction in which the column is sorted (if any). It's a visual indicator, it doesn't modify the data.
+     *
+     * @defaultValue `"none"`
+     */
+    sortDirection: 'ascending' | 'descending' | 'none';
+    /**
+     * A callback function that is invoked when the header is clicked. It recieves the new `sortDirection` as an argument.
+     * It's required when sort = `ascending`, `descending` or `none`.
+     *
+     * @event
+     * @defaultValue `"none"`
+     */
+    onSortChange: (value: NonNullable<SortedTableHeaderProps['sortDirection']>) => void;
+    /**
+     * If `true`, users cannot change the sort ordering. It has no effect if sort=`never` or `undefined`.
+     *
+     *  @defaultValue `false`
+     */
+    disabled?: boolean;
+}
+/**
+ * The props type for {@link !components.TableHeader}.
+ *
+ * @category Component Props
+ */
+export type TableHeaderProps = SortedTableHeaderProps | UnSortedTableHeaderProps;
 interface BaseTableProps {
+    /**
+     * When set to false, the table will not have borders.
+     *
+     * @defaultValue `true`
+     */
     bordered?: boolean;
+    /**
+     * When set to `true`, the table will not have bottom margin.
+     *
+     * @defaultValue `false`
+     */
     flush?: boolean;
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. The children should be one of Table's subcomponents.
+     */
     children: React.ReactNode;
 }
+/**
+ * @internal
+ */
 export interface TableNoPaginatedProps extends BaseTableProps {
+    /**
+     * When set to `true`, the table will include pagination navigation. Take a look at {@link !types.TablePaginatedProps} for pagination props.
+     *
+     * @defaultValue `false`
+     */
     paginated?: false;
 }
+/**
+ * @internal
+ */
 export interface TablePaginatedProps extends BaseTableProps {
+    /**
+     * When set to `true`, the table will include pagination navigation. Take a look at {@link !types.TablePaginatedProps} for pagination props.
+     *
+     * @defaultValue `false`
+     */
     paginated: true;
+    /**
+     * The total number of pages available.
+     */
     pageCount: number;
-    onPageChange: (pageNumber: number) => void;
+    /**
+     * When set to `false`, hides the text labels for the First/Prev/Next buttons. The button labels will still be accessible to screen readers.
+     *
+     * @defaultValue `true`
+     */
     showButtonLabels?: boolean;
+    /**
+     * When set to `true`, displays the **First/Last** page buttons.
+     *
+     * @defaultValue `false`
+     */
     showFirstLastButtons?: boolean;
+    /**
+     * Sets how many page buttons are displayed.
+     */
     maxVisiblePageButtons?: number;
+    /**
+     * Denotes the current page.
+     */
     page?: number;
+    /**
+     * A function that will be invoked when the pagination button is clicked. It receives the new page number as argument.
+     *
+     * @event
+     */
+    onPageChange: (pageNumber: number) => void;
 }
+/**
+ * The props type for {@link !components.Table}.
+ *
+ * @category Component Props
+ */
 export type TableProps = TableNoPaginatedProps | TablePaginatedProps;
 export declare class RemoteEvent<V> {
     type: string;
@@ -508,22 +1536,75 @@ export declare class RemoteEvent<V> {
     targetValue: V;
     constructor(value: V, event: Event);
 }
+/**
+ * The props type for {@link !components.Link}.
+ *
+ * @category Component Props
+ */
 export interface LinkProps {
+    /**
+     * Sets the content that will render inside the component.
+     *
+     */
     children: ReactNode;
+    /**
+     * The URL that will be opened on click. Links to pages in the HubSpot account will open in the same tab, while non-HubSpot links will open in a new tab.
+     *
+     */
     href: string;
+    /**
+     * The color variation of the link.
+     *
+     * @defaultValue `"primary"`
+     */
     variant?: 'primary' | 'destructive' | 'light' | 'dark';
+    /**
+     * A function that will be invoked with the link is clicked. The function receives no arguments and its return value is ignored.
+     *
+     * @event
+     */
     onClick?: () => void;
+    /**
+     * When set to true, `event.preventDefault()` will be invoked before the `onClick` function is called, preventing automatic navigation to the href URL.
+     *
+     * @defaultValue `false`
+     */
     preventDefault?: boolean;
 }
 export type JsonValue = string | number | boolean | null | JsonValue[] | {
     [key: string]: JsonValue;
 };
+/**
+ * The props type for {@link !components.Box}.
+ *
+ * @category Component Props
+ */
 export interface BoxProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     *
+     */
     children: ReactNode;
+    /**
+     * Overrides Flex's `alignItem` value for this element.
+     *
+     * @defaultValue `"auto"`
+     */
     alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch' | 'auto';
+    /**
+     * Sets how the item will grow or shrink when it's a direct ancestor of the Flex component.
+     * ##### Options in detail
+     *
+     *- `initial`: The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container.
+     *- `auto`: The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container.
+     *- `none`: The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container.
+     *- `number`:  Tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.
+     *
+     * @defaultValue `"initial"`
+     */
     flex?: 'initial' | 'auto' | 'none' | number;
 }
-interface TShirtSizes {
+export interface TShirtSizes {
     xs: 'extra-small' | 'xs';
     sm: 'small' | 'sm';
     md: 'medium' | 'md';
@@ -532,21 +1613,93 @@ interface TShirtSizes {
 }
 export type AllSizes = TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'] | TShirtSizes['xl'];
 export type AllDistances = 'flush' | AllSizes;
+/**
+ * The props type for {@link !components.StepIndicator}.
+ *
+ * @category Component Props
+ */
 export interface StepIndicatorProps {
+    /**
+     * An array containing the name of each step.
+     */
     stepNames: string[];
+    /**
+     * The orientation of the indicator.
+     *
+     * @defaultValue `"horizontal"`
+     */
     direction?: 'horizontal' | 'vertical';
-    onClick?: (stepIndex: number) => void;
+    /**
+     * The size of the indicator circles.
+     *
+     * @defaultValue `"small"`
+     */
     circleSize?: AllSizes;
+    /**
+     * The currently active step. Steps are 0-based.
+     */
     currentStep?: number;
+    /**
+     * The visual style of the component.
+     *
+     * - default: default spacing.
+     * - compact: only shows the title of the currently active step.
+     * - flush: only shows the title of the currently active step and removes left and right margins.
+     *
+     * @defaultValue `"default"`
+     */
     variant?: 'default' | 'compact' | 'flush';
+    /**
+     * A function that will be invoked when a step in the indicator is clicked. The function receives the current step index as an argument (zero-based). Use this to update the currently active step.
+     *
+     * @event
+     */
+    onClick?: (stepIndex: number) => void;
 }
+/**
+ * The props type for {@link !components.Accordion}.
+ *
+ * @category Component Props
+ */
 export interface AccordionProps {
+    /**
+     * The title text for the accordion.
+     *
+     */
     title: string;
+    /**
+     * The main content of the accordion when it opens.
+     *
+     */
     children: ReactNode;
+    /**
+     * Defines default open behavior on page load. When set to `true`, the accordion will be open by default on initial load.
+     *
+     * @defaultValue `false`
+     */
     defaultOpen?: boolean;
+    /**
+     * When set to `true`, the accordion's open state cannot be changed.
+     *
+     * @defaultValue `false`
+     */
     disabled?: boolean;
+    /**
+     * For controlling the accordion's open state programmatically. When set to `true`, the accordion will open. Takes precedence over `defaultOpen`.
+     *
+     */
     open?: boolean;
+    /**
+     * The size of the accordion title.
+     *
+     * @defaultValue `"small"`
+     */
     size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
+    /**
+     * A function that will be invoked when the title is clicked. It receives no arguments and its return value is ignored.
+     *
+     * @event
+     */
     onClick?: () => void;
 }
 export {};