@codecademy/brand 4.0.0-alpha.fb4adf2b4d.0 → 4.0.0

package/dist/SocialMediaSharing/index.cjs

@@ -1,84 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_SocialShareIconLink = require('./SocialShareIconLink.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-
-//#region src/SocialMediaSharing/index.tsx
-const createShareLink = (formatter, baseUri, payload) => {
-	const params = formatter(payload);
-	const url = new URL(baseUri);
-	Object.keys(params).forEach((key) => {
-		url.searchParams.append(key, params[key]);
-	});
-	return url.toString();
-};
-const SOCIAL_SHARING_PLATFORMS = [
-	{
-		id: "facebook",
-		displayName: "Facebook",
-		icon: _codecademy_gamut_icons.FacebookIcon,
-		baseUrl: "https://www.facebook.com/dialog/share?app_id=212500508799908",
-		formatShare: ({ url, message }) => ({
-			...url && { href: url },
-			...message && { quote: message },
-			hashtag: "#codecademy"
-		})
-	},
-	{
-		id: "twitter",
-		displayName: "Twitter",
-		icon: _codecademy_gamut_icons.TwitterIcon,
-		baseUrl: "https://twitter.com/intent/tweet?",
-		formatShare: ({ url, message, hashtags, mention }) => ({
-			...url && { url },
-			...message && { text: message },
-			...hashtags && { hashtags: hashtags.join(",") },
-			...mention && { via: mention }
-		})
-	},
-	{
-		id: "linkedin",
-		displayName: "LinkedIn",
-		icon: _codecademy_gamut_icons.LinkedinIcon,
-		baseUrl: "https://www.linkedin.com/shareArticle",
-		formatShare: ({ url }) => ({ url })
-	}
-];
-const SocialMediaSharing = ({ url, message, hashtags, mention, action, label, sectionId, size = "normal", iconStyles }) => {
-	return /* @__PURE__ */ react.createElement(_codecademy_gamut.Box, {
-		display: "inline-flex",
-		flexDirection: "column",
-		alignItems: "center"
-	}, label && /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, {
-		fontSize: size === "small" ? 14 : 16,
-		textColor: "text",
-		mb: 16,
-		"data-testid": "social-sharing-label"
-	}, label), /* @__PURE__ */ react.createElement(_codecademy_gamut.GridBox, {
-		gridAutoColumns: "max-content",
-		gridAutoFlow: "column",
-		gap: 16,
-		className: iconStyles
-	}, SOCIAL_SHARING_PLATFORMS.map(({ id, icon, formatShare, baseUrl }) => /* @__PURE__ */ react.createElement(require_SocialShareIconLink.SocialShareIconLink, {
-		key: id,
-		id,
-		sectionId,
-		href: createShareLink(formatShare, baseUrl, {
-			url,
-			message,
-			hashtags,
-			mention
-		}),
-		icon,
-		size,
-		onClick: (e) => action?.(e, `${id}_share`)
-	}))));
-};
-
-//#endregion
-exports.SOCIAL_SHARING_PLATFORMS = SOCIAL_SHARING_PLATFORMS;
-exports.SocialMediaSharing = SocialMediaSharing;
-exports.createShareLink = createShareLink;
-//# sourceMappingURL=index.cjs.map

package/dist/SocialMediaSharing/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","names":["Box","GridBox","Text","FacebookIcon","LinkedinIcon","TwitterIcon","React","SocialShareIconLink","createShareLink","formatter","baseUri","payload","params","url","URL","Object","keys","forEach","key","searchParams","append","toString","SOCIAL_SHARING_PLATFORMS","id","displayName","icon","baseUrl","formatShare","message","href","quote","hashtag","hashtags","mention","text","join","via","SocialMediaSharing","action","label","sectionId","size","iconStyles","display","flexDirection","alignItems","fontSize","textColor","mb","data-testid","gridAutoColumns","gridAutoFlow","gap","className","map","onClick","e"],"sources":["../../src/SocialMediaSharing/index.tsx"],"sourcesContent":["import { Box, GridBox, Text } from '@codecademy/gamut';\nimport {\n  FacebookIcon,\n  LinkedinIcon,\n  TwitterIcon,\n} from '@codecademy/gamut-icons';\nimport * as React from 'react';\n\nimport type { BaseSocialShareProps } from './SocialShareIconLink';\nimport { SocialShareIconLink } from './SocialShareIconLink';\n\nexport type SocialMediaShare = {\n  url: string;\n  message?: string;\n  hashtags?: string[];\n  mention?: string;\n};\n\nexport const createShareLink = (\n  formatter: (payload: SocialMediaShare) => Record<string, string>,\n  baseUri: string,\n  payload: SocialMediaShare\n) => {\n  const params = formatter(payload);\n  const url = new URL(baseUri);\n\n  Object.keys(params).forEach((key) => {\n    url.searchParams.append(key, params[key]);\n  });\n\n  return url.toString();\n};\n\n// https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview\n// https://developers.facebook.com/docs/sharing/reference/share-dialog\n// https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/share-on-linkedin?context=linkedin/consumer/context#create-an-article-or-url-share\nexport const SOCIAL_SHARING_PLATFORMS = [\n  {\n    id: 'facebook',\n    displayName: 'Facebook',\n    icon: FacebookIcon,\n    baseUrl: 'https://www.facebook.com/dialog/share?app_id=212500508799908',\n    formatShare: ({ url, message }: SocialMediaShare) => ({\n      ...(url && { href: url }),\n      ...(message && { quote: message }),\n      hashtag: '#codecademy',\n    }),\n  },\n  {\n    id: 'twitter',\n    displayName: 'Twitter',\n    icon: TwitterIcon,\n    baseUrl: 'https://twitter.com/intent/tweet?',\n    formatShare: ({ url, message, hashtags, mention }: SocialMediaShare) => ({\n      ...(url && { url }),\n      ...(message && { text: message }),\n      ...(hashtags && { hashtags: hashtags.join(',') }),\n      ...(mention && { via: mention }),\n    }),\n  },\n  {\n    id: 'linkedin',\n    displayName: 'LinkedIn',\n    icon: LinkedinIcon,\n    baseUrl: 'https://www.linkedin.com/shareArticle',\n    formatShare: ({ url }: SocialMediaShare) => ({ url }),\n  },\n];\n\nexport type SocialMediaSharingProps = BaseSocialShareProps & {\n  url: string;\n  message?: string;\n  hashtags?: string[];\n  mention?: string;\n  action?: (e: React.MouseEvent, target: string) => void;\n  label?: string;\n  iconStyles?: string;\n};\n\nexport const SocialMediaSharing: React.FC<SocialMediaSharingProps> = ({\n  url,\n  message,\n  hashtags,\n  mention,\n  action,\n  label,\n  sectionId,\n  size = 'normal',\n  iconStyles,\n}) => {\n  return (\n    <Box display=\"inline-flex\" flexDirection=\"column\" alignItems=\"center\">\n      {label && (\n        <Text\n          fontSize={size === 'small' ? 14 : 16}\n          textColor=\"text\"\n          mb={16}\n          data-testid=\"social-sharing-label\"\n        >\n          {label}\n        </Text>\n      )}\n      <GridBox\n        gridAutoColumns=\"max-content\"\n        gridAutoFlow=\"column\"\n        gap={16}\n        className={iconStyles}\n      >\n        {SOCIAL_SHARING_PLATFORMS.map(({ id, icon, formatShare, baseUrl }) => (\n          <SocialShareIconLink\n            key={id}\n            id={id}\n            sectionId={sectionId}\n            href={createShareLink(formatShare, baseUrl, {\n              url,\n              message,\n              hashtags,\n              mention,\n            })}\n            icon={icon}\n            size={size}\n            onClick={(e) => action?.(e, `${id}_share`)}\n          />\n        ))}\n      </GridBox>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;AAkBA,MAAaQ,mBACXC,WACAC,SACAC,YAAAA;CAEA,MAAMC,SAASH,UAAUE,QAAAA;CACzB,MAAME,MAAM,IAAIC,IAAIJ,QAAAA;AAEpBK,QAAOC,KAAKJ,OAAAA,CAAQK,SAASC,QAAAA;AAC3BL,MAAIM,aAAaC,OAAOF,KAAKN,OAAOM,KAAI;GAC1C;AAEA,QAAOL,IAAIQ,UAAQ;;AAMrB,MAAaC,2BAA2B;CACtC;EACEC,IAAI;EACJC,aAAa;EACbC,MAAMtB;EACNuB,SAAS;EACTC,cAAc,EAAEd,KAAKe,eAAiC;GACpD,GAAIf,OAAO,EAAEgB,MAAMhB,KAAK;GACxB,GAAIe,WAAW,EAAEE,OAAOF,SAAS;GACjCG,SAAS;GACX;EACF;CACA;EACER,IAAI;EACJC,aAAa;EACbC,MAAMpB;EACNqB,SAAS;EACTC,cAAc,EAAEd,KAAKe,SAASI,UAAUC,eAAiC;GACvE,GAAIpB,OAAO,EAAEA,KAAK;GAClB,GAAIe,WAAW,EAAEM,MAAMN,SAAS;GAChC,GAAII,YAAY,EAAEA,UAAUA,SAASG,KAAK,IAAA,EAAM;GAChD,GAAIF,WAAW,EAAEG,KAAKH,SAAS;GACjC;EACF;CACA;EACEV,IAAI;EACJC,aAAa;EACbC,MAAMrB;EACNsB,SAAS;EACTC,cAAc,EAAEd,WAA6B,EAAEA,KAAI;EACrD;CACD;AAYD,MAAawB,sBAAyD,EACpExB,KACAe,SACAI,UACAC,SACAK,QACAC,OACAC,WACAC,OAAO,UACPC,iBACD;AACC,QACE,sBAAA,cAAC1C,uBAAAA;EAAI2C,SAAQ;EAAcC,eAAc;EAASC,YAAW;IAC1DN,SACC,sBAAA,cAACrC,wBAAAA;EACC4C,UAAUL,SAAS,UAAU,KAAK;EAClCM,WAAU;EACVC,IAAI;EACJC,eAAY;IAEXV,MAAAA,EAGL,sBAAA,cAACtC,2BAAAA;EACCiD,iBAAgB;EAChBC,cAAa;EACbC,KAAK;EACLC,WAAWX;IAEVpB,yBAAyBgC,KAAK,EAAE/B,IAAIE,MAAME,aAAaD,cACtD,sBAAA,cAACnB,iDAAAA;EACCW,KAAKK;EACDA;EACOiB;EACXX,MAAMrB,gBAAgBmB,aAAaD,SAAS;GAC1Cb;GACAe;GACAI;GACAC;GACF,CAAA;EACMR;EACAgB;EACNc,UAAUC,MAAMlB,SAASkB,GAAG,GAAGjC,GAAG,QAAO"}

