@frak-labs/components 0.0.26-beta.b38eef2e → 0.0.26-beta.bbbb3d22

package/dist/banner.d.ts

@@ -0,0 +1,116 @@
+import { InteractionTypeKey } from "@frak-labs/core-sdk";
+import * as _$preact from "preact";
+
+//#region src/components/Banner/types.d.ts
+/**
+ * The props type for {@link Banner}.
+ * @inline
+ */
+type BannerProps = {
+  /**
+   * Placement ID for backend-driven CSS customization.
+   */
+  placement?: string;
+  /**
+   * CSS class names passed through to the root element (Light DOM).
+   */
+  classname?: string;
+  /**
+   * Filter rewards by interaction type (e.g. "purchase", "referral").
+   * When omitted, the best reward across all interaction types is shown.
+   */
+  interaction?: InteractionTypeKey;
+  /**
+   * Override the referral banner title.
+   */
+  referralTitle?: string;
+  /**
+   * Override the referral banner description.
+   */
+  referralDescription?: string;
+  /**
+   * Override the referral banner CTA button text.
+   */
+  referralCta?: string;
+  /**
+   * Override the in-app browser banner title.
+   */
+  inappTitle?: string;
+  /**
+   * Override the in-app browser banner description.
+   */
+  inappDescription?: string;
+  /**
+   * 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 with one of two distinct
+ * visual styles depending on the detected mode:
+ *
+ * - **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 + vanilla-extract styles from `@frak-labs/design-system`.
+ *
+ * @group components
+ *
+ * @example
+ * Basic usage (auto-detects mode):
+ * ```html
+ * <frak-banner></frak-banner>
+ * ```
+ *
+ * @example
+ * With a custom class:
+ * ```html
+ * <frak-banner classname="my-custom-banner"></frak-banner>
+ * ```
+ */
+declare function Banner({
+  placement: placementId,
+  classname,
+  interaction,
+  referralTitle: propReferralTitle,
+  referralDescription: propReferralDescription,
+  referralCta: propReferralCta,
+  inappTitle: propInappTitle,
+  inappDescription: propInappDescription,
+  inappCta: propInappCta,
+  preview,
+  previewMode
+}: BannerProps): _$preact.JSX.Element | null;
+//#endregion
+//#region src/components/Banner/index.d.ts
+/**
+ * Custom element interface for `<frak-banner>`.
+ * Combines standard {@link HTMLElement} with {@link BannerProps}.
+ */
+interface BannerElement extends HTMLElement, BannerProps {}
+declare global {
+  interface HTMLElementTagNameMap {
+    "frak-banner": BannerElement;
+  }
+}
+//#endregion
+export { Banner, BannerElement };

package/dist/banner.js

@@ -0,0 +1,405 @@
+import { a as registerWebComponent, i as useClientReady, t as usePlacement } from "./usePlacement-LqYjZLX_.js";
+import { t as useLightDomStyles } from "./useLightDomStyles-Cjpf0MnX.js";
+import { t as useReward } from "./useReward-XF2hB_C_.js";
+import { i as cssSource$2, n as cssSource$4, r as cssSource$3, t as GiftIcon } from "./GiftIcon-BrNVWoWm.js";
+import { isInAppBrowser, redirectToExternalBrowser } from "@frak-labs/core-sdk";
+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/icons/CloseIcon.tsx
+function CloseIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "15",
+		height: "15",
+		viewBox: "0 0 15 15",
+		fill: "none",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M7.33301 0C11.383 0 14.6668 3.28307 14.667 7.33301C14.667 11.3831 11.3831 14.667 7.33301 14.667C3.28307 14.6668 0 11.383 0 7.33301C0.000175746 3.28318 3.28318 0.000175742 7.33301 0ZM10.3896 4.27734C10.151 4.0388 9.76303 4.03775 9.52441 4.27637L7.33301 6.46777L5.14258 4.27637C4.90397 4.03776 4.51601 4.03882 4.27734 4.27734C4.03869 4.516 4.03771 4.90392 4.27637 5.14258L6.4668 7.33398L4.27637 9.52441C4.03807 9.76306 4.03891 10.1511 4.27734 10.3896C4.51589 10.6282 4.9039 10.629 5.14258 10.3906L7.33301 8.2002L9.52344 10.3906C9.76198 10.629 10.15 10.6279 10.3887 10.3896C10.6273 10.151 10.6283 9.76209 10.3896 9.52344L8.2002 7.33398L10.3906 5.14258C10.6293 4.90392 10.6283 4.516 10.3896 4.27734Z",
+			fill: "currentColor"
+		})
+	});
+}
+//#endregion
+//#region src/components/icons/ExternalLinkIcon.tsx
+function ExternalLinkIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 12 12",
+		fill: "none",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M5.45508 0C5.75614 0.000209333 6 0.244788 6 0.545898C5.99979 0.846831 5.75601 1.09159 5.45508 1.0918H4.36426C3.05445 1.0918 2.27964 1.35707 1.81836 1.81836C1.35714 2.27966 1.0918 3.05454 1.0918 4.36426V7.63672C1.09186 8.94625 1.35713 9.72139 1.81836 10.1826C2.2797 10.6436 3.05488 10.9092 4.36426 10.9092H7.63672C8.94628 10.9091 9.72135 10.6438 10.1826 10.1826C10.6438 9.72139 10.9091 8.94625 10.9092 7.63672V6.5459C10.9092 6.24466 11.1538 6 11.4551 6C11.7561 6.00028 12 6.24483 12 6.5459V7.63672C11.9999 9.05391 11.72 10.1882 10.9541 10.9541C10.1882 11.7199 9.05394 12 7.63672 12H4.36426C2.94714 12 1.81283 11.7197 1.04688 10.9541C0.280997 10.1882 6.04321e-05 9.05391 0 7.63672V4.36426C0 2.94692 0.28099 1.81283 1.04688 1.04688C1.81284 0.280915 2.94686 0 4.36426 0H5.45508ZM11.4541 0C11.7553 2.20143e-05 11.999 0.244672 11.999 0.545898V3.16406C11.9988 3.46509 11.7552 3.70896 11.4541 3.70898C11.1532 3.70873 10.9084 3.46495 10.9082 3.16406V1.8623L6.93066 5.83984C6.71766 6.05283 6.37218 6.05283 6.15918 5.83984C5.94657 5.62681 5.94632 5.28124 6.15918 5.06836L10.1357 1.0918H8.83594C8.53504 1.09154 8.29025 0.846803 8.29004 0.545898C8.29004 0.244816 8.53491 0.000254588 8.83594 0H11.4541Z",
+			fill: "currentColor"
+		})
+	});
+}
+//#endregion
+//#region src/components/icons/WarningIcon.tsx
+function WarningIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5ZM8.10352 10.207C8.82025 10.2071 9.23531 10.6346 9.23535 11.3262C9.23535 12.0304 8.82028 12.4579 8.10352 12.458C7.36167 12.4579 6.97168 12.0304 6.97168 11.3262C6.97172 10.6346 7.36171 10.2072 8.10352 10.207ZM8.84766 3.54102C9.01311 3.54121 9.14736 3.67535 9.14746 3.84082V4.74805L8.84375 8.37012C8.83069 8.52552 8.6999 8.64551 8.54395 8.64551H7.62891C7.47133 8.64523 7.34074 8.52251 7.33008 8.36523L7.08496 4.74805V3.84082C7.08507 3.67533 7.2193 3.54119 7.38477 3.54102H8.84766Z",
+			fill: "currentColor"
+		})
+	});
+}
+//#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;
+}
+.Banner_inapp__1gnumzi9 {
+  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;
+}
+.Banner_inappHeader__1gnumzia {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.Banner_inappIconWrapper__1gnumzib {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+}
+.Banner_inappTitle__1gnumzic {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 26px;
+  color: var(--text-onAction__pbq4ak6);
+}
+.Banner_inappDescription__1gnumzid {
+  font-size: 14px;
+  color: var(--text-onAction__pbq4ak6);
+  line-height: 22px;
+  opacity: 0.96;
+}
+.Banner_inappCta__1gnumzie {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #2BB2FF;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.Banner_inappCta__1gnumzie:focus-visible {
+  outline: 2px solid #2BB2FF;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+.Banner_inappClose__1gnumzif {
+  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);
+}
+.Banner_inappClose__1gnumzif:focus-visible {
+  outline: 2px solid #ffffff;
+  outline-offset: 2px;
+}`;
+//#endregion
+//#region src/components/Banner/Banner.css.ts
+var iconSvg = "Banner_iconSvg__1gnumzi2";
+var inapp = "Banner_inapp__1gnumzi9 reset_base__1831jhd0 Banner_rootBase__1gnumzi1";
+var inappClose = "Banner_inappClose__1gnumzif reset_element_button__1831jhd6 reset_fieldAppearance__1831jhd2 reset_focusRing__1831jhd1";
+var inappCta = "Banner_inappCta__1gnumzie reset_element_button__1831jhd6 reset_fieldAppearance__1831jhd2 reset_focusRing__1831jhd1";
+var inappDescription = "Banner_inappDescription__1gnumzid reset_base__1831jhd0";
+var inappHeader = "Banner_inappHeader__1gnumzia";
+var inappIconWrapper = "Banner_inappIconWrapper__1gnumzib";
+var inappTitle = "Banner_inappTitle__1gnumzic reset_base__1831jhd0";
+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$2 + cssSource$3 + cssSource$4 + cssSource$1;
+//#endregion
+//#region src/components/Banner/Banner.tsx
+/**
+* Auto-detecting notification banner component.
+*
+* Renders an inline banner on the merchant page with one of two distinct
+* visual styles depending on the detected mode:
+*
+* - **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 + vanilla-extract styles from `@frak-labs/design-system`.
+*
+* @group components
+*
+* @example
+* Basic usage (auto-detects mode):
+* ```html
+* <frak-banner></frak-banner>
+* ```
+*
+* @example
+* With a custom class:
+* ```html
+* <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, 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, cssSource);
+	const [dismissed, setDismissed] = useState(false);
+	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 (isPreview || mode === "inapp") return;
+		const handler = () => setMode("referral");
+		window.addEventListener(REFERRAL_SUCCESS_EVENT, handler);
+		return () => window.removeEventListener(REFERRAL_SUCCESS_EVENT, handler);
+	}, [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 bannerConfig = placement?.components?.banner;
+	const texts = useMemo(() => {
+		if (mode === "referral") {
+			const defaultTitle = reward ? `Earn ${reward} on purchases on this site` : "You've been referred!";
+			return {
+				title: propReferralTitle ?? bannerConfig?.referralTitle ?? defaultTitle,
+				description: propReferralDescription ?? bannerConfig?.referralDescription ?? "Earn rewards after your purchase via the Frak partner app.",
+				cta: propReferralCta ?? bannerConfig?.referralCta ?? "Got it"
+			};
+		}
+		return {
+			title: propInappTitle ?? bannerConfig?.inappTitle ?? "Open in your browser",
+			description: propInappDescription ?? bannerConfig?.inappDescription ?? "For a better experience and to earn your rewards, open this page in your default browser.",
+			cta: propInappCta ?? bannerConfig?.inappCta ?? "Open browser"
+		};
+	}, [
+		mode,
+		reward,
+		bannerConfig,
+		propReferralTitle,
+		propReferralDescription,
+		propReferralCta,
+		propInappTitle,
+		propInappDescription,
+		propInappCta
+	]);
+	if (!mode || !isPreview && (!shouldRender || isHidden || dismissed)) return null;
+	const bannerClass = [
+		mode === "inapp" ? inapp : referral,
+		"frak-banner",
+		`frak-banner--${mode}`,
+		classname
+	].filter(Boolean).join(" ");
+	if (mode === "inapp") return /* @__PURE__ */ jsxs("div", {
+		class: bannerClass,
+		role: "alert",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				class: inappHeader,
+				children: [/* @__PURE__ */ jsx("span", {
+					class: `${inappIconWrapper} frak-banner__icon`,
+					children: /* @__PURE__ */ jsx(WarningIcon, {})
+				}), /* @__PURE__ */ jsx("p", {
+					class: `${inappTitle} frak-banner__title`,
+					children: texts.title
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				class: `${inappDescription} frak-banner__description`,
+				children: texts.description
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				class: `${inappCta} frak-banner__cta`,
+				onClick: handleAction,
+				children: [texts.cta, /* @__PURE__ */ jsx(ExternalLinkIcon, {})]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				class: `${inappClose} frak-banner__close`,
+				onClick: handleDismiss,
+				"aria-label": "Dismiss",
+				children: /* @__PURE__ */ jsx(CloseIcon, {})
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		class: bannerClass,
+		role: "alert",
+		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: `${referralDescription} frak-banner__description`,
+					children: texts.description
+				}),
+				/* @__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", [
+	"placement",
+	"classname",
+	"interaction",
+	"referralTitle",
+	"referralDescription",
+	"referralCta",
+	"inappTitle",
+	"inappDescription",
+	"inappCta",
+	"preview",
+	"previewMode"
+], { shadow: false });
+//#endregion
+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
 /**
@@ -7,6 +7,7 @@ import * as preact from "preact";
  * @inline
  */
 type ButtonShareProps = {
+  placement?: string;
   /**
    * Text to display on the button
    *  - To specify where the reward should be displayed, use the placeholder `{REWARD}`, e.g. `Share and earn up to \{REWARD\}!`
@@ -31,10 +32,10 @@ type ButtonShareProps = {
    */
   targetInteraction?: InteractionTypeKey;
   /**
-   * Do we display the wallet modal instead of the share modal?
-   * @defaultValue `false`
+   * Which UI to open on click
+   * @defaultValue `"embedded-wallet"`
    */
-  showWallet?: boolean;
+  clickAction?: "embedded-wallet" | "share-modal" | "sharing-page";
 };
 //#endregion
 //#region src/components/ButtonShare/ButtonShare.d.ts
@@ -80,13 +81,14 @@ type ButtonShareProps = {
  * @see {@link @frak-labs/core-sdk!actions.getMerchantInformation | `getMerchantInformation()`} for more info about the estimated reward fetching
  */
 declare function ButtonShare({
+  placement: placementId,
   text,
   classname,
   useReward: rawUseReward,
   noRewardText,
   targetInteraction,
-  showWallet: rawShowWallet
-}: ButtonShareProps): preact.JSX.Element;
+  clickAction: rawClickAction
+}: ButtonShareProps): _$preact.JSX.Element | null;
 //#endregion
 //#region src/components/ButtonShare/index.d.ts
 /**