@webstudio-is/sdk-components-react 0.95.0 → 0.96.0

package/lib/components.js

@@ -1,33 +1,754 @@
-"use strict";
-export { Slot } from "./slot";
-export { Fragment } from "./fragment";
-export { HtmlEmbed } from "./html-embed";
-export { Body } from "./body";
-export { Box } from "./box";
-export { Text } from "./text";
-export { Heading } from "./heading";
-export { Paragraph } from "./paragraph";
-export { Link } from "./link";
-export { RichTextLink } from "./rich-text-link";
-export { Span } from "./span";
-export { Bold } from "./bold";
-export { Italic } from "./italic";
-export { Superscript } from "./superscript";
-export { Subscript } from "./subscript";
-export { Button } from "./button";
-export { Input } from "./input";
-export { Form } from "./form";
-export { Image } from "./image";
-export { Blockquote } from "./blockquote";
-export { List } from "./list";
-export { ListItem } from "./list-item";
-export { Separator } from "./separator";
-export { CodeText } from "./code-text";
-export { Label } from "./label";
-export { Textarea } from "./textarea";
-export { RadioButton } from "./radio-button";
-export { Checkbox } from "./checkbox";
-export { Vimeo } from "./vimeo";
-export { VimeoPreviewImage } from "./vimeo-preview-image";
-export { VimeoPlayButton } from "./vimeo-play-button";
-export { VimeoSpinner } from "./vimeo-spinner";
+// src/slot.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var Slot = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      style: { display: props.children ? "contents" : "block" }
+    }
+  );
+});
+Slot.displayName = "Slot";
+
+// src/fragment.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Fragment = forwardRef2((props, ref) => {
+  return /* @__PURE__ */ jsx2("div", { ...props, ref, style: { display: "contents" } });
+});
+Fragment.displayName = "Fragment";
+
+// src/html-embed.tsx
+import {
+  forwardRef as forwardRef3,
+  useContext,
+  useEffect,
+  useRef
+} from "react";
+import { mergeRefs } from "@react-aria/utils";
+import { ReactSdkContext } from "@webstudio-is/react-sdk";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ExecutableHtml = (props) => {
+  const { code, innerRef, ...rest } = props;
+  const containerRef = useRef(null);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container === null || code === void 0) {
+      return;
+    }
+    const range = document.createRange();
+    range.setStart(container, 0);
+    const fragment = range.createContextualFragment(code);
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
+    container.append(fragment);
+  }, [code]);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ...rest,
+      ref: mergeRefs(innerRef, containerRef),
+      style: { display: "contents" }
+    }
+  );
+};
+var InnerHtml = (props) => {
+  const { code, innerRef, ...rest } = props;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ...rest,
+      ref: innerRef,
+      style: { display: "contents" },
+      dangerouslySetInnerHTML: { __html: props.code ?? "" }
+    }
+  );
+};
+var Placeholder = (props) => {
+  const { code, innerRef, ...rest } = props;
+  return /* @__PURE__ */ jsx3("div", { ref: innerRef, ...rest, style: { padding: "20px" }, children: 'Open the "Settings" panel to insert HTML code' });
+};
+var HtmlEmbed = forwardRef3((props, ref) => {
+  const { renderer } = useContext(ReactSdkContext);
+  const { code, executeScriptOnCanvas, ...rest } = props;
+  if (code === void 0 || code.trim().length === 0) {
+    return /* @__PURE__ */ jsx3(Placeholder, { innerRef: ref, ...rest });
+  }
+  if (renderer === "canvas" && executeScriptOnCanvas === true || renderer === "preview") {
+    return /* @__PURE__ */ jsx3(ExecutableHtml, { innerRef: ref, code, ...rest });
+  }
+  return /* @__PURE__ */ jsx3(InnerHtml, { innerRef: ref, code, ...rest });
+});
+HtmlEmbed.displayName = "HtmlEmbed";
+
+// src/body.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Body = forwardRef4((props, ref) => /* @__PURE__ */ jsx4("body", { ...props, ref }));
+Body.displayName = "Body";
+
+// src/box.tsx
+import {
+  createElement,
+  forwardRef as forwardRef5
+} from "react";
+var defaultTag = "div";
+var Box = forwardRef5(
+  ({ tag = defaultTag, ...props }, ref) => {
+    return createElement(tag, { ...props, ref });
+  }
+);
+Box.displayName = "Box";
+
+// src/text.tsx
+import {
+  createElement as createElement2,
+  forwardRef as forwardRef6
+} from "react";
+var defaultTag2 = "div";
+var Text = forwardRef6(
+  ({ tag = defaultTag2, ...props }, ref) => {
+    return createElement2(tag, { ...props, ref });
+  }
+);
+Text.displayName = "Text";
+
+// src/heading.tsx
+import {
+  forwardRef as forwardRef7,
+  createElement as createElement3
+} from "react";
+var defaultTag3 = "h1";
+var Heading = forwardRef7(
+  ({ tag = defaultTag3, ...props }, ref) => {
+    return createElement3(tag, { ...props, ref });
+  }
+);
+Heading.displayName = "Heading";
+
+// src/paragraph.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Paragraph = forwardRef8((props, ref) => /* @__PURE__ */ jsx5("p", { ...props, ref }));
+Paragraph.displayName = "Paragraph";
+
+// src/link.tsx
+import { forwardRef as forwardRef9, useContext as useContext2 } from "react";
+import {
+  usePropUrl,
+  getInstanceIdFromComponentProps,
+  ReactSdkContext as ReactSdkContext2
+} from "@webstudio-is/react-sdk";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Link = forwardRef9((props, ref) => {
+  const { assetBaseUrl } = useContext2(ReactSdkContext2);
+  const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
+  let url = "#";
+  switch (href?.type) {
+    case "page": {
+      url = href.page.path === "" ? "/" : href.page.path;
+      const urlTo = new URL(url, "https://any-valid.url");
+      url = urlTo.pathname;
+      if (href.hash !== void 0) {
+        urlTo.hash = encodeURIComponent(href.hash);
+        url = `${urlTo.pathname}${urlTo.hash}`;
+      }
+      break;
+    }
+    case "asset":
+      url = `${assetBaseUrl}${href.asset.name}`;
+      break;
+    case "string":
+      url = href.url;
+  }
+  return /* @__PURE__ */ jsx6("a", { ...props, href: url, ref });
+});
+Link.displayName = "Link";
+
+// src/rich-text-link.tsx
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var RichTextLink = forwardRef10((props, ref) => /* @__PURE__ */ jsx7(Link, { ...props, ref }));
+RichTextLink.displayName = "RichTextLink";
+
+// src/span.tsx
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Span = forwardRef11((props, ref) => /* @__PURE__ */ jsx8("span", { ...props, ref }));
+Span.displayName = "Span";
+
+// src/bold.tsx
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Bold = forwardRef12((props, ref) => /* @__PURE__ */ jsx9("b", { ...props, ref }));
+Bold.displayName = "Bold";
+
+// src/italic.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Italic = forwardRef13((props, ref) => /* @__PURE__ */ jsx10("i", { ...props, ref }));
+Italic.displayName = "Italic";
+
+// src/superscript.tsx
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Superscript = forwardRef14((props, ref) => /* @__PURE__ */ jsx11("sup", { ...props, ref }));
+Superscript.displayName = "Bold";
+
+// src/subscript.tsx
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Subscript = forwardRef15((props, ref) => /* @__PURE__ */ jsx12("sub", { ...props, ref }));
+Subscript.displayName = "Subscript";
+
+// src/button.tsx
+import { forwardRef as forwardRef16 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Button = forwardRef16(
+  ({ type = "submit", children, ...props }, ref) => /* @__PURE__ */ jsx13("button", { type, ...props, ref, children })
+);
+Button.displayName = "Button";
+
+// src/input.tsx
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Input = forwardRef17(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx14("input", { ...props, ref }));
+Input.displayName = "Input";
+
+// src/form.tsx
+import { forwardRef as forwardRef18 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Form = forwardRef18(({ children, ...props }, ref) => /* @__PURE__ */ jsx15("form", { ...props, ref, children }));
+Form.displayName = "Form";
+
+// src/image.tsx
+import {
+  forwardRef as forwardRef19,
+  useMemo,
+  useContext as useContext3
+} from "react";
+import {
+  Image as WebstudioImage,
+  createImageLoader
+} from "@webstudio-is/image";
+import {
+  usePropAsset,
+  getInstanceIdFromComponentProps as getInstanceIdFromComponentProps2,
+  ReactSdkContext as ReactSdkContext3
+} from "@webstudio-is/react-sdk";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
+  width="140"
+  height="140"
+  viewBox="0 0 600 600"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  >
+  <rect width="600" height="600" fill="#CCCCCC" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M450 170H150C141.716 170 135 176.716 135 185V415C135 423.284 141.716 430 150 430H450C458.284 430 465 423.284 465 415V185C465 176.716 458.284 170 450 170ZM150 145C127.909 145 110 162.909 110 185V415C110 437.091 127.909 455 150 455H450C472.091 455 490 437.091 490 415V185C490 162.909 472.091 145 450 145H150Z"
+    fill="#A2A2A2"
+  />
+  <path
+    d="M237.135 235.012C237.135 255.723 220.345 272.512 199.635 272.512C178.924 272.512 162.135 255.723 162.135 235.012C162.135 214.301 178.924 197.512 199.635 197.512C220.345 197.512 237.135 214.301 237.135 235.012Z"
+    fill="#A2A2A2"
+  />
+  <path
+    d="M160 405V367.205L221.609 306.364L256.552 338.628L358.161 234L440 316.043V405H160Z"
+    fill="#A2A2A2"
+  />
+</svg>`)}`;
+var Image = forwardRef19(
+  ({ loading = "lazy", ...props }, ref) => {
+    const { imageBaseUrl } = useContext3(ReactSdkContext3);
+    const asset = usePropAsset(getInstanceIdFromComponentProps2(props), "src");
+    const loader = useMemo(() => {
+      return createImageLoader({ imageBaseUrl });
+    }, [imageBaseUrl]);
+    const src = asset?.name ?? props.src;
+    if (asset == null || loader == null) {
+      return /* @__PURE__ */ jsx16(
+        "img",
+        {
+          loading,
+          ...props,
+          src: src || imagePlaceholderSvg,
+          ref
+        },
+        src
+      );
+    }
+    return /* @__PURE__ */ jsx16(
+      WebstudioImage,
+      {
+        loading,
+        ...props,
+        loader,
+        src,
+        ref
+      },
+      src
+    );
+  }
+);
+Image.displayName = "Image";
+
+// src/blockquote.tsx
+import {
+  forwardRef as forwardRef20,
+  createElement as createElement4
+} from "react";
+var defaultTag4 = "blockquote";
+var Blockquote = forwardRef20(
+  (props, ref) => {
+    return createElement4(defaultTag4, { ...props, ref });
+  }
+);
+Blockquote.displayName = "Blockquote";
+
+// src/list.tsx
+import {
+  forwardRef as forwardRef21,
+  createElement as createElement5
+} from "react";
+var unorderedTag = "ul";
+var orderedTag = "ol";
+var List = forwardRef21(({ ordered = false, ...props }, ref) => {
+  const tag = ordered ? orderedTag : unorderedTag;
+  return createElement5(tag, { ...props, ref });
+});
+List.displayName = "List";
+
+// src/list-item.tsx
+import {
+  forwardRef as forwardRef22,
+  createElement as createElement6
+} from "react";
+var defaultTag5 = "li";
+var ListItem = forwardRef22(
+  (props, ref) => {
+    return createElement6(defaultTag5, { ...props, ref });
+  }
+);
+ListItem.displayName = "ListItem";
+
+// src/separator.tsx
+import {
+  forwardRef as forwardRef23,
+  createElement as createElement7
+} from "react";
+var defaultTag6 = "hr";
+var Separator = forwardRef23(
+  (props, ref) => {
+    return createElement7(defaultTag6, { ...props, ref });
+  }
+);
+Separator.displayName = "Separator";
+
+// src/code-text.tsx
+import {
+  forwardRef as forwardRef24,
+  createElement as createElement8
+} from "react";
+var defaultTag7 = "code";
+var CodeText = forwardRef24((props, ref) => {
+  return createElement8(defaultTag7, { ...props, ref });
+});
+CodeText.displayName = "CodeText";
+
+// src/label.tsx
+import { forwardRef as forwardRef25 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Label = forwardRef25((props, ref) => /* @__PURE__ */ jsx17("label", { ...props, ref }));
+Label.displayName = "Label";
+
+// src/textarea.tsx
+import { forwardRef as forwardRef26 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Textarea = forwardRef26(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx18("textarea", { ...props, ref }));
+Textarea.displayName = "Textarea";
+
+// src/radio-button.tsx
+import { forwardRef as forwardRef27 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var RadioButton = forwardRef27(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx19("input", { ...props, type: "radio", ref }));
+RadioButton.displayName = "RadioButton";
+
+// src/checkbox.tsx
+import { forwardRef as forwardRef28 } from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var Checkbox = forwardRef28(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx20("input", { ...props, type: "checkbox", ref }));
+Checkbox.displayName = "Checkbox";
+
+// src/vimeo.tsx
+import { colord } from "colord";
+import {
+  forwardRef as forwardRef29,
+  useState,
+  useRef as useRef2,
+  useEffect as useEffect2,
+  useContext as useContext4,
+  createContext,
+  useMemo as useMemo2
+} from "react";
+import { ReactSdkContext as ReactSdkContext4 } from "@webstudio-is/react-sdk";
+import { shallowEqual } from "shallow-equal";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var getUrl = (options) => {
+  if (options.url === void 0) {
+    return;
+  }
+  let url;
+  try {
+    const userUrl = new URL(options.url);
+    url = new URL(IFRAME_CDN);
+    url.pathname = `/video${userUrl.pathname}`;
+  } catch {
+  }
+  if (url === void 0) {
+    return;
+  }
+  let option;
+  for (option in options) {
+    const value = options[option];
+    if (option === "url" || value === void 0) {
+      continue;
+    }
+    url.searchParams.append(option, value.toString());
+  }
+  url.searchParams.set("autoplay", "true");
+  if (typeof options.color === "string") {
+    const color = colord(options.color).toHex().replace("#", "");
+    url.searchParams.set("color", color);
+  }
+  if (options.portrait) {
+    url.searchParams.set("title", "true");
+  }
+  if (options.byline) {
+    url.searchParams.set("portrait", "true");
+    url.searchParams.set("title", "true");
+  }
+  return url.toString();
+};
+var preconnect = (url) => {
+  const link = document.createElement("link");
+  link.rel = "preconnect";
+  link.href = url;
+  link.crossOrigin = "true";
+  document.head.append(link);
+};
+var warmed = false;
+var PLAYER_CDN = "https://f.vimeocdn.com";
+var IFRAME_CDN = "https://player.vimeo.com";
+var IMAGE_CDN = "https://i.vimeocdn.com";
+var warmConnections = () => {
+  if (warmed) {
+    return;
+  }
+  preconnect(PLAYER_CDN);
+  preconnect(IFRAME_CDN);
+  preconnect(IMAGE_CDN);
+  warmed = true;
+};
+var createPlayer = (parent, options, callback) => {
+  const url = getUrl(options);
+  if (url === void 0) {
+    return;
+  }
+  const iframe = document.createElement("iframe");
+  iframe.setAttribute(
+    "allow",
+    "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;"
+  );
+  iframe.setAttribute("frameborder", "0");
+  iframe.setAttribute("allowfullscreen", "true");
+  iframe.setAttribute("src", url);
+  iframe.setAttribute(
+    "style",
+    "position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 1s;"
+  );
+  iframe.addEventListener(
+    "load",
+    () => {
+      iframe.style.opacity = "1";
+      callback();
+    },
+    { once: true }
+  );
+  parent.appendChild(iframe);
+  return () => {
+    iframe.parentElement?.removeChild(iframe);
+  };
+};
+var getVideoId = (url) => {
+  try {
+    const parsedUrl = new URL(url);
+    const id = parsedUrl.pathname.split("/")[1];
+    if (id === "" || id == null) {
+      return;
+    }
+    return id;
+  } catch {
+  }
+};
+var loadPreviewImage = async (element, videoUrl) => {
+  const videoId = getVideoId(videoUrl);
+  const apiUrl = `https://vimeo.com/api/v2/video/${videoId}.json`;
+  const response = (await (await fetch(apiUrl)).json())[0];
+  const thumbnail = response.thumbnail_large;
+  const imgId = thumbnail.substr(thumbnail.lastIndexOf("/") + 1).split("_")[0];
+  const imageUrl = new URL(IMAGE_CDN);
+  imageUrl.pathname = `/video/${imgId}.webp`;
+  imageUrl.searchParams.append("mw", "1100");
+  imageUrl.searchParams.append("mh", "619");
+  imageUrl.searchParams.append("q", "70");
+  return imageUrl;
+};
+var useVimeo = ({
+  options,
+  renderer,
+  showPreview
+}) => {
+  const [playerStatus, setPlayerStatus] = useState("initial");
+  const elementRef = useRef2(null);
+  const [previewImageUrl, setPreviewImageUrl] = useState();
+  useEffect2(() => {
+    setPlayerStatus(
+      options.autoplay && renderer !== "canvas" ? "initialized" : "initial"
+    );
+  }, [options.autoplay, renderer]);
+  useEffect2(() => {
+    if (elementRef.current === null || playerStatus === "ready" || options.url === void 0) {
+      return;
+    }
+    if (showPreview) {
+      loadPreviewImage(elementRef.current, options.url).then(
+        setPreviewImageUrl
+      );
+      return;
+    }
+    setPreviewImageUrl(void 0);
+  }, [renderer, showPreview, options.url, playerStatus]);
+  const optionsRef = useRef2(options);
+  const stableOptions = useMemo2(() => {
+    if (shallowEqual(options, optionsRef.current) === false) {
+      optionsRef.current = options;
+    }
+    return optionsRef.current;
+  }, [options]);
+  useEffect2(() => {
+    if (elementRef.current === null || playerStatus === "initial") {
+      return;
+    }
+    return createPlayer(elementRef.current, stableOptions, () => {
+      setPlayerStatus("ready");
+    });
+  }, [stableOptions, playerStatus]);
+  return { previewImageUrl, playerStatus, setPlayerStatus, elementRef };
+};
+var Vimeo = forwardRef29(
+  ({
+    url,
+    autoplay = false,
+    autopause = true,
+    backgroundMode = false,
+    showByline = false,
+    showControls = true,
+    doNotTrack = false,
+    keyboard = true,
+    loop = false,
+    muted = false,
+    pip = false,
+    playsinline = true,
+    showPortrait = true,
+    quality = "auto",
+    responsive = true,
+    speed = false,
+    showTitle = false,
+    transparent = true,
+    showPreview = false,
+    autopip,
+    controlsColor,
+    interactiveParams,
+    texttrack,
+    children,
+    ...rest
+  }, ref) => {
+    const { renderer } = useContext4(ReactSdkContext4);
+    const { previewImageUrl, playerStatus, setPlayerStatus, elementRef } = useVimeo({
+      renderer,
+      showPreview,
+      options: {
+        url,
+        autoplay,
+        autopause,
+        keyboard,
+        loop,
+        muted,
+        pip,
+        playsinline,
+        quality,
+        responsive,
+        speed,
+        transparent,
+        portrait: showPortrait,
+        byline: showByline,
+        title: showTitle,
+        color: controlsColor,
+        controls: showControls,
+        interactive_params: interactiveParams,
+        background: backgroundMode,
+        dnt: doNotTrack
+      }
+    });
+    return /* @__PURE__ */ jsx21(
+      VimeoContext.Provider,
+      {
+        value: {
+          status: playerStatus,
+          previewImageUrl,
+          onInitPlayer() {
+            if (renderer !== "canvas") {
+              setPlayerStatus("initialized");
+            }
+          }
+        },
+        children: /* @__PURE__ */ jsx21(
+          "div",
+          {
+            ...rest,
+            ref: (value) => {
+              elementRef.current = value;
+              if (ref !== null) {
+                typeof ref === "function" ? ref(value) : ref.current = value;
+              }
+            },
+            onPointerOver: () => {
+              if (renderer !== "canvas") {
+                warmConnections();
+              }
+            },
+            children: url === void 0 ? /* @__PURE__ */ jsx21(EmptyState, {}) : children
+          }
+        )
+      }
+    );
+  }
+);
+Vimeo.displayName = "Vimeo";
+var EmptyState = () => {
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      style: {
+        display: "flex",
+        width: "100%",
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "1.2em"
+      },
+      children: 'Open the "Settings" panel and paste a video URL, e.g. https://vimeo.com/831343124.'
+    }
+  );
+};
+var VimeoContext = createContext({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onInitPlayer: () => {
+  },
+  status: "initial"
+});
+
+// src/vimeo-preview-image.tsx
+import {
+  forwardRef as forwardRef30,
+  useContext as useContext5
+} from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var base64Preview = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=`;
+var VimeoPreviewImage = forwardRef30(({ src, ...rest }, ref) => {
+  const vimeoContext = useContext5(VimeoContext);
+  return /* @__PURE__ */ jsx22(
+    Image,
+    {
+      ...rest,
+      src: String(vimeoContext.previewImageUrl ?? src ?? base64Preview),
+      ref
+    }
+  );
+});
+VimeoPreviewImage.displayName = "VimeoPreviewImage";
+
+// src/vimeo-play-button.tsx
+import {
+  forwardRef as forwardRef31,
+  useContext as useContext6
+} from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var VimeoPlayButton = forwardRef31(
+  (props, ref) => {
+    const vimeoContext = useContext6(VimeoContext);
+    if (vimeoContext.status !== "initial") {
+      return null;
+    }
+    return /* @__PURE__ */ jsx23(Button, { ...props, onClick: vimeoContext.onInitPlayer, ref });
+  }
+);
+VimeoPlayButton.displayName = "VimeoPlayButton";
+
+// src/vimeo-spinner.tsx
+import {
+  forwardRef as forwardRef32,
+  useContext as useContext7
+} from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var VimeoSpinner = forwardRef32(
+  (props, ref) => {
+    const vimeoContext = useContext7(VimeoContext);
+    if (vimeoContext.status !== "initialized") {
+      return null;
+    }
+    return /* @__PURE__ */ jsx24("div", { ...props, ref });
+  }
+);
+VimeoSpinner.displayName = "VimeoSpinner";
+export {
+  Blockquote,
+  Body,
+  Bold,
+  Box,
+  Button,
+  Checkbox,
+  CodeText,
+  Form,
+  Fragment,
+  Heading,
+  HtmlEmbed,
+  Image,
+  Input,
+  Italic,
+  Label,
+  Link,
+  List,
+  ListItem,
+  Paragraph,
+  RadioButton,
+  RichTextLink,
+  Separator,
+  Slot,
+  Span,
+  Subscript,
+  Superscript,
+  Text,
+  Textarea,
+  Vimeo,
+  VimeoPlayButton,
+  VimeoPreviewImage,
+  VimeoSpinner
+};