@lumx/react 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/packages/lumx-core/src/js/components/GenericBlock/constants.js

@@ -0,0 +1,15 @@
+import { Size } from "../../constants/enums/index.js";
+import pick from "lodash/pick.js";
+//#region ../lumx-core/src/js/components/GenericBlock/constants.ts
+/**
+* Accepted gap sizes for the generic block.
+*/
+var GenericBlockGapSize = pick(Size, [
+	"tiny",
+	"regular",
+	"medium",
+	"big",
+	"huge"
+]);
+//#endregion
+export { GenericBlockGapSize };

package/_internal/packages/lumx-core/src/js/components/GenericBlock/index.d.ts

@@ -0,0 +1,66 @@
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { FlexBoxProps } from "../FlexBox/index.js";
+import { GenericBlockGapSize } from "./constants.js";
+
+//#region ../lumx-core/src/js/components/GenericBlock/index.d.ts
+interface GenericBlockProps extends FlexBoxProps {
+  /**
+   * Component to use as visual element.
+   */
+  figure?: JSXElement;
+  /**
+   * Main content.
+   */
+  content?: JSXElement;
+  /**
+   * Actions to set after the main content.
+   */
+  actions?: JSXElement;
+  /**
+   * Orientation of the 3 sections
+   */
+  orientation?: FlexBoxProps['orientation'];
+  /**
+   * Horizontal alignment.
+   */
+  horizontalAlign?: FlexBoxProps['hAlign'];
+  /**
+   * Vertical alignment.
+   */
+  verticalAlign?: 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.
+   */
+  actionsProps?: Omit<FlexBoxProps, 'children'>;
+  /**
+   * props to forward to the figure element.
+   */
+  figureProps?: Omit<FlexBoxProps, 'children'>;
+  /**
+   * FlexBox component
+   */
+  FlexBox: (props: FlexBoxProps) => any;
+  /**
+   * Gap space between sections.
+   */
+  gap?: GenericBlockGapSize;
+  /**
+   * reference to the root element
+   */
+  ref?: CommonRef;
+}
+interface GenericBlockSectionProps extends FlexBoxProps {
+  /**
+   * Gap space between items.
+   */
+  gap?: GenericBlockGapSize;
+}
+type GenericBlockPropsToOverride = 'FlexBox' | 'content';
+//#endregion
+export { GenericBlockProps, GenericBlockPropsToOverride, GenericBlockSectionProps };

package/_internal/packages/lumx-core/src/js/components/GenericBlock/index.js

