@envive-ai/react-toolkit-v3 0.3.5

package/src/components/ImageGallery/components/Layout.tsx

@@ -0,0 +1,80 @@
+import classNames from 'classnames';
+import { Theme } from '../../../../tokens/theme/theme';
+import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
+import { ResponsiveValue, useResponsiveValue } from '../../utils/useResponsiveValue';
+import { Container } from '../../Container/Container';
+import { ImageGalleryLayout } from '../types/types';
+import { useGetContainerProperties } from '../hooks/useGetContainerProperties';
+import { useValidateImages } from '../hooks/useValidateImages';
+import { getIsTwoSideStandardOnMobile } from '../utils/functions';
+import { OverlappedLayout } from './OverlappedLayout';
+import { NormalLayout } from './NormalLayout';
+
+export interface LayoutProps {
+  id?: string;
+  testId?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  images: React.ReactNode[];
+  layout: ResponsiveValue<ImageGalleryLayout>;
+  theme: Theme;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  role?: string;
+  'aria-hidden'?: boolean;
+}
+
+export const Layout = ({
+  id,
+  testId,
+  className,
+  style,
+  images,
+  layout,
+  theme = Theme.GLOBAL_CUSTOM,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
+  role,
+  'aria-hidden': ariaHidden,
+}: LayoutProps) => {
+  const resolvedLayout = useResponsiveValue<ImageGalleryLayout>({
+    value: layout,
+    fallback: ImageGalleryLayout.FOUR_GRID,
+  });
+
+  const { isMobile } = useCheckIsMobile();
+
+  const { displayImages } = useValidateImages({ images, resolvedLayout });
+
+  const isTwoSideStandardOnMobile = getIsTwoSideStandardOnMobile({
+    theme,
+    resolvedLayout,
+    isMobile,
+  });
+
+  const { containerClasses } = useGetContainerProperties({
+    isTwoSideStandardOnMobile,
+    resolvedLayout,
+  });
+
+  return (
+    <Container
+      id={id}
+      testId={testId}
+      className={classNames(containerClasses, className)}
+      fluid
+      style={style}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-describedby={ariaDescribedBy}
+      role={role}
+      aria-hidden={ariaHidden}
+    >
+      {isTwoSideStandardOnMobile && <OverlappedLayout displayImages={displayImages} />}
+
+      {!isTwoSideStandardOnMobile && <NormalLayout displayImages={displayImages} />}
+    </Container>
+  );
+};

package/src/components/ImageGallery/components/NormalLayout.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export interface NormalLayoutProps {
+  displayImages: React.ReactNode[];
+}
+
+export const NormalLayout = ({ displayImages }: NormalLayoutProps) => {
+  return displayImages.map(image => (
+    <React.Fragment key={`image-${Math.random()}`}>{image}</React.Fragment>
+  ));
+};

package/src/components/ImageGallery/components/OverlappedLayout.tsx

@@ -0,0 +1,17 @@
+export interface OverlappedLayoutProps {
+  displayImages: React.ReactNode[];
+}
+
+export const OverlappedLayout = ({ displayImages }: OverlappedLayoutProps) => {
+  return (
+    <>
+      <div className="envive-tw-absolute envive-tw-left-[0px] envive-tw-top-[0px] envive-tw-z-10 envive-tw-w-[80%]">
+        {displayImages[0]}
+      </div>
+
+      <div className="envive-tw-absolute envive-tw-right-[0px] envive-tw-top-[0px] envive-tw-w-[80%] envive-tw-translate-y-[73.75%]">
+        {displayImages[1]}
+      </div>
+    </>
+  );
+};

package/src/components/ImageGallery/components/index.ts

@@ -0,0 +1,11 @@
+import { Layout } from './Layout';
+import { ImageItem } from './ImageItem';
+import { OverlappedLayout } from './OverlappedLayout';
+import { NormalLayout } from './NormalLayout';
+
+export const ImageGalleryComponents = {
+  Layout,
+  ImageItem,
+  OverlappedLayout,
+  NormalLayout,
+};

