@webstudio-is/sdk-components-react 0.189.0 → 0.191.0

package/lib/components.js

@@ -1,1359 +1,79 @@
-// 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,
-  useSyncExternalStore,
-  useState,
-  useMemo
-} from "react";
-import { mergeRefs } from "@react-aria/utils";
-import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
-
-// src/html-embed-patchers.ts
-var isDOMContentLoaded = () => {
-  return document.readyState === "complete" || document.readyState === "interactive";
-};
-var eventListenerTasks = [];
-var domContentLoadedPatched = false;
-var patchDomEvents = () => {
-  if (isDOMContentLoaded() === false) {
-    console.error("DOMContentLoaded event has not been fired yet");
-    return;
-  }
-  if (domContentLoadedPatched) {
-    return;
-  }
-  domContentLoadedPatched = true;
-  const originalAddEventListener = document.addEventListener;
-  const originalWindowAddEventListener = window.addEventListener;
-  const domContentLoadedEvent = new Event("DOMContentLoaded");
-  const windowLoadEvent = new Event("load");
-  window.addEventListener = (type, listener, options) => {
-    if (type === "DOMContentLoaded") {
-      eventListenerTasks.push(
-        () => listener.call(window, domContentLoadedEvent)
-      );
-    } else if (type === "load") {
-      eventListenerTasks.push(() => listener.call(window, windowLoadEvent));
-      originalWindowAddEventListener.call(window, type, listener, options);
-    } else {
-      originalWindowAddEventListener.call(window, type, listener, options);
-    }
-  };
-  document.addEventListener = (type, listener, options) => {
-    if (type === "DOMContentLoaded") {
-      eventListenerTasks.push(
-        () => listener.call(document, domContentLoadedEvent)
-      );
-    } else {
-      originalAddEventListener.call(document, type, listener, options);
-    }
-  };
-};
-var executeDomEvents = () => {
-  for (const task of eventListenerTasks) {
-    task();
-  }
-  eventListenerTasks.length = 0;
-};
-
-// src/html-embed.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var __testing__ = {
-  scriptTestIdPrefix: "client-"
-};
-var insertScript = (sourceScript) => {
-  return new Promise((resolve, reject) => {
-    const script = document.createElement("script");
-    const hasSrc = sourceScript.hasAttribute("src");
-    const isTypeModule = sourceScript.type === "module";
-    for (const { name, value } of sourceScript.attributes) {
-      script.setAttribute(name, value);
-    }
-    if (script.dataset.testid !== void 0) {
-      script.dataset.testid = `${__testing__.scriptTestIdPrefix}${script.dataset.testid}`;
-    }
-    if (hasSrc) {
-      script.addEventListener("load", () => {
-        resolve();
-      });
-      script.addEventListener("error", reject);
-    } else {
-      if (isTypeModule) {
-        const blob = new Blob([sourceScript.innerText], {
-          type: "text/javascript"
-        });
-        const url = URL.createObjectURL(blob);
-        import(
-          /* @vite-ignore */
-          url
-        ).then(resolve).catch(reject).finally(() => {
-          URL.revokeObjectURL(url);
-        });
-        return;
-      }
-      script.textContent = sourceScript.innerText;
-    }
-    sourceScript.replaceWith(script);
-    if (hasSrc === false) {
-      resolve();
-    }
-  });
-};
-var syncTasksQueue = [];
-var processing = false;
-var processSyncTasks = async (syncTasks) => {
-  syncTasksQueue.push(...syncTasks);
-  await Promise.resolve();
-  if (processing) {
-    return;
-  }
-  patchDomEvents();
-  processing = true;
-  while (syncTasksQueue.length > 0) {
-    const task = syncTasksQueue.shift();
-    await task();
-  }
-  executeDomEvents();
-  processing = false;
-};
-var execute = (container) => {
-  const scripts = container.querySelectorAll("script");
-  const syncTasks = [];
-  const asyncTasks = [];
-  scripts.forEach((script) => {
-    const tasks = script.hasAttribute("async") ? asyncTasks : syncTasks;
-    tasks.push(() => {
-      return insertScript(script);
-    });
-  });
-  for (const task of asyncTasks) {
-    task();
-  }
-  processSyncTasks(syncTasks);
-};
-var Placeholder = (props) => {
-  const { code, innerRef, ...rest } = props;
-  return /* @__PURE__ */ jsx3("div", { ref: innerRef, ...rest, style: { display: "block", padding: 20 }, children: 'Open the "Settings" panel to insert HTML code.' });
-};
-var useIsServer = () => {
-  const isServer = useSyncExternalStore(
-    () => () => {
-    },
-    () => false,
-    () => true
-  );
-  return isServer;
-};
-var ClientOnly = (props) => {
-  const isServer = useIsServer();
-  if (isServer) {
-    return;
-  }
-  return props.children;
-};
-var ClientEmbed = (props) => {
-  const { code, innerRef, ...rest } = props;
-  const containerRef = useRef(null);
-  const executeScripts = useRef(true);
-  const html = useMemo(
-    () => ({
-      __html: code ?? ""
-    }),
-    [code]
-  );
-  useEffect(() => {
-    const container = containerRef.current;
-    if (container && executeScripts.current) {
-      executeScripts.current = false;
-      execute(container);
-    }
-  }, []);
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      ...rest,
-      ref: mergeRefs(innerRef, containerRef),
-      dangerouslySetInnerHTML: html
-    }
-  );
-};
-var ServerEmbed = (props) => {
-  const { code, innerRef, ...rest } = props;
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      ...rest,
-      ref: innerRef,
-      dangerouslySetInnerHTML: { __html: code ?? "" }
-    }
-  );
-};
-var ClientEmbedWithNonExecutableScripts = ServerEmbed;
-var HtmlEmbed = forwardRef3(
-  (props, ref) => {
-    const { code, executeScriptOnCanvas, clientOnly, children, ...rest } = props;
-    const { renderer } = useContext(ReactSdkContext);
-    const isServer = useIsServer();
-    const [ssrRendered] = useState(isServer);
-    if (code === void 0 || String(code).trim().length === 0) {
-      return /* @__PURE__ */ jsx3(Placeholder, { innerRef: ref, ...rest });
-    }
-    if (ssrRendered) {
-      if (clientOnly !== true) {
-        return /* @__PURE__ */ jsx3(ServerEmbed, { innerRef: ref, code, ...rest });
-      }
-      return /* @__PURE__ */ jsx3(ClientOnly, { children: /* @__PURE__ */ jsx3(ClientEmbed, { innerRef: ref, code, ...rest }) });
-    }
-    if (renderer === "canvas" && executeScriptOnCanvas !== true) {
-      return /* @__PURE__ */ jsx3(ClientOnly, { children: /* @__PURE__ */ jsx3(
-        ClientEmbedWithNonExecutableScripts,
-        {
-          innerRef: ref,
-          code,
-          ...rest
-        }
-      ) });
-    }
-    return /* @__PURE__ */ jsx3(ClientOnly, { children: /* @__PURE__ */ jsx3(
-      ClientEmbed,
-      {
-        innerRef: ref,
-        code,
-        ...rest
-      },
-      code
-    ) });
-  }
-);
-HtmlEmbed.displayName = "HtmlEmbed";
-
-// src/markdown-embed.tsx
-import { micromark } from "micromark";
-import { forwardRef as forwardRef4, useMemo as useMemo2 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var MarkdownEmbed = /* @__PURE__ */ forwardRef4((props, ref) => {
-  const { code, children, ...rest } = props;
-  const html = useMemo2(
-    // support data uri protocol in images
-    () => micromark(code ?? "", { allowDangerousProtocol: true }),
-    [code]
-  );
-  return /* @__PURE__ */ jsx4("div", { ...rest, ref, dangerouslySetInnerHTML: { __html: html } });
-});
-
-// src/body.tsx
-import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Body = forwardRef5((props, ref) => /* @__PURE__ */ jsx5("body", { ...props, ref }));
-Body.displayName = "Body";
-
-// src/box.tsx
-import {
-  createElement,
-  forwardRef as forwardRef6
-} from "react";
-var defaultTag = "div";
-var Box = forwardRef6(
-  ({ tag = defaultTag, ...props }, ref) => {
-    return createElement(tag, { ...props, ref });
-  }
-);
-Box.displayName = "Box";
-
-// src/text.tsx
-import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var defaultTag2 = "div";
-var Text = forwardRef7(
-  ({ tag = defaultTag2, children, ...props }, ref) => {
-    const Tag = tag;
-    return /* @__PURE__ */ jsx6(Tag, { ...props, ref, children });
-  }
-);
-Text.displayName = "Text";
-
-// src/heading.tsx
-import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var defaultTag3 = "h1";
-var Heading = forwardRef8(
-  ({ tag = defaultTag3, children, ...props }, ref) => {
-    const Tag = tag;
-    return /* @__PURE__ */ jsx7(Tag, { ...props, ref, children });
-  }
-);
-Heading.displayName = "Heading";
-
-// src/paragraph.tsx
-import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Paragraph = forwardRef9(({ children, ...props }, ref) => /* @__PURE__ */ jsx8("p", { ...props, ref, children }));
-Paragraph.displayName = "Paragraph";
-
-// src/link.tsx
-import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var Link = forwardRef10((props, ref) => {
-  const {
-    children,
-    // @todo: it's a hack made for Image component for the builder and should't be in the runtime at all.
-    $webstudio$canvasOnly$assetId,
-    ...rest
-  } = props;
-  return /* @__PURE__ */ jsx9("a", { ...rest, href: rest.href ?? "#", ref, children });
-});
-Link.displayName = "Link";
-
-// src/rich-text-link.tsx
-import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var RichTextLink = forwardRef11((props, ref) => /* @__PURE__ */ jsx10(Link, { ...props, ref }));
-RichTextLink.displayName = "RichTextLink";
-
-// src/span.tsx
-import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var Span = forwardRef12((props, ref) => /* @__PURE__ */ jsx11("span", { ...props, ref }));
-Span.displayName = "Span";
-
-// src/bold.tsx
-import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var Bold = forwardRef13((props, ref) => /* @__PURE__ */ jsx12("b", { ...props, ref }));
-Bold.displayName = "Bold";
-
-// src/italic.tsx
-import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var Italic = forwardRef14((props, ref) => /* @__PURE__ */ jsx13("i", { ...props, ref }));
-Italic.displayName = "Italic";
-
-// src/superscript.tsx
-import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var Superscript = forwardRef15((props, ref) => /* @__PURE__ */ jsx14("sup", { ...props, ref }));
-Superscript.displayName = "Bold";
-
-// src/subscript.tsx
-import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var Subscript = forwardRef16((props, ref) => /* @__PURE__ */ jsx15("sub", { ...props, ref }));
-Subscript.displayName = "Subscript";
-
-// src/button.tsx
-import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var Button = forwardRef17(
-  ({ type = "submit", children, ...props }, ref) => /* @__PURE__ */ jsx16("button", { type, ...props, ref, children })
-);
-Button.displayName = "Button";
-
-// src/input.tsx
-import { forwardRef as forwardRef18 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var Input = forwardRef18(
-  ({ children: _children, type = "text", value, defaultValue, ...props }, ref) => /* @__PURE__ */ jsx17(
-    "input",
-    {
-      ...props,
-      defaultValue: value ?? defaultValue,
-      type,
-      ref
-    }
-  )
-);
-Input.displayName = "Input";
-
-// src/form.tsx
-import { forwardRef as forwardRef19 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var Form = forwardRef19(({ children, ...props }, ref) => /* @__PURE__ */ jsx18("form", { ...props, ref, children }));
-Form.displayName = "Form";
-
-// src/image.tsx
-import {
-  forwardRef as forwardRef20,
-  useContext as useContext2
-} from "react";
-import { Image as WebstudioImage } from "@webstudio-is/image";
-import { ReactSdkContext as ReactSdkContext2 } from "@webstudio-is/react-sdk/runtime";
-import { jsx as jsx19 } from "react/jsx-runtime";
-var Image = forwardRef20(
-  ({
-    loading = "lazy",
-    width,
-    height,
-    optimize = true,
-    decoding: decodingProp,
-    // @todo: it's a hack made for the builder and should't be in the runtime at all.
-    $webstudio$canvasOnly$assetId,
-    ...props
-  }, ref) => {
-    const src = String(props.src ?? "");
-    const { imageLoader, renderer, assetBaseUrl } = useContext2(ReactSdkContext2);
-    let decoding = decodingProp;
-    let key = src;
-    if (renderer === "canvas") {
-      loading = "eager";
-      decoding = "sync";
-      key = $webstudio$canvasOnly$assetId ?? src;
-      if (width !== void 0 && height !== void 0 && Number.isNaN(width) && Number.isNaN(height)) {
-        optimize = false;
-        width = void 0;
-        height = void 0;
-      }
-    }
-    let assetName = src;
-    if (src.startsWith(assetBaseUrl)) {
-      assetName = src.slice(assetBaseUrl.length);
-    }
-    return /* @__PURE__ */ jsx19(
-      WebstudioImage,
-      {
-        loading,
-        decoding,
-        optimize,
-        width,
-        height,
-        ...props,
-        loader: imageLoader,
-        src: assetName,
-        ref
-      },
-      key
-    );
-  }
-);
-Image.displayName = "Image";
-
-// src/blockquote.tsx
-import { forwardRef as forwardRef21 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var Blockquote = forwardRef21(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx20("blockquote", { ...props, ref, children });
-  }
-);
-Blockquote.displayName = "Blockquote";
-
-// src/list.tsx
-import {
-  forwardRef as forwardRef22,
-  createElement as createElement2
-} from "react";
-var unorderedTag = "ul";
-var orderedTag = "ol";
-var List = forwardRef22(({ ordered = false, ...props }, ref) => {
-  const tag = ordered ? orderedTag : unorderedTag;
-  return createElement2(tag, { ...props, ref });
-});
-List.displayName = "List";
-
-// src/list-item.tsx
-import { forwardRef as forwardRef23 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var ListItem = forwardRef23(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx21("li", { ...props, ref, children });
-  }
-);
-ListItem.displayName = "ListItem";
-
-// src/separator.tsx
-import {
-  forwardRef as forwardRef24,
-  createElement as createElement3
-} from "react";
-var defaultTag4 = "hr";
-var Separator = forwardRef24(
-  (props, ref) => {
-    return createElement3(defaultTag4, { ...props, ref });
-  }
-);
-Separator.displayName = "Separator";
-
-// src/code-text.tsx
-import {
-  forwardRef as forwardRef25
-} from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var Placeholder2 = ({
-  innerRef,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsx22("code", { ...rest, style: { padding: 20 }, ref: innerRef, children: `Open the "Settings" panel to edit the code.` });
-};
-var CodeText = forwardRef25(({ code, children, ...props }, ref) => {
-  if (children === void 0 && code === void 0 || String(code).trim().length === 0) {
-    return /* @__PURE__ */ jsx22(Placeholder2, { innerRef: ref, ...props });
-  }
-  return /* @__PURE__ */ jsx22("code", { ...props, ref, children: code ?? children });
-});
-CodeText.displayName = "CodeText";
-
-// src/label.tsx
-import { forwardRef as forwardRef26 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var Label = forwardRef26((props, ref) => /* @__PURE__ */ jsx23("label", { ...props, ref }));
-Label.displayName = "Label";
-
-// src/textarea.tsx
-import { forwardRef as forwardRef27 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var Textarea = forwardRef27(({ children: _children, value, defaultValue, ...props }, ref) => /* @__PURE__ */ jsx24("textarea", { ...props, defaultValue: value ?? defaultValue, ref }));
-Textarea.displayName = "Textarea";
-
-// src/radio-button.tsx
-import { forwardRef as forwardRef28 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var RadioButton = forwardRef28(({ children: _children, checked, defaultChecked, ...props }, ref) => /* @__PURE__ */ jsx25(
-  "input",
-  {
-    ...props,
-    defaultChecked: checked ?? defaultChecked,
-    type: "radio",
-    ref
-  }
-));
-RadioButton.displayName = "RadioButton";
-
-// src/checkbox.tsx
-import { forwardRef as forwardRef29 } from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var Checkbox = forwardRef29(({ children: _children, checked, defaultChecked, ...props }, ref) => {
-  return /* @__PURE__ */ jsx26(
-    "input",
-    {
-      ...props,
-      defaultChecked: checked ?? defaultChecked,
-      type: "checkbox",
-      ref
-    }
-  );
-});
-Checkbox.displayName = "Checkbox";
-
-// src/vimeo.tsx
-import { colord } from "colord";
-import {
-  forwardRef as forwardRef30,
-  useState as useState2,
-  useEffect as useEffect2,
-  useContext as useContext3,
-  createContext
-} from "react";
-import { ReactSdkContext as ReactSdkContext3 } from "@webstudio-is/react-sdk/runtime";
-import { Fragment as Fragment2, jsx as jsx27, jsxs } from "react/jsx-runtime";
-var getVideoUrl = (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;
-  }
-  const optionsMap = {
-    showPortrait: "portrait",
-    showByline: "byline",
-    showTitle: "title",
-    controlsColor: "color",
-    showControls: "controls",
-    interactiveParams: "interactive_params",
-    backgroundMode: "background",
-    doNotTrack: "dnt"
-  };
-  let option;
-  for (option in options) {
-    const value = options[option];
-    if (option === "url" || value === void 0) {
-      continue;
-    }
-    const mappedOption = optionsMap[option] ?? option;
-    url.searchParams.append(mappedOption, value.toString());
-  }
-  url.searchParams.set("autoplay", "true");
-  if (typeof options.controlsColor === "string") {
-    const color = colord(options.controlsColor).toHex().replace("#", "");
-    url.searchParams.set("color", color);
-  }
-  if (options.showPortrait) {
-    url.searchParams.set("title", "true");
-  }
-  if (options.showByline) {
-    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.appendChild(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;
-  }
-  if (window.matchMedia("(hover: none)").matches) {
-    return;
-  }
-  preconnect(PLAYER_CDN);
-  preconnect(IFRAME_CDN);
-  preconnect(IMAGE_CDN);
-  warmed = true;
-};
-var getVideoId = (url) => {
-  try {
-    const parsedUrl = new URL(url);
-    const id = parsedUrl.pathname.split("/")[2];
-    if (id === "" || id == null) {
-      return;
-    }
-    return id;
-  } catch {
-  }
-};
-var loadPreviewImageUrl = async (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 EmptyState = () => {
-  return /* @__PURE__ */ jsx27(
-    "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 Player = ({
-  status,
-  loading,
-  videoUrl,
-  previewImageUrl,
-  autoplay,
-  renderer,
-  showPreview,
-  onStatusChange,
-  onPreviewImageUrlChange
-}) => {
-  const [opacity, setOpacity] = useState2(0);
-  useEffect2(() => {
-    if (autoplay && renderer !== "canvas" && status === "initial") {
-      onStatusChange("loading");
-    }
-  }, [autoplay, status, renderer, onStatusChange]);
-  useEffect2(() => {
-    if (renderer !== "canvas") {
-      warmConnections();
-    }
-  }, [renderer]);
-  useEffect2(() => {
-    if (videoUrl === void 0) {
-      return;
-    }
-    if (showPreview === false) {
-      onPreviewImageUrlChange(void 0);
-      return;
-    }
-    if (previewImageUrl === void 0) {
-      loadPreviewImageUrl(videoUrl).then(onPreviewImageUrlChange).catch(() => {
-        console.error(`Could not load preview image for ${videoUrl}`);
-      });
-    }
-  }, [onPreviewImageUrlChange, showPreview, videoUrl, previewImageUrl]);
-  if (renderer === "canvas" || status === "initial") {
-    return;
-  }
-  return /* @__PURE__ */ jsx27(
-    "iframe",
-    {
-      src: videoUrl,
-      loading,
-      allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;",
-      allowFullScreen: true,
-      style: {
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        opacity,
-        transition: "opacity 1s",
-        border: "none"
-      },
-      onLoad: () => {
-        onStatusChange("ready");
-        setOpacity(1);
-      }
-    }
-  );
-};
-var VimeoContext = createContext({
-  onInitPlayer: () => {
-  },
-  status: "initial"
-});
-var Vimeo = forwardRef30(
-  ({
-    url,
-    loading = "lazy",
-    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 [status, setStatus] = useState2("initial");
-    const [previewImageUrl, setPreviewImageUrl] = useState2();
-    const { renderer } = useContext3(ReactSdkContext3);
-    const videoUrl = getVideoUrl({
-      url,
-      autoplay,
-      autopause,
-      backgroundMode,
-      showControls,
-      controlsColor,
-      doNotTrack,
-      interactiveParams,
-      keyboard,
-      loop,
-      muted,
-      pip,
-      playsinline,
-      quality,
-      responsive,
-      speed,
-      texttrack,
-      showTitle,
-      transparent,
-      showPortrait,
-      autopip
-    });
-    return /* @__PURE__ */ jsx27(
-      VimeoContext.Provider,
-      {
-        value: {
-          status,
-          previewImageUrl,
-          onInitPlayer() {
-            if (renderer !== "canvas") {
-              setStatus("loading");
-            }
-          }
-        },
-        children: /* @__PURE__ */ jsx27(
-          "div",
-          {
-            ...rest,
-            ref: (value) => {
-              if (ref !== null) {
-                typeof ref === "function" ? ref(value) : ref.current = value;
-              }
-            },
-            children: videoUrl === void 0 ? /* @__PURE__ */ jsx27(EmptyState, {}) : /* @__PURE__ */ jsxs(Fragment2, { children: [
-              children,
-              /* @__PURE__ */ jsx27(
-                Player,
-                {
-                  autoplay,
-                  videoUrl,
-                  previewImageUrl,
-                  loading,
-                  showPreview,
-                  renderer,
-                  status,
-                  onStatusChange: setStatus,
-                  onPreviewImageUrlChange: setPreviewImageUrl
-                }
-              )
-            ] })
-          }
-        )
-      }
-    );
-  }
-);
-Vimeo.displayName = "Vimeo";
-
-// src/vimeo-preview-image.tsx
-import {
-  forwardRef as forwardRef31,
-  useContext as useContext4
-} from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var base64Preview = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=`;
-var VimeoPreviewImage = forwardRef31(({ src, ...rest }, ref) => {
-  const vimeoContext = useContext4(VimeoContext);
-  return /* @__PURE__ */ jsx28(
-    Image,
-    {
-      ...rest,
-      src: String(vimeoContext.previewImageUrl ?? src ?? base64Preview),
-      ref
-    }
-  );
-});
-VimeoPreviewImage.displayName = "VimeoPreviewImage";
-
-// src/vimeo-play-button.tsx
-import {
-  forwardRef as forwardRef32,
-  useContext as useContext5
-} from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var VimeoPlayButton = forwardRef32(
-  (props, ref) => {
-    const vimeoContext = useContext5(VimeoContext);
-    if (vimeoContext.status !== "initial") {
-      return;
-    }
-    return /* @__PURE__ */ jsx29(Button, { ...props, onClick: vimeoContext.onInitPlayer, ref });
-  }
-);
-VimeoPlayButton.displayName = "VimeoPlayButton";
-
-// src/vimeo-spinner.tsx
-import {
-  forwardRef as forwardRef33,
-  useContext as useContext6
-} from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var VimeoSpinner = forwardRef33(
-  (props, ref) => {
-    const vimeoContext = useContext6(VimeoContext);
-    if (vimeoContext.status !== "loading") {
-      return;
-    }
-    return /* @__PURE__ */ jsx30("div", { ...props, ref });
-  }
-);
-VimeoSpinner.displayName = "VimeoSpinner";
-
-// src/xml-node.tsx
-import { ReactSdkContext as ReactSdkContext4 } from "@webstudio-is/react-sdk/runtime";
-import {
-  Children,
-  createElement as createElement4,
-  forwardRef as forwardRef34,
-  useContext as useContext7
-} from "react";
-import { jsx as jsx31, jsxs as jsxs2 } from "react/jsx-runtime";
-var XmlNode = forwardRef34(
-  ({ tag = "", children, ...props }, ref) => {
-    const { renderer } = useContext7(ReactSdkContext4);
-    const attributeEntries = Object.entries(props).filter(
-      ([key]) => key.startsWith("data-") === false && key.startsWith("aria-") === false
-    ).filter(([key]) => key !== "tabIndex").filter(([, value]) => typeof value !== "function");
-    if (renderer === void 0) {
-      const attrProps = Object.fromEntries(attributeEntries);
-      return createElement4(tag, attrProps, children);
-    }
-    const childrenArray = Children.toArray(children);
-    const isTextChild = childrenArray.length > 0 && childrenArray.every((child) => typeof child === "string");
-    const elementName = tag.replace(/^[^\p{L}_]+/u, "").replaceAll(/[^\p{L}\p{N}\-._:]+/gu, "");
-    const attributes = attributeEntries.map(
-      ([key, value]) => `${key}=${JSON.stringify(value)}`
-    );
-    return /* @__PURE__ */ jsxs2("div", { ...props, children: [
-      /* @__PURE__ */ jsxs2("span", { style: { color: "rgb(16, 23, 233)" }, children: [
-        "<",
-        [elementName, ...attributes].join(" "),
-        ">"
-      ] }),
-      childrenArray.length > 0 && /* @__PURE__ */ jsx31(
-        "div",
-        {
-          ref,
-          style: {
-            display: isTextChild ? "inline" : "block",
-            marginLeft: isTextChild ? 0 : "1rem"
-          },
-          children
-        }
-      ),
-      /* @__PURE__ */ jsxs2("span", { style: { color: "rgb(16, 23, 233)" }, children: [
-        "</",
-        elementName,
-        ">"
-      ] })
-    ] });
-  }
-);
-XmlNode.displayName = "XmlNode";
-
-// src/time.tsx
-import { forwardRef as forwardRef35 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var languages = [
-  "af",
-  "am",
-  "ar",
-  "az",
-  "be",
-  "bg",
-  "bn",
-  "bs",
-  "ca",
-  "cs",
-  "cy",
-  "da",
-  "de",
-  "el",
-  "en",
-  "es",
-  "et",
-  "eu",
-  "fa",
-  "fi",
-  "fr",
-  "ga",
-  "gl",
-  "gu",
-  "he",
-  "hi",
-  "hr",
-  "hu",
-  "hy",
-  "id",
-  "is",
-  "it",
-  "ja",
-  "ka",
-  "kk",
-  "km",
-  "kn",
-  "ko",
-  "ky",
-  "lb",
-  "lt",
-  "lv",
-  "mk",
-  "ml",
-  "mn",
-  "mr",
-  "ms",
-  "mt",
-  "nb",
-  "nl",
-  "nn",
-  "pl",
-  "pt",
-  "ro",
-  "ru",
-  "si",
-  "sk",
-  "sl",
-  "sq",
-  "sr",
-  "sv",
-  "sw",
-  "ta",
-  "te",
-  "th",
-  "tr",
-  "uk",
-  "ur",
-  "uz",
-  "vi",
-  "zh"
-];
-var countries = [
-  "AF",
-  "AL",
-  "DZ",
-  "AS",
-  "AD",
-  "AO",
-  "AI",
-  "AQ",
-  "AG",
-  "AR",
-  "AM",
-  "AW",
-  "AU",
-  "AT",
-  "AZ",
-  "BS",
-  "BH",
-  "BD",
-  "BB",
-  "BY",
-  "BE",
-  "BZ",
-  "BJ",
-  "BM",
-  "BT",
-  "BO",
-  "BA",
-  "BW",
-  "BR",
-  "BN",
-  "BG",
-  "BF",
-  "BI",
-  "CV",
-  "KH",
-  "CM",
-  "CA",
-  "KY",
-  "CF",
-  "TD",
-  "CL",
-  "CN",
-  "CO",
-  "KM",
-  "CG",
-  "CD",
-  "CR",
-  "HR",
-  "CU",
-  "CY",
-  "CZ",
-  "DK",
-  "DJ",
-  "DM",
-  "DO",
-  "EC",
-  "EG",
-  "SV",
-  "GQ",
-  "ER",
-  "EE",
-  "SZ",
-  "ET",
-  "FJ",
-  "FI",
-  "FR",
-  "GA",
-  "GM",
-  "GE",
-  "DE",
-  "GH",
-  "GR",
-  "GD",
-  "GT",
-  "GN",
-  "GW",
-  "GY",
-  "HT",
-  "HN",
-  "HU",
-  "IS",
-  "IN",
-  "ID",
-  "IR",
-  "IQ",
-  "IE",
-  "IL",
-  "IT",
-  "JM",
-  "JP",
-  "JO",
-  "KZ",
-  "KE",
-  "KI",
-  "KP",
-  "KR",
-  "KW",
-  "KG",
-  "LA",
-  "LV",
-  "LB",
-  "LS",
-  "LR",
-  "LY",
-  "LI",
-  "LT",
-  "LU",
-  "MG",
-  "MW",
-  "MY",
-  "MV",
-  "ML",
-  "MT",
-  "MH",
-  "MR",
-  "MU",
-  "MX",
-  "FM",
-  "MD",
-  "MC",
-  "MN",
-  "ME",
-  "MA",
-  "MZ",
-  "MM",
-  "NA",
-  "NR",
-  "NP",
-  "NL",
-  "NZ",
-  "NI",
-  "NE",
-  "NG",
-  "NO",
-  "OM",
-  "PK",
-  "PW",
-  "PA",
-  "PG",
-  "PY",
-  "PE",
-  "PH",
-  "PL",
-  "PT",
-  "QA",
-  "RO",
-  "RU",
-  "RW",
-  "KN",
-  "LC",
-  "VC",
-  "WS",
-  "SM",
-  "ST",
-  "SA",
-  "SN",
-  "RS",
-  "SC",
-  "SL",
-  "SG",
-  "SK",
-  "SI",
-  "SB",
-  "SO",
-  "ZA",
-  "SS",
-  "ES",
-  "LK",
-  "SD",
-  "SR",
-  "SE",
-  "CH",
-  "SY",
-  "TW",
-  "TJ",
-  "TZ",
-  "TH",
-  "TL",
-  "TG",
-  "TO",
-  "TT",
-  "TN",
-  "TR",
-  "TM",
-  "TV",
-  "UG",
-  "UA",
-  "AE",
-  "GB",
-  "US",
-  "UY",
-  "UZ",
-  "VU",
-  "VA",
-  "VE",
-  "VN",
-  "YE",
-  "ZM",
-  "ZW"
-];
-var INITIAL_DATE_STRING = "dateTime attribute is not set";
-var INVALID_DATE_STRING = "";
-var DEFAULT_LANGUAGE = "en";
-var DEFAULT_COUNTRY = "GB";
-var DEFAULT_DATE_STYLE = "medium";
-var DEFAULT_TIME_STYLE = "none";
-var languageOrDefault = (language) => {
-  return languages.includes(language) ? language : DEFAULT_LANGUAGE;
-};
-var countryOrDefault = (country) => {
-  return countries.includes(country) ? country : DEFAULT_COUNTRY;
-};
-var dateStyleOrUndefined = (value) => {
-  if (["full", "long", "medium", "short"].includes(value)) {
-    return value;
-  }
-  return void 0;
-};
-var timeStyleOrUndefined = (value) => {
-  if (["full", "long", "medium", "short"].includes(value)) {
-    return value;
-  }
-  return void 0;
-};
-var parseDate = (datetimeString) => {
-  if (datetimeString === "") {
-    return;
-  }
-  let date = new Date(datetimeString);
-  if (Number.isNaN(date.getTime()) === false) {
-    return date;
-  }
-  if (/^\d+$/.test(datetimeString)) {
-    let timestamp = Number(datetimeString);
-    if (datetimeString.length === 10) {
-      timestamp *= 1e3;
-    }
-    date = new Date(timestamp);
-  }
-  if (Number.isNaN(date.getTime()) === false) {
-    return date;
-  }
-};
-var Time = forwardRef35(
-  ({
-    language = DEFAULT_LANGUAGE,
-    country = DEFAULT_COUNTRY,
-    dateStyle = DEFAULT_DATE_STYLE,
-    timeStyle = DEFAULT_TIME_STYLE,
-    datetime = INITIAL_DATE_STRING,
-    ...props
-  }, ref) => {
-    const locale = `${languageOrDefault(language)}-${countryOrDefault(
-      country
-    )}`;
-    const options = {
-      dateStyle: dateStyleOrUndefined(dateStyle),
-      timeStyle: timeStyleOrUndefined(timeStyle)
-    };
-    const datetimeString = datetime === null ? INVALID_DATE_STRING : datetime.toString();
-    const date = parseDate(datetimeString);
-    let formattedDate = datetimeString;
-    if (date) {
-      try {
-        formattedDate = new Intl.DateTimeFormat(locale, options).format(date);
-      } catch {
-      }
-    }
-    return /* @__PURE__ */ jsx32("time", { ref, dateTime: datetimeString, ...props, children: formattedDate });
-  }
-);
-
-// src/select.tsx
-import {
-  getClosestInstance,
-  getInstanceSelectorById
-} from "@webstudio-is/react-sdk/runtime";
-import { forwardRef as forwardRef36 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var Select = forwardRef36(({ value, defaultValue, ...props }, ref) => /* @__PURE__ */ jsx33("select", { ...props, defaultValue: value ?? defaultValue, ref }));
-Select.displayName = "Select";
-
-// src/option.tsx
-import { forwardRef as forwardRef37 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
-var Option = forwardRef37((props, ref) => /* @__PURE__ */ jsx34("option", { ...props, ref }));
-Option.displayName = "Option";
+import { Slot as e } from "./slot.js";
+import { Fragment as m } from "./fragment.js";
+import { HtmlEmbed as x } from "./html-embed.js";
+import { MarkdownEmbed as i } from "./markdown-embed.js";
+import { Body as n } from "./body.js";
+import { Box as d } from "./box.js";
+import { Text as u } from "./text.js";
+import { Heading as S } from "./heading.js";
+import { Paragraph as b } from "./paragraph.js";
+import { Link as k } from "./link.js";
+import { RichTextLink as I } from "./rich-text-link.js";
+import { Span as F } from "./span.js";
+import { Bold as h } from "./bold.js";
+import { Italic as R } from "./italic.js";
+import { Superscript as y } from "./superscript.js";
+import { Subscript as E } from "./subscript.js";
+import { Button as X } from "./button.js";
+import { Input as v } from "./input.js";
+import { Form as N, Form as O } from "./form.js";
+import { Image as z } from "./image.js";
+import { Blockquote as D } from "./blockquote.js";
+import { List as J } from "./list.js";
+import { ListItem as Q } from "./list-item.js";
+import { Separator as W } from "./separator.js";
+import { CodeText as Z } from "./code-text.js";
+import { Label as $ } from "./label.js";
+import { Textarea as ro } from "./textarea.js";
+import { RadioButton as to } from "./radio-button.js";
+import { Checkbox as po } from "./checkbox.js";
+import { Vimeo as fo } from "./vimeo.js";
+import { VimeoPreviewImage as ao } from "./vimeo-preview-image.js";
+import { VimeoPlayButton as lo } from "./vimeo-play-button.js";
+import { VimeoSpinner as uo } from "./vimeo-spinner.js";
+import { XmlNode as So } from "./xml-node.js";
+import { XmlTime as bo } from "./xml-time.js";
+import { Time as ko } from "./time.js";
+import { Select as Io } from "./select.js";
+import { Option as Fo } from "./option.js";
 export {
-  Blockquote,
-  Body,
-  Bold,
-  Box,
-  Button,
-  Checkbox,
-  CodeText,
-  Form,
-  Fragment,
-  Heading,
-  HtmlEmbed,
-  Image,
-  Input,
-  Italic,
-  Label,
-  Link,
-  List,
-  ListItem,
-  MarkdownEmbed,
-  Option,
-  Paragraph,
-  RadioButton,
-  Form as RemixForm,
-  RichTextLink,
-  Select,
-  Separator,
-  Slot,
-  Span,
-  Subscript,
-  Superscript,
-  Text,
-  Textarea,
-  Time,
-  Vimeo,
-  VimeoPlayButton,
-  VimeoPreviewImage,
-  VimeoSpinner,
-  XmlNode
+  D as Blockquote,
+  n as Body,
+  h as Bold,
+  d as Box,
+  X as Button,
+  po as Checkbox,
+  Z as CodeText,
+  N as Form,
+  m as Fragment,
+  S as Heading,
+  x as HtmlEmbed,
+  z as Image,
+  v as Input,
+  R as Italic,
+  $ as Label,
+  k as Link,
+  J as List,
+  Q as ListItem,
+  i as MarkdownEmbed,
+  Fo as Option,
+  b as Paragraph,
+  to as RadioButton,
+  O as RemixForm,
+  I as RichTextLink,
+  Io as Select,
+  W as Separator,
+  e as Slot,
+  F as Span,
+  E as Subscript,
+  y as Superscript,
+  u as Text,
+  ro as Textarea,
+  ko as Time,
+  fo as Vimeo,
+  lo as VimeoPlayButton,
+  ao as VimeoPreviewImage,
+  uo as VimeoSpinner,
+  So as XmlNode,
+  bo as XmlTime
 };