@lumx/react 3.7.6-alpha.6 → 3.7.6-alpha.8

package/index.d.ts

@@ -1387,7 +1387,7 @@ type InheritedThumbnailProps = Pick<ThumbnailProps, 'image' | 'alt' | 'imgProps'
 type InheritedImageMetadata = Pick<ImageCaptionMetadata, 'title' | 'description' | 'tags'>;
 type ImageProps = InheritedThumbnailProps & InheritedImageMetadata;
 interface ImagesProps {
-    /** Index of the active thumbnail to show on open */
+    /** Index of the active image to show on open */
     activeImageIndex?: number;
     /** List of images to display */
     images: Array<ImageProps>;

package/index.js

@@ -7655,35 +7655,27 @@ Icon.displayName = COMPONENT_NAME$w;
 Icon.className = CLASSNAME$t;
 Icon.defaultProps = DEFAULT_PROPS$p;
 
-/**
- * Component display name.
- */
-const COMPONENT_NAME$x = 'ImageBlock';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$u = getRootClassName(COMPONENT_NAME$x);
-
 /** Internal component used to render image captions */
 const ImageCaption = props => {
   const {
+    className,
     theme,
     as = 'figcaption',
     title,
     description,
     tags,
     captionStyle,
-    align
+    align,
+    truncate
   } = props;
   if (!title && !description && !tags) return null;
-  const titleColor = theme === 'dark' ? {
-    color: 'light'
-  } : undefined;
-  const descriptionColor = theme === 'dark' ? {
-    color: 'light',
+  const titleColor = {
+    color: theme === 'dark' ? 'light' : 'dark'
+  };
+  const descriptionColor = {
+    color: theme === 'dark' ? 'light' : 'dark',
     colorVariant: 'L2'
-  } : undefined;
+  };
 
   // Display description as string or HTML
   const descriptionContent = typeof description === 'string' ? {
@@ -7693,22 +7685,24 @@ const ImageCaption = props => {
   };
   return /*#__PURE__*/React.createElement(FlexBox, {
     as: as,
-    className: `${CLASSNAME$u}__wrapper`,
+    className: className,
     style: captionStyle,
     orientation: "horizontal",
-    vAlign: align
-  }, (title || description) && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$u}__caption`
+    vAlign: align,
+    hAlign: align === 'center' ? align : undefined,
+    gap: "regular"
+  }, (title || description) && /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    truncate: truncate
   }, title && /*#__PURE__*/React.createElement(Text, _extends({
     as: "span",
-    className: `${CLASSNAME$u}__title`
-  }, titleColor), title), title && description && '\u00A0', description && /*#__PURE__*/React.createElement(Text, _extends({
+    typography: "subtitle1"
+  }, titleColor), title), ' ', description && /*#__PURE__*/React.createElement(Text, _extends({
     as: "span",
-    className: `${CLASSNAME$u}__description`
+    typography: "body1"
   }, descriptionColor, descriptionContent))), tags && /*#__PURE__*/React.createElement(FlexBox, {
     orientation: "horizontal",
-    vAlign: align,
-    className: `${CLASSNAME$u}__tags`
+    vAlign: align
   }, tags));
 };
 
@@ -7730,6 +7724,16 @@ const ImageBlockCaptionPosition = {
  * Defines the props of the component.
  */
 
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$x = 'ImageBlock';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$u = getRootClassName(COMPONENT_NAME$x);
+
 /**
  * Component default props.
  */
@@ -7783,11 +7787,14 @@ const ImageBlock = /*#__PURE__*/forwardRef((props, ref) => {
     theme: theme,
     alt: alt || title
   })), /*#__PURE__*/React.createElement(ImageCaption, {
+    className: `${CLASSNAME$u}__wrapper`,
+    theme: theme,
     title: title,
     description: description,
     tags: tags,
     captionStyle: captionStyle,
-    align: align
+    align: align,
+    truncate: captionPosition === 'over'
   }), actions && /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$u}__actions`
   }, actions));