react-datocms 8.0.0-0 → 8.0.0

package/src/StructuredText/index.tsx

@@ -8,6 +8,8 @@ import {
   renderNodeRule,
 } from 'datocms-structured-text-generic-html-renderer';
 import {
+  type CdaStructuredTextRecord,
+  type CdaStructuredTextValue,
   type Node,
   RenderError,
   type RenderResult,
@@ -15,8 +17,10 @@ import {
   type Document as StructuredTextDocument,
   type StructuredText as StructuredTextGraphQlResponse,
   type Record as StructuredTextGraphQlResponseRecord,
+  type TypesafeCdaStructuredTextValue,
   type TypesafeStructuredText as TypesafeStructuredTextGraphQlResponse,
   isBlock,
+  isInlineBlock,
   isInlineItem,
   isItemLink,
   isStructuredText,
@@ -25,14 +29,11 @@ import React, { type ReactElement, cloneElement, isValidElement } from 'react';
 
 export { renderNodeRule, renderMarkRule, RenderError };
 
-// deprecated
-export { renderNodeRule as renderRule };
-
 export type {
-  StructuredTextGraphQlResponse,
-  TypesafeStructuredTextGraphQlResponse,
   StructuredTextDocument,
-  StructuredTextGraphQlResponseRecord,
+  CdaStructuredTextValue,
+  TypesafeCdaStructuredTextValue,
+  CdaStructuredTextRecord,
 };
 
 type AdapterReturn = ReactElement | string | null;
@@ -80,12 +81,16 @@ export type RenderBlockContext<R extends StructuredTextGraphQlResponseRecord> =
   };
 
 export type StructuredTextPropTypes<
-  R1 extends StructuredTextGraphQlResponseRecord,
-  R2 extends StructuredTextGraphQlResponseRecord = R1,
+  BlockRecord extends
+    StructuredTextGraphQlResponseRecord = StructuredTextGraphQlResponseRecord,
+  LinkRecord extends
+    StructuredTextGraphQlResponseRecord = StructuredTextGraphQlResponseRecord,
+  InlineBlockRecord extends
+    StructuredTextGraphQlResponseRecord = StructuredTextGraphQlResponseRecord,
 > = {
   /** The actual field value you get from DatoCMS **/
   data:
-    | StructuredTextGraphQlResponse<R1, R2>
+    | StructuredTextGraphQlResponse<BlockRecord, LinkRecord, InlineBlockRecord>
     | StructuredTextDocument
     | Node
     | null
@@ -96,14 +101,20 @@ export type StructuredTextPropTypes<
   customMarkRules?: RenderMarkRule<H, T, F>[];
   /** Fuction that converts an 'inlineItem' node into React **/
   renderInlineRecord?: (
-    context: RenderInlineRecordContext<R2>,
+    context: RenderInlineRecordContext<LinkRecord>,
   ) => ReactElement | null;
   /** Fuction that converts an 'itemLink' node into React **/
   renderLinkToRecord?: (
-    context: RenderRecordLinkContext<R2>,
+    context: RenderRecordLinkContext<LinkRecord>,
   ) => ReactElement | null;
   /** Fuction that converts a 'block' node into React **/
-  renderBlock?: (context: RenderBlockContext<R1>) => ReactElement | null;
+  renderBlock?: (
+    context: RenderBlockContext<BlockRecord>,
+  ) => ReactElement | null;
+  /** Fuction that converts an 'inlineBlock' node into React **/
+  renderInlineBlock?: (
+    context: RenderBlockContext<InlineBlockRecord>,
+  ) => ReactElement | null;
   /** Function that converts 'link' and 'itemLink' `meta` into HTML props */
   metaTransformer?: TransformMetaFn;
   /** Fuction that converts a simple string text into React **/
@@ -117,13 +128,18 @@ export type StructuredTextPropTypes<
 };
 
 export function StructuredText<
-  R1 extends StructuredTextGraphQlResponseRecord,
-  R2 extends StructuredTextGraphQlResponseRecord = R1,
+  BlockRecord extends
+    StructuredTextGraphQlResponseRecord = StructuredTextGraphQlResponseRecord,
+  LinkRecord extends
+    StructuredTextGraphQlResponseRecord = StructuredTextGraphQlResponseRecord,
+  InlineBlockRecord extends
+    StructuredTextGraphQlResponseRecord = StructuredTextGraphQlResponseRecord,
 >({
   data,
   renderInlineRecord,
   renderLinkToRecord,
   renderBlock,
+  renderInlineBlock,
   renderText,
   renderNode,
   renderFragment,
@@ -131,7 +147,11 @@ export function StructuredText<
   customRules,
   customNodeRules,
   metaTransformer,
-}: StructuredTextPropTypes<R1, R2>): ReactElement | null {
+}: StructuredTextPropTypes<
+  BlockRecord,
+  LinkRecord,
+  InlineBlockRecord
+>): ReactElement | null {
   const result = render(data, {
     adapter: {
       renderText: renderText || defaultAdapter.renderText,
@@ -234,6 +254,35 @@ export function StructuredText<
 
         return appendKeyToValidElement(renderBlock({ record: item }), key);
       }),
+      renderNodeRule(isInlineBlock, ({ node, key }) => {
+        if (!renderInlineBlock) {
+          throw new RenderError(
+            `The Structured Text document contains an 'inlineBlock' node, but no 'renderInlineBlock' prop is specified!`,
+            node,
+          );
+        }
+
+        if (!(isStructuredText(data) && data.inlineBlocks)) {
+          throw new RenderError(
+            `The document contains an 'inlineBlock' node, but the passed data prop is not a Structured Text GraphQL response, or data.inlineBlocks is not present!`,
+            node,
+          );
+        }
+
+        const item = data.inlineBlocks.find((item) => item.id === node.item);
+
+        if (!item) {
+          throw new RenderError(
+            `The Structured Text document contains an 'inlineBlock' node, but cannot find a record with ID ${node.item} inside data.inlineBlocks!`,
+            node,
+          );
+        }
+
+        return appendKeyToValidElement(
+          renderInlineBlock({ record: item }),
+          key,
+        );
+      }),
       ...(customNodeRules || customRules || []),
     ],
   });
