@connectif/ui-components 8.0.0 → 8.1.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [8.1.0] - 2026-05-08
+
+### Added
+
+- Added `onMouseMove` prop to `ListItemButton` component
+- Added theme support to `ToggleButton` and `ToggleButtonGroup`
+- Added theme support to `LinearProgress`
+- Added `hideText` prop to `PageSelector` component to hide the text label
+- Added `DateRangePicker` component, extracted from the `input` variant of `DateIntervalPicker`
+
+### Changed
+
+- Changed the `Select` component dropdown menu to automatically limit its width to match the select box width
+- `PageSelector` now shows a default internationalized text ("Showing **X-Y** of Z") when no `text` prop is provided, with translations in English, Spanish, French, Italian, and Portuguese
+
+### Fixed
+
+- Fixed some minor issues with padding, scrolling and keyboard events of `Select` component when virtualization is enabled
+
 ## [8.0.0] - 2026-04-29
 
 ### Added

package/dist/components/alert/Alert.d.ts

@@ -1,7 +1,9 @@
 import { AlertProps as MuiAlertProps } from '@mui/material';
 import { IconId } from '../icon/Icon';
-type Severity = 'success' | 'info' | 'error' | 'warning';
-type Variant = 'transparent' | 'filled';
+export declare const alertSeverities: readonly ["success", "info", "error", "warning"];
+export type AlertSeverity = (typeof alertSeverities)[number];
+export declare const alertVariants: readonly ["transparent", "filled"];
+export type AlertVariant = (typeof alertVariants)[number];
 export type AlertProps = Pick<MuiAlertProps, 'children' | 'sx'> & {
     /**
      * Optional title of this alert
@@ -10,11 +12,11 @@ export type AlertProps = Pick<MuiAlertProps, 'children' | 'sx'> & {
     /**
      * Severity of this alert
      */
-    severity?: Severity;
+    severity?: AlertSeverity;
     /**
      * Variant of this alert
      */
-    variant?: Variant;
+    variant?: AlertVariant;
     /**
      * Id of icon to display inside the component. Not used if severity is set.
      */

package/dist/components/avatar/Avatar.d.ts

@@ -38,11 +38,15 @@ export declare const sizes: {
         readonly iconSize: "XXL";
     };
 };
