@frak-labs/components 0.0.23-beta.afa252b0 → 0.0.23-beta.c7e026e5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,64 +1,76 @@
1
- import type { FullInteractionTypesKey } from '@frak-labs/core-sdk';
2
- import { JSX } from 'preact';
3
-
4
- /**
5
- * Button to open wallet modal
6
- *
7
- * @param args
8
- * @returns The wallet button with `<button>` tag
9
- *
10
- * @group components
11
- *
12
- * @example
13
- * Basic usage:
14
- * ```html
15
- * <frak-button-wallet></frak-button-wallet>
16
- * ```
17
- *
18
- * @example
19
- * Using a custom class:
20
- * ```html
21
- * <frak-button-wallet classname="button button-primary"></frak-button-wallet>
22
- * ```
23
- *
24
- * @example
25
- * Using reward information:
26
- * ```html
27
- * <frak-button-wallet use-reward></frak-button-wallet>
28
- * ```
29
- *
30
- * @example
31
- * Using reward information for specific reward:
32
- * ```html
33
- * <frak-button-wallet use-reward target-interaction="retail.customerMeeting"></frak-button-wallet>
34
- * ```
35
- *
36
- * @see {@link @frak-labs/core-sdk!actions.modalBuilder | `modalBuilder()`} for more info about the modal display
37
- * @see {@link @frak-labs/core-sdk!actions.getProductInformation | `getProductInformation()`} for more info about the estimated reward fetching
38
- */
39
- export declare function ButtonWallet({ classname, useReward: rawUseReward, targetInteraction, }: ButtonWalletProps): JSX.Element;
40
-
41
- export declare interface ButtonWalletElement extends HTMLElement, ButtonWalletProps {
42
- }
43
-
44
- /**
45
- * The props type for {@link ButtonWallet}.
46
- * @inline
47
- */
48
- declare type ButtonWalletProps = {
49
- /**
50
- * Classname to apply to the button
51
- */
52
- classname?: string;
53
- /**
54
- * Do we display the reward on the button?
55
- * @defaultValue `false`
56
- */
57
- useReward?: boolean;
58
- /**
59
- * Target interaction behind this sharing action (will be used to get the right reward to display)
60
- */
61
- targetInteraction?: FullInteractionTypesKey;
62
- };
63
-
64
- export { }
1
+ import { FullInteractionTypesKey } from "@frak-labs/core-sdk";
2
+ import * as preact0 from "preact";
3
+
4
+ //#region src/components/ButtonWallet/types.d.ts
5
+
6
+ /**
7
+ * The props type for {@link ButtonWallet}.
8
+ * @inline
9
+ */
10
+ type ButtonWalletProps = {
11
+ /**
12
+ * Classname to apply to the button
13
+ */
14
+ classname?: string;
15
+ /**
16
+ * Do we display the reward on the button?
17
+ * @defaultValue `false`
18
+ */
19
+ useReward?: boolean;
20
+ /**
21
+ * Target interaction behind this sharing action (will be used to get the right reward to display)
22
+ */
23
+ targetInteraction?: FullInteractionTypesKey;
24
+ };
25
+ //#endregion
26
+ //#region src/components/ButtonWallet/ButtonWallet.d.ts
27
+ /**
28
+ * Button to open wallet modal
29
+ *
30
+ * @param args
31
+ * @returns The wallet button with `<button>` tag
32
+ *
33
+ * @group components
34
+ *
35
+ * @example
36
+ * Basic usage:
37
+ * ```html
38
+ * <frak-button-wallet></frak-button-wallet>
39
+ * ```
40
+ *
41
+ * @example
42
+ * Using a custom class:
43
+ * ```html
44
+ * <frak-button-wallet classname="button button-primary"></frak-button-wallet>
45
+ * ```
46
+ *
47
+ * @example
48
+ * Using reward information:
49
+ * ```html
50
+ * <frak-button-wallet use-reward></frak-button-wallet>
51
+ * ```
52
+ *
53
+ * @example
54
+ * Using reward information for specific reward:
55
+ * ```html
56
+ * <frak-button-wallet use-reward target-interaction="retail.customerMeeting"></frak-button-wallet>
57
+ * ```
58
+ *
59
+ * @see {@link @frak-labs/core-sdk!actions.modalBuilder | `modalBuilder()`} for more info about the modal display
60
+ * @see {@link @frak-labs/core-sdk!actions.getProductInformation | `getProductInformation()`} for more info about the estimated reward fetching
61
+ */
62
+ declare function ButtonWallet({
63
+ classname,
64
+ useReward: rawUseReward,
65
+ targetInteraction
66
+ }: ButtonWalletProps): preact0.JSX.Element;
67
+ //#endregion
68
+ //#region src/components/ButtonWallet/index.d.ts
69
+ interface ButtonWalletElement extends HTMLElement, ButtonWalletProps {}
70
+ declare global {
71
+ interface HTMLElementTagNameMap {
72
+ "frak-button-wallet": ButtonWalletElement;
73
+ }
74
+ }
75
+ //#endregion
76
+ export { ButtonWallet, ButtonWalletElement };
@@ -1 +1,109 @@
1
- import e from"preact-custom-element";import{formatAmount as t,getCurrencyAmountKey as n,setupClient as o,trackEvent as r}from"@frak-labs/core-sdk";import{displayEmbeddedWallet as i,getProductInformation as a,modalBuilder as l,referralInteraction as u}from"@frak-labs/core-sdk/actions";import{jsx as c,jsxs as _}from"preact/jsx-runtime";import{useCallback as s,useEffect as f,useMemo as d,useState as p}from"preact/hooks";import{cx as v}from"class-variance-authority";import{Component as m,Fragment as h,createElement as w,options as k,toChildArray as y}from"preact";import*as g from"@frak-labs/core-sdk/bundle";function b(){if(!window.FrakSetup?.client)return void console.error("Frak client not found");"vibrate"in navigator?navigator.vibrate(10):console.log("Vibration not supported"),i(window.FrakSetup.client,window.FrakSetup?.modalWalletConfig??{})}let S="frakClientReady";function F(e,t){if(window.FrakSetup?.client&&"add"===e)return void t();("add"===e?window.addEventListener:window.removeEventListener)(S,t,!1)}async function C(e){console.log("referral",await u(e,{modalConfig:window.FrakSetup?.modalWalletConfig}))}async function P(){if(window.FrakSetup.core=g,!(window.frakSetupInProgress?(console.log("[Frak SDK] Initialization already in progress"),!1):window.FrakSetup?.client?(console.log("[Frak SDK] Client already initialized"),!1):!!window.FrakSetup?.config||(console.error("[Frak SDK] Configuration not found. Please ensure window.FrakSetup.config is set."),!1)))return;if(console.log("[Frak SDK] Starting initialization"),window.frakSetupInProgress=!0,!window.FrakSetup.config){console.error("[Frak SDK] Configuration not found"),window.frakSetupInProgress=!1;return}let e=await o({config:window.FrakSetup.config});if(!e){console.error("[Frak SDK] Failed to create client"),window.frakSetupInProgress=!1;return}window.FrakSetup.client=e,console.log("[Frak SDK] Client initialized successfully");let t=new CustomEvent(S);window.dispatchEvent(t),window.modalBuilderSteps=l(e,window.FrakSetup?.modalConfig??{}),C(e),window.frakSetupInProgress=!1,function(){let e=new URLSearchParams(window.location.search).get("frakAction");e&&"share"===e&&(console.log("[Frak SDK] Auto open query param found"),b())}()}async function E({targetInteraction:e}){let o=window.FrakSetup?.client;if(!o)return void console.warn("Frak client not ready yet");let{maxReferrer:r,rewards:i}=await a(o);if(!r)return;let l=n(o.config.metadata?.currency),u=Math.round(r[l]);if(e){let t=i.filter(t=>t.interactionTypeKey===e).map(e=>e.referrer[l]).reduce((e,t)=>t>e?t:e,0);t>0&&(u=Math.round(t))}return t(u,o.config.metadata?.currency)}let O={button:"button-aPZnsb",button__left:"button__left-fQJUnK",button__right:"button__right-TkFFFK",reward:"reward-w5dm3K"};function x(e,t){for(var n in e)if("__source"!==n&&!(n in t))return!0;for(var o in t)if("__source"!==o&&e[o]!==t[o])return!0;return!1}function D(e,t){this.props=e,this.context=t}(D.prototype=new m).isPureReactComponent=!0,D.prototype.shouldComponentUpdate=function(e,t){return x(this.props,e)||x(this.state,t)};var K=k.__b;k.__b=function(e){e.type&&e.type.__f&&e.ref&&(e.props.ref=e.ref,e.ref=null),K&&K(e)},"undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref");var R=k.__e;k.__e=function(e,t,n,o){if(e.then){for(var r,i=t;i=i.__;)if((r=i.__c)&&r.__c)return null==t.__e&&(t.__e=n.__e,t.__k=n.__k),r.__c(e,t)}R(e,t,n,o)};var L=k.unmount;function U(){this.__u=0,this.o=null,this.__b=null}function N(e){var t=e.__.__c;return t&&t.__a&&t.__a(e)}function V(){this.i=null,this.l=null}k.unmount=function(e){var t=e.__c;t&&t.__R&&t.__R(),t&&32&e.__u&&(e.type=null),L&&L(e)},(U.prototype=new m).__c=function(e,t){var n=t.__c,o=this;null==o.o&&(o.o=[]),o.o.push(n);var r=N(o.__v),i=!1,a=function(){i||(i=!0,n.__R=null,r?r(l):l())};n.__R=a;var l=function(){if(!--o.__u){if(o.state.__a){var e,t=o.state.__a;o.__v.__k[0]=function e(t,n,o){return t&&o&&(t.__v=null,t.__k=t.__k&&t.__k.map(function(t){return e(t,n,o)}),t.__c&&t.__c.__P===n&&(t.__e&&o.appendChild(t.__e),t.__c.__e=!0,t.__c.__P=o)),t}(t,t.__c.__P,t.__c.__O)}for(o.setState({__a:o.__b=null});e=o.o.pop();)e.forceUpdate()}};o.__u++||32&t.__u||o.setState({__a:o.__b=o.__v.__k[0]}),e.then(a,a)},U.prototype.componentWillUnmount=function(){this.o=[]},U.prototype.render=function(e,t){if(this.__b){if(this.__v.__k){var n=document.createElement("div"),o=this.__v.__k[0].__c;this.__v.__k[0]=function e(t,n,o){return t&&(t.__c&&t.__c.__H&&(t.__c.__H.__.forEach(function(e){"function"==typeof e.__c&&e.__c()}),t.__c.__H=null),null!=(t=function(e,t){for(var n in t)e[n]=t[n];return e}({},t)).__c&&(t.__c.__P===o&&(t.__c.__P=n),t.__c.__e=!0,t.__c=null),t.__k=t.__k&&t.__k.map(function(t){return e(t,n,o)})),t}(this.__b,n,o.__O=o.__P)}this.__b=null}var r=t.__a&&w(h,null,e.fallback);return r&&(r.__u&=-33),[w(h,null,t.__a?null:e.children),r]};var W=function(e,t,n){if(++n[1]===n[0]&&e.l.delete(t),e.props.revealOrder&&("t"!==e.props.revealOrder[0]||!e.l.size))for(n=e.i;n;){for(;n.length>3;)n.pop()();if(n[1]<n[0])break;e.i=n=n[2]}};(V.prototype=new m).__a=function(e){var t=this,n=N(t.__v),o=t.l.get(e);return o[0]++,function(r){var i=function(){t.props.revealOrder?(o.push(r),W(t,e,o)):r()};n?n(i):i()}},V.prototype.render=function(e){this.i=null,this.l=new Map;var t=y(e.children);e.revealOrder&&"b"===e.revealOrder[0]&&t.reverse();for(var n=t.length;n--;)this.l.set(t[n],this.i=[1,0,this.i]);return e.children},V.prototype.componentDidUpdate=V.prototype.componentDidMount=function(){var e=this;this.l.forEach(function(t,n){W(e,n,t)})};var A="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,M=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,z=/^on(Ani|Tra|Tou|BeforeInp|Compo)/,H=/[A-Z0-9]/g,I="undefined"!=typeof document;m.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(e){Object.defineProperty(m.prototype,e,{configurable:!0,get:function(){return this["UNSAFE_"+e]},set:function(t){Object.defineProperty(this,e,{configurable:!0,writable:!0,value:t})}})});var j=k.event;function B(){}function T(){return this.cancelBubble}function Z(){return this.defaultPrevented}k.event=function(e){return j&&(e=j(e)),e.persist=B,e.isPropagationStopped=T,e.isDefaultPrevented=Z,e.nativeEvent=e};var $={enumerable:!1,configurable:!0,get:function(){return this.class}},q=k.vnode;k.vnode=function(e){"string"==typeof e.type&&function(e){var t=e.props,n=e.type,o={},r=-1===n.indexOf("-");for(var i in t){var a=t[i];if(!("value"===i&&"defaultValue"in t&&null==a||I&&"children"===i&&"noscript"===n||"class"===i||"className"===i)){var l,u=i.toLowerCase();"defaultValue"===i&&"value"in t&&null==t.value?i="value":"download"===i&&!0===a?a="":"translate"===u&&"no"===a?a=!1:"o"===u[0]&&"n"===u[1]?"ondoubleclick"===u?i="ondblclick":"onchange"!==u||"input"!==n&&"textarea"!==n||(l=t.type,("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/:/fil|che|ra/).test(l))?"onfocus"===u?i="onfocusin":"onblur"===u?i="onfocusout":z.test(i)&&(i=u):u=i="oninput":r&&M.test(i)?i=i.replace(H,"-$&").toLowerCase():null===a&&(a=void 0),"oninput"===u&&o[i=u]&&(i="oninputCapture"),o[i]=a}}"select"==n&&o.multiple&&Array.isArray(o.value)&&(o.value=y(t.children).forEach(function(e){e.props.selected=-1!=o.value.indexOf(e.props.value)})),"select"==n&&null!=o.defaultValue&&(o.value=y(t.children).forEach(function(e){e.props.selected=o.multiple?-1!=o.defaultValue.indexOf(e.props.value):o.defaultValue==e.props.value})),t.class&&!t.className?(o.class=t.class,Object.defineProperty(o,"className",$)):(t.className&&!t.class||t.class&&t.className)&&(o.class=o.className=t.className),e.props=o}(e),e.$$typeof=A,q&&q(e)};var J=k.__r;k.__r=function(e){J&&J(e),e.__c};var Q=k.diffed;k.diffed=function(e){Q&&Q(e);var t=e.props,n=e.__e;null!=n&&"textarea"===e.type&&"value"in t&&t.value!==n.value&&(n.value=null==t.value?"":t.value)};let G=e=>c("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"none",viewBox:"0 0 28 28",...e,children:c("path",{stroke:"#fff",strokeLinecap:"round",strokeLinejoin:"round",d:"M23.143 14v11.428H4.857V14M14 25.428V8.286m0 0H8.857a2.857 2.857 0 0 1 0-5.715c4 0 5.143 5.715 5.143 5.715m0 0h5.143a2.857 2.857 0 1 0 0-5.715c-4 0-5.143 5.715-5.143 5.715m-11.429 0h22.857V14H2.571z"})});function X({classname:e="",useReward:t,targetInteraction:n}){let o=d(()=>void 0!==t,[t]),{isClientReady:i}=function(){let[e,t]=p(!0),n=s(()=>{t(!1)},[]);return f(()=>(F("add",n),()=>F("remove",n)),[n]),{isClientReady:!e}}(),{reward:a}=function(e,t){let[n,o]=p(void 0);return f(()=>{e&&E({targetInteraction:t}).then(e=>{e&&o(e)})},[e,t]),{reward:n}}(o&&i,n),[l,u]=p("right");return f(()=>{u(window.FrakSetup?.modalWalletConfig?.metadata?.position??"right")},[]),_("button",{type:"button","aria-label":"Open wallet",class:v(O.button,"left"===l?O.button__left:O.button__right,e,"override"),disabled:!i,onClick:()=>{r(window.FrakSetup.client,"wallet_button_clicked"),b()},children:[c(G,{}),a&&c("span",{className:O.reward,children:a})]})}!function(t,n,o=[],r={shadow:!1}){"undefined"!=typeof window&&("complete"===document.readyState||"interactive"===document.readyState?setTimeout(P,1):document.addEventListener?document.addEventListener("DOMContentLoaded",P):document.attachEvent("onreadystatechange",()=>{"complete"===document.readyState&&P()}),customElements.get(n)||e(t,n,o,r))}(X,"frak-button-wallet",[],{shadow:!1});export{X as ButtonWallet};
1
+ import { a as openWalletModal, n as useClientReady, r as registerWebComponent, t as useReward } from "./useReward-1io3tiHR.js";
2
+ import { trackEvent } from "@frak-labs/core-sdk";
3
+ import { cx } from "class-variance-authority";
4
+ import { useEffect, useMemo, useState } from "preact/hooks";
5
+ import { jsx, jsxs } from "preact/jsx-runtime";
6
+
7
+ //#region src/components/ButtonWallet/assets/GiftIcon.tsx
8
+ function GiftIcon(props) {
9
+ return /* @__PURE__ */ jsxs("svg", {
10
+ fill: "none",
11
+ height: "1em",
12
+ viewBox: "0 0 28 28",
13
+ width: "1em",
14
+ xmlns: "http://www.w3.org/2000/svg",
15
+ ...props,
16
+ children: [/* @__PURE__ */ jsx("title", { children: "Gift icon" }), /* @__PURE__ */ jsx("path", {
17
+ d: "m23.1427 13.9999v11.4285h-18.2857v-11.4285m9.1429 11.4285v-17.14282m0 0h-5.1429c-.75776 0-1.48448-.30102-2.0203-.83684s-.83684-1.26255-.83684-2.02031.30102-1.48448.83684-2.0203 1.26254-.83684 2.0203-.83684c4 0 5.1429 5.71429 5.1429 5.71429zm0 0h5.1428c.7578 0 1.4845-.30102 2.0203-.83684s.8369-1.26255.8369-2.02031-.3011-1.48448-.8369-2.0203-1.2625-.83684-2.0203-.83684c-4 0-5.1428 5.71429-5.1428 5.71429zm-11.42861 0h22.85711v5.71432h-22.85711z",
18
+ stroke: "#fff",
19
+ "stroke-linecap": "round",
20
+ "stroke-linejoin": "round"
21
+ })]
22
+ });
23
+ }
24
+
25
+ //#endregion
26
+ //#region src/components/ButtonWallet/ButtonWallet.module.css?css_module
27
+ const classes = {
28
+ "button__right": "Kl62ia_button__right",
29
+ "reward": "Kl62ia_reward",
30
+ "button": "Kl62ia_button",
31
+ "button__left": "Kl62ia_button__left"
32
+ };
33
+ var ButtonWallet_module_default = classes;
34
+ const _button__right0 = classes["button__right"];
35
+ const _reward0 = classes["reward"];
36
+ const _button0 = classes["button"];
37
+ const _button__left0 = classes["button__left"];
38
+
39
+ //#endregion
40
+ //#region src/components/ButtonWallet/ButtonWallet.tsx
41
+ /**
42
+ * Button to open wallet modal
43
+ *
44
+ * @param args
45
+ * @returns The wallet button with `<button>` tag
46
+ *
47
+ * @group components
48
+ *
49
+ * @example
50
+ * Basic usage:
51
+ * ```html
52
+ * <frak-button-wallet></frak-button-wallet>
53
+ * ```
54
+ *
55
+ * @example
56
+ * Using a custom class:
57
+ * ```html
58
+ * <frak-button-wallet classname="button button-primary"></frak-button-wallet>
59
+ * ```
60
+ *
61
+ * @example
62
+ * Using reward information:
63
+ * ```html
64
+ * <frak-button-wallet use-reward></frak-button-wallet>
65
+ * ```
66
+ *
67
+ * @example
68
+ * Using reward information for specific reward:
69
+ * ```html
70
+ * <frak-button-wallet use-reward target-interaction="retail.customerMeeting"></frak-button-wallet>
71
+ * ```
72
+ *
73
+ * @see {@link @frak-labs/core-sdk!actions.modalBuilder | `modalBuilder()`} for more info about the modal display
74
+ * @see {@link @frak-labs/core-sdk!actions.getProductInformation | `getProductInformation()`} for more info about the estimated reward fetching
75
+ */
76
+ function ButtonWallet({ classname = "", useReward: rawUseReward, targetInteraction }) {
77
+ const shouldUseReward = useMemo(() => rawUseReward !== void 0, [rawUseReward]);
78
+ const { isClientReady } = useClientReady();
79
+ const { reward } = useReward(shouldUseReward && isClientReady, targetInteraction);
80
+ const [position, setPosition] = useState("right");
81
+ /**
82
+ * Setup the position of the button
83
+ */
84
+ useEffect(() => {
85
+ const position$1 = window.FrakSetup?.modalWalletConfig?.metadata?.position;
86
+ setPosition(position$1 ?? "right");
87
+ }, []);
88
+ return /* @__PURE__ */ jsxs("button", {
89
+ type: "button",
90
+ "aria-label": "Open wallet",
91
+ class: cx(ButtonWallet_module_default.button, position === "left" ? ButtonWallet_module_default.button__left : ButtonWallet_module_default.button__right, classname, "override"),
92
+ disabled: !isClientReady,
93
+ onClick: () => {
94
+ trackEvent(window.FrakSetup.client, "wallet_button_clicked");
95
+ openWalletModal();
96
+ },
97
+ children: [/* @__PURE__ */ jsx(GiftIcon, {}), reward && /* @__PURE__ */ jsx("span", {
98
+ className: ButtonWallet_module_default.reward,
99
+ children: reward
100
+ })]
101
+ });
102
+ }
103
+
104
+ //#endregion
105
+ //#region src/components/ButtonWallet/index.ts
106
+ registerWebComponent(ButtonWallet, "frak-button-wallet", [], { shadow: false });
107
+
108
+ //#endregion
109
+ export { ButtonWallet };
@@ -0,0 +1,239 @@
1
+ import register from "preact-custom-element";
2
+ import { formatAmount, getCurrencyAmountKey, setupClient } from "@frak-labs/core-sdk";
3
+ import * as coreSdk from "@frak-labs/core-sdk/bundle";
4
+ import { displayEmbeddedWallet, getProductInformation, modalBuilder, referralInteraction } from "@frak-labs/core-sdk/actions";
5
+ import { useCallback, useEffect, useState } from "preact/hooks";
6
+
7
+ //#region ../../packages/ui/utils/onDocumentReady.ts
8
+ /**
9
+ * When the document is ready, run the callback
10
+ * @param callback
11
+ */
12
+ function onDocumentReady(callback) {
13
+ if (document.readyState === "complete" || document.readyState === "interactive") setTimeout(callback, 1);
14
+ else if (document.addEventListener) document.addEventListener("DOMContentLoaded", callback);
15
+ else document.attachEvent("onreadystatechange", () => {
16
+ if (document.readyState === "complete") callback();
17
+ });
18
+ }
19
+
20
+ //#endregion
21
+ //#region src/utils/safeVibrate.ts
22
+ /**
23
+ * Attempt to vibrate the device
24
+ */
25
+ function safeVibrate() {
26
+ if ("vibrate" in navigator) navigator.vibrate(10);
27
+ else console.log("Vibration not supported");
28
+ }
29
+
30
+ //#endregion
31
+ //#region src/components/ButtonWallet/utils.ts
32
+ /**
33
+ * Open the wallet modal
34
+ *
35
+ * @description
36
+ * This function will open the wallet modal with the configuration provided in the `window.FrakSetup.modalWalletConfig` object.
37
+ */
38
+ function openWalletModal() {
39
+ if (!window.FrakSetup?.client) {
40
+ console.error("Frak client not found");
41
+ return;
42
+ }
43
+ safeVibrate();
44
+ displayEmbeddedWallet(window.FrakSetup.client, window.FrakSetup?.modalWalletConfig ?? {});
45
+ }
46
+
47
+ //#endregion
48
+ //#region src/utils/clientReady.ts
49
+ const CUSTOM_EVENT_NAME = "frakClientReady";
50
+ /**
51
+ * Dispatch a custom event when the Frak client is ready
52
+ */
53
+ function dispatchClientReadyEvent() {
54
+ const event = new CustomEvent(CUSTOM_EVENT_NAME);
55
+ window.dispatchEvent(event);
56
+ }
57
+ /**
58
+ * Add or remove an event listener for when the Frak client is ready
59
+ * @param action
60
+ * @param callback
61
+ */
62
+ function onClientReady(action, callback) {
63
+ if (window.FrakSetup?.client && action === "add") {
64
+ callback();
65
+ return;
66
+ }
67
+ (action === "add" ? window.addEventListener : window.removeEventListener)(CUSTOM_EVENT_NAME, callback, false);
68
+ }
69
+
70
+ //#endregion
71
+ //#region src/utils/setup.ts
72
+ /**
73
+ * Setup the modal config
74
+ * @param client
75
+ */
76
+ function setupModalConfig(client) {
77
+ window.modalBuilderSteps = modalBuilder(client, window.FrakSetup?.modalConfig ?? {});
78
+ }
79
+ /**
80
+ * Setup the referral
81
+ * @param client
82
+ */
83
+ async function setupReferral(client) {
84
+ const referral = await referralInteraction(client, { modalConfig: window.FrakSetup?.modalWalletConfig });
85
+ console.log("referral", referral);
86
+ }
87
+ /**
88
+ * Return the modal builder steps
89
+ */
90
+ function getModalBuilderSteps() {
91
+ if (!window.modalBuilderSteps) throw new Error("modalBuilderSteps not found");
92
+ return window.modalBuilderSteps;
93
+ }
94
+
95
+ //#endregion
96
+ //#region src/utils/initFrakSdk.ts
97
+ /**
98
+ * Initializes the Frak SDK client and sets up necessary configurations.
99
+ * This function handles the one-time setup of the Frak client and related features.
100
+ *
101
+ * @returns {Promise<void>}
102
+ */
103
+ async function initFrakSdk() {
104
+ window.FrakSetup.core = coreSdk;
105
+ if (!preChecks()) return;
106
+ console.log("[Frak SDK] Starting initialization");
107
+ window.frakSetupInProgress = true;
108
+ if (!window.FrakSetup.config) {
109
+ console.error("[Frak SDK] Configuration not found");
110
+ window.frakSetupInProgress = false;
111
+ return;
112
+ }
113
+ const client = await setupClient({ config: window.FrakSetup.config });
114
+ if (!client) {
115
+ console.error("[Frak SDK] Failed to create client");
116
+ window.frakSetupInProgress = false;
117
+ return;
118
+ }
119
+ window.FrakSetup.client = client;
120
+ console.log("[Frak SDK] Client initialized successfully");
121
+ dispatchClientReadyEvent();
122
+ setupModalConfig(client);
123
+ setupReferral(client);
124
+ window.frakSetupInProgress = false;
125
+ handleActionQueryParam();
126
+ }
127
+ /**
128
+ * Pre-checks for the Frak SDK initialization
129
+ */
130
+ function preChecks() {
131
+ if (window.frakSetupInProgress) {
132
+ console.log("[Frak SDK] Initialization already in progress");
133
+ return false;
134
+ }
135
+ if (window.FrakSetup?.client) {
136
+ console.log("[Frak SDK] Client already initialized");
137
+ return false;
138
+ }
139
+ if (!window.FrakSetup?.config) {
140
+ console.error("[Frak SDK] Configuration not found. Please ensure window.FrakSetup.config is set.");
141
+ return false;
142
+ }
143
+ return true;
144
+ }
145
+ /**
146
+ * Check the query param contain params for an auto opening of the frak modal
147
+ */
148
+ function handleActionQueryParam() {
149
+ const frakAction = new URLSearchParams(window.location.search).get("frakAction");
150
+ if (!frakAction) return;
151
+ if (frakAction === "share") {
152
+ console.log("[Frak SDK] Auto open query param found");
153
+ openWalletModal();
154
+ }
155
+ }
156
+
157
+ //#endregion
158
+ //#region src/utils/registerWebComponent.ts
159
+ /**
160
+ * Registers a Preact component as a custom web component
161
+ *
162
+ * @param component - The Preact component to register
163
+ * @param tagName - The custom element tag name (e.g., "frak-button-wallet")
164
+ * @param observedAttributes - Array of attribute names to observe for changes
165
+ * @param options - Registration options (e.g., { shadow: false })
166
+ */
167
+ function registerWebComponent(component, tagName, observedAttributes = [], options = { shadow: false }) {
168
+ if (typeof window !== "undefined") {
169
+ onDocumentReady(initFrakSdk);
170
+ if (!customElements.get(tagName)) register(component, tagName, observedAttributes, options);
171
+ }
172
+ }
173
+
174
+ //#endregion
175
+ //#region src/hooks/useClientReady.ts
176
+ /**
177
+ * Hook to manage client readiness state for the wallet button
178
+ * Handles subscription to client ready events and manages readiness state
179
+ * @returns Object containing the readiness state of the client
180
+ */
181
+ function useClientReady() {
182
+ const [disabled, setDisabled] = useState(true);
183
+ const handleClientReady = useCallback(() => {
184
+ setDisabled(false);
185
+ }, []);
186
+ useEffect(() => {
187
+ onClientReady("add", handleClientReady);
188
+ return () => onClientReady("remove", handleClientReady);
189
+ }, [handleClientReady]);
190
+ return { isClientReady: !disabled };
191
+ }
192
+
193
+ //#endregion
194
+ //#region src/utils/getCurrentReward.ts
195
+ /**
196
+ * Find the estimated reward
197
+ * @param targetInteraction
198
+ * @returns
199
+ */
200
+ async function getCurrentReward({ targetInteraction }) {
201
+ const client = window.FrakSetup?.client;
202
+ if (!client) {
203
+ console.warn("Frak client not ready yet");
204
+ return;
205
+ }
206
+ const { maxReferrer, rewards } = await getProductInformation(client);
207
+ if (!maxReferrer) return;
208
+ const currencyAmountKey = getCurrencyAmountKey(client.config.metadata?.currency);
209
+ let currentReward = Math.round(maxReferrer[currencyAmountKey]);
210
+ if (targetInteraction) {
211
+ const targetReward = rewards.filter((reward) => reward.interactionTypeKey === targetInteraction).map((reward) => reward.referrer[currencyAmountKey]).reduce((acc, reward) => reward > acc ? reward : acc, 0);
212
+ if (targetReward > 0) currentReward = Math.round(targetReward);
213
+ }
214
+ return formatAmount(currentReward, client.config.metadata?.currency);
215
+ }
216
+
217
+ //#endregion
218
+ //#region src/hooks/useReward.ts
219
+ /**
220
+ * Hook to fetch and format the current reward value for a given interaction
221
+ * @param shouldUseReward - Flag to determine if reward should be fetched
222
+ * @param targetInteraction - Optional interaction type to get specific reward for
223
+ * @param currency - The currency to use for the reward (default is "eur")
224
+ * @returns Object containing the formatted reward value in euros
225
+ */
226
+ function useReward(shouldUseReward, targetInteraction) {
227
+ const [reward, setReward] = useState(void 0);
228
+ useEffect(() => {
229
+ if (!shouldUseReward) return;
230
+ getCurrentReward({ targetInteraction }).then((reward$1) => {
231
+ if (!reward$1) return;
232
+ setReward(reward$1);
233
+ });
234
+ }, [shouldUseReward, targetInteraction]);
235
+ return { reward };
236
+ }
237
+
238
+ //#endregion
239
+ export { openWalletModal as a, getModalBuilderSteps as i, useClientReady as n, registerWebComponent as r, useReward as t };
package/package.json CHANGED
@@ -11,7 +11,7 @@
11
11
  "url": "https://twitter.com/QNivelais"
12
12
  }