package/src/components/ImageGallery/hooks/useGetContainerProperties.ts

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import { ImageGalleryLayout } from '../types/types';
+
+interface UseGetContainerPropertiesProps {
+  isTwoSideStandardOnMobile: boolean;
+  resolvedLayout: ImageGalleryLayout;
+}
+
+export const useGetContainerProperties = ({
+  isTwoSideStandardOnMobile,
+  resolvedLayout,
+}: UseGetContainerPropertiesProps) => {
+  const containerClasses = useMemo(() => {
+    if (isTwoSideStandardOnMobile) {
+      return 'envive-tw-relative';
+    }
+
+    return {
+      [ImageGalleryLayout.SINGLE]: 'envive-tw-grid envive-tw-grid-cols-1 envive-tw-gap-2',
+      [ImageGalleryLayout.TWO_SIDE]: 'envive-tw-grid envive-tw-grid-cols-2 envive-tw-gap-2',
+      [ImageGalleryLayout.FOUR_HORIZONTAL]: 'envive-tw-grid envive-tw-grid-cols-4 envive-tw-gap-2',
+      [ImageGalleryLayout.FOUR_GRID]:
+        'envive-tw-grid envive-tw-grid-cols-2 envive-tw-grid-rows-2 envive-tw-gap-2',
+    }[resolvedLayout];
+  }, [isTwoSideStandardOnMobile, resolvedLayout]);
+
+  return {
+    containerClasses,
+  };
+};

package/src/components/ImageGallery/hooks/useValidateImages.ts

@@ -0,0 +1,29 @@
+import { ImageGalleryLayout } from '../types/types';
+
+interface UseValidateImagesProps {
+  images: React.ReactNode[];
+  resolvedLayout: ImageGalleryLayout;
+}
+
+export const useValidateImages = ({ images, resolvedLayout }: UseValidateImagesProps) => {
+  const requiredImages = {
+    [ImageGalleryLayout.SINGLE]: 1,
+    [ImageGalleryLayout.TWO_SIDE]: 2,
+    [ImageGalleryLayout.FOUR_HORIZONTAL]: 4,
+    [ImageGalleryLayout.FOUR_GRID]: 4,
+  }[resolvedLayout];
+
+  const imageCount = images.length;
+
+  if (imageCount < requiredImages) {
+    throw new Error(
+      `ImageLayout: Expected at least ${requiredImages} image(s) for layout "${resolvedLayout}", but received ${imageCount}.`,
+    );
+  }
+
+  const displayImages = images.slice(0, requiredImages);
+
+  return {
+    displayImages,
+  };
+};

package/src/components/ImageGallery/index.ts

@@ -0,0 +1,3 @@
+export { ImageGallery } from './ImageGallery';
+export type { ImageGalleryProps, ImageGalleryImage } from './types/types';
+export { ImageGalleryLayout } from './types/types';

package/src/components/ImageGallery/types/types.ts