+export declare const avatarSizes: (keyof typeof sizes)[];
+export type AvatarSize = (typeof avatarSizes)[number];
+export declare const avatarVariants: readonly ["circular", "rounded", "squared"];
+export type AvatarVariant = (typeof avatarVariants)[number];
 export type AvatarProps = Pick<MuiAvatarProps, 'src' | 'sx'> & {
     /**
      * Size of the button.
      */
-    size?: 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL' | 'XXXL';
+    size?: AvatarSize;
     /**
      * Avatar letters when src is undefined. Max length two characters.
      */
@@ -54,7 +58,7 @@ export type AvatarProps = Pick<MuiAvatarProps, 'src' | 'sx'> & {
     /**
      * The style of this Avatar. It controls how round-corned it is.
      */
-    variant?: 'circular' | 'rounded' | 'squared';
+    variant?: AvatarVariant;
     /**
      * Classes of this avatar
      */
@@ -70,7 +74,7 @@ declare const Avatar: React.ForwardRefExoticComponent<Pick<MuiAvatarProps, "sx"
     /**
      * Size of the button.
      */
-    size?: "XS" | "S" | "M" | "L" | "XL" | "XXL" | "XXXL";
+    size?: AvatarSize;
     /**
      * Avatar letters when src is undefined. Max length two characters.
      */
@@ -82,7 +86,7 @@ declare const Avatar: React.ForwardRefExoticComponent<Pick<MuiAvatarProps, "sx"
     /**
      * The style of this Avatar. It controls how round-corned it is.
      */
-    variant?: "circular" | "rounded" | "squared";
+    variant?: AvatarVariant;
     /**
      * Classes of this avatar
      */

package/dist/components/button/Button.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ButtonProps as MuiButtonProps } from '@mui/material/Button';
-import { IconId, iconSizes } from '../icon/Icon';
+import { IconId, IconSize } from '../icon/Icon';
 import { SxProps } from '@mui/material';
 import { CustomTheme } from '../../theme/CustomTheme';
 export declare const colorStyles: (theme: CustomTheme) => {
@@ -61,23 +61,32 @@ export declare const colorStyles: (theme: CustomTheme) => {
         readonly warning: SxProps;
     };
 };
+export declare const buttonVariants: readonly ["contained", "outlined", "text"];
+type ButtonVariant = (typeof buttonVariants)[number];
+export declare const buttonColors: readonly ["primary", "inherit", "white", "warning"];
+type ButtonColor = (typeof buttonColors)[number];
+export declare const buttonSizes: readonly ["M", "L", "XL"];
+type ButtonSize = (typeof buttonSizes)[number];
+export declare const buttonComponents: readonly ["button", "label"];
+type ButtonComponent = (typeof buttonComponents)[number];
+export declare const buttonTypes: readonly ["button", "submit", "reset"];
 export type ButtonProps = Pick<MuiButtonProps, 'id' | 'disabled' | 'onClick' | 'aria-controls' | 'aria-haspopup' | 'aria-expanded' | 'sx' | 'type' | 'className' | 'onMouseEnter' | 'onMouseLeave'> & {
     /**
      * The variant of the button.
      */
-    variant?: 'contained' | 'outlined' | 'text';
+    variant?: ButtonVariant;
     /**
      * The color of the button.
      */
-    color?: 'primary' | 'inherit' | 'white' | 'warning';
+    color?: ButtonColor;
     /**
      * Size of the button.
      */
-    size?: 'M' | 'L' | 'XL';
+    size?: ButtonSize;
     /**
      * Raw HTML component used to render this Button;
      */
-    component?: 'label' | 'button';
+    component?: ButtonComponent;
     /**
      * The text to display in the button.
      */
@@ -93,7 +102,7 @@ export type ButtonProps = Pick<MuiButtonProps, 'id' | 'disabled' | 'onClick' | '
     /**
      * The identifier of the icon size to display in the button.
      */
-    iconSize?: keyof typeof iconSizes;
+    iconSize?: IconSize;
     /**
      * Whether the button must have the icon at the end.
      */
@@ -128,19 +137,19 @@ declare const Button: React.ForwardRefExoticComponent<Pick<MuiButtonProps, "id"
     /**
      * The variant of the button.
      */
-    variant?: "contained" | "outlined" | "text";
+    variant?: ButtonVariant;
     /**
      * The color of the button.
      */
-    color?: "primary" | "inherit" | "white" | "warning";
+    color?: ButtonColor;
     /**
      * Size of the button.
      */
-    size?: "M" | "L" | "XL";
+    size?: ButtonSize;
     /**
      * Raw HTML component used to render this Button;
      */
-    component?: "label" | "button";
+    component?: ButtonComponent;
     /**
      * The text to display in the button.
      */
@@ -156,7 +165,7 @@ declare const Button: React.ForwardRefExoticComponent<Pick<MuiButtonProps, "id"
     /**
      * The identifier of the icon size to display in the button.
      */
-    iconSize?: keyof typeof iconSizes;
+    iconSize?: IconSize;
     /**
      * Whether the button must have the icon at the end.
      */

package/dist/components/button/ButtonGroup.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+export declare const buttonGroupVariants: readonly ["default", "transparent"];
+type ButtonGroupVariant = (typeof buttonGroupVariants)[number];
 export type ButtonGroupProps = {
     /**
      * The buttons to show in the group. It should be `Button`, `IconButton`, `MenuButton` or `MenuIconButton`.
@@ -8,7 +10,7 @@ export type ButtonGroupProps = {
      * Variant to show button group.
      * @default default
      */
-    variant?: 'default' | 'transparent';
+    variant?: ButtonGroupVariant;
     /**
      * Determines if the button group is full width or not.
      */

package/dist/components/button/ButtonWithActions.d.ts

@@ -3,6 +3,8 @@ import { ButtonProps as MuiButtonProps } from '@mui/material/Button';
 import { ButtonProps } from './Button';
 import { PopoverProps } from '../popover';
 import { ListItemButtonProps } from '../list';
+export declare const buttonWithActionsOptionsPlacements: readonly ["top", "bottom"];
+type ButtonWithActionsOptionsPlacement = (typeof buttonWithActionsOptionsPlacements)[number];
 export type ButtonWithActionsProps = ButtonProps & Pick<PopoverProps, 'anchorHorizontalOrigin' | 'horizontalAlign'> & {
     /**
      * The options to show in button submenu
@@ -15,7 +17,7 @@ export type ButtonWithActionsProps = ButtonProps & Pick<PopoverProps, 'anchorHor
     /**
      * Placement of options popover
      */
-    optionsPlacement?: 'top' | 'bottom';
+    optionsPlacement?: ButtonWithActionsOptionsPlacement;
     /**
      * Called when the options popover is closed by Escape key, Tab key or click outside.
      */
@@ -30,14 +32,14 @@ export type ButtonWithActionsProps = ButtonProps & Pick<PopoverProps, 'anchorHor
  * All supported children types of this component are: Button, IconButton, MenuButton or MenuIconButton.
  */
 declare const ButtonWithActions: React.ForwardRefExoticComponent<Pick<MuiButtonProps, "id" | "className" | "aria-controls" | "aria-expanded" | "aria-haspopup" | "sx" | "disabled" | "type" | "onClick" | "onMouseEnter" | "onMouseLeave"> & {
-    variant?: "contained" | "outlined" | "text";
-    color?: "primary" | "inherit" | "white" | "warning";
+    variant?: "text" | "outlined" | "contained";
+    color?: "inherit" | "white" | "primary" | "warning";
     size?: "M" | "L" | "XL";
     component?: "label" | "button";
     text: string;
     iconId?: import("../icon").IconId;
     icon?: React.ReactNode;
-    iconSize?: keyof typeof import("../icon").iconSizes;
+    iconSize?: import("../icon/Icon").IconSize;
     iconEnd?: boolean;
     badgeText?: string;
     badgeLeft?: boolean;
@@ -56,7 +58,7 @@ declare const ButtonWithActions: React.ForwardRefExoticComponent<Pick<MuiButtonP
     /**
      * Placement of options popover
      */
-    optionsPlacement?: "top" | "bottom";
+    optionsPlacement?: ButtonWithActionsOptionsPlacement;
     /**
      * Called when the options popover is closed by Escape key, Tab key or click outside.
      */

package/dist/components/button/IconButton.d.ts

@@ -31,6 +31,12 @@ declare const sizes: {
         readonly iconSize: "M";
     };
 };
+export declare const iconButtonSizes: (keyof typeof sizes)[];
+type IconButtonSize = (typeof iconButtonSizes)[number];
+export declare const iconButtonVariants: readonly ["contained", "default", "primary", "outlined"];
+type IconButtonVariant = (typeof iconButtonVariants)[number];
+export declare const iconButtonShapes: readonly ["default", "square"];
+type IconButtonShape = (typeof iconButtonShapes)[number];
 export type IconButtonProps = Pick<MuiIconButtonProps, 'disabled' | 'onClick' | 'sx' | 'id' | 'onMouseDown' | 'className'> & {
     /**
      * The identifier of the icon to display.
@@ -39,7 +45,7 @@ export type IconButtonProps = Pick<MuiIconButtonProps, 'disabled' | 'onClick' |
     /**
      * Size of the button.
      */
-    size?: keyof typeof sizes;
+    size?: IconButtonSize;
     /**
      * Settled directly in DOM element, for testing easy location purposes.
      */
@@ -47,11 +53,11 @@ export type IconButtonProps = Pick<MuiIconButtonProps, 'disabled' | 'onClick' |
     /**
      * The variant of the button.
      */
-    variant?: 'contained' | 'default' | 'primary' | 'outlined';
+    variant?: IconButtonVariant;
     /**
      * The shape of the button.
      */
-    shape?: 'default' | 'square';
+    shape?: IconButtonShape;
     /**
      * Disable ripple effect
      */
@@ -65,7 +71,7 @@ declare const IconButton: React.ForwardRefExoticComponent<Pick<MuiIconButtonProp
     /**
      * Size of the button.
      */
-    size?: keyof typeof sizes;
+    size?: IconButtonSize;
     /**
      * Settled directly in DOM element, for testing easy location purposes.
      */
@@ -73,11 +79,11 @@ declare const IconButton: React.ForwardRefExoticComponent<Pick<MuiIconButtonProp
     /**
      * The variant of the button.
      */
-    variant?: "contained" | "default" | "primary" | "outlined";
+    variant?: IconButtonVariant;
     /**
      * The shape of the button.
      */
-    shape?: "default" | "square";
+    shape?: IconButtonShape;
     /**
      * Disable ripple effect
      */

package/dist/components/button/IconToggleButton.d.ts

@@ -1,8 +1,36 @@
 import * as React from 'react';
 import { ToggleButtonProps as MuiToggleButtonProps } from '@mui/material/ToggleButton';
 import { IconId } from '../icon/Icon';
-type IconToggleButtonVariant = 'default' | 'square' | 'square-outlined';
+declare const sizes: {
+    readonly XS: {
+        readonly side: 20;
+        readonly iconSize: "XS";
+    };
+    readonly S: {
+        readonly side: 24;
+        readonly iconSize: "S";
+    };
+    readonly M: {
+        readonly side: 32;
+        readonly iconSize: "M";
+    };
+    readonly L: {
+        readonly side: 40;
+        readonly iconSize: "M";
+    };
+    readonly XL: {
+        readonly side: 48;
+        readonly iconSize: "M";
+    };
+};
+export declare const iconToggleButtonSizes: (keyof typeof sizes)[];
+type IconToggleButtonSize = (typeof iconToggleButtonSizes)[number];
+export declare const iconToggleButtonVariants: readonly ["default", "square", "square-outlined"];
+type IconToggleButtonVariant = (typeof iconToggleButtonVariants)[number];
 export type IconToggleButtonProps = Pick<MuiToggleButtonProps, 'disabled' | 'onClick' | 'sx' | 'selected'> & {
+    /**
+     * Variant to show the IconToggleButton.
+     */
     variant?: IconToggleButtonVariant;
     /**
      * The identifier of the icon to display at the start of the button.
@@ -11,13 +39,20 @@ export type IconToggleButtonProps = Pick<MuiToggleButtonProps, 'disabled' | 'onC
     /**
      * Size of the button.
      */
-    size?: 'XS' | 'S' | 'M' | 'L' | 'XL';
+    size?: IconToggleButtonSize;
     /**
      * The value to associate with the button when selected.
      */
     value?: string;
 };
-declare const _default: React.ForwardRefExoticComponent<Pick<MuiToggleButtonProps, "sx" | "disabled" | "onClick" | "selected"> & {
+/**
+ * A component that displays an IconToggleButton whit an icon inside.
+ * It can be disabled.
+ */
+declare const IconToggleButton: React.ForwardRefExoticComponent<Pick<MuiToggleButtonProps, "sx" | "disabled" | "onClick" | "selected"> & {
+    /**
+     * Variant to show the IconToggleButton.
+     */
     variant?: IconToggleButtonVariant;
     /**
      * The identifier of the icon to display at the start of the button.
@@ -26,10 +61,10 @@ declare const _default: React.ForwardRefExoticComponent<Pick<MuiToggleButtonProp
     /**
      * Size of the button.
      */
-    size?: "XS" | "S" | "M" | "L" | "XL";
+    size?: IconToggleButtonSize;
     /**
      * The value to associate with the button when selected.
      */
     value?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
-export default _default;
+export default IconToggleButton;

package/dist/components/button/MenuButton.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { ButtonProps } from './Button';
 import { PopoverProps } from '../popover';
+export declare const menuButtonPlacements: readonly ["top", "bottom"];
+type MenuButtonPlacement = (typeof menuButtonPlacements)[number];
 export type MenuButtonProps = Omit<ButtonProps, 'children' | 'component'> & Pick<PopoverProps, 'anchorHorizontalOrigin' | 'horizontalAlign'> & {
     /**
      * The list of menu items to display.
@@ -16,10 +18,10 @@ export type MenuButtonProps = Omit<ButtonProps, 'children' | 'component'> & Pick
      */
     removeIcon?: boolean;
     /**
-     * To show menu on the top of de button.
+     * To show menu on the top of the button.
      * @default bottom
      */
-    placement?: 'top' | 'bottom';
+    placement?: MenuButtonPlacement;
     /**
      * Called when the menuIconButton is closed by Escape key, Tab key or click outside.
      */
@@ -44,10 +46,10 @@ declare const MenuButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "chi
      */
     removeIcon?: boolean;
     /**
-     * To show menu on the top of de button.
+     * To show menu on the top of the button.
      * @default bottom
      */
-    placement?: "top" | "bottom";
+    placement?: MenuButtonPlacement;
     /**
      * Called when the menuIconButton is closed by Escape key, Tab key or click outside.
      */

package/dist/components/button/MenuIconButton.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { IconButtonProps } from './IconButton';
 import { PopoverProps } from '../popover/Popover';
 import { SxProps } from '@mui/material';
+export declare const menuIconButtonPlacements: readonly ["top", "bottom"];
+type MenuIconButtonPlacement = (typeof menuIconButtonPlacements)[number];
 export type MenuIconButtonProps = IconButtonProps & Pick<PopoverProps, 'anchorHorizontalOrigin' | 'horizontalAlign'> & {
     /**
      * The list of menu items to display.
@@ -12,10 +14,10 @@ export type MenuIconButtonProps = IconButtonProps & Pick<PopoverProps, 'anchorHo
      */
     isOpen?: boolean;
     /**
-     * To show menu on the top of de button.
+     * To show menu on the top of the button.
      * @default bottom
      */
-    placement?: 'top' | 'bottom';
+    placement?: MenuIconButtonPlacement;
     /**
      * Called when the menuIconButton is closed by Escape key, Tab key or click outside.
      */
@@ -41,7 +43,7 @@ declare const MenuIconButton: React.ForwardRefExoticComponent<Pick<import("@mui/
     iconId: import("..").IconId;
     size?: "XXS" | "XS" | "S" | "M" | "L" | "XL" | "ML";
     'data-test'?: string;
-    variant?: "contained" | "default" | "primary" | "outlined";
+    variant?: "default" | "outlined" | "contained" | "primary";
     shape?: "default" | "square";
     disableInteractionEffects?: boolean;
 } & Pick<PopoverProps, "horizontalAlign" | "anchorHorizontalOrigin"> & {
@@ -54,10 +56,10 @@ declare const MenuIconButton: React.ForwardRefExoticComponent<Pick<import("@mui/
      */
     isOpen?: boolean;
     /**
-     * To show menu on the top of de button.
+     * To show menu on the top of the button.
      * @default bottom
      */
-    placement?: "top" | "bottom";
+    placement?: MenuIconButtonPlacement;
     /**
      * Called when the menuIconButton is closed by Escape key, Tab key or click outside.
      */

package/dist/components/button/ToggleButton.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ToggleButtonProps as MuiToggleButtonProps } from '@mui/material/ToggleButton';
 import { IconId } from '../icon/Icon';
+export declare const toggleButtonTypes: readonly ["button", "submit", "reset"];
 export type ToggleButtonProps = Pick<MuiToggleButtonProps, 'children' | 'id' | 'disabled' | 'onClick' | 'aria-controls' | 'aria-haspopup' | 'aria-expanded' | 'sx' | 'type' | 'selected' | 'onChange'> & {
     /**
      * The identifier of the icon to display at the start of the button.

package/dist/components/button/ToggleButton.theme.d.ts

@@ -1,2 +1,3 @@
-import { Components, Theme } from '@mui/material';
-export declare const toggleButtonTheme: Components<Theme>['MuiToggleButton'];
+import { Components } from '@mui/material';
+import { CustomTheme } from '../../theme/CustomTheme';
+export declare const toggleButtonTheme: Components<CustomTheme>['MuiToggleButton'];

package/dist/components/card/Card.d.ts

@@ -1,11 +1,19 @@
 import * as React from 'react';
 import { CardProps as MuiCardProps } from '@mui/material/Card';
 import { SxProps } from '@mui/material';
+declare const sizeWidths: {
+    readonly sm: "170px";
+    readonly md: "270px";
+    readonly lg: "330px";
+    readonly xl: "400px";
+};
+export declare const cardSizes: (keyof typeof sizeWidths)[];
+type CardSize = (typeof cardSizes)[number];
 export type CardProps = React.PropsWithChildren<{
     /**
      * The size of the card.
      */
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    size?: CardSize;
     /**
      * Whether the card is selected.
      */

package/dist/components/card/CardImage.d.ts

@@ -2,6 +2,8 @@ declare const imageHeights: {
     readonly sm: "104px";
     readonly md: "130px";
 };
+export declare const cardImageSizes: (keyof typeof imageHeights)[];
+type CardImageSize = (typeof cardImageSizes)[number];
 export type CardImageProps = {
     /**
      * The URL of the image to display.
@@ -10,7 +12,7 @@ export type CardImageProps = {
     /**
      * The size of the image.
      */
-    size?: keyof typeof imageHeights;
+    size?: CardImageSize;
 };
 /**
  * A component that displays an image within a Card.

package/dist/components/card/EnhancedCard.d.ts

@@ -11,7 +11,10 @@ export interface EnhancedCardCompound extends React.ForwardRefExoticComponent<En
     Subtitle: React.FC<EnhancedCardSubtitleProps>;
     Row: React.FC<EnhancedCardRowProps>;
 }
-export type EnhancedCardSize = 'S' | 'M' | 'L' | 'XL' | 'XXL';
+export declare const enhancedCardVariants: readonly ["default", "selectable"];
+type EnhancedCardVariant = (typeof enhancedCardVariants)[number];
+export declare const enhancedCardSizes: readonly ["S", "M", "L", "XL", "XXL"];
+export type EnhancedCardSize = (typeof enhancedCardSizes)[number];
 type Action = {
     iconId: IconId;
     text?: string;
@@ -24,7 +27,7 @@ export type EnhancedCardProps = React.PropsWithChildren<{
     /**
      * Variant of the card.'
      */
-    variant?: 'default' | 'selectable';
+    variant?: EnhancedCardVariant;
     /**
      * Tooltip of the card
      */

package/dist/components/chart/IncrementLabel.d.ts

@@ -1,13 +1,16 @@
 import { SxProps } from '@mui/material';
 import { IconId } from '../icon/Icon';
-import { TypographyProps } from '../typography/Typography';
+export declare const incrementLabelTypographyVariants: readonly ["h5", "caption", "body2", "overline"];
+type IncrementLabelTypographyVariant = (typeof incrementLabelTypographyVariants)[number];
+export declare const incrementLabelIconSizes: readonly ["XS", "S", "M"];
+type IncrementLabelIconSize = (typeof incrementLabelIconSizes)[number];
 export type IncrementLabelProps = {
     label: string;
-    typographyVariant: Extract<TypographyProps['variant'], 'h5' | 'caption' | 'body2' | 'overline'>;
+    typographyVariant: IncrementLabelTypographyVariant;
     color?: string;
     backgroundColor?: string;
     iconId?: IconId;
-    iconSize?: 'XS' | 'S' | 'M';
+    iconSize?: IncrementLabelIconSize;
     /**
      * The `SxProps` can be either object or function
      */

package/dist/components/chart/LineChart.d.ts

@@ -4,6 +4,8 @@ import ReactEChartsCore from 'echarts-for-react/lib/core';
 import { CategorizedChartProps } from './CategorizedChartProps';
 import { IconId } from '../icon/Icon';
 import { IncrementLabelType } from '../../propTypes/IncrementLabel';
+export declare const lineChartYAxisPositions: readonly ["left", "right"];
+type LineChartYAxisPosition = (typeof lineChartYAxisPositions)[number];
 export type LineChartProps = CategorizedChartProps & {
     /**
      * The series to display in the chart.
@@ -103,7 +105,7 @@ export type LineChartProps = CategorizedChartProps & {
     /**
      * Option to set the position of the Y axis when there is only one.
      */
-    yAxisPosition?: 'left' | 'right';
+    yAxisPosition?: LineChartYAxisPosition;
     /**
      * Rotation angle in degrees for X-axis labels to prevent overlapping.
      * Positive values rotate to the right, negative values rotate to the left.

package/dist/components/chat/ChatMessage.d.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { TypographyProps } from '../typography/Typography';
+export declare const chatMessageTypes: readonly ["incoming", "outgoing"];
+type ChatMessageType = (typeof chatMessageTypes)[number];
 export type ChatMessageProps = {
     /**
      * Message type, messages send by user will be outgoing and responses will be incoming.
      *
      */
-    messageType: 'incoming' | 'outgoing';
+    messageType: ChatMessageType;
     /**
      * Chat message children.
      */