13
13
  ],
14
- "version": "0.0.23-beta.afa252b0",
14
+ "version": "0.0.23-beta.c7e026e5",
15
15
  "description": "Frak Wallet components, helping any person to interact with the Frak wallet.",
16
16
  "repository": {
17
17
  "url": "https://github.com/frak-id/wallet",
@@ -40,14 +40,33 @@
40
40
  ],
41
41
  "main": "./cdn/components.js",
42
42
  "browser": "./cdn/components.js",
43
+ "exports": {
44
+ "./buttonWallet": {
45
+ "development": "./src/components/ButtonWallet/index.ts",
46
+ "import": "./dist/buttonWallet.js",
47
+ "types": "./dist/buttonWallet.d.ts"
48
+ },
49
+ "./buttonShare": {
50
+ "development": "./src/components/ButtonShare/index.ts",
51
+ "import": "./dist/buttonShare.js",
52
+ "types": "./dist/buttonShare.d.ts"
53
+ },
54
+ "./cdn": {
55
+ "import": "./cdn/components.js"
56
+ },
57
+ "./dist/*": "./dist/*"
58
+ },
43
59
  "scripts": {
44
60
  "lint": "biome lint .",
45
61
  "format:check": "biome check .",
46
62
  "format": "biome check --write .",
47
63
  "clean": "rimraf cdn dist",
48
- "build": "rslib build",
49
- "build:watch": "rslib build --watch",
64
+ "build": "tsdown",
65
+ "build:watch": "tsdown --watch",
50
66
  "typecheck": "tsc --noEmit",
67
+ "test": "vitest",
68
+ "test:ui": "vitest --ui",
69
+ "test:coverage": "vitest --coverage",
51
70
  "prepublish": "bun run lint && bun run build",
52
71
  "publish": "echo 'Publishing components...'"
53
72
  },
