@frak-labs/components 1.0.2 → 1.0.3

package/dist/buttonShare.d.ts

@@ -32,10 +32,15 @@ type ButtonShareProps = {
    */
   targetInteraction?: InteractionTypeKey;
   /**
-   * Which UI to open on click
-   * @defaultValue `"embedded-wallet"`
+   * Which UI to open on click.
+   *
+   * Legacy values (e.g. `"share-modal"`) are accepted at runtime and
+   * gracefully route to the full-page sharing UI — the modal-flow
+   * share path was retired in favour of `displaySharingPage`.
+   *
+   * @defaultValue `"sharing-page"`
    */
-  clickAction?: "embedded-wallet" | "share-modal" | "sharing-page";
+  clickAction?: "embedded-wallet" | "sharing-page";
   /**
    * When set, renders the button in preview mode (e.g. Shopify/WP editor).
    * Skips the client-ready gating so the button is always enabled visually,
@@ -84,7 +89,7 @@ type ButtonShareProps = {
  * <frak-button-share use-reward text="Share and earn up to {REWARD}!" no-reward-text="Share and earn!" target-interaction="custom.customerMeeting"></frak-button-share>
  * ```
  *
- * @see {@link @frak-labs/core-sdk!actions.modalBuilder | `modalBuilder()`} for more info about the modal display
+ * @see {@link @frak-labs/core-sdk!actions.displaySharingPage | `displaySharingPage()`} for more info about the sharing-page flow
  * @see {@link @frak-labs/core-sdk!actions.getMerchantInformation | `getMerchantInformation()`} for more info about the estimated reward fetching
  */
 declare function ButtonShare({

package/dist/buttonShare.js

@@ -1,176 +1,12 @@
 import { a as registerWebComponent, i as useClientReady, s as openEmbeddedWallet, t as usePlacement } from "./usePlacement-V7NrKoub.js";
 import { t as useGlobalComponents } from "./useGlobalComponents-Cmfszr7v.js";
-import { t as useLightDomStyles } from "./useLightDomStyles-C3lcOwY2.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-gbuSWvRx.js";
 import { t as applyRewardPlaceholder } from "./formatReward-Bub6Z6eY.js";
 import { t as useReward } from "./useReward-DU3_yP8Q.js";
-import { t as useShareModal } from "./useShareModal-BEVkLrBP.js";
+import { t as openSharingPage } from "./sharingPage-DFvQbviS.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) {
-		console.error("Frak client not found");
-		return;
-	}
-	await displaySharingPage(window.FrakSetup.client, { metadata: { ...targetInteraction && { targetInteraction } } }, placement);
-}
-//#endregion
-//#region src/hooks/useCopyToClipboard.ts
-function useCopyToClipboard(options = {}) {
-	const { successDuration = 2e3 } = options;
-	const [copied, setCopied] = useState(false);
-	return {
-		copy: useCallback(async (text) => {
-			try {
-				if (navigator.clipboard && window.isSecureContext) {
-					await navigator.clipboard.writeText(text);
-					setCopied(true);
-				} else {
-					const textArea = document.createElement("textarea");
-					textArea.value = text;
-					textArea.style.position = "fixed";
-					textArea.style.opacity = "0";
-					document.body.appendChild(textArea);
-					textArea.focus();
-					textArea.select();
-					try {
-						document.execCommand("copy");
-						setCopied(true);
-					} catch (err) {
-						console.error("Failed to copy text:", err);
-						return false;
-					} finally {
-						textArea.remove();
-					}
-				}
-				setTimeout(() => {
-					setCopied(false);
-				}, successDuration);
-				return true;
-			} catch (err) {
-				console.error("Failed to copy text:", err);
-				return false;
-			}
-		}, [successDuration]),
-		copied
-	};
-}
-//#endregion
-//#region src/components/ButtonShare/components/ErrorMessage.tsx
-const styles = {
-	errorContainer: {
-		marginTop: "16px",
-		padding: "16px",
-		backgroundColor: "#FEE2E2",
-		border: "1px solid #FCA5A5",
-		borderRadius: "4px",
-		color: "#991B1B"
-	},
-	header: {
-		display: "flex",
-		alignItems: "center",
-		gap: "8px",
-		marginBottom: "12px"
-	},
-	title: {
-		margin: 0,
-		fontSize: "16px",
-		fontWeight: 500
-	},
-	message: {
-		fontSize: "14px",
-		lineHeight: "1.5",
-		margin: "0 0 12px 0"
-	},
-	link: {
-		color: "#991B1B",
-		textDecoration: "underline",
-		textUnderlineOffset: "2px"
-	},
-	copyButton: {
-		display: "inline-flex",
-		alignItems: "center",
-		gap: "8px",
-		marginBottom: "10px",
-		padding: "8px 12px",
-		backgroundColor: "white",
-		border: "1px solid #D1D5DB",
-		borderRadius: "4px",
-		color: "black",
-		fontSize: "14px",
-		fontWeight: 500
-	}
-};
-/**
-* Renders a toggleable debug information section
-* @param {Object} props - Component props
-* @param {string} [props.debugInfo] - Debug information to display in textarea
-*/
-function ToggleMessage({ debugInfo }) {
-	const [showInfo, setShowInfo] = useState(false);
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("button", {
-		type: "button",
-		style: styles.copyButton,
-		onClick: () => setShowInfo(!showInfo),
-		children: "Ouvrir les informations"
-	}), showInfo && /* @__PURE__ */ jsx("textarea", {
-		style: {
-			display: "block",
-			width: "100%",
-			height: "200px",
-			fontSize: "12px"
-		},
-		children: debugInfo
-	})] });
-}
-/**
-* Displays an error message with debug information and copy functionality
-* @param {Object} props - Component props
-* @param {string} [props.debugInfo] - Debug information that can be copied or displayed
-*/
-function ErrorMessage({ debugInfo }) {
-	const { copied, copy } = useCopyToClipboard();
-	const handleCopy = () => {
-		copy(debugInfo ?? "");
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		style: styles.errorContainer,
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				style: styles.header,
-				children: /* @__PURE__ */ jsx("h3", {
-					style: styles.title,
-					children: "Oups ! Nous avons rencontré un petit problème"
-				})
-			}),
-			/* @__PURE__ */ jsxs("p", {
-				style: styles.message,
-				children: [
-					"Impossible d'ouvrir le menu de partage pour le moment. Si le problème persiste, copiez les informations ci-dessous et collez-les dans votre mail à",
-					" ",
-					/* @__PURE__ */ jsx("a", {
-						href: "mailto:help@frak-labs.com?subject=Debug",
-						style: styles.link,
-						children: "help@frak-labs.com"
-					}),
-					" ",
-					/* @__PURE__ */ jsx("br", {}),
-					"Merci pour votre retour, nous traitons votre demande dans les plus brefs délais."
-				]
-			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: handleCopy,
-				style: styles.copyButton,
-				children: copied ? "Informations copiées !" : "Copier les informations de débogage"
-			}),
-			/* @__PURE__ */ jsx(ToggleMessage, { debugInfo })
-		]
-	});
-}
-//#endregion
+import { useCallback, useMemo } from "preact/hooks";
+import { jsx } from "preact/jsx-runtime";
 //#region src/components/ButtonShare/ButtonShare.tsx
 /**
 * Button to share the current page
@@ -210,7 +46,7 @@ function ErrorMessage({ debugInfo }) {
 * <frak-button-share use-reward text="Share and earn up to {REWARD}!" no-reward-text="Share and earn!" target-interaction="custom.customerMeeting"></frak-button-share>
 * ```
 *
-* @see {@link @frak-labs/core-sdk!actions.modalBuilder | `modalBuilder()`} for more info about the modal display
+* @see {@link @frak-labs/core-sdk!actions.displaySharingPage | `displaySharingPage()`} for more info about the sharing-page flow
 * @see {@link @frak-labs/core-sdk!actions.getMerchantInformation | `getMerchantInformation()`} for more info about the estimated reward fetching
 */
 function ButtonShare({ placement: placementId, text = "Share and earn!", classname = "", useReward: rawUseReward, noRewardText, targetInteraction, clickAction: rawClickAction, preview }) {
@@ -226,7 +62,6 @@ function ButtonShare({ placement: placementId, text = "Share and earn!", classna
 	const resolvedClickAction = useMemo(() => componentConfig?.clickAction ?? rawClickAction ?? "sharing-page", [componentConfig?.clickAction, rawClickAction]);
 	const { shouldRender, isHidden, isClientReady } = useClientReady();
 	const { reward } = useReward(shouldUseReward && isClientReady, resolvedTargetInteraction);
-	const { handleShare, isError, debugInfo } = useShareModal(resolvedTargetInteraction, placementId);
 	const btnText = useMemo(() => {
 		if (!shouldUseReward) return resolvedText;
 		if (!reward) return resolvedNoRewardText ?? applyRewardPlaceholder(resolvedText, void 0);
@@ -237,7 +72,7 @@ function ButtonShare({ placement: placementId, text = "Share and earn!", classna
 		resolvedNoRewardText,
 		reward
 	]);
-	const onClick = useCallback(async () => {
+	const onClick = useCallback(() => {
 		if (isPreview) return;
 		trackEvent(window.FrakSetup.client, "share_button_clicked", {
 			placement: placementId,
@@ -245,13 +80,14 @@ function ButtonShare({ placement: placementId, text = "Share and earn!", classna
 			has_reward: Boolean(reward),
 			click_action: resolvedClickAction
 		});
-		if (resolvedClickAction === "embedded-wallet") openEmbeddedWallet(resolvedTargetInteraction, placementId);
-		else if (resolvedClickAction === "share-modal") await handleShare();
-		else openSharingPage(resolvedTargetInteraction, placementId);
+		if (resolvedClickAction === "embedded-wallet") {
+			openEmbeddedWallet(resolvedTargetInteraction, placementId);
+			return;
+		}
+		openSharingPage(resolvedTargetInteraction, placementId);
 	}, [
 		isPreview,
 		resolvedClickAction,
-		handleShare,
 		resolvedTargetInteraction,
 		placementId,
 		reward
@@ -262,13 +98,13 @@ function ButtonShare({ placement: placementId, text = "Share and earn!", classna
 		"button__fadeIn",
 		classname
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		disabled: !isPreview && !isClientReady,
 		class: buttonClass,
 		onClick,
 		children: btnText
-	}), isError && /* @__PURE__ */ jsx(ErrorMessage, { debugInfo })] });
+	});
 }
 //#endregion
 //#region src/components/ButtonShare/index.ts

package/dist/openInApp.js

@@ -1,5 +1,5 @@
 import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-V7NrKoub.js";
-import { t as useLightDomStyles } from "./useLightDomStyles-C3lcOwY2.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-gbuSWvRx.js";
 import { DEEP_LINK_SCHEME, trackEvent, triggerDeepLinkWithFallback } from "@frak-labs/core-sdk";
 import { useMemo } from "preact/hooks";
 import { jsx } from "preact/jsx-runtime";

package/dist/postPurchase.d.ts

@@ -1,3 +1,4 @@
+import { SharingPageProduct } from "@frak-labs/core-sdk";
 import * as _$preact from "preact";
 
 //#region src/components/PostPurchase/types.d.ts
@@ -61,6 +62,20 @@ type PostPurchaseProps = {
    * Use `{REWARD}` as placeholder for the reward amount.
    */
   ctaText?: string;
+  /**
+   * Optional product cards forwarded to the sharing page when the user
+   * clicks the CTA. Accepts either a real {@link SharingPageProduct}
+   * array (when set imperatively via the JS property,
+   * `el.products = [...]`) or a JSON-stringified array (when set as an
+   * HTML attribute, `<frak-post-purchase products='[...]'>`). The HTML
+   * attribute path is required for server-rendered surfaces — e.g.
+   * WooCommerce / Magento plugins — because `preact-custom-element`
+   * delivers attribute values as raw strings.
+   *
+   * Empty arrays / unparseable strings are treated as "no products" so
+   * the sharing page renders without the product card section.
+   */
+  products?: SharingPageProduct[] | string;
   /**
    * When set, renders the card in preview mode (e.g. Shopify/WP editor).
    * Bypasses the client-ready / RPC gates that normally hide the card
@@ -118,7 +133,8 @@ declare function PostPurchase({
   refereeText: propRefereeText,
   ctaText: propCtaText,
   preview,
-  previewVariant
+  previewVariant,
+  products
 }: PostPurchaseProps): _$preact.JSX.Element | null;
 //#endregion
 //#region src/components/PostPurchase/index.d.ts

package/dist/postPurchase.js

@@ -1,12 +1,12 @@
 import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-V7NrKoub.js";
 import { t as useGlobalComponents } from "./useGlobalComponents-Cmfszr7v.js";
-import { t as useLightDomStyles } from "./useLightDomStyles-C3lcOwY2.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-gbuSWvRx.js";
 import { n as formatEstimatedReward, t as applyRewardPlaceholder } from "./formatReward-Bub6Z6eY.js";
-import { t as useShareModal } from "./useShareModal-BEVkLrBP.js";
-import { l as createElement, o as cssSource$4, r as LogoFrak, s as cssSource$3, t as GiftIcon } from "./GiftIcon-4sr9xXyq.js";
+import { t as openSharingPage } from "./sharingPage-DFvQbviS.js";
+import { c as cssSource$5, l as createElement, o as cssSource$4, r as LogoFrak, s as cssSource$3, t as GiftIcon } from "./GiftIcon-c28NnqJ7.js";
 import { trackEvent } from "@frak-labs/core-sdk";
 import { getMerchantInformation, getUserReferralStatus, trackPurchaseStatus } from "@frak-labs/core-sdk/actions";
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { jsx, jsxs } from "preact/jsx-runtime";
 import { FrakRpcError, RpcErrorCodes } from "@frak-labs/frame-connector";
 //#region ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
@@ -1394,12 +1394,73 @@ const cssSource$1 = `.PostPurchase_card__5fv5lh0 {
   color: var(--surface-primary__pbq4aka);
 }`;
 var card = "PostPurchase_card__5fv5lh0";
-var cta = "PostPurchase_cta__5fv5lh3";
+var cta = "PostPurchase_cta__5fv5lh3 reset_element_button__1831jhd6 reset_fieldAppearance__1831jhd2 reset_focusRing__1831jhd1";
 var frakLogo = "PostPurchase_frakLogo__5fv5lh6";
 var giftIcon = "PostPurchase_giftIcon__5fv5lh5";
 var icon = "PostPurchase_icon__5fv5lh4";
 var message = "PostPurchase_message__5fv5lh2";
-const cssSource = cssSource$3 + cssSource$4 + cssSource$1;
+const cssSource = cssSource$5 + cssSource$3 + cssSource$4 + cssSource$1;
+//#endregion
+//#region src/components/PostPurchase/products.ts
+/**
+* Whether `value` is a syntactically valid URL with an `http(s):` scheme.
+*
+* Used to gate `imageUrl` / `link` fields coming from the public `products`
+* prop — the listener-side sharing-page builder calls `new URL(...)` on the
+* incoming product link, and a `javascript:` URL would be a XSS sink in any
+* consumer that binds the value to an `href`.
+*/
+function isHttpUrl(value) {
+	try {
+		const parsed = new URL(value);
+		return parsed.protocol === "http:" || parsed.protocol === "https:";
+	} catch {
+		return false;
+	}
+}
+/**
+* Coerce a raw `products` prop value into a candidate array suitable for
+* per-item normalisation, or null when it cannot be reduced to one.
+*
+* Surfaces that set the prop via the JS property (`el.products = [...]`)
+* deliver a real array; surfaces that bind it as an HTML attribute
+* (WP / Magento server-render) deliver a JSON-stringified array. Anything
+* else (truthy non-array non-string, JSON parse failure, JSON that decodes
+* to a non-array) is treated as "no products" so the share still works
+* without the product card section.
+*/
+function coerceProductCandidates(products) {
+	if (!products) return null;
+	if (Array.isArray(products)) return products;
+	if (typeof products !== "string") return null;
+	try {
+		const parsed = JSON.parse(products);
+		return Array.isArray(parsed) ? parsed : null;
+	} catch {
+		return null;
+	}
+}
+/**
+* Normalise one untrusted candidate into a {@link SharingPageProduct}, or
+* return null when the candidate has no usable title.
+*
+* The `products` prop is a public API boundary (merchants can set it
+* server-side via WP/Magento or imperatively from arbitrary JS). Each entry
+* is validated structurally so a malformed `link` reaching `new URL(...)`
+* downstream would not crash the sharing-page builder, and so a
+* `javascript:` URL cannot slip through as `imageUrl` / `link`.
+*/
+function normalizeProductCandidate(candidate) {
+	if (!candidate || typeof candidate !== "object") return null;
+	const item = candidate;
+	const title = typeof item.title === "string" ? item.title.trim() : "";
+	if (title === "") return null;
+	const entry = { title };
+	if (typeof item.imageUrl === "string" && isHttpUrl(item.imageUrl)) entry.imageUrl = item.imageUrl;
+	if (typeof item.link === "string" && isHttpUrl(item.link)) entry.link = item.link;
+	if (typeof item.utmContent === "string" && item.utmContent !== "") entry.utmContent = item.utmContent;
+	return entry;
+}
 //#endregion
 //#region src/components/PostPurchase/PostPurchase.tsx
 /**
@@ -1444,7 +1505,7 @@ function resolvePostPurchaseContext(referralStatus, merchantInfo) {
 * ></frak-post-purchase>
 * ```
 */
-function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, placement: placementId, classname = "", variant: forcedVariant, badgeText: propBadgeText, referrerText: propReferrerText, refereeText: propRefereeText, ctaText: propCtaText, preview, previewVariant }) {
+function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, placement: placementId, classname = "", variant: forcedVariant, badgeText: propBadgeText, referrerText: propReferrerText, refereeText: propRefereeText, ctaText: propCtaText, preview, previewVariant, products }) {
 	const isPreview = !!preview;
 	const { shouldRender, isHidden, isClientReady } = useClientReady();
 	const placement = usePlacement(placementId);
@@ -1531,7 +1592,32 @@ function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, plac
 		placementId,
 		context?.reward
 	]);
-	const { handleShare } = useShareModal(void 0, placementId, resolvedSharingUrl);
+	const parsedProducts = useMemo(() => {
+		const candidates = coerceProductCandidates(products);
+		if (!candidates) return void 0;
+		const sanitized = [];
+		for (const candidate of candidates) {
+			const entry = normalizeProductCandidate(candidate);
+			if (entry) sanitized.push(entry);
+		}
+		return sanitized.length > 0 ? sanitized : void 0;
+	}, [products]);
+	const handleClick = useCallback(() => {
+		if (!resolvedVariant) return;
+		trackEvent(window.FrakSetup?.client, "post_purchase_clicked", {
+			placement: placementId,
+			variant: resolvedVariant
+		});
+		openSharingPage(void 0, placementId, {
+			link: resolvedSharingUrl,
+			products: parsedProducts
+		});
+	}, [
+		resolvedVariant,
+		placementId,
+		resolvedSharingUrl,
+		parsedProducts
+	]);
 	if (!isPreview && (!shouldRender || isHidden)) return null;
 	if (!isPreview && (!context || !resolvedVariant)) return null;
 	if (!resolvedVariant) return null;
@@ -1557,14 +1643,7 @@ function PostPurchase({ customerId, orderId, token, sharingUrl, merchantId, plac
 						type: "button",
 						className: `${cta} button`,
 						disabled: !isPreview && !isClientReady,
-						onClick: isPreview ? void 0 : () => {
-							if (!resolvedVariant) return;
-							trackEvent(window.FrakSetup?.client, "post_purchase_clicked", {
-								placement: placementId,
-								variant: resolvedVariant
-							});
-							handleShare();
-						},
+						onClick: isPreview ? void 0 : handleClick,
 						children: [texts.cta, /* @__PURE__ */ jsx("svg", {
 							width: "16",
 							height: "16",
@@ -1613,6 +1692,7 @@ registerWebComponent(PostPurchase, "frak-post-purchase", [
 	"referrerText",
 	"refereeText",
 	"ctaText",
+	"products",
 	"preview",
 	"previewVariant"
 ], { shadow: false });

package/dist/sharingPage-DFvQbviS.js

@@ -0,0 +1,15 @@
+import { displaySharingPage } from "@frak-labs/core-sdk/actions";
+//#region src/utils/sharingPage.ts
+async function openSharingPage(targetInteraction, placement, options) {
+	if (!window.FrakSetup?.client) {
+		console.error("Frak client not found");
+		return;
+	}
+	await displaySharingPage(window.FrakSetup.client, {
+		...options?.link && { link: options.link },
+		...options?.products?.length && { products: options.products },
+		...targetInteraction && { metadata: { targetInteraction } }
+	}, placement);
+}
+//#endregion
+export { openSharingPage as t };

package/dist/useLightDomStyles-gbuSWvRx.js

@@ -0,0 +1,89 @@
+import { r as lightDomBaseCss } from "./usePlacement-V7NrKoub.js";
+import { useEffect } from "preact/hooks";
+//#region src/utils/styleManager.ts
+/**
+* Tracks every base CSS rule (by exact cssText) already injected into <head>.
+*
+* Each Light DOM component (frak-banner, frak-post-purchase, …) ships a
+* `cssSource` string that contains both component-specific rules AND shared
+* design-system rules (reset, sprinkles, theme tokens) pulled in transitively
+* by vanilla-extract. Without dedup, every component re-emits the same reset
+* class definitions in its own <style> tag, and whichever stylesheet is
+* appended LAST wins for those shared selectors — flipping the cascade order
+* non-deterministically across mount orders.
+*
+* Deduplicating rule-by-rule guarantees that shared rules appear exactly once
+* (in the first component's stylesheet) and component-specific rules always
+* come AFTER them in document order, so component styles win deterministically.
+*/
+const injectedRules = /* @__PURE__ */ new Set();
+function ensureStyle(id, css) {
+	const existing = document.getElementById(id);
+	if (existing) {
+		if (existing.textContent !== css) existing.textContent = css;
+		return;
+	}
+	const style = document.createElement("style");
+	style.id = id;
+	style.textContent = css;
+	document.head.appendChild(style);
+}
+/**
+* Parses `css` and returns a new string containing only rules that have not
+* already been injected into <head>. Tracks injected rules in `injectedRules`.
+*
+* Falls back to the raw input if the browser lacks the constructable
+* `CSSStyleSheet` API or parsing fails — preserves correctness over dedup.
+*/
+function dedupeAgainstInjected(css) {
+	if (typeof CSSStyleSheet !== "function") return css;
+	let sheet;
+	try {
+		sheet = new CSSStyleSheet();
+		sheet.replaceSync(css);
+	} catch {
+		return css;
+	}
+	let out = "";
+	for (let i = 0; i < sheet.cssRules.length; i++) {
+		const ruleText = sheet.cssRules[i].cssText;
+		if (injectedRules.has(ruleText)) continue;
+		injectedRules.add(ruleText);
+		out += `${ruleText}\n`;
+	}
+	return out;
+}
+function injectBase(tag, css) {
+	const id = `frak-base-${tag}`;
+	if (document.getElementById(id)) return;
+	const deduped = dedupeAgainstInjected(css);
+	if (!deduped) return;
+	const style = document.createElement("style");
+	style.id = id;
+	style.textContent = deduped;
+	document.head.appendChild(style);
+}
+function injectPlacement(tag, placementId, scopedCss) {
+	ensureStyle(`frak-placement-${tag}-${placementId}`, scopedCss);
+}
+const styleManager = {
+	injectBase,
+	injectPlacement
+};
+//#endregion
+//#region src/hooks/useLightDomStyles.ts
+function useLightDomStyles(tag, placementId, placementCss, baseCss) {
+	useEffect(() => {
+		styleManager.injectBase(tag, baseCss ?? lightDomBaseCss);
+	}, [tag]);
+	useEffect(() => {
+		if (!placementId || !placementCss) return;
+		styleManager.injectPlacement(tag, placementId, placementCss);
+	}, [
+		tag,
+		placementId,
+		placementCss
+	]);
+}
+//#endregion
+export { useLightDomStyles as t };

package/package.json

@@ -11,7 +11,7 @@
       "url": "https://twitter.com/QNivelais"
     }
   ],
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Frak Wallet components, helping any person to interact with the Frak wallet.",
   "repository": {
     "url": "https://github.com/frak-id/wallet",