@frak-labs/components 0.0.26-beta.d04602ec → 0.0.26-beta.eb3cff34

package/dist/banner.d.ts

@@ -1,5 +1,5 @@
 import { InteractionTypeKey } from "@frak-labs/core-sdk";
-import * as preact from "preact";
+import * as _$preact from "preact";
 
 //#region src/components/Banner/types.d.ts
 /**
@@ -44,23 +44,34 @@ type BannerProps = {
    * Override the in-app browser banner CTA button text.
    */
   inappCta?: string;
+  /**
+   * When set, forces the banner to render in preview mode (e.g. in Shopify theme editor).
+   * Bypasses normal event/browser detection and shows static content.
+   */
+  preview?: string;
+  /**
+   * Which banner variant to preview: "referral" or "inapp".
+   * Only used when {@link preview} is set. Defaults to "referral".
+   */
+  previewMode?: "referral" | "inapp";
 };
 //#endregion
 //#region src/components/Banner/Banner.d.ts
 /**
  * Auto-detecting notification banner component.
  *
- * Renders an inline banner on the merchant page that auto-detects which
- * message to display:
+ * Renders an inline banner on the merchant page with one of two distinct
+ * visual styles depending on the detected mode:
  *
- * - **Referral mode**: Shown after successful referral link processing.
- *   Displays reward info and a dismiss button ("Got it").
- * - **In-app browser mode**: Shown when the page is opened inside a social
- *   media in-app browser (Instagram, Facebook). Offers a redirect to the
- *   default browser.
+ * - **Referral mode** (white): Shown after a successful referral link
+ *   processing. Displays a gift icon, reward copy, and a "Got it" CTA.
+ * - **In-app browser mode** (dark transparent): Shown when the page is
+ *   opened inside a social media in-app browser (Instagram, Facebook).
+ *   Offers an inline link to redirect to the default browser plus a
+ *   close button to dismiss.
  *
  * In-app browser mode takes priority over referral mode.
- * Uses Light DOM to inherit merchant page styles.
+ * Uses Light DOM + vanilla-extract styles from `@frak-labs/design-system`.
  *
  * @group components
  *
@@ -85,8 +96,10 @@ declare function Banner({
   referralCta: propReferralCta,
   inappTitle: propInappTitle,
   inappDescription: propInappDescription,
-  inappCta: propInappCta
-}: BannerProps): preact.JSX.Element | null;
+  inappCta: propInappCta,
+  preview,
+  previewMode
+}: BannerProps): _$preact.JSX.Element | null;
 //#endregion
 //#region src/components/Banner/index.d.ts
 /**

package/dist/banner.js

@@ -1,83 +1,264 @@
-import { a as useClientReady, n as bannerBaseCss, o as registerWebComponent, t as usePlacement } from "./usePlacement-BbMuz8_A.js";
-import { t as useLightDomStyles } from "./useLightDomStyles-DukxuNnJ.js";
-import { t as useReward } from "./useReward-CI2yRrCj.js";
+import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-LqYjZLX_.js";
+import { t as useGlobalComponents } from "./useGlobalComponents-Cmfszr7v.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-hgYYZsTy.js";
+import { t as useReward } from "./useReward-DU3_yP8Q.js";
+import { a as CloseCircleIcon, c as cssSource$5, i as ExternalLinkIcon, n as WarningIcon, o as cssSource$6, s as cssSource$4, t as GiftIcon } from "./GiftIcon-4sr9xXyq.js";
 import { isInAppBrowser, redirectToExternalBrowser } from "@frak-labs/core-sdk";
-import { REFERRAL_SUCCESS_EVENT } from "@frak-labs/core-sdk/actions";
+import { REFERRAL_SUCCESS_EVENT, getMergeToken } from "@frak-labs/core-sdk/actions";
 import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
 import { jsx, jsxs } from "preact/jsx-runtime";
-
-//#region src/components/Banner/Banner.tsx
-/**
-* Reward/gift icon for referral mode.
-*/
-function RewardIcon() {
-	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round",
-		"aria-hidden": "true",
+//#region \0ve-inline:../../packages/design-system/src/styles/inAppBanner.css.ts.vanilla.js
+const cssSource$3 = `@keyframes inAppBanner_fadeIn__1ibpiy70 {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.inAppBanner_container__1ibpiy71 {
+  position: fixed;
+  top: max(8px, env(safe-area-inset-top));
+  left: 16px;
+  right: 16px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+  padding-right: 32px;
+  border-radius: 12px;
+  background-color: #000000CC;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  color: #ffffff;
+  animation: inAppBanner_fadeIn__1ibpiy70 300ms ease-out;
+}
+.inAppBanner_header__1ibpiy72 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.inAppBanner_iconWrapper__1ibpiy73 {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+}
+.inAppBanner_title__1ibpiy74 {
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 26px;
+  color: var(--text-onAction__pbq4ak6);
+}
+.inAppBanner_body__1ibpiy75 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0 4px;
+}
+.inAppBanner_description__1ibpiy76 {
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  color: var(--text-onAction__pbq4ak6);
+  line-height: 22px;
+  opacity: 0.96;
+}
+.inAppBanner_cta__1ibpiy77 {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #2BB2FF;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+.inAppBanner_cta__1ibpiy77:focus-visible {
+  outline: 2px solid #2BB2FF;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+.inAppBanner_closeButton__1ibpiy78 {
+  all: unset;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+}
+.inAppBanner_closeButton__1ibpiy78:focus-visible {
+  outline: 2px solid #ffffff;
+  outline-offset: 2px;
+}`;
+//#endregion
+//#region ../../packages/design-system/src/styles/inAppBanner.css.ts
+var body = "inAppBanner_body__1ibpiy75";
+var closeButton = "inAppBanner_closeButton__1ibpiy78";
+var container = "inAppBanner_container__1ibpiy71";
+var cta = "inAppBanner_cta__1ibpiy77";
+var description = "inAppBanner_description__1ibpiy76";
+var header = "inAppBanner_header__1ibpiy72";
+var iconWrapper = "inAppBanner_iconWrapper__1ibpiy73";
+var title = "inAppBanner_title__1ibpiy74";
+cssSource$4 + cssSource$3;
+//#endregion
+//#region ../../packages/design-system/src/components/InAppBanner/index.tsx
+function InAppBanner({ title: title$1, description: description$1, cta: cta$1, dismissLabel, onAction, onDismiss, className, classNames }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${container}${className ? ` ${className}` : ""}`,
+		role: "alert",
 		children: [
-			/* @__PURE__ */ jsx("rect", {
-				x: "3",
-				y: "11",
-				width: "18",
-				height: "11",
-				rx: "1"
+			/* @__PURE__ */ jsxs("div", {
+				className: header,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: `${iconWrapper}${classNames?.icon ? ` ${classNames.icon}` : ""}`,
+					children: /* @__PURE__ */ jsx(WarningIcon, {
+						width: 20,
+						height: 20
+					})
+				}), /* @__PURE__ */ jsx("p", {
+					className: `${title}${classNames?.title ? ` ${classNames.title}` : ""}`,
+					children: title$1
+				})]
 			}),
-			/* @__PURE__ */ jsx("path", { d: "M12 11v11" }),
-			/* @__PURE__ */ jsx("rect", {
-				x: "5",
-				y: "7",
-				width: "14",
-				height: "4",
-				rx: "1"
+			/* @__PURE__ */ jsxs("div", {
+				className: body,
+				children: [/* @__PURE__ */ jsx("p", {
+					className: `${description}${classNames?.description ? ` ${classNames.description}` : ""}`,
+					children: description$1
+				}), /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: `${cta}${classNames?.cta ? ` ${classNames.cta}` : ""}`,
+					onClick: onAction,
+					children: [cta$1, /* @__PURE__ */ jsx(ExternalLinkIcon, {
+						width: 14,
+						height: 14
+					})]
+				})]
 			}),
-			/* @__PURE__ */ jsx("path", { d: "M12 7c0 0-1.5-4-4.5-4S5 5 7.5 7" }),
-			/* @__PURE__ */ jsx("path", { d: "M12 7c0 0 1.5-4 4.5-4S19 5 16.5 7" })
-		]
-	});
-}
-/**
-* External link icon for in-app browser mode.
-*/
-function BrowserIcon() {
-	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round",
-		"aria-hidden": "true",
-		children: [
-			/* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" }),
-			/* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
-			/* @__PURE__ */ jsx("line", {
-				x1: "10",
-				y1: "14",
-				x2: "21",
-				y2: "3"
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: `${closeButton}${classNames?.close ? ` ${classNames.close}` : ""}`,
+				onClick: onDismiss,
+				"aria-label": dismissLabel,
+				children: /* @__PURE__ */ jsx(CloseCircleIcon, {
+					width: 16,
+					height: 16
+				})
 			})
 		]
 	});
 }
+//#endregion
+//#region \0ve-inline:src/components/Banner/Banner.css.ts.vanilla.js
+const cssSource$1 = `@keyframes Banner_fadeIn__1gnumzi0 {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.Banner_rootBase__1gnumzi1 {
+  position: relative;
+  display: flex;
+  animation: Banner_fadeIn__1gnumzi0 300ms ease-out;
+}
+.Banner_iconSvg__1gnumzi2 {
+  width: 100%;
+  height: 100%;
+}
+.Banner_referral__1gnumzi3 {
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  background-color: #ffffff;
+  color: var(--text-primary__pbq4ak0);
+}
+.Banner_referralIconWrapper__1gnumzi4 {
+  flex-shrink: 0;
+  align-self: flex-start;
+  width: 40px;
+  height: 40px;
+}
+.Banner_referralBody__1gnumzi5 {
+  flex: 1;
+  min-width: 0;
+}
+.Banner_referralTitle__1gnumzi6 {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary__pbq4ak0);
+  line-height: 22px;
+}
+.Banner_referralDescription__1gnumzi7 {
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #979797;
+  line-height: 22px;
+}
+.Banner_referralCta__1gnumzi8 {
+  display: inline-block;
+  padding: 8px 16px;
+  border: 1px solid #000000;
+  border-radius: 9999px;
+  color: var(--text-primary__pbq4ak0);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 12px;
+  text-transform: uppercase;
+}
+.Banner_referralCta__1gnumzi8:focus-visible {
+  outline: 2px solid #000000;
+  outline-offset: 2px;
+}`;
+//#endregion
+//#region src/components/Banner/Banner.css.ts
+var iconSvg = "Banner_iconSvg__1gnumzi2";
+var referral = "Banner_referral__1gnumzi3 reset_base__1831jhd0 Banner_rootBase__1gnumzi1";
+var referralBody = "Banner_referralBody__1gnumzi5";
+var referralCta = "Banner_referralCta__1gnumzi8 reset_element_button__1831jhd6 reset_fieldAppearance__1831jhd2 reset_focusRing__1831jhd1";
+var referralDescription = "Banner_referralDescription__1gnumzi7 reset_base__1831jhd0";
+var referralIconWrapper = "Banner_referralIconWrapper__1gnumzi4";
+var referralTitle = "Banner_referralTitle__1gnumzi6 reset_base__1831jhd0";
+const cssSource = cssSource$5 + cssSource$4 + cssSource$6 + cssSource$1;
+//#endregion
+//#region src/components/Banner/Banner.tsx
 /**
 * Auto-detecting notification banner component.
 *
-* Renders an inline banner on the merchant page that auto-detects which
-* message to display:
+* Renders an inline banner on the merchant page with one of two distinct
+* visual styles depending on the detected mode:
 *
-* - **Referral mode**: Shown after successful referral link processing.
-*   Displays reward info and a dismiss button ("Got it").
-* - **In-app browser mode**: Shown when the page is opened inside a social
-*   media in-app browser (Instagram, Facebook). Offers a redirect to the
-*   default browser.
+* - **Referral mode** (white): Shown after a successful referral link
+*   processing. Displays a gift icon, reward copy, and a "Got it" CTA.
+* - **In-app browser mode** (dark transparent): Shown when the page is
+*   opened inside a social media in-app browser (Instagram, Facebook).
+*   Offers an inline link to redirect to the default browser plus a
+*   close button to dismiss.
 *
 * In-app browser mode takes priority over referral mode.
-* Uses Light DOM to inherit merchant page styles.
+* Uses Light DOM + vanilla-extract styles from `@frak-labs/design-system`.
 *
 * @group components
 *
@@ -93,24 +274,65 @@ function BrowserIcon() {
 * <frak-banner classname="my-custom-banner"></frak-banner>
 * ```
 */
-function Banner({ placement: placementId, classname = "", interaction, referralTitle: propReferralTitle, referralDescription: propReferralDescription, referralCta: propReferralCta, inappTitle: propInappTitle, inappDescription: propInappDescription, inappCta: propInappCta }) {
+function Banner({ placement: placementId, classname = "", interaction, referralTitle: propReferralTitle, referralDescription: propReferralDescription, referralCta: propReferralCta, inappTitle: propInappTitle, inappDescription: propInappDescription, inappCta: propInappCta, preview, previewMode }) {
+	const isPreview = !!preview;
+	const resolvedPreviewMode = previewMode === "inapp" ? "inapp" : "referral";
 	const placement = usePlacement(placementId);
 	const { shouldRender, isHidden, isClientReady } = useClientReady();
-	useLightDomStyles("frak-banner", placementId, placement?.components?.banner?.css, bannerBaseCss);
+	useLightDomStyles("frak-banner", placementId, placement?.components?.banner?.css, cssSource);
 	const [dismissed, setDismissed] = useState(false);
-	const [mode, setMode] = useState(() => isInAppBrowser ? "inapp" : null);
+	const [mode, setMode] = useState(() => {
+		if (isPreview) return resolvedPreviewMode;
+		return isInAppBrowser ? "inapp" : null;
+	});
+	useEffect(() => {
+		if (isPreview) setMode(resolvedPreviewMode);
+	}, [isPreview, resolvedPreviewMode]);
 	const { reward } = useReward(mode === "referral" && isClientReady, interaction);
+	const [prefetchedMergeToken, setPrefetchedMergeToken] = useState(null);
+	useEffect(() => {
+		const client = window.FrakSetup?.client;
+		if (mode !== "inapp" || isPreview || !isClientReady || !client) return;
+		getMergeToken(client).then((token) => setPrefetchedMergeToken(token)).catch(() => {});
+	}, [
+		mode,
+		isPreview,
+		isClientReady
+	]);
 	useEffect(() => {
-		if (mode === "inapp") return;
+		if (isPreview || mode === "inapp") return;
 		const handler = () => setMode("referral");
 		window.addEventListener(REFERRAL_SUCCESS_EVENT, handler);
 		return () => window.removeEventListener(REFERRAL_SUCCESS_EVENT, handler);
-	}, [mode]);
-	const handleAction = useCallback(() => {
-		if (mode === "referral") setDismissed(true);
-		else redirectToExternalBrowser(window.location.href);
-	}, [mode]);
-	const bannerConfig = placement?.components?.banner;
+	}, [isPreview, mode]);
+	const handleAction = useCallback(async () => {
+		if (isPreview) return;
+		if (mode === "referral") {
+			setDismissed(true);
+			return;
+		}
+		let mergeToken = prefetchedMergeToken;
+		if (!mergeToken && window.FrakSetup?.client) try {
+			mergeToken = await getMergeToken(window.FrakSetup?.client);
+		} catch {}
+		let targetUrl = window.location.href;
+		if (mergeToken) {
+			const url = new URL(targetUrl);
+			url.searchParams.set("fmt", mergeToken);
+			targetUrl = url.toString();
+		}
+		redirectToExternalBrowser(targetUrl);
+	}, [
+		isPreview,
+		mode,
+		prefetchedMergeToken
+	]);
+	const handleDismiss = useCallback(() => {
+		if (isPreview) return;
+		setDismissed(true);
+	}, [isPreview]);
+	const globalComponents = useGlobalComponents();
+	const bannerConfig = placement?.components?.banner ?? globalComponents?.banner;
 	const texts = useMemo(() => {
 		if (mode === "referral") {
 			const defaultTitle = reward ? `Earn ${reward} on purchases on this site` : "You've been referred!";
@@ -136,39 +358,60 @@ function Banner({ placement: placementId, classname = "", interaction, referralT
 		propInappDescription,
 		propInappCta
 	]);
-	if (!shouldRender || isHidden || dismissed || !mode) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		class: [
-			"banner",
-			"banner__fadeIn",
+	if (!mode || !isPreview && (!shouldRender || isHidden || dismissed)) return null;
+	const bannerClass = [
+		referral,
+		"frak-banner",
+		`frak-banner--${mode}`,
+		classname
+	].filter(Boolean).join(" ");
+	if (mode === "inapp") return /* @__PURE__ */ jsx(InAppBanner, {
+		title: texts.title,
+		description: texts.description,
+		cta: texts.cta,
+		dismissLabel: "Dismiss",
+		onAction: handleAction,
+		onDismiss: handleDismiss,
+		className: [
+			"frak-banner",
+			"frak-banner--inapp",
 			classname
 		].filter(Boolean).join(" "),
+		classNames: {
+			icon: "frak-banner__icon",
+			title: "frak-banner__title",
+			description: "frak-banner__description",
+			cta: "frak-banner__cta",
+			close: "frak-banner__close"
+		}
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		class: bannerClass,
 		role: "alert",
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				class: "banner__icon",
-				children: mode === "referral" ? /* @__PURE__ */ jsx(RewardIcon, {}) : /* @__PURE__ */ jsx(BrowserIcon, {})
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				class: "banner__content",
-				children: [/* @__PURE__ */ jsx("p", {
-					class: "banner__title",
+		children: [/* @__PURE__ */ jsx("div", {
+			class: `${referralIconWrapper} frak-banner__icon`,
+			children: /* @__PURE__ */ jsx(GiftIcon, { class: iconSvg })
+		}), /* @__PURE__ */ jsxs("div", {
+			class: `${referralBody} frak-banner__text`,
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					class: `${referralTitle} frak-banner__title`,
 					children: texts.title
-				}), /* @__PURE__ */ jsx("p", {
-					class: "banner__description",
+				}),
+				/* @__PURE__ */ jsx("p", {
+					class: `${referralDescription} frak-banner__description`,
 					children: texts.description
-				})]
-			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				class: "banner__cta",
-				onClick: handleAction,
-				children: texts.cta
-			})
-		]
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					class: `${referralCta} frak-banner__cta`,
+					onClick: handleAction,
+					children: texts.cta
+				})
+			]
+		})]
 	});
 }