@@ -55,19 +74,29 @@
55
74
  "@frak-labs/frame-connector": "0.1.0",
56
75
  "@frak-labs/core-sdk": "0.1.0",
57
76
  "class-variance-authority": "^0.7.1",
58
- "preact": "^10.26.9",
59
- "preact-custom-element": "^4.3.0"
77
+ "preact": "^10.28.0",
78
+ "preact-custom-element": "^4.6.0"
60
79
  },
61
80
  "devDependencies": {
62
- "@rsbuild/plugin-preact": "^1.4.0",
63
- "@rsbuild/plugin-svgr": "^1.2.0",
64
- "@rslib/core": "^0.9.2",
65
- "@types/node": "^24",
81
+ "@bosh-code/tsdown-plugin-inject-css": "^2.0.0",
82
+ "@frak-labs/dev-tooling": "0.0.0",
83
+ "@frak-labs/test-foundation": "0.1.0",
84
+ "@frak-labs/ui": "0.0.0",
85
+ "@preact/preset-vite": "^2.10.2",
86
+ "@rolldown/plugin-node-polyfills": "^1.0.0",
87
+ "@testing-library/jest-dom": "^6.9.1",
88
+ "@testing-library/preact": "^3.2.4",
89
+ "@testing-library/user-event": "^14.6.1",
90
+ "@types/jsdom": "^27.0.0",
91
+ "@types/node": "^24.10.4",
66
92
  "@types/preact-custom-element": "^4.0.4",
93
+ "@vitest/coverage-v8": "^4.0.16",
94
+ "@vitest/ui": "^4.0.16",
95
+ "jsdom": "^27.3.0",
96
+ "tsdown": "^0.18.2",
67
97
  "typescript": "^5",
68
- "@frak-labs/dev-tooling": "0.0.0"
69
- },
70
- "browserslist": [
71
- "extends @frak-labs/browserslist-config"
72
- ]
98
+ "unplugin-lightningcss": "^0.4.4",
99
+ "vite-tsconfig-paths": "^6.0.3",
100
+ "vitest": "^4.0.16"
101
+ }
73
102
  }