@@ -244,3 +293,19 @@ export function StructuredText<
 
   return result || null;
 }
+
+// ============================================================================
+// DEPRECATED EXPORTS - kept for backward compatibility
+// ============================================================================
+
+/**
+ * @deprecated Use renderNodeRule instead
+ */
+export { renderNodeRule as renderRule };
+
+/** @deprecated Use CdaStructuredTextValue */
+export type { StructuredTextGraphQlResponse };
+/** @deprecated Use TypesafeCdaStructuredTextValue */
+export type { TypesafeStructuredTextGraphQlResponse };
+/** @deprecated Use CdaStructuredTextRecord */
+export type { StructuredTextGraphQlResponseRecord };

package/src/VideoPlayer/index.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 // This file defines a React component that easily displays a video player using
 // data stored on DatoCMS and retrieved via DatoCMS GraphQL API. The component
@@ -8,24 +8,26 @@
 //
 // [1]: https://www.mux.com/player
 
-import React, { forwardRef } from "react";
+import React, { forwardRef } from 'react';
 
 // We use and extend Typescript types defined in the MUX player.
 
-import type MuxPlayerElement from "@mux/mux-player";
-import type { MuxPlayerProps } from "@mux/mux-player-react";
+import type MuxPlayerElement from '@mux/mux-player';
+import type { MuxPlayerProps } from '@mux/mux-player-react';
 
 // React MUX player is made available in two flavours: eager and lazy loaded. We
-// choose to use the eager loading version as the default approch, but
-// we also provide a lazy loading version..
+// choose to use the lazy version to avoid loading the web component uselessly.
+// MUX player lazy version loads internally the eager version using
+// `React.lazy()`.
 
-import MuxPlayer from "@mux/mux-player-react";
+import MuxPlayer from '@mux/mux-player-react/lazy';
 
 // The core of this component is the `useVideoPlayer` hook: it takes
 // data from DatoCMS GraphQL API and returns props as expected by the
 // `<MuxPlayer />` component.
 
