@hubspot/ui-extensions 0.0.1-beta.0 → 0.0.1-beta.1

package/README.md

@@ -19,6 +19,7 @@ React components and utilities for extending HubSpot's UI.
 - [Input](#input)
 - [Link](#link)
 - [LoadingSpinner](#loadingspinner)
+- [NumberInput](#numberInput)
 - [ProgressBar](#progressbar)
 - [Select](#select)
 - [Stack](#stack)
@@ -55,7 +56,6 @@ The Alert component accepts the following props:
 ```typescript
 export interface AlertProps {
   title: string;
-  body?: string;
   children?: ReactNode;
   variant?: 'info' | 'warning' | 'success' | 'error' | 'danger';
 }
@@ -64,7 +64,6 @@ export interface AlertProps {
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `title` | `string` | `N/A` | The title text for the alert message. |
-| `body` | `string(optional)` | `N/A` | The main content of the alert message. If not provided, the children prop is used. |
 | `children` | `ReactNode(optional)` | `N/A` | The main content of the alert message when the body prop is not provided. |
 | `variant` | `'info' \| 'warning' \| 'success' \|'error' \| 'danger'` `(optional)` | `'info'` | Sets the color variation of the alert |
 
@@ -77,22 +76,18 @@ const Extension = () => {
       <Alert title="Important Info" variant="info">
         This is an informative message.
       </Alert>
-      <Alert
-        title="Success"
-        body="Operation completed successfully."
-        variant="success"
-      />
-      <Alert title="Warning" body="Proceed with caution." variant="warning" />
-      <Alert
-        title="Error"
-        body="Something went wrong. Please try again."
-        variant="error"
-      />
-      <Alert
-        title="Danger"
-        body="This action cannot be undone. Be careful."
-        variant="danger"
-      />
+      <Alert title="Success"variant="success">
+        Operation completed successfully.
+      </Alert>
+      <Alert title="Warning" variant="warning" >
+        Proceed with caution.
+      </Alert>
+      <Alert title="Error" variant="error" >
+        Something went wrong. Please try again.
+      </Alert>
+      <Alert title="Danger" variant="danger" >
+        This action cannot be undone. Be careful.
+      </Alert>
     </>
   );
 };
@@ -712,7 +707,7 @@ import { LoadingSpinner } from '@hubspot/ui-extensions';
 export interface LoadingSpinnerProps {
   label: string;
   showLabel?: boolean;
-  size?: 'xs' | 'sm' | 'md';
+  size?: 'xs' | 'extra-small' | 'sm' | 'small' | 'md' | 'medium';
   layout?: 'inline' | 'centered';
 }
 ```
@@ -721,7 +716,7 @@ export interface LoadingSpinnerProps {
 | --- | --- | --- | --- |
 | `label` | `string` | `N/A` | The companion text for the loading spinner. |
 | `showLabel` | `boolean(optional)` | `false` | if `true`, the label will be visible alongside the loading spinner. |
-| `size` | `'xs'\| 'sm' \| 'md'` `(optional)` | `'sm'` | The size of the loading spinner icon. |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'extra-small' \| 'small' \| 'medium'` `(optional)` | `'sm'` | The size of the loading spinner icon. |
 | `layout` | `'inline'\| 'centered'` `(optional)` | `N/A` | Use the `centered` option for layout as a convenience for the common pattern of filling the space of its parent. |
 
 ##### Usage
@@ -731,6 +726,79 @@ const Extension = () => {
   return <LoadingSpinner label="Loading..." />;
 };
 ```
+### NumberInput
+
+##### Import
+
+```javascript
+import { NumberInput } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+export interface NumberInputProps {
+  label: string;
+  name: string;
+  value?: number;
+  required?: boolean;
+  readOnly?: boolean;
+  description?: string;
+  tooltip?: string;
+  placeholder?: string;
+  error?: boolean;
+  defaultValue?: number;
+  validationMessage?: string;
+  onChange?: (value: number) => void;
+  onInput?: (value: number) => void;
+  onBlur?: (value: number) => void;
+  onFocus?: (value: number) => void;
+  min?: number;
+  max?: number;
+  precision?: number;
+  formatStyle?: 'decimal' | 'percentage';
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` | `string` | `N/A` | The label text to display for the form input element |
+| `name` | `string` | `N/A` | 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) |
+| `value` | `number(optional)` | `''` | The value of the input |
+| `required` | `boolean(optional)` | `false` | Determines if the required indicator should be displayed |
+| `readOnly` | `boolean(optional)` | `false` | Determines if the field is editable or not. |
+| `description` | `string(optional)` | `N/A` | Instructional message to display to the user to help understand the purpose of the input. |
+| `tooltip` | `string(optional)` | `N/A` | Text that will appear in a tooltip next to the input label. |
+| `placeholder` | `string(optional)` | `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: number) => void(optional)` | `N/A` | 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. |
+| `onInput` | `(value: number) => void(optional)` | `N/A` | 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. |
+| `onBlur` | `(value: number) => void(optional)` | `N/A` | A function that is called and passed the value every time the field loses focus. |
+| `onFocus` | `(value: number) => void(optional)` | `N/A` | A function that is called and passed the value every time the field gets focused. |
+| `min` | `number(optional)` | `N/A` | Sets the lower bound of your input. |
+| `max` | `number(optional)` | `N/A` | Sets the upper bound of your input. |
+| `precision` | `number(optional)` | `N/A` | Represents the number of digits to the right of the decimal point. |
+| `precision` | `number(optional)` | `N/A` | Represents the number of digits to the right of the decimal point. |
+| `formatStyle` | `'decimal' \| 'percentage'` | `'decimal'` | Formats the input as a decimal point number or a percentage. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  const [portalCount, setPortalCount] = useState(0);
+  return (
+    <NumberInput
+      label={'HubSpot Portal Count'}
+      name="portalsNumber"
+      description={'Number of active portals'}
+      placeholder={'number of portals'}
+      value={portalCount}
+      onChange={value => setPortalCount(value)}
+    />
+  );
+};
+```
 
 ### ProgressBar
 
@@ -875,7 +943,18 @@ import { Stack } from '@hubspot/ui-extensions';
 
 ```typescript
 interface StackProps {
-  distance?: 'flush' | 'small' | 'extra-small' | 'medium' | 'large';
+  distance?:
+    | 'flush'
+    | 'small'
+    | 'extra-small'
+    | 'medium'
+    | 'large'
+    | 'extra-large'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl';
   direction?: 'row' | 'column';
   children?: ReactNode;
 }
@@ -883,7 +962,7 @@ interface StackProps {
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `distance` | `'flush' \| 'extra-small' \| 'small' \| 'medium' \| 'large'` | `'small'` | Amount of space between each child component passed as children |
+| `distance` | `'flush' \| 'extra-small' \| 'small' \| 'medium' \| 'large' \| 'extra-large' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'small'` | Amount of space between each child component passed as children |
 | `direction` | `'row' \| 'column'` | `'column'` | Stacks elements in the vertical or horizontal direction. |
 | `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
 
@@ -1465,29 +1544,37 @@ import { Text } from '@hubspot/ui-extensions';
 ##### Props
 
 ```typescript
-interface TextProps {
-  format?: 'plaintext' | 'markdown';
+export interface TextFormatOptions {
+  fontWeight?: 'regular' | 'bold' | 'demibold';
+  italic?: boolean;
+  lineDecoration?: 'none' | 'underline' | 'strikethrough';
+}
+
+export type TextProps = {
   variant?: 'bodytext' | 'microcopy';
+  inline?: boolean;
   children: ReactNode;
-  tagName?: 'p' | 'span' | 'small';
-}
+  format?: TextFormatOptions;
+};
 ```
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `format` | `'plaintext' \| 'markdown'` `(optional)` | `'plaintext'` | Type of formatting for the display text. |
+| `format` | `'TextFormatOptions'` `(optional)` | `N/A` | Type of formatting options for the text. |
 | `children` | `string` | `N/A` | Text to be displayed as body text. |
 | `variant` | `'bodytext' \| 'microcopy'` | `'bodytext'` | Type of text to display |
 | `tagName` | `'p' \| 'small' \| 'span'` | `'bodytext'` | Type of text element(tag) to display. |
+| `inline` | `boolean(optional)` | `false` | If `false` the text component will not insert a line break. |
 
-#### Markdown
+#### Format Options
 
-Markdown syntax supported in the component:
+- bold text: `{ fontWeight: 'bold' }`
+- semibold text: `{ fontWeight: 'demibold' }`
+- italicized text: `{ italic: true }`
+- strikethrough text: `{ lineDecoration: 'strikethrough' }`
+- underlined text: `{ lineDecoration: 'underline' }`
+- inline text: `<Text inline={true}/>`
 
-- bold text: `**like this**` or `__like this__`
-- italicized text: `*like this*` or `_like this_`
-- inline code: `` `like this` ``
-- links: `[visible anchor text](https://www.hubspot.com/)`
 
 ##### Usage
 
@@ -1495,10 +1582,21 @@ Markdown syntax supported in the component:
 const Extension = () => {
   return (
     <>
-      <Text format="markdown">**Bold**</Text>
-      <Text format="markdown">*Italics*</Text>
-      <Text>**Not Bold because format isn't markdown**</Text>
-      <Text variant="microcopy">This is going to be small</Text>
+      <Text>Plain text</Text>
+      <Text format={{ fontWeight: 'bold' }}>Bold</Text>
+      <Text format={{ italic: true }}>Italics</Text>
+      <Text format={{ fontWeight: 'bold', italic: true }}>
+        Bold and Italic text
+      </Text>
+      <Text format={{ lineDecoration: 'strikethrough' }}>
+        Strikethrough Text
+      </Text>
+      <Text variant="microcopy">
+        Microcopy text
+        <Text inline={true} format={{ fontWeight: 'bold' }}>
+          with inner bold
+        </Text>
+      </Text>
     </>
   );
 };

package/dist/coreComponents.d.ts

@@ -1,4 +1,4 @@
-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 } from './types';
+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 } from './types';
 declare const Alert: "Alert" & {
     readonly type?: "Alert" | undefined;
     readonly props?: AlertProps | undefined;
@@ -61,9 +61,9 @@ declare const Image: "Image" & {
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Image", ImageProps, true>>;
 declare const Input: "Input" & {
     readonly type?: "Input" | undefined;
-    readonly props?: InputProps | undefined;
+    readonly props?: InputProps<string> | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Input", InputProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Input", InputProps<string>, true>>;
 declare const Textarea: "Textarea" & {
     readonly type?: "Textarea" | undefined;
     readonly props?: TextareaProps | undefined;
@@ -164,4 +164,14 @@ declare const Link: "Link" & {
     readonly props?: LinkProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Link", LinkProps, true>>;
-export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, Textarea, LoadingSpinner, Link, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Tile, ToggleGroup, };
+declare const NumberInput: "NumberInput" & {
+    readonly type?: "NumberInput" | undefined;
+    readonly props?: NumberInputProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"NumberInput", NumberInputProps, true>>;
+declare const Box: "Box" & {
+    readonly type?: "Box" | undefined;
+    readonly props?: BoxProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Box", BoxProps, true>>;
+export { Alert, Box, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, Textarea, LoadingSpinner, Link, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Tile, ToggleGroup, NumberInput, };

package/dist/coreComponents.js

@@ -32,4 +32,6 @@ const TableBody = createRemoteReactComponent('TableBody');
 const TableHeader = createRemoteReactComponent('TableHeader');
 const TableHead = createRemoteReactComponent('TableHead');
 const Link = createRemoteReactComponent('Link');
-export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, Textarea, LoadingSpinner, Link, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Tile, ToggleGroup, };
+const NumberInput = createRemoteReactComponent('NumberInput');
+const Box = createRemoteReactComponent('Box');
+export { Alert, Box, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, Textarea, LoadingSpinner, Link, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Tile, ToggleGroup, NumberInput, };

package/dist/crm/components.d.ts

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

package/dist/crm/components.js

@@ -1,7 +1,9 @@
 import { createExtensionComponent } from '../utils/createExtensionComponent';
+const CrmObjectProperty = createExtensionComponent('CrmObjectProperty');
 const CrmPropertyList = createExtensionComponent('CrmPropertyList');
 const CrmAssociationTable = createExtensionComponent('CrmAssociationTable');
 const CrmDataHighlight = createExtensionComponent('CrmDataHighlight');
 const CrmReport = createExtensionComponent('CrmReport');
 const CrmAssociationPivot = createExtensionComponent('CrmAssociationPivot');
-export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, };
+const CrmAssociationPropertyList = createExtensionComponent('CrmAssociationPropertyList');
+export { CrmObjectProperty, CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, };

package/dist/crm/index.d.ts

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

package/dist/crm/index.js

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

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, } from './coreComponents';
+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, } from './coreComponents';
 export { hubspot } from './hubspot';
 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, } from './coreComponents';
+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, } from './coreComponents';
 export { hubspot } from './hubspot';
 export * from './types';

package/dist/types.d.ts

@@ -1,7 +1,6 @@
 import { ReactNode, ComponentType } from 'react';
 export interface AlertProps {
     title: string;
-    body?: string;
     children?: ReactNode;
     variant?: 'info' | 'warning' | 'success' | 'error' | 'danger';
 }
@@ -29,7 +28,7 @@ export interface DescriptionListProps {
     direction?: 'row' | 'column';
 }
 export interface DividerProps {
-    distance?: 'flush' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
+    distance?: AllDistances;
 }
 export interface EmptyStateProps {
     flush?: boolean;
@@ -61,21 +60,22 @@ export interface ImageProps {
     src: string;
     width?: number;
 }
-export interface InputProps {
+export interface InputProps<T = string> {
     label: string;
     name: string;
-    value?: string;
+    value?: T;
     required?: boolean;
     readOnly?: boolean;
     description?: string;
     tooltip?: string;
     placeholder?: string;
     error?: boolean;
+    defaultValue?: T;
     validationMessage?: string;
-    onChange?: (value: string) => void;
-    onInput?: (value: string) => void;
-    onBlur?: (value: string) => void;
-    onFocus?: (value: string) => void;
+    onChange?: (value: T) => void;
+    onInput?: (value: T) => void;
+    onBlur?: (value: T) => void;
+    onFocus?: (value: T) => void;
 }
 export interface TextareaProps extends InputProps {
     cols?: number;
@@ -83,6 +83,12 @@ export interface TextareaProps extends InputProps {
     rows?: number;
     resize?: 'vertical' | 'horizontal' | 'both' | 'none';
 }
+export interface NumberInputProps extends InputProps<number> {
+    min?: number;
+    max?: number;
+    precision?: number;
+    formatStyle?: 'decimal' | 'percentage';
+}
 export interface ProgressBarProps {
     title?: string;
     showPercentage?: boolean;
@@ -194,9 +200,12 @@ export interface Context {
     portal: PortalContext;
 }
 export interface StackProps {
-    distance?: 'flush' | 'small' | 'extra-small' | 'medium' | 'large';
+    distance?: AllDistances;
     children?: React.ReactNode;
     direction?: 'row' | 'column';
+    justify?: 'center' | 'end' | 'start';
+    align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+    width?: 'auto' | '100%';
 }
 export interface StatisticsTrendProps {
     value: string;
@@ -310,10 +319,12 @@ export interface CrmMiddleExtensionPoint extends ExtensionPointContract {
         CrmDataHighlight: ComponentType<CrmDataHighlightProps>;
         CrmReport: ComponentType<CrmReportProps>;
         CrmAssociationPivot: ComponentType<CrmAssociationPivotProps>;
+        CrmObjectProperty?: ComponentType<CrmObjectPropertyProps>;
+        CrmAssociationPropertyList?: ComponentType<CrmAssociationPropertyListProps>;
     };
 }
 export interface CrmDataHighlightProps {
-    properties: string[];
+    properties: Array<string>;
     objectTypeId?: string;
     objectId?: number;
 }
@@ -321,17 +332,22 @@ export interface CrmReportProps {
     reportId: string;
 }
 export interface CrmPropertyListProps {
-    properties: string[];
+    properties: Array<string>;
     direction?: string;
     objectTypeId?: string;
     objectId?: number;
 }
+export interface CrmObjectPropertyProps {
+    properties: Array<string>;
+    objectTypeId?: string;
+    objectId?: number;
+}
 type CrmSortDescriptor = {
     columnName: string;
     direction: 1 | -1;
 };
 interface CrmSearchFilter {
-    operator: 'EQ' | 'NEQ' | 'LT' | 'LTE' | 'GT' | 'GTE' | 'BETWEEN' | 'IN' | 'NOT_IN' | 'HAS_PROPERTY' | 'NOT_HAS_PROPERTY' | 'ROLLING_DATE_RANGE' | 'TIME_UNIT_TO_DATE';
+    operator: 'EQ' | 'NEQ' | 'LT' | 'LTE' | 'GT' | 'GTE' | 'BETWEEN' | 'IN' | 'NOT_IN' | 'HAS_PROPERTY' | 'NOT_HAS_PROPERTY';
     value?: string | number;
     values?: string | number;
     highValue?: string | number;
@@ -354,6 +370,13 @@ export interface CrmAssociationPivotProps {
     preFilters?: Array<CrmSearchFilter>;
     sort?: Array<CrmSortDescriptor>;
 }
+export interface CrmAssociationPropertyListProps {
+    objectTypeId: string;
+    properties: Array<string>;
+    associationLabels?: Array<string>;
+    filters?: Array<CrmSearchFilter>;
+    sort?: Array<CrmSortDescriptor>;
+}
 interface CrmSidebarExtensionPoint extends ExtensionPointContract {
     actions: {
         reloadPage: ReloadPageAction;
@@ -391,7 +414,7 @@ interface OpenIframeActionPayload {
 export interface LoadingSpinnerProps {
     label: string;
     showLabel?: boolean;
-    size?: 'xs' | 'sm' | 'md';
+    size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
     layout?: 'inline' | 'centered';
 }
 export interface TableElementProps {
@@ -430,4 +453,18 @@ export interface LinkProps {
 export type JsonValue = string | number | boolean | null | JsonValue[] | {
     [key: string]: JsonValue;
 };
+export interface BoxProps {
+    children: ReactNode;
+    grow?: boolean;
+    alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch' | 'auto';
+}
+interface TShirtSizes {
+    xs: 'extra-small' | 'xs';
+    sm: 'small' | 'sm';
+    md: 'medium' | 'md';
+    lg: 'large' | 'lg';
+    xl: 'extra-large' | 'xl';
+}
+export type AllSizes = TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'] | TShirtSizes['xl'];
+export type AllDistances = 'flush' | AllSizes;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.0.1-beta.0",
+  "version": "0.0.1-beta.1",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -48,5 +48,5 @@
   "devDependencies": {
     "typescript": "5.0.4"
   },
-  "gitHead": "0bfb66cacc456a73f05a40841938e6b42f87aaba"
+  "gitHead": "3b1fd0b35b8aa6c88847d27cc3c6b94e635f0452"
 }