package/dist/SocialMediaSharing/index.d.cts

@@ -1,65 +0,0 @@
-import { BaseSocialShareProps } from "./SocialShareIconLink.cjs";
-import * as _codecademy_gamut_icons0 from "@codecademy/gamut-icons";
-import * as React$1 from "react";
-
-//#region src/SocialMediaSharing/index.d.ts
-type SocialMediaShare = {
-  url: string;
-  message?: string;
-  hashtags?: string[];
-  mention?: string;
-};
-declare const createShareLink: (formatter: (payload: SocialMediaShare) => Record<string, string>, baseUri: string, payload: SocialMediaShare) => string;
-declare const SOCIAL_SHARING_PLATFORMS: ({
-  id: string;
-  displayName: string;
-  icon: React$1.ForwardRefExoticComponent<_codecademy_gamut_icons0.GamutIconProps & React$1.RefAttributes<SVGSVGElement>>;
-  baseUrl: string;
-  formatShare: ({
-    url,
-    message
-  }: SocialMediaShare) => {
-    hashtag: string;
-    quote?: string | undefined;
-    href?: string | undefined;
-  };
-} | {
-  id: string;
-  displayName: string;
-  icon: React$1.ForwardRefExoticComponent<_codecademy_gamut_icons0.GamutIconProps & React$1.RefAttributes<SVGSVGElement>>;
-  baseUrl: string;
-  formatShare: ({
-    url,
-    message,
-    hashtags,
-    mention
-  }: SocialMediaShare) => {
-    via?: string | undefined;
-    hashtags?: string | undefined;
-    text?: string | undefined;
-    url?: string | undefined;
-  };
-} | {
-  id: string;
-  displayName: string;
-  icon: React$1.ForwardRefExoticComponent<_codecademy_gamut_icons0.GamutIconProps & React$1.RefAttributes<SVGSVGElement>>;
-  baseUrl: string;
-  formatShare: ({
-    url
-  }: SocialMediaShare) => {
-    url: string;
-  };
-})[];
-type SocialMediaSharingProps = BaseSocialShareProps & {
-  url: string;
-  message?: string;
-  hashtags?: string[];
-  mention?: string;
-  action?: (e: React$1.MouseEvent, target: string) => void;
-  label?: string;
-  iconStyles?: string;
-};
-declare const SocialMediaSharing: React$1.FC<SocialMediaSharingProps>;
-//#endregion
-export { SOCIAL_SHARING_PLATFORMS, SocialMediaShare, SocialMediaSharing, SocialMediaSharingProps, createShareLink };
-//# sourceMappingURL=index.d.cts.map

package/dist/SocialMediaSharing/index.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/SocialMediaSharing/index.tsx"],"sourcesContent":[],"mappings":";;;;;KAWY,gBAAA;;;EAAA,QAAA,CAAA,EAAA,MAAA,EAAgB;EAOf,OAAA,CAAA,EAAA,MAAA;CACU;AAAqB,cAD/B,eAC+B,EAAA,CAAA,SAAA,EAAA,CAAA,OAAA,EAArB,gBAAqB,EAAA,GAAA,MAAA,CAAA,MAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAEjC,gBAFiC,EAAA,GAAA,MAAA;AAEjC,cAeE,wBAfF,EAAA,CAAA;EAAgB,EAAA,EAAA,MAAA;EAed,WAAA,EAAA,MAAA;EA+BZ,IAAA,mCAAA,CAAA,wBAAA,CAAA,cAAA,wBAAA,cAAA,CAAA,CAAA;;;;;KAzBmC;;;;EAAA,CAAA;CAAgB,GAAA;;;0CAAA,wBAAA,CAAA,cAAA;;;;;;;KAWG;;;IAAA,IAAA,CAAA,EAAA,MAAA,GAAA,SAAA;IAAgB,GAAA,CAAA,EAAA,MAAA,GAAA,SAAA;;;;;EAY5C,IAAA,mCAAA,CAZ4C,wBAAA,CAAA,cAAA,wBAY5C,cAAA,CAAA,CAAA;EAAgB,OAAA,EAAA,MAAA;EAI/B,WAAA,EAAA,CAAA;IAAA;EAAuB,CAAvB,EAJe,gBAIW,EAAA,GAAA;IAUzB,GAAA,EAAA,MAAA;;;KAVD,uBAAA,GAA0B;;;;;eAKvB,OAAA,CAAM;;;;cAKR,oBAAoB,OAAA,CAAM,GAAG"}

