@frak-labs/components 1.0.3-beta.7dfd3480 → 1.0.3-beta.9d4f564a

package/dist/banner.d.ts

@@ -1,116 +0,0 @@
-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

@@ -1,466 +0,0 @@
-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-gbuSWvRx.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-c28NnqJ7.js";
-import { isInAppBrowser, redirectToExternalBrowser, trackEvent } from "@frak-labs/core-sdk";
-import { REFERRAL_SUCCESS_EVENT, getMergeToken } from "@frak-labs/core-sdk/actions";
-import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
-import { jsx, jsxs } from "preact/jsx-runtime";
-//#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__ */ 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__ */ 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("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);
-  border: 1px solid var(--border-default__pbq4akv);
-  border-radius: 12px;
-}
-.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$3 + 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;
-	});
-	const trackedImpressionModeRef = useRef(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 || dismissed) return;
-		if (trackedImpressionModeRef.current === mode) return;
-		if (!isClientReady) return;
-		trackEvent(window.FrakSetup?.client, "banner_impression", {
-			placement: placementId,
-			variant: mode,
-			has_reward: mode === "referral" ? Boolean(reward) : void 0
-		});
-		trackedImpressionModeRef.current = mode;
-	}, [
-		mode,
-		dismissed,
-		isClientReady,
-		isPreview,
-		placementId
-	]);
-	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;
-		trackEvent(window.FrakSetup?.client, "banner_resolved", {
-			placement: placementId,
-			variant: mode ?? "referral",
-			outcome: "clicked"
-		});
-		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,
-		placementId
-	]);
-	const handleDismiss = useCallback(() => {
-		if (isPreview) return;
-		trackEvent(window.FrakSetup?.client, "banner_resolved", {
-			placement: placementId,
-			variant: mode ?? "referral",
-			outcome: "dismissed"
-		});
-		setDismissed(true);
-	}, [
-		isPreview,
-		mode,
-		placementId
-	]);
-	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!";
-			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 = [
-		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: `${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,118 +0,0 @@
-import { InteractionTypeKey } from "@frak-labs/core-sdk";
-import * as _$preact from "preact";
-
-//#region src/components/ButtonShare/types.d.ts
-/**
- * The props type for {@link ButtonShare}.
- * @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\}!`
-   * @defaultValue `"Share and earn!"`
-   */
-  text?: string;
-  /**
-   * Classname to apply to the button
-   */
-  classname?: string;
-  /**
-   * Do we display the reward on the share modal?
-   * @defaultValue `false`
-   */
-  useReward?: boolean;
-  /**
-   * Fallback text if the reward isn't found
-   */
-  noRewardText?: string;
-  /**
-   * Target interaction behind this sharing action (will be used to get the right reward to display)
-   */
-  targetInteraction?: InteractionTypeKey;
-  /**
-   * 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" | "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,
-   * and no-ops the click handler so merchants can see the final layout with
-   * their configured copy even when no Frak client is initialized.
-   */
-  preview?: string;
-};
-//#endregion
-//#region src/components/ButtonShare/ButtonShare.d.ts
-/**
- * Button to share the current page
- *
- * @param args
- * @returns The share button with `<button>` tag
- *
- * @group components
- *
- * @example
- * Basic usage:
- * ```html
- * <frak-button-share></frak-button-share>
- * ```
- *
- * @example
- * Using a custom text:
- * ```html
- * <frak-button-share text="Share and earn!"></frak-button-share>
- * ```
- *
- * @example
- * Using a custom class:
- * ```html
- * <frak-button-share classname="button button-primary"></frak-button-share>
- * ```
- *
- * @example
- * Using reward information and fallback text:
- * ```html
- * <frak-button-share use-reward text="Share and earn up to {REWARD}!" no-reward-text="Share and earn!"></frak-button-share>
- * ```
- *
- * @example
- * Using reward information for specific reward and fallback text:
- * ```html
- * <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.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({
-  placement: placementId,
-  text,
-  classname,
-  useReward: rawUseReward,
-  noRewardText,
-  targetInteraction,
-  clickAction: rawClickAction,
-  preview
-}: ButtonShareProps): _$preact.JSX.Element | null;
-//#endregion
-//#region src/components/ButtonShare/index.d.ts
-/**
- * Custom element interface for `<frak-button-share>`.
- * Combines standard {@link HTMLElement} with {@link ButtonShareProps}.
- */
-interface ButtonShareElement extends HTMLElement, ButtonShareProps {}
-declare global {
-  interface HTMLElementTagNameMap {
-    "frak-button-share": ButtonShareElement;
-  }
-}
-//#endregion
-export { ButtonShare, ButtonShareElement };