@@ -0,0 +1,130 @@
+import { ImageAspectRatio, ImageObjectFit } from '../../Image/types';
+import { ResponsiveValue } from '../../utils/useResponsiveValue';
+import { Theme } from '../../../../tokens/theme/theme';
+
+/**
+ * Image object with source, alt text, and optional accessibility properties.
+ */
+export interface ImageGalleryImage {
+  /**
+   * Source URL of the image.
+   */
+  src: string;
+  /**
+   * Alternative text for the image (required for accessibility).
+   */
+  alt: string;
+  /**
+   * Accessibility: Provides an accessible name for the image when alt text is not sufficient.
+   */
+  'aria-label'?: string;
+  /**
+   * Accessibility: Identifies the element(s) that label the image.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Accessibility: Identifies the element(s) that describe the image.
+   */
+  'aria-describedby'?: string;
+  /**
+   * Accessibility: Defines the role of the image element.
+   * Use "presentation" or "none" for decorative images (when alt is empty).
+   * @default 'img'
+   */
+  role?: 'img' | 'presentation' | 'none';
+  /**
+   * Accessibility: Hides the image from assistive technologies when true.
+   * Use for decorative images that don't convey meaningful information.
+   */
+  'aria-hidden'?: boolean;
+}
+
+/**
+ * Props accepted by the `ImageGallery` component.
+ */
+export interface ImageGalleryProps {
+  /**
+   * Array of image objects, each containing `src` (string) and `alt` (string) properties.
+   * Supports optional accessibility properties for each image.
+   * The array length must match the layout requirements:
+   * - SINGLE: 1 image
+   * - TWO_SIDE: 2 images
+   * - FOUR_HORIZONTAL: 4 images
+   * - FOUR_GRID: 4 images
+   */
+  images: ImageGalleryImage[];
+  /**
+   * Aspect ratio applied uniformly to all images.
+   * @default ImageAspectRatio.GLOBAL_CUSTOM (uses CSS variable `--envive-global-custom-aspect-ratio`)
+   */
+  imageAspectRatio?: ImageAspectRatio;
+  /**
+   * CSS object-fit property applied to all images. Controls how images are resized to fit their containers.
+   * @default ImageObjectFit.COVER
+   */
+  imageObjectFit?: ImageObjectFit;
+  /**
+   * When enabled, applies rounded corners to all images using the global border radius token (`--envive-global-custom-border-radius`).
+   * @default false
+   */
+  imageRounded?: boolean;
+  /**
+   * When enabled, displays skeleton loading states with pulse animation for all images.
+   * @default false
+   */
+  imageIsLoading?: boolean;
+  /**
+   * Layout variant that determines how images are arranged.
+   * Supports responsive values (array or object syntax).
+   */
+  layout: ResponsiveValue<ImageGalleryLayout>;
+  /**
+   * Visual theme of the gallery.
+   * @default Theme.GLOBAL_CUSTOM (uses CSS variable `--envive-global-custom-theme`)
+   */
+  theme?: Theme;
+  /**
+   * Unique `id` attribute attached to the rendered container element.
+   */
+  id?: string;
+  /**
+   * Adds a `data-testid` attribute to the container for testing utilities.
+   */
+  testId?: string;
+  /**
+   * Additional class names appended to the computed container classes.
+   */
+  className?: string;
+  /**
+   * Inline styles forwarded to the rendered container element.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Accessibility: Provides an accessible name for the gallery container.
+   */
+  'aria-label'?: string;
+  /**
+   * Accessibility: Identifies the element(s) that label the gallery container.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Accessibility: Identifies the element(s) that describe the gallery container.
+   */
+  'aria-describedby'?: string;
+  /**
+   * Accessibility: Defines the role of the gallery container element.
+   * Common values: 'region', 'group', 'figure', or semantic HTML elements via Container component.
+   */
+  role?: string;
+  /**
+   * Accessibility: Hides the gallery container from assistive technologies when true.
+   */
+  'aria-hidden'?: boolean;
+}
+
+export enum ImageGalleryLayout {
+  SINGLE = 'single',
+  TWO_SIDE = 'two-side',
+  FOUR_HORIZONTAL = 'four-horizontal',
+  FOUR_GRID = 'four-grid',
+}

package/src/components/ImageGallery/utils/functions.ts

@@ -0,0 +1,26 @@
+import { Theme, ThemeCSSVar } from '../../../../tokens/theme/theme';
+import { getComputedCSSVariable } from '../../DesignTokens/components/utils';
+import { ImageGalleryLayout } from '../types/types';
+
+interface GetIsTwoSideStandardOnMobileProps {
+  theme: Theme;
+  resolvedLayout: ImageGalleryLayout;
+  isMobile: boolean;
+}
+
+export const getIsTwoSideStandardOnMobile = ({
+  theme,
+  resolvedLayout,
+  isMobile,
+}: GetIsTwoSideStandardOnMobileProps) => {
+  if (resolvedLayout !== ImageGalleryLayout.TWO_SIDE) return false;
+
+  if (!isMobile) return false;
+
+  const globalCustomTheme = getComputedCSSVariable(`var(--${ThemeCSSVar.GlobalCustom})`);
+  const isGlobalCustomStandard =
+    theme === Theme.GLOBAL_CUSTOM && globalCustomTheme === Theme.STANDARD;
+  if (isGlobalCustomStandard) return true;
+
+  return theme === Theme.STANDARD;
+};

