@hubspot/ui-extensions 0.3.0 → 0.4.0

package/README.md

@@ -6,12 +6,14 @@ React components and utilities for extending HubSpot's UI.
 
 - [Accordion](#accordion)
 - [Alert](#alert)
+- [Box](#box)
 - [Button](#button)
 - [ButtonRow](#buttonrow)
 - [Card](#card)
 - [DescriptionList](#descriptionlist)
   - [DescriptionListItem](#descriptionlistitem)
 - [Divider](#divider)
+- [Flex](#flex)
 - [Form](#form)
 - [EmptyState](#emptystate)
 - [ErrorState](#errorstate)
@@ -20,6 +22,7 @@ React components and utilities for extending HubSpot's UI.
 - [Input](#input)
 - [Link](#link)
 - [LoadingSpinner](#loadingspinner)
+- [Multiselect](#multiselect)
 - [NumberInput](#numberInput)
 - [ProgressBar](#progressbar)
 - [Select](#select)
@@ -37,7 +40,7 @@ React components and utilities for extending HubSpot's UI.
   - [TableRow](#tablerow)
 - [Tag](#tag)
 - [Text](#text)
-- [Textarea](#textarea)
+- [TextArea](#textarea)
 - [Tile](#tile)
 - [ToggleGroup](#togglegroup)
 
@@ -153,6 +156,51 @@ const Extension = () => {
 };
 ```
 
+### Box
+
+##### Import
+
+```javascript
+import { Box } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+export interface BoxProps {
+  children: ReactNode;
+  alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch' | 'auto';
+  flex?: 'initial' | 'auto' | 'none' | number;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+| `alignSelf` | `'start' \| 'center' \| 'baseline' \| 'end' \| 'stretch' \| 'auto'` `(optional)` | `'auto'` | Overrides flex's align item value for this element. |
+| `flex` | `'initial' \| 'auto' \| 'none' \| number` `(optional)` | `'initial'` | Sets how the item will grow or shrink when it's a direct ancestor of the Flex component. |
+
+
+#### flex prop Options
+
+- `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.
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Box>
+      <Text>Hello</Text>
+    </Box>
+  );
+};
+```
+
+
 ### Button
 
 ##### Import
@@ -410,6 +458,63 @@ const Extension = () => {
 };
 ```
 
+### Flex
+
+##### Import
+
+```javascript
+import { Flex } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+export interface FlexProps {
+  children?: React.ReactNode;
+  direction?: 'row' | 'column';
+  justify?: 'center' | 'end' | 'start' | 'around' | 'between';
+  align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+  alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+  wrap?: boolean;
+  gap?:
+  | 'flush'
+  | 'small'
+  | 'extra-small'
+  | 'medium'
+  | 'large'
+  | 'extra-large'
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl';
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `direction` | `'row' \| 'column'` | `'column'` | Sets the direction in which elements are placed. |
+| `justify` | `'start' \| 'center' \|'end' \|'around' \| 'between'` | `'start'` | Defines how to distribute space between and around children on main axis. |
+| `align` | `'start' \| 'center' \|'baseline' \| 'end' \| 'stretch' \|'between'` | `'start'` | Controls the aligment of children in the cross axis. |
+| `alignSelf` | `'start' \| 'center' \| 'baseline' \| 'end' \| 'stretch' \| 'auto'` `(optional)` | `'auto'` | Overrides flex's align item value for this element. Useful when `Flex` is the child of another `Flex` component. |
+| `wrap` | `boolean(optional)` | `false` | If set to `false`, children are forced onto one line. If set to `true`, they can wrap into multiple lines. |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+| `gap` | `'flush' \| 'extra-small' \| 'small' \| 'medium' \| 'large' \| 'extra-large' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'small'` | Amount of space between each child component passed as children. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Flex direction="column" distance="large">
+      <Tile>Tile 1</Tile>
+      <Tile>Tile 2</Tile>
+      <Tile>Tile 3</Tile>
+    </Flex>
+  );
+};
+```
+
 ### Form
 
 ##### Import
@@ -792,6 +897,70 @@ const Extension = () => {
   return <LoadingSpinner label="Loading..." />;
 };
 ```
+### Multiselect
+
+```javascript
+import { Multiselect } from '@hubspot/ui-extensions';
+```
+
+### Props
+
+```typescript
+interface MultiSelectProps {
+  label: string;
+  name: string;
+  value?: (string | number)[];
+  required?: boolean;
+  readOnly?: boolean;
+  description?: string;
+  tooltip?: string;
+  placeholder?: string;
+  error?: boolean;
+  errorMessage?: string;
+  onChange: (value: (string | number)[]) => void;
+  options: {
+    label: string;
+    value: string | number;
+  }[];
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` | `string` | `N/A` | The label text to display for the select element. |
+| `name` | `string` | `N/A` | The unique identifier for the select element. |
+| `value` | `Array<string \| number>` | `N/A` | The value of the select input. |
+| `required` | `boolean` | `false` | Determines if the required indicator should be displayed. |
+| `readOnly` | `boolean` | `false` | Determines if the field is editable or not. |
+| `description` | `string` | `N/A` | Instructional message to display to the user to help understand the purpose of the input. |
+| `tooltip` | `string` | `N/A` | Text that will appear in a tooltip next to the input label. |
+| `placeholder` | `string` | `N/A` | Text that appears in the input when it has no value set. |
+| `error` | `boolean(optional)` | `false` | If set to true, `validationMessage` is displayed as an error message, if it was provided. The input will also render it's error state to let the user know there is an error. If false, `validationMessage` is displayed as a success message. |
+| `validationMessage` | `string(optional)` | `''` | The text to show if the input has an error. |
+| `onChange` | `(value: Array<string \| number>) => void` | `N/A` | Function that is called with the new value when it is updated. |
+| `options` | `Array<{label: string; value: string \| number}>` | `N/A` | Array of options to be displayed in the select. `label` will be used as the display text in the dropdown list and `value` should be a **unique** identifier. `value` is the data that will be submitted with the form. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  const options = [
+    { label: 'Ice cream', value: 'ice-cream' },
+    { label: 'Pizza', value: 'pizza' },
+    { label: 'Burger', value: 'burger' },
+    { label: 'Soda', value: 'soda' },
+  ];
+
+  return (
+    <MultiSelect
+      name="favorite-food"
+      label="Favorite Food"
+      options={options}
+    />
+  );
+};
+```
+
 ### NumberInput
 
 ##### Import
@@ -1726,12 +1895,12 @@ const Extension = () => {
 };
 ```
 
-### Textarea
+### TextArea
 
 ##### Import
 
 ```javascript
-import { Textarea } from '@hubspot/ui-extensions';
+import { TextArea } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
@@ -1762,7 +1931,7 @@ interface TextareaProps {
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `label` | `string` | `N/A` | The label text to display for the textarea element |
-| `name` | `string` | `N/A` | The unique identifier for the textarea element, this could be thought of as the HTML5 [Textarea element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#name) |
+| `name` | `string` | `N/A` | The unique identifier for the textarea element, this could be thought of as the HTML5 [textarea element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#name) |
 | `value` | `string(optional)` | `''` | The value of the textarea |
 | `required` | `boolean(optional)` | `false` | Determines if the required indicator should be displayed |
 | `readOnly` | `boolean(optional)` | `false` | Determines if the field is editable or not. |
@@ -1792,7 +1961,7 @@ const Extension = () => {
 
   return (
     <Form>
-      <Textarea
+      <TextArea
         label="Description"
         name="description"
         tooltip="Provide as much detail as possible"

package/dist/coreComponents.d.ts

@@ -1,186 +1,201 @@
-import type { AlertProps, ButtonProps, ButtonRowProps, CardProps, DescriptionListProps, DescriptionListItemProps, DividerProps, EmptyStateProps, ErrorStateProps, FormProps, HeadingProps, ImageProps, InputProps, TextareaProps, LoadingSpinnerProps, ProgressBarProps, SelectProps, TagProps, TextProps, TileProps, StackProps, StatisticsProps, StatisticsItemProps, StatisticsTrendProps, TableProps, TableElementProps, ToggleGroupProps, LinkProps, NumberInputProps, BoxProps, StepIndicatorProps, AccordionProps } from './types';
+import type * as types from './types';
 export declare const Alert: "Alert" & {
     readonly type?: "Alert" | undefined;
-    readonly props?: AlertProps | undefined;
+    readonly props?: types.AlertProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Alert", AlertProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Alert", types.AlertProps, true>>;
 export declare const Button: "Button" & {
     readonly type?: "Button" | undefined;
-    readonly props?: ButtonProps | undefined;
+    readonly props?: types.ButtonProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Button", ButtonProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Button", types.ButtonProps, true>>;
 export declare const ButtonRow: "ButtonRow" & {
     readonly type?: "ButtonRow" | undefined;
-    readonly props?: ButtonRowProps | undefined;
+    readonly props?: types.ButtonRowProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ButtonRow", ButtonRowProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ButtonRow", types.ButtonRowProps, true>>;
 export declare const Card: "Card" & {
     readonly type?: "Card" | undefined;
-    readonly props?: CardProps | undefined;
+    readonly props?: types.CardProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Card", CardProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Card", types.CardProps, true>>;
 export declare const DescriptionList: "DescriptionList" & {
     readonly type?: "DescriptionList" | undefined;
-    readonly props?: DescriptionListProps | undefined;
+    readonly props?: types.DescriptionListProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"DescriptionList", DescriptionListProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"DescriptionList", types.DescriptionListProps, true>>;
 export declare const DescriptionListItem: "DescriptionListItem" & {
     readonly type?: "DescriptionListItem" | undefined;
-    readonly props?: DescriptionListItemProps | undefined;
+    readonly props?: types.DescriptionListItemProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"DescriptionListItem", DescriptionListItemProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"DescriptionListItem", types.DescriptionListItemProps, true>>;
 export declare const Divider: "Divider" & {
     readonly type?: "Divider" | undefined;
-    readonly props?: DividerProps | undefined;
+    readonly props?: types.DividerProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Divider", DividerProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Divider", types.DividerProps, true>>;
 export declare const EmptyState: "EmptyState" & {
     readonly type?: "EmptyState" | undefined;
-    readonly props?: EmptyStateProps | undefined;
+    readonly props?: types.EmptyStateProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"EmptyState", EmptyStateProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"EmptyState", types.EmptyStateProps, true>>;
 export declare const ErrorState: "ErrorState" & {
     readonly type?: "ErrorState" | undefined;
-    readonly props?: ErrorStateProps | undefined;
+    readonly props?: types.ErrorStateProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ErrorState", ErrorStateProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ErrorState", types.ErrorStateProps, true>>;
 export declare const Form: "Form" & {
     readonly type?: "Form" | undefined;
-    readonly props?: FormProps | undefined;
+    readonly props?: types.FormProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Form", FormProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Form", types.FormProps, true>>;
 export declare const Heading: "Heading" & {
     readonly type?: "Heading" | undefined;
-    readonly props?: HeadingProps | undefined;
+    readonly props?: types.HeadingProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Heading", HeadingProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Heading", types.HeadingProps, true>>;
 export declare const Image: "Image" & {
     readonly type?: "Image" | undefined;
-    readonly props?: ImageProps | undefined;
+    readonly props?: types.ImageProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Image", ImageProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Image", types.ImageProps, true>>;
 export declare const Input: "Input" & {
     readonly type?: "Input" | undefined;
-    readonly props?: InputProps<string> | undefined;
+    readonly props?: types.InputProps<string> | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Input", InputProps<string>, true>>;
-export declare const Textarea: "Textarea" & {
-    readonly type?: "Textarea" | undefined;
-    readonly props?: TextareaProps | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Textarea", TextareaProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Input", types.InputProps<string>, true>>;
 export declare const Link: "Link" & {
     readonly type?: "Link" | undefined;
-    readonly props?: LinkProps | undefined;
+    readonly props?: types.LinkProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Link", LinkProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Link", types.LinkProps, true>>;
+export declare const TextArea: "TextArea" & {
+    readonly type?: "TextArea" | undefined;
+    readonly props?: types.TextAreaProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TextArea", types.TextAreaProps, true>>;
+export declare const Textarea: "Textarea" & {
+    readonly type?: "Textarea" | undefined;
+    readonly props?: types.TextAreaProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Textarea", types.TextAreaProps, true>>;
 export declare const LoadingSpinner: "LoadingSpinner" & {
     readonly type?: "LoadingSpinner" | undefined;
-    readonly props?: LoadingSpinnerProps | undefined;
+    readonly props?: types.LoadingSpinnerProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"LoadingSpinner", LoadingSpinnerProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"LoadingSpinner", types.LoadingSpinnerProps, true>>;
 export declare const ProgressBar: "ProgressBar" & {
     readonly type?: "ProgressBar" | undefined;
-    readonly props?: ProgressBarProps | undefined;
+    readonly props?: types.ProgressBarProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ProgressBar", ProgressBarProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ProgressBar", types.ProgressBarProps, true>>;
 export declare const Select: "Select" & {
     readonly type?: "Select" | undefined;
-    readonly props?: SelectProps | undefined;
+    readonly props?: types.SelectProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Select", SelectProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Select", types.SelectProps, true>>;
 export declare const Tag: "Tag" & {
     readonly type?: "Tag" | undefined;
-    readonly props?: TagProps | undefined;
+    readonly props?: types.TagProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tag", TagProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tag", types.TagProps, true>>;
 export declare const Text: "Text" & {
     readonly type?: "Text" | undefined;
-    readonly props?: TextProps | undefined;
+    readonly props?: types.TextProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Text", TextProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Text", types.TextProps, true>>;
 export declare const Tile: "Tile" & {
     readonly type?: "Tile" | undefined;
-    readonly props?: TileProps | undefined;
+    readonly props?: types.TileProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tile", TileProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tile", types.TileProps, true>>;
 export declare const Stack: "Stack" & {
     readonly type?: "Stack" | undefined;
-    readonly props?: StackProps | undefined;
+    readonly props?: types.StackProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Stack", StackProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Stack", types.StackProps, true>>;
 export declare const ToggleGroup: "ToggleGroup" & {
     readonly type?: "ToggleGroup" | undefined;
-    readonly props?: ToggleGroupProps | undefined;
+    readonly props?: types.ToggleGroupProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ToggleGroup", ToggleGroupProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ToggleGroup", types.ToggleGroupProps, true>>;
 export declare const StatisticsItem: "StatisticsItem" & {
     readonly type?: "StatisticsItem" | undefined;
-    readonly props?: StatisticsItemProps | undefined;
+    readonly props?: types.StatisticsItemProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StatisticsItem", StatisticsItemProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StatisticsItem", types.StatisticsItemProps, true>>;
 export declare const Statistics: "Statistics" & {
     readonly type?: "Statistics" | undefined;
-    readonly props?: StatisticsProps | undefined;
+    readonly props?: types.StatisticsProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Statistics", StatisticsProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Statistics", types.StatisticsProps, true>>;
 export declare const StatisticsTrend: "StatisticsTrend" & {
     readonly type?: "StatisticsTrend" | undefined;
-    readonly props?: StatisticsTrendProps | undefined;
+    readonly props?: types.StatisticsTrendProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StatisticsTrend", StatisticsTrendProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StatisticsTrend", types.StatisticsTrendProps, true>>;
 export declare const Table: "Table" & {
     readonly type?: "Table" | undefined;
-    readonly props?: TableProps | undefined;
+    readonly props?: types.TableProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Table", TableProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Table", types.TableProps, true>>;
 export declare const TableFooter: "TableFooter" & {
     readonly type?: "TableFooter" | undefined;
-    readonly props?: TableElementProps | undefined;
+    readonly props?: types.TableElementProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableFooter", TableElementProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableFooter", types.TableElementProps, true>>;
 export declare const TableCell: "TableCell" & {
     readonly type?: "TableCell" | undefined;
-    readonly props?: TableElementProps | undefined;
+    readonly props?: types.TableElementProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableCell", TableElementProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableCell", types.TableElementProps, true>>;
 export declare const TableRow: "TableRow" & {
     readonly type?: "TableRow" | undefined;
-    readonly props?: TableElementProps | undefined;
+    readonly props?: types.TableElementProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableRow", TableElementProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableRow", types.TableElementProps, true>>;
 export declare const TableBody: "TableBody" & {
     readonly type?: "TableBody" | undefined;
-    readonly props?: TableElementProps | undefined;
+    readonly props?: types.TableElementProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableBody", TableElementProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableBody", types.TableElementProps, true>>;
 export declare const TableHeader: "TableHeader" & {
     readonly type?: "TableHeader" | undefined;
-    readonly props?: TableElementProps | undefined;
+    readonly props?: types.TableElementProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableHeader", TableElementProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableHeader", types.TableElementProps, true>>;
 export declare const TableHead: "TableHead" & {
     readonly type?: "TableHead" | undefined;
-    readonly props?: TableElementProps | undefined;
+    readonly props?: types.TableElementProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableHead", TableElementProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableHead", types.TableElementProps, true>>;
 export declare const NumberInput: "NumberInput" & {
     readonly type?: "NumberInput" | undefined;
-    readonly props?: NumberInputProps | undefined;
+    readonly props?: types.NumberInputProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"NumberInput", NumberInputProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"NumberInput", types.NumberInputProps, true>>;
 export declare const Box: "Box" & {
     readonly type?: "Box" | undefined;
-    readonly props?: BoxProps | undefined;
+    readonly props?: types.BoxProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Box", BoxProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Box", types.BoxProps, true>>;
 export declare const StepIndicator: "StepIndicator" & {
     readonly type?: "StepIndicator" | undefined;
-    readonly props?: StepIndicatorProps | undefined;
+    readonly props?: types.StepIndicatorProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StepIndicator", StepIndicatorProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StepIndicator", types.StepIndicatorProps, true>>;
 export declare const Accordion: "Accordion" & {
     readonly type?: "Accordion" | undefined;
-    readonly props?: AccordionProps | undefined;
+    readonly props?: types.AccordionProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Accordion", types.AccordionProps, true>>;
+export declare const MultiSelect: "MultiSelect" & {
+    readonly type?: "MultiSelect" | undefined;
+    readonly props?: types.MultiSelectProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"MultiSelect", types.MultiSelectProps, true>>;
+export declare const Flex: "Flex" & {
+    readonly type?: "Flex" | undefined;
+    readonly props?: types.FlexProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Accordion", AccordionProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Flex", types.FlexProps, true>>;

package/dist/coreComponents.js

@@ -12,8 +12,11 @@ export const Form = createRemoteReactComponent('Form');
 export const Heading = createRemoteReactComponent('Heading');
 export const Image = createRemoteReactComponent('Image');
 export const Input = createRemoteReactComponent('Input');
-export const Textarea = createRemoteReactComponent('Textarea');
 export const Link = createRemoteReactComponent('Link');
+export const TextArea = createRemoteReactComponent('TextArea');
+// Textarea was changed to TextArea
+// Exporting both for backwards compat
+export const Textarea = createRemoteReactComponent('Textarea');
 export const LoadingSpinner = createRemoteReactComponent('LoadingSpinner');
 export const ProgressBar = createRemoteReactComponent('ProgressBar');
 export const Select = createRemoteReactComponent('Select');
@@ -36,3 +39,5 @@ export const NumberInput = createRemoteReactComponent('NumberInput');
 export const Box = createRemoteReactComponent('Box');
 export const StepIndicator = createRemoteReactComponent('StepIndicator');
 export const Accordion = createRemoteReactComponent('Accordion');
+export const MultiSelect = createRemoteReactComponent('MultiSelect');
+export const Flex = createRemoteReactComponent('Flex');

package/dist/crm/components.d.ts

@@ -1,4 +1,4 @@
-import { CrmAssociationPivotProps, CrmAssociationTableProps, CrmDataHighlightProps, CrmObjectPropertyProps, CrmPropertyListProps, CrmReportProps, CrmAssociationPropertyListProps } from '../types';
+import { CrmAssociationPivotProps, CrmAssociationTableProps, CrmDataHighlightProps, CrmObjectPropertyProps, CrmPropertyListProps, CrmReportProps, CrmAssociationPropertyListProps, CrmStageTrackerProps } from '../types';
 declare const CrmObjectProperty: "CrmObjectProperty" & {
     readonly type?: "CrmObjectProperty" | undefined;
     readonly props?: CrmObjectPropertyProps | undefined;
@@ -34,4 +34,9 @@ declare const CrmAssociationPropertyList: "CrmAssociationPropertyList" & {
     readonly props?: CrmAssociationPropertyListProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmAssociationPropertyList", CrmAssociationPropertyListProps, true>>;
-export { CrmObjectProperty, CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, };
+declare const CrmStageTracker: "CrmStageTracker" & {
+    readonly type?: "CrmStageTracker" | undefined;
+    readonly props?: CrmStageTrackerProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmStageTracker", CrmStageTrackerProps, true>>;
+export { CrmObjectProperty, CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmStageTracker, };

package/dist/crm/components.js

@@ -6,4 +6,5 @@ const CrmDataHighlight = createExtensionComponent('CrmDataHighlight');
 const CrmReport = createExtensionComponent('CrmReport');
 const CrmAssociationPivot = createExtensionComponent('CrmAssociationPivot');
 const CrmAssociationPropertyList = createExtensionComponent('CrmAssociationPropertyList');
-export { CrmObjectProperty, CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, };
+const CrmStageTracker = createExtensionComponent('CrmStageTracker');
+export { CrmObjectProperty, CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmStageTracker, };

package/dist/crm/index.d.ts

@@ -1,2 +1,2 @@
-import { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList } from './components';
-export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList, };
+import { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList, CrmStageTracker } from './components';
+export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList, CrmStageTracker, };

package/dist/crm/index.js

@@ -1,2 +1,2 @@
-import { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList, } from './components';
-export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList, };
+import { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList, CrmStageTracker, } from './components';
+export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList, CrmStageTracker, };

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, LoadingSpinner, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Textarea, Tile, ToggleGroup, Link, NumberInput, Box, Accordion, StepIndicator, } from './coreComponents';
 export { hubspot } from './hubspot';
+export * from './coreComponents';
 export * from './types';

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, LoadingSpinner, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Textarea, Tile, ToggleGroup, Link, NumberInput, Box, Accordion, StepIndicator, } from './coreComponents';
 export { hubspot } from './hubspot';
+export * from './coreComponents';
 export * from './types';

package/dist/types.d.ts

@@ -78,12 +78,13 @@ export interface InputProps<T = string> {
     onBlur?: (value: T) => void;
     onFocus?: (value: T) => void;
 }
-export interface TextareaProps extends InputProps {
+export interface TextAreaProps extends InputProps {
     cols?: number;
     maxLength?: number;
     rows?: number;
     resize?: 'vertical' | 'horizontal' | 'both' | 'none';
 }
+export type TextareaProps = TextAreaProps;
 export interface NumberInputProps extends InputProps<number> {
     min?: number;
     max?: number;
@@ -99,10 +100,9 @@ export interface ProgressBarProps {
     valueDescription?: string;
     variant?: 'success' | 'danger' | 'warning';
 }
-export interface SelectProps {
+export interface BaseSelectProps {
     label: string;
     name: string;
-    value?: string | number;
     required?: boolean;
     readOnly?: boolean;
     description?: string;
@@ -110,12 +110,19 @@ export interface SelectProps {
     placeholder?: string;
     error?: boolean;
     validationMessage?: string;
-    onChange?: (value: SelectProps['value']) => void;
     options: {
         label: string;
         value: string | number;
     }[];
 }
+export interface SelectProps extends BaseSelectProps {
+    value?: string | number;
+    onChange?: (value: SelectProps['value']) => void;
+}
+export interface MultiSelectProps extends BaseSelectProps {
+    value?: (string | number)[];
+    onChange?: (value: MultiSelectProps['value']) => void;
+}
 export interface TagProps {
     children: ReactNode;
     onClick?: () => void;
@@ -209,6 +216,15 @@ export interface StackProps {
     align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
     width?: 'auto' | '100%';
 }
+export interface FlexProps {
+    gap?: AllDistances;
+    children?: ReactNode;
+    direction?: 'row' | 'column';
+    justify?: 'center' | 'end' | 'start' | 'around' | 'between';
+    align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+    alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+    wrap?: boolean;
+}
 export interface StatisticsTrendProps {
     value: string;
     direction: 'increase' | 'decrease';
@@ -325,6 +341,7 @@ export interface CrmMiddleExtensionPoint extends ExtensionPointContract {
         CrmAssociationPivot: ComponentType<CrmAssociationPivotProps>;
         CrmObjectProperty?: ComponentType<CrmObjectPropertyProps>;
         CrmAssociationPropertyList?: ComponentType<CrmAssociationPropertyListProps>;
+        CrmStageTracker?: ComponentType<CrmStageTrackerProps>;
     };
 }
 export interface CrmDataHighlightProps {
@@ -382,6 +399,11 @@ export interface CrmAssociationPropertyListProps {
     filters?: Array<CrmSearchFilter>;
     sort?: Array<CrmSortDescriptor>;
 }
+export interface CrmStageTrackerProps {
+    objectId?: number;
+    objectTypeId?: string;
+    properties: Array<string>;
+}
 interface CrmSidebarExtensionPoint extends ExtensionPointContract {
     actions: {
         reloadPage: ReloadPageAction;
@@ -462,8 +484,8 @@ export type JsonValue = string | number | boolean | null | JsonValue[] | {
 };
 export interface BoxProps {
     children: ReactNode;
-    grow?: boolean;
     alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch' | 'auto';
+    flex?: 'initial' | 'auto' | 'none' | number;
 }
 interface TShirtSizes {
     xs: 'extra-small' | 'xs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -48,5 +48,5 @@
   "devDependencies": {
     "typescript": "5.0.4"
   },
-  "gitHead": "0b20c005a9564bbde58c22ce21959c713f354607"
+  "gitHead": "1269fb86282dd5f6b9686d064b6c652f00cb863f"
 }