sanity-plugin-iframe-pane 3.1.3 → 3.1.5

package/lib/index.js

@@ -1,24 +1,20 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { MobileDeviceIcon, RefreshIcon, CopyIcon, LaunchIcon, WarningOutlineIcon } from '@sanity/icons';
-import { createPreviewSecret } from '@sanity/preview-url-secret/create-secret';
-import { definePreviewUrl } from '@sanity/preview-url-secret/define-preview-url';
-import { Text, useToast, Card, Flex, Tooltip, Button, Box, usePrefersReducedMotion, Spinner, Container, Stack } from '@sanity/ui';
-import { motion, MotionConfig, AnimatePresence } from 'framer-motion';
-import { useMemo, useRef, memo, useState, useCallback, forwardRef, useEffect, useTransition, Suspense } from 'react';
-import { useCurrentUser, useClient } from 'sanity';
-import { suspend } from 'suspend-react';
-import { useCopyToClipboard } from 'usehooks-ts';
-import { getRedirectTo } from '@sanity/preview-url-secret/get-redirect-to';
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { MobileDeviceIcon, RefreshIcon, CopyIcon, LaunchIcon, WarningOutlineIcon } from "@sanity/icons";
+import { createPreviewSecret } from "@sanity/preview-url-secret/create-secret";
+import { definePreviewUrl } from "@sanity/preview-url-secret/define-preview-url";
+import { Text, useToast, Card, Flex, Tooltip, Button, Box, usePrefersReducedMotion, Spinner, Container, Stack } from "@sanity/ui";
+import { motion, MotionConfig, AnimatePresence } from "framer-motion";
+import { useMemo, useRef, memo, useState, useCallback, forwardRef, useEffect, useTransition, Suspense } from "react";
+import { useCurrentUser, useClient } from "sanity";
+import { suspend } from "suspend-react";
+import { useCopyToClipboard } from "usehooks-ts";
+import { getRedirectTo } from "@sanity/preview-url-secret/get-redirect-to";
 function DisplayUrl(props) {
   const truncatedUrl = useMemo(() => {
     const url = getRedirectTo(props.url);
-    return "".concat(url.origin === location.origin ? "" : url.origin).concat(url.pathname).concat(url.search);
+    return `${url.origin === location.origin ? "" : url.origin}${url.pathname}${url.search}`;
   }, [props.url]);
-  return /* @__PURE__ */jsx(Text, {
-    size: 0,
-    textOverflow: "ellipsis",
-    children: truncatedUrl
-  });
+  return /* @__PURE__ */ jsx(Text, { size: 0, textOverflow: "ellipsis", children: truncatedUrl });
 }
 const sizes = {
   desktop: {
@@ -29,241 +25,179 @@ const sizes = {
     width: 414,
     height: 746
   }
-};
-const DEFAULT_SIZE = "desktop";
+}, DEFAULT_SIZE = "desktop";
 function Toolbar(props) {
-  const {
-    url,
-    iframeSize,
-    setIframeSize,
-    reloading,
-    showUrl,
-    reloadButton,
-    handleReload
-  } = props;
-  const validUrl = url instanceof URL;
-  const input = useRef(null);
-  const {
-    push: pushToast
-  } = useToast();
-  const [, copy] = useCopyToClipboard();
-  return /* @__PURE__ */jsxs(Fragment, {
-    children: [/* @__PURE__ */jsx("textarea", {
-      style: {
-        position: "absolute",
-        pointerEvents: "none",
-        opacity: 0
-      },
-      ref: input,
-      value: validUrl ? url.toString() : "",
-      readOnly: true,
-      tabIndex: -1
-    }), /* @__PURE__ */jsx(Card, {
-      padding: 2,
-      borderBottom: true,
-      children: /* @__PURE__ */jsxs(Flex, {
-        align: "center",
-        gap: 2,
-        children: [/* @__PURE__ */jsx(Flex, {
-          align: "center",
-          gap: 1,
-          children: /* @__PURE__ */jsx(Tooltip, {
-            content: /* @__PURE__ */jsx(Text, {
-              size: 1,
-              style: {
-                whiteSpace: "nowrap"
-              },
-              children: iframeSize === "mobile" ? "Exit mobile preview" : "Preview mobile viewport"
-            }),
-            padding: 2,
-            placement: "bottom-start",
-            children: /* @__PURE__ */jsx(Button, {
+  const { url, iframeSize, setIframeSize, reloading, showUrl, reloadButton, handleReload } = props, validUrl = url instanceof URL, input = useRef(null), { push: pushToast } = useToast(), [, copy] = useCopyToClipboard();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        style: { position: "absolute", pointerEvents: "none", opacity: 0 },
+        ref: input,
+        value: validUrl ? url.toString() : "",
+        readOnly: !0,
+        tabIndex: -1
+      }
+    ),
+    /* @__PURE__ */ jsx(Card, { padding: 2, borderBottom: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+      /* @__PURE__ */ jsx(Flex, { align: "center", gap: 1, children: /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          animate: !0,
+          content: /* @__PURE__ */ jsx(Text, { size: 1, style: { whiteSpace: "nowrap" }, children: iframeSize === "mobile" ? "Exit mobile preview" : "Preview mobile viewport" }),
+          padding: 2,
+          placement: "bottom-start",
+          children: /* @__PURE__ */ jsx(
+            Button,
+            {
               disabled: !validUrl,
               fontSize: [1],
               padding: 2,
               mode: iframeSize === "mobile" ? "default" : "ghost",
               icon: MobileDeviceIcon,
               onClick: () => setIframeSize(iframeSize === "mobile" ? "desktop" : "mobile")
-            })
-          })
-        }), /* @__PURE__ */jsx(Box, {
-          flex: 1,
-          children: showUrl && validUrl && /* @__PURE__ */jsx(DisplayUrl, {
-            url
-          })
-        }), /* @__PURE__ */jsxs(Flex, {
-          align: "center",
-          gap: 1,
-          children: [reloadButton ? /* @__PURE__ */jsx(Tooltip, {
-            content: /* @__PURE__ */jsx(Text, {
-              size: 1,
-              style: {
-                whiteSpace: "nowrap"
-              },
-              children: reloading ? "Reloading\u2026" : "Reload"
-            }),
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Box, { flex: 1, children: showUrl && validUrl && /* @__PURE__ */ jsx(DisplayUrl, { url }) }),
+      /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 1, children: [
+        reloadButton ? /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            animate: !0,
+            content: /* @__PURE__ */ jsx(Text, { size: 1, style: { whiteSpace: "nowrap" }, children: reloading ? "Reloading\u2026" : "Reload" }),
             padding: 2,
-            children: /* @__PURE__ */jsx(Button, {
-              disabled: !validUrl,
-              mode: "bleed",
-              fontSize: [1],
-              padding: 2,
-              icon: RefreshIcon,
-              loading: reloading,
-              "aria-label": "Reload",
-              onClick: () => handleReload()
-            })
-          }) : null, /* @__PURE__ */jsx(Tooltip, {
-            content: /* @__PURE__ */jsx(Text, {
-              size: 1,
-              style: {
-                whiteSpace: "nowrap"
-              },
-              children: "Copy URL"
-            }),
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                disabled: !validUrl,
+                mode: "bleed",
+                fontSize: [1],
+                padding: 2,
+                icon: RefreshIcon,
+                loading: reloading,
+                "aria-label": "Reload",
+                onClick: () => handleReload()
+              }
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            animate: !0,
+            content: /* @__PURE__ */ jsx(Text, { size: 1, style: { whiteSpace: "nowrap" }, children: "Copy URL" }),
             padding: 2,
-            children: /* @__PURE__ */jsx(Button, {
-              mode: "bleed",
-              disabled: !validUrl,
-              fontSize: [1],
-              icon: CopyIcon,
-              padding: [2],
-              "aria-label": "Copy URL",
-              onClick: () => {
-                var _a;
-                if (!((_a = input == null ? void 0 : input.current) == null ? void 0 : _a.value)) return;
-                copy(input.current.value);
-                pushToast({
-                  closable: true,
-                  status: "success",
-                  title: "The URL is copied to the clipboard"
-                });
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                mode: "bleed",
+                disabled: !validUrl,
+                fontSize: [1],
+                icon: CopyIcon,
+                padding: [2],
+                "aria-label": "Copy URL",
+                onClick: () => {
+                  var _a;
+                  (_a = input == null ? void 0 : input.current) != null && _a.value && (copy(input.current.value), pushToast({
+                    closable: !0,
+                    status: "success",
+                    title: "The URL is copied to the clipboard"
+                  }));
+                }
               }
-            })
-          }), /* @__PURE__ */jsx(Tooltip, {
-            content: /* @__PURE__ */jsx(Text, {
-              size: 1,
-              style: {
-                whiteSpace: "nowrap"
-              },
-              children: "Open URL in a new tab"
-            }),
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            animate: !0,
+            content: /* @__PURE__ */ jsx(Text, { size: 1, style: { whiteSpace: "nowrap" }, children: "Open URL in a new tab" }),
             padding: 2,
             placement: "bottom-end",
-            children: /* @__PURE__ */jsx(Button, {
-              disabled: !validUrl,
-              fontSize: [1],
-              icon: LaunchIcon,
-              mode: "ghost",
-              paddingY: [2],
-              text: "Open",
-              "aria-label": "Open URL in a new tab",
-              onClick: validUrl ? () => window.open(url.toString()) : void 0
-            })
-          })]
-        })]
-      })
-    })]
-  });
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                disabled: !validUrl,
+                fontSize: [1],
+                icon: LaunchIcon,
+                mode: "ghost",
+                paddingY: [2],
+                text: "Open",
+                "aria-label": "Open URL in a new tab",
+                onClick: validUrl ? () => window.open(url.toString()) : void 0
+              }
+            )
+          }
+        )
+      ] })
+    ] }) })
+  ] });
 }
 const MotionFlex = motion(Flex);
 function Iframe(props) {
-  const {
-    document,
-    options
-  } = props;
-  const draft = document.draft || document.published;
-  const {
-    defaultSize = DEFAULT_SIZE,
-    reload,
-    attributes,
-    showDisplayUrl = true,
-    key
-  } = options;
-  const urlRef = useRef(options.url);
-  const [draftSnapshot, setDraftSnapshot] = useState(() => ({
-    key,
-    draft
-  }));
+  const { document, options } = props, draft = document.draft || document.published || document.displayed, { defaultSize = DEFAULT_SIZE, reload, attributes, showDisplayUrl = !0, key } = options, urlRef = useRef(options.url), [draftSnapshot, setDraftSnapshot] = useState(() => ({ key, draft }));
   useEffect(() => {
     urlRef.current = options.url;
-  }, [options.url]);
-  useEffect(() => {
-    if (JSON.stringify({
-      key,
-      draft
-    }) !== JSON.stringify(draftSnapshot)) {
-      startTransition(() => setDraftSnapshot({
-        key,
-        draft
-      }));
-    }
+  }, [options.url]), useEffect(() => {
+    JSON.stringify({ key, draft }) !== JSON.stringify(draftSnapshot) && startTransition(() => setDraftSnapshot({ key, draft }));
   }, [draft, draftSnapshot, key]);
-  const currentUser = useCurrentUser();
-  const client = useClient({
-    apiVersion: "2023-10-16"
-  });
-  const [expiresAt, setExpiresAt] = useState();
-  const previewSecretRef = useRef();
-  const [isResolvingUrl, startTransition] = useTransition();
-  const url = useCallback(
-  // eslint-disable-next-line @typescript-eslint/no-shadow
-  async draft2 => {
-    if (typeof location === "undefined") {
-      return void 0;
-    }
-    const urlProp = urlRef.current;
-    if (typeof urlProp === "string") {
-      return new URL(urlProp, location.origin);
-    }
-    if (typeof urlProp === "function") {
-      const url2 = await urlProp(draft2);
-      return typeof url2 === "string" ? new URL(url2, location.origin) : url2;
-    }
-    if (typeof urlProp === "object") {
-      const preview = typeof urlProp.preview === "function" ? await urlProp.preview(draft2) : urlProp.preview;
-      if (typeof preview !== "string") {
-        return preview;
-      }
-      if (!previewSecretRef.current) {
-        const {
-          secret,
-          expiresAt: expiresAt2
-        } = await createPreviewSecret(client, "sanity-plugin-iframe-pane", location.href, currentUser == null ? void 0 : currentUser.id);
-        previewSecretRef.current = secret;
-        startTransition(() => setExpiresAt(expiresAt2.getTime()));
+  const currentUser = useCurrentUser(), client = useClient({ apiVersion: "2023-10-16" }), [expiresAt, setExpiresAt] = useState(), previewSecretRef = useRef(), [isResolvingUrl, startTransition] = useTransition(), url = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    async (draft2) => {
+      if (typeof location > "u")
+        return;
+      const urlProp = urlRef.current;
+      if (typeof urlProp == "string")
+        return new URL(urlProp, location.origin);
+      if (typeof urlProp == "function") {
+        const url2 = await urlProp(draft2);
+        return typeof url2 == "string" ? new URL(url2, location.origin) : url2;
       }
-      const resolvePreviewUrl = definePreviewUrl({
-        origin: urlProp.origin === "same-origin" ? location.origin : urlProp.origin,
-        preview,
-        draftMode: {
-          enable: urlProp.draftMode
+      if (typeof urlProp == "object") {
+        const preview = typeof urlProp.preview == "function" ? await urlProp.preview(draft2) : urlProp.preview;
+        if (typeof preview != "string")
+          return preview;
+        if (!previewSecretRef.current) {
+          const { secret, expiresAt: expiresAt2 } = await createPreviewSecret(
+            client,
+            "sanity-plugin-iframe-pane",
+            location.href,
+            currentUser == null ? void 0 : currentUser.id
+          );
+          previewSecretRef.current = secret, startTransition(() => setExpiresAt(expiresAt2.getTime()));
         }
-      });
-      const url2 = await resolvePreviewUrl({
-        client,
-        previewUrlSecret: previewSecretRef.current,
-        previewSearchParam: null
-      });
-      return new URL(url2, location.origin);
-    }
-    return void 0;
-  }, [client, currentUser == null ? void 0 : currentUser.id]);
-  useEffect(() => {
+        const url2 = await definePreviewUrl({
+          origin: urlProp.origin === "same-origin" ? location.origin : urlProp.origin,
+          preview,
+          draftMode: {
+            enable: urlProp.draftMode
+          }
+        })({
+          client,
+          previewUrlSecret: previewSecretRef.current,
+          previewSearchParam: null
+        });
+        return new URL(url2, location.origin);
+      }
+    },
+    [client, currentUser == null ? void 0 : currentUser.id]
+  );
+  return useEffect(() => {
     if (expiresAt) {
-      const timeout = setTimeout(() => {
-        startTransition(() => setExpiresAt(void 0));
-        previewSecretRef.current = void 0;
-      }, Math.max(0, expiresAt - Date.now()));
+      const timeout = setTimeout(
+        () => {
+          startTransition(() => setExpiresAt(void 0)), previewSecretRef.current = void 0;
+        },
+        Math.max(0, expiresAt - Date.now())
+      );
       return () => clearTimeout(timeout);
     }
-    return void 0;
-  }, [expiresAt]);
-  return /* @__PURE__ */jsx(Suspense, {
-    fallback: /* @__PURE__ */jsx(Loading, {
-      iframeSize: "desktop"
-    }),
-    children: /* @__PURE__ */jsx(IframeInner, {
+  }, [expiresAt]), /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loading, { iframeSize: "desktop" }), children: /* @__PURE__ */ jsx(
+    IframeInner,
+    {
       _key: draftSnapshot.key,
       draftSnapshot: draftSnapshot.draft,
       url,
@@ -273,144 +207,107 @@ function Iframe(props) {
       reload,
       showDisplayUrl,
       userId: currentUser == null ? void 0 : currentUser.id
-    }, draftSnapshot.key)
-  });
+    },
+    draftSnapshot.key
+  ) });
 }
