@wix/headless-instagram 0.0.0

package/cjs/dist/services/instagram-feed-service.d.ts

@@ -0,0 +1,178 @@
+import { type Signal } from '@wix/services-definitions/core-services/signals';
+import { accounts } from '@wix/instagram-account';
+import { media } from '@wix/instagram-media';
+/**
+ * Instagram media item types
+ */
+export type InstagramMediaType = 'image' | 'video' | 'carousel';
+/**
+ * Instagram media item structure
+ * Extending SDK types with additional fields for UI components
+ */
+export interface InstagramMediaItem {
+    /** Unique identifier for the media item */
+    id: string;
+    /** Type of the media */
+    type: InstagramMediaType;
+    /** URL to the media content */
+    mediaUrl: string;
+    /** Thumbnail URL for videos */
+    thumbnailUrl?: string;
+    /** Caption text */
+    caption?: string;
+    /** Permalink to the Instagram post */
+    permalink: string;
+    /** ISO timestamp of when the media was created */
+    timestamp: string;
+    /** Alt text for accessibility */
+    altText?: string;
+}
+/**
+ * Instagram account information using SDK types
+ */
+export type InstagramAccount = accounts.InstagramAccount;
+/**
+ * Instagram media using SDK types
+ */
+export type InstagramMedia = media.Media;
+/**
+ * Instagram feed data combining account and media information
+ */
+export interface InstagramFeedData {
+    /** Instagram account information */
+    account?: InstagramAccount;
+    /** Array of media items */
+    mediaItems: InstagramMediaItem[];
+    /** Whether there are more items to load */
+    hasMore: boolean;
+    /** Cursor for pagination */
+    nextCursor?: string;
+}
+/**
+ * Configuration interface for the Instagram Feed service.
+ * Contains the initial feed data and connection settings.
+ */
+export interface InstagramFeedServiceConfig {
+    /** Instagram account ID or username */
+    accountId?: string;
+    /** Number of media items to fetch */
+    limit?: number;
+    /** Initial feed data (for SSR or caching) */
+    feedData?: InstagramFeedData;
+}
+/**
+ * API interface for the Instagram Feed service, providing reactive feed data management.
+ * This service handles loading and managing Instagram feed data, loading state, and errors.
+ */
+export interface InstagramFeedServiceAPI {
+    /** Reactive signal containing the current feed data */
+    feedData: Signal<InstagramFeedData>;
+    /** Reactive signal indicating if feed data is currently being loaded */
+    isLoading: Signal<boolean>;
+    /** Reactive signal containing any error message, or null if no error */
+    error: Signal<string | null>;
+    /** Function to load more media items */
+    loadMore: () => Promise<void>;
+    /** Function to refresh the entire feed */
+    refresh: () => Promise<void>;
+}
+/**
+ * Service definition for the Instagram Feed service.
+ * This defines the reactive API contract for managing Instagram feed data.
+ */
+export declare const InstagramFeedServiceDefinition: string & {
+    __api: InstagramFeedServiceAPI;
+    __config: InstagramFeedServiceConfig;
+    isServiceDefinition?: boolean;
+} & InstagramFeedServiceAPI;
+/**
+ * Implementation of the Instagram Feed service that manages reactive Instagram feed data.
+ * This service provides signals for feed data, loading state, and error handling,
+ * along with methods to dynamically load and refresh Instagram content.
+ *
+ * @example
+ * ```tsx
+ * import { InstagramFeedService, InstagramFeedServiceDefinition } from '@wix/instagram/services';
+ * import { useService } from '@wix/services-manager-react';
+ *
+ * function InstagramComponent({ feedConfig }) {
+ *   return (
+ *     <ServiceProvider services={createServicesMap([
+ *       [InstagramFeedServiceDefinition, InstagramFeedService.withConfig(feedConfig)]
+ *     ])}>
+ *       <InstagramDisplay />
+ *     </ServiceProvider>
+ *   );
+ * }
+ *
+ * function InstagramDisplay() {
+ *   const feedService = useService(InstagramFeedServiceDefinition);
+ *   const feedData = feedService.feedData.get();
+ *   const isLoading = feedService.isLoading.get();
+ *   const error = feedService.error.get();
+ *
+ *   if (isLoading) return <div>Loading Instagram feed...</div>;
+ *   if (error) return <div>Error: {error}</div>;
+ *
+ *   return <div>{feedData.mediaItems.length} posts loaded</div>;
+ * }
+ * ```
+ */
+export declare const InstagramFeedService: import("@wix/services-definitions").ServiceFactory<string & {
+    __api: InstagramFeedServiceAPI;
+    __config: InstagramFeedServiceConfig;
+    isServiceDefinition?: boolean;
+} & InstagramFeedServiceAPI, InstagramFeedServiceConfig>;
+/**
+ * Success result interface for Instagram feed service configuration loading.
+ * Returned when feed data is successfully loaded.
+ */
+export interface SuccessInstagramFeedServiceConfigResult {
+    /** Type "success" means that the feed was loaded and the config is valid */
+    type: 'success';
+    /** The feed config containing the loaded feed data */
+    config: InstagramFeedServiceConfig;
+}
+/**
+ * Not found result interface for Instagram feed service configuration loading.
+ * Returned when account or feed data cannot be found.
+ */
+export interface NotFoundInstagramFeedServiceConfigResult {
+    /** Type "notFound" means that the account was not found */
+    type: 'notFound';
+}
+/**
+ * Union type for Instagram feed service configuration results.
+ */
+export type InstagramFeedServiceConfigResult = SuccessInstagramFeedServiceConfigResult | NotFoundInstagramFeedServiceConfigResult;
+/**
+ * Input object for loading Instagram feed service configuration
+ */
+/**
+ * Loads Instagram feed service configuration from the Wix Instagram API for SSR initialization.
+ * This function is designed to be used during Server-Side Rendering (SSR) to preload
+ * Instagram feed data that will be used to configure the InstagramFeedService.
+ *
+ * @param input InstagramFeedServiceConfig object containing accountId and optional limit
+ * @returns Promise that resolves to InstagramFeedServiceConfigResult (success with config or notFound)
+ *
+ * @example
+ * ```tsx
+ * import { loadInstagramFeedServiceConfig } from '@wix/instagram/services';
+ *
+ * // In your SSR handler or server action
+ * const configResult = await loadInstagramFeedServiceConfig({
+ *   accountId: 'instagram_account_123',
+ *   limit: 12
+ * });
+ *
+ * if (configResult.type === 'success') {
+ *   // Use configResult.config to initialize InstagramFeedService
+ *   return configResult.config;
+ * } else {
+ *   // Handle not found case
+ *   return { accountId: 'instagram_account_123' }; // fallback config
+ * }
+ * ```
+ */
+export declare function loadInstagramFeedServiceConfig(input: InstagramFeedServiceConfig): Promise<InstagramFeedServiceConfigResult>;

