@lumx/react 3.8.0 → 3.8.1

package/index.d.ts

@@ -1323,13 +1323,18 @@ interface ThumbnailProps extends GenericProps, HasTheme {
  */
 declare const Thumbnail: Comp<ThumbnailProps>;
 
+type ForwardedTextProps = Omit<TextProps, 'as' | 'typography' | 'color' | 'colorVariant'>;
 type ImageCaptionMetadata = {
     /** Image title to display in the caption. */
     title?: string;
+    /** Props to pass to the title. */
+    titleProps?: ForwardedTextProps;
     /** Image description. Can be either a string, or sanitized html. */
     description?: string | {
         __html: string;
     };
+    /** Props to pass to the title. */
+    descriptionProps?: ForwardedTextProps;
     /** Tag content. */
     tags?: ReactNode;
     /** Caption custom CSS style. */

package/index.js

@@ -7658,11 +7658,13 @@ Icon.defaultProps = DEFAULT_PROPS$p;
 /** Internal component used to render image captions */
 const ImageCaption = props => {
   const {
-    className,
+    baseClassName,
     theme,
     as = 'figcaption',
     title,
+    titleProps,
     description,
+    descriptionProps,
     tags,
     captionStyle,
     align,
@@ -7685,7 +7687,7 @@ const ImageCaption = props => {
   };
   return /*#__PURE__*/React.createElement(FlexBox, {
     as: as,
-    className: className,
+    className: classnames(baseClassName && `${baseClassName}__wrapper`),
     style: captionStyle,
     orientation: "vertical",
     vAlign: align,
@@ -7693,20 +7695,24 @@ const ImageCaption = props => {
     gap: "regular"
   }, (title || description) && /*#__PURE__*/React.createElement(Text, _extends({
     as: "p",
+    className: classnames(baseClassName && `${baseClassName}__caption`),
     truncate: truncate
-  }, baseColor), title && /*#__PURE__*/React.createElement(Text, _extends({
+  }, baseColor), title && /*#__PURE__*/React.createElement(Text, _extends({}, titleProps, {
     as: "span",
+    className: classnames(titleProps === null || titleProps === void 0 ? void 0 : titleProps.className, baseClassName && `${baseClassName}__title`),
     typography: "subtitle1"
-  }, titleColor), title), ' ', description && /*#__PURE__*/React.createElement(Text, _extends({
+  }, titleColor), title), ' ', description && /*#__PURE__*/React.createElement(Text, _extends({}, descriptionProps, {
     as: "span",
+    className: classnames(descriptionProps === null || descriptionProps === void 0 ? void 0 : descriptionProps.className, baseClassName && `${baseClassName}__description`),
     typography: "body1"
   }, descriptionContent))), tags && /*#__PURE__*/React.createElement(FlexBox, {
+    className: classnames(baseClassName && `${baseClassName}__tags`),
     orientation: "horizontal",
     vAlign: align
   }, tags));
 };
 
-const _excluded$y = ["actions", "align", "alt", "captionPosition", "captionStyle", "className", "description", "fillHeight", "image", "size", "tags", "theme", "thumbnailProps", "title"];
+const _excluded$y = ["actions", "align", "alt", "captionPosition", "captionStyle", "className", "description", "descriptionProps", "fillHeight", "image", "size", "tags", "theme", "thumbnailProps", "title", "titleProps"];
 
 /**
  * Image block variants.
@@ -7759,13 +7765,15 @@ const ImageBlock = /*#__PURE__*/forwardRef((props, ref) => {
       captionStyle,
       className,
       description,
+      descriptionProps,
       fillHeight,
       image,
       size,
       tags,
       theme,
       thumbnailProps,
-      title
+      title,
+      titleProps
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$y);
   return /*#__PURE__*/React.createElement("figure", _extends({
@@ -7788,10 +7796,12 @@ const ImageBlock = /*#__PURE__*/forwardRef((props, ref) => {
     alt: alt || title
   })), /*#__PURE__*/React.createElement(ImageCaption, {
     as: "figcaption",
-    className: `${CLASSNAME$u}__wrapper`,
+    baseClassName: CLASSNAME$u,
     theme: theme,
     title: title,
+    titleProps: titleProps,
     description: description,
+    descriptionProps: descriptionProps,
     tags: tags,
     captionStyle: captionStyle,
     align: align,