-import { useVideoPlayer } from "../useVideoPlayer/index.js";
+import { decodeStega } from '@datocms/content-link';
+import { useVideoPlayer } from '../useVideoPlayer/index.js';
 
 type Maybe<T> = T | null;
 type Possibly<T> = Maybe<T> | undefined;
@@ -36,6 +38,8 @@ type Possibly<T> = Maybe<T> | undefined;
 export type Video = {
   /** Title attribute (`title`) for the video */
   title?: Possibly<string>;
+  /** Alt attribute used for content link integration (passed as data-datocms-content-link-source) */
+  alt?: Possibly<string>;
   /** The height of the video */
   height?: Possibly<number>;
   /** The width of the video */
@@ -62,18 +66,17 @@ export type VideoPlayerProps = MuxPlayerProps & {
   data?: Video;
 };
 
-type VideoPlayerType = React.ForwardRefExoticComponent<
-  VideoPlayerProps & React.RefAttributes<MuxPlayerElement>
->;
-
-export const VideoPlayer: VideoPlayerType = forwardRef<
+export const VideoPlayer: (
+  props: VideoPlayerProps,
+) => ReturnType<typeof MuxPlayer> = forwardRef<
   MuxPlayerElement,
   VideoPlayerProps
->((props: VideoPlayerProps, ref) => {
+>((props, ref) => {
   const {
     data = {},
     disableCookies = true,
-    preload = "metadata",
+    disableTracking = true,
+    preload = 'metadata',
     style: styleFromProps,
     ...rest
   } = props;
@@ -92,6 +95,29 @@ export const VideoPlayer: VideoPlayerType = forwardRef<
     ...styleFromProps,
   };
 
+  // Extract alt for DatoCMS Content Link integration
+  // See: https://github.com/datocms/content-link
+  const { alt } = data;
+
+  // Only include data-datocms-content-link-source if alt contains stega encoding
+  const contentLinkSource = alt && decodeStega(alt) ? alt : undefined;
+
+  // Note: Custom data-* attributes can be passed to the underlying <mux-player> web component
+  // in two ways:
+  //
+  // 1. Kebab-case (passes through as-is):
+  //    <VideoPlayer data-player-id="my-player" />
+  //
+  // 2. CamelCase (auto-converts to kebab-case):
+  //    <VideoPlayer dataPlayerId="my-player" />
+  //
+  // Both result in: <mux-player data-player-id="my-player">
+  //
+  // The MuxPlayer React component transforms camelCase props to kebab-case to match
+  // web component attribute conventions. Any props not explicitly handled by VideoPlayer
+  // are spread via {...rest} and forwarded to MuxPlayer, which then applies them to
+  // the underlying <mux-player> element.
+
   return (
     <MuxPlayer
       ref={ref}
@@ -99,12 +125,12 @@ export const VideoPlayer: VideoPlayerType = forwardRef<
       preload={preload}
       title={title}
       disableCookies={disableCookies}
+      disableTracking={disableTracking}
       playbackId={playbackId}
       style={style}
       placeholder={placeholder}
+      data-datocms-content-link-source={contentLinkSource}
       {...rest}
     />
   );
 });
-
-export default VideoPlayer;

package/src/index.ts

@@ -7,3 +7,6 @@ export * from './VideoPlayer/index.js';
 export * from './useQuerySubscription/index.js';
 export * from './useSiteSearch/index.js';
 export * from './useVideoPlayer/index.js';
+
+export * from './ContentLink/index.js';
+export * from './useContentLink/index.js';

package/src/useContentLink/index.ts

@@ -0,0 +1,187 @@
+'use client';
+
+import { type Controller, createController } from '@datocms/content-link';
+import { useCallback, useEffect, useRef } from 'react';
+
+// Re-export types and utilities from @datocms/content-link for convenience
+export { decodeStega, stripStega } from '@datocms/content-link';
+export type { Controller } from '@datocms/content-link';
+
+export type UseContentLinkOptions = {
+  /**
+   * Whether the controller is enabled, or an options object.
+   * - Pass `true` (default): Enables the controller with stega encoding preserved (allows controller recreation)
+   * - Pass `false`: Disables the controller completely
+   * - Pass `{ stripStega: true }`: Enables the controller and strips stega encoding after stamping
+   *
+   * When stripStega is false (default): Stega encoding remains in the DOM, allowing controllers
+   * to be disposed and recreated on the same page. The invisible characters don't affect display
+   * but preserve the source of truth.
+   *
+   * When stripStega is true: Stega encoding is permanently removed from text nodes, providing
+   * clean textContent for programmatic access. However, recreating a controller on the same page
+   * won't detect elements since the encoding is lost.
+   */
+  enabled?: boolean | { stripStega: boolean };
+  /** Callback when Web Previews plugin requests navigation */
+  onNavigateTo?: (path: string) => void;
+  /** Ref to limit scanning to this root instead of document */
+  root?: React.RefObject<HTMLElement>;
+};
+
+export interface ClickToEditOptions {
+  /**
+   * Whether to automatically scroll to the nearest editable element if none
+   * is currently visible in the viewport when click-to-edit mode is enabled.
+   *
+   * @default false
+   */
+  scrollToNearestTarget?: boolean;
+
+  /**
+   * Only enable click-to-edit on devices that support hover (i.e., non-touch devices).
+   * Uses `window.matchMedia('(hover: hover)')` to detect hover capability.
+   *
+   * This is useful to avoid showing overlays on touch devices where they may
+   * interfere with normal scrolling and tapping behavior.
+   *
+   * When set to `true` on a touch-only device, click-to-edit will not be
+   * automatically enabled, but users can still toggle it manually using
+   * the Alt/Option key.
+   *
+   * @default false
+   */
+  hoverOnly?: boolean;
+}
+
+export type UseContentLinkResult = {
+  /** The controller instance, or null if disabled */
+  controller: Controller | null;
+  /** Enable click-to-edit overlays */
+  enableClickToEdit: (options?: ClickToEditOptions) => void;
+  /** Disable click-to-edit overlays */
+  disableClickToEdit: () => void;
+  /** Check if click-to-edit is enabled */
+  isClickToEditEnabled: () => boolean;
+  /** Highlight all editable elements */
+  flashAll: (scrollToNearestTarget?: boolean) => void;
+  /** Notify Web Previews plugin of current path */
+  setCurrentPath: (path: string) => void;
+};
+
+/**
+ * Hook to control the ContentLink controller for Visual Editing.
+ *
+ * This hook provides low-level access to the @datocms/content-link controller,
+ * allowing you to programmatically control click-to-edit overlays and
+ * communicate with the DatoCMS Web Previews plugin.
+ *
+ * @param options - Configuration options for the controller
+ * @returns An object containing the controller instance and its methods
+ *
+ * @example
+ * ```tsx
+ * import { useContentLink } from 'react-datocms';
+ *
+ * function MyComponent() {
+ *   const { enableClickToEdit, flashAll } = useContentLink({
+ *     onNavigateTo: (path) => router.push(path),
+ *   });
+ *
+ *   return (
+ *     <button onClick={() => enableClickToEdit({ scrollToNearestTarget: true })}>
+ *       Enable Editing
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export function useContentLink(
+  options: UseContentLinkOptions = {},
+): UseContentLinkResult {
+  const { enabled = true, onNavigateTo, root } = options;
+
+  const controllerRef = useRef<Controller | null>(null);
+  // Store the callback in a ref to avoid recreating the controller when it changes
+  const onNavigateToRef = useRef(onNavigateTo);
+
+  // Keep the callback ref up to date
+  useEffect(() => {
+    onNavigateToRef.current = onNavigateTo;
+  }, [onNavigateTo]);
+
+  // Create/dispose controller based on enabled flag and root only
+  // The onNavigateTo callback is accessed via ref, so changes don't trigger recreation
+  useEffect(() => {
+    // Check if controller is disabled
+    const isEnabled =
+      enabled === true || (typeof enabled === 'object' && enabled !== null);
+
+    if (!isEnabled) {
+      if (controllerRef.current) {
+        controllerRef.current.dispose();
+        controllerRef.current = null;
+      }
+      return;
+    }
+
+    // Extract stripStega option if enabled is an object
+    const stripStega = typeof enabled === 'object' ? enabled.stripStega : false;
+
+    const controller = createController({
+      onNavigateTo: (path: string) => onNavigateToRef.current?.(path),
+      root: root?.current || undefined,
+      stripStega,
+    });
+
+    controllerRef.current = controller;
+
+    return () => {
+      controller.dispose();
+      controllerRef.current = null;
+    };
+  }, [enabled, root]);
+
+  // Stable method references that call through to the controller
+  const enableClickToEdit = useCallback((opts?: ClickToEditOptions) => {
+    // If hoverOnly is true, check if the device supports hover
+    if (
+      opts?.hoverOnly &&
+      (typeof window === 'undefined' ||
+        !window.matchMedia('(hover: hover)').matches)
+    ) {
+      return;
+    }
+
+    controllerRef.current?.enableClickToEdit(
+      opts?.scrollToNearestTarget
+        ? { scrollToNearestTarget: opts.scrollToNearestTarget }
+        : undefined,
+    );
+  }, []);
+
+  const disableClickToEdit = useCallback(() => {
+    controllerRef.current?.disableClickToEdit();
+  }, []);
+
+  const isClickToEditEnabled = useCallback(() => {
+    return controllerRef.current?.isClickToEditEnabled() ?? false;
+  }, []);
+
+  const flashAll = useCallback((scrollToNearestTarget?: boolean) => {
+    controllerRef.current?.flashAll(scrollToNearestTarget);
+  }, []);
+
+  const setCurrentPath = useCallback((path: string) => {
+    controllerRef.current?.setCurrentPath(path);
+  }, []);
+
+  return {
+    controller: controllerRef.current,
+    enableClickToEdit,
+    disableClickToEdit,
+    isClickToEditEnabled,
+    flashAll,
+    setCurrentPath,
+  };
+}

package/src/useSiteSearch/index.tsx

@@ -15,6 +15,7 @@ type SearchResultInstancesHrefSchema = {
     fuzzy?: boolean;
     query: string;
     build_trigger_id?: string;
+    search_index_id?: string;
     locale?: string;
     [k: string]: unknown;
   };
@@ -62,7 +63,8 @@ type Highlighter = (
 
 export type UseSiteSearchConfig<Client extends GenericClient> = {
   client: Client;
-  buildTriggerId: string;
+  buildTriggerId?: string;
+  searchIndexId?: string;
   fuzzySearch?: boolean;
   resultsPerPage?: number;
   highlightMatch?: Highlighter;
@@ -161,6 +163,8 @@ export function useSiteSearch<Client extends GenericClient>(
             query: state.query,
             locale: state.locale,
             build_trigger_id: config.buildTriggerId,
+            search_index_id: config.searchIndexId,
+            ...(config.fuzzySearch === true ? { fuzzy: true } : {}),
           },
           page: {
             limit: resultsPerPage,
@@ -168,10 +172,6 @@ export function useSiteSearch<Client extends GenericClient>(
           },
         };
 
-        if (config.fuzzySearch) {
-          request.fuzzy = 'true';
-        }
-
         const response = await config.client.searchResults.rawList(request);
 
         if (!isCancelled) {
@@ -199,6 +199,7 @@ export function useSiteSearch<Client extends GenericClient>(
     resultsPerPage,
     state,
     config.buildTriggerId,
+    config.searchIndexId,
     config.fuzzySearch,
     config.client.config.apiToken,
   ]);

package/src/useVideoPlayer/index.ts

@@ -1,6 +1,6 @@
-import type { MuxPlayerProps } from '@mux/mux-player-react/.';
+import type { MuxPlayerProps } from '@mux/mux-player-react';
 
-import type { Video } from '../VideoPlayer';
+import type { Video } from '../VideoPlayer/index.js';
 
 type Maybe<T> = T | null;
 type Possibly<T> = Maybe<T> | undefined;

package/dist/cjs/VideoPlayer/lazy.js

@@ -1,35 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoPlayer = void 0;
-const react_1 = __importStar(require("react"));
-const LazyLoadedVideoPlayer = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require("./index.js"))));
-exports.VideoPlayer = (0, react_1.forwardRef)((props, ref) => {
-    const { className, style } = props;
-    return (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("div", { className: className, style: style }) },
-        react_1.default.createElement(LazyLoadedVideoPlayer, Object.assign({}, props, { ref: ref }))));
-});
-exports.default = exports.VideoPlayer;
-//# sourceMappingURL=lazy.js.map

package/dist/cjs/VideoPlayer/lazy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"lazy.js","sourceRoot":"","sources":["../../../src/VideoPlayer/lazy.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AAMpD,MAAM,qBAAqB,GAAG,eAAK,CAAC,IAAI,CAAC,GAAG,EAAE,mDAAQ,YAAY,GAAC,CAAC,CAAC;AAMxD,QAAA,WAAW,GAAoB,IAAA,kBAAU,EAGpD,CAAC,KAAuB,EAAE,GAAG,EAAE,EAAE;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAEnC,OAAO,CACL,8BAAC,gBAAQ,IAAC,QAAQ,EAAE,uCAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI;QAC7D,8BAAC,qBAAqB,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CACrC,CACZ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAe,mBAAW,CAAC"}

package/dist/esm/VideoPlayer/lazy.js

@@ -1,9 +0,0 @@
-import React, { Suspense, forwardRef } from "react";
-const LazyLoadedVideoPlayer = React.lazy(() => import("./index.js"));
-export const VideoPlayer = forwardRef((props, ref) => {
-    const { className, style } = props;
-    return (React.createElement(Suspense, { fallback: React.createElement("div", { className: className, style: style }) },
-        React.createElement(LazyLoadedVideoPlayer, Object.assign({}, props, { ref: ref }))));
-});
-export default VideoPlayer;
-//# sourceMappingURL=lazy.js.map

package/dist/esm/VideoPlayer/lazy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"lazy.js","sourceRoot":"","sources":["../../../src/VideoPlayer/lazy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMpD,MAAM,qBAAqB,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;AAMrE,MAAM,CAAC,MAAM,WAAW,GAAoB,UAAU,CAGpD,CAAC,KAAuB,EAAE,GAAG,EAAE,EAAE;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAEnC,OAAO,CACL,oBAAC,QAAQ,IAAC,QAAQ,EAAE,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI;QAC7D,oBAAC,qBAAqB,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CACrC,CACZ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/types/VideoPlayer/lazy.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-import type MuxPlayerElement from "@mux/mux-player";
-import type { VideoPlayerProps } from "./index";
-type VideoPlayerType = React.ForwardRefExoticComponent<VideoPlayerProps & React.RefAttributes<MuxPlayerElement>>;
-export declare const VideoPlayer: VideoPlayerType;
-export default VideoPlayer;

package/src/VideoPlayer/lazy.tsx

@@ -1,26 +0,0 @@
-import React, { Suspense, forwardRef } from "react";
-import type MuxPlayerElement from "@mux/mux-player";
-import type MuxPlayer from "@mux/mux-player-react/.";
-
-import type { VideoPlayerProps } from "./index";
-
-const LazyLoadedVideoPlayer = React.lazy(() => import("./index.js"));
-
-type VideoPlayerType = React.ForwardRefExoticComponent<
-  VideoPlayerProps & React.RefAttributes<MuxPlayerElement>
->;
-
-export const VideoPlayer: VideoPlayerType = forwardRef<
-  MuxPlayerElement,
-  VideoPlayerProps
->((props: VideoPlayerProps, ref) => {
-  const { className, style } = props;
-
-  return (
-    <Suspense fallback={<div className={className} style={style} />}>
-      <LazyLoadedVideoPlayer {...props} ref={ref} />
-    </Suspense>
-  );
-});
-
-export default VideoPlayer;