package/dist/SocialMediaSharing/index.d.mts

@@ -1,65 +0,0 @@
-import { BaseSocialShareProps } from "./SocialShareIconLink.mjs";
-import * as React$1 from "react";
-import * as _codecademy_gamut_icons0 from "@codecademy/gamut-icons";
-
-//#region src/SocialMediaSharing/index.d.ts
-type SocialMediaShare = {
-  url: string;
-  message?: string;
-  hashtags?: string[];
-  mention?: string;
-};
-declare const createShareLink: (formatter: (payload: SocialMediaShare) => Record<string, string>, baseUri: string, payload: SocialMediaShare) => string;
-declare const SOCIAL_SHARING_PLATFORMS: ({
-  id: string;
-  displayName: string;
-  icon: React$1.ForwardRefExoticComponent<_codecademy_gamut_icons0.GamutIconProps & React$1.RefAttributes<SVGSVGElement>>;
-  baseUrl: string;
-  formatShare: ({
-    url,
-    message
-  }: SocialMediaShare) => {
-    hashtag: string;
-    quote?: string | undefined;
-    href?: string | undefined;
-  };
-} | {
-  id: string;
-  displayName: string;
-  icon: React$1.ForwardRefExoticComponent<_codecademy_gamut_icons0.GamutIconProps & React$1.RefAttributes<SVGSVGElement>>;
-  baseUrl: string;
-  formatShare: ({
-    url,
-    message,
-    hashtags,
-    mention
-  }: SocialMediaShare) => {
-    via?: string | undefined;
-    hashtags?: string | undefined;
-    text?: string | undefined;
-    url?: string | undefined;
-  };
-} | {
-  id: string;
-  displayName: string;
-  icon: React$1.ForwardRefExoticComponent<_codecademy_gamut_icons0.GamutIconProps & React$1.RefAttributes<SVGSVGElement>>;
-  baseUrl: string;
-  formatShare: ({
-    url
-  }: SocialMediaShare) => {
-    url: string;
-  };
-})[];
-type SocialMediaSharingProps = BaseSocialShareProps & {
-  url: string;
-  message?: string;
-  hashtags?: string[];
-  mention?: string;
-  action?: (e: React$1.MouseEvent, target: string) => void;
-  label?: string;
-  iconStyles?: string;
-};
-declare const SocialMediaSharing: React$1.FC<SocialMediaSharingProps>;
-//#endregion
-export { SOCIAL_SHARING_PLATFORMS, SocialMediaShare, SocialMediaSharing, SocialMediaSharingProps, createShareLink };
-//# sourceMappingURL=index.d.mts.map

package/dist/SocialMediaSharing/index.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/SocialMediaSharing/index.tsx"],"sourcesContent":[],"mappings":";;;;;KAWY,gBAAA;;;EAAA,QAAA,CAAA,EAAA,MAAA,EAAgB;EAOf,OAAA,CAAA,EAAA,MAAA;CACU;AAAqB,cAD/B,eAC+B,EAAA,CAAA,SAAA,EAAA,CAAA,OAAA,EAArB,gBAAqB,EAAA,GAAA,MAAA,CAAA,MAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAEjC,gBAFiC,EAAA,GAAA,MAAA;AAEjC,cAeE,wBAfF,EAAA,CAAA;EAAgB,EAAA,EAAA,MAAA;EAed,WAAA,EAAA,MAAA;EA+BZ,IAAA,mCAAA,CAAA,wBAAA,CAAA,cAAA,wBAAA,cAAA,CAAA,CAAA;;;;;KAzBmC;;;;EAAA,CAAA;CAAgB,GAAA;;;0CAAA,wBAAA,CAAA,cAAA;;;;;;;KAWG;;;IAAA,IAAA,CAAA,EAAA,MAAA,GAAA,SAAA;IAAgB,GAAA,CAAA,EAAA,MAAA,GAAA,SAAA;;;;;EAY5C,IAAA,mCAAA,CAZ4C,wBAAA,CAAA,cAAA,wBAY5C,cAAA,CAAA,CAAA;EAAgB,OAAA,EAAA,MAAA;EAI/B,WAAA,EAAA,CAAA;IAAA;EAAuB,CAAvB,EAJe,gBAIW,EAAA,GAAA;IAUzB,GAAA,EAAA,MAAA;;;KAVD,uBAAA,GAA0B;;;;;eAKvB,OAAA,CAAM;;;;cAKR,oBAAoB,OAAA,CAAM,GAAG"}

package/dist/SocialMediaSharing/index.mjs

@@ -1,80 +0,0 @@
-import { SocialShareIconLink } from "./SocialShareIconLink.mjs";
-import { Box, GridBox, Text } from "@codecademy/gamut";
-import * as React$1 from "react";
-import { FacebookIcon, LinkedinIcon, TwitterIcon } from "@codecademy/gamut-icons";
-
-//#region src/SocialMediaSharing/index.tsx
-const createShareLink = (formatter, baseUri, payload) => {
-	const params = formatter(payload);
-	const url = new URL(baseUri);
-	Object.keys(params).forEach((key) => {
-		url.searchParams.append(key, params[key]);
-	});
-	return url.toString();
-};
-const SOCIAL_SHARING_PLATFORMS = [
-	{
-		id: "facebook",
-		displayName: "Facebook",
-		icon: FacebookIcon,
-		baseUrl: "https://www.facebook.com/dialog/share?app_id=212500508799908",
-		formatShare: ({ url, message }) => ({
-			...url && { href: url },
-			...message && { quote: message },
-			hashtag: "#codecademy"
-		})
-	},
-	{
-		id: "twitter",
-		displayName: "Twitter",
-		icon: TwitterIcon,
-		baseUrl: "https://twitter.com/intent/tweet?",
-		formatShare: ({ url, message, hashtags, mention }) => ({
-			...url && { url },
-			...message && { text: message },
-			...hashtags && { hashtags: hashtags.join(",") },
-			...mention && { via: mention }
-		})
-	},
-	{
-		id: "linkedin",
-		displayName: "LinkedIn",
-		icon: LinkedinIcon,
-		baseUrl: "https://www.linkedin.com/shareArticle",
-		formatShare: ({ url }) => ({ url })
-	}
-];
-const SocialMediaSharing = ({ url, message, hashtags, mention, action, label, sectionId, size = "normal", iconStyles }) => {
-	return /* @__PURE__ */ React$1.createElement(Box, {
-		display: "inline-flex",
-		flexDirection: "column",
-		alignItems: "center"
-	}, label && /* @__PURE__ */ React$1.createElement(Text, {
-		fontSize: size === "small" ? 14 : 16,
-		textColor: "text",
-		mb: 16,
-		"data-testid": "social-sharing-label"
-	}, label), /* @__PURE__ */ React$1.createElement(GridBox, {
-		gridAutoColumns: "max-content",
-		gridAutoFlow: "column",
-		gap: 16,
-		className: iconStyles
-	}, SOCIAL_SHARING_PLATFORMS.map(({ id, icon, formatShare, baseUrl }) => /* @__PURE__ */ React$1.createElement(SocialShareIconLink, {
-		key: id,
-		id,
-		sectionId,
-		href: createShareLink(formatShare, baseUrl, {
-			url,
-			message,
-			hashtags,
-			mention
-		}),
-		icon,
-		size,
-		onClick: (e) => action?.(e, `${id}_share`)
-	}))));
-};
-
-//#endregion
-export { SOCIAL_SHARING_PLATFORMS, SocialMediaSharing, createShareLink };
-//# sourceMappingURL=index.mjs.map