-const IframeInner = memo(function IframeInner2(props) {
+const IframeInner = memo(function(props) {
   var _a;
   const {
     isResolvingUrl,
     defaultSize = DEFAULT_SIZE,
     reload,
     attributes = {},
-    showDisplayUrl = true,
+    showDisplayUrl = !0,
     draftSnapshot,
     userId,
     expiresAt,
     _key
-  } = props;
-  const [iframeSize, setIframeSize] = useState(((_a = sizes) == null ? void 0 : _a[defaultSize]) ? defaultSize : DEFAULT_SIZE);
-  const prefersReducedMotion = usePrefersReducedMotion();
-  const url = suspend(() => props.url(draftSnapshot), [
-  // Cache based on a few specific conditions
-  "sanity-plugin-iframe-pane", draftSnapshot, userId, expiresAt, _key, resolveUUID]);
-  const [loading, setLoading] = useState(true);
-  const [_reloading, setReloading] = useState(false);
-  const reloading = _reloading || isResolvingUrl;
-  const iframe = useRef(null);
-  const handleReload = useCallback(() => {
-    if (!(iframe == null ? void 0 : iframe.current)) {
-      return;
-    }
-    iframe.current.src = iframe.current.src;
-    setReloading(true);
+  } = props, [iframeSize, setIframeSize] = useState((_a = sizes) != null && _a[defaultSize] ? defaultSize : DEFAULT_SIZE), prefersReducedMotion = usePrefersReducedMotion(), url = suspend(
+    () => props.url(draftSnapshot),
+    [
+      // Cache based on a few specific conditions
+      "sanity-plugin-iframe-pane",
+      draftSnapshot,
+      userId,
+      expiresAt,
+      _key,
+      resolveUUID
+    ]
+  ), [loading, setLoading] = useState(!0), [_reloading, setReloading] = useState(!1), reloading = _reloading || isResolvingUrl, iframe = useRef(null), handleReload = useCallback(() => {
+    iframe != null && iframe.current && (iframe.current.src = iframe.current.src, setReloading(!0));
   }, []);
-  return /* @__PURE__ */jsx(MotionConfig, {
-    transition: prefersReducedMotion ? {
-      duration: 0
-    } : void 0,
-    children: /* @__PURE__ */jsxs(Flex, {
-      direction: "column",
-      style: {
-        height: "100%"
-      },
-      children: [/* @__PURE__ */jsx(Toolbar, {
+  return /* @__PURE__ */ jsx(MotionConfig, { transition: prefersReducedMotion ? { duration: 0 } : void 0, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { height: "100%" }, children: [
+    /* @__PURE__ */ jsx(
+      Toolbar,
+      {
         url,
         iframeSize,
         reloading,
         setIframeSize,
         showUrl: showDisplayUrl,
-        reloadButton: !!(reload == null ? void 0 : reload.button),
+        reloadButton: !!(reload != null && reload.button),
         handleReload
-      }), url instanceof Error ? /* @__PURE__ */jsx(ErrorCard, {
-        error: url
-      }) : /* @__PURE__ */jsx(Card, {
-        tone: "transparent",
-        style: {
-          height: "100%"
-        },
-        children: /* @__PURE__ */jsx(Frame, {
-          ref: iframe,
-          loading,
-          reloading,
-          iframeSize,
-          setReloading,
-          setLoading,
-          url,
-          attributes
-        })
-      })]
-    })
-  });
-});
-const Frame = forwardRef(function Frame2(props, iframe) {
-  const {
-    loading,
-    setLoading,
-    iframeSize,
-    attributes,
-    reloading,
-    url,
-    setReloading
-  } = props;
+      }
+    ),
+    url instanceof Error ? /* @__PURE__ */ jsx(ErrorCard, { error: url }) : /* @__PURE__ */ jsx(Card, { tone: "transparent", style: { height: "100%" }, children: /* @__PURE__ */ jsx(
+      Frame,
+      {
+        ref: iframe,
+        loading,
+        reloading,
+        iframeSize,
+        setReloading,
+        setLoading,
+        url,
+        attributes
+      }
+    ) })
+  ] }) });
+}), Frame = forwardRef(function(props, iframe) {
+  const { loading, setLoading, iframeSize, attributes, reloading, url, setReloading } = props;
   function handleIframeLoad() {
-    setLoading(false);
-    setReloading(false);
-    if (attributes.onLoad && typeof attributes.onLoad === "function") {
-      attributes.onLoad();
-    }
+    setLoading(!1), setReloading(!1), attributes.onLoad && typeof attributes.onLoad == "function" && attributes.onLoad();
   }
-  return /* @__PURE__ */jsxs(Flex, {
-    align: "center",
-    justify: "center",
-    style: {
-      height: "100%",
-      position: "relative"
-    },
-    children: [/* @__PURE__ */jsx(AnimatePresence, {
-      children: !url || loading && /* @__PURE__ */jsx(MotionFlex, {
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "center", style: { height: "100%", position: "relative" }, children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: !url || loading && /* @__PURE__ */ jsx(
+      MotionFlex,
+      {
         initial: "initial",
         animate: "animate",
         exit: "exit",
         variants: spinnerVariants,
         justify: "center",
         align: "center",
-        style: {
-          inset: "0",
-          position: "absolute"
-        },
-        children: /* @__PURE__ */jsx(Loading, {
+        style: { inset: "0", position: "absolute" },
+        children: /* @__PURE__ */ jsx(Loading, { iframeSize })
+      }
+    ) }),
+    url && /* @__PURE__ */ jsx(
+      motion.iframe,
+      {
+        ref: iframe,
+        title: "preview",
+        frameBorder: "0",
+        style: { maxHeight: "100%" },
+        src: url.toString(),
+        initial: ["background", iframeSize],
+        variants: iframeVariants,
+        animate: [
+          loading ? "background" : "active",
+          reloading ? "reloading" : "idle",
           iframeSize
-        })
-      })
-    }), url && /* @__PURE__ */jsx(motion.iframe, {
-      ref: iframe,
-      title: "preview",
-      frameBorder: "0",
-      style: {
-        maxHeight: "100%"
-      },
-      src: url.toString(),
-      initial: ["background", iframeSize],
-      variants: iframeVariants,
-      animate: [loading ? "background" : "active", reloading ? "reloading" : "idle", iframeSize],
-      ...attributes,
-      onLoad: handleIframeLoad
-    })]
-  });
-});
-const spinnerVariants = {
-  initial: {
-    opacity: 1
-  },
-  animate: {
-    opacity: [0, 0, 1]
-  },
-  exit: {
-    opacity: [1, 0, 0]
-  }
-};
-const iframeVariants = {
+        ],
+        ...attributes,
+        onLoad: handleIframeLoad
+      }
+    )
+  ] });
+}), spinnerVariants = {
+  initial: { opacity: 1 },
+  animate: { opacity: [0, 0, 1] },
+  exit: { opacity: [1, 0, 0] }
+}, iframeVariants = {
   ...sizes,
   desktop: {
     ...sizes.desktop,
@@ -435,74 +332,23 @@ const iframeVariants = {
     scale: 1
   }
 };
-function Loading(_ref) {
-  let {
-    iframeSize
-  } = _ref;
-  return /* @__PURE__ */jsxs(Flex, {
-    style: {
-      ...sizes[iframeSize]
-    },
-    justify: "center",
-    align: "center",
-    direction: "column",
-    gap: 4,
-    children: [/* @__PURE__ */jsx(Spinner, {
-      muted: true
-    }), /* @__PURE__ */jsx(Text, {
-      muted: true,
-      size: 1,
-      children: "Loading\u2026"
-    })]
-  });
+function Loading({ iframeSize }) {
+  return /* @__PURE__ */ jsxs(Flex, { style: { ...sizes[iframeSize] }, justify: "center", align: "center", direction: "column", gap: 4, children: [
+    /* @__PURE__ */ jsx(Spinner, { muted: !0 }),
+    /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: "Loading\u2026" })
+  ] });
 }
