@xyo-network/react-share 3.0.2 → 3.0.4

package/dist/browser/button/ShareButton.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonExProps } from '@xylabs/react-button';
+import React from 'react';
+export interface ShareButtonProps extends ButtonExProps {
+    prepared?: boolean;
+    shareLink?: string;
+}
+export declare const ShareButton: React.FC<ShareButtonProps>;
+//# sourceMappingURL=ShareButton.d.ts.map

package/dist/browser/button/ShareButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareButton.d.ts","sourceRoot":"","sources":["../../../src/button/ShareButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAIzD,OAAO,KAA2B,MAAM,OAAO,CAAA;AAE/C,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA+ClD,CAAA"}

package/dist/browser/button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ShareButton.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA"}

package/dist/browser/icons/index.d.ts

@@ -0,0 +1,2 @@
+export * from './social/index.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/icons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/icons/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA"}

package/dist/browser/icons/social/Facebook.d.ts

@@ -0,0 +1,4 @@
+export declare const FacebookSvgIcon: import("@mui/material/OverridableComponent.js").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+//# sourceMappingURL=Facebook.d.ts.map

package/dist/browser/icons/social/Facebook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Facebook.d.ts","sourceRoot":"","sources":["../../../../src/icons/social/Facebook.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe;;CAM3B,CAAA"}

package/dist/browser/icons/social/XTwitter.d.ts

@@ -0,0 +1,4 @@
+export declare const XTwitterSvgIcon: import("@mui/material/OverridableComponent.js").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+//# sourceMappingURL=XTwitter.d.ts.map

package/dist/browser/icons/social/XTwitter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XTwitter.d.ts","sourceRoot":"","sources":["../../../../src/icons/social/XTwitter.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe;;CAK3B,CAAA"}

package/dist/browser/icons/social/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Facebook.tsx';
+export * from './XTwitter.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/icons/social/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/icons/social/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA"}

package/dist/browser/index.d.ts

@@ -1,68 +1,5 @@
-import { ButtonExProps } from '@xylabs/react-button';
-import React, { ComponentType, ReactNode } from 'react';
-import * as _mui_material_OverridableComponent_js from '@mui/material/OverridableComponent.js';
-import * as _mui_material from '@mui/material';
-import { StandardTextFieldProps, DialogProps, ButtonProps } from '@mui/material';
-import { FlexBoxProps } from '@xylabs/react-flexbox';
-import { WithChildren } from '@xylabs/react-shared';
-
-interface ShareButtonProps extends ButtonExProps {
-    prepared?: boolean;
-    shareLink?: string;
-}
-declare const ShareButton: React.FC<ShareButtonProps>;
-
-declare const FacebookSvgIcon: _mui_material_OverridableComponent_js.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-
-declare const XTwitterSvgIcon: _mui_material_OverridableComponent_js.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-
-interface DynamicShareImageProps {
-    image: string;
-}
-declare const DynamicShareImage: React.FC<DynamicShareImageProps>;
-
-declare const HideParentsFlexbox: React.FC<WithChildren & FlexBoxProps>;
-
-interface CopyLinkTextFieldProps extends StandardTextFieldProps {
-    shareLinkName?: string;
-    shareUrl?: string;
-}
-declare const CopyLinkTextField: React.FC<CopyLinkTextFieldProps>;
-
-interface ShareOutDialogProps extends DialogProps {
-    ShareOutDialogActions?: ComponentType<{
-        onClose?: () => void;
-    }>;
-    cardImg?: ReactNode;
-    shareOutDialogContent?: ReactNode;
-    subtitle?: string;
-    title?: string;
-}
-declare const ShareOutDialog: React.FC<ShareOutDialogProps>;
-
-interface ShareOutExplanationProps {
-    toolTipTitle?: string;
-}
-declare const ShareOutExplanation: React.FC<ShareOutExplanationProps>;
-
-interface GenerateShareLinkButtonProps extends ButtonProps {
-    loading?: boolean;
-}
-declare const GenerateShareLinkButton: React.FC<GenerateShareLinkButtonProps>;
-
-interface ShareOutHeadingFlexboxProps extends FlexBoxProps {
-    shareLinkName?: string;
-    shareUrl?: string;
-}
-declare const ShareOutHeadingFlexbox: React.FC<ShareOutHeadingFlexboxProps>;
-
-interface SocialButtonsFlexboxProps extends FlexBoxProps {
-    shareUrl?: string;
-}
-declare const SocialButtonsFlexbox: React.FC<SocialButtonsFlexboxProps>;
-
-export { CopyLinkTextField, type CopyLinkTextFieldProps, DynamicShareImage, type DynamicShareImageProps, FacebookSvgIcon, GenerateShareLinkButton, type GenerateShareLinkButtonProps, HideParentsFlexbox, ShareButton, type ShareButtonProps, ShareOutDialog, type ShareOutDialogProps, ShareOutExplanation, type ShareOutExplanationProps, ShareOutHeadingFlexbox, type ShareOutHeadingFlexboxProps, SocialButtonsFlexbox, type SocialButtonsFlexboxProps, XTwitterSvgIcon };
+export * from './button/index.ts';
+export * from './icons/index.ts';
+export * from './meta-server/index.ts';
+export * from './out/index.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,wBAAwB,CAAA;AACtC,cAAc,gBAAgB,CAAA"}