package/cjs/dist/services/instagram-feed-service.js

@@ -0,0 +1,196 @@
+import { defineService, implementService } from '@wix/services-definitions';
+import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
+import { accounts } from '@wix/instagram-account';
+import { media } from '@wix/instagram-media';
+/**
+ * Default Instagram feed data
+ */
+const defaultInstagramFeedData = {
+    mediaItems: [],
+    hasMore: false,
+};
+/**
+ * Service definition for the Instagram Feed service.
+ * This defines the reactive API contract for managing Instagram feed data.
+ */
+export const InstagramFeedServiceDefinition = defineService('instagram-feed');
+/**
+ * Implementation of the Instagram Feed service that manages reactive Instagram feed data.
+ * This service provides signals for feed data, loading state, and error handling,
+ * along with methods to dynamically load and refresh Instagram content.
+ *
+ * @example
+ * ```tsx
+ * import { InstagramFeedService, InstagramFeedServiceDefinition } from '@wix/instagram/services';
+ * import { useService } from '@wix/services-manager-react';
+ *
+ * function InstagramComponent({ feedConfig }) {
+ *   return (
+ *     <ServiceProvider services={createServicesMap([
+ *       [InstagramFeedServiceDefinition, InstagramFeedService.withConfig(feedConfig)]
+ *     ])}>
+ *       <InstagramDisplay />
+ *     </ServiceProvider>
+ *   );
+ * }
+ *
+ * function InstagramDisplay() {
+ *   const feedService = useService(InstagramFeedServiceDefinition);
+ *   const feedData = feedService.feedData.get();
+ *   const isLoading = feedService.isLoading.get();
+ *   const error = feedService.error.get();
+ *
+ *   if (isLoading) return <div>Loading Instagram feed...</div>;
+ *   if (error) return <div>Error: {error}</div>;
+ *
+ *   return <div>{feedData.mediaItems.length} posts loaded</div>;
+ * }
+ * ```
+ */
+export const InstagramFeedService = implementService.withConfig()(InstagramFeedServiceDefinition, ({ getService, config }) => {
+    const signalsService = getService(SignalsServiceDefinition);
+    const feedData = signalsService.signal(config.feedData || defaultInstagramFeedData);
+    const isLoading = signalsService.signal(!!config.accountId);
+    const error = signalsService.signal(null);
+    const loadFeed = async (accountId, cursor) => {
+        try {
+            isLoading.set(true);
+            error.set(null);
+            // Load Instagram account information
+            const accountResponse = await accounts.getInstagramAccount(accountId);
+            // Load Instagram media for the account
+            const mediaResponse = await media.listInstagramAccountMedia(accountId);
+            // Transform SDK media to our interface format
+            const transformedMedia = mediaResponse.media?.map((mediaItem) => ({
+                id: mediaItem._id || mediaItem.mediaId || '',
+                type: (mediaItem.mediaType || 'image'),
+                mediaUrl: mediaItem.mediaUrl || '',
+                thumbnailUrl: mediaItem.thumbnailUrl || undefined,
+                caption: mediaItem.caption,
+                permalink: mediaItem.permalink || '',
+                timestamp: typeof mediaItem.timestamp === 'string'
+                    ? mediaItem.timestamp
+                    : new Date().toISOString(),
+                altText: mediaItem.caption ||
+                    `Instagram post ${mediaItem._id || mediaItem.mediaId}`,
+            })) || [];
+            const newFeedData = {
+                account: accountResponse,
+                mediaItems: cursor
+                    ? [...feedData.get().mediaItems, ...transformedMedia]
+                    : transformedMedia,
+                hasMore: false, // Note: Real pagination logic would depend on actual SDK response structure
+                nextCursor: undefined,
+            };
+            feedData.set(newFeedData);
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error
+                ? err.message
+                : 'Failed to load Instagram feed';
+            error.set(errorMessage);
+        }
+        finally {
+            isLoading.set(false);
+        }
+    };
+    const loadMore = async () => {
+        const currentData = feedData.get();
+        if (!currentData.hasMore || isLoading.get())
+            return;
+        if (config.accountId) {
+            await loadFeed(config.accountId, currentData.nextCursor);
+        }
+    };
+    const refresh = async () => {
+        if (config.accountId) {
+            await loadFeed(config.accountId);
+        }
+    };
+    // Initial load if accountId is provided
+    if (config.accountId && !config.feedData) {
+        loadFeed(config.accountId);
+    }
+    return {
+        feedData,
+        isLoading,
+        error,
+        loadMore,
+        refresh,
+    };
+});
+/**
+ * Input object for loading Instagram feed service configuration
+ */
+/**
+ * Loads Instagram feed service configuration from the Wix Instagram API for SSR initialization.
+ * This function is designed to be used during Server-Side Rendering (SSR) to preload
+ * Instagram feed data that will be used to configure the InstagramFeedService.
+ *
+ * @param input InstagramFeedServiceConfig object containing accountId and optional limit
+ * @returns Promise that resolves to InstagramFeedServiceConfigResult (success with config or notFound)
+ *
+ * @example
+ * ```tsx
+ * import { loadInstagramFeedServiceConfig } from '@wix/instagram/services';
+ *
+ * // In your SSR handler or server action
+ * const configResult = await loadInstagramFeedServiceConfig({
+ *   accountId: 'instagram_account_123',
+ *   limit: 12
+ * });
+ *
+ * if (configResult.type === 'success') {
+ *   // Use configResult.config to initialize InstagramFeedService
+ *   return configResult.config;
+ * } else {
+ *   // Handle not found case
+ *   return { accountId: 'instagram_account_123' }; // fallback config
+ * }
+ * ```
+ */
+export async function loadInstagramFeedServiceConfig(input) {
+    try {
+        const { accountId, limit } = input;
+        if (!accountId) {
+            return { type: 'notFound' };
+        }
+        // Load Instagram account information using SDK
+        const accountResponse = await accounts.getInstagramAccount(accountId);
+        if (!accountResponse) {
+            return { type: 'notFound' };
+        }
+        // Load initial media items using SDK
+        const mediaResponse = await media.listInstagramAccountMedia(accountId);
+        // Transform SDK media to our interface format
+        const transformedMedia = mediaResponse.media?.map((mediaItem) => ({
+            id: mediaItem._id || mediaItem.mediaId || '',
+            type: (mediaItem.mediaType || 'image'),
+            mediaUrl: mediaItem.mediaUrl || '',
+            thumbnailUrl: mediaItem.thumbnailUrl || undefined,
+            caption: mediaItem.caption,
+            permalink: mediaItem.permalink || '',
+            timestamp: typeof mediaItem.timestamp === 'string'
+                ? mediaItem.timestamp
+                : new Date().toISOString(),
+            altText: mediaItem.caption ||
+                `Instagram post ${mediaItem._id || mediaItem.mediaId}`,
+        })) || [];
+        const feedData = {
+            account: accountResponse,
+            mediaItems: transformedMedia,
+            hasMore: false, // Note: Real pagination logic would depend on actual SDK response structure
+            nextCursor: undefined,
+        };
+        const config = {
+            accountId,
+            limit,
+            feedData,
+        };
+        return { type: 'success', config };
+    }
+    catch (error) {
+        console.error('Failed to load Instagram feed config:', error);
+        return { type: 'notFound' };
+    }
+}