@@ -1 +0,0 @@
1
- export const __webpack_ids__=["564"];export const __webpack_modules__={"../../node_modules/preact-custom-element/dist/preact-custom-element.esm.js":function(e,t,n){n.d(t,{Z:()=>a});var _=n("../../node_modules/preact/dist/preact.module.js");function o(){return(o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var _ in n)Object.prototype.hasOwnProperty.call(n,_)&&(e[_]=n[_])}return e}).apply(this,arguments)}var r=["context","children"];function l(e){this.getChildContext=function(){return e.context};var t=e.children,n=function(e,t){if(null==e)return{};var n,_,o={},r=Object.keys(e);for(_=0;_<r.length;_++)t.indexOf(n=r[_])>=0||(o[n]=e[n]);return o}(e,r);return(0,_.Tm)(t,n)}function u(){var e=new CustomEvent("_preact",{detail:{},bubbles:!0,cancelable:!0});this.dispatchEvent(e),this._vdom=(0,_.h)(l,o({},this._props,{context:e.detail.context}),function e(t,n){if(3===t.nodeType)return t.data;if(1!==t.nodeType)return null;var o=[],r={},l=0,u=t.attributes,c=t.childNodes;for(l=u.length;l--;)"slot"!==u[l].name&&(r[u[l].name]=u[l].value,r[i(u[l].name)]=u[l].value);for(l=c.length;l--;){var s=e(c[l],null),a=c[l].slot;a?r[a]=(0,_.h)(f,{name:a},s):o[l]=s}var p=n?(0,_.h)(f,null,o):o;return(0,_.h)(n||t.nodeName.toLowerCase(),r,p)}(this,this._vdomComponent)),(this.hasAttribute("hydrate")?_.ZB:_.sY)(this._vdom,this._root)}function i(e){return e.replace(/-(\w)/g,function(e,t){return t?t.toUpperCase():""})}function c(e,t,n){if(this._vdom){var o={};o[e]=n=null==n?void 0:n,o[i(e)]=n,this._vdom=(0,_.Tm)(this._vdom,o),(0,_.sY)(this._vdom,this._root)}}function s(){(0,_.sY)(this._vdom=null,this._root)}function f(e,t){var n=this;return(0,_.h)("slot",o({},e,{ref:function(e){e?(n.ref=e,n._listener||(n._listener=function(e){e.stopPropagation(),e.detail.context=t},e.addEventListener("_preact",n._listener))):n.ref.removeEventListener("_preact",n._listener)}}))}function a(e,t,n,_){function o(){var t=Reflect.construct(HTMLElement,[],o);return t._vdomComponent=e,t._root=_&&_.shadow?t.attachShadow({mode:_.mode||"open"}):t,t}return(o.prototype=Object.create(HTMLElement.prototype)).constructor=o,o.prototype.connectedCallback=u,o.prototype.attributeChangedCallback=c,o.prototype.disconnectedCallback=s,o.observedAttributes=n=n||e.observedAttributes||Object.keys(e.propTypes||{}),n.forEach(function(e){Object.defineProperty(o.prototype,e,{get:function(){return this._vdom.props[e]},set:function(t){this._vdom?this.attributeChangedCallback(e,null,t):(this._props||(this._props={}),this._props[e]=t,this.connectedCallback());var n=typeof t;null!=t&&"string"!==n&&"boolean"!==n&&"number"!==n||this.setAttribute(e,t)}})}),customElements.define(t||e.tagName||e.displayName||e.name,o)}},"../../node_modules/preact/dist/preact.module.js":function(e,t,n){n.d(t,{HY:()=>w,Tm:()=>D,YM:()=>o,ZB:()=>F,az:()=>g,bR:()=>function e(t,n){return n=n||[],null==t||"boolean"==typeof t||(m(t)?t.some(function(t){e(t,n)}):n.push(t)),n},h:()=>g,sY:()=>L,wA:()=>x});var _,o,r,l,u,i,c,s,f,a,p,h={},d=[],v=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,m=Array.isArray;function y(e,t){for(var n in t)e[n]=t[n];return e}function b(e){e&&e.parentNode&&e.parentNode.removeChild(e)}function g(e,t,n){var o,r,l,u={};for(l in t)"key"==l?o=t[l]:"ref"==l?r=t[l]:u[l]=t[l];if(arguments.length>2&&(u.children=arguments.length>3?_.call(arguments,2):n),"function"==typeof e&&null!=e.defaultProps)for(l in e.defaultProps)void 0===u[l]&&(u[l]=e.defaultProps[l]);return k(e,u,o,r,null)}function k(e,t,n,_,l){var u={type:e,props:t,key:n,ref:_,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:null==l?++r:l,__i:-1,__u:0};return null==l&&null!=o.vnode&&o.vnode(u),u}function w(e){return e.children}function x(e,t){this.props=e,this.context=t}function H(e,t){if(null==t)return e.__?H(e.__,e.__i+1):null;for(var n;t<e.__k.length;t++)if(null!=(n=e.__k[t])&&null!=n.__e)return n.__e;return"function"==typeof e.type?H(e):null}function C(e){(!e.__d&&(e.__d=!0)&&l.push(e)&&!E.__r++||u!=o.debounceRendering)&&((u=o.debounceRendering)||i)(E)}function E(){for(var e,t,n,_,r,u,i=1;l.length;)l.length>i&&l.sort(c),e=l.shift(),i=l.length,e.__d&&(t=void 0,_=(n=e.__v).__e,r=[],u=[],e.__P&&((t=y({},n)).__v=n.__v+1,o.vnode&&o.vnode(t),j(e.__P,t,n,e.__n,e.__P.namespaceURI,32&n.__u?[_]:null,r,null==_?H(n):_,!!(32&n.__u),u),t.__v=n.__v,t.__.__k[t.__i]=t,A(r,t,u),t.__e!=_&&function e(t){var n,_;if(null!=(t=t.__)&&null!=t.__c){for(t.__e=t.__c.base=null,n=0;n<t.__k.length;n++)if(null!=(_=t.__k[n])&&null!=_.__e){t.__e=t.__c.base=_.__e;break}return e(t)}}(t)));E.__r=0}function P(e,t,n,_,r,l,u,i,c,s,f){var a,p,v,y,g,x,C=_&&_.__k||d,E=t.length;for(c=function(e,t,n,_,r){var l,u,i,c,s,f=n.length,a=f,p=0;for(e.__k=Array(r),l=0;l<r;l++)null!=(u=t[l])&&"boolean"!=typeof u&&"function"!=typeof u?(c=l+p,(u=e.__k[l]="string"==typeof u||"number"==typeof u||"bigint"==typeof u||u.constructor==String?k(null,u,null,null,null):m(u)?k(w,{children:u},null,null,null):null==u.constructor&&u.__b>0?k(u.type,u.props,u.key,u.ref?u.ref:null,u.__v):u).__=e,u.__b=e.__b+1,i=null,-1!=(s=u.__i=function(e,t,n,_){var o,r,l=e.key,u=e.type,i=t[n];if(null===i&&null==e.key||i&&l==i.key&&u==i.type&&0==(2&i.__u))return n;if(_>+(null!=i&&0==(2&i.__u)))for(o=n-1,r=n+1;o>=0||r<t.length;){if(o>=0){if((i=t[o])&&0==(2&i.__u)&&l==i.key&&u==i.type)return o;o--}if(r<t.length){if((i=t[r])&&0==(2&i.__u)&&l==i.key&&u==i.type)return r;r++}}return -1}(u,n,c,a))&&(a--,(i=n[s])&&(i.__u|=2)),null==i||null==i.__v?(-1==s&&(r>f?p--:r<f&&p++),"function"!=typeof u.type&&(u.__u|=4)):s!=c&&(s==c-1?p--:s==c+1?p++:(s>c?p--:p++,u.__u|=4))):e.__k[l]=null;if(a)for(l=0;l<f;l++)null!=(i=n[l])&&0==(2&i.__u)&&(i.__e==_&&(_=H(i)),function e(t,n,_){var r,l;if(o.unmount&&o.unmount(t),(r=t.ref)&&(r.current&&r.current!=t.__e||M(r,null,n)),null!=(r=t.__c)){if(r.componentWillUnmount)try{r.componentWillUnmount()}catch(e){o.__e(e,n)}r.base=r.__P=null}if(r=t.__k)for(l=0;l<r.length;l++)r[l]&&e(r[l],n,_||"function"!=typeof t.type);_||b(t.__e),t.__c=t.__=t.__e=void 0}(i,i));return _}(n,t,C,c,E),a=0;a<E;a++)null!=(v=n.__k[a])&&(p=-1==v.__i?h:C[v.__i]||h,v.__i=a,x=j(e,v,p,r,l,u,i,c,s,f),y=v.__e,v.ref&&p.ref!=v.ref&&(p.ref&&M(p.ref,null,v),f.push(v.ref,v.__c||y,v)),null==g&&null!=y&&(g=y),4&v.__u||p.__k===v.__k?c=function e(t,n,_){var o,r;if("function"==typeof t.type){for(o=t.__k,r=0;o&&r<o.length;r++)o[r]&&(o[r].__=t,n=e(o[r],n,_));return n}t.__e!=n&&(n&&t.type&&!_.contains(n)&&(n=H(t)),_.insertBefore(t.__e,n||null),n=t.__e);do n=n&&n.nextSibling;while(null!=n&&8==n.nodeType);return n}(v,c,e):"function"==typeof v.type&&void 0!==x?c=x:y&&(c=y.nextSibling),v.__u&=-7);return n.__e=g,c}function T(e,t,n){"-"==t[0]?e.setProperty(t,null==n?"":n):e[t]=null==n?"":"number"!=typeof n||v.test(t)?n:n+"px"}function N(e,t,n,_,o){var r,l;e:if("style"==t)if("string"==typeof n)e.style.cssText=n;else{if("string"==typeof _&&(e.style.cssText=_=""),_)for(t in _)n&&t in n||T(e.style,t,"");if(n)for(t in n)_&&n[t]==_[t]||T(e.style,t,n[t])}else if("o"==t[0]&&"n"==t[1])r=t!=(t=t.replace(s,"$1")),t=(l=t.toLowerCase())in e||"onFocusOut"==t||"onFocusIn"==t?l.slice(2):t.slice(2),e.l||(e.l={}),e.l[t+r]=n,n?_?n.u=_.u:(n.u=f,e.addEventListener(t,r?p:a,r)):e.removeEventListener(t,r?p:a,r);else{if("http://www.w3.org/2000/svg"==o)t=t.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("width"!=t&&"height"!=t&&"href"!=t&&"list"!=t&&"form"!=t&&"tabIndex"!=t&&"download"!=t&&"rowSpan"!=t&&"colSpan"!=t&&"role"!=t&&"popover"!=t&&t in e)try{e[t]=null==n?"":n;break e}catch(e){}"function"==typeof n||(null==n||!1===n&&"-"!=t[4]?e.removeAttribute(t):e.setAttribute(t,"popover"==t&&1==n?"":n))}}function S(e){return function(t){if(this.l){var n=this.l[t.type+e];if(null==t.t)t.t=f++;else if(t.t<n.u)return;return n(o.event?o.event(t):t)}}}function j(e,t,n,r,l,u,i,c,s,f){var a,p,d,v,g,k,C,E,T,S,j,A,M,L,F,D,O,Y=t.type;if(null!=t.constructor)return null;128&n.__u&&(s=!!(32&n.__u),u=[c=t.__e=n.__e]),(a=o.__b)&&a(t);e:if("function"==typeof Y)try{if(E=t.props,T="prototype"in Y&&Y.prototype.render,S=(a=Y.contextType)&&r[a.__c],j=a?S?S.props.value:a.__:r,n.__c?C=(p=t.__c=n.__c).__=p.__E:(T?t.__c=p=new Y(E,j):(t.__c=p=new x(E,j),p.constructor=Y,p.render=U),S&&S.sub(p),p.props=E,p.state||(p.state={}),p.context=j,p.__n=r,d=p.__d=!0,p.__h=[],p._sb=[]),T&&null==p.__s&&(p.__s=p.state),T&&null!=Y.getDerivedStateFromProps&&(p.__s==p.state&&(p.__s=y({},p.__s)),y(p.__s,Y.getDerivedStateFromProps(E,p.__s))),v=p.props,g=p.state,p.__v=t,d)T&&null==Y.getDerivedStateFromProps&&null!=p.componentWillMount&&p.componentWillMount(),T&&null!=p.componentDidMount&&p.__h.push(p.componentDidMount);else{if(T&&null==Y.getDerivedStateFromProps&&E!==v&&null!=p.componentWillReceiveProps&&p.componentWillReceiveProps(E,j),!p.__e&&null!=p.shouldComponentUpdate&&!1===p.shouldComponentUpdate(E,p.__s,j)||t.__v==n.__v){for(t.__v!=n.__v&&(p.props=E,p.state=p.__s,p.__d=!1),t.__e=n.__e,t.__k=n.__k,t.__k.some(function(e){e&&(e.__=t)}),A=0;A<p._sb.length;A++)p.__h.push(p._sb[A]);p._sb=[],p.__h.length&&i.push(p);break e}null!=p.componentWillUpdate&&p.componentWillUpdate(E,p.__s,j),T&&null!=p.componentDidUpdate&&p.__h.push(function(){p.componentDidUpdate(v,g,k)})}if(p.context=j,p.props=E,p.__P=e,p.__e=!1,M=o.__r,L=0,T){for(p.state=p.__s,p.__d=!1,M&&M(t),a=p.render(p.props,p.state,p.context),F=0;F<p._sb.length;F++)p.__h.push(p._sb[F]);p._sb=[]}else do p.__d=!1,M&&M(t),a=p.render(p.props,p.state,p.context),p.state=p.__s;while(p.__d&&++L<25);p.state=p.__s,null!=p.getChildContext&&(r=y(y({},r),p.getChildContext())),T&&!d&&null!=p.getSnapshotBeforeUpdate&&(k=p.getSnapshotBeforeUpdate(v,g)),D=a,null!=a&&a.type===w&&null==a.key&&(D=function e(t){return"object"!=typeof t||null==t||t.__b&&t.__b>0?t:m(t)?t.map(e):y({},t)}(a.props.children)),c=P(e,m(D)?D:[D],t,n,r,l,u,i,c,s,f),p.base=t.__e,t.__u&=-161,p.__h.length&&i.push(p),C&&(p.__E=p.__=null)}catch(e){if(t.__v=null,s||null!=u)if(e.then){for(t.__u|=s?160:128;c&&8==c.nodeType&&c.nextSibling;)c=c.nextSibling;u[u.indexOf(c)]=null,t.__e=c}else for(O=u.length;O--;)b(u[O]);else t.__e=n.__e,t.__k=n.__k;o.__e(e,t,n)}else null==u&&t.__v==n.__v?(t.__k=n.__k,t.__e=n.__e):c=t.__e=function(e,t,n,r,l,u,i,c,s){var f,a,p,d,v,y,g,k=n.props,w=t.props,x=t.type;if("svg"==x?l="http://www.w3.org/2000/svg":"math"==x?l="http://www.w3.org/1998/Math/MathML":l||(l="http://www.w3.org/1999/xhtml"),null!=u){for(f=0;f<u.length;f++)if((v=u[f])&&"setAttribute"in v==!!x&&(x?v.localName==x:3==v.nodeType)){e=v,u[f]=null;break}}if(null==e){if(null==x)return document.createTextNode(w);e=document.createElementNS(l,x,w.is&&w),c&&(o.__m&&o.__m(t,u),c=!1),u=null}if(null==x)k===w||c&&e.data==w||(e.data=w);else{if(u=u&&_.call(e.childNodes),k=n.props||h,!c&&null!=u)for(k={},f=0;f<e.attributes.length;f++)k[(v=e.attributes[f]).name]=v.value;for(f in k)if(v=k[f],"children"==f);else if("dangerouslySetInnerHTML"==f)p=v;else if(!(f in w)){if("value"==f&&"defaultValue"in w||"checked"==f&&"defaultChecked"in w)continue;N(e,f,null,v,l)}for(f in w)v=w[f],"children"==f?d=v:"dangerouslySetInnerHTML"==f?a=v:"value"==f?y=v:"checked"==f?g=v:c&&"function"!=typeof v||k[f]===v||N(e,f,v,k[f],l);if(a)c||p&&(a.__html==p.__html||a.__html==e.innerHTML)||(e.innerHTML=a.__html),t.__k=[];else if(p&&(e.innerHTML=""),P("template"==t.type?e.content:e,m(d)?d:[d],t,n,r,"foreignObject"==x?"http://www.w3.org/1999/xhtml":l,u,i,u?u[0]:n.__k&&H(n,0),c,s),null!=u)for(f=u.length;f--;)b(u[f]);c||(f="value","progress"==x&&null==y?e.removeAttribute("value"):null==y||y===e[f]&&("progress"!=x||y)&&("option"!=x||y==k[f])||N(e,f,y,k[f],l),f="checked",null!=g&&g!=e[f]&&N(e,f,g,k[f],l))}return e}(n.__e,t,n,r,l,u,i,s,f);return(a=o.diffed)&&a(t),128&t.__u?void 0:c}function A(e,t,n){for(var _=0;_<n.length;_++)M(n[_],n[++_],n[++_]);o.__c&&o.__c(t,e),e.some(function(t){try{e=t.__h,t.__h=[],e.some(function(e){e.call(t)})}catch(e){o.__e(e,t.__v)}})}function M(e,t,n){try{if("function"==typeof e){var _="function"==typeof e.__u;_&&e.__u(),_&&null==t||(e.__u=e(t))}else e.current=t}catch(e){o.__e(e,n)}}function U(e,t,n){return this.constructor(e,n)}function L(e,t,n){var r,l,u,i;t==document&&(t=document.documentElement),o.__&&o.__(e,t),l=(r="function"==typeof n)?null:n&&n.__k||t.__k,u=[],i=[],j(t,e=(!r&&n||t).__k=g(w,null,[e]),l||h,h,t.namespaceURI,!r&&n?[n]:l?null:t.firstChild?_.call(t.childNodes):null,u,!r&&n?n:l?l.__e:t.firstChild,r,i),A(u,e,i)}function F(e,t){L(e,t,F)}function D(e,t,n){var o,r,l,u,i=y({},e.props);for(l in e.type&&e.type.defaultProps&&(u=e.type.defaultProps),t)"key"==l?o=t[l]:"ref"==l?r=t[l]:i[l]=void 0===t[l]&&null!=u?u[l]:t[l];return arguments.length>2&&(i.children=arguments.length>3?_.call(arguments,2):n),k(e.type,i,o||e.key,r||e.ref,null)}_=d.slice,o={__e:function(e,t,n,_){for(var o,r,l;t=t.__;)if((o=t.__c)&&!o.__)try{if((r=o.constructor)&&null!=r.getDerivedStateFromError&&(o.setState(r.getDerivedStateFromError(e)),l=o.__d),null!=o.componentDidCatch&&(o.componentDidCatch(e,_||{}),l=o.__d),l)return o.__E=o}catch(t){e=t}throw e}},r=0,x.prototype.setState=function(e,t){var n;n=null!=this.__s&&this.__s!=this.state?this.__s:this.__s=y({},this.state),"function"==typeof e&&(e=e(y({},n),this.props)),e&&y(n,e),null!=e&&this.__v&&(t&&this._sb.push(t),C(this))},x.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),C(this))},x.prototype.render=w,l=[],i="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,c=function(e,t){return e.__v.__b-t.__v.__b},E.__r=0,s=/(PointerCapture)$|Capture$/i,f=0,a=S(!1),p=S(!0)},"../../node_modules/preact/hooks/dist/hooks.module.js":function(e,t,n){n.d(t,{I4:()=>k,Ye:()=>g,d4:()=>b,eJ:()=>y});var _,o,r,l,u=n("../../node_modules/preact/dist/preact.module.js"),i=0,c=[],s=u.YM,f=s.__b,a=s.__r,p=s.diffed,h=s.__c,d=s.unmount,v=s.__;function m(e,t){s.__h&&s.__h(o,e,i||t),i=0;var n=o.__H||(o.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({}),n.__[e]}function y(e){return i=1,function(e,t,n){var r=m(_++,2);if(r.t=e,!r.__c&&(r.__=[P(void 0,t),function(e){var t=r.__N?r.__N[0]:r.__[0],n=r.t(t,e);t!==n&&(r.__N=[n,r.__[1]],r.__c.setState({}))}],r.__c=o,!o.__f)){var l=function(e,t,n){if(!r.__c.__H)return!0;var _=r.__c.__H.__.filter(function(e){return!!e.__c});if(_.every(function(e){return!e.__N}))return!u||u.call(this,e,t,n);var o=r.__c.props!==e;return _.forEach(function(e){if(e.__N){var t=e.__[0];e.__=e.__N,e.__N=void 0,t!==e.__[0]&&(o=!0)}}),u&&u.call(this,e,t,n)||o};o.__f=!0;var u=o.shouldComponentUpdate,i=o.componentWillUpdate;o.componentWillUpdate=function(e,t,n){if(this.__e){var _=u;u=void 0,l(e,t,n),u=_}i&&i.call(this,e,t,n)},o.shouldComponentUpdate=l}return r.__N||r.__}(P,e)}function b(e,t){var n=m(_++,3);!s.__s&&E(n.__H,t)&&(n.__=e,n.u=t,o.__H.__h.push(n))}function g(e,t){var n=m(_++,7);return E(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function k(e,t){return i=8,g(function(){return e},t)}function w(){for(var e;e=c.shift();)if(e.__P&&e.__H)try{e.__H.__h.forEach(H),e.__H.__h.forEach(C),e.__H.__h=[]}catch(t){e.__H.__h=[],s.__e(t,e.__v)}}s.__b=function(e){o=null,f&&f(e)},s.__=function(e,t){e&&t.__k&&t.__k.__m&&(e.__m=t.__k.__m),v&&v(e,t)},s.__r=function(e){a&&a(e),_=0;var t=(o=e.__c).__H;t&&(r===o?(t.__h=[],o.__h=[],t.__.forEach(function(e){e.__N&&(e.__=e.__N),e.u=e.__N=void 0})):(t.__h.forEach(H),t.__h.forEach(C),t.__h=[],_=0)),r=o},s.diffed=function(e){p&&p(e);var t=e.__c;t&&t.__H&&(t.__H.__h.length&&(1!==c.push(t)&&l===s.requestAnimationFrame||((l=s.requestAnimationFrame)||function(e){var t,n=function(){clearTimeout(_),x&&cancelAnimationFrame(t),setTimeout(e)},_=setTimeout(n,35);x&&(t=requestAnimationFrame(n))})(w)),t.__H.__.forEach(function(e){e.u&&(e.__H=e.u),e.u=void 0})),r=o=null},s.__c=function(e,t){t.some(function(e){try{e.__h.forEach(H),e.__h=e.__h.filter(function(e){return!e.__||C(e)})}catch(n){t.some(function(e){e.__h&&(e.__h=[])}),t=[],s.__e(n,e.__v)}}),h&&h(e,t)},s.unmount=function(e){d&&d(e);var t,n=e.__c;n&&n.__H&&(n.__H.__.forEach(function(e){try{H(e)}catch(e){t=e}}),n.__H=void 0,t&&s.__e(t,n.__v))};var x="function"==typeof requestAnimationFrame;function H(e){var t=o,n=e.__c;"function"==typeof n&&(e.__c=void 0,n()),o=t}function C(e){var t=o;e.__c=e.__(),o=t}function E(e,t){return!e||e.length!==t.length||t.some(function(t,n){return t!==e[n]})}function P(e,t){return"function"==typeof t?t(e):t}},"../../node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js":function(e,t,n){n.d(t,{BX:()=>r,HY:()=>_.HY,tZ:()=>r});var _=n("../../node_modules/preact/dist/preact.module.js"),o=0;function r(e,t,n,r,l,u){t||(t={});var i,c,s=t;if("ref"in s)for(c in s={},t)"ref"==c?i=t[c]:s[c]=t[c];var f={type:e,props:s,key:n,ref:i,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--o,__i:-1,__u:0,__source:l,__self:u};if("function"==typeof e&&(i=e.defaultProps))for(c in i)void 0===s[c]&&(s[c]=i[c]);return _.YM.vnode&&_.YM.vnode(f),f}},"../../node_modules/class-variance-authority/dist/index.mjs":function(e,t,n){n.d(t,{cx:()=>_});let _=function(){for(var e,t,n=0,_="",o=arguments.length;n<o;n++)(e=arguments[n])&&(t=function e(t){var n,_,o="";if("string"==typeof t||"number"==typeof t)o+=t;else if("object"==typeof t)if(Array.isArray(t)){var r=t.length;for(n=0;n<r;n++)t[n]&&(_=e(t[n]))&&(o&&(o+=" "),o+=_)}else for(_ in t)t[_]&&(o&&(o+=" "),o+=_);return o}(e))&&(_&&(_+=" "),_+=t);return _}}};