package/dist/SocialMediaSharing/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":["Box","GridBox","Text","FacebookIcon","LinkedinIcon","TwitterIcon","React","SocialShareIconLink","createShareLink","formatter","baseUri","payload","params","url","URL","Object","keys","forEach","key","searchParams","append","toString","SOCIAL_SHARING_PLATFORMS","id","displayName","icon","baseUrl","formatShare","message","href","quote","hashtag","hashtags","mention","text","join","via","SocialMediaSharing","action","label","sectionId","size","iconStyles","display","flexDirection","alignItems","fontSize","textColor","mb","data-testid","gridAutoColumns","gridAutoFlow","gap","className","map","onClick","e"],"sources":["../../src/SocialMediaSharing/index.tsx"],"sourcesContent":["import { Box, GridBox, Text } from '@codecademy/gamut';\nimport {\n  FacebookIcon,\n  LinkedinIcon,\n  TwitterIcon,\n} from '@codecademy/gamut-icons';\nimport * as React from 'react';\n\nimport type { BaseSocialShareProps } from './SocialShareIconLink';\nimport { SocialShareIconLink } from './SocialShareIconLink';\n\nexport type SocialMediaShare = {\n  url: string;\n  message?: string;\n  hashtags?: string[];\n  mention?: string;\n};\n\nexport const createShareLink = (\n  formatter: (payload: SocialMediaShare) => Record<string, string>,\n  baseUri: string,\n  payload: SocialMediaShare\n) => {\n  const params = formatter(payload);\n  const url = new URL(baseUri);\n\n  Object.keys(params).forEach((key) => {\n    url.searchParams.append(key, params[key]);\n  });\n\n  return url.toString();\n};\n\n// https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview\n// https://developers.facebook.com/docs/sharing/reference/share-dialog\n// https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/share-on-linkedin?context=linkedin/consumer/context#create-an-article-or-url-share\nexport const SOCIAL_SHARING_PLATFORMS = [\n  {\n    id: 'facebook',\n    displayName: 'Facebook',\n    icon: FacebookIcon,\n    baseUrl: 'https://www.facebook.com/dialog/share?app_id=212500508799908',\n    formatShare: ({ url, message }: SocialMediaShare) => ({\n      ...(url && { href: url }),\n      ...(message && { quote: message }),\n      hashtag: '#codecademy',\n    }),\n  },\n  {\n    id: 'twitter',\n    displayName: 'Twitter',\n    icon: TwitterIcon,\n    baseUrl: 'https://twitter.com/intent/tweet?',\n    formatShare: ({ url, message, hashtags, mention }: SocialMediaShare) => ({\n      ...(url && { url }),\n      ...(message && { text: message }),\n      ...(hashtags && { hashtags: hashtags.join(',') }),\n      ...(mention && { via: mention }),\n    }),\n  },\n  {\n    id: 'linkedin',\n    displayName: 'LinkedIn',\n    icon: LinkedinIcon,\n    baseUrl: 'https://www.linkedin.com/shareArticle',\n    formatShare: ({ url }: SocialMediaShare) => ({ url }),\n  },\n];\n\nexport type SocialMediaSharingProps = BaseSocialShareProps & {\n  url: string;\n  message?: string;\n  hashtags?: string[];\n  mention?: string;\n  action?: (e: React.MouseEvent, target: string) => void;\n  label?: string;\n  iconStyles?: string;\n};\n\nexport const SocialMediaSharing: React.FC<SocialMediaSharingProps> = ({\n  url,\n  message,\n  hashtags,\n  mention,\n  action,\n  label,\n  sectionId,\n  size = 'normal',\n  iconStyles,\n}) => {\n  return (\n    <Box display=\"inline-flex\" flexDirection=\"column\" alignItems=\"center\">\n      {label && (\n        <Text\n          fontSize={size === 'small' ? 14 : 16}\n          textColor=\"text\"\n          mb={16}\n          data-testid=\"social-sharing-label\"\n        >\n          {label}\n        </Text>\n      )}\n      <GridBox\n        gridAutoColumns=\"max-content\"\n        gridAutoFlow=\"column\"\n        gap={16}\n        className={iconStyles}\n      >\n        {SOCIAL_SHARING_PLATFORMS.map(({ id, icon, formatShare, baseUrl }) => (\n          <SocialShareIconLink\n            key={id}\n            id={id}\n            sectionId={sectionId}\n            href={createShareLink(formatShare, baseUrl, {\n              url,\n              message,\n              hashtags,\n              mention,\n            })}\n            icon={icon}\n            size={size}\n            onClick={(e) => action?.(e, `${id}_share`)}\n          />\n        ))}\n      </GridBox>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;AAkBA,MAAaQ,mBACXC,WACAC,SACAC,YAAAA;CAEA,MAAMC,SAASH,UAAUE,QAAAA;CACzB,MAAME,MAAM,IAAIC,IAAIJ,QAAAA;AAEpBK,QAAOC,KAAKJ,OAAAA,CAAQK,SAASC,QAAAA;AAC3BL,MAAIM,aAAaC,OAAOF,KAAKN,OAAOM,KAAI;GAC1C;AAEA,QAAOL,IAAIQ,UAAQ;;AAMrB,MAAaC,2BAA2B;CACtC;EACEC,IAAI;EACJC,aAAa;EACbC,MAAMtB;EACNuB,SAAS;EACTC,cAAc,EAAEd,KAAKe,eAAiC;GACpD,GAAIf,OAAO,EAAEgB,MAAMhB,KAAK;GACxB,GAAIe,WAAW,EAAEE,OAAOF,SAAS;GACjCG,SAAS;GACX;EACF;CACA;EACER,IAAI;EACJC,aAAa;EACbC,MAAMpB;EACNqB,SAAS;EACTC,cAAc,EAAEd,KAAKe,SAASI,UAAUC,eAAiC;GACvE,GAAIpB,OAAO,EAAEA,KAAK;GAClB,GAAIe,WAAW,EAAEM,MAAMN,SAAS;GAChC,GAAII,YAAY,EAAEA,UAAUA,SAASG,KAAK,IAAA,EAAM;GAChD,GAAIF,WAAW,EAAEG,KAAKH,SAAS;GACjC;EACF;CACA;EACEV,IAAI;EACJC,aAAa;EACbC,MAAMrB;EACNsB,SAAS;EACTC,cAAc,EAAEd,WAA6B,EAAEA,KAAI;EACrD;CACD;AAYD,MAAawB,sBAAyD,EACpExB,KACAe,SACAI,UACAC,SACAK,QACAC,OACAC,WACAC,OAAO,UACPC,iBACD;AACC,QACE,wBAAA,cAAC1C,KAAAA;EAAI2C,SAAQ;EAAcC,eAAc;EAASC,YAAW;IAC1DN,SACC,wBAAA,cAACrC,MAAAA;EACC4C,UAAUL,SAAS,UAAU,KAAK;EAClCM,WAAU;EACVC,IAAI;EACJC,eAAY;IAEXV,MAAAA,EAGL,wBAAA,cAACtC,SAAAA;EACCiD,iBAAgB;EAChBC,cAAa;EACbC,KAAK;EACLC,WAAWX;IAEVpB,yBAAyBgC,KAAK,EAAE/B,IAAIE,MAAME,aAAaD,cACtD,wBAAA,cAACnB,qBAAAA;EACCW,KAAKK;EACDA;EACOiB;EACXX,MAAMrB,gBAAgBmB,aAAaD,SAAS;GAC1Cb;GACAe;GACAI;GACAC;GACF,CAAA;EACMR;EACAgB;EACNc,UAAUC,MAAMlB,SAASkB,GAAG,GAAGjC,GAAG,QAAO"}