package/dist/browser/index.mjs

@@ -137,26 +137,51 @@ var HideParentsFlexbox = /* @__PURE__ */ __name(({ children, ...props }) => {
 }, "HideParentsFlexbox");
 
 // src/out/CopyLinkTextField.tsx
+import { InputAdornment, TextField } from "@mui/material";
+import React7, { useCallback, useState as useState3 } from "react";
+
+// src/out/CopyIconButton.tsx
 import { CopyAllRounded } from "@mui/icons-material";
-import { IconButton, InputAdornment, TextField } from "@mui/material";
+import { IconButton, Tooltip } from "@mui/material";
 import { forget } from "@xylabs/forget";
 import React6, { useState as useState2 } from "react";
-var CopyLinkTextField = /* @__PURE__ */ __name(({ shareLinkName, shareUrl, ...props }) => {
-  const [error, setError] = useState2();
+var CopyLink = "Copy Link";
+var Copied = "Copied!";
+var CopyIconButton = /* @__PURE__ */ __name(({ onCopyToClipboard, shareLinkName, shareUrl, ...props }) => {
+  const [copyTooltipTitle, setCopyToolTipTitle] = useState2(CopyLink);
   const copyToClipboard = /* @__PURE__ */ __name(async (link) => {
     if (link) {
       try {
         await navigator.clipboard.writeText(link);
+        onCopyToClipboard?.();
+        setCopyToolTipTitle(Copied);
+        setTimeout(() => setCopyToolTipTitle(CopyLink), 2e3);
       } catch (e) {
         const message = "Error copying shareUrl to clipboard";
         console.error(message, e, link);
-        setError(new Error(message));
+        onCopyToClipboard?.(new Error(message));
       }
     } else {
       console.warn("tried to copy shareUrl before it was generated");
     }
   }, "copyToClipboard");
-  return /* @__PURE__ */ React6.createElement(TextField, {
+  return /* @__PURE__ */ React6.createElement(Tooltip, {
+    title: copyTooltipTitle
+  }, /* @__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");
+
+// src/out/CopyLinkTextField.tsx
+var CopyLinkTextField = /* @__PURE__ */ __name(({ shareLinkName, shareUrl, ...props }) => {
+  const [error, setError] = useState3();
+  const onCopyToClipboard = useCallback((error2) => {
+    setError(error2);
+  }, []);
+  return /* @__PURE__ */ React7.createElement(TextField, {
     disabled: true,
     error: !!error,
     helperText: error?.message,
@@ -167,68 +192,193 @@ var CopyLinkTextField = /* @__PURE__ */ __name(({ shareLinkName, shareUrl, ...pr
       }
     },
     InputProps: {
-      endAdornment: /* @__PURE__ */ React6.createElement(InputAdornment, {
+      endAdornment: /* @__PURE__ */ React7.createElement(InputAdornment, {
         position: "end"
-      }, /* @__PURE__ */ React6.createElement(IconButton, {
-        "aria-label": `copy ${shareLinkName} link`,
-        onClick: /* @__PURE__ */ __name(() => forget(copyToClipboard(shareUrl)), "onClick"),
-        edge: "end"
-      }, /* @__PURE__ */ React6.createElement(CopyAllRounded, null)))
+      }, /* @__PURE__ */ React7.createElement(CopyIconButton, {
+        shareLinkName,
+        shareUrl,
+        onCopyToClipboard
+      }))
     },
     value: shareUrl,
     ...props
   });
 }, "CopyLinkTextField");
 
+// src/out/CopyLinkTypography.tsx
+import { Cancel } from "@mui/icons-material";
+import { Stack, Tooltip as Tooltip2, Typography as Typography2 } from "@mui/material";
+import React8, { useCallback as useCallback2, useMemo, useState as useState4 } from "react";
+
+// src/out/lib/AnimatedGradientTypography.tsx
+import { keyframes, styled, Typography } from "@mui/material";
+var moveBg = keyframes(`
+    0% {
+      background-position: 100% 0%;
+    }
+    100% {
+      background-position: 0% 0%;
+    }
+`);
+var AnimatedGradientTypography = styled(Typography, {
+  name: "AnimatedGradientTypography"
+})(({ theme }) => ({
+  // Set the color variables for the gradient
+  "--color-one": theme.palette.secondary.dark,
+  "--color-two": theme.palette.primary.light,
+  // set the gradient so it has the same start and end color for looping effect
+  "background": `linear-gradient(
+    .25turn,
+    var(--color-one),
+    var(--color-two),
+    var(--color-one)
+    )`,
+  // Set the text color to transparent so the gradient shows through
+  "color": "transparent",
+  // Clip the background to the text shape
+  "backgroundClip": "text",
+  // Set the background size to 800% so we don't see the third color initially creating the looping effect
+  "backgroundSize": "800%",
+  // Set the text to bold so the gradient is more visible
+  "fontWeight": "bold",
+  // Set the animation
+  "@media (prefers-reduced-motion: no-preference)": {
+    animationName: moveBg,
+    animationDuration: "2s",
+    animationIterationCount: "infinite"
+  },
+  // reset for users that prefer reduced motion
+  "@media (prefers-reduced-motion)": {
+    background: "none",
+    color: theme.palette.text.primary
+  }
+}));
+
+// src/out/lib/splitAroundSubstring.ts
+var splitAroundSubstring = /* @__PURE__ */ __name((path, substring) => {
+  const index = path.indexOf(substring);
+  if (index === -1) {
+    throw new Error(`XNS name "${substring}" not found in path.`);
+  }
+  const part1 = path.slice(0, index);
+  const part2 = substring;
+  const part3 = path.slice(index + substring.length);
+  return [
+    part1,
+    part2,
+    part3
+  ];
+}, "splitAroundSubstring");
+
+// src/out/CopyLinkTypography.tsx
+var CopyLinkTypography = /* @__PURE__ */ __name(({ shareLinkName, shareUrl, xnsName: xnsNameProp, ...props }) => {
+  const [error, setError] = useState4();
+  const onCopyToClipboard = useCallback2((error2) => {
+    setError(error2);
+  }, []);
+  const parsedXnsName = useMemo(() => {
+    if (shareUrl && xnsNameProp) {
+      try {
+        const parts = splitAroundSubstring(shareUrl, xnsNameProp);
+        return parts;
+      } catch (e) {
+        setError(e);
+      }
+    }
+  }, []);
+  const [part1, xnsName, part3] = parsedXnsName || [];
+  return /* @__PURE__ */ React8.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    gap: 0.25
+  }, xnsName ? /* @__PURE__ */ React8.createElement(Stack, {
+    direction: "row"
+  }, /* @__PURE__ */ React8.createElement(Typography2, {
+    sx: {
+      display: "inline-flex"
+    },
+    ...props
+  }, part1), /* @__PURE__ */ React8.createElement(AnimatedGradientTypography, {
+    sx: {
+      display: "inline-flex"
+    },
+    ...props
+  }, xnsName), /* @__PURE__ */ React8.createElement(Typography2, {
+    sx: {
+      display: "inline-flex"
+    },
+    ...props
+  }, part3)) : /* @__PURE__ */ React8.createElement(Typography2, {
+    sx: {
+      display: "inline-flex"
+    },
+    ...props
+  }, shareUrl), /* @__PURE__ */ React8.createElement(CopyIconButton, {
+    onCopyToClipboard,
+    shareLinkName,
+    shareUrl,
+    sx: {
+      display: "inline-flex"
+    }
+  }), error ? /* @__PURE__ */ React8.createElement(Tooltip2, {
+    title: error.message
+  }, /* @__PURE__ */ React8.createElement(Cancel, {
+    color: "error",
+    sx: {
+      display: "inline-flex"
+    }
+  })) : null);
+}, "CopyLinkTypography");
+
 // src/out/Dialog.tsx
-import { Dialog, DialogActions, DialogContent, DialogTitle, Stack, Typography } 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 React7 from "react";
+import React9 from "react";
 var ShareOutDialog = /* @__PURE__ */ __name(({ ShareOutDialogActions, cardImg, open, onClose, shareOutDialogContent, subtitle, title, ...props }) => {
   const handleClose = /* @__PURE__ */ __name(() => {
     onClose?.("", "backdropClick");
   }, "handleClose");
-  return /* @__PURE__ */ React7.createElement(Dialog, {
+  return /* @__PURE__ */ React9.createElement(Dialog, {
     onClose,
     open,
     ...props
-  }, /* @__PURE__ */ React7.createElement(DialogTitle, null, /* @__PURE__ */ React7.createElement(Stack, {
+  }, /* @__PURE__ */ React9.createElement(DialogTitle, null, /* @__PURE__ */ React9.createElement(Stack2, {
     direction: "row",
     spacing: 2
-  }, /* @__PURE__ */ React7.createElement(FlexGrowCol, {
+  }, /* @__PURE__ */ React9.createElement(FlexGrowCol, {
     alignItems: "flex-start",
     width: "60%"
-  }, /* @__PURE__ */ React7.createElement(Typography, {
+  }, /* @__PURE__ */ React9.createElement(Typography3, {
     variant: "h5"
-  }, title), /* @__PURE__ */ React7.createElement(Typography, {
+  }, title), /* @__PURE__ */ React9.createElement(Typography3, {
     variant: "body1"
-  }, " ", subtitle)), /* @__PURE__ */ React7.createElement(FlexGrowCol, {
+  }, " ", subtitle)), /* @__PURE__ */ React9.createElement(FlexGrowCol, {
     alignItems: "flex-end",
     width: "40%"
-  }, cardImg))), /* @__PURE__ */ React7.createElement(DialogContent, null, shareOutDialogContent, /* @__PURE__ */ React7.createElement(FlexCol, {
+  }, cardImg))), /* @__PURE__ */ React9.createElement(DialogContent, null, shareOutDialogContent, /* @__PURE__ */ React9.createElement(FlexCol, {
     alignItems: "stretch"
-  })), ShareOutDialogActions ? /* @__PURE__ */ React7.createElement(DialogActions, null, /* @__PURE__ */ React7.createElement(ShareOutDialogActions, {
+  })), ShareOutDialogActions ? /* @__PURE__ */ React9.createElement(DialogActions, null, /* @__PURE__ */ React9.createElement(ShareOutDialogActions, {
     onClose: handleClose
   })) : null);
 }, "ShareOutDialog");
 
 // src/out/Explanation.tsx
 import { InfoOutlined } from "@mui/icons-material";
-import { Tooltip, Typography as Typography2, useTheme } from "@mui/material";
+import { Tooltip as Tooltip3, Typography as Typography4, useTheme } from "@mui/material";
 import { FlexGrowRow as FlexGrowRow2 } from "@xylabs/react-flexbox";
-import React8 from "react";
+import React10 from "react";
 var ShareOutExplanation = /* @__PURE__ */ __name(({ 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__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(FlexGrowRow2, {
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(FlexGrowRow2, {
     alignItems: "center"
-  }, /* @__PURE__ */ React8.createElement(Typography2, {
+  }, /* @__PURE__ */ React10.createElement(Typography4, {
     variant: "body2",
     paddingRight: 0.5
-  }, "What am I sharing?"), /* @__PURE__ */ React8.createElement(Tooltip, {
+  }, "What am I sharing?"), /* @__PURE__ */ React10.createElement(Tooltip3, {
     title,
     placement: "bottom"
-  }, /* @__PURE__ */ React8.createElement(InfoOutlined, {
+  }, /* @__PURE__ */ React10.createElement(InfoOutlined, {
     fontSize: "small",
     sx: {
       fontSize: theme.typography.caption.fontSize
@@ -237,18 +387,18 @@ var ShareOutExplanation = /* @__PURE__ */ __name(({ toolTipTitle }) => {
 }, "ShareOutExplanation");
 
 // src/out/GenerateShareLinkButton.tsx
-import { Button, CircularProgress, styled } from "@mui/material";
-import React9 from "react";
+import { Button, CircularProgress, styled as styled2 } from "@mui/material";
+import React11 from "react";
 var GenerateShareLinkButton = /* @__PURE__ */ __name(({ children = "Generate My Share Link", loading, ...props }) => {
-  return /* @__PURE__ */ React9.createElement(Button, {
+  return /* @__PURE__ */ React11.createElement(Button, {
     variant: "contained",
-    startIcon: loading ? /* @__PURE__ */ React9.createElement(StyledCircularProgress, {
+    startIcon: loading ? /* @__PURE__ */ React11.createElement(StyledCircularProgress, {
       size: "small"
     }) : null,
     ...props
   }, children);
 }, "GenerateShareLinkButton");
-var StyledCircularProgress = styled(CircularProgress, {
+var StyledCircularProgress = styled2(CircularProgress, {
   name: "StyledCircularProgress"
 })(({ theme }) => ({
   // ensure the color of the spinner is the same as the button color
@@ -259,37 +409,37 @@ var StyledCircularProgress = styled(CircularProgress, {
 }));
 
 // src/out/HeadingFlexbox.tsx
-import { Typography as Typography3 } from "@mui/material";
+import { Typography as Typography5 } from "@mui/material";
 import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
-import React10 from "react";
+import React12 from "react";
 var ShareOutHeadingFlexbox = /* @__PURE__ */ __name(({ 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__ */ React10.createElement(FlexGrowCol2, {
+  return /* @__PURE__ */ React12.createElement(FlexGrowCol2, {
     alignItems: "flex-start",
     paddingBottom: 1,
     ...props
-  }, /* @__PURE__ */ React10.createElement(Typography3, {
+  }, /* @__PURE__ */ React12.createElement(Typography5, {
     variant: "body1",
     gutterBottom: true
-  }, /* @__PURE__ */ React10.createElement("strong", null, "Your Share Link")), /* @__PURE__ */ React10.createElement(Typography3, {
+  }, /* @__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");
 
 // src/out/SocialButtonsFlexbox.tsx
-import { Typography as Typography4 } from "@mui/material";
+import { Typography as Typography6 } from "@mui/material";
 import { ButtonEx as ButtonEx2 } from "@xylabs/react-button";
 import { FlexGrowCol as FlexGrowCol3, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
-import React11 from "react";
+import React13 from "react";
 var SocialButtonsFlexbox = /* @__PURE__ */ __name(({ shareUrl, ...props }) => {
-  return /* @__PURE__ */ React11.createElement(FlexGrowCol3, {
+  return /* @__PURE__ */ React13.createElement(FlexGrowCol3, {
     alignItems: "stretch",
     paddingTop: 2,
     ...props
-  }, /* @__PURE__ */ React11.createElement(Typography4, {
+  }, /* @__PURE__ */ React13.createElement(Typography6, {
     variant: "body1",
     gutterBottom: true
-  }, /* @__PURE__ */ React11.createElement("strong", null, "Share on Social Media")), /* @__PURE__ */ React11.createElement(FlexRow2, {
+  }, /* @__PURE__ */ React13.createElement("strong", null, "Share on Social Media")), /* @__PURE__ */ React13.createElement(FlexRow2, {
     gap: 0.5,
     sx: {
       flexDirection: {
@@ -297,7 +447,7 @@ var SocialButtonsFlexbox = /* @__PURE__ */ __name(({ shareUrl, ...props }) => {
         xs: "column"
       }
     }
-  }, shareUrl ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(ButtonEx2, {
+  }, shareUrl ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(ButtonEx2, {
     variant: "contained",
     style: {
       backgroundColor: "#000",
@@ -306,10 +456,10 @@ var SocialButtonsFlexbox = /* @__PURE__ */ __name(({ shareUrl, ...props }) => {
     onClick: /* @__PURE__ */ __name(() => {
       window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}`);
     }, "onClick"),
-    startIcon: /* @__PURE__ */ React11.createElement(XTwitterSvgIcon, {
+    startIcon: /* @__PURE__ */ React13.createElement(XTwitterSvgIcon, {
       width: "20px"
     })
-  }, "Share on X (Twitter)"), /* @__PURE__ */ React11.createElement(ButtonEx2, {
+  }, "Share on X (Twitter)"), /* @__PURE__ */ React13.createElement(ButtonEx2, {
     variant: "contained",
     style: {
       backgroundColor: "#4267b2",
@@ -318,11 +468,12 @@ var SocialButtonsFlexbox = /* @__PURE__ */ __name(({ shareUrl, ...props }) => {
     onClick: /* @__PURE__ */ __name(() => {
       window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`);
     }, "onClick"),
-    startIcon: /* @__PURE__ */ React11.createElement(FacebookSvgIcon, null)
+    startIcon: /* @__PURE__ */ React13.createElement(FacebookSvgIcon, null)
   }, "Share on Facebook")) : null));
 }, "SocialButtonsFlexbox");
 export {
   CopyLinkTextField,
+  CopyLinkTypography,
   DynamicShareImage,
   FacebookSvgIcon,
   GenerateShareLinkButton,