@@ -0,0 +1,63 @@
+import { Orientation, Size } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/GenericBlock/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "GenericBlock";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-generic-block";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	gap: Size.big,
+	orientation: Orientation.horizontal
+};
+/**
+* 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:
+* - `Figure` => A visual element to display before the main content.
+* - `Content` => The main content displayed
+* - `Actions` => One or more actions to set after the element.
+*
+* @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
+*/
+var GenericBlock = (props) => {
+	const { className, figure, figureProps, children, actions, actionsProps, gap = DEFAULT_PROPS.gap, ref, content, orientation = DEFAULT_PROPS.orientation, contentProps, FlexBox, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsxs(FlexBox, {
+		ref,
+		className: import_classnames.default(className, block()),
+		gap,
+		orientation,
+		...forwardedProps,
+		children: [
+			figure && /* @__PURE__ */ jsx(FlexBox, {
+				...figureProps,
+				className: import_classnames.default(figureProps?.className, element("figure")),
+				children: figure
+			}),
+			content && /* @__PURE__ */ jsx(FlexBox, {
+				orientation: Orientation.vertical,
+				fillSpace: true,
+				...contentProps,
+				className: import_classnames.default(contentProps?.className, element("content")),
+				children: content
+			}),
+			actions && /* @__PURE__ */ jsx(FlexBox, {
+				...actionsProps,
+				className: import_classnames.default(actionsProps?.className, element("actions")),
+				children: actions
+			})
+		]
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, GenericBlock };

package/_internal/packages/lumx-core/src/js/components/GridColumn/GridColumn.d.ts

@@ -0,0 +1,27 @@
+import { Size } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/GridColumn/GridColumn.d.ts
+type GridColumnGapSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
+/**
+ * Defines the props of the component.
+ */
+interface GridColumnProps extends HasClassName {
+  /** Customize the root element. */
+  as?: any;
+  /** Children elements. */
+  children?: JSXElement;
+  /** Space between columns and rows. */
+  gap?: GridColumnGapSize;
+  /** Ideal number of columns. */
+  maxColumns?: number;
+  /** Minimum width for each item, reduce the number of column if there is not enough space. */
+  itemMinWidth?: number;
+  /** Custom styles. */
+  style?: any;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { GridColumnGapSize, GridColumnProps };

package/_internal/packages/lumx-core/src/js/components/GridColumn/GridColumn.js

@@ -0,0 +1,44 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx } from "react/jsx-runtime";
+import isInteger from "lodash/isInteger.js";
+//#region ../lumx-core/src/js/components/GridColumn/GridColumn.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "GridColumn";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-grid-column";
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* The GridColumn is a layout component that can display children in a grid
+* with custom display properties. It also comes with a responsive design,
+* with a number of column that reduce when there is not enough space for each item.
+*
+* @param props Component props.
+* @return JSX element.
+*/
+var GridColumn = (props) => {
+	const { as: Component = "div", gap, maxColumns, itemMinWidth, children, className, style = {}, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx(Component, {
+		...forwardedProps,
+		ref,
+		className: import_classnames.default(className, CLASSNAME),
+		style: {
+			...style,
+			["--lumx-grid-column-item-min-width"]: isInteger(itemMinWidth) && `${itemMinWidth}px`,
+			["--lumx-grid-column-columns"]: maxColumns,
+			["--lumx-grid-column-gap"]: gap && `var(--lumx-spacing-unit-${gap})`
+		},
+		children
+	});
+};
+GridColumn.displayName = COMPONENT_NAME;
+GridColumn.className = CLASSNAME;
+GridColumn.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, GridColumn };

package/_internal/packages/lumx-core/src/js/components/GridColumn/index.d.ts

@@ -0,0 +1 @@
+import { GridColumnGapSize, GridColumnProps } from "./GridColumn.js";

package/_internal/packages/lumx-core/src/js/components/Heading/constants.js

@@ -0,0 +1,19 @@
+import { Typography } from "../../constants/enums/index.js";
+//#region ../lumx-core/src/js/components/Heading/constants.ts
+/**
+* Typography to use by default depending on the heading level.
+*/
+var DEFAULT_TYPOGRAPHY_BY_LEVEL = {
+	h1: Typography.display1,
+	h2: Typography.headline,
+	h3: Typography.title,
+	h4: Typography.subtitle2,
+	h5: Typography.subtitle1,
+	h6: Typography.body2
+};
+var defaultContext = {
+	level: 1,
+	headingElement: "h1"
+};
+//#endregion
+export { DEFAULT_TYPOGRAPHY_BY_LEVEL, defaultContext };

package/_internal/packages/lumx-core/src/js/components/Heading/index.d.ts

@@ -0,0 +1,14 @@
+import { HeadingElement } from "../../types/HeadingElement.js";
+import { TextProps } from "../Text/index.js";
+//#region ../lumx-core/src/js/components/Heading/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface HeadingProps extends Partial<TextProps> {
+  /**
+   * Display a specific heading level instead of the one provided by parent context provider.
+   */
+  as?: HeadingElement;
+}
+//#endregion
+export { HeadingProps };

package/_internal/packages/lumx-core/src/js/components/Heading/index.js

@@ -0,0 +1,34 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { DEFAULT_TYPOGRAPHY_BY_LEVEL } from "./constants.js";
+//#region ../lumx-core/src/js/components/Heading/index.ts
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Heading";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-heading";
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* Get Heading component common props
+*
+* @param props                 Component props.
+* @param contextHeadingElement Heading element from context.
+* @return Common Props
+*/
+var getHeadingProps = (props, contextHeadingElement) => {
+	const { as, className, typography, ...otherProps } = props;
+	const computedHeadingElement = as || contextHeadingElement || "h1";
+	return {
+		...otherProps,
+		as: computedHeadingElement,
+		className: import_classnames.default(className, CLASSNAME),
+		typography: typography || DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]
+	};
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, getHeadingProps };

package/_internal/packages/lumx-core/src/js/components/Heading/utils.js

@@ -0,0 +1,14 @@
+//#region ../lumx-core/src/js/components/Heading/utils.ts
+/**
+* Computes the next heading level based on the optional prop level or the parent context level.
+*
+* @param levelProp - The explicit level provided via props (optional).
+* @param parentLevel - The level from the parent context.
+* @returns The calculated heading level, clamped to the maximum allowed level.
+*/
+var computeHeadingLevel = (levelProp, parentLevel) => {
+	const nextLevel = levelProp || parentLevel + 1;
+	return nextLevel > 6 ? 6 : nextLevel;
+};
+//#endregion
+export { computeHeadingLevel };

package/_internal/packages/lumx-core/src/js/components/Icon/constants.d.ts

@@ -0,0 +1,4 @@
+//#region ../lumx-core/src/js/components/Icon/constants.d.ts
+declare const ICON_SIZES: ("m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl")[];
+//#endregion
+export { ICON_SIZES };

package/_internal/packages/lumx-core/src/js/components/Icon/index.d.ts

@@ -0,0 +1,34 @@
+import { ColorVariant, ColorWithVariants } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { ICON_SIZES } from "./constants.js";
+
+//#region ../lumx-core/src/js/components/Icon/index.d.ts
+type IconSizes = (typeof ICON_SIZES)[number];
+/**
+ * Defines the props of the component.
+ */
+interface IconProps extends HasClassName, HasTheme {
+  /** Color variant. */
+  color?: ColorWithVariants;
+  /** Lightened or darkened variant of the selected icon color. */
+  colorVariant?: ColorVariant;
+  /** Whether the icon has a shape. */
+  hasShape?: boolean;
+  /**
+   * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
+   * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
+   */
+  icon: string;
+  /** Size variant. */
+  size?: IconSizes;
+  /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
+  alt?: string;
+  /** Vertical alignment of the icon (only applies for icons nested in Text/Heading). */
+  verticalAlign?: null | 'middle';
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { IconProps, IconSizes };

package/_internal/packages/lumx-core/src/js/components/Icon/index.js

@@ -0,0 +1,66 @@
+import { ColorPalette, Size, Theme } from "../../constants/enums/index.js";
+import { resolveColorWithVariants } from "../../utils/_internal/color/resolveColorWithVariants.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { mdiAlertCircle } from "@lumx/icons/esm/alert-circle.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Icon/index.tsx
+var COMPONENT_NAME = "Icon";
+var CLASSNAME = "lumx-icon";
+var { block } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* Icon component.
+*
+* @param  props Component props.
+*/
+var Icon = (props) => {
+	const { className, color: propColor, colorVariant: propColorVariant, hasShape, icon, size, ref, theme, alt, verticalAlign, ...forwardedProps } = props;
+	const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
+	let iconColor = color;
+	if (!iconColor && (hasShape || theme)) iconColor = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
+	let iconColorVariant = colorVariant;
+	if (!iconColorVariant && hasShape && iconColor === ColorPalette.dark) iconColorVariant = "L2";
+	let iconSize = size;
+	if (size && hasShape) {
+		if (size === Size.xxs || size === Size.xs) iconSize = Size.s;
+		else if (size === Size.xxl) iconSize = Size.xl;
+	} else if (hasShape) iconSize = Size.m;
+	return /* @__PURE__ */ jsx("i", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			[`color-${iconColor}`]: Boolean(iconColor),
+			[`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
+			"has-shape": hasShape,
+			[`theme-${theme}`]: Boolean(theme),
+			[`size-${iconSize}`]: Boolean(iconSize),
+			"no-shape": !hasShape,
+			"has-dark-layer": Boolean(!hasShape && iconColor === ColorPalette.yellow && icon === mdiAlertCircle),
+			path: true,
+			"vertical-align-middle": verticalAlign === "middle"
+		})),
+		children: /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": alt ? void 0 : "true",
+			role: alt ? "img" : void 0,
+			"aria-label": alt,
+			height: "1em",
+			preserveAspectRatio: "xMidYMid meet",
+			style: { verticalAlign: verticalAlign ? void 0 : "-0.125em" },
+			viewBox: "0 0 24 24",
+			width: "1em",
+			children: /* @__PURE__ */ jsx("path", {
+				d: icon,
+				fill: "currentColor"
+			})
+		})
+	});
+};
+Icon.displayName = COMPONENT_NAME;
+Icon.className = CLASSNAME;
+Icon.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Icon };

package/_internal/packages/lumx-core/src/js/components/ImageBlock/ImageCaption.d.ts

@@ -0,0 +1,19 @@
+import { GenericProps } from "../../types/GenericProps.js";
+import { JSXElement } from "../../types/JSXElement.js";
+//#region ../lumx-core/src/js/components/ImageBlock/ImageCaption.d.ts
+type ImageCaptionMetadata = {
+  /** Image title to display in the caption. */title?: string; /** Props to pass to the title. */
+  titleProps?: GenericProps; /** Image description. Can be either a string, ReactNode, or sanitized html object. */
+  description?: JSXElement | {
+    __html: string;
+  }; /** Props to pass to the description. */
+  descriptionProps?: GenericProps; /** Tag content. */
+  tags?: JSXElement; /** Caption custom CSS style. */
+  captionStyle?: GenericProps; /** Props to pass to the wrapper FlexBox element. */
+  wrapperProps?: GenericProps; /** FlexBox component injected by the framework wrapper (React or Vue). */
+  FlexBox: any; /** Text component injected by the framework wrapper (React or Vue). */
+  Text: any;
+};
+type ImageCaptionPropsToOverride = 'FlexBox' | 'Text' | 'wrapperProps';
+//#endregion
+export { ImageCaptionMetadata, ImageCaptionPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/ImageBlock/ImageCaption.js

@@ -0,0 +1,61 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/ImageBlock/ImageCaption.tsx
+/** Internal component used to render image captions */
+var ImageCaption = (props) => {
+	const { baseClassName, theme, as = "figcaption", title, titleProps, description, descriptionProps, tags, captionStyle, align, truncate, FlexBox, Text, wrapperProps = {
+		vAlign: align,
+		hAlign: align === "center" ? align : void 0
+	} } = props;
+	if (!title && !description && !tags) return null;
+	const titleColor = { color: theme === "dark" ? "light" : "dark" };
+	const baseColor = {
+		color: theme === "dark" ? "light" : "dark",
+		colorVariant: "L2"
+	};
+	return /* @__PURE__ */ jsxs(FlexBox, {
+		as,
+		className: import_classnames.default(baseClassName && `${baseClassName}__wrapper`),
+		style: captionStyle,
+		orientation: "vertical",
+		gap: "regular",
+		...wrapperProps,
+		children: [(title || description) && /* @__PURE__ */ jsxs(Text, {
+			as: "p",
+			className: import_classnames.default(baseClassName && `${baseClassName}__caption`),
+			truncate,
+			...baseColor,
+			children: [
+				title && /* @__PURE__ */ jsx(Text, {
+					...titleProps,
+					as: "span",
+					className: import_classnames.default(titleProps?.className, baseClassName && `${baseClassName}__title`),
+					typography: "subtitle1",
+					...titleColor,
+					children: title
+				}),
+				" ",
+				description && (typeof description === "object" && "__html" in description ? /* @__PURE__ */ jsx(Text, {
+					...descriptionProps,
+					as: "span",
+					className: import_classnames.default(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
+					typography: "body1",
+					dangerouslySetInnerHTML: description
+				}) : /* @__PURE__ */ jsx(Text, {
+					...descriptionProps,
+					as: "span",
+					className: import_classnames.default(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
+					typography: "body1",
+					children: description
+				}))
+			]
+		}), tags && /* @__PURE__ */ jsx(FlexBox, {
+			className: import_classnames.default(baseClassName && `${baseClassName}__tags`),
+			orientation: "horizontal",
+			vAlign: align,
+			children: tags
+		})]
+	});
+};
+//#endregion
+export { ImageCaption };

package/_internal/packages/lumx-core/src/js/components/ImageBlock/index.d.ts

@@ -0,0 +1,52 @@
+import { HorizontalAlignment, Size } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { GenericProps } from "../../types/GenericProps.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { ValueOf } from "../../types/ValueOf.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { ImageCaptionMetadata, ImageCaptionPropsToOverride } from "./ImageCaption.js";
+
+//#region ../lumx-core/src/js/components/ImageBlock/index.d.ts
+/**
+ * Image block variants.
+ */
+declare const ImageBlockCaptionPosition: {
+  readonly below: "below";
+  readonly over: "over";
+};
+type ImageBlockCaptionPosition = ValueOf<typeof ImageBlockCaptionPosition>;
+/**
+ *  Image block sizes.
+ */
+type ImageBlockSize = Extract<Size, 'xl' | 'xxl'>;
+/**
+ * Defines the props of the component.
+ */
+interface ImageBlockProps extends HasClassName, HasTheme, Omit<ImageCaptionMetadata, ImageCaptionPropsToOverride> {
+  /** Action toolbar content. */
+  actions?: JSXElement;
+  /** Alignment. */
+  align?: HorizontalAlignment;
+  /** Image alternative text. */
+  alt: string;
+  /** Caption position. */
+  captionPosition?: ImageBlockCaptionPosition;
+  /** Whether the image has to fill its container height or not. */
+  fillHeight?: boolean;
+  /** Image URL. */
+  image: string;
+  /** Size variant. */
+  size?: ImageBlockSize;
+  /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */
+  thumbnailProps?: GenericProps;
+  /** reference to the root element */
+  ref?: CommonRef;
+  /** component for rendering the thumbnail */
+  Thumbnail: any;
+  /** component for rendering the image caption */
+  ImageCaption: any;
+}
+type ImageBlockPropsToOverride = 'Thumbnail' | 'ImageCaption' | 'thumbnailProps';
+//#endregion
+export { ImageBlockCaptionPosition, ImageBlockProps, ImageBlockPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/ImageBlock/index.js

@@ -0,0 +1,80 @@
+import { Alignment } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/ImageBlock/index.tsx
+/**
+* Image block variants.
+*/
+var ImageBlockCaptionPosition = {
+	below: "below",
+	over: "over"
+};
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ImageBlock";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-image-block";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	captionPosition: ImageBlockCaptionPosition.below,
+	align: Alignment.left
+};
+/**
+* ImageBlock component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var ImageBlock = (props) => {
+	const { actions, align = DEFAULT_PROPS.align, alt, captionPosition = DEFAULT_PROPS.captionPosition, captionStyle, className, description, descriptionProps, fillHeight, image, size, tags, ref, theme, thumbnailProps, title, titleProps, Thumbnail, ImageCaption, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsxs("figure", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			[`caption-position-${captionPosition}`]: Boolean(captionPosition),
+			[`align-${align}`]: Boolean(align),
+			[`size-${size}`]: Boolean(size),
+			[`theme-${theme}`]: Boolean(theme),
+			"fill-height": fillHeight
+		})),
+		children: [
+			/* @__PURE__ */ jsx(Thumbnail, {
+				...thumbnailProps,
+				className: import_classnames.default(element("image"), thumbnailProps?.className),
+				fillHeight,
+				align,
+				image,
+				size,
+				theme,
+				alt: alt || title
+			}),
+			/* @__PURE__ */ jsx(ImageCaption, {
+				as: "figcaption",
+				baseClassName: CLASSNAME,
+				theme,
+				title,
+				titleProps,
+				description,
+				descriptionProps,
+				tags,
+				captionStyle,
+				align,
+				truncate: captionPosition === "over"
+			}),
+			actions && /* @__PURE__ */ jsx("div", {
+				className: element("actions"),
+				children: actions
+			})
+		]
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ImageBlock, ImageBlockCaptionPosition };

package/_internal/packages/lumx-core/src/js/components/InlineList/index.d.ts

@@ -0,0 +1,34 @@
+import { ColorVariant, ColorWithVariants, Typography } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/InlineList/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface InlineListProps extends HasClassName {
+  /**
+   * List items to render.
+   */
+  items?: JSXElement[];
+  /**
+   * Text color.
+   */
+  color?: ColorWithVariants;
+  /**
+   * Lightened or darkened variant of the selected color.
+   */
+  colorVariant?: ColorVariant;
+  /**
+   * Typography variant.
+   */
+  typography?: Typography;
+  /**
+   * Activate line wrap on overflow.
+   */
+  wrap?: boolean;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { InlineListProps };