package/dist/SocialMediaSharingDropdown/index.cjs

@@ -1,94 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_index = require('../DropdownButton/index.cjs');
-const require_index$1 = require('../SocialMediaSharing/index.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let react = require("react");
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-
-//#region src/SocialMediaSharingDropdown/index.tsx
-const clipboardAlertMessage = "Link has been copied to clipboard.";
-const onClickWrapper = (e, id, href, action) => {
-	e.preventDefault();
-	action?.(e, `${id}_share`);
-	const popupSize = 570;
-	const left = (window.screen.width - popupSize) / 2;
-	const features = `menubar=no,toolbar=no,status=no,width=${popupSize},height=${popupSize},top=${(window.screen.height - popupSize) / 2},left=${left}`;
-	window.open(href, "_blank", features)?.focus();
-};
-const SocialMediaSharingDropdown = ({ url, message, hashtags, mention, action, defaultPosition = "below", addAlert }) => {
-	const [showClipboardAlert, setShowClipboardAlert] = (0, react.useState)(false);
-	const dropdownRef = (0, react.useRef)(null);
-	const focusDropdown = () => dropdownRef.current?.focus({ preventScroll: true });
-	const copyUrlToClipboard = async (e) => {
-		action?.(e, `link_share`);
-		await navigator.clipboard.writeText(url);
-		if (addAlert) addAlert({
-			message: clipboardAlertMessage,
-			onClose: focusDropdown
-		});
-		else setShowClipboardAlert(true);
-	};
-	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(require_index.DropdownButton, {
-		ref: dropdownRef,
-		"data-testid": "social-share-dropdown",
-		isMenu: true,
-		buttonType: "text",
-		defaultPosition,
-		px: 0,
-		dropdownItems: [
-			...require_index$1.SOCIAL_SHARING_PLATFORMS.map(({ id, formatShare, baseUrl, displayName }) => ({
-				id,
-				text: displayName,
-				clickHandler: (e) => {
-					onClickWrapper(e, id, require_index$1.createShareLink(formatShare, baseUrl, {
-						url,
-						message,
-						hashtags,
-						mention
-					}), action);
-				}
-			})),
-			"separator",
-			{
-				id: "copy-link",
-				icon: _codecademy_gamut_icons.LinkIcon,
-				text: "Copy link",
-				ariaLabel: "Copy link",
-				clickHandler: (e) => copyUrlToClipboard(e)
-			}
-		]
-	}, /* @__PURE__ */ React.createElement(_codecademy_gamut_icons.ShareIcon, {
-		mr: 4,
-		size: 22
-	}), "Share"), showClipboardAlert && /* @__PURE__ */ React.createElement(_codecademy_gamut.FlexBox, {
-		minWidth: "min-content",
-		width: {
-			_: "80%",
-			sm: "60%"
-		},
-		position: "fixed",
-		top: "6rem",
-		left: {
-			_: "10%",
-			sm: "20%"
-		},
-		zIndex: 999,
-		"data-testid": "social-share-copy-to-clipboard-alert",
-		justifyContent: "center"
-	}, /* @__PURE__ */ React.createElement(_codecademy_gamut.Alert, {
-		onClose: () => {
-			setShowClipboardAlert(false);
-			focusDropdown();
-		},
-		type: "success",
-		placement: "inline"
-	}, /* @__PURE__ */ React.createElement(_codecademy_gamut.Text, {
-		whiteSpace: "break-spaces",
-		display: "inline"
-	}, clipboardAlertMessage))));
-};
-
-//#endregion
-exports.SocialMediaSharingDropdown = SocialMediaSharingDropdown;
-exports.onClickWrapper = onClickWrapper;
-//# sourceMappingURL=index.cjs.map