package/src/components/MarkdownProcessor/MarkdownProcessor.tsx

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import { MarkdownProcessorProps } from './types/types';
+import { MarkdownProcessorComponents } from './components';
+import {
+  createMarkdownParagraphComponent,
+  createMarkdownSubscriptComponent,
+} from './utils/functions';
+
+export const MarkdownProcessor = ({
+  content,
+  clampParagraphs = undefined,
+  textColor,
+  textVariant,
+  subTextVariant,
+  subTextColor,
+}: MarkdownProcessorProps) => {
+  const processedContent = content.replace(/<br\s*[\\/]?>/gi, '\n\n');
+
+  const components = useMemo(
+    () => ({
+      li: MarkdownProcessorComponents.MarkdownListItem,
+      ul: MarkdownProcessorComponents.MarkdownUnorderedList,
+      ol: MarkdownProcessorComponents.MarkdownOrderedList,
+      a: MarkdownProcessorComponents.MarkdownLink,
+      p: createMarkdownParagraphComponent({ clampParagraphs, textColor, textVariant }),
+      sub: createMarkdownSubscriptComponent({ subTextVariant, subTextColor }),
+    }),
+    [clampParagraphs, textColor, textVariant, subTextVariant, subTextColor],
+  );
+
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      rehypePlugins={[rehypeRaw]}
+      components={components}
+    >
+      {processedContent}
+    </ReactMarkdown>
+  );
+};

package/src/components/MarkdownProcessor/__tests__/MarkdownProcessor.test.tsx

