@xyo-network/react-share 7.0.0 → 7.0.1

package/dist/browser/index.mjs

@@ -1,114 +1,114 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
 // src/button/ShareButton.tsx
-import { Facebook as FacebookIcon, Share as ShareIcon, X as XIcon } from "@mui/icons-material";
+import {
+  Facebook as FacebookIcon,
+  Share as ShareIcon,
+  X as XIcon
+} from "@mui/icons-material";
 import { Popover } from "@mui/material";
 import { ButtonEx } from "@xylabs/react-button";
 import { FlexRow } from "@xylabs/react-flexbox";
 import { LinkEx } from "@xylabs/react-link";
-import React, { useRef, useState } from "react";
-var ShareButton = /* @__PURE__ */ __name(({ prepared = true, shareLink, slot, ...props }) => {
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ShareButton = ({
+  prepared = true,
+  shareLink,
+  slot,
+  ...props
+}) => {
   const [expanded, setExpanded] = useState(false);
   const anchorRef = useRef(null);
   const link = shareLink ?? globalThis.location.href;
-  return /* @__PURE__ */ React.createElement(FlexRow, {
-    gap: 1
-  }, /* @__PURE__ */ React.createElement(ButtonEx, {
-    variant: "text",
-    minWidth: 32,
-    size: "small",
-    disabled: !prepared,
-    onClick: /* @__PURE__ */ __name(() => {
-      setExpanded(true);
-    }, "onClick"),
-    ...props
-  }, /* @__PURE__ */ React.createElement(ShareIcon, {
-    htmlColor: "gray",
-    fontSize: "small",
-    ref: anchorRef
-  })), /* @__PURE__ */ React.createElement(Popover, {
-    open: prepared ? expanded : false,
-    anchorEl: anchorRef.current,
-    anchorOrigin: {
-      vertical: "top",
-      horizontal: "right"
-    },
-    onClose: /* @__PURE__ */ __name(() => setExpanded(false), "onClose"),
-    transitionDuration: 500,
-    sx: {
-      ml: 1,
-      top: -4,
-      ...slot?.popover?.sx
-    },
-    ...slot?.popover
-  }, /* @__PURE__ */ React.createElement(FlexRow, {
-    gap: 0.5,
-    padding: 0.5
-  }, /* @__PURE__ */ React.createElement(LinkEx, {
-    lineHeight: 0,
-    onClick: /* @__PURE__ */ __name(() => {
-      window.open(`https://x.com/intent/tweet?url=${encodeURIComponent(link)}`);
-      setExpanded(false);
-    }, "onClick")
-  }, /* @__PURE__ */ React.createElement(XIcon, {
-    fontSize: "small"
-  })), /* @__PURE__ */ React.createElement(LinkEx, {
-    lineHeight: 0,
-    style: {
-      color: "#4267b2"
-    },
-    onClick: /* @__PURE__ */ __name(() => {
-      window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(link)}`);
-      setExpanded(false);
-    }, "onClick")
-  }, /* @__PURE__ */ React.createElement(FacebookIcon, {
-    fontSize: "small"
-  })))));
-}, "ShareButton");
+  return /* @__PURE__ */ jsxs(FlexRow, { gap: 1, children: [
+    /* @__PURE__ */ jsx(
+      ButtonEx,
+      {
+        variant: "text",
+        minWidth: 32,
+        size: "small",
+        disabled: !prepared,
+        onClick: () => {
+          setExpanded(true);
+        },
+        ...props,
+        children: /* @__PURE__ */ jsx(ShareIcon, { htmlColor: "gray", fontSize: "small", ref: anchorRef })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: prepared ? expanded : false,
+        anchorEl: anchorRef.current,
+        anchorOrigin: { vertical: "top", horizontal: "right" },
+        onClose: () => setExpanded(false),
+        transitionDuration: 500,
+        sx: {
+          ml: 1,
+          top: -4,
+          ...slot?.popover?.sx
+        },
+        ...slot?.popover,
+        children: /* @__PURE__ */ jsxs(FlexRow, { gap: 0.5, padding: 0.5, children: [
+          /* @__PURE__ */ jsx(
+            LinkEx,
+            {
+              lineHeight: 0,
+              onClick: () => {
+                window.open(`https://x.com/intent/tweet?url=${encodeURIComponent(link)}`);
+                setExpanded(false);
+              },
+              children: /* @__PURE__ */ jsx(XIcon, { fontSize: "small" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            LinkEx,
+            {
+              lineHeight: 0,
+              style: { color: "#4267b2" },
+              onClick: () => {
+                window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(link)}`);
+                setExpanded(false);
+              },
+              children: /* @__PURE__ */ jsx(FacebookIcon, { fontSize: "small" })
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+};
 
 // src/icons/social/Facebook.tsx
 import { createSvgIcon } from "@mui/material";
-import React2 from "react";
-var FacebookSvgIcon = createSvgIcon(/* @__PURE__ */ React2.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  height: "800",
-  width: "1200",
-  viewBox: "-204.79995 -341.33325 1774.9329 2047.9995"
-}, /* @__PURE__ */ React2.createElement("path", {
-  d: "M1365.333 682.667C1365.333 305.64 1059.693 0 682.667 0 305.64 0 0 305.64 0 682.667c0 340.738 249.641 623.16 576 674.373V880H402.667V682.667H576v-150.4c0-171.094 101.917-265.6 257.853-265.6 74.69 0 152.814 13.333 152.814 13.333v168h-86.083c-84.804 0-111.25 52.623-111.25 106.61v128.057h189.333L948.4 880H789.333v477.04c326.359-51.213 576-333.635 576-674.373",
-  fill: "#1877f2"
-}), /* @__PURE__ */ React2.createElement("path", {
-  d: "M948.4 880l30.267-197.333H789.333V554.609C789.333 500.623 815.78 448 900.584 448h86.083V280s-78.124-13.333-152.814-13.333c-155.936 0-257.853 94.506-257.853 265.6v150.4H402.667V880H576v477.04a687.805 687.805 0 00106.667 8.293c36.288 0 71.91-2.84 106.666-8.293V880H948.4",
-  fill: "#fff"
-})), "Facebook");
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var FacebookSvgIcon = createSvgIcon(
+  /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", height: "800", width: "1200", viewBox: "-204.79995 -341.33325 1774.9329 2047.9995", children: [
+    /* @__PURE__ */ jsx2("path", { d: "M1365.333 682.667C1365.333 305.64 1059.693 0 682.667 0 305.64 0 0 305.64 0 682.667c0 340.738 249.641 623.16 576 674.373V880H402.667V682.667H576v-150.4c0-171.094 101.917-265.6 257.853-265.6 74.69 0 152.814 13.333 152.814 13.333v168h-86.083c-84.804 0-111.25 52.623-111.25 106.61v128.057h189.333L948.4 880H789.333v477.04c326.359-51.213 576-333.635 576-674.373", fill: "#1877f2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M948.4 880l30.267-197.333H789.333V554.609C789.333 500.623 815.78 448 900.584 448h86.083V280s-78.124-13.333-152.814-13.333c-155.936 0-257.853 94.506-257.853 265.6v150.4H402.667V880H576v477.04a687.805 687.805 0 00106.667 8.293c36.288 0 71.91-2.84 106.666-8.293V880H948.4", fill: "#fff" })
+  ] }),
+  "Facebook"
+);
 
 // src/icons/social/XTwitter.tsx
 import { createSvgIcon as createSvgIcon2 } from "@mui/material";
-import React3 from "react";
-var XTwitterSvgIcon = createSvgIcon2(/* @__PURE__ */ React3.createElement("svg", {
-  viewBox: "0 0 1200 1227",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /* @__PURE__ */ React3.createElement("path", {
-  d: "M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z",
-  fill: "white"
-})), "XTwitterSvgIcon");
+import { jsx as jsx3 } from "react/jsx-runtime";
+var XTwitterSvgIcon = createSvgIcon2(
+  /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 1200 1227", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx3("path", { d: "M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z", fill: "white" }) }),
+  "XTwitterSvgIcon"
+);
 
 // src/meta-server/dynamic-share/DynamicShareImage.tsx
-import React4 from "react";
 import { Helmet } from "react-helmet";
-var DynamicShareImage = /* @__PURE__ */ __name(({ image }) => {
-  return /* @__PURE__ */ React4.createElement(Helmet, null, /* @__PURE__ */ React4.createElement("meta", {
-    property: "xyo:og:image",
-    content: image
-  }));
-}, "DynamicShareImage");
+import { jsx as jsx4 } from "react/jsx-runtime";
+var DynamicShareImage = ({ image }) => {
+  return /* @__PURE__ */ jsx4(Helmet, { children: /* @__PURE__ */ jsx4("meta", { property: "xyo:og:image", content: image }) });
+};
 
 // src/meta-server/live-share/HideParentsFlexbox.tsx
 import { FlexGrowRow } from "@xylabs/react-flexbox";
-import React5, { useEffect } from "react";
-var HideParentsFlexbox = /* @__PURE__ */ __name(({ children, ...props }) => {
+import { useEffect } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var HideParentsFlexbox = ({ children, ...props }) => {
   useEffect(() => {
     const style = document.createElement("style");
     document.head.append(style);
@@ -135,30 +135,46 @@ var HideParentsFlexbox = /* @__PURE__ */ __name(({ children, ...props }) => {
       style.remove();
     };
   }, []);
-  return /* @__PURE__ */ React5.createElement(FlexGrowRow, {
-    alignItems: "stretch",
-    id: "preview-area",
-    justifyContent: "start",
-    ...props
-  }, children);
-}, "HideParentsFlexbox");
+  return /* @__PURE__ */ jsx5(FlexGrowRow, { alignItems: "stretch", id: "preview-area", justifyContent: "start", ...props, children });
+};
 
 // src/out/CopyLinkStack.tsx
 import { Cancel } from "@mui/icons-material";
-import { Stack, Tooltip as Tooltip2, Typography as Typography2 } from "@mui/material";
-import React7, { useCallback, useMemo, useState as useState3 } from "react";
+import {
+  Stack,
+  Tooltip as Tooltip2,
+  Typography as Typography2
+} from "@mui/material";
+import {
+  useCallback,
+  useMemo,
+  useState as useState3
+} from "react";
 
 // src/out/CopyIconButton.tsx
 import { CopyAllRounded } from "@mui/icons-material";
-import { CircularProgress, IconButton, Tooltip } from "@mui/material";
+import {
+  CircularProgress,
+  IconButton,
+  Tooltip
+} from "@mui/material";
 import { forget } from "@xylabs/forget";
-import React6, { useState as useState2 } from "react";
-var CopyIconButton = /* @__PURE__ */ __name(({ copyLinkText, copiedLinkText, onClickError, shareLinkName, shareUrl, uploadPayloads, ...props }) => {
+import { useState as useState2 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var CopyIconButton = ({
+  copyLinkText,
+  copiedLinkText,
+  onClickError,
+  shareLinkName,
+  shareUrl,
+  uploadPayloads,
+  ...props
+}) => {
   const CopyLink = copyLinkText ?? "Copy Link";
   const Copied = copiedLinkText ?? "Copied!";
   const [copyTooltipTitle, setCopyToolTipTitle] = useState2(CopyLink);
   const [loading, setLoading] = useState2(false);
-  const copyToClipboard = /* @__PURE__ */ __name(async (link) => {
+  const copyToClipboard = async (link) => {
     if (link) {
       try {
         setLoading(true);
@@ -176,21 +192,16 @@ var CopyIconButton = /* @__PURE__ */ __name(({ copyLinkText, copiedLinkText, onC
     } else {
       console.warn("tried to copy shareUrl before it was generated");
     }
-  }, "copyToClipboard");
-  return /* @__PURE__ */ React6.createElement(Tooltip, {
-    title: copyTooltipTitle
-  }, loading ? /* @__PURE__ */ React6.createElement(IconButton, null, /* @__PURE__ */ React6.createElement(CircularProgress, {
-    size: "24px"
-  })) : /* @__PURE__ */ React6.createElement(IconButton, {
-    "aria-label": `copy ${shareLinkName} link`,
-    onClick: /* @__PURE__ */ __name(() => forget(copyToClipboard(shareUrl)), "onClick"),
-    edge: "end",
-    ...props
-  }, /* @__PURE__ */ React6.createElement(CopyAllRounded, null)));
-}, "CopyIconButton");
+  };
+  return /* @__PURE__ */ jsx6(Tooltip, { title: copyTooltipTitle, children: loading ? /* @__PURE__ */ jsx6(IconButton, { children: /* @__PURE__ */ jsx6(CircularProgress, { size: "24px" }) }) : /* @__PURE__ */ jsx6(IconButton, { "aria-label": `copy ${shareLinkName} link`, onClick: () => forget(copyToClipboard(shareUrl)), edge: "end", ...props, children: /* @__PURE__ */ jsx6(CopyAllRounded, {}) }) });
+};
 
 // src/out/lib/AnimatedGradientTypography.tsx
-import { keyframes, styled, Typography } from "@mui/material";
+import {
+  keyframes,
+  styled,
+  Typography
+} from "@mui/material";
 var moveBg = keyframes(`
     0% {
       background-position: 100% 0%;
@@ -199,9 +210,11 @@ var moveBg = keyframes(`
       background-position: 0% 0%;
     }
 `);
-var AnimatedGradientTypography = styled(Typography, {
-  name: "AnimatedGradientTypography"
-})(({ theme, color1, color2 }) => {
+var AnimatedGradientTypography = styled(Typography, { name: "AnimatedGradientTypography" })(({
+  theme,
+  color1,
+  color2
+}) => {
   return {
     // Set the color variables for the gradient
     "--color-one": color1 ?? theme.vars.palette.secondary.dark,
@@ -236,7 +249,7 @@ var AnimatedGradientTypography = styled(Typography, {
 });
 
 // src/out/lib/splitAroundSubstring.ts
-var splitAroundSubstring = /* @__PURE__ */ __name((path, substring) => {
+var splitAroundSubstring = (path, substring) => {
   const index = path.indexOf(substring);
   if (index === -1) {
     throw new Error(`XNS name "${substring}" not found in path.`);
@@ -244,15 +257,23 @@ var splitAroundSubstring = /* @__PURE__ */ __name((path, substring) => {
   const part1 = path.slice(0, index);
   const part2 = substring;
   const part3 = path.slice(index + substring.length);
-  return [
-    part1,
-    part2,
-    part3
-  ];
-}, "splitAroundSubstring");
+  return [part1, part2, part3];
+};
 
 // src/out/CopyLinkStack.tsx
-var CopyLinkStack = /* @__PURE__ */ __name(({ addToXnsName, copiedLinkText, copyLinkText, shareLinkName, shareUrl, xnsName: xnsNameProp, xnsEndColor, uploadPayloads, xnsStartColor, ...props }) => {
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var CopyLinkStack = ({
+  addToXnsName,
+  copiedLinkText,
+  copyLinkText,
+  shareLinkName,
+  shareUrl,
+  xnsName: xnsNameProp,
+  xnsEndColor,
+  uploadPayloads,
+  xnsStartColor,
+  ...props
+}) => {
   const [error, setError] = useState3();
   const onClickError = useCallback((error2) => {
     setError(error2);
@@ -268,162 +289,160 @@ var CopyLinkStack = /* @__PURE__ */ __name(({ addToXnsName, copiedLinkText, copy
     }
   }, []);
   const [part1, xnsName, part3] = parsedXnsName || [];
-  return /* @__PURE__ */ React7.createElement(Stack, {
-    direction: "row",
-    alignItems: "center",
-    gap: 0.25,
-    ...props
-  }, xnsName && addToXnsName ? /* @__PURE__ */ React7.createElement(Stack, {
-    direction: "row",
-    maxWidth: "100%",
-    sx: {
-      overflowX: "auto"
-    }
-  }, /* @__PURE__ */ React7.createElement(Typography2, {
-    sx: {
-      display: "inline-flex"
-    }
-  }, part1), /* @__PURE__ */ React7.createElement(AnimatedGradientTypography, {
-    color1: xnsStartColor,
-    color2: xnsEndColor,
-    sx: {
-      display: "inline-flex"
-    }
-  }, xnsName), /* @__PURE__ */ React7.createElement(Typography2, {
-    sx: {
-      display: "inline-flex"
-    }
-  }, part3)) : /* @__PURE__ */ React7.createElement(Typography2, {
-    sx: {
-      display: "inline-flex",
-      maxWidth: "100%",
-      overflow: "auto"
-    }
-  }, shareUrl), /* @__PURE__ */ React7.createElement(CopyIconButton, {
-    copiedLinkText,
-    copyLinkText,
-    onClickError,
-    shareLinkName,
-    shareUrl,
-    sx: {
-      display: "inline-flex"
-    },
-    uploadPayloads
-  }), error ? /* @__PURE__ */ React7.createElement(Tooltip2, {
-    title: error.message
-  }, /* @__PURE__ */ React7.createElement(Cancel, {
-    color: "error",
-    sx: {
-      display: "inline-flex"
-    }
-  })) : null);
-}, "CopyLinkStack");
+  return /* @__PURE__ */ jsxs3(Stack, { direction: "row", alignItems: "center", gap: 0.25, ...props, children: [
+    xnsName && addToXnsName ? /* @__PURE__ */ jsxs3(Stack, { direction: "row", maxWidth: "100%", sx: { overflowX: "auto" }, children: [
+      /* @__PURE__ */ jsx7(Typography2, { sx: { display: "inline-flex" }, children: part1 }),
+      /* @__PURE__ */ jsx7(AnimatedGradientTypography, { color1: xnsStartColor, color2: xnsEndColor, sx: { display: "inline-flex" }, children: xnsName }),
+      /* @__PURE__ */ jsx7(Typography2, { sx: { display: "inline-flex" }, children: part3 })
+    ] }) : /* @__PURE__ */ jsx7(
+      Typography2,
+      {
+        sx: {
+          display: "inline-flex",
+          maxWidth: "100%",
+          overflow: "auto"
+        },
+        children: shareUrl
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      CopyIconButton,
+      {
+        copiedLinkText,
+        copyLinkText,
+        onClickError,
+        shareLinkName,
+        shareUrl,
+        sx: { display: "inline-flex" },
+        uploadPayloads
+      }
+    ),
+    error ? /* @__PURE__ */ jsx7(Tooltip2, { title: error.message, children: /* @__PURE__ */ jsx7(Cancel, { color: "error", sx: { display: "inline-flex" } }) }) : null
+  ] });
+};
 
 // src/out/CopyLinkTextField.tsx
 import { InputAdornment, TextField } from "@mui/material";
-import React8, { useCallback as useCallback2, useState as useState4 } from "react";
-var CopyLinkTextField = /* @__PURE__ */ __name(({ shareLinkName, shareUrl, ...props }) => {
+import { useCallback as useCallback2, useState as useState4 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var CopyLinkTextField = ({
+  shareLinkName,
+  shareUrl,
+  ...props
+}) => {
   const [error, setError] = useState4();
   const onClickError = useCallback2((error2) => {
     setError(error2);
   }, []);
-  return /* @__PURE__ */ React8.createElement(TextField, {
-    disabled: true,
-    error: !!error,
-    helperText: error?.message,
-    // to override the color that appears when it's a text field, only on dark mode
-    sx: {
-      input: {
-        WebkitTextFillColor: "lightgray !important"
-      }
-    },
-    value: shareUrl,
-    ...props,
-    slotProps: {
-      input: {
-        endAdornment: /* @__PURE__ */ React8.createElement(InputAdornment, {
-          position: "end"
-        }, /* @__PURE__ */ React8.createElement(CopyIconButton, {
-          shareLinkName,
-          shareUrl,
-          onClickError
-        }))
+  return /* @__PURE__ */ jsx8(
+    TextField,
+    {
+      disabled: true,
+      error: !!error,
+      helperText: error?.message,
+      sx: { input: { WebkitTextFillColor: "lightgray !important" } },
+      value: shareUrl,
+      ...props,
+      slotProps: {
+        input: {
+          endAdornment: /* @__PURE__ */ jsx8(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx8(CopyIconButton, { shareLinkName, shareUrl, onClickError }) })
+        }
       }
     }
-  });
-}, "CopyLinkTextField");
+  );
+};
 
 // src/out/Dialog.tsx
-import { Dialog, DialogActions, DialogContent, DialogTitle, Stack as Stack2, Typography as Typography3 } from "@mui/material";
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Stack as Stack2,
+  Typography as Typography3
+} from "@mui/material";
 import { FlexCol, FlexGrowCol } from "@xylabs/react-flexbox";
-import React9 from "react";
-var ShareOutDialog = /* @__PURE__ */ __name(({ ShareOutDialogActions, cardImg, open, onClose, shareOutDialogContent, subtitle, title, ...props }) => {
-  const handleClose = /* @__PURE__ */ __name(() => {
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var ShareOutDialog = ({
+  ShareOutDialogActions,
+  cardImg,
+  open,
+  onClose,
+  shareOutDialogContent,
+  subtitle,
+  title,
+  ...props
+}) => {
+  const handleClose = () => {
     onClose?.("", "backdropClick");
-  }, "handleClose");
-  return /* @__PURE__ */ React9.createElement(Dialog, {
-    onClose,
-    open,
-    ...props
-  }, /* @__PURE__ */ React9.createElement(DialogTitle, null, /* @__PURE__ */ React9.createElement(Stack2, {
-    direction: "row",
-    spacing: 2
-  }, /* @__PURE__ */ React9.createElement(FlexGrowCol, {
-    alignItems: "flex-start",
-    width: "60%"
-  }, /* @__PURE__ */ React9.createElement(Typography3, {
-    variant: "h5"
-  }, title), /* @__PURE__ */ React9.createElement(Typography3, {
-    variant: "body1"
-  }, " ", subtitle)), /* @__PURE__ */ React9.createElement(FlexGrowCol, {
-    alignItems: "flex-end",
-    width: "40%"
-  }, cardImg))), /* @__PURE__ */ React9.createElement(DialogContent, null, shareOutDialogContent, /* @__PURE__ */ React9.createElement(FlexCol, {
-    alignItems: "stretch"
-  })), ShareOutDialogActions ? /* @__PURE__ */ React9.createElement(DialogActions, null, /* @__PURE__ */ React9.createElement(ShareOutDialogActions, {
-    onClose: handleClose
-  })) : null);
-}, "ShareOutDialog");
+  };
+  return /* @__PURE__ */ jsxs4(Dialog, { onClose, open, ...props, children: [
+    /* @__PURE__ */ jsx9(DialogTitle, { children: /* @__PURE__ */ jsxs4(Stack2, { direction: "row", spacing: 2, children: [
+      /* @__PURE__ */ jsxs4(FlexGrowCol, { alignItems: "flex-start", width: "60%", children: [
+        /* @__PURE__ */ jsx9(Typography3, { variant: "h5", children: title }),
+        /* @__PURE__ */ jsxs4(Typography3, { variant: "body1", children: [
+          " ",
+          subtitle
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx9(FlexGrowCol, { alignItems: "flex-end", width: "40%", children: cardImg })
+    ] }) }),
+    /* @__PURE__ */ jsxs4(DialogContent, { children: [
+      shareOutDialogContent,
+      /* @__PURE__ */ jsx9(FlexCol, { alignItems: "stretch" })
+    ] }),
+    ShareOutDialogActions ? /* @__PURE__ */ jsx9(DialogActions, { children: /* @__PURE__ */ jsx9(ShareOutDialogActions, { onClose: handleClose }) }) : null
+  ] });
+};
 
 // src/out/Explanation.tsx
 import { InfoOutlined } from "@mui/icons-material";
-import { Tooltip as Tooltip3, Typography as Typography4, useTheme } from "@mui/material";
+import {
+  Tooltip as Tooltip3,
+  Typography as Typography4,
+  useTheme
+} from "@mui/material";
 import { FlexGrowRow as FlexGrowRow2 } from "@xylabs/react-flexbox";
-import React10 from "react";
-var ShareOutExplanation = /* @__PURE__ */ __name(({ toolTipTitle }) => {
+import { Fragment, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var ShareOutExplanation = ({ toolTipTitle }) => {
   const theme = useTheme();
   const title = toolTipTitle ?? "In order for your data to be publicly viewable, it needs to be saved to the XYO Network Public Archivist.  Public data can be seen by your friends, and XYO can generate preview images for easier sharing on social media.";
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(FlexGrowRow2, {
-    alignItems: "center"
-  }, /* @__PURE__ */ React10.createElement(Typography4, {
-    variant: "body2",
-    paddingRight: 0.5
-  }, "What am I sharing?"), /* @__PURE__ */ React10.createElement(Tooltip3, {
-    title,
-    placement: "bottom"
-  }, /* @__PURE__ */ React10.createElement(InfoOutlined, {
-    fontSize: "small",
-    sx: {
-      fontSize: theme.typography.caption.fontSize
-    }
-  }))));
-}, "ShareOutExplanation");
+  return /* @__PURE__ */ jsx10(Fragment, { children: /* @__PURE__ */ jsxs5(FlexGrowRow2, { alignItems: "center", children: [
+    /* @__PURE__ */ jsx10(Typography4, { variant: "body2", paddingRight: 0.5, children: "What am I sharing?" }),
+    /* @__PURE__ */ jsx10(
+      Tooltip3,
+      {
+        title,
+        placement: "bottom",
+        children: /* @__PURE__ */ jsx10(InfoOutlined, { fontSize: "small", sx: { fontSize: theme.typography.caption.fontSize } })
+      }
+    )
+  ] }) });
+};
 
 // src/out/GenerateShareLinkButton.tsx
-import { Button, CircularProgress as CircularProgress2, styled as styled2 } from "@mui/material";
-import React11 from "react";
-var GenerateShareLinkButton = /* @__PURE__ */ __name(({ children = "Generate My Share Link", loading, ...props }) => {
-  return /* @__PURE__ */ React11.createElement(Button, {
-    variant: "contained",
-    startIcon: loading ? /* @__PURE__ */ React11.createElement(StyledCircularProgress, {
-      size: "small"
-    }) : null,
-    ...props
-  }, children);
-}, "GenerateShareLinkButton");
-var StyledCircularProgress = styled2(CircularProgress2, {
-  name: "StyledCircularProgress"
-})(({ theme }) => ({
+import {
+  Button,
+  CircularProgress as CircularProgress2,
+  styled as styled2
+} from "@mui/material";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var GenerateShareLinkButton = ({
+  children = "Generate My Share Link",
+  loading,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx11(
+    Button,
+    {
+      variant: "contained",
+      startIcon: loading ? /* @__PURE__ */ jsx11(StyledCircularProgress, { size: "small" }) : null,
+      ...props,
+      children
+    }
+  );
+};
+var StyledCircularProgress = styled2(CircularProgress2, { name: "StyledCircularProgress" })(({ theme }) => ({
   // ensure the color of the spinner is the same as the button color
   color: theme.vars.palette.primary.contrastText,
   height: "20px",
@@ -434,32 +453,37 @@ var StyledCircularProgress = styled2(CircularProgress2, {
 // src/out/HeadingFlexbox.tsx
 import { Typography as Typography5 } from "@mui/material";
 import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
-import React12 from "react";
-var ShareOutHeadingFlexbox = /* @__PURE__ */ __name(({ children, shareLinkName, shareUrl, ...props }) => {
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var ShareOutHeadingFlexbox = ({
+  children,
+  shareLinkName,
+  shareUrl,
+  ...props
+}) => {
   const GenerateShareLinkExplanation = "When you generate your share link, we'll make a small amount of your data public so friends can check it out!";
-  return /* @__PURE__ */ React12.createElement(FlexGrowCol2, {
-    alignItems: "flex-start",
-    paddingBottom: 1,
-    ...props
-  }, /* @__PURE__ */ React12.createElement(Typography5, {
-    variant: "body1",
-    gutterBottom: true
-  }, /* @__PURE__ */ React12.createElement("strong", null, "Your Share Link")), /* @__PURE__ */ React12.createElement(Typography5, {
-    variant: "body1"
-  }, shareUrl ? `Use this link or the buttons below to share ${shareLinkName}` : GenerateShareLinkExplanation), children);
-}, "ShareOutHeadingFlexbox");
+  return /* @__PURE__ */ jsxs6(FlexGrowCol2, { alignItems: "flex-start", paddingBottom: 1, ...props, children: [
+    /* @__PURE__ */ jsx12(Typography5, { variant: "body1", gutterBottom: true, children: /* @__PURE__ */ jsx12("strong", { children: "Your Share Link" }) }),
+    /* @__PURE__ */ jsx12(Typography5, { variant: "body1", children: shareUrl ? `Use this link or the buttons below to share ${shareLinkName}` : GenerateShareLinkExplanation }),
+    children
+  ] });
+};
 
 // src/out/SocialButtonsFlexbox.tsx
 import { Typography as Typography6 } from "@mui/material";
 import { ButtonEx as ButtonEx2 } from "@xylabs/react-button";
 import { ErrorRender } from "@xylabs/react-error";
 import { FlexGrowCol as FlexGrowCol3, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
-import React13, { useState as useState5 } from "react";
-var SocialButtonsFlexbox = /* @__PURE__ */ __name(({ shareUrl, uploadPayloads, ...props }) => {
+import { useState as useState5 } from "react";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var SocialButtonsFlexbox = ({
+  shareUrl,
+  uploadPayloads,
+  ...props
+}) => {
   const [error, setError] = useState5();
   const [xLoading, setXLoading] = useState5(false);
   const [fbLoading, setFbLoading] = useState5(false);
-  const handleClick = /* @__PURE__ */ __name(async (openUrl, buttonName) => {
+  const handleClick = async (openUrl, buttonName) => {
     const setLoading = buttonName === "x" ? setXLoading : setFbLoading;
     try {
       setLoading(true);
@@ -471,53 +495,49 @@ var SocialButtonsFlexbox = /* @__PURE__ */ __name(({ shareUrl, uploadPayloads, .
       console.error("Error uploading payloads", e);
       setError(e);
     }
-  }, "handleClick");
-  return /* @__PURE__ */ React13.createElement(FlexGrowCol3, {
-    alignItems: "stretch",
-    paddingTop: 2,
-    ...props
-  }, /* @__PURE__ */ React13.createElement(Typography6, {
-    variant: "body1",
-    gutterBottom: true
-  }, /* @__PURE__ */ React13.createElement("strong", null, "Share on Social Media")), /* @__PURE__ */ React13.createElement(FlexRow2, {
-    gap: 0.5,
-    sx: {
-      flexDirection: {
-        md: "row",
-        xs: "column"
+  };
+  return /* @__PURE__ */ jsxs7(FlexGrowCol3, { alignItems: "stretch", paddingTop: 2, ...props, children: [
+    /* @__PURE__ */ jsx13(Typography6, { variant: "body1", gutterBottom: true, children: /* @__PURE__ */ jsx13("strong", { children: "Share on Social Media" }) }),
+    /* @__PURE__ */ jsx13(
+      FlexRow2,
+      {
+        gap: 0.5,
+        sx: { flexDirection: { md: "row", xs: "column" } },
+        children: shareUrl ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+          /* @__PURE__ */ jsx13(
+            ButtonEx2,
+            {
+              variant: "contained",
+              style: { backgroundColor: "#000", color: "#fff" },
+              busy: xLoading,
+              onClick: async () => {
+                const openUrl = () => window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}`);
+                await handleClick(openUrl, "x");
+              },
+              startIcon: /* @__PURE__ */ jsx13(XTwitterSvgIcon, { width: "20px" }),
+              children: "Share on X (Twitter)"
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            ButtonEx2,
+            {
+              busy: fbLoading,
+              variant: "contained",
+              style: { backgroundColor: "#4267b2", color: "#fff" },
+              onClick: async () => {
+                const openUrl = () => window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`);
+                await handleClick(openUrl, "fb");
+              },
+              startIcon: /* @__PURE__ */ jsx13(FacebookSvgIcon, {}),
+              children: "Share on Facebook"
+            }
+          )
+        ] }) : null
       }
-    }
-  }, shareUrl ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(ButtonEx2, {
-    variant: "contained",
-    style: {
-      backgroundColor: "#000",
-      color: "#fff"
-    },
-    busy: xLoading,
-    onClick: /* @__PURE__ */ __name(async () => {
-      const openUrl = /* @__PURE__ */ __name(() => window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}`), "openUrl");
-      await handleClick(openUrl, "x");
-    }, "onClick"),
-    startIcon: /* @__PURE__ */ React13.createElement(XTwitterSvgIcon, {
-      width: "20px"
-    })
-  }, "Share on X (Twitter)"), /* @__PURE__ */ React13.createElement(ButtonEx2, {
-    busy: fbLoading,
-    variant: "contained",
-    style: {
-      backgroundColor: "#4267b2",
-      color: "#fff"
-    },
-    onClick: /* @__PURE__ */ __name(async () => {
-      const openUrl = /* @__PURE__ */ __name(() => window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`), "openUrl");
-      await handleClick(openUrl, "fb");
-    }, "onClick"),
-    startIcon: /* @__PURE__ */ React13.createElement(FacebookSvgIcon, null)
-  }, "Share on Facebook")) : null), /* @__PURE__ */ React13.createElement(ErrorRender, {
-    error,
-    scope: "SocialButtonsFlexbox"
-  }));
-}, "SocialButtonsFlexbox");
+    ),
+    /* @__PURE__ */ jsx13(ErrorRender, { error, scope: "SocialButtonsFlexbox" })
+  ] });
+};
 export {
   CopyLinkStack,
   CopyLinkTextField,