@axinom/mosaic-ui 0.66.0-rc.2 → 0.66.0-rc.20

package/src/components/Loaders/ImageLoader/ImageLoader.spec.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React, { ReactNode, SyntheticEvent } from 'react';
 import ContentLoader from 'react-content-loader';
 import { act } from 'react-dom/test-utils';
@@ -18,7 +18,7 @@ describe('ImageLoader', () => {
     const mockWidth = 'test-width';
     const mockAlt = 'test-alt';
 
-    const wrapper = shallow(
+    const wrapper = mount(
       <ImageLoader
         imgSrc={mockSrc}
         alt={mockAlt}
@@ -39,7 +39,7 @@ describe('ImageLoader', () => {
   });
 
   it('renders the loading animation while an image is loading', () => {
-    const wrapper = shallow(<ImageLoader imgSrc="" />);
+    const wrapper = mount(<ImageLoader imgSrc="" />);
 
     const loader = wrapper.find(ContentLoader);
     const imgDisplay = wrapper.find('img').prop('style')?.display;
@@ -49,9 +49,10 @@ describe('ImageLoader', () => {
   });
 
   it('renders the image after loading has completed', () => {
-    const wrapper = shallow(<ImageLoader imgSrc="" />);
+    const wrapper = mount(<ImageLoader imgSrc="" />);
 
     wrapper.find('img').prop('onLoad')!({} as SyntheticEvent);
+    wrapper.update();
 
     const loader = wrapper.find(ContentLoader);
     const imgDisplay = wrapper.find('img').prop('style')?.display;
@@ -63,7 +64,7 @@ describe('ImageLoader', () => {
   it('emits onLoad callback with img src after successful load', () => {
     const spy = jest.fn();
     const mockUrl = 'mock-url';
-    const wrapper = shallow(<ImageLoader imgSrc={mockUrl} onLoad={spy} />);
+    const wrapper = mount(<ImageLoader imgSrc={mockUrl} onLoad={spy} />);
 
     wrapper.find('img').prop('onLoad')!({} as SyntheticEvent);
 
@@ -77,9 +78,7 @@ describe('ImageLoader', () => {
     };
     const spy = jest.fn();
     const mockUrl = 'mock-url';
-    const wrapper = shallow(
-      <ImageLoader imgSrc={mockUrl} onImageClick={spy} />,
-    );
+    const wrapper = mount(<ImageLoader imgSrc={mockUrl} onImageClick={spy} />);
 
     const image = wrapper.find('img');
 
@@ -93,9 +92,10 @@ describe('ImageLoader', () => {
   });
 
   it('renders the fallback background color when loading has failed', () => {
-    const wrapper = shallow(<ImageLoader imgSrc="" />);
+    const wrapper = mount(<ImageLoader imgSrc="" />);
 
     wrapper.find('img').prop('onError')!({} as SyntheticEvent);
+    wrapper.update();
 
     const loader = wrapper.find(ContentLoader);
     const fallbackContainer = wrapper.find('.container').at(1);
@@ -107,11 +107,12 @@ describe('ImageLoader', () => {
 
   it('renders a fallback image when loading has failed', () => {
     const mockFallbackUrl = 'mock-url';
-    const wrapper = shallow(
+    const wrapper = mount(
       <ImageLoader imgSrc="" fallbackSrc={mockFallbackUrl} />,
     );
 
     wrapper.find('img').prop('onError')!({} as SyntheticEvent);
+    wrapper.update();
 
     const loader = wrapper.find(ContentLoader);
     const images = wrapper.find('img');
@@ -127,7 +128,7 @@ describe('ImageLoader', () => {
   it('emits onError callback with img src after load failure', () => {
     const spy = jest.fn();
     const mockUrl = 'mock-url';
-    const wrapper = shallow(<ImageLoader imgSrc={mockUrl} onError={spy} />);
+    const wrapper = mount(<ImageLoader imgSrc={mockUrl} onError={spy} />);
 
     wrapper.find('img').prop('onError')!({} as SyntheticEvent);
 
@@ -142,9 +143,7 @@ describe('ImageLoader', () => {
         <circle r="50" />
       </svg>
     );
-    const wrapper = shallow(
-      <ImageLoader imgSrc="" loadingSkeleton={mockSVG} />,
-    );
+    const wrapper = mount(<ImageLoader imgSrc="" loadingSkeleton={mockSVG} />);
 
     const svg = wrapper.find(`#${mockId}`);
 

package/src/components/Loaders/ImageLoader/ImageLoader.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import React, { ReactNode, useCallback, useEffect, useState } from 'react';
 import ContentLoader from 'react-content-loader';
 import { noop } from '../../../helpers/utils';
+import { ImgElement } from '../../VisualElements/ImgElement';
 import { SquareOutlineSkeleton } from '../skeletons';
 import classes from './ImageLoader.scss';
 
@@ -140,7 +141,7 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
       )}
       <div className={classes.imageContainer}>
         {state !== ImageLoaderState.Failed && imgSrc !== undefined && (
-          <img
+          <ImgElement
             src={imgSrc}
             height={imgHeight}
             width={imgWidth}
@@ -149,7 +150,7 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
               objectFit: 'contain',
               maxWidth: '100%',
             }}
-            alt={alt}
+            alt={alt ? alt : 'Loaded content image'}
             onLoad={onLoadHandler}
             onError={onErrorHandler}
             onClick={onImageClick}
@@ -159,11 +160,12 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
         )}
         {state === ImageLoaderState.Failed &&
           (fallbackSrc ? (
-            <img
+            <ImgElement
               className={classes.fallBackImage}
               src={String(fallbackSrc)}
               height={imgHeight}
               width={imgWidth}
+              alt="Image unavailable"
             />
           ) : (
             <div

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.tsx

@@ -9,6 +9,7 @@ import {
   useConfirmationDelay,
 } from '../../ConfirmDialog';
 import { IconName, Icons } from '../../Icons';
+import { ImgElement } from '../../VisualElements';
 import {
   PageHeaderActionProps,
   PageHeaderActionType,
@@ -142,7 +143,12 @@ const PageHeaderJSAction: React.FC<PageHeaderJsActionProps> = ({
         <div className={classes.icon}>
           {!confirmation &&
             (typeof icon === 'string' ? (
-              <img src={icon} alt={imgAlt} />
+              <ImgElement
+                src={icon}
+                {...(imgAlt
+                  ? { alt: imgAlt ?? `${label} icon` }
+                  : { decorative: true })}
+              />
             ) : (
               <Icons icon={icon} className={classes.pageHeaderActionsIcons} />
             ))}
@@ -208,7 +214,12 @@ const PageHeaderNavigationAction: React.FC<PageHeaderNavigationActionProps> = ({
     >
       <div className={classes.icon}>
         {typeof headerIcon === 'string' ? (
-          <img src={headerIcon} alt={imgAlt} />
+          <ImgElement
+            src={headerIcon}
+            {...(imgAlt
+              ? { alt: imgAlt ?? `${label} icon` }
+              : { decorative: true })}
+          />
         ) : (
           <Icons icon={headerIcon} className={classes.pageHeaderActionsIcons} />
         )}

package/src/components/Utils/Postgraphile/CreateConnectionRenderer.spec.ts

@@ -1,14 +1,5 @@
-import { TagsRenderer } from '../../List';
 import { createConnectionRenderer } from './CreateConnectionRenderer';
 
-jest.mock('../../List', () => ({
-  TagsRenderer: jest.fn(),
-}));
-
-const mockTagsRenderer = TagsRenderer as jest.MockedFunction<
-  typeof TagsRenderer
->;
-
 interface TestConnection {
   nodes: { id: string; name: string }[];
 }
@@ -18,70 +9,7 @@ interface StringConnection {
 }
 
 describe('createConnectionRenderer', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('with renderAsTags = true (default)', () => {
-    it('should call TagsRenderer with mapped values when renderAsTags is true', () => {
-      const mockReturnValue = 'Mocked Tags JSX Element';
-      mockTagsRenderer.mockReturnValue(mockReturnValue as any);
-
-      const connection: TestConnection = {
-        nodes: [
-          { id: '1', name: 'Item 1' },
-          { id: '2', name: 'Item 2' },
-        ],
-      };
-
-      const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
-      const result = renderer(connection);
-
-      expect(mockTagsRenderer).toHaveBeenCalledWith(['Item 1', 'Item 2']);
-      expect(result).toBe(mockReturnValue);
-    });
-
-    it('should throw error when nodes is undefined', () => {
-      const connection = { nodes: undefined } as unknown as TestConnection;
-      const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
-
-      expect(() => renderer(connection)).toThrow();
-      expect(mockTagsRenderer).not.toHaveBeenCalled();
-    });
-
-    it('should throw error when value is null', () => {
-      const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
-
-      expect(() => renderer(null)).toThrow();
-      expect(mockTagsRenderer).not.toHaveBeenCalled();
-    });
-
-    it('should throw error when value is undefined', () => {
-      const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
-
-      expect(() => renderer(undefined)).toThrow();
-      expect(mockTagsRenderer).not.toHaveBeenCalled();
-    });
-
-    it('should call TagsRenderer with empty array when nodes is empty', () => {
-      const mockReturnValue = 'Empty Tags JSX Element';
-      mockTagsRenderer.mockReturnValue(mockReturnValue as any);
-
-      const connection: TestConnection = { nodes: [] };
-      const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
-      const result = renderer(connection);
-
-      expect(mockTagsRenderer).toHaveBeenCalledWith([]);
-      expect(result).toBe(mockReturnValue);
-    });
-  });
-
-  describe('with renderAsTags = false', () => {
+  describe('basic functionality', () => {
     it('should return comma-separated string using selector', () => {
       const connection: TestConnection = {
         nodes: [
@@ -98,7 +26,6 @@ describe('createConnectionRenderer', () => {
       );
       const result = renderer(connection);
 
-      expect(mockTagsRenderer).not.toHaveBeenCalled();
       expect(result).toBe('Item 1, Item 2, Item 3');
     });
 
@@ -169,7 +96,7 @@ describe('createConnectionRenderer', () => {
       expect(result).toBe('100, 200');
     });
 
-    it('should throw error when connection.nodes is undefined and renderAsTags is false', () => {
+    it('should throw error when connection.nodes is undefined', () => {
       const connection = { nodes: undefined } as unknown as TestConnection;
       const selector = (item: { id: string; name: string }) => item.name;
       const renderer = createConnectionRenderer<TestConnection>(
@@ -179,6 +106,26 @@ describe('createConnectionRenderer', () => {
 
       expect(() => renderer(connection)).toThrow();
     });
+
+    it('should throw error when value is null', () => {
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
+
+      expect(() => renderer(null)).toThrow();
+    });
+
+    it('should throw error when value is undefined', () => {
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
+
+      expect(() => renderer(undefined)).toThrow();
+    });
   });
 
   describe('edge cases', () => {

package/src/components/VisualElements/ImgElement.spec.tsx

@@ -0,0 +1,92 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { ImgElement } from './ImgElement';
+
+describe('ImgElement', () => {
+  it('renders meaningful image with alt text', () => {
+    const alt = 'Test image';
+    const src = '/test.jpg';
+    const wrapper = shallow(<ImgElement src={src} alt={alt} />);
+
+    const img = wrapper.find('img');
+    expect(img.prop('src')).toBe(src);
+    expect(img.prop('alt')).toBe(alt);
+    expect(img.prop('aria-hidden')).toBeUndefined();
+    expect(img.prop('role')).toBeUndefined();
+  });
+
+  it('renders decorative image with accessibility attributes', () => {
+    const src = '/decorative.jpg';
+    const wrapper = shallow(<ImgElement src={src} decorative={true} />);
+
+    const img = wrapper.find('img');
+    expect(img.prop('src')).toBe(src);
+    expect(img.prop('alt')).toBe('');
+    expect(img.prop('aria-hidden')).toBe('true');
+    expect(img.prop('role')).toBe('presentation');
+  });
+
+  it('forwards additional HTML img attributes for meaningful images', () => {
+    const width = 100;
+    const height = 200;
+    const className = 'test-class';
+
+    const wrapper = shallow(
+      <ImgElement
+        src="/test.jpg"
+        alt="Test image"
+        width={width}
+        height={height}
+        className={className}
+      />,
+    );
+
+    const img = wrapper.find('img');
+    expect(img.prop('width')).toBe(width);
+    expect(img.prop('height')).toBe(height);
+    expect(img.prop('className')).toBe(className);
+  });
+
+  it('forwards additional HTML img attributes for decorative images', () => {
+    const width = 50;
+    const height = 60;
+    const className = 'icon';
+
+    const wrapper = shallow(
+      <ImgElement
+        src="/decorative.jpg"
+        decorative={true}
+        width={width}
+        height={height}
+        className={className}
+      />,
+    );
+
+    const img = wrapper.find('img');
+    expect(img.prop('width')).toBe(width);
+    expect(img.prop('height')).toBe(height);
+    expect(img.prop('className')).toBe(className);
+  });
+
+  it('uses meaningful image behavior by default', () => {
+    const alt = 'Default behavior';
+    const wrapper = shallow(<ImgElement src="/default.jpg" alt={alt} />);
+
+    const img = wrapper.find('img');
+    expect(img.prop('alt')).toBe(alt);
+    expect(img.prop('aria-hidden')).toBeUndefined();
+    expect(img.prop('role')).toBeUndefined();
+  });
+
+  it('renders with decorative=false explicitly', () => {
+    const alt = 'Explicit meaningful';
+    const wrapper = shallow(
+      <ImgElement src="/explicit.jpg" alt={alt} decorative={false} />,
+    );
+
+    const img = wrapper.find('img');
+    expect(img.prop('alt')).toBe(alt);
+    expect(img.prop('aria-hidden')).toBeUndefined();
+    expect(img.prop('role')).toBeUndefined();
+  });
+});

package/src/components/VisualElements/ImgElement.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+type BaseImgElementProps = Omit<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  'alt'
+>;
+
+/** Props for decorative images - alt text not needed or allowed */
+export interface DecorativeImageProps {
+  /** Whether the image is decorative (sets aria-hidden="true", alt="", and role="presentation") */
+  decorative: true;
+  /** Alt text - not needed when decorative */
+  alt?: never;
+}
+
+/** Props for meaningful images - alt text is required */
+export interface MeaningfulImageProps {
+  /** Whether the image is decorative (sets aria-hidden="true", alt="", and role="presentation") */
+  decorative?: false;
+  /** Alt text - required for non-decorative images */
+  alt: string;
+}
+
+/** Union type for all image accessibility configurations */
+export type ImageAccessibilityProps =
+  | DecorativeImageProps
+  | MeaningfulImageProps;
+
+export type ImgElementProps = BaseImgElementProps & ImageAccessibilityProps;
+
+/**
+ * Centralized image component with proper accessibility handling.
+ * Provides consistent image rendering across the application with automatic
+ * accessibility attributes based on the decorative flag.
+ *
+ * For non-decorative images, alt text is required to ensure accessibility.
+ * For decorative images, alt text is automatically set to empty string.
+ *
+ * @example Basic image with required alt text
+ * <ImgElement
+ *   src="/path/to/image.jpg"
+ *   alt="Description of the image"
+ * />
+ *
+ * @example Decorative image (alt not required or allowed)
+ * <ImgElement
+ *   src="/path/to/decorative.jpg"
+ *   decorative={true}
+ * />
+ *
+ * @example Navigation icon
+ * <ImgElement
+ *   src="/icons/menu.svg"
+ *   decorative={true}
+ *   width={24}
+ *   height={24}
+ * />
+ */
+export const ImgElement: React.FC<ImgElementProps> = ({
+  decorative = false,
+  ...imgProps
+}) => {
+  const accessibilityProps = decorative
+    ? {
+        'aria-hidden': 'true' as const,
+        alt: '',
+        role: 'presentation' as const,
+      }
+    : {};
+
+  return <img {...accessibilityProps} {...imgProps} />;
+};

package/src/components/VisualElements/SvgElement.spec.tsx

@@ -0,0 +1,160 @@
+import { mount, shallow } from 'enzyme';
+import React from 'react';
+import { SvgElement, SvgElementProps } from './SvgElement';
+
+describe('SvgElement', () => {
+  it('renders the component without crashing', () => {
+    const wrapper = shallow(<SvgElement />);
+
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('renders with default viewBox', () => {
+    const wrapper = mount(<SvgElement />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('viewBox')).toBe('0 0 40 40');
+  });
+
+  it('renders with custom viewBox', () => {
+    const customViewBox = '0 0 24 24';
+    const wrapper = mount(<SvgElement viewBox={customViewBox} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('viewBox')).toBe(customViewBox);
+  });
+
+  it('passes down className to svg element', () => {
+    const testClass = 'custom-icon-class';
+    const wrapper = mount(<SvgElement className={testClass} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.hasClass(testClass)).toBe(true);
+  });
+
+  it('renders children inside svg', () => {
+    const d = 'M10 10L20 20';
+    const cx = 15;
+    const cy = 15;
+    const r = 5;
+    const wrapper = mount(
+      <SvgElement>
+        <path d={d} />
+        <circle cx={cx} cy={cy} r={r} />
+      </SvgElement>,
+    );
+    const circle = wrapper.find('circle');
+
+    expect(wrapper.find('path')).toHaveLength(1);
+    expect(wrapper.find('circle')).toHaveLength(1);
+    expect(wrapper.find('path').prop('d')).toBe(d);
+    expect(circle.prop('cx')).toBe(cx);
+    expect(circle.prop('cy')).toBe(cy);
+    expect(circle.prop('r')).toBe(r);
+  });
+
+  it('renders as decorative icon by default', () => {
+    const wrapper = mount(<SvgElement />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('role')).toBe('presentation');
+    expect(svg.prop('aria-hidden')).toBe('true');
+    expect(svg.prop('aria-label')).toBeUndefined();
+  });
+
+  it('renders as semantic icon when aria-label is provided', () => {
+    const ariaLabel = 'Custom icon description';
+    const wrapper = mount(<SvgElement aria-label={ariaLabel} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('role')).toBe('img');
+    expect(svg.prop('aria-hidden')).toBeUndefined();
+    expect(svg.prop('aria-label')).toBe(ariaLabel);
+  });
+
+  it('renders as semantic icon when title is provided', () => {
+    const title = 'Icon tooltip';
+    const wrapper = mount(<SvgElement title={title} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('role')).toBe('img');
+    expect(svg.prop('aria-hidden')).toBeUndefined();
+    expect(wrapper.find('title')).toHaveLength(1);
+    expect(wrapper.find('title').text()).toBe(title);
+  });
+
+  it('renders as semantic icon when both aria-label and title are provided', () => {
+    const ariaLabel = 'Icon description';
+    const title = 'Icon tooltip';
+    const wrapper = mount(<SvgElement aria-label={ariaLabel} title={title} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('role')).toBe('img');
+    expect(svg.prop('aria-hidden')).toBeUndefined();
+    expect(svg.prop('aria-label')).toBe(ariaLabel);
+    expect(wrapper.find('title')).toHaveLength(1);
+    expect(wrapper.find('title').text()).toBe(title);
+  });
+
+  it('does not render title element when title prop is not provided', () => {
+    const wrapper = mount(<SvgElement aria-label="Icon" />);
+
+    expect(wrapper.find('title')).toHaveLength(0);
+  });
+
+  it('applies default SVG attributes', () => {
+    const wrapper = mount(<SvgElement />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('focusable')).toBe('false');
+  });
+
+  it('passes through additional SVG attributes', () => {
+    const customProps: SvgElementProps = {
+      id: 'custom-id',
+      'data-testid': 'custom-svg',
+      fill: 'currentColor',
+      stroke: 'red',
+      strokeWidth: '2',
+    };
+
+    const wrapper = mount(<SvgElement {...customProps} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('id')).toBe('custom-id');
+    expect(svg.prop('data-testid')).toBe('custom-svg');
+    expect(svg.prop('fill')).toBe('currentColor');
+    expect(svg.prop('stroke')).toBe('red');
+    expect(svg.prop('strokeWidth')).toBe('2');
+  });
+
+  it('allows overriding default attributes', () => {
+    const wrapper = mount(
+      <SvgElement
+        version="2.0"
+        xmlns="http://custom-namespace.com"
+        focusable="true"
+      />,
+    );
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('version')).toBe('2.0');
+    expect(svg.prop('xmlns')).toBe('http://custom-namespace.com');
+    expect(svg.prop('focusable')).toBe('true');
+  });
+
+  it('prioritizes explicit role over calculated role', () => {
+    const wrapper = mount(<SvgElement role="button" aria-label="Click me" />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('role')).toBe('button');
+  });
+
+  it('prioritizes explicit aria-hidden over calculated value', () => {
+    const wrapper = mount(<SvgElement aria-hidden="false" />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('aria-hidden')).toBe('false');
+    expect(svg.prop('role')).toBe('presentation'); // Still decorative without label/title
+  });
+});

package/src/components/VisualElements/SvgElement.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export interface SvgElementProps extends React.SVGAttributes<SVGElement> {
+  /** SVG title (tooltip or additional description shown on hover) */
+  title?: string;
+}
+
+/**
+ * Reusable SVG wrapper with accessibility support and default props.
+ * @example
+ * <SvgElement aria-label="Custom icon" title="Custom tooltip">
+ *   <path d="..." />
+ * </SvgElement>
+ */
+export const SvgElement: React.FC<SvgElementProps> = ({
+  children,
+  className,
+  'aria-label': ariaLabel,
+  title,
+  viewBox = '0 0 40 40',
+  ...svgProps
+}) => {
+  // Determine if this is a decorative icon (no accessible label or title)
+  const isDecorative = !ariaLabel && !title;
+
+  return (
+    <svg
+      className={className}
+      viewBox={viewBox}
+      role={isDecorative ? 'presentation' : 'img'}
+      aria-hidden={isDecorative ? 'true' : undefined}
+      aria-label={ariaLabel}
+      focusable="false"
+      {...svgProps}
+    >
+      {title && <title>{title}</title>}
+      {children}
+    </svg>
+  );
+};

package/src/components/VisualElements/index.ts

@@ -0,0 +1,7 @@
+export {
+  DecorativeImageProps,
+  ImgElement,
+  ImgElementProps,
+  MeaningfulImageProps,
+} from './ImgElement';
+export { SvgElement, SvgElementProps } from './SvgElement';

package/src/components/index.ts

@@ -25,4 +25,5 @@ export * from './PageHeader';
 export * from './ProgressBar';
 export * from './Tabs';
 export * from './Utils';
+export * from './VisualElements';
 export * from './models';