package/dist/SocialMediaSharingDropdown/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","names":["Alert","FlexBox","Text","LinkIcon","ShareIcon","useRef","useState","DropdownButton","createShareLink","SOCIAL_SHARING_PLATFORMS","clipboardAlertMessage","onClickWrapper","e","id","href","action","preventDefault","popupSize","left","window","screen","width","top","height","features","open","focus","SocialMediaSharingDropdown","url","message","hashtags","mention","defaultPosition","addAlert","showClipboardAlert","setShowClipboardAlert","dropdownRef","focusDropdown","current","preventScroll","copyUrlToClipboard","navigator","clipboard","writeText","onClose","ref","data-testid","isMenu","buttonType","px","dropdownItems","map","formatShare","baseUrl","displayName","text","clickHandler","icon","ariaLabel","mr","size","minWidth","_","sm","position","zIndex","justifyContent","type","placement","whiteSpace","display"],"sources":["../../src/SocialMediaSharingDropdown/index.tsx"],"sourcesContent":["/*\n * NOTE: This is a local new variant of the SocialMediaSharing gamut component that should be ported to Gamut.\n * */\nimport { Alert, FlexBox, PopoverYPositionType, Text } from '@codecademy/gamut';\nimport { LinkIcon, ShareIcon } from '@codecademy/gamut-icons';\nimport { useRef, useState } from 'react';\n\nimport { DropdownButton, DropdownButtonRefType } from '../DropdownButton';\nimport {\n  createShareLink,\n  SOCIAL_SHARING_PLATFORMS,\n} from '../SocialMediaSharing';\n\nconst clipboardAlertMessage = 'Link has been copied to clipboard.';\n\nexport type SocialMediaSharingDropdownProps = {\n  url: string;\n  message?: string;\n  hashtags?: string[];\n  mention?: string;\n  action?: (e: React.MouseEvent, target: string) => void;\n  defaultPosition?: PopoverYPositionType['position'];\n  addAlert?: (alert: { message: string; onClose: () => void }) => void;\n};\n\nexport const onClickWrapper = (\n  e: React.MouseEvent,\n  id: string,\n  href: string,\n  action?: SocialMediaSharingDropdownProps['action']\n) => {\n  e.preventDefault();\n  action?.(e, `${id}_share`);\n  const popupSize = 570;\n  const left = (window.screen.width - popupSize) / 2;\n  const top = (window.screen.height - popupSize) / 2;\n  const features = `menubar=no,toolbar=no,status=no,width=${popupSize},height=${popupSize},top=${top},left=${left}`;\n  window.open(href, '_blank', features)?.focus();\n};\n\nexport const SocialMediaSharingDropdown: React.FC<\n  SocialMediaSharingDropdownProps\n> = ({\n  url,\n  message,\n  hashtags,\n  mention,\n  action,\n  defaultPosition = 'below',\n  addAlert,\n}) => {\n  const [showClipboardAlert, setShowClipboardAlert] = useState(false);\n\n  const dropdownRef = useRef<DropdownButtonRefType>(null);\n  const focusDropdown = () =>\n    dropdownRef.current?.focus({ preventScroll: true });\n\n  const copyUrlToClipboard = async (e: React.MouseEvent) => {\n    action?.(e, `link_share`);\n    await navigator.clipboard.writeText(url);\n\n    if (addAlert) {\n      addAlert({\n        message: clipboardAlertMessage,\n        onClose: focusDropdown,\n      });\n    } else {\n      setShowClipboardAlert(true);\n    }\n  };\n\n  return (\n    <>\n      <DropdownButton\n        ref={dropdownRef}\n        data-testid=\"social-share-dropdown\"\n        isMenu\n        buttonType=\"text\"\n        defaultPosition={defaultPosition}\n        px={0}\n        dropdownItems={[\n          ...SOCIAL_SHARING_PLATFORMS.map(\n            ({ id, formatShare, baseUrl, displayName }) => ({\n              id,\n              text: displayName,\n              clickHandler: (e: React.MouseEvent) => {\n                onClickWrapper(\n                  e,\n                  id,\n                  createShareLink(formatShare, baseUrl, {\n                    url,\n                    message,\n                    hashtags,\n                    mention,\n                  }),\n                  action\n                );\n              },\n            })\n          ),\n          'separator',\n          {\n            id: 'copy-link',\n            icon: LinkIcon,\n            text: 'Copy link',\n            ariaLabel: 'Copy link',\n            clickHandler: (e) => copyUrlToClipboard(e),\n          },\n        ]}\n      >\n        <ShareIcon mr={4} size={22} />\n        Share\n      </DropdownButton>\n      {showClipboardAlert && (\n        <FlexBox\n          minWidth=\"min-content\"\n          width={{ _: '80%', sm: '60%' }}\n          position=\"fixed\"\n          top=\"6rem\"\n          left={{ _: '10%', sm: '20%' }}\n          zIndex={999}\n          data-testid=\"social-share-copy-to-clipboard-alert\"\n          justifyContent=\"center\"\n        >\n          <Alert\n            onClose={() => {\n              setShowClipboardAlert(false);\n              focusDropdown();\n            }}\n            type=\"success\"\n            placement=\"inline\"\n          >\n            <Text whiteSpace=\"break-spaces\" display=\"inline\">\n              {clipboardAlertMessage}\n            </Text>\n          </Alert>\n        </FlexBox>\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;AAaA,MAAMU,wBAAwB;AAY9B,MAAaC,kBACXC,GACAC,IACAC,MACAC,WAAAA;AAEAH,GAAEI,gBAAc;AAChBD,UAASH,GAAG,GAAGC,GAAG,QAAO;CACzB,MAAMI,YAAY;CAClB,MAAMC,QAAQC,OAAOC,OAAOC,QAAQJ,aAAa;CAEjD,MAAMO,WAAW,yCAAyCP,UAAU,UAAUA,UAAU,QAD3EE,OAAOC,OAAOG,SAASN,aAAa,EACkD,QAAQC;AAC3GC,QAAOM,KAAKX,MAAM,UAAUU,SAAAA,EAAWE,OAAAA;;AAGzC,MAAaC,8BAER,EACHC,KACAC,SACAC,UACAC,SACAhB,QACAiB,kBAAkB,SAClBC,eACD;CACC,MAAM,CAACC,oBAAoBC,6CAAkC,MAAA;CAE7D,MAAMC,gCAA4C,KAAA;CAClD,MAAMC,sBACJD,YAAYE,SAASZ,MAAM,EAAEa,eAAe,MAAK,CAAA;CAEnD,MAAMC,qBAAqB,OAAO5B,MAAAA;AAChCG,WAASH,GAAG,aAAY;AACxB,QAAM6B,UAAUC,UAAUC,UAAUf,IAAAA;AAEpC,MAAIK,SACFA,UAAS;GACPJ,SAASnB;GACTkC,SAASP;GACX,CAAA;MAEAF,uBAAsB,KAAA;;AAI1B,QACE,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAAC5B,8BAAAA;EACCsC,KAAKT;EACLU,eAAY;EACZC,QAAAA;EACAC,YAAW;EACMhB;EACjBiB,IAAI;EACJC,eAAe;MACVzC,yCAAyB0C,KACzB,EAAEtC,IAAIuC,aAAaC,SAASC,mBAAmB;IAC9CzC;IACA0C,MAAMD;IACNE,eAAe5C,MAAAA;AACbD,oBACEC,GACAC,IACAL,gCAAgB4C,aAAaC,SAAS;MACpCzB;MACAC;MACAC;MACAC;MACF,CAAA,EACAhB,OAAAA;;IAGN,EAAA;GAEF;GACA;IACEF,IAAI;IACJ4C,MAAMtD;IACNoD,MAAM;IACNG,WAAW;IACXF,eAAe5C,MAAM4B,mBAAmB5B,EAAAA;IAC1C;GACD;IAED,sBAAA,cAACR,mCAAAA;EAAUuD,IAAI;EAAGC,MAAM;KAAM,QAAA,EAG/B1B,sBACC,sBAAA,cAACjC,2BAAAA;EACC4D,UAAS;EACTxC,OAAO;GAAEyC,GAAG;GAAOC,IAAI;GAAM;EAC7BC,UAAS;EACT1C,KAAI;EACJJ,MAAM;GAAE4C,GAAG;GAAOC,IAAI;GAAM;EAC5BE,QAAQ;EACRnB,eAAY;EACZoB,gBAAe;IAEf,sBAAA,cAAClE,yBAAAA;EACC4C,eAAS;AACPT,yBAAsB,MAAA;AACtBE,kBAAAA;;EAEF8B,MAAK;EACLC,WAAU;IAEV,sBAAA,cAAClE,wBAAAA;EAAKmE,YAAW;EAAeC,SAAQ;IACrC5D,sBAAAA,CAAAA,CAAAA,CAAAA"}

package/dist/SocialMediaSharingDropdown/index.d.cts

@@ -1,20 +0,0 @@
-import { PopoverYPositionType } from "@codecademy/gamut";
-
-//#region src/SocialMediaSharingDropdown/index.d.ts
-type SocialMediaSharingDropdownProps = {
-  url: string;
-  message?: string;
-  hashtags?: string[];
-  mention?: string;
-  action?: (e: React.MouseEvent, target: string) => void;
-  defaultPosition?: PopoverYPositionType['position'];
-  addAlert?: (alert: {
-    message: string;
-    onClose: () => void;
-  }) => void;
-};
-declare const onClickWrapper: (e: React.MouseEvent, id: string, href: string, action?: SocialMediaSharingDropdownProps["action"]) => void;
-declare const SocialMediaSharingDropdown: React.FC<SocialMediaSharingDropdownProps>;
-//#endregion
-export { SocialMediaSharingDropdown, SocialMediaSharingDropdownProps, onClickWrapper };
-//# sourceMappingURL=index.d.cts.map

package/dist/SocialMediaSharingDropdown/index.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/SocialMediaSharingDropdown/index.tsx"],"sourcesContent":[],"mappings":";;;KAeY,+BAAA;;EAAA,OAAA,CAAA,EAAA,MAAA;EAUC,QAAA,CAAA,EAAA,MAaZ,EAAA;EAEY,OAAA,CAAA,EAAA,MAAA;eApBE,KAAA,CAAM;oBACD;;;;;;cAIP,oBACR,KAAA,CAAM,+CAGA;cAWE,4BAA4B,KAAA,CAAM,GAC7C"}

package/dist/SocialMediaSharingDropdown/index.d.mts

@@ -1,20 +0,0 @@
-import { PopoverYPositionType } from "@codecademy/gamut";
-
-//#region src/SocialMediaSharingDropdown/index.d.ts
-type SocialMediaSharingDropdownProps = {
-  url: string;
-  message?: string;
-  hashtags?: string[];
-  mention?: string;
-  action?: (e: React.MouseEvent, target: string) => void;
-  defaultPosition?: PopoverYPositionType['position'];
-  addAlert?: (alert: {
-    message: string;
-    onClose: () => void;
-  }) => void;
-};
-declare const onClickWrapper: (e: React.MouseEvent, id: string, href: string, action?: SocialMediaSharingDropdownProps["action"]) => void;
-declare const SocialMediaSharingDropdown: React.FC<SocialMediaSharingDropdownProps>;
-//#endregion
-export { SocialMediaSharingDropdown, SocialMediaSharingDropdownProps, onClickWrapper };
-//# sourceMappingURL=index.d.mts.map

package/dist/SocialMediaSharingDropdown/index.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/SocialMediaSharingDropdown/index.tsx"],"sourcesContent":[],"mappings":";;;KAeY,+BAAA;;EAAA,OAAA,CAAA,EAAA,MAAA;EAUC,QAAA,CAAA,EAAA,MAaZ,EAAA;EAEY,OAAA,CAAA,EAAA,MAAA;eApBE,KAAA,CAAM;oBACD;;;;;;cAIP,oBACR,KAAA,CAAM,+CAGA;cAWE,4BAA4B,KAAA,CAAM,GAC7C"}

package/dist/SocialMediaSharingDropdown/index.mjs

@@ -1,92 +0,0 @@
-import { DropdownButton } from "../DropdownButton/index.mjs";
-import { SOCIAL_SHARING_PLATFORMS, createShareLink } from "../SocialMediaSharing/index.mjs";
-import { Alert, FlexBox, Text } from "@codecademy/gamut";
-import { useRef, useState } from "react";
-import { LinkIcon, ShareIcon } from "@codecademy/gamut-icons";
-
-//#region src/SocialMediaSharingDropdown/index.tsx
-const clipboardAlertMessage = "Link has been copied to clipboard.";
-const onClickWrapper = (e, id, href, action) => {
-	e.preventDefault();
-	action?.(e, `${id}_share`);
-	const popupSize = 570;
-	const left = (window.screen.width - popupSize) / 2;
-	const features = `menubar=no,toolbar=no,status=no,width=${popupSize},height=${popupSize},top=${(window.screen.height - popupSize) / 2},left=${left}`;
-	window.open(href, "_blank", features)?.focus();
-};
-const SocialMediaSharingDropdown = ({ url, message, hashtags, mention, action, defaultPosition = "below", addAlert }) => {
-	const [showClipboardAlert, setShowClipboardAlert] = useState(false);
-	const dropdownRef = useRef(null);
-	const focusDropdown = () => dropdownRef.current?.focus({ preventScroll: true });
-	const copyUrlToClipboard = async (e) => {
-		action?.(e, `link_share`);
-		await navigator.clipboard.writeText(url);
-		if (addAlert) addAlert({
-			message: clipboardAlertMessage,
-			onClose: focusDropdown
-		});
-		else setShowClipboardAlert(true);
-	};
-	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DropdownButton, {
-		ref: dropdownRef,
-		"data-testid": "social-share-dropdown",
-		isMenu: true,
-		buttonType: "text",
-		defaultPosition,
-		px: 0,
-		dropdownItems: [
-			...SOCIAL_SHARING_PLATFORMS.map(({ id, formatShare, baseUrl, displayName }) => ({
-				id,
-				text: displayName,
-				clickHandler: (e) => {
-					onClickWrapper(e, id, createShareLink(formatShare, baseUrl, {
-						url,
-						message,
-						hashtags,
-						mention
-					}), action);
-				}
-			})),
-			"separator",
-			{
-				id: "copy-link",
-				icon: LinkIcon,
-				text: "Copy link",
-				ariaLabel: "Copy link",
-				clickHandler: (e) => copyUrlToClipboard(e)
-			}
-		]
-	}, /* @__PURE__ */ React.createElement(ShareIcon, {
-		mr: 4,
-		size: 22
-	}), "Share"), showClipboardAlert && /* @__PURE__ */ React.createElement(FlexBox, {
-		minWidth: "min-content",
-		width: {
-			_: "80%",
-			sm: "60%"
-		},
-		position: "fixed",
-		top: "6rem",
-		left: {
-			_: "10%",
-			sm: "20%"
-		},
-		zIndex: 999,
-		"data-testid": "social-share-copy-to-clipboard-alert",
-		justifyContent: "center"
-	}, /* @__PURE__ */ React.createElement(Alert, {
-		onClose: () => {
-			setShowClipboardAlert(false);
-			focusDropdown();
-		},
-		type: "success",
-		placement: "inline"
-	}, /* @__PURE__ */ React.createElement(Text, {
-		whiteSpace: "break-spaces",
-		display: "inline"
-	}, clipboardAlertMessage))));
-};
-
-//#endregion
-export { SocialMediaSharingDropdown, onClickWrapper };
-//# sourceMappingURL=index.mjs.map