-
 //#endregion
 //#region src/components/Banner/index.ts
 registerWebComponent(Banner, "frak-banner", [
@@ -180,8 +423,9 @@ registerWebComponent(Banner, "frak-banner", [
 	"referralCta",
 	"inappTitle",
 	"inappDescription",
-	"inappCta"
+	"inappCta",
+	"preview",
+	"previewMode"
 ], { shadow: false });
-
 //#endregion
-export { Banner };
+export { Banner };

package/dist/buttonShare.d.ts

@@ -1,5 +1,5 @@
 import { InteractionTypeKey } from "@frak-labs/core-sdk";
-import * as preact from "preact";
+import * as _$preact from "preact";
 
 //#region src/components/ButtonShare/types.d.ts
 /**
@@ -88,7 +88,7 @@ declare function ButtonShare({
   noRewardText,
   targetInteraction,
   clickAction: rawClickAction
-}: ButtonShareProps): preact.JSX.Element | null;
+}: ButtonShareProps): _$preact.JSX.Element | null;
 //#endregion
 //#region src/components/ButtonShare/index.d.ts
 /**

package/dist/buttonShare.js

@@ -1,12 +1,13 @@
-import { a as useClientReady, c as openEmbeddedWallet, o as registerWebComponent, t as usePlacement } from "./usePlacement-BbMuz8_A.js";
-import { t as useLightDomStyles } from "./useLightDomStyles-DukxuNnJ.js";
-import { t as useReward } from "./useReward-CI2yRrCj.js";
-import { t as useShareModal } from "./useShareModal-DHlayNqk.js";
+import { a as registerWebComponent, i as useClientReady, s as openEmbeddedWallet, t as usePlacement } from "./usePlacement-LqYjZLX_.js";
+import { t as useGlobalComponents } from "./useGlobalComponents-Cmfszr7v.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-hgYYZsTy.js";
+import { t as applyRewardPlaceholder } from "./formatReward-Bub6Z6eY.js";
+import { t as useReward } from "./useReward-DU3_yP8Q.js";
+import { t as useShareModal } from "./useShareModal-DgEf5WWG.js";
 import { trackEvent } from "@frak-labs/core-sdk";
 import { displaySharingPage } from "@frak-labs/core-sdk/actions";
 import { useCallback, useMemo, useState } from "preact/hooks";
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-
 //#region src/utils/sharingPage.ts
 async function openSharingPage(targetInteraction, placement) {
 	if (!window.FrakSetup?.client) {
@@ -15,7 +16,6 @@ async function openSharingPage(targetInteraction, placement) {
 	}
 	await displaySharingPage(window.FrakSetup.client, { metadata: { ...targetInteraction && { targetInteraction } } }, placement);
 }
-
 //#endregion
 //#region src/hooks/useCopyToClipboard.ts
 function useCopyToClipboard(options = {}) {
@@ -57,7 +57,6 @@ function useCopyToClipboard(options = {}) {
 		copied
 	};
 }
-
 //#endregion
 //#region src/components/ButtonShare/components/ErrorMessage.tsx
 const styles = {
@@ -168,7 +167,6 @@ function ErrorMessage({ debugInfo }) {
 		]
 	});
 }
-
 //#endregion
 //#region src/components/ButtonShare/ButtonShare.tsx
 /**
@@ -214,7 +212,8 @@ function ErrorMessage({ debugInfo }) {
 */
 function ButtonShare({ placement: placementId, text = "Share and earn!", classname = "", useReward: rawUseReward, noRewardText, targetInteraction, clickAction: rawClickAction }) {
 	const placement = usePlacement(placementId);
-	const componentConfig = placement?.components?.buttonShare;
+	const globalComponents = useGlobalComponents();
+	const componentConfig = placement?.components?.buttonShare ?? globalComponents?.buttonShare;
 	useLightDomStyles("frak-button-share", placementId, componentConfig?.css);
 	const resolvedTargetInteraction = useMemo(() => placement?.targetInteraction !== void 0 ? placement.targetInteraction : targetInteraction, [placement?.targetInteraction, targetInteraction]);
 	const resolvedText = componentConfig?.text ?? text;
@@ -226,8 +225,8 @@ function ButtonShare({ placement: placementId, text = "Share and earn!", classna
 	const { handleShare, isError, debugInfo } = useShareModal(resolvedTargetInteraction, placementId);
 	const btnText = useMemo(() => {
 		if (!shouldUseReward) return resolvedText;
-		if (!reward) return resolvedNoRewardText ?? resolvedText.replace("{REWARD}", "");
-		return resolvedText.includes("{REWARD}") ? resolvedText.replace("{REWARD}", reward) : `${resolvedText} ${reward}`;
+		if (!reward) return resolvedNoRewardText ?? applyRewardPlaceholder(resolvedText, void 0);
+		return resolvedText.includes("{REWARD}") ? applyRewardPlaceholder(resolvedText, reward) : `${resolvedText} ${reward}`;
 	}, [
 		shouldUseReward,
 		resolvedText,
@@ -259,7 +258,6 @@ function ButtonShare({ placement: placementId, text = "Share and earn!", classna
 		children: btnText
 	}), isError && /* @__PURE__ */ jsx(ErrorMessage, { debugInfo })] });
 }
-
 //#endregion
 //#region src/components/ButtonShare/index.ts
 registerWebComponent(ButtonShare, "frak-button-share", [
@@ -271,6 +269,5 @@ registerWebComponent(ButtonShare, "frak-button-share", [
 	"noRewardText",
 	"targetInteraction"
 ], { shadow: false });
-
 //#endregion
-export { ButtonShare };
+export { ButtonShare };

package/dist/buttonWallet.d.ts

@@ -1,5 +1,5 @@
 import { InteractionTypeKey } from "@frak-labs/core-sdk";
-import * as preact from "preact";
+import * as _$preact from "preact";
 
 //#region src/components/ButtonWallet/types.d.ts
 /**
@@ -70,7 +70,7 @@ declare function ButtonWallet({
   classname,
   useReward: rawUseReward,
   targetInteraction
-}: ButtonWalletProps): preact.JSX.Element | null;
+}: ButtonWalletProps): _$preact.JSX.Element | null;
 //#endregion
 //#region src/components/ButtonWallet/index.d.ts
 /**