-function ErrorCard(_ref2) {
-  let {
-    error
-  } = _ref2;
-  return /* @__PURE__ */jsx(Card, {
-    height: "fill",
-    children: /* @__PURE__ */jsx(Flex, {
-      align: "center",
-      height: "fill",
-      justify: "center",
-      padding: 4,
-      sizing: "border",
-      children: /* @__PURE__ */jsx(Container, {
-        width: 0,
-        children: /* @__PURE__ */jsx(Card, {
-          padding: 4,
-          radius: 2,
-          shadow: 1,
-          tone: "caution",
-          children: /* @__PURE__ */jsxs(Flex, {
-            children: [/* @__PURE__ */jsx(Box, {
-              children: /* @__PURE__ */jsx(Text, {
-                size: 1,
-                children: /* @__PURE__ */jsx(WarningOutlineIcon, {})
-              })
-            }), /* @__PURE__ */jsxs(Stack, {
-              flex: 1,
-              marginLeft: 3,
-              space: 3,
-              children: [/* @__PURE__ */jsx(Text, {
-                as: "h1",
-                size: 1,
-                weight: "bold",
-                children: error.name
-              }), /* @__PURE__ */jsx(Text, {
-                as: "p",
-                muted: true,
-                size: 1,
-                children: error.message
-              })]
-            })]
-          })
-        })
-      })
-    })
-  });
+function ErrorCard({ error }) {
+  return /* @__PURE__ */ jsx(Card, { height: "fill", children: /* @__PURE__ */ jsx(Flex, { align: "center", height: "fill", justify: "center", padding: 4, sizing: "border", children: /* @__PURE__ */ jsx(Container, { width: 0, children: /* @__PURE__ */ jsx(Card, { padding: 4, radius: 2, shadow: 1, tone: "caution", children: /* @__PURE__ */ jsxs(Flex, { children: [
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { size: 1, children: /* @__PURE__ */ jsx(WarningOutlineIcon, {}) }) }),
+    /* @__PURE__ */ jsxs(Stack, { flex: 1, marginLeft: 3, space: 3, children: [
+      /* @__PURE__ */ jsx(Text, { as: "h1", size: 1, weight: "bold", children: error.name }),
+      /* @__PURE__ */ jsx(Text, { as: "p", muted: !0, size: 1, children: error.message })
+    ] })
+  ] }) }) }) }) });
 }
 const resolveUUID = Symbol();
-export { Iframe };
+export {
+  Iframe
+};
 //# sourceMappingURL=index.js.map