package/cjs/dist/services/instagram-media-item-service.d.ts

@@ -0,0 +1,73 @@
+import { type Signal } from '@wix/services-definitions/core-services/signals';
+import type { InstagramMediaItem } from './instagram-feed-service.js';
+/**
+ * API interface for Instagram Media Item service
+ */
+export interface InstagramMediaItemServiceAPI {
+    /** Reactive signal containing the media item data */
+    mediaItem: Signal<InstagramMediaItem>;
+    /** Reactive signal containing the media item index */
+    index: Signal<number>;
+}
+/**
+ * Configuration for Instagram Media Item service
+ */
+export interface InstagramMediaItemServiceConfig {
+    /** The Instagram media item data */
+    mediaItem: InstagramMediaItem;
+    /** The index of this media item in the gallery */
+    index: number;
+}
+/**
+ * Service definition for Instagram Media Item
+ */
+export declare const InstagramMediaItemServiceDefinition: string & {
+    __api: InstagramMediaItemServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & InstagramMediaItemServiceAPI;
+/**
+ * Implementation of the Instagram Media Item service that manages reactive media item data.
+ * This service provides signals for individual media item data and its index position.
+ * Used by gallery components to access media item information in a service-based architecture.
+ *
+ * @example
+ * ```tsx
+ * import { InstagramMediaItemService, InstagramMediaItemServiceDefinition } from '@wix/headless-instagram/services';
+ * import { useService } from '@wix/services-manager-react';
+ * import { WixServices, createServicesMap } from '@wix/services-manager';
+ *
+ * function MediaItemComponent({ mediaItem, index }) {
+ *   return (
+ *     <WixServices
+ *       servicesMap={createServicesMap().addService(
+ *         InstagramMediaItemServiceDefinition,
+ *         InstagramMediaItemService,
+ *         { mediaItem, index }
+ *       )}
+ *     >
+ *       <MediaItemDisplay />
+ *     </WixServices>
+ *   );
+ * }
+ *
+ * function MediaItemDisplay() {
+ *   const mediaItemService = useService(InstagramMediaItemServiceDefinition);
+ *   const mediaItem = mediaItemService.mediaItem.get();
+ *   const index = mediaItemService.index.get();
+ *
+ *   return (
+ *     <div>
+ *       <img src={mediaItem.mediaUrl} alt={mediaItem.altText} />
+ *       <span>Item {index + 1}</span>
+ *       {mediaItem.type === 'video' && <VideoIndicator />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare const InstagramMediaItemService: import("@wix/services-definitions").ServiceFactory<string & {
+    __api: InstagramMediaItemServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & InstagramMediaItemServiceAPI, InstagramMediaItemServiceConfig>;

package/cjs/dist/services/instagram-media-item-service.js

@@ -0,0 +1,55 @@
+import { defineService, implementService } from '@wix/services-definitions';
+import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
+/**
+ * Service definition for Instagram Media Item
+ */
+export const InstagramMediaItemServiceDefinition = defineService('instagramMediaItem');
+/**
+ * Implementation of the Instagram Media Item service that manages reactive media item data.
+ * This service provides signals for individual media item data and its index position.
+ * Used by gallery components to access media item information in a service-based architecture.
+ *
+ * @example
+ * ```tsx
+ * import { InstagramMediaItemService, InstagramMediaItemServiceDefinition } from '@wix/headless-instagram/services';
+ * import { useService } from '@wix/services-manager-react';
+ * import { WixServices, createServicesMap } from '@wix/services-manager';
+ *
+ * function MediaItemComponent({ mediaItem, index }) {
+ *   return (
+ *     <WixServices
+ *       servicesMap={createServicesMap().addService(
+ *         InstagramMediaItemServiceDefinition,
+ *         InstagramMediaItemService,
+ *         { mediaItem, index }
+ *       )}
+ *     >
+ *       <MediaItemDisplay />
+ *     </WixServices>
+ *   );
+ * }
+ *
+ * function MediaItemDisplay() {
+ *   const mediaItemService = useService(InstagramMediaItemServiceDefinition);
+ *   const mediaItem = mediaItemService.mediaItem.get();
+ *   const index = mediaItemService.index.get();
+ *
+ *   return (
+ *     <div>
+ *       <img src={mediaItem.mediaUrl} alt={mediaItem.altText} />
+ *       <span>Item {index + 1}</span>
+ *       {mediaItem.type === 'video' && <VideoIndicator />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export const InstagramMediaItemService = implementService.withConfig()(InstagramMediaItemServiceDefinition, ({ getService, config }) => {
+    const signalsService = getService(SignalsServiceDefinition);
+    const mediaItem = signalsService.signal(config.mediaItem);
+    const index = signalsService.signal(config.index);
+    return {
+        mediaItem,
+        index,
+    };
+});

package/cjs/dist/vitest.setup.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/cjs/dist/vitest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/react/InstagramFeed.d.ts

@@ -0,0 +1,7 @@
+export { Root } from './InstagramFeedRoot.js';
+export { UserName } from './UserName.js';
+export { InstagramMedias } from './InstagramMedias.js';
+export { InstagramMedia } from './InstagramMedia.js';
+export type { RootProps } from './InstagramFeedRoot.js';
+export type { UserNameProps } from './UserName.js';
+export type { InstagramMediasProps } from './InstagramMedias.js';

package/dist/react/InstagramFeed.js

@@ -0,0 +1,6 @@
+// Instagram Feed compound component exports following stores pattern
+// This file creates the Instagram namespace with all components
+export { Root } from './InstagramFeedRoot.js';
+export { UserName } from './UserName.js';
+export { InstagramMedias } from './InstagramMedias.js';
+export { InstagramMedia } from './InstagramMedia.js';

package/dist/react/InstagramFeedRoot.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { type InstagramFeedServiceConfig } from '../services/index.js';
+/**
+ * Props for InstagramFeed Root component
+ */
+export interface RootProps {
+    children: React.ReactNode;
+    instagramFeedServiceConfig: InstagramFeedServiceConfig;
+    className?: string;
+}
+/**
+ * Root component that provides Instagram feed service context using WixServices.
+ * This follows the same service-based pattern as the stores package.
+ *
+ * @order 1
+ * @component
+ */
+export declare function Root(props: RootProps): React.ReactNode;

package/dist/react/InstagramFeedRoot.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WixServices } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
+import { InstagramFeedService, InstagramFeedServiceDefinition, } from '../services/index.js';
+/**
+ * Root component that provides Instagram feed service context using WixServices.
+ * This follows the same service-based pattern as the stores package.
+ *
+ * @order 1
+ * @component
+ */
+export function Root(props) {
+    const { children, instagramFeedServiceConfig, className, ...attrs } = props;
+    const attributes = {
+        className,
+        ...attrs,
+    };
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(InstagramFeedServiceDefinition, InstagramFeedService, instagramFeedServiceConfig), children: _jsx("div", { ...attributes, children: children }) }));
+}

