@frigade/react 1.32.62 → 1.32.63

package/lib/index.mjs

@@ -1,5 +1,5 @@
 "use client";
-import gt,{createContext as Da,useEffect as Fo,useState as Ne}from"react";import{ThemeProvider as $a}from"styled-components";import ft,{useContext as La,useEffect as wo,useState as er}from"react";import{useCallback as ct,useContext as nl,useEffect as sl}from"react";import Do,{useMemo as Ks}from"react";var xr="1.32.62 ";var Te="https://api.frigade.com/v1/public/",Ae="NOT_STARTED_STEP",Y="COMPLETED_FLOW",no="ABORTED_FLOW",dt="STARTED_FLOW",Le="NOT_STARTED_FLOW",Oe="COMPLETED_STEP",so="STARTED_STEP";function Me(){let{publicApiKey:e,userId:t}=Do.useContext(q);return{config:Ks(()=>({headers:{Authorization:`Bearer ${e}`,"Content-Type":"application/json","X-Frigade-SDK-Version":xr,"X-Frigade-SDK-Platform":"React"}}),[e,t])}}var Ys="frigade-last-call-at-",Xs="frigade-last-call-data-";function wt(){let{shouldGracefullyDegrade:e}=Do.useContext(q);return async(t,o)=>{if(e)return console.log(`Skipping ${t} call to Frigade due to error`),zt();let i=Ys+t,n=Xs+t;if(window&&window.localStorage&&o&&o.body&&o.method==="POST"){let s=window.localStorage.getItem(i),p=window.localStorage.getItem(n);if(s&&p&&p==o.body){let c=new Date(s);if(new Date().getTime()-c.getTime()<1e3)return zt()}window.localStorage.setItem(i,new Date().toISOString()),window.localStorage.setItem(n,o.body)}let r;try{r=await fetch(t,o)}catch(s){return zt(s)}return r?r.ok?r:zt(r.statusText):zt()}}function zt(e){return e&&console.log("Call to Frigade failed",e),{json:()=>({})}}function Tt(){let{publicApiKey:e,shouldGracefullyDegrade:t}=Do.useContext(q);function o(){if(t){console.error("Frigade hooks cannot be used when Frigade SDK has failed to initialize");return}e||console.error("Frigade hooks cannot be used outside the scope of FrigadeProvider")}return{verifySDKInitiated:o}}import{useContext as ol,useState as Cr}from"react";import{useContext as Qs,useEffect as Zs,useState as Rs}from"react";import el from"swr";import{useContext as Js}from"react";function Pe(){let{openFlowStates:e,setOpenFlowStates:t,hasActiveFullPageFlow:o,setCompletedFlowsToKeepOpenDuringSession:i,completedFlowsToKeepOpenDuringSession:n}=Js(q);function r(d,u=!1){return e[d]??u}function s(d,u){t(y=>({...y,[d]:u}))}function p(d){t(u=>{let{[d]:y,...E}=u;return{...E}})}function c(d){n.includes(d)||i(u=>[...u,d])}function a(d){return n.includes(d)}function C(){return Object.values(e).some(d=>d)||o}return{getOpenFlowState:r,setOpenFlowState:s,resetOpenFlowState:p,hasOpenModals:C,setKeepCompletedFlowOpenDuringSession:c,shouldKeepCompletedFlowOpenDuringSession:a}}var tl="unknown";function Ie(){let{config:e}=Me(),{publicApiKey:t,userId:o,organizationId:i,flows:n,setShouldGracefullyDegrade:r}=Qs(q),{resetOpenFlowState:s}=Pe(),[p,c]=Rs(!1),a={data:n.map(S=>({flowId:S.id,flowState:Y,lastStepId:null,userId:o,foreignUserId:o,stepStates:{},shouldTrigger:!1}))},C=S=>fetch(S,e).then(m=>{if(m.ok)return m.json();throw new Error("Failed to fetch user flow states")}).catch(m=>(console.log(`Error fetching ${S}: ${m}. Will gracefully degrade and hide Frigade`),r(!0),a)),{data:d,isLoading:u,mutate:y,error:E}=el(t&&n&&o?`${Te}userFlowStates?foreignUserId=${encodeURIComponent(o)}${i?`&foreignUserGroupId=${encodeURIComponent(i)}`:""}`:null,C,{revalidateIfStale:!0,keepPreviousData:!0,revalidateOnMount:!0,errorRetryInterval:1e4,errorRetryCount:3,onError:()=>a,onLoadingSlow:()=>a}),f=d==null?void 0:d.data;Zs(()=>{!p&&!u&&f&&c(!0)},[f,p,u]);async function x(S){if(f){let m=f.find(h=>h.flowId===S);m&&m.flowState!==Y&&(m.flowState=Y),await y(Promise.resolve({...d,data:f}),{optimisticData:{...d,data:f},revalidate:!1,rollbackOnError:!1})}}async function F(S,m,h){if(f){let w=f.find(N=>N.flowId===S);w&&(w.stepStates[m]=h,w.flowState=dt),await y(Promise.resolve({...d,data:f}),{optimisticData:{...d,data:f},revalidate:!1,rollbackOnError:!1})}}async function k(S,m,h){if(f){let w=f.find(N=>N.flowId===S);w&&(w.lastStepId=m,w.stepStates[m]=h,w.flowState=dt),await y({...d,data:f},{optimisticData:{...d,data:f},revalidate:!1,rollbackOnError:!1})}}async function B(S){if(f){let m=f.find(h=>h.flowId===S);m&&m.flowState!==Le&&(m.flowState=Le,m.lastStepId=tl,Object.keys(m.stepStates).forEach(h=>{m.stepStates[h].actionType=Ae,m.stepStates[h].createdAt=new Date().toISOString()}),await y({...d,data:f},{optimisticData:{...d,data:f},revalidate:!1,rollbackOnError:!1}),s(S))}}async function P(S,m){if(f){let h=f.find(w=>w.flowId===S);h&&h.stepStates[m]!==Ae&&(h.stepStates[m]=Ae),await y({...d,data:f},{optimisticData:{...d,data:f},revalidate:!1,rollbackOnError:!1})}}return{userFlowStatesData:f,isLoadingUserFlowStateData:!p,mutateUserFlowState:y,optimisticallyMarkFlowCompleted:x,optimisticallyMarkFlowNotStarted:B,optimisticallyMarkStepCompleted:F,optimisticallyMarkStepNotStarted:P,optimisticallyMarkStepStarted:k,error:E}}function Wt(){let{config:e}=Me(),{userFlowStatesData:t,mutateUserFlowState:o}=Ie(),{failedFlowResponses:i,setFailedFlowResponses:n,flowResponses:r,setFlowResponses:s}=ol(q),[p,c]=Cr(new Set),[a,C]=Cr(new Set),d=wt();function u(f){let x=JSON.stringify(f);if(p.has(x))return null;p.add(x),c(p),a.add(f),C(a);let F=r==null?void 0:r.find(k=>k.flowSlug===f.flowSlug&&k.stepId===f.stepId&&k.actionType===f.actionType&&k.createdAt===f.createdAt);return d(`${Te}flowResponses`,{...e,method:"POST",body:x}).then(k=>{k.status!==200&&k.status!==201?(console.log("Failed to send flow response for step "+f.stepId+". Will retry again later."),n([...i,f])):F||s(B=>[...B??[],f])})}async function y(f){f.foreignUserId&&(f.actionType===dt||f.actionType===Le?await u(f):f.actionType===Y?await u(f):f.actionType===so?await u(f):f.actionType===Oe?await u(f):f.actionType===no?await u(f):f.actionType===Ae&&await u(f))}function E(){let f=[];return t==null||t.forEach(x=>{if(x&&x.stepStates&&Object.keys(x.stepStates).length!==0)for(let F in x.stepStates){let k=x.stepStates[F];f.push({foreignUserId:x.foreignUserId,flowSlug:x.flowId,stepId:k.stepId,actionType:k.actionType,data:{},createdAt:new Date(k.createdAt),blocked:k.blocked,hidden:k.hidden})}}),[...f,...r]}return{addResponse:y,setFlowResponses:s,getFlowResponses:E}}import ll from"swr";var rl=/user.flow\(([^\)]+)\) == '?COMPLETED_FLOW'?/gm,Sr=e=>{let t=rl.exec(e);if(t===null)return null;let o=null;return t.forEach((i,n)=>{let r=il(i,"'","");r.startsWith("flow_")&&(o=r)}),o},il=function(e,t,o){return e.replace(new RegExp(t,"g"),o)};function X(){let{config:e}=Me(),{flows:t,setFlows:o,userId:i,publicApiKey:n,customVariables:r,setCustomVariables:s,hasActiveFullPageFlow:p,setHasActiveFullPageFlow:c,setFlowResponses:a,setShouldGracefullyDegrade:C}=nl(q),d={data:[]},{verifySDKInitiated:u}=Tt(),{addResponse:y,getFlowResponses:E}=Wt(),f=g=>fetch(g,e).then(b=>b.ok?b.json():(console.log(`Error fetching ${g} (${b.status}): ${b.statusText}. .Will gracefully degrade and hide Frigade`),C(!0),d)).catch(b=>(console.log(`Error fetching ${g}: ${b}. Will gracefully degrade and hide Frigade`),C(!0),d)),{userFlowStatesData:x,isLoadingUserFlowStateData:F,optimisticallyMarkFlowCompleted:k,optimisticallyMarkFlowNotStarted:B,optimisticallyMarkStepCompleted:P,optimisticallyMarkStepNotStarted:S,optimisticallyMarkStepStarted:m}=Ie(),{data:h,error:w,isLoading:N}=ll(n?`${Te}flows`:null,f,{keepPreviousData:!0});sl(()=>{if(w){console.error(w);return}h&&h.data&&(h.data=o(h.data))},[h,w]);function W(g){if(N)return null;let b=t.find(v=>v.slug===g);return!b&&t.length>0&&!F&&!N?(console.log(`Flow with slug ${g} not found`),null):(b==null?void 0:b.active)===!1?null:b}function H(g){var _;if(!W(g))return[];let b=W(g).data;return b?(b=A(b),(((_=JSON.parse(b))==null?void 0:_.data)??[]).map(de=>{let z=Z(de);return{handleSecondaryButtonClick:()=>{de.skippable===!0&&D(g,de.id,{skipped:!0})},...de,complete:I(g,de.id)===Oe||z>=1,blocked:se(g,de.id),hidden:fe(g,de.id),handlePrimaryButtonClick:()=>{(!de.completionCriteria&&(de.autoMarkCompleted||de.autoMarkCompleted===void 0)||de.completionCriteria&&de.autoMarkCompleted===!0)&&D(g,de.id)},progress:z}}).filter(de=>de.hidden!==!0)):[]}function A(g){return g.replaceAll(/\${(.*?)}/g,(b,v)=>r[v]===void 0?"":String(r[v]).replace(/[\u00A0-\u9999<>\&]/g,function(_){return"&#"+_.charCodeAt(0)+";"}).replaceAll(/[\\]/g,"\\\\").replaceAll(/[\"]/g,'\\"').replaceAll(/[\/]/g,"\\/").replaceAll(/[\b]/g,"\\b").replaceAll(/[\f]/g,"\\f").replaceAll(/[\n]/g,"\\n").replaceAll(/[\r]/g,"\\r").replaceAll(/[\t]/g,"\\t"))}function U(g){if(!W(g))return[];let b=W(g).data;return b?(b=A(b),JSON.parse(b)??{}):[]}function $(g,b){s(v=>({...v,[g]:b}))}function O(g){!F&&!N&&g&&JSON.stringify(r)!=JSON.stringify({...r,...g})&&Object.keys(g).forEach(b=>{$(b,g[b])})}let ne=ct(async(g,b,v)=>{u();let _={foreignUserId:i,flowSlug:g,stepId:b,actionType:so,data:v??{},createdAt:new Date,blocked:!1,hidden:!1};oe(_)&&(await m(g,b,_),y(_))},[i,x]),pe=ct(async(g,b,v)=>{u();let _={foreignUserId:i,flowSlug:g,stepId:b,actionType:Ae,data:v??{},createdAt:new Date,blocked:!1,hidden:!1};oe(_)&&(await S(g,b),y(_))},[i,x]),D=ct(async(g,b,v)=>{u();let _={foreignUserId:i,flowSlug:g,stepId:b,actionType:Oe,data:v??{},createdAt:new Date,blocked:!1,hidden:!1};oe(_)&&(await P(g,b,_),y(_))},[i,x]),we=ct(async(g,b)=>{if(u(),K(g)===Le)return;let v={foreignUserId:i,flowSlug:g,stepId:"unknown",actionType:Le,data:b??{},createdAt:new Date,blocked:!1,hidden:!1};await B(g),oe(v)&&y(v)},[i,x]),xe=ct(async(g,b)=>{u();let v={foreignUserId:i,flowSlug:g,stepId:"unknown",actionType:dt,data:b??{},createdAt:new Date,blocked:!1,hidden:!1};oe(v)&&y(v)},[i,x]),te=ct(async(g,b)=>{u();let v={foreignUserId:i,flowSlug:g,stepId:"unknown",actionType:Y,data:b??{},createdAt:new Date,blocked:!1,hidden:!1};oe(v)&&(await k(g),y(v))},[i,x]),V=ct(async(g,b)=>{u();let v={foreignUserId:i,flowSlug:g,stepId:"unknown",actionType:no,data:b??{},createdAt:new Date,blocked:!1,hidden:!1};oe(v)&&(await k(g),y(v))},[i,x]);function oe(g){var b;if(!x&&g.actionType===Ae)return!1;if(x){let v=x.find(_=>_.flowId===g.flowSlug);if(g.actionType===Ae&&(!(v!=null&&v.stepStates[g.stepId])||v.stepStates[g.stepId].actionType===Ae)||v&&((b=v.stepStates[g.stepId])==null?void 0:b.actionType)===g.actionType||v&&v.flowState===Y&&g.actionType===Y)return!1}return!0}function I(g,b){let v=ke(g,b);return F?null:v?v.actionType:Ae}function se(g,b){let v=ke(g,b);return v?v.blocked:!1}function fe(g,b){let v=ke(g,b);return v?v.hidden:!1}function ke(g,b){if(F)return null;let v=x==null?void 0:x.find(_=>_.flowId===g);return!v||!v.stepStates[b]?null:v.stepStates[b]??null}function G(g){var v;if(F||!x)return null;if(K(g)===Le)return H(g)[0]??null;let b=(v=x.find(_=>_.flowId===g))==null?void 0:v.lastStepId;return b?H(g).find(_=>_.id===b):null}function ge(g){let b=G(g);if(!b)return 0;let v=H(g).findIndex(_=>_.id===b.id)??0;return I(g,b.id)===Oe&&v<H(g).length-1?v+1:v}function Z(g){if(!g.completionCriteria)return;let b=Sr(g.completionCriteria);if(b===null)return;let v=Ve(b),_=Ge(b);return _===0?void 0:v/_}function K(g){let b=x==null?void 0:x.find(v=>v.flowId===g);return b?b.flowState:null}function Ve(g){let b=H(g);return b.length===0?0:b.filter(_=>I(g,_.id)===Oe).length}function Ge(g){return H(g).length}function bt(g){return JSON.parse(t.find(b=>b.slug===g).data)}function j(g){if(F)return!0;if(g!=null&&g.targetingLogic&&x){let b=x.find(v=>v.flowId===g.slug);if(b)return b.shouldTrigger===!1}return!!(g!=null&&g.targetingLogic&&i&&i.startsWith("guest_"))}function Be(g){return!j(W(g))}return{getFlow:W,getFlowData:bt,isLoading:F||N,getStepStatus:I,getFlowSteps:H,getCurrentStepIndex:ge,markStepStarted:ne,markStepCompleted:D,markFlowNotStarted:we,markFlowStarted:xe,markFlowCompleted:te,markFlowAborted:V,markStepNotStarted:pe,getFlowStatus:K,getNumberOfStepsCompleted:Ve,getNumberOfSteps:Ge,targetingLogicShouldHideFlow:j,setCustomVariable:$,updateCustomVariables:O,customVariables:r,getStepOptionalProgress:Z,getFlowMetadata:U,isStepBlocked:se,isStepHidden:fe,hasActiveFullPageFlow:p,setHasActiveFullPageFlow:c,isFlowAvailableToUser:Be}}import{useCallback as yr,useContext as al,useEffect as pl}from"react";var Ft="guest_";function Ht(){let{userId:e,organizationId:t,setUserId:o,setUserProperties:i,shouldGracefullyDegrade:n}=al(q),{config:r}=Me(),{mutateUserFlowState:s}=Ie(),p=wt(),{verifySDKInitiated:c}=Tt();pl(()=>{if(e&&!t){if(e.startsWith(Ft))return;let d=`frigade-user-registered-${e}`;localStorage.getItem(d)||(p(`${Te}users`,{...r,method:"POST",body:JSON.stringify({foreignId:e})}),localStorage.setItem(d,"true"))}},[e,n,t]);let a=yr(async d=>{c();let u={foreignId:e,properties:d};await p(`${Te}users`,{...r,method:"POST",body:JSON.stringify(u)}),i(y=>({...y,...d})),s()},[e,r,n,s]),C=yr(async(d,u)=>{c();let E={foreignId:e,events:[{event:d,properties:u}]};await p(`${Te}users`,{...r,method:"POST",body:JSON.stringify(E)}),s()},[e,r,s]);return{userId:e,setUserId:o,addPropertiesToUser:a,trackEventForUser:C}}import{v4 as Oa}from"uuid";import _e,{useEffect as Ba,useState as Aa}from"react";import De,{useEffect as hl}from"react";import po from"styled-components";import dl from"react";import cl from"styled-components";var br="fr-",jt="cfr-";function l(e,t){let o=`${br}${e}`;if(!t)return o;if(t.styleOverrides&&t.styleOverrides[e]){if(typeof t.styleOverrides[e]=="string")return o+" "+t.styleOverrides[e];if(typeof t.styleOverrides[e]=="object")return o+" "+jt+e}return o}function T(e){if(!e.className||e.className.indexOf(jt)!==-1)return"";let o=e.className.replace(/\s+/g," ").split(" ");return o.length==1&&o[0].startsWith(br)?"":`:not(${o.map(i=>`.${i}`).join(", ")})`}function $o(e){return e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase()}function Ke(e){return e!=null&&e.styleOverrides?Object.keys(e.styleOverrides).map(t=>`${$o(t)}: ${e.styleOverrides[t]};`).join(" "):""}function Ce(...e){return e.filter(Boolean).join(" ")}function wr(e){return e.charAt(0).toUpperCase()+e.slice(1)}var ml=cl.div`
+import gt,{createContext as Da,useEffect as Fo,useState as Ne}from"react";import{ThemeProvider as $a}from"styled-components";import ft,{useContext as La,useEffect as wo,useState as er}from"react";import{useCallback as ct,useContext as nl,useEffect as sl}from"react";import Do,{useMemo as Ks}from"react";var xr="1.32.63 ";var Te="https://api.frigade.com/v1/public/",Ae="NOT_STARTED_STEP",Y="COMPLETED_FLOW",no="ABORTED_FLOW",dt="STARTED_FLOW",Le="NOT_STARTED_FLOW",Oe="COMPLETED_STEP",so="STARTED_STEP";function Me(){let{publicApiKey:e,userId:t}=Do.useContext(q);return{config:Ks(()=>({headers:{Authorization:`Bearer ${e}`,"Content-Type":"application/json","X-Frigade-SDK-Version":xr,"X-Frigade-SDK-Platform":"React"}}),[e,t])}}var Ys="frigade-last-call-at-",Xs="frigade-last-call-data-";function wt(){let{shouldGracefullyDegrade:e}=Do.useContext(q);return async(t,o)=>{if(e)return console.log(`Skipping ${t} call to Frigade due to error`),zt();let i=Ys+t,n=Xs+t;if(window&&window.localStorage&&o&&o.body&&o.method==="POST"){let s=window.localStorage.getItem(i),p=window.localStorage.getItem(n);if(s&&p&&p==o.body){let c=new Date(s);if(new Date().getTime()-c.getTime()<1e3)return zt()}window.localStorage.setItem(i,new Date().toISOString()),window.localStorage.setItem(n,o.body)}let r;try{r=await fetch(t,o)}catch(s){return zt(s)}return r?r.ok?r:zt(r.statusText):zt()}}function zt(e){return e&&console.log("Call to Frigade failed",e),{json:()=>({})}}function Tt(){let{publicApiKey:e,shouldGracefullyDegrade:t}=Do.useContext(q);function o(){if(t){console.error("Frigade hooks cannot be used when Frigade SDK has failed to initialize");return}e||console.error("Frigade hooks cannot be used outside the scope of FrigadeProvider")}return{verifySDKInitiated:o}}import{useContext as ol,useState as Cr}from"react";import{useContext as Qs,useEffect as Zs,useState as Rs}from"react";import el from"swr";import{useContext as Js}from"react";function Pe(){let{openFlowStates:e,setOpenFlowStates:t,hasActiveFullPageFlow:o,setCompletedFlowsToKeepOpenDuringSession:i,completedFlowsToKeepOpenDuringSession:n}=Js(q);function r(d,u=!1){return e[d]??u}function s(d,u){t(y=>({...y,[d]:u}))}function p(d){t(u=>{let{[d]:y,...E}=u;return{...E}})}function c(d){n.includes(d)||i(u=>[...u,d])}function a(d){return n.includes(d)}function C(){return Object.values(e).some(d=>d)||o}return{getOpenFlowState:r,setOpenFlowState:s,resetOpenFlowState:p,hasOpenModals:C,setKeepCompletedFlowOpenDuringSession:c,shouldKeepCompletedFlowOpenDuringSession:a}}var tl="unknown";function Ie(){let{config:e}=Me(),{publicApiKey:t,userId:o,organizationId:i,flows:n,setShouldGracefullyDegrade:r}=Qs(q),{resetOpenFlowState:s}=Pe(),[p,c]=Rs(!1),a={data:n.map(S=>({flowId:S.id,flowState:Y,lastStepId:null,userId:o,foreignUserId:o,stepStates:{},shouldTrigger:!1}))},C=S=>fetch(S,e).then(m=>{if(m.ok)return m.json();throw new Error("Failed to fetch user flow states")}).catch(m=>(console.log(`Error fetching ${S}: ${m}. Will gracefully degrade and hide Frigade`),r(!0),a)),{data:d,isLoading:u,mutate:y,error:E}=el(t&&n&&o?`${Te}userFlowStates?foreignUserId=${encodeURIComponent(o)}${i?`&foreignUserGroupId=${encodeURIComponent(i)}`:""}`:null,C,{revalidateIfStale:!0,keepPreviousData:!0,revalidateOnMount:!0,errorRetryInterval:1e4,errorRetryCount:3,onError:()=>a,onLoadingSlow:()=>a}),f=d==null?void 0:d.data;Zs(()=>{!p&&!u&&f&&c(!0)},[f,p,u]);async function x(S){if(f){let m=f.find(h=>h.flowId===S);m&&m.flowState!==Y&&(m.flowState=Y),await y(Promise.resolve({...d,data:f}),{optimisticData:{...d,data:f},revalidate:!1,rollbackOnError:!1})}}async function F(S,m,h){if(f){let w=f.find(N=>N.flowId===S);w&&(w.stepStates[m]=h,w.flowState=dt),await y(Promise.resolve({...d,data:f}),{optimisticData:{...d,data:f},revalidate:!1,rollbackOnError:!1})}}async function k(S,m,h){if(f){let w=f.find(N=>N.flowId===S);w&&(w.lastStepId=m,w.stepStates[m]=h,w.flowState=dt),await y({...d,data:f},{optimisticData:{...d,data:f},revalidate:!1,rollbackOnError:!1})}}async function B(S){if(f){let m=f.find(h=>h.flowId===S);m&&m.flowState!==Le&&(m.flowState=Le,m.lastStepId=tl,Object.keys(m.stepStates).forEach(h=>{m.stepStates[h].actionType=Ae,m.stepStates[h].createdAt=new Date().toISOString()}),await y({...d,data:f},{optimisticData:{...d,data:f},revalidate:!1,rollbackOnError:!1}),s(S))}}async function P(S,m){if(f){let h=f.find(w=>w.flowId===S);h&&h.stepStates[m]!==Ae&&(h.stepStates[m]=Ae),await y({...d,data:f},{optimisticData:{...d,data:f},revalidate:!1,rollbackOnError:!1})}}return{userFlowStatesData:f,isLoadingUserFlowStateData:!p,mutateUserFlowState:y,optimisticallyMarkFlowCompleted:x,optimisticallyMarkFlowNotStarted:B,optimisticallyMarkStepCompleted:F,optimisticallyMarkStepNotStarted:P,optimisticallyMarkStepStarted:k,error:E}}function Wt(){let{config:e}=Me(),{userFlowStatesData:t,mutateUserFlowState:o}=Ie(),{failedFlowResponses:i,setFailedFlowResponses:n,flowResponses:r,setFlowResponses:s}=ol(q),[p,c]=Cr(new Set),[a,C]=Cr(new Set),d=wt();function u(f){let x=JSON.stringify(f);if(p.has(x))return null;p.add(x),c(p),a.add(f),C(a);let F=r==null?void 0:r.find(k=>k.flowSlug===f.flowSlug&&k.stepId===f.stepId&&k.actionType===f.actionType&&k.createdAt===f.createdAt);return d(`${Te}flowResponses`,{...e,method:"POST",body:x}).then(k=>{k.status!==200&&k.status!==201?(console.log("Failed to send flow response for step "+f.stepId+". Will retry again later."),n([...i,f])):F||s(B=>[...B??[],f])})}async function y(f){f.foreignUserId&&(f.actionType===dt||f.actionType===Le?await u(f):f.actionType===Y?await u(f):f.actionType===so?await u(f):f.actionType===Oe?await u(f):f.actionType===no?await u(f):f.actionType===Ae&&await u(f))}function E(){let f=[];return t==null||t.forEach(x=>{if(x&&x.stepStates&&Object.keys(x.stepStates).length!==0)for(let F in x.stepStates){let k=x.stepStates[F];f.push({foreignUserId:x.foreignUserId,flowSlug:x.flowId,stepId:k.stepId,actionType:k.actionType,data:{},createdAt:new Date(k.createdAt),blocked:k.blocked,hidden:k.hidden})}}),[...f,...r]}return{addResponse:y,setFlowResponses:s,getFlowResponses:E}}import ll from"swr";var rl=/user.flow\(([^\)]+)\) == '?COMPLETED_FLOW'?/gm,Sr=e=>{let t=rl.exec(e);if(t===null)return null;let o=null;return t.forEach((i,n)=>{let r=il(i,"'","");r.startsWith("flow_")&&(o=r)}),o},il=function(e,t,o){return e.replace(new RegExp(t,"g"),o)};function X(){let{config:e}=Me(),{flows:t,setFlows:o,userId:i,publicApiKey:n,customVariables:r,setCustomVariables:s,hasActiveFullPageFlow:p,setHasActiveFullPageFlow:c,setFlowResponses:a,setShouldGracefullyDegrade:C}=nl(q),d={data:[]},{verifySDKInitiated:u}=Tt(),{addResponse:y,getFlowResponses:E}=Wt(),f=g=>fetch(g,e).then(b=>b.ok?b.json():(console.log(`Error fetching ${g} (${b.status}): ${b.statusText}. .Will gracefully degrade and hide Frigade`),C(!0),d)).catch(b=>(console.log(`Error fetching ${g}: ${b}. Will gracefully degrade and hide Frigade`),C(!0),d)),{userFlowStatesData:x,isLoadingUserFlowStateData:F,optimisticallyMarkFlowCompleted:k,optimisticallyMarkFlowNotStarted:B,optimisticallyMarkStepCompleted:P,optimisticallyMarkStepNotStarted:S,optimisticallyMarkStepStarted:m}=Ie(),{data:h,error:w,isLoading:N}=ll(n?`${Te}flows`:null,f,{keepPreviousData:!0});sl(()=>{if(w){console.error(w);return}h&&h.data&&(h.data=o(h.data))},[h,w]);function W(g){if(N)return null;let b=t.find(v=>v.slug===g);return!b&&t.length>0&&!F&&!N?(console.log(`Flow with slug ${g} not found`),null):(b==null?void 0:b.active)===!1?null:b}function H(g){var _;if(!W(g))return[];let b=W(g).data;return b?(b=A(b),(((_=JSON.parse(b))==null?void 0:_.data)??[]).map(de=>{let z=Z(de);return{handleSecondaryButtonClick:()=>{de.skippable===!0&&D(g,de.id,{skipped:!0})},...de,complete:I(g,de.id)===Oe||z>=1,blocked:se(g,de.id),hidden:fe(g,de.id),handlePrimaryButtonClick:()=>{(!de.completionCriteria&&(de.autoMarkCompleted||de.autoMarkCompleted===void 0)||de.completionCriteria&&de.autoMarkCompleted===!0)&&D(g,de.id)},progress:z}}).filter(de=>de.hidden!==!0)):[]}function A(g){return g.replaceAll(/\${(.*?)}/g,(b,v)=>r[v]===void 0?"":String(r[v]).replace(/[\u00A0-\u9999<>\&]/g,function(_){return"&#"+_.charCodeAt(0)+";"}).replaceAll(/[\\]/g,"\\\\").replaceAll(/[\"]/g,'\\"').replaceAll(/[\/]/g,"\\/").replaceAll(/[\b]/g,"\\b").replaceAll(/[\f]/g,"\\f").replaceAll(/[\n]/g,"\\n").replaceAll(/[\r]/g,"\\r").replaceAll(/[\t]/g,"\\t"))}function U(g){if(!W(g))return[];let b=W(g).data;return b?(b=A(b),JSON.parse(b)??{}):[]}function $(g,b){s(v=>({...v,[g]:b}))}function O(g){!F&&!N&&g&&JSON.stringify(r)!=JSON.stringify({...r,...g})&&Object.keys(g).forEach(b=>{$(b,g[b])})}let ne=ct(async(g,b,v)=>{u();let _={foreignUserId:i,flowSlug:g,stepId:b,actionType:so,data:v??{},createdAt:new Date,blocked:!1,hidden:!1};oe(_)&&(await m(g,b,_),y(_))},[i,x]),pe=ct(async(g,b,v)=>{u();let _={foreignUserId:i,flowSlug:g,stepId:b,actionType:Ae,data:v??{},createdAt:new Date,blocked:!1,hidden:!1};oe(_)&&(await S(g,b),y(_))},[i,x]),D=ct(async(g,b,v)=>{u();let _={foreignUserId:i,flowSlug:g,stepId:b,actionType:Oe,data:v??{},createdAt:new Date,blocked:!1,hidden:!1};oe(_)&&(await P(g,b,_),y(_))},[i,x]),we=ct(async(g,b)=>{if(u(),K(g)===Le)return;let v={foreignUserId:i,flowSlug:g,stepId:"unknown",actionType:Le,data:b??{},createdAt:new Date,blocked:!1,hidden:!1};await B(g),oe(v)&&y(v)},[i,x]),xe=ct(async(g,b)=>{u();let v={foreignUserId:i,flowSlug:g,stepId:"unknown",actionType:dt,data:b??{},createdAt:new Date,blocked:!1,hidden:!1};oe(v)&&y(v)},[i,x]),te=ct(async(g,b)=>{u();let v={foreignUserId:i,flowSlug:g,stepId:"unknown",actionType:Y,data:b??{},createdAt:new Date,blocked:!1,hidden:!1};oe(v)&&(await k(g),y(v))},[i,x]),V=ct(async(g,b)=>{u();let v={foreignUserId:i,flowSlug:g,stepId:"unknown",actionType:no,data:b??{},createdAt:new Date,blocked:!1,hidden:!1};oe(v)&&(await k(g),y(v))},[i,x]);function oe(g){var b;if(!x&&g.actionType===Ae)return!1;if(x){let v=x.find(_=>_.flowId===g.flowSlug);if(g.actionType===Ae&&(!(v!=null&&v.stepStates[g.stepId])||v.stepStates[g.stepId].actionType===Ae)||v&&((b=v.stepStates[g.stepId])==null?void 0:b.actionType)===g.actionType||v&&v.flowState===Y&&g.actionType===Y)return!1}return!0}function I(g,b){let v=ke(g,b);return F?null:v?v.actionType:Ae}function se(g,b){let v=ke(g,b);return v?v.blocked:!1}function fe(g,b){let v=ke(g,b);return v?v.hidden:!1}function ke(g,b){if(F)return null;let v=x==null?void 0:x.find(_=>_.flowId===g);return!v||!v.stepStates[b]?null:v.stepStates[b]??null}function G(g){var v;if(F||!x)return null;if(K(g)===Le)return H(g)[0]??null;let b=(v=x.find(_=>_.flowId===g))==null?void 0:v.lastStepId;return b?H(g).find(_=>_.id===b):null}function ge(g){let b=G(g);if(!b)return 0;let v=H(g).findIndex(_=>_.id===b.id)??0;return I(g,b.id)===Oe&&v<H(g).length-1?v+1:v}function Z(g){if(!g.completionCriteria)return;let b=Sr(g.completionCriteria);if(b===null)return;let v=Ve(b),_=Ge(b);return _===0?void 0:v/_}function K(g){let b=x==null?void 0:x.find(v=>v.flowId===g);return b?b.flowState:null}function Ve(g){let b=H(g);return b.length===0?0:b.filter(_=>I(g,_.id)===Oe).length}function Ge(g){return H(g).length}function bt(g){return JSON.parse(t.find(b=>b.slug===g).data)}function j(g){if(F)return!0;if(g!=null&&g.targetingLogic&&x){let b=x.find(v=>v.flowId===g.slug);if(b)return b.shouldTrigger===!1}return!!(g!=null&&g.targetingLogic&&i&&i.startsWith("guest_"))}function Be(g){return!j(W(g))}return{getFlow:W,getFlowData:bt,isLoading:F||N,getStepStatus:I,getFlowSteps:H,getCurrentStepIndex:ge,markStepStarted:ne,markStepCompleted:D,markFlowNotStarted:we,markFlowStarted:xe,markFlowCompleted:te,markFlowAborted:V,markStepNotStarted:pe,getFlowStatus:K,getNumberOfStepsCompleted:Ve,getNumberOfSteps:Ge,targetingLogicShouldHideFlow:j,setCustomVariable:$,updateCustomVariables:O,customVariables:r,getStepOptionalProgress:Z,getFlowMetadata:U,isStepBlocked:se,isStepHidden:fe,hasActiveFullPageFlow:p,setHasActiveFullPageFlow:c,isFlowAvailableToUser:Be}}import{useCallback as yr,useContext as al,useEffect as pl}from"react";var Ft="guest_";function Ht(){let{userId:e,organizationId:t,setUserId:o,setUserProperties:i,shouldGracefullyDegrade:n}=al(q),{config:r}=Me(),{mutateUserFlowState:s}=Ie(),p=wt(),{verifySDKInitiated:c}=Tt();pl(()=>{if(e&&!t){if(e.startsWith(Ft))return;let d=`frigade-user-registered-${e}`;localStorage.getItem(d)||(p(`${Te}users`,{...r,method:"POST",body:JSON.stringify({foreignId:e})}),localStorage.setItem(d,"true"))}},[e,n,t]);let a=yr(async d=>{c();let u={foreignId:e,properties:d};await p(`${Te}users`,{...r,method:"POST",body:JSON.stringify(u)}),i(y=>({...y,...d})),s()},[e,r,n,s]),C=yr(async(d,u)=>{c();let E={foreignId:e,events:[{event:d,properties:u}]};await p(`${Te}users`,{...r,method:"POST",body:JSON.stringify(E)}),s()},[e,r,s]);return{userId:e,setUserId:o,addPropertiesToUser:a,trackEventForUser:C}}import{v4 as Oa}from"uuid";import _e,{useEffect as Ba,useState as Aa}from"react";import De,{useEffect as hl}from"react";import po from"styled-components";import dl from"react";import cl from"styled-components";var br="fr-",jt="cfr-";function l(e,t){let o=`${br}${e}`;if(!t)return o;if(t.styleOverrides&&t.styleOverrides[e]){if(typeof t.styleOverrides[e]=="string")return o+" "+t.styleOverrides[e];if(typeof t.styleOverrides[e]=="object")return o+" "+jt+e}return o}function T(e){if(!e.className||e.className.indexOf(jt)!==-1)return"";let o=e.className.replace(/\s+/g," ").split(" ");return o.length==1&&o[0].startsWith(br)?"":`:not(${o.map(i=>`.${i}`).join(", ")})`}function $o(e){return e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase()}function Ke(e){return e!=null&&e.styleOverrides?Object.keys(e.styleOverrides).map(t=>`${$o(t)}: ${e.styleOverrides[t]};`).join(" "):""}function Ce(...e){return e.filter(Boolean).join(" ")}function wr(e){return e.charAt(0).toUpperCase()+e.slice(1)}var ml=cl.div`
   display: flex;
   justify-content: center;
   position: fixed;
@@ -289,7 +289,7 @@ import gt,{createContext as Da,useEffect as Fo,useState as Ne}from"react";import
   min-height: 70px;
   box-sizing: border-box;
   margin-bottom: 10px;
-`;function Vo({formInput:e,customFormTypeProps:t,onSaveInputData:o,setFormValidationErrors:i,inputData:n}){let r=e,[s,p]=Hr((n==null?void 0:n.text)||""),[c,a]=Hr(!1),C=jo;Bl(()=>{s===""&&!c&&(a(!0),d(""))},[]);function d(y){if(p(y),o({text:y}),r.required===!0&&y.trim()===""){i([{id:r.id,message:`${r.title} is required`}]);return}let E=Wr(y,r.validation);if(E){i([{id:r.id,message:E}]);return}i([])}r.multiline&&(C=Il);function u(){var y;switch((y=r==null?void 0:r.validation)==null?void 0:y.type){case"email":return"email";case"number":return"number";case"password":return"password"}return null}return fo.createElement(Al,null,fo.createElement(nt,{title:r.title,required:r.required,appearance:t.appearance}),fo.createElement(C,{className:l("inputComponent",t.appearance),value:s,onChange:y=>{d(y.target.value)},appearance:t.appearance,placeholder:r.placeholder,type:u()}),fo.createElement(kt,{title:r.subtitle,appearance:t.appearance}))}import Ue,{useEffect as jr,useState as Vr}from"react";import Gr from"styled-components";var Nl=Gr.div`
+`;function Vo({formInput:e,customFormTypeProps:t,onSaveInputData:o,setFormValidationErrors:i,inputData:n}){let r=e,[s,p]=Hr((n==null?void 0:n.text)||""),[c,a]=Hr(!1),C=jo;Bl(()=>{s===""&&!c&&(a(!0),d(""))},[]);function d(y){if(p(y),o({text:y}),r.required===!0&&y.trim()===""){i([{id:r.id,message:`${r.title??"Field"} is required`}]);return}let E=Wr(y,r.validation);if(E){i([{id:r.id,message:E}]);return}i([])}r.multiline&&(C=Il);function u(){var y;switch((y=r==null?void 0:r.validation)==null?void 0:y.type){case"email":return"email";case"number":return"number";case"password":return"password"}return null}return fo.createElement(Al,null,fo.createElement(nt,{title:r.title,required:r.required,appearance:t.appearance}),fo.createElement(C,{className:l("inputComponent",t.appearance),value:s,onChange:y=>{d(y.target.value)},appearance:t.appearance,placeholder:r.placeholder,type:u()}),fo.createElement(kt,{title:r.subtitle,appearance:t.appearance}))}import Ue,{useEffect as jr,useState as Vr}from"react";import Gr from"styled-components";var Nl=Gr.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -319,7 +319,7 @@ import gt,{createContext as Da,useEffect as Fo,useState as Ne}from"react";import
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
   -webkit-print-color-adjust: exact;
-`,go="null";function qr({formInput:e,customFormTypeProps:t,onSaveInputData:o,inputData:i,setFormValidationErrors:n}){var C,d,u,y,E,f;let r=e,[s,p]=Vr(((C=i==null?void 0:i.choice)==null?void 0:C[0])||""),[c,a]=Vr(!1);return jr(()=>{var x,F,k,B;if(s===""&&!c){if(a(!0),r.requireSelection){p(go);return}if(r.defaultValue&&((x=r.props.options)!=null&&x.find(P=>P.id===r.defaultValue))){let P=(F=r.props.options)==null?void 0:F.find(S=>S.id===r.defaultValue);p(P.id),o({choice:[P.id]})}else p(((k=r.props.options)==null?void 0:k[0].id)||""),o({choice:[((B=r.props.options)==null?void 0:B[0].id)||""]})}},[]),jr(()=>{r.requireSelection&&s===go?n([{message:"Please select an option",id:r.id}]):n([])},[s]),Ue.createElement(Nl,null,Ue.createElement(nt,{title:r.title,required:!1,appearance:t.appearance}),Ue.createElement(Ll,{value:s,onChange:x=>{p(x.target.value),o({choice:[x.target.value]})},placeholder:r.placeholder,appearance:t.appearance,className:l("multipleChoiceSelect",t.appearance)},r.requireSelection&&Ue.createElement("option",{key:go,value:go},"Select an option"),(d=r.props.options)==null?void 0:d.map(x=>Ue.createElement("option",{key:x.id,value:x.id},x.title))),((y=(u=r.props.options)==null?void 0:u.find(x=>x.id===s))==null?void 0:y.isOpenEnded)&&Ue.createElement(Ue.Fragment,null,Ue.createElement(nt,{title:((f=(E=r.props.options)==null?void 0:E.find(x=>x.id===s))==null?void 0:f.openEndedLabel)??"Please specify",required:!1,appearance:t.appearance}),Ue.createElement(jo,{type:"text",placeholder:"Enter your answer here",onChange:x=>{o({choice:[x.target.value]})},appearance:t.appearance})),Ue.createElement(kt,{title:r.subtitle,appearance:t.appearance}))}import qt,{useEffect as Go,useState as Yr}from"react";import Xr from"styled-components";import Gt from"react";import Vt from"react";import{motion as Ol}from"framer-motion";var Kr=({color:e,percentage:t,size:o})=>{let i=o*.5-2,n=2*Math.PI*i,r=(1-t)*n,s={duration:.3,delay:0,ease:"easeIn"},p={hidden:{strokeDashoffset:n,transition:s},show:{strokeDashoffset:r,transition:s}};return Vt.createElement(Ol.circle,{r:i,cx:o*.5,cy:o*.5,fill:"transparent",stroke:r!==n?e:"",strokeWidth:"3px",strokeDasharray:n,strokeDashoffset:t?r:0,variants:p,transition:s,initial:"hidden",animate:"show"})},Dl=({fillColor:e,size:t,percentage:o,children:i,bgColor:n="#D9D9D9",className:r,style:s})=>Vt.createElement("svg",{style:s,className:r,width:t,height:t,overflow:"visible"},Vt.createElement("g",{transform:`rotate(-90 ${`${t*.5} ${t*.5}`})`},Vt.createElement(Kr,{color:n,size:t}),Vt.createElement(Kr,{color:e,percentage:o,size:t})),i),Pt=Dl;import $l from"styled-components";var Ml=({color:e="#FFFFFF"})=>Gt.createElement("svg",{width:10,height:8,viewBox:"0 0 10 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Gt.createElement("path",{d:"M1 4.34815L3.4618 7L3.4459 6.98287L9 1",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})),Ul={width:"22px",height:"22px",borderRadius:"8px",display:"flex",justifyContent:"center",alignItems:"center"},_l={width:"22px",height:"22px",borderRadius:"40px",display:"flex",justifyContent:"center",alignItems:"center"},zl={border:"1px solid #000000",color:"#FFFFFF"},Wl={border:"1px solid #E6E6E6"},Hl={color:"#FFFFFF"},jl={border:"3px solid #D9D9D9"},Vl=e=>e==="square"?Ul:_l,Gl=(e,t)=>e==="square"?t?zl:Wl:t?Hl:jl,ql=$l.div`
+`,go="null";function qr({formInput:e,customFormTypeProps:t,onSaveInputData:o,inputData:i,setFormValidationErrors:n}){var C,d,u,y,E,f;let r=e,[s,p]=Vr(((C=i==null?void 0:i.choice)==null?void 0:C[0])||""),[c,a]=Vr(!1);return jr(()=>{var x,F,k,B;if(s===""&&!c){if(a(!0),r.requireSelection){p(go);return}if(r.defaultValue&&((x=r.props.options)!=null&&x.find(P=>P.id===r.defaultValue))){let P=(F=r.props.options)==null?void 0:F.find(S=>S.id===r.defaultValue);p(P.id),o({choice:[P.id]})}else p(((k=r.props.options)==null?void 0:k[0].id)||""),o({choice:[((B=r.props.options)==null?void 0:B[0].id)||""]})}},[]),jr(()=>{r.requireSelection&&s===go?n([{message:r.placeholder?r.placeholder:"Please select an option",id:r.id}]):n([])},[s]),Ue.createElement(Nl,null,Ue.createElement(nt,{title:r.title,required:!1,appearance:t.appearance}),Ue.createElement(Ll,{value:s,onChange:x=>{p(x.target.value),o({choice:[x.target.value]})},placeholder:r.placeholder,appearance:t.appearance,className:l("multipleChoiceSelect",t.appearance)},r.requireSelection&&Ue.createElement("option",{key:go,value:go},"Select an option"),(d=r.props.options)==null?void 0:d.map(x=>Ue.createElement("option",{key:x.id,value:x.id},x.title))),((y=(u=r.props.options)==null?void 0:u.find(x=>x.id===s))==null?void 0:y.isOpenEnded)&&Ue.createElement(Ue.Fragment,null,Ue.createElement(nt,{title:((f=(E=r.props.options)==null?void 0:E.find(x=>x.id===s))==null?void 0:f.openEndedLabel)??"Please specify",required:!1,appearance:t.appearance}),Ue.createElement(jo,{type:"text",placeholder:"Enter your answer here",onChange:x=>{o({choice:[x.target.value]})},appearance:t.appearance})),Ue.createElement(kt,{title:r.subtitle,appearance:t.appearance}))}import qt,{useEffect as Go,useState as Yr}from"react";import Xr from"styled-components";import Gt from"react";import Vt from"react";import{motion as Ol}from"framer-motion";var Kr=({color:e,percentage:t,size:o})=>{let i=o*.5-2,n=2*Math.PI*i,r=(1-t)*n,s={duration:.3,delay:0,ease:"easeIn"},p={hidden:{strokeDashoffset:n,transition:s},show:{strokeDashoffset:r,transition:s}};return Vt.createElement(Ol.circle,{r:i,cx:o*.5,cy:o*.5,fill:"transparent",stroke:r!==n?e:"",strokeWidth:"3px",strokeDasharray:n,strokeDashoffset:t?r:0,variants:p,transition:s,initial:"hidden",animate:"show"})},Dl=({fillColor:e,size:t,percentage:o,children:i,bgColor:n="#D9D9D9",className:r,style:s})=>Vt.createElement("svg",{style:s,className:r,width:t,height:t,overflow:"visible"},Vt.createElement("g",{transform:`rotate(-90 ${`${t*.5} ${t*.5}`})`},Vt.createElement(Kr,{color:n,size:t}),Vt.createElement(Kr,{color:e,percentage:o,size:t})),i),Pt=Dl;import $l from"styled-components";var Ml=({color:e="#FFFFFF"})=>Gt.createElement("svg",{width:10,height:8,viewBox:"0 0 10 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Gt.createElement("path",{d:"M1 4.34815L3.4618 7L3.4459 6.98287L9 1",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})),Ul={width:"22px",height:"22px",borderRadius:"8px",display:"flex",justifyContent:"center",alignItems:"center"},_l={width:"22px",height:"22px",borderRadius:"40px",display:"flex",justifyContent:"center",alignItems:"center"},zl={border:"1px solid #000000",color:"#FFFFFF"},Wl={border:"1px solid #E6E6E6"},Hl={color:"#FFFFFF"},jl={border:"3px solid #D9D9D9"},Vl=e=>e==="square"?Ul:_l,Gl=(e,t)=>e==="square"?t?zl:Wl:t?Hl:jl,ql=$l.div`
   ${e=>Ke(e)}
 `,Xe=({value:e,type:t="square",primaryColor:o="#000000",progress:i,appearance:n=Ye,style:r,className:s})=>{let p=Vl(t),c=Gl(t,e);return e===!0?p={...p,...c,backgroundColor:o,borderColor:t==="square"?o:"none"}:p={...p,...c},e!==!0&&t==="round"&&i!==void 0&&i!==1?Gt.createElement(Pt,{fillColor:o,percentage:i,size:22}):Gt.createElement(ql,{styleOverrides:p,style:r,role:"checkbox",className:Ce(l("checkIconContainer",n),l(e?"checkIconContainerChecked":"checkIconContainerUnchecked",n),e?"checkIconContainerChecked":"checkIconContainerUnchecked",s)},e&&Gt.createElement(Ml,{color:"#FFFFFF"}))};var Kl=Xr.div`
   display: flex;