@@ -0,0 +1,194 @@
+import '@testing-library/jest-dom';
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MarkdownProcessor } from '../MarkdownProcessor';
+import { TypographyColor, TypographyVariant } from '../../Typography/types';
+
+describe('MarkdownProcessor', () => {
+  describe('Basic rendering', () => {
+    it('should render markdown content correctly', () => {
+      const content = 'This is a simple paragraph.';
+      render(<MarkdownProcessor content={content} />);
+      expect(screen.getByText('This is a simple paragraph.')).toBeInTheDocument();
+    });
+
+    it('should render multiple paragraphs', () => {
+      const content = 'First paragraph.\n\nSecond paragraph.';
+      render(<MarkdownProcessor content={content} />);
+      expect(screen.getByText('First paragraph.')).toBeInTheDocument();
+      expect(screen.getByText('Second paragraph.')).toBeInTheDocument();
+    });
+
+    it('should process <br> tags and convert them to line breaks', () => {
+      const content = 'First line<br>Second line';
+      render(<MarkdownProcessor content={content} />);
+      expect(screen.getByText(/First line/i)).toBeInTheDocument();
+      expect(screen.getByText(/Second line/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Lists', () => {
+    it('should render unordered lists', () => {
+      const content = '- Item 1\n- Item 2\n- Item 3';
+      render(<MarkdownProcessor content={content} />);
+      expect(screen.getByText('Item 1')).toBeInTheDocument();
+      expect(screen.getByText('Item 2')).toBeInTheDocument();
+      expect(screen.getByText('Item 3')).toBeInTheDocument();
+    });
+
+    it('should render ordered lists', () => {
+      const content = '1. First item\n2. Second item\n3. Third item';
+      render(<MarkdownProcessor content={content} />);
+      expect(screen.getByText('First item')).toBeInTheDocument();
+      expect(screen.getByText('Second item')).toBeInTheDocument();
+      expect(screen.getByText('Third item')).toBeInTheDocument();
+    });
+
+    it('should render list items with Typography component', () => {
+      const content = '- List item';
+      const { container } = render(<MarkdownProcessor content={content} />);
+      const listItem = container.querySelector('li');
+      expect(listItem).toBeInTheDocument();
+      expect(listItem).toHaveTextContent('List item');
+    });
+  });
+
+  describe('Links', () => {
+    it('should render links as LinkButton components', () => {
+      const content = '[Click here](https://example.com)';
+      render(<MarkdownProcessor content={content} />);
+      const link = screen.getByText('Click here');
+      expect(link).toBeInTheDocument();
+    });
+
+    it('should render multiple links', () => {
+      const content = '[First link](https://example.com) and [second link](https://github.com)';
+      render(<MarkdownProcessor content={content} />);
+      expect(screen.getByText('First link')).toBeInTheDocument();
+      expect(screen.getByText('second link')).toBeInTheDocument();
+    });
+  });
+
+  describe('Subscript', () => {
+    it('should render subscript text', () => {
+      const content = 'Regular text<sub>subscript</sub>';
+      render(<MarkdownProcessor content={content} />);
+      expect(screen.getByText('Regular text')).toBeInTheDocument();
+      expect(screen.getByText('subscript')).toBeInTheDocument();
+    });
+
+    it('should render multiple subscript elements', () => {
+      const content = 'First<sub>sub1</sub> and second<sub>sub2</sub>';
+      render(<MarkdownProcessor content={content} />);
+      expect(screen.getByText('sub1')).toBeInTheDocument();
+      expect(screen.getByText('sub2')).toBeInTheDocument();
+    });
+  });
+
+  describe('Paragraph clamping', () => {
+    it('should not clamp paragraphs when clampParagraphs is undefined', () => {
+      const content =
+        'This is a very long paragraph that should not be clamped because clampParagraphs is undefined. It contains multiple sentences to demonstrate that the text will not be truncated.';
+      render(<MarkdownProcessor content={content} />);
+      const paragraph = screen.getByText(/This is a very long paragraph/i);
+      expect(paragraph).toBeInTheDocument();
+    });
+
+    it('should clamp paragraphs when clampParagraphs is set', () => {
+      const content =
+        'This is a very long paragraph that will be clamped to 2 lines. It contains multiple sentences to demonstrate the line clamping functionality. The text should be truncated with an ellipsis if it exceeds the specified number of lines.';
+      render(
+        <MarkdownProcessor
+          content={content}
+          clampParagraphs={2}
+        />,
+      );
+      const paragraph = screen.getByText(/This is a very long paragraph/i);
+      expect(paragraph).toBeInTheDocument();
+    });
+  });
+
+  describe('Typography customization', () => {
+    it('should apply custom textVariant', () => {
+      const content = 'Custom variant text';
+      const { container } = render(
+        <MarkdownProcessor
+          content={content}
+          textVariant={TypographyVariant.B2_MD}
+        />,
+      );
+      const paragraph = container.querySelector('p');
+      expect(paragraph).toBeInTheDocument();
+    });
+
+    it('should apply custom textColor', () => {
+      const content = 'Custom color text';
+      render(
+        <MarkdownProcessor
+          content={content}
+          textColor={TypographyColor.TEXT_SECONDARY}
+        />,
+      );
+      expect(screen.getByText('Custom color text')).toBeInTheDocument();
+    });
+
+    it('should apply custom subTextVariant', () => {
+      const content = 'Text<sub>subscript</sub>';
+      render(
+        <MarkdownProcessor
+          content={content}
+          subTextVariant={TypographyVariant.B4_RG}
+        />,
+      );
+      expect(screen.getByText('subscript')).toBeInTheDocument();
+    });
+
+    it('should apply custom subTextColor', () => {
+      const content = 'Text<sub>subscript</sub>';
+      render(
+        <MarkdownProcessor
+          content={content}
+          subTextColor={TypographyColor.TEXT_ACCENT}
+        />,
+      );
+      expect(screen.getByText('subscript')).toBeInTheDocument();
+    });
+  });
+
+  describe('Complex content', () => {
+    it('should render complex markdown with multiple elements', () => {
+      const content =
+        '# Heading\n\nThis is a paragraph with **bold** and *italic*.\n\n- List item 1\n- List item 2\n\n1. Ordered item 1\n2. Ordered item 2\n\n[Link text](https://example.com)\n\nText with<sub>subscript</sub>.';
+      render(<MarkdownProcessor content={content} />);
+      expect(screen.getByText(/This is a paragraph/i)).toBeInTheDocument();
+      expect(screen.getByText('List item 1')).toBeInTheDocument();
+      expect(screen.getByText('Ordered item 1')).toBeInTheDocument();
+      expect(screen.getByText('Link text')).toBeInTheDocument();
+      expect(screen.getByText('subscript')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should handle empty content', () => {
+      const { container } = render(<MarkdownProcessor content="" />);
+      expect(container).toBeTruthy();
+    });
+
+    it('should handle content with only whitespace', () => {
+      const { container } = render(<MarkdownProcessor content="   \n\n   " />);
+      expect(container).toBeTruthy();
+    });
+
+    it('should handle content with special characters', () => {
+      const content = 'Text with special chars: !@#$%^&*()';
+      render(<MarkdownProcessor content={content} />);
+      expect(screen.getByText(/Text with special chars/i)).toBeInTheDocument();
+    });
+
+    it('should handle content with HTML entities', () => {
+      const content = 'Text with &amp; entities';
+      render(<MarkdownProcessor content={content} />);
+      expect(screen.getByText(/Text with/i)).toBeInTheDocument();
+    });
+  });
+});

package/src/components/MarkdownProcessor/components/MarkdownLink.tsx

@@ -0,0 +1,13 @@
+import { LinkButton } from '../../Message/components/LinkButton';
+
+export type MarkdownLinkProps = {
+  href?: string;
+  children?: React.ReactNode;
+};
+
+export const MarkdownLink = ({ href, children }: MarkdownLinkProps) => (
+  <LinkButton
+    url={href}
+    text={children?.toString()}
+  />
+);

package/src/components/MarkdownProcessor/components/MarkdownListItem.tsx

@@ -0,0 +1,18 @@
+import { TypographyColor, TypographyVariant } from '../../Typography/types';
+import { Typography } from '../../Typography/Typography';
+
+export type MarkdownListItemProps = {
+  children?: React.ReactNode;
+};
+
+export const MarkdownListItem = ({ children }: MarkdownListItemProps) => (
+  <li>
+    <Typography
+      variant={TypographyVariant.B3_RG}
+      color={TypographyColor.TEXT_PRIMARY}
+      className="envive-tw-inline"
+    >
+      {children}
+    </Typography>
+  </li>
+);

package/src/components/MarkdownProcessor/components/MarkdownOrderedList.tsx

@@ -0,0 +1,7 @@
+export type MarkdownOrderedListProps = {
+  children?: React.ReactNode;
+};
+
+export const MarkdownOrderedList = ({ children }: MarkdownOrderedListProps) => (
+  <ol className="envive-tw-typography-ol">{children}</ol>
+);

package/src/components/MarkdownProcessor/components/MarkdownParagraph.tsx

@@ -0,0 +1,25 @@
+import { TypographyColor, TypographyVariant } from '../../Typography/types';
+import { Typography } from '../../Typography/Typography';
+
+export type MarkdownParagraphProps = {
+  children?: React.ReactNode;
+  clampParagraphs: number | undefined;
+  textColor?: TypographyColor;
+  textVariant?: TypographyVariant;
+};
+
+export const MarkdownParagraph = ({
+  children,
+  clampParagraphs,
+  textColor,
+  textVariant,
+}: MarkdownParagraphProps) => (
+  <Typography
+    as="p"
+    numberOfLines={clampParagraphs ?? undefined}
+    variant={textVariant ?? TypographyVariant.B3_RG}
+    color={textColor ?? TypographyColor.TEXT_PRIMARY}
+  >
+    {children}
+  </Typography>
+);

package/src/components/MarkdownProcessor/components/MarkdownSubscript.tsx

@@ -0,0 +1,22 @@
+import { TypographyColor, TypographyVariant } from '../../Typography/types';
+import { Typography } from '../../Typography/Typography';
+
+export type MarkdownSubscriptProps = {
+  subTextVariant?: TypographyVariant;
+  subTextColor?: TypographyColor;
+  children?: React.ReactNode;
+};
+
+export const MarkdownSubscript = ({
+  children,
+  subTextVariant,
+  subTextColor,
+}: MarkdownSubscriptProps) => (
+  <Typography
+    variant={subTextVariant ?? TypographyVariant.B5_RG}
+    color={subTextColor ?? TypographyColor.TEXT_SECONDARY}
+    className="envive-tw-inline"
+  >
+    {children}
+  </Typography>
+);