package/dist/react/InstagramMedia.d.ts

@@ -0,0 +1,73 @@
+import React from 'react';
+import { type AsChildChildren } from '@wix/headless-utils/react';
+export interface MediaGalleryRepeaterProps {
+    children: React.ReactNode;
+}
+/**
+ * Repeats children for each Instagram media item, providing a per-item service context.
+ */
+export declare const MediaGalleryRepeater: React.FC<MediaGalleryRepeaterProps>;
+export declare enum TestIds {
+    instagramMediaCaption = "instagram-media-caption",
+    instagramMediaType = "instagram-media-type",
+    instagramMediaUserName = "instagram-media-username",
+    instagramMediaTimestamp = "instagram-media-timestamp",
+    instagramMediaGalleries = "instagram-media-galleries"
+}
+export interface CaptionProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        caption?: string;
+    }>;
+    className?: string;
+}
+export declare const Caption: React.ForwardRefExoticComponent<CaptionProps & React.RefAttributes<HTMLElement>>;
+export interface MediaTypeProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        mediaType: 'image' | 'video' | 'carousel';
+    }>;
+    className?: string;
+}
+export declare const MediaType: React.ForwardRefExoticComponent<MediaTypeProps & React.RefAttributes<HTMLElement>>;
+export interface UserNameProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        userName?: string;
+    }>;
+    className?: string;
+}
+export declare const UserName: React.ForwardRefExoticComponent<UserNameProps & React.RefAttributes<HTMLElement>>;
+export interface TimestampProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        timestamp: string;
+    }>;
+    className?: string;
+}
+export declare const Timestamp: React.ForwardRefExoticComponent<TimestampProps & React.RefAttributes<HTMLElement>>;
+export interface MediaGalleriesProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    children: React.ReactNode;
+}
+export declare const MediaGalleries: React.ForwardRefExoticComponent<MediaGalleriesProps & React.RefAttributes<HTMLDivElement>>;
+export interface MediaGalleryItemsProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const MediaGalleryItems: React.ForwardRefExoticComponent<MediaGalleryItemsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const InstagramMedia: {
+    Root: ({ children }: {
+        children: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Caption: React.ForwardRefExoticComponent<CaptionProps & React.RefAttributes<HTMLElement>>;
+    MediaType: React.ForwardRefExoticComponent<MediaTypeProps & React.RefAttributes<HTMLElement>>;
+    UserName: React.ForwardRefExoticComponent<UserNameProps & React.RefAttributes<HTMLElement>>;
+    Timestamp: React.ForwardRefExoticComponent<TimestampProps & React.RefAttributes<HTMLElement>>;
+    MediaGalleries: React.ForwardRefExoticComponent<MediaGalleriesProps & React.RefAttributes<HTMLDivElement>>;
+    MediaGalleryItems: React.ForwardRefExoticComponent<MediaGalleryItemsProps & React.RefAttributes<HTMLDivElement>>;
+    MediaGalleryRepeater: React.FC<MediaGalleryRepeaterProps>;
+    caption: React.ForwardRefExoticComponent<CaptionProps & React.RefAttributes<HTMLElement>>;
+    mediaType: React.ForwardRefExoticComponent<MediaTypeProps & React.RefAttributes<HTMLElement>>;
+    userName: React.ForwardRefExoticComponent<UserNameProps & React.RefAttributes<HTMLElement>>;
+    timestamp: React.ForwardRefExoticComponent<TimestampProps & React.RefAttributes<HTMLElement>>;
+};