@flows/react-components/dist/chunk-L5UHJ6SK.mjs

Built-in components for Flows React SDK

"use client"
var at=Object.defineProperty,lt=Object.defineProperties;var ct=Object.getOwnPropertyDescriptors;var k=Object.getOwnPropertySymbols;var Y=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var G=(t,e,n)=>e in t?at(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,v=(t,e)=>{for(var n in e||(e={}))Y.call(e,n)&&G(t,n,e[n]);if(k)for(var n of k(e))q.call(e,n)&&G(t,n,e[n]);return t},W=(t,e)=>lt(t,ct(e));var T=(t,e)=>{var n={};for(var o in t)Y.call(t,o)&&e.indexOf(o)<0&&(n[o]=t[o]);if(t!=null&&k)for(var o of k(t))e.indexOf(o)<0&&q.call(t,o)&&(n[o]=t[o]);return n};import{useCallback as mt}from"react";import{clsx as ut}from"clsx";import{jsx as X}from"react/jsx-runtime";var dt=(t,e)=>{if(e==="_blank")return!1;try{let n=new URL(t);return!1}catch(n){return!0}},Q=r=>{var s=r,{className:t,variant:e,size:n="default"}=s,o=T(s,["className","variant","size"]);let i=ut("flows_basicsV2_button",`flows_basicsV2_button_${e}`,`flows_basicsV2_button_size_${n}`,t),m=window.__flows_LinkComponent,c=o.href;if(m&&typeof m=="function"&&c&&dt(c,o.target))return X(m,{href:c,className:i,onClick:o.onClick,children:o.children});let l=o.href?"a":"button";return X(l,v({type:l==="button"?"button":void 0,className:i},o))};import{jsx as ft}from"react/jsx-runtime";var u=({action:t,variant:e,size:n,onClick:o,className:r})=>{let s=mt(()=>{var i;o==null||o(),(i=t.callAction)==null||i.call(t)},[t,o]);return ft(Q,{variant:e,size:n,href:t.url,target:t.openInNew?"_blank":void 0,onClick:s,className:r,children:t.label})};import{clsx as _t}from"clsx";import{jsx as yt}from"react/jsx-runtime";var d=o=>{var r=o,{className:t,variant:e}=r,n=T(r,["className","variant"]);return yt("p",v({className:_t("flows_basicsV2_text",`flows_basicsV2_text_${e}`,t)},n))};import gt from"dompurify";import{jsx as Z}from"react/jsx-runtime";function h(t){return Z("svg",W(v({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},t),{children:Z("path",{d:"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"})}))}import{clsx as bt}from"clsx";import{jsx as pt}from"react/jsx-runtime";var N=n=>{var o=n,{className:t}=o,e=T(o,["className"]);return pt("button",v({type:"button",className:bt("flows_basicsV2_iconButton",t)},e))};import{jsx as _,jsxs as K}from"react/jsx-runtime";var Ee=t=>{var o;let e=[];t.primaryButton&&e.push(_(u,{action:t.primaryButton,variant:"primary"},"primary")),t.secondaryButton&&e.push(_(u,{action:t.secondaryButton,variant:"secondary"},"secondary")),t.tour&&e.reverse();let n=(()=>{if(Number(t.width)!==0)return Number.isNaN(Number(t.width))?t.width:`${t.width}px`})();return K("div",{className:"flows_basicsV2_card",style:{width:"100%",maxWidth:n},children:[_(d,{variant:"title",className:"flows_basicsV2_card_title",children:t.title}),_(d,{variant:"body",dangerouslySetInnerHTML:{__html:gt.sanitize(t.body,{FORCE_BODY:!0,ADD_ATTR:["target"]})}}),!t.tour&&e.length?_("div",{className:"flows_basicsV2_card_footer",children:_("div",{className:"flows_basicsV2_card_buttons",children:e})}):null,t.tour&&((o=t.dots)!=null?o:e.length)?K("div",{className:"flows_basicsV2_card_footer",children:[t.dots,e.length?_("div",{className:"flows_basicsV2_card_buttons_wrapper",children:_("div",{className:"flows_basicsV2_card_buttons",children:e})}):null]}):null,t.onClose?_(N,{"aria-label":"Close",className:"flows_basicsV2_card_close",onClick:t.onClose,children:_(h,{})}):null]})};import{flip as Et,autoUpdate as Tt,offset as Vt,shift as Rt,useFloating as J}from"@floating-ui/react-dom";var wt="#22262d",vt="#fff",L="%cFlows%c",I=`color:${vt};background:${wt};padding:2px 4px;border-radius:4px`,D={error:(t,...e)=>{console.error(`${L} ${t}`,I,"",...e)},warn:(t,...e)=>{console.warn(`${L} ${t}`,I,"",...e)},info:(t,...e)=>{console.info(`${L} ${t}`,I,"",...e)}};import{useCallback as j,useEffect as $,useRef as xt,useState as tt}from"react";import Ft from"dompurify";import{useEffect as ht,useState as Nt}from"react";var S=()=>{let[t,e]=Nt(!0);return ht(()=>{e(!1)},[]),t};import{useState as Ct,useEffect as At}from"react";var Bt=t=>typeof window=="undefined"?null:document.querySelector(t);function O(t){let[e,n]=Ct(t?Bt(t):null);return At(()=>{if(!t){n(null);return}let o=()=>{let s=document.querySelector(t);n(i=>i!==s?s:i)};o();let r=new MutationObserver(s=>{s.some(m=>m.addedNodes.length>0||m.removedNodes.length>0)&&o()});return r.observe(document.documentElement,{childList:!0,subtree:!0}),()=>{r.disconnect()}},[t]),e}import{Fragment as St,jsx as b,jsxs as z}from"react/jsx-runtime";var Pt=300,kt=8,Dt=4,et="data-flows-hint-target",ot=(t,e,n)=>Tt(t,e,n,{animationFrame:!0}),Ge=t=>{var V,R,g;let e=S(),[n,o]=tt(!1),[r,s]=tt(!1),i=xt(null),m=j(()=>{var w;o(!0),s(!1),window.clearTimeout((w=i.current)!=null?w:void 0),i.current=null},[]),c=j(()=>{s(!0),i.current=window.setTimeout(()=>{o(!1),s(!1),i.current=null},Pt)},[]),l=O(t.targetElement),C=J({placement:t.placement,elements:{reference:l},whileElementsMounted:ot,transform:!1}),B=C.refs.floating,p=J({placement:"bottom",elements:{reference:C.refs.floating.current},whileElementsMounted:ot,transform:!1,middleware:[Et({fallbackPlacements:["top","bottom","left","right"]}),Rt({crossAxis:!0,padding:kt}),Vt(Dt)]}),x=p.refs.floating;if($(()=>{let w=F=>{let E=F.target,a=x.current,P=B.current;if(!a||!E.isConnected)return;!a.contains(E)&&!(P!=null&&P.contains(E))&&c()};return window.addEventListener("click",w),()=>{window.removeEventListener("click",w)}},[c,B,x]),$(()=>(l==null||l.setAttribute(et,"true"),()=>{l==null||l.removeAttribute(et)}),[l]),$(()=>{t.targetElement||D.error("Cannot render Hint without target element")},[t.targetElement]),!l||e)return null;let A=[];return t.secondaryButton&&A.push(b(u,{action:t.secondaryButton,variant:"secondary"},"secondary")),t.primaryButton&&A.push(b(u,{action:t.primaryButton,variant:"primary"},"primary")),z(St,{children:[b("button",{ref:C.refs.setFloating,style:{left:C.x+((V=t.offsetX)!=null?V:0),top:C.y+((R=t.offsetY)!=null?R:0)},"aria-label":"Open hint",type:"button",className:"flows_basicsV2_hint_hotspot",onClick:n&&!r?c:m}),n?z("div",{className:"flows_basicsV2_tooltip_tooltip flows_basicsV2_hint_tooltip","data-open":r?"false":"true",ref:p.refs.setFloating,style:{left:p.x,top:p.y},children:[b(d,{className:"flows_basicsV2_tooltip_title",variant:"title",children:t.title}),b(d,{variant:"body",className:"flows_basicsV2_tooltip_body",dangerouslySetInnerHTML:{__html:Ft.sanitize(t.body,{FORCE_BODY:!0,ADD_ATTR:["target"]})}}),((g=t.dots)!=null?g:A.length)?z("div",{className:"flows_basicsV2_tooltip_footer",children:[t.dots,A.length?b("div",{className:"flows_basicsV2_tooltip_buttons_wrapper",children:b("div",{className:"flows_basicsV2_tooltip_buttons",children:A})}):null]}):null,t.onClose?b(N,{"aria-label":"Close",className:"flows_basicsV2_tooltip_close",onClick:t.onClose,children:b(h,{})}):null]}):null]})};import{clsx as Ot}from"clsx";import Mt from"dompurify";import{Fragment as Lt,jsx as y,jsxs as nt}from"react/jsx-runtime";var je=t=>{let e=t.position||"center",n=t.size||"small",o=[];return t.secondaryButton&&o.push(y(u,{action:t.secondaryButton,variant:"secondary"},"secondary")),t.primaryButton&&o.push(y(u,{action:t.primaryButton,variant:"primary"},"primary")),nt(Lt,{children:[t.overlay?y("div",{className:"flows_basicsV2_modal_overlay",onClick:t.onClose,"aria-hidden":"true"}):null,y("div",{className:"flows_basicsV2_modal_wrapper",children:nt("div",{className:Ot("flows_basicsV2_modal_modal",`flows_basicsV2_modal_${e}`,`flows_basicsV2_modal_width_${n}`),children:[y(d,{className:"flows_basicsV2_modal_title",variant:"title",children:t.title}),y(d,{className:"flows_basicsV2_modal_body",variant:"body",dangerouslySetInnerHTML:{__html:Mt.sanitize(t.body,{FORCE_BODY:!0,ADD_ATTR:["target"]})}}),t.dots?y("div",{className:"flows_basicsV2_modal_dots",children:t.dots}):null,o.length?y("div",{className:"flows_basicsV2_modal_footer",children:o}):null,t.onClose?y(N,{"aria-label":"Close",className:"flows_basicsV2_modal_close",onClick:t.onClose,children:y(h,{})}):null]})})]})};import{arrow as It,flip as $t,autoUpdate as zt,offset as Ut,shift as Ht,useFloating as Gt}from"@floating-ui/react-dom";import{clsx as st}from"clsx";import{useCallback as Yt,useEffect as M,useMemo as qt,useRef as U,useState as Wt}from"react";import Xt from"dompurify";import{jsx as f,jsxs as H}from"react/jsx-runtime";var Qt=4,rt=6,Zt=Qt+rt,Kt=8,Jt=8,it="data-flows-tooltip-target",jt=(t,e,n)=>zt(t,e,n,{animationFrame:!0}),_o=t=>{var w,F,E;let e=S(),n=U(null),o=U(null),r=U(null),s=O(t.targetElement),{refs:i,middlewareData:m,placement:c,x:l,y:C}=Gt({placement:t.placement,elements:{reference:s},whileElementsMounted:jt,middleware:[$t({fallbackPlacements:["top","bottom","left","right"]}),Ht({crossAxis:!0,padding:Kt}),It({element:o,padding:Jt}),Ut(Zt)]}),[B,p]=Wt(!1);M(()=>{s||p(!1)},[s]),M(()=>{if(B)return;let a=i.floating.current;if(!a)return;window.getComputedStyle(a).animationName!=="none"||p(!0)},[B,i.floating]);let x=Yt(()=>{p(!0)},[]),A=qt(()=>c.includes("top")?"bottom":c.includes("bottom")?"top":c.includes("left")?"right":"left",[c]);if(M(()=>(s==null||s.setAttribute(it,"true"),()=>{s==null||s.removeAttribute(it)}),[s]),M(()=>{t.targetElement||D.error("Cannot render Tooltip without target element")},[t.targetElement]),!s||e)return null;i.floating.current&&(i.floating.current.style.left=`${l}px`,i.floating.current.style.top=`${C}px`);let V=(w=m.arrow)==null?void 0:w.x,R=(F=m.arrow)==null?void 0:F.y;if([o,n].forEach(a=>{a.current&&(a.current.style.left=V!=null?`${V}px`:"",a.current.style.top=R!=null?`${R}px`:"",a.current.style.right="",a.current.style.bottom="",a.current.style[A]=`${-rt}px`)}),r.current){let a=s.getBoundingClientRect();r.current.style.top=`${a.top}px`,r.current.style.left=`${a.left}px`,r.current.style.width=`${a.width}px`,r.current.style.height=`${a.height}px`}let g=[];return t.secondaryButton&&g.push(f(u,{action:t.secondaryButton,variant:"secondary"},"secondary")),t.primaryButton&&g.push(f(u,{action:t.primaryButton,variant:"primary"},"primary")),H("div",{className:"flows_basicsV2_tooltip_root",children:[t.overlay?f("div",{className:"flows_basicsV2_tooltip_overlay",ref:r}):null,H("div",{className:"flows_basicsV2_tooltip_tooltip",ref:i.setFloating,"data-open":B?"true":"false",onAnimationEnd:x,children:[f(d,{className:"flows_basicsV2_tooltip_title",variant:"title",children:t.title}),f(d,{variant:"body",className:"flows_basicsV2_tooltip_body",dangerouslySetInnerHTML:{__html:Xt.sanitize(t.body,{FORCE_BODY:!0,ADD_ATTR:["target"]})}}),((E=t.dots)!=null?E:g.length)?H("div",{className:"flows_basicsV2_tooltip_footer",children:[t.dots,g.length?f("div",{className:"flows_basicsV2_tooltip_buttons_wrapper",children:f("div",{className:"flows_basicsV2_tooltip_buttons",children:g})}):null]}):null,t.onClose?f(N,{"aria-label":"Close",className:"flows_basicsV2_tooltip_close",onClick:t.onClose,children:f(h,{})}):null,f("div",{className:st("flows_basicsV2_tooltip_arrow","flows_basicsV2_tooltip_arrow-bottom"),ref:o}),f("div",{className:st("flows_basicsV2_tooltip_arrow","flows_basicsV2_tooltip_arrow-top"),ref:n})]})]})};export{v as a,W as b,u as c,d,Ee as e,Ge as f,je as g,_o as h};