@nimbus-ds/patterns 1.36.0-rc.1 → 1.36.0-rc.3

package/dist/index.d.ts

@@ -0,0 +1,1694 @@
+// Generated by dts-bundle-generator v8.1.2
+
+import { DndContextProps, DragEndEvent, DragOverEvent, DragOverlayProps, DragStartEvent, DraggableAttributes, PointerSensorOptions, UniqueIdentifier } from '@dnd-kit/core';
+import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
+import { BoxBaseProps, BoxProperties, BoxProps, ButtonProperties, ButtonProps, CheckboxProperties, CheckboxProps, IconButtonProperties, IconButtonProps, InputProperties, InputProps, PaginationProperties, PaginationProps, PopoverPlacement, PopoverProperties, RadioProps, SelectProperties, SelectProps, SidebarProperties, TableCellProps, TableProperties, TableRowProperties, TextareaProperties, TextareaProps, ThumbnailProperties, ThumbnailProps, ToggleProperties, ToggleProps } from '@nimbus-ds/components';
+import { IconProps } from '@nimbus-ds/icons';
+import { PolymorphicForwardRefComponent } from '@nimbus-ds/typings';
+import React from 'react';
+import { ButtonHTMLAttributes, CSSProperties, ComponentProps, ComponentPropsWithRef, Dispatch, FC, HTMLAttributes, MouseEvent, MouseEventHandler, PropsWithChildren, ReactElement, ReactNode, SetStateAction } from 'react';
+import { DayPicker } from 'react-day-picker';
+
+export interface AppShellHeaderProperties {
+	/**
+	 * Optional content for the left-hand-side slot.
+	 * @TJS-type React.ReactNode
+	 */
+	leftSlot?: ReactNode;
+	/**
+	 * Optional content for the right-hand-side slot.
+	 * @TJS-type React.ReactNode
+	 */
+	rightSlot?: ReactNode;
+}
+export type AppShellHeaderProps = AppShellHeaderProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & Omit<BoxProperties, "display" | "justifyContent" | "position" | "top">;
+declare const AppShellHeader: React.FC<AppShellHeaderProps>;
+export type AppShellBodyProps = Omit<BoxProps, "display" | "flex">;
+declare const AppShellBody: React.FC<AppShellBodyProps>;
+/**
+ * Properties specific to the AppShellChat component.
+ */
+export interface AppShellChatProperties {
+	/**
+	 * Default expanded state for uncontrolled usage.
+	 */
+	defaultExpanded?: boolean;
+	/**
+	 * Whether the chat panel is expanded to overlay mode, filling the parent container area.
+	 * The overlay auto-detects the parent bounds (respecting menu and header).
+	 */
+	expanded?: boolean;
+	/**
+	 * Width of the chat panel in collapsed (non-expanded) mode.
+	 * Accepts any valid CSS length value (e.g. "300px", "25vw").
+	 * Useful for consumer-controlled resize interactions such as a drag handle.
+	 * Defaults to "300px".
+	 */
+	collapsedWidth?: string;
+}
+export type AppShellChatProps = AppShellChatProperties & Omit<BoxProps, "position">;
+export declare const APPSHELL_CHAT_DEFAULT_WIDTH = "300px";
+declare const AppShellChat: React.FC<AppShellChatProps>;
+export interface AppShellComponents {
+	Header: typeof AppShellHeader;
+	Body: typeof AppShellBody;
+	Chat: typeof AppShellChat;
+}
+/**
+ * Configuration options for the AppShell flyout (popover) behavior when the menu is collapsed.
+ * This consolidates all popover-related props into a single object for simpler usage,
+ * while keeping individual top-level props for backward compatibility.
+ */
+export type AppShellMenuFlyoutOptions = {
+	/** How the popover opens. Defaults to 'manual'. */
+	trigger?: "hover" | "manual";
+	/** Controlled open state for the flyout. */
+	open?: boolean;
+	/** Uncontrolled initial open state for the flyout. */
+	defaultOpen?: boolean;
+	/** Callback when the open state should change. */
+	onOpenChange?: (open: boolean) => void;
+	/** Hover open delay in ms (only when trigger is 'hover'). */
+	hoverOpenDelayMs?: number;
+	/** Hover close delay in ms (only when trigger is 'hover'). */
+	hoverCloseDelayMs?: number;
+};
+export interface AppShellProperties {
+	/**
+	 * Content for the body of the application.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Optional slot for left sidebar menu.
+	 * @TJS-type React.ReactNode
+	 */
+	menu?: ReactNode;
+	/**
+	 * Can be used to control the responsive properties of the AppShell menu so you can change which breakpoint the menu hides under.
+	 */
+	menuProperties?: Omit<BoxBaseProps, "children" | "width" | "height" | "position" | "top" | "left" | "right" | "bottom" | "borderStyle" | "borderWidth" | "borderColor" | "borderRightWidth" | "transitionProperty" | "transitionDuration" | "transitionTimingFunction" | "flexShrink" | "ref">;
+	/**
+	 * Controls whether the left sidebar (menu) is expanded (true) or collapsed (false). Defaults to true.
+	 */
+	menuExpanded?: boolean;
+	/**
+	 * Sidebar width when expanded. Defaults to "240px".
+	 */
+	menuExpandedWidth?: BoxBaseProps["width"];
+	/**
+	 * Sidebar width when collapsed (rail). If provided, the sidebar will render in a compact rail while collapsed. Defaults to "48px".
+	 */
+	menuCollapsedWidth?: BoxBaseProps["width"];
+	/**
+	 * Determines how the left sidebar behaves when collapsed.
+	 * - 'inline': current behavior; width changes affect layout.
+	 * - 'popover': when collapsed, hovering or clicking the rail shows the expanded menu as an overlay without affecting layout.
+	 */
+	menuBehavior?: "inline" | "popover";
+	/**
+	 * Consolidated configuration for the popover/flyout behavior when `menuBehavior` is 'popover'.
+	 */
+	menuFlyout?: AppShellMenuFlyoutOptions;
+	/**
+	 * Consolidated configuration for the content container.
+	 */
+	contentProperties?: BoxBaseProps;
+}
+export type AppShellProps = AppShellProperties & {
+	menuFlyout?: AppShellMenuFlyoutOptions & Omit<BoxProps, "position" | "top" | "left" | "right" | "bottom" | "height" | "zIndex">;
+} & Omit<HTMLAttributes<HTMLElement>, "color">;
+export declare const AppShell: React.FC<AppShellProps> & AppShellComponents;
+/**
+ * Context value for AppShell's menu render mode.
+ */
+export type AppShellMenuContextValue = {
+	/** Useful boolean to know if the menu is rendered as a popover/flyout. */
+	isMenuPopover: boolean;
+};
+/**
+ * Read AppShellMenuContext state. Useful to know if the menu is rendered as a popover/flyout.
+ * @param enforce When false, returns a default value (false) if no provider is present. Adviced not to abuse, but useful for menu that Menu components that aren't always inside an AppShell.
+ * @throws If `enforce=true` and used without a provider.
+ */
+export declare const useAppShellMenuContext: (enforce?: boolean) => AppShellMenuContextValue;
+export interface CalloutCardProperties {
+	/**
+	 * CalloutCard color.
+	 */
+	appearance: "primary" | "success" | "warning" | "danger" | "neutral";
+	/**
+	 * The SVG contents to display in the Icon.
+	 * @TJS-type React.FC<IconProps>
+	 */
+	icon: FC<IconProps>;
+	/**
+	 * Title.
+	 */
+	title: string;
+	/**
+	 * Subtitle.
+	 */
+	subtitle: string;
+	/**
+	 * Slot intended to position the Callout Card link correctly.
+	 * @TJS-type <Link />
+	 */
+	link?: ReactNode;
+	/**
+	 * Event fired when clicking the component.
+	 * @TJS-type () => void;
+	 */
+	onClick?: MouseEventHandler<HTMLElement>;
+}
+export type CalloutCardProps = CalloutCardProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+export declare const CalloutCard: React.FC<CalloutCardProps>;
+export interface DataListRowProperties {
+	/**
+	 * Optional padding for the row.
+	 * @default base
+	 */
+	padding?: "small" | "base" | "none";
+	/**
+	 * Optional padding bottom for the row.
+	 * @default base
+	 */
+	paddingBottom?: "small" | "base" | "none";
+	/**
+	 * Content of the row.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Determines if the row has a top border.
+	 * @default true
+	 */
+	topDivider?: boolean;
+}
+export type DataListRowProps = DataListRowProperties & Omit<BoxProperties, "padding"> & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const DataListRow: React.FC<DataListRowProps>;
+export interface DataListComponents {
+	Row: typeof DataListRow;
+}
+export interface DataListProperties {
+	/**
+	 * Content of the List component.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Defines whether the List has a bottom border.
+	 * @default true
+	 */
+	bottomDivider?: boolean;
+}
+export type DataListProps = DataListProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+export declare const DataList: React.FC<DataListProps> & DataListComponents;
+export interface DataTableBulkActionsProperties {
+	/**
+	 * Properties of the checkbox element rendered in the Bulk Actions component.
+	 */
+	checkbox: Omit<CheckboxProperties, "label" | "id">;
+	/**
+	 * Optional link element rendered next to the Bulk Actions controller.
+	 * @TJS-type <Link />
+	 */
+	link?: ReactNode;
+	/**
+	 * Action component that controls the Bulk Actions.
+	 * @TJS-type React.ReactNode
+	 */
+	action: ReactNode;
+	/**
+	 * Lable for the checkbox element.
+	 */
+	label: string;
+}
+export type DataTableBulkActionsProps = DataTableBulkActionsProperties & {
+	checkbox: Omit<CheckboxProps, "label" | "id">;
+} & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const DataTableBulkActions: React.FC<DataTableBulkActionsProps>;
+export interface DataTableCellProperties {
+	/**
+	 * Content of the List component.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type DataTableCellProps = DataTableCellProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & TableCellProps;
+declare const DataTableCell: React.FC<DataTableCellProps>;
+export interface DataTableDropdownProperties {
+	/**
+	 * Placeholder text displayed in the dropdown trigger button.
+	 */
+	placeholder: string;
+	/**
+	 * Content to be rendered inside the dropdown popover.
+	 * Typically DataTable.DropdownAction and DataTable.DropdownDivider components.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type DataTableDropdownProps = DataTableDropdownProperties & Omit<BoxProperties, "as" | "type" | "width" | "cursor" | "backgroundColor" | "boxShadow" | "borderWidth" | "borderStyle" | "borderColor" | "borderRadius" | "display" | "alignItems" | "justifyContent" | "gap" | "py" | "px">;
+declare const DataTableDropdown: React.FC<DataTableDropdownProps>;
+export interface DataTableDropdownActionProperties {
+	/**
+	 * Icon element to be displayed before the label.
+	 * @TJS-type React.ReactNode
+	 */
+	icon?: ReactNode;
+	/**
+	 * Text label for the action item.
+	 */
+	label: string;
+	/**
+	 * Click handler for the action.
+	 */
+	onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+	/**
+	 * Whether the action is disabled.
+	 */
+	disabled?: boolean;
+}
+export type DataTableDropdownActionProps = DataTableDropdownActionProperties & Omit<BoxProperties, "children" | "as" | "type" | "width" | "cursor" | "backgroundColor" | "boxShadow" | "borderWidth" | "borderStyle" | "borderColor" | "borderRadius" | "display" | "alignItems" | "justifyContent" | "gap" | "py" | "px" | "onClick">;
+declare const DataTableDropdownAction: React.FC<DataTableDropdownActionProps>;
+declare const DataTableDropdownDivider: React.FC;
+export interface DataTableDropdownSectionProperties {
+	/**
+	 * Content of the section body.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type DataTableDropdownSectionProps = DataTableDropdownSectionProperties & Omit<BoxProperties, "children" | "as" | "type" | "width" | "cursor" | "backgroundColor" | "boxShadow" | "borderWidth" | "borderStyle" | "borderColor" | "borderRadius" | "display" | "alignItems" | "justifyContent" | "gap" | "py" | "px">;
+declare const DataTableDropdownSection: React.FC<DataTableDropdownSectionProps>;
+export interface DataTableFooterProperties {
+	/**
+	 * Left-hand side text intended for displaying an item count.
+	 */
+	itemCount: string;
+	/**
+	 * Pagination element rendered on the right-side of the footer.
+	 */
+	pagination?: PaginationProperties;
+}
+export type DataTableFooterProps = DataTableFooterProperties & {
+	pagination?: PaginationProps;
+} & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const DataTableFooter: React.FC<DataTableFooterProps>;
+export interface DataTableHeaderProperties {
+	/**
+	 * Checkbox element rendered on the table header that controls all rows.
+	 */
+	checkbox: CheckboxProperties;
+	/**
+	 * Row content.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type DataTableHeaderProps = DataTableHeaderProperties & {
+	checkbox: CheckboxProps;
+} & HTMLAttributes<HTMLElement>;
+declare const DataTableHeader: React.FC<DataTableHeaderProps>;
+export interface DataTableRowProperties {
+	/**
+	 * Checkbox element rendered on the row that controls whether the row is selected.
+	 */
+	checkbox: CheckboxProperties;
+	/**
+	 * Content of the row.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type DataTableRowProps = DataTableRowProperties & {
+	checkbox: CheckboxProps;
+} & TableRowProperties & HTMLAttributes<HTMLElement>;
+declare const DataTableRow: React.FC<DataTableRowProps>;
+export interface DataTableComponents {
+	BulkActions: typeof DataTableBulkActions;
+	Cell: typeof DataTableCell;
+	Dropdown: typeof DataTableDropdown;
+	DropdownAction: typeof DataTableDropdownAction;
+	DropdownDivider: typeof DataTableDropdownDivider;
+	DropdownSection: typeof DataTableDropdownSection;
+	Footer: typeof DataTableFooter;
+	Header: typeof DataTableHeader;
+	Row: typeof DataTableRow;
+}
+export interface DataTableProperties {
+	/**
+	 * Bulk actions component rendered with a sticky position over the top of the table element.
+	 * @TJS-type React.ReactNode
+	 */
+	bulkActions?: ReactNode;
+	/**
+	 * Table header content.
+	 * @TJS-type React.ReactNode
+	 */
+	header: ReactNode;
+	/**
+	 * Optional table footer content.
+	 * @TJS-type React.ReactNode
+	 */
+	footer?: ReactNode;
+	/**
+	 * Table body content.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Props passed to the container box element.
+	 * @TJS-type BoxProps
+	 */
+	containerProps?: BoxProps;
+}
+export type DataTableProps = DataTableProperties & TableProperties & HTMLAttributes<HTMLElement>;
+export declare const DataTable: React.FC<DataTableProps> & DataTableComponents;
+export interface EmptyMessageProperties {
+	/**
+	 * Optional node that contains an illustration for the component. Will stack vertically on mobile and horizontally on desktop.
+	 * @TJS-type React.ReactNode
+	 */
+	illustration?: ReactNode;
+	/**
+	 * Optional icon to display on top of the text.
+	 * @TJS-type React.ReactNode
+	 */
+	icon?: ReactNode;
+	/**
+	 * Title of the component.
+	 */
+	title: string;
+	/**
+	 * Optional content text for additional context.
+	 */
+	text?: string;
+	/**
+	 * Optional node to showcase buttons or actions.
+	 * @TJS-type React.ReactNode
+	 */
+	actions?: ReactNode;
+}
+export type EmptyMessageProps = EmptyMessageProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+export declare const EmptyMessage: React.FC<EmptyMessageProps>;
+export type FormFieldSelectProperties = Omit<FormFieldProperties, "children"> & Omit<SelectProperties, "appearance">;
+export type FormFieldSelectBaseProps = FormFieldSelectProperties & Omit<SelectProps, "appearance"> & HTMLAttributes<HTMLElement>;
+declare const FormFieldSelect: React.ForwardRefExoticComponent<Omit<FormFieldSelectBaseProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export type FormFieldSelectProps = ComponentPropsWithRef<typeof FormField.Select>;
+export type FormFieldTextareaProperties = Omit<FormFieldProperties, "children"> & Omit<TextareaProperties, "appearance">;
+export type FormFieldTextareaBaseProps = FormFieldTextareaProperties & Omit<TextareaProps, "appearance"> & HTMLAttributes<HTMLElement>;
+declare const FormFieldTextarea: React.ForwardRefExoticComponent<Omit<FormFieldTextareaBaseProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export type FormFieldTextareaProps = ComponentPropsWithRef<typeof FormField.Textarea>;
+export type FormFieldInputProperties = Omit<FormFieldProperties, "children"> & Omit<InputProperties, "appearance"> & {
+	appearance?: FormFieldProperties["appearance"] | InputProperties["appearance"];
+};
+export type FormFieldInputBaseProps = Omit<FormFieldInputProperties, "appearance"> & Omit<InputProps, "appearance"> & {
+	appearance?: FormFieldProperties["appearance"] | InputProperties["appearance"];
+} & HTMLAttributes<HTMLElement>;
+declare const FormFieldInput: React.ForwardRefExoticComponent<Omit<FormFieldInputBaseProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export type FormFieldInputProps = ComponentPropsWithRef<typeof FormField.Input>;
+export interface FormFieldComponents {
+	Select: typeof FormFieldSelect;
+	Textarea: typeof FormFieldTextarea;
+	Input: typeof FormFieldInput;
+}
+export interface FormFieldProperties {
+	/**
+	 * Optional label for the field component.
+	 * @TJS-type React.ReactNode
+	 */
+	label?: ReactNode;
+	/**
+	 * Help text displaying optional hints or validation messages under the field.
+	 */
+	helpText?: string;
+	/**
+	 * Icon supporting the help text message.
+	 * @TJS-type React.FC<IconProps>
+	 */
+	helpIcon?: FC<IconProps>;
+	/**
+	 * Appearance of the field and help text elements.
+	 * @default none
+	 */
+	appearance?: "danger" | "warning" | "success" | "none";
+	/**
+	 * Control to conditionally show the help text and icon.
+	 * @default false
+	 */
+	showHelpText?: boolean;
+	/**
+	 * Content of the field.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type FormFieldProps = FormFieldProperties & HTMLAttributes<HTMLElement>;
+export declare const FormField: React.FC<FormFieldProps> & FormFieldComponents;
+export interface HelpLinkProperties {
+	/**
+	 * Content to be rendered inside the HelpLink component.
+	 * @TJS-type ReactNode
+	 */
+	children: ReactNode;
+}
+export type HelpLinkProps = HelpLinkProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+export declare const HelpLink: React.FC<HelpLinkProps>;
+export interface InteractiveListStructureProperties {
+	/**
+	 * Title of the list item element. Also used to generate the ID for the interactive element.
+	 */
+	title: string;
+	/**
+	 * Determines if the title is visible or not.
+	 */
+	showTitle?: boolean;
+	/**
+	 * Description of the list item element.
+	 */
+	description?: string;
+	/**
+	 * Custom content for the list item element.
+	 * @TJS-type React.ReactNode
+	 */
+	children?: ReactNode;
+}
+export type InteractiveListStructureProps = InteractiveListStructureProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const InteractiveListStructure: React.FC<InteractiveListStructureProps>;
+export type InteractiveListStructureSkeletonProperties = InteractiveListStructureProperties;
+export type InteractiveListStructureSkeletonProps = InteractiveListStructureSkeletonProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const InteractiveListStructureSkeleton: React.FC<InteractiveListStructureSkeletonProps>;
+export interface InteractiveListRowProperties extends Omit<BoxProperties, "padding" | "paddingBottom"> {
+	/**
+	 * Content of the row.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Determines if the row has a top border.
+	 * @default true
+	 */
+	topDivider?: boolean;
+}
+export type InteractiveListRowProps = InteractiveListRowProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+export interface InteractiveListCheckboxItemProperties extends InteractiveListStructureProperties {
+	/**
+	 * Checkbox props inherited from Nimbus components.
+	 */
+	checkbox: any;
+}
+export type InteractiveListCheckboxItemProps = InteractiveListCheckboxItemProperties & {
+	checkbox: CheckboxProps;
+} & Omit<HTMLAttributes<HTMLElement>, "color"> & Pick<InteractiveListRowProps, "topDivider">;
+declare const InteractiveListCheckboxItem: React.FC<InteractiveListCheckboxItemProps>;
+export type InteractiveListCheckboxItemSkeletonProperties = InteractiveListStructureSkeletonProperties;
+export type InteractiveListCheckboxItemSkeletonProps = InteractiveListCheckboxItemSkeletonProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const InteractiveListCheckboxItemSkeleton: React.FC<InteractiveListCheckboxItemSkeletonProps>;
+export interface InteractiveListRadioItemProperties extends InteractiveListStructureProperties {
+	/**
+	 * Radio props inherited from Nimbus components.
+	 */
+	radio: any;
+}
+export type InteractiveListRadioItemProps = InteractiveListRadioItemProperties & {
+	radio: RadioProps;
+} & Omit<HTMLAttributes<HTMLElement>, "color"> & Pick<InteractiveListRowProps, "topDivider">;
+declare const InteractiveListRadioItem: React.FC<InteractiveListRadioItemProps>;
+export type InteractiveListRadioItemSkeletonProperties = InteractiveListStructureSkeletonProperties;
+export type InteractiveListRadioItemSkeletonProps = InteractiveListRadioItemSkeletonProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const InteractiveListRadioItemSkeleton: React.FC<InteractiveListRadioItemSkeletonProps>;
+export interface InteractiveListToggleItemProperties extends InteractiveListStructureProperties {
+	/**
+	 * Toggle props inherited from Nimbus components.
+	 */
+	toggle: any;
+}
+export type InteractiveListToggleItemProps = InteractiveListToggleItemProperties & {
+	toggle: ToggleProps;
+} & Omit<HTMLAttributes<HTMLElement>, "color"> & Pick<InteractiveListRowProps, "topDivider">;
+declare const InteractiveListToggleItem: React.FC<InteractiveListToggleItemProps>;
+export interface InteractiveListToggleItemSkeletonProperties extends InteractiveListStructureProperties {
+	/**
+	 * Toggle props inherited from Nimbus components.
+	 */
+	toggle: any;
+}
+export type InteractiveListToggleItemSkeletonProps = InteractiveListToggleItemSkeletonProperties & {
+	toggle: ToggleProperties;
+} & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const InteractiveListToggleItemSkeleton: React.FC<InteractiveListToggleItemSkeletonProps>;
+export interface InteractiveListButtonItemProperties extends InteractiveListStructureProperties {
+	/**
+	 * Button props inherited from Nimbus components
+	 */
+	iconButton: Omit<IconButtonProperties, "backgroundColor" | "borderColor" | "size" | "source">;
+}
+export type InteractiveListButtonItemProps = InteractiveListButtonItemProperties & {
+	iconButton: Omit<IconButtonProps, "backgroundColor" | "borderColor" | "size" | "source">;
+} & Omit<HTMLAttributes<HTMLElement>, "color"> & Pick<InteractiveListRowProps, "topDivider">;
+declare const InteractiveListButtonItem: React.FC<InteractiveListButtonItemProps>;
+export type InteractiveListButtonItemSkeletonProperties = InteractiveListStructureSkeletonProperties;
+export type InteractiveListButtonItemSkeletonProps = InteractiveListButtonItemSkeletonProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const InteractiveListButtonItemSkeleton: React.FC<InteractiveListButtonItemSkeletonProps>;
+export interface InteractiveListComponents {
+	Structure: typeof InteractiveListStructure;
+	StructureSkeleton: typeof InteractiveListStructureSkeleton;
+	ButtonItem: typeof InteractiveListButtonItem;
+	ButtonItemSkeleton: typeof InteractiveListButtonItemSkeleton;
+	CheckboxItem: typeof InteractiveListCheckboxItem;
+	CheckboxItemSkeleton: typeof InteractiveListCheckboxItemSkeleton;
+	ToggleItem: typeof InteractiveListToggleItem;
+	ToggleItemSkeleton: typeof InteractiveListToggleItemSkeleton;
+	RadioItem: typeof InteractiveListRadioItem;
+	RadioItemSkeleton: typeof InteractiveListRadioItemSkeleton;
+}
+export type InteractiveListProperties = PropsWithChildren & Pick<DataListProps, "bottomDivider">;
+export type InteractiveListProps = InteractiveListProperties & HTMLAttributes<HTMLElement>;
+export declare const InteractiveList: React.FC<InteractiveListProps> & InteractiveListComponents;
+export interface LayoutSectionProperties {
+	/**
+	 * Content of the section body.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type LayoutSectionProps = LayoutSectionProperties & Omit<BoxProperties, "children" | "boxSizing" | "display" | "flexDirection"> & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const LayoutSection: React.FC<LayoutSectionProps>;
+export interface LayoutComponents {
+	Section: typeof LayoutSection;
+}
+export interface LayoutProperties {
+	/**
+	 * Content to be rendered inside the layout.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Number of columns to be rendered for the children.
+	 */
+	columns?: "1" | "2 - symmetric" | "2 - asymmetric" | "3";
+}
+export type LayoutProps = LayoutProperties & Omit<BoxProperties, "children" | "boxSizing" | "display" | "gridTemplateColumns"> & HTMLAttributes<HTMLElement>;
+export declare const Layout: React.FC<LayoutProps> & LayoutComponents;
+export interface MenuButtonAccordionProperties {
+	/**
+	 * Content of the menu.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * It will be the accordion anchor and can contain all the props available in the MenuButton component's API.
+	 * @TJS-type React.ReactNode
+	 */
+	menuButton: MenuButtonProperties;
+	/**
+	 * Required ID used to maintain correct component accessibility, it will be passed on to MenuButtonAccordion's children.
+	 */
+	contentid: string;
+	/**
+	 * Changes the component usage so that control of open and close is controlled from outside the component.
+	 */
+	open?: boolean;
+	/**
+	 * Sets the state of the button as active/inactive.
+	 */
+	active?: boolean;
+	/**
+	 * Whether the MenuButtonAccordion is expanded.
+	 * If `undefined`, it follows `MenuExpandContext`.
+	 * If provided, it overrides the context.
+	 */
+	expanded?: boolean;
+}
+export type MenuButtonAccordionBaseProps = MenuButtonAccordionProperties & {
+	menuButton: Omit<MenuButtonProps, "expanded" | "tooltipText">;
+} & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const MenuButtonAccordion: PolymorphicForwardRefComponent<"button" | "a", MenuButtonAccordionBaseProps>;
+export interface MenuButtonComponents {
+	Accordion: typeof MenuButtonAccordion;
+}
+export interface MenuButtonProperties {
+	/**
+	 * Text label for the button.
+	 */
+	label?: string;
+	/**
+	 * Function executed when clicking the button.
+	 * @TJS-type () => void;
+	 */
+	onClick?: () => void;
+	/**
+	 * Sets an icon element on the left of the button.
+	 * @TJS-type React.FC<IconProps>
+	 */
+	startIcon?: FC<IconProps>;
+	/**
+	 * Sets the state of the button as active/inactive.
+	 */
+	active?: boolean;
+	/**
+	 * Inner components displayed on the right of the button component.
+	 * @TJS-type React.ReactNode
+	 */
+	children?: ReactNode;
+	/**
+	 * Controlled override for menu expansion state. This prop does not manage internal state
+	 * and is not forwarded to the DOM as an attribute. It is used only for layout and visual
+	 * state determination.
+	 * If not provided, the expanded state will be determined by the context.
+	 */
+	expanded?: boolean;
+	/**
+	 * Whether to show popovers when the button is collapsed. Defaults to true.
+	 */
+	showPopoversWhenCollapsed?: boolean;
+}
+export type MenuButtonBaseProps = MenuButtonProperties & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color">;
+export declare const MenuButton: PolymorphicForwardRefComponent<"button" | "a", MenuButtonBaseProps> & MenuButtonComponents;
+export type MenuButtonProps = ComponentPropsWithRef<typeof MenuButton>;
+export interface MenuHeaderProperties {
+	/**
+	 * Content of the menu header.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type MenuHeaderProps = MenuHeaderProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const MenuHeader: React.FC<MenuHeaderProps>;
+export interface MenuBodyProperties {
+	/**
+	 * Content of the menu body.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type MenuBodyProps = MenuBodyProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const MenuBody: React.FC<MenuBodyProps>;
+export type MenuFooterProperties = Omit<MenuButtonProperties, "children">;
+export type MenuFooterProps = MenuFooterProperties & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color">;
+declare const MenuFooter: React.FC<MenuFooterProps>;
+export interface MenuSectionProperties {
+	/**
+	 * Optional title of the section.
+	 */
+	title?: string;
+	/**
+	 * Content of the menu section.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type MenuSectionProps = MenuSectionProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const MenuSection: React.FC<MenuSectionProps>;
+export interface MenuComponents {
+	Section: typeof MenuSection;
+	Button: typeof MenuButton;
+	ButtonAccordion: typeof MenuButton.Accordion;
+	Header: typeof MenuHeader;
+	Body: typeof MenuBody;
+	Footer: typeof MenuFooter;
+}
+export interface MenuProperties {
+	/**
+	 * Content of the menu.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Whether the menu should render in expanded mode.
+	 * If `undefined`, it follows `MenuExpandContext` value.
+	 * If provided, it overrides the context.
+	 */
+	expanded?: boolean;
+	/**
+	 * Whether to show popover for buttons when the menu is collapsed. Defaults to true.
+	 */
+	showPopoversWhenCollapsed?: boolean;
+	/**
+	 * Position of the popovers for buttons when the menu is collapsed. Defaults to "right".
+	 */
+	popoverPosition?: PopoverPlacement;
+}
+export type MenuProps = MenuProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+export declare const Menu: React.FC<MenuProps> & MenuComponents;
+export interface NavTabsItemProperties {
+	/**
+	 * Icon element to be rendered inside the button.
+	 * @TJS-type React.ReactNode
+	 */
+	icon: ReactNode;
+	/**
+	 * Controls whether the button is active or not.
+	 */
+	active?: boolean;
+	/**
+	 * Displays a small badge on top of the button.
+	 */
+	badge?: boolean;
+	/**
+	 * Function executed on click.
+	 * @TJS-type onClick: () => void;
+	 */
+	onClick: () => void;
+	/**
+	 * Text label used for accessibility.
+	 */
+	ariaLabel: string;
+}
+export type NavTabsItemProps = NavTabsItemProperties & Omit<BoxProperties, "onClick"> & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const NavTabsItem: React.FC<NavTabsItemProps>;
+export interface NavTabsComponents {
+	Item: typeof NavTabsItem;
+}
+export interface NavTabsProperties {
+	/**
+	 * Content to be rendered inside the Nav element.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type NavTabsProps = NavTabsProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+export declare const NavTabs: React.FC<NavTabsProps> & NavTabsComponents;
+export interface PageHeaderProperties {
+	/**
+	 * Main title of the page. Corresponds to an h1 HTML tag.
+	 */
+	title: string;
+	/**
+	 * Optional subtitle for the page.
+	 */
+	subtitle?: string;
+	/**
+	 * Button stack that appears on the right-hand side of the title.
+	 * @TJS-type React.ReactNode
+	 */
+	buttonStack?: ReactNode;
+	/**
+	 * Optional header content that appears underneath the title and button stack.
+	 * @TJS-type React.ReactNode
+	 */
+	children?: ReactNode;
+}
+export type PageHeaderProps = PageHeaderProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & Omit<BoxProps, "display" | "flexDirection">;
+declare const PageHeader: React.FC<PageHeaderProps>;
+export interface PageBodyProperties {
+	/**
+	 * Content of the page body.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type PageBodyProps = PageBodyProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & BoxProps;
+declare const PageBody: React.FC<PageBodyProps>;
+export interface PageComponents {
+	Header: typeof PageHeader;
+	Body: typeof PageBody;
+}
+export type PageProperties = PropsWithChildren<{
+	maxWidth?: string;
+}>;
+export type PageProps = PageProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & Omit<BoxProps, "width" | "maxWidth" | "marginX"> & Omit<BoxProperties, "width" | "maxWidth" | "marginX">;
+export declare const Page: React.FC<PageProps> & PageComponents;
+export interface ProductUpdatesPaginatorProperties {
+	/**
+	 * Total number of items/steps in the pagination.
+	 */
+	totalItems: number;
+	/**
+	 * Zero-based index of the currently active item.
+	 */
+	activeIndex: number;
+}
+export type ProductUpdatesPaginatorProps = ProductUpdatesPaginatorProperties & Omit<HTMLAttributes<HTMLElement>, "color" | "className" | "style">;
+declare const ProductUpdatesPaginator: React.FC<ProductUpdatesPaginatorProps>;
+export interface ProductUpdatesFooterProperties {
+	/**
+	 * Optional link rendered on the left side of the footer.
+	 * @TJS-type React.ReactNode
+	 */
+	leftLink?: ReactNode;
+	/**
+	 * Optional paginator element rendered in the center of the footer.
+	 * @TJS-type React.ReactNode
+	 */
+	paginator?: ReactNode;
+	/**
+	 * Optional action button rendered on the right side of the footer.
+	 * @TJS-type React.ReactNode
+	 */
+	rightButton?: ReactNode;
+	/**
+	 * When true, renders a full-width divider above the footer content.
+	 * @default false
+	 */
+	renderDivider?: boolean;
+}
+export type ProductUpdatesFooterProps = ProductUpdatesFooterProperties & Omit<BoxProperties, "pt" | "children">;
+declare const ProductUpdatesFooter: React.FC<ProductUpdatesFooterProps>;
+export interface ProductUpdatesComponents {
+	Paginator: typeof ProductUpdatesPaginator;
+	Footer: typeof ProductUpdatesFooter;
+}
+export interface ProductUpdatesProperties extends Omit<PopoverProperties, "content" | "appearance" | "padding" | "enabledDismiss"> {
+	/**
+	 * Title of the Popover.
+	 */
+	title: string;
+	/**
+	 * Content text of the Popover.
+	 */
+	text: string;
+	/**
+	 * Optional tag element rendered inline before the title.
+	 * @TJS-type React.ReactNode
+	 */
+	tag?: ReactNode;
+	/**
+	 * Optional content for the body of the Popover.
+	 * @TJS-type React.ReactNode
+	 */
+	bodyContent?: ReactNode;
+	/**
+	 * Optional properties for the content container of the popover body.
+	 */
+	bodyContentProps?: Omit<BoxProperties, "children">;
+	/**
+	 * Optional bottom link to dismiss the Popover. If unset, an IconButton with an X will appear on the superior right corner.
+	 * @TJS-type React.ReactNode
+	 */
+	dismissLink?: ReactNode;
+}
+export type ProductUpdatesProps = ProductUpdatesProperties & HTMLAttributes<HTMLElement>;
+export declare const ProductUpdates: React.FC<ProductUpdatesProps> & ProductUpdatesComponents;
+export type SideModalPadding = "none" | "base";
+export interface SideModalProperties extends Pick<SidebarProperties, "position" | "onRemove" | "open" | "padding" | "maxWidth" | "zIndex" | "needRemoveScroll" | "ignoreAttributeName"> {
+	/**
+	 * Choose where the portal should render. Defaults to viewport (body).
+	 */
+	/**
+	 * Title.
+	 */
+	title?: string;
+	/**
+	 * Action Title
+	 * @TJS-type React.ReactNode
+	 */
+	titleAction?: ReactNode;
+	/**
+	 * Action Header
+	 * @TJS-type React.ReactNode
+	 */
+	headerAction?: ReactNode;
+	/**
+	 * Icon Header
+	 * @TJS-type React.ReactNode
+	 */
+	headerIcon?: ReactNode;
+	/**
+	 * Body Content
+	 * @TJS-type React.ReactNode
+	 */
+	children?: ReactNode;
+	/**
+	 * Header padding.
+	 */
+	paddingHeader?: SideModalPadding;
+	/**
+	 * Body padding.
+	 */
+	paddingBody?: SideModalPadding;
+	/**
+	 * Footer padding.
+	 */
+	paddingFooter?: SideModalPadding;
+	/**
+	 * Footer element actions.
+	 */
+	footer?: {
+		primaryAction: ButtonProperties;
+		secondaryAction: ButtonProperties;
+	};
+}
+export type SideModalProps = SideModalProperties & {
+	footer?: {
+		primaryAction: ButtonProps;
+		secondaryAction: ButtonProps;
+	};
+	/**
+	 * Choose where the portal should render. Defaults to the viewport (document.body).
+	 * Useful to scope the modal within a specific container (e.g., AppShell.Chat).
+	 */
+	root?: HTMLElement | null;
+} & HTMLAttributes<HTMLElement>;
+export declare const SideModal: React.FC<SideModalProps>;
+export interface ThumbnailWithActionProperties {
+	/**
+	 * Thumbnail component properties.
+	 */
+	thumbnail: ThumbnailProperties;
+	/**
+	 * Element to be rendered inside the Thumbnail.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Optional position of the element.
+	 */
+	contentPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+}
+export type ThumbnailWithActionProps = ThumbnailWithActionProperties & {
+	thumbnail: ThumbnailProps;
+} & BoxProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+export declare const ThumbnailWithAction: React.FC<ThumbnailWithActionProps>;
+export type CalendarExtends = ComponentProps<typeof DayPicker>;
+export interface CalendarProperties {
+	/**
+	 * Ability to hide the border of the calendar container. Useful for including the calendar inside other components such as Modal, Popover or Card.
+	 * @default false
+	 */
+	hideBorder?: boolean;
+	/**
+	 * If true will stick the weekday indicators to the top of the component. Useful for when creating scrolling calendars with a display of >1 months. Only works when property numberOfMonths is set to a number greater than 1.
+	 * @default false
+	 */
+	stickyWeekdays?: boolean;
+	/**
+	 * If true the buttons for individual days will span 100% of available width as opposed to the default state where they have a fixed width. Useful for when creating calendars inside containers that are wider than default.
+	 * @default false
+	 */
+	fullWidthDays?: boolean;
+}
+export type CalendarProps = CalendarProperties & CalendarExtends & {
+	/**
+	 * Spreads the properties of the Box component to the calendar wrapper.
+	 */
+	containerProps?: BoxProps;
+};
+export declare const Calendar: React.FC<CalendarProps>;
+export type EmptyAppContentImageElementProperties = Pick<ThumbnailProps, "src" | "alt">;
+export type EmptyAppContentImageElementProps = EmptyAppContentImageElementProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const EmptyAppContentImageElement: React.FC<EmptyAppContentImageElementProps>;
+export interface EmptyAppContentSectionProperties {
+	title: string;
+	subtitle?: string;
+	actions?: ReactNode;
+	children: ReactNode;
+}
+export type EmptyAppContentSectionProps = EmptyAppContentSectionProperties & Omit<BoxProps, "display" | "flexDirection" | "px" | "py" | "gap" | "alignItems" | "maxWidth" | "mx">;
+declare const EmptyAppContentSection: React.FC<EmptyAppContentSectionProps>;
+export interface EmptyAppContentTextElementProperties {
+	title: string;
+	content: string;
+	bottomDivider?: boolean;
+}
+export type EmptyAppContentTextElementProps = EmptyAppContentTextElementProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const EmptyAppContentTextElement: React.FC<EmptyAppContentTextElementProps>;
+export interface EmptyAppHeroSectionProperties extends Pick<ThumbnailProps, "src" | "alt"> {
+	title: string;
+	titleChildren?: ReactNode;
+	subtitle?: string;
+	content: string;
+	actions?: ReactNode;
+}
+export type EmptyAppHeroSectionProps = EmptyAppHeroSectionProperties & Omit<BoxProps, "backgroundImage" | "minHeight" | "pt">;
+declare const EmptyAppHeroSection: React.FC<EmptyAppHeroSectionProps>;
+export interface EmptyAppPlanCardProperties {
+	planContext: string;
+	planName: string;
+	children: ReactNode;
+}
+export type EmptyAppPlanCardProps = EmptyAppPlanCardProperties & HTMLAttributes<HTMLElement>;
+declare const EmptyAppPlanCard: React.FC<EmptyAppPlanCardProps>;
+export interface EmptyAppPlanItemProperties {
+	label: string;
+	disabled?: boolean;
+}
+export type EmptyAppPlanItemProps = EmptyAppPlanItemProperties & Omit<BoxProps, "display" | "alignItems" | "gap">;
+declare const EmptyAppPlanItem: React.FC<EmptyAppPlanItemProps>;
+export interface EmptyAppComponents {
+	ContentImageElement: typeof EmptyAppContentImageElement;
+	ContentSection: typeof EmptyAppContentSection;
+	ContentTextElement: typeof EmptyAppContentTextElement;
+	HeroSection: typeof EmptyAppHeroSection;
+	PlanCard: typeof EmptyAppPlanCard;
+	PlanItem: typeof EmptyAppPlanItem;
+}
+export interface EmptyAppProperties {
+	/**
+	 * Content of the EmptyApp
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type EmptyAppProps = EmptyAppProperties & Omit<BoxProps, "width" | "display" | "flexDirection" | "backgroundColor" | "pb" | "children">;
+export declare const EmptyApp: React.FC<EmptyAppProps> & EmptyAppComponents;
+export type InitialScreenHeroProperties = {
+	title?: string;
+	subtitle?: string;
+	actions?: ReactNode;
+	image: ReactNode;
+	description?: ReactNode;
+	bullets?: ReactNode;
+};
+export type InitialScreenHeroProps = PropsWithChildren<InitialScreenHeroProperties> & Omit<BoxProps, "alignItems" | "mx">;
+declare const InitialScreenHero: React.FC<InitialScreenHeroProps>;
+export type InitialScreenBulletProperties = {
+	icon: ReactNode;
+	text: string;
+};
+export type InitialScreenBulletProps = PropsWithChildren<InitialScreenBulletProperties & Omit<BoxProps, "display" | "gap">>;
+declare const InitialScreenBullet: React.FC<InitialScreenBulletProps>;
+export type InitialScreenSectionProperties = {
+	title: string;
+};
+export type InitialScreenSectionProps = PropsWithChildren<InitialScreenSectionProperties> & Omit<BoxProps, "display" | "flexDirection" | "paddingTop" | "gap" | "maxWidth" | "mx">;
+declare const InitialScreenSection: React.FC<InitialScreenSectionProps>;
+export type InitialScreenCardProperties = {
+	icon: ReactNode;
+	title: string;
+	description: string;
+};
+export type InitialScreenCardProps = InitialScreenCardProperties & Omit<BoxProps, "p" | "borderRadius" | "boxShadow">;
+export type InitialScreenCardLayoutProperties = PropsWithChildren;
+export type InitialScreenCardLayoutProps = InitialScreenCardLayoutProperties & Omit<BoxProps, "display" | "flexDirection" | "gap">;
+declare const InitialScreenCard: React.FC<InitialScreenCardProps>;
+declare const InitialScreenCardLayout: React.FC<InitialScreenCardLayoutProps>;
+export type InitialScreenFeatureItemProperties = PropsWithChildren<{
+	title: string;
+	description: string;
+}>;
+export type InitialScreenFeatureProperties = {
+	content: ReactNode;
+	image: ReactNode;
+};
+export type InitialScreenFeatureItemSpacingProps = Omit<BoxProps, "borderTopWidth" | "borderBottomWidth" | "borderColor" | "borderStyle">;
+declare const InitialScreenFeatureItem: React.FC<InitialScreenFeatureItemProperties>;
+declare const InitialScreenFeatureItemSpacing: React.FC<InitialScreenFeatureItemSpacingProps>;
+declare const InitialScreenFeature: React.FC<InitialScreenFeatureProperties>;
+export type InitialScreenModuleProperties = {
+	title: string;
+	description: string;
+};
+export type InitialScreenModuleProps = PropsWithChildren<InitialScreenModuleProperties> & BoxProps;
+declare const InitialScreenModule: React.FC<InitialScreenModuleProps>;
+export interface InitialScreenComponents {
+	/**
+	 * Displays a bullet point with an icon and text, typically used to list app features with visual appeal.
+	 */
+	Bullet: typeof InitialScreenBullet;
+	/**
+	 * Displays a card with an icon, title, and children, generally used for descriptive purposes.
+	 */
+	Card: typeof InitialScreenCard;
+	/**
+	 * Displays multiple cards in a row or column, responsive to screen size.
+	 */
+	CardLayout: typeof InitialScreenCardLayout;
+	/**
+	 * Displays a feature with content and an image side by side.
+	 */
+	Feature: typeof InitialScreenFeature;
+	/**
+	 * Displays a feature with a title, description, and children, often used with the ItemSpacing component.
+	 */
+	FeatureItem: typeof InitialScreenFeatureItem;
+	/**
+	 * A line that separates items in the feature, maintaining a consistent layout.
+	 */
+	FeatureItemSpacing: typeof InitialScreenFeatureItemSpacing;
+	/**
+	 * Displays a hero with a title, subtitle, description, actions, bullets, and an image, typically for the main content of the initial screen.
+	 */
+	Hero: typeof InitialScreenHero;
+	/**
+	 * Displays a module with a title, description, and children, generally used for application modules or callout cards.
+	 */
+	Module: typeof InitialScreenModule;
+	/**
+	 * Displays a section with a title and children, used to separate content in the initial screen while maintaining a consistent layout.
+	 */
+	Section: typeof InitialScreenSection;
+}
+export interface InitialScreenProperties {
+	/**
+	 * Content of the InitialScreen component.
+	 * @TJS-type React.ReactNode
+	 */
+	children: React.ReactNode;
+}
+export type InitialScreenProps = InitialScreenProperties & Omit<BoxProps, "width" | "display" | "flexDirection" | "backgroundColor" | "pb" | "children">;
+/**
+ * This component provides a consistent layout and spacing for displaying a landing or welcome screen. It introduces users to an application or service, offering options to access more information or proceed further.
+ */
+export declare const InitialScreen: React.FC<InitialScreenProps> & InitialScreenComponents;
+export interface PlanDisplayCardProperties {
+	highlighted?: boolean;
+}
+export type PlanDisplayCardProps = PropsWithChildren<PlanDisplayCardProperties> & Omit<BoxProps, "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "boxShadow">;
+declare const PlanDisplayCard: React.FC<PlanDisplayCardProps>;
+export type PlanDisplayCardHeaderProperties = {
+	subtitle: string;
+	title: ReactNode;
+};
+export type PlanDisplayCardHeaderProps = PropsWithChildren<PlanDisplayCardHeaderProperties>;
+declare const PlanDisplayCardHeader: React.FC<PlanDisplayCardHeaderProps>;
+export type PlanDisplayCardContentProperties = PropsWithChildren;
+declare const PlanDisplayCardContent: React.FC<PlanDisplayCardContentProperties>;
+export type PlanDisplayCardFooterProperties = PropsWithChildren;
+declare const PlanDisplayCardFooter: React.FC<PlanDisplayCardFooterProperties>;
+export type PlanDisplayCardSpacingProps = Omit<BoxProps, "children" | "borderTopWidth" | "borderColor" | "borderStyle" | "my">;
+declare const PlanDisplayCardSpacing: React.FC<PlanDisplayCardSpacingProps>;
+export type PlanDisplayBulletProperties = {
+	icon: ReactNode;
+	disabled?: boolean;
+};
+export type PlanDisplayBulletProps = PropsWithChildren<PlanDisplayBulletProperties>;
+declare const PlanDisplayBullet: React.FC<PlanDisplayBulletProps>;
+/**
+ * Interface representing the internal components used in the PlanDisplay.
+ */
+export interface PlanDisplayComponents {
+	/**
+	 * The card component used to display the plan. This component is used to wrap the header, content, and footer components, and it is able
+	 * to receive a 'highlighted' prop to feature a plan.
+	 */
+	Card: typeof PlanDisplayCard;
+	/**
+	 * The header component of the plan display card. This component is used to display the title and subtitle of the plan, along with
+	 * an optional children where additional information can be displayed.
+	 */
+	Header: typeof PlanDisplayCardHeader;
+	/**
+	 * The content component of the plan display card. This component is used to display the main content of the plan, such as the plan bullet points.
+	 */
+	Content: typeof PlanDisplayCardContent;
+	/**
+	 * The spacing component used within the plan display card. This component is used to add spacing between the header, content, and footer components, displaying a line divider between them.
+	 */
+	Spacing: typeof PlanDisplayCardSpacing;
+	/**
+	 * The bullet component used to display the plan bullet points. It displays an icon and a text, and can receive a 'disabled' prop to show the bullet point as disabled.
+	 */
+	Bullet: typeof PlanDisplayBullet;
+	/**
+	 * The footer component of the plan display card. This component is used to display the footer of the plan, such as the CTA button.
+	 */
+	Footer: typeof PlanDisplayCardFooter;
+}
+export interface PlanDisplayProperties {
+	minPlanWidth?: string;
+	/**
+	 * Content of the PlanDisplay
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type PlanDisplayProps = PlanDisplayProperties & Omit<BoxProps, "width" | "display" | "flexDirection" | "backgroundColor" | "pb" | "children">;
+export declare const PlanDisplay: React.FC<PlanDisplayProps> & PlanDisplayComponents;
+declare const orientation: {
+	readonly vertical: "vertical";
+	readonly horizontal: "horizontal";
+};
+/**
+ * Base type for items that can be sorted
+ */
+export type SortableItemType = {
+	/** Unique identifier for the sortable item */
+	id: UniqueIdentifier;
+};
+export type InternalDndContextSettings = Omit<DndContextProps, "children" | "sensors" | "collisionDetection" | "onDragStart" | "onDragOver" | "onDragEnd">;
+/**
+ * Properties specific to the Sortable component
+ */
+export interface SortableProperties<T extends SortableItemType> {
+	/** The children components */
+	children: ReactNode;
+	/** Whether to disable sorting functionality */
+	disabled?: boolean;
+	/** The items to be sorted */
+	items: T[];
+	/** Callback fired when items are reordered */
+	onReorder: (items: T[]) => void;
+	/** Callback fired when drag starts */
+	onDragStart?: (event: DragStartEvent) => void;
+	/** Callback fired during drag */
+	onDragOver?: (event: DragOverEvent) => void;
+	/** Callback fired when drag ends */
+	onDragEnd?: (event: DragEndEvent) => void;
+	/** The orientation of the sortable list */
+	orientation?: typeof orientation.vertical | typeof orientation.horizontal;
+	/**
+	 * Custom sensor options for drag detection
+	 * @example
+	 * ```tsx
+	 * <Sortable
+	 *   sensorOptions={{
+	 *     activationConstraint: {
+	 *       distance: 20, // Allow movements up to 20px
+	 *       delay: 150,  // Wait 150ms before canceling
+	 *       tolerance: 5 // Tolerate 5px of movement
+	 *     }
+	 *   }}
+	 * >
+	 * ```
+	 */
+	sensorOptions?: PointerSensorOptions;
+	/** Configuration for the drag overlay appearance and behavior */
+	overlaySettings?: Omit<DragOverlayProps, "wrapperElement" | "style">;
+	/** Settings for the DndContext */
+	dndContextSettings?: Omit<InternalDndContextSettings, "accessibility">;
+	/** Render function for the dragged item overlay */
+	renderOverlay?: (item: T) => ReactNode;
+}
+export type SortableProps<T extends SortableItemType> = SortableProperties<T> & {
+	/** Configuration for the drag overlay appearance and behavior */
+	overlaySettings?: DragOverlayProps;
+	/** Settings for the DndContext */
+	dndContextSettings?: InternalDndContextSettings;
+};
+export interface RenderItemProps {
+	/** Drag attributes required for drag functionality */
+	attributes: DraggableAttributes;
+	/** Event listeners for drag functionality */
+	listeners: SyntheticListenerMap | undefined;
+	/** Reference setter for the draggable node */
+	setNodeRef: (node: HTMLElement | null) => void;
+	/** Style properties for drag animation */
+	style: CSSProperties;
+	/** Whether the item is currently being dragged */
+	isDragging: boolean;
+}
+export interface SortableItemProperties {
+	/** The unique identifier for the item */
+	id: UniqueIdentifier;
+	/** Whether the item is disabled from being dragged */
+	disabled?: boolean;
+	/** Custom drag handle selector */
+	handle?: boolean;
+	/** The children components */
+	children?: ReactNode;
+	/** Optional render function that receives drag state and handlers, useful for fully customizing the item */
+	renderItem?: (props: RenderItemProps) => ReactElement;
+}
+export type SortableItemProps = SortableItemProperties & ({
+	children: ReactNode;
+	renderItem?: undefined;
+} | {
+	children?: undefined;
+	renderItem: (props: RenderItemProps) => ReactElement;
+});
+export type SortableItemHandleProperties = {
+	/**
+	 * The content of the SortableItemHandle component
+	 */
+	children: ReactNode;
+};
+/**
+ * A component that provides drag and drop sorting functionality
+ * @example
+ * ```tsx
+ * const [items, setItems] = useState([{ id: '1', content: 'Item 1' }]);
+ *
+ * return (
+ *   <Sortable items={items} onReorder={setItems}>
+ *     <div className="my-sortable-container">
+ *       {items.map((item) => (
+ *         <Sortable.Item key={item.id} id={item.id}>
+ *           {item.content}
+ *         </Sortable.Item>
+ *       ))}
+ *     </div>
+ *   </Sortable>
+ * );
+ * ```
+ */
+export declare function Sortable<T extends SortableItemType>({ items, onReorder, orientation, sensorOptions, onDragStart, onDragOver, onDragEnd, disabled, children, overlaySettings, renderOverlay, dndContextSettings, }: SortableProps<T>): React.ReactElement;
+export declare namespace Sortable {
+	var Item: React.FC<SortableItemProps>;
+	var ItemHandle: {
+		({ children, }: SortableItemHandleProperties): React.ReactElement;
+		displayName: string;
+	};
+	var displayName: string;
+}
+/**
+ * Properties specific to the ProductDataListItem component
+ */
+export interface ProductDataListItemProperties {
+	/**
+	 * The id of the product
+	 */
+	id: string;
+	/**
+	 * The title of the product
+	 */
+	title: string;
+	/**
+	 * The image URL of the product
+	 */
+	imageUrl?: string;
+	/**
+	 * Alternative text for the product image
+	 */
+	imageAlt?: string;
+	/**
+	 * Whether the item is draggable
+	 */
+	isDraggable?: boolean;
+	/**
+	 * Callback fired when remove button is clicked
+	 */
+	onRemove?: () => void;
+	/**
+	 * Whether the item has a divider
+	 */
+	withDivider?: boolean;
+	/**
+	 * Additional content to be rendered
+	 */
+	children?: ReactNode;
+	/**
+	 * Icon component for the tag
+	 */
+	tagIcon?: ReactNode;
+	/**
+	 * Text content for the tag
+	 */
+	tagText?: string;
+	/**
+	 * Appearance style for the tag
+	 * @default "warning"
+	 */
+	tagAppearance?: "warning" | "primary" | "neutral" | "success" | "danger";
+}
+/**
+ * Props that can be passed to the ProductDataListItem component
+ */
+export type ProductDataListItemProps = ProductDataListItemProperties;
+declare const ProductDataListItem: React.FC<ProductDataListItemProps>;
+/**
+ * Properties specific to the ProductDataListProducts component
+ *
+ * @template T - The type of each sortable item in the list
+ */
+export interface ProductDataListProductsProperties<T extends SortableItemType> {
+	/**
+	 * The array of items to be rendered and sorted in the list.
+	 */
+	items: T[];
+	/**
+	 * Callback fired when the order of items changes.
+	 *
+	 * @param items - The reordered array of items
+	 */
+	onReorder: (items: T[]) => void;
+	/**
+	 * If true, enables drag-and-drop sorting for the list items.
+	 * @default false
+	 */
+	sortable?: boolean;
+	/**
+	 * Function to render each item in the list.
+	 *
+	 * @param item - The item to render
+	 * @param index - The index of the item in the list
+	 * @returns The rendered node for the item
+	 */
+	renderItem: (item: T, index: number) => ReactNode;
+	/**
+	 * Additional properties to pass to the sortable container.
+	 */
+	sortableProps?: object;
+}
+/**
+ * Props that can be passed to the ProductDataListProducts component, including sortable and layout properties.
+ *
+ * @template T - The type of each sortable item in the list
+ */
+export type ProductDataListProductsProps<T extends SortableItemType> = ProductDataListProductsProperties<T> & {
+	/**
+	 * Additional properties for the sortable container, omitting core sortable and layout props.
+	 */
+	sortableProps?: Omit<SortableProps<T>, "items" | "onReorder" | "orientation" | "disabled" | "renderOverlay" | "children">;
+} & Omit<BoxProps, "my" | "display" | "flexDirection" | "gap">;
+declare function ProductDataListProducts<T extends SortableItemType>({ sortable, items, onReorder, renderItem, sortableProps, children, ...props }: ProductDataListProductsProps<T>): React.ReactElement;
+declare namespace ProductDataListProducts {
+	var displayName: string;
+}
+export type ProductDataListSectionProperties = PropsWithChildren<{
+	title?: ReactNode;
+	description?: ReactNode;
+	content?: ReactNode;
+	link: ReactNode;
+}>;
+export type ProductDataListSectionProps = ProductDataListSectionProperties & Omit<BoxProps, "padding" | "display" | "flexDirection" | "gap" | "content">;
+declare const ProductDataListSection: React.FC<ProductDataListSectionProps>;
+export type ProductDataListItemDividerProperties = Pick<BoxProps, "borderTopWidth" | "borderBottomWidth" | "borderColor" | "borderStyle" | "width" | "id">;
+declare const ProductDataListItemDivider: React.FC<ProductDataListItemDividerProperties>;
+/**
+ * Properties specific to the ProductDataList component
+ */
+export interface ProductDataListProperties {
+	/**
+	 * The content to be rendered inside the list
+	 */
+	children: ReactNode;
+	/**
+	 * Optional title for the list section
+	 */
+	title?: ReactNode;
+}
+/**
+ * Props that can be passed to the ProductDataList component
+ */
+export type ProductDataListProps = ProductDataListProperties & Omit<BoxProps, "padding" | "display" | "flexDirection" | "gap">;
+export interface ProductDataListComponents {
+	Products: typeof ProductDataListProducts;
+	Item: typeof ProductDataListItem;
+	Section: typeof ProductDataListSection;
+	ItemDivider: typeof ProductDataListItemDivider;
+}
+export declare const ProductDataList: React.FC<ProductDataListProps> & ProductDataListComponents;
+export interface ChatInputActionsProperties {
+	/**
+	 * Content to be rendered at both sides of the actions bar.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type ChatInputActionsProps = ChatInputActionsProperties & Omit<BoxProperties, "children" | "display" | "justifyContent" | "alignItems"> & HTMLAttributes<HTMLElement>;
+export type ChatInputFieldProperties = Omit<TextareaProperties, "appearance"> & {
+	/**
+	 * Predefined appearance values for AI states. When `"ai-generative"` is passed,
+	 * the field displays the Nimbus AI generative border and focus ring.
+	 */
+	appearance?: "none" | "danger" | "warning" | "success" | "ai-generative";
+};
+export type ChatInputFieldBaseProps = ChatInputFieldProperties & Omit<TextareaProps, "appearance"> & HTMLAttributes<HTMLElement>;
+export interface ChatInputPopoverProperties {
+	/**
+	 * Content to be rendered inside the popover, usually ChatInput.PopoverButton components.
+	 * @TJS-type React.ReactNode
+	 */
+	content: ReactNode;
+	contentProperties?: Omit<BoxProperties, "children" | "display" | "flexDirection" | "gap">;
+	/**
+	 * The trigger element that opens the popover, usually an IconButton.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type ChatInputPopoverProps = ChatInputPopoverProperties & Omit<PopoverProperties, "content" | "children" | "arrow" | "position" | "padding" | "color">;
+export interface ChatInputPopoverButtonProperties {
+	/**
+	 * Icon element to be displayed before the text.
+	 * @TJS-type React.ReactNode
+	 */
+	icon?: ReactNode;
+	/**
+	 * The text content of the button.
+	 */
+	text: ReactNode;
+	/**
+	 * Click handler for the button.
+	 */
+	onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+export type ChatInputPopoverButtonProps = ChatInputPopoverButtonProperties & Omit<BoxProperties, "children" | "as" | "type" | "cursor" | "borderWidth" | "color" | "display" | "alignItems" | "gap" | "p" | "borderRadius" | "onClick">;
+export interface ChatInputComponents {
+	/**
+	 * ChatInput Actions is a container for the actions, like send button and recording button.
+	 */
+	Actions: React.FC<ChatInputActionsProps>;
+	/**
+	 * ChatInput Field textarea component.
+	 */
+	Field: React.ForwardRefExoticComponent<Omit<ChatInputFieldBaseProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+	/**
+	 * ChatInput Popover provides pre-configured popover settings for upload actions.
+	 */
+	Popover: React.FC<ChatInputPopoverProps>;
+	/**
+	 * ChatInput PopoverButton is a pre-styled button for popover menu items.
+	 */
+	PopoverButton: React.FC<ChatInputPopoverButtonProps>;
+}
+export interface ChatInputProperties {
+	/**
+	 * Content to be rendered inside ChatInput, usually `ChatInput.Actions` and `ChatInput.Field`.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Whether the ChatInput is focused for AI states.
+	 */
+	aiFocused?: boolean;
+}
+export type ChatInputProps = ChatInputProperties & Omit<BoxProperties, "children" | "display"> & HTMLAttributes<HTMLElement>;
+export declare const ChatInput: React.FC<ChatInputProps> & ChatInputComponents;
+/** Trend direction for the indicator (up, down, or neutral). */
+export type TrendDirection = "up" | "down" | "neutral";
+/**
+ * Props for the SummaryStatsItem component.
+ *
+ * Defines the props used to render a single stat: a primary value, description,
+ * optional trend indicator, optional tooltip, and optional expandable content
+ * (children). Used by the SummaryStatsItem component to display one metric in
+ * a summary stats row.
+ *
+ * @see SummaryStatsItem - Component that consumes these props.
+ * @property children - Optional ReactNode rendered in the expandable area when this stat is active.
+ */
+export interface SummaryStatsItemProperties {
+	/**
+	 * The main value to display (e.g., "$0.00", "156").
+	 */
+	value: string;
+	/**
+	 * Brief text that identifies the metric.
+	 */
+	description: string;
+	/**
+	 * Trend indicator showing the change direction.
+	 */
+	trend?: TrendDirection;
+	/**
+	 * Text describing the trend or change (e.g., "+15%", "-5%", "0%").
+	 */
+	trendText?: string;
+	/**
+	 * Tooltip content for the info icon. If provided, displays an info icon.
+	 */
+	infoTooltip?: string;
+	/**
+	 * Content to display when this stat is active (for expandable variant).
+	 * This content will be rendered in the expandable area below the stats row.
+	 * @TJS-type React.ReactNode
+	 */
+	children?: ReactNode;
+}
+export type SummaryStatsItemProps = SummaryStatsItemProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const SummaryStatsItem: React.FC<SummaryStatsItemProps>;
+/**
+ * Layout variant for the SummaryStats container.
+ * - "horizontal": single row (optionally with scroll/expand).
+ * - "grid": 2-column grid.
+ */
+export type SummaryStatsLayout = "horizontal" | "grid";
+/**
+ * Subcomponents exposed on SummaryStats (e.g. SummaryStats.Item).
+ * Use {@link SummaryStatsItem} for the Item subcomponent type and API.
+ */
+export interface SummaryStatsComponents {
+	Item: typeof SummaryStatsItem;
+}
+/**
+ * Props specific to SummaryStats. Children should be {@link SummaryStatsItem}
+ * nodes (SummaryStats.Item). Layout is "horizontal" (default) or "grid".
+ * Defaults: layout "horizontal", expandable false.
+ *
+ * Supports both controlled and uncontrolled modes for the active stat:
+ * - **Uncontrolled** (default): omit `activeStatId` and the component manages
+ *   active state internally.
+ * - **Controlled**: pass `activeStatId` and `onActiveStatIdChange` to manage
+ *   the active stat externally (e.g. for routing, analytics, or persistence).
+ */
+export interface SummaryStatsProperties {
+	/**
+	 * Content to be rendered inside the SummaryStats component.
+	 * Composed of SummaryStats.Item subcomponents.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Layout variant for the stats container.
+	 * - "horizontal": Items in a single row (2-6 items recommended).
+	 * - "grid": Items in a 2-column grid layout (2 or 4 items recommended).
+	 * @default "horizontal"
+	 */
+	layout?: SummaryStatsLayout;
+	/**
+	 * Enables expandable mode where stats can be clicked to show additional content.
+	 * @default false
+	 */
+	expandable?: boolean;
+	/**
+	 * The id of the currently active stat (controlled mode).
+	 * When provided, the component becomes controlled and `onActiveStatIdChange`
+	 * should be used to handle state changes. Pass `null` for no active stat.
+	 */
+	activeStatId?: string | null;
+	/**
+	 * Callback fired when the active stat changes (controlled mode).
+	 * Receives the new active stat id, or `null` when the active stat is deselected.
+	 */
+	onActiveStatIdChange?: (activeStatId: string | null) => void;
+}
+/**
+ * Full props for SummaryStats: {@link SummaryStatsProperties} plus HTML element
+ * attributes (excluding color). Use for the root SummaryStats component.
+ */
+export type SummaryStatsProps = SummaryStatsProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
+/**
+ * SummaryStats displays a set of stat blocks in a configurable layout. Use
+ * {@link SummaryStatsProps} for the full props type and {@link SummaryStatsComponents}
+ * for the compound component API (e.g. SummaryStats.Item).
+ *
+ * Layout can be horizontal (single row, optionally with scroll/expand) or grid
+ * (2-column). When layout is "horizontal" and expandable is true, clicking a
+ * stat toggles an expanded area below showing that stat's extra content.
+ *
+ * @param props - See SummaryStatsProps
+ * @param props.className - Optional CSS class for the root element
+ * @param props.style - Optional inline styles for the root element
+ * @param props.children - Stat items, typically SummaryStats.Item components
+ * @param props.layout - "horizontal" (default) or "grid"; controls row vs grid layout
+ * @param props.expandable - When true and layout is horizontal, stats are expandable
+ * @param props.activeStatId - Optional. Controlled active stat id. Pass `null` for none.
+ * @param props.onActiveStatIdChange - Optional. Callback when active stat changes.
+ * @param props.rest - Remaining HTML element attributes (spread to root Box)
+ */
+export declare const SummaryStats: React.FC<SummaryStatsProps> & SummaryStatsComponents;
+export interface MenuExpandContextValue {
+	/** True when the menu is expanded; false when collapsed. */
+	expanded: boolean;
+	/** Whether to show popovers for buttons when the menu is collapsed. Defaults to true. */
+	showPopoversWhenCollapsed?: boolean;
+	/** Position of the popovers for buttons when the menu is collapsed. Defaults to "right". */
+	popoverPosition?: PopoverPlacement;
+	/** ID of the currently active accordion popover. Used to ensure only one popover is open at a time. */
+	activeAccordionPopover: string | null;
+	/** Function to set the active accordion popover ID. */
+	setActiveAccordionPopover: Dispatch<SetStateAction<string | null>>;
+}
+export declare const MenuExpandContext: import("react").Context<MenuExpandContextValue | undefined>;
+/**
+ * Read Menu expand/collapse state.
+ * @param enforce When false, returns `initialMenuContext` if no provider is present.
+ * @throws If `enforce=true` and used without a provider.
+ */
+export declare const useMenuExpandContext: (enforce?: boolean) => MenuExpandContextValue;
+
+export {};