package/dist/SocialMediaSharingDropdown/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":["Alert","FlexBox","Text","LinkIcon","ShareIcon","useRef","useState","DropdownButton","createShareLink","SOCIAL_SHARING_PLATFORMS","clipboardAlertMessage","onClickWrapper","e","id","href","action","preventDefault","popupSize","left","window","screen","width","top","height","features","open","focus","SocialMediaSharingDropdown","url","message","hashtags","mention","defaultPosition","addAlert","showClipboardAlert","setShowClipboardAlert","dropdownRef","focusDropdown","current","preventScroll","copyUrlToClipboard","navigator","clipboard","writeText","onClose","ref","data-testid","isMenu","buttonType","px","dropdownItems","map","formatShare","baseUrl","displayName","text","clickHandler","icon","ariaLabel","mr","size","minWidth","_","sm","position","zIndex","justifyContent","type","placement","whiteSpace","display"],"sources":["../../src/SocialMediaSharingDropdown/index.tsx"],"sourcesContent":["/*\n * NOTE: This is a local new variant of the SocialMediaSharing gamut component that should be ported to Gamut.\n * */\nimport { Alert, FlexBox, PopoverYPositionType, Text } from '@codecademy/gamut';\nimport { LinkIcon, ShareIcon } from '@codecademy/gamut-icons';\nimport { useRef, useState } from 'react';\n\nimport { DropdownButton, DropdownButtonRefType } from '../DropdownButton';\nimport {\n  createShareLink,\n  SOCIAL_SHARING_PLATFORMS,\n} from '../SocialMediaSharing';\n\nconst clipboardAlertMessage = 'Link has been copied to clipboard.';\n\nexport type SocialMediaSharingDropdownProps = {\n  url: string;\n  message?: string;\n  hashtags?: string[];\n  mention?: string;\n  action?: (e: React.MouseEvent, target: string) => void;\n  defaultPosition?: PopoverYPositionType['position'];\n  addAlert?: (alert: { message: string; onClose: () => void }) => void;\n};\n\nexport const onClickWrapper = (\n  e: React.MouseEvent,\n  id: string,\n  href: string,\n  action?: SocialMediaSharingDropdownProps['action']\n) => {\n  e.preventDefault();\n  action?.(e, `${id}_share`);\n  const popupSize = 570;\n  const left = (window.screen.width - popupSize) / 2;\n  const top = (window.screen.height - popupSize) / 2;\n  const features = `menubar=no,toolbar=no,status=no,width=${popupSize},height=${popupSize},top=${top},left=${left}`;\n  window.open(href, '_blank', features)?.focus();\n};\n\nexport const SocialMediaSharingDropdown: React.FC<\n  SocialMediaSharingDropdownProps\n> = ({\n  url,\n  message,\n  hashtags,\n  mention,\n  action,\n  defaultPosition = 'below',\n  addAlert,\n}) => {\n  const [showClipboardAlert, setShowClipboardAlert] = useState(false);\n\n  const dropdownRef = useRef<DropdownButtonRefType>(null);\n  const focusDropdown = () =>\n    dropdownRef.current?.focus({ preventScroll: true });\n\n  const copyUrlToClipboard = async (e: React.MouseEvent) => {\n    action?.(e, `link_share`);\n    await navigator.clipboard.writeText(url);\n\n    if (addAlert) {\n      addAlert({\n        message: clipboardAlertMessage,\n        onClose: focusDropdown,\n      });\n    } else {\n      setShowClipboardAlert(true);\n    }\n  };\n\n  return (\n    <>\n      <DropdownButton\n        ref={dropdownRef}\n        data-testid=\"social-share-dropdown\"\n        isMenu\n        buttonType=\"text\"\n        defaultPosition={defaultPosition}\n        px={0}\n        dropdownItems={[\n          ...SOCIAL_SHARING_PLATFORMS.map(\n            ({ id, formatShare, baseUrl, displayName }) => ({\n              id,\n              text: displayName,\n              clickHandler: (e: React.MouseEvent) => {\n                onClickWrapper(\n                  e,\n                  id,\n                  createShareLink(formatShare, baseUrl, {\n                    url,\n                    message,\n                    hashtags,\n                    mention,\n                  }),\n                  action\n                );\n              },\n            })\n          ),\n          'separator',\n          {\n            id: 'copy-link',\n            icon: LinkIcon,\n            text: 'Copy link',\n            ariaLabel: 'Copy link',\n            clickHandler: (e) => copyUrlToClipboard(e),\n          },\n        ]}\n      >\n        <ShareIcon mr={4} size={22} />\n        Share\n      </DropdownButton>\n      {showClipboardAlert && (\n        <FlexBox\n          minWidth=\"min-content\"\n          width={{ _: '80%', sm: '60%' }}\n          position=\"fixed\"\n          top=\"6rem\"\n          left={{ _: '10%', sm: '20%' }}\n          zIndex={999}\n          data-testid=\"social-share-copy-to-clipboard-alert\"\n          justifyContent=\"center\"\n        >\n          <Alert\n            onClose={() => {\n              setShowClipboardAlert(false);\n              focusDropdown();\n            }}\n            type=\"success\"\n            placement=\"inline\"\n          >\n            <Text whiteSpace=\"break-spaces\" display=\"inline\">\n              {clipboardAlertMessage}\n            </Text>\n          </Alert>\n        </FlexBox>\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;AAaA,MAAMU,wBAAwB;AAY9B,MAAaC,kBACXC,GACAC,IACAC,MACAC,WAAAA;AAEAH,GAAEI,gBAAc;AAChBD,UAASH,GAAG,GAAGC,GAAG,QAAO;CACzB,MAAMI,YAAY;CAClB,MAAMC,QAAQC,OAAOC,OAAOC,QAAQJ,aAAa;CAEjD,MAAMO,WAAW,yCAAyCP,UAAU,UAAUA,UAAU,QAD3EE,OAAOC,OAAOG,SAASN,aAAa,EACkD,QAAQC;AAC3GC,QAAOM,KAAKX,MAAM,UAAUU,SAAAA,EAAWE,OAAAA;;AAGzC,MAAaC,8BAER,EACHC,KACAC,SACAC,UACAC,SACAhB,QACAiB,kBAAkB,SAClBC,eACD;CACC,MAAM,CAACC,oBAAoBC,yBAAyB7B,SAAS,MAAA;CAE7D,MAAM8B,cAAc/B,OAA8B,KAAA;CAClD,MAAMgC,sBACJD,YAAYE,SAASZ,MAAM,EAAEa,eAAe,MAAK,CAAA;CAEnD,MAAMC,qBAAqB,OAAO5B,MAAAA;AAChCG,WAASH,GAAG,aAAY;AACxB,QAAM6B,UAAUC,UAAUC,UAAUf,IAAAA;AAEpC,MAAIK,SACFA,UAAS;GACPJ,SAASnB;GACTkC,SAASP;GACX,CAAA;MAEAF,uBAAsB,KAAA;;AAI1B,QACE,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAAC5B,gBAAAA;EACCsC,KAAKT;EACLU,eAAY;EACZC,QAAAA;EACAC,YAAW;EACMhB;EACjBiB,IAAI;EACJC,eAAe;MACVzC,yBAAyB0C,KACzB,EAAEtC,IAAIuC,aAAaC,SAASC,mBAAmB;IAC9CzC;IACA0C,MAAMD;IACNE,eAAe5C,MAAAA;AACbD,oBACEC,GACAC,IACAL,gBAAgB4C,aAAaC,SAAS;MACpCzB;MACAC;MACAC;MACAC;MACF,CAAA,EACAhB,OAAAA;;IAGN,EAAA;GAEF;GACA;IACEF,IAAI;IACJ4C,MAAMtD;IACNoD,MAAM;IACNG,WAAW;IACXF,eAAe5C,MAAM4B,mBAAmB5B,EAAAA;IAC1C;GACD;IAED,sBAAA,cAACR,WAAAA;EAAUuD,IAAI;EAAGC,MAAM;KAAM,QAAA,EAG/B1B,sBACC,sBAAA,cAACjC,SAAAA;EACC4D,UAAS;EACTxC,OAAO;GAAEyC,GAAG;GAAOC,IAAI;GAAM;EAC7BC,UAAS;EACT1C,KAAI;EACJJ,MAAM;GAAE4C,GAAG;GAAOC,IAAI;GAAM;EAC5BE,QAAQ;EACRnB,eAAY;EACZoB,gBAAe;IAEf,sBAAA,cAAClE,OAAAA;EACC4C,eAAS;AACPT,yBAAsB,MAAA;AACtBE,kBAAAA;;EAEF8B,MAAK;EACLC,WAAU;IAEV,sBAAA,cAAClE,MAAAA;EAAKmE,YAAW;EAAeC,SAAQ;IACrC5D,sBAAAA,CAAAA,CAAAA,CAAAA"}