@lumx/react 2.2.21 → 2.2.22-alpha-fix-generic-block.2

package/types.d.ts

@@ -27,13 +27,22 @@ export declare type Comp<P, T = HTMLElement> = {
 };
 /** Union type of all heading elements */
 export declare type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export interface HasTheme {
+	/**
+	 * Theme adapting the component to light or dark background.
+	 */
+	theme?: Theme;
+}
 /**
  * Define a generic props types.
  */
 export interface GenericProps {
+	/**
+	 * Class name forwarded to the root element of the component.
+	 */
+	className?: string;
 	/**
 	 * Any prop (particularly any supported prop for a HTML element).
-	 * E.g. classNames, onClick, disabled, ...
 	 */
 	[propName: string]: any;
 }
@@ -41,6 +50,11 @@ export interface GenericProps {
  * Callback function type alias (use for readability)
  */
 export declare type Callback = () => void;
+/**
+ * JS falsy values.
+ * (excluding `NaN` as it can't be distinguished from `number`)
+ */
+export declare type Falsy = false | undefined | null | 0 | "";
 /**
  * Alignments.
  */
@@ -252,7 +266,7 @@ export declare const AlertDialog: Comp<AlertDialogProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-export interface AutocompleteProps extends GenericProps {
+export interface AutocompleteProps extends GenericProps, HasTheme {
 	/**
 	 * Whether the suggestions list should display anchored to the input or to the wrapper.
 	 * @see {@link DropdownProps#anchorToInput}
@@ -268,7 +282,7 @@ export interface AutocompleteProps extends GenericProps {
 	 * Reference to the <input> or <textarea> element.
 	 * @see {@link TextFieldProps#inputRef}
 	 */
-	inputRef?: RefObject<HTMLInputElement>;
+	inputRef?: TextFieldProps["inputRef"];
 	/**
 	 * The offset that will be applied to the Dropdown position.
 	 * @see {@link DropdownProps#offset}
@@ -333,8 +347,6 @@ export interface AutocompleteProps extends GenericProps {
 	 * @see {@link TextFieldProps#placeholder}
 	 */
 	placeholder?: string;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** List of suggestions to display during autocomplete. */
 	children: React.ReactNode;
 	/**
@@ -431,7 +443,7 @@ export declare type AvatarSize = Extract<Size, "xs" | "s" | "m" | "l" | "xl" | "
 /**
  * Defines the props of the component.
  */
-export interface AvatarProps extends GenericProps {
+export interface AvatarProps extends GenericProps, HasTheme {
 	/** Action toolbar content. */
 	actions?: ReactNode;
 	/** Image alternative text. */
@@ -450,8 +462,6 @@ export interface AvatarProps extends GenericProps {
 	onKeyPress?: KeyboardEventHandler<HTMLDivElement>;
 	/** Size variant. */
 	size?: AvatarSize;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** Props to pass to the thumbnail (minus those already set by the Avatar props). */
 	thumbnailProps?: Omit<ThumbnailProps, "image" | "alt" | "size" | "theme" | "align" | "fillHeight" | "variant" | "aspectRatio">;
 }
@@ -485,7 +495,7 @@ export declare type HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTM
  * Button size definition.
  */
 export declare type ButtonSize = Extract<Size, "s" | "m">;
-export interface BaseButtonProps extends GenericProps, Pick<AriaAttributes, "aria-expanded" | "aria-haspopup" | "aria-pressed" | "aria-label"> {
+export interface BaseButtonProps extends GenericProps, Pick<AriaAttributes, "aria-expanded" | "aria-haspopup" | "aria-pressed" | "aria-label">, HasTheme {
 	/** Color variant. */
 	color?: Color;
 	/** Emphasis variant. */
@@ -504,8 +514,6 @@ export interface BaseButtonProps extends GenericProps, Pick<AriaAttributes, "ari
 	size?: ButtonSize;
 	/** Native anchor target property. */
 	target?: "_self" | "_blank" | "_parent" | "_top";
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** Native button type. */
 	type?: HTMLButtonProps["type"];
 	/** Custom react component for the link (can be used to inject react router Link). */
@@ -588,7 +596,7 @@ export declare const ButtonGroup: Comp<ButtonGroupProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-export interface CheckboxProps extends GenericProps {
+export interface CheckboxProps extends GenericProps, HasTheme {
 	/** Helper text. */
 	helper?: string;
 	/** Native input id property. */
@@ -603,8 +611,6 @@ export interface CheckboxProps extends GenericProps {
 	label?: ReactNode;
 	/** Native input name property. */
 	name?: string;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** Native input value property. */
 	value?: string;
 	/** On change callback. */
@@ -627,7 +633,7 @@ export declare type ChipSize = Extract<Size, "s" | "m">;
 /**
  * Defines the props of the component.
  */
-export interface ChipProps extends GenericProps {
+export interface ChipProps extends GenericProps, HasTheme {
 	/** A component to be rendered after the content. */
 	after?: ReactNode;
 	/** A component to be rendered before the content. */
@@ -644,8 +650,6 @@ export interface ChipProps extends GenericProps {
 	isSelected?: boolean;
 	/** Size variant. */
 	size?: ChipSize;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** On "after" element clicked callback. */
 	onAfterClick?: MouseEventHandler;
 	/** On "before" element clicked callback. */
@@ -691,7 +695,7 @@ export declare type CommentBlockVariant = ValueOf<typeof CommentBlockVariant>;
 /**
  * Defines the props of the component.
  */
-export interface CommentBlockProps extends GenericProps {
+export interface CommentBlockProps extends GenericProps, HasTheme {
 	/** Action toolbar content. */
 	actions?: ReactNode;
 	/** Props to pass to the avatar. */
@@ -720,8 +724,6 @@ export interface CommentBlockProps extends GenericProps {
 	onMouseLeave?(): void;
 	/** Comment content. */
 	text: ReactNode | string;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** Comment variant. */
 	variant?: CommentBlockVariant;
 }
@@ -835,7 +837,7 @@ export interface DialogProps extends GenericProps {
 	/** Reference to the parent element that triggered modal opening (will get back focus on close). */
 	parentElement?: RefObject<HTMLElement>;
 	/** Reference to the dialog content element. */
-	contentRef?: RefObject<HTMLDivElement>;
+	contentRef?: Ref<HTMLDivElement>;
 	/** Reference to the of the element that should get the focus when the dialogs opens. By default, the first child will take focus. */
 	focusElement?: RefObject<HTMLElement>;
 	/** Whether to keep the dialog open on clickaway or escape press. */
@@ -863,9 +865,7 @@ export declare const Dialog: Comp<DialogProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-export interface DividerProps extends GenericProps {
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
+export interface DividerProps extends GenericProps, HasTheme {
 }
 /**
  * Component default props.
@@ -882,9 +882,7 @@ export declare const Divider: Comp<DividerProps, HTMLHRElement>;
 /**
  * Defines the props of the component.
  */
-export interface DragHandleProps extends GenericProps {
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
+export interface DragHandleProps extends GenericProps, HasTheme {
 }
 /**
  * DragHandle component.
@@ -981,10 +979,11 @@ export declare const Popover: Comp<PopoverProps, HTMLDivElement>;
  * Defines the props of the component.
  */
 export interface DropdownProps extends GenericProps {
-	/** Reference to the element around which the dropdown is placed.
+	/**
+	 * Reference to the element around which the dropdown is placed.
 	 * @see {@link PopoverProps#anchorRef}
 	 */
-	anchorRef: React.RefObject<HTMLElement>;
+	anchorRef: PopoverProps["anchorRef"];
 	/** Dropdown content. */
 	children: React.ReactNode;
 	/**
@@ -1054,7 +1053,7 @@ export declare const Dropdown: Comp<DropdownProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-export interface ExpansionPanelProps extends GenericProps {
+export interface ExpansionPanelProps extends GenericProps, HasTheme {
 	/** Whether the expansion panel has a background. */
 	hasBackground?: boolean;
 	/** Whether the header has a divider. */
@@ -1063,8 +1062,6 @@ export interface ExpansionPanelProps extends GenericProps {
 	isOpen?: boolean;
 	/** Label text (overwritten if a `<header>` is provided in the children). */
 	label?: string;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** On open callback. */
 	onOpen?: Callback;
 	/** On close callback. */
@@ -1082,9 +1079,7 @@ export interface ExpansionPanelProps extends GenericProps {
  * @return React element.
  */
 export declare const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement>;
-export interface FlagProps extends GenericProps {
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
+export interface FlagProps extends GenericProps, HasTheme {
 	/** Color of the component. */
 	color?: ColorPalette;
 	/** Icon to use before the label. */
@@ -1101,7 +1096,7 @@ export interface FlagProps extends GenericProps {
  */
 export declare const Flag: Comp<FlagProps, HTMLDivElement>;
 export declare type MarginAutoAlignment = Extract<Alignment, "top" | "bottom" | "right" | "left">;
-export declare type GapSize = Extract<Size, "regular" | "medium" | "big" | "huge">;
+export declare type GapSize = Extract<Size, "tiny" | "regular" | "medium" | "big" | "huge">;
 /**
  * Defines the props of the component.
  */
@@ -1134,40 +1129,65 @@ export interface FlexBoxProps extends GenericProps {
  */
 export declare const FlexBox: Comp<FlexBoxProps, HTMLDivElement>;
 export interface GenericBlockProps extends FlexBoxProps {
-	/** Component to use as visual element. */
+	/**
+	 * Component to use as visual element.
+	 */
 	figure?: ReactNode;
-	/** Actions to set after the main content. */
+	/**
+	 * Actions to set after the main content.
+	 */
 	actions?: ReactNode;
-	/** Main content to display */
+	/**
+	 * Main content to display or sections components
+	 * ({@see GenericBlock.Figure}, {@see GenericBlock.Content} & {@see GenericBlock.Actions})
+	 */
 	children: ReactNode;
-	/** Orientation of the 3 sections */
+	/**
+	 * Orientation of the 3 sections
+	 */
 	orientation?: FlexBoxProps["orientation"];
-	/** Horizontal alignment. */
+	/**
+	 * Horizontal alignment.
+	 */
 	hAlign?: FlexBoxProps["hAlign"];
-	/** Vertical alignment. */
+	/**
+	 * Vertical alignment.
+	 */
 	vAlign?: FlexBoxProps["vAlign"];
 	/**
 	 * The props to forward to the content.
 	 * By default, the content will have the same alignment as wrapper.
 	 */
 	contentProps?: Omit<FlexBoxProps, "children">;
-	/** props to forward to the actions element. */
+	/**
+	 * props to forward to the actions element.
+	 */
 	actionsProps?: Omit<FlexBoxProps, "children">;
-	/** props to forward to the figure element. */
+	/**
+	 * props to forward to the figure element.
+	 */
 	figureProps?: Omit<FlexBoxProps, "children">;
 }
-/**
- * The GenericBlock is a layout component made of 3 sections that can be
- * displayed either horizontally of vertically with the same gap between each section.
- *
- * The sections are:
- * * (Optional) `Figure` => A visual element to display before the main content.
- * * (Required) `Content` => The main content displayed
- * * (Optional) `Actions` => One or more actions to set after the element.
- *
- * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
- */
-export declare const GenericBlock: Comp<GenericBlockProps, HTMLDivElement>;
+export declare type BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;
+export interface GenericBlock extends BaseGenericBlock {
+	/**
+	 * Use `GenericBlock.Figure` component as children of the `GenericBlock` component as an alternative way to inject
+	 * the "figure" section of the block (instead of using `figure` and `figureProps` props).
+	 */
+	Figure: Comp<FlexBoxProps>;
+	/**
+	 * Use `GenericBlock.Content` component as children of the `GenericBlock` component as an alternative way to inject
+	 * the "content" section of the block (instead of using `content` and `contentProps` props).
+	 */
+	Content: Comp<FlexBoxProps>;
+	/**
+	 * Use `GenericBlock.Actions` component as children of the `GenericBlock` component as an alternative way to inject
+	 * the "actions" section of the block (instead of using `actions` and `actionsProps` props).
+	 */
+	Actions: Comp<FlexBoxProps>;
+}
+declare const BaseGenericBlock: BaseGenericBlock;
+export declare const GenericBlock: GenericBlock;
 export declare type GridGutterSize = Extract<Size, "regular" | "big" | "huge">;
 /**
  * Defines the props of the component.
@@ -1216,7 +1236,7 @@ export declare type IconSizes = Extract<Size, "xxs" | "xs" | "s" | "m" | "l" | "
 /**
  * Defines the props of the component.
  */
-export interface IconProps extends GenericProps {
+export interface IconProps extends GenericProps, HasTheme {
 	/** Color variant. */
 	color?: Color;
 	/** Lightened or darkened variant of the selected icon color. */
@@ -1230,8 +1250,6 @@ export interface IconProps extends GenericProps {
 	icon: string;
 	/** Size variant. */
 	size?: IconSizes;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** Sets an alternative text on the svg. Will set an `img` role to the svg. */
 	alt?: string;
 }
@@ -1271,7 +1289,7 @@ export declare type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
 /**
  * Defines the props of the component.
  */
-export interface ThumbnailProps extends GenericProps {
+export interface ThumbnailProps extends GenericProps, HasTheme {
 	/** Alignment of the thumbnail in it's parent (requires flex parent). */
 	align?: HorizontalAlignment;
 	/** Image alternative text. */
@@ -1279,7 +1297,7 @@ export interface ThumbnailProps extends GenericProps {
 	/** Image aspect ratio. */
 	aspectRatio?: AspectRatio;
 	/** Badge. */
-	badge?: ReactElement;
+	badge?: ReactElement | Falsy;
 	/** Image cross origin resource policy. */
 	crossOrigin?: ImgHTMLProps["crossOrigin"];
 	/** Fallback icon (SVG path) or react node when image fails to load. */
@@ -1304,8 +1322,6 @@ export interface ThumbnailProps extends GenericProps {
 	onClick?: MouseEventHandler<HTMLDivElement>;
 	/** On key press callback. */
 	onKeyPress?: KeyboardEventHandler<HTMLDivElement>;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** Variant of the component. */
 	variant?: ThumbnailVariant;
 	/** Props to pass to the link wrapping the thumbnail. */
@@ -1336,7 +1352,7 @@ export declare type ImageBlockSize = Extract<Size, "xl" | "xxl">;
 /**
  * Defines the props of the component.
  */
-export interface ImageBlockProps extends GenericProps {
+export interface ImageBlockProps extends GenericProps, HasTheme {
 	/** Action toolbar content. */
 	actions?: ReactNode;
 	/** Alignment. */
@@ -1359,8 +1375,6 @@ export interface ImageBlockProps extends GenericProps {
 	size?: ImageBlockSize;
 	/** Tag content. */
 	tags?: ReactNode;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */
 	thumbnailProps?: Omit<ThumbnailProps, "image" | "size" | "theme" | "align" | "fillHeight">;
 	/** Image title to display in the caption. */
@@ -1377,13 +1391,11 @@ export declare const ImageBlock: Comp<ImageBlockProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-export interface InputHelperProps extends GenericProps {
+export interface InputHelperProps extends GenericProps, HasTheme {
 	/** Helper content. */
 	children: string | ReactNode;
 	/** Helper variant. */
 	kind?: Kind;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 }
 /**
  * InputHelper component.
@@ -1396,15 +1408,13 @@ export declare const InputHelper: Comp<InputHelperProps, HTMLSpanElement>;
 /**
  * Defines the props of the component.
  */
-export interface InputLabelProps extends GenericProps {
+export interface InputLabelProps extends GenericProps, HasTheme {
 	/** Label content. */
 	children: string | ReactNode;
 	/** Native htmlFor property. */
 	htmlFor: string;
 	/** Whether the component is required or not. */
 	isRequired?: boolean;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 }
 /**
  * InputLabel component.
@@ -1417,7 +1427,7 @@ export declare const InputLabel: Comp<InputLabelProps, HTMLLabelElement>;
 /**
  * Defines the props of the component.
  */
-export interface LightboxProps extends GenericProps {
+export interface LightboxProps extends GenericProps, HasTheme {
 	/** Props to pass to the close button (minus those already set by the Lightbox props). */
 	closeButtonProps?: Pick<IconButtonProps, "label"> & Omit<IconButtonProps, "label" | "onClick" | "icon" | "emphasis" | "color">;
 	/** Whether the component is open or not. */
@@ -1426,8 +1436,6 @@ export interface LightboxProps extends GenericProps {
 	parentElement: RefObject<any>;
 	/** Whether to keep the dialog open on clickaway or escape press. */
 	preventAutoClose?: boolean;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** Z-axis position. */
 	zIndex?: number;
 	/** On close callback. */
@@ -1476,7 +1484,7 @@ export declare const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement
 /**
  * Defines the props of the component.
  */
-export interface LinkPreviewProps extends GenericProps {
+export interface LinkPreviewProps extends GenericProps, HasTheme {
 	/** Description. */
 	description?: string;
 	/** Link URL. */
@@ -1487,8 +1495,6 @@ export interface LinkPreviewProps extends GenericProps {
 	linkProps?: Omit<LinkProps, "color" | "colorVariant" | "href" | "target">;
 	/** Size variant. */
 	size?: Extract<Size, "regular" | "big">;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** Thumbnail for the link preview. */
 	thumbnailProps?: ThumbnailProps;
 	/** Title. */
@@ -1637,9 +1643,7 @@ export declare const Message: Comp<MessageProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-export interface MosaicProps extends GenericProps {
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
+export interface MosaicProps extends GenericProps, HasTheme {
 	/** Thumbnails. */
 	thumbnails: ThumbnailProps[];
 	/** On image click callback. */
@@ -1656,15 +1660,13 @@ export declare const Mosaic: Comp<MosaicProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-export interface NotificationProps extends GenericProps {
+export interface NotificationProps extends GenericProps, HasTheme {
 	/** Action button label. */
 	actionLabel?: string;
 	/** Content. */
 	content?: React.ReactNode;
 	/** Whether the component is open or not. */
 	isOpen?: boolean;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** Notification type. */
 	type?: Kind;
 	/** Z-axis position. */
@@ -1685,7 +1687,7 @@ export declare const Notification: Comp<NotificationProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-export interface PostBlockProps extends GenericProps {
+export interface PostBlockProps extends GenericProps, HasTheme {
 	/** Action toolbar content. */
 	actions?: ReactNode;
 	/** Attachment content. */
@@ -1702,8 +1704,6 @@ export interface PostBlockProps extends GenericProps {
 	text?: string | {
 		__html: string;
 	};
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** Thumbnail. */
 	thumbnailProps?: ThumbnailProps;
 	/** Title. */
@@ -1730,9 +1730,7 @@ export declare type ProgressVariant = ValueOf<typeof ProgressVariant>;
 /**
  * Defines the props of the component.
  */
-export interface ProgressProps extends GenericProps {
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
+export interface ProgressProps extends GenericProps, HasTheme {
 	/** Progress variant. */
 	variant?: ProgressVariant;
 }
@@ -1840,7 +1838,7 @@ export declare const ProgressTrackerStepPanel: Comp<ProgressTrackerStepPanelProp
 /**
  * Defines the props of the component.
  */
-export interface RadioButtonProps extends GenericProps {
+export interface RadioButtonProps extends GenericProps, HasTheme {
 	/** Helper text. */
 	helper?: string;
 	/** Native input id property. */
@@ -1855,8 +1853,6 @@ export interface RadioButtonProps extends GenericProps {
 	label?: ReactNode;
 	/** Native input name property. */
 	name?: string;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** Native input value property. */
 	value?: string;
 	/** On change callback. */
@@ -1893,7 +1889,7 @@ export declare const SelectVariant: {
 	readonly chip: "chip";
 };
 export declare type SelectVariant = ValueOf<typeof SelectVariant>;
-export interface CoreSelectProps extends GenericProps {
+export interface CoreSelectProps extends GenericProps, HasTheme {
 	/** Props to pass to the clear button (minus those already set by the Select props). If not specified, the button won't be displayed. */
 	clearButtonProps?: Pick<IconButtonProps, "label"> & Omit<IconButtonProps, "label" | "onClick" | "icon" | "emphasis">;
 	/** Whether the select (input variant) is displayed with error style or not. */
@@ -1918,8 +1914,6 @@ export interface CoreSelectProps extends GenericProps {
 	label?: string;
 	/** Placeholder input text. */
 	placeholder?: string;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** Select variant. */
 	variant?: SelectVariant;
 	/** On clear callback. */
@@ -1969,11 +1963,9 @@ export declare const SelectMultiple: Comp<SelectMultipleProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-export interface SideNavigationProps extends GenericProps {
+export interface SideNavigationProps extends GenericProps, HasTheme {
 	/** SideNavigationItem elements. */
 	children: ReactNode;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 }
 /**
  * SideNavigation component.
@@ -2026,11 +2018,9 @@ export declare const SideNavigationItem: Comp<SideNavigationItemProps, HTMLLIEle
 /**
  * Defines the props of the component.
  */
-export interface SkeletonCircleProps extends GenericProps {
+export interface SkeletonCircleProps extends GenericProps, HasTheme {
 	/** Size variant. */
 	size: GlobalSize;
-	/** Theme. */
-	theme?: Theme;
 	/** The color of the skeleton. */
 	color?: ColorPalette;
 }
@@ -2054,13 +2044,11 @@ export declare type SkeletonRectangleVariant = ValueOf<typeof SkeletonRectangleV
 /**
  * Defines the props of the component.
  */
-export interface SkeletonRectangleProps extends GenericProps {
+export interface SkeletonRectangleProps extends GenericProps, HasTheme {
 	/** Aspect ratio (use with width and not height). */
 	aspectRatio?: Extract<AspectRatio, "square" | "horizontal" | "vertical" | "wide">;
 	/** Height size. */
 	height?: GlobalSize;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** Border variant. */
 	variant?: SkeletonRectangleVariant;
 	/** Width size. */
@@ -2079,9 +2067,7 @@ export declare const SkeletonRectangle: Comp<SkeletonRectangleProps, HTMLDivElem
 /**
  * Defines the props of the component.
  */
-export interface SkeletonTypographyProps extends GenericProps {
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
+export interface SkeletonTypographyProps extends GenericProps, HasTheme {
 	/** Typography variant. */
 	typography: TypographyInterface;
 	/** Width CSS property. */
@@ -2100,7 +2086,7 @@ export declare const SkeletonTypography: Comp<SkeletonTypographyProps, HTMLDivEl
 /**
  * Defines the props of the component.
  */
-export interface SliderProps extends GenericProps {
+export interface SliderProps extends GenericProps, HasTheme {
 	/** Helper text. */
 	helper?: string;
 	/** Whether the min and max labels should be hidden or not. */
@@ -2119,8 +2105,6 @@ export interface SliderProps extends GenericProps {
 	precision?: number;
 	/** Range step value. */
 	steps?: number;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** Selected ranged value. */
 	value: number;
 	/** On change callback. */
@@ -2246,7 +2230,7 @@ export interface UseSlideshowControls {
 /**
  * Defines the props of the component.
  */
-export interface SlideshowControlsProps extends GenericProps {
+export interface SlideshowControlsProps extends GenericProps, HasTheme {
 	/** Index of the current slide. */
 	activeIndex?: number;
 	/** Props to pass to the next button (minus those already set by the SlideshowControls props). */
@@ -2257,8 +2241,6 @@ export interface SlideshowControlsProps extends GenericProps {
 	previousButtonProps: Pick<IconButtonProps, "label"> & Omit<IconButtonProps, "label" | "onClick" | "icon" | "emphasis" | "color">;
 	/** Number of slides. */
 	slidesCount: number;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** On next button click callback. */
 	onNextClick?(loopback?: boolean): void;
 	/** On pagination change callback. */
@@ -2276,15 +2258,11 @@ export declare const SlideshowControls: Comp<SlideshowControlsProps, HTMLDivElem
 	useSlideshowControls: ({ activeIndex, groupBy, interval, autoPlay, defaultActiveIndex, onChange, itemsCount, id, slidesId, }: import("../../hooks/useSlideshowControls").UseSlideshowControlsOptions) => import("../../hooks/useSlideshowControls").UseSlideshowControls;
 	useSlideshowControlsDefaultOptions: Partial<import("../../hooks/useSlideshowControls").UseSlideshowControlsOptions>;
 };
-export interface SlidesProps extends GenericProps {
+export interface SlidesProps extends GenericProps, HasTheme {
 	/** current slide active */
 	activeIndex: number;
 	/** slides id to be added to the wrapper */
 	id?: string;
-	/** custom classname */
-	className?: string;
-	/** custom theme */
-	theme?: Theme;
 	/** Whether the automatic rotation of the slideshow is enabled or not. */
 	autoPlay?: boolean;
 	/** Whether the image has to fill its container height or not. */
@@ -2311,7 +2289,7 @@ export declare const Slides: Comp<SlidesProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-export interface SwitchProps extends GenericProps {
+export interface SwitchProps extends GenericProps, HasTheme {
 	/** Helper text. */
 	helper?: string;
 	/** Whether it is checked or not. */
@@ -2322,8 +2300,6 @@ export interface SwitchProps extends GenericProps {
 	name?: string;
 	/** Position of the switch relative to the label. */
 	position?: Extract<Alignment, "right" | "left">;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** Native input value property. */
 	value?: string;
 	/** On change callback. */
@@ -2342,13 +2318,11 @@ export declare const Switch: Comp<SwitchProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-export interface TableProps extends GenericProps {
+export interface TableProps extends GenericProps, HasTheme {
 	/** Whether the table has checkbox or thumbnail on first cell or not. */
 	hasBefore?: boolean;
 	/** Whether the table has dividers or not. */
 	hasDividers?: boolean;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 }
 /**
  * Table component.
@@ -2469,7 +2443,7 @@ export declare enum TabListLayout {
 /**
  * Defines the props of the component.
  */
-export interface TabListProps extends GenericProps {
+export interface TabListProps extends GenericProps, HasTheme {
 	/** ARIA label (purpose of the set of tabs). */
 	["aria-label"]: string;
 	/** Tab list. */
@@ -2478,8 +2452,6 @@ export interface TabListProps extends GenericProps {
 	layout?: TabListLayout;
 	/** Position of the tabs in the list (requires 'clustered' layout). */
 	position?: Alignment;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 }
 /**
  * TabList component.
@@ -2540,7 +2512,7 @@ export declare const TabPanel: Comp<TabPanelProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-export interface TextFieldProps extends GenericProps {
+export interface TextFieldProps extends GenericProps, HasTheme {
 	/** Chip Group to be rendered before the main text input. */
 	chips?: HTMLElement | ReactNode;
 	/** Props to pass to the clear button (minus those already set by the TextField props). If not specified, the button won't be displayed. */
@@ -2560,7 +2532,7 @@ export interface TextFieldProps extends GenericProps {
 	/** Native input id property (generated if not provided to link the label element). */
 	id?: string;
 	/** Reference to the <input> or <textarea> element. */
-	inputRef?: RefObject<HTMLInputElement> | RefObject<HTMLTextAreaElement>;
+	inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement>;
 	/** Whether the component is disabled or not. */
 	isDisabled?: boolean;
 	/** Whether the component is required or not. */
@@ -2580,9 +2552,7 @@ export interface TextFieldProps extends GenericProps {
 	/** Placeholder text. */
 	placeholder?: string;
 	/** Reference to the wrapper. */
-	textFieldRef?: RefObject<HTMLDivElement>;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
+	textFieldRef?: Ref<HTMLDivElement>;
 	/** Value. */
 	value?: string;
 	/** On blur callback. */
@@ -2661,7 +2631,7 @@ export declare type UploaderSize = Extract<Size, "xl" | "xxl">;
 /**
  * Defines the props of the component.
  */
-export interface UploaderProps extends GenericProps {
+export interface UploaderProps extends GenericProps, HasTheme {
 	/** Image aspect ratio. */
 	aspectRatio?: AspectRatio;
 	/** Icon (SVG path). */
@@ -2670,8 +2640,6 @@ export interface UploaderProps extends GenericProps {
 	label?: string;
 	/** Size variant. */
 	size?: UploaderSize;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** Variant. */
 	variant?: UploaderVariant;
 	/** On click callback. */
@@ -2692,7 +2660,7 @@ export declare type UserBlockSize = Extract<Size, "s" | "m" | "l">;
 /**
  * Defines the props of the component.
  */
-export interface UserBlockProps extends GenericProps {
+export interface UserBlockProps extends GenericProps, HasTheme {
 	/** Props to pass to the avatar. */
 	avatarProps?: Omit<AvatarProps, "alt">;
 	/** Additional fields used to describe the user. */
@@ -2713,8 +2681,6 @@ export interface UserBlockProps extends GenericProps {
 	simpleAction?: ReactNode;
 	/** Size variant. */
 	size?: UserBlockSize;
-	/** Theme adapting the component to light or dark background. */
-	theme?: Theme;
 	/** On click callback. */
 	onClick?(): void;
 	/** On mouse enter callback. */